:root {
    --brand-primary: #FFD600;
    --brand-primary-40: #ffd6006e;
    --brand-secondary: #33691E;
    --brand-secondary-light: #2c8908;
    --brand-dark: #263238;
    --brand-default: #ccc;
    --brand-dialog-header-colour: #FFD600;
    --brand-dialog-header-text-colour: #263238;
    --mandatory-question-border: #ffd08a;
}

body {
    background-color: var(--brand-dark) !important;
}

.secondary-border > .mud-input-control-input-container > .mud-input-outlined > input:focus ~ .mud-input-outlined-border {
    border-color: var(--brand-secondary) !important;
}

.secondary-border > .mud-input-control-input-container:focus-within label {
    color: var(--brand-secondary) !important;
}

.secondary-border > .mud-input-control-input-container > .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--brand-secondary) !important;
}

.secondary-border > .mud-input-input-control > .mud-input-control-input-container > .mud-input-outlined > .mud-input-root-outlined:focus ~ .mud-input-outlined-border {
    border-color: var(--brand-secondary) !important;
}

.brand-dialog-header .mud-dialog-title {
    background-color: var(--brand-dialog-header-colour);
    color: var(--brand-dialog-header-text-colour);
    margin: 0;
    padding-right: 5em !important;
    font-weight: 500;
}

.mud-drop-item {
    transition: 0.2s ease-out;
}

    .mud-drop-item:hover > .mud-paper {
        box-shadow: 0px 1px 10px 0px var(--brand-primary-40) !important;
        /*box-shadow: 0px 2px 4px -1px var(--brand-primary-20), 0px 4px 5px 0px var(--brand-primary-20), 0px 1px 10px 0px var(--brand-primary-20) !important;*/
    }

.unsaved-changes-cont {
    background: linear-gradient(-45deg, var(--brand-primary-40) 40%, var(--brand-primary) 50%, var(--brand-primary-40) 60%);
    background-size: 300%;
    background-position-x: 100%;
    padding: 0.5em;
    margin-right: 3em;
    border-radius: 4px;
    animation: pending-changes-shimmer 5s infinite ease-in-out;
}

.unsaved-changes-template {
    background: linear-gradient(-45deg, #b3b3b36e 40%, var(--brand-primary) 50%, #b3b3b36e 60%);
    background-size: 300%;
    background-position-x: 100%;
    padding: 0.5em;
    margin: 0;
    border-radius: 4px;
    animation: pending-changes-shimmer 5s infinite ease-in-out;
}

@keyframes pending-changes-shimmer {
    0% {
        background-position-x: 100%;
    }

    30% {
        background-position-x: 100%;
    }

    50% {
        background-position-x: 0%;
    }

    100% {
        background-position-x: 0%;
    }
}