body {
  margin: 0px;
  padding: 0px;
}

.sidebar {
  opacity: 0.88;
}

.pusher {
  display: flex; 
  justify-content: center; 
  align-items: center; 
/*  flex-direction: column;*/
  height: 100%; 
  top: 0px;
}

.answer {
  font-family: Helvetica !important;
  font-size: 10pt;
  font-weight: normal;
  color: black;
  text-align: left;
  padding: 10px 16px !important;
}

.answer:first-child {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(221, 221, 221);
}
.answer:last-child {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(221, 221, 221);
}
.answer {
  border-top-width: auto;
  border-top-style: auto;
  border-top-color: auto;
  margin: 0px !important;
  background-color: white;
}
.answer.highlighted {
  -webkit-transition: all 0.13s ease-in-out;
  background-color: rgba(41, 135, 205, 0.23);
}
.answer.sortablePlaceholder {
  background-color: rgba(41, 135, 205, 1);
  opacity: 0.23;
}
.answer.scored {
  padding-right: 40px !important;
}

.answer.scored .ui.label {
  padding: 8px !important;
}

.scene {
  padding: 10px;
  display: none;
  background-color: white;
  min-width: 400px;
  max-width: 80%;
  min-height: 140px;
  max-height: 90%;
  border: 1px solid rgba(0,0,0,0.23);
  font-family: Helvetica;
  box-shadow: 2px 4px 6px rgba(100, 100, 100, 0.5);
  border-radius: 8px;
}

.scene.admin {
  width: 90%;
}

.scene .header {
  text-align: center !important;
  margin: 10px 10px !important;
}

.scene .header * {
  margin: 4px 0px;
  padding: 0px !important;
}

.scene .content {
  display: flex;
  flex-direction: row;
  overflow-y: scroll;
  max-height: 50%;
  width: 100%;
/*  margin-right: -7px;*/
}

.scene .content::-webkit-scrollbar {
   -webkit-appearance: none;
   width: 7px;
}

.scene .content::-webkit-scrollbar-thumb {
   border-radius: 4px;
   background-color: rgba(0,0,0,.5);
/*   -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);*/
}

.scene .content > * {
  flex: 1 1 auto;
  max-height: 50%;
}

.scene .content,
.scene .message {
  display: block;
}

.scene .loader {
  display: none;
}

.scene.loading .content,
.scene.loading .message {
  display: none;
}

.scene.loading .loader {
  display: auto;
}

.scene .navigation.leftItem {
  float: left;
}

.scene .navigation.rightItem {
  float: right;
}

.scene a {
  cursor: hand;
}

.scene a:hover {
  color: midnightBlue;
}

.scene .sceneIcon {
  opacity: 0.5 !important;
  float: right;
}

.scene.admin > .ui.header + .ui.segment  {
  height: 50%;
  overflow: scroll;
}

button[disabled] {
  -webkit-transition: all .33s ease-in-out;
  visibility: none;
}

button {
  visibility: auto;
  -webkit-transition: all .33s ease-in-out;
}

* > .hoverIcon {
  -webkit-transition: opacity .23s ease-out;
  opacity: 0;
}

*:hover > .hoverIcon,
*:active > .hoverIcon,
*:focus > .hoverIcon,
.hoverIcon:hover {
  opacity: 1;
}

.table td .hoverIcon {
  float: right;
}

.table td:hover .hoverIcon {
  opacity: 1;
}

#simulator .ui.selection.dropdown .menu {
  min-height: initial !important;
  height: 8rem !important;
}

#cwt {
  padding: 0px;
  text-align: center;
  width: 400px;
  max-width: 400px;
}

#cwt[state="error"] {
  border-color: #ee6666;
}

#cwt .horizontal.logo {
  background-image: url(../images/logo_and_logotype_horizontal_small.png); 
  background-repeat: no-repeat; 
  background-position: center; 
  background-size: contain; 
  height: 32px; 
  width: 87px; 
  float: right; 
  clear: both; 
  margin-left: -87px;
  margin-bottom: 10px;
}

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
  #cwt .horizontal.logo {
    background-image: url(../images/logo_and_logotype_horizontal_small@2x.png);
  }
}

#question {
  padding: 18px 0px 10px 0px;
  font-weight: bold;
  font-size: 14pt;
}

#message {
  font-style: italic;
  font-size: 10pt;
  color: gray;
  padding: 0px 10px 10px 10px;
}

#answerList {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

#answerPrompt {
  width: 360px;
  min-height: 200px !important;
  border: 1px solid rgba(41, 135, 205, 0.23);
}

#action {
  padding: 10px;
}

#cwtBody .hidden {
  display: none !important;
}

#userActionButton .userActionButton {
  position: absolute;
  right: 10px;
  top: 10px;
  opacity: 0.5 !important;
  background-blend-mode: darken;
  -webkit-transition: opacity .03s ease-out;
  display: none !important;
}

#userActionButton .userActionButton:hover,
#userActionButton .userActionButton.active {
/*  transform: scale(1.25, 1.25);*/
  -webkit-transition: opacity .03s ease-in;
  opacity: 1 !important;
}

#userActionButton .userActionButton.current {
  display: block !important;
}

#sidebarAction a {
  text-decoration: none;
  font-weight: bold;
  color: #333;
}

#userActionLogoutItem {
  color: red;
}

#background {
  position: fixed; 
  left: 0px; 
  top: 0px; 
  width: 100%; 
  height: 100%; 
  -webkit-filter: blur(48px); 
  opacity: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  transform: scale(1.1, 1.1);
  z-index: -10;
}

#background.current {
  opacity: 0.6;
  -webkit-transition: opacity .33s ease-in-out;
}

#flickr {
  -webkit-transition: opacity .13s ease-in-out;
  opacity: 0.33; 
  background-image:url(../images/flickr-logo-mask.png); 
  background-size: 32px 32px; 
  background-blend-mode: overlay; 
  background-repeat: no-repeat; 
  position: absolute; 
  bottom: 16px; 
  left: 50%; 
  transform: translate(-50%, 0); 
  width: 32px; 
  height: 32px; 
  overflow: hidden;
  display: none;
}

body.debug #flickr {
  display: block;
}

#flickr:hover {
  -webkit-transition: opacity .13s ease-in-out;
  opacity: 0.66;
}

/*#cwtBody .ui.modal {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  margin: 0px;
  transform: translate(-50%, -50%) !important;
  -webkit-transform: translate(-50%, -50%) !important;
}*/

@media only screen and (max-device-width: 480px) {
  body {
    min-height: initial !important;
    height: auto !important;
    max-height: none !important;
  }
  
  #background {
    display: none !important;
  }
  
  .scene, #cwt {
    border: none;
    position: relative;
    top: 0px;
    left: 0px;
    transform: none;
    box-shadow: none;
    border-radius: 0px;
    width: auto !important;
    min-width: initial !important;
    max-width: none !important;
    min-height: initial !important;
    max-height: none !important;
    background-color: white;
    display: auto !important;
    text-align: center;
    font-family: Helvetica;
  }
  
  .scene .content {
    display: block !important;
    height: auto !important;
    min-height: none !important;
    max-height: initial !important;
    width: auto !important;
    overflow: visible !important;
    margin-right: 0px;
  }
  
  .scene .content > * {
    display: initial;
    max-height: none !important;
    min-height: initial !important;
    height: auto !important;
  }
  
  .answer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  #userActionButton {
    display: none !important;
  }
  
  .sidebar {
    display: none;
  }
  
  .pusher {
    display: block;
    justify-content: auto; 
    align-items: auto; 
    height: auto !important;
  }
}