:root{
    --green1: #142529;
    --green2: #173535;
    --green2-hover: #132929;
    --green2-click: #1e4747;
    --green-active: rgb(85, 183, 177);

    --black: #272727;
    --black-old: #333333;

    --icon-white: #CADAD6;

    --white: #FFFFFF;

    --user-image: #D9D9D9;
    --gray-text: #CADAD6;
    --gray: #828282;
    --gray-main: #C3C3C3;

    --red: #DB5252;
    --red-hover: #ad3131;
    --red-click: #ed4a4a;

    --font-weight-thin: 100;        /* Thin */
    --font-weight-extra-light: 200; /* Extra Light (Ultra Light) */
    --font-weight-light: 300;       /* Light */
    --font-weight-normal: 400;      /* Normal (Regular) */
    --font-weight-medium: 500;      /* Medium */
    --font-weight-semi-bold: 600;   /* Semi Bold (Demi Bold) */
    --font-weight-bold: 700;        /* Bold */
    --font-weight-extra-bold: 800;  /* Extra Bold (Ultra Bold) */
    --font-weight-black: 900;       /* Black (Heavy) */
}

*{
    font-family: "Inter", sans-serif;
}

body{
    margin: 0;
    padding: 0;
    background-color: var(--black);
}

.loginPage{
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--green1);
    background-image: url("/static/img/bg.png");
    background-position: center;
    background-size: cover;
}

.loginPage .login{
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

.loginPage form{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.loginPage img{
    width: 347px;
}

.loginPage input{
    box-sizing: border-box;
    width: 717px;
    color: var(--gray-main);
    padding: 16px 12px;
    border: none;
    border-radius: 3px;
    outline: none;
    background-color: var(--black);
    box-shadow: 0px 71px 20px 0px rgba(0, 0, 0, 0%), 0px 46px 18px 0px rgba(0, 0, 0, 1%), 0px 26px 15px 0px rgba(0, 0, 0, 5%), 0px 11px 11px 0px rgba(0, 0, 0, 9%), 0px 3px 6px 0px rgba(0, 0, 0, 10%);
    font-size: 14px;
}

.loginPage button{
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    padding: 0;
    margin: 25px 0 0;
    border-radius: 100%;
    background-color: var(--green2);
    border: none;
    outline: none;
    box-shadow: 0px 31px 9px 0px rgba(0, 0, 0, 0%), 0px 20px 8px 0px rgba(0, 0, 0, 2%), 0px 11px 7px 0px rgba(0, 0, 0, 8%), 0px 5px 5px 0px rgba(0, 0, 0, 13%), 0px 1px 3px 0px rgba(0, 0, 0, 15%);
}

.loginPage button img{
    width: auto;
}

div.react-datepicker-wrapper{
    flex: 1;
    display: flex;
    height: 100%;
}

div.react-datepicker__input-container{
    flex: 1;
    display: flex;
}

h2.react-datepicker__current-month{
    color: var(--white);
}

div.react-datepicker__header{
    background-color: var(--green2);
}

div.react-datepicker{
    background-color: var(--green2);
}

div.react-datepicker__day:not([aria-disabled=true]):hover{
    background-color: var(--green-active);
}

div.react-datepicker__day-name, div.react-datepicker__day, div.react-datepicker__time-name{
    color: var(--white);
}

div.react-datepicker__day--keyboard-selected, div.react-datepicker__month-text--keyboard-selected, div.react-datepicker__quarter-text--keyboard-selected, div.react-datepicker__year-text--keyboard-selected{
    background: var(--green2-click);
}

div.react-datepicker__day--selected, div.react-datepicker__day--in-selecting-range, div.react-datepicker__day--in-range, div.react-datepicker__month-text--selected, div.react-datepicker__month-text--in-selecting-range, div.react-datepicker__month-text--in-range, div.react-datepicker__quarter-text--selected, div.react-datepicker__quarter-text--in-selecting-range, div.react-datepicker__quarter-text--in-range, div.react-datepicker__year-text--selected, div.react-datepicker__year-text--in-selecting-range, div.react-datepicker__year-text--in-range{
    background: var(--green-active);
}

div.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, div.react-datepicker__month-text--in-range, div.react-datepicker__quarter-text--in-range, div.react-datepicker__year-text--in-range){
    background: var(--green-active);
}