@charset "UTF-8";

/* Custom Styles */

@-webkit-keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

@keyframes colorchange {
  0% {
    background: #ffa9a9;
  }

  50% {
    background: yellow;
  }

  100% {
    background: #ffa9a9;
  }
}

@-webkit-keyframes colorchange {
  0% {
    background: #ffa9a9;
  }

  50% {
    background: yellow;
  }

  100% {
    background: #ffa9a9;
  }
}

* {
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

body.shopping-floor-plan .floor-plan {
  width: 100%;
}

body.shopping-user form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

body.shopping-user #drop-area {
  border: 2px dashed #66ccff;
  border-radius: 20px;
  width: 300px;
  font-family: sans-serif;
  padding: 20px;
}

body.shopping-user #gallery {
  margin-top: 10px;
  flex-wrap: wrap;
  width: 300px;
}

body.shopping-user #gallery img {
  width: 140px;
  margin-bottom: 10px;
  margin-left: 5px;
  margin-right: 5px;
  vertical-align: middle;
  cursor: pointer;
}

body.shopping-user #fileElem {
  display: none;
}

body.shopping-user #main .pos_area {
  display: flex;
}

body.shopping-user #main .pos_area .imageThumbnail {
  width: 100px;
}

body.shopping-user #main .pos_area .column_1 {
  border: solid #66ccff 2px;
  padding: 10px;
  width: 500px;
}

body.shopping-user #main .pos_area .column_1 .singleImageLarge {
  width: 100%;
}

body.shopping-user #main .pos_area .column_2 .buttons {
  padding: 5px 5px 50px 5px;
  display: flex;
  flex-direction: column;
}

body.shopping-user #main .pos_area .column_2 .buttons .btn {
  margin-bottom: 5px;
}

body.shopping-user #main .pos_area .column_3 .metadataForm {
  display: flex;
  flex-direction: column;
}

body.shopping-user #main .pos_area .column_3 .metadataForm.hidden {
  display: none;
}

body.shopping-user #main .pos_area .column_3 .wallLayout {
  display: flex;
  align-items: flex-start;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .floorPlanFooter,
body.shopping-user #main .pos_area .column_3 .wallLayout .gridContainerFooter {
  border-top: solid 1px #000;
  padding: 10px;
  position: relative;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .floorPlanFooter .colorChanger,
body.shopping-user #main .pos_area .column_3 .wallLayout .gridContainerFooter .colorChanger {
  top: 5px;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .floorPlanFooter .fullscreenEnabled,
body.shopping-user #main .pos_area .column_3 .wallLayout .gridContainerFooter .fullscreenEnabled {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 123;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .left,
body.shopping-user #main .pos_area .column_3 .wallLayout .right {
  border: solid 1px #000;
  display: flex;
  flex-direction: column;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .left .tileSizes {
  display: flex;
  border-bottom: solid #000 1px;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .left .tileSizes .tileSize {
  border: solid #000 1px;
  color: #66ccff;
  margin: 5px;
  padding: 5px;
  cursor: pointer;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .left .gridContainer {
  padding: 10px;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .left .gridContainer.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 123;
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  justify-content: center;
  background: #000;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .left .gridContainer.fullscreen .grid.grid2x2 {
  width: 100%;
  max-width: 100vh;
  height: 100%;
  max-height: 100vw;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .left .gridContainer.fullscreen .grid.grid2x2 .gridTile {
  height: 50%;
  width: 50%;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .left .gridContainer.fullscreen .grid.grid1x1 .gridTile {
  width: 100%;
  max-width: 100vh;
  height: 100%;
  max-height: 100vw;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .left .gridContainer.fullscreen .grid.grid3x3 {
  width: 100%;
  max-width: 100vh;
  height: 100%;
  max-height: 100vw;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .left .gridContainer.fullscreen .grid.grid3x3 .gridTile {
  height: 33.3333%;
  width: 33.3333%;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .left .gridContainer .grid.grid1x1 .gridTile {
  width: 300px;
  height: 300px;
  border: solid #000 2px;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .left .gridContainer .grid.grid2x2 {
  width: calc(300px + 2px);
  display: flex;
  flex-wrap: wrap;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .left .gridContainer .grid.grid2x2 .gridTile {
  width: 150px;
  height: 150px;
  border: solid #000 2px;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .left .gridContainer .grid.grid3x3 {
  width: calc(300px + 2px);
  display: flex;
  flex-wrap: wrap;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .left .gridContainer .grid.grid3x3 .gridTile {
  width: 100px;
  height: 100px;
  border: solid #000 2px;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .left .gridContainer .grid .gridTile.active {
  border-color: #66ccff;
  background: #f0f8ff;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .right {
  margin-left: 10px;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .right .titleBar {
  border-bottom: solid #000 1px;
  padding: 10px;
  color: #66ccff;
  font-weight: bold;
  font-size: 20px;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .right .floorPlan {
  padding: 10px;
}

body.shopping-user #main .pos_area .column_3 .wallLayout .right .floorPlan > img {
  width: 300px;
}

body.shopping #main {
  background: #000;
  padding: 0;
}

body.shopping #main .my-acct-btn {
  margin-left: 20px;
  white-space: nowrap;
}

body.shopping #main .products {
  display: flex;
  flex-wrap: wrap;
}

body.shopping #main .products .product {
  width: 225px;
  border: 1px solid #e5e8eb;
  border-radius: 5px;
  padding: 5px;
  margin: 9px;
  background: #eee;
}

body.shopping #main .products .product .image {
  display: flex;
  justify-content: center;
  height: 245px;
  width: 210px;
}

body.shopping #main .products .product .image > img {
  max-height: 245px;
  max-width: 210px;
  border-radius: 5px;
  -o-object-fit: contain;
     object-fit: contain;
}

body.shopping #main .products .product .product_info_wrap {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
}

body.shopping #main .products .product .artist_title_wrap .artist {
  color: #666;
  font-size: 12px;
}

body.shopping #main .products .product .artist_title_wrap .title {
  font-size: 14px;
}

body.shopping #main .products .product .price .label {
  color: #666;
  font-size: 12px;
}

body.shopping #main .products .product .price .amount {
  font-size: 14px;
}

body.shopping .PaymentFilter--item {
  display: flex;
  align-items: center;
}

body.shopping .PaymentFilter--item > input {
  margin-right: 8px;
}

body.shopping .CategoryBar--tabs {
  height: 66px;
  overflow: auto;
  background-color: white;
  border-bottom: 1px solid #e5e8eb;
  display: flex;
  padding: 12px 20px;
  position: sticky;
  z-index: 4;
}

body.shopping .CategoryBar--tabs .CategoryBar--tab-item {
  padding: 0px 20px;
  flex-shrink: 0;
  margin: 0px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.shopping .CategoryBar--tabs .CategoryBar--tab-item .TabNavItem--name {
  display: block;
  margin-left: 8px;
  color: #8a939b;
}

body.shopping .CategoryBar--tabs .CategoryBar--tab-item .Image--image {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transition: opacity 400ms ease 0s;
  width: 100%;
}

body.shopping .Panel--panel .Panel--isContentPadded {
  padding: 20px;
}

body.shopping .Panel--panel .BasePanel--header {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  font-weight: 600;
  padding: 20px 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-top: 1px solid #e5e8eb;
  border-right: 1px solid #e5e8eb;
  border-left: 1px solid #e5e8eb;
  -o-border-image: initial;
     border-image: initial;
  background-color: white;
  border-bottom: none;
  border-radius: 5px 5px 0px 0px;
}

body.shopping .Panel--panel .BasePanel--header .Panel--icon {
  margin-right: 10px;
}

body.shopping .Panel--panel .BasePanel--header .Panel--toggle {
  margin-left: auto;
  color: rgba(14, 14, 14, 0.5);
}

body.shopping .AssetSearchView--main {
  display: flex;
}

body.shopping .AssetSearchView--main .AssetSearchView--main .AssetsSearchView--assets {
  padding: 16px 28px;
}

body.shopping .AssetSearchView--main .AssetSearchView--main .AssetsSearchView--assets .Blockreact__Block-sc-18q9hu0-0 {
  display: flex;
  flex-wrap: wrap;
}

body.shopping .AssetSearchView--main .AssetSearchView--main .AssetsSearchView--assets .Blockreact__Block-sc-18q9hu0-0 .AssetSearchList--asset {
  height: 100%;
  background-color: white;
  border: 1px solid #e5e8eb;
  border-radius: 5px;
  position: relative;
}

body.shopping .AssetSearchView--main .AssetSearchView--main .AssetsSearchView--assets .Blockreact__Block-sc-18q9hu0-0 .AssetSearchList--asset .Asset--anchor {
  pointer-events: initial;
}

body.shopping .AssetSearchView--main .AssetSearchView--main .AssetsSearchView--assets .Blockreact__Block-sc-18q9hu0-0 .AssetSearchList--asset .Asset--anchor > header {
  background: white;
  padding: 12px 16px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  justify-content: space-between;
  display: flex;
}

body.shopping .AssetSearchView--main .AssetSearchView--main .AssetsSearchView--assets .Blockreact__Block-sc-18q9hu0-0 .AssetSearchList--asset .Asset--anchor > header > span {
  font-size: 12px;
  font-weight: 500;
  color: #8a939b;
}

body.shopping .AssetSearchView--main .AssetSearchView--results .AssetSearchView--results-header {
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0px 32px;
  display: flex;
  margin: 8px auto 16px;
  max-width: calc(88vw);
}

body.shopping .AssetSearchView--main .AssetSearchView--results .AssetSearchView--results-header .AssetSearchView--results-header-dropdowns {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  z-index: 3;
  max-width: 100%;
}

body.shopping .AssetSearchView--main .AssetSearchView--results .AssetSearchView--results-header .AssetSearchView--results-header-dropdowns .AssetSearchView--results-header-dropdown {
  margin: 0px 8px 0px 0px;
}

body.shopping .AssetSearchView--main .AssetSearchView--results .AssetSearchView--results-header .AssetSearchView--results-header-dropdowns .AssetSearchView--results-header-dropdown .Dropdown--content-container {
  position: relative;
  border-radius: 5px;
  border: 1px solid #e5e8eb;
  overflow: hidden;
}

body.shopping .AssetSearchView--main .AssetSearchView--results .AssetSearchView--results-header .AssetSearchView--results-header-dropdowns .AssetSearchView--results-header-dropdown .Dropdown--content-container .Dropdown--header {
  background: white;
  color: #0e0e0e;
  align-items: center;
  display: flex;
  height: 48px;
  justify-content: space-between;
  padding: 0px 12px;
}

body.shopping .AssetSearchView--main .AssetSearchView--results .AssetSearchView--results-header .Dropdown--content-container .Dropdown--items {
  background: white;
  color: #0e0e0e;
  max-height: 0px;
  margin: 0px;
  overflow-y: auto;
}

body.shopping .AssetSearchView--main .SearchFilter--main {
  width: 340px;
  background-color: #fbfdff;
  border-right: 1px solid #e5e8eb;
}

body.shopping .AssetSearchView--main .SearchFilter--main .FeaturedFilter--items {
  display: flex;
  flex-flow: wrap;
  width: 300px;
}

body.shopping .AssetSearchView--main .SearchFilter--main .FeaturedFilter--items .FeaturedFilter--item {
  align-items: center;
  border: 1px solid #e5e8eb;
  border-radius: 5px;
  color: #353840;
  background-color: white;
  display: flex;
  height: 40px;
  margin: 4px;
  padding: 10px;
  width: calc(50% - 8px);
  cursor: pointer;
}

body.bannerOffset {
  padding-top: 44px;
}

body.bannerOffset.plan-page .main_header,
body.bannerOffset .sidenav {
  top: 44px;
}

body.isDemoProject.demoPdfsAdded #importPlans,
body.isDemoProject:not(.walkthroughRunning) #importPlans {
  pointer-events: none;
}

body.isDemoProject.plan-page #pdfUploader {
  display: none;
}

body.walkthroughRunning.demo1AddingDemoPdf .modal-header .close,
body.walkthroughRunning.demo1AddingDemoPdf .modal-footer .btn {
  display: none;
}

body.walkthroughRunning.plan-page .main_header {
  position: static;
}

body.walkthroughRunning.plan-page #main {
  margin-top: 0;
}

body.walkthroughRunning.plan-page .modal {
  position: static;
  padding-top: 0;
  z-index: 9999999;
}

body.walkthroughRunning.plan-page .modal .modal-content {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 21123312;
}

#saveCanvasImage,
#export-btn {
  display: none;
}

.trialBanner {
  z-index: 5000;
  position: fixed;
  width: 100%;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 1px;
  bottom: 0;
  background: #2d66f5;
  color: #fff;
}

.trialBanner .buy-now-btn {
  color: #fff;
  background: #32cd32;
  padding: 5px 10px;
  border-radius: 16px;
}

.trialBanner .buy-now-btn:hover {
  background-color: #fff;
  color: #32cd32;
  text-decoration: none;
}

.billing .plan {
  width: 300px;
  background: #fff;
  border-radius: 25px;
  text-align: center;
  padding-bottom: 10px;
  border: solid 2px #000;
}

.billing .plan .planName {
  font-size: 30px;
  font-weight: bold;
  display: flex;
  background: #ddd;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  padding: 10px;
  justify-content: center;
}

.billing .plan .planName .icon {
  width: 140px;
}

.billing .plan .price {
  font-weight: bold;
  font-size: 24px;
}

.billing .plan .annualPrice {
  font-size: 12px;
}

.billing #payment-form .card_submit {
  margin-top: 10px;
  border-radius: 20px;
  padding: 5px 10px;
  background: #b2b9ff;
  border-color: #000;
}

.billing #payment-form .card_submit:hover {
  background: #fff;
}

#app .hero,
#app .registration,
.homepage .hero,
.homepage .registration {
  padding: 50px;
  background-color: #000000;
  background-image: linear-gradient(180deg, #000000 0%, #003363 100%);
}

#app .hero .container.container__login,
.homepage .hero .container.container__login {
  padding-top: 50px;
}

#app .hero .header,
.homepage .hero .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#app .hero .header .logo-tagline-wrapper,
.homepage .hero .header .logo-tagline-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#app .hero .header .logo-tagline-wrapper .red,
.homepage .hero .header .logo-tagline-wrapper .red {
  color: red;
}

#app .hero .header .logo-tagline-wrapper .tagline,
.homepage .hero .header .logo-tagline-wrapper .tagline {
  color: #fff;
  margin-top: 10px;
  font-family: sans-serif;
  letter-spacing: 1px;
  font-size: 14px;
}

#app .hero .navbar,
.homepage .hero .navbar {
  background-color: transparent;
}

#app .hero .navbar > ul,
.homepage .hero .navbar > ul {
  display: flex;
  list-style: none;
}

#app .hero .navbar > ul > a,
.homepage .hero .navbar > ul > a {
  text-decoration: none;
  color: #fff;
  margin-left: 10px;
  margin-right: 10px;
}

#app .hero .navbar > ul > a:hover,
#app .hero .navbar > ul > a.active,
.homepage .hero .navbar > ul > a:hover,
.homepage .hero .navbar > ul > a.active {
  color: #ffa500;
}

#app .hero .navbar > ul > a.inactive,
.homepage .hero .navbar > ul > a.inactive {
  color: #999;
}

#app .hero .main,
.homepage .hero .main {
  display: flex;
  align-items: center;
}

#app .hero .main > div,
.homepage .hero .main > div {
  width: 100%;
}

#app .hero .main .details,
.homepage .hero .main .details {
  color: #fff;
  text-align: center;
  margin-top: 30px;
  font-size: 22px;
}

#app .hero .main .mini-separator,
.homepage .hero .main .mini-separator {
  width: 80px;
  border-top: solid #2d66f5 3px;
  margin-top: 50px;
  margin-bottom: 50px;
}

#app .hero .main .buttons,
.homepage .hero .main .buttons {
  margin-top: 30px;
  display: flex;
}

#app .hero .main .buttons > a,
.homepage .hero .main .buttons > a {
  text-decoration: none;
}

#app .hero .main .buttons .btn,
.homepage .hero .main .buttons .btn {
  padding: 10px 20px;
  color: #fff;
  background-color: #2d66f5;
  border-radius: 35px;
}

.homepage {
  padding: 0;
  margin: 0;
}

.homepage .signUpBtnSeparator {
  width: 100%;
  background: #000;
  height: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  position: relative;
  top: -8px;
  margin-bottom: 8px;
}

.homepage .signUpBtnSeparator.bottom {
  top: 8px;
}

.homepage .signUpBtnSeparator .btn {
  margin-right: 0;
  background-color: #029c33;
  cursor: pointer;
}

.homepage .btn_link {
  text-decoration: none;
}

.homepage .btn {
  margin-right: 15px;
  padding: 10px 20px;
  color: #fff;
  background-color: #2d66f5;
  border-radius: 35px;
}

.homepage .registration .logo_column {
  align-items: center;
}

.homepage .registration .form_column .form_container {
  padding: 20px;
  background: #ddd;
  border-radius: 35px;
  text-align: center;
}

.homepage .registration .form_column .form_container .form-control {
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 10px;
  border-color: #ddd;
  width: 250px;
}

.homepage .registration .form_column .form_container .invalid-feedback {
  display: block;
  color: red;
  margin-bottom: 10px;
}

.homepage .registration .form_column .form_container .btn {
  margin-top: 10px;
  display: block;
}

.homepage .video {
  display: flex;
}

.homepage .video > iframe {
  width: 50%;
  height: 500px;
  margin: 0 auto;
}

.homepage .heading {
  margin-top: 20px;
  font-weight: bold;
  text-align: center;
}

.homepage .h2 {
  text-align: center;
}

.homepage .services {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 50px;
}

.homepage .services .service-listing {
  width: 800px;
  margin-top: 30px;
  display: flex;
  align-items: center;
}

.homepage .services .service-listing .image {
  width: 30%;
}

.homepage .services .service-listing .image > img {
  width: 80%;
  border-radius: 50%;
  height: 150px;
  -o-object-fit: cover;
     object-fit: cover;
}

.homepage .services .service-listing .details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 70%;
}

.homepage .services .service-listing .details .number {
  font-weight: bold;
  font-size: 40px;
  color: #999;
}

.homepage .services .service-listing .details .service {
  font-weight: bold;
  font-size: 18px;
}

.homepage .services .service-listing .details .btn {
  margin-top: 10px;
}

.homepage .why-choose-us {
  background: #ddd;
}

.homepage .why-choose-us .reasons {
  display: flex;
  justify-content: center;
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.homepage .why-choose-us .reasons .reason {
  text-decoration: none;
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-basis: 33.3%;
  background: #eee;
  border-radius: 15px;
  padding: 40px 20px;
  margin: 15px;
  box-shadow: 3px 3px 5px 6px #ccc;
  text-align: center;
}

.homepage .why-choose-us .reasons .reason:hover {
  background-color: #ccc;
  box-shadow: 3px 3px 5px 6px #999;
}

.homepage .why-choose-us .reasons .reason .icon > i {
  font-size: 42px;
  color: #2d66f5;
}

.homepage .why-choose-us .reasons .reason .text {
  margin-top: 10px;
  font-weight: bold;
}

.homepage .why-choose-us .reasons .reason .description {
  margin-top: 10px;
}

.homepage .registration {
  display: flex;
}

.homepage .registration > div {
  flex-basis: 50%;
  display: flex;
  justify-content: center;
}

.homepage .homepage-footer {
  background-color: #fff;
  padding: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.homepage .homepage-footer .navbar {
  background-color: transparent;
}

.homepage .homepage-footer .navbar > ul {
  display: flex;
}

.homepage .homepage-footer .navbar > ul > a {
  list-style: none;
  text-decoration: none;
}

.homepage .homepage-footer .navbar > ul > a:hover {
  text-decoration: underline;
}

.homepage .homepage-footer .navbar > ul > a.inactive > li {
  color: #999;
}

.homepage .homepage-footer .navbar > ul > a > li {
  margin: 5px;
  color: #000;
}

.contactLightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}

.contactLightbox .lightboxContent {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: solid 3px #000;
  border-radius: 35px;
  width: 400px;
  height: 400px;
}

.contactLightbox .lightboxContent > a {
  font-weight: bold;
  color: #66ccff;
}

#app .main-container .container {
  padding: 30px;
}

.toolbarContainer {
  display: flex;
  min-height: 40px;
}

.hero-split {
  display: flex;
}

.hero-split .left,
.hero-split .right {
  width: 50%;
}

.hero-split .left {
  padding: 30px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #476cb5;
}

.hero-split .left > h1 {
  text-align: center;
  margin-bottom: 15px;
}

.hero-split .left .subtitle {
  text-align: center;
  font-size: 24px;
  margin-bottom: 15px;
}

.hero-split .left .list {
  font-weight: bold;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.hero-split .left .list .numberCircle {
  margin-right: 10px;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding: 3px;
  background: #fff;
  border: 2px solid #666;
  color: #666;
  text-align: center;
  font-size: 18px;
}

.hero-split .left .disclaimer {
  font-size: 10px;
  margin-top: 3em;
}

.hero-split .right {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
}

.hero-split .right .logo {
  max-width: 100%;
}

.navbar {
  background-color: #ddd;
}

.notificationBanner {
  transition: all linear 1s;
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 20px;
  position: fixed;
  height: 50px;
  top: -50px;
  width: 100%;
  z-index: 5000;
}

.notificationBanner.active {
  transition: all linear 1s;
  top: 0;
}

.notificationBanner.info {
  background: #66ccff;
  color: #fff;
}

.notificationBanner.error {
  background: red;
  color: #fff;
}

.navbar-brand .logo {
  height: 60px;
}

.canvas {
  /* cursor: crosshair; */
  /* cursor: url('assets/cursor.cur'), crosshair; */
}

#canvas-tools {
  /* cursor: url(assets/cursor.cur, crosshair); */
  /* cursor: po/inter; */
  /* background: url('/converted.jpg'); */
  /* background-size: cover; */
}

#verticalAxis {
  width: 1px;
  height: 100%;
  background: green;
}

.noPlans #mySidenav .menuItem.importPlans {
  color: #66ccff;
}

.cantSaveBanner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  justify-content: center;
  background: green;
  color: #fff;
  padding: 10px;
  z-index: 2;
}

.shareTokenOnly .cantSaveBanner,
.privRead .cantSaveBanner {
  display: flex;
}

.shareTokenOnly .main_header,
.privRead .main_header {
  margin-top: 43px;
}

#mySidenav .menuItem.shareTokenOnly {
  display: none;
}

.sharedProjectForm .btn {
  display: none;
}

.shareToken .sidenav .menuItem.backToProjectLink {
  display: none;
}

.shareToken.get-started .sidenav .menuItem.backToProjectLink {
  display: block;
}

.shareToken #mySidenav .menuItem.authRequired {
  display: none;
}

.shareToken #mySidenav .shareTokenOnly {
  display: block;
}

.shareToken #saveProject {
  display: none;
}

.shareToken .chat.card > textarea,
.shareToken .chat.card .submit {
  display: none;
}

.privRead #saveProject {
  display: none;
}

.privRead .menuItem.writeAccessRequired,
.privRead .writeAccessRequired {
  display: none;
}

.draw .not-draw {
  display: none !important;
}

.default .not-default {
  display: none !important;
}

.noProject #menuAndInterface,
.noProject .menuItem.projectRequired,
.noProject .projectRequired {
  display: none;
}

.noProject #saveProject,
.noProject #projectTitle {
  display: none;
}

.noProject .website_example {
  display: block;
  width: 100%;
  max-width: 1600px;
}

.website_example {
  display: none;
}

.main_header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: #ddd;
  height: 115px;
  border-bottom: #000 2px solid;
}

.main_header.planpage {
  height: 110px;
}

.main_header #drawingStatus {
  font-size: 13px;
  font-weight: bold;
  padding: 3px;
  color: green;
}

.main_header .icon > img {
  height: 40px;
}

.main_header .middle {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.main_header .middle .title {
  font-size: 28px;
}

.interfaceRow {
  display: inline-flex;
  border: solid #000 2px;
  background: rgba(255, 255, 255, 0.4);
}

.interfaceRow .canvas-wrapper .canvasTutorialGif {
  position: absolute;
  top: 0;
  width: 100%;
}

.interfaceRow .toolbar .header {
  height: auto;
  display: flex;
  background-color: #ddd;
  font-weight: bold;
  font-size: 1.1em;
  padding: 5px;
  border-bottom: 1px solid #000;
}

.interfaceRow .toolbar .header .title {
  margin-right: 10px;
}

.interfaceRow .rightToolbar {
  border-left: solid #000 2px;
  width: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.interfaceRow .rightToolbar .patternToolbar {
  display: flex;
  flex-direction: column;
  opacity: 1;
  background-color: #66ccff;
  padding: 2px;
  flex-wrap: wrap;
}

.interfaceRow .rightToolbar .patternToolbar.disabled {
  display: none;
}

.interfaceRow .rightToolbar .patternToolbar .itemGroup {
  display: flex;
}

.interfaceRow .rightToolbar .patternToolbar .item {
  padding: 3px;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
  margin: 2px;
  display: flex;
  align-items: center;
}

.interfaceRow .rightToolbar .toolbarContent .wallData {
  cursor: pointer;
}

.interfaceRow .rightToolbar .toolbarContent .wallData:hover {
  background-color: #f0f8ff;
}

.interfaceRow .leftToolbar {
  border-right: solid #000 2px;
  width: 350px;
}

.interfaceRow .leftToolbar .buttons {
  background-color: #ddd;
}

.interfaceRow .leftToolbar .buttons .button {
  margin: 3px;
  height: 20px;
  width: 20px;
}

.interfaceRow .leftToolbar .search {
  display: none;
  padding: 5px;
  background-color: #ddd;
}

.interfaceRow .leftToolbar .pages .page.active .page_header {
  background-color: #66ccff;
}

.interfaceRow .leftToolbar .pages .page .page_header {
  cursor: pointer;
  display: flex;
}

.interfaceRow .leftToolbar .pages .page .page_header .page_title {
  margin-left: 3px;
  width: 100%;
}

.interfaceRow .leftToolbar .pages .page .page_header .page_title > input {
  width: 100%;
}

.interfaceRow .leftToolbar .pages .page .icon {
  height: 15px;
  width: 15px;
  background-size: contain;
}

.interfaceRow .leftToolbar .pages .page .icon.expand_icon {
  background-image: url("/assets/toolbar_icons/minus-50.png");
  background-repeat: no-repeat;
}

.interfaceRow .leftToolbar .pages .page .icon.expand_icon.expanded {
  background-image: url("/assets/toolbar_icons/plus-50.png");
}

.interfaceRow .leftToolbar .pages .page .icon.page_icon {
  background-image: url("/assets/toolbar_icons/page-40.png");
  margin-left: 3px;
}

.interfaceRow .leftToolbar .pages .page .icon.shape_icon,
.interfaceRow .leftToolbar .pages .page .icon.group_icon {
  background-image: url("/assets/toolbar_icons/pentagon-48.png");
  margin-left: 16px;
}

.interfaceRow .leftToolbar .pages .page .group {
  display: flex;
}

.interfaceRow .leftToolbar .pages .page .shape {
  display: none;
}

.interfaceRow .leftToolbar .pages .page .shape,
.interfaceRow .leftToolbar .pages .page .group {
  justify-content: space-between;
  cursor: pointer;
}

.interfaceRow .leftToolbar .pages .page .shape:hover,
.interfaceRow .leftToolbar .pages .page .group:hover {
  background: #f0f8ff;
}

.interfaceRow .leftToolbar .pages .page .shape.active,
.interfaceRow .leftToolbar .pages .page .group.active {
  background: #f0f8ff;
}

.interfaceRow .leftToolbar .pages .page .shape .shape_title,
.interfaceRow .leftToolbar .pages .page .shape .group_title,
.interfaceRow .leftToolbar .pages .page .group .shape_title,
.interfaceRow .leftToolbar .pages .page .group .group_title {
  margin-left: 3px;
}

.interfaceRow .leftToolbar .pages .page .shape .left,
.interfaceRow .leftToolbar .pages .page .group .left {
  display: flex;
}

.interfaceRow .leftToolbar .pages .page .shape .right,
.interfaceRow .leftToolbar .pages .page .group .right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.interfaceRow .leftToolbar .pages .page .shape .right .toolbarShapeData,
.interfaceRow .leftToolbar .pages .page .shape .right .toolbarGroupData,
.interfaceRow .leftToolbar .pages .page .group .right .toolbarShapeData,
.interfaceRow .leftToolbar .pages .page .group .right .toolbarGroupData {
  display: flex;
}

.interfaceRow .leftToolbar .pages .page .shape .right .toolbarShapeData .units,
.interfaceRow .leftToolbar .pages .page .shape .right .toolbarGroupData .units,
.interfaceRow .leftToolbar .pages .page .group .right .toolbarShapeData .units,
.interfaceRow .leftToolbar .pages .page .group .right .toolbarGroupData .units {
  display: flex;
  margin-left: 10px;
}

.interfaceRow .leftToolbar .pages .page .shape .right .toolbarShapeData .units.hidden,
.interfaceRow .leftToolbar .pages .page .shape .right .toolbarGroupData .units.hidden,
.interfaceRow .leftToolbar .pages .page .group .right .toolbarShapeData .units.hidden,
.interfaceRow .leftToolbar .pages .page .group .right .toolbarGroupData .units.hidden {
  display: none;
}

.interfaceRow .leftToolbar .pages .page .shape .right .toolbarShapeData .units:not(.hidden) + .units,
.interfaceRow .leftToolbar .pages .page .shape .right .toolbarGroupData .units:not(.hidden) + .units,
.interfaceRow .leftToolbar .pages .page .group .right .toolbarShapeData .units:not(.hidden) + .units,
.interfaceRow .leftToolbar .pages .page .group .right .toolbarGroupData .units:not(.hidden) + .units {
  margin-left: 0;
}

.interfaceRow .leftToolbar .pages .page .shape .right .toolbarShapeData .units:not(.hidden) + .units:before,
.interfaceRow .leftToolbar .pages .page .shape .right .toolbarGroupData .units:not(.hidden) + .units:before,
.interfaceRow .leftToolbar .pages .page .group .right .toolbarShapeData .units:not(.hidden) + .units:before,
.interfaceRow .leftToolbar .pages .page .group .right .toolbarGroupData .units:not(.hidden) + .units:before {
  content: "|";
}

.interfaceRow .leftToolbar .pages .page .shape .right .toolbarShapeData .units .unitslabel,
.interfaceRow .leftToolbar .pages .page .shape .right .toolbarGroupData .units .unitslabel,
.interfaceRow .leftToolbar .pages .page .group .right .toolbarShapeData .units .unitslabel,
.interfaceRow .leftToolbar .pages .page .group .right .toolbarGroupData .units .unitslabel {
  font-size: 0.8em;
}

.interfaceRow .leftToolbar .pages .page .shape .right .toolbarShapeData .colorbox,
.interfaceRow .leftToolbar .pages .page .shape .right .toolbarGroupData .colorbox,
.interfaceRow .leftToolbar .pages .page .group .right .toolbarShapeData .colorbox,
.interfaceRow .leftToolbar .pages .page .group .right .toolbarGroupData .colorbox {
  width: 14px;
  height: 14px;
  margin-left: 3px;
  margin-right: 3px;
  border: solid 1px #000;
}

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }

  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }

  to {
    top: 0;
    opacity: 1;
  }
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 999;
  /* Sit on top (except color picker 1000)*/
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: black;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
}

.modal .modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
}

.modal .modal-content .modal-header {
  background-color: #66ccff;
  color: white;
}

.modal .modal-content .modal-body {
  padding: 30px;
}

.modal .modal-content .modal-body .modalWrapper .customScaleWrapper .customScaleInput {
  width: 50px;
}

.modal .modal-content .modal-body .modalWrapper .loadStatus > div {
  margin-left: 40px;
}

.modal .modal-content .modal-body .modalWrapper .loadStatus > div:before {
  content: "\2713";
  position: absolute;
  left: 0;
  margin-left: 30px;
  color: #66ccff;
}

.modal .modal-content .modal-body .modalWrapper .loadStatus > div.loading:before {
  content: "";
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border-top: 2px solid #07d;
  border-right: 2px solid transparent;
  -webkit-animation: spinner 0.6s linear infinite;
          animation: spinner 0.6s linear infinite;
}

.modal .modal-content .modal-body .modalWrapper .loadStatus .complete {
  font-weight: bold;
  line-height: 2em;
  color: green;
  font-size: 1.5em;
  opacity: 0;
}

.modal .modal-content .modal-body .modalWrapper .dynamicFilenamesContainer {
  margin-top: 10px;
}

.modal .modal-content .modal-body .modalWrapper .previousColorWrapper {
  margin-left: 100px;
}

.modal .modal-content .modal-body .modalWrapper label {
  display: flex;
  text-align: right;
}

.modal .modal-content .modal-body .modalWrapper label:not(:first-child) {
  margin-top: 10px;
}

.modal .modal-content .modal-body .modalWrapper label > input[name=colorPicker] {
  color: transparent !important;
}

.modal .modal-content .modal-body .modalWrapper label > div {
  width: 100px;
}

.modal .modal-content .modal-body .modalWrapper .wallHeightWrapper {
  margin-left: 7px;
}

.modal .modal-content .modal-body .modalWrapper .wallHeightWrapper > label {
  display: flex;
}

.modal .modal-content .modal-body .modalWrapper .wallHeightWrapper > label > input {
  width: 10%;
}

.modal .modal-content .modal-body .modalWrapper #uploadProgressBar {
  display: none;
}

.modal .modal-content .modal-body .modalWrapper #uploadSpinner {
  display: none;
}

.modal .modal-content .modal-body .modalWrapper #uploadSpinner:before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border-top: 2px solid #07d;
  border-right: 2px solid transparent;
  -webkit-animation: spinner 0.6s linear infinite;
          animation: spinner 0.6s linear infinite;
}

.modal .modal-content .modal-body .modalWrapper .file_list {
  display: flex;
  justify-content: space-between;
}

.modal .modal-content .modal-body .modalWrapper .file_list:nth-child(even) {
  background-color: #f0f8ff;
}

.modal .modal-content .modal-body .modalWrapper .file_list.active {
  background-color: #66ccff;
}

.modal .modal-content .modal-body .modalWrapper .file_list .file_to_open,
.modal .modal-content .modal-body .modalWrapper .file_list .file_to_delete {
  padding: 5px;
  cursor: pointer;
}

.modal .modal-content .modal-body .modalWrapper .file_list .file_to_open:hover {
  text-decoration: underline;
}

.modal .modal-content .modal-body .modalWrapper .file_list .file_to_delete {
  color: red;
}

.modal .modal-content .modal-body .modalWrapper .file_list .file_to_delete:hover {
  text-decoration: underline;
}

.modal .modal-content .modal-body .modalWrapper .previousColorWrapper {
  display: flex;
}

.modal .modal-content .modal-body .modalWrapper .previousColorWrapper .previousColor {
  width: 20px;
  height: 20px;
  margin-left: 3px;
  cursor: pointer;
  border: solid #000 1px;
}

.modal .modal-content .modal-footer {
  padding: 2px 16px;
  background-color: #66ccff;
  color: white;
}

.modal .modal-content .modal-footer .btn.hidden {
  display: none;
}

#pdfUploader > input {
  display: block;
}

#pages {
  overflow: scroll;
}

.projectTitleRow {
  display: flex;
  align-items: center;
}

#projectTitle {
  width: 500px;
}

.restartWalkthroughBtn {
  margin-left: 20px;
}

#mainMenu .buttonContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#mainMenu .buttonContainer .dropdown-menu .dropdown-item.quality-dropdown {
  display: flex;
}

#mainMenu .buttonContainer .dropdown-menu .dropdown-item.quality-dropdown .quality-options {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

#mainMenu .buttonContainer .dropdown-menu .dropdown-item.quality-dropdown .quality-options .option {
  cursor: pointer;
  width: 60px;
  text-align: center;
}

#mainMenu .buttonContainer .dropdown-menu .dropdown-item.quality-dropdown .quality-options .option.active {
  background-color: #66ccff;
}

#mainMenu .buttonContainer .dropdown-menu .dropdown-item.quality-dropdown .quality-options .option:hover {
  background-color: #66ccff;
}

#mainMenu #scaleChooser.noScale {
  animation: colorchange 10s infinite;
  -webkit-animation: colorchange 10s infinite;
}

#mainMenu #scaleChooser.disabled {
  pointer-events: none;
  background: #aaa;
  -webkit-animation: none;
          animation: none;
}

.lds-dual-ring {
  display: none;
  width: 64px;
  height: 64px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -32px;
  margin-top: -32px;
}

.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 46px;
  height: 46px;
  margin: 1px;
  border-radius: 50%;
  border: 5px solid #ddd;
  border-color: #ddd transparent #ddd transparent;
  -webkit-animation: lds-dual-ring 1.2s linear infinite;
          animation: lds-dual-ring 1.2s linear infinite;
}

@-webkit-keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.iw-contextMenu .infoOnly.iw-mDisable {
  opacity: 1;
}

.iw-contextMenu .infoOnly.iw-mDisable .iw-mOverlay {
  display: none;
}

.pan_bar {
  background: rgba(0, 0, 255, 0.3);
  height: 20px;
  width: 20px;
  z-index: 1;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pan_bar:hover {
  background: rgba(0, 0, 255, 0.7);
}

.pan_bar.pan_bar_top {
  cursor: n-resize;
  width: 200px;
  left: 50%;
  margin-left: -100px;
  top: 0;
}

.pan_bar.pan_bar_bottom {
  cursor: s-resize;
  width: 200px;
  left: 50%;
  margin-left: -100px;
  bottom: 0;
}

.pan_bar.pan_bar_left {
  cursor: w-resize;
  height: 200px;
  top: 50%;
  margin-top: -100px;
  left: 0;
}

.pan_bar.pan_bar_right {
  cursor: e-resize;
  height: 200px;
  top: 50%;
  margin-top: -100px;
  right: 0;
}

.pan_corner {
  cursor: pointer;
  z-index: 1;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  background: transparent;
}

.pan_corner.pan_corner_top_left {
  cursor: nw-resize;
  border-color: rgba(0, 0, 255, 0.3) transparent transparent transparent;
  top: 0;
  left: 0;
  border-width: 50px 50px 0 0;
}

.pan_corner.pan_corner_top_left:hover {
  border-color: rgba(0, 0, 255, 0.7) transparent transparent transparent;
}

.pan_corner.pan_corner_top_right {
  cursor: ne-resize;
  border-color: transparent rgba(0, 0, 255, 0.3) transparent transparent;
  top: 0;
  right: 0;
  border-width: 0 50px 50px 0;
}

.pan_corner.pan_corner_top_right:hover {
  border-color: transparent rgba(0, 0, 255, 0.7) transparent transparent;
}

.pan_corner.pan_corner_bottom_right {
  cursor: se-resize;
  border-color: transparent transparent rgba(0, 0, 255, 0.3) transparent;
  right: 0;
  bottom: 0;
  border-width: 0 0 50px 50px;
}

.pan_corner.pan_corner_bottom_right:hover {
  border-color: transparent transparent rgba(0, 0, 255, 0.7) transparent;
}

.pan_corner.pan_corner_bottom_left {
  cursor: sw-resize;
  border-color: transparent transparent transparent rgba(0, 0, 255, 0.3);
  left: 0;
  bottom: 0;
  border-width: 50px 0 0 50px;
}

.pan_corner.pan_corner_bottom_left:hover {
  border-color: transparent transparent transparent rgba(0, 0, 255, 0.7);
}

.projects_main_row {
  display: flex;
  align-items: center;
}

.projects_main_row > .btn {
  margin-left: 15px;
}

.project-block .unread-message-count {
  margin-left: 10px;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #000;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  z-index: 3;
}

.sidenav .logo {
  height: 55px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.sidenav .hasSubMenuItem {
  cursor: pointer;
}

.sidenav .hasSubMenuItem.open .subMenuItem {
  display: block;
}

.sidenav .hasSubMenuItem .subMenuItem {
  display: none;
}

.sidenav .hasSubMenuItem,
.sidenav .menuItem {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav .hasSubMenuItem:hover,
.sidenav .menuItem:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.sidenav .welcome {
  color: #818181;
  font-size: 18px;
  padding: 8px 8px 8px 32px;
}

.sidenav .welcome .email_link {
  font-size: 12px;
}

.chat #chatTextarea {
  background-color: #f8ffff;
  resize: none;
}

#chatMessages {
  overflow: scroll;
  max-height: 300px;
}

#chatMessages .message {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

#chatMessages .message.unread {
  border: #66ccff solid 2px;
}

#chatMessages .message.unread::before {
  content: "Unread Message";
  font-size: 10px;
}

#chatMessages .message .sender {
  float: left;
  font-size: 10px;
  margin-right: 10px;
}

#chatMessages .message .time {
  font-size: 10px;
}

#main {
  transition: margin-left 0.5s;
  padding: 16px;
}

.admin-user-table > tbody > tr > th {
  cursor: pointer;
}

.admin-user-table .minutesAgo {
  background-color: #66ccff;
}

.admin-user-table .admin {
  background-color: #a7f3a7;
}

.admin-user-table .admin.minutesAgo {
  background-color: #2cd12c;
}

@media only screen and (max-width: 600px) {
  .pan_bar,
  .pan_corner {
    display: none;
  }
}

.colorChanger {
  position: absolute;
  right: 15px;
  height: 35px;
  width: 35px;
  border: solid 1px #000;
  display: flex;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
}

.colorChanger:hover {
  background-color: #66ccff;
}

.colorChanger.active {
  border: none 0 transparent;
}

.colorChanger.active .colorOptions {
  display: flex;
}

.colorChanger .colorOptions {
  display: none;
  position: absolute;
  right: 0;
  border: solid 1px #000;
}

.colorChanger .colorOptions .option,
.colorChanger .colorOptions .groutOption {
  height: 50px;
  width: 50px;
}

.colorChanger .dot {
  height: 5px;
  width: 5px;
  background-color: #000;
  border-radius: 50%;
  display: inline-block;
}

.video_section {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  margin-top: 30px;
}

.video_section > iframe {
  width: 1200px;
  height: 500px;
}

.footer {
  display: flex;
  background: #ddd;
  justify-content: center;
  align-items: center;
  padding: 50px;
}

.footer .left {
  border-right: 1px solid #000;
  padding-right: 20px;
}

.footer .left .logo {
  max-height: 100px;
}

.footer .right {
  padding-left: 20px;
}

.footer .right .link {
  color: #000;
}

.main-footer {
  padding: 20px;
  background: #ddd;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.main-footer .row {
  padding: 15px;
  width: 100%;
  max-width: 1200px;
}

.main-footer .row__first {
  display: flex;
  justify-content: space-between;
}

.main-footer .row__second .line {
  width: 100%;
  border-top: 2px solid #999;
}

.main-footer .row__copyright {
  display: flex;
  justify-content: center;
  font-size: 0.5em;
  font-weight: bold;
  letter-spacing: 1px;
}

.main-footer .row .logo > img {
  height: 50px;
}

.main-footer .row .social_media_set {
  display: flex;
}

.main-footer .row .social_media_set__logo-wrapper {
  list-style-type: none;
  display: flex;
  align-items: center;
}

.main-footer .row .social_media_set__logo-wrapper__logo {
  margin: 0 5px;
  height: 30px;
}

.main-footer .row .column {
  width: 25%;
}

.main-footer .row .link_set {
  display: flex;
  flex-direction: column;
}

.main-footer .row .link_set .link_header {
  color: #000;
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 15px;
}

.main-footer .row .link_set .link {
  color: #000;
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 5px;
}

.plan-page.privRead #main {
  margin-top: 140px;
}

.plan-page .main_header {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  z-index: 2;
}

.plan-page #main {
  margin-top: 100px;
}

.stripe_container {
  flex-direction: column;
}

.stripe_container .card_info {
  flex-direction: column;
}

.stripe_container .card_info .existing_card {
  margin-bottom: 30px;
  margin-right: 0;
  margin-top: 10px;
}

.stripe_container {
  margin: 0;
  padding: 0;
  background-color: transparent;
  display: flex;
  align-items: center;
}

.stripe_container #card-element {
  width: 500px;
  height: 50px;
  background-color: #f5f5f7;
  padding: 10px;
  border-radius: 150px;
}

.stripe_container #card-element .StripeElement {
  background-color: white;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  transition: box-shadow 150ms ease;
}

.stripe_container #card-element .StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.stripe_container #card-element .StripeElement--invalid {
  border-color: #fa755a;
}

.stripe_container #card-element .StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}

.stripe_container .card_info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.stripe_container .card_info .card_icon {
  height: 30px;
  margin-right: 15px;
}

.stripe_container .card_info .description {
  margin-right: 15px;
}

.stripe_container .card_info .existing_card {
  width: 230px;
  height: 150px;
  margin-right: 30px;
  border-radius: 17px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: monospace;
  box-shadow: #000 4px 4px;
  border: #666 1px solid;
  background: #7cbc0a;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient("to bottom", #7cbc0a 0%, #a1d54f 50%, #9dd53a 51%, #9dd53a 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#7cbc0a", endColorstr="#9dd53a",GradientType=0 );
  /* IE6-9 */
}

.stripe_container .card_info .existing_card .chip {
  background-image: url("/assets/payment_cards/chip.png");
  width: 30px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 26px;
  top: 38px;
}

.stripe_container .card_info .existing_card .company_name {
  text-shadow: #666 1px 1px;
  left: 30px;
  font-size: 14px;
  color: #fff;
  position: absolute;
  top: 15px;
  font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial;
  font-family: sans-serif;
  letter-spacing: 2px;
  font-weight: 100;
}

.stripe_container .card_info .existing_card .validity {
  display: flex;
  position: absolute;
  bottom: 26px;
  left: 30px;
}

.stripe_container .card_info .existing_card .validity .text {
  font-size: 7px;
  width: 30px;
  line-height: 8px;
}

.stripe_container .card_info .existing_card .name {
  position: absolute;
  bottom: 10px;
  left: 30px;
  font-size: 10px;
}

.stripe_container .card_info .existing_card .card_logo {
  right: 10px;
  bottom: 18px;
  height: 30px;
  position: absolute;
}

.stripe_container .card_info .existing_card .number {
  font-size: 16px;
}

@media screen and (max-width: 768px) {
@-webkit-keyframes fadeOutLoad {
    0% {
      opacity: 1;
    }

    99% {
      opacity: 0;
      padding: 0;
    }

    100% {
      height: 0;
      padding: 0;
      opacity: 0;
    }
}
@keyframes fadeOutLoad {
    0% {
      opacity: 1;
    }

    99% {
      opacity: 0;
      padding: 0;
    }

    100% {
      height: 0;
      padding: 0;
      opacity: 0;
    }
}

  a {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
    word-break: break-all;
  }

  body.bannerOffset {
    padding-top: 0;
  }

  .main_header {
    height: auto;
    align-items: center;
  }

  .main_header .middle .title {
    font-size: 18px;
  }

  .main_header .middle .tagline {
    display: none;
  }

  .main_header .icon > img {
    height: 25px;
  }

  body.bannerOffset.plan-page .main_header,
  body.bannerOffset .sidenav {
    top: 0;
  }

  .main-footer .row__second {
    flex-direction: column;
  }

  .main-footer .row__second .column {
    width: 100%;
  }

  .main-footer .row .link_set .link {
    margin-bottom: 10px;
  }

  #main {
    margin-left: 0 !important;
    width: 100%;
  }

  .trialBanner {
    overflow: hidden;
    -webkit-animation: fadeOutLoad 1s 3s forwards;
            animation: fadeOutLoad 1s 3s forwards;
  }

  .youtubeEmbed {
    width: 100%;
  }

  #app .hero,
  .homepage .hero {
    padding: 10px;
  }

  #app .hero .main > div,
  .homepage .hero .main > div {
    flex-basis: 100%;
  }

  #app .hero .main > .logo,
  .homepage .hero .main > .logo {
    display: none;
  }

  #app .hero .header,
  .homepage .hero .header {
    flex-direction: column;
  }

  #app .hero .header .logo-tagline-wrapper .tagline,
  .homepage .hero .header .logo-tagline-wrapper .tagline {
    text-align: center;
  }

  #app .hero .navbar > ul,
  .homepage .hero .navbar > ul {
    flex-wrap: wrap;
    justify-content: center;
    font-weight: bold;
    padding: 0;
  }

  #app .hero .navbar > ul > a > li,
  .homepage .hero .navbar > ul > a > li {
    padding: 3px;
  }

  .homepage .services {
    padding: 10px;
  }

  .homepage .services .service-listing {
    width: 100%;
  }

  .homepage .why-choose-us .reasons {
    flex-direction: column;
    width: 100%;
  }

  .homepage .registration {
    flex-direction: column;
  }

  .homepage .registration .logo_column > img {
    width: 100%;
  }

  .homepage .registration .form_column .form_container .btn {
    margin-left: auto;
    margin-right: auto;
  }

  .homepage .homepage-footer {
    flex-direction: column;
  }

  .homepage .homepage-footer .navbar > ul {
    flex-direction: column;
  }
}