@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter/Inter-VariableFont_slnt,wght.ttf");
}


body {
    font-family: "Inter";
    margin: 0;
}

.d-none {
    display: none !important;
}
.full-width {
    width: 100% !important;
}

:root {
    --orange: #FF7A00;
    --lilac: #9327FF;
    --lightRed: #FF745E;
    --yellow: #FFC701;
    --lightYellow: #FFE62B;
    --pink: #FF5EB3;
    --lightBlue: #00BEE8;
    --lightOrange: #FFA35E;
    --blue: #0038FF;
    --red: #FF4646;
    --ligthLilac: #6E52FF;
    --green: #1FD7C1;
    --lightPink: #FC71FF;
    --lemon: #C3FF2B;
    --sun: #FFBB2B;
    --darkLilic: #462F8A;
    --darkGray: #2A3647;
    --darkLightBlue: #29abe2;
    --darkBlue: #091931;
}

.btn-filled {
    background-color: var(--darkGray);
    color: white;
    font-size: 16px;
    line-height: 19.2px;
    border: none;
    border-radius: 8px;
    padding: 15px 24px 15px 24px;
    cursor: pointer;
}
.btn-filled:hover {
    background-color: var(--darkLightBlue);
    box-shadow: 0px 4px 4px 0px #00000040;
}
.btn-filled-click {
    background-color: var(--darkBlue);
    box-shadow: 0px 4px 4px 0px #00000040;
    color: white;
    font-size: 16px;
    line-height: 19.2px;
    border-radius: 8px;
    padding: 15px 24px 15px 24px;
}
.btn-outline {
    background-color: white;
    color: var(--darkGray);
    border: solid 2px var(--darkGray);
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    padding: 15px 24px 15px 24px;
    cursor: pointer;
}
.btn-outline:hover {
    color: var(--darkLightBlue);
    border: solid 2px var(--darkLightBlue);
    box-shadow: 0px 4px 4px 0px #00000040;
}
.btn-outline-click {
    background-color: white;
    color: var(--darkBlack);
    border: solid 2px var(--darkBlue);
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    padding: 15px 24px 15px 24px;
}
.btn-create {
    background-color: var(--darkGray);
    color: white;
    font-size: 21px;
    line-height: 25.2px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
}
.btn-create:hover {
    background-color: var(--darkLightBlue);
    box-shadow: 0px 4px 4px 0px #00000040;
}
.btn-create-click {
    background-color: var(--darkBlue);
    color: white;
    font-size: 21px;
    line-height: 25.2px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
}
.btn-add-contact {
    width: 255px;
    background-color: var(--darkGray);
    color: white;
    font-size: 21px;
    line-height: 25.2px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: 12px 16px 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.btn-add-contact:hover {
    background-color: var(--darkLightBlue);
    box-shadow: 0px 4px 4px 0px #00000040;
}
.btn-add-contact-click {
    width: 255px;
    background-color: var(--darkBlue);
    color: white;
    font-size: 21px;
    line-height: 25.2px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: 12px 16px 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.btn-cancel {
    width: 126px;
    background-color: white;
    color: var(--darkGray);
    border: solid 2px var(--darkGray);
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.btn-cancel:hover {
    color: var(--darkLightBlue);
    border: solid 2px var(--darkLightBlue);
    box-shadow: 0px 4px 4px 0px #00000040;
}
.btn-cancel:hover .btn-cancel-icon {
    content: url('../assets/img/icon_close_hover.png');
}


.btn-cancel-click {
    width: 126px;
    background-color: white;
    color: var(--darkGray);
    border: solid 2px var(--darkGray);
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
.btn-add-task {
    width: 162px;
    background-color: var(--darkGray);
    color: white;
    font-size: 21px;
    line-height: 25.2px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: 8px 16px 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px; 
}
.btn-add-task:hover {
    background-color: var(--darkLightBlue);
    box-shadow: 0px 4px 4px 0px #00000040; 
}
.btn-add-task-click {
    width: 162px;
    background-color: var(--darkBlue);
    color: white;
    font-size: 21px;
    line-height: 25.2px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: 12px 16px 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.cancel-cross:hover {
    filter: invert(56%) sepia(76%) saturate(745%) hue-rotate(166deg) brightness(91%) contrast(95%);
}