body {
  margin: 0px;
}



.esc-modal {
    position:absolute;
    top:0px;
    left:0px;
    background-color: #00000088;
    display:none;
    z-index: 1000000000;
    
  }
  
  .esc-modal.active {
    display:flex;
    justify-content: center;
    align-items: center;
  }
  .esc-modal .close {
    position: absolute;
    top:5px;
    right:10px;
  }
  .esc-modal .modal-content {
    margin-top:24px;
    width: fit-content;
    min-width:25%;
    max-width: 75%;
    min-height:33%;
    padding:24px;
    background-color:#ffff;
    position: relative;
    padding:0px 40px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  @font-face {
    font-family: 'Super Grotesk';
    font-style: normal;
    font-weight: 100;
    font-display: auto;
    src: url('/static/css/SUPERGROTESKWEB-W03-REGULAR.woff') format('woff');
}

.header {
    background-color: #FAEBA7;
    padding: 12px;
}
.header .header-img img {
    height:64px;
}
.body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-family: 'Super Grotesk';
    height: max-content;
    border:1px solid #000;
    height: 100%;
}
.main-content {
    margin: auto;
    
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    width:90%;
    height: 100%;
}
.error_message {
    color: #f00;
    font-weight: bold;
    font-size: medium;
}
input,button,select,textarea {
  border-radius:0px;
  padding: 8px 4px;
  font-size:12px!important;
  border-color: #888!important;
  border: 1px solid #888;
  width:100%;
  margin: 4px;
}
button {
  background-color: #478AAD;
  color: #fff;
  border: 0px;
  cursor: pointer;
  font-size:16px!important;
}
button:disabled {
  background-color: #888;
  color:#bbb;
}
.request-response {
  border-top: 1px solid #888;
  border-bottom: 1px solid #888;
  margin: 16px;
  padding: 8px;
}
.request-response.error {
  color:#900;
  font-weight: 800;
}
.request-response:empty {
  display:none;
}
button.link {
  border: none;
  font-weight: 300;
  cursor: pointer;
  background-color: transparent;
  padding: 0px;
  color: #000;
}

/* form styles */


form.jsform {
  min-width:640px;
  width:90%;
  margin:auto;
  position:relative;
  display: flex;
  flex-direction: column;
  
  
  .formrow {
    display: flex;
    gap: 16px;
  }
  .checkboxField {
    display: flex;
    gap:16px;
    align-items: center;
    width: 100%;
  }

  .formrow .formField {
    display:flex;
    flex-direction: column;
    gap:8px;
    width:100%;
  }
  
  .form-loading,.form-progress {
    display:flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffffbb;
    position:absolute;
    width: 100%;
    height: 100%;
    padding: 16px;
    img {
      opacity:0.5;
    }
  }
  .form-progress {
    display:none;
  }

  
  .formfooter {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 320px;
    justify-content: center;
    .buttons {
      display: flex;
      justify-content:space-around;
        gap: 16px;
        min-width: 50%;
        button.delete {
          background-color: #900;
        }
        button[data-action="delete"] {
          background-color: #900;
        }
        
    }
    
  }
  .formHeader {
    font-size:24px;
    padding:8px;
    margin:0px
  }
  .formBody {
    padding:16px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    gap: 16px;
    input,button,select,textarea {
      border-radius:0px;
      padding: 8px 12px;
      font-size:14px!important;
      border-color: #888!important;
      border: 1px solid #888;
      width:100%;
      margin: 4px;
    }
  }
}
form.jsform.loaded {
  .form-loading {
    display: none;
  }
}
form.jsform .requires-id {
  display: none;
}
form.jsform.track-progress {
  .form-progress {
    display: flex;
    .progress-box {
      width:50%;
      border: 1px solid #000;
      padding: 16px;
      display: flex;
      justify-content: center;
      background-color: #fff;
      .content {
        width: 90%;
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
        h3 {
          margin:0px;
        }
        .progress-bar {
          width: 100%;
          height: 24px;
          background-color: #f9f3a5;
          border: 1px solid #000;
          border-radius: 8px;
          .inner {
            border-radius: inherit;
            background-color: #4b4948;
            height: 24px;
          }
        }
        .progress-text {
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          width: 100%;
          .headline {
            font-weight: 900;
            font-size:18px;
          }
          .subtitle {
            font-style: italic;
          }
        }
      }
    }
  }
}

form.jsform:has(input[name="objectId"]) {
  .requires-id {
      display: block;
  }
  .formRow.requires-id {
      display:flex;
  }
  .buttons {
    .requires-id {
      display: block;
    }
    button.create-only {
      display:none;
    }
  }
}




.sidebar {
  background-color: #ffffdd;
  min-width: 200px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-grow:1;
  height:100%;
  
}
.sidebar:empty {
  display: none;
}
ul.sidebar-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding:0px;
  
  margin:0px;

  li {
    background-color:#00000011;
    padding: 8px;
    display: flex;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
    a {
      text-decoration: none;
      color: #000;
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }
  li:hover {
    background-color: #dddddd;
  }
  li.header {
    background-color: #478AAD;
    color: #ffffff;
    margin-bottom: 8px;
  }
  

}
.hidden {
  display: none!important;
}
.labelledInput {
  display:flex;
  gap:2px;
  align-items:center
}
.peeker {
  cursor: pointer;
}

.dashboard {
  
  display: flex;
  
  gap: 24px;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 16px;
  .dashboardCell {
    width:85%;
  
    min-height: 120px;
    border-radius: 5px;
    background-color: #ffffdd;
    padding: 2px 8px 8px 2px;
    display: flex;
    width:45%;
    gap:8px;
    flex-direction: column;

    .label {
      font-weight: 900;
      display: flex;
      justify-content: center;
      padding: 4px;
      border-bottom: 1px solid #0005;
    
    }
  }
  
}
.content-with-sidebar {
  display: flex;
  /*gap:18px;*/
  align-items: flex-start;
  width:100%;
  justify-content: space-between;
  height:100%;
  .buttons {
    display: flex;
    gap:4px;
    width:100%;
  }
  .centered {
    width:100%;
  }
  .listing {
    border-right: 1px solid #cccccc;
    width: 25%;
    max-width:320px;
    height: 100%;
      display: flex;
    gap:2px;
    flex-direction: column;
    align-items: flex-start;
    .sidebarHolder {
      margin-left:16px;
      min-height: 65%;
      max-height: 65%;
      overflow: auto;
    }
    .instructions {
      color:#333333;
      font-style: italic;
      font-size: 14px;
      padding:16px;
    }
    .sidebar-options {
      margin:0px;
      list-style: none;
      padding: 0px;
      margin-top: 16px;
      overflow:auto;
      width:100%;
      
      white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
      white-space: -pre-wrap; /* Opera 4-6 */
      white-space: -o-pre-wrap; /* Opera 7 */
      word-wrap: break-word; /* Internet Explorer 5.5+ */
      
      li {
        
        margin: 0px;
        padding:8px;
      }
      li:hover a {
        color:#000099;
      }
    }
    .sidebar-options.files {
      padding-left: 0px;
      margin: 0px;
      /* height: 400px; */
      /* width: 100%; */
      overflow: visible;
        li.folder {
          .iconDiv {
            .clicker {
              cursor: pointer; 
            }
            .label {
              cursor:default;
              font-weight: 900;
              color: #444444;
            }
            display: flex;
            gap: 8px;
          }
        }
        ul.fileList {
          margin: 0px;
          padding: 0px;
          margin-top: 8px;
          display:none!important;
        }
        
        li.folder.open {
          ul.fileList {
            display:block!important;
          }
        }
        .file {
          display: flex;
          gap: 16px;
          cursor: pointer;
          width: max-content;
          .name {
            font-weight: bold
          }
          .name.common-file {
            color: #007700;
          }
        }

    }
  }
}
[data-clickable] {
  cursor: pointer;
  font-weight: bold;
  margin-left: 16px !important;
}
.selector {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap:8px;
  margin-bottom: 8px;

  input {
    display: none;
  }
  label {
    cursor: pointer;
    display: flex;
    gap:8px;
    font-weight:900;
  }
  label .on, label:has(input:checked) .off {
    display:none;
  }
  label:has(input:checked) .on,label .off {
    display: block;
  }
}
  
a {
  justify-content: flex-start;
  padding: 8px;
}
.fileText {
  min-height:300px;
}

a {
  text-decoration: none;
}

.content-with-sidebar .jsapp {
  display: flex;
    justify-content: flex-start;
    width: 100%;
}

@media screen and (max-width: 720px) {
  

  .sidebar {
    display: none!important;
  }

  .body {
    flex-direction:column;
    height: fit-content;
    .sidebar {
      display: none;
    }
  }
}

.dashboardCell {
  .dashboard-cell-loading {
    width: fit-content;
    margin: auto;
  }
}
.listing .title {
  display:flex;
  justify-content: center;
  width:100%;
}


.listing .buttons {
  margin-top:16px;
}
.toaster-ui-lib-text {
  word-break: break-word;
}

.formField label {
  font-weight: 600;
  color: #555555;
}

li[data-clickable] {
        font-weight: bold;
        margin-left: 16px!important;
        padding:16px;
}