@import url('./gfont-firesans/firesans.css');
@import url('custom-styles.css');

@layer legacy {


    /* SECTION: GENERALS */
    * {
        scrollbar-width: 0px;
        -ms-overflow-style: none;
        font-family: "Fira Sans", sans-serif;
        line-height: 1.5;
        box-sizing: border-box;
        transition: background-color var(--color-transition-duration);
        -webkit-transition: background-color var(--color-transition-duration);
        -moz-transition: background-color var(--color-transition-duration);
        -o-transition: background-color var(--color-transition-duration);
    }

    body {
        overflow: hidden;
        -ms-overflow-style: none;
        font-family: "Fira Sans", sans-serif;
        color: var(--text-color);
        background-color: var(--background-main);
    }

    a {
        text-decoration: none;
        color: var(--link-color);
    }


    input, .text-panel, .text-input {
        min-height: 2.5rem;
        min-width: 10rem;
        outline: none;
        font-size: 1rem;
        border: var(--border-stroke-thin);
        border-radius: var(--border-radius-tight);

        background-color: var(--background-main) !important;
        color: var(--text-color);
    }

    input {
        padding: 0.5rem 1rem;
        height: 2.3rem;
    }

    /* input:focus, .text-panel.editMode {
        outline: var(--border-stroke-bold)
    } */
    .input-styleless {
        border: none;
        background-color: transparent;
    }


    .text-input {
        width: 100%;
        /* min-height: fit-content; */
        height: 3rem;
        padding: .5rem 1rem;
        resize: none;
        align-content: start;
        font-size: var(--font-sm);
    }

    .text-input.fit-height {
        min-height: fit-content;
    }

    input::placeholder,
    textarea::placeholder,
    .text-input::placeholder {
        font-size: var(--font-xs);
    }


    .password-input-wrapper {
        display: flex;
        align-items: center;
        padding: 0 2rem;
        outline: none;
        border: var(--border-stroke-thin);
        border-radius: var(--border-radius-tight);
    }

    .password-input-wrapper input {
        padding: 0;
        outline: none;
        font-size: 1rem;
        border: none;
        border-radius: none;
    }

    .label {
        position: relative;
        text-overflow: ellipsis;
        user-select: none;
    }

    label {
        position: relative;
        display: block;
        text-overflow: ellipsis;
        user-select: none;
        font-size: 0.8rem;
        margin-left: 1rem;
        margin-bottom: -0.5rem;
        z-index: 1;
        /* background-color: var(--background-main); */
        width: fit-content;
        padding: 0 .2rem;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);

    }

    /* .label-header{
        margin-bottom: 0.5rem;
    } */
    .text-input::-webkit-scrollbar {
        width: 0px;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        transition: background-color 3s;
        background-color: var(--background-secondary) !important;
        -webkit-text-fill-color: black;
    }


    .accentText {
        text-decoration: underline;
        text-decoration-color: var(--accent-color);
        -webkit-text-decoration-color: var(--accent-color);
        text-underline-offset: 5px;
    }

    .red-text {
        color: red;
    }

    .gray-text {
        color: gray;
    }

    .sub-descript {
        font-size: var(--font-xxs);
    }

    .center-text {
        text-align: center;
    }


    ::-webkit-scrollbar {
        width: 7px;
        height: 7px;
    }

    ::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0);
    }

    ::-webkit-scrollbar-thumb {
        background: #cbcbcb;
        border-radius: 5px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }


    svg:not(.lucide-icon) {
        stroke: var(--stroke-color);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .fill-svg {
        fill: var(--stroke-color);
        stroke: none;
    }

    .icon-img {
        width: 100%;
        height: 100%;
    }

    .round-icon {
        width: 1.5rem;
        height: 1.5rem;
        font-size: var(--font-xs);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgb(79, 79, 105);
        color: white;

    }

    .round-icon img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

    .katex-display {
        overflow-x: scroll;
        height: fit-content;
        padding: 1rem 0;
    }

    /* SECTION: MODALS */
    .modal {
        display: none;
        position: fixed;
        z-index: 99;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        color: var(--text-color);

        /* -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none; */
    }

    .modal-panel {
        margin: auto;
        min-width: 25em;
        max-width: 90vw;
        width: 40em;
        background-color: var(--panel-secondary);
        border-radius: 1.5rem;
        box-shadow: 1px 1px 5px rgba(0.1, 0.1, 0.1, 0.2);
        position: relative;
        transition: var(--transition-medium);
        transition-property: width, height;
        overflow: hidden;
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 0rem;
    }

    .modal-panel.wide {
        width: 60em;
    }


    .modal-content-wrapper {
        direction: rtl;
        overflow-y: auto;
        margin-left: 4px;
        height: 100%;
    }

    .modal-content {
        /* max-width: 60ch; */
        margin-right: 1px;
        padding: 1rem 3rem;
        display: flex;
        flex-direction: column;
        max-height: 70vh;
        direction: ltr;
    }

    .content-box {
        padding-bottom: 3rem;
    }


    .modal-buttons-bar {
        display: flex;
        justify-content: space-between;
        margin-top: 3rem;
    }

    #member-info-modal .modal-panel {
        width: 25em;
    }

    #member-info-modal .modal-content {
        margin: 1rem 0;
        align-items: center;
    }

    /* SECTION: BUTTONS */
    button {
        color: var(--text-color);
    }

    button:disabled {
        opacity: 0.5;
    }

    .btn-bg {
        /* background-color: red !important; */
        background-color: var(--panel-secondary) !important;
        border-radius: var(--border-radius-tight);
    }

    .btn-xs, .btn-sm {
        display: flex;
        align-items: center;

        border: none;
        background-color: transparent;
        cursor: pointer;
        width: fit-content;
        height: fit-content;

        padding: .25rem .5rem;
        box-sizing: border-box;
    }

    .btn-xs svg {
        width: 1.2rem;
        height: 1.2rem;
    }

    .btn-sm svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .btn-sm.border {
        border-radius: var(--border-radius-tight);
        border: var(--border-stroke-thin);
    }


    .btn-md, .btn-md-fill, .btn-md-stroke {
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 1rem;
        align-items: center;

        height: 2.5rem;
        min-width: 6rem;
        padding: .5rem 1rem;

        cursor: pointer;
        overflow: hidden;

        width: 100%;
    }

    .btn-md {
        display: block;
        background: transparent;
        border: none;
        width: fit-content;
        text-align: center;
        font-size: var(--font-sm);
    }

    .btn-md-fill {
        background: var(--button-color);
    }

    .btn-md-stroke {
        background: transparent;
        color: var(--text-color);
        border: var(--border-stroke-thin);
        border-radius: var(--border-radius-tight);
    }

    .btn-md-fill .icon,
    .btn-md-stroke .icon {
        width: 1rem;
        height: 1rem;
    }

    .btn-md-fill .label,
    .btn-md-stroke .label {
        text-align: start;
        overflow: hidden;
        text-wrap: nowrap;
        white-space: nowrap;
    }

    .btn-md-txt {
        display: block;
        padding: 0;
        background-color: transparent;
        border: none;
        height: 2rem;
        align-items: center;
        height: 2.5rem;
        cursor: pointer;
        overflow: hidden;
        font-size: var(--font-sm);
    }


    .btn-lg-fill, .btn-lg-stroke {
        width: max-content;
        min-width: 8rem;
        height: 2.5rem;
        /* margin-top: 1rem; */
        padding: 0.75rem 2rem 0.75rem 2rem;

        line-height: 0;
        border: 0;
        font-family: inherit;
        cursor: pointer;
        font-size: 1rem;
        border-radius: var(--border-radius-normal);
        outline-offset: -2px;
    }

    .btn-lg-fill {
        font-weight: 400;
        background: var(--button-color);
        color: var(--invert-Text-color);
    }

    .btn-lg-stroke {
        background: transparent;
        color: var(--text-color);
        border: var(--border-stroke-bold);
        border-radius: var(--border-radius-normal);
    }

    .btn-text:hover {
        text-decoration: underline;
    }

    .save-btn {
        display: none;
        justify-self: end;
        width: 5rem;
    }


    .delete-btn {
        background-color: red;
        color: white;
    }

    .delete-btn-svg svg {
        stroke: red;
    }

    .closeButton {
        position: absolute;
        right: 2rem;
        top: 2rem;
        z-index: 99;
        cursor: pointer;
    }


    .quick-actions {
        position: absolute;
    }

    .round-icon-btn {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        border: none;
    }

    .dot {
        height: 5px;
        width: 5px;
        background-color: var(--text-faded-color);
        border-radius: 50%;
        /* align-self: center; */
        justify-self: center;
    }

    .dot-lg {
        height: 8px;
        width: 8px;
        border-radius: 50%;
        justify-self: center;
        background-color: green;
    }

    .red-c {
        background-color: red;
    }

    .org-c {
        background-color: orange;
    }

    .grn-c {
        background-color: green;
    }

    /* SECTION: SCROLL PANELS */
    .panel-container {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        box-sizing: border-box;
        margin-right: 3px;
    }

    .scroll-container {
        overflow-y: auto;
        overflow-x: hidden;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding-top: 1rem;
        padding-bottom: 3rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .scroll-panel {
        display: block;
        height: fit-content;
        box-sizing: border-box;
    }


    .row {
        width: 100%;
        margin: .5rem 0;
    }

    .flex-row {
        position: relative;
        display: flex;
        flex-direction: row;
        column-gap: 1rem;
    }

    .flex-col {
        display: flex;
        flex-direction: column;
    }

    .align-end {
        align-self: flex-end;
    }

    .justify-content-end {
        justify-content: end;
    }

    .justify-space-between {
        justify-content: space-between;
    }

    .top-gap-1 {
        margin-top: 1rem;
    }

    .top-gap-2 {
        margin-top: 1rem;
    }

    .top-gap-3 {
        margin-top: 3rem;
    }

    .dynamic-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, 3rem);
        row-gap: 1.5rem;
        justify-items: center;
        align-items: center;
        gap: 1rem;
    }

    .zero-v-margin {
        margin-top: 0;
        margin-bottom: 0;
    }

    .zero-b-margin {
        margin-bottom: 0;
    }

    .text-panel {
        min-height: 4rem;
        position: relative;
        padding: 0rem 1rem 2rem 1rem;
    }

    .tooltip-parent {
        position: relative;
    }

    /* When the dropdown is opened, hide the tooltip to prevent overlap */
    .tooltip-parent.dropdown-open .tooltip,
    .tooltip-parent.active .tooltip {
        display: none !important;
    }

    .tooltip {
        position: absolute;
        display: none;
        height: 1.5rem;
        width: fit-content;
        font-size: var(--font-xxs);
        align-items: center;
        align-content: center;
        line-height: 0;
        padding: 0 1rem;
        text-wrap: nowrap;
        white-space: nowrap;
        cursor: none;
        background-color: var(--background-secondary);
        border: var(--border-stroke-hairline);
        border-radius: var(--border-radius-tight);
    }

    .tooltip-below {
        top: 2rem;
    }

    .tooltip-left.tooltip-left.tooltip-left {
        left: 100%;
    }

    .tt-abs-left {
        top: 50%;
        left: 110%; /* Moves tooltip to the right of the button */
        transform: translateY(-50%);
    }

    .tt-abs-up {
        top: -2rem;
        /*right: -150%;*/
    }


    /* SECTION: EDIT BUTTONS PANEL */
    .edit-panel {
        position: absolute;
        bottom: .5rem;

        height: min-content;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .edit-panel:not(.stick-right-out) {
        right: 0;
    }

    .edit-panel.stick-right-out {
        left: 100%;
    }

    .edit-panel button {
        opacity: .5;
    }

    .edit-panel button:hover {
        opacity: 1;
    }

    .edit-panel #edit-confirm, .edit-panel #edit-abort {
        display: none;
    }


    #overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--background-main);
        transition: opacity 500ms;
        z-index: 100;
    }

    #overlay-wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* #overlay-logo{

    width: 15rem;
} */