.gone{
    visibility: hidden !important;
    width: 0;
}

.input-div{
    height: 5rem;
    border-radius: 7px;
    text-align: left;
    margin: 1.5rem;
}

.help-msg{
    width: fit-content;
    height: fit-content;
    display: block;
    margin: auto;
}

.help-msg-select{
    width: fit-content !important;
    display: inline !important;
    background-color: transparent !important;
    border: none !important;
    appearance: auto !important;
    --bs-form-select-bg-img: mome !important;
    font-weight: bold !important;
}

.sxolh-block{
    width: 375px;
    height: fit-content;
    display: block;
    margin: auto;
    max-width: 90%;
}

.sxolh-inside{
    border-width: .1rem;
    border-color: transparent;

    transition-property: border-color border-width;
    transition-duration: 500ms;
    transition-timing-function: ease-out;
    transition-delay: 0s;
}

.sxolh-small{
    font-size: 0.95rem;
}

.sxolh-inside:hover{
    border-color: blue;
    cursor: pointer;
}

.sxolh-border{
    width: fit-content;
    margin: auto;
}

.sxolh-bold{
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
}

.sxolh-link{
    text-decoration: none;
    width: fit-content;
}

.kat-select{
    margin: auto;
    display: block;
    width: fit-content;
}

.btn-outline-kat {
    --bs-btn-color: #7C67B0; 
    --bs-btn-border-color: #7C67B0; 
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #7C67B0;
    --bs-btn-hover-border-color: #7C67B0;
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #7C67B0; 
    --bs-btn-active-border-color: #7C67B0;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #7C67B0;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #7C67B0;
    --bs-gradient: none;
}

.bash{
    font-size: 1rem;
}

.root-div {
    width: 90vw;
}

.info-div{
    position: sticky;
    top: 0;
    overflow: auto;
    height: 100vh;
}

.info-title{
    font-size: 1.5rem;
    font-weight: bold;
}

.info-img{
    width: -webkit-fill-available;
    max-width: 250px;
    border-radius: 20px;
}

.fab {
    display: none;
}

@media (max-width: 990px) {
    .filter-div {
        display: none;
        width: 0;
    }

    .info-div {
        display: none;
        width: 0;
    }

    .main-baseis-div{
        width: 100%;
        padding: 0;
    }

    .help-msg{
        width: 90vw;
        height: fit-content;
        display: block;
        margin: auto;
    }

    .root-div {
        width: 100vw;
    }

    .root-div > div {
        width: fit-content;
    }

    #sxolesDisplay {
        width: 100vw;
    }

    .fab{
        display: block;
        position: sticky;
        bottom: 5rem;
    }

    .fab button {
        display: flow;
        float: right;
        margin-right: .5rem;
        width: 4rem;
        height: 4rem;
        border: none;
        border-radius: .5rem;
        background-color: #7C67B0;
        color: white;
        box-shadow: none;
        transition: box-shadow 0.2s ease;
    }

    .fab button:hover {
        box-shadow: 0 0 8px #7C67B0;
    }

    .fab span{
        font-size: 2rem;
    }
}