/* overwrite styles */
body {
    letter-spacing: 0.01071em;
}

button.btn-primary:disabled,
button.btn-primary,
button.btn-primary:hover,
button.btn-primary::after,
button.btn-primary::selection,
button.btn-primary::backdrop,
button.btn-primary:focus,
button.btn-primary:checked,
button.ant-btn-primary:disabled,
button.ant-btn-primary,
button.ant-btn-primary:hover,
button.ant-btn-primary::after,
button.ant-btn-primary::selection,
button.ant-btn-primary::backdrop,
button.ant-btn-primary:focus,
button.ant-btn-primary:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

button.ant-btn-primary:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
    box-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2);
}

button.ant-drawer-close {
    margin-right: 1em !important;
}

div.monitor-page-drawer div.ant-drawer-content-wrapper, div.maintlistpage-drawer div.ant-drawer-content-wrapper, div.orgunitspage-drawer div.ant-drawer-content-wrapper {
    width: 50vw !important;
}

div.monitor-page-drawer.ant-drawer.ant-drawer-open.ant-drawer-right, div.maintlistpage-drawer.ant-drawer.ant-drawer-open.ant-drawer-right, div.orgunitspage-drawer.ant-drawer.ant-drawer-open.ant-drawer-right {
    width: auto !important;
}

.anticon .anticon-sync {
    color: var(--primary);
}

.ant-tooltip {
    margin-top: 60px !important;
}

.ui-dropdown-panel {
    margin-top: -3rem;
    color: var(--dark);
}

.rz-sidebar {
    background-color: var(--dark) !important;
}

.panel-menu .navigation-item-wrapper-active:before {
    background-color: var(--primary-color) !important;
}

.panel-menu .navigation-item-link-active {
    font-weight: bolder;
}

/* custom styles */
.footer-addition {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 0 1rem 5px 0;
    z-index: 5;
}

.page-title {
    color: #3f484e;
    font-size: 24px;
    font-family: "Roboto", "Helvetica", "Arial"
}

.highligh-primary{
    color: var(--primary);
}

.page-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 2em;
}

.content-block {
    background-color: var(--white);
    box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.33);
}

.msp-card {
    margin-bottom: 2rem !important; 
    border: 1px solid var(--light);
    box-shadow: 0 0.15rem 0.75rem 0 rgba(41, 46, 51, 0.15) !important;
    padding-bottom: 1rem !important;
}

.msp-card .msp-card-cover {
    height: 145px;
    background-color: var(--secondary);
    color: var(--white);
}

.msp-card:hover .msp-card-cover {
    background-color: var(--primary);
}

.msp-card:hover .ant-card-meta-title {
    color: var(--primary);
}

.msp-card:hover a.msp-card-cover-image img {
    opacity: 0.5;
}

.msp-card .msp-card-cover a.msp-card-cover-icon, a.msp-card-cover-image {
    height: 145px;
    width: 100%;
    display: block;
    text-align: center;
}

.msp-card .msp-card-cover a.msp-card-cover-icon {
    padding: 20px;
}

.msp-card .msp-card-cover a.msp-card-cover-image {
    padding: 0;
}

.msp-card .msp-card-cover a.msp-card-cover-icon img {
    height: 105px;
}

.msp-card .msp-card-cover a.msp-card-cover-image img {
    height: 145px;
    width: 100%;
    object-fit: cover;
    object-position: center bottom;
}

.msp-card .ant-card-head {
    background-color: var(--gray);
    color: var(--white);
}

.msp-card:hover .ant-card-head {
    background-color: var(--primary);
}

.msp-card .msp-card-extra, .msp-card .msp-card-extra a, .msp-card .msp-card-extra button {
    font-size: xx-large;
    color: var(--white);
}

.msp-card .msp-card-extra .ant-btn-link {
    padding: 0;
}

.msp-card .ant-card-body {
    background-color: var(--white);
    min-height: 230px;
    position: relative;
}

.msp-card .msp-card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 2.5rem;
    padding: 0 24px;
    color: var(--secondary);
}

.msp-card .msp-card-footer .msp-card-footer-right {
    float: right;
}

.ant-tag.tag-primary {
    background-color: var(--gray);
    color: var(--white);
}

.msp-card:hover .ant-tag.tag-primary {
    background-color: var(--primary);
}

.msp-table-icon .anticon{
    font-size: 1.2rem;
    vertical-align: 0;
}

.form-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 1em;
}

.form-field .form-label {
    color: var(--dark);
    display: flex;
    flex-direction: row;
}

.form-field .form-label .form-label-text {
    margin-right: 5px;
}

.form-field .form-label .form-label-highlight {
    color: var(--danger);
}

.form-field .form-help {
    font-size: 12px;
    color: var(--gray);
}

.panel-container {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.panel-container .panel-title {
    color: var(--primary);
    display: flex;
    flex-direction: row;
    padding-bottom: 1em;
    font-size: 18px;
}

.panel-container .panel-subtitle {
    color: var(--dark);
    display: flex;
    flex-direction: row;
    margin-top: -1.2em;
    padding-bottom: 1em;
    font-size: 16px;
}

.tbl-cell-center {
    text-align: center;
}

.ant-table-summary {
    position: relative;
    z-index: 2;
    background: #fff;
}

    .ant-table-summary > tr > td {
        background: #fafafa;
    }

/* to prevent buttons from being hidden behind the footer bar */
.body {
    padding-bottom: 57px;
}