/*
 * Main theme for all projects
 * -------------------------
 */

@import url('https://fonts.googleapis.com/css?family=Monda');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,500,600,500i');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i');
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nunito:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap');

@font-face {
    font-family: 'VarelaRound';
   /* src: url('../fonts/VarelaRound-Regular.ttf') format('truetype');*/
    src:url('../fonts/VarelaRound.ttf');
}
.new_shadow {
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  position: relative;
  background: #ffffff !important;
  z-index: 1;
}
.bod_left_light_gray {
  border-left: 1px solid #e5e2e2;
}
.coustom_popup_hover {
  display: none;
  background: #fff;
  position: absolute;
  z-index: 1;
  min-width: 200px;
  padding: 8px;
  margin: 5px;
  border-top: 5px solid #7a92a3 !important;
  box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
  top: -3px;
  left: 0px;
  font-size: 10px !important;
}

.coustom_popup:hover > .coustom_popup_hover {
  display: block;
  color: black;
  width: 264px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}
.hide1{
    display:none;
}
.btn.new_btn_black {
  background: #676767;
  color: white;
}
.width_15{
    width:15%;
}
.width_21 {
  width: 21%;
}
.width_30px {
  width: 30px !important;
}
.d_flex_al_center{
    display:flex;
    align-items:center !important;
}
.btn_gary2 {
  border: none !important;
  background: #888888;
  color: white;
}

  .btn_gary2:hover {
    background: var(--btn-primary-hover);
    border: #2b303b 1px solid;
    color: #fff;
  }

.alert {
  border-radius: 3px;
  font-size: 13px;
}
.align_i_center {
  align-items: center;
}

.smallevent_icon_img {
  width: 30px;
  margin-right: 5px;
  height: 30px;
}
.alert-success {
  border-color: #008d4c;
}

.alert-success {
  color: #155724 !important;
  background-color: #d4edda !important;
  border-color: #c3e6cb !important;
}
#safety_score_multi_ddl .multiselect-dropdown .dropdown-btn {
  display: inline-block;
  border: 1px solid #adadad;
  width: 100%;
  padding: 6px 12px;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 1.52857143;
  text-align: left;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border-radius: 4px;
  background: white !important;
}

  #safety_score_multi_ddl .multiselect-dropdown .dropdown-btn .selected-item-container .selected-item {
    border: 1px solid #337ab7;
    margin-right: 4px;
    background: #337ab7;
    padding: 0 5px;
    color: #fff;
    border-radius: 2px;
    float: left;
    max-width: 170px;
  }

  #safety_score_multi_ddl .multiselect-dropdown .dropdown-btn .dropdown-multiselect__caret:before {
    position: relative;
    right: -9px;
    top: 48%;
    color: #999;
    margin-top: 4px;
    border-style: solid;
    border-width: 6px 5px 0 5px !important;
    border-color: #999999 transparent;
    content: "";
  }


#safety_score_multi_ddl .multiselect-dropdown .dropdown-btn {
  display: inline-block;
  width: 100%;
  padding: 6px 12px;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 1.52857143;
  text-align: left;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  font-size: 12px !important;
  border-radius: 3px !important;
  z-index: 0 !important;
  box-shadow: none !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  transition-duration: .4s;
  color: #6f6f6f;
  height: 33px;
}

.alert > p, .alert > ul {
  margin-bottom: 0;
}
.fullscreen {
    z-index: 9999;
    width: 100%;
    height: 100% !important;
    height: 100% !important;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
}
.clear-filter {
  float: right;
  font-size: 1.1rem;
  margin-right: 10px;
  cursor: pointer;
  color: #535c6e;
}
  .clear-filter i {
    float: left !important;
    padding-right: 4px;
    font-size: 13px;
    color: #eb8181 !important;
  }
#video_header_multiselectdropdown .multiselect-dropdown .dropdown-btn .selected-item-container .selected-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 40px !important;
  white-space: nowrap;
  display: inline-block;
}

#video_header_multiselectdropdown .multiselect-dropdown .dropdown-btn .selected-item-container .selected-item {
  border: 1px solid #337ab7;
  margin-left: -7px;
  background: #337ab7;
  padding: 0 5px;
  color: #fff;
  border-radius: 2px;
  float: left;
  min-width: 60px !important;
  position: relative !important;
  max-width: 60% !important;
  height: 14px !important;
  margin: 0px;
  font-size: 10px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

  #video_header_multiselectdropdown .multiselect-dropdown .dropdown-btn .selected-item-container .selected-item a {
    text-decoration: none;
    position: absolute !important;
    right: 2px;
    top: 0px;
  }

#video_header_multiselectdropdown .multiselect-dropdown {
  position: relative;
  width: 100%;
  font-size: inherit;
  font-family: inherit;
  background: white;
}

#video_header_multiselectdropdown .multiselect-dropdown .dropdown-btn .dropdown-multiselect__caret {
  line-height: 16px;
  display: block;
  position: absolute;
  box-sizing: border-box;
  width: 40px;
  height: 30px;
  right: 1px;
  top: 0;
  padding: 4px 8px;
  margin: 0;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform .2s ease;
}

  #video_header_multiselectdropdown .multiselect-dropdown .dropdown-btn {
    display: inline-block;
    border: 1px solid #adadad;
    width: 100%;
    padding: 6px 12px;
    margin-bottom: 0;
    font-weight: 400;
    line-height: 1.52857143;
    text-align: left;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border-radius: 4px;
    height: 30px;
    padding-right: 0px !important;
    font-size: 10px !important;
  }

#video_header_multiselectdropdown .multiselect-dropdown .dropdown-btn .dropdown-multiselect__caret:before {
  position: relative;
  right: -8px;
  top: 44%;
  color: #999;
  margin-top: 4px;
  border-style: solid;
  border-width: 6px 5px 0 5px !important;
  border-color: #999999 transparent;
  content: "";
}

#video_header_multiselectdropdown .multiselect-item-checkbox input[type=checkbox] + div:after {
  background-color: transparent;
  top: 49% !important;
  left: 3.2px !important;
  width: 5px !important;
  height: 3px !important;
  margin-top: -3px !important;
  border-style: solid;
  border-color: #fff;
  border-width: 0 0 2px 2px !important;
  border-image: none;
  color: white;
}

#video_header_multiselectdropdown .multiselect-item-checkbox input[type=checkbox] + div:before {
  box-sizing: content-box;
  content: "";
  color: #337ab7;
  position: absolute;
  top: 65%;
  left: 0;
  width: 14px;
  height: 14px;
  margin-top: -9px;
  border: 2px solid #337ab7;
  text-align: center;
  transition: all .4s ease;
}

#video_header_multiselectdropdown .multiselect-dropdown {
  position: relative;
  width: 100%;
  font-size: inherit;
  font-family: inherit;
  background: white;
  height: 22px !important;
  border-radius: 3px !IMPORTANT;
}

#admin_multiselectdropdown .multiselect-dropdown .dropdown-btn .selected-item-container .selected-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 118px !important;
  white-space: nowrap;
  display: inline-block;
}

#fleet .multiselect-dropdown .dropdown-btn .selected-item-container .selected-item {
  border: 1px solid #337ab7;
  margin-left: -7px;
  background: #337ab7;
  padding: 0 5px;
  color: #fff;
  border-radius: 2px;
  float: left;
  min-width: 140px !important;
  position: relative !important;
  max-width: 153px !important;
  height: 19px !important;
  margin-top: -2px;
}

#admin_multiselectdropdown .multiselect-dropdown .dropdown-btn .selected-item-container .selected-item a {
  text-decoration: none;
  position: absolute !important;
  right: 2px;
  top: 2px
}
#admin_multiselectdropdown .multiselect-dropdown {
  position: relative;
  width: 100%;
  font-size: inherit;
  font-family: inherit;
  background: white;
}

  #admin_multiselectdropdown .multiselect-dropdown .dropdown-btn .dropdown-multiselect__caret {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  #admin_multiselectdropdown .multiselect-dropdown .dropdown-btn {
    display: inline-block;
    border: 1px solid #adadad;
    width: 100%;
    padding: 5px;
    margin-bottom: 0;
    font-weight: 400;
    line-height: 1.52857143;
    text-align: left;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border-radius: 4px;
    height: 30px;
  }

    #admin_multiselectdropdown .multiselect-dropdown .dropdown-btn .dropdown-multiselect__caret:before {
      content: "";
      display: inline-block;
      border-style: solid;
      border-width: 6px 5px 0 5px !important;
      border-color: #999 transparent transparent transparent;
      transition: transform 0.3s ease;
      transform-origin: center;
    }
    #admin_multiselectdropdown
  .multiselect-dropdown
  .dropdown-btn
  .dropdown-multiselect--active
  .dropdown-multiselect__caret:before {
  transform: rotate(180deg);
}

#admin_multiselectdropdown .multiselect-item-checkbox input[type=checkbox] + div:after {
  background-color: transparent;
  top: 49% !important;
  left: 3.2px !important;
  width: 5px !important;
  height: 3px !important;
  margin-top: -3px !important;
  border-style: solid;
  border-color: #fff;
  border-width: 0 0 2px 2px !important;
  border-image: none;
  color: white;
}

#admin_multiselectdropdown .multiselect-item-checkbox input[type=checkbox] + div:before {
  box-sizing: content-box;
  content: "";
  color: #337ab7;
  position: absolute;
  top: 65%;
  left: 0;
  width: 14px;
  height: 14px;
  margin-top: -9px;
  border: 2px solid #337ab7;
  text-align: center;
  transition: all .4s ease;
}

#fleet .multiselect-dropdown .dropdown-btn .selected-item-container .selected-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 127px !important;
  white-space: nowrap;
  display: inline-block;
}

#fleet .multiselect-dropdown .dropdown-btn .selected-item-container .selected-item {
  border: 1px solid #337ab7;
  margin-left: -7px;
  background: #337ab7;
  padding: 0 5px;
  color: #fff;
  border-radius: 2px;
  float: left;
  min-width: 140px !important;
  position: relative !important;
  max-width: 153px !important;
  height: 19px !important;
  margin-top: -2px;
}

  #fleet .multiselect-dropdown .dropdown-btn .selected-item-container .selected-item a {
    text-decoration: none;
    position: absolute !important;
    right: 8px;
    top: 0px;
  }

#fleet .multiselect-dropdown {
  position: relative;
  width: 100%;
  font-size: inherit;
  font-family: inherit;
  background: white;
}

  #fleet .multiselect-dropdown .dropdown-btn .dropdown-multiselect__caret {
    line-height: 16px;
    display: block;
    position: absolute;
    box-sizing: border-box;
    width: 40px;
    height: 30px;
    right: 1px;
    top: 0;
    padding: 4px 8px;
    margin: 0;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: transform .2s ease;
  }

  #fleet .multiselect-dropdown .dropdown-btn {
    display: inline-block;
    border: 1px solid #adadad;
    width: 100%;
    padding: 6px 12px;
    margin-bottom: 0;
    font-weight: 400;
    line-height: 1.52857143;
    text-align: left;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border-radius: 4px;
    height: 30px;
  }

    #fleet .multiselect-dropdown .dropdown-btn .dropdown-multiselect__caret:before {
      position: relative;
      right: -8px;
      top: 65%;
      color: #999;
      margin-top: 4px;
      border-style: solid;
      border-width: 6px 5px 0 5px !important;
      border-color: #999999 transparent;
      content: "";
    }

#fleet .multiselect-item-checkbox input[type=checkbox] + div:after {
  background-color: transparent;
  top: 49% !important;
  left: 3.2px !important;
  width: 5px !important;
  height: 3px !important;
  margin-top: -3px !important;
  border-style: solid;
  border-color: #fff;
  border-width: 0 0 2px 2px !important;
  border-image: none;
  color: white;
}

#fleet .multiselect-item-checkbox input[type=checkbox] + div:before {
  box-sizing: content-box;
  content: "";
  color: #337ab7;
  position: absolute;
  top: 65%;
  left: 0;
  width: 14px;
  height: 14px;
  margin-top: -9px;
  border: 2px solid #337ab7;
  text-align: center;
  transition: all .4s ease;
}
.note_txt{
  color: #5f5f5f !important;
  background-color: #ffdb9d57;
  font-size: 12px;
  padding: 2px 5px;
  border: 1px solid transparent;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 0px;
}


#mobile_multiselectdropdown .multiselect-dropdown .dropdown-btn .selected-item-container .selected-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 76px !important;
  white-space: nowrap;
  display: inline-block;
}

#mobile_multiselectdropdown .multiselect-dropdown .dropdown-btn .selected-item-container .selected-item {
  border: 1px solid #337ab7;
  margin-left: -7px;
  background: #337ab7;
  padding: 0 5px;
  color: #fff;
  border-radius: 2px;
  float: left;
  min-width: 107px !important;
  position: relative !important;
  max-width: 107px !important;
  height: 19px !important;
  margin-top: -2px;
}

#mobile_multiselectdropdown .multiselect-dropdown .dropdown-btn .selected-item-container .selected-item a {
  text-decoration: none;
  position: absolute !important;
  right: 8px;
  top: 0px;
}

#mobile_multiselectdropdown .multiselect-dropdown {
  position: relative;
  width: 100%;
  font-size: inherit;
  font-family: inherit;
  background: white;
}

#mobile_multiselectdropdown .multiselect-dropdown .dropdown-btn .dropdown-multiselect__caret {
  line-height: 16px;
  display: block;
  position: absolute;
  box-sizing: border-box;
  width: 40px;
  height: 30px;
  right: 1px;
  top: 0;
  padding: 4px 8px;
  margin: 0;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform .2s ease;
}

  #mobile_multiselectdropdown .multiselect-dropdown .dropdown-btn {
    display: inline-block;
    border: 1px solid #adadad;
    width: 100%;
    padding: 6px 12px;
    margin-bottom: 0;
    font-weight: 400;
    line-height: 1.52857143;
    text-align: left;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border-radius: 4px;
    height: 30px;
    min-width: 144px;
  }

    #mobile_multiselectdropdown .multiselect-dropdown .dropdown-btn .dropdown-multiselect__caret:before {
      position: relative;
      right: 10px;
      top: -12px;
      color: #999;
      margin-top: 4px;
      border-style: solid;
      border-width: 6px 5px 0 5px !important;
      border-color: #999999 transparent;
      content: "";
    }

#mobile_multiselectdropdown .dropdown-list {
  position: absolute;
  padding-top: 6px;
  width: 100%;
  z-index: 9999;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  margin-top: 10px;
  box-shadow: 0 1px 5px #959595;
  min-width: 300px;
  max-height: 200px;
}
.bg_alert {
  background: #dd5b1917 !important;
  padding: 2px 10px;
  border-radius: 2px;
  font-size: 11px;
}
.bg_warning {
  background: #ff00001c !important;
  padding: 5px 10px;
  border-radius: 2px;
}
#webfleet_streaming .lb-head-single .fa-times,
#webfleet_navmenu .lb-head-single .fa-times,
.webfleet_dashboard .lb-head-single .fa-times,
.new_webfleet_events .lb-head-single .fa-times,
.webfleet_settings .lb-head-single .fa-times,
.videos_main .lb-head-single .fa-times {
  color: var(--btn-primary) !important;
}
html,
body {
    height: 100%;
}

body {
    font-family: 'VarelaRound', sans-serif !important;
    font-weight: 400;
    font-size:14px;
    color: #535c6e;
    letter-spacing: 0.2px;
    overflow-x: hidden;
    overflow-y: auto;
    text-rendering: optimizeLegibility;
    text-rendering: geometricPrecision;
    font-smooth: always;
    font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*::selection {
    background: var(--theme-color);
}

::-moz-selection {
    background: var(--theme-color);
}*/
/* width */
::-webkit-scrollbar {
    width: 7px;
    height: 9px;
}
/* Track */
::-webkit-scrollbar-track {
    /*-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.1);*/
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(35, 35, 35, 0.3);
    border-radius: 12px;
}
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        opacity: 0.6;
    }

.main-sidebar ::-webkit-scrollbar-thumb {
    /*background: rgb(255 60 60 / 65%) !important;*/
    background: rgb(157 157 157 / 65%) !important;
    border-radius: 12px !important;
}
.bod_left_new_h5 {
  border-left: 3px solid var(--heading-color);
  letter-spacing: 0.4px;
  color: #414141;
  padding: 0 6px;
  margin: 5px 0px 10px 0px;
}
.lb-head h5, .lb-head-single h5 {
  color: var(--btn-primary) !important;
  /* color: #0cc652; */
  text-transform: capitalize;
  float: left;
  margin: 0;
  letter-spacing: 0.4px;
  font-weight: 400;
  border: none !important;
}
.btn-refresh {
  color: #fff !important;
  transition-duration: 0.4s;
  border: none !important;
  background: var(--btn-primary);
  padding: 7px 16px;
  font-size: 1.2rem;
  line-height: initial;
  letter-spacing: 0.3px;
}
.inner_icon_img1 {
  display: inline-block;
}

  .inner_icon_img1 img {
    width: 60px;
    height: 70px;
    border-radius: 100%;
    cursor: pointer;
    border-radius: 50%;
    padding: 4px;
    display: inline-block;
  }

  .inner_icon_img1:hover {
    background: rgb(241, 242, 242);
    width: 80px;
    height: 80px;
    text-align: center;
    border: 1px solid #ddd;
    cursor: pointer;
    border-radius: 50%;
    padding: 4px;
    display: inline-block;
  }

.coustom_modal_dialog_new {
  width: 25%;
}
.mt-07 {
  margin-top: 7px !important;
}
.dflex_align_center {
  display: flex !important;
  align-items: center !important;
}

.small_btn {
  padding: 3px 10px !important;
  font-size: 9px !important;
}
.btn_lite_gray_boder {
  background: white;
  color: #7c7c7c !important;
  border: 1px solid #7c7c7c;
  font-size: 12px !important;
  padding: 3px 13px !important;
}
  .btn_lite_gray_boder:hover {
    cursor: pointer;
    border: 1px solid var(--btn-primary);
    background: var(--btn-primary);
    color: #fff !important;
  }


.btn_lite_black {
  background: #7c7c7c;
  color: white !important;
  border: 1px solid #7c7c7c;
}
.videos_txt_ellipse {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 98px !important;
  white-space: nowrap;
  display: inline-block;
}

.current_vehicle_no {
  border: 1px solid #e1e1e1;
  padding: 5px 10px;
  border-radius: 4px;
  background: #edfffb;
}
.device_storage_h5 {
  background: #f4f4f4;
  padding: 6px 9px;
  border-left: 3px solid var(--btn-primary);
}
.sidebar-mini.sidebar-collapse .main-sidebar ::-webkit-scrollbar-thumb {
    /* background: rgb(255 60 60 / 65%) !important;*/
    background: rgb(157 157 157 / 65%) !important;
    border-radius: 12px !important;
}

/*.sidebar-mini.sidebar-collapse .main-sidebar .sidebar {
    overflow-y: overlay !important;
}*/

/*.sidebar:hover .show_more {
    display: block;
    background: #146ddf;
}*/


.form-check-input {
  width: 1em;
  height: 1em;
  margin-top: 0px;
  vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, .25);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}
  .form-check-input[type=checkbox] {
    border-radius: 0.25em;
    width: 15px;
    height: 14px;
  }



.body_color {
  color:#535c6e  !important;
}
.color_disable {
  color: #8e8e8e;
}
.shadow {
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  position: relative;
  background: #F2F2F2 !important;
  z-index: 1;
}
.current_vehicle_single {
  border: 1px solid #e1e1e1;
  padding: 8px 10px;
  border-radius: 4px;
  margin-top: 3px;
  background: #edfffb;
  min-width: 110px;
  text-align: left;
}

.current_vehicle_multi {
  border: 1px solid #e1e1e1;
  padding: 8px 10px;
  border-radius: 4px;
  margin-top: 3px;
  background: #f3edff;
}

.sidebar-footer .show_more a:hover {
    background: #146ddf !important;
}
.show_more {
    background-color: #3f4044;
    position: absolute;
    z-index: 10;
    bottom: 45px;
    width: 100%;
    transition: width 0.3s ease-in-out;
    text-align: center;
    padding: 5px;
}
.float_none {
  float: none !important;
}
.color_white {
    color: white !important;
}
.color_red {
    color: red !important;
}
.color_active {
  color: #0cc652 !important;
}
.color_green {
  color: #41d841 !important
}
.color_orange {
    color: green !important;
}
.channel_txt {
    color: #fff;
}
.gm-bundled-control div {
    display: none !important;
}
.d_flex{
    display:flex;
}
.display_block{
    display:block !important;
}

.pos_ab_right_10 {
  position: absolute;
  right: 10px !important;
}
.small_no_video_txt {
    position: absolute;
    /* bottom: 21%; */
    left: 48%;
    color: white;
    /* top: 40%; */
    transform: translate(-49%, 184%);
}


#playback_tacking_popup .vehiclerequireddata2,
#playback_tacking_popup .vehiclerequireddata {
    position: absolute !important;
    min-width: 200px !important;
    padding: 1.5px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    left: 1% !important;
    bottom: 1% !important;
    margin-bottom: 0 !important;
}

    #playback_tacking_popup .vehiclerequireddata2 .pop-live,
    #playback_tacking_popup .vehiclerequireddata .pop-live {
        padding: 10px 5px !important;
        background: #2f3b53 !important;
        color: white !important;
        width: 200px !important;
    }


.tab-alert h4, .tab-alert .color_white,
.tab-alert .channelCount, .tab-alert .channel_txt {
    font-family: 'VarelaRound', sans-serif;
}
.all_video_channel .channel_name {
    margin-left: 15px !important;
    position: absolute;
    z-index: 1;
    color: #fff !IMPORTANT;
    font-weight: 500;
    border: 1px solid;
    line-height: 1.5;
    padding: 2px 10px 0px;
    font-size: 10px !IMPORTANT;
    top: 57%;
    left: 38%;
    font-family: 'VarelaRound', sans-serif !important;
}
.all_video_channel .tab-alert.no-videos:before {
    content: none !important;
}
.no_video {
    background: #383a3b;
    color: white;
}
.bg_black_vd {
    background: #323232;
    color: white;
}
.summary_map_search .all_checkbox .autocomplete input {
    width: 202px !IMPORTANT;
}
.content {
    min-height: 250px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

a {
    cursor: pointer;
    color: inherit;
}

    a:hover,
    a:active,
    a:focus {
        outline: none;
        text-decoration: none;
        color: #72afd2;
    }

p {
    margin: 0 0 5px;
    font-family: 'VarelaRound', sans-serif !important;
    font-size: 13px;
}

svg {
    overflow: visible !important
}

.cursor-pointer {
    cursor: pointer;
}

.disabled {
    cursor: not-allowed
}

.display_none, .hide {
    display: none !important;
}

.bold-text {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.4px !important;
}
.bg_lite_black {
  background: #787878;
}
.color-white {
  color: white !important;
}

.boder_frame {
  border: 1px solid #d6d6d6;
}

label {
  font-weight: normal;
  font-size: 12px !important;
  color: #4f5155 !important;
  margin-bottom: 3px;
  /*text-transform: capitalize;*/
}
.icon-color-w {
    color: var(--icon-color) !important;
}
.textHeadertheme {
    color: var(--btn-primary) !important;
}
.fa-add {
    padding-left: 2px;
    font-size: 10px;
}

.tripColor {
    background-color: #0cc652;
}

.idlingColor {
    background-color: #3d4f67;
}

.text-warning {
    color: #e38908 !important;
}

.text-theme {
    color: var(--theme-color) !important;
}

.text-danger {
    color: red !important;
}

.text-success {
    color: #0cc652 !important;
  
}


.pagination-custom {
    bottom: 0;
    padding: 0px 10px;
    display: flex;
    justify-content: center;
}

.filter-color {
    color: var(--icon-color);
}

.text-muted {
    color: #b3b4b6 !important;
    color: var(--icon-color);
}

.d-block {
    display: block !important;
}
.d-inline-block {
    display: inline-block !important;
}
.d-flex {
    display: flex !important;
}

.tooltip {
    letter-spacing: 0.2px;
    font-family: 'VarelaRound';
    z-index: 3500;
    line-height: initial;
}

.pre-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.1);
    cursor: not-allowed;
}

.load-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 5px 8px;
    border-radius: 2px;
    font-size: 12px;
}

@keyframes ring-main {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes ring-main {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.ring-main {
    position: relative;
}

.ring-load .circle {
    position: absolute;
    width: 69px;
    height: 69px;
    border-radius: 50%;
    border: 3px solid;
    background: #fff;
    border-color: var(--theme-color) rgba(0, 0, 0, 0.06) var(--theme-color) rgba(0, 0, 0, 0.06);
    -webkit-animation: ring-main 1s linear infinite;
    animation: ring-main 1s linear infinite;
    padding:20px;
}

.ring-load img {
  position: relative;
  left: 19px !important;
  top: 13px !important;
  width: 29px !important;
}

.loading {
    text-align: center;
    font-size: 13px !important;
    letter-spacing: .3px
}

    .loading:after {
        content: ' .';
        animation: loading-dots 1s steps(5,end) infinite
    }

@keyframes loading-dots {
    0%,20% {
        color: rgba(0,0,0,0);
        text-shadow: .25em 0 0 rgba(0,0,0,0),.5em 0 0 rgba(0,0,0,0)
    }

    40% {
        color: #ffa500;
        text-shadow: .25em 0 0 rgba(0,0,0,0),.5em 0 0 rgba(0,0,0,0)
    }

    60% {
        text-shadow: .25em 0 0 blue,.5em 0 0 rgba(0,0,0,0)
    }

    80%,100% {
        text-shadow: .25em 0 0 red,.5em 0 0 white
    }
}

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

.modal_bod_left {
    border-left: 1px solid #d6d6d6 !important;
}
.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

    .no-gutters > [class*="col-"] {
        padding-right: 0;
        padding-left: 0;
    }
/*
 * Component: Main Header
 * ----------------------
 */


.main-header {
  position: relative;
  height: 50px;
  max-height: 100px;
  /*z-index: 1030;*/
  /*box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);*/
  box-shadow: 0 1px 1px rgba(0,0,0,.06);
/*  background: var(--main-header);*/
  background: #0c63d3;
}

    .main-header .navbar {
        -webkit-transition: margin-left 0.3s ease-in-out;
        -o-transition: margin-left 0.3s ease-in-out;
        transition: margin-left 0.3s ease-in-out;
        margin-bottom: 0;
        margin-left: 160px;
        border: none;
        min-height: 50px;
        border-radius: 0;
        z-index: 9999;
    }

    .main-header .navbar-custom-menu,
    .main-header .navbar-right {
        float: right;
    }

    .main-header .wrapmenu .status_menu,
    .main-header .wrapmenu .vehicle-status {
        background: rgba(0, 0, 0, 0.07);
        float: left;
        color: #f0f2f6;
        text-align: center;
        cursor: pointer;
        display: flex;
    }

        .main-header .wrapmenu .vehicle-status .filterTop {
            padding: 15px;
        }

    .main-header .wrapmenu .filterTop.emergency:hover {
        background: rgba(221, 75, 57, 0.15);
    }

    .main-header .wrapmenu .filterTop.online:hover {
        background: rgba(29, 207, 36, 0.15);
    }

    .main-header .wrapmenu .filterTop.offline:hover {
        background: rgba(71, 89, 102, 0.15);
    }

    .main-header .wrapmenu .filterTop.sleeping:hover {
        background: rgba(32, 124, 229, 0.15);
    }

    .main-header .wrapmenu .label {
        -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        color: #fff !important;
        letter-spacing: 0.3px;
        font-size: 11px;
        margin-top: 4px;
    }

    .main-header .wrapmenu :hover .status_menu {
        /*background: #f4eded;*/
        background: none;
        transition: 0.3s;
    }
   

    .main-header .wrapmenu :hover span {
        /*color: #000*/
        color: #fff;
    }

    .globalevent_brick :hover span {
        color: #000 !important;
    }
.globalevent_brick span {
    color: #000 !important;
}
    @media (max-width: 767px) {
        .main-header .navbar-right {
            float: none;
        }

        .navbar-collapse .main-header .navbar-right {
            margin: 7.5px -15px;
        }

        .main-header .navbar-right > li {
            color: inherit;
            border: 0;
        }
    }

    .main-header .sidebar-toggle {
    padding: 15px 15px;
    line-height: 50px;
    color: #ffffff;
}

    /*.main-header .sidebar-toggle:before {
        content: "\f0c9";
    }*/

    .main-header .sidebar-toggle:hover {
        color: #fff;
    }

    .main-header .sidebar-toggle:focus,
    .main-header .sidebar-toggle:active {
        background: transparent;
    }

    .main-header .sidebar-toggle .icon-bar {
        display: none;
    }

.main-header .navbar .nav > li.user > a > .fa,
.main-header .navbar .nav > li.user > a > .glyphicon,
.main-header .navbar .nav > li.user > a > .ion {
    margin-right: 5px;
}

.main-header .navbar .nav > li > a > .label {
    position: absolute;
    top: 9px;
    right: 2px;
    text-align: center;
    font-size: 9.3px;
    padding: 3.5px;
}

@media (max-width: 767px) {
    .main-header {
        position: relative;
        z-index: 999;
    }

        .main-sidebar .logo,
        .main-header .navbar {
            width: 100%;
            float: none !important;
        }

        .main-header .navbar {
            margin: 0;
        }

        .main-header .navbar-custom-menu {
            float: right;
        }
}

.material-switch {
    top: -7px;
    position: relative;
}

    .material-switch > input[type="checkbox"] {
        display: none;
    }

    .material-switch > label {
        cursor: pointer;
        height: 0px;
        position: relative;
        width: 40px;
    }

        .material-switch > label::before {
            background: rgb(0, 0, 0);
            box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            content: '';
            height: 14px;
            margin-top: 2px;
            position: absolute;
            opacity: 0.3;
            transition: all 0.4s ease-in-out;
            width: 34px;
        }

        .material-switch > label::after {
            background: rgb(255, 255, 255);
            border-radius: 16px;
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
            content: '';
            left: -4px;
            position: absolute;
            transition: all 0.3s ease-in-out;
            width: 18px;
            height: 18px;
        }

    .material-switch > input[type="checkbox"]:checked + label::before {
        background: inherit;
        opacity: 0.5;
    }

    .material-switch > input[type="checkbox"]:checked + label::after {
        background: inherit;
        left: 20px;
    }

.checkbox {
    z-index: 0;
    position: relative;
    display: inline-block;
    color: rgba(0, 0, 0, 0.87);
    padding: 4px 0;
}

    /* Input */
    .checkbox > input {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        z-index: -1;
        position: absolute;
        left: -9.2px;
        top: -6.2px;
        display: block;
        margin: 0;
        border-radius: 50%;
        width: 35px;
        height: 35px;
        background-color: rgba(0, 0, 0, 0.6);
        box-shadow: none;
        outline: none;
        opacity: 0;
        transform: scale(1);
        pointer-events: none;
        transition: opacity 0.3s, transform 0.2s;
    }

    /* Span */
    .checkbox > span {
        cursor: pointer;
    }

        /* Box */
        .checkbox > span::before {
            content: "";
            display: inline-block;
            box-sizing: border-box;
            margin-right: 5px;
            border: solid 1px; /* Safari */
            border-color: rgba(0, 0, 0, 0.6);
            border-radius: 1px;
            width: 15px;
            height: 15px;
            vertical-align: top;
            transition: border-color 0.2s, background-color 0.2s;
        }

        /* Checkmark */
        .checkbox > span::after {
            content: "";
            display: block;
            position: absolute;
            top: 3.4px;
            left: 0;
            width: 9px !important;
            height: 5px !important;
            border: solid 2px transparent;
            border-right: none;
            border-top: none;
            transform: translate(3px, 4px) rotate(-45deg);
        }

    /* Checked, Indeterminate */
    .checkbox > input:checked,
    .checkbox > input:indeterminate {
        background-color: var(--icon-color)!important;
       
    }

        .checkbox > input:checked + span::before,
        .checkbox > input:indeterminate + span::before {
            border-color: var(--theme-color);
            background-color: var(--theme-color);
        }

        .checkbox > input:checked + span::after,
        .checkbox > input:indeterminate + span::after {
            border-color: rgb(255, 255, 255);
        }

        .checkbox > input:indeterminate + span::after {
            border-left: none;
            transform: translate(4px, 3px);
        }

    /* Hover, Focus */
    .checkbox:hover > input {
        opacity: 0.04;
    }

    .checkbox > input:focus {
        opacity: 0.12;
    }

    .checkbox:hover > input:focus {
        opacity: 0.16;
    }

    /* Active */
    .checkbox > input:active {
        opacity: 1;
        transform: scale(0);
        transition: transform 0s, opacity 0s;
    }

        .checkbox > input:active + span::before {
            border-color: var(--theme-color);
        }

    .checkbox > input:checked:active + span::before {
        border-color: transparent;
        background-color: rgba(0, 0, 0, 0.6);
    }

    /* Disabled */
    .checkbox > input:disabled {
        opacity: 0;
    }

        .checkbox > input:disabled + span {
            color: rgba(0, 0, 0, 0.38);
            cursor: initial;
        }

            .checkbox > input:disabled + span::before {
                border-color: currentColor;
            }

    .checkbox > input:checked:disabled + span::before,
    .checkbox > input:indeterminate:disabled + span::before {
        border-color: transparent;
        background-color: currentColor;
    }

.card {
    background: #FFF none repeat scroll 0% 0%;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
}
.boder_radiuus {
  border-radius: 4px !important;
}
.btn-dark {
  color: #212529 !important;
}
.nav_tab_active .active {
  color: #fff !important;
  transition-duration: 0.4s;
  border: none !important;
  background: var(--btn-primary);
}


.badge {
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    -webkit-border-radius: 0.125rem;
    border-radius: 3px;
    line-height: initial;
    color: #fff !important;
    display: initial;
}

.badge-warning {
    background-color: #ff8800 !important;
}

.badge-success {
    background-color: #0cc652 !important;
}

.badge-danger {
    background-color: red !important;
}

.badge-primary {
    background-color: dodgerblue !important;
}

.badge-charcol {
    background-color: #2f3a53 !important;
}

.badge-offline {
    background: #475966;
}

.badge-online {
    background: linear-gradient(60deg, #57be5c, #1dcf24);
}

.badge-parked {
    background: rgb(32,124,229);
}

.text-offline {
    color: #475966 !important;
}

.text-online {
    color: #57be5c !important;
}

.text-parked {
    color: #1e6dc7 !important;
}

.badge-default {
    background: #606366;
}

.border-danger {
    border-left: 10px solid red;
}

.border-success {
    border-left: 10px solid var(--theme-color);
}

.border-warning {
    border-left: 10px solid #ff8800;
}

.bord-bot, .b-bottom-solid {
    border-bottom: 1px solid #f2f2f2;
}

.b-bottom-dashed {
    border-bottom: 1px dashed #f2f2f2;
}


/*
 * Component: Button
 * -----------------
 */
.btn {
  -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 1px 1px 0 rgba(0, 0, 0, 0.06);
  /*box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 1px 1px 0 rgba(0, 0, 0, 0.06);*/
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 1px 0 rgb(184, 184, 184) !important;
  padding: 6.1px 16px;
  font-size: 12px;
  line-height: initial;
  letter-spacing: 0.3px;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  border-radius: 1.7rem;
}

.btn-small {
    padding: 3px 10px;
    font-size: 1.1rem;
}

.btn.btn-default-1 {
    box-shadow: none;
    border-radius: 3px;
    overflow: hidden;
   max-width: 171px;
    height: 32px;
    text-overflow: ellipsis;
    position:relative;
}


/*.btn.btn-default-1 {
    box-shadow: none;
    border-radius: 3px;
}*/
    .btn.uppercase {
    text-transform: uppercase;
}

.btn.btn-flat {
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-width: 1px;
}

.btn:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn:focus, .btn:active {
    outline: none !important;
    box-shadow: none !important;
}

.btn.btn-file {
    position: relative;
    overflow: hidden;
}

    .btn.btn-file > input[type='file'] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: right;
        opacity: 0;
        filter: alpha(opacity=0);
        outline: none;
        background: white;
        cursor: inherit;
        display: block;
    }

.btn-primary {
  background-color: #1367c7;
  border-color: #1261ba;
  color: white !important;
}

    .btn-primary:hover,
    .btn-primary:active,
    .btn-primary.hover {
        background-color: #1367c7;
    }
.btn-resendopt {
    width: 30% !important;
    background: none !important;
    border: none !important;
    color: var(--btn-primary) !important;
    position: absolute;
    right: 61px !important;
    font-weight: bold !important;
    font-size: 15px !important;
    box-shadow: none !important;
}
.btn-success {
    color: #fff !important;
    transition-duration: 0.4s;
    /*background-color: #0cc652;*/
    /*border: #0cc652 1px solid;*/
    border: none !important;
    background: var(--btn-primary);
}

    .btn-success:hover {
        /*background: #2b303b;*/
        background: var(--btn-primary-hover);
        /*border: #2b303b 1px solid;*/
        /*color: #fff;*/
        color: var(--btn-primary-hover-txtcolor);
    }

.btn-raised {
    margin-top: -6.2px;
}

.btn-success label {
    color: white !important;
}

    .btn-success label:hover, .btn-success:hover span {
        color: #0cc652 !important;
    }

.btn-info {
    background-color: #00c0ef;
    border-color: #00acd6;
}

    .btn-info:hover,
    .btn-info:active,
    .btn-info.hover {
        background-color: #00acd6;
    }

.btn-danger {
    color: #d73925;
    background-color: #f2f2f2;
    border-color: #d73925;
}

  .btn-danger:hover {
    background-color: #d73925;
    color: #ffffff !important
  }

    .btn-danger:hover,
    .btn-danger:active,
    .btn-danger.hover {
        background-color: #d73925;
    }

.btn-warning {
    background-color: #f39c12 !important;
    border-color: #f39c12;
    color: #ffffff !important
}

    .btn-warning:hover,
    .btn-warning:active,
    .btn-warning.hover {
        background-color: #f39c12;
    }

.btn-charcol {
    background-color: #fff;
    /*border-color: #585d68;*/
    /*color: #585d68 !important;*/
    color: var(--btn-secondary-txtcolor);
    background: var(--btn-secondary);
    border: none;
}

    .btn-charcol:focus,
    .btn-charcol:hover,
    .btn-charcol:active,
    .btn-charcol.hover {
        /*background: rgba(0, 0, 0, 0.02) !important;*/
        background: var(--btn-secondary-hover);
        color: var(--btn-secondary-hover-color);
        /*border: 1px solid rgba(0, 0, 0, 0.02) !important;*/
        /*color: #585d68;*/
    }

.btn-outline {
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
}

    .btn-outline:hover,
    .btn-outline:focus,
    .btn-outline:active {
        color: rgba(255, 255, 255, 0.7);
        border-color: rgba(255, 255, 255, 0.7);
    }

.btn-link {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn[class*='bg-']:hover {
    -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2);
}

.btn-app {
    border-radius: 3px;
    position: relative;
    padding: 15px 5px;
    margin: 0 0 10px 10px;
    min-width: 80px;
    height: 60px;
    text-align: center;
    color: #666;
    border: 1px solid #ddd;
    background-color: #f4f4f4;
    font-size: 12px;
}

    .btn-app > .fa,
    .btn-app > .glyphicon,
    .btn-app > .ion {
        font-size: 20px;
        display: block;
    }

    .btn-app:hover {
        background: #f4f4f4;
        color: #444;
        border-color: #aaa;
    }

    .btn-app:active,
    .btn-app:focus {
        -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    }

    .btn-app > .badge {
        position: absolute;
        top: -3px;
        right: -10px;
        font-size: 10px;
        font-weight: 400;
    }

/*
 * General: Miscellaneous
 * ----------------------
 */
.vertical-center {
    display: flex;
    align-items: center;
}

.horizon-center {
    display: flex;
    justify-content: center;
}

.overflow-hidden {
    overflow: hidden !important;
}

/*.overflow-scroll {
    overflow: scroll;
}*/
.overflow-scroll {
    overflow: hidden;
}

    .overflow-scroll:hover {
        overflow: scroll;
    }
.no_event {
    pointer-events: none;
}

.no_cursor {
    cursor: not-allowed !important;
}

.no-background {
    background: none;
}

.inline {
    display: inline;
}

.bg-success {
    background-color: var(--theme-color) !important;
}

.bg-gray {
    /*color: #000;*/
    background-color: #F2F2F2 !important;
}

.bg-white {
    background-color: #fff !important;
}

.bg-gray-light {
    background-color: #f7f7f7;
}
.bg-gray-charcoal-lite {
    background-color: #f6f6f6;
}

.bg-black {
    background-color: #111111 !important;
}

.bg-red,
.callout.callout-danger,
.alert-error,
.label-danger,
.modal-danger .modal-body {
    background-color: #dd4b39 !important;
}

.bg-yellow,
.callout.callout-warning,
.label-warning,
.modal-warning .modal-body {
    background-color: #f39c12 !important;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.bg-blue {
    background-color: #0073b7 !important;
}

.bg-light-blue,
.label-primary,
.modal-primary .modal-body {
    background-color: #1e90ff !important;
}



.bg-red-active,
.modal-danger .modal-header,
.modal-danger .modal-footer {
    background-color: #d33724 !important;
}

.bg-yellow-active,
.modal-warning .modal-header,
.modal-warning .modal-footer {
    background-color: #db8b0b !important;
}

.bg-aqua-active,
.modal-info .modal-header,
.modal-info .modal-footer {
    background-color: #00a7d0 !important;
}

.bg-blue-active {
    background-color: #005384 !important;
}

.bg-light-blue-active,
.modal-primary .modal-header,
.modal-primary .modal-footer {
    background-color: #357ca5 !important;
}

.bg-green-active,
.modal-success .modal-header,
.modal-success .modal-footer {
    background-color: #008d4c !important;
}

.bg-navy {
    background-color: #001f3f !important;
}

.bg-teal {
    background-color: #39cccc !important;
}

.bg-olive {
    background-color: #3d9970 !important;
}

.bg-lime {
    background-color: #01ff70 !important;
}

.bg-orange {
    background-color: #ff851b !important;
}

.bg-fuchsia {
    background-color: #f012be !important;
}

.bg-purple {
    background-color: #605ca8 !important;
}

.bg-maroon {
    background-color: #d81b60 !important;
}

.bg-gray-active {
    color: #000;
    background-color: #b5bbc8 !important;
}

.bg-black-active {
    background-color: #000000 !important;
}

.bg-navy-active {
    background-color: #001a35 !important;
}

.bg-teal-active {
    background-color: #30bbbb !important;
}

.bg-olive-active {
    background-color: #368763 !important;
}

.bg-lime-active {
    background-color: #00e765 !important;
}

.bg-orange-active {
    background-color: #ff7701 !important;
}

.bg-fuchsia-active {
    background-color: #db0ead !important;
}

.bg-purple-active {
    background-color: #555299 !important;
}

.bg-maroon-active {
    background-color: #ca195a !important;
}

[class^="bg-"].disabled {
    opacity: 0.65;
    filter: alpha(opacity=65);
}

.text-red {
    color: #dd4b39 !important;
}

.text-yellow {
    color: #f39c12 !important;
}

.text-aqua {
    color: #00c0ef !important;
}

.text-blue {
    color: #0073b7 !important;
}

.text-black {
    color: #111111 !important;
}

.text-light-blue {
    color: #3c8dbc !important;
}

.text-green {
    color: #00a65a !important;
}

.text-gray {
    color: #7d7d7d !important;
}

.text-navy {
    color: #001f3f !important;
}

.text-teal {
    color: #39cccc !important;
}

.text-olive {
    color: #3d9970 !important;
}

.text-lime {
    color: #01ff70 !important;
}

.text-orange {
    color: #ff851b !important;
}

.text-fuchsia {
    color: #f012be !important;
}

.text-purple {
    color: #605ca8 !important;
}

.text-maroon {
    color: #d81b60 !important;
}

.text-default {
    color: #606366
}

.text-white {
    color: #fff !important;
}

.break-work {
    overflow-wrap: break-word !important;
}
.visibility-h  {
    visibility: hidden !important;
}

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


.link-muted {
    color: #7a869d;
}

    .link-muted:hover,
    .link-muted:focus {
        color: #606c84;
    }

.link-black {
    color: #666;
}

    .link-black:hover,
    .link-black:focus {
        color: #999;
    }

    .ft-16{
        font-size:16px !important;
    }
.ft-11 {
    font-size: 11px !important;
}
.w-12 {
    width: 12px;
    text-align: center;
}

.w_200px {
    width: 200px !important;
   
}

.max_w_200px {
    max-width: 200px !important;
}


.w-30 {
    width: 30%;
}

.w-10 {
    width: 10%;
}

.w-100 {
    width: 100%;
}

.p-1 {
    padding: 10px !important;
}

.p-2 {
    padding: 15px !important;
}
.p-02 {
    padding: 2px !important;
}
.p-03 {
    padding: 3px !important;
}
.p-01 {
    padding: 1px !important;
}
.p-05 {
    padding: 5px !important;
}
.p-08 {
    padding: 8px !important;
}
.p-15 {
    padding: 15px !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pr-15 {
    padding-right: 15px !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}
.pb-04 {
  padding-bottom: 4px !important;
}
.pb-05 {
    padding-bottom: 5px !important;
}
.pl-05 {
    padding-left: 5px !important;
}
.pl-07 {
    padding-left: 7px !important;
}
.pl-08 {
    padding-left: 8px !important;
}
.pl-03 {
    padding-left: 3px !important;
}

.pl-10, .pl-1 {
    padding-left: 10px !important;
}

.pl-15 {
    padding-left: 15px !important;
}

.pt-0 {
    padding-top: 0 !important;
}
.pt-04 {
    padding-top: 4px !important;
}
.pt-05 {
    padding-top: 5px !important;
}
.pt-01 {
  padding-top: 1px !important;
}
.pt-02 {
    padding-top: 2px !important;
}
.pt-06 {
    padding-top: 6px !important;
}
.pt-08{
    padding-top: 8px !important;
}
.pt-1 {
    padding-top: 5px;
}
.pt-12 {
    padding-top: 12px !important;
}
.pt-15 {
    padding-top: 15px !important;
}
.pl-35 {
    padding-left: 35px !important;
}

.pt-2 {
    padding-top: 10px !important;
}
.pt-20 {
    padding-top: 20px !important;
}
.pt-3 {
    padding-top: 15px !important;
}
.pt-4 {
    padding-top: 40px !important;
}
.pl-4 {
    padding-left: 40px !important;
}
.pt-5 {
    padding-top: 50px !important;
}

.pt-25 {
    padding-top: 25px !important;
}

.pb-1 {
    padding-bottom: 6px !important;
}
.pb-8 {
    padding-bottom: 8px !important;
}
.px-1 {
    padding: 10px 0 !important;
}

.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.py-1 {
    padding: 0 4px !important;
}

.py-2 {
    padding: 0 10px !important;
}

.py-3 {
    padding: 0 15px !important;
}

.my-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.mx-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.mx-1 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.my-1 {
    margin: 0 6px;
}

.my-2 {
    margin: 0 9px;
}

.my-3 {
    margin: 0 12px;
}

.pb-2 {
    padding-bottom: 13px !important;
}
.pb-3 {
    padding-bottom: 30px !important;
}
.mr-0{
    margin-right:0px !important;
}
.mr-03 {
    margin-right: 3px !important;
}
.mr-3 {
  margin-right: 30px !important;
}

.mr-04 {
    margin-right: 4px !important;
}
.m-1 {
    margin: 10px !important;
}

.ml-05 {
    margin-left: 5px !important;
}

.ml-1 {
    margin-left: 10px !important;
}

.ml-2 {
    margin-left: 15px !important;
}
.ml-20 {
    margin-left: 20px !important;
}
.ml-15 {
    margin-left: 15px !important;
}
.mr-05 {
    margin-right: 5px !important;
}
.ml-03 {
    margin-left: 3px !important;
}
.ml-06 {
    margin-left: 6px !important;
}
.ml-07 {
  margin-left: 7px !important;
}
.mr-1 {
    margin-right: 10px;
}
.mr-5 {
  margin-right: 50px;
}
.mr-15 {
    margin-right: 15px;
}

.mr-2 {
    margin-right: 15px;
}
.mr-20 {
    margin-right: 20px !important;
}

.mr-40 {
    margin-right: 40px;
}

.ml-3 {
    margin-left: 30px;
}

.no-m {
    margin: 0 !important;
}

.mt-0 {
    margin-top: 0 !important;
}
.top_10px{
    top:10px !important;
}
.mlmr {
  margin: 0px -5px !important
}

.mt-05 {
    margin-top: 5px !important;
}

.mt-1 {
    margin-top: 10px !important;
}
.mt-15 {
    margin-top: 15px !important;
}
.ml-02 {
    margin-left: 2px !important;
}

.mt-2 {
    margin-top: 20px !important;
}
.mt-02 {
    margin-top: 2px !important;
}
.mt-03 {
    margin-top: 3px !important;
}

.mt-3 {
    margin-top: 30px !important;
}

.mt-4 {
    margin-top: 40px !important;
}

.mt-25 {
    margin-top: 25px !important;
}
.ml-0 {
    margin-left: 0 !important;
}
.mb-0 {
    margin-bottom: 0 !important;
}

.mb-05 {
    margin-bottom: 5px !important;
}

.mb-1 {
    margin-bottom: 10px !important;
}
.mb-15 {
    margin-bottom: 15px !important;
}

.mb-2 {
    margin-bottom: 20px !important;
}
.mb-3 {
    margin-bottom: 30px;
}

.mb-4 {
    margin-bottom: 40px !important;
}
.pr-1 {
    padding-right: 10px !important;
}

.pr-05 {
    padding-right: 5px !important;
}

.no-p, .p-0 {
    padding: 0 !important;
}

.hrone {
    margin: 10px 0;
}

.hrtwo {
    margin: 0 0 10px 0;
}

.no-border-radius {
    border-radius: 0 !important;
}

.no-border {
    border: 0 !important;
}

.no-box-shadow {
    box-shadow: none !important
}

.no-padding {
    padding: 0 !important;
}

.no-margin {
    margin: 0 !important;
}

.no-shadow {
    box-shadow: none !important;
}
.font_12 {
  font-size: 12px !important;
}

.font_14 {
  font-size: 14px !important;
}

.font_10 {
  font-size: 10px;
}

.font_20 {
  font-size: 20px;
}
.font_24 {
  font-size: 24px;
}
.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.mt_m_1{
    margin-top:-1px !important;
}
.filert_row {
  margin: 5px 0px 10px !important;
}
  .filert_row p {
    line-height: 1.6;
    /*padding: 3px;
    background: #8080800a;
    border: 1px solid #8080801f;*/
  }

.font-w3 {
  font-weight: 700 !important;
}
.fa-1x {
    font-size: 14px;
}

.fa-1y {
    font-size: 14px;
}

.fa-20px {
    font-size: 14px;
}

.fa-21px {
    font-size: 21px;
}
.float-right {
    float: right;
}
.media-responsive {
    width: 100%;
}
.highSeverity {
    background: rgb(255, 0, 61);
}

.mediumSeverity {
    background: rgb(11, 163, 219);
}

.lowSeverity {
    background: rgb(229, 166, 12);
}

.lowSeverityText {
    color: rgb(229, 166, 12);
}

.highSeverityText {
    color: rgb(255, 0, 61);
}

.mediumSeverityText {
    color: rgb(11, 163, 219);
}

.highSeverity:hover {
    background: rgba(255, 0, 61, 0.85);
}

.mediumSeverity:hover {
    background: rgba(11, 163, 219, 0.85);
}

.lowSeverity:hover {
    background: rgba(229, 166, 12, 0.85);
}

.highScore {
    background: #9842d9;
}

.mediumScore {
    background: #f48f1c;
}

.lowScore {
    background: #ee209b;
}

.highScoreText {
    color: #9842d9;
}

.mediumScoreText {
    color: #f48f1c;
}

.lowScoreText {
    color: #ee209b;
}

.alertVideoDownload {
    float: left;
}

.box-shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}
#image_capture_popup .webcam-wrapper video.mirrored {
  transform: scaleX(-1);
  width: 100% !important;
  height: auto !important;
  border: 4px solid #cbcbcb;
  padding: 0px;
}

#image_capture_popup .saveImageStatus_img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
 /* display: block;*/
  border: 4px solid #cbcbcb;
}

.logo-login {
  width: 200px;
  height: 60px;
  margin: 25px auto;
  margin-bottom: 30px;
  background-image: var(--logo-login);
  background-size: contain;
  background-repeat: no-repeat;
}


.icon_color {
    color: var(--icon-color);
}
.seperate_black {
  color: #2d2d2d !important;
}


.pageload-icon {
    width: 34px;
    left: 25px;
    top: 21px;
    position: absolute;
    height: 103px !important;
    background-image: var(--logo-favicon);
    background-size: contain;
    background-repeat: no-repeat !important;
}
.media_inside_tabscontent .media-thumb {
    background: #f1f2f2;
    padding: 0;
    border: 3px solid #fff;
    background-size: cover;
    background-repeat: no-repeat;
    /*background-image: linear-gradient(rgb(247 247 247 / 95%),rgb(255 255 255 / 80%)),url(../img/toursm.jpg);*/
    box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.2);
}

    .media_inside_tabscontent .media-thumb .hvr-grow-shadow {
        cursor: pointer;
        padding: 0px 5px !important;
    }

        .media_inside_tabscontent .media-thumb .hvr-grow-shadow:hover,
        .media_inside_tabscontent .media-thumb .hvr-grow-shadow:focus,
        .media_inside_tabscontent .media-thumb .hvr-grow-shadow:active {
            box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
            -webkit-transform: scale(1.04);
            transform: scale(1.04);
        }

    .media_inside_tabscontent .media-thumb .media-thumb-head {
        background: #f1f2f2;
        padding: 0 5px
    }

        .media_inside_tabscontent .media-thumb .media-thumb-head h6 {
            font-size: 11px
        }

            .media_inside_tabscontent .media-thumb .media-thumb-head h6 span {
                color: var(--theme-color)
            }

    .media_inside_tabscontent .media-thumb .media-thumb-foot {
        font-size: 11px;
        padding: 0px 5px;
    }

.trip_main {
    height: 250px;
    position:relative;
}
.pos_rel{
    position:relative;
}
.trip_area {
  background-image: url(../../../assets/images/Coverage-Map.png);
  background-size: cover;
  box-shadow: -8px 0 8px -10px #ccc;
  height: 250px;
}
.h-40{
    height:40px !important
}
.width-60 {
  width: 60% !important;
}

.width-30 {
  width: 30% !important;
}
.width-10 {
  width: 10% !important;
}
.width-60 {
  width: 60% !important;
}
.width-70 {
    width: 70% !important;
}
.width-80 {
  width: 80% !important;
}
.width-75 {
  width: 75% !important;
}

.width_70 {
    width: 81% !important;
}
.width_100px {
  width: 100px !important;
}
.width_70px {
  width: 55px !important;
}
.margin-auto {
  margin: auto !important;
}
.width-100 {
    width: 100% !important;
}
.width-200 {
    width: 200px !important;
}
.width-300 {
    width: 300px !important;
}
.location {
    display: inline-flex;
    line-height: 17px;
    word-break:break-all;
}

/*    .location i {
        position: relative;
        top: 5px;
        padding-right: 7px;
    }*/

.trip-summary {
    display: flex;
    border-radius: 60px;
    background: rgba(236, 236, 236, 0.45);
    border: 1px solid rgba(236, 236, 236, 0.49);
}

    .trip-summary .score-brick {
        text-align: center;
        font-size: 14px;
        color: #39444d;
        display: grid;
        padding: 7px 1px;
        text-transform: lowercase;
    }

        .trip-summary .score-brick:hover {
            background: rgba(0,0,0,0.01);
            transition-duration: 0.3s;
        }

.score-board {
    letter-spacing: 0.4px;
    background: rgba(241, 242, 242, 0.77);
    border-right: 1px solid rgba(0,0,0,0.03);
    height: 250px;
}

    .score-board .score-brick {
        line-height: 19px;
        display: grid;
        text-align: center;
        font-size: 13px;
        color: #5a646c;
        padding: 6px 1px;
        border-bottom: 1px solid rgba(0,0,0,0.03);
    }

        .score-board .score-brick p {
            font-size: 15px;
            margin: 0 !important;
        }

    .score-board i {
        width: 16px
    }

    .score-board .score-brick:last-child {
        border: 0 !important;
    }

    .score-board .score-brick .total {
        font-size: 18px;
        line-height: 42px;
    }

.score-brick .small {
    font-size: 10px;
    text-transform: lowercase;
}

.score_board_circle {
    padding: 5px 6px;
    background: #ffffff;
    border-radius: 50px;
    font-size: 9px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    margin-right: 5px;
}

/*.score-board .score-brick .popupWindowNoti {*/
   /* position: absolute;*/
    /*text-align: center;
    display: block;
    padding: 2px !important;
    background: #ffffff;
    width: 17px;
    height: 17px;
    line-height: 15px;
    border-radius: 27px;
    margin: 0 auto;
    top: 0px;
    font-size: 10px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}*/

.eventsBoard {
    font-size: 12px;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}

.eventBody {
    padding: 0;
    display: flex;
    align-items: center;
    height: 39px;
    background: rgba(236, 236, 236, 0.2);
}

    .eventBody h6 {
        margin: 0;
        display: inline;
        padding-right: 6px;
        font-size: 13px;
        letter-spacing: 0.4px;
    }

    .eventBody .location {
        line-height: 21px;
        padding: 8px 10px 10px 0;
    }

.eventsBoard .eventFooter {
    border-top: 1px solid rgba(244, 244, 244, 0.8);
    border-bottom: 1px solid rgba(244, 244, 244, 0.8);
    padding: 5px 15px;
    color: #3e4953;
}

    .eventsBoard .eventFooter i {
        padding-right: 3px;
    }

    .eventsBoard .eventFooter .eventData .fa-map-marker-alt {
        padding-right: 9px;
        line-height: 19px;
    }

.eventsBoard .eventAddress {
    line-height: 20px;
    display: block;
}

.eventsBoard .eventData {
    display: inline-flex;
}

.eventFooter Div {
    border-right: 1px solid rgba(0,0,0,0.03);
}

    .eventFooter Div:last-child {
        border-right: 0;
    }

.eventsData .score-brick:hover, .eventsBoard .eventFooter Div:hover {
    background: rgba(0,0,0,0.01);
    transition-duration: 0.3s;
}

.eventIcons {
    float: right;
}

    .eventIcons i {
        cursor: pointer;
        font-size: 13px;
        padding: 5px;
        color: #454b55;
        width: 25px;
        height: 25px;
        line-height: 17px;
        text-align: center;
        /* border-radius: 50px; */
        box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.17);
        background: #fff;
    }

        .eventIcons i:hover {
            box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.06);
            transition-duration: 0.2s;
            color: #2c343d;
        }

.timeline {
    position: relative;
    list-style: none;
    padding: 0;
}

    .timeline > .timeline-body {
        position: relative;
        padding-top: 17px;
        box-shadow: 0px 4px 10px -5px rgba(69, 70, 73, 0.23);
    }

        .timeline > .timeline-body:first-child .fa-flag {
            background: #0cc652;
        }

        .timeline > .timeline-body:last-child .fa-flag {
            background: #f54e05;
        }

        .timeline > .timeline-body:before {
            content: '';
            position: absolute;
            top: 30%;
            bottom: 0;
            width: 3px;
            left: 10px;
            background: #eee;
            border-radius: 2px;
        }

        .timeline > .timeline-body:after {
            clear: both;
        }

.timeline-header {
    font-size: 14px;
}

.timeline-item {
    margin-left: 35px;
    padding-bottom: 10px;
}

.timeline-address {
    line-height: 20px;
    font-size: 13px;
    color: #5e646c;
    letter-spacing: 0.3px;
}

.timeline > .timeline-body > i {
    top: 14%;
    width: 23px;
    height: 23px;
    font-size: 9px;
    line-height: 23px;
    position: absolute;
    border-radius: 50px;
    text-align: center;
    color: #fff;
    background: var(--theme-color)
}

.trip-no {
    width: 27px;
    height: 27px;
    font-size: 13px;
    line-height: 28px;
    background: #ffffff;
    border-radius: 50px;
    text-align: center;
    box-shadow: 4px 0 3px -2px rgba(68, 76, 85, 0.31);
}

.time {
    font-size: 12px;
}

.time-start {
    color: #0cc652 !important;
}

.time-end {
    color: #f26026 !important;
}

.time-normal {
    color: #4d575e !important;
}




.time-start i, .time-end i {
    width: 15px;
}


.trip_main .trip-no {
    font-size: 12px !important;
    background: #fff;
    border-radius: 50%;
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-weight: 500;
    box-shadow: -1px 0 4px 0px rgba(0, 0, 0, 0.1);
    font-weight: 500;
    position: absolute;
    top: -17px;
    right: 108px;
}

.jurneyActiveClass {
    /*-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);*/
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1px;
}

.ActiveClassSelectedJOurney .trip-no {
    animation: scale 3s linear infinite;
    background: #3d4f67;
    color: #fff !important;
}

.timeline-bar {
    border-bottom: 2px solid blue;
    line-height: 35px;
}

.timeLineBar {
    padding-right: 8px;
    padding-left: 8px;
}

.barHeight {
    height: 16px;
    cursor: pointer;
    display: inline-flex;
    background-color: lightgray;
    padding: 0;
    z-index: 0 !important;
}

.timeLineBar .pop-live {
    padding: 5px 0;
    max-width: 100% !important;
    min-width: 250px !important;
    line-height: 29px;
}

.timeLineBar .pop_head {
    padding: 7px;
    margin: 0;
    font-size: 14px;
    letter-spacing: 0.4px;
    padding-bottom: 5px;
    color: #414951;
    font-weight: 500;
}

.timeLineBar .pop-body {
    margin: 0 !important;
    line-height: 20px;
}

.timeLineBar .pop-live .time {
    padding: 0
}

.timeLineBar .hovertip_top {
    background: #f1f2f2 !important;
    border: 2px solid #ffffff !important;
    outline: 1px solid #73bfff !important;
}

.boder_top_ddl_gray {
    border-top: 3px solid #bdbdbd !important;
}

.pop_head {
    font-size: 15px;
    letter-spacing: 0.3px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ebebec;
    margin: 0;
    color: #414951;
    font-weight: 500;
}

    .pop_head a {
        margin-right: 47px;
    }

.pop-live {
    background: #f2f2f2;
    font-size: 13px;
    padding: 7px 0;
    font-weight: 400;
    max-width: 430px;
    min-width: 250px;
}

    .pop-live .pop-body {
        letter-spacing: 0.3px;
        font-size: 12px;
        display: inline-flex;
        align-items: center;
        margin-top: 5px;
    }

    .pop-live .time {
        color: #196ab4;
        font-size: 12px;
        letter-spacing: 0.4px;
        padding: 2px 0;
        display: inline-flex;
        align-items: center;
        width: 100%;
    }

    .pop-live i {
        min-width: 26px;
        text-align: center;
        padding: 3px;
    }

.media {
    margin: 4px 4px;
    padding: 10px;
    position: relative;
    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);*/
    box-shadow: none;
    background: #ffffff;
    border-radius: 2px;
    overflow: visible;
    overflow-x: hidden;
}

.lb-head .lb-vehicle {
    text-align: center
}

    .lb-head .lb-vehicle img {
        text-align: center;
        height: 32px !important;
        max-width: 32px !important;
        margin: auto !important;
    }



    .lb-head .lb-vehicle i {
        display: block;
        font-size: 30px;
        padding: 3px
    }

    .lb-head .lb-vehicle h4 {
        font-size: 15px;
        /*color: #0cc652;*/
        color: var(--btn-primary);
        margin: 4px;
        display: inline-block;
    }

.lb-head .lb-driver {
    font-size: 13px;
}

.view-icon {
    position: relative;
    right: -10px;
}

    .view-icon i {
        background: #fff;
        color: #555d64 !important;
        width: 25px;
        height: 25px;
        line-height: 25px;
        border-radius: 100%;
        text-align: center;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        font-size: 18px;
    }

.view-arrow {
}
.fa-filter{
    cursor:pointer !important;
}
.add_plus_i {
  background: var(--btn-primary) !important;
  color: white;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  padding: 1px 5px;
  font-size: 20px;
  font-weight: 800;
  margin-right: 20px;
  margin-top: 3px;
}
.edit_icon {
  padding: 1px 5px;
  font-size: 18px;
  font-weight: 800;
  margin-top: 0px;
}

.bod_left_h5 {
  border-left: 3px solid var(--btn-primary);
  letter-spacing: 0.4px;
  color: #414141;
  padding-left: 5px !important;
}


    .view-arrow i {
        font-size: 21px;
        cursor: pointer;
        float: right;
    }
.input-group-addon {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #555;
  text-align: center;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
}


/*------------------ Media brick css starts------------------ */
.media .grid-view {
  font-size: 12px;
  color: #7d7d7d;
  letter-spacing: 0.2px;
}
.media .address i {
  font-size: 16px;
  cursor: pointer;
  width: 17px;
  text-align: center;
}
ul.info-list li:last-child {
  border-bottom: none;
}
ul.info-list .text-bold {
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-overflow: ellipsis;
  overflow-x: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 190px;
  white-space: nowrap;
}

ul.info-list li {
  border-bottom: 1px solid #f2f2f2;
}

.text-bold, .text-bold.table td, .text-bold.table th {
  font-weight: 500;
}

ul.info-list li i {
  min-width: 15px;
  text-align: center;
}

.address {
  padding: 4px 2px !important;
  background: #F1F2F2;
  border-radius: 0 12px 12px 0;
  font-size: 10px !important;
  overflow-x: hidden;
}

.img-car {
  background: rgb(241, 242, 242);
  width: 60px;
  height: 60px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px auto;
}

  .img-car img {
    height: 32px !important;
    max-width: 32px !important;
  }

ul.info-list {
  margin: 0;
  padding-left: 0;
  list-style-type: none;
  line-height: 32px;
}
.media-active .img-car {
  animation: scale 3s linear infinite;
  -webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,.16), 0 1px 10px 0 rgba(61, 79, 103, 0.22);
  box-shadow: 0 1px 5px 0 rgba(0,0,0,.16), 0 1px 10px 0 rgba(61, 79, 103, 0.22);
  background: #fff;
}

@keyframes scale {
  50% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }
}

/*------------------ Media brick css Ends------------------ */


.transporter_action {
    position: relative;
}

.autocomplete-container .input-container input {
  font-size: 12px !important;
  height: 30px !important;
}
.autocomplete-container {
  box-shadow: none !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  border-radius: 3px !important;
  height: 32px !important;
}

        .transporter_action .dropdown-menu > li > a:hover {
            color: #262626;
            text-decoration: none;
            background-color: #eeeeee;
            border-bottom: 2px solid white;
        }

.livefoot {
    background: #f2f2f2;
    height: 40px;
    padding: 7px 10px;
}

.lb-head {
    /*background: #ebede8;
    background: -moz-linear-gradient(top, #ebede8 1%, #fefff9 25%, #fefff9 67%, #ebede8 100%);
    background: -webkit-linear-gradient(top, #ebede8 1%,#fefff9 25%,#fefff9 67%,#ebede8 100%);
    background: linear-gradient(to bottom, #ebede8 1%,#fefff9 25%,#fefff9 67%,#ebede8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebede8', endColorstr='#ebede8',GradientType=0 );*/
    background-size: cover;
    padding: 10px;
    margin: 0;
    height: 90px;
    background: #F2F2F2;
}
.lb-vehicle h4 {
    text-overflow: ellipsis;
    width: 206px;
    white-space: nowrap;
    overflow: hidden;
}
.lb-head-single {
    background-size: cover;
    padding: 5px;
    margin: 0;
    height: 40px;
    background: #F2F2F2;
    width: 100%;
}

    .lb-head h5, .lb-head-single h5 {
        color: var(--btn-primary) !important;
        /*color: #0cc652;*/
        text-transform: capitalize;
        float: left;
        margin: 0;
        letter-spacing: 0.4px;
        font-weight: 400;
    }

    .lb-head-single a {
        color: var(--theme-color);
    }
    .lb-head-single .close {
        color: var(--icon-color);
    }
.no_bod{
    border:none !important;
}

.nav-item a.nav-link.active {
  background: var(--btn-primary);
  border-radius:4px;
  color: white;
}
.nav-item a.nav-link {
  background: #2b303b;
  border-radius: 2px !important;
  margin-left: 2px;
  color: white;
  padding: 7px 10px;
  line-height: 11px;
}
  .nav-item a.nav-link.active:hover {
    background: var(--btn-primary);
    border-radius: 4px;
    color: white;
  }
.Walkaround_Templates .nav-item a.nav-link {
  color: white !important;
}

.tbl_th_tr {
  background: var(--table-header) !important;
  color: var(--table-header-txtcolor) !important;
}
.link_color {
  color: #484848 !important;
}
.table-theme thead tr th {
  font-weight: 500;
  font-size: 13px;
  padding: 4px 6px !important;
  color: var(--table-header-txtcolor);
  font-family: roboto;
}

.table-theme thead tr {
  background: var(--table-header);
}

table.table-striped tbody tr:nth-of-type(odd) {
  background-color: #f7f7f7;
}

.table-theme tbody tr td {
  padding: 6.6px 8px !important;
  vertical-align: middle;
  font-family: 'VarelaRound', sans-serif !important;
  font-weight: 400;
  color: #535c6e;
  letter-spacing: 0.2px;
  font-size: 12px;
}

    .lb-head .fa-filter,
    .lb-head .fa-filter,
    .lb-head .fa-outdent,
    .lb-head .fa-times,
    .lb-head .fa-file-upload,
    .lb-head .fa-sync-alt,
    .lb-head .btn-group,
    .lb-head-single .fa-filter,
    .lb-head-single .fa-outdent,
    .lb-head-single .fa-times,
    .lb-head-single .fa-file-upload,
    .lb-head-single .fa-sync-alt,
    .lb-head-single .btn-group {
        color: var(--icon-color);
        /*color: #0cc652;*/
        cursor: pointer;
        float: right;
        margin-left: auto;
    }

    .lb-head .dropdown-menu,
    .lb-head-single .dropdown-menu {
        margin-top: 8px;
        min-width: 172px
    }

        .lb-head .dropdown-menu i,
        .lb-head-single .dropdown-menu i {
            width: 18px;
            text-align: center;
        }

.display_table {
  display: table;
}
.alignitems_center {
  align-items: center;
}
.card-scroll-one {
    height: calc(100vh - 90px);
}

.card-scroll-two {
    height: calc(100vh - 140px);
}

.card-scroll-three {
    height: calc(100vh - 180px) !important;
}

.card-scroll-four {
    height: calc(100vh - 210px);
}

.card-scroll-single {
    height: calc(100vh - 132px);
}
.card-scroll-five {
    height: calc(100vh - 50px);
}

.card-scroll,
.card-scroll-single,
.card-scroll-one,
.card-scroll-one,
.card-scroll-two,
.card-scroll-three,
.card-scroll-four,
.card-scroll-five {
    overflow: hidden;
    scrollbar-gutter: stable both-edges;
}

    .card-scroll:hover,
    .card-scroll-one:hover,
    .card-scroll-two:hover,
    .card-scroll-three:hover,
    .card-scroll-four:hover,
    .card-scroll-single:hover,
    .card-scroll-five:hover {
        overflow: overlay;
    }

@-moz-document url-prefix() {
    .card-scroll,
    .card-scroll-one,
    .card-scroll-two,
    .card-scroll-three,
    .card-scroll-four,
    .card-scroll-single, 
    .card-scroll-five {
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    select {
        -moz-appearance: none;
        text-indent: 0.01px;
        text-overflow: "";
    }
}

@supports (-ms-ime-align:auto) {
    .card-scroll,
    .card-scroll-one,
    .card-scroll-two,
    .card-scroll-three,
    .card-scroll-four,
    .card-scroll-single, 
    .card-scroll-five {
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    select {
        -moz-appearance: none;
        text-indent: 0.01px;
        text-overflow: "";
    }
}
.card_both_side {
    scrollbar-gutter: stable both-edges !important;
}
.switch input {
    display: none;
}

.switch {
  display: inline-block;
  width: 40px !important;
  height: 16px !important;
  /*width: 44px;
    height: 20px;*/
  transform: translateY(40%);
  position: relative;
  text-align: center;
}
.mt_7p5 {
  margin-top: -7.5px !important;
}
.blur_text {
  filter: blur(2px);
}

.plusbtn {
    padding: 6px 12px !important;
    border: 2px solid #b4d6b3 !important;
    border-radius: 50px !important;
    background: #3852ab !important;
    color: white !important;
    position: absolute;
    top: 22px;
    left: 17px;
    left: -3px;
}
.plusbtn:hover {
   
    border: 2px solid #b4d6b3 !important;
    border-radius: 50px !important;
    background: #3852ab !important;
    color: white !important;
    cursor:pointer !important;
}
.PColor-datepicker {
    height: 30px;
    width: 21px;
    border: none !important;
    background: #c5c5c5;
    padding: 3px;
    text-align: center;
    margin-left: -1px;
}
.SColor-datepicker {
    height: 30px;
    width: 21px;
    border: none !important;
    background: #c5c5c5;
    padding: 0px;
    text-align: center;
    margin-left: -1px;
}

.TColor-datepicker {
    height: 30px;
    width: 21px;
    border: none !important;
    background: #c5c5c5;
    padding: 0px;
    text-align: center;
    margin-left: -1px;
}

.overflow_x_hidden {
    overflow-x: hidden !important;
}







.slider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 30px;
    box-shadow: 0 0 0px 1px #787878, 0 0 0px 0px #737982;
    cursor: pointer;
    border: 4px solid transparent;
    overflow: hidden;
    transition: .4s;
}

  .slider:before {
    position: absolute;
    content: "";
    width: 105%;
    height: 100%;
    background: #787878;
    border-radius: 30px;
    transform: translateX(-42px);
    transition: .4s;
  }

 /*   .slider:before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background: #787878;
        border-radius: 30px;
        transform: translateX(-42px);
        transition: .4s;
    }*/

input:checked + .slider:before {
    transform: translateX(6px);
    /*background: #0cc652;*/
    background: var(--btn-primary);
}

input:checked + .slider {
    /*box-shadow: 0 0 0px 1px #0cc652, 0 0 0px 0px #737982;*/
    box-shadow: 0 0 0px 1px var(--btn-primary), 0 0 0px 0px var(--btn-primary);
}

.switch-small {
    width: 40px;
    height: 18px;
}

    .switch-small input:checked + .slider:before {
        transform: translateX(8px);
    }

    .switch-small .slider:before {
        transform: translateX(-40px);
    }

.checkbox, .radio {
    margin: 0
}

    .checkbox .checkbox-material .check, label.checkbox-inline .checkbox-material .check {
        border: 1px solid rgba(0,0,0,.45);
        border-radius: 0;
    }

    .checkbox label .checkbox-material {
        margin-right: 4px;
    }

    .checkbox input[type=checkbox]:checked + .checkbox-material:after, label.checkbox-inline input[type=checkbox]:checked + .checkbox-material:after {
        background: none;
    }

    .checkbox .text-success {
        color: var(--theme-color);
        float: right;
        margin-top: 3.2px;
    }

    .checkbox .text-danger {
        color: #FF5B5B;
        float: right;
        margin-top: 4px;
    }

    .checkbox .text-primary {
        color: #337ab7;
        float: right;
        margin-top: 4px;
    }

    .checkbox label, label.checkbox-inline {
        cursor: pointer;
        padding-left: -1px;
        color: rgba(0,0,0,.26)
    }

.form-group.is-focused .checkbox label, .form-group.is-focused label.checkbox-inline {
    color: rgba(0,0,0,.26)
}

    .form-group.is-focused .checkbox label:hover, .form-group.is-focused .checkbox label:focus, .form-group.is-focused label.checkbox-inline:hover, .form-group.is-focused label.checkbox-inline:focus {
        color: rgba(0,0,0,.54)
    }

fieldset[disabled] .form-group.is-focused .checkbox label, fieldset[disabled] .form-group.is-focused label.checkbox-inline {
    color: rgba(0,0,0,.26)
}

.checkbox input[type=checkbox], label.checkbox-inline input[type=checkbox] {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    margin: 0;
    z-index: -1;
    width: 0;
    height: 0;
    overflow: hidden;
    left: 0;
    pointer-events: none
}

.checkbox .checkbox-material, label.checkbox-inline .checkbox-material {
    vertical-align: middle;
    position: relative;
}

    .checkbox .checkbox-material:before, label.checkbox-inline .checkbox-material:before {
        display: block;
        position: absolute;
        left: 0;
        content: "";
        background-color: rgba(0,0,0,.84);
        height: 15px;
        width: 15px;
        border-radius: 100%;
        z-index: 1;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        margin: 0;
        -webkit-transform: scale3d(2.3,2.3,1);
        transform: scale3d(2.3,2.3,1)
    }

  .checkbox .checkbox-material .check, label.checkbox-inline .checkbox-material .check {
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid rgba(0,0,0,.54);
    border-radius: 2px;
    overflow: hidden;
    z-index: 1;
    top: 2px;
  }

        .checkbox .checkbox-material .check:before, label.checkbox-inline .checkbox-material .check:before {
            position: absolute;
            content: "";
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            display: block;
            margin-top: -5.3px;
            margin-left: 5.6px;
            width: 0;
            height: 0;
            box-shadow: 0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0 inset
        }

.checkbox input[type=checkbox]:focus + .checkbox-material .check:after, label.checkbox-inline input[type=checkbox]:focus + .checkbox-material .check:after {
    opacity: .2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"
}

.checkbox input[type=checkbox]:focus:checked + .checkbox-material:before, label.checkbox-inline input[type=checkbox]:focus:checked + .checkbox-material:before {
    -webkit-animation: rippleOn 500ms;
    animation: rippleOn 500ms
}

.checkbox input[type=checkbox]:focus:checked + .checkbox-material .check:before, label.checkbox-inline input[type=checkbox]:focus:checked + .checkbox-material .check:before {
    -webkit-animation: checkbox-on .3s forwards;
    animation: checkbox-on .3s forwards
}

.checkbox input[type=checkbox]:focus:checked + .checkbox-material .check:after, label.checkbox-inline input[type=checkbox]:focus:checked + .checkbox-material .check:after {
    -webkit-animation: rippleOn 500ms forwards;
    animation: rippleOn 500ms forwards
}

.checkbox input[type=checkbox]:focus:not(:checked) + .checkbox-material:before, label.checkbox-inline input[type=checkbox]:focus:not(:checked) + .checkbox-material:before {
    -webkit-animation: rippleOff 500ms;
    animation: rippleOff 500ms
}

.checkbox input[type=checkbox]:focus:not(:checked) + .checkbox-material .check:before, label.checkbox-inline input[type=checkbox]:focus:not(:checked) + .checkbox-material .check:before {
    -webkit-animation: checkbox-off .3s forwards;
    animation: checkbox-off .3s forwards
}

.checkbox input[type=checkbox]:focus:not(:checked) + .checkbox-material .check:after, label.checkbox-inline input[type=checkbox]:focus:not(:checked) + .checkbox-material .check:after {
    -webkit-animation: rippleOff 500ms forwards;
    animation: rippleOff 500ms forwards
}

.checkbox input[type=checkbox]:checked + .checkbox-material .check, label.checkbox-inline input[type=checkbox]:checked + .checkbox-material .check {
    /*color: #0cc652;
    border-color: #0cc652;*/
    color: var(--btn-primary);
    border-color: var(--btn-primary);
}

    .checkbox input[type=checkbox]:checked + .checkbox-material .check:before, label.checkbox-inline input[type=checkbox]:checked + .checkbox-material .check:before {
        box-shadow: 0 0 0 10px,10px -10px 0 10px,32px 0 0 20px,0 32px 0 20px,-5px 5px 0 10px,20px -12px 0 11px
    }


.radio label {
    display: inline-block;
    position: relative;
    padding-left: 2px;
    line-height: 15px;
}

    .radio label::before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 14px;
        height: 14px;
        left: 0;
        margin-left: -17px;
        border: 1px solid #cccccc;
        border-radius: 50%;
        background-color: #fff;
        -webkit-transition: border 0.15s ease-in-out;
        -o-transition: border 0.15s ease-in-out;
        transition: border 0.15s ease-in-out;
    }

    .radio label::after {
        display: inline-block;
        position: absolute;
        content: " ";
        width: 7px;
        height: 7px;
        left: 3.7px;
        top: 3.5px;
        margin-left: -17px;
        border-radius: 50%;
        background-color: #555555;
        -webkit-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        transform: scale(0, 0);
        -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        -moz-transition: -moz-transform 0.3s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        -o-transition: -o-transform 0.3s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        transition: transform 0.3s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    }

.radio input[type="radio"] {
    opacity: 0;
}

    .radio input[type="radio"]:focus + label::before {
        outline: none !important;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
    }

    .radio input[type="radio"]:checked + label::after {
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    .radio input[type="radio"]:disabled + label {
        opacity: 0.65;
    }

        .radio input[type="radio"]:disabled + label::before {
            cursor: not-allowed;
        }

.radio-success input[type="radio"] + label::after {
    /*border-color: #5cb85c;*/
    border-color: var(--btn-primary);
}

.radio-success input[type="radio"]:checked + label::before {
    /*border-color: #5cb85c;*/
    border-color: var(--btn-primary);
}

.radio-success input[type="radio"]:checked + label::after {
    /*border-color: #5cb85c;*/
    border-color: var(--btn-primary);
}

fieldset[disabled] .checkbox, fieldset[disabled] .checkbox input[type=checkbox], .checkbox input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before, .checkbox input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check, .checkbox input[type=checkbox][disabled] + .circle, fieldset[disabled] label.checkbox-inline, fieldset[disabled] label.checkbox-inline input[type=checkbox], label.checkbox-inline input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before, label.checkbox-inline input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check, label.checkbox-inline input[type=checkbox][disabled] + .circle {
    opacity: .5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"
}

.checkbox input[type=checkbox][disabled] + .checkbox-material .check:after, label.checkbox-inline input[type=checkbox][disabled] + .checkbox-material .check:after {
    background-color: rgba(0,0,0,.87);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

@-webkit-keyframes checkbox-on {
    0% {
        box-shadow: 0 0 0 10px,10px -10px 0 10px,32px 0 0 20px,0 32px 0 20px,-5px 5px 0 10px,15px 2px 0 11px
    }

    50% {
        box-shadow: 0 0 0 10px,10px -10px 0 10px,32px 0 0 20px,0 32px 0 20px,-5px 5px 0 10px,20px 2px 0 11px
    }

    100% {
        box-shadow: 0 0 0 10px,10px -10px 0 10px,32px 0 0 20px,0 32px 0 20px,-5px 5px 0 10px,20px -12px 0 11px
    }
}

@keyframes checkbox-on {
    0% {
        box-shadow: 0 0 0 10px,10px -10px 0 10px,32px 0 0 20px,0 32px 0 20px,-5px 5px 0 10px,15px 2px 0 11px
    }

    50% {
        box-shadow: 0 0 0 10px,10px -10px 0 10px,32px 0 0 20px,0 32px 0 20px,-5px 5px 0 10px,20px 2px 0 11px
    }

    100% {
        box-shadow: 0 0 0 10px,10px -10px 0 10px,32px 0 0 20px,0 32px 0 20px,-5px 5px 0 10px,20px -12px 0 11px
    }
}

@-webkit-keyframes checkbox-off {
    0% {
        box-shadow: 0 0 0 10px,10px -10px 0 10px,32px 0 0 20px,0 32px 0 20px,-5px 5px 0 10px,20px -12px 0 11px,0 0 0 0 inset
    }

    25% {
        box-shadow: 0 0 0 10px,10px -10px 0 10px,32px 0 0 20px,0 32px 0 20px,-5px 5px 0 10px,20px -12px 0 11px,0 0 0 0 inset
    }

    50% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        margin-top: -4px;
        margin-left: 6px;
        width: 0;
        height: 0;
        box-shadow: 0 0 0 10px,10px -10px 0 10px,32px 0 0 20px,0 32px 0 20px,-5px 5px 0 10px,15px 2px 0 11px,0 0 0 0 inset
    }

    51% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        margin-top: -2px;
        margin-left: -2px;
        width: 20px;
        height: 20px;
        box-shadow: 0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 10px inset
    }

    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        margin-top: -2px;
        margin-left: -2px;
        width: 20px;
        height: 20px;
        box-shadow: 0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0 inset
    }
}

@keyframes checkbox-off {
    0% {
        box-shadow: 0 0 0 10px,10px -10px 0 10px,32px 0 0 20px,0 32px 0 20px,-5px 5px 0 10px,20px -12px 0 11px,0 0 0 0 inset
    }

    25% {
        box-shadow: 0 0 0 10px,10px -10px 0 10px,32px 0 0 20px,0 32px 0 20px,-5px 5px 0 10px,20px -12px 0 11px,0 0 0 0 inset
    }

    50% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        margin-top: -4px;
        margin-left: 6px;
        width: 0;
        height: 0;
        box-shadow: 0 0 0 10px,10px -10px 0 10px,32px 0 0 20px,0 32px 0 20px,-5px 5px 0 10px,15px 2px 0 11px,0 0 0 0 inset
    }

    51% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        margin-top: -2px;
        margin-left: -2px;
        width: 20px;
        height: 20px;
        box-shadow: 0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 10px inset
    }

    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        margin-top: -2px;
        margin-left: -2px;
        width: 20px;
        height: 20px;
        box-shadow: 0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0 inset
    }
}


.switch-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    box-sizing: content-box;
}

.switch-left-right .switch-input:checked ~ .switch-label {
    background: inherit;
}

.switch-input:checked ~ .switch-label {
    background: #E1B42B;
}

.switch-left-right .switch-label {
    overflow: hidden;
}

.switch-label, .switch-handle {
    transition: All 0.3s ease;
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
}

.switch-label {
    position: relative;
    display: block;
    height: inherit;
    font-size: 10px;
    text-transform: uppercase;
    border-radius: inherit;
    box-sizing: content-box;
}

.switch-left-right .switch-input:checked ~ .switch-label:before {
    opacity: 1;
    left: 100px;
}

.switch-input:checked ~ .switch-label:before {
    opacity: 0;
}

.switch-left-right .switch-label:before {
    background: #eceeef;
    text-align: left;
    padding-left: 50px !important;
}

.switch-label:before {
    content: attr(data-off);
    right: 11px;
    color: #aaaaaa;
    text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}

span.switch-label:after {
    content: attr(data-on);
    left: 11px;
    color: #aaaaaa;
    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
    position: absolute;
}

.switch-label:before, .switch-label:after {
    position: absolute;
    top: 50%;
    margin-top: -5px;
    line-height: 1;
    -webkit-transition: inherit;
    -moz-transition: inherit;
    -o-transition: inherit;
    transition: inherit;
    box-sizing: content-box;
}

.switch-left-right .switch-input:checked ~ .switch-label:after {
    left: 0 !important;
    opacity: 1;
    padding-left: 20px;
    top: 0;
}


.switch-input:checked ~ .switch-label:after {
    opacity: 1;
}


.switch-left-right .switch-label:after {
    text-align: left;
    text-indent: 9px;
    left: -100px !important;
    opacity: 1;
    width: 100% !important;
}

.switch-left-right .switch-label:before, .switch-left-right .switch-label:after {
    width: 20px;
    height: 20px;
    top: 0;
    left: -16px;
    right: 0;
    font-size: 9px;
    bottom: 0;
    padding: 10px 0 0 0;
    text-indent: -12px;
    border-radius: 20px;
}

.switch-input:checked ~ .switch-handle {
    background: #00c851;
    left: 33px;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}

.switch-label, .switch-handle {
    transition: All 0.3s ease;
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
}

.switch-handle {
    position: absolute;
    top: 5px;
    left: 4px;
    width: 10px;
    height: 10px;
    background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
    background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
    border-radius: 100%;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

    .switch-handle:before {
        content: "";
        position: absolute;
        top: 50%;
        left: -130%;
        margin: -6px 0 0 -6px;
        width: 12px;
        height: 12px;
    }

/*
 * Component: Form
 * ---------------
 */
.search-dropdown {
    overflow: scroll;
}

    .search-dropdown .search-box {
        padding: 11px;
        background: #fff;
        width: 100%
    }

.dropdown-menu-small {
    min-width: 70px !important;
    border-radius: 2px;
}

    .dropdown-menu-small li a {
        padding: 3px 10px;
    }

input:-internal-autofill-selected {
    background: #f2f2f2 !important;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #f2f2f2 inset;
}

.form-control2 {
    background-color: hsla(0, 0%, 100%, 0.13);
}

.form-control, textarea.form-control, select.form-control {
  display: initial;
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 3px;
  z-index: 0 !important;
  box-shadow: none;
  border: 1px solid rgba(0,0,0,0.1) !important;
  transition-duration: .4s;
  color: #6f6f6f;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.validation_txt {
  font-size: 10px;
  margin-top: 7px !important;
  color: #f45959 !important;
  display: block;
}

textarea.form-control {
    height: auto !important;
    padding: 10px;
}

.form-control:focus {
    background: rgba(255, 255, 255, 0.10) !important;
}

.form-group label.control-label {
    text-align: left !important;
    padding: 1px;
    margin: 0 !important;
    line-height: inherit !important;
}

.input-group-addon {
    border: 1px solid rgba(0,0,0,0.1);
    background: #f2f2f2;
}

.input-group .form-control:disabled + .input-group-addon {
    border: 0;
    display: none;
}

.input-group .form-control:not(:disabled) + .input-group-addon {
    border-left: 0
}

/*------ ADDED CSS ---------*/
.slider2:after, .slider3:after, .slider4:after {
    content: 'OFF';
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    font-size: 10px;
    letter-spacing: 0.3px;
}

input:checked + .slider2:after, input:checked + .slider3:after, input:checked + .slider4:after {
    content: 'ON';
}

.view_Req_popup {
    position: absolute;
    position: absolute;
    right: 10px;
    top: 20px;
}

.view_Req_popup_body {
    height: calc(75vh - 123px);
    background: white;
    padding: 10px;
}

.pagination {
    margin: 0;
    float: left;
}

    .pagination li a {
        border: none;
        font-size: 10px;
        min-width: 23px;
        min-height: 30px;
        color: #999;
        margin: 0 2px;
        line-height: 30px;
        border-radius: 2px !important;
        text-align: center;
        padding: 0 6px;
    }

        .pagination li a:hover {
            color: #666;
            -webkit-transition: all 0.3s linear;
            transition: all 0.3s linear;
        }

    .pagination li.active a, .pagination li.active a.page-link {
        background: #03A9F4;
        z-index: 1;
    }

        .pagination li.active a:hover {
            background: #0397d6;
            z-index: 1;
        }

    .pagination li.disabled i {
        color: #ccc;
    }

    .pagination li i {
        font-size: 14px;
        padding-top: 6px
    }

.product-slider {
}

    .product-slider #carousel {
        margin: 0;
    }

    .product-slider .carousel-inner {
        overflow: visible !important;
    }



    .product-slider #thumbcarousel {
        /*margin: 12px 0 0;
        padding: 0 25px;*/
    }

        .product-slider #thumbcarousel .item {
            text-align: center;
            padding: 1px 5px;
           /* background: #eaedee;*/
        }

            .product-slider #thumbcarousel .item .thumb {
                display: block;
                width: 125px;
                /*height: 70px;*/
                margin: 5px;
                cursor: pointer;
                box-shadow: none !important;
            }

.multichallelVideoSection .channelCount {
   /* color: #4f5155 !important;*/
    color: #fff !important;
    font-size: 12px;
    padding: 12px 4px;
}

.popover {
    z-index: 4000;
    border: 0;
    border-radius: 2px;
}


.product-slider #thumbcarousel .item .thumb:hover {
    opacity: 0.8;
}

.product-slider .fa-chevron-circle-left {
    background: #ffffff;
    border-radius: 20px;
    position: absolute;
    left: 1%;
    color: #187eea;
    font-size: 27px;
}

.product-slider .fa-chevron-circle-right {
    background: #ffffff;
    border-radius: 20px;
    position: absolute;
    right: 1%;
    color: #187eea;
    font-size: 27px;
}

    .product-slider .fa-chevron-circle-left:hover, .product-slider .fa-chevron-circle-right:hover, .analyzeEventImages .fa-chevron-circle-right:hover, .analyzeEventImages .fa-chevron-circle-left:hover {
        color: #3d4f67;
    }

.selectedImg {
    width: 90% !important;
    padding: 13px 0;
}

.captureImg {
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
}

.eventImgThumbActive {
    border: 2px solid #187eea;
    padding: 2px;
    transition-duration: 0.2s;
}

.product-slider .carousel-inner > .item > a > img, .carousel-inner > .item > img {
    height: 447px;
}
.global_VideochannelSection #videoChannelSection .modal-dialog {
    width: 100%;
    left: 0% !important;
}
#videoGalleryModal .modal-dialog{
    width: 72%;
    left: 13.9%;
}

#videoChannelSection .modal-dialog {
    /*   width: 97% !important;
    left: 2% !important;*/
    width: 97% !important;
    left: 1.9% !important;
}

#videoChannelSectionvideo {
    /*width: 72%;*/
}
/*#videoChannelSection .video_player {
    width: 100% !important;
}*/

/*#videoChannelSection .video_player {
    width: 100% !important;
    height: 78vh;
    width: 78% !important;
    height: 548px;
}*/

#globalChannelSection .modal-dialog {
    width: 96%;
    left: 3% !IMPORTANT;
}
#globalChannelSection .videoLargeView {
    height: 548px !IMPORTANT;
}
#globalChannelSection .product-slider #thumbcarousel .item .thumb {
    /*    display: block;
    width: 233px;
    margin: 5px;
    cursor: pointer;
    box-shadow: none !important;*/
    display: block;
    width: 100%;
    margin: 0px;
    cursor: pointer;
    border: 0px solid;
    background: none;
    box-shadow: none !important;
      height: 30px;
   /* height: auto !IMPORTANT;*/
}
#globalChannelSection video {
    width: 100%;
}
#videoChannelSection .videoLargeView {
    height: 548px;
}
.show_content_video video {
    display: block !important;
    height: 100vh !important;
}

#videoChannelSection .modal-content {
    /*width: 68vw;
    position: absolute;
    left: -45px;*/
    /*position: absolute;
    width: 96vw;
    left: 4%;
    padding-bottom: 45px;*/
   
   /* position: absolute;
    padding-bottom: 45px;
    width: 97vw;
    left: 3%;*/
}
#videoChannelSection .product-slider #thumbcarousel .item .thumb {
    display: block;
    width: 95%;
    /* width: 233px;*/
    /*height: 30px;*/
    height: auto;
    margin: 5px;
    cursor: pointer;
    box-shadow: none !important;
}
#videoChannelSection .product-slider #thumbcarousel .item {
    text-align: center;
    padding: 1px 1px;
    /*background: #eaedee;*/
}

/*#videoChannelSection .modal-body > .product-slider {
    height: calc(100vh - 360px) !important;
}*/

.EventsMain .product-slider #thumbcarousel .item .thumb {
    height: 30px;
}
.Event_VideochannelSection #videoChannelSection .modal-dialog {
    /*    width: 97% !important;
    left: 2% !important;*/
    width: 96.5% !important;
    left: 3.2% !important;
}

.VideochannelSection_modal_fotter {
    /*    background: #f2f2f2;
    height: 40px;
    padding: 4px 10px;
    position: fixed;
    width: 100%;*/
    position: fixed;
    bottom: 0px;
    width: 100%;
    padding: 0px !important;
    background-color: #F1F2F2;
    height: 40px;
    text-align: center;
}

    .VideochannelSection_modal_fotter .multichannel_view_videocontrols {
        padding: 5px;
        text-align: center;
        margin-top: 0px;
        display: block !important;
    }

.live .modal-open .modal {
    overflow-x: hidden;
    overflow-y: hidden;
}

 #videoCommandList_modal .modal-dialog, #requestvideo_ontrip_modal .modal-dialog, #ReqVideoOnMaoEvent_modal .modal-dialog {
    width: 24%;
    left: -10%;
}
#requestvideo_modal .modal-dialog {
    width: 30%;
    left: -10%;
}
#requestvideo_modal .modal-body, #requestvideo_ontrip_modal .modal-body, #ReqVideoOnMaoEvent_modal .modal-body {
    height: auto;
    padding: 3px !important;
}

#requestvideo_modal form {
    padding: 0px;
}
#requestvideo_ontrip_modal form, #ReqVideoOnMaoEvent_modal form {
    padding: 0 15px;
    background-image: linear-gradient(to top,rgb(255 255 255 / 86%),rgb(236 255 249 / 48%)),url(../../Assets/img/Coverage-Map.png);
}
#requestvideo_modal .livefoot, #requestvideo_ontrip_modal .livefoot, #ReqVideoOnMaoEvent_modal .livefoot {
    margin: 0 -15px;
}

.multiImageActive {
    border-bottom: 2px solid var(--theme-color);
}

.carousel-inner .item {
    overflow: visible;
    text-align: center
}

.carousel-control {
    color: #697389 !important;
    text-align: center;
    text-shadow: none;
    font-size: 30px;
    width: 30px;
    height: 30px;
    line-height: 20px;
    top: 23%;
}

    .carousel-control:hover, .carousel-control:focus, .carousel-control:active {
        color: #333;
    }

    .carousel-control .fa {
        font: normal normal normal 30px/26px FontAwesome;
    }

    .carousel-control.right, .carousel-control.left {
        background-color: rgba(0, 0, 0, 0);
        background-image: none;
    }

#evnetImages .carousel-inner {
    height: calc(100vh - 90px);
    padding: 0 10px;
}

#evnetImages .product-slider #thumbcarousel .item .thumb {
    width: 70px;
    height: 25px;
    margin: 5px;
    cursor: pointer;
    box-shadow: none !important;
}

#evnetImages .selectedImg {
    width: 100% !important;
    padding: 0;
    border: 5px solid #e0e6ee;
}

#evnetImages .product-slider .fa-chevron-circle-left {
    top: 44%;
    left: 5%;
    z-index: 9
}

#evnetImages .product-slider .fa-chevron-circle-right {
    top: 44%;
    right: 5%;
}
/*-----------------multi video channel code Tracking & playback --------------------*/
.channelCount {
    color: #fff;
    font-size: 12px;
    padding: 12px 4px;
}

.multichallelVideoSection video {
    width: 100%;
    /*height: 100%;*/
    border: 0px solid #fff;
    object-fit: initial;
}

.multichallelVideoSection .thumb {
    margin-top: 5px !important;
}

.multichannel_view video {
/*    height: 310px;
    width: 100%;
    padding: 3px;
    margin-bottom: -6px;*/
    object-fit: initial;
}

#globalChannelSection .multichannel_view video {
    height: 310px;
    width: 100%;
    object-fit: initial;
    padding: 3px !IMPORTANT;
    margin-bottom: -6px;
    border: 2px solid #494949;
}




/*.videoLargeView {
    max-height: 590px;
}*/
.multichannel_view {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}

.multichannel_view_videocontrols {
    /*display: inline-block;
    position: absolute;
    bottom: -43px;
    right: 177px;
    padding: 5px;*/
    padding: 5px;
    text-align: center;
    margin-top: 3px;
    display:block !important;
}

/*-----------------Coustom Popup Styles --------------------*/

.coustom_popup {
  position: relative;
  cursor: pointer;
  min-height: 20px !important;
}

.coustom_popup_hover {
  display: none;
  background: #fff;
  position: absolute;
  z-index: 1;
  min-width: 200px;
  padding: 8px;
  margin: 5px;
  border-top: 5px solid #7a92a3 !important;
  box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
  top: -3px;
  left: 0px;
  font-size: 10px !important;
}

.coustom_popup:hover > .coustom_popup_hover {
  display: block;
  color: black;
  width: 264px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}







/*-----------------multi video channel code Tracking & playback --------------------*/
.tab-alert {
    height: 40vh;
    text-align: center;
    background-repeat: no-repeat;
    background-size: 220px, cover;
    background-position: top center;
    font-family: 'Font Awesome 5 Pro';
}

    .tab-alert.no-records {
        background-image: url('../images/no-result.png');
    }

      .tab-alert.no-records h5 {
        padding-top: 25vh;
        font-weight: 500;
        border: 0px;
      }
  .tab-alert span {
    color: #ff641d;
  }
    .tab-alert:before {
        font-size: 60px;
        line-height: 95px;
    }

    .tab-alert.no-trips:before {
        content: "\f605";
    }

    .tab-alert.no-events:before {
        content: "\f1f6";
    }

    .tab-alert.no-videos:before {
        content: "\f4e2";
    }

    .tab-alert.no-images:before {
        content: "\f302";
    }

    .tab-alert h5 {
        border: 0;
        font-size: 14px;
        /*font-family: 'Josefin Sans', sans-serif;*/
        font-family: 'VarelaRound', sans-serif;
        line-height: 1.4;
    }
        .tab-alert h5 span {
            font-size: 14px;
        }
    .tab-alert span {
        font-size: 14px;
    }

    .tab-alert .fa-stack {
        font-size: 35px;
    }

.hovertip .hovertip_top {
    display: inline-block;
}

.hovertip .hovertip_top, .hovertip .hovertip_bottom, .hovertip .hovertip_right {
    width: 100%;
    visibility: hidden;
    left: 0;
    background-color: black;
    color: #fff;
    font-size: 12px;
    text-align: center;
    border-radius: 3px;
    padding: 0 13px;
    position: absolute;
    z-index: 999;
    opacity: 0;
}

.hovertip .hovertip_left {
    visibility: hidden;
    right: 34px;
    top: 9px;
    background-color: black;
    color: #fff;
    font-size: 12px;
    text-align: center;
    border-radius: 3px;
    padding: 0 13px;
    position: absolute;
    z-index: 999;
    opacity: 0;
}

.hovertip_top::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    left: 50%;
    top: 100%;
    transform: translate(-50%,-50%) rotate(45deg);
    background-color: #000;
}

.hovertip_left::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    left: 97%;
    top: 79%;
    transform: translate(-10%,-150%) rotate(45deg);
    background-color: #000000;
}

.hovertip_top {
    top: -31px;
}

.hovertip:hover .hovertip_top, 
.hovertip:hover .hovertip_bottom, 
.hovertip:hover .hovertip_left, 
.hovertip:hover .hovertip_right {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.8s;
}

.timeLineBar .hovertip_top {
    bottom: 20px;
    top: auto;
    /* left: auto !important; */
    left: 23% !important;
   /* transform: translate(-150px, -50px);*/
    width: 300px;
    color: #3d4f67 !important;
    text-align: left !important;
    border-radius: 0 !important;
}
/*.timeLineBar .hovertip_top::after {
        position: absolute;
        width: 8px;
        height: 8px;
        left: 1%;
        top: 102%;
        z-index: 0;
        transform: translate(-50%,-50%) rotate(-45deg);
        background-color: #f1f2f2;
        border-left: 1px solid #73bfff !important;
        border-bottom: 1px solid #73bfff !important;
    }*/
.gm-style .controls.maptype-control {
    display: flex;
    flex-direction: row;
    width: auto;
    position: absolute;
}

    .gm-style .controls.maptype-control button {
        display: inline-block;
        font-size: 0.5em;
        margin: 0 1px;
        padding: 0 6px;
    }

    .gm-style .controls.maptype-control.maptype-control-is-map .maptype-control-map {
        font-weight: 700;
    }

    .gm-style .controls.maptype-control.maptype-control-is-satellite .maptype-control-satellite {
        font-weight: 700;
    }

.gm-style .controls.maplayer-control {
    display: flex;
    flex-direction: row;
    width: auto;
    position: absolute;
}

    .gm-style .controls.maplayer-control button {
        display: inline-block;
        font-size: 0.5em;
        margin: 0 1px;
        padding: 0 6px;
    }

    .gm-style .controls.maplayer-control.maplayer-control-is-traffic .maplayer-control-traffic {
        font-weight: 700;
    }
    .gm-style .controls.maplayer-control.maplayer-control-is-transit .maplayer-control-transit {
        font-weight: 700;
    }
    .gm-style .controls.maplayer-control.maplayer-control-is-bike .maplayer-control-bike {
        font-weight: 700;
    }

.gm-style .controls {
    font-size: 28px; /* this adjusts the size of all the controls */
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
    box-sizing: border-box;
    border-radius: unset;
    font-weight: 300;
    height: 33px;
    margin: 6px;
    user-select: none;
    padding: 0;
    width: 1em;
}

    .gm-style .controls button {
        border: 0;
        background-color: white;
        color: rgba(0, 0, 0, 0.6);
    }

        .gm-style .controls button:hover {
            color: rgba(0, 0, 0, 0.9);
        }

    .gm-style .controls.zoom-control {
        display: flex;
        flex-direction: column;
        height: auto;
    }

        .gm-style .controls.zoom-control button {
            font: 0.85em Arial;
            margin: 1px;
            padding: 0;
        }

.gm-style-pbc + div > div > div:nth-child(4) > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(1) > div, .gm-style-pbc + div > div > div:nth-child(4) > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(2) > div {
    background: #fff !important;
    box-shadow: none !important;
    margin-top: 2px;
}

.gm-ui-hover-effect img {
    width: 17px !important;
    height: 17px !important;
    margin: 10px 8px !important;
}

.gm-style .gm-style-iw {
    font-weight: 400 !important;
}

.gm-style-iw p {
    color: #fff !important;
    margin: 0 !important;
}

.gm-style-iw h5 {
    letter-spacing: 0.4px;
    padding: 0 6px;
    border-left: 3px solid var(--theme-color);
}

.gm-style button {
  margin-top: 7px !important;
  margin-right: 8px !important;
  font-size: 13px !important;
  padding: 10px !important;
  height: 33px !important;
}

.geo .HideDrawTools, .geo .gm-style-cc, .geo .gm-tilt {
    display: none !important;
}

.clusterInfowindow .gm-style-pbc + div > div > div:nth-child(4) > div > div:nth-child(1) > div:nth-child(4) {
    border-radius: 4px !important;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
}

.clusterInfowindow .gm-style-pbc + div > div > div:nth-child(4) > div .table {
    margin: 0 !important;
    padding-top: 40px !important;
}

    .clusterInfowindow .gm-style-pbc + div > div > div:nth-child(4) > div .table tr td {
        color: #3d4f67 !important
    }

.clusterInfowindow .gm-style-pbc + div > div > div:nth-child(4) > div h5 {
    margin-bottom: 10px;
    margin-top: 0;
    background: #f4f4f4;
    color: var(--theme-color);
    padding: 7px;
    border: 0;
    font-size: 13px;
}

.clusterInfowindow .gm-style-pbc + div > div > div:nth-child(4) > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(1) > div, .gm-style-pbc + div > div > div:nth-child(4) > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(2) > div {
    background: #fff !important;
    box-shadow: none !important;
    margin-top: 2px;
}

.gm-style-pbc + div > div > div:nth-child(4) > div > div:nth-child(1) > div:nth-child(4), .gm-style .gm-style-iw-c {
    /*background: rgb(242, 242, 242) !important;*/
    background: #2f3b53 !important;
    border: 2px solid #ffffff !important;
    outline: 1px solid #73bfff !important;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2) !important;
    z-index: 1;
    min-width: 270px;
    padding: 15px;
    border-radius: 0px;
    padding: 10px 8px;
    border-radius: 0px;
}
.mb_bg {
    background: #2f3b53 !important;
}
.mb_pop_green {
    color: #99ffae !important;
}
.gm-style-iw-d .pop-live {
    background: #2f3b53 !important;
}
.gm-style-iw-d .pop_head {
    color: #99ffae !important;
}
.gm-style-iw-d .pop-live i {
    padding: 3px;
    padding-left: 0px !important;
    margin-left: -4px !important;
}
.gm-style-iw-d .pop-live .time {
    color: #99ffae !important;
}

.gm-style-iw-d .pop-live .pop-body {
    color: white !important;
}
.gm-style-iw-a .gm-style-iw-t {
    padding: 3px !important;
    min-width: 365px;
}
.gm-style button span {
    background: white;
    font-weight: 900;
}
    .gm-style .gm-style-iw-d {
    overflow: auto !important;
}

.gm-style-pbc + div > div > div:nth-child(4) > div > div:nth-child(1) > div:nth-child(2) {
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.dashlet-one .panel {
    border-radius: 2px !important;
}

.dashlet-one .panel-body {
    height: 115px !important;
}

.dashlet-one h4 {
    font-weight: 400;
    font-size: 15px;
}

.dashlet-one p {
    font-size: 21px;
    line-height: 20px;
}

.dashlet-one .panel-footer {
    padding: 4px 12px;
    /*background: var(--panel-view);*/
    background: var(--reports-fotter);
    background-size: cover;
    border-top: 0;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    display: block;
    cursor: pointer;
}

    .dashlet-one .panel-footer:hover {
        opacity: 0.87;
        transition-duration: 0.4s;
    }

    .dashlet-one .panel-footer p {
        color: #fff;
        cursor: pointer;
    }

.panel.child-1 {
    border: 1px solid rgb(21, 222, 138);
    box-shadow: inset 0 0px 20px -2px rgba(21, 222, 138, 0.30)
}

.panel.child-2 {
    border: 1px solid rgb(21, 139, 222);
    box-shadow: inset 0 0px 20px -2px rgba(21, 139, 222, 0.30)
}

.panel.child-3 {
    border: 1px solid rgb(201, 222, 21);
    box-shadow: inset 0 0px 20px -2px rgba(201, 222, 21, 0.30)
}

.panel.child-4 {
    border: 1px solid rgb(222, 104, 21);
    box-shadow: inset 0 0px 20px -2px rgba(222, 104, 21, 0.30)
}

.panel.child-5 {
    border: 1px solid rgb(222, 21, 202);
    box-shadow: inset 0 0px 20px -2px rgba(222, 21, 202, 0.30);
}

.panel.child-6 {
    border: 1px solid rgb(130, 222, 21);
    box-shadow: inset 0 0px 20px -2px rgba(130, 222, 21, 0.30);
}

.panel.child-7 {
    border: 1px solid rgb(0, 225, 255);
    box-shadow: inset 0 0px 20px -2px rgba(0, 225, 255, 0.30);
}

.panel.child-8 {
    border: 1px solid rgb(93, 94, 125);
    box-shadow: inset 0 0px 20px -2px rgba(93, 94, 125, 0.30);
}

.panel.child-1 i {
    color: rgb(21, 222, 138);
}

.panel.child-2 i {
    color: rgb(21, 139, 222);
}

.panel.child-3 i {
    color: rgb(201, 222, 21);
}

.panel.child-4 i {
    color: rgb(222, 104, 21);
}

.panel.child-5 i {
    color: rgb(222, 21, 202);
}

.panel.child-6 i {
    color: rgb(130, 222, 21);
}

.panel.child-7 i {
    color: rgb(0, 225, 255);
}

.panel.child-8 i {
    color: rgb(93, 94, 125);
}

.EventPopup {
    cursor: move !important;
}

.eventPopupBody #curve_chart, .eventPopupBody #curve_chart2 {
    position: relative;
    left: -20px;
    height: 250px;
    background: #d6dadf;
}

.eventPopupBody .product-slider {
    padding: 4px !important;
    border: 1px solid #697389;
}

.modal-body > .product-slider {
    height: calc(100vh - 90px) !important;
}

.eventPopupBody {
    padding: 0 !important;
}

.eventPopupBodySection {
    height: calc(100vh - 125px) !important;
}

.eventPopupBodySection2 {
    height: calc(100vh - 120px) !important;
}

.eventAnalyze_data {
    position: absolute;
    height: 110px;
    width: 230px;
    background: #000000c7;
    bottom: 5px;
    font-size: 12px;
    color: #d6d6d6;
    padding: 8px;
    margin-left: 3px;
    border-radius: 4px;
}

.analyzeSection2 {
    height: 100vh !important;
}

.analyzeSection {
    height: calc(100vh - 50px) !important;
}

.event_analyze_section .lb-head {
    background: none;
}

    .event_analyze_section .lb-head i {
        float: none !important;
    }

.event_analyze_section .showbar .fa-cog {
    color: var(--theme-color);
}

.popover-content {
    background: rgba(0, 0, 0, 0.78) !important;
}

.popover {
    padding: 0px !important;
}

    .popover.top > .arrow:after {
        border-top-color: #3b3b3b !important;
    }

/*.event_analyze_section {*/
    /*width: 97%;*/
    /*width: 100%;
    position: absolute;
    background: #fff;
    top: 0;
    z-index: 3;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
}*/

    .event_analyze_section h5 {
        padding: 0 6px;
        border-left: 3px solid var(--theme-color);
        font-size: 12px!important;
    }

.event_popup_table tbody tr td:first-child {
    width: 25%;
}

.eventAnalyzeHeader {
    background: #F1F2F2;
    height: 35px;
    line-height: 35px;
}

    .eventAnalyzeHeader h6 {
        font-size: 13px;
        letter-spacing: 0.6px;
    }

.EventPopup_table {
    color: #3c4451;
    font-size: 11px;
    margin-bottom: 0 !important;
}

.EventPopup .foot {
    padding: 5px 10px;
    background: aliceblue;
    line-height: 23px;
}

    .EventPopup .foot i {
        cursor: pointer
    }

    .EventPopup .foot .btn {
        padding: 3px 9px;
        font-size: 11px;
        border-radius: 4px;
        letter-spacing: 0.4px;
        border: 1px solid transparent;
    }

#x {
    border: none;
    font-size: 15px;
    z-index: 1;
    background: none;
    padding: 0;
}

.EventPopup {
    width: 350px;
    position: absolute;
    top: 5px;
    margin: auto;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 5px;
}

    .EventPopup .col-md-3, .EventPopup .col-md-4, .EventPopup .col-md-5 {
        padding: 0;
    }

.speed_limit {
    color: black;
    width: 17px;
    height: 17px;
    padding: 1px;
    background: #fff;
    border-radius: 50px;
    border: 1.2px solid red;
    display: inline-block;
    text-align: center;
    font-size: 8px;
    line-height: 2;
    margin: 0px 4px;
}

.EventPopup_header {
    color: #fff;
    font-size: 12px;
    padding: 7px 14px 5px;
    height: auto;
}

.live_gallery {
    height: calc(100vh - 490px);
    overflow-y: scroll;
}

    .live_gallery .live_thumb img, .live_gallery .live_thumb video {
        height: 76px;
        width: 78px;
        object-fit: initial;
        cursor: pointer;
        background: #e6e6e6;
    }

        .live_gallery .live_thumb img:hover {
            cursor: pointer;
            transition: 0.2s ease-in;
        }

.selectvideoTable thead tr th {
    background: #0a66d6;
    /*background: -moz-linear-gradient(left, #0a66d6 0%, #245ab7 49%, #1572e8 100%);
    background: -webkit-linear-gradient(left, #0a66d6 0%,#245ab7 49%,#1572e8 100%);
    background: linear-gradient(to right, #0a66d6 0%,#245ab7 49%,#1572e8 100%);*/
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a66d6', endColorstr='#1572e8',GradientType=1 );
    color: #f4f7f9;
    background: var(--main-header);
}

.selectvideoTable tr {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1px;
}
/*-------------------Here Maps------------------*/
.H_ib_body {
    /*    font-family: 'VarelaRound' !important;
    letter-spacing: 0.5px;
    min-width: 335px !important;
    border-radius: 3px !important;
    padding: 5px !important;
    color: #404a57;
    background: rgb(242, 242, 242) !important;
    border: 5px solid #ffffff;
    outline: 1px solid #73bfff;*/
    font-family: 'VarelaRound' !important;
    letter-spacing: 0.5px;
    min-width: 288px !important;
    border-radius: 0px !important;
    padding: 0px !important;
    color: #ffffff;
    background: #2f3b53 !important;
    border: 2px solid #ffffff !important;
    outline: 1px solid #73bfff !important;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
}

.H_ib {
    fill: #fff !important;
    fill-opacity: 3;
}

.H_ib_close svg.H_icon {
    /*  fill: #65737f !important;*/
    fill: #d3d3d3 !important;
    margin-top: 1px;
    height: 8px !important;
}
.H_ib_content .pop-live .time {
    color: #99ffae !important;
}

.H_ib_content .pop-live {
    background: #2f3b53 !important;
    color: white !important;
    font-size: 13px;
    padding: 3px 0;
    font-weight: 400;
    max-width: 430px;
    min-width: 250px;
}
.H_ib_content {
    margin: 5px !important;
}

    .H_ib_content .pop-live .h_pop_head {
        color: #99ffae !important;
        font-weight: 500;
        font-size: 15px;
        letter-spacing: 0.3px;
        padding-bottom: 5px;
        border-bottom: 1px solid #ebebec;
        margin: 0;
        line-height: 1.1;
        font-family: 'Roboto';
    }
/*-------------------Here Maps------------------*/
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    border: 0;
}

.table-bordered {
    border: 1px solid #f4f4f4;
}

    .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
        border: 1px solid #f4f4f4;
        vertical-align: middle;
    }

.table th, .table tr td {
    padding: 6px 10px;
    font-weight: 100;
    font-size: 12px;
}
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/*
 * Component: modal
 * ----------------
 */
.modal {
    background: none !important;
    top: 50px;
    right: initial !important;
    bottom: 0;
    width: 100%;
    z-index: 0;
}

.modal-header, .modal-header .modal-title {
    font-size: 14px;
    /*color: #0cc652;*/
    color: var(--btn-primary);
    font-weight: 400;
    letter-spacing: 0.4px;
}

.modal .close {
    color: var(--icon-color);
    /*color: #0cc652 !important;*/
    opacity: 1 !important;
}

    .modal .close:focus {
        border: none;
        outline: none
    }

.modal-dialog {
    margin: 0 auto;
}
.modal-dialog {
  background: white;
}
.modal-content {
    border-radius: 0;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    border: 0;
}

@media (min-width: 768px) {
    .modal-sm {
        width: 423px;
    }

    .form-inline .form-control {
        width: 100%;
    }
}

.modal-header {
    background: #f2f2f2;
    border-bottom-color: #f4f4f4;
    height: 40px;
    padding: 10px;
}

.modal-footer {
  border-top-color: #f4f4f4;
  background: #f4f4f4;
}

.modal.left .modal-dialog, .modal.right .modal-dialog {
    position: fixed;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}
/*Right*/
.modal.right.fade .modal-dialog {
    right: -320px;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}

.settings .modal-dialog {
    width: 860px;
}

.modal.right {
    left: auto !important;
}

    .modal.right .modal-body {
        /*height: calc(100vh - 140px);*/
    }

@media (min-width: 1200px) {
    .modal-lg {
        width: 1200px;
        margin-top: 0;
        margin-bottom: 0;
        top: 50px;
    }
}

.settings .modal-lg, .modal-upload .modal-lg {
    width: 72.5%;
    margin-top: 0;
    margin-bottom: 0;
}

.mapSettingsModal .modal .modal-body {
    height: calc(100vh - 130px);
    padding: 4px;
}

.modal.right.fade.in .modal-dialog {
    right: 0;
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0);
    z-index: 4;
    left: initial !important;
}

.lock .modal {
    z-index: 9999;
    top: 0 !important
}

.lock .w3_info {
    /*flex-basis: 50%;
    -webkit-flex-basis: 50%;*/
    padding: 10px;
    /*border-top-left-radius: 125px;
    border-bottom-left-radius: 125px;*/
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,0), 0 1px 8px rgba(0,0,0,.23);
}

.lock .w3_info2 {
    padding-top: 5px;
    color: aliceblue;
    font-size: 12px;
}

.lock input[type="text"], .lock input[type="email"], .lock input[type="Password"] {
    text-align: left;
    text-transform: capitalize;
    letter-spacing: 1px;
    padding: 10px 10px 10px 5px;
    width: 90%;
    display: inline-block;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
    color: #525252;
    font-size: 13px;
}

.lock .input-group {
    width: 100%;
    padding: 0 0 0 5px;
    background: #ececec;
}

.lock .input-group-addon {
    cursor: pointer;
    padding: 8px 15px;
    border: 0;
    width: auto;
    height: 30px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

    .lock .input-group-addon:last-child {
        border: 0;
        padding: 12px 18px;
        height: auto;
        background: var(--theme-color);
        margin-left: 5px;
        color: #fff;
    }

.lock .bord {
    border: 1px solid #2a2a2a;
    padding: 20px;
    margin: 0;
}

.lock .log-stuff {
    font-size: 12px;
    font-size: 12px;
    padding: 8px 0 0;
    color: #686868;
}

.lock .lock-email {
    padding: 8px 0 0;
    font-size: 16px;
    color: #2b303b;
}

.lock .lock-form {
    display: flex;
    padding-top: 4px;
}

.lock .user-style {
    background: #eeeeee;
    border-radius: 80%;
    padding: 15px;
    height: 155px;
    width: 155px;
}

    .lock .user-style .user-image {
        height: 100%;
    }

.lock .lock-ico {
    position: absolute;
    bottom: 30px;
    right: 8px;
    color: var(--theme-color);
    background: #fff;
    padding: 10px;
    border-radius: 50%;
    border: 2px solid var(--theme-color);
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}

.nav-pills > li {
    padding: 0;
    font-size: 12px;
}

.lock .nav-pills .tab-content {
    border: 0;
}

.lock .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    top: 0;
}

.lock .modal-body {
    display: grid;
    justify-content: center;
    height: 100%;
    padding: 10% 0;
}

.lock .modal-header, .lock .modal-footer {
    border: none;
}

.lock .modal-content {
    min-height: 100vh;
    border-radius: 0;
    /*background: rgba(0, 0, 0, 0.8);*/
    background: rgba(51, 71, 87, 0.95);
}
/*Reports*/
.layer div {
    font-family: VarelaRound !important;
}

.trv-report-viewer .k-i-arrow-s:before, .trv-report-viewer .k-i-arrow-60-down:before {
    content: "\2191";
}

.k-widget.k-tooltip-validation {
    border-color: #0db04b !important;
    background-color: var(--theme-color) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    line-height: 17px !important;
    font-family: 'VarelaRound' !important;
}

.trv-pages-area > .trv-error-pane > .trv-centered {
    left: auto !important;
}

.trv-pages-area .trv-error-pane {
    top: 30% !important;
    left: 35% !important;
}

.k-autocomplete.k-state-border-down, .k-autocomplete.k-state-border-up, .k-datepicker-calendar, .k-dropdown-wrap.k-state-active, .k-filebrowser .k-image, .k-grid .k-filter-options, .k-menu .k-menu-group, .k-multiselect.k-state-focused, .k-picker-wrap.k-state-active, .k-popup, .k-time-popup, .k-tooltip {
    box-shadow: none !important;
}

.k-menu .k-group {
    border: 1px solid #8f9293 !important;
}

.trv-nav input {
    width: 1em !important;
    text-align: right;
    border: 0;
    font-size: 13px;
    background: none;
}

.k-calendar .k-alt, .k-calendar th, .k-dropzone-hovered, .k-footer-template td, .k-grid-footer, .k-group, .k-group-footer td, .k-grouping-header, .k-pager-wrap, .k-popup, .k-toolbar, .k-widget .k-status {
    background: #fff !important
}

.k-menu .k-menu-scroll-button:hover, .k-menu .k-state-hover > .k-link {
    background: rgb(42,48,59) !important;
    background: -moz-linear-gradient(left, rgba(42,48,59,1) 0%, rgba(77,97,107,1) 50%, rgba(42,48,59,1) 100%) !important;
    background: -webkit-linear-gradient(left, rgba(42,48,59,1) 0%,rgba(77,97,107,1) 50%,rgba(42,48,59,1) 100%) !important;
    background: linear-gradient(to right, rgba(42,48,59,1) 0%,rgba(77,97,107,1) 50%,rgba(42,48,59,1) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a303b', endColorstr='#2a303b',GradientType=1 ) !important;
    color: #fff !important;
    border-radius: 1px !important;
}

.k-popup li {
    display: block !important;
    float: none !important;
    font-size: 12px;
    padding: 3px;
}

    .k-popup li a {
        border: none !important;
    }

.k-menu .k-item > .k-link, .k-menu-scroll-wrapper .k-item > .k-link, .k-popups-wrapper .k-item > .k-link {
    padding: 7px 10px 7px 10px !important;
    line-height: initial !important;
    font-size: 13px !important;
}

#reportViewer1 {
    width: 100% !important;
    position: relative !important
}

.trv-nav .trv-menu-large:first-child li:nth-child(1), .trv-nav .trv-menu-large:first-child li:nth-child(2), .trv-nav .trv-menu-large:first-child li:nth-child(3), .trv-nav .trv-menu-large:first-child li:nth-child(14), .trv-nav .trv-menu-large:first-child li:nth-child(15), .trv-nav .trv-menu-large:first-child li:nth-child(16), .trv-nav .trv-menu-large:first-child li:nth-child(17), .trv-nav .trv-menu-large:first-child li:nth-child(18) {
    display: none;
}

.trv-nav .trv-menu-large:first-child li:nth-child(9), .trv-nav .trv-menu-large:first-child li:nth-child(10), .trv-nav .trv-menu-large:first-child li:nth-child(11), .trv-nav .trv-menu-large:first-child li:nth-child(13) {
    float: right;
}

    .trv-nav .trv-menu-large:first-child li:nth-child(4) a, .trv-nav .trv-menu-large:first-child li:nth-child(5) a, .trv-nav .trv-menu-large:first-child li:nth-child(7) a, .trv-nav .trv-menu-large:first-child li:nth-child(8) a, .trv-nav .trv-menu-large:first-child li:nth-child(9) a, .trv-nav .trv-menu-large:first-child li:nth-child(10) a, .trv-nav .trv-menu-large:first-child li:nth-child(11) a, .trv-nav .trv-menu-large:first-child li:nth-child(12) a, .trv-nav .trv-menu-large:first-child li:nth-child(13) a {
        color: #01091c;
        margin: 0 2px;
    }

.k-dropdown .k-state-focused, .k-filebrowser-dropzone, .k-list > .k-state-hover, .k-mobile-list .k-edit-label.k-check:active, .k-mobile-list .k-item > .k-label:active, .k-mobile-list .k-item > .k-link:active, .k-mobile-list .k-recur-view .k-check:active, .k-pager-wrap .k-link:hover, .k-scheduler .k-scheduler-toolbar ul li.k-state-hover, .k-splitbar-horizontal-hover:hover, .k-splitbar-vertical-hover:hover, .k-state-hover, .k-state-hover:hover {
    color: #003f59;
    background: inherit !important;
    border: 0 !important;
}

/*.k-animation-container {
    margin-top: -280px !important;
    left: -129px !important;
}*/

.trv-nav .trv-menu-large, .trv-nav .trv-menu-small {
    border: none !important;
    background: #f2f2f2;
    padding: 3px;
    width: 100%;
    position: fixed;
}

.reports .trv-nav .trv-menu-large, .reports .trv-nav .trv-menu-small {
    width: 48% !important;
}

.trial {
    display: none;
}

.trv-pages-area {
    border: none !important;
}

.trv-nav {
    height: 36px;
    border: none !important;
    position: fixed;
    z-index: 1;
    bottom: 0;
    background: #f2f2f2;
    width: 49%;
}

.sheet, page1 {
    transform: initial !important;
    margin: 0 auto !important;
}

.trv-report-page {
    height: auto !important;
    width: 700px !important;
    overflow-x: hidden !important;
}

#content-container {
    padding: 0px !important;
}

.k-autocomplete, .k-block, .k-button-group .k-tool, .k-calendar th, .k-content, .k-dropdown-wrap, .k-dropzone-active, .k-editable-area, .k-editor-dialog .k-tabstrip-items, .k-filter-row > th, .k-footer-template td, .k-grid td, .k-grid td.k-state-selected, .k-grid-content-locked, .k-grid-footer, .k-grid-footer-locked, .k-grid-footer-wrap, .k-grid-header, .k-grid-header-locked, .k-grid-header-wrap, .k-group, .k-group-footer td, .k-grouping-header, .k-grouping-header .k-group-indicator, .k-header, .k-input, .k-pager-refresh, .k-pager-wrap, .k-pager-wrap .k-link, .k-panel > .k-item > .k-link, .k-panelbar .k-content, .k-panelbar .k-panel, .k-panelbar > .k-item > .k-link, .k-popup.k-align .k-list .k-item:last-child, .k-separator, .k-slider-track, .k-splitbar, .k-state-default, .k-state-default .k-select, .k-state-disabled, .k-textbox, .k-textbox > input, .k-tiles, .k-toolbar, .k-tooltip, .k-treemap-tile, .k-upload-files, .k-widget, .trv-pages-area.interactive .trv-page-container .trv-page-wrapper.active .trv-report-page {
    border: none !important
}

.new_multicalander{
    position:relative !important;
}
  .new_multicalander .k-calendar-header {
    padding-block: 4px;
    padding-inline: 4px;
    min-width: 256px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    background: var(--btn-primary);
    color: white;
  }

.k-time-header {
  background: var(--btn-primary) !important;
  color: white !important;
}
  .k-time-header .k-time-now:hover, .k-time-selector-header .k-time-now:hover {
    color: #d6534a;
  }

.k-calendar .k-button-flat-primary {
  color: var(--btn-primary) !important;
}

  .new_multicalander .k-calendar {
    /*box-shadow: 0px 0px 1px gray !important;
    border-color: rgba(0, 0, 0, 0.08);
    color: #424242;
    background-color: #ffffff;*/
    position: absolute !important;
    z-index: 9;
    right: 0px;
    top: 33%;
    width: 477px !important;
  }


.k-calendar, .k-timeselector {
  box-shadow: 0px 0px 4px gray !important;
}

.bs-datepicker {
  box-shadow: 0 0 3px 0 #d9d3d3 !important;
}
.theme-green .bs-datepicker-head {
  background-color: var(--btn-primary) !important;
}
.bs-datepicker-head {
  border-radius: 0 !important;
}
.bs-datepicker-container {
  padding: 0px !important;
}
.ngx-pagination {
  margin-left: 0;
  margin-bottom: 0rem !important;
}

.trv-pages-area.interactive .trv-page-container .trv-page-wrapper .trv-report-page {
    width: 100% !important;
    padding: 0 !important;
}

.weekbg {
    background: #f2f2f2;
    height: 20px;
    width: 20px;
    line-height: 21px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    border-radius: 100%;
    margin: 0 2px;
    font-size: 11px;
}

.weekbg_driver {
    display: inline-block;
    background: #f2f2f2;
    padding: 5px;
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 19.6px;
    border-radius: 100%;
    margin-right: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.weekbg_driver-active {
    background: #f39c12 !important;
    color: #ffffff !important;
}

.weekbg-active {
    background: var(--theme-color) !important;
    color: #ffffff !important;
}

.weekbg-Inactive {
    background: #f2f2f2 !important;
}

.weekbg:hover {
    background: var(--theme-color);
    color: #ffffff;
    transition-duration: 0.4s;
}

.tab {
    text-align: center;
}

    .tab .nav-tabs {
        display: inline-block;
        position: relative;
        border-bottom: none;
    }

        .tab .nav-tabs li {
            width: 43px;
        }

            .tab .nav-tabs li a {
                display: block;
                height: 59px;
                font-weight: 700;
                color: #999;
                text-align: center;
                border-radius: 0;
                border: none;
                overflow: hidden;
                z-index: 1;
                position: relative;
            }

.nav-tabs li a:hover {
    background: none;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    border-width: 0;
}

.tab .nav-tabs li a span {
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #f4f4f4;
    margin: auto;
    font-size: 14px;
    color: #7d7d7d;
    border-radius: 5px;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    transform: rotate(45deg);
}

.tab .nav-tabs li.active a span {
    background: var(--nav-tabs);
    /*background: #0cc652;*/
    color: #fff;
}

.tab .nav-tabs li a span i {
    transform: rotate(-45deg);
}

.tab .nav-tabs li.active a {
    border-bottom: 2px solid var(--nav-tabs);
    /*border-bottom: 2px solid #0cc652;*/
    cursor: pointer;
    background: none;
}

.tab-content {
    padding: 13px 16px;
    margin-top: -5px;
    color: #757575;
    line-height: 23px;
    text-align: left;
    border-top: 1px solid #e5e5e5;
    font-size: 12px;
}

.navbar-nav > .user-menu > .dropdown-menu {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    padding: 0;
    border-top-width: 0;
    width: 280px;
}

    .navbar-nav > .user-menu > .dropdown-menu, .navbar-nav > .user-menu > .dropdown-menu > .user-body {
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }

        .navbar-nav > .user-menu > .dropdown-menu > li.user-header {
            padding: 10px;
            text-align: center;
        }

            .navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
                z-index: 5;
                height: 90px;
                width: 90px;
                border: 3px solid rgba(255, 255, 255, 0.2);
            }

            .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p {
                z-index: 5;
                font-size: 15px;
                margin-top: 10px;
            }

                .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p > small {
                    display: block;
                    font-size: 12px;
                }

        .navbar-nav > .user-menu > .dropdown-menu > .user-body {
            padding: 15px;
            border-bottom: 1px solid #f4f4f4;
            border-top: 1px solid #dddddd;
        }

            .navbar-nav > .user-menu > .dropdown-menu > .user-body:before, .navbar-nav > .user-menu > .dropdown-menu > .user-body:after {
                content: " ";
                display: table;
            }

            .navbar-nav > .user-menu > .dropdown-menu > .user-body:after {
                clear: both;
            }

            .navbar-nav > .user-menu > .dropdown-menu > .user-body a {
                color: #444 !important;
            }

@media (max-width: 991px) {
    .navbar-nav > .user-menu > .dropdown-menu > .user-body a {
        background: #fff !important;
        color: #444 !important;
    }
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
    padding: 10px;
    border-top: 1px solid #eee;
}

    .navbar-nav > .user-menu > .dropdown-menu > .user-footer:before, .navbar-nav > .user-menu > .dropdown-menu > .user-footer:after {
        content: " ";
        display: table;
    }

    .navbar-nav > .user-menu > .dropdown-menu > .user-footer:after {
        clear: both;
    }

    .navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default {
        color: #666666;
        font-size: 13px;
    }

@media (max-width: 991px) {
    .navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default:hover {
        background-color: #f9f9f9;
    }
    .replaymain #videoChannelSection .show_content_videoinner {
        position: absolute !important;
        z-index: 1;
        text-align: center;
        color: #ffffff;
        margin: auto;
        transform: translate(113px, 170px) !important;
    }
}

.navbar-nav > .user-menu .user-image {
    float: left;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 10px;
    margin-top: -2px;
}

@media (max-width: 767px) {
    .navbar-nav > .user-menu .user-image {
        margin-right: 0;
    }

    .modal-header {
        font-size: 12px !important;
    }
    .logo-main {
        background: var(--logowhite-login);
        background-size: contain;
        background-repeat: no-repeat;
        width: 94px;
        float: left;
        padding: 13px 0;
        margin-top: 10px;
    }
}


@media (min-width: 1600px) and (max-width: 1920px) {
    .small_no_video_txt {
        position: absolute;
        /* bottom: 21%; */
        left: 48%;
        color: white;
        /* top: 40%; */
        transform: translate(-49%, 235%);
    }

    .carousel slide .small_no_video_txt {
        position: absolute;
        /* bottom: 21%; */
        left: 48%;
        color: white;
        /* top: 40%; */
        transform: translate(-49%, 333%);
    }


  /*  #videoChannelSection video {
        height: 400px;
    }*/
}

@media only screen and (min-width: 300px) and (max-width: 450px) {

    .mb_pr_0 {
        padding-right: 0px !important;
    }
    .mb_pl_15 {
        padding-left: 15px !important;
    }
    .student-section {
        background: white;
        padding: 7px 2px !important;
        margin-bottom: 0px !important;
        box-shadow: none;
        border-top: 1px solid #dddddd !important;
        border-bottom: 0px solid #cdcdcd !important;
        border-left: none !important;
        border-right: none !important;
    }
}

@media (min-width: 768px) {
    .sidebar-mini.sidebar-collapse .main-sidebar .logo {
        width: 50px;
        position: fixed;
        color: #fff;
        background: #303234 !important;
        z-index: 11 !important;
    }
}

.parentStatus {
    position: absolute;
    position: absolute;
    right: 10px;
    top: 20px;
}

.parentStatus_body {
    height: calc(75vh - 123px);
    background: white;
    padding: 10px;
}



/*.Default-fleetly {
    display: none;
}*/

.parent_sts_main {
  background: #f9f9f9;
}

.parent_sts_main .logo-login {
    width: 260px !important;
    height: 100px !important;
    margin: 5px auto;
    margin-bottom: 0px;
    background-image: var(--logo-login);
    background-size: contain;
    background-repeat: no-repeat;
}
.parent_sts_main .main-login {
    height: calc(100vh - 0px);
    width: 100vw;
    overflow-x: hidden;
    overflow-y: overlay;
    padding: 0 15px;
    vertical-align: middle;
    display: table-cell;
}

.parent_main_heading {
   /* font-weight: 700;*/
}

.parent_bod_left_h5 {
    border-left: 3px solid var(--btn-primary);
    letter-spacing: 0.4px;
    color: #535c6e !important;
    padding-left: 3px !important;
}

.student-section {
    background: white;
    padding: 10px;
    margin-bottom: 20px;
    /* box-shadow: 1px 0px 3px #d2d2d2; */
    border: 1px solid #ededed;
}
    .parent-section .form-control-placeholder,
    .student-section .form-control-placeholder {
        position: absolute;
        transition: all 200ms;
        opacity: 0.7;
        left: 38px;
        padding: 6px 0 !important;
        margin: 0;
        font-size: 12px !important;
        letter-spacing: .4px;
    }

.parent_select_ddl {
    height: 30px !important;
    padding: 0px !important;
    color: #8e8e90 !important;
}

.parent_sts_main textarea {
    overflow: auto;
    width: 100%;
    padding: 10px 0;
    outline: none;
    background: transparent;
    margin: 0 0 27px 0;
    margin: 0 0 27px 0;
    background: #f2f2f2;
    border-radius: 3px;
    width: 100%;
    border: 1px solid rgba(228, 230, 234, 0.72);
}

.parent-admin_slide {
    position: absolute;
    right: 0px;
    top: -3px;
}
.parent-admin_setting_box {
    border: 1px solid rgb(240 240 240 / 95%);
    box-shadow: 0px 0px 7px rgb(237 237 237);
    padding: 10px;
    background: #ffffff;
}

.reivewrequest_settings {
    border: 1px solid rgb(227 227 227);
    box-shadow: inset 0 0px 20px -2px rgb(237 237 237 / 30%);
}

.reivewrequest_settingslink {
    font-size: 12px;
    color: #1a53d0;
    /* text-decoration: underline; */
}

.reivewrequest_settingslink_bg {
    margin: 15px 0px 7px 0px;
    background: #f7f7f7;
    border-radius: 3px;
    padding: 8px;
   /* box-shadow: 0px 0px 4px #bebebe;*/
}

.copy_url {
    background: var(--nav-tabs);
    padding: 7px 8px;
    color: white;
    border-radius: 50px;
    font-size: 14px;
    cursor: pointer;
}

.template_url {
    background: var(--nav-tabs);
    padding: 8px 8px;
    color: white;
    border-radius: 50px;
    font-size: 11px;
    cursor: pointer;
}

.parent_invitation_link .modal-footer {
    border-top-color: #f4f4f4 !important;
    padding: 8px !important;
    background: #f2f2f2;
}

.icon_template_url {
    position: absolute;
    right: 8px;
    top: 10px;
}

.main_template_url {
    position: relative;
    margin: 15px 0px 7px 0px;
    background: #f7f7f7;
    border-radius: 3px;
    padding: 4px;
    font-size: 10px;
}
.k-scheduler-header th {
  text-align: center;
  background: #8c8888 !important;
  color: white !important;
}
.k-scheduler-layout.k-scheduler-flex-layout {
  display: flex;
  flex-direction: column;
  border: 1px solid #d9d9d9 !important;
}
.k-scheduler-table td, .k-scheduler-table th {
  padding-block: 5px !important;
  border: 1px solid #d7d7d7;
}

.k-scheduler-table td {
  border: 1px solid #d7d7d7;
}
.k-scheduler table, .k-scheduler thead, .k-scheduler tfoot, .k-scheduler tbody, .k-scheduler tr, .k-scheduler th, .k-scheduler td, .k-scheduler div, .k-scheduler .k-scheduler-edit-dialog, .k-scheduler > * {
  border-color: darkgray !important;
}
.k-scheduler-table td, .k-scheduler-table th {
  font-weight: 500 !important;
}

.k-scheduler {
  border-bottom: 1px solid #d9d9d9 !important;
}

.color_low {
  color: #e47a3b;
}

.color_medium {
  color: #91b943;
}

.color_high {
  color: #c53a4a;
}

.color_gray {
  color: #777777;
}


/* Global Event Filerts Styles */

#eventfiltersSection .event-group-header,
#globalEventfiltersSection .event-group-header {
  background: #f6f6f6;
  border-radius: 2px;
  padding: 5px 8px;
}

#eventfiltersSection .event-group-body,
#globalEventfiltersSection .event-group-body {
  padding: 5px 8px;
  border: 1px solid #e8e8e8;
  margin-bottom: 10px;
  height: calc(48vh - 90px);
}

#eventfiltersSection .event-group-body2,
#globalEventfiltersSection .event-group-body2 {
  padding: 5px 8px;
  border: 1px solid #e8e8e8;
  margin-bottom: 10px;
  height: calc(26vh - 90px);
}

#eventfiltersSection .modal-dialog,
#globalEventfiltersSection .modal-dialog {
  width: 45.5% !important;
}

.bod_bottom_lite_gray {
  border-bottom: 1px solid #e8e8e8;
}

#Analyze_screen .gm-style button {
  margin-top: -7px !important;
  margin-right: 5px !important;
  font-size: 13px !important;
  padding: 0px !important;
  height: 20px !important;
  width: 28px !important;
}

  #Analyze_screen .gm-style button span {
    background: white;
    font-weight: 900;
    width: 16px !important;
    height: 20px !important;
    margin: 10px 8px !important;
  }

#Analyze_screen .gm-style-iw-ch {
  padding-top: 0px !important;
}


#webfleet_streaming .k-calendar-view {
background:white !important;
}

#webFleetTimelineNav .k-calendar-header .k-calendar-nav,
#parent12 .k-calendar-header .k-calendar-nav {
  display: none !important;
}

#parent12 .trail {
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999999999;
  /* transform: translate(-50px, 50px); */
}

#parent1 .k-calendar-infinite .k-calendar-view {
  padding-block: 0px;
  padding-inline: 16px;
  height: 288px;
  flex: 0 0 auto;
  display: flex;
  flex-flow: column nowrap;
  gap: 0;
  overflow: hidden;
  display: none;
}
#parent12 .k-calendar .k-content.k-scrollable,
#parent_main_kendo .k-calendar .k-content.k-scrollable {
  overflow-y: hidden;
}

#parent12 .k-calendar-infinite .k-calendar-view,
#parent_main_kendo .k-calendar-infinite .k-calendar-view {
  height: 275px;
}

.custom-slider .ngx-slider .ngx-slider-bar {
  background: #d8e0f3;
  height: 5px;
}

.custom-slider .ngx-slider .ngx-slider-selection {
  background: #54e552;
}

.custom-slider .ngx-slider .ngx-slider-pointer {
  width: 8px;
  height: 16px;
  top: auto;
  bottom: 0;
  background-color: #0d59bb;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  clip-path: polygon(49% 100%, 0 0, 100% 0);
}

  .custom-slider .ngx-slider .ngx-slider-pointer:after {
    display: none;
  }

.custom-slider .ngx-slider .ngx-slider-bubble {
  bottom: 14px;
  font-size: 12px;
  border: 1px solid #d7d7d7;
  font-size: 11px;
  background: #f7910c;
  color: white;
  border-radius: 5px;
  padding: 3px 8px;
}

.custom-slider .ngx-slider .ngx-slider-limit {
  font-weight: bold;
  color: orange;
}

.custom-slider .ngx-slider .ngx-slider-tick {
  width: 1px;
  height: 10px;
  margin-left: 4px;
  border-radius: 0;
  background: #ffe4d1;
  top: -1px;
}

  .custom-slider .ngx-slider .ngx-slider-tick.ngx-slider-selected {
    background: orange;
  }



/*.custom-slider .ngx-slider.animate .ngx-slider-bubble.ngx-slider-limit {
  transition:none !important;
  position: absolute;
  bottom: -24px !important;
  font-size: 11px;
  visibility: visible !important;
  font-weight: 500 !important;
  background: #0c76d1;
  border-radius: 4px;
  color: white !important;
  opacity: 1 !important;
}*/
.custom-slider .ngx-slider .ngx-slider-bubble.ngx-slider-limit {
  color: #ffffff;
  transition: none !important;
  position: absolute;
  bottom: -24px !important;
  font-size: 11px;
  visibility: visible !important;
  font-weight: 500 !important;
  background: #0c76d1;
  border-radius: 4px;
  opacity: 1 !important;
}


#replay_media_section .k-calendar-table {
  width: 100% !important;
}

#replay_media_section .k-calendar {
  border-color: rgba(0, 0, 0, 0.08);
  color: #424242;
  background-color: #ff000000 !important;
}

#replay_media_section .k-calendar-infinite .k-calendar-header {
  margin-left: -16px;
  margin-right: -16px;
  padding-block: 8px;
  padding-inline: 16px;
  width: auto;
  min-width: 0;
  border-bottom: 1px solid #dedede !important;
}
#replay_media_section .k-calendar {
  border: 1px solid #cacaca57;
  border-radius: 0px;
}

#replay_media_section .k-link {
  border: 1px solid #cacaca57;
  border-radius: 0px;
}

#replay_media_section .k-scrollable {
  box-sizing: content-box;
  overflow-x: hidden;
  overflow-y: auto;
  display: block;
  padding-right: 100px;
  padding-left: 100px;
  margin-left: -115px;
  margin-right: -115px;
}
#replay_media_section .k-calendar .k-content {
  box-sizing: content-box;
  overflow-x: hidden;
  overflow-y: auto;
  display: block;
  padding-right: 100px;
  padding-left: 100px;
  margin-left: -115px;
  margin-right: -115px;
}

  #replay_media_section .k-calendar .k-content.k-scrollable {
    overflow-y: hidden;
    border-top: 1px solid #cacaca57 !important;
  }


#replay_media_section .k-calendar .k-calendar-view .k-today .k-link {
  box-shadow: none !important;
  background: var(--btn-primary) !important;
  color: white !important;
  border: none !important;
}

#replay_media_section .k-calendar .k-calendar-th {
  color: #000000 !important;
}


#replay_media_section .k-disabled {
  opacity: 0.5;
  color: #30304b !important;
  background: #b1b1b173 !important;
  border-radius: 0px !important;
  border: 1px solid #a1a1a1;
}

#replay_media_section  .k-calendar-monthview .k-calendar-td {
  width: 32px;
  height: 32px;
  inline-size: var(--INTERNAL--kendo-calendar-cell-size, 32px);
  block-size: var(--INTERNAL--kendo-calendar-cell-size, 32px);
  color: #000000 !important;
}
#replay_media_section .k-calendar .k-calendar-td:hover .k-link {
  background: var(--btn-primary) !important;
  color: white !important;
}


#latest_stream_div .streaming_single_video_content {
  height: 81vh !important;
}

#latest_stream_div .streaming_single_video-thumb {
  height: 81vh !important;
  object-fit: fill;
}

#latest_stream_div .streaming_double_video_content {
  height: 81vh !important;
}

#latest_stream_div .streaming_double_video_thumb {
  height: 66vh !important;
  padding-top: 5vh;
}


.box1_new {
  padding: 5px 5px;
  margin: 0 4px;
  font-size: 14px;
  border: 1px solid #bac1c8;
  background: whitesmoke;
  cursor: pointer;
  display: inline-block;
}

  .box1_new i {
    font-size: 13px !IMPORTANT;
    border: none !important;
    padding: 0px !important;
    margin: 0px 1px !important;
  }

.box2_new {
  padding: 5px 3px;
  margin: 0 4px;
  font-size: 14px;
  border: 1px solid #bac1c8;
  background: whitesmoke;
  cursor: pointer;
  display: inline-block;
}

  .box2_new i {
    font-size: 10px !IMPORTANT;
    border: none !important;
    padding: 0px !important;
    margin: 0px 1px !important;
  }



@media (min-width: 1750px) and (max-width: 1920px) {
  #latest_stream_div .streaming_double_video_thumb {
    height: 61vh !important;
    padding-top: 7vh;
  }

  }

#Terms_modal .modal_dialog {
  width: 42% !important;
  margin: auto !important;
  left: 3% !important;
  top: 11% !important;
}

@media (min-width: 300px) and (max-width: 550px) {
  .mobile_mb_2 {
    margin-bottom: 20px;
  }
  .mobile_mb_0 {
    margin-bottom: 0px !important;
  }
  .Login_page_title {
    font-size: 17px !important;
  }
  .parent_bod_left_h5,
  .Studentt_bod_left_h5 {
    margin-top: 5px !important;
  }
  .btn-block {
    display: block;
    width: 47% !important;
    margin-bottom: 20px !important;
    margin: auto;
  }
  #stst_mobile_view .form-control-placeholder {
    position: absolute;
    transition: all 200ms;
    opacity: 0.7;
    left: 10px;
    padding: 10px 0;
    margin: 0;
    top: 0px;
  }

  .parent_sts_requestApproved_main .font_20 {
    font-size: 17px !important;
  }
  .parent_sts_requestApproved_main .parent_sts_main {
    background: #e4e5f7 !important;
    padding: 25px 12px !important;
  }
}

.bg_map {
  background: url(../../../assets/images/events_map.png);
  position: relative;
}

.coustom_tooltip_hover {
  display: none;
  background: #000000;
  position: absolute;
  padding: 6px;
  margin: 5px;
  box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
  top: -3px;
  left: 18px;
  font-size: 10px !important;
  border-radius: 8px 0px 10px 0px;
}
.coustom_tooltip:hover > .coustom_tooltip_hover {
  display: block;
  color: white;
  overflow-wrap: break-word;
  z-index: 99999999;
}
.coustom_tooltip2 {
  position: relative;
  cursor: pointer;
  min-height: 20px !important;
}
.coustom_tooltip_hover2 {
  display: none;
  background: #000000;
  position: absolute;
  padding: 6px;
  margin: 5px;
  box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
  top: -3px;
  left: 18px;
  font-size: 10px !important;
  border-radius: 8px 0px 10px 0px;
}

.coustom_tooltip2:hover > .coustom_tooltip_hover2 {
  display: block;
  color: white;
  overflow-wrap: break-word;
  z-index: 99999999;
}

.fa-3x {
  font-size: 3em;
}
#veh_hereMaps .driverFormDisplay {
  position: absolute;
  top: 0px;
  z-index: 9 !important
}
.view_reports_view .tab-content {
  padding: 0px 8px !important;
}

  .view_reports_view .tab .card-scroll {
    height: calc(100vh - 194px) !important;
  }

#settings_screen .lb-head-single h5 {
  margin: 5px 0px 0px 5px !important;
}


#new_vehicles_module_id .gm-style .controls.zoom-control {
  display: flex;
  flex-direction: column;
  height: auto;
  background: #2f3a53 !important;
  color: white !important;
  text-align: center !important;
  border-radius: 4px !IMPORTANT;
}