* {
    box-sizing: border-box;
}

@keyframes onPending {
    0%    { opacity: 1 }
    50%   { opacity: 0.4 }
    100%  { opacity: 1 }
}

:root {
    --color-red: #FB4808;
    --color-yellow: #FBC108;
    --color-green: #BCFB08;
    --color-gray: #DDDDDD;
    --grid-columns: 1;
}

div.cif.contentContainer {
    display: flex;
    flex-direction: row;
    font-size: min(3.8vw,7vh);
}

div.cif.contentContainer.animated > div {
    transition: width 400ms ease-out,opacity 200ms ease-out;
}

div.cc.halfPanel {
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

div.cc.halfPanel.left {
    background-color: white;
    flex: 0 0 auto;
    width: 50vw;
}

div.cc.halfPanel.right {
    flex: 1 1 auto;
    background-color: #5B5F63;
    align-items: center;
}

div.cc.backButtonFrame {
    align-self: center;
    flex: 1 1 auto;
    text-align: center;
    font-size: 1.6em;
}

div.cc.panelContent {
    flex: 1 1 auto;
    height: 14em;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    column-gap: 1em;
    padding: 0 1em;
}

div.cc.panelContent.header {
    grid-template-rows: 1em;
}

div.cc.panelContent > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

div.cc.panelContent > div > div:not(.big) {
    flex: 1 1 auto;
}

div.cc.logoGrid {
    display: flex;
    flex-direction: column;
    width: 25vw;
}

div.cc.logoGrid > div {
    flex: 0 0 50vh;
}

div.cc.logoFrame {
    background-color: var(--color-yellow);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
}

div.cc.logoFrame > img {
    width: auto;
    height: 5.2em;
    position: relative;
    left: 1.91em;
}

div.cc.logoText {
    text-align: right;
    font-weight: bold;
    color: #5B5F63;
    position: relative;
    left: 1.93em;
    padding-top: 1em;
}

div.cc.buttonFrame {
    display: flex;
    flex-direction: row;
    opacity: 0;
    transition: opacity ease-out 200ms;
}

div.cc.buttonFrame.disabled {
    color: #5B5F63;
}

div.cc.buttonFrame.big {
    width: 3em;
    height: 3em;
    font-size: 1.5em;
}

div.cc.buttonFrame.big i.fas {
    padding-top: 0.01em;
}

div.cc.buttonFrame.disabled > div.cc.buttonIconFrame {
    background-color: var(--color-gray);
}

div.cc.buttonFrame:not(.disabled) > div.cc.buttonIconFrame.default {
    background-color: var(--color-yellow);
}

div.cc.buttonFrame.big > div.cc.buttonIconFrame {
    flex: 1 1 auto;
}

div.cc.buttonFrame:not(.big) > div.cc.buttonIconFrame {
    flex: 0 0 2em;
}

div.cc.buttonFrame.settingFrame {
    background-color: rgba(255,255,255,0.1);
}

div.cc.buttonIconFrame {
    position: relative;
    transition: background-color 200ms ease-out;
}

div.cc.buttonIconFrame.on {
    background-color: var(--color-green);
}

div.cc.buttonIconFrame.off {
    background-color: var(--color-red);
}

div.cc.buttonIconFrame.idle {
    background-color: var(--color-yellow);
}

div.cc.buttonIconFrame.pending > div.cc.buttonIcon.active {
    animation-name: onPending;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-delay: 200ms;
}

div.cc.buttonIcon {
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-top: 0.05em;
    transition: opacity ease-out 200ms;
}

div.cc.buttonIcon.active {
    opacity: 1;
}

div.cc.buttonIcon.inactive {
    opacity: 0;
}

div.cc.buttonIcon.setting {
    color: white;
}

div.cc.buttonLabel {
    flex: 1 1 auto;
    padding: 0.3em;
    background-color: white;
}

div.cc.infoFrame {
    color: white;
    font-size: 0.6em;
    opacity: 0;
    transition: opacity ease-out 200ms;
}

div.cc.infoFrame.header {
    position: relative;
    top: 1.5em;
    padding-bottom: 0.8em;
    font-style: italic;
}

div.cc.infoFrame.center {
    text-align: center;
}

div.cc.setting.label {
    flex: 1 1 1px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

div.cc.setting.label > span {
    color: white;
    font-size: 0.5em;
}

div.cc.setting.value {
    color: white;
    padding: 0.3em 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

div.cc.setting.value.integer.narrow {
    width: 1.3em;
}

div.cc.setting.value.integer.wide {
    width: 3em;
}

div.cc.setting.value.text {
    width: 1.8em;
}

div.cc.setting.control {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.5em;
    padding: 0 0.5em 0 0.1em;
}

div.cc.setting.control > div {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

div.cc.setting.control.integer {
    color: var(--color-yellow);
}

div.cc.setting.control.cancel {
    color: var(--color-red);
}