/**  LOADING  */

vd-document::part(loading) {
    border: 20px solid #ffff00;
    position: absolute;
    width: 95%;
    height: 95%;
}

vd-document::part(loading_container) {
    border: 5px solid #ffc0cb;
}

vd-document::part(loading_logo) {
    border: 5px solid #ffa500;
}

vd-document::part(loading_logo_img) {
    border: 5px solid #000000;
}

vd-document::part(loading_spinner) {
    border: 5px solid #8a2be2; /** uncomment to see spinner animation */
}

vd-document::part(loading_spinner_container) {
    border: 5px solid #ff0026; /** uncomment to see spinner animation */
}

vd-document::part(loading_spinner_animation) {
    margin: 60px auto;
    font-size: 1rem;
    position: relative;
    text-indent: -9999em;
    border: 1.5rem solid var(--color-neutral05);
    border-left: 1.5rem solid var(--color-primary-main);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.25s infinite linear;
    animation: load8 1.25s infinite linear;
    border: 5px solid #1900ff; /** uncomment to see spinner animation */
}

vd-document::part(loading_message_is_loading) {
    border: 5px solid #e9b30a;
}
vd-document::part(loading_display_message) {
    border: 5px solid #008000;
    background-color: var(--color-neutral00);
}

vd-document::part(loading_display_message_media) {
    border: 5px solid #c720ff;
}

vd-document::part(loading_display_message_header) {
    border: 5px solid #ff02f7;
}

vd-document::part(loading_display_message_text) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-main);
    font-size: calc(var(--main-sdk-width) * 0.042);
    font-weight: bold;
    font-family: var(--typography-body-normal-font-family);
    border: 5px solid #daa520;
}

vd-document::part(loading_restart_button) {
    border: 5px solid #a2ff00;
}

vd-document::part(capture_manual_capture_button) {
    outline: none;
    cursor: pointer;
    width: 100vw;
    border: 5px solid #ee00ee;
}

vd-document::part(capture_manual_capture_button_img) {
    background-color: blue;
}

/** INSTRUCTIONS */

vd-document::part(instructions) {
    border: 15px solid #25109d;
    position: absolute;
    width: 98%;
    height: 98%;
}

vd-document::part(instructions_logo) {
    border: 5px solid #cd0f0f;
}

vd-document::part(instructions_logo_img) {
    border: 5px solid #aeb846;
}

vd-document::part(instructions_close_button) {
    border: 5px solid #ce12c1;
}

vd-document::part(instructions_close_button_img) {
    width: 100%;
    height: 100%;
    opacity: 1;
    border: 5px solid #e57e09;
}

vd-document::part(instructions_close_button_button) {
    border: 5px solid #0cbfdf;
    width: calc(var(--main-sdk-height) * 0.15);
    max-width: none;
}

vd-document::part(instructions_guide_modal) {
    border: 10px solid #990b0b;
}

vd-document::part(instructions_document_back) {
    border: 10px solid #990b0b;
}

vd-document::part(instructions_slide) {
    font-weight: bold;
    overflow: hidden;
    margin: auto;
    width: 100%;
    height: var(--main-sdk-height);
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    display: flex;
    align-content: space-between;
    font-family: var(--typography-body-normal-font-family);
    border: 10px solid #14b421;
}

vd-document::part(instructions_slide_box) {
    background-color: var(--color-neutral00);
    box-shadow: var(--shadow-sm);
    text-align: center;
    border-radius: var(--radius-sm);
    font-weight: bold;
    overflow: hidden;
    padding: calc(var(--main-sdk-height) * 0.02);
    width: calc(var(--main-sdk-width) * 0.9);
    height: calc(var(--main-sdk-height) * 0.72);
    border: 5px solid #b92c2c;
}

vd-document::part(instructions_slide_box_image) {
    height: calc(var(--main-sdk-height) * 0.35);
    display: inherit;
    border: 5px solid #460a93;
}

vd-document::part(instructions_slide_box_subtitle) {
    margin: 0;
    margin-top: 2%;
    color: var(--color-neutral40);
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    font-size: calc(var(--main-sdk-height) * 0.02);
    white-space: pre-line;
    padding: 0;
    border: 5px solid #7552e8;
}

vd-document::part(instructions_slide_box_title) {
    font-weight: normal;
    margin: 0 auto 5px;
    color: var(--color-primary-main);
    font-size: calc(var(--main-sdk-height) * 0.028);
    font-weight: bold;
    border: 5px solid #2bf850;
}

vd-document::part(instructions_slide_button) {
    border: none;
    box-shadow: var(--shadow-sm);
    color: var(--color-neutral00);
    font-weight: bold;
    padding: calc(var(--main-sdk-height) * 0.02);
    cursor: pointer;
    border-radius: var(--radius-sm);
    background: linear-gradient(
        to right,
        var(--color-primary-dark),
        var(--color-primary-light) 100%
    );
    font-size: calc(var(--main-sdk-height) * 0.024);
    font-family: var(--typography-body-normal-font-family);
    border: 5px solid #ff03dd;
}

vd-document::part(instructions_slide_button_next) {
    align-items: center;
    border: none;
    background: var(--color-neutral00);
    color: var(--color-primary-main);
    font-size: calc(var(--main-sdk-height) * 0.02);
    font-weight: bold;
    margin: 0;
    cursor: pointer;
    padding: 0;
    float: right;
    border: 5px solid #13cab5;
}

vd-document::part(instructions_slide_button_prev) {
    align-items: center;
    border: none;
    background: var(--color-neutral00);
    color: var(--color-primary-main);
    font-size: calc(var(--main-sdk-height) * 0.02);
    font-weight: bold;
    margin: 0;
    cursor: pointer;
    padding: 0;
    float: left;
    border: 5px solid #d4b128;
}

vd-document::part(instructions_slide_buttons_container) {
    width: 100%;
    position: absolute;
    bottom: 0;
    margin: 0px auto;
    font-family: var(--typography-body-normal-font-family);
    border: 5px solid #ee3535;
}

vd-document::part(instructions_slide_dots) {
    margin: auto;
    border-radius: 50%;
    background: var(--color-neutral20);
    width: calc(var(--main-sdk-height) * 0.018);
    height: calc(var(--main-sdk-height) * 0.018);
    border: 5px solid #c2fc14;
}

vd-document::part(instructions_slide_header) {
    width: calc(var(--main-sdk-width) * 0.7);
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-primary-main);
    margin: 0;
    font-weight: bold;
    text-align: center;
    font-size: calc(var(--main-sdk-width) * 0.045);
    border: 5px solid #0a81e2;
}

/** CAPTURE */

vd-document::part(capture) {
    border: 15px solid #24d2ac;
}

vd-document::part(capture_logo) {
    border: 5px solid #41d439;
}

vd-document::part(capture_logo_img) {
    border: 5px solid #0f6984;
}

vd-document::part(capture_close_button) {
    border: 5px solid #bfff00;
}

vd-document::part(capture_close_button_button) {
    position: absolute;
    top: calc(var(--main-sdk-height) * 0.02);
    right: calc(var(--main-sdk-height) * 0.02);
    width: calc(var(--main-sdk-height) * 0.15);
    max-width: none;
    fill: var(--color-neutral00);
    cursor: pointer;
    border: 5px solid #b91b1b;
}

vd-document::part(capture_close_button_img) {
    width: 100%;
    height: 100%;
    opacity: 1;
    border: 5px solid #7c7ced;
}

vd-document::part(capture_svg) {
    border: 5px solid #5d0baf;
}

vd-document::part(capture_success_tick) {
    border: 5px solid #eef60b;
}

vd-document::part(capture_success_tick_img) {
    border: 5px solid #e0a649;
}

/** WARNING USE SVG CSS STYLING CONDITIONS */
vd-document::part(capture_success_tick_svg) {
    width: calc(var(--main-sdk-height) * 0.25);
    height: calc(var(--main-sdk-height) * 0.25);
    border-radius: 50%;
    display: block;
    stroke-width: 5;
    stroke: var(--color-neutral00);
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px var(--color-alert-success);
    animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
    border: 5px solid #ffffff;
}

/** WARNING USE SVG CSS STYLING CONDITIONS */
vd-document::part(capture_success_tick_circle) {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: var(--color-neutral05);
    fill: red;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
    stroke: #0342ff;
}

/** WARNING USE SVG CSS STYLING CONDITIONS */
vd-document::part(capture_success_tick_path) {
    stroke: #159a00;
}

vd-document::part(capture_video) {
    border: 5px solid #47c135;
}

vd-document::part(detection_canvas) {
    border: 25px solid #56d83f;
}

vd-document::part(capture_display_message) {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(var(--main-sdk-width) * 0.8);
    height: auto;
    opacity: 1;
    position: absolute;
    /*     bottom: calc(var(--main-sdk-height) * 0.02); COMMENTED IN ORDER TO BE ABLE TO SEE THE MANUAL CAPTURE BUTTON
    */
    padding: calc(var(--main-sdk-height) * 0.02);
    border-radius: var(--radius-sm);
    background-color: var(--color-neutral00);
    text-align: center;
    border: 5px solid #9236dc;
}

vd-document::part(capture_display_message_text) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-main);
    font-size: calc(var(--main-sdk-width) * 0.042);
    font-weight: bold;
    font-family: var(--typography-body-normal-font-family);
    border: 5px solid #25e717;
}

vd-document::part(capture_display_message_media) {
    border: 5px solid #d2453b;
}

vd-document::part(capture_display_message_header) {
    border: 5px solid #c78e14;
}

vd-document::part(capture_arrow_svg) {
    border: 15px solid #41beb4;
}

vd-document::part(capture_glowing_outline) {
    border: 15px solid #059200;
}

vd-document::part(capture_glowing_outline_container_tooFar) {
    display: flex;
    flex-direction: row;
    border: 15px solid #c530b4;
}

vd-document::part(capture_glowing_outline_container_nodetection) {
    display: flex;
    flex-direction: row;
    border: 15px solid #c55830;
}

vd-document::part(capture_glowing_outline_container_success) {
    display: flex;
    flex-direction: row;
    border: 15px solid #30fa26;
}

vd-document::part(capture_glowing_outline_container_detection) {
    display: flex;
    flex-direction: row;
    border: 15px solid #e9f906;
}

vd-document::part(capture_glowing_outline_container) {
    display: flex;
    flex-direction: row;
    border: 15px solid #061af9;
}

vd-document::part(capture_head_actions) {
    border: 5px solid #3f3668;
}

vd-document::part(capture_head_actions_row) {
    display: flex;
    flex-direction: row;
    justify-items: center;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: 80px;
    border: 5px solid #c61826;
}

vd-document::part(capture_head_steps) {
    color: var(--color-primary-main);
    font-size: calc(var(--main-sdk-height) * 0.025);
    border: 5px solid #d9d321;
}

vd-document::part(capture_mask_svg) {
    border: 5px solid #1f7350;
}

vd-document::part(capture_emotions) {
    display: flex;
    flex-direction: row;
    border: 5px solid #9b2525;
}
vd-document::part(capture_repeat_button) {
    padding: 10px 20px 10px;
    transition: all 0.3s 0.01s ease-in-out;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-sm);
    font-size: calc(1rem + 1vw);
    font-weight: bold;
    outline: none;
    cursor: pointer;
    margin: 5px;
    width: 100%;
    border: 2px solid transparent;
    white-space: nowrap;
    background: linear-gradient(
        to right,
        var(--color-primary-dark),
        var(--color-primary-light) 100%
    );
    color: var(--color-neutral00);
    border: 5px solid #e0e800;
}

/** REVIEW */

vd-document::part(review) {
    border: 5px solid #c8ff00;
}

vd-document::part(review_logo) {
    border: 5px solid #7c1111;
}

vd-document::part(review_logo_img) {
    border: 5px solid #35bc23;
}

vd-document::part(review_image) {
    border: 5px solid #f2a921;
}

vd-document::part(review_image_container) {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
    align-items: center;
    margin: calc(var(--main-sdk-height) * 0.01);
    background-color: var(--color-primary-light);
    border: 5px solid #37ff00;
}

vd-document::part(review_image_img_container) {
    max-width: calc(30%-20px);
    margin: 10px 0;
    box-sizing: border-box;
    border: 7px solid var(--color-neutral00);
    box-shadow: var(--shadow-sm);
    border: 5px solid #000dff;
}

vd-document::part(review_image_img) {
    border: 5px solid #e71e9d;
}
vd-document::part(review_image_message_media) {
    border: 5px solid #2bd2d8;
}
vd-document::part(review_image_message) {
    width: 90%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    border-radius: var(--radius-sm);
    background-color: var(--color-neutral00);
    font-size: calc(1rem + 1vw);
    font-weight: bold;
    font-family: var(--typography-body-normal-font-family);
    color: var(--color-primary-main);
    box-shadow: var(--shadow-sm);
    max-width: 1100px;
    margin: 0;
    padding: 10px 15px;
    border: 5px solid #c300ff;
}

vd-document::part(review_image_message_buttons) {
    display: flex;
    border: 5px solid #4da32c;
}

vd-document::part(review_image_message_buttons_continue) {
    background: linear-gradient(
            to right,
            var(--color-primary-dark) 0%,
            var(--color-primary-light) 100%
        )
        border-box;
    color: var(--color-neutral00);
    border: 5px solid #0303b8;
}

vd-document::part(review_image_message_buttons_repeat) {
    background: linear-gradient(to right, var(--color-neutral00) 0%, var(--color-neutral00) 100%)
        border-box;
    color: var(--color-primary-main);
    border: 5px solid #5f0047;
}

vd-document::part(review_image_message_text) {
    width: 50%;
    text-align: center;
    border: 5px solid #e9b953;
}

/** ROTATE DEVICE */

vd-document::part(rotate_device) {
    border: 15px solid #1319db;
}

vd-document::part(rotate_device_container) {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary-light);
    width: 100%;
    height: 100%;
    border: 5px solid #efa213;
}

vd-document::part(rotate_device_img) {
    max-height: 150px;
    transform: translateY(-50%);
    margin-top: 15px;
    border: 5px solid #b12727;
}

vd-document::part(rotate_device_display_message) {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(var(--main-sdk-width) * 0.8);
    height: auto;
    opacity: 1;
    position: absolute;
    bottom: calc(var(--main-sdk-height) * 0.02);
    padding: calc(var(--main-sdk-height) * 0.02);
    border-radius: var(--radius-sm);
    background-color: var(--color-neutral00);
    text-align: center;
    border: 5px solid #1e4815;
}

vd-document::part(rotate_device_display_message_text) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-main);
    font-size: calc(var(--main-sdk-width) * 0.042);
    font-weight: bold;
    font-family: var(--typography-body-normal-font-family);
    border: 2px solid #de110a;
}

vd-document::part(feedback_logo) {
    border: 5px solid #ffa500;
}

vd-document::part(feedback_logo_img) {
    border: 5px solid #000000;
}

vd-document::part(feedback_display_message_text) {
    border: 5px solid #daa520;
}

vd-document::part(feedback_display_message) {
    border: 5px solid #008000;
}

vd-document::part(feedback_restart_button) {
    border: 5px solid #ff03dd;
}

vd-document::part(feedback_close_button) {
    border: 5px solid #ce12c1;
}

vd-document::part(feedback_close_button_img) {
    border: 5px solid #e57e09;
}

vd-document::part(feedback_close_button_button) {
    border: 5px solid #0cbfdf;
}
