/*
 * It is advised not to edit the smartadmin_production.css
 * as this will override any changes you make in the 
 * later versions of this theme. 
 * 
 * We advise that you use use this CSS to override 
 * SmartAdmin styles. 
 * 
 * Rename the stylesheet to whatever your liking so it will stay
 * unique to you with each update of SmartAdmin.
 */

/*
 * INDEX
 * 
 * - HTML
 * - BODY
 *
 * - CUSTOM STYLES
*/
#header {
  height: 100px;
  background-color: #ff0000;
}
#header > div {
  height: 100px;
}

#logo {
  display: inline-block;
  width: 100px;
  margin-top:  0px;
  margin-left: 9px;
}
.label-microSite {
  font-size: 125% !important;
}

#logo img {
  width: 100px;
  height: auto;
  padding-left: 3px;
}

.smart-style-1 #header {
 background-image: none;
 background-color: #22262e;
}
.smart-style-1 #ribbon {
background: #00FF00;
}


/*******  TIMER STUFF *****/
/*******  TIMER STUFF FOR MULTIPLE TIMERS*****/
#holder,
#holder_0,
#holder_1,
#holder_2,
#holder_3,
#holder_4,
#holder_5,
#holder_6,
#holder_7,
#holder_8,
#holder_9,
#holder_10,
#holder_11,
#holder_12,
#holder_13,
#holder_14,
#holder_15,
#holder_16,
#holder_17,
#holder_18,
#holder_19
{
  position: relative;   /* leave as 'relative' to keep timer centered on your
                           page, or change to 'absolute' then change the
                           values of the 'top' and 'left' properties to
                           position the timer */
  top: 10px;            /* change to position the timer */
  left: 0px;            /* change to position the timer; must also change
                           position to 'absolute' above */
  width: 225px;
  height: 75px;
  border: none;
  margin: 0px auto;
}

#timer_title, #timer_note,
#timer_title_0, #timer_note_0,
#timer_title_1, #timer_note_1,
#timer_title_2, #timer_note_2,
#timer_title_3, #timer_note_3,
#timer_title_4, #timer_note_4,
#timer_title_5, #timer_note_5,
#timer_title_6, #timer_note_6,
#timer_title_7, #timer_note_7,
#timer_title_8, #timer_note_8,
#timer_title_9, #timer_note_9,
#timer_title_10, #timer_note_10,
#timer_title_11, #timer_note_11,
#timer_title_12, #timer_note_12,
#timer_title_13, #timer_note_13,
#timer_title_14, #timer_note_14,
#timer_title_15, #timer_note_15,
#timer_title_16, #timer_note_16,
#timer_title_17, #timer_note_17,
#timer_title_18, #timer_note_18,
#timer_title_19, #timer_note_19
{
  color: #0000FF;           /* this determines the color of the DAYS, HRS, MIN, SEC
                               labels under the timer and the color of the note
                               that displays after reaching the target date and
                               time; if using the blue digital images, change to
                               #52C6FF; for the red images, change to #FF6666; for
                               the white images, change to #BBBBBB; for the yellow
                               images, change to #FFFF00 */
}
#timer_subtitle,
#timer_subtitle_0,
#timer_subtitle_1,
#timer_subtitle_2,
#timer_subtitle_3,
#timer_subtitle_4,
#timer_subtitle_5,
#timer_subtitle_6,
#timer_subtitle_7,
#timer_subtitle_8,
#timer_subtitle_9,
#timer_subtitle_10,
#timer_subtitle_11,
#timer_subtitle_12,
#timer_subtitle_13,
#timer_subtitle_14,
#timer_subtitle_15,
#timer_subtitle_16,
#timer_subtitle_17,
#timer_subtitle_18,
#timer_subtitle_19
{
  color: #0000FF;           /* this determines the color of the DAYS, HRS, MIN, SEC
                               labels under the timer and the color of the note
                               that displays after reaching the target date and
                               time; if using the blue digital images, change to
                               #52C6FF; for the red images, change to #FF6666; for
                               the white images, change to #BBBBBB; for the yellow
                               images, change to #FFFF00 */
}

#timer_note,
#timer_note_0
,
#timer_note_1,
#timer_note_2,
#timer_note_3,
#timer_note_4,
#timer_note_5,
#timer_note_6,
#timer_note_7,
#timer_note_8,
#timer_note_9,
#timer_note_10,
#timer_note_11,
#timer_note_12,
#timer_note_13,
#timer_note_14,
#timer_note_15,
#timer_note_16,
#timer_note_17,
#timer_note_18,
#timer_note_19
{
  position: relative;
  top: 0px;
  height: 25px;
  width: 220px;
  margin: 5px auto;
  padding: 0px;
  text-align: center;
  font-family: Arial;
  font-size: 18px;
  font-weight: bold;    /* options are normal, bold, bolder, lighter */
  font-style: normal;   /* options are normal or italic */
  z-index: 1;
}

.timer_title,
.timer_title_0,
.timer_title_1,
.timer_title_2,
.timer_title_3,
.timer_title_4,
.timer_title_5,
.timer_title_6,
.timer_title_7,
.timer_title_8,
.timer_title_9,
.timer_title_10,
.timer_title_11,
.timer_title_12,
.timer_title_13,
.timer_title_14,
.timer_title_15,
.timer_title_16,
.timer_title_17,
.timer_title_18,
.timer_title_19
{
  border: none;
  top: 5px;
  padding: 0px;
  margin: 0px;
  width: 30px;
  text-align: center;
  font-family: Arial;
  font-size: 10px;
  font-weight: bold;    /* options are normal, bold, bolder, lighter */
  background-color: transparent;
}

.timer_subtitle,
.timer_subtitle_0,
.timer_subtitle_1,
.timer_subtitle_2,
.timer_subtitle_3,
.timer_subtitle_4,
.timer_subtitle_5,
.timer_subtitle_6,
.timer_subtitle_7,
.timer_subtitle_8,
.timer_subtitle_9,
.timer_subtitle_10,
.timer_subtitle_11,
.timer_subtitle_12,
.timer_subtitle_13,
.timer_subtitle_14,
.timer_subtitle_15,
.timer_subtitle_16,
.timer_subtitle_17,
.timer_subtitle_18,
.timer_subtitle_19
{
  border: none;
  padding: 0px;
  margin: 0px;
  width: 120px;
  text-align: center;
  font-family: Arial;
  font-size: 10px;
  font-weight: normal;    /* options are normal, bold, bolder, lighter */
  background-color: transparent;
}
#timer,
#timer_0,
#timer_1,
#timer_2,
#timer_3,
#timer_4,
#timer_5,
#timer_6,
#timer_7,
#timer_8,
#timer_9,
#timer_10,
#timer_11,
#timer_12,
#timer_13,
#timer_14,
#timer_15,
#timer_16,
#timer_17,
#timer_18,
#timer_19
{
  position: relative;
  top: 1px;
  left: 0px;
  margin: 5px auto;
  text-align: center;
  width: 210px;
  height: 48px;
  border: none;
  padding: 10px 5px 10px 5px;
  background: #000000;    /* may change to another color, or to 'transparent' */
  border-radius: 20px;
  box-shadow: 0 0 10px #000000; /* change to 'none' if you don't want a shadow */
}

.overflowScroll {
  overflow: scroll;
  height: 600px;
}

.genderGirls .Girls {
  background: pink;
}
.genderBoys .Boys {
  background: dodgerblue;
}

.carousel-indicators li {
  background: #C0C0C0;
}

.carousel-indicators .active {
  background: black;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 150px;
    right: 0;
    width: 85%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fe00fe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-200px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-200px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #9cb4c5;
    color: #346597;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #9cb4c5;
    color: #346597;
}
.my-btn-xs {
    padding: 1px 5px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    border-radius: 2px !important;
}
.my-btn-lg {
  padding: 10px 16px !important;
  font-size: 17px !important;
  line-height: 1.33 !important;
  border-radius: 3px !important;
}
.my-btn-sm {
  padding: 5px 10px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  border-radius: 2px !important;
}

.dropdown-menu {
  min-width: 500px;
}

.spinner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100hw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f7f9fb;
  transition: opcity 0.75s, visitiblity 0.75s;
}
.spinner-hidden {
  opacity: 0;
  visibility: hidden;
}
.spinner::after {
  content: "";
  width: 75px;
  height: 75px;
  border: 15px solid #dddddd;
  border-top-color: #744975;
  border-radius: 50%;
  animation: loading 0.75s ease infinite;
}
@keyframes loading {
  from {
      transform: rotate(0turn);
  }
  to {
      transform: rotate(1turn);
  }
}

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1010;
    display: none;
    max-width: 700px;
    padding: 1px;
    font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-break: auto;
    line-height: 1.42857143;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    font-size: 13px;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 3px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2)
}