:root {
    --common-background-color: #B59D68;    /* 全局背景颜色/表格標題顔色/圖標顔色 */
    --common-button-color: #806727;            /* 按钮背景颜色 */
    --common-hover-color: #F1CE79;              /* 按钮選中背景颜色 */
    --common-selected-color: #F1CE79;        /* 高亮/选中颜色 */
    --common-menu-color: #806727;                /* 左侧导航栏背景颜色 */
    --common-init-font-color: #000000;           /* 全局字体颜色 */
    --common-highlight-font-color: #FFFFFF; /* 高亮字体颜色/有背景顔色的字體顔色 */

    --common-menu-font-size: 18px;            /* 菜单栏的字体大小 */
    --common-menu-icon-width: 20px;           /* 菜单栏图标宽度 */
    --common-menu-icon-height: 20px;          /* 菜单栏图标高度 */
    --common-big-title-font-size: 24px;       /* 大标题字体大小 */
    --common-medium-title-font-size: 22px;    /* 中标题字体大小 */
    --common-small-title-font-size: 18px;     /* 小标题字体大小-暂时不用 */
    --common-init-font-size: 16px;            /* 一般标题、描述文字、显示资料 */
    --common-input-font-size: 16px;           /* 输入框的字体大小 */
    --common-page-font-size: 14px;            /* 分页的字体大小 */

    /*--common-list-font-size: 16px;*/
    /*--common-menu-font-size: 18px;*/

    --common-input-text-height: 40px;         /* 输入框的高度 */

    --common-button-height: 40px;
    --common-input-right-icon-size: 22px;

    /* 特别按钮 */
    --common-special-button-width: 320px;        /* 宽度 */
    --common-special-button-height: 60px;        /* 高度 */
    --common-special-button-font-size: 24px;     /* 字体大小 */
    --common-special-button-border-radios: 10px; /* 四周圆角 */
    --common-special-button-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影 */

    /* 带图标的按钮 */
    --common-icon-button-width: 120px;           /* 宽度 */
    --common-icon-button-height: 40px;           /* 高度 */
    --common-icon-button-font-size: 16px;        /* 字体大小 */
    --common-icon-button-border-radios: 5px;     /* 四周圆角 */
    --common-icon-button-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影 */

    /* 标准按钮-不带图标 */
    --common-init-button-width: 100px;          /* 宽度 */
    --common-init-button-height: 40px;          /* 高度 */
    --common-init-button-font-size: 16px;       /* 字体大小 */
    --common-init-button-border-radios: 5px;    /* 四周圆角 */
    --common-init-button-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影 */

    /* 表格按钮 */
    --common-table-button-width: 60px;          /* 宽度 */
    --common-table-button-height: 30px;         /* 高度 */
    --common-table-button-font-size: 14px;      /* 字体大小 */
    --common-table-button-border-radios: 3px;   /* 四周圆角 */
    --common-table-button-box-shadow: 0;        /* 阴影 */

    /* 全页面表格 */
    --common-table-full-page-height: 50px;      /* 每行高度 */
    --common-table-full-page-text-align: center;/* 表格数据居中 */
    --common-table-full-page-gap-color: #F2F2F2; /* 间隔颜色 */

    /* 半页面/小页面表格 */
    --common-table-half-page-height: 40px;      /* 每行高度 */
    --common-table-half-page-text-align: center;/* 表格数据居中 */
    --common-table-half-page-gap-color: #F2F2F2; /* 间隔颜色 - 不超过6行的不用 */

    /* 底框 */
    --common-container-border-radios: 15px;    /* 四圓角度數 */
    --common-container-backgorund-color: #fff; /* 背景颜色 */
    --common-container-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影 */
    --common-container-padding: 25px;          /* 内边距 */

    /* 遮挡层 */
    --common-occlusion-color: #000000;         /* 背景颜色 */
    --common-occlusion-opacity: 65%;           /* 透明度 */
}

/* 特别按钮 */
.common-special-button {
    border-radius: var(--common-special-button-border-radios);
    line-height: var(--common-special-button-height);
    height: var(--common-special-button-height);
    text-align: center;
    width: var(--common-special-button-width);
    cursor: pointer;
    font-size: var(--common-special-button-font-size) !important;
    color: var(--common-init-font-color);
    background: #fff;
    border: 1px solid #fff;
    box-shadow: var(--common-special-button-box-shadow);
    padding: 0;
    display: inline-block;
}

.common-special-button:hover {
    color: var(--common-highlight-font-color);
    background: var(--common-selected-color);
    border: 1px solid var(--common-selected-color);
}

/* 带图标的按钮 */
.common-icon-button {
    border-radius: var(--common-icon-button-border-radios);
    line-height: var(--common-icon-button-height);
    height: var(--common-icon-button-height);
    text-align: center;
    width: var(--common-icon-button-width);
    cursor: pointer;
    font-size: var(--common-icon-button-font-size) !important;
    color: var(--common-highlight-font-color);
    background: var(--common-button-color);
    border: 1px solid var(--common-button-color);
    box-shadow: var(--common-icon-button-box-shadow);
    padding: 0;
    display: inline-block;
}

.common-icon-button:hover {
    background: var(--common-hover-color) !important;
    border: 1px solid var(--common-hover-color) !important;
    color: var(--common-highlight-font-color) !important;
}

/* 标准按钮/不带图标 */
.common-init-button {
    border-radius: var(--common-init-button-border-radios);
    line-height: var(--common-init-button-height);
    height: var(--common-init-button-height);
    text-align: center;
    width: var(--common-init-button-width);
    cursor: pointer;
    font-size: var(--common-init-button-font-size) !important;
    color: var(--common-highlight-font-color);
    background: var(--common-button-color);
    border: 1px solid var(--common-button-color);
    box-shadow: var(--common-init-button-box-shadow);
    padding: 0;
    display: inline-block;
}

.common-init-button:hover {
    background: var(--common-hover-color) !important;
    border: 1px solid var(--common-hover-color) !important;
    color: var(--common-highlight-font-color) !important;
}

/* 白底取消按鈕 */
.common-init-cancel-button {
    border-radius: var(--common-init-button-border-radios);
    line-height: var(--common-init-button-height);
    height: var(--common-init-button-height);
    text-align: center;
    width: var(--common-init-button-width);
    cursor: pointer;
    font-size: var(--common-init-button-font-size) !important;
    color: var(--common-occlusion-color);
    background: #ffffff;
    border: 1px solid var(--common-button-color);
    box-shadow: var(--common-init-button-box-shadow);
    padding: 0;
    display: inline-block;
}

.common-init-cancel-button:hover {
    background: #ffffff;
    color: var(--common-occlusion-color);
}

/* 表格按钮 */
.common-table-button {
    border-radius: var(--common-table-button-border-radios);
    line-height: var(--common-table-button-height);
    height: var(--common-table-button-height);
    text-align: center;
    width: var(--common-table-button-width);
    cursor: pointer;
    font-size: var(--common-table-button-font-size) !important;
    color: var(--common-highlight-font-color);
    background: var(--common-button-color);
    border: 1px solid var(--common-button-color);
    box-shadow: var(--common-table-button-box-shadow);
    padding: 0;
    display: inline-block;
}

.common-table-button:hover {
    color: var(--common-highlight-font-color);
    background: var(--common-hover-color);
    border:1px solid var(--common-hover-color);
}

/* 底框 */
.common-container {
    border-radius: var(--common-container-border-radios) !important;
    background-color: var(--common-container-backgorund-color) !important;
    box-shadow: var(--common-container-box-shadow) !important;
    padding: var(--common-container-padding) !important;
    font-size: var(--common-init-font-size) !important;
}

/* 遮挡层 */
.common-occlusion {
    background-color: var(--common-occlusion-color) !important;
    opacity: var(--common-occlusion-opacity) !important;
    pointer-events: none;
}


/* 全页面表格 */
.common-table-full-page {
    font-size: var(--common-init-font-size);
}

.common-table-full-page thead tr {
    background-color: var(--common-background-color);
}

.common-table-full-page thead tr th {
    text-align: var(--common-table-full-page-text-align);
    font-size: var(--common-init-font-size);
    font-weight: bold;
    color: var(--common-highlight-font-color);
    line-height: var(--common-table-full-page-height);
    height: var(--common-table-full-page-height);
    padding: 0;
    border: 0;
}

.common-table-full-page thead th input[type="checkbox"] + span:before {
    border: 1px solid var(--common-highlight-font-color);
}

.common-table-full-page thead th input[type="checkbox"] + span {
    padding: 0 5px;
    font-size: var(--common-init-font-size);
}

.common-table-full-page thead th input[type="checkbox"]:checked + span:before {
    border: 1px solid var(--common-highlight-font-color);
}

.common-table-full-page tbody tr {
    background-color: #fff;
}

.common-table-full-page tbody tr:hover {
    background-color: var(--common-selected-color);
}

.common-table-full-page tbody tr:hover td {
    color: var(--common-highlight-font-color);
    background-color: var(--common-selected-color);
}

.common-table-full-page tbody tr:hover td a {
    color: var(--common-highlight-font-color);
}

.common-table-full-page tbody tr:hover td svg, .common-table-full-page tbody tr:hover td svg path {
    fill: var(--common-highlight-font-color);
}

.common-table-full-page tbody tr:hover td input[type="checkbox"] + span:before {
    border: 1px solid var(--common-highlight-font-color);
}

.common-table-full-page tbody tr td {
    text-align: var(--common-table-full-page-text-align);
    line-height: var(--common-table-full-page-height);
    height: var(--common-table-full-page-height);
    font-size: var(--common-init-font-size);
    color: var(--common-init-font-color);
    padding: 0;
    border: 0;
}

.common-table-full-page tbody tr:nth-child(odd) {
    background-color: var(--common-table-full-page-gap-color);
}


/* 半页面表格 */
.common-table-half-page {
    font-size: var(--common-init-font-size);
}

.common-table-half-page thead tr {
    background-color: var(--common-background-color);
}

.common-table-half-page thead tr th {
    text-align: var(--common-table-half-page-text-align);
    font-size: var(--common-init-font-size);
    font-weight: bold;
    color: var(--common-highlight-font-color);
    line-height: var(--common-table-half-page-height);
    height: var(--common-table-half-page-height);
    padding: 0;
    border: 0;
}

.common-table-half-page thead th input[type="checkbox"] + span:before {
    border: 1px solid var(--common-highlight-font-color);
}

.common-table-half-page thead th input[type="checkbox"] + span {
    padding: 0 5px;
    font-size: var(--common-init-font-size);
}

.common-table-half-page thead th input[type="checkbox"]:checked + span:before {
    border: 1px solid var(--common-highlight-font-color);
}

.common-table-half-page tbody tr {
    background-color: #fff;
}

.common-table-half-page tbody tr:hover {
    background-color: var(--common-selected-color);
}

.common-table-half-page tbody tr:hover td {
    color: var(--common-highlight-font-color);
    background-color: var(--common-selected-color);
}

.common-table-half-page tbody tr:hover td a {
    color: var(--common-selected-color);
}

.common-table-half-page tbody tr:hover td svg, .common-table-half-page tbody tr:hover td svg path {
    fill: var(--common-highlight-font-color);
}

.common-table-half-page tbody tr:hover td input[type="checkbox"] + span:before {
    border: 1px solid var(--common-highlight-font-color);
}

.common-table-half-page tbody tr td {
    text-align: var(--common-table-half-page-text-align);
    line-height: var(--common-table-half-page-height);
    height: var(--common-table-half-page-height);
    font-size: var(--common-init-font-size);
    color: #000;
    padding: 0;
    border: 0;
}

/**
 * 收藥發藥等小按鈕
 */
.common-operation-btn{
    width: var(--common-table-button-width) !important;
    height: var(--common-table-button-height) !important;
    line-height: var(--common-table-button-height) !important;
    font-size: var(--common-table-button-font-size) !important;
    border-radius: var(--common-table-button-border-radios) !important;
    box-shadow: var(--common-table-button-box-shadow) !important;
}

.common-table-half-page tbody tr:nth-child(odd) {
    /*background-color: var(--common-table-full-page-gap-color);*/
}

/* 公共背景顔色 */
.common-background-color {
    background-color: var(--common-background-color) !important;
}

/* 公共按鈕顔色 */
.common-button-color {
    background-color: var(--common-button-color) !important;
}

/* 公共選中顔色 */
.common-selected-color {
    background-color: var(--common-selected-color) !important;
}

.common-selected-color td {
    color: var(--common-highlight-font-color) !important;
}

.common-selected-color td svg, .common-selected-color td svg path {
    fill: var(--common-menu-color) !important;
}

/* 公共的菜單顔色 */
.common-menu-color {
    background-color: var(--common-menu-color);
}

/* 列表字體大小 */
.list-font-size {
    font-size: var(--common-init-font-size) !important;
}

/* 菜單字體大小 */
.menu-font-size {
    font-size: var(--common-menu-font-size) !important;
}

/* 菜單字體顔色 */
.menu-font-color {
    color: var(--common-init-font-color);
}

/* 大標題字體大小 */
.big-title-font-size {
    font-size: var(--common-big-title-font-size) !important;
}

/* input框高度 */
.input-height {
    height: var(--common-input-text-height) !important;
}

.navbar {
    min-height: 80px !important;
}

#wrapper .main, #wrapper .mainBox {
    margin-top: 80px !important;
}

.navbar-default .brand {
    height: 80px !important;
    line-height: 80px !important;
    padding-left: 40px;
}

.navbar-default .brand .navbar-logo {
    width: auto;
    height: 80px;
    display: inline-block;
    vertical-align: top;
}

.navbar-default .brand .navbar-title {

}

.navbar-btn button {
    line-height: 55px !important;
}

.mobile-navbar-logo {
    float: left;
    display: none;
    text-align: center;
}

.mobile-navbar-logo img {
    width: 55px;
    height: 55px;
}

.navbar-nav>li>a {
    line-height: 50px !important;
}

.lnr-arrow-left-circle:before {
    content: "\21c4" !important;
}

.lnr-arrow-right-circle:before {
    content: "\21c4" !important;
}

.navbar-nav > li > a img {
    width: 32px !important;
}

/* 左侧菜单栏 - start */
.sidebar-nav-box {

}

.sidebar-nav-box .layui-side {
    top: 80px !important;
    width: 260px !important;
}

.sidebar-nav-box .layui-side .layui-side-scroll {
    width: 260px;
}

.sidebar-nav-box .layui-side .layui-side-scroll .layui-nav {
    width: 260px;
    background: var(--common-menu-color);
    height: 100%;
}

.sidebar-nav-box .layui-side .layui-side-scroll .layui-nav-tree .layui-nav-item a {
    font-size: var(--common-menu-font-size);
    color: var(--common-highlight-font-color);
    height: 50px;
    line-height: 45px;
}

.sidebar-nav-box .layui-side .layui-side-scroll .layui-nav-tree .layui-nav-item a i {
    width: var(--common-menu-icon-width);
    width: var(--common-menu-icon-height);
}

.sidebar-nav-box .layui-side .layui-nav-tree .layui-nav-bar {
    left: 257px;
    background-color: #fff !important;
    width: 3px;
}

.sidebar-nav-box .layui-side .layui-side-scroll .layui-nav .layui-nav-child {
    background: var(--common-menu-color);
}

.sidebar-nav-box .layui-nav-tree .layui-nav-child dd.layui-this,
.sidebar-nav-box .layui-nav-tree .layui-nav-child dd.layui-this a,
.sidebar-nav-box .layui-nav-tree .layui-this,
.sidebar-nav-box .layui-side .layui-nav-tree .layui-nav-item .son-menu:hover {
    background: var(--common-selected-color) !important;
    border-right: 2px solid var(--common-highlight-font-color);
    color: var(--common-highlight-font-color) !important;
}

.sidebar-nav-box .layui-nav-tree .layui-this>a,
.sidebar-nav-box .layui-nav-tree .layui-this>a:hover {
    background: var(--common-selected-color) !important;
    color: var(--common-highlight-font-color) !important;
}

.sidebar-nav-box .layui-side .layui-nav-tree .layui-nav-item .son-menu:hover a {
    color: var(--common-highlight-font-color) !important;
}

/* 左侧菜单栏 - end */


/* 右側編輯用戶信息 - start */
.dropdown-menu {
    border: 0 !important;
    top: 85px;
}

.dropdown-menu .revisePwd a {
    padding: 10px 17px !important;
    font-size: var(--common-init-font-size);
}

.dropdown-menu .returnIndex a {
    font-size: var(--common-init-font-size);
}

.dropdown-menu .logoutSys a {
    font-size: var(--common-init-font-size);
}

.dropdown-menu .revisePwd a:hover, .dropdown-menu .returnIndex a:hover, .dropdown-menu .logoutSys a:hover {
    background-color: var(--common-selected-color) !important;
    color: #fff !important;
    border-right: 3px solid #fff;
}

.dropdown-menu .revisePwd a svg {
    vertical-align: middle;
    margin-right: 7px;
    fill: #676a6d;
}

.dropdown-menu .revisePwd a:hover svg {
    fill: #fff;
}

.dropdown-menu .returnIndex a svg {
    vertical-align: middle;
    margin-right: 7px;
    fill: #676a6d;
}

.dropdown-menu .returnIndex a:hover svg {
    fill: #fff;
}
/* 右側編輯用戶信息 - end */

/* 修改密码 - start */
#revisePwdBomb .revisePwdBomb {
    height: 220px;
    width: 400px;
    border-radius: 10px;
    padding: 25px 30px;
    border: 1px solid #ccc;
}

#revisePwdBomb .revisePwdBomb .revise-pwd-title {
    font-size: var(--common-big-title-font-size);
}

#revisePwdBomb .revisePwdBomb .fa-remove {
    top: 20px;
    right: 30px;
    font-size: 26px;
}

#revisePwdBomb .revisePwdBomb .revise-pwd-content {
    font-size: var(--common-init-font-size);
    margin-top: 20px;
    margin-bottom: 20px;
}

#revisePwdBomb .revisePwdBomb .revise-pwd-content .old-password span, #revisePwdBomb .revisePwdBomb .revise-pwd-content .new-password span {
    margin-right: 20px;
}

#revisePwdBomb .revisePwdBomb .revise-pwd-content .confirm-password span {
    margin-right: 7px;
}

#revisePwdBomb .revisePwdBomb .revise-pwd-content .edit-password-btn {
    float: right;
    margin-top: 30px;
}

#revisePwdBomb .revisePwdBomb .revise-pwd-content .edit-password-btn .saveRevisePwd {
    background-color: var(--common-button-color);
    border: 1px solid var(--common-button-color);
    color: var(--common-highlight-font-color);
    font-size: var(--common-init-font-size);
    padding: 6px 30px !important;
    border-radius: 5px;
}


#revisePwdBomb .revisePwdMsg {
    height: 220px;
    width: 440px;
    border-radius: 10px;
    padding: 25px 30px;
    border: 1px solid #ccc;
}

#revisePwdBomb .revisePwdMsg .revise-msg-title {
    font-size: var(--common-big-title-font-size);
}

#revisePwdBomb .revisePwdMsg .fa-remove {
    top: 20px;
    right: 30px;
    font-size: 26px;
}

#revisePwdBomb .revisePwdMsg .revise-msg-content {
    margin-top: 20px;
    margin-bottom: 20px;
}

#revisePwdBomb .revisePwdMsg .revise-msg-content .input-group-btn {
    font-size: var(--common-big-title-font-size);
}

#revisePwdBomb .revisePwdMsg .revise-msg-content .close-password-box {
    float: right;
    margin-top: 30px;
}

#revisePwdBomb .revisePwdMsg .revise-msg-content .close-password-box .close-password-box-btn {
    background-color: var(--common-button-color);
    border: 1px solid var(--common-button-color);
    color: var(--common-highlight-font-color);
    font-size: var(--common-init-font-size);
    padding: 6px 30px !important;
    border-radius: 5px;
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    color: unset !important;
    outline: unset !important;
}

/* 系統提示 */
.bombBox .promptBox .promptTitle{
    position: relative;
    font-size: var(--common-medium-title-font-size);
}

.bombBox .promptBox{
    max-width: 450px;
}

.bombBox .promptBox .fa-remove {
    top: 0px;
    right: 0px;
    font-size: 26px;
    opacity: 1 !important;
}

.bombBox .promptBox .promptTxt {
    text-align: left;
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 0px;
    font-size: var(--common-init-font-size);
}

.bombBox .promptBox .promptBtn{
    text-align: right;
}

.bombBox .promptBox .promptBtn .btn{
    margin:0 10px
}

.bombBox .promptBox .promptBtn .btn:last-child{
    margin:0 0 0 10px
}

/* 生日提示 */
#birthdayMsgBomb .birthdayMsgBomb {
    height: 180px;
    width: 400px;
    border-radius: 10px;
    padding: 25px 30px;
    border: 1px solid #ccc;
}

#birthdayMsgBomb .birthdayMsgBomb .birthday-msg-title {
    font-size: var(--common-big-title-font-size);
}

#birthdayMsgBomb .birthdayMsgBomb .birthday-msg-title .fa-remove {
    top: 20px;
    right: 30px;
    font-size: 26px;
}

#birthdayMsgBomb .birthdayMsgBomb .birthday-msg-content {
    margin: 20px auto;
    text-align: center;
    font-size: 22px;
}

#birthdayMsgBomb .birthdayMsgBomb .birthday-msg-content svg {
    width: 22px;
    vertical-align: middle;
}

/* 列表页 删除按钮 i标签 */
.i-delete-btn{
    color: red;
    margin-left: 5px;
}

.i-delete-btn i {
    transform: scale(1.25);
    font-size: var(--common-input-font-size);
}

/* 列表页 编辑按钮 svg标签 */
.i-edit-btn {
    color: var(--common-background-color);
    cursor: pointer;
    font-weight: bold;
    margin-right: 5px;
    display: inline-block;
}

.i-edit-btn svg {
    border-bottom: 1px solid;
    margin-bottom: -3px;
}

.i-edit-btn:hover svg,
.i-delete-btn:hover i {
    animation: gentleScale 0.6s ease-in-out;
}

@keyframes gentleScale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.4); }
}

/* 日曆小圖標 */
.fa-calendar,
.fublBox i.fa,
.listSeaForm i.fa{
    top: 10px;
    right: 5px;
    color: var(--common-menu-color);
    font-size: var(--common-input-right-icon-size);
}

.jump-menu .fa-calendar{
    color: #fff !important;
}

@media (max-width: 767px) {
    #revisePwdBomb .revisePwdBomb, #revisePwdBomb .revisePwdMsg {
        width: 90%;
    }

    .bombBox .promptBox{
        width: 90%;
    }
}

@media (max-width: 992px) {
    .navbar-default .navbar-btn {
        width: 30%;
        float: left;
    }

    .navbar-default .mobile-navbar-logo {
        width: 40%;
        display: block;
        float: left;
    }

    .navbar-default #navbar-menu {
        width: 30%;
        float: right;
    }

    .navbar-default .navbar-btn, .navbar-default .mobile-navbar-logo, .navbar-default .navbar-menu {
        line-height: 80px;
        height: 60px;
    }

    .navbar-default #navbar-menu .navbar-nav > li {
        text-align: right;
        position: relative;
    }

    .navbar-default #navbar-menu .navbar-nav > li .dropdown-menu {
        min-width: 115px;
    }

    .navbar-default #navbar-menu .dropdown-menu .revisePwd a, .navbar-default .navbar-menu .dropdown-menu .returnIndex a {
        padding: 10px 13px !important;
    }
}

/* 修改密码-end */

@media (max-width: 767px) {
    #wrapper #sidebar-nav, #wrapper .main, #wrapper .mainBox {
        margin-top: 18px !important;
    }
}