body, html {
    background-color: #fff;
    padding: 0px;
    margin: 0px;
    height: 100%;
    min-width: 100%;
    width: auto;
  /*  overflow: auto;*/
}


.upload {
    height: 300px;
    line-height: 300px;
    vertical-align: middle;
    position: relative;
}


.upload_fild {
    color: #48a0e0;
    font-size: 12px;
    border: 1px solid #48a0e0;
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
}


.upload .img {
    position: absolute;
    height: 300px;
    left: 50%;
    top: -3px;
    transform: translate(-50%,0);
}


.memo {
    padding: 4px;
    font-size: 14px;
    color: #888;
    font-weight:bold;
}

.sms-user {

    background-color:#efefef;
    border:1px solid #efefef;
    border-radius:5px;
    padding:6px;
    margin:2px;

    display:inline-block;
    cursor:pointer;

}

.flex-grow {
    flex: 1 0 auto;
}

    .sms-user.checked {

           background-color: #c9e9ff;

    border:1px solid #237ebb;
    }

.pagemenu
{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #efefef;
}

.pagemenu li
{
    display:inline;
    display:inline-block;
    padding: 10px;
    margin:0px;
    cursor:pointer;
    font-size: 20px;
    font-family: "微軟正黑體", "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

.pagemenu li.active
{
    background-color: #E8F1F7;
}   

.page_content
{
    display:none;
}

.page_content.active
{
    display:block;   
}


.status_bar a
{
 
 color:#fff;
 padding:5px 5px;
    
}
.top_menu a {
   /* color: #888;*/
    /*float:left;*/
    padding: 5px 5px;
}

#option_list div{

    padding:5px;


}

#option_list span{

    padding:0 5px;

}

input, select {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

 input[type=checkbox], #option_list input[type=radio]{

    height:20px;
    width:20px;
    margin-right:0.5rem;

}

#option_list input {
    margin-left: 5px;
    margin-right: 3px;
}

body {
    font-size: 16px;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    color: #232323;
}

.warpper
{
    height:auto;
    min-height:100%;
    background-color: #eee;
    width:auto;
    min-width:100%;
    display:inline-block;
    position:relative;
}

.main_warp
{
    text-align:center;
    padding:10px;
}

.logonbody .warpper {
    background-color: transparent !important;
}

.logonbody {
    position: relative;
    background-color: transparent !important;
}
.logonbody::after {
    content: " ";
    background-image: url('/Content/images/doctor-work.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position-y: center;
    opacity: 0.2;
    position: absolute;
    width: 100%;
    height: 100%;
    top:0px;
    left:0px;
    z-index:-1;
}

.top_bar>div{

    vertical-align:middle;

}

.top_bar {
    background: #179ece;
    height: 80px;
    box-shadow: rgba(0,0,0,0.15) 0px 5px 5px;
    /* background-image: url('/Content/images/doctor-work.jpg');*/
    background-size: 100%;
    background-repeat: no-repeat;
    background-position-y: center;
    /* background-image: url('bg.png');
    background-size: 100% 150%;
    background-repeat: no-repeat;*/
  
    z-index: 2;
    
}

    .top_bar::after {
        content: " ";
        background-image: url('/Content/images/doctor-work.jpg');
        background-size: 100%;
        background-repeat: no-repeat;
        background-position-y: center;
        opacity: 0.15;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 0;
    }

    .top_bar div{
        position:relative;
        z-index:1;
    }

    .logotext {
        line-height: 56px;
        color:#fff;
        vertical-align: top;
        font-size: 1.5rem;
    }

        .logotext a, .logotext a:hover{
            text-decoration: none;
            color: #fff;
        }

        .logolink {
            overflow: hidden;
            width: 56px;
            height: 56px;
            background-color: #fff;
            border-radius: 28px;
            display: inline-block !important;
        }


    .logolink img{

        width:56px;

        height:56px;

    }







    table.tworow td {
        font-size: 14px;
    }




table.tworow tr:nth-child(4n + 1), table.tworow tr:nth-child(4n + 2) {
    background-color: #f8f9fa;
}

table.tworow tr.hover{

   background-color:#efefef;

}

.btn-gray{

    background:#eee;

}

    .btn-gray:hover {
        background: #ccc;
    }


table.tworow tr.hover .btn-gray {
    background: #ccc;
}

table.tworow tr.hover .btn-gray:hover {
    background: #bbb;
}


.status_bar {
    /*background-color:#0288d1;*/
    height: 22px;
    color: #F0F4C3;
    padding: 2px;
}


.header_bar
{   
    /*background-color:#03a9f4;*/
    /*background-color:#f0f4c3;*/

   /* height:120px;*/
}

h2 
{
   
    font-size: 40px;
   /*  font-family: "微軟正黑體", "Segoe UI", Verdana, Helvetica, Sans-Serif;*/
     color:#888;
 /*    border-bottom: 1px solid #aaa;*/
     margin:20px 0px;
     padding:5px;
}

    h2 > input {

     font-size: 30px;
     font-family: "微軟正黑體", "Segoe UI", Verdana, Helvetica, Sans-Serif;
     color:#aaa;
     float:right;
     
    }

        h2 > input::after {
           
        }

h3
{
   
     font-size: 20px;
     font-family: "微軟正黑體", "Segoe UI", Verdana, Helvetica, Sans-Serif;
     color:#000;
     background-color:#eee;
     margin:0px;
     padding:10px;
     display:inline-block;
}

header, footer, nav, section {
    display: block;
}


/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

textarea {
    min-height: 75px;
}

.editor-label {
    margin: 1em 0 0 0;
}

.editor-field {
    margin: 0.5em 0 0 0;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #f00;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00!important;
    background-color: #fee!important;
}


.input-validation-error::after
{
    content: "請輸入正確格式";
    color: #FF0000;
}

.validation-summary-errors {
    font-weight: bold;
    color: #f00;
    font-size:20px;
}

.validation-summary-valid {
    display: none;
}


.main_content
{
    min-width:1024px;
    margin:0 auto;
    display:inline-block;
    text-align:left;
    max-width:80%;
}

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone only */
    .main_content
{
    min-width:inherit;
    margin:0 auto;
    display:inline-block;
    text-align:left;
}
}

.hs-Table.hover tr:hover
{
     background-color:#efefef; 
}

.hs-Table tr:nth-child(even)
{
    background-color: #F9F9F9;
}


.loading
{
    background-position: 2px center;
    color: #0059FE;
    background-image: url('images/ajax-loader.gif');
    background-repeat: no-repeat;
    padding-left: 20px;
    display:none;
}

h4
{
    padding:4px;
    margin:0px;   
    background-color:#def1f8;
}

h4~div
{
    padding:4px;   
}


.hs-Table
{
    margin:0 auto;
}

.hs-Table th
{
    font-weight:bold;
    background-color:#efefef;
}

.hs-Table tfoot tr td
{
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #CCCCCC;
}

.hs-Table td,.hs-Table th
{
    padding:10px 10px;
    word-break: keep-all;
   /* white-space:nowrap; */
}


.hs-Table td.value ,.hs-Table td span.value
{
    color: #0288d1;
   /* font-weight: bold;*/
}

span.value
{
    display: inline-block;
    min-width: 50px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #000000;
    padding:3px;
}

span.value.nowidth
{
    min-width:inherit;
    border:none;
}


.hs-Table.solid
{
    border: 1px solid #CCCCCC;
}
.hs-Table.solid td ,.hs-Table.solid th
{
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #CCCCCC;
}


.hs-Table
{
     font-size: 18px;
   /*  font-family: "微軟正黑體", "Segoe UI", Verdana, Helvetica, Sans-Serif;*/
}

.hs-Table.smallsize
{
     font-size: 13px;
}


ul.tabmenu {
    margin-top:5px;
    margin-bottom:0px;
    padding:0px;

}

.content_box {
    background-color: #fff;
    padding: 1.2rem;
    box-shadow: rgba(0,0,0,0.1) 0 1px;
    border-radius:1rem;
    margin-bottom:1rem;
    min-height:200px;
}


.module_container {

    column-width:200px;
    padding-top:50px;
}

    .module_container .module {

            border-radius:1.5rem;
            column-gap:10px;

            margin-bottom:20px;

     /*   width:200px;*/
         -webkit-column-break-inside: avoid;
         break-inside: avoid-column;

         background-color:#E8F1F7;

     /*     background-color:#fff;*/

         box-shadow:rgba(0,0,0,0.1) 0 1px;
    }

        .module_container .module h2 {
    margin: 0px;
    padding:15px;
    text-align:center;
    color: #237ebb;
    border-bottom: 1px solid #237ebb;
    border-bottom-color: #C8DDEC;
}

        .module_container .module div {

          padding:10px;

          font-size:15px;
        }

        .module_container .module a {

            color:#237ebb;

            padding:5px;

        }
            .module_container .module a:hover {
    text-decoration: none;
    color: #FFFFFF;
    background-color:#165580;
}



ul.tabmenu li {
    display: inline-block;
    margin: 0px;
    list-style-type: none;
    padding:10px;
    background-color:#efefef;
    cursor:pointer;
    margin-right:1px;
}

    ul.tabmenu li.active {


        background-color:#237ebb;
        color:#ffffff;
    }


.prev_content .contact {

    padding:5px;

}
    .prev_content .contact:hover {

        color:#fff;
        background-color:#237ebb;
        cursor:pointer;
    }


.prev_content>div{

    display:none;

    border:1px solid #237ebb;
    padding:5px;
  

    min-height:100px;

}

    .prev_content div.active {

        display:block;

    }

.prev_content textarea {

    width:100%;
    height:100%;
    border:none;

}

tr.warning {

    color:#aaa;
}



#detail_before > tr:hover,
#detail_before > tr.hover,

#detail > tr:hover,
#detail > tr.hover
{

    background-color:#ccc;
    cursor:default;

}



.scale
{
 
    display:inline-block;
    
    padding:5px;
  
    border-radius:2px;
    color:#ffffff;
    
}

.redbutton
{
 
    display:inline-block;
    
    padding:2px;
   
    display:none;
   
    background-color:red;   
    
    border-radius:2px;
    
}

tr:hover .redbutton
{
    display:block;   
}

.redbutton a
{
    color: #fff;
    text-decoration: none;
}

.redbutton:hover
{
    background-color: #990033;
}


.nav
{
    /*
    background-position: 10px 0px;
    background-image: url('logon.png');
    background-repeat: no-repeat;
    padding-left: 100px;*/

   /* display:inherit;*/

}

.logo
{
    padding:0px 5px;
    float:left;   
    text-align:center;
}

    .logo > div {
        display: inline-block;
        line-height: 45px;
        vertical-align: middle;
    }

    .logo > .circle {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        background-color: #fff;
    }


.nav>h1
{
    font-size: 40px;
     font-family: "微軟正黑體", "Segoe UI", Verdana, Helvetica, Sans-Serif;
    color:#888888;
    margin:0px;
    padding:5px;

    display:none;
}




ul.nav_bar {
    margin: 0px;
    padding:0px;
  
}


ul.nav_bar li
{
    list-style: none;
    display: inline-block;
    font-size: 20px;
 /*   font-family: "微軟正黑體" , "Segoe UI" , Verdana, Helvetica, Sans-Serif;*/
    color: #fff;
    padding: 15px;
    height:80px;
    vertical-align:middle;
    line-height:80px;
  
}

 ul.nav_bar li a
 {
      text-decoration: none;
       color: #ccc;
 }
     ul.nav_bar li a:hover {
        text-decoration: none;
        color: #fff;
    }



ul.nav_bar li.active , ul.nav_bar li:hover
{
    color:#fff;

    background-color:rgba(255,255,255,0.2);
    border-bottom: 5px solid #ff9624;
}

.bottom_input input
{
    font-size:20px;
    font-family: "微軟正黑體", "Segoe UI", Verdana, Helvetica, Sans-Serif;
}



.conversation > h1
{
     font-size: 40px;
     font-family: "微軟正黑體", "Segoe UI", Verdana, Helvetica, Sans-Serif;
     color:#333;
     /*border-bottom: 1px solid #333;*/
     margin:30px 0px;
     padding:10px;
     text-align:center;
}

.conversation > h2
{
        
}



.conversation .question
{
     font-size: 20px;
     font-family: "微軟正黑體", "Segoe UI", Verdana, Helvetica, Sans-Serif;
     margin:20px;
}


.conversation .question>div
{
    display:inline-block;
    padding:5px;
}


.qdesign {
    /*border: 2px solid #03a9f4;*/
    margin: 20px 0px;
    padding: 20px;
    background-color: #E8F1F7;
}

    .qdesign.editing{

        position:fixed;

        bottom:10px;

    }

        .btn_cancelEdit, .btn_Edited {
            display: none;
        }

.qdesign.editing .btn_cancelEdit, .qdesign.editing .btn_Edited {
    display: initial;
}

        .qdesign.editing #add_question{

            display:none;

        }


        .qdesign > div {
            padding: 5px;
        }


.LogonUser
{
 /*   float:right;   
 */   
}

/*    
.del
{
border: 1px solid #C0C0C0;
    width: 10px;
    height: 20px;
    background-color: #F3F3F3;
    padding:2px;
    margin:2px;
    display:inline-block;
    cursor:pointer;
}*/

.del_item
{
    text-align: center;
    color: #FFFFFF;
    background-color: #FF0000;
}

.del_item:hover
{
     color: #FF0000;
}


.heightlight
{
    background-color: #FFFF00;
}


.page>*
{
   display:inline-block;
   padding:10px;
   font-size:20px;
}


.interview:hover{


    background-color:#237ebb;

    color:#fff;


    cursor:pointer;

}


a.nav-link{

    color:#aaa;

}

.shadow{

    box-shadow:rgba(0,0,0,0.1) 0px 15px;

}


.case_row:nth-child(even)
{

    background-color:#f9f9f9;
}

.case_row:hover, .case_row.hover {
    background-color: #e0f7ff;
}

.case_value {
    background-color: #f9f9f9;
    min-height: 30px;
    padding:0.25rem;
}

.case_row:hover .case_value, .case_row.hover .case_value {
    background-color: #e7eff5;
}


.fileblock
{
    user-select:none;
    margin:1px;
}


    .fileblock:hover {
        background-color: #c1def1;
    }

    .fileblock.selected {
        background-color: #007bff;
        color:#fff;
    }


    .fileblock.empty img {
        filter: grayscale(100%);
    }


.case_detail .header {
    color: #999;
    margin-right: .75rem;
}


.file_upload_list {
    position: fixed;
   display:none;
    width: 300px;

    right:10px;
    bottom:10px;
    box-shadow:5px 5px rgba(0,0,0,0.1);
    
}

    .file_upload_list .header {
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
        color: #fff;
    }


    .file_upload_list .content {
        height: 300px;
    }



.upload_item {
    position: relative;

    background-color:#efefef;

    margin-bottom:1px;
}


    .upload_item .name {
        padding: 0.3rem;
        position: inherit;
    }

.upload_item .progress_container{

    position:relative;
    height:5px;
    background-color:#efefef;
    width:100%;

}


    .upload_item .progress_bar {
        position: absolute;
        left:0px;
        top:0px;
        height: 100%;
        background-color: #d2e9f8;
        width:0%;
    }


    .upload_item .progress_value {
        position: absolute;
        right: 10px;
        top: 0px;
        height: 100%;

        line-height:2rem;
        color:#888;
        vertical-align:middle;
        font-size:0.75rem;
      
    }

    .upload_item.done{

       /* color:#fff;*/

    }

     .upload_item.done .progress_value {
       /*  color: #fff;*/
     }

    .upload_item.done .progress_bar {
        background-color: #d3f5db;
        width: 100%;
    }


    .prview_bg{

        background-color:rgba(0,0,0,0.75);

        position:absolute;

        width:100%;

        z-index:10;

        width:100%;

        height:100%;

        top:0px;
        left:0px;

    }


.widthlimit{

    width:100%;

}


.showgird .listview{


    display:none;

}


.showgird #btn_gird{

    background-color:#ccc;

}


.showlist .girdview {
    display: none;
}

.showlist #btn_list {
    background-color: #ccc;
}





@media only screen and (max-width: 400px) {


    .top_bar {
        background: #179ece;
        height: 50px;
        box-shadow: rgba(0,0,0,0.15) 0px 5px 5px;
        /* background-image: url('/Content/images/doctor-work.jpg');*/
        background-size: 100%;
        background-repeat: no-repeat;
        background-position-y: center;
        /* background-image: url('bg.png');
    background-size: 100% 150%;
    background-repeat: no-repeat;*/
    
        z-index: 2;
        width:100%;
        
    }

        .top_bar::after {
            content: " ";
            background-image: url('/Content/images/doctor-work.jpg');
            background-size: 100%;
            background-repeat: no-repeat;
            background-position-y: center;
            opacity: 0.15;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            z-index: 0;
        }

        .top_bar div {
            position: relative;
            z-index: 1;
        }

    .logotext {
        line-height: 40px;
        color: #fff;
        vertical-align: top;
        font-size: 1.0rem;

    }

        .logotext a, .logotext a:hover {
            text-decoration: none;
            color: #fff;
        }

    .logolink {
        overflow: hidden;
        width: 30px;
        height: 30px;
        background-color: #fff;
        border-radius: 15px;
        display: inline-block !important;
        margin-top:5px;
    }


        .logolink img {
            width: 30px;
            height: 30px;
        }





    .nav > h1 {
        font-size: 40px;
        font-family: "微軟正黑體", "Segoe UI", Verdana, Helvetica, Sans-Serif;
        color: #888888;
        margin: 0px;
        padding: 5px;
        display: none;
    }




    ul.nav_bar {
        margin: 0px;
        padding: 0px;
    }


        ul.nav_bar li {
            list-style: none;
            display: none;
            font-size: 1.1rem;
            /*   font-family: "微軟正黑體" , "Segoe UI" , Verdana, Helvetica, Sans-Serif;*/
            color: #fff;
            padding: 3px;
            height: 50px;
            vertical-align: middle;
            line-height: 50px;
            
        }

            ul.nav_bar li a {
                text-decoration: none;
                color: #ccc;
            }

                ul.nav_bar li a:hover {
                    text-decoration: none;
                    color: #fff;
                }



            ul.nav_bar li.active, ul.nav_bar li:hover {
                color: #fff;
                background-color: rgba(255,255,255,0.2);
               border-bottom: none;
                display:block;
            }



    .pm-search {
        position: fixed;
        z-index: 1;
        display:none;
        top:65px;
    }


}