/*##### ИМПОРТ ###############################################################*/

@import 'import/source-sans-pro.css'       screen;
@import 'import/font-awesome.css'          screen;
@import 'import/flag-icon.css'             screen;
@import 'import/bootstrap-icheck.css'      screen;
@import 'import/bootstrap-colorpicker.css' screen;
@import 'import/bootstrap-switch.css'      screen;
@import 'import/tempusdominus.css'         screen;
@import 'import/daterangepicker.css'       screen;
@import 'import/pace.css'                  screen;
@import 'import/select2.css'               screen;
@import 'import/select2-bs4.css'           screen;
@import 'import/adminlte.css'              screen;

/*##### ПУСТЫШКИ #############################################################*/

.select2 {}

/*##### ОБЩЕЕ ################################################################*/

.dropdown-menu-lg { max-width: 300px; min-width: 200px; padding: 0; }
.text-gray-light { color: #cccccc; }
.text-gray-dark { color: #62626f !important; }
.text-linethrough { text-decoration: line-through; }
.bg-gray-light { background-color: #f4f6f9; }
.badge-gray-light { color: #ffffff; background-color: #cccccc; }
.img-loader { position: absolute; width: 16px; top: 42px; right: 30px; }
.control-sidebar { width: 250px; }
.card.card-outline-tabs .card-header a { border-top: none !important; }
.text-carsharing-free        { color: #4d9020; }
.text-carsharing-reservation { color: #ff6600; }
.text-carsharing-inspection  { color: #3771c8; }
.text-carsharing-parking     { color: #8d5fd3; }
.text-carsharing-driving     { color: #00aad4; }
.bg-carsharing-free          { background-color: #4d9020; }
.bg-carsharing-reservation   { background-color: #ff6600; }
.bg-carsharing-inspection    { background-color: #3771c8; }
.bg-carsharing-parking       { background-color: #8d5fd3; }
.bg-carsharing-driving       { background-color: #00aad4; }
.btn-carsharing-free         { color: #1f2d3d; background-color: #4d9020; border-color: #4d9020; box-shadow: none; }
.btn-carsharing-reservation  { color: #1f2d3d; background-color: #ff6600; border-color: #ff6600; box-shadow: none; }
.btn-carsharing-inspection   { color: #1f2d3d; background-color: #3771c8; border-color: #3771c8; box-shadow: none; }
.btn-carsharing-parking      { color: #1f2d3d; background-color: #8d5fd3; border-color: #8d5fd3; box-shadow: none; }
.btn-carsharing-driving      { color: #1f2d3d; background-color: #00aad4; border-color: #00aad4; box-shadow: none; }
.nav-item.menu-open>.nav-link { background-color: rgba(255, 255, 255, .1); color: #fff; }

/*##### ТАБЛИЦЫ ##############################################################*/

th {
    position: -webkit-sticky;
    position: sticky;
    top: -3px;
    z-index: 2;
    background-color: #ffffff;
}
.td-input { padding: 2px !important; }

/*##### ИНДИКАТОР УРОВНЯ СИГНАЛА #############################################*/

.icon__signal-strength { display: inline-flex; align-items: flex-end; justify-content: flex-end; width: auto; height: 16px; padding: 0px; }
.icon__signal-strength span { display: inline-block; width: 3px; margin-left: 2px; transform-origin: 100% 100%; background-color: #28a745; border-radius: 0px; }
.icon__signal-strength .bar-1 { height: 20%; }
.icon__signal-strength .bar-2 { height: 40%; }
.icon__signal-strength .bar-3 { height: 60%; }
.icon__signal-strength .bar-4 { height: 80%; }
.icon__signal-strength .bar-5 { height: 100%; }
.signal-0 .bar-1, .signal-0 .bar-2, .signal-0 .bar-3, .signal-0 .bar-4, .signal-0 .bar-5 { opacity: 0.2; }
.signal-1 .bar-2, .signal-1 .bar-3, .signal-1 .bar-4, .signal-1 .bar-5 { opacity: 0.2; }
.signal-2 .bar-3, .signal-2 .bar-4, .signal-2 .bar-5 { opacity: 0.2; }
.signal-3 .bar-4, .signal-3 .bar-5 { opacity: 0.2; }
.signal-4 .bar-5 { opacity: 0.2; }
.signal-0 span, .signal-1 span { background-color: #dc3545; }
.signal-2 span, .signal-3 span { background-color: #ffc107; }
.signal-4 span, .signal-5 span { background-color: #28a745; }

/*##### КАРТЫ ################################################################*/

.button-geofence { position: absolute; top: 11px; right: 11px; z-index: 1000; width: 32px; height: 32px; background-color: #ffffff; color: #000000; border: 1px #6c757d solid; }
.button-geofence i { font-size: 0.9rem; margin-top: 8px; margin-left: 8px; }

.button-gasstation { position: absolute; top: 42px; right: 11px; z-index: 1000; width: 32px; height: 32px; background-color: #ffffff; color: #000000; border: 1px #6c757d solid; }
.button-gasstation i { font-size: 1rem; margin-top: 7px; margin-left: 9px; }

.button-filter { position: absolute; top: 85px; right: 11px; z-index: 1000; width: 32px; height: 32px; background-color: #ffffff; color: #000000; border: 1px #6c757d solid; }
.button-filter i { font-size: 1rem; margin-top: 7px; margin-left: 8px; }

.data-track { position: absolute; bottom: 11px; left: 11px; z-index: 1000; width: 250px; height: 195px; background-color: #ffffff; color: #000000; border: 1px #6c757d solid; padding:7px; cursor: default; opacity: 0.7; }
.data-track .button-close { position: absolute; top: 5px; right: 5px; z-index: 1000; cursor: pointer; }

/*############################################################################*/
.filter-search { max-width: 100%; }

@media (min-width: 768px) {
    .filter-search {
        max-width: 320px;
    }
}

@media (max-width: 575.98px) {
    .card-header .card-title {
        font-size: 1rem;
        margin: 0;
        line-height: 1.25;
    }
}

@media (max-width: 991.98px) {
    .main-header .nav-link .right {
        float: none !important;
        margin-left: .35rem;
    }
    .main-footer {
        display: none !important;
    }
}

.tabs-scroll {
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.tabs-scroll .nav-item {
    display: inline-block;
    float: none;
}
.tabs-scroll .nav-link {
    display: inline-block;
}

@media (max-width: 575.98px) {
    .info-box {
        min-height: 64px;
    }
    .info-box .info-box-icon {
        width: 56px;
    }
    .info-box .info-box-number {
        font-size: 1rem;
    }
}

.vehicle-view .nav.flex-column .nav-link {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: .5rem .75rem;
}
@media (max-width: 575.98px) {
    .vehicle-view .nav.flex-column .nav-link {
        flex-direction: column;
    }
    .vehicle-view .nav.flex-column .nav-link .float-right {
        float: none !important;
        display: block;
        margin-top: .25rem;
        text-align: left;
    }
}

.vehicle-view .car-img {
    object-fit: contain;
    width: 100%;
    max-height: 260px;
}

.btn-carsharing-reservation,
.btn-carsharing-inspection,
.btn-carsharing-driving,
.btn-carsharing-parking,
.btn-carsharing-closing {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 64px;
    max-height: 64px;
    padding: 0.55rem 0.6rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.btn-carsharing-reservation i,
.btn-carsharing-inspection i,
.btn-carsharing-driving i,
.btn-carsharing-parking i {
    margin-right: .45rem !important;
    flex: 0 0 auto;
}

@media (max-width: 380px) {
    .btn-carsharing-reservation,
    .btn-carsharing-inspection,
    .btn-carsharing-driving,
    .btn-carsharing-parking {
        font-size: 0.95rem;
        min-height: 58px;
        max-height: 58px;
    }
}

.carsharing-actions > [class*="col-"] {
    margin-bottom: .35rem !important;
    padding-left: .35rem;
    padding-right: .35rem;
}
.carsharing-actions {
    margin-left: -.35rem;
    margin-right: -.35rem;
}

#gprs .row.mb-0 a.btn.btn-block,
#sms .row.mb-0 a.btn.btn-block {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 64px;
    max-height: 64px;
    padding: 0.55rem 0.6rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

#gprs .row.mb-0 a.btn.btn-block i,
#sms .row.mb-0 a.btn.btn-block i {
    margin-right: .45rem !important;
    flex: 0 0 auto;
}

#gprs .row.mb-0 > [class*="col-"],
#sms .row.mb-0 > [class*="col-"] {
    margin-bottom: .35rem !important;
    padding-left: .35rem;
    padding-right: .35rem;
}
#gprs .row.mb-0,
#sms .row.mb-0 {
    margin-left: -.35rem;
    margin-right: -.35rem;
}

#gprs .row.mb-0 a.btn.btn-block,
#sms .row.mb-0 a.btn.btn-block {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 64px;
    max-height: 64px;
    padding: 0.55rem 0.6rem;
    line-height: 1.1;
    text-align: center;
}

#gprs .row.mb-0 a.btn.btn-block i,
#sms .row.mb-0 a.btn.btn-block i {
    margin-right: .45rem !important;
    flex: 0 0 auto;
}

#gprs .row.mb-0 a.btn.btn-block .btn-label,
#sms .row.mb-0 a.btn.btn-block .btn-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


@media (max-width: 380px) {
    #gprs .row.mb-0 a.btn.btn-block,
    #sms .row.mb-0 a.btn.btn-block {
        font-size: 0.95rem;
        min-height: 58px;
        max-height: 58px;
    }
}

.carsharing-actions a.btn .btn-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.btn-carsharing-reservation,
.btn-carsharing-inspection,
.btn-carsharing-driving,
.btn-carsharing-parking,
.carsharing-actions .btn.btn-secondary {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    justify-content: center;
}

.carsharing-actions a.btn .btn-label {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
}

.carsharing-actions a.btn i {
    flex: 0 0 auto;
    margin-right: .45rem !important;
}

.carsharing-actions a.btn{
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.carsharing-actions a.btn i{
    flex: 0 0 auto;
    margin-right: .45rem !important;
}

.carsharing-actions a.btn .btn-label{
    display: block !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    text-align: center;
}

@media (max-width: 575.98px) {
    .info-box {
        min-height: 64px;
    }
    .info-box .info-box-icon {
        width: 56px;
        font-size: 1.25rem;
    }
    .info-box .info-box-text {
        font-size: .9rem;
        line-height: 1.25;
        white-space: normal;
    }
    .info-box .info-box-number {
        font-size: 1rem;
        line-height: 1.2;
        white-space: normal;
    }
}

.info-box .info-box-number,
.info-box .info-box-text,
.info-box .info-box-number a {
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .info-box {
        min-height: 64px;
    }
    .info-box .info-box-icon {
        width: 56px;
    }
    .info-box .info-box-text {
        white-space: normal;
    }
    .info-box .info-box-number {
        white-space: normal;
    }
}

.table .text-truncate {
    max-width: 350px;
}

.leaflet-tooltip.speed-tooltip {
    background: #343a40;
    color: #fff;
    border: 0;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.leaflet-fade-anim .leaflet-tooltip {
    transition: none !important;
}

.gm-speed-tt {
    font-size: 12px;
    white-space: nowrap;
}
.gm-speed-tt i {
    margin-right: 6px;
}

.gal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px,1fr));
    grid-gap: 6px;
}
@media (max-width: 575.98px) {
    .gal-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px,1fr));
        grid-gap: 10px;
    }
}
.card.gal-card {
    margin-bottom: 0;
}
.gal-card {
    height: 100%;
}
.gallery-thumb {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}
@media (min-width: 1200px) {
    .gallery-thumb {
        height:110px;
    }
}
@media (max-width: 575.98px) {
    .gallery-thumb {
        height:140px;
    }
}