@import url('responsive.css');

* {
    box-sizing: border-box;
}

body {
    font-family     : 'Segoe UI', sans-serif;
    background-color: lightgray;
}


/*меню навигации*/
.nav-menu {
    position        : fixed;
    left            : 0;
    top             : 0;
    width           : 250px;
    background-color: rgb(238, 231, 231);
    height          : 100vh;
    box-shadow      : 5px 5px 5px -5px rgba(34, 60, 80, 0.6);
}

.nav-menu h1 {
    font-size  : 1.5em;
    margin-left: 1.5em;
}

.nav-menu hr {
    margin-top: 1.5em;
}

.nav-menu ol {
    list-style-type    : none;
    line-height        : 3em;
    /* list-style-image: url('../img/edit.png'); */
    /*background-image : url('../img/edit.png');
    background-position: left center;*/
    margin-left        : -1.5em;
}

.nav-menu ol a {
    display        : inline-block;
    text-decoration: none;
    color          : #000;
    transition     : all 0.3s ease-in-out;
    width          : 75%;
}


.nav-menu ol li {
    padding-left: 1.2em;
    margin-right: 1em;
    transition  : all 0.3s ease-in-out;
}

/* цвет для ссылки внутри list item*/
.nav-menu ol li a:hover {
    color: white;
}

.nav-menu ol li:hover {
    background-color: rgb(199, 56, 56);
    color           : white;
}

.active {
    background-color: rgb(231, 140, 140);
}


/**** burger menu *****/
#bm {
    display: none;
}
#burger {
    display: none;
    font-size: 1em;
}

/*
#burger-menu {
    display: none;
}
*/

#bm:checked + #burger-menu {
    display: block;
    width: 250px;
    height: 260px;
}

#burger-menu {
    position: absolute;
    top: 3em;
    left: 2em;
    width: 0;
    height: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 2;
    box-shadow      : 4px 2px 15px 0px rgba(34, 60, 80, 0.6);
    border-radius: 5px;
    transition: all 0.5s ease-in-out;
    overflow: hidden;
}

#burger-menu ol {
    list-style-type    : none;
    line-height        : 3em;
    margin-left        : -1.5em;
}

#burger-menu ol a {
    display        : inline-block;
    text-decoration: none;
    color          : #000;
    transition     : all 0.3s ease-in-out;
    width          : 75%;
}


#burger-menu ol li {
    padding-left: 1.2em;
    margin-right: 1em;
    transition  : all 0.3s ease-in-out;
}

/* цвет для ссылки внутри list item*/
#burger-menu ol li a:hover {
    color: white;
}

#burger-menu ol li:hover {
    background-color: rgb(199, 56, 56);
    color           : white;
}

/**********************************/




/*dashboard*/
.nav-menu ol li:nth-child(1)::before {
    /* content: url('../img/dashboard_gray.svg'); */
    content          : '';
    display          : inline-block;
    vertical-align   : middle;
    height           : 20px;
    width            : 20px;
    background-size  : 20px;
    background-image : url('../img/dashboard_gray.svg');
    background-repeat: no-repeat;
    margin-right     : 1.3em;
    padding-bottom   : 5px;
    transition       : all 0.3s ease-in-out;
}


.nav-menu ol li:nth-child(1):hover::before {
    background-image: url('../img/dashboard_white.svg');
}

/*user profile*/
.nav-menu ol li:nth-child(2)::before {
    content          : '';
    display          : inline-block;
    vertical-align   : middle;
    height           : 20px;
    width            : 20px;
    background-size  : 20px;
    background-image : url('../img/account_gray.svg');
    background-repeat: no-repeat;
    margin-right     : 1.3em;
    padding-bottom   : 5px;
    transition       : all 0.3s ease-in-out;
}

.nav-menu ol li:nth-child(2):hover::before {
    background-image: url('../img/account_white.svg');
}

/*maps*/
.nav-menu ol li:nth-child(3)::before {
    content          : '';
    display          : inline-block;
    vertical-align   : middle;
    height           : 20px;
    width            : 20px;
    background-size  : 20px;
    background-image : url('../img/map_gray.svg');
    background-repeat: no-repeat;
    margin-right     : 1.3em;
    padding-bottom   : 5px;
    transition       : all 0.3s ease-in-out;
}

.nav-menu ol li:nth-child(3):hover::before {
    background-image: url('../img/map_white.svg');
    color           : white;
}

/*notifications*/
.nav-menu ol li:nth-child(4)::before {
    content          : '';
    display          : inline-block;
    vertical-align   : middle;
    height           : 20px;
    width            : 20px;
    background-size  : 20px;
    background-image : url('../img/notify_gray.svg');
    background-repeat: no-repeat;
    margin-right     : 1.3em;
    padding-bottom   : 5px;
    transition       : all 0.3s ease-in-out;
}

.nav-menu ol li:nth-child(4):hover::before {
    background-image: url('../img/notify_white.svg');
    color           : white;
}

/*support*/
.nav-menu ol li:nth-child(5)::before {
    content          : '';
    display          : inline-block;
    vertical-align   : middle;
    height           : 20px;
    width            : 20px;
    background-size  : 20px;
    background-image : url('../img/web_gray.svg');
    background-repeat: no-repeat;
    margin-right     : 1.3em;
    padding-bottom   : 5px;
    transition       : all 0.3s ease-in-out;
}

.nav-menu ol li:nth-child(5):hover::before {
    background-image: url('../img/web_white.svg');
    color           : white;
}




/* Dashboard for width > 1000px */


.dashboard {
    display         : block;
    margin-top      : -15px;
    margin-left     : 245px;
    background-color: lightgray;
    /* min-height   : 120vh; */
    padding-left    : 1.5em;
    padding-right   : 1.0em;
    padding-bottom  : 2em;
    max-width       : 1280px;
}

.dashboard h1 {
    font-size    : 1.3em;
    padding-top  : 0.8em;
    margin-bottom: 3em;
}

/* спрятать "гамбургер"*/
.dashboard h1>img {
    display: none;
}


/*для блоков с 4-мя items*/
.dashboard .items-4 {
    display        : flex;
    justify-content: space-between;

}

.dashboard .items-4>.item-small {
    display         : inline-block;
    /* width        : 225px; */
    width           : 23%;
    min-width       : 190px;
    max-width       : 230px;
    height          : 120px;
    background-color: white;
    margin-right    : 10px;
    box-shadow      : 5px 5px 5px -5px rgba(34, 60, 80, 0.6);
    font-size       : 0.7em;
    line-height     : 1em;
    padding         : 1.2em;
}

/*классы цветов для элементов*/
.bg-green {
    background-color: green;
}

.bg-orange {
    background-color: rgb(180, 122, 14);
}

.bg-navy {
    background-color: rgb(69, 69, 221);
}

.bg-darkred {
    background-color: darkred;
}


/*для графического элемента*/
.dashboard .items-4 .item-small>.thumbnail {
    display            : flex;
    align-items        : center;
    justify-content    : center;
    position           : absolute;
    width              : 64px;
    height             : 64px;
    /* background-color:green; */
    margin-top         : -30px;
    /*картинка как фон*/
    /* background-image: url('../img/data_white.svg');
    background-repeat  :no-repeat;
    background-size    : 36px;
    background-position:center; */
    box-shadow         : 4px 2px 15px 0px rgba(34, 60, 80, 0.6);
}


/*текстовые данные справа*/
.dashboard .items-4 .item-small>.text-data {
    display   : inline-block;
    width     : 100%;
    text-align: right;
}

/*заголовок*/
.dashboard .items-4 .item-small .text-data>.title {
    display       : inline-block;
    text-transform: capitalize;
    margin-bottom : 1em;
}

/*значение*/
.dashboard .items-4 .item-small .text-data>.value {
    display       : inline-block;
    text-transform: uppercase;
    font-size     : 2em;
    margin-bottom : 1em;
}

/*информационные данные внизу блока*/
.dashboard .items-4 .item-small>.notify-data {
    display    : inline-flex;
    margin-top : 0.5em;
    align-items: center;
}

/*отступ для текста после картинки*/
.dashboard .items-4 .item-small .notify-data>span {
    margin-left: 5px;
}



/********************************************/


/*для блоков с 3мя items*/
.dashboard .items-3 {
    display        : flex;
    justify-content: space-between;
}

.dashboard .items-3>.item-middle {
    margin-top      : 3em;
    width           : 32%;
    height          : 250px;
    background-color: white;
    margin-right    : 10px;
    min-width       : 256px;
    max-width       : 370px;
    box-shadow      : 5px 5px 5px -5px rgba(34, 60, 80, 0.6);
    padding         : 0 1.3em;
}

/* thumbnail graphic*/
.dashboard .items-3 .item-middle>.thumbnail {
    display        : flex;
    position       : relative;
    align-items    : center;
    justify-content: center;
    width          : 100%;
    height         : 150px;
    margin-top     : -20px;
    margin-left    : auto;
    margin-right   : auto;
    box-shadow     : 4px 2px 15px 0px rgba(34, 60, 80, 0.6);
}

.dashboard .items-3 .item-middle .thumbnail>img {
    width: 90%;
}

.dashboard .items-3 .item-middle>.text-data {
    margin-top    : 0.5em;
    /* margin-left: 2%; */
}

.dashboard .items-3 .item-middle .text-data>.title {
    font-size: 1.5em;
}

.dashboard .items-3 .item-middle .text-data>.value {
    font-size: 1em;
}

.dashboard .items-3 .item-middle>.notify-data {
    display    : inline-flex;
    align-items: center;
}

.dashboard .items-3 .item-middle .notify-data>span {
    margin-left: 5px;
    font-size  : 0.7em;
}





/************************************************/


/*для блоков с 2мя items*/
.dashboard .items-2 {
    display        : flex;
    justify-content: space-between;
}

.dashboard .items-2>.item-large {
    margin-top      : 3em;
    /* width        : 440px; */
    width           : 48%;
    min-width       : 388px;
    max-width       : 660px;
    height          : 360px;
    background-color: white;
    margin-right    : 10px;
    box-shadow      : 5px 5px 5px -5px rgba(34, 60, 80, 0.6);
    padding         : 0 1.3em;
}

/*панель задач*/
.dashboard .items-2 .item-large>#tasks {
    display        : flex;
    position       : relative;
    align-items    : center;
    justify-content: start;
    width          : 100%;
    height         : 70px;
    margin-top     : -20px;
    margin-left    : auto;
    margin-right   : auto;
    box-shadow     : 4px 2px 15px 0px rgba(34, 60, 80, 0.6);
    color          : white;
    padding        : 0 1em;
}

/*кнопки на панели задач*/
.dashboard .items-2 .item-large #tasks>.button {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 100px;
    height         : 40px;
    margin-left    : 10px;
    padding        : 10px 10px;
    transition     : all 0.3s linear;
}

/*отступ текста справа от картинки*/
.dashboard .items-2 .item-large #tasks .button>img {
    margin-right: 5px;
}

/* при наведении курсора на кнопки задач*/
.dashboard .items-2 .item-large #tasks .button:hover {
    background-color: rgb(247, 193, 93);
}

.dashboard .items-2 .item-large #tasks > .button:nth-child(2) {
    background-color: rgb(247, 193, 93);
}

/*список*/
.dashboard .items-2 .item-large>.list-item {
    display              : grid;
    grid-template-columns: 1fr 10fr 1fr 1fr;
    /* grid-template-rows: repeat(3, 3em); */
    margin-top           : 1em;
    margin-bottom        : 1em;
    align-items          : center;
    justify-items        : center;
}

/*размер чекбокса в списке*/
.dashboard .items-2 .item-large .list-item>.checkbox {
    font-size: 1.3em;
}



/* блок employee stats*/
.dashboard .items-2 .item-large>#stats {
    display     : block;
    position    : relative;
    width       : 100%;
    height      : 100px;
    margin-top  : -20px;
    margin-left : auto;
    margin-right: auto;
    box-shadow  : 4px 2px 15px 0px rgba(34, 60, 80, 0.6);
    color       : white;
    padding     : 0 1em;
}

/*надпись над блоком*/
.dashboard .items-2 .item-large #stats>.title {
    display      : inline-block;
    margin-top   : 0.8em;
    font-size    : 1.3em;
    margin-bottom: 0.5em;
}

/*таблица*/
.dashboard .items-2 .item-large>table {
    border-collapse: collapse;
    /* border      : 1px solid black; */
    width          : 100%;
    /* margin-top  : 0.5em; */
}

/* заголовок таблицы и ширины столбцов*/
.dashboard .items-2 .item-large table>thead {
    text-align: left;
    color     : rgb(40, 146, 46);
    height    : 50px;
}

/*ID*/
.dashboard .items-2 .item-large table>thead th:nth-child(1) {
    width     : 12%;
    text-align: center;
}

/*Name*/
.dashboard .items-2 .item-large table>thead th:nth-child(2) {
    width: 50%;
}

/*Salary*/
.dashboard .items-2 .item-large table>thead th:nth-child(3) {
    width: 20%;
}

/*table rows*/
.dashboard .items-2 .item-large table tbody>tr {
    height    : 50px;
    border-top: rgba(34, 60, 80, 0.6) 1px solid;
}

/*выровнять ИД по центру*/
.dashboard .items-2 .item-large table tbody tr>td:nth-child(1) {
    text-align: center;
}


/* при наведении на блок */
.dashboard .items-4 .item-small:hover,
.dashboard .items-3 .item-middle:hover,
.dashboard .items-2 .item-large:hover {
    box-shadow: 0 0 16px 0 rgb(0 0 0 / 40%);
}


/*****footer**********************************************/
footer {
    margin-left   : 245px;
    padding-left  : 1em;
    padding-bottom: 1em;
    max-width     : 1280px;
    min-width     : 700px;
}

footer .wrapper {
    display         : flex;
    margin-top      : 1.3em;
    justify-content : space-between;
    /* margin-bottom: 1em; */
}

footer .wrapper .footer-menu>a {
    margin-left    : 2em;
    text-transform : uppercase;
    text-decoration: none;
    color          : rgb(73, 70, 70);
    font-weight    : 700;
}

footer .wrapper .footer-menu>a:hover {
    color: white;
}

footer .wrapper>.copyright {
    color       : rgb(73, 70, 70);
    margin-right: 2em;
}