/* 自定義portal元件的模板 */
@import url(portal-model.css);
/* 護理指標暫解 */
.portal .imenu.popup .dropdown {
    position: absolute;
    margin-top: -15px;
}

.portal .imenu.popup .nav > li > a {
    padding-top: 0;
    padding-bottom: 0;
}

.portal .imenu.popup.xxx .dropdown {
    margin-left: -40px;
}

@media (max-width: 767px) {
    .navbar-form {
        margin: 0;
        border-top: 0;
        border-bottom: 0;
    }
}
html { min-height:100vh; }
body {
    height: 100%;
    font-family: 'Microsoft JhengHei UI','Microsoft JhengHei',PMingLiU,MingLiU,'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif!important;
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

.navbar {
    border: none;
    background-color: #e7e7e7;
    border-bottom: solid 1px rgba(0, 0, 0, 0.05);
}

.navbar[role="navigation"] {
    /*box-shadow: 0 0 4px #aeaeae;*/
    background-color: #fafafa;
    background-image: -webkit-linear-gradient(top,rgba(0,0,0,0) 0%, rgba(0,0,0,0.02) 100%);
}

.msptags .utags {
    border: solid 4px rgba(0, 0, 0, 0.01);
}

.navbar-brand {
    padding: 7px 0 7px 10px;
}

.navbar-brandtitle {
    font-size: 24px;
    margin-left: 10px;
    position: absolute;
    top: 9px;
    color: #337AB7;
    overflow: hidden;
    white-space: nowrap;
    /* text-overflow: ellipsis; */
    max-width: 310px;
}

.navbar-title {
    font-size: 16px;
}

.navbar-title li:hover {
    /*background-color: #ddd;nono*/
}

.navbar-title-active:before {
    content: "";
    top: 50%;
    left: 5px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: inline-block;
    position: absolute;
    border-top: 5px solid transparent;
    border-left: 5px solid #337AB7;
    border-bottom: 5px solid transparent;
}

.navbar-form {
    margin: 8px 0 7px;
}

.form-control {
    margin: 0;
}

.user-info {
    padding-left: 10px;
}

.user-info img {
    background-color: #ffffff;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 20px;
}

#user-menu-btn {
    width: 100%;
    min-width: 150px;
    color: #ffffff;
    font-weight: bold;
    border-radius: 25px 0 0 25px;
    background-color: #688ab6;
    padding: 11px 0 11px 40px;
    height: 50px;
    box-shadow: 0 0 2px #688ab6;
}

@media (max-width: 767px) {
    .user-info {
        padding-right: 10px;
    }
    #user-menu-btn {
        border-radius: 25px;
    }
}

#user-menu-btn:hover {
    background-color: #5b789e;
}

#user-menu-btn > span {
    margin: 0 0 0 8px;
    padding: 0;
    font-size: 18px;
}

#user-menu-list {
    min-width: 180px;
}

#advanced-search {
    min-width: 200px;
    position: absolute;
    margin-left: 2px;
    margin-top: -5px;
    background-color: #ffffff;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    left: 15px;
    z-index: 1020;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.navbar-btn-group {
    margin: 8px 0;
}


/* start main style 

#main {
    background-color: #fff;
    padding: 0;
    position: fixed;
    top: 50px;
    bottom: 30px;
    right: 0;
    -webkit-transition: left ease-in-out .5s;
    -o-transition: left ease-in-out .5s;
    transition: left ease-in-out .5s;
    overflow: auto;
}*/
#main {
    /*background-color: #fff;*/
    padding: 0;
    position: relative;
    margin: 50px 0 30px 300px;
    -webkit-transition: ease-in-out .5s;
    -o-transition: ease-in-out .5s;
    transition: ease-in-out .5s;
}
.navbar { margin-bottom:0; }
div#main.sct {
    margin-bottom: 0;
}
.iframe #main {
    position: relative;
    top: 0;
    bottom: 0;
}
/* end main style */

/* start sidebar style */
#sidebar {
    background-color: #fafafa;
    background-image: none;
    /*border-right: 1px solid #ddd;*/
    top: 51px;
    bottom: 30px;
    overflow: hidden;
    width: 300px;
    padding: 0;
    position: fixed;
    z-index: 10000;
    -webkit-transition: left ease-in-out .5s;
    -o-transition: left ease-in-out .5s;
    transition: left ease-in-out .5s;
}

#sidebar {
    left: 0;
}

@media screen and (max-width: 1023px) {
    #main {
        margin-left: 0!important;
    }
    #sidebar {
        left: -450px;
    }
    .page-body.hlb.sidecontrl > #sidebar {
        left: -450px;
    }
    .page-body.sidecontrl > #sidebar, .page-body.hlb > #sidebar {
        left: 0;background-color: #f6f6f6;
    }
    .withficonbar #main {
        margin-left: 54px!important;
    }
    /*.withficonbar#sidebar {
        left: -354px;
    }*/
    .page-body.hlb.sidecontrl.withficonbar > #sidebar {
        left: -354px!important;
    }
    .page-body.sidecontrl.withficonbar > #sidebar {/*, .page-body.hlb.withficonbar > #sidebar*/
        left: 54px;
    }
}

@media screen and (min-width: 1024px) {
    #sidebar {
        left: 0;
    }
    .sidecontrl > #sidebar {
        left: -450px !important;
    }
    #main {
        /*margin-left: 300px;*/
    }
    #main .progress { margin-bottom:0; }
    .sidecontrl > #main {
        margin-left: 0 !important;
    }
    .withficonbar #main {
        margin-left: 354px!important;
    }
    .withficonbar.smlbx #main { margin-left: 219px!important; }
    .withficonbar.mdlbx #main { margin-left: 299px!important; }
    .withficonbar.lglbx #main { margin-left: 454px!important; }
    .sidecontrl.withficonbar #main {
        margin-left: 54px!important;
    }
    .withficonbar #sidebar {
        left: 54px;
    }
    .withficonbar.hlb.sidecontrl > #sidebar {
        left: -354px !important;
    }
}
/*function bar*/
div#ficonbar {
    text-align: center;
    background-color: slategrey;
    background-image: none;
    top: 0;
    bottom: 0;
    overflow: hidden;
    width: 54px;
    position: fixed;
    z-index: 1001;
    -webkit-transition: left ease-in-out .5s;
    -o-transition: left ease-in-out .5s;
    transition: left ease-in-out .5s;
    left: 0px;
    padding: 0 3px;
    overflow-y: auto;
    margin: 50px 0 30px;
    border-radius: 0 3px 0 0;
}
div#ficonbar .href img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    padding: 3px;
}
div#ficonbar.contentonly {
    margin-bottom: 0;
    margin-top: 50px;
}
div#ficonbar .icon {
    font-size: 22px;
    padding: 8px 12px 12px;
    color: white;
}
div#ficonbar .href .icon:hover {
    color: #ffdead;
}
div#ficonbar hr {
    margin: 6px 0px 1px !important;
    border-top: solid 1px rgba(255,255,255,0.2) !important;
}
div#ficonbar .btn .icon {
    padding: 0;
}
div#ficonbar .btn-default .icon {
    color: #6495ed;
}
div#ficonbar .btn {
    margin: 6px 2px 2px;
    padding: 5px 0px;
    width: calc(100% - 4px);
}
.itembox .icontip { display:inline-block; font-size: 0.86em; margin: 0 4px; /*color: dimgray;*/ }
#ficonbar .itembox .icontip { display:block; margin:0; margin-top:-8px;font-size:0.82em;text-align:center;color:white;overflow:hidden; white-space:nowrap; }
.withficonbar #sidebar {
    
}
#ficonbar .navbar-brand {
    position: fixed;
    width: 54px;
    top: 0;
    left: 0;
    margin: 0;
    padding: 4px 2px;
    /*border-bottom: solid 1px darkgray;*/
    height: 50px;
    max-height: 50px;
    /*background-color: gray;*/
    background-image: -webkit-linear-gradient(top,rgba(0,0,0,0) 10%, rgba(0,0,0,0.25) 100%);
}
#ficonbar .navbar-brand img {
    width: 50px;
    padding: 0;
    margin: 0;
}
#sidebar .sidebar-title a, #sidebar .sidebar-title a:hover {
    color: White;
    text-decoration: none;
}

.sidebar-title {
    background-color: rgba(0,0,0,0.432);
    border-radius: 2px;
    color: #ffffff;
    font-size: 18px;
    margin: 10px;
    text-align: center;
    padding: 6px 5px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
}
#sidebar hr {
    margin: 5px 10px!important;
    border-top: solid 1px rgba(0,0,0,0.05);
}
.sidebar-title-back {
    color: #ffffff;
    position: absolute;
    left: 20px;
    padding-top: 2px;
    cursor: pointer;
}

.sidebar-title-forward {
    color: #ffffff;
    position: absolute;
    right: 20px;
    padding-top: 2px;
    cursor: pointer;
}

#main .sidebar-box {
    padding: 0px 8px;
    display: inline-block;
}

#sidebar .sidebar-box {
    font-size: 16px;
    vertical-align: text-top;
    /*margin-left: 10px;*/
    position: relative;
    padding: 6px 12px 4px 0;
}

#sidebar .sidebar-box.sub {
    padding-left: 1em;
}
#sidebar .sidebar-box:hover {
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 50px 0 0 50px;
    z-index: 1050;
}

#sidebar .sidebar-box a {
    text-decoration: none;
}

#sidebar .sidebar-box-img {
    position: absolute;
    left: 5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-top: -20px\9;
    z-index: 1;
}

#sidebar .sidebar-box-img img {
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    margin: 5px;
}

#sidebar .square .sidebar-box-img img {
    border-radius: 2px;
}

#sidebar .imenu .sidebar-box-img img {
    /*background-color: powderblue;*/
}

#sidebar .sidebar-box-title > a {
    padding-left: 50px;
    display: block;
}

#sidebar .sidebar-box-title > a:hover {
    color: coral;
}

#sidebar .sidebar-box-title > .sidebar-box-tip {
    padding-left: 50px; /*40+50??*/
    display: block;
    line-height:1.26em;
}

#sidebar .mini .sidebar-box {
    padding: 3px 12px 1px 0;
    margin-left:5px;
}
#sidebar .mini .boxgroup .text {
    margin: 10px 10px 4px 15px;
}
#sidebar .mini .sub .sidebar-box-img img {
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background-color: transparent;
}

#sidebar .mini .sidebar-box-img img {
    width: 22px;
    height: 22px;
    margin-top: 1px;margin-left:3px;
    opacity: 0.6;
}
#sidebar .capsule .items > a {
    padding: 4px 15px 4px 32px;
    margin: 0 0px 1px 0;
    border-radius: 1.2em;
    width: calc(100% + 5px);
    display: block;
    box-shadow: 4px -2px 12px -4px inset;
    font-size: 16px;
}
.capsule .sidebar-box.selected a {
    color: darkred !important;
}
#sidebar .items > a {
    color: #333333;
    margin-left: 17px;
    font-size: 16px;
}
#sidebar .mini .sidebar-box-img {
    top: 16px;
}

#sidebar .mini .sidebar-box-title > a {
    padding-left: 32px;
    color: #333333;
}
#sidebar .mini .sidebar-box-img img {
    opacity: 0.32;
}

#sidebar .mini .sidebar-box-tip {
    padding-left: 32px;
}

#sidebar .sidebar-box:hover .sidebar-box-title > a {
    top: 6px;
}

#sidebar .sidebar-box:hover .sidebar-box-tip {
    bottom: 6px;
}

#sidebar .sidebar-box-tip {
    /*margin-right: 10px;  */
}

#sidebar .sidebar-box-tip, #sidebar .sidebar-box-tip > a {
    color: #888888;
    font-size: 14px;
}

#sidebar .mini .sidebar-box-tip, #sidebar .mini .sidebar-box-tip > a {
    font-size: 13px;
}

#sidebar .sidebar-box-tip > a.important:before {
    content: "*";
    margin-left: 2px;
    margin-right: 6px;
    color: #ff9900;
}

#sidebar .sidebar-box-tip > a:after {
    content: "";
}

#sidebar .sidebar-box-tip > a:hover {
    /*color: #ff9900;*/
}

#sidebar .sidebar-thumb {
    background-color: transparent;
    width: 100%;
    border: 0;
    padding: 0;
}

#sidebar .sidebar-box.selected {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    /*margin-left: 10px;*/
}

#sidebar .sidebar-box.selected:hover {
    background-color: #ffffff;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border: none;
    margin-right: 0;
    box-shadow: none;
}

#sidebar .mini .sidebar-box.selected, #sidebar .mini .sidebar-box:hover {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

#sidebar .sidebar-box .selected:hover .sidebar-box-title > a {
    top: 8px;
}

#sidebar .sidebar-box .selected:hover .sidebar-box-tip {
    bottom: 8px;
}

#sidebar .sidebar-box.selected:after {
    content: "";
    border-top: 10px solid transparent;
    border-right: 10px solid white;
    border-bottom: 10px solid transparent;
    z-index: 1030;
    position: absolute;
    top: calc(100% / 2 - 10px);
    margin-left: calc(100% - 10px);
}

#sidebar .imenu .sidebar-box.selected:after {
    margin-left: calc(100% + 2px);
}


/* end sidebar style */


/* start footer style */

.footer-portal {
    clear: both;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10002;
    width: 100%;
    height: 30px;
    /* Set the fixed height of the footer here */
    line-height: 30px;
    background-color: #e7e7e7;
    padding: 0 !important;
    /*border-top: 1px solid #ddd;*/
}

.footer-sidebar {
    float: left;
    display: inline-table;
    table-layout: collapse;
    width: 54px;
    background-color: #9ab0d9;
}

.footer-sidebar > .footer-sidebutton {
    color: #ffffff;
    background-color: #5f8ab7;
    /*border-color: #286090;
	border-style: solid;
	border-width: 0;
	border-radius: 0;*/
    display: table-cell;
    height: 30px;
    padding: 0 5px;
}

.footer-sidebar > .footer-sidebutton:hover, .footer-sidebar > .footer-sidebutton:active {
    background-color: #286090;
}

.footer-sidebar > #sidebar_switch {
    border-width: 0;
}

.footer-main {
    color: #555555;
    overflow: hidden;
}

.sidebar-switch {
    width: 40px;
    height: 40px;
    color: #333333;
    background-color: #ffffff;
    border-color: #dddddd;
}

.sidebar-switch:hover {
    color: #337AB7;
}

.copyrightinfo {
    margin-left: 15px;
    margin-right: 15px;
    position: absolute;
    top: 0;
    top: 3px\9;
    right: 0; font-size:small;
}
.copyrightinfo a {
    margin-left: 6px;
}
.copyrightinfo #olus {
    border-width: 0 1px 0 0;
    border-style: solid;
    border-color: #555555;
    border-radius: 0;
    color: #555555;
    padding: 0 9px 0 0;
}

@media (max-width: 550px) {
    .copyrightinfo #olus {
        display: none !important;
    }
}

@media (max-width: 430px) {
    .copyrightinfo {
        display: none !important;
    }
}


/* end footer style */

.dropdown-menu label {
    font-weight: 500;
}

.edit-sqlid, .nocache {
    padding-left: 38px;
}

.nocache {
    padding-top: 10px;
}

.edit-sqlid input[type="checkbox"], .nocache input[type="checkbox"] {
    margin-left: -18px;
}

.navbar-nav a[type="button"] {
    /*margin-top: 8px;
	margin-bottom: 8px;*/
}

.input-group .dropdown-toggle {
    padding: 6px 4px;
}

.gradient-green {
    background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #8CD959), color-stop(1, #3D870C));
    background-image: -o-linear-gradient(bottom, #8CD959 0%, #3D870C 100%);
    background-image: -moz-linear-gradient(bottom, #8CD959 0%, #3D870C 100%);
    background-image: -webkit-linear-gradient(bottom, #8CD959 0%, #3D870C 100%);
    background-image: -ms-linear-gradient(bottom, #8CD959 0%, #3D870C 100%);
    background-image: linear-gradient(to bottom, #8CD959 0%, #3D870C 100%);
}

.gradient-red {
    background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #D95B5B), color-stop(1, #870C0C));
    background-image: -o-linear-gradient(bottom, #D95B5B 0%, #870C0C 100%);
    background-image: -moz-linear-gradient(bottom, #D95B5B 0%, #870C0C 100%);
    background-image: -webkit-linear-gradient(bottom, #D95B5B 0%, #870C0C 100%);
    background-image: -ms-linear-gradient(bottom, #D95B5B 0%, #870C0C 100%);
    background-image: linear-gradient(to bottom, #D95B5B 0%, #870C0C 100%);
}

.gradient-blue {
    background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #5e92c1 ), color-stop(1, #0C4885));
    background-image: -o-linear-gradient(bottom, #5e92c1 0%, #0C4885 100%);
    background-image: -moz-linear-gradient(bottom, #5e92c1 0%, #0C4885 100%);
    background-image: -webkit-linear-gradient(bottom, #5e92c1 0%, #0C4885 100%);
    background-image: -ms-linear-gradient(bottom, #5e92c1 0%, #0C4885 100%);
    background-image: linear-gradient(to bottom, #5e92c1 0%, #0C4885 100%);
}

.gradient-yellow {
    background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #eead57), color-stop(1, #857D0D));
    background-image: -o-linear-gradient(bottom, #D9D95B 0%, #eead57 100%);
    background-image: -moz-linear-gradient(bottom, #D9D95B 0%, #eead57 100%);
    background-image: -webkit-linear-gradient(bottom, #D9D95B 0%, #eead57 100%);
    background-image: -ms-linear-gradient(bottom, #D9D95B 0%, #eead57 100%);
    background-image: linear-gradient(to bottom, #D9D95B 0%, #eead57 100%);
}

.gradient-orange {
    background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #D9945B), color-stop(1, #854F0D));
    background-image: -o-linear-gradient(bottom, #D9945B 0%, #854F0D 100%);
    background-image: -moz-linear-gradient(bottom, #D9945B 0%, #854F0D 100%);
    background-image: -webkit-linear-gradient(bottom, #D9945B 0%, #854F0D 100%);
    background-image: -ms-linear-gradient(bottom, #D9945B 0%, #854F0D 100%);
    background-image: linear-gradient(to bottom, #D9945B 0%, #854F0D 100%);
}

.gradient-pink {
    background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #FFE3E3), color-stop(1, #FF9494));
    background-image: -o-linear-gradient(bottom, #FFE3E3 0%, #FF9494 100%);
    background-image: -moz-linear-gradient(bottom, #FFE3E3 0%, #FF9494 100%);
    background-image: -webkit-linear-gradient(bottom, #FFE3E3 0%, #FF9494 100%);
    background-image: -ms-linear-gradient(bottom, #FFE3E3 0%, #FF9494 100%);
    background-image: linear-gradient(to bottom, #FFE3E3 0%, #FF9494 100%);
}

.space-footer {
    margin-bottom: 20px;
}

.ts {
    margin-top: 20px;
}

.ts-grid {
    padding: 15px;
    border-radius: 10px;
    border: 2px solid #337AB7;
    height: 100px;
    margin-bottom: 10px;
}

.div-block {
    padding: 5px 10px !important;
}

.ts-grid:hover {
    border: 2px solid #3c763d;
}

.ts-name, .ts-title, .ts-detail {
    color: #404040;
    font-size: 16px;
    padding: 0;
    white-space: nowrap;
}

.ts-name > a, .ts-title > a, .ts-detail > a {
    font-size: 16px !important;
}

.ts-title {
    text-align: right;
}

.ts-detail {
    text-align: center;
    padding: 0;
}

.ts-header {
    position: relative;
    width: 100%;
    text-align: center;
    opacity: 0.68;
}

.ts-header-left {
    position: absolute;
    left: 0;
}

.ts-header-right {
    position: absolute;
    right: 0;
}

.ts-header > a {
    font-size: 40px;
    color: #ffffff;
    height: 80px;
    line-height: 80px;
    font-weight: 800;
}

.ts-header > a:hover {
    color: #ffffff;
}

.ui-grid .row {
    padding: 0;
    margin: 0;
}

.portal .ui-grid tbody td {
    width: inherit;
}

.rightbar > div > a > img {
    vertical-align: top !important;
}

.txt {
    color: #ffffff;
}

.pagemenubar .ref:hover, .pagemenubar a.href:hover, .pagemenubar .hlb:hover, .txt:hover {
    color: orange !important;
    text-decoration: none;
}

.card-body {
    padding-top: 5px;
}

.card-header {
    margin: 4px 0 4px -16px;
    height: 42px;
    font-size: 16px;
    overflow: hidden;
}

.card-footer {
    text-align: right;
    margin-right: 5px;
}

.ui-grid .body {
    overflow: visible;
    /*border:solid 1px rgba(0,0,0,0.12);*/
}

.card .group .cn, .card .data .cn {
    color: #333333;
}

.hev-page {
    width: 400px;
}


/* Replace msp.css */

.menubar {
    background-image: -webkit-linear-gradient(top, rgba(128, 128, 128, 1) 0%, rgba(0, 0, 0, 0.36) 100%);
    background-image: -ms-linear-gradient(top, rgba(128, 128, 128, 1) 0%, rgba(0, 0, 0, 0.36) 100%);
    background-image: -moz-linear-gradient(top, rgba(128, 128, 128, 1) 0%, rgba(0, 0, 0, 0.36) 100%);
    height: 40px !important;
}

.rightbar .boxitem.selected {
    color: #ffffff;
    background-color: #337AB7;
    background-image: none;
}

.rightbar .boxitem.selected a {
    color: #ffffff;
}

.leftbar .box .navbox:hover {
    color: #ffffff;
    background-color: #808080;
}
.pagemenubar .box {
    margin: 0 1px;
    margin-top: -6px;
}
.leftbarbody .boxitem .tipbox .ob, .leftbarbody .boxitem .tipbox a {
    color: #555555;
    font-size: 14px;
}

.leftbarbody .boxitem .tipbox a:hover {
    color: #aaaaaa;
}

.rightbar .navbox:hover, .rightbar .navbox.selected:hover {
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 100%);
}

.rightbar .hbox.navbox:hover, .leftbar .navbox:hover {
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.32) 100%);
}

.hbox:hover,.box:hover {
    /*box-shadow: -0 -0 4px #F44336;*/
}

#sidebar .boxitem.selected, .body .tdl {
    background-color: #ffffff;
}

#sidebar .boxitem {
    background-color: rgba(0, 0, 0, 0.02);
}

#sidebar .boxitem.selected a {
    color: #337ab7;
}

#sidebar .boxgroup {
    
}

#sidebar .boxgroup .text {
    display: inherit;
    border-bottom: solid 2px rgba(20, 0, 0, 0.12);
    color: #955a6d;
}

.leftbar .boxitem.selected:hover {
    background-color: #ffffff;
}


/* Replace mspobjs.css */
.items .boxitem {
    border-radius: 5px;
}

.imenu.popup .items {
    background-color: transparent;
}

.block {
    margin: 4px;
    min-width: 136px;
}
.boxgroup {
    border-color: #337AB7;
    font-weight: 700;
}

.boxgroup .text {
    border-radius: 0;
    background-color: transparent;
    background-image: none;
    color: #333333;
    text-shadow: none;
    font-size: 1.12em;
    padding: 0;
    margin-top: 12px;
    text-decoration: none;
}

.boxgroupbody {
    padding: 0 0 0 16px;
}
.leftbarbody .boxgroupbody {
    padding: 0;
}
.sqlitem.float {
    float: left;
}

.sqlitem.float .boxgroupbody {
    padding: 0;
}


/* Replace screen.css */

.title {
    background-color: transparent;
}

.portal .nav {
    display: block !important;color: initial;
}

.tab-border {
    padding: 15px;
    min-height: 300px;
    border: 1px solid #dddddd;
    border-radius: 4px;
}

.tab-page {
    margin: 0 10px 0px 10px;
}

.width-1 .box-title {
    line-height: normal !important;
}

.width-1 .box-body {
    width: calc(100% - 56px);
}

.width-2 .box-title {
    width: 20%;
}

.width-2 .box-body {
    width: 80%;
}

.width-3 .box-title {
    width: 30%;
}

.width-3 .box-body {
    width: 70%;
}

.width-4 .box-title {
    width: 40%;
}

.width-4 .box-body {
    width: 60%;
}

.width-5 .box-title {
    width: 50%;
}

.width-5 .box-body {
    width: 50%;
}

.height-1 {
    height: 75px;
}

.height-1 .box-title {
    line-height: 55px;
}

.height-2 {
    height: 130px;
}

.height-2 .box-title {}

.height-3 {
    height: 185px;
}

.height-3 .box-title {
    line-height: 165px;
}

.height-4 {
    height: 240px;
}

.height-4 .box-title {
    line-height: 220px;
}

.height-5 {
    height: 295px;
}

.height-5 .box-title {
    line-height: 275px;
}

.box-red .box-title {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: 2px solid #a94442;
    background-color: #a94442;
}

.box-red .box-body {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 2px solid #a94442;
}

.box-red .box-body:hover {
    background-color: #f2dede;
}

.box-green .box-title {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: 2px solid #3c763d;
    background-color: #3c763d;
}

.box-green .box-body {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 2px solid #3c763d;
}

.box-green .box-body:hover {
    background-color: #dff0d8;
}

.box-blue .box-title {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: 2px solid #337AB7;
    background-color: #337AB7;
}

.box-blue .box-body {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 2px solid #337AB7;
}

.box-blue .box-body:hover {
    background-color: #d9edf7;
}

.box-orange .box-title {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: 2px solid #f99a12;
    background-color: #f99a12;
}

.box-orange .box-body {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 2px solid #f99a12;
}

.box-orange .box-body:hover {
    background-color: #ffe4bd;
}

.cbox {
    /*padding: 5px 0;
	margin: 5px 0 10px 0;*/
}

.cbox .box-title {
    /*width: 55px;*/
    height: inherit;
    padding: 8px;
    float: left;
    color: #ffffff;
    font-size: 20px;
    text-align: center;
}

.cbox .box-title a {
    color: #ffffff;
}

.cbox .box-title a:hover {
    color: #ffffff;
}

.cbox .box-body {
    padding: 8px 5px 8px 0;
    float: left;
    font-size: 18px;
}

.cbox .box-body div {
    height: 45px;
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 45px;
}

.cbox.width-1 .box-title {
    width: 55px;
}

.table-responsive {
    /*border-radius: 10px;
    border: 1px solid #ddd;*/
}

.table-preordain > thead {
    background-color: #337AB7;
}

.table-preordain > thead > tr > th {
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    border-bottom-width: 1px !important;
}

.table-title > span {
    font-size: 28px;
}

.table-preordain > tbody > tr {
    height: 60px;
}

.table-preordain > tbody > tr > td {
    line-height: 60px !important;
    font-size: 20px;
}

.table-preordain > tbody > tr > td:hover {
    background-color: #dddddd;
}

.table-preordain > tbody > tr > td:not(:first-child):not(:last-child) {
    width: 10%;
}

.table-preordain > tbody > tr > td:last-child {
    width: 17%;
}

.table-pills {
    float: right;
    padding-top: 10px;
}

.tab-title {
    margin: 0;
    text-align: left;
    border-bottom: none;
}

.box-group {
    width: 300px;
    margin: 10px;
    border-radius: 8px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

.box-group .box {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -6px;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #dddddd;
}

.box-group .box:hover {
    background-color: #337AB7;
    background-image: none;
}

.box-group .box:hover a {
    color: #ffffff;
}

.box-group .box a {
    color: #555555;
}

.box-group .box a:hover {
    color: #ffffff;
}

.box-group .box:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.box-group .box:last-child {
    margin-bottom: 0;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}


/* freestyle */

.table-preordain > thead, .ui-grid th.freestyle {
    background-color: #628ab5;
}

.table-preordain > thead > tr > th, .ui-grid .row th.freestyle {
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    border-bottom-width: 1px !important;
    background-image: none;
}

.nocross #ui-table .row:hover, .nocross .ui-table .row:hover {
    background-color: rgba(0, 0, 0, 0.015);
}

.nocross .tcsed {
    background-color: transparent!important;
}

h1.text-center > a {
    color: #333333;
}

#sidebar .imenu {
    margin: 4px 10px 4px 10px;
    /*background-color: rgba(0,0,0,0.052);
    border-radius: 4px 4px 2px 2px;
    border: 1px solid rgba(0, 0, 0, 0.028);
    border-bottom: solid 2px rgba(0,0,0,0.182);*/
}
#sidebar .imenu .items {
    
}
    #sidebar .imenu .caption {
        /*background-color: rgba(0,0,0,0.2);
        background-image: linear-gradient(45deg, #757575, rgba(255,255,255,0.126));
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12);*/
        border-bottom: solid 1px rgba(0, 0, 0, 0.06);
        border-radius: 2px 2px 0 0;
        font-weight: bolder;
        margin: 4px 0 0 0;
        padding: 3px 0 1px 8px;
        text-align: left;
        background-color: transparent;
    }

    #sidebar .imenu .caption a {
        /*font-size:1.12em;*/
        font-size: 16px;
        color: #333333;
        /*#555;
        text-shadow: 2px 1px 1px #888;
        font-weight:bolder;*/
    }
/*#sidebar .imenu .caption a:hover{
    color:lightyellow!important;
}
#sidebar .items .sidebar-box:not(:last-child) {
    border-radius: 0;
    margin: 0;
    padding: 5px 0;
}

#sidebar .items .sidebar-box:last-child {
    border-radius: 0 0 4px 4px;
    margin: 0;
    padding: 5px 0 5px 0;
}
*/

#sidebar .mini .items .sidebar-box {
    padding: 1px 0 0;
    margin: 0 0 0 -4px !important;
}

#sidebar .imenu .items .sidebar-box {
    /*margin:0 -8px;*/
}

#sidebar .items .sidebar-box-title {
    position: relative;
    z-index: 2;
}

#sidebar .items .sidebar-box-title, #sidebar .items .sidebar-box-img {
    margin-left: -1px;
}

.pagemenubar .sidebar-box-title {
    padding: 4px 12px;
}

.pagemenubar .sidebar-box-title a:hover {
    color: wheat !important;
}


/*nono*/

.footer-main .navbar-nav > li > a {
    padding: 2px 5px;
    font-size: 0.86em;
    color: #888888;
}

.footer-main .navbar-title-active:before {
    content: initial;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .footer-main .nav > li.open {
        position: absolute;
    }
}

.box {
    margin: 2px;
}

.imenu .box, .imenu .items>a {
    display: block;
    text-align: left;
}

.imenu .items>a {
    margin: 0;
    padding-left: 10px;
    padding-right: 10px;
}

.imenu .box .box-title a {
    color: rgba(0, 0, 0, 0.8) !important;
}

.pagemenubar .imenu {
    margin-right: 0;
}

.pagemenubar .imenu li.dropdown a {
    background-color: rgba(0, 0, 0, 0.02);
    margin-right: 1px;
}

.tabpages .boxitem {
    border-radius: 8px 8px 0 0;
}

.boxitem.idx .rb:before, .preidxmark:before {
    content: "";
    margin-top: 6px;
    border-top: 6px solid transparent;
    border-left: 6px solid #337AB7;
    border-bottom: 6px solid transparent;
    z-index: 1;
    position: absolute;
    margin-left: -10px;
}

.preidxmark:before {
    margin-top: 4px;
}

.preidxmark, a.href.preidxmark {
    margin-left: 16px;
}

.collapse.in .pagemenubar {
    margin-left: 16px;
}

.collapse.in .pagemenubar .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
}

.collapse.in .pagemenubar .navbar-nav > li.dropdown {
    margin-right: 30px;
}

.cbox {
    margin: 5px 0 10px 0;
}

.portal .nav-pills {
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 4px;
}

.portal h1, .portal .h1, .portal h2, .portal .h2, .portal h3, .portal .h3 {
    margin-top: 10px;
    margin-bottom: 5px;
}

.ui-grid img {
    vertical-align: top;
}

.portal .postback {
    padding: 0 6px;
}

.sidebar-switch svg {
    height: 30px;
    width: 30px;
}


/*=== hev ===*/

.hev-box {}

.hev-header {
    width: 100%;
    min-height: 50px;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 4px 10px;
}

.hev-title {
    float: left;
}

.hev-body {
    width: 100%;
    min-height: 100px;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-bottom: 10px;
}

.hev-default .hev-header, .hev-default .hev-body {
    border-color: #337AB7;
}

.hev-default .hev-header {
    background-color: #337AB7;
}

.hev-default .hev-title {
    color: #ffffff;
}

.hev-red .hev-header, .hev-red .hev-body {
    border-color: #a94442;
}

.hev-red .hev-header {
    background-color: #a94442;
}

.hev-red .hev-title {
    color: #ffffff;
}

.hev-btn-group {
    margin-top: 1px;
    float: right;
}

.hev-btn-label {
    font-size: 1.3em;
    font-weight: 500;
}

.hev-btn-span a {
    font-size: 1.3em !important;
}

a.activetext, .activetext a, .activetext {
    color: rgb(13, 142, 207)!important;
}

a.successtext, .successtext a, .successtext {
    color: rgb(176, 222, 9)!important;
}

a.infotext, .infotext a, .infotext {
    color: rgb(252, 210, 2)!important;
}

a.warningtext, .warningtext a, .warningtext {
    color: rgb(255, 158, 1)!important;
}

a.dangertext, .dangertext a, .dangertext {
    color: rgb(255, 102, 0)!important;
}

.asempbox {
    text-align: left;
    position: absolute;
    right: 5px;
    top: 50px;
    background-color: white;
    padding: 15px;
    border-radius: 2px;
    box-shadow: -2px 2px 8px rgba(0,0,0,0.125);
}


/* on / off switch */

.check-switch {
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    margin: 2px;
}

.check-switch + .check-switch {
    display: block;
    margin-top: 5px;
    margin-left: 3px;
}

.check-horizontal > .check-switch + .check-switch {
    display: inline-block;
    margin-left: 10px;
    margin-top: 0;
}

.check-switch > input[type="checkbox"], .check-switch > input[type="radio"] {
    display: none;
    display: inline\9;
}

.check-switch > input[type="checkbox"] + label, .check-switch > input[type="radio"] + label {
    display: inline-block;
    display: inline\9;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    text-indent: 32px;
    white-space: nowrap;
    position: relative;
    margin-right: 15px;
    margin-bottom: 0;
}

.check-switch > input[type="checkbox"] + label:last-child, .check-switch > input[type="radio"] + label:last-child {
    margin-right: 0;
}

.check-switch > input[type="checkbox"] + label:before, .check-switch > input[type="radio"] + label:before {
    content: "";
    display: none\9;
    cursor: pointer;
    color: #ffffff;
    height: 15px;
    width: 30px;
    padding: 0;
    border: 2px solid #cccccc;
    border-radius: 15px;
    background-color: #ffffff;
    transition: background-color 0.5s linear;
    position: absolute;
    top: 0;
    left: 0;
}

.check-switch > input[type="checkbox"] + label:after, .check-switch > input[type="radio"] + label:after {
    content: "";
    display: none\9;
    width: 15px;
    height: 15px;
    margin: 0px;
    background: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid #cccccc;
    border-radius: 15px;
    transition: all 0.5s linear;
}

.check-switch > input:checked + label:before {
    content: "✓";
    background-color: #337ab7;
    text-indent: 3px;
    font-weight: 100;
    font-size: 13px;
}

.check-switch > input:checked + label:before, .check-switch > input:checked + label:after {
    border-color: #337ab7;
}

.check-switch > input:checked + label:after {
    left: 15px;
}

.check-switch > input[disabled] + label:before, .check-switch > input[disabled] + label:after {
    background-color: #e0e0e0;
    cursor: not-allowed;
}

.check-switch > input[disabled] + label {
    cursor: not-allowed;
    color: #999999;
}

.input-group + .check-switch > label, .form-control + .check-switch > label {
    margin-top: 5px;
}

.check-switch + blockquote {
    padding: 0 10px;
}

.dsquery .date input {
    width: 150px\9;
}

.dsquery .form-control {
    width: 230px\9;
}

.leftbarbody .boxgroup {
    padding: 0 10px\9;
}

a.godef {
    background-color: rgba(127, 255, 212, 0.3);
    border-radius: 8px;
    padding: 0 6px;
    font-size: 0.86em;
}

li a.href {
    margin: 0 2px;
}

.rightbox .btn.box.selected {
    box-shadow: 0px 0px 2px 0px rgba(256, 0, 0, 0.5);
    background-color: cornsilk!important;
    border-bottom: solid 1px coral;
}

.updprogress {
    position: fixed;
    top: 60px;
    /*left: calc(50% - 70px);*/
}


/*portal editable control*/

.iderror {
    border: solid 2px red!important;
    color: white!important;
    background-color: red!important;
}

.right .tbx, .num .tbx, .textright {
    text-align: right;
}

.left .tbx, .text .tbx, .textleft {
    text-align: left;
}

.center .tbx, .textcenter {
    text-align: center;
}

.hrefstags {
    background-color: rgba(0, 0, 0, 0.06);
    padding: 1px 4px;
    /*text-align: right;*/
    border: solid 1px rgba(0, 0, 0, 0.02);
}

.contentbox .page-title {
    opacity: 0.6;
}

.portal input[disabled].eformc, .portal textarea[disabled]:not([class*="bg"]) {
    background-color: rgba(0,0,0,0.01);
}

.rtagsrow .rid img {
    height: 20px;
    margin-right: 6px;
}

.rtagsgroup .title {
    padding: 4px;
    border-bottom: solid 1px lightgray;
    margin-top: 8px;
}

.notearea {
    position: absolute;
    width: 400px;
    left: calc(100% - 404px);
    background-color: #f0f0f0;
    padding: 10px;
    box-shadow: 0 0 1px 2px #e0e0e0;
    margin: 2px;
    max-height: 600px;
    overflow: auto;color: initial;
}

@media print {
    @page {
        margin: 1cm 1cm;
        /*print邊界*/
        /*size: 210mm 297mm;*/
        /*size: 5.5in 8.5in;*/
        /*列印紙張大小*/
        size: A4;/* landscape;*/
    }
    * {
        background: transparent !important;
        box-shadow: none !important;
        color: #000 !important;
        text-shadow: none !important;
        overflow: unset !important;
    }
    #main {
        position: static;
        width: 100%;
    }
    #headerbox, #sidebar {
        display: none;
    }
    table {
        -webkit-box-decoration-break: clone;
        -o-box-decoration-break: clone;
        box-decoration-break: clone;
    }
    /*table, th, td, .table-block {
        font-size: 18pt !important;
    }*/
    .navbar {
        margin: 0!important;
    }
}

#print-header, #print-footer {
    position: fixed;
    color: #000000;
    font-size: 18pt;
    text-align: center;
    left: 0;
    right: 0;
}

#print-header {
    top: 0;
}

#print-footer {
    bottom: 0;
}

@media screen {
    #print-header, #print-footer {
        display: none;
    }
}

@media print {
    #print-header {
        display: table-header-group;
    }
    #print-footer {
        display: table-footer-group;
    }
}

.allnotes {
    margin: 0 2px;
    padding: 4px 0;
}

.allnotes .title {
    margin-top: 15px;
    border-bottom: solid 3px #FF9800;
    background-color: burlywood;
    color: white;
    border-radius: 4px 4px 0 0;
    padding-left: 6px;
    font-size: medium;
}


/* portal iframe元件修正 2016-12-29 */

iframe.portaliframe {
    border: none;
    width: 100%;
    /*height: calc(100vh - 85px);*/
    height: calc(100vh - 80px); margin-bottom:-5px;
}
.nofooter iframe.portaliframe {
    /*height: calc(100vh - 50px) !important;*/
    height: 100%; /*考慮 top nav buttons???*//*if 100%!important 會造成btnw iframe 高度失效*/
}
.popup-background iframe.portaliframe {
   /* height: -webkit-fill-available;*/
}

@media print {
    iframe {
        height: auto !important;
    }
}
/*.hmbi-tabpages {
    padding-left: 3px;
}
.hmbi-tabpages .btn.btn-default.box {
    background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.18) 100%);
    text-shadow: 1px 2px 1px white;
    border-bottom: none;
    margin-left: -3px;
    border-radius: 4px 12px 2px 0;
}*/
.nofooter div#ctl00_UpdatePanel2 {
    display: none;
}
.nofooter #main, .nofooter #sidebar {bottom:2px;}
.nofooter div#main {
    margin-bottom: 0;
}
.cblist label, .pradio label {
    margin: 0 6px 0 1px;
}
.nodeedit .href
{
    /*margin-left: 52px!important;*/
    font-size: small!important;
}
.nullcheck { border-left:solid 1px red; }

a.href.linkfiles {
    background-image: url(/pic/fileattch.png);
    background-repeat: no-repeat;
    background-position-y: 2px;
    padding-left: 18px;
}

.textonly .sidebar-box {
    padding: 0!important;
}
.textonly .sidebar-box-img {
    display: none;
}
.textonly .sidebar-box-title a, .textonly .boxgroup a {
    padding-left: 10px!important;
}
.textonly.mini .sidebar-box-title a, .textonly.mini .boxgroup a {
    font-size: small!important;
}
#main .sct {
    /*margin-top: -50px;*/
}
.uploadsfile .href {
    position: absolute;
    color: transparent!important; margin-left:18px;
}
.uploadsfile .href:hover {
    background-color: rgba(0,0,0,0.36);
    padding: 0 10px 0 10px;
    border-radius: 26px 6px 26px 8px;
    color: white !important;
    margin-top: -10px;

    /*background-color: rgba(0,0,0,0.36);
    padding: 0 16px 0 6px;
    border-radius: 0 6px 26px 4px;
    color: white !important;*/
}
.portal .uploadsfile {
    font-size: small;
}
.filelinks {
    border:solid 4px rgba(0,0,0,0.12);margin:10px;padding: 4px;border-radius: 3px;
}
.portal .download {
    float: right;
    margin: 6px 10px;
    width: 16px;
}
/*attachment*/
.portal .rightbox .attachment { width:100%; padding:4px; }
.portal .rightbox .attachment .attachfiles { width: 100% }
.portal .rightbox .attachment .docrefs { width: 100%; margin:0 }
.portal .rightbox .attachment .fbar { margin-left: 0; }
.portal .selectfolder .caption {
    margin: 0!important;text-align: left;
    color: white;
    background-color: #2196F3;
    padding: 2px 4px;
}
#headerbox .dark .btn-info {
    border-color: #eeeeee;
    color: #9E9E9E!important;
}
#headerbox .dark .btn-warning {
    background-color: #ffd439;
    border-color: transparent;
    color: black;
}
.filelist .sfile {
    display: block;
    border: solid 1px rgba(0,0,0,0.032);
    padding: 2px 1em;
    margin-bottom: -1px;
}
.filelist .sfile:hover {
    background-color: antiquewhite;
}
.boxitem.navbox.selected, .boxitem.navbox.select {
    background-color: darkseagreen;
    border-radius: 4px;
}
    .boxitem.navbox.selected a, .boxitem.navbox.select a {
        color: white !important;
    }
.portal td.rb {
    padding: 0 2px;
}
.canvas > div:first-child { background-color:White; }
.easy .input-group input, .easy .input-group select {
    border: none;
    box-shadow: none;
    border-bottom: solid 1px lightgray;
}
.easy .input-group .input-group-addon {
    border: none;
    background-color: transparent;
    font-style: italic;
    color: darkgray;
}
.table-bordered td textarea.autoheight {
    /*width: calc(100% + 8px) !important;
    margin: -4px -4px;
    padding: 4px 8px !important;*/
    margin:-4px 0;
    padding:4px!important;
}
.portalerrmsg {
    padding-top: 4px !important;
    background-color: whitesmoke !important;
}
.portalerrmsg div > span {
    display: inline-block;
    padding: 0 6px;
    /*margin-right: calc(100% - 12px);*/
    border-radius: 3px;
    box-shadow: inset 0 0 10px lightgrey;
}
div#ficonbar .icon.bi {
    line-height: 40px;
}