*{padding:0; margin:0; box-sizing:border-box;}
html{font-size:62.5%;}
body{	font-family:'Roboto', sans-serif; line-height:1.2;font-size: 1.6rem;background-color:#1FD4E4;	color:#6b6b6b; margin: 0 auto;}
h1, h2, h3, h4, h5, h6{color:#3AE2F1;	font-family:Quicksand, "Open Sans",  sans-serif;	font-weight:bold;}
h1{padding-bottom: 1.5rem;}
h1 a{color:#3AE2F1;	text-decoration-style:dotted;}
li{ list-style:none;}
a{ text-decoration:none;}
h1{margin:1rem 0;}
img{display:block; max-width:100%; height:auto;}
/* SECTIONS */
main{background-color:#ffffff; width: 100%; padding: 4rem;}
section{max-width:90rem;}
header{display:grid;	grid-template-columns: 1fr 2fr; background-color:#3B4C56;	padding:20px;}
/* NAV & searchbar */
.searchbar{background-color:#3B4C56; border-radius:10px; display:flex; flex-wrap: wrap; justify-content:space-between; padding:10px; max-width:800px; margin:20px;}
.searchbarcheck{background-color:#3B4C56; border-radius:10px;  padding:10px; max-width:1000px; margin:20px;}
.nav{display:flex; justify-content:flex-end; flex-direction:row; }
.nav a{color:#ffffff; font-weight: bold;text-decoration:none;}
.menuitem{padding:10px; color:#ffffff;}
.flexrow{display:flex;justify-content:space-around; color:#ffffff; font-size:.8em; padding:10px;}

/* GENERAL STYLES */
.btn{text-align:center;  display:inline-block; background-color: #1FD4E4; border-radius: 3.5rem; width: 20rem; height: 5rem; margin: 2rem; padding:1rem; border: none; color: #ffffff;  font-weight: bold;	text-decoration:none;}
.btn:hover, input[type=submit]:hover{background-color: #3B4C56; color:#aafd94;}
.errclass{color: #ff0000; grid-column: 2/3; font-style: italic;}
.note{font-size:.8em; font-style:italic; grid-column: 2/3; color:#3B4C56; text-decoration-style:dotted; justify-self:right; }
.right{text-align:right;padding-bottom:15px;}
.center{text-align:center;}
.bold{font-weight:bold; color:#40E3F3; }
.msg{color:#3B4C56; font-weight:bold; font-style:italic; margin-left:40px;}

/* FORMS */
form{padding: 2rem; border-radius: 1rem; background-color:#E5FBFD; width: 100%;}
input, select, textarea {border: .05rem solid #50E5F3; background-color: white; border-radius: 0.25rem; box-shadow:.1rem .1rem #50E5F3;}
input[type="text"], input[type="email"],select,textarea { font: 1.25rem / 1.5 sans-serif; display: block; box-sizing: border-box; width: 100%; padding: 0.5rem 0.75rem;}
textarea{min-height: 5rem; resize:vertical;}
input[type="radio"],
input[type="checkbox"] {height: 1.25em; width: 1.25em; vertical-align: middle;}
input[type="radio"] {border-radius: 50%;}
input[type=submit]{ grid-column: 2 / 3; background-color: #8CE047; border-radius: 3rem; padding:1.5rem; border: none; color: #ffffff; font-weight: bold;cursor: pointer;}
input[type=submit]:hover{background-color: #3B4C56; color:#aafd94;}
label{color:#ffffff; font-weight:bold;}
/*grid */
.gridform {display: grid; grid-template-columns: 15rem auto; gap:2rem; width:100%;}
.gridform, .gridformsimple label{color:#3B4C56}
.full-width{grid-column: span 2;}
.gridcenter{justify-self:center; grid-column: 1/3; margin-top:40px;}
#text, input[type=checkbox]{color:#ffffff; font-size:.8em;}
.formholder{max-width:50rem;	background-color: #E5FBFD; 	border-radius:5rem; margin:1rem auto;}
.formheader{background-color: #1FD4E4; color: #ffffff; font-weight:bold; text-align:center;border-top-left-radius:10px; border-top-right-radius:10px; paddign: 10px;}
#addMember, #addform{display:none; background-color:#d0f3f6; max-width:500px; border-radius:10px;}
/*responisve table */
.tablegrid{ display:grid; grid-template-columns:1fr 1fr 2fr 2fr 1fr 2fr auto 1fr 1fr;}
.tablegridsimple{ display:grid; grid-template-columns:1fr 1fr 2fr 2fr 2fr auto 1fr 1fr;}
@media only screen and (min-width: 500px){
  .row{display:grid; grid-template-columns:1fr 2fr 2fr 1fr 2fr 2fr 1fr 1fr; }
}

@media only screen and (max-width: 500px){
.row {
        border-bottom: 3px solid #ddd;
        div::before {
            content: attr(data-label);
            float: left;
            padding-right: $baseline;
        }

        div {
            border-bottom: 1px solid #ddd;
            text-align: right;
        }

        &.tblheader {
            display: none;
        }
    }
  .searchgrid{
    display:grid;
    grid-template-columns: auto;
    gap: 5px;
  }
}
.tblheader,.headrow{ background-color:#40E3F2; color:#ffffff; font-weight: bold; margin: .1rem; padding:.5rem; text-align:center;}
.datagrid{background-color:#E5FBFD; padding:10px;margin:20px;border-radius: 10px;}
.datagrid th{background-color:#3B4C56; color:#ffffff; padding:10px;}
.datagrid td{padding:10px;}
.main_flex{display:flex; flex-wrap:wrap;}
/*Pop up form style */
.form-popup .overlay {position:fixed;top:0px; left:0px; width:100vw; height:100vh; background:#E5FBFD; z-index:1; display:none;}
.form-popup{background-color:#ffffff;border-radius:10px;position: absolute;top: 200px;left: 200px;padding: 20px;}
.form-popup .content{position:absolute;  top:50%; left:50%; transform:translate(-50%,-50%) scale(0); background:#fff; width:500px; height:250px; z-index:2; text-align:center; padding:20px;  box-sizing:border-box;  font-family:"Open Sans",sans-serif;}
.form-popup .close-btn{cursor:pointer; position:absolute; right:20px; top:20px; width:30px; height:30px; background:#222; color:#fff; font-size:25px; font-weight:600; line-height:30px; text-align:center; border-radius:50%;}
.form-popup.active .overlay{display:block;}
.popup.active .content { transition:all 300ms ease-in-out; transform:translate(-50%,-50%) scale(1);}
/* Responsive Table Examples */
  .tablegrid{ display:grid; grid-template-columns:1fr 1fr 2fr 2fr 1fr 2fr auto 1fr 1fr;}
  @media only screen and (min-width: 500px){
    .row{display:grid; grid-template-columns:1fr 2fr 2fr 2fr 1fr 2fr 2fr 1fr 1fr; }
  }
@media screen and (max-width: 500px) {
    .row {
        border-bottom: 3px solid #ddd;
  

        div::before {
            content: attr(data-label);
            float: left;
            padding-right: $baseline;
        }

        div {
            border-bottom: 1px solid #ddd;
    
            text-align: right;
        }

        &.tblheader {
            display: none;
        }
    }
}

/*SLIDER Example */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 48px!important;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  color:#ffffff;
  text-decoration:none;
  display:grid!important;
  align-content:center;
}
#box{
  display:grid; 
  grid-template-columns: 50px auto 50px; 
  margin:20px auto; 
  background-color:#3B4C56; 
  max-width:600px; 
  padding:50px; 
  min-height:300px; 
  justify-content:space-around; 
  align-content:center;
}
.countButton{color:#1FD4E4; font-size:2em;}