:root {
    --blue-text: #364878;
}

.grey-text { color: #788799 !important; }
.blue-text { color: var(--blue-text) !important; }
.red-text { color: #EC4C72 !important; }
.btn-blue { background-color: var(--blue-text) !important; }
.btn-blue2 { background-color: #4C90EC !important; }
.btn-red { background-color: #EC4C72 !important; }
.btn-yellow { background-color: #ffb870 !important; }

.color-ch-ringan { color: #25C685; opacity: .5; }
.color-ch-sedang { color: #F2EA34; opacity: .5; }
.color-ch-lebat { color: #E3A300; opacity: .5; }
.color-ch-sangatlebat { color: #E30000; opacity: .5; }
.color-ch-ekstrem { color: #E30096; opacity: .5; }

.progress { background-color: #EFF4FA; }
.progress .determinate { background-color: #4C90EC; }

.pagination li.active { background-color: var(--blue-text); }

.red-warning {
    color: #EC4C72;
    background-color: #FAEFEF;
    border: 1px solid #EC4C72;
    width: 100%;
    padding: 10px;
    border-radius: 8px;
}
.red-warning i {
    font-size: 20px;
    cursor: pointer;
}

.capsule-blue {
    color: #4C90EC;
    background-color: #EFF4FA;
}
.capsule-green {
    color: #76EC4C;
    background-color: #EFFAF3;
}
.capsule-red {
    color: #EC4C72;
    background-color: #FAEFEF;
}
.capsule-purple {
    color: #7F4CEC;
    background-color: #F0EFFA;
}
.capsule-darkgrey {
    color: white;
    background-color: #788799;
}

.waves-effect.waves-blue .waves-ripple {
    background-color: rgba(76, 144, 236, 0.65);
}