@import url("/css/get-in-touch/portrait-sml.css") screen and (max-width:640px);
@import url("/css/get-in-touch/landscape-lrg.css") screen and (min-width:640px);

section.message {
    padding: var(--padding-sml) var(--padding-med);
    margin: 0;
    font-weight: bold;
    font-family: var(--font-family-bold);
    border-bottom: 1px solid var(--color-10);
}

.get-in-touch {
    padding: var(--padding-med);
}

.wrapper-get-in-touch * {
    font-size: 1.2rem !important;
}

.wrapper-form .git-section {
    position: relative;
    /* padding:var(--padding-med) var(--padding-med) var(--padding-med) calc(var(--icon-w-sml) + (var(--padding-sml)*2)); */
    padding: var(--padding-med);
    border-bottom: 1px solid var(--color-10);
}

form.form-steps .git-section:after,
.form-steps .git-section:after {
    content: " ";
    position: absolute;
    z-index: 1;
    top: 0;
    left: calc((var(--icon-w-sml) - var(--padding-sml)));
    width: 1px;
    height: 100%;
    border-left: 1px dashed var(--color-no);
}

.wrapper-form .git-section h2 {
    display: flex;
    gap: var(--padding-sml);
    align-items: center;
    align-content: center;
    margin: 0;
    font-family: var(--font-family-normal);
    font-weight: normal;
    font-size: 1.25rem;
    margin-bottom: 0.3rem;
}

.wrapper-form .git-section h2 label {
    margin: 0;
    font-family: var(--font-family-normal);
    font-weight: normal;
    font-size: 1.25rem;
    color: var(--color-text-default);
}

.wrapper-form .git-section h2 label.alert {
    margin-left: var(--padding-sml);
}

.wrapper-form .wrapper-git-inputs {
    display: block;
}

form.form-steps .wrapper-git-inputs,
.form-steps .wrapper-git-inputs {
    margin: 0 0 0 var(--padding-med);
}

.wrapper-form .git-section .section-number {
    position: relative;
    margin-left: calc((var(--icon-w-sml) / 2) * -1);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-w-sml);
    height: var(--icon-w-sml);
    font-family: var(--font-family-normal);
    font-weight: normal;
    font-size: 1.2em !important;
    color: #FFFFFF;
    border-radius: 50%;
    background-color: var(--color-no);
    transition: all 0.3s;
}

.wrapper-form .git-section .section-number:after {
    content: "?";
    position: absolute;
    top: -0.2em;
    right: -0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    padding: 0.1em;
    font-family: var(--font-family-bold);
    font-weight: bold;
    font-size: 0.5em !important;
    color: #FFFFFF;
    border-radius: 50%;
    border: 1px solid #FFFFFF;
    background-color: var(--color-no);
    transition: all 0.5s;
}

.wrapper-form .git-section.complete .section-number:after {
    content: " ";
    background-color: var(--color-yes);
    background-image: url('/images/icon-yes-light.svg');
    background-size: 90% 90%;
}

.wrapper-form .git-section.complete .section-number {
    background-color: var(--color-yes);
}

.wrapper-form .git-section.complete:after {
    border-left: 1px dashed var(--color-yes);
}

.wrapper-form .git-section.complete {}

.wrapper-form .git-section label {
    margin-left: var(--padding-sml);
    font-size: 1.15rem;
}

.wrapper-form .git-section input,
.wrapper-form .git-section select,
.wrapper-form .git-section textarea {
    width: 100%;
    margin-bottom: var(--padding-xsml);
}

.wrapper-form .git-section .inline-input {
    display: grid;
    grid-template-columns: 30% 70%;
    border: 1px solid var(--color-10);
    padding: var(--padding-xsml);
    margin-bottom: var(--padding-xsml);
    border-radius: var(--radius-sml);
}

.wrapper-form .git-section .inline-input input,
.wrapper-form .git-section .inline-input select {
    margin: 0;
}

.screenshot-upload {
    display: grid;
    gap: var(--padding-sml);
    grid-template-columns: 2fr 1fr 1fr;
}

.screenshot-upload .button {
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    color: var(--color-7);
    background: none;
    background-color: #FFFFFF;
    border: 1px solid var(--color-grey);
}

.screenshot-upload .phone-sml {
    height: 100px;
    font-size: 0.5em;
    overflow: hidden;
}

.screenshot-upload .phone-sml.screenshot {
    background-image: url('/images/icon-waiting-dark.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80% auto;
}

.wrapper-progress {
    display: block;
    position: relative;
    width: 100%;
    display: block;
    background-color: #DDDDDDDD;
    border-radius: var(--radius-sml);
    overflow: hidden;
}

.progress-bar {
    position: relative;
    display: block;
    margin: 0;
    background-color: var(--color-yes);
    border-radius: var(--radius-sml);
}

.missing-summary {
    margin: 0;
    padding: 0;
}

.missing-summary ul {
    margin: 0;
    padding: 0;
}

.missing-summary li {
    list-style: none;
    position: relative;
    padding-left: var(--padding-med);
    margin: var(--padding-xsml) 0;
}

.missing-summary li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 1em;
    height: 1em;
    background-image: url('/images/icon-alert-dark.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.git-section .checkbox-consent {}

.footer-links {
    display: block;
    padding: var(--padding-sml);
}

.footer-links a {
    color: var(--color-7);
}

.map-homemed {
    display: block;
    width: 100%;
    height: 80%;
    padding: var(--padding-med);
    background-image: url('/images/map-homemed.jpg');
    background-size: cover;
    background-size: 120% auto;
    background-position: center;
    border-radius: var(--radius-med);
    box-shadow: var(--shadow-button);
}

.homemed {
    border-bottom: 1px solid var(--color-grey);
    margin-bottom: var(--padding-med);
}

.toggle-missing {
    display: inline-block;
    padding: 0.1em 0.2em;
    margin: 0.2em 0 0 0;
    border: 1px solid var(--color-no);
    border-radius: var(--radius-sml);
    cursor: pointer;
}

.serial-number {
    background: url('/images/products/linx-cgm-sensor/serial-number.jpg') 50% 0 no-repeat;
    background-size: contain;
}

.screenshot-hour-graph {
    background: url('/images/products/linx-cgm-sensor/replace-sensor.jpg') 50% 0 no-repeat;
    background-size: contain;
}