div.copets_Timeline {
    /*position: relative;
    height: 155px;
    width: 270px;*/
}


/**
 * .-----------------------------------------------------
 * |datetimeLine ---------------------------------------->
 * | dateScale ------> dateScale ------------------------>
 * |  dateScaleInner |  dateScaleInner                   |
 * |   YYYY/MM/DD    |   YYYY/MM/DD                      |
 *
 */
/* new style*/
.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;
}
.copets_Timeline form{
margin-top: 20px;
}

.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: 30px;
    padding-right: 10px;
}
.blue, .rred, .grey{
position: relative;
}
.blue::before,
.rred::before,
.grey::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;}

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



/* new style end*/




div.dateScale {
    height: 15px;
    float: left;
width: auto !important;
margin: 0;
}
div.dateScaleInner {
    overflow: hidden;
    height: 15px;
}
/**
 * .-----------------------------------------------------
 * |datetimeLine ---------------------------------------->
 * | timeScale ------> timeScale ------> timeScale ------>
 * |  timeScaleInner |  timeScaleInner |  timeScaleInner |
 * |   HH            |   HH            |   HH            |
 *
 */
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;
}
/**
 * .-------------------------------------------------------
 * |timeline ---------------------------------------------->
 * | timelineCell -------------> timelineCell ------------->
 * |  timelineCellInner dotted :  timelineCellInner solid  |
 * |                           :                           |
 * `-------------------------------------------------------
 */
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;
}
/**
 * none       :    ݂   O ̎   
 * selected   :    [ U I     
 * vacant     :  󂫎   
 * reserved   :  \ 񂳂 Ă  鎞  
 * affer-hours:  c Ǝ  ԊO
 */
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;
    /*background-image: url(outside.gif);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: left top;*/
    cursor: no-drop;
}
/**
 * .---------------------------------------------------------.
 * |scheduleBoard                                            |
 * |     .----------------------------------------------.    |
 * |     |schedule                                      |    |
 * |     | scheduleLeft  scheduleCaption  scheduleRight |    |
 * |     |  |handle                            handle|  |    |
 * |     |                                              |    |
 * |     '----------------------------------------------'    |
 * '---------------------------------------------------------'
 */

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;
}