:root{
    --primary-color: #1db0f2;
    --primary-color-variant: #4ac0f5;
    --secondary-color: #80d3f8;
    --secondary-color-variant: #80d3f8;
    --white: #ffffff;
}

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

.circular_background {
    width: 36px;
    height: 36px;
    background: var(--primary-color);
    padding: 8px;
    text-align: center;
    margin: auto;
    vertical-align: middle;
    border-radius: 50%;
    color: var(--white);
}

.circular_background i {
    color: var(--white);
    top: 50%;
}

.circular_background a:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

.tools_panel {
    background-color: var(--primary-color) !important;
    height: 45px;
    overflow: hidden;
}

.tools_panel a {
    float: left;
    color: var(--white);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.tools_panel i {
    color: var(--white);
}

.tools_panel a:hover {
    background-color: var(--primary-color-variant);
    color: var(--white);
}