[hidden], [v-cloak] {display: none!important;}

.orderdesc__h1 {font-size: 24px; font-weight: 700; margin-bottom: 20px;}
.orderdesc__info {color: var(--tt-darker-2); line-height: 1.5; margin-bottom: 20px; 
background-color: var(--bg-lighter); box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
border: 1px solid var(--bdc); position: relative; padding: 15px 20px; border-left-width: 44px; border-left-color: var(--accent);}
.orderdesc__info::before {content:"\f071"; font-family:'Font Awesome 5 Pro'; font-weight: 300; font-size: 22px;
color: #fff; margin-top: -18px; position: absolute; left: -44px; top: 50%; width: 44px; text-align: center;}

/* Форма добавления заказа */
.orderdesc__addform {margin-bottom: 20px; background-color: var(--bg-lighter); 
    padding: 15px; border-radius: 6px; box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
.orderdesc__addformTitle {margin-bottom: 15px; font-size: 21px; font-weight: 700; text-align: center;}
	
/* Поле ввода основного заголовока */
.orderdesc__input {margin-bottom: 15px;}
.orderdesc__inputLabel {margin: 0 0 2px; padding: 0; font-size: 13px; line-height: 20px;color: var(--tt);}
input.orderdesc__inputValue {border-bottom: 1px solid rgba(0,0,0,.25); background-color: var(--bg);}
input.orderdesc__inputValue:valid { border-bottom-color: #0c0; box-shadow: 0 1px 0 #0c0;}
input.orderdesc__inputValue:focus {border-bottom-color: #00A6DD; box-shadow: 0 1px 0 #00A6DD;}
#orderdesc__formFull {display: none}

/* Заголовок блока доп.полей */
h2.orderdesc__xfieldsTitle {font-size: 18px; font-weight: 700; margin-bottom: 15px; text-align: center;}

/* Доп.поля */
.orderdesc__xfields {padding-bottom: 15px;}
.orderdesc__xfieldsItem {display: flex; align-items: center; margin-bottom: 10px;}
.orderdesc__xfieldsLabel {flex: 0 0 160px; margin-right: 20px; line-height: 20px; margin-bottom: 4px; color: var(--tt);}
.orderdesc__xfieldsLabel:after {content: ':';}
		select.orderdesc__xfieldsInput,
		textarea.orderdesc__xfieldsInput,
		input.orderdesc__xfieldsInput {
			display: block; width: 100%; border: 1px solid rgba(0,0,0,.15);
			outline: 2px solid transparent;}
		textarea.orderdesc__xfieldsInput {
			height: 56px;
			min-height: 56px;
			max-height: 216px;
			resize: vertical;
		}
		input.orderdesc__xfieldsInput {
			max-width: 450px;
		}
		input.orderdesc__xfieldsInput[type='date'],
		input.orderdesc__xfieldsInput[type='number'] {
			max-width: 150px;
		}
		input.orderdesc__xfieldsInput:required:invalid {
			/*box-shadow: 0 2px 0 #ef6c00;*/
			border-bottom-width: 2px;
			border-bottom-color: #ef6c00;
		}
		input.orderdesc__xfieldsInput:required:valid {
			/*box-shadow: 0 2px 0 #0c0;*/
			border-bottom-width: 2px;
			border-bottom-color: #0c0;
		}
		select.orderdesc__xfieldsInput {
			max-width: 300px;
		}
		select.orderdesc__xfieldsInput:focus,
		textarea.orderdesc__xfieldsInput:focus,
		input.orderdesc__xfieldsInput:focus {
			/*background: #EEF3F7;*/
			/*border-color: #00A6DD;*/
		}
		.orderdesc__xfieldsInput + .orderdesc__formOption {
			margin-top: 4px;
		}
.orderdesc__xfieldsInput::-webkit-outer-spin-button,
.orderdesc__xfieldsInput::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
.orderdesc__xfieldsInput[type=number] {-moz-appearance: textfield}

.orderdesc__formOption {
	display: flex;
	align-items: center;
	margin-bottom: 7px;
	color: #4d4d4d;
	cursor: pointer;
	width: fit-content;
}
	.orderdesc__formOption input {
		width: 14px;
		height: 14px;
		border: 2px solid #ccc;
	}

.orderdesc__formButtons {border-top: 1px solid var(--bdc); margin-top: 15px;
	padding-top: 15px; display: flex; flex-wrap: wrap; gap: 10px 15px;}
.orderdesc__formButtons button {height: 30px; background: #00838f; color: #fff; font-size: 12px; font-weight: 700;
	padding: 0 25px; font-family: inherit; border: 2px solid transparent; border-radius: 3px;
	cursor: pointer; transition: opacity .2s; white-space: nowrap;}
.orderdesc__formButtons button:hover {opacity: .7;}
.orderdesc__formButton--gray {background: #546e7a!important;}
.orderdesc__formButtons button.orderdesc__formButton--light {color: var(--tt) !important; background: rgba(0,0,0,.1) !important;}

/* Блок навигации и поиск */
.orderdesc__navbar {display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-bottom: 20px;}

/* Список-селектор статусов */
.orderdesc__statuslist {display: flex; flex-wrap: wrap; background-color: var(--bg-lighter); 
    padding: 5px; border-radius: 6px; box-shadow: 0 2px 5px 0 rgba(0,0,0,.1); gap: 5px;}
.orderdesc__statuslist-item {display: flex; align-items: center; height: 30px; border-radius: 4px; 
    padding: 0 10px; font-size: 12px; text-transform: uppercase; color: var(--tt-darker-2); cursor: pointer;}
.orderdesc__statuslist-item:hover {color: var(--tt); background-color: var(--bg);}
.orderdesc__statuslist-item.active {pointer-events: none; color: #fff; background-color: var(--accent); font-weight: 600;}

/* Быстрый поиск */
.orderdesc__search {position: relative; flex: 1; min-width: 200px; max-width: 100%;}
.orderdesc__search:before {position: absolute; left: 0; top: 0; bottom: 0; width: 40px; 
    display: grid; place-items: center; font-family: 'Font Awesome 5 Pro'; font-weight: 300; content: "\f002";}
input.orderdesc__searchInput {box-shadow: 0 2px 5px 0 rgba(0,0,0,.1); 
    background-color: var(--bg-lighter); padding-left: 40px; border-radius: 6px;}
.orderdesc__searchCancel {position: absolute; top: 0; right: 0; bottom: 0; width: 40px; 
    opacity: 0.5; color: var(--tt); display: grid; place-items: center;}
.orderdesc__searchCancel::before {font-family: 'Font Awesome 5 Pro'; font-weight: 300; content: "\f00d";}
.orderdesc__searchCancel:hover {opacity: 1;}

/* Главный список заказов */
.orderdesc__list {padding: 5px 0px 15px;}

/* Элемент списка заказов */
.orderdesc__item {background-color: var(--bg-lighter); padding: 15px; border-radius: 6px; padding-left: 70px;
    position: relative; box-shadow: 0 2px 5px 0 rgba(0,0,0,.1); margin-bottom: 10px;}
.orderdesc__item.preview {background: rgba(255,200,0,.2);}
.orderdesc__item.myself {background: rgba(0,200,255,.07);}
.orderdesc__item.checked {background: rgba(255,50,30,.25);}
a.orderdesc__itemAuthor:hover, a.orderdesc__itemLink:hover {text-decoration: underline;}

.orderdesc__itemRating {width: 45px; display: grid; place-items: center; 
    position: absolute; left: 15px; top: 15px; white-space: nowrap;}
.orderdesc__itemRating-vote {display: block; color: var(--tt-lighter); font-size: 15px; position: relative;}
.orderdesc__itemRating-vote:after {font-family: 'Font Awesome 5 Pro'; font-weight: 300; content: "\f164"; 
    position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%);}
.orderdesc__itemRating-vote.positive {color: var(--tt);}
.orderdesc__itemRating-vote.disabled {pointer-events: none;}
.orderdesc__itemRating-vote.disabled.positive:before {content: '+';}
.orderdesc__itemRating-vote.disabled:after {display: none;}
.orderdesc__itemRating-vote:hover, .orderdesc__itemRating-vote:hover:after {color: #83BE54;}

.orderdesc__itemHeader {display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    font-size: 13px; color: var(--tt); margin-bottom: 5px;}
.orderdesc__itemFoto {width: 30px; height: 30px; border-radius: 50%;}
.orderdesc__itemAuthor {font-weight: 600;}
.orderdesc__itemDate {font-size: 12px; color: var(--tt-darker);}
.orderdesc__itemStatus {margin-left: auto; background: #0288d1; color: #fff;
    padding: 0 10px; display: flex; align-items: center; height: 30px; border-radius: 6px; cursor: default;}
.orderdesc__itemStatus--done {background: #388e3c;}
.orderdesc__itemStatus--cancel {background: #bf360c;}
.orderdesc__itemStatus--wait {background: #9760a1;}
.orderdesc__itemStatus--preview {background: #777;}
.orderdesc__itemTitle {font-weight: 700; font-size: 16px;}
a.orderdesc__itemLink {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
    font-size: 12px; text-transform: uppercase; color: var(--accent); margin-top: 10px; padding: 1px;}
a.orderdesc__itemLink::before {  font-family: 'Font Awesome 5 Pro'; transform: rotate(-90deg);
    font-weight: 300; content: "\f0ab"; margin-right: 5px; display: inline-block;}

.orderdesc__itemComment {max-height: 100px; overflow: auto; margin-top: 10px;
	padding: 2px 0 2px 10px; border-left: 2px solid var(--bdc); white-space: break-spaces;}
.orderdesc__itemAnswer {padding-top: 10px; padding-left: 20px; border-top: 1px solid var(--bdc);
	margin-top: 10px; font-size: 13px; white-space: break-spaces; position: relative;}
.orderdesc__itemAnswer:after {font-family: 'Font Awesome 5 Pro'; font-weight: 300; content: "\f3e5"; 
    position: absolute; left: 0; top: 8px;}
.orderdesc__itemDetails {font-size: 12px; margin-top: 5px; color: var(--tt);}

/* Пустой список */
.orderdesc__emptyList {text-align: center; margin: 15px 0 0; padding: 15px;
	border: 1px solid rgba(0,0,0,.1); background: #fbe9e7; color: #c00; border-radius: 3px;}
#orderdesk__edit {display: none;}
.orderdesc__navigation .pagination {padding-top: 0;}


@media screen and (max-width: 620px) {
	.orderdesc__list {padding: 5px;}
    .orderdesc__statuslist-item {flex-grow: 1; justify-content: center; white-space: nowrap;}
    .orderdesc__itemTitle, .orderdesc__itemLink, .orderdesc__itemAnswer {margin-left: -55px;}
    .orderdesc__itemDate {order: 10;}
    .orderdesc__itemStatus {margin-left: 0;}
    .orderdesc__itemAuthor {flex: 1 1 0; max-width: 100%; min-width: calc(100% - 140px); 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;}
	.orderdesc__xfieldsItem {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 15px;
	}
	.orderdesc__xfieldsLabel {
		flex: 0;
		margin-bottom: 2px;
	}
	.orderdesc__formButtons button {width: 100%;}
}