/* Colours 
Red: ce2127
Red darker: b11d22
Blue: #080e44
Grey: 6d6e72

Role Colours
#3d85c6
#e69138
#f1c232	
#6aa84f
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700;900&display=swap');

body, h1,h2,h3.h4,h5,h6,p,a {
  font-family: 'Roboto', sans-serif;
}

.log-in-form {
  border: 1px solid #cacaca;
  padding: 1rem;
  border-radius: 0;
}

.teamadmin .off-canvas h5 {
  background-color:#3d85c6;
}
.teammanager .off-canvas h5 {
  background-color:#e69138;
}
.trainingadmin .off-canvas h5 {
  background-color:#f1c232;
}
.teammember .off-canvas h5 {
  background-color:#6aa84f;
}

/* Sidebar CSS: ST 2022 */ 

.mr-logo {
    width: 60%;
    margin: 0 20% 1rem 20%;
    background-color: white;
    border-radius: 4px;
}
.off-canvas {
  background-color:#38393b; 
}
.off-canvas .menu a {
  color:white;
}
.off-canvas h5 {
  background-color:rgb(31, 31, 31);
  color:white;
  font-weight:bold;
  padding: 0.7rem 1rem;
}

.off-canvas .h6 {
  background-color:#b11d22;
  color:white;
  font-weight:bold;
  padding: 0.7rem 1rem;
  width: 100%;
  display: block;
  margin-top: 1rem;
  transition: background-color .50s ease-out,color .25s ease-out;
}
.off-canvas .h6:hover {
  background-color: rgba(0,75,171);
}

.off-canvas .accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a::after {
  border-color: #fff transparent transparent;
}


.title-bar {
  background-color: rgb(31, 31, 31);
  padding: 0.7rem;
}
.title-bar .title-bar-right a {
  background-color:#b11d22;
  color:#fff;
  font-weight:bold;
  padding: 5px 10px;
}

.main-content {
  padding:1rem;
}

.main-content .thumbnail {
  border-radius: 50%;
    width: 75%;
}

.main-content h1 {
  margin-bottom:2rem;
  font-weight: bold;
}

.button {
  background-color: #b11d22;
  transition: background-color .50s ease-out,color .25s ease-out;
  margin-top:5px;
  border-radius:4px;
}
.button:hover {
  background-color: rgba(0,75,171);
}


/* Responsive Tables: RA 2022 */ 
.responsive-card-table {
    border-collapse: collapse;
  }
  
  .responsive-card-table.unstriped tbody {
    background-color: transparent;
  }
  
  .responsive-card-table th {
    background-color: #e6e6e6;
  }
  
  .responsive-card-table tr,
  .responsive-card-table th,
  .responsive-card-table td {
    border: 1px solid #0a0a0a;
  }
  
  @media screen and (max-width: 640px) {

    .title-bar-right {
      display:none;
    }
    .responsive-card-table {
      
    }
    .responsive-card-table thead tr {
      position: absolute;
      top: -9999em;
      left: -9999em;
    }
    .responsive-card-table tr {
      border: 1px solid #0a0a0a;
      display: block;
    }
    .responsive-card-table tr + tr {
      margin-top: 1.5rem;
    }
    .responsive-card-table td {
      border: none;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-justify-content: flex-start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      border-bottom: 1px solid #0a0a0a;
      padding-left: 50%;
      position: relative;
    }
    .responsive-card-table td:before {
      content: attr(data-label);
      display: inline-block;
      font-weight: bold;
      line-height: 1.5;
     /* margin-left: -100%; */
      width: 100%;
      position: absolute;
      z-index: 1;
      left: 10px;
    }
    .responsive-card-table td:after {
      content: '';
      position: absolute;
      background: #e6e6e6;
      width: 45%;
      height: 95%;
      left: 1px;
      top: 1px;
      z-index: 0;
    }
  }


  @media print {
    .title-bar{
 display: none;
    }
  .main-content{
    width: 100%; 
    margin: 0; 
    float: left;
  }

  .main-content > .grid-container { float: left; font-size: 0.8rem;}

  @page { margin: 1cm; }

   #my-info{display: none;} 

   .off-canvas-content.has-reveal-left {margin-left: 0px;}

   .position-left.reveal-for-large ~ .off-canvas-content {margin-left: 0px!important;}

  .main-content > form {display: none;}

   #data {display: none;}
    }

  .version{
    color: #fff;
    padding: 0.4rem;
    bottom: 0px;
    position: absolute;
    background-color: #080e44;
    width: 100%;
    font-size: 0.7rem;
  }