* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}

body {
    background-color: #454545;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    position: relative;
}

.container {
    margin: 8px;
}

.player {
    max-width: 850px;
    position: relative;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 15px;
    background: #000;
    margin: 20px auto 0;
    min-height: 560px;
}

.top_icons {
    display: flex;
    gap: 14px;
    position: absolute;
    top: 10px;
    left: 20px;
}

.top_icons img {
    width: 35px;
    height: 35px;
    cursor: pointer;
}

.player_navigation {
    display: flex;
    width: calc(100% - 30px);
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 10px;
}

.progress {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 4px;
    margin: 0 12px;
    position: relative;
    cursor: pointer;
}

.progress_load {
    width: 0;
    height: 100%;
    -webkit-animation: 20s linear forwards progress_load;
    animation: 20s linear forwards progress_load;
}

.wrap-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 30px;
    padding: 30px 20px;
    margin: 60px auto 20px;
}

.wrap-content > * {
    text-align: left;
}

.wrap-content .title, .wrap-content .title-error {
    font-size: 1.375rem;
    color: #000;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
}

.wrap-content .content {
    font-size: 1rem;
    color: #000;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
}

.start-btn, .mtel-sms-btn, .tekekom-sms-btn {
    background: #019A00;
    border-radius: 15px;
    height: 110px;
    max-width: 367px;
    width: 90%;
    margin: 0 auto;
    border: none;
    cursor: pointer;
    animation: pulse 1.25s infinite;
    opacity: 0;
}

.start-btn[disabled] {
    /*background: #C4C4C4;*/
    cursor: not-allowed;
    animation: none;
}

.mtel-sms-btn, .tekekom-sms-btn {
    width: calc(100% - 20px);
    background: #00a254;
    height: 80px;
    cursor: pointer;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    padding: 20.5px;
    opacity: 1;
}

.start-btn__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 20px 0 60px;
}

.start-btn > img {
    width: 65px;
    height: 71px;

}

.start-btn.mobile {
    margin-top: 45px;
}

.button-text {
    font-size: 2rem;
    color: #FFFFFF;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
}

@keyframes progress_load {
    0% {
        width: 0;
    }

    100% {
        width: 50%;
    }
}

.progress, .progress_load {
    background: rgba(255, 255, 255, .4);
}

.progress_line {
    width: 0%;
    height: 100%;
    background: #4080ff;
    -webkit-animation: 1s linear forwards progress_line;
    animation: 1s linear forwards progress_line;
}

@keyframes progress_line {
    0% {
        width: 0;
    }
    100% {
        width: 10px;
    }
}

.player_navigation_item {
    display: flex;
    gap: 10px;
    align-items: center;
}

.player_navigation_item * {
    cursor: pointer;
}

.pause_play {
    display: flex;
    align-items: center;
}

.pause_play img {
    width: 12px;
    height: 20px;
    cursor: pointer;
}

.player_navigation_item img {
    width: 20px;
    height: 20px;
}

.player_navigation_item p {
    font-size: .8rem;
    color: #fff;
}

.player_content {
    max-width: 420px;
    width: calc(100% - 10px);
    text-align: center;
    opacity: 0;
}

.player_content-container {
    background: #f2f2f2;
    max-width: 396px;
    border-radius: 4px;
    margin: 0 auto;
}

#player-loading, #player-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

/*#player-loading {*/
/*    opacity: 1;*/
/*}*/

.wrap-button {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
}

.telco-button {
    background: linear-gradient(180deg, #60d637 0, #65bb3d 100%);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 1px;
    border: none;
    outline: 0;
    text-transform: uppercase;
    padding: 20px 0;
    border-radius: 8px;
    width: 100%;
    cursor: pointer;
}

.telco-selection .title {
    font-size: 1.25rem;
    color: #000;
    text-align: center;
    margin-bottom: 10px;
}

#player-loading-2 {
    width: 70px;
    margin: 0px auto 20px;
    /*opacity: 0;*/
}

.mobile {
    display: none;
}

.pie {
    margin: 0 auto;
}

.pie-text-1 {
    font-family: "Bebas Neue", sans-serif;
}

.wrap-overlay {
    padding: 30px 0 0;
    margin: 32.5px auto;
    font-family: "Montserrat", sans-serif;
}

.t-and-c {
    padding: 40px 0;
}

.t-and-c a {
    color: #8D8E91;
    font-size: 12px;
    font-weight: 300;
    text-decoration: none;
}

.wrap-overlay .title, .wrap-overlay .title-error {
    font-size: 1.125rem;
    font-weight: 400;
    color: #000000;
    margin: 10px auto;
}

.wrap-cla {
    width: calc(100% - 20px);
    margin: 0 auto;
}

.cusButton {
    background: #019A00;
    border-radius: 15px;
    max-width: 374px;
    width: 100%;
    margin: 0 auto;
    border: none;
    cursor: pointer;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 2.125rem;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    padding: 20.5px;
}

.input_msisdn_submit {
    margin: 10px auto 0;
}

.cusButton > span {
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    text-transform: uppercase;
    display: block;
}

._inputs {
    height: 65px;
    /*animation: input-animation 1.25s linear infinite;*/
    position: relative;
    border-radius: 10px;
}

._inputs input {
    width: 100%;
    height: 100%;
    padding: 0 0 0 90px;
    border-radius: 10px;
    border: 1px solid #DBDBDB;
    outline: none;
    font-size: 25px;
    font-weight: 500;
}

._inputs input:focus {
    border: 1px solid #5EDB9F;
}

._inputs:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    height: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background: url("/lp/ch/video/images/phone.png") no-repeat center;
}

._inputs input::placeholder {
    color: #3B3C3F;
    font-size: 15px;
    font-weight: 300;
    font-family: "Montserrat", sans-serif;
    font-style: italic;
}

#btnResendCode {
    display: none;
}

.input_msisdn_submit[disabled] {
    background: #C4C4C4;
    cursor: not-allowed;
    animation: none;
}

.input_msisdn_submit {
    animation: input-animation 1.25s linear infinite;
}

.error_message, .title-error, .error .wrap-overlay .title {
    display: none;
}

.error .title-error {
    display: block;
    color: #FF0000;
}

.error ._inputs, .success ._inputs {
    animation: none;
}

.error ._inputs:after {
    background: url("/lp/ch/video/images/phone-error.png") no-repeat center;
}

.error ._inputs input {
    border: 1px solid #FF0000;
    color: #FF0000;
}

.success ._inputs input {
    border: 1px solid #019A00;
    color: #019A00;
}

.wrap-c2s {
    display: none;
}

.header {
    color: #8D8E91;
    text-align: center;
    opacity: 0;
}

.header .service {
    font-size: 11px;
    text-transform: uppercase;
}

.header .description, .header .description-mtel {
    font-size: 11px;
    margin: 0 auto;
    padding: 10px 0 0;
}

.wrap-c2s {
    display: none;

}

.success .wrap-c2s {
    display: block;
}

.success .wrap-overlay {
    display: none !important;
}

.wrap-c2s__container {
    padding: 30px 0;
    font-family: "Montserrat", sans-serif;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 400;
    margin: 84.5px auto 0;
}

.kw, .sc {
    font-size: 1.875rem;
    font-weight: 700;
    animation: changeColor 1.5s linear infinite;
}

.wrap-c2s__content {
    object-fit: cover;
    padding: 20px;
    animation: changeBorderColor 1.5s linear infinite;
    width: 250px;
    margin: 20px auto;
}

.wrap-c2s__content > * {
    object-fit: cover;
    width: fit-content;
    margin: 0 auto;
}

@keyframes changeBorderColor {
    0% {
        border: 3px solid #739f2a;
    }
    50% {
        border: 3px solid #9FDE39;
    }
    100% {
        border: 3px solid #739f2a;
    }
}

@keyframes changeColor {
    0% {
        color: #739f2a;
    }
    50% {
        color: #9FDE39;
    }
    100% {
        color: #739f2a;
    }
}

@keyframes input-animation {
    0% {
        box-shadow: none;
        transform: scale(1);
    }
    55% {
        box-shadow: rgb(53 205 52) 0 0 10px;
        transform: scale(1.05);
    }
    100% {
        box-shadow: none;
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    55% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.checkmark {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: auto;
    box-shadow: inset 0 0 0 #2cda94;
    animation: 0.4s ease-in-out 0.4s forwards fill, 0.3s ease-in-out 0.9s both scale;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    animation-delay: .5s;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: rgb(44, 218, 148);
    fill: none;
    animation: 0.6s cubic-bezier(0.65, 0, 0.45, 1) 0s 1 normal forwards running stroke;
    animation-delay: .5s;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s 1 normal forwards running stroke;
    animation-delay: .5s;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0 0 0 30px #2cda94;
    }
}

.footer {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 95.5vh;
}

.footer__container {
    max-width: 450px;
    width: calc(100% - 20px);
    font-family: "Open Sans", sans-serif;
    font-size: 11px;
    font-weight: 300;
    color: #8D8E91;
    margin: 0 auto;
    text-align: center;
    line-height: 19px;
}

.footer__container a {
    color: #8D8E91;
    text-decoration: none;
    padding-bottom: 10px;
}

.footer__container .footer__links {
    margin: 20px auto 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}


.wrap-button {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
}

.telco-button {
    background: linear-gradient(180deg, #60d637 0, #65bb3d 100%);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 1px;
    border: none;
    outline: 0;
    text-transform: uppercase;
    padding: 20px 0;
    border-radius: 8px;
    width: 100%;
    cursor: pointer;
}

.telco-selection {
    padding: 30px 20px;
    margin: 60px auto 44px;
}

.telco-selection .title {
    font-size: 1.125rem;
    color: #000;
    text-align: center;
    padding-bottom: 5px;
}

.hide {
    display: none !important;
}


.mtel__container .text, .telekom__container .text {
    color: #8d8e91;
    font-size: 17px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.mtel__container .content, .telekom__container .content {
    font-size: 1rem;
    background: #f2f2f2;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    padding: 30px 24px;
    max-width: 402px;
    border-radius: 4px;
    margin: 20px auto 0;
}

.mtel__container .content, .mtel__container .text1, .telekom__container .content, .telekom__container .text1 {
    text-align: left;
}

.mtel__container .text1, .telekom__container .text1 {
    font-size: 1rem;
    font-weight: 500;
    font-family: "Exo 2", sans-serif;
}

.mtel__container .text3, .telekom__container .text3 {
    font-size: 14px;
    font-weight: 500;
}

.mtel__container .text2, .telekom__container .text2 {
    text-align: center;
    font-size: 11px;
    font-family: "Open Sans", sans-serif;
    /*margin: 10px auto 0;*/
}

.mtel__container .content .title, .telekom__container .content .title {
    font-size: 1.375rem;
    margin: 0 1px 20px;
    font-weight: 700;
    font-family: "Exo 2", sans-serif;
}

.wrap-c2s-mtel, .wrap-c2s-telekom {
    text-align: center;
    margin: 0 auto 10px;
}

.wrap-c2s-mtel > *, .wrap-c2s-telekom > * {
    text-align: center;
    font-size: 38px;
    font-weight: 400;
    color: #3cd822;
    animation: unset;
    font-family: "Open Sans", sans-serif;
}

.wrap-c2s-mtel .to, .wrap-c2s-telekom .to {
    color: #000000;
    font-size: 16px;
}

.wrap-c2s-mtel .kw, .wrap-c2s-mtel .tc, .wrap-c2s-mtel .space {
    display: inline;
}

/*on mobile*/
@media (max-width: 768px) {
    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }

    .player {
        min-height: 445px;
        margin: 10px auto;
    }

    .start-bth {
        width: calc(100% - 20px);
    }

    .wrap-overlay {
        display: none;
        position: fixed;
        background: rgba(43, 43, 43, 0.84);
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        margin: 0 auto;
        z-index: 10;
    }

    .wrap-overlay__container {
        margin: 60px auto 0;
        position: absolute;
        width: calc(100% - 40px);
        z-index: 1;
        opacity: 1;
        left: 0;
        right: 0;
        border-radius: 10px;
    }

    @keyframes pop-up {
        0% {
            opacity: 0;
            transform: translateY(-50px);
        }
        100% {
            opacity: 100%;
            transform: translateY(0px);
        }
    }

    .wrap-cla, .button-wrap {
        width: 100%;
        background: #ffffff;
    }

    .wrap-cla {
        padding-top: 20px;
    }

    .button-wrap-2 {
        padding-bottom: 0;
    }

    ._inputs {
        max-width: 375px;
        margin: 0 auto;
        width: calc(100% - 20px);
    }

    .player_navigation {
        z-index: 0;
    }

    .wrap-overlay__container {
        /*background: #C9C9C9;*/
        background: #ffffff;
    }

    .pie {
        margin: 10px auto 10px;
    }

    .wrap-overlay .title, .wrap-overlay .title-error {
        /*border-top: 1px solid #F5F5F5;*/
        /*padding: 20px 0;*/
        margin: 0;
    }

    .success .wrap-overlay {
        display: block !important;
    }

    .success .wrap-c2s {
        display: none !important;
    }

    .input_msisdn_submit {
        width: calc(100% - 20px);
    }

    .footer {
        position: relative;
        margin: 0 auto;
        top: 150px;
    }

    .wrap-content {
        margin: 44px auto 10px;
    }

    .start-btn.mobile {
        margin-top: 20px;
        width: calc(100% - 20px);
    }

    .header .description, .header .description-mtel {
        padding: 0;
    }

    .t-and-c {
        padding: 20px 0;
    }

    .cusButton {
        padding: 18px;
        font-size: 1.75rem;
    }

    ._inputs {
        height: 65px;
    }

    .container {
        margin: 8px auto;
    }

    .mtel__container .content, .telekom__container .content {
        margin: 60px auto 20px;
        position: relative;
        z-index: 99;
    }

    .mtel #player-loading-2, .telekom #player-loading-2 {
        margin-top: 54px;
    }
}