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

:root{
    --default-color:#222e3c;
    --second-color:#8c98a5;
    --third-color:#e9ecef;
    
}

body{
    font-size:16px;
}
body,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "微軟正黑體", "Microsoft JhengHei";
}

a {
    color: #747474;
    text-decoration: none;
}
a:hover{
    color:#262626;
}

.txt-highlight{
    color:#f9b92c;
}
.txt-red {
    color: #f00;
}

.temptitle{
    color:#fff;
}

.box_bg {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 0.875rem 0 rgba(33,37,41,0.05);
    height: 100%;
    overflow: hidden;
}
.small-frame {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}
.icon{
    display: inline-block;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:100%;
}
.icon.icon-wrp {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: solid 1px #495057;
    position: relative;
    margin-top: 4px;
    vertical-align: top;
    transition:all .3s ease;
}

.icon.icon-wrp:before {
    position: absolute;
    content: "WRP";
    font-size: 0.7rem;
    transform: scale(0.6);
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) scale(0.5);
    font-weight: bold;
}

.icon.icon-infolg{
    width:24px;
    height:87px;
    background-image: url('../../../images/info-lg.svg');
}
.icon.icon-personfill{
    width:72px;
    height:72px;
    background-image: url('../../../images/person-fill.svg');
}
.icon.icon-linkffdeg{
    width:66px;
    height:66px;
    background-image: url('../../../images/link-45deg.svg');
}


.btn:focus {
    box-shadow: none;
}
.btn.btn-default {
    font-size: 0.9375rem;
    background: var(--third-color);
    border: solid 1px #cdd4da;
    padding: 7px 20px;
}
.btn.btn-default .icon {
    margin-top: 2px;
    vertical-align: top;
    margin-right: 2px;
    line-height: 1;
}
.btn.btn-default:hover {
    background: var(--second-color);
    color:#fff;
}
.btn.btn-default.st {
    background: #f4f6fa;
    border: none;
}

.btn.btn-default.st:hover {
    background: #2d3e56;
    color: #fff;
}
.btn.btn-bord {
    font-size: 0.9375rem;
    color: #495057;
    padding: 0;
    padding: 4px 9px;
    border: solid 1px #cdd4da;
    line-height: 1rem;
    background:#fff;
}
.btn.btn-bord:hover{
    background:var(--second-color);
    color:#fff;
}
.btn.btn-default.st:hover {
    background: #2d3e56;
    color: #fff;
}

.btn.btn-bord.st {
    padding: 9px 11px;
    font-size: 0.9375rem;
}

.h1 {
    font-size: 1rem;
    color: var(--default-color);
    font-weight: bold;
}

.t-ellipsis {
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.page-wrapper{
    overflow:hidden;
    align-items: stretch;
    display: flex;
    width: 100%;
}
.pager_wrapper {
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pager_wrapper .page_info {
    display: flex;
    align-items: center;
}
.pager_wrapper .page_info .form-select {
    padding: .313rem 2.25rem .313rem .75rem;
    margin-right: 20px;
}
.page_info .form-select {
    padding: .313rem 2.25rem .313rem .75rem;
    margin-right: 20px;
}

.page_info {
    display: flex;
    align-items: center;
}

.pager_wrapper > .btn-group {
    margin-right: 20px;
}

.btn_wrapper {
    margin-bottom: 10px;
    text-align: center;
}
.toggle-group .btn {
    font-size: 0.9375rem;
}
.toggle-off.btn {
    line-height: 1.125;
}

.toggle-on.btn {
    line-height: 1.25rem;
}
.btn-success {
    background: #3b7ddd;
    border-color: #3b7ddd;
}

.btn-success:hover {
    background: #27374c;
    border-color: #27374c;
}
hr {
    margin: 10px 0;
    background: var(--third-color);
}
.control-label {
    text-align: left;
    padding-top: 7px;
    font-size: 0.9375rem;
    color: #495057;
    font-weight: bold;
}
.form-control-static {
    font-size: 0.9375rem;
    color: #495057;
}
input[type=radio] + label {
    margin-right: 10px;
}
.form-group {
    margin-bottom: 15px;
}
.form-control,
.form-select{
    font-size:0.9375rem;
    color:#495057;
}
.form-control:focus,
.form-select:focus{
    border-color: #3b7ddd;
    box-shadow: none;
}
.form-control[type=file] {
    background: var(--third-color);
}
.panel-body{
    margin:25px 22px;
}
[data-simplebar] {
    position: fixed;
}

ol.example{
    width:100%;
}

.d-ivt{
    vertical-align:top;
}

.sidebar {
    min-width: 264px;
    max-width: 264px;
    transition: margin-left .35s ease-in-out,left .35s ease-in-out,margin-right .35s ease-in-out,right .35s ease-in-out;
    direction: ltr;
    background:var(--default-color);
    overflow: auto;
    height: 100vh;
    position: fixed;
    transition: all .3s ease;
    left: 0;
}

.sidebar .sidebar-content .sidebar-brand {
    font-size: 1.25rem;
    color: #f5f7fb;
    padding: 25px;
    background: var(--default-color);
    margin-bottom: 0;
}


.sidebar .sidebar-nav {
  list-style-type: none;
    padding-left: 0;
}
.sidebar .sidebar-nav a{
    color: var(--third-color);
    transition:all .3s ease;
    cursor:pointer;
    display:block;
    padding: 15px 25px;
    position:relative;
    background: #27374c;
    font-size: 0.875rem;
}
.sidebar .sidebar-nav a.collapsed {
    background: var(--default-color);
}
.sidebar .sidebar-nav a .m-txt i {
    margin-right: 10px;
}
.sidebar .sidebar-nav a .m-txt .icon {
    margin-right: 10px;
    font-size: 1.125rem;
}
.sidebar .sidebar-nav a.sidebar-link.collapsed .s-txt .icon:before {
    transform: rotate(0deg);
}
.sidebar .sidebar-nav a.sidebar-link .s-txt .icon:before {
    transform: rotate(180deg);
    transition:all .3s ease;
}

.sidebar .sidebar-nav > .sidebar-item > .sidebar-link:before{
    position:absolute;
    content:"";
    display:block;
    width:3px;
    height:100%;
    background:#3b7ddd;
    left:1px;
    top:0;
    opacity:1;
    transition:all .3s ease;
}
.sidebar .sidebar-nav > .sidebar-item > .sidebar-link.collapsed:before{
    opacity:0;
}
.sidebar .sidebar-nav a > .icon {
    line-height: 1.3;
    vertical-align: top;
    display: inline-block;
    margin-right: 12px;
    font-size: 1.3rem;
}
.sidebar .sidebar-nav a:hover{
    color:rgba(233,236,239,.75);
}
.sidebar .sidebar-nav a > .i-arrow {
    font-size: 1.25rem;
}
.sidebar .sidebar-nav a.collapsed > .i-arrow:before {
    transform: rotate(0);
}
.sidebar .sidebar-nav a > .i-arrow:before {
    transform: rotate(180deg);
    transition: all .3s ease;
}

.sidebar .sidebar-nav .sidebar-item ul li {
    display: flex;
    padding: 0 26px;
}
.sidebar .sidebar-nav .sidebar-item ul li a {
    padding: 12px 10px;
    font-size: 0.875rem;
    color: rgba(233,236,239,0.5);
    background: #2d3e56;
}
.sidebar .sidebar-nav .sidebar-item ul {
    background: #2d3e56;
}
.sidebar .sidebar-nav .sidebar-item ul li .icon {
    color: var(--third-color);
    margin-top: 10px;
    flex: 0 0 15px;
    width: 15px;
    transition:all .3s ease;
}
.sidebar .sidebar-nav .sidebar-item ul li .manual {
    flex: 0 0 16px;
    width: 16px;
    padding: 12px 0;
}
.sidebar .sidebar-nav .sidebar-item ul li .sidebar-item-link {
    flex-grow: 1;
}
.sidebar .sidebar-nav .sidebar-item ul li:hover .icon,
.sidebar .sidebar-nav .sidebar-item ul li:hover .manual,
.sidebar .sidebar-nav .sidebar-item ul li:hover a {
    color: #1bbcff;
}

.sidebar-toggle.js-sidebar-toggle {
    cursor: pointer;
    display: flex;
    height: 26px;
    width: 26px;
}

.main {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    transition: margin-left .35s ease-in-out,left .35s ease-in-out,margin-right .35s ease-in-out,right .35s ease-in-out;
    background: #f4f6fa;
    flex-direction: column;
    overflow: hidden;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-left:264px;
    transition: all .3s ease;
}


.nfunctional-bar-box {
    padding: 10px 10px 5px;
    background: var(--second-color);
    position: fixed;
    width: calc(100% - 264px);
    top: 64px;
}
body.hideSide .nfunctional-bar-box{
    width: 100%;
}
.offRight-text {
    font-size: 20px;
    font-weight: bold;
}

/*** hamburger bar ***/
.hamburger,
.hamburger:after,
.hamburger:before {
    background: #3b7ddd;
    border-radius: 1px;
    content: "";
    cursor: pointer;
    display: block;
    height: 3px;
    transition: background .1s ease-in-out,color .1s ease-in-out;
    width: 24px
}
body.hideSide .hamburger, 
body.hideSide .hamburger:after, 
body.hideSide .hamburger:before {
    background: #495057;
}
.hamburger {
    position: relative
}

.hamburger:before {
    position: absolute;
    top: -7.5px;
    width: 24px
}

.hamburger:after {
    bottom: -7.5px;
    position: absolute;
    width: 16px
}

.sidebar-toggle:hover .hamburger,
.sidebar-toggle:hover .hamburger:after,
.sidebar-toggle:hover .hamburger:before {
    background: #3b7ddd
}

.hamburger-right,.hamburger-right:after,.hamburger-right:before {
    right: 0
}

.main > .navbar {
    padding: 13px 22px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: calc(100% - 264px);
    transition:all .3s ease;
    z-index: 10;
}
body.hideSide .main > .navbar{
    width: 100%;
}
body.hideSide .sidebar {
    left: -264px;
}
body.hideSide .main {
    padding-left: 0;
}
.main > .navbar .breadcrumb {
    margin-bottom: 0;
    background: #f5f7fb;
    font-size: 0.875rem;
    color: var(--second-color);
    padding: 10px 15px;
    border-radius: 30px;
    margin-left: 22px;
}
.main > .navbar .breadcrumb .breadcrumb-item.active {
    color: #495057;
}
.main > .navbar .breadcrumb a {
    font-size: 0.875rem;
    color: var(--second-color);
    transition:all .3s ease;
}
.main > .navbar .breadcrumb a:hover{
    color:#afafaf;
}


.main > .navbar .navbar-item {
    display: flex;
    align-items: center;
}
.breadcrumb .breadcrumb-item+.breadcrumb-item::before{
    content:"";
    background: url('../../../images/chevron-compact-right.svg') center center no-repeat;
    background-size:100%;
    width:6px;
    height:14px;
    padding: 0;
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
}
.breadcrumb .breadcrumb-item {
    position: relative;
}

.breadcrumb .breadcrumb-item+.breadcrumb-item {
    padding-left: 14px;
}

.main > .navbar .breadcrumb .icon:before {
    line-height: inherit;
}
.main > .navbar .navbar-item .navbar-nav .nav-item .nav-link {
    font-size: 0.875rem;
    color: #495057;
    transition:all .3s ease;
}
.main > .navbar .navbar-item .navbar-nav .nav-item .nav-link:hover{
    color:#3b7ddd;
}
.main > .navbar .navbar-item .navbar-nav .nav-item .nav-link:hover .icon.icon-wrp{
    border-color:#3b7ddd;
}
.main > .navbar .navbar-item .navbar-nav .nav-item .nav-link .icon:before {
    margin-bottom: 1px;
}

.main .content .content_box {
    padding: 169px 46px 46px;
}


.main .content_box .search_panel{
    display:none;
    margin-top: 10px;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
}
.datepicker.dropdown-menu {
    padding: 10px;
    z-index: 9999;
}
.datepicker td.active:hover, 
.datepicker td.active:hover:hover, 
.datepicker td.active:focus, 
.datepicker td.active:hover:focus, 
.datepicker td.active:active, 
.datepicker td.active:hover:active, 
.datepicker td.active.active, 
.datepicker td.active:hover.active, 
.datepicker td.active.disabled, 
.datepicker td.active:hover.disabled, 
.datepicker td.active[disabled], 
.datepicker td.active:hover[disabled] {
    background: rgb(55,86,131);
}
.datepicker td span.active:hover, 
.datepicker td span.active:focus, 
.datepicker td span.active:active, 
.datepicker td span.active.active, 
.datepicker td span.active.disabled, 
.datepicker td span.active[disabled] {
    background: rgb(55,86,131);
}


/*.dashboard-det{
    display:flex;
    height:100%;
}*/
.dashboard-det .icon-group {
    width: 100px;
    display: flex;
    justify-content: center;
    padding-top: 16px;
}

.dashboard-det.info .icon-group {
    background: #3b7ddd; 
}
.dashboard-det.account .icon-group {
    background: #3bbb8b; 
}
.dashboard-det.manage .icon-group {
    background: #f9b92c; 
}
.dashboard-det .box-info {
    padding: 15px 18px;
    font-size: 0.9375rem;
    color: #495057;
}
.dashboard-det .box-info .dashboard-sub-title {
    margin-bottom: 40px;
}
.dashboard-det .box-info .dashboard-sub-cont .p {
    margin-bottom: 10px;
}
.dashboard-det .box-info .dashboard-sub-cont .dashboard-list li {
    margin-bottom: 7px;
}
.dashboard-det .box-info .dashboard-sub-cont .dashboard-list li .icon {
    font-size: 1.3125rem;
    line-height: 0;
}
.dashboard-det .box-info .dashboard-sub-cont .manage-list li {
    margin-bottom: 7px;
}
.dashboard-det .box-info .dashboard-sub-cont .manage-list li a {
    font-size: 0.9375rem;
    color: #495057;
    display: flex;
    transition: all .3s ease;
}
.dashboard-det .box-info .dashboard-sub-cont .manage-list li a .icon {
    font-size: 1.25rem;
    line-height: 0;
    margin-right: 5px;
    flex: 0 0 auto;
    margin-top: 3px;
}
.dashboard-det .box-info .dashboard-sub-cont .manage-list li a .txt {
    flex: 1 0 0%;
}
.dashboard-det .box-info .dashboard-sub-cont .manage-list li a:hover {
    color: #119bd4;
}

/*.admin_widgets {
    margin-top: var(--bs-gutter-x);
}*/
.row > div {
    margin-bottom: var(--bs-gutter-x);
}
.panel-body .row > div{
    margin-bottom:0;
}
.box_bg > .panel {
    padding: 16px 20px;
    font-size: 0.9375rem;
    color: #495057;
}
.box_bg .mtp-cont .panel-body {
    font-size: 0.9375rem;
    color: #495057;
}
.panel-heading {
    font-size: 1rem;
    color: var(--default-color);
    font-weight: bold;
    margin-bottom: 30px;
}
.panel-heading.st {
    margin: 0 0 0 22px;
    color: var(--default-color);
    margin-bottom: 40px;
}
.news_list a {
    font-size: 0.9375rem;
    color: #495057;
}
.news_list li > a,
.news_list .multi-ele{
    padding: 10px 0;
    display: flex;
}
.news_list .multi-ele{
    flex-wrap:wrap;
}
.news_list li a .main-txt {
    flex: 1 0 0%;
    transition:all .3s ease;
}
.news_list li a .date {
    flex: 0 0 auto;
}
.news_list li > a,
.news_list .multi-ele{
    border-bottom: solid 1px #dee2e6;
}
.news_list .multi-ele a{
    transition:all .3s ease;
}
.news_list li a:hover .main-txt,
.news_list .multi-ele a:hover{
    color: #119bd4;
}

.lit-title {
    font-size: 0.9375rem;
    color: #495057;
    font-weight: bold;
}
.pah-order-list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.pah-order-list li {
    flex: 0 0 33.33%;
    margin-top: 16px;
}
.pah-order-list li a {
    font-size: 0.9375rem;
    color: #495057;
    transition: all .3s ease;
    padding-right: 10px;
}
.pah-order-list li a:hover {
    color: #119bd4;
}
.box-border-top {
    border-top: solid 1px #dee2e6;
    padding-top: 14px;
    margin-top: 14px;
}

/****** table *******/
.main-cont-panel .mtp-heading {
    background: var(--second-color);
    padding: 10px 30px;
    margin-bottom: 20px;
}
.main-cont-panel .mtp-heading.st {
    padding: 0;
}
.main-cont-panel .mtp-heading .mtp-heading-item {
    padding: 10px 20px;
}
.main-cont-panel .mtp-heading .mtp-heading-item + .mtp-heading-item {
    border-top: solid 1px #b5bec8;
}
.table-scroll {
    width: 100%;
    overflow: auto;
}
.table-scroll .w-1{
    display:block;
    min-width:80px;
}
.table-scroll .w-2{
    display:block;
    min-width:120px;
}
.table-scroll .w-3{
    display:block;
    min-width:30px;
}
.table th,.table td {
    text-align: center;
    font-size: 0.9375rem;
    color: #495057;
    padding: 10px;
}
.table th {
    font-weight: bold;
    border-bottom:solid 2px var(--third-color) !important;
}
input[type=checkbox] {
    width: 15px;
    height: 15px;
}
input[type=checkbox] + label {
    margin-bottom: 3px;
}
.table td {
    border-bottom: solid 1px var(--third-color);
}
.table td.detTd td {
    padding: 0;
    border: none;
}
.table>:not(:last-child)>:last-child>* {
    border-color: var(--third-color);
}
.table-hover>tbody>tr:hover {
    background: none;
    --bs-table-accent-bg: none;
}
.table {
    margin-bottom: 10px;
}

.table-wrapper {
    background: rgba(233,236,239,0.4);
}
.table-wrapper .table {
    width: 100%;
}


.content_box.memReport-area .table>:not(:first-child) {
    border-top: solid 1px #e9ecef;
}

/****** table *******/

.main-cont-panel .mtp-heading .heading-box{
    text-align:center;
    color:#fff;
    padding: 5px 0;
}

.treeview-area > div table,.treeview-area > div div {
    margin-bottom: 10px;
}
.treeview-area table a {
    padding-right: 5px;
    font-size: 0.9375rem;
    color: #495057;
}
ol.example li {
    border: none !important;
    list-style: none;
    font-size: 0.9375rem;
    color: #495057;
}

ol.album-list.example li {
    vertical-align: top;
    border: solid 1px #ccc !important;
}

ol.album-list.example li + li {
    margin-top: 5px;
}

ol.example li > span {
    display: inline-block;
    background: #f8f9fa;
    padding: 5px 10px;
    border-radius: 20px;
    transition: all .3s ease;
}

ol.example li + li {
    margin-top: 10px;
}

ol.example {
    padding-left: 0;
}

ol.example li:hover > span {
    background: #119bd4;
    color: #fff;
}
.photobox ol.example li {
    border: solid 1px #e7e7e7 !important;
    padding: 10px;
    border-radius: 5px;
    transition:all .3s ease;
}
.photobox ol.example li:hover {
    border-color: #3b7ddd !important;
}

.draggable .list-group-item .text-primary .icon {
    color: #119bd4;
}
.modal-header .close {
    border: none;
    background: #11171e;
    font-size: 2rem;
    line-height: 1;
    color: #fff;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    padding-bottom: 6px;
}

/******** tab *******/
.nav-tabs li a {
    padding: 7px 10px;
    display: block;
    background: #e0eeff;
    color: #495057 !important;
    border-radius: 5px;
    cursor: pointer;
    transition: all .3s ease;
}
.nav-tabs li {
    margin-right: 9px;
        margin-bottom: 10px;
}
.nav-tabs {
    border: none;
}
.nav-tabs li a.active {
    background: #3b7ddd;
    color: #fff !important;
}
.tabbable .tab-pane {
    background: rgba(233,236,239,0.4);
    padding: 20px;
    margin-top: 10px;
}
.nav-tabs li a:hover {
    background: #3b7ddd;
    color: #fff !important;
}

.chkform span .item {
    display: inline-block;
    margin-right: 10px;
}
.chkform span .item input {
    margin-right: 3px;
    vertical-align: top;
    margin-top: 4px;
}

/******** tab *******/

.lang-trans-title {
    font-size: 1rem;
    text-align: center;
    font-weight: bold;
    border-bottom: solid 2px #efefef;
    padding: 8px 0;
}

.lang-trans-cont .item {
    padding: 10px 0;
    border-bottom: solid 1px #efefef;
}
.lang-trans-cont .item:last-child{
    border:none;
}
.lang-trans-cont .item .title {
    text-align: right;
    word-break:break-all;
}
.newbox {
    background: rgba(233,236,239,0.4);
    padding: 20px;
}

/********** cuspage *********/

.alarm-txt {
    color: #b2ad99;
}
.preview-img .list-group-item {
	border: none;
}
.draggable:empty:before {
	content: "(請將要預覽的項目拉到這裡)";
	position: relative;
	display: block;
	padding: .75rem 1.25rem;
	background-color: #fff;
	color: #999;
	border-bottom: 1px solid rgba(0,0,0,.125)
}
.draggable .list-group-item {
	cursor: move
}
.setting-area .btn {
    padding: 3px 0 0;
}
.mtp-cont .drag-box .list-group-item .txt-area{
	flex: 0 0 calc(100% - 45px);
}

body.cuspage .main .side1 ul ul li a.menu {
    margin-right: 0;
}

body.cuspage .main .side1 ul ul li {
    margin-left: 30px;
}
body.cuspage .main .side1 ul ul {
    padding: 10px 0 10px 2rem;
}


.drag-area >  .title {
    padding: 10px;
    color: #867c27;
    font-weight: bold;
}


.small-word{
    font-size:0.75rem;
    color:#999;
}
.setting-box-wrapper .form:not(.noflex) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.setting-box-wrapper .form:not(.noflex) .form-group {
    width: 100%;
    margin: 5px 5px;
}


/*** setting-box ***/
.setting-box + .setting-box {
    margin-bottom: 30px;
}
.setting-box .form .form-group {
    margin: 10px 0 0;
    border: solid 1px #e0e0e0;
	padding-bottom:10px;
    font-size: 0.9375rem;
}
.setting-box .form .form-group.row > div {
    margin-bottom: 0;
}
.setting-box .title {
    font-size: 18px;
    font-weight: bold;
}
.setting-box .form .col-form-label {
    color: #989898;
}
.limited-height{
	max-height:250px;
	overflow:auto;
}

body.cuspage .nav-tabs .nav-link {
    color: #119bd4;
}

body.cuspage .nav-tabs .nav-link.active {
    background: var(--second-color);
    color: #fff;
}


/*******************/


body.cuspage .other-div {
    height: 150px;
    overflow: auto;
    border: solid 1px #ccc;
    border-top: none;
    padding: 10px 20px;
}

body.cuspage .other-selected {
    margin: 10px 5px 0;
}

body.cuspage .other-div > div label {
    max-width: calc(100% - 20px);
    vertical-align: top;
}

body.cuspage .other-selected-detail .checkbox-wrapper label {
    position: relative;
    z-index: 2;
    padding-left: 18px;
    background: url('../../../images/homeblock_delete.svg') left 3px no-repeat;
    background-size: 15px;
}

body.cuspage .other-selected-detail .checkbox-wrapper .checkboxc {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
}

body.cuspage .other-selected-detail .checkbox-wrapper .chkbox {
    position: relative;
}

body.cuspage .other-selected-detail .checkbox-wrapper {
    display: inline-block !important;
    margin-right: 10px;
}

body.cuspage .other-selected-detail .checkbox-wrapper input[type="checkbox"] {
    display: none;
}



body.cuspage .anchor-title-box .anchor-title {
    font-size: 16px;
    padding: 5px 20px;
    border-radius: 5px;
    margin-right: 10px;
    background: #119bd4;
    color: #fff;
}

body.cuspage .modal-header {
    flex-wrap: wrap;
}

body.cuspage .modal-header .flex-item.anchor-sec {
        display: block;
        width: 100%;
    }

body.cuspage .tab-content > .active {
    opacity: 1;
}

body.cuspage .tab-pane {
    padding: 10px;
    background: #f7f7f7;
}


/********** cuspage **********/


/********** login ***********/
body.home.login #sidebar,
body.home.login  .main > .navbar{
    display: none;
}
body.home.login  .main {
    padding-left: 0;
    width:100%;
    height:100%;
}
body.home.login main.content {
    overflow-y: auto;
    overflow-x: hidden;
}
/********** login ***********/


/******** radio style ********/
.rad-cusCont-list .item {
    height: 100%;
    margin-bottom: 15px;
}
.rad-cusCont-list .item .rad-cusCont {
    height: 100%;
    cursor: pointer;
    transition: all .3s ease;
    position:relative;
    width:100%;
}
.rad-cusCont-list .item .rad-cusCont .lp-cont{
    border: solid 1px #ced4da;
    border-radius: 4px;
    padding: 10px;
}
.rad-cusCont-list .item .rad-cusCont input[type=radio]{
    display:none;
}
.rad-cusCont-list .item .rad-cusCont input[type=radio] + label {
    display: none;
}
.rad-cusCont-list .item .rad-cusCont input[type=radio]:focus,
.rad-cusCont-list .item .rad-cusCont input[type=radio]:active{
    outline: none !important;
}
.rad-cusCont-list .item .rad-cusCont input[type=radio]:checked + label + .lp-cont{
    border-color:#119bd4;
}


.rad-cusCont-list .item .rad-cusCont .icon-group{
    position:absolute;
    left:10px;
    top:5px;
    font-size:1.4rem;
    color:#119bd4;
}
.rad-cusCont-list .item .rad-cusCont .icon-group .i-unok{
    display:block;
    color:#b5b5b5;
}
.rad-cusCont-list .item .rad-cusCont .icon-group .i-ok{
    display:none;
}
.rad-cusCont-list .item .rad-cusCont input[type=radio]:checked + label + .lp-cont .icon-group .i-unok{
    display:none;
}
.rad-cusCont-list .item .rad-cusCont input[type=radio]:checked + label +  .lp-cont .icon-group .i-ok{
    display:block;
}

.rad-cusCont:hover {
    opacity: 0.8;
}

/******* radio stylw ********/

/**** dataset ****/
.dataset {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    background: #f5f7fb;
    padding: 10px;
    border:solid 1px #ccc;
}
.dataset li {
    width: 100%;
    /* border: solid 1px #ccc; */
    padding: 5px 10px;
    border-top: none;
    /* text-align: center; */
    color: #888;
    display: flex;
    justify-content: space-between;
    margin: 0 15px;
    padding: 2px 5px;
    font-size: 0.875rem;
}

.dataset li:nth-child(1),.dataset li:nth-child(2) {
    /* border-top: solid 1px #ccc; */
}
.dataset li:first-child {
    /* padding-left: 10px; */
}
.dataset li:nth-child(2n+1):not(:last-child) {
    /* border-right: 0; */
}
.dataset li b {
    margin-right: 10px;
    color: #5a5a5a;
}
.dataset li i {
    color: #3b7ddd;
    font-weight: bold;
}
.chart_canvas_sec {
    width:100%;
    height: 100%;
    min-height: 50vh;
}
.chart_canvas_sec canvas{
    object-fit:contain;
    width:100% !important;
    height:100% !important;
}
.chartjs-render-monitor{
    width:100% !important;
}
/**** dataset ****/

@media (min-width: 576px){
    .w-sm-auto{
        width:auto !important;
    }
    .setting-box-wrapper .form:not(.noflex) .form-group{
        width: calc(50% - 20px);
        flex: 0 0 calc(50% - 20px);
    }
    .dataset li {
        width: calc(50% - 30px);
    }
}
@media (min-width: 768px){
    body.cuspage .modal-dialog {
        max-width: 90%;
    }
}
@media (min-width: 992px){

}
@media (min-width: 1200px){
    .h-lg-100{
        height:100%;
    }
}
@media (min-width: 1400px){

}

@media (max-width: 1399px){
    .dashboard-det .icon-group {
        width: 50px;
        padding: 16px 10px 0;
    }
    .dashboard-det .icon-group .icon {
        width: 30px;
        height: 30px;
        background-size: 100%;
    }
    .dashboard-det .icon-group .icon.icon-infolg {
        width: 8px;
    }
}
@media (max-width: 1199px){
    .dashboard-det .icon-group {
        flex: 0 0 100%;
        padding: 10px;
    }
    .dashboard-det .box-info {
        flex: 0 0 100%;
    }
}
@media (max-width: 991px){
    .main .content .content_box {
        padding: 25px;
    }
    .main .content .content_box {
        padding: 148px 25px 25px;
    }
    .dashboard-det .box-info .dashboard-sub-title,.panel-heading {
        margin-bottom: 20px;
    }

    .templates-blocks-menu-area {
        position: fixed;
        right: 0;
        top: 67px;
        overflow: auto;
        background: #495057;
        padding: 10px;
        width: 280px;
        height: calc(100vh - 67px);
        transition: all .3s ease;
        z-index: 5;
    }
    .templates-blocks-menu-area .card {
        height: 100%;
        overflow: auto;
        padding: 10px;
    }
    .templates-blocks-menu-area .toggle-button-box {
        position: fixed;
        right: 280px;
        transition: all .3s ease;
        top: 67px;
    }
    .templates-blocks-menu-area .toggle-button-box .btn {
        background: #495057;
        border: none;
        border-radius: 5px 0 0 5px;
    }
    .templates-blocks-menu-area.close-menu {
        right: -280px;
    }
    .templates-blocks-menu-area.close-menu .toggle-button-box{
        right:0;
    }
    body.cuspage .main .content {
        z-index: 2;
    }

}
@media (max-width: 767px){
    .main .content .content_box {
        padding: 15px;
    }
    .row > div {
        margin-bottom: 15px;
    }
    .panel-heading.st {
        margin-bottom: 20px;
    }
    .lang-trans-cont .item .title{
        text-align:left;
        margin-bottom:7px;
    }
}
@media (max-width: 575px){
    .btn.btn-bord.st {
        padding: 9px 10px;
    }
    .main > .navbar .breadcrumb{
        display:none;
    }
    .main > .navbar {
        padding: 8px 10px;
    }
    .main > .navbar .navbar-item .navbar-nav .nav-item .nav-link {
        font-size: 1.25rem;
        padding: 5px 9px;
    }
    .icon.icon-wrp {
        width: 20px;
        height: 20px;
        margin-top: 7px;
    }
    .dashboard-det .box-info {
        padding: 10px;
        margin-bottom: 0;
    }
    .dashboard-det .icon-group {
        margin-bottom: 6px;
    }
    .dashboard-det .icon-group .icon {
        width: 20px;
        height: 20px;
    }
    .dashboard-det .icon-group .icon.icon-infolg {
        width: 5px;
    }
    .news_list li > a {
        flex-wrap: wrap;
    }
    .news_list li a .main-txt {
        flex: 0 0 100%;
        order: 2;
    }
    .news_list li a .date {
        flex: 0 0 100%;
        order: 1;
        font-size: 0.875rem;
        margin-bottom: 4px;
    }
    .panel-heading {
        margin-bottom: 10px;
    }
    .main {
        padding-left: 0;
    }
    body.hideSide .page-wrapper {
        margin-left: 0;
    }
    .page-wrapper {
        margin-left: 264px;
        transition: all .3s ease;
    }
    .page-wrap {
        width: 100vw;
        overflow: hidden;
    }
    .control-label {
        padding-top: 0;
    }
    .main-cont-panel .mtp-heading {
        padding: 10px 10px;
    }
    
    .main .content_box .search_panel{
        margin-bottom:0;
        padding: 10px 0;
    }
    .pager_wrapper {
        display: block;
        padding: 0 10px;
    }
    .pager_wrapper .page_info {
        justify-content: center;
    }
    .pager_wrapper > .btn-group {
        margin-right: 0;
    }
    .newbox {
        padding: 10px;
    }

    body.cuspage .card-header {
        width: 100%;
    }
    .templates-blocks-menu-area .draggable .list-group-item{
        padding:0;
    }

}