/* ==========================================================
   AXXPOINT OBJECTS
   Responsive Form Objects
========================================================== */

:root {
    --axx-control-height: 24px;
    --axx-control-line-height: 22px;
    --axx-control-radius: 3px;
    --axx-control-font-size: .78rem;
    --axx-control-padding-x: .35rem;
    --axx-input-height-sm: 1.9rem;
    --axx-input-height-lg: 2.75rem;
    --axx-toolbar-height: 24px;
    --axx-border: #ced4da;
    --axx-border-focus: #007acc;
    --axx-bg: #fff;
    --axx-bg-disabled: #f8f9fa;
    --axx-text: #212529;
    --axx-placeholder: #6c757d;
    --axx-vs-blue: #007acc;
    --axx-vs-blue-hover: #006bb3;
    --axx-vs-hover-bg: #eef6ff;
    --axx-focus-shadow: 0 0 0 .12rem rgba(0, 122, 204, .18);
}

/* ==========================================================
   HEADERS
========================================================== */

h2 {
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    color: #ccc;
}

    h2.inactive {
        color: #ccc;
    }

    h2.active {
        color: #0d0d0d;
        padding:0px;
        border-bottom: 1px solid #5fbae9;
    }

/* ==========================================================
   LABELS
========================================================== */

label,
.form-label {
    display: inline-block;
    margin-bottom: .30rem;
    font-size: .875rem;
    font-weight: 600;
    color: #495057;
}

/* ==========================================================
   INPUTS / SELECTS
========================================================== */

input:not([type]),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="datetime-local"],
select,
.form-control,
.form-select {
    width: 100%;
    height: var(--axx-control-height);
    min-height: var(--axx-control-height);
    padding: 0 var(--axx-control-padding-x);
    font-size: var(--axx-control-font-size);
    line-height: var(--axx-control-line-height);
    color: var(--axx-text);
    background-color: var(--axx-bg);
    border: 1px solid var(--axx-border);
    border-radius: var(--axx-control-radius);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .form-select,
    .form-select.input-xs {
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 1.75rem;
        background-position: right .45rem center;
        background-size: 10px;
    }

/* ==========================================================
   TEXTAREA
========================================================== */

textarea,
textarea.form-control {
    width: 100%;
    height: auto;
    min-height: 6rem;
    padding: .35rem;
    font-size: var(--axx-control-font-size);
    line-height: 1.45;
    resize: vertical;
}

/* ==========================================================
   PLACEHOLDER
========================================================== */

::placeholder {
    color: var(--axx-placeholder);
    opacity: 1;
}

/* ==========================================================
   STATES
========================================================== */

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--axx-border-focus);
    box-shadow: var(--axx-focus-shadow);
}

input[readonly],
textarea[readonly],
.form-control[readonly] {
    background: #fafafa;
}

input:disabled,
textarea:disabled,
select:disabled,
button:disabled,
.form-control:disabled,
.form-select:disabled {
    background: var(--axx-bg-disabled);
    cursor: not-allowed;
    opacity: .75;
}

/* ==========================================================
   CHECKS / RADIOS / SWITCHES
========================================================== */

input[type="checkbox"],
input[type="radio"],
.form-check-input,
.form-switch .form-check-input {
    cursor: pointer;
}

/* ==========================================================
   RANGE / FILE / COLOR
========================================================== */

input[type="range"],
input[type="file"] {
    width: 100%;
    cursor: pointer;
}

input[type="color"] {
    width: 3rem;
    height: var(--axx-control-height);
    min-height: var(--axx-control-height);
    padding: .10rem;
}

/* ==========================================================
   INPUT SIZES
========================================================== */

.input-xs,
.form-control.input-xs,
.form-select.input-xs {
    height: var(--axx-control-height);
    min-height: var(--axx-control-height);
    padding: 0 var(--axx-control-padding-x);
    font-size: var(--axx-control-font-size);
    line-height: var(--axx-control-line-height);
    border-radius: var(--axx-control-radius);
}

textarea.input-xs {
    height: auto;
    min-height: 80px;
    padding: .35rem;
    line-height: 1.45;
}

.input-sm,
.form-control-sm,
.form-select-sm {
    min-height: var(--axx-input-height-sm);
    font-size: .80rem;
}

.input-lg,
.form-control-lg,
.form-select-lg {
    min-height: var(--axx-input-height-lg);
}

/* ==========================================================
   MESSAGE OPTIONS
========================================================== */

.axx-message-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: .35rem 1rem;
    margin-top: .5rem;
}

.axx-check {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--axx-control-height);
    font-size: .75rem;
    color: var(--axx-text);
    cursor: pointer;
    user-select: none;
}

    .axx-check input[type="checkbox"] {
        width: 15px;
        height: 15px;
        margin: 0;
        accent-color: var(--axx-primary);
        cursor: pointer;
    }

.axx-divider {
    margin: .75rem 0;
    border: 0;
    border-top: 1px solid var(--axx-border);
}

/* ==========================================================
   RECIPIENT BOX
========================================================== */

.axx-recipient-box {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .20rem;
    width: 100%;
    height: var(--axx-control-height);
    min-height: var(--axx-control-height);
    padding: 0 .25rem;
    background: #fff;
    border: 1px solid var(--axx-border);
    border-radius: var(--axx-control-radius);
    overflow: hidden;
}

    .axx-recipient-box:focus-within {
        border-color: var(--axx-border-focus);
        box-shadow: var(--axx-focus-shadow);
    }

.axx-recipient-input {
    flex: 1 1 auto;
    min-width: 60px;
    height: var(--axx-control-line-height);
    min-height: var(--axx-control-line-height);
    padding: 0 .20rem;
    border: 0 !important;
    outline: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-size: var(--axx-control-font-size);
    line-height: var(--axx-control-line-height);
}

.axx-recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: .20rem;
    flex: 0 0 auto;
    height: 18px;
    padding: 0 .35rem;
    font-size: .70rem;
    line-height: 18px;
    color: #fff;
    border-radius: 2px;
    white-space: nowrap;
}

.axx-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    min-height: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
    cursor: pointer;
}

    .axx-chip-remove svg {
        width: 10px;
        height: 10px;
    }

/* ==========================================================
   BUTTONS
========================================================== */

button,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-height: var(--axx-control-height);
    padding: 0 .50rem;
    font-size: var(--axx-control-font-size);
    font-weight: 500;
    line-height: var(--axx-control-line-height);
    border-radius: var(--axx-control-radius);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    button:active,
    .btn:active,
    input[type="button"]:active,
    input[type="submit"]:active,
    input[type="reset"]:active {
        transform: scale(.98);
    }

.btn-xs {
    min-height: var(--axx-control-height);
    height: var(--axx-control-height);
    padding: 0 .35rem;
    font-size: var(--axx-control-font-size);
    line-height: var(--axx-control-line-height);
}

.btn-sm {
    min-height: var(--axx-input-height-sm);
}

.btn-lg {
    min-height: var(--axx-input-height-lg);
}

/* ==========================================================
   CUSTOM BUTTON
========================================================== */

.style-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    margin: 2px;
    padding: .50rem 1rem;
    background: #56baed;
    color: #fff;
    border: none;
    border-radius: var(--axx-control-radius);
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 10px 15px rgba(95, 186, 233, .40);
    transition: all .20s ease;
}

    .style-btn:hover {
        opacity: .90;
    }

    .style-btn:active {
        transform: scale(.98);
    }

    /* ==========================================================
   BUTTON ICONS
========================================================== */

    .btn svg,
    .btn i,
    .style-btn svg,
    .style-btn i {
        width: 14px;
        height: 14px;
    }

/* ==========================================================
   INPUT GROUPS
========================================================== */

.input-group-text {
    min-height: var(--axx-control-height);
    height: var(--axx-control-height);
    font-size: var(--axx-control-font-size);
    line-height: var(--axx-control-line-height);
}

/* ==========================================================
   FORM VALIDATION
========================================================== */

.is-valid {
    border-color: #198754 !important;
}

.is-invalid {
    border-color: #dc3545 !important;
}

/* ==========================================================
   VISUAL STUDIO TOOLBAR BUTTONS
========================================================== */

.toolbar .btn,
.axx-toolbar .btn {
    min-height: var(--axx-toolbar-height);
    height: var(--axx-toolbar-height);
    padding: 0 .35rem;
    font-size: .70rem;
    font-weight: 400;
    line-height: var(--axx-control-line-height);
    gap: .15rem;
    border-radius: var(--axx-control-radius);
    box-shadow: none;
    transform: none;
}

    .toolbar .btn:active,
    .axx-toolbar .btn:active {
        transform: none;
    }

.toolbar .btn-outline-secondary,
.axx-toolbar .btn-outline-secondary {
    color: #4b5563;
    background: #fff;
    border: 1px solid #9ca3af;
}

    .toolbar .btn-outline-secondary:hover,
    .axx-toolbar .btn-outline-secondary:hover {
        color: #111827;
        background: var(--axx-vs-hover-bg);
        border-color: var(--axx-vs-blue);
    }

.toolbar .btn-primary,
.axx-toolbar .btn-primary {
    color: #fff;
    background: var(--axx-vs-blue);
    border-color: var(--axx-vs-blue);
}

    .toolbar .btn-primary:hover,
    .axx-toolbar .btn-primary:hover {
        background: var(--axx-vs-blue-hover);
        border-color: var(--axx-vs-blue-hover);
    }

.toolbar .btn svg,
.toolbar .btn i,
.axx-toolbar .btn svg,
.axx-toolbar .btn i {
    width: 14px;
    height: 14px;
    stroke-width: 1.8;
}

.toolbar .dropdown-toggle::after,
.axx-toolbar .dropdown-toggle::after {
    margin-left: .25rem;
    vertical-align: middle;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 992px) {
    button,
    .btn,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        width: auto;
    }
}

@media (max-width: 768px) {
    input,
    textarea,
    select,
    .form-control,
    .form-select {
        font-size: 16px;
    }

        button,
        .btn,
        input[type="button"],
        input[type="submit"],
        input[type="reset"] {
            font-size: .875rem;
        }
}

@media (max-width: 576px) {
    button,
    .btn,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        width: 100%;
    }

    .btn-group > .btn,
    .toolbar .btn,
    .axx-toolbar .btn {
        width: auto;
    }

    .toolbar,
    .axx-toolbar {
        overflow-x: auto;
        white-space: nowrap;
    }
}