/* ################################################################ */
    /* BASE */
    :root {
        --app-color: #f0f2f4;
        --app-body: #202224;
        --app-background: #303234;
        --app-highlight: #606264;
    }

    * {
        font-family: sans-serif;
        font-size: inherit;
        margin:0;
        padding:0;
        border:0;
        box-sizing: border-box;
    }

    body {
        width: 100%;
        height: 100dvh;
        margin: 0;
        padding: 0;
        background-color:var(--app-body);
        color:var(--app-color);
        font-size:14px;
    }

    input, textarea {
        outline:none;
    }

    .a {
        cursor:pointer;
    }

    .b {
        font-weight:bold;
    }

    .left {
        justify-content:left;
        text-align:left;
    }
    .center {
        justify-content:center;
        text-align:center;
    }
    .right {
        justify-content:right;
        text-align:right;
    }


    /* ################################################################ */
    /* SCROLLBAR */

    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    ::-webkit-scrollbar-track {
        background: var(--app-body);
    }
    ::-webkit-scrollbar-corner {
        background:var(--app-body);
    }
    ::-webkit-scrollbar-thumb {
        background: var(--app-background);
        border: 2px solid var(--app-body);
    }
    ::-webkit-scrollbar-thumb:hover {
        background: var(--app-background);
    }

 
    /* ################################################################ */
    /* APP-ICON */
    app-icon {
        display:grid;
        place-self: center;
        font-family: 'Material Symbols Outlined';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        font-feature-settings: 'liga';
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
        vertical-align: middle;
    }

    app-icon-small {
        display:grid;
        place-self: center;
        font-family: 'Material Symbols Outlined';
        font-weight: normal;
        font-style: normal;
        font-size: 18px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        font-feature-settings: 'liga';
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
        vertical-align: middle;
    }


    /* ################################################################ */
    /* pending */    
    .iconPending {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 80px;
    }

    .iconPending div {
        position: absolute;
        border: 4px solid #fff;
        opacity: 1;
        border-radius: 50%;
        animation: iconPending 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

    .iconPending div:nth-child(2) {
        animation-delay: -0.5s;
    }

    @keyframes iconPending {
        0% {
            top: 36px;
            left: 36px;
            width: 0;
            height: 0;
            opacity: 0;
        }

        4.9% {
            top: 36px;
            left: 36px;
            width: 0;
            height: 0;
            opacity: 0;
        }

        5% {
            top: 36px;
            left: 36px;
            width: 0;
            height: 0;
            opacity: 1;
        }

        100% {
            top: 0px;
            left: 0px;
            width: 72px;
            height: 72px;
            opacity: 0;
        }
    }