@font-face {
    font-family: "red";
    src: url("./fonts/Silkscreen-Regular.ttf");
}

@font-face {
    font-family: "redBold";
    src: url("./fonts/Silkscreen-Bold.ttf");
}
img, a, button {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
img:focus, a:focus, button:focus {
  outline: none;
}

:root
{
    --ui-border-color: #b2d1f7;
    --filter-border-color: #717182;
    --ui-background-color: #14202f;
    --border-thickness-light: 0.2rem;
    font-family: "red";
    font-size: 2vh;
}

*
{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 100%;
}

.test
{
	background-color: white;
	color:black;
	transition: all 0.25s;
}

.BOLD
{
    font-family: "redBold";
}



html, body
{
	width: 100%;
	height: 100%;
	overflow: hidden;  /* Prevents scrollbars */
	margin: 0;
	padding: 0;
}


body 
{
    width: 100%;
    height: 100%;
    background-color: black;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

.TUIcontroller
{
    display: flex;
    justify-content: center;
    align-items: center;  
    width: 100%;
    height: 100%;
    overflow: hidden;
    
}

.TUIfilterPanel
{
    transform:translateY(-50%); 
    position: absolute;
    display: flex;
    width: 17rem;
    justify-content:flex-start;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
    border: var(--border-thickness-light) solid var(--ui-border-color);
    border-radius: 1rem;
    color: var(--ui-border-color);
    overflow: hidden;
    background-color: var(--ui-background-color);
    -webkit-backdrop-filter: blur(5px);
    z-index: 300;
    cursor: pointer;
}

.TUIfilterOption
{
    width: 100%;
    display: flex;
    justify-content:space-between;
    flex-direction: row;
    align-items: center;
    margin: 0.5rem;
    padding: 0.5rem;
    border:  0.1rem solid var(--filter-border-color);
    border-radius: 0.5rem;
    cursor: pointer;
}

.TUIdialog
{

    width: 66%;
    display: flex;  
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: var(--border-thickness-light) solid var(--ui-border-color);
    background-color: var(--ui-background-color);
    color: var(--ui-border-color);
    border-radius: 1rem;

}

.TUIvideoWindowTopBar
{
    position: absolute;
    padding: 0;
    top: 0%;
    cursor:move;
    width: 100%;
    height: 5rem;
    z-index: 5000;
    transition: background-color 0.25s;
    display: flex;
    justify-content: center;
    color: white;
}

.TUIvideoWindowTopBar:hover
{
    background-color:rgba(178, 209, 247, 0.25);
    
}

.TUIfilterOption:hover
{

    border-color: white;
    background-color:#5050c9;
}

.TUIfilterOptionText
{
    color: var(--ui-border-color);
}



.TUIfiltersHeader
{
    color: var(--ui-border-color);
    font-size: 2rem;
    margin-bottom: 1rem;
    display: flex;  
    justify-content: center;
    align-items: center;
    
}

.TUInode
{
    color: var(--ui-border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: var(--border-thickness-light) solid var(--ui-border-color);
    position: absolute;
    cursor: pointer;
    transition: border 0.5s, width 0.2s, height 0.2s;
    background-color: var(--ui-background-color);
}

.TUInodeParent
{
    color: var(--ui-border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    transform: translate(-50%, 50%);
    position: absolute;
    cursor: pointer;
    transition: border 0.5s, width 0.2s, height 0.2s;
    background-color: var(--ui-background-color);
}

.TUInodeBG
{
    position:absolute;
    overflow: hidden;
    width: 110%;
}

.TUIfile
{
    border-radius: 1rem;
    
}

.TUInode:hover
{
    border: var(--border-thickness-light) solid white;
}

.TUIfolder
{
    border-radius: 0.25rem;
}

.notSelected
{
    border-color: rgb(105, 105, 105);
    color: rgb(105, 105, 105);
    width: 2rem;
    height: 2rem;
}

.notSelected:hover
{
    border-color: rgb(105, 105, 105);
    color: rgb(105, 105, 105);    
}

.TUIText
{
    position:absolute;
    bottom: -2rem;
    font-size: 0.75em;
    width: 200%;
    display:flex;
    justify-content: center;
    white-space: nowrap;
}

.TUIText:hover
{
    cursor: move;
}

.TUIuiNodeBG
{

    width: 100%;
    height:100%;
    overflow: hidden;
    border: none;
    pointer-events: none;

}

.mainCanvas
{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: absolute;
}

.TUIdirectoryIndicator 
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 3rem;
    font-size: 1rem;
    transform: translate(-50%, 50%);
    left: 50%;
    color:white;
}

.TUIdirectoryIndicatorNode
{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.25rem 1rem 0.25rem 1rem;
    border: var(--border-thickness-light) solid var(--ui-border-color);
    border-radius: 0.2rem;
    cursor: pointer;
}

.TUIdirectoryIndicatorArrow
{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.TUIwindow
{
    display: flex;
    justify-content: center;
    align-items: center;

    border: var(--border-thickness-light) solid var(--ui-border-color);
    border-radius: 1rem;
   
}

.hidden
{
    pointer-events: none;
    visibility: hidden;
}



.TUIstartText
{
    color: var(--ui-border-color);
    display:flex;
    justify-content: center;
    align-items: center;
}

.TUIintroDiv
{
    border: var(--border-thickness-light) solid var(--ui-border-color);
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 36rem;
    height: 18rem;
    pointer-events: none;
    opacity: 0%;
    transform:translate(-50%, 50%);
}

/* .
.#####....####...##..##..######..##.......####..
.##..##..##..##..###.##..##......##......##.....
.#####...######..##.###..####....##.......####..
.##......##..##..##..##..##......##..........##.
.##......##..##..##..##..######..######...####..
................................................
. */

.TUImobileMessage
{

    width:80%;
    color: white;
    border: 2px solid white;
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0%;

}

.TUIinfoPanel
{

   z-index: 5000;
   color: white;
   background-color: rgba(128,128,128, 0.25);
   width: 80%;
   height: 80%;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);

   border: 2px solid white;
   border-radius: 1rem;
   backdrop-filter: blur(5px);
   padding: 5rem;
   overflow: hidden;
 
}


.TUIinfoPanelContent
{
    position: absolute;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items:center;
    top: 3rem;
    left: 0%;
    width: 100%;
    padding: 2rem;
}

.TUIinfoIcon
{

    position: absolute;
    right: -0.25rem;
    top: 50%;
    transform:translate(0%, 50%);
    color: white;
    height: 3rem;
    border: 2px solid white;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    transform:translate(0%, -50%);
    pointer-events: all;
    cursor: pointer;

    border-radius: 1rem 0rem 0rem 1rem;
    
}

.TUIinfoParent
{

    width:100%;
    height: 100%;
    z-index: 5000;
    position:absolute;
    left:0%;
    top:0%;
    pointer-events: none;
    
}

/* .
.##.......####....####...#####...######..##..##...####...........#####....####...#####....####..
.##......##..##..##..##..##..##....##....###.##..##..............##..##..##..##..##..##..##.....
.##......##..##..######..##..##....##....##.###..##.###..........#####...######..#####....####..
.##......##..##..##..##..##..##....##....##..##..##..##..........##..##..##..##..##..##......##.
.######...####...##..##..#####...######..##..##...####...........#####...##..##..##..##...####..
................................................................................................
..####...##..##..#####..........                                                                
.##..##..###.##..##..##.........                                                                
.######..##.###..##..##.........                                                                
.##..##..##..##..##..##.........                                                                
.##..##..##..##..#####..........                                                                
................................                                                                
.#####...##..##..######..######..######..#####...######..##..##...####..                        
.##..##..##..##..##......##......##......##..##....##....###.##..##.....                        
.#####...##..##..####....####....####....#####.....##....##.###..##.###.                        
.##..##..##..##..##......##......##......##..##....##....##..##..##..##.                        
.#####....####...##......##......######..##..##..######..##..##...####..                        
........................................................................                        
. */

.TUIloadingBar
{
    position:absolute;
    left: 5rem;
    right:5rem;
    bottom: 3rem;
    height: 1rem;
    background-color: rgba(255, 255, 255, 0);
    border: 0.125rem solid var(--ui-border-color);
    border-radius: 1rem;
}

.TUIbufferBar
{

    position:absolute;
    left: 5rem;
    right:5rem;
    bottom: 3rem;
    height: 1rem;
    background-color: rgba(255, 255, 255, 0);
    border: 0.125rem solid var(--ui-border-color);
    border-radius: 1rem;
    
}

.TUIloadingBarInner
{

    position:absolute;
    left: 5.25rem;
    right:35rem;
    bottom: 3.25rem;
    height: 0.5rem;
    background-color: var(--ui-border-color);
    border: 0.125rem solid var(--ui-background-color);
    border-radius: 1rem;
    z-index: 30;
    opacity: 0%;
   
}

.TUIbufferBarInner
{

    position:relative;
    width: 99.25%;
    margin-left: 0.125rem;
    top: 50%;
    transform:translateY(-50%);
    height: 0.5rem;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 1rem;
    z-index: 30;

}

.TUIhasAudio
{
    right: 10rem;
}

.TUIbufferIndicatorContainer
{
    position:absolute;
    left: 5rem;
    right: 5rem;
    bottom: 3rem;
}

.TUIbufferIndicator
{
    position: absolute;
    width: 2px;
    right: 100%;
    background-color: white;
    height: 2rem;
    transform:translateY(-75%);
    z-index: 400;
}

/* .
.##...##..######..##..##..#####....####...##...##...####..                      
.##...##....##....###.##..##..##..##..##..##...##..##.....                      
.##.#.##....##....##.###..##..##..##..##..##.#.##...####..                      
.#######....##....##..##..##..##..##..##..#######......##.                      
..##.##...######..##..##..#####....####....##.##....####..                      
..........................................................                      
..####...##..##..#####..........                                                
.##..##..###.##..##..##.........                                                
.######..##.###..##..##.........                                                
.##..##..##..##..##..##.........                                                
.##..##..##..##..#####..........                                                
................................                                                
..####....####...##..##..######...####...######..##..##..######..#####....####..
.##..##..##..##..###.##....##....##..##....##....###.##..##......##..##..##.....
.##......##..##..##.###....##....######....##....##.###..####....#####....####..
.##..##..##..##..##..##....##....##..##....##....##..##..##......##..##......##.
..####....####...##..##....##....##..##..######..##..##..######..##..##...####..
................................................................................
. */

.TUIuiOverlay
{
    transition: opacity 0.75s;
}

.TUIvideoWindowVideo
{
    width: 100%;
}

.TUInotificationWindowContent
{
    color: white;
}

.TUIvideoWindow
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position:absolute;
    border: var(--border-thickness-light) solid var(--ui-border-color);
    border-radius: 1rem;
    background-color: var(--ui-background-color);
    z-index: 500;
    overflow: hidden;
    transform:translate(-50%, -50%);
}

.TUIintroTextContainer
{
    display: flex;
    justify-content: center;
    align-items: baseline;
    color: var(--ui-border-color);
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size:5rem;
}

.TUIfilterPanelContainer
{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content:space-between;
    align-items: center;
    flex-direction: column;
}

/* .
.#####...##..##..######..######...####...##..##...####..
.##..##..##..##....##......##....##..##..###.##..##.....
.#####...##..##....##......##....##..##..##.###...####..
.##..##..##..##....##......##....##..##..##..##......##.
.#####....####.....##......##.....####...##..##...####..
........................................................
..####...##..##..#####..
.##..##..###.##..##..##.
.######..##.###..##..##.
.##..##..##..##..##..##.
.##..##..##..##..#####..
........................
..####...##..##..######...####...##..##..#####....####...##..##..######...####..
.##..##..##..##..##......##..##..##.##...##..##..##..##...####...##......##.....
.##......######..####....##......####....#####...##..##....##....####.....####..
.##..##..##..##..##......##..##..##.##...##..##..##..##...####...##..........##.
..####...##..##..######...####...##..##..#####....####...##..##..######...####..
................................................................................
. */

.TUIiconStatic
{

    width: 3rem;
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform:translate(-50%,50%);
    cursor: pointer;
    z-index: 500;
}


.TUIinfoPanelCloseButton
{
    width: 3rem;
    position:absolute;
    font-size: 2.5rem;
    color: white;
    top: 2.5rem;
    right: 2.5rem;
    transform: translate(50%,-50%);
    pointer-events: all;
    cursor: pointer;
}


.TUIvolumeButton
{
    width: 2.0rem;
    bottom: 3.5rem;
    transform:translate(-50%,50%);
    left:auto;
    right: 2.5rem;
    opacity: 75%;
    
}


.TUIvolumeSliderContainer
{
    position: absolute;
    right: 4.25rem;
    bottom: 3.5rem;
    height: 8rem;
    transform:translate(0%, -1.75rem);
    opacity: 0%;
    width: 0.75rem;
    border: 2px solid var(--ui-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
}


.TUIvolumeSliderInner
{
    position: absolute;
    width: 100%;
    height:110%;
    top: 100%;
    background-color: var(--ui-border-color);
    opacity: 75%;
}


.TUICloseButton
{
    position:absolute;
    right: 0%;
    top: 0%;
    padding: 1rem;
    color:white;
    font-size: 2rem;
    z-index: 6000;
    cursor:pointer;   
}


.TUIstart
{
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;

    border: var(--border-thickness-light) solid var(--ui-border-color);
    padding: 1rem;
    border-radius: 0.5rem;
    color: var(--ui-border-color);

    cursor: pointer;

}


.TUIfilterOptionCheckbox
{   
    width: 1rem;
    height: 1rem;
    border: var(--border-thickness-light) solid var(--ui-border-color);
}


.TUIfilterOptionCheckboxActive
{   
    background-color: white;
    border-color: white;
}


.TUIfilterApplyBtn
{
    padding: 1rem;
    border: var(--border-thickness-light) solid var(--ui-border-color);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    cursor: pointer;
   
}


.TUIfilterApplyBtn:hover
{
    background-color:#5050c9;
    color: white;
    border-color: white;
}