* {
    box-sizing: border-box;
}

html {
    background-color: black;
    margin: 0;
    padding: 0;
}

header {
    color: white;
    background-color: rgb(77, 5, 143);
    text-align: center;
    height: 8vw;
    font-size: 1vw;
    margin: 0;
    padding: 0;

}

header .container-fluid {
    height: 100%;
}

header .row {
    height: 100%;
}

.header-item {
    height: 100%;
    overflow: hidden;
}

.header-item-name {
    font-size: 1.4em;
    text-align: center;
    height: 30%;
    display: flex;
    justify-content: center;
    align-items: end;
    overflow: hidden;
    color: yellow;
    font-weight: 800;

}

.header-item-value {
    font-size: 2.5em;
    height: 47%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 110%;
    font-weight: 700;
}

.prev-record {
    font-size: 1.3em;   
    color:aquamarine;
    height: 23%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    line-height: 110%;
    font-weight: 700;
    padding: 0;
    margin: 0;

}


.remaining-time-button {
    font-size: 1em;
    height: 23%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    line-height: 110%;
    font-weight: 700;
    padding: 0;
    margin: 0;

}



.remaining-time-button .btn {
    color: aquamarine;
}



.aside-main {
    display: flex;
    overflow: hidden;
}

:root {
    --aside-height: calc(100vh - 8vw);
    --aside-ranking-height: calc((100vh - 8vw)*0.75);
    --aside-setting-height: calc((100vh - 8vw)*0.25);
    --aside-ranking-item-height: calc((100vh - 8vw)*0.09);
    --aside-ranking-medal-font-size: calc((100vh - 8vw)*0.053);
    --aside-ranking-racer-font-size: calc((100vh - 8vw)*0.037);
    --aside-ranking-record-font-size: calc((100vh - 8vw)*0.026);
    --aside-setting-font-size: calc((100vh - 8vw)*0.02);
}

aside {
    width: 20vw;
    height: var(--aside-height);
    background-color: rgb(0, 0, 0);
    color: white;
    padding-top: 5px;
    margin: 0;
}




.ranking {
    height: var(--aside-ranking-height);
    overflow: overlay;
}

.ranking-item {
    height: 2.5vw;
    overflow: hidden;
    margin-bottom: 3.5px;
}

.ranking-item .btn-dark,
.ranking-item .btn-warning {
    width: 100%;
    border-radius: 0;
    text-align: right;
    height: 100%;
    font-weight: 700;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px;
}



.ranking-medal {
    width: 13%;
    /* font-size:var(--aside-ranking-medal-font-size); */
    font-size: 2.5vw;
    text-shadow: 2px 2px 2px grey;
    padding: 0;
    text-align: center;
}

.ranking-racer {
    /* font-size:var(--aside-ranking-racer-font-size); */
    font-size: 1.5vw;
    flex: 1;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-record {
    width: 30%;
    /* font-size: var(--aside-ranking-record-font-size); */
    font-size: 1.2vw;
    text-align: center;
}

.setting {
    background-color: blue;
    height: var(--aside-setting-height);
    padding: 0.3em;
    margin: 0;

}


#setting-title {
    text-align: center;
    font-size: 1.2vw;
}

#setting-title .btn {
    padding: 1px;
    margin: 1px;
    ;
    font-size: 1.2vw;

}

#setting-list li {
    font-size: 1vw;
    margin: 0;
    padding: 0;
    line-height: 120%
}




main {
    color: white;
    background-color: rgb(0, 0, 0);
    width: 80vw;
    margin: 0;
    display: flex;
    position: relative;
}

.main-pannel {
    width: 66vw;
    margin: 0;
    position: relative;
    transition: width 0.3s ease;
}

.main-pannel.expanded {
    width: 80vw;
}

#logs-toggle-btn {
    position: absolute;
    right: 15vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    background-color: rgb(44, 44, 44);
    color: white;
    border: none;
    padding: 10px 5px;
    cursor: pointer;
    transition: right 0.3s ease;
}

#logs-toggle-btn:hover {
    background-color: rgb(80, 80, 80);
}

.main-logs.collapsed + #logs-toggle-btn,
#logs-toggle-btn.collapsed {
    right: 0;
}

.main-logs { 
    width: 15vw;
    position: relative;
    color: white;
    background-color: rgb(44, 44, 44);
    height:var(--aside-height);
    transition: width 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}

.main-logs.collapsed {
    width: 0;
    opacity: 0;
}

.main-nav {
    display: flex;
    justify-content: space-between;
    /* background-color:black; */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}  

.main-nav-time {
    width: 200px;
    background-color: black;
    text-align: center;
    font-size: 14.5px; 

}


.main-window {
    /* width: 80vw; */
    height: var(--aside-height);
}


.main-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    text-align: center;
}

.modal {
    color: black;
}

#pills-setting {
    line-height: 200%;
} 

#remainingTime {
    height: 30px;
}




/* 팀 리스트 스타일 */
#racerList {
    list-style-type: none;
    /* 기본 목록 스타일 제거 */
    padding: 0;
}

#racerList li {
    background-color: #f0f0f0;
    /* 목록 배경색 */
    border: 1px solid #ddd;
    /* 테두리 */
    margin-top: 5px;
    /* 상단 여백 */
    padding: 8px;
    /* 내부 여백 */
    display: flex;
    /* Flexbox 레이아웃 */
    justify-content: space-between;
    /* 아이템 간격 조정 */
    align-items: center;
    /* 수직 중앙 정렬 */
}

/* 입력 필드와 버튼 스타일 */
#racerNameInput,
#addRacerBtn {
    padding: 10px;
    margin: 5px 0;
}

#addRacerBtn {
    background-color: #4CAF50;
    /* 버튼 색상 */
    color: white;
    /* 텍스트 색상 */
    border: none;
    /* 테두리 제거 */
    cursor: pointer;
    /* 커서 스타일 */
}

#addRacerBtn:hover {
    background-color: #45a049;
    /* 호버 시 색상 변경 */
}

/* 삭제 버튼 스타일 */
#racerList button {
    background-color: #f44336;
    /* 버튼 색상 */
    color: white;
    /* 텍스트 색상 */
    border: none;
    /* 테두리 제거 */
    cursor: pointer;
    /* 커서 스타일 */
    padding: 5px 10px;
    /* 내부 여백 */
}

#racerList button:hover {
    background-color: #d73833;
    /* 호버 시 색상 변경 */
}

.timer-window {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    /* flex-wrap: wrap; */
    flex-direction:column;
    position: relative;
}

.timer-window > * {
    position: relative;
    z-index: 2;
}

.window-body {
    width: 100%;
    font-size: 13vw;
    font-weight: 800;
    text-align: center;
    margin: 0 auto;
    /* background-color:red; */
}

.timer-window-current-record{
    height: 80%;
    padding: 5vw 0;
}

.timer-window-prev-record {
    width: 100%;
    text-align: center;
    color: aquamarine;
    font-weight: 700;
    font-size: 2.5vw;
    line-height: 1.2;
    height: 3.2vw;
    overflow: hidden;
    margin-top: -7vw;
    margin-bottom: 3vw;
}

.window-footer {
    width: 100%;
}

#ready-control {
    display: flex;
    justify-content: end;
    padding: 0 5vw;
}

#driving-control {
    display: flex;
    justify-content: space-between;
    padding: 0 5vw;
}

#offtrack-control {
    display: flex;
    justify-content: space-between;
    padding: 0 5vw;
}


.change-effect-yellow {
    animation: colorChangeYellow 1s ease-in-out;
}

.change-effect-gray {
    animation: colorChangeGray 1s ease-in-out; 
}

@keyframes colorChangeYellow {

    0%,
    100% {
        background-color: transparent;
    }

    50% {
        background-color: #ffcc00;
        /* 화려한 색상 예시 */
    }
}

@keyframes colorChangeGray {

    0%,
    100% {
        background-color: transparent;
    }

    50% {
        background-color: #6c6c6c;
        /* 화려한 색상 예시 */
    }
}

#status-value {
    font-size: 2.2em;
}




.logs-title{
  font-size:1.2vw;
  text-align: center;
  font-weight:700;
  display:flex;
  justify-content: space-around;
  align-items: center;;
}

.logs-list{
    height:100%;
    overflow:auto;
}


.log-item{
    position:relative; 

    font-size:1vw; 
    margin:0.5em;
}

.log-item hr{
    margin:0;
    padding:0;
}

.log-item-row{
    width:100%;
    margin:0;
    padding:0;
    font-size:0.8em; 

    display:flex;
}

.log-item-row div{
    margin:0 0.3em;
}


.log-item-delete{
    color:red;
    position:absolute;
    bottom:0;
    right:0;
    background-color: inherit;
}

.log-item-racer, .log-item-record{
  font-weight:900;
}

#download-logs-button{
    background-color:inherit; 
    color:gainsboro;
    font-size:0.8vw;
}

#log-delete-btn{
    font-size:0.9vw;
    color:red;
    display:flex;
    align-items: center;
}