:root{
    /* --b-hue: 240;
    --b-saturation: 96%;
    --b-lightness: 35%; */
    --b-hue: 257;
    --b-saturation: 100%;
    --b-lightness: 68%;
    --b-lightness-secondary: 60%;
    --b-lightness-light: 95%;
    --color-primary: hsl(var(--b-hue), var(--b-saturation), var(--b-lightness));
    --color-secondary: hsl(var(--b-hue), var(--b-saturation), var(--b-lightness-secondary));
    --max-frame-width: 540px;
    --bs-body-color: #444444;
}
.list-group{
    --bs-list-group-item-padding-x: 1rem;
}
.list-group > .list-group-item:nth-child(2n+1){
    background-color: #F6F7F7;
}
.event-none{
    pointer-events: none;
}
.error-warning {
    padding: .75rem;
    margin-block: .5rem;
    border-left: 5px solid var(--bs-danger);
    background: #ff000014;
    font-weight: 400;
    text-transform: initial;
    color: var(--bs-danger);
}
.team-separator {
    padding: 1rem;
    background: hsl(var(--b-hue), var(--b-saturation), var(--b-lightness-light));
}
body{
    font-size: 1rem;
}
.bg-theme-light{
    background-color: hsl( var(--b-hue), var(--b-saturation), 95% ) !important;
}
.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.modal-content{
    max-width: var(--max-frame-width);
    margin-inline: auto;
}
.border-primary {
	--bs-border-opacity: 1;
	border-color: var(--color-secondary) !important;
}
.text-primary{
    color: hsl(257, 100%, 68%) !important;
}
a.text-primary{
    color: #2271b1 !important;
}
.text-secondary {
    color: #444 !important;
}
.bg-primary {
    background-color: var(--color-primary)!important;
}
.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: 103,168,228;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-primary);
    --bs-gradient: none;
    font-weight: bold;
}

.btn-warning {
    --bs-btn-bg: #FF8000;
    --bs-btn-border-color: #FF8000;
    --bs-btn-hover-bg: #e67300;
    --bs-btn-hover-border-color: #e67300;
    --bs-btn-active-bg: #e67300;
    --bs-btn-active-border-color: #e67300;
    --bs-btn-disabled-bg: #FF8000;
    --bs-btn-disabled-border-color: #FF8000;
}

.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-secondary);
    --bs-btn-hover-border-color: var(--color-secondary);
    --bs-btn-focus-shadow-rgb: 126,181,232;
    --bs-btn-active-bg: var(--color-secondary);
    --bs-btn-active-border-color: var(--color-secondary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
}
.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
	background-color: var(--color-secondary) !important;
}
.form-select:focus,
.form-control:focus{
    background-color: hsl(var(--b-hue), var(--b-saturation), 95%);
}
.app{
    --header-height: 3.5rem;
    --footer-height: 2.5rem;
    --inner-header-height: 4rem;
    --menu-item-width: 3rem;
    height: 100dvh;
    width: 100%;
    max-width: var(--max-frame-width);
    margin-inline: auto;
    .header-area{
        /* --header-icon-border-color: #0404B0; */
        --header-icon-border-color: #8B5DFF;
        height: var(--header-height);
        .menu-item-box{
            height: var(--menu-item-width);
            width: var(--menu-item-width);
            /* background: #E1FFFF; */
            background: hsl(257, 100%, 95%);
            cursor: pointer;
            flex-wrap: wrap;
            color: var(--bs-dark);
            border: 2px solid var(--header-icon-border-color);
            i{
                font-size: 30px;
            }
            span{
                display: none;
                font-size: .5rem;
            }
        }
        .menu-item-box:hover,
        .menu-item-box.active{
            color: white;
            background-color: var(--header-icon-border-color);
        }
    }
    .app-content{
        height: calc(100% - calc(var(--header-height) + var(--footer-height)));
        .frame-radius{
            border-radius: 1.5rem;
        }
        .inner-header{
            --forword-backword: 2.5rem;
            height: var(--inner-header-height);
            padding-inline: 1.225rem;
            .inner-heading-title {
                width: calc(100% - calc(var(--forword-backword) * 2));
                text-align: center;
                font-size: 17px;
                font-weight: bold;
                text-transform: uppercase;
                padding-inline: .5rem;
                color: var(--color-primary);
            }
            .forword-backword-button {
                background: transparent;
                display: inline-flex;
                height: var(--forword-backword);
                width: var(--forword-backword);
                align-items: center;
                padding-inline: 0;
                justify-content: center;
                gap: .5rem;
                color: var(--bs-dark);
            }
        }
        .inner-content{
            overflow-x: hidden;
            overflow-y: auto;
            padding: 1.125rem;
            height: calc(100% - var(--inner-header-height));
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    }
    .footer-area{
        height: var(--footer-height);
    }
}

@media(width >= 576px){
    .app{
        max-width: 540px;
    }
}
@media(width >= 768px){
    .app{
        max-width: 720px;
    }
}
@media(width >= 992px){
    .app{
        max-width: 960px;
        --header-height: 70px;
    }
    .menu-item-box{
        height: 60px !important;
        width: 60px !important;
    }
}
.form-control,.form-select{
    box-shadow: none !important;
}
.btn-check+.btn:hover {
    color: white;
}