@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');


@font-face {
    font-family: siteFont;
    src: url("fonts/SharpGroteskMedium22.woff");
}



html, body {
    font-family: siteFont;
    font-size: 10px;
    line-height: 22px;
    background-color: #102020;
    color: white;
    font-weight: 100;
    overflow: hidden;
    text-align: center;
    padding: 0px;
    margin: 0px;
    user-select: none;
    zoom: 100%;
    touch-action: manipulation;
    zoom: reset;
}

@media screen and (max-aspect-ratio: 1/1), screen and (max-width: 768px) {
    html {
        zoom: 100%;
    }
}


#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 3.5rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

    h1{
        color:white;
        font-size:2rem;
    }

        h1:focus {
            outline: none;
            box-shadow: none;
        }

h2 {
    color: #50ff50;
    font-size: 1.5rem;
}

    h2:focus {
        outline: none;
        box-shadow: none;
    }

.tblMainGrid{
    border-style:none;
    width:100vw;
    height:100vh;      
    z-index:1;
}

.tblMainGrid td{
    border-style:solid;
    border-width:0px;
    border-color:#404040;
}


.tblMainGrid_Row1_td{        
    height:50px;    
    vertical-align:central;    
    overflow:hidden;
}

.tblMainGrid_Row3_td{
    height:100px;
}

@media screen and (max-width:800px) {
    .tblMainGrid_Row3_td {
        height: 150px;
    }
}

@media screen and (max-width:800px) {
    .tblMainGrid_TopRow{
        display:none;
    }
}


.tblMainGrid_LeftColumn_td {
    width: 300px;
    max-width: 300px;
    overflow: hidden;        
}


    .tblMainGrid_RightColumn_td {
        width: 300px;
    }


    @media screen and (max-width:800px) {
        .tblMainGrid_LeftColumn_td {
            display: none;
        }

        .tblMainGrid_RightColumn_td {
            display: none;
        }
    }

    @media screen and (min-width:800px) {
        .tblMainGrid_BodyTD {
            width: 100vw;
        }
    }



    .divPageBackground {
        position: fixed;
        border-style: solid;
        border-width: 0px;
        top: 0px;
        left: 0px;
        width: 100%;
        background-color: #f0f0f0;
        overflow: auto;
        margin: 0px;
        padding: 0px;
        opacity: 0.03;
        display: none;
    }

    .myVideo {
        position: fixed;
        border-style: solid;
        border-width: 0px;
        top: 0px;
        left: 0px;
        width: 100%;
        background-color: #f0f0f0;
        overflow: auto;
        margin: 0px;
        padding: 0px;
        opacity: 0.05;
        z-index: -1;
    }


    .divTopBar {
        border-style: solid;
        border-width: 0px;
        width: 100%;
        vertical-align: middle;
        height: 100px;
        max-height: 100px;
    }

    .divBottomBar {
        border-style: solid;
        border-width: 0px;
        width: 100%;
        height: 100%;
    }


    .divLeftBar {
        border-style: solid;
        border-width: 0px;
        border-color: orange;
        padding-left: 30px;
        padding-right: 30px;
        height: 100%;
        
    }



    .divRightBar {
        height: 100%;
        width: 98%;
    }



    .divChatQuestionField {
        background-color: #303060a0;
        width: 70vw;
        margin-left: 15vw;
        padding: 10px;
        border-radius: 10px;
        border-style: solid;
        border-width: 1px;
        border-color: #0071c1;
        box-shadow: 0px 0px 10px 3px #101010;
        margin-top: 40px;
    }




    .tblChatUserQuestion {
        width: 100%;
        border-style: none;
    }

        .tblChatUserQuestion td {
            color: white;
            overflow: hidden;
        }

            .tblChatUserQuestion td:nth-child(1) {
                width: 50px;
            }

            .tblChatUserQuestion td:nth-child(3) {
                width: 50px;
                text-align: center;
            }

            .tblChatUserQuestion td:nth-child(4) {
                width: 30px;
                text-align: center;
            }



    .txtChat {
        font-family: siteFont;
        font-size: 1.2rem;
        background-color: transparent;
        border-style: none;
        width: 100%;
        color: white;
    }

        .txtChat:focus {
            outline: none;
        }






    .cmdFeather {
        cursor: pointer;
        color: lightblue;
    }


    .divQuestionIndenter {
        margin-left: 50%;
    }




    .divChatQuestion {
        border-style: solid;
        border-width: 1px;
        border-radius: 10px;
        background-color: #0071c150;
        border-color: #0071c180;
        padding-top: 10px;
        box-shadow: 0px 0px 10px 3px #0071c160;
        user-select: text;
        padding: 10px;
    }



    .divChatEntity {
        border-style: solid;
    }


    .tblChatEntity {
        width: 100%;
        height: 10px;
        border-style: solid;
        border-color: gold;
        border-width: 0px;
        margin-bottom: 10px;
        text-align: left;
    }

        

    .divChatIdentity {
        border-style: solid;
        border-width: 0px;
        text-align: left;
    }

    .labChatIdentity {
        margin-bottom: 10px;
        color: orange;
        font-size: 1.3rem;
    }


    .divChatQuestionWrapper {
        background-color: green;
        border-width: 0px;
    }

    .divChatAnsware {
        border-style: solid;
        border-width: 1px;
        border-radius: 10px;
        background-color: #00c17150;
        border-color: #00c17180;
        padding-top: 10px;
        box-shadow: 0px 0px 10px 3px #00c17160;
        user-select: text;
        padding: 10px;
    }










    .divLanguageSelector {
        position: absolute;
        left: 30px;
        top: 20px;
        z-index: 2;
    }

    @media screen and (max-width: 1280px) {
        .divLanguageSelector {
            display: none;
        }
    }

    .imgFlag {
        width: 64px;
        margin-right: 20px;
        cursor: pointer;
    }


.divCharacter {
    background-color: #101010;
    max-width: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: #909090;
    border-radius: 10px;
    box-shadow: 0 0 15px 10px #48abe050;
    padding: 20px;
}




.imgCharacter {
    width: 100%;
    max-width: 100%;
    cursor: pointer;
    border-radius: 10px;    
}







    .cmdDefaultAnimated {
        position: relative;
        left: -10px;
        background: transparent;
        color: #fff;
        font-size: 1.1rem;
        text-transform: uppercase;
        font-weight: 100;
        border: none;
        padding: 5px 10px;
        perspective: 20rem;
        border-radius: 5px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.308);
        margin-bottom: 10px;
        width: 200px;
        cursor: pointer;
    }

        .cmdDefaultAnimated::before {
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            border-radius: 10px;
            background: linear-gradient(320deg, rgba(0, 140, 255, 0.678), rgba(128, 0, 128, 0.308));
            z-index: 1;
            transition: background 3s;
        }

        .cmdDefaultAnimated:hover::before {
            animation: rotate 1s;
            transition: all .5s;
        }

    @keyframes rotate {
        0% {
            transform: rotateY(180deg);
        }

        100% {
            transform: rotateY(360deg);
        }
    }


    .divChatSettingsShader {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100vw;
        height: 100vh;
        background-color: #303030;
        opacity: 0.8;
        z-index: 2;
        border-style: solid;
        border-width: 2px;
    }


    .divChatSettingsDialog {
        border-style: solid;
        border-width: 3px;
        border-color: #106060;
        position: fixed;
        top: 50px;
        bottom: 50px;
        width: 60vw;
        margin-left: 10vw;
        margin-right: 10vw;
        margin-top: 5vh;
        background-color: #103020;
        z-index: 2;
        padding-left: 5%;
        padding-right: 9%;
        overflow: hidden;        
    }

    .divCharacterScroller {
        display: flex;
        width: 100%;
        height: 85%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        overflow-y: auto;
        user-select: none;
    }

        .divCharacterScroller::-webkit-scrollbar {
            width: 12px;
        }

        .divCharacterScroller::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(255,200,90,0.7);
            border-radius: 10px;
        }

        .divCharacterScroller::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.5);
        }


    .divCharacterCard {
        width: 170px;
        height: 321px;
        border-style: solid;
        border-color: white;
        border-width: 0px;
        margin-right: 20px;
        opacity: 1;
        cursor: pointer;        
    }

    .imgCharacterImageOnCard {
        width: 100%;
        border-style: solid;
        border-width: 1px;
    }

    .cmdCloseDialog {
        position: absolute;
        right: 10px;
        top: 10px;
        width: 25px;
        height: 25px;
        border-style: solid;
        border-width: 1px;
        text-align: center;
        padding: 0px;
        background-color: lightgreen;
        color: black;
        border-radius: 13px;
        border-color: black;
        cursor: pointer;
    }


    .labCharacterHeading {
        font-size: 2rem;
        padding-top: 20px;
        line-height: 50px;
    }


    .divCharacterName {
        font-size: 1rem;
        font-weight: 100;
        height: 50px;
        display: flex;
        justify-content: center;
    }

.labCharacterName {
    display: inline-block;
    align-self: flex-end;
    margin-bottom: 15px;
    font-size: 1.3em;    
}

.labCharacterNameGlow {
    display: inline-block;
    align-self: flex-end;
    margin-bottom: 15px;
    font-size: 1.3em;
    -webkit-animation: glowingCharacterName 1s ease-in-out infinite alternate;
    -moz-animation: glowingCharacterName 1s ease-in-out infinite alternate;
    animation: glowingCharacterName 1s ease-in-out infinite alternate;
}


@-webkit-keyframes glowingCharacterName {
    from {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00e673, 0 0 20px #00e673, 0 0 25px #00e673, 0 0 30px #00e673, 0 0 70px #00e673;
    }

    to {
        text-shadow: 0 0 10px #fff, 0 0 15px #4dffa6, 0 0 20px #4dffa6, 0 0 25px #4dffa6, 0 0 30px #4dffa6, 0 0 35px #4dffa6, 0 0 40px #4dffa6;
    }
}


    .divChatWall {
        border-style: solid;
        border-width: 0px;
        border-color: red;
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

        .divChatWall::-webkit-scrollbar {
            display: none;
        }




    .tblChatQuestion {
        border-style: solid;
        border-width: 1px;
        width: 100%;
        border-collapse: collapse;
        border-style: solid;
        border-width: 1px;
    }

        .tblChatQuestion td {
            border-color: blue;
            text-align: left;
            padding-left: 10px;
            padding-right: 10px;
            font-family: 'Segoe UI';
        }


    .tblChatAnsware {
        border-style: solid;
        border-width: 1px;
        min-width: 40%;
        max-width: 100%;
        border-collapse: collapse;
        border-style: solid;
        border-width: 1px;
        border-radius: 10px;
        background-color: #00c17150;
        border-color: #0071c180;
        padding-top: 10px;
        box-shadow: 0px 0px 10px 3px #00c17160;
        user-select: text;
        float: left;
        padding-left: 10px;
        padding-right: 10px;
    }

        .tblChatAnsware td {
            border-color: green;
            text-align: left;
            padding-left: 10px;
            padding-right: 10px;
            font-family: 'Segoe UI';
        }


    .labChatQuestionText {
        font-size: 1.2rem;
    }

    .labChatQuestionStatus {
        font-size: 0.8rem;
        padding: 0px;
        margin: 0px;
        color: #0091e180;
    }

    .divChatQuestionStatus {
        position: relative;
        line-height: 0px;
        text-align: right;
        border-style: solid;
        border-width: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-right: 10px;
    }

    .imgAIWorking {
        position: relative;
        top: 4px;
        width: 150px;
        opacity: 0.5;
        width: 16px;
        margin-left: 16px;
    }


    .tblChatQuestionTop {
        width: 100%;
        border-style: none;
    }

        .tblChatQuestionTop td {
            border-style: none;
        }


    .divSettingsPage {
        height: 95%;
        padding: 20px;
        text-align: left;
    }

    .tblSettings {
        width: 800px;
    }

        .tblSettings td {
            text-align: left;
        }

            .tblSettings td:nth-child(1) {
                width: 40%;
            }

            .tblSettings td:nth-child(2) {
                width: 60%;
            }

    .txtDefault {
        width: 100%;
        border-style: none;
        border-width: 1px;
        border-top-style: none;
        background-color: #30303030;
        padding: 5px;
        margin: 0px;
        color: white;
        background-color: #00000020;
    }

        .txtDefault:focus {
            background-color: #ffffff20;
            outline: none;
        }

    .cboDefault {
        width: 100%;
        border-style: none;
        border-width: 1px;
        border-top-style: none;
        background-color: #40303030;
        padding: 5px;
        margin: 0px;
        color: white;
    }

        .cboDefault:focus {
            outline: none;
        }


        .cboDefault::-webkit-scrollbar {
            width: 12px;
        }

        .cboDefault::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(255,200,90,0.7);
            border-radius: 10px;
        }

        .cboDefault::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.5);
        }


    #cboDefault * {
        border-radius: 15px;
        border-style:none;
        background-color: #303030;
    }

    .cmdDefault {
        position: relative;
        margin: 0;
        padding: 7px 35px;
        outline: none;
        text-decoration: none;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        text-transform: uppercase;
        background-color: #fff;
        border: 1px solid rgba(22, 76, 167, 0.6);
        border-radius: 10px;
        color: #1d89ff;
        font-weight: 400;
        font-family: inherit;
        z-index: 0;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
        font-size:1rem;
    }

        .cmdDefault span {
            color: #164ca7;
            font-size: 1rem;
            font-weight: 500;
            letter-spacing: 0.7px;
        }

        .cmdDefault:hover {
            animation: rotate624 0.7s ease-in-out both;
        }

            .cmdDefault:hover span {
                animation: storm1261 0.7s ease-in-out both;
                animation-delay: 0.06s;
            }

    @keyframes rotate624 {
        0% {
            transform: rotate(0deg) translate3d(0, 0, 0);
        }

        25% {
            transform: rotate(3deg) translate3d(0, 0, 0);
        }

        50% {
            transform: rotate(-3deg) translate3d(0, 0, 0);
        }

        75% {
            transform: rotate(1deg) translate3d(0, 0, 0);
        }

        100% {
            transform: rotate(0deg) translate3d(0, 0, 0);
        }
    }

    @keyframes storm1261 {
        0% {
            transform: translate3d(0, 0, 0) translateZ(0);
        }

        25% {
            transform: translate3d(4px, 0, 0) translateZ(0);
        }

        50% {
            transform: translate3d(-3px, 0, 0) translateZ(0);
        }

        75% {
            transform: translate3d(2px, 0, 0) translateZ(0);
        }

        100% {
            transform: translate3d(0, 0, 0) translateZ(0);
        }
    }

    .btn-shine {
        border: 1px solid;
        overflow: hidden;
        position: relative;
    }

        .btn-shine span {
            z-index: 20;
        }

        .btn-shine:after {
            background: #38ef7d;
            content: "";
            height: 155px;
            left: -75px;
            opacity: 0.4;
            position: absolute;
            top: -50px;
            transform: rotate(35deg);
            transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
            width: 50px;
            z-index: -10;
        }

        .btn-shine:hover:after {
            left: 120%;
            transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
        }


    .coolinput {
        display: flex;
        flex-direction: column;
        width: fit-content;
        position: static;
        max-width: 240px;
    }

        .coolinput label.text {
            font-size: 0.75rem;
            color: #818CF8;
            font-weight: 700;
            position: relative;
            top: 0.5rem;
            margin: 0 0 0 7px;
            padding: 0 3px;
            background: #e8e8e8;
            width: fit-content;
        }

        .coolinput input[type=text].input {
            padding: 11px 10px;
            font-size: 0.75rem;
            border: 2px #818CF8 solid;
            border-radius: 5px;
            background: #e8e8e8;
        }

            .coolinput input[type=text].input:focus {
                outline: none;
            }

    .divEditBar {
        position: fixed;
        background-color: #303040;
        top: 0px;
        width: 500px;
        height: 100%;
        right: 0px;
        padding-left: 20px;
        padding-right: 30px;
        text-align: left;
        overflow-y: auto;
        z-index: 1;
    }


    .tblEditBar {
        width: 100%;
    }

        .tblEditBar td {
            text-align: left;
        }


            .tblEditBar td:nth-child(1) {
            }


    .imgCharacterEdit {
        border-style: solid;
        border-width: 1px;
        width: 150px;
    }

    .labError {
        color: red;
    }

    .divLogin {
        background-color: #000000e0;
        border-style: none;
        position: fixed;
        width: 400px;
        height: 150px;
        z-index: 15;
        top: 36%;
        left: 48.5%;
        margin: -100px 0 0 -150px;
        border-radius: 10px;
        vertical-align: middle;
        padding-top: 30px;
        border-style: solid;
        border-color: #a0a0ff;
        border-width: 1px;
    }

    .labLogin {
        font-family: 'Segoe UI';
        font-size: 24px;
        color: #4040ff;
        font-weight: 300;
    }

    .txtLogin {
        margin-top: 20px;
        background-color: #303030;
        border-style: solid;
        border-color: #404040;
        border-width: 1px;
        font-size: 2rem;
        color: white;
        text-align: center;
    }


    .vidBackground {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100vw;
        height: 100vh;
        object-fit: cover;
    }

    .divBackgroundVideo {
        border-style: solid;
        width: 100vw;
        height: 100vh;
    }

    .labLoginPersonel {
        font-size: 0.8rem;
        font-weight: 100;
        color: #404040;
    }


    .divShader {
        position: fixed;
        background-color: #000000e0;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    .divDisclamer {
        font-family: siteFont;        
        position: fixed;
        border-style: solid;
        border-color: blanchedalmond;
        border-radius: 20px;
        background-color: #000000e0;
        top: 10vh;
        left: 20vw;
        width: 60vw;
        max-height: 75vh;
        z-index: 2;
        font-size: 1.3rem;
        overflow-y: auto;
        text-align: left;
        padding: 20px;
    }


    .cmdInfo {
        background-color: green;
    }




.infoButton {
    font-family: siteFont;
    font-size: 1.3rem;
    padding: 15px 30px;
    border: none;
    outline: none;
    border-radius: 30px;
    z-index: 1;
    position: relative;
    -webkit-box-shadow: 0 5px 15px rgba(33, 33, 33, .2);
    box-shadow: 0 5px 15px rgba(33, 33, 33, .2);
    overflow: hidden;
    cursor: pointer;
    background-color: lightyellow;
}

    infoButton > span {
        z-index: 2;
    }

    infoButton::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 30px;
        background-color: #212121;
        z-index: -1;
        overflow: hidden;
        -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: left;
        -ms-transform-origin: left;
        transform-origin: left;
        -webkit-transition: -webkit-transform 0.2s ease-in;
        transition: -webkit-transform 0.2s ease-in;
        transition: transform 0.2s ease-in;
    }

    infoButton:hover {
        color: #e8e8e8;
    }

        infoButton:hover::before {
            -webkit-transform: scaleX(1);
            -ms-transform: scaleX(1);
            transform: scaleX(1);
            -webkit-transform-origin: left;
            -ms-transform-origin: left;
            transform-origin: left;
        }

    .divInfoButton {
        position: fixed;
        right: 50px;
        top: 20px;        
    }


/*Hide info button on mobile devices*/
@media screen and (max-width:800px) {
    .divInfoButton{
        display:none;
    }
}


.divResponseBar {
    position:relative;
    float:right;
    top:-10px;
}

.cmdResponseUnliked{        
    padding:3px;
    left:-10px;
    border-style:solid;
    border-width:1px;
    border-radius:3px;
    padding:5px;
    background-color:#303030;
    color:white;    
    width:40px;
    height:40px;
    cursor:pointer;    
    font-size:1.5em;
    margin-right:5px;
    border-style:none;
    background-color:transparent;
}

    .cmdResponseUnliked:hover{
        border-color:white;
        box-shadow:  10px,10px, 10px,10px, #2bee3e;
    }

    .cmdResponseLiked {    
        border-style: solid;
        border-width: 1px;
        border-radius: 3px;
        padding: 5px;
        background-color: #306030;
        color: white;
        width: 32px;
        height: 32px;
        cursor: pointer;
    }

.divLikeBar{
    position:relative;
    top:-95px;
    left:-75px;
    width:0px;
    height:0px;    
    
}

.divLikeBarInner {    
    display:flex;    
    background-color:#304030;    
    width:206px;
    padding:5px;
    border-style:solid;
    border-width:1px;
    border-color:#909090;
    border-radius:10px;
}


.chatEntitySpacerCell {
    width: 20%;
    min-width: 20%;
    
}

.chatEntityContentCell{
    min-width:80%;
    width:80%;
}


.divMsgBoxShader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100vh;
    background-color: #000000d0;
    z-index: 10;    
}

.divMsgBox {
    border-style: solid;
    border-width: 1px;
    position: fixed;
    top: 40%;
    left: 50%;
    margin: auto;
    padding: 0px;
    z-index: 11;
    font-size: 1.4rem;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    text-align: left;
    border-color: #ffa50092;
    background-color: #202020;
    box-shadow: 0px 0px 30px 10px #ffa50050;
}

.tblMsgBox {
    width: 100%;
    min-width: 270px;
    border-collapse: collapse;
}

.tblMsgBoxRow1 {
    
}

.tblMsgBoxRow2 {    
    
}

.tblMsgBox td{
    border-style:solid;
    border-width:0px;
    
}

.tblMsgBoxRow1Cell1{
    background-color:transparent;    
    font-size:1.8rem;
    padding-top:0px;
    padding-bottom:0px;
    padding-left:20px;
    padding-right:20px;
    height:40px;
    background-color:darkorange;
}

.tblMsgBoxRow2Cell1 {
    background-color: transparent;    
    padding-left:20px;
    padding-right:20px;
    padding-bottom:0px;
    padding-top:30px;    
    vertical-align:top;    
}

.tblMsgBoxRow3Cell1 {
    background-color: transparent;
    height: 40px;    
    padding-left:20px;
    padding-right:20px;
}

.tblMsgBoxRow4Cell1 {
    background-color: transparent;
    height: 60px;
    text-align:right;
    padding-left:20px;
    padding-right:20px;
}


.labMsgBoxError{
    color:red;
    font-size:1.2rem;
}


.cmdMsgBoxButtonOK{
    width:100px;
    height:30px;
    background-color:#306030;
    border-color:#508050;
    border-style:solid;
    border-width:1px;
    margin-right:10px;
    color:white;
    cursor:pointer;
}

.cmdMsgBoxButtonCancel {
    width: 100px;
    height: 30px;
    background-color: #603030;
    border-color: #805050;
    border-style: solid;
    border-width: 1px;
    margin-right: 10px;
    color: white;
    cursor: pointer;
}



.cmdMsgBoxButtonYes {
    width: 100px;
    height: 30px;
    background-color: #306030;
    border-color: #508050;
    border-style: solid;
    border-width: 1px;
    margin-right: 10px;
    color: white;
    cursor: pointer;
}

.cmdMsgBoxButtonNo {
    width: 100px;
    height: 30px;
    background-color: #603030;
    border-color: #805050;
    border-style: solid;
    border-width: 1px;
    margin-right: 10px;
    color: white;
    cursor: pointer;
}


.cmdMsgBoxButtonSave {
    width: 100px;
    height: 30px;
    background-color: #306030;
    border-color: #508050;
    border-style: solid;
    border-width: 1px;
    margin-right: 10px;
    color: white;
    cursor: pointer;
}


.cmdMsgBoxButtonDelete {
    width: 100px;
    height: 30px;
    background-color: #303060;
    border-color: #505080;
    border-style: solid;
    border-width: 1px;
    margin-right: 10px;
    color: white;
    cursor: pointer;
}

.hrMsgBox{
    border-color:#404040;
}


.tblMsgBoxContent{
    width:100%;
    border-style:solid;
    border-color:white;
}

    .tblMsgBoxContent td{
        width:50%;
    }

    .labMsgBoxX {
        float: right;
        cursor: pointer;
        border-style: solid;
        border-radius: 1rem;
        padding-left: 5px;
        padding-right: 5px;
        border-width: 2px;
    }