/* --------------------- */
/* Styling Settings page */
/* --------------------- */

.main-page #settings-page {
    overflow: hidden;
}

.main-page #settings-page #settings-grid {
    max-width: 600px;
    overflow: hidden;     
    overflow-y: auto;
    padding-right: 20px;

}

 /* Scroll-bar stylings  */

.main-page #settings-page #settings-grid::-webkit-scrollbar {
  width: 5px;
}

/* .main-page #settings-page #settings-grid::-webkit-scrollbar-track {
  background: var(--page-bg);
} */
 
.main-page #settings-page #settings-grid::-webkit-scrollbar-thumb {
    
  background-color: var(--scrollbar-thumb, rgba(87, 86, 86, 0.4));
  border-radius: 20px;
  border: 1px solid var(--page-bg); 
}

.main-page #settings-page #settings-grid .field,
.main-page #settings-page #settings-grid .field-browser {
    display: flex;
    flex-direction: row;
    /* flex-wrap: wrap; */
    align-content: center;
    justify-content: space-between;
    align-items: center;
    color: white;
    min-height: 30px;
    margin: 15px 0px;
    font-size: 14px;
}

.main-page #settings-page #settings-grid .field-browser {
    flex-direction: column;
}

.main-page #settings-page #settings-grid .field-browser label{
    width: 100%;
    padding-bottom: 10px;
}

.main-page #settings-page #settings-grid .field-browser .file-browser {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}


.main-page #settings-page #settings-grid .field-browser input[type="file"]::file-selector-button, 
.main-page #settings-page #settings-grid .field-browser input[type="file"]::-webkit-file-upload-button,
.main-page #settings-page #settings-grid .field input,
.main-page #settings-page #settings-grid .field select {
  width: 180px;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: #ffffff;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.main-page #settings-page #settings-grid .field input:focus,
.main-page #settings-page #settings-grid .field select:focus {
  border-color: rgba(50,50,255,0.9);
  box-shadow: 0 0 0 4px rgba(50,50,255,0.12);
}

.main-page #settings-page #settings-grid .field select:focus {
  border-color: rgba(50,50,255,0.9);
  box-shadow: 0 0 0 4px rgba(50,50,255,0.12);
}


/* Make the file input look like a single input row and flip internal order */
.field-browser input[type="file"]{
  width: 100%;
  direction: rtl;
  color: red;
}

/* Style the native browse button and force it to render on the right */
.field-browser input[type="file"]::file-selector-button,
.field-browser input[type="file"]::-webkit-file-upload-button{
  margin-left: 50px;
  cursor:pointer;

}