html {
    --text-area-background: rgb(247, 247, 247);
    --text-area-disabled-border: #bdbdbd;
    --text-area-disabled-background: #fafafa;
    --text-area-placeholder: #bbb;
    --text-area-border: 0;
    --x-btn-position: 0 0;
    --card-line-color: #e1e1e1!important;
}

html[data-theme='dark'] {
    --text-area-disabled-background: transparent;
    --text-area-background: transparent;
    --text-area-placeholder: #2f434d;
    --text-area-border: 0.05em solid #7a7a7a !important;
    --text-area-disabled-border: #232d36;
    --x-btn-position: 100% 100%;
}

textarea {

    text-align: justify;
    outline: none !important;
    min-height: 6.4em;

    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;

    text-shadow: none;
    display: inline-block;

    -webkit-appearance: textarea;

    -webkit-rtl-ordering: logical;

    cursor: text;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    margin: 0;

    border-image: initial;
    box-sizing: border-box;
    direction: ltr;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    font-family: 'Roboto', arial, sans-serif;
    font-size: 1.2em;
    overflow: hidden;
    padding: 0.5em;
    padding-right: 1.5em;

    resize: none;
    width: 100%;
    box-shadow: var(--card-border-shadow);
    word-break: keep-all;
    background-color: var(--text-area-background);
    color: var(--body-color);
    border:var(--text-area-border);
    border-radius: 0.15em;
}


.valid {
    color: #009586 !important;
    position: relative;
    font-weight: bold;
}

.valid::after {
    display: block;
    position: absolute;
    color: #616161;
    z-index: 100;
    font-size: 0.4em;
    width: 100%;
    text-align: center;
    top: 2.9em;
    left: 0;
}


.textarea {
        word-break: break-all;
    text-align: justify;
    outline: none !important;
    min-height: 3em;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;

    text-shadow: none;
    display: inline-block;

    -webkit-appearance: textarea;

    -webkit-rtl-ordering: logical;

    cursor: text;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    margin: 0em;

    border-image: initial;
    box-sizing: border-box;
    direction: ltr;
    border: none;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    font-family: 'Roboto', arial, sans-serif;
    font-size: 1.3em;
    overflow: hidden;
    padding: 0.8em;
    padding-right: 2em;
    resize: none;

    width: 100%;
    box-shadow: var(--card-border-shadow);

    background-color: var(--text-area-background);
    color: var(--body-color);
    border: var(--text-area-border);
    border-radius: 0.15em;
}


.x-btn {
    background-repeat: no-repeat;
    display: inline-block;
    height: 1.5em!important;
    width: 1.5em!important;
    background-image: url(/https/bitaps.com/static/img/x.png);
    background-size: cover;
    opacity: .55!important;
    background-position: var(--x-btn-position);
    cursor: pointer;
}
.x-btn:hover {
    opacity: 1!important;
}

#raw_tx {
    font-size: 1.2em;
    height: 3em;
    padding: 1em;

}

.btn-copy
{

    font-size: 0.9em !important;
    cursor: pointer;
}




.confirmed
{
    background-color:  #1478E2;
}

 .invalid-tx
 {
     background-color: #f9eff1!important;
 }


.cbrow {

}
.cbtag {

    color: #009688;
}
.cbwrap {
    font-family: 'Roboto', sans-serif!important;
    display: inline-block!important;
    color: var(--value-color) !important;
        overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}







.op_code
{
     background-color: var(--opcode-background-color);
    color: var(--card-text-color)!important;
   border:1px solid var(--card-border-color);
}

.card-table td {
    margin: 0;
    vertical-align: bottom;
    border-color: silver !important;
    padding-bottom: 0.2em;
}

.bottom{
    cursor: pointer;
     background-color: #fafafafa;
    color:#222!important;
   border:1px solid #222;
}
.segwit
{
    /*background-color: #ff9800;*/
background-color: #ab47bc;
}

.unconfirmed-token {
    background-color: #e53935;
}


.rbf
{
    background-color: #009688;
}
.coinbase
{
    background-color: var(--coinbase-tag);
    font-weight: normal !important;
}
.legacy
{
   background-color: #4CAF50;
}
.token{
    font-size: 0.75em;
    padding: 0.1em;
    padding-bottom: 0.2em;
    padding-top: 0.2em;
    padding-right: 0.8em;
    padding-left: 0.8em;

    border-radius: 0.4em;
    color:white;
    font-weight: bold;

}




@media (max-width: 780px) {
    #tx-info, #preview-tx-control {
            flex-direction: column!important;
        align-items: center;

    }

    #preview-tx-control div {
        margin-top: 0.8em;
    }
    #flow i:before {

       content: "\f078";
    }
    #flow i{
        margin-top: 1em;
        margin-bottom: 1em;
    }
 #tx-summary, #tx-hash
 {min-width: 100%;}

  #tx-hash{
      margin-left: 0em !important;
      margin-top: 1em;
  }
}


@media (max-width: 550px) {
     #transaction {
         padding: 0px;
     }
    .card-body {
        padding-right: 0.5em;
        padding-left: 0.5em;
    }
     #message{
         padding: 0!important;
     }
          #transaction-inputs, #transaction-outputs {
         padding: 0px;
     }
       .card-title{
        margin-left: 1em;
    }



}