:root {
    --border-container-radius: 6px;
    --border-background-color: #0c5972;
    /*--border-background-color: #3d78b0;*/
    --border-border-color: #CCCCCC;
    --border-container-padding: 6px;
    --border-inner-background-color: #FFF;
        
    --button-background-color: #98d1e1;
    --button-border-color: #3d78b0;
    --button-text-color: #3d78b0;
    --row-spacer-color: #d1d1d1;
    --row-spacer-width: 2px;
    --sm-label-color: #040404;
}
    
html {
    font-size: 14px;
}

.date-picker, .time-picker {
    width: 150px !important;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .responsive-label {
        font-weight: 600;
        width: 100%;
    }

    .date-picker, .time-picker {
        width: 100% !important;
    }
}


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

.inner-container {
    min-height: 60vh;
}

body .container {
    /*  padding-bottom: 60px;
*/
}

.border-container {
    margin: 10px 0 0 0;
    background-color: var(--border-background-color);
    border-radius: var(--border-container-radius);
    padding: var(--border-container-padding);
    border: 1px solid var(--border-border-color);
}

.border-container-header {
    position: relative;
    width: 100%;
    margin-bottom: var(--border-container-padding);
}

.border-container-title {
    font-size: large;
    text-align: center;
    color: #FFF;
    height: 30px;
    vertical-align: central;
}

.border-container-inner {
    background-color: var(--border-inner-background-color);
    border-radius: var(--border-container-radius);
    border: 1px solid #CCCCCC;
    padding: var(--border-container-padding);
}


/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Tiny Button
////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.tiny-button {
    border: 1px solid #0c5972;
    border-radius: 10px;
    padding: 1px 7px 1px 7px;
    width: fit-content;
    background-color: transparent;
    color: #0c5972;
    cursor: pointer;
    font-size: 12px;
}

    .tiny-button:focus {
        background-color: #0c5972;
        border-color: #0c5972;
        color: #FFF;
    }

    .tiny-button:hover {
        background-color: #0c5972;
        border-color: #0c5972;
        color: #FFF;
    }

    .tiny-button.primary {
        background-color: #FFF;
        color: #0c5972;
    }

    .tiny-button.red-button {
        color: red;
        border-color: red;
    }

        .tiny-button.red-button:hover {
            background-color: red;
            color: #FFF;
        }

.tiny-button-disabled {
    border: 1px solid #BBB;
    border-radius: 12px;
    padding: 2px 7px 2px 7px;
    width: fit-content;
    background-color: #EEE;
    color: #BBB;
}

.tiny-button-blue {
    border: 1px solid #0c5972;
    border-radius: 12px;
    padding: 2px 7px 2px 7px;
    width: fit-content;
    background-color: #98d1e1;
    color: #0c5972;
    cursor: pointer;
}

select.tiny-select {
    border-radius: 12px;
    padding: 2px 7px 2px 7px;
    font-size: 12px;
    -webkit-appearance: none; /* Removes default styling in WebKit browsers */
    border: 1px solid #ccc; /* Optional: Add a border to match the default look */
}

.row-spacer {
    border-top: var(--row-spacer-width) solid var(--row-spacer-color);
    width: 100%;
}

.warning-messages-container {
    padding: 0.5rem 0.5rem;
    color: #842029;
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    border-radius: 0.25rem;
}

.warning-message{
    width: 100%;
}


.info-messages-container {
    padding: 0.5rem 0.5rem;
    color: red;
}

.info-message {
    width: 100%;
}

/* The container */
.chkbox-container {
    display: inline-block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .chkbox-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #FFF;
    border: 2px solid #CCC;
    border-radius: 8px;
}

/* On mouse-over, add a grey background color */
.chkbox-container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.chkbox-container input:checked ~ .checkmark {
    background-color: #3d78b0;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.chkbox-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.chkbox-container .checkmark:after {
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* The Radio button container */
.radio-container {
    display: inline-block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .radio-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
.tickmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #FFF;
    border: 2px solid #CCC;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio-container:hover input ~ .tickmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.radio-container input:checked ~ .tickmark {
    background-color: #3d78b0;
}

/* Create the checkmark/indicator (hidden when not checked) */
.tickmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.radio-container input:checked ~ .tickmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.radio-container .tickmark:after {
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
    
.button-spacer {
    margin-left: 0.25rem;
}

.important-text{
    color: red;
    font-weight: bold;
}

.btn-small{
    border-radius: .2rem;
    height: 26px;
}

.readonly-textbox{
    height: 28px;
    padding: 4px 8px 4px 8px;
}

.warning-box {
    background-color: #fff8a0;
    border-left: 6px solid #ffcc00;
    padding: 10px 15px;
    border-radius: 5px;
}

    .warning-box .warning-icon {
        font-size: 1.8em;
        color: #ffcc00;
        width: 20px;
        height: 20px;
    }

.bold {
    font-weight: bold;
}

.warning-text{
    color: red;
}

.initially-hidden {
    display: none;
}

/* Hide only Kendo widgets before they are initialized */
.kendo-preinit [data-role] {
    visibility: hidden; /* keeps layout; no jump */
}

/* Optional: also hide Kendo's own generated wrappers if they appear early */
.kendo-preinit .k-widget,
.kendo-preinit .k-grid,
.kendo-preinit .k-dropdown,
.kendo-preinit .k-combobox,
.kendo-preinit .k-numerictextbox,
.kendo-preinit .k-datepicker,
.kendo-preinit .k-datetimepicker {
    visibility: hidden;
}