@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900;1000&display=swap');

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

* {
    letter-spacing: .05rem;
}

a {
    width: fit-content;
    user-select: none !important;
}

#guest-main-wrapper {

    min-height: 100vh !important;
    max-width: 100vw !important;

    & h2, h3, h4, h5, h6 {
        font-family: 'Nunito', sans-serif;
        font-weight: 600;
    }

    & p, span, a, label, input, select, textarea {
        font-weight: normal;
    }

    & button {
        font-weight: 500;
    }

    & p, span, a, h2, h3, h4, h5, h6, label {
        margin: 0;
    }

    & label {
        margin: 0;
    }
    
    & a, label, input, select, textarea, button {
        letter-spacing: .1rem;
    }

    /* Utilities */

    & .no-select {
        user-select: none !important;
    }

    & .text-highlight {
        font-weight: 500;
        color: #075C1C !important;
    }
    
    & .input-error {
        color: #E61F1F;
    }

    & #panel-backlink {

        & a {
            width: fit-content;
            padding: .2rem .8rem;
            letter-spacing: .15rem;
            font-size: .8rem !important;
            color: #333;
            
            & i {
                font-size: .7rem !important;
            }

        }

    }

    & .spin-icon {
        animation: spin 1s infinite linear;
        color: #FFF !important;
    }

    & #toast-container {
        
        z-index: 9999 !important;

        & .toast {
            width: fit-content !important;
        }

    }

    & .ql-container {
        cursor: text;
    }

    & .input-icon {

        & .d-flex {

            position: relative;
    
            & div:first-child {
                position: absolute;
                z-index: 6;
                height: 100%;
                width: 2.4rem;
                color: #BBB;
                display: flex;
                justify-content: center;
                align-items: center;
            }
    
            & input {
                padding-left: 2.2rem;
    
            }

        }

    }

    & .c-pointer, .c-pointer * {
        cursor: pointer;
    }
    
    /* Form Group */
    
    & label {
        margin-bottom: .2rem;
    }
    
    & input {
        padding: .4rem .8rem;
    }
    
    & select {
        cursor: pointer;
    }
    
    /* Buttons */
    
    & .b-primary {

        background-color: #075C1C;
        color: #FFF;

        &:hover {
            background-color: #25BB33;
            color: #333;
        }

    }
    
    & .b-secondary {

        background-color: #E2B606;
        color: #333;

        &:hover {
            background-color: #927502;
            color: #FFF;
        }
        
    }
    
    & .b-assistant {

        background-color: #2E71B7;
        color: #FFF;

        &:hover {
            background-color: #105195;
            color: #FFF;
        }

    }

    /* Modal Alert */

    & .modal-alert {

        & .modal-content {

            width: 100%;
            padding: .5rem .5rem 1.4rem .5rem;

            & .modal-body {

                padding: 0;

                & .body-content {

                    padding: 0 .8rem;
                    margin-top: 1rem;
                    margin-bottom: 1rem;

                    & h4 {
                        margin-bottom: 1rem;
                    }

                }

                & .btn {
                    text-transform: uppercase;
                    font-weight: 500;
                    padding: .3rem 1.2rem;
                }

            }
    
        }

    }
    

    /* M E D I A S */
    
    @media (max-width: 575px) {

        & #panel-backlink {
            margin-bottom: 1rem;
            margin-left: 1rem;
        }
    
        & #app-content-container {
            margin-top: 6rem;
        }
    
        & h2,
        .span-xg, .icon-xg {
            font-size: 1.3rem;
        }
    
        & h3,
        .icon-xxl, .span-xxl {
            font-size: 1.2rem;
        }
    
        & h4,
        .icon-xl, .span-xl, .button-xl {
            font-size: 1.1rem;
        }

        & h5,
        .link-lg, .icon-lg, .span-lg, .button-lg {
            font-size: 1.0rem;
        }

        & h6,
        .link-md, .icon-md, .span-md, .button-md {
            font-size: 0.9rem;
        }
    
        & p, span, li, label, input, select, textarea,
        .link-sm, .icon-sm, .span-sm, .button-sm {
            font-size: 0.8rem;
        }
    
        & .input-error,
        .link-xs, .icon-xs, .span-xs, .button-xs {
            font-size: 0.7rem;
        }
    
        & .form-group {
            height: 5.8rem;
        }

        & .modal-alert {

            & .modal-content {
                max-width: 20rem;
            }

        }

    }
    
    @media (min-width: 576px) {

        & #panel-backlink {
            margin-bottom: 1rem;
            margin-left: 1rem;
        }
    
        & #app-content-container {
            margin-top: 7rem;
        }
    
        & h2,
        .span-xg, .icon-xg {
            font-size: 1.4rem;
        }
    
        & h3,
        .icon-xxl, .span-xxl {
            font-size: 1.3rem;
        }
    
        & h4,
        .icon-xl, .span-xl, .button-xl {
            font-size: 1.2rem;
        }

        & h5,
        .link-lg, .icon-lg, .span-lg, .button-lg {
            font-size: 1.1rem;
        }

        & h6,
        .link-md, .icon-md, .span-md, .button-md {
            font-size: 1.0rem;
        }
    
        & p, span, li, label, input, select, textarea,
        .link-sm, .icon-sm, .span-sm, .button-sm {
            font-size: 0.9rem;
        }
    
        & .input-error, .link-xs, .icon-xs, .span-xs, .button-xs {
            font-size: 0.8rem;
        }
    
        & .form-group {
            height: 6.3rem;
        }

        & .modal-alert {

            & .modal-content {
                max-width: 22rem;
            }

        }

    }

    @media (min-width: 768px) {
    }

}