* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
body {
	background: #000614;
	font-family: sans-serif;
	padding: 0;
	margin: 0;
	color: #fff;
}
.container {
    max-width: 900px;
    margin: 0 auto;
}
.container.reports-container {
	max-width: 1200px;
}
h1 {
	text-align: center;
	margin-top: 40px;
	margin-bottom: 30px;
}
.link {
    text-decoration: underline;
    color: #979797;
    text-align: center;
    cursor: pointer;
	transition: all .3s;
}
.link:hover {
    color: #fff;
}
.header__logo img {
	width: 100%;
}
.time-count {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
	gap: 32px;
	max-width: 700px;
	background: #071524;
    border-radius: 16px;
	margin: 80px auto;
	position: relative;
}
.user-card__top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
}
.header__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 150px;
}
.time-count-loader-wrap {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    z-index: 999;
    background: #000000bf;
    gap: 12px;
    font-size: 22px;
}
.time-count-loader-wrap.active {
	display: flex;
}
.loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 10px solid;
  border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader.type-1 {
	border-color: rgb(33 125 181) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgb(0, 159, 255);
}
.loader.type-2 {
	border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) #9d7119 #ffaa00;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
.time-count.active {
	display: flex;
}
.user-card__show-pass:hover {
    color: #23c590;
}
.user-card__show-pass.showed {
	color: #23c590;
}
.big-reports-table__td.big-reports-table__type-vacation {
    background: #23c590;
    border-right: 1px solid #7a7a7a;
}
.time-count__timer-wrap {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    transition: background 0.3s 
ease;
}
.popup__content.end-custom-popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.user-card__pos.status-1 {
    color: #23c590;
}
.user-card__pos.status-2 {
    color: #ffaa00;
}
.user-card__pos.status-4 {
    color: #ffee99;
}
.user-card__pos.status-5 {
    color: #c76363; 
}
       
.end-custom-link {
	display: none;
}
.end-custom-link.active {
	display: block;
}
.time-count__auth-user-info {
    padding: 16px 24px;
    font-size: 30px;
    background: #17273e;
    border-radius: 8px;
}
.time-count__timer-wrap.main-counter {
	background: conic-gradient(#009fff 0% 0%, #000614 0% 100%);
	box-shadow: 1px 1px 5px #45b7e3;
}
.time-count__timer-wrap.pause-counter {
	background: conic-gradient(#ffaa00 0% 100%, #000614 100% 100%);
	box-shadow: 1px 1px 5px #ffaa00;
	width: 100px;
    height: 100px;
}

.working .time-count__timer-wrap.pause-counter {
	background: conic-gradient(transparent 0% 100%, transparent 100% 100%);
	box-shadow: 1px 1px 5px #ffaa00;
	width: 100px;
	height: 100px;
}
.time-count__btns {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.time-count__timer {
    position: absolute;
    width: 190px;
    height: 190px;
    background: #000614;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
	color: #fff;
}
.btn {
	padding: 16px 32px;
    border-radius: 8px;
	cursor: pointer;
	transition: all .3s;
	text-align: center;
}
.btn.btn-type-1 {
    background: #0077cc;
    color: #fff;
}
.btn.btn-type-1:hover {
	background: #009fff;
	box-shadow: 1px 1px 10px #5a5a5a;
}
.btn-small {
    padding: 8px 16px;
    border-radius: 4px;
}
.big-reports-table__td.big-reports-table__type-sick-leave {
    background: #ffaa00;
	border-right: 1px solid #7a7a7a;
}
.btn.btn-type-2 {
    background: #ffaa00;
    color: #fff;
}
.btn.btn-type-2:hover {
	background: #ffaa00;
	box-shadow: 1px 1px 10px #5a5a5a;
}
.time-count__counters {
    display: flex;
    gap: 24px;
}
.profile-vacation__delete {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    background: #103854;
    border-radius: 6px;
    cursor: pointer;
    transition: all .3s;
}
.profile-vacation__delete:hover {
    background: #0077cc;
}
.profile__left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.profile-info__department {
    color: #707070;
}
.profile {
    display: grid;
    grid-template-columns: 30% 70%;
}
.profile__right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #071524;
    padding: 24px;
    border-radius: 8px;
}
.profile-vacation {
    display: flex;
    gap: 8px;
    align-items: center;
}
.profile-vacation__delete img {
	width: 20px;
}
form.time-count-auth {
    background: #0d1021;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 400px;
    border-radius: 10px;
	margin: 40px auto;
}
input {
    background: #ffffff;
    padding: 12px 16px;
    border: 0;
	outline: 0;
    border-radius: 6px;
}
.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
form button {
	margin-top: 16px;
}
.time-change__blocks {
    display: flex;
	align-items: flex-end;
    gap: 16px;
}
.time-change__block {
    display: flex;
    flex-direction: column;
    gap: 12px;
	background: #05182c;
    padding: 12px;
    border-radius: 8px;
}
.time-change__inputs {
    display: flex;
    gap: 4px;
	align-items: center;
}
.time-change__inputs span {
	font-size: 28px;
}
.time-change__input {
	color: #fff;
    background: #17273e;
    padding: 10px 10px;
    font-size: 20px;
    max-width: 60px;
}
.time-change__block {
	font-size: 14px;
}
.time-change-block__delimiter {
    width: 20px;
    height: 4px;
    background: #fff;
	margin-bottom: 30px;
}
.time-change__blocks-title {
    font-size: 28px;
}
.time-change__section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    border: 1px solid;
    padding: 24px;
    border-radius: 8px;
}
.time-change__section.main {
	border-color: #12214a;
}
.time-change__section.pause {
	border-color: #302001;
}
.time-change__sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.control-svg-btn  {
    border-radius: 6px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    background: #103854;
    justify-content: center;
    position: absolute;
    right: 50px;
    top: 50px;
	cursor: pointer;
	transition: all .3s;
}
.control-svg-btn:hover {
	background: #0077cc;
}

.control-svg-btn img {
    width: 24px;
	height: 24px;
}
.time-change__textarea {
    display: flex;
    gap: 16px;
    flex-direction: column;
    width: 100%;
    max-width: 475px;
	outline: 0;
}
.time-change__textarea textarea {
	background: #17273e;
	color: #fff;
	padding: 16px;
	border-radius: 8px;
	border: 1px solid #12214a;
	min-height: 150px;
}
.msg {
    padding: 8px 16px;
    border-radius: 4px;
	display: none;
}
.msg.active {
	display: block;
}
.msg-warn {
	background: #893f3f;
	color: #fff;
}
.header {
    padding: 24px;
    background: #071524;
    border-bottom: 1px solid #12214a;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header__logout {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    background: #103854;
    border-radius: 6px;
	cursor: pointer;
	transition: all .3s;
}
.header__logout img {
	width: 24px;
	height: 24px;
}	
.header__user-block {
    display: flex;
    align-items: center;
    gap: 12px;
}
.header__logout:hover {
    background: #0077cc;
}
.notice {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.notice-item {
    background: #071524;
    border: 1px solid #12214a;
    border-radius: 8px;
    padding: 24px;
    gap: 16px;
    display: grid;
    grid-template-columns: 100px auto;
}
.notice-item__date {
    padding-right: 12px;
    border-right: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.notice-item__info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.notice-item__info-text {
    line-height: 26px;
}
.notice-item__info-text .pause-time {
	color: #ffaa00;
}
.notice-item__info-text .start-time {
	color: #0077cc;
}
.notice-item__comment-heading {
    color: #646464;
    margin-bottom: 8px;
    display: block;
}
.header__menu ul {
    display: flex;
    gap: 16px;
	margin: 0;
	padding: 0;
}
.header__menu li {
	list-style: none;
}
.header__menu a {
	color: #fff;
	text-decoration: none;
}
.header__menu .active a {
	color: #0077cc;
}
.notice-item__date-1 {
	color: #ffaa00;
}
.notice .user {
	color: #23c590;
}
.user-card {
    background: #071524;
    border: 1px solid #12214a;
    border-radius: 8px;
    padding: 16px;
	cursor: pointer;
}
.users-list {
    display: flex;
    gap: 4px;
    flex-direction: column;
    margin-bottom: 24px;
}
.user-card__bottom {
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px;
    margin-top: 16px;
    border-top: 1px solid #323232;
    padding-top: 16px;
	display: none;
}
.active .user-card__bottom {
	display: grid;
}
.user-card__vacations-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}
.profile-vacation__date {
	color: #23c590;
}
.profile-vacation__count {
	color: #707070;
}
    
.popup-mask {
	display: none;
}
.popup-mask.active {
    background: #000000ab;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	display: block;
}
.popup {
    position: fixed;
	display: none;
    left: 50%;
    transform: translateX(-50%);
    top: 180px;
    background: #0d1021;
    padding: 24px;
    max-width: 400px;
	flex-direction: column;
    width: 400px;
}
.popup.active {
	display: flex;
}
.popup-form {
    display: flex;
    flex-direction: column;
	gap: 12px;
}
.user-card__pos {
    color: #707070;
}
.users-list-head {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: #959595;
}
.users-list-head {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: #959595;
    padding: 16px;
    gap: 16px;
    border-radius: 6px;
    margin-bottom: 4px;
}
.user-reports-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.user-reports-table {
    display: flex;
}
.user-report__date {
    padding: 12px;
}
.user-report__times {
    display: flex;
    flex-direction: column;
}
.user-report__work {
    color: #0077cc;
    padding: 6px 12px;
}
.user-report__pause {
    color: #29c979;
    padding: 6px 12px;
}
.user-reports-table {
    display: flex;
    border: 1px solid #646464;
    border-radius: 6px;
}
.user-report {
    border-right: 1px solid #646464;
}
.user-report:last-child {
	border-right: 0;
}
.big-reports-table__dates {
    display: flex;
	overflow-x: scroll;
}

.big-reports-table__dates::-webkit-scrollbar {
  width: 10px;
}

.big-reports-table__dates::-webkit-scrollbar-track {
  background: #2d2d2d;
  border-radius: 5px;
}

.big-reports-table__dates::-webkit-scrollbar-thumb {
  background: #0077cc;
  border-radius: 5px;
}

.big-reports-table__dates::-webkit-scrollbar-thumb:hover {
  background: #777;
}
.big-reports-table {
    /*border: 1px solid #fff;*/
    display: flex;
}
.big-reports-table__row {
    display: flex;
}
.big-reports-table__date {
    /*border-right: 1px solid;*/
}
.big-reports-table__date:nth-child(even) {
    background: #071524;
}	
.big-reports-table__date:last-child {
	border-right: 0;
	
}
.big-reports-table__td {
    padding: 12px;
	border-top: 1px solid #323232;
}
.big-reports-table__td:first-child  {
	border-top: 0;
}

.big-reports-table__users .big-reports-table__td {
	min-width: 200px;
	border-top: 1px solid #323232;
	color: #23c590;
}
.big-reports-table__users .big-reports-table__td:first-child {
	min-width: 200px;
	border-top: 0;
}
.big-reports-table__void-td {
	height: 42px;
}
.big-reports-table__users {
	border-right: 1px solid #323232;
}
.big-reports-table__td.big-reports-table__type-0 {
    color: #525252;
}
.big-reports-table__td.big-reports-table__type-1 {
    color: #0077cc;
}

.big-reports-table__users .big-reports-table__td:first-child {
	color: #fff;
}	
.time-count-page {
    margin-bottom: 80px;
}
.reports-page-control-block {
    display: flex;
    flex-direction: column;
	gap: 16px;
	margin-bottom: 20px;
}
.reports-page-control-block .month-name {
	font-size: 20px;
	display: flex;
    gap: 16px;
	align-items: center;
}
.reports-page-control-block__top {
    display: flex;
    justify-content: space-between;
}
.pause-counter .time-count__timer {
	width: 95px;
    height: 95px;
    font-size: 20px;
}

.months__month {
    padding: 8px 16px;
    font-size: 16px;
	cursor: pointer;
	color: #fff;
	text-decoration: none;
}

.months {
    background: #071524;
    display: flex;
	justify-content: center;
	border-bottom: 1px solid #ffffff;
}
.months__month:hover {
    background: #0077cc;
    color: #fff;
}
.months__month.active {
    background: #0077cc;
    color: #fff;
}
.header__menu-burger {
    display: none;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    background: #103854;
    border-radius: 6px;
    cursor: pointer;
    transition: all .3s;
}
.header__menu-burger img {
    width: 24px;
    height: 24px;
}
.profile__vacations {
    gap: 4px;
    display: flex;
    flex-direction: column;
}
@media(max-width: 991px){
	.container {
		max-width: 700px;
	}
	.header__menu {
        position: fixed;
        top: 0;
        bottom: 0;
        padding: 24px;
        left: 0;
        border-right: 1px solid #12214a;
        background: #071524;
        transform: translateX(-500px);
        transition: all .4s;
        z-index: 99;
    }
	.header__menu-burger {
		display: flex;
	}
	.header__menu.active {
		transform: translateX(0px);
	}
	.header__menu ul {
		flex-direction: column;
	}
	.header {
		display: flex;
	}
	.profile {
		padding: 24px;
		grid-template-columns: 1fr;
		gap: 16px;
	}
}
@media(max-width: 767px){
	.container {
		max-width: 100%;
		padding: 0 16px;
	}
	.time-count {
		padding-top: 120px;
	}
	.time-change__sections {
		grid-template-columns: 1fr;
	}
	.time-change__textarea {
		padding: 0 24px;
	}
	.header {
		font-size: 14px;
	}
	.big-reports-table {
		font-size: 14px;
	}
	.big-reports-table__td {
		padding: 8px;
	}
	.big-reports-table__users .big-reports-table__td:first-child {
		min-width: 170px;
	}
	.big-reports-table__users .big-reports-table__td {
		min-width: 170px;
	}
	.profile {
		padding: 0;
	}
	.profile__right {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}
@media(max-width: 600px){
	.notice-item {
		grid-template-columns: 1fr;
		padding: 16px;
	}
	.notice-item__date {
		padding: 0;
		border: 0;
		padding-bottom: 12px;
		border-bottom: 1px solid #323232;
	}	
	.user-card {
		grid-template-columns: 1fr;
	}
	.users-list-head {
		display: none;
	}
	form.time-count-auth {
		width: 100%;
	}
}
@media(max-width: 360px){
	.time-count__timer-wrap {
		width: 150px;
		height: 150px;
	}
	.time-count__timer {
		width: 145px;
		height: 145px;
		font-size: 28px;
	}
	.working .time-count__timer-wrap.pause-counter {
		width: 70px;
		height: 70px;
	}
	.pause-counter .time-count__timer {
		width: 65px;
		height: 65px;
		font-size: 14px;
	}
	.time-count__timer-wrap.pause-counter {
		width: 70px;
		height: 70px;
	}
	.header {
		padding: 16px;
        display: flex;
    }
	.notice-item {
		font-size: 14px;
	}
	.header__logo {
		max-width: 100px;
	}
	.header__user-block {
		display: flex;
		align-items: flex-end;
		gap: 12px;
		font-size: 12px;
		flex-direction: column;
	}
}