@font-face {
  font-family: 'urban-grotesque-regular';
  src: url("../fonts/urban-grotesk-regular.otf");
  /* IE9 Compat Modes */ }
@font-face {
  font-family: 'urban-grotesque-light';
  src: url("../fonts/urban-grotesk-light.otf");
  /* IE9 Compat Modes */ }
@font-face {
  font-family: 'urban-grotesque-bold';
  src: url("../fonts/urban-grotesk-bold.otf");
  /* IE9 Compat Modes */ }
@font-face {
  font-family: 'urban-grotesque-semi-bold';
  src: url("../fonts/urban-grotesk-semi-bold.otf");
  /* IE9 Compat Modes */ }

html, body { margin: 0px; padding: 0px; font-family: 'urban-grotesque-regular', Arial, Helvetica, sans-serif; background-color: #f3f3f3;}

img { border: 0px;}

.content table {width: 100%;}
.content table, .content td, .content th { font-size: 12px;}
.content table tr:nth-child(odd) {background-color: #f2f2f2;}
.content h1 { font-size: 32px; margin:0px; font-weight: bold; padding: 10px 0px;}
.content h2 { font-size: 26px; margin:0px; font-weight: bold; padding: 10px 0px;}
.content h3 { font-size: 20px; font-weight: normal; font-style: italic; margin: 6px 0px; padding: 0px;}
.content h4 { font-size: 18px; font-weight: bold; margin: 6px 0px; padding: 0px;}
.content h5 { font-size: 16px; font-weight: normal; font-style: italic; margin: 6px 0px; padding: 0px;}
.content h6 { font-size: 14px; font-weight: bold; margin: 3px 0px; padding: 0px;}


.content {width: 90%;margin: auto;max-width: 900px;position: relative;}


header {padding: 0 0; background: white; text-align: center;}
header .logo-banner {height: 90px; width: auto;}



.form-1-headline{ color: #595959; margin: 85px 0 25px 0; font-size: 35px; font-family: 'urban-grotesque-light';line-height: 1.5;}


#loginForm  {margin: auto; text-align: center;}
#loginForm input, .order-form input {	border: 0;	background-color: #ffffff;	text-align: center;	height: 50px; width: 100%;	max-width: 440px;	font-family: urban-grotesque-light;	font-size: 20px;	padding: 10px 10px 0 10px;	margin: 12px auto;}
#loginForm input, #loginForm button {box-sizing: border-box;}
#loginForm button {background: none;width: 100%;max-width: 289px;margin: 15px auto; font-size: 45px;}
#loginForm button:hover {background: #66cc99}

.order-form { text-align: center;}
.order-form input#zip {width: 160px; font-size: 46px;}
.order-form button {background: #66cc99; color: white;}
.order-form button:hover {background: #4DB082;}
.order-form .form-group {padding-bottom: 20px;}

.error {background: #c85c57; color: white; width: 100%;	max-width: 440px; margin: 0 auto; padding: 15px;}
.infobox{  background-color: #c4eaf8; margin: 0 auto; padding: 15px 30px; display: inline-block; border-radius: 4px;   color: #283c5f;}
.infobox a {color: #283c5f; text-decoration: underline;}
.infobox a:hover {text-decoration: none;}

.step-3 .table .row-1 {  min-height: 75px;  border-bottom: 1px solid darkgrey;}
.step-3 .table {  margin: 50px auto 0 auto; width: 100%; max-width: 500px; border: 1px solid darkgrey; line-height: 1.5;}
.step-3 .table-school-name {  font-family: urban-grotesque-light;  padding-top: 28px;  font-size: 18px;}
.step-3 p {padding: 0; margin: 0;}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {  position: relative;  width: 100%;  min-height: 1px;  padding-right: 15px;  padding-left: 15px;  box-sizing: border-box;}
.col-lg-4 {  -ms-flex: 0 0 33.333333%;  flex: 0 0 33.333333%;  max-width: 33.333333%;}
.step-3 .table-school-data, .step-3 .contact-name {  padding-top: 18px;}
.step-3 .table-school-data, .step-3 .contact-name, .step-3 .contact-email, .step-3 .contact-phone {  font-family: urban-grotesque-light;  font-size: 15px;}
.col-lg-8 {  -ms-flex: 0 0 66.666667%;  flex: 0 0 66.666667%;  max-width: 66.666667%;}
.row {  display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  margin-right: -15px; margin-left: -15px; text-align: left;}
.row p {padding: 0; margin: 0;}
.step-3 .row-1 { padding: 0 	15px;}
.row-2 {min-height: 140px; border-bottom: 1px solid darkgrey;}
.text-right {text-align: right;}
.step-3 .row-3 {text-align: left; padding-top: 25px; min-height: 125px;	}
.step-3 .row-3 .table-date {  font-size: 30px;  font-family: urban-grotesque-light;    }
.step-3 .row-3 .table-start {  font-family: urban-grotesque-light;  font-size: 18px;   }
.step-3 .row-3 .table-classes {  font-family: urban-grotesque-light;  font-size: 18px; }
.step-3 .row-3 p {padding: 0px 15px;}
.step-3 .row-4 {  border-top: 1px solid darkgrey; padding: 15px;}
.step-3 .row-5 {  border-top: 1px solid darkgrey; padding: 15px;}

.step-3 textarea {  margin: 20px auto 0 auto; min-width: 500px;  border: 0;  display: block;  padding: 15px;  height: 100px;  font-family: urban-grotesque-light;  resize: none;  box-sizing: border-box;}
.step-3 textarea.readonly {background: transparent; overflow: none; height: auto;}

 
  /* Admin */
  table.adt {border-collapse: collapse;}
  .content table.adt tr {background: white;}
  .content table.adt td, .content table.adt th {padding: 4px;}
  xtable.adt tr:nth-child(even) {background-color: #fff;}
  .content table.adt tr:nth-child(even) td {background-color: rgba(0, 0, 0, .05);}
  table.adt tr.lecture {background-color: #66F597;}
  table.adt tr.request {background-color: #FADF7E;}
  .row .legend {padding: 16px 0; font-size: 10px;}
  .row .legend .fa {font-size: 14px; margin: 0 2px 0 10px; position: relative; top: 2px;}
  .row .legend .lecture {color: #66F597;}
  .row .legend .request {color: #FADF7E;}
  
  .adm-pg {text-align: center; font-size: 12px; padding: 10px 0;}
  .adm-pg form{display: inline; margin-left: 16px;}
  .adm-pg a {color: black; text-decoration: none;}
  .adm-pg a.active {color: #DE6752; font-weight: bold;}
  
  .adm-btn { display: inline-block; padding: 2px 6px; background-color: #aaa; color: #333; border: none; border-radius: 4px; cursor: pointer; margin: 0px;  text-decoration: none; margin: 0px; font-size: 13px;}
  .adm-btn.active {background-color: #66F597;}
  .adm-btn:hover {background-color: #999;}
  .nobr {white-space: nowrap;}
  .col.filter {text-align: center; margin: 10px;	}
  .col.filter .adm-btn{ margin: 0 6px;}
  
  .adm-btns {text-align: center; margin: 20px 0;}
  .adv label {font-weight: bold;}
  
  .adm-inst-edit textarea {width: 100%; min-height: 100px;}
  .adm-inst-edit input {width: 100%;}
  
  .columnfilter select {max-width: 80px;}
  
  /* Style for the submit button */
  .submit-button {
    display: inline-block;
    padding: 12px 24px;
    font-size: 18px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  /* Hover effect for the submit button */
  .submit-button:hover {
    background-color: #45a049;
  }

  /* Style for other buttons */
  button {
    display: inline-block;
    padding: 12px 24px;
    font-size: 18px;
    background-color: #aaa;
    color: #333;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	margin: 4px 0;
  }

  /* Hover effect for other buttons */
  button:hover {
    background-color: #999;
  }
  
  table button {
	  padding: 2px 6px;
	  font-size: 13px;
	  margin: 0;
	  
  }
  
  
    /* Style for error messages */
  ul.error {
    list-style-type: none;
    margin: 10px 0;
    padding: 6px 10px;
  }

  ul.error li {
    font-size: 14px;
  }
  
footer {height: 50px;}