:root{
	--left-column-width: 580px;
	
	--default-span-width: 150px;
	--default-span-width: 160px;
	
	--container-border-color: #999;
	
	--max-width: 996px;
	--max-width: 700px;
}

body.aspect-horizontal{
	--max-width: 100%;
}

html, body{
	margin:0;
	padding:0;
}

html{
	width:100%;
	height:100%;
	font-size:12px;
	font-style:normal;
	font-family: Tahoma, Arial;
}

body{
	display: block;
    padding: 0 10px;
    max-width: var(--max-width);
    margin: 0 auto;
}

body#horizontal-layout{
	/*/width: 100%;/**/
	max-width: 100%;
}

.server-and-file-setup-cont,/**/
.protocol-description-file-cont/**/{
	/*/display: flex;/**/
    flex-direction: row;
    align-items: start;
}

.server-and-file-setup-cont{
	display: flex;
    flex-direction: column;
    align-items: start;
}

.server-and-file-setup-cont > div{
	padding-bottom: 10px;
}
.server-and-file-setup-cont span.default/**/
{
	display: inline-block;
	width: var(--default-span-width);
}

.protocol-description-file-cont:before{
	display: inline-block;
	width: var(--default-span-width);
	content: "Задача:";
	font-weight: bold;
}

body#horizontal-layout .protocol-description-file-cont:before{
/*/	display: none;/*/
}

.expander-cont{
	position: relative;
	width: calc(100% - var(--default-span-width));
	width: 100%;
	height: 30px;
}

#task-params{
	width: round(down, calc(100% - var(--default-span-width) - 2px), 1px);
    width: calc(100% - 12px);
}

#user{
	position: absolute;
    top: 0;
    left: 0;
    height: 26px;
    z-index: 20;
    width: 88px;
    border: solid 1px;
    /*background: transparent;*/
}

.macros-input,
#request-interval{
	position: absolute;
    top: 0;
    left: 0;
    height: 26px;
    z-index: 20;
    width: 175px;
    border: solid 1px;
    /*background: transparent;*/
}

#request-interval{
	width: 35px;
	text-align: right;
}

#protocol-selector,
#user-selector,
#server-address-selector{
    position: absolute;
    top: 0;
    left: 0;
/*    width: 250px;*/
    width: 180px;
    z-index: 10;
    height: 30px;
}

#server-address{
	position: absolute;
    top: 0;
    left: 0;
    height: 26px;
    z-index: 20;
    width: 228px;
    border: solid 1px;
    /*background: transparent;*/
    display: none;
}

#source-file,
#protocol-file,
#protocol-description-file {
	display: none;
}

#protocol-file-name,
#source-file-name,
#protocol-description-file-name{
	position: absolute;
    top: 0px;
    left: 0px;
    width: 228px;
    height: 26px;
    z-index: 20;
    /*background: transparent;*/
    border: solid 1px var(--container-border-color);
}
#protocol-description-file-name{
	display:none;
}

label.btn[for="protocol-file"],
label.btn[for="source-file"],
label.btn[for="protocol-description-file"]{
	position: absolute;
    top: 0;
    left: 185px;
    width: 30px;/*115px;*/
    height: 20px;
    z-index: 30;
    /* background: transparent;*/
    display: inline-block; /*flex;*/
    align-items: center;
    text-align: center;
}

label[for="protocol-description-file"]:before{
	content: '+';/*'Открыть файл описания задач';*/
}

label[for="source-file"]:before{
	content: 'Открыть файл исходных данных';
}

label[for="protocol-file"]:before{
	content: '+';/*'Открыть файл описания протокола';*/
}


#server-selector,
#cluster-selector,
#protocol-description-file-selector{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:30px;
	z-index: 10;
}



.btn{
	font-size:100%;
	display: inline-block;
	padding:5px 2px;
	border-radius: 3px;
	border: solid 1px var(--container-border-color);
	background: #eee;
	color: #000;
	height: 30px;
	margin-right: 5px;
}

.btn:hover{
	background: #ddd;
	cursor: pointer;
}

#popup-modal-wnd-voile{
	position:fixed;
	width:100%;
	height:100%;
	max-height:100%;
	background: hsla(0, 0%, 0%, 0.5);
	display:flex;
	z-index:100;
	top:0;
	left:0;
	align-items: center;
	justify-content:center;
}

#popup-modal-wnd{
	width:400px;
	height:auto;
    max-height: 100%;
	position:relative;
	background: #fff;
}

#popup-modal-wnd-title-cont > div{
	padding:5px 30px 5px 10px;
	background:transparent;
	width: auto;
}

#popup-modal-wnd-title-cont{
	/*position: absolute;
	top:0;
	left:0;*/
	width:100%;
	padding: 5px 0 3px 0px;
	background: hsl(0, 0%, 30%);
	color:#FFF;
	font-weight:bold;
}

#popup-modal-wnd-html-cont{
	/*padding:40px 5px 5px;*/
	padding:5px 5px 5px;
	width:100%;
	/*overflow: hidden;*/
	max-height: 100%;
	overflow-y: auto;
}
#popup-modal-wnd-html-cont-inner{
	overflow:auto;
	display: flex;
    /*flex-direction: column-reverse;*/
    flex-direction: column;
}
#popup-modal-wnd-close-btn:before{
	content: "X";
    background-color: #a00;
    color: #FFF;
    width: 20px;
    height: 17px;
    display: block;
    text-align: center;
    padding-top: 3px;
    font-weight: bold;
}
#popup-modal-wnd-close-btn{
	position:absolute;
	top:5px;
	right:5px;
	padding:0;
	margin:0;
	height: 20px;
}

#tasks-editor-cont,
#hosts-editor-cont{
	/*display: flex;
    flex-direction: column;*/
    display:table;
}
#tasks-editor-cont > .row,
#hosts-editor-cont > .row{
	/*display: flex;
    flex-direction: row;*/
    display:table-row;
}

#tasks-editor-cont > .row:nth-child(2n),
#hosts-editor-cont > .row:nth-child(2n){
	background:#eee;
}

#tasks-editor-cont > .row.title,
#hosts-editor-cont > .row.title{
	background:#bbb;
}

#tasks-editor-cont > .row:last-child,
#hosts-editor-cont > .row:last-child{
	background:#fff;
}

#hosts-editor > .btnCont #hostFile{
	display:none;
}

#tasks-editor-cont > .row > div,
#hosts-editor-cont > .row > div{
	/*display:inline-block;*/
	display:table-cell;
	height: 32px;
    font-size: 100%;
    margin:0;
    padding:0;
}

#tasks-editor-cont > .row > .code{
	width: 100px;
}
#tasks-editor-cont > .row > .comment{
	width: 525px;
}

#tasks-editor-cont > .row > .btn,
#hosts-editor-cont > .row > .btn{
	width:100%;
}

#tasks-editor-cont > .row > .btn.delete,
#hosts-editor-cont > .row > .btn.delete{
	background:hsla(0, 50%, 30%, 0.5);
}

#tasks-editor-cont{
	    /* width: 690px; */
    max-height: 300px;
    overflow-y: auto;
    height: 300px;
    display: block;
    margin-right: 0;
    padding-right: 0;
}

#tasks-editor-cont > .row > div > input,
#hosts-editor-cont > .row > div > input{
	display:block;
	height: 100%;
	width: 100%;
    font-size: 100%;
    margin:0;
    padding:0;
    border:none;
}

#hosts-editor-cont > .row > .address{
	width:120px;
	padding-left:5px;
	padding-right:15px;
}

#hosts-editor-cont > .row > .name{
	width:200px;
}

#hosts-editor-cont > .row > .comment{
	width:300px;
}

#hosts-editor-cont > .row > .taskList{
	width:100px;
}

#progress-cont{
	display: flex;
    flex-direction: column;
    /*/min-width: var(--left-column-width);/**/
    /*/padding-bottom: 20px;/**/
    width: 100%;
}

.protocol-description-file-cont > span.default,
.protocol-description-file-cont:before,
.server-cont > span.default,
.cluster-cont > span.default,
.task-params-cont > span.default,
#progress-cont span.default{
	display: inline-block;
	width: var(--default-span-width);
	max-width: var(--default-span-width);
    min-width: var(--default-span-width);
}


#progress-cont progress{
	display: inline-block;
	width: calc(100% - var(--default-span-width));
}

#server-addresses-change-btn {
	/*margin-left: 10px;*/
	height: 30px;
	width: 35px;
}

#server-addresses-change-btn > span.default{
	width: 30px;
}

.protocol-description-file-cont > span.default/**/{
	/**/display:none;/**/
}

#console-cont{
	position: relative;
}

#storage-btn-cont,
#img-console-cont{
	padding-top:20px;
}

#console-img,
#console-text{
	display:block;
	min-width: 380px;
	height: 100px;
	overflow: auto;
	border:solid 1px var(--container-border-color);
	resize: both;
}

.btn > span.default{
	width: 115px;
}

h1.title{
	padding-right: 20px;
    padding-bottom: 0px;
    display: inline-block;
    line-height: 100%;
    font-size: 140%;
}

span.version:before{
	content: "от";
	padding-right: 15px;
}

#storage-save-protocol-btn{
	left: 225px;/*310px;*/
    position: absolute;
}

/*@media screen and (min-aspect-ratio: 11/10){*/
@media screen and (min-width: 990px){
	body.aspect-auto .content{
		display: flex;
		align-items: flex-start;
		flex-direction: row;
	}
}

@media screen and (max-width: 989px){
	body.aspect-auto .content{
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}
}

body.aspect-horizontal .content{
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	max-width: 100%;
    width: 100%;
}

body.aspect-vertical .content{
	display: flex;
	align-items: flex-start;
	flex-direction: column;
}


.content #left-col,
.content #right-col{
    min-width: var(--left-column-width);
    width: 100%;
}

.content #right-col{
	padding-top:15px;
}

body.aspect-horizontal .content #right-col{
	padding-top: 0px;
}

body.aspect-horizontal{
	/*/width: 100%;/**/
    max-width: 100%;
}
body.aspect-horizontal .content #left-col,
body.aspect-horizontal .content #right-col,
body#horizontal-layout .content #left-col,
body#horizontal-layout .content #right-col{
	max-width: 50%;
}
body.aspect-horizontal .content #left-col,
body#horizontal-layout .content #left-col{
	padding-right: 5px;
}
body.aspect-horizontal .content #right-col,
body#horizontal-layout .content #right-col{
	padding-left: 5px;
}

label.btn.load[for="hostFile"]{
	height: 18px;
	vertical-align: middle;
}

label.btn.load[for="hostFile"] span.default{
	vertical-align: middle;
}


#user-selector{
	width:112px;
}

#console-img{
	height:100px;	
}

#text-autoscroll-cont{
	position: absolute;
    right: 0px;
    top: -5px;
}

#current-log-message-cont,
#current-message-cont{
	padding-bottom: 20px;
	padding-right: 5px;
}

#downloaded-files-cont > .default,
#console-cont > .default,
#img-console-cont .default,
#current-log-message-cont .default,
#current-message-cont .default{
	font-weight: bold;
}

#current-log-message-body,
#current-log-message,
#current-message-body,
#current-message{
	height: 50px;
	overflow: auto;
	border: solid 1px var(--container-border-color);
    resize: vertical;
    min-height: 50px;
    right: 0;
    max-width: var(--max-width);
}

#current-message{
	min-height: 20px;
	height: 20px;
	background-color: #fff;
}

#current-log-message-body,
#current-message-body{
    white-space: pre;
    min-height: 100px;
    height: 100px;
	background-color: #fff;
}

#downloaded-files-cont{
	padding-top:20px;
	padding-bottom: 5px;
}
.resources > #hostCount:before{
	content: "Хостов:";
}
.resources > #taskCount:before{
	content: "Задач:";
}
.resources > #protocolCount:before{
	content: "Протоколов:";
}
.resources > #hostCount:before,
.resources > #taskCount:before,
.resources > #protocolCount:before{
	padding-right:5px;
	padding-left: 15px;
}
#row_01{
	min-width:var(--left-column-width);
	max-width: var(--max-width);
    padding-bottom: 20px;
}

#row_01 .description{
	padding-top: 10px;
}

body#horizontal-layout *{
	max-width: 100%;
}

#aspect-selector-cont:before{
	content: "Выбор компоновки:";
	padding-right:5px;
}

#dynamic-params-cont:before{
	content: "Блок интерфейса протокола:";
	display: block;
	padding-top: 20px;
	padding-bottom: 20px;
}

#downloaded-files{
	border: 1px solid var(--container-border-color);
    height: 100px;
    overflow: auto;
    resize: auto;
}

fieldset[disabled] .btn,
.btn.disabled,
.btn[disabled="disabled"]{
	background: #aaa;
	color:#ccc;
}

#proto-dynamic-interface-cont{
	display:flex;
}

.proto-interface-element-cont button.btn{
	background: #ddf;
}

.proto-interface-element-cont button.btn[disabled="disabled"]{
	background: #aab;
}


#get-task-descr-from-server{
	position: absolute;
    left: 225px;
    display: flex;
    height: 32px;
    vertical-align: middle;
    align-items: center;
}
.hidden{
	display:none;
}

label.btn{
	height: 18px;
	display: flex;
    align-items: center;
}

#btn-upload-file > span.default{
	width: auto;
}

.btn-cont{
	display: inline-flex;
}

body > div.content{
	min-width: var(--left-column-width);
	max-width: var(--max-width);
}

#row_01 > div.description{
	min-height: 28px;
	height: 28px;
	display: none;
}

#uploaded-files-list.hover{
	outline: solid 2px #bbb;
}

#uploaded-files-list > li > span.filesize{
	padding-left: 10px;
}

#uploaded-files-list > li > span.last-modified{
	padding-left: 10px;
}

#uploaded-files-list,
#result-files-list{
	min-height: 50px;
	border: solid 1px var(--container-border-color);
	resize: vertical;
    overflow: auto;
    max-width: var(--max-width);
    padding-left:0;
	margin-top:0;
	margin-bottom: 0px;
	background-color: #fff;
}

body#horizontal-layout #uploaded-files-list{
	min-height: 75px;
}

#message-body-cont > .btn-cont,
#uploaded-files-cont > .btn-cont,
#result-files-cont > .btn-cont{
		padding-top: 5px;
}

ul#uploaded-files-list > li,
ul#result-files-list > li{
	padding-top:2px;
	padding-bottom: 2px;
}

ul#uploaded-files-list > li > a,
ul#result-files-list > li > a{
	text-decoration: none;
	color: #000;
}

ul#uploaded-files-list > li > a.selected,
ul#result-files-list > li > a.selected{
	background-color: #aaa;
}

ul#result-files-list > li > span.filesize{
	padding-left: 20px;
}
ul#result-files-list > li > span.mime-type{
	padding-left: 20px;
}

.protocol-description-file-cont{
	/*/display: flex;/**/
    align-items: center;
}
.protocol-description-file-cont > span.default{
	font-weight: bold;
}
#message-body-cont > div.default,
#uploaded-files-cont > div.default,
#result-files-cont > div.default,
#status-message-cont > div.default,
#progress-cont > div.default{
	font-weight: bold;
}

#result-files-cont{
	padding-top: 10px;
}

#uploaded-files-cont,
#log-message-cont,
#status-message-cont{
	padding-top: 10px;
}

#log-message-cont{
	display: none;
}

#btn-start{
	width: 120px;
}

.task-user-name-cont > span.default{
	/**/display:none;/**/
}

body#horizontal-layout .task-user-name-cont > span.default{
	/**/display:inline-block;/**/
	font-weight: bold;
}

.task-user-name-cont:before{
	content: "Пользователь:";
	font-weight: bold;
	display: inline-block;
    width:  var(--default-span-width);
    max-width: var(--default-span-width);
    min-width: var(--default-span-width);
}

body#horizontal-layout .task-user-name-cont{
	width: auto; 
}
body#horizontal-layout .task-user-name-cont:before{
	display:none;
}

#task-user-name{
	width: calc(100% - var(--default-span-width));
	width: calc(100% - 12px);
}

fieldset{
	min-width: calc(var(--left-column-width) - 22px);
    max-width: var(--max-width);
    width: calc(100% - 22px);
    margin: 0;
    border-color: #f0f0f0;
    border-style: solid;
    border-width: 1px;
    margin-top: 15px;
}

fieldset:first-child{
	margin-top: 0px;
}

fieldset > legend{
	font-weight: bold;
	padding-left: 5px;
    padding-right: 5px;
}

.progress-cont,
.server-cont,
.cluster-cont,
.task-params-cont,
.protocol-description-file-cont,
.task-user-name-cont{
	width: 100%;
	/*/display: flex;/**/
    padding-bottom: 8px;
    align-items: center;
}
fieldset:first-child > div:last-child{
	padding-bottom: 0;
}

fieldset:first-child > div:before,
fieldset:first-child > div > span.default{
	font-weight: bold;
}

fieldset:first-child > div > input{
    padding: 6px 4px;
}

#message-body-cont{
	padding-top: 10px;
}

#progress-cont > .progress-cont:first-child{
	padding-bottom:0px;
}

#task-percent{
	padding-left: 10px;
}

#task-percent:after{
	content: "%";
	padding-left: 2px;
}

#progress-cont .progress-step-name-cont .default{
	width: auto;
	min-width: 0;
	padding-right: 10px;
	padding-left: 30px;
}

#progress-cont .progress-step-name-cont .default:first-child{
	padding-left: 0px;
}

#progress-cont > span.default{
	font-weight: bold;
	padding-top: 10px;
}

#task-params-btn-cont{
/* 	position:relative; */
}

#btn-task-parameters{
/* 	z-index: 10; */
}

#available-parameter-list{
/* 	position: absolute; */
/*     top: 11px; */
/*     left: 110px; */
/*     height: calc(100% - 10px); */
/*     overflow: hidden; */
/*     z-index: 5; */
	-webkit-appearance: none;
	-moz-appearance: none;
	text-indent: 1px;
	text-overflow: '';
	max-width: 120px;
	min-width: 120px;
    width: 120px;
}

#available-parameter-list > option{
/* 	height: 20px; */
	background-color: #fff;
}

#available-parameter-list > option:first-child{
	display: none;
}

div.btn-cont > a.btn{
	height: 18px;
	max-height: 18px;
	display: flex;
	align-items: center;
	text-decoration: none;
}

body#horizontal-layout .section-01{
	/*/height: 98px;/**/
}

body#horizontal-layout .section-02{
	min-height: 127px;
}

body#horizontal-layout .section-03{
	min-height: 287px;
}

#display-style{
	margin-top: 0;
}

#task-result-status-cont{
	
}

#task-result-status-cont:before{
	content: "Задача:";
}

#left-col > fieldset,
#right-col > fieldset,
div.content > fieldset.right-col{
    border-color: #ddd;
    border-width: 2px;
    background: #eee;
    border-bottom-color: #bbb;
    border-right-color: #bbb;
}

#left-col > fieldset > legend,
#right-col > fieldset > legend,
div.content > fieldset.right-col > legend{
	background-color: #fff;
    padding: 0 2px;
    text-transform: uppercase;
}

#task-number-result:before,
#task-number:before{
	content: "(";
	padding-left: 10px;
}

#task-number-result:after,
#task-number:after{
	content: ")";
}

#editor-area{
	display: block;
	width: 100%;
	min-height: 400px;
}

#user-expiration-date:before{
	content: "подписка активна до: ";
	font-weight: bold;
}
#user-expiration-date.not-found:before{
	content: "подписка не найдена";
}
#user-expiration-date.expired:before{
	content: "подписка завершена: ";
}


* {
	/*/outline: solid 1px #b00;/**/
	/*/background: hsla(240, 30%, 40%, 0.1);/**/
}