/*-----------------------flex-table---------------------*/
.flex-table {
	flex-direction: column;
	margin-bottom: 20px;
}
.flex-row-r {
	border-bottom: 1px solid #DDDDDD;
	min-height: 40px;
}
.flex-row-r.buttons {
	justify-content: flex-start;
}
.flex-row-r.buttons > div,
.flex-row-r.buttons .flex-cell {
	flex: none;
}
.flex-row-r.header {
	font-size: 16px;
	font-weight: bold;
}
.flex-row-r.header .asc {
	padding-right: 15px;
	background: url('../images/asc.png') right center no-repeat;
}
.flex-row-r.header .desc {
	padding-right: 15px;
	background: url('../images/desc.png') right center no-repeat;
}

.flex-table, .flex-row-r {
	display: flex;
	grid-gap: 5px;
	justify-content: space-between;
}
.flex-row-r > div.flex-narrow,
.flex-cell.flex-narrow {
	flex: 0 0 1%;
}
.flex-row-r > div.flex-number,
.flex-cell.flex-number {
	flex: 0 0 50px;
}
.flex-row-r > div, .flex-cell {
	padding: 5px;
	flex: 1;
	/*display: flex;*/
	align-items: center;
}
.flex-row-r > div.flex-wide,
.flex-cell.flex-wide {
	flex: 2;
}
.flex-row-r > div.flex-10 {
    flex: 0 0 10px;
}

.incell-task-description {
	border-bottom: 1px solid #DDDDDD;
}
.incell-comment-description {
    font-style: italic;
}

/* разное */
h2 {
    font-size: 22px;
}
.error {
	color: #FF0000;
}
.link {
	cursor: pointer;
}
.link:hover {
	color: #0000FF;
}
.ui-widget {
    font-size: 14px;
    color: #222222;
}
.note {
	font-size: 12px;
}
.active-bg {
	background-color: #EEEEEE;
}

/* развёртываемые блоки */
.expandable {
    position: relative;
    word-wrap: break-word;
}
.expandable .ibutton {
    position: absolute;
    top: 0;
    right: 37px;
}
.expandable .button-expand,
.expandable .button-shrink
{
    position: absolute;
    top: 0;
    right: 0;
}
.expandable .header {
    font-size: 14px;
    font-weight: bold;
    color: #222222;
    padding: 10px 0;
}
.expandable .comment-block {
    padding: 5px;
    background-color: #EEEEEE;
}
.expandable .description {
    font-style: italic;
}
.expandable-label {
    display: flex;
    flex-direction: row;
}
.expandable-file {
    display: flex;
    flex-direction: row;
    gap: 5px;
	align-items: center;
	justify-content: space-start;
}
.expandable-file-download {
    cursor: pointer;
}

/* диалоги */
.flex-dialog-table {
	display: flex;
	gap: 15px;
    flex-direction: column;
}
.flex-dialog-block {
	display: flex;
	gap: 5px;
	justify-content: space-between;
    flex-direction: column;
}
.flex-dialog-row {
	display: flex;
	gap: 10px;
    flex-direction: row;
}
.flex-dialog-row > div {
    flex: 1;
}
.flex-dialog-row > div.flex-icon {
    flex: 0 0 20px;
}
.flex-dialog-row textarea,
.flex-dialog-row input[type="text"] {
    width: 100%;
}

.dialog-header {
    font-size: 14px;
    font-weight: bold;
    color: #222222;
}
#dialog-view-description {
    font-style: italic;
}
.dialog-comment-block {
    padding: 5px;
    background-color: #EEEEEE;
}
.dialog-comment-block .description {
    font-style: italic;
}
.dialog-separator {
    margin: 5px 0;
    height: 1px;
    background-color: #222222;
}
.dialog-zone {
    text-align: center;
    border: 1px solid #DDDDDD;
}
.dialog-file {
    display: flex;
    flex-direction: row;
    gap: 5px;
	align-items: center;
	justify-content: space-between;
}
.dialog-file > div {
    flex: 1;
}
.dialog-file > div.icon {
    flex: 0 0 24px;
}
.dialog-file-download,
.dialog-file-remove {
    cursor: pointer;
}
.inline-file-name {
    white-space: nowrap;
    /*text-overflow: ellipsis;
    width: 150px;*/
    overflow: hidden;
}

/* блокировка диалога */
.dialog-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1001;
    border-radius: inherit;
}
.ui-dialog {
    position: relative;
}
.ui-dialog-content {
    position: relative;
}
.ui-dialog .spinner-container {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1002;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.ibutton {
    margin-right: 5px;
    width: 32px;
    height: 32px;
    background: center no-repeat;
    background-size: contain;
    background-color: #FFFFFF;
    float: left;
    border: 1px solid #DDDDDD;
    cursor: pointer;
}
.icon {
    width: 20px;
    height: 20px;
    background-color: #FFFFFF;
    background: center no-repeat;
    background-size: contain;
    /*outline: 1px solid #DDDDDD;*/
}
.button {
    height: 32px;
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    cursor: pointer;
}

.priority-low,
.priority-medium,
.priority-high {
    line-height: 30px;
    height: 30px;
    border: 1px solid #DDDDDD;
    padding: 0 10px;
}
.priority-low,
.priority-0 {
    background-color: #FFFFFF;
}
.priority-medium,
.priority-1 {
    background-color: #FFBF00;
}
.priority-high,
.priority-2 {
    background-color: #FF2020;
}

.button-view,
.button-view-focus
{
	background-image: url('../images/description_24.png');
}
.button-edit {
	background-image: url('../images/edit_24.png');
}
.button-complete, .button-complete-event, .button-archive {
	background-image: url('../images/check_24.png');
}
.button-expand {
	background-image: url('../images/expand_24.png');
}
.button-shrink {
	background-image: url('../images/shrink_24.png');
}
.icon-comment {
	background-image: url('../images/comment_96.png');
}
.icon-attachment {
	background-image: url('../images/attachment_96.png');
}
.icon-close {
	background-image: url('../images/close_96.png');
}
.icon-file {
	background-image: url('../images/file_96.png');
}
.icon-info {
	background-image: url('../images/info_96.png');
}
.icon-user {
	background-image: url('../images/user_96.png');
}
.icon-priority {
	background-image: url('../images/priority_96.png');
}
.icon-download {
	background-image: url('../images/download_96.png');
}

@media (max-width: 768px) {
    .flex-row-r {
        flex-direction: column;
        padding-bottom: 10px;
    }
    .flex-row-r.header {
        display: none;
    }
    .flex-row-r > div, .flex-cell {
        padding: 5px 0;
    }
}