/*
New style for Let's Use Data
June 29, 2022
*/

/* Color and other variables*/
:root {
    --page-main-bg-color: #F0F0F0;
    --palette-blue-normal: #0092CE;
    --palette-gray-dark: #4A4A4A;
    --palette-gray-light: #F3F3F3;
    --palette-green-full: #7DC237;
    --page-secondary-bg-color: #FFFFFF;
    --page-text-color: #212529;
    --landingpage-header-bg: #F9FCFE;
    --landingpage-nav-text: #344157;
    --landingpage-hero-bg: linear-gradient(45deg, rgb(31, 161, 231) 0%, rgb(24, 132, 228) 100%);
    --landingpage-hero-text: #FFFFFF;
    --login-checkbox-border: #bfbfbf;
    --text-black-color: #000000;
    --poll-anser-box-bg: #EDEDED;
    --landingpage-custome-card: #F7F7F7;
    --course-heading: #78868C;
}
.dark-mode {
    --page-main-bg-color: #121212;
    --page-secondary-bg-color: #1f1f1f;
    --page-text-color: #c8c8d3;
    --palette-blue-normal: #0092CE;
    --palette-gray-dark: #c8c8d3;
    --palette-gray-light: #262627;
    --palette-green-full: #075d4a;
    --landingpage-header-bg: #1f1f1f;
    --landingpage-nav-text: #c8c8d3;
    --landingpage-hero-bg: #121212;
    --landingpage-hero-text: #c8c8d3;
    --login-checkbox-border: #444546;
    --text-black-color: #c8c8d3;
    --poll-anser-box-bg: #121212;
    --landingpage-custome-card: #1f1f1f;
    --course-heading: #c8c8d3;
}
/*@media (prefers-color-scheme: dark) {
    :root {
        --page-main-bg-color: #121212;
        --palette-blue-normal: #0092CE;
        --palette-gray-dark: #c8c8d3;
        --palette-gray-light: #262627;
        --palette-green-full: #075d4a;
        --page-secondary-bg-color: #1f1f1f;
    }
}*/

/*
General controls
*/
.dark-mode .ace_cursor{
    border-color:#fff;
}
.dark-mode .ace_selection{
    background: rgb(0 94 139 / 70%) !important;
}

.visible {
    visibility:visible;
}

.invisible {
    visibility: hidden;
}

/* Label */
label.label {
    font-size: 0.75rem;
    font-weight: 400;
    /*color: #4A4A4A;*/
    color: var(--palette-gray-dark);
}

/* Input and TextArea */


.course-selection-heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--course-heading);
}

.filter-box-container {
    width: 100%;
    height: 2.75rem;
    border-radius: 1.688rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--palette-gray-light);
    border: 1px solid var(--palette-gray-light);
    transition: all ease 333ms;
}
.input-textbox-container {
    position: relative;
    width: 100%;
    height: 2.75rem;
    border-radius: 1.688rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--palette-gray-light);
    border: 1px solid var(--palette-gray-light);
    /*transition: all ease 333ms;*/
}

.accordion-body{
    background-color: var(--page-secondary-bg-color);
    color: var(--page-text-color);
}
.accordion-button:not(.collapsed){
    background-color: #c8c8c8;
}
.btn-print{
    color: var(--page-text-color);
}
.main-password-container{
    justify-content:space-between;
    display:flex;
    width:100%;
    height: 35vh;
}

.validation-container p i {
    margin: 0 5px;
    color: #5eaf78;
    font-size:0.8rem;
}

.right h6 {
    font-size: 0.75rem;
    font-weight: 600;
}
.right{
    width: 50%;
}
.left{
    width: 50%;
}
.last-quiz-set input {
    background-color:  var(--palette-gray-light);
    color: var(--page-text-color);
    border: var(--palette-gray-light) !important;
}
.question-order{
    background-color: var(--page-secondary-bg-color);
}

.textarea-container {
    position: relative;
    width: 100%;
    padding: 0.8rem 0;
    border-radius: 1.688rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--palette-gray-light);
    border: 1px solid var(--palette-gray-light);
    /*transition: all ease 333ms;*/
}

textarea.textbox {
	min-height: 3.97rem;
    max-height: 10rem;
}

.input-textbox-container.active, .textarea-container.active {
    border: 1px solid var(--palette-blue-normal);
}

.textbox {
    border: 0;
    outline: 0;
    background-color: var(--palette-gray-light);
    margin-left: 1rem;
    overflow-y:auto
}
input.textbox:-webkit-autofill, input.textbox:-webkit-autofill:hover, input.textbox:-webkit-autofill:focus, input.textbox:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1rem var(--palette-gray-light) inset !important;
    -webkit-text-fill-color: var(--text-black-color);
}
.textbox:not([type=password]) {
    width: calc(100% - 1rem - 1rem); /* 100% - leftMargin - leftMargin (act as a rightMargin) */
}
.textbox[type=password] {
    width: calc(100% - 1rem - 0.938rem - 1.125rem - 3px); /* 100% - leftMargin - eyeIconRightMargin - eyeIconWidth - gapBetweenInputAndEyeIcon */
}
.textbox:not([disabled]) {
    color: var(--text-black-color);
}
.textbox[disabled] {
    color: #AAA;
}
.textbox-valmsg {
    width: calc(100% - 1rem);
}


.pw-vis {
    background-repeat: no-repeat;
    background-position: center center, 50%, 50%;
    width: 1.125rem;
    height: 1.125rem;
    position: absolute;
    right: 0.938rem;
    cursor: pointer;
}

.pw-vis.hidden {
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 20 12" fill="dimgrey" xmlns="http://www.w3.org/2000/svg"><path d="M12.9974 5.99873C12.9974 7.58758 11.653 8.8756 9.99457 8.8756C8.33617 8.8756 6.99177 7.58758 6.99177 5.99873C6.99177 4.40987 8.33617 3.12187 9.99457 3.12187C11.653 3.12185 12.9974 4.40988 12.9974 5.99873ZM10 0.00866699C8.28292 0.0162837 6.5031 0.4343 4.81827 1.23462C3.5673 1.85332 2.34817 2.72622 1.2899 3.80363C0.770133 4.35362 0.107183 5.14998 0 5.99967C0.0126667 6.73568 0.802167 7.64415 1.2899 8.19572C2.28228 9.23082 3.46967 10.0794 4.81827 10.7654C6.38945 11.5279 8.12853 11.9669 10 11.9913C11.7187 11.9836 13.4981 11.5608 15.1811 10.7654C16.4321 10.1467 17.6518 9.27313 18.7101 8.19572C19.2299 7.64573 19.8928 6.84935 20 5.99967C19.9873 5.26365 19.1978 4.35515 18.7101 3.8036C17.7177 2.7685 16.5297 1.92062 15.1811 1.23458C13.6107 0.47265 11.8674 0.0366503 10 0.00866699ZM9.99873 1.49613C12.6007 1.49613 14.71 3.5127 14.71 6.00032C14.71 8.48792 12.6007 10.5045 9.99873 10.5045C7.39675 10.5045 5.28748 8.4879 5.28748 6.00032C5.28748 3.5127 7.39675 1.49613 9.99873 1.49613Z"/></svg>');
    top: calc(1.375rem - 0.563rem - 1px); /* (inputContainer.height / 2) - (eyeIcon.height / 2) - adjustment */
}


.input-textbox-container + div:not(.swal-check-container), .textarea-container + div:not(.swal-check-container) {
    color: #F15656;
    font-size: 0.75rem;
    position: relative;
    top: -0.313rem;
    left: 1rem;
    opacity: 0;
    transition: all ease 333ms;
}

.input-textbox-container.invalid, .textarea-container.invalid {
    border: 1px solid #F15656;
}

.input-textbox-container.invalid + div, .textarea-container.invalid + div {
    opacity: 1;
    top: 0.188rem;
}
input[type=password]::-ms-reveal,
input[type=password]::-ms-clear {
    display: none;
}




/* Button */
.button {
    border-radius: 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    transition: all ease 333ms;
    height: 2.75rem;
}
.button-sm {
    font-size: .8rem !important;
    height: 2rem !important;
}

    .add-quarter-btn {
        height: 2rem !important;
    }

.button.solid {
    background-color: var(--palette-blue-normal);
    color: #FFF;
    border: 0;
    outline: 0 !important;
}
.button.solid:hover {
    background-color: #1BAEEB;
}
.button.change-password[disabled] {
    background-color: #aaa;
}
.button.change-password[disabled]:hover {
    background-color: #aaa;
}
.button.solid:active {
    background-color: #4A4A4A;
}
.button.solid:focus {
    background-color: var(--palette-blue-normal);
    box-shadow: 0 0.25rem 0.625rem rgba(0, 146, 206, 0.3), 0 0.5rem 0.625rem rgba(0, 146, 206, 0.3);
}

.button.solid.full {
    background-color: var(--palette-green-full);
}
.button.solid.full:focus {
    background-color: var(--palette-green-full);
    box-shadow: 0 0.25rem 0.625rem rgba(125, 194, 55, 0.3), 0 0.5rem 0.625rem rgba(125, 194, 55, 0.3);
}

.button.outline {
    /*background-color: #FFF;*/
    background-color: var(--page-secondary-bg-color);
    color: var(--palette-blue-normal);
    border: 2px solid var(--palette-blue-normal);
    outline: 0 !important;
}
.button.outline:hover {
    background-color: #ECF6FB;
}
.button.outline:active {
    background-color: #CAE7F2;
}
    .button.outline:focus {
        background-color: var(--page-secondary-bg-color);
        box-shadow: 0 0.25rem 0.625rem rgba(0, 146, 206, 0.3), 0 0.5rem 0.625rem rgba(0, 146, 206, 0.3);
        box-shadow: 0 0.5rem 0.625rem rgba(0, 146, 206, 0.3);
    }


/* Select */
.select {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25rem;
    color: var(--text-black-color);
    padding-left: 1rem;
    height: 2.75rem;
    outline: none;
    border: 1px solid var(--palette-gray-light);
    border-radius: 2.5rem;
    transition: all ease 333ms;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    background-color: var(--palette-gray-light);
    background-image: url('data:image/svg+xml;utf8,<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.46967 6.53033C5.76256 6.82322 6.23744 6.82322 6.53033 6.53033L11.3033 1.75736C11.5962 1.46447 11.5962 0.989592 11.3033 0.696699C11.0104 0.403805 10.5355 0.403805 10.2426 0.696699L6 4.93934L1.75736 0.6967C1.46447 0.403806 0.989592 0.403806 0.696699 0.6967C0.403805 0.989593 0.403805 1.46447 0.696699 1.75736L5.46967 6.53033ZM5.25 5L5.25 6L6.75 6L6.75 5L5.25 5Z" fill="black"/></svg>');
    background-repeat: no-repeat;
    background-position-x: calc(100% - 1rem);
    background-position-y: calc(50% + 0.15rem);
}
.select:focus {
    border: 1px solid var(--palette-blue-normal);
}


/* Anchor */
a.italic-anchor {
    font-style: italic;
    font-weight: bold;
    padding-left: 1px; /* Needed only because the italic style cuts a little space from the beginning! */
    color: var(--palette-blue-normal);
}
a.italic-anchor:hover {
    color: #00b7ff;
}


/* Date/Time control */
.datetime {
    border-radius: 1.5rem;
    height: 2.3rem;
    padding: 0 0.5rem;
    background-color: var(--palette-gray-light);
    border-width: 1px;
    border-style: solid;
    border-color: var(--palette-gray-light);
    border-image: none;
    color: var(--text-black-color);
}

.datetime:focus, .datetime:focus-visible {
    border: 1px solid var(--palette-blue-normal);
    outline: none;
}

.datetime[disabled] {
    color: #aaa;
}

/* Messages */
.msg {
    width: 100%;
    padding: .5rem 1rem .5rem .75rem;
    position: relative;
    font-size: 0.75rem;
    text-align: center;
}

.msg.error {
    color: #F15656;
}

.msg.success {
    color: #7DC237;
}



/*
General page styles
*/

.box {
    border-radius: 1.25rem;
    background-color: var(--page-secondary-bg-color);
}



/*
User menu
*/
ul.dropdown-menu.usermenu {
    position: absolute;
    border: none;
    border-radius: 1.25rem;
    padding: calc(2rem - 0.86875rem) 2rem;
    left: -11.8rem;
    margin-top: 0.875rem!important;
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.25);
    width: 15.8rem;
}
@media (min-width: 992px) {
    ul.dropdown-menu.usermenu { left: -3.3rem; }
}
@media (min-width: 1201px) {
    ul.dropdown-menu.usermenu { left: -0.9rem; }
}
.dropMenuText {
    padding: 0;
    margin: 0.86875rem 0;
}
.dropMenuText label {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--palette-gray-dark);
 }
.dropMenuText input.form-check-input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    background-color: transparent;
    border: 3px solid var(--palette-gray-dark);
    border-radius: 4px !important;
    margin-left: 5px;
}
.dropMenuText div {
    width: 2rem;
    display: inline-block;
}
.dropMenuText:hover label {
    color: var(--palette-blue-normal);
    background-color: var(--page-secondary-bg-color);
}
.dropMenuText:hover input.form-check-input {
    border: 3px solid var(--palette-blue-normal);
    background-color: var(--page-secondary-bg-color);
}
ul.dropdown-menu.usermenu li a {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--palette-gray-dark);
    padding: 0;
    margin: 0.86875rem 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

ul.dropdown-menu.usermenu li a i:nth-child(1) {
    margin: 0 0 0 .15rem;
    width: 2.05rem;
}
ul.dropdown-menu.usermenu li a div:nth-child(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    width: 2.21rem;
}

ul.dropdown-menu.usermenu li a svg {
    fill: var(--palette-gray-dark);
    height: 1.6rem;
    width: 1.6rem;
    transition: all 0.1s ease-in-out;
}

    ul.dropdown-menu.usermenu li a:hover {
        color: var(--palette-blue-normal);
        background-color: var(--page-secondary-bg-color);
    }
ul.dropdown-menu.usermenu li a:hover svg {
    fill: var(--palette-blue-normal);
}



/*
SweetAlert2 customization
*/
.swal-usermenu-impersonate-popup {
    border-radius: 1.25rem!important;
    width: 27.75rem!important;
    padding: 0!important;
}
.swal-usermenu-impersonate-title {
    padding: 2rem!important;
    text-align: left!important;
    font-size: 1.5rem!important;
}

#select-student-impersonate > div:nth-child(1) {
    border: 1px solid var(--palette-gray-light);
}
#select-student-impersonate > div:nth-child(1):focus {
    border: 1px solid var(--palette-blue-normal);
}
.react-select-invalid, .react-select-invalid:hover {
    border: 1px solid #F15656!important;
}

.swal-usermenu-impersonate-actions {
    min-width: 50%;
    margin: 2rem 2rem!important;
    max-width: 100%;
}
.swal-usermenu-impersonate-actions.invalid {
    margin: 0.625rem 2rem 2rem 2rem!important;
}
.swal-usermenu-impersonate-button {
    width: 100%
}
.swal-usermenu-impersonate-invalidmsg {
    background: none!important;
    justify-content: flex-start!important;
    padding: 0 2rem!important;
    font-size: 0.75rem!important;
    font-weight: 500!important;
    color: #F15656!important;
    margin: 0.25rem 0 0 0!important;
}
.swal-usermenu-impersonate-invalidmsg::before {
    width: 0.79rem!important;
    height: 0.77rem!important;
    font-size: .5rem!important;
    background-color: #F15656!important;
    min-width: 0!important;
    margin: 0 0.54rem 0 0.85rem!important;
}
.swal-usermenu-impersonate-htmlcontainer {
    overflow: visible!important;
    z-index: 2!important;
    margin-top: 0!important;
    margin-bottom: 0!important;
}

/*
General Swal2 styles. For general usage
*/
.swal-general-popup {
    border-radius: 1.25rem!important;
    max-width: 27.75rem;
    padding: 0!important;
}
.swal-general-popup-x-border-radius {
    max-height: 38.75rem !important;
    padding: 0 !important;
}
.swal-general-popup-course-objective {
    max-height: 38.75rem !important;
    padding: 0 !important;
    width: 70.75rem !important;
}
.swal-general-popup-course-objective-lg {
    padding: 0 !important;
    width: 50.75rem !important;
}
.swal-general-popup-course-objective-xxl {
    padding: 0 !important;
    width: 80.75rem !important;
    max-height:100vh;
}
.swal-general-title {
    padding: 2rem !important;
    text-align: left !important;
    font-size: 1.5rem !important;
}
.swal-general-title-center {
    padding: 1rem !important;
    text-align: center !important;
    font-size: 1.5rem !important;
}



.swal-general-htmlcontainer {
    font-size: 1.25rem!important;
    font-weight: 400!important;
    line-height: 150%!important;
}
.swal-general-invalidmsg {
    background: none!important;
    justify-content: center!important;
    padding: 0 2rem!important;
    font-size: 1rem!important;
    font-weight: normal!important;
    color: #F15656!important;
    margin: 0 0 1rem 0!important;
}
.swal-general-invalidmsg::before {
    width: 1.3rem!important;
    height: 1.3rem!important;
    font-size: 1rem!important;
    background-color: #F15656!important;
    min-width: 0!important;
    margin: 0 0.54rem 0 0.85rem!important;
}
.swal-general-actions {
    min-width: 50%;
    margin: 0.25rem 2rem 2rem 2rem!important;
    max-width: 100%;
    z-index: 0!important;
    position: relative;
    gap:1em;
}
.swal-general-button {
    width: 100%
}
.swal-button-45 {
    width: 45%;
}
.swal-close-button {
    z-index: 1!important;
}


/*
Editables
*/
.editable-container {
    position: relative;
}

.editable-btn-edit, .editable-btn-save, .editable-btn-cancel, .editable-btn-delete, .editable-btn-add {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1rem;
    display: none;
    align-items: center;
    justify-content: center;
    color: #78868C;
    cursor: pointer;
    z-index: 1;
}
.editable-btn-cancel {
    font-size: 120%;
}

.flt > .editable-btn-edit, .flt > .editable-btn-save, .flt > .editable-btn-cancel {
    position: sticky;
    top: 0;
    float: right;
}

.abs.right-in > .editable-btn-edit, .abs.right-in > .editable-btn-save, .abs.right-in > .editable-btn-cancel {
    position: absolute;
    top: 0;
}
.abs.right-in > .editable-btn-edit, .abs.right-in > .editable-btn-cancel { right: 0; }
.abs.right-in > .editable-btn-save { right: 1.75rem; }

.abs.right-out > .editable-btn-edit, .abs.right-out > .editable-btn-save, .abs.right-out > .editable-btn-cancel {
    position: absolute;
    top: 0;
}
.abs.right-out > .editable-btn-edit, .abs.right-out > .editable-btn-save { right: -1.75rem; }
.abs.right-out > .editable-btn-cancel { right: -3.5rem; }

.editable-container[editable-type=code] > .editable-btn-edit, .editable-container[editable-type=code] > .editable-btn-cancel {
    right: 2.75rem;
}
.editable-container[editable-type=code] > .editable-btn-save {
    right: 4.5rem;
}

span.admin-editable[contentEditable=true]:focus-visible, div.admin-editable[contentEditable=true]:focus-visible {
    outline: none
}
span.admin-editable[contentEditable=true], div.admin-editable[contentEditable=true] {
    padding: 0 0.25rem;
    /*border: 1px solid #ced4da;*/
    border: 1px solid var(--Interaction-border);
}

.adminctrl-container {
    display: flex; /* should be adjustable for admin only */
    justify-content: center;
    align-items: center;
}


/*
Summernote's popup
*/
.note-modal-footer input[type=button].btn.note-btn {
    font-size: 1rem;
    padding: 0.4rem 0.9rem
}

.note-modal-footer {
    height: 3.55rem!important;
}

.checkbox.sn-checkbox-open-in-new-window label,
.checkbox.sn-checkbox-use-protocol label
{
    display: flex;
    align-items: center;
}

.checkbox.sn-checkbox-open-in-new-window label input[role=checkbox],
.checkbox.sn-checkbox-use-protocol label input[role=checkbox]
{
    margin-right: 0.45rem;
    width: 1rem;
    height: 1rem;
    position: relative;
}


/*
Floating buttons
*/
.floatingbtn {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1rem;
    align-items: center;
    justify-content: center;
    color: #78868C;
    cursor: pointer;
    z-index: 1;
    position: absolute;
    top: 0;
}

#code-expand.floatingbtn {
    display: flex;
    right: 1rem;
}

#code-restore.floatingbtn {
    display: none;
    right: 1rem;
}


/*
Select2 theme (theme name: "ols")
*/
.select2-container {
    flex-grow: 1;
    font-size: 0.85rem;
    width: 100%!important;
}

.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above {
    border: 1px solid var(--select2-drpdown-border);
    border-top: 1px solid var(--select2-drpdown-border) !important;
    border-top-left-radius: 0.33rem !important;
    border-top-right-radius: 0.33rem !important;
    border-bottom: 1px solid var(--select2-drpdown-border) !important;
    border-bottom-left-radius: 0.33rem !important;
    border-bottom-right-radius: 0.33rem !important;
}

.select2-container--ols .select2-results > .select2-results__options {
    max-height: 17rem;
    overflow-y: auto;
}

.select2-container--ols .select2-results__option--highlighted[aria-selected] {
    background: #b3e9ff !important;
    color: #333;
}

.select2-container--ols .select2-results__option[aria-selected=true] {
    background: #80dbff;
    color: #333;
}

.select2-container--ols .select2-selection--single {
    border-radius: 1.688rem;
    background-color: var(--palette-gray-light);
    height: 2.33rem !important;
    display: flex!important;
    align-items: center;
    justify-content: center;
}

.select2-container--ols .select2-selection--single:focus,
.select2-selection.select2-selection--single[aria-expanded=true]
{
    border: 0.15rem solid #0092CE;
}

.select2-container--ols.select2-container--open .select2-selection__arrow b {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
}

.select2-container--ols span.select2-search input {
    height: 2rem !important;
    border: 1px solid var(--select2-input-border);
    border-radius: 0.25rem;
    background: var(--page-secondary-bg-color);
    color: var(--swl-text-color);
}

.select2-container .select2-choice {
  border: 2px solid #dce4ec;
  height: 36px;
  border-radius: 0px;
  font-size: 14px;
  text-indent: 1px;
  box-shadow: none;
  background-image: none;
  background-color: red;
}

.select2-container *:focus {
  outline: 0px;
}

.select2-container--ols .select2-selection--single .select2-selection__rendered {
  color: #738287;
}

.select2-container--ols .select2-selection--single .select2-selection__arrow {
  height: 26px;
  position: absolute;
  top: 1px;
  right: 1px;
  width: 20px;
}
.select2-container--ols .select2-selection--single .select2-selection__arrow b {
  border-color: #738287 transparent transparent transparent;
  top: 67%;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  height: 0;
  left: 13%;
  margin-left: -4px;
  margin-top: -2px;
  position: absolute;
  width: 0;
}


.select2-container--ols .select2-selection--single .select2-selection__placeholder {
  color: #afb8bb;
}

.select-wrapper {
    position: relative;
    display: inline-block;
}

.remove-button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 20px; /* Add some padding for close button */
}

.table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 9px;
    /*color:#555;*/
    color: var(--course-filter-text);
}

    .table th, .table td {
        /* border: 1px solid #ddd;*/
        border: 1px solid var(--cutom-collapse-border);
        padding: 8px;
        text-align: left;
    }

    .table th {
        /*background-color: #f2f2f2;*/
        background-color: var(--table-th-bg);
    }

.delete-button {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 9px;
}

.delete-button:hover {
    background-color: #c0392b;
}

.save-button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 9px;
}

  .save-button:hover {
      background-color: #2980b9;
   }

.custom-container {
    width: 100%;
    padding: 20px;
}

.custom-collapse {
    background-color: var(--page-secondary-bg-color);
    border: 1px solid var(--cutom-collapse-border);
    border-radius: 5px;
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    width: 100%;
}

.custom-header {
    padding: 15px 20px;
    border: 2px solid #3498db; /* Blue border */
    color: #555; /* Blue text color */
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-between; /* Align items and arrow to right */
    align-items: center; /* Center vertically */
}

    .custom-header label {
        font-weight: bold; /* Make the label bold */
        margin: 0; /* Remove margin for consistent spacing */
    }

.custom-header.invalid {
    padding: 15px 20px;
    border: 1px solid #F15656;
    color: #555; /* Blue text color */
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-between; /* Align items and arrow to right */
    align-items: center; /* Center vertically */
}


.custom-icon {
    transition: transform 0.3s;
}

.custom-collapse.show .custom-icon {
    transform: rotate(180deg); /* Rotate the icon when opened */
}

.custom-content {
    padding: 20px;
}

.custom-textarea {
    min-height: 150px;
    width: 100%;
}

#table-content {
   width: 100%;
   table-layout: fixed;
}

#table-content td {
   width: 33.33%;
   padding: 10px;
   box-sizing: border-box;
}

.adjustable-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--page-secondary-bg-color);
    color: var(--swl-text-color);
    border: 1px solid var(--box-border-color);
}

.ql-container.ql-snow.invalid {
    border: 1px solid #F15656 !important;
}