p {
    margin: 0;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

/*---------------------------*/
body {
    font: 100% Tahoma, Arial, sans-serif;
    color: #d4d4d4;
    background-color: #000;
    line-height: 120%;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    border: 1px solid #636363;
    flex-direction: column
}

.general-btn:hover {
    background-color: #4d5c7c;
}

.general-btn {
    padding: 3pt 5pt;
    margin-bottom: 2px;
    display: inline-block;
    color: #d7e6df;
    font: 12pt tahoma;
    cursor: pointer;
    border: 1px solid #5b6c91;
    border-bottom-color: #292d37;
    border-right-color: #292d37;
    background-color: #38435a;
    text-decoration: none;
}

.decoration-btn {
    color: white;
    font-weight: 700;
    text-decoration: underline;
    font-size: 16px;
    margin: 3px 0;
}
.decoration-btn:hover {
    color: #fcd330;
    text-decoration: none;
}

.general-btn-bordered {
    font-size: 100%;
    color: #ffffff;
    background: #384355;
    padding: 3px 7px;
    margin: 5px;
    border: 1px solid #676c80;
    width: fit-content;
    cursor: pointer;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.general-btn-bordered:hover {
    background-color: #4d5c7c;
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.general-input {
    font: inherit;
    color: #000000;
    background: #ffffff;
    padding: 4px 10px;
    margin: 5px 0;
    border: 1px solid #676767;
    outline: 0;
}

.delimiter {
    background: url(/images/graphics/h/bg_sp.png) repeat;
    height: 5px;
    width: 100%;
}

.d-flex-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.text-center {
    text-align: center !important;
    width: 100%;
}

.menu {
    background: #2b2f53;
    padding: 2px 0;
}

.menu > li:hover {
    background-color: #525875;
}

.menu > li {
    padding: 3px 10px;
    margin-bottom: 2px;
    background-color: #3a3c53;
    border-top: 1px solid #636363;
    border-bottom: 1px solid #636363;
    cursor: pointer;
}

.menu > li > a {
    color: #f8da73;
    text-decoration: none;
    width: inherit;
    display: block;
}

.main-content {
    background-color: #2b2f53;
}

.intro-head {
    text-align: center;
    background: url(/images/graphics/h/bg_162.png) repeat-x;
    overflow: hidden;
    height: 50px;
    border-bottom: 1px solid #636363;
}

.preview-text-carbon {
    padding: 0 5px;
    border: 1px solid #636363;
    background: url(/images/graphics/h/bg_carb.png) repeat;
    overflow: hidden;
    height: 100%;
    text-align: justify;
}

.preview-text-grey {
    background-color: #3e3e3e;
}

.preview-text-no-bg {
    padding: 5px;
    border: 1px solid #636363;
}

.d-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-1-btn {
    margin: 20px 0;
}

.main-menu > .menu-title {
    background-color: #567180;
    padding: 2px 5px;
    color: #eee;
    margin: 0;
}

.main-menu > .menu-item {
    margin: 2px 0;
    background-color: #3a3c53;
    border-top: 1px solid #636363;
    border-bottom: 1px solid #636363;
}

.main-menu > .menu-item > a:hover, .main-menu > .menu-item > form > button:hover {
    background-color: #525875!important;
}

.main-menu > .menu-item > a {
    display: flex;
    color: #f8da73;
    padding: 4px 5px;
    align-items: center;
    justify-content: flex-start;
}
li > form > button {
    display: flex;
    color: #f8da73;
    padding: 4px 5px;
    align-items: center;
    justify-content: flex-start;
}

.main-menu > .menu-item > a > img {
    margin-right: 5px;
}
.main-menu > .menu-item > form {
    width: 100%;
}
.main-menu > .menu-item > form > button {
    width: 100%;
    background: transparent;
    cursor: pointer;
    border: 0;
    font-size: 16px;

}

.page-title{
    color: #fcd330;
    font-size: 18px;
    font-weight: bold;
    padding: 5px 0;
    text-align: center;
}
.car-list-garage > li{
    display: flex;
    flex-direction: column;
}

.car-list-garage > li > section {
    display: flex;
    padding: 5px 0 0 5px;
}
.car-list-garage > li > aside{
    display: flex;
    flex-direction: column;
    padding: 5px 0 0 5px;

}
.car-list-garage{
    padding: 0!important;
}
.car-list, .car-list-garage {
    padding: 5px;
    background-color: #3e3e3e;
    border-top: 1px solid #636363;
    border-bottom: 1px solid #636363;
    font-size: 14px;
}
.car-list > li{
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
    border-bottom: 1px solid #636363;
}

.car-list > li:last-child {
    border: none;
}

.car-list > li > h3, .car-list-garage > li > section > h3{
    margin: 0;
    color: #ffde28;
}
.car-list > li > section{
    display: flex;
}
.car-list > li > section > aside{
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}
.car-list > li > section > img, .car-list-garage > li > section > img{
    height: 50px;
}
.car-list > li > section > aside > div{
    padding: 10px 0;
}
.car-list > li > section > aside > div > a{
    margin: 0;
}
.car-list > li > section > aside > span{
    line-height: 1;
    margin-bottom: 3px;
}
.gear-item {
    padding: 5px;
    font-size: 16px;
}
.gear-item > h3 {
    margin-bottom: 7px!important;
}
.confirm-form > section{
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 7px;
    background-color: #3F3F3D;
    border-top: 1px solid #636363;
    border-bottom: 1px solid #636363;
    font-size: 16px;
}
.confirm-form > p{
    color: #fcd330;
    font: 110% Arial, sans-serif;
    text-align: center;
    font-weight: bold;
    margin-bottom: 5px;
}
.route-main{
    background-color: #3e3e3e;
    padding: 10px;
    display: flex;
    justify-content: center;
}
.race-wrapper{
    background-color: #3e3e3e;
    padding: 10px;
    border-top: 1px solid #636363;
}
.race-wrapper > section {
    display: flex;
    justify-content: center;
}
.race-wrapper > section > strong{
    margin: 0 5px;
}
.race-avatar{
    height: 50px;
}
.race-wrapper > aside {
    display: flex;
    justify-content: space-evenly;
}
.race-car-1, .race-car-2 {
    height: 60px;
}
.race-car-2{
    transform: rotateY(180deg);
}

/* Race Result Styles */
.race-result-header {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.race-result-title-win {
    color: #4CAF50;
    margin-bottom: 10px;
}

.race-result-title-lose {
    color: #ff0000;
    margin-bottom: 10px;
}

.race-result-title-image {
    width: 120px;
}

.race-segment {
    margin-bottom: 5px;
}

.race-segment-user-time {
    color: #90caf9;
}

.race-segment-label {
    color: #fcd330;
    font-weight: bold;
}

.race-segment-opponent-time {
    color: #f48fb1;
}

.race-finish {
    background-color: #5a5a5a;
    padding: 10px;
}

.race-finish-time {
    color: #90caf9;
    font-weight: bold;
    font-size: 16px;
}

.race-finish-label {
    color: #fcd330;
    font-weight: bold;
    font-size: 16px;
}

.race-finish-opponent-time {
    color: #f48fb1;
    font-weight: bold;
    font-size: 16px;
}

.race-total-time {
    background-color: #3a3a3a;
    padding: 10px;
}

.race-total-time-value {
    color: #90caf9;
    font-weight: bold;
    font-size: 18px;
}

.race-total-time-label {
    color: #fcd330;
    font-weight: bold;
    font-size: 16px;
}

.race-total-time-opponent {
    color: #f48fb1;
    font-weight: bold;
    font-size: 18px;
}

.race-time-difference {
    text-align: center;
    padding: 10px;
}

.race-time-difference-text {
    color: #fcd330;
    font-size: 14px;
}

.race-rewards {
    padding: 15px;
    margin-top: 15px;
    text-align: center;
}

.race-rewards-title {
    color: #fcd330;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}

.race-rewards-money-win {
    color: #4CAF50;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
}

.race-rewards-money-lose {
    color: #f44336;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
}

.race-rewards-money-zero {
    color: #aaa;
    font-size: 14px;
    margin-bottom: 8px;
}

.race-rewards-xp {
    color: #90caf9;
    font-size: 14px;
    margin-bottom: 8px;
}

.race-rewards-xp-zero {
    color: #aaa;
    font-size: 14px;
    margin-bottom: 8px;
}

.race-rewards-stats {
    color: #90caf9;
    font-size: 14px;
}

.race-rewards-stats-empty {
    color: #aaa;
    font-size: 12px;
    margin-top: 5px;
}

.race-actions {
    padding: 20px;
    text-align: center;
}

/* Race History Styles */
.race-history-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #4a4a4a;
}

.race-history-thead {
    background-color: #3a3a3a;
}

.race-history-th {
    padding: 10px;
    text-align: left;
    border: 1px solid #636363;
}

.race-history-th-center {
    text-align: center;
}

.race-history-tbody {
    border-bottom: 1px solid #636363;
}

.race-history-td {
    padding: 8px;
    border: 1px solid #636363;
}

.race-history-td-center {
    text-align: center;
}

.race-history-result-win {
    color: #4CAF50;
    font-weight: bold;
}

.race-history-result-lose {
    color: #f44336;
    font-weight: bold;
}

.race-history-link {
    color: #90caf9;
}

.race-history-pagination {
    margin-top: 20px;
    text-align: center;
}

.race-history-empty {
    text-align: center;
    padding: 20px;
    color: #fcd330;
}
.center-horizontal {
    display: flex;
    align-items: center;
    justify-content: center;
}
.around-horizontal {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.evenly-horizontal {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.column-start {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
}
.column-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.race-result-opponents {
    display: flex;
    justify-content: space-evenly!important;
    margin-bottom: 10px;
}
select {
    font-size: 17px;
    color: #000;
    background: #fff;
    margin-bottom: 10px;
    border: 1px solid #444;
}
.ssub, .csub {
    color: #000;
    font: 12pt tahoma;
    text-align: center;
    cursor: pointer;
    border: 1px solid #fceaa4;
    border-bottom-color: #b59822;
    border-right-color: #b59822;
    background-color: #fcd330;
}
.img-bordered {
    max-width: 50px;
    border: 1px solid #636363;
}
h2 {
    color: #fca222;
    font: 19px Arial, sans-serif;
    font-weight: bold;
    margin: 0;
    padding: 2pt 0pt 4pt 0pt;
}
.stars {
    display: flex;
    gap: 0;
}
.star {
    width: 15px;
    height: 15px;
}
.gear-with-stars {
    display: flex;
    flex-direction: column;
}
.gear-with-stars > img {
    max-width: 70px;
}
.nickname:hover {
    color: #fcd330;
}
.avatar {
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-bottom: 10px;
}
.profile-point {
    display: flex;
    gap: 5px;
    margin-bottom: 8px;
    align-items: center;
}