@charset "UTF-8";
/* Colors Used in app */
	:root {
		--main_green: #76AC00;
		--main_red: #d11a2a;	
		--main_black_transparent: rgba(0, 0, 0, 0.5);
		--main_gray: #EEE;
		--neutral_blue: #53868B;
		--neutral_green: #66AC50;
		--neutral_coral: #EE6A50;
	}
	

/* Main */
	h2 {
		margin-top:10px;
		margin-bottom:10px;
	}

	p {
		margin: 10px 0;
	}

	html { 
		height: 100%;
	}

	body {
		padding: 0;
		position: relative;
		height:100%;
		margin:auto;
		max-width:600px;
	}
	
	#logo_{
		padding-left: 10px;
	}


	#wrapper {
		min-height: 100%;
		padding:0 10px 0 10px;
	}

	#content{
		/*background: none repeat scroll 0 0 #ffffff;*/
		display: block;
		margin:auto;
		min-height:100%;
		height: 100%;
		padding: 0px 5px;
	 }
	 
	.dropdown{
		 min-height: 1px;
		 width: fit-content;
		 height: fit-content;
		 cursor:pointer;
		 z-index:999;
	 }
	.user_icon{
		padding: 0;
		display: inline-block;
		max-height: 50px;
		vertical-align: middle;
		border-radius: 50%;
		border: 3px solid var(--main_green);
	}
	
	.dropdown:hover #user_icon{
		filter: brightness(0) saturate(100%) invert(53%) sepia(15%) saturate(4675%) hue-rotate(46deg) brightness(100%) contrast(101%);
	}

	.dropdown-content {
		  display:none;
		  width: fit-content;
		  height: fit-content;
		  z-index: 9999;
		  position:absolute;
		  top:85px;
		  right:20px;
		  font-size: 20px;
	}

	.dropdown:hover .dropdown-content{
		display: inline-block;
		color: var(--main_red);
		transition: all 0.6s ease;
	}
	.dropdown-content span {
		padding-right: 35px;
		color: #fff;
		font-size: 1.1em;
		border: 2px solid var(--main_red);
		background-color: var(--main_red);
	}
	.dropdown-content span:hover {
		background-color: var(--main_black_transparent);
		color: var(--main_red);
		background-color: #fff;
		}
	
	.dropdown-content span:hover + #user_icon{
		filter: brightness(0) saturate(100%) invert(18%) sepia(85%) saturate(4515%) hue-rotate(346deg) brightness(84%) contrast(95%);
		}
	
	#back {
		position:absolute;top:20px;right:20px;display:none;width:60px;cursor:pointer;z-index:999;
	}
	
	#back:hover {
		filter: invert(53%) sepia(15%) saturate(4675%) hue-rotate(46deg) brightness(100%) contrast(101%);
	}

	/* Логин */
	#login {
		margin-top:100px;
	}

	#login input {
		text-align:center;
		margin-left:10px;
		margin-right:10px;	
		border-bottom:1px solid;
		border-top:none;
		border-left:none;
		border-right:none;
		width:90%;
		font-size: 1.6em;
	}

	#login h2 {
		text-align:left;
		margin-left:20px;
		vertical-align:middle;
		display:table-cell;
		font-size: 1.6em;
	}

	#login_btn {
		width:100%;
		height:60px;
		font-size: 1.6em;
	}

	/* Таблица дополнительных ПУ */
	/* Таблица основных ПУ */
	#editPUView, #addPUView  {
		display:none;
		grid-template-rows: min-content; /* 1 строка */
		grid-template-columns: 1fr 1fr; /* 2 столбца */
		grid-auto-flow: row;
		grid-auto-rows: min-content;
		width:100%;
		margin:20px 0 10px 0;
		z-index:999;
		align-items: center;
		justify-items:center;
		grid-column-gap: 3px;		
		grid-row-gap: 20px;		
	}
	
	#editPUView h3, #addPUView h3 {
		justify-self:start;
		margin-left:5px;
		font-size: 1.15em;	
	}

	#editPUView .input, #addPUView .input {
		text-align:center;
		margin-right:5px;	
		border:none;
		border-bottom:1px solid;
		width:90%;
		font-size: 1.2em;
	}

	#editPUView .text, #addPUView .text {
		text-align:center;
		margin-right:5px;	
		border:none;
		width:90%;
		font-size: 1.15em;
	}

	#editPUView .selector, #addPUView .selector {
		justify-self:center;
		margin-right:5px;	
		width:90%;
	}

	#editPUView .left_btn, #addPUView .left_btn {
		justify-self:end;
		margin:15px 0;
		}
	
	#editPUView .right_btn, #addPUView .right_btn {
		justify-self:start;
		margin:15px 0;
	}

	#editPUView .save_btn, #addPUView .save_btn {
		grid-column: 1 / span 2;
		justify-self:center;
	}	
	
	#email {
		text-align:left;
		margin-left:10px;
		margin-right:10px;	
		border-bottom:1px solid;
		border-top:none;
		border-left:none;
		border-right:none;
		width:50%;
		font-size: 1.1em;
	}

	#file-uploader_1, #file-uploader_2 {
	  display:none;
	}
	
	::-webkit-input-placeholder  { font-size: 0.9em;color:#CCC; }
	::-moz-placeholder { font-size: 0.9em;color:#CCC; }
	:-ms-input-placeholder { font-size: 0.9em;color:#CCC; }
	:-moz-placeholder { font-size: 0.9em;color:#CCC; }

 /* Кнопки */
	.btn {padding:6px 15px;width:auto;line-height:1rem;}

	.btn:disabled
	{
		color: #bcbcbc;
		background-color: #f0f0f0;
		background-repeat: repeat-x;
		background-image: linear-gradient(to top, #f4f4f4, #f0f0f0);
		border: 1px solid #d2d2d2;
	}

	.btn:disabled:hower
	{
		color: #bcbcbc;
		background-color: #f0f0f0;
		background-repeat: repeat-x;
		background-image: linear-gradient(to top, #f4f4f4, #f0f0f0);
		border: 1px solid #d2d2d2;
	}

	button::-moz-focus-inner {border:0}
	button:focus {outline:none;}
	button:active {outline:none;}

/* Конец Кнопки */
 
/* Таблицы */
	table {
		border-collapse: collapse;
		margin: 0;
		padding: 0;
		width:100%;
	}
	table th, table td {
		padding: 10px 5px;
	}
	
	table.editPU_edit th, table.editPU_edit td {
		padding: 10px 0px;
	}
/* Конец Таблицы */

/* Поля ввода */
	input {
		outline: medium none;
	}

	input, select, textarea {
		background: none repeat scroll 0 0 #FFFFFF;
		border: 1px solid #CCCCCC;
	}

	input, select {
		margin: 0;
		font-size: 16px;
		padding: 5px;
	}
/* Конец Поля ввода*/

/* Подвал */
/* Конец Подвал */

/* Имя текущего пользователя */
	#name {
	z-index:8888;
	position:absolute;
	top:85px;
	right:22px;
	font-size:15px;
	font-weight: 10px;
	text-align:right;
	}

/* Календарь */

	#calendar-wrapper{
		width=auto;
	}
	#fc, #fc1 {
		border-collapse:collapse;
		/* font-family: Calibri; */
		font-size:2em;
		width:100%;
		background: var(--main_green);
		color: #fff;
		table-layout:fixed;
		}
		
	#fc td, #fc th {
		max-width:14vw !important; 
		text-align:center;
		vertical-align:middle;
		height:55px;
		padding:4px;
		position:relative;
		}
		
	#fc1 #mns {
		padding: 20px 25px;
		width: 100%;
		text-align: center;
		height:65px;
	}
	#fc .weekdays {
		padding: 5;
		color: #000;
		background-color: #ddd;
	}
	#fc td:not(:first-child) {
		border-left: 1px solid #cccccc;
		}
	#fc tr:not(:last-child) td {
		border-bottom: 1px solid #cccccc;
		}
	
	#csubm, #caddm {
			width:45px;
			font-family: Calibri;
		}
	#csubm:hover, #caddm:hover {
		color: #FFCC66;
		}
		
	.st2 {
		position:absolute;
		top:3px;
		left:3px;
		font-size:0.8em;
		color:#0000ff;
		}			

	.st34 {
		position:absolute;
		top:3px;
		right:3px;
		font-size:0.8em;
		color:var(--main_red);
		}		

/* Список задач */	
	#queriesTable td {
		font-size: 1.4em;
		line-height:1.4em;
		padding: 20px 10px 20px 10px; 
		}

	#queriesTable tr {
		border-top:1px dotted; 
		border-bottom:1px dotted; 
		cursor: pointer;
		}
		
	#no_queries_found{
		margin-top: 5%;
	}
	
/* Add Pu */
	#delete_pu_img {
		filter: invert();
	}
	
	#delete_pu_img:hover {
		filter: none;
	}


/* Edit Pu */
	#editPUView .editPULabel{
		min-width:300px;
	}
	#editPUView .editPUValue{
		max-width:50%;text-align:center;padding:20px 5px 20px 5px;
	}

/* ПРОВЕРЕНО / НЕПРОВЕРЕНО */

	#saveTable{
		height: 80px;
		
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
	}
	#saveTable, #add_counter_table {
		min-height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px;
		margin-bottom: 20px;
	}
	
	#saveTable td {
		margin: 0 10px;
	}
	
	#editPU_save, #addPU_save, #saveOK, #saveNO, #addpu, .foto_btn, .fileload_btn, .fotogal_btn, .safari_foto_btn  {
		height:40px !important;
		cursor:pointer;
		width: 138px;
		padding: 8px;
		max-width: 80%;
		border: 1px solid #fff;
		border-radius: 5%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-flow: column nowrap;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
	}
	
	/* This is the part that actually hides the 'Choose file' text box for camera inputs */
	.safari_foto_btn input {
	  display: none;
	}
	
	#addpu{
		background-color: var(--main_green);
		filter: sepia(30%) saturate(70%) brightness(120%) contrast(100%);
	}

	#saveOK{
		background-color: var(--main_green);
	}

	#editPU_save, #addPU_save{
		background-color: var(--main_green);
	}
	
	.foto_btn, .safari_foto_btn {
		background-color: var(--neutral_blue);
	}

	.fileload_btn{
		background-color: var(--neutral_green);
	}
	
	.fotogal_btn{
		background-color: var(--neutral_coral);
	}

	#saveNO{
		background-color: var(--main_red);
	}

	#addpu img, .foto_btn img, .fileload_btn img, .fotogal_btn img, .safari_foto_btn img{
		padding-top: 4px;
		filter: invert(100%) sepia(21%) saturate(0%) hue-rotate(206deg) brightness(114%) contrast(100%);
	}

	#saveOK:hover, #addpu:hover{
		background-color: #fff;
		border: 1px solid var(--main_green);
		color: var(--main_green);
	}

	#editPU_save:hover, #addPU_save:hover{
		background-color: #fff;
		border: 1px solid var(--main_green);
		color: var(--main_green);
	}
	
	.foto_btn:hover, .safari_foto_btn:hover{
		background-color: #fff;
		border: 1px solid var(--neutral_blue);
		color: var(--neutral_blue);
	}

	.foto_btn:hover img, .safari_foto_btn:hover img{
		filter: invert(50%) sepia(53%) saturate(281%) hue-rotate(137deg) brightness(86%) contrast(86%);
	}

	.fileload_btn:hover{
		background-color: #fff;
		border: 1px solid var(--neutral_green);
		color: var(--neutral_green);
	}

	.fileload_btn:hover img{
		filter: invert(50%) sepia(53%) saturate(800%) hue-rotate(60deg) brightness(86%) contrast(86%)
	}

	.fotogal_btn:hover{
		background-color: #fff;
		border: 1px solid var(--neutral_coral);
		color: var(--neutral_coral);
	}

	.fotogal_btn:hover img{
		filter: invert(51%) sepia(56%) saturate(1689%) hue-rotate(330deg) brightness(99%) contrast(88%);
	}

	#saveOK:hover img, #addpu:hover img{
		filter: brightness(0) saturate(100%) invert(53%) sepia(15%) saturate(4675%) hue-rotate(46deg) brightness(100%) contrast(101%);
	}

	#editPU_save:hover img, #addPU_save:hover img{
		filter: brightness(0) saturate(100%) invert(53%) sepia(15%) saturate(4675%) hue-rotate(46deg) brightness(100%) contrast(101%);
	}
	
	#saveNO:hover{
		background-color: #fff;
		border: 1px solid var(--main_red);
		color: var(--main_red);
	}

	#saveNO:hover img{
		filter: brightness(0) saturate(100%) invert(18%) sepia(95%) saturate(3143%) hue-rotate(344deg) brightness(83%) contrast(98%);
	}

/* Окошко */			
	#dialog {
		text-align:center;
		z-index:9999;
		width: 100vw !important;
		position:fixed;
		max-width:580px !important;
		top:0;
		min-height:120px;
		background-color:yellow;
		
		display:none;
	}
	
	#dialog h3, #dialog h4{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* ВИДЕОЗАХВАТ */
	#videoView {
		display:none;
		grid-template-areas: "close"  
							 "video";
		grid-template-rows:  58px 1fr; /* 3 строки */
		grid-template-columns: 1fr; /* 1 столбец */
		position:absolute;
		top:0;left:0;
		height: calc(100vh - 78x);
		z-index:999;
		width:100%;
		align-items: center;
		column-gap: 3px;
	}
	

	#video_cancel{
		grid-area: close;
		justify-self: end;
		margin-bottom:10px;
		margin-top:10px;
		height:48px;
		width:48px;
		cursor: pointer;
	}
	
	#videoView #video{
		grid-area: video;
		justify-self: center;
		height: calc(100vh - 78px);
		max-width:100%
	}
	
	#video_capture{
		grid-area: video;
		justify-self: center;
		align-self: end;
		filter: invert(50%) sepia(53%) saturate(281%) hue-rotate(137deg) brightness(86%) contrast(86%);
		border: 2px solid var(--neutral_blue);
		border-radius: 100%;
		margin-bottom:10px;
		width:64px;
		cursor: pointer;
	}


	/* ФОТОГАЛЕРЕЯ */
	/* Грид-вариант*/
	/* 
	https://itchief.ru/html-and-css/flexbox
	https://html5book.ru/css-grid/
	https://doka.guide/css/grid-guide/#grid-auto-columns-grid-auto-rows
	*/		

	#fotoView {
		display:none;
		grid-template-areas: "foto"
							 "text";
		grid-template-rows:  100vh min-content; /* 2 строки */
		grid-template-columns: 1fr; /* 1 столбец */
		position:absolute;
		top:0;left:0;
		z-index:1;
		align-items: center;
		column-gap: 3px;
	}

	#foto_cancel {
		grid-area: foto;
		justify-self: end;
		align-self: start;
		height:48px;
		width:48px;
		margin-right:10px;
		margin-top:10px;
		cursor: pointer;
		z-index:999;
	}
	
	#fotoView #fotoImg {
		grid-area: foto;
		justify-self: center;
		position:relative;
		z-index:1;
	}

	#fotoView #fotoImgWrapper {
		grid-area: foto;
		width:100%;
		height:100%;
		z-index:99;
		opacity:0%;
	}

	#fotoView #foto_text{
		grid-area: text;
		color:#fff;
		font-size:1.2em;
		background-color: rgba(0, 0, 0, 0.5);
		margin-top:6px;
		padding: 10px 10px;
		text-align: center;
	}

	#foto_prev{
		grid-area: foto;
		justify-self: start;
		align-self:center;
		cursor: pointer;
		height:48px;
		z-index:999;
		display:none;
	}
	
	#foto_next{
		grid-area: foto;
		justify-self: end;
		align-self:center;
		cursor: pointer;
		height:48px;
		z-index:999;
		display:none;
	}
	
	#foto_next:hover, #foto_prev:hover {
		filter: invert(53%) sepia(15%) saturate(4675%) hue-rotate(46deg) brightness(100%) contrast(101%);
	}
	
	/*  конец грида */

	#safari_foto_cancel{
		height:48px;
		position:absolute;
		top:10px;
		right:10px;
		z-index:9999;
		cursor: pointer;
	}
	
	#safari_fotoView {
		display:none;
		position:absolute;top:0;left:0;
		width:100%;height:95%;
		max-height:95%;
	}
	
	#safari_fotoView #safari_fotoImg{
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width:80%;
		max-width:500px;
		max-height:80%;
		/*min-height:600px;*/
	}
	
	#magnifying_glass {
		position:absolute; 
		top:10px; 
		right:10px;
		width:15px;
	}


	.type {

		display: inline-block;    
		height: 28px;    
		line-height: 28px;  
		margin-right: 10px;      
		position: relative;
		vertical-align: middle;
		font-size: 14px;
		user-select: none;	
	}

	label.type {
		width:100%;
	}

	.type .checkbox-ios-switch {
		position: relative;	
		display: inline-block;
		box-sizing: border-box;			
		width: 100%;	
		height: 36px;
		border: 1px solid rgba(0, 0, 0, .1);
		border-radius: 8%/50%;	
		vertical-align: top;
		background: #f00;
		transition: .2s;
		text-align:center;
		padding:2px 15px 0 15px;
		font-size:2em;
		color:#fff;
	}

	.type .checkbox-ios-switch:before {
		content: '';
		position: absolute;
		top: 1px;
		left: 1px;	
		display: inline-block;
		width: 34px;	
		height: 32px;
		border-radius: 50%;
		background: white;
		box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
		transition: .15s;
	}

	.type input[type=checkbox] {
		display: block;	
		width: 0;
		height: 0;	
		position: absolute;
		z-index: -1;
		opacity: 0;
	}

	.type input[type=checkbox]:not(:disabled):active + .checkbox-ios-switch:before {
		box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
	}
	.type input[type=checkbox]:checked + .checkbox-ios-switch {
		background: #00f;
	}

	.type input[type=checkbox]:checked + .checkbox-ios-switch:before {
		right:1px;
		left:auto;
	}

/* Hover */
	.type input[type="checkbox"]:not(:disabled) + .checkbox-ios-switch {
		cursor: pointer;
		border-color: rgba(0, 0, 0, .3);
	}

/* Disabled */
	.type input[type=checkbox]:disabled + .checkbox-ios-switch {
		filter: grayscale(50%);
		border-color: rgba(0, 0, 0, .3);
	}

	.type input[type=checkbox]:disabled + .checkbox-ios-switch:before {
		background: #eee;
	}

/* WORKING, WORKED */

	.working, .worked {

		display: inline-block;    
		height: 28px;    
		line-height: 28px;  
		margin-right: 10px;      
		position: relative;
		vertical-align: middle;
		font-size: 14px;
		user-select: none;	
	}

	label.working, label.worked {
		width:100%;
	}

	.working .checkbox-ios-switch, .worked .checkbox-ios-switch {
		position: relative;	
		display: inline-block;
		box-sizing: border-box;			
		width: 100%;	
		height: 36px;
		border: 1px solid rgba(0, 0, 0, .1);
		border-radius: 8%/50%;	
		vertical-align: top;
		background: #fff;
		transition: .2s;
		text-align:center;
		padding:2px 15px 0 15px;
		font-size:2em;
		color:#000;
	}

	.working .checkbox-ios-switch:before, .worked .checkbox-ios-switch:before {
		content: '';
		position: absolute;
		top: 1px;
		left: 1px;	
		display: inline-block;
		width: 34px;	
		height: 32px;
		border-radius: 50%;
		background: white;
		box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
		transition: .15s;
	}

	.working input[type=checkbox], .worked input[type=checkbox] {
		display: block;	
		width: 0;
		height: 0;	
		position: absolute;
		z-index: -1;
		opacity: 0;
	}

	.working input[type=checkbox]:not(:disabled):active + .checkbox-ios-switch:before,
	.worked input[type=checkbox]:not(:disabled):active + .checkbox-ios-switch:before
	{
		box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
	}
	
	.working input[type=checkbox]:checked + .checkbox-ios-switch,
	.worked input[type=checkbox]:checked + .checkbox-ios-switch
	{
		background: #76ac00;
		color:#fff;
	}

	.working input[type=checkbox]:checked + .checkbox-ios-switch:before,
	.worked input[type=checkbox]:checked + .checkbox-ios-switch:before
	{
		right:1px;
		left:auto;
	}

/* Hover */
	.working input[type="checkbox"]:not(:disabled) + .checkbox-ios-switch,
	.worked input[type="checkbox"]:not(:disabled) + .checkbox-ios-switch
	{
		cursor: pointer;
		border-color: rgba(0, 0, 0, .3);
	}

/* Disabled */
	.working input[type=checkbox]:disabled + .checkbox-ios-switch,
	.worked input[type=checkbox]:disabled + .checkbox-ios-switch
	{
		filter: grayscale(50%);
		border-color: rgba(0, 0, 0, .3);
	}

	.working input[type=checkbox]:disabled + .checkbox-ios-switch:before,
	.worked input[type=checkbox]:disabled + .checkbox-ios-switch:before
	{
		background: #eee;
	}
	
	
/* Uploading gif */
.fileload_btn img.uploading-img{
	display: none;
}
.fileload_btn.uploading img{
	display: none;
}
.fileload_btn.uploading img.uploading-img{
	display: block;
}

#delete-photo-btn{
	position: absolute;
    bottom: 5%;
    z-index: 100000;
    background: var(--main_red);
    border: 1px solid var(--main_red);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 46px;
    gap: 4px;
}

#delete-photo-btn:hover{
	background: #fff;
	color: var(--main_red);
}

#delete-photo-btn #delete-photo-img {
	    width: 30px;
		filter: none;
}
#delete-photo-btn:hover #delete-photo-img{
    filter: brightness(0) saturate(100%) invert(23%) sepia(70%) saturate(4663%) hue-rotate(343deg) brightness(82%) contrast(101%);
}
#delete-photo-btn img.uploading-img{
	display: none;
}
#delete-photo-btn.uploading img{
	display: none;
}
#delete-photo-btn.uploading img.uploading-img{
	display: block;
}