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


/* Running a Test */

#TestQuestion, #SubmitTestForm {
    /*height: 600px;*/
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1020;
    background-color: white;
}

.QuestionButton {
    width: 4em;
    margin: 0em;
}

    .QuestionButton.answered {
        background-color:#648ff5;
    }

.QuestionSubmit {
    width: 8em;
    background-color:#ff041b;
    color:white;
    font-weight:bold;
}
/* Menus */
.MenuButton {
    width: 16em;
    margin: .5em;
}

/* Collapsible student-groups */

.collapseIcon {
    padding: 0;
}

/* Edit Test */
#EditTestName {
    font-size: 0.4em;
    position: relative;
    top: -0.8em;
    left: 0.4em;
}

/* Listing tests in Schedule Test */

.testRows td {
    padding: 0;
}

.testRows .testLink {
    display: block;
    height: 100%;
    padding: 0.5rem;
    text-decoration: none;
    color: black;
}


/* Student Profile*/

.nav-links a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
}

.input-box {
    flex: 2;
    padding: 10px;
    border: 1px solid #000;
    border-radius: 5px;
    font-size: 14px;
}

.form-group {
    margin-bottom: 15px;
}

    .form-group label {
        display: block;
        font-weight: bold;
        margin-bottom: 5px;
    }

#btn {
    background-color: #333;
    color: white;
}

#Edit {
    background-color: #333;
    color: white;
}

.form-row {
    display: flex;
    gap: 10px;
}

    .form-row .form-group {
        flex: 1;
    }

.error {
    border-color: red;
    background-color: #ffe6e6;
}

/* Favourite Sidebar */
.sideFavNav {
    height: 100%;
    width: 275px;
    position: fixed;
    z-index: 1;
    top: 0px;
    left: -275px;
    background-color: #fefefe;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 15px;
}

    .sideFavNav a {
        text-decoration: none;
        font-size: 15px;
        color: #818181;
        display: block;
        transition: 0.2s;
    }

.favButton {
    font-size: 16px;
    cursor: pointer;
    position: fixed;
    top: 75px; /* Adjusted slightly to avoid navbar overlap */
    left: -85px;
    transition: left 0.5s ease;
    z-index: 1050;
    background-color: #fff; /* optional for contrast */
    border: 1px solid #ccc;
    padding: 8px 12px;
    border-radius: 5px 0 0 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.favButton:hover {
    left: 0;
}
/* Medium devices (tablets, 768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .favButton {
        top: 100px; /* Adjust this as needed */
    }
}

/* Small devices (<768px) */
@media (max-width: 767.98px) {
    .favButton {
        top: 80px; /* Adjust this as needed for phones */
    }
}


.cstw-w {
    left: 0;
}

.pointer {
    cursor: pointer;
}

.adminButtonWidth {
    width: 200px
}

/* Divides tables with black line */
.tableDivider {
    border-right: 0.1em solid #000;
}

.btn-group-aligned .btn {
    display: inline-block;
    margin-bottom: 10px;
    width: 160px; /* Ensure consistent width for all buttons */
}

@media (max-width: 768px) {
    .btn-container .btn {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }

    .button-group {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

/* Alert Box for Charts */
div.chartAlertBoxWindow {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    width: 70%;
    text-align: center;
}

.text-gold{
    color: gold;
}

/*********************************************************************/
/* Stuff stop handel thead answers stop thead questions input Tests. */

/* Due to some old data in the system, this is needed */
.answer-undefined {
    color: darkgray;
    font-style: italic;
}

/* For indication of the correct answer among the answers */
.answer-correct {
    color: green;
    font-size: 110%;
    font-weight: bold;
}

.answer-correct::after {
    margin-left: 2em;
    content: "◄\00a0◄\00a0◄";
}

/* To indecate the Students answers on the test (if correct or not) */
.youranswer-correct {
    color: green;
    font-weight: bold;
}

    .youranswer-correct::before {
        color: green;
        font-weight: bolder;
        margin-right: 0.5em;
        content: "Your answer:";
    }

.thecorretc-answer {
    color: green;
    font-weight: bold;
}

    .thecorretc-answer::before {
        color: green;
        font-weight: bolder;
        margin-right: 0.5em;
        content: "Correct answer:";
    }

.youranswer-wrong {
    color: red;
    text-decoration: line-through;  /* Might not be needed */
}

    .youranswer-wrong::before {
        color: red;
        font-weight: bold;
        margin-right: 0.5em;
        content: "Your answer:";
        text-decoration: none;
        display: inline-block; /* Needed for to turn of line through */
    }

/******** Lexicon Portalen table design **********/
.lp-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #0d6efd; /* Bootstrap primary */
    font-size: 1rem;
    color: #212529;
    background-color: transparent;
}
    /* Bård runt cellerna */
    .lp-table th,
    .lp-table td {
        border: 1px solid #0d6efd;
        padding: 0.75rem;
        vertical-align: top;
        text-align: left;
    }

    /* Striping */
    .lp-table tbody tr:nth-of-type(odd) {
        background-color: rgba(0, 0, 0, 0.05); /* Bootstrap's table-striped color */
    }

    /* Rubrik-stil */
    .lp-table thead th {
        vertical-align: bottom;
        border-bottom: 2px solid #0d6efd;
        background-color: #cfe2ff; /*#0dcaf0; /*#ff041b;*/
        font-weight: bold;
    }
/* Alternative table */
.lp-tablealt {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid red;
    font-size: 1rem;
    color: #212529;
    background-color: transparent;
}
/* Bård runt cellerna */
    .lp-tablealt th,
    .lp-tablealt td {
        border: 1px solid red;
        padding: 0.75rem;
        vertical-align: top;
        text-align: left;
    }

/* Striping */
    .lp-tablealt tbody tr:nth-of-type(odd) {
        background-color: rgba(0, 0, 0, 0.05); /* Bootstrap's table-striped color */
    }

/* Rubrik-stil */
    .lp-tablealt thead th {
        vertical-align: bottom;
        border-bottom: 2px solid red;
        background-color: lightsalmon; /*#0dcaf0; /*#ff041b;*/
        font-weight: bold;
    }

/*********** button designes **************/
.lpbtn-view {
    background-color: #0dcaf0; /* BootStrap Info */
    color: snow;
}
.lpbtn-test {
    background-color: peru;
    color: snow;
}
.lpbtn-assignment {
    background-color: crimson;
    color: snow;
}
.lpbtn-edit {
    background-color: #0000FF;
    color: snow;
}
.lpbtn-password {
    background-color: steelblue;
    color: snow;
}
.lpbtn-group, .lpbtn-role {
    background-color: blueviolet;
    color: snow;
}
.lpbtn-archived {
    background-color: #d03545;
    color: snow;
}
.lpbtn-delete, .lpbtn-erase {
    background-color: red;
    color: snow;
}
.lpbtn-new {
    background-color: #188653;
    color: snow;
}
.lpbtn-save, .lpbtn-update {
    background-color: #198754;
    color: snow;
}
.lpbtn-back, .lpbtn-home {
    background-color: #6c757d;
    color: snow;
}
.lpbtn-search {
    background-color: #0d6efd;
    color: snow;
}
.lpbtn-reset {
    background-color: orangered;
    color: snow;
}
.lpbtn-restore {
    background-color: #198754;
    color: snow;
}
.lpbtn-schedule {
    background-color: teal;
    color: snow;
}
.lpbtn-schedule-test {
    background-color: peru;
    color: snow;
}
.lpbtn-schedule-assignment {
    background-color: crimson;
    color: snow;
}
.lpbtn-reschedule {
    background-color: #20c997;  /* Denna användes som teal i Bootstrap 4 ($teal), men togs bort i v5. Mycket nära original-teal.*/
    color: snow;
}
.lpbtn-statistic {
    background-color: lime;
    color: darkslategray;
}
.lpbtn-subject {
    background-color: darkolivegreen;
    color: snow;
}
.lpbtn-question {
    background-color: navy;
    color: snow;
}
.lpbtn-uncheckedquestions {
    background-color: royalblue;
    color: snow;
}
.lpbtn-focus {
    background-color: plum;
    color: darkslategray;
}
.lpbtn-check {
    background-color: forestgreen;
    color: snow;
}
.lpbtn-pagenavigation {
    background-color: dodgerblue;
    color: snow;
}
.lpbtn-do-not-enter {
    background-color: red;
    color: snow;
    visibility: hidden;     /* = "invisible" */
    pointer-events: none;   /* = "disabled" */
    opacity: 0.65;          /* Bootstrap stil för disabled */
}
.lpbtn-progress25 {
    background: linear-gradient(to right, #188653 25%, #ffc107 25%); /* Green first 25% then warning for rest */
    color: darkslategray;
}
.lpbtn-progress50 {
    background: linear-gradient(to right, #188653 50%, #ffc107 50%); /* Green first 50% then warning for rest */
    color: darkslategray;
}
.lpbtn-progress75 {
    background: linear-gradient(to right, #188653 75%, #ffc107 75%); /* Green first 75% then earning for rest */
    color: snow;
}


.lp-btn-sm-group {
    color: white;
    background-color: #8C1AF6;
}
.lp-btn-sm-pswd {
    color: white;
    background-color: #006500;
}
.lp-btn-sm-edit {
    color: white;
    background-color: #0000FF;
}
.lp-btn-sm-archive {
    color: white;
    background-color: darkred;
}
.lp-btn-sm-delete {
    color: white;
    background-color: #FF0000;
}
.lp-btn-sm-restore {
    color: white;
    background-color: #198754;
    /* bi-box-arrow-in-up bi-mortarboard */
}
.lp-btn-sm-view {
    /* bi-eye */
    color: white;
    background-color: mediumpurple;
}
.lp-btn-sm-new {
    color: white;
    background-color: #188653;
}
.lp-btn-sm-check {
    color: white;
    background-color: green;
}

.lp-btn-search {
    background-color: #0d6efd;
    color: white;
}
.lp-btn-back {
    background-color: #6c757d;
    color: white;
}
.lp-btn-reset {
    background-color: orangered;
    color: white;
}
.lp-btn-new {
    background-color: #198754;  /* btn-success */
    color: white;
}
.lp-btn-archived {
    background-color: darkred;
    color: white;
}
.lp-btn-save {
    background-color: #198754;  /* btn-success */
    color: white;
}
.lp-btn-subject {
    background-color: darkolivegreen;
    color: white;
}
.lp-btn-student {
    background-color:crimson;
    color: white;
}
.lp-btn-test {
    background-color: cornflowerblue;
    color: white;
}
.lp-btn-assignment {
    background-color: indianred;
    color: white;
}
.lp-btn-scheduling {
    background-color:teal;
    color: white;
}
.lp-btn-submission {
    background-color:olive;
    color: white;
}

.lp-tblbg-danger {
    background-color: rgba(220, 53, 69, 0.25);
}
.lp-tblbg-warning {
    background-color: rgba(255, 193, 7, 0.25);
}
.lp-tblbg-success {
    background-color: rgba(25, 135, 84, 0.25);
}

.cursor-pointer {
    cursor: pointer;
}


.active-group {
    background-color: navy !important; /* Change this to your preferred active color */
    color: white !important;
}

.sticky-container {
    position: sticky;
    top: 0;
    background: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
}

.btn-sticky {
    width: 150px; 
    height: 40px; 
    font-size: 16px;
}

/* Navbar active links adjustments */

.nav-link {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin-top: 0;
    transition: all 0.2s ease;
    color: #ffffff !important;
    background-color: transparent;
    border-radius: 5px 5px 0 0;
}

.active-link .nav-link,
.inactive-link:hover .nav-link {
    background-color: #ffffff !important;
    color: #000 !important;
}

.active-link .nav-link {
    font-weight: bold;
}

.inactive-link:hover .nav-link {
    background-color: #ffbbbb !important;
}

.nav-item {
    margin-top: 0; /* Avoid layout jumps */
}

.star-btn {
    transition: background-color 0.3s ease;
}

.star-btn:hover {
    filter: brightness(85%);
}

#navbarItems .nav-item {
    display: flex;
    align-items: center;
    transition: 0.2s;
    line-height: 36px;
}

.navbar {
    padding-bottom: 0;
}
@media (max-width: 992px) {
    #navbarItems .nav-item {
        width: 100%;
    }

    #navbarItems .nav-link {
        display: block;
        width: 100%;
        text-align:start;
        border-radius: 0; /* flatter look on mobile */
    }

    .active-link .nav-link,
    .inactive-link:hover .nav-link {
        width: 100%;
    }
}