/*  */

@media only screen and (min-device-width: 768px) {
    #sidebar_route
    {
        position    :   fixed   ;
        overflow-x  :   hidden  ;
    }
}

/*  */
#map {
    position    :   fixed   ;

    left        :   0       ;
    top         :   70px    ;

    width       :   100%    ;
    height      :   100%    ;

    transition  :   height 0.3s ease;
}

/*  */

#page_route {
    height      :   100%;
    width       :   100%;
}

/*  */

#content_route { 
    position    :   fixed;
    top         :   0;
    left        :   0;

    width       :   100%;
    height      :   100%;
}

#tableau_data {

    position    :   absolute    ;
    bottom      :   0           ;
    left        :   0           ;

    width       :   100%        ;
    height      :   50%         ;

    overflow    :   auto        ;

    z-index     :   999;
}

#show_route_datatable_icon_div, #show_route_customers_list_icon_div {

    position    :   absolute    ;
    bottom      :   3%          ;
    left        :   49%         ;
}

#hide_route_datatable_icon_div, #hide_route_customers_list_icon_div {

    position    :   absolute    ;
    bottom      :   53%         ;
    left        :   49%         ;
}

/*  */

.map_top_buttons_parent_div {
    position        :   fixed;
    top             :   75px;
    right           :   5px;
    z-index         :   9;
    width           :   20%;
    margin-top      :   75px;
}

.map_top_infos_div {
    z-index         :   999;
}

.map_top_infos_div td, .map_top_infos_div th {

    font-size       :   13px;
    color           : #FFFFFF;
}

/*  */

path.leaflet-interactive.animate {
    stroke-dasharray: 1920;
    stroke-dashoffset: 1920;
    animation: dash 20s linear 3s forwards;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

/*  */

.leaflet-routing-container {
    display: none;
}

.leaflet-top {

    margin-top: 75px;
}

/*  */

.canvas-marker:hover {
    transform: scale(1.2);
}

/*  */

.marker-cluster-custom-small {
    opacity : 0.9;
    background-color: none;
}

.marker-cluster-custom-small div {
    opacity : 0.9;
    background-color: none;
}

/*  */

.marker-cluster-custom-medium {
    opacity : 0.9;
    background-color: none;
}

.marker-cluster-custom-medium div {
    opacity : 0.9;
    background-color: none;
}

/*  */

.marker-cluster-custom-large {
    opacity : 0.9;
    background-color: none;
}

.marker-cluster-custom-large div {
    opacity : 0.9;
    background-color: none;
}

.marker-cluster div {
    width           : 45px;
    height          : 45px;
    padding         : 15px;
    margin-left     : 0px;
    margin-top      : 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius   : 50%;
    font            : 19px "Helvetica Neue", Arial, Helvetica, sans-serif;
}

/*  */

/* Toggle */

#map_top_middle_options_div {
    position    : absolute;
    left        : 47%;
    top         : 85px;
}

#toggle_div div.btn-container{
    display         : table-cell;
    vertical-align  : middle;
    text-align      : center;
}

#toggle_div div.btn-container i{
    display     : inline-block;
    position    : relative;
    top         : -9px;
}

#toggle_div label {
    font-size       : 13px;
    color           : #424242;
    font-weight     : 500;
}

#toggle_div .btn-color-mode-switch{
    display         : inline-block;
    margin          : 0px;
    position        : relative;
}

#toggle_div .btn-color-mode-switch > label.btn-color-mode-switch-inner{
    margin          : 0px;
    width           : 140px;
    height          : 35px;
    background      : #E0E0E0;
    border-radius   : 26px;
    overflow        : hidden;
    position        : relative;
    transition      : all 0.3s ease;
    display         : block;
    cursor: pointer;
}

#toggle_div .btn-color-mode-switch > label.btn-color-mode-switch-inner:before{
    content         : attr(data-on);
    position        : absolute;
    font-size       : 12px;
    font-weight     : 500;
    top             : 7px;
    right           : 20px;
}

#toggle_div .btn-color-mode-switch > label.btn-color-mode-switch-inner:after{
    content         : attr(data-off);
    width           : 70px;
    height          : 32px;
    background      : #fff;
    border-radius   : 26px;
    position        : absolute;
    left            : 2px;
    top             : 2px;
    text-align      : center;
    transition      : all 0.3s ease;
    box-shadow      : 0px 0px 6px -2px #111;
    padding         : 5px 0px;
}

#toggle_div .btn-color-mode-switch > .alert{
    display         : none;
    background      : #FF9800;
    border          : none;
    color           : #fff;
}

#toggle_div .btn-color-mode-switch input[type="checkbox"]{
    cursor          : pointer;
    width           : 50px;
    height          : 35px;
    opacity         : 0;
    position        : absolute;
    top             : 0;
    z-index         : 1;
    margin          : 0px;
}

#toggle_div .btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner{
    background      : #D7481F;
    color           : #fff;
}

#toggle_div .btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:after{
    content         : attr(data-on);
    left            : 68px;
    background      : #3c3c3c;
}

#toggle_div .btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:before{
    content         : attr(data-off);
    right           : auto;
    left            : 20px;
}

#toggle_div .btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner{
    /*background: #66BB6A; */
    /*color: #fff;*/
}

#toggle_div .btn-color-mode-switch input[type="checkbox"]:checked ~ .alert{
    display         : #D7481F;
}

/*mode preview*/
#toggle_div .dark-preview{
    background      : #D7481F;
}

#toggle_div .dark-preview div.btn-container i.fa-sun-o{
    color           : #777;
}

#toggle_div .dark-preview div.btn-container i.fa-moon-o{
    color           : #fff;
    text-shadow     : 0px 0px 11px #fff;
}

#toggle_div .white-preview{
    background      : #fff;
}

#toggle_div .white-preview div.btn-container i.fa-sun-o{
    color           : #ffa500;
    text-shadow     : 0px 0px 16px #ffa500;
}

#toggle_div.white-preview div.btn-container i.fa-moon-o{
    color           : #777;
}

#toggle_div p.by a{
    text-decoration : none;
    color           : #000;
}

#toggle_div .dark-preview p.by a{
    color           : #777;
}

#toggle_div .white-preview p.by a{
    color           : #000;
}

#show_position_button {

    position        : fixed;
    top             : 75px;
    right           : 7px;
}

/*  */

#show_map .leaflet-top {

    margin-top      : 5px !important;
}

/*  */

@media only screen and (max-device-width: 767px) {
    
    #show_position_button {

        position        : fixed;
        top             : 10px;
        right           : 7px;
    }

    #map_top_middle_options_div {

        left        : 25%;
        /* margin-top  : 75px; */
        /* top         : 20px; */
    }

    .leaflet-top {

        margin-top: 5px;
    }

    .map_top_buttons_parent_div {
        position        :   fixed;
        right           :   0px;
        z-index         :   9;
        width           :   auto;
    }

    #leaflet_zoom_refresh {
        left        : 0%;
        top         : 85px  !important;
    }

    #show_route_datatable_icon_div {
        left        :   45%         ;
    }
    #hide_route_datatable_icon_div {
        left        :   45%         ;
    }

    .multiselect-dropdown {

        max-height  : 100px !important;
    }
}

/*  */

/*  */

#show_map .leaflet-top {

    margin-top      : 5px !important;
}

/*  */

@media only screen and (max-device-width: 767px) {
    
    #show_position_button {

        position        : fixed;
        top             : 10px;
        right           : 7px;
    }

    #map_top_middle_options_div {

        left        : 29%;
        /* top         : 20px; */
    }

    .leaflet-top {

        /* margin-top  : 75px; */
    }
}

/*  */

.map_control_buttons, .salesman_rtm_map_control_buttons {

    background-color    : #FFFFFF                         !important; 
    box-shadow          : 0px 0px 6px -2px #111           !important;
    width               : 30px                              !important;
    height              : 30px                              !important;
    padding             : 0px                               !important;

    border-radius       : 3px                               !important;
}

.map_control_buttons_parent, .salesman_rtm_map_control_buttons_parent {

    border              : 2px solid rgba(0, 0, 0, 0.2)    !important;

    border-radius       : 5px                               !important;
}

/*  */

#leaflet_zoom_refresh {
    position    : absolute;
    left        : 0%;
    top         : 80px;

    margin-left : 14px;
}

/*  */

.tracking_custom_icon {
    background-color    : white;
    border-radius       : 50%;
    border              : 2px solid #A25CFF;
    text-align          : center;
    width               : 30px;
    height              : 30px;
    line-height         : 30px;
    font-size           : 16px;
    color               : #A25CFF;
    font-weight         : bold;
}

.tracking_first_custom_icon {
    background-color    : #D7481F;
    border-radius       : 50%;
    border              : 2px solid #D7481F;
    text-align          : center;
    width               : 30px;
    height              : 30px;
    line-height         : 30px;
    font-size           : 16px;
    color               : white;
    font-weight         : bold;
}

.tracking_last_custom_icon {
    background-color    : #10B981;
    border-radius       : 50%;
    border              : 2px solid #10B981;
    text-align          : center;
    width               : 30px;
    height              : 30px;
    line-height         : 30px;
    font-size           : 16px;
    color               : white;
    font-weight         : bold;
}

/*  */

.visit_custom_icon_red {
    background-color    : #E65100;
    border-radius       : 50%;
    border              : 2px solid white;
    text-align          : center;
    width               : 30px;
    height              : 30px;
    line-height         : 30px;
    font-size           : 16px;
    color               : white;
    font-weight         : bold;
}

.visit_custom_icon_green {
    background-color    : #0F9D58;
    border-radius       : 50%;
    border              : 2px solid white;
    text-align          : center;
    width               : 30px;
    height              : 30px;
    line-height         : 30px;
    font-size           : 16px;
    color               : white;
    font-weight         : bold;
}

/*  */

path.leaflet-interactive.animate {
    stroke-dasharray: 1920;
    stroke-dashoffset: 1920;
    animation: dash 7s linear 0.5s forwards;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

/*  */

.leaflet-container {
    font-size: 10px !important;
}