:root {
  --tab-bg-color: #e8e8e8;
  --tab-text-color: #393838;
  --bs-blue: #003CC5;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-black: #000000;
  --bs-white: #ffffff;
  --bs-gray: #6c757d;
  --bs-bc-text-color: #FFFFEE;
  --bs-border-color: #70707080;
  --bs-border-dashed-color: #7C7C7C;
  --bs-border-progress-bar-color: #707070;
  --bs-btn-bg-color: #969696;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-highlight-bg: #fff3cd;
  --field-height-40px: 2.5rem;
  --bg-progress-success: #28D283;
  --bg-progress-warning: #D88F22;
  --bg-progress-open: #FFFFFF;
  --tab-color: #F0F0F0;
  --tab-active-color: #969696;
  /* --tab-text-color:#7B7979; */
  --table-text-color: #B7B7B7;
  --field-color: #7C7C7C87;
  --login-button-color: #0099ff;
  --color-yellow: #FFCC00;
  --login-font-color: #696969;
  --color-danger: #D40511;

  /* font sizes */
  --font-size-20px: 1.25rem;
  --font-size-22px: 1.375rem;
  --font-size-24px: 1.5rem;
  --font-size-28px: 1.75rem;
  --font-size-18px: 18px;
  --font-size-16px: 1rem;
  --font-size-15px: 0.9375rem;
  --font-size-14px: 0.875rem;
  --font-weight-bold: bold;

  /* line height */
  --line-height-40px: 2.5rem;

  --font-robert: "Robort";
  --font-seoge: "Seoge-UI"
}

@font-face {
  font-family: "Delivery_Regular";
  src: url('./fonts/Delivery_Regular.ttf') format("truetype");
}

@font-face {
  font-family: "Delivery Bold";
  src: url('./delivery/Delivery_A_Bd.ttf');
}


@font-face {
  font-family: 'Robort';
  src: url(./fonts/RobertSans-Regular.ttf);
}


@font-face {
  font-family: 'Seoge-UI';
  src: url(./fonts/SegoeUI.ttf);
}
body {
  font-family: "Delivery_Regular";
}

.page-title {
  text-align: center;
  color: var(--bs-black);
  padding: 4rem 0 1rem;
}

.details-wrapper {
  border: 1px solid var(--bs-border-color);
}

.upload-user-title {
  color: var(--tab-text-color) !important;
  font-style: italic;
  /* margin-bottom: -10px !important;*/
  /*this property make error message to overlap with the text */
  padding-bottom: 1rem !important;
}

.upload-robot-title {
  color: var(--tab-text-color) !important;
  font-style: italic;
  margin-bottom: -10px !important;
}

.js-form-managed-file .js-form-submit {
  margin: 0 !important;
}

.js-form-managed-file .js-form-submit {
  background-color: var(--tab-text-color) !important;
  border-color: var(--tab-text-color) !important;
}

.horizontal-tabs-panes .horizontal-tabs-pane {
  padding: 0;
}

.text-field {
  background-color: var(--bs-bc-text-color);
  padding: 3rem;
  margin-bottom: 2rem;
}

.border {
  border: 1px solid var(--bs-border-color) !important;
}

#unique-wrapper,
.user-upload-file {
  padding: 0;
}

.select-all .form-checkbox {
  width: 1rem;
  height: 1rem;
}

.desc-title {
  font-family: "Delivery";
  color: var(--tab-active-color) !important;
  font-size: var(--font-size-18px);
}

.messages--error {
  margin-bottom: 2rem;
}

.form-managed-file {
  opacity: 1;
  background-image: url(../images/Group-26823.png);
  position: relative;
  content: '';
  background-size: 112px;
  background-attachment: scroll;
  background-repeat: no-repeat;
  top: 4.5rem;
  left: 13rem;
}

.user-upload-input-files .form-managed-file {
  background: none !important;
  position: relative;
  content: '';
  background-size: 112px;
  background-attachment: scroll;
  background-repeat: no-repeat;
  left: 0 !important;
  top: 0 !important;
}

.js-form-file {
  opacity: 0;
  width: 8rem;
  position: absolute;
  top: 0;
  left: -1rem;
  height: 2.5rem;
  transform: translate(10px, 1px);
}

.user-upload-input-files .js-form-file {
  opacity: 1 !important;
  top: 0;
  left: 0rem;
  height: 100%;
  transform: translate(10px, 1px);
  background-image: url(../images/Upload.svg);
  position: relative;
  content: '';
  background-size: 112px;
  background-attachment: scroll;
  background-repeat: no-repeat;
  width: 50%;
  min-height: inherit;
  float: left;
  border: 2px dashed var(--bs-border-dashed-color);
  background-position: center;
  margin-right: 2%;
}

.user-upload-input-files .js-form-file input,
.user-upload-input-files .js-form-file>span {
  visibility: hidden;
}

.user-upload-input-files .form-type-checkbox {
  width: 48%;
  margin-left: auto;
  display: flex;
  word-break: break-word;
}

.image-icon {
  width: 1.5rem !important;
}

.js-form-managed-file {
  width: 80%;
  padding: 2rem 0rem 6rem;
  word-break: break-word;
}

.user-upload-input-files .js-form-managed-file {
  width: 100% !important;
  padding: 0rem 0rem !important;
  word-break: break-word;
  min-height: inherit;
  position: relative;
}

.js-form-item-my-field-tab-1-form-upload-files {
  border: 1px solid var(--bs-border-dashed-color);
  width: 100%;
  min-height: 13rem;
  padding: 1rem !important;
}

.js-form-item-upload-pdf {
  border: 2px dashed var(--bs-border-dashed-color);
  width: 100%;
  min-height: 11rem;
}

.js-form-item-upload-csv {
  border: 2px dashed var(--bs-border-dashed-color);
  width: 50%;
}

.tabs {
  clear: both;
  position: relative;
  margin: 0 auto;
}

.table>tbody {
  vertical-align: middle;
}

.tab {
  float: left;
}

.tab label {
  margin-right: 20px;
  top: 0;
  cursor: pointer;
  color: #333;
  text-transform: uppercase;
}

.tab [type=radio] {
  display: none;
}

[type=radio]:checked~label {
  border-bottom: 2px solid #1d1d1d;
  z-index: 2;
}

[type=radio]:checked~label~.tab__content {
  z-index: 1;
  opacity: 1;
}

.progress-bar,
.progress {
  height: 0.5rem;
}

.progress {
  width: 50%;
  height: 10px;
  border: 1px solid var(--bs-border-progress-bar-color);
  border-radius: 3px !important;
}

.bg-progress-danger {
  background-color: var(--bs-red);
}

.bg-progress-success {
  background-color: var(--bg-progress-success);
}

.bg-progress-warning {
  background-color: var(--bg-progress-warning);
}

.bg-progress-open {
  background-color: var(--bg-progress-open);
}

input[type="checkbox"]:checked {
  background-color: transparent !important;
  border-color: transparent !important;
  background-image: url(../images/check-square.svg) !important;
}

input[type="checkbox"],
.form-check-input:focus,
.form-check-input:checked {
  box-shadow: none !important;
  border: 1px solid var(--bs-btn-bg-color);
  border-radius: 0px !important;
}

.files__upload .nav-item .nav-link {
  background-color: var(--tab-color) !important;
  border-radius: 0px !important;
  color: var(--tab-text-color) !important;
  padding: 0.8rem 1rem !important;
}

.files__upload .nav-item .nav-link.active {
  background-color: var(--tab-active-color) !important;
  color: var(--bs-white) !important;
}

.horizontal-tabs {
  border: 0 !important;
}

table thead tr th {
  font-family: "Delivery Bold";
  color: var(--tab-text-color) !important;
  font-size: var(--font-size-16px);
}

table tbody tr td,
table tbody tr td a {
  color: var(--tab-text-color) !important;
  background-color: var(--bs-white) !important;
  box-shadow: none !important;
}

.pager .pager__items li,
.pager .pager__items li a {
  color: var(--tab-text-color) !important;
}

#pills-home label {
  color: var(--tab-text-color) !important;
}

#pills-home input[type="text"] {
  border: 1px solid var(--field-color) !important;
  border-radius: 0px !important;
  box-shadow: none !important;
}

.user-upload-file .user-file-button input[type="submit"],
.user-upload-file .user-file-button input[type="submit"]:focus {
  background-color: var(--tab-active-color) !important;
  border: 1px solid var(--tab-active-color) !important;
  color: var(--bs-white) !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  border-radius: 5px !important;
  width: 7.75rem;
  height: 2.8rem;
}

input[type="checkbox"] {
  border-radius: 2px !important;
}

.user-upload-file .user-file-button {
  text-align: end;
  position: relative;
  top: 6.5rem;
  left: 29px;
  padding-bottom: 0.5rem !important;
}

/* #edit-my-field-tab-1-form-submit,
#edit-my-field-tab-2-form-submit,
.submit--button
{
  background-color: var(--tab-active-color) !important;
  border: 1px solid var(--tab-active-color) !important;
  color: var(--bs-white) !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  border-radius: 5px !important;
  width: 7.75rem;
  height: 2.8rem;
  font-size: var(--font-size-16px);
  font-weight: var(--font-weight-bold);
} */
.input-file-button {
  position: relative;
  top: 2.5rem;
  left: 3%;
}

.input-file-button .button {
  float: right;
}

.user-input-button {
  text-align: end;
  position: relative;
  top: 4.5rem;
  left: 37px;
}

.horizontal-tabs .horizontal-tabs-list {
  background-color: var(--bs-white) !important;
  border: 0px !important;
}

/* .horizontal-tab-button.selected
{
  background-color: var(--tab-active-color) !important;
  color: var(--bs-white) !important;
}
.horizontal-tab-button.selected strong
{
  color: var(--bs-white) !important;
}
.horizontal-tabs .horizontal-tab-button
{
  background-color: var(--tab-color) ;
  border-radius: 0px ;
  color: var(--tab-text-color);
  padding: 0.8rem 1rem ;
}
.horizontal-tabs .horizontal-tab-button a:hover
{
  background-color: transparent !important;
}
.horizontal-tabs .horizontal-tab-button {
  padding: 0.5rem 1rem !important;
}*/
.horizontal-tabs .horizontal-tab-button {
  text-align: center;
  border: 0px !important;
  min-width: 14rem;
  padding: 0rem !important;
  font-weight: 100 !important;
  width: calc(100%/3);
}

.region.region-content {
  padding: 0 !important;
}

.robot-upload .nav-item .nav-link {
  background-color: var(--tab-color);
  color: var(--tab-text-color);
  min-width: 11rem;
  text-align: center;
}

.robot-upload .nav-item .nav-link.active {
  background-color: var(--tab-active-color);
  color: var(--bs-white);
}

.robot-upload-input-file .js-form-item-upload-csv {
  border: 2px dashed var(--bs-border-dashed-color);
  width: 100%;
  min-height: 11rem;
  height: 100%;
}

.robot-upload-input-file .js-form-item-upload-pdf {
  min-height: 11rem;
  height: 100%;
}

.robot-upload-input-file .js-form-managed-file {
  width: 80%;
  padding: 3rem 0 9rem;
  display: flex;
  align-items: start;
  flex-direction: column;
  justify-content: center;
  word-break: break-word;
}

.robot-upload-input-file .js-form-managed-file .button {
  background-color: var(--tab-active-color) !important;
  border: 1px solid var(--tab-active-color) !important;
  color: var(--bs-white) !important;
  box-shadow: none !important;
  border-radius: 5px !important;
  width: 7.75rem;
  height: 2.8rem;
  font-size: var(--font-size-16px);
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
  background-color: var(--bs-white) !important;
  box-shadow: var(--bs-white) !important;
}

.incorrect-upload-button {
  padding-right: 0.8rem;
}

.file a {
  color: var(--tab-text-color) !important;
  text-decoration: none !important;
}

.layout-banner-header {
  justify-content: space-between;
  align-items: center;
}

.logout--button,
.login--button {

  background-color: var(--tab-active-color) !important;
  border: 1px solid var(--tab-active-color) !important;
  color: var(--bs-white) !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  border-radius: 5px !important;
  /* width: 7.75rem;
 height: 2.8rem; */
  font-size: var(--font-size-14px);
  font-weight: var(--font-weight-bold);
}

.navbar-brand img {
  height: 2.5rem !important;
  margin: 1rem !important;
  width: 14rem !important;
}

@media screen and (min-width: 1025px) and (max-width:1399px) {

  .form-managed-file {
    position: relative !important;
    content: '';
    background-size: 112px;
    background-attachment: scroll;
    background-repeat: no-repeat;
    top: 4.5rem !important;
    left: 13rem !important;
  }
}

.description {
  position: relative;
  top: -1rem;
  left: 13rem;
  font-size: 12px;
}

.user-upload-input-files .description {
  left: 1.5rem !important;
  text-align: left !important;
  width: 50% !important;
  top: 2.7rem !important;
  position: absolute;
}

.horizontal-tabs-pane {
  /*overflow: hidden;*/
}

.horizontal-tab-button strong {

  color: var(--tab-text-color);
}

.horizontal-tab-button.selected strong {
  color: var(--bs-white) !important;
}

.horizontal-tabs .horizontal-tab-button a:hover strong {
  color: var(--bs-white) !important;
}

.horizontal-tabs {
  margin-bottom: 5rem !important;
}

#output {
  margin-bottom: 7rem;
}

.robot-upload .nav-item {
  width: calc(100%/3);
}

::-webkit-file-upload-button,
input[type="file"]::file-selector-button {
  visibility: hidden;
}

input[type="file"] {
  color: transparent;
}

body.investigator_user .page-title,
body.coordinator_user .page-title,
body.order_user_user .page-title,
body.order_page_admin_user .page-title {
  visibility: hidden;
}

body.investigator_user .page-title::before,
body.coordinator_user .page-title::before,
body.order_user_user .page-title::before,
body.order_page_admin_user .page-title::before {
  content: "ORDER FORM";
  visibility: visible;
  display: block;
}

.node__content {
  max-width: 900px; /* Set a maximum width for the content */
  margin: 0 auto; /* Center the container horizontally */
  padding: 20px; /* Add padding inside the container */
  background-color: #f9f9f9; /* Set a background color */
  border: 1px solid #ddd; /* Add a border */
  border-radius: 8px; /* Round the corners */
}
.field--name-field-protocolnumber,
.field--name-field-studynumber,
.field--name-field-sitenumber,
.field--name-field-hospitalname,
.field--name-field-investigator,
.field--name-field-address,
.field--name-field-email,
.field--name-field-telephone,
.field--name-field-lab,
.field--name-field-ambient,
.field--name-field-ambient-quantity {
  display: flex;
  margin-bottom: 10px; /* Space between fields */

}