html,
body {
    height: 94%;
    margin-bottom: 60px;
    background: #eee;
    background-repeat: no-repeat;
}

.ott-container {
    height: 100%;
    padding: 20px;
}

.big-card {
    width: 77%;
    margin: auto;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

.small-card {
    margin: auto;
    width: 80%;
    overflow: visible;
    max-width: 500px;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

.ott-card {
    margin: auto;
    width: 80%;
    overflow: visible;
    max-width: 500px;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}


.message-container {
    position: fixed; /* or absolute depending on your layout */
    top: 99px; /* Adjust as necessary */
    left: 50%;
    transform: translateX(-50%); /* Center it horizontally */
    z-index: 1000; /* Ensure it appears above other content */
    width: 90%; /* Adjust width if necessary */
    max-width: 600px; /* Max width to prevent stretching */
    margin: 0 auto; /* Center it */
}

.sidenav-container {
    background-color: #888;
}

.alert {
    margin-top: 1rem;
}
/* Input titles, fields and input error messages are formatted below */
.input-title {
    font-size: 12px;
    margin-top: 3px;
}

.input-box {
    margin-bottom: 20px;
    margin-top: 0px;
}

    .input-box::placeholder {
        color: darkgray;
        font-size: 16px;
    }

.field-error-text {
    color: red;
    font-size: 9px;
    text-align: end;
    padding-bottom: 3px;
}

select {
    width: 100%;
    padding: 7px;
    border-color: lightgray;
    border-radius: 4px;
}

/* Buttons are formatted below */
.ott-button {
    padding: 1rem;
    font-weight: bold;
    font-size: 12px;
    padding: .3rem 1rem;
    color: rgb(97, 93, 93);
    box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5);
    border: solid 2px transparent;
    background-image: linear-gradient(white, white), linear-gradient(90deg, #46FF6D 0%, #5EECFF 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 2px 1000px 1px #fff inset;
    height: fit-content;
}

    .ott-button:hover, .ott-button:active, .ott-button:focus {
        padding: 1rem;
        font-weight: bold;
        font-size: 12px;
        padding: .3rem 1rem;
        color: rgb(33, 33, 33);
        box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5);
        border: solid 2px transparent;
        background-image: linear-gradient(white, white), linear-gradient(90deg, #46FF6D 0%, #5EECFF 100%);
        background-origin: border-box;
        background-clip: content-box, border-box;
        box-shadow: 2px 1000px 1px #90fca7 inset;
        height: fit-content;
    }

    .ott-button:active {
        padding: 1rem;
        font-weight: bold;
        font-size: 12px;
        padding: .3rem 1rem;
        color: rgb(33, 33, 33);
        box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5);
        border: solid 2px transparent;
        background-image: linear-gradient(white, white), linear-gradient(90deg, #46FF6D 0%, #5EECFF 100%);
        background-origin: border-box;
        background-clip: content-box, border-box;
        box-shadow: 2px 1000px 1px #41e864 inset;
        height: fit-content;
    }

.ott-small-button {
    padding: 0.5rem;
    padding: .1rem 0.5rem;
    font-size: 10px;
    font-weight: bold;
    color: rgb(97, 93, 93);
    box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5);
    border: solid 2px transparent;
    background-image: linear-gradient(white, white), linear-gradient(90deg, #46FF6D 0%, #5EECFF 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 2px 1000px 1px #fff inset;
    height: fit-content;
}

    .ott-small-button:hover, .ott-small-button:active, .ott-small-button:focus {
        padding: 0.5rem;
        padding: .1rem 0.5rem;
        font-size: 10px;
        font-weight: bold;
        color: rgb(33, 33, 33);
        box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5);
        border: solid 2px transparent;
        background-image: linear-gradient(white, white), linear-gradient(90deg, #46FF6D 0%, #5EECFF 100%);
        background-origin: border-box;
        background-clip: content-box, border-box;
        box-shadow: 2px 1000px 1px #90fca7 inset;
        height: fit-content;
    }

    .ott-small-button:active {
        padding: 0.5rem;
        padding: .1rem 0.5rem;
        font-size: 10px;
        font-weight: bold;
        color: rgb(33, 33, 33);
        box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5);
        border: solid 2px transparent;
        background-image: linear-gradient(white, white), linear-gradient(90deg, #46FF6D 0%, #5EECFF 100%);
        background-origin: border-box;
        background-clip: content-box, border-box;
        box-shadow: 2px 1000px 1px #41e864 inset;
        height: fit-content;
    }


/*  Page Headings are formatted below.  */
.header-with-underline {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0em;
    text-align: left;
    color: #000;
    margin: 0;
    margin-bottom: 0px;
    margin-bottom: 0px;
    margin-bottom: -24px;
    text-transform: uppercase;
    width: fit-content;
    padding-right: 10px;
}

.highlight {
    background: linear-gradient(120deg, #46FF6D 0%, #5EECFF 100%);
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
    background-repeat: no-repeat;
    background-size: 100% 40%;
    background-position: 0 90%;
}


/*  Sidebar logoff icon and text are formatted below.  */
.sidebar-logoff {
    color: #46ff6d;
    font-size: medium;
    font-weight: bold;
    text-decoration: none;
}

    .sidebar-logoff:visited {
        color: #46ff6d;
        font-size: medium;
        text-decoration: none;
    }

    .sidebar-logoff:hover {
        color: #0eb732;
        font-size: medium;
        text-decoration: none;
    }

.menu-button {
    color: #46ff6d;
    font-size: x-large;
    text-decoration: none;
}

    .menu-button:hover {
        color: #0eb732;
        font-size: x-large;
        text-decoration: none;
    }


 /* nav bar at top of screen styling start */

.navbar {
    background-color: white;
    box-shadow: black 0px -11px 20px 0px;
}

/* nav bar at top of screen styling end */

/* 
    Sidebar menu items are formatted below.
    On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) 

*/
@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

        .sidenav a {
            font-size: 18px;
        }
}

#related_links {
    width: 100%;
    padding: 0 0 0 0;
    margin-bottom: 1em;
    font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
    background-color: darkgray;
    color: #333;
}

    #related_links ul {
        list-style: none;
        margin: 0;
        padding: 0;
        border: none;
    }

    #related_links li {
        border-bottom: 2px solid #909090;
        margin: 0;
    }

        #related_links li a {
            display: block;
            padding: 5px 5px 5px 0.5em;
            border-left: 10px solid #909090;
            border-right: 10px solid #909090;
            background-color: #909090;
            color: #fff;
            text-decoration: none;
            width: 100%;
        }

        html > body #related_links li a {
            width: auto;
        }

            #related_links li a:hover {
                border-left: 10px solid #46ff6d;
                border-right: 10px solid #46ff6d;
                background-color: #46ff6d;
                color: #fff;
            }

/* END of sidebar menu items */

/* TABLE STYLING START */

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

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #46ff6d;
}

.page-link {
    font-size: 10px;
    color: #909090;
}

.ott-pagination {
    font-size: 10px;
    color: #909090;
}

.table {
    --bs-table-hover-bg: #90fca7;
    padding: 5px 5px 5px 5px;
}

    .table > :not(caption) > * > * {
        padding: 5px 5px 5px 5px;
    }

    .table > :not(caption) > * > * {
        padding: 5px 5px 5px 5px;
    }

td {
    font-size: 12px;
    color: #333;
    border-bottom: 1px solid #909090;
    padding: 5px 5px 5px 5px;
}

.li-disabled {
    background-color: lightgray;
    color: gray;
    border-block-color: lightgray;
}
    .li-disabled:hover {
        background-color: lightgray;
        color: gray;
        border-block-color: lightgray;
    }

.page-item.active .page-link {
    background-color: green;
    border-color: green;
}
/* TABLE STYLING END */