:root {
    --bg-primary: #1c2128;
    --bg-secondary: #22272e;
    --bg-terniary: #343c45;
    --text-primary: #768390;
    --border-radius: 2em;
    --border-color: #444c56
}

html {
    font-family: Sans-serif, serif !important;
    background: var(--bg-primary);
    color: var(--text-primary);
}

body {
    margin: 0;
}

a {
    text-decoration: none !important;
}

h2{
    margin-top: 0;
    margin-bottom: 0;
}

.main-content {
    min-height: calc(100vh - 21em);
    margin: 1.75em;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: var(--border-color) solid 1px;
}


.header {
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: var(--border-color) solid 1px;
    text-align: center;
}

.footer-wrapper, .header-wrapper {
    margin: 1.75em;
}

.footer {
    padding: 1.75em;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: var(--border-color) solid 1px;
}

.card, .card-nohover {
    min-height: 200px !important;
    border-radius: var(--border-radius) !important;
    background: var(--bg-primary) !important;
    color: ghostwhite !important;
    transition: transform 250ms !important;
}

.card:hover {
    transform: scale(1.03) !important;
    box-shadow: 0 4px 5px -2px rgb(0 0 0 / 20%), 0 7px 10px 1px rgb(0 0 0 / 14%), 0 2px 16px 1px rgb(0 0 0 / 12%) !important;
}

.card-content {
    height: 150px;
}

.gradient-red {
    background: var(--bg-primary) !important; /* fallback for old browsers */
    background: -webkit-linear-gradient(45deg, var(--bg-primary) 50%, rgba(255, 0, 0, 0.2) 100%) !important; /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(45deg, var(--bg-primary) 50%, rgba(255, 0, 0, 0.2) 100%) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border: 1px solid rgba(255, 0, 0, 0.3);
}

.gradient-green {
    background: var(--bg-primary) !important; /* fallback for old browsers */
    background: -webkit-linear-gradient(45deg, var(--bg-primary) 50%, rgba(0, 128, 0, 0.2) 100%) !important; /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(45deg, var(--bg-primary) 50%, rgba(0, 128, 0, 0.2) 100%) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border: 1px solid rgba(0, 128, 0, 0.3);
}

.gradient-blue {
    background: var(--bg-primary) !important; /* fallback for old browsers */
    background: -webkit-linear-gradient(45deg, var(--bg-primary) 50%, rgba(0, 0, 255, 0.2) 100%) !important; /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(45deg, var(--bg-primary) 50%, rgba(0, 0, 255, 0.2) 100%) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border: 1px solid rgba(0, 0, 255, 0.3);
}

.gradient-yellow {
    background: var(--bg-primary) !important; /* fallback for old browsers */
    background: -webkit-linear-gradient(45deg, var(--bg-primary) 50%, rgba(255, 255, 0, 0.2) 100%) !important; /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(45deg, var(--bg-primary) 50%, rgba(255, 255, 0, 0.2) 100%) padding-box !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border: 1px solid rgba(255, 255, 0, 0.3);
}

.blockinput {
    margin-left: auto;
    margin-right: auto;
    max-width: 50em;
}

.field {
    margin-bottom: 0.5em;
}

body .ui-inputfield{
    background: var(--bg-primary);
    color: ghostwhite;
    border: var(--border-color) solid 1px;
}

body .ui-inputfield.ui-state-focus {
    border-color: #606B79FF;
    box-shadow: none;
}

body .ui-inputfield.ui-state-hover {
    border-color: #606B79FF;
}

body .ui-inputfield.ui-state-error {
    border-color: #f44336;
}

body .ui-datepicker {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

body .ui-datepicker .ui-datepicker-header {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 600;
    border: solid var(--border-color);
    border-width: 0 0 1px 0;
    border-radius: 0;
}
body .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a, body .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a {
    background: var(--bg-terniary);
}