@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;700&display=swap');

*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; /* transition:0.2s all; -webkit-transition:0.2s all; -moz-transition:0.2s all; -o-transition:0.2s all; -ms-transition:0.2s all; */}
html, body{ overflow-x: hidden; }
body{ margin:0; padding:0; font-family: 'Noto Sans TC', sans-serif; font-size:1em; font-weight:400; color:#333; background: #fff; box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -webkit-box-sizing:border-box;}

h1,h2,h3,h4,h5,h6{ margin:0; padding:0; font-weight: 300; line-height: 1em;}

h2{ font-size: 2.25em; }
h3{ font-size: 2em; }
h4{ font-size: 1.438em; }
h5{ font-size: 1.25em; }

h3, h4{ margin-bottom: 10px; }

p{ margin:0; padding:0; line-height: 1.5em; }

img{ max-width: 100% !important; height: auto !important; vertical-align: bottom; }

a{ color:#00aba1; text-decoration:none; transition:0.2s all; -webkit-transition:0.2s all; -moz-transition:0.2s all; -o-transition:0.2s all; -ms-transition:0.2s all;}
a:hover{ color:#007972; text-decoration: none;}
a:focus{ text-decoration: none;}

main{ background: #fff; }

.container{ max-width: 1240px; padding: 0 20px; /* overflow: hidden; */ }
.container.w100{ max-width: 100%; }
.container.w2{ max-width: 1400px; }
.container.w3{ max-width: 951px; }
.container.w3{ max-width: 728px; }
.container.w4{ max-width: 546px; }

/*** LOGIN ***/
.brand_wrap{ width: 100%; height: 100vh; background: #fff; text-align: center; display: table; }
.brand_box{ padding: 0 20px; display: table-cell; vertical-align: middle; text-align: center; overflow: hidden; }
.brand_box h1{ margin-top: 10px; margin-right: -10px; font-size: 2em; font-weight: 300; letter-spacing: 10px; }
.brand_box i{ margin:20px 2px -8px 0; font-size: .875em; font-style: normal; line-height: 1em; letter-spacing: 8.5px; display: block; }
.brand_box h1 span{ margin:15px 5px 0 4px; font-size: .35em; line-height: 1em; letter-spacing: 9px; display: block;}

.login_wrap{ width: 100%; height: 100vh; background: url('../images/bg-login.jpg') center center no-repeat; background-size: cover; text-align: center; display: table; position: relative; }
.login_wrap a{ color: #333; }
.login_wrap a:hover{ color: #007972; }
.login_box{ padding: 0 20px; display: table-cell; vertical-align: middle; text-align: center; }
.login{ width: 100%; max-width: 440px; margin: 20px auto; padding: 30px; background: #fff; border-radius: 10px; overflow: hidden;}
.login h2{ margin-bottom: 20px; padding: 0 0 20px 0; font-size: 1.25em; border-bottom: 1px solid #e6e6e6; }
.login i{ font-size: .875em; position: absolute; top: 17px; left: 10px; }
.login input[type="text"], .login_box input[type="password"]{ width: 100%; padding-left: 30px; padding-right: 10px; border: 0; background: #f6f6f6; border-bottom: 1px solid #ccc; }
.login .checkbox_wrap{ float: left; width: 84px; margin: 30px 10px 0 0; font-size: 1em; font-weight: 300; }
.login .captcha_wrap { float: left; width: 100%; margin-top: 0px; overflow: hidden; }
.login .captcha_wrap img{ float: left; margin-left: 10px; border: 1px solid #ccc; }
.login .captcha_wrap input[type="text"]{ float: left; width: calc(100% - 92px); margin: 0; padding: 8px 10px; }
.login .licenceinfo{ margin-top: 20px; }

.copyright_wrap{ width: 100%; padding: 5px 10px; color: #666; font-size: .813em; background: rgba(0, 0, 0, .75); position: absolute; bottom: 0; left: 0; z-index: 1; overflow: hidden; }
.copyright_wrap a{ color: #666; }
.copyright_wrap a:hover{ color: #00aba1; }
.credit{ float: left;}
.copy{ float: right;}
/*** LOGIN ***/

/*** HEADER ***/
header{ width: 100%; height: 50px; position: fixed; background: #f1f1f1; z-index: 999;}
.header_logo{ float: left; width: 250px; padding:13px 20px 0 20px; /* padding:13px 20px 0 56px; */ color: #fff; font-size: 1em; background: #00aba1; text-align: center; /* background:#00aba1 url(../img/pic-logo_s.png) 20px 10px no-repeat; background-size: auto 30px; */}
.header_toggle{ float: left; width: calc(100% - 0px);}
.btn_func{float: right; height: 100%; margin: 0 !important; padding: 7px 14px; line-height:2.2em; border: 0; border-radius: 0; color: #fff;}
.btn_func .dropdown-menu li a{ text-align: left; }
.btn_func .dropdown-menu li a:focus{ color: #1e2125; background: #e9ecef; }
.btn_toggle{ height: 100%; margin: 0 !important; padding: 7px 20px; line-height:2.2em; border: 0; border-radius: 0; color: #333;}
.btn_toggle:hover{ color: #fff; background: #00aba1;}

.lang{ float: right; height: 38px; margin: 7px 0 0 0 !important; padding: 10px; line-height: 1em; color: #00aba1; background: #fff; border: 1px solid #fff; border-radius: 3px;}

.dropdown-toggle{ margin:-1px 0 0 0 !important; padding:6px 10px 6px 15px; color: #fff; background: #00aba1; border: 1px solid #00aba1;}
.dropdown-toggle:hover{ color: #fff; background: #00aba1; border: 1px solid #00aba1; cursor: pointer;}
.dropdown-menu{ -webkit-transition: none; -moz-transition:  none; -ms-transition:  none; -o-transition:  none; transition:  none; display: none; }

.btn_func01{ float: right; margin:0 0 0 5px;}

.adm_info{ margin-bottom: 10px; padding: 10px; text-align: center; border-bottom: 1px solid #ccc; }
.adm_info i{ font-size: 2em; }
.adm_info p{ font-size: 1em; line-height: 1em; }
.adm_info span{ margin: 7px 0 10px 0; font-size: .75em; line-height: 1em; display: block; }
/*** /HEADER ***/

/*** FRAME ***/
main { margin: 50px 0 0 0; padding:0;transition:0.2s all; -webkit-transition:0.2s all; -moz-transition:0.2s all; -o-transition:0.2s all; -ms-transition:0.2s all;}
main.toggled #sidebar-wrapper { width: 250px; margin-left: 0; overflow-y: hidden;}
#sidebar-wrapper { z-index: 999; position: fixed; width: 0; height: 100%; margin-left: 0px; overflow-x: hidden; background:#00aba1; transition:0.2s all; -webkit-transition:0.2s all; -moz-transition:0.2s all; -o-transition:0.2s all; -ms-transition:0.2s all; display: none;}
#page-wrapper { width: 100%; height: calc(100vh - 50px); margin: 0; padding: 0; overflow-y: auto;}
/* .panel{padding-bottom: 48px; overflow-y: auto;} */

.page-content{ min-height: calc(100vh - 80px); padding: 20px; background: #ddd; clear: both;}
.container-copyright{ height: 40px; margin: 0; margin-bottom: -24px; padding: 20px; list-style: none; background: #fff; border-top: 1px solid #ccc; overflow: hidden;}
.container-copyright li{ font-size: .8em; line-height: .05em;}
.container-copyright li:first-child{ float: left;}
.container-copyright li:last-child{ float: right;}
/*** /FRAME ***/

/*** SIDEBAR ***/
#sidebar { width: 250px; height: calc(100% - 50px); background: transparent; overflow-y: auto;}
.sidebar-brand { height: 30px; margin: 0; padding: 5px 15px; list-style: none; font-size: .8em; line-height: 20px; background: #1c1a41;}
.sidebar-brand .ad_name{ display: block; margin: 0; padding: 0; color: #fff; text-indent: 0; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

#sidebar_accordion .accordion-item{ border: 0; border-bottom:1px solid #00aba1; border-radius: 0;}
#sidebar_accordion .accordion-item i{ width: 17px; margin-right: 10px; color: #fff; line-height: 1.25em; text-align: center; }
#sidebar_accordion .accordion-item .accordion-header{ margin: 0; padding: 0; background: #00aba1; border-radius: 0; }
#sidebar_accordion .accordion-item .accordion-header button{ width: 100%; padding: 2px 15px; color: #fff; font-size: .35em; background: none; border: 0; border-radius: 0; box-shadow: none; text-align: left; cursor: pointer; white-space: nowrap; }
#sidebar_accordion .accordion-item .accordion-header button i{ color: #fff; }
#sidebar_accordion .accordion-item .accordion-header button:hover, #sidebar_accordion .accordion-item .accordion-header button:hover i{ color: #fff; }
#sidebar_accordion .accordion-item .accordion-header button[aria-expanded="true"]{ color: #fff; background: #007972; }
#sidebar_accordion .accordion-item .accordion-header button[aria-expanded="true"] i{ color: #fff; }
#sidebar_accordion .accordion-item .accordion-header button[aria-expanded="false"]{ background: #00aba1; border-radius: 0; }
#sidebar_accordion .accordion-item .accordion-collapse{ border-radius: 0px;}
#sidebar_accordion .accordion-item .accordion-body{ margin: 0; padding: 0; background: #1c1a41;}
#sidebar_accordion .accordion-item .accordion-body a{ margin: 0 0 0 4px; padding: 10px 10px; font-size: .813em; display: block;}
#sidebar_accordion .accordion-item .accordion-body a, #sidebar_accordion .accordion-item .accordion-body a i{ color: #fff;}
#sidebar_accordion .accordion-item .accordion-body a i{ margin-right: 9px; margin-left: 2px;}
#sidebar_accordion .accordion-item .accordion-body a:hover, #sidebar_accordion .accordion-item .accordion-body a:hover i, #sidebar_accordion .accordion-item .accordion-body a.current, #sidebar_accordion .accordion-item .accordion-body a.current i{ color: #fff;}
.accordion-button:after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important; background-position: 0 1px !important;}
.accordion-button.noarrow{ padding: 0 !important;}
.accordion-button.noarrow a{ width: 100%; margin-right: -20px; padding: 2px 15px; display: block; }
.accordion-button.noarrow.current{ background: #00aba1 !important; }
.accordion-button.noarrow.current a, .accordion-button.noarrow.current a i{ color: #fff !important; }
.accordion-button.noarrow:after{ background-image: none !important; }
.accordion-button a{ color: #fff; display: block; }
.accordion-button:hover a{ color: #fff !important; }
/*** /SIDEBAR ***/

/*** MAIN ***/
.chart_box{width: 100%; min-height:300px; margin:10px 0; padding: 30px 30px 0px 30px; border-radius: 5px; font-size: 1.5em; background: #fff; overflow: hidden; }
.chart_box h2{font-size: .75em; font-weight: bold; color: #333;}
.chart_box .number{ font-size:5em; font-weight: bold; line-height:1.6em; text-align:center;}
.chart:nth-child(5), .chart:nth-child(6), .chart:nth-child(7){margin-top: 20px;}
.chart_alert{margin-top: 20px;}

.log{ margin: 10px 0 0 0; padding: 0; list-style: none; overflow: hidden; }
.log li{ padding: 10px 0; font-size: .65em; border-bottom: 1px solid #ccc; }
.log li:last-child{ border-bottom: 0; }
.log li i.fa-check{ color: #198754; }
.log li i.fa-times{ color: #dc3545; }
.log li span{ padding: 0 10px; display: inline-block; text-align: center; white-space: nowrap; }
.log li span:nth-child(1){ width: 40px; }
.log li span:nth-child(2){ width: calc(100% - 235px); }
.log li span:nth-child(3){ width: 185px; }

.cap_wrap{ margin: 0 0 60px 0; padding: 0; /*overflow: hidden;*/ list-style: none;}
.cap_wrap_cap{ margin:0px 0 0px 0; padding: 0; font-size: 1.5em; line-height: 36px; }
.cap_wrap li:first-child{float: left;}
.cap_wrap li:last-child{float: right;}
.cap_wrap li button{ margin: 0;}
.cap_wrap li button:focus{ background: #00aba1; border-color: #00aba1; }
.cap_wrap li button i{ margin: 0 5px 0 0; }

.cap_wrap .dropdown-menu{ padding: 5px; }
.cap_wrap .dropdown-menu li{ float: none; }
.cap_wrap .dropdown-menu li button, .cap_wrap .dropdown-menu li button:hover{ width: 100%; color: #333; background: none !important; border: 0; border-radius: 0; text-align: left; }

.cnt_wrap{ width: calc(100% - 30px); margin:0 15px 5px 15px; padding: 20px; background: #fff; border: 1px solid #eee; border-radius: 5px; overflow: hidden; }
.cnt_wrap .row.caption, .cnt_wrap .row.list{ margin: 0 0px; }
.cnt_wrap .row.caption .collist, .cnt_wrap .row.list .collist{ margin: 0; padding: 0 1px;}
.cnt_wrap .row.caption .collist input, .cnt_wrap .row.list .collist input, .cnt_wrap .row.list .collist select{ margin-bottom: 0; background-color: transparent; }
.cnt_wrap .row.caption label{ margin: 0; padding: 5px 10px; color: #fff; font-weight: 300; background: #00aba1; }
.cnt_wrap .row.caption a{ color: #fff; }
.cnt_wrap .row.list, .cnt_wrap form .row.list{ background: #f3f3f3; }
.cnt_wrap form:nth-child(2n) .row.list{ background: #fff; }
.cnt_wrap form .row.list:nth-child(2n){ background: #f3f3f3; }
.cnt_wrap .row.list{ background: #fff; }
.cnt_wrap .row.list:nth-child(2n){ background: #f3f3f3; }
.cnt_wrap .row.list:hover, .cnt_wrap form .row.list:hover{ background: #fff8ea }
.cnt_wrap .row.list label{ margin: 0; padding: 5px 10px; font-weight: 300; display: none; }
.cnt_wrap .row.list p{padding: 8px 0; }

.bnr_box{ width: 100%; height: 150px; text-align: center; position: relative; }
.bnr_box img{ width: auto; max-height: 150px; }
.bnr_box .info{ width: 70px; padding:5px 10px; color: #fff; font-size: .5em; background: rgba(0, 0, 0, .75); position: absolute; top: 0; right: 0; text-align: center; }

.bnr_func{ margin: 10px 0 25px 0; padding: 0; list-style: none; overflow: hidden; }
.bnr_func input{ font-size: .65em; }
.bnr_func button{ float: left; margin-right: 10px; }
.bnr_func button i{ float: left; }
.bnr_func button i.fa-save{ margin: 1px 0 0 -2px; font-size: .875em; }
.bnr_func button i.fa-pen{ font-size: .75em; }
.bnr_func button i.fa-trash-alt{ font-size: .75em; }
.bnr_func select{ float: right; width: auto; min-height: 32px !important; margin: 0px 0 0 0; padding-top: 0; padding-bottom: 0; font-size: .75em; /*background-color: #fff !important;*/ }
.bnr_func .setcover{ float: right; width: auto; margin-top: 7px; margin-right: 0; font-size: .65em; line-height: 28px; }
.bnr_func .setcover i{ margin-right: 5px; font-size: 1.875em;}
.bnr_func .btn_action{ margin: 0 5px !important; }
.bnr_func .container_check{ float: left; width: auto; margin-top: 2px; font-size: .65em; font-weight: 400;}

.note{ margin-left: 10px; padding: 0 8px 1px 8px; color: #fff; font-size: .75em; font-weight: 400; background: #990710; border-radius: 5px; position: absolute; bottom: 2px; cursor: pointer; }
.note i{ margin-right: 5px; }

.photo_field{ height: 250px; padding: 10px; border: 2px solid #ccc; border-radius: 5px; overflow-y: auto; }
.photo_thumb{ float: left; margin: 5px; max-height: 100px; display: inline-block;}

.list-link{ padding: 10px 10px !important; color: #333; display: inline-block; }
a.list-link{ color: #007972; }
a:hover.list-link{ color: #00aba1; }

.container_cr_wrap{ overflow: hidden; }
.container_cr_box{ margin: 0; padding: 0; list-style: none; }
.container_cr_box li{ float: left; }
.container_cr_box li:first-child{ width: calc(100% - 45px); }
.container_cr_box li:last-child{ width: 40px; margin-left: 5px; }
.container_cr_box li input[type="text"], .container_cr_box li input[type="file"], .container_cr_wrap select{ float: left; width: calc(50% - 10px); margin: 5px 5px; }
.container_cr_box.input-1 li input[type="text"], .container_cr_box.input-1 li select, .container_cr_box.input-1 li div{ width: calc(100% - 10px); }
.container_cr_box.input-2 li input[type="text"], .container_cr_box.input-2 li select, .container_cr_box.input-2 li div{ width: calc(50% - 10px); }
.container_cr_box.input-3 li input[type="text"], .container_cr_box.input-3 li select, .container_cr_box.input-3 li div{ width: calc(33.3333% - 10px); }
.container_cr_box.input-4 li input[type="text"], .container_cr_box.input-4 li select, .container_cr_box.input-4 li div{ width: calc(25% - 10px); }
.container_cr_box.input-5 li input[type="text"], .container_cr_box.input-5 li select, .container_cr_box.input-5 li div{ width: calc(20% - 10px); }
.container_cr_box.input-6 li input[type="text"], .container_cr_box.input-6 li select, .container_cr_box.input-6 li div{ width: calc(16.6667% - 10px); }
.container_cr_box.input-1 li input[type="file"], .container_cr_box.input-1 li select, .container_cr_box.input-1 li div{ width: calc(100% - 10px); }
.container_cr_box.input-2 li input[type="file"], .container_cr_box.input-2 li select, .container_cr_box.input-2 li div{ width: calc(50% - 10px); }
.container_cr_box.input-3 li input[type="file"], .container_cr_box.input-3 li select, .container_cr_box.input-3 li div{ width: calc(33.3333% - 10px); }
.container_cr_box.input-4 li input[type="file"], .container_cr_box.input-4 li select, .container_cr_box.input-4 li div{ width: calc(25% - 10px); }
.container_cr_box.input-5 li input[type="file"], .container_cr_box.input-5 li select, .container_cr_box.input-5 li div{ width: calc(20% - 10px); }
.container_cr_box.input-6 li input[type="file"], .container_cr_box.input-6 li select, .container_cr_box.input-6 li div{ width: calc(16.6667% - 10px); }

.container_cr_box .btn{ width: 40px; height: 46px; margin-top: 5px; }

.container_cr_box .select2_wrap{ float: left; width: 100%; margin: 5px; }
.container_cr_box .select2_wrap select{ margin: 5px 5px 5px -6px !important; }

.extend_wrap{ padding:  }

.textarea{ min-height: 150px; margin-bottom: 5px; padding:10px 10px; background: #f6f6f6; border: 0; border-bottom:1px solid #ccc;}

.file2_wrap{ margin: 0; padding: 0; overflow: hidden; }
.file2_wrap .file2_name{ float: left; width: calc(100% - 100px); overflow: hidden; }
.file2_wrap .file2_name input[type="text"]:nth-child(1){ float: left; width: calc(50% - 10px); margin-left: 5px; }
.file2_wrap .file2_name input[type="text"]:nth-child(2){ float: left; width: calc(50% - 10px); margin-left: 5px; }
.file2_wrap .file2_btn{ float: left; width: 100px; }
.file2_wrap p{ float: left; width: calc(100% - 125px); height: 45px; margin: 0; border: 1px solid #ccc; }
/* .file2_wrap input[type="file"]{ float: left; width: calc(100% - 125px) !important; } */
.file2_wrap .dl, .file2_wrap .del{ float: left; width: 40px; height: 46px; margin: 0 5px; color: #fff; border: 0; border-radius: 4px; text-align: center; line-height: 45px; }
.file2_wrap .dl{ background: #220b4b;}
.file2_wrap .del{ background: #c00;}

.table01{ width: 100%; border-collapse: collapse !important; }
.table01 tr{ background: #f3f3f3; }
.table01 tr:nth-child(2n){ background: #e3e3e3; }
.table01 th, .table01 td{ padding: 10px; border: 1px solid #fff; }
.table01 th{ width: 200px; color: #fff; background: #00aba1; }
.table01 td{ }

.input_read{ width: 100%; min-height: 46px; margin-bottom: 10px; padding: 13px 10px 14px 10px; line-height: 1.25em; background: #f6f6f6; border: 0; border-bottom: 1px solid #ccc; border-radius: 0px;}

.cnt_wrap select[name="example_length"]{ width: 70px; }
.cnt_wrap .dt-search{ width: 255px; padding: 0; }
.cnt_wrap .dt-search label{ width: 50px; margin: 0 0 0 -20px !important; padding: 0; display: inline-block; }
.cnt_wrap input[type="search"]{ width: 180px !important; display: inline-block;}

.input-group{ display: flex; }
.input-group label{ width: auto; font-weight: 400; }
.input-group .alert{ padding: 8px 12px; border-radius: 5px !important; }
.input-group-txt{ padding: 5px 10px; overflow: hidden; }

.row-box{ margin: 10px 0px; padding: 15px 10px; border: 1px solid #ccc; border-radius: 10px; }

.extend_wrap{ margin: 0 0 0 35px; }

footer{ padding: 40px 20px; color: #fff; background: #00aba1;}
footer a{ color: #fff; display: inline-block; }
/*** /MAIN ***/

/*** SECTION ***/

/*** /SECTION ***/

/*** LIST ***/

/*** /LIST ***/

/*** BREADCRUMB ***/
nav.breadcrumb { min-height: 30px; margin: 0; padding: 0.4em 1em; border: 0px solid hsl(0, 0%, 90%); border-radius: 0px; color: #333; background:#ccc; font-size: .75em; line-height: 19px;}
nav.breadcrumb ol { margin: 0; padding-left: 0; list-style: none;}
nav.breadcrumb li { display: inline;}
nav.breadcrumb [aria-current="page"] { color: #000; font-weight: 700; text-decoration: none;}
nav.breadcrumb a{color: #333;}
nav.breadcrumb a:hover{color: #000;}
/*** /BREADCRUMB ***/

/*** PAGINATION ***/
/* .pagination_wrap{ width: 100%; text-align: center; } */
.pagination{ float: left; margin-top: 30px; }
/* .pagination .page-item, .pagination .page-item a{ margin: 0 1px; border-radius: 0 !important; } */
.pagination a{ color: #666; }
.pagination a:hover{ color: #fff; background: #007972; }
.pagination .active .page-link{ background: #00aba1; border-color: #dee2e6; }

.pagination_jump{ float: right; margin: 30px 0 18px 0; padding: 0; list-style: none; }
.pagination_jump select.form-select{ width: auto; min-height: 38px; margin: 0 5px; padding: 0 35px 0 10px; background-color: #fff; border: 1px solid #dee2e6; border-radius: 3px; display: inline-block; cursor: pointer; }

.pagination_jump{ display: none; }
/*** /PAGINATION ***/

/*** FOOTER ***/

/*** /FOOTER ***/

/*** CAPTCHA ***/
.captcha_wrap{ float: left; margin-top: 34px; }
/*** /CAPTCHA ***/

/*** BTN ***/
/* .btn{ border-radius: 5px; } */
.btn{ padding-bottom: 7px; }
.btn_wrap{ width: 100%; margin:30px 0 10px 0; }
.btn-primary{ color: #fff; background: #00aba1; border-color: #00aba1; }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:disabled, .btn-primary.current{ color: #fff; background: #007972; border-color: #007972; }

.btn-light{ color: #fff; background: #dc2b4e; border-color: #dc2b4e; }
.btn-light:hover, .btn-light:active, .btn-light:focus, .btn-light.current{ color: #fff; background: #c21336 !important; border-color: #c21336 !important; }
/*** /BTN ***/

/*** COLOR ***/
.color01{ color: #00aba1; }
.color02{ color: #1b86db; }
.color03{ color: #e88f46; }
.color_note{ color: #c00; }
/*** /COLOR ***/

/*** FORM ***/
:focus, :active{ outline: none !important; box-shadow: none !important; transition:0.2s all; -webkit-transition:0.2s all; -moz-transition:0.2s all; -o-transition:0.2s all; -ms-transition:0.2s all;}

::selection { background: #00aba1; color: #fff;}
::-moz-selection { background: #00aba1; color: #fff;}

::-webkit-input-placeholder { color:#bbb;}
::-moz-placeholder { color:#bbb;}
:-ms-input-placeholder { color:#bbb;}
:-moz-placeholder { color:#bbb;}

:root{
  scrollbar-face-color: #999; /* Firefox 63 compatibility */
  scrollbar-track-color: #ddd; /* Firefox 63 compatibility */
  scrollbar-color: #999 #ddd;
  scrollbar-width: thin;
}

::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-button { width: 0px; height: 0px;}
::-webkit-scrollbar-thumb { background: #999; border: 0px none #ffffff; border-radius: 5px;}
::-webkit-scrollbar-thumb:hover { background: #666;}
::-webkit-scrollbar-thumb:active { background: #00aba1;}
::-webkit-scrollbar-track { background: #ddd; border: 0px none #ffffff; border-radius: 5px;}
::-webkit-scrollbar-track:hover { background: #999;}
::-webkit-scrollbar-track:active { background: #666;}
::-webkit-scrollbar-corner { background: transparent;}

::-moz-scrollbar {width: 5px;}
::-moz-scrollbar-button { width: 0px; height: 0px;}
::-moz-scrollbar-thumb { background: #999; border: 0px none #ffffff; border-radius: 5px;}
::-moz-scrollbar-thumb:hover { background: #666;}
::-moz-scrollbar-thumb:active { background: #00aba1;}
::-moz-scrollbar-track { background: #ddd; border: 0px none #ffffff; border-radius: 5px;}
::-moz-scrollbar-track:hover { background: #999;}
::-moz-scrollbar-track:active { background: #666;}
::-moz-scrollbar-corner { background: transparent;}

input:focus{ outline: 0; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #333;
  -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,0) inset;
  transition: background-color 5000s ease-in-out 0s;
}

input{ width: 100%; padding:8px; border:1px solid #ccc; }
input:hover{ border:1px solid #ccc; }

textarea:hover,
input[type="text"]:hover,input[type="email"]:hover,input[type="password"]:hover,
textarea:active,
input[type="text"]:active,input[type="email"]:active,input[type="password"]:active,
textarea:focus,
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
    outline:0px !important; box-shadow:none !important; -webkit-appearance:none;
}

form input[type="text"], form input[type="email"], form input[type="url"], form input[type="password"], form input[type="file"], form input[type="date"], form input[type="time"], form input[type="datetime-local"], form input[type="number"], form select{ margin-bottom: 10px; }

form.form-inline select{ margin: 0; }

input[type="text"],input[type="email"],input[type="url"],input[type="password"],input[type="file"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="number"], select{ width: 100%; min-height: 46px; padding:10px 10px; line-height: 1em; background: #f6f6f6; border: 0; border-bottom: 1px solid #ccc; border-radius: 0px; }
input[type="text"],input[type="email"],input[type="url"],input[type="password"],input[type="file"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="number"], select, textarea{ -moz-appearance: none; -webkit-appearance: none; appearance: none;transition:0.2s all; -webkit-transition:0.2s all; -moz-transition:0.2s all; -o-transition:0.2s all; -ms-transition:0.2s all;}
input[type="text"]:hover,input[type="email"]:hover,input[type="url"]:hover,input[type="password"]:hover,input[type="file"]:hover,input[type="date"]:hover,input[type="time"]:hover,form input[type="datetime-local"]:hover,input[type="number"]:hover,select:hover,textarea:hover,input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="file"]:focus,input[type="date"]:focus,input[type="time"]:focus,form input[type="datetime-local"]:focus,input[type="number"]:focus,select:focus,textarea:focus{ border-color:#00aba1; }
input[type="text"]:disabled,input[type="email"]:disabled,input[type="url"]:disabled,input[type="password"]:disabled,input[type="file"]:disabled,input[type="date"]:disabled,input[type="time"]:disabled,form input[type="datetime-local"]:disabled,input[type="number"]:disabled,select:disabled,textarea:disabled{ border: 0; }
input[type="text"]:read-only, input[type="email"]:read-only, input[type="password"]:read-only, input[type="url"]:read-only, textarea:read-only{ border-color: #ccc; }
input[type="radio"], input[type="checkbox"]{ width: auto; }
input[type="radio"]{ width: 20px; height: 20px; display: inline; margin-top: 5px; }
input[type="checkbox"]{ width: 20px; height: 20px; display: inline; margin-top: 5px; border-radius: 3px !important; }
input[type="checkbox"].checkbox01{ width: 14px !important; height: 14px !important; margin: 0 5px;}
/* input[type="file"]{ width: 0; overflow: hidden; position: absolute; z-index: -1; opacity: 0;} */
/* select.form-select{ background-color: #f6f6f6; border: 0; border-bottom: 1px solid #ccc; border-radius: 0;}
select.form-select:hover, select.form-select:focus{ border-color:#00aba1; cursor: pointer;} */
select{ background:#f6f6f6 url('../images/icon-arrow_down.png') right 15px center no-repeat; background-size: 15px auto; border: 0; border-bottom: 1px solid #ccc; border-radius: 0; cursor: pointer; }
textarea{ width: 100%; height: 150px; margin-bottom: 5px; padding:10px 10px; background: #f6f6f6; border: 0; border-bottom:1px solid #ccc; }

button i{ margin-right: 10px; font-size: 1.1em; }

label{ width: 100%; margin-bottom: 10px; font-weight: bold; position: relative; }
label .fa-sort{ float: right; margin-top: 4px; cursor: pointer; }

.search_wrap{ overflow: hidden; }
.search_wrap .input-group{ float: left; width: auto; }
.search_wrap .input-group:nth-child(1){ margin-right: 20px; }
.search_wrap form{ display: flex; }
.search_wrap form select{ width: 200px; margin: 0 -1px 0 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.search_wrap form select, .search_wrap from select:hover{ border: 1px solid #dee2e6 !important;}
.search_wrap form input{ width: 170px; margin: 0; background: #fff !important; border: 1px solid #dee2e6 !important; }
.search_wrap form button{ padding: 10px 10px; line-height: 1em !important; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.search_wrap form button[data-bs-toggle="modal"], .search_wrap a{ padding-top: 10px; padding-bottom: 10px; }

.option{ margin:8px 20px 0px 0; display: inline-block; }
.option input[type="radio"], .option input[type="checkbox"], .option label{ float: left; }
.option input[type="radio"], .option input[type="checkbox"]{ margin-right: 5px; }
.option label{ margin-top: 1px; }

.input_wrap{ position: relative; }
.input_wrap input[type="password"]{ padding-right: 40px; }

.btn_action{ width: 30px; height: 30px; margin:5px 0; padding: 0; font-size: 1.5em; text-indent: 3px; background: none; border: 0; cursor: pointer; }

.mustfilled{ margin-left: 10px; color: #990710; }
.caption .mustfilled{ color: #fff; }
.fa-save{ margin-top: 5px; font-size: 1.125em; vertical-align: top; }

.img_preview{ max-width: 200px; max-height: 150px; margin-bottom: 5px; }

.input_file { padding: 10px 30px; font-weight: 400; background: #f6f6f6; display: inline-block; cursor: pointer; text-align: center; transition: all 0.2s;}
.input_file i{ margin-right: 10px; font-size: 1.1em; }
.input_file:hover { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);}

.toggle-pwd{ position: absolute; top: 15px; right: 10px; cursor: pointer; }

/* radio */
/* .container_radio { width: auto; display: inline-block; position: relative; margin: 0px 20px 3px 0; padding-left: 35px; cursor: pointer; font-size: 1em; line-height: 35px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.container_radio input { position: absolute; top: 4px; left: 4px; opacity: 0; cursor: pointer;}
.radiomark { position: absolute; top: 5px; left: 0; height: 25px; width: 25px; background-color: #fff; border:1px solid #ccc; border-radius: 50%; transition:0.2s all;}
.container_radio:hover input ~ .radiomark { background-color: #00aba1; border:1px solid #ccc;}
.container_radio input:checked ~ .radiomark { background-color: #fff;}
.radiomark:after { content: ""; position: absolute; display: none;}
.container_radio input:checked ~ .radiomark:after { display: block;}
.container_radio .radiomark:after { top: 5px; left: 5px; width: 13px; height: 13px; border-radius: 50%; background: #00aba1;} */

.rc_wrap{ width: auto; margin: 11px 20px 10px 0; display: inline-block; overflow: hidden; cursor: pointer;}
.rc_wrap input{ float: left; cursor: pointer; }

.rc_wrap input[type="radio"] { width: 24px; height: 24px; margin: 0 8px 0 0; color: #000; font: inherit; background: #fff; border: 1px solid #ccc; border-radius: 50%; display: grid; place-content: center; appearance: none;}
.rc_wrap input[type="radio"]::before { width: 14px; height: 14px; content: ""; border-radius: 50%; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em #ccc; transition: all 0.2s;}
.rc_wrap:hover input[type="radio"]::before{ box-shadow: inset 1em 1em #ccc; transform: scale(1);}
.rc_wrap input[type="radio"]:checked::before { box-shadow: inset 1em 1em #00aba1 !important; transform: scale(1);}
/* /radio */

/* checkbox */
.container_check { width: auto; display: inline-block; position: relative; margin:5px 20px 5px 0px; padding-left: 35px; font-weight: 400; cursor: pointer; font-size: 1em; line-height: 25px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.container_check input { position: absolute; left: 4px; top: -5px; opacity: 0; cursor: pointer; height: 25px; width: 25px;}
.checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #fff; border:1px solid #ccc;}
.container_check:hover input ~ .checkmark { background-color: #fff; border:1px solid #ccc;}
.container_check input:checked ~ .checkmark { background-color: #00aba1;}
.checkmark:after { content: ""; position: absolute; display: none;}
.container_check input:checked ~ .checkmark:after { display: block;}
.container_check .checkmark:after { left: 8px; top: 4px; width: 7px; height: 12px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
/* /checkbox */

/* .form-control{ width: 100%; padding: .75rem; border: none; box-sizing: border-box; outline: 0; position: relative;}
input[type="date"]::-webkit-calendar-picker-indicator { width: auto; height: auto; color: transparent; background: transparent; bottom: 0; cursor: pointer; left: 0; position: absolute; top: 0; right: 0;}
input[type="date"]::after{ margin-right: 5px; color: #999; font-family: 'Font Awesome 5 Free'; font-weight: 900; content: '\f073'; } */

.ck-editor__editable_inline {min-height: 1300px;}
/*** /FORM ***/

/*** MARGIN PADDING ***/
.my--10{ margin-top: -10px; padding-bottom: -10px; }
/*** /MARGIN PADDING ***/

/* MODEL */
/* .modal-dialog{ max-width: 728px; min-width: 728px; margin: 20px auto;} */
body.modal-open { overflow: auto !important;}
.modal-header{ color: #fff; background: #00aba1; border-radius: 4px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.close, .close:hover{ color: #fff; }

.modal-body h5{ margin-bottom: 20px; line-height: 1.25em; }
.modal-body h6{ margin-bottom: 10px; color: #00aba1; line-height: 1.25em; }

.modal-body .captcha_wrap { width: 100%; margin-top: 0px; overflow: hidden; }
.modal-body .captcha_wrap img{ float: left; margin-left: 10px; border: 1px solid #ccc; }
.modal-body .captcha_wrap input[type="text"]{ float: left; width: calc(100% - 92px); margin: 0; padding: 8px 10px; }
/* .modal-body #captcha_code{ float: left; width: 100px; } */
/* /MODEL */

/*** POPOVER ***/
[data-bs-toggle="popover"]{ cursor: pointer; }
.popover{ padding:5px; border: 5px solid #ccc; border-radius: 10px; }
.popover-arrow{ display: none !important; }
/*** /POPOVER ***/

/*** ALERT ***/
.alert_msg {
  width: 100%; padding:16px 0 17px 0; line-height: 1em; text-align: center; border-radius: 0; position: fixed; top: 0; z-index: 1000; opacity: 0;
  -webkit-animation: alert_msg 2.0s;
  -moz-animation: alert_msg 2.0s;
  -o-animation: alert_msg 2.0s;
  animation: alert_msg 2.0s;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
@keyframes alert_msg {
  0%   { opacity:0; }
  10%  { opacity:1; transform: translateY(0);}
  90%  { opacity:1; transform: translateY(0);}
  100% { opacity:0; }
}
@-o-keyframes alert_msg{
  0%   { opacity:0; }
  10%  { opacity:1; -o-transform: translateY(0);}
  90%  { opacity:1; -o-transform: translateY(0);}
  100% { opacity:0; }
}
@-moz-keyframes alert_msg{
  0%   { opacity:0; }
  10%  { opacity:1; -moz-transform: translateY(0);}
  90%  { opacity:1; -moz-transform: translateY(0);}
  100% { opacity:0; }
}
@-webkit-keyframes alert_msg{
  0%   { opacity:0; }
  10%  { opacity:1; -webkit-transform: translateY(0);}
  90%  { opacity:1; -webkit-transform: translateY(0);}
  100% { opacity:0; }
}
/*** /ALERT ***/


@media screen and (-webkit-min-device-pixel-ratio:0) { /* Chrome */
}

@supports (display:-ms-grid) { /* Edge */
}