/* Global */

* {
    box-sizing: border-box;
}


body {

    margin:0;
    padding:0;
    background:#f4f6f8;
    color:#222;
    font-family:Arial, Helvetica, sans-serif;

}


.container {

    width:100%;
    max-width:1100px;
    margin:auto;
    padding:20px;

}


/* Text */

h1,
h2,
h3,
h4,
p,
label {

    color:#222;

}


h1 {

    font-size:32px;

}


h2 {

    font-size:24px;

}


p {

    font-size:16px;
    line-height:1.5;

}



/* Links */

a {

    color:#1976d2;
    text-decoration:none;

}


a:hover {

    text-decoration:underline;

}



/* Cards */

.dashboard-card,
.holding {

    background:#ffffff;
    color:#222;
    padding:20px;
    margin:15px 0;
    border-radius:12px;
    box-shadow:0 3px 10px rgba(0,0,0,.12);

}



/* Forms */

form {

    background:#ffffff;
    color:#222;
    padding:20px;
    border-radius:10px;

}


input {

    background:#ffffff;
    color:#222;
    padding:12px;
    border:1px solid #ccc;
    border-radius:6px;
    font-size:16px;

}


input:focus {

    outline:none;
    border-color:#1976d2;

}



/* Buttons */

button {

    padding:12px 20px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-size:16px;

}


button:hover {

    opacity:.9;

}



.search-button {

    background:#1976d2;
    color:white;

}


.buy-button {

    background:#26a69a;
    color:white;

}


.sell-button {

    background:#ef5350;
    color:white;

}



/* Chart button */

.chart-button {

    display:inline-block;
    background:#1976d2;
    color:white;
    padding:10px 15px;
    border-radius:6px;

}


.chart-button:hover {

    background:#125aa0;
    text-decoration:none;

}



/* Profit / Loss */

.green {

    color:#008000;

}


.red {

    color:#d00000;

}



/* Tables */

table {

    width:100%;
    border-collapse:collapse;
    background:white;

}


th {

    background:#1976d2;
    color:white;
    padding:12px;

}


td {

    padding:12px;
    color:#222;
    border-bottom:1px solid #ddd;

}



/* Mobile */

@media(max-width:700px){


    .container {

        padding:15px;

    }


    h1 {

        font-size:24px;

    }


    h2 {

        font-size:20px;

    }


    input {

        width:100%;

    }


    button {

        width:100%;
        margin-top:10px;

    }


    .chart-button {

        display:block;
        text-align:center;
        width:100%;
        margin-top:10px;

    }

}