:root{
    --oficina-primary: #f1cb32;
    --oficina-danger: #ff7782;
    --oficina-success: #41f1b6;
    --oficina-warning: #ffbb55;
    --oficina-white: #f3f3f3;
    --oficina-info-dark: #7d8da1;
    --oficina-info-light: #dce1eb;
    --oficina-dark: #1a1f24;
    --oficina-light: rgba(0, 0, 0, 0.4);
    --oficina-primary-variant: #fcff3d;
    --oficina-dark-variant: #2e3338;
    --oficina-background: #0e1013;
    /* border radius */
    --card-border-radius: 2rem;
    --border-radius-1: 0.4rem;
    --border-radius-2: 0.8rem;
    --border-radius-3: 1.2rem;
    /* padding */
    --card-padding: 1.8rem;
    --padding-1: 1.2rem;
    /* shadow */
    --box-shadow: 0 2rem 3rem var(--oficina-light);
    /* transition */
    --transition: all 300ms ease;
    --ThemeColor: var(--oficina-primary);
}
/* LIGHT THEME VARIABLES */
.light-theme-variables {
    --oficina-background: #f6f6f9;
    --oficina-white: #0e1013;
    --oficina-info-light: #677585;
    --oficina-dark: #edeffd;
    --oficina-dark-variant: #dedceb;
    --oficina-light: rgba(132,139,200,0.18);
    /* --oficina-dark-variant: #dce1eb; */
    --box-shadow: 0 2rem 3rem var(--oficina-light);
}

body { user-select: none; font-family: 'Montserrat', sans-serif;
    font-size: 0.88rem; background-color: var(--oficina-background); color: var(--oficina-white);}

/* in light theme */
/* .material-icons.light-theme-variables { color: rgba(0, 0, 0, 0.54); }
.material-icons.light-theme-variables.md-inactive { color: rgba(0, 0, 0, 0.26); } */

.material-icons-outlined, i { vertical-align: bottom;}
.material-icons-outlined.md-theme { color: var(--oficina-primary);}
.--yellow {color: var(--oficina-primary);background-color: var(--oficina-primary);}

a, button, .btn { font-family: 'Montserrat', sans-serif; color: var(--oficina-white); text-shadow: none;
    cursor: pointer;}
button:disabled { border-color: var(--oficina-dark-variant);box-shadow: none; opacity: 0.8;cursor: not-allowed;}
button:disabled:hover { background-color: inherit;}
h1 { font-size: 1.8rem; font-weight: 800;}
h2 { font-size: 1.4rem;}
h3 { font-size: 1.1rem;}
h4 { font-size: 0.8rem;}
h5 { font-size: 0.77rem;}
p { color: var(--oficina-info-light); }
b { color: var(--oficina-info-light);}

.form-group { display: inline-table; width: -webkit-fill-available;}
.input-group { display: flex;}
.input-group > .input-group-prepend { height: auto;}
.input-group > .input-group-prepend .input-group-text { border: 1px solid var(--oficina-info-dark);
    background-color: var(--oficina-dark); color: var(--oficina-info-light);}
.input-group input[type="email"], .input-group input[type="text"], .input-group input[type="password"] { 
    height: auto; margin-top: 0;}
/* .form-group > label { display: inline-flex;} */
input[type="text"],input[type='number'], input[type="email"], input[type="password"],
textarea.form-control, input[type="date"], input[type='time'], select.form-control { display: block;
    width: 100%; background-color: var(--oficina-dark); border-radius: var(--border-radius-1); margin-top: .2rem;
    padding: 0.5rem 1.6rem; color: var(--oficina-white);outline: none; resize: none; 
    border: 1px solid var(--oficina-info-dark); font-size: 14px;}
/* input[type='date'] { padding: 0.4rem 1.6rem;} */
.form-control:focus, input:focus,input:active, textarea:focus, select:focus { background-color: var(--oficina-dark);
    border: 1px solid var(--oficina-white); border-color: var(--oficina-primary); color: var(--oficina-white);
    box-shadow: none;}
.form-control[readonly]{ background-color: var(--oficina-dark); border-color: var(--oficina-light);
    color: var(--oficina-info-dark);}
input[type='time']:invalid { border-color: var(--selkRed);}

/*scroll*/
.scroll::-webkit-scrollbar { width: 6px;height: 6px;}
.scroll::-webkit-scrollbar-track { background: rgba(155,155,155,0.0);width: 2px;height: 2px;}
.scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: var(--border-radius-3);}
.scroll:hover::-webkit-scrollbar-track { background: rgba(155,155,155,0.05);}
.scroll:hover::-webkit-scrollbar-thumb { background: var(--oficina-dark-variant);
    border-radius: var(--border-radius-3);}

.trigger-info-out { border-radius: var(--border-radius-1);}

.small { font-size: 0.75rem;}
.card { background-color: var(--oficina-dark-variant);}

.card-services { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;}
.card-services .card { display: flex; position: relative; width: -webkit-fill-available;}
.card-services .card .service_delete_button { position: absolute; display: flex; justify-content: center;
    align-items: center; width: 30px;height: 30px; right: 0px; top: -15px; background-color: var(--oficina-dark);
    padding: 2px; border-radius: 50%; cursor: pointer;z-index: 2;}
.card-services .card .card-body { padding: 8px 10px;}
.card-services .card .form-check {padding-left: 0;}
.card-services .card .form-check-input:checked ~ .form-check { color: var(--oficina-primary);}
.light-theme-variables .card-services .card .form-check-input:checked ~ .form-check { color: var(--oficina-warning);font-weight: bold;}
.card-services .card .card-footer { font-size: 0.77em; padding: 5px 10px;}

.guest_login_box { max-width: 500px;}

.nav-pills { justify-content: center;
    background-color: var(--oficina-background); border-top-left-radius: var(--border-radius-3);
    border-bottom-right-radius: var(--border-radius-3);}
.nav-pills .nav-link { color: var(--oficina-info-dark);}
.nav-pills .nav-link.active { color: var(--oficina-primary); background-color: transparent;}

/* background in GARAGE | SELLER | ADM */
.content-gray { min-height: calc(100vh - 85px); padding-top: 56px; padding-bottom: 40px; 
    margin-bottom: 0px; background-color: var(--oficina-dark);}

.menu-top { position: fixed; display: flex; width: -webkit-fill-available;margin: 0;
    background-color: var(--oficina-dark); z-index: 4;}
.theme-toggler { position: relative; display: flex;justify-content: space-between; margin-inline-start: auto; margin-right: 15px;
    align-self: center; align-items: center;height: 1.6rem;width: 4.4rem; cursor: pointer; 
    border-radius: var(--border-radius-1);background-color: var(--oficina-light);}
.theme-toggler span { font-size: 1.2rem; width: 50%; height: 100%; display: flex; align-items: center;
    justify-content: center;}
.theme-toggler span.active { background-color: var(--oficina-primary); color: var(--oficina-dark);
    border-radius: var(--border-radius-1);}    

.menu-bottom { position: sticky; display: flex; top: auto;bottom: 0;left: 0; right: 0; max-width: 500px;
    margin-top: 0; background-color: var(--oficina-background);
    border-top-left-radius: var(--border-radius-3); border-top-right-radius: var(--border-radius-3);
    box-shadow: var(--box-shadow);overflow: hidden; z-index: 4;}
.menu-bottom ul { display: flex; width: 100%;justify-content: space-between; list-style: none; padding: 20px 10px;
    margin: 0;}
.menu-bottom ul li { display: flex; position: relative; padding: 3px 9px; z-index: 1;}
.menu-bottom ul li a { position: relative; display: grid;justify-content: center; align-items: center; 
    text-align: center; color: var(--oficina-info-dark); text-decoration: none;}
.menu-bottom ul li a .menu-badge { position: absolute; top: 0px; right: 20px;
    width: 8px; height: 8px; border-radius: 50%; font-size: 9px; color: #111; 
    background-color: var(--oficina-primary-variant); pointer-events: none;}
.menu-bottom ul li a .menu-icon { font-size: 24px;}
.menu-bottom ul li a .menu-title { margin: 0;pointer-events: none; font-size: 10px;}
.menu-bottom ul li.active a .menu-icon { color: var(--oficina-primary);}
.menu-bottom ul li.active a .menu-title { color: var(--oficina-white);}

/*campo de busca com dropdown*/
.search_input { display: flex; position: sticky;top: 70px; width: 100%;padding: 0; 
    border-radius: var(--border-radius-1); margin: 0; background-color: var(--oficina-dark-variant);
    z-index: 3;}
.search_input .search_all {display: flex; margin: 0; margin-right: 5px; font-size: 24px; align-items: center;cursor: pointer;
    justify-content: center; border-bottom-left-radius: 4px; border-bottom: 2px solid var(--oficina-background);}
.search_input i, .search_input .search_icon { font-size: 20px; margin: auto;justify-content: center; 
	margin-right: -30px; }
.search_input input[type="text"],
.search_input input[type="search"]{display: inline-block;width: 100%; margin-top: 0;
	padding: 6px; text-indent: 30px;font-size: 18px; color: var(--oficina-info-light); border: 0; 
	border-bottom: 2px solid var(--oficina-background); border-radius: 0; appearance:none;outline: none; 
	background-color: transparent;}
.search_input input[type="text"]:disabled,
.search_input input[type="search"]:disabled,
.search_input input[type="text"]:read-only,
.search_input input[type="text"]:read-only { background-color: var(--oficina-dark);color: var(--oficina-dark-variant); }
.search_input .search_input_result { position: absolute; display: none;	
	left: 0; top: 100%; width: 100%;list-style: none;margin: 0;padding: 6px;max-height: 108px; 
	overflow-y: auto; background-color: var(--oficina-background); box-shadow: 0px 15px 30px rgba(0,0,0,0.2);
    border-bottom-left-radius: var(--border-radius-1);border-bottom-right-radius: var(--border-radius-1); z-index: 4;}
.search_input .search_input_result.is-active { display: block; }
.search_input .search_input_result li { background-color: var(--oficina-background);
	padding: 4px 8px; cursor: pointer;}
.search_input .search_input_result li:hover { 
	background-color: var(--oficina-dark);}
.search_input .search_input_result li a { display: block; }
.search_selected_result .search_selected_result_item { display: inline-block; padding: 2px 6px;
    margin: 5px; background-color: var(--oficina-dark); color: var(--oficina-info-light); font-weight: 500; border-radius: 100px;}
.search_selected_result .search_selected_result_item .selected_item_name { 
	display: inline-flex; }
.search_selected_result .search_selected_result_item .selected_item_id {border-radius: 100px;
    background-color: var(--oficina-dark); padding: 0px 3px; margin: auto; margin-left: 4px; font-size: 12px;}

#image-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
#image-container img { max-width: 200px; margin: 10px;}

#connection-status-display { display: flex;}

.btn_support_agent { display: flex;position: fixed;left: 10px; bottom: 130px; width: 70px; height: 70px;
    outline: none; border: none; border-radius: 50%; padding: 10px;
    justify-content: center; align-items: center;
    background-color: var(--oficina-dark-variant); color: var(--oficina-info-light); z-index: 5;
    text-decoration: none;opacity: 1;overflow: hidden;transition: all 200ms ease-in;
    -webkit-transition: all 200ms ease-in;-moz-transition: all 200ms ease-in;transition-delay: 200ms;}
.btn_support_agent:hover { color: var(--oficina-primary);text-decoration: none;}

/** ================
    LANDING PAGE
================= */
.menu-landing ul { display: flex; margin: 0; padding: 5px 15px; list-style-type: none;
    justify-content: space-between;}
.menu-landing .menu-landing-item { cursor: pointer;text-decoration: none;}
.menu-landing .menu-landing-item a {text-decoration: none;}
.menu-landing .menu-landing-item a:hover {color: var(--oficina-primary);}

.banner-landing { display: block; position: relative; min-height: calc(100vh - 120px); margin-top: 0px;
    border-top-left-radius: var(--border-radius-3); border-top-right-radius: var(--border-radius-3);
    padding: 20px; background-color: var(--oficina-dark-variant); overflow: hidden;}
.banner-landing .banner-content { position: relative; z-index: 2;font-style: italic;}
.banner-landing .banner-content h1 { font-size: 1.6em; }
.banner-landing .banner-content p {font-size: 1.4em;font-weight: 500;}
.banner-landing .banner-content .btn-service-cta { display: inline-flex;font-size: 1.2em;}
.banner-landing .banner-gradient { position: absolute;left: 0; bottom: 0; width: 100%; height: 300px;
    background: linear-gradient(rgba(0,0,0,0), var(--oficina-background)); z-index: 1;}
.banner-landing .banner-image { display: flex;position: absolute; width: 100%; height: 100%; top: 0; left: 0;
    opacity: 0.2; background: url("../../oficinaPN/img/vehicles/default/car-2020-Honda-NSX-640x480.jpg");
    background-position: center; background-size: cover;}

.landing-services-title {position: relative; display: flex; top: -40px; width: auto;margin: 0 50px; padding: 20px;
    justify-content: center; align-items: center; border-radius: var(--border-radius-2);
    border-bottom-left-radius: 0; border-top-right-radius: 0; font-size: 1.1em;
    background-color: var(--oficina-dark); z-index: 1;}
.landing-services-title .material-icons-outlined {position: absolute; top: -10px; left: 50%;
    transform: translateX(-50%) rotateZ(90deg); color: var(--oficina-primary);}


.services-container { position: relative; display: flex; max-width: 1200px;margin: auto; justify-content: center;
 align-items: center; gap: 20px; flex-wrap: wrap; list-style-type: none;}
.services-container .service-box { position: relative; display: flex; width: 350px;height: 280px; 
    background-color: var(--oficina-primary);
    border-radius: var(--border-radius-3);color: var(--oficina-info-light); overflow: hidden; 
    justify-content: center;}
.services-container .service-box .service-icon { position: absolute; display: flex;
    top:0; left: 0; width: 100%;height: 100%; justify-content: center; align-items: center;
    background-color: var(--oficina-dark); color: var(--oficina-primary); transition: 0.5s;}
.services-container .service-box .service-icon .material-icons-outlined { font-size: 5em; transition: 0.5s;
    opacity: 0.2;}
.services-container .service-box .service-content { position: relative; padding: 20px; text-align: center;
    margin-top: 20px;z-index: 1;  transition: 0.5s;}
.services-container .service-box .service-content h2 { font-weight: 600; color: var(--oficina-white);}

.service-cta {position: sticky;bottom: 0; padding: 15px; margin: auto; border-top-left-radius: var(--border-radius-3); 
    border-bottom-right-radius: var(--border-radius-3); background-color: var(--oficina-primary);z-index: 1;}
.service-cta p,.service-cta p b {color: var(--oficina-background);}
.btn-service-cta { display: flex; padding: 8px 10px; text-align: center; font-size: 1.2em;
    align-items: center; justify-content: center; text-decoration: none !important;
    border-top-left-radius: var(--border-radius-3);border-bottom-right-radius: var(--border-radius-3);
    background-color: var(--oficina-background);color: var(--oficina-primary);}
.btn-service-cta:hover { color: #fff;}

.landing-footer {display: table;min-width: 300px; padding: 0 15px; margin: 0 auto;text-align: center;
    color: var(--oficina-info-dark);}
.landing-footer .landing-footer-logo { display: block; margin: 10px auto;margin-bottom: 10px; text-align: center;}
.landing-footer .landing-footer-logo img {filter: grayscale(1);}
.landing-footer ul {display: flex; justify-content: space-evenly; list-style-type: none;}
.landing-footer a { color: var(--oficina-info-light);}

.landing-legal h4 {font-weight: 600; font-size: 1.2em;}

.signature-agency { display: block; padding: 10px;
    text-align: center;font-size: 0.8em; color: var(--oficina-info-dark);}
.signature-agency a {color: var(--selkPurple);}
.signature-agency .material-icons-outlined {font-size: 1.5em;}

/* ==========
    GARAGE 
========== */

.vehicle-highlight-info { width: 100%;padding: 5px;}
.vehicle-highlight-info .vehicle-subtitle { display: flex; width: 100%;justify-content: space-around;}
.vehicle-highlight-info h4 { font-size: 30px;font-weight: bold;text-align: center;}
.vehicle-highlight-info .vehicle-highlight-info-datetime,
.vehicle-highlight-info .vehicle-highlight-info-plate { display: flex; color: var(--oficina-info-dark);}
.vehicle-highlight-info .vehicle-highlight-info-datetime .material-icons-outlined,
.vehicle-highlight-info .vehicle-highlight-info-plate .material-icons-outlined { font-size: 20px;}

.list-vehicles {position: relative; display: table; margin: auto; width: fit-content;
    border-radius: var(--border-radius-3); overflow: hidden;}
.list-vehicles > ul { position: relative;display: flex;width: calc(100vw - 2em); margin: auto; list-style: none;}
.list-vehicle { display: flex;position: relative; list-style: none; margin: auto; min-width: 320px; width: fit-content;
    justify-content: center; align-items: center; background-color: var(--oficina-background);
    border-radius: var(--border-radius-3);overflow: hidden;
    opacity: 0.4; transition: all 200ms ease-in;-webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;}
.list-vehicle.active, .list-vehicle.swiper-slide-active { transform: scale(1);margin: auto;z-index: 2;opacity: 1;}
.list-vehicle .vehicle-image {display: flex; min-width: 320px; width: 100%; max-width: 340px; min-height: 140px;
    justify-content: center; align-items: center;pointer-events: none; }
.list-vehicle .vehicle-image img {pointer-events: none; user-select: none;object-fit: cover;}
.list-vehicle .vehicle-image .material-icons-outlined { display: flex; font-size: 100px;justify-content: center;
    align-items: center;}
.list-vehicle .vehicle-actions { position: absolute; top: 0; left: 0;}
.list-vehicle .vehicle-edition,
.list-vehicle .vehicle-history,
.list-vehicle .vehicle-schedule { position: relative; padding: 5px 25px; margin: 0; font-size: 1.2rem;
    font-weight: 700; background-color: var(--oficina-primary); color: #111; opacity: 0;pointer-events: none;}
.list-vehicle .vehicle-edition,
.list-vehicle .vehicle-history { border-bottom-left-radius: var(--border-radius-3);
    border-bottom-right-radius: var(--border-radius-3);}
.list-vehicle .vehicle-actions a:first-child {border-bottom-left-radius: 0;}
.list-vehicle .vehicle-schedule { position: absolute; bottom: 0;left: 0; 
    border-top-right-radius: var(--border-radius-3);}
.list-vehicle.active .vehicle-edition,
.list-vehicle.active .vehicle-history,
.list-vehicle.active .vehicle-schedule { opacity: 1;pointer-events: initial;}
.list-vehicle .vehicle-schedule .vehicle-schedule-add { margin: 0;color: #111;}
/* snap slider vehicles {nao usado, mas é um bom efeito} */
.snap-slider-container {display: flex;overflow: auto;scroll-snap-type: x mandatory;}
.snap-slider-container .snap-slide {scroll-snap-align: start;}

.btn-add-vehicle { display: flex;position: fixed;right: 10px; bottom: 100px; width: 70px; height: 70px;
    min-width: 70px;
    outline: none; border: none; border-radius: 50%; justify-content: center; align-items: center;
    background-color: var(--oficina-dark-variant); color: var(--oficina-info-light); z-index: 3;
    text-decoration: none;opacity: 1;}

.btn-search-vehicle { display: flex;position: fixed;left: 10px; bottom: 100px; width: 70px; height: 70px;
    outline: none; border: none; border-radius: 50%; padding: 10px;
    justify-content: center; align-items: center;
    background-color: var(--oficina-dark-variant); color: var(--oficina-info-light); z-index: 5;
    text-decoration: none;opacity: 1;overflow: hidden;transition: all 200ms ease-in;
    -webkit-transition: all 200ms ease-in;-moz-transition: all 200ms ease-in;transition-delay: 200ms;}
.btn-search-vehicle.active, .btn-search-vehicle:focus, .btn-search-vehicle:active { 
    width: calc(100% - 20px); height: 150px; bottom: 130px;
    border-radius: var(--border-radius-3);}
.btn-search-vehicle .box_search_vehicle { position: relative; width: 70%; left: -150%; opacity: 0;
    transform: scale(0.7); transition: all 200ms ease-in;
    -webkit-transition: all 200ms ease-in;-moz-transition: all 200ms ease-in;transition-delay: 100ms;}
.btn-search-vehicle.active .box_search_vehicle,
.btn-search-vehicle:focus .box_search_vehicle,
.btn-search-vehicle:active .box_search_vehicle { position: relative; width: inherit; left: 0; opacity: 1;
    transform: scale(1);}
.btn-search-vehicle .box_search_vehicle .box_search_close { position: absolute; top: -30px; right: -10px;}
.btn-search-vehicle .veh-search-icon {position: absolute; justify-content: center;align-items: center;
    cursor: pointer;}
.btn-search-vehicle.active .veh-search-icon { display: none;right: -100%;}

.form_vehicle { padding-top: 10px; padding-left: 15px;padding-right: 15px; padding-bottom: 40px;}

.list-vehicles-office { width: 100%;height: 100%; min-height: auto;}
.list-vehicle-office { display: grid; grid-template-columns: minmax(100px, 190px) 1fr; 
    position: relative; list-style: none; margin: 10px auto;
    border-radius: var(--border-radius-3);background-color: var(--oficina-dark-variant); overflow: hidden;}
.list-vehicle-office .vehicle-image { position: relative;}
.list-vehicle-office .vehicle-image .vehicle-action { position: absolute; bottom: 0;left: 0; padding: 4px 20px; margin: 0;
    border-top-right-radius: var(--border-radius-3); font-weight: 700;
    background-color: var(--oficina-primary); color: #111;}
.list-vehicle-office .vehicle-image .vehicle-action .vehicle-check-list { margin: 0;color: #111;}
.list-vehicle-office .vehicle-detail { position: relative; padding: 8px;}
.list-vehicle-office .vehicle-detail > label { margin-bottom: 0;font-size: 0.70rem;}
.list-vehicle-office .vehicle-detail > label .material-icons-outlined { font-size: 1.2rem;}
.list-vehicle-office .vehicle-detail .vehicle-services { position: absolute;display: flex; bottom: 0;right: 0;}
.list-vehicle-office .vehicle-detail .vehicle-service { position: relative;display: inline-flex; right: 0; bottom: 0; 
    justify-content: center; align-items: center;
    padding: 4px 10px; border-top-left-radius: var(--border-radius-3);
    border: 1px solid var(--oficina-primary); color: var(--oficina-primary);}
.list-vehicle-office .vehicle-detail .vehicle-service:last-child { border-bottom-right-radius: var(--border-radius-3); }
.list-vehicle-office .vehicle-detail .vehicle-service label { margin-bottom: 0;display: none;pointer-events: none;}

.list-notification { display: block; border-radius: var(--border-radius-3); margin: 10px auto;
    background-color: var(--oficina-dark-variant);overflow: hidden;}
.list-notification .notification-info { position: relative;display: flex;width: 100%; padding: 4px 20px; 
    margin: 0; }
.list-notification .notification-info .notification-icon {display: flex;padding: 10px; color: var(--oficina-primary);}
.list-notification .notification-info .notification-icon .material-icons-outlined { font-size: 40px;}
.list-notification .notification-info .notification-details { padding: 10px;}
.list-notification .notification-info .notification-details .notification-description { margin-bottom: 0;}
.list-notification .notification-check-list { display: inline-block; padding: 4px 20px;
    border-top-right-radius: var(--border-radius-3); font-weight: 700;
    background-color: var(--oficina-primary); color: #111; margin: 0;}

.list-history { display: block; border-radius: var(--border-radius-3); margin: 10px auto;
    background-color: var(--oficina-dark-variant);overflow: hidden;}
.list-history .history-info { position: relative;display: flex;width: 100%; padding: 6px 7px; 
    margin: 0; }
.list-history .history-info .history-index { display: flex;padding: 4px 12px; height: min-content; align-items: center;
    border-radius: 50px; font-weight: bold; font-family: monospace;
    background-color: var(--oficina-primary); color: #ffffff;}
.list-history .history-info .history-options .history-icon {display: flex; align-items: center; padding: 5px; 
    color: var(--oficina-primary); font-size: 0.82em;}
.list-history .history-info .history-options .history-icon .material-icons-outlined { font-size: 2.5em;}
.list-history .history-info .history-details label { margin-bottom: 2px;}
.list-history .history-info .history-details .history-title { text-transform: uppercase;margin: auto;font-size: 0.87em;}
.list-history .history-info .history-details { width: -webkit-fill-available; padding: 5px;}
.list-history .history-info .history-details .history-description { margin-bottom: 0;}
.list-history .history-info .history-price { font-size: 0.8em;}
.list-history .history-info .history-price .flex-2 {flex-basis: calc(50% - 10px);margin: 5px;}
.list-history .history-info .history-price label { color: var(--selkTurquoise); font-weight: bold;}
.list-history .history-date { font-weight: bold; font-size: 0.7em;font-style: italic;padding: 4px; margin-left: auto;
    color: var(--oficina-info-light);}
.list-history .history-check-list { display: inline-block; padding: 2px 10px;
    border-top-right-radius: var(--border-radius-3); font-weight: 700;
    background-color: var(--oficina-light); color: var(--oficina-info-dark); margin: 0;}
.history-total-display { display: flex; position: fixed;width: 100%; max-width: 500px; 
    bottom: calc(100px - 28px);left: 0;right: 0; 
    margin: auto; padding: 15px 30px; font-weight: bold;justify-content: center;
    border-top-right-radius: var(--border-radius-3);border-top-left-radius: var(--border-radius-3); 
    background-color: var(--oficina-dark); color: var(--oficina-info-light);box-shadow: 0 0.5em 1em rgba(0,0,0,0.1);}
.history-total-display span { color: var(--selkGreen);}

.card_credits { margin-inline-start: auto; margin-right: 15px;}
.card_credits > span { padding: 4px 10px;margin: 5px; background-color: var(--oficina-background); font-weight: bold;
    text-wrap: nowrap; color: var(--oficina-primary);}
.card_credits .user_credits { color: var(--selkTurquoise);}
.card_credits > span i { margin: 0.25em 0.4em;}
.card_credits .user_points > label, .card_credits .user_credits > label { color: var(--oficina-dark-variant);}
.card_credits.card_home > span {display: flex; font-size: 0.7rem;margin: 2px auto;}
.card_credits.card_home > span > label { margin-bottom: 0;margin-left: 3px;}

.container_promotions { position: relative; max-width: 600px;margin: 0 auto;padding: 8px; list-style: none;margin-bottom: 40px;}
.promotion-box { position: relative; border: 1px solid var(--oficina-dark-variant);border-radius: var(--border-radius-1);
    overflow: hidden;}
.promotion-box .promotion-header { padding: 10px 4px;
    border-top-left-radius: var(--border-radius-1);border-top-right-radius: var(--border-radius-1);
    background-color: var(--oficina-background);}
.promotion-box .promotion-header h2 { font-weight: bold; margin: 0;}
.promotion-box .promotion-header label { margin: 0;}
.promotion-box .promotion-banner {display: flex;flex-wrap: wrap; position: relative; min-height: -webkit-fill-available;
    cursor: pointer; text-decoration: none;}
.promotion-box .promotion-banner img {display: flex;flex: 1; width: 100%;height: fit-content;pointer-events: none;
    user-select: none;}
.promotion-box .promotion-banner label {display: flex; position: relative;width: 100%; bottom: 0; left: 0; margin: 0;
    padding: 10px 5px;padding-left: 12px; background-color: var(--oficina-primary);color: #111; 
    justify-content: space-between; align-items: center; pointer-events: none;user-select: none;}
.promotion-box .promotion-description { padding: 5px; border-bottom-left-radius: var(--border-radius-1); 
    border-bottom-right-radius: var(--border-radius-1);
    background-color: var(--oficina-background);}
.promotion-box .promotion-description p {margin: 0;}

/* ===========
    SELLERS
============*/

.list-queues { width: 100%;height: 100%; min-height: auto;}
.list-queue { display: grid; grid-template-columns: minmax(50px, 100px) 1fr; 
    position: relative; list-style: none; margin: 10px auto;
    border-radius: var(--border-radius-3);background-color: var(--oficina-dark-variant); overflow: hidden;}
.list-queue .queue-actions { position: relative;display: flex; justify-content: center; align-items: center;}
.list-queue .queue-action { position: relative; padding: 4px 20px; margin: 0 auto;
    border-radius: var(--border-radius-3); font-weight: 700;
    background-color: var(--oficina-primary); color: #111; cursor: pointer;}
.list-queue .queue-action > span { color: #111;}
.list-queue .queue-details { position: relative; padding: 8px; min-height: 40px; padding-bottom: 40px;}
.list-queue .queue-details > label { margin-bottom: 0;font-size: 0.70rem;}
.list-queue .queue-details > label .material-icons-outlined { font-size: 1.2rem; color: var(--oficina-primary-variant);}
.list-queue .queue-details .queue-phone label { margin-bottom: 0;}
.list-queue .queue-details .queue-phone .queue-client-desktop { display: none;}
.list-queue .queue-details .queue-services { position: absolute;display: flex; bottom: 0;right: 0;}
.list-queue .queue-details .queue-service { position: relative;display: inline-flex; right: 0; bottom: 0; 
    justify-content: center; align-items: center;
    padding: 4px 10px; border-top-left-radius: var(--border-radius-3);
    border: 1px solid var(--oficina-primary); color: var(--oficina-primary);}
.list-queue .queue-details .queue-service:last-child { border-bottom-right-radius: var(--border-radius-3); }
.list-queue .queue-details .queue-service label { margin-bottom: 0;pointer-events: none;}

.overview-items { display: block; border-radius: var(--border-radius-3); margin: 10px auto;
    overflow: hidden;}
.overview-items .overview-item { position: relative;
    border-radius: var(--border-radius-3); overflow: hidden;margin: 0 10px;
    background-color: var(--oficina-dark-variant);}
.overview-items .item-info { display: grid;position: relative; 
    grid-template-columns: minmax(100px, 140px) 1fr;width: 100%; margin: 0; }
.overview-items .item-info .item-image {display: flex;position: relative; max-width: 200px; min-height: 70px;
    justify-content: center; color: var(--oficina-primary); overflow: hidden;}
.overview-items .item-info .item-image .material-icons-outlined,
.overview-items .item-info .item-image .fa-solid,
.overview-items .item-info .item-image .fas { font-size: 40px;}
.overview-items .item-info .item-details {  padding: 4px 20px; }
.overview-items .item-info .item-details .item-description { margin-bottom: 0;}
.overview-items .item-action { display: inline-block; position: absolute;left: 0;bottom: 0; 
    padding: 4px 20px; border-top-right-radius: var(--border-radius-3); font-weight: 700;
    background-color: var(--oficina-primary); color: #111; margin: 0;}

.result_selected_user { display: block; }
.result_selected_user li { list-style: none; padding: 4px 10px; border-radius: var(--border-radius-1);
    background-color: var(--oficina-dark-variant);color: var(--oficina-white);}

.btn-add-checklist { display: flex;position: fixed;right: 10px; bottom: 130px; width: 70px; height: 70px;
    min-width: 70px; outline: none; border: none; border-radius: 50%; justify-content: center; align-items: center;
    background-color: var(--oficina-dark-variant); color: var(--oficina-info-light); z-index: 3;
    text-decoration: none !important; opacity: 1;}

/* =========================
            ADM
========================= */
.adm-header { background-color: var(--oficina-background);}
.sideMenu { background-color: var(--oficina-dark);}
.sideMenu .nav-link.active { background-color: var(--oficina-background);}

.range-time-toggler { position: relative; display: flex;justify-content: space-between;
    align-self: center; align-items: center;height: 1.6rem;width: 4.4rem; cursor: pointer; 
    border-radius: var(--border-radius-1);background-color: var(--oficina-light);}
.range-time-toggler span { font-size: 1.2rem; width: 50%; height: 100%; display: flex; align-items: center;
    justify-content: center;}
.range-time-toggler span.active { background-color: var(--oficina-primary); color: var(--oficina-dark);
    border-radius: var(--border-radius-1);} 

main .analytic-numbers .flex-3 label { border-radius: var(--card-border-radius); padding: 5px 10px; background-color: var(--oficina-dark);}

main .insights { display: grid; grid-template-columns: 1fr;gap: 0;}
main .insights > .card {display: block; margin-top: 1rem; padding: var(--card-padding); background-color: var(--oficina-dark);
    border-radius: var(--border-radius-3); box-shadow: var(--box-shadow); transition: var(--transition);}
main .insights > .card:hover { box-shadow: none;}
main .insights > .card span { padding: 0.5rem; border-radius: 50%;background-color: var(--oficina-primary);
    color: var(--oficina-dark); font-size: 2rem;}
main .insights > .card.box-stack span { background-color: var(--oficina-danger);}
main .insights > .card.box-ongoing span { background-color: var(--oficina-info-dark);}
main .insights > .card.box-finalized span { background-color: var(--oficina-success);}
main .insights > .card .middle { display: flex; align-items: center;justify-content: space-between;}
main .insights h3 { margin: 1rem 0 0.6rem; font-size: 1rem; color: var(--oficina-white);}
main .insights h1 { display: block;width: 100%; white-space: nowrap; color: var(--oficina-white);}
main .insights h1 small { font-size: 11px;}
main .insights .progress { position: relative; width: 92px; height: 92px;border-radius: 50%;background-color: inherit;}
main .insights .progress .number { position: absolute; top: calc(50% - 18px); left: 0;width: 100%; height: 18px;
    display: flex; justify-content: center;}
main .insights > div > small { margin-top: 1.6rem;}

main .recent-orders {position: relative;display: block; width: 100%;margin: 0; margin-top: 2rem;}
main .recent-orders h2 { margin: 0.8rem 0;}
main .recent-orders table { background-color: var(--oficina-dark); width: 100%; border-radius: var(--card-border-radius);
    padding: 0.5rem; text-align: center;box-shadow: var(--box-shadow);border-collapse: inherit; border-spacing: inherit;
    transition: var(--transition);}
main .recent-orders table:hover { box-shadow: none;}
main .recent-orders table th { text-align: inherit;padding: inherit; border-radius: inherit; background-color: var(--oficina-dark);}
main .recent-orders table tr { background: inherit;}
main .recent-orders table tbody td { height: 2.8rem; text-align: inherit;
    border-bottom: 1px solid var(--oficina-light); color: var(--oficina-info-dark);}
main .recent-orders table tbody td.warning { color: var(--oficina-warning);}
main .recent-orders table tbody td.info { color: var(--oficina-info-light);}
main .recent-orders table tbody td.success { color: var(--oficina-success);}
main .recent-orders table tbody tr:last-child td { border: none;}
main .recent-orders .export-report { text-align: center; display: block; margin: 1rem auto; color: var(--oficina-primary);}

.right { margin-top: 1rem;padding: 0 1rem;}

.sales-analytics { margin-top: 1rem;}
.sales-analytics h2 { margin-bottom: 0.8rem;}
.sales-analytics .sales-item { display: flex; align-items: center;gap: 0.2rem; margin-bottom: 0.7rem;
    padding: 0.8rem var(--card-padding);border-radius: var(--border-radius-3); transition: var(--transition);
    background-color: var(--oficina-dark);box-shadow: var(--box-shadow);}
.sales-analytics .sales-item:hover { box-shadow: none;}
.sales-analytics .sales-item .right { display: flex;justify-content: space-between; gap: 0.2rem;
    align-items: baseline; margin: 0; width: 100%;}
.sales-analytics .sales-item .right h3 { font-weight: bold; color: var(--oficina-white);}
.sales-analytics .sales-item .right h5.danger { color: var(--oficina-danger);}
.sales-analytics .sales-item .right h5.success { color: var(--oficina-success);}
.sales-analytics .sales-item .sales-item-icon { display: flex; padding: 0.6rem; 
        color: var(--oficina-dark); border-radius: 50%;background-color: var(--oficina-primary);}
.sales-analytics .sales-item.offline .sales-item-icon { background-color: var(--oficina-danger);}
.sales-analytics .sales-item.customers .sales-item-icon { background-color: var(--oficina-success);}
.sales-analytics .add-product { background-color: transparent;}
.sales-analytics .add-product div { display: flex;align-items: center;gap: 0.6rem;}
.sales-analytics .add-product div h3 { font-weight: 600;}

/* ==================
        PARTNER
===================== */
.partner-home-section-btn-call-scanner { display: grid;justify-content: center; position: relative; align-content: center;
    height: calc(100vh - 144px); align-items: center; }
.partner-home-section-btn-call-scanner .btn-call-scanner { margin: 5px;color: var(--oficina-background);
    text-transform: uppercase; background-color: var(--ThemeColor);}
.partner-home-section-btn-call-scanner .btn-logout { margin: 5px;}
#scanner { display: table;position: relative; justify-content: center;align-items: center;align-content: center;margin: auto;
    overflow: hidden;}
#scanner canvas.drawingBuffer, #scanner .success_scanning, #scanner .error_scanning { position: absolute; left: 0; top: 0;
    width: -webkit-fill-available; }
#scanner .success_scanning {display: none; width: 100%;height: 100%; background-color: var(--oficina-success);
    color: var(--selkDarkGreen); font-size: 24px; text-align: center; justify-content: center;align-content: center;
    z-index: 2;}
#scanner .success_scanning.active { display: grid;}
#scanner .success_scanning b { color: #111;font-weight: bold;font-family: 'Zen Dots', sans-serif;}
#scanner .success_scanning .scanning_client_code { margin-bottom: 15px;}
#scanner .success_scanning .scanning_client_name { font-weight: bold;}
#scanner .error_scanning { display: none; width: 100%;height: 100%; background-color: var(--oficina-danger);
    color: var(--oficina-background); font-size: 24px; text-align: center; justify-content: center;align-content: center;
    z-index: 2;}
#scanner .error_scanning.active { display: grid;}
#scanner .error_scanning .material-icons-outlined { font-size: 40px;}
#scanner .error_scanning b { color: #111; font-family: 'Zen Dots', sans-serif;}

/* --------------------- MEDIA QUERIES --------------------------- */
@media (min-width: 431px){
    .content-gray { min-height: 100vh;}
    .menu-top a:hover { color: var(--oficina-primary);}
    .menu-bottom { margin: 0 auto; bottom: 30px; border-radius: var(--border-radius-3); }

    .banner-landing { min-height: calc(100vh - 50px);}
    .banner-landing .banner-content h1 { font-size: 2.3em;}
    .banner-landing .banner-content p {font-size: 1.5em;}
    .banner-landing .banner-content .btn-service-cta { font-size: 1.7em;}

    .card-services .card { display: flex; width: auto;}
    .card_credits.card_home > span { display: inline-flex;font-size: 0.7rem;}

    .list-vehicles { width: 100%;}

    .list-vehicle-office .vehicle-detail .vehicle-service label { display: inherit;}
    .list-queue .queue-details .queue-phone .queue-client-mobile {display: none;}
    .list-queue .queue-details .queue-phone .queue-client-desktop {display: inherit;}
    .list-queues .queue-details .queue-service label { display: inherit;}

    .btn-add-checklist:hover {color: var(--oficina-primary);}
    .history-total-display { margin: 0 auto;bottom: 100px;}
}

@media (min-width: 768px){
    .btn_support_agent { left: auto; right: 10px;bottom: 30px;z-index: 4;}
    .menu-bottom { position: fixed;}
    .menu-bottom ul li a:hover { color: var(--oficina-white);cursor: pointer;}

    .banner-landing .banner-content h1 { font-size: 3em;}
    .banner-landing .banner-content p {font-size: 2em;}

    .services-container .service-box:hover .service-icon {  top: 30px; left: calc(50% - 40px);
        width: 80px; height: 80px;border-radius: 50%;}
    .services-container .service-box:hover .service-icon .material-icons-outlined { font-size: 2em;
        opacity: 1;}
    .services-container .service-box:hover .service-content { margin-top: 100px;}
    .services-container .service-box:hover .service-content p {color: #111;}

    /* .list-vehicles { display: -webkit-box; width: 100%;max-width: 100vw; 
        height: auto; max-height: -webkit-fill-available; overflow-y: hidden;overflow-x: auto;} */
    .list-vehicles > ul {margin: 0;}
    /* .list-vehicle { min-width: 300px; max-width: 400px; max-height: 250px; transform: none; margin: 0 auto;} */
    /* .list-vehicle.active { max-width: 500px; max-height: 350px;} */
    /* .list-vehicle:hover { opacity: 1;} */

    /* .btn-add-vehicle { position: sticky; height: 350px; bottom: 0; right: 0; 
        border-radius: var(--border-radius-3);} */
    .btn-add-vehicle { position: absolute; height: 70px; bottom: 15px; right: 0; 
        border-radius: var(--border-radius-3);}
    .btn-add-vehicle .material-icons-outlined { font-size: 45px;}
    .btn-add-vehicle:hover { color: var(--oficina-primary);text-decoration: none;}

    .btn-search-vehicle { left: 20px; right: auto; bottom: 30px;}
    .btn-search-vehicle.active { bottom: 10px;}
    .btn-search-vehicle .veh-search-icon { font-size: 36px;}
    .btn-search-vehicle:hover .veh-search-icon { color: var(--oficina-primary);}

    .list-vehicle-office .vehicle-image .vehicle-action .vehicle-check-list:hover { color: #111;}
    .list-vehicle-office .vehicle-detail > label { font-size: 1rem;}
    .list-vehicle-office .vehicle-detail > label .material-icons-outlined {font-size: 1.5rem;}
    
    .form_vehicle,
    .form_schedule,
    .form_check_list,
    .section_profile { padding-bottom: 120px;}

    /* adm */
    main .insights { grid-template-columns: repeat(4, 1fr);gap: 1.6rem;}
    main .recent-orders table tbody tr:hover td { color: var(--oficina-white);}
    main .recent-orders table tbody tr .details { cursor: pointer; }
}

@media (min-width: 1024px){
}