/*Write your custom css in this file.*/

:root {
    --readonly-bg: #afafaf;
    --readonly-text: #f3f3f3;
}

/* Inputs, textareas, selects, and Select2 containers */
input[readonly], textarea[readonly], select[readonly],
input[disabled], textarea[disabled], select[disabled],
.select2-container-readonly .select2-choice,
.select2-container-readonly .select2-search-field,
.select2-container-readonly .select2-choices,
.select2-container-disabled .select2-choice,
.select2-container-disabled .select2-search-field,
.select2-container-disabled .select2-choices {
    background-color: var(--readonly-bg) !important;
    color: var(--readonly-text) !important;
    border-radius: 5px;
    user-select: none !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

input[readonly] + label,
input[disabled] + label {
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* Select2 search choice styling */
.select2-container-readonly .select2-search-choice,
.select2-container-disabled .select2-search-choice {
    background: transparent !important;
    border: unset !important;
    color: var(--readonly-text) !important;
    user-select: none !important;
    cursor: not-allowed !important;
}

/* Placeholder styling */
input[readonly]::placeholder, textarea[readonly]::placeholder, select[readonly]::placeholder,
input[disabled]::placeholder, textarea[disabled]::placeholder, select[disabled]::placeholder,
.select2-container-readonly .select2-choice::placeholder,
.select2-container-readonly .select2-search-field::placeholder,
.select2-container-readonly .select2-choices::placeholder,
.select2-container-disabled .select2-choice::placeholder,
.select2-container-disabled .select2-search-field::placeholder,
.select2-container-disabled .select2-choices::placeholder {
    color: var(--readonly-text) !important;
    opacity: 1 !important;
    user-select: none !important;
    cursor: not-allowed !important;
}

/* Vendor prefixes for placeholders */
input[readonly]::-webkit-input-placeholder,
textarea[readonly]::-webkit-input-placeholder,
input[disabled]::-webkit-input-placeholder,
textarea[disabled]::-webkit-input-placeholder,
input[readonly]::-moz-placeholder,
textarea[readonly]::-moz-placeholder,
input[disabled]::-moz-placeholder,
textarea[disabled]::-moz-placeholder,
input[readonly]:-ms-input-placeholder,
textarea[readonly]:-ms-input-placeholder,
input[disabled]:-ms-input-placeholder,
textarea[disabled]:-ms-input-placeholder,
input[readonly]::-ms-input-placeholder,
textarea[readonly]::-ms-input-placeholder,
input[disabled]::-ms-input-placeholder,
textarea[disabled]::-ms-input-placeholder {
    color: var(--readonly-text) !important;
    cursor: not-allowed !important;
}

.modal .col-lg-4{
    width: 25%;
}

.modal .col-lg-8{
    width: 75%;
}

@media screen and (max-width:992px){
    .modal .col-lg-4,.modal .col-lg-8{
        width: 100%;
    }
}

.modal-dialog {
    max-width: 70vw;
}

.task-preview{
    max-width: 70%;
}

@media screen and (max-width:500px){
    .modal-dialog {
        max-width: 100vw;
    }
    .task-preview{
        max-width: 100%;
    }
}