.sur-lightbox {
  background: rgba(0,0,0,.5);
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}

.sur-container {
  background: #fff;
  box-shadow: 1px 1px 6px rgba(0,0,0,.5);
  box-sizing: border-box;
  display: flex;
  height: 480px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  top: 50%;
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 640px;
}

.sur-close {
  bottom: -32px;
  cursor: pointer;
  fill: #fff;
  height: 24px;
  position: absolute;
  right: 0;
  width: 24px;
}

.sur-left {
  order: 1;
}

.sur-right {
  order: 2;
}

.sur-left:nth-child(2) {
  margin-right: 20px;
}

.sur-right:nth-child(2) {
  margin-left: 20px;
}

.sur-form {
  flex: 1;
  text-align: center;
}

.sur-message,
.sur-confirmation {
  color: #555;
}

.sur-message,
.sur-message p {
  font-size: 20px;
}

.sur-message {
  margin: 4px 0 1em;
}

.sur-form li {
  margin: 8px 0;
}

.sur-label {
  margin-bottom: 0;
  margin-right: 1em;
}

.sur-text {
  border: 1px solid #ddd;
  padding: 4px 6px;
}

.sur-radio,
.sur-checkbox {
  bottom: -3px;
  margin-right: 4px;
  position: relative;
  vertical-align: top;
}

.sur-form .checker {
  display: inline-block;
}

.sur-submit {
  background-color: #fb127f;
  border-radius: 2px;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 16px;
  transition: background-color .3s;
}

.sur-submit:focus,
.sur-submit:hover,
.sur-submit:active {
  background-color: #fc2c8d;
}

.sur-error {
  border: 2px solid #f13340;
}

.sur-warning {
  background: #f13340;
  border-radius: 2px;
  color: #fff;
  font-size: 1em;
  font-weight: bold;
  margin: 1em 0;
  padding: 10px;
  text-align: center;
}

.sur-confirmation {
  font-size: 32px;
  margin: 1em auto;
  text-align: center;
}

.sur-hidden {
  display: none;
}

.sur-image {
  flex: 1;
  text-align: center;
}

.sur-image img {
  height: auto;
  max-width: 100%;
}

.ui-datepicker {
  -webkit-border-radius: 4px;
  border-radius: 4px;
  left: 0;
  margin-top: 1px;
  padding: 4px;
  top: 0;
}

.ui-datepicker:before {
  border-bottom-color: rgba(0,0,0,.2);
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  content: "";
  display: inline-block !important;
  left: 6px;
  position: absolute;
  top: -7px;
}

.ui-datepicker:after {
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  content: "";
  display: inline-block !important;
  left: 7px;
  position: absolute;
  top: -6px;
}

.ui-datepicker .ui-datepicker-header {
  background: transparent !important;
  color: #808080;
  font-weight: normal;
}

.ui-datepicker .ui-state-default {
  background: transparent !important;
}

.ui-datepicker .ui-state-highlight {
  background: #fefbe2 !important;
  border: 1px solid #dac308 !important;
}

.ui-datepicker .ui-state-active {
  background: #00aff0 !important;
  border: 1px solid #008abd !important;
  color: #fff !important;
}

lite-youtube {
  background-color: #000;
  background-position: center center;
  background-size: cover;
  contain: content;
  cursor: pointer;
  display: block;
  margin: 10px 0;
  position: relative;
}

lite-youtube::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
  background-position: top;
  background-repeat: repeat-x;
  height: 60px;
  padding-bottom: 50px;
  width: 100%;
  transition: all .2s cubic-bezier(0, 0, .2, 1);
}

lite-youtube::after {
  content: "";
  display: block;
  padding-bottom: calc(100% / (16 / 9));
}

lite-youtube > iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

lite-youtube > .lty-playbtn {
  width: 68px;
  height: 48px;
  position: absolute;
  transform: translate3d(-50%, -50%, 0);
  top: 50%;
  left: 50%;
  z-index: 1;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>');
  filter: grayscale(100%);
  transition: filter .1s cubic-bezier(0, 0, .2, 1);
}

lite-youtube:hover > .lty-playbtn {
  filter: none;
}

lite-youtube.lyt-activated {
  cursor: unset;
}

lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
  opacity: 0;
  pointer-events: none;
}