@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville);
body {
    background-color:#2b6777  !important;
    
 }
 #sidebar{
  display: block;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: -ms-autohiding-scrollbar
 }
 ::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgb(255, 255, 255);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color:rgb(16, 109, 62);
  -webkit-box-shadow: inset 0 0 6px rgba(90,90,90,0.7);
}
 .signup:hover {
    background-color: rgb(1, 48, 92, 0.753);
    color: rgb(255, 255, 255);
}

.signup {
    background-color: rgba(255, 217, 0, 0.836);
    color: black;
}
.active>.page-link{
  background-color: rgba(236, 225, 160, 0.753)  !important;
  color: #03a9f4;
  border-color: #dcdcdc;

 }

.card.attend{
  background-color:#004656  !important;
  color: #ffffff;

}
  /* table {
    table-layout: fixed;
  }
  p:hover, h1:hover, a:hover {
    background-color: rgb(0, 0, 0);
  }
  a, u {
    text-decoration: none;
  }
  td {
    overflow: unset;
    text-overflow: ellipsis;
    word-wrap: break-word;
  } */
  /* table.dataTable thead .sorting, 
table.dataTable thead .sorting_asc, 
table.dataTable thead .sorting_desc {
   color : rgb(116, 116, 47);
} */

.form-control:focus, .form-select:focus, .btn-close:focus { 
  box-shadow: none;
}
.form-control-xs {
  height: calc(2.3em) !important;
  padding: .125rem .25rem !important;
  font-size: 0.8rem;
  line-height: 1.5;
 }
 nav .active a{
  background-color: #039fdd !important;
 }
 .offcanvas-body {
  overflow-y: hidden;
}
.offcanvas-header {
margin-left: -1px;
margin-right: -1px;

}


div .dtp-picker,
div .dtp-actual-num,
div .dtp-actual-day {
  display: none
}

.dtp > .dtp-content > .dtp-date-view > header.dtp-header {
  height: 40px;
  background-color: #0080d0;
}

.dtp .p10 > a {
  color: #0080d0;
}

.dtp div.dtp-actual-year {
  color: #BAE3FF
}

.dtp div.dtp-date,
.dtp div.dtp-time {
  background-color: #03a9f4
}

.dtp div.dtp-actual-month {
  margin-bottom: 10px;
}

@media (min-width:320px)  { thead {
  font-size:1.6vw;
}
  td {
  font-size:1.6vw;
} }
@media (min-width:480px)  { thead {
  font-size:1.6vw;
}
  td {
  font-size:1.6vw;
} }
 @media (min-width:801px)  { thead {
  font-size:1vw;
}
  td {
  font-size:1vw;
} }
@media (min-width:1025px) { thead {
  font-size:1vw;
}
  td {
  font-size:1vw;
} }
@media (min-width:1281px) { thead {
  font-size:1.1vw;
}
  td {
  font-size:1.1vw;
} }

.odd{
  color:rgb(70, 70, 70);
  }
.even{
  color:rgb(110, 92, 40);
  
 }
 .table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
   background-color: rgba(255, 192, 110, 0.034);  
 }

 .pagination{
  margin-left: 40px;
 }

 @media (min-width:320px) and (min-width:481px)and(min-width:641px)  { 
  .card{
    font-size:0.3vw;
  }
  }
@media (min-width:961px) and  (min-width:1025px)  and(min-width:1281px) {
 
  .card{
    font-size:1.3vw;
  }}
  @media print
{
html, body { height: auto; }
.dt-print-table, .dt-print-table thead, .dt-print-table th, .dt-print-table tr {border: 0 none !important;}
}

.footer
{
    height: 50px;
    background-color: black;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
}

 btn-group .dt-buttons {
  float:none;  
  text-align:center;
}
@media(max-width: 575px) {
  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
      justify-content: center;
      flex-wrap: wrap;
      font-size:0.3vw;

  }
}

.select2-container .select2-choice, .select2-result-label {
  font-size: 1.5em;
  height: 50px; 
  overflow: auto;
}

.select2-arrow, .select2-chosen {
  padding-top: 6px;
}
/* form-style */

  .form-control:focus{border-color: #5c72b8;  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); -webkit-box-shadow: none;} 
 .has-error .form-control:focus{box-shadow:0 3px 10px rgba(255, 255, 255, 0.2); -webkit-box-shadow:h-offset v-offset blur;}
 
 .plus:hover{
  color:rgb(43, 255, 0) !important;
  transition: transform .2s; /* Animation */
font-size:105% ;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.342);

}
.plus:hover .plusicon{
  color: rgb(255, 187, 0);
  transition: 0.9s;
  transform: rotateY(180deg);
}
/* .plus:hover:after .plusicon{
   
  transition: 0.9s;
  transform: rotateY(180deg);
} */
 

.plus{cursor: pointer;}
.fa-bars:hover{
  color: rgb(255, 187, 0);
  transition: 0.9s;
  transform: rotateY(180deg);
}
.lobtn:hover .fa-sign-out{
   color: crimson !important;
  transition: 0.9s;
 }
  .lobtn:hover{
   background-color: crimson !important;
}
.fa-bars:hover .offcanvas.hiding, .offcanvas.show, .offcanvas.showing {
  visibility: visible;
}

 
.offcanvas {
  background: #006266 !important;
  max-width: 250px;
}
.list-group-item-action:active {
   background-color: #9b7c29;
}
.list-group-item-action:hover {
 
  background-color: #cfa63699;
  color: #fab900 !important;
}
.btn-close  {
   box-shadow: 0 0 0 0.25rem rgba(155, 40, 59, 0.993);
 }
.stylefont{
font-size: 1rem;
color: rgb(255, 174, 0);
 
  font-family: 'Libre Baskerville';}
  .fa_with_bg{
  

    cursor: pointer;
    background: rgba(0, 0, 0, 0.336);
     height: 30px;
     width: 30px;
  }
  .fa_with_bg:hover{
    cursor: pointer;
    background: rgba(255, 191, 0, 0.849);
     height: 30px;
     width: 30px;
  }
  .fa_with_bg:hover .xicon{
    color: crimson !important;
    transition: 0.9s;
    transform: rotateY(180deg);
    }
    .xicon{
      margin-left: -5px;
      }
      
      /* datebuttons */
      a.ui-datepicker-prev.ui-corner-all {
           background-image: url("https://cdn0.iconfinder.com/data/icons/essential-pack-01/24/left-512.png");
          background-size: contain;
          background-position: center;
      }
      a.ui-datepicker-next.ui-corner-all {
        background-image: url("https://cdn0.iconfinder.com/data/icons/essential-pack-01/24/left-512.png");
        transform: rotate(180deg);
        background-size: contain;
       background-position: center;
   }
    
      
      .ui-datepicker-prev span.ui-icon:focus,
      .ui-datepicker-next span.ui-icon:focus {
          outline: none !important;
      }
            /* end  datebuttons */
                  /* new form button  */
                  div.dt-buttons #newForm{
  float: right !important; 
}

                                    /* endnew form button  */