/* Styles go here */

.jwt-body,
textarea {
  font-family: 'Lato Regular', 'Lato', sans-serif;
}

.jwt-body .CodeMirror {
  font-family: 'Inconsolata', monospace;
  height: auto;
  flex-shrink: 0;
  background-color: #FFFFFF;
}

.jwt-body pre.cm-s-jwt-signature {
  font-size: 16px;
  line-height: 20px;
  font-family: 'Inconsolata', monospace;
}

.jwt-body .input .CodeMirror {
  font-family: 'Roboto Mono', 'Inconsolata', monospace;
  font-size: 20px;
  line-height: 30px;
}

.jwt-body .CodeMirror-gutter-elt {
  width: auto !important;
}

.jwt-body .error-note {
  width: auto;
  min-width: 300px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0 15px;
  margin-left: 4px;
  color: #EE0000;
}

.jwt-body .btn {
  display: inline-block;
}

.jwt-body .btn + .btn {
  margin-left: 3px;
}


/**/

.jwt-body .cm-s-jwt-header,
.jwt-body .cm-jwt-header,
.jwt-body .cm-jwk-begin {
  color: #e57125;
  word-break: break-all;
}

.jwt-body .title.title-header {
  border-left: 4px solid #e57125;
}

.jwt-body .cm-s-jwt-payload,
.jwt-body .cm-jwt-payload,
.jwt-body .cm-jwk-payload {
  color: #00aeef;
  word-break: break-all;
}

.jwt-body .title.title-payload {
  border-left: 4px solid #00aeef;
}

.jwt-body .cm-s-jwt-signature,
.jwt-body .cm-jwt-signature,
.jwt-body .cm-jwk-end {
  color: #4da004;
  word-break: break-all;
}

.jwt-body .title.title-signature {
  border-left: 4px solid #4da004;
}

.jwt-body .verify.key + .CodeMirror .CodeMirror-scroll {
  min-height: 80px;
}

.jwt-body .verify.key.hash + .CodeMirror .CodeMirror-scroll {
  min-height: 0;
}

.jwt-body .cm-s-tomitribe .cm-number {
  color: #e57125;
}

.jwt-body .cm-s-tomitribe .cm-string {
  color: #1049a9;
}

.jwt-body .cm-s-tomitribe .cm-atom {
  color: #009b95;
}

.jwt-body .row {
  display: flex;
  max-width: 1000px;
  margin: 40px auto 80px auto;
}

.jwt-body .col {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  width: 50%;
  box-sizing: border-box;
  border: none;
  padding: 0;
  border-width: 0 1px 1px 1px;
  overflow: hidden;
}

.jwt-body .row h1,
.jwt-body .row h2,
.jwt-body .row h3,
.jwt-body .row h4,
.jwt-body .row h5 {
  margin: 0;
  display: inline-block;
}

.jwt-body .tab-title,
.jwt-body .title {
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  border: none;
  padding: 8px 0 8px 0;
  border-width: 1px 0 1px 0;
}

.jwt-body .title h4 {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 13px;
  vertical-align: middle;
  align-items: center;
  display: flex;
}

.jwt-body .input .tab-title h1,
.jwt-body .input .title h4 {
	color: #000;
}

.jwt-body .title h4 span.text {
    padding: 0 3px 0 0;
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: -2px;
}

.jwt-body .result .title {
  padding-left: 26px;
  padding-right: 30px;
}

.jwt-body .result .title.title-signature {
  padding: 6px 30px 8px 12px;
}

.jwt-body .tab-title {
  margin: 0;
}

.jwt-body .result .tab-title {
  padding-right: 28px;
  justify-content: flex-end;
}

.jwt-body .tab-title h1 {
  font-weight: 100;
  font-family: 'Lato Light', 'Lato', sans-serif;
  font-size: 32px;
}

.jwt-body .verify.key.private + .CodeMirror {
  border-bottom: 1px solid #2C2E2F;
}

.jwt-body .CodeMirror-gutters {
  border: none;
}

.jwt-body .controls {
  display: flex;
  align-items: center;
}

.jwt-body .rs {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}

.jwt-body .payload.json + .CodeMirror,
.jwt-body .jwkStr + .CodeMirror,
.jwt-body .pemStr + .CodeMirror {
  flex-shrink: initial;
  height: 100%;
}

.jwt-body .CodeMirror-line span .cm-string {
  word-break: break-all;
}


.jwt-body nav.nav-menu {
  overflow: hidden;
  border-radius: 30px;
  background-color: rgba(255, 255, 255, 0.15);
  margin: 10px;
  display: inline-block;
}

.jwt-body ul.nav-list {
  list-style: none;
  padding: 5px 6px;
  margin: 0;
}

.jwt-body li.nav-item {
  padding: 0;
  display: inline-block;
}

.jwt-body .active a.nav-link {
  color: #BD4723;
}

.jwt-body a.nav-link {
  padding: 7px 15px;
  display: inline-block;
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 30px;
  transition: all 0.3s ease;
}

.jwt-body li.nav-item.active .nav-link {
  background-color: #FFFFFF;
}

.jwt-body li.nav-item:not(.active) .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.jwt-body li.nav-item:not(:last-child) {
  margin-right: 1px;
}

.jwt-body .col {
  /* padding: 10px; */
  box-shadow: 0px 3px 10px -3px black;
  box-sizing: border-box;
}

.jwt-body .input.col {
  background-color: white;
  border-radius: 5px;
  color: #000;
  margin: 0 -5px 0 0;
  padding: 22px 30px 30px 30px;
}

.jwt-body .result.col {
  padding: 17px 0 25px 0;
  background-color: #343637;
  color: #FFF;
  margin: -40px 0 -40px 0;
  border-radius: 5px;
}

.jwt-body .input .cm-wrap {
  padding: 20px;
  border: 1px solid #DDDDDD;
  border-radius: 3px;
}

.jwt-body .result .cm-wrap {
  padding: 0 25px 0 25px;
  margin: 15px 0 19px 0;
}

.jwt-body .result .CodeMirror {
  background-color: #343637;
  line-height: 20px;
  border: 1px solid #343637;
  padding-left: 6px;
  margin-left: -6px;
  padding-right: 6px;
  margin-right: -6px;
}

.jwt-body .result .CodeMirror:hover, 
.jwt-body .result .CodeMirror:focus-within {
  background-color: #393A3B;
  border-radius: 5px;
  border-color: #424345;
}

.jwt-body .result .CodeMirror-cursor {
  border-color: #FFF;
}

.jwt-body .result .title {
  background-color: #2C2E2F;
}

.jwt-body select {
  background-color: #212222;
  color: #FFF;
  border: none !important;
  padding: 4px 0px 4px 6px !important;
  cursor: pointer;
  height: 25px;
  border-radius: 0;
}

.jwt-body select:hover {
  color: #FFF;
}

.jwt-body input[hidden] + label[for=zip],
.jwt-body input[hidden] + label[for=extra] {
  transition: all 0.5s ease;
  cursor: pointer;
  padding-left: 6px;
  margin-right: 0;
  font-size: 13px;
  color: #FFF !important;
}

.jwt-body input[hidden] + label span {
	display:none !important;
}

.jwt-body input[hidden] + label[for=zip]:hover,
.jwt-body input[hidden] + label[for=extra]:hover {
  color: #FFF;
}

.jwt-body input[hidden] + label[for=zip]:before,
.jwt-body input[hidden] + label[for=extra]:before {
  display: inline-block;
  content: "";
  width: 15px;
  height: 15px;
  border: 1px solid #212222;
  vertical-align: middle;
  margin: 0 5px 0 3px;
  border-radius: 3px;
  background-color: #212222;
  transition: all 0.5s ease;
}

.jwt-body input[hidden] + label[for=zip]:after,
.jwt-body input[hidden] + label[for=extra]:after {
  display: inline-block;
  content: "\002713";
  position: absolute;
  margin-left: -35px;
  margin-top: 1px;
  font-size: 10px;
  font-weight: bold;
  color: #212222;
  transition: all 0.5s ease;
}

.jwt-body input[hidden] + label[for=zip]:hover::after,
.jwt-body input[hidden] + label[for=extra]:hover::after {
  color: #555 !important;
}

.jwt-body input[hidden]:checked + label[for=zip],
.jwt-body input[hidden]:checked + label[for=extra],
.jwt-body input[hidden]:checked + label[for=zip]:after,
.jwt-body input[hidden]:checked + label[for=extra]:after {
  color: #FFFFFF !important;
}

.jwt-body input[hidden] + label[for=extra]:after {
  margin-left: -80px;
}

.jwt-body .tab-title {
  position: relative;
}

.jwt-body .input .tab-title:after {
  position: absolute;
  content: "";
  height: 0;
  border-bottom: 1px solid #DDDDDD;
  bottom: 0;
  right: -20px;
  left: -25px;
}

/*button:hover, button:focus {
  outline:none;
}*/

.jwt-body button, body[data-button-style*="slightly_rounded"] .jwt-body button {
    background-color: #2c2e2f;
    color: #FFF;
    border: 1px solid #FFF;
    padding: 1px 8px;
    font-size: 12px;
    border-radius: 30px !important;
    cursor: pointer;
    transition: all .5s ease;
}

.jwt-body .input button, body[data-button-style*="slightly_rounded"] .jwt-body .input button {
  background-color: #FFF;
  outline: none;
  color: rgb(229, 113, 37);
  border-color: rgb(229, 113, 37);
}

.jwt-body .input button:hover, body[data-button-style*="slightly_rounded"] .jwt-body .input button:hover  {
    background-color: rgb(229, 113, 37);
    outline: none;
    color: #FFF;
    border-color: rgb(229, 113, 37);
}

.jwt-body .result button, body[data-button-style*="slightly_rounded"] .jwt-body .result button {
    background-color: #2c2e2f;
    color: #FFF;
    border: 1px solid #FFF;
}

.jwt-body .result button:hover, body[data-button-style*="slightly_rounded"] .jwt-body .result button:hover {
    background-color: #FFF;
    outline: none;
    color: rgb(229, 113, 37);
    border-color: rgb(229, 113, 37);
}

.jwt-body textarea {
  opacity: 0;
}

.jwt-body .title h4 .icon {
  width: 30px;
  height: 22px;
  vertical-align: middle;
  padding-right: 8px;
  display: none;
  box-sizing: border-box;
}

.jwt-body .title.title-signature h4 .icon.valid .st0 {
  fill: #4da004;
}

.jwt-body .title.title-signature h4 .icon.invalid .st0 {
  fill: #CE0505;
}

.jwt-body .title.title-signature.signature-empty h4 .icon.invalid .st0 {
  fill: #AAA;
}

.jwt-body .title.title-signature.signature-valid h4 .icon.valid {
  display: inline-block;
}

.jwt-body .title.title-signature.signature-invalid h4 .icon.invalid {
  display: inline-block;
}

.jwt-body .title.title-signature.signature-invalid {
  border-color: #CE0505;
}

.jwt-body  .title.title-signature.signature-empty {
  border-color: #AAA;
}

.jwt-body .title.title-signature .text-empty,
.jwt-body .title.title-signature.signature-empty .text {
  display: none;
}

.jwt-body .title.title-signature.signature-empty h4 .text-empty {
  display: inline-block;
}

.jwt-body .input .title {
  padding: 20px 0;
}

body[data-fancy-form-rcs="1"] .jwt-body .controls .fancy-select-wrap {
    padding-top: 0;
}

.jwt-body {	
 background: linear-gradient(to right, #F78835, #B33D1F);
}