:root {
    --petroleum-5: #F2F7FA;
    --petroleum-10: #E6F1F5;
    --petroleum-20: #CCE2EA;
    --petroleum-40: #99C5D5;
    --petroleum-60: #66A8C0;
    --petroleum-80: #338bab;
    --petroleum-100: #006E96;
    --petroleum-120: #005878;
    --petroleum-140: #00425A;
    --green-10: #E9FAF2;
    --green-20: #D4F6E5;
    --green-40: #A8ECCB;
    --green-60: #7DE3B0;
    --green-80: #51D996;
    --green-100: #26D07C;
    --green-120: #1EA663;
    --green-140: #177D4A;
    --green-160: #0F5332;
    --red-10: #FCE9EB;
    --red-20: #FAD4D7;
    --red-40: #F4A8AE;
    --red-60: #EF7D86;
    --red-80: #E9515D;
    --red-100: #E42635;
    --red-120: #B61E2A;
    --red-140: #891720;
    --red-160: #5B0F15;
    --dark-grey-color: #E6E6E6;
    --light-grey-color: #F2F2F2;
    --link-text-color: var(--petroleum-100);
    --link-hover-text-color: var(--petroleum-120);
    --icon-color: var(--petroleum-100);
    --icon-hover-color: var(--petroleum-120);
    --button-primary-bg-color: var(--petroleum-100);
    --button-primary-hover-bg-color: var(--petroleum-120);
    --button-secondary-text-color: var(--petroleum-100);
    --button-secondary-bg-color: white;
    --button-secondary-hover-bg-color: var(--petroleum-5);
    --sidebar-hover-bg-color: var(--petroleum-5);
    --sidebar-active-bg-color: var(--petroleum-10);
    --sidebar-hover-active-bg-color: var(--petroleum-20);
    --sidebar-active-left-border-color: var(--petroleum-40);
    --multi-select-hover-bg-color: var(--petroleum-5);
    --table-header-bg-color: white;
    --pagination-active-page-bg-color: var(--petroleum-100);
    --menu-hover-bg-color: var(--petroleum-5);
    --menu-active-bg-color: var(--petroleum-10);
    --menu-hover-active-bg-color: var(--petroleum-20);
    --editable-bar-bg-color: var(--petroleum-5);
    --layout-main-right-margin: 150px;
    --layout-main-max-width: 1400px;
    --layout-main-max-width-medSidomeny: 950px;
}

#page-wrapper {
    padding: 0 15px;
}

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

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

body {
    margin-bottom: 60px;
}

h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1rem;
}

h5 {
    font-size: 0.75rem;
}

h6 {
    font-size: 0.5rem;
}

.banner {
    height: 100%;
    width: 100vw;
    position: absolute;
    z-index: -1;
    left: calc(-50vw + 50%);
    top: 0;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0 40px;
    z-index: 1000;
}

.loading-content-wrapper {
    position: relative;
    min-height: 100px; /* Se till att det finns utrymme för att vísa spinner innan partial laddats. */
}

.no-line-below-table tbody tr:last-child td {
    border-bottom: 0;
}

.spinner-border {
    color: var(--petroleum-40);
}

.color-red {
    color: red;
}

.link-primary {
    color: var(--link-text-color) !important;
}

    .link-primary:hover {
        color: var(--link-hover-text-color) !important;
    }

#top-menu {
    background-color: black;
    font-weight: 400;
}

.layout-logo {
    width: 200px;
}

.navbar-text-size {
    font-size: 1.1rem;
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

.navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.navbar-nav .nav-link:hover {
    color: var(--petroleum-20) !important;
}

a {
    color: var(--petroleum-80);
    text-decoration: none;
}

select option:disabled {
    color: lightgrey;
}

.delete-link {
    color: red;
    cursor: pointer;
}

    .delete-link:hover {
        text-decoration: underline;
    }

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: white;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.no-wrap {
    white-space: nowrap;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
}

.menuTextColor {
    color: white
}

.bevara-radbrytningar {
    white-space: pre-line;
}

.anvandare-body, .utlysning-body {
    margin-top: 45px;
}

.stiftelser-body {
    margin-top: 73px;
}

.stiftelse-forkortning-label, .stiftelse-stiftelsenr-label {
    width: 6rem;
}

.stiftelse-forkortning-input, .stiftelse-stiftelsenr-input {
    width: 12rem;
}

.utlysning-stiftelsegrupp-titel {
    width: 100%;
    height: 3rem;
    background-color: var(--dark-grey-color);
    border-radius: 6px;
    position: relative;
    font-weight: bold;
}

.utlysning-stiftelse-titel {
    width: 100%;
    height: 3rem;
    background-color: var(--light-grey-color);
    border-radius: 6px;
    position: relative;
    font-weight: bold;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 1rem;
}

.utlysning-stiftelse-budget {
    width: 100px;
}

.utskicksmallar-body, .handbocker-body {
    margin-top: 73px;
}

.ansokningar-body, .arenden-body, .arende-body, .rektorsbeslut-body {
    margin-top: 50px;
}

    .ansokningar-body .inforuta {
        box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
        background-color: var(--petroleum-5);
    }

.utskicksmallar-forhandsgranskning {
    background-color: #f2f2f2;
}

.card-body.utskicksmallar-forhandsgranskning {
    padding: 5.25px 10.5px;
}

.sticky-bottom {
    position: sticky;
    bottom: 20px;
    background-color: transparent;
    z-index: 999;
}

.handbok-link {
    text-decoration: none;
}

    .handbok-link:hover {
        text-decoration: underline;
    }

.stipendium-budget-spacing {
    flex: 1;
}

.redigera-stiftelser-body, .redigera-utlysning-body, .redigera-utskicksmallar-body, .redigera-användare-body {
    margin-top: 52px;
}

.redigera-stiftelser-maxbredd, .redigera-utlysning-maxbredd, .redigera-användare-maxbredd, .redigera-utskicksmallar-maxbredd {
    max-width: 800px;
}

.multi-select-button {
    min-width: 10rem;
}

.multi-select li:hover {
    background-color: var(--multi-select-hover-bg-color);
}

.rektorsbeslut-body .summeringsruta {
    padding: 1rem;
    background-color: var(--petroleum-5);
    width: 100%;
}

.ansokningar-body .stadgar {
    background-color: var(--petroleum-5);
    padding: 1rem;
    width: 100%;
}

.rektorsbeslut-body .summeringsruta .summeringsruta-kolumn {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ansokningar-body .summeringsruta .summeringsruta-rubrik,
.rektorsbeslut-body .summeringsruta .summeringsruta-rubrik {
    margin-bottom: 0.5rem;
}

.list-separator {
    margin-top: 0px;
    margin-bottom: 0px;
}

.accordion-button {
    height: 20px; /* Set your desired height */
    color: black;
    background-color: var(--petroleum-5);
    font-size: 0.9rem;
}

    .accordion-button:not(.collapsed) {
        height: 20px; /* Set your desired height */
        color: black;
        background-color: var(--petroleum-5);
        font-size: 0.9rem;
    }

.narrow-toast {
    width: 250px;
}

.toast-large {
    min-width: 500px;
    font-size: 1.1rem;
    max-width: 800px;
    top: 9rem !important;
}

    .toast-large .toast-body {
        font-weight: 400;
    }

.toast-success {
    width: auto;
    min-width: 200px;
    max-width: 400px;
}

.toast-error {
    width: auto;
    min-width: 400px;
    max-width: 600px;
}

.page-form-label, .modal-form-label {
    font-size: var(--bs-body-font-size);
    font-weight: bold;
}

.sammanstallning-label {
    font-weight: bold;
}

.arende-body .card-header {
    background-color: var(--petroleum-5);
    font-weight: bold;
}

.modal-body .card-header {
    background-color: var(--petroleum-5);
    font-weight: bold;
}

.granskning-status-meny, .beslut-status-meny {
    width: 15rem;
}

.editable-bar {
    width: 100%;
    height: 3rem;
    background-color: var(--editable-bar-bg-color);
    border-radius: 6px;
    position: relative;
    font-weight: bold;
}

.editable-bar-text-display, .editable-bar-text-input {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-weight: bold;
}

.editable-bar-text-display, .content-below-editable-bar {
    margin-left: 1rem;
}

.editable-bar-text-input {
    margin: 0.05rem 0.2rem;
    max-width: calc(100% - 6rem);
}

.editable-bar-text-display-placeholder {
    color: #595C5F;
}

.status-text {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.15rem 0.7rem;
    border-radius: 16px;
    font-weight: normal;
}

.status-aktiv {
    background-color: #7DE3B0;
}

.status-inaktiv {
    background-color: #FFA5C2;
}

.tillbaka {
    font-size: 1.3rem;
}

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

@font-face {
    font-family: "bootstrapIcons";
    src: url("../lib/bootstrap-icons/font/fonts/bootstrap-icons.woff") format('woff');
}

.table-icon {
    text-align: right;
    width: 8px;
}

.bootstrap-icon {
    font-family: bootstrapIcons;
}

    .bootstrap-icon[role="button"] {
        color: var(--icon-color);
    }

        .bootstrap-icon[role="button"]:hover {
            color: var(--icon-hover-color);
        }

.bootstrap-icon-edit:before {
    content: "\F4CA";
}

.bootstrap-icon-plus:before {
    content: "\F64D";
    position: relative;
    top: 2px;
}

.bootstrap-icon-check-circle:before {
    content: "\F26B";
}

.bootstrap-icon-trash:before {
    content: "\F5DE";
}

.bootstrap-icon-x:before {
    content: "\F62A";
}

.bootstrap-icon-info-circle-fill:before {
    content: "\F430";
    color: var(--petroleum-100);
}

.bootstrap-icon-file-text:before {
    content: "\F3B9";
}

.bootstrap-icon-logout:before {
    content: "\F1C3";
}

.bootstrap-icon-flag:before {
    content: "\F3CC";
}

.bootstrap-icon-flag-fill:before {
    content: "\F3CB";
    color: red;
}

.bootstrap-icon-download:before {
    content: "\F30A";
}

.hidden-table {
    display: none;
}

/* DataTables Overrides */
table .dataTable tbody, table.dataTable tfoot {
    font-family: Calibri;
    font-weight: normal;
    font-size: 17px;
    color: #333333;
}

table.dataTable thead {
    background-color: var(--table-header-bg-color);
    color: white;
    font-size: 18px;
    font-family: Calibri;
}

.table tbody tr.active td, .table tbody tr.active th {
    background-color: var(--table-header-bg-color);
}

table.dataTable thead .sorting:after {
    display: none;
}

table.dataTable thead > tr > th {
    padding: 6px 22px 6px 4px;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    background: transparent;
}

    table.dataTable thead .sorting_asc:after {
        content: "\f0de";
        margin-right: -11px;
        float: right;
        font-family: fontawesome;
    }

    table.dataTable thead .sorting_desc:after {
        content: "\f0dd";
        margin-right: -11px;
        float: right;
        font-family: fontawesome;
    }

    table.dataTable thead .sorting:after {
        content: "\f0dc";
        float: right;
        font-family: fontawesome;
        color: rgba(50,50,50,.5);
    }

.dataTables_paginate, .dataTables_info, .dataTables_length, .dataTables_filter {
    font-family: Calibri;
    font-weight: normal;
    font-size: 17px;
}

.dataTables_length {
    padding: 0;
    line-height: 35px;
}

.dataTables_filter {
    padding: 0px 0 40px 0;
}

div.dataTables_filter input, div.dataTables_length select {
    padding: 3px 6px 3px 6px;
    border: 1px solid #ddd;
}

.selected-datatable-row {
    background-color: var(--petroleum-40) !important;
    --bs-table-bg: transparent !important;
}

.table-rowreorder td.reorder {
    position: relative;
}

    .table-rowreorder td.reorder::before {
        font-family: bootstrapIcons;
        content: "\F3FE";
        position: absolute;
        left: 4px;
        pointer-events: none;
    }

    .table-rowreorder td.reorder::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.05); /* Gör kolumn med drag-drop något mörkare */
        pointer-events: none;
    }

.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: inherit !important;
    border-bottom-right-radius: inherit !important;
}

.btn-group > :not(.btn-check) + .btn {
    border-top-left-radius: inherit !important;
    border-bottom-left-radius: inherit !important;
}

.dt-bootstrap5 .justify-content-between {
    align-items: center;
}

div.dt-container div.dt-info {
    padding-top: 0;
}

.validation-summary-errors {
    color: red;
}

    .validation-summary-errors ul {
        list-style-type: none;
        padding-left: 0;
    }

#RollGroup.is-invalid .invalid-feedback {
    display: block;
}

.organisation-list-item:not(:last-child) {
    margin-bottom: 1rem;
}

.sidebar-ul {
    flex-direction: column !important;
    list-style-type: none;
    width: 100%;
    padding-left: 0;
    font-weight: 450;
}

.sidebar .nav-link:hover {
    background-color: var(--sidebar-hover-bg-color);
}

.sidebar .nav-link.active {
    color: black;
    font-weight: bold;
    background: var(--sidebar-active-bg-color);
    border-left: 3px solid var(--sidebar-active-left-border-color);
}

    .sidebar .nav-link.active:hover {
        background: var(--sidebar-hover-active-bg-color);
        color: black;
    }

.sidebar li {
    border-bottom: 1px solid lightgray;
}

.sidebar .nav-item:first-of-type {
    border-top: 1px solid lightgray;
}

.sidebar .nav-item {
    width: 160px;
}

.sidebar .nav-link {
    padding-top: 7px;
    padding-right: 7px;
    padding-bottom: 7px;
    padding-left: 7px;
}

.sidebar-title {
    margin-bottom: 83px;
}

.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -1px;
        display: none;
        position: absolute;
    }

    .dropdown-submenu:hover .dropdown-menu {
        display: block;
    }

.hover-effect:hover {
    color: #1b6ec2;
}

.layout-title {
    grid-area: title;
}

.layout-menu {
    grid-area: menu;
}

.layout-main {
    grid-area: main;
    margin-right: var(--layout-main-right-margin);
    margin-left: var(--layout-main-left-margin);
    max-width: var(--layout-main-max-width);
    padding-bottom: 1.5rem;
}

.layout-main-anvandare, .layout-main-handbocker, .layout-main-utskicksmallar, .layout-main-stiftelser, .layout-main-utlysningar {
    grid-area: main;
    margin-right: var(--layout-main-right-margin);
    margin-left: var(--layout-main-left-margin);
    max-width: var(--layout-main-max-width-medSidomeny);
    padding-bottom: 1.5rem;
}

.base-layout-without-sidebar .layout-main {
    margin-left: 80px;
    max-width: 1600px;
}

    .base-layout-without-sidebar .layout-main .main-title {
        margin-left: 60px;
        margin-top: 41px;
    }

.layout-sidebar {
    grid-area: sidebar;
    margin-top: 41px;
    margin-left: 40px;
}

.layout-footer {
    grid-area: footer;
}

.base-layout-with-sidebar {
    display: grid;
    column-gap: 40px;
    grid-template-columns: 250px auto;
    grid-template-rows: auto;
    grid-template-areas:
        "title title"
        "menu menu"
        "sidebar main"
        "footer footer";
}

.base-layout-without-sidebar {
    display: grid;
    column-gap: 40px;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
        "title"
        "menu"
        "main"
        "footer";
}


/*Bootstrap overrides*/
.btn-primary, .btn-danger, .btn-success, .btn-delete {
    font-weight: 600;
}

.btn-primary {
    color: white;
    background: var(--button-primary-bg-color);
    border-color: var(--button-primary-bg-color);
}

    .btn-primary:hover {
        color: white;
        background: var(--button-primary-hover-bg-color);
    }

    .btn-primary:focus {
        color: white;
        background: var(--button-primary-bg-color);
        border-radius: 6px;
    }

        .btn-primary:focus:hover {
            background: var(--button-primary-hover-bg-color);
        }

    .btn-primary:disabled {
        color: white;
        background: dimgrey;
        border-color: dimgrey;
        border-radius: 6px;
    }

.btn-outline-secondary {
    font-weight: 600;
    color: var(--button-secondary-text-color);
    background: var(--button-secondary-bg-color);
    border-color: var(--button-secondary-text-color);
}

    .btn-outline-secondary:hover {
        color: var(--button-secondary-text-color);
        background: var(--button-secondary-hover-bg-color);
    }

    .btn-outline-secondary:focus {
        color: var(--button-secondary-text-color);
        background: var(--button-secondary-bg-color);
        border-radius: 6px;
    }

        .btn-outline-secondary:focus:hover {
            color: var(--button-secondary-text-color);
            background: var(--button-secondary-hover-bg-color);
        }

    .btn-outline-secondary:disabled {
        color: darkgray;
        background: white;
        border-color: white;
        border-radius: 6px;
    }

.btn-icon {
    color: var(--icon-color);
    border: none;
}

    .btn-icon:hover {
        color: var(--icon-hover-color);
    }

.modal.fade .modal-dialog {
    transition: transform 0.1s ease-out;
    transform: scale(1);
}

.modal.fade.show .modal-dialog {
    transform: scale(1);
}

.edit-button {
    color: var(--icon-color);
}

    .edit-button:hover {
        color: var(--icon-hover-color);
    }

.dropdown-item {
    color: black;
}

    .dropdown-item:hover {
        background-color: var(--menu-hover-bg-color);
        color: black;
    }

    .dropdown-item.active {
        background-color: var(--menu-active-bg-color);
        color: black;
    }

        .dropdown-item.active:hover {
            background-color: var(--menu-hover-active-bg-color);
        }

.display-6 {
    font-size: 1.7rem;
}

.display-5 {
    font-size: 2.2rem;
}

.display-4 {
    font-size: 2.7rem;
}

.bg-info {
    color: black;
    background-color: var(--petroleum-5) !important
}

.bg-success {
    color: black;
    background-color: var(--green-20) !important
}

.bg-danger {
    color: black;
    background-color: var(--red-20) !important
}

.nav-link {
    color: black;
}

    .nav-link:hover {
        color: black;
    }

.navbar-main .nav-link.active {
    color: white !important;
    border-bottom: 2px solid white;
    padding-bottom: 4px;
    text-decoration: none;
}

    .navbar-main .nav-link.active:hover {
        color: var(--petroleum-20) !important;
        border-bottom-color: var(--petroleum-20);
    }

.back-link {
    color: blue;
}

    .back-link:hover {
        color: darkblue;
    }

.active > .page-link {
    background-color: var(--pagination-active-page-bg-color);
    border-color: var(--pagination-active-page-bg-color);
}

.pagination {
    --bs-pagination-color: black;
    --bs-pagination-hover-color: none;
}

.table.dataTable thead {
    color: black;
}

table.dataTable thead > tr > th {
    margin-top: 1px;
    padding-top: 6px;
    padding-bottom: 7px;
    background-color: var(--sidebar-hover-color) !important;
}

    table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc {
        font-size: 1.2rem;
    }

.table {
    --bs-table-color: none;
}

.page-item.active .page-link {
    background-color: var(--pagination-active-page-bg-color);
    border-color: var(--pagination-active-page-bg-color);
}

div.dt-buttons > button {
    color: var(--button-secondary-text-color);
    background: white;
    border: 1px solid var(--button-secondary-text-color);
    display: inline-block;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    padding: .375rem .75rem;
    margin-right: 10px;
    line-height: 1.5;
    border-radius: 6px;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

    div.dt-buttons > button:hover {
        background: var(--button-secondary-hover-bg-color) !important;
        border: 1px solid var(--button-secondary-text-color) !important;
        border-radius: 6px !important;
        color: var(--button-secondary-text-color) !important;
    }

    div.dt-buttons > button:focus {
        color: var(--button-secondary-text-color);
        background: var(--button-secondary-bg-color);
        border-radius: 6px;
    }

        div.dt-buttons > button:focus:hover {
            color: var(--button-secondary-text-color);
            background: var(--button-secondary-hover-bg-color);
        }

.dt-search label[for='dt-search-0'] {
    font-weight: bold !important;
}

/*Tinymce overrides*/
.tox .tox-collection--list .tox-collection__item--active {
    background-color: var(--menu-active-bg-color) !important;
    color: black !important;
}

    .tox .tox-collection--list .tox-collection__item--active:hover {
        background-color: var(--menu-hover-active-bg-color) !important;
    }

.tox .tox-mbtn--active {
    background-color: var(--menu-active-bg-color) !important;
}

.table-filitems {
    display: flex;
    flex-flow: column nowrap;
    row-gap: 1rem;
}

.list-item-fil {
    display: flex;
}

.list-item-fil-col {
    display: flex;
    flex: 1;
    justify-content: left;
    align-items: center;
}

.list-item-fil-col-button {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}