:root {
    --c-white: #FFFFFF;
    --c-bg: #131519;
    --c-lbg: #1d2026;
    --c-dbg: #0c0d0f;
    --c-red: #C3083F;
    --c-gray: #808080;

    --c-pbg: #1E1F21;

    --s3-bg: rgba(16, 18, 22, 0.3);
    --s8-bg: rgba(16, 18, 22, 0.8);
}

::-webkit-scrollbar {width: .35vw;}
::-webkit-scrollbar-track {background: var(--c-bg);}
::-webkit-scrollbar-thumb {background: var(--c-red);border-radius: 0.35vw;}

::selection  {background-color: var(--c-red);color: var(--c-white);}
.noselect {
    -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 */
}
input, select, .textarea {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
a {text-decoration: none;cursor: pointer;color: var(--c-red);}
body, html {
    width: 100%;height: 100%;margin: 0;padding: 0;
    color: var(--c-white);font-weight: normal;
    font-family: 'Roboto', sans-serif;background-color: var(--c-bg);
}
h1, h2, h3, h4, h5, h6 {line-height: 1;font-weight: normal;display:block;position:relative;margin: 0;padding: 0;}
.bold {font-weight: 700;}
.thin {font-weight: 100;}
.bebas {font-family: 'bebas';}
.extra-title {font-size: 80px;}
h1 {font-size: 40px;}
h2 {font-size: 30px;}
h3 {font-size: 25px;}
h4 {font-size: 20px;}
h5 {font-size: 16px;}
h6 {font-size: 14px;}

.relative {position:relative;}
.inline {position:relative;display:inline-block;vertical-align: middle;}
svg {display: inline-block;vertical-align: middle;}
svg g g {fill: var(--c-white);}

.line-2 {line-height: 1.25;}

.bg-img {
    position:absolute;top:0;left:0;width:100%;height:100%;object-fit: cover;
    object-position: center;z-index:1;
}

header {
    position:absolute;top:0;left:0;width:90%;height:90vh;
    z-index:2;padding: 5vh 5%;overflow:hidden;
}
header::before {
    position:absolute;top:0;left:0;width:100%;height:100%;content:"";
    background-color: var(--c-bg);opacity: 0.8;z-index:2;
}
header::after {
    position:absolute;top:0;left:0;width:100%;height:100%;content:"";
    z-index:3;background: radial-gradient(circle at 80% 20%, var(--s3-bg), var(--c-bg));
}

.content-grid {
    display: grid;grid-template-columns: min-content auto;column-gap: 5%;
    width:100%;height:100%;z-index: 5;
}

section {
    display: block;position:relative;z-index:5;
}
.pd-ef {padding: 2vh 0 2vh 0;overflow: auto;height: 86vh;}

.left-menu {
    padding:2vh 1vh;background-color: var(--c-red);border-radius: 0.5vw;
}
.action {
    white-space: nowrap;position:relative;padding: 2vh;cursor:pointer;transition: all 0.2s ease-in-out;
    border-radius: 0.5vw;display:block;
}
.action svg {height: 25px;width:25px;margin-right: 0.5vw;}

.action:hover {
    background-color: var(--s3-bg);transform: scale(1);
}

.dirs-grid {
    display:grid;grid-template-columns: repeat(6, 1fr);column-gap: 2vh;row-gap: 2vh;width: 98%;
}
.flex {display:flex;height:100%;width:100%;align-items: center;text-align: center;justify-content: center;flex-direction: column;}
.dir {
    position:relative;display:inline;padding: 1vw;background-color: var(--c-dbg);
    border-radius: 0.5vw;cursor: pointer;
}
.active-dir {background-color: var(--c-red);}

.search-show {display:block;margin: 1vh 0 2vh 0;}
form {z-index: 10;position:relative;}
input {
    display:block;padding: 2vh 2vh;background-color: var(--c-bg);border-radius: 0.5vw;width: 98%;
    border: none;outline: none;color: var(--c-white);font-family: Roboto;font-size: 20px;
}
input[type="submit"] {cursor: pointer;background-color: var(--c-red);}
::placeholder {
    color: var(--c-gray);font-family: Roboto;font-size: 20px;
}

.actions {margin-top: 1vh;position:relative;white-space: nowrap;overflow: hidden;width:100%;}
.actions-hov {padding: 1vh;}
.actions-hov h5 {display: none;}
.actions-hov:hover h5 {display:inline-block;color: var(--c-red);}
.actions-hov:hover svg g g {fill: var(--c-red);}


.box-popup {
    position:fixed;top:0;left:0;height:100%;width:100%;
    z-index:998;background-color: rgba(16, 18, 22, 0.5);
}
.box-in {
    top:10%;left:20%;width:calc(60% - 8vh);height:calc(80% - 8vh);background-color: var(--c-bg);
    position:absolute;border-radius:2vh;padding: 4vh;z-index:999;overflow: auto;
}
.tryver, .trytyp {
    padding: 1vh;background-color: var(--c-lbg);cursor: pointer;
    border-radius: 1vh;margin: 1vh 1vh 0 0;
}
.tryver {margin-left: 1vh;margin-top: 0.25vh !important;}
.tryver-active, .trytyp-active {background-color: var(--c-red);}

video {
    display:block;margin-top: 2vh;border-radius: 2vh;height:70%;
}


.ep-select {
    display:block;position:relative;margin: 1vh 0;
}
.decrease-ep, .increase-ep {
    position:relative;cursor: pointer;
}
.decrease-ep {display:none;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ep-num {
    position:relative;display: inline-block;vertical-align: middle;
    border: none;outline:none;background-color: var(--c-dbg);color: var(--c-white);
    font-size: 2vh;font-family: 'Roboto', sans-serif;text-align: center;
    padding: 1vh 2vh;width: 6vh;margin: 0 1vh;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.ep-num[type=number] {
    -moz-appearance: textfield;
}


.button {
    padding: 1vh 2vh;background-color: var(--c-red);
    color: var(--c-white);text-decoration: none;
    border-radius: 1vh;margin-top: 2vh;position:relative;
    display: inline-block;cursor: pointer;
}