:root {
  --nav-item-color: #000;
  --nav-item-hover-color: #fff;
  --nav-item-background-color: #eee;
  --nav-item-hover-background-color: #ccc;
  --submenu-color: #000;
  --submenu-background-color: #fff;
}

body{
  padding: 0;
  margin: 0;
  font-size: 16px;
  display: grid;
  justify-content: center;
  align-items: center;
}

.grid-container {
  width:98dvw;
  height:98dvh;
  /* position:relative; */
  display: grid;
  grid-template-columns: 1fr 3fr;
  /* justify-items: end;
  align-items: end; */
  place-items: center ;
  grid-column: 1/-1;
  grid-row: 1/-1;
  gap: 10px;
}

#form-section {
  height:calc(100vh - 35px);
  display: flex;
  flex-direction:column;
  flex-grow: 1;
  color: #4682b4;
  fill: steelblue;
  font-weight: bold ;
}

#divSvg {
  display: flex;
  justify-content: center;
  align-items: center;
}

#svg1 {
  display:flex;
  margin:0;
}

.svgCurveContainer{
  display: grid;
}

.svgCurveContainer > * {
grid-column: 1/-1;
grid-row:  1/-1;
}

.t{
padding-left:0;
padding-top: 25px;
font-size: 1.5rem;
font-family: math;
}
#i{
padding-left:485px;
padding-top:470px;
font-size:1.25rem;
font-family: math;
}

#svgCurve {
  overflow: visible;
}

#svg-section{
  height: calc(100vh - 35px);
}

.divMVA, .divLvV, .divHvV, .divZ, .divCThv, .divCThv, .divTripLV, .divTripHV, .divButton{
  display: grid;
  grid-template-columns: 4fr 1fr;
}

input {
 width:50px;
}

h3 {
  display: flex;
  justify-content: center;
  color:#4682b4;
  margin: 0;
  padding: 0;
}
.grid-item {
  padding: 0;
  margin: 0;
}

#OvercurrentOperatingTime {
  position: relative;
  height:calc(100% - 35px);
  width: 75vw;
  display: grid;
  grid-template-columns: 2fr 1fr;
  padding-bottom: 0;
  color: steelblue;
  font-size: 1rem;
  font-family: cursive;
}

.divCurve{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 25px;
}
.equations{
  width:100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}
.asideContainer{
  display: flex;
  flex-direction: column;
  position:absolute;
  top:0;
  right:0;
  width:350px;
  height:100%;
}

.nav-item{
  background-color: var(--main-color);
}

#CurveSelectionAndTimeDial{
  position: relative;
  display: flex;
  justify-content: space-evenly;
}

#calculation-section{
  position: absolute;
  bottom:0;
  left:0;
  font-size: 1rem;
  width:100%;
  height:65%;
}

.verticalMenue {
  width:max-content;
  height: 165px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.vertical-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vertical-navigation li {
  position: relative;
}

.vertical-navigation a {
  width: max-content;
  display: block;
  padding: 0;
  background-color: #eee;
  color: steelblue;
  text-decoration: none;
  transition: background-color 0.3s;
}

.vertical-navigation a:hover {
  background-color: #ccc;
}

.vertical-navigation ul ul {
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
}

.vertical-navigation li:hover > ul {
  display: block;
}

/* Add hover and click animations for the navigation items */
.vertical-navigation li:hover > a {
  background-color: #ccc;
}

.vertical-navigation li:active > a {
  background-color: #aaa;
}

/* Use CSS variables for easy theme customization */
:root {
  --main-color: #eee;
  --hover-color: #ccc;
  --active-color: #aaa;
}

.vertical-navigation a {
  background-color: var(--main-color);
}

.vertical-navigation a:hover {
  background-color: var(--hover-color);
}

.vertical-navigation li:active > a {
  background-color: var(--active-color);
}


#lineContainer {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
}