html {
    height: 100%;
}

body {
    background: #F8F6FB;
}

/*上方列***********************************************/
header .dropdown-menu {
    left: auto;
    right: 0;
}

header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 999;
}

header .navbar {
    background: #FFFFFF;
}

header .navbar .nav-link a .img {
    vertical-align: sub;
}

header .navbar-img-align {
    vertical-align: sub;
}

header .nav-link i {
    font-style: inherit;
    text-indent: 5px;
}

header .nav-system {
    font-family: 'Noto Sans TC', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    color: #4D4D4D;
    /* padding-top:5px; */

}

header .navbar-customized {
    margin-bottom: -3px;
}

header .navbar-toggler-humburger-icon {
    background: #F8F6FB;
    border-radius: 50px;
    margin-right: 10px;
}

header .navbar-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0.145rem;
    top: 0.355rem;
    height: 1rem;
    width: 1rem;
    font-size: .67rem;
    color: #fff;
    font-weight: 700;
}

header .dropdown-menu-dark .dropdown-divider {
    border-color: #FFF !important;
    margin: 3px !important;
}

header .dropdown-menu-dark .dropdown-item {
    color: #FFF;
}

header .dropdown-menu-dark .dropdown-item.text-color {
    color: #FF7527;
    font-weight: 1000;
}


/* .notification-indicator-warning::before {
    background-color: #FF7527;
} */
/* .notification-indicator::before { */
header .navbar-badge {
    /* position: absolute; */
    /* content: ""; */
    /* right: 0.125rem; */
    /* top: 0.3rem; */
    /* height: 1.1rem; */
    /* width: 1.1rem; */
    border-radius: 50%;
    border: 2px solid #FF7527;
    background-color: #FF7527;
}

header .navbar-badge:empty {
    display: none;
}

header .menu.btn:first-child:active {
    border-color: transparent !important;
}

header .menu.btn:hover {
    background-color: #F8F6FB !important;
}
/*側邊欄**********************************************************/
.app-aside {
    position: absolute;
    top: 68px;
    left: 12px;
    /* bottom: 0; */
    padding: 0;
    width: calc(100vw - 3.5rem);
    max-width: 16.5rem;
    z-index: 1050;
    /* transform: translate3d(-120%,0,0); */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform .2s ease-in-out;
    background: #FFFFFF;
    box-shadow: 0px 8px 8px rgba(50, 50, 71, 0.08), 0px 8px 16px rgba(50, 50, 71, 0.06);
    border-radius: 20px;
}

/* body .app-aside+.app-main {
    padding-left: 14.5rem;
} */


/* aside .btn-toggle::after{
    vertical-align: sub;
} */

aside .btn-toggle::after {
    width: 1.25em;
    line-height: 0;
    content: url('/image/menu_chevron_right.png');
    display: inline-block;
    vertical-align: bottom;
    margin-left: 30px;
}

aside .btn-toggle[aria-expanded="true"]::after {
    transform: rotate(90deg);
}

aside .menu-sub-li1:hover .cylinder,
aside .menu-sub-li2:hover .cylinder,
aside .menu-sub-li3:hover .cylinder {
    width: 5px;
    height: 40px;
    background-color: #FF7527;
    position: fixed;
    /* top: 0px; */
    /* left: 0px; */
    display: flex;
    margin-left: -16px;
}

aside .menu-sub-li1 button:focus {
    border-color: transparent !important;
}

aside .menu-sub-li1:hover button {
    color: #FF7527 !important;
    border-color: transparent !important;
}

aside .menu-sub-li1:hover button img {
    content: url('/image/reportresearch2.png');
}

aside .menu-sub-li2 button:focus {
    border-color: transparent !important;
}

aside .menu-sub-li2:hover button {
    color: #FF7527 !important;
    border-color: transparent !important;
}

aside .menu-sub-li2:hover button {
    color: #FF7527 !important;
    border-color: transparent !important;
}

aside .menu-sub-li2:hover button img {
    content: url('/image/contrast2.png');
}

aside .menu-sub-li2:hover .btn-toggle {
    color: #FF7527;
}

aside .menu-sub-li2:hover .btn-toggle::after {
    content: url('/image/menu_chevron_right.png');
    color: #FF7527;
}

aside .menu-sub-li3 button:focus {
    border-color: transparent !important;
}

aside .menu-sub-li3:hover button {
    color: #FF7527 !important;
    border-color: transparent !important;
}

aside .menu-sub-li3:hover button img {
    content: url('/image/contrast2.png');
}

aside .menu-sublist {
    font-family: 'Noto Sans TC', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    /* or 22px */
    color: #777777;
    text-decoration: none;
}

aside .menu-sublist:hover {
    color: #FF7527 !important;
}

aside .menu-list-a {
    font-family: 'Noto Sans TC', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    /* or 22px */
    color: #777777;
    text-decoration: none;
}

aside .menu-list-a:hover {
    color: #FF7527 !important;
}

aside .menu-text {
    font-family: 'Noto Sans TC', sans-serif;
    vertical-align: inherit;
}

aside .btn-toggle-nav a {
    display: inline-flex;
    padding: 0.2875rem 0.5rem;
    margin-top: 0.125rem;
    margin-left: 42px;
    text-decoration: none;
}

aside button {
    outline: 0;
}

aside .btn:focus {
    outline: none;
    box-shadow: none;
}


/* @media screen and (min-width: 768px) { */

/*導覽列出現時*/
.app-aside-expand-md {
    top: 68px;
    width: 13.5rem;
    z-index: 6;
}

/* } */


/*內容*/
.app-main {
    position: relative;
    display: flex;
    padding-top: 13px;
}

.app-main .container-fluid {
    background: #FFF;
    box-shadow: 0px 8px 8px rgba(50, 50, 71, 0.08), 0px 8px 16px rgba(50, 50, 71, 0.06);
    border-radius: 20px;
    margin-right: 10px;
    margin-left: 10px;
    padding: 10px;
}

/* main .content{
} */

@media screen and (min-width: 768px) {

    /*導覽列出現時*/
    main .content {
        top: 68px;
    }
}

/*側邊欄預設關閉*/
.app-aside {
    display: none;
    width: 0px;
}

body .app-aside+.app-main {
    padding-left: 0px;
}

.was-validated .form-control:valid, .was-validated .form-select:valid{
    border: 1px solid #ced4da !important;
    background-image: none !important;
    /* border-color: #212529 !important; */
}

.form-check-input.is-valid, .was-validated .form-check-input:valid {
    border-color: #FF7527 !important;
    /* background-color: #FF7527 !important; */
}

.form-check-input:checked[type=radio] {
    background-color: #FF7527 !important;
    border-color: #FF7527 !important;
}