@font-face { 
    font-family: "Myriad Pro"; 
    src: url("/css/fonts/myriad-pro-bold.woff2") 
    format("woff2"); 
    font-style: normal; 
    font-weight: 600; 
    font-display: swap;
}

@font-face { 
    font-family: "Myriad Pro"; 
    src: url("/css/fonts/myriad-pro-bold.woff2") 
    format("woff2"); 
    font-style: normal; 
    font-weight: 700; 
    font-display: swap;
}

@font-face { 
    font-family: "Myriad pro"; 
    src: url("/css/fonts/myriad-pro-regular.woff2") 
    format("woff2"); 
    font-style: normal; 
    font-weight: 400; 
    font-display: swap;
}

:root {
    /* color */
    --white: 255 255 255;
    --black: 0 0 0;
    --green: 2 152 62;
    --gray: 144 144 144;
    --dark-green: 1 121 49;
    --facebook-dark-blue: 68 85 152;
    --facebook-blue: 48 106 227;
    --fakro-gray: 237 237 237;
    --blue-gray: 173 189 207;
    --gray-100: 237 237 237;
    --gray-200: 229 229 229;
    --gray-300: 219 219 219;
    --gray-400: 207 207 207;
    --gray-500: 75 75 77;
    --red: 255 0 0;
    --dark-red: 202 13 13;
    --light-green: 97 191 57;
    --chat-green: 218 239 201;
    --chat-dark-green: 191 211 175;
    --notification-border-red: 242 189 189;
    --notification-red: 230 17 16;
    --notification-light-red: 253 217 217;

    /* font-family */
    --venia-global-fontFamily-myriadPro: 'Myriad Pro', sans-serif;
    --venia-global-fontFamily-serif: var(--venia-global-fontFamily-myriadPro);
    --venia-global-fontFamily-sansSerif: var(
        --venia-global-fontFamily-myriadPro
    );

    /* font-weight */
    --venia-global-fontWeight-normal: 400;
    --venia-global-fontWeight-semibold: 600;
    --venia-global-fontWeight-bold: 700;
    --venia-global-fontWeight-extrabold: 900;

    /* dimensions */
    --venia-global-maxWidth: 1240px;

    /* breakpoints */
    /* desktop: 1180px */
    /* tablet: 768px; */
    /* mobile: 640px; */

    --venia-global-anim-bounce: cubic-bezier(0.5, 1.8, 0.9, 0.8);
    --venia-global-anim-in: cubic-bezier(0, 0, 0.2, 1);
    --venia-global-anim-out: cubic-bezier(0.4, 0, 1, 1);
    --venia-global-anim-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --venia-global-color-black: 0 0 0;
    --venia-global-color-blue-100: 194 200 255;
    --venia-global-color-blue-400: 61 132 255;
    --venia-global-color-blue-500: 51 109 255;
    --venia-global-color-blue-600: 41 84 255;
    --venia-global-color-blue-700: 31 57 255;
    --venia-global-color-blue-800: 23 43 196;
    --venia-global-color-gray-50: 255 255 255;
    --venia-global-color-gray-75: 250 250 250;
    --venia-global-color-gray-100: 244 245 245;
    --venia-global-color-gray-200: 234 235 235;
    --venia-global-color-gray-300: 223 225 226;
    --venia-global-color-gray-400: 181 184 186;
    --venia-global-color-gray-500: 149 154 157;
    --venia-global-color-gray-600: 118 123 127;
    --venia-global-color-gray-700: 84 93 99;
    --venia-global-color-gray-800: 51 63 71;
    --venia-global-color-gray-900: 23 32 38;
    --venia-global-color-gray: var(--venia-global-color-gray-100);
    --venia-global-color-gray-dark: var(--venia-global-color-gray-300);
    --venia-global-color-gray-darker: var(--venia-global-color-gray-600);
    --venia-global-color-green-400: 51 171 132;
    --venia-global-color-green-500: 45 157 120;
    --venia-global-color-green-600: 38 142 108;
    --venia-global-color-green-700: 18 128 92;
    --venia-global-color-orange: 241 99 33;
    --venia-global-color-red-400: 236 91 98;
    --venia-global-color-red-500: 227 72 80;
    --venia-global-color-red-600: 215 55 63;
    --venia-global-color-red-700: 201 37 45;
    --venia-global-color-red-800: 161 30 36;
    --venia-global-color-teal: var(--venia-global-color-blue-400);
    --venia-global-color-teal-dark: var(--venia-global-color-blue-600);
    --venia-global-color-teal-light: var(--venia-global-color-gray-100);
    --venia-global-color-background: var(--venia-global-color-gray-50);
    --venia-global-color-border: var(--venia-global-color-gray-300);
    --venia-global-color-error: var(--venia-global-color-red-700);
    --venia-global-color-text: var(--venia-global-color-black);
    --venia-global-color-text-alt: var(--venia-global-color-gray-darker);
    --venia-global-color-text-hint: var(--venia-global-color-gray-500);
    --venia-global-color-warning-dark: var(--venia-global-color-red-700);
    --venia-global-color-warning-light: var(--venia-global-color-gray-100);
    --venia-global-fontFamily-sansSerif: 'Muli', sans-serif;
    --venia-global-fontFamily-serif: 'Source Serif Pro', serif;
    --venia-global-fontSize-50: 0.6875rem;
    --venia-global-fontSize-75: 0.75rem;
    --venia-global-fontSize-100: 0.875rem;
    --venia-global-fontSize-200: 1rem;
    --venia-global-fontSize-300: 1.125rem;
    --venia-global-fontSize-400: 1.25rem;
    --venia-global-fontSize-500: 1.375rem;
    --venia-global-fontSize-600: 1.5rem;
    --venia-global-fontSize-700: 1.75rem;
    --venia-global-fontSize-800: 2rem;
    --venia-global-fontSize-900: 2.25rem;
    --venia-global-fontSize-1000: 2.5rem;
    --venia-global-fontSize-1100: 3rem;
    --venia-global-fontSize-1200: 3.5rem;
    --venia-global-fontWeight-normal: 400;
    --venia-global-fontWeight-semibold: 600;
    --venia-global-fontWeight-bold: 700;
    --venia-global-lineHeight-100: 1;
    --venia-global-lineHeight-200: 1.25;
    --venia-global-lineHeight-300: 1.5;
    --venia-global-lineHeight-400: 1.75;
    --venia-global-lineHeight-500: 2;
    --venia-global-maxWidth: 1440px;

    /* font-size */
    --venia-typography-body-XXXXXXL-fontSize: var(
        --venia-global-fontSize-900
    ); /* 36px */
    --venia-typography-body-XXXXXL-fontSize: var(
        --venia-global-fontSize-800
    ); /* 32px */
    --venia-typography-body-XXXXL-fontSize: var(
        --venia-global-fontSize-600
    ); /* 24px */
    --venia-typography-body-XXXL-fontSize: var(
        --venia-global-fontSize-500
    ); /* 22px */
    --venia-typography-body-XXL-fontSize: var(
        --venia-global-fontSize-400
    ); /* 20px */
    --venia-typography-body-XL-fontSize: var(
        --venia-global-fontSize-300
    ); /* 18px */
    --venia-typography-body-L-fontSize: var(
        --venia-global-fontSize-200
    ); /* 16px */
    --venia-typography-body-M-fontSize: var(
        --venia-global-fontSize-100
    ); /* 14px */
    --venia-typography-body-S-fontSize: var(
        --venia-global-fontSize-75
    ); /* 12px */
    --venia-typography-body-XS-fontSize: var(
        --venia-global-fontSize-50
    ); /* 11px */

    --venia-dropdown-zindex: 9999;
}

body {
    background-color: rgb(var(--venia-global-color-background));
    font-family: var(--venia-global-fontFamily-myriadPro);
    letter-spacing: 0.02rem;
    margin: 0;
    padding: 0;
    height: 100%;
}

.header {
    text-transform: uppercase;
    font-size: var(--venia-typography-body-XXL-fontSize);
    font-weight: var(--venia-global-fontWeight-bold);
}

@media only screen and (max-width: 575px) {
    .header {
        font-size: var(--venia-typography-body-XL-fontSize);
    }
}

p {
    margin-bottom: 1.5rem;
    line-height: 1.5em;
    margin: 0;
    color: rgb(var(--venia-global-color-text));
    font-size: var(--venia-typography-body-L-fontSize);
}

@media only screen and (max-width: 575px) {
    .p {
        font-size: var(--venia-typography-body-S-fontSize);
    }
}

.button {
    background-color: rgb(var(--green));
    color: rgb(var(--white));
    font-size: var(--venia-global-fontSize-100);
    font-weight: var(--venia-global-fontWeight-bold);
    line-height: 1.25rem;
    max-width: 100%;
    min-width: 2rem;
    min-height: 41px;
    outline: none;
    text-transform: uppercase;
    transition-duration: 100ms;
    transition-property: background-color, border-color, color;
    transition-timing-function: var(--venia-global-anim-standard);
    transform: skewX(-30deg);
    transform-origin: 100% 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    border: 0;
}

.button:hover {
    background-color: rgb(var(--dark-green));
}

.button .button-content {
    align-items: center;
    display: inline-grid;
    gap: 0.35rem;
    grid-auto-flow: column;
    justify-content: center;
    justify-items: center;
    transform: skewX(30deg);
}

.green {
    color: rgb(var(--green));
}

.counter-available {
    width: 100%;
    text-align: center;
}

.line {
    background-color: rgb(var(--venia-global-color-gray-700)) !important;
    height: 2px !important;
    opacity: 1;
    margin: 0 0 5px;
}

.sample {
    text-align: center;
    max-width: 160px;
    border: 1px solid rgb(var(--white));
    cursor: pointer;
    margin-bottom: .5rem;
    padding: 0 0.7rem;
    position: relative;
}

@media only screen and (max-width: 575px) {
    .sample {
        padding: 0 0.3rem;
    }
}

.sample:hover {
    border-color: rgb(var(--fakro-gray));
}

.sample.checked {
    border-color: rgb(var(--green));
}

.sample .sample-code {
    clear: both;
    display: block;
    font-size: var(--venia-typography-body-L-fontSize);
    font-weight: var(--venia-global-fontWeight-normal);
    text-align: center;
    word-break: break-word;
    display: -webkit-box;
    line-height: 20px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0 0 5px 0;
}

.sample .sample-close {
    position: absolute;
    top: 5px;
    right: 5px;
    color: rgb(var(--green));
    display: none;
    box-shadow: none;
    background-color: rgb(var(--white));
}

.sample.checked .sample-close {
    display: block;
}

.sample.order {
    border-color: rgb(var(--fakro-gray));
}

@media only screen and (max-width: 575px) {
    .sample .sample-image {
        width: 70px;
    }
}

.magnifier {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    right: 0px;
    display: none
}

.hover .magnifier {
    display: block;
}

.magnifier .triangle {
    width: 28px;
	height: 28px;
    background-color: rgb(var(--white));
    position: absolute;
    left: calc(50% - 14px);
    top: calc(50% - 25px);
    border-radius: 50%;
}

.magnifier .icon {
    background: url(
        "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 953 1024'><path style='fill: rgb(80, 172, 40);' d='M943.658 966.306l-236.336-237.865c80.79-76.927 131.746-185.57 131.746-306.36-0.335-232.803-188.398-422.082-419.702-422.082-231.306 0-419.367 189.28-419.367 422.082 0 232.805 188.061 422.086 419.367 422.086 87.157 0 168.282-26.991 235.661-73.216l241.364 242.925c6.702 6.748 15.085 9.784 23.799 9.784 8.718 0 17.097-3.372 23.803-9.784 12.736-13.157 12.736-34.413-0.335-47.57zM67.045 422.082c0-195.351 158.226-354.603 352.322-354.603 194.094 0 352.32 159.251 352.32 354.603 0 195.693-158.226 354.604-352.32 354.604-194.096 0-352.322-158.911-352.322-354.604z'></path><path style='fill: rgb(80, 172, 40);' d='M279.004 391.436h112.407v-112.405c0-42.441 64.53-42.441 64.53 0v112.405h112.456c42.44 0 42.44 64.53 0 64.53h-112.456v112.456c0 42.443-64.53 42.443-64.53 0v-112.456h-112.407c-42.466 0-42.466-64.53 0-64.53z'></path></svg>"
    );
    content: '';
    background-size: cover;
    width: 15px;
    height: 15px;
    left: calc(50% - 7px);
    top: calc(50% - 17px);
    position: absolute;
}

.min-height-60 {
    min-height: 60px;
}

.message-notice, .message-error {
    text-align: center;
    color: rgb(var(--venia-global-color-error));
    font-size: var(--venia-typography-body-L-fontSize);
}

.continue-message {
    text-align: center;
    color: rgb(var(--black));
    font-weight: var(--venia-global-fontWeight-bold);
}

.category {
    font-size: 1.375rem;
    line-height: 1.25em;
    font-weight: 400;
    color: rgb(var(--green));
    margin: 1rem 0 0.1rem;
    word-break: break-word;
}

@media only screen and (max-width: 575px) {
    .category {
        font-size: var(--venia-global-fontSize-300);
    }
}

.field-required {
    color: rgb(var(--red));
    text-transform: uppercase;
    font-weight: var(--venia-global-fontWeight-bold);
    font-size: var(--venia-typography-body-S-fontSize);
}

.field-label {
    padding: 0 0 8px 0;
    text-transform: uppercase;
    font-weight: var(--venia-global-fontWeight-bold);
    font-size: var(--venia-typography-body-S-fontSize);
    min-height: 0;
    margin: 0;
}

.input-container {
    transform: skewX(-30deg);
    transform-origin: 100% 100%;
    border: 1px solid rgb(var(--fakro-gray));
    background-color: rgb(var(--white));
    outline: 0;
    padding: 0 1rem
}

.input-container .input {
    outline: 0;
    -webkit-box-shadow: 0 0 0 55px rgb(var(--white)) inset !important;
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
    transform: skewX(30deg);
    background-color: rgb(var(--white));
    color: rgb(var(--black));
    border: none;
    flex: 0 0 100%;
    font-size: 1rem;
    height: 39px;
    margin: 0;
    -webkit-appearance: none;
    padding: 0 0;
}

.checkbox-container {
    font-size: var(--venia-typography-body-L-fontSize);
    cursor: pointer;
    position: relative;
}

.checkbox-container .label{
    z-index: 5;
    position: relative;
}

.checkbox-container .checkbox {
    display: none
}

.checkbox-container .checkbox-icon {
    background-color: rgb(var(--green));
    width: 17px;
    height: 17px;
    position: absolute;
    left: 0;
    z-index: 5;
}

.checkbox-container .checkbox-box {
    display: inline-block;
    border: 1px solid rgb(var(--gray-100));
    -webkit-appearance: none;
    background: none;
    border-radius: 1px;
    height: 17px;
    width: 17px;
    margin: 0 .5rem 0 0;
    cursor: pointer;
}

.checkbox-container .checkbox-icon:not(.checked) {
    display: none;
}

.checkbox-container .checkbox-icon .icon {
    display: block;
    background: url(
        "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 1365 1024'><path style='fill: rgb(255, 255, 255);' d='M1234.637-0.136c-226.026 238.804-488.343 514.664-720.799 760.008l-394.623-353.604-119.214 147.738 523.944 470.101 60.182-63.455c244.859-258.664 535.889-564.314 780.98-823.462l-130.469-137.326z'></path></svg>"
    );
    content: '';
    background-size: cover;
    width: 13px;
    height: 13px;
    position: absolute;
    top: 2px;
    left: 2px;
}

.error_list {
    list-style-type: none;
    text-transform: none;
    color: rgb(var(--venia-global-color-error));
    font-weight: var(--venia-global-fontWeight-semibold);
    font-size: var(--venia-typography-body-XS-fontSize);
    line-height: 1rem;
    padding: 7px 0 7px 0;
}

.link {
    color: rgb(var(--nice-blue));
    font-size: var(--venia-typography-body-M-fontSize);
    line-height: var(--venia-typography-body-XL-fontSize);
    font-weight: var(--venia-global-fontWeight-semibold);
    text-decoration: underline;
}

.link:hover {
    color: rgb(var(--seafoam-blue));
}

a {
    text-decoration: none;
}

.custom-select {
    padding: 0;
    position: absolute;
    min-height: 39px;
    width: 100%;
    z-index: 10;
    margin-bottom: 2rem;
}

.custom-select select {
    display: none !important;
}

.custom-select .indicator {
    background: url(
        "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path style='fill: rgb(80, 172, 40);' d='M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z'></path></svg>"
    );
    content: '';
    background-size: cover;
    display: block;
    position: absolute;
    width: 1.2rem;
    height: 1.2rem;
    top: 10px;
    right: 15px;
    transform: skewX(30deg);
    color: rgb(var(--green));
    z-index: 10;
}

.custom-select.active .indicator {
    transform: skewX(0deg);
    right: 4px;
}

.custom-select.active {
    transform: skewX(0deg);
}

.custom-select.active .select-title {
    transform: skewX(0deg);
    padding-left: 27px;
}

.custom-select .select-title {
    transform: skewX(30deg);
    padding: 7px 25px 7px 15px;
}

.custom-select .select-content {
    padding: 0;
}

.custom-select .select-item {
    background-color: rgb(var(--white));
    border-top: 1px solid rgb(var(--fakro-gray));
    padding: 7px 27px 7px 27px;
    cursor: default;
}

.custom-select .select-item:hover {
    background-color: rgb(var(--fakro-gray));
}

.custom-select:not(.active) > .select-content {
    display: none;
}

@media only screen and (max-width: 575px) {
    .order-btn-change {
        width: 100%;
    }
}

.modal-dialog {
    max-width: 700px;
}

.modal-image {
    max-height: 500px;
    max-width: 100%; 
}

@media only screen and (max-width: 991px) {
    .order-samples-button {
        order: 1 !important;
    }

    .order-submit-button {
        order: 0 !important;
    }
}