*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  /* overflow: hidden; */
  overflow-x: hidden;
  position: relative;
  left: 0px;
  top: 0px;
  font-family: sans-serif, serif, "Noto Sans CJK TC", "Microsoft JhengHei", PingFang, STHeiti;
  letter-spacing: .05rem;
  font-size: 14px;
}

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

header {
  flex: 0 0 auto;
  box-shadow: #aaaaaa 1px 0px 3px;
}

.main {
  flex: 1 0 auto;
}

footer {
  flex: 0 0 auto;
  width: 100%;
  background-color: #9c9c9c;
  color: white;
  padding: 1rem;
  text-align: center;
  font-size: small;
}

footer p {
  margin-bottom: 0%;
}

a {
  text-decoration: none;
  color: #000;
}
a:hover{
  color: #B60202;
}


/* 初始設定 end */

.content {
  margin: 0 auto;
  margin-top: 2rem;
  margin-bottom: 10rem;
  padding: 0 2rem;
  max-width: 1920px;
  float: left;
}

.navbar li {
  color: #fff;
}

.nav-link:hover {
  color: #fff!important;
}

.navbar a:hover {
  color: #fff;
}

.navbar a:active {
  color: #fff;
}

.navbar-brand {
  color: #3c8dbc!important;
  font-weight: bold;
  letter-spacing: .1rem;
}
.dropdown-item{
  color: #fff;
}
.dropdown-item:hover {
  background-color: transparent;
}

.dropdown-item:active {
  background-color: transparent;
}
.page-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #3c8dbc;
  margin-bottom: .75rem;
}
.t-red{
  color:#B60202;
}
.t-blue{
  color:#3c8dbc;
}
.tip-words-red {
  color: #B60202;
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: .75rem;
}
.tip-words-blue {
  color: #3c8dbc;
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: .75rem;
}
.required label {
  color: #B60202;
}
.text-box{
  line-height: 1.5rem; 
  padding-bottom:1rem;
}
.upload-btn {
  display: none;
}
.upload-text {
  font-size: small;
  display: inline;
}
.li-number{
  list-style-type: decimal;
  padding-left: 1.5rem;
}
/* fa-icon */
.fa{
  margin-right: .5rem;
}
.fa-pencil-square-o{
  color: #2f6c8f;
  font-size: 1.25rem;
  margin: 0;
}
.fa-pencil-square-o:hover{
  color: #3c8dbc;
}
.fa-trash-red{
  color: #B60202;
  font-size: 1.25rem;
  margin: 0;
}
.fa-trash-red:hover{
  color: #d45151;
}
/* button */
.btn-w100 {
  width: 100%;
  border: solid 1.5px #6d6875;
  border-radius: .25rem;
  padding: .75rem 0;
  font-size: .8rem;
  letter-spacing: .05rem;
}

.btn-w50 {
  width: 50%;
  border: solid 1.5px #6d6875;
  border-radius: .25rem;
  padding: .75rem 0;
  font-size: .8rem;
  letter-spacing: .05rem;
  margin: .25rem;
}

.btn-lg {
  border: 1.5px;
  border-radius: 2rem;
  padding: .75rem 1rem;
  font-size: 1rem;
  letter-spacing: .05rem;
  margin: .5rem .25rem;
  
}

.btn-normal {
  border: 1.5px;
  border-radius: 2rem;
  padding: .75rem;
  font-size: .8rem;
  letter-spacing: .05rem;
  margin: .5rem .25rem;
}

.btn-sm {
  border: 1.5px;
  border-radius: .25rem;
  padding: .5rem;
  font-size: .8rem;
  letter-spacing: .05rem;
  margin: .25rem;
}

.btn-sq {
  border: 1.5px;
  border-radius: .25rem;
  padding: .75rem;
  font-size: .8rem;
  letter-spacing: .05rem;
  margin: 0 .25rem;
  background-color: opacity;
}
.btn-transparent {
  background-color: transparent;
  border: 1px solid transparent;
}

.btn-cancel {
  background-color: #fff;
  border: 1px solid #725e54;
  color: #725e54;
}

.btn-cancel:hover {
  background-color: #c9c0c0;
  border: 1px solid #c9c0c0;
  color: #fff;
}

.btn-blue-outlined {
  background-color: #fff;
  border: 1px solid #3c8dbc;
  color: #3c8dbc;
}

.btn-blue-outlined:hover {
  background-color: #3c8dbc;
  border: 1px solid #3c8dbc;
  color: #fff;
}

.btn-blue-outlined:active {
  background-color: #2f6c8f;
  border: 1px solid #2f6c8f;
  color: #fff;
}

.btn-blue {
  background-color: #3c8dbc;
  border: 1px solid #3c8dbc;
  color: #fff;
}

.btn-blue:hover {
  background-color: #68b5e2;
  border: 1px solid #68b5e2;
  color: #fff;
}

.btn-blue:active {
  background-color: #34779e;
  border: 1px solid #34779e;
  color: #fff;
}

.btn-orange {
  background-color: #fe9700;
  border: 1px solid #fe9700;
  color: #fff;
}

.btn-orange:hover {
  background-color: #ffb20b;
  border: 1px solid #ffb20b;
  color: #fff;
}

.btn-orange:active {
  background-color: #e48509;
  border: 1px solid #e48509;
  color: #fff;
}

.btn-red {
  background-color: #B60202;
  background-color: #B60202;
  border: 1px solid ;
  color: #fff;
}

.btn-red:hover {
  background-color: #da2f4f;
  border: 1px solid #da2f4f;
  color: #fff;
}

.btn-red:active {
  background-color: #c33c54;
  border: 1px solid #c33c54;
  color: #fff;
}
/* modal */
.modal-header{
  background-color: #3c8dbc;
  color: #fff;
}

/* dataTable */
table.dataTable thead .sorting {
  background-image: url("../img/dataTable_sorting/sort_both.png")
}

table.dataTable thead .sorting_asc {
  background-image: url("../img/dataTable_sorting/sort_asc.png") !important
}

table.dataTable thead .sorting_desc {
  background-image: url("../img/dataTable_sorting/sort_desc.png") !important
}

table.dataTable thead .sorting_asc_disabled {
  background-image: url("../img/dataTable_sorting/sort_asc_disabled.png")
}

table.dataTable thead .sorting_desc_disabled {
  background-image: url("../img/dataTable_sorting/sort_desc_disabled.png")
}
table.dataTable.no-footer {
  border-bottom: none;
}

.dataTables_wrapper .dataTables_paginate {
  float: none;
  text-align: center;
  margin-top: 5rem;
}

table.dataTable tbody tr {
  background-color: #EFEFEF;
}

table.dataTable tbody tr:hover {
  background-color: #FFF8DF;
}

table.dataTable thead th, table.dataTable thead td, table.dataTable.no-footer {
  border-bottom: none;
}

table.dataTable thead th, table.dataTable tbody td {
  padding: .5rem .5rem;
  line-height: 1.25rem;
}

table.dataTable tbody td {
  border-right: 1px solid #fff;
  line-height: 1.75rem;
  font-size: 1rem;
}
table.dataTable tbody td button {
  line-height: 1rem;
}

.th-label {
  display: none;
}

table {
  font-size: 14px;
  width: 100%;
}

table.dataTable thead {
  background-color: #3c8dbc;
  color: #fff;
}

table.dataTable {
  border-spacing: 0rem .5rem;
}

th:first-child, td:first-child {
  border-bottom-left-radius: .75rem;
  border-top-left-radius: .75rem;
}

th:last-child, td:last-child {
  border-bottom-right-radius: .75rem;
  border-top-right-radius: .75rem;
}
/* navbar */
aside {
  max-width: 250px;
  background-color: #3c8dbc;
  float: left;
  position: relative;
  padding: 2rem 0;
  min-height: 100vh;
  overflow: auto;
}

aside a {
  color: #fff;
}

aside a:hover {
  color: #fff;
}

aside .li-a:hover {
  color: #3c8dbc;
}

.nav-item a {
  display: block;
  padding: 12px 16px;
}
.content-first-layaer li a,
.content-second-layaer li a,
.content-third-layaer li a {
  display: block;
}

.nav-item-only-a {
  padding: 0;
}

.content-first-layaer li {
  color: #fff;
  padding: 1rem 0 1rem 1rem;
  cursor: pointer;
}

.content-first-layaer li:hover {
  color: #3c8dbc;
  font-weight: bold;
  background-color: #D3EAFF;
  padding: 1rem 0 1rem 1rem;
  cursor: pointer;
}

.content-second-layaer {
  list-style-type: disc;
  padding-left: 3rem;
}

.content-second-layaer li {
  color: #fff;
  font-size: 1rem;
  padding: .5rem;
  font-size: 12px;
  border-bottom: none;
}

.content-second-layaer li:hover {
  color: #fff;
  background-color: rgba(211, 234, 255, 0.5);
  font-size: 1rem;
  padding: .5rem;
  font-size: 12px;
  border-bottom: none;
}

.content-third-layaer {
  list-style-type: disc;
  padding-left: 2rem;
}

.content-third-layaer li {
  color: #fff;
  font-size: 1rem;
  padding: .5rem;
  font-size: 12px;
  cursor: pointer;
}

.collapse:focus {
  background-color: slateblue;
}
/* login */

.login-box {
  max-width: 480px;
  background-color: rgb(255, 255, 255, 0.5);
  border-radius: 1rem;
  box-shadow: .1rem .1rem .3rem rgb(185, 185, 185);
  margin-top: 3rem;
  margin-bottom: 3rem;
  padding: 3rem;
}

.logo-box {
  padding: 2.5rem;
  width: 80%;
  border-bottom: 1px dashed #c4c4c4;
}

.login-box img {
  width: 75%;
  height: 50%;
  max-height: 100px;
  max-width: 250px;
  margin-bottom: 1rem;
}

.login-title {
  color: #3c8dbc;
  letter-spacing: .25rem;
  font-size: 1.25rem;
  font-weight: 500;
}

.login-info {
  width: 80%;
}

.login-box a {
  color: #00b8b8;
}

.login-box a:hover {
  color: #00D9D9;
}

.login-box a:active {
  color: #13A2A2;
}

.bb-dashed-bottom {
  border-bottom: 1px dashed #B9B9B9;
  padding-bottom: 3rem;
  margin-bottom: 3rem;
}

.bb-dashed-top {
  border-bottom: 1px dashed #B9B9B9;
  margin-bottom: 1rem;
}

/* video */
.video-box {
  background-color: #adb5bd;
  width: 100%;
  max-width: 1020px;
  padding-top: 56.25%;
  /* 1:1 Aspect Ratio */
  position: relative;
}

/* add */
.step-text{
  color:#595959;
  font-size: 18px; 
  font-weight:500; 
  margin-bottom:1rem; 
  display:flex; 
  justify-content:center;
}
.input-bg{
  padding: 1rem; 
  background-color: #F8F8F8; 
  border-radius: .5rem; 
  box-shadow: 1px 1px 1px #ececec;
}
/* agent */
.agent-import{
  max-width: 30rem; 
  border: 1px solid #EFEFEF;
}
/* circular */
.time-range select{
  margin-right:1rem; 
  width:auto;
}
.time-range input{
  width: 20rem; 
  margin-right:1rem;
}
/* Select2 */
.select2-container .select2-selection--single {
  height: auto;
  width: auto;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 11px;
  padding-top: 1.4rem;
}
.select2-container--default .select2-selection--multiple{
  padding-left: 11px;
  padding-top: 1.4rem;
}

@media (max-width: 991.98px) {
  .sidebar {
    display: none;
  }
  .content {
    width: 100%;
  }
  .navbar{
    background-color: #3c8dbc;
  }
  .navbar-brand{
    color: #fff!important;
  }
}