/*base.css - contains fundamental styles or overrides that apply across the entire site*/

/* To allow dynamic font-size change by using the browser font-size settings we would use 62.5% on the html element. */
/* We need to use fixed 10px for the font-size as the dynamic settings would break the layout at many places. */
html {
    font-size: 10px;
}

h1, h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 24px;
}

h3, h4, h5 {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid #eee;
    opacity: 1;
}

a {
    text-decoration: none;
}

legend {
    color: #333;
    border-bottom: 1px solid #e5e5e5;
}

.form-font-weight-bold {
    display: block;
}

.form-font-weight-bold label{
    font-weight: 700;
}

.navbar {
    border: 0;
}

.navbar .dropdown-menu {
    margin-top: 0;
}

#navbarFixedTop .nav-link {
    max-height: 5rem;
    line-height: 20px;
}

#topNavBarBrand {
    height: 5rem;
    line-height: 20px;
    align-self: baseline;
}

.fixed-top {
    background: var(--top-navi-background-color, #213a53);
    border-bottom: var(--navbar-fixed-top-border-bottom, 1px solid #e7eaec);
}

.fixed-top .nav-link {
    color: var(--top-navi-color, #ffffff);
    font-weight: var(--nav-li-a-font-weight, 600);
    padding: 15px 20px 15px 25px;
    font-size: var(--nav-li-a-font-size, 13px);
    white-space: nowrap;
}

.fixed-top .navbar-toggler {
    color: var(--top-navi-color, #ffffff);
    padding: 15px 30px 15px 25px;
    border: none;
    font-size: 14px;
}

.navbar-toggler:focus {
    outline: 5px auto var(--top-navi-color-hover, #0095ff);
    outline-offset: -2px;
}

.dropdown-item-color {
    color: #333;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    padding: 8px;
}

.black-row,
.table .black-row {
    background-color: #262626;
    color: #FFFFFF;
}

@media (max-width: 767px) {
    .navbar-right-side-block-new-buyer {
        height: 25px;
    }
}

.navbar-right-side-block-new-buyer {
    display: flex;
    flex: 1;
    margin-left: auto;
    min-width: 15rem;
    max-width: 55rem;
}

.navbar-nav .nav-item > .nav-link:hover,
.navbar-nav .nav-item > .nav-link:focus,
.navbar-nav .nav-item > .nav-link.show,
.nav .nav-item > .nav-link:hover,
.nav .nav-item > .nav-link:focus,
.nav .nav-item > .nav-link.show,
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--top-navi-background-color-hover, #f5f5f5);
    color: var(--top-navi-color-hover, #0095ff);
}

#navbarFixedTop .dropdown-menu {
    padding: 10px 15px;
}

#navbarFixedTop .dropdown-item,
#navbarFixedTop .dropdown-item {
    padding: 3px 15px 3px 15px;
}

.top-navigation .navbar {
    margin-bottom: 0;
}

.top-navigation .navbar-nav > li > .nav-link {
    padding: var(--top-navi-padding, 15px 20px);
    margin: var(--top-navi-margin, unset);
}

.top-navigation .navbar-right-side-block .dropdown-menu {
    position: absolute;
}

.dropdown-menu > li .dropdown-item:hover,
.dropdown-menu > li .dropdown-item:focus {
    background: var(--top-navi-background-color-hover);
    color: var(--top-navi-color-hover);
}

.fixed-top .nav-item.dropdown .nav-link {
    width: 100%;
    text-align: left;
}

.badge.badge-counter {
    font-size: 9px;
    width: 1.5rem;
    aspect-ratio: 1;
    padding: 0.3em;
}

.badge-counter[data-js=schedulink-badge] {
    top: 12px;
    right: 8px;
}

.flex-fill-100 {
    flex: 1 1 100% !important;
}

.dropdown-menu > li .dropdown-item {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    color: #333;
    white-space: nowrap;
}

.js-toggle-button {
    padding: 0px 0px;
}

.bts-buyer-panel {
    max-width: 100%;
}

.bts-w-40 {
    width: 40%
}

/* To override a kendo specific rule: .k-widget.form-control { width: 100% } 
   Needed for input-groups with buttons and kendo autocompleate to keep inline style */
/* Changed to { width: 1% } as that is the original input-group width, 100% was causing
   wrapping issues - adding in this comment for checking if anything breaks with this */
.input-group > .form-control:not(input) {
    width: 1%;
}

.rowx-0 {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

:root,
[data-bs-theme=light] {
    /*bs-rem-unit-base-fix.css*/
    --bs-body-font-size: calc(1rem * 1.6);
    --bs-border-radius: calc(0.375rem * 1.6);
    --bs-border-radius-sm: calc(0.3rem * 1.6);
    --bs-border-radius-lg: calc(0.5rem * 1.6);
    --bs-border-radius-xl: calc(1rem * 1.6);
    --bs-border-radius-xxl: calc(2rem * 1.6);
    --bs-border-radius-pill: calc(50rem * 1.6);
    --bs-box-shadow: 0 calc(0.5rem * 1.6)calc(1rem * 1.6) rgba(0, 0, 0, 0.15);
    --bs-box-shadow-sm: 0 calc(0.125rem * 1.6)calc(0.25rem * 1.6) rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 calc(1rem * 1.6) calc(3rem * 1.6) rgba(0, 0, 0, 0.175);
    --bs-focus-ring-width: calc(0.25rem * 1.6);
    /*bs-style-fix.css*/
    --bs-info-rgb: 35, 198, 200;
    --bs-link-color-rgb: 51, 122, 183;
    --bs-danger-rgb: 237, 85, 101;
    --bs-secondary-rgb: 209, 218, 222;
    --bs-success-rgb: 92, 184, 92;
}

.alert-warning {
    --bs-alert-bg: #fcf8e3;
    --bs-alert-color: #8a6d3b;
}

.btn-lg, .btn-group-lg > .btn {
    --bs-btn-font-size: calc(1.25rem * 1.6);
}

.btn-sm, .btn-group-sm > .btn {
    --bs-btn-font-size: calc(0.75rem * 1.6);
}

.popover {
    --bs-popover-zindex: 15700;
    --bs-popover-font-size: calc(0.875rem * 1.6);
}

.bts-blue-navy-link:hover {
    color: var(--bts-blue-navy-link-hover, #0095ff);
}

/* Fix for tabstrip. Tabstrip cannot initialize correctly if the nav element has display flex. */
.nav.bts-nav-tabstrip {
    flex-wrap: initial;
}

/*navbar-reset(.css)*/
.navbar {
    --bs-navbar-padding-x: 0;
    --bs-navbar-padding-y: 0;
    --bs-navbar-nav-link-padding-x: 2rem;
    --bs-navbar-brand-font-size: 1.8rem;
}

.navbar > .container-fluid {
    --bs-gutter-x: 0;
}

/*container-reset(.css)*/
.container-fluid {
    --bs-gutter-x: 3rem;
}

/*alert-reset(.css)*/
.alert {
    --bs-alert-margin-bottom: 2rem;
    --bs-alert-padding-y: 1.5rem;
    --bs-alert-padding-x: 1.5rem;
}

/*input-group(.css)*/
.input-group-text {
    height: 3.4rem;
    color: inherit;
    font-size: 1.4rem;
    padding: 0.6rem 1.2rem;
    border-radius: 0;
}

.input-group > .btn {
    height: 3.4rem;
}

.input-group > .btn-outline-secondary {
    --bs-btn-border-color: var(--bs-border-color, inherit);
    --bs-btn-hover-bg: var(--btn-secondary-background, #ddd);
    --bs-btn-hover-border-color: #d2d2d2;
}

.input-group .btn:has([data-bs-toggle=dropdown].show) {
    z-index: 1000;
}

/*nav-reset(.css)*/
.nav-tabs {
    --bs-nav-tabs-link-active-color: #0095ff;
    --bs-nav-tabs-link-active-bg: var(--main-page-background-color, #f3f3f4);
    --bs-nav-tabs-link-active-border-color: #ddd #ddd #f3f3f4;
}

.nav-pills .nav-link {
    color: inherit;
}

/*badge-reset(.css)*/
.badge {
    border-radius: .2rem;
}

.badge:is(.cursor-pointer, .bts-link):hover {
    filter: brightness(85%);
}

/*dropdown-reset(.css)*/
.dropdown-menu {
    --bs-dropdown-link-color: #676a6c;
    --bs-dropdown-color: #676a6c;
    --bs-dropdown-min-width: 16rem;
    --bs-dropdown-padding-x: 0.5rem;
    --bs-dropdown-divider-margin-y: 0.3rem;
}

/*form-reset(.css)*/
.form-check-input[type=checkbox] {
    border-radius: .2rem;
    border: .1rem solid #767676;
    box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.1);
}

.form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.75 13.75'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='butt' stroke-linejoin='miter' stroke-width='2' transform='translate(0,-1)' d='M 2.75 8.6687 L 5.6 11.4 L 10.9375 4.1625'/%3e%3c/svg%3e");
    border: 0;
    box-shadow: none;
}

.form-check-input:checked[type=checkbox]:hover {
    background-color: #005cc8;
}

.form-text {
    font-size: inherit;
}

/*utilities-reset(.css)*/
.text-muted {
    color: var(--bs-gray-500) !important;
}

/*popover-reset(.css)*/
.popover {
    font-size: 1.2rem;
}

.popover-header {
    font-size: 1.5rem;
    margin-top: 0px;
}

/*table-reset(.css)*/
.table {
    --bs-table-bg: transparent;
    --bs-table-color: #676a6c;
}

.table > :not(caption) > * > * {
    color: inherit;
}

/*caret-reset(.css)*/
.dropdown-toggle::after {
    margin-left: .5rem;
    vertical-align: middle;
    font-size: 1.4rem;
}

.dropdown-toggle-lg::after {
    font-size: 1.8rem;
}

/*grid-reset(.css)*/
.row:not(.g-0, .g-1, .g-2, .g-3, .g-4, .g-5, 
.gx-0, .gx-1, .gx-2, .gx-3, .gx-4, .gx-5, 
.gy-0, .gy-1, .gy-2, .gy-3, .gy-4, .gy-5) {
    --bs-gutter-x: 3rem;
}

/*text-success-reset(.css)*/
.text-success {
    --bs-success-rgb: 28, 132, 198;
}

/*modal-body-reset(.css)*/
.modal-body {
   flex: none;
}

/*modal-header-reset(.css)*/
.modal-header {
    padding: 15px;
    border-radius: 0;
}

/*modal-title-reset(.css)*/
.modal-title {
    margin-top: 0px;
}

/*buttons-reset(.css)*/
.btn {
    --bs-btn-font-size: 1.4rem;
    --bs-btn-padding-x: 1.2rem;
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-line-height: 1.42857143;
}

.btn-primary {
    --bs-btn-active-border-color: var(--btn-primary-btn-outline, #0095ff);
}

.btn-check:checked + .btn.btn-primary:hover {
    color: var(--btn-primary-hover-btn-color,#fff);
    background-color: var(--btn-primary-active-hover-background-color,--btn-primary-hover-background-color,#286090);
    border-color: var(--btn-primary-btn-outline,#0095ff);
}

.btn-secondary {
    --bs-btn-color: var(--btn-secondary-color, inherit);
    --bs-btn-bg: var(--btn-secondary-background, #ddd);
    --bs-btn-border-color: var(--btn-secondary-border-color, #e7eaec);
    --bs-btn-border-width: var(--btn-secondary-border-width, 1px);
    --bs-btn-hover-color: var(--btn-secondary-hover-color, inherit);
    --bs-btn-hover-bg: var(--btn-secondary-active-background, inherit);
    --bs-btn-hover-border-color: #d2d2d2;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: var(--btn-secondary-hover-color, inherit);
    --bs-btn-active-bg: var(--btn-secondary-active-background, inherit);
    --bs-btn-active-border-color: #d2d2d2;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: #e9ecef;
    --bs-btn-disabled-border-color: #dee2e6;
}

.btn-sm, .btn-group-sm > .btn {
    --bs-btn-font-size: 1.2rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
}

.btn:disabled,
.btn.disabled {
    pointer-events: auto;
    cursor: not-allowed;
}

.btn-check + .btn:hover {
    background-color: #ccc;
    color: var(--btn-secondary-hover-color, inherit);
}

.btn-plain {
    --bs-btn-color: inherit;
    --bs-btn-bg: transparent;
    --btn-padding: 0;
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-border-width: 0;
    --bs-btn-hover-color: #23527C;
    --bs-btn-hover-bg: transparent;
}

.btn-close {
    --bs-btn-close-opacity: 0.5;
    --bs-btn-close-hover-opacity: 0.75;
}

/*form-control(.css)*/
.form-control,
.form-control:focus {
    box-shadow: none;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] {
    background-color: #eee;
}

.form-control {
    height: 3.4rem;
    border-radius: var(--form-control-border-radius, 1px);
    color: inherit;
    padding: .6rem 1.2rem;
    font-size: 1.4rem;
}

.form-control:focus {
    border-color: #0095ff;
}

.form-control::placeholder {
    color: #999;
}

.form-control::file-selector-button {
    background-color: var(--btn-secondary-background, #ddd);
    color: var(--btn-secondary-color, inherit);
    height: 3.4rem;
    margin: -1.25rem;
    -webkit-margin-end: .75rem;
    margin-inline-end: .75rem;
}

.form-control-sm {
    height: 3rem;
    padding: .25rem .5rem;
    font-size: 13px;
}

/*form-select(.css)*/
.form-select,
.form-select:focus {
    box-shadow: none;
}

.form-select {
    height: 3.4rem;
    border: 1px solid #e5e6e7;
    border-radius: var(--form-control-border-radius, 1px);
    color: inherit;
    padding: .6rem 2.5rem .6rem 1.2rem;
    font-size: 1.4rem;
}

/*card(.css)*/
.card {
    color: rgb(81, 89, 103);
}

.form-select:focus {
    border-color: #0095ff;
}

/*color-bg(.css)*/
.text-bg-info {
    color: #fff !important;
}

.text-bg-secondary {
    color: #5e5e5e !important;
}

.text-bg-warning {
    color: #fff !important;
    background-color: #f8ac59 !important;
}