/* ==========================================
   ELITE SOCCER MANAGER DESIGN SYSTEM
   ========================================== */


/* =========================
   PANELS
   ========================= */

.esm-panel,
.esm-panel-wide {

    width: 100%;

    margin: 0 auto;

    background: rgba(15, 15, 15, 0.88);

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 16px;

    padding: 40px;

    box-shadow: 0 0 30px rgba(0,0,0,.45);
}

.esm-panel {
    max-width: 700px;
}

.esm-panel-wide {
    max-width: 1700px;
}

/* =========================
   TITLES
   ========================= */

.esm-title {
    color: white;

    text-align: center;

    font-size: 2.3rem;

    font-weight: bold;

    margin-bottom: 40px;
}

.esm-section-title {
    color: white;

    font-size: 1.25rem;

    font-weight: 600;

    margin-bottom: 20px;
}


/* =========================
   LABELS
   ========================= */

.esm-label {
    display: block;

    color: white;

    font-weight: 600;

    margin-bottom: 8px;
}


/* =========================
   HELP TEXT
   ========================= */

.esm-help-text {
    color: rgba(255,255,255,.75);

    font-size: .9rem;

    line-height: 1.5;
}


/* =========================
   INPUTS
   ========================= */

.esm-input,
.form-control,
.form-select {
    color: #333;

    background: white;

    border-radius: 8px;
}


/* =========================
   PRIMARY BUTTON
   ========================= */

.esm-button-primary {
    width: 100%;

    margin-top: 20px;

    padding: 14px;

    border: none;

    border-radius: 10px;

    background: #d4af37;

    color: black;

    font-size: 1rem;

    font-weight: bold;

    cursor: pointer;

    transition: .2s;
}

.esm-button-primary:hover {
    background: #e6c75a;
}


/* =========================
   SECONDARY BUTTON
   ========================= */

.esm-button-secondary {
    padding: 14px 24px;

    border: 1px solid rgba(255,255,255,.20);

    border-radius: 10px;

    background: rgba(255,255,255,.08);

    color: white;

    cursor: pointer;

    transition: .2s;
}

.esm-button-secondary:hover {
    background: rgba(255,255,255,.15);
}


/* =========================
   TABLES
   ========================= */

.esm-table {
    width: 100%;

    color: white;

    border-collapse: collapse;
}

.esm-table th {
    color: #d4af37;

    font-weight: bold;

    padding: 12px;
}

.esm-table td {
    padding: 10px 12px;

    border-top: 1px solid rgba(255,255,255,.08);
}


/* =========================
   CARDS
   ========================= */

.esm-card {
    background: rgba(15,15,15,.88);

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 14px;

    padding: 24px;

    color: white;
}
/* =========================
   DASHBOARD TILE
   ========================= */

.esm-dashboard-tile {

    background: rgba(15,15,15,.88);

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 16px;

    padding: 30px;

    text-align: center;

    color: white;

    box-shadow: 0 0 30px rgba(0,0,0,.45);

    transition: .2s;
}

.esm-dashboard-tile:hover {

    transform: translateY(-2px);

    border-color: rgba(212,175,55,.35);

    box-shadow: 0 8px 35px rgba(0,0,0,.5);
}

.esm-dashboard-title {

    font-size: 1.3rem;

    font-weight: 600;

    margin-bottom: 25px;
}

.esm-dashboard-value {

    font-size: 3rem;

    font-weight: bold;
}

/* =========================
   DASHBOARD TILE
   ========================= */

.esm-dashboard-tile {

    background: rgba(15,15,15,.88);

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 16px;

    padding: 30px;

    color: white;

    text-align: center;

    box-shadow: 0 0 30px rgba(0,0,0,.45);

    transition: .2s;
}

.esm-dashboard-tile:hover {

    transform: translateY(-2px);

    border-color: rgba(212,175,55,.35);

    box-shadow: 0 8px 35px rgba(0,0,0,.55);
}

.esm-dashboard-title {

    color: white;

    font-size: 1.3rem;

    font-weight: 600;

    margin-bottom: 20px;
}

.esm-dashboard-value {

    color: white;

    font-size: 3rem;

    font-weight: bold;
}