/* [START] INPUT ======= */
:not([type="checkbox"]).form-control,
.datatable-header input,
.datatable-header select,
.calendar-time select {
    border: 1px solid var(--border);
    font-family: inherit;
    padding: 5px 15px;
    color: var(--dark);
    background: var(--white);
    width: 100%;
    outline: none;
    /* margin-bottom: 15px; */
    min-height: 45px;
    align-items: center;
    display: inline-flex;
    border-radius: var(--radius);
    position: relative;
    font-size: inherit;
    min-width: 100%;
    max-width: 100%;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

textarea.form-control {
    min-height: 100px !important;
    padding: 10px 15px !important;
}

:not([type="checkbox"]).form-control::placeholder {
    opacity: 0.89;
}

.form-control[readonly] {
    background: var(--light) !important;
}

.content-editor.empty:after {
    display: block;
    position: absolute;
    top: 13px;
    content: attr(data-placeholder);
    opacity: 0.4;
    pointer-events: none;
}

.form-control:focus,
.fw360-open > .form-control,
.ms-options-wrap.ms-active > button[type="button"] {
    border-color: var(--primary);
    z-index: 3;
}

:not([type="checkbox"]).form-control.error,
.error + .btn-group :not([type="checkbox"]).form-control{
    outline: 1px dashed var(--danger);
}

:not([type="checkbox"]).form-control + small {
    display: block;
    margin: 5px 0 0;
    line-height: 1.1;
}

label.error {
    display: flex;
    align-content: center;
    align-items: center;
    color: white;
    padding: 5px 10px 5px 15px;
    min-height: 20px;
    line-height: 1;
    position: absolute;
    border-radius: 0 var(--radius) 0 var(--radius);
    font-size: 11px;
    z-index: 2;
    bottom: 0px;
    opacity: 0.9;
    pointer-events: none;
    overflow: hidden;
    right: 0;
    left: auto;
    top: 30px;
}

label.error:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: var(--danger);
    opacity: 0.9;
    z-index: -1;
}

.highlight {
    box-shadow: var(--warning) 0px 0px 0px;
    animation: highlightAnimation 2s 2;
}

@keyframes highlightAnimation {
    0% {
        box-shadow: var(--warning) 0px 0px 5px -10px;
    }
    50% {
        box-shadow: var(--warning) 0px 0px 60px -10px;
        transform: scale(1.05);
    }
    100% {
        box-shadow: var(--warning) 0px 0px 5px -10px;
    }
}

:not([type="checkbox"],.styled-checkbox, [readonly], p).form-control:hover {
    background: var(--primary-transparent);
}

/* [END] INPUT ======= */


/* [START] INPUT GROUP ========== */

.input-group {
    display: flex;
    /* margin-bottom: 15px; */
    width: 100%;
}

.input-group > :is(.form-control) {
    flex: 1;
    min-width: initial;
}

.input-group > :is(.btn,.form-control,.btn-group) + :is(.btn,.form-control,.btn-group) {
    margin-left: -1px;
}

.input-group > :is(.btn,.form-control):first-child,
.input-group > :is(.btn,.form-control):first-child + .btn-group > .form-control  {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}

.input-group > :is(.btn,.form-control):last-child {
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.input-group > :is(.btn,.form-control),
.input-group .input-group > :is(.btn,.form-control),
.input-group > .btn-group > .form-control {
    border-radius: 0;
    margin: 0;
}

.input-group .input-group-append .form-control,
.input-group .form-control + .input-group-addon {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

.input-group-addon {
    flex: initial;
    border: 1px solid var(--border);
    background: var(--light);
    padding: 0 10px;
    display: flex;
    align-items: center;
    /* flex: 1; */
    gap: 10px;
}

.input-group-addon .form-control {
    margin: -15px;
    max-width: none;
    width: auto;
    border-radius: inherit;
}


.input-group-addon:first-child {
    border-right: 0;
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}

.input-group-addon:last-child {
    border-left: 0;
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

/* [END] INPUT GROUP ========== */

/* [START] SHORTCODE BTN ======= */
.msInputShortcodeBtn {
    position: absolute;
    top: 0;
    right: 10px;
    line-height: 45px;
    padding: 0 15px;
    /* opacity: 0.6; */
    /* transition: opacity var(--transition); */
    color: var(--dark);
    z-index: 99;
}
.msInputShortcodeBtn:hover {
    opacity: 1;
}
.simpleMode .msInputShortcodeBtn {
    display: none !important;
}
/* [END] SHORTCODE BTN ======= */

/* [START] FLEX GROUP ========== */

.flex-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    align-items: center;
}


.flex-group.flex-center {
    justify-content: center;
}

.flex-group.header-group {
    padding: 15px;
    border-bottom: 1px solid var(--border);
    margin: -15px;
    margin-bottom: 15px;
    /* flex-wrap: initial; */
}

.row + .flex-group.header-group {
    margin-top: 15px;
}

.flex-group.header-group > :first-child {
    flex: 1;
}

.flex-group.header-group > :not(:first-child) {
    flex: initial;
    width: auto;
    margin: 0;
}

.flex-group.header-group .btn-group {
    /* flex: 0; */
}

.flex-group > :is(.btn, .form-control) {
    flex: 1;
    width: auto;
    margin: 0;
    min-width: fit-content;
}

.flex-group > .styled-checkbox {
    margin: 0 !important;
}

/* [END] FLEX GROUP ========== */

/* [START] LABEL ======= */
.form-label {
    font-weight: 600;
    display: flex !important;
    margin-bottom: 10px;
    font-size: var(--font-label);
    height: 20px;
    line-height: 0.9rem;
    align-items: stretch;
    gap: 10px;
}

.form-label[style*="display: none"] {
    display: none !important;
}

.form-label > :is(span, a) {
    display: flex;
    align-items: center;
}

.form-label > :is(span, a) > small {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
    text-wrap: nowrap;
}

.form-label > :is(span, a):first-child {
    flex: 1;
    display: flex;
    gap: 10px;
}

.form-label > :is(span, a):not(:first-child) {
    max-width: 74%;
    margin-left: auto;
}

.form-control + .form-label {
    margin-top: 5px;
}

.form-label input {
    margin: 0;
}

.text-right .form-label {
    justify-content: flex-end;
}

label > .req_input,
label > :is(span, a) > .req_input {
    color: var(--danger);
    margin-left: 5px;
}

.form-label [class*="btn"]:not(:last-child) {
    margin-left: auto;
    height: 30px;
    min-height: 30px;
}

.form-label + .btn {
    /* height: 50px; */
}


/* [END] LABEL ======= */

/* [START] QRCRON ======= */
.qcron-container {
    gap: 10px;
    /* margin-top: -21px; */
    flex-wrap: wrap;
    display: flex;
    align-items: flex-end;
}
.qcron-container > .cron-block:not([style*="none"]) {
    display: flex !important;
    flex: 1;
    gap: 10px;
}
.qcron-container > span > label,
.qcron-container > .cron-block > span > label {
    font-weight: 600;
    margin-bottom: 10px;
    font-size: var(--font-label);
    height: 20px;
    line-height: 0.9rem;
    align-items: stretch;
    gap: 10px;
    display: flex;
}

.qcron-container .cron-block > label {
    padding-top: 17px;
    font-weight: 600;
    display: flex !important;
}

.qcron-container > .cron-block-time:not([style*="none"]) {
    display: flex !important;
    gap: 10px;
}
.qcron-container > .cron-block-time:not([style*="none"]) > span {
    flex: 1;
}
/* [END] QRCRON ======= */

/* [START] CHECKBOX ======= */
.form-control > label,
.styled-checkbox > label {
    display: flex;
    align-items: center;
    font-weight: 500;
    /* width: 100%; */
    flex: 1;
}

.styled-checkbox + .styled-checkbox  {
    margin-top: 15px;
}

input:is([type="checkbox"],[type="radio"]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    font: inherit;
    width: 25px;
    min-width: 25px;
    height: 25px;
    border: 1px solid var(--border);
    background: var(--white);
    transform: translateY(-0.075em);
    transition: 120ms background;
    display: inline-flex;
    place-content: center;
    cursor: pointer;
    border-radius: var(--radius);
}


input:is([type="checkbox"],[type="radio"]) + img {
    margin-left: 10px;
    display: block;
    max-height: 25px;
}

input:is([type="checkbox"],[type="radio"]) + span,
input:is([type="checkbox"],[type="radio"]) + img + span {
    margin-left: 10px;
    line-height: 1;
    position: relative;
    top: 0px;
    font-weight: 500;
    /* flex: 1; */
    word-break: break-word;
    display: inline-block;
}


input:is([type="checkbox"],[type="radio"]) + span + a {
    border-left: 1px solid var(--border);
    height: 100%;
    padding-left: 10px;
    margin-left: auto;
}

input:is([type="checkbox"],[type="radio"]):checked {
    background: var(--primary);
    border-color: var(--primary);
}

input:is([type="checkbox"],[type="radio"]).exclude:checked {
    background: var(--danger);
    border-color: var(--danger);
}

input:is([type="checkbox"],[type="radio"]):disabled {
    background: var(--muted);
    border-color: var(--muted);
    cursor: not-allowed;
}

input:is([type="checkbox"],[type="radio"])::before {
    content: "";
    width: 15px;
    height: 15px;
    margin: auto;
    -webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--white);
}

input[type="radio"] {
    border-radius: 50%;
}

input:is([type="checkbox"],[type="radio"]):checked::before {
    transform: scale(1);
}

input:is([type="checkbox"],[type="radio"]):focus {
    outline: none;
}
/* [END] CHECKBOX ======= */

/* [START] TOGGLE SWITCH ======= */
input:is([type="checkbox"],[type="radio"]).toggle-input {
    display: none;
}

input:is([type="checkbox"],[type="radio"]) + .toggle-slider {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 25px;
    background: var(--muted);
    border-radius: 15px;
    transition: background 0.3s;
    flex-shrink: 0;
}

input:is([type="checkbox"],[type="radio"]) + .toggle-slider::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 2px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Stato checked */
input:is([type="checkbox"],[type="radio"]).toggle-input:checked + .toggle-slider {
    background: var(--primary);
}

input:is([type="checkbox"],[type="radio"]).toggle-input:checked + .toggle-slider::before {
    transform: translateX(15px);
}

/* Focus accessibility */
.toggle-input:focus + .toggle-slider {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
/* [END] TOGGLE SWITCH ======= */

/* [START] Element Preview ======== */
.element-preview {
    line-height: 1;
    display: flex;
    flex: 1;
    overflow: hidden;
    width: 100%;
    align-items: center;
}

.element-preview:empty {
    display: none;
}

.element-preview:empty + .element-buttons {
    flex: 1;
}

.element-preview > .element-preview {
    /* margin: -10px -5px; */
}

.element-preview .element-preview-avatar {
    width: 30px;
    height: 30px;
    object-fit: contain;
    background: white;
    margin-right: 10px;
    border-radius: var(--radius);
}

.element-preview .element-preview-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.element-preview .element-preview-title {
    font-size: var(--font-label) !important;
    text-overflow: ellipsis;
    overflow: hidden;
}

.element-preview-container {
    display: flex !important;
    gap: 10px;
    flex-wrap: wrap;
    padding: 5px 0px !important;
}

.element-preview-container.form-control {
    padding: 5px 7px !important;
}

.element-preview-container .element-buttons {
    display: flex;
    gap: 5px;
    /* flex: 1; */
}

.element-preview + .element-buttons > .btn {
    flex: 1;
}


.element-preview > .element-preview > .btn {
    display: none;
}


.element-preview-container.form-control .select-picker {
    border: none;
    min-height: 0;
    margin: -8px;
}


.element-preview-container.form-control .select-picker .form-control {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-left: 7px;
}