:root{
    --aragon-primary-base: #00607a;
    --aragon-primary-dark: #00475C;
    --aragon-alert-base: #d22333;
    --aragon-alert-dark: #a40014;
    --aragon-warning-base: #fdcb33;
    --aragon-neutral-light: #ededec;
    --aragon-neutral-lighter: #f6f6f5;
    --aragon-neutral-base: #92949b;
    --aragon-neutral-dark: #5e616b;
    --aragon-success-base: #24d14c;
    --aragon-success-dark: #1aa23a;
    --aragon-white: #ffffff;
    --aragon-black: #1f2331;
    --aragon-shadow: 0 0 #0000, 0 0 #0000, 0 0 0 3px #1f2331;
    --deloitte-green: var(--aragon-primary-base);
    --deloitte-turquoise: var(--aragon-primary-base);
    --deloitte-turquoise-2: var(--aragon-primary-dark);
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url('https://cdn.oba.doyfe.es/font/OpenSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url('https://cdn.oba.doyfe.es/font/OpenSans-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url('https://cdn.oba.doyfe.es/font/OpenSans-Bold.ttf') format('truetype');
}

* {
    font-family: "Open Sans", sans-serif !important;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
    color: var(--aragon-black);
}

body{
    counter-reset: instructions-counter;
}

app-root {
    display: block;
    padding: 0 0 30px;
}

app-root footer {
    display: none;
}

/*Buttons*/

.btn/* , .jDPPHt .vd-messageBox button  */{
    border-width: 1px;
    border-radius: 3px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 12px;
    padding-left: 12px;
    text-align: center;
    font-weight: 600;
    text-transform: none;
    box-shadow: none;
    min-width: 100px;
    min-height: 42px;
    width: auto !important;
    font-size: 100%;
    margin-bottom: 4px;
} 

/*Primary button*/
.btn-primary, .btn-primary-dialog{
    color: var(--aragon-white);
    background-color: var(--aragon-primary-base);
    border-color: var(--aragon-primary-base);
    margin-left: 4px !important;
}

.btn-primary:hover{
    color: var(--aragon-white);
    background-color: var(--aragon-primary-dark);
    border-color: var(--aragon-primary-dark);
}

.btn-primary:focus{
    background-color: var(--aragon-warning-base);
    border-color: var(--aragon-black);
    color: var(--aragon-black);
    box-shadow: var(--aragon-shadow) !important;
}

.btn-primary:active{
    background-color: var(--aragon-primary-dark) !important;
    border-color: var(--aragon-primary-dark) !important;
    color: var(--aragon-white) !important;
}

/*Secondary button*/

.btn-secondary {
    color: var(--aragon-primary-base);
    background-color: transparent;
    border-color: transparent;
    text-decoration-line: underline;
    margin-left: 4px;
    /* float: left; */
}

/* .col-12 > app-module-cover + .d-none.d-sm-block.buttons.generic-navigation-buttons.text-center > button.btn-secondary:only-of-type{
    background-color: var(--aragon-white);
    border-color: var(--aragon-primary-base);
    text-decoration-line: none;
    float: none;
} */

.btn-secondary:hover{
    background-color: var(--aragon-neutral-light) !important;
    border-color: var(--aragon-neutral-base) !important;
    color: var(--aragon-primary-base) !important;
    text-decoration-line: underline;
}

.btn-secondary:focus{
    background-color: var(--aragon-warning-base) !important;
    border-color: var(--aragon-warning-base) !important;
    color: var(--aragon-black) !important;
    box-shadow: var(--aragon-shadow) !important;
    text-decoration-line: underline;
}

.btn-secondary:active{
    background-color: var(--aragon-neutral-light) !important;
    border-color: var(--aragon-primary-base) !important;
    color: var(--aragon-primary-base) !important;
    text-decoration-line: underline;
}

/*Danger button*/

.btn-danger/* , .jDPPHt .vd-messageBox button */{
    color: var(--aragon-white);
    background-color: var(--aragon-alert-base);
    border-color: var(--aragon-alert-base);
}

.btn-danger:hover, .btn-danger:active/* , .jDPPHt .vd-messageBox button:active, .jDPPHt .vd-messageBox button:hover */{
    color: var(--aragon-white) !important;
    background-color: var(--aragon-alert-dark) !important;
    border-color: var(--aragon-alert-dark) !important;
}

.btn-danger:focus/* ,  .jDPPHt .vd-messageBox button:focus */{
    color: var(--aragon-black);
    background-color: var(--aragon-warning-base);
    border-color: var(--aragon-black);
    box-shadow: var(--aragon-shadow) !important;
}

/* .vd-messageBox button{
    text-transform: lowercase;
}

.vd-messageBox button::first-letter{
    text-transform: uppercase;
} */

/*Animacion botones*/

.c-spinner {
    position: relative;
    display: block;
    pointer-events: none;
}

.c-spinner::after {
    content: '';
    position: absolute !important;
    top: calc(50% - (1em / 2));
    left: calc(50% - (1em / 2));
    display: block;
    width: 1em;
    height: 1em;
    border-width: 0.125em;
    border-style: solid;
    border-color: var(--aragon-neutral-base);
    border-radius: 9999px;
    border-right-color: transparent;
    border-top-color: transparent;
    animation: spinAround 500ms infinite linear;
}
 
@keyframes spinAround {
    from {
        transform: rotate(0deg);
    }
 
    to {
        transform: rotate(360deg);
    }
}

app-module-otp > div > h2, 
app-module-idcard-veridas > div > div > div.text-center.my-4 > h2,
app-module-idcard-veridas > div > div:not([hidden]) > div.text-center.my-4 > h2,
app-module-idcard-veridas > div > div.text-center.my-4 > h2,
app-module-idcard-review > h2.text-center,
app-module-selfie-veridas > div.text-center > h2,
app-module-proof-of-life-veridas > div.text-center > h2,
h1 {
    font-size: 1.875rem !important;
    font-weight: bold;
    line-height: 1.25;
    margin-bottom: 1.75rem;
    margin-top: 0;
    color: var(--aragon-black) !important;
}

h1.h0 {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: 2rem;
}

/* h2 {
    font-size: 1.5rem !important;
    font-weight: bold !important;
    line-height: 1.25 !important;
    margin-bottom: 1rem !important;
    margin-top: 0;
    color: var(--aragon-black) !important;
} */

h2 {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.25;
    margin-bottom: 1rem;
    margin-top: 0;
    color: var(--aragon-black) !important;
}

h3 {
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 1.25;
    margin-bottom: 0.5rem;
    color: var(--aragon-black) !important;
}

h4 {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.25;
    margin-bottom: 0.5rem;
    margin-top: 0;
    color: var(--aragon-black) !important;
}

p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1rem !important;
    color: var(--aragon-black);
}

a {
    color: var(--aragon-primary-base);
    text-decoration: underline;
}

p.secondary a{
    color: var(--aragon-neutral-dark);
}

a:hover {
    text-decoration: underline;
}

a:focus, button.link:focus{
    background-color: var(--aragon-warning-base);
}

header{
    justify-content: center;
    align-items: center;
    background-color: var(--aragon-neutral-lighter);
    border-bottom: 1px solid var(--aragon-neutral-base);
    width: 100%;
}

body > section{
    min-height: calc(100vh - 193px - 59px);
}

footer{
    border-top: 1px solid var(--aragon-neutral-base);
    background-color: var(--aragon-neutral-lighter);
    position: absolute;
    width: 100%;
    padding: 20px 0;
    z-index: 1;
}

nav{
    width: 100%;
    height: 100%;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

/* nav > div.container, footer > div.container, app-oba-generic > div.container{
    width: 55%;
    max-width: 55%;
    margin: 0 35% 0 auto !important;
    padding-left: 15px;
    padding-right: 15px;
} */
/* nav > div.container, footer > div.container, app-oba-generic > div.container {
    width: 42%;
    max-width: 42%;
    margin: 0 auto 0 8.5% !important;
    padding-left: 15px;
    padding-right: 15px;
} */

/* app-oba-generic > div.container {
    width: 65%;
    max-width: 65%;
    margin: 0 auto 0 7.5% !important;
    padding-left: 15px;
    padding-right: 15px;
} */
/* 
nav > div.container, footer > div.container, app-oba-generic > div.container {
    /* width: 1731px;
    max-width: 1731px;
    margin: 0 auto !important;
    padding-left: 15px;
    padding-right: 15px;
} */

.logos .navbar-default, .logos .navbar{
    background-color: transparent;
    border-color: transparent;
}

.logos .navbar .container{
    margin-left: 0 !important;

}

.navbar-toggle{
    display: none;
}

.logos .navbar-brand{
    padding-left: 0;
}

a.navbar-brand{
    display: flex;
    align-items: center;
    /* padding-top: 12px !important; */
    padding-bottom: 12px !important;
}

.delimited{
    border-left: 1px solid var(--aragon-neutral-base);
    border-right: 1px solid var(--aragon-neutral-base);
}

.section{
    padding: 16px 12px 16px 12px;
}

.in-block{
    display: inline-block;
}

.separed{
    margin-right: 12px;
}

.no-margin-bottom{
    margin-bottom: 0;
}

.end-section{
    float: right;
}

.minimal{
    color: var(--aragon-black);
    text-decoration: none;
}

.minimal:hover{
    color: var(--aragon-black);
    text-decoration: none;
}

.minimal:focus{
    background-color: transparent;
    outline: none;
    color: var(--aragon-black);
    text-decoration: none;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 0 3px var(--aragon-black);
}

p.section{
    border-left: 1px solid var(--aragon-neutral-base);
    border-right: 1px solid var(--aragon-neutral-base);
    padding: 16px 12px 16px 12px;
    margin-bottom: 0;
    display: inline-block;
}

p p:first-child{
    margin-bottom: 0.6rem;
}

/* .jDPPHt .vd-messageBox{
    background-color: var(--aragon-white) !important;
    color: var(--aragon-black);
} */

.middle-header>h2 {
    margin: 0 0 0 0;
    text-align: left;
}

p.secondary, p.secondary abbr{
    font-size: .875rem;
    line-height: 1.25rem;
    margin-bottom: .5rem;
    color: var(--aragon-neutral-dark);
    cursor: text;
}

.regular-link {
    text-decoration: underline;
}

.special-title-link {
    font-weight: 900;
    color: var(--aragon-white);
    font-size: 1.75rem;
    text-decoration: none;
    height: fit-content;
}

.horizontal-list {
    display: flex;
    list-style-type: none;
    margin: 0;
    height: fit-content;
    padding-inline-start: 0;
    margin: 0 auto;
    width: 70%;

}

.authory{
    margin-bottom: 0.5rem !important;
}

li.menu-element {
    margin-right: 20px;
}

.upper-header {
    background-color: var(--aragon-white);
    border-bottom: 1px solid var(--aragon-neutral-base);
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 16px;
    padding-left: 16px;
    height: fit-content;
    text-align: start;
}

.middle-header {
    background-color: #2d495f;
    color: var(--aragon-white);
    font-weight: bold;
    padding-top: 28px;
    padding-bottom: 28px;
    padding-right: 16px;
    padding-left: 16px;
    
}

.centered-text{
    margin: 0 auto;
    width: 70%;
    display: block;
}

.centered-svg{
    margin: 0 auto;
    width: 37%;
    display:inline-block;
}

.lower-header {
    background-color: var(--aragon-neutral-lighter);
    border-bottom: 1px solid var(--aragon-neutral-base);
    padding-top: 14px;
    padding-bottom: 14px;
    padding-right: 16px;
    padding-left: 16px;
    text-align: left;
}

/*Logo pie de pagina*/

.euro-logo{
    height: 2.7rem !important;
}

.logos{
    padding-top: 1.3rem;
}

/*Casilla de verificación*/

.form-check input ~ .form-check-label:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background-color: var(--aragon-white);
    border: var(--aragon-black) 1px;
    color: var(--aragon-primary-base);
    position: absolute;
    left: 0px;
    top: 8px;
    margin-left: 4px;
}

.form-check .form-check-label:after {
    left: 8px;
    top: 11px;
    width: 8px;
    height: 14px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.form-check input:focus ~ .form-check-label:before {
    box-shadow: 0 0 0 0px #fff, 0 0 0 calc(4px + 0px) var(--aragon-warning-base), inset 0 0 0 3px var(--aragon-black), 0 0 #0000;
    border-color: var(--aragon-black);
}

html.iframe{
    overflow-y: hidden;
}

/* .container-fluid, .row, .col-12{
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.text-center{
    text-align: left !important;
}

.offset-lg-3, .offset-md-2, .offset-md-3, .offset-sm-1, button.ml-auto{
    margin-left: 0 !important;
}

.row .p-3{
    padding: 0 !important;
}

.col-md-8{
    padding-left: 0;
} */

/* Cambios selectores especificos alineado izquierda */

/* Cambiado */
section div.angular-body .container-fluid,
section div.angular-body .container-fluid .row,
section div.angular-body .container-fluid .row .col-12,
.container .row.justify-content-center .col-12{
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.col-12 > app-module-otp > div > .text-center,
.col-12 > app-module-otp > div > .text-center,
.col-12 > app-module-otp > div > .text-center > form.text-center,
div > .text-center.my-4,
div > .text-center.mt-4,
div > .text-center.instructions-container,
div > div.row > .text-center,
div.row > .col-sm-6.text-center,
div.row > .col-12.text-center,
app-module-idcard-veridas > div > div > div > .text-center,
.row > .col-12.text-center,
app-module-idcard-review > .text-center,
.col-12 > .buttons.text-center,
app-module-selfie-veridas > .text-center,
app-module-selfie-veridas > div > .text-center,
app-module-cover > .text-center,
app-module-proof-of-life-veridas > .text-center,
app-module-proof-of-life-verida > div > div.row > .d-flex.flex-column.mx-auto > .text-center,
app-module-idcard-veridas > div > div > .text-center{
    text-align: left !important;
}

.row.p-3 .col-8.offset-2.d-md-flex.col-sm-6.offset-sm-0.col-lg-3.offset-lg-3.text-center.p-2,
.row.p-3 .col-6.offset-3.d-md-flex.col-md-4.offset-md-4.text-center.p-2,
div .row .d-none.d-md-flex.col-md-8.offset-md-2.mt-4, 
app-module-selfie-veridas .row .offset-md-3, 
app-module-selfie-veridas .row .offset-sm-1, 
div > button.btn.ml-auto,
.row .flex-column.mx-aut{
    margin-left: 0 !important;
}

.row.p-3{
    padding: 0 !important;
}

app-module-idcard-veridas div .d-none.offset-md-2.col-md-8{
    padding-left: 0;
}

.instructions-container.text-center ng-lottie.instructions{
    margin: 0 !important;
}

/* Fin cambios selectores más especificos alineado izda */

.ml-auto.mx-auto{
    margin-left: 0 !important;
}

div.row.mt-4 div.d-none.d-md-flex.col-12{
    justify-content: normal;
}

/* .iceEne{
    background-color: var(--aragon-white) !important;
} */

div.additionalActions.text-center{
    margin-bottom: 0;
}

/* div.container-message.vddoc-friendly{
    color: var(--aragon-white);
}

.vddoc-error-message{
    color: var(--aragon-white);
} */

/* #vd-detection-modal-content > div{
    background-color: var(--aragon-white);
} */


.text-center .alert-danger, .alert-danger/* , .otp-form .text-error */{
    background-color: var(--aragon-white);
    border: 4px solid var(--aragon-alert-base);
    color: var(--aragon-black);
    font-weight: 600;
}

div.row.mt-4 > div.d-none.d-md-flex.col-12{
    justify-content: none;
}

div#qrcode{
    margin-left: 0 !important;
    margin-right: 0 !important;
}

select{
    background-color: var(--aragon-white);
    border-width: 1px;
    border-color: var(--aragon-black);
    border-radius: 3px;
}

.otp-form{
    margin-left: 0 !important;
    margin-right: 0 !important;
}

select:focus{
    box-shadow: 0 0 0 0px #fff, 0 0 0 calc(4px + 0px) var(--aragon-warning-base), inset 0 0 0 3px var(--aragon-black) 0 0 #0000;
}

input:focus{
    border-color: var(--aragon-black);
    box-shadow: 0 0 0 0px #fff, 0 0 0 calc(4px + 0px) var(--aragon-warning-base), inset 0 0 0 3px var(--aragon-black) 0 0 #0000;
}

/* button.link{
    text-transform: lowercase;
    text-decoration: underline;
    color: var(--aragon-primary-base);
}

button.link::first-letter{
    text-transform: uppercase;
} */

@media only screen and (max-width:480px){
    .buttons .btn {
        display: block;
        width: 100%;
        padding: 0;
        margin-bottom: 2rem;
    }

    app-module-idcard-veridas ol,
    app-module-selfie-veridas ol,
    app-module-proof-of-life-veridas ol{
    max-width: 100%;
    }
}

@media only screen and (max-width:768px){
    .buttons .btn {
        display: inline-block;
        width: 100%;
        padding: 0;
        margin-bottom: 2rem;
    }

    /* nav > div.container, footer > div.container, app-oba-generic > div.container{
        width: 90%;
        max-width: 90%;
        margin: auto !important;
        padding-left: 10px;
        padding-right: 10px;
    } */

    .navbar > .container{
        display: flex !important;
        flex-wrap: nowrap;
    }

    a.navbar-brand{
        display: flex;
        align-items: center;
        /* padding-top: 8px !important;
        padding-bottom: 8px !important;*/
        padding-top: 15px !important;
        padding-bottom: 12px !important;
        padding-left: 0;
        padding-right: 0;
        margin-right: 0;
        height: 100%;
    }

    .delimited{
        border-left: none;
        border-right: none;
    }

    #w0-collapse{
        display: inline-block;
    }

    #w1{
        display: none !important;
    }

    .container .navbar-header, .container > .navbar-collapse{
        margin-left: 0;
        margin-right: 0;
    }

    .navbar-collapse{
        border-top-width: 0px;
    }

    .end-section{
        padding-right: 0;
    }

    #mainSection{
        padding-top: 0 !important;
    }

    .col > .col-md-4{
        width: auto;
    }
}

.col-12 > .d-sm-none{
    display: none !important;
}

.col-12 > .d-none{
    display: inline-block !important;
}

app-module-otp > div > .text-center > .description-message {
    width: 40%;
}

@media only screen and (max-width: 768px){
    app-module-otp > div > .text-center > .description-message {
        width: 80%;
    }
}

.navbar-header{
    display: inline-block;
}

app-module-cover > h2{
    display: none;
}

#pasos{
    margin-bottom: 0;
    padding-top: 30px;
    color: var(--aragon-neutral-dark) !important;
    font-weight: normal;
    /* padding-left: calc(15px + 4px); */
}

html:not(.mobile) body {
    padding: 0;
}

app-module-idcard-veridas > div > div > .text-center.my-4,
app-module-idcard-veridas > div > .text-center.my-4{
    margin-top: 0 !important;
}

.form-control, input[type="text"], input[type="tel"], input[type="email"], #dCode{
    background-color: var(--aragon-white);
    border-width: 1px;
    border-color: var(--aragon-black);
    border-radius: 3px;
    color: var(--aragon-black);
    font-weight: 600;
    margin-left: 4px;
    width: 90%;
    outline-style: none;
    border-style: solid;
}

.form-control:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus{
    box-shadow: 0 0 #0000, 0 0 0 calc(4px + 0px) var(--aragon-warning-base), inset 0 0 0 3px var(--aragon-black);
    border-color: var(--aragon-black);
}

.form-control.is-invalid,
.otpError{
    border-color: var(--aragon-black);
    box-shadow: 0 0 0 0px #fff, 0 0 0 calc(2px + 0px) var(--aragon-alert-base);
    color: var(--aragon-black);
}

.otpError{
    font-weight: 700;
}

.d-none.d-sm-block.buttons.generic-navigation-buttons.text-center{
    padding-top: 0;
}

.delimited.section.in-block > .no-margin-bottom.minimal{
    line-height: 1.5;
    font-size: 1rem;
    font-weight: 400;
}

button > svg > path{
    color: inherit;
    fill: currentColor;
}

.button-icon-left{
    margin-right: 10px;
    color: inherit;
}

.button-icon-right{
    margin-left: 10px;
    color: inherit;
}

p.text-error > span{
    color: var(--aragon-alert-base);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    font-weight: 600;
    display: block;
}

div.form-group > label{
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
}

.row > .col-12.text-center > p.my-4,
app-module-proof-of-life-veridas  p.mt-4.font-weight-bold.text-center{
    margin-top: 0 !important;
}

app-module-selfie-veridas > div > .row > div.col-12.text-center.my-4:has(img.preview) {
    padding: 0 !important;
    margin-top: 0 !important;
}

app-module-selfie-veridas img.preview{
    padding: 0 !important;
}

app-module-proof-of-life-veridas > div > div.row > .d-flex.flex-column.mx-auto{
    margin-left: 0 !important;
}

app-module-proof-of-life-veridas > div > .row.mt-4 > .d-none.d-md-flex.col-12{
    justify-content: normal !important;
}

.infoScreenBackdrop{
    z-index: 900;
}

div .row .d-none.d-md-flex.col-md-8.offset-md-2{
    margin-left: 0;
}

app-module-idcard-veridas div > .d-none.col-md-8.offset-md-2,
app-module-selfie-veridas div > .d-none.col-md-8.offset-md-2,
app-module-proof-of-life-veridas div > .d-none.col-md-8.offset-md-2{
    display: block !important;
}

app-module-idcard-veridas div > .d-md-none,
app-module-selfie-veridas div > .d-md-none,
app-module-proof-of-life-veridas div > .d-md-none{
    display: none !important;
}

app-module-idcard-veridas div > .d-none.col-md-8.offset-md-2 > .btn-primary.pull-right,
app-module-selfie-veridas div > .d-none.col-md-8.offset-md-2 > .btn-primary.pull-right,
app-module-proof-of-life-veridas div > .d-none.col-md-8.offset-md-2 > .btn-primary.pull-right{
    float: none !important;
}

@media only screen and (max-width: 578px){
    .instructions-container{
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* .row.p-3 .col-8.offset-2.d-md-flex.col-sm-6.offset-sm-0.col-lg-3.offset-lg-3.text-center.p-2{
        margin-left: 16.666667% !important;
    } */

    .row.p-3 .col-8.offset-2.d-md-flex.col-sm-6.offset-sm-0.col-6.col-md-4.col-lg-3.text-center.p-2,
    .row.p-3 .col-8.offset-2.d-md-flex.col-sm-6.offset-sm-0.col-lg-3.offset-lg-3.text-center.p-2{
        margin-left: 0 !important;
    }
}

app-module-proof-of-life-veridas .infoScreenBackdrop > .infoScreenContent .row > .d-none.d-md-flex.col-12{
    display: block !important;
}

app-module-selfie-veridas > .text-center .row > .d-none.d-md-flex.col-md-8.offset-md-2.mt-4,
app-module-selfie-veridas > div  .d-none.d-md-flex.col-md-8.offset-md-2,
app-module-proof-of-life-veridas .row > .d-none.d-md-flex.col-md-8.offset-md-2.mt-4{
    padding-left: 0;
}

app-module-proof-of-life-veridas .row.mt-4 > .d-none.d-md-flex.col-12{
    justify-content: normal;
}

span.vddoc-high-visibility{
    color: var(--aragon-white);
}

.vddoc-text-container > .vddoc-text{
    color: var(--aragon-white);
}

/* .col-12:has(app-module-cover .error-notification) > .d-none.d-sm-block.buttons.generic-navigation-buttons.text-center > .btn-secondary:only-of-type{
    border: solid;
    border-color: var(--aragon-primary-base);
    border-width: 1px;
} */

app-module-idcard-veridas ol > li,
app-module-selfie-veridas ol > li,
app-module-proof-of-life-veridas ol > li{
    padding: 1rem 0;
    font-weight: 600;
    color: var(--aragon-black);
}

app-module-idcard-veridas ol > li > p,
app-module-selfie-veridas ol > li > p,
app-module-proof-of-life-veridas ol > li > p{
    margin-bottom: 0 !important;
    font-weight: 600;
}

app-module-idcard-veridas ol ul,
app-module-selfie-veridas ol ul,
app-module-proof-of-life-veridas ol ul{
    padding-inline-start: 5px;
    margin-left: 1.9rem;
    list-style: disc;
}

app-module-idcard-veridas ol ul li, ol ul li > ::marker,
app-module-selfie-veridas ol ul li, ol ul li > ::marker,
app-module-proof-of-life-veridas ol ul li, ol ul li > ::marker{
    color: var(--aragon-neutral-base);
    font-size: 0.9rem;
}

app-module-idcard-veridas ol,
app-module-selfie-veridas ol,
app-module-proof-of-life-veridas ol{
    /* border-top: solid;
    border-bottom: solid; */
    border-width: 1px;
    padding-inline-start: 0;
    max-width: fit-content;
    list-style: none;
}

app-module-idcard-veridas ol > li,
app-module-selfie-veridas ol > li,
app-module-proof-of-life-veridas ol > li{
    border-top: solid;
    border-width: 1px;
}

app-module-idcard-veridas ol > li::before,
app-module-selfie-veridas ol > li::before,
app-module-proof-of-life-veridas ol > li::before{
    content: counter(instructions-counter) ". ";
    counter-increment: instructions-counter;
    margin-left: 1rem;
}

app-module-idcard-veridas ol > li:last-of-type,
app-module-selfie-veridas ol > li:last-of-type,
app-module-proof-of-life-veridas ol > li:last-of-type{
    border-bottom: solid;
    border-width: 1px;
}

app-module-idcard-veridas ol > li > p,
app-module-selfie-veridas ol > li > p,
app-module-proof-of-life-veridas ol > li > p{
    display: inline-block;
}

.default-notification{
    padding: 16px;
    display: flex;
    margin-bottom: 1.5rem;
    border: 4px solid var(--aragon-primary-base);
    align-items: center;
}

@media only screen and (max-width:480px){
    app-module-idcard-veridas ol,
    app-module-selfie-veridas ol,
    app-module-proof-of-life-veridas ol{
    max-width: 100%;
    }
}

.wrapper {
    background-color: lightgray;
    width: auto;
}

.progress-bar {
    padding-top: calc(1rem + 2px);
    background-color: transparent;
    position: relative;
    padding-inline-start: 0;
    width: auto;
    float: left;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.progress-bar li {
    list-style-type: none;
    height: calc(100% / 3 - 20px);
    text-align: center !important;
    position: relative;
}

.progress-bar li div {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #00607a;
    text-align: center;
    margin: auto;
}

.progress-bar li::after {
    content: '';
    height: calc(100% - 4px);
    width: 5px;
    position: absolute;
    left: 7.5px;
    margin-top: -2px;
    background-color: #00607a;
}

.progress-bar li:last-child::after {
    content: none;
}

#instructions-holder{
    margin-left: 2.2rem;
}

app-module-proof-of-life-veridas  span.checkbox-icon{
    background-color: var(--aragon-primary-base) !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

app-module-proof-of-life-veridas  span.checkbox-icon:after{
    display: none !important;
}

app-module-proof-of-life-veridas .row.mt-4 > .d-none.d-md-flex.col-12{
    display: block !important;
}

.infoScreenBackdrop .row .d-flex.mb-4{
    max-width: 288px !important;
}

.infoScreenBackdrop img.placeholder.mx-auto{
    /*width: auto !important;*/
}

.infoScreenBackdrop .row > .d-none.d-md-flex.col-12 > .btn-primary{
    float: left;
}

.infoScreenBackdrop .row > .d-none.d-md-flex.col-12 > .btn-secondary{
    float: right;
}

.spinner-size{
    font-size: 2rem;
    line-height: 1;
}