* {
    box-sizing: border-box !important;
    margin: 0 !important;
    max-width: 100vw;
    /*overflow: hidden;*/
}
body {
    max-width: 100vw;
    /*overflow: hidden;*/
}
:root {
    --icon-size: 40px;
}
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    position: relative;
}
header {
    position: sticky;
    top: 0px;
    z-index: 100;


}
.header {
    box-sizing: border-box;
    position:relative;
   
}
#navbar {
    /*overflow-x: hidden !important;*/ /* Oculta el desbordamiento horizontal */
    /*overflow-y: clip ;*/
    background:white;
}
.navbar {
    /*position: relative !important;*/
    /*z-index: 0;*/
    
}
    .navbar.focus {
        height: 160px ;
        transition: right 0.1s ease-in-out;
    }
.navbar-brand {
    font-weight: 800;
    font-size:24px !important;
}
.navbar-brand.focus {
    display: block;
}
.navbar-nav<li<button{
    color:black;
}
.search-desplazable {
    /* margin-top: 150px;
    right: -150vw;
    position: absolute;
    width: 100vw;
    height: 160px;
    top: 50%;
    transform: translate(-50%, -50%);
    background: white;
    z-index: 2;*/
    margin-top: 150px !important;
    right: 0;
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    /*transform: translate(-50%, -50%);*/
    background: transparent;
    /*background: white;*/
    z-index: 2;
}
    .search-desplazable.focus {
        /* margin-top: 0px;
        right: -50%;
        transition: right 0.2s ease-in-out, margin-top 0.2s ease-in-out 0.2s;*/
        background: white;
        margin-top: 0px !important;
        right: 0;
        width: 100%;
        height: 160px;
        transition: width 0.2s ease-in-out, margin-top 0.2s ease-in-out 0.2s;
    }
.menu-desplazable {
    margin-top: 150px;
    /*right: -150vw;*/
    position: fixed;
    right: -50%;
    /*width: 100vw;*/
    width: 0vw;
    height: 0vh;
    /*height: 100vh;*/
    top: 50%;
    transform: translate(-50%, -50%);
    background: white;
    z-index: 2;
    transition: right 0.2s ease-out;
}
    .menu-desplazable.menu {
        position: fixed;
        margin-top: 0px;
        /*right: -50%;*/
        width: 100vw;
        height: 100vh;
        transition: width 0.2s ease-out;
        /*transition: right 0.2s ease-out;*/
    }
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 3;
}

/*Menu hamburguesa 🍔*/

.container-nav {
    margin-left: unset;
}
.container-nav.menu {
    order: 2;
    width: 100%;
}
.navbar-nav.menu {
    flex-wrap: wrap;
    margin-top: 20px;
    animation-name: animacionDeslizanteNavColapsado;
    animation-timing-function: ease-out;
    animation-duration: 0.2s;
    animation-direction: normal;

}
.navbar-nav {

}
.nav-item.menu {
    width: 100%;

}
.nav-item.menu a{
    font-size:18px;
    font-weight:500;
    /*color: black;*/
}
@keyframes animacionDeslizanteNavColapsado {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}
/*---/---Menu hamburguesa 🍔*/

/*DropdawnMenu*/
.dropdown-menu {
    margin-top: 0 !important;
    box-shadow: none !important;
    /*left: unset;*/
    
}
    .dropdown-menu.eslink {
        left: 50%;
        transform: translateX(-50%);
    }
.dropdown-menu.icon {

    right:0 !important;
    left:unset !important;
    max-width:140px !important;
}
.dropdown-menu.icon>li>a {

   font-size:15px!important;
}

.bg-light-blue {
    background: #dfe7f6;
}

.li-logout {
    border-color: transparent;
    font-size: 15px;
}
li:hover > form > .logout {
    color: #DC4C64 !important;
    border-color: transparent;
    font-size: 15px;
}
li > form > .logout > .flip-hover {
    transition: transform .2s ease-in;
}
li:hover > form > .logout > .flip-hover {
    transform: scaleX(-1);
    transition: transform .2s ease-in;
}
li:hover > .login {
    border-color:transparent;
}
li:hover > .login {
    color: #2c71bf !important;
}
li:hover > .signup {
    border-color: transparent;
}
li:hover > .signup {
    color: #139c49 !important;
}
.dropdown-item {
    font-weight:400!important;
}
    .dropdown-item:hover{
        background:white !important;
    }
    .dropdown-list:hover > .dropdown-menu, .dropdown:hover > .dropdown-menu {
        display: block;
    }

.dropdown > .dropdown-menu {
    /*opacity:0;
    transition: opacity 2s ease-out, top 2s ease-out;
    top: 0;*/
    display: block !important;
    max-height: 0 !important;
    /* grid-template-rows:0fr;*/
    overflow: hidden;
}

.dropdown:hover > .dropdown-menu {
    opacity: 1;
    /*top: 20px;*/
    max-height: 210px !important;
    /*grid-template-rows: 1fr;*/
    transition: max-height 0.5s ease-out, transform 0.5s ease-out;
}


.dropdown > .dropdown-toggle:active {
    /*Without this, clicking will make it sticky*/
    pointer-events: none;
    background:none;
}
.dropdown-toggle{
    text-transform:none;
    /*margin-bottom;*/
}
    .dropdown-toggle:hover {
        background: none;
        border-radius: 0 !important;
    }
    .dropdown-toggle:focus {
        background: none;
        border-radius: 0 !important;
    }
.dropdown-menu {
    /*    margin-top:10px !important;
*/
    border-radius: 0 !important;
    /*top: 0;*/
    /*height: 100%;*/
    /* z-index: -100; */

}
.dropdown:hover .dropdown-menu {
    border-radius: 0 !important;

}


    .dropdown-menu li {
        border-radius: 0 !important;
        /*height:42px;*/
    }.dropdown-menu li:hover {
        border-radius: 0 !important;
    }
    .dropdown-menu li a{
        border-radius: 0 !important;
    }
#dropdownMenuButton {
    color:white;
}
.nav-item {
    font-weight: 200;
    cursor: pointer;
    transform: translateX(0);
    transition: all .2s ease-in-out;
    font-weight: 500;
}
    .nav-item i {
        
        font-size: 18px;
        font-weight:600;
        color:black;
    }
.nav-item-link.menu {
    display:block;
    
}
.nav-item-link.search{
    display:none !important;
}
.nav-item {
    border-bottom: solid 1px transparent;
        
}

    .nav-item:hover {
        border-bottom: solid 1px black;
    }
.nav-icon {
    width: var(--icon-size);
    height:var(--icon-size);
    display:flex;
    justify-content:center;
    align-items:center;
}
.icon-nav {
    font-size: 14px;
    color: black;
    font-weight: 200;
}
.search-button {
    display: flex;
    justify-content: center;
    align-content: center;
    position: relative !important;
    width: var(--icon-size);
    height: var(--icon-size);
    transition: width 0.4s ease-in-out, transform 0.4s ease-in-out;
    
    /*animation:widthanimation 1s ease-in-out;*/
}
    .search-button.focus {
        width: 60vw;
        max-width: 800px;

    }

@keyframes seaarchMovement{
    0% {
        transform: translateY(0px);
    }
    1% {
        transform: translateY(20px);
    }
    50% {
        transform: translateY(0px);
    }
}
.input-container {
   
    height: 100%;

    /*max-height: 36px;  on focus*/
}.input-container.focus {
    max-height: var(--icon-size);
    
}

.search-field {
    box-sizing: border-box;
    /*display: none;*/
    margin: 0px !important;
    position: absolute;
    width: var(--icon-size);
    height: var(--icon-size);
    /*right: -100vw;*/
    max-width: 100vw !important;
    
    border-radius: 25px;
    border: none;
    background: #f5f5f5;
    right: 0;
    visibility:hidden;
    display:block;
    /*visibility: hidden;*/
    -webkit-transition: all 0.4s ease-in-out;
    transform: translateY(-50%);
    /*-webkit-appearance: none;*/
    right: 0px;
    top: 50%;
    /*z-index:-1;*/
    &:focus
    {
        outline: none;
   
    }

    &:active {
        outline: none;
    }

}
.search-field.focus {
    padding-inline: 20px;
    padding-right: 65px;
    visibility: visible;
    width: 100%;
    height: 100%;
    right: 0 !important;
    max-height: var(--icon-size);
}
.nav-link {
}
.nav-response {
    border-radius: 50%;
    border: none;
    background: none;
}
    .nav-response:hover {
        background: #D8D8D8;
    }

.search-absolute {
    right: 0px;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
    /*transition: 1s ease-in-out;*/
}
.search-absolute.focus {

}

.x-absolute {
    position: absolute;
    right: var(--icon-size);
    top: 50%;
    transform: translateY(-50%);
    display: none;
    opacity:.8;
    display:none !important; /*show on foucs*/
}

    .x-absolute .nav-link i {
        font-size: 12px !important;
    }

    .x-absolute.focus {
        display:block !important;
    }
    .nav-link.absolute {
        padding-right: 0 !important;
    }
.cancel-btn {
    position: absolute;
    transform: scale(0);
    opacity: 0;
    display: block;
    visibility: hidden;
}
    .cancel-btn.focus {
        position: relative;
        visibility: visible;
        transform: scale(1);
        opacity: 1;
        transition: all 0.2s ease .45s;
    }
    
.back-btn {
    position: absolute;
    transform: scale(0);
    opacity: 0;
    display: block;
    visibility: hidden;
}
    .back-btn.focus {
        position: relative;
        visibility: visible;
        transform: scale(1);
        opacity: 1;
        transition: all 0.2s ease .45s;
    }
.blur {
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
    background-color: hsla(0,0%,7%,.16);
    backdrop-filter: blur(6px);
    margin: 0;
    padding: 0;
}
@media (max-width: 576px) {
    .navbar-nav.menu {
        gap: 1.25rem !important;
        /*margin-top:.75rem;*/
        /*height: 50px;*/
        overflow: hidden;
        margin-top: 1.25rem !important;
    }
    .dropdown-menu {
        margin-top: 7px !important;
        margin-bottom:7px !important;
    } .dropdown-menu.icon {
        margin-top: 0px !important;
    }
    .dropdown-list:hover .dropdown-menu {
        position: relative;
        margin-top:7px !important;
    }
    .container-nav.menu {
        border-top: 1px solid #eceff1;
        margin-top: 10px;
    }
    .nav-item.menu {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding-inline: 10px;
        /*height: 50px;*/
    }
    .nav-item:hover {
        /*border-bottom: solid 1px transparent;*/
        /*background: #D8D8D8;*/
        /*border-radius: 5px;*/
    }
    .navbar-nav {
        flex-direction: row !important;
    }
    .container-nav {
        margin-left: auto !important;
    }
    .navbar.focus {
        height: auto !important;
    }

    .cancel-btn.focus {
        position: absolute !important;
    }
    .navbar-brand.focus {
        display:none !important;
    }
    .search-button.focus {
        width: 100% !important; 
    }
    .container-nav.focus{
        width:100%;
    }
    #dropdownMenuButton{
        font-size:18px;
        padding:0;
    }
    .nav-item:hover #dropdownMenuButton {
        font-size: 18px;
        /*background: #D8D8D8 !important;*/
    }
}
@media (max-width: 400px) {
    .search-field {
        -webkit-transition: none !important;
        transition:none !important;
    }
    .search-button {
        transition: none !important;
    }
    .search-desplazable.focus {
        transition:none;
    }

}

#contenedor-svg {
    rotate: -30deg;
    opacity: 1;
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; /* Transición de opacidad para la animación */
}

.navbar.menu{
    flex-direction:column;
}



/*Focus input border color*/

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
    border-color: rgba(0, 0, 0, 1) !important;
   /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);*/
    outline: 0 none;
    box-shadow:none;
}
input[type="text"]:active,
input[type="password"]:active,
input[type="datetime"]:active,
input[type="datetime-local"]:active,
input[type="date"]:active,
input[type="month"]:active,
input[type="time"]:active,
input[type="week"]:active,
input[type="number"]:active,
input[type="email"]:active,
input[type="url"]:active,
input[type="search"]:active,
input[type="tel"]:active,
input[type="color"]:active,
.uneditable-input:active {
    border-color: rgba(0, 0, 0, 1) !important;
    box-shadow: none !important;
    /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);*/
    outline: 0 none;
}
select:active {
    border-color: rgba(0, 0, 0, 1) !important;
    box-shadow: none !important;
    /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);*/
    outline: 0 none !important;
}
select:focus {
    border-color: rgba(0, 0, 0, 1) !important;
    box-shadow: none !important;
    /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);*/
    outline: 0 none !important;
}
/*input[type="text"]:active.form-label, input[type="text"]:focus.form-label {
    top: 0 !important;x
    transform: translateY(+50%) !important;
}*/
/*Select boostrap libreria*/

.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: black;
     box-shadow: none !important; 
}
.select2-container--bootstrap-5 .select2-dropdown {
border-color:black !important;
}
.form-outline .form-control.active ~ .form-label, .form-outline .form-control:focus ~ .form-label 
{
    top: 0 !important;
    transform: translateY(-.5rem) translateY(0.1rem) scale(.8);
}
.form-outline textarea.form-control ~ .form-label, .form-outline textarea.form-control ~ .form-label {
    font-size: 0.9rem !important;
    top: 0 !important;
    transform: translateY(.5rem);
    
}
.form-select-container {
    /*max-width:667.72px !important;
    width:100%;*/
    /*max-width: 635.13px !important;*/
    /*max-width: 673.3px !important;*/
    max-width: 674.72px !important;
}
.form-select {
    font-size: 1rem !important;
    max-width:667.72px !important;
    width: 100%;
    /*max-width: 635.13px !important;*/
    /*max-width: 673.3px !important;*/
}
.form-outline .form-control:focus ~ .form-notch .form-notch-leading {
    border-color: rgba(0, 0, 0, 1) !important;
    box-shadow: none !important;
}
.form-outline .form-control:focus ~ .form-notch .form-notch-middle{
    border-color: rgba(0, 0, 0, 1) !important;
    border-top:none!important;
    box-shadow: none !important;
}
.form-outline .form-control:focus ~ .form-notch .form-notch-trailing {
    border-color: rgba(0, 0, 0, 1) !important;
    box-shadow: none !important;
}
.form-outline .form-control ~ .form-label {
    padding-top: unset !important;
    /*bottom: 0 !important;*/
    top: 50% !important;
    transform: translateY(-50%);
    /*padding-bottom: 0.37rem!important;*/
}
.form-label {
    color: black !important;
    font-size: 0.9rem !important;
}
.error-message {
    margin-bottom: 1.5rem !important;
    font-size:0.85rem;
}
.form-control {
    /*padding: 0.75rem 0.75rem !important;*/
    font-size: 0.9rem !important;
    height: 40px;

}
textarea.form-control {

    height: unset !important;
}
textarea.form-label {
    padding-top: unset !important;
    bottom: 0 !important;
    top: 0 !important;
    /*    top: 50% !important;
    transform: translateY(-50%);*/
    /*padding-bottom: 0.37rem!important;*/
}
td a.btn {
    display: inline-block !important;
    width: 36.99px !important; /* Ancho deseado del contenedor */
    height: 36.99px !important; /* Alto deseado del contenedor */
    line-height: 36.99px !important; /* Igual al alto del contenedor */
    text-align: center !important;
}

.confirm-delete-name{
    font-style:italic;
    font-weight:lighter;
}







.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
    margin-right: 0.25rem !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    margin-right: 0.375rem !important;
    margin-bottom: 0.375rem !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: black !important;
}
.select2-container--bootstrap-5 .select2-selection {
    min-height: 40px !important;
    border: 1px solid #bdbdbd !important;
    font-size: 0.9rem !important;
    color: #000000 !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    font-size: 0.9rem !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    font-size: 0.9rem !important;
}



.select2-search__field::placeholder {
    opacity: 1 !important;
    color: black !important;
    
}
.select2-container--bootstrap-5 {
    max-width: 667.72px !important;
}

/*Quitar el z index del form*/
select + .select2-container--bootstrap-5 {
    z-index: 0 !important;
}

/*Centrar lable/placeholder/seleccion de single select*/
.select2-container--bootstrap-5 .select2-selection--single {
    display: grid !important;
    align-content: center;
}
.select2-selection__placeholder {
    opacity: 1 !important;
    color: black !important;
}
/*Multiselect color del select a negro*/
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    background-color: #000000 !important;
}
/*Quitar el box shadow azul del input (buscador) del single select*/
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    /*border-color: #86b7fe;*/
    box-shadow: none !important;
}

/*TextArea label fontSize*/
/*.form-outline textarea.form-control ~ .form-label, .form-outline textarea.form-control ~ .form-label {
    font-size: 0.9rem !important;
}*/


/*Input daytime-local  hide 'dd/mm/aaa --:-- ----'*/
.input-date {
    opacity: 0 !important;
}
.input-date.active {  /*Opacidad 1 cuando hay ya se selecciono una fecha*/
    opacity: 1 !important;
}

    .input-date:active, .input-date:focus {
        opacity: 1 !important;
    }


/*Eliminar los botones por defecto del input number */
/* Oculta los botones de aumentar y decrementar en todos los navegadores */
input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
}

    /* Oculta los botones de aumentar y decrementar en Chrome, Safari y Edge */
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }


/*Padding input amount shoping cart*/
.form-control.input-amount-shopping-cart {
    height: 31.5px !important;
}
@media (max-width: 440px) {
    .form-control.input-amount-shopping-cart {
        padding: 0 !important;
        width:30px !important;
        height:30px !important;
    }
    .precio-item-shopping-cart {
        font-size: 1rem
    }
    .nombre-producto-shopping-cart {
        font-size: .95rem
    }
}
@media (max-width: 440px) {
    .form-control.input-amount-shopping-cart {
        height: 20px !important;
    }
}
@media (max-width: 380px) {
    .remove-item-shopping-cart-down {
        display:block !important;
    }
    .remove-item-shopping-cart-right {
        display:none;
    }
}


a.icono-eliminar {
}

    .icono-eliminar {
        font-size: .8rem;
    }

        .icono-eliminar:hover {
            color: #DC4C64;
        }

/*Shopping cart Badge*/
.shopping-cart-badge {
    border: 2px solid white;
    top: 2px;
    right: 5px;
    border-radius: 100%;
    padding: 0.05rem 0.2rem;
}
.nav-response:hover .shopping-cart-badge {
    border-color: #D8D8D8;
}

/*Account Form*/

.account-form{
    max-width:500px;
}

button{
    text-transform:none !important;
}


/*General*/

.flip-horizontal {
    transform: scaleX(-1);
}
.w-fit{
    width:fit-content;
}