:root
	{
	    --baseColor: #e7e7e7;
	    --darkBase: #3E5F76;
	    --green: #C1CBB2;
	    --white: #fff;
	    --blue: #51D6FF;
	}
	html
	{
		border: none;
		margin-top: none;
	}
	@font-face
	{
		font-family: "Lato-Light";
		src: url("styles/fonts/lato/Lato-Light.eot");
		src: url("styles/fonts/lato/Lato-Light.woff") format("woff");
		src: url("styles/fonts/lato/Lato-Light.woff2") format("woff2");
		src: url("styles/fonts/lato/Lato-Light.ttf") format("ttf"),
		url("styles/fonts/lato/Lato-Light.otf") format("opentype"),
		url("styles/fonts/lato/Lato-Light.svg") format("svg");
	}
	.menu-menu-pl-container, .mobile-menu-icon { display: none; }
	@media (max-width: 1000px)
	{
	body
	{
		top: 0px;
		height: 100%;
		margin: 0;
		padding: 0;
		font-family: "Lato-Light", sans-serif;
		font-weight: 400;
		font-size: 36px;
		background-color: #F4F7F9;
	}
	table
	{
		animation-duration: 300ms;
		animation-timing-function: linear;
		width: 100%;
		height: 100%;
		border-style: solid 3px;
		border-spacing: 2px 6px;
		font-size: 36px;
		text-align: center;
		border-radius: 8px;
		background-color: var(--baseColor);
		backdrop-filter: blur(15px);
	}
	table th
	{
		font-size: 36px;
		color:whitesmoke;
	}
	table tr td
	{
		color: var(--white);
		border-style: 3px solid black;
		background-color: #b0bfcb59;
		font-size: 36px;
		font-weight: bolder;
		border-radius: 3px;
		padding: 4px;
	}
	.leftTable, .leftTr, .leftTh, .leftTd
	{
		text-align: left;
	}
	table tr { transition: 300ms; }
	table tr:hover td
	{
		transition: 300ms;
		background-color: var(--green);
		cursor:default;
	}
	table tr:hover td.asText
	{
		transition: none;
		background-color: #b0bfcb59;
	}
	input.customButton
	{
		font-size: 36px;
	}
	.customButton
	{
		min-width: 80px;
		min-height: 40px;
		color: var(--baseColor);
		font-size: 36px;
		background-color: var(--white);
		border: 2px solid rgba(0, 0, 0, 0);
		padding: 5px 5px;
		font-size: 18px;
		margin: 2px;
		transition: 0.5s;
	}
	.customButton:hover
	{
		box-shadow: 1px 1px 3px var(--darkBase);
		color: var(--white);
		background-color: var(--green);
		transition: 0.5s;
	}
	.errorMessage
	{
		animation-name: messageKeyFrames;
		animation-duration: 1s;
		text-align: center;
		display: block;
		font-size: 20px;
		background-color: red;
		color: var(--white);
		font-weight: bold;
	}
	.positiveMessage
	{
		animation-name: messageKeyFrames;
		animation-duration: 1s;
		text-align: center;
		display: block;
		font-size: 20px;
		color: white;
		background-color: green;
		font-weight: bold;
	}
	input, select, textarea
	{
		min-width: 80px;
		min-height: 40px;
		padding: 5px 5px;
		text-align: center;
		color: var(--baseColor);
		font-size: 36px;
		background-color: var(--white);
		border: 2px solid rgba(255, 255, 255, 0);
		border-radius: 6px;
		margin: 2px;
		transition: 0.3s;
		transform-origin: left;
	}
	label { font-size: 36px; }
	input:hover, select:hover, textarea:hover
	{
		color: var(--white);
		background-color: var(--green);
		transition: 0.3s;
		box-shadow: 1px 1px 3px black;
		cursor: pointer;
	}
	input:disabled, select:disabled, textarea:disabled
	{
		opacity: 0.5;
		pointer-events: none;
	}
	textarea
	{
		text-align: left;
		font-size: 24px;
	}
	option
	{
		text-align: center;
		background-color: whitesmoke;
		color: var(--baseColor);
	}
	input:focus, select:focus, .customButton:focus, textarea:focus
	{
		color: var(--baseColor);
		background-color: var(--white);
		border: 2px solid var(--baseColor);
		transition: 0.3s;
	}
	option:hover
	{
		background-color: var(--green);
		color: var(--white);
	}
	.testOptionDayOff
	{
		background-color: #94B1C6;
		color:white;
	}
	.testOptionWorkingDay
	{
		background-color: var(--darkBase);
		color: white;
	}
	.testOptionToday
	{
		background-color: #6A6EB0;
		color: white;
	}
	.holidayOption
	{
		background-color: #6AB0A9;
		color: var(--white);
	}
	.newContent
	{
		margin: 0;
		top: 0;
		transition: 300ms;
		margin-top: 130px;
		width: 100%;
		align-content: center;
		animation-duration: 150ms;
		animation-name: contentKeyFrames;
		animation-timing-function: ease-in-out;
		transform-origin: top center;
	}
	@keyframes tableKeyFrames
	{
		from { opacity: 0;}
		to { opacity: 1; }
	}
	@keyframes contentKeyFrames
	{
		from { transform: scaleY(0); }
		to { transform: scaleY(1); }
	}
	@keyframes messageKeyFrames
	{
		from { opacity: 0; }
		to { opacity: 1; }
	}
	form { display: inline; }
	a, a:visited
	{
		text-decoration-color: var(--white);
		transition-timing-function: linear;
		font-style: italic oblique;
		color: var(--white);
		font-weight: 900;
		padding: 5px 5px;
		margin: 5px;
		border: 1px solid rgba(0, 0, 0, 0);
		border-radius: 8px;
		transition: 150ms;
		cursor: pointer;
	}
	a:hover
	{
		box-shadow: 1px 1px 3px black;
		transition: 150ms;
		transform-origin:bottom;
		background-color: var(--green);
		cursor: pointer;
	}
	.sidebar
	{
		top: 0;
		border: none;
		height: 100%;
		align-content: center;
		float: left;
		position: fixed;
		width: 0;
		text-align: center;
		background-color: var(--baseColor);
		transition: 200ms;
		overflow: hidden;
		overflow-y: auto;
		white-space: nowrap;
		transition-timing-function: linear;
	}
	.sidebar table
	{
		line-height: 80px;
		border-collapse: separate;
		height: auto;
	}
	.sidebar table tr th
	{
		margin: 0;
		padding: 0;
	}
	.sidebar.active
	{
		transition-timing-function: linear;
		transition: 200ms;
		width: 100%;
	}
	.sidebar a, .sidebar img, .sidebar .dropdownMenu
	{
		margin: 0;
		display: inline-block;
		margin-right: auto;
		margin-left: auto;
		text-decoration: none;
		font-size: 48px;
		min-width: 25%;
	}
	.sidebar img
	{
		user-select: none;
		-webkit-user-drag: none;
		display: block;
		margin-left: auto;
		margin-right: auto;
		max-height: 60%;
		margin-bottom: 20px;
	}
	.sidebar button
	{
		min-width: 25%;
		display: inline-block;
	}
	.sidebar a:hover { cursor: pointer; }
	ul
	{
		font-weight: 900;
		margin: 0;
		padding: 0;
		list-style-type: none;
		justify-content: center;
		align-items: center;
	}
	.dropdownMenu
	{
		transition-timing-function: linear;
		font-style: italic oblique;
		color: var(--white);
		background-color: var(--baseColor);
		font-weight: 900;
		border: 1px solid rgba(0, 0, 0, 0);
		border-radius: 8px;
		margin: 0;
		padding: 0;
		transition: 150ms;
		cursor: pointer;
		font-family: "Lato-Light", sans-serif;
		font-weight: 600;
		font-size: 18px;
		padding: 5px 0px;
	}
	.dropdownMenu:hover
	{
		box-shadow: 1px 1px 3px black;
		transition: 150ms;
		transform-origin:bottom;
		background-color: var(--green);
		cursor: pointer;
	}
	.dropdownMenuContent
	{
		transform: scaleY(0);
		transition: 300ms;
		background-color: var(--darkBase);
		border: 1px solid rgba(0, 0, 0, 0);
		border-radius: 8px;
		animation: dropdownKeyFramesDown 300ms ease-in-out forwards;
		transform-origin: top center;
		justify-content: center;
		align-items: center;
		height: 0px;
		position: relative;
		text-align: center;
		right: 0px;
		left: 0px;
		overflow-wrap: break-word;
		word-break: break-all;
		width: 100%;
	}
	.dropdownMenuItems a
	{
		word-wrap: break-word;
		overflow-wrap: break-word;
		display: inline-block;
		white-space: normal;
	}
	.dropdownMenuContent.active
	{
		transform: scaleY(1);
		animation: dropdownKeyFramesUp 300ms ease-in-out forwards;
		transform-origin: top center;
		background-color: var(--darkBase);
		height: auto;
	}
	@keyframes dropdownKeyFramesUp
	{
		from
		{
			visibility:hidden;
			transform: scaleY(0);
			opacity: 0;
			max-height: 0;
		}
		to
		{
			visibility: visible;
			transform:  scaleY(1);
			opacity: 1;
			max-height: 100%;
		}
	}
	@keyframes dropdownKeyFramesDown
	{
		from
		{
			visibility: visible;
			transform:  scaleY(1);
			opacity: 1;
			max-height: 100%;
		}
		to
		{
			max-height: 0%;
			visibility: hidden;
			transform:  scaleY(0);
			opacity: 0;
		}
	}
	.taskRadio
	{
		min-width: 30px;
		min-height: 30px;
		padding: 5px;
		margin: 5px;
		vertical-align: middle;
		display:inline-block;
	}
	.assigments input, .assigments .taskRadio, .assigments textarea, .assigments select
	{
		color: var(--darkBase);
	}
	.navBtn
	{
		right: 20px;
		top: 10px;
		position:absolute;
		width: 120px;
		height: 120px;
		text-align: center;
		color: var(--white);
		font-size: 18px;
		background-color: var(--baseColor);
		border: 2px solid rgba(255, 255, 255, 0);
		border-radius: 30%;
		transition: 200ms;
	}
	.navBtn.active
	{
		box-shadow: 1px 1px 5px black;
		transition: 200ms;
	}
	.newContent.active
	{
		pointer-events: none;
		opacity: 0;
		filter: blur(3px);
	}
	.navImg
	{
		display: block;
		width: 48px;
		height: 48px;
		background: url(/wp-content/themes/mgn-fast/icons/menu_icon.png) no-repeat;
		transition: 200ms linear;
	}
	.navImg.active
	{
		transition: 200ms linear;
		transform: rotateY(-180deg);
		background: url(/wp-content/themes/mgn-fast/icons/arrow_icon.png) no-repeat;
	}
	.loader {
   width: 250px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: absolute;
  font-size: 5vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-family: helvetica, arial, sans-serif;
  text-transform: uppercase;
  color: var(--baseColor);
  background: var(--white);
  font-weight: 900;
  letter-spacing: 0.2em;
}
 .loader::before, .loader::after
  {
    content: "";
    display: block;
    background: var(--baseColor);
    width: 15px;
    height: 15px;
    position: absolute;
    animation: load .7s infinite alternate ease-in-out;
  }
  .loader::before
  {
    top: 0;
  }
  .loader::after
  {
    bottom: 0;
  }
@keyframes load
{
  0% { left: 0; height: 30px; width: 15px }
  50% { height: 8px; width: 40px }
  100% { left: 235px; height: 30px; width: 15px}
}
.loader-wrapper
{
	display: block;
	position:absolute;
	left: 0;
	top: 0;
	background-color: var(--white);
	width: 100vw;
	height: 100vh;
	opacity: 1;
}
.loader-wrapper.active
{
	transition: 200ms;
	opacity: 0;
	pointer-events: none;
}
	.elips
	{
		-webkit-border-radius: 0px;
		-webkit-appearance: none;
        word-break: break-all;
        word-wrap: break-word;
        text-overflow: ellipsis;
        white-space: normal;
	}
}
@media screen and (min-width: 1200px){
	.container {
		max-width: 1200px;
	}
	.menu-up ul li a {
		color: #000;
		float: left;
		margin: 10px 0px;
	}
	.menu li a i {
		float: left;
		width: 100%;
		text-align: center;
		display: table;
	}
	.menu li a {
		text-align: center;
	}
	a, .menu a:visited {
		padding: 0px !important;
	}
	i.wpmi-icon:not(.wpmi-label-1).wpmi-position-before {
		margin-right: 5px !important;
	}
	.menu li a i {
		color: #6a93b0;
		transition: all .2s ease-in-out; 
	}
	.menu li a:hover {
		background: transparent;
		box-shadow: none !important;
	}
	.menu li a:hover i {
		color: black;
		transition: all 200ms ease-in;
	}
	#menu-admin li a:focus i {
		color: #000;
	}
	.menu-up {
		width: 100%;
		margin: auto;
		text-align: center;
		float: left;
	}
	#menu-user li a {
		margin: 0px 40px;
	}
	.ru-20 {
		width: 20%;
	}
}