#left,
      #mid,
      #right {
        width: unset;
        height: unset;
      }
      body {
        max-width: 2014.72px;
        min-width: 1614.8px;
      }
      #header {
        width: 100%;
      }
      #exp-name {
        width: 100%;
      }
      #main {

        display: flex;

        padding: 10px;
        min-width: 1600px;
        height: 100%;
      }
      .e-component {
        display: flex;
        justify-content: center;
      }
      .btn-func {
        display: flex;
        width: 100%;
        justify-content: center;
      }
      .comp-row {
        display: grid;
        grid-template-columns: 48% 48%;
        gap: 4%;
        padding: 1px;
        margin: 3px;
        margin-top: 10px;
      }
      .ele-name {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #diagram {
        display: grid;
        grid-template-rows: repeat(8, 1fr);
        gap: 30px;
        padding: 10px;
        padding-top: 4vh;
        background-color: white;
        border-radius: 30px;
        padding-right: 32px;
      }
      #mid {
        max-width: 800px;
        min-width: 800px;
        /* cursor:unset; */
      }
      #right {
        background-color: unset;
        float: unset;
      }
      .dia-row {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 25px;
      }
      .custom-menu {
        background-color: #696868bf;
      
        border-radius: 10px;
        position: absolute;
        padding: 5px;
        border: 2px solid black;
        z-index: 20;
        width: 185px;
      }
      
      
      .hell {
        display: flex;
        align-items: center;
        margin: 5px;
        height: 60px;
        visibility: hidden;
        
      }
      .use {
        height: 50px;
        width: 50px;
        cursor: pointer;
      }
      .comp-ele {
        border: 1px solid black;
      }
      input {
        border-radius: 20px;
        padding: 7px;
      }
      .ele-img {
        display: flex;
        justify-content: center;
      }
      .head {
      }
 /*Dropdown css*/
 .dropbtn {
  background-color: crimson;
    border: none;
    color: white;
    border-radius: 4px;
    
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    letter-spacing: 2px;
    box-shadow: 4px 4px 4px black;
    cursor: pointer;
    height: 34px;
    width: 175px;
    
  
}

.dropdown {
  position: absolute;
  display: inline-block;
  padding-right: 10px;
}

.dropdown-content {
  padding-left: 10px;
  padding-bottom: 15px;
  display: none;
  position: absolute;
  background-color: white;
  min-width: 460px;
  box-shadow: 6px 6px 15px black;
  border: 2px solid black;
  
  
  z-index:2;
  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {}
.dropdown:hover .dropbtn {background-color: forestgreen;
}

 #main {
   margin-top: unset;
 }

/* Electrical components css */

.button {
  margin-top: 15px;
  margin-left: 18px;
  height: auto;
  background: transparent;
  padding: 0;
  border: none;
}

/* button styling */
.button {

  --border-right: 6px;
  --text-stroke-color: black;
  --animation-color: #FF512F;
  --fs-size: 15px;
  letter-spacing: 2px;
  text-decoration: none;
  font-size: var(--fs-size);
  font-family: "Arial";
  position: relative;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--text-stroke-color);
}
/* this is the text, when you hover on button */
.hover-text {
  position: absolute;
  box-sizing: border-box;
  content: attr(data-text);
  color: var(--animation-color);
  width: 0%;
  inset: 0;
  border-right: var(--border-right) solid var(--animation-color);
  overflow: hidden;
  transition: 0.5s;
  -webkit-text-stroke: 1px var(--animation-color);
}
/* hover */
.button:hover .hover-text {
  width:102%;
  filter: drop-shadow(0 0 8px var(--animation-color))
}
@media only screen and (max-width: 600px) {
  .button:hover .hover-text {
    width: 101%;
    filter: drop-shadow(0 0 8px var(--animation-color))
  }
}

/* ending of Electrical components css */



     /*Button 82 Code*/  

          .button-82-pushable {
            position: relative;
            border: none;
            background: transparent;
            padding: 0;
            cursor: pointer;
            outline-offset: 4px;
            transition: filter 250ms;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
          }
          
          .button-82-shadow {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 12px;
            background: hsl(0deg 10% 10% / 0.25);
            will-change: transform;
            transform: translateY(2px);
            transition:
              transform
              600ms
              cubic-bezier(.3, .7, .4, 1);
          }
          
          .button-82-edge {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 12px;
            /* background: linear-gradient(
              to left,
              hsl(133, 92%, 47%) 0%,
              hsl(133, 84%, 39%) 0%,
              hsl(133, 84%, 39%) 0%,
              hsl(133, 84%, 39%) 0%
            ); */
            background-color: #FF4500;
          }
          
          .button-82-front {
            display: block;
            height: 16px;
            position: relative;
            padding: 12px 27px;
            border-radius: 12px;
            font-size: 1.1rem;
            color: black;
            background-image: linear-gradient(
              45deg,
              #ff512f 0%,
              #f09819 51%,
              #ff512f 100%
            );
            will-change: transform;
            transform: translateY(-4px);
            transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
          }
          
          
          @media (min-width: 768px) {
            .button-82-front {
              font-size: 1.25rem;
              padding: 12px 42px;
            }
          }
          
          .button-82-pushable:hover {
            filter: brightness(110%);
            -webkit-filter: brightness(110%);
          }
          
          .button-82-pushable:hover .button-82-front {
            transform: translateY(-6px);
            transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
          }
          
          .button-82-pushable:active .button-82-front {
            transform: translateY(-2px);
            transition: transform 34ms;
          }
          
          .button-82-pushable:hover .button-82-shadow {
            transform: translateY(4px);
            transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
          }
          
          .button-82-pushable:active .button-82-shadow {
            transform: translateY(1px);
            transition: transform 34ms;
          }
          
          .button-82-pushable:focus:not(:focus-visible) {
            outline: none;
          }
        
                 /* Ending of the Button 82 Code*/ 

 .inst-display {
   display: block;
 }

 button {
   width: 120px;
   margin-top: 7px;
   margin-bottom: 10px;
 }
      .red-circle {
        display: block;
        height: 100%;
        width: 100%;
        background-color: red;
        border-radius: 50%;
      }

      /* Gatepulse */
      .g1-end{
        position: relative;
        height: 10px;
        width: 10px;
        top: 18px;
        left: -3px;

      }
      .g1-no{
        width: 17px;
        height: 18px;
        position: relative;
        top: -11px;
        left: -10px
      }
      .g3-no{
        width: 17px;
        height: 18px;
        position: relative;
        top: -13px;
        left: -9px;
      }
      .g3-end{
        position: relative;
        height: 10px;
        width: 10px;
        top: 18px;
        left: -3px;
      }
      .g-name{
        position: relative;
    top: -37px;
    left: 18px;
    width: 0px;
    height: 18px;
      }

      /* AC  */
      .ac-end{position: relative;
        height: 10px;
        width: 10px;
        top: -2px;
        left: 19px;

      }
      .acb-end{
        position: relative;
    height: 10px;
    width: 10px;
    top: 31px;
    left: 20px;
      }
      .act-no{
        width: 17px;
    height: 18px;
    position: relative;
    top: -51px;
    left: 9px;
      }
      .acb-no{
        width: 17px;
    height: 18px;
    position: relative;
    top: -12px;
    left: 10px;
      }

      /* Thyristor */
      .t3{
        
          position: relative;
          height: 10px;
          width: 10px;
          top: 12px;
          left: 18px;
      
      }

      /* Voltmeters */

      .v3-end{
        position: relative;
       height: 10px;
       width: 10px;
       top: 14px;
       left: 21px;
      }

      .v3-no{
        width: 17px;
       height: 18px;
       position: relative;
       top: -50px;
       left: 12px;

      }

      .v3-bno{
        width: 17px;
        height: 18px;
        position: relative;
        top: -10px;
        left: 10px;
       }

       .v1-no{
        width: 17px;
    height: 18px;
    position: relative;
   top: -50px;
    left: 9px;
       }

       .v1b-no{
        width: 17px;
    height: 18px;
    position: relative;
    top: -13px;
    left: 9px;
       }

       .v5t-end{
        position: relative;
    height: 10px;
    width: 10px;
    top: -2px;
    left: 20px;

       }
       .v5b-end{
        position: relative;
    height: 10px;
    width: 10px;
    top: 31px;
    left: 21px;
       }
      .v5t-no{
        width: 17px;
    height: 18px;
    position: relative;
    top: -48px;
    left: 1px;

      }

      .v5b-no{
        width: 17px;
    height: 18px;
    position: relative;
    top: -13px;
    left: 1px;
      }
      .upper-end {
        position: relative;
        height: 10px;
        width: 10px;
        top: -2px;
        left: 21px;
      }
      .lower-end {
        position: relative;
        height: 10px;
        width: 10px;
        top: 32px;
        left: 21px;
      }
      .left-end {
        position: relative;
        height: 10px;
        width: 10px;
        top: 12px;
        left: 0px;
      }
      .right-end {
        position: relative;
        height: 10px;
        width: 10px;
        top: 2px;
        left: 43px;
      }
      .btn-bar {
        width: 100%;

        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
      }
      .righttop-end {
        position: relative;
        height: 10px;
        width: 10px;
        top: 1px;
        left: 39px;
      }
      .bottom-end{
        position: relative;
        height: 10px;
        width: 10px;
        top: -1px;
        left: 19px;

      }
      .lefttop-end{
        position: relative;
        height: 10px;
        width: 10px;
        top: -1px;
        left: 20px;

      }
      .rightbottom-end {
        position: relative;
        height: 10px;
        width: 10px;
        top: 5px;
        left: 19px;
      }
      .name {
        position: relative;
        top: 9px;
        left: -30px;
        width: 45px;
        height: 18px;
      }
      .dbl {
        top: 38px;
      }
      .value{
        position: relative;
        top: -22px;
        left: 10px;
      }
      .value1{
        position: relative;
        top: -7px;
        left: 13px;
      }
      .ground-name {
        position: relative;
        top: -20px;
        left: 50px;
      }
      .left-name {
        position: relative;
        top: 18px;
        left: 19px;
      }
      .ac-value {
        position: relative;
        left: 46px;
    top: -48px
}

      .top-serial-no {
        width: 17px;
        height: 18px;
        position: relative;
        top: -60px;
        left: 34px;
      }
      .top-serial-no-volt {
        top: -47px;
      }
      .bottom-serial-no {
        width: 17px;
        height: 18px;
        position: relative;
        top: -17px;
        left: 34px;
      }
      .bottom-serial-no-volt {
        top: -14px;
      }

      .left-serial-no-ac {
        width: 17px;
        height: 18px;
        position: relative;
        top: -30px;
        left: -19px;
      }
      .right-serial-no-ac {
        width: 17px;
        height: 18px;
        position: relative;
        top: -48px;
        left: 56px;
      }
      #right {
        width: -webkit-fill-available;
      }
      .graph-style {
        width: 100%;
        height: 225px;
      }
      .reading {
        width: 85%;
        padding: 10px;
        display: none;
      }
      .sub-reading {
        width: 100%;
      }
      table {
        width: 100%;
      }
      th {
        height: 25px;
      }
      td {
        height: 25px;
      }.jtk-connector {
        z-index: 4;
        cursor: pointer;
      }

      .jtk-endpoint {
        z-index: 5;
        cursor: pointer;
      }

      .jtk-overlay {
        z-index: 6;
      }
      #mid {
        background-color: unset;cursor: unset;
      }
     
      #left {
        background-color: unset;
      }
      
      footer {
        width: 100%;
        background-color: rgb(51, 51, 51);
      }
      #diagram{
        cursor: unset;
        padding-top: 30px;
       }
       .use{
        cursor: pointer;
       }
       .cross-btn{
        color: white;
          width: 25px;
          background-color: black;
          padding: 1px;
          margin: unset;
          margin-top: 6px;
       }
       .cross-btn:hover{
        background-color: red;
       }
       .set-value-btn{
        width: 79px;
          padding: 4px 0px;
          cursor: pointer;
       }
       .set-value-btn:hover{
        background-image: linear-gradient( 45deg, #ff512f 0%, #f09819 51%, #ff512f 100% );
        color: black;
        
       }
       .set-input{
        width: 80px;
        margin-top: 3px;
       }
       .set-input-name {
        border-radius: 20px;
        padding: 2px;
        height: 24px;
        width: 125px;
      }
    
       label{
        color: white;
       }
       .center-img{
        display: flex;
       justify-content: center
      }
      #left{
        width: 230px;
      }
      #workspace{
        display: inline-block;
        width: 1053px;
        max-width: 1053px;
        min-width: 1053px;
      }
      @media print{
        #mid{
          width: 800px;
        }
        #left{
          width: 230px;
        }
      }
      .header {
        width: 100%;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-family: ui-serif;
        font-size: xx-large;
        letter-spacing: 3px;
        background-color: bisque;
        padding-right: 50px;
        border: 3px solid;
        border-right: 0px;
      }
      
      #component_head:hover{
        background-color: forestgreen;
      }
      .red-circle{
        position: relative;
        z-index: 5;
      }
      #symbolpalette{
        cursor: unset;
       }
       .comp-ele{
         cursor: pointer;
       }table,
       td,
       th {
         border-collapse: collapse;
         padding: 1px;
       }
       .inst_display{
        display: block;
       }
      /* @media print {

        body {
          margin: 0;
          color: #000;
          background-color: #fff;
        }
      
      } */