body {
    display: block;
    caret-color: transparent;
}

button {
    white-space: nowrap;
}

a.rplayerActiveTrack {
    /* color: var(--activeTrack) !important; */
    background-color: var(--trackbg);
}

/** User */

.ui.segment {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    /* background: var(--bg) !important; */
}

a.rplayerOneTrack {
    display: inline-block;
    padding: .2em 1em .2em 1em;
    /* margin: .2em; */
    width: 100%;
    border-radius: .5em;
    animation-duration: 1.5s;
    animation-play-state: running;
}

#rplayer {
    /* min-width: 90vw; */
    padding: 1em;
    margin-top: 1em;
    opacity: 0;
    /* margin: 1em !important; */
    border: .3em solid var(--rPlayerBorder);
    background-color: var(--bgrplayer);
    border-radius: 2em;
    box-shadow: 0 0 4em var(--rPlayerBoxShadow);
    transform: perspective(50em) scale(0.9) rotateX(0deg) rotateY(-1deg) rotateZ(-1deg) translateX(-1em);
}

#rplayer:not(div.words, .rplayerTrackList, .rplayerOneTrack) {
    transition: all 1s ease;
}

#rplayer h1,
#rplayer h2 {
    display: inline-block;
    margin: 0;
    font-size: 2em;
}

#rajs {
    text-align: right;
    padding-right: 2em;
    font-size: .7em;
    white-space: nowrap;
}

.item1 { grid-area: g1; }

.item1 input[type='range'] {
    margin-bottom: 1em;
}

.item1 #context {
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.item1 .addCurTime {
    white-space: nowrap;
}

.item2 {
    grid-area: g2;
    
    align-items: safe center;
    max-height: 21.15em;
    overflow: auto;
    background-color: rgba(174,174,174,.1);
    border-radius: 1em;
    padding: .5em;
    margin: 0 0 1em 0;
}

.item2 .rplayerTrackList {
    margin-bottom: -.35em;
}

.item3 { grid-area: g3; }

.item3 div:first-child {
    text-align: right;
}

.item4 { grid-area: g4; }
.item5 { grid-area: g5; margin: 1em 0 1em 0; }

.item5 #rplayerVisualCanvas {
    opacity: .2;
    position: absolute;
    width: 100%;
    height: 100%;
}

.item5 .trackInfo {
    position: relative;
    line-height: 1em;
}

.item6 {
    grid-area: g6;
    margin: 0 0 2em 0;
    white-space: nowrap;
}

.item6 > div ~ div {
    padding-top: .2em;
}

.item7 { grid-area: g7; }
.item8 { grid-area: g8; }

.item8 .rplayerBufferShowLoading {
    font-weight: bold;
    opacity: 0;
    color: var(--currentTime);
    font-size: 1em;
    padding-left: .5em;
}

.item9 {
    grid-area: g9;
    margin-bottom: 1em;
}

.item9 > div:first-child {
    display: inline-block;
    border-bottom: 1px solid var(--currentTime);
}

.item9 > div:first-child > div:first-child {
    display: inline-block;
    margin-right: 1em;
}

.item9 > div:first-child > div:first-child ~ div {
    display: inline-block;
    margin-right: .5em;
}

.item9 h2 {
    color: var(--currentTime);
}

.item9 h1 ~ div,
.item9 h2 ~ div {
    opacity: .7;
    font-style: italic;
}

.item9 > div:first-child span {
    font-style: italic;
    font-size: 1em;
}

.item9 .nowrap {
    white-space: nowrap;
}

.itemA {
    grid-area: gA;
    text-align:  right;
    padding: 0 0 1em 0;
    white-space: nowrap;
}
.itemB {
    grid-area: gB;
    margin: 0 0 2em 0;
    white-space: nowrap;
}

.itemB .input {
    display: inline-block;
    margin-top: 1em;
}

.itemB .input input[type='text'] {
    text-align: right;
    caret-color: var(--caretCoror);
}

.itemB .stopTimerSecs {
    display: inline-block;
}

.rplayerAlbumYear,
.rplayerAlbumYearIcon {
    opacity: .7 !important;
}



#rplayer {
    display: grid;
    grid-template-rows: auto;
    grid-template-areas:
    'gA'
    'g9'
    'g1'
    'g5'
    'g2'
    'g6'
    'gB'
    'g8'
    'g7'
    'g3'
    'g4';
    grid-template-columns: auto;
    max-width: 60em;
    padding: 1em 1em 1.2em 1em;
}

@media
    screen and (min-width: 40em) { 
    /* Držení na šířku */
    #rplayer {
        display: grid;
        grid-template-rows: auto;
        grid-template-areas:
        'g9 g9 g9 gA'
        'g1 g1 g2 g2'
        'g5 g5 g2 g2'
        'g6 gB g2 g2'
        'g8 g8 g7 g7'
        'g3 g3 g3 g3'
        'g4 g4 g4 g4';
        grid-template-columns: 13.3em 10em auto auto;
        width: 95vw;
        max-width: 60em;
        padding: 1em;
    }

    .item1 .addCurTime {
        padding: .5em 1em .25em .5em;
    }
    .rplayerVolFader {
        padding-right: 1em;
    }
    .trackInfo {    
        margin-right: .35em;
    }
    .itemB .input {
        width: calc(100% - 3em);
    }
}

.trackInfo {
    display: flex;
    height: 100%;
    justify-content: center; align-items: safe center;
    text-align: center;
    font-size: 2em;
    min-height: 2em;
}

input,
a,
label {
    cursor: pointer !important;
}

.rplayerFx {
    opacity: 0;
    background-color: var(--bg);
}

.volumeInfo {
    display: inline-block;
}

.rplayerOneTrack .name {
    position: relative;
    top: 0.1em;
    font-weight: bold;
    float: left;
}

.rplayerOneTrack .duration {
    font-style: italic;
    font-size: .8em;
    float: right;
}

.background {
    opacity: 0;
}

.rplayerBufferCondition,
.rPlayerAlbumDuration {
    font-weight: bold;
}

.rplayerCurTime {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--currentTime);
}

.rplayerCurTime ~ span {
    opacity: .5;
}

.addCurTime {
    padding: .5em 0 .25em .5em;
    border-radius: 4px;
}

/* Words, Windows */

.words,
.rplayerShowInfo {
    display: flex;
    text-align: center;
    justify-content: center; align-items: safe center;
    justify-self: center;
    align-self: center;
    position: fixed;
    width: fit-content;
    /* height: fit-content; */
    max-width: 90%;
    /* max-height: 80%; */
    overflow: auto;
    border: .1em solid var(--currentTime);
    border-radius: .5em;
    background-color: var(--wordsBackground);
    padding: 1em;
    /* padding-bottom: 0 !important; */
    font-size: 1.5em;
    font-weight: bold;
    box-shadow: .3em .3em 1em var(--wordsBoxShadow);
    z-index: var(--wordsZIndex);
    /* cursor: pointer; */
}

.infoWindow .close.icon {
    cursor: pointer;
    margin: 0;
}

.rplayerShowInfo {
    display: none;
    font-size: 1em;
}

.rplayerFx {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    
    /* background-image: url('../../media/images/dreamer_album.jpg'); */
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

.rplayerUic {
    padding: 1em 0 1em 0;
    min-height: 100vh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: safe center !important;
    border: none !important;
}

.rplayerUic .ui.segment {
    background: transparent;
    margin: 1em;
}

#rplayer .fullScreen.icon,
#rplayer .rplayerMinimize.icon,
#rplayer .helpButton.icon,
#rplayer .close.icon,
#rplayer .download.icon,
#rplayer .qrcode.icon {
    color: var(--currentTime);
    cursor: pointer;
}

#rplayer {
    user-select: none;
}

#rplayerQrCode {
    display: none;
    opacity: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: none;
    padding: 4em;
    position: fixed;
    background-color: var(--rSlideshowBg);
    writing-mode: vertical-lr;
    z-index: var(--rSlideshowZIndex);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

@media (orientation: landscape) {
    #rplayerQrCode svg {
        max-height: calc(100vh - 8em);
        height: 100%;
    }
}

@media (orientation: portrait) {
    #rplayerQrCode svg {
        max-height: calc(100vw - 8em);
        height: 100%;
    }
}

.rplayerCrAdresses {
    text-align: center;
    border: none;
    width: 100%;
    font-family: courier;
    font-size: .9em;
    background-color: transparent;
    color: #000;
}

.rplayerCard {
    padding-top: 1em;
    text-align: center !important;
    z-index: 10000 !important;
    border-bottom: 1px solid rgba(0,0,0,.1);
    margin-bottom: 1em;
    padding-bottom: 1em;
}

.rplayerCrQr {
    display: inline-block;
    max-width: 10em;
    width: 100%;
    max-height: 10em;
}

.rplayerCard > img {
    width: 5em;
}

.trackInfoButton {
    display: inline-block;
    border-radius: .5em;
    background-color: var(--rplayerInfoButton);
    margin: 0 .5em 0 .5em;
}