.odd-readmore-block {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding-top: 8px;
}

.odd-readmore-item {
    display: inline-block;
}

.odd-readmore-item a {
    text-decoration: none;
}
.odd-readmore-block a {
    text-decoration: none;
}
/*button css setting begin */
.odd-basic-button {
    border: 0;
}

.odd-button {
    border-radius: 5px;
    font-size: 95%;
    margin-block-end: 8px;
    margin-block-start: 8px;
    padding-block-start: 4px;
    padding-block-end: 4px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: 6px;
    margin-right: 6px;
    display: inline-block;
    cursor: pointer;
}

@media only screen and (max-width:601px) {
    .odd-button {
        text-align: center;

    }
}
.odd-button-notallow {
    background-color: var(--odd-disable) ;
    color: var(--odd-light) !important;
    border: transparent !important;
}
.odd-tags-news-h-items .odd-button-notallow, .odd-tags-function-items .odd-button-notallow {
    cursor: not-allowed !important;
}
.odd-button-red {
    background-color: var(--odd-logout) ;
    color: var(--odd-light) !important;
    border: transparent !important;
}
.odd-button-red-line {
    background-color:transparent ;
    color: var(--odd-logout)!important;
    border: var(--odd-logout) 1px solid !important;
}
.odd-button-indigo {
    background-color: #3f51b5 ;
    color: var(--odd-light) !important;
    border: transparent !important;
}
.odd-button-red-hover:hover {
    background-color:transparent ;
    color: var(--odd-logout) !important;
    border:1px solid var(--odd-logout) !important;
}
.odd-button-green {
    background-color: var(--odd-editor) ;
    color: var(--odd-light) !important;
    border: transparent !important;
}
.odd-button-line-blue-1:hover {
    background-color: white !important;
    color: var(--odd-login) !important;
    border: 1px solid var(--odd-login) !important;
    
}
.odd-button-line-blue-1{
    background-color: var(--odd-login) !important;;
    color: var(--odd-light) !important;
    border: 1px solid var(--odd-login) !important;
    
}
.odd-button-line-blue {
    background-color: transparent ;
    color: var(--odd-login) !important;
    border: 1px solid var(--odd-login) !important;
    
}
.odd-button-line-blue:hover{
    background-color: var(--odd-login) !important;;
    color: var(--odd-light) !important;
    border: 1px solid var(--odd-login) !important;
    
}
.odd-button-mo-white {
    background-color: transparent ;
    color: var(--odd-light) !important;
    border: 1px solid var(--odd-light) !important;
    
}
.odd-button-line-white {
    background-color: transparent ;
    color: white !important;
    border: 1px solid var(--odd-login) !important;
    
}
.odd-button-line-white:hover {
    background-color: white !important ;
    color: var(--odd-dark) !important;
    border: 1px solid var(--odd-login) !important;
    
}
.odd-button-line-red {
    background-color: transparent;
    color: var(--odd-logout) !important;
    border: 1px solid var(--odd-logout) !important;
}
.odd-button-line-red:hover {
    background-color: var(--odd-logout);
    color: var(--odd-light) !important;
    border: 1px solid var(--odd-logout) !important;
    white-space: ;
}
.odd-button-line-gray-none {
    background-color: transparent ;
    color: var(--odd-dark) !important;
    border: 1px solid var(--odd-disable) !important;
}
.odd-button-line-gray {
    background-color: transparent ;
    color: var(--odd-dark) !important;
    border: 1px solid var(--odd-disable) !important;
}
.odd-button-line-gray:hover {
    background-color: var(--odd-disable) ;
    color: var(--odd-light) !important;
    border: 1px solid var(--odd-disable) !important;
}
.odd-button-search {
    background-color:var(--odd-search) !important;
    color: var(--odd-light) !important;
    border: 1px solid var(--odd-search) !important;
}
.odd-button-search:hover {
    background-color:transparent !important;
    color: var(--odd-dark) !important;
    border: 1px solid var(--odd-search) !important;
}
.odd-button-blue {
    background-color: var(--odd-login) ;
    color: var(--odd-light) !important;
    border: transparent !important;
}
.odd-button-blue-line {
    background-color: transparent;
    color: var(--odd-login) !important;
    border: var(--odd-login) 1px solid !important;
}
.odd-button-blue-hover:hover {
    background-color:transparent ;
    color: var(--odd-login) !important;
    border: 1px solid var(--odd-login) !important;
}
.odd-button-gray {
    background-color: var(--odd-disable) ;
    color: var(--odd-light) !important;
    border: 1px solid transparent !important;
}
.odd-button-gray:hover {
    background-color: transparent ;
    color: var(--odd-dark) !important;
    border: 1px solid var(--odd-disable) !important;
}
.odd-returnlist-button {
    background-color: transparent;
    color: var(--odd-returnlist);
    border: 1px var(--odd-returnlist) solid;
}
.odd-returnlist-button:hover {
    background-color: var(--odd-returnlist);
    color: var(--odd-light);
    border: 1px var(--odd-returnlist) solid;
}
.odd-menu-button {
    background-color:transparent !important;
    color: var(--odd-light) !important;
    border: none; !important;
}

.odd-search-button-red {
    background-color: transparent;
    color: var(--odd-red) !important;
    /* border: 1px solid var(--odd-red); */
}
.odd-search-button-red:hover {
    background-color: transparent;
    color: var(--odd-darkblue) !important;
    /*border: 1;*/
}

.odd-clean-button-green {
    background-color: var(--odd-text-light);
    color: var(--odd-metro-dark-green) !important;
    border: 1px solid var(--odd-metro-dark-green);
}

.odd-clean-button-green:hover {
    background-color: var(--odd-metro-light-green);
    color: var(--odd-text-dark) !important;
    border: 1px solid var(--odd-metro-light-green);
}

.odd-upload-button-blue {
    background-color: transparent !important;
    color: var(--odd-upload) !important;
    border: 1px solid var(--odd-upload) !important;
}

.odd-upload-button-blue:hover {
    background-color: var(--odd-upload) !important;
    color: var(--odd-light) !important;
    border: 1px solid var(--odd-upload) !important
}

.odd-save-button-blue {
    background-color: var(--odd-save) !important;
    color: var(--odd-light) !important;
    border: 1px solid transparent !important;
    
}

.odd-save-button-blue:hover {
    background-color: transparent !important;
    color: 
    var(--odd-dark) !important;
    border: 1px solid var(--odd-save) !important
}
.odd-save-button-blue-selected {
    background-color: var(--odd-save) !important;
    color: var(--odd-light) !important;
    border: 1px solid transparent !important;
}
.odd-save-button-blue-select {
    background-color: transparent !important;
    color: 
    var(--odd-dark) !important;
    border: 1px solid var(--odd-save) !important
}
.odd-print-button {
    background-color: transparent !important;
    color: var(--odd-text-dark) !important;
    border: 1px solid var(--odd-flat-wet-asphalt) !important;
}

.odd-print-button:hover {
    background-color: var(--odd-flat-wet-asphalt) !important;
    color: var(--odd-text-light) !important;
    border: 1px solid var(--odd-flat-wet-asphalt) !important
}

.odd-preview-button-metrodarkred {
    background-color: none !important;
    color: var(--odd-text-dark) !important;
    border: 1px solid var(--odd-metro-dark-red) !important;

}

.odd-preview-button-metrodarkred:hover {
    background-color: var(--odd-metro-dark-red) !important;
    color: var(--odd-text-light) !important;
    border: 1px solid var(--odd-metro-dark-red) !important
}

.odd-cancel-button-gray:hover {
    background-color: transparent !important;
    color: var(--odd-dark) !important;
    border: 1px solid var(--odd-arrow) !important;

}

.odd-cancel-button-gray {
    background-color: var(--odd-arrow) !important;
    color: var(--odd-light) !important;
    border: 1px solid transparent !important
}
.odd-home-button:hover {
    background-color: var(--odd-booking-maincolor)!important;
    color: var(--odd-text-light) !important;
    border: 1px solid var(--odd-booking-maincolor) !important;
}
.odd-home-button {
    background-color: transparent !important;
    color: var(--odd-booking-maincolor) !important;
    border: 1px solid var(--odd-booking-maincolor) !important;
}
.odd-home-button-light {
    background-color: none!important;
    color: var(--odd-light) !important;
    border: none !important;
}
.odd-return-button-gray {
    background-color: var(--odd-ios-gray) !important;
    color: var(--odd-text-light) !important;
    border: 1px solid var(--odd-ios-gray) !important;

}

.odd-return-button-gray:hover {
    background-color: var(--odd-ios-background) !important;
    color: var(--odd-text-dark) !important;
    border: 1px solid var(--odd-ios-background) !important
}

.odd-returnlist-button-gray {
    background-color: var(--odd-food-olive) !important;
    color: var(--odd-text-light) !important;
    border: 1px solid var(---odd-food-olive) !important;

}

.odd-returnlist-button-gray:hover {
    background-color: var(--odd-food-paer) !important;
    color: var(--odd-text-dark) !important;
    border: 1px solid var(--odd-food-paer) !important
}

.odd-login-button-gray {
    /*background-color: var(--odd-food-olive) !important;*/
    color: var(--odd-light) !important;
    /*border: 1px solid var(---odd-food-olive) !important;*/

}

.odd-login-button-gray:hover {
    /*background-color: var(--odd-food-paer) !important;*/
    color: var(--odd-text-dark) !important;
    /*border: 1px solid var(--odd-food-paer) !important*/
}

.odd-readmore-button-blue {
    background-color: transparent !important;
    color: var(--odd-dark) !important;
    border: 1px solid var(--odd-readmore) !important;
}

.odd-readmore-button-blue:hover {
    background-color: var(--odd-readmore) !important;
    color: var(--odd-light) !important;
    border: 1px solid var(--odd-readmore) !important
}

.odd-download-button-red {
    background-color: var(--odd-light);
    color: var(--odd-download) !important;
    border: 1px solid var(--odd-download);

}

.odd-download-button-red:hover {
    background-color: var(--odd-download);
    color: var(--odd-light) !important;
    border: 1px solid var(--odd-download);;
}

.odd-booking-button-red {
    background-color: var(--odd-text-light) !important;
    color: var(--odd-red) !important;
    border: 1px solid var(--odd-red);

}

.odd-booking-button-red:hover {
    background-color: var(--odd-red) !important;
    color: var(--odd-text-light) !important;
    border: 1;
}
.odd-arrow-left, .odd-arrow-right {
    font-size: 150%;
    background-color: none !important;
    color: var(--odd-arrow) !important;
    border: none;
}
.odd-arrow-left:hover, .odd-arrow-right:hover {
    font-size: 150%;
    background-color: var(--odd-arrow) !important;
    color: var(--odd-dark) !important;
    border: none;
}
/* 完整的 div a href 閱讀更多 sample as below
<div class="odd-readmore">
    <a href="#" title="#">閱讀更多</a>
</div>
*/

.odd-readmore {
    display: grid;
    align-items: start;
    align-content: space-around;
    justify-content: end;
    justify-items: end;
    padding-bottom: 16px;
    padding-right: 16px;
}
.odd-button-dot {
    width: 5px;
    height: 5px;
    border-radius: calc(30px / 2);
}

.odd-button-no {
    display: block-inline;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: calc(30px / 2);
    color: white;
    text-align: center !important;
    padding-top: 0.25vh;
    padding-bottom: 0.25vh;
}

/* icon settings begin */
.odd-icon-local-settings {
    padding-left: 8px;
}
.odd-icon-local-settings-right {
    padding-right: 8px;
}
.fa-times {
    color: var(--odd-ios-gray);
    font-size: 150%;
}

.fa-times:hover {
    color: var(--odd-red);
}

.fa-link {
    color: var(--odd-ios-gray);
    font-size: 100%;
}

.fa-link :hover {
    color: var(--odd-red);
}

.fa-times-circle {
    color: var(--odd-red);
    font-size: 120%;
    padding-left: 16px
}

.fa-times-circle:hover {
    color: var(--odd-flat-wet-asphalt);
    font-size: 120%;
    padding-left: 16px
}

.fa-plus-circle {
    color: var(--odd-flat-wet-asphalt);
    font-size: 150%;
}

/*.fa-pencil-square-o {
    
    color: var(--odd-metro-dark-blue);
    font-size: 150%;
}

.fa-pencil-square-o:hover {
    
    color: var(--odd-red);
    font-size: 150%;
}*/
.fa-home {
    font-size: 120%;
}
.fa-cog:hover {
    color: var(--odd-red) !important;
}
.fa-info-circle:hover {
    cursor: help;
}
.fa-info-circle {
    color: var(--odd-logout);
}
/* .fa-print {
    列印
    color: var(--odd-red);
    font-size: 150%;
} */

/* .fa-print:hover {
    列印
    color: var(--odd-red);
    font-size: 120%;
} */

/* icon settings End */

/* 線條樣式 Begin */
.odd-line-ios-gray {
    border-block-end: var(--odd-ios-gray) 1px solid;

}

/* 線條樣式 End */
@media only screen and (max-width:601px) {
    .odd-icon-local-settings {
        padding-left: 0px;
    }
}