<style type='text/css'>
:root {
    --primary: #222;
    --secondary: #fff;
    --color-button-Default: #DC5612;
    --color-button-Border: #313131;
    --color-button-Override: #ff5722;
    --color-Logo-Scuro: #912414;
    --color-Logo-Chiaro: #e25514;
}

html {
    color: var(--primary);
    background-color: var(--secondary);
}

.btn-primary {
    /*color: #fff !important;
    background-color: var(--color-button-Default) !important;
    border-color: var(--color-button-Default) !important;*/
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
    color: #fff !important;
    background-color: var(--color-button-Override) !important;
    border-color: var(--color-button-Override) !important;
}

.jsPanel {
    font-family: inherit !important;
    max-height: 700px !important; // max height of panel can be adjusted
}

.jsPanel-headerbar {
    background-color: rgb(0, 150, 255);
    height: 38px;
}

.jsPanel-title {
    color: #FFF !important;
    font-family: var(--bs-body-font-family);
    font-variant: none !important;
}

.jsPanel-content {
    overflow: auto !important;
}

.jsPanel-replacement {
    width: fit-content !important;
}

.jsPanel .jsPanel-content {
    font-family: inherit !important;
}

.jsPanel .jsPanel-btn {
    color: #FFF !important;
}

.loader {
    border: 10px solid var(--color-Logo-Scuro);
    border-top: 10px solid var(--color-Logo-Chiaro);
    margin-top: 6% !important;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>
