/*******  TO DO:  Break out CSS / Integrate with standing CSS files *****/

:root {
    --bs-btn-close-color: var(--saColorBrandBlue);
    --bs-btn-close-opacity: 1;
    --bs-form-invalid-color: var(--saColorError600);
    --bs-form-invalid-border-color: var(--saColorError300);
}

/* ** Font Colors ************************************** */

.saFgColorError500 {
    color: var(--saColorError500);
}

.saFgColorError600 {
    color: var(--saColorError600);
}


.saFgColorNeutral600 {
    color: var(--saColorNeutral600);
}

.saFgColorInformation600 {
    color: var(--saColorInformation600);
}

.saFgColorWarning600 {
    color: var(--saColorWarning600);
}

.saFgColorSuccess700 {
    color: var(--saColorSuccess700);
}

html {
    scroll-behavior: smooth;
    scroll-padding: 280px;
    margin: 0;
}

.h2 {
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

.h3 {
    font-size: 25px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

h4, .h4 {
    font-size: 20px;
    line-height: 22px;
    letter-spacing: 0.15px;
    font-weight: 600;
    margin: 0;
}

/*@media (min-width: 768px) {
    h4, .h4 {
        font-size: 20px;
        line-height: 22px;
        letter-spacing: 0.15px;
    }
}*/

h5, .h5 {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.15px;
    font-weight: 600;
}

@media (min-width: 768px) {
    h5, .h5 {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0.15px;
        font-weight: 600;
    }
}

a, a:hover {
    color: var(--saColorBrandBlue);
}

.icon-link {
    letter-spacing: 0.75px;
}

.shadow {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.08) !important;
}

.rounded-10 {
    border-radius: 10px;
}

.rounded-20 {
    border-radius: 20px;
}

.border {
    border-color: var(--saColorNeutral300);
}

.border-md-1 {
    border: 0;
}

@media (min-width: 768px) {
    .border-md-1 {
        border: 1px solid;
    }
}

.mt-12 {
    margin-top: 12px;
}

.mb-12 {
    margin-bottom: 12px;
}

.mb-xl {
    margin-bottom: 80px;
}

.mt-xl {
    margin-top: 80px;
}

/** Becaue of bsOverride */
.p-24 {
    padding: 24px;
}

.mb-4-not-last:last-child {
    margin-bottom: 0 !important;
    background-color: yellow;
}

.li-mb-4-not-last li:not(:last-child) {
    margin-bottom: 24px;
}

.tag-alert {
    line-height: 1;
    padding: 12px;
    border-radius: 4px;
    font-size: 14px;
    width: fit-content;
}

    .tag-alert.alert-expired {
        background-color: var(--saColorError50);
        color: var(--saColorErrorText);
        display: flex;
        align-items: flex-end;
        border: 1px solid var(--saColorErrorText);
    }

        .tag-alert.alert-expired.border {
            border: 1px solid var(--saColorErrorText);
        }

    .tag-alert.alert-blue {
        background-color: var(--saColorError50);
        color: var(--saColorLightBlue);
        display: flex;
        align-items: flex-end;
        border: 1px solid var(--saColorLightBlue);
    }

        .tag-alert.alert-blue.border {
            border: 1px solid var(--saColorLightBlue);
        }

/*** Breadcrumbs ***/
.breadcrumb {
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}

    .breadcrumb .breadcrumb-item,
    .breadcrumb .breadcrumb-item a {
        color: var(--saColorNeutral700);
    }

.breadcrumb-item.active,
.breadcrumb-item.active a {
    color: var(--saColorBrandBlue);
}

/***  OVERRIDE STRANGE FULL WIDTH BREAKPOINT ****/

@media (max-width: 992px) {
    .wDashboardContainer .btn-primary, .wDashboardContainer .btn-secondary, .wDashboardContainer .btn-primary--reverse {
        display: flex;
        width: fit-content;
        text-align: center;
    }
}

.saBorderColorNeutral {
    border: 1px solid var(--saColorNeutral300)
}

.gText--xxxs {
    font-size: 12px;
    line-height: 18px;
}

.gFont--medium {
    font-weight: 500;
}

.btn {
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.75px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
}

.btn-text {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.btn-confirm {
    --bs-btn-color: var(--saColorWhite);
    --bs-btn-bg: var(--saColorError500);
    --bs-btn-border-color: var(--saColorError500);
    --bs-btn-hover-color: var(--saColorWhite);
    --bs-btn-hover-bg: var(--saColorError500);
    --bs-btn-hover-border-color: var(--saColorError500);
    --bs-btn-focus-shadow-rgb: 243, 86, 37;
    --bs-btn-active-color: var(--saColorWhite);
    --bs-btn-active-bg: var(--saColorError500);
    --bs-btn-active-border-color: var(--saColorError500);
    --bs-btn-disabled-color: var(--saColorWhite);
    --bs-btn-disabled-bg: var(--saColorError500);
    --bs-btn-disabled-border-color: var(--saColorError500);
}

.btn-transparent {
    background-color: transparent;
}

    .btn-transparent:hover {
        background-color: transparent;
    }

.btn-sm {
    padding: 8px 12px;
}

.btn .fe-icon {
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.5px;
}

.btn.btn-popover {
    line-height: 1;
}

    .btn.btn-popover .fe-icon {
        font-size: 22px;
        line-height: 22px;
        letter-spacing: 0.5px;
    }

.btn-icon-only {
    color: inherit;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    display: flex;
    align-items: center;
}

    .btn-icon-only .fe-icon {
        font-size: 18px;
        line-height: 18px;
    }

.btn.btn-link:focus, .btn.btn-link:focus-visible {
    outline: none !important;
    box-shadow: none;
    border: 0 none;
}

.is-disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

@media (min-width: 992px) {
    .border-md-end {
        border-right: 1px solid var(--saColorNeutral300);
    }
}

.truncate-overflow {
    position: relative;
    max-height: calc(1.4rem * 6);
    overflow: hidden;
}

    .truncate-overflow::before {
        position: absolute;
        content: "";
        bottom: 0;
        right: 0;
        letter-spacing: 0.5px;
        background: linear-gradient(transparent 0, var(--saColorLightGray));
        width: 100%;
        height: 50%;
        left: 0;
    }

    .truncate-overflow.hide-fade::before {
        display: none;
    }

.listing-2cols {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 992px) {

    .listing-2cols {
        column-count: 2;
        column-gap: 20px;
    }
}


.wDashboardMain {
    padding: 0 16px 16px;
    flex: 1;
}

@media (min-width: 992px) {
    .wDashboardMain {
        padding: 40px 32px;
    }
}

.wDashboardSidebar {
    width: 288px;
    width: 248px;
}

.wDashboardSidebar__container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
}

.wDashboardSidebar {
    background-color: var(--saColorBrandBlack);
}

@media (min-width: 992px) {
    .wDashboardSidebar {
        display: flex;
    }
}

.wDashboardSidebar__logo {
    width: 190px;
}

.wDashboardMain__container {
    max-width: 1034px;
}

.wDashboardSidebar__nav {
    margin-top: 40px;
}

.wDashboardSidebar__container .nav-pills .nav-link {
    color: var(--saColorWhite);
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
    word-wrap: break-word;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
}

    .wDashboardSidebar__container .nav-pills .nav-link.active,
    .wDashboardSidebar__container .nav-pills .show > .nav-link {
        color: var(--saColorBrandBlue);
        background-color: var(--saColorWhite);
        font-weight: 600;
    }

.nav-link .nav-icon {
    fill: var(--saColorWhite);
    margin-right: .5rem;
    width: 24px;
    height: 24px;
    filter: invert(1);
    filter: invert(100%) sepia(0%) saturate(7%) hue-rotate(156deg) brightness(103%) contrast(100%);
}

.nav-pills .nav-link.active img.nav-icon {
    fill: var(--saColorBrandBlue);
    filter: invert(1);
    filter: invert(31%) sepia(35%) saturate(3450%) hue-rotate(212deg) brightness(94%) contrast(92%);
}

.seats-available-alert {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: var(--saColorInformation300);
    border-radius: 50%;
    margin-left: auto;
    vertical-align: middle;
}

.avatar-mask {
    position: relative;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border-radius: 50%;
    min-width: auto;
}

.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-link .avatar-mask {
    flex: none;
}

.wDashboardWidget__border {
    padding: 12px;
    border-radius: 20px;
    border: 1px solid var(--saColorNeutral300);
}

@media (min-width: 768px) {
    .wDashboardWidget__border {
        padding: 12px;
    }
}

.wDashboardWidget__container {
    padding: 12px;
    border-radius: 10px;
    background-color: var(--saColorLightGray);
}

@media (min-width: 768px) {
    .wDashboardWidget__container {
        padding: 24px;
    }
}

.wDashboardWidget__subcontainer {
    padding: 12px;
    border-radius: 5px;
    background-color: var(--saColorWhite);
}

@media (min-width: 768px) {
    .wDashboardWidget__subcontainer {
        padding: 24px;
    }
}

.last-child-mb-0 p:last-child, .last-child-mb-0 ul:last-child {
    margin-bottom: 0;
}

.non-form-checkbox:disabled {
    background-color: var(--saColorNeutralGray) !important;
}

/****************
   REPORTS
*****************/

.status-indicator {
    height: 10px;
    width: 10px;
    background-color: var(--saColorSuccess500);
    border-radius: 50%;
    display: inline-block;
    margin-right: 12px;
    border: 1px solid var(--saColorWhite);
}


/****************************************************************************************
   CREDENTIALS / COURSE CREATE / COURSE DETAILS / MEMBER PROFILE / MEMBER RENEWAL
*****************************************************************************************/

.wCredentials__Card {
    background-color: var(--saColorWhite);
}

.status-active {
    color: rgba(0 0 0, .80);
}

.status-expiring {
    color: var(--saColorWarning600);
}

.status-expired {
    color: var(--saColorError600);
}


.wCourse__Badge {
    max-width: 42px;
    margin-right: 12px;
    align-self: start;
    flex: 0 0 auto;
}

.wCourse__Badge-expired {
    filter: grayscale(100%);
}

.wCredentials__Card-Title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wCourse__Description {
    margin-right: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.statisticsBox__text {
    color: var(--saColorNeutral600);
}

.wCourseType__Card {
    padding: 12px;
}

    .wCourseType__Card:hover .wCourseType__Card-Title {
        color: var(--saColorBrandBlue);
    }

.wCreateCourse {
    margin-top: 30px;
}

.days-listing-grid {
    display: grid;
    gap: 12px;
}

@media (min-width: 768px) {
    .days-listing-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 576px) {
    .wCourseTrainerInfo {
        display: grid;
        column-gap: 32px;
        grid-template-columns: minmax(153px, auto) 1fr;
    }
}

.wCourseTrainerInfo__photo-container {
    width: 153px;
    height: 153px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--saColorLightGray);
    overflow: hidden;
    border-radius: 10px;
}

    .wCourseTrainerInfo__photo-container img {
        max-width: 153px;
        max-height: 153px;
    }


/****************
    POPOVERS
*****************/

.custom-popover.tooltip {
    --bs-tooltip-border-color: var(--saColorWhite);
    --bs-tooltip-body-padding-x: 12px;
    --bs-tooltip-body-padding-y: 12px;
    --bs-tooltip-arrow-border: var(--saColorWhite);
    --bs-tooltip-color: var(--saColorBlack);
    --bs-tooltip-bg: var(--saColorWhite);
    --bs-tooltip-font-size: 0.875rem;
}

.custom-tooltip:hover {
    cursor: pointer;
}

.tooltip {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.5px;
}

.tooltip-inner {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.25px;
}

.tooltip-medium .tooltip-inner {
    max-width: 600px;
    text-align: left;
}


    .tooltip-medium .tooltip-inner p {
        font-size: 14px;
    }

    .tooltip-medium .tooltip-inner h4 {
        font-size: 16px;
        margin-top: 0;
        margin-bottom: 6px;
    }

.popover-body {
    box-shadow: 0px 2px 6px -2px rgba(0, 0, 0, 0.06);
}

.saFgColorError500 .tooltip-inner {
    color: var(--saColorError500);
}



/********************
    GLOBAL TABLES
*********************/


.table > :not(caption) > * > * {
    padding: 1.25rem 0.8rem;
    background-color: transparent;
    border-bottom-width: var(--bs-border-width);
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}


.table-custom {
    background-color: transparent;
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;
    border-color: var(--saColorNeutral200);
    margin-bottom: 0;
}

    .table-custom thead th {
        color: var(--saColorNeutral600);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 1.5px;
        border-bottom: 1px solid var(--saColorNeutral200);
    }

    .table-custom td.d-md-table-cell {
        line-break: anywhere;
    }

    .table-custom tbody tr:last-child > * {
        border-bottom-width: 0;
    }

    .table-custom .btn-primary.btn-sm {
        display: inline-block;
        width: auto !important;
        text-align: center;
        font-weight: 600;
        font-size: 12px;
    }

    .table-custom .btn-text.btn-sm {
        display: inline-block;
        width: auto !important;
        text-align: right;
        font-weight: 600;
        font-size: 12px;
    }


/****************************
     GLOBAL ACTIONS MENU 
*****************************/

.dropdown-actions__Button {
    color: var(--saColorBrandBlack);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    padding: 4px;
    border: 0;
    background: none;
    box-shadow: none;
}

button.dropdown-actions__Button:focus:not(:focus-visible),
:not(.btn-check) + .btn.dropdown-actions__Button:active:focus-visible,
.btn.dropdown-actions__Button:first-child:active:focus-visible,
.btn.dropdown-actions__Button.active:focus-visible,
.btn.dropdown-actions__Button.show:focus-visible {
    outline: 0;
    border: none;
}


.dropdown-actions__Menu > li {
    margin-left: 8px;
    margin-right: 8px;
}

.dropdown-actions__Menu .dropdown-item {
    color: var(--saColorNeutral600);
    letter-spacing: 0.25px;
    line-height: 21px;
    padding: 8px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.25px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dropdown-actions__Menu button.dropdown-item {
    width: 100%;
    justify-content: flex-start;
}

.dropdown-actions__Menu .dropdown-item:hover, .dropdown-actions__Menu .dropdown-item:focus {
    color: var(--saColorBrandBlue);
    background-color: rgba(36, 28, 21, 0.05);
    border-radius: 4px;
}

/*******************
   GLOBAL PAGING 
********************/
.pagination {
}

.page-link {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.75px;
    font-weight: 400;
    color: var(--saColorNeutral700);
    border-color: var(--saColorLightGray);
    background-color: var(--saColorLightGray);
    margin: 0 4px;
}

.page-item:first-child .page-link {
    border-radius: 6px;
}


.page-link.active,
.active > .page-link {
    z-index: 3;
    color: var(--saColorBrandBlue);
    background-color: var(--saColorInformation50); 
    border-color: var(--saColorBrandBlue);
    border-radius: 6px;
}

.page-link.disabled,
.disabled > .page-link {
    color: var(--saColorNeutral600);
    pointer-events: none;
    background-color: var(--saColorLightGray);
    border-color: var(--saColorLightGray);
}

.page-link:hover {
    z-index: 2;
    color: var(--saColorBrandBlue);
    background-color: var(--saColorInformation50);
    border-color: var(--saColorBrandBlue);
    border-radius: 6px;
}



/*******************
    GLOBAL FORMS 
********************/

.error, .required {
    color: var(--saColorError500);
}

.form-label {
    margin-bottom: 4px;
}

.form-check {
    padding-left: 32px;
}

.form-check-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.75px;
}

.form-check-checkbox .form-check-input[type=checkbox],
.form-check-radio .form-check-input[type=radio] {
    width: 24px;
    height: 24px;
    margin-top: 1px;
    margin-left: -32px;
}

.form-check-checkbox .form-check-input[type=checkbox] {
    border: 1px var(--saColorNeutral300) solid;
}

.form-check-radio .form-check-input[type=radio] {
    border: 1px var(--saColorBrandBlue) solid;
}

.form-check-input:checked {
    background-color: var(--saColorBrandBlue);
    border-color: var(--bs-blue);
}

.form-check.form-switch {
    display: flex;
    height: 24px;
    align-items: flex-end;
    flex-direction: row-reverse;
    padding-left: 0;
}

    .form-check.form-switch .form-check-label {
        height: 24px;
        line-height: 24px;
        display: flex;
    }

    .form-check.form-switch.form-switch .form-check-input {
        height: 24px;
        width: 40px;
        margin-left: 8px;
    }

.form-text {
    color: var(--saColorNeutral600);
    letter-spacing: 0.25px;
}

.form-control {
    padding: 12px 16px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    border: 1px var(--saColorNeutral300) solid;
}

    .form-control:disabled {
        color: var(--saColorNeutralGray);
        background: var(--saColorNeutral50);
        opacity: 1;
        border: 1px var(--saColorNeutral200) solid;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
    }

.form-select {
    /* color: var(--saColorNeutral600);*/
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%228%22%20viewBox%3D%220%200%2014%208%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0.292893%200.292893C0.683417%20-0.0976311%201.31658%20-0.0976311%201.70711%200.292893L7%205.58579L12.2929%200.292893C12.6834%20-0.0976311%2013.3166%20-0.0976311%2013.7071%200.292893C14.0976%200.683417%2014.0976%201.31658%2013.7071%201.70711L7.70711%207.70711C7.31658%208.09763%206.68342%208.09763%206.29289%207.70711L0.292893%201.70711C-0.0976311%201.31658%20-0.0976311%200.683417%200.292893%200.292893Z%22%20fill%3D%22%238593A3%22%2F%3E%3C%2Fsvg%3E");
    padding: 12px 16px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    border: 1px var(--saColorNeutral300) solid;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    background-size: 14px 8px !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .form-select:focus {
        border-color: var(--saColorNeutral300);
        outline: 0;
        box-shadow: 0 0 0 0.25rem var(--saColorBootstrapBlue25);
    }

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

.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    background-color: var(--saColorError50);
    border-color: var(--saColorError300);
}

.was-validated .form-control.no-validate:valid {
    border-color: var(--saColorNeutral300);
    background-image: none;
}

.was-validated .form-select.no-validate:valid {
    border-color: var(--saColorNeutral300);
}

.was-validated .form-check-input.no-validate:valid:checked {
    background-color: var(--saColorBrandBlue);
    border-color: var(--bs-blue);
}

.was-validated .form-check-input.no-validate:valid {
    border: var(--bs-border-width) solid var(--bs-border-color);
}


.was-validated .form-check-input:valid.no-validate ~ .form-check-label {
    color: var(--saColorBlack);
}

.was-validated .form-check-input.no-validate:valid:focus {
    border-color: var(--saColorBootstrapBorderLightBlue);
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--saColorBootstrapBlue25);
}

/***  Character count for textareas ***/

.char-count {
    font-size: 14px;
    color: #555;
    margin-top: 5px;
}

    .char-count.warning {
        color: var(--saColorWarning600);
        font-weight: bold;
    }

    .char-count.error {
        color: var(--saColorError500);
        font-weight: bold;
    }

/****************
 SweetAlert MODAL 
*****************/
div:where(.swal2-container.saSweetAlertMd) div:where(.swal2-popup) {
    border-radius: 20px !important;
    width: 50em !important;
}

div:where(.swal2-container.saSweetAlertLg) div:where(.swal2-popup) {
    border-radius: 20px !important;
    width: 63em !important;
}

div:where(.swal2-container).saSweetAlert h2:where(.swal2-title) {
    text-align: left;
    padding: 24px 24px 16px;
    font-size: 42px;
    letter-spacing: 0.25px;
    line-height: 46px;
    color: var(--saColorBrandBlack);
}

div:where(.swal2-container).saSweetAlert .swal2-html-container {
    justify-content: flex-start;
    margin: 0 24px 0 24px;
    padding: 0;
    font-size: 1.125em;
    font-weight: 600;
    line-height: 1.6875em;
    text-align: left;
    letter-spacing: 0.5px;
    color: var(--saColorNeutral900);
}

div:where(.swal2-container).saSweetAlert label:where(.swal2-input-label) {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--saColorNeutral900);
    display: flex;
    justify-content: flex-start;
    /*margin: 0 24px !important;*/
    padding-bottom: 6px;
}

div:where(.swal2-container).saSweetAlert .swal2-select.form-select {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%228%22%20viewBox%3D%220%200%2014%208%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0.292893%200.292893C0.683417%20-0.0976311%201.31658%20-0.0976311%201.70711%200.292893L7%205.58579L12.2929%200.292893C12.6834%20-0.0976311%2013.3166%20-0.0976311%2013.7071%200.292893C14.0976%200.683417%2014.0976%201.31658%2013.7071%201.70711L7.70711%207.70711C7.31658%208.09763%206.68342%208.09763%206.29289%207.70711L0.292893%201.70711C-0.0976311%201.31658%20-0.0976311%200.683417%200.292893%200.292893Z%22%20fill%3D%22%238593A3%22%2F%3E%3C%2Fsvg%3E");
    width: auto;
    margin: 0 24px;
    color: var(--saColorNeutral600);
    padding: 12px 16px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
    font-size: 16px;
    letter-spacing: 0.5px;
    line-height: 24px;
}

div:where(.swal2-container).saSweetAlert .swal2-file.form-control {
    width: 75%;
    margin: 0 24px;
    color: var(--saColorNeutral600);
    padding: 6px 16px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
    font-size: 16px;
    letter-spacing: 0.5px;
    line-height: 32px;
}



div:where(.swal2-container).saSweetAlert input:where(.swal2-select):focus {
    border: 1px var(--saColorNeutral300) solid !important;
    outline: none !important;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08) !important;
}

div:where(.swal2-container).saSweetAlert div:where(.swal2-validation-message) {
    background: none;
    font-weight: 400;
    color: var(--saColorError600);
    font-size: 14px;
    margin: 0 24px;
    padding: 4px 0;
    justify-content: flex-start;
}

    div:where(.swal2-container).saSweetAlert div:where(.swal2-validation-message)::before {
        content: url('../../images/dashboard/icon-i.svg');
        display: inline-block;
        width: 1.1em;
        min-width: 1.1em;
        height: 1.1em;
        margin: 0 9px 0 0;
        border-radius: inherit;
        background-color: var(--saColorWhite);
        color: var(--saColorError500);
        font-weight: 600;
        line-height: 1.5em;
        text-align: center;
    }

div:where(.swal2-container).saSweetAlert .swal2-select.form-select.swal2-inputerror {
    color: var(--saColorError700);
    border-color: var(--saColorError300);
    background: var(--saColorError50) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%229%22%20viewBox%3D%220%200%2014%209%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0.292893%200.792893C0.683417%200.402369%201.31658%200.402369%201.70711%200.792893L7%206.08579L12.2929%200.792893C12.6834%200.402369%2013.3166%200.402369%2013.7071%200.792893C14.0976%201.18342%2014.0976%201.81658%2013.7071%202.20711L7.70711%208.20711C7.31658%208.59763%206.68342%208.59763%206.29289%208.20711L0.292893%202.20711C-0.0976311%201.81658%20-0.0976311%201.18342%200.292893%200.792893Z%22%20fill%3D%22%23F35625%22%2F%3E%3C%2Fsvg%3E");
}

div:where(.swal2-container).saSweetAlert div:where(.swal2-actions) {
    justify-content: end !important;
    width: 100% !important;
    margin: 24px 0 4px 0 !important;
    padding: 0 24px !important;
}

div:where(.swal2-container).saSweetAlert .swal2-html-container-label {
    margin: 0 24px !important;
}

div:where(.swal2-container).saSweetAlert .swal2-confirm {
    margin-bottom: 8px;
}

@media (min-width: 993px) {
    div:where(.swal2-container).saSweetAlert .swal2-actions {
        flex-direction: row-reverse;
    }

    div:where(.swal2-container).saSweetAlert .swal2-confirm {
        margin-bottom: 0;
    }

    div:where(.swal2-container).saSweetAlert .swal2-cancel {
        margin-right: 16px;
        margin-bottom: 0;
    }
}



div:where(.swal2-container).saSweetAlert button:where(.swal2-close) {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    color: var(--saColorNeutral600) !important;
    font-size: 24px !important;
    position: absolute;
    top: 34px;
    right: 40px;
}

    div:where(.swal2-container).saSweetAlert button:where(.swal2-close):hover {
        transform: none;
        background: rgba(0, 0, 0, 0);
        color: var(--saColorNeutral600) !important;
    }


/****************
 Bootstrap modal 
*****************/


.modal-header {
    border-bottom: 0;
    padding: 32px 32px 0 32px;
}

.modal-body {
    padding: 0 32px 12px 32px;
}

.modal-footer {
    border-top: 0;
    padding: 12px 32px 32px 32px;
}

.js-no-scroll {
    overflow: hidden;
}

/*******************
      EDIT MODE
********************/

.row.sf-zone-widget.page-header-sticky.sticky-top .wDashboardMain__container.sf-zone-column::before {
    content: "--Put sticky items here such as page title or jump links--";
    padding: 10px 0;
    text-align: center;
}

.row.sf-zone-widget.page-header-sticky.sticky-top .wDashboardMain__container.sf-zone-column {
    border: 1px dotted deeppink;
    margin-bottom: 20px;
}

.row.sf-zone-widget:not(.page-header-sticky) .wDashboardMain__container.sf-zone-column::before {
    content: "--Put page content here--";
    padding: 10px 0;
    text-align: center;
}

.row.sf-zone-widget:not(.page-header-sticky) .wDashboardMain__container.sf-zone-column {
    border: 1px dotted deepskyblue;
    padding-top: 20px;
}

.js-nav-course-allocation {
    display: none;
}