@import "custom-toggle-switch.css";

.controls-container {
    display: grid;
    grid-auto-flow: column;
    justify-content: end;
}

.controls-container .control-button {
    display: grid;
    grid-template-columns: 25% 75%;
    grid-auto-flow: column;
    align-items: center;
    min-width: 130px;
    cursor: pointer;
}

.controls-container .control-button:active {
    transform: translateY(1px) scale(.99);
    transition: transform .2s;
}

.controls-container .control-button img {
    width: 24px;
}

.controls-container .control-button p {
    margin: 0;
    font-size: 18px;
    font-family: Roboto;
    color: var(--primary-font-color);
}

.controls-container .switch-container {
    margin: 0;
}

.account-info-container .account-info-header-container {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 15% 25% 25% 15% 10% 10%;
    margin-top: 28px;
}

.account-info-container .account-info-header-container .account-info-header {
    margin: 0;
    padding-bottom: 8px;
    font-size: 18px;
    font-family: Roboto;
    color: var(--primary-font-color);
    border-bottom: solid 2px var(--light-color);
}

.account-info-container .account-info-values-container {
    display: grid;
    grid-auto-flow: column;
    margin-top: 12px;
    grid-template-columns: 15% 25% 25% 15% 10% 10%;
}

.account-info-container .account-info-values-container p {
    margin: 0;
    font-size: 16px;
    font-family: Roboto;
    color: var(--primary-font-color);
}