﻿/*
   custom.kendo.css?date=20181101-1000
   
     Custom kendo-relative style.
*/

/* common
-----------------------------------------------*/

/* 
  Web Font Icons
  https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web#sizes
*/

.k-icon-16 {
    font-size: 16px; /* Sets icon size to 16px */
}

.k-icon-24 {
    font-size: 24px; /* Sets icon size to 24px */
}

.k-icon-32 {
    font-size: 32px; /* Sets icon size to 32px */
}

.k-icon-48 {
    font-size: 48px; /* Sets icon size to 48px */
}

.k-icon-64 {
    font-size: 64px; /* Sets icon size to 64px */
}

/* kendo & jquery-ui */

.k-checkbox.ui-state-disabled,
.k-radio.ui-state-disabled {
    opacity: 0.1; /* readyonly() 函式加入 ui-state-disabled 造成深色線條, 覆蓋 custom.jquery ui-state-disabled opacity: 1 樣式, 參考 .k-radio */
}

/* kendo & bootstrap */

/* 注意: Kendo DropDownList 等特定元件不可使用 form-control 樣式類別, 因為 font-size, height 等元件內建樣式將被覆蓋導致元件樣式位移 */
.form-horizontal.form-auto span.k-autocomplete,
.form-horizontal.form-auto span.k-combobox,
/*.form-horizontal.form-auto span.k-datepicker, 日期輸入不適用(因為按鈕元素過遠不易操作)
.form-horizontal.form-auto span.k-datetimepicker,
.form-horizontal.form-auto span.k-timepicker,*/
.form-horizontal.form-auto span.k-dropdown,
.form-horizontal.form-auto span.k-maskedtextbox,
.form-horizontal.form-auto span.k-numerictextbox {
    width: 100%; /* dropdown 等元素使用最大寬度(相對於上層 div class="col-xx-xx" 元素)覆蓋 kendo 內建輸入元素寬度設定) */
}

/* button */

.k-button {
    margin: 4px 4px 4px 0px; /* 0px */
}

/* grid */

/* 勾選滑鼠指標 */
.k-grid input.k-checkbox, .grid-checkAll, .grid-cell-check, .grid-row-check {
    cursor: pointer;
}

/* Toolbar 標題, 使用 ToolBar 自訂按鈕模擬 Grid 標題, 如 Custom().Text("Products").HtmlAttributes(new { @class = "grid-title", @href = "#" }) 等 */
.k-grid-toolbar .k-button.grid-title {
    background-color: initial;
    border-color: initial;
    border-style: initial;
    border-width: initial;
    color: initial;
    cursor: default;
    text-decoration: none;
}

/* 欄位標題對齊 - 中間, 整合 bootstrap 樣式 */
th.k-header.text-center {
    text-align: center;
}

/* 欄位標題對齊 - 向右, 整合 bootstrap 樣式 */
th.k-header.text-right {
    text-align: right;
}

/* Grid 儲存格文字超出欄位寬度部份顯示 "..." 提示 */
.k-grid-content > table > tbody > tr > td {
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid 勾選 */

/* 內建更新按鈕 - 一般作業資料查詢不適用 Grid 右下方內建更新按鈕(Refresh)方式因此隱藏 */
.k-grid-pager .k-pager-refresh {
    display: none;
}

/* 列勾選 - 靠左顯示 */
.grid-row-check {
    float: left;
}

/* 全部勾選 - 靠左顯示 */
.grid-cell-checkheadercontainer, .grid-row-checkheadercontainer {
    float: left;
}

/* Grid 勾選元素/欄位文字對齊 */
.grid-cell-checkfloat {
    float: left;
}

/* Grid 勾選元素/欄位文字對齊 */
.grid-cell-checktemplatefloat {
    padding-left: 20px;
    float: left;
}

/* Grid 勾選欄位 - 若 checkbox 停用(disabled), 則接鄰 label 元素提示停用(cursor) */
.grid-cell-checkcontainer > .k-checkbox[disabled],
.grid-cell-checkcontainer > .k-checkbox[disabled] + .k-checkbox-label,
.grid-row-checkcontainer > .k-checkbox[disabled],
.grid-row-checkcontainer > .k-checkbox[disabled] + .k-checkbox-label {
    cursor: not-allowed;
}

/* Grid 勾選欄位 - 若 checkbox 隱藏(使用 hide 樣式類別), 則接鄰 label 元素一併隱藏 */
.grid-cell-checkcontainer > .k-checkbox.hide + .k-checkbox-label,
.grid-row-checkcontainer > .k-checkbox.hide + .k-checkbox-label {
    display: none;
}

/* 整列點選(選擇項目, 進入另一個頁面) */
.grid-row-select .k-grid-content > table > tbody > tr,
.grid-row-redirect .k-grid-content > table > tbody > tr {
    cursor: pointer;
}

/* 單欄點選(選擇項目, 進入另一個頁面) */
.grid-cell-select,
.grid-cell-rediret {
    cursor: pointer;
}

/* input */

/* 絕對唯讀, 使用 span 包覆文字套用編輯唯讀樣式.
   注意 : Kendo NumericTextBox(For) 等為複合組成輸入元素(使用 span 等), 因此不可套用 k-textbox 否則將導致元素顯示錯位(如增加減少按鈕圖示異常等). */
span.k-textbox {
    height: 2.13em;
    text-indent: 0.33em;
    line-height: 1.6em;
    padding: 2px 0.3em;
    /* background-color: lightgray; 暫不使用 */
}

/* 編輯唯讀樣式 */
input.k-textbox[disabled] {
    background-color: lightgray;
}

input.k-textbox[readonly] {
    background-color: rgb(235, 235, 228);
}

/* dropdownlist */

/* 唯讀下拉元件樣式 */
span.k-dropdown[aria-readonly='true'] > span.k-dropdown-wrap {
    cursor: default; /* 原始為使用 cursor: hand */
    background-color: #fff;
}

    /* 唯讀下拉元件的 "請選擇" 樣式 - 文字色彩變淡 */
    span.k-dropdown[aria-readonly='true'] > span.k-dropdown-wrap > .k-input {
        color: lightgray;
    }

span.k-dropdown {
    /* 複製 kendo.common.css 同 input.k-textbox 樣式 - padding: 2px .3em;, 原始樣式無設定(未與按鈕水平對齊) */
    /*padding-top: 2px;
    padding-bottom: 2px;*/
}

/* listview */

/* 項目點選 */
.k-listview > div {
    cursor: default;
}

/* 項目點選(選擇項目) */
.listview-select.k-listview > div {
    cursor: pointer;
}

/* menu */

.k-menu .k-item > .k-link {
    padding: .5em .5em .5em .5em; /* 原始 padding 過大 */
}

/* tabstrip */

.k-tabstrip-items {
    padding: 2px .4em 0; /* .3em .3em 0; 原始值 top 較大將造成略微捲軸 */
}

.k-tabstrip-scrollable > .k-tabstrip-items {
    /* margin-left: 38px 因為 tab 捲軸為自動提供捲動頁面使用因此不自訂 */
}

.k-tabstrip > .k-content {
    margin: 0px 4px 4px; /* 0 .286em .3em; 原始值較大將造成略微捲軸 */
    padding: 4px; /* .3em .92em; 原始值較大, 若內容較少將造成略微捲軸 */
}

.k-tabstrip > .k-content {
    min-height: 80px; /* 防呆, 若頁籤高度非預設 height: 0px 套用最小高度提示 */
}

/* Telerik Reporting ReportViewer */

trv-pages-area error {
    overflow: auto; /* 修正 - 預設報表錯誤區域元素無捲軸 */
}

/*頁碼修改*/
@media screen and (max-width: 1024px) {
    .k-webkit .k-grid .k-pager-numbers, .k-safari .k-grid .k-pager-numbers, .k-webkit .k-grid .k-pager-numbers {
        left: 112px;
    }
}

/*下拉選單修改*/

.k-dropdown-wrap.k-state-default {
    border-radius: 8px;
    background-color: var(--lighGray);
    vertical-align:middle;
}



/*input*/

.k-widget.k-dropdown.k-header {
    background:  var(--lighGray);
    color: var(--midGray);
    border-radius:8px;
    /*width:calc(100% - 38px);*/
}

.k-dropdown-wrap.k-state-default {
    border: none;
}

.k-dropdown-wrap .k-input {
    padding: 0px;
    height: auto;
}

.k-dropdown .k-input {
    color: var(--midGray);
    text-align: left;
    font-size: 1.25rem;
    line-height: 1.5;
    height:50px;
    line-height:50px;
    padding-left:20px;
}

.k-picker-wrap.k-state-default {
    background: var(--lighGray);
    border: none;
    border-radius: 8px;
}

.k-picker-wrap .k-input {
    background: var(--lighGray);
    font-size: 1.25rem;
    padding: 0;
    height: auto;
    border-radius: 8px 0 0 8px;
    height: 50px;
    padding-left: 20px;
    box-sizing: border-box;
}

.k-state-default > .k-select {
    border: none;
    line-height:50px;
}

form-inline span input:hover {
    background: #1A535C !important;
    color: white;
}

/*checkbox勾選框隱藏*/
.k-checkbox:checked + .k-checkbox-label:before, .k-checkbox:checked:active + .k-checkbox-label:before, .k-checkbox + .k-checkbox-label:before {
    display: none;
}

/*checkbox的label*/
.k-checkbox-label, .k-radio-label {
    vertical-align: middle;
    line-height: 1;
}

/*時間選單*/
.k-datetimepicker input:hover {
    background: #1A535E !important;
    color: white;
}

.k-picker-wrap.k-state-border-down .k-input {
    border-radius: 8px 0 0 8px;
}
/*項目*/
.itemList {
    padding: 20px;
    background:white;
    box-shadow: #00000029 0 2px 4px;
    border-radius: 0 0 8px 8px;
}

.k-picker-wrap .k-select {
    line-height: 50px;
}

.form-inline .k-input {
    line-height: 50px;
}

.form-inline .k-dropdown-wrap.k-state-default {
    padding: 0 0 0 20px;
    font-size: 1.25rem;
}

input.k-textbox {
    height: 50px;
    padding: 0 20px;
    background: var(--lighGray);
    border: none;
    border-radius: 8px;
    font-size:1.25rem;
    /*color:var(--midGray);*/


}

input.k-textbox:hover,input.k-textbox:active,input.k-textbox:focus,
.k-numeric-wrap .k-input:hover,.k-numeric-wrap .k-input:active,.k-numeric-wrap .k-input:focus {
    background: #1A535C;
    font-size:1.25rem;
    color:white;
}

.k-icon.k-i-clock {
    margin-right: 15px;
}

.k-numeric-wrap .k-input,.k-numeric-wrap .k-input {
    text-align: center;
    padding: 0;
    line-height: 50px;
    background: var(--lighGray);
    height: 50px;
    border-radius: 8px;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 1.25rem;
}

.k-numeric-wrap.k-state-default {
    background: var(--lighGray);
}

.inputrea.common .inputcontent .k-widget, .vsinputrea.common .inputcontent .k-textbox {
    width: 100%;
}

.inputrea.common .inputcontent .smallInput .k-widget,.smallInput .k-widget,
 .inputrea.common .inputcontent .singlelInput .k-widget,
 .vsinputrea.common .inputcontent .smallInput .k-textbox,.targetset .inputrea .inputcontent .k-widge
 {
    margin: 0 8px;
    width: calc(100% - 138px);
}

.inputrea.common .inputcontent .singleInput .k-widget {
    margin: 0 8px;
    width: calc(100% - 73px);
}

.smallInput .k-numeric-wrap .k-input {
    text-align: center;
    padding: 0;
}

.fas.fa-angle-down {
    font-weight: 900;
    float: right;
}

.form-inline.smallInput .btn-number, .form-inline.singleInput .btn-number {
    margin: 0 5px 0 5px;
}

.k-numeric-wrap.k-state-default {
    border-radius: 8px;
}

.k-numeric-wrap {
    border: none;
}

.smallInput .unit {
    font-size: 16px;
    color: var(--midGray);
    width: 56px;
    text-align: right;
}

.inputlabel .inputlabel {
    font-size: 18px;
}

.k-icon.k-i-calendar {
    margin-right: 8px;
}
.k-pager-sizes .k-dropdown .k-input{
    font-size:1rem;
}

/*表格*/
/*按鈕*/
.k-grid tbody .k-button.k-state-hover,.k-grid tbody .k-button:hover{
    border-color:none;
    background-color:var(--mainLighColor)!important;
    background:var(--mainLighColor);
}


.k-grid tbody .k-button {
    background: var(--mainColor);
}

.k-grid .k-button {
    padding: 5px 9px;
    margin: 0;
}


.k-grid tbody .btn-delete.k-button {
    background: var(--mainColor1);
}

.k-grid tbody .btn-delete.k-button:focus{
    background-color: var(--mainLighColor)!important;
}

.visiteListInHosp .k-grid td {
    color: var(--midGray);
    font-size: 1.25rem;
}

.k-grid-header th.k-header > .k-link {
    text-align: center;
}

.k-grid td {
    padding: 14px 14px;
    border-width: 1px;
}

.k-grid-norecords-template{
    width:100%;
       background:var(--lighGray);
    border:none;
    font-size:1.25rem;
}

/*頁數*/
.k-pager-wrap > .k-link .k-icon {
    border-radius: 8px;
    background: white;
    border: none;
    color: var(--mainColor);
    padding: 10px;
}

.k-pager-wrap > .k-link .k-icon:hover {
        border-radius: 8px;
        background: var(--mainColor);
        border: none;
        color: white;
        cursor:pointer;
    }
.k-pager-wrap .k-link {
    border: none;
    width: 36px;
    height: 36px;
    opacity: 1;
}

.k-link.k-pager-nav.k-state-disabled {
    padding: 0;
    margin: 0 5px;
}



.k-link.k-pager-nav.k-state-disabled:first-child {
    margin-left: 0;
}

.gridarea .k-pager-wrap a.k-link:hover, .gridarea .k-pager-wrap a.k-link:focus {
    background-color: white !important;
    color: white;
}

.k-webkit .k-pager-numbers .k-current-page .k-link, .k-webkit .k-pager-numbers.k-state-expanded .k-current-page .k-link {
    border-radius: 8px;
}

.k-pager-numbers .k-state-selected {
    border-radius: 8px;
}

.k-pager-wrap.k-grid-pager .k-link.k-pager-nav:nth-of-type(3){
    margin-left:88px;
}


@media (min-width: 1025px){
    
.k-pager-wrap.k-grid-pager .k-link.k-pager-nav:nth-of-type(3){
    margin-left:5px;
}
}


/*表格*/
.recordarea .k-grid .k-grid-header .k-header{
    background:var(--mainColor)!important;
}
.recordarea .k-grid .k-grid-header .k-header .k-link{
    color:white!important;
}
.k-header{
    border-color:white;
}
 .k-grid-header th.k-header{
     padding:0;
     font-size:1.125rem;
 }
 .k-grid-header th.k-header>.k-link{
     line-height:1;
     margin:0;
     padding:10px
 }
 .k-master-row,tr:nth-child(even){
     background-color:white!important;
 }
  .k-grid .k-master-row .k-hierarchy-cell{
     color:var(--mainColor);
 }
 .k-grid .k-master-row td{
     font-size:1.25rem;
     color:var(--midGray);
 }
 .chartresult .k-grid .k-header .k-link{
     color:white!important;
 }
 .k-detail-row{
     margin-top:10px;
 }

 .k-widget{
     color:var(--midGray);
     border-style:none;
 }
 .k-grid .k-detail-cell{
     padding:0;
 }

/*響應式*/
@media (min-width: 700px) {
    .k-dropdown .k-input {
        font-size: 1.5rem;
    }



@media(max-width: 1024px) {
    .k-link.k-pager-nav.k-state-disabled:nth-last-of-type(3) {
        margin-left: 85px;
    }
   }

@media(min-width:1025px){
     .k-widget.k-grid .k-pager-numbers {
        top: 2px;
    }
}

.k-grid-header .k-i-sort-asc-sm,.k-grid-header .k-i-sort-desc-sm{
    color:white;
    top:4px;
}



/* end */