/**
    Global css spreadsheet
*/

@font-face {
                    font-family: "AvenirLTStd-Black616c52bafc" ;
                    src: url(".././assets/fonts/AvenirLTStd-Black616c52bafc.ttf");
                  }
@font-face {
                    font-family: "AvenirLTStd-BlackObliqued1be29b6bd" ;
                    src: url(".././assets/fonts/AvenirLTStd-BlackObliqued1be29b6bd.ttf");
                  }
@font-face {
                    font-family: "AvenirLTStd-Book7a3090ff13" ;
                    src: url(".././assets/fonts/AvenirLTStd-Book7a3090ff13.ttf");
                  }
@font-face {
                    font-family: "AvenirLTStd-BookOblique9a8f111746" ;
                    src: url(".././assets/fonts/AvenirLTStd-BookOblique9a8f111746.ttf");
                  }
@font-face {
                    font-family: "AvenirLTStd-HeavyObliquec6dbd218a2" ;
                    src: url(".././assets/fonts/AvenirLTStd-HeavyObliquec6dbd218a2.ttf");
                  }
@font-face {
                    font-family: "AvenirLTStd-Heavyecda0820b9" ;
                    src: url(".././assets/fonts/AvenirLTStd-Heavyecda0820b9.ttf");
                  }
@font-face {
                    font-family: "AvenirLTStd-Light57a94aef1c" ;
                    src: url(".././assets/fonts/AvenirLTStd-Light57a94aef1c.ttf");
                  }
@font-face {
                    font-family: "AvenirLTStd-LightOblique3b6cb2f471" ;
                    src: url(".././assets/fonts/AvenirLTStd-LightOblique3b6cb2f471.ttf");
                  }
@font-face {
                    font-family: "AvenirLTStd-MediumOblique772b0dcfe3" ;
                    src: url(".././assets/fonts/AvenirLTStd-MediumOblique772b0dcfe3.ttf");
                  }
@font-face {
                    font-family: "AvenirLTStd-Mediumd89482541b" ;
                    src: url(".././assets/fonts/AvenirLTStd-Mediumd89482541b.ttf");
                  }
@font-face {
                    font-family: "AvenirLTStd-Oblique0709f023d6" ;
                    src: url(".././assets/fonts/AvenirLTStd-Oblique0709f023d6.ttf");
                  }
@font-face {
                    font-family: "AvenirLTStd-Romanb4f7ebc79d" ;
                    src: url(".././assets/fonts/AvenirLTStd-Romanb4f7ebc79d.ttf");
                  }
@font-face {
                    font-family: "DancingScript" ;
                    src: url(".././assets/fonts/DancingScript.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: "PTSans-Regular" ;
                    src: url(".././assets/fonts/PTSans-Regular.ttf");
                  }
@font-face {
                    font-family: "PTSerif" ;
                    src: url(".././assets/fonts/PTSerif.ttf");
                  }
@font-face {
                    font-family: "Roboto" ;
                    src: url(".././assets/fonts/Roboto.ttf");
                  }
@font-face {
                    font-family: "SourceSansPro-Bold" ;
                    src: url(".././assets/fonts/SourceSansPro-Bold.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: AvenirLTStd-Book7a3090ff13 !important;
    font-size: 14px !important;
    color: rgb(0,0,0) !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/Brame_Hintergrund6831573929.png") !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: 767px) {
    div[data-background]{
        background-image: url("../assets/images/Brame_Hintergrund6831573929.png") !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/LOGO_BLACK120897fd1a.png") !important;
    display: none !important;
}

/*p[data-text] {
    font-family: AvenirLTStd-Book7a3090ff13 !important;
    font-size: 14px !important;
    color: rgb(0,0,0) !important;
}*/

h1[data-text]{
    font-family: AvenirLTStd-Black616c52bafc !important;
    font-size: 48px !important;
}

h2[data-text] {
    font-family: AvenirLTStd-Mediumd89482541b !important;
    font-size: 28px !important;
}

h3[data-text] {
    font-family: AvenirLTStd-Romanb4f7ebc79d !important;
    font-size: 18px !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(0,0,0) !important;
    opacity: 1;
}


/*  */

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

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

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

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

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

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

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

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

/* Pseudo elements */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Text elements */

[data-text] {
    font-family: AvenirLTStd-Book7a3090ff13 !important;
    font-size: 14px !important;
    color: rgb(0,0,0) !important;
}

[data-text-menu] {
    transition: ease 0.3s !important;
    font-family: AvenirLTStd-Book7a3090ff13 !important;
    font-size: 14px !important;
    color: rgb(0,0,0) !important;
    opacity: 1 !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* SVG elements */

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

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

/* Social Media Links SVG styles */

/* color element background */

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

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

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

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

/* Color the element border */

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

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

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

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

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

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

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

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

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

/* Button elements */

[data-button] {
    font-family: AvenirLTStd-Book7a3090ff13 !important;
    border: solid 1px;
    transition: ease 0.3s;
    opacity: 1;
    border-radius: 0px !important;
            background-color: rgb(0,0,0) !important;
            color: rgb(255,255,255) !important;
            border-color: rgb(0,0,0) !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: 0px !important;
            background-color: rgba(46, 89, 53, 1) !important;
            color: rgba(255, 255, 255, 1) !important;
            border-color: rgba(46, 89, 53, 1) !important;
            
}*/
/* game answer buttons */
[data-color-primary][data-color-answer-color]>a {
    background-color: rgb(0,0,0) !important;
    border-color: rgb(0,0,0) !important;
}
[data-color-secondary][data-color-answer-color]>a {
    background-color: rgba(0,0,0,0) !important;
    border-color: rgba(0,0,0,0) !important;
}
@media only screen and (max-width: 768px) {
    .swal-custom-popup{
        width: 80vw !important;
    }
}