
.dialog-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 2; /* Sit on top */
  padding-top: 200px; /* Location of the box */
  left: 0;
  top: 0;
  bottom: 0px;
  width: 100%; /* Full width */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
}

.dialog {
  display: grid;
  grid-template-columns: 1fr;
  /* grid-template-rows: 28px 250px 28px; */
  background-color: #ffffff;
  margin: auto;
  padding: 10px;
  /* padding-bottom: 5px; */
  width: 600px;
  font-size: 12px;
  border-radius: 5px;
}

.dialog .title {
    padding-left: 10px;
    padding-bottom: 5px;
    /* border-bottom: 1px solid #aaaaaa; */
    border-bottom: 1px solid #bbbbbb;
    font-size: 15px;
    font-weight: 400;
}

.dialog .title .label {
    margin-top: 6px;
    display: inline-block;
    float: left;
}

.dialog .content {
    /* background: #fcfcfc; */
    /* border: 1px solid #888; */
    padding: 10px;
    padding-top: 18px;
    overflow-y: auto;
}

.dialog .entry {
    margin-top: 2px;
}

.dialog .entry .label {
    display: inline-block;
    text-align: right;
    width: 100px;
    font-weight: 700;
}

.dialog .entry .value {
    display: inline-block;
    width: 400px;
    margin-top: 2px;
    margin-left: 5px;
    padding-left: 5px;
}

.dialog .entry .checkmark {
    display: inline-block;
    width: 400px;
    margin-top: 2px;
    margin-left: 5px;
    padding-left: 5px;
    float: right;
}

.dialog .entry .browse {
    display: inline-block;
    width: 100px;
}

.dialog .entry.show {
    display: block
}

.dialog .entry.hide {
    display: none
}

.dialog .ctls {
    display: flex;
    justify-content: center;
    border-top: 1px solid #bbbbbb;
    padding-top: 8px;
}

.ctls button {
    margin: 0px 5px 0px 5px;
}

.dialog .title .close {
  display: inline-block;
  float: right;
  color: #888888;
  text-align: right;
  font-size: 15px;
  font-weight: bold;
  margin-right: 10px;
  line-size: 30px;
}

.dialog div .close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.loader {
    border: 10px solid #e861235b;
    border-top: 10px solid #e86123;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    z-index: 3;
}

.checkbox-modal {
    display: inline;
    float: left;
}

.dialog-modal .body div li input.checkbox-modal {
    display: inline;
    width: 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#loader-modal {
    display: none;
}

#loader-modal .dialog {
    background-color: transparent;
    height: 200px;
}

#loader-modal .dialog .title {
    border-bottom: none;
    text-align: center;
}

#loader-modal .dialog .ctls {
    border-top: none;
}

#loader-modal .dialog .content {
    display: flex;
    align-items: center;
    justify-content: center;
}

#file-selected-text {
    display: inline;
}

#file-select input {
    width: 500px;
    margin-left: 5px;
}
