.col-md-offset-4 {
    margin-left: 33.33333333%;
}

.checkbox-lg .custom-control-label::before,
.checkbox-lg .custom-control-label::after {
    top: .8rem;
    width: 1.55rem;
    height: 1.55rem;
}

.bg-gradient2-primary {
    background: #2d2587 !important;
    background: linear-gradient(45deg, #4638c2 0%, #2d2587 100%) !important;
    border-color: #2d2587 !important
}

.bg-gradient2-secondary {
    background: #fff !important;
    background: linear-gradient(45deg, #d1d2d3 0%, white 100%) !important;
    border-color: #fff !important
}

.bg-gradient2-success {
    background: #2e8c47 !important;
    background: linear-gradient(45deg, #45a164 0%, #2e8c47 100%) !important;
    border-color: #2e8c47 !important
}

.bg-gradient2-info {
    background: #4280b4 !important;
    background: linear-gradient(45deg, #4799eb 0%, #4280b4 100%) !important;
    border-color: #4280b4 !important
}

.bg-gradient2-warning {
    background: #dd9124 !important;
    background: linear-gradient(45deg, #e1a82d 0%, #dd9124 100%) !important;
    border-color: #dd9124 !important
}

.bg-gradient2-danger {
    background: #c14f4f !important;
    background: linear-gradient(45deg, #d16767 0%, #c14f4f 100%) !important;
    border-color: #c14f4f !important
}

.bg-gradient2-light {
    background: #fff !important;
    background: linear-gradient(45deg, #e8e8e8 0%, white 100%) !important;
    border-color: #fff !important
}

.bg-gradient2-dark {
    background: #292a2b !important;
    background: linear-gradient(45deg, #4c4f54 0%, #292a2b 100%) !important;
    border-color: #292a2b !important
}

.bg-gradient3-primary {
    background: #1d97c2 !important;
    background: linear-gradient(45deg, #31b3e0 0%, #1d97c2 100%) !important;
    border-color: #1d97c2 !important
}

.bg-gradient3-secondary {
    background: #bac1c8 !important;
    background: linear-gradient(45deg, #d6dbde 0%, #bac1c8 100%) !important;
    border-color: #bac1c8 !important
}

.bg-gradient3-success {
    background: #41af67 !important;
    background: linear-gradient(45deg, #60c483 0%, #41af67 100%) !important;
    border-color: #41af67 !important
}

.bg-gradient3-success:hover {
    background: #41af67 !important;
    background: linear-gradient(45deg, #41af67 0%, #60c483 100%) !important;
    border-color: #41af67 !important
}


.bg-gradient3-info {
    background: #4ebada !important;
    background: linear-gradient(45deg, #78cae2 0%, #4ebada 100%) !important;
    border-color: #4ebada !important
}

.bg-gradient3-info:hover {
    background: #4ebada !important;
    background: linear-gradient(45deg, #4ebada 0%, #78cae2 100%) !important;
    border-color: #4ebada !important
}

.bg-gradient3-warning {
    background: #edb100 !important;
    background: linear-gradient(45deg, #ffc721 0%, #edb100 100%) !important;
    border-color: #edb100 !important
}

.bg-gradient3-warning:hover {
    background: #edb100 !important;
    background: linear-gradient(45deg, #edb100 0%, #ffc721 100%) !important;
    border-color: #edb100 !important
}

.bg-gradient3-danger {
    background: #f75453 !important;
    background: linear-gradient(45deg, #f98483 0%, #f75453 100%) !important;
    border-color: #f75453 !important
}

.bg-gradient3-light {
    background: #e1e7eb !important;
    background: linear-gradient(45deg, white 0%, #e1e7eb 100%) !important;
    border-color: #e1e7eb !important
}

.bg-gradient3-dark {
    background: #24282c !important;
    background: linear-gradient(45deg, #3a4248 0%, #24282c 100%) !important;
    border-color: #24282c !important
}

.bg-gradient3-dark:hover {
    background: #474646 !important;
    background: linear-gradient(45deg, #474646 0%, #797979 100%) !important;
    border-color: #474646 !important
}

.bg-gradient-primary {
    background: #1f1498 !important;
    background: linear-gradient(45deg, #321fdb 0%, #1f1498 100%) !important;
    border-color: #1f1498 !important
}

.bg-gradient-secondary {
    background: #fff !important;
    background: linear-gradient(45deg, #c8d2dc 0%, #fff 100%) !important;
    border-color: #fff !important
}

.bg-gradient-success {
    background: #1b9e3e !important;
    background: linear-gradient(45deg, #2eb85c 0%, #1b9e3e 100%) !important;
    border-color: #1b9e3e !important
}

.bg-gradient-info {
    background: #2982cc !important;
    background: linear-gradient(45deg, #39f 0%, #2982cc 100%) !important;
    border-color: #2982cc !important
}

.bg-gradient-warning {
    background: #f6960b !important;
    background: linear-gradient(45deg, #f9b115 0%, #f6960b 100%) !important;
    border-color: #f6960b !important
}

.bg-gradient-danger {
    background: #d93737 !important;
    background: linear-gradient(45deg, #e55353 0%, #d93737 100%) !important;
    border-color: #d93737 !important
}

.bg-gradient-light {
    background: #fff !important;
    background: linear-gradient(45deg, #e3e8ed 0%, #fff 100%) !important;
    border-color: #fff !important
}

.bg-gradient-dark {
    background: #212333 !important;
    background: linear-gradient(45deg, #3c4b64 0%, #212333 100%) !important;
    border-color: #212333 !important
}

.spanner {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: block;
    text-align: center;
    height: 300px;
    color: #FFF;
    transform: translateY(-50%);
    z-index: 1000;
    visibility: hidden;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(137, 196, 244, 0.8);
    z-index: 2;
    visibility: hidden;
}

.loader,
.loader:before,
.loader:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out;
}

.loader {
    color: #ffffff;
    font-size: 10px;
    margin: 80px auto;
    position: relative;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.loader:before,
.loader:after {
    content: '';
    position: absolute;
    top: 0;
}

.loader:before {
    left: -3.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.loader:after {
    left: 3.5em;
}

@-webkit-keyframes load7 {
    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }
    40% {
        box-shadow: 0 2.5em 0 0;
    }
}

@keyframes load7 {
    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }
    40% {
        box-shadow: 0 2.5em 0 0;
    }
}

.show {
    visibility: visible;
}

.spanner, .overlay {
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.spanner.show, .overlay.show {
    opacity: 1
}

.red {
    color: #F44336 !important;
}

.green {
    color: #43aa0a !important;
}

.blue-grey {
    color: #607D8B !important;
}

.text-bold-600 {
    font-weight: 600;
}

#thermal-print {
    /*box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5);*/
    padding: 0mm;
    margin: 0 5mm;
    width: 60mm;
    background: #FFF;
}

.centered {
    text-align: center;
    align-content: center;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

.thermal-footer {
    box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5);
    padding: 2mm;
    margin: 0 auto;
    width: 60mm;
    background: #c5cdf5;
}

.table-item {
    display: table !important;
    margin: 0 auto !important;
    width: 100%;
    border-collapse: collapse;
}

#thermal-print #top {
    min-height: 100px;
}

#thermal-print #bot {
    min-height: 50px;
}

#thermal-print .info {
    display: block;
    margin-left: 0;
}

#thermal-print #legalcopy {
    margin-top: 3mm;
}

.thermal-print-table-footer {
    font-size: 12px;
    color: black;
}

.ref {
    padding-bottom: 5px;
    color: black;
}

.app-header.bg-light .navbar-brand {
    opacity: 100;
}

.col-1-5 {
    width: 20%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

#crudTable.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before, #crudTable.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before {
    background-color: rgba(99, 194, 222, .5);
    color: #636161;
    font-family: 'LineAwesome';
    width: 14px;
    content: "+";
    font-size: 15px;
    box-shadow: none;
    margin-top: 0;
    border: none;
    padding: 2px;
}

/* Adjust the z-index of the modal backdrop */
.modal-backdrop {
    z-index: 1040 !important; /* Ensure it's higher than the modal */
}

/* Adjust the z-index of the modal */
.modal {
    z-index: 1050 !important; /* Ensure it's higher than the backdrop */
}

.court-select {
    background-color: white;
    padding: 15px 32px;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin: 6px 4px;
    cursor: pointer;
    border-radius: 12px;
    color: #5a5a5a;
}

.court-select-selected {
    background-color: #4cb7ff;
    padding: 15px 32px;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin: 6px 4px;
    cursor: pointer;
    border-radius: 12px;
    color: #5a5a5a;
}

.time-select {
    background-color: white;
    padding: 8px 8px;
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    margin: 2px 4px;
    cursor: pointer;
    border-radius: 12px;
    color: #5a5a5a;
}

input:checked + label > .time-select {
    background-color: #4cb7ff !important;
}

input:disabled + label > .time-select {
    background-color: gray !important;
}

.vitka-orange {
    background-color: #f7741a;
}
.vitka-orange:hover {
    background-color: #E65C00 !important;
    color: white !important;
}

.col-xs-equal,
.col-sm-equal,
.col-md-equal,
.col-lg-equal {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-equal {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-equal {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-equal {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-equal {
        width: 20%;
        float: left;
    }
}