.copets_Timeline{
max-width: 480px;
}

.plan, 
.datetimeLine, 
.dateScale, 
.timeScale, 
.timeline,
.controller{
    margin: 0 auto;
    position: relative;
padding-left: 0;
}

.timeline{
margin: 0 auto;
overflow: hidden;
}

.timeScaleInner{
    text-align: center;
}

.console{
display: flex;
justify-content: space-around;
}
.time_btn{
margin: 0;
background-color: #0BA35C;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
border: none;
box-shadow: 
rgba(0, 0, 0, 0.24) 0px 3px 8px, 
rgba(0, 0, 0, 0.24) 0px 3px 8px, 
rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.time_btn:hover{
background-color: #0a884d;
}
.time_select{
text-align: center;
}
.driver{
display: flex;
flex-direction: column;
}

.order_color{
    display: flex;
    justify-content: center;
    gap: clamp(5px, calc( 3vw + 5px ), 30px);
    padding-right: 10px;
}
.blue, .rred, .grey, .white{
position: relative;
font-size: clamp(12px, calc(3vw + 2px), 14px);


}
.blue::before,
.rred::before,
.grey::before,
.white::before{
    content: "";
    width: 6px;
    height: 15px;
    position: absolute;
    border-radius: 3px;
    left: -9px;
}
.blue::before{background: #0bd;}
.rred::before{background: #f00;}
.grey::before{background: #ccc;}
.white::before{border: solid 1px #ccc;}

div.datetimeLine {
    display: flex;
    justify-content: space-between;
    height: 15px;
}



div.dateScale {
    height: 15px;
    float: left;
width: auto !important;
margin: 0;
}
div.dateScaleInner {
    overflow: hidden;
    height: 15px;
}

div.timeScale {
    height: 15px;
    width: 8vw;
    float: left;

}
div.timeScaleInner {
    overflow: hidden;
    border-color: #CCCCCC;
    border-width: 0 1px 0 0;
    border-style: solid;
    height: 15px;
}

div.timeline {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px 0 1px 1px;
    font-size: 1px;
    height: 22px;
    display: flex;
    justify-content: space-between;

}
div.timeline div.timelineCell {
    font-size: 1px;
    height: 22px;
    width: 1.83vw;
    float: left;
}
div.timelineCellInner.dotted {
    border-color: #CCCCCC;
    height: 22px;
    border-width: 0 1px 0 0;
    border-style: dotted;
}
div.timelineCellInner.solid {
    border-color: #CCCCCC;
    height: 22px;
    border-width: 0 1px 0 0;
    border-style: solid;
}

div.timelineCellInner.selected {
    background-color: #0bd;
}
div.timelineCellInner.vacant {
    background-color: #FFFFFF;
}
div.timelineCellInner.reserved {
    background-color: #f00f00;
    cursor: no-drop;
}
div.timelineCellInner.outside {
    background-color: #cccccc;
    cursor: no-drop;
}

div.scheduleBoard {
    position: relative;
}
div.schedule {
    background-color: #FFFFE5;
    border: 1px solid #202F55;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
}
div.schedule div.scheduleCaption {
    padding: 2px;
}
div.schedule div.scheduleLeft {
    cursor: w-resize;
    font-size: 1px;
    float: left;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 4px;
}
div.schedule div.scheduleRight {
    cursor: e-resize;
    font-size: 1px;
    float: right;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 4px;
}
div.handle {
    background-color: #202F55;
    font-size: 1px;
    height: 12px;
    width: 2px;
    margin-top: 5px;
    margin-left: 1px;
    margin-right: 1px;
}
div.controller {
    position: relative;
    padding-top: 10px;
    clear: both;
    padding-left: 10px;
display: block;
}
div.controller form {
    line-height: 1.5em;
    vertical-align: text-bottom;
}
div.submitForm {
    clear: both;
    text-align: left;
    position: relative;
    padding-top: 10px;
}


.stationContainer.all_btn{
    width: fit-content ;
}
.popUpStationInfo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border: #ccc solid 2px;
    border-radius: 10px;
    padding: 10px;
    bottom: 70px;
    z-index: 2;
    height: fit-content;
    width: 70%;
    min-width: 210px;
    max-width: 300px;
}
.popUpStationInfo p{
    color: red;
    margin: 0;
    font-weight: bold;
    font-size: clamp(10px, calc(2vw + 2px), 14px);

}
.popUpStationInfo a{
    border-bottom: solid;
    color: #1d5db4;
    margin-top: 10px;

}
.linkConfirm{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}