/* Universal Value */
:root{
    --primary-color:#ffffff;
    --black : #000;
    --text : #383838;
    --border-color:#dcdcdc;
}

* {
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* Internet Explorer/Edge */
  }
  
  *::-webkit-scrollbar {
    display: none;                   /* Chrome, Safari, Edge */
  }

body {
    background-color: var(--primary-color);
    color: var(--text);
    margin: 0;
  }
  
  .form-section {
    background-color:var(--primary-color);
  }
  
  .custom-input {
    background-color: var(--primary-color);
    border: 1px solid var(--border-color);
    color: var(--text);
  }
  
  .custom-input::placeholder {
    color: var(--text);
  }
  
  .custom-input:focus {
    color: var(--text);
    box-shadow: none;
    border-color: var(--text);
    background: transparent;
  }
  
  .form-select.custom-input {
    color:var(--text);
    background: transparent;
  }
  .form-section option{
    background: var(--primary-color);
  }
  
  .drop-zone {
    border: 2px dashed var(--border-color);
    padding:10px 20px;
    cursor: pointer;
    border-radius: 10px;
    transition: 0.3s;
    background-color: var(--primary-color);
    color: var(--text);
    /* min-height: 100px; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
  }
  
  .drop-zone.drag-over {
    border-color: #007bff;
    background-color: #2a2a2a;
  }
  
  .file-name-box {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .side-space {
    opacity: 1;
    background: url("./image/bg.svg");
    background-size: 180%; /* Make the background image double the width */
    background-position: left top; /* Position the image to show the left half */
  }

  
  /* Header */
  .header{
    border-bottom:1px solid var(--border-color);
  }