﻿html { scroll-behavior: smooth; }
.page.embed-page { font-family: "Montserrat", Arial, Helvetica, sans-serif !important; text-align: left; font-size: 16px; }
    .page.embed-page h1 { margin-bottom: 20px; }
    .page.embed-page p { margin: 10px auto; }
.embed-header { background-image: url('/i/support/atlas-forms-header-mobile.jpg'); }
.embed-header { background-size: cover; width: 100%; height: 32.8125vw; max-height: 400px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: start; }
    .embed-header > * { margin: 1.5vw 0; }
    .embed-header img { max-width: 150px; }
    .embed-header h1 { font-weight: 400; color: #fff; white-space: nowrap; font-size: clamp(30px, 3vw, 60px); margin-left: 40px; }

.embed-description { margin-bottom: 20px; display: flex; flex-flow: row wrap; justify-content: center; }
    .embed-description > * { margin: 20px; }
.embed-left { width: 500px; max-width: 100%; padding: 0 10px; }
    .embed-left .hbspt-form { padding: 10px; border: 1px solid #888; box-shadow: 0 2px 3px #aaa; }
        .embed-left .hbspt-form .invalid.error { border: 2px solid #f00; }
        .embed-left .hbspt-form .hs-error-msg { font-weight: 700; color: #f00; }
    .embed-left h1 { font-size: 24px; font-weight: 700; }
    .embed-left h2 { font-size: 22px; margin: 20px auto 5px; }
    .embed-left img[src*="Logo"], .embed-left img[src*="logo"] { display: none !important; }
    /*.embed-left .hs-richtext img { display: none !important; }*/
    .embed-left .hs-form fieldset { }
    .embed-left label { display: inline-block; margin: 5px 0; }
    .embed-left .hs-input { background: #f5f8fa; border-radius: 3px; color: #33475b; }

    .embed-left .hs-form-field { margin: 3px 0; }
    .embed-left .hs-form-checkbox-display,
    .embed-left .hs-form-radio-display,
    .embed-left .hs-form-booleancheckbox-display { margin: 5px 0; font-weight: 300; display: flex; flex-flow: row nowrap; }
        .embed-left .hs-form-checkbox-display > input,
        .embed-left .hs-form-radio-display > input,
        .embed-left .hs-form-booleancheckbox-display > input { margin-right: 10px; }
    .embed-left .hs-form-required { color: #f00; }
    .embed-left .actions .hs-button { display: inline-block; border: none; background: #0468b6; color: #fff !important; padding: 8px 20px; border-radius: 30px; text-transform: uppercase; text-align: center; margin: 5px; }
        .embed-left .actions .hs-button:hover, .embed-left .actions .hs-button:active { background: #0058af; text-decoration: none; }

    .embed-left .grecaptcha-badge { margin: 10px 0 !important; }

    .embed-left .form-columns-2 { }
        .embed-left .form-columns-2 > *:first-child { border-right: 1px solid #ddd; padding-right: 5px; }
        .embed-left .form-columns-2 > *:last-child { padding-left: 5px; }
.embed-right { width: 350px; max-width: 100%; }

.support-card-wrapper { margin-bottom: -20px; display: flex; flex-flow: row wrap; justify-content: center; align-items: stretch; }
.support-card { min-width: 125px; max-width: 125px; background-color: #dadada; margin: 20px; display: flex; flex-direction: column; flex: 1; }
    .support-card .support-card-image { display: flex; justify-content: center; align-items: center; }
        .support-card .support-card-image img { max-width: 100%; height: auto; }
    .support-card .support-card-text { background-color: #2d2d2d; padding: 10px; display: flex; flex: 1; justify-content: center; align-items: center; }
        .support-card .support-card-text * { color: #fff; text-align: center; }
.support-card-wrapper.design .support-card { max-width: clamp(375px, 500px, 500px); }
.support-card-wrapper.design .support-card-text { background-color: #2d2d2d; justify-content: flex-start; }
.support-card-wrapper.ticket .support-card-image img { max-width: 75%; margin: 0 auto; }
.support-card-wrapper.ticket .support-card-text, .support-card-wrapper.design .support-card-text { display: flex; flex-direction: column; }
.support-card-wrapper.design .support-body { text-align: left; }
.support-card-wrapper.ticket .support-card-text, .support-card-wrapper.ticket .support-body { padding: 5px 10px; }
.support-card-wrapper.ticket span, .support-card-wrapper.design span { white-space: nowrap; }

.support-card-wrapper.ticket .support-card { background: transparent; }
    .support-card-wrapper.ticket .support-card .support-card-text { background-color: transparent; max-width: 75%; margin: 0 auto; }
        .support-card-wrapper.ticket .support-card .support-card-text * { color: #000; }



input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], textarea, select { width: 95%; }


@media all and (min-width: 961px) {
    .embed-header { background-image: url('/i/support/atlas-forms-header.jpg'); }
    .embed-header { height: 20.8333vw; }

    .support-card-wrapper { max-width: 350px }
    .support-card { margin: 0 20px 40px; }
    .support-section { margin: 40px auto; max-width: clamp(600px, 90vw, 1800px); }
        .support-section .support-subsection { max-width: 800px; }
        .support-section.grey { background: #dadada; padding: 40px; }
}
