@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

:root {
    --sidebar-width: 240px;
    --sidebar-sm-width: 80px;
    --nav-width: 68px;
    --first-color: #4723D9;
    --first-color-light: #AFA5D9;
    --white-color: #F7F6FB;
    --body-font: 'Nunito', sans-serif;
    --normal-font-size: 1rem;
    --z-fixed: 100;
    --primary-color: #006CB0;
    --info-color: #1090E0;
    --success-color: #00BEA0;
    --danger-color: #FF3D27;
    --default-color: #f3f3f3f3;
    --light-color: #fafafa;
    --second-light-color: #EFF2F5;
    --warning-color: #FFBF00;
    --content-background-color: #FAFCFF;
    --text-color: #003252;
}

.auth-btn {
    color: white;
    background-color: var(--primary-color);
    margin-left: 1px;
}

.auth-btn:hover {
    color: white;
    background-color: var(--primary-color);
    margin-left: 1px;
}

.btn-submit {
    color: white;
    background-color: var(--success-color);
    margin: 1px 1px 1px 1px;
}

.btn-submit:hover {
    color: white;
    background-color: var(--success-color);
    margin: 1px 1px 1px 1px;
}

.btn-export {
    color: var(--info-color);
    margin: 1px 1px 1px 1px;
    border: 1px solid var(--info-color);
    border-radius: 50%;
    font-size: 20px;
}

.btn-export:hover {
    color: var(--info-color);
    margin: 1px 1px 1px 1px;
    border: 1px solid  var(--info-color);
    border-radius: 50%;
    font-size: 20px;
}

.btn-cancel {
    color: var(--primary-color);
    background-color: var(--second-light-color);
    margin: 1px 1px 1px 1px;
}

.btn-cancel:hover {
    color: var(--primary-color);
    background-color: var(--second-light-color);
    margin: 1px 1px 1px 1px;
}

.btn-save-draft {
    color: white;
    background-color: var(--info-color);
    margin: 1px 1px 1px 1px;
}

.btn-save-draft:hover {
    color: white;
    background-color: var(--info-color);
    margin: 1px 1px 1px 1px;
}

.btn-add {
    color: var(--text-color);
    background-color: var(--default-color);
    margin: 1px 1px 1px 1px;
}

.btn-add:hover {
    color: var(--default-color);
    background-color: var(--primary-color);
    margin: 1px 1px 1px 1px;
}

.btn-add-border-sm {
    color: var(--text-color);
    background-color: white;
    border: 1px solid var(--text-color);
    font-size: small;
    margin: 1px 1px 1px 1px;
    padding: 1px 8px 1px 8px;
    border-radius: 5px;
}

.btn-add-border-sm:hover {
    color: var(--text-color);
    background-color: var(--second-light-color);
    margin: 1px 1px 1px 1px;
    padding: 1px 8px 1px 8px;
    border: 1px solid var(--text-color);
    font-size: small;
    border-radius: 5px;
}

.btn-default {
    color: var(--text-color);
    background-color: var(--default-color);
    margin: 1px 1px 1px 1px;
}

.btn-default:hover {
    color: var(--text-color);
    background-color: var(--default-color);
    margin: 1px 1px 1px 1px;
}


.btn-delete {
    color: white;
    background-color: var(--danger-color);
    margin: 1px 1px 1px 1px;
}

.btn-delete:hover {
    color: white;
    background-color: var(--danger-color);
    margin: 1px 1px 1px 1px;
}


.dropdown-icon-btn {
    transition: transform 0.2s ease;
}

.dropdown-icon-btn.rotate {
    transform: rotate(-180deg);
}

.delete-icon {
    cursor: pointer;
    color: var(--danger-color);
}

.add-icon {
    cursor: pointer;
    color: var(--success-color);
}

.success-icon-circle {
    color: var(--success-color);
    border: 1px solid var(--success-color);
    border-radius: 50%;
    padding: 4px;
    cursor: pointer;
}

.delete-icon-circle {
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
    border-radius: 50%;
    padding: 4px 6px 4px 6px;
    cursor: pointer;
}

.info-icon {
    cursor: pointer;
    color: var(--info-color);
    font-size: 16px;
}

.gray-icon {
    cursor: pointer;
    color: rgb(124, 124, 124);
}

.edit-icon {
    cursor: pointer;
    color: var(--info-color);
}

.btn-info-bordered {
    color: var(--info-color);
    background-color: whitesmoke;
    margin: 1px 1px 1px 1px;
    border: 1px solid var(--info-color);
}

.btn-info-bordered:hover {
    color: white;
    background-color:  var(--info-color);
    margin: 1px 1px 1px 1px;
    border: 1px solid var(--info-color);
}

.btn-info-bordered:active {
    color: white;
    background-color:  var(--info-color);
    margin: 1px 1px 1px 1px;
    border: 1px solid var(--info-color);
}

.btn-info-bordered-active {
    color: white;
    background-color:  var(--info-color);
    margin: 1px 1px 1px 1px;
    border: 1px solid var(--info-color);
}