:root
{
    /*colors*/
    --blue: #287bff;
    --white: #fff;
    --grey: #f5f5f5;
    --black1: #222;
    --black2: #999;
    --orange: #F4882E;

    /*Breeflee Palette*/
    --breeflee_peach_orange: rgba(255, 163, 104, 1);
    --breeflee_yellow: rgba(255, 185, 72, 1);
    --breeflee_rosa: rgba(254, 109, 115, 1);
    --breeflee_blue_green: rgba(34, 124, 157, 1);
    --breeflee_green: rgba(116, 199, 171, 1);
    --breeflee_green_light: rgba(116, 199, 171, 0.2);
    --breeflee_peach_orange_light: rgba(255, 163, 104, 0.5);

    --breeflee_orange_filer: invert(77%) sepia(12%) saturate(3645%) hue-rotate(317deg) brightness(109%) contrast(105%);
    --breeflee_white_filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(140deg) brightness(106%) contrast(101%);
    --breeflee_gray_filter: invert(83%) sepia(8%) saturate(24%) hue-rotate(348deg) brightness(98%) contrast(91%);

    --grey_black: #191F28;
    --grey_dark: #4A4A4A;
    --grey_medium_dark: #B6B6B7;
    --grey_medium_light: #D8D8D8;
    --grey_light: #F0F0F0;
    --grey_ultra_light: #F8F9FA;

    /*svg Palette*/
    --filter_breeflee_peach_orange: invert(72%) sepia(28%) saturate(1038%) hue-rotate(328deg) brightness(101%) contrast(102%);
    --filter_breeflee_yellow: invert(73%) sepia(14%) saturate(1786%) hue-rotate(354deg) brightness(102%) contrast(101%);
    --filter_breeflee_rosa: invert(59%) sepia(61%) saturate(5743%) hue-rotate(326deg) brightness(122%) contrast(99%);
    --filter_breeflee_blue_green: invert(45%) sepia(23%) saturate(1421%) hue-rotate(150deg) brightness(88%) contrast(89%);
    --filter_breeflee_green: invert(76%) sepia(49%) saturate(276%) hue-rotate(109deg) brightness(86%) contrast(92%);

    --filter_grey_black: invert(8%) sepia(3%) saturate(6978%) hue-rotate(177deg) brightness(96%) contrast(89%);
    --filter_grey_dark: invert(29%) sepia(0%) saturate(4945%) hue-rotate(55deg) brightness(94%) contrast(87%);
    --filter_grey_medium_dark: invert(77%) sepia(0%) saturate(57%) hue-rotate(81deg) brightness(98%) contrast(85%);
    --filter_grey_medium_light: invert(82%) sepia(4%) saturate(7%) hue-rotate(346deg) brightness(105%) contrast(94%);
    --filter_grey_light: invert(99%) sepia(0%) saturate(147%) hue-rotate(128deg) brightness(119%) contrast(88%);
    --filter_grey_ultra_light: invert(100%) sepia(23%) saturate(617%) hue-rotate(177deg) brightness(101%) contrast(95%);

    /*measures and transition*/
    --transition05s: 0.5s;
    --transition0s: 0s;
    --topbar_height: 60px;
    --menu_opened: 200px;
    --menu_closed: 80px;
    --patient_first_col: 25vh;
    --patient_todo_col: 25vh;
    --patient_todo_col_closed: 0vh;
    --padding_half_line: 12px; /*for forms*/
    --input_border_rad: 20px; /*login*/
}


/* SCROLLBAR */

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial' , sans-serif;
    outline: none;
}

img {
    max-height: 100%;
    max-width: 100%;
}

.login_body {
    display: block;
    height: 100vh;
    place-items:center;
    background: radial-gradient(var(--breeflee_yellow), var(--breeflee_peach_orange) );
}

.login_content {
    position: relative;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: transparent;
    width: 600px;
}

.login_logo {
    margin: auto;
    width: 100%;
}

    .login_logo img{
        max-height: 100%;
        max-width: 100%;
        padding: 20px;
    }

.login_formDIV {
    width: 100%;
    background: white;
    padding: 30px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
    border: 4px solid var(--white);
    border-radius: 40px;
}

.login_icon_login {
    width: 250%;
    filter: var(--filter_grey_dark);
}

.login_icon_pssweye {
    width: 150%;
    filter: var(--filter_grey_dark);
    cursor: pointer;
}

.login_input_box{
    display: flex;
    height: 40px;
    width: 100%;
    position: relative;
    margin-top: 20px;
    background: var(--white);
    border-radius: var(--input_border_rad);
    border: 2px solid var(--grey_medium_light);
}

    .login_input_box input{
        height: 100%;
        width: 100%;
        outline: none;
        border-radius: var(--input_border_rad);
        font-size: 17px;
        transition: all 0.3s ease;
        color: var(--grey_dark);
        border: none;
    }

    .login_input_box span {
        width: 80px;
        line-height: 45px;
        padding-inline: 5%;
    }

    .login_input_box:focus-within{
        border: 3px solid var(--breeflee_peach_orange);
    }

.login_submit_button {
    border: 0px;
}

    .login_submit_button input {
        padding-left: 0;
        background: var(--breeflee_peach_orange);
        color: #fff;
        border: none;
        font-size: 20px;
        font-weight: 500;
        cursor: pointer;
    }

    .login_submit_button input:hover{
        background: var(--breeflee_green);
    }

.login_logmesseges {
    text-align: center;
    display: none;
    height: auto;
    width: 100%;
    position: relative;
    margin-top: 20px;
    background: rgba(254, 109, 115, 0.2);
    color: var(--breeflee_rosa);
    border: 0px solid var(--breeflee_rosa);
    padding: 10px 10px 10px 10px;
    justify-content: center;
}

.login_progress {
    display: none;
    height: 40px;
    width: 100%;
    position: relative;
    margin-top: 20px;
    #background: var(--white);
    padding: 10px 0 10px 0;
    justify-content: center;
}

    .login_progress .login_indicator:nth-child(1){
        animation : login_fade 1s ease 0s infinite;
    }

    .login_progress .login_indicator:nth-child(2){
        animation : login_fade 1s ease 100ms infinite;
    }

    .login_progress .login_indicator:nth-child(3){
        animation : login_fade 1s ease 200ms infinite;
    }

    .login_progress .login_indicator:nth-child(4){
        animation : login_fade 1s ease-in-out 300ms infinite;
    }

.login_indicator{
    background-color: var(--breeflee_rosa);
    width : 10px;
    height: 10px;
    border-radius: 10px;
    display: inline-block;
    margin: 10px;
    opacity: 0;
}

@keyframes login_fade {
    0% {
        transform : scale(0.3);
        opacity: 0;
    }
    50% {
        transform : scale(1);
        opacity: 1;
    }
    100% {
        transform : scale(0.3);
        opacity: 0;
    }
}

.center {
    text-align: center;
}

.hidden {
    display: none;
}