.devT{padding-bottom:100px;padding-top:100px;position:relative}.devT-title{margin-bottom:30px;text-align:center}.devT-container label{display:block;margin-bottom:12px}.devT-container-footer{padding-top:10px}.right-image,.right-text{margin-bottom:20px}.right-text{margin-top:20px}.devT .right h2{margin-bottom:20px}.validation-status{padding:10px 0}.section-title{font-weight:700;margin-bottom:10px}.error{color:red}.jwtHeader,.jwtPayload{margin-bottom:10px}.explanation-title{margin-top:20px}pre code.hljs{background-color:#e1f0f5;border-radius:9px;color:#000}.devT-container pre code,.devT-container pre code span{font-weight:400}table.jwt-explanation{border:1px solid #fff;border-collapse:collapse;text-align:left;width:100%}table.jwt-explanation td,table.jwt-explanation th{border:1px solid #fff;padding:10px}table.jwt-explanation tbody td{font-size:14px}table.jwt-explanation tr:nth-child(2n){background:#d0e4f5;color:#000}table.jwt-explanation thead{background:#1c6ea4}table.jwt-explanation thead th{color:#fff;font-size:16px;font-weight:700}table.jwt-explanation tfoot td{font-size:14px}table.jwt-explanation tfoot .links{text-align:right}table.jwt-explanation tfoot .links a{background:#1c6ea4;border-radius:5px;color:#fff;display:inline-block;padding:2px 8px}.mainArea{margin-bottom:10px}@media screen and (min-width:768px){.devT-title{margin-bottom:50px}.devT-title h2{font-size:50px}.devT .left{flex:1;padding-right:40px}.devT .right{width:30%}.devT .btn{margin-right:10px}}@media screen and (max-width:767px){.devT{padding-bottom:60px;padding-top:60px}.devT .inner-wrap{flex-direction:column}.devT .left,.devT .right{width:100%}.devT .left{margin-bottom:30px}.devT-container .btn{margin:5px}.button-container{display:flex;flex-wrap:wrap}}.button-container{align-items:center;justify-content:start}.devT-container textarea{border-radius:5px;display:block;font-size:17px;font-weight:400;min-height:150px;padding:20px;resize:auto;width:100%!important}.devT-container .btn{border:2px solid #63de7e;display:flow}.btn.outline{background:transparent;color:#63de7e}.btn.outline:hover{background:#63de7e;color:#000}.output{background-color:#333844;border-radius:5px;cursor:pointer;font-size:1.4em;margin:10px 0 20px;padding:10px;position:relative;text-align:center;word-break:break-all}.output:hover{background-color:#3c4049}.row{border:1px solid #61dafb;border-radius:5px;display:flex;justify-content:space-between;margin-bottom:10px;padding:20px}.column{display:flex;flex-direction:column;width:48%}.output-field{cursor:pointer}.button-row{align-items:center;justify-content:start;padding:20px 0}.devT-container .btn{appearance:none;border:none;text-align:center}.devT-container .btn.outline{background:transparent;border:1px solid;color:#63de7e}.devT-container .btn.outline:hover{background:#63de7e;color:#000}.result{border-radius:6px;font-size:.9rem;font-weight:600;margin-bottom:10px;padding:10px}.valid{background-color:#d4edda;border:1px solid #c3e6cb;color:#155724}.invalid{background-color:#f8d7da;border:1px solid #f5c6cb;color:#721c24}.details{background:#f4f4f4;border:1px solid #ccc;border-radius:6px;color:#000;font-family:monospace;padding:10px;white-space:pre-wrap;word-break:break-word}#formattedCode{background:#f5f5f5;border:1px solid #ccc;display:none;overflow-x:auto;padding:10px}