@charset "utf-8";
/*錯誤提示框*/
label.error {color:#ffffff;background-color:#EE0000;padding:2px 15px;}
input.error {border:solid 1px #EE0000;}

/*調整button*/
.btn, .btn.inverse:hover{color:#1C1C1C; background-color:#FA7700; border-color:inherit;}
.btn:hover, .btn.inverse{color:#2C2C2C; background-color:transparent; border-color:#FA7700;}

#comments input[type="submit"].btna, #comments .btna {
    display: inline-block;padding: 8px 18px;text-decoration: none;
    color: #000;background-color: #FA7700;
    border-color: #A7A7A7;border-radius: 4px;
}
#comments input[type="submit"].btna:hover, #comments .btna:hover {display:inline-block;color:#FFF;background-color:#3F51B5;}

#comments input[type="submit"].btnr, #comments .btnr {
    display: inline-block;padding: 8px 18px;text-decoration: none;
    color: #FFF;background-color: #EE0000;
    border-color: #A7A7A7;border-radius: 4px;
}
#comments input[type="submit"].btnr:hover,#comments .btnr:hover {display:inline-block;color:#FFF;background-color:#3F51B5;}

#comments input[type="submit"].btne, #comments .btne {
    display: inline-block;padding: 8px 18px;text-decoration: none;
    color: #000;background-color: #C7C7C7;
    border-color: #A7A7A7;border-radius: 4px;
}
#comments input[type="submit"].btne:hover, #comments .btne:hover {display:inline-block;color:#FFF;background-color:#EE0000;}

#comments input[type="button"]{padding:12px 20px; border-radius: 4px;}
#comments select{padding:6px 2px; border-radius: 4px;}

/*調整Form裡面的div底高*/
#comments #main div {padding:1px;margin:1px;}
.block{margin-bottom:8px;}
.inpmax {width: 100%;max-width: 600px;}

/*調整用label*/
label.th ,span.th{
    color: #000000 !important;
    background-color: #a7d7ff;
    border-left: 12px solid #FA7700;
    padding: 5px 5px 5px 20px;
    display: inline-block;
    min-width: 140px;
    vertical-align:top;
}
span.thAct {background-color:#d1d1d1;}

.flex {
    display: flex;
    /*align-items: flex-start;*/
}

    .flex span {
        padding: 5px;
        word-break: break-all;
        white-space: normal;
    }
    .flex span.td {
        width:100%;
        /*border:solid 1px #d1d1d1;*/
    }
    .fiex div {
        display: inline-block;
    }

h2.title {
    padding-left: 5px;width:100%;
    background: linear-gradient(to top, #a7e3ff 33%, transparent 50%);
}
/*一級分群*/
.GroupLine {
    padding: 10px 5px;font-size:1.3em;font-weight:bold;
    background: linear-gradient(to top, #A7D7FF 0%, transparent 90%);
}

/*分頁*/
#page span{padding:5px 5px;margin:0 1px;}
#page a{color:#404040;background-color:#F0F0F0; border: #A0A0A0 1px solid;padding:5px 10px;}
#page a:hover{color:#2C2C2C; background-color:#D1FCCE; border-color:#FA7700;padding:5px 10px;}

#filter a{color:#404040;background-color:#F0F0F0; border: #A0A0A0 1px solid;padding:5px 10px;}
#filter a:hover{color:#2C2C2C; background-color:#D1FCCE; border-color:#FA7700;padding:5px 10px;}

.txtReadOnly{background-color:#E8E8E8;}

.tabs {
    display: inline-block;padding: 10px 18px;margin-bottom: 0px;
    text-transform: uppercase;background-color: #E7E7E7;
    border: 1px solid;border-radius: 5px 5px 0 0;
}
.tabs a {color:#000000;}
.tabs a:hover {color:#0000FF;}

.tabs:hover {
    background-color: #A7D7FF;
}

.tabs.on {
    background-color: #A7D7FF;
}

.UserBoxRow {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.5em;
    align-items: start;
}
.UserBoxHead {white-space: nowrap;}
.UserBoxItems {
    display: flex;flex-wrap: wrap;
}
.UserBoxItems span {
    margin: 1px;
    padding: 1px 8px;
    border-radius: 5px;
    background-color: #FFE082;
    white-space: nowrap;
}
.UserBoxItems span.Empty {
    margin: 1px;
    padding: 1px 8px;
    border-radius: 5px;
    background-color: #D0D0D0;
    white-space: nowrap;
}

.RPageBox {
    padding: 1px 5px;
    margin: 0px 3px;
    border-radius: 5px;
    background-color: #ccff99;
}
.OverEDateBox {
    padding: 1px 5px;
    margin: 0px 3px;
    border-radius: 5px;
    color: #FFF;
    background-color: #EE0000;
}

.nowrap    {white-space: nowrap;word-break: keep-all;}
.nowrapdot {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: inline-block;}

.fixID  {width:75px;}
.fixStat{width:90px;}
.fixGO  {width:90px;}
.fixDate{width:120px;}
.fixComd{width:150px;}
.min180 {min-width: 180px;}
.min300 {min-width: 300px;}
.dplist {width:250px;}


.red  {color: #EE0000; !important}
.blue {color: #0000FF;}
.b    {font-weight:bold;}
.hline1 {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
}



/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport {
    width: device-width;
}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:978px) {
    #topbar, #header, #pageintro, #breadcrumb, #shout, .container, .centred, #footer, #copyright {
        max-width: 978px;
    }
}


/* Smartphone + Tablet
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:977px) {
    #topbar, #header, #pageintro, #breadcrumb, #shout, .container, .centred, #footer, #copyright {
        max-width: 90%;
    }

    #header {
        text-align: center;
    }
}
@media screen and (max-width:900px) {
    #mainav ul {
        display: none;
    }
}

/* Daniel Fix Mobile
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px) {
    .scrollable {
        display: block;
        width: 100%;
        margin: 0 0 30px 0;
        padding: 0 0 15px 0;
        overflow: auto;
        overflow-x: scroll;
    }

    .scrollable table {
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }

    .fl_left, .fl_right {
        display: block;
        float: none;
    }

    #mainav {
        margin-top: 15px;
    }
}

@media screen and (max-width:480px) {
    .flex {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .flex span {
        width: 100%;
    }

    label.th, span.th {
        width: 100%;
    }

    .inprwd {
        width: 100%;
    }

    .dplist{
        min-width:0;
        flex:1;
        width:90vw;
    }
}
