/* 
    ////////////////////////////////////
                PROFILE V2
    ////////////////////////////////////
*/

.HOVERPROFILE {
    height: 40px;
    margin: 5px;
    display: inline-block;
}

    .HOVERPROFILE.OFFLINE .HOVERPROFILE_GRID {
        background-color: rgba(255,0,0,0.7) !important;
    }

    .HOVERPROFILE.OFFLINE .HOVERPROFILE_DROPDOWN {
        background-color: rgb(255,250,250);
    }

.HOVERPROFILE_GRID {
    display: grid;
    grid-template-columns: auto 40px;
    grid-template-rows: 40px auto;
    grid-template-areas: "mover img" "drop drop";
    background-color: rgba(0,0,0,0.1);
    border-radius: 10px;
    z-index: 9;
    font-family: Roboto, "sans-serif";
}

.HOVERPROFILE .HOVERPROFILE_MOVER {
    margin-left: 0;
    margin-right: 0;
    grid-area: mover;
    font-size: 35px;
    color: white;
    text-transform: uppercase;
    cursor: default;
    overflow: hidden;
    max-width: 0px;
}

.HOVERPROFILE.expand .HOVERPROFILE_MOVER, .HOVERPROFILE:hover .HOVERPROFILE_MOVER {
    animation-name: HOVERPROFILE_MOVER;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.HOVERPROFILE:not(.expand):not(:hover) .HOVERPROFILE_MOVER {
    animation-name: HOVERPROFILE_MOVER_REV;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.HOVERPROFILE .HOVERPROFILE_IMG {
    grid-area: img;
    background-color: rgba(0,0,0,0.2);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}
    .HOVERPROFILE .HOVERPROFILE_IMG img {
        height: 100%;
        overflow: hidden;
    }

.HOVERPROFILE .HOVERPROFILE_DROPDOWN {
    grid-area: drop;
    max-height: 0px;
    max-width: 0px;
    z-index: 10;
    overflow: hidden;
    background-color: white;
    
    display: grid;
    grid-template-columns: 100%;
}

    .HOVERPROFILE .HOVERPROFILE_DROPDOWN p {
        border-bottom: 1px dashed lightgray;
        color: #262626;
        margin-top: 0px;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .HOVERPROFILE .HOVERPROFILE_DROPDOWN a {
        cursor: pointer;
        text-decoration: underline;
        color: #2ab89b;
        text-align: right;
    }
    .HOVERPROFILE .HOVERPROFILE_DROPDOWN span {
        text-align: right;
    }
    .HOVERPROFILE .HOVERPROFILE_DROPDOWN .HOVERPROFILE_DROPDOWN_TOKEN {
        width: 100%;
    }
    .HOVERPROFILE .HOVERPROFILE_DROPDOWN .HOVERPROFILE_DROPDOWN_TOKEN a {
        float: right;
    }
        .HOVERPROFILE .HOVERPROFILE_DROPDOWN .HOVERPROFILE_DROPDOWN_TOKEN input {
            width: calc(100% - 80px);
            background: none;
            border: none;
            outline: none;
        }

.HOVERPROFILE.expand .HOVERPROFILE_DROPDOWN {
    animation-name: HOVERPROFILE_EXPAND;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    max-width: 400px;
    border: 1px solid gray;
}

    @keyframes HOVERPROFILE_MOVER {
        0% {
        max-width: 0px;
        margin-left: 0;
        margin-right: 0;
    }

    10% {
        margin-left: 10px;
        margin-right: 10px;
    }

    100% {
        max-width: 400px;
        margin-left: 10px;
        margin-right: 10px;
    }
}

@keyframes HOVERPROFILE_MOVER_REV {
    100% {
        max-width: 0px;
        margin-left: 0;
        margin-right: 0;
    }

    10% {
        margin-left: 10px;
        margin-right: 10px;
    }

    0% {
        max-width: 400px;
        margin-left: 10px;
        margin-right: 10px;
    }
}

@keyframes HOVERPROFILE_EXPAND {
    0% {
        max-height: 0px;
        padding: 0;
    }

    10% {
        padding: 5px;
    }

    100% {
        max-height: 200px;
        padding: 5px;
    }
}

/* 
    -----------------------------------
              TWITCH LOGIN
    -----------------------------------
*/

.TTV_LOGIN {
    margin: 10px auto;
    width: 90%;
    min-width: 450px;
    max-width: 600px;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto 50px;
    font-family: 'Roboto', sans-serif !important;
}

    /* TTV_LOGIN_DATA */
    .TTV_LOGIN .TTV_LOGIN_DATA {
        height: 0px;
        padding: 0px;
        background-color: white;
        border: 1px solid gray;
        border-bottom: none;
        overflow: hidden;
    }

.TTV_LOGIN.TTV_LOGIN_FALSE .TTV_LOGIN_DATA > center {
    font-size: 30px;
    font-weight: 400;
}

.TTV_LOGIN.TTV_LOGIN_FALSE .TTV_LOGIN_DATA .TTV_LOGIN_DATA_SPLITTER {
    height: 100%;
    display: grid;
    grid-template-columns: 11% 33% 11% 33% 11%;
    grid-template-rows: 100%;
    grid-template-areas: ". left . right .";
}

    .TTV_LOGIN.TTV_LOGIN_FALSE .TTV_LOGIN_DATA .TTV_LOGIN_DATA_SPLITTER .TTV_LOGIN_DATA_LEFT {
        grid-area: left;
    }

    .TTV_LOGIN.TTV_LOGIN_FALSE .TTV_LOGIN_DATA .TTV_LOGIN_DATA_SPLITTER .TTV_LOGIN_DATA_RIGHT {
        height: 100%;
        grid-area: right;
    }

    .TTV_LOGIN.TTV_LOGIN_FALSE .TTV_LOGIN_DATA .TTV_LOGIN_DATA_SPLITTER p {
        margin: 0;
    }

    .TTV_LOGIN.TTV_LOGIN_FALSE .TTV_LOGIN_DATA .TTV_LOGIN_DATA_SPLITTER img {
        height: calc(100% - 40px);
    }

    .TTV_LOGIN.TTV_LOGIN_FALSE .TTV_LOGIN_DATA .TTV_LOGIN_DATA_SPLITTER .TTV_LOGIN_DATA_TOP {
        margin-top: 10px;
        border-bottom: 1px black dashed;
    }

    .TTV_LOGIN.TTV_LOGIN_FALSE .TTV_LOGIN_DATA .TTV_LOGIN_DATA_SPLITTER .TTV_LOGIN_DATA_BOTTOM {
        font-weight: 200;
        font-size: 15px;
    }

    .TTV_LOGIN.TTV_LOGIN_FALSE .TTV_LOGIN_DATA .TTV_LOGIN_DATA_SPLITTER .TTV_LOGIN_HINT {
        font-weight: 200;
        font-size: 10px;
    }

body.darkmode .TTV_LOGIN .TTV_LOGIN_DATA {
    background-color: #2e2e2e;
    color: white !important;
    border: none;
}

    body.darkmode .TTV_LOGIN .TTV_LOGIN_DATA .TTV_LOGIN_DATA_TOP {
        border-color: white !important;
    }

/* TTV_LOGIN_BUTTON */
.TTV_LOGIN .TTV_LOGIN_BUTTON {
    background-color: #6441a5;
    cursor: pointer;
}
.TTV_LOGIN[disabled] .TTV_LOGIN_BUTTON {
    filter: grayscale(1);
    cursor: default;
}

    .TTV_LOGIN .TTV_LOGIN_BUTTON center {
        padding: 5px;
        height: calc(100% - 10px);
    }

        .TTV_LOGIN .TTV_LOGIN_BUTTON center span {
            display: inline-block;
            margin-right: 10px;
            font-weight: 600;
            font-size: 35px;
            color: white;
            vertical-align: top;
        }

        .TTV_LOGIN .TTV_LOGIN_BUTTON center img {
            height: 100%
        }

            .TTV_LOGIN .TTV_LOGIN_BUTTON center img[data-type="svg"] {
                filter: invert(1);
            }

.TTV_LOGIN .TTV_LOGIN_DATA_EXPANDED {
    height: 200px;
    padding: 5px;
}

.TTV_LOGIN .TTV_LOGIN_DATA_COLLAPSED {
    height: 0px;
    padding: 0px;
}

@keyframes TTV_LOGIN_EXPAND {
    from {
        height: 0px;
        padding: 0px;
    }

    to {
        height: 200px;
        padding: 5px;
    }
}

@keyframes TTV_LOGIN_COLLAPSE {
    from {
        height: 200px;
        padding: 5px;
    }

    to {
        height: 0px;
        padding: 0px;
    }
}