*, body, html{
    font-family: 'Open Sans', sans-serif;
}
.btn-black{
    background-color: #181818;
    color: #ededed;
    border-radius: 10px;
    padding: 10px 15px;
    font-weight: 600;
    border: 2px solid #181818;
    transition: all .2s ease-in-out ;
}


.btn-black:hover{
    background-color: #ededed;
    color: #181818;
}

.btn-secundario{
    background-color: #fff;
    color: #000;
    border-radius: 10px;
    padding: 10px 15px;
    font-weight: 600;
    border: 2px solid #181818;
    transition: all .2s ease-in-out ;
}
.btn-secundario:hover{
    background-color: #000;
    color: #fff;
}


.btn-black.small,.btn-secundario.small{
    padding: 5px 10px;
    border: 1px solid #181818;
    border-radius: 8px;
}

@media (max-width: 920px){

    .responsive-table{
        overflow-x: scroll;
    }
}

/* Login */
.view-fs{
    height: 100vh;
    display: flex;
}
.view-fs > div{
    height: 100%;
    /* width: 50%; */
}
#login .l-side{
    background-color: #181818;
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,.8) 100%), url('https://picsum.photos/500/800');
    object-fit: cover;
    background-position: center;
    background-size: cover;
    width: 45%;
    color: #fff;
    padding: 25px;
    display: flex;
}
#login .l-side .content{
    margin-top: auto;
}
#login .r-side{
    display: flex;
    flex-direction: column;
    padding: 0px 10vw;
    width: 55%;
}
@media (max-width: 920px){
    #login .l-side{
        display: none;
    }
    #login .r-side{
        width: 100%;
    }
}
#login .r-side .center{
    margin: auto 0px;
}
#login .r-side .title{
    margin-bottom: 3rem;
}
#login .r-side .login-form label{
    color: #6c6c6c;
    font-size: .9rem;
}

#login .login-btn{
    background-color: #181818;
    color: #ededed;
    border-radius: 10px;
    padding: 10px 15px;
    font-weight: 600;
    border: 2px solid #181818;
    transition: all .2s ease-in-out ;
}
#login .login-btn:hover{
    background-color: #ededed;
    color: #181818;
}
.form-input{
    border: 2px solid #ededed;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
}

/* --------------------------- */
/* --------Dashboard ----------*/
/* --------------------------- */
#dashboard .contenedor{
    height: 100vh;
    display: flex;
}
#dashboard .contenedor .sidebar{
    width: 15%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* padding: 25px; */
    border-right: 1px solid #ededed;
    background-color: #fff;
    /* background-color: #ededed; */
}

@media (max-width: 920px){
    #dashboard .contenedor{
        height: inherit;
        display: inherit;
    }
    #dashboard .contenedor .sidebar{
        display: none;
    }
    #dashboard .contenedor .content{
        width: inherit!important;
    }
    .mobile-bar{
        display: inherit!important;
    }
}

#dashboard .contenedor .content{
    width: 85%;
    background-color: #f8f8f8;
    overflow-y: scroll;
}
#dashboard .logo-sidebar{
    margin-bottom: 5rem;
    padding: 25px;
}
#dashboard .menu-sidebar .title-menu{
    color: #00009f;
    margin-bottom: 1rem;
}
#dashboard .menu-sidebar ul{
    list-style: none;
    padding: 15px;
}
#dashboard .menu-sidebar ul li a{
    text-decoration: none;
    color: #181818;
    font-weight: 500;
    font-size: 1.2rem;
    padding: 10px 10px;
    display: block;
    transition: all .2s ease-in-out;
    margin: 3px 0px;
    border-radius: 10px;
}
#dashboard .menu-sidebar ul li a:hover, #dashboard .menu-sidebar ul li a.active{
    background-color: #000;
    color: #fff;
}

#dashboard .content{
    padding: 50px 25px 80px 25px;
    min-height: 90vh;
}
#dashboard .footer-sidebar{
    font-size: 1rem;
    font-weight: 300;
    padding: 25px;
    border-top: 1px solid #ededed;
}
#dashboard .footer-sidebar p{
    margin-bottom: 0;
}
#dashboard .footer-sidebar a{
    text-decoration: none;
}


/* --------------------
--------- Home --------
----------------------*/


.tarjeta{
    background-color: #fff;
    border-radius: 10px;
    padding: 25px;
    height: 100%;
    border: 1px solid #ededed;
    font-weight: 500;
}
.tarjeta .contenido-tarjeta .top-tarjeta{
    display: flex;
}
.top-tarjeta .left{
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.top-tarjeta .right{
    text-align: end;
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tarjeta p{
    margin: 0;
}
.top-tarjeta .right .icon .i{
    padding: 20px 10px 15px 10px;
    background-color: rgba(255,255,255,0.2);
    display: inline;
    border-radius: 5px;
    text-align: center;
}

.bottom-tarjeta .porcentaje{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 20px 0px 10px 0px;
}

/* Set black */
#home .tarjeta.black{
    background-color: #181818;
    color: #ededed;
    border: 1px solid gray;
}
#home .tarjeta.black .bottom-tarjeta .progress{
    background-color: rgba(255,255,255,0.15);
}
#home .tarjeta.black .bottom-tarjeta .progress .progress-bar{
    background-color: #fff;
}

#home .bottom-tarjeta .progress{
    background-color: rgb(233 236 239 / 60%);;
}
/* Set Green */
#home .tarjeta.green .i{
    background-color: #a1ffa9!important;
}
#home .tarjeta.green .bottom-tarjeta .progress .progress-bar{
    background-color: #a1ffa9;
}

/* Set Gray */
#home .tarjeta.gray .i{
    background-color: #e2e6e9!important;
}
#home .tarjeta.gray .bottom-tarjeta .progress .progress-bar{
    background-color: #e2e6e9;
}
/* Set purple */
#home .tarjeta.rose .i{
    background-color: #ced1f4!important;
}
#home .tarjeta.rose .bottom-tarjeta .progress .progress-bar{
    background-color: #ced1f4;
}


/* tabla */
.table-area{
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 10px;
    padding: 25px 20px;
  
}
.table-area .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
@media (max-width: 920px){
    .table-area .tabla{
        overflow-x: scroll;
    }

}
.table-area h3{
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0;
}
.table-area .simple-dropdown{
    background: none;
    border: none;

}
.table-area table{
    width: 100%;
    border-bottom: none!important;
}
.table-area table th{
    border-bottom: 1px solid #ededed;
    font-weight: 600;
    font-size: .8rem;
    color: #6c6c6c;
    padding: 10px;
}
.table-area table td{
    padding: 10px;
    font-weight: 500;
    border-bottom: 1px solid #ededed;
}
.table-area table tr:hover{
    background-color: #ededed;
}


/* QuickView */
.top-modal-quick{
    margin-bottom: 30px;
}

.ticket-simulator{
    background-color: #f3f3f3;
    padding: 15px;
    border-radius: 5px;
}

.ticket-simulator th{
    font-size: .8rem;
}

#dish-table th{
    font-weight: 600;
    font-size: .8rem;
    color: #6c6c6c;
    padding: 10px;
    border-bottom: 1px solid #ededed;

}
#dish-table td{
    padding: 10px;
    font-weight: 500;
}

#quickView .status{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: 600;
}
#quickView .status .icon-status{
    width: 25%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}

#quickView .status .title-status{
    text-align: center;
}

#quickView .status.pay{
    color: rgb(21,128,61);
}
#quickView .status.pay .icon-status{
    background-color: rgb(220,252, 231);
    font-size: 5rem;
}

#quickView .status.proccess{
    color: rgb(255, 196, 0);
}
#quickView .status.proccess .icon-status{
    background-color: rgb(250, 252, 220);
    font-size: 3rem;
}

#quickView .status.cancel{
    color: rgb(255, 0, 0);
}
#quickView .status.cancel .icon-status{
    background-color: rgb(252, 220, 220);
    font-size: 5rem;
}

.progress-bar{
    color: #000;
}
.paginate_button{
    border-radius: 5px!important;
}
.paginate_button.current{
    background: rgb(230, 230, 230, .5)!important;
    border: 1px solid #ededed!important;
}
.paginate_button:hover{
    background: rgb(81, 81, 81)!important;

}


#loader{
    width: 85%;
    position: absolute;
    background: #ffffff85;
    z-index: 99;
    margin-left: 15%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: linear-gradient(233deg, #ededed85, #ffffff85);
    height: 100%;
}
@media (max-width: 920px){
    #loader{
        width: 100%;
        margin-left: 0;
        height: 100%!important;
        position: fixed;
        z-index: 95;
        background-color: #fff;
    }
}
.icon-loader{
    display: flex;
    align-items: center;
    height: 100%;
}

.loader {
    width: 16px;
    height: 16px;
    box-shadow: 0 30px, 0 -30px;
    border-radius: 4px;
    background: #000;
    display: block;
    margin: -50px auto 0;
    position: relative;
    color: #000;
    transform: translateY(30px);
    box-sizing: border-box;
    animation: animloader 2s ease infinite;
    margin-bottom: 5%;
    margin-right: 55%;
}
.loader::after,
.loader::before {
content: '';  
box-sizing: border-box;
width: 16px;
height: 16px;
box-shadow: 0 30px, 0 -30px;
border-radius: 4px;
background: #000;
color: #000;
position: absolute;
left: 30px;
top: 0;
animation: animloader 2s 0.2s ease infinite;
-webkit-animation: animloader 2s 0.2s ease infinite;
}
.loader::before {
animation-delay: 0.4s;
left: 60px;
}

@keyframes animloader {
    0% {
        top: 0;
        color: #000;
    }
    50% {
        top: 30px;
        color: rgba(255, 255, 255, 0.2);
        opacity: .5;
    }
    100% {
        top: 0;
        color: #000;
    }
}

.dataTables_filter{
    margin-bottom: 25px;
}

.mobile-bar{
    position: fixed;
    width: 100%;
    bottom: 0;
    backdrop-filter: blur(5px);
    background: #ffffffa8;
    z-index: 99;
    -webkit-backdrop-filter: blur(5px);
    border-top: 1px solid #ededed;
    display: none;
}
.mobile-bar .icon{
    display: block;
    color: #000;
}
.mobile-bar .icon.active{
    background: #000;
    border-radius: 8px;
    color: #fff;
}
.tarjeta.categoria{

    width: 100%;
    margin-bottom: 20px;

}
table .hash::before{
    content: '# ';
}
table .money::before{
    content: '$ ';
}