@font-face {
    font-family: poppins;
    src: url(../fonts/Poppins-Regular.ttf);
}
@font-face {
    font-family: poppins-bold;
    src: url(../fonts/Poppins-Bold.ttf);
}
@font-face {
    font-family: poppins-sbold;
    src: url(../fonts/Poppins-SemiBold.ttf);
}
@font-face {
    font-family: poppins-light;
    src: url(../fonts/Poppins-Light.ttf);
}

@font-face {
    font-family: telemarines;
    src: url(../fonts/telemarines1.ttf);
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body{
    font-family: poppins;
    font-size: 18px;
    scroll-behavior: smooth;
}
body{
    background-image: url(../images/background.jpg);
    height: 100vh;
    color: #000;
}
main{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track {
    background: transparent; 
}
::-webkit-scrollbar-thumb {
    background: #888; 
}
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}
.main__container{
    max-width: 1300px;
    margin: auto;
}
.main__wrapper{
    display: flex;
}
.content__wrapper{
    background-color: #fff;
}
.w__100{
    width: 100%;
    height: 100%;
}
.h__100{
    height: 100%
}
a:hover,
a:focus,
a:active{
    text-decoration: none;
}
.heading__large{
    font-family: poppins-sbold;
    text-transform: uppercase;
    text-align: center;
    margin-top: 24px;
    white-space: nowrap;
}
.heading__small{
    font-size: 26px;
    font-family: poppins-light;
    text-align: center;
}
.button__wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn__large{
    background-color: #000;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 40px;
    margin-top: 66px;
}
.para__info{
    text-align: center;
    margin-top: 20px;
    color: #7B7B7B;
    padding: 0 20px;
}
.lang_map--wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 335px;
    margin: auto;
    padding: 0 20px;
}
.lang_map--wrapper a{
    text-decoration: none;
    color: #000;
    cursor: pointer;
}
.wifi_img, .cross_img,
.flag_img, .map_img{
    display: flex;
    align-items: center;
    column-gap: 8px;
}
footer{
    background-color: #EFEFEF;
}
.footer__wrapper p.terms{
    color: #7B7B7B;
    text-align: center;
    font-family: poppins-light;
    margin-bottom: 0;
    text-decoration: underline;
}
.footer__wrapper a{
    color: inherit;
}
.footer__wrapper p.powered{
    text-align: right;
    color: #000;
    font-family: poppins-light;
    padding-bottom: 8px;
    margin-bottom: 0;
    display: none;
}
.morfus__logo{
    font-family: telemarines;
    font-size: 26px;
    color: #000;
    padding: 0 32px 0 15px;
}

.btn__large:focus, .btn__large:hover{
    background-color: #444;
    color: #fff;
}
.modal-dialog{
    min-width: 95%;
}
#languageModal .flag-icon {
    font-size: 4rem;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 25px auto;
    cursor: pointer;
}
#tcModal p{
    font-size: 14px;
}
.flag-icon.ro-flag{
    background-image: url(../images/ro.svg);
}
.flag-icon:hover{
    box-shadow: 0px 10px 15px 0px rgb(0 0 0 / 50%);
    outline: none;
    padding: 0;
    border-radius: 50rem;
    width: 4rem;
    height: 4rem;
}
.email__input{
    background-color: #F1F1F1;
    width: 100%;
    height: 60px;
    border-radius: 40px;
    text-align: center;
    border: none;
    outline: none;
    box-shadow: none;
}
.email__input:hover, .email__input:focus, .email__input:active{
    border: 1px solid #000;
    box-shadow: none;
}
.input__wrapper{
    width: 280px;
    margin: 40px auto;
}
.gender__heading{
    padding-bottom: 20px;
}
.age__heading{
    padding: 10px 0;
}
.gender-selector{
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 15px;
    padding: 10px 0;
}
.gender-selector input {
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    opacity: 0;
}
.gender-selector .gender-icon.male {
    background-image: url(../images/gender-1.svg);
}
.gender-selector .gender-icon.female {
    background-image: url(../images/gender-2.svg);
}
.gender-selector .gender-icon.secret {
    background-image: url(../images/gender-3.svg);
}
.gender-icon {
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 50px;
    height: 50px;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    visibility: visible;
    -webkit-filter: grayscale(1) opacity(.5);
    -moz-filter: grayscale(1) opacity(.5);
    filter: grayscale(1) opacity(.5);
}
.gender-icon:active {
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
}
.gender-selector input:checked +.gender-icon {
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
}
.age-selector {
    width: 88%;
    margin: auto;
    padding: 25px 5px !important;
}
.range {
    position: relative;
}
.range input[type=range] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    width: 100%;
    height: 22px;
    cursor: pointer;
    display: block;
}
.age-selector .range .rangeslider-thumb {
    background: #000000;
    border: 2px solid #CFCFCF;
    height: 20px;
    width: 20px;
}

.age-selector .range .range-output .output {
    height: 35px;
    line-height: 35px;
    top: -20px;
    background: #000000;
    color: #ffffff;
    border-radius: 8px;
    min-width: 60px!important;
    left: -3px;
}
.age-selector .range .range-output .output:before {
    bottom: -7px;
    border: 10px solid #000000;
    border-bottom: none;
    border-left-color: transparent;
    border-right-color: transparent;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.age-selector .range .range-output .output span {
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
    margin-left: -3px;
}
.action__btn--wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    column-gap: 10px;
}
.btn__wifi{
    border: 2px solid #318E23;
    border-radius: 40px;
    padding: 10px 14px;
    color: #318E23;
}
.btn__cancel{
    border: 1px solid #BE3333;
    border-radius: 40px;
    padding: 10px 14px;
    color: #BE3333;
}
.thankyou_page{
    padding: 20px;
    position: relative;
}
.inner__footer{
    position: absolute;
    right: 0;
    bottom: 0;
}
.btn.btn__save{
    background-color: #F1F1F1;
    color: #000;
    border-radius: 40px;
    border: none;
    outline: none;
    box-shadow: none;
}
.btn.btn__skip{
    color: #000;
    text-decoration: underline;
    padding: 15px;
    border: none;
    outline: none;
    box-shadow: none;
}
.btn__save:hover, .btn__save:focus,.btn__save:active{
    background-color: #cfcfcf;
}
.form-error{
    color: #f00;
    font-size: 14px;
    text-align: center;
}
.form-error.pin,
.form-error.mobile,
.form-error.email,
.form-error.gender,
.form-error.age{
    display: none;
}
.verify_content{
    padding: 80px 0;
}
.iti--separate-dial-code .iti__selected-flag,
.iti--separate-dial-code .iti__selected-flag:hover,
.iti--separate-dial-code .iti__selected-flag:focus {
    background-color: transparent !important;
}
.iti--allow-dropdown .iti__flag-container:hover {
    background-color: transparent;
}
.iti{
    width: 100%;
}
.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container{
    left: 25px !important;
}
.mobile__input{
    text-align: left;
    padding-left: 120px !important;
}
#pin_code{
    font-weight: 900;
}

.pin__input{
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
}
.pin__input::-webkit-outer-spin-button,
.pin__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
a.disabled {
  pointer-events: none;
  cursor: default;
}
.mobile__header{
    display: none;
}
@media (min-width: 568px){
    .age-selector .range .rangeslider:after {
        background-size: 104.5% !important;
    }
}
@media (min-width: 768px){
    .age-selector .range .rangeslider:after {
        background-size: 105.5% !important;
    }
}
@media (min-width: 992px){
    .main__container {
        max-width: 900px;
    }
    .content__wrapper{
        flex: 1 0 340px;
    }
    .heading__large{
        font-size: 40px;
    }
    .heading__small{
        font-size: 20px;
    }
    .portal__small{
        padding-top: 30px;
    }
    .btn__large{
        padding: 13px 46px;
        margin-top: 24px;
    }
    .para__info{
        font-size: 16px;
    }
    .lang_map--wrapper{
        margin-top: 30px;
        margin-bottom: 22px;
    }
    .age-selector .range .rangeslider:after {
        background-size: 100% !important;
    }

    .footer__container{
        display: flex;
    }
    .flex__spacer{
        flex: 1 0 0px;
    }
    footer.footer{
        flex: 0 0 340px;
    }
    .footer__wrapper p.terms{
        /*padding: 8px 12px 0;*/
        padding: 15px 12px;
        font-size: 14px;
    }
    .footer__wrapper p.powered{
        font-size: 14px;
    }
    .morfus__logo {
        font-size: 20px;
    }
    .btn.btn__save{
        padding: 20px 70px;
    }
}
@media (min-width: 1200px){
    .main__container {
        max-width: 1140px;
    }
    .content__wrapper{
        flex: 1 0 430px;
    }
    .btn__large{
        padding: 18px 70px;
        margin-top: 30px;
    }
    .lang_map--wrapper{
        margin-top: 35px;
        margin-bottom: 20px;
    }
    .age-selector .range .rangeslider:after {
        background-size: 102.5% !important;
    }
    footer.footer{
        flex: 0 0 430px;
    }
}
@media (max-width: 1199px){
    .action__btn--wrapper{
        column-gap: 6px;
    }
    .btn.btn__wifi,
    .btn.btn__cancel{
        white-space: normal;
    }
    .verify_content{
        padding: 50px 0;
    }
}
@media (max-width: 991px){
    .portal__page .hero__img{
        display: none;
    }
    .heading__large {
        font-size: 54px;
    }
    main{
        transform: none;
        top: initial;
    }
    .main__container {
        width: 100%;
        background-color: #fff;
    }
    .main__wrapper{
        display: block;
    }
    .btn__large{
        padding: 22px 95px;

    }
    .lang_map--wrapper{
        margin-top: 72px;
        margin-bottom: 63px;
    }
    .gender-selector{
        column-gap: 70px;
    }
    .portal__small {
        padding-top: 60px;
    }
    .input__wrapper{
        width: 391px;
    }
    .email__input{
        height: 72px;
        font-size: 18px;
    }
    .gender-icon{
        width: 80px;
        height: 80px;
    }
    .age__heading {
        padding: 60px 0;
    }
    .age-selector{
        width: 60%;
    }
    .age-selector .range .rangeslider:after {
        background-size: 104.5% !important;
    }
    .footer__wrapper p.terms{
        padding: 37px 20px;
    }
    footer.footer{
        background-color: #fff;
    }
    .para__info.para__cookies{
        padding: 40px 20px;
    }
    .btn__wifi,.btn__cancel{
        padding: 20px 30px;
    }
    .action__btn--wrapper{
        column-gap: 20px;
    }
    .footer__wrapper p.powered.portal__powered{
        padding-top: 90px;
    }
    .btn.btn__wifi,
    .btn.btn__cancel{
        font-size: 18px;
    }
    .inner__footer{
        position: relative;
        margin-top: 100px;
    }
    .heading__small.ty__sm{
        width: 355px;
        margin: auto;
    }
    .heading__small.wb__sm{
        width: 410px;
        margin: auto
    }
    .heading__small.ud__sm{
        width: 500px;
        margin: auto;
    }
    .thankyou_content{
        padding: 50px 20px 40px;
    }
    .btn.btn__skip,
    .btn.btn__save{
        padding: 22px 115px;
        font-size: 18px;
    }
    .gender_padding{
        padding: 80px 0 25px;
    }
    .useraction_btn{
        margin-top: 80px;
    }
}
@media (max-width: 576px){
    
    .heading__large {
        font-size: 40px;
    }
    .btn__large{
        padding: 18px 70px;
        margin-top: 20px;
    }
    .input__wrapper {
        width: 320px;
    }
    .email__input{
        font-size: 16px;
    }
    .gender-selector{
        column-gap: 30px;
    }
    .age__heading {
        padding: 30px 0;
    }
    .age-selector{
        width: 80%;
    }
    .gender-icon {
        width: 60px;
        height: 60px;
    }
    .para__info.para__cookies {
        padding: 10px 20px;
    }
    .footer__wrapper p.powered.portal__powered {
        padding-top: 35px
    }
    .btn.btn__wifi, .btn.btn__cancel {
        font-size: 14px;
    }
    .heading__small.ud__sm {
        width: 100%;
    }
    .btn.btn__skip, .btn.btn__save {
        font-size: 14px;
    }
    .inner__footer{
        margin-top: 60px;
    }
    .useraction_btn {
        margin-top: 50px;
    }
    .lang_map--wrapper{
        margin-top: 40px;
        margin-bottom: 15px;
    }
    .portal__small{
        padding-top: 40px;
    }
    .gender__heading{
        padding-bottom: 0;
    }
    .age__heading{
        padding: 20px 0;
    }
    .action__btn--wrapper{
        padding: 10px 20px 25px;
    }
    .mobile__header{
        display: block;
        position: relative;
        width: 100%;
        /*height: 130px;*/
        padding: 10px 0;
        background-color: #e3e3e3;
    }
    .mobile__header .top-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .phone-time {
        margin-left: 38px;
        font-size: 14px;
        font-weight: bold;
        font-family: 'Inter', sans-serif;
    }
    .right-icons {
        font-size: 12px;
        margin-right: 22px;
        margin-top: 5px;
    }
    .right-icons i {
        margin-right: 3px;
        transform: translateY(-2px);
    }
    .fiveG_signal{
        width: 16px;
        margin-right: 3px;
        transform: translateY(-1px);
    }
    .battery_status{
        width: 25px;
        height: 14px;
    }
    .domain-row {
        margin: 5px;
    }
    .domain-row p {
        text-align: center;
        font-family: sans-serif;
        margin: 0;
        font-size: 12px;
    }
    .domain-row i {
        font-size: 10px;
        padding-right: 2px;
        transform: translateY(-1px);
    }
    .login-row {
        margin-top: 7px;
        font-size: 12px;
        font-family: sans-serif;
        margin-left: 5px;
        margin-right: 5px;
    }
    .third-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .third-row .arrows {
        margin-left: 10px;
        color: gray;
    }
    .third-row .arrows i:first-child {
        margin-right: 12px;
    }
    .third-row .login {
        font-weight: bold;
        font-size: 14px;
    }
    .third-row .cancel {
        color: #467eff;
        font-weight: bold;
        font-size: 14px;
    }
}
@media (max-width: 480px){
    .heading__large {
        font-size: 32px;
    }
    .heading__small{
        font-size: 20px;
    }
    .heading__small.wb__sm,
    .heading__small.ty__sm {
        width: 100%;
    }
    .btn__large {
        padding: 15px 50px;
    }
    .para__info,
    .footer__wrapper p.powered {
        font-size: 16px;
    }
    .lang_map--wrapper a{
        font-size: 16px;
    }
    .footer__wrapper p.terms {
        padding: 25px 10px;
        font-size: 16px;
    }
    .morfus__logo{
        font-size: 20px;
        padding: 0 15px;
    }
    .btn__wifi, .btn__cancel {
        padding: 12px 15px;
    }
    .action__btn--wrapper{
        column-gap: 10px;
    }
}
@media (max-width: 420px){
    .lang_map--wrapper{
        width: 320px;
    }
}
.pin__wrapper{
    margin-bottom: 0;
    width: 248px;
}