/*
 * ******************************************************
 *  * Copyright (C) 2020 - 4 - 11 by NEW REALITY LIVE
 *  *
 *  * This file is part of Mediapresenter.
 *  *
 *  ******************************************************
 */


body {
    background: #424242;
    color: #ffffff;
}

/*############*/
.selected-playlist {
    background: rgb(54, 149, 46);
}

.tmp-selected-playlist {
    background: rgb(149, 137, 19);
}

.selected-song {
    background: rgb(54, 149, 46);
}

.tmp-selected-song {
    background: rgb(149, 137, 19);
}

.selected-verse {
    background: rgb(54, 149, 46);
}

.play {
    background: rgb(54, 149, 46);
}

@keyframes blink_active {
    50% {
        -webkit-box-shadow:inset 0px 0px 0px 6px rgb(255, 226, 20);
        -moz-box-shadow:inset 0px 0px 0px 6px rgb(255, 226, 20);
        box-shadow:inset 0px 0px 0px 6px rgb(255, 226, 20);
    }
}

.nap-active {
    /* animation: blink_active .5s step-end infinite alternate; */
    box-shadow:inset 0px 0px 0px 6px rgb(255, 226, 20);
    background: rgb(54, 149, 46);
}

.preview-active {
    background: rgb(54, 149, 46);
}

.stop {
    background: none;
}

.selected-verse-not-playing {
    background: rgb(102, 109, 48);
}

.name {
    background-color: #c08011;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    /*font-size: 2em;*/
    font-size: 3.8vmin;
    /*font-size: 2em;*/
    /*font-size: 2vw;*/
    max-font-size: 2vw;
    height: 5vh;
}
.copyright {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    font-size: 2.2vmin;
    max-font-size: 2vw;
    height: 3vh;
    background-color: #717171;
}

.playlists-menu {
    width: 100%;
    height: 85vh;
    overflow: auto;
    border: 1px solid #ffffff;
    /*background-color: #8c3fc0;*/
    font-size: 1.6em;
}

.pilot-menu {
    width: 100%;
    height: 75.6vh;
    overflow: auto;
    border: 1px solid #ffffff;
    /*background-color: #8c3fc0;*/
    font-size: 1.6em;
}

.player_container_1 {
    width: 100%;
    height: 29vh;
    overflow: auto;
    border: 1px solid #ffffff;
    margin-bottom: 1px;
    /*background-color: #8c3fc0;*/
    font-size: 1.8em;
}
.player_container_2 {
    width: 100%;
    height: 26vh;
    overflow: auto;
    border: 1px solid #ffffff;
    margin-bottom: 1px;
    /*background-color: #8c3fc0;*/
    font-size: 1.8em;
}


.iframe-container {
    overflow: hidden;
/*// Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 0.5625)*/
padding-top: 56.25%;
    position: relative;
}

.iframe-container iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.songslists-menu {
    width: 100%;
    height: 57.1vh;
    overflow: auto;
    border: 1px solid #ffffff;
    /*background-color: #8c3fc0;*/
    font-size: 1.8em;
}

.song-content {
    width: 100%;
    height: 61.5vh;
    overflow: auto;
    border: 1px solid #ffffff;
    /*background-color: #8c3fc0;*/
    font-size: 1.6em;
}

.header {
    width: 100%;
    /*font-size: 1.8em;*/
    font-size: 3.8vmin;
    /*max-font-size: 1.8vh;*/
    height: auto;
    text-decoration: underline;
    border: 1px solid #ffffff;
    margin-bottom: 2px;
    margin-top: 5px;
    padding-left: 5px;
}


.prev-song {
    background-image: url(../img/buttons/icons/tostart.png);
}

.prev-section {
    background-image: url(../img/buttons/icons/backward.png);
}

.on-air {
    background-image: url(../img/buttons/icons/play-play.png);
}

.next-section {
    background-image: url(../img/buttons/icons/forward.png);
}

.next-song {
    background-image: url(../img/buttons/icons/fastforward.png);
}

.button-text-1 {
    background-image: url(../img/buttons/icons/nap_1.png);
}

.button-text-2 {
    background-image: url(../img/buttons/icons/nap_2.png);
}

.button-text-3 {
    background-image: url(../img/buttons/icons/nap_3.png);
}
.button-text-4 {
    background-image: url(../img/buttons/icons/nap_4.png);
}

.button-text-5 {
    background-image: url(../img/buttons/icons/nap_5.png);
}

.button-text-6 {
    background-image: url(../img/buttons/icons/nap_6.png);
}

.preview-text-1 {
    background-image: url(../img/buttons/icons/preview_2.png);
}

.preview-text-2 {
    background-image: url(../img/buttons/icons/preview_1.png);
}

.preview-text-3 {
    background-image: url(../img/buttons/icons/preview_3.png);
}

.preview-text-4 {
    background-image: url(../img/buttons/icons/preview_4.png);
}


body.hover-enabled .control-button:hover {
    background-color: #ffc937;
    cursor: pointer;
}

.control-button:active {
    background-color: #f40001;
    cursor: pointer;
}

.small-button:active {
    background-color: #f40001;
    cursor: pointer;
}

.drop-down-list:active {
    background-color: #f40001;
    cursor: pointer;
}

.control-button {
    display: inline-block;
    border: 2px solid #e2e2e2;
    /*max-width: 30%;*/
    height: 100%;
    /*min-height: 30%;*/
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}


.control-button-half-height {
    display: inline-block;
    border: 2px solid #e2e2e2;
    /*max-width: 30%;*/
    height: 49%;
    /*min-height: 30%;*/
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}

body.hover-enabled .preview-button:hover {
    background-color: #ffc937;
    cursor: pointer;
}

body.hover-enabled .small-button:hover {
    background-color: #ffc937;
    cursor: pointer;
}

.preview-button:active {
    background-color: #f40001;
    cursor: pointer;
}

.preview-button {
    display: inline-block;
    border: 2px solid #e2e2e2;
    /*max-width: 30%;*/
    height: 100%;
    /*min-height: 30%;*/
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}

.control-button-songs {
    width: 48%;
}

.control-button-content {
    width: 29%;
}

.preview-button-content {
    width: 22.5%;
}

.left-button {
    float: left;
}

.center-button {
    display: inline-block;
    margin: 0 auto;
}

.right-button {
    float: right;
}

.control-buttons {
    /*background-color: #a40009;*/
    width: auto;
    margin: 0 auto;
    text-align:center;
}

.line {
    border: 1px solid #8a8a8a;
    margin: 5px auto;
    width: 98%;
    padding-left: 10px;
    cursor: pointer;
}

.small-button {
    width: 100%;
    height: 100%;
    text-align: center;
    margin: 0 auto;
    -webkit-box-shadow:inset 0px 0px 0px 1px #8a8a8a;
    -moz-box-shadow:inset 0px 0px 0px 1px #8a8a8a;
    box-shadow:inset 0px 0px 0px 1px #8a8a8a;
    /*font-size: 2.9vmin;*/
    font-size: 1.7vmin;
    line-height: 5.3vmin;
    max-font-size: 2vh;
}

.small-button-container {
    /*padding-left: 1px;*/
    /*padding-right: 1px;*/
    height: 5vh;
    /*margin: 0.07vw  ;*/
}
.buttons-3-in-row {
    width: 32.833333%;
    float: left;
    margin-right: 0.5%;
    margin-top: 0.5%;
    margin-bottom: 0.5%;
}

.buttons-2-in-row {
    width: 49.5%;
    float: left;
    margin-right: 0.5%;
    margin-top: 0.5%;
    margin-bottom: 0.5%;
}

.buttons-1-in-row {
    width: 100%;
    float: left;
    margin-top: 0.5%;
    margin-bottom: 0.5%;
}

.width-90 {
    width: 90%;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}
.line-name {
    border: 1px solid #8a8a8a;
    margin: 5px auto;
    width: 98%;
    text-align: center;
    font-style: oblique;
    padding-left: 10px;
    background-color: #585858;
}

.line-title {
    font-size: 2.8vmin;
    max-font-size: 2vh;
}

.line-songs {
    font-size: 2.8vmin;
    max-font-size: 2vh;
}

.line-text {
    font-size: 2.6vmin;
    max-font-size: 2vh;
}



.section-header {
    margin: 5px auto;
    font-size: 2.8vmin;
    max-font-size: 2vh;
    width: 98%;
    padding-left: 10px;
    font-style: italic;
    font-weight: bold;
    color: #c9290d;
}

body.hover-enabled .line:hover {
    background-color: #eea236;
}

body.hover-enabled .drop-down-list:hover {
    background-color: #eea236;
}

.list {
    margin-left: -35px;
    list-style-type:none;
}
.container-fluid {
    width: 100vw;
    height: 90vh;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                     supported by Chrome and Opera */
}

.move-left {
    margin-left: -15px;
}

.remove-margins {
    margin: 0;
}

.control-buttons-container {
    margin-top: 1vh;
    height: 13vh;
    width: 100%;
}

.control-buttons-container-half-height {
    margin-top: 1vh;
    height: 6.2vh;
    width: 100%;
}
.preview-buttons-container {
    margin-bottom: 1vh;
    height: 5vh;
    width: 100%;
}

.drop-down-list {
    /*border: 1px solid #8a8a8a;*/
    /*margin: 0px auto;*/
    /*width: 98%;*/
    /*padding-left: 10px;*/
    background-color: #eea236;
    cursor: pointer;
}

.drop-down-list-active {
    background: rgb(54, 149, 46);
}

.active-on-monitor-1 {
    background: rgb(54, 149, 46);
}

.active-input-monitor-1 {
    background: rgb(54, 149, 46);
}

.active-on-monitor-2 {
    background: rgb(54, 149, 46);
}

.active-input-monitor-2 {
    background: rgb(54, 149, 46);
}

.active-show-monitor-2 {
    background: rgb(54, 149, 46);
}

.active-show-monitor-2-waiting {
    animation: blink_active .5s step-end infinite alternate;
}

@media screen and (max-width: 600px) {
    .songslists-menu {
        height: auto;
        min-height: 2vh;
        max-height: 70vh;
    }

    .song-content {
        min-height: 2vh;
        height: auto;
        max-height: 25.5vh;
    }

    .pilot-menu {
        min-height: 2vh;
        max-height: 85vh;
        height: auto;
    }

    .control-buttons-container {
        height: 7vh;
    }
    .control-buttons-container-half-height {
        height: 3vh;
    }
}

.search-container {
    /*width: 100%;*/

    /*font-size: 1.4vmin;*/
    /*max-font-size: 1.8vh;*/
    /*height: 4vh;*/
    /*border: 1px solid #ffffff;*/
    /*margin-bottom: 2px;*/
    /*margin-top: 5px;*/
    /*padding-left: 5px;*/
}

.search-container {
    margin-top: 2px;
    margin-bottom: 2px;
    height: 4vh;
    width: 100%;
}

.search-elements {
    /*background-color: #a40009;*/
    width: auto;
    margin: 0 auto;
    text-align:center;
}

.search-element {
    display: inline-block;
    border: 2px solid #e2e2e2;
    /*max-width: 30%;*/
    height: 100%;
    /*min-height: 30%;*/
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}

.search-input {
    padding-left: 5px;
    width: 90%;
    font-size: 2vmin;
    background-color: #3c3c3c;
    color: #FFFFFF;
}

.search-cancel {
    width: 9%;
    background-image: url(../img/buttons/icons/cancel.png);
}

body.hover-enabled .search-cancel:hover {
    background-color: #ffc937;
    cursor: pointer;
}

.search-cancel:active {
    background-color: #f40001;
    cursor: pointer;
}

.error-container {
    width: 40%;
    height: 20%;
    margin: 0 auto;
    display: none;
    background-color: #a40009;
    color: #FFFFFF;
    font-size: 3vmin;
    text-align: center;
    z-index: 999;
    position: fixed;
    left: 50%;
    top: 20px;
    transform: translate(-50%, 0%);
    border-radius: 5px;
}

.close-error {
    height: 20%;
    width: 90%;
    margin: 0 auto;
    display: block;
    background-color: #20a400;
    border-radius: 5px;
    cursor: pointer;
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, 0%);
}

.active-user {
    background: rgb(54, 149, 46);
}

.user-name {
    position: absolute;
    top: 0;
    right: 20px;
    font-size: 2.8vmin;
    max-font-size: 2vw;
}