@font-face {
    font-family: MontserratRegular;
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
    font-family: MontserratBlack;
    src: url('../fonts/Montserrat-Black.ttf') format('truetype');
}
@font-face {
    font-family: MontserratMedium;
    src: url('../fonts/Montserrat-Medium.ttf') format('truetype');
}

:root{
    /*General*/
    --primary-color : #21333e;
    --primary-color-rgba : rgb(82, 82, 236, .2);
    --secondary-color : #4c5358;
    --complementary-color: #000;
    --background-color: #fff;
    --danger-color: #f22020;
    --alert-color: #FFE107;
    --alert-complementary-color: #e7d54d;
    --success-color : #02BC7D;
    --success-complementary-color : #61cca9;
    --border-radius: 2rem;
    --box-shadow : 0px 0px 10px 5px rgba(0,0,0,.05);
    --gap: 1rem;

    /*Text*/
    --font-family-text: MontserratRegular;
    --font-family-title: MontserratBlack;
    --font-family-navbar: MontserratMedium;

    --font-size-text: .95rem;
    --text-color: #6a6a6c;

    /*input*/
    --input-border-color: #e5e7eb;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: inherit;
}
h1,h2,h3,h4,h5{
    margin-bottom: 0;
    font-family: var(--font-family-title);
}
p{
    font-family: var(--font-family-text);
    color:var(--text-color);
}
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    padding: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
input[type="checkbox"]:checked{
    border: 1px solid var(--primary-color);
}
input[type="checkbox"]:checked::before,
input[type="checkbox"]:checked::after{
    display: block;
}
input[type="checkbox"]::before{
    content: '';
    position: absolute;
    top: 3.5px;
    left: 0;
    right: -3.5px;
    margin: auto;
    border: 1px solid var(--primary-color);
    width: 1px;
    height: calc(100% - 7px);
    transform: rotate(50deg);
    display: none;
}
input[type="checkbox"]::after{
    content: '';
    position: absolute;
    left: 3.5px;
    bottom: 3.7px;
    margin: auto;
    border: 1px solid var(--primary-color);
    width: 1px;
    height: 5px;
    transform: rotate(150deg);
    display: none;
}
textarea{
    height: 200px;
    min-height: 200px;
    max-height: 200px;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}
label{
    color: var(--complementary-color);
    margin-bottom: .4rem;
    font-size: calc(var(--font-size-text) - .1rem);
    font-family: var(--font-family-text);
    display: block;
}
button{
    border: none;
    cursor: pointer;
    color: var(--complementary-color);
}
ul li{
    list-style: none;
}
a{
    text-decoration: none;
    color: inherit;
}
.d-none{
    display: none;
}
.d-block{
    display: block;
}
.input-danger{
    border: 1px solid var(--danger-color) !important;
}
.container{
    max-width: 1275px;
    width: 100%;
    height: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin: auto;
    position: relative;
}
.danger{
    color: var(--danger-color);
}
.caution{
    color: var(--alert-color);
}
.success{
    color: var(--success-color);
}
.content-success{
    background: var(--success-color);
    color: var(--background-color);
    margin: .2rem;
    border-radius: .2rem;
}
.content-success:hover{
    opacity: .9;
}
.content-error{
    background: var(--danger-color);
    color: var(--background-color);
    margin: .2rem;
    border-radius: .2rem;
}
.content-error:hover{
    opacity: .9;
}
.validation{
    font-family: var(--font-family-text);
    font-size: .7rem;
}
.logo{
    display: block;
    min-width: 120px;
    margin-bottom: 1rem;
}
.background{
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color);
}
.title{
    color: var(--primary-color);
    text-transform: uppercase;
    font-size: clamp(2rem,3vw,3vw);
}
.input-group{
    display: flex;
    flex-direction: column;
    position: relative;
    margin: .75rem 0;
}
.input-group .input-multiple{
    display: flex;
    align-items: center;
}
.input-group .input-multiple input{
    width: 100%;
}
.content-phone{
    border: 1px solid var(--input-border-color);
}
.input-group .input-multiple input#code,
.iti input[type=tel]{
    border: 0;
    width: 100%;
    padding-top: .72rem;
    padding-bottom: .72rem;
}
.input-group .input-multiple .btn{
    height: 40px;
    display: flex;
    align-items: center;
}
.input-groups{
    display: flex;
    gap: var(--gap);
}
.input-groups .input-group{
    width: 100%;
}
.group-checkbox{
    display: flex;
    margin: 1rem 0;
    align-items: center;
}
.group-checkbox .input{
    border-radius: 0;
    border: 1px solid #ccc;
    width: 20px;
    height: 20px;
    margin-right: .5rem;
}
.input > option img{
    max-width: 20px;
}
.group-options{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn{
    border-radius: 20px;    
    border: 2px solid transparent;
    background: var(--primary-color);
    padding: 1rem 1rem;
    text-transform: uppercase;
    font-weight: 700;
    font-size: var(--font-size-text);
    color: var(--background-color);
}
.btn.btn-white{
    color: var(--primary-color);
    background: var(--background-color);
    width: max-content;
    border-radius: 0;
    font-size: calc(var(--font-size-text) - .2rem);
}
.loading{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loading::after{
    content: '';
    display: block;
    width: 17px;
    height: 17px;
    background-image: url('../multimedia/loading-icon-2.gif');
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 8px;
}
.btn:hover{
    background: var(--secondary-color);
    border: 1px solid #00c2df;
    border: 2px solid var(--primary-color);
}
.btn.btn-primary{
    padding: .5rem;
    font-size: calc(var(--font-size-text) - .25rem);
    border-radius: 0;
    width: max-content;
}
.btn.btn-primary.btn-small{
    padding: .35rem;
    font-size: calc(var(--font-size-text) - .4rem);
}
.btn.btn-secundary{
    background: transparent;
    border: 1px solid #000;
    min-width: 100px;
}
.btn.btn-icon{
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn.btn-icon img{
    margin-left: .5rem;
    max-width: 17px;
}
.btn[disabled]{
    background: #d3d2d2;
    border: 1px solid #d3d2d2;
    color: #a7a5a5;
}
.input{
    height: 40px;
    padding: 0 .5rem;
    border: 1px solid var(--input-border-color);
    color: var(--text-color);
    width: 100%;
}
.input:focus,input:target,.input:focus-visible{
    border: 2px solid var(--primary-color); 
    box-shadow: none;
    outline: inherit;
}
.description{
    color: var(--text-color);
    font-size: var(--font-size-text);
}
.link{
    color: var(--primary-color);
    font-size: var(--font-size-text);
    font-weight: 500;
}
.d__flex{
    display: flex;
    align-items: center;
    justify-content: center;
}
/***===Oauth===***/
.section-oauth {
    width: calc(100% - 5rem);
    height: calc(100vh - 2rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--secondary-color);
    box-shadow: 2px 3px 21px -1px rgba(0,0,0,0.51);
    border-radius: var(--border-radius);
    overflow: hidden;
}
.section-oauth  .contents-oauth {
    background: #fff;
    padding: 2rem;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius);
    min-width: 60%;
}
.section-oauth  .contents-oauth  .frm-login{
    width: 100%;
    height: auto;
}
.section-oauth  .frm-description{
    margin-top: .5rem;
    margin-bottom: 2rem;
}
.btn.btn-submit{
    margin-top: 2rem;
    width: 100%;
    font-size: calc(var(--font-size-text) - .15rem);
}
.btn__logout{
    background: inherit;
}
.btn__logout:hover{
    color: var(--primary-color);
}
.section-oauth  .frm-separator{
    width: 100%;
    text-align: center;
    margin: 2rem 0;
    position: relative;
}
.section-oauth  .frm-separator .separator{
    content: '';
    position: absolute;
    height: 1px;
    width: 100%;
    background: #ccc;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 0;
}
.section-oauth  .frm-separator span{
    position: relative;
    background: var(--background-color);
    margin: auto;
    padding: 0 1rem;
    z-index: 1;
    color: #a7a5a5;
    font-size: .85rem;
}
.section-oauth  .frm-login-options{
    display: flex;
    justify-content: space-between;    
}
.section-oauth  .frm-login-options .btn{
    border-radius: 20px;
    border-color: #d3d2d2;
}
.section-oauth  .contents-aside{
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 30%;
    padding: 0 2rem;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    text-align: center;
}
.section-oauth  .contents-aside .logo{
    margin: auto;
    max-width: 200px;
}
.section-oauth  .contents-aside .logo span{
    font-size: var(--font-family-title);
    color: var(--background-color);
    font-family: var(--font-family-title);
    text-align: center;
}
.section-oauth  .contents-aside .aside-title{
    color: var(--background-color);
}
.section-oauth  .contents-aside svg,
.section-oauth  .contents-aside img{
    width: 100%;
    padding: 2rem;
}
.section-oauth  .contents-aside .aside-description{
    color: var(--background-color);
    margin: 1rem 0;
}
/***=== Social media ===***/
.social__media{
    background: var(--primary-color);
}
.social__media .social__media__inner{
    padding: .5rem 0;
}
.social__media .social__media__inner .social__media__links{
    justify-content: end;
}
.social__media__links{
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gap) - .3rem);
}
.social__media__links .socia__media__icon{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--secondary-color);
    cursor: pointer;
}
.social__media__links .socia__media__icon:hover{
    background: var(--complementary-color);
}
/***=== navbar ===***/
.navbar{
    color: var(--complementary-color);
    position: relative;
    padding-top: 1rem;
    z-index: 999;
    font-family: var(--font-family-navbar);
    border-bottom: 1px solid var(--input-border-color);
    box-shadow: var(--box-shadow);
}
.navbar .navbar__inner{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--gap) + 1rem);
    padding-bottom: 1rem;
}
.logo .logo__inner{
    font-family: var(--font-family-title);
    color: var(--primary-color);
    font-size: 1.5rem;
}
.navbar .navbar__inner .navbar__menu{
    margin-right: auto;
}
.navbar .navbar__inner .navbar__menu,
.navbar .navbar__inner .account{
    display: flex;
    gap: calc(var(--gap));
    text-transform: uppercase;
    font-size: calc(var(--font-size-text) - .15rem);
}
.btn.btn__close{
    width: 20px;
    height: 20px;
    border-radius: 0;
    padding: 0;
}
.btn.btn__close div{
    height: calc(100% - .5rem);
    width: 1px;
    background: #fff;
    position: absolute;
    display: flex;
    align-items: center;  
}
.btn.btn__close div:nth-child(1){
    transform: rotate(45deg);
}
.btn.btn__close div:nth-child(2){
    transform: rotate(-45deg);
}
.navbar .navbar__inner .navbar__menu .btn__close{
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 30px;
    height: 30px;
}
.nav__link{
    cursor: pointer;
    position: relative;
    width: max-content;
}
.nav__link a > img{
    max-height: 12px;
}
.nav__link:hover,
.nav__link.active{
    color: var(--primary-color);
    position: relative;
    width: max-content;
}
.nav__link:hover::before,
.nav__link.active::before{
    content: '';
    position: absolute;
    bottom: -7px;
    background: var(--primary-color);
    height: 3px;
    width: 70%;
    left: 0;
    display: block;
}
.navbar .navbar__inner .logo{
    margin-bottom: 0;
}
.navbar .navbar__inner .aside__navbar{
    display: flex;
    gap: .5rem;
    font-size: calc(var(--font-size-text) - .13rem);
    text-transform: uppercase;
}
.navbar .navbar__inner .aside__navbar .avatar svg{
    width: 25px;
    height: 25px;
}
.avatar{
    border-radius: 50%;
    border: 1px solid var(--primary-color);
    width: 25px;
    height: 25px;
}
.btn.btn__navbar {
    padding: 0;
    border: 0;
    cursor: pointer;
    border-radius: 0;
}
.btn.btn__navbar .btn__navbar__inner{
    width: 30px;
    height: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: .4rem;
    background: var(--bg-primary-color);
    border: 1px solid var(--bg-button-primary-color);
}
.btn.btn__navbar .btn__navbar__inner:hover{
    background: var(--bg-primary-body);
}
.btn.btn__navbar div{
    width: calc(100%);
    height: 1px;
    background: var(--background-color);
}
.dropdown{
    position: relative;
    cursor: pointer;
}
/* .dropdown::after{
    content: '';
    position: absolute;
    right:0;
    top: 50%;
    transform: translate(0,-40%);
    height: 10px;
    width: 10px;
    background-image: url('../multimedia/arrow.webp');
    background-size: cover;
} */

.dropdown .dropdown__inner{
    display: flex;
    align-items: center;
    gap: calc(var(--gap) - .5rem);
}
.dropdown .dropdown__inner span{
    margin-bottom: -.07rem;
    font-size: calc(var(--font-size-text) - .2rem);
    font-style: italic;
}
.dropdown .dropdown__inner .dropdown__icon{
    width: 12px;
    height: 12px;
}
.dropdown .dropdown__inner .dropdown__icon img{
    width: 100%;
}
.dropdown .dropdown__list{
    position: absolute;
    width: max-content;
    max-width: 13rem;   
    opacity: 0;
    visibility: collapse;
    right: 0;
    background: var(--background-color);
    border: 1px solid var(--input-border-color);
    display: flex;
    flex-direction: column;
    font-size: calc(var(--font-size-text) - .2rem);
    transition: all .5s ease-in;
    top: 100%;
    margin-top: .4rem;
    z-index: 99;
    text-transform: none;
    color: var(--complementary-color);
}
.dropdown .dropdown__list .dropdown__section{
    border-bottom: 1px solid var(--input-border-color);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--gap) - .5rem);
}
.dropdown .dropdown__list .dropdown__section strong{
    font-size: calc(var(--font-size-text) - .05rem);
    color: var(--primary-color);
}
.dropdown .dropdown__list .dropdown__section strong,
.dropdown .dropdown__list .dropdown__section a{
    display: block;
}
.dropdown .dropdown__list .dropdown__border{
    display: flex;
    align-items: center;
    padding: .5rem .9rem;
    border-top: 1px solid var(--input-border-color);
}
.dropdown .dropdown__list div{
    padding: .7rem .9rem;
}
.dropdown .dropdown__list li a{
    display: flex;
    align-items: center;
    padding: .5rem .9rem;
    z-index: 99;
}
.dropdown .dropdown__list li a > img,
.dropdown .dropdown__list li img{
    max-width: 20px;
    margin-right: .7rem;
}
.dropdown .dropdown__list li .dropdown__border{
    display: flex;
    border-top: 1px solid var(--input-border-color);
    align-items: center;
    gap: var(--gap);
    padding: .5rem .9rem;
}
.dropdown .dropdown__list button{
    width: 100%;
}
.dropdown .dropdown__list li:hover
{
    color: var(--primary-color);
}
.dropdown .dropdown__list li .btn{
    width: 100%;
    background: inherit;
    border: 0;
    padding: 0;
    display: block;
    text-align: left;
    font-size: calc(var(--font-size) - .2rem);
}
.dropdown .dropdown__list li .btn:hover{
    color: var(--bg-primary-color);
}
.dropdown:hover .dropdown__list{
    transition: all .5s ease-out;
    opacity: 1;
    visibility: visible;
}
/***=== Footer ===***/
.footer{
    font-family: var(--font-family-text);
    background: var(--primary-color);
    color: var(--background-color);
}
.footer .footer__inner{
    display: flex;
    justify-content: space-between;
    padding-bottom: 1rem;
    padding-top: 3rem;
}
.footer .footer__inner .logo{
    margin-bottom: 0;
}
.footer .footer__inner .description,
.footer .link{
    color: inherit;
}
.footer .footer__inner .logo .logo__inner{
    color: inherit;
}
.footer .footer__inner .row:nth-child(1){
    align-items: flex-start;
    min-width: 300px;
    padding: 0;
}
.footer .footer__inner .row{
    width:19%;
    gap: calc(var(--gap) + .5rem);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 2rem;
    margin-bottom: 2rem;
}
.footer .footer__inner .row ul li,
.footer .footer__inner .row .subtitle{
    color: var(--color-primary-text);
}
.footer .footer__inner .footer__tags{
    display: flex;
    gap: var(--gap);
    flex-wrap: wrap;
}
.footer .footer__inner .footer__tags .btn{
    font-size: calc(var(--font-size) - .25rem);
    padding: .5rem .4rem;
}
.footer .footer__inner .row ul li{
    margin-bottom: .7rem;
}
.footer .footer__inner .row ul li:hover{
    text-decoration: underline;
}
.footer .footer__copy{
    padding: 1rem 0;
    text-align: center;
    color: var(--color-primary-text);
    border-top: 1px solid var(--background-color);
}
.footer .footer__copy .link{
    font-family: var(--font-family-title);
}
/***=== Dashboard ===***/
.disabled{
    opacity: .5;
}
.main__content{
    padding: 2rem 0;
    background: var(--input-border-color);
    font-family: var(--font-family-text);
    font-size: var(--font-size-text);
    box-shadow: var(--box-shadow);
}
.main__content .main__content__inner{
    background: var(--background-color);
    padding: 1rem 0;
    display: flex;
    justify-content: space-between;
}
.main__content .main__content__inner .navbar__aside{
    padding: 1rem 0;
    border-right: 1px solid  var(--input-border-color);
    min-width: 300px;
}
.main__content .main__content__inner .navbar__aside .navbar__aside__avatar{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap) - .5rem);
    margin-bottom: 2rem;
}
.main__content .main__content__inner .navbar__aside .navbar__aside__avatar strong{
    color: var(--primary-color);
    font-family: var(--font-family-title);
}
.main__content .main__content__inner .navbar__aside .navbar__aside__avatar img,
.main__content .main__content__inner .navbar__aside .navbar__aside__avatar svg{
    max-width: 90px;
    border-radius: 50%;
    border: 1px solid var(--primary-color);
}
.main__content .main__content__inner .navbar__aside li a{
    display: flex;
    align-items: center;
    gap: var(--gap);
    font-size: calc(var(--font-size-text) - .05rem);
    padding: .7rem 1rem;
    cursor: pointer;
}
.main__content .main__content__inner .navbar__aside li:hover{
    color: var(--primary-color);
}
.main__content .main__content__inner .navbar__aside li.navbar__aside__active{
    /* color: var(--primary-color); */
    font-family: var(--font-family-navbar);
    background: var(--primary-color-rgba);
    border-left: 5px solid var(--primary-color);
    position: relative;
}
.main__content .main__content__inner .navbar__aside li.navbar__aside__active img{
    margin-left: -5px;
}
.main__content .main__content__inner .navbar__aside li img{
    max-width: 23px;
}
.main__content .content__form{
    padding: 0 1rem;
    width: 100%;
}
.main__content .content__form .dashboard .dashboard__inner{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.main__content .content__form .dashboard .dashboard__inner .dashboard__header{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gap);
}
.main__content .content__form .dashboard .dashboard__inner .dashboard__header .dashboard__card{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .7rem 1rem;
    min-width: calc(33.3% - 1rem);
    border-left-width: 10px;
}
.main__content .content__form .dashboard .dashboard__inner .dashboard__header .dashboard__card 
.dashboard__card__content h3{
    margin-bottom: .2rem;
    font-family: var(--font-family-title);
    font-size: var(--font-size-text);
    color: var(--background-color);
}
.main__content .content__form .dashboard .dashboard__inner .dashboard__header .dashboard__card 
.dashboard__card__content strong{
    font-size: calc(var(--font-size-text) - .1rem);
    color: var(--background-color);
}
.main__content .content__form .dashboard .dashboard__inner .dashboard__header .dashboard__card 
img{
    max-width: 40px;
    border: 1px solid var(--background-color);
    border-radius: 50%;
}
/* .main__content .content__form .dashboard .dashboard__inner .dashboard__main{

} */
.dashboard__title{
    margin: .5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.dashboard__title h1,
.dashboard__title h2,
.dashboard__title h3{
    color: var(--primary-color);
}
.dashboard__title h3
{
    background: var(--background-color);
    display: block;
    position: relative;
    width: max-content;
    z-index: 2;
}
.dashboard__title h3::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 10rem;
    margin-left: 1rem;
    height: 1px;
    background: var(--primary-color);
    z-index: 1;
}
.content__table .table__inner{
    width: 100%;
}
.content__table{
    padding-top: 1rem;
}
.table{
    width: 100%;
    font-family: var(--font-family-text);
    border: 1px solid var(--primary-color);
    font-size: var(--font-size-text);
}
.table thead tr{
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
    color: var(--background-color);
}
.table thead tr th{
    font-size: calc(var(--font-size-text) - .07rem);

}
.table tbody td{
    font-size: calc( var(--font-size-text) - .15rem);
    color: var(--text-color);
}
.table tbody th{
    font-size: calc( var(--font-size-text) - .15rem);
}
.table, th, td {
    border-collapse: collapse;
    text-align: left;
    padding: .5rem ;
}
.table .option{
    width: 3rem;
}
.table .option .dropdown .dropdown__inner{
    justify-content: center;
}
.bordered{
    border: 1px solid var(--primary-color);
    color: var(--background-color);
    background: var(--primary-color);
    padding: .2rem .4rem;
    width: max-content;
}
.row__content{
    width: max-content;
    padding: .2rem .4rem;
    color: var(--background-color);
    background: var(--primary-color);
}
.status__content{
    width: max-content;
    padding: .2rem .4rem;
    color: var(--background-color);
}
.status__content.success{
    background: var(--success-color);
}
.status__content.danger{
    background: var(--danger-color);  
}
.status__content.caution{
    background: var(--alert-color);  
}
.btn__option{
    display: flex;
    gap: calc(var(--gap) - .8rem);
    flex-direction: column;
    justify-content: center;
}
.btn__option div{
    width: 4px;
    height: 4px;
    background: var(--text-color);
    border-radius: 50%;
}
/***==Forms==***/
.accordion {
    cursor: pointer;
    width: 100%;
    font-family: var(--font-family-text);
    margin-top: 1rem;
}
  
.panel {
    padding: 1rem 0;
    display: none;
    background-color: white;
    overflow: hidden;
}
.content__form .content__form__inner{
    display: flex;
    gap: calc(var(--gap) + .5rem);
    width: 100%;
    padding: 1rem 0;
    padding-bottom: 2rem;
}
.content__form .content__form__inner .frm{
    width: 100%;
}
.frm-title{
    font-size: calc(var(--font-size-text) + .6rem);
}
.content_form_description{
    margin-top: -1rem;
    margin-bottom: 1rem;
    font-size: calc(var(--font-size-text) - .1rem);
}
.content__form .content__form__inner .content__aside{
    min-width: 400px;
    max-width: 400px;
}
.frm__custom label{
    font-family: var(--font-family-navbar);
    font-size: calc(var(--font-size-text) + .1rem);
}
.frm__custom .input-group{
    margin-bottom: 1rem;
}
.content__address .content__address__inner{
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding: 1rem;
    border: 1px solid var(--input-border-color);
    margin-bottom: 1rem;
}
.content__address .content__address__inner.card__mode{
    margin-bottom: 0;
    padding: .3rem .5rem;
    max-width: 215px;
    gap: .5rem;
}
.content__address .content__address__inner.card__mode .address__qr{
    min-width: 50px;
    max-width: 50px;
    padding: .3rem;
}
.content__address .content__address__inner.card__mode .content__address__main strong{
    font-size: calc(var(--font-size-text) - .25rem);
}
.content__address .content__address__inner.card__mode .content__address__main{
    width: calc(100% - 55px);
}
.content__address .content__address__inner .address__qr{
    background: var(--primary-color);
    min-width: 85px;
    padding: .5rem;
}
.content__address .content__address__inner .address__qr img{
    width: 100%;
    height: 100%;
}
.content__address .content__address__inner .content__address__main{
    width: 100%;
    max-width: 350px;
    width: calc(100% - 120px);
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
}
.content__address .content__address__inner .content__address__main strong{
    font-size: calc(var(--font-size-text) - .1rem);
    font-family: var(--font-family-navbar);
}
.content__column{
    width: 100%;
}
.content__column .column{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: .5rem;
    font-size: calc(var(--font-size-text) - .2rem);
}
.content__column .column strong{
    font-family: var(--font-family-title);
}
.content__description{
    margin: .5rem 0;
}
/* .content__form .content__form__inner .content__aside .content__aside_title{
    color: var(--primary-color);
} */
/***==HTTTP content==***/
.http__content{
    background: var(--background-color);
    padding: 5rem 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
}
.http__content h1{
    color: var(--primary-color);
    font-size: clamp(6vw,4rem,6vw);
}
.http__content h2{
    color: var(--primary-color);
    font-family: var(--font-family-navbar);
}
.http__content h3{
    color: var(--complementary-color);
    font-family: var(--font-family-text);
    margin-top: .7rem;
}
.http__content h4{
    color: var(--primary-color);
    font-family: var(--font-family-text);
    font-size: var(--font-size-text);
    margin-top: .7rem;
}
.http__content .btn{
    margin-top: 2rem;
}
/***==Notification==***/
.notification{
    width: 100%;
    color: var(--background-color);
    transition: all 1s ease;
    height: 0;
    opacity: 0;
    margin: .5rem 0;
}
.notification.active{
    height: auto;
    opacity: 1;
}
.notification .notification__inner{
    display: flex;
    align-items: center;
    gap: calc(var(--gap) - .4rem);
    padding: .7rem .5rem;
    position: relative;
    font-size: calc(var(--font-size-text) - .2rem);
}
.notification .notification__inner img{
    display: block;
    max-height: 38px;
}
.notification .notification__inner h4{
    font-family: var(--font-family-navbar);
}
.notification .notification__inner p{
    color: inherit;
    font-size: calc(var(--font-size-text) - .1rem);
}
.notification.success{
    background: var(--success-color);
    border-left: .4rem solid var(--success-complementary-color);
}
.notification.alert{
    background: var(--alert-color);
    border-left: .4rem solid var(--alert-complementary-color);
}
.notification.success .notification__inner,
.notification.alert .notification__inner{
    padding-left: 45px;
}
.notification.success .notification__inner::after{
    content: '';
    position: absolute;
    left: .45rem;
    width: 33px;
    height: 33px;
    background-image: url(../multimedia/marca-de-verificacion.png);
    background-repeat: no-repeat;
    background-size: 100%;
}
.notification.alert .notification__inner::after{
    content: '';
    position: absolute;
    left: .45rem;
    width: 33px;
    height: 33px;
    background-image: url(../multimedia/peligro.png);
    background-repeat: no-repeat;
    background-size: 100%;
}
/**==Card preview==**/
.card__preview{
    padding: 1rem;
    border: 1px solid var(--input-border-color);
}
.card__preview.card__large {
    width: 100%;
    margin-top: var(--gap);
    position: relative;
}
.options{
    position: absolute;
    top: 1rem;
    right: 1rem;
}
.card__preview.card__large .inner__card_preview{
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}
.card__preview.card__large .content__address .content__address__inner{
    max-width: 100%;
}
.card__preview.card__large .content__address .content__address__inner .address__qr{
    min-width: 85px;
}
.card__preview.card__large .content__address .content__address__inner .content__address__main{
    width: calc(100% - 100px);
}
.card__preview.card__large .content__address .header__preview{
    padding: 1rem;
}
.card__preview.card__large .inner__card_preview .header__preview{
    flex-direction: row;
    flex-wrap: wrap;
}
.card__preview.card__large .card__preview__main{
    display: flex;
    gap: var(--gap);
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
}
.card__preview.card__large .content__address{
    width: calc(50% - .5rem);
}
.card__preview .inner__card_preview{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.card__preview .inner__card_preview .header__preview{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    font-size: var(--font-size-text);
    width: 100%;
}
.card__preview .inner__card_preview .header__preview .item__preview{
    font-size: calc(var(--font-size-text) - .1rem);
}
.card__preview .inner__card_preview .header__preview .item__preview strong{
    display: block;
    margin-bottom: .3rem;
}
.card__preview .inner__card_preview .header__preview .item__preview strong,
.card__preview .inner__card_preview .header__preview .item__preview p{
    font-size: inherit;
}
.no-active{
    opacity: .5;
}
/***==Notification Dashboard==***/
.notification__dashboard{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    background: var(--primary-color);
    border-radius: .2rem;
    color: var(--background-color);
    text-align: center;
}
.notification__dashboard .notification_dashboard__inner{
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    max-width: 600px;
    align-items: center;
}
.notification__dashboard .notification_dashboard__inner p{
    color: inherit;
}
/***===Search===***/
.content__search{
    position: absolute;
    top: calc(100% + .5rem);
    background: var(--background-color);
    border: 1px solid var(--input-border-color);
    box-shadow: var(--box-shadow);
    width: 100%;
    max-height: 300px;
    z-index: 99;
    overflow: auto;
}
.content__search .inner__search{
    display: flex;
    flex-direction: column;
}
.item_result{
    width: 100%;
    height: 50px;
    padding: .5rem;
    display: flex;
    align-items: center;
    gap: calc(var(--gap) - .5rem);
    cursor: pointer;
    border-bottom: 1px solid var(--input-border-color);
}
.item_result.card-mode{
    border: 1px solid var(--input-border-color);
    height: inherit;
    min-height: 50px;
    width: max-content;
    min-width: 100%;
}
.item_result.card-mode:hover{
    background: var(--background-color);
}
.item_result.card-mode:hover .main__item,
.item_result.card-mode:hover .main__item p{
    color: var(--text-color);
}
.item_result:hover{
    background: var(--primary-color);
}
.item_result:hover .main__item,
.item_result:hover .main__item p{
    color: var(--background-color);
}
.item_result .aside__item{
    width: calc(45px - .5rem);
    height: calc(45px - .5rem);
    border-radius: 50%;
    background: var(--background-color);
    border: 1px solid var(--input-border-color);
    overflow: hidden;
}
.item_result .aside__item img{
    width: 100%;
}
.item_result .main__item{
    font-size: calc(var(--font-size-text) - .17rem);
}
.item_result .main__item strong,
.item_result .main__item p{
    font-size: inherit;
}
/***=== Navbar ===***/
.contracts{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.content__contract {
    border: 1px solid var(--input-border-color);
    padding: 1rem;
}
.content__contract strong{
    font-family: var(--font-family-title);
    color: var(--primary-color);
}
.content__contract .profit{
    font-family: var(--font-family-title);
    color: var(--primary-color);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    font-size: calc(var(--font-size-text) + .2rem);
}
.content__contract .profit strong{
    font-size: calc(var(--font-size-text) + .2rem);
    margin-left: .3rem;
}
.content__contract .dashboard__title h3::after{
    display: none;
}
.content__tag{
    display: flex;
    gap: calc(var(--gap) - .5rem);
    flex-wrap: wrap;
    align-items: center;
    margin: .5rem 0;
}
.content__tag .tag{
    border: 1px solid var(--primary-color);
    padding: .1rem .5rem;
    font-size: calc(var(--font-size-text) - .1rem);
}
.content__tag .status__content{
    padding: .1rem .5rem;
    text-transform: uppercase;
    font-size: calc(var(--font-size-text) - .1rem);
    border: 1px solid transparent;
}
/***===Confirmation===***/
.confirmation{
    position: fixed;
    background: #fff;
    top: 50%;
    left: 0;
    right: 0;
    max-width: 350px;
    margin: auto;
    transform: translate(0, -50%);
    padding: 2rem;
    border-radius:.2rem;
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
    z-index: 999;
}
.overlayed-confirmation{
    content: '';
    background: #000;
    opacity: .7;
    position: fixed;
    top: 0;
    left: 0;
    min-height: 100%;
    min-width: 100%;
    z-index: 998;
}
.confirmation .message{
    color: var(--complementary-color);
    font-size: var(--font-size-text);
}
.confirmation .confirmation-options{
    display: flex;
    justify-content: space-around;
}
.confirmation .confirmation-options .btn{
    border-radius: .2rem;
    font-size: calc(var(--font-size-text) - .2rem);
    color: var(--primary-color);
    padding: .7rem 1rem;
}
.confirmation .confirmation-options .btn:nth-child(2){
    background: var(--danger-color);
    color: var(--background-color);
    border: 1px solid var(--danger-color);
}
.confirmation .confirmation-options .btn:nth-child(1):hover{
    background: var(--primary-color);
    color: var(--background-color);
}
.confirmation .confirmation-options .btn:nth-child(2):hover{
    opacity: .8;
}
.confirmation i{
    font-size: 3rem;
    color: var(--danger-color);
}
/***===End confirmation===***/
/***===Navigation===***/
.navigation{
    font-family: var(--font-family-text);
    font-size: var(--font-size-text);
    padding: .5rem 0;
}
.navigation svg{
    max-width: 25px;
}
.navigation nav > div:nth-child(1){
    background: red;
    display: none;
}
.navigation nav > div:nth-child(2) span:nth-child(1){
    display: flex;
    gap: calc(var(--gap) - .8rem);
}
.navigation nav > div:nth-child(2) div:nth-child(1){
    display: none;
}
.navigation nav button,
.navigation nav span[aria-current="page"]{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--background-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.navigation nav span[aria-current="page"]{
    background:var(--primary-color-rgba);
    color: var(--primary-color);
}
/***==Media querys==***/
@media (min-width:998px) {
    .navbar .btn__navbar,
    .navbar .navbar__menu .logo,
    .navbar .navbar__menu .btn__close{
        display: none;
    }
}
@media (max-width:998px) {
    .d-none{
        display: block;
    }
    /***=== Navbar ===***/
    .navbar .navbar__inner> .logo{
        display: none;
    }
    .navbar .navbar__menu .logo{
        position: relative;
        margin: 0;
        padding-bottom: 2rem;
        border-bottom: 1px solid var(--bg-button-primary-color);
        width: 100%;
    }

    .navbar .navbar__inner .navbar__menu{
        flex-direction: column;
        position: fixed;
        background: var(--background-color);
        top: 0;
        left: -100%;
        height: 100%;
        z-index: 9999;
        padding: 3rem 1rem;
        width: calc(100% - 2rem);
        max-width: 400px;
        font-size: calc(var(--font-size-text) - .1rem);
        box-shadow: 2px 3px 21px -1px rgba(0,0,0,0.51);
        transition: all .5s ease-in-out;
    }
    .navbar .navbar__inner .navbar__menu.hidden{
        left: 0;
    }
    .navbar .navbar__inner .navbar__menu .nav__link{
        width: max-content;
        margin-bottom: .5rem;
    }
    .navbar .navbar__inner .navbar__menu .nav__link:hover::before,
    .navbar .navbar__inner .navbar__menu .nav__link.active::before {
        left: 0;
        right: inherit;
    }
    /***=== Footer ===***/
    .footer{
    }
    .footer .footer__inner {
        flex-wrap: wrap;
    }
    .footer .footer__inner .row{
        padding-left: 0;
        width: 50%;
    }
    .footer .footer__inner .row:nth-child(1){
        width: 100%;
    }
    .footer .footer__inner .row .subtitle {
        text-align: left;
    }
    /***=== Dashboard ===***/
    .main__content .main__content__inner .navbar__aside{
        display: none;
    }
}

/**Tablet**/
@media(max-width: 775.98px){
    .section-oauth {
        width: calc(100% - 2rem);
    }
    .section-oauth  .contents-oauth {
        align-items: center;
    }
    .section-oauth  .contents-aside{
        display: none;
    }
    /***=== Dashboard ===***/
    .main__content .content__form .dashboard .dashboard__inner .dashboard__header .dashboard__card{
        width: calc(50% - 1rem);
    }
    .content__form .content__form__inner{
        flex-wrap: wrap;
    }
    .content__form .content__form__inner .content__aside{
        width: 100%;
        max-width: inherit;
        padding: 0;
    }
    .content__table .table__inner {
        overflow-y: scroll;
    }
    .card__preview .content__address{
        width: 100%;
    }
}
/**Phone**/
@media(max-width: 375.98px){
    
}