/* default standard modal dialog styles, there is no color scheme here */
.modal {
    margin:0;
    padding:0;
    position:fixed;
    top:0;
    bottom:0;
    right:0;
    left:0;
    z-index:2000;
    background-color:rgba(0,0,0,0.50);
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    font-size:1.18em;
}
.modal-custom {
    margin:0;
    position:fixed;
    top:0;
    bottom:0;
    right:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2000;
    box-sizing:border-box;
}

.modal .dialog {/*flex item, shrunk by align-items:center of parent */
    position:relative;
    font-family:sans-serif;
    padding:1em;/*needs padding around content*/
    margin:1em;/*needs space around sides*/
    background-color:var(--dialog-bg-color);
    border-radius:10px;
    border:none;
}

.modal .dialog a.close-modal {
    position:absolute;
    top:-12.5px;
    right:-12.5px;
    display:block;
    width:30px;
    height:30px;
    text-indent:-10px;
    font-size: 1px;
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center center;
    background-image:url('/img/close.png');
    text-decoration:none;
}
.modal .dialog a.visible {
    width:30px;
    height:30px;
}
.modal .dialog a.invisible {
    width:0;
    height:0;
}
.modal .dialog .header {
    text-wrap: wrap;
    min-width:10em;
    text-align:center;
}
/*default message dialogs*/
.modal .dialog .error-msg {
    color:red;
}
.modal .dialog .info-msg {
    color:blue;
}
.modal .dialog .error-lines, .modal .dialog .message-lines {
    font-size:0.8em;
}

/* new input */
.modal .dialog .content .container {
    display:flex;
    flex-flow:row;
    padding-top:1em;
    padding-bottom:1em;
}
.modal .dialog .content .container .input-label {
    margin-right:10px;
    padding-top:0.6em;
    text-wrap:nowrap;
}
.modal .dialog .content .container .input-wrap input[type='text'] {
    line-height:1.4em;
    font-size:1.1em;
    padding:0.2em;
    border-radius:3px;
    border-style:none;
    width:250px;
}
.modal .dialog .content .container .input-wrap input[type='text']:focus {
    outline:0;
}

/* form elements */
.modal .dialog .content .form-container {
    display:grid;
    grid-template-columns:max-content max-content;
    grid-gap:0.5em;
}
.modal .dialog .content .form-container .form-label {
    text-align:right;
    padding:0.7em 0 0 0;
}
.modal .dialog .content .form-container .form-data {
    text-align:left;
    padding:0.2em;
}
.modal .dialog .content .form-container .form-data input[type='text'],
.modal .dialog .content .form-container .form-data input[type='password'] {
    line-height:1.4em;
    font-size:1.1em;
    padding:0.2em;
    border-radius:3px;
    border-style:none;
    width:250px;
}
.modal .dialog .content .form-container .form-data input[type='text']:focus,
.modal .dialog .content .form-container .form-data input[type='password']:focus {
    outline:0;
}

/* input dialog */
.modal .dialog .grid {
    display:grid;
}

.modal .dialog .grid .label-cell {
    grid-column-start:1;
    grid-column-end:2;
    text-align:right;
    padding:0.2em;
    line-height:1.5em;
}

.modal .dialog .grid .input-cell {
    grid-column-start:2;
    grid-column-end:3;
    text-align:left;
    padding:0.2em;
}

.modal .dialog .grid .button-cell {
    padding:0.6em 0.2em 0.2em 0.2em;
}

/* input text element */
.modal .dialog .grid .input-cell input {
    padding:0.3em;
    border-radius:3px;
    border-style:none;
    font-size:0.9em;
    outline:0;
}

.modal .dialog .grid .input-cell .input-select {
    padding:0.2em;
    border-radius:3px;
    border-style:none;
    font-size:1.0em;
}

.modal .dialog .grid .input-cell .button {
    border-radius:4px;
    padding:0.3em 0.4em 0.3em 0.4em;
    margin:0 0.2em 0 0.2em;
    border-style:none;
    font-size:1em;
    display:inline-block;
    cursor:pointer;
}

.modal .dialog .header-note {
    color:#0066ff;
    font-size:0.9em;
    margin:0.3em;
}
/*
.modal .dialog .text-container {
    background-color:pink;
}
*/
.modal .dialog .content .text-input {
    font-size:1.2rem;
    width:17rem;
    height:10vh;
    min-width:20rem;
    max-width:20rem;
    min-height:5rem;
    border:0;
    border-radius:3px;
}
.modal .dialog .content .text-input:focus {
    outline:0;
}

/*progress bar, contains color scheme*/
.modal .dialog .progress-list-container {
    width:max-content;
}

.modal .dialog .progress-list-container .progress-list-item {
    text-wrap:nowrap;
    text-overflow:ellipsis;
    line-height:1.3em;
}

.modal .dialog .progress-list-container .initial {
    font-style:normal;
    font-weight:bold;
    color:var(--progress-initial-color);
}

.modal .dialog .progress-list-container .in-progress {
    font-style:italic;
    font-weight:bold;
    color:var(--in-progress-color);
}

.modal .dialog .progress-list-container .done {
    font-style:normal;
    font-weight:normal;
    color:var(--progress-done-color);
}

/*these styles work with htm-lib.js:SubmitCancelHtmData,ItemContainerHtmData,ItemHtmData
.modal
 .dialog
  .header
  .content
    ... here will be some custom content
  .buttons
   .button+.submit
   .button+.cancel
*/


.modal .dialog .content {
    overflow-y: auto;
    height:min-content;
    max-height:60vh;/*60% of viewport*/
    min-width:15em;
}

.modal .dialog .buttons {
    margin-top:10px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/*buttons use root color profile*/
.modal .dialog .buttons button.submit, .modal .dialog .buttons button.cancel,
.modal .dialog .buttons label.select {
    color:var(--button-text-color);
    border-radius:5px;
    border-width:0px;
    cursor:pointer;
    padding:10px;
    margin-left:5px;
    margin-right:5px;
    font-size:1.1em;
    font-weight:bold;
}
.modal .dialog .buttons button:focus {
    outline:0;
}
.modal .dialog .buttons button.submit, .modal .dialog .buttons label.select {
    background:var(--button-color);
}
.modal .dialog .buttons button.cancel {
    background:var(--button-light-color);
}
.modal .dialog .buttons button.submit:hover, .modal .dialog .buttons label.select:hover {
    background:var(--button-hover-color);
    color:var(--button-text-hover-color);
}
.modal .dialog .buttons button.cancel:hover {
    background:var(--button-light-hover-color);
    color:var(--button-text-hover-color);
}
.modal .dialog .buttons button.submit:active,
.modal .dialog .buttons button.cancel:active,
.modal .dialog .buttons label.select:active {
    background:var(--button-active-color);
    color:var(--button-text-active-color);
}
.modal .dialog .buttons button.submit:disabled {
    background:var(--disabled-button-bg-color);
    cursor: not-allowed;
}
/*** select files ***/
.modal .dialog .select-notes {
  color:#0066ff;
  font-size:0.9em;
  margin:0.3em 1em 0 1em;
}

.modal .dialog .select-notes .select-files-note {
  font-weight:bold;
  text-wrap: nowrap;
  color:#3f3fff;
}
.modal .dialog .buttons input#select-files-input {
  display:none;
  width:0;
}
.modal .dialog .selected-files-list {
  margin-bottom:1em;
  overflow-y: auto;
  height:min-content;
  width:max-content;
  max-height:60vh;/*60% of viewport*/
}
.modal .dialog .selected-files-list .selected-file {
  text-wrap: nowrap;
  font-style:normal;
  font-weight:bold;
  color:var(--progress-initial-color);
  line-height:1.3em;
}