body {
    font-family: Arial, sans-serif;
    max-width: 2560px;
}

a {
    color: var(--bs-primary);
}

h1{
    padding-left: 10px
}

main {
    flex-grow: 1; /*Extends main content to end of page and keeps footer to the bottom*/
}

#siteLogo {
    min-width: 50px;
    max-width: 100px;
}

.feature-box {
    min-height: 369px;
}

.underline {
    text-decoration: underline;
}

h1.handwritten, h2.handwritten {
    font-family: /*"Jim Nightshade", cursive;*/ "Marck Script", cursive; /*"Dancing Script", cursive;*/
    font-optical-sizing: auto;
    font-style: normal;
}

h1.handwritten {
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: bolder;
}

.pointer {
    cursor: pointer;
}

/*
TABLE styling
*/

table url {
    word-break: break-word;
}

table .table-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

#notesTable th{
    min-width: 120px;
}

.styled-table {
    color: var(--bs-black);
    border-collapse: collapse;
    margin-top: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    width: 100%;
    text-align: center;
}

.styled-table thead tr {
    background-color: #cfe2ff;
    color: var(--bs-primary);
}

.styled-table th {
    padding: 12px 15px;
}

.styled-table td {
    padding: 10px;
}

.styled-table tbody tr {
    transition: background-color 0.3s ease;
    border-bottom: 1px solid #cfe2ff;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #eaeaea;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #cfe2ff;
}

.styled-table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.1); /* Adjust the darkness as needed */
}

.datepicker {
    padding: 6px;
}

/*
    Forms
*/

/* Target all for-control elements (Bootstrap's base input class) */
.form-control, .tox-tinymce {
    border: 2px solid #ced4da !important; /* Slightly thicker default gray */
}

label {
    font-weight: bold;
}


/*
    Highlight styles
*/
#colourSample {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
}

input#Colour {
    width: 93px;
}

#reinventedColourPicker {
    width: 200px;
    padding-top: 10px;
}

#reinventedColourPickerRow {
    margin-bottom: 0px;
}

#colourContainer {
    display: flex;
    margin-top: 3px;
}


/*
Media queries
*/
@media (min-width: 768px) {
    .feature-box {
        min-height: 336px;
    }
}


@media (min-width: 992px) {
    .feature-box {
        min-height: 355px;
    }
}


@media (min-width: 1200px) {
    .feature-box {
        min-height: 361px;
    }

    .container {
        max-width: 100%;
    }
}