::-webkit-scrollbar {
    display: none; 
}
:root {
    --wiedens : #00da4d;
    --wiedensB: #3636d2;
    --bg-stat : #6c757d;
}
input[type="number"] {
    appearance: textfield !important; margin: 0;
    -moz-appearance:textfield !important;
}
.flex { display: flex; align-items: center; }
.flej { display: flex; justify-content: center }
.flec { display: flex; justify-content: center; align-items: center }
.fleb { display: flex; justify-content: space-between; align-items: center }
.grid { display: grid!important; align-items: center } */
.f-14 { font-size: 14px!important }.f-16 { font-size: 16px!important }.f-18 { font-size: 18px!important }
.f-20 { font-size: 20px!important }.f-24 { font-size: 24px!important }
.f-30 { font-size: 30px!important }.f-36 { font-size: 36px!important; cursor: pointer }
.ht-50 { height: 50px; overflow-y: scroll; }
.z-1  { z-index: 1 } .z-2  { z-index: 2 } .z-5  { z-index: 5 }
.hide { display: none; } .shown { display: block; }
.b-none { border: none }
.tohide:focus { display: none; }
.tohide:active { display: none; }
.text-red { color: red } .text-green { color: green } .text-yellow { color: rgb(194, 194, 28) } .text-aqua {color: aqua}
.text-purple { color: purple } .text-blue { color: blue } .text-cyan { color: cyan } .text-magenta { color: magenta }

.nave{
    /* display: none; */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: #fff;
    /* padding: 10px; */
    transition: all 0.4s ease;
    box-shadow: 0px 5px 21px -5px #cdd1e1;
    z-index: 2;
} 
a {
    position: relative;
    color: inherit;
    text-decoration: none;
    /* -webkit-transition: all 0.4s ease; */
    transition: all 0.4s ease;
    cursor: pointer;
}
button { border: none; }
:root {
    --wiedens : #00da4d;
    --wiedensB: #3636d2;
}

.quantity > input[type="number"] {
    background: crimson;
    height: 100%;
    width: 45px;
    border-radius: 10px;
    color: #fff;
    border: 1px solid crimson;
    box-shadow: 0 0 5px 0px red; text-align: center;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { appearance: none; }
.input-container { border: 1px solid darkgrey; border-radius: 10px }
.spin-container {
    position: relative;
    display: grid;
    height: 100%; 
    width: 30px;
    border-radius: 10px; 
    line-height: 16px;
    justify-content: center;
    align-items: center; text-align: center;
}
.spin-container span { height: 1px; padding: 3px; }
.spin-container .spin {
    font-size: 30px; font-weight: 400; color: rgb(73, 73, 73); height: 100%;
}
.spin:nth-child(1) {
    font-size: 26px; border-bottom: 1px solid darkgrey; height: 100%; z-index: 1;
}
.spin.minus { 
    padding-top: 2px;
}
/*______________________________ Special Inputs  ______________________________*/
.sp-in {
    border: none; border-bottom: 1px solid #12e5be; padding: 5px;
}
.sp-in:focus { color: #ecf4f5; } 
/*______________________________ Footer class ______________________________*/
.footer {
    background: #F5F7FF;
    padding: 30px 2.45rem;
    transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    font-size: calc(0.875rem - 0.05rem);
    font-family: "Nunito", sans-serif;
    font-weight: 400;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
footer { position: relative; background: #140B5C; width: 100%; bottom: 0; left: 0 }

footer::before {
    content: ''; position: absolute; left: 0; top: 100px; height: 1px; width: 100%; background: #AFAFB6;
}
footer .footer-content { max-width: 1250px; margin: auto; padding: 30px 40px 30px 40px }
footer .footer-content .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 50px }
.footer-content .top .logo-details { color: #fff; font-size: 30px }
.footer-content .top .media-icons { display: flex }
.footer-content .top .media-icons a { 
    height: 40px; width: 40px;
    margin: 0 8px; border-radius: 50%;
    text-align: center; line-height: 40px;
    color: #fff; font-size: 17px; text-decoration: none; transition: all 0.4s ease;
}
.top .media-icons a:nth-child(1) { background: #4267B2 }
.top .media-icons a:nth-child(1):hover { color: #4267B2; background: #fff }
.top .media-icons a:nth-child(2) { background: #1DA1F2 }
.top .media-icons a:nth-child(2):hover { color: #1DA1F2; background: #fff }
.top .media-icons a:nth-child(3) { background: #E1306C }
.top .media-icons a:nth-child(3):hover { color: #E1306C; background: #fff }
.top .media-icons a:nth-child(4) { background: #FF0000 }
.top .media-icons a:nth-child(4):hover { color: #FF0000; background: #fff }
footer .footer-content .link-boxes { width: 100%; display: flex; justify-content: space-between }
footer .footer-content .link-boxes .box { width: calc(100%/2 - 10px) }
.footer-content .link-boxes .box .link_name { color: #fff; font-size: 18px; font-weight: 400; margin-bottom: 10px; position: relative }
.footer-content .link-boxes .box .link_name::before {
    content: ''; position: absolute; height: 2px; width: 50px; background: #fff; left: 0; bottom: -2px;
}
.footer-content .link-boxes .box li { margin: 6px 0; list-style: none }
.footer-content .link-boxes .box li a {
    color: #fff; font-size: 15px; font-weight: 400; text-decoration: none; opacity: 0.8; transition: all 0.4s ease;
}
.footer-content .link-boxes .box li a:hover { opacity: 1; box-shadow: 0px 5px 21px -5px #cdd1e1 }
footer .bottom-details { width: 100%; background: #0F0844 }
footer .bottom-details .bottom_text {  max-width: 1250px; margin: auto; padding: 20px 40px; justify-content: space-between }
.bottom-details .bottom_text span,
.bottom-details .bottom_text a { font-size: 14px; font-weight: 300; color: #fff; opacity: 0.8; text-decoration: none }
.bottom-details .bottom_text a:hover { opacity: 1; box-shadow: 0px 5px 21px -5px #cdd1e1 }
@media (max-width: 700px) {
    .footer-content .top .logo-details { font-size: 25px }
    .footer-content .top .media-icons a { margin: 0 2px }
    footer .footer-content { max-width: 1250px; margin: auto; padding: 30px 20px 30px 20px }
    footer .bottom-details .bottom_text { padding: 20px 20px }
}
.backSoft { background: #00da4da8!important; color: #fff; padding-left: 20px }
.backColor { background: #00da4d!important; color: #fff; padding-left: 20px }
.backColor span a { font-size: 17px }
.sticker { width: 40px; display: flex; justify-content: center }


/*______________________________ Notifications ______________________________*/
.counter {
    width: 20px; height: 20px; border-radius: 50%; text-align: center; line-height: 20px; z-index:2;
    background-color: rebeccapurple; color: #fff;
    position: absolute; left: 38px;
}
.popup {
    display: block; position: fixed; right: 5px; top: 98px; width: 330px; transition: .4s; font-size: 14px; letter-spacing: -0.3px;
    /* background: #ece9f3;  */
    color: #0e25a9; border-radius: 12px; box-shadow: 0 0 10px rgba(0,0,0, .1); z-index: 2;
}
.popup-header {  display: flex; justify-content: flex-end; position: absolute; right: 5px }
.popup-header button { cursor: pointer; font-size: 24px; background: transparent; width: 28px; height: 28px; line-height: 26px; border:none}
.popup-header #close:hover { background:#fff; border-radius:15px; transition: .3s }
.popup-body { 
    display: flex; justify-content: space-evenly; align-items: center; 
}
.popup#hide { opacity: 0; transform: scale(.6); pointer-events: none }
.popup#show { opacity: 1; transform: scale(1); pointer-events: visible; display: block; z-index: 1061 }


/*______________________________ Navigation ______________________________*/
#navad.sticky{ 
    padding: 15px 10px; height: 70px; top: 0; z-index: 4;
    background: linear-gradient(135deg, #11a343, #00DA4B, #00DA4B, #00DA4B, #08a73f);
}
nav .nav-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1200px;
    margin: auto;
}
.nav-content .logo a{
    font-size: 35px;
    font-weight: 500;
    color: #4070f4;
}
nav.sticky .nav-content .logo a, nav.sticky .container_login { color: #fff }
.nav-content .nav-links{
    display: flex; align-items: center; 
}
.nav-content .nav-links li{
    list-style: none; margin: 0 8px; 
}
.nav-links li a{
    font-size: 18px; font-weight: 500;
    color: #0e2431;
    padding: 10px 4px;
}
nav.sticky .nav-links li a { color: #fff }

/*______________________________ Admin ______________________________*/







/*______________________________ Platform elements ______________________________*/
.toggle{
    position: relative;
    /* top: 92px; left: 20px; */
    width: 40px; height: 40px;
    background: #2697ff;
    border-radius: 10px;
    cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    transition: all 0.7s ease;
    z-index: 3;
}
.toggle.active{
    background: #ff4d89;
    /* left: 20px; */
    transition: all 0.7s ease;
}
.toggle span{
    position: absolute;
    color: #fff;
    font-size: 28px;
    display: none;
}
.toggle span i { display: flex }
.toggle span.open,
.toggle.active span.closer{
    display: block;
}
.toggle span.closer,
.toggle.active span.open{
    display: none;
}

.navbar-dropdown {
    position: absolute;
    font-size: 0.9rem;
    margin-top: 0;
    right: 0;
    left: auto;
    top: 70px;
}
.dropdown-menu {
    border: none;
    -webkit-box-shadow: 0px 3px 21px 0px rgb(0 0 0 / 20%);
    box-shadow: 0px 3px 21px 0px rgb(0 0 0 / 20%);
}

/*______________________________ Modal ______________________________*/
.mod_login { width: 100%; height: 100%; position: absolute; top: 0; background: rgba(0, 0, 0, 0.7); visibility: hidden; z-index: 7 }
.mod_login .container { 
    position: fixed; top: 50%; left: 50%; display: none; z-index: 2;
    transform: translate(-50%, -50%);
    background: #fff; width: 410px;
    padding: 30px; box-shadow:  0 0 8px rgba(0, 0, 0, 0.1);
}
#show:checked ~ .mod_login { visibility: visible; position: fixed }
#show:checked ~ .mod_login .container { display: block }
#show { display: block }
.container .text { font-size: 35px; font-weight: 600; text-align: center }
.container form { margin-bottom: 15px }
.container form .data { height: 40px; width: 100%; margin: 40px 0 }
form .data label { font-size: 18px }
form .data input { height: 100%; width: 100%; padding-left: 10px; font-size: 17px; border: 1px solid lightgrey }
form .data input:focus { border-color: #3498db!important; border-bottom-width: 2px }
form .forgot-pass { margin-left: -8px }
form .forgot-pass a, form .signup-link a { color: #1680c7 }
form .forgot-pass a:hover, form .signup-link:hover a { box-shadow: 0px 5px 21px -5px #b0bae2 }

form .button, .button { margin: 30px 0; height: 45px; width: 100%; position: relative; overflow: hidden }
form .button .inner, .button .inner { 
    height: 100%; width: 300%; position: absolute;
    left: -100%; z-index: -1; transition: all 0.4s;
    background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
}
form .button:hover .inner, .button:hover .inner { left: 0 }
form .button button, .button button {
    height: 100%; width: 100%; background: none; border: none;
    color: #fff; font-size: 18px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; cursor: pointer
}
form .signup-link { text-align: center }
.container .close-btn { 
    background: #ff4d89; height: 45px; width: 45px; border-radius: 10px; color: #fff;
    position: absolute; right: 20px; top: 15px; font-size: 30px; cursor: pointer;
    display: flex; justify-content: center; align-items: center;
}
.chart { margin: 0; border-radius: 25px; z-index: 0 }
.chart .inner { background: -webkit-linear-gradient(right, #56d8e4, #3636d2, #56d8e4, #3636d2) }
.chart button { text-transform: none; position: relative; line-height: 20px }

.img-content { width: 100px; display: flex; justify-content: center }
.img-content img { width: auto!important }

/*______________________________ Commercial ______________________________*/
.commercial p { text-align: center; color: #6e6e7a; font-size: 14px }
.producto-data.main { position: relative; height: 40px; right: 5%; margin-top: 15px;}
.main .input-container { height: 100%; }
.main .spin-container { width: 120px; }
.main .quantity > input[type="number"] { position: absolute; width: 40px;}
.main .spin-container { display: flex; line-height: 30px; gap: 50px}
.main .spin { height: 100%; width: 50px;}
.main .spin:nth-child(1) { border: none }
/* .main .spin.minus { padding-left: 50px; } */


/*______________________________ Admin ______________________________*/
td > span { cursor: pointer; }