:root {

	--bs-primary: #6D36D8;
	--bs-primary-rgb: 109,54,216;
	--bs-primary-text-emphasis: #361B6C;
	--bs-primary-bg-subtle: #F0EAFB;
	--bs-primary-border-subtle: #E1D6F7;

	--bs-secondary: #F76C39;
	--bs-secondary-rgb: 247,108,57;
	--bs-secondary-text-emphasis: #944022;
	--bs-secondary-bg-subtle: #FEF0EB;
	--bs-secondary-border-subtle: #FDE1D7;

	--bs-tertiary: #432184;
	--bs-tertiary-rgb: 67,33,132;
	--bs-tertiary-text-emphasis: #211042;
	--bs-tertiary-bg-subtle: #ECE8F2;
	--bs-tertiary-border-subtle: #D9B2E6;

	--bs-text: #2B2B2B;
	--bs-border-color: #D9D9D9;

	--bs-light: #F3F3F3;
	--bs-light-rgb: 243,243,243;

	--bs-gray: #808080;
	--bs-gray-rgb: 128,128,128;
	
	--bs-success: #7DCE85;
	--bs-success-rgb: 125,206,133;

	--bs-danger: #FF5678;
	--bs-danger-rgb: 255,86,120;

	--bs-warning: #FDAE14;
	--bs-warning-rgb: 253,174,20;

}

.bg-light { background-color: var(--bs-light) !important; }
.bg-image { background-size: cover; background-position: center center; background-repeat: no-repeat; }

.image-selector { display: block; border-radius: .5rem; background-color: rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.1); }
.image-selector .preview { background-size: contain; background-position: center center; background-repeat: no-repeat; width: 70px; padding-bottom: 100%; background-color: #FFFFFF; border: 1px solid rgba(0,0,0,.1); border-radius: .5rem; }
.image-selector .button:hover { cursor: pointer; }
.image-selector .buttons { margin: 0; padding: 0; list-style: none; }
.image-selector .buttons li:not(:last-of-type) { margin-bottom: .5rem; }

.file-selector .preview { background-color: rgba(var(--bs-light-rgb), .15); padding: 1rem; border-radius: .25rem; }
.file-selector .preview .file-icon { padding: .5rem .75rem; background-color: white; border-radius: .25rem; }
.file-selector .preview .file-name { font-weight: 600; }
.file-selector .button:hover { cursor: pointer; }
.file-selector .buttons { margin: 0; padding: 0; list-style: none; }
.file-selector .buttons li:not(:last-of-type) { margin-bottom: .5rem; }

.button.loading:after, .btn.loading:after, .content.loading:after { content: '\f110'; font-family: 'Font Awesome 5 Free'; font-weight: bold; margin-left: .5rem; animation: spin 2s linear infinite; display: inline-block; }

@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}