/**  LOADING  */

vd-video::part(loading) {
    border: 20px solid #ffff00;
    /** not visible BUT PRESENT*/
}

vd-video::part(loading_container) {
    border: 5px solid #ffc0cb;
    /** VISIBLE */
}

vd-video::part(loading_logo) {
    border: 5px solid #ffa500;
    /** not visible BUT PRESENT */
}

vd-video::part(loading_logo_img) {
    border: 5px solid #000000;
    /** not visible BUT PRESENT */
}

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

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

vd-video::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 */
    /** VISIBLE */
}

vd-video::part(loading_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 #008000;
    /** VISIBLE */
    width: 15%;
    height: 15%;
}

vd-video::part(loading_display_message_media) {
    border: 5px solid #c720ff;
    display: block;
    /** VISIBLE */
}

vd-video::part(loading_display_message_header) {
    border: 5px solid #ff02f7;
    display: block;
    /** VISIBLE */
}

vd-video::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-family: var(--typography-body-normal-font-family);
    border: 5px solid #daa520;
}

vd-video::part(loading_restart_button) {
    border: 5px solid #a2ff00;
    /* feedback part ?*/
}

/** INSTRUCTIONS */

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

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

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

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

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

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

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

vd-video::part(instructions_slide) {
    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-video::part(instructions_slide_box) {
    background-color: var(--color-neutral00);
    box-shadow: var(--shadow-sm);
    text-align: center;
    border-radius: var(--radius-sm);

    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-video::part(instructions_slide_box_image) {
    height: calc(var(--main-sdk-height) * 0.35);
    display: inherit;
    border: 5px solid #460a93;
}

vd-video::part(instructions_slide_box_subtitle) {
    margin: 0;
    margin-top: 2%;
    color: var(--color-neutral40);

    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-video::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);

    border: 5px solid #2bf850;
}

vd-video::part(instructions_slide_button) {
    border: none;
    box-shadow: var(--shadow-sm);
    color: var(--color-neutral00);

    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-video::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);

    margin: 0;
    cursor: pointer;
    padding: 0;
    float: right;
    border: 5px solid #13cab5;
}

vd-video::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);

    margin: 0;
    cursor: pointer;
    padding: 0;
    float: left;
    border: 5px solid #d4b128;
}

vd-video::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-video::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-video::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;

    text-align: center;
    font-size: calc(var(--main-sdk-width) * 0.045);
    border: 5px solid #0a81e2;
}

/** CAPTURE */

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

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

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

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

vd-video::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-width) * 0.15);
    max-width: none;
    fill: var(--color-neutral00);
    cursor: pointer;
    border: 5px solid #b91b1b;
}

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

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

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

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

/** WARNING USE SVG CSS STYLING CONDITIONS */
vd-video::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-video::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-video::part(capture_success_tick_path) {
    stroke: #159a00;
}

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

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

vd-video::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);
    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-video::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-family: var(--typography-body-normal-font-family);
    border: 5px solid #25e717;
}

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

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

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

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

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

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

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

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

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

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

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

/** ROTATE DEVICE */

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

vd-video::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-video::part(rotate_device_img) {
    max-height: 150px;
    transform: translateY(-50%);
    margin-top: 15px;
    border: 5px solid #b12727;
}

vd-video::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-video::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-family: var(--typography-body-normal-font-family);
    border: 2px solid #de110a;
}

/* FEEDBACK */

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

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

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

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

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