@font-face {
  font-family: 'YS Text';
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  src:
          url(//yastatic.net/s3/home/fonts/ys/1/text-regular.woff2) format('woff2'),
          url(//yastatic.net/s3/home/fonts/ys/1/text-regular.woff) format('woff')
}

@font-face {
  font-family: 'YS Text';
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  src:
          url(//yastatic.net/s3/home/fonts/ys/1/text-medium.woff2) format('woff2'),
          url(//yastatic.net/s3/home/fonts/ys/1/text-medium.woff) format('woff')
}

@font-face {
  font-family: 'YS Text';
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
  src:
          url(//yastatic.net/s3/home/fonts/ys/1/text-bold.woff2) format('woff2'),
          url(//yastatic.net/s3/home/fonts/ys/1/text-bold.woff) format('woff')
}

body {
  font-family: 'YS Text', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-feature-settings: 'liga', 'kern';
  -moz-font-feature-settings: 'liga', 'kern';
  font-feature-settings: 'liga', 'kern';
  /*width: 100%;*/
  /*height: 100%;*/
  /*padding: 0;*/
  /*margin: 0;*/
  /*background: #bb71f3;*/
  /*background: -moz-linear-gradient(-45deg, #bb71f3 0%, #3d4d91 100%);*/
  /*background: -webkit-linear-gradient(-45deg, #bb71f3 0%, #3d4d91 100%);*/
  /*background: linear-gradient(135deg, #bb71f3 0%, #3d4d91 100%);*/
  /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bb71f3', endColorstr='#3d4d91', GradientType=1);*/
  /*-webkit-tap-highlight-color: rgba(255, 255, 255, 0);*/
}

h1, h2, h3, h4, h5 { letter-spacing: -.03em; }

/* cuip extend */
.form-control.is-loading {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCI+PHBhdGggZD0iTTQzLjkzNSAyNS4xNDVjMC0xMC4zMTgtOC4zNjQtMTguNjgzLTE4LjY4My0xOC42ODMtMTAuMzE4IDAtMTguNjgzIDguMzY1LTE4LjY4MyAxOC42ODNoNC4wNjhjMC04LjA3MSA2LjU0My0xNC42MTUgMTQuNjE1LTE0LjYxNXMxNC42MTUgNi41NDMgMTQuNjE1IDE0LjYxNWg0LjA2OHoiPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZVR5cGU9InhtbCIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIGZyb209IjAgMjUgMjUiIHRvPSIzNjAgMjUgMjUiIGR1cj0iMC42cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L3BhdGg+PC9zdmc+);
    background-repeat: no-repeat;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: calc(1.5em + 0.75rem);
    background-position: right calc(0.375em + 0.1875rem) center;
}

.isloop label {
  font-size: .765625rem;
  margin-right: 1em;
}

.btn.g-dl .c-icon,
.switchRound button { margin:0 .4rem 0 0; }
.btn.g-send .c-icon { margin:-3px .4rem 0 0; }

.c-admin .gameboard.table th { border-top: 0; }

.c-admin td.actions { padding: .5rem; }

.c-admin .btn .c-icon.text-right,
.c-admin .nav-link .c-icon { margin: -.21875rem .21875rem 0 -.21875rem; }
.c-admin .nav-link .c-icon { margin-right: .5rem; }
.c-admin .g-edit table.gameboard { margin-bottom: 0; }
.btnAddBlock .form-control-sm { width: 3em; }
.btnRemoveRound { display: none; }


.c-admin .btn.g-progress { font-weight: bold; }
.c-admin .btn.g-progress svg { margin-right: .5rem; }


table.gameboard td.play {
  cursor: pointer;
}
table.gameboard td.play .btnPlay {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIyMHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMCAyMCIgd2lkdGg9IjIwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iIzAwMDAwMCIgaWQ9Ikljb25zLUFWIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTY4LjAwMDAwMCwgLTg1LjAwMDAwMCkiPjxnIGlkPSJwbGF5LWNpcmNsZS1vdXRsaW5lIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNjguMDAwMDAwLCA4NS4wMDAwMDApIj48cGF0aCBkPSJNOCwxNC41IEwxNCwxMCBMOCw1LjUgTDgsMTQuNSBMOCwxNC41IFogTTEwLDAgQzQuNSwwIDAsNC41IDAsMTAgQzAsMTUuNSA0LjUsMjAgMTAsMjAgQzE1LjUsMjAgMjAsMTUuNSAyMCwxMCBDMjAsNC41IDE1LjUsMCAxMCwwIEwxMCwwIFogTTEwLDE4IEM1LjYsMTggMiwxNC40IDIsMTAgQzIsNS42IDUuNiwyIDEwLDIgQzE0LjQsMiAxOCw1LjYgMTgsMTAgQzE4LDE0LjQgMTQuNCwxOCAxMCwxOCBMMTAsMTggWiIgaWQ9IlNoYXBlIi8+PC9nPjwvZz48L2c+PC9zdmc+');
  width: 1.5em;
  height: 1.5em;
  background-repeat: no-repeat;
  opacity: .5;
}
table.gameboard td.play .btnPause {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIyMHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMCAyMCIgd2lkdGg9IjIwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iIzAwMDAwMCIgaWQ9Ikljb25zLUFWIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDIuMDAwMDAwLCAtODUuMDAwMDAwKSI+PGcgaWQ9InBhdXNlLWNpcmNsZS1vdXRsaW5lIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0Mi4wMDAwMDAsIDg1LjAwMDAwMCkiPjxwYXRoIGQ9Ik03LDE0IEw5LDE0IEw5LDYgTDcsNiBMNywxNCBMNywxNCBaIE0xMCwwIEM0LjUsMCAwLDQuNSAwLDEwIEMwLDE1LjUgNC41LDIwIDEwLDIwIEMxNS41LDIwIDIwLDE1LjUgMjAsMTAgQzIwLDQuNSAxNS41LDAgMTAsMCBMMTAsMCBaIE0xMCwxOCBDNS42LDE4IDIsMTQuNCAyLDEwIEMyLDUuNiA1LjYsMiAxMCwyIEMxNC40LDIgMTgsNS42IDE4LDEwIEMxOCwxNC40IDE0LjQsMTggMTAsMTggTDEwLDE4IFogTTExLDE0IEwxMywxNCBMMTMsNiBMMTEsNiBMMTEsMTQgTDExLDE0IFoiIGlkPSJTaGFwZSIvPjwvZz48L2c+PC9nPjwvc3ZnPg==');
  width: 1.5em;
  height: 1.5em;
  background-repeat: no-repeat;
  opacity: .5;
}
table.gameboard td.answer {
  width: 99%;
}
table.gameboard td.num {
  white-space: nowrap;
  text-align: center;
  cursor: default;
}
table.gameboard td.num div {
    width: 1.5em;
}
table.gameboard td.remove {
    padding: .5em;
}
table.gameboard td.remove .btnRemoveQuestion {
    padding: .5em .6em;
}
table.gameboard td.remove .btn .c-icon {
    margin: -1px 0 0 1px;
}
/*.c-admin .btn.btnAddQuestion .c-icon {*/
/*    margin: -1px 0 0 1px;*/
/*}*/
table.gameboard td.result {
  white-space: nowrap;
  text-align: center;
  cursor: default;
  position: relative;
  padding: 0;
  z-index: 0;
}
table.gameboard td.result .ani {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

@keyframes grow {
  0%  { transform: scale(0); border-radius: 50%; }
  100% { transform: scale(1); border-radius: 0; }
}

table.gameboard td.result span {
    user-select: none;
    display: block;
    padding: .75rem .85rem;
}
table.gameboard td.result.checkable {
  cursor: pointer;
}
table.gameboard td.result.correct .ani { background-color: #b7ffde; animation: grow .3s ease-in; }
table.gameboard td.result.wrong .ani { background-color: #FFE0EC ; animation: grow .3s ease-in; }

table.gameboard td.editing {
  padding: 0;
}

table.gameboard td.editing input {
  padding: .75rem;
  border: 0;
  background-color: transparent;
  width: 100%;
}
/*table.gameboard td.editing input:focus {
  outline: none !important;
  box-shadow: 0 0 0 1px #e55353;
}*/

table.gameboard td.answer.someoneEditing {
    background-color: #cfffe9;
}

table.gameboard td.answer.spoiler {
    /*color: transparent;*/
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}

table.gameboard td.answer.spoiler span {
    display: none;
}

table.gameboard td.comment input,
table.gameboard td.comment span,
table.gameboard td em.help { color: #bbb; }

table.gameboard td.answer {
  position: relative;
  z-index: 0;
}
table.gameboard td.answer #progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 10%;
  height: 100%;
  background-color: rgba(96, 193, 255, 0.11);
  z-index: -1;
}

table.gameboard .answ tr, table.gameboard .answ td {
    padding: 0;
    margin: 0;
}

table.gameboard .answ div {
    font-size: .8em;
    font-weight: bold;
    padding: .6em .8em;
    background-color: #fff9ec;
    color: #dbac45;
    cursor: default;
}

.searchresults table td button.share {
    padding: 0 0 1em 1em;
    margin:0;
    border:0;
}
.searchresults table td.album {
    padding: 0;
}
.searchresults table td.album img {
    pointer-events: none;
    user-select: none;
}
.searchresults table td.album .btnPlay,
.searchresults table td.album .btnPause {
    margin: .3rem;
}
.searchresults .card-body {
    padding: .25rem;
}


.editgame table.gameboard.table td.result {
  padding: 0;
}

.g-guess table.gameboard.table td.result { color: #ddd; }
.g-guess table.gameboard.table td.result.correct,
.g-guess table.gameboard.table td.result.wrong { color: #777; }
.g-guess .gameboard .card-header { display: none; }
.g-guess .gameboard .card-body { padding: 0; }
.g-guess .gameboard .card { border: 0; }
.g-guess .gameboard .card-body table.gameboard { margin: 0; }

.editgame table.gameboard.table td.result input {
  width: 3rem;
  padding: .75rem;
  border: 0;
  background-color: transparent;
  text-align: center;
}
.editgame .card-header input { text-align: center; }
.editgame.sortable { margin-bottom: 1.5rem; }
.editgame.sortable .card-body { display: none; }
.editgame.sortable .card-header { padding: 0; border:0; }
.editgame .card-header .handle { display: none; }
.editgame .card-header .form-check-inline { width: 100%; }
.editgame.sortable .card-header .handle { cursor: move; display: block; padding: .55rem .55rem .35rem; }
.editgame.sortable .card-header .input-group-prepend { }
.editgame.sortable .card { margin-bottom: 0; }
.editgame .d-md-block { display: none; }
/*
.editgame .card-body.hide {
  transition: all .3s ease-in;
  height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
}
.editgame .card-body {
  transition: all .3s ease-out;
}
*/

.btnPointsAll { width: auto; }
.btnPointsAll input { width: 3em!important; }

.g-add .editgame td.answer.editing input:-ms-input-placeholder { color: #ccc; }
.g-add .editgame td.answer.editing input::-ms-input-placeholder { color: #ccc; }
.g-add .editgame td.answer.editing input::placeholder { color: #ccc; }

.flex {
  display: flex;
  flex-direction: row;
}

#status, #progressBar { display: none; }


.min {
  color: #bbb;
}
.gametotalc {
  font-weight: bold;
}
.help-block {
  font-style: italic;
  font-family: arial;
  font-size: smaller;
}



.g-play { margin-bottom: 2rem; }
.g-edit { margin-bottom: 4rem; }
.g-add #playerControls { display: none; }

#playerControls {
  z-index: 5;
  text-align:center;
  height: 6rem;
  width: 90%;
  min-width: 300px;
  max-width: 400px;
  position: fixed;
  bottom:0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 1em 1em 0 0;
  background-color: #fff;
  opacity: .8;
  border: .3rem solid #eee;
  border-bottom: 0;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
}

#ppBar {
  margin: 1em;
  cursor: pointer;
  user-select: none;
}

#ppBar .progress-bar {
  transition: none;
  background-color: rgba(96, 193, 255, 0.4)!important;
}

#ppButtons button {
  user-select: none;
  outline: none;
  background: transparent;
  opacity: 0.9;
  border: 0;
}
#ppButtons button:hover { opacity: 1; }
#ppButtons button:active { transform: scale(.96); }

#playerControls .loop,
#ppButtons .prev,
#ppButtons .play,
#ppButtons .pause,
#ppButtons .next {
  display: inline-block;
  margin-left: .4em;
  border-radius: .7em;
  background-color: #eee;
  background-size: 1.5em;
  background-position: center center;
  background-repeat: no-repeat;
  width: 3em;
  height: 3em;
}

#playerControls .loop {
  opacity: .3;
  margin-left:1em;
  width: 3em;
  height: 3em;
  background-size: 1.6em;
  float: left;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMzQ3IDEwMUwyNTEgNWMtNC01LTExLTYtMTctNC02IDMtMTAgOS0xMCAxNXY0OGgtMTZBMjA4IDIwOCAwIDAwMiAzMDBjNiA0OSAzMSA5MiA2NiAxMjMgNiA2IDE2IDUgMjItMWw0NC00NGM2LTYgNi0xNyAwLTIzLTE4LTE1LTMxLTM2LTM1LTYwLTE1LTcyIDQwLTEzNSAxMDktMTM1aDE2djQ4YzAgNiA0IDEyIDEwIDE1IDYgMiAxMyAxIDE3LTRsOTYtOTZjNy02IDctMTYgMC0yMnpNNTEwIDIxMmMtNi00OS0zMS05Mi02Ni0xMjMtNi02LTE2LTUtMjIgMWwtNDQgNDRjLTYgNi02IDE3IDAgMjMgMTggMTUgMzEgMzYgMzUgNjAgMTUgNzItNDAgMTM1LTEwOSAxMzVoLTE2di00OGMwLTYtNC0xMi0xMC0xNXMtMTMtMS0xNyA0bC05NiA5NmMtNyA2LTcgMTYgMCAyMmw5NiA5NmM0IDUgMTEgNiAxNyA0IDYtMyAxMC05IDEwLTE1di00OGgxNmMxMjQgMCAyMjMtMTA5IDIwNi0yMzZ6Ii8+PC9zdmc+');
}

#playerControls .loop:hover { opacity: .4; }
#playerControls .loop.active { opacity: .9; }
#playerControls .loop.active:hover { opacity: 1; }

#ppButtons .love {
  margin-right:1em;
  width: 3em;
  height: 3em;
  background-size: 1.6em;
  float: right;
}

#ppButtons .prev,
#ppButtons .next {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OTMuNzk2IDQ5My43OTYiPjxwYXRoIGQ9Ik0zNTUuOTM4IDIwMC45NTZMODEuNDE0IDEyLjEyOEM3MC4xMzQgNC4zNTIgNTguNDAyLjI0OCA0OC4zNTguMjQ4Yy0yMi4wNTIgMC0zNi42NzIgMTguNDk2LTM2LjY3MiA0OC4yNnYzOTcuMDM2YzAgMTQuNTQgNC4yMjggMjYuNjg4IDEwLjQ5NiAzNS4xNDQgNi4zNjQgOC41NzIgMTYuMzIgMTMuMTA4IDI3LjA3NiAxMy4xMDggMTAuMDQgMCAyMS4zMDgtNC4xMTIgMzIuNTg0LTExLjg3NmwyNzQuMjc2LTE4OC44MjhjMTcuNjMyLTEyLjE1MiAyNy4zLTI4LjUwOCAyNy4yOTYtNDYuMDc2IDAtMTcuNTYtOS44Mi0zMy45MTYtMjcuNDc2LTQ2LjA2ek00NTYuNDQ2IDQ5My42NzJsLS4yOTMtLjAwNGMtLjA0OCAwLS4wOTUuMDA0LS4xNDMuMDA0aC40MzZ6TTQ1NS42MzggMEw0NDQuMjkuMDMyYy0xNC44NiAwLTI3LjcyNCAxMi4xMTItMjcuNzI0IDI2Ljk5MnY0MzkuMzY4YzAgMTQuODk2IDEyLjY1MiAyNy4xMjQgMjcuNTMyIDI3LjEyNGwxMi4wNTUuMTUyYzE0LjgwNS0uMDc5IDI1Ljk1Ny0xMi40MTIgMjUuOTU3LTI3LjI1MlYyNi45OTZDNDgyLjExIDEyLjExNiA0NzAuNTEgMCA0NTUuNjM4IDB6Ii8+PC9zdmc+");
}

#ppButtons .prev { transform: rotate(180deg); }
#ppButtons .prev:active { transform: rotate(180deg) scale(.96); }

#ppButtons .next {
}

#ppButtons .play {
  transition: .1s ease-in;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OTQuMTQ4IDQ5NC4xNDgiPjxwYXRoIGQ9Ik00MDUuMjg0IDIwMS4xODhMMTMwLjgwNCAxMy4yOEMxMTguMTI4IDQuNTk2IDEwNS4zNTYgMCA5NC43NCAwIDc0LjIxNiAwIDYxLjUyIDE2LjQ3MiA2MS41MiA0NC4wNDR2NDA2LjEyNGMwIDI3LjU0IDEyLjY4IDQzLjk4IDMzLjE1NiA0My45OCAxMC42MzIgMCAyMy4yLTQuNiAzNS45MDQtMTMuMzA4bDI3NC42MDgtMTg3LjkwNGMxNy42Ni0xMi4xMDQgMjcuNDQtMjguMzkyIDI3LjQ0LTQ1Ljg4NC4wMDQtMTcuNDgtOS42NjQtMzMuNzY0LTI3LjM0NC00NS44NjR6Ii8+PC9zdmc+");
}

#ppButtons .pause {
  transition: .1s ease-in;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMTgxLjMzMyAwSDc0LjY2N2MtMTcuNjQzIDAtMzIgMTQuMzU3LTMyIDMydjQ0OGMwIDE3LjY0MyAxNC4zNTcgMzIgMzIgMzJoMTA2LjY2N2MxNy42NDMgMCAzMi0xNC4zNTcgMzItMzJWMzJjLS4wMDEtMTcuNjQzLTE0LjM1OC0zMi0zMi4wMDEtMzJ6TTQzNy4zMzMgMEgzMzAuNjY3Yy0xNy42NDMgMC0zMiAxNC4zNTctMzIgMzJ2NDQ4YzAgMTcuNjQzIDE0LjM1NyAzMiAzMiAzMmgxMDYuNjY3YzE3LjY0MyAwIDMyLTE0LjM1NyAzMi0zMlYzMmMtLjAwMS0xNy42NDMtMTQuMzU4LTMyLTMyLjAwMS0zMnoiLz48L3N2Zz4=");
}

#ppButtons .loading {
  cursor: default;
  vertical-align: top;
  background-image: none;
  border: .7em transparent solid;
  border-top: .7em #ddd solid;
  border-bottom: .7em #ddd solid;
  border-radius: 50%;
  -webkit-animation: spin1 2s infinite linear;
  animation: spin1 2s infinite linear;
}

@-webkit-keyframes spin1 {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes spin1 {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

/*#ppButtons button.play,
#ppButtons button.pause {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  transition: border 200ms;
  border: 0 solid transparent;
}

#ppButtons button.play {
  border-top: 50px solid transparent;
  border-right: 0 solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 100px solid #333;
}

#ppButtons button.pause {
  border-top: 0 solid transparent;
  border-right: 33.3333333333px solid #333;
  border-bottom: 0 solid transparent;
  border-left: 33.3333333333px solid #333;
}*/

.steps-head {
  text-align: center;
}

.steps-head h2 {
  text-transform: uppercase;
  font-weight: normal
}

.steps-body {
  position: relative;
}

.steps-body fieldset {
  border: 0 none;
  border-radius: 0.5rem;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  position: relative;
}

.steps-body fieldset:not(:first-of-type) {
  display: none;
}

fieldset.step3 { margin-bottom: 3rem; }
fieldset.step1 .custom-file-label { overflow: hidden; line-height: 1.6; }

.steps {
  margin: 4em 0;
  overflow: hidden;
  color: #aaa;
  padding: 0;
  z-index: 0;
  position: relative;
  cursor: default;
}

.steps li {
  list-style-type: none;
  font-size: 15px;
  width: 25%;
  float: left;
  position: relative;
  font-weight: 400;
}

.steps li.done { cursor: pointer; }

.steps .step1:before { content: "\e97a"; }
.steps .step2:before { content: "\eb1a"; }
.steps .step3:before { content: "\e967"; }
.steps .step4:before { content: "\ea55"; }

.steps li:before {
  font-family: 'CoreUI-Icons-Free';
  -webkit-font-smoothing: antialiased;
  font-size: 24px;
  line-height: 50px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: block;
  color: #e4e5e6;
  background: #bbb;
  margin: 0 auto 10px auto;
}

.steps li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: #bbb;
  position: absolute;
  left: 0;
  top: 25px;
  z-index: -1
}

.steps li.active:before { color: #fff }
.steps li.active { color: #20a8d8 }
.steps li.active:before,
.steps li.active:after { background: #20a8d8 }

.progress-block .fit-image {
  width: 100%;
  object-fit: cover
}

#publishdatetime { width: 10em; }


.g-start {
    min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
    min-height: 100vh; /* These two lines are counted as one :-)       */

    display: flex;
    align-items: center;
}

/* additional styles */
.otherbds {
    font-style: italic;
    font-family: Arial;
    font-size: 0.9em;
    color: #bbb;
    margin-left: 1em;
}

#goSearch { }
#searchsong { width: 20rem; }

button#goFullscreen {  }

#fullscreen-overlay {
    position: fixed;
    background-color: #fff;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 5;
    display: none;
    overflow-y: hidden;
    overflow-x: hidden;
    padding: 3%;
    cursor: default;
}

#fullscreen-overlay > div.answer h1 { font-size: 500%; }
#fullscreen-overlay > div.answer h2 { font-size: 400%; }

@media (min-width: 992px) {
    #fullscreen-overlay > div.answer h1 { font-size: 900%; }
    #fullscreen-overlay > div.answer h2 { font-size: 700%; }
}

#fullscreen-overlay > div.answer {
    display: none;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translate(0, -50%);
    text-align: center;
}

#fullscreen-overlay > div.answer .artistLink {
    vertical-align: super;
    font-size: 50%;
    margin-left: .3em;
    color: #f1f2f4;
    text-decoration: none;
}

#fullscreen-overlay h3.index {
    display: inline-block;
    border-radius: 50%;
    width: 5rem;
    height: 5rem;
    font-size: 290%;
    text-align: center;
}

img.cc {
    margin-top: -2px;
    margin-right: .2em;
}

.searchBar {
    position: absolute;
    right: 1rem;
    top: 1rem;
    opacity: 0.5;
    z-index: 5;
}
.searchBar:hover {
    opacity: 1;
}

.form-control.is-search {
    padding-right: calc(1.5em + 0.75rem);
    background-position: right calc(0.375em + 0.1875rem) center;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJz48cGF0aCBmaWxsPScjNzY4MTkyJyBkPSdNNDc5LjYsNDAwLjRsLTgxLjA4NC04MS4wODQtNTMuMzItMjIuMDI4QTE3OC45NzYsMTc4Ljk3NiwwLDAsMCwzNzYsMTk2LjY4N2MwLTk5LjI1Mi04MC43NDgtMTgwLTE4MC0xODBzLTE4MCw4MC43NDgtMTgwLDE4MCw4MC43NDgsMTgwLDE4MCwxODBhMTc4Ljk3LDE3OC45NywwLDAsMCwxMDEuMzU3LTMxLjMzbDIxLjk2MSw1My4xNTdMNDAwLjQsNDc5LjZhNTYsNTYsMCwwLDAsNzkuMi03OS4yWk02NCwxOTYuNjg3YzAtNzIuNzg2LDU5LjIxNS0xMzIsMTMyLTEzMnMxMzIsNTkuMjE0LDEzMiwxMzItNTkuMjE1LDEzMi0xMzIsMTMyUzY0LDI2OS40NzIsNjQsMTk2LjY4N1onLz48L3N2Zz4K);
    background-repeat: no-repeat;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.c-body {
    /*background: linear-gradient(to right, transparent, mistyrose);*/
    background: linear-gradient(135deg, rgba(211, 251, 255, 0.3), transparent);
}