

.rowx { width: 100%; }

/* Background */   
.background_image { display:block; height:97%; background-color: white; } 


/* Logo */   
  .logo {
    display: flex;               /* Enables side-by-side layout */
    align-items: center;         /* Vertically center text with image */
    gap: 8px;                    /* Space between image and text */
    max-width: 600px;
    margin: 20px auto;
    
    
    position:absolute;
    top:-10px;
    left: 16px;
    
  }
  .logo img {
    widthx: 150px;                 /* Fixed image width */
    height: auto;                 /* Keep aspect ratio */
    border-radius: 8px;           /* Optional rounded corners */
  }
  .logo p {
    margin: 0;
    line-height: 1.5;
    padding-top:10px;
    
    color:#000000; 
    font-size:20px; 
    font-weight: bold; 
  }    
  
  
 
  

@media (max-width : 440px) { .cell_phone { position:absolute; top:-8px; left:-4px;  width:90%; } }


/* Search container */ 
@media screen and (min-width : 701px) and (max-width : 800px) { .search_container_sectionx { width:70%; }}  /* Tablet */

.search_container { border-radius:25px; margin: 0 auto; box-shadow: 10px 10px; background-color: white; width:90%; }

.search_container { border:1px solid white; }

@media (max-width : 440px) { .search_container { margin-top:100px; } }  /* Cell phone */
@media (min-width : 441px) { .search_container { margin-top:130px; } }  /* Laptop */


/* Icons container */   
.icons_container { margin-top:34px; } 
@media (max-width : 440px) { .icons_container { margin-bottom:10px; } }  /* Cell phone */
@media (min-width : 441px) { .icons_container { margin-bottom:20px; } }  /* Laptop */


/* Icons row */ 
.icons_row { padding-top:40px; padding-bottom:40px; }


/* Icons */ 
.icon { margin-top:10px; height:30px; margin-bottom:20px; }

.icon_size { width:30px; }

.icont { margin-top:20px; height:40px; margin-bottom:20px; }

.icon_sizet { width:40px; }


.icona { margin-top:10px; height:40px; margin-bottom:20px; }

.icon_sizea { width:40px; }

.icon_pos { margin-top:20px; }


/* Icons- popups */ 
.icon.hovertext {
position: relative;
border-bottom: 1px dotted black;
}

.icon.hovertext:before {
content: attr(data-hover);
visibility: hidden;
opacity: 0;
width: 140px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px 0;
transition: opacity 1s ease-in-out;
position: absolute;
z-index: 1;
left: 0;
top: 110%;
}

.icon.hovertext:hover:before {
opacity: 1;
visibility: visible;
}




/* Search form */ 
 input[type=text] {
   box-sizing: border-box;
   border: 2px solid #ccc;
   border-radius: 24px;
   font-size: 16px;
   background-color: white;
   background-image: url('images/search_new_26.png');
   background-position: 10px 10px; 
   background-repeat: no-repeat;
   padding: 12px 26px  12px 26px;
   height:60px;
   
   width: 100%; 
 }
 
@media (max-width : 440px) { input[type=text] { widthx: 100%; margin-bottom:0px; } } /* Cell phone */
@media (min-width : 441px) { input[type=text] { widthx: 90%; margin-bottom:0px; } } /* Laptop */



.search_form_container { margin-top:24px; } 

/* Search placeholder */

/* For Firefox */
 input::placeholder { color: #6e7f80; opacity: 1; }
 
/* For Edge */
 ::-ms-input-placeholder { color: #6e7f80; }
 
/* For Chrome, Safari, Opera */
 ::-webkit-input-placeholder { color: #6e7f80; font-weight: bold; }



/* Form */
::-webkit-input-placeholder { color: red; } /* Chrome/Opera/Safari */
::-moz-placeholder { color: green; }  /* Firefox 19+ */
:-ms-input-placeholder { color: blue; } /* IE 10+ */
:-moz-placeholder { color: pink; } /* Firefox 18- */



/* Search blurb */
.search_blurb { font-family: Arial; font-size:16px; color:black; margin-bottom:6px; border-top:1px solid black; padding-top:3px; }


/* Brackets */
.brackets_table { height: 280px; text-align:center; margin: auto; position:relative; top:52px; width:100%;}

@media (max-width : 440px) {  .brackets_table { margin-top:42px; } } /* Cell phone */
@media (min-width : 441px) {  .brackets_table { top:22px; } } /* Laptop */

.brackets_body { text-align:center; width:70%; }

@media (max-width : 440px) {  .brackets_margin_column { width:10%; } } /* Cell phone */
@media (min-width : 441px) {  .brackets_margin_column { width:20%; } } /* Laptop */



.bracket_container { text-align:center; display: inline-block; }
.bracket { font-size: 300%; color:#6e7f80; }
.bracket_left { text-align:right; }
.bracket_right { text-align:left; }
.bracket_content { color:#ffff52; }


/* Cell phone */
@media screen and (max-width : 440px) 
{  
    .brackets_table { top:12px; }
    .bracket_content { width:40%; font-size:18px;  padding-left:6px; padding-right:6px; } 
    .bracket_middle { height:40px; } 
} 


/* Laptop */
@media screen and (min-width : 441px) 
{  
    .brackets_table { top:52px; }
    .bracket_content { width:50%; font-size:16px; } 
} 




@media (max-width : 440px) { .popup-login, .popup-signup { borderx:3px solid green; } } /* Cell phone */
@media (min-width : 441px) { .popup-login, .popup-signup { borderx:3px solid green;  width:70%; margin-left:15%; margin-right:15%; } } /* Laptop */


.content-block { borderx:3px solid green; }
        
#login_formx { width:70%; margin-left:15%; margin-right:15%; }
        




/* Heading */   
.heading { text-align:center; }
.heading_text { font-weight:900; color:#f9f301; }


/* Cell phone */
@media (max-width : 440px) 
{
.heading { margin-top:50px; background-color: #6e7f80; padding:10px; }
.heading_text { font-size:24px; line-height:40px; }
}
 
/* Laptop */
@media (min-width : 441px) 
{
.heading { margin-top:110px;  background-color: #6e7f80; padding:10px; margin-bottomx:-10px; }    
.heading_text { font-size:32px; line-height:40px; }
}



/* Red button */


/* Cell phone */
@media (max-width : 652px) 
{ 
.red_buttonx { text-align:center; width:40%; margin-left:30%; margin-right:30%; margin-top:20px;  max-width:220px; }

.red_button { text-align:center; width:80%; margin-left:10%; margin-right:10%; margin-top:20px;  max-widthx:220px; }

.alert_blurb { border:1px solid white; border-radius: 24px; text-align:center;  width:90%; margin-left:5%; margin-right:5%; margin-top:70px; padding:16px; }
.chart_blurb { border:1px solid white; border-radius: 24px; text-align:center;  width:90%; margin-left:5%; margin-right:5%; margin-top:160px; padding:16px; margin-bottom:200px; }

.alert_blurb_contents { font-size:16px; color:#f9f301; }
} 


/* Tablet */
@media (min-width: 653px) and (max-width: 992px)
{ 
.red_button { text-align:center; width:40%; margin-left:30%; margin-right:30%; margin-top:40px; max-widthx:120px; }

.alert_blurb { border:1px solid white; border-radius: 24px; text-align:center;  width:90%; margin-left:5%; margin-right:5%; margin-top:80px; padding:16px; }
.chart_blurb { border:1px solid white; border-radius: 24px; text-align:center;  width:90%; margin-left:5%; margin-right:5%; margin-top:140px; padding:16px; }

.alert_blurb_contents { font-size:16px; color:#f9f301; }
} 


/* Laptop */
@media (min-width : 992px) 
{ 
.red_button { text-alignx:center; width:120px; margin-left:40%; margin-top:80px; }

.alert_blurb { border:1px solid white; border-radius: 24px; text-align:center;  width:60%;  margin-left:20%; margin-right:20%; margin-top:140px; margin-bottom:300px; padding:16px; }
.chart_blurb { border:1px solid white; border-radius: 24px; text-align:center;  width:60%;  margin-left:20%; margin-right:20%; margin-top:220px; margin-bottom:300px; padding:16px; }

.alert_blurb_contents { font-size:16px; color:#f9f301; }
} 



        .horizontal-scrollable  .row {
            overflow-x: auto;
            white-space: nowrap;
        }
        
        .horizontal-scrollable  .row  .col-xs-3 {
            display: inline-block;
            float: none;
        }



/* Format icons as checkboxes */ 
input[type="checkbox"] { display: none; }
input[type="checkbox"]:checked + label { opacity:.5; }



