/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
:root {
    --primaryBlack: black;
    --primaryDark: #181922;
    --primaryGrey: #383838;
    --secondaryDark: #038C73;
    --DarkColTheme: #232323;
    --primaryLightGrey: #ffffff9e;
    --red: #dc3545;
    --fadedRed: #dc354582;
}

.marginForTrivsel {
    margin-left:45px;
}

.border-trivsel {
    border: solid 3px #48a14d99;
}

.border-who {
    border: solid 3px #d56b20;
}

.toast-error {
    background-color: #DF4577 !important;
}

.toast-success {
    background-color: #27E8A7 !important;
}

.circle-progress {
    width: 200px;
    height: 70px;
}

.circle-progress-circle {
    stroke-width: 8px;
    stroke: #242424;
}

.circle-progress-text {
    fill: white;
    font-size: 25px;
}


.circle-progress-value {
    stroke-width: 8px;
    stroke: #4d4dff;
    transition: stroke .4s;
}



#bearBeetsBattlestar img {
    position: absolute;
    z-index: 99;
    bottom: -120px;
    left: 68%;
    height: 24vh;
}

.avatar {
    border: solid 5px;
    vertical-align: middle;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
}

.responsFont {
    font-size: 1rem;
}



.btn-outline-light {
    background-color: white !important;
    color: black !important;
    border: none !important;
}

    .btn-outline-light:hover {
        background-color: #366868 !important;
        color: white !important;
        border: none !important;
        box-shadow: inset 20px 20px 60px #2e5858, inset -20px -20px 60px #3e7878;
    }

    .btn-outline-light:active {
        background: #366868;
    }


    .btn-outline-danger {
    background-color: var(--red) !important;
    color: white !important;
    border: none !important;

}
        .btn-outline-danger:hover {
            background-color: var(--fadedRed) !important;
            color: white !important;
            transition: .2s;
            border: none;
            box-shadow: inset 20px 20px 60px #bb2d3b, inset -20px -20px 60px #fd3d4f;
        }


.login-card-body, .register-card-body {
    background-color: #181922 !important;
}

.noCursor {
    cursor: default !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: white !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #ffffff9e !important;
    border: 0 0 1px 0 #232323 solid !important;
}

/*.dropDownColor {
    background-color: yellow;
}*/

.select2-container--default .select2-selection--multiple {
    background-color: #383838 !important;
}

.smoothShowingOfPartial {
    transition: 0.3s !important;
}

a.text-white.btn.btn-outline-light.btnHover {
    min-width: 100px;
}


.curserHover:hover {
    cursor: pointer;
}

.btnHover:hover {
    color:black !important;
}


.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true]:hover {
    color: black !important;
}

/* width */
::-webkit-scrollbar {
    width: 10px !important;
}

/* Track */
::-webkit-scrollbar-track {
    background: #818181 !important;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #383838 !important;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #232323 !important;
    }



i.fas.fa-bars.nav-icon-position {
    margin-top: 4px !important;
}

span.select2-selection.select2-selection--single {
    background: #383838 !important;
    color: white !important;
    border: none !important;
    border-radius: 5px !important;
    border-color: #383838 !important;
}



span#select2-GroupsFilter-container {
    color: white !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: white !important;
}

.select2-container--default .select2-purple .select2-selection--multiple .select2-selection__choice, .select2-purple .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--DarkColTheme) !important;
    border-color: #fff !important;
    color: #fff !important;
    border: 0px !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--DarkColTheme) !important;
    border: none !important;
}

.select2-container--default.select2-container--open .select2-selection--single {
    border-color: white !important;
}


.select2-dropdown {
    
    border: 1px solid var(--primaryBlack) !important;

}

span#select2-CategoryNameFilter-container {
    color: white !important;
}

.select2-container--default .select2-purple .select2-results__option--highlighted, .select2-purple .select2-container--default .select2-results__option--highlighted {
    /*background-color: #0074f0 !important;*/
    color: #fff; /**/
}


/*simon - ret knækket men der ligger 8 baggrundsfarver stacked ovenpå hinanden - har fjernet 5 af dem og sat den 6 til blå, så virker det efter hensigten.*/

.select2-container--default .select2-purple .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-purple .select2-results__option--highlighted[aria-selected]:hover {
    background-color: none !important;
}

.select2-container--default .select2-purple .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-purple .select2-results__option--highlighted[aria-selected]:hover, .select2-purple .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-purple .select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
    background-color: none !important;
    color: #fff;
}

.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
    background-color: none !important;
    color: #fff;
}

.select2-container--default .select2-purple .select2-results__option--highlighted, .select2-purple .select2-container--default .select2-results__option--highlighted {
     background-color: none !important; 
    color: #fff;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: none !important;
    color: white;
}

.select2-container--default .select2-purple .select2-results__option--highlighted, .select2-purple .select2-container--default .select2-results__option--highlighted {
    background-color: #0074f0 !important;
    color: #fff;
}
                                    /* ^^^^ simon ^^^^ */


.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--DarkColTheme) !important;
    border: none !important;
}

.select2-container--default .select2-purple .select2-results__option--highlighted, .select2-purple .select2-container--default .select2-results__option--highlighted {
    background-color: #0074f0;
    color: #fff;
}

.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true]:hover {
   
    color: white !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--primaryGrey) !important;
    border-color: var(--primaryBlack) !important;
    color: #fff;
}


body {
    background: #242424 !important; /*var(--primaryBlack) !important;*/
}
.content-wrapper {
    background-color: #242424 !important; /*var(--primaryBlack) !important;*/
}

/* Experimenting with a global font that could look better */
/* Other font-related properties like size, weight, etc. */
/* Add more places it could apply to */

/*body, p, h1, h2, h3, h4, h5, h6, span, div {
    font-family: Segoe UI !important;
    font-weight: bold !important;
}*/

body:not(.layout-fixed) .main-sidebar {
    height: inherit;
    min-height: 100vh !important;
    position: absolute;
    top: 0;
    max-height: 100vh !important;
}

[class*=sidebar-dark] .user-panel {
    border-bottom: 0px solid #4f5962;
}

.main-header {
    border-bottom: 1px solid #dee2e6;
    z-index: 1034;
    background-color: var(--primaryDark) !important;
    color: white !important;
}

.modal-header {
    border-bottom: none !important;
    margin-bottom: -1rem !important;
}

.modal-footer {
    border-top: none !important;
    margin-top: -1rem !important;
}

a.nav-link {
    color: white !important;
}

/*Bar som viser sig når sidebaren bevæger sig ud*/
body:not(.layout-fixed) .main-sidebar .sidebar {
    overflow-y: unset !important;
}

aside.main-sidebar.sidebar-dark-primary.elevation-4 {
    position: fixed !important;
    transition: 0.2s !important;
}

[class*=sidebar-dark] .user-panel {
    border-bottom: 0px solid #4f5962 !important;
}


.modal-content.modalStyling {
    background: #181922 !important;
    color: white !important;
}


::placeholder {
    color: white !important;
}

    ::placeholder:focus {
        color: black !important;
    }



.form-control:disabled, .form-control[readonly] {
    background-color: #e9ecef70 !important;
    opacity: 1 !important;
    color: white !important;
    border: 1px solid #181922 !important;
}



.form-control {
    background-color: #383838 !important;
    color: white !important;
    border: none !important;
}

    .form-control:focus {
        background-color: #fff !important;
        color: black !important;
        border: 1px solid #fff !important;
    }


    /* Modal Styling*/

.bg-modal {
    background-color: var(--primaryDark);
    color: white !important;
}

.bg-main-modal {
    background-color: var(--primaryGrey) !important;
    color: white !important;

}

.modal-content-radius {
    border-radius:10px !important;
    background-color:var(--primaryDark) !important;

}

[class*=sidebar-dark-] {
    background-color: var(--primaryDark) !important;
}


/*--------------------MEDIA QUERIES--------------------------*/

@media (min-width: 992px) .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused, .sidebar-mini.sidebar-collapse .main-sidebar:hover {
    /*width: 250px;*/
    transition: 0.3s;
    transition-timing-function: ease-in;
}



@media only screen and (max-width: 820px) {


    .responsFont {
        font-size: 12px !important;
    }
}


@media only screen and (max-width: 768px) {
    .avatar {
        border: solid 5px;
        vertical-align: middle;
        width: 60px !important;
        height: 60px !important;
        border-radius: 50%;
        object-fit: cover;
    }

    .responsFont {
        font-size: 12px !important;
    }
}

@media only screen and (max-width: 414px) {
    .avatar {
        border: solid 2px;
        vertical-align: middle;
        width: 30px !important;
        height: 30px !important;
        border-radius: 50%;
        object-fit: cover;
    }

    .responsFont {
        font-size: 12px !important;
    }
}

@media only screen and (max-width: 375px) {
    .avatar {
        border: solid 1px;
        vertical-align: middle;
        width: 22px !important;
        height: 22px !important;
        border-radius: 50%;
        object-fit: cover;
    }

    .responsFont {
        font-size: 12px !important;
    }
}




@media (min-width: 768px) and (prefers-reduced-motion: reduce) body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper, body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-footer, body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-header {
    transition: 0.3s;
}



.input-group-text:hover {
    background-color: #366868 !important;
    color: white !important;
    border: none !important;
    box-shadow: inset 20px 20px 60px #2e5858, inset -20px -20px 60px #3e7878;
}


.caption-length {
    max-width: 94%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    margin-bottom: -7px;
}

@media only screen and (max-width: 1200px) {
    .caption-length {
        max-width: 86%;
    }
}

@media only screen and (max-width: 991px) {
    .caption-length {
        max-width: 69%;
    }
}