/*
    LOGO TEXT
    #
    BLUE
    https://www.color-hex.com/color/237597
    #237597     RGB     71  120 233

    dark blue color #183153

    GREEN
    https://www.color-hex.com/color/8ec53f
    #8ec53f  RGB     142 197 63
    grey: 878787
    dark: #3b3b3b
    red: dc3545
    orange: #ffa500

NEW
Red #e4293e
Orange #fe8e38
Green #78c217
Blue #34b39e

*/

/*MOBILE*/
@media screen and (max-width: 767px) {
    .site-login {
        width: 100%;
    }
    .navbar {
        min-height: 50px;
/*        padding-bottom: .75rem !important;*/
    }
    .navbar-brand {
        padding: 5px 0px;
        font-size: 1rem; 
        font-weight: bold; 
        color: #fff;

        width: 75%;
        overflow: hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }
    .navbar-dark .navbar-toggler {
      color: rgba(255,255,255,.55);
      border-color: rgba(255,255,255,.1);
      border: transparent;
    }
    .navbar-collapse {
      flex-basis: 100%;
      flex-grow: 1;
      align-items: center;
      background-color: #3b3b3b;
    }
    .mobile {
        display: inline-block;
        font-size: 1rem;
    }
    .noMobile {
        display: none;
    }
    .table-responsive table {
        width: 100% !important;
    }
    table {
        font-size: .8rem;
    }
    #grid-pjax table thead tr th {
        font-size: .8rem !important;        
    }
    .event-form .justify-content-center {
/*        flex-direction: column;*/
    }
    .tooltip{
        display: none !important;
    }
    .mobileGridHeader {
        width: 40px;
        text-overflow:ellipsis;
        white-space:nowrap;
        overflow:hidden;
    }
    .codeLabel {
        font-size: .8rem !important;
    }
    .dashboard .summaryBox {
        min-width: 5rem;
    }

}

/*TABLET*/
@media screen and (max-width: 991px) {
}

/*DESKTOP*/
@media (min-width: 768px) {
    .site-login {
        width: 30rem;
    }
    .mobile-break {
        display: none;
    }
    .navbar-expand-md .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
        justify-content: right;
    }
    .navbar-brand {
        padding: 0px;
        font-size: 1rem; 
        font-weight: bold;
        color: #fff;
        width: 16rem;
        overflow: hidden;
        white-space: break-spaces;
        text-overflow:ellipsis;
    }
    .mobile {
        display: none;
    }
}


body {
    font-size: .9rem;
    font-family: Maven Pro;
}

.h1, h1 {
    font-size: 2.5rem;
/*    color: #444;*/
    font-family: "proxima-nova", "proxima nova", "helvetica neue", "helvetica", "arial", sans-serif;
    font-weight: 200;
}
.h2, h2 {
    background-color: #777;
    color: #fff;
    padding:  10px;
    font-size: 1.2rem;
}
.h5, h5 {
/*    color: #444;*/
    font-weight: 300;
    font-size: 1.7rem;
    font-family: "proxima-nova", "proxima nova", "helvetica neue", "helvetica", "arial", sans-serif;
}
.h6, h6 {
  font-size: 1.1rem;
/*  color: #444;*/
  font-weight: 400;
}
a {
    color: inherit;
    text-decoration: underline;
}
.pagination a {
    padding: .5rem .5rem;
}
label {
/*    color: #777;*/
}
.login-page-font {
    color: #666;
}
.reset-links {
    padding: .8rem 0 0 0;
}

#moreNavItems .dropdown-menu[data-bs-popper] {
  left: -125px;
}
#profileNavItems .dropdown-menu[data-bs-popper] {
  left: -275px;
}
#devNavItems .dropdown-menu[data-bs-popper] {
  left: -122px;
}
.nav-item {
    line-height: 2.5;
}
.nav-link {
    color: #444;
}
.nav-link.active {
    background-color: #666;
/*    background-color: #34b39e;*/
}
.navbar-expand-md .navbar-nav .nav-link {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  border-radius: 0rem;
}
.rowColor {
/*    used for row class bg*/
    background-color: #efefef;
}

.display-none {
    display: none !important;
}

.display-flex {
    display: flex !important;
}
.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
/*    border-width: 2px !important;*/
}
.alert-danger {
    color: #842029;
    background-color: #f8d7da !important;
    border-color: #f5c2c7;
}
.toast {
    box-shadow: 0 0.25rem 1rem rgba(0,0,0,.15);
}

/*//////////////////////////////////  LOADING SPINNER  //////////////////////////////////*/
    /*Put spinner in middle of screen*/
    .spinner {
        display: none;
        position: fixed;
        z-index: 9999;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
    /* Make grey bg on whole screen */
    /*.spinner:before {
        content: '';
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.3);
    }*/
    .lds-dual-ring {
      /*display: inline-block;*/
      width: 64px;
      height: 64px;
    }
    .lds-dual-ring:after {
      content: " ";
      display: block;
      width: 46px;
      height: 46px;
      margin: 1px;
      border-radius: 50%;
      border: 5px solid #fff;
      border-color: #fff transparent #fff transparent;
      animation: lds-dual-ring 1.2s linear infinite;
    }
    @keyframes lds-dual-ring {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    #overlay {
      position: fixed;
      display: none;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.5);
      z-index: 1040;
    }
/*//////////////////////////////////  /LOADING SPINNER  //////////////////////////////////*/

/*///////////////////////////////////////////  BUTTONS  ////////////////////////////////////////*/
/*    bs5 switch*/
    .form-check-input:checked {
        background-color: #34b39e;
        border-color: #34b39e;
    }
/*    bs5 radio btn */
.btn-check:active + .btn-outline-primary, .btn-check:checked + .btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active {
  color: #fff;
  background-color: #34b39e;
  border-color: #34b39e;
}
    .btn-link {
        color: #444;
        font-size: inherit;
        text-decoration: none;
    }
    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
      color: #fff;
      background-color: #34b39e;
    }
    .btn-primary {
      color: #fff;
      background-color: #34b39e;
      border-color: #34b39e;
      min-width: 6rem;
    }
    .btn-primary:hover {
      color: #fff;
      background-color: #878787;
      border-color: #878787;
      opacity: .9;
    }
    .btn-primary:active, .btn-primary.focus {
      color: #fff;
      background-color: #34b39e !important;
      border-color: #34b39e !important;
      box-shadow: 0 0 0 0.0rem rgba(38, 143, 255, 0.5);
    }
    .btn-primary:focus, .btn-primary.focus {
      color: #fff;
      background-color: #34b39e;
      border-color: #34b39e;
      box-shadow: 0 0 0 0.0rem rgba(38, 143, 255, 0.5);
    }
    .btn-outline-primary {
      color: #878787;
      border-color: #878787;
    }
    .btn-outline-primary:hover {
      color: #fff;
      background-color: #878787;
      border-color: #878787;
      opacity: .9;
    }

    .btn-primary-sm {
      color: #fff;
      background-color: #34b39e;
      border-color: #34b39e;
      min-width: 100px;
    }
    /*bootbox buttons similar to primary*/
    .bootbox-accept {
      color: #fff;
      background-color: #34b39e !important;
      border-color: #34b39e !important;
      min-width: 150px;
      min-height: 50px;
      font-size: 1.1rem;
      line-height: 2;
    }
    .bootbox-accept:hover {
      color: #fff;
      opacity: .9;
    }
    .bootbox-accept:active, .bootbox-accept.focus {
      color: #fff;
      background-color: #34b39e !important;
      border-color: #34b39e !important;
      box-shadow: 0 0 0 0.0rem rgba(38, 143, 255, 0.5);
    }
    .bootbox-cancel {
      color: #fff;
      background-color: #878787;
      border-color: #878787;
      min-width: 150px;
      min-height: 50px;
      font-size: 1.1rem;
      line-height: 2;
    }
    .bootbox-cancel:hover {
      color: #fff;
      background-color: #878787;
      border-color: #878787;
      min-width: 150px;
      min-height: 50px;
      font-size: 1.1rem;
      line-height: 2;
      opacity: .9;
    }

    ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
      color: red;
      opacity: 1; /* Firefox */
    }

    :-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: red;
    }

    ::-ms-input-placeholder { /* Microsoft Edge */
      color: red;
    }

/*    ////////////////////////////////////////////////////////////////*/

    .editBtn {
        min-width: 4rem;
        max-height: 2rem;
        margin: 0 .25rem;
        /*background-color: #878787;
        border-color: #878787;
        color: #fff;*/
    }
    .cancelBtn {
        display: none;
        min-width: 4rem;
        max-height: 2rem;
        margin: 0 .25rem;
    }
    .deleteBtn {
        min-width: 4rem;
        max-height: 2rem;
        margin: 0 .25rem;
    }
    .updateBtn {
        display: none;
        min-width: 4rem;
        max-height: 2rem; /* section details save button needs this  */
        margin: 0 .25rem;
    }
    .saveBtn {
        display: none;
        min-width: 4rem;
        max-height: 2rem; /* section details save button needs this  */
        margin: 0 .25rem;
    }
    .goBtn {
        line-height: 1; margin-left: 5px; 
/*        min-height: 46px !important;*/
/*        height: 46px; */
        min-width: 40px;
    }
    .iconBtn {
        width: 30px;
        height: 30px;
        background: transparent;
        border: 0;
        outline: none !important;
        font-size: large;
        cursor: pointer;
        color: #8596a8;
        text-align: center;
    }
    .iconBtn:hover {
        color: #8596a8;
        opacity: .8 !important;
    }
    .allIconBtn {
        width: 30px;
        height: 30px;
        background: transparent;
        border: 0;
        outline: none !important;
        font-size: .9rem;
        cursor: pointer;
        color: #8596a8;
    }
    .iconBtnBig {
        width: 3rem;
        height: 3rem;
        background: transparent;
        border: 0;
        outline: none !important;
        font-size: large;
        cursor: pointer;
        color: #8596a8;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .iconBtnBig:hover {
        opacity: .8 !important;
    }
    .slotStatusBtn {
        width: 25px;
        height: 25px;
        background: transparent;
        border: 0;
        outline: none !important;
        cursor: pointer;
        color: #8596a8;
        font-size: 1.25rem;
    }
    .slotStatusBtnSample {
        cursor: default;
    }
    .userSlotBtn {
        width: 25px;
        height: 25px;
        background: transparent;
        border: 1px solid transparent;
        outline: none !important;
        cursor: pointer;
        color: #8596a8;
        font-size: 1.25rem;
        padding: 0;
    }

    .userSlotInactive {
        cursor: not-allowed !important;
        opacity: .5;
    }

    .tabBtn {
        min-width: 7.5rem;
        border-radius: 0; 
        box-shadow: 0 0 0 0rem rgb(13 110 253 / 25%) !important;
    }
    .tabBtn:hover {           
        background-color: rgb(108 117 125 / 75%) !important;        
    }
    .tabBtnActive {
        color: #fff;
        background-color: #34b39e;
        border: 1px solid #34b39e;
        box-shadow: 0 0 0 0rem rgb(13 110 253 / 25%) !important;
    }
    .tabBtnActive:hover {
        color: #fff;
        opacity: .8;
    }
    .tabBtnInActive {
        color: #34b39e;
        background-color: #fff;
        border: 1px solid #34b39e;
        border-radius: 0;
        box-shadow: 0 0 0 0rem rgb(13 110 253 / 25%) !important;
    }
    .tabBtnInActive:hover {
        color: #fff;
        opacity: .8;
    }

    .emptyTab {
        border-bottom-color: #dee2e6;
        border-top-color: #fff;
        border-right-color: #fff;
        border-left-color: #fff;
    }

    .tooltipBtn {
        /*width: 40px;*/
        /*height: 40px;*/
        background: transparent;
        border: 0;
        outline: none !important;
        /*font-size: x-large;*/
        cursor: pointer;
        color: #8596a8;
    }
    .tooltipBtn:hover {
        opacity: .8 !important;
    }

    .inlineBlock {
        display: inline-block !important;
    }

/*///////////////////////////////////////////  /BUTTONS  ////////////////////////////////////////*/


/*///////////////////////////////////////////  COPY BUTTON  ////////////////////////////////////////*/
.copy-button {
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    outline: none;
    /* margin: 0 .15rem;*/
    font-size: .75rem !important;
    color: #fff;
    background-color: #34b39e;
    padding: .1rem .5rem;
    border: 1px solid #34b39e;
    margin: 0 .5rem;
}
.copy-button:focus {
    box-shadow: 0 0 0 0rem rgba(60,153,110,.5)
}
.tip {
    background-color: #263646;
    padding: 0 10px;
    line-height: 20px;
    position: absolute;
    border-radius: 4px;
    z-index: 100;color: #fff;
    font-size: .7rem;
    animation-name: tip;
    animation-duration: .6s;
    animation-fill-mode: both
}
.Xtip:before {
    content: "";
    background-color: #263646;
    height: 10px;width: 10px;
    display: block;
    position: absolute;
    transform: rotate(45deg);
    top: 15px;
    left: 17px
}
#copied_tip {
    animation-name: come_and_leave;
    animation-duration: 1s;
    animation-fill-mode: both;
/*    bottom: 26px;*/
/*    left:2px*/
}
/*///////////////////////////////////////////  /COPY BUTTON  ////////////////////////////////////////*/

/*colors for status buttons*/
.green {
    color: #34b39e;
}
.statusOk {
    color: #34b39e;
}
.red {
    color: #dc3545;
}
.orange {
    color: orange;
}
.grey {
    color:  grey;
}

.greenBtn {
    color: #34b39e;
}
.redBtn {
    color: #ff0000;
}
.orangeBtn {
    color: orange;
}
.greyBtn {
    color:  #878787;
}

.availableCheckBox {
    color: #8ec53f;
}
.notAvailableCheckBox {
    color: #ff0000;
}
.bookedCheckBox {
    color:  #878787;
}
.processingCheckBox {
    color: orange;
}

.warning {
    color: #ffa500;
    font-weight: 500;
}
.modal-warning-header {
    color: #dc3545;
    font-weight: 500;
}
.delete-warning {
    color: #dc3545;
    font-weight: 500;
}
.card {
    margin: 1rem 0 1.5rem 0;
/*    border: 1px solid rgba(0,0,0,.3);*/
/*    min-height: 10rem;*/
/*    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);*/
/*    border-radius: 2px;*/
}

/*************************************************  TABLES  *************************************************/
    /*gridview tables*/

    #grid-pjax {
        margin-top: 15px;
        overflow: scroll;
    }
    #grid-pjax table thead tr th {
/*        background-color: #3b3b3b;*/
        font-size: 1rem;
        font-weight: normal !important;
        color: #676767;
        text-transform: uppercase;
        border-top: 1px solid transparent;
    }
    table td {
        vertical-align: middle;
    }
    table thead a {
        color: inherit;
/*        font-weight: normal;*/
        text-decoration: none;
    }
    table thead a:hover {
/*        color: #fff;*/
    }

    table tbody tr:hover {
/*        cursor: pointer;*/
        background-color: rgba(0, 0, 0, 0.1) !important;
    }
    .hoverPointer {
       cursor: pointer;
    }
    

    .kv-table-header {
        background-color: #3b3b3b;
        font-size: 1.1rem;
        font-weight: normal;
        color: #fff;
    }
    .kv-table-header a {
        text-decoration: none;
    }
    .kv-table-header th {
        font-weight: normal;
    }
    .kv-sort-link.asc::after, .kv-sort-link.desc::after {
        content: "";
        color: #fff;  
    }
    .table-bordered th, .table-bordered td {
      border: 0px solid #fff;
      vertical-align: middle;
    }
    .kv-grid-table tbody td {
        padding: .2rem .5rem;
        vertical-align: middle;
    }

    .rotate45 {
      transform: rotate(-45deg);
      /* Legacy vendor prefixes that you probably don't need... */
      /* Safari */
      -webkit-transform: rotate(-45deg);
      /* Firefox */
      -moz-transform: rotate(-45deg);
      /* IE */
      -ms-transform: rotate(-45deg);
      /* Opera */
      -o-transform: rotate(-45deg);
      /* Internet Explorer */
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
    .timeSlotHeading {
        font-size: 0.65rem;
        width: 30px;
        min-height: 60px;
        text-align: center;
        padding-top: 8px;
    }
    .slotsTable {
        font-size: .85rem;
        width: 100%;
    }
    .slotsTable tbody {
        border-top: 0px !important;
    }
    .slotsTable th {
        padding: 8px 0px 0 0px;
        color: inherit;
        background-color: transparent;
    }
    .slotsTable tbody td {
        padding: 0 .25rem !important;
        vertical-align: middle;
/*        text-align: center;*/
        height: 31px;
    }
    .slotChecktd {
        padding: 0px !important;
/*        text-align: center;*/
    }
    /*table column details */
    .slotsTable .checkbox {
        width: 30px;
    }
    .slotsTable .slotTime {
        width: 80px;
    }
    .slotsTable .parentDetails {
        width: 250px;
    }
    .myBookingCheckbox {
        border: 1px solid yellow;
        border-radius: 0.25rem;
        color: orange;
    }
    /*Table with green border*/
    .event-status-table {
        width: 100%;
    }
    .event-status-table .statsLabel {

    }
    .event-status-table .tableValue {
        font-weight: bold;
        font-size: 1.1rem;
    }

    #teachers-preview-table thead tr {
        border-bottom: 1px solid #878787;
    }
    #teachers-preview-table th {
        padding: 0 .3rem;
    }

    #teachers-preview-table td {
        padding: 0 .3rem;
    }

    /*    sticky first column for mobile*/
    .tscroll {
        overflow-x: scroll;
        margin-left: 8rem; /* make this same as td below */
    }

    .tscroll table td:first-child {
        position: absolute;
        left: 1rem; /* account for padding of card body */
        width: 8rem; /* make this same as tscroll above */
        height: 31px;
        padding: .25rem !important;
        overflow: hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }

/*    .tscroll td, .tscroll th {*/
/*      border-bottom: dashed #888 1px;*/
/*    }*/
    /*.tscroll .headcol:before {
      content: ' ';
    }*/



/*************************************************  /TABLES  *************************************************/


/*//////////////////////////////////////  MODAL-BOOTBOX  ////////////////////////////////////*/
    .statsLabel {
        text-align: right;
    }
    /*bsAlert/Confirm*/
    .modal-header .close {
        padding: .8rem 1rem;
        margin: -1rem -1rem -1rem auto;
        font-size: 2.5rem;
        transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
        border: 0;
        color: #777;
    }
    /*Modal*/
    .modal-header .btn-close {
        padding: .8rem 1rem;
        margin: -1rem -1rem -1rem auto;
        font-size: 1.5rem;
/*        background: transparent;*/
        border: 0;
        color: #777;
    }
    .btn-close:focus {
      outline: 0;
      box-shadow: 0 0 0 0rem rgba(13,110,253,.25);
      opacity: 1;
    }
    .modal-footer {
        justify-content: center;
    }

    .modal-confirm-text {
        text-align: center;
/*        margin: 1.5rem;*/
        font-size: 1.5rem;
/*        border: 1px solid;*/
        padding: 1rem;
    }
    .modal-continue {
        margin-top: 1rem;
    }
    .bootbox-body {
        font-size: 1.2rem;
    }
    

/*//////////////////////////////////////  /MODAL-BOOTBOX  ////////////////////////////////////*/

.slider.slider-horizontal {
  width: 100% !important;
  height: 30px !important;
}
.slider-handle {
  position: absolute;
  width: 30px !important;
  height: 30px !important;
  background-color: red;
  background-image: -webkit-linear-gradient(top, #34b39e 0%, #34b39e 100%) !important;
  background-image: linear-gradient(to bottom, #34b39e 0%, #34b39e 100%) !important;
  background-repeat: repeat-x;
  filter: none;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  opacity: 0.8;
  border: 0px solid transparent;
  margin: 0px 0px 0px 0px;
}
.kv-date-picker {
/*    border-radius: 0px !important;*/
    border-color: #676767 !important;
}
.krajee-datepicker {
    border-left: 1px solid #676767 !important;
}
.form-group {
/*    margin-bottom: 5px;*/
}
.form-control {
/*    border-radius: 0rem;*/
/*    line-height: 2rem;*/
/*    color: #595959;*/
}
.form-control:focus {
/*    color: #212529;*/
/*    background-color: #fff;*/
/*    border-color: #34b39e;*/
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(71 120 233 / 45%) !important;
/*    box-shadow: 0 0 0 0.25rem rgb(142 197 63 / 45%) !important;*/
}

/*/////////////////////////////////  SELECT2  /////////////////////////////////*/
    .select2-dropdown {
/*        border-radius: 0px;*/
/*        background-color: rgba(0, 0, 0, 0.1) !important;*/
    }
    .select2-container .select2-search--inline .select2-search__field {
      box-sizing: border-box;
      border: none;
      font-size: 100%;
      margin-top: 5px;
      margin-left: 5px;
      padding: 0;
      max-width: 100%;
      resize: none;
/*      height: 28px !important;*/
      vertical-align: bottom;
      font-family: sans-serif;
      overflow: hidden;
      word-break: keep-all;
/*      line-height: 2 !important;*/
      margin-left: .75rem !important;
      font-size: .8rem !important;
    }
    .select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__choice {
      color: #555;
      background: #efefef;
      border: 1px solid #efefef !important;
      border-radius: 0rem !important;
      cursor: default;
      width: auto;
      display: inline-block;
      margin: 0.5rem 0 0 0.5rem !important;
      padding: 0.18rem 0.25rem .18rem 0.6rem !important;
      font-size: 1rem;
      line-height: 1.25rem !important;
    }
    .select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__choice__remove {
      border: none;
      background: none;
      box-shadow: none;
      outline: none;
      float: right;
      font-size: 1.8rem;
      font-weight: 700;
      line-height: 1rem;
      color: #000;
      text-shadow: 0 1px 0 #fff;
      opacity: 0.5;
      padding: 0 .2rem 0 0.2rem;
      margin-left: 4px;
    }
    .select2-container--krajee-bs5 .select2-selection {
      box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075) !important;
      background-color: transparent !important;
      border: 1px solid #ced4da;
/*      border-radius: 0rem !important;*/
      color: inherit !important;
      outline: 0;
      transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
/*      line-height: 2 !important;*/
/*      min-height: 2.9rem;*/
      font-size: 1rem;
    }
/*    li items in dropdown*/
    .select2-container--krajee-bs5 .select2-results__option[aria-selected] {
/*        background-color: rgba(0, 0, 0, .9) !important;*/
/*        background-color: #34b39e !important;*/
        background-color: #626262 !important;
        color: #eee !important;
/*      border-radius: 0;*/
/*      line-height: 2.5;*/
/*      text-align: center;*/
/*      font-size: 1rem;*/
    }

/*    hover li item*/
    .select2-container--krajee-bs5 .select2-results__option--highlighted[aria-selected] {
      background-color: #34b39e !important;
      color: #fff !important;
/*      line-height: 2.5;*/
    }

    /*active selected with green glow*/
    .select2-container--krajee-bs5.select2-container--open:not(.select2-container--disabled) .select2-selection, .select2-container--krajee-bs5:not(.select2-container--disabled) .select2-selection:focus {
        border-color: inherit !important;
/*        border-bottom-color: rgb(142 197 63);*/
        box-shadow: 0 0 0 0.25rem rgba(142, 197, 63, 0.25);
    }
    /*surrounding box of dropdown*/
    .select2-container--krajee-bs5:not(.select2-container--disabled) .select2-dropdown {
/*      border-color: inherit;*/
      border-color: rgba(255, 255, 255, .7) !important;
      box-shadow: 0 0.375rem 0.75rem 0.2rem rgba(71, 120, 233, 0.25);
      overflow-x: hidden;
      margin-top: -1px;
      border-radius: 0.2rem;
/*      background-color: rgba(0, 0, 0, .9) !important;*/
/*      background-color: #34b39e;*/
      background-color: #626262;
      border-top: 1px solid;
    }
    /*search box in the dropdown*/
    .select2-container--krajee-bs5 .select2-search--dropdown .select2-search__field {
        box-shadow: inset 0 0px 0px rgb(0 0 0 / 8%);
        background: #626262 url("/images/search.png") right 0.625rem top 0.625rem no-repeat !important;
/*        background: #34b39e url("/images/search.png") right 0.625rem top 0.625rem no-repeat !important;*/
        border: 1px solid #ced4da;
        border-radius: 2px;
        color: inherit !important;
        line-height: 2;
/*        background-color: rgba(0, 0, 0, .9) !important;*/
/*        background-color: #34b39e;*/
    }
    .select2-container--krajee-bs5 .select2-results > .select2-results__options {
      max-height: 350px;
      overflow-y: auto;
    }
    .select2-container--krajee-bs5 .select2-selection--single .select2-selection__rendered {
        color: inherit !important;
        padding: 0;
    }
/*/////////////////////////////////  /SELECT2  /////////////////////////////////*/


/*/////////////////////////////////  TYPEAHEAD  /////////////////////////////////*/
.tt-scrollable-menu .tt-menu {
  max-height: 20rem;
  overflow-y: auto;
}
/*/////////////////////////////////  /TYPEAHEAD  /////////////////////////////////*/

.view-div {
    font-size: 1.2rem;
}
.event-heading {
    background-color: #777;
    color: #fff;
    padding: 10px 0;
    font-size: 1.8rem;
}
.section-heading {
    margin: 2.5rem 0 0 0;
    padding: 5px 0;
}
.section-header {
    text-transform: uppercase;
    color: #676767;
    text-align: center;
}
.general-header {
    text-transform: uppercase;
/*    color: #676767;*/
}
.event-message-box {
    min-height: 5rem;
    border: 1px solid #666;
    padding: .5rem;
    border-radius: .25rem;
}

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #34b39e;
}

/*top row with title and add button*/
.heading-add-row {
    margin: 0rem 0 1rem 0;
}
/*quick add button boxes*/
.add-form-div {
    display: none;
    margin: 0 auto; 
    margin-bottom: 1rem; 
    max-width: 40rem;
}
.header-row {
    margin-bottom: 1rem;
}
.transparentBorderTop {
    border-top: transparent;
}
.updateDiv {
    display: none;
}


.valueBox {
    font-weight: bold;
    font-size: 1.1rem;
    text-align: center;
/*    background-color: #efefef;*/
    border-radius: .25rem;
    min-height: 3rem;
    display:flex;
    align-items:center;
    justify-content: center;
}

.bootstrap-timepicker-widget dropdown-menu open {
  --rgb: 0, 0, 0;
  --alpha: 0.125;
}
.bootstrap-timepicker-widget dropdown-menu open {
    background-color: rgba(var(--rgb), var(--alpha));
}
.bootstrap-timepicker-widget table td input {
    padding: .375rem 0rem !important;
}
.summaryBoxWrapper {
    padding: .25rem;
    text-align: center;
}
.summaryBox {
  --rgb: 0, 0, 0;
  --alpha: 0.125;
}
.summaryBox {
    background-color: rgba(var(--rgb), var(--alpha));
    position: relative;
    min-width: 8rem;
    max-width: 11rem;
    min-height: 8rem; 
    border-width: .2rem !important;
    border-radius: .25rem;
    margin: 0 auto;
}
.summaryBoxValue {
    padding: .25rem;
    font-weight: bold;
    text-align: center;
    border-radius: .25rem;
    min-height: 3rem;
    width: 100%;
    position: absolute;
    top: 45%;
    transform: translate(0, -50%);
}
.summaryBoxValueFontSize1 {
    font-size: 1.1rem;
}
.summaryBoxValueFontSize2 {
    font-size: 1.8rem;
}
.summaryBoxHeader {
    padding: .25rem;
    opacity: 0.5;
    text-transform: uppercase;
    /*    color: #676767;*/
    text-align: center;

    width: 100%;
    position: absolute;
    bottom: 0;
}

.dashboardValueBox {
  --rgb: 0, 0, 0;
  --alpha: 0.125;
}
.dashboardValueBox {
    margin: 0 auto;
    max-width: 10rem;
    text-align: center;
    background-color: rgba(var(--rgb), var(--alpha));
    border-radius: .25rem;
    border-width: .2rem !important;
    min-height: 3rem;
    align-items:center;
    justify-content: center;

}
.dashboardValueBox .value {
    font-size: 2rem;
    font-weight: bold;
}
.vertical-align {
    display:flex;
    align-items:center;
/*    justify-content:center; */
}
.center-align {
    display:flex;
    align-items:center;
    justify-content:center; 
}
.form-floating {
  margin-top: .5rem;
}

.socketStatus {
    position: fixed;
    top: 7px;
    left: 7px;
    z-index: 1500;
}
.socketStatusDisconnected {
    background-color: #ff0000;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}
.socketStatusConnected {
    background-color: #00ff00;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}
.dropzone {
  background: transparent;
}
.codeLabel {
    font-size: 1.2rem; 
    font-weight: 500;
}
.offcanvas {
    visibility: inherit !important;
}