@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    --certificationPieWidth:100px;
    --bootstrapColorPrimary: #0d6efd; 
    --bootstrapColorWarning: orange; 
    --bootstrapColorSuccess: #63c163;
    --bootstrapColorDanger: #dc3545;
    --listStripes: #f5f5f5;
}

@font-face {
    font-family: 'Neo Sans Std';
    src: url("Fonts/NeoSansStd-Regular.otf");
}

html, body {
    font-family: 'Neo Sans Std', sans-serif;
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.overflow-visible .dxbl-modal-body {
    overflow: visible !important;
}

.selfservice-popup-edit-form
{
    max-width: 600px !important;
}

.selfservice-popup-edit-form-lg
{
    max-width: 900px !important;
}

.selfservice-popup-edit-form-xl
{
    max-width: 1200px !important;
}

.suggestion-list-group {
    max-height: 30dvh;
    overflow: auto;
}

#page-content-wrapper {
    padding-bottom: 100px;
    transition: padding-left 0.3s linear;
}

.loading-overlay{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.5;
    justify-content: center;
    align-items: center;
    z-index: 1060;
    display: flex;
    background-color: #000;
}

.error-page-message-container{
    margin-top: 15dvh;    
}

.error-page-logo{
    width: 256px;
    height: 256px;
    object-fit: cover;
}

.selfService-color-transparent{
    color: transparent !important;
}
.selfservice-center{
    margin: auto !important;
}

.selfservice-navbar {
    border: none;
    position: fixed;
    padding: 0;
    box-shadow: 0 3px 3px rgba(0,0,0,.75);
    background-color: var(--navbarColor);
}

.columns-1{
    column-count: 1;
}

.columns-2{
    column-count: 2;
}

.columns-3{
    column-count: 3;
}

.columns-4{
    column-count: 4;
}

.column-gap-1{
    column-gap: 0.25rem;
}

.column-gap-2{
    column-gap: 0.5rem;
}

.column-gap-3{
    column-gap: 1rem;
}

.column-gap-4{
    column-gap: 1.5rem;
}

.column-gap-5{
    column-gap: 3rem;
}

.column-item{
    break-inside: avoid;
}

.column-gap-1>.column-item{
    margin-bottom: 0.25rem;
}

.column-gap-2>.column-item{
    margin-bottom: 0.5rem;
}

.column-gap-3>.column-item{
    margin-bottom: 1rem;
}

.column-gap-4>.column-item{
    margin-bottom: 1.5rem;
}

.column-gap-5>.column-item{
    margin-bottom: 3rem;
}

.dxbl-dropdown .dxbl-list-box {
    height: unset;
    max-height: 300px;
}

.dxbl-grid-header-content:has(.right-align) {
    text-align: right;
    justify-content: right;
}

.dxbl-dropdown:has(.text-wrap) .dxbl-listbox-item {
    white-space: initial !important;
}

.content {
    padding-top: 1.5rem;
}

.btn{
    border: none;
}

.badge {
    border-radius: 1rem !important;
}

.valid.modified:not([type=checkbox]):not([type=radio]) {
    outline: 1px solid #26b050;
    color: inherit;
}

.outline-0 {
    outline: none !important;
}

.invalid {
    outline: 1px solid red;
    color: inherit;
}

.field-invalid input:not(.dxbl-text-edit-input), .field-invalid .dxbl-text-edit {
    outline: 1px solid red !important;
    border-style: none !important;
    color: inherit !important;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.logo {
    background-repeat: no-repeat;
    background-position: 16px 6px;
    background-size: 92%;
}

.selfservice-icon-button{
    border: none;
    background-color: transparent;
    font-size: 1.5rem;
    padding: 0;
}

.selfservice-mobile-menu-button {
    z-index: 1052;
    bottom: 20px;
    right: 20px;
    height: 50px;
    width: 50px;
}

/* SIDEBAR & NAVBAR */

.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    height: 1.3em;
}

.selfservice-navbar .dropdown-toggle .bi-person-circle {
    font-size: 1.75rem;
}

.navbar-toggler {
    display: block;
    height: 50px;
    border-radius: 0;
}

.navbar-toggler:hover {
    background-color: #FF8800 !important;
}

.fixed-top {
    top: 0;
    border-width: 0 0 1px;
}

.nav-link.navbar-nav-item {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 14px !important;
}

.navbar-brand {
    padding: 0;
    max-height: 50px;
}

.nav-button-color {
    color: var(--navButtonColor)
}

.nav-button-color:hover {
    color: var(--navButtonColor);
    background-color: var(--navButtonBackgroundColorHover)
}

.top-menu-button-color {
    color: var(--navbarTopMenuButtonColor);
    background-color: var(--navbarTopMenuButtonBackgroundColor);
}

.top-menu-button-color:hover {
    background-color: var(--navbarTopMenuButtonBackgroundColorHover);
}

#sidebar-wrapper {
    margin-top: 50px;
    width: 250px;
    background-clip: unset;
}

.sidebar-color {
    background-color: var(--sidebarColor);
}

.sidebar-info-page a {
    text-decoration: none;
}

.sub-items {
    padding: 0;
    background-color: var(--sidebarSubItemsBackgroundColor);
    list-style-type: none;
    box-shadow: inset 0 7px 4px -6px #000,inset 0 -7px 4px -6px #000;
    -webkit-box-shadow: inset 0 7px 4px -6px rgba(0,0,0,.75),inset 0 -7px 4px -6px rgba(0,0,0,.75);
    -ms-box-shadow: inset 0 7px 4px -6px rgba(0,0,0,.75),inset 0 -7px 4px -6px rgba(0,0,0,.75);
    box-shadow: inset 0 7px 4px -6px rgba(0,0,0,.75),inset 0 -7px 4px -6px rgba(0,0,0,.75);
}

.sidebar-subitem-text-color, .sidebar-subitem-text-color:hover {
    color: var(--sidebarSubItemColor);
}

.sidebar-nav {
    padding: 0;
    overflow-y: auto;
}

.top-item {
    list-style-type: none;
    padding: 0;
}

.sidebar-button-text-color[aria-expanded=false]::after {
    position: absolute;
    right: 15px;
    font-family: "Font Awesome 5 Free", serif;
    font-size: 15px;
    font-weight: 900;
    content: "\f078";
}

.pointer {
    cursor: pointer;
}

.sidebar-button-text-color[aria-expanded=true]::after {
    position: absolute;
    right: 15px;
    font-family: "Font Awesome 5 Free", serif;
    font-size: 15px;
    font-weight: 900;
    content: "\f077";
}

.top-menu-button {
    background-color: #314e5e;
}

#menu-toggle {
    height: 50px;
}

.dropdown-toggle > .top-menu-button-icon {
    vertical-align: middle;
    padding-bottom: 2px;
    margin-left: 5px;
}

.dropdown-toggle {
    max-height: 50px;
}

.sidebar-button-text-color, .sidebar-button-text-color:hover {
    color: #fff;
}

.sidebar-subitem-color {
    color: #000;
}

.sidebar-subitem-color:hover {
    color: var(--sidebarSubItemColorHover);
    background-color: var(--sidebarSubItemBackgroundColorHover);
}

.open-page, .open-page:hover {
    background-color: #FF8800;
    border-color: #FF8800;
}

.open-page > a, .open-page > a:hover {
    color: #fff;
}

.top-menu-button {
    border: none;
    border-radius: 0;
    padding: 0 18px;
    margin: 0 !important;
}

.top-menu-button:focus {
    outline: none;
}

.sidebar-button-color {
    background-color: var(--sidebarMenuButtonBackgroundColor);
}

.sidebar-button-color:hover {
    color: var(--sidebarMenuButtonColorHover);
    background-color: var(--sidebarMenuButtonBackgroundColorHover);
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a, .sidebar-nav .top-item li  {
    font-family: 'Neo Sans Std', sans-serif;
    font-size: 15px;
    display: block;
    text-decoration: none;
}

.sidebar-nav li a:hover {
    background: none;
}

.menu-item-expandable {
    color: #5A5A5A;
}

.top-item {
    list-style-type: none;
    padding: 0;
}

.mobile-menu-button {
    z-index: 1052;
    bottom: 20px;
    right: 20px;
    height: 50px;
    width: 50px;
}

.sidebar-nav-admin {
    line-height: 40px;
}

/* SIDEBAR & NAVBAR END */

.shadow-sm {
    box-shadow: 0 1px 6px -3px rgba(0,0,0,.9) !important;
}

.hover-shadow{
    cursor: pointer;
    top: 0;
    left: 0;
    transition: all 0.05s linear;
}

.hover-shadow:hover {
    box-shadow: 0 1px 7px -3px rgba(0,0,0,.9) !important;
    top: -1px;
    left: -1px;
}

.striped {
    background-color: var(--listStripes);
    padding-top: 3px;
    padding-bottom: 3px;
}

.striped:nth-child(2n) {
    background-color: transparent;
}

.my-overview-course-request-add-participant {
    padding: 0 0 0 0 !important;
}

.my-overview-course-request-status {
    padding: 0 0 5px 0 !important;
}

.my-overview-course-request-created-time {
    padding: 0 0 5px 0 !important;
}

.my-overview-course-request-participant-container {
    padding: 5px 0 0 0 !important;
}

.CommunityGroupCardPhoto {
    height: 125px;
    object-fit: cover;
}

.CommunityGroupCardWithNoPhoto img {
    height: 0 !important;
    overflow: hidden;
}

.CommunityGroupPhotoDefaultBackground {
    height: 125px;
    background-color: rgba(0, 0, 0, 0.3);
}

img[alt="mygroup card image"] {
    font-size: 0;
}

.CommunityGroupPhoto {
    height: 200px;
    object-fit: cover;
}

.nav-tabs .nav-link{
    color: #8a8a8a;
}

.nav-tabs .nav-link:hover{
    color: #8a8a8a;
    border-color: transparent;
}

.nav-tabs .nav-link.active:hover {
    border-color: #dee2e6 #dee2e6 #fff;
}

.nav-tabs .nav-item {
    margin-bottom: -2px;
}

.community-group-tab-button-text{
    font-size: 0.7rem;
}

.community-group-announcement-carousel-inner-container{
    height: 250px;
    background-color: rgb(45, 45, 45);
}

.community-group-announcement-carousel-item-container{
    height: 230px;
    background-color: rgb(45, 45, 45);
}

.community-group-announcement-carousel-item-container-overlay{
    height: 230px;
    z-index: 1;
    background: linear-gradient(0deg, rgba(45, 45, 45,1) 8%, rgba(255,255,255,0) 70%);
    margin-bottom: -230px;
    position: inherit;
    cursor: pointer;
}

.community-group-announcement-carousel-item-container * {
    color: #fff !important;
}

.carousel-control-next-icon, .carousel-control-prev-icon{
    opacity: 0.5;
}

.carousel-control-next:hover .carousel-control-next-icon, .carousel-control-prev:hover .carousel-control-prev-icon{
    opacity: 1;
}

.carousel-control-next:hover, .carousel-control-prev:hover{
    background-color: rgba(255, 255, 255, 0.1);
}

.selfservice-file-for-download{
    cursor: pointer;
}

.selfservice-file-for-download:hover{
    background-color: #efefef;
}

.user-avatar {
    height: 50px;
    width: 50px;
    padding: 11px 14px;
    font-size: 1.5rem;
    border: 1px solid #efefef !important;
}

.user-avatar-small {
    height: 45px;
    width: 45px;
    padding: 13px 14px;
    border: 1px solid #efefef !important;
}

.user-avatar-large {
    height: 70px;
    width: 70px;
    padding: 16px 20px;
    border: 1px solid #efefef !important;
    font-size: 2rem;
}

.rounded-rich-text .ql-container{
    border-radius: 23px;
}

.rounded-rich-text .ql-container.ql-snow, .rounded-rich-text .ql-toolbar.ql-snow {
    border: 1px solid #efefef !important;
}

.rounded-rich-text .ql-toolbar{
    display: inline-block;
    border-radius: 23px;
    margin-top: 10px;
}

.create-meeting-richtext .ql-editor {
    min-height: 200px;
}

.comments-counter{
    font-size: 0.7rem;
    right: 12px;
    margin-top: -33px;
    padding: 0 5px;
}

.comment-content>p:last-of-type {
    margin-bottom: 0;
}



.comment-editor-container .ql-toolbar{
    display: none;
}

.message-editor-container .ql-editor{
    padding: 15px 15px;
}

.send-message-button {
    height: 45px;
}

.fade-in-on-show {
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
    transition: transform .6s ease;
}

.candidate-declaration-text {
    max-height: 400px;
}

.candidate-declaration-text * {
    background-color: transparent !important;
}

:focus {
    outline: 2px solid #000 !important;
    /* Blazorise Modal requires this number - else 1 would be fine*/
    /*z-index: 1050;*/
}

button:focus {
    position: relative;
}

/* When mouse is detected, ALL focused elements have outline removed. */
html.using-mouse :focus {
    outline: none !important;
    /*z-index: 1000;*/
}

.btn.focus, .btn:focus {
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

/* Blazorise switch on focus when tabbing */
html:not(.using-mouse) .custom-control-input:focus ~ .custom-control-label::before {
    outline: 2px solid #000 !important;
}

.opacity-09 {
    opacity: 0.9!important;
}

.opacity-08 {
    opacity: 0.8!important;
}

.opacity-07 {
    opacity: 0.7!important;
}

.opacity-06 {
    opacity: 0.6!important;
}

.opacity-05 {
    opacity: 0.5!important;
}

.opacity-04 {
    opacity: 0.4!important;
}

.opacity-03 {
    opacity: 0.3!important;
}

.opacity-02 {
    opacity: 0.2!important;
}

.opacity-01 {
    opacity: 0.1!important;
}

body.modal-open {
    overflow: visible;
}

.snackbar-show{
    padding: 3rem !important;
}

.snackbar-body{
    font-size: 2rem !important;
}

.political-text-process-logo{
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiIGhlaWdodD0iMzJweCIgaWQ9InN2ZzIiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDMyIiB3aWR0aD0iMzJweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9ImJhY2tncm91bmQiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMzIiIHdpZHRoPSIzMiIvPjwvZz48ZyBpZD0iZG9jdW1lbnRfeDVGX3NhbnNfeDVGX2VkaXQiPjxwYXRoIGQ9Ik0zMiwyM2MtMC4wMDItNC42MzQtMy41MDEtOC40NDQtOC04Ljk0MVY1LjU4NEwxOC40MTQsMEgwdjMyaDI0di0wLjA1OUMyOC40OTksMzEuNDQxLDMxLjk5OCwyNy42MzMsMzIsMjN6IE0xNy45OTgsMi40MTMgICBMMjEuNTg2LDZoLTMuNTg4VjIuNDEzeiBNMiwzMFYxLjk5OGgxNHY2LjAwMWg2djYuMDZjLTQuNTAxLDAuNDk4LTgsNC4zMDgtOCw4Ljk0MWMwLDIuODI5LDEuMzA4LDUuMzUxLDMuMzQ5LDdIMnogTTIzLDI5Ljg4MyAgIGMtMy44MDEtMC4wMDktNi44NzYtMy4wODQtNi44ODUtNi44ODNjMC4wMDktMy44MDEsMy4wODQtNi44NzYsNi44ODUtNi44ODVjMy43OTksMC4wMDksNi44NzQsMy4wODQsNi44ODMsNi44ODUgICBDMjkuODc0LDI2Ljc5OSwyNi43OTksMjkuODc0LDIzLDI5Ljg4M3oiLz48cmVjdCBoZWlnaHQ9IjQuMjQzIiB0cmFuc2Zvcm09Im1hdHJpeCgtMC43MDcxIDAuNzA3MSAtMC43MDcxIC0wLjcwNzEgNTYuNTI2OSAyMC41ODU4KSIgd2lkdGg9IjcuMDcxIiB4PSIyMC40NjQiIHk9IjE5Ljg3OSIvPjxwb2x5Z29uIHBvaW50cz0iMjIsMjcgMTksMjcgMTksMjQgICIvPjwvZz48L3N2Zz4=");
}


.meeting-card-less{
    height: 50px;
    overflow: hidden;
}

.donation-subscription {
    transition: all 0.1s ease-out;
    box-shadow: 0 0 5px 0 #d5d5d5;
}

.donation-subscription:hover {
    transform: scale(1.03);
    outline: 1px solid var(--bootstrapColorPrimary);
    box-shadow: 0 0 5px 0 var(--bootstrapColorPrimary);
}

.donation-subscription.selected {
    box-shadow: 0 0 5px 0 var(--bootstrapColorPrimary);
    border: 1px solid var(--bs-primary);
    background-color: var(--bs-primary);
    color: var(--bs-light);
}

.selfservice-meeting-agenda-detailed-modal-body{
    height: 50vh; 
    overflow-y: auto;
}

.selfservice-meeting-agenda-detailed-overflow-y{
    overflow-y: auto;
}

.selfservice-meeting-participant-height{
    height: 200px;
}

.child-img-max-width-100 img{
    max-width: 100%;
}

.selfservice-module-container-height {
    height: 500px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

.certification-module-registrations-container *{
    font-size: small;
}

/* width */
.selfservice-module-container-height::-webkit-scrollbar {
    width: 2px;
    position: absolute;
}

/* Track */
.selfservice-module-container-height::-webkit-scrollbar-track {
    color: transparent;
}

/* Handle */
.selfservice-module-container-height::-webkit-scrollbar-thumb {
    background: lightgray;
    border-radius: 2px;
}

.ql-picker-options {
    z-index: 2 !important;
}

/* Handle on hover */
.selfservice-module-container-height:hover::-webkit-scrollbar-thumb {
    background: #5d7398;
}


/* MULTI SPINNER */
/* http://cfoucht.com/loadlab/ */

.multi-spinner-container {
    width: 150px;
    height: 150px;
    position: relative;
    margin: 30px auto;
    overflow: hidden;
}

.multi-spinner {
    position: absolute;
    width: calc(100% - 9.9px);
    height: calc(100% - 9.9px);
    border: 5px solid transparent;
    border-top-color: #ff5722;
    border-radius: 50%;
    -webkit-animation: spin 5s cubic-bezier(0.17, 0.49, 0.96, 0.76) infinite;
    animation: spin 5s cubic-bezier(0.17, 0.49, 0.96, 0.76) infinite;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* MULTI SPINNER END */

.accounting-year-report, .ledger-entries-desktop-view {
    width: 100%;
    font-size: 6px;
}

.accounting-year-report td, .ledger-entries-desktop-view td{
    padding: 2px !important;
}

.accounting-year-report th, .ledger-entries-desktop-view th{
    text-align: center;
}

.accounting-year-report tr, .accounting-year-report td, .ledger-entries-desktop-view tr, .ledger-entries-desktop-view td {
    border: 1px solid #ececec;
    padding: 8px !important;
}

.accounting-year-report-category, .accounting-year-report-category-grouping, .accounting-year-report-type {
    font-weight: bold;
}

.accounting-year-report-category-grouping, .accounting-year-report-type {
    background-color: #ececec;
}

.accounting-year-report-row-name{
    text-indent: 1rem;
}

/*.accounting-year-report > td {*/
/*    padding: 8px !important;*/
/*}*/

.accordion-button-content{
    width: calc(100% - 20px);
    padding-right: 1.25rem;
}

.accordion-above-banner{
    padding: 0 2.5rem 0 1.25rem;
    width: calc(100% - 20px);
}

.accordion-padding{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.accordion-body-arrow-reduction{
    width: calc(100% - 20px);
}

.accordion > .card {
    border: 0 !important;
    border-radius: 0;
}

.accordion-button-remove-arrows {
    padding-right: 0 !important;
}

.accordion-button-remove-arrows::after {
    background-image: unset !important;
}

.snackbar-stack{
    z-index: 9999;
}

.user-menu {
    min-width: 300px;
    right: 0;
}

.snackbar-show{
    box-shadow: 2px 2px 40px #888;
}

.certification-nav-icon>img{
    height: 1.5rem;
    width: 1.5rem;
}

.certification-module-chevron{
    width: 100px;
    height: 112px;
}

.certification-module-chevron>img{
    height: 30% !important;
}

.certification-module-progress-title {
    max-width: calc(100vw - (var(--certificationPieWidth) + 30px) - 4rem);
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.certification-overview-terms-content {
    max-height: 50vh;
    width: 100%;
    overflow: auto;
}

.certification-remark-history .card-body{
    max-height: 400px;
    overflow-y: auto;
}

.my-overview-card {
    max-height: 80vh;
    padding: 10px;
}

.my-overview-card h1 {
    font-size: 20px;
}

.my-overview-card h2 {
    font-size: 18px;
}

.my-overview-card h3 {
    font-size: 16px;
}

.my-overview-card h4 {
    font-size: 14px;
}

.my-overview-card .text-muted {
    font-size: 12px !important;
}

.ps-270 {
    padding-left: 270px !important;
}

.w-120 {
    width: 120px;
}

.w-200 {
    width: 200px;
}

.group-settings-modal {
    max-height: 50vh !important;
    overflow: auto !important;
}

.lift-ban-button-container {
    min-width: 100px;
}

.pagination-component {
    display: block;
    position: absolute;
    bottom: 0.875rem;
    justify-content: start;
}

.pagination-component .page-link {
    padding: 0.75rem 1rem;
}

.card-height-container {
    min-height: 60dvh;
    height: 60dvh;
    overflow: auto;
}

@media (min-height: 600px) {
    .card-height-container {
        min-height: 65dvh;
        height: 65dvh;
    }
}

@media (min-height: 750px) {
    .card-height-container {
        min-height: 70dvh;
        height: 70dvh;
    }
}

@media (min-height: 900px) {
    .card-height-container {
        min-height: 75dvh;
        height: 75dvh;
    }
}

@media (min-height: 1150px) {
    .card-height-container {
        min-height: 80dvh;
        height: 80dvh;
    }
}

/*dx grid header align right*/
span:has(> div.text-end) {
    width: 100%;
    text-align: end;
}

/* Remove arrows from input[type=number] */
input.remove-arrows::-webkit-outer-spin-button,
input.remove-arrows::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input.remove-arrows[type=number] {
    -moz-appearance: textfield;
}

/* Buy Membership Flow START */

.flow-path-card-row, .flow-path-accordion-container {
    padding-bottom: 300px;
}

.flow-path-info-card {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60dvw;
    height: 75px;
    z-index: 10;
    border: 0;
}

.flow-path-info-img {
    width: 75px;
    height: 75px;
    object-fit: cover;
}

.flow-path-card {
    box-shadow: 0 0 15px 5px #d5d5d5;
    transition: all 0.1s ease-out;
    border: none;
    background-color: transparent;
}

.flow-path-card:hover {
    cursor: pointer;
    transform: scale(1.07);
    box-shadow: 0 0 20px 0 lightgray;
}

.flow-path-card-image-round {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

.flow-path-card-row > div:nth-child(even) .d-flex {
    flex-direction: row-reverse;
}

.flow-path-card-row > div:nth-child(even) .flow-path-card-image-round  {
    border-radius: 0 0.375rem 0.375rem 0;
}

.flow-path-card-no-image-container {
    height: 100px;
}

.flow-path-card-img-mobile {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.flow-path-card-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.flow-path-description {
    max-height: 20dvh;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    margin-top: 48px;
}

.flow-path-description.expanded {
    max-height: 100%;
}

.flow-path-description-expanded {
    max-height: none;
}

.back-to-top-button {
    margin-top: 40px;
    margin-right: -20px;
    background-color: #000;
    opacity: 0.4;
    color: #fff;
    transition: all 0.2s ease-out;
}

.back-to-top-button:hover {
    background-color: #000;
    color: #fff;
    opacity: 0.6;
}

.organization-hierarchy-card {
    transition: all 0.1s ease-out;
    border-radius: 0.375rem;
}

.organization-hierarchy-card:hover {
    transform: scale(1.01);
    outline: 1px solid var(--bootstrapColorPrimary);
    box-shadow: 0 0 15px 5px #d5d5d5;
}

.hierarchy-breadcrumbs {
    white-space: nowrap;
}

.hierarchy-breadcrumbs i,
.hierarchy-breadcrumbs a {
    display: inline-block;
}

.hierarchy-breadcrumbs span {
    display: inline;
}

.non-primary-memberships-container {
    padding: 5px;
}

.non-primary-memberships-container.col-12::before, .non-primary-memberships-container.col-12::after {
    content: '';
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
}

.non-primary-memberships-container.col-12.parent-is-first-membership-in-row::before, .non-primary-memberships-container.col-12.parent-is-first-membership-in-row::after {
    left: 25%;
}

.non-primary-memberships-container.col-12.parent-is-last-membership-in-row::before, .non-primary-memberships-container.col-12.parent-is-last-membership-in-row::after {
    left: 75%;
}

.non-primary-memberships-container.col-12::before {
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 18px solid black;
}

.non-primary-memberships-container.col-12::after {
    top: -17.5px;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 18px solid white;
}

/* Buy Membership Flow END */

/*
####################################################
Pie chart 
https://www.freecodecamp.org/news/css-only-pie-chart/
https://codepen.io/t_afif/pen/XWaPXZO
####################################################
*/

@property --piePercentage{
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.certification-pie {
    --piePercentage:20;
    --pieProgressWidth:10px;
    --pieColor:darkred;

    width:var(--certificationPieWidth);
    aspect-ratio:1;
    position:relative;
    display:inline-grid;
    place-content:center;
    font-weight:bold;
    font-family:'Neo Sans Std', sans-serif;
}
.certification-pie-col{
    max-width: calc(var(--certificationPieWidth) + 30px);
}
.certification-pie:before,
.certification-pie:after {
    content:"";
    position:absolute;
    border-radius:50%;
}
.certification-pie:before {
    inset:0;
    background:
            radial-gradient(farthest-side,var(--pieColor) 98%,#0000) top/var(--pieProgressWidth) var(--pieProgressWidth) no-repeat,
            conic-gradient(var(--pieColor) calc(var(--piePercentage)*1%),#0000 0);
    -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--pieProgressWidth)),#000 calc(100% - var(--pieProgressWidth)));
    mask:radial-gradient(farthest-side,#0000 calc(99% - var(--pieProgressWidth)),#000 calc(100% - var(--pieProgressWidth)));
}
.certification-pie:after {
    inset:calc(50% - var(--pieProgressWidth)/2);
    background:var(--pieColor);
    transform:rotate(calc(var(--piePercentage)*3.6deg)) translateY(calc(50% - var(--certificationPieWidth)/2));
}
.certification-pie-animate {
    animation:p 1s 1s both;
}
.certification-pie-no-round:before {
    background-size:0 0,auto;
}
.certification-pie-no-round:after {
    content:none;
}
@keyframes p {
    from{--piePercentage:0}
}

.certification-pie-text {
    z-index: 500;
}

/*
####################################################
Pie chart END 
####################################################
*/

.certification-favorite-icon {
    font-size: 2em;
}

.certification-favorite-icon-color {
    color: #FFD700;
}

.go-to-certification-icon {
    font-size: 2em;
}

.certification-favorite-card:hover {
    -webkit-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
    transition: transform .6s ease;
    background-color: #f8f8f8;
    cursor: pointer;
}

.certification-print-icon {
    font-size: 2em;
}

.certification-print-icon-color {
    color: rgba(0,0,0,.5);
}

.card.selected{
    background-color: var(--bootstrapColorPrimary);
    color: white;
}

.selected-membership-category{
    outline: 5px solid var(--bootstrapColorPrimary);
}

.membership-flow_select-membership-category:not(.selected-membership-category):hover{
    outline: 1px solid var(--bootstrapColorPrimary);
    box-shadow: 0px 0px 5px 0px var(--bootstrapColorPrimary);
}

.membership-td-price{
    min-width: 85px;
}

/* Due to Blazorise Modal z-index 1055 */
.dxbl-popup-cell {
    z-index: 1056 !important;
}

.dxbl-modal-body{
    overflow-y: auto;
}

.zxing-container, .zxing-video-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.zxing-container .zxing-video-container video {
    width: 100%;
    pointer-events: none;
    height: 300px;
    object-fit: cover;
}

.qr-code-scanner-inner-border {
    width: calc(100% - 120px);
    height: 179px;
    top: 190px;
    border: 2px solid whitesmoke;
    border-radius: 10px;
    z-index: 1;
}

.qr-code-scanner-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 40px 6px 62px rgba(0, 0, 0, 0.5);
}

.election-candidate-priority {
    font-size: 1.2rem;
}

.election-candidate-priority-arrow-up {
    cursor: pointer;
}

.election-candidate-priority-arrow-down {
    cursor: pointer;
    margin-left: 10px;
}

.election-progressbar {
    height: 20px;
}

.custom-summary-row-styling table tbody tr:nth-last-child(2) {
    background-color: #f4f4f4;
    font-weight: bold;
}

.custom-summary-row-styling table tbody tr:nth-last-child(2)>td {
    border-left: 0;
}

.register-course-attendance-alert {
    text-align: center;
    z-index: 9999;
}

.register-course-attendance-alert-overlay {
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 9998;
    background-color: rgba(0,0,0,0.75);
}

.attendance-registration-course-name {
    background: #777; 
    color: white; 
    padding: 1rem;
}

.attendance-registration-progress-bar {
    height: 30px;
}

.attendance-registration-progress-bar-container {
    top: 30px;
    width: calc(100% - 120px)
}

.zxing-button.stop {
    display: none !important;
}

.evaluation-question-checkmark{
    background-color: var(--bootstrapColorSuccess);
    border-radius: 12px;
    width: 18px;
    height: 18px;
    display: inline-block;
    position: relative;
    left: 5px;
}

.evaluation-question-helpText {
    font-style: italic; 
    color: var(--helpTextColor)
}

.candidate-picture {
    height: 75px;
    width: 75px;
    object-fit: cover;
}

.candidate-name {
    font-size: 1rem;
}

.candidate-description {
    font-size: 0.75rem;
}

.candidate-card-body {
    padding: 10px;
    overflow: hidden;
}


.membersite-html-editor {
    min-height: 330px; 
}

.custom-validation-message {
    color: var(--bootstrapColorDanger);
    position: absolute;
    margin-left: 0.25rem;
    font-size: 0.9rem;
}

.custom-text-overflow {
    display: inline-block !important;
    max-width: calc(100%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
####################################################
F L O A T I N G  L A B E L  START
####################################################
*/

.floating-label {
    position: absolute;
    font-size: 1rem;
    left: 0;
    top: 50%;
    background-color: white;
    color: rgb(128, 128, 128);
    padding: 0 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    z-index: 998;
}

.form-floating>textarea.form-control {
    height: 100px;
}

.input-with-floating-label {
    outline: none;
    transition: 0.1s ease-out;
}

.input-with-floating-label:not(:placeholder-shown) + .floating-label {
    top: -0.75rem;
    left: 0.5rem;
    font-size: 0.85rem;
}

.input-with-floating-label:not(:focus)::placeholder {
    opacity: 0;
}

/*
####################################################
F L O A T I N G  L A B E L  END
####################################################
*/

/*
####################################################
H E A D E R   W I T H   H E L P   T E X T   START
####################################################
*/

.header-with-help-text-item {
    border: none;
}

.header-with-help-text-item-button {
    font-size: 1.5rem;
}

.header-with-help-text-item-button:not(.collapsed) {
    background-color: transparent;
    border-bottom: none;
    box-shadow: none;
}

.header-with-help-text-item-button:not(.collapsed)::after,
.header-with-help-text-item-button::after {
    display: none;
}

.header-with-help-text-item-button:focus {
    box-shadow: none;
}

.header-with-help-text-item-body {
    border-top: 1px solid #dee2e6;
    margin: 0;
}

.header-with-help-text-item-button-content-icon {
    margin-right: 0.25rem;
    font-size: 1.75rem;
}

/*
####################################################
H E A D E R   W I T H   H E L P   T E X T   END
####################################################
*/


/*
################################################################
T R E E V I E W   L A Y O U T   H O R I Z O N T A L   START
################################################################
*/

.dx-tree-view-layout {
    height: 100%;
}

.dx-tree-view-layout .dxbl-treeview-items-container {
    display: flex;
    height: 100%;
    padding-top: 0.25rem;
    padding-bottom: 0;
    align-content: center;
}

.dx-tree-view-layout .dxbl-treeview-items-container .dxbl-checkbox {
    align-items: center;
}


/*
################################################################
T R E E V I E W   L A Y O U T   H O R I Z O N T A L   END
################################################################
*/


/*
################################################################
M E M B E R S I T E   D R O P D O W N   START
################################################################
*/

.membersite-dropdown {
    color: #757575;
}

.membersite-dropdown .btn-group {
    border-radius: 0.1875rem;
}

.membersite-dropdown .dropdown-btn {
    font-size: inherit;
}

.membersite-dropdown .dropdown-toggle {
    color: #5d5f62;
    padding-left: 0.6375rem;
    padding-right: 0.6375rem;
}

.membersite-dropdown .dropdown-toggle:hover {
    background-color: #e8e9e9;
}

.dropdown-without-arrow > .dropdown-toggle::after {
    display: none;
}

.message-reports {
    max-height: 250px;
    overflow: auto;
}

.membersite-dropdown-overflow {
    max-height: 500px;
    overflow: auto;
}

.membersite-dropdown .dxbl-scroll-viewer {
    max-height: 300px;
}

/*
################################################################
M E M B E R S I T E   D R O P D O W N   END
################################################################
*/


/*
################################################################
M E M B E R S I T E   I M A G E   S E L E C T O R   START
################################################################
*/

.image-selector-drop-area {
    border: 2px dashed gray;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: lightgray;
    font-size: 1.5rem;
    cursor: pointer;
    position: relative;
    width: 250px;
    height: 250px;
    text-align: center;
}

.image-selector-drop-area:hover {
    background-color: antiquewhite;
    color: #333;
}

.image-selector-drop-area input[type=file] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.image-selector-drop-area button {
    border: none;
    background: none;
}

.image-selector-remove-button-overlay {
    background: grey;
}

.image-selector-drop-area-drag {
    background-color: darkgray;
}

/*
################################################################
M E M B E R S I T E   I M A G E   S E L E C T O R  END
################################################################
*/

/*
################################################################
M E M B E R S I T E   F I L E   S E L E C T O R   START
################################################################
*/

.file-select-container {
    border-radius: 0.375rem;
}

.file-select-ul {
    list-style: none;
    margin-top: 0.75rem;
    max-height: 200px;
}

/*
################################################################
M E M B E R S I T E   F I L E   S E L E C T O R  END
################################################################
*/

/*
################################################################
M E M B E R S I T E   M O D A L   START
################################################################
*/

.membersite-modal .modal-content {
    z-index: 1055;
}

.membersite-modal .modal-body {
    max-height: 75vh; 
    overflow: auto;
}

/*
################################################################
M E M B E R S I T E   M O D A L   END
################################################################
*/

/*
################################################################
M E M B E R S I T E   F L O W   START
################################################################
*/

.membersite-flow {
    border: none;
    box-shadow: 0 0 10px 5px lightgrey;
}

.accordion-step-header {
    border-radius: 0 !important;
    border: none !important;
    color: var(--bs-accordion-btn-color) !important;
    background-color: rgb(233, 236, 239) !important;
}

.membersite-flow .accordion-item:not(:last-of-type).accordion-item-collapsed {
    border-bottom: 1px solid lightgrey !important;
}

.membersite-flow .accordion-item:last-of-type.accordion-item-collapsed .accordion-step-header {
    border-radius:  0 0 0.375rem 0.375rem !important;
}

/*
################################################################
M E M B E R S I T E   F L O W   END
################################################################
*/

/*
################################################################
D X G R I D   START
################################################################
*/

.dxbl-grid {
    background-color: #ffffff;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
}

.dxbl-grid .dxbl-scroll-viewer {
    border-radius: 0.375rem !important;
}

.dxbl-grid .dxbl-grid-header-row {
    background-color: #f9f9f9;
    border-bottom: 2px solid #dee2e6;
}

.dxbl-grid th {
    padding: 0.5rem 0.375rem !important;
    font-size: 0.875rem !important;
}

.dxbl-grid td:not(.dxbl-grid-empty-data, .dxbl-grid-edit-form) {
    padding: 0.375rem !important;
    font-size: 0.825rem !important;
}

.dxbl-grid .dxbl-grid-edit-form {
    padding: 0.375rem 1rem 1rem 1rem !important;
}

.hide-virtual-spacer-elements tr[dxbl-top-virtual-spacer-element] {
    display: none;
}

.hide-virtual-spacer-elements tr[dxbl-bottom-virtual-spacer-element] {
    display: none;
}

/*
################################################################
D X G R I D   END
################################################################
*/

/*
################################################################
D X C O M B O B O X   START
################################################################
*/

dxbl-combobox {
    height: 100%;
    padding: .375rem 0.25rem .375rem .75rem !important;
    border-radius: 0.375rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.dxbl-text-edit .dxbl-btn-group {
    display: none !important;
}

.dxbl-floating-label .dxbl-text-edit .dxbl-text-edit-input {
    cursor: pointer;
    padding-left: 0 !important;
    padding-right: 1.875rem !important;
}

dxbl-dropdown[placement-target*="#dxbl-cbx-item-template-search"] dxbl-listbox ul {
    width: 100% !important;
    overflow-x: hidden;
}

dxbl-dropdown[placement-target*="#dxbl-cbx-item-template-search"] .dxbl-listbox-item {
    border-bottom: 1px solid lightgrey !important;
}

.dxbl-floating-label > .dxbl-text-edit {
    padding: 0 !important;
}

.dxbl-floating-label > .dxbl-text-edit > .dxbl-text-edit-input {
    padding-left: 0.75rem !important;
    padding-top: 1.625rem !important;
}

.dxbl-floating-label > .dxbl-text-edit > .dxbl-edit-btn-clear {
    position: absolute;
    top: 25%;
}

.dxbl-floating-label > .dxbl-text-edit.form-select > .dxbl-edit-btn-clear {
    right: 2rem;
}

.dxbl-floating-label > .dxbl-text-edit.form-control > .dxbl-edit-btn-clear {
    right: 0.25rem;
}

.floating-label-dropdown > .dropdown {
    padding-top: 0;
}

.floating-label-dropdown > .dropdown .dropdown-btn {
    padding-top: 1.625rem;
}

.floating-form-label {
    max-width: 100% !important;
    transform: scale(1) translateY(0) translateX(0) !important;
    color: inherit !important;
}

.dxbl-floating-label > .dxbl-text-edit[is-dropdown-open] + .floating-form-label,
.dxbl-floating-label > .dxbl-text-edit:has(:focus) + .floating-form-label,
.dxbl-floating-label > .dxbl-text-edit[field-text]:not([field-text=""]) + .floating-form-label,
.dxbl-floating-label > .dxbl-text-edit[field-text]:has(:focus) + .floating-form-label,
.floating-label-input-select > select + .floating-form-label
{
    color: rgba(var(--bs-body-color-rgb), .65) !important;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem) !important;
}

/*
################################################################
D X C O M B O B O X   END
################################################################
*/

.membersite-popover-danger {
    --bs-popover-max-width: 500px;
    --bs-popover-border-color: var(--bs-danger);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: .5rem;
}

.dxbl-calendar td, .dxbl-calendar th {
    padding: 0.25rem !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.not-allowed {
    cursor: not-allowed !important;
}

.member-profile__top {
    background-color: whitesmoke;
    border-radius: 8px;
}

.close-member-form__close-date {
    width: 150px;
}

.close-member-form__close-date-label {
    margin-top: 1px;
}

.btn-extra-small {
    font-size: 0.7rem;
    vertical-align: unset;
}

.icon-small {
    font-size: 0.7rem;
}

.customfield-group-card{
    background-color: color-mix(in srgb,var(--bootstrapColorPrimary),#fff 95%);
}

.cancel-arrangement-modal-size {
    min-width: 200px !important;
}

.vipps-payment-button, .vipps-payment-button:hover{
    background-color: #ff5b24 !important;
}

.vipps-payment-button .selfservice-payment-button-text{
    margin-right: -4px;
    color: white;
}

.vipps-payment-button .selfservice-payment-button-logo{
    width: 78px;
    vertical-align: 1px;
}

.creditcard-payment-button .selfservice-payment-button-logo, .creditcard-subscription-payment-button .selfservice-payment-button-logo{
    width: 35px;
}

.fit-content {
    width: fit-content;
}

.payment-amount-received {
    width: 250px;
}

.payment-type-register-payment {
    width: 250px;
}

.payment-options {
    display:flex; 
    align-items: start;
}


/*
####################################################
F O R M   R A D I O   G R O U P   START
####################################################
*/

.form-radio-group {
    height: 100%;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
}

.form-radio-group.form-radio-group-include-label-padding {
    padding: 2rem .75rem .375rem .75rem;
}

.form-radio-group.form-radio-group-exclude-label-padding {
    padding: 1rem .75rem 1rem .75rem;
}

.form-radio-group.form-radio-group-disabled {    
    background-color: var(--bs-secondary-bg);
    opacity: 1;
}

.form-radio-group > label {
    color: var(--bs-secondary);
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

.form-radio-group .form-radio-group-radio-button {
    width: 0.85rem;
    height: 0.85rem;
}

/*
####################################################
F O R M   R A D I O   G R O U P   END
####################################################
*/

/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

/* 
Extra small devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/


/* Ultra Small devices (landscape phones, 375px and up) */
@media (min-width: 375px) {
    .meeting-agenda-circle {
        width: 24px;
        height: 24px;
        left: 1px;
        position: relative;
        z-index: 2;
        margin-top: 3px;
    }

    .meeting-agenda-circle-line {
        width: 2px;
        z-index: 1;
        top: 30px;
        left: 12px;
        bottom: 3px;
    }

    .meeting-agenda-circle-text {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
    }

    .course-request-card-date-section {
        border: none;
        margin-top: 15px;
    }
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .election-result-container{
        text-align: end !important;
    }
    
    .community-group-tab-button-text{
        font-size: 0.8rem;
    }

    .meeting-agenda-circle{
        width: 24px;
        height: 24px;
        left: 1px;
        position: relative;
        z-index: 2;
        margin-top: 3px;
    }

    .meeting-agenda-circle-line{
        width: 2px;
        z-index: 1;
        top: 30px;
        left: 12px;
        bottom: 3px;
    }

    .meeting-agenda-circle-text{
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
    }
    
    /* This should not be required yet DevExpress sets width to 144px at this breakpoint and above which looks horrendous */
    .dxbs-calendar-table {
        width: 500px !important;
    }

    .qr-code-scanner-inner-border {
        top: 150px;
    }

    .qr-code-scanner-overlay {
        box-shadow: inset 0 2px 6px 62px rgba(0, 0, 0, 0.5)
    }

    .w-sm-50 {
        width: 50%;
    }
    
    .flow-path-info-card {
        width: 40dvw;
        max-width: 1000px;
    }

    .flow-path-card-img-mobile {
        width: 150px;
        height: 150px;
    }
    
    .flow-path-card-no-image-container {
        height: 150px;
    }

    .accounting-year-report, .ledger-entries-desktop-view {
        font-size: 8px;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    #page-content-wrapper {
        padding-bottom: 0;
    }

    .certification-module-progress-title {
        font-size: 1.25rem !important;
    }

    .selfservice-navbar>.nav{
        display: flex;
    }

    .selfservice-mobile-menu-button{
        display: none !important;
    }

    .popup {
        height: calc(100vh - 3.5rem);
        max-width: calc(100vw - 3.5rem);;
    }
    .popup > .modal-content {
        top: 50%;
        transform: translate(0%, -50%);
    }
    
    .comments-counter {
        right: 21px;
    }

    .community-group-tab-button-text{
        font-size: 0.6rem;
    }

    .meeting-agenda-circle{
        width: 24px;
        height: 24px;
        left: 1px;
        position: relative;
        z-index: 2;
        margin-top: 3px;
    }

    .meeting-agenda-circle-line{
        width: 2px;
        z-index: 1;
        top: 30px;
        left: 12px;
        bottom: 3px;
    }

    .meeting-agenda-circle-text{
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
    }

    .certification-overview-terms-card {
        width: 30vw;
    }
    
    .certification-module-progress-title {
        max-width: calc(100vw - (var(--certificationPieWidth) + 30px) - 90px);
    }

    .CommunityGroupCardPhoto {
        height: 150px;
        object-fit: cover;
    }

    .CommunityGroupPhotoDefaultBackground {
        height: 150px;
        background-color: rgba(0, 0, 0, 0.3);
    }
    
    .candidate-picture {
        height: 130px;
        width: 130px;
        object-fit: cover;
    }

    .candidate-name, .candidate-description {
        font-size: unset;
    }

    .candidate-card-body {
        padding: 25px;
    }
    
    .flow-path-card, .flow-path-card-image-container, .flow-path-card-no-image-container {
        width: 200px;
    }

    .flow-path-card-image-container {
        height: 200px;
    }
    
    .flow-path-card-no-image-container {
        height: 250px;
    }

    .dx-tree-view-layout .dxbl-treeview-items-container {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -webkit-flex-flow: row wrap !important;
        -ms-flex-flow: row wrap !important;
        flex-flow: row wrap !important;
        padding-top: 0.5rem;
    }

    .dx-tree-view-layout .dxbl-treeview-items-container .dxbl-checkbox {
        width: auto !important;
        padding-left: 0.75rem !important;
        padding-top: 0 !important;
    }

    .accounting-year-report, .ledger-entries-desktop-view {
        font-size: 11px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .certification-module-progress-title {
        font-size: 1.25rem !important;
        width: calc(100% + 30px);
        margin-left: -15px;
    }
    
    .community-group-tab-button-text{
        font-size: 0.9rem;
    }

    .meeting-agenda-circle{
        width: 40px;
        height: 40px;
        left: 1px;
        position: relative;
        z-index: 2;
        margin-top: 3px;
    }

    .meeting-agenda-circle-line{
        width: 2px;
        z-index: 1;
        top: 48px;
        left: 20px;
        bottom: 3px;
    }

    .meeting-agenda-circle-text{
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
    }

    .course-request-card-date-section {
        min-width: 200px;
        width: 200px;
        padding-left: 1rem;
        border-left: solid 1px rgba(0, 0, 0, 0.176);
        margin-top: 0;
    }
    
    .my-overview-course-request-card-date-section, .attendance-registration-course-date-section {
        min-width: 160px;
        width: 160px;   
        padding-left: 1rem;
        border-left: solid 1px rgba(0, 0, 0, 0.176);
        margin-top: 0;
    }

    .columns-lg-1{
        column-count: 1;
    }

    .columns-lg-2{
        column-count: 2;
    }

    .columns-lg-3{
        column-count: 3;
    }

    .columns-lg-4{
        column-count: 4;
    }

    .pagination-component {
        display: flex;
        justify-content: end;
        position: relative;
        bottom: unset;
    }

    .accounting-year-report, .ledger-entries-desktop-view {
        font-size: 13px;
    }

    .accounting-year-report td, .ledger-entries-desktop-view td{
        padding: 4px !important;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .certification-module-progress-title {
        font-size: 1.25rem !important;
    }
    
    .community-group-tab-button-text{
        font-size: 1rem;
    }

    .meeting-agenda-circle{
        width: 40px;
        height: 40px;
        left: 1px;
        position: relative;
        z-index: 2;
        margin-top: 3px;
    }

    .meeting-agenda-circle-line{
        width: 2px;
        z-index: 1;
        top: 48px;
        left: 20px;
        bottom: 3px;
    }

    .meeting-agenda-circle-text{
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
    }

    .accounting-year-report, .ledger-entries-desktop-view {
        font-size: unset;
    }
}



@media print {
    
    .selfservice-navbar, .selfservice-mobile-menu-button, .selfservice-navbar, .navbar, .selfservice-sidebar, .selfservice-mobile-menu-button, .back-to-process-btn, .change-proposal-test-mode-debug-date {
        display: none !important;
    }

    h1 .certification-overview-button-container {
        display: none !important;
    }
    
    .ps-270 {
        padding-left: 0 !important;
    }
    
    .no-page-break-inside {
        page-break-inside: avoid !important;
    }

    .selfservice-module-container-height{
        height: unset !important;
        max-height: unset !important;
        overflow-y: unset !important;
        overflow-x: unset !important;
    }
    
    .selected-invoice-card {
        background-color: #fff !important;
        border-bottom: none !important;
    }
    
    .fa-print {
        display: none !important;
    }
}

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::

 */




/*-------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------*/
/* TODO: Disse z-index-klasser er en polyfill for klasser der kommer i Bootstrap 5.3 - så når vi kommer derop, kan disse fjernes */
.z-n1 {
    z-index: -1!important;
}

.z-0 {
    z-index: 0!important;
}

.z-1 {
    z-index: 1!important;
}

.z-2 {
    z-index: 2!important;
}

.z-3 {
    z-index: 3!important;
}
/* TODO: Disse z-index-klasser er en polyfill for klasser der kommer i Bootstrap 5.3 - så når vi kommer derop, kan disse fjernes */
/*-------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------*/



/*-------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------*/
/* TODO: Bootstrap Polyfill - Utility-klasser vi ønskede Bootstrap havde */

.border-solid {
    border-style: solid !important;
}
.border-dashed {
    border-style: dashed !important;
}
.border-dotted {
    border-style: dotted !important;
}
.border-double {
    border-style: double !important;
}
.border-hidden {
    border-style: hidden !important;
}
.border-none {
    border-style: none !important;
}

/* TODO: Bootstrap Polyfill - Utility-klasser vi ønskede Bootstrap havde */
/*-------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------*/