html, body, .cc-clock {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

}

.cc-clock {
    display: flex;
    width: 100%;
    flex-direction: row;
    overflow: hidden;
}

.cc-clock--vertical .cc-clock__player__1 .cc-clock__player__time {
    transform: rotate(90deg);
}

.cc-clock--vertical .cc-clock__player__2 .cc-clock__player__time {
    transform: rotate(-90deg);
}

.cc-clock__player__1 {
    background-color: #FFFBBD;
}

.cc-clock__player__2 {
    background-color: #1D1A05;
    color: white;
}

.cc-clock--center {
    background-color: #E6AA68;
    padding: 8px;
    flex: 0 0 auto;
}

.cc-clock__player {
    overflow: hidden;
    height: 100%;
    display: flex;
    cursor: pointer;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    font-size: 5vw;
    font-weight: bold;
    user-select: none;
}

.cc-clock__player--lost .cc-clock__player__time {
    animation: blinker 300ms linear infinite;
    color: #CA3C25;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.cc-clock__player--active {
    background-color: #7FB069;
}

.cc-clock__reset {
}

.cc-clock__settings__time {
    width: 100%;
    display: flex;
    
}

.cc-clock__settings__time__part {
    flex: 1 1 33%;
}

.cc-clock__settings__time__part input {
    font-size: large;
    max-width: 2em;
    direction: rtl;
}

.cc-clock__buttons {
    display: flex;
    flex-direction: column;
    
}

.cc-clock__buttons button {
    margin-top: 8px;
    flex: 1 1 auto;
    width: 100%;
}

.icon {
    display: inline-block;
    overflow: hidden;
    width: 1em;
    height: 1em;

    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

}

.button-xxl {
    font-size: xx-large;
}

button .icon {
    vertical-align: bottom;
}

.icon-timer {
    background-image: url("../gfx/timer-black-18dp.svg");
}

.icon-layout-vertical {
    background-image: url("../gfx/text_rotate_vertical-black-18dp.svg");
}

.icon-layout-horizontal {
    background-image: url("../gfx/text_rotation_none-black-18dp.svg");
}

.icon-fullscreen {
    background-image: url("../gfx/fullscreen-black-18dp.svg");
}

.icon-exit-fullscreen {
    background-image: url("../gfx/fullscreen_exit-black-18dp.svg");
}
.icon-pause {
    background-image: url("../gfx/pause-black-18dp.svg");
}

.icon-unpause {
    background-image: url("../gfx/play_arrow-black-18dp.svg");
}