html, body {
    background-color: #f4f6f9 !important;
    font-family: 'Roboto' !important;
    /* font-family: 'Segoe UI' !important; */
}

.dx-datagrid-rowsview .dx-select-checkboxes-hidden .dx-select-checkbox {
    display: inline-block !important;
}

.alignment-center
{
  text-align: center !important;
}

.cursor-pointer {
    cursor: pointer;
}
.hidden_buttons
{
    display: inherit;
}
.user-panel img {
    height: 2.1rem !important;
    width: 2.1rem;
}
/* Skin new
.main-header {
    border-bottom: 1px solid #087f5b !important;
}
*/
.img_vehiculo_load {
    padding: 1.5rem 3rem !important;
}

.no_radius {
    border-radius: 0% !important;
}

.vh50 {
    height: 50px !important;
}

.login-page .input-group-append .input-group-text {
    width: 41px;
}

.login-page :-webkit-autofill,
.login-page input :-webkit-autofill,
.login-page input:-webkit-autofill,
.login-page :-internal-autofill-selected,
.login-page input :-internal-autofill-selected,
.login-page input:-internal-autofill-selected {
    background-color: #FFFFFF !important;
}

.login-page :-webkit-autofill { /* also works for firefox! */
    filter: none !important; /* u need this for firefox */
    box-shadow: 0 0 0 100px #FFFFFF inset !important;
}

.login-page input {
    filter: none !important;
}

.drop_image {
    cursor: pointer;
    position: absolute;
    border-radius: 50%;
    top: 6%;
    right: 10%;
    z-index: 10;
    text-align: center;
    vertical-align: middle;
    line-height: 18%;
    width: 30px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #dfdfdf94;
    font-size: 14px;
    color: #606060e0;
}

.drop_image:hover {
    border-color: #8d8d8d;
    background-image: linear-gradient( to bottom, rgb(212, 212, 212), #dfdfdf94 );
}

.drop_image:focus {
    padding: 0 0.56em 0 0.68em;
}

.position_absolute {
    position: absolute;
}
/* Skin new
.main-footer {
    background: #087f5b !important;
    border-top: 1px solid #087f5b !important;
    color: #ffffff !important;
}
*/
.main-sidebar .as-footer {
    bottom: 0;
    z-index: 1032;
}

.as-footer {
    /* padding: .812rem; */
    padding: 0px 8px;
    color: #ffffff !important;
}

.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link {
    text-align: center;
}

.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link i {
    padding: 0;
    margin: 0;
}

.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link p {
    width: 0;
    height: 0;
    display: none;
}

td.dvc-status {
    height: 45px;
    padding: 0px;
    text-align: center;
    vertical-align: middle;
}

td.dvc-status .badge {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
}


/* Mapa Layer Group */
.leaflet-control-layers.leaflet-control .leaflet-control-layers-toggle {
    background-image: none !important;
    width: 30px !important;
    height: 30px !important;
}

.bg-dark-0 {
    background-color: #212529 !important;
}

.bg-dark-1 {
    background-color: #000000 !important;
}

.details div.col-sm-12.col-md-4 .row {
    border: 1px solid #fff !important;
}

.head-footer .select2-container {
    width: calc(100% - 38px) !important;
}

.select2-container--default .select2-dropdown.select2-dropdown--above {
    /* width: 100% !important; */
    position: relative !important;
}

.select2-container--default .select2-results > .select2-results__options li,
.widget-user-username.nombre_cliente {
    text-transform: uppercase;
    font-weight:bold;
}

.widget-user-desc.tipo_cliente {
    font-weight: 300;
}

.titleDesc {
    text-transform: uppercase;
    font-family: Segoe UI;
    font-weight: bold;
    color: #000000;
    font-size: 11px;
    line-height: 17px;
    /*
        font-size: 13px;
        line-height: 20px;
    */
    background-color: #FFFFFF !important;
    color: #006747 !important;
}
/*
.details div.col-sm-12.col-md-4 .row:nth-child(2n+0) .titleDesc {
    background-color: #087f5b !important;
    color: #fff !important;
}
*/
.txtDesc {
    /* font-family: Segoe UI; */
    text-transform: uppercase;
    font-weight: 600;
    color: #000000;
    font-size: 10px;
    line-height: 17px;
    /*  background-color: #087f5b !important;
    color: #fff !important;*/
}
/*
.details div.col-sm-12.col-md-4 .row:nth-child(2n+0) .txtDesc {
    background-color: #000000 !important;
    color: #fff !important;
}
*/

/*
.details-color {
    width: 50%;
    height: 10px;
    margin: 2px 0;
    -- height: 12px; 
    -- margin: 4px 0;
    font-size: 50px;
    display: block;
    border-radius: 2px;
}
*/

.details-color {
    width: 100%;
    height: 16px;
    margin: 4px 0;
    font-size: 50px;
    display: block;
    border-radius: 2px;
    box-shadow: 0px 0px 3px #000;
}

.badge .unew {
    font-size: 13px;
    padding-top: .09rem !important;
    padding-bottom: .09rem !important;
}

.head-footer {
    height: 47.78px;
    width: 100%;
    /* background: #087f5b; */
    margin-top: -1px;
}

.main-footer.mapFoo {
    background: #ffffff !important;
    border-top: 1px solid #ffffff !important;
    color: #ffffff !important;
}

.mapFoo .vehiculo_info {
    background: #ffffff;
    color: #000000;
    /* height: 200px; */
}

.mapFoo a i,
.mapFoo button i {
    font-size: 20px;
}

.mapFoo a.nav-link,
.mapFoo button.nav-link {
    /* height: 47.78px;
    width: 47.78px; */
    height: 57px;
    width: 57px;
    padding: 0px;
    border-radius: 0px !important;
    cursor: pointer;
}

.mapFoo a.nav-link i,
.mapFoo button.nav-link i {
    margin: 0 auto;
}

.mapFoo a.nav-link:hover,
.mapFoo button.nav-link:hover {
   color: #fff;
   background-color: #000000;
   border-color: #000000;
   box-shadow: none;
}

/*
.mapFoo a.nav-link.btn,
.mapFoo button.nav-link.btn {
    height:  calc(47.78px - .5rem - .5rem);
}
*/

.mapFoo button.btn-dark {
    border-radius: 4px !important;
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

.mapFoo button.btn-dark {
    color: #fff;
    background-color: #000000;
    border-color: #000000;
    box-shadow: none;
}

.mapFoo button.btn-dark:hover {
   color: #fff;
   background-color: #1d2124;
   border-color: #1d2124;
}

/* FOOTER */

.content-wrapper {
    /*  min-height: calc(100% - 104.78px) !important; */
    padding-bottom: 0 !important;
}

/*
.layout-footer-fixed .wrapper .main-footer {
    position: static !important;
}
.layout-footer-fixed .wrapper .mapFoo {
    position: fixed !important;
}
*/

/*
.mapFoo-hide .vehiculo_info {
    display: none;
}
*/
/* ASIDE */
.txtleft .nav-sidebar .nav-link {
    text-align: left !important;
}

[class*=sidebar-dark-] {
    background-color: #000000 !important;
}
/* Skin new
    [class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link:focus,
    [class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link:hover {
        background-color: #087f5b !important;
        color: #fff;
    }
*/
/* Login */
.login-page .copy {
    color: #000000;
    font-size: 10px;
}

.login-page .fa-eye,
.login-page .fa-eye-slash {
    cursor: pointer;
}

.login-page .form-control {
    border-color: #343a40 !important;
}

.login-card-body, .register-card-body {
    background: rgba(255, 255, 255, 0);
}

.login-card-body .input-group .input-group-text, .register-card-body .input-group .input-group-text {
    color: #000;
    border-color: #343a40 !important;
}


/* Tablas */

/* Skin new
thead {
    background-color: #087f5b !important;
    color: #fff !important;
}
*/

/* Reportes */
.rp-btn {
    height: 38px;
    margin-top: 4px;
}

/* Notificaciones */
.show a.dropdown-item {
    color: #16181b !important;
    text-decoration: none;
    background-color: #f4f6f9 !important;
}

.show a.dropdown-item.new {
    color: #ffffff !important;
    text-decoration: none;
    /* background-color: #087f5b !important; */
    /* background-color: rgba(45,166,129,0) !important; */
    background-color: #ddf7dd !important;
    height: 79px;
}

.show a.dropdown-item.new p,
.show a.dropdown-item.new p i,
.show a.dropdown-item.new p b,
.show a.dropdown-item.new p span {
    /* color: #ffffff !important; */
    color: #000000 !important;
    font-weight: 600;
}

.show a.dropdown-item p i,
.show a.dropdown-item p b {
    font-size: .875rem !important;
}

.show a.dropdown-item p {
    font-size: 13px !important;
}

.show a.dropdown-item p span {
    font-size: 11px !important;
}

.table-striped tbody tr.new td {
    z-index: 1;
    position: relative;
}

/* Markers */
.marker-pin-not {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -15px 0 0 -15px;
    background: #000000;
    box-shadow: 0px 0px 1px #888888;
}

.marker-pin-not::after {
    content: '';
    width: 26px;
    height: 26px;
    margin: 2px 0 0 2px;
    background: #fff;
    position: absolute;
    border-radius: 50%;
}

.leaflet-marker-icon {
    display: flex;
    align-items: center;
    width: 26px !important;
}

.leaflet-data-marker i {
    position: absolute;
    width: 26px;
    text-align: center;
}

.leaflet-data-marker i.x-not {
    font-size: 20px !important;
    /* margin: 5px auto; */
}

.leaflet-data-marker i.x-slash {
    font-size: 19px !important;
    /* margin: 4px auto; */
}


/* Icon Active */
.marker-pin-active {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -15px 0 0 -15px;
    background: #000000;
    box-shadow: 0px 0px 1px #888888;
}

.marker-pin-active::after {
    content: '';
    width: 24px;
    height: 24px;
    margin: 3px 0 0 3px;
    background: #fff;
    position: absolute;
    border-radius: 50%;
}

/* Menu */
i.text-green {
    color: #00e676 !important;
}

a.plus-m {
    display: none;
    cursor: pointer;
    float: right !important;
    margin-right: 5px;
    margin-top: 3px;
    position: absolute;
    z-index: 2;
    right: 0;
    border-radius: 50%;
    color: #FFFFFF !important;
    /* background-color: #00e676;
    border-color: #00e676; */
    padding: 6px;
    width: 35px;
    height: 35px;
}

a.plus-m i {
    font-size: 15px !important;
}

li.add a.plus-m,
a.plus-m:hover {
    display: block;
}
/*
a.plus-m:hover {
    color: #FFFFFF;
    background-color: #00e676;
    border-color: #00e676;
}
*/
.nav-sidebar .nav-item > .nav-link {
    padding-top: 10px;
    padding-bottom: 10px;
}

table.table-bordered.dataTable th {
    text-transform: uppercase;
}

/*
.text-sm .nav-sidebar.nav-child-indent .nav-treeview {
    padding-left: 0px !important;
    margin-left: 0rem !important;    
}
*/

section.content {
    min-height: 610px;
}

/* Header */
.menu-circle-icon a.nav-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* margin-right: 3px !important; */
    background: rgba(0, 0, 0, 0.4);
}

.menu-circle-icon:hover a.nav-link,
.menu-circle-icon.show a.nav-link {
    background: #FFFFFF;
}

.header-btn-lg::before {
    position: absolute;
    left: -1px;
    top: 50%;
    background: #dee2e6;
    width: 1px;
    height: 30px;
    margin-top: -15px;
    content: '';
}

.header-btn-lg {
    padding: 0 0 0 1rem;
    margin-left: 1rem !important;
    display: flex;
    align-items: center;
    position: relative;
}

.header-btn-img .user-image {
    width: 40px !important;
    height: 40px !important;
    margin: 0px !important;
    line-height: 0px !important;
    object-fit: cover;
    display: block !important;
}

.header-btn-img a.nav-link {
    padding: 0px !important;
    height: auto !important;
}

.control-sidebar-slide-open #control-sidebar,
#hide-menu-1 {
    background: #FFFFFF;
}

.control-sidebar-slide-open #control-sidebar i,
#hide-menu-1 i {
    font-size: 24px !important;
}

#hide-menu-1 i {
    color: #bd2130 !important;
}

.control-sidebar-slide-open #control-sidebar i::before {
    content: "\f00d";
}

.control-sidebar .input-group button.btn-dark {
    border-radius: 4px !important;
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
    width: 38px;
}

.control-sidebar .select2-container--default .select2-selection--single {
    border: 1px solid #ffffff !important;
}



/*
.menu-circle-icon:hover a.nav-link i,
.menu-circle-icon.show a.nav-link i {
   color: #087F5B !important;
}

.menu-circle-icon.show a.dropdown-item i,
.menu-circle-icon.show a.dropdown-item b {
   color: #087f5b;
}
*/

.menu-circle-icon.show a.dropdown-item b {
    font-family: Segoe UI;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #fff !important;
    text-decoration: none;
    background-color: #087f5b !important;
}

    .dropdown-item.active i,
    .dropdown-item.active b,
    .dropdown-item.active span,
    .dropdown-item:active i,
    .dropdown-item:active b,
    .dropdown-item:active span {
        color: #fff !important;
        text-decoration: none;
        background-color: #087f5b !important;
    }


.menu-circle-icon a.nav-link {
    width: 40px !important;
    height: 40px !important;
    display: flex;
    align-items: center;
}

    .menu-circle-icon .nav-link i,
    .menu-circle-icon a.nav-link i {
        font-size: 1.3rem !important;
        width: 40px;
        color: #FFFFFF;
        text-align: center;
    }

    .menu-circle-icon a.nav-link.xbadge span.badge {
        font-weight: 700;
    }

.menu-circle-img {
    width: 40px;
    height: 40px;
    background: #FF0000;
    border-radius: 50%;
    margin-left: 3px !important;
    margin-right: 3px !important;
}

    .menu-circle-img a.nav-link.dropdown-toggle,
    .menu-circle-icon a.nav-link {
        padding: 0 !important;
    }

    .menu-circle-img .user-image {
        width: 40px !important;
        height: 40px !important;
        margin: 0px !important;
        line-height: 0px !important;
        object-fit: cover;
    }

.text-sm .content-header h1,
.jconfirm-title, .titulo-se {
    text-transform: uppercase;
    font-family: Segoe UI;
    font-weight: 700;
    color: #343a40;
}

.jconfirm-buttons button:first-child {
    color: #fff !important;
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    font-family: Segoe UI;
    font-weight: 700;
}

    .jconfirm-buttons button:first-child:hover {
        color: #fff !important;
        background-color: #218838 !important;
        border-color: #1e7e34 !important;
    }

.jconfirm-buttons button:last-child {
    color: #fff !important;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    font-family: Segoe UI;
    font-weight: 700;
}

    .jconfirm-buttons button:last-child:hover {
        color: #fff !important;
        background-color: #c82333 !important;
        border-color: #bd2130 !important;
    }

.card-header a,
.card-footer a,
.card-header button,
.card-body button,
.card-body .btn-perfil a,
.card-footer button,
.modal-footer button,
.fooEstilos button,
.fooEstilos a,
.btn-upload {
    text-transform: uppercase;
    font-family: Segoe UI;
    font-weight: 700;
}

.card-header a,
.card-header button.btn-block:not(.rp-btn) {
    white-space: nowrap;
    width: max-content;
    margin-top: 0px !important;
}


.card-header a i,
.card-footer a i,
.card-header button i,
.card-body button i,
.card-body .btn-perfil a i,
.card-footer button i,
.modal-footer button i,
.fooEstilos button i,
.fooEstilos a i,
.btn-upload i {
        margin-right: 7px;
}


.nav-pills .nav-link.active i,
.nav-pills .show > .nav-link i {
    color: #ffffff !important;
}

.nav-pills .nav-link.active i,
.nav-pills .nav-link.active p,
.nav-sidebar .nav-link:hover i,
.nav-sidebar .nav-link:hover p {
    color: #ffffff !important;
}


    /* card-body */
    .card-body table tr th, .card-body table tr td {
        white-space: nowrap;
        text-transform: capitalize;
    }

    .card-body table tr td.p-0 {
        display: inline-flex;
    }

    #usuario table tbody tr td:last-child,
    #vehiculo table tbody tr td:last-child,
    #dispositivo table tbody tr td:last-child,
    #conductor table tbody tr td:last-child,
    #geocercado table tbody tr td:last-child,
    #grupo table tbody tr td:last-child {
        display: inline-flex;
        padding: 0px;
        width: 100%;
    }

    #usuario table tbody tr td:last-child a i,
    #vehiculo table tbody tr td:last-child a i,
    #dispositivo table tbody tr td:last-child a i,
    #usuario table tbody tr td:last-child button i,
    #vehiculo table tbody tr td:last-child button i,
    #dispositivo table tbody tr td:last-child button i,
    #conductor table tbody tr td:last-child a i,
    #geocercado table tbody tr td:last-child a i,
    #grupo table tbody tr td:last-child a i,
    #conductor table tbody tr td:last-child button i,
    #geocercado table tbody tr td:last-child button i,
    #grupo table tbody tr td:last-child button i {
        font-size: 15px !important;
        width: 35px !important;
        float: none !important;
    }

.card-body table tr td button,
.card-body table tr td.p-0 a,
.card-body table tr td.p-0 form,
.card-body table tr td.p-0 button,
.dx-item a.btn,
.dx-item form,
.dx-item button {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    padding: 0px;
}

.card-body table tr td button,
.card-body table tr td.p-0 a,
.card-body table tr td.p-0 button,
.dx-item a.btn,
.dx-item form,
.dx-item .btn {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    margin-left: 5px !important;
    margin-right: 0px !important;
    display: flex;
    align-items: center;
}

.card-body table tr td.p-0 form {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    margin-left: 5px;
    margin-right: 0px;
    padding: 0px !important;
}

.card-body table tr td.p-0 form button,
.dx-item form button {
    margin: 0px !important;
    margin-top: 0px !important;
}

#resumenCliente .dx-box-flex .dx-item:last-child form button,
.dx-box-flex .dx-item:last-child form button {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.card-body table tr td.p-0 form:last-child {
    margin-right: 5px !important;
}

.card-body table tr td a i,
.card-body table tr td.p-0 a i,
.dx-item a.btn i {
    margin-right: 0px;
    font-size: 15px;
    width: 35px;
}

.card-body table tr td button i,
.card-body table tr td.p-0 button i {
    margin-right: 0px;
    font-size: 15px !important;
    width: 35px !important;
}

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

    .card .container-fluid .card-footer .right {
        margin-right: -.625rem;
    }

.fullTd {
    width: 100% !important;
}

.fullTdx {
    width: 50% !important;
}

.actionTd {
    width: auto !important;
}

.actionTdx {
    width: 50px !important;
}

.actionTdy {
    width: 70px !important;
}

.actionTdz {
    width: 200px !important;
}
/* Modal */
.modal-header h5 {
    text-transform: uppercase;
    font-family: Segoe UI;
    font-weight: 700;
    color: #343a40;
}

.modal-content select {
    text-transform: capitalize;
}

/* Skin new
.nav-tabs .nav-link:not(.active), .nav-pills .nav-link:not(.active):hover {
    color: #087f5b !important;
}
*/

.ttitle {
    font-size: 13px !important;
}

.icolor {
    font-size: 25px;
    padding: 10px;
    text-shadow: 0px 0px 3px black;
}

.p0 {
    padding: 0 !important;
}



/* Dispositivos */
.avatar-upload .avatar-edit i {
    font-size: 14px;
    padding: 9px;
    color: white;
}

.avatar-upload .avatar-edit input + label {
    background: #000000 !important;
    /* background: #087f5b !important; */
}

.avatar-upload .avatar-preview {
    border: 0px solid #343a40 !important;
}

.form-control {
    border-color: #343a40 !important;
}


/*** END ***/
.leaflet-draw-draw-marker, .leaflet-draw-draw-rectangle, .leaflet-draw-draw-circlemarker {
    display: none !important;
}

.avatar-upload {
    position: relative;
    /* max-width: 205px; */
    max-height: 320px;
    margin: 0px auto 0px auto;
}

    .avatar-upload .avatar-edit {
        position: absolute;
        right: 26px;
        z-index: 1;
        top: 16px;
    }

        .avatar-upload .avatar-edit input {
            display: none;
        }

            .avatar-upload .avatar-edit input + label {
                display: inline-block;
                width: 34px;
                height: 34px;
                margin-bottom: 0;
                border-radius: 100%;
                background: #ffffff;
                border: 1px solid transparent;
                box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
                cursor: pointer;
                font-weight: normal;
                transition: all 0.2s ease-in-out;
            }

                .avatar-upload .avatar-edit input + label:hover {
                    background: #f1f1f1;
                    border-color: #d6d6d6;
                }

                .avatar-upload .avatar-edit input + label:after {
                    color: #757575;
                    position: absolute;
                    top: 10px;
                    left: 0;
                    right: 0;
                    text-align: center;
                    margin: auto;
                }

    .avatar-upload .avatar-preview {
        /* width: 192px;
    height: 192px; */
        position: relative;
        /* border-radius: 100%; */
        border: 6px solid #f8f8f8;
        /* box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); */
    }

        .avatar-upload .avatar-preview > img {
            width: 100%;
            height: 320px;
            border-radius: 0%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            object-fit: cover;
        }

[class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link.active, [class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link.active:focus, [class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link.active:hover {
    background-color: rgba(255,255,255,.2) !important;
    color: #ffffff !important;
}

.hidden {
    display: none !important;
}
/* Skin new
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: #087f5b !important;
    color: #fff;
}
*/
.navbar-nav > .user-menu > .dropdown-menu > .user-body {
    border-bottom: 0px !important;
    border-top: 1px solid #dee2e6;
    padding: 15px;
}
/* Skin new
.navbar-green {
    background-color: #087f5b !important;
}
*/
.card-warning.card-outline {
    border-top: 3px solid #087f5b !important;
}
/* Skin new
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #087f5b !important;
    color: #fff;
}
*/
.exclusive {
    background-color: rgba(255, 255, 255, .9) !important;
    color: #343a40;
}

.profile-user-img {
    border: none !important;
}

.hidden {
    display: none !important;
}

.form-error {
    border: 2px solid #e74c3c;
}

.right {
    float: right;
}

#card-element {
    width: 500px !important;
}

.StripeElement {
    background-color: white;
    height: 40px;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}

.StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
    border-color: #fa755a;
}

.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}



/*************************************/
/**********  TABLAS NUEVAS  **********/
/*************************************/

.dx-datagrid .dx-header-filter-empty {
    color: rgb(193 213 198);
}


/********************************
********* BOTONES MAPA **********
*********************************/

.leaflet-control-a {
    /*font: bold 18px 'Lucida Console', Monaco, monospace; 
    text-indent: 1px;*/
    font-size: 20px;
    margin-bottom: 10px;
    color: #343a40 !important;
}
/*
.leaflet-nuevo .leaflet-bar a {
    width: 34px;
    height: 34px;
    line-height: 30px;
}
.leaflet-nuevo .leaflet-bar a:hover,
.leaflet-nuevo .leaflet-bar a:last-child {    
    border-bottom: 2px solid rgba(0,0,0,0.2) !important;
}
*/
.leaflet-touch .leaflet-bar a i,
.leaflet-touch .leaflet-bar span i {
    line-height: 30px;
}

.leaflet-touch .leaflet-bar a:last-child,
.leaflet-touch .leaflet-bar button:last-child {
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

.leaflet-touch .leaflet-bar a:first-child,
.leaflet-touch .leaflet-bar button:first-child {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
/*
.leaflet-nuevo .leaflet-control-layers,
.leaflet-nuevo .leaflet-bar {
    border: 0px solid rgba(0,0,0,0.2) !important;
    background-clip: padding-box;
}
.leaflet-nuevo .leaflet-control-a  {
    border: 2px solid rgba(0,0,0,0.2);
    background-clip: padding-box;
}
*/

button.remove-geocercas-active i,
button.ocultar-comandos-active i,
button.remove-lock-active i,
a.remove-geocercas-active i,
a.ocultar-comandos-active i,
a.remove-lock-active i {
    /* background-color: red !important; */
    color: red !important;
}

button.remove-geocercas-active span i:last-child,
button.ocultar-comandos-active span i:last-child,
button.remove-lock-active span i:last-child,
a.remove-geocercas-active span i:last-child,
a.ocultar-comandos-active span i:last-child,
a.remove-lock-active span i:last-child {
    font-size: 20px;
    /* margin: -29px -4px; */
    margin: 0px;
    text-shadow: -1px 1px 0px white;
}

.leaflet-bar button,
.leaflet-bar button:hover,
.leaflet-bar button i.fa-slash,
a.leaflet-control-zoom-in,
a.leaflet-control-zoom-out,
a.easy-button-button,
a.leaflet-control-zoom-fullscreen,
a.leaflet-control-zoom-in:hover,
a.leaflet-control-zoom-out:hover,
a.easy-button-button:hover,
a.leaflet-control-zoom-fullscreen:hover,
a.leaflet-control-zoom-in i.fa-slash,
a.leaflet-control-zoom-out i.fa-slash,
a.easy-button-button i.fa-slash,
a.leaflet-control-zoom-fullscreen i.fa-slash {
    background: rgba(248, 249, 250, 0) !important;
}

.leaflet-bar button i,
.leaflet-bar a i {
    background: #ffffff;
    z-index: -2;
    position: absolute;
    left: 1px;
}

.leaflet-bar button i.fa-slash,
.leaflet-bar a i.fa-slash {
    z-index: -1 !important;
    position: absolute;
    left: 1px;
}

.btn-map {
    background: none rgb(255, 255, 255);
    border: 0px;
    margin: 10px;
    padding: 0px;
    position: absolute;
    cursor: pointer;
    user-select: none;
    border-radius: 2px;
    height: 40px;
    width: 40px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
    overflow: hidden;
}

.btn-map i {
    color: #666666;
    font-size: 18px;
    box-sizing: content-box;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
}

.btn-map-1 {
    top: 50px;
    right: 0px;
}

.btn-map-2 {
    top: 100px;
    right: 0px;
}

.btn-map-3 {
    top: 150px;
    right: 0px;
}

/*
.imgcroppic {
    /-border: 1px solid black;-/
    height: 80%;
    width: 90%;
    /-margin: 8%;-/
    border-radius: 2%;
    box-shadow: 0px 0px 8px 8px rgb(0 0 0 / 10%);
    position: absolute;
}
*/

/*
.fixbtn {
    width: 97.4%;
}
*/

/*
.imgcroppic::after {
    content: "\f382";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    width: 348px;    
    height: 348px;
    margin-top: -27px;
    text-align: center;
    font-weight: 900;
    font-size: 8em;
    color: #000000;
    align-items: center;
    display: flex;
    justify-content: center;
    background: #cccccc;
    opacity: .7;
}
*/

/*
.cropHeaderWrapper {
    padding-left: 2%;
    padding-top: 2.4%;
}
*/

.fullheight {
    height: 280px;
}

.imgcroppic {
    border: 1px solid black;
    height: 350px;
    width: 350px;
    margin: 0 auto;
    background: #d6d9db;
}
.crop::after {
    content: "\f382";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    width: 348px;
    height: 348px;
    text-align: center;
    font-weight: 900;
    font-size: 8em;
    color: #000000;
    align-items: center;
    display: flex;
    justify-content: center;
    background: #cccccc;
    opacity: .7;
    z-index: 0;
}
.fixbtn {
    width: 350px;
    margin: 20px auto 40px auto !important;
    margin-right: 0px !important;
    display: initial;
}
.cropHeaderWrapper {
    text-align: center;
    padding-top: 7px;
    position: relative;
}
.cropHeadW {    
    padding: 20px 30px 0px 30px !important; 
}
.cropHeadW2 {
    padding: 25px 0px 0px 0px !important;
}

/*
.cropControls {
    right: 36px !important;
    top: 7px !important;
    z-index: 101 !important;
}
*/
.imgcroppic form {
    display: none;
}
.cropControls {
    right: auto !important;
    top: auto !important;
    z-index: 101 !important;    
}
.cropControlsCrop {
    width: inherit;
}
.imgcroppic img {
    width: 348px;
    height: 348px;
}
.croppedImg {
    width: 348px;
    height: 348px;
    z-index: 100;
    position: absolute;
    margin: 0 auto;
    text-align: center;
    display: block;
}

/** W3 **/
.cropHeadW3 {
    padding: 25px 0px 0px 0px !important;
}

.cropHeadW3 .imgcroppic {
    border: 1px solid black;
    height: 200px;
    width: 400px;
    margin: 0 auto;
    background: #d6d9db;
}

.cropHeadW3 .crop::after {
    content: "\f382";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    height: 188px;
    width: 398px;
    text-align: center;
    font-weight: 900;
    font-size: 8em;
    color: #000000;
    align-items: center;
    display: flex;
    justify-content: center;
    background: #cccccc;
    opacity: .7;
    z-index: 0;
}

.cropHeadW3 .fixbtn {
    width: 398px;
    margin: 20px auto 40px auto !important;
    margin-right: 0px !important;
    display: initial;
}

.cropHeadW3 .imgcroppic img {
    height: 188px;
    width: 398px;
}

.cropHeadW3 .croppedImg {
    height: 188px;
    width: 398px;
    z-index: 100;
    position: absolute;
    margin: 0 auto;
    text-align: center;
    display: block;
}

.fa-slash.iconfa {
    z-index: 10;
    position: absolute;
    text-shadow: -1px 3px 0px #ffffff;
    /* text-shadow: -1px 3px 0px #ffc107; */
}

.text-sm .btn i {
    float: left;
    font-size: 20px;
    width: 20px;
}

.control-sidebar select {
    padding: 0.375rem 0.5rem !important;    
}
/*
.control-sidebar option:disabled {
    color: -internal-light-dark(graytext, rgb(170, 170, 170));
    background-color: #fa755a;
    height: 38px !important;
    line-height: 1.5 !important;
    min-height: 38px !important;
    padding-top: 15px !important;
}

.control-sidebar option {
    font-weight: normal;
    display: block;
    white-space: nowrap;
    min-height: 1.2em;
    padding: 0px 2px 1px !important;
    background-color: #f00;
    height: 38px;
}
.control-sidebar option:hover,
.control-sidebar option:focus,
.control-sidebar option:focus {
    background-color: #ffd800;
}
*/
.card-bodyx .select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-results > .select2-results__options li {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;   
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
}

.card-bodyx .select2-container--default .select2-selection--single .select2-selection__rendered,
.cbody .select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-results > .select2-results__options li {
    text-transform: lowercase !important;
}

.card-bodyx .select2-container--default .select2-selection--single .select2-selection__rendered,
.cbody .select2-container--default .select2-selection--single .select2-selection__rendered {
    display: block;
    padding: 0px;
    border: none;
    height: auto;
    margin-top: 0px;
    font-size: 16px !important;
}

.card-bodyx .select2-container--default .select2-selection--single .select2-selection__rendered::first-letter,
.card-bodyx .select2-container--default .select2-selection--single .select2-selection__rendered:first-letter,
.cbody .select2-container--default .select2-selection--single .select2-selection__rendered::first-letter,
.cbody .select2-container--default .select2-selection--single .select2-selection__rendered:first-letter,
.select2-container--default .select2-results > .select2-results__options li::first-letter,
.select2-container--default .select2-results > .select2-results__options li:first-letter {
    text-transform: uppercase !important;
}

.mdl-device label,
#modal_informacion_vehiculo label {
    width: 100%;
}

.mdl-device label span,
#modal_informacion_vehiculo label span{
    text-align: right;
    float: right;
    font-weight: 400 !important;
}


/* DATATABLE HOME - LTC-DEVICES */

/*
.ltc-devices table.alldevices {
    width: 100% !important;
}
*/

.ltc-devices table#alldevices td,
.ltc-devices table#alldevices th {
    border-top: 1px solid #000000 !important;
}

.ltc-devices #alldevices_length {
    margin: 15px 0 0 15px;
}

.ltc-devices #alldevices_filter {
    margin: 15px 15px 0 0;
}

.ltc-devices #alldevices_info {
    margin: 5px 0 15px 15px;
}

.ltc-devices #alldevices_paginate {
    margin: 10px 15px 15px 0;
}



/* INICIO */
.small-box > .small-box-footer {
    background-color: rgba(0,0,0,.0) !important;
    /* padding: 0px !important; */
}

.small-box > .small-box-footer:before {
    content: "";
    background-color: rgba(0,0,0,.1);
    opacity: 0.1;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

.ddni .info-box {
    padding: 1.07rem !important;
}

.ddni .info-box .info-box-icon {
    font-size: 40px !important;
}

.ddni .info-box .info-box-number {
    font-size: 30px;
}

.users-list.lasted-cl .user-img-perfil {
    overflow: hidden;
    width: 67.4px;
    height: 67.4px;
    margin: 0 auto;
    border-radius: 50%;
}

.users-list.lasted-cl .user-img-perfil img.scaleXGPS,
.scaleXGPS {
    border-radius: 0 !important;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    padding-left: 1px;
}

.card-footer.lasted-foo:after {
    content: "";
    background-color: rgba(0,0,0,.1);
    width: 100%;
    height: 100%;

}

.card-footer.lasted-foo a {
    text-transform: inherit !important;
    font-family: 'Roboto' !important;
    position: relative;
    z-index: 2;
    line-height: 37px;
    font-size: 16px;
}

.tb-devices {
    width: 100% !important;
}

.btools {
    text-align: right !important;
}

.btools .btn-tool {
    height: auto !important;
}

.btn-tool {
    width: auto !important;
}

.devices-status__list  {
    list-style: none;
    display: initial;
}

.devices-status__list li {
    display: flex;
    margin-bottom: 20px;
}

.devices-status__list li h6 {
    width: 100%;
    line-height: 21px;
}

.devices-status__list li span {
    text-align: right;
    font-size: 14px;
}

.resumen_div .progress {
    max-width: 100%;
    height: 60px;
    border-radius: 5px;
}
/*
.leaflet-interactive {
    filter: drop-shadow(1px 1px 0px #3e68ff) drop-shadow(-1px 1px 0px #3e68ff) drop-shadow(1px -1px 0px #3e68ff) drop-shadow(-1px -1px 0px #3e68ff);
}
*/
.tab-pane h5 {
    margin-top: 5.5px;
}

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

.btn-black {
    color: #fff;
    background-color: #000000;
    border-color: #000000;
    box-shadow: none;
}

.btn-black:hover {
    color: #1f2d3d;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}



/** BOX CLIENTES **/
.card.cliente-xgps > .dropdown-menu-header .dropdown-menu-header-inner {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

.cliente-xgps .dropdown-menu-header .dropdown-menu-header-inner {
    /* margin: -1px -1px 0; */
    padding: 1.5rem .5rem;
    position: relative;
}

.cliente-xgps .dropdown-menu-header {
    color: #fff;
    /* margin-top: -.65rem; */
    /* margin-bottom: .65rem; */
    position: relative;
    z-index: 6;
}

.cliente-xgps .dropdown-menu-header .menu-header-content {
    text-align: center;
    position: relative;
    z-index: 10;
}

.cliente-xgps .dropdown-menu-header .menu-header-content.btn-pane-right {
    padding-left: .5rem;
    padding-right: .5rem;
    display: flex;
    align-content: center;
    align-items: center;
    text-align: left;
}

.cliente-xgps .dropdown-menu-header .menu-header-content.btn-pane-right .menu-header-btn-pane {
    margin: 0 0 0 auto;
}

.cliente-xgps .menu-header-btn-pane form {
    display: inline-block;
}

.cliente-xgps .dropdown-menu-header .menu-header-content .menu-header-btn-pane {
    margin-top: 10px;
    margin-bottom: 3px;
}

.cliente-xgps .avatar-icon-wrapper {
    display: inline-block;
    margin-right: .1rem;
    position: relative;
}

.cliente-xgps .avatar-icon img {
    width: 100%;
    height: 100%;
}

.cliente-xgps .menu-header-title {
    font-weight: 500;
    /* font-size: 1.25rem; */
    margin: 0;
    /* font-size: 15px; */
}

.cliente-xgps .menu-header-subtitle {
    margin: 5px 0 0;
    opacity: .8;
   /* font-size: 12px; */
}

.cliente-xgps .avatar-icon-xl .avatar-icon {
    width: 64px;
    height: 64px;
}

.cliente-xgps .avatar-icon {
    border: #fff solid 3px;
    overflow: hidden;
}

.cliente-xgps .avatar-icon {
    display: block;
    width: 44px;
    height: 44px;
    transition: all .2s;
    opacity: 1;
    border-radius: 50px;
}

.cliente-xgps img {
    vertical-align: middle;
    border-style: none;
}

.cliente-xgps .list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
}

.cliente-xgps .list-group-item:hover {
    z-index: initial;
}
/*
.list-group-flush .list-group-item {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}
*/
.cliente-xgps .list-group-item:hover,
.cliente-xgps .list-group-item:focus {
    z-index: 1;
    text-decoration: none;
}

.cliente-xgps .list-group-item:first-child {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}
/*
.cliente-xgps .list-group-item {
    position: relative;
    display: block;
    padding: .75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.125);
}
*/

.cliente-xgps .list-group-item {
    padding: .45rem 1.25rem .45rem 1.25rem;
}

.cliente-xgps .widget-content {
    padding: 1rem;
    flex-direction: row;
    align-items: center;
}

.cliente-xgps .widget-content .widget-content-wrapper {
    display: flex;
    flex: 1;
    position: relative;
    align-items: center;
}

.cliente-xgps .widget-content .widget-content-left .widget-heading {
    /* opacity: .8; */
    font-weight: bold;
}

.cliente-xgps .widget-content .widget-content-left .widget-subheading {
    opacity: .5;
}

.cliente-xgps .widget-content .widget-content-right {
    margin-left: auto;
}

.cliente-xgps .icon-wrapper {
    width: 54px;
    height: 54px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.cliente-xgps .icon-wrapper {
    display: flex;
    align-content: center;
    align-items: center;
}

.cliente-xgps .icon-wrapper .progress-circle-wrapper {
    width: 100%;
    margin-right: 0;
    margin-top: 4px;
}

.cliente-xgps .btn-icon.btn-sm:not(.btn-block) .btn-icon-wrapper, .cliente-xgps .btn-group-sm > .btn-icon.btn:not(.btn-block) .btn-icon-wrapper {
    font-size: 16px;
}

.cliente-xgps .btn-icon-only .btn-icon-wrapper {
    margin-left: 0;
    margin-right: 0;
}

.cliente-xgps .btn-icon-only i {
    float: left;
    font-size: 21px !important;
    width: 21px !important;
}

.cliente-xgps .menu-header-btn-pane form button i {
    float: left;
    font-size: 21px;
    width: 21px;
    margin-right: 7px;
}

.cliente-xgps .menu-header-btn-pane form button {
    text-transform: uppercase;
    font-family: Segoe UI;
    font-weight: 700;
}

.cliente-xgps .btn-icon .btn-icon-wrapper {
    margin-right: .5rem;
    margin-left: 0;
    margin-top: 0;
    font-size: 17px;
    vertical-align: middle;
    transition: color .1s;
    display: inline-block;
}

.cliente-xgps .circle-progress {
    position: relative;
}

.cliente-xgps .circle-progress canvas {
    display: block;
}

.cliente-xgps .circle-progress small {
    position: absolute;
    height: 100%;
    width: 100%;
    font-weight: bold;
    left: 0;
    top: 0;
    vertical-align: middle;
    text-align: center;
    display: flex;
    align-items: center;
    align-content: center;
}

.cliente-xgps .circle-progress small span {
    margin: 0 auto;
}

.cliente-xgps small,
.cliente-xgps .small {
    font-size: 80%;
    font-weight: 400;
}

.btn-xgps-1 {
    text-transform: uppercase;
    font-family: Segoe UI;
    font-weight: 700;
}


.cliente-xgps .list-group-item.active {
    z-index: 2;
    color: #fff !important;
    border-radius: 0;
}

.cliente-xgps .list-group-item.active i,
.cliente-xgps .list-group-item.active a,
.cliente-xgps .list-group-item.active h5,
.cliente-xgps .list-group-item.active div {
    z-index: 2;
    color: #fff !important;
    border-radius: 0;
}

.card-shadow-primary {
    box-shadow: 0 0.46875rem 2.1875rem rgb(63 106 216 / 3%), 0 0.9375rem 1.40625rem rgb(63 106 216 / 3%), 0 0.25rem 0.53125rem rgb(63 106 216 / 5%), 0 0.125rem 0.1875rem rgb(63 106 216 / 3%);
}

.cliente-xgps .widget-content .widget-numbers {
    font-weight: bold;
    font-size: 1.8rem;
    display: block;
}

.input-group .clr-field {
    width: inherit;
}

.clr-field button {
    width: 38px;
    border: 1px solid #343a40;
    border-radius: 0.25rem;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-left: 0;
}

.clr-large .clr-swatches button {
    width: 35px !important;
    height: 35px !important;
}

.dx-item .fa.fa-circle {
    box-shadow: 0px 1px 6px rgb(0 0 0 / 16%), 0px 1px 6px rgb(0 0 0 / 23%) !important;
    border-radius: 50%;
    font-size: 25px;
}

#imgSub-header .user-image {
    width: 50px !important;
    height: 50px !important;
}

@media (max-width: 767.98px) {
    .cliente-xgps.profile-responsive-sm .dropdown-menu-header .menu-header-content.btn-pane-right, .cliente-xgps.profile-responsive .dropdown-menu-header .menu-header-content.btn-pane-right {
        display: block;
        text-align: center;
    }

    .cliente-xgps.profile-responsive-sm .dropdown-menu-header .menu-header-content.btn-pane-right .avatar-icon-wrapper,
    .cliente-xgps.profile-responsive .dropdown-menu-header .menu-header-content.btn-pane-right .avatar-icon-wrapper {
        margin-right: 0 !important;
    }

    .cliente-xgps.profile-responsive-sm .dropdown-menu-header .menu-header-content.btn-pane-right .menu-header-btn-pane,
    .cliente-xgps.profile-responsive .dropdown-menu-header .menu-header-content.btn-pane-right .menu-header-btn-pane {
        margin-top: 1rem;
    }

    .cliente-xgps.profile-responsive .card-footer .btn-block {
        font-size: 13px !important;
    }
}


@media (max-width: 991.98px) {

    .cliente-xgps .widget-content .widget-numbers {
        font-size: 1.6rem;
        line-height: 1;
    }

    .cliente-xgps.profile-responsive-sm .dropdown-menu-header .menu-header-content.btn-pane-right,
    .cliente-xgps.profile-responsive .dropdown-menu-header .menu-header-content.btn-pane-right {
        display: block;
        text-align: center;
    }

    .cliente-xgps.profile-responsive-sm .dropdown-menu-header .menu-header-content.btn-pane-right .avatar-icon-wrapper,
    .cliente-xgps.profile-responsive .dropdown-menu-header .menu-header-content.btn-pane-right .avatar-icon-wrapper {
        margin-right: 0 !important;
    }

    .cliente-xgps.profile-responsive-sm .dropdown-menu-header .menu-header-content.btn-pane-right .menu-header-btn-pane,
    .cliente-xgps.profile-responsive .dropdown-menu-header .menu-header-content.btn-pane-right .menu-header-btn-pane {
        margin-top: 1rem;
    }

    .cliente-xgps.profile-responsive .card-footer .btn-block {
        font-size: 13px !important;
    }

}


@media only screen and (min-width: 1024px) and (max-width: 1500px) {

    .cliente-xgps.profile-responsive .dropdown-menu-header .menu-header-content.btn-pane-right {
        display: block;
        text-align: center;
    }

    .cliente-xgps.profile-responsive .dropdown-menu-header .menu-header-content.btn-pane-right .avatar-icon-wrapper {
        margin-right: 0 !important;
    }

    .cliente-xgps.profile-responsive .dropdown-menu-header .menu-header-content.btn-pane-right .menu-header-btn-pane {
        margin-top: 1rem;
    }

    .cliente-xgps.profile-responsive .card-footer .btn-block {
        font-size: 12px !important;
    }

}


@media only screen and (min-width: 991px) and (max-width: 1024px) {

    .cliente-xgps.profile-responsive .dropdown-menu-header .menu-header-content.btn-pane-right {
        display: block;
        text-align: center;
    }

    .cliente-xgps.profile-responsive .dropdown-menu-header .menu-header-content.btn-pane-right .avatar-icon-wrapper {
        margin-right: 0 !important;
    }

    .cliente-xgps.profile-responsive .dropdown-menu-header .menu-header-content.btn-pane-right .menu-header-btn-pane {
        margin-top: 1rem;
    }

    .cliente-xgps.profile-responsive .card-footer .btn-block {
        font-size: 13px !important;
    }

}






/** ADAPTABLES **/
@media (max-width: 575.98px) {
    .imgUpload-xgps .brd-xgps {
        width: calc(100vw - 60px) !important;
        height: calc(100vw - 60px) !important;
    }
    .imgcroppic {
        border: 1px solid black;
        margin: 0 auto;
        width: calc(100vw - 62px) !important;
        height: calc(100vw - 62px) !important;
        position: relative;
    }
    .crop::after {
        content: "\f382";
        font-family: "Font Awesome 5 Free";
        position: absolute;
        width: calc(100vw - 62px);
        height: calc(100vw - 62px);
        text-align: center;
        font-weight: 900;
        font-size: 8em;
        color: #000000;
        align-items: center;
        display: flex;
        justify-content: center;
        background: #cccccc;
        opacity: .7;
        z-index: 0;
    }
    .fixbtn {
        width: calc(100vw - 60px) !important;
        margin: 20px auto 40px auto !important;
        margin-right: 0px !important;
        display: initial;
    }
    .cropHeaderWrapper {
        text-align: center;
        padding-top: 7px;
    }
/*
    .cropControls {
        right: 36px !important;
        top: 7px !important;
        z-index: 101 !important;
    }
*/
    .cropControls {
        right: auto !important;
        top: auto !important;
        z-index: 101 !important;
    }
    .cropHeadW2 {
        padding: 20px 0px 0px 0px !important;
    }
    .imgcroppic img {
        width: calc(100vw - 62px);
        height: calc(100vw - 62px);
    }
    .croppedImg {
        width: calc(100vw - 62px) !important;
        height: calc(100vw - 62px) !important;
        z-index: 100;
        position: absolute;
        margin: 0 auto;
        text-align: center;
        display: block;
    }
    .card-tools.card-bar {
        float: right !important;
        margin: 0px !important;
        padding: 0px !important;
    }
    .card-tools.card-bar button {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        margin: 0px !important;
    }
    .card-header .card-tools.card-bar button i {
        margin-right: 0px !important;
        font-size: 14px !important;
    }
}


@media (max-width: 767.98px) {
    .imgUpload-xgps .brd-xgps {
        width: calc(100vw - 60px) !important;
        height: calc(100vw - 60px) !important;
    }
    .imgcroppic {
        border: 1px solid black;
        margin: 0 auto;
        width: calc(100vw - 60px) !important;
        height: calc(100vw - 60px) !important;
        position: relative;
    }
    .crop::after {
        content: "\f382";
        font-family: "Font Awesome 5 Free";
        position: absolute;
        width: calc(100vw - 62px);
        height: calc(100vw - 62px);
        text-align: center;
        font-weight: 900;
        font-size: 8em;
        color: #000000;
        align-items: center;
        display: flex;
        justify-content: center;
        background: #cccccc;
        opacity: .7;
        z-index: 0;
    }
    .fixbtn {
        width: calc(100vw - 60px) !important;
        margin: 20px auto 40px auto !important;
        margin-right: 0px !important;
        display: initial;
    }
    .cropHeaderWrapper {
        text-align: center;
        padding-top: 7px;
    }
/*
    .cropControls {
        right: 36px !important;
        top: 7px !important;
        z-index: 101 !important;
    }
*/
    .cropControls {
        right: auto !important;
        top: auto !important;
        z-index: 101 !important;
    }
    .cropHeadW2 {
        padding: 20px 0px 0px 0px !important;
    }
    .imgcroppic img {
        width: calc(100vw - 62px);
        height: calc(100vw - 62px);
    }
    .croppedImg {
        width: calc(100vw - 62px) !important;
        height: calc(100vw - 62px) !important;
        z-index: 100;
        position: absolute;
        margin: 0 auto;
        text-align: center;
        display: block;
    }
    .card-tools.card-bar {
        float: right !important;
        margin: 0px !important;
        padding: 0px !important;
    }
    .card-tools.card-bar button {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        margin: 0px !important;
    }
    .card-header .card-tools.card-bar button i {
        margin-right: 0px !important;
        font-size: 14px !important;
    }
}


@media (max-width: 991.98px) {
    .imgUpload-xgps .brd-xgps {
        width: calc(100vw - 76px) !important;
        height: calc(100vw - 76px) !important;
    }
    .imgcroppic {
        border: 1px solid black;
        margin: 0 auto;
        width: calc(100vw - 82px) !important;
        height: calc(100vw - 82px) !important;
        position: relative;
    }
    .crop::after {
        content: "\f382";
        font-family: "Font Awesome 5 Free";
        position: absolute;
        width: calc(100vw - 82px);
        height: calc(100vw - 82px);
        text-align: center;
        font-weight: 900;
        font-size: 8em;
        color: #000000;
        align-items: center;
        display: flex;
        justify-content: center;
        background: #cccccc;
        opacity: .7;
        z-index: 0;
    }
    .fixbtn {
        width: calc(100vw - 80px) !important;
        margin: 20px auto 40px auto !important;
        margin-right: 0px !important;
        display: initial;
    }
    .cropHeaderWrapper {
        text-align: center;
        padding-top: 7px;
    }
/*
    .cropControls {
        right: 36px !important;
        top: 7px !important;
        z-index: 101 !important;
    }
*/
    .cropControls {
        right: auto !important;
        top: auto !important;
        z-index: 101 !important;
    }
    .cropHeadW2 {
        padding: 20px 0px 0px 0px !important;
    }
    .imgcroppic img {
        width: calc(100vw - 82px);
        height: calc(100vw - 82px);
    }
    .croppedImg {
        width: calc(100vw - 82px) !important;
        height: calc(100vw - 82px) !important;
        z-index: 100;
        position: absolute;
        margin: 0 auto;
        text-align: center;
        display: block;
    }
    .card-tools.card-bar {
        float: right !important;
        margin: 0px !important;
        padding: 0px !important;
    }
    .card-tools.card-bar button {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        margin: 0px !important;
    }
    .card-header .card-tools.card-bar button i {
        margin-right: 0px !important;
        font-size: 14px !important;
    }
}