$gap: 0.5rem;
$paddingTable: 0.5rem;
$fieldHeight: calc(1.313em + 0.75rem + 2px);

.row {
    margin-left: -$gap;
    margin-right: -$gap;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
    padding-left: $gap;
    padding-right: $gap;
}

.custom-select {
    padding: 0 1.75rem 0 0.5rem;
}

.custom-control-inline:last-child,
.custom-control-inline:only-child {
    margin-right: 0;
}


.form-group {
    margin-bottom: 0.75rem;
}

.form-control {
    padding: 0.5rem;
}

.form-control, .custom-select, .btn, .input-group-text {
    height: $fieldHeight;
}

textarea.form-control {
    min-height: calc(#{$fieldHeight} * 2);
}

.list-group-item {
    padding: 0.75rem;
}

.btn {
    line-height: 1.25;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.btn .b-icon.bi, .nav-link .b-icon.bi, .dropdown-toggle .b-icon.bi, .dropdown-item .b-icon.bi, .input-group-text .b-icon.bi {
    font-size: 100%;
}

label {
    margin-bottom: 3px;
}

.card {
    border-color: #dee2e6;
}

.card-body {
    border-radius: 0.25rem;
}

.card-body, .tab-content {
    padding: 0.75rem;
    background: #FFF;
}

.pagination .page-link {
    padding: 0.5rem 0.75rem;
    height: 35px;
    line-height: 1;
}

.alert {
    padding: 0.5rem 1rem;
}

.dropdown-menu {
    font-size: 0.9rem;
    box-shadow: 3px 3px 8px -3px rgb(0 0 0 / 50%);
}

.dropdown-header, .dropdown-item {
    padding: 0.5rem 1rem;
    line-height: 1.2;
}

.b-dropdown-text {
    padding: 0.25rem 1rem;
    line-height: 1.2;
}


body .table.b-table>tfoot>tr>[aria-sort=none], body .table.b-table>thead>tr>th[aria-sort=none]{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e")!important; }
body .table.b-table>tfoot>tr>[aria-sort=ascending], body .table.b-table>thead>tr>th[aria-sort=ascending]{ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='%23007bff' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e") !important; }
body .table.b-table>tfoot>tr>[aria-sort=descending], body .table.b-table>thead>tr>th[aria-sort=descending]{ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='%23007bff' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e") !important; }

.custom-control-label::before {
    top: 0.3rem;
}


.b-calendar .b-calendar-inner {
    min-width: auto;
}
.b-form-btn-label-control.btn-group > .dropdown-menu {
    padding: 0;
}

.b-calendar .b-calendar-grid {
    border: none;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
}

.b-calendar output {
    border: none;
    background: #f8f9fa;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #d0d0d0;
    line-height: 1;
    padding: 0.5rem;
    height: auto;
}

.b-calendar-grid-body {
    flex-direction: column;
    padding: 5px;
}

.b-calendar .b-calendar-grid-body .col[data-date] .btn {
    font-size: 12px;
    margin: 0 !important;
    width: auto;
    height: auto;
    flex: 1;
    font-weight: 500 !important;
    border-radius: 2px !important;
}

.b-calendar-grid-weekdays {
    padding: 0 5px;
}
.b-calendar-grid-body, .b-calendar-grid-weekdays.row.no-gutters.border-bottom {
    display: flex;
    border: none !important;
    margin: 0;
}

.b-calendar .b-calendar-header, .b-calendar .b-calendar-nav {
    margin: 0;
}

.b-calendar.b-form-date-calendar.w-100 {
    display: flex;
}

.b-calendar-grid-help {
    margin: 0;
    padding: 0.5rem;
    line-height: 1;
    color: #333 !important;
    display: none;
}

.b-calendar-grid-body .row {
    margin: 0;
}

.b-calendar .b-calendar-grid-body .col[data-date] {
    display: flex;
    width: 30px;
    height: 30px;
    flex: 1;
}

.b-calendar-grid-caption {
    text-transform: uppercase;
    font-weight: 500 !important;
}

.b-calendar .btn.disabled {
    cursor: crosshair;
}

.b-calendar .b-calendar-grid .btn:not(.active):hover {
    box-shadow: 0px 0px 0px 1px var(--primary) inset;
    color: var(--primary) !important;
    background: none;
}

.b-calendar .btn-outline-primary:not(:disabled):not(.disabled):active, .b-calendar .btn-outline-primary:not(:disabled):not(.disabled).active, .b-calendar .show > .btn-outline-primary.dropdown-toggle {
    color: #FFF !important;
}

.b-calendar svg {
    transform: scale(0.8);
    color: #444;
}

.b-calendar .b-calendar-grid {
    box-shadow: none;
}

.b-calendar-grid-caption {
    outline: none;
    box-shadow: none;
}

.b-calendar-nav {
    background: #f8f9fa;
    border-bottom: 1px solid #d0d0d0;
    border-radius: 0.25rem 0.25rem 0 0;
}

.b-calendar-nav .btn {
    padding: 0;
    margin: 0 !important;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

.b-calendar-nav .btn:hover {
    background: rgba(0,0,0,0.1);
}

.b-calendar .btn.disabled {
    opacity: 0.5;
}



.rkm-time-picker {
    padding: 0;
    margin: 0;
    min-width: auto;
}

.rkm-time-picker .b-time {
    width: auto;
    min-width: auto;
    max-width: 100%;
    margin: 0;
    display: flex !important;
}

.rkm-time-picker .mx-auto {
    width: 100%;
}

.rkm-time-picker svg.bi {
    transform: scale(0.9);
    font-size: 100% !important;
}

.rkm-time-picker .b-form-spinbutton.b-time-hours + .d-flex svg {
    height: 8px;
}

.rkm-date-picker .b-form-spinbutton {
    border: none;
}

.rkm-time-picker .b-form-spinbutton {
    border: none;
    box-shadow: none;
    padding: 0;
    text-align: center;
}

.rkm-time-picker .b-form-spinbutton .btn {
    padding: 0.75rem 1.5rem;
    box-sizing: border-box;
    height: auto;
}

.rkm-time-picker .b-form-spinbutton output {
    width: 100%;
    margin: 0;
    justify-content: center;
}



.tabs {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}

.tab-content {
    border-radius: 0 0 0.25rem 0.25rem;
}

.nav-tabs {
    margin: 0;
    padding: 0 0.5rem;
    border-radius: 0.25rem 0.25rem 0 0;
}

.nav-tabs .nav-item a {
    padding: 1rem 0.75rem;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: var(--primary);
    background: none;
}

.tabs .card-header {
  padding: 0;
  background: #FFF;
  border-radius: 3px 3px 0 0;
  border-bottom-color: #dee2e6;
}

.nav-tabs .nav-link {
    border: none;
    border-radius: 0;
    background: none;
    margin: 0;
    padding: 1rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    color: var(--gray);
}

.nav-tabs .nav-link:after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0.25rem;
    width: calc(100% - 0.5rem);
    height: 3px;
    background: rgb(108 117 125 / 76%);
    border-radius: 0.25rem 0.25rem 0 0;
    transform: translateY(0) translateZ(0);
    transition: transform 0.3s, color 0.3s;
}

.nav-tabs .nav-link.active:after, .nav-tabs .nav-link:hover:after {
    transform: translateY(-3px) translateZ(0);
}

.nav-tabs .nav-link.active:after {
    background: var(--primary);
}

.nav-tabs li:first-child .nav-link {
    border-radius: 0.25rem 0 0 0;
}

.nav-tabs .nav-link.active {
    color: var(--primary);
    border-color: var(--primary);
}

.card-header-tabs {
    margin: 0;
}

.tabs .nav-item.disabledTab a {
  opacity: 0.55;
}

.nav-tabs .nav-item + .nav-item {
  margin-left: 0;
}




.datatable-footer .form-group {
    margin: 0;
}
.datatable-footer .col-form-label {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

.table thead th {
    border-bottom: none;
    padding-bottom: calc(0.5rem + 1px);
    box-shadow: 0px -1px 0px 0px #dee2e6 inset;
}

.table {
    margin-bottom: 0.75rem;
}

.table th {
    color: var(--gray-dark);
    font-weight: 600;
    background: #f1f1f1;
}

.table td {
    height: 50px;
}

.table th[aria-sort]:hover {
    background: #dee2e6;
}

.table th, .table td {
    padding: $paddingTable;
    vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: #FFF;
}

.table-striped tbody tr:nth-of-type(even) {
    background: rgb(248 248 248);
}

.table tbody tr:not(.b-table-details):not(.b-table-empty-row):not(.b-table-busy-slot):hover > td {
    background: rgb(0 123 255 / 10%);
    border-top: 1px solid var(--primary);
    border-bottom: 1px solid var(--primary);
}

.table tbody tr:not(.b-table-details thead tr):not(.b-table-details):not(.b-table-empty-row):not(.b-table-busy-slot):hover {
    border: 1px solid var(--primary);
}

.b-table-has-details td {
  border-bottom: 1px solid #dee2e6;
}

.pagination {
    margin-bottom: 0;
}