@keyframes quick-quote-mask-show {
    0% {
      display: none;
      opacity: 0;
    }
    99% {
      opacity: 0.45;
    }
    100% {
      display: block;
      opacity: 0.45;
    }
  }

  @keyframes quick-quote-mask-hide {
    0% {
      opacity: 0.45;
    }
    99% {
      opacity: 0;
    }
    100% {
      display: none;
      opacity: 0;
    }
  }

  @keyframes quick-quote-spin {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  @keyframes callout-appear {
    0% {
      max-width: 15px;
      opacity: 0.3;
    }
    100% {
      max-width: 400px;
      opacity: 1;
      pointer-events: all;
    }
  }

  @keyframes callout-disappear {
    0% {
      max-width: 400px;
      opacity: 1;
      pointer-events: none;
    }
    100% {
      max-width: 15px;
      opacity: 0;
      pointer-events: none;
    }
  }


    .quick-quote-root {
      z-index: 2147483647;
      position: relative;
      font-family: Arial, Helvetica, Sans-serif;
    }

    .quick-quote-mask {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #FFFFFF;
      opacity: 0.45;
      z-index: 10000;
    }

    .quick-quote-closed .quick-quote-mask {
      display: none;
      animation: quick-quote-mask-hide 0.25s linear;
      animation-fill-mode: forwards;
    }

    .quick-quote-opened .quick-quote-mask {
      display: block;
      animation: quick-quote-mask-show 0.25s linear forwards;
    }

    .quick-quote-wrapper {
      position: fixed;
      z-index: 10000;
      top: 0;
      right: 0;
      display: flex;
      height: calc(100% - var(--jimo-banner-height, 0px));
      max-width: 1200px;
      width: 80%;
      transform: translateX(
        100%
      );
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 0 3px rgba(0, 0, 0, 0.12),
        0 0 8px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s ease-in-out;
    }

    .quick-quote-wrapper::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      border: 8px solid #f3f3f3;
      border-radius: 50%;
      border-top: 8px solid #D8D8D8;
      width: 60px;
      height: 60px;
      animation: quick-quote-spin 1s linear infinite;
      z-index: -1;
    }

    .quick-quote-frame {
      background-color: #fcb040;
      width: 100%;
      height: 100%;
      border: 0;
    }

    .quick-quote-button-wrapper {
      position: absolute;
      width: 0;
      top: 50%;
      left: 0;
      -webkit-tap-highlight-color: transparent;
    }

    .animated.quick-quote-callout_open {
      animation: callout-appear 0.4s ease-out;
      animation-fill-mode: forwards;
    }

    .animated.quick-quote-callout_close {
      animation: callout-disappear 0.4s ease-in;
      animation-fill-mode: forwards;
    }

    .quick-quote-callout-text-block.closable.quick-quote-callout-text-block_open {
      display: flex;
    }

    .quick-quote-callout-text-block.closable.quick-quote-callout-text-block_close {
      display: none;
    }

    .quick-quote-callout {
      display: flex;
      column-gap: 24px;
      position: absolute;
      left: 0;
      top: 0;
      cursor: pointer;
      transform: translate(calc(-100% - 60px), -150%);
      border-radius: 6px;
      padding: 20px;
      background-color: #FFFFFF;
      border: 1px solid
        #EF7E45;
      filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.14))
        drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.12)) drop-shadow(0px 1px 8px rgba(0, 0, 0, 0.2));
    }

    .quick-quote-callout.oc-callout {
      filter: unset;
    }

    .quick-quote-callout.quick-quote-callout-left {
      flex-direction: row-reverse;
    }

    .quick-quote-callout.animated {
      opacity: 0;
      pointer-events: none;
    }

    .quick-quote-button.oc-button .quick-quote-callout {
      display: flex;
      left: unset;
      top: 100%;

      transform-origin: right top; transform: rotate(90deg); right: 100%;
    }

    .quick-quote-callout-text-block {
      align-items: center;
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
      row-gap: 4px;
      width: 230px;
    }

    .quick-quote-button.oc-button .quick-quote-callout-text-block {
      width: 270px;
    }

    .quick-quote-callout-text-block.closable {
      display: none;
    }

    .quick-quote-callout-title {
      font-weight: 800;
      font-size: 22px;
      font-family: var(--font-family-primary);
      line-height: 26px;
      color: #2f2929ff;
      word-break: break-word;
      
  width: 100%;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 3;
;
      white-space: pre-wrap;
    }

    .quick-quote-button.oc-button .quick-quote-callout-title {
      font-size: 20px;
      line-height: 24px;
    }

    .quick-quote-callout-title:before {
      content: 'Need a roof quote?';
    }

    .quick-quote-callout-text {
      font-size: 20px;
      font-family: var(--font-family-primary);
      font-weight: normal;
      line-height: 22px;
      color: #2f2929ff;
      word-break: break-word;
      
  width: 100%;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 3;

    }

    .quick-quote-button.oc-button .quick-quote-callout-text {
      font-size: 16px;
      line-height: 18px;
    }

    .quick-quote-callout-text:before {
      content: 'Get your price NOW!';
    }

    .quick-quote-callout.with-arrow:before {
      content: '';
      position: absolute;
      background-color: inherit;
      width: 17px;
      height: 17px;
      border-top: 1px solid;
      border-right: 1px solid;
      border-color: #EF7E45;
      box-sizing: content-box;
      bottom: 12px;
      right: -10px; transform: rotate(45deg);
    }

    .quick-quote-button {
      position: absolute;
      display: flex;
      align-items: center;
      height: 43px;
      transform: translate(-50%, -100%) rotate(270deg);
      transform-origin: bottom;
      background-color: #fcb040;
      color: #FFFFFF;
      font-family: var(--font-family-primary);
      font-weight: 500;
      font-size: 24px;
      line-height: 26px;
      padding: 0 1px;
      cursor: pointer;
      white-space: nowrap;
    }

    .quick-quote-button.oc-button {
      height: 34px;
      font-size: 16px;
      line-height: 19px;
    }

    .quick-quote-button_right-img {
      position: absolute;
      right: 1px;
      top: 0;
      transform: translateX(100%);
      width: unset;
      height: unset;
    }

    .quick-quote-button.oc-button .quick-quote-button_right-img {
      transform: translate(85%, 0%) scale(0.8);
      transform-origin: top;
    }

    .quick-quote-button.oc-button .quick-quote-button_left-img {
      transform: translate(-85%, 0%) scale(0.8);
      transform-origin: top;
    }

    .quick-quote-button_left-img {
      position: absolute;
      left: 1px;
      top: 0;
      transform: translateX(-100%);
      width: unset;
      height: unset;
    }

    #quick-quote-button_right-img-path,
    #quick-quote-button_left-img-path {
      fill: #fcb040;
    }

    .quick-quote-button::after {
      right: 0;
    }

   .quick-quote-close-icon {
      filter: invert(79%) sepia(0%) saturate(13%) hue-rotate(335deg) brightness(79%) contrast(81%);;
    }

    .quick-quote-close {
      position: absolute;
      top: 20px;
      right: 20px;
      cursor: pointer;
      z-index: 1;
      display: inline-flex;
      width: 14px;
      height: 14px;
    }

    .quick-quote-callout-close-partially {
      display: initial;
    }

    .quick-quote-oc-button-text {
      margin: 0 20px 0 50px
    }

    
  .quick-quote-oc-panther {
    cursor: pointer;
    position: absolute;
    transform-origin: bottom;
    z-index: 1;

    transform: scale(0.8);
    top: -6px;

    right: 0px;;
  }


    .oc-callout .quick-quote-callout-image {
      
  width: 0px !important;
  min-width: 0px !important;
  max-width: 0px !important;
  height: 0px !important;
  min-height: 0px !important;
  max-height: 0px !important;

    }
    
    .oc-legal-text {
      color: #959595;
      font-family: var(--font-family-primary);
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
      margin-top: 16px;
    }

    @media (max-width: 599px) {
      
  
  .quick-quote-oc-panther {
    cursor: pointer;
    position: absolute;
    transform-origin: bottom;
    z-index: 1;

    transform: scale(0.8);
    top: -6px;

    right: -4px;;
  }

  
  .quick-quote-button.oc-button .quick-quote-callout {
    column-gap: 16px;
    padding: 14px;
  }

  .quick-quote-button.oc-button .quick-quote-callout .quick-quote-callout-title {
    font-size: 16px;
    line-height: 18px;
  }

  .quick-quote-button.oc-button .quick-quote-callout .quick-quote-callout-text {
    font-size: 14px;
    line-height: 14px;
  }

  .quick-quote-button.oc-button .quick-quote-callout .quick-quote-callout-image {
    margin-right: -8px !important;
  }


      .quick-quote-callout-image {
        
  width: 0px !important;
  min-width: 0px !important;
  max-width: 0px !important;
  height: 0px !important;
  min-height: 0px !important;
  max-height: 0px !important;

      }

      .quick-quote-callout-text-block.closable.quick-quote-callout-text-block_open {
        display: none;
      }

      .quick-quote-callout-close-partially {
        display: none;
      }

      .quick-quote-wrapper {
        width: 100%;
      }

      .quick-quote-close {
        top: 37px;
        right: 13px;
      }

      .quick-quote-callout {
        display: none;

        transform: translate(calc(-100% - 50px), -50%);
      }

      .quick-quote-drag-handle {
        height: 196px;
        width: 36px;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        left: 0px;
      }

      .quick-quote-drag-handle-inner {
        margin: 0
          22px 0 10px;
        height: 196px;
        width: 4px;
        background-color: #d6d1ca;
        border-radius: 11px;
      }

      
  #quick-quote-button.quick-quote-button {
    height: 30px;
    font-size: 16px;
    line-height: 19px;
  }

  #quick-quote-button.quick-quote-button .quick-quote-button_right-img {
    transform: translate(85%, 0%) scale(0.7);
    transform-origin: top;
  }

  #quick-quote-button.quick-quote-button .quick-quote-button_left-img {
    transform: translate(-85%, 0%) scale(0.7);
    transform-origin: top;
  }

    }

    @media (max-width: 1024px) {
      @media (orientation: landscape) {
        
  #quick-quote-button.quick-quote-button {
    height: 30px;
    font-size: 16px;
    line-height: 19px;
  }

  #quick-quote-button.quick-quote-button .quick-quote-button_right-img {
    transform: translate(85%, 0%) scale(0.7);
    transform-origin: top;
  }

  #quick-quote-button.quick-quote-button .quick-quote-button_left-img {
    transform: translate(-85%, 0%) scale(0.7);
    transform-origin: top;
  }

        
  
  .quick-quote-oc-panther {
    cursor: pointer;
    position: absolute;
    transform-origin: bottom;
    z-index: 1;

    transform: scale(0.7);
    top: -6px;

    right: -8px;;
  }

  
  .quick-quote-button.oc-button .quick-quote-callout {
    column-gap: 16px;
    padding: 14px;
  }

  .quick-quote-button.oc-button .quick-quote-callout .quick-quote-callout-title {
    font-size: 16px;
    line-height: 18px;
  }

  .quick-quote-button.oc-button .quick-quote-callout .quick-quote-callout-text {
    font-size: 14px;
    line-height: 14px;
  }

  .quick-quote-button.oc-button .quick-quote-callout .quick-quote-callout-image {
    margin-right: -8px !important;
  }

      }
    }