body{
    font-family: "Rethink Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: 16px;
    font-style: normal;
}
.tiscali-logo {
    background-image: url(/img/attivazione_sim/tiscali_logo_color.svg);
}
.header-hp-xs {
    padding: 18px 0px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #E7E6E8;
}
.logo-container-hp-xs {
    width: 150px;
    background-size: contain;
    background-repeat: no-repeat;
}
.assistenza-hp-xs {
    vertical-align: middle;
    margin-top: 10px;
    color: #000;
}
a{
    color:#000;
    text-decoration:none;
}
.fs-13{
    font-size:13px;
}
.text-recovery-code{
    text-decoration:underline;
    color:#000;
    font-weight:500;
}
.text-recovery-button {
    text-decoration: underline;
    color: #000;
    font-weight: 500;
    border: none;
    background: none;
    width: 100%;
}
.custom-row {
    margin: 0;
    max-width: 100%;
    padding: 0;
}
.icon-fa {
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.25em;
    fill: currentColor;
    color: #fff;
}
.box-attivazione {
    height: 560px;
    min-width: 310px;
    margin: 80px 0;
    background-color: #fff;
    padding: 0 15px;
}
.box-title{
    color: #0B0014;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 115%;
    padding-top:20px;
}

.box-title-lite {
    padding-top: 0px;
}

.box-description {
    padding-top: 20px;
    text-align: center;
    line-height: 115%;
}
.form-label{
    color:#8F8A93;
    font-size: 12px;
    font-weight: 400;
    line-height: 115%; /* 13.8px */
    padding-top:20px;
    margin-bottom:0;
}
.btn {
    height: 40px;
    color: #0B0014;
    font-size: 18px;
    display: flex !important;
    font-weight: 500 !important;
    justify-content: center;
    align-items: center;
    border-radius: 20px !important;
    white-space: nowrap;
    text-decoration: none;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
.btn-tiscali-orange{
    background-color: #f4ca5e !important;
    margin-top:20px
}
.btn-tiscali-brd-orange{
    border:1px solid #f4ca5e !important;
    margin:20px 0px;
    background:#fff
}
.btn.disabled, .btn:disabled{
    background-color: #E7E6E8 !important;
    border:none !important;
}
.box-err {
    background-color: #F9EAEA;
    color: #B1252A;
    font-size: 12px;
    font-weight: 700;
}

.field-wrapper {
    position: relative;
}

.error-icon {
    display: none;
    position: absolute;
    right: 10px;
    top: 45px;
    font-size: 22px;
    color: #E4A02A;
    pointer-events: none;
}
.fw-500{
    font-weight:500;
}
#codice-fiscale.input-validation-error, #codice-ordine.input-validation-error {
    border: 1px solid #E4A02A !important;
}

#codice-fiscale.input-validation-error + .error-icon, #codice-ordine.input-validation-error + .error-icon {
    display: inline-block;
}
.warning-message {
    background-color: #FFF7EA;
    color: #E4A02A;
    font-size: 12px;
    font-weight: 700;
    display: block
}
.otp-err {
    padding: 5px;
    background-color: #F9EAEA;
    color: #B1252A;
    font-size: 12px;
    font-weight: 700;
}
.error-message {
    background-color: #F9EAEA;
    color: #B1252A;
    font-size: 12px;
    font-weight: 700;
    display: block
}
.input-description {
    color: #8F8A93;
    font-size: 12px;
    padding: 5px 0;
}
.input-description a, .input-description a:hover {
    color: #0B0014;
}
.container-buttons{
    display: flex;
    align-items: stretch;
}
.half{
    width: 50%;
}
.no-otp{
    text-align:center;
    text-decoration:underline;
    cursor:pointer;
    margin-top:20px;
    font-weight:500;
}
.box-container-identificazione {
    width: 100%;
    display: flex;
    flex-direction: column; 
    align-items: center; 
}
.box-container-identificazione div {
    width: 230px;
}
.btn-spid, .btn-cie{
    border:none;
    background:#115DC2;
    padding:8px 24px;
    color:#fff;
    border-radius:4px;
    margin-top:20px;
    text-align:center;
    font-family: "Titillium Web";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    cursor:pointer
}
.btn-cie{
    padding:6px 24px;
}
.btn-spid img, .btn-cie img{
    padding-right:8px
}
.progress-status {
    width: 240px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 0
}
.progress-ico {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.progress-img {
    display: flex;
    align-items: center;
    justify-content: center;
}
.progress-img img {
    width: 24px;
    height: auto;
    display: block;
}
.row-grey {
    width: 45px;
    height: 2px;
    background-color: #B3B0B6;
    align-self: center;
}
.row-green {
    width: 45px;
    height: 2px;
    background-color: #679436;
    align-self: center;
}
.progress-text {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
}
.progress-text > div {
    width: 80px;
    text-align: center;
    font-size: 11px;
    font-weight: 400;
}
.first-stamp {
    padding-left: 25px;
}
.last-stamp {
    padding-right: 30px;
}
.attenzione{
    color:#B1252A
}
.ok{
    color:#5E8731
}
.box-dashed {
    border-style: dashed !important;
    border-radius: 6px;
    margin-top: 20px;
}
.box-dashed .btn-tiscali-brd-orange{
    text-align: center !important;
    margin: 20px auto 12px;
}
.box-green{
    border:1px solid #5E8731;
    border-radius: 6px;
    margin-top:20px;
    text-align: center;
    padding-top:20px;
    background-color: #F0F4EB;
}
#box-IccidImage-loaded, #box-SingleFile-loaded, #box-FrontFile-loaded, #box-BackFile-loaded {
    display: none;
}
    #box-FrontFile-loaded .disclaimer-file, #box-BackFile-loaded .disclaimer-file {
        margin-bottom: 10px;
    }
.disclaimer-file {
    width: 100%;
    text-align: center;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 115%; /* 12.65px */
    letter-spacing: 0.33px;
    margin-bottom: 20px;
}
.file-loaded{
    font-size: 18px;
    font-weight: 500;
    line-height: 20px; /* 111.111% */
    text-decoration-line: underline;
    margin-bottom: 10px;
}
.file-loaded img{
    padding-left:10px
}
.btn-file img{
    padding-right:16px
}
.input-file{
    display: none;
}
.trash-file{
    cursor:pointer;
}
.iccd{
    font-weight: 500;
}
.check-ok,.check-ok:focus{
    border: 1px solid #5E8731 !important;
    color: #5E8731;
}
.check-ko,.check-ko:focus{
    border: 1px solid #B1252A !important;
    color: #B1252A
}
.form-control:focus{
	border: 1px solid #ced4da;
    box-Shadow:none;
}
.check-icon{
    display:none; position:absolute; 
    right:20px; top:50%; 
    transform:translateY(-50%);
}
.red{
    color: #B1252A;
}
.green{
    color: #5E8731;
}
.footer {
    background-color: #050008;
    padding-top: 40px;
    padding-bottom: 80px;
    font-size: 14px;
}
.footer a{
    color:#fff;
    text-decoration:none;
}
.footer-left {
    font-weight: 700
}

.footer-right {
    padding-top:60px;
    font-weight: 400
}
.footer-left div, .footer-right div {
    padding: 0 0 20px;
    color: #fff
}
@media (min-width: 576px) and (max-width: 1440px) {
    .box-title {
        font-size: 20px;
    }

    body {
        font-size: 15px;
    }

    .btn {
        font-size: 16px;
    }

    .footer {
        font-size: 12px;
    }
}

@media (min-width: 576px) {
    .custom-row {
        margin: auto;
        max-width: 1440px;
        padding: 0 60px;
    }

    .bgMain {
        background: url('/img/attivazione_sim/background_attivazione_sim.jpg');
        background-size: cover;
        background-position: center;
    }
    /* HEADER */
    .header-main {
        padding: 18px 0px;
        height: 80px;
        display: flex;
        justify-content: space-between;
    }

    .logo-container {
        width: 150px;
        margin-top: 10px;
        /* width: 113px; */
        height: 44px;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .tiscali-logo-white {
        /* background-image: url(/img/attivazione_sim/Logo_TISCALI_white.svg); */
        background-image: url(/img/attivazione_sim/tiscali_logo.svg);
    }

    .tiscali-assistenza, .social-bar {
        padding-top: 1.25rem;
        color: #FFFFFF;
    }

    .tiscali-assistenza, .social-bar a {
        color: #FFFFFF;
    }

    .tiscali-assistenza a {
        color: #FFFFFF;
        text-decoration: none;
    }

    .tiscali-assistenza .material-symbols-rounded {
        vertical-align: middle;
        margin-left: 10px;
    }
    /* FOOTER */
    .footer {
        padding-top: 80px;
        padding-bottom: 80px;
        min-height: calc(100vh - 800px);
    }
    .footer-up {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #fff;
        padding: 0 0 40px 0;
    }

    .footer-left {
        display: flex;
        align-items: start;
        justify-content: left;
    }

    .footer-right {
        padding-top: 0;
        display: flex;
        align-items: start;
        justify-content: right;
    }

    .footer-left div, .footer-right div {
        padding: 0 10px 0;
        color: #fff
    }
    /* BOX */
    .box-attivazione {
        height: 560px;
        margin: 80px 0;
        background-color: #fff;
        /* Standard Shadow */
        box-shadow: 0 0 30px 0 rgba(5, 0, 8, 0.30);
        border-radius: 30px;
        padding: 40px 30px;
    }
}