body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

blockquote {
    padding: 5px 5px;
    margin: 0 0 20px;
    font-size: small;
    border-left: 5px solid #80c0c0;
    font-family: monospace;
}
/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/* Set padding to display errors that occur during databinding */
.padding-error {
    padding-top: 20px;
}

@media only screen and (max-width: 767px) {
    .nofloat {
        float: none;
        padding: 10px 15px;
    }
}

/** {
    box-sizing: border-box
}*/

/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 40%;
    vertical-align: middle;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: lightgray white;
    font-weight: bold;
    font-size: 36px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    opacity: 1;
    z-index: 100000;
    display: block;
    /*height: 100%;*/
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover, .next:hover {
        background-color: rgba(0,0,0,0.8);
    }

/* Caption text */
.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

    .active, .dot:hover {
        background-color: #717171;
    }

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
    opacity: 1;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}
/*Display time dial*/

.displayTime {
    color: forestgreen;
    cursor: pointer;
}

#story-board {
    /*height: 500px;
    width: 500px;*/
    /*overflow: scroll;*/
}

body {
    /*height: 500px;
    width: 500px;*/
    overflow: scroll;
}

/* Story tiles*/
.story-tile {
    position: relative;
    text-align: center;
    color: white; /* orange */
    text-shadow: 2px 2px #808080; /* orange */
}

.story-tile-bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
    color: white; /* orange */
    text-shadow: 2px 2px #808080; /* orange */
}

.story-tile-bottom-center {
    position: absolute;
    bottom: 8px;
    left: 50%;
    color: white; /* orange */
    text-shadow: 2px 2px #808080; /* orange */
}

.story-tile-top-left {
    position: absolute;
    top: 8px;
    left: 16px;
    color: white; /* orange */
    text-shadow: 2px 2px #808080; /* orange */
}

.story-tile-top-right {
    position: absolute;
    top: 8px;
    right: 16px;
    color: white; /* orange */
    text-shadow: 2px 2px #808080; /* orange */
}

.story-tile-bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
    color: white; /* orange */
    text-shadow: 2px 2px #808080; /* orange */
}

.story-tile-centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white; /* orange */
    text-shadow: 2px 2px #808080; /* orange */
}
.photo-tile {
    position: relative;
    text-align: center;
    color: orange 
}

.photo-tile-bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
    color: orange 
}

.photo-tile-bottom-center {
    position: absolute;
    bottom: 8px;
    left: 50%;
    color: orange 
}

.photo-tile-top-left {
    position: absolute;
    top: 8px;
    left: 16px;
    color: orange 
}

.photo-tile-top-right {
    position: absolute;
    top: 8px;
    right: 16px;
    color: orange 
}

.photo-tile-bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
    color: orange 
}

.photo-tile-centered {
    position: absolute;
    top: 50%;
    left: 50%;
    color: orange 
}

body {
    padding-top: 50px;
}

.dropdown.dropdown-lg .dropdown-menu {
    margin-top: -1px;
    padding: 4px 15px;
}

.btn-group .btn {
    border-radius: 0;
    margin-left: -1px;
}

.form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
}



@media screen and (min-width: 600px) {
    #boot-search-box {
        width: 500px;
        margin: 0 auto;
    }

    .dropdown.dropdown-lg {
        position: static !important;
    }

        .dropdown.dropdown-lg .dropdown-menu {
            min-width: 500px;
        }
}

/*@media screen and (min-width: 768px) {
    #boot-search-box {
        width: 500px;
        margin: 0 auto;
    }

    .dropdown.dropdown-lg {
        position: static !important;
    }

        .dropdown.dropdown-lg .dropdown-menu {
            min-width: 500px;
        }
}*/

/*@media screen and (min-width: 1000px) {
    #boot-search-box {
        width: 800px;
        margin: 0 auto;
    }

    .dropdown.dropdown-lg {
        position: static !important;
    }

        .dropdown.dropdown-lg .dropdown-menu {
            min-width: 800px;
        }
}*/
.grid-container {
    display: inline-grid;
    grid-template-columns: auto auto auto auto auto auto;
}

/*@media screen and (max-content: 799px) {
    .grid-container {
        grid-template-columns: auto;
    }
}

@media screen and (min-content: 800px) and (max-width: 1199px) {
    .grid-container {
        grid-template-columns: auto auto;
    }
}

@media screen and (min-content: 1200px) and (max-width: 1599px) {
    .grid-container {
        grid-template-columns: auto auto auto;
    }
}

@media screen and (min-content: 1600px) and (max-width: 1999px) {
    .grid-container {
        grid-template-columns: auto auto auto auto;
    }
}

@media screen and (min-content: 2000px) and (max-width: 2399px) {
    .grid-container {
        grid-template-columns: auto auto auto auto auto;
    }
}

@media screen and (min-content: 2400px) and (max-width: 2799px) {
    .grid-container {
        grid-template-columns: auto auto auto auto auto auto;
    }
}*/

.grid-item {
    /*max-height: 400px;
    max-width: 100%;*/
    padding: 1px;
}


.grid-story-item {
    /*max-height: 400px;
    max-width: 100%;*/
    padding: 1px;
    grid-area: 1 / 2 / 1 / 3;
}


/*****************************************************************************************/

.activeBorder {
    border-color: forestgreen;
    border-width: 9px;
    border-style: solid double;
    padding: 3px;
}

.inactiveBorder {
    border-color: orange;
    border-width: 6px;
    border-style: dashed;
    padding: 3px;
}

img {
    align-content: center;
}


.scrabble-token {
    min-height: 40px;
    min-width: 40px;
    max-height: 40px;
    max-width: 40px;
}

.dragging {
    opacity: 0.5;
    filter: "alpha(opacity=50)";
}

.drag-over {
    border-color: blue;
}

.drop-rejected {
    border-color: red;
}

.drag-handle {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 20px;
    margin: 6px 0px;
    background-image: url("images/drag-handle.png");
    background-repeat: repeat-y;
    background-position: center center;
    cursor: move;
    z-index: 1;
}

.customDragElement {
    background-color: white;
    border: thin solid gray;
    padding: 6px 12px;
}

/*.dragging {
    opacity: 0.5;
    filter: "alpha(opacity=50)";
    position:relative;
    list-style-type:none;
}*/


.well .dragging li {
    opacity: 0.5;
    filter: "alpha(opacity=50)";
    position: relative;
    list-style-type: none;
    display: inline-block;
}

.zones {
    position: relative;
    box-sizing: border-box;
    height: 40px;
    width: 400px;
    display: inline-block;
}

.exchange-zone {
    position: relative;
    box-sizing: border-box;
    height: 40px;
    width: 40px;
    display: inline-block;
}

.scroll-while-dragging .zones {
    height: 150px;
    overflow: auto;
}

.scroll-while-dragging .zones {
    border: 1px solid grey;
}

    .scroll-while-dragging .zones ul {
        border: none;
        box-sizing: border-box;
        width: 133%;
    }

        .scroll-while-dragging .zones ul li {
            box-sizing: border-box;
            width: 19.5%;
            height: 250px;
            display: inline-block;
        }

.drag-zones .zones {
    height: 300px;
}

.drag-zones ul.source.vowels {
    height: 72px;
}

.drag-zones ul.source.consonants {
    top: auto;
    bottom: 0;
    height: 221px;
}

.zones {
    height: 50px;
    position: relative;
}

.zul {
    border: 5px solid grey;
    padding: 0;
    margin: 0;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

div.source {
    right: 51%;
}

div.target {
    left: 51%;
}

div.drag-over {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.8);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.8);
    background-color: #F4FFDD;
    -moz-transition: all 300ms, -moz-transform;
    -webkit-transition: all 300ms, -webkit-transform;
    -o-transition: all 300ms, -o-transform;
    transition: all 300ms, transform;
}

div.drop-rejected {
    -webkit-box-shadow: inset 0 1px 1px rgba(255, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.8);
    -moz-box-shadow: inset 0 1px 1px rgba(255, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.8);
    box-shadow: inset 0 1px 1px rgba(255, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.8);
    -moz-transition: all 300ms, -moz-transform;
    -webkit-transition: all 300ms, -webkit-transform;
    -o-transition: all 300ms, -o-transform;
    transition: all 300ms, transform;
    border: 1px solid red;
}

.zli {
    position: relative;
    margin: 0;
    margin: 2px;
    list-style-type: none;
    min-height: 35px;
    min-width: 35px;
    max-height: 35px;
    max-width: 35px;
}

li:first-child {
    margin-top: 0;
}

li .label {
    margin-left: 6px;
}

.drag-handle {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 20px;
    margin: 6px 0px;
    background-image: url("images/drag-handle.png");
    background-repeat: repeat-y;
    background-position: center center;
    cursor: move;
    z-index: 1;
}

.customDragElement {
    background-color: white;
    border: thin solid gray;
    padding: 6px 12px;
}

.dragging {
    opacity: 0.5;
    filter: "alpha(opacity=50)";
    cursor: move;
}

.scroll-while-dragging .zones {
    height: 150px;
    overflow: auto;
}

.scroll-while-dragging .zones {
    border: 1px solid grey;
}

    .scroll-while-dragging .zones ul {
        border: none;
        box-sizing: border-box;
        width: 133%;
    }

        .scroll-while-dragging .zones ul li {
            box-sizing: border-box;
            width: 19.5%;
            height: 250px;
            display: inline-block;
        }

.drag-zones .zones {
    height: 300px;
}

.drag-zones ul.source.vowels {
    height: 72px;
}

.drag-zones ul.source.consonants {
    top: auto;
    bottom: 0;
    height: 221px;
}

.scrabble-board {
    display: grid;
    grid-template-columns: 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px;
    grid-template-rows: 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px;
    grid-gap: 3px;
    max-width: 670px;
    /*min-width: 600;
    min-height: 600;
    box-sizing: unset;*/
}

.scrabble-cell {
    text-align: center;
    /*border: 2px solid rgba(255, 0, 0, 0.075);*/
    /*box-sizing:unset;
    min-height: 35px;
    min-width: 35px;
    max-height: 35px;
    max-width: 35px;*/
    vertical-align: top;
    align-content: left;
    /*top:0;
    left:0;*/
}

.mobileTapped {
    min-height: 50px;
    min-width: 100px;
    max-height: 50px;
    max-width: 100px;
    border-color: forestgreen;
    border-bottom-style: dashed;
    border-width: 3px;
}

.tokenText {
    font-family: Calibri;
    font-size: x-large;
    font-weight: 900;
    width: 30px;
    vertical-align: top;
}

.img_button {
    width: 35px;
}

.current_move {
    -webkit-filter: hue-rotate(90deg) saturate(3);
    filter: hue-rotate(90deg) saturate(3);
}


.last_move {
    -webkit-filter: hue-rotate(140deg) saturate(3);
    filter: hue-rotate(140deg) saturate(3);
}

.before_last_move {
    -webkit-filter: hue-rotate(270deg) saturate(2);
    filter: hue-rotate(270deg) saturate(2);
}

.before_before_last_move {
    -webkit-filter: hue-rotate(360deg) saturate(5);
    filter: hue-rotate(360deg) saturate(5);
}

.current_moveR {
    background-color: #bcf8a7;
}


.last_moveR {
    background-color: #80e3f9;
}

.before_last_moveR {
    background-color: #fab7f4;
}

.before_before_last_moveR {
    background-color: #f9d7a1;
}

.timer {
    float: right;
    clear: left;
}

.time_ok {
    background-color: darkgreen;
    color: white;
    font-size: small;
}


.time_warning {
    background-color: darkgreen;
    color: orange;
    font-size: large;
}

.time_expired {
    background-color: red;
    color: white;
    font-size: larger;
}

.time_lost_turn {
    background-color: red;
    color: white;
}

/* Paradiso Grid */
/*.item1 {
    grid-area: header;
}

.timeline {
    grid-area: timeline;
}

.question {
    grid-area: question;
}

.players {
    grid-area: players;
}

.difficulty {
    grid-area: difficulty;
}

.answer {
    grid-area: answer;
}

.grid-container {
    display: grid;
    grid-template-areas: 'header header header header header header timeline' 'question question question question question question timeline' 'question question question question question question timeline' 'question question question question question question timeline' 'question question question question question question timeline' 'question question question question question question timeline' 'question question question question question question timeline' 'question question question question question question timeline' 'question question question question question question timeline' 'players players players players players players timeline';
    grid-gap: 10px;
    padding: 10px;
}

    .grid-container > div {
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
    }

.question-text {
    font-size: medium;
    text-align: left;
}

.answer-text {
    font-size: medium;
    text-align: left;
}

.question-grid-container {
    display: grid;
    grid-template-areas: 'difficulty difficulty' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer' 'question answer';
    grid-gap: 10px;
    padding: 10px;
}

    .question-grid-container > div {
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
    }*/


/*.progress_5 {
    -webkit-filter: grayscale(0) saturate(3);
    filter: grayscale(0) saturate(3);
    background: linear-gradient(to left, rgba(0,255,0,0) -100%, rgba(0,255,0,1));
}

.progress_4 {
    -webkit-filter: grayscale(20) saturate(2);
    filter: grayscale(20) saturate(2);
    background: linear-gradient(to left, rgba(0,255,0,0) -80%, rgba(0,255,0,1));
}

.progress_3 {
    -webkit-filter: grayscale(40) saturate(1);
    filter: grayscale(40) saturate(1);
    background: linear-gradient(to left, rgba(0,255,0,0) -60%, rgba(0,255,0,1));
}

.progress_2 {
    -webkit-filter: grayscale(60) saturate(0.5);
    filter: grayscale(60) saturate(0.5);
    background: linear-gradient(to left, rgba(0,255,0,0) -40%, rgba(0,255,0,1));
}

.progress_1 {
    -webkit-filter: grayscale(80) saturate(0.25);
    filter: grayscale(80) saturate(0.25);
    background: linear-gradient(to left, rgba(0,255,0,0) -20%, rgba(0,255,0,1));
}

.progress_0 {
    -webkit-filter: grayscale(100) saturate(0.1);
    filter: grayscale(100) saturate(0.1) blur(100);
    background: linear-gradient(to left, rgba(0,255,0,0) -00%, rgba(0,255,0,1));
}*/

p {
    font-size: medium;
}

.side-image-bar {
    float: right;
    clear:left;
    overflow:hidden;
    height: 100%;
    width: 15%;
}

.your-scene {
    border-color: deeppink;
    border-style: solid;
    border-width: thick;
}

.has-turn>img {
    border-color: yellowgreen;
    border-style: solid;
    border-width: thick;
    -webkit-filter: hue-rotate(90deg) saturate(3);
    filter: hue-rotate(90deg) saturate(3);
}

.question-col-container{
    display: flex;
    width:100%;
}

.question-col {
    flex: 4 1 auto;
}

.flow-col {
    flex: 1 2 auto;
}
/* Paradiso visual board styles*/
.paradiso-container {
    display: grid;
    grid-template-columns: 18% 18% 18% 18% 18%;
    grid-template-rows: 12% 12% 12% 12% 12% 12% 
    grid-gap: 50px;
    padding: 20px;
}
.paradiso-container>div {
    background-color:white;
}
.qa-area {
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 6;
    margin: 20px;
    /*overflow-x:hidden;
    overflow-y:scroll;
    max-height: 100%;
    max-Width: 100%;*/
}

.players-area {
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
    /*margin: 20px;*/
    /*overflow-y: hidden;*/
    /*overflow-x: scroll;*/
    /*max-height: 100%;
    Width: 100%;
    max-Width: 100%;*/
}

.period1 {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 1;
}

.period2 {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
}

.period3 {
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
}

.period4 {
    grid-column-start: 4;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 1;
}

.period5 {
    grid-column-start: 5;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 1;
}

.period6 {
    grid-column-start: 5;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 2;
}

.period7 {
    grid-column-start: 5;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 3;
}

.period8 {
    grid-column-start: 5;
    grid-column-end: 5;
    grid-row-start: 4;
    grid-row-end: 4;
}

.period9 {
    grid-column-start: 5;
    grid-column-end: 5;
    grid-row-start: 5;
    grid-row-end: 5;
}

.period10 {
    grid-column-start: 5;
    grid-column-end: 5;
    grid-row-start: 6;
    grid-row-end: 6;
}

.period11 {
    grid-column-start: 4;
    grid-column-end: 4;
    grid-row-start: 6;
    grid-row-end: 6;
}

.period12 {
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 6;
    grid-row-end: 6;
}

.period13 {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 6;
    grid-row-end: 6;
}

.period14 {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 6;
    grid-row-end: 6;
}

.period15 {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 5;
    grid-row-end: 5;
}

.period16 {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 4;
    grid-row-end: 4;
}

.period17 {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 3;
    grid-row-end: 3;
}

.period18 {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 2;
    grid-row-end: 2;
}
.paradiso-timeperiod{
    position: relative;
    top: 0;
    left: 0;
}