/**
    Global css spreadsheet
*/

@font-face {
                    font-family: "ChristmasBell-PersonalUse50c591c6b0" ;
                    src: url(".././assets/fonts/ChristmasBell-PersonalUse50c591c6b0.otf");
                  }
@font-face {
                    font-family: "DancingScript" ;
                    src: url(".././assets/fonts/DancingScript.ttf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-Bd2c94b7e851" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-Bd2c94b7e851.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-BdCn8b6b388a26" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-BdCn8b6b388a26.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-BdCnO06d95f0cc6" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-BdCnO06d95f0cc6.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-BdExOb788f09246" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-BdExOb788f09246.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-BdExdd777c08e8" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-BdExdd777c08e8.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-BdItb3f5bae67d" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-BdItb3f5bae67d.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-BdOu8e3be95734" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-BdOu8e3be95734.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-Blk37d1d44a87" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-Blk37d1d44a87.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-BlkCn9f92df05a4" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-BlkCn9f92df05a4.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-BlkCnOb88ee83342" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-BlkCnOb88ee83342.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-BlkEx196c004cce" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-BlkEx196c004cce.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-BlkExO100f12d948" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-BlkExO100f12d948.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-BlkIt95876f51ec" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-BlkIt95876f51ec.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-Cn7381fa4187" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-Cn7381fa4187.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-Ex2b39e113c7" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-Ex2b39e113c7.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-ExO0a316e31b2" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-ExO0a316e31b2.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-HvEx867086d2ac" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-HvEx867086d2ac.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-HvExO270355cebc" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-HvExO270355cebc.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-Itbef05be317" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-Itbef05be317.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-LtExOb2e8b735ac" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-LtExOb2e8b735ac.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-LtIt31ae187ee0" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-LtIt31ae187ee0.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-Lte9f2dbeec6" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-Lte9f2dbeec6.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-Md066e845588" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-Md066e845588.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-MdCn268fbee837" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-MdCn268fbee837.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-MdCnOb4a6711158" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-MdCnOb4a6711158.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-MdEx4a18023d20" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-MdEx4a18023d20.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-MdExO2340b669c5" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-MdExO2340b669c5.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-MdIte0913b789c" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-MdIte0913b789c.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-Roman9f7fa16f40" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-Roman9f7fa16f40.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-Th8c0c953f1c" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-Th8c0c953f1c.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-ThCn61a2afce55" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-ThCn61a2afce55.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-ThCnOa615f18110" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-ThCnOa615f18110.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-ThEx8b2d9921c3" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-ThEx8b2d9921c3.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-ThExOebcb6bdf06" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-ThExOebcb6bdf06.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-ThIt60046544aa" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-ThIt60046544aa.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-UltLtCn820702a519" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-UltLtCn820702a519.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-UltLtCnO207d173c83" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-UltLtCnO207d173c83.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-UltLtEx574e15c493" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-UltLtEx574e15c493.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-UltLtExO3ed9fca2ed" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-UltLtExO3ed9fca2ed.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-UltLtItaf1d871c68" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-UltLtItaf1d871c68.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-UltLte0ea3d9852" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-UltLte0ea3d9852.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-XBlkCnO253c520434" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-XBlkCnO253c520434.otf");
                  }
@font-face {
                    font-family: "HelveticaNeueLTStd-XBlkCne5dee89f91" ;
                    src: url(".././assets/fonts/HelveticaNeueLTStd-XBlkCne5dee89f91.otf");
                  }
@font-face {
                    font-family: "Lato-Bold" ;
                    src: url(".././assets/fonts/Lato-Bold.ttf");
                  }
@font-face {
                    font-family: "Lato-Regular" ;
                    src: url(".././assets/fonts/Lato-Regular.ttf");
                  }
@font-face {
                    font-family: "Montserrat" ;
                    src: url(".././assets/fonts/Montserrat.ttf");
                  }
@font-face {
                    font-family: "OpenSans" ;
                    src: url(".././assets/fonts/OpenSans.ttf");
                  }
@font-face {
                    font-family: "PTSerif" ;
                    src: url(".././assets/fonts/PTSerif.ttf");
                  }
@font-face {
                    font-family: "Pacifico-Regular" ;
                    src: url(".././assets/fonts/Pacifico-Regular.ttf");
                  }
@font-face {
                    font-family: "Roboto" ;
                    src: url(".././assets/fonts/Roboto.ttf");
                  }
@font-face {
                    font-family: "UbuntuMono" ;
                    src: url(".././assets/fonts/UbuntuMono.ttf");
                  }

/* Primary elements */

/* TODO try to eliminate some data tags by injecting styles in HTML tags */

body {
    background-color: rgba(255, 255, 255, 1);
    font-family: HelveticaNeueLTStd-Roman9f7fa16f40 !important;
    font-size: 18px !important;
    color: rgb(255,255,255) !important;
    position: relative;
}

body , #main-content{
    min-height: 100vh !important;
    width: 100% !important;
}

#main-content {
    overflow:  hidden auto !important;
    display: block !important;
}

#main-content > div {
    overflow:  unset !important;
}

div[data-background]{
    background-image: url("../assets/images/AdobeStock_29958354974435960a6.jpeg") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: absolute;
    z-index: -10;
    opacity: 1;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 1024px) {
    div[data-background]{
        background-image: url("../assets/images/AdobeStock_2995835496183037f84.jpeg") !important;
    }
}

#browser-unsupported {
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute; 
    left: 0px; 
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
  
#browser-unsupported-text {
    color: #ffffff;
    text-align: center;
    width: 80%;
    font-weight: bold;
    font-size: 26px;
}

img[data-logo] {
    content: url("../assets/images/Quickline_Logo_CMYK_schwarz_rot57430902df.jpg") !important;
    display: unset !important;
}

/*p[data-text] {
    font-family: HelveticaNeueLTStd-Roman9f7fa16f40 !important;
    font-size: 18px !important;
    color: rgb(255,255,255) !important;
}*/

h1[data-text]{
    font-family: HelveticaNeueLTStd-Roman9f7fa16f40 !important;
    font-size: 40px !important;
}

h2[data-text] {
    font-family: HelveticaNeueLTStd-Roman9f7fa16f40 !important;
    font-size: 24px !important;
}

h3[data-text] {
    font-family: HelveticaNeueLTStd-Roman9f7fa16f40 !important;
    font-size: 22px !important;
}

#swal2-title {
    color: black !important;
    text-shadow: none !important;
}

.swal2-popup.swal2-toast {
    padding: 10px 10px 14px !important;
}

a, .custom-control-label {
    cursor: pointer;
}

/* HIDE FORM INPUTS - JS SCRIPT WILL DISPLAY THEM  */
form input {
    display: none !important
}

form label {
    display: none !important
}

/* add primary color to input placeholders */
input::placeholder {
    color: rgb(255,255,255) !important;
    opacity: 1;
}


/*  */

[data-color-primary][data-color-background-color] {
    background-color: rgb(222,198,145) !important;
}

[data-color-primary][data-color-border-color] {
    border-color: rgb(222,198,145) !important;
}

[data-color-text-primary][data-color-border-color] {
    border-color: rgb(255,255,255) !important;
}

[data-color-primary][data-color-color] {
    color: rgb(222,198,145) !important;
}

[data-color-secondary][data-color-background-color] {
    background-color: rgb(212,0,55) !important;
}

[data-color-secondary][data-color-border-color] {
    border-color: rgb(212,0,55) !important;
}

[data-color-text-secondary][data-color-border-color] {
    border-color: rgba(255, 255, 255, 1) !important;
}

[data-color-secondary][data-color-color] {
    color: rgb(212,0,55) !important;
}

/* Pseudo elements */

[data-color-primary-before][data-color-background-color-before]::before {
    background-color: rgb(222,198,145) !important;
}

[data-color-primary-before][data-color-border-color-before]::before {
    border-color: rgb(222,198,145) !important;
}

[data-color-primary-text-before][data-color-border-color-before]::before {
    border-color: rgb(255,255,255) !important;
}

[data-color-primary-before][data-color-color-before]::before {
    color: rgb(222,198,145) !important;
}

[data-color-secondary-before][data-color-background-color-before]::before {
    background-color: rgb(212,0,55) !important;
}

[data-color-secondary-before][data-color-border-color-before]::before {
    border-color: rgb(212,0,55) !important;
}

[data-color-secondary-text-before][data-color-border-color-before]::before {
    border-color: rgba(255, 255, 255, 1) !important;
}

[data-color-secondary-before][data-color-color-before]::before {
    color: rgb(212,0,55) !important;
}

[data-color-primary-after][data-color-background-color-after]::after {
    background-color: rgb(222,198,145) !important;
}

[data-color-primary-after][data-color-border-color-after]::after {
    border-color: rgb(222,198,145) !important;
}

[data-color-primary-after][data-color-color-after]::after {
    color: rgb(222,198,145) !important;
}

[data-color-secondary-after][data-color-background-color-after]::after {
    background-color: rgb(212,0,55) !important;
}

[data-color-secondary-after][data-color-border-color-after]::after {
    border-color: rgb(212,0,55) !important;
}

[data-color-secondary-after][data-color-color-after]::after {
    color: rgb(212,0,55) !important;
}

.custom-checkbox .custom-control-input:checked~[data-color-primary-checkbox]::after {
    background-color: rgb(222,198,145) !important;
}

.custom-checkbox .custom-control-input:checked~[data-color-secondary-checkbox]::after {
    background-color: rgb(212,0,55) !important;
}

.custom-checkbox .custom-control-input:checked~[data-color-primary-text-checkbox]::after {
    background-color: rgb(255,255,255) !important;
}

.custom-checkbox .custom-control-input:checked~[data-color-secondary-text-checkbox]::after {
    background-color: rgba(255, 255, 255, 1) !important;
}

.custom-checkbox .custom-control-input:checked~[data-color-primary-text-checkbox-checkmark]::after {
    border-color: rgb(255,255,255) !important;
}
.custom-checkbox .custom-control-input:checked~[data-color-secondary-text-checkbox-checkmark]::after {
    border-color: rgba(255, 255, 255, 1) !important;
}

/* Text elements */

[data-text] {
    font-family: HelveticaNeueLTStd-Roman9f7fa16f40 !important;
    font-size: 18px !important;
    color: rgb(255,255,255) !important;
}

[data-text-menu] {
    transition: ease 0.3s !important;
    font-family: HelveticaNeueLTStd-Roman9f7fa16f40 !important;
    font-size: 18px !important;
    color: rgba(255, 255, 255, 1) !important;
    opacity: 1 !important;
}

[data-text-menu]:hover {
    color: rgba(255, 255, 255, 1) !important;
    opacity: 0.45 !important;
    text-decoration: none !important;
}

[data-color-text-primary] {
    color: rgb(255,255,255) !important;
}

[data-color-text-secondary] {
    color: rgba(255, 255, 255, 1) !important;
}

[data-color-link-primary] {
    transition: ease 0.3s !important;
    color: rgb(255,255,255) !important;
    opacity: 1 !important;
}

[data-color-link-primary]:hover {
    color: rgb(255,255,255) !important;
    opacity: 0.45 !important;
    text-decoration: none !important;
}

[data-color-link-secondary] {
    transition: ease 0.3s !important;
    color: rgba(255, 255, 255, 1) !important;
    opacity: 1 !important;
}

[data-color-link-secondary]:hover {
    color: rgba(255, 255, 255, 1) !important;
    opacity: 0.45 !important;
    text-decoration: none !important;
}

[data-color-social-primary] {
    transition: ease 0.3s !important;
    background-color: rgb(255,255,255) !important;
    color: rgba(255, 255, 255, 1) !important;
    opacity: 1 !important;
}

[data-color-social-primary]:hover {
    background-color: rgb(255,255,255) !important;
    opacity: 0.45 !important;
}

[data-color-social-secondary] {
    transition: ease 0.3s !important;
    background-color: rgba(255, 255, 255, 1) !important;
    color: rgb(255,255,255) !important;
    opacity: 1 !important;
}

[data-color-social-secondary]:hover {
    background-color: rgba(255, 255, 255, 1) !important;
    opacity: 0.45 !important;
}

[data-color-placeholder-primary]::placeholder, [data-color-placeholder-primary]::-ms-input-placeholder {
    color: rgb(255,255,255) !important;
    opacity: 1;
}
[data-color-placeholder-primary]::-webkit-input-placeholder {
    color: rgb(255,255,255) !important;
}
[data-color-placeholder-secondary]::placeholder {
    color: rgba(255, 255, 255, 1) !important;
    opacity: 1;
}
[data-color-placeholder-secondary]::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 1) !important;
}

/* SVG elements */

[data-color-svg-primary] {
    background-color: rgb(255,255,255) !important;
}

[data-color-svg-secondary] {
    background-color: rgba(255, 255, 255, 1) !important;
}

/* Social Media Links SVG styles */

/* color element background */

#social[data-bg-primary] li {
    background-color: rgb(222,198,145) !important;
}

#social[data-bg-secondary] li {
    background-color: rgb(212,0,55) !important;
}

#social[data-bg-primary-text] li {
    background-color: rgb(255,255,255) !important;
}

#social[data-bg-secondary-text] li {
    background-color: rgba(255, 255, 255, 1) !important;
}

/* Color the element border */

#social[data-border-primary] li {
    border-color: rgb(222,198,145) !important;
}

#social[data-border-secondary] li {
    border-color: rgb(212,0,55) !important;
}

#social[data-border-primary-text] li {
    border-color: rgb(255,255,255) !important;
}

#social[data-border-secondary-text] li {
    border-color: rgba(255, 255, 255, 1) !important;
}

/* Color the SVG icon & custom svg coloring */

#social[data-svg-primary] svg .path-style,
svg[data-svg-primary] .custom-path-style {
    fill: rgb(222,198,145) !important;
}

#social[data-svg-secondary] svg .path-style,
svg[data-svg-secondary] .custom-path-style {
    fill: rgb(212,0,55) !important;
}

#social[data-svg-primary-text] svg .path-style,
svg[data-svg-primary-text] .custom-path-style {
    fill: rgb(255,255,255) !important;
}

#social[data-svg-secondary-text] svg .path-style,
svg[data-svg-secondary-text] .custom-path-style {
    fill: rgba(255, 255, 255, 1) !important;
}

/* Button elements */

[data-button] {
    font-family: HelveticaNeueLTStd-Roman9f7fa16f40 !important;
    border: solid 1px;
    transition: ease 0.3s;
    opacity: 1;
    border-radius: 5px !important;
            background-color: rgb(212,0,55) !important;
            color: rgba(255, 255, 255, 1) !important;
            border-color: rgb(212,0,55) !important;
            
}

[data-button]:hover {
    opacity: 0.45 !important;
}

[data-button]:disabled {
    opacity: 0.65 !important;
}

[data-button-icon] {
    color: rgba(255, 255, 255, 1) !important;
}

/*[data-button]:hover {
    border-radius: 5px !important;
            background-color: rgb(173, 115, 129) !important;
            color: rgba(255, 255, 255, 1) !important;
            border-color: rgb(173, 115, 129) !important;
            
}*/
/* game answer buttons */
[data-color-primary][data-color-answer-color]>a {
    background-color: rgb(222,198,145) !important;
    border-color: rgb(222,198,145) !important;
}
[data-color-secondary][data-color-answer-color]>a {
    background-color: rgb(212,0,55) !important;
    border-color: rgb(212,0,55) !important;
}
@media only screen and (max-width: 768px) {
    .swal-custom-popup{
        width: 80vw !important;
    }
}

/* Accessibility - A11Y */

.skip-link {
  position: absolute;
  top: -45px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 100;
  text-decoration: none;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 0;
}

.visually-hidden {
  position: absolute;
  top: 0;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

[data-focus-primary]:focus {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* END OF -> Accessibility - A11Y */