/*replace with correct Ruby version above */
/*----------------------------------------------
Zen grid config
---------------------------------------------- */
.zg-tuition-container:before,
.zg-class-container:before,
.zg-image-container:before,
.zg-reg-container:before {
  content: "";
  display: table;
}
.zg-tuition-container:after,
.zg-class-container:after,
.zg-image-container:after,
.zg-reg-container:after {
  content: "";
  display: table;
  clear: both;
}

.zg-tuition-classes {
  float: left;
  width: 100%;
  margin-left: 0%;
  margin-right: -100%;
  padding-left: 10px;
  padding-right: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.zg-tuition-classes,
.zg-tuition-payment,
.zg-class-col1,
.zg-class-col2,
.zg-reg-col1,
.zg-reg-col2,
.zg-reg-col2-narrow,
.zg-reg-col3,
.zg-reg-col3-narrow {
  float: left;
  width: 100%;
  margin-left: 0%;
  margin-right: -100%;
  padding-left: 10px;
  padding-right: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* --- tuition page control --*/
@media (min-width: 1200px) {
  .zg-tuition-classes {
    float: left;
    width: 688px;
    margin-left: 0px;
    margin-right: -100%;
    padding-left: 7px;
    padding-right: 8px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .zg-tuition-payment {
    float: left;
    width: 550px;
    margin-left: 635px;
    margin-right: -100%;
    padding-left: 7px;
    padding-right: 8px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .zg-tuition-classes {
    float: left;
    width: 60%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .zg-tuition-payment {
    float: left;
    width: 40%;
    margin-left: 60%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .zg-tuition-payment .reportSubBox {
    margin: 10px 20px 10px 0;
    width: 90%;
    max-width: 350px;
  }
  .zg-tuition-payment p.textBlock {
    max-width: 340px;
  }
  .zg-tuition-payment p.reportTitle {
    max-width: 340px;
  }
}
@media (min-width: 300px) and (max-width: 959px) {
  .zg-tuition-classes {
    clear: left;
  }
  .zg-tuition-classes .box {
    width: 90%;
    margin: 10px 0px 10px 0px;
  }

  .zg-tuition-payment {
    clear: left;
  }
  .zg-tuition-payment .reportSubBox {
    width: 90%;
    margin: 10px 0px 10px 0px;
    /*max-width: 400px; */
  }
}
/* --- class edit page control --*/
@media (min-width: 1200px) {
  .zg-class-col1 {
    float: left;
    width: 52.77778%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .zg-class-col2 {
    float: left;
    width: 52.77778%;
    margin-left: 52.77778%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .zg-class-col1 {
    float: left;
    width: 40.71429%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .zg-class-col2 {
    float: left;
    width: 54.28571%;
    margin-left: 40.71429%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
@media (min-width: 750px) and (max-width: 899px) {
  .zg-class-col2 {
    float: left;
    width: 47.5%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .zg-class-col2,
  .zg-class-col2-narrow {
    float: left;
    width: 47.5%;
    margin-left: 47.5%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
@media (min-width: 1px) and (max-width: 749px) {
  .zg-class-col2,
  .zg-reg-col2-narrow {
    clear: left;
  }
}
/* --- class registration page control --*/
@media (min-width: 1200px) {
  .zg-reg-col1 {
    float: left;
    width: 42.22222%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .zg-reg-col2 {
    float: left;
    width: 42.22222%;
    margin-left: 42.22222%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .zg-reg-col2-narrow {
    float: left;
    width: 31.66667%;
    margin-left: 42.22222%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .zg-reg-col3 {
    float: left;
    width: 21.11111%;
    margin-left: 63.33333%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .zg-reg-col3-narrow {
    float: left;
    width: 21.11111%;
    margin-left: 63.33333%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .zg-reg-col1 {
    float: left;
    width: 54.28571%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .zg-reg-col2 {
    float: left;
    width: 54.28571%;
    margin-left: 54.28571%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .zg-reg-col2-narrow {
    float: left;
    width: 40.71429%;
    margin-left: 40.71429%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .zg-reg-col3,
  .zg-reg-col3-narrow {
    clear: left;
    float: left;
    width: 27.14286%;
    margin-left: 40.71429%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
@media (min-width: 750px) and (max-width: 899px) {
  .zg-reg-col1 {
    float: left;
    width: 47.5%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .zg-reg-col2,
  .zg-reg-col2-narrow {
    float: left;
    width: 47.5%;
    margin-left: 47.5%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .zg-reg-col3,
  .zg-reg-col3-narrow {
    clear: left;
    float: left;
    width: 47.5%;
    margin-left: 47.5%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
@media (min-width: 1px) and (max-width: 749px) {
  .zg-reg-col2,
  .zg-reg-col2-narrow,
  .zg-reg-col3,
  .zg-reg-col3-narrow {
    clear: left;
  }

  #superBox,
  #totalBox {
    max-width: 400px;
  }
}
/*--------------------- TABLES ----------------*/
.zg-table-container:before,
.zg-nested-table-container:before {
  content: "";
  display: table;
}
.zg-table-container:after,
.zg-nested-table-container:after {
  content: "";
  display: table;
  clear: both;
}

.zg-nested-table-left {
  float: left;
  width: 100%;
  margin-left: 0%;
  margin-right: -100%;
  padding-left: 10px;
  padding-right: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 20%;
}

.zg-nested-table-right {
  float: left;
  width: 100%;
  margin-left: 100%;
  margin-right: -100%;
  padding-left: 10px;
  padding-right: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 80%;
  margin-left: 20%;
}

.zg-td-title,
.zg-td-input,
.zg-td-three,
.zg-td-four,
.zg-td-five,
.zg-td-six,
.zg-td-all {
  float: left;
  width: 100%;
  margin-left: 0%;
  margin-right: -100%;
  padding-left: 10px;
  padding-right: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.zg-td-double {
  float: left;
  width: 200%;
  margin-left: 0%;
  margin-right: -100%;
  padding-left: 10px;
  padding-right: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.zg-table-container.hidden,
.zg-tr.hidden,
.zg-td-title.hidden,
.zg-td-input.hidden {
  display: none;
}

.zg-td-title.field_title,
.zg-td-title.report-title {
  padding: 0px 5px 8px 10x;
  min-width: 100px;
  /*text-align: right; //asg */
  vertical-align: top;
  font-size: .9em;
}

.report-image {
  padding: 0px 10px 8px 10x;
  width: 200px;
}

.zg-td-title.report-title {
  color: #744B8D;
  font-weight: bold;
  margin-bottom: 5px;
}

.zg-td-input.field_input,
.zg-td-input.report-input {
  padding: 0px 0px 8px 10px;
  min-width: 280px;
  vertical-align: top;
  font-size: .8em;
}

.zg-td-double.help_text {
  padding: 0px 0px 8px 10px;
  max-width: 80%;
  font-style: italic;
  font-size: .8em;
}

.zg-td-check1 {
  float: left;
  width: 100%;
  margin-left: 0%;
  margin-right: -100%;
  padding-left: 10px;
  padding-right: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.zg-td-check2 {
  float: left;
  width: 100%;
  margin-left: 0%;
  margin-right: -100%;
  padding-left: 10px;
  padding-right: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.zg-table-container.abc_reg {
  max-width: 750px;
  margin-top: 1rem;
}

.zg-table-container.gift_cert {
  margin-top: 1rem;
}

@media (min-width: 650px) {
  .zg-table-container.rsvp {
    width: 75%;
  }

  .zg-tr {
    clear: left;
    width: 100%;
  }

  .zg-td-title {
    float: left;
    width: 31.66667%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .zg-td-input {
    float: left;
    width: 63.33333%;
    margin-left: 31.66667%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  #cardinfo .zg-td-title {
    float: left;
    width: 47.5%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  #cardinfo .zg-td-input {
    float: left;
    width: 47.5%;
    margin-left: 47.5%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .zg-td-all {
    float: left;
    width: 95%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .user_dash .zg-td-title,
  #class_payment .zg-td-title {
    float: left;
    width: 15.83333%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .user_dash .zg-td-title.field_title {
    text-align: left;
  }

  .user_dash .zg-td-input,
  #class_payment .zg-td-input {
    float: left;
    width: 63.33333%;
    margin-left: 15.83333%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  #studentEdit .zg-td-three,
  .dropin_attend .zg-td-title {
    float: left;
    width: 15.83333%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  #studentEdit .zg-td-four,
  .dropin_attend .zg-td-input {
    float: left;
    width: 79.16667%;
    margin-left: 15.83333%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .formBox.report .zg-td-title.startDate,
  .formBox.report .zg-td-title.elementOne,
  .bug_form .zg-td-title,
  .abc_reg .zg-td-title,
  .gift_cert .zg-td-title {
    float: left;
    width: 15.83333%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .abc_reg .zg-td-input,
  .gift_cert .zg-td-input,
  .bug_form .zg-td-input {
    float: left;
    width: 79.16667%;
    margin-left: 15.83333%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .formBox.report .zg-td-input.startDate,
  .formBox.report .zg-td-input.elementOne {
    float: left;
    width: 31.66667%;
    margin-left: 15.83333%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .formBox.report .zg-td-input.studentName {
    float: left;
    width: 63.33333%;
    margin-left: 15.83333%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .formBox.report .zg-td-title.endDate,
  .formBox.report .zg-td-title.elementTwo {
    float: left;
    width: 15.83333%;
    margin-left: 47.5%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .formBox.report .zg-td-input.endDate,
  .formBox.report .zg-td-input.elementTwo {
    float: left;
    width: 31.66667%;
    margin-left: 63.33333%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .zg-td-check1 {
    float: left;
    width: 31.66667%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .zg-td-check2 {
    float: left;
    width: 31.66667%;
    margin-left: 31.66667%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .formBox.report {
    min-width: 600px;
    max-width: 750px;
  }

  #staff_signin_report .formBox.report {
    width: 700px;
  }
}
@media (min-width: 650px) {
  /*
  .report.threeAcross {
    width: 650px;
  }
*/
  .report.threeAcross .zg-td-title.report-title {
    float: left;
    width: 19%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .report.threeAcross .zg-td-input.inputOne {
    float: left;
    width: 57%;
    margin-left: 19%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .report.threeAcross .zg-td-input.inputTwo {
    float: left;
    width: 19%;
    margin-left: 76%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
@media (min-width: 650px) {
  #ymReport .zg-td-title {
    float: left;
    width: 23.75%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  #ymReport .zg-td-input {
    float: left;
    width: 71.25%;
    margin-left: 23.75%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  #ymReport .zg-td-title.elementOne {
    float: left;
    width: 23.75%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  #ymReport .zg-td-input.elementOne {
    float: left;
    width: 23.75%;
    margin-left: 23.75%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  #ymReport .zg-td-title.elementTwo {
    float: left;
    width: 23.75%;
    margin-left: 47.5%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  #ymReport .zg-td-input.elementTwo {
    float: left;
    width: 23.75%;
    margin-left: 71.25%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .zg-td-input.report-input {
    min-width: fit-content;
  }
}
@media (min-width: 1px) and (max-width: 649px) {
  .zg-tr .zg-td-title,
  .zg-tr .zg-td-input,
  .zg-tr .zg-td-three,
  .zg-tr .zg-td-four,
  .zg-tr .zg-td-check1,
  .zg-tr .zg-td-check2,
  .zg-tr .zg-td-image,
  .zg-tr .zg-td-double,
  .zg-tr .zg-td-all {
    clear: left;
  }

  .zg-nested-table-right {
    clear: left;
    margin-left: 10px;
  }

  .report-image {
    width: 75px;
    height: 75px;
  }

  .zg-td-title.field_title,
  .zg-td-title.report-title,
  #studentEdit .zg-td-three.field_title {
    text-align: left;
  }
}
.formBox select {
  text-overflow: ellipsis;
  max-width: 95%;
  -ms-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
}