/*
=========== Created by Csaba Sükösd 2026  ======== 
*/
body {
 font-family: Arial, sans-serif;  
 font-weight: bolder;
 background-color: silver;
}

#mainTable {
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 5px;
 width: 1200px;
 height: 560px;
 border-collapse: collapse;
 background-color: #C0DCC0;
 text-align: center;   
 color: #000000;  
}

#Language {
 margin-left: auto;
 margin-right: auto;
 width: 750px;
 text-align: center;
 border-collapse: collapse;
 background-color: #008080;  
 padding: 12px;
 border-spacing: 0px; 
}

#container {
  position: relative;
  width: 530px;
  height: 570px;
  border: 3px solid white; 
}

#canvas1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 530px;
  height: 565px;
  background-color: green;
}

#chart1,#chart2,#chart3 {
  position: relative;
  left: 5px;
  top: 0px;
  opacity: 1;
  width: 590px;
  height: 390px;
  background-color: white;
}
#params {
  border: 3px solid white;  
}
/* -----------   Define classes -------------   */
.selectDisable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.newbox {
  position: absolute; 
  border: 3px solid white;  
  color: white;
  text-align: left;
  background-color: teal;
  min-width: 50px; 
  min-height: 50px;  
  z-index: 20; 
}

.panel {
  background-color: #C0DCC0;
  color: black;
  font-weight: normal;
  width: 90%;
  margin: auto;
  border: white solid;    
}

.mydiv {
  color: black;
  text-align: left;
  background-color: #C0DCC0;
  border: white 1px solid;
  font-weight: normal;
  margin-left: 5px;  
  margin-right:  5px;
}

.mytable {
  border: 3px solid white;
  color: white;
  text-align: left;
  margin-bottom:  5px;
  width: 100%; 
}

.btn {
  background-color: #e3e3e3;
  color: black;  
  margin-left: 0px;
  margin-right: 0px;
}

.btn:hover {
  cursor: pointer;  
}
/* -----------------  Design some standard HTML elements ----------- */
textarea {
    resize: none;
    font-family: Arial, sans-serif;  
}

input[type=button] {
    margin: 5px;
    min-width: 120px;
}

input[type=text] {
    margin: 5px;
    width:100px;    
}
input[type=number] {
   width: 10px; 
}
input[type=range][orient=vertical] {
    writing-mode: vertical-lr;
    direction: rtl;
    appearance: slider-vertical;
    width: 15px;
    height: 340px;
    vertical-align: bottom;
} 
   
h2 {
 color: #006060;   
}

h3 {
 text-align: center;
 font-size: 16px;
 color: white;  
 margin-top: 5px;
 margin-bottom: 5px;   
}

hr {
 color: white;   
}
/*   ---------   Dropdown buttons ----------- */
.dropbtn {
	border: white 1px solid;
    background-color: #008080;
    text-align: center;
	width: 120px;
	color: white;
	padding: 4px;
    font-family:arial;
 	font-size: 16px;
    display: block;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,1.0);
}

.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: teal;  
/*    color: #000000;   */  
    min-width: 100px;
/*        border-radius: 5px; */
    color: black;    
	font-size: 16px; 
    opacity: 1.0;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,1.0);
    z-index: 1;
}

.dropdown-content span {
    color: white;
    padding: 4px 8px;
    text-decoration: none;
    display: block;
    opacity: 1.0;
    z-index: 1;
}

.dropdown-content span:hover {
    background-color: #B0B0B0; 
    cursor: pointer;
}

.dropdown-content:active .dropdown{
    display: none;
} 

.dropdown:hover .dropdown-content {
    display: block; z-index: 10;
 }

.dropdown:hover .dropbtn {
    background-color: #B0B0B0; 
    color:#FFFFD0; 
    cursor: pointer;
}

/* ---------------    Sliders --------------------- */

.slidecontainer {
  width: 100%;
  margin: 0px;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  margin: 0px;
  background: #e3e3e3;
  outline: none;
  opacity: 1.0;
  -webkit-transition: .2s;
  transition: opacity .2s;
  vertical-align: text-bottom; 
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: #84AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: #84AA6D;
  cursor: pointer;
}