/*===========================================================
    File: formhero-ui-common.scss
    TABLE OF CONTENTS
    1) Breakpoints
    2) Gutters
    3) Material Design Add-ons and overrides
    4) Z-index
    5) Variables
    6) Fonts
    7) General
===========================================================*/
/* ===================================================================================== */
/* !BREAK POINTS */
body.formhero-scroll-block {
  overflow: hidden !important;
  position: fixed;
  width: 100%; }

/* Created by Ryan Kimber */
.formhero-overlay {
  position: fixed;
  transition: all 750ms linear !important;
  opacity: 0;
  transform: translateY(-100%);
  background-color: rgba(200, 200, 200, 0.5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5000; }
  .formhero-overlay.visible {
    opacity: 1; }
  .formhero-overlay.hidden {
    opacity: 0; }

.formhero-iframe-wrapper {
  position: fixed;
  height: 1px;
  min-height: 100vh;
  width: 1px;
  min-width: 100vw;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50000;
  opacity: 0;
  transition: all 750ms linear !important;
  transform: translateY(-110%); }
  .formhero-iframe-wrapper.visible {
    transform: translateY(0px);
    opacity: 1; }
  .formhero-iframe-wrapper.hidden {
    transform: translateY(-100%);
    opacity: 0; }

.formhero-iframe {
  width: 100%;
  height: 100%;
  height: 100vh;
  max-height: 100vh;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  z-index: 100; }

.embedded {
  position: relative;
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%; }

.formhero-iframe-wrapper div.spinner-container {
  position: fixed;
  margin: 20px 20px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: table;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: center; }

div.formhero-button-panel {
  position: fixed;
  right: 30px;
  top: 30px;
  z-index: 50000; }
  div.formhero-button-panel div.formhero-close-button,
  div.formhero-button-panel div.formhero-save-button,
  div.formhero-button-panel div.formhero-cancel-button {
    display: inline-block;
    margin: 10px 10px;
    padding: 5px 5px;
    background-color: #064418;
    border: 1px solid #022205;
    border-radius: 3px 3px;
    color: white;
    cursor: pointer;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box; }
    div.formhero-button-panel div.formhero-close-button i.fa,
    div.formhero-button-panel div.formhero-save-button i.fa,
    div.formhero-button-panel div.formhero-cancel-button i.fa {
      padding-right: 5px; }

.formhero-close-button {
  line-height: 1;
  /* Things move around if the page has a differnt line height, so force it here for the button. */
  border: 3px solid white;
  background: #000;
  border-radius: 50%;
  display: table-cell;
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 50001;
  color: #f0f0f0;
  font-size: 24pt;
  text-align: center;
  vertical-align: middle;
  width: 35px;
  height: 35px;
  cursor: pointer;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box; }

.formhero-close-button:before {
  content: '\2716'; }

.visible,
.hidden {
  overflow: hidden;
  /* This container should not have padding, borders, etc. */ }

.visible {
  visibility: visible;
  opacity: 1;
  transition: all 750ms linear !important; }

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: all 750ms linear !important; }

/* SVG Spinner Animation */
.spinner {
  animation: rotator 1.4s linear infinite; }

@keyframes rotator {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(270deg); } }

.path {
  stroke-dasharray: 187;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite; }

@keyframes colors {
  0% {
    stroke: #4285F4; }
  25% {
    stroke: #DE3E35; }
  50% {
    stroke: #F7C223; }
  75% {
    stroke: #1B9A59; }
  100% {
    stroke: #4285F4; } }

@keyframes dash {
  0% {
    stroke-dashoffset: 187; }
  50% {
    stroke-dashoffset: 46.75;
    transform: rotate(135deg); }
  100% {
    stroke-dashoffset: 187;
    transform: rotate(450deg); } }