@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');


::-webkit-scrollbar
{
    width: 0px;
    height: 0px;
    background-color: #00000010;
}

::-webkit-scrollbar-thumb
{
    background: #00000050;
}

/*:root*/
/*{*/
/*    --background: #000000;*/
/*    --background-opacity: .9;*/
/*    --form-background: #004482;*/
/*    --view-background: #666666;*/
/*    --input-background: #00000080;*/
/*    --input-background-inactive: #00000050;*/
/*    --button-background: #008672;*/
/*    --color: #DDDDDD;*/
/*    --input-color: #DDDDDD;*/
/*    --input-color-inactive: #DDDDDD50;*/
/*    --button-color: #DDDDDD;*/
/*    --border-color: #DDDDDD;*/
/*    --off-color: #004482;*/
/*    --blink-color: green;*/
/*    --blink-red-color: #6d0b0b;*/
/*    --blink-green-color: green;*/
/*    --active-color: #00b398;*/
/*    --debug-active-color: #FF0000;*/
/*    --animation-duration: 1s;*/
/*    --global-size: 14px;*/
/*}*/

:root
{
    --background: #00000090;
    /*--background-url: url(../images/texture.jpg);*/
    --background-url: url(../images/themes/0.jpg);
    --background-opacity: .5;
    --form-background: #00000080;
    --frame-background: #000000EE;
    --view-background: #00000080;
    --input-background: #FFFFFF50;
    --input-background-inactive: #00000050;
    --button-background: #2e8c9e90;
    --color: #DDDDDD;
    --input-color: #DDDDDD;
    --input-color-inactive: #DDDDDD50;
    --button-color: #DDDDDD;
    --border-color: #DDDDDD;
    --off-color: #004482;
    --blink-color: #2ca423cc;
    --blink-red-color: #6d0b0b;
    --blink-green-color: #2ca423cc;
    --active-color: #00b398;
    --debug-active-color: #FF0000;
    --animation-duration: 1s;
    --global-size: 14px;
    /*--box-shadow: 0 0 10px #000000;*/
    --border-radius: 5px;
    --padding: 10px;
    --margin: 10px;
    --base: 10px;
}

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

@keyframes close
{
    from 
    {
        bottom: 0;
    }
    to 
    {
        bottom: -100vh;
    }
}

@keyframes open
{
    from 
    {
        bottom: -100vh;
    }
    to 
    {
        bottom: 0;
    }
}

@keyframes dots-39rdyvmd
{
   100% 
   {
      transform: rotate(1turn);
   }
}

@keyframes dots-c774cgmd 
{
   100% 
   {
      transform: rotate(1turn) translate(22.4px);
   }
}

.dots 
{
   width: 13.4px;
   height: 13.4px;
   border-radius: 50%;
   background: #DDDDDD;
   color: #DDDDDD;
   box-shadow: 0 0 0 3.4px;
   position: relative;
   animation: dots-39rdyvmd 2s infinite linear;
}

.dots:before,
.dots:after 
{
   content: "";
   position: absolute;
   border-radius: 50%;
   inset: 0;
   background: #DDDDDD;
   transform: rotate(0deg) translate(20.2px);
   animation: dots-c774cgmd 1s infinite;
}

.dots:after 
{
   animation-delay: -0.5s;
}

.blink
{
    animation: blink 1s linear infinite;
}

.red
{
    background: var(--blink-red-color);
}

.green
{
    background: var(--blink-green-color);
}

.off
{
    background: var(--off-color);
}

.active:not(.red)
{
    background: var(--active-color);
    box-shadow: var(--box-shadow);
}

.active.red
{
    background: var(--debug-active-color);
    box-shadow: var(--box-shadow);
}

.blend-screen
{
    mix-blend-mode: screen;
}

body
{
    padding: 0;
    margin: 0;
    background: var(--background);
    color: var(--color);
    overflow: hidden;
    font-family: monospace;
    user-select: none;
    font-size: var(--global-size);
    position: relative;
}

body::before
{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--background);
    background-origin: border-box;
    background-image: var(--background-url);
    background-size: cover;
    background-position: center center;
    opacity: var(--background-opacity);
}

div#main
{
    height: 100vh;
    width: 100vw;
}

.material-symbols-outlined
{
    
}

button
{
    background: var(--button-background);
    color: var(--button-color);
    cursor: pointer;
    border: none;
    outline: none;
    padding: var(--base);
    border-radius: var(--border-radius);
    font-size: var(--global-size);
}

button:hover
{
    /*opacity: 0.5;*/
}

button[disabled]
{
    opacity: 0.2;
}

input,
textarea
{
    background: var(--input-background);
    color: var(--input-color);
    border: none;
    outline: none;
    padding: var(--base);
    border-radius: var(--border-radius);
    font-size: var(--global-size);
}

textarea
{
    resize: none;
}

a
{
    text-decoration: none;
    color: var(--color);
    display: block;
}

label
{
    font-weight: bold;
}

.hide
{
    display: none !important;
}

/* LOGIN */

div[data-login] 
{
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

div[data-login] > form,
div[data-webrtc-view] form
{
    display: flex;
    align-items: center;
    width: 50vw;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    background: var(--form-background);
    padding: var(--base) calc(var(--base) * 1.5);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

div[data-webrtc-view] form
{
    width: 80vw;
}

div[data-webrtc-view="chat"] form
{
    width: calc(100% - (var(--base) * 2)) !important;
    position: fixed;
    bottom: calc(var(--base) * 6);
}

div[data-login] > form button,
div[data-webrtc-view] form button
{
    mix-blend-mode: screen;
}

div[data-login] > .logo 
{
    display: none;
}

div[data-login] > form div,
div[data-webrtc-view] form div
{
    margin: calc(var(--base) / 1.5);
    width: 100%;
}

div[data-login] input,
div[data-login] button,
div[data-webrtc-view] input,
div[data-webrtc-view] button,
div[data-webrtc-view] textarea
{
    padding: calc(var(--base) * 1.5);
    width: 100%;
}

div[data-login] > form input,
div[data-webrtc-view] input,
div[data-webrtc-view] textarea
{
    width: calc(100% - (var(--base) * 3));
}

/* WEBRTC */

div[data-webrtc]
{
    width: 100vw;
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

div[data-webrtc] div[data-webrtc-menu] 
{
    display: flex;
    width: calc(100vw - (var(--base) * 1.5));
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: calc(var(--base));
    z-index: 100;
    background: var(--frame-background);
    box-shadow: var(--box-shadow);
    height: calc(var(--base) * 4);
    position: fixed;
    bottom: 0;
}

div[data-webrtc] div[data-webrtc-menu] > div
{
    display: flex;
    width: calc(100vw / 3);
}

div[data-webrtc] div[data-webrtc-menu] > div.left
{
    justify-content: flex-start;
}

div[data-webrtc] div[data-webrtc-menu] > div.middle
{
    justify-content: center;
}

div[data-webrtc] div[data-webrtc-menu] > div.right
{
    justify-content: flex-end;
}

div[data-webrtc] div[data-webrtc-menu] [data-webrtc-action]
{
    display: flex;
    padding: calc(var(--base) * 1);
    margin: calc(var(--base) * 0.5);
    border-radius: var(--border-radius);
    outline: none;
    border: none;
}

div[data-webrtc] div[data-webrtc-menu] [data-webrtc-action] span
{
    font-size: calc(var(--global-size) * 1.25);
}

div[data-webrtc] div[data-webrtc-messages] 
{
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: var(--background);
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

div[data-webrtc] div[data-webrtc-messages] > div
{
    margin: calc(var(--base) * 2);
}

div[data-webrtc] div[data-webrtc-views]
{
    outline: none;
    border: none;
    background: var(--view-background);
    color: var(--color-background);
    width: 100vw;
    height: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view]
{
    display: flex;
    flex-direction: column;
    height: 100%;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view] div.head 
{
    display: flex;
    background: var(--frame-background);
    width: calc(100vw - (var(--base) * 1));
    padding: calc(var(--base) * 1.5) !important;
    align-items: center;
    box-shadow: var(--box-shadow);
    position: relative;
    z-index: 1;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view] div.head label
{
    padding-left: var(--base);
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view]:not([data-webrtc-view="contacts"]) div.body 
{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative;
    height: calc(100% - (var(--base) * 11.5));
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="chat"] div.body 
{
    align-items: unset !important;
    justify-content: unset !important;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view] div.body div em
{
    background: var(--background);
    padding: calc(var(--base) * 2);
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    font-style: normal;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="capture"] div.body 
{
    display: flex;
    background: var(--input-background);
    flex-direction: column;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="capture"] div.body [data-webrtc-canvas]
{
    width: 100%;
    height: 100%;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="capture"] div.body [data-webrtc-canvas] video
{
    visibility: hidden;
    position: fixed;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="capture"] div.body [data-webrtc-canvas] canvas
{
    position: absolute;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="capture"] div.body form
{
    background: none;
    box-shadow: none;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="capture"] div.body form div
{
    width: auto;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="connected"] div.body 
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    /*background: var(--input-background);*/
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="connected"] div.body button
{
    width: 30vw;
    height: 30vw;
    margin: calc(var(--base) * 2);
    box-shadow: var(--box-shadow);
    /*background: var(--view-background);*/
    max-width: 200px;
    max-height: 200px;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="connected"] div.body button[data-webrtc-action="video"]
{
    display: none;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="contacts"] div.body
{
    align-items: stretch;
    position: relative;
    flex-direction: column;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="contacts"] div.body div em[data-webrtc-contact-enabled]
{
    /*cursor: pointer;*/
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="contacts"] div.body div em[data-webrtc-contact-enabled]:hover
{
    /*opacity: 0.75;*/
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="contacts"] div.body div em button
{
    width: auto;
    font-size: .5em;
    /*background: var(--background);*/
    margin-left: var(--base);
    padding: var(--base);
    box-shadow: var(--box-shadow);
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="contacts"] div.body div em span
{
    background: transparent;
    font-size: calc(var(--global-size) * 1.25);
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="contacts"] div.body div em:not([data-webrtc-contact-enabled])
{
    /*background: var(--input-background-inactive);*/
    /*color: var(--input-color-inactive);*/
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="contacts"] div.body div em span.red
{
    /*color: var(--blink-red-color);*/
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="contacts"] div.body div em span.green
{
    color: var(--blink-green-color);
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="browser"] div.body,
div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="chat"] div.body
{
    display: flex;
    align-items: stretch;
    flex-direction: column;
    justify-content: space-between;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="map"] div.body iframe,
div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="browser"] div.body iframe
{   
    height: 100%;
    width: 100%;
    border: none;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="chat"] div.body div.messages
{   
    padding: calc(var(--base) * 2);
    display: flex;
    flex-direction: column;
    overflow: auto;
    margin-bottom: calc(var(--base) * 8);
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="chat"] div.body div.messages img
{
    width: 100%;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="chat"] div.body div.messages > div
{
    text-align: left;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="chat"] div.body div.messages > div[data-webrtc-chat-is-me]
{
    text-align: right;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="chat"] div.body div.messages > div > div
{
    margin: 0;
    margin-bottom: calc(var(--base) * 0.5);
    padding-top: calc(var(--base) * 0.5);
    padding-bottom: calc(var(--base) * 0.5);
    padding-left: calc(var(--base) * 1);
    padding-right: calc(var(--base) * 1);
    display: inline-block;
    width: auto;
    background: var(--input-background);
    border-radius: var(--border-radius);
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="chat"] div.body div.messages > div[data-webrtc-chat-is-me] > div
{
    color: var(--blink-color);
    background: var(--button-color);
    font-weight: bold;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="chat"] div.body div.messages > div > div > span
{
    vertical-align: middle;
    /*font-size: 1.5em;*/
    /*margin-left: 0.5em;*/
    color: darkgray;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="chat"] div.body div.messages > div > div > span.read
{
    color: royalblue;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="browser"] div.body form,
div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="chat"] div.body form
{
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    /*padding: 0.5em;*/
    border-radius: 0;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="browser"] div.body form
{
    width: calc(100% - (var(--base) * 1.5));
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="browser"] div.body form div:last-child,
div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="chat"] div.body form div:last-child
{
    width: auto;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="browser"] div.body form div button,
div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="chat"] div.body form div button
{
    padding: calc(var(--base) * 1.25) !important;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="browser"] div.body form div button span,
div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="chat"] div.body form div button span
{
    font-size: calc(var(--global-size) * 1.25);
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="debug"] div.body
{
    display: flex;
    flex-direction: column;
    background: var(--input-background);
    /*padding: 1em;*/
    overflow-y: scroll;
    /*font-size: 0.8em;*/
    align-items: flex-start;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="debug"] div.body pre
{
    /*padding: 1em 0;*/
    margin: 0;
    border-bottom: 1px solid var(--color);
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="debug"] div.body pre:last-child
{
    border: none;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="debug"] div.body pre:first-child
{
    padding-top: 0;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="debug"] div.body pre.error
{
    color: tomato;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="debug"] div.body pre.log
{
    color: aquamarine;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="debug"] div.body pre.warn
{
    color: peru;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="contacts-list"] div.body 
{
    /*display: block !important;*/
    overflow: auto;
    /*margin-bottom: 50px !important;*/
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="contacts-list"] div.body div.contact
{
    margin: calc(var(--base) * 1.5);
    background: #00000050;
    border-radius: var(--border-radius);
    padding-bottom: calc(var(--base) * 1.5) !important;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="contacts-list"] div.body div.contact > label,
div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="contacts-list"] div.body div.contact > div
{
    padding: calc(var(--base) * 1.5);
    display: block !important;
}
div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="contacts-list"] div.body div.contact > div
{
    padding-bottom: 0;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="contacts-list"] div.body div.contact > label
{
    background: #00000050;
    border-radius: var(--border-radius);
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="contacts-list"] div.body div.contact > label > div
{
    float: right;
    cursor: pointer;
    color: var(--blink-green-color);
    background: var(--button-background);
    padding: calc(var(--base) * 0.9);
    margin-right: calc(var(--base) * -0.5);
    margin-left: calc(var(--base) * 1.5);
    border-radius: var(--border-radius);
    position: relative;
    top: calc(var(--base) * -0.5);
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="contacts-list"] div.body div.contact > label > div > span
{
    margin-right: 0 !important;
    font-size: calc(var(--global-size) * 1.25);
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="contacts-list"] div.body div.contact > label span,
div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="contacts-list"] div.body div.contact > div span
{
    vertical-align: middle;
    margin-right: var(--base);
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="video"] div.body
{
    flex-direction: column;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="video"] div.body div[data-webrtc-remote-camera],
div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="video"] div[data-webrtc-camera]
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="video"] div[data-webrtc-camera]
{
    left: unset;
    right: 0;
    width: 30vw;
    height: 30vh;
    align-items: baseline;
    /*border: 0.5em solid #00000000;*/
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="video"] video
{
    transform: scale(-1,1);
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="video"] div[data-webrtc-camera] video[data-webrtc-facing-mode="environment"],
div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="video"] div[data-webrtc-remote-camera] video[data-webrtc-facing-mode="environment"]
{
    transform: scale(1,1);
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="video"] div[data-webrtc-camera] video
{
    width: 100%;
    box-shadow: var(--box-shadow);
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="video"] div[data-webrtc-remote-camera] video[data-webrtc-mobile="true"]
{
    height: 100vh;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="video"] div[data-webrtc-remote-camera] video[data-webrtc-mobile="null"]
{
    width: 100vw;
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="video"] div[data-webrtc-remote-camera-off] 
{
    position: absolute;
    width: 100vw;
    height: 100%;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: var(--background);
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="video"] div[data-webrtc-remote-camera-off] > span
{
    /*font-size: 20em;*/
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="connected"] div[data-webrtc-remote-user]
{
    /*width: calc(100vw - 1em);*/
    display: flex;
    flex-direction: row;
    align-items: center;
    /*padding: .5em;*/
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="connected"] div[data-webrtc-remote-user] > div
{
    position: relative;
    display: flex;
    flex-direction: row;
    /*padding: 0.5em;*/
    box-shadow: var(--box-shadow);
    align-items: center;
    background: #000000;
    color: #daa472;
    /*width: calc(100vw - 30vw - 3em);*/
    /*font-size: .9em;*/
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="connected"] div[data-webrtc-remote-user] > div > span:last-child
{
    position: absolute;
    /*right: 0.2em;*/
    color: firebrick;
    /*font-size: 1.7em;*/
}

div[data-webrtc] div[data-webrtc-views] [data-webrtc-view="connected"] div[data-webrtc-remote-user] label
{
    /*padding: 0 0.5em;*/
}