html {
    font-size: 14px;
}

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

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

body {
    margin-bottom: 60px;
}

/* Custom styling BootStrap .table-hover */
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
    background-color: #ededed;
}

/* License Criteria Form spacing */
.form-check {
    padding-left: 1.5rem;
}

/* Custom sort hyperlink */
.customSort {
    color: black;
    text-decoration: none;
}
.customSort:visited {
    text-decoration: none;
}
.customSort:hover {
    color: #F29407;
    text-decoration: none;
}
.customSort:active {
    text-decoration: none;
}

/* Custom Buttons */
.btnCustomStyle {
    border: 1px solid #F9AA33;
    background-color: #F9AA33;
    color: white;
    width: 129px;
    height: 40px;
    border-radius: 0;
    margin: 0 0 0 0;
}
.btnCustomStyle:hover {
    border: 1px solid #F29407;
    background-color: #F29407;
    color: white;
}
.btnCustomStyle:focus, btnCustomStyle:active {
    outline: #FAB44C !important;
    box-shadow: 0 0 0 0.2rem rgba(250,180,76,0.5) !important;
}
.btnDelete {
    width: 129px;
    height: 40px;
    border-radius: 0;
    padding: 0;
    margin: 0 0 0 0;
}

/* Custom round btn hyperlink */
.customRoundBtn {
    border: 1px solid #F9AA33;
    background-color: #F9AA33;
    padding: 2px 12px;
    color: white;
    text-decoration: none;
    border-radius: 50px;
}
.customRoundBtn:visited {
    text-decoration: none;
}
.customRoundBtn:hover {
    border: 1px solid #F29407;
    background-color: #F29407;
    color: white;
    text-decoration: none;
}
.customRoundBtn:focus, customRoundBtn:active {
    text-decoration: none;
    outline: #FAB44C !important;
    box-shadow: 0 0 0 0.2rem rgba(250,180,76,0.5) !important;
}

/* Output Box */
.outputBox {
    border: 1px solid #ced4da;
    height: 80px;
    width: 100%;
    border-radius: 5px;
    word-wrap: break-word;
    margin: 0 0;
    overflow: auto;
}

/* Pagination ul li */
.pagination {
    display: flex;
}
.page-item {
    min-width: 40px;
    height: 40px;
    text-align: center;
    padding: 0;
    border: none;
}
.page-item.active .page-link {
    background-color: #F9AA33;
    border-color: #F9AA33;
    z-index: 1;
}
.page-link {
    width: 100%;
    height: 100%;
    color: #F9AA33;
}
.page-link:hover {
    color: #F9AA33;
    z-index: 0;
}
.page-link:focus {
    color: #F9AA33;
    text-decoration: none;
    outline: #FAB44C !important;
    box-shadow: 0 0 0 0.2rem rgba(250,180,76,0.5) !important;
}
.page-link:active {
    text-decoration: none;
    outline: #FAB44C !important;
    box-shadow: 0 0 0 0.2rem rgba(250,180,76,0.5) !important;
}

/* Action Button dropdown menu */
.dropdown {
    position: relative;
    display: inline-block;
    float: right;
}
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 96px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2;
    margin: 0;
    padding: 0;
}
.dropdown-menu a {
    color: #232F34;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-menu a:hover {
    background-color: #ddd;
}
.dropdown-menu a:active {
    background-color: #ddd;
    color: #F9AA33;
}
.dropdown:hover .dropdown-menu {
    display: block;
    animation: fadeInRight .3s ease;
    -webkit-animation: fadeInRight .3s ease;
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(50%,0,0)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

/* Color Scheme */
h1, h2, h3, h4 {
    color: #232F34;
}
.bg-white {
    background-color: #344955 !important;
}
.navbar-light .navbar-brand {
    font-weight: bold;
}
.text-custom-color {
    color: #FFFFFF !important;
}
.text-custom-color:hover {
    color: #F9AA33 !important;
}
.form-check-input:checked {
    background-color: #F9AA33;
    border-color: #F9AA33;
    box-shadow: 0 0 0 0.2rem rgba(250,180,76,0.5) !important;
}
.form-check-input:focus, form-check-input:active {
    border-color: #F9AA33;
    box-shadow: 0 0 0 0.2rem rgba(250,180,76,0.5) !important;
}

select:focus, select:active {
    border-color: #F9AA33 !important;
    box-shadow: 0 0 0 0.2rem rgba(250,180,76,0.5) !important;
}

option:hover, option:checked {
    box-shadow: 0 0 10px 100px #ffb7b7 inset !important;
}

input:focus,
input:active,
textarea:active,
textarea:focus {
    border-color: #F9AA33 !important;
    box-shadow: 0 0 0 0.2rem rgba(250,180,76,0.5) !important;
}

.btnDelete:focus, btnDelete:active {
    border-color: #bb2d3b !important;
    box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5) !important;
}