html{
    background: #000;
}
.slidecontainer {
    width: 100%; /* Width of the outside container */
  }
  
  /* The slider itself */
  .slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 90%; /* Full-width */
    height: 15px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
  }
  
  /* Mouse-over effects */
  .slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
  }
  
  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 15px; /* Set a specific slider handle width */
    height: 15px; /* Slider handle height */
    background: #04AA6D; /* Green background */
    cursor: pointer; /* Cursor on hover */
    border-radius: 50%;
  }
  
  .slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #04AA6D; /* Green background */
    cursor: pointer; /* Cursor on hover */
  }
  .value{
    color:#04AA6D;
  }
  .demo{
    color: #04AA6D;
  }
  .title_ascii{
    display: flex;
    color: #04AA6D;
    align-items: center;
    justify-content: center;
  }
  .preview{
    display: flex;
    justify-content: center;
    align-items: center;

  }
  .preview_options{
    right: 20%;
    margin-left: 20px;
  }
  .preview_img div{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-10px);
  }
  #ptext{
    font-size: 25px;
    color: white;
  }
 #fov{

    background-color: rgba(4, 170, 109, 0.3);
    width: 60px;
    height: 20px;
    border: #04AA6D solid 1px;
  }
 #tr_box{
    background-color: rgba(255, 0, 0, 0.3);
    width: 20px;
    height: 20px;
    border: red solid 1px;
    
  }
  .preview_img{
    
    display: flex;
    justify-content: center;
    align-items: center;
    width:960px;
    height: 540px;
    background-image: url("Valorant-gameplay.png");
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 20px;
  }
  .preview_vid{
    display: none;
    margin-top: -10px;
    position: absolute;
    width:960px;
    height: 540px;
  }
  .settings{
    display:table;
    margin-left: 4%;
    width:90%;
    border: #04AA6D solid 2px;
    padding: 10px 10px 10px 10px;
  }
  .setting_block{
    display: table-cell;
    width: 20%;
  }
  input{
    background-color: #000;
    color: #04AA6D;
    width: 40px;
    text-align: right;
  }
span{
    color: #04AA6D;
}
/*tooltip*/
.tooltip {
    position:relative; /* making the .tooltip span a container for the tooltip text */
    border-bottom:1px dashed #000; /* little indicater to indicate it's hoverable */
    z-index: 2;
  }
  .tooltip:before {
    content: attr(data-text); /* here's the magic */
    position:absolute;
    
    /* vertically center */
    top:50%;
    transform:translateY(-60%);
    
    /* move to right */
    left:100%;
    margin-left:15px; /* and add a small left margin */
    
    /* basic styles */
    width:200px;
    padding:10px;
    border-radius:10px;
    background:rgba(4, 170, 109, 0.4);
    color: #fff;
    text-align:center;

    display:none; /* hide by default */
}
.tooltip:hover:before {
    display:block;
}
.tooltip:after {
    content: "";
    position:absolute;
    
    /* position tooltip correctly */
    left:100%;
    margin-left:-5px;
   
    /* vertically center */
    top:50%;
    transform:translateY(-60%);
   
    /* the arrow */
    border:10px solid rgba(4, 170, 109, 1);
    border-color: transparent rgba(4, 170, 109, 0.4) transparent transparent;
    
    display:none;
  }
  .tooltip:hover:before, .tooltip:hover:after {
    display:block;
  }
  /*Checkboxes*/
  /* Customize the label (the container) */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .large_text{
    font-size: 22px;
    color: #04AA6D;
  }
  .PO-title{
    font-size: 30px;
  }
  
  /* Hide the browser's default checkbox */
  .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0px;
    height: 25px;
    width: 25px;
    background-color: #eee;
  }
  
  /* On mouse-over, add a grey background color */
  .container:hover input ~ .checkmark {
    background-color: #ccc;
  }
  
  /* When the checkbox is checked, add a blue background */
  .container input:checked ~ .checkmark {
    background-color:#04AA6D;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .container input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  /*dropdown*/
  /* The container must be positioned relative: */
.custom-select {
    position: relative;
    font-family: Arial;
    margin-top:10px;
    margin-bottom:10px;

  }
  
  .custom-select select {
    display: none; /*hide original SELECT element: */
  }
  
  .select-selected {
    background-color: #04AA6D;
  }
  
  /* Style the arrow inside the select element: */
  .select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
  }
  
  /* Point the arrow upwards when the select box is open (active): */
  .select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 7px;
  }
  
  /* style the items (options), including the selected item: */
  .select-items div,.select-selected {
    color: #ffffff;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
  }
  
  /* Style items (options): */
  .select-items {
    position: absolute;
    background-color:#04AA6D;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
  }
  
  /* Hide the items when the select box is closed: */
  .select-hide {
    display: none;
  }
  
  .select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
  }
  .scuts input{
    width: 80px
  }
  .scuts{
    display: table;
  }
  .st1{
    display: table-cell;
  }
  .st2{
    display: table-cell;
  }
.download_section{
    display: flex;
    justify-content: center;
    align-items: center;  
}
a{
    text-decoration: none;
    color:white;  
}
.download{
    transition: 0.4s;
    text-align: center;
    line-height: 50px;

    margin-top: 20px;
    margin-bottom: 20px;
    width:200px;
    height:50px;
    background-color: #04AA6D;
    border: #04AA6D solid 2px;

  }
.download:hover{
    background-color: white;
    color: #04AA6D;
}