body {
  font-family: Arial;
}
nav {
  padding: 1.5rem 2rem;
  background-color: #222831;
  color: #fff;
 }

.checkbtn {
  font-size: 1.5rem;
  color: white;
  cursor: pointer;
}

table, th, td {
  border: 1px solid rgb(111, 154, 247);
  border-collapse: collapse;
  padding: 2px;
}

.dropMenu {
  position: absolute;
  background: rgb(213 236 242);;
  overflow: hidden;
  height:0px;
  transition: height 0.25s ease;
}
.B:checked ~ .dropMenu {
  height:120px;
}
.dropMenuItem{
  padding: 8px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  color: #66666a;
}
.dropMenuItem:hover{
  background: rgb(216, 216, 216);
}

select {
  padding: 6px 10px;
  background: #367AF6;
  color: white;
  margin: 2px 0px;
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  border: none;
}

button  {
  display: inline-block;
  flex-direction: row;
  align-items: center;
  padding: 6px 14px;
  margin: 4px 0px;
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  border-radius: 6px;
  border: none;

  color: #fff;
  background: linear-gradient(180deg, #4B91F7 0%, #367AF6 100%);
  background-origin: border-box;
  box-shadow: 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  cursor:pointer;
}

.buttonH {
  color: #130d0d;
  background: linear-gradient(180deg, #f7ec4b 0%, #ebf835 100%);
}

button:disabled {
    background: gray;
}

.imgButton {
  background: white;
  padding: 2px;
}

label {
  font-family: Arial;
  background: linear-gradient(180deg, #4B91F7 0%, #367AF6 100%);
  padding: 6px;
  color: white;
  font-size: 14px;
  border-radius: 6px;
  margin: 2px !important;
}


input {
    padding: 2px 2px;
    border-radius: 6px;
    border: 1px solid #367AF6;
    color: #367AF6;
    padding: 6px 5px 5px 5px;
}

input:read-only {
  padding: 2px 2px;
  border: none;
  border-radius: 0px;
  background-color: #d6d5d5;
  color: #367AF6;
  padding: 6px 5px 5px 5px;
}
.tab {
  color: #fff;
  display: inline-block;
  padding: 6px 6px 4px 6px;
  font-family: Arial;
  background: linear-gradient(180deg, #4B91F7 0%, #367AF6 100%);
  border: 1px solid #626161;
  border-bottom: none;
  border-radius: 3px 3px 0px 0px;
}

.tabselected {
  background: linear-gradient(180deg, #abc9f4 0%, #8fb6fb 100%);
  color: #20199e;
}
.error {
  color: red;
  font-weight: bold;
}

h1 {
  font-family: math;
    font-size: 36px;
    color: blue;
    font-weight: bold;
    margin: 10px 0px;
}
.db {
    background: gray;
    cursor: not-allowed;    
}

.menuItem {
  font-family: Arial;
  padding: 8px;
  margin: 3px;
  background: #417deb;
  width: 100px;
  color: rgb(245, 244, 248);
  cursor: pointer;
}

.menuItem:hover {
  background: #6941eb;
}

.menuItemSel {
  font-family: Arial;
  padding: 8px;
  margin: 3px;
  background: #0b4cc6;
  width: 100px;
  color: rgb(245, 244, 248);
}

.sideMenu {
  margin-right: 8px;
  background: rgb(208 245 254);
  width: 126px;
}

.partBlock {
  border-radius: 5px;
  padding: 5px 6px 12px 6px;
  margin: 10px;
  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  background: #f0ffff;
}

.paramName {
  margin-top:8px;
  margin-bottom:2px;
  font-family: Arial;
  font-size: 14px;
  color: #4c4c68;
}

.compType {
  font-size: 16px;
  border-bottom: 1px solid green;
  font-family: Arial;
}

.mono {
  font-family: monospace;
}
.monoRight {
  font-family: monospace;
  text-align: right;
}

#simulations {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#simulations td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#simulations tr:nth-child(even){background-color: #f2f2f2;}

#simulations tr:hover {background-color: #ddd;}

#simulations th {

  padding: 12px 8px;
  text-align: left;
  background: linear-gradient(180deg, #4B91F7 0%, #367AF6 100%);
  color: white;
}

.rowx {
  box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.AAA {
  display: flex;
  flex-wrap: wrap;
  max-height: 250px; /* Limit the parent height to fit 3 items per column */
  flex-direction: column;
  column-count: auto;
  /* column-width: 150px; */
}
.BBB {
  width: 140px;
}

.AAA > .BBB {
  flex-basis: 28%; /* Each child takes up 1/3 of the parent's height */
}