/* din boostrap 5 */

.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm,
.container {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container-sm,
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container-md,
    .container-sm,
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1320px;
    }
}

body {
    font-family: "Onest", sans-serif;
    -webkit-font-smoothing: antialiased; /* Safari, Chrome */
    -moz-osx-font-smoothing: grayscale; /* Firefox */
    font-weight: 400;
    font-style: normal;
}

.auth-logo img {
    width: 221px;
    height: 90px;
    aspect-ratio: 221/90;
}

.box-role {
    padding: 24px;
    border-radius: 16px;
    background: #f6f6f7;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    gap: 20px;
    height: auto;
}

.box-role .box-icon img {
    width: 177px;
    height: 177px;
}

.box-role .box-title{
    font-size: 24px;
    color: #282780;
    font-weight: 600;
}

.box-role .box-text span {
    color: #000;
    font-family: Onest;
    font-size: 16px;
    font-weight: 400;
    line-height: 160%;
}


/* .box-right  */
.box-image img {
    /* position: absolute; */
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* height: 100%; */
    border-radius: 32px;

    /* background: url("/images/hero/hero_group.png") no-repeat center bottom; */
    /* background-size: 80% auto;
    height: 100%; */
}
.text-sub-btn {
    margin: auto;
}

.box-role .left-part {
    position: relative;
}

.box-role .box-text {
    position: absolute;
    bottom: 0;
}


.btn-continua {
    width: inherit;
    background-color: #2a2a8a; /* exemplu de culoare */
    color: #fff !important;
    border-radius: 20px;
    width: 100%;
    height: 60px; /* setează o înălțime fixă sau după nevoie */
    display: flex;
    align-items: center; /* centrează vertical */
    justify-content: center; /* centrează orizontal */
    text-decoration: none;
}

.tabs {
    color: black;
}

a.tabs {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
}

a.tabs:hover .box-role {
    background-color: #282780;
    transition: background-color 0.3s ease;
}

a.tabs:hover .box-role span {
    color: #fff;
}

.linie-login{
    border-top: 1px solid rgba(0,0,0,.1);
    width: 100%;
}

.divNegativ span{
    background-color: #fff;
    padding: 10px;
    margin-top: -55px;
    display: inline-block;
}

.btn-azure{
    margin-top: 15px;
    background-color: #0085CF;
    font-size: 16px;
    border-radius: 16px;
    color: #fff;
}

.btn-azure span{
    font-weight: 600;
}








.autentificare{
    padding: 50px;
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 50px;
}

.auth-left{
    width: 35%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 50px;
}
.auth-right{
    width: 65%;
    min-height: 100%;
    border-radius: 32px;
    background: 
    url('/images/hero/logo_rau_hero.png') no-repeat center center,
    radial-gradient(77.39% 77.39% at 50% 100%, #2A3D9B 0%, #091A55 100%);
    background-size: cover, cover; 
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    overflow: hidden;
}
.auth-right img{
    width: auto;
    height: 75%;
}

.auth-page-content {
    display: flex;
    flex-direction: column;
}

.login{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.student-txt{
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 0px;
}

@media (max-width: 1400px){
    .auth-left{
        width: 50%;
    }
    .autentificare{
        padding: 20px;
        gap: 20px;
    }
}   
@media (max-width: 1024px){
    .student-icon img{
        width: 120px;
    }
    .student-txt{
        padding: 0;
    }
}
@media (max-width: 800px){
    .autentificare{
        flex-direction: column;
    }
    .auth-left{
        width: 100%;
    }
    .auth-right{
        /* width: 100%; */
        display: none;
    }
}