:root {
     --white: #ffffff;
     --black: #000000;
     --grey: #242424;
     --bg: #222;
     --darkgrey: #181818;
     --shadow: 1px 1px rgba(139, 139, 139, 0.1);
     --insetshadow: inset 1px 1px rgba(99, 99, 99, 0.1);
 }

 @font-face {
     font-family: Roboto-Bold;
     src: url('/fonts/Roboto-Bold.ttf') format('truetype');
 }

 @font-face {
     font-family: Roboto-Regular;
     src: url('/fonts/Roboto-Regular.ttf') format('truetype');
 }

 html {
     background-color: #000;
     margin: 0;
     padding: 0;
     font-size: inherit;
     font-family: Roboto-Regular;
 }

 .single {
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 20px;
 }

 body {
     background-image: url(/images/bg.jpg);
     background-size: 100%;
     background-position: center;
     background-repeat: repeat;
     background-color: #888;
     width: 100vw;
     height: 100vh;
     padding: 0;
     margin: 0;
     color: #888;
     font-size: inherit;
     font-family: Roboto-Regular;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -o-user-select: none;
     user-select: none;
 }
 h1 {
    margin: 0 0 15px 0;
    line-height: normal;
 }
.container {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    display: flex;
    overflow-y: scroll;
}
.container-inner {
    width: 70%;
    overflow: auto;
}
 ::-webkit-scrollbar {
     width: 0px;
     height: 0px;
     display: none;
 }

 ::-webkit-scrollbar-track {
     background: transparent;
 }

 ::-webkit-scrollbar-thumb {
     background: transparent;
 }

 ::-webkit-scrollbar-thumb:hover {
     background: transparent;
 }
button {
    padding: 8px 10px;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
    background-color: #1f6d21;
    cursor: pointer;
    color: #fff;
    border-radius: 4px;
    border: 0;
}
.content {
    padding: 30px;
}
.iframe {
    margin: 5px;
}
.dlarea {
    margin-top: 9px;
}
 .inputbox {
    margin-bottom: 4px;
 }
 .input, .input2{
    padding: 5px 8px;
    width: 65%;
    margin: 0;
    background-color: #444;
    border: solid 1px #444;
    border-radius: 3px;
    color: #fff;
 }
 .input:focus, .input2:focus {
    border: solid 1px green;
    outline: none;
 }
 .input2 {
    width: 30%;
 }

 .progress {
     width: 300px;
     background-color: rgba(17, 17, 17, 0.4);
     margin-top: 20px;
     border-radius: 5px;
     overflow: hidden;
 }

 .progress-bar {
     width: 0;
     font-size: 12px;
     text-transform: lowercase;
     padding: 2px 8px;
     background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
    background-color: #1f6d21;
     color: white;
     
 }