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

  float: left;
/*  width: 140px;

*/
  background-color: #ffffff;
  background: white;
  padding: 10px;
  width: 50px;
 /* width: 140px; */
    display: table;
    margin-bottom: 10px;
}




  @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:28px !important;
  /* height: 12px !important; */
  margin:0px !important;
  padding:0px !important;
  max-width: 34px;

  /* 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:27px !important;
      font: 12px Rubik !important;
      margin:1px !important;
      padding:1px !important;
      vertical-align:middle !important;
      border-color: white   !important;
      border-width: 1px!important;
      color: #737373;
      /* max-height: 12px; */
      min-width: ;

}









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

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

}

.sowColTitle {
  font-size: 1.1rem ;
  font-weight: bold;
}
.rsowCol-no {
  width:10px !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: 20px!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:160px !important;

    max-height: 10px !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:70px !important;
    font: 10px Rubik;
    margin:1px !important;
    padding:1px !important;
    /* height: 8px !important; */
    border-color: #fff    !important;
    border-width: 1px!important;
    z-index: 0;
}


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

.descColLM {
  font: 15px Rubik;
width:50px !important;
}

.descColLL {
  font: 25px Rubik;

}

.colDOB{
  width:100px !important;
  text-align: center;
}


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


.colNotes{
  width:400px !important;
  text-align: left;
}






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


.topicCol {
    text-align: center;
    width:100px;
}




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

  .two-column-form label {
    justify-self: end;
    padding-right: 5px;
  }

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