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

a {
    text-decoration: none;
    outline: 0;
    color: #bcbcbc;
}

a:hover {
    font-weight: 400;
}

p {
    font-size: 14px;
    margin-bottom: 1vh;
}

img {
    max-width: 100%;
}

ul,
li {
    list-style: none;
}

html {
    height: 100%;
    width: 100%;
    font-family: Roboto, sans-serif;
    font-size: 62.5%;
    text-align: center;
}

.btn.disabled,
.btn:disabled {
    opacity: 1 !important;
}

body {
    color: #fff;
    background: #000;
    font-family: Arial, sans-serif;
    height: 100%;
    width: 100%;
    text-shadow: none;
}

#text-call-to-action-sub-line {
    font-size: 30px !important;
    text-transform: uppercase !important;
    font-weight: 800;
    display: inline;
    padding: 5px 10px;
    border-radius: 5px;
    border: none;
    color: #ffffff;
    text-shadow: 0 0 13px #ff0055;
}

#container-spacer-3 {
    height: 16vh;
}

.tarif {
    color: #000;
}

#container-spacer-2 {
    display: none;
}

.container-fluid {
    padding: 0;
    margin: 0;
    display: grid !important;
    width: 100%;
    height: 100vh;
    align-content: space-between;
    grid-template-rows: auto 1fr;
}

#container-above-logo {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    background-color: #000;
    align-self: center;
    max-width: none;
    width: 100%;
}

#container-dcb-page {
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    display: grid;
}

#container-logo {
    display: flex;
    justify-content: center;
    padding: 1vh 2vw;
}

#container-below-logo {
    align-self: center;
    margin-top: 1vh;
    padding: 0 2vw;
}

#container-form {
    margin: 1vh 0;
}

#list-footer-items {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
}

#container-footer {
    text-align: center;
    background: #000;
    padding-top: 1vh;
    align-self: end;
    margin: 0;
    padding: 1vh 2vw;
    font-size: 3vw;
    border-top: 1px solid #4b4a4a;
}

#container-footer a {
    color: white !important;
    font-weight: 800;
    text-decoration: underline;
}

#text-copyright {
    color: white;
    background-color: black;
}

#logo {
    width: 220px;
    margin-bottom: 0vh;
}

.container-form-submit {
    margin-top: 2vh;
}

#container-form-submit-decline-mandate {
    margin-top: 0;
}

#form_submit,
#activate-form_submit {
    border: 0;
    outline: 0;
    width: 100%;
    display: block;
    font-size: 7vw;
    font-weight: 900;
    margin: 1vh auto;
    border: none;
    padding: 3vh 5vw;
    cursor: pointer;
    user-select: none;
}

.container-form-submit#container-form-submit-activate-mandate > #activate-form_submit {
    background: #f40c66 !important;
}

.container-form-submit#container-form-submit-decline-mandate > #decline-form_submit {
    font-size: 3vw;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    color: #fff;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-family: Arial, sans-serif;
}

/*PAGE ORDER*/

.container-form-submit#container-form-submit-activate-mandate > #activate-form_submit {
    background: rgb(13, 223, 134) !important;
    border-radius: 10px;
    color: #fff;
    width: 100%;
    padding: 10px;
}

/*AUTRES PAGES*/

.container-form-submit#container-form-submit-identify > #form_submit,
.container-form-submit#container-form-submit-welcome > #form_submit,
.container-form-submit#container-form-submit-declined > #form_submit,
.container-form-submit#container-form-submit-failed > #form_submit,
.container-form-submit#container-form-submit-one-off-succeeded > #form_submit,
.container-form-submit#container-form-submit-one-off-failed > #form_submit,
.container-form-submit#container-form-submit-transaction-timed-out > #form_submit,
.container-form-submit#container-form-submit-launch > #form_submit,
.container-form-submit#container-form-submit-session-lost > #form_submit,
.container-form-submit#container-form-submit-operator-unknown > #form_submit,
.container-form-submit#container-form-submit-already-reconciled > #form_submit,
.container-form-submit#container-form-submit-identify > #form_submit,
.container-form-submit#container-form-submit-welcome > #form_submit,
.container-form-submit#container-form-submit-declined > #form_submit,
.container-form-submit#container-form-submit-failed > #form_submit,
.container-form-submit#container-form-submit-one-off-succeeded > #form_submit,
.container-form-submit#container-form-submit-one-off-failed > #form_submit,
.container-form-submit#container-form-submit-transaction-timed-out > #form_submit,
.container-form-submit#container-form-submit-launch > #form_submit,
.container-form-submit#container-form-submit-launch-v2 > #form_submit,
.container-form-submit#container-form-submit-operator-unknown > #form_submit,
.container-form-submit#container-form-submit-session-lost > #form_submit,
.container-form-submit#container-form-submit-already-reconciled > #form_submit,
.container-form-submit#container-form-submit-authorize > #form_submit,
.container-form-submit#container-form-submit-activate-authorize-mandate > #activate-authorize-form_submit {
    background: #d200ff;
    border-radius: 15px;
    color: #fff;
    width: 100%;
}

.container-form-submit#container-form-submit-authorize > #form_submit {
    background: #d200ff;
    border-radius: 218px;
    color: #fff;
    width: 100%;
}

/******/

.container-checkbox-input > .form-check > .form-check-label {
    padding-left: 20px;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-underline-offset: 4px;
}

.container-form-submit#container-form-submit-authorize > #form_submit {
    font-size: 17px;
    padding: 7px;
}

#activate-mandate-button-line-2 {
    font-size: 4vw;
}

#text-payment-through-phone-bill {
    font-size: 3vw;
}

#text-call-to-action-line {
    margin-bottom: 10px;
    font-size: 14px;
}

#text-order-specification,
#text-order-type,
#text-content-provider,
#text-service-name {
    font-weight: bold;
}

#text-heading-line {
    font-size: 1.4rem;
    font-weight: 400;
    color: #a3a3a3;
    padding: 1vh;
    margin-bottom: 0 !important;
}

#container-disclaimer {
    font-size: 3vw;
}

#text-order-specification,
#text-order-type,
#text-content-provider,
#text-service-name {
    font-size: 3.5vw;
}

#container-service-offer,
#container-disclaimer,
#container-contact-info,
#container-save-screen {
    margin-top: 1vh;
}

#container-contact-info {
    font-size: 3vw;
}

#container-helpdesk,
#container-disclaimer-1,
#container-disclaimer-2,
#container-disclaimer-3,
#container-disclaimer-4,
#container-disclaimer-5 {
    margin-top: .5vh;
}

.form-check-input:disabled ~ .form-check-label {
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
}

.form-check {
    position: relative;
    display: flex;
    padding-left: 1.25rem;
    align-items: center;
}

.form_submit:disabled span {
    font-size: 32px;
}

.container-checkbox-input > .form-check > #form_agree {
    width: 2rem;
    height: 2rem;
}

input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0;
    width: 2rem;
    height: 2rem;
}

.form-check-input:disabled ~ .form-check-label {
    color: white;
    font-weight: 800;
    font-size: 14px;
}

#authorize-mandate-button-line-1 {
    font-size: 32px;
}

#authorize-mandate-button-line-2 {
    font-size: 15px;
    font-weight: 300;
}

/* Circular loading spinner */
@keyframes loading-spinner {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(180deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.loading-spinner div {
    position: absolute;
    animation: loading-spinner 1s linear infinite;
    width: 160px;
    height: 160px;
    top: 20px;
    left: 20px;
    border-radius: 50%;
    box-shadow: 0 4px 0 0 #88e15b;
    transform-origin: 80px 82px;
}

.loading-spinner-eclipse {
    width: 200px;
    height: 200px;
    display: inline-block;
    overflow: hidden;
}

.loading-spinner {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0;
    /* see note above */
}

.loading-spinner div {
    box-sizing: content-box;
}

/* Ellipsis loading spinner  */
@keyframes loading-ellipsis {
    0% {
        transform: translate(6px, 40px) scale(0);
    }

    25% {
        transform: translate(6px, 40px) scale(0);
    }

    50% {
        transform: translate(6px, 40px) scale(1);
    }

    75% {
        transform: translate(40px, 40px) scale(1);
    }

    100% {
        transform: translate(74px, 40px) scale(1);
    }
}

@keyframes loading-ellipsis-r {
    0% {
        transform: translate(74px, 40px) scale(1);
    }

    100% {
        transform: translate(74px, 40px) scale(0);
    }
}

@keyframes loading-ellipsis-c {
    0% {
        background: #a4df0d
    }

    25% {
        background: #4c7a04
    }

    50% {
        background: #4c7a04
    }

    75% {
        background: #a4df0d
    }

    100% {
        background: #a4df0d
    }
}

.loading-ellipsis div {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translate(40px, 40px) scale(1);
    background: #a4df0d;
    animation: loading-ellipsis 1.408450704225352s infinite cubic-bezier(0, 0.5, 0.5, 1);
}

.loading-ellipsis div:nth-child(1) {
    background: #a4df0d;
    transform: translate(74px, 40px) scale(1);
    animation: loading-ellipsis-r 0.352112676056338s infinite cubic-bezier(0, 0.5, 0.5, 1), loading-ellipsis-c 1.408450704225352s infinite step-start;
}

.loading-ellipsis div:nth-child(2) {
    animation-delay: -0.352112676056338s;
    background: #a4df0d;
}

.loading-ellipsis div:nth-child(3) {
    animation-delay: -0.704225352112676s;
    background: #a4df0d;
}

.loading-ellipsis div:nth-child(4) {
    animation-delay: -1.056338028169014s;
    background: #4c7a04;
}

.loading-ellipsis div:nth-child(5) {
    animation-delay: -1.408450704225352s;
    background: #4c7a04;
}

.loading-ellipsis-eclipse {
    width: 82px;
    height: 82px;
    display: inline-block;
    overflow: hidden;
    background: none;
}

.loading-ellipsis {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(0.82);
    backface-visibility: hidden;
    transform-origin: 0 0;
    /* see note above */
}

.loading-ellipsis div {
    box-sizing: content-box;
}

#dcb-page-row {
    margin: 0 !important;
}

#text-call-to-action-sub-line {
    font-size: 14px !important;
    text-transform: none !important;
    font-weight: 400 !important;
    display: inline;
    padding: 5px 10px;
    border-radius: 5px;
    border: none;
    color: #ffffff;
    text-shadow: none;
}

#text-authorize-instruction-1,
#text-authorize-instruction-2 {
    font-size: 11px;
}

/*  */

@media only screen and (orientation: landscape) {
    #container-dcb-page {
        background-size: 30%;
    }

    #container-logo {
        height: 100%;
        align-items: center;
    }

    #logo {
        width: 20rem;
    }

    #container-spacer-3 {
        height: auto;
    }

    #text-payment-through-phone-bill {
        font-size: 1.6rem;
    }

    .container-form-submit#container-form-submit-identify > #form_submit,
    .container-form-submit#container-form-submit-welcome > #form_submit,
    .container-form-submit#container-form-submit-declined > #form_submit,
    .container-form-submit#container-form-submit-failed > #form_submit,
    .container-form-submit#container-form-submit-one-off-succeeded > #form_submit,
    .container-form-submit#container-form-submit-one-off-failed > #form_submit,
    .container-form-submit#container-form-submit-transaction-timed-out > #form_submit,
    .container-form-submit#container-form-submit-launch > #form_submit {
        font-size: 3rem;
    }

    #container-footer {
        font-size: 1.4rem;
    }
}