/*Алерт*/
.calendar-alert-bg{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000000000;
}

.calendar-alert{
    background: #ffffff;
    width: 550px;
    padding: 12px;
    box-sizing: border-box;
    box-shadow: 0px 12px 12px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.calendar-alert-header{
    margin-bottom: 8px;
}

.calendar-alert-body{
    font-family: SF Pro Display;
    text-align: center;
}

.calendar-alert-body-title{
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 20px;
}

.calendar-alert-body-text{
    font-size: 16px;
    color: #808080;
    margin-bottom: 24px;
}

.calendar-alert-footer{
    margin: 0 auto 41px;
    width: fit-content;
}

/*
Экран загрузки
*/

.preloader{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100000;
    background: rgba(255,255,255,1);
}

.preloader > svg{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.preloader-svg {
  animation: 2s linear 0s normal none infinite running rot;
  -webkit-animation: 2s linear 0s normal none infinite running rot;
  width: 100px;
}
@keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}



/*
Стили для овербукинга
*/

.ui-draggable-dragging{
    z-index: 100000000;
}

/*Fonts*/
@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Semibold.eot');
    src: local('SF Pro Display Semibold'), local('SF Pro Display-Semibold'),
        url('../fonts/SFProDisplay-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Semibold.woff2') format('woff2'),
        url('../fonts/SFProDisplay-Semibold.woff') format('woff'),
        url('../fonts/SFProDisplay-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}



/*Основные настройки*/
*{
	margin: 0;

}

body{
	background: #F2F2F2;
	width: max-content;
	overflow-x: scroll;
}

.clear{
	clear: both;
}

.border-right{
	border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.border-left{
	border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.left{
	float: left;
}

.right{
	float: right;
}

.pointer{
	cursor: pointer;
}

.hide{
	display: none;
}

.bg_grey{
    background: #1C283E;
}
/*Иконка вопросика*/
.query-svg{
    margin-top: 10px;
    margin-left: 8px;
}

/*Чек Бокс*/
.checkbox{

}

.checkbox-block{
    width: 20px;
    height: 20px;
    background: #F5F5F5;
    margin-right: 8px;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 1px 4px;
}

.checkbox-block-white{
    width: 20px;
    height: 20px;
    background: #ffffff;
    margin-right: 8px;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 1px 4px;
}

.checkbox > p{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
}

/*Радио кнопка*/
.radiobutton{

}

.radiobutton-block{
    width: 20px;
    height: 20px;
    background: #F5F5F5;
    border-radius: 20px;
    margin-right: 8px;
    box-sizing: border-box;
    padding: 3px;
}

.radiobutton-block-active{
    width: 100%;
    height: 100%;
    background: #8058E7;
    border-radius: 12px;
}

.radiobutton > p{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
}

/*header*/
.header{
	background: #ffffff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	position: fixed;
	width: 100%;
    z-index: 1000000000;
}

.h-avatar{
	padding: 10px 20px;
}

.h-settings{
	padding: 18px 20px;
}

.h-refresh{
	padding: 19px 21px;
}

.h-add{
	padding: 18px 20px;
}


.h-map{
	font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	text-align: center;
    padding: 20px 24px 25px;
	color: #8058E7;
}
/*Верхняя информация о пользователе*/
.h-avatar-settings{
    background: #ffffff;
}

.header-settings{
    background: #f2f2f2;
}

.header-settings-white{
    width: 398px;
    background: #ffffff;
    height: 64px;
    margin-right: 10px;
}

.h-account-info{
    width: 398px;
    height: 64px;
    position: absolute;
    left: 81px;
}

.h-account-info-text{
    width: 251px;
    box-sizing: border-box;
    padding: 11px 16px;
}

.h-account-info-name{
    color: #ffffff;
    font-family: SF Pro Display;
    font-size: 15px;
    margin-bottom: 8px;
}

.h-account-info-system{
    font-family: SF Pro Display;
    font-size: 14px;
    color: #6B82AC;
}

.h-account-info-btns-btn{
    padding: 20px;
    border-left: 1px solid #6B82AC;
    box-sizing: border-box;
    height: 64px;
}

/*Левое меню*/
.left-sidebar{
    position: sticky;
    left: 0;
    z-index: 100000;
}

.left-sidebar > ul{
    padding: 0;
    box-sizing: border-box;
    width: 81px;
    height: 100%;
    position: fixed;
    top: 64px;
    left: 0;
}

.left-sidebar > ul > li{
    margin-top: 16px;
    list-style: none;
}

.left-sidebar > ul > li > a{
    display: block;
    text-decoration: none;
}

.left-sidebar > ul > li > a > svg{
    display: block;
    margin: auto;
    margin-bottom: 6px;
}

.left-sidebar > ul > li > a > svg > path{
    stroke: #6B82AC;
}

.left-sidebar > ul > li > a > p{
    text-decoration: none;
    color: #6B82AC;
    font-family: SF Pro Display;
    font-size: 11px;
    display: block;
    text-align: center;
}

#left-sidebar-active-path > p{
    color: #ffffff;
}

#left-sidebar-active-path > svg > path{
    stroke: #ffffff;
}


/*content*/

.content-header{
    margin-left: 81px;
    position: sticky;
    background: #F2F2F2;
    z-index: 10000;
    top: 65px;
    padding-top: 10px;
    margin-bottom: 65px;
    width: max-content;
    left: 81px;
}

.content-header-btns{
	padding: 0 12px 0 20px;
	position: sticky;
    z-index: 1000;
    background: #f2f2f2;
    left: 81px;
    height: 82px;
    box-sizing: border-box;
}

.content-header-btns-in{
	background: #ffffff;
	border-radius: 5px;
}

.content-header-btns-in-div{
    padding: 2px 7px;
}

#content-header-btns-in-active-left{
	background: #8058E7;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.content-header-user{
	margin-left: 12px;
	margin-bottom: 19px;
	width: 130px;
	box-sizing: border-box;
}

.content-header-user-name{
	font-family: Roboto;
	font-style: normal;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
	margin-bottom: 9px;
}

.content-header-user-plus{
    width: 20px;
    height: 20px;
	margin-left: 6px;
	background: #8058E7;
	border-radius: 10px;
}

.content-header-user-plus > svg{
    display: block;
}

.content-header-user-plus-svg-plus{
    margin: auto;
    margin-top: 4px;
}

.content-header-user-plus-svg-minus{
    margin: auto;
    margin-top: 9px;
}

.content-header-user-type{
	text-align: center;
	padding: 3px 6px;
	background: #E5E5E6;
	border-radius: 3px;
	font-family: SF Pro Display;
    color: #414141;
    font-weight: 1000;
}

.content-body{
    width: max-content;
}

.content-body-first{
    margin-left: 81px;
}

.content-body-date{
    padding: 0 0 0 22px;
    font-family: Roboto;
    font-style: normal;
    font-size: 14px;
    width: 103px;
    box-sizing: border-box;
    position: sticky;
    z-index: 1000;
    height: 94px;
    background: #f2f2f2;
    left: 81px;
}

.content-body-date > p{
	font-weight: bold;
}

.content-body-works{
    width: max-content;
    min-width: 140px;
    min-height: 94px;
    /*border: 1px solid #e8e8e8;*/
}

.content-body-work-open{
	background: #ffffff;
	border: 1px solid #E5E5E6;
	box-sizing: border-box;
	border-radius: 5px;
	padding: 7px 8px 13px 8px;
	width: 134px;
	height: 94px;
    margin-right: 6px;
}

.not-draggable{
    background: rgba(255,255,255,0.3) !important;
}

.content-body-work-open-active{
    background: rgb(50 197 255 / 0.15) !important;
}

.not-draggable > div, .not-draggable > p{
    opacity: 0.5 !important;
}

.content-body-work-open-draggable{
    background: rgba(254, 82, 82, 0.3);
}

.content-body-work-open-name{
	font-family: SF Pro Display;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 4px;
	margin-top: 22px;
}

.content-body-work-open-tag{
	padding: 2px 4px;
	background: #E5E5E6;
	border-radius: 3px;
	font-family: SF Pro Display;
	font-size: 12px;
	color: #414141;
}

.content-body-work-open-time{
    margin-top: 3px;
	font-family: SF Pro Display;
	font-size: 10px;
	opacity: 0.7;
	margin-bottom: 3px;
    min-width: 55px;
}

.content-body-work-open-info{
	font-family: SF Pro Display;
	font-size: 12px;
	height: 25px;
}

.content-body-work-open-education{
    width: 8px;
    height: 8px;
    border-radius: 8px;
}

.content-body-work-open-education-green{
    background: #00B934;
}

.content-body-work-open-education-red{
    background: #E02020;
}

.content-body-work-free{
    text-align: center;
    padding: 33px 0;
    box-sizing: border-box;
    border-radius: 3px;
    width: 140px;
    height: 94px;
    margin-right: 6px;
}

.content-body-work-free-hover{
    background: #D9D9D9;
}

.content-body-works-hide{
    position: relative;
    margin-left: -10px;
    height: 1px;
    margin-right: 6px;
}

.content-body-work-hide{
    overflow: hidden;
	background: #ffffff;
	font-family: SF Pro Display;
	font-size: 14px;
	width: .7em;
	width: 1ch;
	height: 94px;
	text-align: center;
	word-wrap: break-word;
	padding: 7px 14px 7px 8px;
	border: 1px solid #E5E5E6;
	box-sizing: border-box;
	border-radius: 5px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	position: absolute;
}

.content-body-work-hide > p{
	opacity: 0.7;
}

.content-body-work-open-weekend{
	background: rgba(254, 82, 82, 0.1);
}

.content-body-work-open-weekend-name{
	font-family: SF Pro Display;
	font-size: 14px;
	font-weight: bold;
	opacity: 1;
	margin-top: 0;
}

	/*Левые плашки*/
	.work-border-left-blue{
		border-left: 4px solid #32C5FF;
	}

	.work-border-left-green{
		border-left: 4px solid #45CC68;
	}

	.work-border-left-red{
		border-left: 4px solid #FE5252;
	}

	.work-border-left-orange{
		border-left: 4px solid #FFC100;
	}

	.work-border-left-grey{
		border-left: 4px solid #B3B3B3;
	}

	/*Правые плашки*/
	.work-border-right-blue{
		border-right: 4px solid #32C5FF;
	}

	.work-border-right-green{
		border-right: 4px solid #45CC68;
	}

	.work-border-right-red{
		border-right: 4px solid #FE5252;
	}

	.work-border-right-orange{
		border-right: 4px solid #FFC100;
	}

	.work-border-right-grey{
		border-right: 4px solid #B3B3B3;
	}

	/*Нижние плашки*/
	.work-border-bottom-blue{
		border-bottom: 4px solid #32C5FF;
	}

	.work-border-bottom-green{
		border-bottom: 4px solid #45CC68;
	}

	.work-border-bottom-red{
		border-bottom: 4px solid #FE5252;
	}

	.work-border-bottom-orange{
		border-bottom: 4px solid #FFC100;
	}

	.work-border-bottom-grey{
		border-bottom: 4px solid #B3B3B3;
	}

/*Карта*/
.map{
	position: fixed;
    right: 0;
    top: 65px;
    height: 100%;
    z-index: 10000;
}

/*Обновление работы*/
.update-work{
    z-index: 1000000000;
	position: fixed;
    right: 0;
    top: 65px;
    height: 100%;
    width: 359px;
    background: #ffffff;
}

.update-work-info{
	position: relative;
	height: 100%;
	padding-top: 24px;
}

.update-work-info-header, .update-work-info-body-div{
	padding: 0 23px;
}

.update-work-info-header-name{
	font-family: SF Pro Display;
	font-size: 18px;
	font-weight: bold;
	margin-right: 8px;
	margin-bottom: 20px;
}

.update-work-info-header-tag{
	font-family: SF Pro Display;
	font-size: 12px;
	text-transform: uppercase;
	color: #414141;
	padding: 3px 4px;
	background: #E5E5E6;
	border-radius: 3px;
}

.update-work-info-header-setting{
	margin-right: 8px;
}

.update-work-info-header-close{
	margin-top: -5px;
}

.update-work-info-header-ul, .update-group-info-header-ul{
	padding: 0;
    margin-bottom: 20px;
    display: inline-flex;
    width: 100%;
    overflow-x: auto;
}

.update-work-info-header-ul > li, .update-group-info-header-ul > li{
	display: flex;
}

.update-work-info-header-ul > li > a, .update-group-info-header-ul > li > a{
	display: block;
	text-decoration: none;
	color: #000000;
	opacity: 0.5;
	font-family: SF Pro Display;
	font-size: 13px;
	padding: 0 8px 8px;
	border-bottom: 2px solid #F5F5F5;
}

#update-work-info-header-ul-li-a-active{
    border-bottom: 2px solid #8058E7;
    opacity: 1;
}

.update-work-info-body{
    overflow-y: auto;
    height: calc(100% - 300px);
}

.update-work-info-body-div{
	padding-bottom: 12px;
	border-bottom: 2px solid #F5F5F5;
	margin: 0 23px 12px;
}

.update-work-info-body-div-name{
	font-family: SF Pro Display;
	font-size: 15px;
	opacity: 0.7;
	margin-bottom: 6px;
	font-weight: bold;
}

.update-work-info-body-div-info{
	font-family: SF Pro Display;
	font-size: 15px;
}

.update-work-info-body-input > input, .update-work-info-body-input > select{
    background: #F5F5F5;
    border-radius: 5px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    padding: 12px 14px;
    margin: 0 23px 12px;
    border: 0;
    outline: none;
    width: 267px;
}

.date-time-inputs > div{
    background: #F5F5F5;
    border-radius: 5px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    width: 112px;
    padding: 12px 14px;
}

.div-select, .hide-select, .time-input, .times-selects{
    padding: 24px 14px 12px;
    background: #F5F5F5;
    border-radius: 5px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    width: 267px;
    padding: 12px 14px;
    margin: 0 23px 12px;
    color: rgba(0,0,0,0.5);
}

.time-select{
    width: 116px;
    margin: auto;
    text-align: center;
}

.time-select-up, .time-select-down{
    margin-left: 34px;
}

.time-select-up{
    margin-bottom: 8px;
}

.time-select-down{
    margin-top: 8px;
}

.time-select-time{
    font-size: 32px;
    color: #000000;
    width: 150px;
    text-align: center;
}

.hide-select{
    margin-top: 25px;
    color: #000000;
    max-height: 171px;
    overflow-y: auto;
}

.hide-select > div{
    margin-bottom: 12px;
}

.date-time-inputs > div:first-child{
    margin: 0 10px 12px 23px;
}

.time-div{
    width: 72px;
    text-align: center;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
}

.time-div > font{
    color: rgba(0,0,0,0.5);
}

.time-btn{
    width: 20px;
    height: 20px;
    border-radius: 20px;
}

.time-btn > svg{
    margin: 9px auto;
    display: block;
}

.time-btn-plus > svg{
    margin: 5px auto;
}

.time-active-btn{
    background: #8058E7;
}

.time-deactive-btn{
    background: rgba(128,88,231,0.5);
}

.show-info-date{
    margin: 0 23px 12px;
    font-size: 14px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal
}

.update-work-info-body-input > select{
    width: 292px;
    color: rgba(0,0,0,0.5);
}

.update-work-info-footer{
	position: absolute;
    left: 20px;
    right: 20px;
    bottom: 100px;	
}

.update-work-info-footer-btn{
	background: #8058E7;
    border-radius: 5px;
    text-align: center;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    padding: 14px 0;
    color: #ffffff;
    margin-bottom: 20px;
}

.update-work-info-footer-delete{
	font-family: SF Pro Display;
	font-size: 15px;
	color: #FE5252;
	text-align: center;
}

/*Календарь дат*/
.date-calendar{
    background: #F5F5F5;
    border-radius: 5px;
    width: 300px;
    height: 334px;
    box-sizing: border-box;
    padding: 12px 16px;
    overflow-y: scroll;
    margin: 0 23px 12px;
}

.calendar-name{
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 17px;
    margin-bottom: 7px;
}

.calendar-table{
    margin-bottom: 16px;
}

.calendar-date{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    width: 42px;
    height: 34px;
    text-align: center;
}

.calendar-active{
    background: #8058E7;
    border-radius: 37px;
    color: #ffffff;
}

/*Конфликт*/
.conflict{
    box-sizing: border-box;
    padding: 32px 30px 36px;
    width: 513px;
    height: 264px;
    position: fixed;
    background: #ffffff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000000;
}

.conflict-name{
    font-family: 'SF Pro Display';
    font-size: 21px;
    color: #FE5252;
    text-align: center;
    margin-bottom: 24px;
}

.conflict-info{
    text-align: center;
    font-family: 'SF Pro Display';
    font-size: 16px;
    line-height: 25px;
    color: #000000;
    margin-bottom: 24px;
}

.conflict-btn:first-child{
    margin-right: 24px;
}

.conflict-btn{
    text-align: center;
    width: 214px;
    height: 48px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    border-radius: 5px;
    line-height: 48px;
    box-sizing: border-box
}

.conflict-btn-cancel{
    color: #8058E7;
    border: 1px solid #8058E7;
}

.conflict-btn-go{
    color: #FFFFFF;
    background: #FE5252;
}

/*Фильтр*/
.filter{
    width: calc(100% - 450px);
}

.filter-img{
    padding: 20px;
}

.filter-input{
    border: 0;
    outline: 0;
    margin-top: 20px;
    font-weight: normal;
    font-size: 16px;
    width: calc(100% - 164px);
}

.filter-hide, .filter-hide-preset{
    min-height: 278px;
    width: calc(100% - 440px);
    position: absolute;
    z-index: 10000000000000000000;
    background: #fff;
    left: 80px;
    top: 65px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    max-height: 600px;
    overflow-y: scroll;
}

.filter-hide-preset-div{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    margin-bottom: 10px;
    padding: 10px 20px;
}

.filter-hide-preset-tag{
    margin-left: 5px;
    padding: 2px 4px;
    background: #E5E5E6;
    border-radius: 3px;
    font-family: SF Pro Display;
    font-size: 12px;
    color: #414141;
}

.filter-hide-preset-div:hover{
    background: rgba(128,88,231,0.3);
}

.filter-hide-filters{
    padding: 20px;
    box-sizing: border-box;
    border-right: 1px solid #E5E5E6;
    min-height: 279px;
}

.filter-hide-filters-save{
    min-height: 160px;
    border-bottom: 1px solid #E5E5E6;
    width: 202px;
    margin-bottom: 16px;
}

.filter-hide-filters-save > a{
    text-decoration: none;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    color: #000000;
    display: block;
    margin-bottom: 16px;
}

.filter-hide-filters-new{
    text-decoration: none;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    color: #8058E7;
}

.filter-hide-inputs{
    padding: 20px;
    width: calc(100% - 243px);
    box-sizing: border-box;
}

.filter-hide-inputs-block{
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);
    margin-right: 12px;
    width: 227px;
    height: 48px;
    background: #F5F5F5;
    border-radius: 5px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    color: #000000;
    box-sizing: border-box;
    padding: 14px 12px;
    margin-bottom: 12px;
}

.filter-hide-inputs-block-active{
    border: 2px solid #8058E7;
}

.filter-hide-inputs-block-clear{
    position: relative;
    z-index: 50;
}

.filter-date-calendar{
    background: #F5F5F5;
    border-radius: 5px;
    height: 200px;
    box-sizing: border-box;
    padding: 12px 16px;
    overflow-y: scroll;
    width: 227px;
    margin-left: -12px;
    padding-top: 16px;
    margin-top: 25px;
    position: sticky;
}

.filter-calendar-date{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    width: 42px;
    height: 30px;
    text-align: center;
}

.filter-calendar-active{
    color: rgba(0,0,0,0.5);
}

.filter-calendar-active-dot{
    color: #ffffff;
    background: rgb(128,88,231);
    border-radius: 25px;
}

.filter-calendar-in-active{
    background: rgba(128,88,231,0.8);
    color: #fff;
}

.calendar-arrow{
    width: 20px;
    text-align: center;
}

.filter-time-input{
    margin-right: 12px;
    width: 232px;
    height: 48px;
    background: #F5F5F5;
    border-radius: 5px;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    color: #000000;
    box-sizing: border-box;
    padding: 14px 12px;
}

.filter-times-selects{
    margin: 0 0 0 -12px;
    width: 227px;
    box-sizing: border-box;
    position: relative;
}

.filter-time-select{
    width: 90px;
}

.filter-time-select-time{
    width: 125px;
}

.filter-hide-select{
    margin-left: -12px;
    width: 199px;
    position: relative;
}

.filter-hide-inputs-block-btn{
    text-align: center;
    color: #ffffff;
    background: #8058E7;
}

.filter-hide-inputs-block-btn-clear{
    color: #000;
    background: #fff;
    box-shadow: 0 0 black;
}

.filter-hide-inputs-block-btn-clear > svg{
    margin-right: 5px;
    margin-top: 3px;
}

#today_date{
    color: #4d11e8;
}

.filter-active-blocks{
    margin-top: 15px;
    font-size: 16px;
}

.filter-active-block{
    padding: 5px 10px;
    color: #fff;
    background: #8058e7a8;
    text-align: center;
    border-radius: 10px;
    margin-right: 5px;
    border: 1px solid #8058E7;
    box-sizing: border-box;
}

/*Загрузка*/
.load_layer{
    border: 8px solid #f3f3f3;
    border-top: 8px solid #32c5ff;
    border-bottom: 8px solid #45cc67;
    border-right: 8px solid #fe5252;
    border-left: 8px solid #FFC100;
    border-radius: 50%;
    width: 3px;
    height: 3px;
    animation: spin 2s linear infinite;
    display: block;
    margin: auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*Логирование*/
#logs{
    
}

#logs > div{
    margin: 0 15px 8px 29px;
    font-size: 12px;
    color: #7f7f7f;
}

.logs_date{
    margin-right: 7px;
}

/**/
.users-input-block-name{
    font-family: SF Pro Display;
    font-size: 14px;
    color: #808080;
    margin-bottom: 8px;
    padding-left: 12px;
}

.user-info-btn{
    margin-right: 16px;
}

.user-permissions-info-btn{
    color: #808080;
}

.user-info-btn-active{
    color: #8058E7;
}

.user-info-btn > svg{
    margin-right: 6px;
    margin-top: 2px;
}

.user-info-btn > div{
    font-family: SF Pro Display;
    font-size: 14px;
    line-height: 16px;
}

.dop-user-btn{
    margin: 12px 14px;
}

.dop-user-btn > svg{
    margin-top: 3px;
    margin-right: 5px;
}

.dop-active-see{
    margin-left: 10px;
    margin-top: 5px;
}

.form-work-content-text-div-btns-btn{
    padding: 15px 20px;
    border-radius: 5px;
    color: #808080;
    font-family: Roboto;
    font-size: 15px;
}

.form-work-content-text-div-btns-btn > svg{
    margin: 4px 4px 0 0;
}

.form-work-content-text-div-btns-btn-save{
    background: #8058E7;
    color: #ffffff;
}