/** REGISTRATION/EDIT FORM */
 /* Style for eye icon */
.toggle-password {
    position: absolute;
    margin-top: -20px;
    right: 18px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #f9c514;
    font-size: 20px;
}

/* Change eye color when password is visible */
.toggle-password.visible {
    color: #777777;
}

.body-giffoni-flusso-login-cambia .toggle-password {
    margin-top: 50px !important;
}
.body-giffoni-flusso-login-cambia .mt-0.toggle-password {
    margin-top: 0 !important;
}

#preview_user_pic {
    margin-top: 20px;
    width: 100px;
    height: 100px;
    object-fit: cover;
    display: none;
}

.card-registration form {
    position: relative;
}
.has-error input, .has-error select {
    border-color: var(--bs-form-invalid-border-color) !important;
    padding-right: calc(1.5em + .75rem);

}
.has-error input:not(.form-check-input), .has-error select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.has-error .help-block { color: var(--bs-form-invalid-border-color) !important;}

/** PROFILE */

main {
    --black-color: #000000;
    --white-color: #ffffff;
    --white-color-rgb: 255, 255, 255;
    --light-main-color: #8ddbf5;
    --mid-main-color: #43aaca;
    --dark-main-color: #3da6c7;
    --light-gray-color: #E6E6E6;
    --mid-gray-color: #747474;
    --mid-gray-color-rgb: 216, 216, 216;
    --dark-gray-color: #414949;
    --red-color: #FF0604;
    --yellow-color: #F9C514;

    font-family: "Inter", sans-serif;
    font-weight: 400;
    color: var(--white-color);
}
main .empty {
    color: var(--red-color);
}

a.download-cv {
    background: none;
    border: none;
    cursor: pointer;

    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    text-align: inherit;
}

.user-info {
    background: var(--light-main-color);
    background: linear-gradient(180deg, var(--light-main-color) 0%, var(--mid-main-color) 80%, var(--dark-main-color) 100%);
    height: 296px;
    width: 100%;
    padding-top: 26px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.user-info .avatar {
    height: 104px;
    width: 104px;
    border-radius: 100%;
    background-color: var(--light-gray-color);
    color: var(--mid-gray-color);

    display: flex;
    justify-content: center;
    align-items: center;

    /* background-image: url(gatto.jpg);
    background-size: cover; */
}

.user-info .avatar i {
    font-size: 50px;
}

.user-info .actions, .main-cover .actions {
    position: absolute;
    top: 25%;
    left: calc(50% + 130px);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;

    font-size: 25px;
}

.user-info .actions .circle, .main-cover .actions .circle {
    width: 35px;
    height: 35px;
    background-color: var(--dark-gray-color);
    border-radius: 100px;

    color: var(--white-color);
    font-size: 18px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.user-info .name {
    color: var(--yellow-color);
    font-size: 20px;
    font-weight: 700;
    margin-top: 5px;
}

.user-info .contacts {
    font-size: 14px;
    margin-top: 2px;

    display: flex;
    gap: 5px;
}

.user-info .tag {
    font-size: 12px;
    border: 1px solid var(--white-color);
    border-radius:  100px;
    padding: 4px 13px 5px 13px;
    margin: 17px 0px 20px;
}

.user-info .personal-info {
    border-top: 1px solid rgba(var(--white-color-rgb), 0.2);
    padding: 10px 25px;
    width: 341px;
    font-size: 14px;

    display: flex;
    justify-content: space-between;
}

.user-info .personal-info .info {
    display: flex;
    gap: 7px;
    align-items: center;
}

.user-info .personal-info .icon {
    font-size: 16px;
}

.curriculum {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.curriculum a {
    height: 54px;
    width: 344px;
    border: 1px solid var(--black-color);
    border-radius: 8px;
    padding-left: 20px;
    margin: 25px 17px;
    background:#f9c514;
    display: flex;
    align-items: center;

    text-transform: uppercase;
    font-size: 14px;
    color: var(--black-color);
}

.curriculum .text {
    width: 80%;
}

.curriculum .icon {
    margin-right: 20px;
    font-size: 22px;
    color: inherit;
}

.curriculum .icon.download {
    text-align: right;
}

.curriculum .icon.download.empty {
    color: var(--white-color);
}

.settings {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.settings .navbar,
.settings .logout {
    width: 375px;

    font-size: 16px;
    font-weight: 700;
    text-align: left;
    color: var(--black-color);
}

.settings .navbar {
    display: flex;
    flex-direction: column;
}

.settings .navbar a {
    border-top: 1px solid rgba(var(--mid-gray-color-rgb), 0.4);
    padding: 8px 17px;
    width: 100%;
    text-transform: uppercase;
    /* background-color: white; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settings .navbar a:last-of-type {
    border-bottom: 1px solid rgba(var(--mid-gray-color-rgb), 0.4);
}

.settings .navbar a .icon {
    font-size: 16px;
    color: #fff;
}

.settings .logout {
    padding: 20px 17px;
    display: inline-block;
}

.settings .logout a {
    text-decoration: underline;
    color: #fff;
}

/** LOST PASSWORD */

body.login-action-lostpassword, body.login-action-checkemail, body.login-action-rp {
    background-color: #000 !important;
}
body.login-action-lostpassword h1.wp-login-logo,
body.login-action-checkemail h1.wp-login-logo,
body.login-action-rp h1.wp-login-logo {
    background-image: url(https://avreiquestaidea.it/wp-content/uploads/2024/12/logo-avrei-questa-idea-in-bianco.svg) !important;
    height: 150px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 100px;
}
body.login-action-lostpassword h1.wp-login-logo a,
body.login-action-lostpassword #nav,
body.login-action-lostpassword .language-switcher,
body.login-action-checkemail h1.wp-login-logo a,
body.login-action-checkemail #nav,
body.login-action-checkemail .language-switcher,
body.login-action-rp h1.wp-login-logo a,
body.login-action-rp #nav,
body.login-action-rp .language-switcher {
    display: none !important;
}
body.login-action-lostpassword #backtoblog, body.login-action-lostpassword #backtoblog a, body.login-action-lostpassword #backtoblog a:hover, body.login-action-lostpassword #backtoblog a:visited,
body.login-action-checkemail #backtoblog, body.login-action-checkemail #backtoblog a, body.login-action-checkemail #backtoblog a:hover, body.login-action-checkemail #backtoblog a:visited,
body.login-action-rp #backtoblog, body.login-action-rp #backtoblog a, body.login-action-rp #backtoblog a:hover, body.login-action-rp #backtoblog a:visited {
    text-align: center;
    color: #fff !important;
}
body.login-action-lostpassword .login label,
body.login-action-checkemail .login label,
body.login-action-rp .login label {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000;
}
body.login-action-lostpassword #login,
body.login-action-checkemail #login,
body.login-action-rp #login {
    padding: 2rem;
    background-color: #000;
}
body.login-action-lostpassword #lostpasswordform {
    border-radius: 8px !important;
}
/* Style for eye icon */
#toggle-password{
    position: absolute;
    top: 58%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #f9c514;
    font-size: 20px;
}

/* Change eye color when password is visible */
#toggle-password.visible {
    color: #777777;
}

.login form, .body-giffoni-flusso-login-cambia form {
    position: relative;
}

/** ===========================
        RESPONSIVE
    ===========================*/
@media (min-width: 959px) {
    #toggle-password, .toggle-password {
        top: 57%;
    }
    #RLTRegistrationForm .toggle-password {
        top: auto; /* Oppure il valore che desideri per annullare l'effetto */
    }

}
@media (max-width: 958px) {
    .body-giffoni-flusso-login-cambia .mt-0.toggle-password {
        margin-top: 25px !important;
    }

}
@media (min-width: 768px) {
    main {
        display: flex;
    }

    .account-info {
        flex: 8;
    }

    .settings {
        flex: 4;
    }
}