.skyblue {
    color: var(--maincolor) !important;
}

.skybluebg {
    background-color: var(--maincolor-border) !important;
    color: #fff;
}

button.skybluebg:hover, button.bluebg:hover, a.skybluebg:hover, a.bluebg:hover {
    background-color: var(--maincolor-hover) !important;
    color: #fff;
}

.bluebg{
    background-color: var(--maincolor-dark-border) !important;
    color: #fff;
}

.skybluebg-50{
    background-color: rgba(128, 216, 254, .5) !important;
    color: #000;
}

.whitebg-50{
    background-color: rgba(255, 255, 255, .5) !important;
    color: #5C5C77;
}

.defaultbg{
    background-color: #5C5C77 !important;
    color: #fff;
}

.graybg{
    background-color: #ddd !important;
    color: #6e6e6e;
}

.btn.defaultbg:hover{
    background-color: #54546d !important;
    color: #fff !important;
}

.bg-border-skyblue{
    background-color: #fff !important;
    color: var(--maincolor-border) !important;
    border: 1px solid var(--maincolor-border) !important;
}

.bg-border-skyblue:hover{
    background-color: var(--maincolor-border) !important;
    color: #fff !important;
}

.text-blue{
    color: var(--maincolor-dark-border) !important;
}

.text-default{
    color: #5C5C77 !important;
}