/* Float four columns side by side */
.column {

  float: left;
/*  width: 140px;

*/
  background-color: #ffffff;
  background: white;
  padding: 0.625rem;
  width: 3.125rem;
 /* width: 140px; */
    display: table;
    margin-bottom: 0.625rem;
}


/* -------------  Bootstrap 3.6. -------------------- */
.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-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-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-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left
}



.col-sm-1  {width: 8.33%;}
.col-sm-2  {width: 16.66%;}
.col-sm-3  {width: 25%;}
.col-sm-4  {width: 33.33%;}
.col-sm-5  {width: 41.66%;}
.col-sm-6  {width: 50%;}
.col-sm-7  {width: 58.33%;}
.col-sm-8  {width: 66.66%;}
.col-sm-9  {width: 75%;}
.col-sm-10 {width: 83.33%;}
.col-sm-11 {width: 91.66%;}
.col-sm-12 {width: 100%;}



.col-auto {
  flex: 0 0 auto;
  width: auto;
}


  @media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
  }
  @media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
  }





.col-2w {
  width: 50%;
}
.col-3w {
  width: 33.33%;
}
.col-4w {
  width: 25%;
}
.col-8w {
  width: 12.5%;
}






.rotatedCol {
  width: 1.5rem !important;
  margin:0px !important;
  padding:0px !important;
  max-width: 1.6rem;

  /* text-align: center  !important; */
  /* transform-origin: 0 -80% 200; */
  transform-origin:middle right;
transform: rotate( -30deg);
border: solid !important;

border-width: 1px!important;
border-color: #fff    !important;

vertical-align: middle;
/* text-align: right !important; */
border-color: #fff !important;
font: 11px Rubik;
z-index: -1;

}

.resultsCol {
    text-align: center ;
      width:1.6875rem !important;
      font: 12px Rubik !important;
      margin:0.0625rem !important;
      padding:0.0625rem !important;
      vertical-align:middle !important;
      border-color: white   !important;
      border-width: 1px!important;
      color: #737373;

}









/* ---------resources ---------------- */

.sowCol {
        border-color: white  !important;
        border-width: 0.3125rem !important;
        border-style: solid !important;
        text-align: left;
        z-index: 100;
        background: var(--gray100);
        padding:0.3125rem !important;
        margin:0.625rem !important;
        color:  var(--gray900);
        line-height: 1.5 !important;
        font-size: 1.05rem ;

}

.sowColTitle {
  font-size: 1.1rem ;
  font-weight: bold;
}
.rsowCol-no {
  width:0.625rem !important;

}

.sowCol-ta {
  width:60% !important;
}

.sowCol-lo {
  width:20% !important;

}

.sowCol-ptn {
  width:20% !important;
  max-width: 20%!important;

}


.sowCol-link {
    font-weight: bold !important;
    color: var(--linkcol) !important;
}

.fileCol {
  background: white;
  border-width: 1.5rem!important;
  font-weight: bold !important;
    line-height: 1.1 !important;
}


.sctnCol{
  font-size: 2.5rem  !important;
  font-weight: bold !important;

  height: 3rem !important;

  padding: 0.3rem !important;
  /* margin: 1px !important; */
  border-color: transparent;
  border-width: 0;
  align: center;
  color:  var(--p700);
}
/* -------------------- */


.nameCol {
    width:10rem !important;

    max-height: 0.625rem !important;
    font: 1rem !important;
    margin:0px !important;
    padding:0px !important;
    vertical-align:middle !important;
    border-color: #fff    !important;
    border-width: 0px!important;
    text-align: left;
    z-index: 100;
}

.descCol {
    text-align: left;
      vertical-align:middle !important;
    width:4.3rem !important;
    font-size: 0.625rem;
    margin:1px !important;
    padding:1px !important;
    border-color: #fff    !important;
    border-width: 1px!important;
    z-index: 0;
}


.descColL {
    text-align: middle;
      vertical-align:middle !important;
    width:2.2rem !important;
    margin:1px !important;
    padding:1px !important;
    /* height: 8px !important; */
    border-color: #fff    !important;
    border-width: 1px!important;
    z-index: 0;
    border-style: hidden;
}

.descColLM {
width:3.2rem !important;
}

.descColLL {
  font: 1.6rem

}

.colDOB{
  width:6.25rem !important;
  text-align: center;
}


.colGender{
  width:1.5 !important;
    text-align: center;
}


.colNotes{
  width:25rem !important;
  text-align: left;
}






.classCol {
    text-align: left;
      vertical-align:middle !important;font-size: 0.85rem;
    margin:0px !important;
    padding:0px !important;
    /* height: 8px !important; */
}


.topicCol {
    text-align: center;
    width:6.25rem;
}




  .two-column-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem 1.25rem;
    align-items: center;
    width:100%;
  }

  .two-column-form label {
    justify-self: end;
    padding-right: 0.3125rem;
  }

  .two-column-form input[type="text"],
  .two-column-form input[type="number"] {
    width: 100%;
    max-width: 12.5rem;
    box-sizing: border-box;
  }
    .two-column-form textarea {
    width: 50%;
    
    box-sizing: border-box;
  }