/* --------------------   SPECIAL OVERALL STYLING *** LOOK AND FEEL  */

body, #body, header, #footer {
    background-color: none !important;

    /*
    background-color:F5F5F5 !important;
    background-color:#FFD953 !important;
  background-image: url(  "/css-assets/colorbackground-abstract-green-blur-2.jpg" )  !important; 
  background-image: url(  "/css-assets/colorbackground-dark-microgrid-1.jpg" )  !important; 
  */
    background-image: url(  "/css-assets/colorbackground-blue-gradient-4.jpg" )  !important;

    /* background-image: url(  "/css-assets/colorbackground-abstract-amber-1.jpg" )  !important; */

    background-size: cover !important;
    height: auto !important;

}

#header {/*        background-color:#FFD953 !important; */}
#footer {   }
#btn-play-now {     background-color:#FFD953; color: #252D46; font-weight:700; }

.footer-container {    width: 80% !important; }

#logo {max-height: 120px;margin: auto;}

.list-item-inline  > img
{
    width: 76% !important;
}

a {
    color: #259bca;
    color: yellow;
    text-decoration: none;
}



/* ************************************************************************************************   */
/* The MIDDLE AREA ***  */
/* ************************************************************************************************   */
.content-container{
    width: 80%;
    margin: auto;
    min-width: 350px;
    max-width: 800px;
    position: relative;
    /*        background-color: #252D46 !important;  */
    background-image: url(  "/css-assets/colorbackground-blue-gradient-4.jpg" )  !important;
    background-size: cover;
}
.card-header {color:red;font-size:24pt;font-weight:700;}

.card-body {
    padding:0% 10% 10% 10%;text-align: left;
    background-image: url(  "/css-assets/colorbackground-blue-gradient-4.jpg" )  !important;
    color: white !important;
    border: 3px solid white;
}


element.style {
}
.card-body {
    border: 1px solid white;
}



/* ************************************************************************************************   */

/* *********************************************************   */
/*  CSS and Overrides for QUESTIONS, CLUES   */
/* *********************************************************   */
#question-header-section {
    background-image: url(  "/css-assets/colorbackground-blue-gradient-4.jpg" )  !important;
    background-size: cover !important;
    height: auto !important;
    border: 1px solid white;
    color:white;
}

#category { color: azure !important;}

#difficulty-level-code, #difficulty-label  {color: goldenrod !important;}
#difficulty-short-name {color: goldenrod;}
#difficulty-description{color: goldenrod;}



#question {
    margin: 0 1%;
    color: Yellow !important;
    font-size:26px !important;
}

#question-explanation {
    color: #02093B;
    color: darkblue;
    text-align: center;
    padding-right: 15%;
    padding-left: 15%;
    padding-bottom: 15px;
    font-weight: bold;
    font-size: 24px;
}

#question-description, #question-explanation {
    background-image: url(  "/css-assets/colorbackground-blue-gradient-4.jpg" )  !important;
    background-size: cover !important;
    height: auto !important;
    color:white !important;
    padding-top: 1%;
}

#question-description
{
    font-size: 26px !important;
}
}


.testerclass {
    color: red !important; font-weight:800;
    
}


#question-image {}

/* upcoming timer warning */
.in-question-box-text {line-height: 16pt; padding-top: 2% !important; color: red; font-weight:700; margin-bottom: 10px;}

#timeout-question-countdown {padding-top: 1% !important;}

.text-danger {color:yellow !important; font-weight:800;}

.description-container {padding-bottom: 5%;}

.inline-clue-text  {
    color: white !important;
    font-size: 24px;
    font-weight: bold;
    /*max-width: 60%; !*max-height: 250px;*!*/
    min-width: 100%;
    overflow-wrap: anywhere;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    justify-content: center;
    display: table;
    padding-bottom:20px;
    border-bottom: 1px solid goldenrod;
}

.list-item-inline {color: white !important;}

.clue-no-answer  {color: goldenrod !important;     text-decoration: underline;}
.clue-no {
    text-decoration: underline;
    color: #b9c1cc;
    color: goldenrod !important;
    font-size: 1.4em;
}
#clue-no-1,  #clue-no-2,  #clue-no-3,  #clue-no-4,  #clue-no-5,  #clue-no-6
{ }

.clues-guesses-count-text {color: goldenrod !important}


.grid-clue-text   {color: white !important;}

#remaining-guess {color: goldenrod !important}

.text-slate-400 {color: yellow !important;}   /* NEXT QUESTION message */
.text-slate-100 {color:white !important;}   /* NEXT QUES DATE message */

#timeout-question-seconds {color:yellow !important; font-size:larger;}
#timeout-question-countdown {color:white !important;}


#label-is-answered {color: yellow;}
#answer {font-size: 20pt !important; color: white !important;}
.correct-answer {     color: red !important; }

.card{ }  /* the lower question area?  */



.flex
.flex-col
.items-center

    /* *********************************************************   */
    /*  Sharing Area/Page */
#share-section {    color:black;}
#share-label {    color:white !important; }
#share-section {    color:white !important; }

/* *********************************************************   */
/*  NEXT QUESTION TIME DATE */
.text-slate-500 {color: yellow;}   /* NEXT QUESTION message */
.text-slate-200 {color:white !important;}   /* NEXT QUES DATE message */
.date-fragments {color: yellow !important;}  /* Time Date  */
#days, #hours, #minutes {color: white !important}

/* *********************************************************   */


li.nav-item {color: red;}

a.nav-link {color: darkgoldenrod !important; font-weight:750;
padding-left: 15px !important;
padding-right: 15px !important;
    line-height: 1.25em !important;}

a:hover.nav-link {
    background-color: #555;
    color:yellow  !important; font-weight:750;
}


#submissions-mid-section
{
    border-style: solid;
    border-color: darkred;
    padding: 1% 3%;
}


/* ************************************************************ */
/* for dropdown tables */
.dataTables_wrapper {color: goldenrod;}

.dataTables_wrapper .dataTables_paginate .paginate_button  {color: white !important;}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover  {color: yellow !important;}


.paging_simple_numbers {
    color: green !important;}

.dataTables_paginate
{color: white !important;}


.paginate_button.disabled:hover
{color: white !important;}


.paginate_button.disabled:active
{color: white !important;}

.paginate_button.disabled:active
{color: white !important;}

.paging_simple_numbers
{color: white !important;}

.paginate_button:inactive {
    color: green !important;}

.paginate_button:active {
    color: orange !important;}

.paginate_button {
    color: orange !important;}


thead {color:yellow !important;}
tbody {color: black;}
.sorting_1 {font-weight:700;}

/*
.dataTables_wrapper {color:white !important;}
.dataTables_paginate  {color:white !important;}
.paginate_button {color:white !important;}
*/

a.paginate_button {color:white !important;}

/* *********************************************************   */


/* welcome page checkmarks   */
ul.checkmark li {
  font-size: 18px;
  margin-bottom: 1em;
  list-style-type: none;
  padding: 0em 0 0 2.5em;
  position: relative;
/*  padding-left: 0px !important; */
}
ul.checkmark li:before {
  content: " ";
  display: block;
  border: solid 0.8em blue;
  border-radius: 0.8em;
  height: 0;
  width: 0;
  position: absolute;
  left: 0.5em;
  top: 40%;
  margin-top: -0.5em;
}
ul.checkmark li:after {
  content: " ";
  display: block;
  width: 0.3em;
  height: 0.6em;
  border: solid #fff;
  border-width: 0 0.2em 0.2em 0;
  position: absolute;
  left: 1.1em;
  top: 42%;
  margin-top: -0.2em;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.carousel-control-prev-icon {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}


/*  *********   SPECIAL - IN-PAGE sub menu styling ****  mainly for custom "about" page  */
.AboutMenu {
    margin: 5px;
    width: 800px;
    font-family: sans-serif;

    position: relative;
    overflow: hidden;

}

.AboutMenu a {
    display:block;
    padding:3px;
    text-decoration:none;
    border:none;
    background-color:#fff;
    color:#009;

    float: left;
    text-align: center;
    padding: 1px 11px;
    margin-right: 10px;
}

.AboutMenu a:hover {
    background-color:#009;
    color:#fff;
}

/* Responsive navigation menu (for mobile devices) */
@media screen and (max-width: 800px) {
    .AboutMenu
    {
        float: none;
        display: block;
        width: fit-content;

        position: relative;
        top: 0;
        left: 0;
        transform: none;

    }


    .AboutMenu a {
        float: none;
        display: block;
        position: relative;
        margin-bottom: 4px;
        transform: none;
        width: fit-content;
        padding: 1px 11px;

    }
}


a.nav-link-inside {color: blue !important; font-weight:750;}
a:hover.nav-link-inside {
    background-color: #555;
    color:yellow  !important; font-weight:750;
}

.list-item-inline  > img
{
    width: 76% !important;
}


*,
:after,
:before {
    box-sizing: border-box;
    border: none ;
}


/* *********************************************************   */

.M1 {
    /* 
        To show the grid# to the top right
        right: 15px;
        top: 15px;

        To show the grid# to the top left
        right: 265px;
        top: 15px;

        To show the grid# to the bottom left
        right: 265px;
        top: 200px;

        To show the grid# to the bottom right
        right: 15px;
        top: 200px;

    */
    
        right: 265px;
        top: 130px;

    position: absolute;
    width: 32px;
    background-color: darkred;
    color: yello;
    border-radius: 10%;
    padding: 5px;
    font-size: 12px;
    font-weight: bold;
}


/*  CUSTOM CLASSES to be uaed INSIDE CLUE/Question fields !!  ******* */

.clue-large-text {
    
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;

color: red !important;
font-size: large;
font-weight: 800;

}


.center-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.center-image-full {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:100%;
}


.center-text-full {
    padding-left:40px !important;;
text-align: center !important;}


.closebox {

    background-color: transparent !important;
    color:  darkslategray !important;
}


.center-image-grid {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* max-width:80% ; */
    max-height: 80% !important;
    vertical-align: bottom;
    margin-bottom:0px; margin-top:0px; padding: 0px;
}

/* 
#question-header-section {
    background-image: url("/css-assets/colorbackground-gradient-greenish-blue-1.jpg") !important;
    background-size: cover !important;
    height: auto !important;
    border: 1px solid white;
    color: goldenrod !important;
    
    
            animation: alert 1s infinite;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;

}

*/

#NewQOTD-UNIQUE {
    color: red !important;
        animation: alert 1s infinite;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  }



#NewQOTD {
    color: red !important;
        animation: alert 1s infinite;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  }


/* ****  ANIMATION *** */
@keyframes slidein {
            from {
                margin-left: 100%;
                width: 300%; 
            }

            to {
                margin-left: 0%;
                width: 100%;
            }
        }

        .test_animate {
            animation: slidein 5s ease-in-out;  /* infinite; */
        }
        
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}



@keyframes alert {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
/*    background-color: yellow; */
  }
  100% {
    transform: scale(1);
    background-color: transparent;
  }
}

.cluebox
{
    background-image: url( "/css-assets/colorbackground-abstract-blue-blur-2.jpg");
    color: white;

    display: block;
    padding: 70px 100px;
    padding: 12% 4%;
    verticle-align: middle;
    /* height:200px !important; */


    /* width:75%; */


    border: 4px;
    border-color: gold;
    border-style:solid;

    text-align: center;


    height: 20% !important;

    /*
     background-color: Azure;
     background-color: Khaki;

     opacity: 0.6;
    */

    font-size:18pt;
    font-weight:700;


    /* border-color: #FF0000 #00FF00 #0000FF #000000; border-style:solid" */
}

.w-100 {

    width: 80% !important;

    margin: auto;
    /*    min-width: 350px; */
    max-width: 800px;
    position: relative;
}


.m-1
{
    border-style: solid;
    border-color: darkred;
}

.multi1, .multi2
{
    /*   background-image: url("/css-assets/colorbackground-gradient-blueish-grey-1.jpg");  */
    background-image: url("/css-assets/colorbackground-abstract-red-hole-oval1.jpg");

    background-size: cover;

    border: 1px;
    border-color: yellow;
    border-style:solid;
    text-align:left;
    margin:10px;
    padding-left:15px;
    width:75%;
    height: 30px;
    color: yellow !important;

}


.multi2
{
    background-image: url( "/css-assets/colorbackground-gradient-white-greyish-3.jpg");
    background-size: cover;
    color: black !important;
}

.nocluelabel
{
    display:none  !important;
    color:00000;
    color:red  !important;
    border-style:none !important;
}


.smaller-grid-text, .smaller-grid-text >div,.smaller-grid-text >span {font-size: 12pt !important; }


.multi1 .multi2 > span {
    color: white;
}
.smaller-grid-font
{
    font-size:smaller !important;
}

/* **** CLUESTYLES ART 1 *** FOR MANUAL Entry into CLUE FIELDS for TEXT BACKGROUNDS  ***** */
/*  class names */

.c-greenish
{
    background-image: url( "/css-assets/colorbackground-abstract-green-blur-3.jpg");
    color: white;

}


/* border options
https://developer.mozilla.org/en-US/docs/Web/CSS/border
*/

/*  re: opacity
it is difficult to set the opacity of the background image and NOT the text at the same time
however there is a method (not practical for all the clues
but here it is
https://coder-coder.com/background-image-opacity/
*/




/* *********************************************************   */


.center-video {
    display: block;
    margin: 0 auto;
}
/* *********************************************************   */


/* video 
Now, if we want to add attributes like controls, autoplay, loop etc, we will add it to the <video> element.
https://www.w3docs.com/learn-html/html-embed-tag.html
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video   
(for controls)
https://www.freecodecamp.org/news/video-audio-in-html-a-short-guide-69f721878b47/
*/






/* **** UPLOADED BACKGROUNDS ***** */

/*

"/css-assets/colorbackground-abstract-green-blur-4.jpg"
"/css-assets/colorbackground-abstract-green-blur-3.jpg"
"/css-assets/colorbackground-abstract-green-hole-oval1.jpg"
"/css-assets/colorbackground-abstract-green-blur-2.jpg"
"/css-assets/colorbackground-abstract-green-blur-1.jpg"
"/css-assets/colorbackground-abstract-blue-blur-2-spotlight.jpg"
"/css-assets/colorbackground-abstract-blue-blur-1-spotlight.jpg"
"/css-assets/colorbackground-abstract-blue-blur-2.jpg"
"/css-assets/colorbackground-abstract-blue-blur-1.jpg"
"/css-assets/colorbackground-abstract-turquioise-blur-1.jpg"
"/css-assets/colorbackground-abstract-red-blur-3.jpg"
"/css-assets/colorbackground-abstract-red-hole-oval1.jpg"
"/css-assets/colorbackground-abstract-red-blur-2.jpg"
"/css-assets/colorbackground-abstract-red-blur-1.jpg"
"/css-assets/colorbackground-abstract-white-blur-1.jpg"
"/css-assets/colorbackground-abstract-white-hole-oval1.jpg"
"/css-assets/colorbackground-abstract-white-hole-rectangle.jpg"
"/css-assets/colorbackground-abstract-white-hole-square.jpg"
"/css-assets/colorbackground-abstract-white-hole.jpg"
"/css-assets/colorbackground-orangish-sky.jpg"
"/css-assets/colorbackground-gradient-white-greyish-3.jpg"
"/css-assets/colorbackground-gradient-amber-2.jpg"
"/css-assets/colorbackground-gradient-amber-1.jpg"
"/css-assets/colorbackground-gradient-greenish-bright-1.jpg"
"/css-assets/colorbackground-gradient-blueish-1.jpg"
"/css-assets/colorbackground-gradient-greenish-2.jpg"
"/css-assets/colorbackground-gradient-blueish-grey-1.jpg"
"/css-assets/colorbackground-gradient-greenish-blue-1.jpg"
"/css-assets/colorbackground-gradient-greenish-1.jpg"
"/css-assets/colorbackground-gradient-white-greyish-2.jpg"
"/css-assets/colorbackground-gradient-reddish-dark-2.jpg"
"/css-assets/colorbackground-gradient-purpleish-dark-2.jpg"
"/css-assets/colorbackground-gradient-purpleish-dark-1.jpg"
"/css-assets/colorbackground-gradient-purpleish-1.jpg"
"/css-assets/colorbackground-pastel-pinkish-3.jpg"
"/css-assets/colorbackground-pastel-pinkish-2.jpg"
"/css-assets/colorbackground-pastel-pinkish-1.jpg"
"/css-assets/colorbackground-gradient-black-to-white-2.jpg"
"/css-assets/colorbackground-gradient-black-to-white-1.jpg"
"/css-assets/colorbackground-abstract-black-1.jpg"
"/css-assets/colorbackground-gradient-honeycomb-dark-brown-1.jpg"
"/css-assets/colorbackground-dark-reddish-gradient-1.jpg"
"/css-assets/colorbackground-orangish-gradient-1.jpg"
"/css-assets/colorbackground-blue-gradient-5.jpg"
"/css-assets/colorbackground-blue-gradient-4.jpg"
"/css-assets/colorbackground-blue-gradient-3.jpg"
"/css-assets/colorbackground-blue-gradient-2.jpg"
"/css-assets/colorbackground-gradient-honeycomb-grey-2.jpg"
"/css-assets/colorbackground-gradient-honeycomb-white-1.jpg"
"/css-assets/colorbackground-abstract-dark-red-1.jpg"
"/css-assets/colorbackground-abstract-red-1.jpg"
"/css-assets/colorbackground-blue-gradient-1.jpg"
"/css-assets/colorbackground-abstract-gold-1.jpg"
"/css-assets/colorbackground-abstract-amber-1.jpg"
"/css-assets/colorbackground-abstract-green-2.jpg"
"/css-assets/colorbackground-abstract-green-1.jpg"
"/css-assets/colorbackground-wood-panel-2.jpg"
"/css-assets/colorbackground-wood-panel-1.jpg"
"/css-assets/colorbackground-graphpaper-white-1.jpg"
"/css-assets/colorbackground-greenish-micrgrid-1.jpg"
"/css-assets/colorbackground-blue-light-grid1=2.jpg"
"/css-assets/colorbackground-blue-light-micrgrid-1.jpg"
"/css-assets/colorbackground-blue-micrgrid-1.jpg"
"/css-assets/colorbackground-dark-misc-2.jpg"
"/css-assets/colorbackground-dark-misc-1.jpg"
"/css-assets/colorbackground-dark-brick-2.jpg"
"/css-assets/colorbackground-dark-brick-1.jpg"
"/css-assets/colorbackground-dark-microgrid-1.jpg"
"/css-assets/colorbackground-dark-pixellated-1.jpg"
"/css-assets/colorbackground-pinkish-2.jpg"
"/css-assets/colorbackground-pinkish-1.jpg"

*/