@import url('https://res.stikol.com/icons/fa/v5/css/all.min.css'); /* FontAwesome 5 */
@import url('https://res.stikol.com/icons/fa/v5/css/v4-shims.min.css'); /* FontAwesome v4 Shims */

/* @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i'); */

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('https://res.stikol.com/fonts/general/OpenSans-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 300;
    src: url('https://res.stikol.com/fonts/general/OpenSans-LightItalic.ttf') format('truetype');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('https://res.stikol.com/fonts/general/OpenSans-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: url('https://res.stikol.com/fonts/general/OpenSans-Italic.ttf') format('truetype');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: url('https://res.stikol.com/fonts/general/OpenSans-Semibold.ttf') format('truetype');
}
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 700;
    src: url('https://res.stikol.com/fonts/general/OpenSans-SemiboldItalic.ttf') format('truetype');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    src: url('https://res.stikol.com/fonts/general/OpenSans-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 800;
    src: url('https://res.stikol.com/fonts/general/OpenSans-BoldItalic.ttf') format('truetype');
}


body{
    background-color:#f9f9f9;
    /*color:#85868d;*/
    color: #555555;
    font-family: 'Open Sans', sans-serif;
    position:relative;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
body, html{
    overflow-x:hidden;
}
html { height: 100%; 
}

strong, b{
    font-weight:700;}

th {
    /*font-weight: 300;*/
}

td, th {
    word-break: break-all;/*break-word;*/
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;    
}

td div {
    word-break: break-word;
}

table {
    font-weight: 300;
    font-family: "Open Sans", Arial, sans-serif;
}

.transit{
    transition: all 0.5s;
    -moz-transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -o-transition: all 0.5s;}


a:focus{
    outline:none;
    /*text-decoration: none;*/
}

a:hover{
    /*text-decoration:none;*/
}

a:focus:not(:hover){
    text-decoration: none; 
}

.admin_form{
    width: 100%;
}
/*
input.form-control, textarea.form-control, select.form-control {
    background-color: #fff;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    color: #555555;
    min-height: 34px;
    overflow: hidden;
    line-height: 34px;
    padding: 0 0 0 8px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
}*/

.form-control[readonly] {
    cursor: text;
}
div.chosen-container.form-control {
    padding: 0;
    border: none;
}
/*****************************
Loader
*****************************/

.loading-container {
    position:fixed;
    background-color:#f9f9f9;
    z-index:9;
    top: 0;
    left: 0;
    height:100%;
    width:100%;
    cursor:wait;
}

.loading {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    bottom:0;
    right:0;
    margin:auto;
    transform: rotate(45deg);  
}

.loading div {
    width: 16px;
    height: 16px;
    position: absolute;
}

.l1 div, .l2 div, .l3 div, .l4 div {
    width: 100%;
    height: 100%;
}

.l1 div{ background-color:#2ecc71;}
.l2 div{ background-color:#9b59b6;}
.l3 div{ background-color:#3498db;}
.l4 div{ background-color:#f1c30f;}

.l1 { transform: translate(0,0); }
.l2 { transform: translate(0,16px); }
.l3 { transform: translate(16px,0px); }
.l4 { transform: translate(16px,16px); }

@keyframes rot1 {
    0%{ transform: rotate(0deg); }
    40%{ transform: rotate(0deg); }
    50%{ transform: rotate(0deg); }
    60%{ transform: rotate(90deg); }
    100%{ transform: rotate(90deg); }
}

@keyframes rot2 {
    0%{ transform: rotate(0deg); }
    40%{ transform: rotate(0deg); }
    50%{ transform: rotate(0deg); }
    60%{ transform: rotate(-90deg); }
    100%{ transform: rotate(-90deg); }
}

@keyframes rot3 {
    0%{ transform: rotate(45deg); }
    35%{ transform: rotate(45deg); }
    65%{ transform: rotate(405deg); }
    100%{ transform: rotate(405deg); }
}

@keyframes l1-rise {
    0%{ transform: translate(0px,0px); }
    30%{ transform: translate(-4px, -4px); }
    70%{ transform: translate(-4px, -4px); }
    100%{ transform: translate(0px, 0px); }
}

@keyframes l2-rise {
    0%{ transform: translate(0,16px); }
    30%{ transform: translate(-4px, 20px); }
    70%{ transform: translate(-4px, 20px); }
    100%{ transform: translate(0,16px); }
}

@keyframes l3-rise {
    0%{ transform: translate(16px, 0px); }
    30%{ transform: translate(20px, -4px); }
    70%{ transform: translate(20px, -4px); }
    100%{ transform: translate(16px, 0px); }
}

@keyframes l4-rise {
    0%{ transform: translate(16px,16px); }
    30%{ transform: translate(20px, 20px); }
    70%{ transform: translate(20px, 20px); }
    100%{ transform: translate(16px,16px); }
}



.l1 { animation: l1-rise 3s ease 0s infinite; }
.l2 { animation: l2-rise 3s ease 0s infinite; }
.l3 { animation: l3-rise 3s ease 0s infinite; }
.l4 { animation: l4-rise 3s ease 0s infinite; }

.l1 div, .l4 div { animation: rot1 3s ease 0s infinite; }
.l2 div, .l3 div { animation: rot2 3s ease 0s infinite; }






/*****************************
Left Panel (aside navigation)
*****************************/

aside.left-panel{
    background-color:#2b2f3e;
    width:230px;
    position:fixed;
    padding:15px 0px;
    /*box-shadow:inset -5px 0px 8px rgba(0,0,0,0.3);*/
    box-shadow: 7px 7px 18px rgba(0,0,0,0.3);
    height: calc(100vh - 30px);
    top:30px;
    left:0px;
    z-index: 1001;
    overflow: hidden; 
    outline: none; 
    background-color: #2f9cd0; 
    color: #fff;
    transition: all 0.4s;
    display:none;
    touch-action: pan-y
}

aside.left-panel.collapsed{
    display:none;
    overflow:visible !important;
    position:fixed;
    top:0px;
    left:0px;
    bottom:0px;
    cursor: pointer !important;
}
aside.left-panel.collapsed:hover {
    background-color: skyblue;
    /*transition: all 0.4s;*/
}

aside.left-panel > .logo-bar{
    background-image: url('https://res.stikol.com/logos/ikol_whitelogolong_t_128.png');
    background-size: 120px 60px;
}
aside.left-panel.collapsed > .logo-bar{
    background-image: url('https://res.stikol.com/logos/ikol_whitelogoshort_t_55.png');
    background-size: 40px 40px;
}
/*** Aside sizes ***/

/*aside.left-panel.lg{
        width:250px;}
        
aside.left-panel.lg + .content{
        margin-left:250px;}*/


/*** Aside Collapsed ***/
@media (min-width: 0px) {
    aside.left-panel.collapsed{
        width:75px;
        text-align:center;
        /*transition: all 0.2s;*/
    }

    aside.left-panel.collapsed + .content{
        /*margin-left:75px;*/
    }

    aside.left-panel.collapsed .user .user-login,
    aside.left-panel.collapsed span.nav-label{
        display:none;}


    aside.left-panel.collapsed .navigation > ul > li > a{
        padding:20px;}



    aside.left-panel.collapsed i.fa{
        font-size:22px;
        color: #fff;
    }

    aside.left-panel.collapsed .navigation > ul > li.has-submenu:after{
        display:none;}
}


/*****************************
User
*****************************/

.user{
    /*margin-bottom:35px;*/
    /*min-height: 215px;*/
}
aside.left-panel.collapsed .user {
    padding-top: 50px;
}
.user h4.user-name{
    /*color:#8e909a;*/
    color: #fff;
    font-size:18px;
    padding-left: 2px;
    padding-right: 2px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.user img{
    border:1px solid #383c4a;
    border:none;
    padding:8px;
    width:150px;
}
#window-leftpanel.collapsed .user img {
    width:70px;
}
#window-leftpanel.collapsed .user .user-name {
    font-size:14px;
}

.user-login{
    display:inline-block;
    float:left;
}

.user-login .btn{
    /*border:1px solid #343847;*/
    background-color:transparent;
    /*color:#616574;*/
    padding: 2px 4px 0px 4px;
    border: solid 1px skyblue;
    color: #fff;
    font-weight: 300;
    text-transform: uppercase;
    margin-left: 5px;
    font-size:12px;
    float: right;
}

.user-login .dropdown-menu{
    /*border:1px solid #343847;*/
    /*    color:#616574;
        background-color:#2B2F3E;*/
    color: #2f9cd0;
    background-color: #fff;
    border: solid 1px skyblue;
    width:100%;
    margin-top:-1px;
    min-width:100%;
    border-radius:0px 0px 4px 4px;
    border-top:0px;}	
.user-login .dropdown-menu li{
    font-size:12px;
    /*color:#616574;*/
    color: #2f9cd0;
    padding:4px 8px;
    font-weight: 300;
}	
.user-login .dropdown-menu li a{
    font-size:12px;
    /*color:#616574;*/
    color: #2f9cd0;
    padding:4px 8px;
    font-weight: 300;
    text-transform: uppercase;
}

.user-login .dropdown-menu li a:hover,
.user-login .dropdown-menu li a:focus{
    /*    background-color:#616574;
        color:#fff;*/
    background-color: skyblue;
    color: #2f9cd0;
}

.user-login .status-icon{
    font-size:6px;
    line-height:0px;
    margin-right:2px;
    position:relative;
    bottom:2px;}

.user-login .status-icon.available{
    color:#27c7bc;}

.user-login .status-icon.busy{
    color:#EC971F;}

.user-login .status-icon.invisibled{
    color:#4a4e5d;}

.user-login .status-icon.signout{
    color:#FF404B;}
.dropdown-menu > li > a.restore-settings {
    white-space:normal;
}
hr.user-links {
    border-top: 1px solid skyblue;
    margin: 4px 0px;
}
/*****************************
Logo Bar
*****************************/
.logo-bar {

    width: 100%;
    height: 60px;
    margin-bottom: 15px;
    background-position: center center;
    background-repeat: no-repeat;
}


/*****************************
Navigation
*****************************/

.navigation {
    margin: 20px 0px;
}

.navigation > ul > li{
    position:relative;}


.navigation > ul > li.has-submenu:after{
    /*content: '\027E9';*/
    content: '\0203A';
    /*content:"\f105";*/
    /*font-family: 'Font Awesome 5 Pro';*/
    display:inline-block;
    position:absolute;
    /*color:#7a7e8a;*/
    color: #fff;
    right:15px;
    /*    transition: all 0.4s;
        -moz-transition: all 0.4s; 
        -webkit-transition: all 0.4s; 
        -o-transition: all 0.4s;*/
    top:10px;
    /*visibility:hidden;*/
}

.navigation > ul > li.active.has-submenu:after,
.navigation > ul > li.has-submenu:hover:after{
    color:#fff;}



.left-panel .navigation > ul > li > a{
    display:block;
    padding:12px 25px 12px 12px;
    /*color:#7a7e8a;*/
    color: #fff;
    text-transform:uppercase;
    font-size:12px;
    text-decoration:none;
    font-weight:300;
    /*border-bottom:1px solid #2f3444;*/
    border-bottom:1px solid lightblue;
    /*    transition: all 0.4s;
        -moz-transition: all 0.4s; 
        -webkit-transition: all 0.4s; 
        -o-transition: all 0.4s;*/
    transition: all 0.4s;
}
aside.left-panel.collapsed .navigation > ul > li > a{
    font-size:18px;
    padding: 10px 25px;
}


.navigation > ul:hover > li.active > a{
    /*background-color:transparent;*/
    background-color: #2f9cd0;
    box-shadow:none;
    /*color:#7a7e8a;*/
    color: #fff;
}

.navigation > ul > li:hover > a:not(.menu-item-disabled),
.navigation > ul > li.active:hover > a:not(.menu-item-disabled),
.navigation > ul > li.active > a:not(.menu-item-disabled){
    color:#fff;
    /*background-color: #ff404b;*/
    /*background-color: #2f9cd0;*/
    background-color: skyblue;
    /*    -webkit-box-shadow: inset -6px 0 8px -2px rgba(0,0,0,0.3);
        box-shadow: inset -6px 0 8px -2px rgba(0,0,0,0.3);*/
}
.left-panel .navigation > ul > li > a.menu-item-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.left-panel .navigation > ul > li:hover > a.menu-item-disabled {
    background: lightblue;
}

ul > li > ul > li > a.menu-item-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    color: black !important;
}

.navigation ul li a i{
    /*margin-right:6px;*/
    font-size:14px;
    color: #fff;
    width: 20px;
    display: block;
    float: left;
    height: 30px;
}



/*** Sub Menu ***/
.navigation ul li ul{
    display:none;
    /*background-color:#333747;*/
    background-color: #fff;
    /*    -webkit-box-shadow: inset -6px 0 8px -2px rgba(0,0,0,0.2);
        box-shadow: inset -6px 0 8px -2px rgba(0,0,0,0.2);*/
}


aside:not(.collapsed) .navigation ul li.active ul{
    display:block;}

.navigation ul li ul li a{
    padding:8px 10px;
    text-decoration:none;
    transition: all 0.2s;
    -moz-transition: all 0.2s; 
    -webkit-transition: all 0.2s; 
    -o-transition: all 0.2s;
    font-size:12px;
    border-left:0px solid #5e6271;
    text-align:left;
    display:block;
    color: #2f9cd0;
    font-weight: 300;
    text-transform: uppercase;
    border-left: 5px solid #fff;
}

.navigation ul li ul li a:hover,
.navigation ul li ul li.active a{
    /*border-left:5px solid #5e6271;*/
    border-left:5px solid #2f9cd0;
    /*color:#5e6271;*/
    color: #2f9cd0;
    /*padding: 8px 25px 8px 20px;*/
}




/*** Aside Collapsed Sub Menu ***/
@media (min-width: 0px) {
    aside.left-panel.collapsed .navigation ul li ul{
        display:none !important;
    }
    /*aside.left-panel.collapsed .navigation ul li ul{
            position:absolute;
            z-index:3;
            left:100%;
            top:0px;
            background-color:#F2F2F4;
            box-shadow:none;
            padding:10px 0px;
            min-width:200px;
            border:1px solid #dddddd;}
            
    aside.left-panel.collapsed .navigation ul li ul:before{
            display:block;
            content:"";
            height:20px;
            width:20px;
            border-color: transparent #F2F2F4 transparent transparent;
            border-width:10px;
            border-style:solid;
            position:absolute;
            cursor:pointer;
            right:100%;
            top:22px;}
    
    aside.left-panel.collapsed .navigation > ul > li:hover > ul{
            display:block !important;}
            
    
    aside.left-panel.collapsed .navigation ul li ul li a{
            border:0px;
            color:#8f8f9f;
            border-bottom:1px dashed #ECECEE;}*/
}



/*****************************
Top Header
*****************************/

header{
    background-color: #2f9cd0;
    /*border-bottom:1px solid #ececee;*/
    /*border-bottom:1px solid #2f9cd0;*/
    /*    padding-top:4px;
        padding-bottom:4px;*/
}

.navbar-container {
    width: 100%;
    float: left;
    margin-bottom: 10px;
    height: 50px;
}	

.navbar-toggle{
    display:block;
    margin: 0 auto;
}

.navbar-toggle .icon-bar{
    /*background-color:#b3b3be;*/
    background-color: #fff;
}

.app-search{
    position:relative;
    margin: 2px 5px 0px 5px;
}

.app-search .form-control,
.app-search .form-control:focus{
    border:1px solid #d3d3db;
    font-size:13px;
    color:#c4c4cd;
    padding-left:30px;
    background:none;
    box-shadow:none;
}

.app-search .form-control.form-control-danger {
    border-color: #a94442;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
.app-search .form-control.form-control-blue {
    border-color: #2f9cd0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #2f9cd0;
}

.app-search:before{
    content:"\f002";
    position:absolute;
    left:12px;
    font-family: 'Font Awesome 5 Pro';
    cursor:pointer;
    top:5px;
    color:#c4c4cd;
    display:inline-block;}

.app-search .form-control::-moz-placeholder {
    color:#c4c4cd;}


/*** Nav Toolbar (right)***/

header .navbar-default .navbar-nav > li > a{
    color:#b3b3be;}


/*** Nav Toolbar (right)***/

.nav-toolbar{
    /*margin:8px 0px;*/
    float:right;
    margin-bottom: 0;
}
span.nav-label {
    /*margin-left: 5px;*/
}

.nav-toolbar > li{
    padding:0px;
    display:inline-block;
    margin-left:5px;
    position:relative;
    list-style:none;}

.nav-toolbar li span.badge{
    position:absolute;
    top:0px;
    right:-3px;
    background-color:#8d82b5;
    font-weight:300;
    font-size: 9px;
    cursor:pointer;
    height:14px;
    width:14px;
    padding:3px;
}

.nav-toolbar li span.badge.bg-info{
    background-color:#8d82b5;}

.nav-toolbar li span.badge.bg-warning{
    background-color:#E35B5A;}


.nav-toolbar > li > a{
    /*color:#d3d3db;*/
    color: #fff;
    font-size:12px;
    /*    border:1px solid #d3d3db;*/
    border:2px solid #fff;
    border-radius:50px;
    height:24px;
    margin: 3px;
    width:24px;
    text-align:center;
    text-shadow: 0px 0px 1px #fff;
    display:block;
    padding:4px;
    transition: all 0.4s;
    -moz-transition: all 0.4s; 
    -webkit-transition: all 0.4s; 
    -o-transition: all 0.4s;

}

.nav-toolbar > li > a:hover{
    /*    color:#f1f1f1;
        border:2px solid #f1f1f1;*/
    background-color: skyblue;
}	


.nav-toolbar .dropdown-menu.panel{
    padding-top:0px;
    padding-bottom:0px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);}



/*****************************
Content Area (right)
*****************************/

.content{
    /*margin-left:230px;*/
    /*margin-left: 75px;*/

}

.warper{
    padding-top:20px;
    padding-bottom:20px;
    /*min-height:550px;*/
}
.warper.container-fluid{
    /*min-height:700px;*/
    height: calc(100vh - 30px);
    overflow: auto;
}
.container-fluid {
    /*    padding-right: 20px;
        padding-left: 20px;*/
}
/*** Page Header / Page Title ***/

.page-header{
    margin:0px;
    border:0px;}

.page-header h1{
    color:#84868e;
    font-weight:300;
    font-size:32px;
    margin-top:15px;
    margin-bottom:20px;}

.page-header *{
    font-weight:300;}


.page-header * small{
    font-size:14px;
    color:#9D9EA5;}

/*****************************
Custom Margins & Paddings
*****************************/

.no-margin{
    margin:0px;}


.margin-t-xs{
    margin-top:5px;}

.margin-t-sm{
    margin-top:10px;}

.no-padd{
    padding:0px;}


.padd-xs{
    padding:5px;}

.padd-sm{
    padding:10px;}

.padd-md{
    padding:15px;}

.padd-lg{
    padding:20px;}


.padd-t-xs{
    padding-top:5px;}

.padd-t-sm{
    padding-top:10px;}

.padd-t-md{
    padding-top:15px;}

.padd-t-lg{
    padding-top:20px;}

/*****************************
Styled Radio/Checkbox
*****************************/

.cr-styled{
    display:inline-block;
    margin:0px 2px 8px;
    color: #fff;
    font-size: 13px;
    min-height: 20px;
}

.cr-styled i{
    display:inline-block;
    height:20px;
    width:20px;
    cursor:pointer;
    vertical-align:middle;
    border:2px solid #CCC;
    border-radius:3px;
    text-align:center;
    padding-top:1px;
    font-family: 'Font Awesome 5 Pro';
    margin: 6px 0px 0px 0px;}


.cr-styled input{
    visibility:hidden;
    display:none;}

/* Checkbox */
.cr-styled input[type=checkbox] + i{
    float: left;
    margin-right: 5px;
}
.cr-styled input[type=checkbox]:checked + i:before{
    content: "\f00c";}
.checkbox-label {
    color: #555555;
    cursor: pointer;
    float: left;
    margin-top: 5px;
}
/* Radio */
.cr-styled input[type=radio] + i{
    border-radius:20px;}	
.cr-styled input[type=radio]:checked + i:before{
    content: "\f111";}

/*** cr-styled Theaming/Colorss ***/

.cr-styled input:checked + i{
    border-color:#2f9cd0;
    color:#2f9cd0;

}
.cr-styled.disabled input:checked + i{
    border-color:lightgrey;
    color:lightgrey;

}

/*****************************
 Pages / Widgets / Elements 
*****************************/

/****Dashboard Stats****/

.dashboard-stats.panel{
    position:relative;
    cursor:pointer;
    padding:10px 10px 10px 106px;}

.dashboard-stats i.fa.stats-icon{
    width:80px;
    padding:20px;
    font-size:40px;
    position:absolute;
    margin-left:10px;
    left:0px;
    top:10px;
    text-align:center;
    z-index:1;
    color:#fff;
    height:80px;}


.dashboard-stats.rounded i.fa.stats-icon,
.dashboard-stats.rounded.panel{
    border-radius:50px;}


.dashboard-stats .sparkline{
    position:absolute;
    left:30px;
    top:20px;
    opacity:0;}

.dashboard-stats h3{
    margin-top:14px;}

.dashboard-stats small{
    font-size:14px;
    margin-left:6px;
    opacity:0.8;}	

.dashboard-stats:hover i.fa.stats-icon{
    /*right:10px;*/
    left:100%;
    margin-left:-90px;}


.dashboard-stats:hover h3,
.dashboard-stats:hover p{
    opacity:0;}

.dashboard-stats:hover .sparkline,
.dashboard-stats:hover i.fa.stats-icon{
    opacity:1;}







/****Messages-Chating****/

.messages{
    /*    max-height:520px;
        overflow:auto;*/
}

.messages .media{
    padding-top:18px;
    padding-bottom:18px;
    margin:0px;
    border-top:1px dashed #eaeef1;}

.messages .media:first-child{
    border:0px;}

.messages .media .media-body .media{
    margin-top:18px;
    padding-bottom:0px;}


/*user status icon*/
.user-status{
    position:relative;
    display:inline-block;}

.user-status:before,
.user-status:before{
    content:"";
    display:inline-block;
    height:12px;
    width:12px;
    border-radius:100%;
    background-color:#666;
    position:absolute;
    top:0px;
    right:0px;
    border:2px solid #fff;}


/*user status icon color*/	
.user-status.online:before{
    background-color:#70ba63;}

.user-status.busy:before{
    background-color:#01a0e6;}

.user-status.invisibled:before{
    background-color:#f2b635;}

.user-status.offline:before{
    background-color:#f25648;}



.messages .media > .pull-left{
    margin-right:15px;}
.messages .media > .pull-right{
    margin-left:15px;}

.messages .media > .pull-right + .media-body{
    text-align:right;}	


.messages .media img.media-object{
    width:54px;
    border-radius:100%;}

.messages .media .media-body{
    font-size:13px;}





/****ToDo List****/
.todo-list li{
    border:0px;
    margin:0px;
    border-radius:0px;
    border-bottom:1px dashed #e0e0e0;}





/****Activities List****/


.activities-list{
    max-height:560px;
    overflow:auto;}

.activities-list > li{
    position:relative;
    padding:10px 95px 10px 40px;}

.activities-list > li:before{
    content:"";
    position:absolute;
    left:15px;
    top:0px;
    height:100%;
    border-left:1px solid #ccc;}

.activities-list > li:after{
    content:"";
    position:absolute;
    left:10px;
    top:10px;
    height:12px;
    width:12px;
    border-radius:20px;
    border:1px solid #ccc;
    background-color:#fff;}


.activities-list > li span.time{
    font-size:12px;
    color:#ccc;}


.activities-list li .activity-actions{
    position:absolute;
    right:0px;
    top:25px;}


.activities-list > li.info-activity:before,
.activities-list > li.info-activity:after{
    border-color:#4fcdfc;}

.activities-list > li.warning-activity:before,
.activities-list > li.warning-activity:after{
    border-color:#fcd036;}

.activities-list > li.danger-activity:before,
.activities-list > li.danger-activity:after{
    border-color:#ff6264;}

.activities-list > li.success-activity:before,
.activities-list li.success-activity:after{
    border-color:#68b828;}

.activities-list > li.primary-activity:before,
.activities-list > li.primary-activity:after{
    border-color:#7c38bc;}

.activities-list > li.info-activity:before,
.activities-list > li.info-activity:after{
    border-color:#4fcdfc;}


/*******Locators window*******/
/*div.warper.container-fluid {
    padding:0
} 
footer {
    display: none
} 
section.content {
    height: calc(100% - 30px); 
    overflow: hidden;
}*/
body {
    overflow: hidden;
    height:100%;
}
#window-locator-box {
    height: calc(100% - 180px);
    /*height: calc(100% - 200px);*/
    /*height: 100px;*/
    float: left;
    width: 100%;
    padding:2px;
}
#window-locator-details {
    height: 250px;
    width: 270px;
    float: left;
}
#window-details {
    /*height: 600px;*/
    float: left;
}
.pickerdesc {
    text-align: center;
    padding: 3px 0px;
    font-size: 13px;
}
.locator-detail {
    /* margin: 0px;
     float: left;
     padding: 2px;
     font-size: 10px;
     overflow: hidden;
     text-overflow: ellipsis;
     /*box-shadow: inset 0 2px 20px rgba(0, 0, 0, .1);*/
    /*  border: solid 1px #fff;
      border-radius: 0;*/

    display: inline-block;
    padding: 4px;
    border-radius: 3px;
    background-color: #fff;
    /*box-shadow: 1px 1px 3px #bbb;*/
    float: left;
    margin: 1px;
    cursor: help;
    font-size: 11px;
    border: 1px solid #ddd;
    font-weight: 400;
    height: 25px;
    min-height: 25px;
    max-height: 25px;    
}

.locator-detail-clickable {
    display: inline-block;
    padding: 4px;
    border-radius: 3px;
    background-color: #fff;
    /*box-shadow: 1px 1px 3px #bbb;*/
    float: left;
    margin: 1px;
    cursor: pointer;
    font-size: 11px;
    border: 1px solid #ddd;
    font-weight: 400;
    height: 25px;
    min-height: 25px;
    max-height: 25px;
}

.locator-detail-clickable:hover {
    border-color: #ffa500;
}


div.locator-controls > div > i {
    display: block;
    float:left;
    background-color: #fff;
    /*margin-bottom: 14px;*/
}

div.locator-controls > div > a:active {
    background-color: #2f9cd0;
    color: #fff;
    text-shadow: none;
}
.locator-controls-additional {
    display: none;
    background-color: white;
    position: absolute;
    width: 250px;
    padding: 2px 2px 0px 2px;
}
.locator-controls .btn, .locator-controls-additional .btn {
    width: 36px !important;
    font-weight: 900; /* for Font Awesome 5 Pro compatibility */
}
.locator-detail > i {
    font-size: 15px;
    margin: -2px 0px -2px -2px;
}
.locator-details-can {
    float:left;
}
.last-element {
    margin-bottom: 0px;
}
.locator {
    cursor: pointer;
    font-size: 12px;
    border: none;
    /*border-bottom: solid 1px #e8e8eb;*/
    padding: 2px 0px;
}
.locator:hover {
    background-color: #e8e8e8;
}
.locator:focus {
    outline: none;
}
/*.popover {
    position: relative;
}*/
.locator.active {
    background-color: #e8e8e8;
}
.locator.inactive {
    color: lightgrey;
    transition: all 0.4s;
}
.locator.inactive .locator-icon-box {
    opacity: 0.30;
    transition: all 0.4s;
}
.locator-details-heading > .well {
    background-color: #2f9cd0;
    border-radius: 0px;
    border: none;
    font-size: 13px;
    font-weight: 300;
    color: #fff;
    padding: 2px 10px;
    margin-bottom: 0px;
}
#locator-heading-name{
    font-size: 12px;
    font-weight: 300;
}
.locator-controls {
    float:left;
    width: calc(100% - 4px);
    text-align: center;
    margin-top: 2px;
    margin-bottom: 1px;
    margin-left: 2px;
    margin-right: 2px;
}
.locator-controls > i{
    background-color: #fff;
}
.locator-details {
    float:left;
    margin: 0px 0px 0px 0px;
    width: 100%;
}
.locator-details-heading {
    text-transform: uppercase;
    margin-top: -1px;
}
.locator-info {
    /*    max-height: 35px;
        overflow: hidden;*/
}
.locator-icon-box {
    text-align:center;
    float:left;
    width: 32px;
}
.locator-icon-box .locator-demo {
    font-size: 8px;
    font-weight: bold;
    padding: 1px;
    border-radius: 3px;
    background-color: tomato;
    margin-top: -12px;
    position: relative;
}

.locator-details-box {
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(217,217,217,1) 100%);
    float: left;
}
.locator-icon-box > img{

}
.locator-icon {    
    width: 32px;
    height: 32px;
}
.locator-icon-default {
    margin-top: 5px;
    width: 22px !important;
    height: 22px !important;
}
.el-group {
    /*padding: 3px;*/
    /*color: #2f9cd0;*/
    /*font-size: 17px;*/
    /*border-bottom: solid 1px #e8e8eb;*/
    cursor: pointer;
    margin-bottom: 2px;
}
.el-group.inactive {
    color: lightgrey;
}
.el-group:hover {
    /*background-color: #e8e8e8;*/
}
.locator-group .panel-body {
    padding: 0px;
}
/*.locator-minidetails {
    font-size: 10px;
    padding: 0px 3px !important;
}
.locator-minidetails > i {
    font-size: 14px;
}*/
.el-group.el-group-sm {
    font-size: 14px;
}

.point-area {
    margin: 10px 5px 10px 5px;
    font-size: 16px;
    font-style: italic;
}
.customer-title {
    cursor:pointer;
}
.customer-title:hover {
    text-decoration: underline;
}
.details-popover {
    width: 250px;
    background-color: #e8e8e8;
    box-shadow: 1px 1px 1px grey;
    float: left;
}

.detail-position {
    cursor: pointer;
}
.detail-position:hover {
    opacity: 0.8;
}
#switchdetails {
    text-align: center;
    display:none;
}
.business {
    background-color: #CFC !important;
}
.private {
    background-color: #3DBBF5 !important;
    color: white;    
}
.ok {
    /*color: #70ba63;*/
    background-color: #CFC !important;
}
.warn {
    background-color: #f0ad4e !important;
}
.bad {
    /*color: #d9534f;*/
    background-color: #FCC !important;
}
.off {
    background-color: #DDD !important;
}
.well.locator-detail.long {
    width: 100%;
}
.well.locator-detail.short {
    width: 33.3%;
}
.spinner {
    display: none;
    margin: 2px 5px;
}
.dashboard-spinner {
    position: fixed;
    background: rgba(255,255,255,0.7);
    padding: 5px;
    border-radius: 10px;
    z-index: 9999;
}
.notifications {
    font-size: 12px;
    /*height:80px;*/
    padding:2px;
    cursor: pointer;
    margin-bottom: 2px;
}
.notifications:hover {
    background-color: #e8e8e8;
}
.notifications-timestamp,
.notifications-icon,
.notifications-event {
    float:left;
    margin-left:2px;
}
.notifications-timestamp,
.notifications-info {
    /*margin-left:34px;*/
    font-size: 10px;
}
.notifications-icon,
.notifications-event {
    height: 24px;
    margin: 10px 2px 2px 2px;
    width: 30px;
    height: 40px;

}
.notifications-icon > img{
    width: 24px;
    height: 24px;
}
.notifications-icons {
    /*width: 28px;*/
    float: left;
}
.notifications-info {
    /*    height: 55px;
        overflow: hidden;*/
}
.notifications-title {
    color: #2f9cd0;
    font-size: 12px; 
}
/*Date */ 
.postdate { 
    position: relative; 
    width: 50px; 
    height: 55px; 
    float: left; 
    background:#2f9cd0;  
    border-radius: 5px;
    color: rgba(107,195,255,1);
    font-size: 12px;
    /*text-shadow: 4px 0 9px rgba(255,255,255,0.9) ;*/
}
.postdate-month, .postdate-day, .postdate-hour { 
    position: absolute; 
} 
.postdate-month { 
    top: 10px; 
    left: 3px; 
    text-transform: uppercase;
} 
.postdate-day { 
    top: 22px; 
    left: 3px;
    font-size: 21px; 
} 
.postdate-hour {
    top: 15px; 
    right: -10px; 
    transform: rotate(270deg);
    font-size:18px;
    color: #fff;
    text-shadow: 0px 0px 2px #fff;
}
.reports-body {
    /*padding-top: 5px;*/
    float: left;
    width: 100%;
    height: calc(100% - 22px);
}
.reports-body > .nav > li:first-of-type {
    /*margin-left: 5px;*/
}
div#report-menu {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
#report-body {
    height:100%;
}
.report-body {
    padding:2px;
}
.points-heading {
    float:left;
}
.btn-left {
    /*margin:5px;*/
}
.refresh-cutomer {
    margin-left:5px;
}
.table-popup {
    font-size: 12px;
}
#window-points-body {
    width:100%;
    height:calc(100% - 88px);
    float:left;
    padding: 2px;
}
#window-points-body > .panel {
    margin-bottom: 2px;
}
#window-tripdetails-body {
    height: calc(100% - 24px);
    width: 100%;
}
#window-notifications-body {
    /*width: calc(100% - 2px);*/
    width: 100%;
    height: calc(100% - 20px);
    padding: 2px;
}
#window-communicator-body {
    width: 100%;
    height: calc(100% - 20px);
    padding: 2px;
}
#window-addpoint-body {
    width: 100%;
    height: calc(100% - 22px);
}
#locator-note {
    height: 100%;
    width: 100% !important;
    border-radius: 2px;
    border: 1px solid #a3c79c;
    font-size: 13px;
    font-weight: 400;
}
.locator-note-wrapper {
    padding: 2px;
    height: calc(100% - 54px);
}
#locator-note:focus {
    box-shadow: none;
    border: 1px solid #70ba63;
}
#locator-note-detail {
    color: #555;
    font-size: 11px;
    font-weight: 400;
    height: 28px;
    padding: 0 5px;
}
#locator-note-detail > span:first-child {
    float: left;
}
#locator-note-detail > span:last-child {
    float: right;
}
.notes-status i {
    display: none;
}
.notes-status.changed .unsaved {
    font-size: 9px;
    margin: 1px;
}
.notes-status.active .not-empty, .notes-status.changed .unsaved {
    display: inline-block;
}
.notes-status.changed .not-empty {
    display: none;
}
.fabtn {
    padding: 4px;
    /*margin: 2px;*/
    border: solid 1px lightgrey;
    border-radius: 4px;
    font-size: 14px;
    color: #474747;
    text-shadow: 0px 0px 3px lightgrey;
    cursor: pointer;
}
.fabtn:hover {
    box-shadow: 0px 0px 2px #2f9cd0;
    border: solid 1px #2f9cd0;
    opacity: 0.7;
}
.fabtn:active {
    background-color: #2f9cd0;
    border: solid 1px #2f9cd0;
    color: #fff;
    text-shadow: none;
}
.fabtn.active {
    background-color: #2f9cd0;
    border: solid 1px #2f9cd0;
    color: #fff;
    text-shadow: none;
}
.fabtn.danger {
    background-color: #d9534f;
    border: solid 1px #d9534f;
    color: #fff;
    text-shadow: none;
}
.fabtn.waiting {
    background-color: #f0ad4e !important;
    border: solid 1px #f0ad4e !important;
    color: #fff !important;
    text-shadow: none;
    min-width: 24px;
    text-align: center;
}
.fabtn.highlight {
    /*background-color: #70ba63 !important;
    border: solid 1px #70ba63 !important;*/
    color: #f0ad4e !important;
    text-shadow: none;
    min-width: 24px;
    text-align: center;
}
.fabtn-rounded {
    width: 16px;
    height: 16px;
    font-size: 11px;
    color: #2f9cd0;
    padding-top: 2px;
    border-radius: 8px;
    cursor: help;
    /*text-align: center;*/
    margin: 2px;
    border: solid 1px;
    padding-left: 3px;
}
.fabtn-blue {
    color: #2f9cd0;
    font-size: 14px;
    margin: 0px 4px 0px 4px;
}
.tripchooser-box {
    margin-bottom: 4px;
    margin-top: 4px;
    text-align:center;
}
/*chosen bug hack*/
/*li.search-field{
    width: 100% !important;
}*/
li.search-field input.default{
    width: 100% !important;
}
.chosen-container-single .chosen-single {
    line-height: 19px;
    padding: 6px;
}
.remove-report-tab {
    cursor: pointer;
    /*    position: relative;
        left: -7px;
        z-index: 1;
        top: -5px;
        background: #fff;
        border-radius: 10px;*/
    color: #bbb;
}
.remove-report-tab:hover {
    opacity: 0.8;
}
.remove-report-select-option {
    margin-right:4px;
    font-size:16px;
}
.report-tab-content{
    /*    height: 100%;
        width: 100%;
        float: left;
        overflow: hidden;*/
}
.chartContainer {
    /*    margin: 0px -15px 0px -15px;
        border-top: 1px solid #ddd;*/
}
table.table th {
    /*    
        text-shadow: 0px 0px 1px #fff;
        color: #333;*/
    /*background-color: #E8E8E8;*/
    font-size:12px;
    font-weight: 300;
}
.table tr.th {
    /*background-color: #E8E8E8;*/
}
.table.table-sm > thead > tr > th,
.table.table-sm > tbody > tr > th,
.table.table-sm > tfoot > tr > th,
.table.table-sm > thead > tr > td,
.table.table-sm > tbody > tr > td,
.table.table-sm > tfoot > tr > td {
    padding: 2px;
}
.popup-icon {
    font-size: 18px;
    background: #2f9cd0;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
    margin:2px;
}
.popup-icon:hover {
    opacity: 0.7;
}
.popup-icon:active {
    opacity: 0.3;
}
.table > tbody > tr > td.tripdetailsrow {
    display: none;
    padding: 0px;

}
.tripdetailsheading {
    text-align: center;
}
.tripdetailsshow {
    /*margin-left: 10px;*/
}
table.tripdetails {
    padding: 0px;
    margin: 0px;
    margin: 0px;
    display: none;
}
table.tripdetails > tbody > tr > td {
    padding: 2px;
}
.report-row-clickable {
    cursor: pointer;
}
.report-row-clickable:hover {
    background: #e8e8e8;
}
.usericon {
    width: 40px;
    height: 40px;
    float: right;
    cursor: help;
    margin: 2px 2px 0px 0px;
    transition: all 0.5s;
    cursor: pointer;
    position: fixed;
    left: 206px;
}
.usericon.big {
    width: 150px;
    height: 150px;
    position: fixed;
    z-index: 1;
    left: 173px;    
}
.usericon-small {
    width: 35px;
    height: 35px;
    margin: 10px 10px 10px 0px;
}
.danger {
    /*    background: #E9573F !important;
        transition: all 0.5s ease;*/
}
.blue {
    background: #2f9cd0 !important;
    color: #fff !important;
    transition: all 0.5s ease;
}
.custom-control {
    position: relative;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    width: 26px;
    height: 26px;
    line-height: 26px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: black;
    font-size:18px;
    cursor: pointer !important;
}
.custom-control:hover {
    color: #777;
}
.service-control {
    font-size: 24px;
}
#service-control a {
    background: limegreen;
    color: #fff;
}
.service-control:hover {
    background: springgreen;
    color: #fff;
}
.leaflet-bar a, .leaflet-control-layers-toggle {
    /*background-size: 20px 20px;*/
}
.clear-control {
    font-size: 16px;
}
a.leaflet-control-draw-measure {
    background-size: 16px 16px;
}
a.leaflet-control-draw-scale {
    background-size: 16px 16px;
}
.menu-control {
    background: #2f9cd0;
    font-size: 30px;
    margin: 0px !important;
}
.menu-control a {
    background: #2f9cd0;
    font-size: 50px;
    color: #fff !important;
    padding:10px;
    width: 80px;
    text-align: center;
}
.menu-control-navbar {
    font-size: 50px;
    width: 100%;
    text-align: center;
    margin-top: -5px;
    margin-bottom: 20px;
}
.mobile-menu {
    background: #2f9cd0;
    font-size: 30px;
    position: fixed;
    top:30px;
    left:0;
    width: 100%;
}
.mobile-menu a {
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    width: 72px;
    text-align: center;
}
.mobile-menu a.active {
    background: skyblue;
}
.mobile-menu a:not(:nth-child(2)) {
    border-left: solid 1px skyblue;
}

.mobile-menu-buttons a {
    border-left: solid 1px skyblue;
}

.mobile-menu a:last-child {
    /*border-right: solid 1px skyblue;*/
}
.mobile-menu-header {
    /*height: 20px;*/
    height: 30px;
    float:left;
    width:100%;
    border-bottom: solid 1px skyblue;
    border-top: solid 1px skyblue;
}
.mobile-locators {

}
.mobile-logo {
    position: fixed;
    z-index: 99;
    top: 0px;
    left: 0px;
    width: 40px;
}
.mobile-logo {

}
.mobile-spinner {
    position: fixed;
    top: 0px;
    left: 40px;
    z-index: 9;
    height: 15px;
}
.mobile-window-locators {
    left: 0;
    top:80px;
    width: 270px;
    height:100%;
    z-index: 99;
    background: #fff;
    /*box-shadow: inset -5px 0px 8px rgba(0,0,0,0.3);*/
    /*padding-right: 8px;*/
}
.mobile-reports {

}
.mobile-window-reports {
    position: fixed;
    background: #fff;
    z-index: 9;
    display:none;
    overflow:scroll;
    top: 80px;
    left:0
}
.mobile-window-notifications {
    position: fixed !important;
    background: #fff;
    z-index: 9;
    display:none;
    /*overflow:scroll;*/
    top: 80px;
    width:270px !important;
    left: 0;
    /*box-shadow: inset -5px 0px 8px rgba(0,0,0,0.3);*/
}

.STXCANDashboardIcon {
    background: url("https://res.stikol.com/interface/dashboard_can_t_284.png") no-repeat scroll rgba(0, 0, 0, 0);
    display: inline-block;
    height: 24px;
    text-indent: -9999px;
    width: 25.5px;
    border-radius: 3px;
    background-color: #fff;
    margin: 1px;
    cursor: help;
    border: 1px solid #ddd;
}
.STXDashboardGlowContainer.STXDashboardIcon_Maps {
    background: url("https://res.stikol.com/interface/dashboard_mapmarker_t_16.png") no-repeat 4px 4px #fff;
    padding-left: 22px;
    padding-right: 2px;

}
.STXDashboardGlowContainer.STXDashboardIcon_Calendar {
    background: url("https://res.stikol.com/interface/dashboard_calendar_t_16.png") no-repeat 4px 4px #fff;
    padding-left: 22px;
    padding-right: 2px;  

}
.STXDashboardGlowContainer.STXDashboardIcon_Speed {
    background: url("https://res.stikol.com/interface/dashboard_speed_t_16.png") no-repeat 4px 4px #fff;
    padding-left: 22px;
    padding-right: 2px;  
}
.STXDashboardGlowContainer.STXDashboardIcon_GPS {
    background: url("https://res.stikol.com/interface/dashboard_gps_t_16.png") no-repeat 4px 4px #fff;
    padding-left: 22px;
    padding-right: 2px;  
}
.STXDashboardGlowContainer.STXDashboardIcon_Ignition {
    background: url("https://res.stikol.com/interface/dashboard_ignition_t_16.png") no-repeat 4px 4px #fff;
    padding-left: 22px;
    padding-right: 2px;  
}
.STXDashboardGlowContainer.STXDashboardIcon_Engine {
    background: url("https://res.stikol.com/interface/dashboard_engine_t_16.png") no-repeat 4px 4px #fff;
    padding-left: 22px;
    padding-right: 2px;  
}
.STXDashboardGlowContainer.STXDashboardIcon_Voltage {
    background: url("https://res.stikol.com/interface/dashboard_voltage_t_16.png") no-repeat 4px 4px #fff;
    padding-left: 22px;
    padding-right: 2px;  
}

.STXDashboardGlowContainer.STXDashboardIcon_Radiosecured {
    background: url("https://res.stikol.com/interface/dashboard_radiosecured_t_16.png") no-repeat 4px 4px #fff;
    padding-left: 22px;
    padding-right: 2px;  
}
.STXDashboardGlowContainer.STXDashboardIcon_GSM {
    padding-left: 22px;
    padding-right: 2px;  
}
.STXDashboardGlowContainer.STXDashboardIcon_EngineSpeed {
    background: url("https://res.stikol.com/interface/dashboard_enginespeed_t_16.png") no-repeat 4px 4px #fff;
    padding-left: 22px;
    padding-right: 2px;  
}
.STXDashboardGlowContainer.STXDashboardIcon_Temperature {
    background: url("https://res.stikol.com/interface/dashboard_temperature_t_16.png") no-repeat 4px 4px #fff;
    padding-left: 22px;
    padding-right: 2px;  
}
.STXDashboardGlowContainer.STXDashboardIcon_Battery {
    background: url("https://res.stikol.com/interface/dashboard_battery_t_16.png") no-repeat 4px 4px #fff; 
    padding-left: 22px;
    padding-right: 2px;  
}
.STXDashboardGlowContainer.STXDashboardIcon_Mileage {
    background: url("https://res.stikol.com/interface/dashboard_mileage_t_16.png") no-repeat 4px 4px #fff;
    padding-left: 22px;
    padding-right: 2px;  
}
.STXDashboardGlowContainer.STXDashboardIcon_FuelRange {
    background: url("https://res.stikol.com/interface/dashboard_fuelrange_t_16.png") no-repeat 4px 4px #fff;
    padding-left: 22px;
    padding-right: 2px;  
}
.STXDashboardGlowContainer.STXDashboardIcon_Fuel {
    background: url("https://res.stikol.com/interface/dashboard_fuel_t_16.png") no-repeat 4px 4px #fff;
    padding-left: 22px;
    padding-right: 2px;  
}
.STXDashboardGlowContainer.STXDashboardIcon_Time {
    background: url("https://res.stikol.com/interface/dashboard_time_t_16.png") no-repeat 4px 4px #fff;
    padding-left: 22px;
    padding-right: 2px;  
}
.STXDashboardGlowContainer.STXDashboardIcon_Error {
    background: url('https://res.stikol.com/interface/infomenu_canceldark_t_16.png') no-repeat 4px 4px #fff;
    padding-left: 22px;
    padding-right: 2px;  
}

.STXDashboardGlowContainer.STXDashboardIcon_AxleWeight {
    padding-left: 22px;
    padding-right: 2px;  
}
.STXDashboardGlowContainer.STXDashboardIcon_Height {
    background: url('https://res.stikol.com/interface/dashboard_height_t_16.png') no-repeat 4px 4px #fff;
    padding-left: 22px;
    padding-right: 2px;  
}
.STXDashboardIcon_Break {
    display: inline-block;
    background: url('https://res.stikol.com/interface/tacho_break_t_16.png') no-repeat;
    width: 16px;
    height: 16px;
    float:left;
    margin-right: 5px;
}
.STXDashboardIcon_Avail {
    display: inline-block;
    background: url('https://res.stikol.com/interface/tacho_available_t_16.png') no-repeat;
    width: 16px;
    height: 16px;
    float:left;
    margin-right: 5px;
}
.STXDashboardIcon_Driving {
    display: inline-block;
    background: url('https://res.stikol.com/interface/tacho_driving_t_16.png') no-repeat;
    width: 16px;
    height: 16px;
    float:left;
    margin-right: 5px;
}
.STXDashboardIcon_Work {
    display: inline-block;
    background: url('https://res.stikol.com/interface/tacho_work_t_16.png') no-repeat;
    width: 16px;
    height: 16px;
    float:left;
    margin-right: 5px;
}
.STXDashboardGlowContainer.STXDashboardIcon_D1 {
    background: url('https://res.stikol.com/interface/tacho_driver1_t_16.png') no-repeat 4px 4px;
    padding-left: 22px;
    padding-right: 2px; 
    padding-bottom: 3px;
    padding-top: 4px;
    min-height: 17px;
}
.STXDashboardGlowContainer.STXDashboardIcon_D2 {
    background: url('https://res.stikol.com/interface/tacho_driver2_t_16.png') no-repeat 4px 4px;
    padding-left: 22px;
    padding-right: 2px;  
    padding-bottom: 3px;
    padding-top: 4px;
    min-height:25px;
}
.STXDashboardGlowContainer > i {
    display: none;
}
.STXDashboardTransmissionType {
    margin-left: 3px;
    font-size: 15px;
    color: #3333ff;
}
/*.nav > li > a.report-tab {
    padding: 2px;
}*/
a.report-tab > span > span > img {
    width:14px;
    height: 14px;
}
#window-reports > div.reports-body > div > ul > li.report-tab-link > a > span > span > img {
    width:14px;
    height: 14px;
}
.window-report-headings.nav > li > a {
    /*    padding: 2px 3px;
        float:left;*/
}

/* Give the image 3px of space to breathe. */
.chosenImage-container .chosen-results li,
.chosenImage-container .chosen-single span {
    background: none 3px center / 19px 19px no-repeat;
    padding-left: 28px;
}

/* Make the image fit nicely to the left of the dropdown. */
.chosenImage-container .chosen-single {
    padding-left: 2px;
}

.chosenImage-container .chosen-single span {
    /*background-position: left 2px;*/
}

/* Let the "No results match" text fill the whole width. */
.chosenImage-container .chosen-results .no-results {
    padding-left: inherit;
}
.chosenImage-choosed {
    background-size: 16px 16px;
    background-repeat: no-repeat;
    padding-left: 22px;
    font-size: 12px;
    min-height: 16px;
    display: block;
    padding-top: 1px;
}

.clear-locator-search {
    top: 0px;
    color: #c4c4cd;
    cursor: pointer;
    z-index: 0;
}
.table-report-info {
    margin-top: 5px;
}
#fluid-windows-drag-window-top {
    width: calc(100vw - 30px);
    height: 250px;
    position: fixed;
    top: 0;
    background-color: rgba(47, 156, 208, 0.2);
    border-bottom: solid 5px rgb(47, 156, 208);
    border-left: solid 5px rgb(47, 156, 208);
    border-right: solid 5px rgb(47, 156, 208);
    z-index: 9999;
    display:none;
}
#fluid-windows-drag-window-bottom {
    width: calc(100vw - 30px);
    height: 250px;
    position: fixed;
    top: calc(100vh - 215px);
    background-color: rgba(47, 156, 208, 0.2);
    border-top: solid 5px rgb(47, 156, 208);
    border-left: solid 5px rgb(47, 156, 208);
    border-right: solid 5px rgb(47, 156, 208);
    z-index: 9999;
    display:none;
}
#fluid-windows-drag-window-left {
    width: 250px;
    height: calc(100vw - 50px);
    position: fixed;
    left: 0;
    background-color: rgba(47, 156, 208, 0.2);
    border-bottom: solid 5px rgb(47, 156, 208);
    border-top: solid 5px rgb(47, 156, 208);
    border-right: solid 5px rgb(47, 156, 208);
    z-index: 9999;
    display:none;
}
#fluid-windows-drag-window-right {
    width: 250px;
    height: calc(100vw - 50px);
    position: fixed;
    right: 0;
    background-color: rgba(47, 156, 208, 0.2);
    border-bottom: solid 5px rgb(47, 156, 208);
    border-top: solid 5px rgb(47, 156, 208);
    border-left: solid 5px rgb(47, 156, 208);
    z-index: 9999;
    display:none;
}
.tooltip {
    z-index: 9999999 !important;
}

div.modal-body > table.largepicttable > tbody > tr > td > img {
    max-width: 100%;
}
aside#window-leftpanel.collapsed > div.user > i.mini-login-icon {
    display: block;
    margin-top:25px;
}
aside#window-leftpanel:not(.collapsed) > div.user > i.mini-login-icon {
    display: none;
}

.STXIndicatorFuelLowActive{
    background-position: -232px -174px; 
}
.STXIndicatorFuelLow{
    background-position: -232px -474px; 
}
.STXIndicatorDriverSeatbeltActive{
    background-position: -87px -0px; 
}
.STXIndicatorDriverSeatbelt{
    background-position: -87px -300px; 
}
.STXIndicatorAirConditionActive{
    background-position: -203px -174px; 
}
.STXIndicatorAirCondition{
    background-position: -203px -474px; 
}	
.STXIndicatorCruiseControlActive{
    background-position: -232px -58px; 
}
.STXIndicatorCruiseControl{
    background-position: -232px -358px; 
}	
.STXIndicatorBrakePedalActive{
    background-position: -87px -29px; 
}
.STXIndicatorBrakePedal{ 
    background-position: -87px -329px; 
}
.STXIndicatorClutchPedalActive{
    background-position: -87px -116px; 
}
.STXIndicatorClutchPedal{ 
    background-position: -87px -416px; 
}
.STXIndicatorHandbrakeActive{
    background-position: -145px -0px; 
}
.STXIndicatorHandbrake{
    background-position: -145px -300px; 
}
.STXIndicatorCentralLockActive{
    background-position: -87px -145px;
}
.STXIndicatorCentralLock{ 
    background-position: -87px -445px; 
}
.STXIndicatorReverseGearActive{
    background-position: -145px -87px; 
}
.STXIndicatorReverseGear{ 
    background-position: -145px -387px; 
}
.STXIndicatorRunningLightsActive{
    background-position: -58px -29px; 
} 
.STXIndicatorRunningLights{ 
    background-position: -58px -329px; 
} 
.STXIndicatorLowBeamsActive{
    background-position: -0px -0px;
}
.STXIndicatorLowBeams{ 
    background-position: -0px -300px; 
}
.STXIndicatorHighBeamsActive{
    background-position: -145px -232px; 
}
.STXIndicatorHighBeams{ 
    background-position: -145px -532px; 
}
.STXIndicatorRearFogLightsActive{
    background-position: -174px -116px; 
}
.STXIndicatorRearFogLights{ 
    background-position: -174px -416px; 
}
.STXIndicatorFrontFogLightsActive{
    background-position: -203px -145px; 
}
.STXIndicatorFrontFogLights{ 
    background-position: -203px -445px; 
}
.STXIndicatorDoorsActive{
    background-position: -87px -174px; 
}
.STXIndicatorDoors{ 
    background-position: -87px -474px; 
}
.STXIndicatorTrunkActive{
    background-position: -29px -174px; 
}
.STXIndicatorTrunk{ 
    background-position: -29px -474px; 
}


/*****************************
Footer
*****************************/

.footer {
    background-color: #f2f2f4;
    border-top: 1px solid #ececee;
    padding-bottom: 15px;
    padding-top: 15px;
    width: 100%;
    float: left;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}


.footer-back-button {
    float:right;
}



/***********************************************
================================================
 Custom Bootstrap / Overwriting
================================================
************************************************/

/*****************************
 Nav
*****************************/

ul.nav.navbar-nav > li > a {
    display:block;
    padding: 5px 12px 5px 12px;
    color: #fff;
    text-transform:uppercase;
    font-size:13px;
    text-decoration:none;
    font-weight:300;
    transition: all 0.4s;
    -moz-transition: all 0.4s; 
    -webkit-transition: all 0.4s; 
    -o-transition: all 0.4s;
}
ul.nav.navbar-nav > li > a:hover {
    background-color: skyblue;
    color: #fff;
}
ul.nav.navbar-nav > li > a:focus {
    color: #fff;
}
ul.nav.navbar-nav > li > a.active {
    background-color: skyblue;
}
ul.nav.navbar-nav > li > a > i {
    /*margin-right: 6px;*/
    margin-right: -2px;
}
/*.bootstrap-datetimepicker-widget {
    min-width: 500px;
}*/
.headerbar-menu {
    margin-left: 10px;
}
.bootstrap-datepicker-fast {
    min-width: 500px;
}
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
    font-weight: 300;
}
.bootstrap-datetimepicker-widget th.next,
.bootstrap-datetimepicker-widget th.prev,
.bootstrap-datetimepicker-widget th.picker-switch,
.bootstrap-datetimepicker-widget a,
th.dow  {
    color: #2f9cd0;
}
.bootstrap-datetimepicker-widget td.active,
.bootstrap-datetimepicker-widget td.active:hover {
    z-index: 9999;
    background-color: #2f9cd0;
}
.timepicker-fast {
    font-weight: 300;
}
.bootstrap-datetimepicker-widget.timepicker-sbs {
    width: 500px;
}
.fast {
    cursor: pointer;
    float: left;
    margin: 1px;
    padding: 2px 2px;
    color: #2f9cd0;
    background-color: #e8e8e8;
    text-align: center;
    min-width: 95px;
    font-size: 12px;
}
.fast:hover {
    opacity: 0.7;
}
.fast-group {
    width:100%;
    float: left;
}
label {
    font-weight: 300;
    /*width:100%;*/
}

/*****************************
 Grid
*****************************/

.row.no-gutter {
    margin-left: 0;
    margin-right: 0;}

.row.no-gutter [class*="col-"]:not(:first-child),
.row.no-gutter [class*="col-"]:not(:last-child) {
    padding-left: 0;
    padding-right: 0;
}

/*****************************
Lists
*****************************/
.list-group-item.active {
    background-color: #2f9cd0;
}
.list-group-item.active:hover {
    background-color: #2f9cd0;
}
a.list-group-item:hover {
    opacity: 0.8;
}

.panel-border-radius {
    border-radius: 4px !important;
}
.panel-body {
    /*overflow-x: auto;*/
    /*    overflow-y: hidden;*/
}

/****************************
Custom Leaflet
***************************/
.leaflet-container {
    font-family: 'Open Sans', serif;
}

.markerClusterInfo{
    /*    background-color: rgba(0,0,0,0.5);
        border-radius: 5px;
        width: 200px;
        padding: 2px;
        color: #000;
        z-index: 9;
        height:100px;
        overflow: hidden; 
        background: rgba(235, 235, 235, 0.81);
        background-clip: padding-box;
        border-color: rgba(0,0,0,0.25);
        border-radius: 4px;
        border-style: solid;
        border-width: 4px;
        color: #111;
        font: 10px/16px "Open Sans", Arial, Helvetica, sans-serif;
        font-weight: bold;*/
    height:100px;
    padding: 2px !important;
    font-size: 11px;
    /*    top: -8px;
        transition: all 0s;*/
    opacity: 1 !important;
    font-weight: 300 !important;
}

.markerClusterInfo > .leaflet-popup-content-wrapper  > .leaflet-popup-content {
    margin: 0px;
}
.markerClusterInfo > .leaflet-popup-content-wrapper {
    background-color: rgba(0,0,0,0);
    color: #000;
    box-shadow: none;

}
.markerClusterInfo > .leaflet-popup-content-wrapper > .leaflet-popup-content {
    width: 100%;
    height: 100%;
    float: left;
    overflow:auto;
}
.markerClusterInfo > .leaflet-popup-tip-container {
    display: none;
}
.markerClusterInfoRow {
    float: left;
    width: 100%;
    cursor: pointer;
}
.markerClusterInfoRow > span{
    display: block;
    text-align: left;
    font-weight: 300;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px;
    margin-left: 2px;
}

.markerClusterInfoRow  > img{
    width: 24px;
    height: 24px;
    float: left;
}
.markerClusterInfo .markerClusterInfoMore {
    height: 14px;
    padding: 4px;
    margin-left: 4px;
}
.leaflet-map-pane canvas.markerClusterInfoTriangle {
    /*display: none;*/
    left:22px;
    top: -4px;
    z-index: 9999;
}
.markerClusterInfoTriangleScroll {
    cursor: pointer;
}






/*****************************
 Form Elements
*****************************/
.btn {
    font-weight: 300;
    white-space: normal !important;
}

.btn-group > .btn, 
.input-group > .btn, 
.input-group-btn > .btn, 
.panel-group-element > .btn, 
span > .btn {
    white-space: nowrap !important;
}

/*** Custom Colors Btn ***/
.btn-purple{
    background-color:#8d82b5;
    border-color:#6b5f98;
    color:#fff;}

.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.open .dropdown-toggle.btn-purple{
    background-color:#6b5f98;
    color:#fff;}



.btn-green{
    background-color:#70ba63;
    border-color:#579e4b;
    color:#fff;}

.btn-green:hover,
.btn-green:focus,
.btn-green:active,
.btn-green.active,
.open .dropdown-toggle.btn-purple{
    background-color:#579e4b;
    color:#fff;}
/*.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}*/
.btn-blue{
    background-color:#2f9cd0;
    border-color:#1894CE;
    color:#fff;}

.btn-blue:hover,
.btn-blue:focus,
.btn-blue:active,
.btn-blue.active,
.open .dropdown-toggle.btn-blue{
    background-color:#1894CE;
    color:#fff;}

.btn.CurrentPage {
    background-color: lightgrey;
    cursor: auto;
}
.btn.CurrentPage:hover {
    border-color: lightgrey;
}
.btn-green-report-option {
    background-color:#70ba63 !important;
    border-color:#579e4b;
    color:#fff !important; 
    box-shadow: none !important;
    margin-bottom: 5px !important;
}
.btn-green-report-option:hover {
    background-color:#579e4b !important;
    border-color:#579e4b;
    color:#fff !important; 
    box-shadow: none !important;
}





/*** Btn Shapes ***/
.btn-circle,
.form-control-circle,
.btn-group .btn-circle:first-child:not(:last-child):not(.dropdown-toggle){
    border-radius:50px;}

.btn-flat,
.form-control-flat{
    border-radius:0px;}


.btn.disabled.active{
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !important;
}

/*****************************
Form Elements
*****************************/

.has-feedback div[class*=col-] .form-control-feedback{
    right:15px;
    line-height:34px;}





/*****************************
Panel Styling
*****************************/

.panel{
    /*margin-bottom:30px;*/
    font-weight: 300;
}

.panel-heading{
    font-weight:700;
}
.panel-heading small,
.panel-heading span,
.panel-heading.un-bold{
    font-weight:300;
}


/*** default ***/	
.panel-default > .panel-heading,
.panel-default > .panel-footer{
    border-color: #e8e8eb;
    box-shadow:none;}		

.panel-default > .panel-heading,
.btn-default{
    color:#9D9EA5;
    color: #555555;
}


/*** primary ***/
.panel-primary{
    border-color:lightgrey;
    border-radius: 0px;
    border: none;
    box-shadow: grey 0px 0px 1px 0px inset;
}
.panel-primary:not(.fluid-windows-docked){
    box-shadow: 0px 0px 5px grey;
}
.panel-primary > .panel-heading,
.panel-primary > .panel-footer{
    border-color: #2f9cd0;
    background-color:#2f9cd0;
    box-shadow:none;
    border-radius: 0px;
    border: none;
    box-shadow: skyblue 0px 0px 1px 1px inset;
    padding: 2px 10px;
}

.panel-heading > span {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 13px;
}
.panel-heading > div {
    float: right;
    font-size: 14px;
    margin-left: 5px;
    margin-top: 2px;
    cursor: pointer;
}

/*** success ***/
.panel-success{
    border-color:#70ba63;}

.panel-success > .panel-heading,
.panel-success > .panel-footer{
    border-color: #70ba63;
    background-color:#70ba63;
    color:#fff;
    box-shadow:none;}


/*** info ***/
.panel-info{
    border-color:#4cbceb;}

.panel-info > .panel-heading,
.panel-info > .panel-footer{
    border-color: #4cbceb;
    background-color:#4cbceb;
    color:#fff;
    box-shadow:none;}


/*** warning ***/
.panel-warning{
    border-color:#feb252;}

.panel-warning > .panel-heading,
.panel-warning > .panel-footer{
    border-color: #feb252;
    background-color:#feb252;
    color:#fff;
    box-shadow:none;}


/*** danger ***/
.panel-danger{
    border-color:#e35b5a;}

.panel-danger > .panel-heading,
.panel-danger > .panel-footer{
    border-color: #e35b5a;
    background-color:#e35b5a;
    color:#fff;
    box-shadow:none;}






/*** Clean Panel Heading ***/
.panel-heading.clean,
.panel-footer.clean{
    background:none;
    border:none;}


.panel.panel-dashboard > .panel-collapse >div.panel-body > div {
    /*    margin-left: -15px;
        margin-right: -15px;*/
}

.panel-body.alert {
    margin-bottom: 0px;
}
/*****************************
 Dropdown
*****************************/

.dropdown-menu{}


.dropdown-menu > li > a{
    color:#84868e;}

/*** Dropdown Menu Sizes ***/

.dropdown-menu.md{
    min-width:300px}


.dropdown-menu.lg{
    min-width:400px;}




.dropdown-menu.arrow:after,
.dropdown-menu.arrow:before{
    content:"";
    display:block;
    position:absolute;
    height:11px;
    width:11px;
    border-color:inherit;
    border-style:solid;
    border-width:11px;
    border-top-color:transparent;
    border-left-color:transparent;
    border-right-color:transparent;
    border-bottom-color:transparent;
    position:absolute;
    bottom:100%;
    left:6px;}


.dropdown-menu.arrow.arrow-top-right,
.dropdown-menu.arrow.arrow-top-left{
    top:calc(100% + 15px);}



/**Top Right Arrow**/
.dropdown-menu.arrow.arrow-top-right:after,
.dropdown-menu.arrow.arrow-top-right:before{
    border-bottom-color:inherit;
    right:6px;
    left:auto;}

.dropdown-menu.arrow.arrow-top-right:before{
    right:5px;
    left:auto;}

.dropdown-menu.arrow.arrow-top-right:after{
    border-bottom-color:#fff;}




/**Top Left Arrow**/
.dropdown-menu.arrow.arrow-top-left:after,
.dropdown-menu.arrow.arrow-top-left:before{
    border-bottom-color:inherit;
    left:6px;
    left:auto;}

.dropdown-menu.arrow.arrow-top-left:before{
    left:5px;}




.dropdown-menu.arrow:after{
    height:10px;
    width:10px;
    border-width:10px;}

.dropdown-menu.arrow.panel-default:after{
    border-bottom-color:#F5F5F5;}






/*****************************
Progress Bars
*****************************/

.progress.progress-xxs{
    height:4px;}

.progress.progress-xs{
    height:8px;}

.progress.progress-sm{
    height:12px;}

.progress.progress-lg{
    height:24px;}






/*****************************
Horizaontal Row
*****************************/

hr.sm{
    margin-top:15px;
    margin-bottom:15px;}

hr.xs{
    margin-top:10px;
    margin-bottom:10px;}


hr.dotted{
    border-style:dashed;}

hr.clean{
    border:0px;}


/*****************************
Tabs with panel
*****************************/

.panel.tab-pane.tabs-up{
    border-top:0px;
    border-top-left-radius:0px;
    border-top-right-radius:0px;}



/*****************************
Tables
*****************************/
.table {
    font-weight: 400;
    font-size: 10px;
}
.table.normal-size {
    font-size: 12px;
}
tr.active:hover{
    cursor: pointer;
}


/****************************************
=========================================
Responsive Stying
=========================================
*****************************************/

@media (max-width: 991px) {

    .spinner {
        top: 0px;
        width: 100%;
        height: 2px;        
    }

    /*
    aside.left-panel.collapsed{
    width:250px;
    left:0px;
    overflow:hidden !important;
    }
    */
    /*	aside.left-panel.collapsed + .content{
            margin-left:0px;
            transform:translate3d(250px, 0px, 0px);
            -ms-transform:translate3d(250px, 0px, 0px); 
            -webkit-transform:translate3d(250px, 0px, 0px); 
            -moz-transition: translate3d(250px, 0px, 0px);
            -o-transition: translate3d(250px, 0px, 0px)}
            
    
            
            aside.left-panel{
                    left:100%;}*/

    /*	section.content{
                    margin-left:0px;}
                    
            .content > .container-fluid{
                    padding-left:15px;
                    padding-right:15px;}
                    
            .page-header h1{
                    margin-top:0px;}*/

}





@media (max-width: 450px) {
    .dropdown-menu{
        min-width:280px !important;}

    .messages-dropdown{
        right:-80px !important;}

    .messages-dropdown.arrow.arrow-top-right:after{
        right:85px;}
    .messages-dropdown.arrow.arrow-top-right:before{
        right:84px;}	

    .notifications{
        right:-40px !important;}

    .notifications.arrow.arrow-top-right:after{
        right:45px;}
    .notifications.arrow.arrow-top-right:before{
        right:44px;}

}





/****************************************
=========================================
Just For Demo / Showcase
=========================================
*****************************************/

/*.showcase-btn li, .showcase-btn{
    margin-bottom:10px;}

.showcase-switch-button{
    margin-right:15px;}

.showcase-pagination{
    margin-top:10px;
    margin-bottom:10px;}





.showcase-icons div{
    line-height:40px;
    cursor:pointer;
    height:40px;}

.showcase-icons i{

    transition: font-size 0.2s ease 0s;
    text-align:center;
    width:40px;}

.showcase-icons > div:hover i{
    font-size:26px;}
*/

/*********************
 New
 ********************/
.window-fluid {
    position: fixed;
    margin: 0px;
}

/*****
Reports
*******/

.STXAPPTableRow {padding-bottom: 2px; border-bottom: 1px #8c8c8c dotted}
.STXAPPTableRowSpecial {padding-bottom: 2px; background-color: #ffcc99; border-bottom: 1px #8c8c8c dotted}

.STXMessageContainerError {margin-top: 50px}
.STXMessageContainerNote {margin-top: 20px; padding: 20px;}
.STXMessageContainerHeaderError {}
.STXMessageContainerContentError {}

.STXReportButton {margin: 2px}

.STXReportTitle {
    font-size: 250%; 
    font-weight: bold
}

.STXReportPieStyle {
    width: 49%; 
    float: left;
}

.STXReportCanvas {

}
.STXReportReportName {
    display: none;
}
.STXReportItemCanvas, .STXReportItemFooterCanvas {
    border: 1px solid #dcdcdc;
    padding: 5px;
    font-size: 11px;
    width: 100%;
    margin-bottom: 5px;
}

.STXReportRowItemSeparator {
    border: 1px solid #5d5d5d;
}

TR.STXReportItemHeaderLabel, TD.STXReportItemHeaderLabel {
    background-color: #d9edf7;
}
TR.STXReportItemBodyPartBody {
    border: 1px solid #e1e1e1;
}
TD.STXReportItemFooterLabel {
    background-color: #d9edf7;
    padding: 5px;
    border: solid 1px #C8C8C8; 
    font-weight: bold;
}
TABLE.STXReportItemFooterCanvas { 
    margin-bottom: 40px;
}

TD.STXReportItemHeaderLabel {
    border: solid 1px #dcdcdc;
    padding: 5px;
    font-size: 12px;        
    font-weight: bold;
}
TD.STXReportItemHeaderLabelDesc {
    border: solid 1px #dcdcdc;
    padding: 5px;
    font-size: 12px;    
}
TD.STXReportItemBodyPartBody {
    padding: 5px;
    font-size: 12px;    
}

.STXReportItemHeaderValue {}
.STXReportItemBodyPartCanvas {
    border-collapse: collapse; 
    width: 100%;
}

.STXReportRowItemNoBorder {
    padding: 5px;
}

.stxreportsubheader {

}

.STXReportItemBodyPartHeader {
    font-size: 12px;
    font-weight: bold;   
    background-color: #d9edf7;
    padding: 5px;
    border: solid 1px #C8C8C8;
    height: 50px;
}
/*.STXReportItemBodyPartBody td {border-bottom: solid 1px #C8C8C8; font-size: 100% } MARCIN */
.STXReportItemBodyPartBodyEven.Highlite:hover {background-color: #ccccff; }
.Highlite tr:hover {background-color: #ccccff; }
.Highlite tr:hover {background-color: #ccccff; }
.STXReportItemBodyPart{ border-bottom: solid 1px #C8C8C8; font-size: 100%}
.STXReportItemBodyPartBodyEven td {padding: 5px; border: solid 1px #C8C8C8; background-color: #ffffff; font-size: 11px;}
.STXReportItemBodyPartBodyEven {padding: 5px; border: solid 1px #C8C8C8; background-color: #fffffff; font-size: 11px;}
.STXReportItemBodyPartBodyEvenBold {padding: 5px; border: solid 1px #C8C8C8; background-color: #fffffff; font-size: 11px; font-weight: bold;}
.STXReportItemBodyPartBodyOdd td {padding: 5px; border: solid 1px #C8C8C8; background-color: #F7F8E0; font-size: 11px;}
.STXReportItemBodyPartBodyOdd {padding: 5px; border: solid 1px #C8C8C8; background-color: #F7F8E0; font-size: 11px;}
.STXReportItemBodyPartBodyOddBold {padding: 5px; border: solid 1px #C8C8C8; background-color: #F7F8E0; font-size: 11px; font-weight: bold;}
.STXReportItemBodyPartBody td {padding: 5px; border: solid 1px #C8C8C8; background-color: #fff; font-size: 11px;}
.STXReportItemBodyPartBody {padding: 5px; border: solid 1px #C8C8C8; background-color: #E8E8E8; font-size: 11px;}
/*.STXReportItemBodyPartBodyOdd td {padding: 2px;  border: solid 1px #C8C8C8; background-color: #E8E8E8; font-size: 100%}
.STXReportItemBodyPartBodyOdd {padding: 2px; border: solid 1px #C8C8C8; background-color: #E8E8E8; font-size: 100%}*/
.STXReportItemBodyPartBodyNormal td {font-size: 11px; padding: 5px;}
.STXReportItemBodyPartBodyNormal {font-size: 11px; padding: 5px;}
.STXReportItemBodyPartBodyOK {color: #00ff00}
.STXReportItemBodyPartBodyBad {color: #ff0000}
.STXReportItemBodyPartBodySpecial {
    padding: 5px; 
    background-color: #fcf8e3 !important; 
    border: solid 1px #C8C8C8; 
    font-size: 11px;
}
.STXReportItemBodyPartBodyBold {font-weight: bold}

.STXReportItemBodyPartBodySum {
    padding: 5px; 
    font-size: 11px; 
    background-color: #FCF8E3; 
    border: 1px solid #faebcc;
    margin-top: 5px;
}
.STXReportItemBodyPartBodySumBold {
    padding: 5px; 
    font-weight: bold; 
    font-size: 11px; 
    background-color: #FCF8E3; 
    border: 1px solid #faebcc;
    margin-top: 5px;
}

.STXReportSpecial  {color: #66cc00}
.STXReportSpecial1 {color: #990033}
.STXReportItemFooterCanvas {border-collapse: collapse; width: 100%; margin-bottom: 10px;   background-color: #E8E8E8;
                            border: solid 1px #C8C8C8; margin-top: 2px; }
.STXReportItemFooterSubLabel {font-weight: bold; }
.STXReportItemFooterSubValue {font-weight: bold; }
.STXReportItemFooterLabel {
    padding: 5px;
    font-weight: bold; 
    font-size: 11px;   
    margin-bottom: 5px;
    background-color: #d9edf7;
}
.STXReportItemFooterValue {
    background-color: #d9edf7;
    padding: 5px;
    font-weight: bold; 
    font-size: 11px;   
    margin-bottom: 5px;
}
.STXReportTripGraph {border: none}
.STXReportNoServiceNotification {
    padding: 10px; 
    border: 1px solid #5d5d5d; 
    margin: 5px; 
    background-color: #FFCFBF; 
    font-weight: bold;
    font-size: 11px;
}
.STXReportReportAnalysisInfo{font-size: 50%; display:none}




.STXNotificationBody {background-color: #FFFFFF; text-align: center}
.STXNotificationCanvas {border: 1px solid black; padding: 3px; width: 550px}
.STXNotificationNotificationName {font-size: 120%; font-weight: bold; text-align: center}
.STXNotificationAuthorPhoto {border: 2px solid black}
.STXNotificationAuthorName {font-size: 70%}
.STXNotificationActionDate {font-size: 70%}
.STXNotificationItemValue {font-size: 80%}
.STXNotificationItemLabel {font-size: 80%;font-weight: bold}

.STXMapContainer { /*height: 500px; box-shadow: 1px 1px 5px #111; border-radius: 5 5 5 5px; margin-left:3px;*/}
.STXMapContainerGeofence {
    border: 1px solid black;
    width: 550px;
    height: 400px;
}

.STXMapIconInfoWindow {width: auto; min-height: 100px; background-color: #ffffff; margin: 5px}
.STXMapIconInfoWindowTitle {font-variant: small-caps; font-weight: bold; font-size: 120%}
.STXMapIconInfoWindowLabel {vertical-align: top; font-weight: bold}
.STXMapIconInfoWindowText {}

.STXTable {}
.STXTable td {padding-bottom: 5px;}
.STXTableHeader {background-color:#7399bd;font-weight:bold;height: 14pt; border-bottom: 5px solid #d1d1d1}
.STXTableSubheader {font-weight: bold;margin-bottom: 2px;border-bottom: 1px solid black}
.STXTableHeaderModuleName {font-weight: bold; color:#dc143c; font-size:19; text-transform: uppercase;border-bottom: 5px solid #d1d1d1}

.STXInTableLabel {}
.STXInTableValue {font-weight: bold}

.STXPhoneNumber {color: #6666ff}

.STXScreenActionContainer {margin: 0;  height: 500px; background-color: white; width: 500px;
                           z-index: 999; /*position:fixed*/}
.STXScreenActionTitle {height: 18px; background-color: #2f9cd0; font-variant: small-caps; font-weight: bold; color: #FFF; font-size: 12px; padding: 6px; cursor: move}
.STXScreenActionParam {margin: 0px 5px 2px 5px; } 
.STXScreenActionParamLabel {font-size: 85%; font-weight: bolder} 
.STXScreenActionParamSubLabel {font-size: 80%} 
.STXScreenActionFormText {font-size: 80%; background-color: #efefef; width: 95%}
.STXScreenActionFormTextNoWidth {font-size: 80%; background-color: #efefef}
.STXScreenActionFormSelect {font-size: 80%; background-color: #efefef; width: 95%}
.STXScreenActionFormSelectCheckbox {font-size: 80%; background-color: #efefef; width: 95%; border: 1px solid black; height: 125px; scroll: vertical}
.STXScreenActionFormSelectCheckboxShort {font-size: 80%; background-color: #efefef; width: 95%; border: 1px solid black; height: 60px; scroll: vertical}
.STXScreenActionFormSelectCheckboxSuperShort {font-size: 80%; background-color: #efefef; width: 95%; border: 1px solid black; height: 23px; scroll: vertical}
.STXScreenActionFormTextArea {font-size: 95%; background-color: #efefef; width: 95%}
.STXScreenActionFormButton {font-size: 95%; background-color: #efefef; width: 95%}
.STXScreenActionFormDatizer {font-size: 80%; background-color: #efefef; width: 70px}
.STXScreenActionFormDatimizer {font-size: 80%; background-color: #efefef; width: 140px}
.STXScreenActionFormTimizer {font-size: 80%; background-color: #efefef; width: 70px}

.STXActionContainer {margin: 0 5 0 5; border: 1px solid black; height: 500px; background-color: white}
.STXActionTitle {height: 20px; background-color: #b3b3b3; font-variant: small-caps; text-align: center; font-weight: bold; }
.STXActionParam {margin: 2 5 2 5; } 
.STXActionParamLabel {font-size: 85%; font-weight: bolder} 
.STXActionParamSubLabel {font-size: 80%}
/*.STXActionFormText {font-size: 80%; background-color: #FDFDFF; width: 95%}*/
/*.STXActionFormText {width: 85%; margin: 5px; margin-top: 5px; height: 30px; border: 1px solid #999999; border-radius: 3px; padding: 5px; font-size: 15px; line-height: 16px}*/ 
/*.STXActionFormTextNoWidth {font-size: 80%; background-color: #FDFDFF}*/
.STXActionFormTextNoWidth {margin: 5px; margin-top: 5px; height: 30px; border: 1px solid #999999; border-radius: 3px; padding: 5px; font-size: 15px; line-height: 16px}
.STXActionFormPasswordNoWidth {margin: 4px 2px 2px; padding: 5px; border-radius: 3px; border: 1px solid rgb(153, 153, 153); border-image: none; height: 28px; line-height: 20px; font-size: 14px;}
/*.STXActionFormSelect {font-size: 80%; background-color: #FDFDFF; width: 95%}*/
.STXActionFormSelectNoWidth {margin: 5px; margin-top: 5px; height: 33px; border: 1px solid #999999; border-radius: 3px; padding: 5px; font-size: 15px; line-height: 16px}
/*.STXActionFormSelect {width: 85%; margin: 5px; margin-top: 5px; height: 33px; border: 1px solid #999999; border-radius: 3px; padding: 5px; font-size: 15px; line-height: 16px}*/
/*.STXActionFormSelectCheckbox {font-size: 80%; background-color: #FDFDFF; width: 95%; border: 1px solid black; height: 125px; scroll: vertical}*/
.STXActionFormSelectCheckboxShort {font-size: 80%; background-color: #FDFDFF; width: 95%; border: 1px solid black; height: 60px; scroll: vertical}
.STXActionFormSelectCheckboxSuperShort {font-size: 80%; background-color: #FDFDFF; width: 95%; border: 1px solid black; height: 23px; scroll: vertical}
.STXActionFormTextArea {margin: 5px; margin-top: 5px; width: 94%; border: 1px solid #999999; border-radius: 3px; padding: 5px; font-size: 15px; line-height: 16px}
.STXActionFormButton {font-size: 95%; background-color: #FDFDFF; width: 95%}
.STXActionFormDatizer {font-size: 80%; background-color: #FDFDFF; width: 70px}
.STXActionFormDatimizer {font-size: 80%; background-color: #FDFDFF; width: 140px}
.STXActionFormTimizer {font-size: 80%; background-color: #FDFDFF; width: 70px}
/*.STXActionFormMandatory {border: 2px solid #999999}*/
.STXActionFormDisabled {background-color: #DBDBEA}

.STXActionButtonDefault {margin: 5px; margin-top: 10px; width: 240px; height: 28px; background-color: #c1dc75; color: #ffffff; font-weight: bold; border: 1px solid #000000; border-radius: 2px}
.STXActionButtonBack {background-color: #2F9CD0}
.STXActionButtonExtraAction {background-color: #FF4000}
.STXActionButtonExtended {width: 300px}

.STXActionFormTextExtCode {font-size: 80%; background-color: blue; color: white; width: 95%; border: solid 1px black}

.STXEditAreaPreview {min-height: 500px; height: 500px; background-color: #FFFFFF; overflow: scroll; vertical-align: top};

.STXActionHint {margin-left: -5px !important}

.STXActionFormLabel {font-size: 105%; padding: 2px; padding-right: 10px}
.STXActionFormValue {font-size: 120%; padding: 2px;}
.STXActionFormAttention {font-size: 120%; height: 30px; margin: 12px; padding: 10px; font-weight: bold; border: 1px solid #000000; border-radius: 8px; background-color: #DFFFBF}

.STXActionComparisonLabel {font-size: 90%; padding: 2px; padding-right: 10px; text-transform: uppercase; font-size: 12px; border-bottom: solid 1px #eee}
.STXActionComparisonLabelGroup {font-size: 18px; padding: 12px; text-transform: uppercase; border-bottom: solid 1px #eee}
.STXActionComparisonValue {border-bottom: solid 1px #eee; text-align: center}
.STXActionComparisonPrice {border-bottom: solid 1px #eee; text-align: center; color: #FF4000}
.STXActionComparisonFeatures {border-bottom: solid 1px #eee; text-align: center; color: #000040; font-size: 60%; padding-left: 5px; padding-right: 5px}
.STXActionComparisonHeader {font-size: 22px; padding: 12px; text-transform: uppercase; text-align: center; }
.STXActionComparisonPositionPrice {color: #000066; font-size: 80%}
.STXActionComparisonMinimumPeriod {text-align: center}

.STXActivationCTBox { }
.STXActivationCTBoxPP {font-size: 100%; width: 95%; margin: 12px; margin-left: 0px; font-weight: bold; border: 1px solid #000000; border-radius: 10px 10px 0px 0px; }
.STXActivationCTBoxSelected { 
    box-shadow: 0px 0px 5px #ff4400;
    border: solid 1px;
    border-color: red !important;
}
.STXActivationCTBoxHeader {font-variant: small-caps; background-color: #00BFFF; color: #000000; font-size: 120%; font-weight: bold; padding: 10px; border-radius: 10px 10px 0px 0px; }
.STXActivationCTBoxBody {
    padding: 10px 0px;
    float: left;
    width: 100%;
}
.STXActivationCTBoxBody.contract-desc {
    height:130px;
    overflow: auto;
}
.STXActivationCTBoxInfo {
    /*font-size: 120%; min-height: 250px*/
}
.STXActivationPriceLabel {font-size: 120%}
.STXActivationMinPeriodLabel {font-size: 120%}
.STXActivationMinPeriodValue {font-size: 200%; color: #468C00; margin: 10px;}
.STXActivationPeriod {font-size: 200%; color: #36D900; margin: 10px;}
.STXActivationPriceNetValue {font-size: 200%; color: #ff0000; margin: 10px;}
.STXActivationPriceNetExtraValue {font-size: 200%; color: #468C00; margin: 10px;}
.STXActivationPriceGrossValue {font-size: 100%}
.STXActivationCTBoxBodyLabel {font-size: 120%; margin-left: 10px; margin-top: 5px; margin-bottom: 5px}
.STXActivationCTBoxBodyDefaultServices {height: 190px; overflow: auto; 
                                        /*margin-right: 10px*/
}
.STXActivationCTBoxFooter {text-align:center; }
.STXActivationButton {background-color: #FFB973; }

.STXCRMCustomerRowNormal {font-size: 60%; border-top: 1px black dotted; padding-right: 2px}
.STXCRMCustomerRowProject {font-size: 60%; border-top: 1px black dotted; background-color: #ffffcc; padding-right: 2px}
.STXCRMCustomerHeader {font-size: 80%; font-weight: bolder; border-bottom: 2px black solid; padding-right: 5px}
.STXCRMCustomerTypeHeader {font-size: 120%; font-weight: bolder; border-bottom: 2px black solid; border-top: 2px black solid; padding-right: 2px}
.STXCRMCustomerRowCustomerName {font-weight: bold}

.STXCRMInteractionType {color: #cc6600; font-variant: small-caps; font-weight: bold}
.STXCRMOurParty {}
.STXCRMPanelLabel {font-weight: bold}
.STXCRMMeetingTime {color: #336600}
.STXCRMInteractionContacts {}
.STXCRMMilestoneName {color: #6600ff}
/*.STXCRMInteractionDate {color: #000000; font-size: 9px}*/
.STXCRMInteractionInputDate {color: #669900;}
.STXCRMTaskStatus {color: #6699ff}
.STXCRMChartContainer {}

.STXCRMContactRowNormal {font-size: 60%; border-top: 1px black dotted; padding-top: 2px; padding-right: 2px; text-align: left}
.STXCRMInteractionRowConfirmed 	{font-size: 70%; border-top: 1px black dotted; padding-top: 2px; color: #000000; padding-right: 2px}
.STXCRMInteractionRowNotConfirmed 	{font-size: 70%; border-top: 1px black dotted; padding-top: 2px; color: #ff0000; padding-right: 2px}


#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: rgb(255,255,255);
    z-index: 99999;
    background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(201,201,201,1) 44%,rgba(117,117,117,1) 100%);
    /*background: url("/modules/101/graphics/blured_background.png") left top / 1440px 799px no-repeat rgb(255, 255, 255);*/
    transition: all 0.4s;
    /*background: url('/modules/101/graphics/interface/infomenu_loaderspinner.gif');
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(201,201,201,1) 44%, rgba(117,117,117,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(44%,rgba(201,201,201,1)), color-stop(100%,rgba(117,117,117,1)));
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(201,201,201,1) 44%,rgba(117,117,117,1) 100%);
    background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(201,201,201,1) 44%,rgba(117,117,117,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(201,201,201,1) 44%,rgba(117,117,117,1) 100%);
    background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(201,201,201,1) 44%,rgba(117,117,117,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#757575',GradientType=1 );
    z-index: 999999999 !important; /* makes sure it stays on top */
}
#status {
    width: 256px;
    height: 256px;
    position: absolute;
    left: 50%;
    top: 50%;
    background-image: url('https://res.stikol.com/spinners/ikol_animation_t_256.gif');
    background-repeat: no-repeat;
    background-position: center;
    margin: -128px 0 0 -122px;
    background-size: 256px 256px;
}
#preloader_mobile {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: rgb(255,255,255);
    /*background: url('/modules/101/graphics/interface/infomenu_loaderspinner.gif');
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(201,201,201,1) 44%, rgba(117,117,117,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(44%,rgba(201,201,201,1)), color-stop(100%,rgba(117,117,117,1)));
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(201,201,201,1) 44%,rgba(117,117,117,1) 100%);
    background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(201,201,201,1) 44%,rgba(117,117,117,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(201,201,201,1) 44%,rgba(117,117,117,1) 100%);
    background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(201,201,201,1) 44%,rgba(117,117,117,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#757575',GradientType=1 );
    z-index: 999999999 !important; /* makes sure it stays on top */
}
#status_mobile {
    width:64px;
    height:64px;
    position:absolute;
    left:50%; 
    top:50%; 
    background-image: url('https://res.stikol.com/spinners/ikol_animation_t_256.gif');
    background-repeat:no-repeat;
    background-position:center;
    margin:-64px 0 0 -55px; 
}

.postscript {
    padding-top: 7px;
    padding-left: 0px;
}
.form-group {
    float:left;
    width: 100%;
}
input[type="radio"].form-group, input[type="checkbox"].form-group {
    vertical-align: middle;
}
.input-group-btn.left-side .btn{
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.input-group-btn.right-side .btn{
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
.popover {
    z-index: 99999;
}
i.fa.panel-heading-indicator {
    float: right;
    color: #fff;
}
@media screen and (max-width: 480px) {
    i.fa.panel-heading-indicator {
        display: none;
    }
    span.input-group-btn.right-side,
    span.input-group-btn.left-side{
        float: left;
        width: 100%;

    }
    span.input-group-btn.right-side > span > input[type="button"],
    span.input-group-btn.left-side > span > input[type="button"] {
        border-radius:4px;    
    }
    .fabtn-rounded {
        width: 26px;
        height: 26px;
        font-size:18px;
        padding-top:3px;
        border-radius:13px;
        padding-left: 6px;
    }
}
div.panel-heading.panel-heading-collapsable {
    cursor:pointer;
}
.panel-dashboard div.panel-heading.panel-heading-collapsable:hover {
    background: #2D94D2;
}
.btn-full-width {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
}
.btn-group.btn-full-width.btn-2 > .btn {
    width: 50%;
}
div.middle{
    padding-top:6px;
}
.center{
    text-align: center;
}
.panel-sortable {
    cursor: move;
}
.panel-sortable:active {
    background:#E0E0E0;
}
.no-padding {
    padding:0px !important;
}
.btn-center {
    border-radius: 0px;
    border-left: none;
}
.btn-left {
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}
.btn-right {
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    border-left:none;
}
.padding-sm {
    padding: 5px;
}
.panel-dashboard{
    border-color:#2f9cd0;}

.panel-dashboard > .panel-heading,
.panel-dashboard > .panel-footer{
    border-color: #2f9cd0;
    background-color:#2f9cd0;
    color:#fff;
    box-shadow:none;
    font-weight: 300;
}
.switch-button.info input:checked + label {
    background-color: #2f9cd0;
    border-color: #2f9cd0;
}
.btn-group-inline .btn {
    border-top: none;
    border-bottom: none;
}
.btn-no-right-border {
    border-right: none;
}
.btn-no-left-border {
    border-left: none;
}
.btn-default i, .btn-success i, .btn-warning i, .btn-danger i, .btn-unimportant i {
    padding-top: 3px;
    padding-bottom: 3px;
}
.panel-group {
    /*margin-bottom: 0px;*/
}
.input-xs {
    height: 22px;
    padding: 2px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    min-height: 0px;
}
.full-width {
    width: 100%;
}
span.report-tab {
    display: block;
}
.messages-list {
    font-size: 11px;
}
.table.messages-list {
    width: 100%;
}
.table.messages-list > tbody > tr > td {
    /*padding: 8px;*/
    cursor: pointer;
    padding: 6px 2px;
}
.table.messages-list > tbody > tr:first-child > td {
    border-top: none;
}
.messages-list-hr {
    margin-top: 10px;
}
.ikol-message-usericon {
    background-color: #2f9cd0;
    background-image: url('https://res.stikol.com/logos/ikol_whitelogoshort_t_55.png');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center center;
}
.message-usericon {
    width: 34px;
    height: 34px;
    float: left;
}
.messages-list-column {
    padding-right: 0px;
}
.message-list-panel {
    padding-top: 0px;
}
.messages-number {
    font-size: 12px;
}
.message-rateing-indicator {
    margin-top: 3px;
}
.normal.message-rateing-indicator {
    color: #70ba63;
}
.important.message-rateing-indicator {
    color: #d9534f;
}
.message-attachments-link {
    font-size: 24px;
}
.message-sender {
    float: left;
    margin-left: 10px;
}
.message-datetime {
    float: right;
}
.messages {
    height: 100%;
}
.messages-body {
    height: 70%;
    overflow:auto;
}
.message-datetime-td {
    min-width: 40px;
}
.message-download-file {
    margin-left: 15px;
    cursor: pointer;
}
.message-unreaded {
    font-weight: bold;
}
.message-readed {
    background-color: #f9f9f9;
}
.message-opened {
    background-color: #2f9cd0;
    color: #fff;
}
tr.message-opened:hover, .table-hover > tbody > tr.message-opened:hover > td {
    background-color: #59B0D9;
}
.direct-download-link {
    margin-left: 15px;
}
.btn-bottom-container {
    float:left;
    width:100%;
    padding: 2px;
}
#window-map {
    z-index: 0;
}
#window-details {
    position: absolute;
    bottom: 0;
    width: 100%;
    /*margin-left: -5px;*/
    /*overflow: hidden !important;*/
    /*overflow-y: auto;*/
    overflow: visible !important;
}

.report-tab-normal-heading {
    /*font-size: 10px;*/ 
}
.leaflet-popup.leaflet-zoom-animated {
    z-index: 9999;
}
.mobile-details {
    display: none;
    float:left;
    text-align: center;
    padding: 10px;
    font-size: 26px;
    /* color: grey; */
    float: right;
    margin: 0px 3px;
    width: 28px;
}
.locator-desc {
    float: left;
    max-width: 170px;
    color: #000000;
    /*font-weight: bold;*/
    /*font-size: 13px;*/
    padding-top: 2px;
    padding-bottom: 2px;
    /*text-shadow:1px 1px 1px rgba(79,79,79,0.2);*/
}
.locator-desc-additional {
    float: right;
    max-width: 25px;
    color: #000000;
    /*font-weight: bold;*/
    /*font-size: 13px;*/
    padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    /*text-shadow:1px 1px 1px rgba(79,79,79,0.2);*/
}

.locator-info-fullname {

}
.hide-details {
    float:right;
    font-size: 20px;
}
.config-locator-linecolor {
    width: 12px;
    height: 12px;
    border-radius: 16px;
    float: left;
    margin: 2px 4px 0px 0px;
}
.config-locator-desc {
    /*    max-height:70vh;
        overflow:auto;*/
    font-weight:300;
    /*float:left;*/
}
.config-locator-row {
    margin: 0px 0px 5px 0px;
}
.config-locator-usericon {
    width: 32px;
    height: 32px;
    border-radius: 16px;
}
.config-locator-change {
    font-size:11px;
}
.config-locator-spinner {
    width: 100%;
    height: 500px;    
    background: url('https://res.stikol.com/spinners/squares_blue_t_160.gif') no-repeat center center;
}
.config-locator-label {
    text-transform: uppercase;
}
.checkable {
    cursor: pointer;
}
.panel-body-img {
    height: 32px;
}
.panel-body-img:hover {
    height: 80px;
    position: absolute;
    z-index: 9;
    box-shadow: 1px 1px 5px grey;
}
.table-td-narrow {
    width:80px;
}
.navbar-user-info {
    float: right;
    margin-top: 3px;
}
.navbar-user-info-pic {
    width: 18px;
    margin: -2px 4px 0px 0px;
}
.navbar-user-info-logo  {
    height: 22px;
    margin-left: 10px;
    /*    float: right;*/
}
.navbar-user-info > .user-name {
    color: #fff;
    margin-top: 5px;
    display: block;
    float: left;
    font-size: 13px;
    font-weight: 300;
    text-transform: uppercase;
}

.reports-body {
    /*    position:relative;
        margin:0 auto;
        overflow:hidden;*/
    /*padding:5px;*/
    /*height:50px;*/
}

.window-report-headings {
    /*    position:absolute;
        left:0px;
        top:0px;
        min-width:500px;
        margin-left:12px;
        margin-top:0px;*/
    /*min-width: 500px;*/
    /*height:34px;*/
    /*margin: 2px 4px;*/
    /*width: calc(100% - 8px);*/
    /*padding: 0px 10px;*/
    /*    width: 100%;
        height:20px;*/
    font-size:12px;
}
.window-report-option {
    /*background-position: left 8px !important;*/
    font-size: 12px;
}
/*
.window-report-headings li{
    display:table-cell;
    position:relative;
    text-align:center;
    cursor:grab;
    cursor:-webkit-grab;
    color:#efefef;
    vertical-align:middle;
}*/

.scroller {
    text-align:center;
    cursor:pointer;
    display:none;
    padding:7px;
    padding-top:11px;
    white-space:no-wrap;
    vertical-align:middle;
    background-color:#fff;
    position: absolute;
    z-index: 9;
    /*width: 30px;*/
}

.scroller-right{
    right: 0px;
    text-align: right;
    background: linear-gradient(to left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 64%,rgba(255,255,255,0) 100%);
}

.scroller-left {
    text-align: left;
    background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 64%,rgba(255,255,255,0) 100%);
    /*margin-left:100px;*/
    width: 100px;
}
ul.nav.nav-tabs > li > a {
    font-size: 13px;
    padding: 5px 6px;
    margin-top: 5px;
}
.window-report-content {                      
    float: left;
    width: 100%;
    padding: 15px;
    padding: 2px 2px 2px 2px;
}
.window-report-ul-container {
    /*    overflow-x: hidden;
        overflow-y: hidden;*/
    /*width: 500px;*/
    height: 35px;
}
a#report-menu-heading.report-menu-heading {
    /*height: 29px;*/
}
.window-report-fast-menu {
    padding: 2px;
}
.window-report-fast-menu:hover {
    background-color: #eee;
    border-radius: 4px;
}
.navbar-menu {
    float: left;
    background: transparent;
}
.bootstrap-datetimepicker-widget-mobile {
    max-width: 90% !important;
    height: 90% !important;
    position: absolute;
    top: 5% !important;
    left: 5% !important;
}
.bootstrap-datetimepicker-widget.top.bootstrap-datetimepicker-widget-mobile:before{
    display:none !important;
}
.background-red {
    background-color: #ff0000 !important;
}
.background-blue {
    background-color: #2f9cd0 !important;
}
.locator-select-group {
    /*max-width: 295px;*/
}
.locator-report-type {
    /*max-width: 345px;*/
}
.STXEEPPListItemNumber {
    display: inline;
    float: left;
}
.eepp-btn-group > span{
    margin: 1px;
}
.STXEEPPListItemContainer.row {
    margin-bottom: 15px;
    margin-top: 5px;
}
.STXEEPPListItemDateSubBlock2, .STXEEPPListItemPurposeSubBlock2 {
    margin-bottom: 2px;
}
.collapse-label {
    font-size:12px;
    text-transform: uppercase; 
    font-weight:400;
    text-align: left;
    margin-bottom: 2px;
}
.show-modal-alert {
    width: 100%;
}
.show-modal-alert-body, .show-modal-alert-header {
    display:none;
}
.show-modal-screen-width {
    width: 90%;
}
.STXServicesDescription {
    font-size: 24px;
    font-weight: 300;
}
.radiobutton-label {
    margin-bottom: 0px;
    padding: 6px 12px 7px 12px;
}
input[type='radio']:checked + span {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
input[type='radio']:disabled + span {
    color: #bbb;
}
.radiobutton-btn {
    padding: 6px 0px;
}
span.check-required {
    display: block;
    color: #F16364;
    font-size: 9px;
    float: left;
    width: 100%;
    text-align: right;
}
span.message-info-box {
    display: block;
    color: #5d5d5d;
    font-size: 11px;
    float: left;
    width: 100%;
    text-align: right; 
    position: absolute;
}
.message-info {
    padding: 2px 2px 2px 2px;
    background-color: #fcdda6;
}
.alert {
    display: block
}
.control-label-info {
    display: inline-block;
    padding-top: 3px;
}
.clean-control {
    background: rgba(255,255,255,0.9);
    border-radius: 4px;
    /*box-shadow: 0 1px 5px rgba(0,0,0,0.65);*/
    width: 26px;
    /*padding: 5px 6px;*/
    font-size: 16px;
    cursor: pointer;
}
.clean-control:hover {
    background-color: rgba(255,255,255,0.8);
}
.universal-nav {
    font-size:13px;
    font-weight: 300;
}
.modal-alert-body {
    max-height: 75vh;
    overflow: auto;
    /*height: 75vh;*/
    /*height:200px*/
}
td.day.old, td.day.new {
    color: lightgrey;
}
.report-addons {
    display: none;
}
.dashboard-filebrowse {
    border: none;
    box-shadow: none;
}
.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
.form-with-checkbox {
    width: 90%;
    float: right;
}
.chackable {
    cursor:pointer;
}
@media screen and (min-width: 1200px) {
    .modal-wide {
        min-width: 1024px;
    }
}
li.report-tab {
    padding-bottom: 4px;
}
.chosen-container {
    /*width: 100% !important;*/
    width: 100%;
}
.chosen-li-full-width > ul > li.search-choice {
    width: calc(100% - 10px);
}

.logging-info {
    font-size: 20px;
    font-weight: 300;
}
.logging-error-link {
    text-decoration: underline;
    font-size:11px;
}
.logging-error-link:hover {
    cursor: pointer;
}
.logging-box {
    background: #f7f7f7;
    border-radius: 10px;
    padding: 10px 10px 0px 10px;
    float:left;
}
.logging-box div .cr-styled {
    color:#f7f7f7;
}
#loggingForm {
    margin-bottom: 0px;
}
.logging-social-box {
    font-size: 24px;
    margin: 10px 0px 10px 0px;
    float: left;
    width:100%;
}
.logging-social-box i{
    margin: 0px 5px 0px 5px;
}
.logging-social-box i:hover{
    opacity: 0.8;
}
.logging-social-box .fa-facebook{
    color: #3b5998;
}
.logging-social-box .fa-youtube{
    color: #e52d27;
}
.logging-social-box .fa-twitter{
    color: #55acee;
}
.logging-info-block{
    text-shadow: white 0px 0px 20px;
}
.show-hint-help {
    color: #fff;
    font-size: 18px; /*22px;*/
    margin: 0px 5px;
    cursor: pointer;
}
.affix {
    top: 20px;
}
.affix-top {
    position: static;
    top: -35px;
}
.footer-back-link {
    margin-bottom: 20px;
    width: 100%;
    text-align: right;
    float:left;
}
.footer-back-link {
    /*font-size: 18px;*/
    color: #579e4b;
}
.footer-back-link a {
    background-color: #70ba63;
    border-color: #579e4b;
    color: #fff;
    font-weight: 300;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-appearance: button;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.footer-back-link a:hover {
    background-color: #579e4b;
    color: #fff;
    text-decoration: none;
}

.cr-styled input+ i.btn-warning {
    border-color: #eea236;
    color: #fff;
    background-color: transparent;
}
.cr-styled input:checked+ i.btn-warning {
    border-color: #eea236;
    color: #f0ad4e;
    background-color: transparent;
}

.cr-styled input+ i.btn-danger {
    border-color: #d43f3a;
    color: #fff;
    background-color: transparent;
}
.cr-styled input:checked+ i.btn-danger {
    border-color: #d43f3a;
    color: #d43f3a;
    background-color: transparent;
}
.cr-styled input + i.btn-info {
    border-color: #46b8da;
    color: #fff;
    background-color: transparent;
}
.cr-styled input:checked + i.btn-info {
    border-color: #46b8da;
    color: #5bc0de;
    background-color: transparent;
}

.cr-styled input + i.btn-success {
    border-color: #5cb85c;
    color: #fff;
    background-color: transparent;
}
.cr-styled input:checked + i.btn-success {
    border-color: #5cb85c;
    color: #5cb85c;
    background-color: transparent;
}
.cr-styled input[disabled]+ i {
    background: #e1e1e1;
    color: #e1e1e1;
    opacity: 0.3;
    cursor: not-allowed;
}
.bootstrap-switch-style-success, .bootstrap-switch-style-success.bootsrap-switch-focused {
    border-color: #5cb85c;
}
.bootstrap-switch-style-success div.bootstrap-switch-container span.bootstrap-switch-handle-on {
    background-color: #5cb85c;
}
.panel-dashboard-header {
    /*height: 40px;*/
    font-size: 16px;
    border-radius: 2px;
}
.panel-dashboard-header div.panel-group-element {
    /*    border-left: solid 1px #ddd;    
        padding: 9px;
        overflow: hidden;*/
    padding: 6px;
    min-height: 45px;
}
.panel-dashboard-header > div.panel-group-element > div.middle {
    overflow: hidden;
    text-overflow: ellipsis;
}
.panel-dashboard-header div.panel-group-element div.chosen-drop, .panel-dashboard-header div.panel-group-element div.chosen-search {
    overflow: visible;
}
/*.panel-dashboard-header.bg-info div.panel-group-element {
    border-left: solid 1px #bce8f1;    
}
.panel-dashboard-header.bg-danger div.panel-group-element {
    border-left: solid 1px #ebccd1;    
}
.panel-dashboard-header.bg-warning div.panel-group-element {
    border-left: solid 1px #faebcc;    
}
.panel-dashboard-header.bg-success div.panel-group-element {
    border-left: solid 1px #d6e9c6;    
}
.panel-dashboard-header div.first-of-type {
    border-left: none;
}
.panel-dashboard-header div.last-of-type {
    
}*/
.span.year {
    font-size: 12px;
    padding: 2px;
    display: block !important;
    float: left;
    width: 40px !important;
}
span.month {
    font-size: 12px;
}
.no-box-shadow {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}
.no-border {
    border: none;
}
.width-1, 
.width-2, 
.width-3, 
.width-4, 
.width-5, 
.width-6, 
.width-7, 
.width-8, 
.width-9, 
.width-10, 
.width-11, 
.width-12, 
.width-13, 
.width-14, 
.width-15, 
.width-16, 
.width-17, 
.width-18 , 
.width-19, 
.width-20, 
.width-21, 
.width-22, 
.width-23, 
.width-24, 
.width-25, 
.width-26 , 
.width-27, 
.width-28, 
.width-29, 
.width-30, 
.width-31, 
.width-32, 
.width-33, 
.width-34, 
.width-35, 
.width-36, 
.width-37, 
.width-38, 
.width-39, 
.width-40, 
.width-41, 
.width-42, 
.width-43, 
.width-44, 
.width-45, 
.width-46, 
.width-47, 
.width-48, 
.width-49, 
.width-50, 
.width-51, 
.width-52, 
.width-53, 
.width-54, 
.width-55, 
.width-56, 
.width-57, 
.width-58, 
.width-59, 
.width-60, 
.width-61, 
.width-62, 
.width-63, 
.width-64, 
.width-65, 
.width-66, 
.width-67, 
.width-68, 
.width-69, 
.width-70, 
.width-71, 
.width-72, 
.width-73, 
.width-74, 
.width-75, 
.width-76, 
.width-77, 
.width-78, 
.width-79, 
.width-80, 
.width-81, 
.width-82, 
.width-83, 
.width-84, 
.width-85, 
.width-86, 
.width-87, 
.width-88, 
.width-89, 
.width-90, 
.width-91, 
.width-92, 
.width-93, 
.width-94 , 
.width-95, 
.width-96, 
.width-97, 
.width-98, 
.width-99, 
.width-100 {
    width: 100%;
}
@media (min-width: 768px) {
    .width-1 {
        width: 1%;
    }
    .width-2 {
        width: 2%;
    }
    .width-3 {
        width: 3%;
    }
    .width-4 {
        width: 4%;
    }
    .width-5 {
        width: 5%;
    }
    .width-6 {
        width: 6%;
    }
    .width-7 {
        width: 7%;
    }
    .width-8 {
        width: 8%;
    }
    .width-9 {
        width: 9%;
    }
    .width-10 {
        width: 10%;
    }
    .width-11 {
        width: 11%;
    }
    .width-12 {
        width: 12%;
    }
    .width-13 {
        width: 13%;
    }
    .width-14 {
        width: 14%;
    }
    .width-15 {
        width: 15%;
    }
    .width-16 {
        width: 16%;
    }
    .width-17 {
        width: 17%;
    }
    .width-18 {
        width: 18%;
    }
    .width-19 {
        width: 19%;
    }
    .width-20 {
        width: 20%;
    }
    .width-21 {
        width: 21%;
    }
    .width-22 {
        width: 22%;
    }
    .width-23 {
        width: 23%;
    }
    .width-24 {
        width: 24%;
    }
    .width-25 {
        width: 25%;
    }
    .width-26 {
        width: 26%;
    }
    .width-27 {
        width: 27%;
    }
    .width-28 {
        width: 28%;
    }
    .width-29 {
        width: 29%;
    }
    .width-30 {
        width: 30%;
    }
    .width-31 {
        width: 31%;
    }
    .width-32 {
        width: 32%;
    }
    .width-33 {
        width: 33%;
    }
    .width-34 {
        width: 34%;
    }
    .width-35 {
        width: 35%;
    }
    .width-36 {
        width: 36%;
    }
    .width-37 {
        width: 37%;
    }
    .width-38 {
        width: 38%;
    }
    .width-39 {
        width: 39%;
    }
    .width-40 {
        width: 40%;
    }
    .width-41 {
        width: 41%;
    }
    .width-42 {
        width: 42%;
    }
    .width-43 {
        width: 43%;
    }
    .width-44 {
        width: 44%;
    }
    .width-45 {
        width: 45%;
    }
    .width-46 {
        width: 46%;
    }
    .width-47 {
        width: 47%;
    }
    .width-48 {
        width: 48%;
    }
    .width-49 {
        width: 49%;
    }
    .width-50 {
        width: 50%;
    }
    .width-51 {
        width: 51%;
    }
    .width-52 {
        width: 52%;
    }
    .width-53 {
        width: 53%;
    }
    .width-54 {
        width: 54%;
    }
    .width-55 {
        width: 55%;
    }
    .width-56 {
        width: 56%;
    }
    .width-57 {
        width: 57%;
    }
    .width-58 {
        width: 58%;
    }
    .width-59 {
        width: 59%;
    }
    .width-60 {
        width: 60%;
    }
    .width-61 {
        width: 61%;
    }
    .width-62 {
        width: 62%;
    }
    .width-63 {
        width: 63%;
    }
    .width-64 {
        width: 64%;
    }
    .width-65 {
        width: 65%;
    }
    .width-66 {
        width: 66%;
    }
    .width-67 {
        width: 67%;
    }
    .width-68 {
        width: 68%;
    }
    .width-69 {
        width: 69%;
    }
    .width-70 {
        width: 70%;
    }
    .width-71 {
        width: 71%;
    }
    .width-72 {
        width: 72%;
    }
    .width-73 {
        width: 73%;
    }
    .width-74 {
        width: 74%;
    }
    .width-75 {
        width: 75%;
    }
    .width-76 {
        width: 76%;
    }
    .width-77 {
        width: 77%;
    }
    .width-78 {
        width: 78%;
    }
    .width-79 {
        width: 79%;
    }
    .width-80 {
        width: 80%;
    }
    .width-81 {
        width: 81%;
    }
    .width-82 {
        width: 82%;
    }
    .width-83 {
        width: 83%;
    }
    .width-84 {
        width: 84%;
    }
    .width-85 {
        width: 85%;
    }
    .width-86 {
        width: 86%;
    }
    .width-87 {
        width: 87%;
    }
    .width-88 {
        width: 88%;
    }
    .width-89 {
        width: 89%;
    }
    .width-90 {
        width: 90%;
    }
    .width-91 {
        width: 91%;
    }
    .width-92 {
        width: 92%;
    }
    .width-93 {
        width: 93%;
    }
    .width-94 {
        width: 94%;
    }
    .width-95 {
        width: 95%;
    }
    .width-96 {
        width: 96%;
    }
    .width-97 {
        width: 97%;
    }
    .width-98 {
        width: 98%;
    }
    .width-99 {
        width: 99%;
    }
    .width-100 {
        width: 100%;
    }
}
.height-20 {
    height: 20px;
}
.height-40 {
    height: 40px;
}
.height-60 {
    height: 60px;
}
.height-80 {
    height: 80px;
}
.height-100 {
    height: 100px;
}
.height-110 {
    height: 110px;
}
.height-120 {
    height: 120px;
}
.height-130 {
    height: 130px;
}
.height-140 {
    height: 140px;
}
.height-160 {
    height: 160px;
}
.height-180 {
    height: 180px;
}
.height-200 {
    height: 200px;
}
.height-220 {
    height: 220px;
}
.height-240 {
    height: 240px;
}
.height-260 {
    height: 260px;
}
.height-280 {
    height: 280px;
}
.height-300 {
    height: 300px;
}
.height-320 {
    height: 320px;
}
.height-340 {
    height: 340px;
}
.height-360 {
    height: 360px;
}
.height-380 {
    height: 380px;
}
.height-400 {
    height: 400px;
}
.height-420 {
    height: 420px;
}
.height-440 {
    height: 440px;
}
.height-460 {
    height: 460px;
}
.height-480 {
    height: 480px;
}
.height-500 {
    height: 500px;
}
.height-520 {
    height: 520px;
}
.height-540 {
    height: 540px;
}
.height-560 {
    height: 560px;
}
.height-580 {
    height: 580px;
}
.height-600 {
    height: 600px;
}
.height-620 {
    height: 620px;
}
.height-640 {
    height: 640px;
}
.height-660 {
    height: 660px;
}
.height-680 {
    height: 680px;
}
.height-700 {
    height: 700px;
}
.height-720 {
    height: 720px;
}
.height-740 {
    height: 740px;
}
.height-760 {
    height: 760px;
}
.height-780 {
    height: 780px;
}
.height-800 {
    height: 800px;
}
.height-820 {
    height: 820px;
}
.height-840 {
    height: 840px;
}
.height-860 {
    height: 860px;
}
.height-880 {
    height: 880px;
}
.height-900 {
    height: 900px;
}
.height-920 {
    height: 920px;
}
.height-940 {
    height: 940px;
}
.height-960 {
    height: 960px;
}
.height-980 {
    height: 980px;
}
.height-1000 {
    height: 1000px;
}
.height-auto {
    height: auto;
}

.pointbyaddress-selected {
    font-weight: bold;
}
.set-area-byadress {
    text-decoration: underline;
    cursor: pointer;
}
.set-area-byadress:hover {
    text-decoration: none;
    cursor: pointer;
}

.btn-select {
    margin: 2px 2px 2px 0px;
}

span.nav-label.headerbar-menu, .user-login-status-title {
    /*display: none;*/
}
@media (min-width: 768px) {
    span.nav-label.headerbar-menu, .user-login-status-title {
        display: inline-block;
    }


}

@media (min-width: 992px) {
    .modal-help {
        width: 80%;
    }    
    .modal-legalnote {
        width: 70%;
    }
}

@media (max-width: 768px) {
    .navbar-nav {
        /*margin: 4px -15px 3px -15px;*/
        margin: 0px -15px;
    }
    ::-webkit-scrollbar {
        width: 8px !important;
        height: 8px !important;

    }

    /* Track */
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
        -webkit-border-radius: 10px !important;
        border-radius: 10px !important;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px !important;
        border-radius: 10px !important;
        background: #999 !important; 
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; 

    }
    ::-webkit-scrollbar-thumb:window-inactive {
        background: #999 !important; 
    }
    #window-tophead {
        box-shadow: inset 0 1px 2px #fff;
    }
    ul.nav.nav-tabs > li > a {
        font-size: 11px;
    }
    .logging-info-text {
        /*display: none;*/
    }

}
.table > tbody > tr > td {
    border-top: none;
}
.clickable-link{
    cursor:pointer;
}
.clickable-link:hover{
    /*opacity:0.7;*/
    background-color: rgba(0,0,0,0.1);
}
td.clickable-link:hover{
    /*opacity:0.7;*/
    background-color: rgba(0,0,0,0.1);
}
.collapse-settings-btn {
    font-size: 14px;
    /*float: right;*/
    padding: 0px 0px 0px 5px;
    color: #999;
    cursor: pointer;
}
.collapse-settings-btn:hover {
    opacity: 0.8;
    text-decoration: none;
}
.collapse-settings-content a {
    display: block;
    color: #666;
    padding: 6px 8px;
    text-decoration: none;
}
.collapse-settings-content span.settings-with-icon  {
    display: block;
    color: #666;
    padding: 6px 8px;
    text-decoration: none;
}
.collapse-settings-content a:hover, .collapse-settings-content a:hover span {
    color: #fff;
    background-color: #2f9cd0;
}
.popover-content.popover-settings-content {
    padding: 0px;
}
.popover-settings-container {
    border-radius: 2px;
}
.collapse-settings-icon {
    min-width: 22px;
    float: left;
    font-size: 14px;
    margin-right: 2px;
    text-align: center;
    margin-top: 3px;
    margin-left: -25px;
}
span.collapse-settings-subcontent {
    display: block;
    /*margin: -6px 0px -5px -7px;*/
    font-size: 10px;
    color: #999;
    /*margin-top: -6px;*/
}
.settings-with-icon {
    padding-left:25px !important;
}
span.subvalue {
    font-size: 11px;
    display: block;
}
hr.collapse-settings-hr {
    margin: 0px;
}
#headerbar-popover:hover {
    opacity: 1;
    background: skyblue;
}
span.disabled {
    background-color: #f9f9f9;
    text-shadow: 1px 1px 1px lightgrey;
    color: #aaa !important;
    cursor: not-allowed;
}
.nav-label-headerbar {
    margin-left: 5px; 
}
input.btn-full-width + input.btn-full-width,
button.btn-full-width + button.btn-full-width,
input.btn-full-width + button.btn-full-width,
button.btn-full-width + input.btn-full-width {
    margin-top: 10px;
}
.btn-group  input.btn-full-width + input.btn-full-width,
.btn-group  button.btn-full-width + button.btn-full-width,
.btn-group  input.btn-full-width + button.btn-full-width,
.btn-group  button.btn-full-width + input.btn-full-width {
    margin-top: 0px;
}
select.element-masked {
    display:block !important;
    position:absolute;
    clip:rect(0,0,0,0);
    width: 0px;
}
select.element-masked.hidden.form-control {
    width: 0% !important;
}
select.element-masked[multiple], select.element-masked[size] {
    height: 20px;
}
.modal {
    z-index: 99999;
}
.window-report-headings-box {
    padding: 2px;
}
div#window_report_headings_chosen > a {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-green-report-option:focus {
    outline: none !important;
}
.xfree-panel-box + .xfree-panel-box {
    padding-left: 5px !important;
}
.masonry-container {
    margin: 0px -15px;
}
.simple-alert {
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 10px;
}
.simple-label {
    line-height: normal;
}
.label-fluid {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.form-comment {
    font-size:12px;
    float:left;
    margin-bottom: 8px;
}
/*****************************
 Color >> Backgrounds + Text 
*****************************/

.bg-white{
    background-color:#fff !important; 
}
.text-white{
    color:#fff !important;
}
.bg-pink{
    background-color:#eaa1bd !important;
}
.text-pink{
    color:#eaa1bd !important;
}
.bg-yellow{
    background-color:#f9dc85 !important;
}
.text-yellow{
    color:#f9dc85 !important;
}
.bg-gray{
    background-color:#b2b2b2 !important;
}
.text-gray{
    color:#b2b2b2 !important;
}
.bg-lightgray{
    background-color:#fbfbfd !important;
}
.text-lightgray{
    color:#fbfbfd !important;
}
.bg-red{
    background-color:#F16364 !important;
}
.text-red{
    color:#F16364 !important;
}
.bg-blue{
    background-color:#00a0e6 !important;
}
.text-blue{
    color:#00a0e6 !important;
}

.bg-green{
    background-color:#67BF74 !important;
}
.text-green{
    color:#67BF74 !important;
}
.bg-purple{
    background-color:#8d82b5 !important;
}
.text-purple{
    color:#8d82b5 !important;
}		
.bg-yellow{
    background-color:#F9A43E !important;
}
.text-yellow{
    color:#F9A43E !important;
}
.bg-orange{
    background-color:#F58559 !important;
}
.text-orange{
    color:#F58559 !important;
}			
.bg-test{
    background-color:#79B9D9 !important;
}
.text-test{
    color:#79B9D9 !important;
}


.background-warning{
    background-color:#fcf8e3 !important;
}
.border-warning {
    border: solid 1px #faebcc !important;
}
.text-warning{
    color:#8a6d3b !important;
}
.bg-warning{
    background-color:#fcf8e3 !important;
}


.background-danger{
    background-color:#f2dede !important;
}
.border-danger {
    border: solid 1px #ebccd1 !important;
}
.text-danger{
    color:#a94442 !important;
}
.bg-danger {
    background-color:#f2dede !important;
}

.background-success{
    background-color: #dff0d8 !important;
}
.text-success{
    color:#3c763d !important;
}
.border-success {
    border: solid 1px #d6e9c6 !important;
}
.bg-success {
    background-color: #dff0d8 !important;
}

.background-info {
    background-color: #d9edf7 !important;
}
.text-info{
    color:#31708f !important;
}
.border-info {
    border: solid 1px #bce8f1 !important;
}
.bg-info {
    background-color: #d9edf7 !important;
}

.background-unimportant {
    background-color: #fafafa !important;
}
.text-unimportant{
    color :#bbb !important;
}
.border-unimportant {
    border: solid 1px #d9d9d9 !important;
    color: #b9b9b9 !important;
}
.alert-unimportant {
    color: #bbb !important;
    background-color: #fafafa !important;
    border-color: #d9d9d9 !important;
}
.btn-unimportant {
    color: #bbb !important;
    background-color: #fafafa !important;
    border-color: #d9d9d9 !important;
}
.panel-unimportant {
    border-color: #d9d9d9 !important;
}
.label-unimportant {
    background-color: #fafafa !important;
}

.panel-success{
    border-color:#70ba63;}

.panel-success > .panel-heading,
.panel-success > .panel-footer{
    border-color: #70ba63;
    background-color:#70ba63;
    color:#fff;
    box-shadow:none;
}

.panel-info{
    border-color:#4cbceb;}

.panel-info > .panel-heading,
.panel-info > .panel-footer{
    border-color: #4cbceb;
    background-color:#4cbceb;
    color:#fff;
    box-shadow:none;
}

.panel-warning{
    border-color:#feb252;}

.panel-warning > .panel-heading,
.panel-warning > .panel-footer{
    border-color: #feb252;
    background-color:#feb252;
    color:#fff;
    box-shadow:none;
}

.panel-danger{
    border-color:#e35b5a;}

.panel-danger > .panel-heading,
.panel-danger > .panel-footer{
    border-color: #e35b5a;
    background-color:#e35b5a;
    color:#fff;
    box-shadow:none;
}
.text-xs {
    font-size: 9px;
}
.text-sm {
    font-size: 12px;
}
.text-md {
    font-size: 14px;
}
.text-lg {
    font-size: 16px;
}
.text-xl {
    font-size: 18px;
}
.text-xxl {
    font-size: 24px;
}
.strong {
    font-weight: 400;
}
.noty-locator-icon {
    left: 16px;
    width: 16px;
    height: 16px;
    margin-top: 26px;
    /*opacity: 0.8;*/
    margin-left: -20px;
}
#locator-details-heading-usericon, #locator-details-heading-drivericon {
    width: 32px;
    height: 32px;
} 
img#locator-details-heading-drivericon {
    width: 24px;
    height: 24px;
    margin-left: -7px;
}
.locator-details-heading-bar {
    background-color: #70ba63;
    padding: 2px;
    color: #fff;
}
.locator-details-heading-bar .locator-demo {
    font-size: 8px;
    font-weight: bold;
    padding: 1px;
    border-radius: 3px;
    background-color: tomato;
    margin-top: -12px;
    position: absolute;
    margin-left: 3px;
}
.locator-details-heading-bar .locator-demo.hidden {
    display:none;
}
.long {
    width: calc(100% - 3px);
    overflow: hidden;
    text-overflow: ellipsis;
}
.long-66 {
    width: calc(66% - 2px);
    overflow: hidden;
    text-overflow: ellipsis;
}
.short {
    width: 32.4%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
div#tripchooser {
    padding: 1px 2px;
}
div#tripchooser > div {
    margin-bottom: 2px;
}
div#tripchooser > label {
    margin-bottom: 0px;
}
.btn-group-locator-details > i.btn {
    padding: 4px 10px;
    /*width: 14.62%;*/
    width: 14.3%;
}
#btn-group-tripchooser {
    margin: 1px 2px 2px 2px;
}
#tripchooser-btn {
    padding: 2px 10px;
}
#switchdetails-btn {}
.details-window-btn {
    padding: 2px 10px;
}

#tripstart, #tripstop {
    width: calc(50% - 1px);
    height: 24px;
    display: inline;
    font-size: 10.5px;
}
#tripstart {
    margin-right: 2px;
}
.chosen-container .chosen-results {
    max-height: 170px;
}
#report-menu > div > div > div.panel-collapse.collapse.in {
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
.panel-collapse > div > div > div > div {
    word-wrap: break-word;
}
.panel.list-unstyled.ui-sortable {
    border: 0px;
}
.btn-group > .btn-full-width {
    width: auto;
}
.width-auto {
    width: auto;
}
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
.flag {
    border-radius: 50%;
    width: 15px;
    height: 15px;
    margin: 2px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(255,255,255,1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(255,255,255,1);
    box-shadow: 0px 0px 5px 0px rgba(255,255,255,1);
}
/*.table > thead > tr > td.warning, .table > tbody > tr > td.warning, .table > tfoot > tr > td.warning, .table > thead > tr > th.warning, .table > tbody > tr > th.warning, .table > tfoot > tr > th.warning, .table > thead > tr.warning > td, .table > tbody > tr.warning > td, .table > tfoot > tr.warning > td, .table > thead > tr.warning > th, .table > tbody > tr.warning > th, .table > tfoot > tr.warning > th {
    background-color: transparent;
}*/
/*.table > thead > tr > td.info, .table > tbody > tr > td.info, .table > tfoot > tr > td.info, .table > thead > tr > th.info, .table > tbody > tr > th.info, .table > tfoot > tr > th.info, .table > thead > tr.info > td, .table > tbody > tr.info > td, .table > tfoot > tr.info > td, .table > thead > tr.info > th, .table > tbody > tr.info > th, .table > tfoot > tr.info > th {
     background-color: transparent; 
}*/
/*.table > thead > tr > td.danger, .table > tbody > tr > td.danger, .table > tfoot > tr > td.danger, .table > thead > tr > th.danger, .table > tbody > tr > th.danger, .table > tfoot > tr > th.danger, .table > thead > tr.danger > td, .table > tbody > tr.danger > td, .table > tfoot > tr.danger > td, .table > thead > tr.danger > th, .table > tbody > tr.danger > th, .table > tfoot > tr.danger > th {
    background-color: transparent;
}*/
.table-footer {
    background: #eee;
    font-weight: 600;
}
.logging-form {
    height: calc(100vh - 30px);
    overflow: auto;
}
.map-tooltip {
    padding: 2px !important;
    font-size: 11px;
    top: -8px;
    transition: all 0s;
    opacity: 1 !important;
    font-family: "Open Sans", sans-serif !important;
}
.cluster-map-tooltip-inside{
    height: 114px;
    /*overflow-y: auto;*/
    /*width: 250px;*/
    vertical-align: middle;
    display: table-cell;
}
.cluster-map-tooltip{
    top: 0px;
    z-index: 9999;
    width: 250px;
    height: 120px;
    /*overflow-y: auto;*/
}
.cluster-map-tooltip-inside-box {
    height: 114px;
    overflow: auto;
}
.markerClusterInfoRow {
    font-family: "Open Sans", sans-serif !important;
}
.quick-help {
    position: absolute;
    z-index: 99;
    transition: all 1s;
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
    z-index: 999999;
}
.quick-help-handler {
    width: 50px;
    height: 100px;
    right: 0px;
    top: calc(50% - 50px);
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    cursor: pointer;
}
.quick-help-body {
    padding: 15px;
    right: -400px;
    top: calc(50% - 130px);
    width: 400px;
    height: 260px;
}
.quick-help-body-thanks {
    text-align: center;
    margin-top: 90px;
    display: none;
}
.quick-help > i {
    margin: 34px 0px 30px 10px;
    font-size: 32px;
}
@media (max-width: 768px) {
    .quick-help {
        display:none;
    }
    .cluster-map-tooltip-inside {
        overflow: hidden;
    }
}

.panel-footer-arrow {
    height: 20px;
    padding-top: 3px;
}
.huge {
    font-size: 40px;
}
/*.help-block {
    display: inline;
}*/
.panel-link {
    color: #fff;
}
.panel-link:hover{
    color: #f1f1f1;
}

.panel-link:focus {
    color: #fff;
}
.label-as-badge {
    border-radius: 1em;
    float: right;
    padding: 6px 10px;
}
.ftask-icon-space {
    /*margin-right: 1em;*/
}
.ftask-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    padding: 4px 5px;
}
.ftask-icon {
    float: left;
}

.ftask-wrap-text{
    white-space: normal;
}

/*********************
 FCarousel
 ********************/

.carousel-control.left, .carousel-control.right {
    height:80%;
    background-image: none;
}
.carousel-indicators {
    bottom: -10px;
}
.carousel-inner > .item {
    margin-bottom: 55px;
}

.carousel-dark .carousel-indicators li{
    background-color: rgba(70,70,70,.25);
}
.carousel-dark .carousel-indicators .active{
    background-color: #444;
} 
.carousel-light .carousel-indicators li{
    background-color: rgba(200,200,200,.25);
}
.carousel-light .carousel-indicators .active{
    background-color: #dcdcdc;
}  
.carousel-none .carousel-indicators {
    visibility: hidden;
}
.carousel-dark .glyphicon-chevron-left, .carousel-dark .glyphicon-chevron-right{
    color: black;
    opacity: 0.8;
}
.carousel-none .glyphicon-chevron-left, .carousel-none .glyphicon-chevron-right{
    visibility: hidden;
}
.locator-icon-in-text {
    margin-right: 5px;
    margin-bottom: 5px;
}

.ticket-answer {

}
.dl-ftask dt {
    width: 350px;
    margin-bottom: 3px;
    margin-top: 3px;
}
.dl-ftask dd {
    margin-bottom: 3px;
    margin-top: 3px;
}
.dl-ftask dd {
    margin-left: 370px
}
.ticket-content {
    white-space: normal;
}
.panel-group-element.alert {
    margin-bottom: 0px;
    margin-top: 3px;
    padding: 0px !important;
    min-height: 0px !important;
}
.report-tab-content.fade {
    opacity: 1;
}
.panel-footer.alert {
    margin-bottom: 0px;
}

/***********************
    FMenu CSS
***********************/

.fmenu-focus{
    text-decoration: none !important;
    background-color: #87ceeb !important;
    color: #fff !important;
}

.fmenu-root{
    color: #fff;
    /*border-left: none;
    border-right: none; */   
    background-color: #2f9cd0;
}
.fmenu-root-border{
    border-bottom: 1px solid #87ceeb;
}

.fmenu-root:hover,
.fmenu-root:focus{
    color: #fff;
    text-decoration: none;    
}
.fmenu-child{
    color: #2f9cd0;
    /*border: none;*/
    background-color: #ffffff;
}
.fmenu-child:hover {
    color: #2f9cd0;
    text-decoration: none;
}

.fmenu-list-group-item-options,
a.fmenu-list-group-item-options:hover {
    text-align: center;
    margin-bottom: -1px;
    cursor: pointer;
}

.fmenu-list-group-item {
    padding-left: 15px;
    text-decoration: none;
    overflow:hidden;  
    position: relative;
    display: block;		  
    padding-top: 10px;		  
    padding-bottom: 10px;    
}
.fmenu-inline {
    display: inline-block !important;
    vertical-align: middle;
}
.fmenu-row {}
.fmenu-item-title {
    width: 88%;
}
.fmenu-item-option {
    width: 8%;
    text-align: center;
}

/******************************************************
Prevent Bootstrap Switch (FCheckbox) from text wrapping
*******************************************************/
.bootstrap-switch-container span { white-space: nowrap; }


/*********************************
Footer backlinks
*********************************/
.footerbackbutton {
    float: right; 
    display: block; 
    position: relative; 
    clear: both;
}
/*input:invalid,
textarea:invalid,
input:out-of-range {
    border-color:hsl(0, 50%, 50%);
    background:hsl(0, 50%, 90%);
}
input:invalid + span.check-required:before, 
textarea:invalid + span.check-required:before { 
    content: '!';
    font-size: 20px;
    width: 30px;
    height: 30px;
    color: #fff;
    background-color: rgb(191, 63, 63);
    border-radius: 15px;
    display: block;
    text-align: center;
    float: right;
    margin: 5px;
}*/

.thin-icon {
    -webkit-text-stroke: 1px #fff;
    text-stroke: 1px #fff;
}

.collapse-smaller input, select {
    font-size: 11px;
    padding: 4px;
    height: 22px;
}

.collapse-smaller textarea {
    padding: 4px;
    font-size: 11px;
}

.collapse-label {
    font-size: 11px;
}
.collapse-smaller .input-group-addon {
    font-size: 12px;
    padding: 4px 12px;
}

.collapse-smaller .bootstrap-switch .bootstrap-switch-handle-on,
.collapse-smaller .bootstrap-switch .bootstrap-switch-handle-off,
.collapse-smaller .bootstrap-switch .bootstrap-switch-label {
    height: 20px;
    font-size: 11px;
    padding: 1px;
}

.collapse-smaller .panel-body > .row >.col-xs-1, 
.collapse-smaller .panel-body > .row >.col-sm-1, 
.collapse-smaller .panel-body > .row >.col-md-1, 
.collapse-smaller .panel-body > .row >.col-lg-1, 
.collapse-smaller .panel-body > .row >.col-xs-2, 
.collapse-smaller .panel-body > .row >.col-sm-2, 
.collapse-smaller .panel-body > .row >.col-md-2, 
.collapse-smaller .panel-body > .row >.col-lg-2, 
.collapse-smaller .panel-body > .row >.col-xs-3, 
.collapse-smaller .panel-body > .row >.col-sm-3, 
.collapse-smaller .panel-body > .row >.col-md-3, 
.collapse-smaller .panel-body > .row >.col-lg-3, 
.collapse-smaller .panel-body > .row >.col-xs-4, 
.collapse-smaller .panel-body > .row >.col-sm-4, 
.collapse-smaller .panel-body > .row >.col-md-4, 
.collapse-smaller .panel-body > .row >.col-lg-4, 
.collapse-smaller .panel-body > .row >.col-xs-5,
.collapse-smaller .panel-body > .row >.col-sm-5,
.collapse-smaller .panel-body > .row >.col-md-5,
.collapse-smaller .panel-body > .row >.col-lg-5,
.collapse-smaller .panel-body > .row >.col-xs-6,
.collapse-smaller .panel-body > .row >.col-sm-6,
.collapse-smaller .panel-body > .row >.col-md-6,
.collapse-smaller .panel-body > .row >.col-lg-6,
.collapse-smaller .panel-body > .row >.col-xs-7,
.collapse-smaller .panel-body > .row >.col-sm-7,
.collapse-smaller .panel-body > .row >.col-md-7,
.collapse-smaller .panel-body > .row >.col-lg-7,
.collapse-smaller .panel-body > .row >.col-xs-8,
.collapse-smaller .panel-body > .row >.col-sm-8,
.collapse-smaller .panel-body > .row >.col-md-8,
.collapse-smaller .panel-body > .row >.col-lg-8,
.collapse-smaller .panel-body > .row >.col-xs-9,
.collapse-smaller .panel-body > .row >.col-sm-9,
.collapse-smaller .panel-body > .row >.col-md-9,
.collapse-smaller .panel-body > .row >.col-lg-9,
.collapse-smaller .panel-body > .row >.col-xs-10,
.collapse-smaller .panel-body > .row >.col-sm-10,
.collapse-smaller .panel-body > .row >.col-md-10,
.collapse-smaller .panel-body > .row >.col-lg-10,
.collapse-smaller .panel-body > .row >.col-xs-11, 
.collapse-smaller .panel-body > .row >.col-sm-11, 
.collapse-smaller .panel-body > .row >.col-md-11,
.collapse-smaller .panel-body > .row >.col-lg-11, 
.collapse-smaller .panel-body > .row >.col-xs-12,
.collapse-smaller .panel-body > .row >.col-sm-12,
.collapse-smaller .panel-body > .row >.col-md-12,
.collapse-smaller .panel-body > .row >.col-lg-12 {
    padding-right: 5px;
    padding-left: 5px;
}
.collapse-smaller .form-control:not(textarea) {
    height: 22px;
}
.collapse-smaller .chosen-container-single .chosen-single {
    padding: 1px;
    font-size: 11px;
    height: 22px;
}
.collapse-smaller .panel-heading {
    padding: 4px 6px;
}
.collapse-smaller .panel-body {
    padding: 2px 15px;
}
.collapse-smaller .panel-title {
    font-size: 14px;
}
.collapse-smaller .alert {
    padding: 2px;
    font-size: 10px;
    margin-bottom: 2px;
}
.collapse-smaller label {
    font-size: 12px;
}
.collapse-smaller .btn {
    padding: 0px 6px;
}
.collapse-smaller .help-block {
    margin-top: 1px;
    margin-bottom: 2px;
}
.collapse-smaller h2, 
.collapse-smaller .h2,
h2.collapse-smaller, 
.collapse-smaller.h2{
    font-size: 20px;
}
.collapse-smaller .panel,
.collapse-smaller.panel{
    margin-bottom: 2px;
}

.report-cache {
    display: none;
}


.tripsGanttChart {
    width: 100%;
    height: 72px;
    margin-bottom: 10px;
}

.button-label-elipsis {
    display: inline-block;
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap;
    max-width: 95%;
}

.button-wrap-block {
    display: inline-block;
    width: 95%;
}

.label-pill {
    padding-right: .6em;
    padding-left: .6em;
    border-radius: 10rem;
    font-size: 8px;
}

.icon-badge {
    position: absolute;
    bottom: -2px;
    right: 0px;
}

.icon-with-badge {
    padding: 5px 2px 0px 2px;
    text-align: center;
    position: relative;
    display: inline-block;
}

.icon-with-badge:hover {
    cursor: pointer;
}

.sparkline-chart {
    vertical-align: middle; 
    display: inline-block; 
    margin-bottom: -15px;
    font-size: 6px;
    width: 100px; 
    max-width: 100px; 
    height: 25px;
    max-height: 25px;
}

.shadow-box {
    padding: 5px 5px 5px 5px;    
    margin-bottom: 5px;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75);    
}

.color-green { color: green; }
.color-blue { color: blue; }
.color-yellow { color: #ffa500; }
.color-pink { color: #ff9999; }
.color-red { color: red; }
.color-white { color: white; }
.color-transparent { color: transparent; }

.no-margin-bottom {
    margin-bottom: 0px;
}

.div-fullscreen {
    top: 0px;
    left: 0px;    
    width: 100%;    
    z-index: 500;
    overflow: auto;
    position: absolute;
}

.social_share_icon:hover {
    color: #2F9CD0;
}

/* #### MAIL ATTACHMENTS #### */
.ajax_attachment {
    border: 1px solid #dcdcdc;    
    margin-top: 5px;
    height: 41px;
    max-height: 41px;
}

.ajax_attachment_filename {
    color: #5d5d5d;
    padding: 10px 10px 10px 10px;
}
.ajax_attachment_remove_btn {
    /*padding: 10px 10px 10px 10px;*/
    cursor: pointer;
    font-size: 20px;
    float: right;    
    height: 41px;
}
.attachmentUploadProgress { position:relative; width:100%; border: 0px solid #ffffff; top: 0px; display: none;}
.attachmentUploadBar { 
    max-height: 41px;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 0%; top: 0px; 

    background: rgba(212,228,239,0.4);
    background: -moz-linear-gradient(left, rgba(212,228,239,0.4) 0%, rgba(47,156,208,0.4) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(212,228,239,0.4)), color-stop(100%, rgba(47,156,208,0.4)));
    background: -webkit-linear-gradient(left, rgba(212,228,239,0.4) 0%, rgba(47,156,208,0.4) 100%);
    background: -o-linear-gradient(left, rgba(212,228,239,0.4) 0%, rgba(47,156,208,0.4) 100%);
    background: -ms-linear-gradient(left, rgba(212,228,239,0.4) 0%, rgba(47,156,208,0.4) 100%);
    background: linear-gradient(to right, rgba(212,228,239,0.4) 0%, rgba(47,156,208,0.4) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc', GradientType=1 );
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-link {
    text-decoration: underline;
}

.action-link:hover {
    color: navy;
    cursor: pointer;
}

.legalnotes-introduction {
    width: 100%;
    border-bottom: 1px solid #dcdcdc;
    max-height: 100px;
    margin-bottom: 15px;
    overflow:auto;
}

.tooltip-inner {
    white-space:pre-wrap;

}

.margin-bottom-5 { margin-bottom: 5%; }
.margin-bottom-10 { margin-bottom: 10%; }
.margin-bottom-15 { margin-bottom: 15%; }
.margin-bottom-20 { margin-bottom: 20%; }
.margin-bottom-25 { margin-bottom: 25%; }
.margin-bottom-30 { margin-bottom: 30%; }
.margin-bottom-35 { margin-bottom: 35%; }
.margin-bottom-40 { margin-bottom: 40%; }
.margin-bottom-45 { margin-bottom: 45%; }
.margin-bottom-50 { margin-bottom: 50%; }
.margin-bottom-55 { margin-bottom: 55%; }
.margin-bottom-60 { margin-bottom: 60%; }
.margin-bottom-65 { margin-bottom: 65%; }
.margin-bottom-70 { margin-bottom: 70%; }
.margin-bottom-75 { margin-bottom: 75%; }
.margin-bottom-80 { margin-bottom: 80%; }
.margin-bottom-85 { margin-bottom: 85%; }
.margin-bottom-90 { margin-bottom: 90%; }
.margin-bottom-95 { margin-bottom: 95%; }
.margin-bottom-100 { margin-bottom: 100%; }

.dummy-footer {
    clear: both; 
    height: 5%;
}


/* ajax data loader */
.loadable-content {
    position: relative;
}
.loadable-content > .loader-container {
    display: none;
    z-index: 99;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.66);
}

.loadable-content.loader-active > .loader-container {
    display: block;
}

.loader-container img {
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

/* locator details tabs */
.locator-details-content {
    position: relative;
}
#window-details:not(.error) .locator-details-content
#window-details:not(.error) .tab-pane {
    min-height: 300px;
}
#window-details:not(.error) #locator-details {
    min-height: 220px;
}
#window-details .tab-pane .tab-actions {
    margin: 2px;
    width: calc(100% - 5px);
}
#window-details.mobile:not(.error) .locator-details-content {
    width: calc(100% - 27px);
}
#window-details.mobile {
    overflow-x: hidden !important;
}
.details-page.active {
    display: block;
}
.details-page {
    position: absolute;
    display: none;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 99 !important;
    background-color: #fff;
    padding: 1px;
}

/* details navigation */
#window-details .details-nav {
    position: absolute;
    top: -1px;
    left: 100%;
    z-index: -1;
    border-bottom: none;
}
#window-details .details-nav li > a {
    margin: 0;
    border-radius: 0 10px 10px 0;
    background-color: #fff;
    width: 27px;
    border: 1px solid #adadad;
    border-left-color: transparent;
    color: #333;
    height: 40px;
    padding: 13px 3px 13px 0;
    text-align: center;
    -webkit-box-shadow: 5px 5px 11px -6px rgba(0,0,0,0.4);
    -moz-box-shadow: 5px 5px 11px -6px rgba(0,0,0,0.4);
    box-shadow: 5px 5px 11px -6px rgba(0,0,0,0.4);
    cursor: pointer;
}
#window-details.mobile .details-nav li > a {
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-right: none;
    display: table-cell;
    vertical-align: middle;
}
#window-details.mobile .details-nav li {
    display: table;
}
#window-details.mobile .details-nav li:last-child a {
    border-bottom: none;
}
#window-details.mobile .details-nav, #window-details.mobile .details-nav > li a {
    height: 100%;
    width: 27px;
}
#window-details.mobile .details-nav > li {
    height: 25%;
}
#window-details .details-nav li.active > a {
    background-color: #dff0d8;
    color: #579e4b;
    border-color: #579e4b;
    border-left-color: transparent;
    z-index: 9;
}
#window-details .nav-badge {
    position: absolute;
    right: 1px;
    top: 1px;
    z-index: 999;
    user-select: none;
}
#window-details .nav-badge:not(.badge-icon) {
    font-size: 8px;
    padding: 0 3px;
    background-color: #2f9cd0;
    color: #fff;
    border-radius: 5px;
}
#window-details .nav-badge.badge-icon {
    font-size: 11px;
    color: #2f9cd0;
}
#window-details .tab-pane {
    position: relative;
}
#window-details.error .tab-pane {
    min-height: 0;
}
#window-details.error .details-nav {
    display: none;
}
#window-details.mobile {
    height: initial !important;
    overflow-y: auto !important;
}

/* jquery minicolors additional style */
.minicolors.only-swatches .minicolors-slider,
.minicolors.only-swatches .minicolors-grid,
.minicolors.only-swatches .minicolors-opacity-slider {
    display: none;
}

/* select dropdown additional styles */
.static-menu {
    border-top: 1px solid #ccc;
    background-color: #e8e8e8;
}
.static-menu > div {
    padding: 2px 5px 2px 5px;
    cursor: pointer;
}
.static-menu > div:hover {
    background-color: #ccc;
}
.static-menu > div > i {
    width: 20px;
}


.chosen-dropdown-page {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #fff;
    z-index: 999999999;
    padding: 5px;
}
.chosen-dropdown-page:not(.active) {
    display: none;
}
.chosen-dropdown-page > .form-control:last-child {
    margin-bottom: 0;
}
.chosen-container.append-btn {
    position: relative;
}
.chosen-container.append-btn .chosen-append-btn.flipped {
    transform: rotate(180deg);
}
.chosen-container.append-btn .chosen-choices {
    padding-right: 25px;
}
.chosen-container.append-btn .chosen-append-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 25px;
    height: 100%;
    max-height: 25px;
    text-align: center;
    cursor: pointer;
    padding-top: 7px;
}
.chosen-container.append-btn .chosen-append-btn:hover {
    color: #000;
}

.progressContainer { position:relative; width:100%; border: 0px solid #ffffff; top: 0px; display: none;}
.progressBar { width:0%; height:2px; top: 0px;
               /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,207cca+62,2989d8+100,7db9e8+100 */
               background: #1e5799; /* Old browsers */
               background: -moz-linear-gradient(left, #1e5799 0%, #207cca 62%, #2989d8 100%, #7db9e8 100%); /* FF3.6-15 */
               background: -webkit-linear-gradient(left, #1e5799 0%,#207cca 62%,#2989d8 100%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
               background: linear-gradient(to right, #1e5799 0%,#207cca 62%,#2989d8 100%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
               filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 */
}/*#EC5F67*/

.panel .panel-icon:not(.fa-2x) {
    padding: 8px 0;
}

.panel-drag-placeholder {
    height: 48px;
    border-radius: 4px;
    background-color: #dddddd;
    margin: 5px 0;
}

.ui-sortable-handle {
    cursor: grab;
}

.ui-sortable-handle.ui-sortable-helper {
    cursor: grabbing !important;
}

/* JSFItemsDropdown css */
.items-dropdown.full-width {
    max-width: 100%;
}
.items-dropdown.input-group {
    display: block;
}
.items-dropdown .dropdown-value {
    position: relative;
    width: calc(100% - 30px);
    display: inline-block;
    float: left;
}
.items-dropdown .dropdown-toggle {
    width: 30px;
    display: inline-block;
    float: right;
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
}
.items-dropdown .dropdown-menu {
    top: 0;
    min-width: 50px !important;
    width: calc(100% - 19px);
    padding: 5px;
    margin: 0 0 0 -10px;
    border-top-right-radius: 0;
    overflow: auto;
}
.items-dropdown.open .dropdown-menu, .items-dropdown .dropdown-menu.open {
    display: block;
}
.items-dropdown .items-dropdown-option {
    width: 100%;
    display: inline-block;
    float: left;
    margin-bottom: 2px;
}
.items-dropdown .item-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
}
.items-dropdown .items-dropdown-option.removable > .item-label {
    width: calc(100% - 10px);
    float: left;
}
.items-dropdown .items-dropdown-option.removable > .remove-item {
    float: right;
    width: 10px;
    font-size: 1.3em;
    margin: -2px;
    display: inline-block;
    color: inherit;
}
.items-dropdown .items-dropdown-option.removable > .remove-item:hover {
    opacity: 0.7;
}
.items-dropdown .dropdown-toggle {
    border-left: 1px solid #ccc;
}