:root {
    --header-footer-bg-color: #364150;
    --header-footer-text-color: #c6cfda;
    --btn-link-color: #8cb436;
    --btn-link-text-color: #fafafa;
    --bloc-rappelimpaye-color: #ed1c24;
    --bloc-bonnesituation-color: #32cd32;
    --bloc-afaire-color: #ff7f27;
    --bloc-evenementsavenir-color: #af88c0;
    --bloc-evenementsrecents-color: #44b9b6;
}

a, a.link, a:focus, a:hover {
    text-decoration: none;
}

.mdl-color--primary {
    background-color: var(--header-footer-bg-color) !important;
    color: var(--header-footer-text-color) !important;
}
.mdl-button {
    background-color: var(--btn-link-color) !important;
    color: var(--btn-link-text-color) !important;
}
.mdl-checkbox {
    text-align: left;
}
.mdl-color-text--primary {
    color: var(--btn-link-color) !important;
}

.mdl-text--underline {
    text-decoration: underline;
}

.mdl-layout-title {
    text-align: center;
    padding: 20px;
}

.mdl-tooltip {
    font-size: 14px;
    line-height: 18px;
}

.mdl-card__actions, .mdl-grid {
    padding: 0;
}

.aideTooltip {
    vertical-align: top;
    font-size: 60%;
}

.menuTooltip {
    vertical-align: top;
    font-size: 70%;
}

.chckbox-text {
    display: table !important;
}

.demo-ribbon {
    width: 100%;
    height: 25vh;
    background-color: var(--header-footer-bg-color);
    color: var(--header-footer-text-color);
    flex-shrink: 0;
}

.demo-main {
    margin-top: -20vh;
    flex-shrink: 0;
}

.demo-header .mdl-layout__header-row {
    padding-left: 40px;
    text-align: center;
}

.demo-container {
    max-width: 1600px;
    width: calc(100% - 16px);
    height: calc(100% - 66px);
    margin: 0 auto;
}

.demo-content {
    border-radius: 2px;
    padding: 10px 30px;
    margin-bottom: 20px;
    text-align: center;
}

.demo-layout.is-small-screen .demo-content {
    padding: 20px 28px;
}

.validation-summary-errors ul li {
    color: #b53636;
}


.demo-footer {
    background-color: var(--header-footer-bg-color);
    color: var(--header-footer-text-color);
}

.demo-footer .mdl-mini-footer--link-list a {
    font-size: 13px;
}

.demo-footer .mdl-mini-footer--right-section a {
    font-size: 25px;
    color: var(--header-footer-text-color);
}

@media (max-width: 759px) {
    .demo-footer {
        padding: 21px 40px !important;
    }
}

@media (min-width: 760px) {
    .demo-footer {
        padding: 15px 40px !important;
    }
}

.message-razor {
    color: #315FDE;
    font-size: 25px;
}