/**
    Global css spreadsheet
*/

@font-face {
                    font-family: "DancingScript" ;
                    src: url(".././assets/fonts/DancingScript.ttf");
                  }
@font-face {
                    font-family: "Fredoka-Bold" ;
                    src: url(".././assets/fonts/Fredoka-Bold.ttf");
                  }
@font-face {
                    font-family: "Metric-Lightf1704f64b4" ;
                    src: url(".././assets/fonts/Metric-Lightf1704f64b4.ttf");
                  }
@font-face {
                    font-family: "Metric-Mediumc82426abaa" ;
                    src: url(".././assets/fonts/Metric-Mediumc82426abaa.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: "Oxygen-Bold" ;
                    src: url(".././assets/fonts/Oxygen-Bold.ttf");
                  }
@font-face {
                    font-family: "Oxygen-Regular" ;
                    src: url(".././assets/fonts/Oxygen-Regular.ttf");
                  }
@font-face {
                    font-family: "PTSerif" ;
                    src: url(".././assets/fonts/PTSerif.ttf");
                  }
@font-face {
                    font-family: "Poppins-Bold" ;
                    src: url(".././assets/fonts/Poppins-Bold.ttf");
                  }
@font-face {
                    font-family: "Poppins-Regular" ;
                    src: url(".././assets/fonts/Poppins-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: rgb(13,20,20);
    font-family: Metric-Lightf1704f64b4 !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/d2c-nordics_aeg_GRPH_promo-2_promo_Advent_1_1920x1080.v0011044fc0b23d.jpg") !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/d2c-nordics_aeg_GRPH_promo-2_promo_Advent_2_1080x1920.v0011ab5970ef5f.jpg") !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/aeg-logo101561768d.png") !important;
    display: none !important;
}

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

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

h2[data-text] {
    font-family: Metric-Lightf1704f64b4 !important;
    font-size: 30px !important;
}

h3[data-text] {
    font-family: Metric-Lightf1704f64b4 !important;
    font-size: 24px !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(255,255,255) !important;
}

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

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

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

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

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

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

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

/* Pseudo elements */

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

[data-color-primary-before][data-color-border-color-before]::before {
    border-color: rgb(255,255,255) !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(255,255,255) !important;
}

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

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

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

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

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

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

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

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

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

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

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

.custom-checkbox .custom-control-input:checked~[data-color-secondary-checkbox]::after {
    background-color: rgb(255,255,255) !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: rgb(255,255,255) !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: rgb(255,255,255) !important;
}

/* Text elements */

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

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

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

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

[data-color-text-secondary] {
    color: rgb(255,255,255) !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: rgb(255,255,255) !important;
    opacity: 1 !important;
}

[data-color-link-secondary]:hover {
    color: rgb(255,255,255) !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: rgb(255,255,255) !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: rgb(255,255,255) !important;
    color: rgb(255,255,255) !important;
    opacity: 1 !important;
}

[data-color-social-secondary]:hover {
    background-color: rgb(255,255,255) !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: rgb(255,255,255) !important;
    opacity: 1;
}
[data-color-placeholder-secondary]::-webkit-input-placeholder {
    color: rgb(255,255,255) !important;
}

/* SVG elements */

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

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

/* Social Media Links SVG styles */

/* color element background */

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

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

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

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

/* Color the element border */

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

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

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

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

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

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

#social[data-svg-secondary] svg .path-style,
svg[data-svg-secondary] .custom-path-style {
    fill: rgb(255,255,255) !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: rgb(255,255,255) !important;
}

/* Button elements */

[data-button] {
    font-family: Metric-Lightf1704f64b4 !important;
    border: solid 1px;
    transition: ease 0.3s;
    opacity: 1;
    border-radius: 5px !important;
            background-color: rgb(207,19,47) !important;
            color: rgb(255,255,255) !important;
            border-color: rgb(207,19,47) !important;
            
}

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

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

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

/*[data-button]:hover {
    border-radius: 5px !important;
            background-color: rgba(166, 124, 82, 1) !important;
            color: rgba(255, 216, 169, 1) !important;
            border-color: rgba(166, 124, 82, 1) !important;
            
}*/
/* game answer buttons */
[data-color-primary][data-color-answer-color]>a {
    background-color: rgb(255,255,255) !important;
    border-color: rgb(255,255,255) !important;
}
[data-color-secondary][data-color-answer-color]>a {
    background-color: rgb(255,255,255) !important;
    border-color: rgb(255,255,255) !important;
}
@media only screen and (max-width: 768px) {
    .swal-custom-popup{
        width: 80vw !important;
    }
}