*{
  font-family: 'Baloo 2', cursive;
    box-sizing: border-box;
}

:root{
  --qtf-red:#882E4F;
  --qtf-red-light:#b43463;
  --dark-color:#343A40;
}



.backgroundImage{
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  height: 100%;

}

.dark-bg-2{
  background-color: var(--dark-color);
}

.dark-link{
  color: grey;
}

.dark-link:hover{
  color: rgb(161, 161, 161);
  cursor: pointer;
}


main{
  background-color: rgba(65, 65, 65, 0.616);
  min-height: 93vh;
}

.shadowed{
  -webkit-box-shadow: 0px 4px 11px 2px rgba(0,0,0,0.52);
-moz-box-shadow: 0px 4px 11px 2px rgba(0,0,0,0.52);
box-shadow: 0px 4px 11px 2px rgba(0,0,0,0.52);
}

body {
  margin-top: 3.5rem;
}

table{
  margin: 0 auto;
  width: 100%;
  clear: both;
  border-collapse: collapse;
  table-layout: fixed; 
}

td{
  overflow: hidden;
}

.name-link{
  color: white;
  
}

.submitBtn{
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
}


.name-link:hover{
  color: rgb(255, 166, 0);
}

.modal-title{
  color: #353535;
}

td a{
  color: black;
  display: flex;
  justify-content: start;
  overflow: hidden;
}

td a:hover{
  color: white;
}
 

.tableClasse tr:nth-child(4n+1), .tableClasse tr:nth-child(4n+2) {
  background: #3a3a3a !important;
}

.tableClasse tr:nth-child(4n), .tableClasse tr:nth-child(4n+3) {
  background: #292929 !important;
}

.noborder{
  border-bottom: 1px solid rgb(255, 198, 10) !important;
}

.noborderSuccess{
  border-bottom: 1px solid rgb(33, 163, 0) !important;
}



.bordered{
  border: 1px solid rgb(235, 229, 229);
}

.tableClass tr th{
  background: white;
}

.blue-color{
  color: #3699FF;
}

.dark-bg{
  background-color: #242E42 !important;
}

.blue-bg{
  background-color: #25235c !important;
  color:rgb(214, 207, 207);
}

.bg-marine{
  background-color: #25235c !important;
  color:rgb(223, 219, 0) ;
}

.bg-marine-light{
  background-color: rgb(58, 58, 58) !important;
  color:rgb(223, 219, 0) ;
}

.bg-marine-lighter{
  background-color: rgb(82, 82, 82) !important;
  color:rgb(223, 219, 0) ;
}


.bg-marine-light-alpha{
  background-color: rgba(58, 58, 58, 0.952) !important;
  color:rgb(223, 219, 0) ;
}

.bg-marine-light-alpha-2{
  background-color: rgba(58, 58, 58, 0.644) !important;
  color:rgb(223, 219, 0) ;
}

.bg-marine-lighter-alpha{
  background-color: rgba(82, 82, 82, 0.651) !important;
  color:rgb(223, 219, 0) ;
}

.ui-state-highlight{
  border:1px solid #a4e2f5 !important;
  background-color: #a4e0f3 !important;
  background-image: none !important;
}

.btn-black{
  border-radius: 2px;
  color:rgb(255, 255, 255) !important;
  background-color: #2E2E2E ;
}

.btn-black:hover{
  color: rgb(255, 230, 0) !important;
}

.btn-blue{
  border-radius: 2px;
  color:rgb(255, 255, 255) !important;
}

.btn-blue:hover{
  color: rgb(255, 230, 0) !important;
}

.btn-blue-qtf{
  border-radius: 2px;
  color:rgb(255, 255, 255) !important;
}

.btn-blue-qtf:hover{
  color: var(--qtf-red-light) !important;
}

.qtf-bg{
  background-color: var(--qtf-red) !important;
}
.blue-bg:hover{
  color: white;
}

h1, h2, h3, h4, h5, h6 {
  color: white;
}

.bg-steel {
  background-color: #e0ae08;
}

.site-header .navbar-nav .nav-link {
  color: #cbd5db;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

.right-shadow{
  background: rgb(1,1,1);
background: -moz-linear-gradient(90deg, rgba(1,1,1,0) 0%, rgba(37,37,37,0) 71%, rgba(41,41,41,0.21752450980392157) 86%, rgba(41,41,41,0.6460959383753502) 100%);
background: -webkit-linear-gradient(90deg, rgba(1,1,1,0) 0%, rgba(37,37,37,0) 71%, rgba(41,41,41,0.21752450980392157) 86%, rgba(41,41,41,0.6460959383753502) 100%);
background: linear-gradient(90deg, rgba(1,1,1,0) 0%, rgba(37,37,37,0) 71%, rgba(41,41,41,0.21752450980392157) 86%, rgba(41,41,41,0.6460959383753502) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#010101",endColorstr="#292929",GradientType=1);
}

.content-section {
  padding: 10px 20px;
  border: 2px solid #b4b4b4e5;
  border-radius: 3px;
  background-color: rgba(58, 58, 58,0.9);
  color: white;
}

.session-section{
  background: #ffffff;
  border: 1px solid #ddddddd3;
  border-radius: 3px;
  padding: 7px;
}

.article-title {
  color: rgb(70, 70, 70);
}

.article-title-qtf {
  color: rgb(70, 70, 70);
}

a.article-title:hover {
  color: #428bca;
  text-decoration: none;
}

a.article-title-qtf:hover {
  color: var(--qtf-red-light);
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
}

.article-img {
  height: 45px;
  width: 45px;
  margin-right: 6px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3;
  color: white;
}

.bg-lightGrey{
  background-color: rgba(211, 209, 209, 0.486);
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}

a:hover{
  text-decoration: none;
}

.article-link:hover{
  background-color: #d6d6d6;
  transition:background-color 0.3s linear;
}

input[type='checkbox'] {
  -webkit-appearance:none;
  width:20px;
  height:20px;
  background:white;
  border-radius:5px;
  border:2px solid #555;
}
input[type='checkbox']:checked {
  background: rgb(57, 117, 236);
}

.blue-container{
  background-color: #2F3B52;
  
}

.collapseHeader{
  
  height: 50px;
}

.collapseHeader:hover{
  cursor: pointer;
}

.bigHeader_v2{
  width: 13vw;
}

.bigHeader{
  transition: height 0.25s ease;
  height: 50px;
  overflow: hidden;
}

.collpaseLink{
  overflow: hidden;
}


.presence-col{
  text-align: center;
  color: white;
  font-weight: bold;
}

.bg-purple{
  background-color: #fc6868;
  color: rgb(0, 0, 0);
}

.bg-green{
  background-color: #54fd62be;
  color: rgb(0, 0, 0);
}


.btn-marine{
  border: 1px solid blue ;
  background-color: blue;
  color: white ;
  font-weight: bold;
}

.btn-qtf-red{
  border: 1px solid var(--qtf-red) ;
  background-color: var(--qtf-red) ;
  color: white ;
  font-weight: bold;
}

.btn-qtf-red:hover{
  background-color: var(--qtf-red-light) ;
  color: white !important;
}


.btn-marine:hover{
  background-color: #4642ad;
  color: white !important;
}


.bg-marinemix{
  background: rgb(41, 41, 41);
}

th{
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

.bg-orange{
  background: rgb(242,78,78);
background: linear-gradient(148deg, rgba(242,78,78,0.9542191876750701) 1%, rgba(255,134,0,1) 38%, rgba(252,176,69,1) 100%);
}

.bg-lightBlue{
  background: rgb(34,193,195);
background: linear-gradient(84deg, rgba(34,193,195,1) 0%, rgba(35,170,109,1) 53%, rgba(253,187,45,1) 100%);
}

.bg-lightGreen{
  background: rgb(35,170,109);
background: linear-gradient(71deg, rgba(35,170,109,1) 7%, rgba(83,210,173,1) 61%, rgba(85,150,230,1) 100%);
}

.bg-yellow{
  background: rgb(242,236,78);
background: linear-gradient(71deg, rgba(242,236,78,0.9542191876750701) 1%, rgba(255,203,0,1) 49%, rgba(252,176,69,1) 100%);
}

.bg-magenta{
  background: rgb(107,127,230);
background: linear-gradient(270deg, rgba(107,127,230,1) 0%, rgba(238,120,165,1) 40%, rgba(252,70,107,1) 100%);
}

.bg-pink{
  background: rgb(238,174,202);
background: linear-gradient(71deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
}

.bg-skyBlue{background: rgb(35,170,109);
  background: linear-gradient(71deg, rgba(35,170,109,1) 7%, rgba(83,210,143,1) 59%, rgba(85,150,230,1) 100%);
}

.bg-reservation{
  background: #f50057;
  /*border-bottom: 1px solid transparent !important;*/
  color: white;
}



.bg-training{
  background: rgb(35,170,109);
  border-bottom: 1px solid transparent !important;
  color: white;
}

.bg-blackBlue{
  background: rgb(64,64,64);
background: linear-gradient(58deg, rgba(64,64,64,1) 0%, rgba(106,106,106,1) 96%);
}
.bg-gold{
  background: rgb(183,134,40);
background: linear-gradient(58deg, rgba(183,134,40,1) 0%, rgba(219,165,20,1) 48%, rgba(238,182,9,1) 96%);
}

.bg-silver{
  background: rgb(112,112,111);
  background: linear-gradient(58deg, rgba(112,112,111,1) 0%, rgba(161,162,163,1) 41%, rgba(190,192,194,1) 96%);
}

.bg-bronze{
  background: rgb(128,74,0);
  background: linear-gradient(58deg, rgba(128,74,0,1) 0%, rgba(156,122,60,1) 48%, rgba(176,141,87,1) 96%);
}

.green40{
  color: #45DABE;
}

.elegant-color-dark{
  background-color: #292929;
}

.elegant-color{
  background-color: #2E2E2E;
}

.dark-color{
  background-color: #363636;
}


.shadowed2{
  box-shadow:
  0 7.9px 2.2px rgba(0, 0, 0, 0.022),
  0 15.6px 5.3px rgba(0, 0, 0, 0.031),
  0 23.6px 10px rgba(0, 0, 0, 0.037),
  0 33.5px 17.9px rgba(0, 0, 0, 0.043),
  0 50.5px 33.4px rgba(0, 0, 0, 0.052),
  0 104px 80px rgba(0, 0, 0, 0.07)
;

}

.white-link{
  color: white;
}
.white-link:hover{
  color: #18c5fa;
}

tbody tr:nth-child(even),tr{
  background-color: #292929 !important;
  color: white !important;
}

tbody tr:nth-child(odd){
  background-color: #3A3A3A !important;
  color: white !important;
}


.cell{
  height: 55px;
  width: 40px;
}

td a:hover{
  color: #18c5fa;
}

.flex-wrap-resp{
  flex-wrap: wrap;
}

.menu-button{
  width: 120px;
  height: 100px;
  background-color: #3A3A3A;
  color: var(--qtf-red);
  text-align: center;
  padding-top: 0.9em;
  border-radius: 3px;
}

.notification-item{
  border: 1px grey solid;
  padding: 10px;
  color: white;
}

.text-half-muted{
  font-size: 0.9em;
  color:#64b5f6;
}

#courtsTableContainer{
  height: 60vh;
}

@media only screen and (min-width: 1000px) {
  .customCanvas{
    height: 400px;
  }

  .customCanvasContainer{
    min-width: 800px; 
}
  .dropdown--menu{
    position: absolute; top: 48px; right: 0px; width: 200px;
  }
}

@media only screen and (min-width: 500px) {
  .center-large{
    display: flex;
    justify-content: center;
  }

  .justify-content-center-lg{
    justify-content: center;
  }

  .mobileOnly{
    display: none;
  }
  
}

@media only screen and (max-width:1000px){
  .center-large{
    overflow-x: scroll;
  }

}

#navbarProfileText{
  display: none;
}
#navbarProfileImg{
  display: block;
}


.desktopOnly{
  display: block;
}

.text-sm--right{
  text-align: center;
}


@media only screen and (max-width:800px){
  .overflow-scroll-md{
    overflow-x: scroll; 
  }
}

@media only screen and (max-width: 500px) {
  .mobileOnly{
    display: block;
  }

  .text-sm--right{
    text-align: end;
  }
  
  .desktopOnly{
    display: none;
  }

  #navbarProfileText{
    display: block;
  }
  #navbarProfileImg{
    display: none;
  }

  table tr th {
    font-size: 10px;
  }

  .center-stuff{
    justify-content: center;
    text-align: center;
    margin: 0;
  }

  .profile-pic{
    width: 100%;
  }


.flex-wrap-resp{
  flex-wrap: nowrap;
  overflow-x: scroll;
}

.overflow-scroll-sm{
  overflow-x: scroll; 
}



.menu-container{
  justify-content: center;
}
.menu-header{
  text-align: center;
}

#courtsTableContainer{
  height: 400px;
}
  
 
}



input[type=radio]:hover{
  border-color: #666666;
}
input[type=radio]:checked{
  border-color: #289646 !important;
}

input[type=radio] {
  position: relative;
  line-height: 24px;
  cursor: pointer;
  display: inline-block;
}