:root {
    color-scheme: light, dark;
}

hr {
    color: white;
}

.mkc-base-grid {

    height: 100vh;
    box-sizing: border-box;
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
                       "app-header app-header app-header"
                       "app-body app-body app-body";
    

}


.mkc-header {
    position: fixed;
    width: 100%;
    box-shadow: 2px;
    grid-area: app-header;
    z-index: 100;
    max-height: 3rem;
    border-bottom: thin;
    backdrop-filter: blur(15px);
    background-color: #1a26232e;
}

.header-row {
    align-items: center !important;
    justify-content: space-between !important;
    display: flex !important;
}

.ah-row {
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 5rem;
    row-gap: 5rem;
}


.app-body {
    grid-area: app-body;
    overflow: hidden;
    overflow-y: scroll;
 
}

.app-sidebar {
    width: 350px;
    grid-area: app-sidebar;
    position: static;
    display: flex;
    flex-direction: column;
}

.app-sidebar > .content-central {
    margin-top: auto;
    margin-bottom: auto;
}

.bg-blue-green {
    background: #0dbcdb;
    background: radial-gradient(circle,rgba(13, 188, 219, 1) 0%, rgba(19, 86, 120, 1) 35%, rgba(0, 255, 255, 1) 100%);
}

.bg-blue-white {
    background: #00b7ff;
    background: linear-gradient(125deg, rgba(0, 183, 255, 1) 0%, rgba(49, 164, 235, 1) 35%, rgba(245, 252, 255, 1) 100%);
}

.bg-blue-black {
    background-image: linear-gradient(125deg, rgba(0, 183, 255, 1) 0%, rgba(23, 82, 141, 1) 35%, #040e2c 100%);
    background-color: initial;
    color: white;
}


body:has(.mk-dark-theme-selected) {
    background-image: linear-gradient(125deg, rgba(0, 183, 255, 1) 0%, rgba(23, 82, 141, 1) 35%, #040e2c 100%);
    background-color: initial;
}

body:has(.mk-light-theme-selected) {
    background: #00b7ff;
    background: linear-gradient(125deg, rgba(0, 183, 255, 1) 0%, rgba(49, 164, 235, 1) 35%, rgba(245, 252, 255, 1) 100%);
}

@media(prefers-color-scheme: dark) {
    body:has(.theme-like-browser) {
        background-image: linear-gradient(125deg, rgba(0, 183, 255, 1) 0%, rgba(23, 82, 141, 1) 35%, #040e2c 100%);
        background-color: initial;
    }
}

@media(prefers-color-scheme: light) {
    body:has(.theme-like-browser) {
        background: #00b7ff;
        background: linear-gradient(125deg, rgba(0, 183, 255, 1) 0%, rgba(49, 164, 235, 1) 35%, rgba(245, 252, 255, 1) 100%);
    }
}


/*
.bg-blue-black {
    background-image: linear-gradient(125deg,  #0092cc 0%,  #116faa 35%,  #002839 100%);
    background-color: initial;
    color: white;
}*/




    .mkc-layout {
    height: 100vh;
    box-sizing: border-box;
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
                       "app-header app-header app-header"
                       "app-body app-body app-body";
    background-color: #b0d9ce;
}