@import url('https://fonts.googleapis.com/css?family=Montserrat:300,500&subset=cyrillic-ext');

/* !RESET */
html,body,div,span,applet,object,iframe,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,h1,h2,h3,h4,h5,h6,p{box-sizing:border-box;margin:0;padding:0;border:0;outline:0;}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
td { vertical-align: top; }

.form .py-4.text-center {
	display: none;
}

/* ROOT */
#cabinet {
	font-size: 14px;
	line-height: 120%;
	color: #333333;
}

#cabinet b {
	font-weight: 600;
}

#cabinet h1, 
#cabinet .h1,
#cabinet h2,
#cabinet .h2 {
	padding: 0;
	margin: 25px 0;
	display: block;
	font-size: 22px;
	font-weight: normal;
}
#cabinet .h2 {
	font-size: 18px;
}


.main.container {
	position: relative;
	padding-top: 120px;
}	

.login {
	background: #fff;
	padding: 30px;
	border-radius: 30px;
	max-width: 400px;
	width: 100%;
	margin: 0 auto;
}
.form h1 {
	display: block;
	font-size: 20px;
	padding-bottom: 30px;
	color: #333333;
}

.form input {
	display: block;
	width: 100%;
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid #777;
	margin-bottom: 10px;
	font-size: 14px;
	border-radius: 0;
}
.form .text {
	font-size: 13px;
	line-height: 130%;
	padding-bottom: 10px;
}
.form button,
.form .ckey {
	border: 2px solid #333333;
	background: #333333;
	color: #fff;
	text-align: center;
	padding: 10px 20px;
	letter-spacing: 1px;
	border-radius: 8px;
	cursor: pointer;
	transition: color .5s, background .5s;
	overflow: hidden;
	display: inline-block;
	margin: 15px 0 0;
	min-width: 220px;
}
.form button:hover,
.form .ckey:hover {
	background: #fff;
	color: #333333;
}
.alrt.err {
	color: #ff4500;
	padding-top: 10px;
	font-size: 13px;
	line-height: 130%;
	text-align: center;    
}

#forma {
    margin: 100px auto;
}

/* PASS */
.pass-box {
	position: relative;
}
.pass-box .pass-view {
	display: none;
}
.pass-box .pass-view + label {
	display: block;
	height: 16px;
	width: 22px;
	position: absolute;
	right: 5px;
	top: 9px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M288 144a110.9 110.9 0 0 0 -31.2 5 55.4 55.4 0 0 1 7.2 27 56 56 0 0 1 -56 56 55.4 55.4 0 0 1 -27-7.2A111.7 111.7 0 1 0 288 144zm284.5 97.4C518.3 135.6 410.9 64 288 64S57.7 135.6 3.5 241.4a32.4 32.4 0 0 0 0 29.2C57.7 376.4 165.1 448 288 448s230.3-71.6 284.5-177.4a32.4 32.4 0 0 0 0-29.2zM288 400c-98.7 0-189.1-55-237.9-144C98.9 167 189.3 112 288 112s189.1 55 237.9 144C477.1 345 386.7 400 288 400z'/%3E%3C/svg%3E") no-repeat;
	background-size: auto 100%;
	cursor: pointer;
	opacity: .5;
}
.pass-box .pass-view:checked + label {
	right: 5.5px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M634 471L36 3.5A16 16 0 0 0 13.5 6l-10 12.5A16 16 0 0 0 6 41l598 467.5a16 16 0 0 0 22.5-2.5l10-12.5A16 16 0 0 0 634 471zM296.8 146.5l134.8 105.4C429.4 191.9 380.5 144 320 144a112.3 112.3 0 0 0 -23.2 2.5zm46.4 219.1L208.4 260.2C210.7 320.1 259.5 368 320 368a113 113 0 0 0 23.2-2.5zM320 112c98.7 0 189.1 55 237.9 144a285.5 285.5 0 0 1 -44 60.2l37.7 29.5a333.7 333.7 0 0 0 52.9-75.1 32.4 32.4 0 0 0 0-29.2C550.3 135.6 442.9 64 320 64c-36.7 0-71.7 7-104.6 18.8l46.4 36.3c18.9-4.3 38.3-7.1 58.2-7.1zm0 288c-98.7 0-189.1-55-237.9-144a285.5 285.5 0 0 1 44.1-60.2l-37.7-29.5a333.6 333.6 0 0 0 -52.9 75.1 32.4 32.4 0 0 0 0 29.2C89.7 376.4 197.1 448 320 448c36.7 0 71.7-7.1 104.6-18.8l-46.4-36.3C359.3 397.2 339.9 400 320 400z'/%3E%3C/svg%3E");
}

.table-box {
	width: 100%;
	overflow-x: auto;
}
.projects-table .btn {
	margin: 0;
	padding: 10px 10px;
}
.projects-table td {
	vertical-align: inherit;
}

.page-cabinet .logo {
	display: block;
	width: 80px;
	padding: 10px;
}
.page-cabinet .logo img {
	display: block;
	width: 100%;
}

.empty-box {
	padding: 30px;
	background: #f0f0f0;
}

.support-list {
	text-align: center;
}
.support-item {
	display: block;
	max-width: 150px;
	margin: 0 auto;
	color: #333;
	font-size: 13px;
	opacity: .8;
	transition: opacity .5s;
}
a.support-item:hover {
	opacity: 1;
	cursor: pointer;
}
.support-list .fas,
.support-list .fab {
	display: block;
	font-size: 48px;
	padding: 30px 0;
	color: #e98800;
}
.support-list .fab {
	color: #0088CC;
}
.support-list .fas.fa-comments {
	color: #333333;
}

.user-nav {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	padding: 0 0 0 50px;
}
.user-nav p {
	display: block;
	height: 36px;
	width: 36px;
	border-radius: 30px;
	background: #0a183e;
	color: #ffd700;
	font-weight: bold;
	position: absolute;
	top: 0;
	left: 0;
	padding: 4px 0;
	text-align: center;
	font-size: 20px;
}
.user-nav small {
	display: block;
	opacity: .6;
}

.cab-menu .item {
	position: relative;
	display: block;
	text-align: center;
	padding: 15px 15px;
	text-decoration: none;
	transition: .5s color, .5s background;
	color: #565656;
	background: #eeeeee;
	border-radius: 5px;
}
.cab-menu .item i {
	display: block;
	font-size: 18px;
	margin: 0 auto 5px;
}
.cab-menu a.item:hover {
	background: #d2d2d2;
	color: #000;
}
.cab-menu span.item {
	color: #fff;
	background: #000;
}

.cab-menu .item svg {
	display: inline-block;
	height: 48px;
	width: 48px;
	margin-right: 20px;
}
.cab-menu .item b {
	color: #000;
	font-size: 120%;
	letter-spacing: 1px;
}

.submenu {
    padding-bottom: 12px;
}
.ckey,
.submenu .item {
	display: inline-block;
	padding: 9px 20px;
	border: 1px solid #efefef;
	color: #000;
	border-radius: 20px;
	margin: 0 15px 15px 0;
	text-decoration: none;
	transition: .5s background, .5s color;
	cursor: pointer;
}
.submenu span.item,
.submenu a.item:hover {
	background: #f3f4fc;
}
.ckey {
	border: 1px solid #000;
	background: #fff;
	color: #000;
	margin: 20px auto 0;
}
.ckey:hover {
	background: #000;
	color: #fff;
}
.ckey:disabled {
	background: #707070 !important;
	border-color: #707070 !important; 
	color: #fff !important;
	cursor: default;
	padding-left: 40px;
	position: relative;
}
.ckey .snd {
	display: none;
}
.ckey:disabled .nrm {
	display: none;
}
.ckey:disabled .snd {
	display: inline;
}
.loader {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	position: relative;
	animation: rotate 1s linear infinite;
	display: none;
}
.ckey:disabled .loader {
	display: block;
	position: absolute;
	top: 13px;
	left: 12px;
}
.loader::before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	inset: 0px;
	border-radius: 50%;
	border: 3px solid #FFF;
	animation: prixClipFix 2s linear infinite ;
}

.radio-box {
	text-align: center;
	padding-bottom: 20px;
}
.radio-box input {
	position: absolute;
	bottom: 0;
	left: 50%;
	height: 1px;
	width: 1px;
	opacity: 0;
}
.radio-box label.ckey {
	border: 0;
	display: block;
	background: #f3f3f3;
	color: #333;
	width: 100%;
	min-width: auto;	
}
.radio-box label.ckey:hover,
.radio-box input:checked + label.ckey {
	background: #777777;
	color: #fff;
}

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

@keyframes prixClipFix {
  0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
  25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
  50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
  75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
  100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}

/* Modal */
body.modalon {
	overflow: hidden;
}
.fog {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, .3);
	z-index: -1;
	opacity: 0;
	transition: opacity .5s;
}
.modalon .fog {
	opacity: 1;
	z-index: 10;
}
.modalon .allwrapper,
.nav-show .wrapper {
	-webkit-filter: blur(10px);
   filter: blur(10px);	
}

#modal-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	overflow: auto;
	z-index: 11;
	text-align: center;
	transform: scale(0);
	transition: transform .1s;
	padding: 0 10px;
}
#modal-box {
	position: relative;
	text-align: left;
	display: inline-block;
	max-width: 460px;
	width: 100%;
	background: #fff;
	padding: 30px;
	transform: scale(0);
	transition: transform .5s;
	margin: 30px 0;
	border-radius: 30px;
}
.modalon #modal-wrapper {
	transform: scale(1);
}
.modalon #modal-box {
	transform: scale(1);
}
.info {
	margin-bottom: 20px;
	font-size: 90%;
	line-height: 120%;
}

#modal .close {
	position: absolute;
	right: 25px;
	top: 25px;
	width: 32px;
	height: 32px;
	opacity: 0.3;
	transition: .5s opacity, .5s transform;
}
#modal .close:hover {
  opacity: 1;
}
#modal .close:before, .close:after {
  position: absolute;
  top: 0;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #333;
}
#modal .close:before {
  transform: rotate(45deg);
}
#modal .close:after {
  transform: rotate(-45deg);
}	
.form label span.label {
	display: block;
	padding-bottom: 5px;
}
/*
.form label input,
.form select {
	display: block;
	width: 100%;
	padding: 5px;
	border: 1px solid #cccccc;
	margin-bottom: 10px;
}
*/
.form option {
	padding: 5px;
	display: block;
}

.form-view div.legend,
.form-view div.value {
	padding: 15px;
	border-top: 1px solid #cccccc;
}
.form-view div.legend.sotial-key {
	padding-left: 55px;
}
.form-view div.legend-sep {
	padding: 7px 0;
	border-top: 1px solid #cccccc;	
}
.sotial-key i {
	position: absolute;
	top: 50%;
	left: 15px;
	display: inline-block;
	height: 28px;
	width: 28px;
	transform: translateY(-50%);
}

.bt-0 {
	border-top: 0 !important;
}
.form-view div.red {
	color: #dc143c !important;
}
.form-view .border-top {
	border-top: 1px solid #cccccc;
}
.form-view div.h {
	font-size: 18px;
	padding: 0 0 30px 15px;
    font-weight: bold;
	color: #333333;
}
.form-view small {
	display: block;
	line-height: 120%;
}
.link {
	border-bottom: 1px dotted #333333;
	color: #333333;
	cursor: pointer;
}
.link:hover {
	border-bottom: 1px solid #ffaf1a;
	color: #ffaf1a;	
}
.link.red {
	border-bottom: 1px dotted #dc143c;
	color: #dc143c;
}
.link.red:hover {
	border-bottom: 1px solid #e63f00;
	color: #e63f00;	
}
#modal-report .red {
	color: #dc143c;
	padding: 5px 0 0;
}
#modal-report .green {
	color: #333333;
	padding: 5px 0 0;
}
#modal-box h3 {
    padding: 0;
    margin: 0;
    font-size: 18px;
}

.form-view .language {
    text-transform: none;
    position: relative;
    right: auto;
    top: auto;
}
.form-view .language a {
    padding: 0 5px;
    width: auto;
}

.h-date {
	font-size: 18px;
	display: block;
	padding: 5px 0;
}
	
	.oauth-list {
		margin: 5px -5px -15px;
		border-top: 1px dashed #ccc;
		padding-top: 15px;
	}
	.oauth-list li {
		list-style: none;
		padding: 5px;
		text-align: center;
		display: inline-block;
		width: 50%;
	}
	.oauth-list .ckey {
		border: 0;
		width: 100%;
		min-width: auto;
		color: #fff !important;
		margin: 0;
		line-height: 100%;
		padding: 13px 5px;
		transition: .5s opacity;
		opacity: .9;
	}
	.oauth-list .ckey:hover {
		opacity: 1;
	}
	.oauth-list .key-facebook { background-color: #3b5998 !important; }
	.oauth-list .key-google { background-color: #dd4b39 !important; }


.logo-google {
	background: 0 0 no-repeat;
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGlkPSJTb2NpYWxfSWNvbnMiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEyOCAxMjgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnIGlkPSJfeDMxX19zdHJva2UiPjxnIGlkPSJHb29nbGUiPjxyZWN0IGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBoZWlnaHQ9IjEyOCIgd2lkdGg9IjEyOCIvPjxwYXRoIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTI3LjU4NSw2NGMwLTQuMTU3LDAuNjktOC4xNDMsMS45MjMtMTEuODgxTDcuOTM4LDM1LjY0OCAgICBDMy43MzQsNDQuMTgzLDEuMzY2LDUzLjgwMSwxLjM2Niw2NGMwLDEwLjE5MSwyLjM2NiwxOS44MDIsNi41NjMsMjguMzMybDIxLjU1OC0xNi41MDNDMjguMjY2LDcyLjEwOCwyNy41ODUsNjguMTM3LDI3LjU4NSw2NCIgZmlsbD0iI0ZCQkMwNSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNjUuNDU3LDI2LjE4MmM5LjAzMSwwLDE3LjE4OCwzLjIsMjMuNTk3LDguNDM2TDEwNy42OTgsMTYgICAgQzk2LjMzNyw2LjEwOSw4MS43NzEsMCw2NS40NTcsMEM0MC4xMjksMCwxOC4zNjEsMTQuNDg0LDcuOTM4LDM1LjY0OGwyMS41NjksMTYuNDcxQzM0LjQ3NywzNy4wMzMsNDguNjQ0LDI2LjE4Miw2NS40NTcsMjYuMTgyIiBmaWxsPSIjRUE0MzM1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02NS40NTcsMTAxLjgxOGMtMTYuODEyLDAtMzAuOTc5LTEwLjg1MS0zNS45NDktMjUuOTM3ICAgIEw3LjkzOCw5Mi4zNDlDMTguMzYxLDExMy41MTYsNDAuMTI5LDEyOCw2NS40NTcsMTI4YzE1LjYzMiwwLDMwLjU1Ny01LjU1MSw0MS43NTgtMTUuOTUxTDg2Ljc0MSw5Ni4yMjEgICAgQzgwLjk2NCw5OS44Niw3My42ODksMTAxLjgxOCw2NS40NTcsMTAxLjgxOCIgZmlsbD0iIzM0QTg1MyIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTI2LjYzNCw2NGMwLTMuNzgyLTAuNTgzLTcuODU1LTEuNDU3LTExLjYzNkg2NS40NTd2MjQuNzI3ICAgIGgzNC4zNzZjLTEuNzE5LDguNDMxLTYuMzk3LDE0LjkxMi0xMy4wOTIsMTkuMTNsMjAuNDc0LDE1LjgyOEMxMTguOTgxLDEwMS4xMjksMTI2LjYzNCw4NC44NjEsMTI2LjYzNCw2NCIgZmlsbD0iIzQyODVGNCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9nPjwvZz48L3N2Zz4=");
	background-size: 100% auto;
}	
.logo-facebook {
	background: 0 0 no-repeat;
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMC8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvVFIvMjAwMS9SRUMtU1ZHLTIwMDEwOTA0L0RURC9zdmcxMC5kdGQnPjxzdmcgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiIGhlaWdodD0iMzJweCIgaWQ9IkxheWVyXzEiIHZlcnNpb249IjEuMCIgdmlld0JveD0iMCAwIDMyIDMyIiB3aWR0aD0iMzJweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGc+PGNpcmNsZSBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGN4PSIxNiIgY3k9IjE2IiBmaWxsPSIjM0I1OTk4IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHI9IjE2Ii8+PHBhdGggZD0iTTIyLDMyVjIwaDRsMS01aC01di0yYzAtMiwxLjAwMi0zLDMtM2gyVjVjLTEsMC0yLjI0LDAtNCwwYy0zLjY3NSwwLTYsMi44ODEtNiw3djNoLTR2NWg0djEySDIyICAgeiIgZmlsbD0iI0ZGRkZGRiIgaWQ9ImZfMl8iLz48L2c+PGcvPjxnLz48Zy8+PGcvPjxnLz48Zy8+PC9zdmc+");
	background-size: 100% auto;
}	
.logo-telegram {
	background: 0 0 no-repeat;
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOnVybCgjU1ZHSURfMV8pO30KCS5zdDF7ZmlsbDojRkZGRkZGO30KCS5zdDJ7ZmlsbDojRDJFNEYwO30KCS5zdDN7ZmlsbDojQjVDRkU0O30KPC9zdHlsZT48Zz48bGluZWFyR3JhZGllbnQgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGlkPSJTVkdJRF8xXyIgeDE9IjI1NiIgeDI9IjI1NiIgeTE9IjAiIHkyPSI1MTAuMTMyMiI+PHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojNDFCQ0U3Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojMjJBNkRDIi8+PC9saW5lYXJHcmFkaWVudD48Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIyNTYiIGN5PSIyNTYiIHI9IjI1NiIvPjxnPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0zODAuNiwxNDcuM2wtNDUuNywyMzAuNWMwLDAtNi40LDE2LTI0LDguM2wtMTA1LjUtODAuOUwxNjcsMjg2LjdsLTY0LjYtMjEuN2MwLDAtOS45LTMuNS0xMC45LTExLjIgICAgYy0xLTcuNywxMS4yLTExLjgsMTEuMi0xMS44bDI1Ni44LTEwMC43QzM1OS41LDE0MS4yLDM4MC42LDEzMS45LDM4MC42LDE0Ny4zeiIvPjxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xOTcuMiwzNzUuMmMwLDAtMy4xLTAuMy02LjktMTIuNGMtMy44LTEyLjEtMjMuMy03Ni4xLTIzLjMtNzYuMWwxNTUuMS05OC41YzAsMCw5LTUuNCw4LjYsMCAgICBjMCwwLDEuNiwxLTMuMiw1LjRjLTQuOCw0LjUtMTIxLjgsMTA5LjctMTIxLjgsMTA5LjciLz48cGF0aCBjbGFzcz0ic3QzIiBkPSJNMjQ1LjgsMzM2LjJsLTQxLjcsMzguMWMwLDAtMy4zLDIuNS02LjgsMC45bDgtNzAuNyIvPjwvZz48L2c+PC9zdmc+");
	background-size: 100% auto;
}	
	
@media (max-width: 1000px) {
	.container {
    	max-width: 100% !important;
	}
}	
@media (max-width: 768px) {
	#cabinet {
		padding: 30px 0 0;
	}
	.user-nav {
    	position: relative;
    	left: auto;
    	top: auto;
    	transform: inherit;
    	padding: 0;
    	margin-bottom: 20px;
		overflow: hidden;
		text-align: left;
		font-size: 12px;
		z-index: 999;
	}
	.user-nav p {
		left: auto;
		right: 0;
		display: none;
	}
	.user-nav b {
		margin: 2px 0 0;
		width: 110px;
		overflow: hidden;
		display: block;
	}
	
	.balance-box > div {
		padding-bottom: 10px;
	}
	.balance.balance-ref {
    	padding: 5px 20px 22px 70px;
	}
	.balance, .ref-tree .total {
		border-radius: 15px;
		font-size: 12px;
		padding: 10px 10px 10px 15px;
    }
    .balance.balance-ref .ico {
    	left: 15px;
    	font-size: 25px;
	}
	.balance.telegramm {
		border-radius: 0;
		font-size: 13px;
		padding: 15px 10px 15px 70px;
		margin-bottom: 10px;
	}
	.balance.telegramm .ico {
		font-size: 30px;
		left: 20px;
	}
    .col-6 .balance b {
    	padding: 3px 0 0 30px;
    }
    .col-6 .balance i {
		font-size: 20px;
		top: 40px;
		left: 15px
    }
	.submenu {
		padding-top: 5px;
		text-align: center;
	}
	.my-orders .order-item {
		margin: 0 -15px !important;
		padding: 10px 0;
    	border-bottom: 0;
	}
	.order-item > div {
    	padding: 1px 5px;
	}
	.bx {
    	padding: 10px;
    	border-radius: 0;
   }
   .order-item > div:nth-child(3) .bx {
   	border-radius: 15px 15px 0 0;
   	margin-top: 10px;
   }
   .order-item > div:last-child .bx {
   	border-radius: 0 0 15px 15px;
   }
   .order-info,
   .order-price {
   	padding: 0 20px !important;
   }
	.order-price {
		padding-bottom: 10px !important;
	}
	.ref-tree .total {
		border-radius: 0;
	}
	.cab-menu {
		padding: 0 !important;
		margin: 0 -10px;
	}
	.cab-menu > div {
		padding: 0;
		font-size: 11px;
	}
	.cab-menu .item i {
		display: block;
		font-size: 20px;
		margin: 0 auto 8px;
	}

	.title {
		display: none !important;
	}
	.main.container {
    	padding-top: 15px;
	}
	.transf label {
		margin: 0;
	}
	.my-orders .stts,
	.my-orders .summ small {
		display: block;
		margin: 0;
	}
	.form-view {
		margin: 0;
		padding: 0 !important;
	}
	.cab-menu .item {	
		text-align: center; 
	}
	.form-view div.legend {
		border-bottom: 0;
		text-align: center;
	}
	.form-view div.value {
		border-top: 0;
		text-align: center;
	}
	.form-view div.h {
		padding: 0 0 30px;
		text-align: center;
	}
	#cabinet .h1,
	#cabinet .h2 {
		margin: 30px 0 30px;
	}
}








	/* modal */
	.modal-show #body {
		filter: blur(2.5px);
		position: relative;
	}

	/* The Modal (background) */
	.modal-show .modalfog {
		display: block;
		top: 0;
		background: rgba(0, 0, 0, .1); 
	}
	.modalfog {
		position: fixed;
		z-index: 1;
		left: 0;
		top: -100vh;
		width: 100%;
		height: 100%;		
		transition: background .5s;  
		overflow: hidden;
	}	
	#modal .h3 {
		font-size: 18px;
		line-height: 130%;
		margin: 0;
		padding: 0 30px 15px 0;
		display: block;
	}
	#modal .h2 {
		font-size: 22px;
		line-height: 130%;
		display: block;
	}
	#modal .form {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -300%);
		max-width: 480px;  
		width: 100%;
		max-height: 0;
		overflow: hidden;
	}
	.modal-show #modal .form {
		max-height: inherit;
		animation-name: modalopen;
		animation-duration: .3s;  
		transform: translate(-50%, -50%);
		background: #fefefe;
		padding: 30px;
		border-radius: 5px;
		height: auto;
		z-index: 99;
	}
	

	
	.form input,
	.form textarea {
		display: block;
		width: 100%;
		padding: 10px 15px;
		border: 0;
		border: 1px solid #4b4b4b;
		border-radius: 5px;
		margin-bottom: 15px;
	}

	/* Add Animation */
	@keyframes modalopen {
  		from { transform: translate(-50%, -300%); opacity: 0;}
  		to { transform: translate(-50%, -50%); opacity: 1;}
	}





.row.payments {
	border-radius: 18px;
	background: rgba(0, 0, 0, 0.025);
	padding: 30px;
	margin: 10px 0;
}



.menu li {
	margin-right: 10px;
}

.dmn-acc {
	display: inline-block;
	width: 140px;
}

.dmn-item {
	background: #fff;
	box-shadow: 0 0 5px rgba(51, 51, 51, 0.06);
	padding: 15px 15px 15px 160px;
	border-radius: 15px;
	margin-top: 15px;
	position: relative;
}
.dmn-item .dmn-acc {
	position: absolute;
	top: 5px;
	left: 15px;
}
.dmn-item a.a0 {
	text-decoration: none;
	color: #000 !important;
}

.dmn-item .dmn-acc .btn {
	color: #3b5998;
	transition: .5s color;
	cursor: pointer;
}
.dmn-item .dmn-acc .btn:hover {
	color: rgb(255, 204, 0);
}
.view0 .dmn-item {
	opacity: .8;
}
.view0 .dmn-item .v1 {
	display: none;
}
.view1 .dmn-item .v0 {
	display: none;
}

.breadcrumb {
    display: block;
	background-color: #f8f8f8;
	margin: 1.5rem 0;
}
.breadcrumb li {
	display: block;
	padding: 3px 0 !important;
}
.breadcrumb li a {
	text-decoration: none !important;
}

.course-intro .h1 {
	color: #fff !important;
}


/* FORMS */

.form
{
	padding: 30px;
}

.form label
{
	display: block;
}

.red
{
	color: red !important;
	padding-left: 2px;
}
.green
{
	color: #57ae00 !important;
}

label p
{
	padding: 3px 0;
}

.check_
{
	display: block;
	padding: 2px 0 5px;
}

	.check_ input
	{
		float: left;
		margin: 2px 7px 0 0;
		width: 10px;
	}

.lang-change {
	display: none;
}

input[type=text],
textarea,
select,
input[type=pass],
input[type=number],
input[type=password],
input[type=email],
.input
{
	display: block;
	border-radius: 0;
	background: #fff 99% 50% no-repeat;
	color: #333;
	font-size: 15px;
	padding: 10px;
	border-radius: 6px;
	border: 1px solid rgba(0,0,0, .1);
	margin: 3px 0 10px;
	width: 100%;
	max-width: 100% !important;
	height: auto !important;
	box-sizing:border-box;
}
.input
{
	background: rgba(255, 255, 255, .3);
	min-height: 30px;
}



input[type=number]
{
	width: 100px;
}

input[type=text]:focus,
textarea:focus,
select:focus,
input[type=password]:focus,
input[type=email]:focus
{
color: #000;
border: 1px solid rgba(0,0,0, .3);
transition: all .5s;
background-color: #fff;
}

.key-cancel {
	font-size: 14px;
	padding: 10px;
}
.key-save {
	float: right;
    width: auto !important;
}


/* FILE */
.szs span
{
	display: inline-block;
	margin: 0 10px 10px 0;
	padding: 2px 10px;
	border-radius: 3px;
	background: #e7e7e7;
	color: #777777;
	font-size: 14px;
	cursor: pointer;
	transition: box-shadow 0.5s;
}
.szs span:hover
{
	box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
}

.szs span.active
{
	border: 1px solid #777777;
}

.szs span.cur
{
	color: #000000;
}
.szs span.imgok
{
	color: #333333;
	border-color: #333333;
}
.szs span.imgerr
{
	color: #ec0f0f;
	border-color: #ec0f0f;
}
	
.tabs.fileload .tab
{
	display: none;
}
.tabs.fileload .tab.active
{
	display: block;
}	

.tabs.fileload .tab > div
{
	background: 50% 50% no-repeat;
	background-size: cover;
	position: relative;
}

.tabs.fileload .tab > div > div
{
	position: absolute;
	top: 0;
	left: 0;
	height: 120px;
	width: 120px;
	border: 1px dashed #000;
	background: rgba(0, 0, 0, .1);
	cursor: move;
}


.ui-resizable-handle 
{
  background-color: #000;
  transition: background .5s;
}

.no-resizable .ui-resizable-handle
{
	display: none !important;
}

.ui-resizable-se {
width: 9px !important;
height: 9px !important;
right: -1px !important;
bottom: -1px !important;
}
.ui-resizable-sw {
left: -1px !important;
bottom: -1px !important;
}
.ui-resizable-nw {
left: -1px !important;
top: -1px !important;
}
.ui-resizable-ne {
right: -1px !important;
top: -1px !important;
}



.fimg
{
	float: left;
	background: #fff url(../img/file.png) 50% 50% no-repeat;
	border-radius: 100%;
	margin-right: 10px;
	width: 48px;
	height: 48px;
	background-size: auto 100% !important;
	transition: all 0.5s;
}

.fileload
{
	position: relative;
	overflow: hidden;
	border-radius: 3px !important;
	background: rgba(0, 0, 0, .03);
	border:none !important;
	box-shadow: none !important;
	color: #fff !important;
	text-shadow:none;
	padding: 5px;
	display: block;
	vertical-align: middle;
	width: 100%;
	cursor: pointer;
	transition: all 0.5s;
	margin-bottom: 10px;
}
.fileload:hover
{
	background: rgba(0, 0, 0, .05);
	transition: all 0.5s;
}

	.fileload.fful .fimg
	{
		background-color: #333;
		transition: all 0.5s;
	}
		.fileload.sn .fimg:after
		{
			content: "";
			background: #333333 url(../img/fff-ok.png) 50% 50% no-repeat;
			border-radius: 100%;
			height: 18px;
			width: 18px;
			position: absolute;
			left: 36px;
			top: 36px;
			opacity: 0;
			transition: all 0.5s;
		}
		.fileload.fful.sn .fimg:after
		{
			-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .3);
			-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .3);
			box-shadow: 0px 0px 5px rgba(0, 0, 0, .3);
			opacity: 1;
			transition: all 0.5s;
		}

.fileload span
{
	float: left;
}

	.fileload span.ffile
	{
		font-size: 22x;
		color: #333;
		padding: 15px 0;
	}

.fileload a
{
	color: #333;
	display: block;
	min-height: 50px;
	position: relative;
	text-decoration: none;
	width: 100%;
	z-index: 9;
}

.fileload input[type=file]
{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
}

.fileload input[type=checkbox]
{
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
	width: 0;
	height: 0;
}

.fileload label
{
	display: none;
}
.fileload.fful label
{
	position: absolute;
	right: 0;
	top: 15px;
	background: rgba(0, 0, 0, .05) url(../img/ddel.png) 50% 50% no-repeat;
	border-radius: 100%;
	margin-right: 10px;
	width: 32px;
	height: 32px;
	transition: all 0.5s;
	z-index: 8;
	cursor: pointer;
	display: block;
}

.dfile small, 
.dfile label
{
	display: block;
	padding-bottom: 5px;
}

.dfile
{
	padding: 5px;
}

.fileload:hover .fimg, 
.fileload label:hover
{
	-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .2);
	box-shadow: 0px 0px 5px rgba(0, 0, 0, .2);
	transition: all 0.5s;
}

.form label > span {
	color: #4b4b4b;
	display: block;
	padding: 10px 0 5px;
}

/* CHECKLIST */

.keylist
{
	margin: 15px 0 20px;
}

	.keylist label
	{
		background: rgba(0,0,0, .03);
		border-radius: 3px;
		color: #333;
		padding: 5px 13px 7px;
		margin: 0 10px 10px 0;
		cursor: pointer;
		transition: all 0.5s;
	}
	.keylist label:hover
	{
		background: rgba(0,0,0, .1);
	}
	.keylist label.active
	{
		background: rgba(0,0,0, .5);
		color: #fff;
	}
	.keylist.multi label
	{
		float: left;
	}
	
		.keylist label input,
		.keylist.radio2 input
		{
			display: none;
		}
		.keylist.radio2 input:checked + label {
			background: rgba(0,0,0, .5);
			color: #fff;
		}




/* NOTIFICATION */

#notification
{
	width: 300px;
	min-height: 0;
	max-height: 100px;
	margin: 0 0 0 -150px;
	display: none;
	opacity: 0;
	position: fixed;
	top: -50px;
	left: 50%;
	z-index: 9999;
}
#notification:before,
#notification:after
{
	content: " ";
	display: table;
}
#notification:after
{
	clear: both;
}

	#notification #notification_wrap
	{
		width: 300px;
		margin: 0 auto;
		border-radius: 0 0 10px 10px;
	}
	
/* ALERT */

	.alrt
	{
		padding: 20px 10px 0;
		text-align: left;
		font-size: 13px;
		color: #333;
	}
	
	#notification .alrt
	{
		background-color: rgba(0,0,0, .5);
		background-position: 10px 50%;
		border-radius: 0 0 10px 10px;
		color: #fff;
	}
	
		.alrt.bad, 
		.alrt.err
		{
			background-image: url(../img/128-alert.png);
		}
		.alrt.ok
		{
			background-image: url(../img/128-ok.png);
		}		
		.alrt.v1
		{
			background-image: url(../img/128-v1.png);
		}
		.alrt.v0
		{
			background-image: url(../img/128-v0.png);
		}	



.ai-list {
	margin: 0 -5px;
}
.ai-list > div {
	padding: 5px;
}


button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Анімація завантаження */
button .send {
	display: none;
}
button:disabled .send {
	display: inline-block;
	transform: translateY(2px);
}
button:disabled .send::after {
	content: "";
	display: inline-block;
	margin-right: 8px;
	width: 14px;
	height: 14px;
	border: 2px solid #fff;
	border-radius: 50%;
	border-top-color: transparent;
	animation: spin 0.6s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.icons {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;	
}
.icons .icon {
	display: block;
	font-size: 15px;
	padding: 7px 5px 6px;
	opacity: .5;
}
.icons .save {
	display: none;
}

.write.is_edit .save {
	display: block;
	padding-left: 3px;
	cursor: pointer;
	opacity: 1;
}
.write.is_edit .edit {
	display: none;
}

.links {
	padding-top: 20px;
	text-align: center;
}
.links a {
	padding: 5px 10px;
	color: #333333;
	text-decoration: underline;
	display: inline-block;
	border-left: 1px solid #c0c0c0;
}
.links a:hover {
	color:#333333;
	text-decoration: none;
}
.links a:first-child {
	border-left: 0;
}


.board-box,
#cabinet .stat-card {
	height: 100%;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 0 15px rgba(51, 51, 51, 0.1);
	padding: 25px 15px 30px;
	text-align: center;
	font-size: 14px;
	color: #333;
	display: block;
	transition: box-shadow .5s;
}
.board-box b,
#cabinet .stat-card .stat-value {
	font-size: 32px;
	display: block;
	padding-top: 20px;
	color: #000;
}
#cabinet h2.section-title {
	margin-bottom: 0;
}

.specs-list {
	margin: 30px 0;
}

a.board-box:hover {
	box-shadow: 0 0 25px rgba(51, 51, 51, 0.2);
}
.board-box.selected {
	background: #333333;
	color: #fff
}
.board-box.selected b {
	color: #fff;
}


/* Orders */
.order-unit {
	margin: 20px -10px;
	position: relative;
	border-top: 1px solid #616161;
}
.main-data .order-unit:first-child {
	border: 0;
	margin: -10px -10px 0;
}
.order-unit > div {
	padding: 5px;
}
.order-unit .graph {
	z-index: 1;
}
.order-unit h2 {
	font-size: 18px;
	color: #ababab;
	margin: 0;
}
.order-unit h2 b {
	color: #000;
	font-size: 22px;
}
.order-unit .bx {
	color: #ababab;
	margin-bottom: 5px;
	padding: 0;
}
.order-unit .bx b {
	display: block;
	color: #000;
	font-size: 16px;
	padding: 3px 0;
}

.order-items {
	width: 100%;
}
.order-items td, 
.order-items th {
	padding: 5px 3px;
	width: 10%;
	text-align: left;
	font-weight: normal;
	color: #ababab;
	border-bottom: 1px solid #e3e4e4;
} 
.order-items td {	
	color: #333;
}
.order-items .h {
	width: 50%;	
}
.order-items .s {
	width: 20%;
	text-align: right;	
}
.order-items .h small {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: #555555;
}
.order-items .total th {
	font-weight: 500;
	color: #2c2a25;
	border-bottom: 0;
}
.order-items .price {
	text-align: right;
	font-weight: bold;
}

.order-items img {
	float: left;
	margin-right: 10px;
	width: 28px;
	display: block;
}
.order-items .stts {
	display: inline-block;
	font-size: 12px;
	padding: 1px 5px;
	border-radius: 4px;
}

/* LOGO */
.vlogo {
	padding-right: 30px;
}
.pay1 {
	background:  url(../img/logo/liqpay-mob.svg) right 0px top 50% no-repeat;
	background-size: auto 20px;
}
.pay2,
.dlv5,
.dlv6 {
	background:  url(../img/logo/np-mob.svg) right 0px top 50% no-repeat;
	background-size: auto 24px;
}
.pay3,
.dlv10,
.dlv11 {
	background:  url(../img/logo/ukrp-mob.svg) right 0px top 50% no-repeat;
	background-size: auto 24px;
}