body {
    background-color: var(--bg-color);
    color: var(--text-color);
    text-align: center;
}

th, h1, h2, h3, h4, .head {
    color: var(--h-color);
    font-weight: bold;
}

ul {
    text-align: left;
}

a {
    color: var(--link-color)
}

a:hover {
    color: var(--text-color)
}

select,
select option {
    background-color: var(--bg-color);
    color: var(--text-color);
    border: dotted 1px var(--border-color);
}

.official_rating {
    font-weight: bold;
    color: var(--warning-color) !important;
}

.original_rating {
    font-weight: bold;
    color: var(--orig-rating-color) !important;
}

.revised_rating {
    font-weight: bold;
    color: var(--rev-rating-color) !important;
}

.heading {
    display: inline-block;
    padding: 0;
    margin: 0.5rem auto 0 auto;
}

.options-container {
    display: flex;
    margin: auto;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

.options {
    flex-grow: 1;
    padding: 0;
    margin: 0;
    text-align: left;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.top {
    vertical-align: top;
}

.middle {
    vertical-align: middle;
}

.nowrap {
    white-space: nowrap;
}

hr {
    border: 1px solid var(--border-color);
}

.top_table {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

.top_table th,
td {
    border: 1px solid var(--border-color) !important;
    padding: 0.25rem !important;
    vertical-align: top;
}

.top_table th {
    background-color: var(--thead-color);
    padding-right: 18px !important;
    white-space: nowrap;
}

.top_table tr:nth-child(odd) {
    background-color: var(--tbody-color-odd);
}

.top_table tr:nth-child(even) {
    background-color: var(--tbody-color-even);
}

pre {
    display: block;
    font-size: 100%;
    color: var(--tx-color);
}

.navbar {
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

a.info {
    position: relative;
    /*this is the key*/
    z-index: 24;
    color: var(--tx-color);
    text-decoration: none
}

a.info:hover {
    z-index: 99
}

a.info span {
    display: none
}

a.info:hover span {
    /*the span will display just on :hover state*/
    display: block;
    position: absolute;
    top: 2em;
    right: 1em;
    /*width: 22em;*/
    white-space: nowrap;
    border: 1px solid #888;
    padding: 5px;
    background-color: var(--text-color);
    color: var(--bg-color);
    text-align: center
}

input[type=radio] {
    /*how to override radio/checkbox style*/
    /*https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio*/
    /*Note that the colors are the same for both light and dark mode*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    border: 1px solid var(--text-color);
    /*transition: 0.1s all linear;*/
    margin-right: 2px;
    position: relative;
    top: 2px;
    background-color: var(--bg-color);
    transition: 0.2s all linear;
}

input[type=radio]:checked {
    width: 16px;
    height: 16px;
    border: 5px solid var(--radio-color);
    background-color: var(--bg-color);
    transition: 0.2s all linear;
}

:checked+label {
    font-weight: bold;
    color: var(--h-color);
}

select {
    font-weight: bold;
    color: var(--h-color);
}

input[type=checkbox] {
    /*how to override radio/checkbox style*/
    /*https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio*/
    /*Note that the colors are the same for both light and dark mode*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #aaa;
    /*transition: 0.1s all linear;*/
    margin-right: 2px;
    position: relative;
    top: 2px;
    background-color: #ddd;
}

input[type=checkbox]:checked {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' viewBox='0 0 1000 1000'><path d='m7.7,404.6c0,0 115.2,129.7 138.2,182.68l99,0c41.5-126.7 202.7-429.1 340.92-535.1c28.6-36.8-43.3-52-101.35-27.62-87.5,36.7-252.5,317.2-283.3,384.64-43.7,11.5-89.8-73.7-89.84-73.7z'/></svg>");
}

label {
    /*remove bootstrap default */
    margin-bottom: 0;
}

form {
    /*reduce bootstrap default */
    margin-bottom: 8px;
}

@font-face {
    font-family: "flag_font";
    src: url("BabelStoneFlagsDual.woff") format('woff');
    xsrc: url("NotoColorEmoji.woff") format('woff');
}

/* New Changes introduced in laravel ------------------------------------------ */

code {
    color: var(--text-color);
}

.box {
    width: 100%;
    padding:1rem;
    margin: 0px;
}

.overflow-x-auto {
    overflow-x: auto;
}

.datatable-container {
    width: max-content;
    max-width:100%;
    margin: auto;
    overflow-x: auto;
}

.min-col {
    white-space: nowrap;
    width: 1%;
}

/* Search Autocomplete */

.search-autocomplete {
    display: none;
    position: absolute; /* This is needed or else it will push the content below */
    z-index: 10;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0px 0px 5px 5px;
    background-color: var(--tbody-color-odd);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
}

.autocomplete-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.autocomplete-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover {
    background-color: var(--thead-color);
}

.no-autocomplete {
    padding: 8px 12px;
    font-style: italic;
}