@media screen and (max-width: 992px) {
  .navbar {
    padding: 5px 0 0 0;
  }
  .project-logo-standard {
    width: 220px;
    height: 28px;
    margin: 0.75rem 0 1rem 0;
  }
}

@media screen and (max-width: 992px) {
  .nav-button {
    margin: -2px 0 0 0;
    width: 30px;
    height: 30px;
  }

  ul.navbar-nav {
    flex-direction: column;
    float: none;
  }

  ul.navbar-nav .nav-item:hover {
    text-decoration: none;
    border-left: 3px solid var(--config-secondary-color);
  }

  ul.navbar-nav li {
    padding: 14px 0 14px 48px;
    margin: 0 0 0 0;
    font-size: 0.875rem;
    height: 64px;
    display: block;
    vertical-align: middle;
    border-bottom: 1px solid #dce0e3 !important;
  }
  ul.navbar-nav li a {
    text-decoration: none;
    height: 64px;
  }

  ul.navbar-nav li a:hover {
    text-decoration: none;
    border-bottom: none;
  }

  ul.navbar-nav .active {
    border-bottom: 0px solid var(--config-secondary-color);
    border-left: 3px solid var(--config-secondary-color);
  }

  ul.navbar-nav .dashboard {
    background: url(/rea/images/icon-dashboard.svg) 16px center no-repeat;
  }

  ul.navbar-nav .campaigns {
    background: url(/rea/images/icon-campaigns.svg) 16px center no-repeat;
  }

  ul.navbar-nav .banners {
    background: url(/rea/images/icon-banners.svg) 16px center no-repeat;
    background-size: 11px 14px;
  }

  ul.navbar-nav .profile {
    background: none;
    background-size: contain;
  }

  ul.navbar-nav .hide-mob {
    display: none;
  }
}

.dropdown-profile {
  font-family: "REA Pangea Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal !important;
  background: url(/rea/images/profile-image.svg) 1rem center no-repeat;
  background-size: 32px 32px;
  font-size: 1.125rem;
  width: 100%;
  padding: 1rem 0 1rem 4rem;
  border-bottom: 1px solid #dce0e3;
  margin: 0 1rem 1rem;
}

.dropdown-profile .email {
  color: #3d3a40;
  font-size: 1rem;
}

.account-settings,
.account-help,
.account-signout,
.account-balance,
.account-faq {
  padding: 14px 0 1rem 3rem;
  display: block;
  background-size: 16px 16px !important;
  margin: 0 0 0 0;
}

.account-settings:hover,
.account-help:hover,
.account-signout:hover,
.account-balance:hover,
.account-faq:hover {
  background-color: #f7f8f9;
}

/* Bootstrap overrides */
.navbar-nav .dropdown-menu {
  margin: 0 0 0 0px;
}

.navbar-nav .dropdown-menu p {
  width: 230px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "REA Pangea Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal !important;
}

@media screen and (max-width: 992px) {
  .navbar-nav {
    flex-direction: row;
  }

  .navbar-collapse {
    float: right;
  }

  .navbar-nav .dropdown-menu {
    display: block;
    position: absolute;
    left: 0;
    background-color: transparent;
    border: 0 none;
    box-shadow: none;
    margin: 0 0 0 0;
    width: 100%;
    padding-top: 0px;
  }

  .navbar-nav .dropdown-menu > li > a,
  .navbar-nav .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }

  .navbar-nav .dropdown-menu > li > a {
    line-height: 20px;
  }

  .navbar-nav .dropdown-menu p {
    width: 249px;
    font-family: "REA Pangea Text", "Helvetica Neue", Helvetica, Arial,
      sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    border-bottom: 1px solid #dce0e3;
    height: 64px;
    margin: 0 0;
    padding: 0 0 0 0;
  }

  .navbar-nav .dropdown-menu:hover {
    margin: 0 0 0 -3px;
  }


  .dropdown-profile {
    font-family: "REA Pangea Text", "Helvetica Neue", Helvetica, Arial,
      sans-serif;
    font-weight: normal !important;
    background: url(/rea/images/profile-image.svg) 1rem center no-repeat;
    background-size: 32px 32px;
    font-size: 0.875rem;
    width: 100%;
    padding: 0.875rem 0 1rem 4rem !important;
    border-bottom: 1px solid #dce0e3;
    margin: 0 1rem 1rem 0rem;
  }

  .dropdown-profile:hover,
  .dropdown-profile:active {
    border-left: 3px solid var(--config-secondary-color);
  }

  .dropdown-profile .email {
    color: #3d3a40;
    font-size: 0.875rem;
  }

  .account-settings,
  .account-help,
  .account-signout,
  .account-balance,
  .account-faq {
    padding: 24px 0 1rem 3rem;
    display: block;
    background-size: 16px 16px !important;
    margin: 0 0 0 0;
  }

  .account-settings:hover,
  .account-help:hover,
  .account-signout:hover,
  .account-balance:hover,
  .account-faq:hover {
    background-color: #fff;
    border-left: 3px solid var(--config-secondary-color);
    border-bottom: 1px solid #dce0e3;
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg .offcanvas {
    position: inherit;
    bottom: 0;
    z-index: 1000;
    flex-grow: 1;
    visibility: visible !important;
    background-color: transparent;
    border-right: 0;
    border-left: 0;
    transition: none;
    transform: none;
    float: right;
  }
}
/* Off canvas Nav
 ================================================== */
.navbar-expand-lg .offcanvas .offcanvas-body {
  display: inline-block;
  float: right;
}

@media (min-width: 992px) {
  .offcanvas {
    visibility: visible;
    position: relative;
    background: none;
    border: none;
    justify-content: end;
  }
}

@media (max-width: 992px) {
  .offcanvas {
    width: 250px !important;
  }

  .offcanvas-start-lg {
    top: 0;
    left: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    transform: translateX(-100%);
  }
}

.offcanvas-body {
  padding: 0 0 1rem 0;
}

.navbar-nav li a {
  /* color: white !important; */
}

.navbar-toggler {
  float: right;
}

.navbar-toggler:focus {
  box-shadow: none;
}

/* ============ mobile view .end// ============ */

@media screen and (max-width: 1024px) {
  #header-section h1 {
    font-size: 1.75rem;
  }
}

@media screen and (max-width: 992px) {
  #header-section {
    padding: 2rem 0;
  }

  #header-section .col-xl-9 {
    width: 57%;
  }

  #header-section .col-xl-3 {
    width: 43%;
  }
}

@media screen and (max-width: 767px) {
  #header-section h1 {
    padding: 0 0;
  }

  #header-section .button {
    float: right;
  }
}

/* @import 'form'; */
#section-1 .is-hidden {
  display: none !important;
}

#section-1 .border-bottom {
  border-bottom: 0px solid #dce0e3 !important;
}

@media screen and (max-width: 1024px) {
  #section-1 #dashboard {
    padding: 32px 26px;
    background-size: cover;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0.0625rem 0.1875rem 0px;
  }

  #section-1 .campaign-detail {
    font-size: 1rem;
    line-height: 1.5;
    padding: 0 1rem 0 0;
  }

  #section-1 .campaign-detail span {
    font-size: 0.75rem;
    line-height: 1.5;
  }

  #section-1 .welcome-screen-dashboard {
    background: white url(/rea/images/dashboard-background.jpg) right top
      no-repeat;
  }

  #section-1 .single-campaign-dashboard {
    background: white;
  }

  #section-1 .progress {
    height: 1.5rem;
    margin: 0 0 0.375rem;
  }

  #section-1 .progress .progress-bar {
    padding: 0 0 0.375rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    font-family: "REA Pangea Text", "Helvetica Neue", Helvetica, Arial,
      sans-serif;
    font-weight: 500;
  }

  #section-1 .progress-start-date,
  #section-1 .progress-end-date {
    font-size: 0.875rem;
    width: 49%;
    color: #716e75;
    margin-bottom: 1.5rem;
  }

  #section-1 .active-campaigns,
  #section-1 .delivered-impressions,
  #section-1 .total-clicks,
  #section-1 .total-cpc,
  #section-1 .total-spend {
    padding: 12px;
    border-radius: 8px;
    margin-right: 18px;
    height: 60px;
    font-size: 0.875rem;
  }

  #section-1 .active-campaigns .snapshot-title,
  #section-1 .delivered-impressions .snapshot-title,
  #section-1 .total-clicks .snapshot-title,
  #section-1 .total-cpc .snapshot-title,
  #section-1 .total-spend .snapshot-title {
    width: 30%;
    display: inline-block;
    margin: 0 0;
  }

  #section-1 .active-campaigns .snapshot-data-point,
  #section-1 .delivered-impressions .snapshot-data-point,
  #section-1 .total-clicks .snapshot-data-point,
  #section-1 .total-cpc .snapshot-data-point,
  #section-1 .total-spend .snapshot-data-point {
    width: 70%;
    display: inline-block;
    text-align: right;
    font-size: 1.5rem;
    margin: 0 0;
  }
}

@media screen and (max-width: 992px) {
  #section-1 .welcome-screen-dashboard {
    background: white url(/rea/images/dashboard-background.jpg) 50% top
      no-repeat;
  }

  #section-1 .active-campaigns,
  #section-1 .delivered-impressions,
  #section-1 .total-clicks,
  #section-1 .total-cpc,
  #section-1 .total-spend {
    padding: 6px;
    border-radius: 8px;
    margin-right: 18px;
    height: 60px;
    font-size: 0.875rem;
    max-width: 50%;
  }

  #section-1 .active-campaigns .snapshot-data-point,
  #section-1 .delivered-impressions .snapshot-data-point,
  #section-1 .total-clicks .snapshot-data-point,
  #section-1 .total-cpc .snapshot-data-point,
  #section-1 .total-spend .snapshot-data-point {
    text-align: right;
    font-size: 1.3rem;
  }

  #section-1 .no-border {
    border-right: 0px;
  }
}

@media screen and (max-width: 767px) {
  #section-1 {
    max-width: 100%;
  }

  #section-1 #dashboard {
    padding: 32px 15px 15px;
  }

  #section-1 .welcome-screen-dashboard {
    background: white;
  }

  #section-1 .container {
    width: 100%;
  }

  #section-1 .border-right,
  #section-1 .border-bottom {
    border-right: 0px solid #dce0e3;
    border-bottom: 1px solid #dce0e3 !important;
    padding-bottom: 1rem;
  }

  #section-1 .field-wrapper {
    width: 100%;
  }

  #section-1 .col {
    flex: 0 0 auto;
    width: calc(100% - 30px);
  }

  #section-1 .active-campaigns,
  #section-1 .delivered-impressions,
  #section-1 .total-clicks,
  #section-1 .total-cpc,
  #section-1 .total-spend {
    padding: 16px;
    height: auto;
    margin: 0.5rem 15px;
    max-width: 100%;
  }

  #section-1 .active-campaigns:last-child,
  #section-1 .delivered-impressions:last-child,
  #section-1 .total-clicks:last-child,
  #section-1 .total-cpc:last-child,
  #section-1 .total-spend:last-child {
    margin-right: 15px;
  }

  #section-1 .active-campaigns .snapshot-title,
  #section-1 .delivered-impressions .snapshot-title,
  #section-1 .total-clicks .snapshot-title,
  #section-1 .total-cpc .snapshot-title,
  #section-1 .total-spend .snapshot-title {
    width: 60%;
    display: inline-block;
    margin: 0 0;
    font-size: 1.125rem;
  }

  #section-1 .active-campaigns .snapshot-data-point,
  #section-1 .delivered-impressions .snapshot-data-point,
  #section-1 .total-clicks .snapshot-data-point,
  #section-1 .total-cpc .snapshot-data-point,
  #section-1 .total-spend .snapshot-data-point {
    width: 30%;
    display: inline-block;
    text-align: right;
    font-size: 1.5rem;
    margin: 0 0;
  }
}

#section-2 table .active {
  background: url(/rea/images/bg-active.svg) left center no-repeat;
  padding-left: 16px;
}

#section-2 table .paused {
  background: url(/rea/images/bg-paused.svg) left center no-repeat;
  padding-left: 16px;
}

#section-2 table .complete {
  background: url(/rea/images/bg-complete.svg) left center no-repeat;
  padding-left: 16px;
}

@media screen and (max-width: 992px) {
  #section-2 {
    overflow-x: scroll;
  }

  #section-2 .button {
    font-size: 1rem !important;
  }
}

@media screen and (max-width: 767px) {
  #section-2 .button {
    float: right;
    letter-spacing: 0px;
  }
}

#builder .hint {
  font-family: "REA Pangea Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal !important;
  font-size: 1.5rem;
  margin: 0 0 1.5rem;
}

#builder .hint .red-text {
  color: #e4002b;
}

.pagination .btn {
  border: 1px solid #3d3a40;
  min-width: 2rem;
  margin: 1rem;
  border-radius: 3px;
  font-family: "REA Pangea Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.pagination .btn-next {
  border: none;
  background: var(--config-btn-primary-bg);
  color: #fff;
}

.pagination .btn-number {
}

.pagination .btn-current {
  border: none;
  background: var(--config-btn-primary-bg);
  color: #fff;
}

#builder .wrap-circles,
#builder .circle,
#builder .per-25,
#builder .inner,
#builder .next-step-detail {
  display: none;
}

@media screen and (max-width: 992px) {
  #builder h1 {
    font-size: 2rem;
    margin: 0 0 2.5rem;
  }

  #builder .section-subheader {
    font-size: 1.375rem;
    margin: 0 0 1.5rem;
  }

  #builder .field-wrapper-half {
    width: 46%;
    display: inline-block;
    margin: 0 1rem 3rem 0;
  }

  #builder .field-wrapper-half input {
    height: 48px;
    color: #716e75;
  }

  #builder .field-wrapper-wide {
    width: 100%;
    display: inline-block;
    margin: 0 0 3rem 0;
  }

  #builder .field-wrapper-wide input {
    height: 48px;
  }

  #builder .field-wrapper-full {
    width: 100%;
    display: inline-block;
    margin: 0 0 2rem 0;
  }

  #builder .field-wrapper-full input {
    height: 48px;
  }

  #builder .cc-expiry-date {
    width: 120px;
    display: inline-block;
    margin: 0 0 2rem 0;
  }

  #builder .cc-expiry-date input {
    height: 48px;
  }

  #builder ol.steps-menu {
    border-right: 1px solid #dce0e3;
    list-style: none;
    counter-reset: item;
    width: 100%;
  }

  #builder ol.steps-menu li {
    font-size: 1rem;
  }

  #builder ol.steps-menu li::before {
    font-family: "REA Pangea Text", "Helvetica Neue", Helvetica, Arial,
      sans-serif;
    font-weight: 500;
    content: counter(item) "";
  }
}

@media screen and (max-width: 767px) {
  #builder {
    padding: 2rem 0;
    background: #f7f8f9;
  }

  #builder h1 {
    font-size: 1.75rem;
    margin: 0 0 0.5rem;
    padding: 0 0;
  }

  #builder .next-step-detail {
    display: block;
    font-size: 1rem;
    font-family: "REA Pangea Text", "Helvetica Neue", Helvetica, Arial,
      sans-serif;
    font-weight: normal !important;
    margin: 0 0 1rem;
  }

  #builder .hint {
    font-size: 1.25rem;
    padding: 1rem 0 0 0;
    margin: 1.5rem 0 1.25rem;
    border-top: 1px solid #dce0e3;
  }

  #builder .campaign-form-step {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0.0625rem 0.1875rem 0px;
  }

  #builder .field-wrapper-half {
    width: 100%;
    display: inline-block;
    margin: 0 1rem 1rem 0;
  }

  #builder .field-wrapper-half input {
    height: 48px;
    color: #716e75;
  }

  #builder .field-wrapper-wide {
    width: 100%;
    display: inline-block;
    margin: 0 0 1rem 0;
  }

  #builder .field-wrapper-wide input {
    height: 48px;
  }

  #builder .field-wrapper-full {
    width: 100%;
    display: inline-block;
    margin: 0 0 1rem 0;
  }

  #builder .field-wrapper-full input {
    height: 48px;
  }

  #builder .cc-expiry-date {
    width: 120px;
    display: inline-block;
    margin: 0 0 1rem 0;
  }

  #builder .cc-expiry-date input {
    height: 48px;
  }

  #builder ol.steps-menu {
    border-right: 1px solid #dce0e3;
    list-style: none;
    counter-reset: item;
    width: 100%;
    display: none;
  }

  #builder ol.steps-menu li {
    margin: 0 0 2.5rem;
    padding: 0 0 0 17px;
    height: 40px;
    line-height: 40px;
    font-size: 1rem;
    display: inline-block;
    visibility: hidden;
  }

  #builder ol.steps-menu .active {
    visibility: visible;
    background: none;
  }

  #builder ol.steps-menu li::before {
    font-family: "REA Pangea Text", "Helvetica Neue", Helvetica, Arial,
      sans-serif;
    font-weight: 500;
    content: counter(item) "of 4";
    padding: 0 0 0 0px;
    margin: 0 30px 0 0;
  }

  #builder .selectedAdunit img {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  #builder .border-right {
    border-right: 0px;
    padding-right: 1rem;
  }

  #builder .right-col {
    padding: 0 1rem;
  }

  #builder table {
    font-family: "REA Pangea Text", "Helvetica Neue", Helvetica, Arial,
      sans-serif;
    font-weight: normal !important;
    color: #3d3a40;
  }

  #builder table .bold {
    font-family: "REA Pangea Text", "Helvetica Neue", Helvetica, Arial,
      sans-serif;
    font-weight: bold;
  }

  #builder table .days-on-site {
    width: 70px;
    text-align: right;
  }

  #builder table .delivered-impressions {
    width: 50px;
  }

  #builder table .pricing {
    font-size: 1.125rem;
  }
}

@media screen and (max-width: 767px) {
  #builder .table {
    padding: 0 0 0.5rem 0;
    font-weight: 400;
  }
}

@media screen and (max-width: 767px) {
  #builder .table > :not(caption) > * > * {
    padding: 12px 0.5rem;
    font-weight: 400;
  }
}

@media screen and (max-width: 767px) {
  #builder .table > thead {
    font-family: "REA Pangea Text", "Helvetica Neue", Helvetica, Arial,
      sans-serif;
    font-weight: 600;
    font-weight: 500 !important;
  }

  #builder .wrap-circles,
  #builder .circle,
  #builder .per-25,
  #builder .inner {
    display: flex;
  }

  #builder .wrap-circles {
    display: flex;
    /*
          min-height: 100vh;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
    */
    float: left;
    padding: 0 0.5rem 0 0;
  }
}

@media screen and (max-width: 767px) {
  #builder .circle {
    position: relative;
    width: 4.25rem;
    height: 4.25rem;
    margin: 0 0.5rem 0 0;
    border-radius: 50%;
    background: #ffcdb2;
    overflow: hidden;
  }
}

@media screen and (max-width: 767px) {
  #builder .circle.per-25 {
    background-image: conic-gradient(#00beb3 25%, #dce0e3 0);
  }
}

@media screen and (max-width: 767px) {
  #builder .circle.per-50 {
    background-image: conic-gradient(#00beb3 50%, #dce0e3 0);
  }
}

@media screen and (max-width: 767px) {
  #builder .circle.per-75 {
    background-image: conic-gradient(#00beb3 75%, #dce0e3 0);
  }
}

@media screen and (max-width: 767px) {
  #builder .circle.per-100 {
    background-image: conic-gradient(#00beb3 100%, #dce0e3 0);
  }
}

@media screen and (max-width: 767px) {
  #builder .circle .inner {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.25rem;
    height: 3.25rem;
    background: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-family: "REA Pangea Text", "Helvetica Neue", Helvetica, Arial,
      sans-serif;
    font-weight: 600;
  }
}

@media screen and (max-width: 767px) {
  #builder .campaign-image {
    margin: 1rem 0;
  }
}

@media screen and (max-width: 992px) {
  #user-profile .button {
    font-size: 1rem !important;
    letter-spacing: 0px;
  }
}

@media screen and (max-width: 767px) {
  #user-profile .faqs-wrapper {
    border-left: 0px solid #dce0e3;
    border-top: 1px solid #dce0e3;
    padding: 1rem 1rem 0;
    margin: 3rem 0px 0 0;
  }

  #user-profile .faqs-wrapper .section-intro {
    margin: 0 0;
  }

  #user-profile .faqs-wrapper ul.faqs {
    list-style-type: none;
    padding: 0 0;
  }

  #user-profile .faqs-wrapper ul.faqs li {
    margin: 0 0 1rem;
    padding: 0 2rem 0 0;
    background: url(/rea/images/icon-arrow.svg) 95% 5px no-repeat;
    background-size: 16px 16px;
    transition: all 0.6s ease;
  }

  #user-profile .faqs-wrapper ul.faqs li:hover {
    background: url(/rea/images/icon-arrow.svg) 97% 5px no-repeat;
    background-size: 16px 16px;
  }

  #user-profile .faqs-wrapper ul.faqs a {
    color: #716e75;
    text-decoration: none;
  }

  #user-profile .faqs-wrapper ul.faqs a:hover {
    color: #2b6ed2;
  }

  #user-profile .faqs-wrapper .help-support {
    padding: 0 0;
  }

  #user-profile .faqs-wrapper .help-support a {
    color: #2b6ed2;
  }

  #footer .terms,
  #footer a {
    margin: 0 0 0.5rem;
    text-align: left;
  }

  .container {
    width: 100%;
  }
}
@media (max-width: 520px) {
  #create-banner-modal .bs-stepper-content,
  #imgEditor .bs-stepper-content {
    padding: 0 1rem;
  }
}