/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-width: 0;
min-height: 0;
}
html{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
height: 100%; /* to make everything relative to the window (also need to be set a body) */
}
body{
margin: 0; /* reset any padding/margin to 0, MainView will set the appropriate ones */
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex; /* We start the flex box at the body */
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%; /* Make sure the body take the full screen */
height: 100%;
font-family: 'Karla';
font-size: 14px;
font-weight: 400;
font-smoothing: antialiased;
}
body > section.content{
position: absolute;
top: 50px; right: 0; bottom: 0; left: 0;
border: solid 1px red;
}
a{
cursor: pointer;
}
a.action{
font-size: 12px;
display: block;
}
.visible{
visibility: visible !important;
}
.dragging{
position: fixed;
cursor: pointer;
}
.transparent-screen{
position: fixed;
left: 0px;
top:0px;
bottom: 0px;
right:0px;
}
.transitioning{
-webkit-transition: all .3s ease-in;
transition: all .3s ease-in;
}
.transitioning-out{
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.transitioning-transform{
-webkit-transition: -webkit-transform .3s ease-in;
transition: -webkit-transform .3s ease-in;
transition: transform .3s ease-in;
transition: transform .3s ease-in, -webkit-transform .3s ease-in;
}
.app_version{
position: absolute;
z-index: 9999;
bottom: 2px;
right: 8px;
color: #333333;
font-size: 24px;
-webkit-transform: scale(.4);
transform: scale(.4);
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
/* --------- Debug --------- */
.debug-grid-system{
z-index:9999;
}
.debug-grid-system-canvas{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: fixed;
z-index: 9998;
display: none;
}
.debug-grid-system .toggle-grid{
position: absolute;
right:10px;
bottom:15px;
top:auto;
z-index: 9999;
}
/* --------- /Debug --------- */
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
@-webkit-keyframes clockwise {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
10% {
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
20% {
-webkit-transform: rotate(72deg);
transform: rotate(72deg);
}
30% {
-webkit-transform: rotate(108deg);
transform: rotate(108deg);
}
40% {
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
60% {
-webkit-transform: rotate(216deg);
transform: rotate(216deg);
}
70% {
-webkit-transform: rotate(252deg);
transform: rotate(252deg);
}
80% {
-webkit-transform: rotate(288deg);
transform: rotate(288deg);
}
90% {
-webkit-transform: rotate(324deg);
transform: rotate(324deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes clockwise {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
10% {
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
20% {
-webkit-transform: rotate(72deg);
transform: rotate(72deg);
}
30% {
-webkit-transform: rotate(108deg);
transform: rotate(108deg);
}
40% {
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
60% {
-webkit-transform: rotate(216deg);
transform: rotate(216deg);
}
70% {
-webkit-transform: rotate(252deg);
transform: rotate(252deg);
}
80% {
-webkit-transform: rotate(288deg);
transform: rotate(288deg);
}
90% {
-webkit-transform: rotate(324deg);
transform: rotate(324deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes state-lockdown-border {
0% {
border-color: #DA4F4A;
}
10% {
border-color: rgba(218, 79, 74, 0.19999999999999996);
}
20% {
border-color: rgba(218, 79, 74, 0.4);
}
30% {
border-color: rgba(218, 79, 74, 0.6);
}
40% {
border-color: rgba(218, 79, 74, 0.8);
}
50% {
border-color: rgb(218, 79, 74);
}
60% {
border-color: rgba(218, 79, 74, 0.8);
}
70% {
border-color: rgba(218, 79, 74, 0.6);
}
80% {
border-color: rgba(218, 79, 74, 0.4);
}
90% {
border-color: rgba(218, 79, 74, 0.19999999999999996);
}
100% {
border-color: rgba(218, 79, 74, 0);
}
}
@keyframes state-lockdown-border {
0% {
border-color: #DA4F4A;
}
10% {
border-color: rgba(218, 79, 74, 0.19999999999999996);
}
20% {
border-color: rgba(218, 79, 74, 0.4);
}
30% {
border-color: rgba(218, 79, 74, 0.6);
}
40% {
border-color: rgba(218, 79, 74, 0.8);
}
50% {
border-color: rgb(218, 79, 74);
}
60% {
border-color: rgba(218, 79, 74, 0.8);
}
70% {
border-color: rgba(218, 79, 74, 0.6);
}
80% {
border-color: rgba(218, 79, 74, 0.4);
}
90% {
border-color: rgba(218, 79, 74, 0.19999999999999996);
}
100% {
border-color: rgba(218, 79, 74, 0);
}
}
@-webkit-keyframes state-lockdown-bg {
0% {
background: #DA4F4A;
}
10% {
background: rgba(218, 79, 74, 0.19999999999999996);
}
20% {
background: rgba(218, 79, 74, 0.4);
}
30% {
background: rgba(218, 79, 74, 0.6);
}
40% {
background: rgba(218, 79, 74, 0.8);
}
50% {
background: rgb(218, 79, 74);
}
60% {
background: rgba(218, 79, 74, 0.8);
}
70% {
background: rgba(218, 79, 74, 0.6);
}
80% {
background: rgba(218, 79, 74, 0.4);
}
90% {
background: rgba(218, 79, 74, 0.19999999999999996);
}
100% {
background: rgba(218, 79, 74, 0);
}
}
@keyframes state-lockdown-bg {
0% {
background: #DA4F4A;
}
10% {
background: rgba(218, 79, 74, 0.19999999999999996);
}
20% {
background: rgba(218, 79, 74, 0.4);
}
30% {
background: rgba(218, 79, 74, 0.6);
}
40% {
background: rgba(218, 79, 74, 0.8);
}
50% {
background: rgb(218, 79, 74);
}
60% {
background: rgba(218, 79, 74, 0.8);
}
70% {
background: rgba(218, 79, 74, 0.6);
}
80% {
background: rgba(218, 79, 74, 0.4);
}
90% {
background: rgba(218, 79, 74, 0.19999999999999996);
}
100% {
background: rgba(218, 79, 74, 0);
}
}
@-webkit-keyframes state-lockdown-color {
0% {
color: #DA4F4A;
}
10% {
color: rgba(218, 79, 74, 0.19999999999999996);
}
20% {
color: rgba(218, 79, 74, 0.4);
}
30% {
color: rgba(218, 79, 74, 0.6);
}
40% {
color: rgba(218, 79, 74, 0.8);
}
50% {
color: rgb(218, 79, 74);
}
60% {
color: rgba(218, 79, 74, 0.8);
}
70% {
color: rgba(218, 79, 74, 0.6);
}
80% {
color: rgba(218, 79, 74, 0.4);
}
90% {
color: rgba(218, 79, 74, 0.19999999999999996);
}
100% {
color: rgba(218, 79, 74, 0);
}
}
@keyframes state-lockdown-color {
0% {
color: #DA4F4A;
}
10% {
color: rgba(218, 79, 74, 0.19999999999999996);
}
20% {
color: rgba(218, 79, 74, 0.4);
}
30% {
color: rgba(218, 79, 74, 0.6);
}
40% {
color: rgba(218, 79, 74, 0.8);
}
50% {
color: rgb(218, 79, 74);
}
60% {
color: rgba(218, 79, 74, 0.8);
}
70% {
color: rgba(218, 79, 74, 0.6);
}
80% {
color: rgba(218, 79, 74, 0.4);
}
90% {
color: rgba(218, 79, 74, 0.19999999999999996);
}
100% {
color: rgba(218, 79, 74, 0);
}
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
/* --------- btn --------- */
button, .btn{
border-radius: 28px;
height: 28px;
background: #CECECE;
color: white;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 4px 8px;
position: relative;
outline:none;
outline-offset: 0px;
font-size: 13px;
font-weight: 300;
}
button.bt-arrow:before,.btn.bt-arrow:before{
content: " ";
position: absolute;
left: 50%;
bottom: -18px;
margin-left: -8px;
border: 8px solid transparent;
border-top: 10px solid #CECECE;
}
button.btn-default,.btn.btn-default{
background: #999;
color: white;
border-color: #999;
}
button.btn-default:focus, button.btn-default:active, .btn.btn-default:focus, .btn.btn-default:active{
background: #999;
color: white;
}
button.btn-default:hover,.btn.btn-default:hover{
border-color: #999;
}
button.btn-default.bt-arrow:before,.btn.btn-default.bt-arrow:before{
border-top-color: #999;
}
button.btn-prime,.btn.btn-prime{
background: #006BB2;
color: #FFFFFF;
border-color: #006BB2;
}
button.btn-prime:focus, button.btn-prime:active, .btn.btn-prime:focus, .btn.btn-prime:active{
background: #006BB2;
color: #FFFFFF;
}
button.btn-prime:hover,.btn.btn-prime:hover{
border-color: #006BB2;
}
button.btn-prime .icon,.btn.btn-prime .icon{
fill: #FFFFFF;
}
button.btn-prime.bt-arrow:before,.btn.btn-prime.bt-arrow:before{
border-top-color: #006BB2;
}
button.btn-prime-secondary,.btn.btn-prime-secondary{
border: 1px solid #006BB2;
background: white;
color: #006BB2;
border-color: #006BB2;
}
button.btn-prime-secondary:focus, button.btn-prime-secondary:active, .btn.btn-prime-secondary:focus, .btn.btn-prime-secondary:active{
border: 1px solid #006BB2;
background: white;
color: #006BB2;
}
button.btn-prime-secondary:hover,.btn.btn-prime-secondary:hover{
border-color: #006BB2;
}
button.btn-prime-secondary .icon,.btn.btn-prime-secondary .icon{
fill: #006BB2;
}
button.btn-success,.btn.btn-success{
background: #72B864;
color: #FFFFFF;
border-color: #72B864;
}
button.btn-success:focus, button.btn-success:active, .btn.btn-success:focus, .btn.btn-success:active{
background: #72B864;
color: #FFFFFF;
}
button.btn-success:hover,.btn.btn-success:hover{
border-color: #72B864;
}
button.btn-success .icon,.btn.btn-success .icon{
fill: #FFFFFF;
}
button.btn-success.bt-arrow:before,.btn.btn-success.bt-arrow:before{
border-top-color: #72B864;
}
button.btn-success-secondary,.btn.btn-success-secondary{
border: 1px solid #72B864;
background: white;
color: #72B864;
border-color: #72B864;
}
button.btn-success-secondary:focus, button.btn-success-secondary:active, .btn.btn-success-secondary:focus, .btn.btn-success-secondary:active{
border: 1px solid #72B864;
background: white;
color: #72B864;
}
button.btn-success-secondary:hover,.btn.btn-success-secondary:hover{
border-color: #72B864;
}
button.btn-success-secondary .icon,.btn.btn-success-secondary .icon{
fill: #72B864;
}
button.btn-alert,.btn.btn-alert{
background: #DA4F4A;
color: #FFFFFF;
border-color: #DA4F4A;
}
button.btn-alert:focus, button.btn-alert:active, .btn.btn-alert:focus, .btn.btn-alert:active{
background: #DA4F4A;
color: #FFFFFF;
}
button.btn-alert:hover,.btn.btn-alert:hover{
border-color: #DA4F4A;
}
button.btn-alert .icon,.btn.btn-alert .icon{
fill: #FFFFFF;
}
button.btn-alert.bt-arrow:before,.btn.btn-alert.bt-arrow:before{
border-top-color: #DA4F4A;
}
button.btn-warning,.btn.btn-warning{
background: #F0AD4E;
color: #FFFFFF;
border-color: #F0AD4E;
}
button.btn-warning:focus, button.btn-warning:active, .btn.btn-warning:focus, .btn.btn-warning:active{
background: #F0AD4E;
color: #FFFFFF;
}
button.btn-warning:hover,.btn.btn-warning:hover{
border-color: #F0AD4E;
}
button.btn-warning .icon,.btn.btn-warning .icon{
fill: #FFFFFF;
}
button.btn-warning.bt-arrow:before,.btn.btn-warning.bt-arrow:before{
border-top-color: #F0AD4E;
}
button[disabled], button.disabled, .btn[disabled], .btn.disabled{
opacity: 1;
color: #C0C0C0;
background: #EFEFEF;
border-color: #EFEFEF;
}
button[disabled]:focus, button[disabled]:active, button.disabled:focus, button.disabled:active, .btn[disabled]:focus, .btn[disabled]:active, .btn.disabled:focus, .btn.disabled:active{
color: #C0C0C0;
background: #EFEFEF;
border-color: #EFEFEF;
}
button[disabled]:hover,button.disabled:hover,.btn[disabled]:hover,.btn.disabled:hover{
border-color: #EFEFEF;
}
button[disabled] .icon,button.disabled .icon,.btn[disabled] .icon,.btn.disabled .icon{
fill: #C0C0C0;
}
button[disabled].bt-arrow:before,button.disabled.bt-arrow:before,.btn[disabled].bt-arrow:before,.btn.disabled.bt-arrow:before{
border-top-color: #EFEFEF;
}
button:active,.btn:active{
border-color: transparent;
}
button:active:focus,.btn:active:focus{
outline:none;
outline-offset: 0px;
border-color: transparent;
}
button.bg,.btn.bg{
border-radius: 32px;
height: 32px;
}
button.sm,.btn.sm{
border-radius: 16px;
height: 16px;
padding: 0 1px;
}
button.btn-icon,.btn.btn-icon{
padding: 0 24px 0 16px;
}
button.btn-icon .icon,.btn.btn-icon .icon{
margin-right: 8px;
border-color: white;
}
button:focus,.btn:focus{
outline:none;
outline-offset: 0px;
border-color: transparent;
}
button.active,.btn.active{
border-color: transparent;
background: #006BB2;
color: white;
-webkit-box-shadow: none;
box-shadow: none;
}
button.active:focus,.btn.active:focus{
outline:none;
outline-offset: 0px;
}
button.active:hover,.btn.active:hover{
border-color: transparent;
}
/* --------- btn --------- */
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
/* --------- default-user-pic --------- */
.default-user-pic{
position: relative;
width: 100%;
height: 100%;
}
.default-user-pic .icon{
position: absolute;
left: 2px;
right: 2px;
top: 2px;
bottom: 2px;
width: auto;
height: auto;
fill: #C0C0C0;
}
/* --------- /default-user-pic --------- */
.c-modal{
position: absolute;
z-index: 100;
background: white;
-webkit-box-shadow: 0px 3px 6px 0px rgba(65, 65, 65, .32), 0px 3px 6px 0px rgba(65, 65, 65, .46);
box-shadow: 0px 3px 6px 0px rgba(65, 65, 65, .32), 0px 3px 6px 0px rgba(65, 65, 65, .46);
border-radius: 0;
border-bottom: 2px solid #006BB2;
min-height: 80px;
/* --------- for custom ---------*/
width: 300px;
min-height: 120px;
margin-top: -60px;
margin-left: -150px;
left: 50%;
top: 40%;
}
/* --------- for custom ---------*/
.c-modal .c-modal-body .content{
padding: 16px;
color: #555555;
font-size: 15px;
letter-spacing: 1.25px;
font-weight: 200;
}
.c-modal .c-modal-footer{
position: relative;
border-top: 1px solid #CECECE;
margin: 0 16px;
padding-top: 14px;
height: 56px;
}
.c-modal .c-modal-footer:before,
.c-modal .c-modal-footer:after {
content: " ";
display: table;
}
.c-modal .c-modal-footer:after {
clear: both;
}
.c-modal .c-modal-footer .btn{
position: relative;
line-height: 16px;
min-width: 64px;
float: right;
height: 28px;
margin-right: 0px;
margin-left: 16px;
}
/* ---------wrap-long-label ---------*/
.wrap-long-label{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/* ---------/wrap-long-label ---------*/
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
/* --------- check --------- */
.c-check{
position: relative;
width: auto;
height: auto;
line-height: 16px;
}
.c-check + .c-check-text{
font-weight: 200;
float:left;
margin-left: 8px;
line-height: 16px;
color: #999999;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
}
.c-check + .c-check-text > .icon{
margin-right: 12px;
}
.c-check.checked + .c-check-text{
color: #555555;
}
.c-check.disabled{
color: #C0C0C0;
}
.c-check.disabled .icon{
fill: #CECECE;
}
/* --------- /check --------- */
/* --------- radio --------- */
.c-radio{
border:none;
}
.c-radio:before{
display: none;
}
.c-radio ~ .c-radio-text > .icon{
margin-right: 12px;
}
.c-radio.checked{
border:none;
}
.c-radio.checked:before{
display: none;
}
.c-radio{
display: block;
position: relative;
width: auto;
height: auto;
}
.c-radio + .c-radio-text{
font-weight: 200;
float:left;
margin-left: 8px;
line-height: 16px;
color: #999999;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c-radio.checked + .c-radio-text{
color: #555555;
}
.c-radio.disabled{
color: #C0C0C0;
}
.c-radio.disabled .icon{
fill: #CECECE;
}
/* --------- radio --------- */
/* --------- switch --------- */
.c-switch{
float: left;
position: relative;
width: 32px;
height: 8px;
border-radius: 8px;
background: #DDDDDD;
cursor: pointer;
}
.c-switch:before{
display: block;
position: absolute;
top: -4px;
left: 0;
width:16px;
height:16px;
border-radius:16px;
content: "";
background: #EFEFEF;
-webkit-box-shadow: 0 1px 3px 0 rgba(65, 65, 65, .24),0 1px 2px 0 rgba(65, 65, 65, .48);
box-shadow: 0 1px 3px 0 rgba(65, 65, 65, .24),0 1px 2px 0 rgba(65, 65, 65, .48);
}
.c-switch.on{
background: #72B864;
}
.c-switch.on:before{
left: 16px;
}
.c-switch.full-color{
background: rgba(218, 79, 74, 0.6);
}
.c-switch.full-color:before{
background: #DA4F4A;
left: 0;
}
.c-switch.full-color.on{
background: rgba(114, 184, 100, 0.6);
}
.c-switch.full-color.on:before{
background: #72B864;
left: 16px;
}
.c-switch.on-full-color.on{
background: rgba(114, 184, 100, 0.6);
}
.c-switch.on-full-color.on:before{
background: #72B864;
left: 16px;
}
.c-switch.disabled{
background: #EFEFEF;
}
.c-switch.disabled:before{
background: #EFEFEF;
}
.c-switch.disabled.on{
background: #EFEFEF;
}
/* --------- /switch --------- */
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.ctl-group{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
padding-top: 8px;
}
.ctl-group .ctl{
width: 100%;
padding-right: 24px;
}
.ctl-group .ctl-label{
position: absolute;
top: -8px;
left: 8px;
font-size: 12px;
color: #999999;
white-space: nowrap;
font-weight: 200;
margin-bottom: 0px;
}
.ctl-group .ctl-value{
padding-left: 8px;
}
.ctl-group .i-clear{
position: absolute;
right: 8px;
bottom: 6px;
display: none;
width: 16px;
height: 16px;
fill: #C0C0C0;
cursor: pointer;
background-color: transparent;
}
.ctl-group .i-clear .icon{
width: 100%;
height: 100%;
}
.ctl-group .i-clear.active{
background-color: transparent;
display: block;
}
.ctl-group .i-clear.transparent{
color:transparent;
}
.ctl{
outline: none;
border: 1px solid #EFEFEF;
border-radius: 28px;
height: 28px;
background-color: #F8F8F8;
padding-left: 8px;
font-size: 13px;
}
.ctl::-webkit-input-placeholder {
font-weight: 200;
}
.ctl::-moz-placeholder {
font-weight: 200;
}
.ctl:-ms-input-placeholder {
font-weight: 200;
}
.ctl:focus::-webkit-input-placeholder {
color: transparent;
}
.ctl:focus::-moz-placeholder {
color: transparent;
}
.ctl:focus:-ms-input-placeholder {
color: transparent;
}
.ctl.empty-value ~ .ctl-label{
display: none;
}
.ctl.empty-value:focus ~ .ctl-label{
display: block;
}
.ctl.warning{
border: 1px solid #DA4F4A;
}
.ctl.warning::-webkit-input-placeholder {
color: transparent;
}
.ctl.warning::-moz-placeholder {
color: transparent;
}
.ctl.warning:-ms-input-placeholder {
color: transparent;
}
.ctl.warning ~ .ctl-label{
display: block;
color: #DA4F4A !important;
}
.ctl.warning:focus{
border: 1px solid #DA4F4A;
}
.ctl.success ~ .ctl-label{
display: block;
color: #72B864;
}
.ctl.c-italic{
background: none;
font-style: italic;
}
.ctl.c-italic::-webkit-input-placeholder {
font-style: italic;
}
.ctl.c-italic::-moz-placeholder {
font-style: italic;
}
.ctl.c-italic:-ms-input-placeholder {
font-style: italic;
}
.ctl[readonly]{
background: #DDDDDD;
color: #999999;
}
.ctl[readonly]::-webkit-input-placeholder {
font-style: #999999;
}
.ctl[readonly]::-moz-placeholder {
font-style: #999999;
}
.ctl[readonly]:-ms-input-placeholder {
font-style: #999999;
}
.ctl[readonly]:focus{
border-color: #EFEFEF;
}
.ctl[readonly]:focus.empty-value ~ .ctl-label{
display: none;
}
.ctl[readonly] ~ .i-clear{
display: none;
}
textarea.ctl{
resize: none;
height: 72px;
line-height: 18px;
border-radius: 12px;
}
/*
* it would be like
*
*
*
*
*
*/
.date-ctl{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
padding-top: 8px;
}
.date-ctl .ctl{
width: 100%;
}
.date-ctl .i-clear{
position: absolute;
bottom: 6px;
right: 10px;
width: 16px;
height: 16px;
display: block;
}
.date-ctl .i-clear .icon{
width: 100%;
height: 100%;
}
.date-ctl .i-clear .ico-calendar{
display: block;
}
.date-ctl .i-clear .ico-close{
display: none;
}
.date-ctl .i-clear.active .ico-calendar{
display: none;
}
.date-ctl .i-clear.active .ico-close{
display: block;
}
/*
* it would be like
*
*
*
*
*
*/
.search-ctl{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 28px;
position: relative;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.search-ctl input{
padding-right: 24px;
height: 100%;
width: 100%;
min-width: 0;
min-width: initial;
}
.search-ctl .icon{
position: absolute;
top: 5px;
right: 8px;
width: 20px;
height: 20px;
}
.search-ctl .icon.i-clear{
width: 14px;
height: 14px;
display: none;
}
.search-ctl.bg{
border-radius: 24px;
}
.search-ctl.bg .icon{
right: 13px;
width: 24px;
height: 24px;
}
.search-ctl.auto-expand{
width: 56px;
}
.search-ctl.auto-expand .icon{
left: 50%;
right: auto;
margin-left: -10px;
}
.search-ctl.expand input{
width: 240px;
padding-right: 32px;
}
.search-ctl.expand .icon{
left: auto;
right: 8px;
margin-left: 0px;
}
.search-ctl.expand .icon.i-clear{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
right: 28px;
top: 8px;
margin-left: 0px;
}
.switch{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 240px;
height: 28px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.switch .item{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: #F8F8F8;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #555555;
margin-right: 1px;
}
.switch .item .icon{
fill: #555555;
}
.switch .item:first-child{
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
}
.switch .item:last-child{
margin-right: 0px;
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
}
.switch .item.active{
background: #72B864;
color: white;
}
.switch .item.active .icon{
fill: white;
}
.switch .item .icon{
margin-right: 8px;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
/* --------- field drop down ----------*/
.dropdown-field{
position: relative;
line-height:28px;
font-size: 13px;
color: #555555;
-webkit-box-shadow: none;
box-shadow: none;
border: #DDDDDD;
max-width: 336px;
font-weight: 300;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border-radius: 4px;
margin-top: 0px;
padding-top: 0px;
width: 100%;
}
.dropdown-field .ctl-label{
height: 16px;
z-index: 2;
white-space: nowrap;
position: absolute;
top: -12px;
left: 8px;
line-height: 10px;
font-size: 12px;
font-weight: 200;
color: #555555;
letter-spacing: 1px;
}
.dropdown-field .dropdown-control{
display: block;
height: 28px;
text-align: left;
padding: 0px 22px 0 8px;
padding-left: 8px;
font-weight: 200;
-webkit-box-shadow: none;
box-shadow: none;
color: #333333;
border: 1px solid #EFEFEF;
background-color: #F8F8F8;
border-radius: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dropdown-field .dropdown-control::-webkit-input-placeholder {
font-weight: 200;
}
.dropdown-field .dropdown-control::-moz-placeholder {
font-weight: 200;
}
.dropdown-field .dropdown-control:-ms-input-placeholder {
font-weight: 200;
}
.dropdown-field .dropdown-control::-webkit-input-placeholder {
color: #555555;
}
.dropdown-field .dropdown-control::-moz-placeholder {
color: #555555;
}
.dropdown-field .dropdown-control:-ms-input-placeholder {
color: #555555;
}
.dropdown-field .dropdown-control.place-holder{
color: #555555;
font-weight: @font-weight-light;
}
.dropdown-field .dropdown-control.place-holder ~ .ctl-label{
display: none;
}
.dropdown-field .dropdown-control:focus::-webkit-input-placeholder {
color: transparent;
}
.dropdown-field .dropdown-control:focus::-moz-placeholder {
color: transparent;
}
.dropdown-field .dropdown-control:focus:-ms-input-placeholder {
color: transparent;
}
.dropdown-field .dropdown-control.empty-value ~ .ctl-label{
display: none;
}
.dropdown-field .dropdown-control.empty-value:focus ~ .ctl-label{
display: block;
}
.dropdown-field .dropdown-toggle{
position: absolute;
z-index: 2;
color: #333333;
font-size: 12px;
bottom: 4px;
right: 2px;
width: 24px;
text-align: center;
}
.dropdown-field .dropdown-items{
position: absolute;
z-index: 100;
max-height: 300px;
overflow-y: auto;
font-weight: 200;
display: none;
margin-bottom:8px;
top: 24px;
left: 0px;
right: 0px;
background-color: #F8F8F8;
border: 1px solid #EFEFEF;
border-top: none;
-webkit-box-shadow: 0 0px 2px 0 rgba(0, 0, 0, .12),0 2px 2px 0 rgba(0, 0, 0, .16);
box-shadow: 0 0px 2px 0 rgba(0, 0, 0, .12),0 2px 2px 0 rgba(0, 0, 0, .16);
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}
.dropdown-field .dropdown-items .title{
display: none;
height:16px;
line-height:14px;
font-style: italic;
padding-left:8px;
color: #555555;
font-weight: 200;
margin-top:8px;
}
.dropdown-field .dropdown-items .item{
padding-left: 8px;
max-width: none;
height: 16px;
line-height: 14px;
font-size: 13px;
cursor: default;
color: #999999;
margin-top: 0px;
}
.dropdown-field .dropdown-items .item.active{
background: #F1F7FB;
}
.dropdown-field .dropdown-items .item:hover{
background: #006BB2;
color: white;
}
.dropdown-field .dropdown-items .item:last-child{
margin-bottom: 8px;
}
.dropdown-field .dropdown-items .item.create{
display: none;
}
.dropdown-field .dropdown-items .item.disable{
color: #C0C0C0;
}
.dropdown-field .dropdown-items .item.disable:hover{
background: none;
}
.dropdown-field .dropdown-items .item.disable.active{
background: none;
}
.dropdown-field .dropdown-items.create-mode .title{
display: block;
}
.dropdown-field .dropdown-items.create-mode .item{
padding-left: 24px;
}
.dropdown-field .dropdown-items.create-mode .item.new-item{
display: block;
}
.dropdown-field.show-dropdown{
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.dropdown-field.show-dropdown .dropdown-control{
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
-webkit-box-shadow: 0 0px 2px 0 rgba(0, 0, 0, .12),0 2px 2px 0 rgba(0, 0, 0, .16);
box-shadow: 0 0px 2px 0 rgba(0, 0, 0, .12),0 2px 2px 0 rgba(0, 0, 0, .16);
border-bottom: none;
}
.dropdown-field.show-dropdown .dropdown-items{
display: block;
}
.dropdown-field.warning .ctl-label{
display: block;
color: #DA4F4A;
}
.dropdown-field.warning .dropdown-control{
border: 1px solid #DA4F4A;
}
.dropdown-field.warning .dropdown-control::-webkit-input-placeholder {
color: transparent;
}
.dropdown-field.warning .dropdown-control::-moz-placeholder {
color: transparent;
}
.dropdown-field.warning .dropdown-control:-ms-input-placeholder {
color: transparent;
}
.dropdown-field.warning .dropdown-control.place-holder{
color: transparent;
}
.dropdown-field.warning .dropdown-control.place-holder ~ .ctl-label{
display: block;
}
.dropdown-field.warning .dropdown-control.empty-value ~ .ctl-label{
display: block;
}
.dropdown-field.warning .dropdown-control:focus{
border: 1px solid #DA4F4A;
}
.dropdown-field.warning .dropdown-toggle .icon{
fill: #DA4F4A;
}
.dropdown-field.readonly .dropdown-control{
background: #DDDDDD;
color: #999999;
}
.dropdown-field.readonly .dropdown-control:focus{
background: #DDDDDD;
color: #999999;
}
.dropdown-field.readonly .dropdown-toggle{
display: none;
}
/* --------- /field drop down ----------*/
/* -------- Specific Pointer -----------*/
.history-panel .filter-items .dropdown-toggle{ cursor: pointer; }
.history-panel .filter-items .dropdown-control{ cursor: pointer; }
/* -------- /Specific Pointer ----------*/
.dropdown-con{
position: relative;
}
.dropdown-con .dropdown-toggle {
position: relative;
min-width: 0;
padding: 0px 14px 0px 0px;
line-height: 30px;
margin-left: 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.dropdown-con .dropdown-toggle .count-selected{
font-size: 12px;
display: inline-block;
letter-spacing: 1px;
line-height: 29px;
}
.dropdown-con .dropdown-menu{
position: absolute;
display: none;
left: 92px;
top: auto;
padding: 0px;
border-radius: 0px;
-webkit-box-shadow: 0 3px 6px 0 rgba(65, 65, 65, .32),0 3px 6px 0 rgba(65, 65, 65, .46);
box-shadow: 0 3px 6px 0 rgba(65, 65, 65, .32),0 3px 6px 0 rgba(65, 65, 65, .46);
min-width: 160px;
margin: 0px;
z-index: 1000;
font-family: "Karla";
}
.dropdown-con .dropdown-menu .action-item {
display: block;
float:none;
border-radius: 0px;
border: none;
height:31px;
line-height: 13px;
min-width: 80px;
padding: 7px 16px;
text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
letter-spacing: 1.33px;
cursor: pointer;
}
.dropdown-con .dropdown-menu .action-item:focus{
background-color: white;
}
.dropdown-con .dropdown-menu .action-item:hover{
background-color: #006BB2;
}
.dropdown-con .dropdown-menu .action-item.disable{
color: #999999;
cursor: default;
}
.dropdown-con .dropdown-menu .action-item.disable:focus{
background-color: transparent;
}
.dropdown-con .dropdown-menu .action-item.disable:hover{
background-color: transparent;
}
.dropdown-con.show-dropdown .dropdown-menu{
display: block;
}
.dropdown-con.action-dropdown .dropdown-menu{
left: 40px;
top: auto;
bottom: -32px;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.edit-mode-con .edit-con{
display: none;
}
.edit-mode-con .info-con{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.edit-mode-con.edit-mode .edit-con{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.edit-mode-con.edit-mode .info-con{
display: none;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
/* --------- item-box --------- */
.it-box{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
/* --------- item-box --------- */
/* --------- flex-con --------- */
.flex-con{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
/* --------- left to right --------- */
.lt-rt{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
/* --------- top to bottom --------- */
.tp-bt{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.menu{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 80px;
background: #001C49;
list-style: none;
margin: 0;
padding: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.menu .menu-item{
list-style: none;
padding: 0;
margin: 0 0 1px 0;
height: 72px;
background: #002C5E;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
font-size: 12px;
outline: none;
text-align: center;
cursor: pointer;
line-height: 1;
position: relative;
}
.menu .menu-item.active{
background: #006BB2;
}
.menu .menu-item.active:before{
content: " ";
position: absolute;
right: 0px;
top: 50%;
margin-top: -4px;
border: 5px solid transparent;
border-right: 7px solid white;
}
.menu .menu-item .icon{
fill: #fff;
margin: 3px 0;
}
.nav-menu{
list-style: none;
margin: 0;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
}
.nav-menu .nav-item{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 16px;
height: 100%;
margin-top: 1px;
color: #555555;
text-align: center;
font-size: 13px;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.nav-menu .nav-item:first-child{
margin-left: 0;
}
.nav-menu .nav-item.active{
border-bottom: 2px solid #006BB2;
color: #006BB2;
font-weight: 600;
background-color: transparent;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.nav-screen{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.nav-screen.fullscreen .nav-header{
display: none;
}
.nav-screen.fullscreen .nav-ctn{
overflow: visible;
overflow: initial;
}
.nav-screen .nav-header{
height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
border-bottom: 1px solid #DDDDDD;
margin: 8px 16px 0 16px;
}
.nav-screen .nav-right{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 12px;
color: #62a6e3;
}
.nav-screen .nav-right .icon{
margin-left: 8px;
}
.nav-screen .nav-ctn{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.nav-screen .nav-sec-header{
height: 80px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0 16px;
position: relative;
}
.nav-screen .nav-sec-header .nav-title{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #333333;
}
.nav-screen .nav-sec-header .nav-title .icon{
margin-left: 8px;
}
.nav-screen .nav-sec-header .nav-sec-right{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-right: 16px;
}
.nav-screen .nav-sec-header .nav-sec-right .btn-nav{
position: relative;
min-width: 168px;
margin-left: 8px;
}
.nav-screen .nav-sec-header .nav-sec-right .btn-nav .icon{
fill: white;
position: absolute;
left: 12px;
top: 50%;
margin-top: -7px;
border-color: white;
}
.nav-screen .nav-extra-header{
position: absolute;
z-index:3;
right: 16px;
top: -48px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.nav-screen .nav-extra-header .btn{
min-width: 160px;
position: relative;
margin-left: 8px;
}
.nav-screen .nav-extra-header .btn .icon{
fill: white;
position: absolute;
left: 12px;
top: 50%;
margin-top: -7px;
border-color: white;
}
.nav-screen .nav-main{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
margin-bottom: 16px;
margin-top:1px;
}
.phone-mode .nav-screen .nav-header{
border: none;
margin: 0;
}
.phone-mode .nav-screen .nav-header .nav-menu .nav-item.active{
border: none;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.c-panel{
-webkit-box-shadow:0px 1px 2px 0px rgba(65, 65, 65, .2);
box-shadow:0px 1px 2px 0px rgba(65, 65, 65, .2);
background: white;
}
.empty-panel{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.empty-panel .empty-content{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #333333;
}
.empty-panel .empty-content .icon{
margin-right: 8px;
}
.menu-panel{
width: 272px;
margin: 0 16px;
color: #555555;
font-size: 12px;
}
.menu-panel .p-main{
background: white;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-shadow:0px 1px 2px 0px rgba(65, 65, 65, .48);
box-shadow:0px 1px 2px 0px rgba(65, 65, 65, .48);
max-height: 100%;
}
.menu-panel .p-tp-header{
min-height: 56px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.menu-panel .p-tp-header-lt{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: 8px;
}
.menu-panel .p-tp-header-lt .icon{
margin-right: 8px;
}
.menu-panel .p-tp-header-lt .title{
margin-right: 8px;
color: #999999;
}
.menu-panel .p-tp-header-lt .name{
margin-right: 8px;
color: #555555;
}
.menu-panel .p-tp-header-rt{
margin-right: 8px;
}
.menu-panel .p-header{
min-height: 56px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 8px;
font-family: "Oswald";
font-weight: 600;
color: #001C49;
font-size: 14px;
background: #006BB2;
color: white;
position: relative;
}
.menu-panel .p-header .title{
margin-right: auto;
}
.menu-panel .p-header:before{
content: " ";
position: absolute;
left: 50%;
bottom: -11px;
margin-left: -4px;
border: 6px solid transparent;
border-top: 7px solid #006BB2;
}
.menu-panel .p-body{
padding: 0;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow-y: auto;
}
.menu-panel .p-body .item{
height: 56px;
padding: 0 8px;
color: #999999;
border-bottom: 1px solid #CECECE;
cursor: pointer;
}
.menu-panel .p-body .item .name{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
}
.menu-panel .p-body .item:last-child{
border: none;
}
.menu-panel .p-body .item.active{
color: #006BB2;
background: #F1F7FB;
font-weight: 600;
cursor: default;
}
.menu-panel .p-body .item.active .icon{
border-color: #006BB2;
}
.menu-panel .p-body .empty-item{
height: 56px;
padding: 0 8px;
}
.menu-panel .p-body .empty-item .item-lt{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #333333;
}
.menu-panel .p-body .empty-item .item-lt .icon{
margin: 0 12px 0 4px;
}
.header-panel{
height: 56px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
z-index: 2;
border-bottom: 1px solid #DDDDDD;
background: white;
}
.header-panel .p-lt{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-left: 24px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 17px;
color: #333333;
}
.header-panel .p-lt .icon{
margin-left: 8px;
}
.header-panel .p-rt{
width: 280px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0 16px;
color: #333333;
font-weight: 600;
}
.side-panel{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 280px;
border-left: 1px solid #DDDDDD;
background: #fff;
}
.side-panel .p-header{
height: 56px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 16px;
background: #006BB2;
color: white;
}
.side-panel .p-header-lt{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: "Oswald";
font-weight: 600;
color: #001C49;
font-size: 14px;
color: white;
}
.side-panel .p-header-lt .icon{
fill: #C0C0C0;
margin-left: 8px;
}
.side-panel .p-header-lt{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.side-panel .nav-menu{
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
padding-left: 16px;
border-bottom: 1px solid #DDDDDD;
height: 48px;
}
.side-panel .p-secs{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow-y: auto;
}
.p-sec{
border-bottom: 1px solid #DDDDDD;
}
.p-sec-header{
height: 48px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 16px;
color: #555555;
cursor: pointer;
}
.p-sec-header .icon{
margin-right: 8px;
}
.p-sec-header .name{
margin-right: 8px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.p-sec-header .count{
color: #999999;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.p-sec-header .selected{
color: #999999;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-right: 8px;
}
.p-sec-body{
display: none;
padding-bottom: 16px;
width: 100%;
}
.p-sec-body .item{
height: 48px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 16px;
color: #555555;
}
.p-sec-body .item > .icon{
margin-right: 4px;
}
.p-sec-body .item .name{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
}
.p-sec.active{
background: #F1F7FB;
}
.p-sec.active .p-sec-header{
cursor: default;
}
.p-sec.active .p-sec-header .name{
color: #006BB2;
font-weight: 600;
}
.p-sec.active .p-sec-body{
display: block;
}
.table-panel{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 16px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
border-bottom: 2px solid #006BB2;
-webkit-box-shadow:0px 1px 2px 0px rgba(65, 65, 65, .48);
box-shadow:0px 1px 2px 0px rgba(65, 65, 65, .48);
background: white;
position: relative;
}
.table-panel .tool-ctn{
position: absolute;
top: 18px;
right: 16px;
z-index:1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.table-panel .tool-ctn .btn-tool{
margin-left: 16px;
}
.table-panel .action-bar{
position: absolute;
top: 1px;
left: 0px;
right: 0px;
height: 63px;
z-index: 10;
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: 24px;
}
.table-panel .action-bar .title{
font-family: "Oswald";
font-weight: 600;
color: #001C49;
font-size: 14px;
}
.table-panel .table-ctn{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.table{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.table .thead, .table .tbody{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.table .thead{
position: relative;
border-bottom: 1px solid #DDDDDD;
}
.table .thead .tr{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 14px;
}
.table .thead .tr .td{
font-family: "Oswald";
font-weight: 600;
color: #001C49;
font-size: 14px;
}
.table .thead .tr .td .i-sort{
width: 16px;
height: 16px;
margin-left:8px;
}
.table .thead .tr .td[data-sort-column]{
cursor: pointer;
}
.table .tbody{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow-y: auto;
}
.table .tbody .td{
color: #333333;
height: 100%;
}
.table .tr{
min-height: 64px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 8px;
border-bottom: 1px solid #DDDDDD;
}
.table .tr:last-child{
border: none;
}
.table .tr.empty-tr{
height: auto;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.table .tr.empty-tr .td{
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
}
.table .tr.empty-tr .empty-content{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #333333;
}
.table .tr.empty-tr .empty-content .icon{
margin-right: 8px;
}
.table .td{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: 16px;
}
.action-panel{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 13px;
}
.action-panel input{
margin-right: 8px;
}
.action-panel .icon.ico-remove, .action-panel .icon.ico-done, .action-panel .icon.ico-trash{
margin-left: 8px;
}
.action-panel .sep{
height: 24px;
border-left: 1px solid #CECECE;
display: block;
margin: 0 8px 0 16px;
}
.action-panel .del-txt{
font-size: 12px;
margin-left: 8px;
color: #C0C0C0;
line-height: 1;
font-weight: 200;
width: 112px;
}
.list-panel{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
}
.list-panel-header{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 16px;
background-color: #006BB2;
}
.list-panel-header .search-ctl{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin-right: 16px;
}
.list-panel-header .search-ctl input{
background-color: white;
}
.list-panel-body{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.list-panel-body .data-header{
background-color: #006BB2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-height: 24px;
font-family: "Oswald";
font-weight: 600;
color: #001C49;
font-size: 14px;
color: white;
}
.list-panel-body .data-body{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 0;
padding: 0;
background-color: white;
overflow-y: auto;
}
.list-panel-body .data-body .data-row{
min-height: 56px;
border-bottom: 1px solid #DDDDDD;
}
.list-panel-body .data-row{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.list-panel-body .data-col{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0 16px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.list-panel-body .data-col.sort::after{
position: relative;
left: 10px;
top: -4px;
content: " ";
border-bottom: 10px solid white;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
}
.list-panel-body .data-col.sort.asc::after{
border-bottom: 10px solid white;
}
.list-panel-body .data-col.sort.desc::after{
top: 7px;
border-top: 10px solid white;
border-bottom: none;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
a{
color: #006BB2;
}
.action{
color: #006BB2;
cursor: pointer;
}
.action.disabled{
cursor: default;
}
/* --------- Karla --------- */
@font-face {
font-family: 'Karla';
src: url('../fonts/Karla-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Karla';
src: url('../fonts/Karla-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Karla';
src: url('../fonts/Karla-Bold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Karla';
src: url('../fonts/Karla-BoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
/* --------- /Karla --------- */
/* --------- Oswald --------- */
@font-face {
font-family: 'Oswald';
src: url('../fonts/Oswald-ExtraLight.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Oswald';
src: url('../fonts/Oswald-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Oswald';
src: url('../fonts/Oswald-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Oswald';
src: url('../fonts/Oswald-Medium.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Oswald';
src: url('../fonts/Oswald-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Oswald';
src: url('../fonts/Oswald-Bold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
/* --------- /Oswald --------- */
/* --------- Roboto --------- */
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-ThinItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-RegularItalic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-MediumItalic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
/* --------- /Roboto --------- */
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.glyphicons-default-style:before{
color: #999999;
font-size: 24px;
}
.icon{
width: 24px;
height: 24px;
fill: #999999;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-family: serif;
font-family: initial;
top: 0;
}
.icon svg{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.icon.i-xs{
width: 12px;
height: 12px;
}
.icon.i-sm{
width: 16px;
height: 16px;
}
.icon.i-bg{
width: 32px;
height: 32px;
}
.icon.i-darker{
fill: #333333;
}
.icon.i-dark{
fill: #555555;
}
.icon.i-light{
fill: #C0C0C0;
}
.icon.i-white{
fill: #FFFFFF;
}
.icon.i-prime{
fill: #006BB2;
}
.icon.i-alert{
fill: #ECA7A4;
}
.icon.i-alert-darker{
fill: #DA4F4A;
}
.icon.i-success{
fill: #72B864;
}
.icon.i-warning{
fill: #F0AD4E;
}
.icon.i-warning:before{
content: "";
}
/* old icons hack */
.icon.i-search:before{
content: "";
}
.icon.i-remove:before{
content: "";
}
.icon.i-close:before{
content: "";
}
.icon.i-ok:before{
content: "";
}
.icon.i-error:before{
content: "";
}
.icon.i-lock:before{
content: "";
}
.icon.i-drag-hamburger:before{
content: "";
}
.icon.i-more:before{
content: "";
}
.icon.i-door:before{
content: "";
}
.icon.i-lock:before{
content: "";
}
.icon.i-unlock:before{
content: "";
}
.icon.i-flash:before{
content: "";
}
.icon.i-warning:before{
content: "";
}
.icon.i-holiday:before{
content: "";
}
.icon.i-event:before{
content: "";
}
.icon.i-play:before{
content: "";
}
.icon.i-drag:before{
content: "";
}
.icon.i-speaker:before{
content: "";
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.Popup{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99;
}
.Popup.modal-popup .Popup-screen{
background: none;
pointer-events: none;
}
.Popup .Popup-screen{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: fixed;
background: rgba(239, 239, 239, .48);
}
.Popup .Popup-con{
opacity: 0;
position: absolute;
top: 80px;
left: 440px;
z-index: 100;
-webkit-box-shadow: 0 3px 6px 0 rgba(65, 65, 65, .32),0 3px 6px 0 rgba(65, 65, 65, .46);
box-shadow: 0 3px 6px 0 rgba(65, 65, 65, .32),0 3px 6px 0 rgba(65, 65, 65, .46);
}
.Popup .Popup-con:focus{
outline: none;
}
.Popup .Popup-con.transitioning{
-webkit-transition: -webkit-transform .2s ease-in;
transition: -webkit-transform .2s ease-in;
transition: transform .2s ease-in;
transition: transform .2s ease-in, -webkit-transform .2s ease-in;
}
.Popup .popup-modal{
border: none;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
border-bottom: 2px solid #006BB2;
}
.Popup .popup-modal .popup-header{
padding: 0;
cursor: pointer;
border: none;
background: #006BB2;
position: relative;
z-index: 2;
height: 56px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.Popup .popup-modal .popup-header .modal-title{
max-width: 95%;
font-family: "Oswald";
font-weight: 600;
color: #001C49;
font-size: 14px;
font-size: 15px;
color: white;
margin-left: 16px;
}
.Popup .popup-footer{
margin: 0px 16px;
padding: 16px 0;
height: 56px;
border-top: 1px solid #DDDDDD;
background: white;
position: relative;
z-index: 2;
border-radius: 0;
}
.Popup .popup-footer:before{
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
left:-2px;
right:-2px;
z-index: 0;
display: block;
}
.Popup .popup-footer .btn{
position: relative;
height: 24px;
line-height: 16px;
min-width: 80px;
display: inline-block;
}
.Popup .popup-footer .cancel{
margin-right: 8px;
}
.Popup .popup-footer .delete{
position: relative;
float: left;
}
.Popup .popup-body{
padding: 0 16px 16px 16px;
}
.Popup .ctl-group{
margin-top: 16px;
}
@media(max-width: 800px){
.Popup{
width:100%;
height:100%;
}
.Popup .Popup-con{
height: 100%;
width: 100%;
}
.Popup .popup-modal{
width: 100%;
height: 100%;
overflow-x: hidden;
border-width: 2px;
border-radius: 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.Popup .popup-modal .modal-header:before{
content: " ";
position: absolute;
left: -4px;
right: -4px;
bottom: 0px;
top: 0px;
z-index: 0;
-webkit-box-shadow: 0px 1px 2px 0px rgba(65, 65, 65, .24), 0px 1px 2px 0px rgba(65, 65, 65, .48);
box-shadow: 0px 1px 2px 0px rgba(65, 65, 65, .24), 0px 1px 2px 0px rgba(65, 65, 65, .48);
}
.Popup .popup-modal .modal-body{
-webkit-box-flex:1;
-ms-flex:1;
flex:1;
overflow-x: hidden;
overflow-y: auto;
}
.Popup .popup-modal .modal-footer{
bottom:0px;
left: 0;
right: 0px;
position: absolute;
}
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.ApiTokenPopup-parent .Popup-con {
position: relative;
max-width: 400px;
}
.ApiTokenPopup .ctl-group {
font-weight: 300;
letter-spacing: 1.83px;
margin-bottom: 0px;
/*max-width: 800px;
min-height: 400px;*/
padding-top: 8px;
}
.ApiTokenPopup .checkbox-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 10px;
}
.ApiTokenPopup .checkbox-container .c-descr {
font-weight: 100;
font-size: 12px;
}
.ApiTokenPopup .expiration-label {
margin-top: 10px;
}
.ApiTokenPopup .ctl-label {
color: #999999;
margin-left: 10px;
margin-bottom: 0px;
font-weight: 400;
}
.ApiTokenPopup .ctl-group {
padding-top: 0px;
}
.ApiTokenPopup .ctl-group .ctl-label {
margin-left: 0px;
}
.ApiTokenPopup .input-name-container {
margin: 15px 0px 0px 0px;
}
.ApiTokenPopup .token-input {
width: 350px !important;
margin: 5px;
}
.ApiTokenPopup .time-limit-group{
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 0px;
}
.ApiTokenPopup .time-limit-group .line-con:first-child{
margin-bottom: 16px;
}
.ApiTokenPopup .time-limit-group .date-ctl{
position: relative;
width: 208px;
margin-right: 16px;
margin-top: 0;
float:left;
margin-bottom: 0px;
}
.ApiTokenPopup .time-limit-group .date-ctl:last-child{
margin-right: 0px;
}
.ApiTokenPopup .time-limit-group .date-ctl .ctl {
margin-left: 5px;
}
.ApiTokenPopup .time-limit-group .time-ctl{
position: relative;
width: 208px;
margin-top: 8px;
float:left;
margin-bottom: 0px;
}
.ApiTokenPopup .time-limit-group .time-ctl .TimeSelect{
left: 0;
}
.ApiTokenPopup .time-limit-group .time-ctl .TimeSelect .dropdown{
height: 128px;
}
.ApiTokenPopup .ApiTokenPopup-footer {
}
.ApiTokenPopup .button-container {
display: inline-block;
width: 300px;
}
.ApiTokenPopup .btn-export-csv {
align: left;
margin-right: 8px;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.debug-door-btn{
position: absolute;
bottom: 15px;
right: 40px;
z-index: 9999;
font-size: 20px;
}
.AppAccesspointPopup{
width: 432px;
min-height: 304px;
}
.AppAccesspointPopup .keypad-con{
width:96px;
float: left;
}
.AppAccesspointPopup .keypad-con .keypad{
position: relative;
background: #737373;
border: 1px solid #CECECE;
border-radius: 8px;
width:80px;
height:304px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.AppAccesspointPopup .keypad-con .keypad-header{
height: 60px;
}
.AppAccesspointPopup .keypad-con .keypad-header .light{
float:left;
width:16px;
height:16px;
margin-left:8px;
margin-top:8px;
border:1px solid #CECECE;
background: #555555;
border-radius: 16px;
}
.AppAccesspointPopup .keypad-con .keypad-header .light.red{
background: #DA4F4A;
}
.AppAccesspointPopup .keypad-con .keypad-header .light.green{
background: #72B864;
}
.AppAccesspointPopup .keypad-con .keypad-header .lock-icon{
float:right;
width: 24px;
height: 24px;
margin-top:8px;
margin-right:14px;
}
.AppAccesspointPopup .keypad-con .keypad-header .lock-icon.green .icon{
fill: #72B864;
}
.AppAccesspointPopup .keypad-con .keypad-body{
position: absolute;
left:0;
right:0;
top:64px;
bottom: 0px;
}
.AppAccesspointPopup .keypad-con .keypad-body .key{
width:24px;
height:24px;
text-align: center;
line-height: 21px;
margin-top: 16px;
background: #EFEFEF;
border:1px solid #CECECE;
font-size: 16px;
color: #999999;
border-radius:4px;
cursor: pointer;
}
.AppAccesspointPopup .keypad-con .keypad-body .key:nth-child(1){
margin-top: 0px;
}
.AppAccesspointPopup .keypad-con .keypad-body .key:nth-child(2){
margin-top: 0px;
}
.AppAccesspointPopup .keypad-con .keypad-body .key:nth-child(2n){
float:right;
margin-right: 8px;
}
.AppAccesspointPopup .keypad-con .keypad-body .key:nth-child(2n+1){
float:left;
margin-left: 8px;
}
.AppAccesspointPopup .keypad-con .i-speaker{
color: #555555;
margin-top: 4px;
background: none;
}
.AppAccesspointPopup .keypad-con .i-speaker.active{
fill: #72B864;
}
.AppAccesspointPopup .group-container{
margin-left: 96px;
margin-bottom: 16px;
}
.AppAccesspointPopup .group-container .ctl-group{
margin-top: 8px;
}
.AppAccesspointPopup .group-container .ctl-group.accesspoint-group .accesspoint-control{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.AppAccesspointPopup .group-container .badge-group{
position: relative;
}
.AppAccesspointPopup .group-container .badge-group .badge-control{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin-right: 16px;
}
.AppAccesspointPopup .group-container .badge-group .btn-submit{
height: 24px;
padding: 2px 12px;
}
.AppAccesspointPopup .group-container .access-state-type{
margin-top: 32px;
border: 1px solid #CECECE;
-webkit-box-shadow: 0px 1px 3px 0px rgba(65, 65, 65, .24), 0px 1px 2px 0px rgba(65, 65, 65, .48);
box-shadow: 0px 1px 3px 0px rgba(65, 65, 65, .24), 0px 1px 2px 0px rgba(65, 65, 65, .48);
}
.AppAccesspointPopup .group-container .access-state-type > label{
height: 16px;
font-size: 12px;
letter-spacing: 1px;
font-weight: 200;
color: #555555;
line-height: 12px;
margin-left: 8px;
}
.AppAccesspointPopup .group-container .access-state-type .type-content .checkbox-row{
height:32px;
padding-left: 8px;
}
.AppAccesspointPopup .group-container .access-state-type .type-content .checkbox-row:last-child{
height: 46px;
}
.AppAccesspointPopup .group-container .access-state-type .type-content .checkbox-con{
float:left;
min-width: 104px;
}
.AppAccesspointPopup .group-container .access-state-type .type-content .checkbox-con .checkbox{
margin-top: 0px;
margin-bottom: 0px;
padding-left: 0px;
}
.AppAccesspointPopup .group-container .access-state-type .type-content .checkbox-con .checkbox .c-check{
float:left;
margin-right: 8px;
cursor: pointer;
}
.AppAccesspointPopup .group-container .access-state-type .type-content .checkbox-con .checkbox .c-check.disabled{
cursor: default;
}
.AppAccesspointPopup .group-container .access-state-type .type-content .checkbox-con .checkbox .c-check-text{
margin: 0px;
letter-spacing: 1.08px;
font-size: 13px;
color: #999999;
cursor: default;
}
.AppAccesspointPopup .group-container .door-sense{
float: left;
}
.AppAccesspointPopup .group-container .door-sense .checkbox{
float: left;
height: 32px;
padding-left: 0px;
padding-right: 8px;
margin-top: 0px;
}
.AppAccesspointPopup .group-container .door-sense .checkbox .c-check{
cursor: pointer;
}
.AppAccesspointPopup .group-container .door-sense .checkbox .c-check-text{
float: left;
font-size: 13px;
margin-left: 24px;
margin-top: -16px;
letter-spacing: 1px;
}
.AppAccesspointPopup .group-container .switch-group .switch-text{
float:left;
line-height: 24px;
color: #555555;
letter-spacing: 1px;
font-size: 12px;
font-weight: 200;
}
.AppAccesspointPopup .group-container .switch-group .switch-text.open{
margin-left: 0;
color: #333333;
}
.AppAccesspointPopup .group-container .switch-group .c-switch{
float:left;
margin:8px;
}
.AppAccesspointPopup .group-container .switch-group.on .switch-text{
color: #555555;
}
.AppAccesspointPopup .group-container .switch-group.on .switch-text.open{
color: #333333;
}
.AppAccesspointPopup .group-container .switch-group.open .switch-text{
color: #555555;
}
.AppAccesspointPopup .group-container .switch-group.open .switch-text.open{
color: #333333;
}
.AppAccesspointPopup .group-container .switch-group.disabled .switch-text{
color: #555555;
}
.AppAccesspointPopup .group-container .switch-group.disabled .switch-text.open{
color: #555555;
}
.AppAccesspointPopup .group-container .switch-group.disabled .c-switch{
cursor: default;
background: #EFEFEF;
}
.AppAccesspointPopup .group-container .switch-group.door-switch{
position: absolute;
margin-left: 24px;
}
.AppAccesspointPopup .group-container .switch-group.fail-mode-switch{
float: right;
margin-top: -11px;
margin-right: 10px;
}
.AppAccesspointPopup .group-container .switch-group.accesspoint-mode-switch{
position: absolute;
margin-top: 0px;
}
.AppAccesspointPopup .group-container .switch-group.accesspoint-mode-switch .state{
display: none;
}
.AppAccesspointPopup .group-container .switch-group.accesspoint-mode-switch.on .state{
display: inline-block;
}
.AppAccesspointPopup.disabled .keypad-con .keypad .keypad-header .top-light{
background: #DDDDDD;
}
.AppAccesspointPopup.disabled .keypad-con .keypad .keypad-header .lock-icon .icon{
color: #C0C0C0;
}
.AppAccesspointPopup-parent .popup-modal .popup-header.modal-header{
background: #DA4F4A;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.AreaPopup{
position: relative;
width: 256px;
}
.AreaPopup .delete-area-modal{
min-width: 376px;
margin-left: -206px;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.CombineField{
position: relative;
border: none;
}
.CombineField:focus{
outline: none;
}
.CombineField.prefix .type-prefix{
position: absolute;
left: 10px;
top:0px;
height:24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.CombineField.prefix input{
padding-left: 50px;
}
.CombineField .dropdown-items .item{
padding-left: 9px;
margin-top: 0px;
height: 32px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.CombineField .dropdown-items .item .icon{
margin-right: 8px;
}
.CombineField .dropdown-items .item:last-child{
margin-bottom: 0px;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.Combo{
position: relative;
border: none;
}
.Combo.dropdown-field .dropdown-toggle:before{
display: none;
}
.Combo .focus-holder{
outline: none;
}
.Combo.readonly{
color: #999999;
}
.Combo.readonly .dropdown-toggle{
display: none;
}
.Combo .dropdown-items .items-con .item{
height: 32px;
line-height: 32px;
}
.Combo .dropdown-items .items-con .item:last-child{
margin-bottom: 0px;
}
.Combo .input-con .ctl{
border-radius: 0px;
border: none;
border-bottom: 1px solid #CECECE;
padding-top: 0px;
padding-bottom: 0px;
height: 24px;
line-height: 24px;
}
.Combo .input-con .i-clear{
width:16px;
height: 16px;
cursor: pointer;
}
.Combo .input-con .i-clear.transparent .icon{
fill:transparent;
}
.ComboArea{
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.Datagrid{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.Datagrid .outdated {
background-color: lightgray;
}
.Datagrid .tr{
min-height: 64px;
}
.Datagrid .tr .td {
-webkit-box-flex:0;
-ms-flex:none;
flex:none;
}
.Datagrid .tr .td .wrap-cell{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.Datagrid .tr .td.overflow-visible .wrap-cell{
overflow: visible;
overflow: initial;
}
.Datagrid .tr .td.td-icon .wrap-cell{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.Datagrid .tr .td.td-icon .wrap-cell .txt{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.Datagrid .tr .td.rowselect .wrap-cell{
overflow: visible;
overflow: initial;
}
.Datagrid .tr.disable .c-check{
display: none;
}
.Datagrid .tr.empty-tr .td{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.Datagrid.edit-mode .td.rowselect{
display: none;
}
.Datagrid.edit-mode.edit .td.rowselect{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
/* --------- DatePicker --------- */
.DatePicker {
width:100%;
line-height: 16px;
z-index:1000;
position: absolute;
top: 40px;
left: 1px;
background: #fff;
border: 1px solid #999999;
border-top: none;
margin: -1px 0px 0 -1px;
}
.DatePicker-calendar{
-webkit-box-shadow: 1px -1px 1px rgba(0, 0, 0, .4);
box-shadow: 1px -1px 1px rgba(0, 0, 0, .4);
}
.DatePicker-calendar .calendar-header{
text-align:center;
padding:3px 0;
border-top-left-radius:4px;
border-top-right-radius:4px;
position:relative;
color:#999999;
font-size:12px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.DatePicker-calendar .calendar-header .header-text{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.DatePicker-calendar .calendar-header .header-text .month-text{
-webkit-transform:scale(0.75) translate(8px, 0);
transform:scale(0.75) translate(8px, 0);
}
.DatePicker-calendar .calendar-header .header-text .year-text{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transform:scale(0.75);
transform:scale(0.75);
}
.DatePicker-calendar .calendar-header .action{
color: #999999;
position:absolute;
top:6px;
}
.DatePicker-calendar .calendar-header .actionPrev{
left:3px;
}
.DatePicker-calendar .calendar-header .actionNext{
right:3px;
}
.DatePicker-calendar-table{
width:100%;
}
.DatePicker-calendar-table td,.DatePicker-calendar-table th{
text-align:center;
}
.DatePicker-calendar-table td .text,.DatePicker-calendar-table th .text{
-webkit-transform:scale(0.75);
transform:scale(0.75);
}
.DatePicker-calendar-table .calendar-week th{
color: #999999;
}
.DatePicker-calendar-table tbody td{
font-size: 12px;
cursor:pointer;
color: #999999;
}
.DatePicker-calendar-table tbody td .disable{
color:#d6d6d6;
}
.DatePicker-calendar-table tbody td:first-child{
background: #f2f2f2;
}
.DatePicker-calendar-table tbody td:last-child{
background: #f2f2f2;
}
.DatePicker-calendar-table tbody td.today{
background-color:#ccc;
}
.DatePicker-calendar-table tbody td.selected{
background-color:#a6c8ef;
}
.DatePicker-calendar-table tbody td:hover{
background-color:#a6c8ef;
}
.DatePicker-timer{
position: absolute;
width:32%;
right:0;
top:0px;
bottom: 0px;
overflow-x:hidden;
overflow-y: auto;
text-align: center;
border-radius: 4px;
color: #bbb;
}
.DatePicker-timer .time{
cursor: pointer;
display: inline-block;
-webkit-transform:scale(0.75);
transform:scale(0.75);
}
.DatePicker-timer .time.selected{
background-color:#a6c8ef;
}
.DatePicker.date-time-mode .DatePicker-calendar{
width: 68%;
}
/* --------- /DatePicker --------- */
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.phone-mode .EulaPopup-parent .Popup-con {
position: relative;
height: 100%;
max-width: 800px;
max-height: 800px;
}
.EulaPopup-parent .Popup-con {
position: relative;
max-width: 800px;
height: auto;
height: initial;
max-height: none;
max-height: initial;
margin: 0 auto;
}
.EulaPopup .affirmation-text{
font-size: 12px;
}
.EulaPopup .additional-info-links{
font-weight: 600;
width: 330px;
}
.EulaPopup .ctl-group {
font-family: Roboto;
font-weight: 300;
letter-spacing: 1.83px;
margin-bottom: 0px;
/*max-width: 800px;
min-height: 400px;*/
padding-top: 8px;
}
.EulaPopup .eula-content {
overflow-y:scroll;
height: 350px;
max-width: 800px;
border: thin solid #006ba6;;
padding: 3px;
}
.EulaPopup .initials {
margin-bottom: 0px;
margin-top: 0px;
width: 110px;
}
.EulaPopup .bottom-con{
margin-top: 10px;
}
.EulaPopup .checkbox-container {
margin-right: 25px;
}
.EulaPopup .checkbox-container .c-descr {
font-weight: 300;
margin-left: 10px;
}
.EulaPopup .EulaPopup-footer {
}
.EulaPopup .button-container {
display: inline-block;
width: 300px;
}
@media print
{
body {
visibility: hidden;
}
.printable, .printable * {
visibility: visible;
}
.page-break {
page-break-after: always;
}
.printable {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 2000px !important;
font-size: @font-size-larger;
overflow: visible;
}
}
.printable { visibility: hidden; }
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.GroupMembers{
position: absolute;
width: 200px;
height: 208px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -104px;
border: 1px solid #006BB2;
background: white;
z-index: 100;
border-radius: 4px;
-webkit-box-shadow: 0px 3px 6px 0px rgba(65, 65, 65, .32), 0px 3px 6px 0px rgba(65, 65, 65, .46);
box-shadow: 0px 3px 6px 0px rgba(65, 65, 65, .32), 0px 3px 6px 0px rgba(65, 65, 65, .46);
}
.GroupMembers .members-screen{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: fixed;
}
.GroupMembers .members-screen.noevents{
pointer-events: none;
}
.GroupMembers .members-header{
position: absolute;
width: 100%;
height: 32px;
line-height: 32px;
padding-left: 8px;
padding-top: 12px;
color: #006BB2;
}
.GroupMembers .members-header .title{
float: left;
width: 168px;
max-width: 168px;
color: #006BB2;
cursor: pointer;
font-size: 12px;
letter-spacing: 1.08px;
line-height: 18px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-decoration: none;
}
.GroupMembers .members-header .close-popup{
position: absolute;
right: 6px;
top: 3px;
cursor: pointer;
}
.GroupMembers .members-content{
position: absolute;
top: 32px;
left: 0px;
right: 0px;
height: 174px;
padding-left: 8px;
overflow-y: auto;
border-radius: 4px;
}
.GroupMembers .members-content div{
max-width: 176px;
margin-top: 8px;
font-size: 12px;
font-weight: 300;
color: #555555;
line-height: 16px;
letter-spacing: 1px;
}
.GroupMembers .go-edit{
width: 360px;
margin-left: -180px;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.GroupsSelectView{
width: 288px;
}
.GroupsSelectView .ctl-group{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: relative;
}
.GroupsSelectView .ctl-group:first-child label{
padding-left: 8px;
}
.GroupsSelectView .ctl-group:first-child .selected-names{
padding-left: 8px;
max-width: none;
}
.GroupsSelectView .ctl-group label{
color: #555555;
}
.GroupsSelectView .ctl-group .inputCon{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
@media(max-width: 800px){
.GroupsSelectView{
width: auto;
}
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.HashExceptionPopup{
min-width: 400px;
height: 200px;
position: absolute;
left:50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
font-size: 12px;
}
.HashExceptionPopup .HashExceptionPopup-modal{
border-radius: 0px;
border: none;
border-bottom: 2px solid #006BB2;
}
.HashExceptionPopup .HashExceptionPopup-modal .modal-header{
padding: 0;
cursor: pointer;
border: none;
background: #006BB2;
position: relative;
z-index: 2;
height: 56px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.HashExceptionPopup .HashExceptionPopup-modal .modal-header .modal-title{
max-width: 95%;
font-family: "Oswald";
font-weight: 600;
color: #001C49;
font-size: 14px;
font-size: 15px;
color: white;
margin-left: 16px;
}
.HashExceptionPopup .HashExceptionPopup-modal-footer{
padding: 8px 10px;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.ImagePicker{
height: 264px;
width: 352px;
}
.ImagePicker .choose-photo{
width: 112px;
height: 32px;
margin-top: 15px;
margin-bottom: 1px;
}
.ImagePicker .ctl-group.photo-group{
position: absolute;
top: 1px;
right: 16px;
padding-top: 0;
margin-top: 0;
}
.ImagePicker .ctl-group.photo-group .ctl-label{
top: -6px;
}
.ImagePicker .ctl-group.photo-group input{
width: 224px;
height: 32px;
}
.ImagePicker .image-format{
position: relative;
top: 2px;
right: 88px;
font-size: 20px;
-webkit-transform: scale(0.5);
transform: scale(0.5);
white-space: nowrap;
color: #999999;
}
.ImagePicker .upload-photo{
position: relative;
top: 8px;
left: 112px;
width: 128px;
height: 32px;
}
.ImagePicker .upload-photo.disabled{
color: #999999;
border-color: #DDDDDD;
}
.ImagePicker .pic{
position: absolute;
left: 112px;
bottom: 16px;
margin-left: 16px;
height: 128px;
width: 128px;
text-align: center;
line-height: 120px;
border: 1px solid #DDDDDD;
border-radius: 64px;
overflow: hidden;
}
.ImagePicker-parent .popup-modal .popup-header .modal-title{
max-width: 60%;
left: 80px;
}
.ImagePicker-parent .popup-modal .popup-footer{
margin-top: 15px;
}
.ImagePicker-parent .popup-modal .popup-footer .btn{
width: 80px;
}
.ImagePicker-parent .popup-modal .popup-footer .cancel{
width: 80px;
}
.phone-mode .ImagePicker{
position: absolute;
left: 50%;
margin-left: -132px;
height: 100%;
width: 264px;
}
.phone-mode .ImagePicker .photo-group{
top: 64px;
left: 20px;
}
.phone-mode .ImagePicker .image-format{
top: 44px;
left: -145px;
text-align: center;
width: 558px;
white-space: normal;
}
.phone-mode .ImagePicker .choose-photo{
margin-left: 77px;
}
.phone-mode .ImagePicker .upload-photo{
top: 32px;
left: 69px;
}
.phone-mode .ImagePicker .pic-hold{
position: absolute;
top: 180px;
bottom: 0;
}
.phone-mode .ImagePicker .pic{
left: 52px;
bottom: 50%;
margin-bottom: -63px;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.InactivityPopup .ctl-group {
font-size: 12px;
font-weight: 300;
letter-spacing: 1.83px;
margin-bottom: 0px;
max-width: 800px;
min-height: 50px;
padding-top: 8px;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.LicenseRenewalPopup .ctl-group {
font-weight: 300;
letter-spacing: 1.83px;
margin-bottom: 0px;
max-width: 800px;
min-height: 100px;
padding-top: 8px;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.MultiNewPopup {
width: 248px;
min-height: 88px;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.MultiSelect{
position: relative;
border: none;
}
.MultiSelect:focus{
outline: none;
}
.MultiSelect .c-check{
float: left;
border-color: #006BB2;
}
.MultiSelect .c-check.dashed, .MultiSelect .c-check.checked{
border-color: #72B864;
}
.MultiSelect .dropdown-control .c-check{
margin-top: 3px;
}
.MultiSelect .dropdown-control .place-holder{
margin-left: 32px;
color: #999999;
font-size: 12px;
margin-top: -1px;
}
.MultiSelect .dropdown-control .place-holder .label{
padding: 0 8px 0 0;
color: #999999;
font-size: 12px;
font-weight: 200;
}
.MultiSelect .dropdown-items{
top: 24px;
overflow: hidden;
max-height: none;
margin-bottom: 16px;
}
.MultiSelect .dropdown-items .items-con{
max-height: 268px;
overflow-y: auto;
}
.MultiSelect .dropdown-items .search-con{
height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.MultiSelect .dropdown-items .search-con:before,
.MultiSelect .dropdown-items .search-con:after {
content: " ";
display: table;
}
.MultiSelect .dropdown-items .search-con:after {
clear: both;
}
.MultiSelect .dropdown-items .search-con .search-ctl{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin: 0 8px;
}
.MultiSelect .dropdown-items .search-con .search-ctl .ctl{
background-color: white;
}
.MultiSelect .dropdown-items .search-con .btn-new{
width: 96px;
margin-right: 8px;
padding: 0;
line-height: 22px;
}
.MultiSelect .dropdown-items .item{
padding-left: 9px;
padding-top: 8px;
margin-top: 0px;
height: 32px;
}
.MultiSelect .dropdown-items .item:last-child{
margin-bottom: 0px;
}
.MultiSelect .dropdown-items .item .c-check{
float: left;
margin-left: 0px;
}
.MultiSelect .dropdown-items .item .item-name{
margin-left: 32px;
}
.MultiSelect.add-support .dropdown-items .search-con .search-input{
right: 96px;
}
.MultiSelect.readonly{
color: #999999;
}
.MultiSelect.readonly .dropdown-toggle{
display: none;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.NamePopup {
width: 264px;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.PaginationView{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-height: 56px;
background-color: white;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.PaginationView .lt{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.PaginationView .btn-action{
float: left;
width: 120px;
text-align: center;
margin-right: 24px;
margin-left: 16px;
}
.PaginationView .btn-action.disabled{
border-color: @black-20;
}
.PaginationView .number-info{
color: #999999;
float: left;
display: inline-block;
min-width: 80px;
}
.PaginationView .number-info input{
text-align: center;
width: 40px;
height: 24px;
margin-right: 8px;
padding: 0 8px;
}
.PaginationView .number-info .sep{
margin-right: 4px;
}
.PaginationView .total-count{
color: #999999;
margin: 0px 128px 0 0;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.ReleaseNotesPopup .ctl-group {
font-weight: 300;
letter-spacing: 1.83px;
margin-bottom: 0px;
max-width: 800px;
min-height: 400px;
padding-top: 8px;
}
.ReleaseNotesPopup-footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.ReleaseNotesPopup-footer .checkbox-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.ReleaseNotesPopup-footer .checkbox-container .c-descr {
display: inline-block;
font-size: 12px;
font-weight: 300;
margin-left: 10px;
}
.ReleaseNotesPopup-footer .button-container {
display: inline-block;
width: 101px;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.SessionExpiredPopup .ctl-group {
font-size: 12px;
font-weight: 300;
letter-spacing: 1.83px;
margin-bottom: 0px;
max-width: 800px;
min-height: 50px;
padding-top: 8px;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.SingleField{
position: relative;
border: none;
}
.SingleField:focus{
outline: none;
}
.SingleField.dropdown-field .dropdown-toggle:before{
display: none;
}
.SingleField.show-dropdown .dropdown-control.ctl.empty-value::-webkit-input-placeholder {
color: transparent;
}
.SingleField.show-dropdown .dropdown-control.ctl.empty-value::-moz-placeholder {
color: transparent;
}
.SingleField.show-dropdown .dropdown-control.ctl.empty-value:-ms-input-placeholder {
color: transparent;
}
.SingleField.show-dropdown .dropdown-control.ctl.empty-value ~ .ctl-label {
display: block;
}
.SingleField.prefix .type-prefix{
position: absolute;
left: 10px;
top: 0px;
height:24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.SingleField.prefix input{
padding-left: 50px;
}
.SingleField .dropdown-items .title{
display: block;
height:16px;
line-height:16px;
font-style: italic;
padding-left:8px;
margin-bottom: 8px;
font-size: 12px;
color: #333333;
letter-spacing: 1.08px;
}
.SingleField .dropdown-items .title.create-text{
height: 32px;
}
.SingleField .dropdown-items .item{
padding-left: 8px;
margin-top: 0px;
height: 32px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.SingleField .dropdown-items .item.create{
display: block;
}
.SingleField .dropdown-items .item:last-child{
margin-bottom: 0px;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.TenantEditPopup{
width: 320px;
}
.TenantEditPopup .ctl-group .ctl{
max-width: none;
}
.TenantEditPopup .ctl-group .SingleField, .TenantEditPopup .ctl-group .Combo{
max-width:none;
}
.TenantEditPopup .ctl-group.license-active-group{
margin: 16px 0 0 0;
height:32px;
}
.TenantEditPopup .ctl-group.license-active-group .c-check{
float:left;
}
.TenantEditPopup .ctl-group.license-active-group .c-check-text{
float:left;
}
.TenantEditPopup .ctl-group.timezone-group{
margin-top: 64px;
}
.TenantEditPopup.wider{
width: 592px;
}
.TenantEditPopup.wider .form-con{
margin: 0 -16px;
}
.TenantEditPopup.wider .form-con:before,
.TenantEditPopup.wider .form-con:after {
content: " ";
display: table;
}
.TenantEditPopup.wider .form-con:after {
clear: both;
}
.TenantEditPopup.wider .form-con > .ctl-group{
width: 288px;
margin-left:16px;
float: left;
}
.TenantEditPopup.wider .form-con > .ctl-group.timezone-group{
margin-top: 16px;
margin-right: 64px;
}
.TenantEditPopup-footer .checkbox-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
float: left;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.TenantEditPopup-footer .checkbox-container * { z-index: 100; }
.TenantEditPopup-footer .checkbox-container .c-descr {
display: inline-block;
font-size: 12px;
font-weight: 300;
margin-left: 10px;
}
.TenantEditPopup-footer .button-container {
display: inline-block;
width: 200px;
}
.TenantEditPopup-footer .button-container * {
display: inline-block;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.TimeSelect {
width:100%;
height: 28px;
display: block;
position: relative;
outline: none;
}
.TimeSelect.has-sec .input-con [name='sec']{
display: block;
}
.TimeSelect.has-sec .input-con [name='min'] + span{
display: block;
}
.TimeSelect.has-sec .input-con [name='min'] + span + .colon{
display: block;
}
.TimeSelect.has-sec .input-con [name='sec'] + span {
display: block;
}
.TimeSelect.has-sec .input-con.empty-time [name='sec']{
display: none;
}
.TimeSelect.has-sec .input-con.empty-time [name='sec'] + span {
display: none;
}
.TimeSelect.has-sec .input-con.empty-time [name='min'] + span{
display: none;
}
.TimeSelect.has-sec .input-con.empty-time [name='min'] + span + .colon{
display: none;
}
.TimeSelect .input-con {
border: 1px solid #EFEFEF;
background-color: #F8F8F8;
border-radius: 16px;
position: relative;
text-align: center;
width: 100%;
height: 100%;
}
.TimeSelect .input-con input{
float:left;
width: 31px;
height: 100%;
border: none;
color: #555555;
font-size: 12px;
background: none;
text-align: center;
padding: 0;
padding-left: 3px;
letter-spacing: 1.08px;
border: 0px;
}
.TimeSelect .input-con input:focus{
border: 0px;
outline: inherit;
}
.TimeSelect .input-con input[name='sec']{
display: none;
}
.TimeSelect .input-con input[name='min'] + span + .colon{
display: none;
}
.TimeSelect .input-con input[name='sec'] + span {
display: none;
}
.TimeSelect .input-con span{
float: left;
color: #555555;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.TimeSelect .input-con .i-clear{
position: absolute;
bottom: 6px;
right: 10px;
width: 16px;
height: 16px;
display: block;
}
.TimeSelect .input-con .i-clear .icon{
width: 100%;
height: 100%;
}
.TimeSelect .input-con .i-clear .ico-clock{
display: block;
}
.TimeSelect .input-con .i-clear .ico-close{
display: none;
}
.TimeSelect .input-con .i-clear.active .ico-clock{
display: none;
}
.TimeSelect .input-con .i-clear.active .ico-close{
display: block;
}
.TimeSelect .input-con .text-unit{
margin-left: -5px;
margin-right: 8px;
}
.TimeSelect .input-con .ctl-label{
position: absolute;
top: -19px;
left: 7px;
padding-top: 2px;
font-size: 12px;
color: #999999;
white-space: nowrap;
}
.TimeSelect .input-con.empty-time input,.TimeSelect .input-con.empty-time span{
display: none;
}
.TimeSelect .input-con.empty-time .ctl-label{
display: block;
text-align: left;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding-left: 8px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.TimeSelect .input-con.edit-time .ctl-label{
width: 100%;
text-align: left;
top: -19px;
left: 7px;
}
.TimeSelect .dropdown{
position: absolute;
float: left;
height: 40px;
top: 25px;
display: block;
background: white;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.TimeSelect .dropdown .column{
float: left;
height: 100%;
display: none;
overflow-y: scroll;
overflow-x: hidden;
-webkit-box-sizing: content-box;
box-sizing: content-box;
text-align: left;
-webkit-box-shadow: 0 3px 6px 0 rgba(65, 65, 65, .32), 0 3px 6px 0 rgba(65, 65, 65, .46);
box-shadow: 0 3px 6px 0 rgba(65, 65, 65, .32), 0 3px 6px 0 rgba(65, 65, 65, .46);
}
.TimeSelect .dropdown .column .item{
height: 16px;
left: 0px;
right: 0px;
padding-left: 8px;
padding-right: 8px;
font-size: 13px;
color: #555555;
letter-spacing: 1.08px;
line-height: 16px;
text-align: center;
opacity: 0.89;
cursor: pointer;
}
.TimeSelect .dropdown .column .item.active{
background: #F1F7FB;
}
.TimeSelect .dropdown.hour{
z-index: 100;
max-height: 384px;
}
.TimeSelect .dropdown.hour .hour-dropdown{
display: block;
}
.TimeSelect .dropdown.min{
z-index: 100;
left: 34px;
max-height: 960px;
}
.TimeSelect .dropdown.min .min-dropdown{
display: block;
}
.TimeSelect .dropdown.sec{
z-index: 100;
left: 68px;
max-height: 960px;
}
.TimeSelect .dropdown.sec .sec-dropdown{
display: block;
}
.TimeSelect.warning{
border-color: #DA4F4A;
}
.TimeSelect.warning .ctl-label{
color: #DA4F4A;
}
.TimeSelect.readonly .input-con{
background: #DDDDDD;
}
.TimeSelect.readonly .input-con input{
background: #DDDDDD;
color: #999999;
}
.TimeSelect.readonly .input-con span{
color: #999999;
}
.TimeSelect.readonly .i-clear{
cursor: default;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.Toast{
position: fixed;
z-index: 9999;
border-radius: 4px;
background: #555555;
left:50%;
top:50%;
min-width:300px;
height: 50px;
overflow: hidden;
line-height: 50px;
text-align: center;
margin-left: -150px;
margin-top: -25px;
color: white;
padding: 0 10px;
opacity: 0;
}
.Toast.transitioning{
-webkit-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
.Toast.transitioning-fast{
-webkit-transition: opacity .8s ease-in;
transition: opacity .8s ease-in;
}
.Toast.show{
opacity: 1;
}
.Toast.multi-line{
height: auto;
line-height: 20px;
padding: 8px;
text-align: left;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.UserEditPopup{
width: 256px;
}
.UserEditPopup .ctl-group .inputCon{
width: 100%;
}
.UserEditPopup .ctl-group.area-group .dropdown-control[disabled="disabled"]{
cursor: not-allowed;
}
/* --------- Colors --------- */
/* --------- /Colors --------- */
/* --------- Font Weight --------- */
/* --------- /Font Weight --------- */
/* --------- Mixins --------- */
/* --------- Mixins --------- */
.UserRolePopup{
position: relative;
overflow: auto;
}
.UserRolePopup.show-help .UserRolePopup-content{
width: 600px;
}
.UserRolePopup.show-help .UserRolePopup-content .help-container{
display: block;
}
.UserRolePopup-header{
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.UserRolePopup-header:before{
content: " ";
position: absolute;
left: -2px;
right: -2px;
bottom: 0px;
top: 0px;
z-index: 0;
-webkit-box-shadow: 0px 1px 2px 0px rgba(65, 65, 65, .24), 0px 1px 2px 0px rgba(65, 65, 65, .48);
box-shadow: 0px 1px 2px 0px rgba(65, 65, 65, .24), 0px 1px 2px 0px rgba(65, 65, 65, .48);
}
.UserRolePopup-header .help-btn{
position: absolute;
right: 16px;
top: 16px;
border-radius: 4px;
cursor: pointer;
border: 1px solid #006BB2;
}
.UserRolePopup-header .help-btn .icon{
fill: white;
}
.UserRolePopup-header .help-btn.active{
background-color: transparent;
}
.UserRolePopup-content{
height: 346px;
padding: 0 16px;
overflow-y: auto;
}
.UserRolePopup .role-control{
width: 100%;
}
.UserRolePopup .role-type{
position: relative;
height: 32px;
}
.UserRolePopup .role-type span{
float: right;
font-size: 12px;
color: #555555;
margin-right: 12px;
}
.UserRolePopup .role-type span:nth-child(2){
margin-right: 20px;
}
.UserRolePopup .select-content{
height: 32px;
position: relative;
}
.UserRolePopup .select-content label{
margin-left: 8px;
margin-top: 6px;
font-weight: 200;
color: #555555;
}
.UserRolePopup .select-content label.sub-label{
margin-left: 24px;
}
.UserRolePopup .select-content label.c-checked-text{
color: #555555;
}
.UserRolePopup .select-content .c-check{
float: right;
position: relative;
top: 8px;
}
.UserRolePopup .select-content .c-check.nth-fir{
margin-right: 24px;
}
.UserRolePopup .select-content .c-check.nth-sec{
position: absolute;
right: 76px;
}
.UserRolePopup .section-con{
position: relative;
float: left;
}
.UserRolePopup .section-con:before,
.UserRolePopup .section-con:after {
content: " ";
display: table;
}
.UserRolePopup .section-con:after {
clear: both;
}
.UserRolePopup .section-con .section{
width:50%;
float:left;
padding-bottom: 16px;
}
.UserRolePopup .section-con .section-title{
font-size: 12px;
color: #555555;
top: 8px;
margin-left: 8px;
}
.UserRolePopup .section-con .section-privileges{
width: 256px;
}
.UserRolePopup .section-con .section-data-privileges{
width: 200px;
background-color: #F8F8F8;
margin-top: 160px;
}
.UserRolePopup .section-con .section-data-privileges .select-content .c-check.nth-sec{
position: absolute;
right: 16px;
}
.UserRolePopup .section-con .section-data-privileges .role-type{
margin-top:32px;
}
.UserRolePopup .help-container{
position: absolute;
top: 26px;
right: -304px;
width: 272px;
display: none;
}
.UserRolePopup .help-container .help-text{
width: 0;
overflow: hidden;
height: 24px;
line-height: 32px;
margin: 8px 0px;
-webkit-box-shadow: 0px 4px 7px 0px #EFEFEF;
box-shadow: 0px 4px 7px 0px #EFEFEF;
background-color: #006BB2;
border-radius: 0 8px 8px 0;
-webkit-transition: width 0.5s;
transition: width 0.5s;
}
.UserRolePopup .help-container .help-text.slide{
-webkit-transition: width 0.5s;
transition: width 0.5s;
}
.UserRolePopup .help-container .help-text.slide.system{
width: 268px;
}
.UserRolePopup .help-container .help-text.slide.tenant{
width: 250px;
}
.UserRolePopup .help-container .help-text.slide.tenant-setting{
width: 208px;
}
.UserRolePopup .help-container .help-text.slide.area-setting{
width: 152px;
}
.UserRolePopup .help-container .help-text.slide.active-dictionary{
width: 160px;
}
.UserRolePopup .help-container .help-text.slide.credential-setting{
width: 224px;
}
.UserRolePopup .help-container .help-text.slide.admin-report{
width: 204px;
}
.UserRolePopup .help-container .help-text.slide.alerts{
width: 180px;
}
.UserRolePopup .help-container .help-text.slide.acknowledge-alert{
width: 160px;
}
.UserRolePopup .help-container .help-text.slide.alert-settings{
width: 140px;
}
.UserRolePopup .help-container .help-text.slide.user{
width: 250px;
}
.UserRolePopup .help-container .help-text.slide.user-detail{
width: 222px;
}
.UserRolePopup .help-container .help-text.slide.group{
width: 260px;
}
.UserRolePopup .help-container .help-text.slide.accesspoint{
width: 292px;
}
.UserRolePopup .help-container .help-text.slide.accesspoint-group{
width: 260px;
}
.UserRolePopup .help-container .help-text.slide.shift{
width: 178px;
}
.UserRolePopup .help-container .help-text.slide.rule{
width: 196px;
}
.UserRolePopup .help-container .help-text.slide.calendar-event{
width: 192px;
}
.UserRolePopup .help-container .help-text.slide.dashboard{
width: 236px;
}
.UserRolePopup .help-container .help-text.first-text{
margin-top: 10px;
}
.UserRolePopup .help-container .help-text .text{
position: relative;
left: 8px;
bottom: 5px;
color: white;
font-size: 12px;
}
.UserRolePopup-parent .popup-modal{
height: 100%;
overflow: hidden;
}
.UserRolePopup-parent .popup-modal .modal-body{
padding: 0px;
}
@media(max-width: 800px){
.UserRolePopup-parent .UserRolePopup{
position: relative;
overflow: auto;
}
.UserRolePopup-parent .UserRolePopup.show-help .UserRolePopup-content{
width: auto;
}
.UserRolePopup-parent .UserRolePopup-content{
height: auto;
}
}
/*# sourceMappingURL=app-bundle.css.map */