/* Page layout */
body {
    background-color: #ebf1f3;
    margin-bottom: 30px;
}
#banner {
    margin-right: -15px;
    margin-left: -15px;
    padding-right: 15px;
    padding-left: 15px;
    background-color: #ccdce2;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
#background {
    background-color: white;    
}
#main {
    background-color: #ebf1f3;
    border-left: 1px solid #ccc;
}
#right {
  background-color: #ebf1f3;    
}
#title-row {
  background-color: #4682b4;
  color: #f6f6f6;
}
#title {
  font-size: 24px;
}
#mode.test {
  color: #fbc174;
}
#switch-mode {
  margin-left: 15px;
  margin-bottom: 5px;
}
.mode {
  color: red;
  text-decoration: underline;
}
#current-role {
  font-size: 24px;
}
h2 {
  color: #4682b4;
  margin-top: 10px;
  margin-bottom: 30px;
}
h3 {
  margin-top: 30px;
  border-top: 2px solid #ccdce2;
 
}
h4 {
  color: #4682b4;
}
label {
  font-weight: bold;
  color: #666;
}

/* banner */
.logo {
  float: left;
}
.bom-logo {
  float: left;
  clear: none;
  padding-top: 20px;
  padding-bottom: 20px;
}
img.flags {
  display: block;
  width: 20%;
  float: left;
  margin-top: 45px;
  margin-left: 90px;
}
.sws-monicker {
  float: right;
  font-family: arial, sans-serif;
  font-size: 36px;
  font-weight: bold;
  margin-top: 40px;
}

/* Navigation sidebar */
div.sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
}
div.sidebar a {
    color: #6c757d;
}
div.sidebar a:hover {
    color: #007bff;
    text-decoration: underline;
}

.slide-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

div.container {
    width:100%;
    overflow:hidden;
    position:relative;
    //display: flex;
    //justify-content: center;
    //align-items: center;

}

.img-in-container {
    width:66%; 
    float:left;
}

.slide-in-container {

    /* Center vertically and horizontally */
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
}

.slides {
  position: relative;
  top: 50%;
  left: 0;
}

.slide-title {
  position: relative;
  top: 0;
  left: 0;
}

.slide-bar {
  position: absolute;
  top: 30px;
  left: 30px;
}

#slides {
    display: flex;              /* establish flex container */
    flex-direction: column;     /* stack flex items vertically */
    justify-content: center;    /* center items vertically, in this case */
    align-items: center;        /* center items horizontally, in this case */
    //height: 300px;
    border: 1px solid black;
}

.slide-box {
    //width: 300px;
    margin: 5px;
    text-align: center;
}

div.slide {
    position: sticky;
    color: blue;
    padding: 5px;
    background-color: powderblue;
    border-style: solid;
    border-color: black;
    //border-width: thin;
    border: 1px solid #000000;
}

.nav-link {
    padding-top: 0;
    padding-bottom: 0;
}
ul.level-2 {
    margin-left: 8px;
}
ul.level-3 {
    margin-left: 12px;
}
div.sidebar a.nav-title,
div.sidebar span.nav-title {
  color: #212529;
  background-color: #ccdce2;
  font-weight: 600;
  border: 1px solid #ccdce2;
  border-radius: .25rem;
}
div.sidebar a.current {
    color: #eaf0f5;
    background-color: #4682b4;
}

div.sidebar a.active {
    color: #4683e4;
}

/* image attribution */
p.attrib {
  font-size: 12px;
  text-align: right;
  margin-bottom: 0;
}

/* acfj */
.error, .select-error{color: #FF0000;}

#save_done_alert { display:None }

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #4682b4;
   color: white;
   text-align: center;
}

.footer a{
    color: white;
}

/* NOAA scale colours */
/* none */
.noaa_scale_0 {
    background-color:#92D050;
}
/* minor */
.noaa_scale_1 {
    background-color:#F6EB14;
}
/* moderate */
.noaa_scale_2 {
    background-color:#FFC800;
}
/* strong */
.noaa_scale_3 {
    background-color:#FF9600;
}
/* severe */
.noaa_scale_4 {
    background-color:#FF0000;
    color:#eee
}
/* extreme */
.noaa_scale_5 {
    background-color:#C80000;
    color:#eee
}

/* Impacts table */
#swx-impacts th.title,
#swx-impacts td.title {
  width: 25%;
}
#swx-impacts th.comments,
#swx-impacts td.comments {
  width: 45%;
}
#swx-impacts th.day,
#swx-impacts td.day {
  text-align: center;
  width: 10%;
}

/* Flare probabilities */
.box-prob {
    width: 100px; 
    height: 100px;
    float: left;
    margin-left: 20px;
    padding: 4px;
    border: 2px solid black;
}
.box-prob p {
    text-align: center;
}
.flare-class {
    font-weight: bold;
    font-size: larger;
}
.noaa-equiv {
    font-weight: light;
    font-size: smaller;
}

/* Thumbnails */
.thumb-title-container {
    margin-top: 20px;
    margin-bottom: 5px;
}
.thumb-container {
    margin-bottom: 20px;
}
.thumb-title {
    float: left;
    margin-right: 10px;
    width: 100px;
    text-align: center;
    font-weight: bolder;
    font-size: smaller
}
.thumbnail {
    display: block;
    position: relative;
    float: left;
    margin-right: 10px;
    width: 100px; 
    height: 100px;
}
.thumbnail-border {
    border: 2px solid #aaa;
}
.thumbnail:hover {
    border: 2px solid #0056b3;
}
.thumbnail p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
}
.thumb-good {
    background-color: #92D050;
    color: black;
}
.thumb-good:hover {
    color: black;
}
.thumb-bad {
    background-color: #FF0000;
    color: #eee;
}
.thumb-bad:hover {
    color: #eee;
}

/* Learmonth radars */
.radar-container {
  position: relative;
}
.radar-container img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.radar-container img:first-child {
  position: relative;
}
.radar-legend { z-index: 0; }
.radar-background { z-index: 1; }
.radar-topography { z-index: 2; }
.radar-returns { z-index: 3; }
.radar-range { z-index: 4; }
.radar-locations { z-index: 5; }

/* Displayed images */
div.col img {
  width: 100%;
}
div.col-6 img {
  width: 100%;
}
img.img-border {
  border: 1px solid #ccc;
}
video.video-border {
    border: 1px solid #ccc;
}

/* Explanations below maps, etc. */
p.explain {
    margin-top: 5px;
    padding: 10px;
    background-color: #eee;
    border: 1px solid #aaa;
    border-radius: 2px;
}
p.explain-radar {
    max-width: 512px;
}

/* Adjustments for SEAESRT images */
#seaesrt-hazards {
  position: relative;
}
#seaesrt-hazards img {
  padding-left: 5px;
  padding-right: 5px;
  background-color: white;
}
#seaesrt-hazards-hfix-1 {
  width: 530px;
  height: 2px;
  position: absolute;
  top: 1px;
  left: 5px;
  background-color: white;
}
#seaesrt-hazards-vfix-1 {
  width: 2px;
  height: 393px;
  position: absolute;
  top: 1px;
  left: 6px;
  background-color: white;
}
#seaesrt-hazards-vfix-2 {
  width: 2px;
  height: 393px;
  position: absolute;
  top: 1px;
  left: 529px;
  background-color: white;
}
#seaesrt-environment-update {
  padding-left: 5px;
  padding-right: 0px;
}
#seaesrt-environment-update img {
  padding-top: 15px;
  background-color: white;
}


/* below are added by TYL */
.nav-collapse[aria-expanded="true"] .fas:before {   
  content: "\f107";
}
.nav-collapse[aria-expanded="false"] .fas:before {
  content: "\f105";
}

/* Advisories */
.bg-latest {
    background-color: #ccdce2!important;
}

.fit-image{
    width: 100%;
    object-fit: cover;
}

.center{
  display: block;
  margin-left: auto;
  margin-right: auto;
  //width: 50%;
}
  
.form-container { 
    text-align: center;
}

form {
    display: inline-block;
}
  
.save-alert{
    display: none;
}

.nowrap {
  white-space: nowrap;
}

.align-top {
  vertical-align: top;
}

table#latest-advisories thead, 
table#latest-advisories tbody, 
table#latest-advisories tr, 
table#latest-advisories th,
table#latest-advisories td {
  border: none;
}
table#latest-advisories tbody tr {
  border-top: 1px solid #ccc;
}
table#latest-advisories tr.effect {
  border-top: 2px solid #ccc;
}

/* Instead of this, use Bootstrap classes to style tables,
   or be more specific about which table you are affecting.
   
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  white-space: nowrap;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  vertical-align: top;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
*/

#advisory img {
  width: 100%;
  margin-bottom: 10px;
}

#buttons button {
  margin-top: 10px;
}

button#refresh {
  margin-bottom: 10px;
}

button.btn-shortcut {
  margin-top: 32px;
  border-color: #ccc;
}

.btn-anchor {
    outline: none !important;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

div.info_box { 
    padding: 20px;
    background-color: honeydew;
}

p.example { 
    font-family: monospace;
    font-size: 0.8125em;
}

div.indent-text {
    padding-left: 100px;
}

/*** For floating Navbar ***/
 /* Style the navbar */
#navbar {
  /* overflow: hidden; */
  width: auto;
}

/* Navbar links */
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  background-color: #4682b4;
  text-align: center;
  padding: 6px;
  text-decoration: none;
}

#navbar a.selected {
  background-color: #052c65;
}


/* Page content */
.content {
  padding: 16px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
/*
.sticky + .content {
  padding-top: 60px;
} 
 */
/***************************/