body {
    font-family: Microsoft JhengHei;
    font-weight: 400;
    margin: 0px;
    padding: 0px;
    color: #222;
    font-size: 15px;
    width: 100%;
}

div {
    padding: 0px;
    margin: 0px;
}

ul {
    margin: 0;
    padding: 0;
}

    ul li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        ul li a {
            text-decoration: none;
        }

a {
    text-decoration: none !important;
    cursor: pointer;
    border: none !important;
    Outline: 0
}

img {
    border: none;
    padding: 0px;
    margin: 0px;
}

input {
    Outline: 0
}

.login_page {
    width: 100%;
    min-width: 325px;
    background: url(/assets/images/bottom_img.jpg) no-repeat bottom;
    background-size: 100%;
}

.login_inside {
    width: 340px;
    margin-top: -50px;
    padding-left: 50px;
    border-left: solid;
    border-image: linear-gradient(to bottom, #fff 0%,#ccc 40%,#ccc 62%,#fff 100%) 1 100%;
    border-width: 1px
}

.logo {
    margin-top: -30px;
    text-align: center;
}

.main_title {
    border-bottom: 1px solid #ccc;
    font-size: 16px;
}

    .main_title font {
        font-family: times;
        font-size: 30px;
    }

.sub_title {
    font-family: times;
    font-size: 11px;
    text-align: right;
    margin-top: 5px;
}

.login_input {
    margin-top: 10px;
}

    .login_input input {
        width: 290px;
        margin: 3px 0px;
        border: 1px solid #ccc;
        padding: 5px 0px;
        padding-left: 30px;
        font-size: 12px;
        Outline: 0
    }

        .login_input input.user {
            background: url(/assets/images/user_icon.jpg) no-repeat left center;
        }

        .login_input input.password {
            background: url(/assets/images/password_icon.jpg) no-repeat left center;
        }

.login_button {
    margin-top: 10px;
}

    .login_button input {
        background: #16a074;
        color: #fff
    }

.but_forget {
    font-size: 12px;
    color: #31afa6;
    margin: 0px 10px;
}

.but_login {
    background: #1aa07a;
    color: #fff;
    font-size: 12px;
    padding: 3px 10px;
}

    .but_login:hover {
        border: none;
        text-decoration: none;
        background: #aaa;
        color: #fff
    }

.footer {
    text-align: center;
    font-size: 12px;
    padding: 5px 0px;
    width: 100%;
    float: left;
    bottom: 0px
}

@media (max-width: 767px) {
    .login_inside {
        border: none !important;
        margin: 0px auto;
        padding: 0px;
        width: 290px;
        margin-top: -20px;
    }
}


body {
    background: url(/assets/images/right_img.jpg) no-repeat left top;
}

.index_page {
    background: url(/assets/images/left_img.png) no-repeat right top;
    background-size: 60%
}

.main_logo {
    height: 100px;
    padding-top: 60px;
    padding-left: 10px;
}

    .main_logo img {
        margin-top: -35px;
    }

.main_mb_btn {
    width: 100%;
    float: left;
    margin-top: -40px
}

    .main_mb_btn table {
        float: right
    }

    .main_mb_btn td {
        padding: 0px 10px
    }

        .main_mb_btn td.welcome {
            padding-top: 15px;
        }

.mb_btn_body li {
    display: inline;
    padding-right: 5px;
}

.mb_btn_body {
    margin-top: 5px;
}

    .mb_btn_body li a {
        color: #222
    }

        .mb_btn_body li a:hover {
            color: #0d8281
        }

    .mb_btn_body img {
        margin-top: -5px;
        padding-right: 3px;
    }

@media (min-width: 1200px) {
    .index_page {
        background-size: 50%
    }

    .main_logo {
        height: 170px;
        padding-top: 50px;
        padding-left: 60px;
    }

    .main_mb_btn {
        margin-top: -70px
    }
}




@media (max-width:680px) {
    .main_logo img {
        width: 150px;
    }

    .main_logo {
        width: 100%;
        text-align: left;
        padding: 0px;
        padding-top: 50px;
    }
}

.main_system_btn {
    margin-top: 50px;
    position: relative
}

    .main_system_btn .b {
        margin-top: 10px;
    }

.box, .box_r, .box_l, .box_br, .box_bl {
    border: solid 2px #ccc;
    margin-bottom: 30px;
    height: 230px;
    background: url(/assets/images/box_re.jpg) repeat-x bottom;
    background-size: 100% 100%;
    border-radius: 20px 20px 20px 20px;
    position: relative;
}
/*
.box_r{
 
  border-right: solid 2px #ccc;		
}
.box_l{
  border-top: solid 2px #ccc;
  border-left: solid 2px #ccc;		
}
.box_br{
  border-bottom: solid 2px #ccc;
  border-right: solid 2px #ccc;		
}
.box_bl{
  border-bottom: solid 2px #ccc;
  border-left: solid 2px #ccc;		
}
*/
.cro_left_top, .cro_right_top, .cro_left_bottom, .cro_right_bottom {
    position: absolute;
    width: 110px;
    height: 110px;
    border: 0;
    z-index: 1;
    background: #ffffff;
}

.cro_left_bottom {
    left: -1px;
    bottom: -1px;
    border-radius: 0px 110px 0px 0px;
    border: 0;
}


.cro_right_bottom {
    right: -1px;
    bottom: -1px;
    border-radius: 110px 0px 0px 0px;
    border: 0;
}

.cro_right_top {
    right: -1px;
    top: -1px;
    border-radius: 0px 0px 0px 110px;
    border: 0;
}

.cro_left_top {
    left: -1px;
    top: -1px;
    border-radius: 0px 0px 110px 0px;
    border: 0;
}

.cro_btn {
    width: 115px;
    height: 115px;
    color: #fff;
    background: gray;
    margin: -22px -15px -15px -15px;
}

.cro_btn_rt {
    border-left: 2px solid;
    border-bottom: 2px solid;
}

.cro_btn_lt {
    border-bottom: 2px solid;
    border-right: 2px solid;
}

.cro_btn_rb {
    border-left: 2px solid;
    border-top: 2px solid;
}

.cro_btn_lb {
    border-top: 2px solid;
    border-right: 2px solid;
}

.rb_font {
    font-size: 45pt;
    position: absolute;
    top: 28px;
    right: 20px;
}

.lb_font {
    font-size: 45pt;
    position: absolute;
    top: 28px;
    left: 15px;
}

.rt_font {
    font-size: 45pt;
    position: absolute;
    top: -10px;
    left: 35px;
}

.lt_font {
    font-size: 45pt;
    position: absolute;
    top: -10px;
    right: 40px;
}


.box:before {
    content: " ";
    position: absolute;
    width: calc( 100% - 30px);
    height: 60px;
    background-repeat: no-repeat;
    background-position: center;
    top: -21px;
}

.surgery_before:before {
    background-image: url(/assets/images/top_01.png);
}

.surgery_ing:before {
    background-image: url(/assets/images/top_02.png);
}

.surgery_after:before {
    background-image: url(/assets/images/top_03.png);
}

.surgery_visit:before {
    background-image: url(/assets/images/top_04.png);
}

.box:after {
    content: " ";
    position: absolute;
    /*     width: calc( 100% - 20px); */
    height: 30px;
    background-image: url(/assets/images/box_bottom.png);
    background-repeat: no-repeat;
    background-position: top;
    top: calc(100% - 30px);
    left: 0px;
    background-size: 100%;
}

.main_system_btn a {
    color: #222
}

.box img {
    width: 100%;
    margin-top: 50px;
    margin-left: 10px;
}

.s_text {
    margin-top: 50px;
}

    .s_text td {
        padding: 1px 5px
    }

        .s_text td span {
            color: #2e65d6
        }


@media only screen and (min-width: 640px) and (max-width: 980px) {
    .s_text {
        font-size: 12px;
    }

        .s_text td {
            padding: 1px 3px
        }

    .box {
        height: 200px;
    }
}

@media only screen and (min-width: 500px) and (max-width: 640px) {
    .s_text {
        font-size: 12px;
    }

        .s_text td {
            padding: 1px 0px
        }

    .box {
        height: 200px;
    }
}

.surgery_before .s_text, .surgery_ing .s_text, .surgery_after .s_text, .surgery_after .s_text, .surgery_visit .s_text {
    margin-top: 70px;
}

.counter_text {
    padding-top: 5px
}

.login_box {
    display: none;
    width: 120px;
    background: #eee;
    border: 1px solid #ddd;
    position: absolute;
    z-index: 99;
    font-size: 12px;
    text-align: center;
    padding: 5px 10px;
}

    .login_box li {
        border-bottom: 1px solid #ccc;
    }

        .login_box li a {
            color: #999
        }

            .login_box li a:hover {
                color: #555
            }

.main_system_list {
    min-height: 500px
}

.list_btn {
    border: 1px solid #ccc;
    padding: 10px 10px 7px 10px;
    border-radius: 10px;
    margin-top: 20px;
    float: left;
    width: 100%
}

    .list_btn li {
        display: inline;
    }

.list_date {
    float: left
}

.calendar img {
    width: 20px
}

.calendar_search {
    text-align: right;
    float: right;
}

    .calendar_search .serach_input {
        margin-left: -5px;
        width: 115px;
        font-size: 12px
    }

    .calendar_search .search_select {
        height: 24px;
        color: #555;
        Outline: 0;
        font-size: 12px
    }

.search_btn {
    margin-left: 0px;
    cursor: pointer;
    background: none;
    border: none
}

.list_date ul {
    margin-top: 3px;
}

.list_date li {
    border-right: 1px solid #ccc;
    padding: 0px 10px;
    margin: 0px 0px;
}

    .list_date li a {
        color: #555;
        padding: 0px 10px
    }

        .list_date li a:hover {
            color: #1e7c08
        }

    .list_date li.active a {
        background: #1e7c08;
        border-radius: 10px;
    }

    .list_date li.active a {
        color: #fff
    }

@media only screen and (max-width:810px) {
    .calendar img {
        width: 20px
    }

    .list_date li {
        padding: 0px 5px;
        margin: 0px 0px;
    }

        .list_date li a {
            padding: 0px 5px;
            font-size: 13px;
        }
}

@media only screen and (max-width:660px) {
    .calendar img {
        width: 20px
    }

    .list_date li {
        padding: 0px 5px;
        margin: 0px 0px;
    }

        .list_date li a {
            padding: 0px 5px;
            font-size: 13px;
        }

    .search input {
        width: 100px;
    }
}

@media only screen and (max-width:660px) {
    .calendar_search {
        width: 350px;
    }

    .calendar_search {
        margin-top: 10px;
    }
}

.main_contact {
    width: 100%;
    float: left
}

.edit_menu {
    width: 30px;
    height: 20px;
    background: #ccc;
    position: absolute;
    right: 0px;
    z-index: 999;
    margin-top: 10px;
}

.closes {
    background: #aaa url(/assets/images/close.png)no-repeat center;
}

.opens {
    background: #ccc url(/assets/images/open.png)no-repeat center;
    width: 25px
}

.edit_btn {
    width: 30px;
    position: absolute;
    right: 0px;
    margin-top: 30px;
    z-index: 999;
    font-size: 12px;
    line-height: 15px;
    opacity: 0.8
}

    .edit_btn li {
        text-align: center;
        padding: 5px 10px;
        color: #555;
        border: 1px solid #aaa;
        cursor: pointer;
        background: #fff
    }

        .edit_btn li a {
            color: #555
        }

        .edit_btn li.add {
            background: #d8f4e2;
            border-bottom: 0px
        }

        .edit_btn li.edit {
            background: #d8dff4;
            border-bottom: 0px
        }

        .edit_btn li.del {
            background: #d8edf4;
        }

        .edit_btn li:hover {
            background: #eee
        }

.main_menu {
    margin-top: 30px
}

    .main_menu li a {
        color: #555
    }

        .main_menu li a:hover {
            color: #167f1d
        }

    .main_menu li.active a {
        color: #167f1d
    }

    .main_menu li::before {
        content: '▸';
    }

    .main_menu li {
        display: inline;
        padding: 0px 5px
    }

#list_table {
    margin-top: 20px;
    float: left
}


.main_pageselect {
    clear: both
}

.thead-inverse th {
    background: #28907d;
    border: none;
    padding: 5px 0;
}

.text-center {
    padding: 0px
}

.serach_input {
    display: inline
}

.table_list {
    width: 100%
}

.patient_totle {
    width: 210px;
    height: 210px;
    cursor: pointer;
    background: url(/assets/images/btn.png)no-repeat center;
    background-size: 100%;
    margin-left: -110px;
    position: absolute;
    top: 130px;
    left: 50%;
}

@media(max-width: 1024px) {
    .patient_totle {
        width: 190px;
        height: 190px;
        margin-left: -100px;
        top: 140px;
    }
}

@media(max-width: 768px) {
    .patient_totle {
        top: -20px
    }

    .main_system_btn {
        padding-top: 200px;
    }
}