.main-content { width: 1440px; margin: auto; font-size: 14px; } .connect-container { margin: 20px 0; } .container { display: flex; } .sender, .receiver { flex: 1; } .sender { margin-right: 8px; } .receiver { margin-left: 8px; } .lines-header { height: 30px; width: 100%; box-sizing: border-box; background-color: #444; line-height: 30px; color: white; padding-left: 10px; } .lines-body { width: 100%; background-color: #222; min-height: 300px; padding: 10px 0 20px 0; } .line, .command-line { box-sizing: border-box; width: 100%; color: #f1f1f1; background-color: #222; outline: none; border: none; padding: 5px 10px; font-size: 14px; } .line:hover { background-color: #444; } .button::before { -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: #959595 0 2px 5px; -moz-box-shadow: #959595 0 2px 5px; border-radius: 3px; box-shadow: #959595 0 2px 5px; content: ""; display: block; left: 0; padding: 2px 0 0; position: absolute; top: 0; } .button:active::before { padding: 1px 0 0; } .button.black { background: #656565; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#656565), to(#444)); background: -moz-linear-gradient(#656565, #444); background: linear-gradient(#656565, #444); border: solid 1px #535353; border-bottom: solid 3px #414141; box-shadow: inset 0 0 0 1px #939393; color: #fff; text-shadow: 0 1px 0 #2f2f2f; padding: 8px 16px; outline: none; } .button.black:hover { background: #4c4c4c; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#4c4c4c), to(#565656)); background: -moz-linear-gradient(#4c4c4c, #565656); background: linear-gradient(#4c4c4c, #565656); border: solid 1px #464646; border-bottom: solid 3px #414141; box-shadow: inset 0 0 0 1px #818181; } .button.black:active { background: #474747; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#474747), to(#444)); background: -moz-linear-gradient(#474747, #444); background: linear-gradient(#474747, #444); border: solid 1px #2f2f2f; box-shadow: inset 0 10px 15px 0 #3e3e3e; }