{"version":3,"file":"../css/stc_offer_page.css","mappings":"AAIA,KAEE,mBADA,aAEA,SACA,WAEA,cAEE,aADA,MACA,CAGF,yBAEE,oFADA,qCAEE,CAQF,gCAEE,kBCvBI,CDsBJ,WAGA,aAAY,CADZ,YACA,CAIJ,mBAEE,2EADA,qCAEE,CAOF,0BAEE,kBC1BE,CDyBF,WAGA,aAAY,CADZ,YACA,CAIJ,oBASE,KAAI,CARJ,yGAQA,CAEA,2BAEE,sDADA,WAGA,aAAY,CADZ,YACA,CAIJ,aAGE,aC7CY,CCSd,eFsCE,eErCF,gBFsCE,gBAJA,iBEjCF,iBFsCE,mBAHA,iBAGA,CG1BF,wBHmBA,aASI,gBAIJ,gBExCA,aDvBU,CCwBV,eACA,gBF4CE,oBAKA,oBAJA,qBE5CF,iBF6CE,iBACA,gBACA,iBACA,CGrFF,wBH0EA,gBAEI,WAYJ,4BAEE,gBADA,kBAEA,kBACA,WAGF,oBAGE,kBACA,iCAHA,aACA,WAEA,CAGF,qBAGE,UC1DI,CD2DJ,eACA,gBAHA,yBAIA,iBALA,kBAMA,kBAGF,0BE3FA,UDyBM,CDsEJ,UCrEI,CCzBN,eACA,gBF4FE,8BAEA,qBE7FF,iBF8FE,iBAJA,kBAKA,kBACA,qBAGF,cAME,oBAHA,aADA,kBAGA,YAEA,uBAHA,oBAHA,iBAMA,CGxFF,wBHiFA,cASI,sBACA,aAIJ,iBAYE,mBALA,qDC1GkB,CDwGlB,sBACA,kBAEA,gCANA,sBE6BF,UDzHM,CDoGJ,aEsBF,eACA,gBF9BE,YAQA,uBEuBF,iBFzBE,kBALA,WAQA,CGrJF,wBHwJA,4BAEI,kBACA,mBACA,qBACA,aAIJ,oBAOE,eCzHI,CD2HJ,kBAJA,eACA,oBAIA,gBAFA,WAEA,CGjIF,wBHuHA,oBAEI,WAUF,6CACE,iCAGF,uCACE,6EAIJ,YAOE,aAFA,aAGA,uBACA,gBAHA,iBAGA,CGrJF,wBH4IA,YAEI,cAUJ,mBAME,8CALA,aAIA,aADA,sBAFA,8BACA,4BAGA,CG9JF,wBHwJA,mBASI,sBAGF,uBACE,aCpNI,CDqNJ,eACA,iBAEA,uCACE,cACA,eACA,gBACA,iBGvNN,wBHmNI,uCAMI,gBAMR,mBE7LA,aDvBU,CDsNR,cE9LF,eACA,gBACA,gBF4LE,CAGF,aACE,iBACA,oBAGF,iBACE","sources":["webpack://bidxone/./src/sass/screens/sales/property_page/stc_offer_page/index.scss","webpack://bidxone/./src/sass/variables.scss","webpack://bidxone/./src/sass/typography.scss","webpack://bidxone/./src/sass/responsive-utils.scss"],"sourcesContent":["@import '../../../../variables.scss';\n@import '../../../../typography.scss';\n@import '../../../../responsive-utils.scss';\n\n.stc {\n  display: grid;\n  background: #ebf1f7;\n  gap: 45px;\n  width: 100%;\n\n  &__wrapper {\n    flex: 1;\n    display: flex;\n  }\n\n  &--offer-confirmation {\n    grid-template-rows: repeat(6, auto) 1fr;\n    grid-template-areas:\n      'header'\n      'subheader'\n      'card'\n      'card'\n      'card'\n      'button'\n      'space-left';\n\n    &::before {\n      content: '';\n      background: $primary;\n      grid-row: 5/8;\n      grid-column: 1;\n    }\n  }\n\n  &--offer-placed {\n    grid-template-rows: repeat(5, auto) 1fr;\n    grid-template-areas:\n      'header'\n      'subheader'\n      'card'\n      'card'\n      'card'\n      'space-left';\n\n    &::before {\n      content: '';\n      background: $green;\n      grid-row: 5/7;\n      grid-column: 1;\n    }\n  }\n\n  &--offer-expired {\n    grid-template-areas:\n      'header'\n      'subheader'\n      'image'\n      'image'\n      'contact-header'\n      'contact-description'\n      'buttons';\n    gap: 0;\n\n    &::before {\n      content: '';\n      background: linear-gradient(144.27deg, #233c96 0%, #2343b7 100%);\n      grid-row: 4/8;\n      grid-column: 1;\n    }\n  }\n\n  &__header {\n    @include stc-offer-header;\n    grid-area: header;\n    color: $stc-dark-grey;\n    text-align: center;\n    font-size: 35px;\n    font-weight: 700;\n    line-height: normal;\n    @include mobile {\n      font-size: 30px;\n    }\n  }\n\n  &__subheader {\n    @include ultra-small-mobile {\n      width: 90%;\n    }\n\n    @include body-text;\n    grid-area: subheader;\n    letter-spacing: 0.06px;\n    line-height: 28px;\n    max-width: 600px;\n    text-align: center;\n    justify-self: center;\n  }\n\n  &__contact-image-wrapper {\n    position: relative;\n    grid-area: image;\n    text-align: center;\n    width: 100%;\n  }\n\n  &__contact-image {\n    height: 236px;\n    width: 236px;\n    border-radius: 50%;\n    box-shadow: 0 26px 20px 0 #1e2c60;\n  }\n\n  &__contact-header {\n    position: relative;\n    grid-area: contact-header;\n    color: $white;\n    font-size: 40px;\n    font-weight: 600;\n    line-height: 56px;\n    text-align: center;\n  }\n\n  &__contact-description {\n    @include header-4;\n    position: relative;\n    grid-area: contact-description;\n    color: $white;\n    letter-spacing: 0.78px;\n    line-height: 32px;\n    text-align: center;\n    word-break: break-all;\n  }\n\n  &__buttons {\n    position: relative;\n    grid-area: buttons;\n    display: flex;\n    justify-self: center;\n    height: 25vh;\n    align-content: start;\n    justify-content: center;\n    @include mobile {\n      flex-direction: column;\n      height: auto;\n    }\n  }\n\n  .stc-button {\n    @include stc-button;\n    box-sizing: border-box;\n    height: 57px;\n    width: 198px;\n    border: 1px solid $white;\n    border-radius: 5px;\n    background: $stc-button-gradient;\n    box-shadow: 0 5px 20px 0 $stc-button-shadow;\n    text-align: center;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .call-to-action-button {\n    @include ultra-small-mobile {\n      padding: 14px 20px;\n      white-space: normal;\n      word-wrap: break-word;\n      height: auto;\n    }\n  }\n\n  &__property-card {\n    @include mobile {\n      width: 90%;\n    }\n\n    grid-area: card;\n    justify-self: center;\n    background: $white;\n    width: 518px;\n    border-radius: 5px;\n    overflow: hidden;\n\n    .stc--offer-confirmation & {\n      box-shadow: 0 26px 20px 0 #1e2c60;\n    }\n\n    .stc--offer-placed & {\n      box-shadow: 0 7px 20px -4px rgb(130, 201, 30, 86%), 0 26px 20px 0 $shadow;\n    }\n  }\n\n  &__image {\n    @include mobile {\n      height: 178px;\n    }\n\n    height: 310px;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    overflow: hidden;\n  }\n\n  &__info-section {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-template-rows: auto auto;\n    grid-auto-flow: column;\n    gap: 5px 10px;\n    border-bottom: 2px solid rgba(214, 220, 240, 0.73);\n\n    @include mobile {\n      justify-items: center;\n    }\n\n    div {\n      color: $primary;\n      font-size: 16px;\n      line-height: 24px;\n\n      &:nth-of-type(2n) {\n        color: #44507b;\n        font-size: 25px;\n        font-weight: 600;\n        line-height: 35px;\n        @include ultra-small-mobile {\n          font-size: 20px;\n        }\n      }\n    }\n  }\n\n  &__bidder-notes {\n    @include body-text;\n    color: #5669aa;\n  }\n\n  &__button {\n    grid-area: button;\n    justify-self: center;\n  }\n\n  &__space-left {\n    grid-area: space-left;\n  }\n}\n","// -------------------------------\n//       GLOBAL VARIABLES\n// -------------------------------\n\n// --------- COLORS ---------\n$primary: #233c96;\n$secondary: #3a8dfb;\n$secondary-darker: #357ddd;\n$secondary-2: #39F;\n$accent: #fa7889;\n$links: #2d9bf0;\n$queenly-grey: #527896;\n$error: #f4314a;\n$warning: #f5d547;\n$background: #ffffff;\n$secondary-background: #f9fafe;\n$light-blue-background: #243c96;\n$dark-blue-background: #0a2692;\n$grey-background: #f6f6f6;\n$gentle-green: #73d77d;\n$green: #82c91e;\n$body-text: #444a57;\n$black: #000000;\n$white: #ffffff;\n$grey: #888888;\n$grey-2: #5A6373;\n$light-grey: #cccccc;\n$light-grey-2: #c8c8c8;\n$cherry-bomb: #ff596d;\n$stc-dark-grey: #252849;\n$stc-button-shadow: #1e2c62;\n$shadow: rgba(0, 0, 0, 0.5);\n$light-shadow: rgba(0, 0, 0, 0.25);\n$white-shadow: rgba(255, 255, 255, 0.5);\n$black-shadow: rgba(0, 0, 0, 0.11);\n$grey-shadow: rgba(198, 207, 220, 0.41);\n$blue-shadow: rgba(45, 155, 240, 0.28);\n$blue-shadow-transparent: rgba(51, 153, 255, 0.15);\n$blue-gradient: linear-gradient(\n  15.64deg,\n  $secondary-darker 0%,\n  $secondary 100%\n);\n$dark-blue-gradient: linear-gradient(\n  45deg,\n  $light-blue-background 0%,\n  $dark-blue-background 100%\n);\n$stc-button-gradient: linear-gradient(118.71deg, #2341b0 0%, #203a97 100%);\n// COLORS According to the styleguide (https://projects.invisionapp.com/prototype/styleguide2-ckesabylu000l1v01l0fmrao0/play/e4264193)\n$duchess-blue: #233c96;\n$august-blue: #3a83fb;\n$wellborn-blue: #2d9bf0;\n$queenly-grey: #527896;\n$swansong: #f9fafe;\n$noble-grey: #444a57;\n$black: #000000;\n$white: #ffffff;\n\n// --------- BOX SHADOWS ---------\n$image-shadow: 10px 15px 4px 0 $black-shadow;\n$label-shadow: 0 3px 4px 0 $light-shadow;\n$dropdown-shadow: 5px 5px 10px 0 $light-shadow;\n$button-shadow: 7px 7px 4px 0 $black-shadow;\n$button-blue-shadow: 2px 7px 4px 0 lighten($secondary, 23%);\n$button-hover-blue-shadow: 2px 7px 4px 0 lighten($secondary, 20%);\n$button-hover-black-shadow: 1px 3px 4px 0 $black-shadow;\n$button-bod-nav-hover: 0px 2px 4px 0 rgba(0,0,0,0.18);\n$icon-shadow: 0 2px 4px 0 $shadow;\n$widget-shadow: 7px 7px 20px 0 transparentize($secondary, 0.69);\n$modal-shadow: 7px 7px 10px 0 rgba(51, 153, 255, 0.29);\n$disclaimer-shadow: 2px 2px 10px 0 rgba(51,153,255,0.46);\n","@import 'variables';\n\n@mixin main-header {\n  color: $white;\n  font-size: 77px;\n  font-weight: 700;\n  line-height: 81px;\n}\n\n@mixin header-1 {\n  color: $primary;\n  font-size: 52px;\n  font-weight: 700;\n  line-height: 73px;\n}\n\n@mixin header-2 {\n  color: $primary;\n  font-size: 27px;\n  font-weight: 700;\n  line-height: 38px;\n}\n\n@mixin header-3 {\n  color: $black;\n  font-size: 20px;\n  font-weight: 700;\n  line-height: 28px;\n}\n\n@mixin header-4 {\n  color: $black;\n  font-size: 20px;\n  font-weight: 500;\n  line-height: 28px;\n}\n\n@mixin stc-offer-header {\n  font-size: 55px;\n  font-weight: 600;\n  line-height: 77px;\n}\n\n@mixin body-text {\n  color: $body-text;\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 21px;\n}\n\n@mixin link-text {\n  color: $links;\n  font-size: 15px;\n  font-weight: 700;\n  line-height: 21px;\n}\n\n@mixin tag-text {\n  color: $body-text;\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 17px;\n}\n\n@mixin navbar-text {\n  color: $black;\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 25px;\n}\n\n@mixin table-header {\n  color: $black;\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 21px;\n}\n\n@mixin input-error {\n  color: $error;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 15px;\n}\n\n@mixin auction-property-status-label {\n  color: $white;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 15px;\n}\n\n@mixin negative-form-input {\n  color: $white;\n  font-size: 22px;\n  font-weight: 700;\n  letter-spacing: 0.44px;\n  line-height: 31px;\n}\n\n@mixin negative-form-label {\n  color: $white;\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 22px;\n}\n\n@mixin form-input {\n  color: $black;\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 21px;\n}\n\n@mixin form-label {\n  color: $secondary;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n}\n\n@mixin controls-item {\n  color: $black;\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 18px;\n}\n\n@mixin carousel-header {\n  color: $black;\n  font-size: 44px;\n  font-weight: 700;\n  line-height: 62px;\n}\n\n@mixin address-header {\n  color: $black;\n  font-size: 30px;\n  font-weight: 600;\n  line-height: 42px;\n}\n\n@mixin notification-text {\n  color: $white;\n  font-size: 17px;\n  font-weight: 500;\n  line-height: 24px;\n}\n\n@mixin auction-header {\n  color: $black;\n  font-size: 22px;\n  font-weight: 500;\n  line-height: 31px;\n}\n\n@mixin popover-modal-header {\n  color: $primary;\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 21px;\n}\n\n@mixin popover-modal-description {\n  color: $grey;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 14px;\n}\n\n@mixin notice-text {\n  color: $secondary;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 17px;\n}\n\n@mixin stc-button {\n  color: $white;\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 22px;\n}\n\n@mixin italic-text {\n  color: $black;\n  opacity: 0.8;\n  font-size: 16px;\n  font-style: italic;\n  line-height: 22px;\n}\n","$ULTRA_SMALL_MOBILE_WIDTH: 360px;\n$EXTRA_SMALL_MOBILE_WIDTH: 420px;\n$SMALL_MOBILE_WIDTH: 576px;\n$MOBILE_WIDTH: 767px;\n$DESKTOP_WIDTH: 992px;\n$WIDESCREEN_WIDTH: 1200px;\n$EXTRA_WIDESCREEN_WIDTH: 1500px;\n$ULTRA_WIDESCREEN_WIDTH: 1600px;\n\n@mixin ultra-small-mobile {\n  @media (max-width: #{$ULTRA_SMALL_MOBILE_WIDTH}) {\n    @content;\n  }\n}\n\n@mixin not-ultra-small-mobile {\n  @media (min-width: #{$ULTRA_SMALL_MOBILE_WIDTH + 1px}) {\n    @content;\n  }\n}\n\n@mixin extra-small-mobile {\n  @media (max-width: #{$EXTRA_SMALL_MOBILE_WIDTH}) {\n    @content;\n  }\n}\n\n@mixin extra-small-mobile-only {\n  @media (min-width: #{$ULTRA_SMALL_MOBILE_WIDTH + 1}) and (max-width: #{$EXTRA_SMALL_MOBILE_WIDTH}) {\n    @content;\n  }\n}\n\n@mixin small-mobile {\n  @media (max-width: #{$SMALL_MOBILE_WIDTH}) {\n    @content;\n  }\n}\n\n@mixin small-mobile-only {\n  @media (min-width: #{$EXTRA_SMALL_MOBILE_WIDTH + 1}) and (max-width: #{$SMALL_MOBILE_WIDTH}) {\n    @content;\n  }\n}\n\n@mixin not-small-mobile {\n  @media (min-width: #{$SMALL_MOBILE_WIDTH + 1px}) {\n    @content;\n  }\n}\n\n@mixin mobile {\n  @media (max-width: #{$MOBILE_WIDTH}) {\n    @content;\n  }\n}\n\n@mixin mobile-only {\n  @media (min-width: #{$SMALL_MOBILE_WIDTH + 1}) and (max-width: #{$MOBILE_WIDTH}) {\n    @content;\n  }\n}\n\n@mixin not-mobile {\n  @media (min-width: #{$MOBILE_WIDTH + 1px}) {\n    @content;\n  }\n}\n\n@mixin tablet {\n  @media (max-width: #{$DESKTOP_WIDTH - 1px}) {\n    @content;\n  }\n}\n\n@mixin tablet-only {\n  @media (min-width: #{$MOBILE_WIDTH + 1px}) and (max-width: #{$DESKTOP_WIDTH - 1px}) {\n    @content;\n  }\n}\n\n@mixin desktop {\n  @media (min-width: #{$DESKTOP_WIDTH}) {\n    @content;\n  }\n}\n\n@mixin desktop-only {\n  @media (min-width: #{$DESKTOP_WIDTH}) and (max-width:#{$WIDESCREEN_WIDTH - 1px}) {\n    @content;\n  }\n}\n\n@mixin not-widescreen {\n  @media (max-width: #{$WIDESCREEN_WIDTH - 1px}) {\n    @content;\n  }\n}\n\n@mixin widescreen {\n  @media (min-width: #{$WIDESCREEN_WIDTH}) {\n    @content;\n  }\n}\n\n@mixin extra-widescreen {\n  @media (min-width: #{$EXTRA_WIDESCREEN_WIDTH}) {\n    @content;\n  }\n}\n\n@mixin ultra-widescreen {\n  @media (min-width: #{$ULTRA_WIDESCREEN_WIDTH}) {\n    @content;\n  }\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}