/* global remove user-agent styling */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* custom vars */

:root {
    --color-background: #F0F2F5;
    --color-text: #FCFDFF;
    --color-primary: #41414C;
    --color-secondary: #F1972C;
    --color-secondary-hover: #FA9C2D;
    --color-input-background: #F8F8FC;
    --color-button-text: #FFFFFF;
    --color-hairline-in-dark: #4F4F5B;
    --color-hairline-in-light: #E1E3E5;
    --color-card-background: var(--color-text);
    --color-card-title: #5A5A66;
    --color-card-label: #BFBFCC;
    --color-card-content: #787880;
    --color-cancel: #E1E3E5;
    --color-delete: #EB3B35;
    --color-save: #36B336;
    --color-badge-progress-text: var(--color-save);
    --color-badge-progress-background: #E8F8E8;
    --color-badge-done-text: var(--color-delete);
    --color-badge-done-background: #FAECEB;
    --color-header-inner-title: var(--color-card-label)
}


/* tags styling */

body {
    background: var(--color-background);
    font-family: 'Poppins', sans-serif !important;
}

a {
    text-decoration: none;
}

.sweet-alert button.cancel {
    width: 10rem;
    text-transform: uppercase;
    font-size: 13px;
    background-color: #A61F61 !important;
    border-radius: 20px;
    color: #fff;
    border-color: unset !important;
}

.sweet-alert button.cancel:hover {
    width: 10rem;
    text-transform: uppercase;
    font-size: 13px;
    background-color: #552a84 !important;
    color: #fff;
}

.sweet-alert button.confirm {
    color: #fff;
    background-color: #1584ca !important;
    border-radius: 20px;
    width: 10rem;
    text-transform: uppercase;
    font-size: 13px;
    border-color: unset !important;
}

.sweet-alert button.confirm:hover {
    background-color: #552a84 !important;
    color: #fff;
}

.btn-danger {
    width: 10rem;
    text-transform: uppercase;
    font-size: 13px;
    background-color: #A61F61;
    border-radius: 20px;
    color: #fff;
    border-color: unset !important;
}

.btn-danger:hover {
    width: 10rem;
    text-transform: uppercase;
    font-size: 13px;
    background-color: #552a84;
    color: #fff;
}

.btn-nav,
.btn-primary {
    color: #fff;
    background-color: #1584ca;
    border-radius: 20px;
    width: 10rem;
    text-transform: uppercase;
    font-size: 13px;
}

.btn-nav:hover {
    background-color: #552a84;
    color: #fff;
}

.btn-primary:hover {
    background-color: #552a84;
    color: #fff;
}

.dropdown-menu {
    border-radius: 25px;
}

.dropdown-item:hover {
    font-weight: 600;
    background-color: unset;
    color: #552a84;
}


/* basic classes */

.container {
    width: min(1440px, 90vw);
    margin: 0 auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.separator {
    height: 1px;
    background-color: var(--color-hairline-in-dark);
    margin: 1rem 0;
}

.separator.light {
    background-color: #E1E3E5;
}

.flex {
    display: flex;
}

.first_menu {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
    margin-bottom: 4rem;
}