/* Override undesired default values */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");

#app {
  font-family: "Poppins", sans-serif !important;
}

a:not(.mobile-header-contact-link) {
  color: var(--main-background-color-light) !important;
}

a:not(.mobile-header-contact-link):hover,
a:not(.mobile-header-contact-link):focus {
  color: var(--main-background-color-med) !important;
}

.sidebar-messages-unread-badge {
  width: unset !important;
  background: unset !important;
}

.ant-badge-count,
.sidebar-messages-unread-badge * {
  background: var(--main-background-color-dark) !important;
}

/*   MOBILE-SPECIFIC STYLES   */
@media (max-width: 1199px) {
  /* Dashboard Layout Sections / Containers */

  .dashboard-welcome-card-container {
    padding: 15px !important;
    margin: 15px 15px 0 15px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .dashboard-welcome-card {
    border-radius: 25px;
    box-shadow: 0 0 5px 2px #dedede;
    background-image: url('../images/WelcomeBanner.png');
  }

  .dashboard-results-card {
    width: calc(100% - 30px) !important;
    padding: 15px !important;
    margin: 0 15px !important;
    height: fit-content !important;
  }

  .dashboard-in-progress-card {
    padding: 15px !important;
    margin: 0 15px !important;
    height: fit-content !important;
  }

  .dashboard-questionnaire-container {
    width: 100% !important;
  }

  .dashboard-questionnaire-card {
    width: 100% !important;
    padding: 15px !important;
    margin: 15px 0 30px 0 !important;
  }

  .dashboard-in-progress-questionnaire-vertical-flexbox {
    width: 100% !important;
  }

  .dashboard-breadcrumb {
    margin-bottom: 20px !important;
  }

  .dashboard-description-text {
    width: 70%;
    height: 100%;
    margin: 10px 0;
    font-size: 13px;
    color: white;
  }

  .messages-container {
    padding: 10px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  /* ----------------------------------------------- */
  /*   Activate Kit    */

  .register-kit-card {
    border: 1px solid #f0f0f0 !important;
    border-radius: 10px !important;
    box-shadow: 0px 0px 5px 2px rgb(222, 222, 222) !important;
    width: 100% !important;
    max-width: 700px !important;
    padding: 0 20px !important;
  }

  .register-kit-card-container {
    padding: 20px !important;
  }

  .register-kit-container {
    /*padding: 50px !important;*/
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
  }

  .register-kit-steps-container {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 40px 40px 0 40px !important;
    margin-bottom: 10px !important;
  }

  .register-kit-id-input {
    border-radius: 0 !important;
    margin: 5px 0 !important;
    width: 100% !important;
  }

  .register-kit-order-details-row {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }

  /* ----------------------------------------------- */

  /* Reports */

  .reports-results-card {
    padding: 35px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .reports-new-results-list-item {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: start !important;
    flex-wrap: wrap !important;
  }

  .reports-new-results-list-item-description-and-button {
    width: 100% !important;
    height: 100% !important;
    padding: 0 15px 0 25px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: start !important;
  }

  .reports-new-results-image-with-badge {
    width: 100% !important;
    margin-bottom: 10px !important;
  }

  .reports-new-results-image-description-flexbox {
    display: flex !important;
    align-items: start !important;
    width: 100% !important;
    height: 100% !important;
    flex-wrap: wrap !important;
  }

  /* ----------------------------------------------- */

  /* My Account */

  .account-notifications-card {
    padding: 35px 35px 0 35px !important;
    height: min-content !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .account-profile-info-container {
    width: 100% !important;
    padding: 25px 35px 35px 35px !important;
  }

  .account-reset-password-container {
    margin-top: 10px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: min-content !important;
  }

  .external-questionnaire-modal .ant-modal-content {
    margin-top: 120px;
  }
}

/*   DESKTOP-SPECIFIC STYLES  */
@media (min-width: 1200px) {
  /* Dashboard Layout Sections / Containers */

  .dashboard-results-in-progress-questionnaire-container {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    height: 100% !important;
    text-align: start !important;
  }

  .dashboard-results-card {
    width: 100% !important;
    padding: 35px 17px 35px 35px !important;
    min-height: 30vh !important;
    height: fit-content !important;
    max-height: 100% !important;
  }

  .dashboard-in-progress-card {
    width: 100% !important;
    padding: 35px 35px 35px 17px !important;
    min-height: 30vh !important;
    height: fit-content !important;
    max-height: 100% !important;
  }

  .dashboard-questionnaire-container {
    width: 100% !important;
    padding: 0 35px 0 17px !important;
  }

  .dashboard-kits-registered-container {
    width: 100% !important;
    padding: 0 17px 0 35px !important;
  }

  .dashboard-questionnaire-card {
    width: 100% !important;
    height: 20% !important;
    padding: 50px !important;
  }

  .dashboard-in-progress-questionnaire-vertical-flexbox,
  .dashboard-results-kits-registered-vertical-flexbox {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  .dashboard-welcome-card-container {
    padding: 35px 35px 0 35px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .dashboard-welcome-card {
    border: 1px solid #f0f0f0;
    border-radius: 15px;
    box-shadow: 0 0 5px 2px #dedede;
    background-image: url('../images/WelcomeBanner.png');
  }

  .dashboard-breadcrumb {
    margin-bottom: 40px !important;
  }

  .dashboard-description-text {
    width: 50%;
    height: 100%;
    margin: 10px 0;
    font-size: 17px;
    color: white;
  }

  /* ----------------------------------------------- */

  /*   Activate Kit    */

  .register-kit-card {
    border: 1px solid #f0f0f0 !important;
    border-radius: 10px !important;
    box-shadow: 0px 0px 5px 2px rgb(222, 222, 222) !important;
    /*width: 75% !important;*/
    padding: 0 20px !important;
  }

  .register-kit-card-container {
    padding: 50px 50px 20px 50px !important;
  }

  .register-kit-container {
    /*padding: 50px !important;*/
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
  }

  .register-kit-steps-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 50px 20px 0 20px !important;
    padding: 0 !important;
  }

  .register-kit-steps-container-padding {
    padding: 40px 40px 0 40px !important;
    margin: 50px 50px 10px 50px !important;
  }

  .register-kit-id-input {
    border-radius: 0 !important;
    /*margin: 10px 0 !important;*/
    width: 100% !important;
    padding: 5px 0 !important;
  }

  .register-kit-order-details-row {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* ----------------------------------------------- */

  /* Reports */

  .reports-results-card {
    padding: 35px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .reports-new-results-list-item {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    text-align: start !important;
    flex-wrap: wrap !important;
  }

  .reports-new-results-list-item-description-and-button {
    width: 100% !important;
    height: 100% !important;
    padding: 0 15px 0 25px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: start !important;
  }

  .reports-new-results-image-description-flexbox {
    display: flex !important;
    align-items: start !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* ----------------------------------------------- */

  /* My Account */

  .messages-container {
    padding: 35px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .account-profile-info-container {
    width: 100% !important;
    height: 100% !important;
    padding: 35px !important;
  }

  .account-reset-password-container {
    margin-top: 10px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: min-content !important;
  }

  .external-questionnaire-modal .ant-modal-content {
    margin-left: 108px !important;
    margin-top: 100px !important;
    width: 515px !important;
  }
}

.ant-divider-inner-text {
  color: unset !important;
}

.ant-menu-item {
  color: unset;
}

.ant-collapse-content-box {
  padding: 0 !important;
}

.ant-collapse-content {
  border: 0 !important;
  margin-top: 10px !important;
}

.ant-collapse-header {
  color: unset !important;
  padding: unset !important;
}

.ant-collapse-arrow {
  margin: 0 14px 0 2px !important;
  font-size: 15px !important;
}

.ant-empty-description {
  color: rgb(174, 184, 194) !important;
}

aside {
  width: min-content !important;
  min-width: min-content !important;
  max-width: min-content !important;
}

.ant-steps-item-finish
  .ant-steps-item-icon
  > .ant-steps-icon
  .ant-steps-icon-dot {
  border: 1px solid var(--main-background-color-med) !important;
  background: white !important;
}

.ant-steps-item-process
  .ant-steps-item-icon
  > .ant-steps-icon
  .ant-steps-icon-dot {
  background: var(--main-background-color-med) !important;
}

.ant-steps-item-finish
  > .ant-steps-item-container
  > .ant-steps-item-tail::after {
  background-color: var(--main-background-color-med) !important;
}

.ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-icon {
  background: var(--main-background-color-med) !important;
  border-color: var(--main-background-color-med) !important;
}

.ant-steps-horizontal {
  justify-content: center !important;
}

.ant-slider-handle {
  border: solid 2px var(--main-background-color-light) !important;
}

.ant-slider-handle:focus {
  box-shadow: 0 0 0 5px rgba(34, 73, 178, 0.125) !important;
}

.ant-slider-track {
  background-color: var(--main-background-color-med) !important;
}

.ant-list-item {
  padding: 10px 0 5px 0 !important;
}

.ant-list-item-meta-avatar {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Portal-wide buttons */

/* change default hover/focus color to match ADx palette, except for custom button types we will handle individually */
.ant-btn:not(
    .ant-btn-link,
    .primary-button,
    .primary-button-danger,
    .secondary-button,
    .secondary-button-danger,
    .questionnaire-view-updates-button,
    .results-view-more-button,
    .sidebar-register-kit-button,
    .questionnaire-section-button,
    .sidebar-register-kit-button,
    .sidebar-contact-us-button,
    .sidebar-logout-button,
    .login-form-button,
    .exemption-criteria-acknowledge-button,
    .multiple-kits-acknowledge-button,
    .multiple-kits-okay-button
  ):hover,
.ant-btn:not(
    .ant-btn-link,
    .primary-button,
    .primary-button-danger,
    .secondary-button,
    .secondary-button-danger,
    .questionnaire-view-updates-button,
    .results-view-more-button,
    .sidebar-register-kit-button,
    .questionnaire-section-button,
    .sidebar-register-kit-button,
    .sidebar-contact-us-button,
    .sidebar-logout-button,
    .login-form-button,
    .exemption-criteria-acknowledge-button,
    .multiple-kits-acknowledge-button,
    .multiple-kits-okay-button
  ):focus {
  color: var(--main-background-color-med) !important;
  border-color: var(--main-background-color-med) !important;
  border-radius: 5px !important;
}

/* transition between all properties when hover/focus selector becomes active */
.ant-btn,
.ant-btn:hover,
.ant-btn:focus {
  transition: all 0.35s ease-in-out !important;
}

.ant-btn-link {
  color: var(--main-background-color-med) !important;
}

.ant-btn-link:hover {
  color: var(--main-background-color-light) !important;
}

.ant-input-affix-wrapper-focused,
.ant-input:focus,
.ant-picker:hover,
.ant-picker-focused {
  box-shadow: 0 0 2px 2px var(--main-background-color-low-transparency) !important;
}

.ant-checkbox-checked .ant-checkbox-inner,
.ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner,
.ant-picker-range .ant-picker-active-bar,
.ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner,
.ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
.ant-radio-inner::after {
  background-color: var(--main-background-color-med) !important;
  background: var(--main-background-color-med) !important;
}

.ant-checkbox:hover,
.ant-checkbox:focus .ant-checkbox-inner:hover,
.ant-checkbox-inner:focus,
.ant-checkbox-checked::after,
.ant-checkbox-checked .ant-checkbox-inner,
.ant-checkbox:hover .ant-checkbox-inner,
.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-checkbox-input:focus + .ant-checkbox-inner,
.ant-input-affix-wrapper-focused,
.ant-input:hover,
.ant-input:focus,
.ant-input-affix-wrapper:hover,
.ant-input-affix-wrapper:focus,
.ant-picker:hover,
.ant-picker-focused,
.ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before,
.ant-radio:hover .ant-radio-inner,
.ant-radio-checked .ant-radio-inner,
.ant-select:not(.ant-select-disabled):hover .ant-select-selector {
  border-color: var(--main-background-color-med) !important;
}

/* "Primary" button with ADx blue background, e.g. "VIEW/DOWNLOAD" in REPORTS section, "NEXT" button in QUESTIONNAIRE section, etc. */
.primary-button {
  color: var(--primary-button-text-color) !important;
  background: var(--primary-button-color);
  border-color: var(--primary-button-color) !important;
  border-radius: 5px !important;
  padding: 0 10px !important;
}

.primary-button:hover,
.primary-button:focus {
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.075);
  color: var(--primary-button-text-color);
  background: var(--primary-button-color-light);
}

.primary-button-disabled,
.primary-button-disabled:hover,
.primary-button-disabled:focus {
  background: rgb(221, 221, 221) !important;
  border-color: rgb(125, 125, 125) !important;
  border-color: transparent !important;
  color: white !important;
}

.primary-button-danger {
  background: rgb(178, 34, 34) !important;
  border: 1px solid white !important;
  color: var(--main-text-color) !important;
  border-radius: 5px !important;
  padding: 0 10px !important;
}

.primary-button-danger:hover,
.primary-button-danger:focus {
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.075) !important;
  background: rgb(211, 99, 99) !important;
  border: 1px solid rgb(211, 99, 99) !important;
  color: var(--main-text-color) !important;
}

/* "Secondary" button with white background and ADx blue color & border, e.g. "VIEW MORE" buttons in DASHBOARD section, "CHANGE EMAIL" & "SEND EMAIL" buttons in MY ACCOUNT section, etc. */
.secondary-button {
  color: var(--secondary-button-text-color) !important;
  background: var(--secondary-button-color);
  border-color: var(--secondary-button-color) !important;
  border-radius: 5px !important;
  padding: 0 10px !important;
}

.secondary-button:hover,
.secondary-button:focus {
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.075);
  color: var(--secondary-button-text-color);
  background: var(--secondary-button-color-light);
}

.secondary-button-danger {
  color: rgb(178, 34, 34) !important;
  border: 1px solid rgb(178, 34, 34) !important;
  border-color: rgb(178, 34, 34) !important;
  border-radius: 5px !important;
  padding: 0 10px !important;
}

.secondary-button-danger:hover,
.secondary-button-danger:focus {
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.075) !important;
  color: rgb(211, 99, 99) !important;
  border: 1px solid rgb(211, 99, 99) !important;
  border-radius: 5px !important;
}

/* "ACTIVATE KIT" button in DASHBOARD section */
.sidebar-register-kit-button {
  color: var(--primary-button-text-color) !important;
  background: var(--primary-button-color);
  border-color: var(--primary-button-color) !important;
  border-radius: 5px !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sidebar-register-kit-button:hover,
.sidebar-register-kit-button:focus {
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.075);
  color: var(--main-text-color);
  background: var(--primary-button-color-light);
}

/* translucent "VIEW UPDATES" button with white text & border on DASHBOARD section's Questionnaire <Card/> */
.questionnaire-view-updates-button {
  border: 1px solid white !important;
  background: rgba(255, 255, 255, 0.2);
  color: var(--main-text-color) !important;
  border-radius: 5px !important;
}

.questionnaire-view-updates-button:hover,
.questionnaire-view-updates-button:focus {
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.075) !important;
  border: 1px solid white !important;
  color: 1px solid white !important;
  background: transparent !important;
}

/* "PREVIOUS SECTION / NEXT SECTION" buttons with white background & ADx blue border & color in QUESTIONNAIRE section */
.questionnaire-section-button {
  width: fit-content !important;
  max-width: 50% !important;
  text-align: center !important;
  border-radius: 5px !important;
  color: var(--primary-button-color) !important;
  border: 1px solid var(--primary-button-color) !important;
}

.questionnaire-section-button:hover,
.questionnaire-section-button:focus {
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.075) !important;
  color: var(--main-background-color-light) !important;
  border: var(--primary-button-color-light) !important;
}

/* "CONTACT US" button with ADx blue background & white text in the sidebar */
.sidebar-contact-us-button {
  border-radius: 5px !important;
  background: var(--primary-button-color) !important;
  color: var(--primary-button-text-color) !important;
  margin-top: 15px !important;
}

.sidebar-contact-us-button:hover,
.sidebar-contact-us-button:focus {
  background: var(--primary-button-color-light) !important;
  color: var(--primary-button-text-color) !important;
}

/* "LOG OUT" button with red background & white text in the sidebar */
.sidebar-logout-button {
  background: var(--secondary-button-color) !important;
  border-radius: 5px !important;
  color: var(--secondary-button-text-color) !important;
  margin-top: 15px !important;
}

.sidebar-logout-button:hover,
.sidebar-logout-button:focus {
  background: var(--secondary-button-color-light) !important;
  color: var(--secondary-button-text-color) !important;
}

.messages-mark-read-button {
  color: rgba(0, 0, 0, 0.65);
  cursor: pointer !important;
  font-size: 20px !important;
  transition: all 0.35s ease-in-out !important;
  margin-left: 10px !important;
}

.messages-mark-read-button:hover,
.messages-mark-read-button:focus {
  color: rgb(16, 166, 16) !important;
  transition: all 0.35s ease-in-out !important;
}

.messages-notifications-card {
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.075) !important;
  margin-top: 20px !important;
  border-radius: 10px !important;
  width: fit-content !important;
}

.message-attachment-container {
  position: relative;
}

.message-attachment-image {
  opacity: 1;
  display: block;
  transition: 0.5s ease;
  backface-visibility: hidden;
}

.message-attachment-download {
  transition: 0.5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.message-attachment-container:hover .message-attachment-image {
  opacity: 0.3;
}

.message-attachment-container:hover .message-attachment-download {
  opacity: 1;
}

.messages-attachments-icon {
  font-size: 24px;
  cursor: pointer;
  background: #efefef;
  border: 1px solid #dedede;
  color: rgba(0, 0, 0, 0.45);
  padding: 5px;
  border-radius: 50%;
  transition: all 0.35s ease-in-out;
}

.messages-attachments-icon:hover {
  background: #dfdfdf;
  transition: all 0.35s ease-in-out;
}

.ant-menu-item-disabled {
  color: rgba(255, 255, 255, 0.6) !important;
}

.ant-menu-item-disabled:hover,
.ant-menu-item-disabled:focus {
  color: rgba(255, 255, 255, 0.4) !important;
}

.ant-select-open.ant-select-focused {
  box-shadow: 0 0 0 0 !important;
}

.ant-steps
  .ant-steps-item:not(.ant-steps-item-active)
  > .ant-steps-item-container[role="button"]:hover
  .ant-steps-item-title {
  color: var(--main-background-color-med) !important;
  transition: all 0.35s ease-in-out !important;
}

.ant-steps
  .ant-steps-item:not(.ant-steps-item-active)
  > .ant-steps-item-container[role="button"]
  .ant-steps-item-title {
  transition: all 0.35s ease-in-out !important;
}

.ant-steps
  .ant-steps-item:not(.ant-steps-item-active, .ant-steps-item-finish)
  > .ant-steps-item-container[role="button"]:hover
  > .ant-steps-item-icon {
  background: var(--main-background-color-med) !important;
  transition: all 0.35s ease-in-out !important;
}

.ant-steps
  .ant-steps-item:not(.ant-steps-item-active, .ant-steps-item-finish)
  > .ant-steps-item-container[role="button"]
  > .ant-steps-item-icon {
  transition: all 0.35s ease-in-out !important;
}

.ant-steps-dot .ant-steps-item .ant-steps-icon-dot {
  left: 0 !important;
}

.ant-steps-vertical > .ant-steps-item .ant-steps-item-title {
  padding-right: 30px !important;
}

.ant-divider,
.ant-divider-horizontal.ant-divider-with-text {
  border-top-color: rgba(0, 0, 0, 0.2) !important;
}

/* ----------------------------------------------- */

/*   Overriden Default Component Classname Styles    */

body {
  scrollbar-width: none;
}

.ant-menu-submenu-title {
  margin-top: 0px !important;
}

.ant-badge:not(.sidebar-messages-unread-badge) {
  width: 100% !important;
}

.ant-badge-count {
  width: unset !important;
}

.ant-card-head:not(.default-card *) {
  border-bottom: 0 !important;
  padding: 0 6px !important;
}

.ant-card-head-title:not(.default-card *) {
  padding: 0 0 8px 0 !important;
}

.default-card > .ant-card-head {
  background: #f3f3f3 !important;
}

.ant-menu-inline {
  border-right: 0 !important;
}

.ant-menu-submenu-title {
  margin-bottom: 0 !important;
}

.ant-menu-inline .ant-menu-item {
  width: 100% !important;
}

.ant-select-arrow {
  visibility: hidden !important;
}

.ant-input {
  border-radius: 0 !important;
}

.ant-input-affix-wrapper {
  border-radius: 0 !important;
}

.ant-input-affix-wrapper > input.ant-input {
  border-radius: 0px !important;
}

.ant-select-selector {
  border-radius: 0 !important;
}

.ant-steps-item-active {
  font-weight: bolder !important;
}

.ant-steps-vertical {
  width: max-content !important;
}

.ant-picker {
  border-radius: 0 !important;
}

.header-mobile-nav-menu-popover .ant-popover-inner-content {
  padding: 0 !important;
}

.ant-tabs-tab {
  border-radius: 5px 5px 0 0 !important;
}

/*.ant-btn {
  border-radius: 15px;
}*/

.ant-layout-sider,
.ant-layout-sider-children {
  background: var(--main-background-color-dark) !important;
}

.ant-empty,
.ant-empty-normal {
  margin: 10px 0 !important;
}

.ant-menu,
.ant-menu-root,
.ant-menu-vertical {
  width: 100% !important;
}

.ant-modal:not(
    .change-email-modal,
    .exemption-criteria-modal,
    .multiple-kits-modal,
    .dashboard-physician-consultation-modal,
    .external-questionnaire-modal,
    .dashboard-new-york-modal,
    .dashboard-finish-registration-modal,
    .test-genorisk-advisory-modal
  ) {
  width: 80vw !important;
  height: 80vh !important;
}

.ant-modal-content:not(
    .change-email-modal *,
    .exemption-criteria-modal *,
    .multiple-kits-modal *,
    .dashboard-demographics-modal *,
    .dashboard-new-york-modal *,
    *,
    .dashboard-physician-consultation-modal *,
    .external-questionnaire-modal *,
    .dashboard-finish-registration-modal *,
    .test-genorisk-advisory-modal *
  ) {
  height: 100% !important;
}

.ant-modal-header:not(
    .change-email-modal *,
    .exemption-criteria-modal *,
    .multiple-kits-modal *,
    .dashboard-physician-consultation-modal *,
    .external-questionnaire-modal *,
    .dashboard-finish-registration-modal *,
    .test-genorisk-advisory-modal *
  ) {
  height: 7.5% !important;
}
.ant-modal-footer:not(
    .change-email-modal *,
    .exemption-criteria-modal *,
    .multiple-kits-modal *,
    .dashboard-physician-consultation-modal *,
    .external-questionnaire-modal *,
    .dashboard-finish-registration-modal *,
    .test-genorisk-advisory-modal *
  ) {
  height: 7.5% !important;
}

.ant-modal-body:not(
    .change-email-modal *,
    .exemption-criteria-modal *,
    .multiple-kits-modal *,
    .dashboard-physician-consultation-modal *,
    .external-questionnaire-modal *,
    .dashboard-finish-registration-modal *,
    .test-genorisk-advisory-modal *
  ) {
  height: 85% !important;
}

.ant-collapse > .ant-collapse-item > .ant-collapse-header {
  align-items: center !important;
}

.site-layout-background {
  background: white;
}

.ant-modal-header {
  border-radius: 5px 5px 0 0;
}

.ant-modal-content {
  border-radius: 5px;
}

.ant-menu:not(
    .ant-menu-horizontal,
    .header-nav-questionnaire-submenu-item,
    .desktop-sidebar-menu-item
  )
  .ant-menu-item-selected {
  border-right: 4px solid var(--main-background-color-light);
}

.ant-menu-item a {
  color: rgb(18, 28, 49) !important;
}

.ant-menu-item-selected a {
  color: var(--main-background-color-light) !important;
}

.ant-tooltip-inner {
  padding: 5px !important;
}

/*  Custom Component Classnames Styles  */

/* ----------------------------------------------- */

/*  Each Page  */

.individual-page-container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  width: 100%;
  scrollbar-width: none;
  padding-bottom: 20px !important;
}

.individual-page {
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: auto;
  background: #dddddd !important;
  scrollbar-width: none;
}

.individual-page-header {
  background: white !important;
  color: black !important;
  width: 100%;
  padding: 5px 24px !important;
  margin: 0 !important;
}

.individual-page-header-title {
  color: black !important;
}

.individual-page-card {
  margin: 10px !important;
  border-radius: 5px;
}

.individual-page-row {
  border: 1px solid #eeeeee;
  background: #ffffff !important;
  cursor: pointer;
  margin: 5px 15px;
  max-width: 100%;
}

.individual-page-row:hover {
  background: #f9f9f9 !important;
}

.login-footer {
  position: absolute !important;
  top: 97% !important;
  width: 100% !important;
  color: white !important;
  font-size: 14px !important;
  text-align: center !important;
}

.individual-page-footer {
  background: #f0f2f5 !important;
  color: rgb(59, 59, 59) !important;
  border-top: 1px solid rgb(59, 59, 59, 0.15) !important;
  text-align: center;
  font-size: 14px !important;
  z-index: 10 !important;
  height: 3% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.ant-select-item-option-active[aria-selected="false"],
.ant-select-item-option[aria-selected="true"] {
  background: var(--main-background-color-med) !important;
  color: white !important;
}

.ant-select-item-option-active[aria-selected="false"]:hover,
.ant-select-item-option[aria-selected="true"]:hover {
  background: var(--main-background-color-low-transparency) !important;
}

/* ----------------------------------------------- */

/*   Generic Components  */

.main-submenu-item {
  background: var(--main-background-color-dark) !important;
}

.page-header-primary-button {
  background: white;
  border: 1px solid white;
  color: #40a9ff;
}

.page-header-primary-button:hover {
  background: #40a9ff;
  border: 1px solid white;
  color: white;
}

.required-input-highlighted {
  border: 1px solid rgba(206, 100, 100, 0.8);
}

.required-input:hover,
.required-input-highlighted:hover {
  border-color: rgba(200, 10, 10, 0.8) !important;
  border-right-width: 1px !important;
}

.required-input:focus,
.required-input-highlighted:focus {
  border-color: rgba(200, 10, 10, 0.8) !important;
  border-right-width: 1px !important;
  outline: 0 !important;
  box-shadow: 0 0 0 2px rgba(200, 10, 10, 0.2) !important;
}

.columns-displayed > .ant-checkbox-group-item {
  display: flex;
}

tr.row-color-one {
  background-color: #ffffff;
}

tr.row-color-two {
  background-color: #ebf2fa;
}

.table-header > button {
  padding: 1px 5px;
}

.blue-title {
  color: rgb(25, 118, 210);
  font-size: 16px;
  font-weight: 400;
  padding: 20px 0 5px 0;
}

/* ----------------- Sidebar -------------------- */

.desktop-sidebar {
  background: unset !important;
  color: var(--main-text-color) !important;
  width: 100% !important;
  margin-left: 10px !important;
}

.desktop-sidebar-menu-item {
  letter-spacing: 0.05rem !important;
}

.questionnaire-submenu-item {
  margin: 0 !important;
}

.dashboard-register-kit-button,
.contact-us-button,
.log-out-button {
  margin: 5px 0 !important;
}

.desktop-sidebar-menu-item:not(
    .sidebar-register-kit-button,
    .sidebar-contact-us-button,
    .sidebar-logout-button
  ) {
  margin: 0 !important;
}

.desktop-sidebar-menu-item:not(
    .dashboard-register-kit-button,
    .contact-us-button,
    .log-out-button,
    .ant-menu-item-disabled
  ):hover {
  color: var(--main-text-color)
}

.desktop-sidebar-menu-item.ant-menu-item-selected:not(
    .register-contact-logout-menu *
  ) {
  background: unset !important;
  font-weight: bold !important;
  color: var(--main-text-color) !important;
  width: 100% !important;
  border-right: 4px solid var(--main-text-color) !important;
}

.desktop-sidebar-menu-item.questionnaire-submenu-item.ant-menu-item-selected:not(
    .register-contact-logout-menu *
  ) {
  background: unset !important;
  font-weight: bold !important;
  color: var(--main-text-color) !important;
  width: 100% !important;
  border-right: 0 !important;
}

.desktop-sidebar-email-label-tag {
  font-size: 10px !important;
  white-space: nowrap !important;
  text-align: center !important;
  width: 100% !important;
  padding: 2px 5px !important;
  margin: 0 15px !important;
}

/* ----------------- Dashboard -------------------- */

.dashboard-title-text {
  font-size: 30px !important;
  margin-top: 20px !important;
  color: white !important;
}

.dashboard-breadcrumb-title {
  color: var(--main-background-color-med) !important;
  font-weight: bold !important;
}

.dashboard-new-york-modal,
.dashboard-finish-registration-modal {
  width: 50vw;
}

.ant-picker-date-panel
  .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start
  .ant-picker-cell-inner::after,
.ant-picker-date-panel
  .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end
  .ant-picker-cell-inner::after {
  background: transparent !important;
}

.ant-picker-cell-in-view.ant-picker-cell-in-range::before,
.ant-picker-cell-in-view.ant-picker-cell-range-start:not(
    .ant-picker-cell-range-start-single
  )::before,
.ant-picker-cell-in-view.ant-picker-cell-range-end:not(
    .ant-picker-cell-range-end-single
  )::before,
.ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before,
.ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before,
.ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before,
.ant-picker-panel
  > :not(.ant-picker-date-panel)
  .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before,
.ant-picker-panel
  > :not(.ant-picker-date-panel)
  .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before {
  background: var(--main-background-color-low-transparency) !important;
}

.ant-picker-cell-in-view.ant-picker-cell-range-hover-start:not(
    .ant-picker-cell-in-range
  ):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end)::after,
.ant-picker-cell-in-view.ant-picker-cell-range-hover-end:not(
    .ant-picker-cell-in-range
  ):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end)::after,
.ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start-single::after,
.ant-picker-cell-in-view.ant-picker-cell-range-hover-start.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-end-near-hover::after,
.ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-start.ant-picker-cell-range-end.ant-picker-cell-range-start-near-hover::after,
.ant-picker-cell-in-view.ant-picker-cell-range-hover-end.ant-picker-cell-range-end-single::after,
.ant-picker-cell-in-view.ant-picker-cell-range-hover:not(
    .ant-picker-cell-in-range
  )::after {
  border-color: var(--main-background-color-med) !important;
}

.ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before {
  border-left: 1px dashed var(--main-background-color-light) !important;
}

.ant-picker-cell.ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before {
  border-right: 1px dashed var(--main-background-color-light) !important;
}

.ant-picker-date-panel
  .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start
  .ant-picker-cell-inner::after,
.ant-picker-date-panel
  .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end
  .ant-picker-cell-inner::after,
.ant-picker-cell-in-view.ant-picker-cell-range-start:not(
    .ant-picker-cell-range-start-single
  ).ant-picker-cell-range-hover-start::before,
.ant-picker-cell-in-view.ant-picker-cell-range-end:not(
    .ant-picker-cell-range-end-single
  ).ant-picker-cell-range-hover-end::before,
.ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before {
  border-top: 1px dashed var(--main-background-color-light) !important;
  border-bottom: 1px dashed var(--main-background-color-light) !important;
}

.clinician-consultation-image-upload-area {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 10px !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  background: #efefef !important;
  border: 1px solid #cccccc !important;
  border-radius: 5px !important;
  transition: box-shadow 0.25s ease-in-out !important;
  cursor: pointer !important;
}

.clinician-consultation-image-upload-area:hover {
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.075) !important;
  transition: box-shadow 0.25s ease-in-out !important;
}

/* ----------------- Reports ------------------- */

.divider {
  margin: 15px 0 0 0 !important;
}

.reports-processing-tag {
  color: white !important;
  box-shadow: 0 0 3px 0 rgb(18, 28, 49) !important;
  padding: 4px 10px !important;
  margin-top: 5px !important;
  border-radius: 25px !important;
}

/* --------------- Resources -------------------- */

.resources-card {
  padding: 35px !important;
  border: 1px solid rgba(18, 28, 49) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.resources-video {
  background: white !important;
  border: 1px solid #f0f0f0 !important;
  padding: 15px !important;
  margin: 10px !important;
}

.resources-video:last-child {
  margin-right: 0;
}

.ant-list-bordered .ant-list-item {
  padding: 10px !important;
}

.full-width-badge {
  width: 100% !important;
}

/* -------------------- Help ----------------------- */

.help-section-card {
  width: 50% !important;
  border-radius: 15px !important;
  box-shadow: 0px 0px 5px 2px rgb(222, 222, 222) !important;
}

.help-section-card-title {
  width: 100% !important;
  text-align: center !important;
  margin: 10px !important;
  font-weight: bold !important;
}

.help-section-row-container {
  display: flex !important;
  width: 100% !important;
  height: 50% !important;
}

.help-section-vertical-flexbox {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 35px !important;
}

/* ------------------ Login ---------------------- */

.login-form-container {
  background: var(--main-background-color-dark);
  padding: 25px 25px 0 25px;
  max-width: 375px;
  margin: auto;
  border: 1px solid #ebedf0;
  width: 100%;
}

.login-form-button {
  background: var(--primary-button-color) !important;
  border-color: var(--primary-button-color) !important;
  color: var(--primary-button-text-color) !important;
}

.login-form-button:hover {
  background: var(--primary-button-color-light) !important;
  border-color: var(--primary-button-color-light) !important;
  color: var(--primary-button-text-color) !important;
}

.login-text {
  color: var(--main-text-color) !important;
}

.remember-me {
  color: var(--main-text-color) !important;
}

.forgot-password-link {
  color: var(--main-text-color) !important;
}

.forgot-password-link:hover {
  color: var(--main-text-color-light) !important;
}

.signup-link {
  color: var(--main-text-color) !important;
}

.signup-link-two {
  color: var(--main-text-color) !important;
}

.signup-link-two:hover {
  color: var(--main-text-color-light) !important;
}

.email-text {
  color: var(--main-text-color) !important;
}

.email-text:hover {
  color: var(--main-text-color-light) !important;
}

/* ---------------------------------------------------- Header ---------------------------------------------------- */

.main-header {
  background: var(--main-background-color-dark) !important;
  color: var(--main-text-color) !important;
  width: 100%;
  padding: 10px 20px;
  line-height: unset;
  height: 80px;
}

.main-menu-item {
  color: var(--main-text-color) !important;
}

.main-submenu {
  background: var(--main-background-color-dark) !important;
  margin-bottom: 0 !important;
}

.main-submenu-selected {
  color: white !important;
}

.header-logout-button {
  background: var(--primary-button-color);
  color: var(--primary-button-text-color) !important;
  margin-right: 5px;
}

.header-logout-button:hover {
  border-color: #ff8282 !important;
}

.header-nav-menu-item {
  background: var(--main-background-color-light) !important;
  margin: 0 !important;
  padding: 0 20px !important;
}

.header-nav-questionnaire-submenu-item .ant-menu-item-selected {
  color: var(--main-text-color) !important;
  border-right: 0 !important;
}

.header-label {
  color: var(--main-text-color) !important;
}

/* ---------------------------------------------------- Administrator Tools / Settings ---------------------------------------------------- */

.settings-menu {
  width: 100% !important;
}

.settings-submenu {
  border: 1px solid rgba(0, 0, 0, 0.6) !important;
  background: rgb(0, 0, 0) !important;
  border-top: 0 !important;
  margin-top: 0 !important;
}

.settings-submenu-item {
  border: 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.6) !important;
  margin: 0 !important;
}

.settings-menu-item {
  margin: 0 !important;
  border-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.add-edit-button {
  margin: 0 3px 0 3px !important;
}

.sub-page-card {
  border: 0px !important;
}

.sketch-picker {
  box-shadow: none !important;
  border: 1px solid #dfdfdf !important;
}
/* ----------------------------------------------------- Macros --------------------------------------------------------*/

.ant-menu.macros-menu {
  background: unset !important;
}

.macros-menu {
  width: 100% !important;
  background: white !important;
}

.macros-submenu {
  background: rgb(0, 0, 0) !important;
  border-top: 0 !important;
  margin-top: 0 !important;
}

.macros-submenu-item {
  border: 0 !important;
  margin: 0 !important;
}

.macros-menu-item,
.macros-menu-can-delete-item {
  margin: 0 !important;
  background: white !important;
  border-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.macros-menu-item-empty,
.macros-menu-can-delete-item-empty {
  color: #a30000 !important;
  margin: 0 !important;
  background: white !important;
  border-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.macros-menu-can-delete-item:hover,
.macros-menu-can-delete-item-empty:hover {
  background-color: #a300005d !important;
  color: white !important;
}

.macros-menu-can-delete-item:hover .anticon,
.macros-menu-can-delete-item-empty:hover .anticon {
  color: white !important;
  transition: all 0s !important;
}

.macro-input-container-card {
  margin: 25px 25% !important;
}

.reference-gene-explanations-collapse > .ant-collapse-content {
  border-top: 1px solid #f0f0f0 !important;
}

::-webkit-scrollbar {
  width: 0 !important;
}

::-webkit-scrollbar-track {
  background: white !important;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(0, 0, 0, 0.2) !important;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.18) !important;
}

.questionnaire-menu-scroll-area::-webkit-scrollbar {
  width: 4px !important;
}

.questionnaire-menu-scroll-area::-webkit-scrollbar-track {
  background: rgb(255, 255, 255) !important;
}

.questionnaire-menu-scroll-area::-webkit-scrollbar-thumb {
  background-color: rgba(193, 56, 186, 0.5) !important;
}

.ant-menu-vertical {
  border-right: 0 !important;
}

.ant-menu-vertical.ant-menu-item:not(.register-contact-logout-menu) {
  margin: 0 !important;
}

.macro-row-item-name-link {
  color: #007bff !important;
  transition: color 0.5s !important;
}

.macro-row-item-name-link:hover {
  color: #0056b3 !important;
  cursor: pointer !important;
}

.search-input {
  margin-bottom: 15px !important;
}

/* ---------------------------------------------------- Report Sections ---------------------------------------------------- */
.row-dragging {
  background: #fafafa;
  border: 1px solid #ccc;
}

.row-dragging td {
  padding: 16px;
}

.row-dragging .drag-visible {
  visibility: visible;
}

.edit {
  width: 100;
  text-align: "center";
}

/* ---------------------------------------------------- Report Sections ---------------------------------------------------- */
.assigned-template-table {
  margin-bottom: 30px !important;
}

/* ---------------------------------------------------- Font Family ---------------------------------------------------- */

/* cyrillic-ext */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
    url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2)
      format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
    url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2)
      format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
    url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2)
      format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
    url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2)
      format("woff2");
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
    url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2)
      format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
    url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2)
      format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
    url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2)
      format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

.assetPreview {
  width: 100px;
  text-align: center;
  /* border: dashed blue 1px; */
}

.assetPreview img {
  max-height: 100%;
  max-width: 100%;
}

.header-logo {
  width: 300px;
  height: 300px; /* Adjust this based on your image's aspect ratio */
  padding: 20px;
  margin-top: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.header-logo-top {
  width: 200px;
  height: 60px;
  margin-left: 10px;
  float: left;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.header-logo-side {
  width: 100%;
  height: 80px;
  padding: 20px;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.login-background {
  background-image: url('../images/WelcomeBanner.png');
}