mystyle.css

.container {
    display: grid; 
    grid-auto-columns: 280px calc(100vw - 280px);
    /* grid-template-rows: 0.2fr 1.8fr; */
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "Header Header"
      "Input Results"
      "Footer Footer";
}

body{
  margin:0px;
  overflow-x: hidden;
  /* Fixes that the horizontal scrollbar appears when dont wanted - might create problems moving forward */
}
  
.Header { 
  grid-area: Header; 
  background-color: white;
  border-bottom: lightgray solid 1.5px;
  text-align: center;   /* Centering */
}
  
.Input { 
  margin-left: 8px;
  grid-area: Input; 
  background-color: white;
  border-right: 0px gray dashed;
  padding-right: 2px;
}
  
.Results {
  grid-area: Results; 
  /* width: calc(90vw - 240px) */
  width: calc(100% - 20px);
}

.Footer {
  grid-area: Footer;
  margin: 8px;
  border-top: lightgray solid 1.0px;
  text-align: center;

}

#beam_plot{
  margin-top: 4px;
}
  




h1 {
    font-size: 16px;
    text-align: center;
}


table {
  font-size: 12px;
  border-collapse: separate;
  width: 100%;
  margin-top: 10px;
  border: lightgray solid 1px;
  border-radius: 5px;
  border-spacing: 0px;
}
th, td {
  padding: 0.25rem;
  text-align: center;
  /* border: 1px solid #ccc; */
  /* border-top: black solid 1px; */
}
tbody td{
  border-top: lightgray solid 1px;
}
tbody tr:hover{
  background: #eee;
}

td input[type=text]{
  box-sizing: border-box;
  width: 100%
}

.delButton:hover{
  color: blue;
  cursor: pointer;
}

.slide-fade-enter-active {
  transition: all .3s ease-out;
}

.slide-fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
        
.errorMessage{
  color: red;
}

/* Styling the text of the point loads in the beam plot */
.ptLoadTx, .dispLoad1Tx, .dispLoad2Tx{
  text-anchor: middle;
  transform: translateY(-2px);
}

/* Styling the text of the supports in the beam plot */
.supText{
  text-anchor: middle;
  transform: translateY(10px);
}

/* Styling the maximum and minimum values of the diagram plots */
.maxValM{
  text-anchor: middle;
  transform: translateY(10px);
}
.minValM{
  text-anchor: middle;
  transform: translateY(-1px);
}
.maxValV,.maxValu,.maxValtheta{
  text-anchor: middle;
  transform: translateY(-1px);
}
.minValV,.minValu,.minValtheta{
  text-anchor: middle;
  transform: translateY(10px);
}

/* Support arrows colors */
.supLine, .supMomentArrow{
  stroke: #4e79a7;
}
#arrowHeadSup, #momentArrow{
  fill: #4e79a7;
}

.dispLoad1Arrow, .dispLoad2Arrow, .dispLoad3, #arrowHead, .ptLoadArrow, #momentArrowLoad{
  stroke: #e15759;
  fill: #e15759;
}
.ptMArrow{
  stroke: #e15759;
}