@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
/*UPDATE*/
:root
{
	--white: #FFFFFF;
	--gray2: #212121;
	--gray3: #828282;
	--gray5: #E0E0E0;
	--gray6: #f2f2f2;
	--block: #000000;
	--light-gray: #BDBDBD;
	--gray-blue: #99A6B7;
	--green: #2FD385;
	--dark-green: #1f8b57;
	--blue: #303F95;
	--red: #EB5757;
	--bg: #F5F6F8;
	--sline: #F7FAFF;
	--light-blue: #DBE5F3;
	--red10: rgba(235, 87, 87, 0.1);
	--orange:#F2994A;
	--purpur:#9B51E0;

	--size12:400 12px/24px 'Montserrat', sans-serif;
	--size12min:400 12px/14px 'Montserrat', sans-serif;
	--size14:300 14px/22px 'Montserrat', sans-serif;
	--size14b:500 14px/22px 'Montserrat', sans-serif;
	--size18:500 18px/22px 'Montserrat', sans-serif;
	--size20:500 20px/24px 'Montserrat', sans-serif;
	--size16:400 16px/24px 'Montserrat', sans-serif;
	--size16b:600 16px/24px 'Montserrat', sans-serif;
	--h1: 500 36px/43px 'Fira Sans', sans-serif;
	--h2: 500 28px/35px 'Fira Sans', sans-serif;
	--title:500 13px/24px 'Inter', sans-serif;
}


.quests-table .ut-content .ut-line>div.iom-info div
{
	width: 210px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.table .ready
{
	/*display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 18px;
	border-radius: 50%;
	color: var(--white);
	background: var(--green);*/
	color: var(--green);
	font-size: 18px;
}
.table .num 
{
	font-weight: 500;
	/*display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	color: var(--white);
	background: var(--gray-blue);*/
}
.ut-line>div:nth-child(1) a.sort
{
	text-decoration: none;
	color: var(--gray3);
}
.taskIOM-name-show-hide 
{
	display: grid;
	grid-template-columns: auto 1fr 30px;
	padding: 20px 0 0;
	cursor: pointer;
}
.taskIOM-name-show-hide .arrow
{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--white);
	box-shadow: 4px 0px 18px rgba(0, 0, 0, 0.06);
	text-decoration: none;
	transform: rotate(180deg);
	transition: all 0.3s ease;
}
.quest-card.hide .taskIOM-name-show-hide .arrow
{
	transform: rotate(0deg);
}
.taskIOM-name-show-hide .dotted-line 
{
	border-bottom: 1px dashed var(--gray-blue);
	margin: 14px;
}
.iom-list
{
	display: none;
	/*grid-template-columns: 1fr;
	grid-gap: 50px;*/
	padding: 30px 0 50px;
}
.iom-list>div 
{
	margin-bottom: 50px;
}

.history-table
{
	margin-top:15px;
}
.history-table .ut-line
{
	display: grid;
	flex: none;
	grid-template-columns: 100px 100px 1fr 60px;
}
.hi-state
{
	flex-direction: column;
}
.quest-card h3
{
	font: var(--size20);
	margin:0;
}
.quest-card h3 .status-in-title
{
	display: none;
}
.quest-card.hide h3 .status-in-title
{
	display: inline-block;
}
.quest-card.hide .taskIOM-fullinfo, .quest-card.hide .list-video-instructions
{
	display: none;
}
.iom-list>div.quest-card.hide
{
	margin-bottom: 0;
}
.taskIOM-info
{
	background: var(--white);
	box-shadow: 4px 0px 18px rgba(0, 0, 0, 0.06);
	border-radius: 8px;
	padding:30px 30px 50px;
}

.taskIOM-info .user-info-block .ui-name, .taskIOM-info .user-info-block .input .input-name
{
	text-transform: uppercase;
	color: var(--gray-blue);
	margin-bottom: 15px;
	font-size: var(--size14b);
	font: var(--title);
	letter-spacing: 0.05em;
}

.user-info-block.hideblecomp.hidden
{
	display: none;
}


.taskIOM-info .user-info-block .ui-val 
{
	font-size: var(--size16);
	color: var(--gray2);
}
.taskIOM-info 
{
	display: flex;
	flex-direction: column;
	gap:20px;
}
.taskIOM-fullinfo
{
	display: grid;
	grid-template-columns: 2fr 3fr;
	grid-gap:30px;
	padding:20px 30px 30px;
	border-left: 1px dashed var(--gray-blue);
	border-right: 1px dashed var(--gray-blue);
	border-bottom: 1px dashed var(--gray-blue);
}
.taskIOM-status-coloumn .ui-name.history-change
{
	margin-top: 20px;
}
.taskIOM-status-coloumn
{
	padding-top:30px;
}
.taskIOM-status-coloumn .user-info-block
{
	border:none;
	display: inline-flex;
	align-items: center;
	gap: 30px;
}

.standart-link
{
	text-decoration: none;
	color: var(--green);
	font-weight: 500;
	font-size: 14px;
}

.standart-link:hover
{
	text-decoration: underline;
}

.taskIOM-info .user-info-block .ui-val  a
{
	text-decoration: none;
	color: var(--green);
	font-weight: 500;
}
.taskIOM-info .user-info-block .ui-val  a:hover span
{
	text-decoration: underline;
}
.taskIOM-info .user-info-block .ui-val  a i 
{
	font-size: 18px;
}
/*.quest-card
{
	padding: 30px;
}
.quest-card:nth-child(2n+1)
{
	background: var(--gray5);
}


.quest-card .col3-block
{
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-gap: 20px;
}

.quest-card .col2-block
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
}*/


.hide-filter
{
	display: inline-flex;
	align-items: center;
	margin-top:24px;
	color: var(--green);
	font-weight: 600;
	text-decoration: none;
}
.hide-filter i 
{
	font-size: 24px;
	transform: rotate(180deg);
}
.hide-filter.hidden i
{
	transform: rotate(0deg);
}
.hide-filter.hidden .hide
{
	display: block;
}
.hide-filter .hide
{
	display: none;
}
.hide-filter.hidden .show
{
	display:none;
}

.filters-hidden
{
	display: inline-flex;
	align-items: center;
	gap:14px;
	font-weight: 600;
}
.filters-hidden i 
{
	font-size: 24px;
}
.users-top.hidden .filters
{
	display: none;
}
.users-top.hidden .filters-hidden
{
	display: inline-flex;
}
.users-top .filters-hidden
{
	display: none;
}
.flex-with-h1
{
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap:40px;
}
.legenda-filter
{
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap:40px;
	background: #FFFFFF;
	box-shadow: 4px 0px 18px rgba(0, 0, 0, 0.06);
	border-radius: 8px;	
	padding:20px 28px;
}

.legenda-filter.noti
{
	background: initial;
	box-shadow: initial;
}
.checkbox 
{
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.checkbox+label 
{
  display: inline-flex;
  align-items: center;
  user-select: none;
}
.checkbox+label::before 
{
  content: '';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  flex-grow: 0;
  border-color: transparent !important;
  background-color: var(--blue);
  border-radius: 4px;
  margin-right: 8px;
  font-size: 12px;
}
.checkbox:checked+label::before 
{
	content: '\e907';
	font-family: "icomoon";
	color: #fff;
}

#taskIOM.checkbox+label::before, #iom.checkbox+label::before, .iom-noti .checkbox+label::before
{
	background-color: var(--blue) !important;
}

#problem.checkbox+label::before, .problem-noti .checkbox+label::before
{
	background-color: var(--green) !important;
}
#event.checkbox+label::before
{
	background-color: var(--orange);
}
#system.checkbox+label::before, .system-noti .checkbox+label::before
{
	background-color: var(--purpur) !important;
}
.icon-problem_bold
{
	color: var(--green);
}
.icon-task_bold
{
	color:var(--blue);
}

.notifications
{
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 60px;
}

.noti-item
{
	display: grid;
	grid-template-columns: 20px 1fr;
	grid-gap: 15px;
	width: 795px;
}

.noti-item .n-selector
{
	display: flex;
	align-items: center;
}

.n-text
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border-left: 4px solid var(--light-gray);
	background: var(--white);
	padding: 15px 23px;
	box-sizing: border-box;
	box-shadow: 4px 0px 18px rgba(0, 0, 0, 0.06);
	color: #4F4F4F;
	text-decoration: none;
}

.n-text:after
{
	font-family: "icomoon";
	content: "\e909";
	font-size: 24px;
}

.iom-noti .n-text
{
	border-left: 4px solid var(--blue);
}

.problem-noti .n-text
{
	border-left: 4px solid var(--green);
}

.system-noti .n-text
{
	border-left: 4px solid var(--purpur);
}

/*.noti-item.read .n-text
{
	border-left: 4px solid var(--light-gray);	
	color: var(--light-gray);
}*/

.n-date
{
	display: block;
	font-size: 13px;
	line-height: 24px;
	font-weight: 500;
	color: var(--gray-blue);
}

/*.noti-item.read .n-date
{
	color: var(--light-gray);
}*/

.noti-item.read .n-text
{
	border-color: var(--light-gray);
	transition: all 0.3s ease;
}

.noti-item.read .n-text>*, .noti-item.read .n-text:after
{
	opacity: 0.5;
	transition: all 0.3s ease;
}

.noti-item.read.system-noti .n-text:hover
{
	border-color: var(--purpur);
}

.noti-item.read.iom-noti .n-text:hover
{
	border-color: var(--blue);
}

.noti-item.read.problem-noti .n-text:hover
{
	border-color: var(--green);
}

.noti-item.read .n-text:hover>*, .noti-item.read .n-text:hover:after
{
	opacity: 1;
}

.noti-item.read .checkbox+label::before
{
	background: #fff !important;
	border: 2px solid var(--gray-blue);
}

.n-content
{
	font-size: 16px;
	line-height: 24px;
}

.year-list
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 32px;
}
.year-list.calendar-day
{
	display: grid;
	grid-template-columns: 3fr 1fr;
	grid-gap: 32px;
}
.container-month
{
	position: relative;
}
.container-month>div 
{
	top:20px;
	position: sticky;
}
.calendar-wrapper
{
	margin:0 auto;
}
.calendar
{
	display: flex;
	flex-direction: column;
	gap:0;
}
.period-line
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin:32px auto;
}
.calendar, .period-line, .calendar-wrapper
{
	max-width: 1100px;
}
.calendar 
{
	min-width: 210px;
}
.period-line a.arrow 
{
	text-decoration: none;
	font-size: 48px;
	color: var(--gray3);
}
.period-line a:hover, .period-line .period a:hover
{
	color: var(--gray2);
}


.period-line .period
{
	display: flex;
	gap:5px;
}
.period-line .period a, .period-line .period span
{
	text-decoration: none;
	font:var(--h2);
}
.period-line .period a 
{
	color: var(--gray3);
}
.period-line .period span.month 
{
	text-transform: capitalize;
}

/*.period-line .period
{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.period-line .period .month 
{
	font:var(--size16b);
	text-transform: capitalize;
}
.period-line .period .year
{
	text-decoration: none;
	font:var(--size18);
	font-weight: 400;
	color: var(--gray3);
}*/
.calendar .days_the_week, .calendar .days
{
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-gap:0;
}
.calendar .days_the_week>div
{
	text-transform: uppercase;
	color: var(--gray-blue);
	font: var(--size14);
	font-weight: 500;
	text-align: center;
	padding:4px;
}
.calendar .days_the_week .short 
{
	display: none;
}
.calendar .days
{
	border-bottom:1px solid var(--gray6);
	border-right:1px solid var(--gray6);
}
.calendar .days>div 
{
	height: 80px;
	padding:2px 6px 4px;
	box-sizing: border-box;
	border-top:1px solid var(--gray6);
	border-left:1px solid var(--gray6);
	background: var(--white);
	/*z-index: 1;*/
}
.calendar .days>div:nth-child(7n-1),.calendar .days>div:nth-child(7n)
{
	background: transparent;
}
.calendar .days>div.selected
{
	background-color: var(--red10);
}
/*.calendar .days>div.selected .date-num
{
	color: var(--green);
}*/
.ev-hover-wrapper
{
	position: relative;
}
.calendar .days>div.this-month:hover, .calendar .days>div.selected:hover 
{
	background-color: var(--gray6);
}
.calendar .days>div a.date-num
{
	display: block;
	font: var(--size16);
	text-align: right;
	text-decoration: none;
	color: var(--gray2);
	padding:0 4px;
}
.events-list-in-calendar
{
	display: flex;
	flex-direction: column;
	gap:4px;
}
.calendar .days>div .event, .calendar .days>div .event + .ev-hover, .calendar-day-list .event
{
	display: block;
	background: #EEF1FF;
	border-radius: 0px 2px 2px 0px;
    box-sizing: border-box;
    position: relative;
}
.calendar .days>div .event
{
	max-width: 128px;
	height: 20px;
	text-overflow: ellipsis;
	white-space: nowrap; /* Запрещаем перенос строк */
    overflow: hidden;
    position: relative;
    width:100%;
    z-index: 2;
}
.calendar-day-line
{
	display: grid;
	grid-template-columns: 50px 1fr;
}
.calendar-day-line .time
{
	color: var(--gray3);
	padding:8px 0;
}
.calendar .days>div .event + .ev-hover
{
	display: none;
}
.calendar .days>div .ev-hover-wrapper:hover .ev-hover
{
	display: block;
	position: absolute;
	left:0;
	top:0;
	width: auto;
	max-width: 200px;
	min-width: 100%;
	height: auto;
	z-index: 4;
	cursor: pointer;
	box-shadow: 0px 0px 10px rgba(79, 79, 79, 0.2);
}
.calendar .days>div .info-count, .calendar .days>div .event , .calendar .days>div .event + .ev-hover, .calendar .days>div .ev-hover-wrapper:hover .ev-hover:hover 
{
	padding:2px 4px 2px 6px;
	font: var(--size14);
	line-height: 16px;
	text-decoration: none;
	color: #000;
}

.calendar .days>div .event:before, .calendar .days>div .event + .ev-hover:before, .calendar-day-list .event:before
{
	display: block;
	position: absolute;
	content:'';
	background:#303F95;
	border-radius: 1px;
	width: 2px;
	height: 100%;
	top:0;
	bottom:0;
	left:0;
}
.calendar .days>div .event.task, .calendar .days>div .event.task + .ev-hover /*, .calendar-day-list .event.task  ЗАДАНИЕ  */
{
	background: #EEF1FF;
}
.calendar .days>div .event.task:before, .calendar.yearview .days>div .event.task,  .calendar .days>div .event.task + .ev-hover:before , .calendar-day-list .event.task:before 
{
	background:#303F95;
}
.calendar .days>div .event.problem, .calendar .days>div .event.problem + .ev-hover /*, .calendar-day-list .event.problem  ЗАДАЧА  */
{
	background: #E6FFF3;
}
.calendar .days>div .event.problem:before, .calendar.yearview .days>div .event.problem, .calendar .days>div .event.problem + .ev-hover:before , .calendar-day-list .event.problem:before 
{
	background:#2FD385;
}
.calendar .days>div .event.action, .calendar .days>div .event.action + .ev-hover /*, .calendar-day-list .event.action МЕРОПРИЯТИЕ ВНЕ ИОМ  */
{
	background: #FFEAD7;
}
.calendar .days>div .event.action:before, .calendar.yearview .days>div .event.action, .calendar .days>div .event.action + .ev-hover:before, .calendar-day-list .event.action:before 
{
	background:#F2994A;
}

.calendar.yearview .days>div .event
{
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	content:'';
	color:transparent;
}
.year-list .calendar.yearview .days>div .event
{
	width: 8px;
	height: 8px;
}
.year-list .calendar .days>div .info-count
{
	font: var(--size12min);
	/*line-height: 12px;*/
	padding: 0;
}
.year-list .events-list-in-calendar 
{
	gap:1px;
}
.calendar.yearview  .days_the_week .short 
{
	display: block;
}
.calendar.yearview  .days_the_week .full
{
	display: none;
}
.calendar.yearview .events-list-in-calendar
{
	flex-direction: row;
	align-items: center;
	height: 20px;
}
.calendar.yearview .info-count span
{
	display: none;
}
.year-list .calendar.yearview .days>div
{
	height: 46px;
	cursor: pointer;
}
.year-list .calendar.yearview .days>div.with-data:hover
{
	background: var(--light-blue);
}
.calendar .days>div.chday 
{
	background: var(--gray6);
}
.year-list .calendar.yearview .days>div a.date-num 
{
	padding:0;
}
.calendar.yearview .month-name
{
	text-align: center;
}
.calendar.yearview .month-name a
{
	font: var(--size16b);
	color: var(--gray2);
	text-decoration: none;
	text-transform: capitalize;
}
.calendar.yearview .month-name a:hover 
{
	color: var(--gray3);
}
.calendar.yearview 
{
	min-width: 240px;
}
.calendar-day-list
{
	display: flex;
	flex-direction: column;
	gap:16px;
	padding: 30px;
	background: var(--white);
	border: 1px solid var(--gray5);
}
.calendar-day-list .event
{
	padding:6px 12px;
	font: var(--size16);
	color: var(--gray2);
	text-decoration: none;
	font-weight: 500;
	background: none;
}
.calendar-day-list .event:before
{
	border-radius: 2px;
	width: 4px;
}


body, html{
	width: 100%;
	min-width: 1200px;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	font-family: 'Montserrat', sans-serif;
	background: var(--bg);
}

h1
{
	font: var(--h1);
	color: var(--blue);
	text-transform: uppercase;
	margin: 0;
}

h1 span
{
	color: var(--gray2);
	font-size: 0.5em;
}

h2
{
	font: var(--h2);
	color: var(--blue);
	text-transform: uppercase;
	margin: 0;
}

header
{
	display: flex;
	justify-content: space-between;
	padding: 5px 30px;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.06);
	background: var(--white);
	position: relative;
	z-index: 2;
}

header .logo
{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap:8px;
}

header .logo img:nth-child(1)
{
	/*height: 50px;*/
	height: 43px;
	margin-bottom: 7px;
}

header .logo img:nth-child(2)
{
	height: 44px;
}

header .header-left
{
	display: flex;
	align-items: center;
	gap: 41px;
}

header .header-left a
{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap:6px;
}

header .header-left i
{
	font-size: 16px;
}

header a
{
	text-decoration: none;
	display: block;
	color: var(--gray2);
	font: var(--size12);
	transition: all 0.3s ease;
}

header a:hover
{
	/*transform: scale(1.05);*/
}

header .cabinet
{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap:22px;
}

header .cabinet a
{
	display: flex;
	align-items: center;
}

header .cabinet i
{
	font-size: 20px;
}

header .additional
{
	display: flex;
	align-items: center;
	gap:20px;
	font: var(--size14b);
}

.avatar
{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--gray5);
	background-size: cover;
	background-position: center;
	font-size: 16px;
	width: 35px;
	height: 35px;
}
.avatar-name
{
	display: flex;
	align-items: center;
	gap:8px;
	justify-content: flex-start;
}

.main
{
	display: grid;
	grid-template-columns: max-content 1fr;
	min-height: calc(100vh - 60px);
}

.main .menu
{
	display: flex;
	flex-direction: column;
	background: var(--white);
	box-shadow: 4px 0px 6px rgba(0, 0, 0, 0.06);
}

.main .menu a
{
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	color: var(--gray2);
	padding: 27px 15px;
	text-decoration: none;
	font:var(--size12);
	border-left: 4px solid var(--white);
}

.main .menu a.selected
{
	border-left: 4px solid var(--green);
	background: var(--bg);
}

.main .menu a i
{
	font-size: 20px;
	transition: all 0.3s ease;
	position: relative;
}

.main .menu a i sup
{
	font-size: 12px;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--green);
	color: var(--white);
	border-radius: 50%;
	width: 20px;
	height: 20px;
	top: -8px;
	right: -14px;
	position: absolute;
}

.new-video
{
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 2px 7px 2px;
	border-radius: 4px;
	border: 1px solid var(--green);
	/*text-transform: uppercase;*/
	font-weight: 500;
	color: var(--green);
	font-size: 12px;
	height: auto;
	width: auto;
}

.main .menu a:hover i
{
	transform: scale(1.2);
}

.main .menu .hider i
{
	transition: all 0.3s ease;
}

.main .menu.short a span
{
	display: none;
}

.main .menu.short .hider i
{
	transform: rotate(180deg);
}

.main .content
{
	display: grid;
	grid-template-rows: 1fr 120px;
}

.main .content>.content-block
{
	padding: 25px 25px;
	box-sizing: border-box;
}

.main .content>.copy
{
	display: flex;
	align-items: center;
	justify-content: center;
	font: var(--size12);
	color: var(--gray-blue);
	padding-top: 50px;
}

.login
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 320px;
	margin: 0 auto;
	height: 100%;
	gap:10px;
}

.login h1
{
	margin-bottom: 30px;
}

.login .input
{
	width: 100%;
}

/* inputs */

input[type=checkbox]
{
	display: none;
}

input[type=checkbox]+label
{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	position: relative;
	color: var(--gray3);
}

input[type=checkbox]+label a
{
	color: var(--gray2);
}

input[type=checkbox]+label:before
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border:1px solid var(--green);
	border-radius: 3px;
	background: var(--white);
	content: "";
	color: var(--green);
	font-family: "icomoon";
}

input[type=checkbox]:checked+label:before
{
	content: "\e907";
}

input[type=text], input[type=password], input[type=tel], input[type=email], textarea, input.prom, input.vhod, input.itog
{
	display: block;
	padding: 11px 13px;
	font: var(--size14);
	color: var(--gray2);
	font-weight: 400;
	background: var(--white);
	border: 1px solid var(--light-blue);
	width: 100%;
	box-sizing: border-box;
	border-radius: 6px;
	box-shadow: 4px 0px 18px 0px rgba(0, 0, 0, 0.06);
	outline: none;
	margin: 0;
}
input.hasDatepicker
{
	position: relative;
	padding-left:48px;
	box-sizing: border-box;
	background-image: url('/images/calendar-light.svg');
	background-position: 16px 10px;
	background-repeat: no-repeat;
	background-size: 20px;
}

.wpinfo
{
	display: block;
	padding: 5px 0;
	color: var(--gray3);
	font: var(--size12min);
}

.photo-input
{
	padding-top: 36px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.file-input, .doc-input 
{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	position: relative;
	height: 48px;
}

.photo-input .file-input
{
	justify-content: center;
	position: relative;
	height: 48px;
	padding-top: 150px;
	margin-top: -150px;
	width: 150px;
}

.file-input input, .doc-input input
{
	position: absolute;
	-webkit-appearance:none;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	opacity: 0;
	margin: 0;
}

.file-input span, .doc-input span
{
	color: var(--green);
	font: var(--size16b);
	display: inline-block;
	border-bottom: 1px solid var(--green);
	/*margin-left: 20px;*/
	position: relative;
}

.doc-input span
{
	margin-left: 35px;
}

.file-input span:before
{
	content: "+";
	position: absolute;
	left: -20px;
	font-size: 20px;
}

.doc-input span:before
{
	content: "\e90b";
	font-family: "icomoon";
	position: absolute;
	left: -35px;
	font-size: 20px;
}

.photo-input .user-image img, .photo-input .user-image span
{
	display: block;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: var(--gray3);
}

.col3{ grid-column: span 3; }
.col2{ grid-column: span 2; }

.center
{
	display: flex;
	justify-content: center;
	align-items: center;
}

.form
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-row-gap: 30px;
	grid-column-gap: 80px;
	margin: 50px 0;
	max-width: 1120px;
}

.form#document
{
	grid-row-gap: 0;
}

.form#document .button-block
{
	margin-top: 40px;
}
.form#taskform .button-block
{
	margin-top:20px;
}
.form.justview#document
{
	grid-row-gap: 30px;
}
.form.justview#document .input .input-name 
{
	margin-bottom: 5px;
}
.form.justview#document h1 
{
	margin-bottom: 0;
}
.cab-buttons
{
	display: flex;
	gap:15px;
	justify-content: flex-start;
}
.part-name
{
	padding: 30px 0 10px;
}

.form.onecolumn
{
	grid-template-columns: 1fr;
	padding: 0 30px;
	margin: 0;
}

.form.onecolumn .col2, .form.onecolumn .col3
{
	grid-column: span 1;
}

.input
{
	display: block;
	position: relative;
}

.input .input-name>a
{
	display: block;
	position: absolute;
	font-size: 12px;
	color: var(--green);
	left: 0;
	bottom: -14px;
	font-weight: normal;
}

.input .radio
{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap:32px;
	height: 48px;
}

.input .radio input
{
	display: none;
}

.input .radio input+label
{
	display: block;
	position: relative;
	padding-left: 25px;
}

.input .radio input+label:before
{
	display: flex;
	width: 16px;
	height: 16px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	content: "\e920";
	font-family: "icomoon";
	background: var(--white);
	border:1px solid var(--gray3);
	position: absolute;
	transition: all 0.3s ease;
	font-size: 0;
	left: 0;
}

.input .radio input:checked+label:before
{
	border-color: var(--green);
	content: "\e920";
	font-family: "icomoon";
	color: var(--green);
	font-size: 10px;
	line-height: 16px;
}
.input.gender.tocal
{
	display: flex;
	align-items: center;
	gap: 32px;
}
.input.gender.tocal .input-name
{
	margin:0;
}
.input.select.tocal .error 
{
	display: none !important;
}
.ui-state-highlight
{
	background-color: var(--green) !important;
	color: var(--white) !important;
}

#ui-datepicker-div
{
	border: 4px solid var(--gray3);
}

.ui-datepicker .ui-datepicker-title
{
	display: flex;
	justify-content: space-between;
}

.ui-datepicker-month, .ui-datepicker-year
{
	width: auto !important;
}


.svariants
{
	display: none;
	position: absolute;
	top: 48px;
	left: 0;
	width: 100%;
	background: var(--white);
	max-height: 200px;
	overflow: auto;
	z-index: 5;
}

.svariants a
{
	color: var(--gray3);
	padding: 10px 20px;
	text-decoration: none;
	display: block;
	box-sizing: border-box;
	font: var(--size14);
}

.input.select:after
{
	/*font-family: "icomoon";
	content: "\e908";
	pointer-events: none;
	position: absolute;
	color: var(--gray5);
	bottom: 40px;
	right: 10px;
	font-size: 25px;
	z-index: 1;*/
}

.input.select .virtualval
{
	background-image: url('/images/select.svg');
	background-position: right 12px center;
	background-size: 24px 24px;
	background-repeat: no-repeat;
	padding: 11px 36px 11px 13px;
	text-overflow: ellipsis;
}

.input.select .curValues
{
	display: flex;
	flex-wrap: wrap;
	column-gap: 10px;
	row-gap: 10px;
	margin-top: 10px;
}

.input.select .curValues a
{
	display: flex;
	align-items: center;
	color: var(--white);
	text-decoration: none;
	padding: 5px 10px;
	border-radius: 5px;
	font: var(--size12min);
	background: var(--gray-blue);
}

.input.select .curValues a:after
{
	content: "\e90a";
	margin-left: 10px;
	font-family: "icomoon";
	font-size: 10px;
	padding-top: 2px;
}

.input.select .variants
{
	display: none;
	position: absolute;
	width: 100%;
	background: var(--white);
	border-radius: 6px;
	box-shadow: 4px 0px 18px 0px rgba(0, 0, 0, 0.06);	
	max-height: 250px;
	overflow: auto;
	z-index: 2;
	top:84px;
}

.input.select .variants a
{
	display: block;
	padding: 12px 20px;
	text-decoration: none;
	line-height: 130% !important;
	font: var(--size12);
	color: var(--gray3);
}

.input.select .variants a:hover, .input.select .variants a.selected
{
	background: var(--light-blue);
}

.input .input-name
{
	display: block;
	font: var(--size16b);
	color: var(--gray2);
	margin-bottom: 12px;
	position: relative;
}

.input .error
{
	display: block;
	height: 22px;
	margin-top: 8px;
	font: var(--size14);
	color: var(--red);
}

.button-block
{
	display: flex;
	justify-content: flex-start;
	gap:20px;
}

.green-button
{
	display: block;
	padding: 12px 25px;
	color: var(--white);
	font: var(--size18);
	background: var(--green);
	border-radius: 6px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.red-button
{
	display: block;
	padding: 13px 25px;
	color: var(--white);
	font: var(--size18);
	background: var(--red);
	border-radius: 6px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.green-button:hover
{
	background: var(--dark-green);
}
/* inputs */

.ready
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 40px;
}

.ready i
{
	color: var(--green);
	font-size: 50px;
}

.ready.err i
{
	color: var(--red);
}

.ready .popup-text
{
	max-width: 400px;
	color: var(--gray2);
	text-align: center;
}

.popup-wb
{
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-gap: 20px;
	margin-bottom: 20px;
}

.popup-wb .input.select:after
{
	bottom: 10px;
}

.popup-wb>div
{
	display: flex;
	align-items: flex-end;
}

.popup-wb>div>.input
{
	width: 100%;
}

#shadow
{
	display: none;
	position: fixed;
	top:0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.2);
	align-items: center;
	justify-content: center;
	z-index: 100;
}

#popup-window
{
	display: block;
	width: 90%;
	height: auto;
	max-width: 600px;
	max-height: 92vh;
	background: var(--bg);
	position: relative;
	padding: 50px 0 60px;
	box-sizing: border-box;
	overflow: auto;
}

#popup-window .closer
{
	position: absolute;
	top:22px;
	right: 22px;
	text-decoration: none;
	color: var(--gray2);
	font-size: 18px;
	transition: all 0.3s ease;
}
.popup-content h1 
{
	margin-bottom: 24px;
}

#popup-window .closer:hover
{
	transform: scale(1.2);
}

.users-top
{
	margin-top: 24px;
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-column-gap: 80px;
	grid-row-gap: 20px;
}

.input.search:after
{
	font-family: "icomoon";
	content: "\e91b";
	position: absolute;
	bottom: 15px;
	right: 15px;
	z-index: 1;
	color: var(--gray3);
}

.users-table
{
	margin-top: 30px;
}

.table
{
	width: 100%;
}

.toiom
{
	display: none;
}

.niom .toiom
{
	display: block;
}

.ut-line
{
	display: grid;
	grid-column-gap: 12px;
	margin-bottom: 1px;
}

.ut-line>div
{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font: var(--size14);
	font-weight: 400;
	padding: 13px 0 11px;
	/*color: var(--gray-blue);*/
	color: var(--gray2);
}

.ut-line>div:nth-child(1) a
{
	text-decoration: underline;
	/*color: var(--gray-blue);*/
	color: var(--gray2);
}

.ut-line>div:nth-child(n+4) a
{
	text-decoration: none;
	/*color: var(--gray-blue);*/
	color: var(--gray2);
	font-size: 18px;
	line-height: 18px;
	height: 18px;
	transition: all 0.3s ease;
}
.ut-line>div:nth-child(n+4)>i
{
	display: block;
	flex:none;
	width: 18px;
	height: 18px;
}

.ut-line>div:nth-child(n+4) a:hover
{
	transform: scale(1.3);
}

.ut-line.ut-header
{
	background: var(--white);
	margin-bottom: 2px;
}

.ut-line.ut-header>div
{
	display: flex;
	align-items: center;
	gap: 4px;
}

.ut-line.ut-header>div .sorter
{
	display: flex;
	flex-direction: column;
	gap: 0px;
}

.ut-line.ut-header>div .sorter a
{
	font-size: 14px;
	text-decoration: none;
}

.ut-line>div>.tstate a, .tstate a
{
	font:var(--size12min);
	color: var(--gray3);
	display: flex;
	align-items: center;
}

.ut-line>div>.tstate>a, .tstate>a
{
	display: flex;
	justify-content: space-between;
	gap:6px;
	height: 28px;
	width: 100px;
	padding: 5px 6px 5px 10px;
	background: var(--blue);
	border-radius: 3px;
	color: var(--white);
	opacity: 0.8;
	text-decoration: none;
}

.ut-line>div>.tstate>a:after, .tstate>a:after
{
	content: "\e908";
	font-family: "icomoon";
	color: var(--white);
}

.ut-line>div>.tstate .maybe-state, .tstate .maybe-state
{
	display: none;
	position: absolute;
	left: 0;
	top: 36px;
	background: var(--white);
	border:1px solid var(--gray5);
	border-radius: 3px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	z-index: 2;
}

.ut-line>div>.tstate .maybe-state a, .tstate .maybe-state a
{
	display: block;
	padding: 10px;
	text-decoration: none;
	text-align: left;
}

.ut-line>div>.tstate .maybe-state a:hover, .ut-line>div>.tstate>a:hover, .tstate .maybe-state a:hover, .tstate>a:hover
{
	transform: scale(1.0);
	opacity: 1;
}

.ut-line>div>.tstate .maybe-state a:hover, .tstate .maybe-state a:hover
{
	text-decoration: none !important;
	background: var(--gray5);
}

.ut-line>div>.tstate, .tstate
{
	position: relative;
	/*height: 100%;*/
}

.ut-content .ut-line
{
	background: var(--white);
}

.ut-content .ut-line:nth-child(2n)
{
	background: var(--sline);
}

.ut-content .ut-line.state2, .ut-content .ut-line.state2:nth-child(2n)
{
	background: var(--red10);
}
.ut-full-count
{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	font: var(--size18);
	color: var(--gray-blue);
	padding-bottom: 10px;
}

.ut-full-count>*
{
	flex: 1;
}

.ut-full-count>*:nth-child(2)
{
	display: flex;
	justify-content: center;
}

.ut-full-count .actions
{
	display: flex;
	padding: 20px 40px;
	border-radius: 30px;
	justify-content: center;
	align-items: center;
	gap: 40px;
	background: var(--white);

}

.ut-full-count>div span
{
	color: var(--gray3);
}

.ut-full-count>div a
{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
	font-weight:400;
	text-decoration: none;
	color: var(--gray3);
}

.ut-full-count>div a:hover
{
	color: var(--gray2);
}


.ut-full-count>div i
{
	color: var(--green);
	font-size: 1.2em;
	display: block;
	transition: all 0.3s ease;
}

.ut-full-count>div a:hover i
{
	transform: scale(1.1);
}

.ut-full-count .subactions
{
	display: flex;
	justify-content: flex-end;
}

.ut-full-count .subactions a
{
	color: var(--gray3);
}

.ut-full-count .subactions a:hover
{
	color: var(--gray2);
}

.ut-footer
{
	/*background: var(--white);*/
	color: var(--gray3);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 32px 0 18px;
	font: var(--size16);
	gap: 28px;
}

.ut-footer .ut-nav
{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
}

.ut-footer .ut-nav a
{
	color: var(--gray3);
	font-size: 24px;
	text-decoration: none;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
}

.ut-footer .ut-nav a:hover
{
	transform: scale(1.3);
	color: var(--gray2);
}

.users-table .ut-line
{
	grid-template-columns: 2fr 1fr 110px 150px 150px 150px 110px 110px 60px;
}

.sl-npdocs-table .ut-line
{
	grid-template-columns: 2fr 1fr 110px 150px 150px 150px 150px 60px;
}

.sl-methodological-table .ut-line
{
	grid-template-columns: 150px 150px 110px 150px 150px 1fr 150px 60px;
}

.sl-eventes-table .ut-line
{
	grid-template-columns: 150px 1fr 150px 120px 120px 110px 110px 150px 150px 60px;
}

.tasks-table .ut-line
{
	grid-template-columns: 110px 1fr 160px 60px 150px 150px 120px 110px 90px;
}

.quests-table .ut-line
{
	grid-template-columns: 250px 150px 1fr 120px 80px 90px 110px;
}

.quests-table.federal .ut-line
{
	grid-template-columns: 250px 150px 150px 1fr 120px 80px 90px 90px;
}

.comps-table .ut-line
{
	grid-template-columns: 3fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.comps-table .ut-line>div:last-child
{
	justify-content: center;
	align-items: center;
}
.comps-table .bedit
{
	width: 58px;
	text-align: center;
}

.addComp
{
	display: grid;
	grid-template-columns: 1fr 200px 160px 141px;
	grid-gap: 10px;
	margin: 15px 0 35px;
}

.comp-type
{
	display: block;
	padding: 15px 20px;
	background: var(--gray-blue);
	color: var(--white);
}


button
{
	-webkit-appearance:none;
	border-width: 0;
}

.tasks-table .ut-line a
{
	text-decoration: none;
	color: var(--gray2);
}

.tasks-table .ut-line div:nth-child(2) a:hover
{
	text-decoration: underline;
}

.forms-table .ut-line
{

}

.tasks-table .ut-line>div:nth-child(2)
{
	justify-content: flex-start;
	text-align: left;
}

.regulations-table, .cases-table, .educational-table, .tasks-table, .forms-table
{
	margin-top: 30px;
}

.tfiles
{
	flex-direction: column;
}

.tfiles a
{
	display: block;
	font: var(--size14);
	text-decoration: none;
	color: var(--gray2);
}

.tfiles a:hover
{
	text-decoration: underline;
}

.hiddenspan
{
	position: relative;
}

.hiddenspan span
{
	display: none;
}

.hiddenspan:hover span
{
	display: block;
	position: absolute;
	left: 0;
	top:20px;
	width: 140%;
	box-sizing: border-box;
	padding: 10px;
	background: var(--white);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	z-index: 2;
}

.regulations-table .ut-line
{
	grid-template-columns: 1fr 150px 150px 150px 150px 160px 160px 145px;	
}

.cases-table .ut-line
{
	grid-template-columns: 1fr 160px 160px 160px 150px 160px 150px;		
}

.npdocs-table .ut-line
{
	grid-template-columns: 1fr 160px 160px 160px 150px 160px 160px;		
}

.metodrek-table .ut-line
{
	grid-template-columns: 1fr 160px 160px 160px 160px 160px;		
}

.diagmat-table .ut-line, .courseprog-table .ut-line, .posobia-table .ut-line
{
	grid-template-columns: 1fr 160px 160px 1fr 160px 160px 150px;			
}

.educational-table .ut-line
{
	grid-template-columns: 1fr 160px 1fr 110px 160px 110px 160px 130px;	
}

.forms-table .ut-line
{
	grid-template-columns: 1fr 160px 100px 110px 160px 160px 160px 150px;	
}

.ut-line>div:last-child
{
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-start;
}

.u-loader
{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 50px;
}

.user-short-info
{
	padding: 0 50px;
}

.user-short-info>.button-block, .user-short-info>h2
{
	padding-top: 50px;
}
#iUser .user-short-info 
{
	padding: 0;
}

.user-short-info .user-photo
{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-bottom: 20px;
}

.user-short-info .user-photo .photo-block
{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: var(--white);
	background-size: cover;
	background-position: center;
}

.user-short-info h1
{
	text-align: center;
}

.user-info-block
{
	padding: 10px 0;
	border-bottom: 1px solid var(--gray5);
}

.user-info-block .ui-name, .taskIOM-status-coloumn .ui-name
{
	color: var(--blue);
	font: var(--size16b);
}

.user-info-block .ui-val
{
	color: var(--gray3);
	font: var(--size14);
}

#iQuests .taskIOM-fullinfo
{
	grid-template-columns: 2fr 1fr;
}

#iQuests .taskIOM-fullinfo .user-info-block
{
	border-bottom: none;
}

#iQuests .taskIOM-fullinfo .user-info-block .error
{
	display: none;
}

.lib-content
{
	display: grid;
	grid-template-columns: 250px 1fr;
	grid-gap: 20px;
	margin-top: 20px;
}
.lib-content .regulations-table
{
	margin-top: 20px;
}

.lib-content .lib-cats
{
	padding-top: 50px;
	grid-column: span 2;
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid var(--gray5);
}

.lib-content .lib-cats a
{
	display: block;
	font: var(--size14);
	color: var(--light-gray);
	padding: 0 24px 15px;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.lib-content .lib-cats a.selected
{
	color: var(--green);
	font-weight: 600;
	border-bottom: 2px solid var(--green);
}

.lib-menu ul
{
	list-style-type: none;
	padding: 0;
	margin-top: 0px;
}
.lib-menu>ul
{	margin-top: 41px;}

.lib-menu ul li
{
	padding: 10px 0;
}

.lib-menu ul li ul
{
	padding-left: 30px;
}

.lib-menu ul li ul li:last-child
{
	padding-bottom: 0;
}

.lib-menu ul li ul li:first-child
{
	padding-top: 20px;
}

.lib-menu ul li ul li
{
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap:10px;
}

.lib-menu ul li ul li:before
{
	content: "\e909";
	font-family: "icomoon";
	position: relative;
	margin-left: -20px;
	color: var(--light-gray);
}

.lib-menu ul a
{
	display: block;
	text-decoration: none;
	color: var(--gray2);
	/*color: #535353;*/
}

.lib-menu ul a.selected
{
	color: var(--green);
	font-weight: 600;
}

.double-top
{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap:40px;
}
.double-top.library h1 
{
	flex:none;
	display: inline-block;
	width: 230px;
}
.double-top .search
{
	width: 100%;
}
/*.lib-menu .filters
{
	grid-template-columns: 1fr;
}*/


.filters
{
	grid-column: span 2;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 20px;
	grid-row-gap: 12px;
}
.filters .error 
{
	display: none;
}

.clear-block
{
	display: flex;
	align-items: flex-start; 
	/*padding-bottom: 30px;*/
	gap:20px;
	padding-top: 36px;
}

.clear-filter
{
	text-decoration: none;
	color: var(--gray3);
	background-color: transparent;
	height:48px;
	display:flex; 
	align-items: center;
	font: var(--size18);
	gap:6px;
}
.clear-filter:hover 
{
	color: var(--dark-green);
}
.clear-filter i 
{
	font-size: 12px;
	font-weight: bold;
}

.sb
{
	display: flex;
	justify-content: space-between;
}

.q-name
{
	display: block;
	font-weight: bold;
	padding: 10px 20px;
}

.q-txt
{
	display: block;
	padding: 0 20px 0 40px;
}

.q-link
{
	display: block;
	padding: 10px 20px 20px 40px;
}

.comps-block-wrapper
{
	display: grid;
	grid-template-columns: 400px 1fr;
	grid-gap: 80px;
}

.flex-top
{
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	gap: 24px;
}
.flex-top h1 div 
{
	display: inline;
}

.flex-top h1 a
{
	font:var(--size14);
	text-transform: none;
	text-decoration: none;
	color: var(--gray-blue);
	padding-bottom: 7px;
	padding-left:15px;
}

.flex-top h1 a:hover
{
	color: var(--gray2);
}

.iom-short
{
	font-size: 14px;
	line-height: 22px;
	color: var(--gray2);
	display: flex;
	justify-content: space-between;
	gap:50px;
}

.iom-short b
{
	font-weight: 600;
}

.this-iom-user
{
	display: grid;
	grid-template-columns: 1fr 2fr 2fr;
	grid-column-gap: 100px;
	grid-row-gap: 60px;
}

.this-iom-user>div.tiu-block
{
	font-size: 16px;
	line-height: 24px;
	font-weight: bold;
	color: var(--gray-blue);
}

.this-iom-user>div
{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap:40px;
}

.this-iom-user .udata-item
{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap:4px;
}

.this-iom-user .udata-item .ud-title
{
	font-weight: bold;
	font-size: 16px;
	line-height: 34px;
	color: var(--gray2);
}

.this-iom-user .udata-item .ud-title
{
	font-size: 16px;
	line-height: 24px;
	color: var(--gray2);
}

.tiu-delimeter
{
	grid-column: span 3;
	height: 1px;
	background: #E0E0E0;
}

.iom-filter
{
	margin-bottom: 35px;
}

.dif-ball input
{
	width: 45px;
	text-align: center;
	height: 30px;
	font-size: 18px;
	line-height: 24px;
	font-family: "Fira Sans";
	padding: 3px 10px;
	display: inline-block;
	border-color: #e5e5e5;
}

.dif-date span
{
	position: relative;
	display: flex;
	justify-content: center;
	gap:3px;
	align-items: center;
}

.dif-date i
{
	position: relative;
	transform: rotate(90deg);
	top:0px;
	color: var(--gray3);
	display: block;
}

.dif-date span input
{
	opacity: 0;
	-webkit-appearance:none;
	position: absolute;
	z-index: 2;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
}

.add-diff-block
{
	display: flex;
	justify-content: flex-start;
	padding-top: 30px;
}

.add-diff-block a
{
	color: var(--green);
	font-size: 18px;
	display: flex;
	text-decoration: none;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}

.add-diff-block a i
{
	font-size: 14px;
}

.add-diff-block a span
{
	border-bottom: 1px solid var(--green);
	font-weight: 500;
}

.pu-comps
{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap:10px;
	padding: 0 25px;
}

.dif-list
{
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 10px;
}

.dif-list>a
{
	color: var(--gray2);
	text-decoration: none;
}

.dif-list .other-comp
{
	display: flex;
	justify-content: space-between;
	gap:20px;
}

.this-iom-user .photo-block
{
	display: block;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-position: center;
	background-size: cover;
	background-color: var(--white);
}

.competencies-list
	{
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 40px;
	}
	.competence-item, .competence-tasks-list
	{
		display: flex;
		flex-direction: column;
		gap:20px;
	}

	.hidden .competence-tasks-list
	{
		display: none;
	}
	.competence-item>a.tc-name /*  Добавь --size18b:600 18px/24px 'Montserrat', sans-serif; */
	{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap:8px;
		color:var(--gray2);
		font:600 18px/24px 'Montserrat', sans-serif;
		text-decoration: none;
	}
	.competence-item>a.tc-name .icon-chevron-right
	{
		font-size: 24px;
		transform: rotate(90deg);
		transition: all 0.3s ease;
	}

	.competence-item.hidden>a.tc-name .icon-chevron-right
	{
		transform: rotate(-90deg);
	}
	.competence-tasks-list
	{
		
	}
	.block-wsh /*Стандартные блоки потом должны быть, нужно им единый класс: белый с тенью блок*/
	{
		padding:20px 10px;
		border-radius: 8px;
		box-shadow: 4px 0px 18px rgba(0, 0, 0, 0.06);
		background-color: #fff;
	}
	.c-task-item
	{
		display: grid;
		color: var(--gray2);
		grid-template-columns: 1fr 1fr 200px 123px 78px;
	}
	.c-task-item>div
	{
		display: flex;
		align-items: center;
		padding:0 20px;
		border-right:1px solid var(--light-blue); /*Цвет светлосерый*/
	}
	.c-task-item>div:first-child
	{
		display: flex;
		gap:30px;
	}
	.c-task-item>div:last-child
	{
		border:none;	
	}
	.c-task-item .t-check
	{

	}
	.c-task-item .t-who, .c-task-item .t-data, .c-task-item .t-view
	{
		text-align: center;
		justify-content: center;
	}
	.t-data
	{
		flex-direction: column;
		gap:4px;
	}
	.c-task-item .t-view a /*сделать как везде чтобы при наведении увеличивалась и размер одинаковый*/
	{
		text-decoration: none;
		color: var(--green);
		font-size: 18px;
	}
	.c-task-item .t-competence
	{
		padding:0 30px;
	}

	input[type=checkbox] {
		display: none;
		}
	input[type=checkbox]+label {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	gap: 15px;
	position: relative;
	color: var(--gray2);
	}

	input[type=checkbox]+label:before {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border: 2px solid var(--gray-blue);
	border-radius: 4px;
	background: var(--white);
	content: "";
	font-family: "icomoon";
	font-size: 10px;
	}

	input[type=checkbox]:checked+label:before {
	content: "\e92b";
	line-height: 20px;
	font-size: 10px;
	border-color: var(--green);
	background-color: var(--green);
	color: var(--white);
	}

	.clue
	{
		display: flex;
		flex-direction: column;
		gap:15px;
		position: absolute;
		background-color: rgba(0, 0, 0, 0.7);
		padding:20px 35px 25px;
		color: var(--white);
		width:453px;
		min-height: 107px;
		z-index: 5;
		text-decoration: none;
		box-sizing: border-box;
	}

	.clue .icon-alert-circle
	{
		color: var(--red);
	}

.clue:before
	{
		display: block;
		position: absolute;
		pointer-events: none;
		content: "";
		width: 0; 
		height: 0; 
		border-left: 25px solid transparent;
		border-right: 25px solid transparent;
		border-bottom: 25px solid rgba(0, 0, 0, 0.7);
		top:-25px;
		left: 50%;
		margin-left: -25px;
	}

	.clue.to-left-arrow:before
	{
		top:52px;
		left: -12.4px;
		transform: rotate(-90deg);
	}
	.clue:hover 
	{
		background-color: #454545;
	}
	.clue .cluename /* --h3: 500 24px/30px 'Fira Sans', sans-serif; */
	{
		position: relative;
		display: block;
		color: var(--white);
		text-transform: uppercase;
		font: 500 24px/30px 'Fira Sans', sans-serif; 
	}
	.clue .cluetext
	{
		color: var(--wihte);
		line-height: 24px;
	}
	.clue .buttons-line
	{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top:10px;
	}

	.clue .buttons-line.center
	{
		justify-content: center;
	}

	.clue .buttons-line .hide 
	{
		color: var(--gray-blue);
		text-decoration: none;
	}
	.clue .buttons-line .hide:hover
	{
		color:var(--white);
		text-decoration: underline;
	}
	.clue .icon-clear
	{
		position:absolute;
		cursor:pointer;
		top:5px;
		right:5px;
		font-size: 16px;
		color: var(--gray-blue);
	}

	.clue .icon-alert-circle
	{
		position:absolute;
		cursor: initial;
		top:-6px;
		right: 5px;
		font-size: 40px;
	}

	.clue .icon-clear:hover 
	{
		color: var(--white);
	}
.s-button
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 40px;
	z-index: 2;
}

.users-top .clear-block
{
	padding-bottom: 0;
	padding-top: 37px;
}

.lib-filt .clear-block
{
	padding-top: 10px;
}

.notask
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 50px 0;
	width: 100%;
}

.global-remover
{
	display: block;
	padding: 0 20px;
}

.rem-user
{
	display: flex;
	justify-content: space-between;
	margin: 5px 0;
}

@media all and (max-width: 1200px)
{
	.comps-block-wrapper
	{
		grid-gap: 20px;
	}	
}

.comps-block-wrapper .cbw-left 
{
	display: block;
}

.comps-block-wrapper .cbw-left a
{
	height: 60px;
	display: flex;
	width: 100%;
	margin-right: 50px;
	align-items: center;
	padding-right: 60px;
	font-family: 'Fira Sans', sans-serif;
	font-weight: 500;
	text-decoration: none;
	color: var(--black);
	position: relative;
	background: transparent;
	margin-bottom: 20px;
	box-sizing: border-box;
	overflow: hidden;
}

.comps-block-wrapper .cbw-left a span
{
	background: #DBE5F3;
	height: 60px;
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 19px 5px 18px 23px;
	z-index: 2;
}

.comps-block-wrapper .cbw-left a:before
{
	content: "";
	width: 42px;
	height: 42px;
	transform: rotate(45deg);
	transform-origin: center center;
	position: absolute;
	background: #DBE5F3;
	top: 8px;
	right: 36px;
	border-top: 1px solid var(--white);
	border-right: 1px solid var(--white);
	z-index: 2;
}

.comps-block-wrapper .cbw-left a:after
{
	content: "";
	width: 50px;
	height: 50px;
	transform: rotate(45deg);
	transform-origin: center center;
	position: absolute;

	background: #DBE5F3;
	top: 4px;
	right: 32px;
	z-index: 1;
}

.comps-block-wrapper .cbw-left a:hover, .comps-block-wrapper .cbw-left a.selected
{
	color: var(--white);
}

.comps-block-wrapper .cbw-left a:hover span, .comps-block-wrapper .cbw-left a.selected span,
.comps-block-wrapper .cbw-left a:hover::before, .comps-block-wrapper .cbw-left a.selected::before,
.comps-block-wrapper .cbw-left a:hover::after, .comps-block-wrapper .cbw-left a.selected::after
{
	background: var(--blue);
}

.comps-block-wrapper .cbw-right
{
	display: flex;
	align-items: center;
}

.comps-block-first-line
{
	color: var(--gray-blue);
	text-align: center;
	font: var(--size14);
}

.cbc-line>div:nth-child(n+2)
{
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.cbc-line>div:nth-child(5) a
{
	text-decoration: none;
	color: var(--gray2);
	cursor: pointer;
}

.dif-ball
{
	font-size: 18px;
	line-height: 24px;
	color: var(--gray2);
	font-family: "Fira Sans";
}

.comps-block
{
	display: none;
	width: 100%;
}

.comps-block.visible
{
	display: block;
}

.dif-date
{
	font-size: 18px;
	line-height: 24px;
	color: var(--gray-blue);
	font-family: "Fira Sans";
}

.comps-block-first-line, .cbc-line
{
	display: grid;
	grid-template-columns: 4fr 2fr 2fr 2fr 50px;
}

.cbc-line>div:nth-child(1), .comps-block-first-line>div:nth-child(1)
{
	border-right:1px solid #E0E0E0;
	padding-right: 50px;
}

.cbc-line>div
{
	padding:18px 0 11px;
}

.big-num
{
	color: var(--green);
	font-size: 40px;
	line-height: 40px;
}

.comp-name
{
	color: var(--blue);
	font-size: 24px;
	font-family: "Fira Sans";
}

.newtabs
{
	display: flex;
	justify-content: center;
	border-bottom: 1px solid rgba(153,166,183,0.3);
	gap: 60px;
	margin-bottom: 45px;
}

.newtabs a
{
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	display: block;
	color: var(--gray-blue);
	font-size: 16px;
	padding:0 0 15px;
	text-decoration: none;
}

.newtabs a:hover
{
	color: var(--gray2);
}

.newtabs a.selected, .newtabs a.selected:hover
{
	color: var(--green);
	border-color: var(--green);
	font-weight: 500;
}


@media all and (max-width: 700px)
{
	header
	{
		padding: 5px 10px;
	}

	header .header-left a:nth-child(n+2), header .logo img:nth-child(n+2)
	{
		display: none;
	}

	.main
	{
		grid-template-columns: 1fr;
	}

	.main .menu
	{
		display: none;
	}

	.form
	{
		grid-template-columns: 1fr;
	}

	.col3
	{
		grid-column: span 3;
	}
}


@keyframes ldio-g9jromamc8f {
  0% { transform: rotate(0) }
  100% { transform: rotate(360deg) }
}
.ldio-g9jromamc8f div { box-sizing: border-box!important }
.ldio-g9jromamc8f > div {
  position: absolute;
  width: 90px;
  height: 90px;
  top: 5px;
  left: 5px;
  border-radius: 50%;
  border: 4px solid #000;
  border-color: #2fd385 transparent #2fd385 transparent;
  animation: ldio-g9jromamc8f 1s linear infinite;
}
.ldio-g9jromamc8f > div:nth-child(2) { border-color: transparent }
.ldio-g9jromamc8f > div:nth-child(2) div {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(45deg);
}
.ldio-g9jromamc8f > div:nth-child(2) div:before, .ldio-g9jromamc8f > div:nth-child(2) div:after { 
  content: "";
  display: block;
  position: absolute;
  width: 4px;
  height: 4px;
  top: -4px;
  left: 39px;
  background: #2fd385;
  border-radius: 50%;
  box-shadow: 0 86px 0 0 #2fd385;
}
.ldio-g9jromamc8f > div:nth-child(2) div:after { 
  left: -4px;
  top: 39px;
  box-shadow: 86px 0 0 0 #2fd385;
}
.loadingio-spinner-dual-ring-g1npfpfq0ks {
  width: 48px;
  height: 48px;
  display: inline-block;
  overflow: hidden;
  background: none;
}
.ldio-g9jromamc8f {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(0.48);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-g9jromamc8f div { box-sizing: content-box; }
/* generated by https://loading.io/ */

#quests
{
	display: block;
	padding: 10px;
	border: 1px dashed var(--gray3);
}

#quests>span
{
	position: relative;
	display: block;
	text-align: center;
	line-height: 50px;
	color: var(--gray3);
}

#quests>div
{
	display: grid;
	grid-template-columns: 1fr 30px;
	border-radius: 4px;
	background: var(--gray-blue);
	color: var(--white);
	margin-bottom: 10px;
}

#quests>div:last-child
{
	margin-bottom: 0;
}

#quests>div span
{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	padding: 5px 10px;
}

#quests>div a
{
	display: flex;
	width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	text-decoration: none;
	color: var(--red);
}

.quest-block
{
	display: block;
}
.quest-block .tabs
{
	margin-left: -20px;
}
#dif
{
	margin-top: 32px;
}
.quest-block.niom
{
	display: grid;
	display:grid;
	grid-template-columns:1fr 400px;
	/*grid-template-rows:1fr 1fr;*/
	grid-row-gap: 20px;
	height: calc(100vh - 151px);
}

.main-bord, #iomComp
{
	overflow: auto;
}

#iomComp
{
	display: none;
}

#iomComp h1
{
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap:20px;
}

#iomComp h1 span
{
	font-size: 14px;
	font-weight: normal;
	line-height: 18px;
}

#iomCreator
{
	display: none;
	background: var(--bg);
	overflow: auto;
	grid-row: span 2;
}

.tabs
{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.tabs a
{
	display: block;
	text-decoration: none;
	color: var(--gray3);
	padding: 12px 20px;
}

.tabs div
{
	height: 20px;
	width: 1px;
	background: var(--gray-blue);
}

.tabs a.selected
{
	color: var(--blue);
	font-weight: bold;
}

.tabs a.unavail
{
	color: var(--gray5);
}

div.tab
{
	min-height: calc(100vh - 234px);
}

.dateEditor span:after
{
	font-family: "icomoon";
	content: "\e90d";
	margin-left: 5px;
	color: var(--green);
}



.dateEditor
{
	position: relative;
}

.dateEditor input
{
	-webkit-appearance:none;
	opacity: 0;
	top:0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	position: absolute;
}

#iVivod textarea
{
	min-height: 400px;
	max-width: 800px;
	resize: none;
	margin: 0 auto;
}

textarea
{
	resize: none;
}

.c-filter
{
	margin-top: 20px;
	display: grid;
	grid-template-columns: 216px max-content repeat(2, 1fr);
	grid-gap: 20px;
}

@media all and (max-width: 1350px)
{
	.c-filter
	{
		grid-template-columns: 216px 1fr minmax(310px, 2fr) minmax(310px, 2fr);
	}
}

.history-item
	{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 10px;
		padding: 20px 40px;
	}

	.hi-date, .hi-file
	{
		text-align: right;
	}


	.hi-comment
	{
		/*grid-column: span 2;*/
	}
.history-table .ut-line>div:last-child
{
	justify-content: center;
}

.inoe
{
	margin-top: 5px !important;
}

.one-line
{
	display: flex;
	gap: 30px;
	align-items: center;
}

.notibell
{
	position: relative;
}

.notibell span
{
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: var(--red);
	position: absolute;
	top: 0;
	right: 0;
}

.padbot10
{
	padding-bottom: 15px;
}