html {
    font-size: 14px;
    --primary-color: #F1BB10;
    --secondary-color: #1A8EC7;
    --secondary-color-light: rgba(26, 142, 199, 0.16);
    /* Navbar variables */
    --navbar-bg: #000000;
    --navbar-link: #ccc;
    --navbar-active-link: #fff;
    --header-height: 80px;
    /* Navbar variables */
    /* filter section variables */
    --filter-bg: #F2F6F9;
    /* filter section variables */
    /* form element variables */
    --form-element-input-bg: #fff;
    --form-element-input-border-color: #e6e6e6;
    /* form element variables */
    --table-hover-color: #F2F6F9;
    --toggle-on: var(--secondary-color);
    --toggle-off: #cccccc;
    overflow-x: hidden;/*bottom scroll No need here beacause of the data table should automatically display these scroll*/
}

html[data-theme="black"] {
    --navbar-bg: yellow;
}

.reportTabs > li.nav-item.active {
    background: black;
}

.reportTabs > li.nav-item.active > a {
    color: white !important;
}

.disabled {
    cursor: default;
    pointer-events: none;
    opacity: 0.8;
}

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

.padding-left-0 {
    padding-left: 0px;
}

.margin-left-2vh {
    margin-left: 2vh;
}

.margin-left-3vh {
    margin-left: 3vh;
}

.margin-right-3vh {
    margin-right: 3vh;
}

.margin-top-3vh {
    margin-top: 3vh;
}

.margin-bottom-3vh {
    margin-bottom: 3vh;
}

.width-100-percent {
    width: 100%;
}

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

.form-control[readonly] {
    background: white !important;
}

.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
}

/*
.gm-ui-hover-effect {
    display: none !important;
}
*/

/* Mobile menus */
.navbar-light .navbar-toggler {
    background: #000;
    border-color: #000;
}

.generalReportSubmenus > .nav-link.active {
    background: gold;
}

@media (min-width: 320px) and (max-width: 992px) {
    #navbarSupportedContent {
        z-index: 100;
        color: #fff;
        background: black;
        /* opacity: 0.8; */
    }
    html {
        overflow-x: auto;
    }
}

/*
Tabs : [ Mobile & Tab ]
*/
.rfidSubMenus li {
    width: 100%;
}
@media (min-width: 320px) and (max-width: 769px) {
    .rfidSubMenus li {
        width: 50%;
    }
    .tabs-section .reportTabs {
        border: none !important;
    }
    .mobile-device-margin-top-1vh {
        margin-top: 1vh;
    }
    .mobile-device-margin-top-2vh {
        margin-top: 2vh;
    }
    .mobile-device-margin-top-3vh {
        margin-top: 3vh;
    }
}

#custombutton{
    border: none;
    background: no-repeat;
}

#custombutton:focus{
    outline-style: none;
}

.trackcolor{
    height: 20px;
    width: 20px;
}

.trackcolor.selected {
    height: 25px;
    border: #dcdcdc solid !important;
}

.icon.iconselected{
    border: #dcdcdc solid !important;
    width: 32px !important;
}

#colour_D0153D{
    background: #D0153D;
}

#colour_FF8A22{
    background: #FF8A22;
}

#colour_E1CA17{
    background: #E1CA17;
}

#colour_63BE13{
    background: #63BE13;
}

#colour_40BEC3{
    background: #40BEC3;
}

#colour_265CB2{
    background: #265CB2;
}

#colour_6D1696{
    background: #6D1696;
}

#colour_BD1361{
    background: #BD1361;
}

#colour_A8A8A8{
    background: #A8A8A8;
}

#colour_9D7050{
    background: #9D7050;
}

.jconfirm-content div, .jconfirm .jconfirm-box div.jconfirm-content-pane {
    direction: ltr;
}

label {
    margin: 0;
}

.btn-secondary-color {
    color: var(--secondary-color);
}

.btn-link.dropdown-toggle {
    background: transparent !important;
    border: none;
}

.btn-link.dropdown-toggle:after {
    display: none;
}

.btn-link.dropdown-toggle span,
.routes-table.hide-boarding-link tr:hover .btn-link.dropdown-toggle span {
    background: transparent !important;
    color: #000;
    visibility: visible;
}

.btn-link.dropdown-toggle+div {
    right: 0;
    left: auto !important;
    transform: translate(0px, 38px) !important;
}

.btn-link.dropdown-toggle+div .dropdown-item {
    color: var(--secondary-color);
    padding: 10px 20px;
}

.boarding-route div.selected {
    color: #fff;
    background: var(--secondary-color);
}

.boarding-route label input[type="radio"]:checked~span {
    display: block;
}

.boarding-route label input[type="radio"]~span {
    display: none;
    margin-top: 3px;
    float: right;
}

.dropup {
    position: relative;
    display: inline-block;
}

div.pac-container {
   z-index: 1050 !important;
}

@font-face {
    font-family: 'Poppins';
    src: url('./../dependencies/fonts/Poppins-ExtraLight.woff2') format('woff2'), url('./../dependencies/fonts/Poppins-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('./../dependencies/fonts/Poppins-Light.woff2') format('woff2'), url('./../dependencies/fonts/Poppins-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('./../dependencies/fonts/Poppins-Black.woff2') format('woff2'), url('./../dependencies/fonts/Poppins-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('./../dependencies/fonts/Poppins-SemiBold.woff2') format('woff2'), url('./../dependencies/fonts/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('./../dependencies/fonts/Poppins-BoldItalic.woff2') format('woff2'), url('./../dependencies/fonts/Poppins-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('./../dependencies/fonts/Poppins-Italic.woff2') format('woff2'), url('./../dependencies/fonts/Poppins-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('./../dependencies/fonts/Poppins-ExtraLightItalic.woff2') format('woff2'), url('./../dependencies/fonts/Poppins-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('./../dependencies/fonts/Poppins-Medium.woff2') format('woff2'), url('./../dependencies/fonts/Poppins-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('./../dependencies/fonts/Poppins-ThinItalic.woff2') format('woff2'), url('./../dependencies/fonts/Poppins-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('Poppins-BlackItalic.woff2') format('woff2'), url('Poppins-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('./../dependencies/fonts/Poppins-Thin.woff2') format('woff2'), url('./../dependencies/fonts/Poppins-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('./../dependencies/fonts/Poppins-MediumItalic.woff2') format('woff2'), url('./../dependencies/fonts/Poppins-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('./../dependencies/fonts/Poppins-ExtraBoldItalic.woff2') format('woff2'), url('./../dependencies/fonts/Poppins-ExtraBoldItalic.woff') format('woff');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('./../dependencies/fonts/Poppins-Bold.woff2') format('woff2'), url('./../dependencies/fonts/Poppins-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('./../dependencies/fonts/Poppins-Regular.woff2') format('woff2'), url('./../dependencies/fonts/Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('./../dependencies/fonts/Poppins-LightItalic.woff2') format('woff2'), url('./../dependencies/fonts/Poppins-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('./../dependencies/fonts/Poppins-ExtraBold.woff2') format('woff2'), url('./../dependencies/fonts/Poppins-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('./../dependencies/fonts/Poppins-SemiBoldItalic.woff2') format('woff2'), url('./../dependencies/fonts/Poppins-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}

html[data-theme="default"] {
    --filter-bg: black;
}

body {
    font-family: Arial, Calibri, "lucida sans unicode";
}


/*------ Navbar css start's here ------*/

.navbar {
    background-color: var(--navbar-bg) !important;
    height: 45px;
    max-height: 50px;
    padding: 0 1rem;
}

.navbar .navbar-brand {
    color: var(--primary-color);
}

.navbar .navbar-nav .nav-link {
    color: white !important;
    padding: 8px 10px;
}

.navbar .navbar-nav .nav-link:focus,
.navbar .navbar-nav .nav-link:hover {
    color: rgba(0,0,0,.7);
}

@media(min-width: 992px) {
    .navbar .navbar-collapse {
/*        margin-left: 30px*/
    }
}


/*------ Navbar css end's here ------*/


/*------ Form Element css end's here ------*/

/*.form-control,
.bootstrap-select>.btn {
    background: var(--form-element-input-bg);
    border-color: var(--form-element-input-border-color);
}*/

.bootstrap-select .filter-option-inner-inner {
    font-weight: 500;
    font-size: 12px;
    line-height: 21px;
}


/*------ Form Element css end's here ------*/


/*------ Filter section css start's here ------*/

.filter-section {
    background: var(--filter-bg);
    padding: 10px 0px;
}


/*------ Filter section css end's here ------*/

.table th,
.table td {
    border: none !important;
    border-bottom: 1px solid #ccc !important;
    padding: 4px 10px !important;
}

.table {
    border-bottom: none !important;
}

.dataTables_filter,
.dataTables_length {
    display: none;
}

input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
    /*    visibility: hidden;*/
    display: none
}

.select-checkbox {
    text-align: center;
}

.select-checkbox input[type="checkbox"]+label,
.select-checkbox input[type="radio"]+label {
    width: 20px;
    height: 20px;
    position: relative;
    border: 1px solid var(--secondary-color);
    background: #fff;
    pointer-events: none;
    vertical-align: middle;
}

.select-checkbox input[type="checkbox"],
.select-checkbox input[type="radio"] {
    position: absolute;
}

.select-checkbox input[type="checkbox"]:checked+label,
.select-checkbox input[type="radio"]:checked+label {
    background: var(--secondary-color);
}

.select-checkbox input[type="checkbox"]:checked+label:after,
.select-checkbox input[type="radio"]:checked+label:after {
    content: '';
    display: block;
    width: 6px;
    height: 13px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    position: absolute;
    left: 6px;
    top: 1px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border: none;
    background: var(--primary-color);
}

.btn-primary,
.btn-primary:focus,
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    background: var(--primary-color);
    color: #000;
    font-weight: 600;
    border: none;
}

.btn-secondary,
.btn-secondary:focus,
.btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show>.btn-secondary.dropdown-toggle {
    background: var(--secondary-color);
    color: #fff;
    font-weight: 600;
    border: none;
}

.btn-secondary-light,
.btn-secondary-light:focus,
.btn-secondary-light:hover,
.btn-secondary-light:not(:disabled):not(.disabled).active,
.btn-secondary-light:not(:disabled):not(.disabled):active,
.show>.btn-secondary.dropdown-toggle {
    background: var(--secondary-color-light);
    color: var(--secondary-color);
    font-weight: 600;
    border: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: none;
    color: var(--primary-color) !important;
    border: none;
}

.dataTable tr:hover {
    background: var(--table-hover-color) !important;
}

.dataTables_wrapper {
    margin-bottom: 3em;
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--primary-color);
}

.option-btn {
    background: var(--secondary-color);
    padding: 5px;
    line-height: 8px;
    margin: 2px;
    font-size: 10px;
    color: #fff !important;
}

td.choose-boarding span {
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-left: 10px;
    background: var(--primary-color);
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    color: #000;
    visibility: hidden;
}

.routes-table tr:hover .choose-boarding span {
    visibility: visible;
}

.routes-table.hide-boarding-link tr:hover .choose-boarding span {
    visibility: hidden;
}

.modal-body {
    padding: 0rem !important;
}

.dropdown-menu-btn {
    width: 100%;
    text-align: left;
}

.divider {
    margin: 1vh 0;
    border: none;
    border-bottom: 1px solid #ccc;
}

.toggle-button .toggle {
    width: 100% !important;
    border-radius: 30px;
    margin: 5px 0;
}

.toggle-button .toggle-on {
    text-align: left;
    padding-left: 10px !important;
}

.toggle-button .toggle-off {
    margin-left: 20px;
    background-color: var(--toggle-off);
    border-color: var(--toggle-off);
    color: #fff;
}

.toggle.btn.off {
    background-color: var(--toggle-off);
    border-color: var(--toggle-off);
}

.toggle.btn,
.toggle-button .toggle-on,
.toggle-button .toggle-on:focus {
    background-color: var(--toggle-on);
    border-color: var(--toggle-on);
    color: #fff;
}

.toggle-button .toggle-off,
.toggle-button .toggle-on {
    font-size: 9px;
    line-height: 28px;
    height: 28px;
    padding: 0;
}

.toggle-handle {
    border-radius: 50%;
    width: 26px;
    height: 26px;
}

.toggle.off .toggle-handle {
    margin-left: 30px;
    margin-right: 0;
}

.toggle .toggle-handle {
    margin-right: 27px;
    margin-top: 1px;
}

.new-route-modal .form-control {
    height: 40px;
}

.new-route-modal {
    font-size: 13px;
    font-weight: 600;
}

.new-route-modal .modal-body {
    padding: 5% !important;
}

.map-container {
    background: #ccc;
    width: 100%;
    height:100%;
    display: block;
    position: relative;
}

#rfidmapviewBody {
    background: #ccc;
    width: 100%;
}

.map-user-data .map-container {
    width: 100%;
    display: block;
    position: relative;
}

.active-day label {
    width: 45px;
}

.active-day label input+span {
    border: 1px solid #ccc;
    padding: 3px;
    text-align: center;
    border-radius: 5px;
    border-radius: 30px;
    font-weight: 300;
    display: block
}

.active-day input {
    display: none;
}

.button-div {
    text-align: right;
    margin: 1px 0 0;
}

.button-div .btn {
    margin-left: 10px
}

/*.btn {
    border: none !important;
}*/

.dropdown-menu li:hover {
    background-color: var(--primary-color);
}

.borderlist {
    list-style-position:inside;
    border: 1px solid var(--primary-color);
}

.btn-cancel {
    background: #eee !important;
    color: #000;
    font-weight: 600;
}

input[type="radio"]+span {
    border: 1px solid #cacaca;
    padding: 3px;
    display: block;
    border-radius: 20px;
    font-weight: 600;
}

.active-day input:checked+span {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.data-view {
    padding: 0 15px;
    margin: 15px 0;
}

/*.card-body,
.card-header,
.card-footer {
    border-radius: 0;
    background: none;
    border: none;
}
*/
/*#tab3 .card-footer {
    padding: 2.5rem 1.25rem !important;
}*/

#route_action_form .btn-group,
#route_edit_form .btn-group {
    /* padding: 1rem 1.25rem !important; */
}

.boarding-details .card-body label {
    font-size: 11px;
}

.boarding-details .card-body.boarding-route .select-checkbox label.radio {
    border-radius: 20px;
}

.boarding-route label:not(.select-checkbox),
.route-boarding label:not(.select-checkbox) {
    vertical-align: middle;
    margin-right: 10px
}

.boarding-route label.select-checkbox {
    padding: 5px 0;
    display: block;
    text-align: left;
    margin-left: -3vh;
}

.card {
    border-radius: 0;
}

.map-user-data .tab ul, .boarding-details .tab ul, .import-route-accordion .tab ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.map-user-data .tab ul li, .boarding-details .tab ul li, .import-route-accordion .tab ul li {
    display: inline-block;
    line-height: 24px;
    margin: 0 10px;
    padding: 10px 0px;
    cursor: pointer;
}

.map-user-data li.active, .boarding-details li.active, .import-route-accordion li.active {
    color: var(--secondary-color);
    border-bottom: 3px solid var(--secondary-color);
}

.route-boarding,
.boarding-route,
.userBoardingHistoryMap {
    overflow-x: hidden;
    border: none !important;
}

.route-data-form .form-group {
    margin:0.6rem 0 !important;
}

.route-data-form {
    /*
    overflow-y: auto;
    max-height: 65vh;
    min-height: 65vh;
    */
    line-height: 1.9;
}

.map-user-data .map-container {
    overflow-y: auto;
    width: 100%;
    padding-bottom: 44%;
}
    
.map-user-data .map-container > * {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.route-boarding,
.boarding-route,
.boarding-table,
.user-to-board,
.users-content-div,
.userBoardingHistoryMap {
    overflow-y: auto;
    max-height: 60vh;
    min-height: 60vh;
}

@media (min-width: 1200px) {
    .route-boarding,
    .boarding-route,
    .boarding-table,
    .user-to-board,
    .users-content-div,
    .userBoardingHistoryMap {
        overflow-y: auto;
        max-height: 63vh;
        min-height: 63vh;
    }
}

.users-content-div {
    overflow-x: hidden;
}

.route-bp-users-info {
    overflow-y: auto;
    max-height: 44vh;
    min-height: 44vh;
}

.tab-content-div {
    display: none;
}

.tab-content-div.active {
    display: block;
}

.compare-btn {
    position: absolute;
    top: 10px;
    right: 1px;
    z-index: 9999;
    margin: auto;
}

.card-body.boarding-route {
    padding: 0;
}

.card-body.boarding-route .select-checkbox {
    padding: 8px 15px;
    cursor: pointer;
}

label.select-checkbox.selected {
    background: var(--secondary-color);
    color: #fff;
}

label.select-checkbox.selected label {
    border: 1px solid #fff;
}

input[type="checkbox"]:checked+span,
input[type="radio"]:checked+span {
    color: var(--secondary-color);
    /*border: 1px solid var(--secondary-color);*/
    background: rgba(26, 142, 199, 0.24);
}

input[type="checkbox"]+span {
    color: #555;
    border: 1px solid #b7b7b7;
    border-radius: 20px;
    padding: 0px 10px;
    display: block;
    font-weight: 600;
}

.compare-div {
    position: absolute;
    background: #fff;
    width: 200px;
    right: 5px;
    top: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.17);
    padding: 10px;
    display: none;
    z-index: 9999;
}

.compare-div.active {
    display: block;
}

.compare-div label {
    margin-right: 10px;
}

.compare-div h3 {
    font-size: 15px;
}

.boarding-table.routes-table td,
.boarding-table.routes-table th {
    background: var(--filter-bg);
    border: none !important;
}

.form-group {
    margin-bottom: 2rem;
}

.boarding-modal.button-div {
    position: absolute;
    top: calc(100% - 50px);
    right: 15px;
}

.card-header,
.card-footer {
    font-weight: 600;
}

.add-to-boarding {
    margin: 15px;
}

.back-link {
    color: var(--secondary-color);
    position: absolute;
    top: -25px;
    left: 15px;
    font-size: 13px;
}

.boarding-table {
    text-align: center;
}

.div-mapped {
    display: flex;
    width: 100%;
    padding: 10px 0;
}

.div-mapped button {
    flex: 1;
    border-radius: 0;
}

.mapped-unmapped-div {
    display: none;
}

.mapped-unmapped-div.active {
    display: block;
}

.modal-status span {
    font-size: 50px;
    color: var(--secondary-color)
}

.modal-status h4 {
    font-size: 16px;
    margin-top: 20px;
}

.modal-status h2 {
    font-size: 16px;
    margin: 15px 0;
}

.button-collapse {
    position: absolute;
    display: none;
    left: -18px;
    top: 15px;
    width: 25px;
    height: 25px;
    background: var(--secondary-color);
    color: #fff;
    text-align: center;
    line-height: 25px;
    border-radius: 20px;
}

.map-user-data.active .button-collapse,
.map-user-data .button-collapse.rotate {
    display: block;
}

.button-collapse.rotate {
    transform: rotate(180deg);
}

.compare-div .icon-Close {
    font-size: 10px;
    padding: 5px;
}

.modal-full {
    max-width: 98%;
    width: auto;
}

.overMapCenterBar, .mapSearchBar {
    position: absolute;
    background-color: transparent;
    top: 10px;
    left: 25%;
    z-index: 9999;
    margin: auto;
    width: 50%;
}

.modal-header .close {
    float: right;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: red;
    color: #fff;
    opacity: 1;
    margin-top: -30px;
    margin-right: -30px;
    line-height: 1;
    padding: 0;
}

/*
.accordion-toggle:after {
    font-family: 'FontAwesome';
    content: "\f078";
    float: right;
}
*/

.card-header .collapsed:after {
    content: "\f054";
}

.user-to-board-header {
    height: 5px;
}

.col-md-2half {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    width: 300px;
}

.routeBoardingText {
    font-size: 1em;
    display: inline-block;
    max-width: 12em;
    white-space: pre;
    text-overflow: ellipsis;
   /* overflow: hidden;*/
}

.select-checkbox-small input[type="checkbox"]+label,
.select-checkbox-small input[type="radio"]+label {
    width: 15px;
    height: 15px;
    position: relative;
    border: 1px solid var(--secondary-color);
    background: #fff;
    pointer-events: none;
    vertical-align: middle;
}

.select-checkbox-small input[type="checkbox"],
.select-checkbox-small input[type="radio"] {
    position: absolute;
}

.select-checkbox-small input[type="checkbox"]:checked+label,
.select-checkbox-small input[type="radio"]:checked+label {
    background: var(--secondary-color);
}

.select-checkbox-small input[type="checkbox"]:checked+label:after,
.select-checkbox-small input[type="radio"]:checked+label:after {
    content: '';
    display: block;
    width: 4px;
    height: 10px;
    border: solid #fff;
    border-top-width: medium;
    border-right-width: medium;
    border-bottom-width: medium;
    border-left-width: medium;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    position: absolute;
    left: 5px;
    top: 1px;
}

.route-chk-Box>a {
    vertical-align: middle;
    display: inline-table;
}

td.week-active span:not(.active) {
    color: #ccc;
}

td.week-active {
    width: 10%;
}

.bp-ordering-div {
    display: table;
    width: 100%;
}

.bp-ordering-icon {
    vertical-align: middle;
    display: table-cell;
    padding: 8px 0;
}

div .dt-buttons{
    float:right;
    display:none;
}

.fa-1x{
    width: 15px;
    text-align: center;
}

#fa-1x{
    font-size: 15px;
    margin-top: -8px;
}

.select-checkbox-small-multipleselect input[type="checkbox"],
.select-checkbox-small-multipleselect input[type="radio"]    {
    width: 15px;
    height: 15px;
    position: relative;
    border: 1px solid var(--secondary-color);
    background: #fff;
    pointer-events: none;
    vertical-align: middle;
}

.switch {
    position: relative;
    display: block;
    vertical-align: top;
    width: 100px;
    height: 30px;
    padding: 3px;
    margin: 0 10px 10px 0;
    background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
    background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
    border-radius: 18px;
    box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    box-sizing:content-box;
}

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

.switch-label {
    position: relative;
    display: block;
    height: inherit;
    font-size: 10px;
    text-transform: uppercase;
   /* background: #eceeef;*/
    background: #d51010;
    border-radius: inherit;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
    box-sizing:content-box;
}

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

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

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

.switch-input:checked ~ .switch-label {
    /*background: #E1B42B;*/
    background: #4AE12B;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}

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

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

.switch-handle {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    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: 50%;
    margin: -6px 0 0 -6px;
    width: 12px;
    height: 12px;
    background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
    background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
    border-radius: 6px;
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}

.switch-input:checked ~ .switch-handle {
    left: 74px;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
 
/* Transition
========================== */
.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;
}

/****** jQuery Autocomplete CSS *************/

.ui-autocomplete-input {
    z-index: 1511;
    position: relative;
}
.ui-autocomplete {
    position: absolute;
    z-index: 1510 !important;
}
.ui-autocomplete :hover {
    background-color: var(--secondary-color);
    color: white;
}
 .ui-corner-all {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}
.ui-menu {
    border: 1px solid lightgray;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 15px;
}
.ui-menu .ui-menu-item a {
    color: #888;
}
.ui-menu .ui-menu-item:hover {
    text-decoration: none;
    cursor: pointer;
    background: none;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-content .ui-state-hover, .ui-widget-content .ui-state-focus {
    border: none;
    background-image: none;
    background-color: none;
    color: #3D3D3D;
}

#fa-li{
    pointer-events: none;
    font-size: 15px;
    margin-top: -8px;
}

.notification-check-box {
    border-radius: 20px;
}

.my-custom-scrollbar {
    position: relative;
    height: 460px;
    overflow: auto;
}

.table-wrapper-scroll-y {
    display: block;
}

.reportTabs li a {
    color:black;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background: var(--primary-color);
    color:black ;
}

.filter-section {
    background-color: white;
}
.path{
    fill:none;
    stroke:black;
    pointer-events:all;
}
/*report tab styles*/
.tabs-section {
    overflow: hidden;
    padding: 5px 0px;
}
.tabs-section .nav-tabs {
    border: 0;
}
.tabs-section .nav-link {
    border: 0;
    padding: 11px 15px;
    transition: 0.3s;
    color: black;
    border-radius: 0;
    font-size: 15px;
}
.tabs-section .nav-link:hover {
    color: var(--primary-color);
}

.tabs-section .nav-link:hover {
    border-right: 4px solid var(--primary-color);
}
.tabs-section .tab-pane.active {
    -webkit-animation: fadeIn 0.5s ease-out;
    animation: fadeIn 0.5s ease-out;
}
.tabs-section .details h3 {
    font-size: 26px;
    color: var(--primary-color);
}
.tabs-section .details p {
    color: black;
}
.tabs-section .reportTabs{
    border-right: 2px solid #d8dbde;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background: white;
    color:black ;
}
.tabs-section .nav-link.active {
    color: #333333;
    background: var(--primary-color);
}

.select-picker button{
    border: 1px solid #efe5e5;
}
.disabledstyle{
    pointer-events: none;
    cursor: default;
    background:var(--primary-color);
    color:black;
}

.profileAccountDropdown {
    width: 20rem;   /* rem : Relative to font-size of the root element */
    right: 0;
    left: auto;
    position: absolute;
    border-radius: 0;
}
#navbarDropdownMenuLink2 {
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
#navbarDropdownMenuLink2.halfText::after {
    float: right;
    margin-top: -8%;
}
.table-word-wrap {
    word-break: break-word;
    max-width: 150px;
    min-width: 150px;
}
@media (min-width: 320px) and (max-width: 769px) {
    .profileAccountDropdown {
        width: 100%;
    }
    /*.bp-sidebar-right {
        top: 50px;
    }*/
    .bp-mapSearchBar {
        top: 100px !important;
    }
    .bp-mapSearchBar.form-control {
        width: 100% !important;
    }
    .modal-header .close{
        margin-top: -20px;
        margin-right: -20px;
    }
    .dataTable{
        margin-top: 3% !important;
    }
    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
        margin-top: 3% !important;
    }
    .dt-buttons{
        margin-top: 3% !important;
    }
    .DataTables_Table_1_filter{
        margin-top: 3% !important;
    }
}

/* Route - Add / Edit -> Trip support lable size updates. */
@media only screen and (min-device-width: 393px) and (max-device-width: 851px) and (orientation: portrait) {
    .route-data-form .row .col .form-group .toggle-button > label {
        font-size: 12px;
    }
}
/* Safari Browser - Live tracking page style
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .navbar {
        background-color: #000000 !important;
        display: -webkit-box;
    }
    .navbar-nav{
        margin:0 auto;
        display: -webkit-inline-box;
    }
    .collapse:not(.show) {
        display:block;
    }
    .gm-style .gm-style-iw-c {
        display: -webkit-box;
    }
}
*/