:root {
    --bodyColor :                   #f4f4f4;
    --generalPadding:               4px;
    --textMenuColor:                #3d58a7; 
    --menuHeader:                   #d7d7d775; 

    --menuBackColor:                white;  
    --menuBackColorHover:           #111318; 


    --panelBorder:                  #d9d9d9;
    --sideBarWidth:                 80px;

    --menuItemHeight:               50px;
    --topBar:                       60px;

    --marginContainer:              15px;
}

body{
    background-color:               var(--bodyColor);
    color:                          var(--bodyColor);
}

body 
{
    font-family:                    "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size:                      14px;
    font-weight:                    normal;
    letter-spacing:                 0.01em;
    -webkit-font-smoothing:         antialiased;
    -webkit-text-size-adjust:       100%;
    -ms-text-size-adjust:           100%;
    -webkit-font-feature-settings:  "kern" 1;
    -moz-font-feature-settings:     "kern" 1;
    direction:                      ltr;
    -moz-osx-font-smoothing:        grayscale;
    margin:                         0;
    padding:                        0;
    box-sizing:                     border-box;
    text-overflow:                  ellipsis;
}

/* cusat
:root {
    --bodyColor :                   #f4f4f4;
    --generalPadding:               4px;
    --textMenuColor:                #653b8b; 
    --menuHeader:                   #d7d7d775; 

    --menuBackColor:                #653b8b;  
    --menuBackColorHover:           #2a183a; 


    --panelBorder:                  #d9d9d9;
    --sideBarWidth:                 80px;

    --menuItemHeight:               50px;
    --topBar:                       60px;
}

*/











.ns		{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
			

.mI {position: relative;
    height: var(--menuItemHeight);
    width: 100%;
   
    top: 0;
    cursor: pointer;
    -webkit-transition:                     all 0.5s ease-out;
    -moz-transition:                        all 0.5s ease-out;
    -o-transition:                          all 0.5s ease-out;
    transition:                             all 0.5s ease-out;

    display: flex;

}

.mI:hover
{
    background-color: var(--menuBackColorHover);
}
.mI:hover > .mI-d > a > .t
{
    color: white;
}
.mI:hover > .mI-d > .i-iC > .i-I
{
    color: white;
}
.mI-d
{
    width: 100%;
    height: var(--menuItemHeight);
    display:                                inline-block !important;
    padding-left:                           20px;
    min-height:                             40px;
    font-size:                              14px;
    clear:                                  both;
    white-space:                            nowrap;
    overflow:                               hidden;
    text-overflow:                          ellipsis;
    width:                                  65%;
    line-height: 25px;
}




.mI_c{
    position: absolute;
    width: 100%;
    bottom: 0px;
    top: 50px;

    background-color: #304480!important;
    height: 0px;
    opacity: 0;

    -webkit-transition:                     opacity 0.15s ease-out;
    -moz-transition:                        opacity 0.15s ease-out;
    -o-transition:                          opacity 0.15s ease-out;
    transition:                             opacity 0.15s ease-out;
}

.mI > .mI:hover > .mI-d > .i-iC > .i-I
{
    background-color: black!important;
}

.mI > .mI_c > .mI:hover 
{
    background-color: rgb(32, 32, 32)!important;
}



.i-Sm 
{
    color: #cdcdcd;
    font-size: 8px;
    position: absolute!important;
    left:       170px !important;
    z-index: 2;

    top: 25px !important; 
    -webkit-transition:                     transform 0.5s ease-out;
    -moz-transition:                        transform 0.5s ease-out;
    -o-transition:                          transform 0.5s ease-out;
    transition:                             transform 0.5s ease-out;
}







.i-I
{
    left:                                   50%;
    position:                               absolute;
    transform:                              translate(-50%, -50%);
    top:                                    50%;
}

.tr-C-5
{
    -webkit-transition:                     color 0.5s ease-out;
    -moz-transition:                        color 0.5s ease-out;
    -o-transition:                          color 0.5s ease-out;
    transition:                             color 0.5s ease-out;
}

.i-iC
{
    position:                               absolute;
    right:                                  0;
    top:                                    0;
    bottom:                                 0;
    width:                                  28%;
    height:                                 var(--menuItemHeight);
}

.t
{
    line-height: 28px;
    float: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 65%;
    color: #d9d9d9;

    -webkit-transition:                     color 0.5s ease-out;
    -moz-transition:                        color 0.5s ease-out;
    -o-transition:                          color 0.5s ease-out;
    transition:                             color 0.5s ease-out;
}


.d
{
    line-height: 16px;
    font-size: 12px;
    opacity: 0.4;
    display: block;
    clear: both;
}





















a {text-decoration: none;}

.logo
{
    background: url(base/img/logo.svg);
    position:   relative;
    height:     90%;
    width:      120px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-left: 25px;
    top:        2px;
    filter: brightness(0) invert(1);
}





.splashLogo 
{
    border-radius:                  50%;
    background:                     var(--roseColor);
    box-shadow:                     31px 31px 63px #bababa,
                                    -31px -31px 63px #fcfcfc;

    height:                         200px;
    width:                          200px;

    position:                       absolute;
    padding:                        var(--generalPadding);
}

.center
{
    top:                            50%;
    left:                           50%;
    transform:                      translate(-50%, -50%);
}


.sideBar
{
    height:                         100vh;
    position:                       fixed;
    width:                          260px;
    background-color:               var(--menuBackColor);
    cursor:                         pointer;
    border-right:                   1px solid var(--panelBorder);
    z-index:                        1;
    background-color:               #000000ad;
    transform:                      translate3d(-180px, 0px, 0px);
}

.sideBar:hover {

    transform:                      translate3d(0px, 0px, 0px);
}

.topBar {
    width:                          100%;
    height:                          var(--topBar);
    
    background-color: #000000e0;
    position:                       fixed;
    border-bottom:                  1px solid var(--panelBorder);
    z-index:                        1;
}

.transitionWidth
{
    -webkit-transition:             width 0.25s ease-out;
    -moz-transition:                width 0.25s ease-out;
    -o-transition:                  width 0.25s ease-out;
    transition:                     width 0.25s ease-out;
}
			
.transition
{
    -webkit-transition:             all 0.95s ease-out;
    -moz-transition:                all 0.95s ease-out;
    -o-transition:                  all 0.95s ease-out;
    transition:                     all 0.95s ease-out;
}


.transition05 {
    -webkit-transition:             all 0.5s ease-out;
    -moz-transition:                all 0.5s ease-out;
    -o-transition:                  all 0.5s ease-out;
    transition:                     all 0.5s ease-out;
}

.transition-5
{
    -webkit-transition:             transform 0.25s ease-out;
    -moz-transition:                transform 0.25s ease-out;
    -o-transition:                  transform 0.25s ease-out;
    transition:                     transform 0.25s ease-out;
}

.raduisRight 
{
    -webkit-border-top-right-radius:        4px;
    -webkit-border-bottom-right-radius:     4px;
    -moz-border-radius-topright:            4px;
    -moz-border-radius-bottomright:         4px;
    border-top-right-radius:                4px;
    border-bottom-right-radius:             4px;
}


/*  Menu */


.menuHeader 
{
    /*background-color:                       var(--menuHeader);*/
    height:                                  var(--topBar);;
}

.menuShadow
{
    filter:                                 grayscale(34%) drop-shadow(1px 1px 1.5px rgba(0,0,0,0.2));
    -webkit-filter:                         grayscale(34%) drop-shadow(1px 1px 1.5px rgba(0,0,0,0.2));
    -moz-filter:                            grayscale(34%) drop-shadow(1px 1px 1.5px rgba(0,0,0,0.2));
}

.dashBoard
{

    position:                               relative;
    height:                                 calc(100vh - var(--topBar));
    background:                             var(--bodyColor);
    width:                                  calc(100% - var(--sideBarWidth));
    left:                                   var(--sideBarWidth);

    display:                                flex;
    flex-direction:                         row;
    flex-wrap:                              wrap;
    overflow:                               auto;
    gap:                                    var(--marginContainer);
    scroll-snap-type:                       y mandatory;
}

.dashGroup{
    height:                                 calc(45%);
    display:                                flex;
    width:                                  100%;
    scroll-snap-align:                      center;

    background-color:                       #fff;
    background-clip:                        border-box;
    border:                                 1px solid rgba(0,0,0,.125);
    border-radius:                          0.25rem;


    -webkit-border-radius:                  4px;
    -moz-border-radius:                     4px;
    border-radius:                          4px;
   

    box-shadow: 0 1px 2px 0 rgb(33 33 33 / 14%), 0 0 1px 0 rgb(0 0 0 / 14%);

}

.dashBoard::-webkit-scrollbar {
    width:                                  5px;
}
   
.dashBoard::-webkit-scrollbar-track {
    box-shadow:                             inset 0 0 6px rgba(0, 0, 0, 0.3);
}
   
.dashBoard::-webkit-scrollbar-thumb {
    background-color:                        rgba(134, 133, 133, 0.664);
    outline:                                1px solid vr(--bodyColor);
    -webkit-border-radius:                  4px;
    -moz-border-radius-topright:            4px;
    border-radius:                          4px;
}


.labelsR {
    padding: 1px 5px 0px 5px;
    width: 28px;
    height: 20px;
    line-height: 20px;
    margin-top: -63px !important;
    background: rgb(29 28 28);
    /* For IE 5.5 - 7*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
    font-family: 'Roboto Condensed';
    font-size: small;
    color: white;
    text-align: center;


    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;

        font-size: 10px;
            font-weight: bold;
            color: white;
            font-family: 'Roboto';

}


        .labels {
            padding: 1px 5px 0px 5px;
            width: 48px;
            height: 20px;
            line-height: 20px;
    
        background: rgb(29 28 28);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
            /* For IE 8*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
            font-family: 'Roboto Condensed';
            font-size: small;
            color: white;
            text-align: center;
    
    
            border-radius: 4px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -ms-border-radius: 4px;
            -o-border-radius: 4px;

                font-size: 10px!important;
                    font-weight: bold!important;
                    color: white !important;
                    font-family: 'Roboto' !important;
    
        }


.home{    position: absolute;
    left: 15px;
    top: 8px;
    height: 25px;
}


.leftMenu{list-style: none;
    border: none !important;
    overflow-y: scroll !important;
    position: relative;
    width: 100%;
    height: calc(100% - var(--topBar));
    padding-inline: 0px;
    margin: 0;
    position: relative;


    overflow-x: hidden;
    flex-direction: row;
    flex-wrap: wrap;
}


.leftMenu::-webkit-scrollbar {
    width:                                  5px;
}
    
.leftMenu::-webkit-scrollbar-track {
    box-shadow:                             inset 0 0 6px rgba(22, 22, 22, 0.397);
}
    
.leftMenu::-webkit-scrollbar-thumb {
    background-color:                        rgba(185, 185, 185, 0.664);
    outline:                                1px solid vr(--bodyColor);
    -webkit-border-radius:                  4px;
    -moz-border-radius-topright:            4px;
    border-radius:                          4px;
}



.svg-inline--fa {
    display: var(--fa-display,inline-block);
    height: 1.5em; }








/*----------------------------------*/

/* user */ 


.user {    position: absolute;
    top: 0;
    right: 0;
    width: 230px;
    height: 100%;}

.userIcon {
    height: 100%; 
    font-size: 22px;
    line-height: 22px;
    position: absolute;
    top: calc( 100% - 60px / 2 - 15px);
    color: white
}

.userName {position: absolute;
    width: 160px;
    right: 30;
    top: 14px;color: darkgray}

.userProfileName
{    font-size: 12px;

    color: #a1a1a1;}

/* ---------------------------------*/

#btn_corte {position: absolute;
    bottom: 55px;
    width: 50%;
    left: 25%;}

.center
{
    left:                                   50%;
    position:                               absolute;
    transform:                              translate(-50%, -50%);
    top:                                    50%;
}

.panelContainer
{
    background-color: white;
    width: 100%;
    -webkit-border-radius: 4px;
    -moz-border-radius-topright: 4px;
    border-radius: 4px;
    outline: 1px solid vr(--bodyColor);
    border: 1px solid #dddbdb;
    position: relative;  
}


.iframePanel
{
    position: absolute;
    left: 0px;
    right: 0px;
    width: 100% ;
    height: 100% ;
    padding: 0px;
    top: 0px;
    bottom: 0px;
    border-width: 0px;
}










.search{position: absolute;
    width: 300px;
    /* height: 100%; */
    /* background: coral; */
    top: 0px;
    left: 280px;
    border-left: 1px solid #adabab;
    margin: 15px;
    box-sizing: border-box;
    bottom: 0;
cursor: pointer;
}

    .searchIcon {left: 25px;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;}


        .searchText {    left: 119px;
            position: absolute;
            transform: translate(-50%, -50%);
            top: 50%;
            color: white;}












            #emap{    position: absolute;
                left: 0;
                right: 0;
                background-color: #bababa;
                margin: 0;
                padding: 0;
                top: 0;
                bottom: 0;}





#carSearch {position: absolute;
    left: 0;
    bottom: 28px;

    width: 300px;
    background: #00000021;
    overflow: auto;

    height: 52px;
    border-top: 1px solid gray;}

#carSearchInput {position: absolute;
    left: 10px;
    top: 8px;
    height: 30px;
    right: 13px;
    background-color: #000000b8;
    border: 1px solid gray;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding-left: 40px;
    color: white;
    font-size: 18px;}

#carList {position: absolute;
    left: 0;
    bottom: 100px;
    top: 60px;
    width: 300px;
    background: #00000021;
    overflow: auto;
    scroll-snap-type: x mandatory;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;}
.car{ width: calc(100%);
    height: 75px;
    background-color: #ffffffe0;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    display: flex;
    flex: 1;
}

.carStop{    background-color: red;
    border-left: 4px solid #cc0000;}


        .carMove {
            background-color: #027a08;
            border-left: 4px solid #014104;
        }

    #carList::-webkit-scrollbar {
        width:                                  5px;
    }
        
    #carList::-webkit-scrollbar-track {
        box-shadow:                             inset 0 0 6px rgba(22, 22, 22, 0);
    }
        
    #carList::-webkit-scrollbar-thumb {
        background-color:                        rgb(230, 230, 230);
        outline:                                1px solid vr(--bodyColor);
        -webkit-border-radius:                  4px;
        -moz-border-radius-topright:            4px;
        border-radius:                          4px;
    }


    .carStatus
    {
        position: absolute;
    left: 10px;
    top: 35%;
    bottom: 7px;
    width: 12px;
   
    -webkit-border-radius:  6px;
    -moz-border-radius:     6px;
    border-radius:          6px;

    }

    .carStatusKey
    {
    position: absolute;
        left: 10px;
        top: 3px;
        height: 20px;
        width: 20px;
        background-repeat: no-repeat;
        background-position: center;
    }

    .carStatusKeyOn
    {
        background-image: url(base/img/keyon.png);
    }
    .carStatusKeyOff {
        background-image: url(base/img/keyoff.png);
    }
    .carStatusOff
    {
        border: 3px solid #434343;
        background-color: #747474;
    }

    .carStatusStop{
        border: 3px solid #75101052;
        background-color: red;
    }

.carTitle{
    color: #3c3636e3;
    font-weight: bold;
    position: absolute;
    left: 37px;
        top: 3px;
        font-size: 14px;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  
    scroll-behavior: smooth;
    width: calc(100% - 100px);
    display: flex;
}

.carSubTitle{ color: #818181;
    font-weight: bold;
    position: absolute;
    left: 37px;
    top: 21px;
    font-size: 19px;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: .55rem;
    scroll-behavior: smooth;
    width: calc(100% - 100px);
    display: flex;}


    .carInt{
        width: calc(100%);
        height: 75px;
        background-color: white;
        box-sizing: border-box;
        position: relative;
        cursor: pointer;
        margin-left: 3px !important;
        display: flex;
        border-bottom: 1px solid gainsboro;
        border-top: 1px solid #a1a1a1;
    }

        .carInt:hover{

            background: #fffaee;
        }
        .carIntStop{   
            border-left: 4px solid #cc0000;}

        .carIntOff {
            border-left: 4px solid #434343;

        }

        .carOff {
                background-color: #999999;
            border-left: 4px solid #585858;
        }

                .carIntMove {
                    border-left: 4px solid #014104;
                }
            .carInfoHour{color: #0000008f;
                font-weight: bold;
                position: absolute;
                left: 13px;
                font-size: 19px;
                font-smooth: always;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                font-size: .5rem;
                scroll-behavior: smooth;
                width: calc(100% - 100px);
                display: flex;
                bottom: 5px;}


                .carAlertCon{
                    position: absolute;
                    right: 5px;
                    top: 22px;
                    width: 20px;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: 15px;
                    width: 19px;
                    height: 40px;
       }

                    .carAlertConUnplug{background-image: url(base/img/unnplug.png);filter: brightness(0) invert(.85);}


                    .carSpeed {color: #181818e3;
                        font-weight: bold;
                        position: absolute;
                        right: 25px;
                        top: 5px;
                        font-size: 19px;
                        font-smooth: always;
                        -webkit-font-smoothing: antialiased;
                        -moz-osx-font-smoothing: grayscale;
                        font-size: 1.3rem;
                        scroll-behavior: smooth;
                        /* width: calc(100% - 100px); */
                        display: flex;}

                        
                    .carSpeedText {color: #747373e3;
                        font-weight: bold;
                        position: absolute;
                        right: 5px;
                        top: 19px;
                        font-size: 19px;
                        font-smooth: always;
                        -webkit-font-smoothing: antialiased;
                        -moz-osx-font-smoothing: grayscale;
                        font-size: 7px;
                        scroll-behavior: smooth;
                        /* width: calc(100% - 100px); */
                        display: flex;}


                        .carGeoCoding{ color: #0000008f;
                            font-weight: bold;
                            position: absolute;
                            left: 13px;
                            font-size: 19px;
                            font-smooth: always;
                            -webkit-font-smoothing: antialiased;
                            -moz-osx-font-smoothing: grayscale;
                            font-size: 8px;
                            scroll-behavior: smooth;
                            width: calc(100% - 40px);
                            display: flex;
                            bottom: 18px;
                         }
                         
                         
#iconoMapSelected 
{

    background: url(45.svg);
    position: absolute;
    z-index: 1000;
    height: 32px;
    width: 32px;
    width: 100%;
    top: 0;
    bottom: 0;
    height: calc(80% - 16px);
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

#textoCalle {position: absolute;
    margin: 20px;
    width: 100%;
    z-index: 1;
    color: #960404;
    font-weight: 750;
    font-size: 20px;
    pointer-events: none;

    background-color: #ffffffe3;
    padding: 20px;
    margin: 0px;}