/**
 * CONTENT
 * - Fonts
 * - Icons
 * - Animation 
 * - Bootstrap Theme
 * - Typography
 * - Helpers 
 * - Layout
 * - Pages
 * -- Login 
 * - Widgets
 * -- Datetimepicker
 * -- Alert
 * - Responsive
 */

/*** Fonts ***/
/* raleway-regular - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/raleway-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Raleway'), local('Raleway-Regular'),
       url('../fonts/raleway-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v12-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-700 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/raleway-v12-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Raleway Bold'), local('Raleway-Bold'),
       url('../fonts/raleway-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v12-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v12-latin-700.svg#Raleway') format('svg'); /* Legacy iOS */
}

/*** Icons ***/
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?mjf3k1');
  src:  url('../fonts/icomoon.eot?mjf3k1#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?mjf3k1') format('truetype'),
    url('../fonts/icomoon.woff?mjf3k1') format('woff'),
    url('../fonts/icomoon.svg?mjf3k1#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-check2:before {
  content: "\f00c";
}
.icon-close:before {
  content: "\f00d";
}
.icon-times-circle:before {
  content: "\f057";
}
.icon-check-circle:before {
  content: "\f058";
}
.icon-times-circle-o:before {
  content: "\f05c";
}

.icon-advanced:before {
  content: "\e900";
}
.icon-check:before {
  content: "\e901";
}
.icon-clock:before {
  content: "\e902";
}
.icon-intercom:before {
  content: "\e903";
}
.icon-main:before {
  content: "\e904";
}
.icon-network:before {
  content: "\e905";
}
.icon-security:before {
  content: "\e906";
}
.icon-system:before {
  content: "\e907";
}
.icon-language:before {
  content: "\e894";
}



/*** Animation ***/
a,#sidebar{
    -webkit-transition: all  0.5s ease !important;
    -moz-transition: all   0.5s ease !important;
    -ms-transition: all  0.5s ease !important; 
    transition: all   0.5s ease !important;
}
.help-i,.help-i:before{
    -webkit-transition: all  0.2s ease !important;
    -moz-transition: all   0.2s ease !important;
    -ms-transition: all  0.2 ease !important; 
    transition: all   0.2s ease !important;
}

/*** Bootstrap theme ***/
.text-danger { color: #A94441 !important;}
.bg-light {
    background-color: #f2f2f4 !important;
}
.text-primary { color: #5393CC !important; }
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link
{
    
}
.nav-pills .nav-link {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    color: #797E8A;
    font-weight: 700;
    text-align: left;
    font-size: 13px;
    line-height: 45px;
    text-transform: uppercase;
    padding: 0 28px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #f53e4b;
    color: #FFF;
}
.nav-pills .nav-link:hover {
    color: #FFF;
}
.table thead th {
  background: #f5f5f5;
}

.table-curved {
  border-collapse: separate;
  border: solid #ccc 1px;
  border-radius: 6px;
  border-left: 0px;
  border-top: 0px;
}
.table-curved > thead:first-child > tr:first-child > th {
  border-bottom: 0px;
  border-top: solid #ccc 1px;
}
.table-curved td, .table-curved th {
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
}
.table-curved td + td, .table-curved th + th, .table-curved th + td {
  border-left: 0;
}

.table-curved > :first-child > :first-child > :first-child {
  border-top-left-radius: 6px;
}
.table-curved > :first-child > :first-child > :last-child {
  border-top-right-radius: 6px;
}
.table-curved > :last-child > :last-child > :first-child {
  border-bottom-left-radius: 6px;
}
.table-curved > :last-child > :last-child > :last-child {
  border-bottom-right-radius: 6px;
}


/**** Cards ****/
.card { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;  border: 1px solid #dddddd; margin-bottom: 2rem;}
.card-header { font-weight: bold; font-size: 18px; font-weight: 700;  padding-left: 30px; color: #85868d; background: #f5f5f5; padding: 0.6rem 1.25rem; }
.card-body { padding: 2rem;}
.card-header:first-child { -moz-border-radius: 4px 4px 0 0 ; -webkit-border-radius:  4px 4px 0 0 ; border-radius:  4px 4px 0 0 ; }
.card>.list-group:last-child .list-group-item:last-child { -moz-border-radius:0 0 4px 4px; -webkit-border-radius:  0 0 4px 4px ; border-radius:  0 0 4px 4px ; }

.card .list-group {    margin: 0 20px; }
.card .list-group-item { padding-left: 10px; padding-right: 10px; border: 1px  dashed #e0e0e0; border-width: 1px 0 ; }
.card .list-group-item .label { display: inline-block; width: 120px;}

.card fieldset {
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 10px;
  padding-right: 10px;
}
.card fieldset + fieldset {
  border-top:  1px solid #e0e0e0;
  margin-top: 15px;
  padding-top: 30px;
} 
.card fieldset  .legend-title{
  color: #878a92;
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 2.1875rem;
}
.card fieldset.legend-above { 
  margin-top: 2.8em;
  padding-top: 1.6em;
  border-top: 1px solid #e0e0e0 !important;
}
.card fieldset.legend-above .legend-title {
  margin-top: -3em;
}

/**** Buttons ****/
.btn-lg { font-size: 1.125rem; line-height: 1.3125rem; padding: 0.7rem 1.4rem; outline: none; }
.btn-lg:focus,.btn-lg:active { box-shadow: none !important; }
.btn-info { background: #5AC0DF; border: 1px solid #46B7DA; }
.btn-success { background: #27c24c; border: 1px solid #4cae4c; }
.btn-danger{   border: 1px solid #d33e39; background: #d9534e; }

.btn-primary {  border: 1px solid #347ebd;  background: #418aca; }
.btn-primary:hover { background-color: #0E5797; }
.btn-primary.on { background-color: #d9534e; border-color: #d33e39; cursor: default !important; }

.btn-info.disabled, .btn-info:disabled { color: #F3F3F3; }

/**** Switch ****/
.switch {
  font-size: 1rem;
  position: relative;
}
.switch input {
  position: absolute;
  height: 1px;
  width: 1px;
  background: none;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  padding: 0;
}
.switch input + label {
  position: relative;
  min-width: calc(calc(2.375rem * .8) * 2);
  border-radius: calc(2.375rem * .8);
  height: calc(2.375rem * .8);
  line-height: calc(2.375rem * .8);
  display: inline-block;
  cursor: pointer;
  outline: none;
  user-select: none;
  vertical-align: middle;
  text-indent: calc(calc(calc(2.375rem * .8) * 2) + .5rem);
  color: #8B8C93;
  margin-bottom: 0;
}
.switch input + label::before,
.switch input + label::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(calc(2.375rem * .8) * 2);
  bottom: 0;
  display: block;
}
.switch input + label::before {
  right: 0;
  background-color: #dee2e6;
  border-radius: calc(2.375rem * .8);
  transition: 0.2s all;
}
.switch input + label::after {
  top: 2px;
  left: 2px;
  width: calc(calc(2.375rem * .8) - calc(2px * 2));
  height: calc(calc(2.375rem * .8) - calc(2px * 2));
  border-radius: 50%;
  background-color: white;
  transition: 0.2s all;
}
.switch input:checked + label::before {
  background-color: #27C24C;
}
.switch input:checked + label::after {
  margin-left: calc(2.375rem * .8);
}
.switch input:focus + label::before {
  outline: none;
  /*box-shadow: 0 0 0 0.2rem rgba(0, 136, 221, 0.25);*/
}
.switch input:disabled + label {
  color: #868e96;
  cursor: not-allowed;
}
.switch input:disabled + label::before {
  background-color: #e9ecef;
}
.switch.switch-sm {
  font-size: 0.875rem;
}
.switch.switch-sm input + label {
  min-width: calc(1.2245rem * 2);
  height: calc(1.9375rem * .62);
  line-height: calc(1.9375rem * .62);
  text-indent: 2.9025rem;
}
.switch.switch-sm input + label::before {
  width:2.4025rem;
}
.switch.switch-sm input + label::after {
  width: calc(1.20125rem - 4px);
  height: calc(1.20125rem  - 4px);
}
.switch.switch-sm input:checked + label::after {
  margin-left: calc(1.9375rem * .62);
}
.switch.switch-lg {
  font-size: 1.25rem;
}
.switch.switch-lg input + label {
  min-width: calc(calc(3rem * .8) * 2);
  height: calc(3rem * .8);
  line-height: calc(3rem * .8);
  text-indent: calc(calc(calc(3rem * .8) * 2) + .5rem);
}
.switch.switch-lg input + label::before {
  width: calc(calc(3rem * .8) * 2);
}
.switch.switch-lg input + label::after {
  width: calc(calc(3rem * .8) - calc(2px * 2));
  height: calc(calc(3rem * .8) - calc(2px * 2));
}
.switch.switch-lg input:checked + label::after {
  margin-left: calc(3rem * .8);
}
.switch + .switch {
  margin-left: 1rem;
}
.form-row .switch { display: inline-block; margin-top: 0.5rem;}


/**** Tooltip ****/
.tooltip-inner { max-width: 390px; background: #FFF; color:#6a747c; font-size: 0.575rem; text-align: left;
    border: 1px solid #cccccc; box-shadow: 0px 2px 3px rgba(0,0,0,0.11); padding: 0.4rem 0.8rem;
}
.bs-tooltip-right .arrow{
        border-width: .4rem .4rem .4rem 0;
        border-color: transparent;
        border-right-color: #cccccc;
        border-style: solid;
}
    .bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
            border-right-color: #FFF;
            top:-0.4rem;
            right: -0.45rem;
            
    }
.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] {
  padding: 0.4rem 0;
}

  .bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow {
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.4rem 0.4rem 0 0.4rem;
    border-color: #ccc transparent transparent transparent;
    
  }

    .bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
      top: -0.5rem;
      left: -0.4rem;
      border-width: 0.4rem 0.4rem 0;
      border-top-color: #FFF;
    }    
    
/**** Form ****/
label.col-form-label { font-weight: bold; }
.custom-select.is-invalid, .form-control.is-invalid, .was-validated .custom-select:invalid, .was-validated .form-control:invalid{
    border-color: #A94441;
    color: #A94441;
}
.custom-file-label {
  overflow: hidden;
  white-space: nowrap;
}
.custom-file-label::after{
    border: 1px solid #347ebd;
    background: #418aca;
    color: #FFF;
    cursor: pointer;
}  
  .custom-file-label::after:hover{
    background: #0E5797;
  }
  table .custom-control label { display: inline; cursor: pointer; }
  .custom-control.custom-checkbox label:before ,.custom-control.custom-checkbox label:after {
    width: 1.16rem; height: 1.16rem;
    border-radius: 0.15rem;
  }
  .custom-control.custom-checkbox label:after {
    width: 1.4rem;
    height: 1.4rem;
    left: -1.6rem;
    top: 0.1rem; 
  }
  .custom-control.custom-checkbox label:before {   background: transparent;
     border: 1px solid #CCC;
    box-shadow: none !important;
    }
  .custom-control-input:checked~.custom-control-label::before {
    background: transparent !important; border: 1px solid #EEA235; color: #EEA235;
  }
  .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23EEA235' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
  }
  .actions-row { margin-top: 1rem;}
.custom-select.inline {
  border: none;
  box-shadow: none !important;
  background: none;
  cursor: pointer;
}
.custom-select.inline:hover{
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
  background-size: 8px 10px;
}

/*** Typography ***/
h1,h2,h3,h4,h5 {
    color: #84868D;
    font-weight: normal;
}
h2{
    font-size: 32px;
}
    h2.page-title {
        padding-left: 30px;
        font-weight: 500;
        margin: 7px 0 20px;
    }

/*** Helpers ***/
.help-i {
    height: 20px;
    width: 20px;
    line-height: 19px;
    display: inline-block;
    border-radius: 100%;
    border: 1px solid #CCC;
    position: relative;
    cursor: pointer;
    margin-left: 1rem;
    vertical-align: middle;
    color: #CCC;
    text-align: center;
}
    .help-i:hover { background: #CCC; color: #FFF;}
.col-form-label    .help-i { margin-left: 0; }

#sip_status { color: #6FBA62; font-weight: bold; font-size: 18px; margin-left: 10px; }
#sip_status i { display: inline-block; text-align: center; width: 24px; height: 24px; line-height: 24px;
color: #FFF; font-size: 12px; background: #6FBA62; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; }
#sip_status.offline {
  color:#CCC;
}
#sip_status.offline i{
  background: #CCC;
  font-size: 16px;
  color: #AAA;
}
#sip_status.error {
  color:#D70000;
}
#sip_status.error i{
  background: #D70000;
  font-size: 16px;
  color: #FFF;
}

/*** Layout ***/
body {
    font-family: 'Raleway', sans-serif;
    background: #F9F9F9;
    font-size: 16px;
    line-height: 1.375;
    color: #878A92;
}
#sidebar {
    min-height: 100vh;
    background: #2b2f3e;
    width: 240px;
    float: left;
    z-index: 9999;
}
    #sidebar .logo {
        display: inline-block;
        margin: 20px 20px 26px 34px;
        height: 34px;
        width: auto;
    }
    #sidebar .nav a  i{
        text-align: left ;
        width: 1.8em;
        display: inline-block;
        vertical-align: middle;
    }
nav.navbar {
    border-bottom: 1px solid #ededef;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.11);
    z-index: 9999;
}
  #lngDropdown .icon-language { font-size: 22px; padding-left: 4px;}
  #lngDropdown span { vertical-align: text-bottom; }
  #page { margin-left: 240px; min-height: 100vh; position: relative; overflow: hidden; }
#content {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    padding: 26px;
}

/*** Pages ***/
/**** Login ****/
.login #page{

  margin-left: 0;
}

.login  #page {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
  /* background-color: #f5f5f5; */
  text-align: center;
}

.login  #content{ width: 400px;   max-width: 90%; overflow-y: visible;}

/*** Widgets ***/
/**** Datetimepicer ****/
.time {
  max-width: 160px;
}
  .time .input-group-prepend{
    margin-right: 0;
  }
  .time.disabled .input-group-prepend{
    background: #e9ecef;
  }
  .time .input-group-text {
    background: transparent;
    border-right: none  ;
    padding-right:  0; 
    border-color:#ced4da;
    color: #85868d;
  }
  .time input {
    border-left: none;
    border-radius: 0 4px 4px 0 !important ;
    outline: noen !important;
    box-shadow: none !important;
    border-color: #ced4da !important;
  }
.bootstrap-datetimepicker-widget.dropdown-menu{
  border: 1px solid #cccccc;
  background: #ffffff;
  box-shadow: 0px 2px 3px rgba(0,0,0,0.11);
  width: 9em;
  min-width: auto;
  color: #6a747c;
  padding: 10px;
  margin-top: 8px;
  margin-left: -29px;
}
  .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before{
    left: 14px;
  }
  .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after{
    left: 15px;
  }

  .bootstrap-datetimepicker-widget table td span, .bootstrap-datetimepicker-widget table td i{
    width: 10px;
    height: 10px;
  }
  .bootstrap-datetimepicker-widget table td, .bootstrap-datetimepicker-widget table th{
    padding: 0.2em;
    height: 30px;
    line-height: 30px;
  }

  .bootstrap-datetimepicker-widget .timepicker-hour, .bootstrap-datetimepicker-widget .timepicker-minute, .bootstrap-datetimepicker-widget .timepicker-second{
    border-radius: 4px;
    width: 36px !important;
    height: 32px;
    line-height: 30px;
    border: 1px solid #cccccc;
    background: #ffffff;
    font-size: 18px !important; 
    font-weight: normal;
  }
  .bootstrap-datetimepicker-widget table td.separator{
    font-weight: bold;
    font-size: 20px;
    width: 10px;
  }
  .bootstrap-datetimepicker-widget .timepicker-picker table tr:first-child td,.bootstrap-datetimepicker-widget .timepicker-picker table tr:last-child td{
    height: 10px;
    line-height: 10px;
    padding: 0.1em;

  }

  .bootstrap-datetimepicker-widget a[data-action] {
    padding: 0;
  }  
  .bootstrap-datetimepicker-widget table td i{
    position: relative;
    border-radius: 0;
  }
    .bootstrap-datetimepicker-widget table td i:hover{
      background: transparent;
    }  
  .bootstrap-datetimepicker-widget .arrow-up,.bootstrap-datetimepicker-widget .arrow-down{
    display: block;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7px 7px 7px;
    border-color: transparent transparent #f5f5f5 
  }
    .bootstrap-datetimepicker-widget .arrow-up:before{
      content: "";
      display: block;
      position: absolute;
      left: -9px;
      bottom: -8px;
      z-index: -1;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 9px 9px 9px;
      border-color: transparent transparent #cccccc;     
    }

  .bootstrap-datetimepicker-widget .arrow-up:hover{
    border-color: transparent transparent #fab252;
  }
    .bootstrap-datetimepicker-widget .arrow-up:hover:before{
      border-color:transparent transparent #eea235;
  }

  .bootstrap-datetimepicker-widget .arrow-down{
    border-width: 7px 7px 0 7px;
    border-color: #f5f5f5 transparent transparent
  }
    .bootstrap-datetimepicker-widget .arrow-down:before{
      content: "";
      display: block;
      position: absolute;
      left: -9px;
      bottom: -1px;
      z-index: -1;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 9px 9px 0 9px;
      border-color:  #cccccc transparent transparent;     
    }

  .bootstrap-datetimepicker-widget .arrow-down:hover{
    border-color:  #fab252 transparent transparent;
  }
    .bootstrap-datetimepicker-widget .arrow-down:hover:before{
      border-color: #eea235 transparent transparent;
  }  
  #alert-container { 
    position: absolute;
    padding: 0 40px 0 0;
    width: 100%;
    z-index: 99;
  }
  #alert-container .alert{ 
    margin-bottom: 4px;
  }
/*** Responsive ***/
@media only screen and (max-width:768px) {
  #sidebar {
    position: fixed;
    left: -240px
  }
  #sidebar.collapse{
    left: -240px;
  }
  #page {
    margin-left: 0;
  }

  #sidebar.show{
    left:0;
  }
  #alert-container{
    padding-left: 8px;
    padding-right: 8px;
  }
}