/*
	Author:		JNonneman adapted from original by DMatney
	Purpose: 	New and overriding styles used in Customer Portal
	History:	June 2022 - Added formatting for table by JNonneman
			Nov. 2020 - updated minor look/feel
			Jan. 2018 - original

*/

a:hover { cursor:pointer; }
h1 { font-size: 1.25em; text-align: left; color: black; padding: 0; margin: 2em 0 1em; }
#admintopmenu { display: block; position: static; background: none; width: 94%; margin: 1em auto; clear: both; }
#admintopmenu ul { padding: 0; margin: 0; font-size: .9rem; }
#admintopmenu li { display: inline-block; margin-bottom: 0; }
#admintopmenu a { display: block; padding: .15em 2rem; text-decoration: none; background-color: #881729; color: white; font-weight: bold; border-radius: .5rem; }
#admintopmenu a:hover, #admintopmenu a:visited:hover { background-color: #EBE3D6; color: #881729; }
#admintopmenu a.current, #admintopmenu a.current:hover, #admintopmenu a.current:visited { cursor: default; background-color: #ADAAA5; color: #3A3934; }
#banner { margin: 0;  position: fixed; width: 100%; z-index: 10; background-color: white; overflow: visible; line-height: 1; padding-bottom:.2rem; min-height: 84px; }
#footer { margin-top: 2rem; }
#main { width: 94%; margin: auto; }
trix-toolbar button[data-trix-attribute='strike'], trix-toolbar button[data-trix-attribute='quote'], trix-toolbar button[data-trix-attribute='heading1'], trix-toolbar button[data-trix-attribute='code'] { display: none; }
input[type="submit"] { border-radius: .5rem; padding: .15em 1.5rem; font-size: .9rem; }
#main h1 { margin: 0; padding: 0; }
#main ul li { margin-bottom: .5rem; }
select { font-family: OpenSans, sans-serif; font-size: 1rem; margin-top: .3rem; }
.styled-table { margin-left: auto; margin-right: auto; border-collapse: collapse; margin: 25px 0; font-size: 0.9em; font-family: sans-serif; min-width: 400px; }
.styled-table thead tr { background-color: #009879; color: #ffffff; text-align: left; }
.styled-table th, .styled-table td { padding: 12px 15px;}
.styled-table tbody tr:last-of-type { border-bottom: 2px solid #000000; }
.styled-table tbody tr.active-row { font-weight: bold; color: #009879; }
hr { width:100%; border-top: 2px solid #000000; }
.hrshadow { border:none; height: 1px; width: 100%; height: 1px; margin-top: 0; border-bottom: 1px solid #1f1209; box-shadow: 0 20px 20px -20px #333; margin: -50px auto 10px; }
.submitbutton { display: none; border-radius: .5rem; padding: .15em 1.5rem; font-size: .9rem; background-color: #009879; color: white; font-weight: bold; }
#nav { line-height:2.5em; padding:14px 0px 4px 0px; margin:0px 0px 5px 0px; width:760px;  }
#nav a { color: #000000; background-color:#FFFFFF; text-decoration:none; padding:4px 35px 4px 35px; border:1px solid #d3d3d3; }
#nav .selected { color:#8e1c26; background-color:#FFFFFF; text-decoration:none; padding:4px 35px 4px 35px; font-weight: 700; }
#nav a:hover { color:#8e1c26; background-color:#FFFFFF; text-decoration:none; padding:4px 35px 4px 35px; }

/* dropdown */

.dropbtn {
  background-color: #ffffff;
  color: black;
  padding: 10px;
  font-size: 16px;
  border: 1px;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FAFAFA;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */

.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown

.dropdown:hover .dropbtn {
  background-color: #fa93a1;
}
*/

/* collapsable sections */

.collapsible {
  background-color: #F5F5F5;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 97%;
  border: 2px;
  text-align: left;
  outline: thin dotted;
  font-size: 18px;
}

.active, .collapsible:hover {
  background-color: #F5F5F5;
}

.collapsible:before {
  content: '\002B';
  color: black;
  float: left;
  margin-right: 5px;
  margin-top: -15px;
  font-size: 40px;
}

.active:before {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #F5F5F5;
}

/* modal window */

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  padding-top: 10px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* 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.9); /* Black w/ opacity */
}

/* Modal Content (image) */

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */

.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

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

/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

/* styling for anchors that make them look like buttons */

.anchorbutton {
   background: #F3F3F3;
   border-radius: 4px;
   font-family: Arial;
   color: #000000;
   font-size: 13px;
   font-weight: 100;
   padding: 3px;
   border: solid #666666 1px;
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
   text-align: center;
}

.anchorbutton:hover {
   background: #E3E3E3;
   border: solid #000000 1px;
   border-radius: 4px;
   text-decoration: none;
}