* {
    margin: 0px;
    padding: 0;
    font-family: 'Raleway', sans-serif;
}

button:focus {
    outline: none;
}


/*header section template styling*/

#header {
    border-bottom: 8px solid #ff6600;
    font-family: 'Raleway', sans-serif;
    width: 1518px;
    top: 0;
    background-color: #fff!important;
}

#header img {
    padding: 8px 8px 4px 32px;
}

#labName {
    float: right;
    font-size: 25px;
    align-items: center;
    margin-top: 30px;
    margin-right: 40px;
    color: #2C99CE;
}

#exp-name {
    width: 1500px;
    text-align: center;
    padding: 10px;
    height: 20px;
    color: #2C99CE;
    font-family: 'Raleway', sans-serif;
    border-bottom: 1px solid #333;
}

#simulation {
    height: 590px;
    width: 1518px;
    display: inline-block;
}


/*left side views*/

.left {
    padding-top: 20px;
    margin-left: 20px;
    float: left;
    width: 1000px;
    height: 550px;
    display: block;
}


/*Screen for experiment*/

#mid {
    height: 500px;
    border: 2px solid #d39538;
    box-shadow: 3px 4px 6px #888888;
    border-radius: 5px;
    background-image: url('../images/desk2.jpg');
}


/* Components */

#board {
    margin: auto;
    height: 300px;
    width: 909px;
    border-radius: 5px;
    border: 3px solid #d6d3d3;
    box-shadow: 3px 4px 6px #888888;
    background-image: url('../images/board.png');
    display: block;
    position: relative;
    visibility: hidden;
}

#supply {
    height: 78px;
    width: 119px;
    background-image: url('../images/supply.png');
    border-radius: 10px;
    box-shadow: 1px 2px 4px #333;
    background-size: cover;
    display: inline-block;
    visibility: hidden;
}

#inputs {
    height: 100px;
    width: 350px;
    display: inline-block;
    visibility: hidden;
}

#input_A {
    height: 75px;
    width: 50px;
    display: inline-block;
}

#input_B {
    height: 75px;
    width: 50px;
    display: inline-block;
}

#input_C {
    height: 75px;
    width: 50px;
    display: inline-block;
}

#input_D {
    height: 75px;
    width: 50px;
    display: inline-block;
}

#ic7442 {
    height: 160px;
    width: 110px;
    margin: 73.4px 0px 0px 49px;
    background-image: url('../images/ic.png');
    display: block;
    visibility: hidden;
}

#led {
    height: 160px;
    width: 670px;
    margin: 73.4px 0px 0px 2px;
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 220px;
}

#led label {
    margin-left: 12px;
}

#led0 {
    height: 160px;
    width: 28px;
    background-image: url('../images/led0.png');
    background-size: cover;
    display: inline-block;
    visibility: hidden;
}

#r0 {
    height: 160px;
    width: 15px;
    margin-left: 8.2px;
    background-image: url('../images/r.png');
    background-size: cover;
    display: inline-block;
    visibility: hidden;
}

#led1 {
    height: 160px;
    width: 28px;
    margin-left: 7px;
    background-image: url('../images/led0.png');
    background-size: cover;
    display: inline-block;
    visibility: hidden;
}

#r1 {
    height: 160px;
    width: 15px;
    margin-left: 8.7px;
    background-image: url('../images/r.png');
    background-size: cover;
    display: inline-block;
    visibility: hidden;
}

#led2 {
    height: 160px;
    width: 28px;
    margin-left: 7px;
    background-image: url('../images/led0.png');
    background-size: cover;
    display: inline-block;
    visibility: hidden;
}

#r2 {
    height: 160px;
    width: 15px;
    margin-left: 8.7px;
    background-image: url('../images/r.png');
    background-size: cover;
    display: inline-block;
    visibility: hidden;
}

#led3 {
    height: 160px;
    width: 28px;
    margin-left: 7px;
    background-image: url('../images/led0.png');
    background-size: cover;
    display: inline-block;
    visibility: hidden;
}

#r3 {
    height: 160px;
    width: 15px;
    margin-left: 8.7px;
    background-image: url('../images/r.png');
    background-size: cover;
    display: inline-block;
    visibility: hidden;
}

#led4 {
    height: 160px;
    width: 28px;
    margin-left: 7px;
    background-image: url('../images/led0.png');
    background-size: cover;
    display: inline-block;
    visibility: hidden;
}

#r4 {
    height: 160px;
    width: 15px;
    margin-left: 8.7px;
    background-image: url('../images/r.png');
    background-size: cover;
    display: inline-block;
    visibility: hidden;
}

#led5 {
    height: 160px;
    width: 28px;
    margin-left: 7px;
    background-image: url('../images/led0.png');
    background-size: cover;
    display: inline-block;
    visibility: hidden;
}

#r5 {
    height: 160px;
    width: 15px;
    margin-left: 8.7px;
    background-image: url('../images/r.png');
    background-size: cover;
    display: inline-block;
    visibility: hidden;
}

#led6 {
    height: 160px;
    width: 28px;
    margin-left: 7px;
    background-image: url('../images/led0.png');
    background-size: cover;
    display: inline-block;
    visibility: hidden;
}

#r6 {
    height: 160px;
    width: 15px;
    margin-left: 8.7px;
    background-image: url('../images/r.png');
    background-size: cover;
    display: inline-block;
    visibility: hidden;
}

#led7 {
    height: 160px;
    width: 28px;
    margin-left: 7px;
    background-image: url('../images/led0.png');
    background-size: cover;
    display: inline-block;
    visibility: hidden;
}

#r7 {
    height: 160px;
    width: 15px;
    margin-left: 8.7px;
    background-image: url('../images/r.png');
    background-size: cover;
    display: inline-block;
    visibility: hidden;
}

#led8 {
    height: 160px;
    width: 28px;
    margin-left: 7px;
    background-image: url('../images/led0.png');
    background-size: cover;
    display: inline-block;
    visibility: hidden;
}

#r8 {
    height: 160px;
    width: 15px;
    margin-left: 8.7px;
    background-image: url('../images/r.png');
    background-size: cover;
    display: inline-block;
    visibility: hidden;
}

#led9 {
    height: 160px;
    width: 28px;
    margin-left: 7px;
    background-image: url('../images/led0.png');
    background-size: cover;
    display: inline-block;
    visibility: hidden;
}

#r9 {
    height: 160px;
    width: 15px;
    margin-left: 8.7px;
    background-image: url('../images/r.png');
    background-size: cover;
    display: inline-block;
    visibility: hidden;
}


/*check connection and reset button*/

button:disabled{
    cursor:not-allowed;
    opacity:0.6;
}
.bottom {
    height: 60px;
    text-align: center;
}

.bottom button {
    margin: 15px 80px 10px 80px;
    height: 40px;
    width: 210px;
    font-size: 15px;
    border: none;
    font-weight: bold;
    border-radius: 25px;
   
    color: white;
}

#check {
    border: 2px rgb(0, 168, 8) solid;
    background: rgb(0, 168, 8);
}

#check:hover {
    color: rgb(0, 168, 8);
    background: white;
    font-size: 16px;
}

#reset {
    border: 2px rgb(255, 54, 54) solid;
    background: rgb(255, 54, 54);
}

#reset:hover {
    color: rgb(255, 54, 54);
    background: white;
    font-size: 16px;
}


/*right side views*/

.right {
    margin: 20px 0px 0px 25px;
    float: left;
    border-radius: 5px;
    background: rgb(220, 221, 148);
    width: 457px;
    height: 555px;
    text-align: center;
    display: block;
}


/*theorem selector radio button*/

.theorem {
    display: inline-block;
    margin-top: 10px;
    margin-left: 15px;
    font-size: 20px;
}


/* The container */

.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 15px;
}


/* Hide the browser's default radio button */

.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}


/* Create a custom radio button */

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 50%;
}


/* On mouse-over, add a grey background color */

.container:hover input~.checkmark {
    background-color: #ccc;
}


/* When the radio button is checked, add a blue background */

.container input:checked~.checkmark {
    background-color: #2196F3;
}


/* Create the indicator (the dot/circle - hidden when not checked) */

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the indicator (dot/circle) when checked */

.container input:checked~.checkmark:after {
    display: block;
}


/* Style the indicator (dot/circle) */

.container .checkmark:after {
    top: 7px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}


/*right side buttons*/

.right_btn {
    height: 40px;
    width: 200px;
    font-size: 20px;
    cursor: pointer;
    background: white;
    font-weight: 500;
    background: #5433FF;
    border: 2px solid #5433ff;
    box-shadow: 0 16px 22px -17px #03153B;
    color: #fff;
    cursor: pointer;
    margin-top: 15px;
    border-radius: 20px;
}

.right_btn:hover {
    background-color: #ffffff;
    color: #5433FF;
}


/*truth table styling*/

.truth_table {
    margin: 25px 5px 0 10px;
    padding: 10px 10px 10px 10px;
    height: 410px;
    width: 415px;
    background: white;
    box-shadow: 3px 4px 6px #888888;
    border-radius: 5px;
}

#second {
    margin-left: 10px;
}

table {
    margin: 5px 0 0 0px;
    width: 415px;
    height: 300px;
    border-radius: 5px;
}

th {
    height: 15px;
}

.line {
    border-right: 2px solid rgb(79, 76, 76);
}

.line-bottom {
    border-bottom: 2px solid rgb(79, 76, 76);
}

table,
th,
td {
    border: 1px solid rgb(152, 145, 145);
    border-collapse: collapse;
}

thead th {
    width: 5px;
}

tbody input {
    width: 80%;
    border: none;
    height: 80%;
    text-align: center;
}

.table_btn {
    margin-top: 15px;
}

.table_btn button {
    height: 30px;
    width: 90px;
    border-radius: 20px;
}

#tab_check {
    border: 2px rgb(0, 168, 8) solid;
    background: rgb(0, 168, 8);
    color: #ffffff;
}

#tab_check:hover {
    color: rgb(31, 143, 36);
    background: white;
    font-weight: bold;
}

#tab_reset {
    border: 2px rgb(255, 54, 54) solid;
    background: rgb(255, 54, 54);
    color: #ffffff;
}

#tab_reset:hover {
    color: rgb(255, 54, 54);
    background: white;
    font-weight: bold;
}


/*Truth styling end*/


/*floating panel styling*/

.Button-data {
    position: fixed;
    right: 0;
    bottom: 50px;
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
    z-index: 9999;
    overflow: scroll;
}

.Button-data.visible {
    transform: translateX(-10px);
}

li::marker {
    font-weight: bold;
}
.Components {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 31px -17px rgba(0, 31, 97, 0.6);
    border: 1px solid black;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Muli';
    position: relative;
    height: 120px;
    width: 430px;
    max-width: calc(100% - 10px);
}

.Components div button {
    position: relative;
    background-color: #2237f8;
    border: none;
    font-size: 15px;
    height: 40px;
    margin-left: 10px;
    border-radius: 12px;
    border: 1px rgb(46, 9, 255) solid;
    width: 120px;
    color: #FFFFFF;
    text-align: center;
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.Components div button:after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.Components div button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}

.Components div {
    display: flex;
    margin-top: 15px;
}

.panel {
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    background: #fff;
    position: relative;
    box-shadow: 0 16px 31px -17px rgba(0, 31, 97, 0.6);
    border: 1px solid black;
    border-radius: 20px;
    height: 640px;
    width: 440px;
    padding: 10px;
    color: black;
    max-width: calc(100% - 10px);
}

.panel p {
    /* text-align: left; */
    padding-left: 15px;
  
    color: black;
    font-family: Arial, Helvetica, sans-serif;
 
}

.panel img {
    margin-left: 5px;
    height: 200px;
    width: 90%;
}

.close-btn {
    border: 0;
    color: rgb(255, 5, 5);
    background: white;
    font-weight: 900;
    cursor: pointer;
    font-size: 15px;
    position: absolute;
    top: 2px;
    right: 9px;
    border-radius: 15px;
}

.panel button.close-btn:focus {
    outline: none;
}

.floating-btn {
    border-radius: 26.5px;
    background-color: #001F61;
    border: 1px solid #001F61;
    box-shadow: 0 16px 22px -17px #03153B;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 20px;
    padding: 12px 20px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}

.floating-btn:hover {
    background-color: #ffffff;
    color: #001F61;
}

.floating-btn:focus {
    outline: none;
}


/*floating panel styling end*/


/*footer styling*/

#copyright {
    width: 1518px;
    height: 30px;
    font-size: 18px;
    padding-top: 10px;
    text-align: center;
    color: #fff;
    background-color: #333;
    font-family: 'Raleway', sans-serif;
}

#a1,
#a2,
#a3,
#a4,
#a5,
#a6,
#a7,
#a8,
#a9,
#a10,
#a11,
#a12,
#a13,
#a14,
#a15,
#a16 {
    display: none;
}

#b1,
#b2,
#b3,
#b4,
#b5,
#b6,
#b7,
#b8,
#b9,
#b10,
#b11,
#b12,
#b13,
#b14,
#b15,
#b16 {
    display: none;
}

#c1,
#c2,
#c3,
#c4,
#c5,
#c6,
#c7,
#c8,
#c9,
#c10,
#c11,
#c12,
#c13,
#c14,
#c15,
#c16 {
    display: none;
}

#d1,
#d2,
#d3,
#d4,
#d5,
#d6,
#d7,
#d8,
#d9,
#d10,
#d11,
#d12,
#d13,
#d14,
#d15,
#d16 {
    display: none;
}

#e1,
#e2,
#e3,
#e4,
#e5,
#e6,
#e7,
#e8,
#e9,
#e10,
#e11,
#e12,
#e13,
#e14,
#e15,
#e16 {
    display: none;
}

#f1,
#f2,
#f3,
#f4,
#f5,
#f6,
#f7,
#f8,
#f9,
#f10,
#f11,
#f12,
#f13,
#f14,
#f15,
#f16 {
    display: none;
}

#g1,
#g2,
#g3,
#g4,
#g5,
#g6,
#g7,
#g8,
#g9,
#g10,
#g11,
#g12,
#g13,
#g14,
#g15,
#g16 {
    display: none;
}

#h1,
#h2,
#h3,
#h4,
#h5,
#h6,
#h7,
#h8,
#h9,
#h10,
#h11,
#h12,
#h13,
#h14,
#h15,
#h16 {
    display: none;
}

#i1,
#i2,
#i3,
#i4,
#i5,
#i6,
#i7,
#i8,
#i9,
#i10,
#i11,
#i12,
#i13,
#i14,
#i15,
#i16 {
    display: none;
}

#j1,
#j2,
#j3,
#j4,
#j5,
#j6,
#j7,
#j8,
#j9,
#j10,
#j11,
#j12,
#j13,
#j14,
#j15,
#j16 {
    display: none;
}