:root {
    --color-black: #3a3a3a;
    --color-white: #fff;
    --color-off-white: #f5f5f5;

    --color-gray: #616161;
    --color-silver-gray: #d1d1d1;
    --color-medium-gray: #ababab;
    --color-soft-gray: #ededed;
    --color-light-gray: #e9e8e8;

    --color-orange: #ff6e00;
    --color-blue: #5b98f8;
    --color-light-blue: #e7f0ff;
    --color-red: #ff3a1f;
    --color-delicate-pink: #fff0ee;

    --font-Roboto: 'Roboto', sans-serif;
}

* {
    font-family: var(--font-Roboto);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100%;
    background: var(--color-white)
}

/*Styles General*/

.hidden {
    display: none;
}

.visible {
    display: block;
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-relative {
    position: relative;
}

.input {
    width: 255px;
    height: 36px;
    border: 1px solid var(--color-silver-gray);
    border-radius: 4px;
    padding: 8px 6px;
}

.input-error {
    border: 1px solid red;

    &:focus {
        border: 1px solid red;
        outline: none;
    }
}

.checkbox {
    width: 12px;
    height: 12px;
    margin-right: 3px;
    cursor: pointer;

    &:checked {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: var(--color-orange);
        border-radius: 2px;
        position: relative;
        display: inline-block;
    }

    &:checked::before {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 7.11px;
        height: 6.75px;
        background-image: url('../img/icons-general/check.svg');
        background-size: contain;
        background-repeat: no-repeat;
        transform: translate(-50%, -50%);
    }
}

.plus {
    display: none;
}

.btn-cancel {
    width: 132px;
    height: 36px;
    background-color: var(--color-white);
    border: 1px solid var(--color-medium-gray);
    border-radius: 4px;
    color: var(--color-gray);
    padding: 10px 24px;
    cursor: pointer;
}

.button-light {
    border: 1px solid var(--color-medium-gray);
    background-color: var(--color-white);
    color: var(--color-gray);
    border-radius: 4px;
    padding: 10px 16px;
    cursor: pointer;
}

.button-dark {
    border-radius: 4px;
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 10px 20px;
    cursor: pointer;
}

.button-disabled {
    background-color: var(--color-silver-gray);
    color: var(--color-medium-gray);
    font-size: 12.8px;
    border: none;
    border-radius: 4px;
}

/*Input com label e placeholder animado*/
.input_container_animate {
    position: relative;

    .input_field {
        width: 230px;
        height: 36px;
        border-radius: 4px;
        border: 1px solid var(--color-medium-gray);
        padding: 8px 6px;
        outline: none;
        transition: border-color 0.3s ease;

        &::placeholder {
            color: transparent;
            transition: color 0.3s ease;
        }

        &:focus {
            border-color: var(--color-medium-gray);
        }
    }

    .input_label {
        position: absolute;
        top: 10px;
        left: 10px;
        line-height: 17.92px;
        background-color: var(--color-white);
        padding: 0 3px;
        color: var(--color-medium-gray);
        font-size: 12.8px;
        pointer-events: none;
        transition: all 0.3s ease;
    }

    .input_field:focus+.input_label,
    .input_field:not(:placeholder-shown)+.input_label {
        top: -8px;
        left: 10px;
        font-size: 12px;
        color: var(--color-medium-gray);
    }
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 0 0 0;
    z-index: 1000;
}

.tooltip-webhook {
    position: relative;

    .tooltiptext {
        visibility: hidden;
        width: 200px;
        font-size: 12px;
        font-weight: 400;
        background-color: var(--color-black);
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 8px;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 50%;
        margin-left: -105px;
        opacity: 0;
        transition: opacity 0.3s, visibility 0.3s;

        &::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 10px;
            border-style: solid;
            border-color: var(--color-black) transparent transparent transparent;
        }
    }

    &:hover {
        .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    }
}

.item-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 12.8px;
    color: var(--color-gray);

    &:hover {
        background: var(--color-off-white);
    }
}

/* Estilo genérico para qualquer campo com erro */
.warning {
    border: 1px solid var(--color-red);
    background-color: var(--color-white);
    box-shadow: 0 0 5px rgba(219, 68, 55, 0.3);
}

/*Select Customizado*/
.custom-select-wrapper {
    position: relative;

    .custom-select-label {
        padding-bottom: 5px;
    }

    .custom-select {
        cursor: pointer;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .custom-select-decorator {
        border: 1px solid var(--color-silver-gray);
        padding: 8px 12px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }
}