/*Copyright 2021 DAI FOUNDATION (the original version https://github.com/daifoundation/ethtx_ce)*/
/*Copyright 2021-2022 Token Flow Insights SA (modifications to the original software as recorded*/
/*in the changelog https://github.com/EthTx/ethtx/blob/master/CHANGELOG.md)*/

/*Licensed under the Apache License, Version 2.0 (the "License");*/
/*you may not use this file except in compliance with the License.*/
/*You may obtain a copy of the License at: http://www.apache.org/licenses/LICENSE-2.0*/

/*Unless required by applicable law or agreed to in writing, software distributed under the License is distributed*/
/*on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.*/
/*See the License for the specific language governing permissions and limitations under the License.*/

/*The product contains trademarks and other branding elements of Token Flow Insights SA which are*/
/*not licensed under the Apache 2.0 license. When using or reproducing the code, please remove*/
/*the trademark and/or other branding elements.*/


body {
    font-family: monospace;
    margin: 5px;
    background-color: whitesmoke;
    width: 100%;
}

* {
    margin: 0;
    padding: 0;
}

h3 {
    margin: 11px;
}

p {
    padding-bottom: 50px;
}

.my_p {
    margin: 2px 2px 2px 11px;
    border: 1px #ccc solid;
    border-radius: 5px;
    padding: 2px 5px;
    white-space: nowrap;
    display: inline-block;
}

a:link,
a:visited {
    color: black;
    text-decoration: none;
}

.delegate a:link,
.delegate a:visited {
    color: darkorange;
    text-decoration: none;
}

.table {
    margin-left: 11px;
    border: solid 1px #bbbbbb;
    border-collapse: collapse;
    border-spacing: 0;
}

.table thead th {
    background-color: #ddd;
    border: solid 1px #bbbbbb;
    color: #444444;
    padding: 3px 10px 3px 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}

.table tbody td {
    border: solid 1px #bbbbbb;
    color: #333;
    padding: 3px 10px 3px 10px;
    text-shadow: 1px 1px 1px #fff;
    white-space: nowrap;
}

.content {
    width: 500px;
    margin: auto;
}

.transaction-info {
    margin: 5px 0 4px 13px;
}

.transaction-hash {
    color: darkgreen;
}

.events tbody td {
    border: 1px #ccc solid;
    padding: 5px 10px 2px 10px;
}

.calls table {
    border: transparent;
}

.calls tbody td {
    border: transparent;
    padding: 5px 10px 2px 10px;
}

.l2txs table {
    border: transparent;
}

.l2txs tbody td {
    border: transparent;
    padding: 5px 10px 2px 10px;
}

#tree .ui-fancytree ul {
    padding-left: 20px;
}

#tree .ui-fancytree li {
    list-style-type: none;
    margin: 5px;
    position: relative;
}

#tree .ui-fancytree li::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 2px;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-radius: 0 0 0 0;
    width: 20px;
    height: 15px;
}

#tree .ui-fancytree li::after {
    position: absolute;
    content: "";
    top: 8px;
    left: 2px;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-radius: 0 0 0 0;
    width: 20px;
    height: 100%;
}

#tree .ui-fancytree li:last-child::after {
    display: none;
}

#tree .ui-fancytree li:last-child:before {
    border-radius: 0 0 0 5px;
}

#tree ul.ui-fancytree > li:first-child::before {
    display: none;
}

#tree ul.ui-fancytree > li:first-child::after {
    border-radius: 5px 0 0 0;
}

#tree .ui-fancytree li p {
    border: 1px #ccc solid;
    border-radius: 5px;
    padding: 2px 5px;
    white-space: nowrap;
    display: inline-block;
}

#tree .ui-fancytree li p:hover,
#tree .ui-fancytree li p:hover + ul li p,
#tree .ui-fancytree li p:focus,
#tree .ui-fancytree li p:focus + ul li p {
    background: #eee;
    color: #000;
    border: 1px solid #aaa;
}

#tree .ui-fancytree li p:hover + ul li::after,
#tree .ui-fancytree li p:focus + ul li::after,
#tree .ui-fancytree li p:hover + ul li::before,
#tree .ui-fancytree li p:focus + ul li::before,
#tree .ui-fancytree li p:hover + ul::before,
#tree .ui-fancytree li p:focus + ul::before,
#tree .ui-fancytree li p:hover + ul ul::before,
#tree .ui-fancytree li p:focus + ul ul::before {
    border-color: #999;
}

#tree .ui-fancytree .fancytree-icon {
    display: none;
}

#tree .fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-focused span.fancytree-title {
    border-color: transparent;
}

#tree .fancytree-plain span.fancytree-node span.fancytree-title {
    background-color: transparent;
    border-color: transparent;
}

#tree ul.fancytree-container {
    background-color: transparent;
    border: none;
    outline: none;
}

#tree .fancytree-expander {
    position: relative;
    z-index: 2;
    top: -2px;
    left: -5px;
}

#tree * {
    font-family: monospace;
}

#tx_tree .ui-fancytree ul {
    padding-left: 20px;
}

#tx_tree .ui-fancytree li {
    list-style-type: none;
    margin: 5px;
    position: relative;
}

#tx_tree .ui-fancytree li::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 2px;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-radius: 0 0 0 0;
    width: 20px;
    height: 15px;
}

#tx_tree .ui-fancytree li::after {
    position: absolute;
    content: "";
    top: 8px;
    left: 2px;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-radius: 0 0 0 0;
    width: 20px;
    height: 100%;
}

#tx_tree .ui-fancytree li:last-child::after {
    display: none;
}

#tx_tree .ui-fancytree li:last-child:before {
    border-radius: 0 0 0 5px;
}

#tx_tree ul.ui-fancytree > li:first-child::before {
    display: none;
}

#tx_tree ul.ui-fancytree > li:first-child::after {
    border-radius: 5px 0 0 0;
}

#tx_tree .ui-fancytree li p {
    border: 1px #ccc solid;
    border-radius: 5px;
    padding: 2px 5px;
    white-space: nowrap;
    display: inline-block;
}

#tx_tree .ui-fancytree li p:hover,
#tx_tree .ui-fancytree li p:hover + ul li p,
#tx_tree .ui-fancytree li p:focus,
#tx_tree .ui-fancytree li p:focus + ul li p {
    background: #eee;
    color: #000;
    border: 1px solid #aaa;
}

#tx_tree .ui-fancytree li p:hover + ul li::after,
#tx_tree .ui-fancytree li p:focus + ul li::after,
#tx_tree .ui-fancytree li p:hover + ul li::before,
#tx_tree .ui-fancytree li p:focus + ul li::before,
#tx_tree .ui-fancytree li p:hover + ul::before,
#tx_tree .ui-fancytree li p:focus + ul::before,
#tx_tree .ui-fancytree li p:hover + ul ul::before,
#tx_tree .ui-fancytree li p:focus + ul ul::before {
    border-color: #999;
}

#tx_tree .ui-fancytree .fancytree-icon {
    display: none;
}

#tx_tree
.fancytree-plain.fancytree-container.fancytree-treefocus
span.fancytree-focused
span.fancytree-title {
    border-color: transparent;
}

#tx_tree .fancytree-plain span.fancytree-node span.fancytree-title {
    background-color: transparent;
    border-color: transparent;
}

#tx_tree ul.fancytree-container {
    background-color: transparent;
    border: none;
    outline: none;
}

#tx_tree .fancytree-expander {
    position: relative;
    z-index: 2;
    top: -2px;
    left: -5px;
}

#tx_tree * {
    font-family: monospace;
}

.back-button-container {
    display: flex;
    align-items: center;
    font-size: 16px;
}

.back-button-container img {
    margin-left: 20px;
    margin-right: 20px;
}

.with-back-button {
    display: flex;
    align-items: center;
    margin: 10px 11px 10px;
}

.with-back-button h3 {
    padding-bottom: 0;
    margin: 0;
}

.container-top {
    display: inline-block;
}

.container-info-logo {
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 1281px) {
    .hosted-by {
        order: 1;
        margin: 0 0 0 13px;
    }

    .container-info-logo {
        flex-flow: column;
    }

    .transaction-info {
        order: 2;
    }

}

@media screen and (max-width: 1280px) {
    .with-back-button {
        flex-direction: column;
        align-items: flex-start;
    }

    .back-button-container {
        order: -1;
        margin-bottom: 20px;
        width: 100%;
        justify-content: space-between;
    }
}
