@media screen and (max-width:576px) {
    .content {
        margin: 0;
    }
    .dropdownWidth {
        width: 100%!important;
    }
    #navigation > div > div.col-8.col-sm-4.p-0 > nav {
        padding-right: 15vw;
        width: 100%;
    }
    #Synpunkter {
        margin: 2% !important;
        width: 95% !important;
    }

    #Installningar {
        margin: 2% !important;
        width: 95% !important;
    }
    .boxContent {
        margin: 2%;
    }
    div > ul > li > button {
        font-size: 0.9em;
    }
    #formDagbok > div {
        width: 100%;
    }
    #transactionAmount, #transaktionDatum {
        width: 80%;
        margin-left: 2px;
    }
    #transactionForm > div:nth-child(3) > div > span > select {
        margin-bottom: 8%;
    }
    .dropdown-toggle {
        width: 100%;
        margin: auto;
        margin-left: 1%;
    }
    #app > div > div > div.row.mb-3 > div.col-12.me-1 > div > button {
        font-size: 0.9rem;
    }
    #app > div > div > button > span {
        font-size: 0.75rem;
    }
    ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 4px;
        height: 2px!important;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 2px;
        background-color: rgba(0, 0, 0, .3);
        box-shadow: 0 0 1px rgba(255, 255, 255, .5);
    }

    /* Buttons */
    ::-webkit-scrollbar-button:single-button {
        background-color: white;
        border-style: solid;
        height: 13px;
        width: 16px;
    }
    /*Upp*/
        ::-webkit-scrollbar-button:single-button:vertical:decrement {
            border-color: transparent transparent grey transparent;
            border-width: 0 8px 8px 8px;
        }
            ::-webkit-scrollbar-button:single-button:vertical:decrement:hover{
                border-color: transparent transparent green transparent;
            }
            /*Ner*/
        ::-webkit-scrollbar-button:single-button:vertical:increment {
            border-color: gray transparent transparent transparent;
            border-width: 8px 8px 0px 8px

        }
                ::-webkit-scrollbar-button:single-button:vertical:increment:hover{
                    border-color: green transparent transparent transparent;
                }

                ::-webkit-scrollbar-button:single-button:horizontal:increment {
                    border-color: transparent transparent transparent gray;
                    border-width: 8px 0px 8px 8px;
                }
                    ::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
                        border-color: transparent transparent transparent green;
                    }

                    ::-webkit-scrollbar-button:single-button:horizontal:decrement {
                        border-color: transparent gray transparent transparent;
                        border-width: 8px 8px 8px 0px;
                    }
                        ::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
                            border-color: transparent green transparent transparent;
                        }
 
                        #myTab {
                            flex-flow: row;
                            overflow-x: scroll;
                            overflow-y: hidden;
                            white-space: nowrap;
                            width: 100%;
                        }
    
        
    .btn-group > .btn-group:not(:first-child), .btn-group > .btn:not(:first-child) {
        margin: 0;
    }
    .box {
        display: flex;
        flex-flow: column;
        height: 100%;
    }
    .box::-webkit-scrollbar {
        display: none;
    }
    body {
        overflow-y: auto;
    }
    .fullheight {
        height: 100% !important;
    }
    #arendeMenu {
        overflow-y: scroll;
    }
    #arendeList {
        overflow-y: scroll;
    }
    .content.boxContent {
        flex-grow: 1 !important;
    }
    .cookies-eu-banner {
        height: 80vh!important;

    }
    .fixed-table-pagination.px-3 {
        padding-left: 0px;
        padding-right: 0px;
    }

/*    .overlayCookies {
        margin-left:-8vh !important;
    }*/
}
@media screen and (max-width:1199px) and (min-width: 576px) {
    .content {
        margin-left: 4.5rem;
    }
    .dropdownWidth {
        width: 100%;
    }

    .boxContent {
        flex-grow: 1;
    }

    .box {
        display: flex;
        flex-flow: column;
        height: 100%;
    }

        .box::-webkit-scrollbar {
            display: none;
        }

    body {
        overflow-y: auto;
    }

    .fullheight {
        height: 100% !important;
    }

    #arendeMenu {
        overflow-y: scroll;
    }

    #arendeList {
        overflow-y: scroll;
    }

    .content.boxContent {
        flex-grow: 1 !important;
    }

    .nav-pills {
        margin-bottom: 10vh
    }

    .newsArticle {
        height: 5vh;
        overflow: hidden!important;
    }

    /*Nyheter popup on click*/
    .newsOverlay {
        position: fixed; /* Sit on top of the page content */
        display: none; /* Hidden by default */
        width: 100%; /* Full width (cover the whole page) */
        height: 100%; /* Full height (cover the whole page) */
        top: 0;
        left: 0;
        right: 0;
        align-content: center;
        justify-content: center;
        bottom: 0;
        background-color: rgba(0,0,0,0.5); /* Black background with opacity */
        z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
        cursor: pointer; /* Add a pointer on hover */
    }

    .newsText {
        position: absolute;
        display:block;
        background-color: white;
        padding: 3vh;
        height: 75%;
        width: 75%;
        top: 50%;
        left: 50%;
        color: black;
        transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        overflow-y: auto;
    }

    .cookies-eu-banner {
        height:38vh;
    }

/*    .overlayCookies {
        margin-left: 10vh!important;
    }*/
}





@media screen and (min-width: 1200px) {
    .content {
        margin-left: 4.5rem;
    }
    .box {
        display: flex;
        flex-flow: column;
        height: 100%;
    }
    .boxHeader {
        flex-grow: 0;
    }
    .boxContent {
        flex-grow: 1;
    }
    body {
        overflow-y: hidden;
    }
    #arendeMenu {
        height: 100%!important;
    }
    .collapse-md-none {
        display: none !important;
    }
    #arendeList {
        display: flex !important;
    }

    .nav-pills {
        margin-bottom: 0vh
    }
}


@keyframes sideAnimation {
    0% {
        opacity: 1;
        width: 4.5rem;
    }
    25% {
        opacity: 1;
        width: 9rem;
    }
    50% {
        opacity: 1;
        width: 13.5rem;
    }
    100% {
        opacity: 1;
        width: 18rem;
    }
}

@keyframes side2AnimationCollapse {
    0% {
    }
    100% {
        right: -16rem;
    }
}

@keyframes side2AnimationExpand {
    0% {
        right: -16rem;
    }
    100% {
        right: 0;
    }
}

@font-face {
    font-family: 'Sora';
    src: url('/Fonts/Sora-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('/Fonts/Sora-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('/Fonts/Sora-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('/Fonts/Sora-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('/Fonts/Sora-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('/Fonts/Sora-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('/Fonts/Sora-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('/Fonts/Sora-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

main {
    height: 100%;
}

body {
    height: 100vh;
    -ms-overflow-style: none;
    scrollbar-width: none;
    font-family: 'Sora';
}

    body::-webkit-scrollbar {
        display: none;
    }

.mainBox {
    display: flex;
    flex-flow: column;
    height: 100%;
}
.fixed-table-pagination.px-3 {
    padding-left: 0px;
    padding-right: 0px;
}
.contentVerticalDivider {
    width: 1.5rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.contentHorizontalDivider {
    height: 1.5rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.scrollarea {
    overflow-y: auto;
    /*-ms-overflow-style: none;*/
        /*scrollbar-width: none;*/
    }
    
    .scrollarea::-webkit-scrollbar {
        /*display: none;*/
    }

.logoDiv {
    min-height: 72px!important;
    max-height: 72px!important;
    height: 72px!important;
}

#logo {
    margin-top: -6px;
    margin-left: 8px;
}

nav .dropdown-item:active {
    background-color: rgba(0,0,0,0.2)
}

/*Change the background color of the active nav pill*/
.nav-pills .nav-link.active {
    background-image: url("/Images/Bakground_light_green.png");
    color: white;
}

    .nav-pills .nav-link.active:hover {
        color: white;
    }

    .nav-pills .nav-link.active p {
        color: white;
    }
/*Sets the icon/text color*/
.nav-pills .nav-link {
    color: #68BD49;
}

    /*Changes the icon/text color on hover to make website feel more responsive*/
    .nav-pills .nav-link:hover:not(#sidebar1) {
        background-color: rgba(0,0,0, 0.1);
    }
    .nav-pills .nav-link:hover {
        color: green;
    }

    .nav-pills .nav-link p {
        color: black;
    }

.nav li a {
    height: 4rem;
    width: 18rem;
}

td a i {
    color: darkgray;
}

    td a i:hover {
        color: gray;
    }

/*Font for headdlines*/
.bold {
    font-weight: 600;
}

.readMessage i {
    color: #B6BFC9;
}






/*Gives the sidebar an animation and sets background image*/
#sidebar1 {
    font-weight: normal;
    font-size: 15px;
    width: 4.5rem;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 0;
    z-index: 5000;
}

    #sidebar1:hover {
        animation-name: sideAnimation;
        animation-delay: 250ms;
        animation-duration: 0.2s;
        animation-fill-mode: forwards;
    }

    #sidebar1 .nav-link i {
        margin-left: 1px;
    }

#sidebar2 {
    position: fixed;
    width: 24rem;
    height: 100vh;
    top: 0;
    right: -16rem;
}

    #sidebar2.sidebar2Collapse {
        animation-name: side2AnimationCollapse;
        animation-duration: 0.0s;
        animation-fill-mode: forwards;
        height: 70px!important;
    }

    #sidebar2.sidebar2Expand {
        animation-name: side2AnimationExpand;
        animation-duration: 0.2s;
        animation-fill-mode: forwards;
    }

#sidebar2Body {
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    #sidebar2Body::-webkit-scrollbar {
        display: none;
    }

#sidebar2Body .icon {
    font-weight: 600;
    font-size: 22px;
    color: #FFFFFF;
}

    #sidebar2Body .arendenName {
        font-weight: normal;
        font-size: 14px;
        color: #717687;
    }

    .arendenStatusText {
        font-weight: 600;
        font-size: 12px;
        color: #000000;
    }

    .arendenDatumText {
        font-weight: 600;
        font-size: 14px;
        color: #B6BFC9;
    }

#sidebar2Header {
    font-weight: 600;
    font-size:20px;
    color: #747474;
    height: 70px !important;
    margin-left: 3px;
    vertical-align: middle;
}
#sidebar2Header > div {
    margin-top: -6px;
}

#sidebar2 li {
    height: 11rem;
}



.sidebarBorderHorizontal {
    height: 2px;
    width: 100%;
}

.sidebarBorderVertical {
    border-left: 2px solid;
    border-image-slice: 8;
    border-image-width: 0 0 0 3px;
    border-image-repeat: round;
}

#navigation {
    height: 72px;
}

#huvudman>span {
    font-weight: 600;
    font-size: 16px;
    color: white;
}

#huvudman button {
    font-weight: 600;
    font-size: 22px;
    background-color: transparent;
    color: white;
    border: none;
}

#huvudman button:hover, #huvudman button:focus {
    background-color: rgba(255,255,255, 0.1);
}

#huvudman button:focus {
    box-shadow: none;
}

#huvudman .dropdown-item {
    padding: 0.25rem 0.75rem;
}

#huvudman ul {
    min-width: 100%;
}

#huvudman button span {
    min-width: 16rem;
    display: inline-block;
}
.huvudmanpanel {
    background-color: #e6eaef;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

#collapseButton {
    color: #747474;
}

.icon {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: #B2B2B2;
    font-weight: 600;
    color: white;
}

    .icon p {
        font-size: 22px;
    }

.iconGreen {
    color: #68BD49;
}

.iconMessageLink {
    color: #B6BFC9;
}

    .iconMessageLink:hover {
        color: rgba(0,0,0, 0.4);
    }

.fa-circle-exclamation {
    color: #DD1111!important;
}

.fa-circle-check {
    color: #00B91C!important;
}

.fa-circle-pause {
    color: #EDC900!important;
}

.fa-circle-info {
    color: #B2B2B2!important;
}

.form-select {
    background-size: 16px 16px;
    background-image: url("data:image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3e%3cpath fill='white' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z'/%3e%3c/svg%3e");
}

.form-select-dark {
    background-size: 16px 16px;
    background-image: url("data:image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3e%3cpath fill='grey' stroke='grey' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z'/%3e%3c/svg%3e");
}

.title {
    font-weight: 600;
    font-size: 30px;
    color: #212529;
}

.headline {
    font-weight: 600;
    font-size: 16px;
    color: #212529;
}

.newsContent {
    font-weight: normal;
    font-size: 16px;
    color: #212529;
}

.messagesTable {
    font-size: 14px;
    font-weight: 600;
}

    .messagesTable .readMessage {
        font-weight: normal;
        color: #212529;
    }

.btn-white:hover {
    background-color: rgba(0,0,0,0.05);
}

#dagbok button {
   font-weight: 600;
   font-size: 16px;
}
.arsrakningDropdown span {
    font-weight: 600;
    font-size: 16px;
    color: #757575;
}

.hiddenColumn {
    display: none;
    visibility: hidden;
}

#dagbok select {
    font-weight: 600;
    font-size: 16px;
}

#dagbokDiv span.input-group-text {
    font-weight: 600;
    font-size: 16px;
    color: #757575;
    width: 110px;
}

#dagbokDiv i.input-group-text {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 40px;
    color: #5C5C5C;
}

.dagbokTitle, .huvudmanTitle {
    font-weight: 600;
    font-size: 18px;
}

#dagbokBtn1 {
    color: #757575;
}

option {
    background-color: white;
    color: black;
}

.ui-widget {
    font-family: inherit;
}
.ui-datepicker-header {
    background-color: white;
    border: none;
}

.ui-datepicker-week-end:not(.ui-datepicker-other-month):not(.ui-datepicker-unselectable), .ui-datepicker-week-end:not(.ui-datepicker-other-month):not(.ui-datepicker-unselectable) .ui-state-default {
    color: red;
    font-weight: 600;
}
.ui-widget-content .ui-state-default {
    border-color: transparent;
    background-color: #e9e9e9;
}

.ui-widget-content .ui-state-default.ui-state-hover {
    background-color: rgba(0,0,0,0.2);
}

.ui-widget-content .ui-state-active {
    border: 1px solid green;
    color: #454545;
}

.ui-widget-content .ui-state-highlight {
    color: #454545;
}

.ui-datepicker-calendar th {
    max-width: 2rem;
    min-width: 2rem;
    width: 2rem;
}

.ui-datepicker-calendar td a, .ui-datepicker-calendar td span {
    text-align: center;
}

.ui-datepicker-header a {
    text-decoration: none;
}

.ui-widget-content .ui-state-disabled {
    opacity: 1;
    background-color: white;
}

    .ui-widget-content .ui-state-disabled span {
        background-color: #e9e9e9;
        color: #e9e9e9;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

td.ui-datepicker-week-col {
    background-color: #68BD49;
    color: white;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    text-align: center;
}

#dt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: transparent;
    z-index: 1;
    border: 0px solid;
    background-color: transparent;
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none;
    user-select: none;
}

#dt:focus {
    outline:none;
}

#dt::-webkit-color-datetime-edit {
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none;
    user-select: none;
}

#dt::-webkit-calendar-picker-indicator {
    margin-left: -20px;
    color: rgba(0,0,0,0);
    display: block;
    opacity: 1;
    z-index: 100;
    background: none;
    cursor: pointer;
    width: 40px;
    height: 38px;
}

textarea:not(.resizeable) {
    resize: none;
}

.login-side-bg {
    background-image: url("../images/bg-green.png");
    background-position: center right;
    border-radius: 1rem 0 0 1rem;
}

.login-main-bg {
    background-image: url("../images/bg-gray.png");
    background-position: center left;
    border-radius: 0 1rem 1rem 0;
}

.login-loginmethod {
    height: 15vh;
    background-color: white;
    border-radius: 0rem 0.3rem 0.3rem 0.3rem;
}

.login-container {
    border-radius: 1rem;
}

.logo-container {
    width: 90%;
}

.btn-success {
    background-color: #68BD49;
    border: none;
    border-radius: 1.5rem;
}

    .btn-success:hover {
        background-color: #5dae3f;
    }

#fresh-table, .table-striped > tbody > tr:nth-of-type(odd) {
    font-weight: normal;
    font-size: 14px;
    color: #757575;
}

#fresh-table th {
    font-weight: 600;
    font-size: 16px;
}

#fresh-table i {
    color: #757575;
}
#fresh-table i:hover {
    color: rgba(0,0,0,0.8);
}

    #dagbok .dropdown-item.active {
        background-color: #6c757d;
        color: white;
    }

    #dagbok .dropdown-item:active {
        background-color: #6c757d;
        color: white;
    }

.toolbar-color-green .fixed-table-toolbar {
    padding-left: 10px;
}

.page-item.active .page-link {
    color: white;
    background-color: #6c757d;
    border-color: #6c757d;
}

.page-item .page-link {
    color: #6c757d;
}
#Installningar {
    width: 26rem;
}
.InstallningarTitle {
    font-weight: 600;
    font-size: 18px;
}

    #Installningar div > label {
        color: #5C5C5C;
    }

    #Installningar input {
        font-size: 16px;
    }

    #Installningar div>span {
        font-weight: 600;
    }

.row.boxContent {
    margin-left: 0;
    margin-right: 0;
    --bs-gutter-x: 0;
}
.arendeHeader {
    background-color: #E9ECEF;
    min-height: 76px;
}

    .arendeHeader span {
        font-weight: 600;
        font-size: 18px;
        color: #757575;
    }

    .arendeHeader button {
        font-weight: 600;
        font-size: 16px;
    }

    .arendeHeader .arendeHeaderDatum span{
        font-weight: 600;
        font-size: 14px;
        color: #757575;
    }

.arendeMeddelande p{
    font-size: 16px;
    color: rgba(0,0,0,0.5);
}

.arendeMeddelande.senasteMeddelandet p{
    font-size: 16px;
    color: #000000;
}

#kompletteraForm i {
    cursor: pointer;
}
#kompletteraForm .header {
    font-weight: 600;
    font-size: 18px;
}

.noSize {
    width:0;
    height:0;
    border:0;
    position:absolute;
    overflow:hidden;
}
#Synpunkter {
    width: 26rem;
}
#Synpunkter span {
    font-weight: 600;
    color: #757575;
}

.SynpunkterTitle {
    font-weight: 600;
    font-size: 18px;
}

#SignButton {
    background-color:deeppink !important;
}

th.toolbarGrey {
    background-color: #6c757d!important;
    color: #f5f5f5;
}
th.rounded-top-left {
    border-top-left-radius: 0.25rem!important;
}
th.rounded-top-right {
    border-top-right-radius: 0.25rem!important;
}

.nowrap {
    white-space: nowrap;
}

input, textarea {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/*input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}
input::-webkit-textfield-decoration-container {
  display: none;
}*/

.bootstrap-table .fixed-table-container .table thead th.columnTitle .th-inner {
    padding: 0.75rem 0.5rem;
    font-size: 18px;
    font-weight: 600;
}
.bootstrap-table .fixed-table-container .table td{
    font-size: 16px;
}

.bootstrap-table .fixed-table-container .table thead th.tableStartTitle .th-inner {
    margin-left: -37.78px;
}

.rakningTitle {
    font-weight: bold;
}

button:not(.dropdown-toggle):not(.dropdown-item) {
    font-weight: 600;
}

.error {
	color: red;
	font-style: italic;
}
.errorBorder {
    border-color: red!important;
}

.btn-lg.dropdown-toggle {
    font-size: 1rem;
}

.form-select:disabled {
    background-image: none;
}

iframe {
    height:700px !important;
}

.navbarHamburgerMenu {
    position: absolute;
    left: 0;
    top: 72px;
    background-image: url("../Images/Bakground_light_light_grey.png");
    max-height: 320px;
    overflow-y: scroll;
}

.navbarHamburgerMenu ul {
    list-style: none;
}
.navbarHamburgerMenu .nav li a {
    width: 100%;
}
.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem white;
}

.navbar-toggler i {
    color: black;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#versionNumber {
    display: flex;
    justify-content: flex-end;
    margin-bottom: -25px;
    font-size: 12px;
}

.newsArticle {
    height: 30vh;
    overflow: auto;
    overflow-x: hidden;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background-color:lightgray;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.4);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.4);
}

.newsOverlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    align-content: center;
    justify-content: center;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

.newsText {
    position: absolute;
    display: block;
    background-color: white;
    padding: 3vh;
    height: 75%;
    width: 75%;
    top: 50%;
    left: 50%;
    color: black;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    overflow-y: auto;
}

.cookies-eu-banner {
     background-color: #747474;
    color: #fff;
    padding: 20px;
    font-size: 14px;
    text-align: center;
    position: fixed;
    width: 100%;
    height: 28%;
}

.cookies-eu-banner button {
    text-decoration: none;
    background: #222;
    color: white;
    border: 1px solid #000;
    border-radius:15px 15px;
    cursor: pointer;
    padding: 0.5vh 0.5vh;
    margin: 2vh 2vh 0 2vh;
    font-size: 13px;
    font-weight: 700;
    transition: background 0.07s, color 0.07s, border-color 0.07s;
}

.cookies-eu-banner button:hover {
    background: #fff;
    color: #222;
}

.hiddenCookiebanner {
    display: none;
}

.noEditBox {
    pointer-events: none;
}

#loggedOutOverlay {
    position: fixed; /* Sit on top of the page content */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #454545; /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

#loggedOutText {
    position: absolute;
    top: 50%;
    left: 45%;
    height: 20vh;
    padding: 5rem;
    border-radius: 5px;
    text-align: center;
    background-color: white;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}

.loggedOutButton {
    margin-top: 3vh; 
    border: none; 
    background-color: blue; 
    color: white;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 5px;
}

#ui-datepicker-div {
    height: 308px;
}

.modal-content {
    width: 400px;
    top: 30vh;
}

.modal-title {
    margin: auto;
}

#modalCountdown {
    text-align: center;
}

#modalText {
    text-align: center;
}

.modal-footer {
    display: flex;
    justify-content: center;
}
@media (min-width: 960px){
    .d-xl-flex {
        display: flex !important;
    }
}
.fixed-table-pagination.px-3 {
    padding-left: 0px!important;
    padding-right: 0px!important;
}
.hiddenPhoneView {
   display: block;
}

.hiddenDesktopView {
    display: none;
}

.BtnGridView {
    display: grid;
    margin: 0em 0.01em;
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 576px){
    .phoneClass {
        flex-direction: column;
        width: 100%;
        flex-wrap:nowrap!important;
    }

    .titelname {
        width: 256px;
        overflow: hidden;
    }

    .input-group.mt-3.date {
        display: grid;
    }

    .mycustomnotdisplaygrid {
        display: flex !important;
    }

    .form-control {
        font-size: 17px;
    }

    .hiddenPhoneView {
        display: none;
    }

    .hiddenDesktopView {
        display: block;
    }

    #huvudman button {
        font-size: 18px;
    }

    #inmatningBilagor .bootstrap-table.bootstrap5 {
        display: block;
    }
    #inmatningBilagor .fixed-table-toolbar{
        display: none;
    }



    .col-4.mb-auto {
        width: 100%;
    }

    .content.boxContent {
        overflow-x:hidden!important;
        /* overflow-y: hidden!important;
        position: absolute;
        width: 100%;
        height: 100%; */
    }
    .form-select{
        font-size: 0.85rem;
    }
    /* .form-select{
        font-size: 1.19em;
    } */

    button.btn.btn-secondary.mb-3{
        background-color: #FFFFFF;
        color: #6c757d;
        border-radius: 0px 0px 0px 0px;
        border-color: #CED4DA;
        border-top: 0px;
        font-size: 0.9rem;
    }
    button.rakningNavBtnActive.btn.btn-secondary {
        border-radius: 0px 0px 0px 0px;
        background-color: #82B863;
    color: white;

    }
    button.btn.btn-secondary.me-1.ms-auto{
        margin-left: 0px!important;
    }
    .d-flex.mb-2 {
        display: grid!important;
        grid-template-columns: 1fr 1fr 1fr;
    }
    /* button.btn.btn-secondary.mb-3:focus{
        background-color: #6C757D;
        border-color:#6C757D;
        color: white;
        box-shadow: none;
    } */
    .button-selected {
        background-color: #6C757D!important;
        border-color:#6C757D!important;
        color: white!important;
        box-shadow: none!important;
    }
    ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 0px;
        height: 0px;
        background-color:lightgray; 
    }
   .accordion {
    box-shadow: none;
    color: black;
    cursor: pointer;
    padding: 15px;
    width: 100%;
    text-align: left;
    border:1px solid transparent;
    border-radius: 0px 0px 0px 0px;
    outline: none;
    transition: height 1s;
    margin-bottom: 0px;
    font-size:smaller;
  }
  .even {
    background-color: #E9ECEF;
    
  }
  .odd {
    background-color: #FFFFFF;
  }
  .accordion:focus {
    /* background-color: #72BA57; */
    color: black;
    box-shadow: none;
  }
  .panel {
    padding: 0 5px 0px 15px;
    color: black;
    text-align: start;
    font-size: small;
    display: none;
    overflow: hidden;
    /* border:#000 solid 0.3px; */
    /* border: 1px 1px 1px 1px; */
  }
  .buttonsForAccordion{
    font-size: 20px; 
    margin-bottom: 10px
  }
  .borderHistorik{
    border: #CED4DA solid 1pt!important;
    border-radius: 0px 0px 4px 4px;
  }
  .fixed-table-pagination.px-3 {
    display: none;
}
.fixed-table-toolbar.btn-secondary.ps-2 {
    border-radius: 4px 4px 0px 0px;
    height:10px;
}
.bootstrap-table.bootstrap5{
    display:none;
}
.input-group.float-left.search.btn-group {
    display: none;
}
.ps-2 {
    padding-left: 0!important;
}
.d-flex.mt-3.justify-content-end {
    margin-bottom: 15px;
}
.btn-check:focus+.btn, .btn:focus {
    outline: 0;
    box-shadow: none;
}
.saldoText{
    color: #5C5C5C; 
    font-size: 12pt;
}
div#ui-datepicker-div {
    font-size: 20px;
}
    .btn-group-vertical > .btn-check:checked + .btn, .btn-group-vertical > .btn-check:focus + .btn, .btn-group-vertical > .btn.active, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:hover, .btn-group > .btn-check:checked + .btn, .btn-group > .btn-check:focus + .btn, .btn-group > .btn.active, .btn-group > .btn:active, .btn-group > .btn:focus, .btn-group > .btn:hover {
        background-color: #82B863;
        color:white;
        border-radius: 0px 0px 0px 0px;
    }

    .btn-group > .btn-group:not(:first-child), .btn-group > .btn:not(:first-child) {
        background-color: #82B863;
        color:white;
        border-radius: 0px 0px 0px 0px;
    }

    .btn-group > .btn-group:not(:last-child) > .btn, .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
        background-color: #82B863;
        color:white;
        border-radius: 0px 0px 0px 0px;
    }

    .dropdown-toggle {
        margin-left: 0!Important;
    }

    .d-flex.btn-group.mt-3.me-2.phoneClass {
        margin-right: 0 !important;
    }

    .btn-secondary.disabled, .disbtnlamnain:disabled {
        display: none;
    }
    button.btn.btn-secondary.mb-3.dagbokButton {
        background-color: #6c767d;
        color: white;
        border-radius: 4px 4px 4px 4px;
    }
    .navbarHamburgerMenu {
        position: absolute;
        left: 0;
        top: 72px;
        background-image: url("../Images/Bakground_light_light_grey.png");
        max-height: max-content;
        overflow-y: scroll;
    }
    #differensRuta {
        padding-left: 1rem!important;
    }
    .navbarHamburgerMenu ul {
        list-style: none;
    }
    .navbarHamburgerMenu .nav li a {
        width: 100%;
    }
    div#sidebar1 {
        display: none!important;
    }
    .hamburgerButtonContainer{
        display:block!important;
    }
    div#navigation {
        margin-left:0;
    }
    .content.boxContent.scrollarea {
        margin-left: 10px;
        margin-top: 5px;
        padding-right:0px!important;
    }
    .d-flex.d-sm-none.hamburgerButtonContainer.h-100 {
        padding-top: 20px;
    }
    .form-group.mt-3.w-25 {
        width: 100%!important;
    }
    div#app {
        /* padding-left: 2px!important;
        padding-right: 2px!important;
        padding-top: 1rem!important; */
        /* padding: 1rem!important; */
    }
    /*H�r k�r vi �renden css*/

    .d-lg-none.contentHorizontalDivider {
        display: none;
    }

    div#arendeList {
        margin-left: 0;
        margin-top:0;
        padding: 0px;
        font-size:medium;
    }

    .d-flex.p-3.boxHeader.border {
        display: none !important;
    }
    i.fa-solid.fa-circle-exclamation {
        padding-right: 5px;
    }
    .col-12.border-bottom.py-3.px-3.boxHeader {
        padding-top: 0;
    }
    /* .boxContent {
    margin: 0%;
    } */
    /* .content.boxContent.scrollarea {
        margin-left: 0;
    } */
    span.arendenDatumText {
        font-size: 12px;
    }
/* .row>* {
    padding-right: 11.9px;
    padding-left: 11.9px;
}
.col-12.d-flex {
    padding-left: 15px;
    padding-right:8px;
} */
#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
  }
  #overlayKomp {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
  }
  #overlayArende {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
  }
  #overlayYttrande {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
  }
  form#nyttarendeform {
    margin-bottom: 150px;
}
option {
    /* width: 100%; */
    /* font-size: smaller;
    font-weight: 700; */
}
select#arendeSelect {
    width: 100%!important;
}
.arendeHeader span {
    font-weight: 600;
    font-size: 15px;
    color: #757575;
}
.mx-4 {
    margin-right: 15px!important;
    margin-left: 15px!important;
}
div#kompletteraForm {
    margin-top: 50px;
    padding-top: 3rem;
    padding-left: 15px;
    padding-right: 15px;
}
.BackspaceButtonForm{
    background: transparent;
    color: black;
    border: none;
    display: flex;
    font-size: 25px;
    margin-bottom: 10px;
}
/* .d-flex.px-4.py-3.justify-content-between.arendeHeader.border-bottom.border-top.boxHeader {
    margin-top: 80px;
} */
.navbar-toggler i {
    color: white;
}
.navbar-toggler:focus {
    box-shadow: none;
}
}
.row.boxContent.scrollarea.arendeBox {
    margin-top: 0px;
}
table#tablePhone {
    overflow-x: auto;
}
div#yttrandeForm {
    padding-top: 3rem;
    padding-left: 15px;
    padding-right: 15px;
}
.col.mb-1.header.Yttrande {
    font-weight: 600;
    font-size: 18px;
}
.d-block.px-3.py-3.arendeHeader.border-bottom.border-top.boxHeader {
    min-height: 123px;
}
.btn-group.mb-4 {
    display: block;
}
ul.dropdown-menu.dropdownWidth.p-0.show {
    width: 23%;
}
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: -1px;
    margin-right: 5px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
#myTabContent .bootstrap-table.bootstrap5{
    display: block!important;
}
#myTabContent .fixed-table-toolbar{
    display:none;
}
div#nyttarendeScrollDiv {
    overflow-x:hidden;
}
div#arendeMessages{
    overflow-x:hidden;
}
@media (max-width:920px) and (orientation: landscape){
    .phoneClass {
        flex-direction: column;
        width: 100%;
        flex-wrap:nowrap!important;
    }

    .hiddenPhoneView {
       display: none;
    }

    .hiddenDesktopView {
        display: block;
    }

    #huvudman button {
        font-size: 18px;
    }

    .col-4.mb-auto {
        width: 100%;
    }

    .content.boxContent {
        overflow-x:hidden!important;
        /* overflow-y: hidden!important;
        position: absolute;
        width: 100%;
        height: 100%; */
    }
    .form-select{
        font-size: 0.85rem;
    }
    /* .form-select{
        font-size: 1.19em;
    } */

    button.btn.btn-secondary.mb-3{
        background-color: #FFFFFF;
        color: #6c757d;
        border-radius: 0px 0px 0px 0px;
        border-color: #CED4DA;
        border-top: 0px;
    }
    button.rakningNavBtnActive.btn.btn-secondary {
        border-radius: 0px 0px 0px 0px;
        background-color: #82B863;
    color: white;

    }
    button.btn.btn-secondary.me-1.ms-auto{
        margin-left: 0px!important;
    }
    .d-flex.mb-2 {
        display: grid!important;
        grid-template-columns: 1fr 1fr 1fr;
    }
    /* button.btn.btn-secondary.mb-3:focus{
        background-color: #6C757D;
        border-color:#6C757D;
        color: white;
        box-shadow: none;
    } */
    .button-selected {
        background-color: #6C757D!important;
        border-color:#6C757D!important;
        color: white!important;
        box-shadow: none!important;
    }
    ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 0px;
        height: 0px;
        background-color:lightgray; 
    }
   .accordion {
    box-shadow: none;
    color: black;
    cursor: pointer;
    padding: 15px;
    width: 100%;
    text-align: left;
    border:1px solid transparent;
    border-radius: 0px 0px 0px 0px;
    outline: none;
    transition: height 1s;
    margin-bottom: 0px;
    font-size:smaller;
  }
  .even {
    background-color: #E9ECEF;
    
  }
  .odd {
    background-color: #FFFFFF;
  }
  .accordion:focus {
    /* background-color: #72BA57; */
    color: black;
    box-shadow: none;
  }
  .panel {
    padding: 0 5px 0px 15px;
    color: black;
    text-align: start;
    font-size: small;
    display: none;
    overflow: hidden;
    /* border:#000 solid 0.3px; */
    /* border: 1px 1px 1px 1px; */
  }
  .buttonsForAccordion{
    font-size: 20px; 
    margin-bottom: 10px
  }
  .borderHistorik{
    border: #CED4DA solid 1pt!important;
    border-radius: 0px 0px 4px 4px;
  }
  .fixed-table-pagination.px-3 {
    display: none;
}
.fixed-table-toolbar.btn-secondary.ps-2 {
    border-radius: 4px 4px 0px 0px;
    height:10px;
}
.bootstrap-table.bootstrap5{
    display:none;
}
.input-group.float-left.search.btn-group {
    display: none;
}
.ps-2 {
    padding-left: 0!important;
}
.d-flex.mt-3.justify-content-end {
    margin-bottom: 15px;
}
.btn-check:focus+.btn, .btn:focus {
    outline: 0;
    box-shadow: none;
}
.saldoText{
    color: #5C5C5C; 
    font-size: 12pt;
}
div#ui-datepicker-div {
    font-size: 20px;
}
.btn-group-vertical > .btn-check:checked + .btn, .btn-group-vertical > .btn-check:focus + .btn, .btn-group-vertical > .btn.active, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:hover, .btn-group > .btn-check:checked + .btn, .btn-group > .btn-check:focus + .btn, .btn-group > .btn.active, .btn-group > .btn:active, .btn-group > .btn:focus, .btn-group > .btn:hover {
    background-color: #82B863;
    color:white;
}

.btn-group > .btn-group:not(:first-child), .btn-group > .btn:not(:first-child) {
    background-color: #82B863;
    color:white;
}

.btn-group > .btn-group:not(:last-child) > .btn, .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    background-color: #82B863;
    color:white;
}

    .dropdown-toggle {
        margin-left: 0!Important;
    }

    .d-flex.btn-group.mt-3.me-2.phoneClass {
        margin-right: 0 !important;
    }

    .btn-secondary.disabled, .disbtnlamnain:disabled {
        display: none;
    }
    button.btn.btn-secondary.mb-3.dagbokButton {
        background-color: #6c767d;
        color: white;
        border-radius: 4px 4px 4px 4px;
    }
    .navbarHamburgerMenu {
        position: absolute;
        left: 0;
        top: 72px;
        background-image: url("../Images/Bakground_light_light_grey.png");
        max-height: 320px;
        overflow-y: scroll;
    }
    
    .navbarHamburgerMenu ul {
        list-style: none;
    }
    .navbarHamburgerMenu .nav li a {
        width: 100%;
    }
    div#sidebar1 {
        display: none!important;
    }
    .hamburgerButtonContainer{
        display:block!important;
    }
    div#navigation {
        margin-left:0;
    }
    .content.boxContent.scrollarea {
        margin-left: 10px;
    }

    /*H�r k�r vi �renden css*/

    .d-lg-none.contentHorizontalDivider {
        display: none;
    }

    div#arendeList {
        margin-left: 0;
        margin-top:0;
        padding: 0px;
        font-size:medium;
    }

    .d-flex.p-3.boxHeader.border {
        display: none !important;
    }
    /* div#app {
        padding-right: 20px;
    } */
    .d-flex.d-sm-none.hamburgerButtonContainer.h-100 {
        padding-top: 20px;
    }
    /* .boxContent {
    margin: 0%;
    } */
    .col-xl-7.col-12 {
        padding-bottom: 10px;
    }
    span.navTitle {
        display: none;
    }
    .d-none.d-md-flex.navTitleDiv.mx-0.mx-lg-5 {
        display: none;
    }
    span.arendenDatumText {
        font-size: 12px;
    }
/* .row>* {
    padding-right: 11.9px;
    padding-left: 11.9px;
}
.col-12.d-flex {
    padding-left: 15px;
    padding-right:8px;
} */
.navbar-toggler i {
    color: white;
}
.navbar-toggler:focus {
    box-shadow: none;
}
}

.form-select:disabled {
    opacity: .65;
}

/*TOOLTIP START
    Name starts with custom to separate this from bootstrapper tooltip.
*/

.customtooltip {
    position: relative;
    display: inline-block;
    padding-left: 5px;
}

    .customtooltip .customtooltiptext {
        visibility: hidden;
        max-height: 100px;
        width: 510px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 0.7rem 1.2rem 0.7rem 1.2rem;
        position: absolute;
        z-index: 10000;
        bottom: 125%;
        left: -10%;
        right: -100%;
        /*margin-left: -60px;*/
        opacity: 0;
        transition: opacity 0.6s;
        font-family: 'Sora';
        font-weight: 500;

    }

    /*tooltip för aktiv knapp med grön bg i Räkning*/
    .rakningNavBtnActive i.customtooltip {
        color: #fff !important;
    }
    /*tooltip, visa i höjd med rubrik för att inte hamna bakom navbar*/
    #differens .customtooltip .customtooltiptext {
        bottom: 0% !important;
    }

/*.customtooltip .customtooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}*/

.customtooltip:hover .customtooltiptext {
    visibility: visible;
    opacity: 1;
}

/*TOOLTIP END*/


/* 240321 kontaktuppgifter för kommunerna i Left sidebar, i _LayoutDialog.cshtml */

.contact-card {
    max-width: 80%;
    min-width: 239px;
    align-content: center;
    justify-content: center;
    padding-block: 3rem;
    padding-inline: 2rem;
    border-radius: 0.8rem;
    background-color: #ffffff81;
    border: none;
    color: black;
    word-wrap: break-word;
    font-size: small;
}
.hide-contact-info p:empty {
    display: none;
}
.hide-contact-info p a:empty {
    display: none;
}
.img-mw-logo {
    max-width: 164px;
    width: 100%;
    display: block;
}


@media screen and (max-width: 994px) {
    #contact {
        display: none !important;
    }
}