:root {
  --bg-color: #fedbc5;
  --color1: #fdd020;
  --color2: #ff9e7e;
  --color3: #ff5b42;
  --color4: #dc1735;
  --color5: #3a97b1;
  --color6: #003848;
}
/*
*,
*:active,
*:focus,
*:visited,
*:hover{
  cursor:url(../img/cursor.png), auto !important;
}
*/

@font-face {
  font-family: "avenir-regular";
  src: url("../fonts/AvenirLTStd-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "avenir-book";
  src: url("../fonts/AvenirLTStd-Book.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "avenir-bold";
  src: url("../fonts/AvenirLTStd-Black.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  /*font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;*/
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

a,
a:visited {
  color: inherit;
}
button {
  cursor: pointer;
}

.App {
  display: flex;
  justify-content: center;
  color: white;
}

@media (min-width: 770px) {
  .App {
    align-items: center;
    height: 100vh;
  }
}

* {
  box-sizing: border-box;
}

header {
  height: 120px;
  margin: 0;
  grid-row: 1;
  grid-column: 1/4;
}

header h1 {
  margin: 0;
  font-size: 1.5em;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(12, auto);
  gap: 10px;
  padding: 50px;
}

.grid .block:nth-of-type(1) {
  grid-row: 2/4;
  grid-column: 1/4;
}

.grid .block:nth-of-type(2) {
  grid-row: 4/6;
  grid-column: 1/4;
}

.grid .block:nth-of-type(3) {
  grid-row: 6/8;
  grid-column: 1/4;
}

.grid .big-block {
  grid-row: 8/11;
  grid-column: 1/4;
}

.grid .small-block {
  grid-row: 11;
  grid-column: 1/4;
}

@media (min-width: 770px) {
  .grid {
    grid-template-columns: repeat(6, auto);
    grid-template-rows: repeat(6, auto);
  }

  .grid .block:nth-of-type(1) {
    grid-row: 2/4;
    grid-column: 1/4;
  }

  .grid .block:nth-of-type(2) {
    grid-row: 4/6;
    grid-column: 1/4;
  }

  .grid .block:nth-of-type(3) {
    grid-row: 1/3;
    grid-column: 4/7;
  }

  .grid .big-block {
    grid-row: 3/6;
    grid-column: 4/7;
  }

  .grid .small-block {
    grid-row: 6;
    grid-column: 1/6;
  }
}

.block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: inherit;
}

.big-block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: inherit;
}

.small-block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: inherit;
}

@media (min-width: 770px) {
  .small-block {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(1, 1fr);
  }
}

.day {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;

  background: white;
  border-radius: 10px;
  perspective: 500px;
}

.day .cover {
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "avenir-bold", cursive;
  font-size: 3em;
  transform-origin: left top;
  transition: 1s ease-in-out;
  padding-top: 8px;
  letter-spacing: -2px;
}

.day:hover {
  z-index: 100;
}

.d_1 .cover span {
  margin-right: 4px;
}

.d_9 .cover span {
  margin-right: 4px;
}

.d_13 .cover span {
  margin-right: 4px;
}
.d_14 .cover span {
  margin-right: 4px;
}
.d_16 .cover span {
  margin-right: 4px;
}

.d_17 .cover span {
  margin-right: 4px;
}

.d_18 .cover span {
  margin-right: 4px;
}

.day:hover .cover {
  transform: rotateY(-100deg);
}

.block:nth-of-type(1) *:nth-of-type(2) {
  grid-column: 2;
  grid-row: 1/3;
}

.block:nth-of-type(2) *:nth-of-type(5) {
  grid-column: 3;
  grid-row: 1/3;
}

.block:nth-of-type(3) *:nth-of-type(1) {
  grid-column: 1;
  grid-row: 1/3;
}

.block:nth-of-type(3) *:nth-of-type(4) {
  grid-column: 3;
  grid-row: 1/3;
}

.big-block *:nth-child(1) {
  grid-column: 1/3;
  grid-row: 1;
}

.big-block *:nth-child(4) {
  grid-column: 2/4;
  grid-row: 2;
}

.small-block *:nth-child(2) {
  grid-column: 2/4;
  grid-row: 1;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

svg {
  border-radius: 10px;
}

.gingerbread .body {
  fill: #cd803d;
}

.gingerbread .eye {
  fill: white;
}
.gingerbread .mouth {
  fill: none;
  stroke: white;
  stroke-width: 2px;
  rx: 2px;
}

.gingerbread .limb {
  stroke: #cd803d;
  stroke-width: 35px;
  stroke-linecap: round;
}

.house {
  stroke: black;
  stroke-width: 2px;
  fill: white;
}

.house .roof {
  fill: none;
  stroke: #d1495b;
  stroke-width: 10px;
  stroke-linecap: round;
}

.house .door {
  fill: #d1495b;
  rx: 2px;
}

.house .stair {
  fill: gray;
}

.house .window {
  fill: #fdea96;
  rx: 5px;
}

.house .window-sill {
  fill: #d1495b;
  stroke-linecap: round;
  rx: 5px;
}

.candy .body {
  stroke-linecap: round;
  fill: none;
}

.candy .red-mark {
  stroke: #d1495b;
  stroke-width: 2.5px;
}

.candy .green-mark {
  stroke: #234236;
  stroke-width: 2.5px;
}

.gift .box {
  fill: #d1495b;
  stroke: black;
  stroke-width: 2px;
}

.gift .stripe {
  fill: white;
  stroke: black;
  stroke-width: 2px;
}

.gift .ribbon {
  stroke: #b73a3b;
  stroke-width: 4px;
  fill: none;
}

.bear {
  background-color: #f5eed7;
}

.bear .face {
  fill: white;
  rx: 50;
  ry: 30;
}

.bear .mouth {
  fill: none;
  stroke: black;
  stroke-width: 2;
}

.sleigh {
  offset-path: path(
    "M-200 80 L -90 80 Q 60 80 60 -10 A 50 50 0 0 0 -60 -10 Q -60 80 90 80 L 200 80"
  );
  animation: roller-coaster 6000ms infinite linear;
}

@keyframes roller-coaster {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

.background {
  display: inline-block;
  border-radius: 10px;

  background-color: #38755b;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 120 120'%3E%3Cpolygon fill='%230c5c4c' points='120 120 60 120 90 90 120 60 120 0 120 0 60 60 0 0 0 60 30 90 60 120 120 120 '/%3E%3C/svg%3E");
}

.flake {
  animation-duration: inherit;
  animation-name: snowing;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.flake.small {
  opacity: 0.7;
}
.flake.slow {
  animation-duration: 5s;
}
.flake.fast {
  animation-duration: 3s;
}

@keyframes snowing {
  from {
    transform: translate(0, -100px);
  }
  to {
    transform: translate(0, 100px);
  }
}

.lights {
  fill: none;
  stroke: #5f4c6c;
  stroke-width: 2;
}

.lights #button {
  cursor: pointer;
}

.bell:hover {
  transform-origin: center 30%;
}

.bell:hover,
.bell:hover .bell-tongue {
  animation-duration: 0.5s;
  animation-delay: -0.25s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-name: ring;
}

@keyframes ring {
  from {
    transform: rotate(-20deg);
  }
  to {
    transform: rotate(20deg);
  }
}

.detail-screen {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 100;
  display: grid;
  grid-template-columns: auto auto;
}

.detail-body a,
.detail-body p {
  color: var(--color6);
}

@media (min-width: 770px) {
  .detail-screen {
    grid-template-columns: minmax(400px, auto) auto;
  }
}

@media (min-width: 1200px) {
  .detail-screen {
    width: 1200px;
    height: calc(100% - 30px);
    border-radius: 10px;
  }
  .details {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
}

.content {
  display: flex;
  justify-content: center;
  padding: 50px;
}

@media (min-width: 770px) {
  .content {
    padding: 50px 0 50px 0;
  }
}
.closeBases,
.close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: gray;
  cursor: pointer;

  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 100 100'><path d='M 30 30 L 70 70 M 30 70 L 70 30' stroke='white' stroke-width='10' /></svg>");
}

.details {
  padding: 20px;
  background-color: #333333;
  overflow: scroll;
  color: black;
  background-color: lightgray;
}

.code-section {
  margin-top: 3em;
  margin-bottom: 3em;
}

.source-code {
  color: white;
  background-color: #333333;
  padding: 2em;
  border-radius: 5px;
  overflow: scroll;
}

.twitter {
  color: #f5eed7;
  font-size: 0.8em;
  background-color: #16212b;
}
.twitter.hide {
  display: none;
}

#youtube,
#youtube-card {
  display: none;
}

@media (min-height: 425px) {
  /** Youtube logo by https://codepen.io/alvaromontoro */
  #youtube {
    z-index: 50;
    width: 100px;
    display: block;
    height: 70px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: red;
    border-radius: 50% / 11%;
    transform: scale(0.8);
    transition: transform 0.5s;
  }

  #youtube:hover,
  #youtube:focus {
    transform: scale(0.9);
  }

  #youtube::before {
    content: "";
    display: block;
    position: absolute;
    top: 7.5%;
    left: -6%;
    width: 112%;
    height: 85%;
    background: red;
    border-radius: 9% / 50%;
  }

  #youtube::after {
    content: "";
    display: block;
    position: absolute;
    top: 20px;
    left: 40px;
    width: 45px;
    height: 30px;
    border: 15px solid transparent;
    box-sizing: border-box;
    border-left: 30px solid white;
  }

  #youtube span {
    font-size: 0;
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  #youtube:hover + #youtube-card {
    z-index: 49;
    display: block;
    position: fixed;
    bottom: 12px;
    right: 10px;
    padding: 25px 130px 25px 25px;
    width: 300px;
    background-color: white;
  }
}

body#dolby-calendar {
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}

html {
  height: -webkit-fill-available;
}

body#dolby-calendar {
  background-color: var(--bg-color);
  font-family: "avenir-regular";
  font-size: 20px;
}

body#dolby-calendar div.App {
  flex-direction: column;
}

.hide {
  display: none;
}

#footer-margin {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  color: var(--color6);
  font-size: 0.8em;
  font-family: "avenir-regular";
}

h1,
h2 {
  text-transform: uppercase;
  color: var(--color5);
}
h1 {
  font-family: "avenir-bold";
  font-size: 2em;
}
h2 {
  font-family: "avenir-book";
  font-size: 1.5em;
}

strong,
b {
  font-family: "avenir-bold";
}

.detail-screen {
  opacity: 1;
  transition: all 2s;
}
.code-section {
  display: none;
}

.detail-screen.cn-show {
  opacity: 1;
}

.grid .day {
  width: 120px;
  height: 120px;
  background-color: var(--color5);
}

.grid .day.d_15,
.grid .day.d_18,
.grid .day.d_23 {
  width: 250px;
}

.grid .day.d_2,
.grid .day.d_10,
.grid .day.d_11,
.grid .day.d_14 {
  height: 250px;
}

.grid .day svg,
.grid .day img {
  max-width: 75%;
  height: auto;
}

.grid .block .day .cover,
.grid .big-block .day .cover,
.grid .small-block .day .cover {
  color: white;
  font-size: 36px;
  /*font-family: 'Montserrat', sans-serif;*/
  font-weight: 700;
}

/* ------ bloque 1 --------- */
/* día 1 */
.block.block1 .day:nth-child(1) {
  background-color: var(--color2);
}
.block.block1 .day:nth-child(1) .cover {
  background-image: url("../img/d1.svg");
  background-position: center;
  background-size: cover;
  color: var(--color6);
}
/* día 2 */
.block.block1 .day:nth-child(2) .cover {
  background-image: url("../img/d2.svg");
  background-position: center;
  background-size: cover;
  color: var(--color6);
}
/* día 3 */
.block.block1 .day:nth-child(3) {
  background-color: var(--color3);
}
.block.block1 .day:nth-child(3) .cover {
  background-color: var(--color3);
}
/* día 4 */
.block.block1 .day:nth-child(4) {
  background-color: var(--color6);
}
.block.block1 .day:nth-child(4) .cover {
  background-image: url("../img/d4.svg");
  background-position: center;
  background-size: cover;
  color: var(--bg-color);
}
/* día 5 */
.block.block1 .day:nth-child(5) {
  background-color: var(--color4);
}
.block.block1 .day:nth-child(5) .cover {
  background-image: url("../img/d5.svg");
  background-position: center;
  background-size: cover;
}

/* ------ bloque 2 --------- */
/* día 6 */
.block.block2 .day:nth-child(1) .cover {
  background-color: var(--color5);
  color: white;
}
/* día 7 */
.block.block2 .day:nth-child(2) {
  background-color: var(--color2);
}
.block.block2 .day:nth-child(2) .cover {
  color: var(--color6);
  background-color: var(--color2);
}
/* día 8 */
.block.block2 .day:nth-child(3) {
  background-color: var(--color3);
}
.block.block2 .day:nth-child(3) .cover {
  background-image: url("../img/d8.svg");
  background-position: center;
  background-size: cover;
  color: var(--color6);
}
/* día 9 */
.block.block2 .day:nth-child(4) {
  background-color: var(--color6);
}
.block.block2 .day:nth-child(4) .cover {
  background-image: url("../img/d9.svg");
  background-position: center;
  background-size: cover;
  color: var(--color6);
  background-color: var(--color6);
}
/* día 10 */
.block.block2 .day:nth-child(5) .cover {
  background-image: url("../img/d10.svg");
  background-position: center;
  background-size: cover;
}
.day.d_10 img {
  max-width: none;
  width: 65%;
}

#cn-detail .content img[src="img/i_10.svg"] {
  min-width: auto;
  width: 50%;
}

/* ------ bloque 3 --------- */
/* día 11 */
.block.block3 .day:nth-child(1) {
  background-color: var(--color2);
}
.block.block3 .day:nth-child(1) .cover {
  background-image: url("../img/d11.svg");
  background-position: center;
  background-size: cover;
  background-color: var(--color2);
  color: var(--color6);
}
/* día 12 */
.block.block3 .day:nth-child(2) {
  background-color: var(--color4);
}
.block.block3 .day:nth-child(2) .cover {
  background-color: var(--color4);
}
/* día 13 */
.block.block3 .day:nth-child(3) .cover {
  background-image: url("../img/d13.svg");
  background-position: center;
  background-size: cover;
  background-color: white;
  color: var(--color4);
}
/* día 14 */
/*
.day.d_14 img {
  max-width: none;
  width: 95%;
}
*/
.block.block3 .day:nth-child(4) {
  background-color: var(--color4);
}
.block.block3 .day:nth-child(4) .cover {
  background-image: url("../img/d14.svg");
  background-position: center;
  background-size: cover;
  color: var(--color6);
}

/* ------ bloque 4 --------- */
/* día 15 */

.day.d_15 img {
  max-width: none;
  width: 30%;
}

.big-block.block4 .day:nth-child(1) .cover {
  background-color: var(--color5);
}
/* día 16 */
.big-block.block4 .day:nth-child(2) {
  background-color: var(--color6);
}
.big-block.block4 .day:nth-child(2) .cover {
  background-image: url("../img/d16.svg");
  background-position: center;
  background-size: cover;
  color: var(--color1);
}
/* día 17 */
.big-block.block4 .day:nth-child(3) {
  background-color: var(--color3);
}
.big-block.block4 .day:nth-child(3) .cover {
  background-image: url("../img/d17.svg");
  background-position: center;
  background-size: cover;
  color: var(--color6);
}
/* día 18 */
.day.d_18 img {
  max-width: none;
  width: 30%;
}
.big-block.block4 .day:nth-child(4) {
  background-color: var(--color4);
}
.big-block.block4 .day:nth-child(4) .cover {
  background-image: url("../img/d18.svg");
  background-position: center;
  background-size: cover;
  color: white;
}
/* día 19 */
.big-block.block4 .day:nth-child(5) {
  background-color: var(--color6);
}
.big-block.block4 .day:nth-child(5) .cover {
  background-color: var(--color6);
}
/* día 20 */
.big-block.block4 .day:nth-child(6) {
  background-color: var(--color3);
}
.big-block.block4 .day:nth-child(6) .cover {
  background-image: url("../img/d20.svg");
  background-position: center;
  background-size: cover;
  background-color: var(--color4);
}
/* día 21 */
.big-block.block4 .day:nth-child(7) {
  background-color: var(--color2);
}
.big-block.block4 .day:nth-child(7) .cover {
  background-image: url("../img/d21.svg");
  background-position: center;
  background-size: cover;
}

/* ------ bloque 5 --------- */
/* día 22 */
.small-block.block5 .day:nth-child(1) {
  background-color: var(--color6);
}
.small-block.block5 .day:nth-child(1) .cover {
  background-image: url("../img/d22.svg");
  background-position: center;
  background-size: cover;
  color: white;
}
/* día 23 */
.small-block.block5 .day:nth-child(2) {
  background-color: var(--color4);
}
.small-block.block5 .day:nth-child(2) .cover {
  background-image: url("../img/d23.svg");
  background-position: center;
  background-size: cover;
  background-color: white;
  color: var(--color5);
}

.day.d_23 img {
  max-width: none;
  width: 30%;
}

/* día 24 */
.small-block.block5 .day:nth-child(3) .cover {
  background-color: var(--color5);
  color: white;
}
/* día 25 */
.small-block.block5 .day:nth-child(4) {
  background-color: var(--color4);
}
.small-block.block5 .day:nth-child(4) .cover {
  background-image: url(../img/d25.svg);
  background-position: center;
  background-size: 70%;
  background-repeat: no-repeat;
  background-color: var(--color4);
}

/* --------- header ------------ */

header img {
  display: block;
  height: auto;
}

header img.cn-main-logo {
  max-width: 200px;
}

header img.cn-cal-logo {
  max-width: 330px;
  padding: 15px 0px;
}

/* ------------- detail -------- */

#cn-detail {
  background-color: transparent;
  width: 820px;
  height: 880px;
  margin-top: 100px;
}

#cn-detail > * {
  border-radius: 0px;
}

#cn-detail .content {
  background-color: var(--color5);
  padding: 0;
  margin-top: 120px;
  align-items: center;
  border: 10px solid var(--color5);
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

#cn-detail .details {
  background-color: white;
  overflow: auto;
  border: 10px solid var(--color5);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
.closeBases,
#cn-detail .close {
  background-position: center;
  background-size: contain;
  position: absolute;
  border-radius: 15px;
  width: 26px;
  height: 26px;
  background-color: var(--color2);
}

ul.tags {
  position: absolute;
  bottom: 10px;
  padding: 0;
}

ul.tags li {
  list-style-type: none;
  display: inline-block;
  color: white;
  background-color: var(--color5);
  padding: 12px 24px;
  margin-right: 5px;
  border-radius: 35px;
}

#cn-detail .content img {
  width: 60%;
  height: auto;
}

@media (min-width: 770px) {
  body#dolby-calendar .App {
    height: max(calc(100vh - 150px), 900px);
  }
}

@media (max-width: 770px) {
  body#dolby-calendar div.App {
    flex-direction: row;
  }
  #cn-detail {
    width: calc(100vw - 20px);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 20px);
    margin-top: 10px;
    overflow-y: auto;
    margin-bottom: 20px;
  }
  #cn-detail .content,
  #cn-detail .details {
    margin-top: 0px;
    border-radius: 15px;
  }
  #cn-detail .content {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    max-height: 50vh;
  }

  #cn-detail .details {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    overflow-y: auto;
  }

  ul.tags {
    position: relative;
  }
  body#dolby-calendar .grid {
    padding: 50px 0px;
  }

  #cn-detail .content img {
    width: auto;
    height: 30vh;
    padding: 5vh 0;
  }

  #cn-detail .content img[src="img/i_25.svg"] {
    width: auto;
    height: 10vh;
    padding: 2vh 0;
  }

  ul.tags {
    margin-bottom: 0px;
    margin-top: 30px;
  }
  ul.tags li {
    display: block;
    text-align: center;
    margin-right: 0px;
    margin-top: 20px;
  }

  h1 {
    font-size: 26px;
  }
  h2 {
    font-size: 1.2em;
  }
}

div[data-class="cn-form"] .details form input[type]:not([type="checkbox"]),
div[data-class="cn-form"] .details form select,
div[data-class="cn-form"] .details form button {
  display: block;
  width: 100%;
  padding: 10px 20px;
  margin-bottom: 20px;
  color: var(--color6);
  border: 2px solid var(--color5);
  border-radius: 35px;
  font-size: 18px;
  font-family: "avenir-regular", sans-serif;
}

div[data-class="cn-form"]
  .details
  form
  input[type]:not([type="checkbox"]):active,
div[data-class="cn-form"]
  .details
  form
  input[type]:not([type="checkbox"]):focus,
div[data-class="cn-form"] .details form select:active,
div[data-class="cn-form"] .details form select:focus,
div[data-class="cn-form"] .details form button:active,
div[data-class="cn-form"] .details form button:focus {
  border-color: var(--color5) !important;
  outline: none;
}

#message {
  display: none;
}
#message h3 {
  font-size: 30px;
  background-color: var(--color3);
  padding: 25px;
  border-radius: 10px;
  color: white;
}

#privacidadLabel {
  padding-bottom: 30px !important;
  color: var(--color6);
  line-height: 3;
  font-size: 16px;
}

#privacidadLabel input {
  margin-right: 8px;
}

#privacidadLabel > * {
  vertical-align: baseline;
}

#privacidadLabel a {
  cursor: pointer;
  text-decoration: underline;
}

.socials {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
  margin-top: 30px;
}

.socials > div {
  display: inline-block;
}

.copyurl > div {
  background-color: var(--color6);
  color: white;
  padding: 10px 20px;
  border-radius: 35px;
  text-align: center;
  cursor: pointer;
  font-size: 18px;
}

.copyurl {
  margin-top: 30px;
}
#status-copied {
  margin-top: 15px;
  text-align: center;
  font-size: 14px;
  color: var(--color6);
  font-family: "avenir-regular", sans-serif;
}

.detail-screen .content img {
  min-width: 280px;
  height: auto;
}

div[data-class="--color1"]#cn-detail .content {
  border: 10px solid var(--color1);
  background-color: var(--color1);
}

div[data-class="--color1"]#cn-detail .details {
  border: 10px solid var(--color1);
}
div[data-class="--color2"]#cn-detail .content {
  border: 10px solid var(--color2);
  background-color: var(--color2);
}

div[data-class="--color2"]#cn-detail .details {
  border: 10px solid var(--color2);
}

div[data-class="--color3"]#cn-detail .content {
  border: 10px solid var(--color3);
  background-color: var(--color3);
}

div[data-class="--color3"]#cn-detail .details {
  border: 10px solid var(--color3);
}

div[data-class="cn-form"]#cn-detail .content,
div[data-class="--color4"]#cn-detail .content {
  border: 10px solid var(--color4);
  background-color: var(--color4);
}
div[data-class="cn-form"]#cn-detail .details,
div[data-class="--color4"]#cn-detail .details {
  border: 10px solid var(--color4);
}

div[data-class="--color5"]#cn-detail .content {
  border: 10px solid var(--color5);
  background-color: var(--color5);
}

div[data-class="--color5"]#cn-detail .details {
  border: 10px solid var(--color5);
}

div[data-class="--color6"]#cn-detail .content {
  border: 10px solid var(--color6);
  background-color: var(--color6);
}

div[data-class="--color6"]#cn-detail .details {
  border: 10px solid var(--color6);
}

#cn-link a {
  text-decoration: none;
}

#cn-link {
  margin-top: 10px;
  margin-bottom: 10px;
}

h2#h2-cn {
  font-size: 24px;
  margin-top: 10px;
}
h1#h1-cn {
  font-size: 30px;
}

::placeholder {
  color: var(--color6);
  opacity: 0.7; /* Firefox */
}

.App.showing-detail .grid .block,
.App.showing-detail .grid .big-block,
.App.showing-detail .grid .small-block {
  opacity: 0;
}

#dolbyForm button {
  border: 0;
  background-color: var(--color6);
  color: white;
  cursor: pointer;
  padding: 12px 20px 10px !important;
}

#dolbyForm button:hover {
  background-color: var(--color5);
}

#dolbyForm select {
  appearance: none;
  background-image: url(../img/down-arrow.svg);
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-position: 95%;
}

#message a {
  cursor: pointer;
}

#message a:hover {
  opacity: 0.7;
}

#WSshareButton {
  display: inline;
}
#WSshareButtonMobile {
  display: none;
}

@media screen and (max-width: 770px) {
  #dolbyForm button,
  #message {
    margin-bottom: 150px;
  }
  #WSshareButton {
    display: none;
  }
  #WSshareButtonMobile {
    display: inline;
  }
}