:root {
	--bg-main: #181a1b;
    --bg-color: #181818;
	--ui-bg: #151617;
	--ui-main: #303030;
	--ui-hov: #404040;
	--ui-text: #ffffff;
	--ui-red: #ff5555;
	--ui-orange: #ff7755;
	--ui-yellow: #ffff55;
	--ui-green: #55ff55;
	--ui-blue: #5555ff;
	--ui-purple: #ff55ff;
    --ui-border: #6f5b5b;
}

::-webkit-scrollbar {
    background-color: #202324;
    color: #aba499;
}

::-webkit-scrollbar-thumb {
    background-color: #454a4d;
}

 textarea::-webkit-resizer {
    background-color: var(--ui-bg);
    border-width: 8px;
    border-style: solid;
    border-color: transparent var(--ui-hov) var(--ui-hov) transparent;
  } 

body{
    color-scheme: dark !important;
	background: var(--bg-main);
	color: var(--ui-text);
	font-size:1.5em;
	text-align:center;
	font-family: Roboto;
	user-select:none;
    overflow-y: scroll
}

button{
	background: var(--ui-main);
	color: var(--ui-text);

	border:none;
	border-radius:100px;

	font-size:0.70em;

	padding:8px;
	width:150px;

	transition:all 0.25s;
}

button:disabled{
	background-color: #555555;
	color: #999999;
}
button:hover{
	background: var(--ui-hov);
    border-color: transparent !important;
}
button:disabled:hover{
	background: #777777;
}

.main_button {
    height: fit-content; 
    background: var(--ui-bg);
    border: 1px solid var(--ui-main); 
    color: var(--ui-text);
    font-family: Roboto;
    font-size: 20px;
    border-radius: 7px;
    transition:all 0.2s;
    width: fit-content;
    display: inline-block;
    text-align: center;
    margin: 0.5%;
    padding-top: 3%;
    padding-bottom: 3%;
    padding-left: 2.5%;
    padding-right: 2.5%;
}

.main_button:hover {
    background:var(--ui-hov);
}

.txt_box{
    color-scheme: dark !important;
    background: var(--ui-bg);
    border: none; 
    height: 25vh;
    width: 100%;
    max-width: 100%;
    color: var(--ui-text);
    text-align: left;
    font-size: 20px;
    font-family: Roboto;
    margin-top: 10px;
    margin-bottom: 1%;
    border-radius: 7px;
    size: auto;
    min-width: 20%;
    min-height: 10%;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border: 1px solid black; 

}

#converter_type{
    position: absolute;
    color: var(--ui-text);
    display: flow-root;
    padding: 3px;
    padding-inline: 10px;
}

.seperator {
    position: relative;
}

#main_div{
    overflow:hidden;
    position: absolute;
    width: 90%;
	left: 50%;
	transform: translate(-50%, 0%);
    /*border: 1px solid red;*/
    padding-left:0.5%; 
    padding-right: 1%;
}

#sub_div{
    width: auto;
    max-width: 99%;
    /*border: 1px solid aqua;*/
    display: inline-block;

    padding-left: 0.5%;
    padding-right: 0.5%;
}

.grad_accent { 
    background: hsla(20, 27%, 50%, 1);

    background: linear-gradient(90deg, hsla(20, 27%, 50%, 1) 0%, hsla(260, 34%, 53%, 1) 100%);
    
    background: -moz-linear-gradient(90deg, hsla(20, 27%, 50%, 1) 0%, hsla(260, 34%, 53%, 1) 100%);
    
    background: -webkit-linear-gradient(90deg, hsla(20, 27%, 50%, 1) 0%, hsla(260, 34%, 53%, 1) 100%);
    
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#A3755E", endColorstr="#785daf", GradientType=1 );

    width: 3px;
    border-radius: 7px;
    height: 80%;
    bottom: -1%;  
    position: absolute;
}


#alertoverlaywrapper {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
	z-index: 0;
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
  }

  #alertmenu {
	background: var(--ui-main);
	border-radius: 7px;
	width: fit-content;
    height: fit-content;
	text-align: center;
	padding-left: 2.5%;
    padding-right: 2.5%;
	position: fixed;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -75%);
  }

  #alertmenutext {
	margin-bottom: 5%;
    margin-top: 10%;
    margin-top: 20%;
    color: var(--ui-text);
    font-family: Roboto;
  }

  #alertbutton { 
    margin-top: 20%;
    margin-bottom: 10%;

    padding-top: 5%;
    padding-left: 20%;
    padding-right: 20%;
    padding-bottom: 5%;

    width: fit-content;
    height: fit-content; 
    font-family: Roboto;
    border-radius: 7px;
    background: var(--bg-main);
  }

  #alertbutton:hover {
    background:var(--ui-hov);
}

#vs_container { 
    max-height: 100%;
    resize: both;
    border-radius: 7px;
    overflow: hidden;
    border:1px solid black;
    size : auto; 
    padding-top: 0%;
    padding-left: 0%;
    padding-bottom: 0%;
}

.monaco-editor, .monaco-editor-background, .inputarea.ime-input, .margin {
    background-color: var(--ui-bg) !important;
} 

.margin { 
    border-right: 1px solid var(--ui-main) !important; 
    z-index: 99 !important;
  }
  
.margin-view-overlays {
    transform: translateY(15px) !important;
}

.lines-content.monaco-editor-background {
    transform: translate(10px, 15px) !important;
}