@import "form.css";
@import "select2.css";

@import "account/index.css";
@import "global/index.css";
@import "legal/index.css";
@import "shared/index.css";
@import "support/index.css";
@import "user-purchases/index.css";

:root {
    /*I'm changing the colors below to versions that have the 
    same color but without any transparency. It's caused some weirdness
    in a few spots with dropdowns/selects being transparent.
    The color definitions as they appear
    in the designs are next to the variables.
    */

    --primary: rgb(29,71,89); /* rgba(7, 53, 73, 0.9); */
    --primary-light: rgb(227,236,238); /* rgba(65, 129, 143, 0.15); */
    --primary-lighter: rgb(236,239,240); /* rgba(196, 205, 209, 0.32); */
    --primary-hover: rgb(27,46,55); /* rgba(5, 26, 35, 0.9); */
    --primary-focus: rgba(65, 129, 143, 0.03);
    --white: rgba(255, 255, 255, 1);
    --boxes: rgba(196, 205, 209, 0.32);
    --success: #59D599;
    --danger: #EA4335;
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 32px;
    --size-sm: 8px;
    --size-md: 16px;
    --size-lg: 32px;
    --space-lg: 60px;
    --space-md: 40px;
    --space: 15px;
    --border-radius-size: 8px;
}

body {
    font-family: Inter;
    color: var(--primary);
}

.divider {
    width: 100%;
    height: 4px;
    background-color: var(--primary-lighter);
    margin: 12px 0;
}


.ee-form-control {
    min-height: 36px !important;
    padding: 0 16px;
    background-color: var(--primary-lighter) !important;
}

.accordion-video-body {
    display: inline-flex;
}

.accordion-video {
   /* width: 465px;
    height: 260px;*/
    margin: 10px;
}

.faq-video {
    width: 465px;
    height: 260px;
}