/* =====================================================================================================
// Project      : CoinMachine platform
// Context      : blockchain/cryptocurrency education and consulting, IT developement
// File         : web3wallets.css
// Role         : web3wallets.php special CSS stylesheet
// Author       : CoinMachine
// Creation     : 2023-06-15
// Last update  : 2023-06-28
// ===================================================================================================== */

/* *** *** *** CONTAINERS *** *** *** */
#wallets-main {
    margin: 0;
    padding: 0;
}
#wallets-main .row {
    display: flex;
    margin: 0;
    padding: 0;
}
.wallet-container {
    margin: 20px auto;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px outset #06c883;
    box-shadow: 3px 3px 3px #005c17;
    transform: skew(-5deg,0);
}
.wallet-compatibilities {
    padding: 5px;
    display: block;
    align-self: center;
}
.wallet-details {
    font-family: "Audiowide", sans-serif;
}
/* *** *** *** MINI NAVIGATION MENU *** *** *** */
#wallet-mini-menu {
    position: fixed;
    top: 40%;
    left: 0;
    padding: 10px 0;
}
#wmm-title, #wmm-title a, .wmm-link, .wmm-link a {
    font-family: "Audiowide";
    text-align: left;
    text-decoration: none;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #06c883, #ebef7b);
}
#wmm-title {
    font-size: 2.1em;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding-bottom: 5px;
}
.wmm-link {
    font-size: 1.4em;
}
#wmm-title:hover, #wmm-title a:hover, .wmm-link:hover, .wmm-link a:hover {
    background-image: linear-gradient(45deg, #8306c8, #06acc8);
}
/* *** *** *** USER TABLES *** *** *** */
table {
    opacity: 0.95;
    border-collapse: collapse;
}
#wallet-compat-tab {
    margin-top: 10px;
}
#wallet-compat-tab thead tr th{
    writing-mode: vertical-rl;
    padding-bottom: 4px;
    text-align: center;
}
th {
    flex-wrap: wrap;
    vertical-align: bottom;
    text-align: center;
    padding-bottom: 2px;
}
tr {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #06c883;
}
.user-check {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    align-self: center;
    font-size: 1.25em;
}
#wallet-dispo-tab thead tr {
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #ebef7b, #06c883);
}
#wallet-dispo-tab thead tr th {
    font-family: "Share Tech Mono", monospace;
    font-size: 1em;
    color: transparent;
}
td a, th a {
    font-family: "AudioWide", sans-serif;
    font-size: 1.2em;
    font-style: italic;
    text-decoration: none;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #06c883, #ebef7b);
}
td a:hover, th a:hover {
    background-image: linear-gradient(45deg, #8306c8, #06acc8);
}
.tst {
    font-family: "Share Tech Mono", monospace;
    font-size: 1.2em;
    text-align: right;
    color: #06c883;
}
/* *** *** *** TITRAGES *** *** *** */
#wallets-main-label, .wallet-details label {
    font-family: "Audiowide";
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
#wallets-main-label {
    margin: 10px auto;
    font-size: 2.5rem;
    text-align: right;
    letter-spacing: 0.2em;
    background-image: linear-gradient(45deg, #06c883, #ebef7b);
}
#wallets-main-label span{
    margin-left: 10px;
}
.wallet-details label {
    font-size: 2.2em;
    font-variant: small-caps;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: center;
    background-image: linear-gradient(45deg, #ebef7b, #06c883);
}
.wallet-features {
    vertical-align: middle;
    align-items: center;
    text-align: right;
    font-size: 1.1em;
    color: darkgray;
}
.wallet-rubric {
    font-family: "Aldrich", sans-serif;
    font-size: 1.5em;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-align: left;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #ebef7b, #06c883);
}
/* *** *** *** USER CLASSES *** *** *** */
.wallet-logo-container {
    align-self: center;
}
.wallet-logo {
    width: 80%;
}
.wmd-link-img {
    margin-bottom: 4px;
    max-width: 70%;
    border: 1px outset #06c883;
    box-shadow: 2px 2px 2px #005c17;
}
.wmd-link-img:hover {
    border: 1px inset #8306c8;
    box-shadow: 3px 3px 3px #06acc8;
}
.user-green, .user-red {
    text-align: left;
    vertical-align: middle;
    align-items: center;
}
.user-green {
    color: #06c883;
}
.user-red {
    color: darkred;
}
.wallet-mobile-downloads {
    margin-top: 4px;
    margin-bottom: 4px;
}
.wallet-browser-link {
    margin-bottom: 5px;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    font-size: 1.3em;
    letter-spacing: 0.1em;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #06c883, #ebef7b);
}
.wallet-browser-link:hover {
    text-decoration: underline;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #8306c8, #06acc8);
}
.wallet-browser-link span{
    margin-right: 4px;
    font-size: 0.9em;
}
.wallet-description {
    font-family: "Share Tech Mono", monospace;
    text-align: justify;
    text-indent: 10px;
    font-size: 1em;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #06c883, #ebef7b);
}
.wallet-description a {
    font-family: "Share Tech Mono", monospace;
    color: #25f9e3;
    text-decoration: none;
}
.wallet-description a:hover {
    color: #7ece4d;
    text-decoration: underline;
}
/* *** *** *** TOKENS STANDARDS CLASSES *** *** *** */
:root {
    --eth1: #8c8c8c;
    --eth2: #505050;
    --eth3: #141414;
    --bsc: #f4e94f;
    --tron: #fe0000;
    --btc: #db7c09;
    --erd: #25f9e3;
    --cerc: #7ece4d;
    --spl: #5433d5;
    --ibc: #0378c5;
}
.erc {
    border: 1px inset var(--eth2);
    box-shadow: 0 0 5px inset var(--eth1);
    color: var(--eth1);
}
.bep {
    border: 1px inset var(--bsc);
    box-shadow: 0 0 4px inset var(--bsc);
    color: var(--bsc);
}
.trc {
    border: 1px inset var(--tron);
    box-shadow: 0 0 4px inset var(--tron);
    color: var(--tron);
}
.btc {
    border: 1px inset var(--btc);
    box-shadow: 0 0 4px inset var(--btc);
    color: var(--btc);
}
.erd {
    border: 1px inset var(--erd);
    box-shadow: 0 0 4px inset var(--erd);
    color: var(--erd);
}
.celo {
    border: 1px inset var(--cerc);
    box-shadow: 0 0 4px inset var(--cerc);
    color: var(--cerc);
}
.sol {
    border: 1px inset var(--spl);
    box-shadow: 0 0 4px inset var(--spl);
    color: var(--spl);
}
.atom {
    border: 1px inset var(--ibc);
    box-shadow: 0 0 4px inset var(--ibc);
    color: var(--ibc);
}
.wallet-compatibility {
    margin: 2px 2px;
    padding: 4px 0;
    text-align: center;
}

/* *** *** *** MEDIA QUERIES *** *** *** */
@media screen and (max-width: 1350px) {

}
@media screen and (max-width: 1200px) {
    #wallet-mini-menu {
        display: none;
    }
}
@media screen and (max-width: 992px) {

}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 576px) {

}
@media screen and (max-width: 480px) {
    #wallets-main-label {
        font-size: 1.25em;
    }
    .wallet-rubric {
        font-size: 0.9em;
    }
    #wallet-dispo-tab, #wallet-compat-tab,
    #wallet-compat-tab thead,
    #wallet-compat-tab tbody,
    #wallet-dispo-tab thead tr,
    #wallet-dispo-tab tbody tr {
        margin: 0 auto;
        padding: 0;
    }
    #wallet-dispo-tab thead tr th {
        font-size: 0.5em;
    }
    #wallet-dispo-tab tbody tr td {
        font-size: 0.45em;
    }
    #wallet-compat-tab thead tr th {
        font-size: 0.5em;
        text-align: right;
        vertical-align: top;
    }
    #wallet-compat-tab tbody tr td {
        font-size: 0.4em;
    }
    .tst {
        font-size: 0.3em;
    }
    .wallet-container {
        transform: skew(0deg,0deg);
    }
    .wallet-details label {
        font-size: 1.2em;
    }
    .wallet-features {
        font-size: 0.8em;
    }
    .wallet-browser-link {
        font-size: 0.8em;
    }
    .wallet-description {
        font-size: 0.75em;
    }
    .erc, .bep, .trc, .btc, .erd, .celo, .sol, .atom {
        font-size: 0.5em;
    }
}
@media screen and (max-width: 360px) {

}