/*
 * 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');
}

.fullscreen {
    z-index: 9999;
    width: 100%;
    height: 100% !important;
    height: 100% !important;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
}

html,
body {
    height: 100%;
}

body {
    font-family: 'VarelaRound', sans-serif !important;
    font-weight: 400;
    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;
    }

.btn_satellite {
    position: absolute;
    top: 10px;
    left: 5px;
}

.btn_satellite_active {
    padding: 5px 4px !important;
    border-radius: 50px !important;
    background: #f4043b !important;
    border: 0px solid #535353 !important;
    line-height: 20px;
    width: 30px;
    display: inline-block;
    height: 29px;
    text-align: center;
    border: 1px solid white !important;
}

.btn_satellite_inactive {
    padding: 5px 4px !important;
    border-radius: 50px !important;
    background: #ffffff !important;
    border: 0px solid #535353 !important;
    line-height: 20px;
    width: 30px;
    display: inline-block;
    height: 29px;
    text-align: center;
    border: 1px solid white !important;
    box-shadow: 0px 0px 3px red;
}

    .btn_satellite_active i {
        font-size: 15px !important;
        color: #ffffff !important;
        line-height: 12px;
    }

    
    .btn_satellite_inactive i {
        font-size: 15px !important;
        color: rgb(42,48,59) !important;
        line-height: 12px;
    }

.z_index99{
    z-index:99 !important;
}

#main_video_request .modal-body {
    position: relative;
    overflow: visible;
}
#main_video_request  .dropdown-select .dropdown-menu {
    left: auto;
    background: white;
}
#main_video_request .btn.btn-default-1 {
    box-shadow: none;
    border-radius: 3px;
    overflow: hidden;
    max-width: 181px;
    height: 30px;
    text-overflow: ellipsis;
    position: relative;
    padding: 6.1px 10px;
    min-width: 100% !important;
}
#main_video_request .multiselect-parent .dropdown-toggle {
    background: #fff;
    min-width: 315px;
    text-align: left;
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition-duration: .4s;
    color: #6f6f6f;
}
.main-sidebar ::-webkit-scrollbar-thumb {
    /*background: rgb(255 60 60 / 65%) !important;*/
    background: rgb(157 157 157 / 65%) !important;
    border-radius: 12px !important;
}

#reportViewer1 .k-menu .k-animation-container {
    padding-left: 1px;
    /*margin-top: 20px !important;*/
    width: 151px;
    height: 108px !important;
    overflow: hidden;
    z-index: 10002;
    top: 210px !important;
    left: -129px;
    box-sizing: content-box;
    position: absolute;
}



#reportViewer1 .trv-menu-large > li.trv-menu-toggleable.k-selected > .k-menu-link > .k-icon {
    color: #416aff;
}

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

#view_modal3 .modal-dialog {
    width: 41% !important
}
.btn_gary2 {
    border: none !important;
    background: #888888;
    color: white;
}

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

.color_black_txt {
    color: #4d575e;
}

.scroll_gutter_auto {
    scrollbar-gutter: auto !IMPORTANT;
}
.newvideo_img_video {
    width: 26px;
    height: 27px;
    border-radius: 100%;
    display: inline-block;
    justify-content: center;
    align-items: center;
    padding: 2px 1px;
    margin-right: 5px;
    margin-top: -5px !important;
    background: white;
    position: relative;
}
    .newvideo_img_video img {
        width: 18px;
        height: auto;
        position: absolute;
        left: 4px;
        top: 5px;
    }
#videoChannelSection {
    overflow: hidden !important;
    z-index: 1050 !important;
}

    #videoChannelSection .video_modal_popup .col-xs-6 {
         width: 50% !important; 
    }

    #videoChannelSection video {
        width: auto;
        height: 35vh;
        /*width: 100%;
        height: 310px;*/
}

#drop1 .text-center, #drop2 .text-center, #drop3 .text-center,
#drop4 .text-center, #drop5 .text-center, #drop6 .text-center,
#drop7 .text-center, #drop8 .text-center, #drop9 .text-center {
    background: #373636;
    border: 1px solid #4e4e4e;
    margin-top: 5px;
}
#drop1, #drop2, #drop3, #drop4
#drop5, #drop6, #drop7, #drop8, #drop9 {
  /*  border: 0px solid #4a4949;
    background: #373636;*/
    
}
.all_video_channel .product-slider #thumbcarousel .item .thumb video {
    height: 130px !important;
}

#main_video_request_row1 .btn[disabled] {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    opacity: inherit;
    background: #f2f2f2;
}


#parent_sts_page 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;
}
#parent_sts_page .student_no {
    font-size: 14px;
    color: #6d89f1;
    border: 1px solid #e2e8fe;
    display: inline-block;
    padding: 5px 10px;
    margin-bottom: 35px;
}
.add_student {
    background: var(--btn-primary) !important;
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 800;
    line-height: 2px;
    text-align: center;
    float: right;
}

.add_student i {
    font-size: 10px;
    line-height: 21px;
}
.sts_div_hed_bod_left {
    border-left: 3px solid var(--heading-color);
    letter-spacing: 0.4px;
    color: #535c6e !important;
    padding-left: 3px !important;
    margin-bottom: 35px !important;
}

.no_video_txt {
    position: absolute;
    bottom: 40%;
    left: 48%;
    color: white;
    top: 50%;
    transform: translate(-49%, -35%);
    border: 1px solid white !important;
    padding: 2px 10px 0px;
    height: 19px;
}
.no_video_txt p {

    font-size: 10px !IMPORTANT;
}

.vehicleManagementAdd_main .radio-inline {
    margin-left: 0px !important;
    padding-left: 0px !important;
}
/*----- New Select Checkbox--------*/

.hide_box {
    visibility: hidden
}

.Proximity_Search .gm-style button {
    margin: 0px !important;
    z-index: 10;
    position: absolute;
    right: 43px !important;
    top: 51px !important;
    width: 41px !important;
    height: 29px !important;
}
.Proximity_Search #panel {
    top: 20px !important;
    right: 48px;
    background: white;
    padding: 5px;
}
    .Proximity_Search #panel .MapSearch {
        width: 240px;
        height: 24px;
    }
.Proximity_Search .gm-style .gm-style-iw-d {
    overflow: auto !important;
    color: white;
}


.Proximity_Search .option_bar_geo {
    position: absolute;
    width: 35px;
    color: #fff;
    z-index: 2;
    right: 8px;
    top: 20px;
}

.Proximity_Search .gm-ui-hover-effect {
    opacity: 9 !important;
    top: -10px !important;
    color: white !important;
    outline: none !important;
    margin: 0px !important;
    z-index: 10;
    position: absolute;
    right: -6px !important;
    top: -7px !important;
    width: 48px !important;
    height: 29px !important;
}
.close_red {
    color: red;
    z-index: 1;
    right: 3px;
    background: white;
    border-radius: 50px;
    position: absolute;
}
.new_checkbox_one {
    display: inline-block;
    float: left;
    position: relative;
    transition: transform .2s;
}
    .new_checkbox_one:hover {
        transform: scale(1.5);
        z-index:9;
    }
    .new_checkbox_one img {
        cursor: pointer !important;
        position: relative;
        border: 1px solid #d5d5d5 !important;
        padding:0px !important;
    }

.new_checkbox_one input[class^="hello1"] {
    display: none;
}

.new_checkbox_one input[type="checkbox"] {
    display: none;
}

    .new_checkbox_one label:before {
        background-color: white;
        color: white;
        content: " ";
        display: block;
        border-radius: 4px;
        border: 1px solid #f6f6f6;
        position: absolute;
        top: 5px;
        z-index: 11;
        left: 7px;
        width: 14px;
        height: 15px;
        text-align: center;
        line-height: 14px;
        transition-duration: 0.4s;
        transform: scale(0);
    }

    .new_checkbox_one :checked + label:before {
        content: "✓";
        background-color: #162ad3;
        transform: scale(1);
    }



/*----- New Select Checkbox ends--------*/




.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;
}*/


.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;
}
.howen_iframe iframe {
    /*height: 645px !important;*/
    border: 1px solid #ebebeb;
}
.color_white {
    color: white !important;
}
.color_red {
    color: red !important;
}
.color_green {
    color: green !important;
}
.color_orange {
    color: orange !important;
}
.channel_txt {
    color: #fff;
}
.gm-bundled-control div {
    display: none !important;
}
.d_flex{
    display:flex;
}
.pos_absolute{
    position:absolute;
}

.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: 17% !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;
}

.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;
}
.width_12 {
    width: 12% !important;
}

#IPSecurityModel .panel-default {
    border-color: #ddd;
    margin: 5px;
    border-top: 2px solid gainsboro !important;
}
.width_100_percentage {
    width: 100% !important;
}
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(--heading-color) !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;
}

.ring-load img {
    position: relative;
    left: 16px;
    top: 15px;
    width: 35px;
}

.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;
}
.btn-back {
    background: #828282 !important;
    color: white !important;
}
.icon_color_dark {
    color: #535c6e !important;
}

.btn-dark {
    background: #535c6e;
    color: white;
}
    .btn-dark:hover {
        background: var(--btn-primary);
        color: white;
    }

.admin .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
}



.new_btn_actions {
    background: var( --theme-color);
    color: white !important;
}

.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);
}

    .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: 230px;
        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);
}

.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);
}


.badge-offline1 {
    color: #475966;
}

.badge-online1 {
    color: #57be5c;
}

.badge-parked1 {
    color: #207ce5;
}

.badge-offline1 i,
.badge-online1 i,
.badge-parked1 i {
    color: inherit;
}

.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: 1.2rem;
    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-new-gray {
    background: #666;
}
.btn.btn-default-1 {
    box-shadow: none;
    border-radius: 3px;
    overflow: hidden;
    max-width: 171px;
    height: 32px;
    text-overflow: ellipsis;
    position: relative;
    padding: 6.1px 10px;
}


/*.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;
}

    .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(--heading-color) !important;
    position: absolute;
    right: 61px !important;
    font-weight: bold !important;
    font-size: 15px !important;
    box-shadow: none !important;
}
.btn-success.focus, .btn-success:focus {
    color: #fff;
    background: var(--btn-primary) !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-success.active, .btn-success:active, .open > .dropdown-toggle.btn-success {
        color: #fff;
        border: none !important;
        background: var(--btn-primary) !important;
    }

.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,
    .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: #fff !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;
    }
.bod_bottom {
    border-bottom: 1px solid #ebe3e3;
}

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

.w_200px {
    width: 200px !important;
   
}
.w_70px {
    width: 70px !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-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-03 {
    padding-top: 3px !important;
}
.pt-04 {
    padding-top: 4px !important;
}
.pt-05 {
    padding-top: 5px !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-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;
}
.mr-1 {
    margin-right: 10px;
}

.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;
}

.mt-05 {
    margin-top: 5px !important;
}
.mt-07 {
    margin-top: 7px !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;
}
.mb-03 {
    margin-bottom: 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-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);
}

.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);
}


.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;
}

.trip_area {
    background-image: url(../../Assets/img/Coverage-Map.png);
    background-size: cover;
    box-shadow: -8px 0 8px -10px #ccc;
    height: 250px;
}
.h-40{
    height:40px !important;
}
.width_55px {
    width: 55px !important;
}
.width-30 {
    width: 30% !important;
}

.width-70 {
    width: 70% !important;
}
.width_70 {
    width: 81% !important;
}
.margin-auto {
    margin: auto;
}
.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: -15px;
    right: 91px;
}

.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 10px;
    padding: 8px;
    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(--heading-color);
        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 {
}



    .view-arrow i {
        font-size: 21px !important;
        cursor: pointer;
        float: right;
    }


.transporter_action {
    position: relative;
}

  

        .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: 10px;
    margin: 0;
    height: 40px;
    background: #F2F2F2;
    width: 100%;
}

    .lb-head h5, .lb-head-single h5 {
        color: var(--heading-color) !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);
    }
.tbl_th_tr {
    background: var(--table-header) !important;
    color: var(--table-header-txtcolor) !important;
}

    .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;
        }

.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 !important;
}

    .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: 44px;
    height: 20px;
    transform: translateY(40%);
    position: relative;
    text-align: center;
}
.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: 0px;
    text-align: center;
    margin-left: -6px;
    margin-top: 2px;
}
.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: 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(6px);
    }

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

.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
    }

        .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);
    transition-duration: .4s;
    color: #6f6f6f;
}

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: 18px;
        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;
}

#driver_coaching_videos_views #videoChannelSection .modal-dialog {
    width: 96.7% !important;
}

    #driver_coaching_videos_views #videoChannelSection .modal-dialog .video_max_popup .card-scroll {
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

#new_cam_alert_main .half_card_scroll {
    height: calc(72vh - 130px) !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: 97.3%;
    left: 3.4% !IMPORTANT;
    padding: 0px !important;
}


#eight_ch .multichannel_view .video_auto {
    height: 78vh !important;
    width: 100% !important;
}
#globalChannelSection .video_auto {
    height: 78vh !important;
    width: 100% !important;
}

.video_auto {
    height: 78vh !important;
    width: 100% !important;
}
#globalChannelSection .droppable {
    padding-right: 0px !important;
    padding-left: 0px !important;
    margin-left: -7px !important;
    margin-right: 0px !important;
}
#thumbcarousel .thumb .no_video {
    background: #373636;
    color: white;
    height: 22vh;
}
#globalChannelSection .no_video {
    background: #373636;
    color: white;
    height: 31vh !important;
}

.Event_VideochannelSection #videoChannelSection .video_max_popup .card-scroll {
    padding-right: 0px !important;
    padding-left: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}
#globalChannelSection .videoLargeView {
    /*height: 548px !IMPORTANT;*/
    height: 78vh !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;*/
    height: 78vh !important;
}
.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: 0px;
        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;
}

.ml_20 {
    margin-left: 20px;
}
.hd_txt_span {
    position: absolute;
    z-index: 1;
    color: #fff !IMPORTANT;
    font-weight: 500;
    border: 1px solid;
    line-height: 18px;
    padding: 0px 9px;
    font-size: 9px !IMPORTANT;
    width: 33px;
    height: 20px;
    border-radius: 3px;
    top: 56px;
    right: 10%;
    text-align: center;
}

#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;*/
    height: 34vh;
    width: auto;
    object-fit: initial;
    padding: 3px !IMPORTANT;
    margin-bottom: -6px;
   /* border: 2px solid #494949;*/
}

#videoChannelSection .video_max_popup .card-scroll {
    padding-right: 0px !important;
    padding-left: 0px !important;
    margin-left: -7px !important;
    margin-right: 0px !important;
}
#videoChannelSection #thumbcarousel .card-scroll {
    padding-right: 0px !important;
    padding-left: 0px !important;
    margin-left: -2px !important;
    margin-right: 0px !important;
}

/*.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;
}

/*-----------------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('../img/no-result.png');
    }

        .tab-alert.no-records h5 {
            padding-top: 25vh;
        }

    .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: 16px;
        /*font-family: 'Josefin Sans', sans-serif;*/
        font-family: 'VarelaRound', sans-serif;
        line-height: 1.4;
    }
        .tab-alert h5 span {
            font-size: 16px;
        }
    .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;
}

.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';
    }

.H_ib_body .pop_head {
    color: #99ffae !important
}
/*-------------------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
 * ----------------
 */


.all_video_channel .modal-header,
.all_video_channel .modal-header .modal-title,
.video_modal_popup .modal-header,
.video_modal_popup .modal-header .modal-title,
.VehicleMonitorMain .modal-header,
.VehicleMonitorMain .modal-header .modal-title {
    font-size: 12px !important;
    color: var(--heading-color);
    font-weight: 400;
    letter-spacing: 0.4px;
}


.all_video_channel .modal-footer,
.video_modal_popup .modal-footer,
.VehicleMonitorMain .modal-footer {
    font-size: 12px !important;
}


.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(--heading-color);
    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-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;
}

.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;
    overflow-x: hidden !important;
}
.reportViewSection .trv-pages-area.printpreview .trv-page-container .trv-page-wrapper {
    margin: 7px 0px !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
}

.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) {
    #new_cam_alert_main .half_card_scroll {
        height: calc(62vh - 130px) !important;
    }
    .howen_iframe iframe {
        /* height: 808px !important;*/
        border: 1px solid #ebebeb;
    }
    .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: 20px;
        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 {
    display: none;
}

.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(--heading-color);
    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: #198fff;
    padding: 7px 8px;
    color: white;
    border-radius: 50px;
    font-size: 14px;
    cursor: pointer;
}

.template_url {
    background: #6e869c;
    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;
}
.requestVideo_In_queue {
    background: #0000ffbf;
    color: white !important;
}


.requestVideo_Signalled {
    background: #d1b627;
    color: white !important;
}


.requestVideo_PostProcessing {
    background: #cc20cc;
    color: white !important;
}
.requestVideo_Success {
    background: #0cc652;
    color: white !important;
}



.requestVideo_RetryProcess {
    background: #05c2c2;
    color: white !important;
}

.requestVideo_Command_Sent {
    background: #A0C4FF;
    color: white !important;
}

.requestVideo_InProgress {
    background: #FFA500;
    color: white !important;
}

.requestVideo_Processing_Error {
    background: #FF0000;
    color: white !important;
}

.requestVideo_Failed {
    background: #B22222;
    color: white !important;
}


.icon_request {
    width: 27px;
    height: 24px;
    border-radius: 50%;
    line-height: 1.2;
    padding: 4px 6px;
    font-size: 12px;
    float: none !IMPORTANT;
    margin-left: initial !important;
}
@media (min-width: 1600px) and (max-width: 1920px) {
    .video_auto {
        height: 85vh !important;
        width: 100% !important;
    }
    #eight_ch .multichannel_view .video_auto {
        height: 85vh !important;
        width: 100% !important;
    }

    #globalChannelSection .videoLargeView {
        height: 85vh !important;
    }

    #videoChannelSection .videoLargeView {
          height: 85vh !important;
      /*  height: 100% !important;*/
    }

    #globalChannelSection .videoLargeView {
          height: 85vh !important;
        /*height: 100% !important;*/
    }

    #eight_ch .videoLargeView {
        height: 85vh !important;
        /* height:100% !important;*/
    }

    .align_baseline {
        align-items: baseline;
    }

    .ml_auto {
        margin-left: auto;
    }