*{
    margin: 0;
    padding: 0;
}
/* 公用調整 */

input, textarea{
    background-color: #e9ecef;
}
option{
    background-color: #fff;
}
.input-group{
    /* width: 200px !important; */
}
.input-password{
    width: 100% !important;
}
ul{
    margin-bottom: 0px !important;
}
small{
    /* width: 200px; */
    /* text-align: end; */
}
input[type="radio"], input[type="checkbox"]{
    width: 18px;
    height: 18px;
    cursor: pointer;
    /* position: relative; */
}
div[type="button"]{
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    /* -webkit-border-radius: 0px; */
  }
input[type="radio"]{
    /* top: -3px; */
}
.radioArea{
    display: flex;
    flex-wrap: wrap;
}
.radioArea .detail-area {
    flex:0 0 100%;
}
.table_grid .radioArea{
    display: block;
}
.table_grid input[type="radio"]{
    /* top: 3px !important; */
}
@media (max-width: 768px){
    .table_grid input[type="radio"]{
        top: -2px!important;
        margin-right: 5px;
    }
    input[type=checkbox]{
        top: -3px!important;
    }
}
input[type='radio']+label, .check_mark +label{
    padding-left: 10px;
    vertical-align: text-bottom;
}
input[type='radio']:after {
    width: 18px;
    height: 18px;
    border-radius: 15px;
    position: relative;
    background-color: rgba(26, 56, 96, 0.1);
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid rgba(26, 56, 96, 0.1);
}

input[type='radio']:checked:after {
    width: 18px;
    height: 18px;
    border-radius: 15px;
    position: relative;
    background-color: #fff;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 6px solid rgba(51, 51, 51, 1);
}

input[type=checkbox]:after {
    position: relative;
    width: 18px;
    height: 18px;
    top: 0;
    content: " ";
    background-color: rgba(26, 56, 96, 0.1);
    color: #fff;
    display: inline-block;
    visibility: visible;
    padding: 0px 3px;
    border-radius: 3px;
}

input[type=checkbox]:checked:after {
    font-size: 16px;
    background-color: rgba(51, 51, 51, 1);
}
input[type=checkbox] ~ .check_mark{
    position: absolute;
    left: 5px;
    top: 7px;
}
input[type=checkbox]:checked~ .check_mark{

    border: solid white;
    border-width: 0px 3px 3px 0;
    transform: rotate(45deg);
    width: 7px;
    height: 11px;
}
.cid_logo{
    background-image: url("../image/logo_cid.png");
    background-repeat: no-repeat;
    background-size: contain;
    height: 40px;
}
.checkboxarea{
    display: flex !important;
    vertical-align: sub;
    flex-wrap: wrap;
}
.checkboxarea .detail-area {
    flex:0 0 100%;
}
/* login */
.login_wrap{
    position:absolute;
    left:0;
    top:0px;
    right:0;
    bottom:0;
    background-image: url("../image/home_bg.jpg?t=0321");
    background-size: cover;
    overflow: auto;
}
.login_wrap::before{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:50%;
    content:'';
    background: rgb(255,255,255);
    background: linear-gradient(0, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.5) 100%);
    opacity: 0.5;
}
.login_panel{
    position:relative;

    margin:40px auto;
    width:88%;
}
.login_panel form{
    max-width:330px;
    margin-left:auto;
    margin-right:auto;
}
.login_logo{
    text-align:center;
}
.login_logo img{
    height:64px;
    display:inline-block;
}
.login_logo h1{
    margin:32px auto;
    font-size:22px;
    font-weight: bold;
    color:white;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.65);
}
.signin-form{
    background:white;
    border-radius: 8px;
    padding:24px;
}
.signin-form h3{
    text-align:center;
    font-size:28px;
    color:#192434;
}
.signin-form label{
    font-size:14px;
    color: rgba(27, 43, 65, 0.72);
}
@media (min-height: 750px) {
    .login_panel{
        top:45%;
        transform:translateY(-50%);
    }
}
.g-recaptcha > div{
    position:relative;
    transform:translateX(-50%);
    left:50%;
}

/* header */
.sb-topnav{
    height: 60px !important;
    box-sizing: border-box !important;
}
/* home */
.home_logo{
    height:50px;
}
/* member index */
.front_main_container{
    max-width:960px;
    margin:20px auto;
}
.welcome{
    font-size: 22px;
    font-weight: 600;
    line-height: 27.57px;
}
.survey_list{
    font-size: 26px;
    font-weight: 600;
    line-height: 27.57px;
    color: #FF9000;
}

/* datatable css */
#object_tbl_wrapper {
    border-radius: 10px;
    overflow: hidden;
    background:white;
}
#object_tbl_wrapper table.dataTable {
    margin:0 !important;

}
/* datatable responsive icon */
#object_tbl_wrapper table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child {
    padding-left:20px;
}
#object_tbl_wrapper table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
    top: 50%;
    transform:translateY(-50%);
    left: 5px;
    height: auto;
    width: auto;
    display: block;
    position: absolute;
    color: #333;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: content-box;
    text-align: center;
    text-indent: 0 !important;
    font-size:14px;
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f054";
    line-height: normal;
    background-color: transparent;
    transition-duration: .2s;
}
#object_tbl_wrapper table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before {
    transform:translateY(-50%) rotate(90deg);
}
#object_tbl_wrapper table.dataTable>tbody>tr.child>td.child {
    padding: 5px 20px;
}
table.dataTable tbody{
    background-color: #fff;
}
table.dataTable thead tr th{
    color: #fff;
    background-color: #8d8d8d;
    vertical-align: middle;
}
table.dataTable thead tr th:first-child { border-top-left-radius: 10px; }
table.dataTable thead tr th:nth-child(5)  { border-top-right-radius: 10px; }
table.dataTable tr{
    height: 60px;
}
table.dataTable tr th:nth-child(1), table.dataTable tr th:nth-child(4){padding-right: 0px !important;}
table.dataTable tr td{
    line-height: 30px;
    vertical-align: middle;
}
table.dataTable tr td:nth-child(3) p{ margin-bottom: 0px}
table.dataTable tr .new, table.dataTable tr .userWrite, table.dataTable tr .userHelp,
table.dataTable tr .userDone, table.dataTable tr .review, table.dataTable tr .reviewDone{
    display: inline-block;
    padding: 1px 5px;
    border-radius: 4px;
}
table.dataTable tr .new, table.dataTable tr .userWrite{
    color:#1676F3;
    background-color: rgba(22, 118, 243, 0.1);
}
table.dataTable tr .userHelp{
    color:#F52419;
    background-color:rgba(255, 66, 56, 0.1);
}
table.dataTable tr .userDone, table.dataTable tr .review{
    color:#00A344;
    background-color: rgba(21, 193, 93, 0.1);
}
table.dataTable tr .reviewDone{
    color:#1A293D;
    background-color: rgba(25, 59, 103, 0.05);
}
/* survey node title  */
.node_title{
    position: relative;
    height: 60px;
    border-bottom: 1px solid #e8e8e8;
    padding: 20px 32px;
    font-size: 24px;
    font-weight: 600;
    z-index: 10;
    color: #FF9000;
}
.year_filter_wrap{
    flex:0 0 150px;
}
/* home 前台首頁手機板使用 */
@media (max-width: 1024px){
    .front_main_container{
        margin:0px auto 40px auto;
    }
}

@media (max-width: 768px){
    div.dataTables_wrapper div.dataTables_paginate ul.pagination{
        justify-content: center !important;
    }
    .year_filter_wrap{
        flex:0 0 100px;
    }
}
.authorize{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-size: 14px;
    margin-top:24px;
}
.authorize img{
    width:70px;
    margin-bottom:5px;
}

@media (min-width: 1024px){
    .authorize{
        margin-top:12px;
        flex-direction: row;
        justify-content: flex-end;
    }
    .authorize img{
        margin-bottom:0px;
        margin-right: 10px;
    }
}