@charset 'UTF-8';

/* Webfont: Lato-Bold */@font-face {
  font-family: 'LatoBold';
  src: url('../fonts/Lato-Bold.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Lato-Bold.woff2') format('woff2'), /* Modern Browsers */
       url('../fonts/Lato-Bold.woff') format('woff'), /* Modern Browsers */
       url('../fonts/Lato-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Regular */@font-face {
  font-family: 'LatoRegular';
  src: url('../fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
       url('../fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/Lato-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Semibold */@font-face {
  font-family: 'LatoSemibold';
  src: url('../fonts/Lato-Semibold.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Lato-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Lato-Semibold.woff2') format('woff2'), /* Modern Browsers */
       url('../fonts/Lato-Semibold.woff') format('woff'), /* Modern Browsers */
       url('../fonts/Lato-Semibold.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

:root {
  --main: #343339;
  --second: #ABABAB;
  --disabled: #D7D7D7;
  --disabled-light: rgba(215,215,215,.3);
  --bg: #F6F5F8;
  --light-gray: #F2F2F2;
  --white: #FFFFFF;
  --green: #3AB62F;
  --green-light: rgba(58,182,47,.1);
  --yellow: #D6B339;
  --yellow-light: rgba(214,179,57,.1);
  --red: #D64C39;
  --red-light: rgba(214,76,57,.1);
  --system: #5350F7;
  --system-light: rgba(83,80,247,.1);
  --cerulean: #00EAFE;
  --lime-green: #A1F81A;
  --magenta: #FF3086;
  --cerulian-gradient: linear-gradient(180deg, #89F6FF 0%, #00EAFE 100%);
  --lime-green-gradient: linear-gradient(136deg, #A1F81A 0%, #D7FF9A 100%);
  --magenta-gradient: linear-gradient(236deg, #FF3086 0%, #FF82B6 100%);
  --font-regular: 'LatoRegular';
  --font-semibold: 'LatoSemibold';
  --font-bold: 'LatoBold';
}

* {
  font-family: var(--font-regular);
  font-size: 16px;
  line-height: 20px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.btn {
  border-radius: 4px;
  border: 0;
  padding: 14px 22px 12px;
  font-family: var(--font-regular);
  font-size: 14px;
  line-height: 20px;
}
.btn.btn-primary {
  color: var(--white);
  background: var(--system);
}
.btn.btn-primary:hover {
  background: #8481F8;
}
.btn.btn-success {
  background: var(--green);
  border: 1px solid var(--green);
}
.btn.btn-success:hover {
  background: var(--green-light);
  color: var(--green);
}
.btn.btn-outline {
  color: var(--green);
  border: 1px solid var(--green);
}
.btn.btn-outline:hover {
  background: var(--green-light);
}
.btn.btn-primary-outline {
  color: var(--system);
  border: 1px solid var(--system);
}
.btn.btn-primary-outline:hover {
  background: var(--system-light);
}
.btn.btn-green {
  color: #fff;
  background: var(--green);
}
.btn.btn-green:hover {
/*  background: var(--green-light);*/
	opacity: .85;
}
.btn.btn-green-outline {
  color: var(--green);
  border: 1px solid var(--green);
}
.btn.btn-green-outline:hover {
  background: var(--green-light);
}
.btn.btn-red-outline {
  color: var(--red);
  border: 1px solid var(--red);
}
.btn.btn-red-outline:hover {
  background: var(--red-light);
}
.btn.btn-info,
.btn.btn-info:active {
  background: var(--system);
  color: var(--white);
}
.btn.btn-info:hover {
  background: #8481F8;
}
.btn:disabled,
.btn.disabled,
.btn:disabled:hover,
.btn.disabled:hover,
.btn:disabled:active,
.btn.disabled:active {
  color: var(--second);
  background: var(--disabled);
  pointer-events: none;
}

a {
  color: var(--system);
  text-decoration: none;
  border-bottom: 1px dashed var(--system);
  transition: .15s ease-in-out;
}
a:hover {
  color: #8481F8;
}
a.grey {
	border-color: var(--second);
}
.green {
  color: var(--green) !important;
}

.grey {
  color: var(--second);
}

.center {
  text-align: center;
}

.fz-1 {
  font-family: var(--font-regular);
  font-size: 16px;
  line-height: 20px;
}
.fz-2 {
  font-family: var(--font-semibold);
  font-size: 28px;
  line-height: 36px;
}
.fz-3 {
  font-family: var(--font-bold);
  font-size: 24px;
  line-height: 32px;
}
.fz-4 {
  font-family: var(--font-semibold);
  font-size: 18px;
  line-height: 24px;
}
.fz-5 {
  font-family: var(--font-semibold);
  font-size: 16px;
  line-height: 20px;
}
.fz-6 {
  font-family: var(--font-bold);
  font-size: 16px;
  line-height: 20px;
}
.fz-7 {
  font-family: var(--font-regular);
  font-size: 14px;
  line-height: 20px;
}
.fz-8 {
  font-family: var(--font-semibold);
  font-size: 14px;
  line-height: 20px;
}
.fz-9 {
  font-family: var(--font-regular);
  font-size: 12px;
  line-height: 16px;
}
.fz-10 {
  font-family: var(--font-regular);
  font-size: 11px;
  line-height: 14px;
}

.grey {
  color: var(--second);
}

:-webkit-autofill,
:-webkit-autofill:hover, 
:-webkit-autofill:focus {
  background: white !important;
  background-color: white !important;
}

body {
  background: var(--bg);
}
aside .sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;

  height: 100%;
  padding: 40px;
  background: var(--white);
  border-radius: 0 50px 50px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  transition: .15s ease-in-out;
}
aside .welcome * {
  white-space: nowrap;
}
aside .top,
aside .bottom {
  width: 100%;
}
aside hr {
	margin: 25px -40px;
	border-color: var(--light-gray);
	opacity: 1;
}
aside ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
aside ul a,
aside .bottom a {
  text-decoration: none;
  border: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px;
  margin: 0 -6px 8px;
  border-radius: 4px;
}
aside ul .active a,
aside ul a:hover {
  background: var(--system-light);
}
aside ul a .icon,
aside .bottom a .icon {
  flex: 0 0 32px;
  height: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--second);
  border-radius: 4px;
}
aside ul .active a .icon {
  background: var(--system);
  color: var(--white);
}
aside ul .active a.share .icon {
  background: var(--green);
}
aside ul .active a.disabled .icon {
  background: transparent;
}
aside ul a .menu-item,
aside .bottom a .menu-item {
  flex: 1;
  margin-left: 12px;
  font-family: var(--font-regular);
  font-size: 16px;
  line-height: 16px;
  color: var(--main);

  white-space: nowrap;
  word-break: keep-all;
}
aside .bottom a.toggle .menu-item {
  color: var(--second);
}
aside ul a.disabled {
  pointer-events: none;
  background: rgba(215, 215, 215, 0.12);
  color: var(--disabled);
}
aside ul a.disabled * {
  color: var(--disabled);
}
aside.shrinked {
  flex: 0 0 104px;
}
aside.shrinked .sidebar {
  padding: 40px 30px;
}
aside.shrinked .sidebar .welcome {
  width: 0;
  overflow: hidden;
}
aside.shrinked .sidebar a {
  margin: 0 0 8px;
}
aside.shrinked .sidebar a .icon {
  margin: 0;
}
aside.shrinked .sidebar a.shrinked .icon {
   transform: rotate(-180deg);
}
aside.shrinked .sidebar a .menu-item {
  flex: 0;
  width: 0;
  margin: 0;
  overflow: hidden;
}

#main {
  flex: 1;
  padding: 40px 20px 20px 340px;
}
.auth {
  z-index: 1;
}
.auth:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 365px;
  background: url(../images/bg-1.jpg) no-repeat;
  background-size: cover;
  background-position: center right;
  z-index: -1;
  pointer-events: none;
}
.auth .form {
  height: 100vh;
  width: 100%;
  max-width: 425px;
  background: var(--white);
  border-radius: 0 50px 50px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 50px;
  position: fixed;
  top: 0;
  left: 0;
}
.auth .form form {
  display: block;
  width: 100%;
}
.auth .form .form-header {
  margin-bottom: 36px;
}
.auth .form .form-control {
  color: var(--main);
  font-family: var(--font-regular);
  font-size: 16px;
  line-height: 14px;
  padding: 20px 16px 18px;
}
.auth .form .form-floating > label {
  padding: 18px 16px;
}
.auth .form .form-floating > .form-control-plaintext~label,
.auth .form .form-floating > .form-control:focus~label,
.auth .form .form-floating > .form-control:not(:placeholder-shown)~label,
.auth .form .form-floating > .form-select~label {
  transform: scale(.85) translateY(-5px) translateX(0.15rem)
}
.auth .form .form-floating > .form-control-plaintext:focus,
.auth .form .form-floating > .form-control-plaintext:not(:placeholder-shown),
.auth .form .form-floating > .form-control:focus,
.auth .form .form-floating > .form-control:not(:placeholder-shown) {
  padding-top: 25px;
}
.auth .form .form-floating > .form-control:focus~label,
.auth .form .form-floating > .form-control:not(:placeholder-shown)~label,
.auth .form .form-floating > .form-control:-webkit-autofill~label {
  background: transparent;
  color: var(--second);
  font-family: var(--font-regular);
  font-size: 11px;
  line-height: 14px;
}
.form-floating > .form-control-plaintext~label::after,
.form-floating > .form-control:focus~label::after,
.form-floating > .form-control:not(:placeholder-shown)~label::after,
.form-floating > .form-select~label::after {
  background: transparent;
}
.auth .form .btn {
  display: block;
  width: 100%;
  margin-top: 36px;
  padding: 18px 16px;
  border-radius: 4px;
  font-family: var(--font-regular);
  font-size: 16px;
  line-height: 20px;
}

.profile-item {
  padding: 24px;
  border-radius: 4px;
  background: var(--white);
}


[v-cloak] {
  display: none;
}
.widget {
  width: 100%;
  background: var(--white);
  padding: 24px;
  border-radius: 20px;
}
.widget-header {
  margin-bottom: 20px;
}

.search {
  position: relative;
  margin: 0 0 16px;
}
.search input {
  display: block;
  width: 100%;
  font-family: var(--font-regular);
  font-size: 14px;
  line-height: 20px;
  padding: 13px 16px 11px 46px;
  border-radius: 4px;
  border: 1px solid var(--disabled);
  outline: none;
}
.search input:active {
  border: 1px solid var(--disabled);
}
.search input:placeholder {
  font-family: var(--font-regular);
  font-size: 14px;
  line-height: 20px;
  color: var(--second);
}
.search svg {
  display: block;
  width: 20px;
  height: 20px;
  top: 13px;
  left: 16px;
  position: absolute;
  color: var(--second);
}
.wide-buttons {
  display: flex;
  flex-wrap: wrap;
}
.wide-buttons .btn {
  flex-grow: 1;
  margin: 0 3px 6px;
  padding-left: 0px;
  padding-right: 0px;
  white-space: nowrap;
}
.calendar {
  display: flex;
  flex-flow: column;
}
.calendar .header .month-year {
	font-size: 14px;
	font-weight: bold;
	flex-grow: 1;
	border-bottom: 1px solid var(--light-gray);
	margin-bottom: 10px;
	padding-bottom: 10px;
}
.calendar .days {
  display: flex;
  flex-flow: wrap;
}
.calendar .days .day_name {
	width: calc(100% / 7);
	padding: 20px;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: 500;
	color: var(--second);
	line-height: 12px;
	text-align: center;
}
.calendar .days .day_name:nth-child(7) {
    border: none;
}
.calendar .days .day_num {
  display: flex;
  width: calc(100% / 7);
  padding: 5px 0px;
  font-weight: bold;
  color: #7c878d;
  cursor: pointer;
  min-height: 40px;
  align-items: center;
  position: relative;
  justify-content: center;
}
.calendar .days .day_num span {
	width: 36px;
	font-size: 14px;
	height: 36px;
	color: var(--main);
	border-radius: 50%;
	text-align: center;
	line-height: 36px;
}
.calendar .days .day_num .events {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  display: flex;
  justify-content: center;
}
.calendar .days .day_num .event {
	font-weight: 500;
	font-size: 14px;
	padding: 3px;
	border-radius: 4px;
	background-color: #f7c30d;
}
.calendar .days .day_num .event.cat-1 {
    background-color: var(--magenta);
}
.calendar .days .day_num .event.cat-2 {
    background-color: var(--lime-green);
}
.calendar .days .day_num .event.cat-3 {
    background-color: var(--cerulean);
}
.calendar .days .day_num:hover {
    background-color: #fdfdfd;
}
.calendar .days .day_num.ignore {
    background-color: #fdfdfd;
    color: #ced2d4;
    cursor: inherit;
}
.calendar .days .day_num.selected span,
.calendar .days .day_num:hover span {
	background: var(--red-light);
	color: var(--red);  
}
.btn-big-icon, .btn-bigicon:active {
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 4px;
  background: var(--system);
  color: var(--white);
  border-radius: 6px;
  cursor: pointer;
  border: 0;
  transition: .15s ease-in-out;
}
.btn-big-icon:hover {
  color: #fff;
  background: #8481F8;
}
.calendar > .header {
	display: flex;
	text-align: center;
	justify-content: space-between;
	align-items: flex-start;
}
ul.no-style {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.no-style li {
  padding: 5px 0;
}
.btn-magenta-outline {
	color: var(--magenta);
	border: 1px solid var(--magenta);
	background: transparent;
}
.btn-magenta,
.btn-magenta-outline:hover {
	color: #fff;
	border: 1px solid var(--magenta);
	background: var(--magenta);
}
.btn-lime-green-outline {
	color: #7FC315;
	border: 1px solid var(--lime-green);
	background: transparent;
}
.btn-lime-green,
.btn-lime-green-outline:hover {
	color: #fff;
	border: 1px solid #7FC315;
	background: #7FC315;
}
.btn-cerulean-outline {
	color: #20B8C5;
	border: 1px solid var(--cerulean);
	background: transparent;
}
.btn-cerulean,
.btn-cerulean-outline:hover {
	color: #fff;
	border: 1px solid var(--cerulean);
	background: var(--cerulean);
}
.btn-narrow {
	padding: 0px 0;
	color: var(--magenta);
	margin-bottom: 21px;
}
.btn-narrow:hover {
  color: var(--magenta-);
}

.calendar-head {
	text-align: center;
	padding: 5px;
	font-weight: 700;
	font-size: 14px;
}
.calendar-item table {
	border-collapse: collapse;
	width: 100%;
}
.calendar-item th {
	text-align: center;
  text-transform: uppercase;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--second);
  line-height: 12px;
}
.calendar-item td {
  font-size: 12px;
  padding: 6px 0;
	text-align: center;
	position: relative;
}
.calendar-day.today {
	font-weight: bold;
}
.calendar-item td span {
	margin: 0 auto;
	font-weight: 700;
	display: block;
	width: 36px;
	font-size: 14px;
	height: 36px;
	color: var(--main);
	border-radius: 50%;
	text-align: center;
	line-height: 36px;
}
.calendar-item td.today span,
.calendar-item td.active:hover span {
	background: var(--red-light);
	color: var(--red);
	cursor: pointer;
}
.calendar-item td .events {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11px;
  display: flex;
  justify-content: center;
}
.calendar-item td .event {
	font-weight: 500;
	font-size: 14px;
	padding: 3px;
	border-radius: 4px;
	background-color: #f7c30d;
}
.calendar-item td .event.cat-1 {
    background-color: var(--magenta);
}
.calendar-item td .event.cat-2 {
    background-color: var(--lime-green);
}
.calendar-item td .event.cat-3 {
    background-color: var(--cerulean);
}
.calendar-item .calendar-head {
  display: flex;
}
.calendar-item .calendar-head .month-year {
	font-size: 14px;
	font-weight: bold;
	flex-grow: 1;
	border-bottom: 1px solid var(--light-gray);
	margin-bottom: 10px;
	padding-bottom: 10px;
}

.page-header,
.page-header h2 {
  font-family: var(--font-bold);
  font-size: 24px;
  line-height: 32px;
  margin: 0;
}
.page-header {
  margin-bottom: 1.5rem !important;
}

.form-check-label,
.form-floating > label {
  line-height: 24px;
}
.requisites p {
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 0;
  color: var(--second);
}
body > .requisites {
  margin: 0 20px 70px;
  display: none;
}
/*#tickets .widget {
	 min-height: 0 !important;
}*/
#tickets .links {
	margin-bottom: 60px;
}
.trainings-items.days {
  padding-top: 5px;
}
.days .trainings-item {
  display: block;
}
.days .trainings-item.day-link {
  display: block;
  color: var(--bs-body-color);
  padding: 10px 24px;
}
.days .trainings-item.day-link:hover,
.days .trainings-item.day-link.active {
	color: var(--system);
}
.paginationLand {
  display: flex;
  margin: 20px 0;
}
.paginationLand__item {
  text-align: center;
  margin-right: 20px;
  border: 0;
  color: var(--main);
}
.paginationLand__item.active {
  color: var(--system);
}
.paginationLand__item:last-child {
  margin-right: 0;
}
.paginationLand__img {
  width: 100px;
  margin-bottom: 10px;
}
.paginationLand__text {
  
}
.layout__about h2 {
	font-size: 24px;
	line-height: 32px;
	font-weight: bold;
	margin: 10px 0 5px;  
}
.layout__content > img {
  max-width: 350px;
  margin-bottom: 20px;
  width: 100%;
}
.layout__power h3 {
	font-size: 20px;
	line-height: 28px;
	margin: 10px 0 5px;  
}
.layout__items {
  display: flex;
}
.layout__item {
	padding: 24px 0px;
	background: var(--disabled-light);
	border-radius: 20px;
	width: 112px;
	text-align: center;
	margin-right: 10px;
}
.layout__item > p {
  font-size: 14px;
  line-height: 20px;
  position: relative;
  margin-bottom: 30px;
}
.layout__item > p:after {
	content: '';
	position: absolute;
	display: block;
	bottom: -15px;
	left: 0;
	right: 0;
	width: 20px;
	height: 1px;
	margin: 0 auto;
	background: var(--disabled);
}
.layout__num > p {
  display: inline;
	font-size: 14px;
	line-height: 20px;
}
.layout__persons {
  margin: 20px 0;
  display: flex;
}
.layout__persons > span {
  margin-right: 7px;
}
.layout__structure {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0;
}
.layout__structure-item {
  width: 33%;
  text-align: center;
}
.layout__structure-item p {
  padding: 0 5px;
}
.layout__cook h4 {
	font-size: 20px;
	line-height: 28px;
	margin: 10px 0 5px;
}