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

hr {
    color: rgb(244 244 37 / 0.3) !important;
    border: 0.05rem solid;
}
    
}

.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;
}










.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-image: linear-gradient(125deg, rgb(253 255 7 / 68%) 0%, #000000cf 20%, #080805e6 60%, #242518 80%, #e4e41494 100%);
    background-color: initial;
}


body {
    background-image: linear-gradient(125deg, rgb(42 42 16 / 83%) 0%, #b6ae26 30%, #6f7606 60%, #0a0a08 80%, #21201d 100%) !important;
    background-color: initial;
}


.main-flcol{
    gap:120px;
}

@media(max-width:800px){
    .main-flcol{
        gap:60px!important;
    }
}