/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Sep 2, 2017, 9:49:04 AM
    Author     : nalewczy
*/
@keyframes quickShowAnimate {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jun 29, 2017, 5:54:37 PM
    Author     : nalewczy
*/
/*tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";*/
.popupContainer {
  z-index: 10000000;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0px;
  right: 0px;
  bottom: 0px;
  top: 0px;
  background-color: rgba(252, 252, 252, 0.9);
}
.popupContainer .popupContent {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  -ms-align-items: center;
  width: 400px;
  height: 400px;
  padding: 35px;
  border-radius: 3px;
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  position: fixed;
  top: calc(50% - 235px);
  left: calc(50% - 235px);
}
.popupContainer .popupContent .popupContentInnerContainer {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: white;
}
.popupContainer .popupContent .popupContentInnerContainer .popupContentHeader {
  font-size: 30px;
  font-weight: 400;
  text-align: center;
  height: 35px;
}
.popupContainer .popupContent .popupContentInnerContainer .popupContentContent {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  top: 50px;
  overflow: scroll;
  margin-bottom: 60px;
  overflow-x: hidden;
  overflow-y: auto;
}
.popupContainer .popupContent .popupContentInnerContainer .popupBtns {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: -5px;
  height: 40px;
  display: block;
  text-align: center;
  margin: 2px;
}
.popupContainer .popupContent .popupContentInnerContainer .popupBtns .showNewMapPanelBtn {
  background: hsl(213, 88%, 67%);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 10pt;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  height: 35px;
  text-align: center;
  line-height: 35px;
  display: inline-block;
  width: 65%;
  font-weight: 600;
  border-radius: 10px;
  margin: 2px;
}
.popupContainer .popupContent .popupContentInnerContainer .popupBtns .createNewMapBtn,
.popupContainer .popupContent .popupContentInnerContainer .popupBtns .backToMapListBtn,
.popupContainer .popupContent .popupContentInnerContainer .popupBtns .showDuplicateInfo,
.popupContainer .popupContent .popupContentInnerContainer .popupBtns .showCreateNewInfo,
.popupContainer .popupContent .popupContentInnerContainer .popupBtns .closePopup {
  background: hsl(213, 88%, 67%);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 10pt;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  height: 35px;
  text-align: center;
  line-height: 35px;
  display: inline-block;
  width: 30%;
  font-weight: 600;
  border-radius: 10px;
  margin: 2px;
}
.popupContainer .popupContent .popupContentInnerContainer .popupBtns .backToMapListBtn,
.popupContainer .popupContent .popupContentInnerContainer .popupBtns .closePopup {
  background: #bdbdbd;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 10pt;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  height: 35px;
  text-align: center;
  line-height: 35px;
  display: inline-block;
  width: 30%;
  font-weight: 600;
  border-radius: 10px;
  margin: 2px;
}
.popupContainer .popupContent .popupContentInnerContainer .popupBtns .facebookBtn {
  display: none;
}
.popupContainer .popupContent .popupContentInnerContainer .popupBottomBtn {
  height: 40px;
  width: 120px;
}
.popupContainer .popupContent .popupContentInnerContainer .popupClose {
  cursor: hand;
  float: right;
  size: 12px;
  display: none;
}
.popupContainer .popupContent.wide {
  width: 800px;
  left: calc(50% - 435px);
}
.popupContainer .popupContent.wide .popupContentInnerContainer .columns {
  display: flex;
}
.popupContainer .popupContent.wide .popupContentInnerContainer .columns .leftColumn,
.popupContainer .popupContent.wide .popupContentInnerContainer .columns .rightColumn {
  width: 50%;
  padding: 0px 10px;
  position: relative;
  margin-top: 10px;
}
.popupContainer .popupContent.wide .popupContentInnerContainer .columns .leftColumn .popupContentContent,
.popupContainer .popupContent.wide .popupContentInnerContainer .columns .rightColumn .popupContentContent {
  position: relative;
}
.popupContainer .popupContent.wide .popupContentInnerContainer .columns .leftColumn .popupBtns,
.popupContainer .popupContent.wide .popupContentInnerContainer .columns .rightColumn .popupBtns {
  position: absolute;
  bottom: 0px;
  left: 0px;
}
.popupContainer .popupContent.wide .popupContentInnerContainer .columns .leftColumn .popupContentContent,
.popupContainer .popupContent.wide .popupContentInnerContainer .columns .rightColumn .popupContentContent {
  height: calc(100% - 100px);
  top: 0px;
  margin-bottom: 0px;
}
.popupContainer .popupContent.wide .popupContentInnerContainer .columns .leftColumn .popupContentContent p,
.popupContainer .popupContent.wide .popupContentInnerContainer .columns .rightColumn .popupContentContent p {
  line-height: 1.4;
  font-weight: 300;
  color: hsl(0, 0%, 20%);
}
.popupContainer .popupContent.wide .popupContentInnerContainer .columns .rightColumn .rightTitle {
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
  color: hsl(0, 0%, 20%);
  margin-bottom: 5px;
  height: 20px;
  margin-top: 20px;
}
.popupContainer .popupContent.wide .popupContentInnerContainer .columns .rightColumn .videoThumb {
  background: url('../img/videothumb.jpg');
  width: 380px;
  height: 200px;
  background-size: cover;
  cursor: pointer;
}
.popupContainer .popupContent.wide .popupContentInnerContainer .columns .rightColumn .videoThumb .videoOverlay {
  background: url('../img/video_play_overlay.png');
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.5;
  transition: 0.3s;
}
.popupContainer .popupContent.wide .popupContentInnerContainer .columns .rightColumn .videoThumb:hover .videoOverlay {
  opacity: 0.65;
}
.banner {
  z-index: 100;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0px;
  right: 0px;
  bottom: 0px;
  top: 0px;
  background-color: rgba(252, 252, 252, 0.9);
}
.banner .bannerCloseBtn {
  position: absolute;
  background-color: white;
  font-weight: bold;
  top: -10px;
  right: -10px;
  padding: 5px;
  width: 20px;
  height: 20px;
  color: gray;
  z-index: 10000;
  text-align: center;
  border-radius: 20px;
  cursor: pointer;
  border: 1px solid gray;
}
.banner .readerContainer .bannerCloseBtn {
  background-color: #fe4a46;
  color: white;
  top: -7px;
  right: -7px;
  width: 30px;
  height: 30px;
  padding-top: 10px;
  font-size: 20px;
}
.banner .readerContainer .bannerCloseBtn:hover {
  background-color: #3bc768;
}
.banner .bannerContainer {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: space-between;
  -ms-align-items: center;
  width: 600px;
  border-radius: 3px;
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  position: fixed;
  top: calc(50% - 200px);
  left: calc(50% - 300px);
}
.banner .bannerContainer .bannerHeader {
  padding: 20px;
  font-size: 25px;
  text-align: center;
  height: 35px;
}
.banner .bannerContainer .bannerContent {
  padding: 10px;
  display: flex;
}
.banner .bannerContainer .bannerContent .column {
  width: 50%;
  padding: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-beetwen;
}
.banner .bannerContainer .bannerContent .column .contentHeader {
  padding: 5px;
  font-weight: bold;
  text-align: center;
  color: #4b9ffb;
  cursor: pointer;
}
.banner .bannerContainer .bannerContent .column .contentText {
  text-align: center;
  cursor: pointer;
}
.banner .bannerContainer .bannerContent .column .loginimage {
  height: 100px;
  width: 200px;
  margin: auto;
  border-radius: 3px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.banner .bannerContainer .bannerContent .column .loginfbimage {
  height: 100px;
  width: 200px;
  margin: auto;
  border-radius: 3px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  background-image: url('../img/loginfbimage.png');
}
.banner .bannerContainer .bannerContent .column .loginanonimage {
  height: 100px;
  width: 200px;
  margin: auto;
  border-radius: 3px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  background-image: url('../img/loginanonimage.png');
}
.banner .bannerContainer .bannerContent .column .image {
  height: 100px;
  width: 200px;
  margin: auto;
  border-radius: 3px;
  background-image: url('../img/shotMapForBanner.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.banner .bannerContainer .bannerContent .column .image .frameBox {
  position: relative;
  height: 90px;
  border-color: white;
  border-style: solid;
  border-width: 5px;
  border-radius: inherit;
  opacity: 0.4;
}
.banner .bannerContainer .bannerContent .column .image .frameBox .frame {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right top, transparent, rgba(255, 255, 255, 0.9));
}
.banner .bannerContainer .bannerContent .column .image.under {
  position: absolute;
  left: 0px;
  top: 20px;
  opacity: 0.5;
}
.banner .bannerContainer .bannerContent .column .image.top {
  position: absolute;
  left: 35px;
  top: 0px;
}
.banner .bannerContainer .feedbackFormBanner {
  display: block;
  background-size: cover;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  display: block !important;
  font-size: 15px;
  line-height: 150%;
  text-align: center;
  color: #333333;
}
.banner .bannerContainer .feedbackFormBanner .formTitle {
  font-size: 20px;
  padding-top: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(211, 211, 211, 0.7);
}
.banner .bannerContainer .feedbackFormBanner .formTextarea {
  width: 100%;
  height: 50px;
}
.banner .bannerContainer .feedbackFormBanner .formLabel {
  text-align: center;
}
.banner .bannerContainer .feedbackFormBanner .formField {
  padding-top: 6px;
  padding-bottom: 6px;
  display: flex;
}
.banner .bannerContainer .feedbackFormBanner .formField span {
  padding-top: 5px;
  width: 120px;
  text-align: right;
  padding-right: 10px;
  font-size: 13px;
  font-weight: 400;
}
.banner .bannerContainer .feedbackFormBanner .formField input,
.banner .bannerContainer .feedbackFormBanner .formField select,
.banner .bannerContainer .feedbackFormBanner .formField textarea {
  border: 1px solid #ebebeb;
}
.banner .bannerContainer .feedbackFormBanner .formField input,
.banner .bannerContainer .feedbackFormBanner .formField select {
  height: 30px;
  width: 300px;
}
.banner .bannerContainer .feedbackFormBanner .formField textarea {
  width: 50%;
  width: 300px;
  height: 150px;
}
.banner .bannerContainer .feedbackFormBanner #formSubmit {
  border: 2px solid #F78E21;
  background-color: #e50000;
  border-radius: 0px;
}
.banner .bannerContainer .formBanner {
  display: block;
  background-image: url(/img/monumentvalley.jpg);
  background-size: cover;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  display: block !important;
  color: white;
  font-size: 15px;
  line-height: 150%;
  text-align: center;
  text-shadow: -1px -1px 0 rgba(82, 82, 82, 0.3), 1px -1px 0 rgba(82, 82, 82, 0.3), -1px 1px 0 rgba(82, 82, 82, 0.3), 1px 1px 0 rgba(82, 82, 82, 0.3);
  padding-bottom: 20px;
}
.banner .bannerContainer .formBanner .formTitle {
  font-size: 25px;
  padding-top: 5px;
  padding-bottom: 15px;
}
.banner .bannerContainer .formBanner .formLabel {
  text-align: center;
}
.banner .bannerContainer .formBanner .formField {
  padding-top: 6px;
  padding-bottom: 6px;
  display: flex;
}
.banner .bannerContainer .formBanner .formField span {
  padding-top: 5px;
  width: 230px;
  text-align: right;
  padding-right: 10px;
}
.banner .bannerContainer .formBanner .formField input,
.banner .bannerContainer .formBanner .formField select {
  height: 30px;
  width: 50%;
}
.banner .bannerContainer .bannerFooter {
  border-top: 1px solid rgba(211, 211, 211, 0.7);
  padding: 20px;
  font-weight: 100;
  font-size: 13px;
  text-align: center;
}
.banner .formBannerContainer {
  top: calc(50% - 300px) !important;
}
.banner .feedbackFormBannerContainer {
  width: 450px !important;
  left: calc(50% - 200px) !important;
}
.banner .myTravelsList {
  width: 100%;
  height: 400px;
  overflow: scroll;
}
.banner .myTravelsList .travelItem {
  margin-top: 15px;
  margin-bottom: 15px;
  min-height: 80px;
  height: 80px;
  border-bottom: 1px solid #e6e6e6;
  font-weight: 700;
  font-size: 16px;
  text-rendering: geometricPrecision;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
  background: white;
  border-radius: 6px;
  display: flex;
  color: #4d4d4d !important;
  font-weight: 400 !important;
}
.banner .myTravelsList .travelItem .travelThumb {
  width: 100px;
  height: 80px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('../img/placeholders/places/city.png');
  float: left;
}
.banner .myTravelsList .travelItem span {
  float: left;
  display: block;
  padding: 10px;
  padding-left: 20px;
}
.banner .myTravelsList .addNewTravelItem .travelThumb {
  background-image: url('../img/ico/general/transport-add.svg');
  width: 70px;
  height: 70px;
  margin-left: 20px;
  margin-right: 20px;
}
.banner .readerContainer {
  left: 15px;
  right: 15px;
  bottom: 15px;
  top: 15px;
  width: unset;
}
.banner .readerContainer .readerBanner {
  left: 15px;
  right: 15px;
  bottom: 15px;
  top: 15px;
  width: unset;
  position: absolute;
}
.banner .readerContainer .readerBanner iframe {
  position: absolute;
  left: 5px;
  right: 5px;
  top: 5px;
  bottom: 5px;
  border: 0px;
}
.mobile .formBanner .formField {
  display: block !important;
}
.mobile .formBanner .formField span {
  display: block  !important;
  padding-top: 5px  !important;
  width: 100%  !important;
  text-align: left  !important;
  padding-right: 5px  !important;
  padding-left: 5px  !important;
}
.mobile .formBanner .formField input,
.mobile .formBanner .formField select {
  display: block  !important;
  height: 30px  !important;
  width: 100%  !important;
}
.mobile .formBanner .formField select {
  background-color: white !important;
}
.emailPleaseBannerContainer {
  width: 600px !important;
  left: calc(50% - 300px) !important;
}
.loginBannerContainer {
  height: 500px;
  top: calc(50% - 200px) !important;
  left: calc(50% - 165px) !important;
  width: 330px !important;
}
.loginBannerContainer .bannerHeader {
  padding-top: 20px !important;
  padding-bottom: 10px !important;
  color: darkgray;
}
.loginBannerContainer .loginBannerContent {
  position: relative;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  display: block !important;
  padding-top: unset;
  padding-bottom: unset;
  padding-left: 10px;
  padding-right: 10px;
}
.loginBannerContainer .loginBannerContent h3 {
  color: darkgray;
}
.loginBannerContainer .loginBannerContent div {
  display: flex;
  padding-left: 10px;
  padding-righ: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 7px;
  margin-bottom: 7px;
  cursor: pointer;
  font-size: 13px;
  color: #979797;
  border: 2px solid rgba(0, 0, 0, 0.2);
  background-color: white;
}
.loginBannerContainer .loginBannerContent div span {
  width: 100%;
  padding-top: 6px;
  text-align: center;
}
.loginBannerContainer .loginBannerContent div.noImg {
  padding-top: 15px;
  padding-bottom: 15px;
}
.loginBannerContainer .loginBannerContent div.noImg span {
  padding: unset;
}
.loginBannerContainer .loginBannerContent div.noImg1 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.loginBannerContainer .loginBannerContent div.noImg1 span {
  padding: unset;
}
.loginBannerContainer .loginBannerContent div.loginOr {
  padding: 0px;
  border: unset;
  margin-top: unset;
  margin-bottom: unset;
}
.loginBannerContainer .loginBannerContent div.loginOr .orLine {
  width: 50%;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  position: relative;
  top: 13px;
}
.loginBannerContainer .loginBannerContent div.loginOr .orLabel {
  width: 30px;
}
.loginBannerContainer .loginBannerContent div.loginGoogle {
  background-color: #4285f4;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.loginBannerContainer .loginBannerContent div.loginApple {
  display: none;
  background-color: gray;
}
.loginBannerContainer .loginBannerContent div.loginFB {
  color: white;
  background-color: #3b5998;
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.loginBannerContainer .loginBannerContent div.loginEmail {
  color: white;
  background-color: #a50000;
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.loginBannerContainer .loginBannerContent section.loginEmailPanel div.loginEmail,
.loginBannerContainer .loginBannerContent section.loginEmailRegisterPanel div.loginEmail {
  padding-top: 5px;
  padding-bottom: 5px;
}
.loginBannerContainer .loginBannerContent div.loginAnonymous {
  color: white;
  background-color: #646464;
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.loginBannerContainer .loginBannerContent div.loginEmailInput {
  padding: unset;
  border: unset;
}
.loginBannerContainer .loginBannerContent div.loginEmailInput input {
  height: 30px;
  font-size: 13px;
  width: 100%;
}
.loginBannerContainer .loginBannerContent div.bannerFooter {
  padding: unset;
  border: unset;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 12px;
  text-align: center;
  display: block;
}
.mobile .emailPleaseBannerContainer {
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}
.mobile .emailPleaseBannerContainer .emailPleaseBannerContent {
  width: 100% !important;
  left: 0px !important;
  border-radius: 0px !important;
}
.bannerContentBtn {
  margin-left: 10px;
  text-rendering: geometricPrecision;
  align-self: center;
  text-transform: uppercase;
  font-size: 15px;
  color: white;
  font-weight: 700;
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.15);
  letter-spacing: 0.3px;
  border-radius: 15px;
  outline: -webkit-focus-ring-color auto 0px;
  background-color: rgba(40, 145, 252, 0.7);
  height: 30px;
  width: 100px;
  text-align: center;
  padding-top: 13px;
  cursor: pointer;
}
.bannerContentBtnHover {
  transition: background-color 0.7s ease, color 0.2s ease;
  background-color: #ffffff;
  color: #2891fc;
}
.bannerContentBtn:hover {
  transition: background-color 0.7s ease, color 0.2s ease;
  background-color: #ffffff;
  color: #2891fc;
}
.emailPleaseBannerContent {
  min-height: 300px;
  background-image: url(/img/monumentvalley.jpg);
  background-size: cover;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  display: block !important;
}
.emailPleaseBannerContent div.emailPleaseBannerContentInfo {
  color: white;
  font-size: 25px;
  line-height: 150%;
  text-align: center;
  text-shadow: -1px -1px 0 rgba(82, 82, 82, 0.3), 1px -1px 0 rgba(82, 82, 82, 0.3), -1px 1px 0 rgba(82, 82, 82, 0.3), 1px 1px 0 rgba(82, 82, 82, 0.3);
  padding-bottom: 20px;
}
.emailPleaseBannerContent .emailPleaseBannerContentInputContainer,
.emailPleaseBannerContent .emailPleaseBannerContentSocialContainer {
  display: flex;
}
.emailPleaseBannerContent .emailPleaseBannerContentInputContainer input,
.emailPleaseBannerContent .emailPleaseBannerContentSocialContainer input {
  width: 100% ;
  height: 50px;
  font-size: 25px;
  border-radius: 15px;
  padding-left: 10px;
  padding-right: 10px ;
  color: gray;
}
.emailPleaseBannerContent .emailPleaseBannerContentInputContainer input:focus,
.emailPleaseBannerContent .emailPleaseBannerContentSocialContainer input:focus {
  outline: none;
}
.emailPleaseBannerContent .emailPleaseBannerContentInputContainer .emailPleaseBannerContentBtn,
.emailPleaseBannerContent .emailPleaseBannerContentSocialContainer .emailPleaseBannerContentBtn {
  margin-left: 10px;
  text-rendering: geometricPrecision;
  align-self: center;
  text-transform: uppercase;
  font-size: 15px;
  color: white;
  font-weight: 700;
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.15);
  letter-spacing: 0.3px;
  border-radius: 15px;
  outline: -webkit-focus-ring-color auto 0px;
  background-color: rgba(40, 145, 252, 0.7);
  height: 30px;
  width: 100px;
  text-align: center;
  padding-top: 13px;
  cursor: pointer;
}
.emailPleaseBannerContent .emailPleaseBannerContentInputContainer .emailPleaseBannerContentBtn:hover,
.emailPleaseBannerContent .emailPleaseBannerContentSocialContainer .emailPleaseBannerContentBtn:hover {
  transition: background-color 0.7s ease, color 0.2s ease;
  background-color: #ffffff;
  color: #2891fc;
}
.emailPleaseBannerContent .emailPleaseBannerContentSocialContainer {
  padding-top: 20px;
  text-align: center;
  width: 100%;
}
.emailPleaseBannerContent .emailPleaseBannerContentSocialContainer a {
  width: 50% !important;
  marging: 20px;
  text-decoration: none;
}
.emailPleaseBannerContent .emailPleaseBannerContentSocialContainer .emailPleaseBannerContentBtn {
  background-color: rgba(40, 145, 252, 0.7) !important;
}
.emailPleaseBannerContent .emailPleaseBannerContentSocialContainer .emailPleaseBannerContentBtn:hover {
  color: white;
}
@media only screen and (max-device-width: 800px) and (max-width: 800px) {
  .banner {
    width: inherit;
    z-index: 100000;
  }
  .banner .bannerContainer {
    border-radius: 0px !important;
    display: inherit;
    left: 10px;
    right: 10px;
    top: 10px;
    width: inherit;
  }
  .banner .bannerContainer .bannerContent {
    display: inherit;
  }
  .banner .bannerContainer .bannerContent .column {
    display: block;
    width: 100%;
  }
  .popupContent {
    left: inherit !important;
    top: inherit !important;
    border-radius: 0px !important;
    width: calc(100% - 20px) !important;
    padding: 10px !important;
  }
  .popupContent .popupContentContent {
    display: block;
    height: auto !important;
  }
  .popupContent .columns {
    display: block !important;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .popupContent .columns .leftColumn,
  .popupContent .columns .rightColumn {
    width: auto !important;
    height: auto !important;
  }
  .popupContent .videoThumb {
    width: auto !important;
  }
  .popupContent .popupBtns {
    display: block;
    position: unset !important;
  }
  .popupContent .popupBtns .backToMapListBtn,
  .popupContent .popupBtns .showCreateNewInfo,
  .popupContent .popupBtns .showDuplicateInfo {
    display: none !important;
  }
  .popupContent .popupBtns .closePopup {
    position: relative !important;
    top: -15px;
    width: 25% !important;
  }
  .popupContent .popupBtns .facebookBtn {
    background: #1877F2;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 10pt;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    height: 35px;
    text-align: center;
    line-height: 35px;
    display: inline-block !important;
    width: 70%;
    font-weight: 600;
    border-radius: 10px;
    margin: 2px;
  }
  .popupContent .popupBtns .facebookBtn .likeFacebook {
    background: #61a3f5;
    cursor: pointer;
    height: inherit;
    border-radius: 10px;
  }
  .popupContent .popupBtns .facebookBtn .likeFacebook .iconLikeUs {
    display: block;
    float: left;
    margin: 5px 10px 0px 20px;
    width: 23px;
    height: 23px;
  }
  .popupContent .popupBtns .facebookBtn .likeFacebook span {
    display: block;
    float: left;
    font-size: 13pt;
    font-weight: 500;
    line-height: 25px;
    text-transform: initial !important;
    color: white;
    text-align: center;
    margin-top: 6px;
  }
  .popupContent .popupBtns .facebookBtn .likeFacebook:hover .iconLikeUs {
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: center center;
    -webkit-animation-name: swing;
    -moz-animation-name: swing;
    -o-animation-name: swing;
    animation-name: swing;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
  }
  @-webkit-keyframes swing {
    20%,
    40%,
    60%,
    80%,
    100% {
      -webkit-transform-origin: center center;
    }
    20% {
      transform: rotate3d(0, 0, 1, 15deg);
    }
    40% {
      transform: rotate3d(0, 0, 1, -8deg);
    }
    60% {
      transform: rotate3d(0, 0, 1, 4deg);
    }
    80% {
      transform: rotate3d(0, 0, 1, -4deg);
    }
    to {
      transform: rotate3d(0, 0, 1, 0deg);
    }
  }
  @-moz-keyframes swing {
    20% {
      transform: rotate3d(0, 0, 1, 15deg);
    }
    40% {
      transform: rotate3d(0, 0, 1, -8deg);
    }
    60% {
      transform: rotate3d(0, 0, 1, 4deg);
    }
    80% {
      transform: rotate3d(0, 0, 1, -4deg);
    }
    to {
      transform: rotate3d(0, 0, 1, 0deg);
    }
  }
  @-o-keyframes swing {
    20% {
      transform: rotate3d(0, 0, 1, 15deg);
    }
    40% {
      transform: rotate3d(0, 0, 1, -8deg);
    }
    60% {
      transform: rotate3d(0, 0, 1, 4deg);
    }
    80% {
      transform: rotate3d(0, 0, 1, -4deg);
    }
    to {
      transform: rotate3d(0, 0, 1, 0deg);
    }
  }
  @keyframes swing {
    20% {
      transform: rotate3d(0, 0, 1, 15deg);
    }
    40% {
      transform: rotate3d(0, 0, 1, -8deg);
    }
    60% {
      transform: rotate3d(0, 0, 1, 4deg);
    }
    80% {
      transform: rotate3d(0, 0, 1, -4deg);
    }
    to {
      transform: rotate3d(0, 0, 1, 0deg);
    }
  }
}
@media only screen and (max-device-width: 365px) and (max-width: 365px) {
  #pclone {
    line-height: 1.2;
  }
  .likeFacebook span {
    line-height: 1.2;
  }
}
.mapRow {
  height: 30px;
  border: 2px solid transparent;
  margin-top: 2px;
  padding: 10px 10px;
  border-radius: 10px;
  transition: 0.3s;
  cursor: pointer;
}
.mapRow .mapinfo {
  width: calc(100% - 40px);
  float: left;
}
.mapRow .mapinfo .mapName {
  margin-top: 3px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mapRow .mapinfo .upperMapInfo {
  text-transform: uppercase;
  color: hsl(0, 0%, 70%);
  font-size: 10px;
  font-weight: 500;
}
.mapRow .removeMapIco {
  display: none;
  background: url(../img/ico/list/small-delete.svg);
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  float: right;
  margin-top: 5px;
  margin-right: 5px;
}
.mapRow:hover {
  border: 2px solid hsl(0, 0%, 90%);
  color: hsl(213, 88%, 67%);
}
.mapRow:hover .removeMapIco {
  display: block;
}
.newMapPanel span {
  text-transform: uppercase;
  font-size: 11px;
  color: hsl(0, 0%, 80%);
  font-weight: 600;
  margin-left: 15px;
}
.newMapPanel span.newMapValidation {
  float: right;
  margin-right: 15px;
  color: #fb5951;
}
.newMapPanel input.newMapName {
  width: 100%;
  height: 50px;
  margin-bottom: 25px;
  border: 2px solid hsl(0, 0%, 80%);
  border-radius: 10px;
  margin-top: 5px;
  outline-width: 0;
  padding-left: 15px;
  font-size: 18px;
  color: hsl(0, 0%, 20%);
  margin-top: 10px;
}
.newMapPanel input.newMapName:focus {
  border: 2px solid hsl(213, 88%, 67%);
  color: hsl(213, 88%, 67%);
}
.newMapPanel textarea.newMapDescription {
  width: 100%;
  height: 140px;
  border: 2px solid hsl(0, 0%, 80%);
  border-radius: 10px;
  outline-width: 0;
  font-size: 13px;
  padding: 10px 15px;
  resize: none;
  color: hsl(0, 0%, 20%);
  margin-top: 10px;
}
.newMapPanel textarea.newMapDescription:focus {
  border: 2px solid hsl(213, 88%, 67%);
  color: hsl(213, 88%, 67%);
}
.alertPopupContainer {
  z-index: 10000000;
  position: fixed;
  line-height: 120%;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.7);
}
.alertPopupContainer .alertPopup {
  margin-left: auto;
  margin-right: auto;
  max-width: 400px;
  padding: 20px;
  background-color: white;
  margin-top: 50px;
  border-radius: 10px;
  border: 1px solid lightgray;
}
.alertPopupContainer .alertPopup .alertPopupMessage {
  text-align: center;
}
.alertPopupContainer .alertPopup .alertPopupButtons {
  user-select: none;
  cursor: pointer;
  padding-top: 30px;
  padding-right: 0px;
  padding-left: 0px;
  text-align: right;
}
.alertPopupContainer .alertPopup .alertPopupButtons .alertPopupBtn {
  border-radius: 5px;
  background-color: #006ae0;
  color: white;
  padding: 5px;
  width: 100px;
  min-width: 100px;
  padding-left: 40px;
  padding-right: 40px;
}
.alertPopupContainerMobile {
  font-size: 20px;
}
.alertPopupContainerMobile .alertPopup {
  position: absolute;
  left: 20px;
  right: 20px;
}
/*# sourceMappingURL=settingspopup.css.map */