html {
  font-size: 14px;
}

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

.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%;
}

body {
  margin-bottom: 60px;form-floating-sm
}

a {
    text-decoration: none;
}

.dt-button {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    margin: 2px 2px 2px 2px;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd
}

/* Button styles */
.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;
}

/* Utility classes */
.nowrap {
    white-space: nowrap;
}

/* Component styles */
.section-header {
    background-color: Background;
    border: 1px solid lightgrey;
    padding: 2px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    width: 100%;
}


.control-label {
    font-weight: bold;
}

    .control-label.required:after {
        content: '*';
        color: red;
        font-weight: bold;
        margin-left: 5px;
    }

.form-group {
    margin-bottom: 3px;
    font-size: 12px;
}

.form-group-flex {
    display: flex;
    align-items: center;
}

.form-floating-sm > .form-control {
    height: calc(2.5rem + 2px) !important;
}

.form-floating-sm > label {
    padding: .25rem .75rem;
}


/*.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}*/

.code-area {
    font-size: 16pt;
    color: darkblue;
    margin-right: 15px;
}

code-area i {
    font-size: 14pt;
    color: darkred;
    margin-left: 5px;
}

.collapse-column-150 {
    max-width: 150px !important;
    overflow: hidden;
}

td .collapse-column {
    border-width: 0px;
    border-color: white;
    white-space: nowrap;
    padding: 0px;
}

td {
    vertical-align: top;
}

.collapse-column {
    display: inline;
}

    .collapse-column:hover > div {
        display: block;
    }

#seachresultTable tbody {
    font-size: 12px;
}

.out-of-range {
    color: red;
}

.is-noraml {
}

.dt-button {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
    border: 1px solid transparent;
}

.radio-btn {
    display: none;
}

    .radio-btn + label {
        color: #ddd;
        font-family: Arial, sans-serif;
        font-size: 18px;
        padding: 10px;
    }

    .radio-btn:checked + label {
        color: #000;
        background-color: #add8e6;
    }

    .radio-btn:disabled + label {
        color: #ddd;
        background-color: #666;
    }


/* Breadcrumb style the list */
ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
    background-color: #eee;
}

    /* Display list items side by side */
    ul.breadcrumb li {
        display: inline;
        font-size: 18px;
    }

        /* Add a slash symbol (/) before/behind each list item */
        ul.breadcrumb li + li:before {
            padding: 8px;
            color: black;
            content: "/\00a0";
        }

        /* Add a color to all links inside the list */
        ul.breadcrumb li a {
            color: #0275d8;
            text-decoration: none;
        }

            /* Add a color on mouse-over */
            ul.breadcrumb li a:hover {
                color: #01447e;
                text-decoration: underline;
            }