:root {
    --primary-color: black;
    --hover-primary-color: white;

    --primary-heading: #218838;

    --primary-background-color: green;
    --hover-primary-background-color: #2e4255;

    --primary-text: 14px;
    --main-heading: 20px;
    --sub-heading: 17px;

    --main-font-family: tahoma helvetica;

    --main-border: 1px solid var(--primary-background-color);

    /* optional */
    --sidebar-background-color: green;
    --sidebar-primary-color: white;
}

.form-control:focus {
    border-color: var(--sidebar-background-color); 
}

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

.hover-primary-color {
    color: var(--hover-primary-color) !important;
}

.primary-background-color {
    background-color: var(--primary-background) !important;
}

.hover-primary-background-color {
    background-color: var(--hover-primary-background-color) !important;
}

.primary-text {
    font-size: var(--primary-text) !important;
}

.main-heading {
    font-size: var(--main-heading) !important;
}

.sub-heading {
    font-size: var(--sub-heading) !important;
}

.font-family {
    font-family: var(--main-font-style) !important;
}

.border {
    border: var(--main-border) !important;
}

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

.sidebar-primary-color {
    color: var(--sidebar-primary-color) !important;
}

button:hover{
    cursor: pointer;
}

.sampati-primary-button{
    color: var(--sidebar-primary-color);
    background-color: var(--primary-background-color);
}
.sampati-primary-button:hover{
    color: var(--primary-color);
    background-color: var(--hover-primary-color);
}