:root{
    --text-gray: rgb(247, 247, 247);
    --blue: #4080e9;
    --dark-blue: #3675d9;
    --dark-red:#bb0d0d;
    --comfortable-blue:rgb(242, 247, 255);
    --light-blue: #679aec;
    --light-gray: rgb(210, 210, 210);
    --light-blue-for-table: rgb(245, 245, 245);
    --red: #ff4b5c;
    --orange:#e0700e;
    --green: #269a1c;
    --cake-green: #279a1ca4;
    --shadow-green: #96e39c;
    --light-shadow-green:#ebffed;
    --light-orange: #eec7a5;
    --shadow-red: #ffebeb;
    --shadow-fort-red: #ffd7d7;
    --shadow-forty-red: #f7b7b7;
    --shadow-forter-red: #e77d7d;
    --shadow-gray: #afafaf;
    --hover-gray: #dcdcdc;
    --hover-blue: #f1f3ff;
    --hover-light-blue: #eaeeff;
    --turk-btn-blue: #1bb9d5;
    --light-black:#575757;
    --opacity-black:#383838;
    --very-light-black:#747474;
    --very-light-gray: #efefef;
    --very-light-blue: rgb(209, 221, 250);
    --real-shadow:#98989872;
    --input-valid:#f6f6f6ce;
    --input-field: #fafafa;

    --tainted-blue:#3276e2;
    --tainted-dark-blue:#2b67c8;
    --tainted-turk-btn-blue:#249aae;
    --tainted-green: #186c10;
    --tainted-orange: #ad5202;
    --background-blue: #4080e9;
    --background-gray: #e9e9e9;
}
/* === Clases generadas para cada variable === */
.bg-text-gray { background-color: var(--text-gray) !important; }
.text-gray { color: var(--text-gray) !important; }

.bg-blue { background-color: var(--blue) !important; }
.blue { color: var(--blue) !important; }

.bg-dark-blue { background-color: var(--dark-blue) !important; }
.dark-blue { color: var(--dark-blue) !important; }

.bg-dark-red { background-color: var(--dark-red) !important; }
.dark-red { color: var(--dark-red) !important; }

.bg-comfortable-blue { background-color: var(--comfortable-blue) !important; }
.comfortable-blue { color: var(--comfortable-blue) !important; }

.bg-light-blue { background-color: var(--light-blue) !important; }
.light-blue { color: var(--light-blue) !important; }

.bg-light-gray { background-color: var(--light-gray) !important; }
.light-gray { color: var(--light-gray) !important; }

.bg-light-blue-for-table { background-color: var(--light-blue-for-table) !important; }
.light-blue-for-table { color: var(--light-blue-for-table) !important; }

.bg-red { background-color: var(--red) !important; }
.red { color: var(--red) !important; }

.bg-orange { background-color: var(--orange) !important; }
.orange { color: var(--orange) !important; }

.bg-green { background-color: var(--green) !important; }
.green { color: var(--green) !important; }

.bg-cake-green { background-color: var(--cake-green) !important; }
.cake-green { color: var(--cake-green) !important; }

.bg-shadow-green { background-color: var(--shadow-green) !important; }
.shadow-green { color: var(--shadow-green) !important; }

.bg-light-shadow-green { background-color: var(--light-shadow-green) !important; }
.light-shadow-green { color: var(--light-shadow-green) !important; }

.bg-light-orange { background-color: var(--light-orange) !important; }
.light-orange { color: var(--light-orange) !important; }

.bg-shadow-red { background-color: var(--shadow-red) !important; }
.shadow-red { color: var(--shadow-red) !important; }

.bg-shadow-fort-red { background-color: var(--shadow-fort-red) !important; }
.shadow-fort-red { color: var(--shadow-fort-red) !important; }

.bg-shadow-forty-red { background-color: var(--shadow-forty-red) !important; }
.shadow-forty-red { color: var(--shadow-forty-red) !important; }

.bg-shadow-forter-red { background-color: var(--shadow-forter-red) !important; }
.shadow-forter-red { color: var(--shadow-forter-red) !important; }

.bg-shadow-gray { background-color: var(--shadow-gray) !important; }
.shadow-gray { color: var(--shadow-gray) !important; }

.bg-hover-gray { background-color: var(--hover-gray) !important; }
.hover-gray { color: var(--hover-gray) !important; }

.bg-hover-blue { background-color: var(--hover-blue) !important; }
.hover-blue { color: var(--hover-blue) !important; }

.bg-hover-light-blue { background-color: var(--hover-light-blue) !important; }
.hover-light-blue { color: var(--hover-light-blue) !important; }

.bg-turk-btn-blue { background-color: var(--turk-btn-blue) !important; }
.turk-btn-blue { color: var(--turk-btn-blue) !important; }

.bg-light-black { background-color: var(--light-black) !important; }
.light-black { color: var(--light-black) !important; }

.bg-opacity-black { background-color: var(--opacity-black) !important; }
.opacity-black { color: var(--opacity-black) !important; }

.bg-very-light-black { background-color: var(--very-light-black) !important; }
.very-light-black { color: var(--very-light-black) !important; }

.bg-very-light-gray { background-color: var(--very-light-gray) !important; }
.very-light-gray { color: var(--very-light-gray) !important; }

.bg-very-light-blue { background-color: var(--very-light-blue) !important; }
.very-light-blue { color: var(--very-light-blue) !important; }

.bg-real-shadow { background-color: var(--real-shadow) !important; }
.real-shadow { color: var(--real-shadow) !important; }

.bg-input-valid { background-color: var(--input-valid) !important; }
.input-valid { color: var(--input-valid) !important; }

.bg-input-field { background-color: var(--input-field) !important; }

.bg-tainted-blue { background-color: var(--tainted-blue) !important; }
.tainted-blue { color: var(--tainted-blue) !important; }

.bg-tainted-dark-blue { background-color: var(--tainted-dark-blue) !important; }
.tainted-dark-blue { color: var(--tainted-dark-blue) !important; }

.bg-tainted-turk-btn-blue { background-color: var(--tainted-turk-btn-blue) !important; }
.tainted-turk-btn-blue { color: var(--tainted-turk-btn-blue) !important; }

.bg-tainted-green { background-color: var(--tainted-green) !important; }
.tainted-green { color: var(--tainted-green) !important; }

.bg-tainted-orange { background-color: var(--tainted-orange) !important; }
.tainted-orange { color: var(--tainted-orange) !important; }

.bg-background-blue { background-color: var(--background-blue) !important; }
.background-blue { color: var(--background-blue) !important; }

.bg-background-gray { background-color: var(--background-gray) !important; }
.background-gray { color: var(--background-gray) !important; }
.white{
    color: white !important;
}



.material-symbols-outlined {
    font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48
}
@import url('https://fonts.googleapis.com/css2?family=DM+Sans&display=swap');
*{
    box-sizing: border-box !important;
    font-family: 'Roboto', sans-serif;
}
body, html {
    display: contents !important;
    margin: 0;
    overflow: hidden !important;
} 
body {
    transition: opacity 0.2s ease-in;
    
}

a{
    text-decoration: none;
}
ul{
    margin: 0;
    padding: 0;
}

#app{
    /* transform: scale(0.97);
    transform-origin: top left;
    width: 103vw !important; 
    height: 103vh !important; */
    width: 100vw;
    height: 100vh;
    display: flex;
    margin: 0 !important;
}
.contents{
    display: contents !important;
}
/* estilos scrollbar */
::-webkit-scrollbar {
    width: 10px; /* Ancho del scrollbar */
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1; /* Color de fondo del track */
    border-radius: 0.4rem;
}
::-webkit-scrollbar-thumb {
    border-radius: 0.4rem;
    background: #888; /* Color de fondo del thumb */
}
::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color de fondo del thumb al hacer hover */
}
/* estilo de botones */                  
.btn{
    padding: 0.4rem 0.8rem;
    /* min-height: 30.5px !important; */
    /* max-height: 30.5px !important; */
    text-decoration: none;
    border-radius: 0.4rem;
    transition: 0.2s;
    background-color: var(--hover-gray);
    border: none;
    outline: none;
    font-size: 1rem;
    cursor: pointer !important;
    color: var(--light-black);
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn:disabled{
    background-color: var(--hover-blue) !important;
    color: black !important;
    opacity: 0.6 !important;
    box-shadow: 0 0 0.2rem var(--opacity-black);
    cursor: not-allowed !important;
}
.btn:hover, button:hover{
    transition: 0.4s ;
    opacity: 0.7 ;
    /* transform: scale(1.02) ; */
}
.btn-blue{
    background-color: var(--blue);
    color: white !important;
}
.btn-red{
    background-color: var(--red) ;
    color: white;
}
.btn-red:hover{
    background-color: var(--dark-red);
}
.accept-btn{
    color: var(--green);
    padding: 0.3rem;
    transition: 0.1s;
    border-radius: 100%;    border: none;
    background-color: transparent;
}
.accept-btn:hover{
    background-color: var(--green) !important;
    color: white;
    transition: 0.1s;
    opacity: 1 !important;
    transform: scale(1.2);
}
.edit-btn{
    color: var(--blue);
    padding: 0.3rem !important;
    transition: 0.1s;
    border-radius: 100%;
    border: none;
    background-color: transparent;
}
.edit-btn:hover{
    background-color: var(--blue) !important;
    color: white;
    transition: 0.1s;
    transform: scale(1.2);
    opacity: 1 !important;
}
.edit-btn-2{
    color: var(--blue);
    transition: 0.4s;
    border-radius: 0.3rem;
    border: none;
    background-color: white;
    box-shadow: 0 0 0.1rem var(--opacity-black);
}
.edit-btn-2 span{
    font-size: 1.6rem !important;
}
.edit-btn-2:hover{
    background-color: var(--blue) !important;
    color: white !important;
    transition: 0.4s;
    opacity: 1 !important;
    transform: scale(1.05);
}
.delete-btn{
    color: var(--red);    
    padding: 0.3rem;
    transition: 0.1s;
    border-radius: 100%;    
    border: none;
    background-color: transparent;
}
.delete-btn:hover{
    background-color: var(--red) !important;
    color: white;
    transform: scale(1.2);
    opacity: 1 !important;
    transition: 0.1s;
}
.btn-white{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue) !important;
    background-color: white !important;
}
.btn-send-special{
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    background-color: var(--green) !important;
}
.btn-send-special span{
    font-size: 1.2rem;
    margin-left: 0.5rem;
}
.btn-edit-lot{
    background-color: var(--orange) !important;
    color: white !important;
}
.btn-green{
    background-color: var(--green);
    color: white !important;
}
.btn-text-green{
    transition: 0.3s;
    color: white !important;
    background-color: var(--green) !important;
}
.btn-text-normal{
    transition: 0.3s;
    color: black !important;
    background-color: var(--hover-gray) !important;
    margin: 0 1%;
}
.btn-text-green:hover{
    background-color: var(--tainted-green) !important;
    opacity: 1 !important;
    transition: 0.3s;
}
.btn-text-orange{
    transition: 0.3s;
    background-color: var(--orange) !important;
    color: white !important;
}
.btn-text-orange:hover{
    opacity: 1 !important;
    background-color: var(--tainted-orange) !important;
}
.btn-text-blue{
    color: white !important;
    transition: 0.3s;
    background-color: var(--blue) !important;
}
.btn-text-blue:hover{
    transition: 0.3s;
    background-color: var(--tainted-blue) !important;
}
.weight-new{
    font-weight: 300;
}
.container {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden !important;
    position: relative;
    background-color: var(--background-blue);
}
.sidebar {
    overflow-y: auto;
    overflow-x: hidden !important;
    width: 15%;
    max-width: none;
    min-width: 270px;
    height: 86%;
    background-color: var(--background-blue);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: 0.4s;
    padding: 20px 10px 10px 10px;
}
.collapse-sidebar{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    user-select: none;
}
.collapse-sidebar span{
    background-color: white;
    padding: 0.2rem;
    border-radius: 100% ;
    cursor: pointer;
    color: var(--blue);
    font-size: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    /* position: relative; */
}
.collapse-sidebar span:hover{
    transform: scale(1.1);
    transition: 0.2s;
}
#toggle-checkbox{
    display: none;
}
#toggle-checkbox:not(:checked) ~ main .sidebar .list-items .ul .tooltip-text{
    display: none !important;
}
#toggle-checkbox:checked ~ main .sidebar{
    width: 4% !important;
    min-width: 73px !important;
    transition: 0.4s;
    padding: 20px 7px 10px 7px ;
}
#toggle-checkbox:checked ~ main .sidebar .list-items .ul li a p{
    display: none;
}
#toggle-checkbox:checked ~ main .sidebar .inner-list-one{
    transform: translateX(3.5rem) !important;
}
#toggle-checkbox:checked ~ main .sidebar .inner-list-one li a p{
    display: block !important;
}
#toggle-checkbox:checked ~ main .sidebar .toggle-revert-title{
    display: none;
}
#toggle-checkbox:checked ~ main .sidebar .toggle-title{
    display: block;
    text-align: center;
}
#toggle-checkbox:checked ~ main .sidebar .toggle-title::after{
    content: 'G';
    font-size: 1.5rem;
    color: var(--hover-gray);
    text-shadow: none;
}
#toggle-checkbox:checked ~ main .sidebar .logo{
    padding: 0 !important;
}
#toggle-checkbox:checked ~ main .sidebar .disappear-toggle, #toggle-checkbox:checked ~ header .user-button .disappear-toggle{
    display: none !important;
}
#toggle-checkbox:checked ~ header .user-button{
    width: 4% !important;
    min-width: 71px !important;
    left: 0;
}
#toggle-checkbox:checked ~ header .user-button .ub-section{
    padding: 1rem 14% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#toggle-checkbox:checked ~ header .user-button .ub-section img{
    margin: 0 !important;
    position: relative;
}
#toggle-checkbox:checked ~ main .collapse-sidebar span{
    transform: rotate(180deg);
}
#toggle-checkbox:checked ~ main .sidebar .list-items ul li a:hover{
    transform: translateX(-0.1rem) !important;
}
#toggle-checkbox:checked ~ main .sidebar .list-items ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
}
#toggle-checkbox:checked ~ main .sidebar .list-items .inner-list-one li a{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.logo {
    width: 100%;
    height: 15%;
    user-select: none;
    padding-right: 15%;
}
.logo h1{
    color: white;
    margin: 1.5rem 0 0.1rem;
    font-size: 3rem;
    text-align: end;
    font-weight: 100;
    /* text-shadow: 0 0 0.1rem var(--opacity-black); */
}
.logo h4{
    color: var(--light-gray);
    margin: 0.1rem 0;
    font-size: 0.9rem;
    text-align: end;
    font-weight: 100;
    white-space: nowrap;
}
.toggle-title{
    display: none;
}
.list-items {
    width: 100%;
    min-height: 65%;
}
.list-items .ul{
    display: contents;
}
.selected-navpage{
    background-color: white !important;
    border-radius: 0.4rem;
}
.selected-navpage p, .selected-navpage span{
    color: var(--blue) !important;
}
.selected-navpage:hover > li{
    background-color: var(--blue) !important;
}
.list-items ul li{
    list-style: none;
    user-select: none;
    margin: 0.2rem 0;
    padding: 0;
    width: 100%;
    display: flex;
}
.list-items ul li a{
    padding: 1rem 0.7rem;
    width: 100%;
    color: var(--very-light-gray);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: 0.3s;
}
.list-items ul li a:hover{
    color: var(--blue) !important;
    transition: 0.2s;
    transform: translateX(0.5rem);
    border-radius: 0.4rem;
    background-color: white;
}
.list-items ul li a span{
    font-size: 1.5rem;
}
.list-items ul li a p{
    margin: 0;
    font-size: 1rem;
    margin-left: 1rem;
    font-weight: 100;
    white-space: nowrap;
}
.ul li:hover > .inner-list-one{
    display: flex !important;
    opacity: 1;
    transition: 0.3s;
}
.inner-list-one{
    position: absolute;
    display: none !important;
    flex-flow: column;
    background-color: var(--very-light-gray);
    box-shadow: 0 0 0.2rem var(--light-black);
    border-radius: 0.4rem;
    opacity: 0;
    transition: 0.3s;
    transform: translateX(16rem);
    padding: 0;
    margin: 0;
    z-index: 4;
}
.inner-list-one li a p, .inner-list-one li a span{
    color: var(--very-light-black);
}
.inner-list-one li a:hover{
    transform: translateX(0.1rem) !important;
    background-color: var(--very-light-gray) ;
}
.inner-list-one li a:hover > p, .inner-list-one li a:hover > span{
    color: var(--blue) ;
    
}
.user-button {
    min-width: 250px;
    height: 10%;
    position: fixed;
    bottom: 0;
    left: 0.5%;
    z-index: 4;
}
.user-button-menu .ul{
    transition: 0.6s;
    display: block;
    padding: 0;
    transform: translateY(100%);
    position: absolute;
    background-color: white;
    width: 16%;
    top: 0;
    border-radius: 0.4rem 0.4rem 0 0;
    opacity: 0;
    min-width: 250px;
    /* z-index: 4; */
}
.user-button-menu .ul .inner-list-one{
    transform: translateX(10rem);
}
.il2{
    transform: translate(15.5rem, -3.3rem) !important;
}
.user-button-menu{
    display: contents;
}
.user-button-menu ul li{
    list-style: none;
    user-select: none;
    margin: 0;
    padding: 0;
}
.user-button-menu ul li a{
    padding: 0.7rem 1rem;
    width: 100%;
    color: var(--blue);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: 0.3s;
    border-radius: 0.4rem;
}
.user-button-menu ul li a:hover{
    transition: 0.3s;
    background-color: var(--hover-gray);
}
.user-button-logout:hover{
    background-color: var(--shadow-red) !important;
}
.user-button-logout p, .user-button-logout span{
    color: var(--red);
}
.user-button-menu ul li a span{
    font-size: 2rem;
}
.user-button-menu ul li a p{
    margin: 0;
    font-size: 1rem;
    margin-left: 0.4rem;
    font-weight: 100;
}
.ub-section{
    display: flex;
    user-select: none;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;    
    color: white;
    width: 100%;
    padding: 1rem 0.1rem 1rem 1rem;
    transition: 0.2s;
    border-radius: 0.4rem;
}
.ub-section:hover{
    background-color: white;
    transition: 0.1s;
    color: var(--blue);
}
.ub-section img{
    min-width: 3.5rem;
    height: 3.5rem;
    border-radius: 100%;
    object-fit: cover;
    margin-right: 0.5rem;
}
.ub-section p{
    margin: 0;
    font-weight: 500;
    font-size: 1rem;
    text-overflow: ellipsis;
    width: 60%;
}
.ub-section span{
    font-size: 2rem;
}
#user-checkbox{
    display: none;
}
#user-checkbox:checked ~ .user-button-menu .ul{
    opacity: 1;
    transition: 0.4s;
    transform: translate(0, -100%);
}
#user-checkbox:checked ~ .ub-section{
    background-color: white;
    color: var(--blue);
    border-radius: 0 0rem 0.4rem 0.4rem;
    transition: 0.2s;
}
.content {
    flex-grow: 1;
    /* background-color: var(--background-gray); */
    background-color: white;
    padding: 0.5rem;
    width: 85%;
    box-shadow: inset 0 0 0.4rem var(--shadow-gray);
}
.content-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: row nowrap;
    width: 100%;
    height: 5%;
    position: relative;
}
.content-body{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    width: 100%;
    padding-top: 0.8%;
    height: 95% !important;
    /* margin-top: 3%; */
}
.content-body-2{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: row nowrap;
    width: 100%;
    padding-top: 0.8%;
    height: 95% !important;
}
.main-title{
    margin: 0 0.5rem;
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--light-black);
}
.notifications-button{
    padding: 0.6rem;
    background-color: var(--dark-blue);
    border-radius: 100%;
    user-select: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    transition: 0.3s;
    right: 0;
}
.notifications-button:hover{
    transform: scale(1.1);
    transition: 0.2s;
}
.notifications-button:hover > span{
    transform: rotate(20deg);
    transition: 0.2s;
}
.notification-true::before{
    content: 'Tienes avisos nuevos';
    position: absolute;
    width: max-content;
    right: 110%;
    border-radius: 0.4rem;
    color: white;
    font-weight: 600;
    background-color: var(--red);
    padding: 0.4rem 1rem;
}
.notification-true::after{
    content: '';
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 100%;
    background-color: var(--red);
    position: absolute;
    top: -0.2rem;
    right: -0.2rem;
}
.notifications-button span{
    color: white;
    transition: 0.3s;
    font-size: 1.5rem;
    transition: 0.2s;
}

.notifications-section{
    position: absolute;
    top: 100%;
    right: -140%;
    background-color: white;
    padding: 1rem;
    transition: 0.4s;
    border-radius: 0.4rem 0 0.4rem 0.4rem;
    border-top: var(--dark-blue) solid 0.4rem;
    box-shadow: -0.2rem 0.2rem 0.3rem var(--real-shadow);
    width: 35rem;
    opacity: 0;
    z-index: 4;
}
#notification-checkbox{
    display: none;
}
#notification-checkbox:checked ~ .notifications-section{
    right: 0;
    transition: 0.5s;
    opacity: 1;
}
#notification-checkbox:checked ~ .notifications-button{
    border-radius: 100% 100% 0 0 ;
}
.notifications-section h2{
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--dark-blue);
}
.notifications-section h2 b{
    color: var(--red);
}
.notifications-section h2 small{
    font-size: 1.2rem;
}
.notification-subsection{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    overflow: auto;
    max-height: 35rem;
    padding: 0;
    margin: 1rem 0;
}
.notification-subsection a{
    margin-bottom: 0.5rem;
}
.notification-subsection-element{
    background-color: var(--very-light-gray);
    width: 100%;
    padding: 1rem;
    /* margin: 0 0 0.8rem 0; */
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 0.3s;
    flex-flow: row nowrap;
    cursor: pointer;
}
.notification-subsection-element:hover{
    transform: translateX(-0.2rem);
    transition: 0.2s;
    background-color: var(--hover-blue);
}
.notification-subsection-element span{
    width: 3rem;
    height: 3rem;
    background-color: var(--blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    font-size: 2rem;
    /* padding: 0.2rem; */
}
.notification-subsection-element p{
    /* width: 85%; */
    color: var(--dark-blue);
    margin-left: 0.5rem;
}
.notification-subsection-element .content-notification{
    display: flex;
    width: 85%;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
}
.notification-subsection-element .content-notification p{
    margin: 0;
    font-size: 1rem ;
}
.notification-subsection-element .content-notification p:nth-child(2){
    text-decoration: underline !important;
    font-weight: 700;
}
.notification-subsection a{
    text-decoration: none;
    width: 100%;
}
.notification-btn-section{
    float: right;
}
.notification-btn-section .btn{
    /* border: var(--blue) solid; */
    box-shadow: 0 0 0.1rem var(--opacity-black);
    color: var(--blue);
    background-color: white !important;
}
/*HOME COMPONENT*/
.home-component{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-flow: row nowrap;
    width: 100%;
    transition: 0.3s;
    height: 100%;
}
.home-component-section-1 .resume-section{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: stretch;
    flex-flow: column nowrap;
    border-radius: 0.4rem;
    margin: 0 0 0.5rem;
    max-height: 23vh !important;
    height: 23vh !important;
    /* padding: 0 0.5rem; */
}
.home-component-section-1 .resume-section .element{
    background-color: white;
    padding: 0 0.5rem;
    border-radius: 0.4rem;
    width: 100%;
    margin-bottom: 0.5rem;
    /* box-shadow: 0 0 0.1rem var(--very-light-black); */
}
.home-component-section-1 .resume-section .element:last-child{
    width: 100%;
    display: flex;
    border-radius: 0.4rem;
    /* box-shadow: 0 0 0.1rem var(--very-light-black); */
    flex-flow: column nowrap;
    overflow: auto;
    max-height: 14rem;
}
.home-component-section-1 .resume-section .element h3{
    margin: 0;
    font-weight: 400;
    font-size: 1rem;
    color: var(--blue);
}
.home-component-section-1 .resume-section .element p{
    font-size: 1rem;
    margin: 0rem;
}
.home-component-section-1 .resume-section .element .info-section{
    display: flex;
    width: 100%;
    margin: 0.2rem 0;
    justify-content: space-between;
    flex-flow: row nowrap;
}
.home-component-section-1 .resume-section .element .info-section .info-element{
    display: flex;
    width: 31.5%;
    flex-flow: row-reverse nowrap;
    justify-content: space-between;
    align-items: center;
    /* background-color: var(--hover-blue); */
    box-shadow: 0 0 0.1rem var(--opacity-black);
    /* margin: 0.4rem; */
    padding: 0.4rem 0.8rem;
    border-radius: 0.4rem;
    /* width: fit-content; */
}
.home-component-section-1 .resume-section .element .info-section .info-element span{
    font-size: 1.5rem;
    color: var(--blue);
    /* background-color: var(--very-light-blue); */
    /* width: 2.5rem !important; */
    /* height: 2.5rem !important; */
    display: flex;
    font-weight: 800 !important;
    align-items: center;
    border-radius: 100%;
    justify-content: center;
}
.home-component-section-1 .resume-section .element .info-section .info-element p{
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--very-light-black);
    text-align: center;
    /* background-color: var(--very-light-blue); */
    /* padding: 0.2rem 0.7rem; */
    border-radius: 1rem;
    /* margin-top: 0.5rem; */
}
.home-component-section-1 .resume-section .element .hinfo-container{
    display: flex;
    flex-flow: row wrap !important;
    justify-content: space-between;
}
.home-component-section-1 .resume-section .element .horizontal-info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 49%;
    background-color: var(--very-light-gray);
    box-shadow: 0 0 0.1rem var(--light-gray);
    border-radius: 0.4rem;
    padding: 0.8rem 0.8rem;
    margin: 0.4rem 0;
    color: var(--light-black);
}
.home-component-section-1 .resume-section .element .horizontal-info span{
    font-weight: 600;
    font-size: 1.5rem !important;
    margin-left: 1rem;
}
.home-component h2{
    margin:  0.5rem;
    font-size: 1.01rem;
    font-weight: 500;
    color: var(--tainted-dark-blue);
}
.home-component-section-1, .home-component-section-2{
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-flow: column nowrap;
    transition: 0.2s;
}
.home-component-section-1{
    width: 45%;
}
.home-component-section-2{
    width: 54%;
}
.hcs1-filter-section{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 0.5rem 0.5rem;
}
.hcs1-filter-section .input-container{
    margin: 0 !important;
    width: 52%;
}
.hcs1-filter-section input{
    padding:  0.4rem 0.5rem;
    border-radius: 0.2rem;
    outline: none;
    border: none;
    box-shadow: none;
    margin: 0 !important;
    font-size: 1rem;
}
.hcs1-filter-section select{
    padding: 0.32rem 0.5rem;
    border-radius: 0.3rem;
    outline: none;
    border: none;
    font-size: 1rem;
    background-color: var(--input-valid);
    width: 30%;
}
.hcs1-filter-section button{
    width: 15%;
    padding: 0.34rem 0.5rem;
    font-size: 1rem;
    color: white;
    cursor: pointer;
    background-color: var(--turk-btn-blue);
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    transition: 0.4s;
}
.hcs1-directory-section{
    width: 100%;
    padding: 0.1rem 0.5rem 0.5rem 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 85%;
    height: 85%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    border-radius: 1rem;
    /* background-color: var(--very-light-gray); */
}
/* .hcs1-directory-section a{
    transition: 0.2s;
    width: 100%;
    margin-bottom: 0.6rem;
} */
.hcs1-directory-section:hover{
    transition: 0.2s;
}
.hcs1-directory-section .hcs1-ds-item:hover{
    background-color: var(--hover-light-blue);
    /* box-shadow: 0 0 0.2rem var(--very-light-black); */
    transition: 0.2s;
    border-bottom: solid var(--tainted-blue);
}
.hcs1-directory-section .hcs1-ds-item:hover .hcs1-ds-item-subsection{
    background-color: var(--very-light-blue) !important;
    transition: 0.2s;
}
.hcs1-ds-item {
    transition: 0.2s;
    width: 100%;
    padding: 0.5rem 1rem 0.5rem;
    display: flex;  
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    border-radius: 0.4rem;
    background-color: white;
    border-bottom: solid white;
    margin-bottom: 0.7rem;
    box-shadow: 0 0 0.1rem var(--light-black);
}
.hcs1-ds-item p{
    margin: 0.3rem 0;
    font-size: 1rem;
    color: var(--light-black);
}
.hcs1-ds-item h2{
    margin: 0 ;
    font-weight: 700 !important;
}
.hcs1-ds-item h3{
    margin: 0 0 0.6rem 0;
    font-size: 1rem;
    color: var(--tainted-blue);
}
.hcs1-ds-item-section{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.hcs1-ds-item-section .image-container{
    width: 4.5rem;
    min-width: 4.5rem;
    height: 4.5rem;
    margin-right: 0.8rem;
}
/* .hcs1-ds-item-section img{
    width: 4.5rem;
    height: 4.5rem;
    opacity: 1;
    border-radius: 100%;
    object-fit: cover;
    backdrop-filter: none;
    margin-right: 0.5rem;
    border: solid var(--text-gray);
} */
.hcs1-ds-item-subsection:nth-child(2){
    margin-top: 0.4rem;
}
.hcs1-ds-item-subsection{
    width: 100%;
    padding:  0.5rem;
    border-radius: 0.4rem;
    display: flex;
    flex-flow: column nowrap;
    /* background-color: var(--very-light-gray); */
}
.hcs1-ds-item-subsection p{
    margin: 0.2rem 0;
}
.hcs1-ds-i-sb-data{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.hcs1-ds-i-sb-data div{
    width: 98%;
}
.hcs1-ds-item-firstdata{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.hcs1-ds-item-firstdata a{
    text-decoration: underline !important;
}
.hcs1-paginate-section{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: row nowrap;
    width: 100%;
    margin-top: 0.5rem;
    user-select: none;
    padding: 0 0.5rem;
}
.hcs1-paginate-section .paginate, .hcs1-paginate-section .show-quantity{
    display: flex;
    align-items: center;
    justify-content: center;
}
.hcs1-paginate-section .paginate a{
    padding: 0.5rem 1rem;
    height: 3rem;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s;
    border-radius: 0.4rem;
    color: var(--opacity-black);
}
.disabled-paginate {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important ;
}
.disabled-paginate span{
    color: gray !important;
}
.hcs1-paginate-section .paginate a:hover, .hcs1-paginate-section .paginate a:active{
    background-color: var(--hover-light-blue);
    color: var(--blue);
    transition: 0.4s;
}
.hcs1-paginate-section h2{
    margin: 0.5rem 0;
    font-size: 1.01rem;
    font-weight: 500;
    color: var(--tainted-dark-blue);
}
.hcs1-paginate-section .paginate a p{
    margin: 0 1rem;
    cursor: pointer;
    color: var(--blue);
}
.hcs1-paginate-section .paginate a span{
    color: var(--blue);
}
.hcs1-paginate-section .paginate .active a{
    background-color: var(--light-blue) ;
}
.hcs1-paginate-section .paginate .active a p{
    color: white !important;
}
.hcs1-paginate-section .show-quantity select{
    padding: 0.3rem 0.5rem;
    margin-left: 0.5rem;
    box-shadow: 0 0 0.1rem var(--shadow-gray);
    border-radius: 0.3rem;
    outline: none;
    border: none;
    font-size: 1rem;
    border-bottom: solid var(--light-blue);
}
.home-component-section-2 .sectioner{
    display: flex;
    align-items: flex-start;
    padding: 0 0.5rem 0.5rem;
}
.home-component-section-2 .sectioner .browser-tab{
    background-color: var(--very-light-gray);
    padding: 0.3rem 0.5rem;
    margin-right: 0.5rem;
    border-radius: 0.4rem 0.4rem 0 0;
    cursor: pointer;
    transition: 0.2s;
    border-bottom: none !important;
    border: solid rgba(255, 255, 255, 0.899);
    user-select: none;
    box-shadow: 0 0rem 0.2rem var(--shadow-gray);
}
.home-component-section-2 .sectioner .browser-tab:hover{
    transition: 0.2s;
    background-color: var(--hover-gray);
}
.home-component-section-2 .sectioner .browser-tab h2{
    margin: 0;
    font-size: 1rem;
    color: var(--light-black);
    font-weight: 500;
}
.comprobante-father-section{
    max-height: 68vh !important;
    height: 68vh !important;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
}
.comprobant-section{
    width: 100%;
    padding: 0.1rem 0.5rem 0.5rem 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100% !important;
    /* min-height: 15%; */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 0.5rem;
    flex-flow: column nowrap;
}
.comprobant-section .item{
    background-color: white;
    padding: 0.3rem 1rem 0.5rem;
    width: 100%;
    border-radius: 0.4rem;
    transition: 0.2s;
    position: relative;
    margin-bottom: 0.4rem;
    /* white-space: nowrap; */
    /* text-overflow: ellipsis; */
    display: flex;
    justify-content: space-between;
    box-shadow: 0 0 0.1rem var(--very-light-black);
    align-items: flex-end;
}
.comprobant-section .item-2{
    min-height: initial !important;
}
.comprobant-section .item .info-section, .comprobant-section .info-section-two{
    display: flex;
    height: 100%;
    flex-flow: column nowrap;
}
.comprobant-section .item .info-section h2, .comprobant-section .item .info-section-two h2{
    color: var(--blue);
    font-size: 1rem;
}
.comprobant-section .item:hover{
    background-color: var(--hover-light-blue);
    /* box-shadow: 0 0 0.2rem var(--light-black) !important; */
    transition: 0.2s;
}
.comprobant-section .item:hover > .item-btn-section .btn, .home-component-section-2 .solicitud-section .item:hover > .item-btn-section .btn, .comprobant-section .item:hover > .item-kindof{
    background-color: white;
    transition: 0.2s;
}
.comprobant-section .item:hover > .item-btn-section .btn-red{
    color: var(--red) ;
}
.comprobant-section .item:hover > .item-btn-section .btn-blue{
    color: var(--blue) ;
}
.comprobant-section .item:hover > .item-btn-section .btn-green{
    color: var(--green) ;
}
.comprobant-section .item:hover > h2{
    color: var(--dark-blue);
}
.comprobant-section .item p{
    color: var(--light-black);
    margin: 0.2rem 0;
}
.comprobant-section .item h2{
    margin: 0.6rem 0;
    line-height: 1.2rem !important;

}
.comprobant-section .item-btn-section{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 10rem;
    height: 100%;
}
.comprobant-section .item-btn-section .btn{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: var(--hover-gray);
    border: none ;
    border-radius: 100%;
    margin-left: 0.5rem;
}
.comprobant-section .item-btn-section .btn span{
    font-size: 1.5rem;
    padding: 0.5rem;
}
.comprobant-section .item-kindof{
    background-color: var(--hover-blue);
    position: absolute;
    color: var(--dark-blue);
    top: 0rem;
    z-index: 2;
    right: 0;
    padding: 0.3rem 1rem;
    border-radius: 0 0 0 0.5rem;
    user-select: none;
}
.comprobant-section .item-kindof h3{
    margin: 0;
    font-size: 1rem;
}
.home-component-section-2 .solicitud-section{
    width: 100%;
    padding: 0.1rem 0.5rem 0.5rem 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%;
    /* min-height: 20%; */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.home-component-section-2 .solicitud-section .item{
    background-color: white;
    border-radius: 0.4rem;
    padding: 0.5rem 1rem 0.5rem 0.1rem;
    transition: 0.2s;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    height: 6rem;
    margin-bottom: 0.2rem;
}
.home-component-section-2 .solicitud-section .item:hover{
    background-color: var(--hover-light-blue);
    box-shadow: 0 0 0.2rem var(--light-black);
    transition: 0.15s;
}
.home-component-section-2 .solicitud-section .item .item-info p, .home-component-section-2 .solicitud-section .item .item-info-two p{
    margin: 0.3rem 0;
}
.home-component-section-2 .solicitud-section .item .item-info p b{
    color: var(--dark-blue);
    font-weight: 600;
}
.home-component-section-2 .solicitud-section .item .item-info p:first-child{
    font-weight: 600;
    color: var(--light-black);
}
.home-component-section-2 .solicitud-section .item .item-info p:nth-child(2){
    color: var(--dark-blue);
    font-weight: 600;
}
.home-component-section-2 .solicitud-section .item .item-info{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    width: 55%;
}
.home-component-section-2 .solicitud-section .item .item-info-two{
    margin: 0 1rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
}
.home-component-section-2 .solicitud-section .item .item-btn-section{
    display: flex;
    align-items: center;

}
.home-component-section-2 .solicitud-section .item .item-btn-section .btn{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: var(--hover-gray);
    border: none ;
    border-radius: 100%;
}
.home-component-section-2 .solicitud-section .item .item-btn-section .btn span{
    font-size: 1.7rem;
    padding: 0.5rem;
}
.home-component-section-2 .solicitud-section .item .item-info-two p:first-child{
    color: var(--dark-blue);
    font-size: 1.2rem;
}
.home-component-section-2 .solicitud-section .item:hover > .item-btn-section .btn-blue{
    color: var(--blue);
    background-color: white;
}
.progress-container {
    width: 5rem;
    height: 5rem;
    margin-right: 0.5rem;
}
.progress-ring {
    position: relative;
}
.progress-ring__circle {
    stroke-dasharray: 282.74; 
    stroke-dashoffset: 282.74; 
    transition: stroke-dashoffset 0.3s linear; 
    stroke: var(--light-blue);
    fill: white;
}
.progress-ring__value {
    font-size: 1.6rem;
    fill: black;
    dominant-baseline: middle; 
}

/* Herramienta de concentracion */
.initial-title{
    transition: 0.2s;
    font-weight: 600 !important;
    margin:  0.5rem;
    font-size: 1.01rem;
    font-weight: 500;
    color: var(--dark-blue);
}
.initial-title-two{
    transition: 0.2s;
    font-weight: 600 !important;
    margin:  0.5rem 0 !important;
    font-size: 1.01rem;
    font-weight: 500;
    color: var(--dark-blue);
}

/* MI CUENTA COMPONENTE */
.mi-cuenta-component{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    width: 100%;
    transition: 0.3s;
    height: 100%;
}
.user-info{
    display: flex;
}
.user-info .user-info-photo{
    display: flex;
    flex-flow: column nowrap;
}
.user-info .user-info-photo img{
    width: 25rem;
    height: 25rem;
    object-fit: cover;
    border-radius: 0.4rem;
}
.user-info .user-info-photo .btn{
    display: flex;
    align-items: center;
    user-select: none;
    justify-content: center;
    margin-top: 1rem;
    color: var(--blue);
    position: relative;
    border: solid var(--blue);
}
.user-info .user-info-photo .btn span{
    font-size: 1.5rem;
    margin-right: 0.4rem;
    background-color: var(--blue);
    color: white;
    padding: 0.8rem;
    border-radius: 100%;
    position: absolute;
    left: -0.5rem;
}
.user-info .user-info-input{
    display: flex;
    flex-flow: column nowrap;
}

/* AVISOS COMPONENTE */
.advices-component{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-flow: column nowrap;
    width: 100%;
    transition: 0.3s;
    height: 100%;
}
.advices-component .filter-section{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 0.5rem 0.5rem;
}
.advices-component .filter-section input{
    padding: 0.4rem 0.5rem;
    border-radius: 0.2rem;
    outline: none;
    border: none;
    margin: 0 !important;
    font-size: 1rem;
}
.advices-component .filter-section .input-container{
    margin: 0 !important;
    width: 62%;
}
.advices-component .filter-section select{
    padding: 0.32rem 0.5rem;
    border-radius: 0.3rem;
    outline: none;
    border: none;
    font-size: 1rem;
    width: 15%;
}
.advices-component .filter-section button{
    min-width: 10%;
    padding: 0.34rem 0.5rem;
    font-size: 1rem;
    color: white;
    cursor: pointer;
    background-color: var(--turk-btn-blue);
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    transition: 0.4s;
}

.advices-component .filter-section button:hover{
    opacity: 0.8;
    transition: 0.2s;
}
.advices-component .table-section h4{
    margin: 0;
    font-size: 1rem;
    color: var(--blue);
}
.td-description {
    position: relative;
    display: flex;
    flex-flow: column;
}
.description-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3em;
    line-height: 1.2em;
}
.view-more {
    cursor: pointer;
    color: var(--dark-blue);
    text-decoration: underline; 
    background-color: var(--hover-gray);
    border: none;
    width: fit-content;
    user-select: none;
    padding: 0.3rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.9rem;
    margin-top: 0.3rem;
    transition: 0.1s;
}
.view-more:hover{
    background-color: var(--shadow-gray);
    transition: 0.1s;
}
.full-description {
    /* display: none; */
    position: absolute;
    top: 45%;
    left: 21%;
    background-color: white !important;
    font-size: 1.05rem;
    padding: 1rem;
    text-align: justify;
    color: black;
    box-shadow: 0 0 0.3rem var(--opacity-black);
    border-radius: 0.4rem;
    line-height: normal;
    width: auto;
    min-width: 10%;
    max-width: 100%;
    word-wrap: break-word;
    z-index: 100;
    overflow: visible;
    white-space: pre-line;
    /* user-select: all; */
}
.full-description::before {
    content: "";
    position: absolute;
    /* top: 25%; */
    left: -20px;
    top: 1rem;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.8rem 1.3rem 0.8rem 0;
    border-color: transparent var(--opacity-black) transparent transparent;
}
.full-description2{
    position: absolute;
    top: 0%;
    left: 11rem;
    background-color: white !important;
    font-size: 1.05rem;
    padding: 1rem;
    text-align: justify;
    color: black;
    box-shadow: 0 0 0.3rem var(--opacity-black);
    border-radius: 0.4rem;
    line-height: normal;
    width: 35rem;
    word-wrap: break-word;
    z-index: 100;
    overflow-y: auto !important;
    overflow-x: hidden;
    white-space: pre-line;
    max-height: 40rem;
}
.full-description2 ul{
    list-style: none !important;
}
.full-description2::before {
    content: "";
    position: absolute;
    /* top: 25%; */
    left: -20px;
    top: 1rem;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.8rem 1.3rem 0.8rem 0;
    border-color: transparent var(--opacity-black) transparent transparent;
}
/* Datos del consejo */
.data-consejo-component{
    display: flex;
    align-items: flex-start;
    flex-flow: column nowrap;
    width: 100%;
    height: 100%;
}
.data-consejo-component .main-element{
    width: 100%;
    padding: 0.3rem;
    height: 100%;
}
.data-consejo-component .main-element .sectioner{
    display: flex;
    align-items: flex-start;
    padding: 0;
}
.data-consejo-component .main-element .sectioner .browser-tab{
    background-color: var(--very-light-gray);
    padding: 0.3rem 0.5rem;
    margin-right: 0.5rem;
    border-radius: 0.4rem 0.4rem 0 0;
    cursor: pointer;
    transition: 0.2s;
    border-bottom: none !important;
    border: solid rgba(255, 255, 255, 0.916);
    user-select: none;
    box-shadow: 0 -0.1rem 0.2rem var(--shadow-gray);
}
.data-consejo-component .main-element .sectioner .browser-tab h2{
    margin: 0;
    font-size: 1rem;
    color: var(--light-black);
    font-weight: 500;
}
.data-consejo-component .main-element .sectioner .browser-tab:hover{
    transition: 0.2s;
    background-color: var(--hover-gray);
}
.data-consejo-component .main-element .flow-container{
    width: 100%;
    background-color: white;
    display: flex;
    flex-flow: column nowrap;
    padding: 1rem;
    position: relative;
    border-radius: 0 0.4rem 0.4rem 0.4rem ;
    box-shadow: 0 0 0.2rem var(--shadow-gray);
    height: 92%;
    overflow-y: auto;
}
.data-consejo-component .main-element .flow-container p{
    margin: 0;
    color: var(--blue);
}
.data-consejo-component .main-element .flow-container .inputs-content{
    display: flex;
    flex-flow: column nowrap;
    padding: 0;
}
.data-consejo-component .main-element .flow-container .inputs-content .input-apartment{
    display: flex;
    justify-content: space-between;
    border-block-end-width: 100%;
}
.data-consejo-component .main-element .flow-container .inputs-content .input-apartment .input-subapartment{
    width: 48.5%;
}
.data-consejo-component .main-element .flow-container .inputs-content label{
    color: var(--opacity-black);
    font-size: 1rem;
    
}
.data-consejo-component .main-element .flow-container .inputs-content select{
    display: block;
    border: none;
    padding:  0.5rem 0.8rem;
    outline: none;
    border-radius: 0.3rem;
    width: 100%;
    font-size: 1rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    margin: 0;
    transition: 0.2s;
    color: var(--light-black);
}
.colored-input-container {
    padding: 0.8rem 1.1rem;
    box-shadow: 0 0.05rem 0.4rem rgba(0, 0, 0, 0.194);
    border-radius: 0.5rem;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    margin-bottom: 1rem;
    transition: 0.3s;
}
.colored-input-container:hover, .colored-input-container:focus{
    transition: 0.4s;
    box-shadow: 0 0.05rem 0.4rem rgba(0, 0, 0, 0.26);
    background-color: #fff6e7;
}
.colored-input-container .btn-group{
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-flow: row nowrap !important;
}
.two-inputs-container, .three-inputs-container, .three-diff-inputs-container, .two-diff-inputs-container, .two-diffinv-inputs-container, .four-inputs-container, .four-diff-inputs-container, .three-diffinv-inputs-container, .two-differ-inputs-container, .two-differinv-inputs-container, .three-differ-inputs-container{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-flow: row nowrap;
    width: 100%;
    margin: 0.1rem 0;

}
.colored-input-container .element{
    margin: 1% 0;
}
.colored-input-container .element .indications{
    /* background-color: white; */
    color: var(--blue);
    /* text-align: center; */
    width: 100%;
    /* padding: 1rem 0; */
    margin: 0;
    /* border-radius: 1rem; */
}
.two-inputs-container .element label, .three-inputs-container .element label,.three-diff-inputs-container label , .two-diff-inputs-container .element label, .two-diffinv-inputs-container .element label, .four-inputs-container .element label, .four-diff-inputs-container .element label, .three-diffinv-inputs-container label, .two-differ-inputs-container label, .two-differinv-inputs-container label, .three-differ-inputs-container label{
    font-size: 0.95rem;
    /* font-weight: 600; */
    color: var(--light-black);
}
.two-inputs-container .element{
    width: 49% !important;
}
.three-inputs-container .element{
    width: 32% !important;
}
.three-diff-inputs-container .element:first-child, .three-diff-inputs-container .element:nth-child(2){
    width: 23.3% !important;
}
.three-diff-inputs-container .element:nth-child(3){
    width: 49%;
}
.three-diffinv-inputs-container .element:first-child{
    width: 49%;
}
.three-diffinv-inputs-container .element:nth-child(3), .three-diffinv-inputs-container .element:nth-child(2){
    width: 23.3% !important;
}

.three-differ-inputs-container .element:first-child{
    width: 8% !important;
}
.three-differ-inputs-container .element:nth-child(2){
    width: 39% !important;
}
.three-differ-inputs-container .element:nth-child(3){
    width: 49% !important;
}

.two-diff-inputs-container .element:first-child{
    width: 66% !important;
}
.two-diff-inputs-container .element:nth-child(2){
    width: 32% !important;
}
.two-diffinv-inputs-container .element:first-child{
    width: 32% !important;
}
.two-diffinv-inputs-container .element:nth-child(2){
    width: 66% !important;
}
.two-differ-inputs-container .element:first-child{
    width: 23.3% !important;
}
.two-differ-inputs-container .element:nth-child(2){
    width: 74.5% !important;
}
.two-differinv-inputs-container .element:first-child{
    width: 74.5% !important;
}
.two-differinv-inputs-container .element:nth-child(2){
    width: 23.3% !important;
}
.four-inputs-container .element{
    width: 23.3% !important;
}
.four-diff-inputs-container .element:first-child{
    width: 8% !important;
}
.four-diff-inputs-container .element:nth-child(2){
    width: 39% !important;
}
.four-diff-inputs-container .element:nth-child(3), .four-diff-inputs-container .element:nth-child(4){
    width: 23.33% !important;
}
.hr-only-margin{
    border: none !important;
    margin: 0.2rem 0;
}
.data-consejo-component .main-element .flow-container .inputs-content .btn-section{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: row nowrap;
    padding: 0.5rem 0;
    margin-top: 1rem ;
    user-select: none;
}
.data-consejo-component .main-element .flow-container .inputs-content .btn-section button{
    border-radius: 0.4rem;
    background-color: var(--green);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    transition: 0.3s;
    border: none;
}
.data-consejo-component .main-element .flow-container .inputs-content .btn-section button:hover{
    background-color: var(--tainted-green);
    color: var(--very-light-gray);
    transition: 0.3s;
}
.data-consejo-component .main-element .flow-container .inputs-content .btn-section button span{
    margin-right: 0.4rem;
    font-size: 1.5rem;
}
.browser-tab-active{
    background-color: white !important;
    box-shadow: 0 0rem 0.2rem var(--shadow-gray) !important;
}
.browser-tab-active h2{
    color: var(--blue) !important;
}
.input-container {
    position: relative;
    margin: 0.5rem 0;
    border-radius: 0.4rem;
    display: flex;
    color: var(--black-2) !important;
}
.input-container .searcher-special{
    position: absolute;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    border-radius: 0 0 0.4rem 0.4rem;
    background-color: transparent !important;
    top: 100%;
    overflow: auto;
    height: auto;
    z-index: 100;
    max-height: 13rem;
}
.input-container .searcher-special input{
    width: 100%;
    border: none;
    background-color: white;
    padding: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    box-shadow: 0 0 0.1rem var(--opacity-black);
}
.input-container .searcher-special input:last-child{
    border-radius: 0 0 0.4rem 0.4rem;
}
.input-container .searcher-special input:hover{
    background-color: var(--hover-light-blue);
    transition: 0.3s;
}
.input-field {
    display: block;
    position: relative;
    border: none;
    padding:  0.5rem 0.8rem;
    outline: none;
    border-radius: 0.3rem;
    width: 100%;
    font-size: 1rem;
    box-shadow: 0 0 0.1rem var(--opacity-black) !important;
    margin: 0;
    transition: 0.2s;
    color: var(--light-black);
    background-color: var(--input-valid);
}
.input-field-textarea {
    display: block;
    border: none;
    padding:  0.5rem 0.8rem;
    outline: none;
    border-radius: 0.3rem;
    width: 100%;
    min-height: 5rem;
    height: 8rem;
    max-height: 30rem;
    font-size: 1rem;
    box-shadow: 0 0 0.1rem var(--opacity-black) !important;
    margin: 0;
    transition: 0.2s;
    color: var(--light-black);
    background-color: var(--input-valid);

}
.input-field:focus, select:focus{
    background-color: var(--text-gray) !important;
    transition: 0.2s;
    color: black !important;
    box-shadow: 0 0 0.15rem var(--very-light-black) !important;
}
.input-field::placeholder{
    text-transform: none !important;
}
.input-field:disabled{
    background-color: var(--hover-gray) !important;
    cursor: not-allowed;
}
.underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0.2rem !important;
    min-height: 0.2rem;
    background-color: var(--blue);
    border-radius: 0.4rem;
    transition: all 0.5s ease-in-out;
}
.input-field:focus + .underline {
    width: 100%;
}
.switch-text{
    margin: 1rem 0 0.1rem !important;

}
.inter-text{
    margin: 1rem 0 !important;
}
.inner-text{
    margin: 1.2rem 0 1rem 0 !important;
    text-align: start !important;
}
.tbs2{
    padding: 1rem;
    border-radius: 0.4rem;
    min-height: 10rem;
}
.tbs2 tr:first-child{
    height: auto !important;
}
.tbs2 tr{
    height: 5rem;
}
.data-consejo-component .main-element .flow-container .btn-add-special{
    right: 1.4rem;
    position: absolute;
    color: white;
    padding: 0.1rem 0 0.1rem 0.6rem !important;
}
.data-consejo-component .main-element .flow-container .btn-add-special span{
    font-size: 2rem;
    position: relative;
    margin: 0 0.2rem ;
}
/* componente de documentacion */
.documentacion-component{
    display: flex;
    align-items: flex-start;
    flex-flow: column nowrap;
    width: 100%;
    height: 100%;
}
.documentacion-component .filter-section{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 0.5rem 0.5rem;
}
.documentacion-component .filter-section input{
    padding: 0.4rem 0.5rem;
    border-radius: 0.2rem;
    outline: none;
    border: none;
    box-shadow: none;
    margin: 0 !important;
    font-size: 1rem;
    width: 100%;
}
.documentacion-component .filter-section select{
    padding: 0.32rem 0.5rem;
    border-radius: 0.3rem;
    outline: none;
    border: none;
    font-size: 1rem;
    width: 14%;
}
.documentacion-component .filter-section button{
    min-width: 8%;
    padding: 0.34rem 0.5rem;
    font-size: 1rem;
    color: white;
    cursor: pointer;
    background-color: var(--turk-btn-blue);
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    transition: 0.4s;
}

.documentacion-component .filter-section .input-container{
    margin: 0;
    width: 50%;
}
.documentacion-component .documents-container{
    width: 100%;
    padding: 0.5rem;
    display: grid;
    grid-template-columns: repeat(2, 49.9%);
    grid-gap: 0% 0.5%;
    /* overflow-y: auto; */
    /* overflow-x: hidden; */
}
.documentacion-component .documents-container .element{
    background-color: white;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    padding: 0.7rem 0.8rem;
    border-radius: 0.4rem;
    transition: 0.3s;
    margin-bottom: 0.6rem;
    min-height: 10rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
}
.documentacion-component .documents-container .element:hover{
    background-color: var(--hover-light-blue);
    /* box-shadow: 0 0 0.2rem var(--light-black); */
    transition: 0.3s;
}
.documentacion-component .documents-container .element:hover > p{
    color: black;
}
.documentacion-component .documents-container .element h2{
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--opacity-black);
}
.documentacion-component .documents-container .element h3{
    font-size: 0.94rem;
    margin: 0.5rem 0 0.2rem 0;
    font-weight: 600;
    color: var(--light-black);
}
.documentacion-component .documents-container .element p{
    font-size: 1rem;
    color: var(--light-black);
    margin: 0.3rem 0;
    text-align: justify;
}
.documentacion-component .documents-container .element .table-btn{
    margin-top: 1rem;
}
.table-btn-n{
    margin: 0 !important;
}
.table-btn-n button{
    margin: 0 0 0 0.7rem !important;
    box-shadow: 0 0 0.15rem var(--opacity-black) !important;
}
.title-dude{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.title-dude-center{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.obligatory-selected{
    background-color: var(--shadow-red) !important;
    color: var(--dark-red) !important;
    box-shadow: 0 0 0.1rem var(--red) !important;
}
/* Especialidades componente */
.especialidades-component{
    display: flex;
    align-items: flex-start;
    flex-flow: column nowrap;
    width: 100%;
    height: 100%;
}
.especialidades-component .filter-section{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0 0.5rem 0.5rem;
}
.especialidades-component .filter-section button{
    min-width: 8%;
    padding: 0.34rem 0.5rem;
    font-size: 1rem;
    color: white;
    cursor: pointer;
    background-color: var(--turk-btn-blue);
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    transition: 0.4s;
}

.especialidades-component .table-section{
    height: 100%;
}
/* Puntaje componente */
.puntaje-component{
    display: flex;
    align-items: flex-start;
    flex-flow: column nowrap;
    width: 100%;
    height: 100%;
}
.puntaje-component .filter-section{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 0.5rem 0.5rem;
}
.puntaje-component .filter-section .input-container{
    margin: 0 !important;
    width: 80.2%;
}
.puntaje-component .filter-section select{
    padding: 0.32rem 0.5rem;
    border-radius: 0.3rem;
    outline: none;
    border: none;
    font-size: 1rem;
    width: 12%;
}
.puntaje-component .filter-section button{
    min-width: 8%;
    padding: 0.34rem 0.5rem;
    font-size: 1rem;
    color: white;
    cursor: pointer;
    background-color: var(--turk-btn-blue);
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    transition: 0.4s;
}
.puntaje-component .table-section{
    height: 100%;
    display: flex;
    flex-flow: column;
    padding: 0rem 0.5rem;
}
.puntaje-component .table-section .capitulo-container{
    width: 100%;
    display: flex;
    border-radius: 0.4rem;
    margin-bottom: 0.6rem;
    align-items: flex-start;
    justify-content: space-between;
}
.puntaje-component .table-section .capitulo-container .btn{
    background-color: white;
}
.puntaje-component .table-section .capitulo-container h2{
    margin:  0;
    font-size: 1.1rem;
    color: var(--blue);
}
.puntaje-component .table-section .capitulo-container h3{
    margin: 0.5rem 0;
    font-size: 1rem;
}
.puntaje-component .table-section .capitulo-container p{
    margin: 0.5rem 0;
    text-align: justify;
}
.puntaje-component .table-section .capitulo-container .section-2, .puntaje-component .table-section .capitulo-container .section-1{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    height: 15rem;
    max-height: 15rem;
}
.puntaje-component .table-section .capitulo-container .section-2{
    width: 40%;
    border-radius: 0.2rem;
    /* border-right: solid var(--hover-gray); */
    /* padding: 0.5rem 1.5rem 0.5rem 0.5rem; */
    display: flex;
    flex-flow: column nowrap;
}
.puntaje-component .table-section .capitulo-container .section-1{
    width: 57%;
    /* padding: 0.5rem; */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.puntaje-component .table-section .capitulo-container .section-2 h3{
    margin: 1rem 0 0.5rem;
    font-weight: 500;
    color: var(--opacity-black);
}
.puntaje-component .table-section .capitulo-container .section-2 .obligatory{
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem var(--light-black);
    background-color: var(--text-gray);
    padding: 0.4rem 0.5rem;
}
.puntaje-component .table-section .capitulo-container .section-2 .btn-section{
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}
.puntaje-component .table-section .capitulo-container .section-2 .puntaje-section{
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-flow: column nowrap;
    overflow: auto;
    padding: 0.2rem;
}
.puntaje-component .table-section .capitulo-container .section-2 .puntaje-section .element{
    display: flex;
    padding: 0.4rem;
    align-items: center;
    justify-content: flex-start;
    flex-flow: row nowrap;
    /* margin: 0.5rem 0; */
    color: var(--light-black);
    width: 100%;
    border-radius: 0.4rem;
    background-color: rgba(255, 255, 255, 0.648);
    box-shadow: 0 0 0.1rem var(--light-black);
    margin: 0 0 0.45rem 0;
    /* margin-right: 1rem; */
}
.puntaje-component .table-section .capitulo-container .section-2 .puntaje-section .element h4{
    text-align: center;
    font-size: 1.5rem;
    margin: 0;
    padding-right: 0.5rem;
    border-radius: 0.4rem;
}
.puntaje-component .table-section .capitulo-container .section-2 .puntaje-section .element h4 b{
    font-size: 1rem;
}
.puntaje-component .table-section .capitulo-container .section-2 .puntaje-section .element p{
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    color: var(--very-light-black);
}

.puntaje-component .table-section .capitulo-container .section-2 .title-btn h2{
    margin: 0 !important;
}
.puntaje-component .table-section .capitulo-container .section-2 .title-btn{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0.5rem;
}
.puntaje-component .table-section .capitulo-container .section-1 .element-container{
    display: grid;
    grid-template-columns: repeat(2, 49%);
    grid-gap: 0% 2%;
    width: 100%;
    padding: 0.5rem;
    border-radius: 0.4rem;
    margin-bottom: 0.5rem;
    transition: 0.2s;
    background-color: white;
    box-shadow: 0 0 0.1rem var(--light-black);
    overflow: auto;
}
.puntaje-component .table-section .capitulo-container .section-2 .btn-section .btn:hover{
    transition: 0.3s;
    background-color: var(--tainted-dark-blue);
}
.puntaje-component .table-section .capitulo-container .section-1 .btn:hover{
    background-color: var(--tainted-green) !important;
    transition: 0.3s;
}
/* .puntaje-component .table-section .capitulo-container:hover{
    background-color: var(--hover-light-blue) !important;
    box-shadow: 0 0 0.2rem var(--very-light-black);
    transition: 0.2s;
} */

.puntaje-component .table-section .capitulo-container .section-1 .element-container .element{
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding: 0rem 0.5rem;
    color: var(--light-black);
    min-height: 3.5rem;
}
.puntaje-component .table-section .capitulo-container .section-1 .element-container .element:hover{
    background-color: var(--hover-gray);
    border-radius: 0.4rem;
    transition: 0.2s;
}
.puntaje-component .table-section .capitulo-container .section-1 .element-container .element button{
    margin: 0 0 0.2rem 0 !important;
}
.puntaje-component .table-section .capitulo-container .section-1 .element-container .element .table-btn{
    margin-left: 1rem;
}
.tooltip-text-btn-little{
    transform: translate(-2.5rem, 0) !important;
    text-align: end !important;
    right: 0;
}
.directory-component{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-flow: column nowrap;
    width: 100%;
    height: 100%;
    /* padding-bottom: 0.5rem; */
}
.directory-component .sectioner{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-flow: row-reverse nowrap;
    width: 100%;
    height: 100%;
}
.directory-component .table-section-container{
    width: 82%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    padding: 0;
    background-color: white;
    border-radius: 0.4rem;
    padding: 0.8rem;
    box-shadow: 0 0 0.1rem var(--very-light-black);
}
.directory-component .table-section-container .title-btn{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /* margin-bottom: 0.5rem; */
}
.directory-component .table-section-container .title-btn .btn{
    padding: 0.2rem 0.6rem 0.2rem 0.4rem;
    margin-right: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    box-shadow: 0 0 0.1rem var(--opacity-black);
}
.directory-component .table-section-container .title-btn .btn span{
    margin-right: 0.4rem;
}
.directory-component .table-section-container .title-btn .first-section{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}
.directory-component .table-section-container .title-btn .first-section label{
    margin-right: 1rem;
    padding-left: 0.4rem;
    user-select: none;
    font-size: 1rem;
    color: var(--light-black);
}
.directory-component .table-section-container .title-btn .btn-text-blue{
    margin: 0 !important;
    box-shadow: none;
}
.directory-component .table-section-container .table-section{
    height: 100%;
    width: 100%;
    border-radius: 0.4rem;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column;
}
.directory-component .table-section-container .table-section .element{
    /* background-color: var(--very-light-gray); */
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    margin: 0;
    border-radius: 0.4rem;
    transition: 0.3s;
    box-shadow: 0 0 0.1rem var(--opacity-black);
}
.directory-component .table-section-container .table-section .element:hover > .bottom-part{
    /* border-top: 0.1rem solid var(--shadow-gray); */
    transition: 0.3s;
}
.directory-component .table-section-container .table-section .element:hover{
    background-color: var(--hover-light-blue);
    transition: 0.2s;
}
.directory-component .table-section-container .table-section .element .top-part{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.8rem 0.8rem 0.5rem;
    width: 100%;
}
.directory-component .table-section-container .table-section .element .top-part .photo-name-section{
    display: flex;
    width: 44%;
}
.directory-component .table-section-container .table-section .element .top-part .name-section{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    margin-left: 0.8rem;
}
.directory-component .table-section-container .table-section .element .top-part .name-section a{
    color: var(--blue);
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
}
.directory-component .table-section-container .table-section .element .top-part .name-section a:hover{
    text-decoration: underline !important;
    transition: 0.3s;
}
.directory-component .table-section-container .table-section .element .top-part .name-section p{
    margin: 0 0 0.3rem 0;
    color: var(--very-light-black);
    font-weight: 600;
    font-size: 0.9rem;
    /* user-select: all; */
}
.directory-component .table-section-container .table-section .element .top-part .photo-input-section{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: row nowrap;
    /* width: 5.5rem; */
}
.directory-component .table-section-container .table-section .element .top-part .progress-bar-section{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    /* width: 20%; */
}
.directory-component .table-section-container .table-section .element .top-part .general-section{
    display: flex;
    flex-flow: column nowrap;
    width: fit-content;
    padding: 0 0.4rem;
    width: 25%;
}
.directory-component .table-section-container .table-section .element .top-part .general-section:last-child p b{
    border-radius: 1rem;
    margin-right: 0.2rem;
    padding: 0.1rem 0.1rem 0.1rem 0.5rem;
}
.directory-component .table-section-container .table-section .element .top-part .general-section p, .directory-component .table-section-container .table-section .element .top-part .progress-bar-section p{
    color: var(--opacity-black);
    margin: 0 0 0.5rem 0;
    /* user-select: all; */
    font-size: 1rem;
    cursor: text;
}
.directory-component .table-section-container .table-section label{
    width: 100%;
    margin: 0.4rem 0;
}
.directory-component .table-section-container .table-section .element .top-part .general-section p b{
    color: var(--very-light-black);
    font-size: 1rem;
    user-select: none;
}
.directory-component .table-section-container .table-section .element .bottom-part{
    display: flex;
    /* width: 98%; */
    margin: 0 1%;
    padding: 0.1rem 0 0.8rem;
    /* border-top: solid 0.1rem var(--shadow-gray); */
    flex-flow: column nowrap;
}
.directory-component .table-section-container .table-section .element .bottom-part-link{
    margin: 0.3rem 1rem 0.5rem 3.5rem;
    text-decoration: underline;
    width: fit-content;
}
.directory-component .table-section-container .table-section .element .bottom-part .sub-info{
    display: flex;
    flex-flow: column nowrap;
    box-shadow: none !important;
    justify-content: space-between;
    position: relative;
    /* padding: 0.4rem 0.4rem; */
    border-radius: 0.2rem;
    /* border-right: solid var(--green) 0.8rem; */
    /* background-color: var(--very-light-gray); */
}
.directory-component .table-section-container .table-section .element .bottom-part .sub-info:nth-child(2){
    margin-top: 0.6rem !important;
}

.directory-component .table-section-container .table-section .element .bottom-part .sub-info h2, .directory-component .table-section-container .table-section .element .bottom-part .sub-info p{
    margin: 0;
    font-size: 1rem;
}
.directory-component .table-section-container .table-section .element .bottom-part .sub-info h2{
    color: var(--blue);
    /* width: 25%; */
    font-weight: 400;
}
.directory-component .table-section-container .table-section .element .bottom-part .sub-info .table-btn .vigency{
    /* font-weight: 800 !important; */
    background-color: var(--green) ;
    color: white !important;
    font-size: 1rem !important;
    display: flex;
    padding: 0.2rem 0.6rem;
    align-items: center;
    justify-content: flex-start;
    border-radius: 1rem;
    margin-right: 0.6rem;
}
.vigency-green {
    color: var(--green) !important;
    /* font-weight: 600; */
    display: flex;
    align-items: center;
    /* padding: 0.2rem 0.8rem;
    box-shadow: 0 0 0.1rem var(--green);
    background-color: var(--shadow-green); */
}
.vigency-orange {
    color: var(--orange) !important;
    /* font-weight: 600; */
    display: flex;
    align-items: center;
    /* padding: 0.2rem 0.8rem;
    box-shadow: 0 0 0.1rem var(--tainted-orange);
    background-color: var(--light-orange); */
}
.vigency-red {
    color: var(--red) !important;
    /* font-weight: 600; */
    display: flex;
    align-items: center;
    /* padding: 0.2rem 0.8rem;
    box-shadow: 0 0 0.1rem var(--dark-red);
    background-color: var(--shadow-forty-red); */
}
.vigency-blue {
    color: var(--blue) !important;
    /* font-weight: 600; */
    /* display: flex;
    align-items: center; */
    /* padding: 0.2rem 0.8rem;
    box-shadow: 0 0 0.1rem var(--dark-red);
    background-color: var(--shadow-forty-red); */
}
.vigency-green span, .vigency-red span, .vigency-orange span{
    font-size: 1rem;
}
.directory-component .table-section-container .table-section .element .bottom-part .sub-info .situation{
    color: var(--dark-blue);
}
.directory-component .table-section-container .table-section .element .bottom-part .sub-info .sub-info-div{
    padding: 0.4rem;
    border-radius: 0.4rem;
    /* box-shadow: 0 0 0.1rem var(--opacity-black); */
    justify-content: space-between;
    display: flex;
    align-items: stretch;
    width: 100%;
    position: relative;
}
.directory-component .table-section-container .table-section .element .bottom-part .sub-info .sub-info-div.sub-info-active::after{
    content: 'Solicitud activa';
    position: absolute;
    top: -20%;
    right: 0;
    font-weight: 500;
    font-size: 0.89rem !important;
    background-color: var(--green);
    padding: 0.1rem 0.4rem;
    border-radius: 0.3rem 0.3rem 0 0.3rem;
    color: white;
}
.directory-component .table-section-container .table-section .element .bottom-part .sub-info .sub-info-div.sub-info-active p{
    width: 24%;
    background-color: white;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    padding: 0.2rem 0.6rem;
    margin: 0.2rem 0.4rem 0.2rem 0;
    border-radius: 1rem;
    /* color: var(--light-black); */
    color: var(--opacity-black);
    transition: 0.1s;
    font-size: 0.9rem;
    font-weight: 400;
}
.directory-component .table-section-container .table-section .element .bottom-part .sub-info .sub-info-active{
    background-color: var(--light-shadow-green) !important;
    box-shadow: 0 0 0.1rem var(--green);
    position: relative;
    z-index: 1;
    margin: 0.3rem 0 0;

}
.directory-component .table-section-container .table-section .element .bottom-part .sub-info .sub-info-historic{
    background-color: white !important;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    padding: 1rem;
    border-right: solid var(--green) 0.4rem;
    position: absolute;
    display: flex;
    flex-flow: column nowrap;
    z-index: 2;
    width: auto !important;
    margin-left: 1.4rem;
}
.directory-component .table-section-container .table-section .element .bottom-part .sub-info .sub-info-historic::before{
    content: "";
    position: absolute;
    /* top: 25%; */
    left: -20px;
    top: 1rem;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.8rem 1.3rem 0.8rem 0;
    border-color: transparent var(--opacity-black) transparent transparent;
}
.internal-for-abs{
    width: 100%;
    display: flex;
    position: relative;
    margin: 0.3rem 0 !important;
}
.internal-for-abs h2{
    position: relative;
}
.directory-component .table-section-container .table-section .element .bottom-part .sub-info .sub-info-div.sub-info-historic p{
    margin: 0.2rem 0.4rem 0.2rem 0;
    border-radius: 1rem;
    color: var(--opacity-black);
    transition: 0.1s;
    cursor: text;
    font-weight: 400;
    width: 100% !important;
}
.directory-component .table-section-container .table-section .element .bottom-part .sub-info .sub-info-div.sub-info-historic p b{
    color: var(--very-light-black) !important;
}

.directory-component .filter-section{
    width: 17.1%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    background-color: white;
    border-radius: 0.4rem;
    /* padding: 0.8rem; */
    /* box-shadow: 0 0 0.1rem var(--very-light-black); */
}
.directory-component .filter-section h2{
    margin: 0 0 0.8rem 0;
    font-size: 1rem;
    /* background-color: var(--light-blue); */
    /* border-radius: 0.4rem; */
    padding: 0.3rem 0;
    font-weight: 400;
    /* text-align: center; */
    /* color: white; */
    color: var(--blue);
    border-bottom: solid 0.2rem var(--very-light-blue);
}
.directory-component .filter-section h4{
    padding: 0;
    margin: 0.1rem 0 0.7rem;
}
.directory-component .filter-section .input-container{
    margin: 0.6rem 0;
}
.directory-component .filter-section label{
    color: var(--light-black);
    font-size: 0.93rem;
    font-weight: 600;
}
.directory-component .filter-section p{
    /* color: var(--dark-blue); */
    margin: 0.5rem 0;
    font-weight: 500;
    text-align: center;
    font-size: 1rem;
}
.directory-component .filter-section select{
    display: block;
    border: none;
    padding: 0.5rem 0.8rem;
    outline: none;
    border-radius: 0.3rem;
    width: 100%;
    font-size: 1rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    margin: 0;
    transition: 0.2s;
    color: var(--light-black);
    margin: 0.6rem 0;
}
.directory-component .filter-section button{
    width: 100%;
    padding: 0.34rem 0.5rem;
    font-size: 1rem;
    color: white;
    cursor: pointer;
    background-color: var(--turk-btn-blue);
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    transition: 0.4s;
    margin-top: 1rem;
}
.directory-component .filter-section .hcs1-paginate-section{
    flex-flow: column nowrap;
}
.directory-component .filter-section .hcs1-paginate-section .paginate span{
    box-shadow: 0 0 0.1rem var(--light-black);
}
.directory-component .filter-section .hcs1-paginate-section .paginate a p{
    width: 3rem;
}
.directory-component .filter-section .hcs1-paginate-section .show-quantity{
    width: 100%;
}
.new-register-component{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    width: 100%;
    height: 100%;
}
.new-register-component .filter-section{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 0.5rem 0.5rem;
}
.new-register-component .filter-section .input-container {
    margin: 0 !important;
    width: 55%;
}
.new-register-component .filter-section input{
    padding: 0.4rem 0.5rem;
    border-radius: 0.2rem;
    outline: none;
    border: none;
    /* box-shadow: none; */
    margin: 0 !important;
    font-size: 1rem;
}
.new-register-component .filter-section select{
    padding: 0.32rem 0.5rem;
    border-radius: 0.3rem;
    outline: none;
    border: none;
    font-size: 1rem;
    width: 15%;
}
.new-register-component .filter-section button{
    min-width: 12%;
    padding: 0.34rem 0.5rem;
    font-size: 1rem;
    color: white;
    cursor: pointer;
    background-color: var(--turk-btn-blue);
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    transition: 0.4s;
}

.new-register-component .filter-section button:hover{
    opacity: 0.7;
    transition: 0.2s;
}
.new-register-component .table-section{
    height: 100%;
}
.new-register-component .table-section .info-section{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    width: 100%;
}
.new-register-component .table-section .info-section h2{
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}
.new-register-component .table-section .info-section p{
    margin: 0.2rem 0 0 0;
    font-size: 0.9rem;
    color: var(--very-light-black);
    font-weight: 600;
}
.new-register-component .table-section .validate-email{
    background-color: var(--shadow-green) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 1rem;
    padding: 0.3rem 0.8rem;
}
.new-register-component .table-section .invalidate-email{
    background-color: var(--shadow-red) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 1rem;
    padding: 0.3rem 0.8rem;
}
.new-register-component .table-section .validate-email p, .new-register-component .table-section .invalidate-email p{
    margin: 0;
    color: black;
    font-size: 0.95rem;
    font-weight: 600;
}
/* Solicitar certificados componente */
.not-ready:hover > td{
    background-color: var(--shadow-forty-red);
    transition: 0.4s;
}
.not-ready td{
    transition: 0.4s;
    background-color: var(--shadow-fort-red );
}
.optional-td{
    background-color: white !important;
}
.optional-th{
    background-color: #e7ebff;
}
.btn-not-ready{
    background-color: var(--red) !important;
    color: white !important;
}
.btn-not-ready span{
    margin-right: 0.5rem !important;
}
.solicitar-certificados-component{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    width: 100%;
    height: 100%;
    transition: 0.3s;
}
.solicitar-certificados-component .sectioner{ 
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-flow: row-reverse nowrap;
    width: 100%;
    height: 100%;
}
.solicitar-certificados-component .sectioner .table-section-container{
    width: 82%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    padding: 0;
    background-color: white;
    border-radius: 0.4rem;
    padding: 0.8rem;
    box-shadow: 0 0 0.1rem var(--very-light-black);
}
.solicitar-certificados-component .filter-section{
    width: 17.1%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    background-color: white;
    border-radius: 0.4rem;
}
.solicitar-certificados-component .filter-section h2{
    margin: 0 0 0.8rem 0;
    font-size: 1rem;
    /* background-color: var(--light-blue); */
    /* border-radius: 0.4rem; */
    padding: 0.3rem 0;
    font-weight: 400;
    /* text-align: center; */
    /* color: white; */
    color: var(--blue);
    border-bottom: solid 0.2rem var(--very-light-blue);
}
.solicitar-certificados-component .filter-section h4{
    padding: 0;
    margin: 0.1rem 0 0.7rem;
}
.solicitar-certificados-component .filter-section .input-container{
    margin: 0.6rem 0;
}
.solicitar-certificados-component .filter-section label{
    color: var(--light-black);
    font-size: 0.93rem;
    font-weight: 600;
}
.solicitar-certificados-component .filter-section p{
    /* color: var(--dark-blue); */
    margin: 0.5rem 0;
    font-weight: 500;
    text-align: center;
    font-size: 1rem;
}
.solicitar-certificados-component .filter-section select{
    display: block;
    border: none;
    padding: 0.5rem 0.8rem;
    outline: none;
    border-radius: 0.3rem;
    width: 100%;
    font-size: 1rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    margin: 0;
    transition: 0.2s;
    color: var(--light-black);
    margin: 0.6rem 0;
}
.solicitar-certificados-component .filter-section .btn{
    width: 100%;
    padding: 0.34rem 0.5rem;
    font-size: 1rem;
    color: var(--dark-blue);
    cursor: pointer;
    background-color: var(--turk-btn-blue);
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    transition: 0.4s;
    margin-top: 1rem !important;
}
.solicitar-certificados-component .filter-section .btn-send-special{
    /* width: fit-content; */
    padding: 0.4rem 0.5rem !important;
}
.solicitar-certificados-component .table-section{
    overflow-x: auto;
    width: 100%;
    height: 100%;
}
.solicitar-certificados-component .table-section table{
    min-width: max-content; 
    width: auto;
}
.solicitar-certificados-component .table-section table tr th{
    min-width: 9rem;
}
.solicitar-certificados-component .table-section table tr td{
    box-shadow: 0 0 0.08rem var(--very-light-black);
}
.solicitar-certificados-component .table-section table tr:first-child{
    cursor: auto;
}
.solicitar-certificados-component .table-section table tr{
    cursor: pointer;
}
#toggle-checkbox:checked ~ .content .content-body .solicitar-certificados-component{
    width: 96% !important;
    transition: 0.3s;
}
/* CONVOCATORIA COMPONENTE */
.convocatoria-component{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    width: 100%;
    transition: 0.3s;
    height: 100%;
}
.convocatoria-component .filter-section{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 0.5rem 0.5rem;
}
.convocatoria-component .filter-section .input-container{
    margin: 0;
    width: 75%;
}
.convocatoria-component .filter-section input{
    padding: 0.3rem 0.5rem;
    border-radius: 0.2rem;
    outline: none;
    border: none;
    box-shadow: none;
    margin: 0 !important;
    font-size: 1rem;
}
.convocatoria-component .filter-section button{
    min-width: 11%;
    padding: 0.34rem 0.5rem;
    font-size: 1rem;
    color: white;
    cursor: pointer;
    background-color: var(--turk-btn-blue);
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    transition: 0.4s;
}

.convocatoria-component .primary-info{
    display: flex;
    flex-flow: column;
}
.convocatoria-component p{
    margin: 0.5rem 0 !important;
    font-size: 1rem;
}
.convocatoria-component p b{
    color: var(--light-black);
    font-size: 0.9rem;
}
.convocatoria-component h4{
    margin: 0;
    font-size: 1rem;
}
.convocatoria-component .primary-info h2{
    color: var(--blue);
    font-size: 1rem;
    margin: 0.2rem 0;
}
.convocatoria-component .list-for-table-labels{
    margin-bottom: 0.4rem;
}
.convocatoria-element ul li label {
    padding: 1rem;
    width: 100%;
    margin: 0 !important;
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 30%);
    transition: 0.3s;
}
.convocatoria-element ul{
    display: contents;
}
.convocatoria-element ul li{
    display: flex;
    margin-bottom: 0.4rem !important;
}
.convocatoria-element ul li label:hover{
  background-color: #e5e5e5;
  transition: 0.3s;
  transform: scale(1.01);
}
.convocatoria-element-final {
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 30%);
    border-radius: 0.6rem;
    padding: 1rem;
    margin: 1rem 0;
    display: flex
;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-flow: column nowrap;
    margin-top: 2rem;
}
.convocatoria-element-final h4 {
    font-weight: 400;
    font-size: 1.5rem !important;
    border-bottom: solid #0068FF;
    width: 100%;
    text-align: center;
    margin: 0.5rem 0 1rem;
    padding-bottom: 0.5rem;
}
.doctor-information-subcomponent{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    /* margin: 0 0.5rem; */
    padding: 0.2rem 0.5rem;
}
.doctor-information-subcomponent .profile-resume{
    width: 20.5%;
    border-radius: 0.4rem;
    height: 100%;
    padding: 1rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: column nowrap;
}
.doctor-information-subcomponent .profile-resume .image-container{
    width: 7rem;
    height: 7rem;
    box-shadow: 0 0 0.5rem var(--real-shadow);
}
.doctor-information-subcomponent .profile-resume .title-img{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
}
.doctor-information-subcomponent .profile-resume .title-img p{
    color: var(--very-light-black);
    font-size: 0.92rem;
    font-weight: 600;
    margin: 0.3rem 0.3rem;
    user-select: all;
}
.doctor-information-subcomponent .profile-resume .primary-info{
    width: 100%;
}
.doctor-information-subcomponent .profile-resume .primary-info p{
    color: var(--light-black);
    font-size: 0.95rem;
    margin: 1rem 0.3rem;
}
.doctor-information-subcomponent .profile-resume .primary-info p b{
    font-size: 0.9rem;
}
.doctor-information-subcomponent .profile-resume h3{
    text-align: center;
    font-weight: 300;
    margin: 1rem 0 0 0;
}
.doctor-information-subcomponent .profile-resume .tabs-info{
    display: flex;
    justify-content: space-between;
    flex-flow: column nowrap;
    width: 100%;
    max-height: 70%;
    overflow-y: auto;
    padding: 0 0.1rem;
}
.doctor-information-subcomponent .profile-resume .tabs-info li{
    margin: 0.4rem 0;
    list-style: none;
    width: 100%;
    display: flex;
    box-shadow:  0 0 0.1rem var(--light-black);
    background-color: white;
    border-radius: 0.4rem;
}
.doctor-information-subcomponent .profile-resume .tabs-info li a{
    padding: 0.5rem;
    font-size: 0.95rem;
    width: 100%;
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 0.3s;
    user-select: none;
    border-radius: 0.4rem;
}
.doctor-information-subcomponent .profile-resume .tabs-info li a:hover{
    background-color: var(--very-light-gray);
    transition: 0.3s;
}
.doctor-information-subcomponent .profile-resume .tabs-info li .tab-text {
    flex: 0 0 80%; /* Ocupa el 70% del espacio */
    white-space: nowrap; /* Evitar que el texto se rompa en varias líneas */
    overflow: hidden; /* Esconder el exceso de texto */
    text-overflow: ellipsis; /* Añadir puntos suspensivos cuando el texto es demasiado largo */
}

.doctor-information-subcomponent .profile-resume .tabs-info li .tab-icon {
    flex: 1; /* Ocupa el espacio restante */
    text-align: right; /* Alinear el ícono a la derecha */
}
.doctor-information-subcomponent .profile-resume .pf-button-section{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
}
.doctor-information-subcomponent .profile-resume .pf-button-section .btn{
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    background-color: var(--hover-gray);
    box-shadow: 0 0 0.1rem var(--opacity-black);
}
.doctor-information-subcomponent .profile-resume .pf-button-section .btn:hover{
    background-color: var(--very-light-gray);
}
.doctor-information-subcomponent .profile-menu{
    width: 78%;
    height: 100%;
    border-radius: 0.4rem;
    display: flex;
    flex-flow: column nowrap;
    /* box-shadow: 0 0 0.1rem var(--opacity-black); */
}
.doctor-information-subcomponent .profile-menu .sectioner{
    flex-flow: row nowrap;
    height: fit-content;
    align-items: flex-end;
    padding: 0;
}
.doctor-information-subcomponent .profile-menu .sectioner a{
    width: fit-content;
}
.doctor-information-subcomponent .profile-menu .sectioner .browser-tab{
    list-style: none;
    padding: 0.3rem !important;
    box-shadow: none;
}
.doctor-information-subcomponent .profile-menu .sectioner .browser-tab h2{
    font-size: 0.98rem;
}
.doctor-information-subcomponent .profile-menu .profile-container{
    width: 100%;
    height: 100%;
    /* background-color: rgb(242, 247, 255); */
    background-color: white;
    padding: 0.1rem 0.5rem 1rem;
    border-radius: 0.4rem;
    display: flex;
    justify-content: flex-start;
    flex-flow: column nowrap;
    /* overflow-y: scroll; */
    position: relative;
}
.doctor-information-subcomponent .profile-menu .profile-container p{
    margin: 0;
    /* color: var(--blue); */
}
.doctor-information-subcomponent .profile-menu .profile-container h1{
    padding:  0;
    margin: 0;
    font-size: 1.2rem;
    text-align: start;
    width: max-content !important;
    font-weight: 300;
    /* color: var(--dark-blue); */
    color: var(--dark-blue);
    /* background-color: var(--comfortable-blue);
    box-shadow: 0 0 0.1rem var(--very-light-black); */
    user-select: none;
    border-radius: 0.4rem;
}
.doctor-information-subcomponent .profile-menu .profile-container .btn-group{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}
.doctor-information-subcomponent .profile-menu .profile-container .btn-group .btn{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--hover-gray);
    color: black;
}
.doctor-information-subcomponent .profile-menu .profile-container .btn-group .btn span{
    margin-right: 0.5rem;
}
.btn-group-attachment{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}
.btn-group-attachment .btn-1{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    padding: 0 !important;
    margin-right: 6.5%;
    color: var(--dark-blue) !important;
}
.btn-group-attachment .btn-1 p{
    text-decoration: underline;
}
.btn-group-attachment .btn-1 span{
    margin-right: 0.16rem;
}
.btn-group-attachment .btn-2{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    padding: 0 !important;
    margin-right: 6.5%;
    color: var(--red) !important;
}
.btn-group-attachment .btn-2 p{
    color: var(--red) !important;
    text-decoration: underline;
}
.btn-group-attachment .btn-2 span{
    margin-right: 0.16rem;
}
.box-editor{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-flow: column nowrap;
    overflow-y: scroll;
}
.a-underline{
    text-decoration: underline !important;
}
.scroll-this{
    overflow-y: auto !important;
    width: 100%;
    height: 100%;
    overflow-x: hidden !important;
}
.scroll-this-normal{
    overflow-x: hidden !important;
    overflow-y: auto !important;

}
.be-noscroll{
    overflow: visible !important;
}
.padding-1-1{
    padding: 1% !important;
}
.padding-1{
    padding: 0 1% !important;
}
.padding-0{
    padding: 0 !important;
}
.padding-0-1{
    padding: 0.1rem !important;
}
.padding-0-3{
    padding: 0.4rem !important;
}
.padding-0-4{
    padding: 0.4rem !important;
}
.padding-0-5{
    padding: 0.5rem !important;
}
.padding-0-5-0{
    padding: 0.5rem 0 !important;
}
.padding-t-1{
    padding-top: 1rem !important;
}
.height-auto{
    height: auto !important;
}
.margin-0{
    margin: 0 !important;
}
.margin-05-0{
    margin: 0.5% 0 !important;
}
.margin-1-0{
    margin: 1% 0 !important;
}
.margin-1r-0{
    margin: 1rem 0 !important;
}
.margin-05r-0{
    margin: 0.5rem 0 !important;
}
.margin-1{
    margin: 1% !important;
}
.margin-bottom-1{
    margin-bottom: 1% !important;
}
.margin-top-1{
    margin-top: 1% !important;
}
.margin-left-1{
    margin-left: 1% !important;
}
.margin-right-1{
    margin-right: 1% !important;
}
.margin-bottom-2{
    margin-bottom: 2% !important;
}
.margin-top-2{
    margin-top: 2% !important;
}
.margin-left-2{
    margin-left: 2% !important;
}
.margin-right-2{
    margin-right: 1% !important;
}
.margin-bottom-0{
    margin-bottom: 0rem !important;
}
.margin-top-0{
    margin-top: 0rem !important;
}
.margin-left-0{
    margin-left: 0rem !important;
}
.margin-right-0{
    margin-right: 0rem !important;
}
.margin-b-1rem{
    margin-bottom: 1rem !important;
}
.margin-b-1{
    margin-bottom: 1% !important;
}
.margin-t-4{
    margin-top: 4rem !important;
}
.margin-t-0{
    margin-top: 0rem !important;
}
.margin-t-1{
    margin-top: 1rem !important;
}
.margin-2{
    margin: 2% !important;
}
.user-select-none{
    user-select: none !important;
}
/* .box-editor input:valid, select:valid, textarea:valid{
    background-color: var(--input-valid) !important;
} */
.box-editor .btn-group{
    margin: 1% 0;
    width: 60%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
}
.box-editor .btn-group .btn span{
    margin-right: 0.3rem !important;
}
.box-editor .btn-group .btn-success{
    color: white !important;
    background-color: var(--green);
}
.box-editor .btn-group button{
    margin-left: 1%;
}
.box-editor .element{
    width: 100%;
}
.box-editor .element .radius-div{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-flow: row nowrap;
    margin-top: 1%;
}
.box-editor .element .radius-div .radius-element{
    box-shadow: 0 0 0.1rem var(--opacity-black);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.8rem;
    border-radius: 0.4rem;
    margin-right: 2%;
}
.box-editor .element .radius-div .radius-element input{
    margin: 0 0.4rem 0 0  !important;
}
.box-editor .subdiv{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-flow: row nowrap;
    width: 60%;
    height: 100%;
    margin-top: 2%;
}
.box-editor .subdiv h2{
    font-size: 1rem;
    margin: 1% 0;
}

.s-fase{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    background-color: var(--hover-light-blue);
    padding: 0.5% 1%;
    border-radius: 0.4rem;
    /* color: white; */
    box-shadow: 0 0 0.1rem var(--light-black);
}
.s-fase-element{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.s-fase-element:first-child{
    width: 40%;
}
.s-fase-element .sf-checkbox{
    width: 1.8rem;
    height: 1.8rem;
}
.s-fase-element label{
    padding: 0 5%;
}
.s-element-title{
    width: 85%;
    margin: 2% 0 1% 0;
    text-align: center;
}
.button-upload .choose-document{
    display: flex;
    width: 60%;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    color: var(--tainted-dark-blue);
}
.button-upload .btn{
    width: 39%;
}
.button-upload .btn-red{
    color: white !important;
    background-color: var(--red);
}
.button-upload .btn-success, .btn-blue-link{
    color: white !important;
    background-color: var(--blue) !important;
}

.box-editor .two-inputs-container, .box-editor .three-inputs-container, .box-editor .two-diff-inputs-container, .box-editor .two-diffinv-inputs-container, .box-editor .four-inputs-container, .box-editor .four-diff-inputs-container{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-flow: row nowrap;
    /* width: 85%; */
}
/* .box-editor .two-inputs-container .element{
    width: 49% !important;
}
.box-editor .three-inputs-container .element{
    width: 31% !important;
} */
.box-editor .element label, .element label{
    font-size: 0.95rem;
    /* font-weight: 600; */
    color: var(--light-black);
}
.process-box{
    display: flex;
    width: 60%; 
    align-items: center;
    justify-content: space-between;
    flex-flow: row nowrap;
}
.process-box .element{
    width: 70%;
}
.process-box-title{
    display: flex;
    width: 60%; 
    align-items: center;
    justify-content: space-between;
    flex-flow: row nowrap;
    font-weight: 600;
}
.be-2 .element{
    width: 100% !important;
}




/* UTILIDADES */
.empty-table-container{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    user-select: none;
    padding: 3% 0;
}
.empty-table-container span{
    font-size: 9rem;
    background-color: var(--background-blue);
    color: white;
    opacity: 0.6;
    padding: 1.5rem;
    border-radius: 100%;
}
.empty-table-container h5{
    font-size: 1.5rem;
    color: var(--blue);
    margin: 2% 0 0.5% 0 !important;
    font-weight: 300;
}
.empty-table-container h6{
    font-weight: 300;
    font-size: 1.1rem;
    margin: 0.5% 0 4% 0 !important;
    color: var(--tainted-dark-blue);
}
.empty-table-container .btn-group{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}
.empty-table-container .btn-group .btn{
    background-color: var(--green) !important;
    color: white !important;
}
.empty-table-container .btn-group .btn span{
    font-size: 1.5rem !important;
    background-color: transparent !important;
    padding: 0 !important;
    color: white !important;
    opacity: 1 !important;
}

.empty-table-container-add{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    user-select: none;
    min-height: 25rem;
    border-radius: 0.4rem;
}
.empty-table-container-add span{
    font-size: 7rem;
    background-color: var(--background-blue);
    color: white;
    opacity: 0.6;
    padding: 1rem;
    border-radius: 100%;
}
.empty-table-container-add h5{
    font-size: 1.5rem;
    color: var(--blue);
    margin: 3% 0 0.5% 0 !important;
    font-weight: 300;
}
.empty-table-container-add h6{
    font-weight: 300;
    font-size: 1rem;
    margin: 1% 0 2% 0 !important;
    color: var(--tainted-dark-blue);
}
.empty-table-container-add .btn-group{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}
.empty-table-container-add .btn-group .btn{
    background-color: var(--green) !important;
    color: white !important;
}
.empty-table-container-add .btn-group .btn span{
    font-size: 1.5rem !important;
    background-color: transparent !important;
    padding: 0 !important;
    color: white !important;
    opacity: 1 !important;
}
.empty-table-container-add-2{
    width: 100%;
    /* height: 100%; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    user-select: none;
    min-height: 25rem;
    border-radius: 0.4rem;
}
.empty-table-container-add-2 span{
    font-size: 7rem;
    background-color: var(--background-blue);
    color: white;
    opacity: 0.6;
    padding: 1rem;
    border-radius: 100%;
}
.empty-table-container-add-2 h5{
    font-size: 1.5rem;
    color: var(--blue);
    margin: 3% 0 0.5% 0 !important;
    font-weight: 300;
}
.empty-table-container-add-2 h6{
    font-weight: 300;
    font-size: 1rem;
    margin: 1% 0 2% 0 !important;
    color: var(--tainted-dark-blue);
}


.tab-info-selected{
    background-color: var(--very-light-blue) !important;
    box-shadow: 0 0 0.1rem var(--opacity-black) !important;
}
.btn-table-add{
    background-color: var(--green) !important;
    color: white !important;
    margin-bottom: 1%;
}
select{
    box-shadow: 0 0 0.1rem var(--opacity-black);
    background-color: var(--input-valid);
    padding: 0 0.5rem !important;
}
select.selected {
    background-color: var(--hover-blue) !important;
    box-shadow: 0 0 0.2rem var(--blue) !important;
}
select, .input-field{
    height: 30px !important;
    min-height: 30px;
}
.flex{
    display: flex !important;
}
.flex-center-start{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    /* position: relative; */
}
.flex-center-between{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    /* position: relative; */
}
.flex-center-end{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}
.flex-center{
    display: flex !important;
    align-items: center !important;
}
.flex-center-center{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.flex-between{
    display: flex !important;
    justify-content: space-between !important;
}
.flow-column{
    display: flex !important;
    flex-flow: column nowrap !important;
    justify-content: space-between !important;
}
.flex-this{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-between;
    padding-right: 0.5rem;
    height: 100%;
    width: 17.1%;
}
.flex-this .filter-section{
    width: 100% !important;
}
textarea{
    resize: vertical;
    min-height: 5rem;
    background-color: var(--input-valid);
}
.text-blue{
    color: var(--blue);
}
.text-blue-normal{
    color: var(--opacity-black) !important;
    text-align: start !important;
    width: 100%;
    padding: 1rem ;
}
.blue-title{
    padding: 0.5rem 0;
    margin: 0 0 0.3rem 0;
    font-size: 1.2rem;
    text-align: center;
    font-weight: 300;
    /* color: var(--dark-blue); */
    color: var(--dark-blue);
    user-select: none;
    border-radius: 0.4rem;
}
.blue-opacity{
    color: var(--opacity-black) !important;
}
.blue-text{
    color: var(--dark-blue);
}
/* .blue-text.inter-text.w-100, .blue-text.inner-text.w-100{
    color: var(--blue) !important;
    background-color: var(--hover-light-blue);
    padding: 0.5rem 1rem;
    margin-bottom: 0 !important;
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 0 0.1rem var(--dark-blue);
} */
.blue-text span{
    font-size: 1.1rem;
    user-select: none;
}
.switch-container {
    display: flex;
    border: 1px solid var(--blue);
    border-radius: 0.4rem;
    overflow: hidden;
    margin: 0.8rem 0 1.3rem 0;
    user-select: none;
    height: 35px !important;
    min-height: 35px;
}
.switch-container-invisible{
    height: 35px !important;
    min-height: 35px;
    margin: 0.8rem 0 1.5rem 0;
}
.switch-container input[type="radio"] {
    display: none;
}
.switch-container label {
    cursor: pointer;
    font-size: 1rem !important;
    background-color: #FFF;
    color: var(--blue);
    transition: background-color 0.3s;
    min-width: 5rem;
    display: flex;
    align-items: center;
    transition: 0.4s;
    justify-content: center;
    padding: 0 1rem;
}
.switch-container label:hover{
    background-color: var(--background-gray);
    transition: 0.4s;
}
.switch-container input[type="radio"]:checked + label {
    background-color: var(--blue);
    color: #FFF;
}
.flex-column{
    display: flex !important;
    align-items: center !important;
    flex-flow: column nowrap !important;
}
.flex-column-start{
    display: flex !important;
    align-items: flex-start !important;
    flex-flow: column nowrap !important;
}
.flex-form{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    /* height: 100%; */
    padding: 0 1% 1%;
    position: relative;
}
.flex-form .formed-group{
    width: 74%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-flow: column nowrap;
    padding: 0 0.5rem;
}
.flex-form .formed-group .smallist{
    margin: 0;
    height: 1px !important;
}
.flex-form .btn-group-flex{
    width: 25%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    position: relative;
}
.flex-form .btn-group-flex .s-btn-group{
    /* padding: 1rem; */
    border-radius: 0.4rem;
    /* background-color: var(--text-gray); */
    width: 90%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: flex-start;
    position: sticky;
    top: 0;
    /* box-shadow: 0 0 0.1rem var(--opacity-black); */
}
.flex-form .btn-group-flex .s-btn-group hr{
    margin: 1.5rem 0 2rem 0;
}
.flex-form .btn-group-flex p{
    width: 100%;
    text-align: center;
    color: var(--very-light-black) !important;
    font-size: 0.95rem;
}
.flex-form .btn-group-flex .s-btn-group .btn{
    /* margin: 0.8rem 0; */
    /* width: 85%; */
    margin: 0 0 1rem 0;
    width: 100%;
}
.flex-form .btn-group-flex .s-btn-group .btn-success{
    color: white !important;
    background-color: var(--green);
}
.flex-form .btn-group-flex .s-btn-group .btn span{
    margin-right: 0.4rem;
}
.flex-form .btn-group-flex .s-btn-group .btn-delete{
    background-color: var(--red) !important;
    color: white ;
}
.flex-form .btn-group-flex .s-btn-group .btn-info{
    background-color: var(--background-blue);
    color: white !important;
}
.process-div{
    display: flex;
    width: 74%;
    flex-flow: row nowrap;
    /* height: 100%; */
    padding: 0 2%;
    align-items: flex-start;
    justify-content: space-between;
}
.process-div .s-element{
    width: 49% !important;
    min-height: 20rem !important;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
}
.process-div .s-element-two{
    width: 55%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-flow: column nowrap;
}
.process-div .s-element-two .special-title-set{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.process-div .s-element-two .se-card{
    width: 100%;
    /* margin-left: 2%; */
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: row nowrap;
}
.process-div .s-element-two .se-card div:first-child{
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.process-div .s-element-two .se-card label{
    margin-left: 2%;
}
.process-div .s-element .se-card{
    margin: 0.5% 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-flow: row nowrap;
    width: 100%;
}
.process-div .s-element .se-card label{
    width: 100%;
    margin-left: 2%;
    padding: 0.5rem 0;
}
.d-none{
    display: none !important;
}
.process-div .s-element .btn-success, .process-div .s-element-two .btn-success{
    color: white !important;
    background-color: var(--green);
    margin-top: 2%;
}
.s-element-document{
    width: 74.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    border-radius: 0.4rem;
    padding: 0 2%;
}
.s-element-document .btn-group{
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.s-element-document .input-plus-btn{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
.s-element-document .input-plus-btn button{
    min-width: 12rem;
    padding: 0.4rem !important;
    margin-left: 0.5rem !important;
}
.s-element-document .special-textarea-sed{
    width: 100%;

}
.s-element-document p{
    width: 100%;
    text-align: center;
    margin: 0;
}
.s-element-document .button-upload{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    flex-flow: row nowrap;
    /* background-color: white; */
    padding: 0.5rem 0.8rem;
    border-radius: 0.4rem;
    /* margin: 2% 0; */
    background-color: var(--hover-light-blue);
    box-shadow: 0 0 0.1rem var(--light-black);
}
.image-container {
    width: 3rem; /* Ancho deseado */
    height: 3rem; /* Alto deseado */
    overflow: hidden; /* Ocultar lo que se salga del contenedor */
    display: flex;
    justify-content: center; /* C'  entrar la imagen horizontalmente */
    align-items: center; /* Centrar la imagen verticalmente */
    border-radius: 100%;
}
.image-container img {
    width: 100%;
    min-width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover; /* Mantener las proporciones de la imagen */
}
.progress-bar {
    width: 100%; /* Ancho de la barra de progreso */
    height: 0.5rem; /* Alto de la barra de progreso */
    background-color: white; /* Color de fondo de la barra de progreso */
    box-shadow: 0 0 0.1rem var(--light-black);
    border-radius: 10px; /* Bordes redondeados para suavizar el borde */
    overflow: hidden; /* Oculta cualquier contenido que exceda el borde redondeado */
    position: relative; /* Necesario para posicionar la barra de progreso dentro del contenedor */
}
.progress {
    width: 50%; /* Indica el porcentaje de progreso actual */
    height: 100%; /* Ocupar todo el alto del contenedor */
    background-color: var(--cake-green); /* Color de la barra de progreso */
    position: absolute; /* Posición absoluta dentro del contenedor */
}
.sectioner{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 0.5rem 0.5rem;
}
.sectioner .browser-tab{
    background-color: var(--very-light-gray);
    padding: 0.3rem 0.5rem;
    margin-right: 0.5rem;
    border-radius: 0.4rem 0.4rem 0 0;
    cursor: pointer;
    transition: 0.2s;
    border-bottom: none !important;
    border: solid rgba(255, 255, 255, 0.899);
    user-select: none;
    box-shadow: 0 0rem 0.2rem var(--shadow-gray);
}
.sectioner .browser-tab a{
    color: var(--opacity-black) !important;
}
.sectioner .browser-tab:hover{
    transition: 0.2s;
    background-color: var(--hover-gray);
}
.sectioner .browser-tab h2{
    margin: 0;
    font-size: 1rem;
    color: var(--light-black);
    font-weight: 500;
}
.sectioner-two{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 1% 0.5rem;
}
.sectioner-two .browser-tab{
    background-color: var(--very-light-gray);
    padding: 0.3rem 0.5rem;
    margin-right: 0.5rem;
    border-radius: 0.4rem 0.4rem 0 0;
    cursor: pointer;
    transition: 0.2s;
    border-bottom: none !important;
    border: solid rgba(255, 255, 255, 0.899);
    user-select: none;
    box-shadow: 0 0rem 0.2rem var(--shadow-gray);
}
.sectioner-two .browser-tab:hover{
    transition: 0.2s;
    background-color: var(--hover-gray);
}
.sectioner-two .browser-tab h2{
    margin: 0;
    font-size: 1rem;
    color: var(--light-black) ;
    font-weight: 500;
}
.tooltip-text {
    visibility: hidden;
    font-size: 1.1rem;
    min-width: 10rem;
    background-color: var(--blue);
    color: white;
    text-align: start;
    padding: 1rem;
    border-radius: 0 0.4rem 0.4rem 0;
    position: absolute;
    z-index: 4;
    transform: translate(4.1rem, 0.3rem);
    box-shadow: 0.1rem 0 0.1rem var(--shadow-gray);
    opacity: 0;
    transition: opacity 0.3s;
}
.tt-special{
    transform: translate(4rem, -2rem) !important;
    padding: 0.3rem;
    border-radius: 0.4rem !important;
    width: fit-content !important;
    text-align: center !important;
}
.ul li a:hover ~ .tooltip-text, .inner-list-one:hover ~.tooltip-text {
    visibility: visible;
    opacity: 1;
}
/* TABLA */
.table-section{
    width: 100%;
    height: 86%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0rem 0.5rem;
    margin: 0.5rem 0;
    /* background-color: var(--background-gray); */
    background-color: white;
}
.table-section-1{
     width: 100%;
    height: 73vh;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0rem 0.5rem;
    margin: 0.5rem 0;
    /* background-color: var(--background-gray); */
    background-color: white;
}
table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0;
    table-layout: auto;
}
table tr:nth-child(odd){
    background-color: var(--light-blue-for-table);
    /* box-shadow: 0 0 0.2rem var(--light-gray); */
}
tr:hover, table tr:nth-child(odd):hover{
    background-color: var(--hover-light-blue);
    box-shadow: 0 0 0.1rem var(--very-light-black);
    transition: 0.2s;
}
table tr:first-child{
    color: var(--dark-blue);
    background-color: var(--very-light-blue);
    position: sticky;
    z-index: 2;
    top: 0;
    box-shadow: none !important;
}
table tr:first-child th{
    padding: 0.3rem 0.8rem;
    font-weight: 500;
}
table tr td{
    padding: 0.8rem ;
    vertical-align: top ;
    color: var(--opacity-black);
    /* user-select: all; */
}
th:first-child {
    border-top-left-radius: 10px;
}
th:last-child {
    border-top-right-radius: 10px;
}
tr:last-child td:first-child{
    border-bottom-left-radius: 0.4rem;
}
tr:last-child td:last-child{
    border-bottom-right-radius: 0.4rem;
}
tr:first-child{
    height: auto !important;
}
tr:last-child{
    border-radius: 0 0 0.4rem 0.4rem;
}
tr{
    background-color: white;
    width: 100%;
    transition: 0.3s;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    /* height: 5rem; */
}

.t-width-5{
    width: 4.5% !important;
}
.t-width-10{
    width: 9.5% !important;
}
.t-width-15{
    width: 14.5% !important;
}
.t-width-18{
    width: 17.5% !important;
}
.t-width-20{
    width: 19.5% !important;
}
.t-width-25{
    width: 24.5% !important;
}
.t-width-30{
    width: 29.5% !important;
}
.t-width-35{
    width: 34.5% !important;
}
.t-width-40{
    width: 39.5% !important;
}
.t-width-45{
    width: 44.5% !important;
}
.t-width-50{
    width: 49.5% !important;
}
.t-width-55{
    width: 54.5% !important;
}
.t-width-60{
    width: 59.5% !important;
}
.t-width-70{
    width: 70% !important;
}
.t-width-74{
    width: 74% !important;
}
.t-width-75{
    width: 75% !important;
}
.t-width-80{
    width: 79.5% !important;
}
.t-width-85{
    width: 85% !important;
}
.t-width-90{
    width: 89.5% !important;
}
.t-width-100{
    width: 99.5% !important;
}
.w-9{
    width: 9% !important;
}
.w-15{
    width: 15% !important;
}
.w-19{
    width: 19% !important;
}
.w-20{
    width: 20% !important;
}
.w-25{
    width: 25% !important;
}
.w-27{
    width: 27% !important;
}
.w-28{
    width: 28% !important;
}
.w-29{
    width: 29% !important;
}
.w-30{
    width: 30% !important;
}
.w-40{
    width: 40% !important;
}
.w-49{
    width: 49% !important;
}
.w-50{
    width: 50% !important;
}
.w-60{
    width: 60% !important;
}
.w-70{
    width: 70% !important;
}
.w-75{
    width: 75% !important;
}
.w-80{
    width: 80% !important;
}
.w-85{
    width: 85% !important;
}
.w-90{
    width: 90% !important;
}
.w-95{
    width: 95% !important;
}
.w-100{
    width: 100% !important;
}
.max-h-91{
    max-height: 91vh !important;
}
.h-91{
    height: 91vh !important;
}
.h-100{
    height: 100% !important;
}
.h-auto{
    height: auto !important;
}
.table-btn{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}
.table-btn button, .table-btn a, .table-btn label{
    /* background-color: transparent; */
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.7rem;
}
.table-btn button span{
    font-size: 1.5rem;
}
.btn-add-special{
    background-color: var(--green) !important;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-around;
    transition: 0.2s;
    position: relative;
    color: white !important; 
    padding: 0 0 0 0.5rem !important;
}
.btn-add-special span{
    /* position: absolute; */
    transition: 0.2s;
    font-size: 1.8rem;
    margin-left: 0.3rem !important;
}
.btn-add-special:hover > span{
    transform: rotate(90deg);
}
.tooltip-text-btn{
    font-size: 0.9rem;
    background-color: white;
    color: var(--opacity-black);
    text-align: center;
    padding: 0.3rem 0.5rem;
    box-shadow: 0 0 0.2rem var(--light-black);
    border-radius:  0.4rem;
    visibility: hidden;
    width: max-content;
    position: fixed !important;
    z-index: 4;
    transform: translate(-3rem, 0);
    right: 0;
    opacity: 0;
    top: 0;
    transition: opacity 0.3s;
    font-weight: 700;
    pointer-events: none !important;
}
.tooltip-btn{
    position: relative;
    cursor: pointer !important;
}
.tooltip-btn:hover > .tooltip-text-btn{
    z-index: 2;
    visibility: visible !important;
    opacity: 1 !important;
}
.horizontal-label{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0.1rem 0;
}
.horizontal-label h3{
    margin: 0 0.5rem 0 0 !important;
}
.list-for-table-labels{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: row wrap;
    text-decoration: none;
    list-style: none;
}
.list-for-table-labels li{
    background-color: white;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    padding: 0.2rem 0.6rem;
    margin: 0.2rem 0.4rem 0.2rem 0;
    border-radius: 1rem;
    /* color: var(--light-black); */
    color: var(--opacity-black);
    transition: 0.1s;
    font-size: 0.94rem;
    font-weight: 400;
}
.list-for-table-labels li:hover{
    background-color: var(--very-light-gray );
    transition: 0.2s;
}
input:hover, select:hover{
    background-color: var(--input-field);
    transition: 0.3s;
    box-shadow: 0 0 0.1rem var(--light-black);
}
input[type="checkbox"]{
    width: 1.4rem !important;
    height: 1.4rem !important;
    border-radius: 0.4rem !important;
}
input[readonly] {
    background-color: #f3f3f3; 
    pointer-events: none;
}
.tooltip-for-tr {
    font-size: 1.05rem;
    background-color: white;
    color: var(--opacity-black);
    box-shadow: 0 0 0.2rem var(--light-black);
    border-radius:  0.4rem;
    text-align: center;
    padding: 0.3rem 0.5rem;
    position: absolute;
    display: none;
    z-index: 1000;
    pointer-events: none;
}
.there-are-not-results{
    width: 100%;
    text-align: center;
    margin: 2rem 0;
    font-size: 1.2rem;
    color: var(--red);
}
.modal {
    display: none;
    position: fixed;
    z-index: 999; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto; 
    background-color: rgba(0, 0, 0, 0.67); 
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    padding: 1rem 1.5rem;
    border: 1px solid #888;
    width: 100%;
    border-radius: 0.4rem;
    max-height: 95vh;
    height: 100%;
    max-width: 95vw;
}
.modal-dialog{
    width: 60%;
}
.modal-header{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.modal-header .modal-title{
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
    text-align: center;
}
.modal-body{
    overflow-y: auto;
    height: 80%;
}
.modal-body p{
    font-size: 1.3rem !important;
}
.modal-footer{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin: 1% 0 0 0;   
}
.modal-footer .btn{
    margin-left: 1%;
}
.modal-close{
    font-size: 2.5rem;
    color: var(--very-light-black);
    cursor: pointer;
    transition: 0.3s;
    user-select: none;
}
.modal-close:hover{
    color: var(--red);
    transition: 0.5s;
    transform: scale(1.1);
}

.display-grid-content{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    margin: 0 0;
}
.title-for-table-h3{
    margin: 0 0 0.4rem 0 ;
    font-size: 0.9rem;
    color: var(--light-black);
}
.alert{
    position: fixed;
    z-index: 9999;
    top: 8%;
    right: 2%;
    padding: 1rem 0.8rem;
    border-radius: 0.4rem;
    border: solid;
    background-color: white;
    display: flex;
    align-items: center;
    min-width: 25rem;
    justify-content: space-between;
    box-shadow: 0 0 0.5rem var(--real-shadow);
}
.alert p{
    margin: 0.1rem 1rem 0rem 1rem;
    font-size: 1.1rem;
    color: var(--light-black);
}
.alert-danger{
    background-color: var(--shadow-fort-red);
    border: solid var(--shadow-forter-red);
}
.alert-danger .alert-icon{
    background-color: var(--red);
}
.alert-success{
    border: solid var(--shadow-green) !important;
    background-color: var(--light-shadow-green);
}
.alert-success .alert-icon{
    background-color: var(--green);
}
.alert-info{
    background-color: var(--hover-light-blue);
    border: solid var(--blue);
}
.alert-info .alert-icon{
    background-color: var(--blue);
}

.alert-icon{
    font-size: 2.2rem;
    padding: 0.5rem;
    border-radius: 100%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.alert .close{
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    user-select: none;
    font-size: 1.8rem;
    transition: 0.2s;
    color: var(--opacity-black);
}
.alert-message{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-flow: column nowrap;
}
.alert-message h3{
    margin: 0 1rem;
    color: var(--opacity-black);
}
.alert .close:hover{
    transform: scale(1.2);
    transition: 0.2s;
}
.acuses-component{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    width: 100%;
    transition: 0.3s;
    height: 100%;
}
.acuses-component .filter-section{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 0.5rem 0.5rem;
}
.acuses-component .filter-section input{
    padding: 0.4rem 0.5rem;
    border-radius: 0.2rem;
    outline: none;
    border: none;
    margin: 0 !important;
    font-size: 1rem;
}
.acuses-component .filter-section .input-container{
    margin: 0 !important;
    width: 21.5%;
}
.acuses-component .filter-section select{
    padding: 0.32rem 0.5rem;
    border-radius: 0.3rem;
    outline: none;
    border: none;
    font-size: 1rem;
    width: 15%;
}
.acuses-component .filter-section button{
    min-width: 10%;
    padding: 0.34rem 0.5rem;
    font-size: 1rem;
    color: white;
    cursor: pointer;
    background-color: var(--turk-btn-blue);
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    transition: 0.4s;
}

.acuses-component .filter-section button:hover{
    opacity: 0.7;
    transition: 0.2s;
}
.acuses-component .table-section h4{
    margin: 0;
    font-size: 1rem;
    color: var(--blue);
}
.acuses-component .retable{
    width: 100%;
    height: 100% !important;
    display: flex;
    flex-flow: row nowrap;
}
.acuses-component .retable .retable-content{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    width: 60%;
    height: 100% !important;
}
.acuses-component .retable .retable-content .table-section{
    height: 95%;
}
.acuses-component .retable .status-acuse{
    padding: 0.5rem 1rem;
    margin: 0.5rem;
    width: 40%;
    display: flex;
    flex-flow: column nowrap;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    border-radius: 0.4rem;
    background-color: var(--light-blue-for-table);
    overflow: auto;
}
.acuses-component .retable .status-acuse .element{
    width: 100%;
    margin-bottom: 0.8rem;
    padding: 0.8rem;
    border-radius: 0.4rem;
    background-color: var(--very-light-gray);
    box-shadow: 0 0 0.1rem var(--opacity-black);
}
.acuses-component .retable .status-acuse h4{
    margin: 0 0 1rem;
    font-size: 1.1rem;
    color: var(--blue);
    width: 100%;
    text-align: center;
}
.acuses-component .retable .status-acuse .element p{
    margin: 0;
}
.my-profile-component{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    width: 100%;
    transition: 0.3s;
    /* height: 100%; */
}
.my-profile-component .general-div{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding: 0.3rem;
}
.my-profile-component .general-div .img-container{
    display: flex;
    width: 30rem;
    height: 100%;
    flex-flow: column nowrap;
}
.my-profile-component .general-div .img-container .image-container{
    width: 30rem !important;
    height: 30rem !important;
    border-radius: 0.4rem 0.4rem 0 0  !important;
}
.my-profile-component .general-div .img-container .btn{
    border-radius: 0 0 0.4rem 0.4rem !important;
    background-color: var(--blue);
    transition: 0.3s;
    color: white;
}
.my-profile-component .general-div .img-container .btn:hover{
    background-color: var(--dark-blue);
    transition: 0.3s;
    color: white;
}
.my-profile-component .general-div .img-container .observations{
    display: flex;
    flex-flow: column nowrap;
    background-color: var(--very-light-gray);
    padding: 1rem;
    border-radius: 0.4rem;
    box-shadow: 0 0 0.2rem var(--red);
}
.my-profile-component .general-div .img-container .observations p{
    color: var(--dark-red);
    font-weight: 800;
    margin: 0 0 0.3rem 0;
}
.my-profile-component .general-div .img-container .observations ul{
    list-style: none;
}
.my-profile-component .general-div .img-container .observations ul li{
    margin: 0.5rem 0;
    color: var(--opacity-black);
}
.my-profile-component .general-div .user-info p{
    margin: 1rem 0 1rem 0;
    font-size: 1.2rem;
    width: 100%;
    text-align: start;
}
.my-profile-component .general-div .user-info ul{
    list-style: none ;
    transition: 0.4s;
    display: flex;
    width: 100%;
    flex-flow: column nowrap;
}
.my-profile-component .general-div .user-info ul li{
    padding: 0.5rem;
    border-radius: 0.4rem;
    margin: 0.35rem 0;
    width: 100%;
    display: flex;
    align-items: center;
    transition: 0.3s;
    justify-content: flex-start;
    box-shadow: 0 0 0.1rem var(--opacity-black);
}
.my-profile-component .general-div .user-info ul li span{
    color: transparent;
    transition: 0.3s;
    margin-right: 0.3rem;
}
.my-profile-component .general-div .user-info{
    width: auto;
    min-width: 50vw;
    display: flex;
    flex-flow: column nowrap;padding: 0 2rem;
}
.my-profile-component .general-div .user-info .btn-group{
    margin-top: 1rem;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
}
.my-profile-component .general-div .user-info .btn-group .btn{
    color: white !important;
    background-color: var(--green);
}
.my-profile-component .general-div .user-info h2{
    margin: 0 0 1rem 0;
    font-size: 1.2rem;
    width: 100%;
    text-align: start;
}
.password-correct{
    color: var(--green) !important;
    background-color: var(--light-shadow-green);
    transition: 0.3s;
    font-weight: 700;
    box-shadow: 0 0 0.2rem var(--green) !important;
}
.password-correct span{
    transition: 0.3s;
    color: var(--green) !important;
}
.block-section{
    display: flex;
    width: 100%;
    align-items: center;
    margin: 0.4rem 0 0.7rem 0;
    justify-content: space-between;
}
.block-section p{
    font-size: 1.1rem;
    font-weight: 600 !important;
    margin-bottom: 0.4rem;
    color: var(--blue);
}
.block-section .btn{
    color: white !important;
}
.block-section .btn span{
    margin-right: 0.3rem !important;
}
.block-section .btn-unlock{
    background-color: var(--green);
}
.block-section .btn-lock{
    background-color: var(--red);
}
.expedient-advice{
    width: 100%;
    /* margin: 0 1% ; */
    padding: 0.4rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.expedient-advice p{
    margin: 0.1rem 0 !important;
}
.expedient-advice span{
    margin-right: 0.3rem;
}
.expedient-advice.ea-nice{
    background-color: var(--light-shadow-green);
    box-shadow: 0 0 0.1rem var(--green) !important;
    color: var(--green) !important;
    font-weight: 600;
}
.expedient-advice.ea-nice p{
    color: var(--green) !important;
}
.expedient-advice.ea-info{
    background-color: var(--hover-light-blue);
    box-shadow: 0 0 0.1rem var(--blue) !important;
    color: var(--blue) !important;
    font-weight: 600;
}
.expedient-advice.ea-info p a{
    color: var(--blue) !important;
    text-decoration: underline !important;
}
.expedient-advice.ea-bad p a{
    color: var(--red) !important;
    text-decoration: underline !important;
}
.expedient-advice.ea-bad{
    background-color: var(--shadow-red);
    box-shadow: 0 0 0.1rem var(--red) !important;
    color: var(--red) !important;
    font-weight: 600;
}
.expedient-advice.ea-bad p{
    color: var(--red) !important;
}
.expedient-advice.ea-bad b{
    font-weight: 600 !important;

}
.stats-table{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.stats-table span{
    font-size: 2.5rem;
}
.stats-table .yes-icon{
    color: var(--green) !important;
}
.stats-table .no-icon{
    color: var(--blue) !important;
}
.multiconsejo-section{
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
}
.multiconsejo-section .floating-title{
    /* position: fixed; */
    /* top: 15vh; */
    color: white;
    font-size: 3rem;
}
.multiconsejo-section .consejos-container{
    width: 90%;
    height: 90%;
    max-height: 90vh !important;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-flow: row wrap;
    position: relative;
    overflow-y: auto !important;
    padding: 1rem;
    gap: 1rem;
}
.multiconsejo-section .consejos-container .consejo-element{
    background-color: white;
    width: 49% !important;
    padding: 1rem;
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 0.3s;
    flex-flow: row nowrap;
    position: relative;
    z-index: 99;
    /* margin-bottom: 1.2rem !important; */
}
.multiconsejo-section .consejos-container .consejo-element:hover{
    transform: scale(1.04);
    opacity: 0.8;
    transition: 0.3s;
}
.multiconsejo-section .consejos-container .consejo-element h4{
    margin: 0;
    color: var(--blue);
    font-size: 1.1rem;
    width: 100%;
    text-align: center;
    font-weight: 300 !important;
}
.multiconsejo-section .consejos-container .consejo-element span{
    font-size: 5rem;
    margin:0;
    color: var(--blue);
}
.multiconsejo-section .consejos-container .consejo-element p{
    font-size: 1rem;
    color: var(--opacity-black);
    font-weight: 500 ;
    width: 100%;
    text-align: center;
    margin: 0.2rem 0;
}
.multiconsejo-section .consejos-container .consejo-main-info{
    display: flex;
    flex-flow: column;
    width: 55%;
}
.multiconsejo-section .consejos-container .consejo-element .btn{
    width: 30%;
    color: white;
    background-color: var(--blue);
}
.consejos-red{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.4rem;
    background-color: var(--red);
}
.consejos-red p{
    margin-left: 1rem !important;
    width: auto !important;
}
.consejos-red span{
    font-size: 2rem !important;
    color: white !important;
}
.text-primary-inst{
    color: var(--blue) !important;
}
.text-primary-inst::before{
    content: 'Principal';
    font-weight: 900 !important;
    background-color: var(--blue) !important;
    color: white !important;
    padding: 0.2rem 0.7rem !important;
    border-radius: 0.4rem;
    margin: 0 0.3rem 0.2rem 0 !important;
    font-size: 0.95rem !important;
}
.login-container{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100% !important;
    height: 100vh !important;
}
.login-container .login-card{
    background-color: white;
    width: 70%;
    height: auto;
    min-height: 55vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 0 0.5rem var(--real-shadow);
}
.login-container .login-card .img-container{
    width: 45%;
}
.login-container .login-card .img-container img{
    width: 100%;
    user-select: none;
}
.login-container .login-card .credentials-section{
    width: 53%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
}
.login-container .login-card .credentials-section .credentials-input{
    display: flex;
    flex-flow: column nowrap;
    width: 90%;
}
.login-container .login-card .credentials-section .credentials-input h1{
    color: var(--dark-blue);
    text-align: center;
    user-select: none;
    width: 100%;
    margin: 0 0 1rem 0;
}
.login-container .login-card .credentials-section .credentials-input p{
    width: 100%;
    text-align: center;
    color: var(--opacity-black);
    user-select: none;
    font-weight: 700;
    font-size: 1.1rem !important;
}
.login-container .login-card .credentials-section .credentials-input .element{
    margin: 1rem 0 0 0;
}
.login-container .login-card .credentials-section .credentials-input .element label{
    user-select: none;
    font-size: 1rem ;
}
.login-container .login-card .credentials-section h4{
    color: var(--red) !important;
    user-select: none;
    margin: 0;
}
.login-container .login-card .credentials-section .credentials-input .btn{
    width: auto;
    margin-top: 2rem;
    color: white;
    background-color: var(--blue);
}
.login-error input{
    border: solid var(--red) 0.1rem;
    background-color: #fbc7c7;
}
.a-password-forget{
    font-size: 1rem;
    margin: 1rem 0;
    color: var(--blue);
}
.a-password-forget:hover{
    text-decoration: underline;
}
.tooltip {
    font-size: 1.05rem;
    position: fixed;
    padding: 0.3rem 0.5rem;
    box-shadow: 0 0 0.2rem var(--light-black);
    background-color: white ;
    color: var(--opacity-black);
    font-weight: 600;
    border-radius: 0.4rem;
    pointer-events: none; 
    z-index: 1000000;
}
.banner-special{
    width: 98.3%;
    position: absolute;
    top: 0;
    padding: 0.5% 1% !important;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    margin:0  0.5rem;
    border-radius: 0.4rem;
}
.banner-special p{
    margin: 0 0 0 0.5rem !important;
}
.banner-special-error{
    background-color: var(--red);
    color: white;
}
.btn-group-prepa{
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 0.5rem;
}
.btn-group-prepa-position{
    position: absolute;
    top: 0.9rem;
    right: 1rem;
}
.especialidad-container{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}
.especialidad-container .title-dude{
    margin-bottom: 0.6rem !important;
}
.especialidad-container .title-dude span{
    font-size: 1.7rem !important;
}
.especialidad-container .element{
    display: flex;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    padding: 1rem;
    flex-flow: column nowrap;
    width: 100%;
    border-radius: 0.4rem;
    margin: 0.6rem 0;
}
.especialidad-container .element h2{
    color: var(--blue);
    margin: 0.3rem 0 ;
    font-size: 1.2rem;
}
.especialidad-container .element .info{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0.5rem;
}
.especialidad-container .element .info div{
    width: 50%;
}
.especialidad-container .element .info div p{
    margin: 0.3rem 0;
    color: var(--opacity-black);
}
.especialidad-container .element .btn-grouped{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 1rem 0 0.5rem 0;
}
.especialidad-container .element .btn-grouped .btn{
    margin: 0 0 0 0.4rem;
}
.revisor-container{
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
}
.revisor-container .rev-element{
    display: flex;
    width: 100%;
    align-items: center;
    padding: 0.5rem;
    margin: 0.5rem 0;
    border-radius: 0.4rem;
    background-color: var(--hover-blue);
    justify-content: space-between;
}
.revisor-container .rev-element p{
    color: var(--opacity-black);
}
.lista-errores{
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-flow: column nowrap;
    justify-content: space-between;
}
.lista-errores h2{
    margin: 0.3rem 0;
    width: 100%;
    text-align: center;
    font-size: 1.1rem;
    color: var(--dark-red) !important;
}
.lista-errores p{
    width: 100%;
    margin: 0.3rem 0;
    padding: 0.8rem 0.4rem;
    background-color: var(--shadow-fort-red);
    box-shadow: 0 0 0.2rem var(--dark-red);
    border-radius: 0.4rem;
    text-align: start !important;
    font-weight: 600;
}
.certificate-validate{
    color: var(--blue);
    font-size: 1.8rem;
    margin: 0 0.5rem 0 0;
}
.revisor-lot-container{
    width: 100%;
    display: flex;
    background-color: var(--very-light-gray);
    padding: 1rem;
    border-radius: 0.4rem;
    flex-flow: column nowrap;
}
.revisor-lot-container .revisor-name-element{
    background-color: white !important;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 1rem;
    align-items: center;
    border-radius: 1rem;
}
.revisor-lot-container .revisor-name-element label{
    color: var(--blue) !important;
    font-size: 1.1rem;
}
.revisor-lot-container .revisor-name-element label b{
    font-size: 0.9rem !important;
}
.my-specialty-container{
    display: flex;
    width: 100%;
    flex-flow: column nowrap;
    padding: 0.3rem;
    height: 88vh !important;
    overflow-y: auto;
}
.my-specialty-container .element{
    box-shadow: 0 0 0.1rem var(--opacity-black);
    display: flex;
    padding: 0.8rem;
    flex-flow: column nowrap;
    width: 100%;
    border-radius: 1rem;
    margin-bottom: 1rem;
}
.my-specialty-container .element h3{
    font-size: 1.1rem;
    margin: 0.2rem 0;
    color: var(--blue);
}
.my-specialty-container .element h4{
    margin: 0.6rem 0;
    color: var(--green);
}
.isa-t-blue b{
    background-color: white !important;
    color: var(--blue) !important;
}
.my-specialty-container .element h4 b{
    background-color: var(--green);
    color: white ;
    padding: 0.2rem 1rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    border-radius: 1rem;
}
.my-specialty-container .element .info-special-active{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.4rem;
    position: relative;
    border-radius: 0.4rem;
    margin-top: 0.5rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    width: 100%;
    background-color: var(--light-shadow-green);
}
.my-specialty-container .element .info-special-active::after{
    content: 'Solicitud activa';
    position: absolute;
    top: -0.6rem;
    right: 0;
    font-weight: 500;
    font-size: 0.89rem !important;
    background-color: var(--green);
    padding: 0.1rem 0.4rem;
    border-radius: 0.3rem 0.3rem 0 0.3rem;
    color: white;
}
.my-specialty-container .element .info-special-active p{
    margin: 0.3rem 0;
}
.my-specialty-container .element .info-special-active .info{
    width: 100%  ;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.my-specialty-container .element .info-special-historic{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.4rem;
    margin-top: 0.5rem;
    position: relative;
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    width: 100%;
    background-color: var(--hover-light-blue);
}
.isa-blue{
    background-color: var(--hover-light-blue) !important;
}
.advice-for-doctor{
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0.4rem;
    height: 100% !important;
    overflow-y: auto;
}
.advice-for-doctor .element{
    width: 100%;
    /* background-color: var(--hover-light-blue); */
    padding: 1rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
    justify-content: space-between;
    border-radius: 1rem;
    margin-bottom: 1rem;
}
.advice-for-doctor .element span{
    font-size: 3rem;
    width: 4rem;
    height: 4rem;
    border-radius: 100%;
    background-color: var(--blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.advice-for-doctor .element .info{
    width: 90%;
}
.advice-for-doctor .element .info h3{
    color: var(--blue) !important;
    margin: 0.3rem 0 !important;
}
.advice-for-doctor .element .info p{
    margin: 0.3rem 0 !important;
}
.special-link{
    text-decoration: underline !important;
    text-align: start;
}
.text-for-obligatory{
    display: flex;
    margin: 0 !important;
    /* width: 100%; */
    align-items: center;
    justify-content: flex-start;
}
.comprobant-section-keeper{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    width: 100%;
    transition: 0.3s;
    height: 100%;
}
.comprobant-section-keeper .filter-section{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 0.5rem 0.5rem;
}
.comprobant-section-keeper .filter-section input{
    padding: 0.4rem 0.5rem;
    border-radius: 0.2rem;
    outline: none;
    border: none;
    margin: 0 !important;
    font-size: 1rem;
}
.comprobant-section-keeper .filter-section .input-container{
    margin: 0 !important;
    width: 50%;
}
.comprobant-section-keeper .filter-section select{
    padding: 0.32rem 0.5rem;
    border-radius: 0.3rem;
    outline: none;
    border: none;
    font-size: 1rem;
    width: 19%;
}
.comprobant-section-keeper .filter-section button{
    min-width: 10%;
    padding: 0.34rem 0.5rem;
    font-size: 1rem;
    color: white;
    cursor: pointer;
    background-color: var(--turk-btn-blue);
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    transition: 0.4s;
}
.comprobant-section-keeper .filter-section button:hover{
    opacity: 0.7;
    transition: 0.2s;
}
.revisores-component{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    width: 100%;
    transition: 0.3s;
    height: 100%;
}
.revisores-component .filter-section{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 0.5rem 0.5rem;
}
.revisores-component .filter-section input{
    padding: 0.4rem 0.5rem;
    border-radius: 0.2rem;
    outline: none;
    border: none;
    margin: 0 !important;
    font-size: 1rem;
}
.revisores-component .filter-section .input-container{
    margin: 0 !important;
    width: 50%;
}
.revisores-component .filter-section select{
    padding: 0.32rem 0.5rem;
    border-radius: 0.3rem;
    outline: none;
    border: none;
    font-size: 1rem;
    width: 19%;
}
.revisores-component .filter-section button{
    min-width: 10%;
    padding: 0.34rem 0.5rem;
    font-size: 1rem;
    color: white;
    cursor: pointer;
    background-color: var(--turk-btn-blue);
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    transition: 0.4s;
}

.revisores-component .filter-section button:hover{
    opacity: 0.7;
    transition: 0.2s;
}
.revisores-component .table-section h4{
    margin: 0;
    font-size: 1rem;
    color: var(--blue);
}
.revisor-documents{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    height: 100%;
}
.revisor-documents .list-docs h4{
    margin: 0.4rem 0;
    font-size: 1rem;
    color: var(--blue);
}
.revisor-documents .list-docs{
    width: 30%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    padding: 0.5rem;
    justify-content: space-between;
    position: relative;
}
.revisor-documents .list-docs .listed{
    width: 100%;
    height: 88%;
    display: flex;
    flex-flow: column nowrap;
    overflow: auto;
    padding: 0.1rem;
    overflow-x: hidden !important;
}
.revisor-documents .list-docs .listed .element{
    width: 100%;
    display: flex;
    align-items: center;
    flex-flow: column nowrap;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.revisor-documents .list-docs .listed .element .table-btn{
    min-width: 5.5rem;
    box-shadow: 0 0 0.1rem var(--blue);
    border-radius: 0 0.4rem 0.4rem 0;
    background-color: var(--hover-blue);
    user-select: none;
}
.table-accept{
    background-color: var(--green) !important;
}
.table-delete{
    background-color: var(--red) !important;
}
.table-accept span, .table-delete span{
    color: white !important;
}
.table-doc-selected{
    background-color: var(--light-blue) !important;
    color: white !important;
    transition: 0.4s;
}
.revisor-documents .list-docs .listed .element a{
    width: 100%;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    padding: 0.7rem;
    border-radius: 0.4rem;
    color: var(--opacity-black);
    transition: 0.4s;
    background-color: white;
}
.revisor-documents .list-docs .listed .element a:hover{
    transform: translateX(0.1rem);
    transition: 0.3s;
    background-color: var(--hover-light-blue);
}
.revisor-documents .list-docs .listed .element .input-container{
    width: 100%;
    margin: 0 !important;
}
.revisor-documents .list-docs .btn-group{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-flow: row nowrap;
}
.revisor-documents .list-docs .btn-group .btn{
    width: 48%;
}
.revisor-documents .embed-docs{
    width: 70%;
    display: flex;
    padding: 0.5rem 1rem;
    flex-flow: column nowrap;
    height: 100%;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    border-radius: 0.4rem;
    position: relative;
}
.revisor-documents .embed-docs h4{
    margin: 0.4rem 0;
    font-size: 1rem;
    text-align: center;
    color: var(--blue);
    font-weight: 300;
}
.revisor-documents .embed-docs embed{
    width: 100%;
    height: 90%;
    background-color: var(--opacity-black);
    position: relative;
    z-index: 2;
}
/* @RESPONSIVE */
@media (max-width: 1560px){
}

footer{
    display: none !important;
}


@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in {
    animation: fadeIn 1s ease-in-out;
}
.animate-fade-in-two {
    animation: fadeIn 1.5s ease-in-out;
}
.animate-fade-in-three {
    animation: fadeIn 2s ease-in-out;
}
.reject-options{
    position: absolute;
    background-color: white;
    right: calc(-1rem);
    padding: 0.3rem 0.8rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    border-radius: 0.4rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    min-width: 35rem !important;
    top: -1rem !important;
}
.reject-options .element{
    width: 79%;
}
.reject-options .element p, .reject-options .btn-section p{
    font-size: 1rem;
    /* font-weight: 600; */
    /* color: var(--light-black); */
    color: var(--red) !important;    
}
.reject-options .element .input-field-textarea{
    height: 4rem !important;
    resize: none !important;
}
.reject-options .btn-section{
    display: flex;
    width: 20%;
    align-items: center;
    /* justify-content: flex-end; */
    flex-flow: column nowrap;
}
.reject-options .btn-section .btn-red{
    background-color: var(--red) !important;
    color: white !important;
}
.reject-options .btn-section .btn{
    width: 100% !important;
    margin-top: 0.5rem !important;
}

/* Componente de usuarios */
.users-component{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    width: 100%;
    transition: 0.3s;
    height: 100%;
}
.users-component .filter-section{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 0.5rem 0.5rem;
}
.users-component .filter-section .input-container{
    margin: 0 !important;
    width: 50%;
}
.users-component .filter-section select{
    padding: 0.32rem 0.5rem;
    border-radius: 0.3rem;
    outline: none;
    border: none;
    font-size: 1rem;
    width: 18.5%;
}
.users-component .filter-section button{
    min-width: 10%;
    padding: 0.34rem 0.5rem;
    font-size: 1rem;
    color: white;
    cursor: pointer;
    background-color: var(--turk-btn-blue);
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    transition: 0.4s;
}

.users-component .filter-section button:hover{
    opacity: 0.7;
    transition: 0.2s;
}
.users-component .table-section h4{
    margin: 0;
    font-size: 1rem;
    color: var(--blue);
}
.btn-orange{
    background-color: var(--orange);
    color: white;
}
.table-btn-especialidades{
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
}
.table-btn-especialidades .btn{
    margin-right: 0.8rem;
}
.table-btn-especialidades .btn:first-child{
    width: 12rem;
}
.table-btn-especialidades-2{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
}
.table-btn-especialidades-2 .tooltip-btn, .table-btn-especialidades .tooltip-btn{
    /* background-color: var(--very-light-gray); */
    box-shadow: 0 0 0.1rem var(--opacity-black);
    border-radius: 0.3rem !important;
    cursor: pointer !important;
    padding: 0.3rem 0.5rem !important;
}
.table-btn-especialidades .tooltip-btn{
    margin-left: 0.7rem !important;
}
.table-btn-especialidades .sub-info-historic {
    background-color: white !important;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    padding: 1rem;
    border-right: solid var(--green) 0.4rem;
    position: absolute;
    display: flex;
    flex-flow: column nowrap;
    z-index: 999;
    width: auto !important;
    margin-left: 1.4rem;
    top: -1rem !important;
    left: 100%;
    min-width: 26rem !important;
}
.table-btn-especialidades .sub-info-div {
    padding: 0.4rem;
    border-radius: 0.4rem;
    /* box-shadow: 0 0 0.1rem var(--opacity-black); */
    justify-content: space-between;
    display: flex;
    align-items: stretch;
}
.font-size-1{
    font-size: 1rem !important;
}
.font-1-4{
    font-size: 1.4rem !important;
}
.font-1-1{
    font-size: 1.1rem !important;
}
.font-1-2{
    font-size: 1.2rem !important;
}
.pago-validate{
    display: flex;
    width: 100%;
    align-items: center;
}
.btn-blue-inf{
    color: var(--blue);
    background-color: white !important;
    box-shadow: 0 0 0.1rem var(--opacity-black);
}
.btn-green-inf{
    color: var(--green);
    background-color: white !important;
    box-shadow: 0 0 0.1rem var(--opacity-black);
}
.hcs1-activa{
    background-color: var(--light-shadow-green) !important;
    box-shadow: 0 0 0.1rem var(--green);
    padding: 0.3rem;
    border-radius: 0.4rem;
    position: relative;
    margin-bottom: 0.5rem;
}
.hcs1-activa::after{
    content: 'Solicitud activa';
    position: absolute;
    top: -20%;
    right: 0;
    font-weight: 500;
    font-size: 0.89rem !important;
    background-color: var(--green);
    padding: 0.1rem 0.4rem;
    border-radius: 0.3rem 0.3rem 0 0.3rem;
    color: white;
}
.hcs1-historica{
    background-color: var(--hover-light-blue) !important;
    box-shadow: 0 0 0.1rem var(--blue);
    padding: 0.3rem;
    border-radius: 0.4rem;
    position: relative;
}
.bitacora-component .full-description{
    left: 100% !important;
    min-width: 40rem !important;
}
.certificate-istrue{
    display: flex;
    width: 100%;
    justify-content: flex-end;
    padding: 0.4rem 0 0 ;
    position: relative;
}
.certificate-istrue .btn{
    background-color: var(--blue);
    margin-left: 0.5rem !important;
    color: white;
    padding: 0.2rem 0.8rem !important;
    /* box-shadow: 0 0 0.1rem var(--opacity-black); */
}
.certificate-istrue .btn p{
    margin: 0 !important;
}
.multiple-father-selector{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.multiple-selector{
    display: flex;
    flex-flow: column nowrap;
    width: 48%;
    align-items: center;
}
.multiple-selector .switch-container{
    width: 100% !important;
}
.multiple-selector .switch-container label{
    width: 50% !important;
}
.multiple-selector .label{
    font-size: 0.95rem;
    /* font-weight: 600; */
    width: 100% !important;
    text-align: start !important;
    color: var(--light-black) !important;
}
.background-none{
    background-color: transparent !important;
}
.background-hover-blue{
    background-color: var(--hover-blue) !important;
}
.background-light-blue{
    background-color: var(--light-blue) !important;
}
.background-hover-blue .back-iconer, .background-light-blue .back-iconer{
    color: var(--blue) !important;
}

.background-green{
    background-color: var(--green) !important;
}
.background-light-shadow-green{
    background-color: var(--light-shadow-green) !important;
}
.background-shadow-green{
    background-color: var(--shadow-green) !important;
}
.background-green .back-iconer, .background-light-shadow-green .back-iconer, .background-shadow-green .back-iconer{
    color: var(--green) !important;
}
.box{
    display: flex;
    flex-flow: column nowrap;
    padding: 0.4rem;
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
}
.margin-l-2rem{
    margin-left: 2rem !important;
}
.margin-0{
    margin: 0 !important;
}
.background-shadow-red{
    background-color: var(--shadow-red) !important;
}
.background-shadow-fort-red{
    background-color: var(--shadow-fort-red) !important;
}
.background-shadow-forty-red{
    background-color: var(--shadow-forty-red) !important;
}
.background-shadow-forter-red{
    background-color: var(--shadow-forter-red) !important;
}
.background-shadow-red .back-iconer, .background-shadow-fort-red .back-iconer, .background-shadow-forty-red .back-iconer, .background-shadow-forter-red .back-iconer{
    color: red !important;
}
.background-very-light-orange{
    background-color: var(--very-light-orange) !important;
}
.costos-not{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 0.4rem;
    /* background-color: var(--shadow-red); */
    color: var(--red);
    border-radius: 0.4rem;
    margin: 0;
    font-weight: 800;
    min-height: 3.9rem;
    box-shadow: 0 0 0.1rem var(--red);
}
.btn-section-left{
    width: 100% !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0.4rem !important;
}
.btn-section-right{
    width: 100% !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0.4rem !important;
}
.historical-solitude{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.4rem;
    margin-top: 0.5rem;
    position: relative;
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    width: 100%;
    background-color: var(--hover-light-blue);
}
.curriculum-section{
    display: flex;
    width: 100%;
    height: 100%;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.curriculum-caplist{
    height: 100%;
    overflow: auto;
    display: flex;
    flex-flow: column nowrap;
    width: 29% !important;
}
.curriculum-capinfo{
    width: 70% !important;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-flow: column nowrap;
    height: 100%;
}
.curriculum-capinfo .btn-section{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* height: 5%; */
}
.curriculum-capinfo .btn-section .btn{
    margin: 0 0 0 1rem;
    padding: 1rem 2rem !important;
    font-size: 1.2rem !important;
}
.link-for-capitulos{
    color: var(--opacity-black);
    text-decoration: none;
    width: 100%;
}
.link-for-capitulos .p-section{
    display: flex;
    align-items: center;
}
.p-section span{
    transition: 0.2s;
}
.link-for-capitulos .p-section span.curriculum-true{
    color: var(--orange);
}
.link-for-capitulos .p-section span.curriculum-false{
    color: var(--background-gray);
}
.link-for-capitulos p{
    margin: 0 !important;
    padding-left: 0.4rem;
}
.link-for-capitulos:hover > .p-section p{
    text-decoration: underline !important
}
.link-for-capitulos:hover > .p-section span{
    transform: translateX(0.1rem);
    transition: 0.2s;
}
.table-no-odd tr td{
    background-color: white;
}
.announcement-capinfo{
    padding: 0.5rem 0.8rem;
    /* background-color: var(--background-gray); */
    background-color: white;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-radius: 0.4rem 0.4rem 0 0;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    position: relative;
    z-index: 1;

}

.announcement-capinfo h4{
    font-size: 1.5rem !important;
    color: var(--blue);
    text-align: center;
    margin: 0.4rem 0 ;
    /* width: 30%; */
}
.guide-for-announcement{
    width: 73%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.guide-for-announcement .element{
    display: flex;
    border-radius: 0.4rem;
    flex-flow: row nowrap;
    width: 24%;
    background-color: var(--hover-light-blue);
    padding: 0.3rem 0.5rem;
    justify-content: space-evenly;
    align-items: center;
}
.guide-for-announcement .element.neutral span{
    color: var(--blue);
    font-size: 1.7rem;
}
.guide-for-announcement .element.positive span{
    color: var(--green);
    font-size: 1.7rem;
}
.guide-for-announcement .element.negative span{
    color: var(--red);
    font-size: 1.7rem;
}
.guide-for-announcement .element.alerting span{
    color: var(--orange);
    font-size: 1.7rem;
}
.guide-for-announcement .element p{
    margin: 0 0 0 0.5rem;
    font-size: 0.9rem;
    color: var(--opacity-black);
}
.important-capinfo{
    /* background-color: var(--shadow-fort-red); */
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    border-radius: 0 0 0.4rem 0.4rem;
    padding: 0.5rem;
    box-shadow: 0 0 0.1rem var(--red);
}
.important-capinfo li{
    background-color: var(--shadow-red);
}
.important-capinfo p{
    margin: 0.2rem 0;
}
.information-capinfo{
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    height: 100%;
}
.resume-capinfo{
    width: 100%;
    height: 60vh !important; 
    display: flex;
    flex-flow: column;
    overflow: auto;
}
.resume-capinfo .element {
    display: flex;
    flex-flow: column nowrap;
}
.resume-capinfo .element h4{
    margin: 1.5rem 0.3rem 0.1rem;
    font-weight: 500;
}
.actividad-capinfo{
    display: flex;
    width: 100%;
    padding: 0.1rem;
    height: 88%;
    flex-flow: column nowrap;
}
.status-for-summary{
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.status-for-summary .none{
    color: var(--background-gray);
    font-size: 2rem;
}
.status-for-summary .neutral{
    color: var(--blue);
    font-size: 2rem;
}
.status-for-summary .positive{
    color: var(--green);
    font-size: 2rem;
}
.status-for-summary .negative{
    color: var(--red);
    font-size: 2rem;
}
.status-for-summary .alerting{
    color: var(--orange);
    font-size: 2rem;
}
.no-sticky-table tr:first-child{
    position: relative !important;
}
.special-link-label{
    background-color: var(--hover-light-blue)!important; 
    text-decoration: underline !important;
}
.pago-finale{
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.pago-finale-es{
    display: flex;
    flex-flow: column nowrap;
    width: 49%;
    height: 100%;
    /* align-items: flex-end; */
}
.pago-finale-info{
    display: flex;
    flex-flow: column nowrap;
    width: 49%;
    /* align-items: flex-end; */
}
.pago-finale-info .capsule-payment{
    width: 100%;
    display: flex;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    padding: 0.4rem 1.4rem;
    border-radius: 0.4rem;
    align-items: center;
    justify-content: space-between;
}
.pago-finale-info .capsule-payment .span{
    font-size: 5rem;
    color: var(--green);
}
.pago-finale-info .capsule-payment p{
    font-size: 1rem;
    margin: 0 !important;
}
.pago-finale-info .capsule-payment p b{
    font-size: 2.5rem !important;
}
.observation-element{
    display: flex;
    width: 100%;
    padding: 0.3rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    background-color: var(--input-field);
    border-radius: 0.4rem;
    margin-bottom: 0.8rem;
    justify-content: space-between;
}
.observation-element-column{
    flex-flow: column nowrap !important;
    align-items: flex-end !important;
}
.observation-element-column p {
    width: 100% !important;
    margin-bottom: 1rem !important;
}
.observation-element-column small{
    width: auto !important;
}
.observation-element p{
    text-align: justify;
    margin: 0;
    font-size: 0.94rem !important;
    width: 85%;
}
.observation-element small{
    /* width: 8rem !important; */
    width: 13%;
    margin-left: 1rem;
    color: var(--blue);
}
.list-miniprofile{
    display: flex;
    width: 100%;
    align-items: center;
    /* padding: 0.3rem; */
}
.list-miniprofile .image-container{
    margin: 0 0.5rem 0 0;
}
.list-miniprofile h5{
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
}
.list-miniprofile h6{
    font-size: 0.95rem;
    font-weight: 200;
    margin: 0.5rem 0 0 0;
}
.revisor-documents .list-docs .list-miniprofile .image-container{
    width: 5rem !important; /* Ancho deseado */
    height: 5rem !important; /* Alto deseado */
}
.btn-group-profile{
    display: flex;
    width: 70%;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    bottom: -100%;
    left: 0;
    padding: 0.5rem;
    background-color: white;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    /* display: none; */
}

.btn-group-profile .btn{
    width: 32%;
}
.subelementer-this{
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
}
.subelementer-this h5{
    font-size: 1rem;
    margin: 0.5rem 0 0 0;
}
.subelementer-this .subelement-this{
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
}
.subelementer-this .subelement-this h6{
    font-size: 1rem;
    font-weight: normal !important;
    margin: 0.5rem 0 0.5rem 0;
}
.subelementer-this .subelement-this .elementer{
    width: 100%;
    display: flex;
    align-items: center !important;
    flex-flow: row nowrap !important;
    justify-content: flex-start;
    margin-bottom: 1rem;
    border-radius: 0.4rem;
    padding: 0 1rem 0;
    transition: 0.3s;
    box-shadow: 0 0 0.1rem var(--opacity-black);
}
.subelementer-this .subelement-this .elementer:hover{
    background-color: var(--background-gray);
    transition: 0.3s;
}
.subelementer-this .subelement-this .elementer .neutral, .infoer-situation .neutral{
    color: var(--blue);
    font-size: 1.7rem;
    margin-right: 1rem;
}
.subelementer-this .subelement-this .elementer .positive, .infoer-situation .positive{
    color: var(--green);
    font-size: 1.7rem;
    margin-right: 1rem;
}
.subelementer-this .subelement-this .elementer .negative, .infoer-situation .negative{
    color: var(--red);
    font-size: 1.7rem;
    margin-right: 1rem;
}
.subelementer-this .subelement-this .elementer .alerting, .infoer-situation .alerting{
    color: var(--orange);
    font-size: 1.7rem;
    margin-right: 1rem;
}
.infoer-situation h4{
    text-align: left !important;
}
.infoer-situation{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.infoer-situation h5{
    font-size: 1rem !important;
}
.infoer-situation h5, .infoer-situation p, .infoer-situation small{
    text-align: start !important;
    margin: 0 0 0.3rem 0 !important;
}
.commenter-sectioner{
    display: flex;
    flex-flow: column nowrap;
    height: 100% !important;
}
.commenter-sectioner h5{
    font-size: 1rem !important;
    margin: 0 0 0.5rem 0;
}
.btn-group-right{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}
.personalize-h{
    max-height: 100% !important;
    height: 100% !important;
}
.personalize-h-2{
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
}
.embed-sectioner{
    width: 60% !important;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}
.embed-sectioner h5{
    font-size: 1rem !important;
    margin: 0 0 0.5rem 0;
}
.embed-sectioner embed{
    width: 100%;
    height: 95.5% !important;
    border-radius: 0.4rem;
}
.commenter-list {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    padding: 0.2rem;
    margin-top: 1rem;
}
.commenter-sectioner{
    width: 39% !important;

}
.commenter-sectioner .btn-group-right .btn{
    background-color: var(--blue);
    color: white !important;
}
.text-justify{
    text-align: justify !important;
}
.container-processes{
    display: flex;
    width: 50%;
    flex-flow: column nowrap;
    padding: 1%;
}
.container-processes .elementerer{
    display: flex;
    align-items: center;
    padding: 0.4rem;
    margin: 0.3rem 0;
}
.container-processes h4{
    font-size: 1rem;
    margin: 0 0 0.5rem 0.4rem;
    color: var(--blue);
}
.complement-specialty{
    display: flex;
    width: 100%;
    flex-flow: column nowrap;
    padding: 0.8rem;
}
.complement-specialty h3{
    width: 100%;
    /* padding: 0.8rem; */
    border-radius: 0.4rem;
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: var(--opacity-black) !important;
    /* background-color: var(--shadow-forty-red); */
}
.complement-specialty .complelement{
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    padding: 0.2rem 0.4rem;
    border-radius: 0.4rem;
}
.complement-specialty .complelement .btn{
    padding: 0.2rem 0.4rem !important;
    margin-left: 1rem;
}
.complement-specialty .complelement-two{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    padding: 0.2rem 0.4rem;
    border-radius: 0.4rem;
}
.this-is-a-detail{
    position: relative;

}
.detailed-thisis{
    position: absolute;
    right: 100%;
    min-width: 35rem;
    background-color: white !important;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    padding: 1rem;
    border-right: solid var(--blue) 0.4rem;
    border-radius: 0.4rem;
    display: flex;
    flex-flow: column nowrap;
    z-index: 2;
}
.detailed-thisis p{
    margin: 0.2rem 0.4rem 0.2rem 0;
    border-radius: 1rem;
    color: var(--opacity-black);
    transition: 0.1s;
    cursor: text;
    font-weight: 400;
    width: 100% !important;
}
.intener-thiser{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
}
.intener-thiser ul{
    width: 92%;
}
.intener-thiser .table-btn{
    width: 8%;
}
.clamp-text{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.private-advice-component{
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: flex-start;
}
.private-advice-component embed{
    width: 100% !important;
}
.embed-private-group-btn{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}
.embed-private-group-btn .checker-for-terms{
    width: 60%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
}
.embed-private-group-btn .checker-for-terms input{
    margin-right: 1rem;
}
.checker-for-terms{
    position: relative;
}
.embed-private-group-btn .btn-group{
    width: 40%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
}
.embed-private-group-btn .btn-group .btn-green{
    margin-left: 1rem;
}
.bg-this{
    background-color: var(--hover-blue);
    padding: 1rem;
    box-shadow: 0 0 0.1rem black;
    border-radius: 0.4rem;
}
.bg-this ul{
    list-style-type: none !important;
}
.bg-this p{
    text-align: start;
}
.bg-this ul li{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.4rem;
}
.bg-this ul li span{
    color: white;
    background-color: var(--blue);
    border-radius: 100%;
    padding: 0.2rem;
    margin-right: 1rem;
}

.validacion-component{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    width: 100%;
    transition: 0.3s;
    height: 100%;
}
.validacion-component .filter-section{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 0.5rem 0.5rem;
}
.validacion-component .filter-section input{
    padding: 0.4rem 0.5rem;
    border-radius: 0.2rem;
    outline: none;
    border: none;
    margin: 0 !important;
    font-size: 1rem;
}
.validacion-component .filter-section .input-container{
    margin: 0 !important;
    width: 21.5%;
}
.validacion-component .filter-section select{
    padding: 0.32rem 0.5rem;
    border-radius: 0.3rem;
    outline: none;
    border: none;
    font-size: 1rem;
    width: 15%;
}
.validacion-component .filter-section button{
    min-width: 10%;
    padding: 0.34rem 0.5rem;
    font-size: 1rem;
    color: white;
    cursor: pointer;
    background-color: var(--turk-btn-blue);
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    transition: 0.4s;
}

.validacion-component .filter-section button:hover{
    opacity: 0.7;
    transition: 0.2s;
}
.validacion-component .table-section h4{
    margin: 0;
    font-size: 1rem;
    color: var(--blue);
}
.validacion-component .retable{
    width: 100%;
    height: 100% !important;
    display: flex;
    flex-flow: row nowrap;
}
.validacion-component .retable .retable-content{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    width: 40%;
    height: 100% !important;
}
.validacion-component .retable .retable-content .table-section{
    height: 95%;
}
.validacion-component .retable .status-acuse{
    padding: 0.5rem 1rem;
    /* margin: 0.5rem; */
    width: 60%;
    /* height: 100%; */
    display: flex;
    flex-flow: column nowrap;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    border-radius: 0.4rem;
    overflow: auto;
    background-color: var(--light-blue-for-table);
}
.validacion-component .retable .status-acuse .title-dude-triple{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}
.validacion-component .retable .status-acuse .title-dude-triple .flex-center input{
    margin-right: 0.4rem;
}
.validacion-component .retable .status-acuse .certificados-validate-elementer .element{
    width: 100%;
    margin-bottom: 0.8rem;
    padding: 0.8rem;
    border-radius: 0.4rem;
    background-color: var(--very-light-gray);
    box-shadow: 0 0 0.1rem var(--opacity-black);
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
}
.validacion-component .retable .status-acuse h4{
    margin: 0 0 1rem;
    font-size: 1.1rem;
    color: var(--blue);
    width: 100%;
    text-align: center;
}
.validacion-component .retable .status-acuse .certificados-validate-elementer .element p{
    margin: 0;
}
.validacion-component .retable .status-acuse .certificados-validate-elementer .element .status-for-certificado{
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    padding: 0.2rem 1rem;
    border-radius: 0 0.4rem 0 0.4rem;
    color: white !important;
    align-items: center;
    justify-content: space-between;
    min-width:18%;
}
.validacion-component .retable .status-acuse .certificados-validate-elementer .element .status-for-certificado span{
    margin-right: 0.4rem;
}
.sfc-green{
    background-color: var(--green) !important;
}
.sfc-red{
    background-color: var(--red) !important;
}
.validacion-component .retable .status-acuse .certificados-validate-elementer{
    max-height: 80%;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    margin-top: 1rem;
    overflow: scroll;
    padding: 1%;
}
.folio-consecutivo{
    display: flex;
    width: 100%;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}
.folio-consecutivo .element{
    width: 49%;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    padding: 0.8rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    border-radius: 0.4rem;
    background-color: white;
}
.folio-consecutivo .element span{
    margin-right: 0.4rem;
}
.folio-consecutivo .element.e-green span{
    color: var(--green) !important;
}
.folio-consecutivo .element.e-red span{
    color: var(--red) !important;
}
.cobros-component{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    width: 100%;
    transition: 0.3s;
    height: 100%;
}
.cobros-component .filter-section{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 0.5rem 0.5rem;
}
.cobros-component .filter-section input{
    padding: 0.4rem 0.5rem;
    border-radius: 0.2rem;
    outline: none;
    border: none;
    margin: 0 !important;
    font-size: 1rem;
}
.cobros-component .filter-section .input-container{
    margin: 0 !important;
    width: 48%;
}
.cobros-component .filter-section select{
    padding: 0.32rem 0.5rem;
    border-radius: 0.3rem;
    outline: none;
    border: none;
    font-size: 1rem;
    width: 20%;
}
.cobros-component .filter-section button{
    min-width: 10%;
    padding: 0.34rem 0.5rem;
    font-size: 1rem;
    color: white;
    cursor: pointer;
    background-color: var(--turk-btn-blue);
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    transition: 0.4s;
}

.cobros-component .filter-section button:hover{
    opacity: 0.7;
    transition: 0.2s;
}
.cobros-component .table-section h4{
    margin: 0;
    font-size: 1rem;
    color: var(--blue);
}
.cobros-component .cobros-container{
    width: 100%;
    height: 93%;
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
}
.cobros-component .cobros-container .cobros-info{
    width: 40%;
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
    overflow-y: auto;
}
.cobros-component .cobros-container .cobros-info .periodos-container{
    display: flex;
    flex-flow: column nowrap;
    padding: 0.2rem;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.cobros-component .cobros-container .cobros-info .periodos-container .element{
    box-shadow: 0 0 0.1rem var(--opacity-black);
    padding: 0.8rem;
    border-radius: 0.4rem;
    margin-bottom: 1rem !important;
    border-right: solid 0.3rem var(--shadow-gray);
}
.cobros-component .cobros-container .cobros-info .periodos-container .element.bg-hover-blue{
    border-right: solid 0.3rem var(--background-blue) !important;
}
.cobros-component .cobros-container .cobros-info .periodos-container .element .list-for-table-labels li b{
    background-color: var(--background-gray);
    color: var(--blue);
    border:solid  0.1rem var(--blue);
    margin: 0.1rem 0.3rem 0.1rem 0;
    border-radius: 100%;
    width: 1.9rem !important;
    height: 1.9rem !important;
    display: flex;
    align-items: center;
    justify-content: center;

}
.cobros-component .cobros-container .cobros-info .periodos-container .element .list-for-table-labels li{
    display: flex;
    align-items: center;
}
.periodo-info{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 1.4rem 0;
}
.periodo-info .monto-info{
    display: flex;
    flex-flow: column nowrap;
    width: 49%;
}
.periodo-info .monto-info h6{
    font-size: 2.1rem;
    margin: 0.5rem 0 !important;
    color: var(--blue);
}
.cobros-component .cobros-medicos{
    width: 59%;
    display: flex;
    flex-flow: column nowrap;
}
.coordination-resume{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    padding: 0.4rem;
    overflow-x: auto;
    height: 21rem;
    overflow-y: hidden;
}
.coordination-resume .element{
    width: 32%;
    margin-right: 1%;
    min-width: 26%;
    display: flex;
    height: 100%;
    /* height: 20rem; */
    flex-flow: column nowrap;
    background-color: var(--background-gray);
    padding: 1rem;
    border-radius: 0.4rem;
}
.coordination-resume .element .flex{
    width: 100%;
    justify-content: flex-start;
}
.coordination-resume .element .flex .subelement{
    width: 22% !important;
    margin-right: 3%;
    margin-bottom: 1%;
}
.coordination-resume .element .flex .subelement h4{
    font-size: 1.1rem;
    color: var(--blue);
    margin: 0.4rem 0;
    font-weight: 100;
}
.coordination-resume .element .flex .subelement p{
    font-size: 0.9rem;
    margin: 0.1rem 0;
    /* font-weight: 700; */
}
.coordination-resume .element h5{
    margin: 0;
    font-size: 1rem;
    font-weight: 100;
}
.coordination-resume .list-for-table-labels li{
    cursor: pointer !important;
}
.coordination-component .sectioner{
    margin-top: 0.5rem !important;

}
.coordination-component{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column nowrap;
    width: 100%;
    transition: 0.3s;
    height: 100%;
}
.coordination-component .coordination-table{
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    height: 60%;
}
.coordination-component .filter-section{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 0.5rem 0.5rem;
}
.coordination-component .filter-section input{
    padding: 0.4rem 0.5rem;
    border-radius: 0.2rem;
    outline: none;
    border: none;
    margin: 0 !important;
    font-size: 1rem;
}
.coordination-component .filter-section .input-container{
    margin: 0 !important;
    width: 68%;
}
.coordination-component .filter-section select{
    padding: 0.32rem 0.5rem;
    border-radius: 0.3rem;
    outline: none;
    border: none;
    font-size: 1rem;
    width: 20%;
}
.coordination-component .filter-section button{
    min-width: 10%;
    padding: 0.34rem 0.5rem;
    font-size: 1rem;
    color: white;
    cursor: pointer;
    background-color: var(--turk-btn-blue);
    border-radius: 0.4rem;
    box-shadow: 0 0 0.1rem var(--opacity-black);
    transition: 0.4s;
}

.coordination-component .filter-section button:hover{
    opacity: 0.7;
    transition: 0.2s;
}
.secondary-btn{
    padding: 0rem !important;
}
.secondary-btn span{
    font-size: 2rem !important;
}
.special-pointer{
    font-size: 1.7rem !important;
    color: var(--blue);
}
.btn-more-actions{
    background-color: var(--background-gray);
    box-shadow: 0 0 0.1rem var(--opacity-black);
    padding: 0.3rem;
    transition: 0.4s;
}
.btn-more-actions:hover{
    transition: 0.4s;
    background-color: var(--shadow-gray);
}
.div-advice-red{
    background-color: var(--red);
    color: white !important;
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.4rem;
}
.div-advice-red span{
    margin-right: 0.4rem;
}
.div-advice-red p{
    margin: 0;
    font-size: 0.95rem !important;
}


/* Tamaños de texto */
.font-095{
    font-size: 0.95rem !important;
}
.font-09{
    font-size: 0.9rem !important;
}
.font-1{
    font-size: 1rem !important;
}
.font-1-1{
    font-size: 1.1rem !important;
}
.font-1-2{
    font-size: 1.2rem !important;
}
.font-1-3{
    font-size: 1.3rem !important;
}
.font-1-4{
    font-size: 1.4rem !important;
}
.font-1-5{
    font-size: 1.5rem !important;
}
.font-2{
    font-size: 2rem !important;
}
.font-3{
    font-size: 3rem !important;
}
.font-4{
    font-size: 4rem !important;
}
.font-5{
    font-size: 5rem !important;
}
.font-6{
    font-size: 6rem !important;
}
.font-7{
    font-size: 7rem !important;
}
.font-8{
    font-size: 8rem !important;
}
.font-9{
    font-size: 9rem !important;
}
.opacity-1{
    opacity: 0.1;
}
.opacity-2{
    opacity: 0.2;
}
.opacity-3{
    opacity: 0.3;
}
.opacity-4{
    opacity: 0.4;
}
.opacity-5{
    opacity: 0.5;
}
.opacity-6{
    opacity: 0.6;
}
.opacity-7{
    opacity: 0.7;
}
.opacity-8{
    opacity: 0.8;
}
.opacity-9{
    opacity: 0.9;
}
.opacity-10{
    opacity: 1;
}
/* min-height classes */
.min-h-5{
    min-height: 5vh !important;
}
.min-h-10{
    min-height: 10vh !important;
}
.min-h-15{
    min-height: 15vh !important;
}
.min-h-20{
    min-height: 20vh !important;
}
.min-h-25{
    min-height: 25vh !important;
}
.min-h-30{
    min-height: 30vh !important;
}
.min-h-35{
    min-height: 35vh !important;
}
.min-h-40{
    min-height: 40vh !important;
}
.min-h-45{
    min-height: 45vh !important;
}
.min-h-50{
    min-height: 50vh !important;
}
.min-h-55{
    min-height: 55vh !important;
}
.min-h-60{
    min-height: 60vh !important;
}
.min-h-65{
    min-height: 65vh !important;
}
.min-h-70{
    min-height: 70vh !important;
}
.min-h-75{
    min-height: 75vh !important;
}
.min-h-80{
    min-height: 80vh !important;
}
.min-h-85{
    min-height: 85vh !important;
}
.min-h-90{
    min-height: 90vh !important;
}
.min-h-95{
    min-height: 95vh !important;
}
.min-h-100{
    min-height: 100vh !important;
}
/* height classes */
.h-5{
    height: 5vh !important;
}
.h-10{
    height: 10vh !important;
}
.h-15{
    height: 15vh !important;
}
.h-20{
    height: 20vh !important;
}
.h-25{
    height: 25vh !important;
}
.h-30{
    height: 30vh !important;
}
.h-35{
    height: 35vh !important;
}
.h-40{
    height: 40vh !important;
}
.h-45{
    height: 45vh !important;
}
.h-50{
    height: 50vh !important;
}
.h-55{
    height: 55vh !important;
}
.h-57{
    height: 57vh !important;
}
.h-60{
    height: 60vh !important;
}
.h-65{
    height: 65vh !important;
}
.h-70{
    height: 70vh !important;
}
.h-75{
    height: 75vh !important;
}
.h-80{
    height: 80vh !important;
}
.h-85{
    height: 85vh !important;
}
.h-90{
    height: 90vh !important;
}
.h-95{
    height: 95vh !important;
}
.h-100{
    height: 100vh !important;
}
.h-50p{
    height: 50% !important;
}
.h-100p{
    height: 100% !important;
}
/* max-height classes */
.max-h-5{
    max-height: 5vh !important;
}
.max-h-10{
    max-height: 10vh !important;
}
.max-h-15{
    max-height: 15vh !important;
}
.max-h-20{
    max-height: 20vh !important;
}
.max-h-25{
    max-height: 25vh !important;
}
.max-h-30{
    max-height: 30vh !important;
}
.max-h-35{
    max-height: 35vh !important;
}
.max-h-40{
    max-height: 40vh !important;
}
.max-h-45{
    max-height: 45vh !important;
}
.max-h-50{
    max-height: 50vh !important;
}
.max-h-55{
    max-height: 55vh !important;
}
.max-h-60{
    max-height: 60vh !important;
}
.max-h-65{
    max-height: 65vh !important;
}
.max-h-70{
    max-height: 70vh !important;
}
.max-h-75{
    max-height: 75vh !important;
}
.max-h-80{
    max-height: 80vh !important;
}
.max-h-85{
    max-height: 85vh !important;
}
.max-h-90{
    max-height: 90vh !important;
}
.max-h-95{
    max-height: 95vh !important;
}
.max-h-100{
    max-height: 100vh !important;
}

/* Width */
.w-1 {
    min-width: 1% !important;
    width: 1% !important;
}
.w-2 {
    min-width: 2% !important;
    width: 2% !important;
}
.w-3 {
    min-width: 3% !important;
    width: 3% !important;
}
.w-4 {
    min-width: 4% !important;
    width: 4% !important;
}
.w-5 {
    min-width: 5% !important;
    width: 5% !important;
}
.w-6 {
    min-width: 6% !important;
    width: 6% !important;
}
.w-7 {
    min-width: 7% !important;
    width: 7% !important;
}
.w-8 {
    min-width: 8% !important;
    width: 8% !important;
}
.w-9 {
    min-width: 9% !important;
    width: 9% !important;
}
.w-10 {
    min-width: 10% !important;
    width: 10% !important;
}
.w-11 {
    min-width: 11% !important;
    width: 11% !important;
}
.w-12 {
    min-width: 12% !important;
    width: 12% !important;
}
.w-13 {
    min-width: 13% !important;
    width: 13% !important;
}
.w-14 {
    min-width: 14% !important;
    width: 14% !important;
}
.w-15 {
    min-width: 15% !important;
    width: 15% !important;
}
.w-16 {
    min-width: 16% !important;
    width: 16% !important;
}
.w-17 {
    min-width: 17% !important;
    width: 17% !important;
}
.w-18 {
    min-width: 18% !important;
    width: 18% !important;
}
.w-19 {
    min-width: 19% !important;
    width: 19% !important;
}
.w-20 {
    min-width: 20% !important;
    width: 20% !important;
}
.w-21 {
    min-width: 21% !important;
    width: 21% !important;
}
.w-22 {
    min-width: 22% !important;
    width: 22% !important;
}
.w-23 {
    min-width: 23% !important;
    width: 23% !important;
}
.w-24 {
    min-width: 24% !important;
    width: 24% !important;
}
.w-24_5 {
    min-width: 24.5% !important;
    width: 24.5% !important;
}
.w-25 {
    min-width: 25% !important;
    width: 25% !important;
}
.w-26 {
    min-width: 26% !important;
    width: 26% !important;
}
.w-27 {
    min-width: 27% !important;
    width: 27% !important;
}
.w-28 {
    min-width: 28% !important;
    width: 28% !important;
}
.w-29 {
    min-width: 29% !important;
    width: 29% !important;
}
.w-30 {
    min-width: 30% !important;
    width: 30% !important;
}
.w-31 {
    min-width: 31% !important;
    width: 31% !important;
}
.w-32 {
    min-width: 32% !important;
    width: 32% !important;
}
.w-33 {
    min-width: 33% !important;
    width: 33% !important;
}
.w-34 {
    min-width: 34% !important;
    width: 34% !important;
}
.w-35 {
    min-width: 35% !important;
    width: 35% !important;
}
.w-36 {
    min-width: 36% !important;
    width: 36% !important;
}
.w-37 {
    min-width: 37% !important;
    width: 37% !important;
}
.w-38 {
    min-width: 38% !important;
    width: 38% !important;
}
.w-39 {
    min-width: 39% !important;
    width: 39% !important;
}
.w-40 {
    min-width: 40% !important;
    width: 40% !important;
}
.w-41 {
    min-width: 41% !important;
    width: 41% !important;
}
.w-42 {
    min-width: 42% !important;
    width: 42% !important;
}
.w-43 {
    min-width: 43% !important;
    width: 43% !important;
}
.w-44 {
    min-width: 44% !important;
    width: 44% !important;
}
.w-45 {
    min-width: 45% !important;
    width: 45% !important;
}
.w-46 {
    min-width: 46% !important;
    width: 46% !important;
}
.w-47 {
    min-width: 47% !important;
    width: 47% !important;
}
.w-48 {
    min-width: 48% !important;
    width: 48% !important;
}
.w-49 {
    min-width: 49% !important;
    width: 49% !important;
}
.w-49-input {
    min-width: 49.3% !important;
    width: 49.3% !important;
}
.w-49_6{
    min-width: 49.6% !important;
    width: 49.6% !important;
}
.w-50 {
    min-width: 50% !important;
    width: 50% !important;
}

.w-51 {
    min-width: 51% !important;
    width: 51% !important;
}

.w-52 {
    min-width: 52% !important;
    width: 52% !important;
}

.w-53 {
    min-width: 53% !important;
    width: 53% !important;
}

.w-54 {
    min-width: 54% !important;
    width: 54% !important;
}

.w-55 {
    min-width: 55% !important;
    width: 55% !important;
}

.w-56 {
    min-width: 56% !important;
    width: 56% !important;
}

.w-57 {
    min-width: 57% !important;
    width: 57% !important;
}

.w-58 {
    min-width: 58% !important;
    width: 58% !important;
}

.w-59 {
    min-width: 59% !important;
    width: 59% !important;
}

.w-60 {
    min-width: 60% !important;
    width: 60% !important;
}

.w-61 {
    min-width: 61% !important;
    width: 61% !important;
}

.w-62 {
    min-width: 62% !important;
    width: 62% !important;
}

.w-63 {
    min-width: 63% !important;
    width: 63% !important;
}

.w-64 {
    min-width: 64% !important;
    width: 64% !important;
}

.w-65 {
    min-width: 65% !important;
    width: 65% !important;
}

.w-66 {
    min-width: 66% !important;
    width: 66% !important;
}

.w-67 {
    min-width: 67% !important;
    width: 67% !important;
}

.w-68 {
    min-width: 68% !important;
    width: 68% !important;
}

.w-69 {
    min-width: 69% !important;
    width: 69% !important;
}

.w-70 {
    min-width: 70% !important;
    width: 70% !important;
}

.w-75{
    min-width: 75% !important;
    width: 75% !important;
}
.w-77{
    min-width: 77% !important;
    width: 77% !important;
}
.w-78{
    min-width: 78% !important;
    width: 78% !important;
}
.w-80{
    min-width: 80% !important;
    width: 80% !important;
}
.w-85{
    min-width: 85% !important;
    width: 85% !important;
}
.w-90{
    min-width: 90% !important;
    width: 90% !important;
}
.w-95{
    min-width: 95% !important;
    width: 95% !important;
}
.w-100{
    /* min-width: 100% !important; */
    width: 100% !important;
}

/* divs flex */
.flex{
    display: flex;
}
.flex-center{
    display: flex;
    align-items: center;
}
.flex-start{
    display: flex;
    align-items: flex-start;
}
.flex-start-between{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.flex-center-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-center-end{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.flex-center-between{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.flex-center-start{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.flex-stretch-between{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}
.flexc-end-center{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-end;
    justify-content: center;
}
.flexc{
    display: flex !important;
    flex-flow: column nowrap !important;
}
.flexc-start{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
}
.flexc-center{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
.flexc-center-center{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}
.flexc-start-between{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: space-between;
}
.flexc-center-between{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-between;
}
.text-center, .main-title{
    text-align: center !important;
}
.text-justify{
    text-align: justify !important;
}
.text-start{
    text-align: start !important;
}
.text-end{
    text-align: end ;
}
.box-new{
    padding: 0.4rem 0.8rem;
    border-radius: 0.4rem;
    transition: 0.3s;
    background-color: #f0f0f0;
    box-shadow: 0 0 0.1rem var(--black-3);
}
.bg-white{
    background-color: white !important;
}
.list-labels{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: row wrap;
    text-decoration: none;
    list-style: none;
}
.list-labels li{
    background-color: white;
    box-shadow: 0 0 0.1rem var(--black-2);
    padding: 0.2rem 0.6rem;
    margin: 0 0.4rem 0.1rem 0;
    border-radius: 0.4rem;
    /* color: var(--light-black); */
    color: var(--black-2);
    transition: 0.1s;
    font-size: 0.94rem;
    font-weight: 400;
}
.list-labels li:hover{
    background-color: var(--gray-9);
    transition: 0.2s;
}
.padding-0{
    padding: 0 !important;
}

@media (max-width: 1080px){
    .login-container .login-card{
        width: 90% !important;
        margin: 1rem 0 !important;
    }
}
@media (max-width: 840px){
    .login-container{
        overflow: auto !important;
        align-items: flex-start !important;
    }
    .login-container .login-card{
        width: 90% !important;
        flex-flow: column nowrap !important;
    }
    .login-card .credentials-section,  .login-card .img-container{
        margin: 1rem 0 2rem;
        width: 90% !important;
        display: flex;
        align-items: center !important;
        justify-content: center !important;
    }
    .login-card .img-container img{
        width: 60% !important;
    }
    .appear-restablish{
        display: flex !important;
    }
    .disappear-restablish{
        display: none !important;
    }
}