:root{
    /**
     * Brand Colors
     */
    --primary : #550C48;
    --primary-light : #fff5fd;
    --primary-faded : #ffd2f6;
    --primary-menu-bg : #300428;
    --primary-dark : #420437; 
    --light-pink : #cbb3b2;
    --light-gray : #dfdfdf;
    --dark-gray : #747474;
    --brown : #8c7b72;
    --dark-red : #a0696b;
    --dark-orange : #cf756a;
    --olive : #d6cfb7;
    
    --black : #333;
    --black-bg : rgba(51, 51, 51, 0.7);
    --white : #fff;
    --blue : #1c7dfa;
    --blue-dark : #166fe4;
    --background : #f4f5f7;
    --uploader-blue : #f5f9ff;
    --background-transparent : rgba(248, 246, 242, 0.25);
    --highlight : #e89f56;

    --events : #7f20df;
    --success : #11C2A8;
    --success-dark : #0e9e89;
    --success-light : #14EACA;
    --success-faded : #E6F4F1;
    --danger : #ef4464;
    --danger-faded : #ffedf0;
    --warning : #f48e19;
    --warning-dark : #e57d07;
    --warning-faded : #ffe6ca;
    --gray : #889BA4;
    --faint-gray : #FAFAFA;
    --faded : #B9CAD2;
    --red : #E05454;
    --red-dark : #d24646;
    --red-faded : #F5EAE7;
    --input-border : #E9F2F6;
    --disabled-input-border : #EFE9E1;
    --tab-border-color : #E1DCD4;
    --border-gray : #D4E0E5;

    --table-border-radius : 0.5rem;
    --btn-radius : 0.4rem;
    --input-radius : 0.4rem;
    --input-radius-lg : 0.8rem;
    --menu-border-radius : 0.5rem;
    --faded-gray-bg : rgba(233,242,247, 0.3);
    --faded-gray-bg-two : rgba(233,242,247, 0.45);
    --faded-gray-two : #EBF2F6;

    --shadow : 0px 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-xxl : 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --application-header-height : 60px;
    --application-progress-height : 80px;

    --program-gray : #F4F5FD;
    --program-muted : #A0A0A0;
    --secondary : #e57d07;
}
/**
 * Generic
 */
body{
    font-family: 'Poppins', sans-serif;
    color: var(--black);
    font-weight: normal;
    background-color: var(--background);
    overflow: hidden;
}
body.guest {
    overflow: auto;
}
/** Links **/
a, .link{
	color : var(--highlight);
	text-decoration: none;
    cursor: pointer;
}
a:hover{
	color : var(--highlight);
	text-decoration: none;
}
/** Headers **/
h1, h2, h3{
	font-weight: 600;
}
.h6, h6 {
    font-size: 1.13rem;
}
/** Alert **/
.alert{
    padding: 9px 16px;
    display: inline-block;
    max-width : 640px;
    width : 100%;
    margin: auto;
}
.alert-dismissible{
    padding-right: 64px;
}
.alert-dismissible .btn-close{
    padding: 9px 16px;
    margin-top: -16px;
    top : 50%;
    font-size: 14px;
}
.alert-success{
    background-color: var(--success-faded) !important;
    border-color: var(--success) !important;
}
.alert-danger{
    background-color: var(--red-faded) !important;
    border-color: var(--red-dark) !important;
    color : var(--red) !important;
}
.alert-warning{
    background-color: var(--warning-faded) !important;
    border-color: var(--warning) !important;
    color: var(--warning) !important;
}
.alert-disabled{
    background-color: var(--light-gray) !important;
    border-color: var(--dark-gray) !important;
    color: var(--black) !important;
}
/** Icons **/
.icon-lg{
    font-size : 2.5rem;
}
.icon-xl{
    font-size : 7.5rem;
}
.multi-path-icon{
    color : var(--primary);
}
.multi-path-icon > span::before{
    color: inherit !important;
}
/** Padding **/
.py-6{
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}
/** Texts **/
.text-primary, .text-brand{
    color: var(--primary) !important;
}
.text-success{
    color : var(--success) !important;
}
.text-muted, .text-gray, .text-disabled{
    color : var(--gray) !important;
}
.text-danger{
    color : var(--red)!important;
}
.text-blue{
    color : var(--blue)!important;
}
.text-warning{
    color : var(--warning) !important;
}
.text-small{
    font-size : 12px;
}
.fs-7{
    font-size : 0.9rem;
}
.fs-8{
    font-size : 0.85rem;
}
/** Backgrounds **/
.bg-muted{
    background-color: var(--faded-gray-bg-two) !important;
}
/** Layover **/
.layover{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}
.layover-content{
    width: 98%;
    max-width: 720px;
    overflow: hidden;
    box-shadow : 0px 4px 8px rgba(0, 0, 0, 0.15);
}
.layover-header{
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(.3rem - 1px);
    border-top-right-radius: calc(.3rem - 1px);
    background-color: var(--background) !important;
    font-weight: 500;
    border-bottom: 0px;
    color: var(--primary);
    font-size: 22px;
}
.layover-body{
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}
/** Modal **/
.modal-content, .layover-content{
    border-radius: 0px !important;
    font-size : 16px;
    background-color: var(--white);
}
.modal-content a.btn{
    font-weight: normal;
}
.modal-content a strong{
    font-weight: bold !important;
}
.modal-content.empty-modal .modal-body{
    padding-top: 0 !important;
}
.modal-cta-title{
    font-size: 18px;
    line-height: 1.5;
}
.modal-cta-title .icon{
    font-size: 22px;
    line-height: 1;
}
.modal-title{
    font-weight: 500;
    font-size: 22px;
}
.modal-sub-title{
    color: var(--icon-color);
}
.modal-header{
    background-color: var(--background) !important;
    font-weight: 500;
    border-bottom: 0px;
    color: var(--primary);
    font-size: 22px;
    border-radius: 0px;
}
.modal-header .icon{
    font-size : 21px;
    background-color: var(--primary);
    color: var(--white);
    height: 32px;
    width: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 16px;
    margin-right: 8px;
    display: inline-block;
}
.modal-header .btn-close, .layover-header .btn-close{
    font-size: 14px;
    color: #0B484E;
}
.modal-header .btn-close:hover, .layover-header .btn-close{
    color: #0B484E;
}
.empty-modal-header{
    border-radius: 0.25rem !important;
    border-bottom: 0px solid var(--white) !important;
}
.modal-icon{
    color: var(--highlight);
    font-size : 32px;
}
.modal-section-title{
    padding: 0.9rem 0.5rem !important;
    background-color: var(--faint-gray) !important;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    color : var(--black);
    text-transform: uppercase;
    text-align: center;
}
/** Containers **/
.base-form, .base-container{
	width: 98%;
	max-width: 480px;
    margin: 0 auto;
}
.base-container > .base-form{
    max-width: 100%;
    width: 100%;
}
.base-container.two-col, .two-col .base-form{
    max-width: 840px;
}
.base-container{
    background-color: var(--white);
    padding: 3rem;
    border-radius: 0px;
    box-shadow: var(--shadow);
}
.generic-container{
    background-color: var(--white);
    padding: 3rem 2.5rem;
    border-radius: 10px;
}
/** Input **/
.form-group{
    text-align: left;
    margin-bottom: 1.2rem;
}
.select2 {
    width:100%!important;
}
.select2-selection__choice{
    display: inline-block !important;
    background-color: var(--primary) !important;
    color: var(--white) !important;
    border-radius: var(--input-radius) !important;
}
.select2-selection__choice__remove{
    color: var(--white) !important;
    vertical-align: middle;
    margin-top: -3px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") 100%/.75rem auto no-repeat !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted{
    background-color: var(--background) !important;
}
.select2-dropdown{
    border-radius: 10px !important;
    border: 0.5px solid var(--primary) !important;
}
.select2-search{
    padding: .75rem !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--disabled, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-disabled="true"]{
    color: var(--disabled-input-border);
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted){
    background-color: var(--primary) !important;
}
.select2-container .select2-selection--single{
    height: 48px;
}
.select2-container .select2-selection--single.form-select-lg{
    height: 60px;
    padding: .9375rem 2.25rem .9375rem 1.875rem;
    border-radius: 1.875rem !important;
}
.select2-container .select2-selection--single .select2-selection__rendered{
    padding-left: 0px;
}
.select2-container--bootstrap-5 .select2-selection--single{
    padding: 12px 2.25rem 12px 1rem;
    border-radius: var(--input-radius) !important;
    border-color: var(--input-border) !important;
}
.select2-container .select2-selection--multiple{
    padding: 12px 1rem 12px 1rem;
    border-radius: var(--input-radius) !important;
    border-color: var(--input-border) !important;
    min-height: 48px !important;
    line-height: 1 !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice{
    margin-bottom: 0 !important;
    font-size: 0.9rem !important;
}
.select2-search--inline{
    display: none !important;
}
.show-search .select2-search--inline{
    display: inline-block !important;
    width: auto !important;
}
.show-search .select2-search {
    padding: 0rem !important;
}
.form-control:focus, .btn:focus, .form-select:focus,
.select2-search__field:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection
{
    border-color: var(--input-border) !important;
    box-shadow : 0 0 0 0.25rem var(--background) !important;
}
.show-search .select2-search--inline textarea:focus{
    border-color: transparent !important;
    box-shadow : none !important;
}
.input-group .form-control:focus
{
    border-color: var(--primary) !important;
    box-shadow : 0 0 0 0.25rem var(--background-transparent) !important;
}
textarea { resize: none; }
.form-control{
    line-height: 2.125 !important;
    border : 1px solid var(--input-border);
    border-radius: var(--input-radius);
    padding : 0.25rem 1rem;
}
.form-control-lg{
    line-height: 3.125rem !important;
    border-radius: var(--input-radius);
    font-size: 1.15rem;
    padding-left: 1.875rem 0.25rem;
}
.form-control-lg.number-sm, .form-control-lg.number-xs{
    padding-left: 1rem;
}
.joined-input{
    border : 1px solid var(--input-border);
    border-radius: .25rem;
}
.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--faded);
    opacity: 1; /* Firefox */
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--faded);
}
.form-control::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--faded);
}
.form-control:disabled, .form-control[readonly]{
    background-color: var(--background);
}
.hint-block{
    color : var(--gray) !important;
    font-size : 0.9rem;
    margin: 0.25rem 0;
}
.joined-input-divider{
    padding: 10px 2px;
}
.joined-input .form-control{
    border-width: 0px;
}
.joined-input .form-control:first-child{
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.joined-input .form-control:last-child{
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
.number-sm{
    max-width: 200px;
    text-align: center;
}
.number-xs{
    max-width: 130px;
    text-align: center;
}
input[type="color"] {
	display: none;
}
.input-color{
    display: block;
    height: 60px;
    width: 60px;
    border : 1px solid var(--black);
    border-radius: 50%;
    cursor: pointer;
    margin-right: 0.75rem;
}
.color-palette{
    display: inline-block;
    height: 30px;
    width: 30px;
    border : 1px solid var(--faded);
    border-radius: 50%;
    margin-right: 0.75rem;
}
.color-palette-sm{
    height: 18px;
    width: 18px;
}
.form-color{
    padding: 1rem 0 0;
}
.form-check:not(.form-switch){
    background-color: transparent;
    padding: 0.9rem 0;
    border-radius: 0.25rem;
    border: 1px solid transparent;
    margin-bottom: 0.1rem;
}
.form-check:not(.form-switch) .form-check-label{
    line-height: 20px;
    color: var(--primary);
}
.form-check:not(.form-switch) .form-check-input{
    margin-left: -0.05rem;
    margin-right: 0.75rem;
}
.form-check:not(.form-switch) .form-check-input:checked{
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='miter' stroke-width='1.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.form-check:not(.form-switch) .form-check-input:indeterminate {
    background-color: var(--highlight) !important;
    border-color: var(--highlight) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230B484E' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 10h8'/%3e%3c/svg%3e");
}
.table .form-check{
    padding: 0;
    max-width: 20px;
    max-height: 20px;
    min-height: 20px;
    margin-bottom: 0px;
}
.table .form-check .form-check-input{
    margin-right: 0;
    height: 18px;
    width: 18px;
}
.form-check-input:focus{
    border-color: var(--faded) !important;
    box-shadow : 0 0 0 0rem var(--faded) !important;
}
.form-check-sm{
    background-color: transparent;
    padding: 0.1rem 1rem;
    border-radius: 0rem;
    border: 1px solid transparent;
    margin-bottom: 0.1rem;
}
.has-error .help-block, .help-block-error{
    color: var(--red-dark);
    font-size : 0.9rem;
    font-weight: 500;
    margin-top: 0.2rem;
}
.form-group.required label:after {
    content:" *";
	color: var(--red);
}
.form-label{
    margin-bottom: 0.2rem;
    margin-left: 5px;
    font-weight: 500;
    color: var(--black);
}
.d-flex .form-label{
    margin-bottom: 0;
    margin-left: 0;
}
/** Tab **/
.nav-tabs{
    border-bottom: 1.5px solid var(--tab-border-color);
}
.nav-tabs .nav-link{
    background-color: transparent !important;
    color: var(--primary) !important;
    font-size: 16px;
    padding: 12px 20px;
    margin-right: 8px;
    margin-bottom: -1.5px !important;
    border-bottom-width: 3px !important;
}
.nav-tabs .nav-link:hover{
    border-color: transparent transparent var(--primary);
}
.nav-tabs .nav-link.active{
    border-color: transparent transparent var(--primary);
    font-weight: bold;
}
/** Loader **/
.loading{
    height: 100vh;
    width: 100vw;
    z-index: 3005;
    background-color: rgba(255,255,255,0.85);
}
.spinner {
    width: 80px;
    height: 80px;
  
    position: relative;
    margin: 100px auto;
}
.double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--primary);
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
} 
@-webkit-keyframes sk-bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
} 
@keyframes sk-bounce {
    0%, 100% { 
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 50% { 
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}
@keyframes blinker {
    to {
        background-color: var(--background);
    }
    from {
        background-color: var(--white);
    }
}
/** Buttons **/
.btn{
    height: 48px;
    /* box-shadow : 0px 4px 8px rgba(0, 0, 0, 0.15); */
    padding: 0px 1.5rem;
}
.btn-input{
    height: 44px;
}
.btn-group-lg > .btn, .btn-lg{
    padding: 0px 1.5rem;
}
.btn-sm{
    height: auto !important;
    padding: 0.6rem 1rem !important;
    line-height: 1 !important;
}
.btn-xs{
    height: auto !important;
    padding: 0.4rem 0.6rem !important;
    line-height: 1 !important;
    font-size: 0.8rem;
}
.btn-rounded{
    border-radius: 10rem !important;
}
.btn-lg.btn-pill{
    width: 3.75rem;
    height: 3.75rem;
    padding: 0;
    text-align: center;
    line-height: 3.75rem;
    border-width: 0;
    border-radius: 1.875rem;
    font-size: 1.75rem;
}
a.btn{
	text-decoration: none !important;
    line-height: 48px;
    padding: 0px 1.5rem;
}
a.btn.button{
    padding: 0px 1.5rem;
}
.btn-standard{
    min-width: 175px;
}
.btn-primary{
	background-color: var(--primary);
	border-color: var(--primary);
	color: var(--white);
    border-radius: var(--btn-radius);
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{
	box-shadow: none !important;
	background-color: var(--primary-dark) !important;
	border-color: var(--primary-dark) !important;
	color: var(--white) !important;
}
.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: var(--gray);
    border-color: var(--gray);
}
.btn-blue{
	background-color: var(--blue);
	border-color: var(--blue);
	color: var(--white);
    border-radius: var(--btn-radius);
}
.btn-blue:hover,.btn-blue:focus,.btn-blue:active{
	box-shadow: none !important;
	background-color: var(--blue-dark) !important;
	border-color: var(--blue-dark) !important;
	color: var(--white) !important;
}
.btn-blue.disabled, .btn-blue:disabled {
    color: #fff;
    background-color: var(--gray);
    border-color: var(--gray);
}
.btn-success{
	background-color: var(--success);
	border-color: var(--success);
	color: var(--white);
    border-radius: var(--btn-radius);
}
.btn-success:hover,.btn-success:focus,.btn-success:active{
	box-shadow: none !important;
	background-color: var(--success-dark) !important;
	border-color: var(--success-dark) !important;
	color: var(--white) !important;
}
.btn-success.disabled, .btn-success:disabled {
    color: #fff;
    background-color: var(--gray);
    border-color: var(--gray);
}
.btn-warning{
	background-color: var(--warning);
	border-color: var(--warning-dark);
	color: var(--white);
    border-radius: var(--btn-radius);
}
.btn-warning:hover,.btn-warning:focus,.btn-warning:active{
	box-shadow: none !important;
    background-color: var(--warning-dark) !important;
    border-color: var(--warning-dark) !important;
    color: var(--white) !important;
}
.btn-danger{
	background-color: var(--red);
	border-color: var(--red);
	color: var(--white);
    border-radius: var(--btn-radius);
}
.btn-danger:hover,.btn-danger:focus{
	box-shadow: none !important;
	background-color: var(--red-dark) !important;
	border-color: var(--red-dark) !important;
	color: var(--white) !important;
}
.btn-light{
    background-color: var(--white) !important;
    color : var(--primary) !important;
	box-shadow: none;
    border-color: var(--light-gray) !important;
    border-radius: var(--btn-radius);
}
.btn-light:hover,.btn-light:focus{
    background-color: var(--faint-gray) !important;
    box-shadow: none !important;
}
.btn-pill.btn-light:hover,.btn-pill.btn-light:focus{
    background-color: var(--primary) !important;
    color: var(--white) !important;
}
td .btn-action, th .btn-action{
    margin: 2px 4px 2px 0;
}
.btn-action{
    box-shadow: none !important;
    padding: .15rem .5rem !important;
    height: 30px !important;
    line-height: 1 !important;
    font-size: 1.8rem;
    color: var(--black);
    border-color : var(--gray);
    background-color: var(--white);
    margin-right: 4px;
}
.btn-action .icon{
    margin-right: 2px;
}
.btn-action:hover{
    background-color: var(--faint-gray);
}
.btn-action.btn-action-plain:hover{
    border-color: transparent;
    background-color: transparent;
}
.btn-action.btn-primary:hover{
    background-color: var(--primary-faded);
}
.btn-action.btn-danger{
    color: var(--red-dark);
    border-color : var(--red-dark);
    background-color: var(--white);
}
.btn-action.btn-danger:hover{
    background-color: var(--red-faded);
}
.btn-action.btn-warning{
    color: var(--warning-dark);
    border-color : var(--warning-dark);
    background-color: var(--white);
}
.btn-action.btn-warning:hover{
    background-color: var(--warning-faded);
}
.btn-action.crud-icon{
    width: 36px !important;
    height: 36px !important;
    background-color: var(--background);
    border: .5px solid var(--gray);
    border-radius: 18px;
    text-align: center;
    margin-left: 15px;
    cursor: pointer;
    position: relative;
}
.btn-action.crud-icon .icon{
    margin-right: 0px !important;
}
.btn-action.crud-icon:hover{
    background-color: var(--primary);
    color: var(--white) !important;
}
.btn-action.crud-icon.danger{
    background-color: var(--red-faded);
    color: var(--red);
    border-color: var(--red);
}
.btn-action.crud-icon.danger:hover{
    background-color: var(--red-dark);
    border-color: var(--red-dark);
}
.btn-action.crud-icon.btn-action-plain{
    border-color: transparent;
    background-color: transparent;
    color: var(--primary) !important;
}
.btn-action.crud-icon.btn-primary{
    color: var(--success);
    border-color : var(--success-light);
    background-color: var(--white);
}
.status-indicator{
    display: inline-block;
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 50%;
    margin-right: 0.2rem;
    background-color: var(--black);
}
a.btn-status{
    font-size: 0.8rem;
    padding : 0.4rem 1.2rem !important;
    height: auto;
    line-height: 1;
    box-shadow: none;
    border-radius: 15px;
    background-color: var(--white) !important;
    border-width: 1px;
    border-color: var(--black) !important;
    color: var(--black) !important;
    cursor: default;
}
a.btn-status.btn-blue{
    border-color: var(--success) !important;
    color: var(--success) !important;
    background-color: var(--success-faded) !important;
}
a.btn-status.btn-blue .status-indicator{
    background-color: var(--success);
}
a.btn-status.btn-danger{
    border-color: var(--danger) !important;
    color: var(--danger) !important;
    background-color: var(--danger-faded) !important;
}
a.btn-status.btn-danger .status-indicator{
    background-color: var(--danger);
}
a.btn-status.btn-disabled{
    border-color: var(--gray) !important;
    color: var(--gray) !important;
    background-color: var(--faint-gray) !important;
}
a.btn-status.btn-disabled .status-indicator{
    background-color: var(--gray);
}
a.btn-status.btn-success{
    border-color: var(--success) !important;
    color: var(--success) !important;
    background-color: var(--success-faded) !important;
}
a.btn-status.btn-success .status-indicator{
    background-color: var(--success);
}
a.btn-status.btn-blue{
    border-color: var(--blue) !important;
    color: var(--blue) !important;
    background-color: var(--uploader-blue) !important;
}
.btn-icon .icon{
    margin-right: 5px;
    font-size: 1.2rem;
}
.btn-icon.no-text .icon{
    margin-right: 0px;
}
.btn-icon.end-icon .icon{
    margin-right: 0px;
    margin-left: 5px;
    font-size: 1.2rem;
}
.btn-outline{
    background-color: var(--white);
    border-color: var(--light-gray);
    color: var(--black);
}
.btn-outline.btn-danger{
    background-color: var(--danger-faded);
    border-color: var(--danger);
    color: var(--danger);
}
.btn-outline.btn-success{
    background-color: var(--success-faded);
    border-color: var(--success-dark);
    color: var(--success-dark);
}
.btn-outline.btn-blue{
    background-color: var(--uploader-blue);
    border-color: var(--blue-dark);
    color: var(--blue);
}
.btn-outline.btn-primary{
    background-color: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}
/* .btn-outline.btn-success{
    background-color: var(--white);
    border-color: var(--success-dark);
    color: var(--success);
} */
.btn-outline:hover{
    border-color: var(--gray);
    background-color: var(--faint-gray);
}
/** Backend Layout **/
.wrapper{
    height: calc(100vh);
    height: calc(var(--vh, 1vh) * 100);
    width: 100vw;
    width: calc(var(--vw, 1vw) * 100);
}
.main-content{
    padding: 30px 20px 0;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    width: calc(100vw - 270px);
    width: calc(var(--vw, 1vw) * 100 - 270px);
}
#main-content{
    height: calc(100vh - 100px);
    height: calc(var(--vh, 1vh) * 100 - 100px);
    margin-right: -24px;
    padding-right: 24px;
}
#guest-content{
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}
#main-content .inner-content{
    padding-top : 24px;
    padding-bottom: 60px;
    max-width: 1600px;
    margin: auto;
}
.main-content .header{
    height: 60px;
    width: 100%;
    margin: auto;
    max-width: 1600px;
}
.main-content .header-content{
    margin: 0 -24px;
    padding: 0 24px;
}
.sidebar{
    flex: 0 0 268px;
    width: 268px;
    background-color: var(--primary);
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}
.sidebar #logo{
    height: 150px;
    width: 200px;
    margin: auto;
    padding-left: 20px;
}
#main-nav-container{
    width: 200px;
    margin: auto;
    height: calc(100vh - 306px);
    height: calc(var(--vh, 1vh) * 100 - 306px);
}
.sidebar{
    flex: 0 0 270px;
    width: 270px;
    background-color: var(--primary);
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}
.sidebar #logo{
    max-height: 210px;
    width: 210px;
    margin: auto;
}
.sidebar #main-nav-container{
    width: 210px;
    margin: auto;
    height: calc(100vh - 306px);
    height: calc(var(--vh, 1vh) * 100 - 306px);
}
.main-nav{
    margin-top : 24px;
    margin-left: 0px;
    margin-right: 0px;
}
.main-nav a{
    color: var(--white) !important;
    text-decoration: none !important;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    padding : 10px 10px;
    border-radius: var(--menu-border-radius);
}
.main-nav > li{
    border-radius: var(--menu-border-radius);
    margin-bottom: 8px;
}
.main-nav a:hover{
    background-color: var(--primary-dark) !important;
    text-decoration: none !important;
}
.main-nav,
.main-nav ul {
    list-style: none;
    padding: 0;
    position: relative;
    margin-bottom: 0
}
.main-nav .has-children ul{
    margin-top: 0px;
    padding-top: 5px;
}
.main-nav ul {
    display: none
}
.main-nav > li >ul >li{
    border-radius: 0.25rem;
    list-style-image: none;
}
.main-nav>li.active>ul,
.main-nav>li.expanded>ul,
.main-nav>li.has-active>ul {
    display: block
}
.main-nav .sub-menu-item{
    font-size: 1rem;
    width: 16px;
    text-align: center;
}
.main-nav >li a  >.icon{
    color: var(--white) !important;
    font-size: 32px;
    line-height: 32px;
}
.main-nav >li a  > .icon.expander{
    display: inline-block;
    font-size: 20px;
    line-height: 32px;
}
.main-nav >li li .icon{
    color: var(--white) !important;
    font-size: 22px;
    width: 32px;
    text-align: center;
    line-height: 22px;
}
.main-nav li.active > a > .expander, .main-nav li.expanded > a > .expander, .main-nav li.has-active > a > .expander{
    transform: rotate(90deg);
}
.main-nav >li > a > .menu-label{
    font-size: 14px;
    line-height: 1;
    padding-left: 10px !important;
}
.main-nav li.active > a, .main-nav li.active > a .icon{
    color: var(--highlight) !important;
}
.main-nav>li.active, .main-nav>li.expanded, .main-nav>li.has-active{
    background-color: var(--primary-menu-bg);
}
.main-nav ul > li.active{
    background-color : var(--primary-dark) !important;
}
.main-nav ul > li.active > a{
    color: var(--highlight) !important;
}
.sidebar .profile{
    height: 80px;
    padding : 0 30px 10px 30px;
}
.sidebar .profile .user-details{
    margin-right: 15px;
}
.sidebar .profile .username{
    font-weight: 400;
    font-size: 13px;
    line-height: 1;
    color: var(--white) !important;
}
.sidebar .profile svg{
    width: 32px;
    height: 32px;
    display: block;
    margin: 4px auto;
}
.sidebar .profile img{
    width: 40px;
    height: 40px;
    display: block;
    margin: 0px auto;
    border-radius: 12px;
}
.profile-icon{
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    text-align: center;
    background-color: var(--highlight);
    color: var(--primary);
    border-radius: 50%;
}
.sidebar .profile .icon{
    color : var(--white);
    font-size: 28px;
    margin-left: 2px;
}
/**
 * Table
 */
table {
    border-collapse: separate;
    border-spacing: 0;
}
thead > tr > th{
    font-weight: 600;
    font-size: 1.1rem;
    padding : 1.25rem 0.5rem !important;
    border: 1px solid var(--border-gray);
    background-color: var(--primary) !important;
    color: var(--highlight) !important;
    border-right-width: 0px;
    border-left-width: 0px;
}
thead > tr > th.transparent-header{
    background-color: transparent !important;
}
thead > tr > th:first-child{
    border-top-left-radius: var(--table-border-radius);
    padding-left: 1.5rem !important;
    border-left-color: var(--border-gray) !important;
    border-left-width: 1px !important;
    border-left-style: solid !important;
}
table thead > tr > th:last-child{
    border-top-right-radius: var(--table-border-radius);
    border-right-color: var(--border-gray) !important;
    border-right-width: 1px !important;
    border-right-style: solid !important;
}
tbody > tr.highlight > th, tbody > tr.highlight > td{
    animation: blinker 2s ease 0s 4 normal;
}
table.has-filter thead > tr > th:first-child{
    border-radius:0 0 0 0.25rem;
}
table.has-filter thead > tr > th:last-child{
    border-radius:0 0 0.25rem 0;
}
tbody > tr > th, tbody > tr > td{
    font-size: 14px;
    color: var(--primary);
    padding : 0.5rem 0.5rem !important;
    border-bottom-color: var(--border-gray) !important;
    vertical-align: middle;
    margin-bottom: 8px;
    background-color: var(--white) !important;
}
tbody > tr > th{
    font-weight: 600;
}
tbody > tr > :first-child{
    padding-left: 1.5rem !important;
    border-left-color: var(--border-gray) !important;
    border-left-width: 1px !important;
    border-left-style: solid !important;
}
.action-tooltip{
    font-size: 1.2rem;
    line-height: 1.6;
}
.action-content{
    padding: 0rem 0rem;
    margin: 0;
    font-size : 1.5rem;
    border: 1px solid var(--widget-header-bg);
}
.action-content > table{
    margin: 0px !important;
}
.action-content tbody > tr > :first-child{
    padding-left: 0rem !important;
    border-left-color: var(--white) !important;
    border-left-width: 0px !important;
    border-left-style: solid !important;
}
tbody > tr > :last-child{
    padding-right: 0.5rem !important;
    border-right-color: var(--border-gray) !important;
    border-right-width: 1px !important;
    border-right-style: solid !important;
}
.action-content tbody > tr > :last-child{
    padding-right: 0rem !important;
    border-right-color: var(--white) !important;
    border-right-width: 0px !important;
    border-right-style: solid !important;
}
.action-content tbody > tr > th{
    background-color: var(--background) !important;
}
tbody > tr:last-child > :first-child{
    border-bottom-left-radius: var(--table-border-radius);
}
tbody > tr:last-child > :last-child{
    border-bottom-right-radius: var(--table-border-radius);
}
.action-content tbody > tr:last-child > :last-child, .action-content tbody > tr:last-child > :first-child{
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
a.table-sorter{
    color : var(--primary-faded);
}
a.table-sorter:hover, a.table-sorter.active{
    color : var(--white);
}
.table-sorter .icon{
    color : var(--icon-color);
}
.table-sorter.active .icon{
    color : var(--white);
    font-size : 16px;
}
.table > :not(:first-child){
    border-width: 0 !important;
}
table.table-values th, table.table-values td{
    border-radius:0 !important;
    padding: 0.25rem 0.5rem !important;
    border-width: 0 !important;
}
table.table-values th{
    font-weight: 600;
    font-size: 0.9rem;
    padding : 0.9rem 0.5rem !important;
    border: 0 !important;
    font-size: 12px;
    color: var(--gray);
}
table.table-values .td-value{
    width: 50%;
}
tbody > tr.inactive > th, tbody > tr.inactive > td{
    background-color: var(--faint-gray) !important;
    color: var(--gray);
}
tbody > tr.footer-row > th, tbody > tr.footer-row > td{
    border-bottom-width: 2px;
    border-top-width: 2px;
    border-top-color: var(--icon-color);
    border-bottom-color: var(--icon-color);
    border-top-style: solid;
}
tbody > tr.no-border > td,thead > tr.no-border > td, tbody > tr.no-border > th,thead > tr.no-border > th{
    border-bottom-width: 0px !important;
}
tbody > tr > td.no-padding-left,thead > tr > td.no-padding-left, tbody > tr > th.no-padding-left,thead > tr > th.no-padding-left{
    padding-left: 0px !important;
}
tbody > tr > td.no-padding-right,thead > tr > td.no-padding-right, tbody > tr > th.no-padding-right,thead > tr > th.no-padding-right{
    padding-right: 0px !important;
}
tbody > tr.disabled > th, tbody > tr.disabled > td{
    background-color: var(--dark-gray) !important;
}
tbody > tr.highlight > th, tbody > tr.highlight > td{
    animation: blinker 2s ease 0s 4 normal;
}
table th.text-center .d-flex, table td.text-center .d-flex{
    justify-content: center;
}
table th.text-end .d-flex, table td.text-end .d-flex{
    justify-content: end;
}
table .btn{
    box-shadow: none;
}
/**
 * Popover
 */
#app-backdrop{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    background-color: var(--black) !important;
    display: none;
    opacity: 0.15;
}
#app-backdrop.show{
    display: block;
}
.app-popover a{
    color: var(--black);
}
.app-popover{
    z-index: 1060;
    position: absolute;
    background-color: white;
    box-shadow : 0px 0px 10px rgba(0, 0, 0, 0.15);
    display: none;
    padding: 0.4rem 1.125rem;
    max-width: 90%;
    width: auto;
}
.app-popover-menu{
    padding : 0.5rem 0rem;
    font-size : 0.875rem;
    border-bottom: 0.5px solid var(--background);
}
.app-popover-menu .icon{
    display: block;
    margin-right: 8px;
    width: 28px !important;
    text-align: center;
    font-size: 1.2rem;
}
.app-popover-menu:last-child{
    border-bottom-width: 0px;
}
.app-popover-menu .menu-text{
    padding-right: 2rem;
}
.app-popover.show{
    display: block;
}
.app-popover-full{
    padding : 0px;
}
.popover-title{
    height: 60px;
    background-color: var(--lake);
    color: var(--white);
    text-align: center;
    line-height: 60px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    font-size: 18px;
    font-weight: 600;
}
/**
Adder
*/
.adder{
    background: var(--faded-gray-bg);
    border: 1px solid var(--faded-gray-two);
    border-radius: var(--input-radius);
    position: relative;
    min-height: 200px;
}
.adder-input-container{
    width: 100%;
    bottom: 0px;
    position: absolute;
    left: 0px;
    right: 0px;
}
.adder-input-container .form-control{
    padding: 10px 20px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.adder-option{
    border-bottom: 1px solid var(--faded-gray-two);
}
.adder-option:first-child{
    border-top-right-radius: var(--input-radius);
    border-top-left-radius: var(--input-radius);
}
.adder-option.correct{
    background-color: var(--primary);
    color: var(--white);
}
.adder-option.correct .text-danger{
    color: var(--sunflower) !important;
}
.adder-option-text{
    padding: 15px 20px;
    display: flex;
    justify-content: stretch;
    align-items: center;
}
.adder-editable-option{
    border-radius: 0px !important;
    background-color: var(--white) !important;
    border-width: 0px !important;
}
.adder-options
{
    padding-bottom: 55px;
}
.adder-option-text .icon{
    cursor: pointer;
    font-size: 1.5rem;
    display: inline-block;
    padding: 1px 6px;
}
/**
 * Upload
 */
.uploader-container{
    margin-bottom: 1.2rem;
}
.uploader-container .uploader{
    width: 100%;
    box-shadow: var(--shadow);
    padding: 3rem;
    background-color: var(--uploader-blue);
    display: block;
    text-align: center;
    border : 2px dashed var(--blue);
    border-radius: var(--input-radius);
    position: relative;
    color: var(--gray);
}
.uploader strong{
    color: var(--black);
}
.uploader.active{
    /* background-color: var(--primary); */
    /* color: var(--white) !important; */
    background-color: var(--uploader-blue);
}
.uploader .separator{
    margin : 0.5rem 0 1rem;
}
.uploader-container .uploader .icon{
    font-size : 2rem;
    color: var(--blue);
}
.uploader.active .icon{
    color : var(--highlight)
}
.file-upload-preview{
    margin-top: 12px;
}
.file-upload-preview img{
    width: 100%;
    height: auto;
    width: auto;
    max-width: 400px;
    max-height: 180px;
}
.icon-uploader{
    width : 80px;
    height: 80px;
    padding: 0rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--red);
    color: var(--white) !important;
    box-shadow: none;
    cursor: pointer;
}
.icon-uploader .icon{
    font-size: 3rem;
}
.image-uploader{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--white);
    border: 0.5px solid var(--faded);
}
.uploader-cta{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.25rem 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    background-color: var(--black-bg);
    border-bottom-left-radius: var(--input-radius);
    border-bottom-right-radius: var(--input-radius);
    visibility: hidden;
}
.image-uploader:hover .uploader-cta{
    visibility: visible;
}
.uploader-queue, .file-list{
    margin-top: 0.75rem;
}
.uploader-queue .uploading, .file-list .file{
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--input-border);
    border-radius: 0.5rem;
}
.uploader-queue .uploading .name, .file-list .file .name{
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}
.uploader-queue .uploading  .name .percent{
    color: var(--gray);
    font-weight: 500;
    font-size: 0.9em;
}
.uploader-queue .uploading .upload-progress{
    height : 5px;
    width: 100%;
    border-radius: 2.5px;
    background-color: var(--background);
    position: relative;
}
.uploader-queue .uploading .track{
    height : 5px;
    border-radius: 2.5px;
    background-color: var(--primary);
    width: 0%;
}
.file-list .file .name{
    margin-bottom: 0px;
    height: calc(1rem+1px);
}
.form-control.name-editor{
    line-height: 1 !important;
    border-width: 0 0 1px !important;
    border-radius: 0px !important;
    padding: 0.1rem 0.5rem !important;
    min-height: auto;
    font-size: 0.8rem;
}
.file-list .file .icon{
    display: block;
    width: 40px;
    text-align: center;
    font-size: 1.4rem;
    color : var(--primary);
    cursor: pointer;
}
.file-list .file .delete{
    color : var(--danger);
}
/**
 * Pagination
 */
.page-item .page-link{
    border-radius: 2px !important;
    border-color: var(--primary-faded-two) !important;
    width: 32px;
    height: 32px;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    padding: 0px;
    font-weight: 500;
    margin-right: 4px;
    color: var(--primary);
    text-decoration: none !important;
    border-radius: 50% !important;
}
.page-item .page-link:hover{
    background-color: var(--primary-bg);
}
.page-item .page-link .icon{
    margin: 8px 0 0 1px;
    display: inline-block;
}
.page-item.prev .page-link .icon{
    margin-left: -1px;
    display: inline-block;
}
.page-item:last-child .page-link{
    margin-right: 0px;
}
.page-item.disabled .page-link{
    border-color: var(--primary-faded) !important;
    color: var(--primary);
    background-color: var(--primary-bg);
}
.page-item.active .page-link{
    border-color: var(--primary) !important;
    color: var(--white);
    background-color: var(--primary);
    font-weight: 400;
}
.btn-pagination{
    height: 32px !important;
    overflow: hidden;
    width: 140px;
    font-size: 14px;
    font-weight: 400;
    color: #262626 !important;
    border-radius: 20px;
}
.pagination-dropdown{
    margin-left: 20px;
}
.btn-pagination .icon{
    font-size: 11px;
    margin-left: 4px;
    margin-top: 2px;
    margin-right: 0px;
}
/** Grid */
.crud-grid{
    border-radius: 12px !important;
    background-color: var(--white);
    box-shadow : var(--shadow);
    min-height: 220px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 1rem;
    padding: 24px;
    width: 100%;
}
.crud-grid.highlight{
    animation: blinker 0.75s ease 0s 2 normal;
}
.grid-title{
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
}
.grid-text{
    font-size: 0.9rem;
}
.crud-grid .btn-action.crud-icon.btn-action-plain{
    color: var(--black) !important;
}
a.grid-link, .grid-link, .btn-action.crud-icon.grid-link{
    display: inline-block !important;
    font-size : 26px;
    padding: 12px !important;
    width: 50px !important;
    height: 50.6px !important;
    font-weight: bold;
    /* margin-right: 10px; */
    margin-left: 0px;
    text-align: center;
    border-radius: 6px !important;
    background-color: var(--faded-gray-bg) !important;
    border: 1px solid var(--faded-gray-two) !important;
    color: var(--black) !important;
    line-height: 26.6px;
    vertical-align: top;
}
/**
 * Custom UI
 */
.stat-icon{
    display: flex;
    align-items: center;
    margin: 0 12px;
    font-size: 12px;
    font-weight: 600;
}
.stat-icon .icon{
    color : var(--gray);
    font-size: 1.6rem;
    margin-right: 4px;
}
.stats{
    align-items: center;
}
.stats .metric{
    font-size : 26px;
    background-color: var(--faded-gray-bg);
    border: 1px solid var(--faded-gray-two);
    padding: 0.3rem;
    width: 50px;
    font-weight: bold;
    margin-right: 10px;
    text-align: center;
    border-radius: 6px;
    min-width: 50px;
}
.stats .text{
    width: 100px;
    font-size: 13px;
    color: var(--gray);
    line-height: 1.2;
    font-weight: 500;
}
/**
 * Copyable Link
 */
.copyable{
    background-color: var(--blue);
    border: 1px solid var(--blue-dark);
    display: inline-block;
    padding: 0.3rem 0.5rem;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-weight: 500;
    border-radius: 0.3rem;
    cursor: pointer;
    color: var(--white);
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
}
.link-content .cta-title,.modal .cta-title{
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
}
.link-content .link-title{
    font-size: 0.8rem;
}
/**
 * Resources
 */
.sub-header{
    padding: 0.9rem 0.5rem !important;
    font-weight: 500;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    text-align: center;
}
/**
 * List Item
 */
.list-item{
    margin-top: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--input-border);
    border-radius: 0.5rem;
}
.list-items .list-item:first-child{
    margin-top: 0;
}
.list-item .item-text{
    font-size: 1rem;
    margin: 0px;
}
.list-item .item-subtext{
    font-size: 0.9rem;
    margin: 0px;
    color: var(--gray);
}
.list-item .item-actions{
    min-width: 370px !important;
}
/**
 * Logo
 */
.guest .logo{
    max-width: 200px;
    height: auto;
}
/**
 * Pages
 */
.pages-wrap{
    margin-bottom: 0.25rem;
}
.page, .pages-wrap .icon,.reorder-page{
    padding : 12px 18px;
    min-width: 40px !important;
    height: 40px !important;
    text-align: center;
    display: inline-block;
    border-radius: 6px !important;
    background-color: var(--faded-gray-bg);
    border: 1px solid var(--light-gray);
    line-height: 14px;
    cursor: pointer;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    position: relative;
}
.page-text{
    max-width: 160px;
}
.page .error-count{
    position: absolute;
    top: -15px;
    right: 4px;
    background: var(--danger);
    width: 24px;
    height: 24px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    font-size: 12px;
    color: var(--white);
    border: 2px solid var(--white);
    font-weight: 600;
}
.reorder-page{
    display: block;
    margin-right: 0rem;
    margin-bottom: 0.25rem;
    text-align: left;
    display: flex;
    align-items: center;
}
.pages-wrap .icon{
    padding: 12px 0;
    font-size: 1.2rem;
    background-color: var(--faded-gray-bg);
    border: 1px solid var(--light-gray);
}
.pages-wrap .icon.danger{
    background-color: var(--danger);
    border: 1px solid var(--red-dark);
    color: var(--white);
}
.pages-wrap .icon.success{
    background-color: var(--success);
    border: 1px solid var(--success-dark);
    color: var(--white);
}
.page.active{
    background-color: var(--primary);
    border: 1px solid var(--primary-menu-bg);
    color: var(--white);
}
.stacked-input-table .remove-row{
    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--danger);
    font-size : 1.5rem;
}
.stacked-group{
    margin-bottom: 0.5rem;
}
.stacked-input{
    width : 60%;
    max-width: 800px;
}
.icon-delete:before {
    content: "\e907";
}
.stacked-action-container{
    text-align: center;
    padding: 0 0 2rem;
}
.stacked-input-table thead > tr > th{
    padding: 0.75rem 0.5rem !important;
    font-size: 0.9rem;
}
.stacked-input-table thead > tr > th,
.stacked-input-table tbody > tr > th, 
.stacked-input-table tbody > tr > td{
    text-align: center;
}
.stacked-input-table thead > tr > th:first-child{
    padding-left: 1.5rem !important;
    text-align: left;
}
.stacked-label{
    font-weight: 500;
    font-size: 0.9rem;
    flex-grow: 1 !important;
}
.form-wrap.form-builder .frmb li.form-field{
    border : 2px solid var(--input-border) !important;
    padding : 16px !important;
    margin-bottom: -2px !important;;
}
.form-wrap.form-builder .frmb li.form-field:first-child
{
    border-top-right-radius: 8px !important;
    border-top-left-radius: 8px !important
}
.form-wrap.form-builder .frmb li.form-field:last-child
{
    border-bottom-right-radius: 8px !important;
    border-bottom-left-radius: 8px !important
}
.form-wrap.form-builder .frmb .field-label, .form-wrap.form-builder .frmb .legend{
    margin-bottom: 0.2rem !important;
    font-weight: 500 !important;
    color: var(--black) !important;
}
.form-wrap.form-builder .frmb li.form-field:hover{
    border : 2px solid var(--input-border) !important;
    padding : 16px !important;
    box-shadow : 0 0 0 0.25rem var(--background) !important;
}
.form-wrap.form-builder .frmb-control li
{
    box-shadow: inset 0 0 0 2px var(--input-border) !important;
    margin: -2px 0 -1px 0 !important;
}
.form-wrap.form-builder .frmb-control{
    margin-top: 2px !important;
}
.editor{
    margin-top: 10px;
}
.form-wrap.form-builder .frmb .field-actions .btn{
    border-color: var(--input-border) !important;
}
.form-wrap.form-builder .frmb .field-actions .del-button:hover{
    background-color: var(--danger) !important;
}
.form-wrap.form-builder .frmb .field-actions .toggle-form:hover{
    background-color: var(--primary) !important;
}
.form-wrap.form-builder .frmb .field-actions .copy-button:hover{
    background-color: var(--success) !important;
}
.field-actions a.btn{
    box-shadow: none !important;
}
.form-wrap.form-builder .frmb .field-label, .form-wrap.form-builder .frmb .legend{
    font-weight: 500;
    color: var(--black);
}
.form-wrap.form-builder.formbuilder-embedded-bootstrap .form-control{
    line-height: 2.125 !important;
    border : 1px solid var(--input-border) !important;
    border-radius: var(--input-radius) !important;
    padding : 0.25rem 1rem !important;
    box-shadow: none !important;
    font-size: inherit !important;
    height: auto !important;
}
.form-wrap.form-builder .frmb .field-actions{
    opacity: 1 !important;
}
.form-wrap.form-builder .frmb li.form-field:hover  .field-actions{
    opacity: 1 !important;
}
.form-wrap.form-builder .frmb li.deleting, .form-wrap.form-builder .frmb li.delete:hover, .form-wrap.form-builder .frmb li:hover li.delete:hover{
    background-color: var(--faint-gray) !important;
}
.form-wrap.form-builder .frmb .form-elements{
    background-color: var(--background) !important;
    border-color: var(--input-border) !important;
    padding: 10px !important;
}
.form-wrap.form-builder .frmb .form-field em{
    font-size: 0.8rem;
    color: var(--gray);
}
.form-wrap.form-builder .frmb li.form-field.has-form-error, .form-wrap.form-builder .frmb li.form-field.has-form-error:hover{
    background-color: var(--faint-gray) !important;;
    border-color: var(--danger) !important;
}
/**
 * Global Messaging
 */
#global-messages .modal-header .icon{
    background-color: var(--white);
    color: var(--warning);
}
#global-messages .modal-header.error .icon{
    color: var(--danger);
}
#global-messages .modal-header.success .icon{
    color: var(--success);
}
#global-messages .modal-header{
    background-color: var(--warning-dark) !important;
    color: var(--white);
}
#global-messages .modal-header.success{
    background-color: var(--success) !important;
}
#global-messages .modal-header.error{
    background-color: var(--danger) !important;
}
#global-messages .modal-header.notice .error-header, 
#global-messages .modal-header.notice .success-header, 
#global-messages .modal-header.error .success-header, 
#global-messages .modal-header.error .notice-header, 
#global-messages .modal-header.success .error-header, 
#global-messages .modal-header.success .notice-header{
    display: none;
}
#global-messages .message{
    padding: 9px 16px;
    display: block;
    max-width : 640px;
    width : 100%;
    margin: 0 auto 0.5rem;
    border : 1px solid black;
    border-radius: 0.25rem;
}
#global-messages .message.error{
    background-color: var(--red-faded) !important;
    border-color: var(--red-dark) !important;
    color : var(--red) !important;
}
#global-messages .message::before{
    content: "\e932";
    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    float: left;
    font-size: 1.5rem;
    margin-right: 5px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#global-messages .message.success::before{
    content: "\e931";
}
#global-messages .message.success{
    background-color: var(--success-faded) !important;
    border-color: var(--success-dark) !important;
    color : var(--success-dark) !important;
}
/* Toast */
.app-toast-manager{
    width:100%;
    bottom: 0px;
    height:auto;
    position:fixed;
    display: flex;
    left : 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index : 1000010;
}
.app-toast{
    max-width: 400px;
    min-width: 300px;
    background-color: var(--success-dark);
    color : #fff;
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.4rem;
    -webkit-box-shadow: var(--shadow-xxl);
    -moz-box-shadow: var(--shadow-xxl);
    box-shadow: var(--shadow-xxl);
    margin: 0px 0 15px;
}
.app-toast.danger{
    background-color: var(--danger);
}
.app-toast.warning{
    background-color: var(--warning-dark);
}
/* Card Message */
.card-message{
    text-align: center;
    max-width: 300px;
    width: 100%;
    margin: auto;
    background-color: var(--white);
    border-radius: 0.4rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
.card-message .icon-container{
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    background-color: var(--success);
    color: var(--white);
    border-top-right-radius: 0.4rem;
    border-top-left-radius: 0.4rem;
}
.card-message.danger .icon-container{
    background-color: var(--danger);
}
.card-message .message{
    min-height: 150px;
    padding: 3rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.card-message .message p{
    color: var(--gray);
    font-size: 0.95rem;
}
.card-message .message p:last-child{
    margin-bottom: 0;
}
.card-message .message a{
    color: var(--danger) !important;
    font-weight: 600;
}
/* Frontend Users */
.guest.user #logo{
    max-width: 100px;
    max-height: 100px;
}
.guest.user main .generic-container{
    max-width: 1600px;
    margin: auto;
    width: 100%;
}
.guest.user main .generic-container.slim{
    max-width: 1200px;
}
.guest.user main .generic-container.extra-slim{
    max-width: 700px;
}
.program-image{
    text-align: center;
    margin-bottom: 1rem;
}
.program-image img{
    max-height: 135px;
}
.program-description, .description{
    text-align: justify;
}
.program-description li, .description li{
    margin-bottom: 0.5rem;
}
.frontend-form{
    background-color: var(--faint-gray);
    padding: 2rem;
    border: 1px solid var(--input-border);
    border-radius: 0.5rem;
}
.form-title{
    text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 2rem;
}
/** Application */
.application{
    background-color: var(--background);
    overflow: hidden;
}
.application .main-content{
    width: 100%;
    padding : 0px;
}
.application .generic-container.slim{
    max-width: 1200px;
    margin : auto
}
.application #main-content{
    margin: 0;
    padding: 0;
    height: calc(100vh - var(--application-header-height) - var(--application-progress-height));
    height: calc(var(--vh, 1vh) * 100 - var(--application-header-height) - var(--application-progress-height));
}
.application  .inner-content{
    padding-top : 24px;
    padding-bottom: 60px;
    max-width: 1200px;
    margin: auto;
}
.application .main-content .header{
    background-color: var(--white);
    width: 100%;
    max-width: 100%;
    height: var(--application-header-height);
}
.application .steps-container{
    width: 100%;
    height: var(--application-progress-height);
    display: flex;
    align-items: center;
    justify-content: center;
}
.application .steps-container .steps{
    max-width: 1200px;
    width: 100%;
    margin: auto;
}
.application .steps-container .step{
    font-size: 10px;
    color: var(--gray);
    font-weight: 500;
    cursor: pointer;
    position: relative;
    flex: 1;
}
.application .steps-container .step::before{
    position: absolute;
    content: "";
    border-bottom: 2px solid var(--gray);
    width: 100%;
    top: 5px;
    left: -50%;
    z-index: -2;
}
.application .steps-container .step::after{
    position: absolute;
    content: "";
    border-bottom: 2px solid var(--gray);
    width: 100%;
    top: 5px;
    left: 50%;
    z-index: -2;
}
.application .steps-container .step.selected::after{
    border-bottom: 2px solid var(--primary) !important;
    z-index: -1;
}
.application .steps-container .step:first-child::before {
    content: none;
}
.application .steps-container .step:last-child::after {
    content: none;
}
.application .steps-container .step-indicator{
    display: inline-block;
    margin: 0;
    height: 12px;
    width: 12px;
    border : 1px solid var(--gray);
    border-radius: 50%;
    background-color: var(--gray);
}
.application .steps-container .step-text{
    line-height: 1;
}
.application .steps-container .step.selected .step-indicator
{
    border : 1px solid var(--primary);
    background-color: var(--primary);
}
.application .steps-container .step.selected{
    color: var(--black);
    font-weight: 500;
    cursor: default;
}
.application .steps-container .step.error .step-indicator{
    background-color: var(--red) !important;
    border-color: var(--red) !important;
}
.application .steps-container .step.error{
    color: var(--red-dark) !important;
}
.application .program-image{
    margin: 0;
}
.application .program-image img{
    max-height: 50px;
}
.application #logo{
    max-width: 100px;
    max-height: 100px;
}
.application .page-actions{
    margin-top: 3rem;
}
.question-container{
    margin-bottom: 1.5rem;
}
.question-label{
    display: block;
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
    line-height: 1.75;
    font-weight: 500;
}
.checkbox-list label{
    display: block;
    font-size: 1rem;
    margin-bottom: 0.15rem;
    line-height: 1.5;
    font-weight: 400;
    padding : 0.1rem 0.1rem 0.25rem;
}
.checkbox-list label::after{
    content: none !important;
}
.question-container .form-check-input{
    margin-left: -0.05rem;
    margin-right: 0.75rem;
}
.question-container .form-check-input:checked{
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='miter' stroke-width='1.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.question-container .form-check-input:checked{
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='miter' stroke-width='1.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.question-container .form-check-input{
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    border-color: var(--gray);
    margin-top: 0.175rem;
}
.question-container .form-check:not(.form-switch){
    padding : 0.1rem 0.1rem 0.25rem;
}
.question-container .form-group.other-group, .question-container .form-group.extra-group{
    margin-bottom: 0.25rem;
}
.question-container .form-group.extra-group label{
    font-size: 0.9rem;
    font-weight: 600;
}
.question-container.stacked .form-group-label{
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
.question-container.stacked .form-group-label .form-label{
    font-size: 0.9rem;
}
.question-container.stacked{
    margin-bottom: 1rem;
}
/**
 *
 */
.otp{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.otp-control{
    max-width: 40px;
    text-align: center;
    border-radius: 0 !important;
    font-weight: 600;
    text-transform: uppercase;
}
.otp-control:first-child{
    border-top-left-radius: var(--input-radius) !important;
    border-bottom-left-radius: var(--input-radius) !important;
}
.otp-control:last-child{
    border-top-right-radius: var(--input-radius) !important;
    border-bottom-right-radius: var(--input-radius) !important;
}
.otp-lg .otp-control{
    max-width: 60px;
    line-height: 3.125rem !important;
    font-size: 1.15rem;
    padding-left: 1.875rem 0.25rem;
}
.selectable-list .selectable{
    border-bottom-width: 0;
}
.selectable{
    border : 1px solid var(--input-border);
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--white);
}
.selectable .icon{
    color: var(--white);
}
.selectable-list .selectable:last-child, .selectable-list .selectable.last-child{
    border-bottom-width: 1px;
    border-bottom-left-radius: var(--input-radius);
    border-bottom-right-radius: var(--input-radius);
}
.selectable-list .selectable:first-child, .selectable-list .selectable.first-child{
    border-top-left-radius: var(--input-radius);
    border-top-right-radius: var(--input-radius);
}
.selectable-list.disabled .selectable{
    color: var(--gray);
    cursor: not-allowed;
}
.selectable.selected, .selectable-list.disabled .selectable.selected{
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
    cursor: default;
}
.selectable.selected .icon{
    color: var(--highlight);
}
/**
 * Program
 */
.program-wrapper{
    width: 100%;
    height: 800px;
    max-width: 1200px;
    max-height: 800px;
    background-color: var(--white);
    border-radius: 20px;
    margin: 0 15px;
}
.program-wrapper.mobile{
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    width: 100vh;
    width: calc(var(--vw, 1vw) * 100);
    max-width: 100vw;
    max-width: calc(var(--vw, 1vw) * 100);
    max-height: 100vh;
    max-height: calc(var(--vh, 1vh) * 100);
    border-radius : 0px;
    margin: 0;
}
.program-menu{
    height: 100px;
    border-top : 1px solid var(--program-gray);
    padding : 0 1rem;
}
.program-header{
    overflow: hidden;
    min-height: 81px;
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid var(--program-gray);
}
.program-header-inner{
    margin: auto;
    max-width: 900px;
    padding: 0px 24px;
}
.program-user{
    font-size: 13px;
}
.program-name{
    font-size : 11px;
}
.program-content{
    overflow: hidden;
    max-width: 900px;
    width: 100%;
    margin: auto;
    padding: 0px 20px 0px;
}
.program-inner-content{
    overflow: hidden;
    width: 100%;
    padding : 20px 5px 80px;
}
.program-menu-item{
    height: 100px;
    min-width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--black);
    margin: 0 ;
    border : 0.5px solid var(--program-gray);
    border-width : 0 0.5px;
}
.program-wrapper.mobile .program-menu-item{
    min-width: 80px;
    width: 80px;
}
.program-menu-item .icon{
    font-size : 28px;
    line-height: 1;
}
.program-menu-item .menu-text{
    font-size : 10px;
    display: block;
}
.program-wrapper.mobile .program-menu-item .menu-text{
    /* display: none; */
    text-align: center;
}
.program-snippet{
    background-color: var(--program-gray);
    padding: 12px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
}
.program-snippet h5{
    font-size: 1rem;
    margin-bottom: 0.3rem;
}
.program-snippet .text-muted{
    color: var(--program-muted);
    font-size: 0.8rem;
}
.img-container{
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.program-header .img-container{
    width: 64px;
    height: 64px;
    background-color: var(--program-gray);
    border-radius: 32px;
    margin-right: 10px;
}
.program-header img{
    max-width: 40px;
    height: auto;
    max-height: 40px;
    width: auto;
}
.program-snippet .img-container{
    width: 50px;
    height: 50px;
}
.date-container{
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    min-width: 50px;
    flex-direction: column;
    line-height: 1;
}
.date-container .day{
    font-weight: bold;
    font-size : 1.9rem;
    margin-bottom: 0px;
    color: var(--secondary);
    line-height: 1;
}
.date-container .month{
    font-weight: 500;
    font-size : 12px;
}
.program-snippet img{
    max-width: 50px;
    max-height: 50px;
}
.program-snippet strong{
    font-weight: 500;
}
.program-account, .blank-container{
    background-color: var(--primary);
    color: var(--white) !important;
    display: inline-block;
    height: 40px;
    width: 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.blank-container{
    background-color: transparent;
}
.small-snippet{
    max-width : 450px;
    margin: 20px auto;
    border : 1px solid var(--program-gray);
    border-radius: 20px;
    padding : 30px;
}
.snippet-icon{
    background-color: var(--white);
    height: 32px;
    width: 32px;
    min-width: 32px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary) !important;
    line-height: 1;
}
.snippet-icon .icon{
    font-size: 20px;
}
.program-account .icon{
    font-size: 24px;
}
.section-container{
    border : 1px solid var(--light-gray);
    margin: 0 0 10px;
    border-radius: var(--table-border-radius);
}
.section-container .body{
    padding: 1rem 1.5rem;
    border-top : 1px solid var(--light-gray);
    display: none;
}
.section-container .action-container{
    min-width: 40px;
    align-items: center;
    display: flex;
    justify-content: center;
}
.section-container .action-container .icon{
    font-size: 20px;
}
.section-container .form-group{
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
}
.section-container .form-group .form-control{
    border-radius: 0;
    border-width: 0 1px;
}
.section-container .form-group:last-child{
    margin-bottom: 0px;
}
.section-container .head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.5rem;
    color: var(--primary);
    font-weight: 500;
    background-color: var(--faint-gray);
    border-radius: var(--table-border-radius);
}
.section-container .head .actions .icon{
    display: inline-block;
    width: 30px;
    height: 30px;
    font-size: 18px;
    background-color: var(--primary);
    margin-left: 5px;
    border-radius: 50%;
    color: var(--white);
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}
.section-container .head .actions .icon.danger{
    background-color : var(--danger)
}
.section-container .head .actions .icon.success{
    background-color : var(--success)
}
.section-container .head .actions .icon.blue{
    background-color : var(--blue)
}
.section-container.show .body{
    display: block;
}
.section-container.show .head{
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
@media (max-width: 991px) {
    .widget-body{
        height: auto;
    }
    .action-buttons{
        min-width: 120px;
    }
    .main-content{
        width: calc(100vw);
        width: calc(var(--vw, 1vw) * 100);
        padding : 0 15px;
    }
    .header-container{
        background-color: var(--primary);
        margin: 0 -15px;
        padding : 5px 15px;
        height: 60px;
    }
    .header-container #logo svg
    {
        max-height: 50px;
        width: auto;
    }
    .main-content .header{
        width: calc(100vw);
        padding: 0 15px;
        height: 50px;
        margin: 0;
        margin-left : -15px;
        overflow: hidden;
        background-color: var(--primary);
        color: var(--white);
    }
    .header-content .btn{
        box-shadow: none !important;
        background-color: var(--primary) !important;
        color: var(--highlight) !important;
        border-color: var(--primary) !important;
    }
    .header-texts{
        max-width: calc(100vw - 160px);
        max-width: calc(var(--vw, 1vw) * 100 - 160px);
    }
    .page-title{
        font-size: 1rem;
        font-weight: 600;
        overflow: hidden;
        margin: 0px !important;
        color: var(--highlight);
    }
    .page-subtitle{
        margin : 0.25rem 0 0;
        font-size: 0.75rem;
    }
    #main-content{
        width: calc(100vw - 15px);
        width: calc(var(--vw, 1vw) * 100 - 15px);
        height: auto;
        position: fixed;
        top : 110px;
        bottom: 0;
        z-index: 19;
        margin-right: -15px;
        padding-right: 15px;
    }
    .main-content .header .btn-icon .iconbtn-text{
        display: none;
    }
    .main-content .header .btn-sm, .main-content .header .btn{
        height: auto !important;
        padding: 0.6rem 0.6rem !important;
        line-height: 1 !important;
    }
    .sidebar{
        width: calc(100vw);
        width: calc(var(--vw, 1vw) * 100);
        position: fixed;
        top : 110.5px;
        bottom: 0;
        display: none !important;
        z-index: 20;
        height: auto;
    }
    .sidebar.visible{
        display: flex !important;
    }
    .sidebar #logo{
        height: 100px;
        display: none !important;
    }
    .sidebar .profile {
        height: auto;
        padding: 0 28px 20px 40px;
    }
    .sidebar #main-nav-container{
        height: calc(100vh - 71px);
        height: calc(var(--vh, 1vh) * 100 - 71px);
        width: 100%;
        padding: 0 28px 0 40px;
    }
    .header-icon{
        width: 36px;
        height: 36px;
        min-width: 36px;
        margin-left: 6px;
        border-width: 2px;
    }
    .header-icon .icon{
        font-size: 16px;
        line-height: 32px;
    }

    .guest .base-container{
        padding: 2.5rem 1.5rem;
    }

    .generic-container.slim{
        padding : 1.5rem;
    }
}