/* Intro */
.page-intro {
  display: block;
}

/* Intro */

/* Drag & Drop */
.dragging-over * {
  pointer-events: none;
}

/* Drag & Drop */

/* Menu */
.row-menu {
  margin-bottom: 1rem;
}

.menu-dropdown .dropdown-item {
  padding: .25rem 1rem;
  font-size: .96rem;
}

.row-menu .btn {
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: 0;
}

.row-menu .btn i {
  position: relative;
  top: 1px;
}

.extract-mode-button.activated {
  background-color: #cce5fc !important;
}

#pdf_mode_button {
  border-left: none !important;
}

/* Menu */

/* Tab */
#source_tab,
#target_tab {
  position: relative;
}

/* Tab */

/* Tab Widget */
.tab-button {
  font-size: 1rem !important;
  position: absolute;
  top: .75rem;
  right: 1rem;
  display: flex;
  align-items: center;
  z-index: 1;
}

.tab-button i {
  position: relative;
  top: .125rem;
}

.render-button {
  right: unset;
  left: 1rem;
}

/* Tab Widget */

/* Pill */
.tab-pill {
  padding-top: .75rem;
  padding-left: 1rem;
  padding-bottom: 1px;
  padding-right: 1rem;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
  transition: all .5s ease;
}

#source_pill {
  background-color: var(--tab-pill-source-normal);
}

#target_pill {
  background-color: var(--tab-pill-extract-normal);
}

.tab-pill>li>a {
  color: #ffffff;
  padding: .5rem 1rem .25rem;
  font-size: 1.1rem;
  font-weight: 500;
  transition: all .5s ease;
}

#source_pill>li>a {
  background-color: #ffffff;
}

#target_pill>li>a {
  background-color: #e9ecef;
}

/* Pill */

/* Content */
.tab-content {
  height: calc(100% - 50.4px);
}

.content-pane {
  position: relative;
  height: 100%;
}

.pane-body {
  height: 100%;
  min-height: 375.4px;
  padding: 1rem 1rem 3.4rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: .25rem;
  border-bottom-right-radius: .25rem;
}

/* Content */

/* Source Textarea */
#source_textarea {
  resize: none;
}

#source_textarea,
#source_textarea:focus {
  border: #ced4da;
  box-shadow: none;
}

/* Source Textarea */

/* Showcase */
.source-showcase,
.target-showcase {
  max-height: 77vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.source-showcase {
  background-color: #ffffff;
}

.target-showcase {
  background-color: #e9ecef;
}

/* Showcase */

/* Placeholder */
.tab-content {
  position: relative;
}

.pane-placeholder {
  display: block;
  position: absolute;
  text-align: left;
  pointer-events: none;
  top: .6rem;
  left: 1rem;
  right: 1rem;
  color: #959595;
  font-size: 1.5rem;
}

.placeholder-note {
  font-size: 1rem;
  margin-top: .5rem;
}

.placeholder-note p {
  margin-bottom: .5rem;
}

.placeholder-note code {
  font-size: 1rem;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

/* Placeholder */

/* Widget */
.textarea-widget {
  display: block;
  position: absolute;
  bottom: 1rem;
}

.textarea-widget button,
.textarea-widget button:hover,
.textarea-widget button:focus {
  text-decoration: none;
}

.textarea-widget button h6:hover,
.textarea-widget button h6:focus {
  color: #0064a1 !important;
}

#source_statistic {
  text-align: right;
  right: 1rem;
}

#target_export {
  text-align: right;
  right: 1rem;
}

/* Widget */

/* Mask */
.textarea-mask img {
  width: 25%;
}

#mask_wait_extract,
#mask_render_annot {
  background-color: rgba(233, 236, 239, 1);
}

#drag_upload {
  position: relative;
}

#drag_upload_up {
  position: absolute;
  top: 16%;
  left: 37.5%;
}

/* Mask */

/* Showcase PDF */
#showcase_pdf {
  padding: 0;
}

.pdfViewer .page {
  margin: 0 auto !important;
  border: 0 !important;
}

/* Showcase PDF */

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

  /* Page */
  .page-container {
    padding-top: 1rem;
    padding-left: 0;
    padding-right: 0;
  }

  /* Tab */
  .row-tab {
    margin-left: 0;
    margin-right: 0;
  }

  .col-tab {
    padding: 0;
  }

  .tab-pill {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .pane-body {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}