/*@import url('https://fonts.googleapis.com/css?family=Inconsolata');*/
iframe.width-changed {width: 100%; display: block; border: 0; height: 0; margin: 0;} /* to check changing width of an element. do not delete this line. see javascript file widthChanged event */

/* master */
.ex-datagrid-wrap {width: 100%;}
.ex-datagrid-wrap table.ex-datagrid input[type=date],
.ex-datagrid-wrap table.ex-datagrid input[type=email],
.ex-datagrid-wrap table.ex-datagrid input[type=month],
.ex-datagrid-wrap table.ex-datagrid input[type=number],
.ex-datagrid-wrap table.ex-datagrid input[type=password],
.ex-datagrid-wrap table.ex-datagrid input[type=tel],
.ex-datagrid-wrap table.ex-datagrid input[type=text],
.ex-datagrid-wrap table.ex-datagrid input[type=time],
.ex-datagrid-wrap table.ex-datagrid input[type=week] {height: calc(1.5em + .75rem + 2px);border: 1px solid #dedede;border-radius: .25rem;text-indent: 5px;}
.ex-datagrid-wrap table.ex-datagrid input[type=date],
.ex-datagrid-wrap table.ex-datagrid input[type=month],
.ex-datagrid-wrap table.ex-datagrid input[type=tel],
.ex-datagrid-wrap table.ex-datagrid input[type=time],
.ex-datagrid-wrap table.ex-datagrid input[type=week] {width: 120px;}
.ex-datagrid-wrap table.ex-datagrid select { height: calc(1.5em + .75rem + 2px); padding: .375rem .1rem .375rem .1rem;border:1px solid #dedede; border-radius: .25rem;text-indent:5px; width:100%; }
.ex-datagrid-wrap table.ex-datagrid textarea { padding: .375rem .3rem;border:1px solid #dedede; width:100%; }

/* sub */
.ex-datagrid-wrap>.ex-table-header>table, .ex-datagrid-wrap>.ex-table-body>table, .ex-datagrid-wrap>.ex-table-footer>table { width:100%; table-layout:auto; }
.ex-datagrid-wrap .ex-table-header {border-top: 2px solid #1428a0;} /* 1. Due to the padding color, I have to set the background-color as same as header color. 2. Do not make overflow x and y here, it hides the filter */
.ex-datagrid-wrap .ex-table-body {background-color: white;}
.ex-datagrid-wrap .ex-table-body>table {border-bottom: 2px solid #1428a0; font-family: sans-serif;}
.ex-datagrid-wrap .ex-table-body-border-top {border-top: 1px solid #1428a0; margin-top: 3px;}
.ex-datagrid-wrap .ex-table-body .ex-datagrid input, .ex-table-body .ex-datagrid select {display:inline-block; max-width:98%;}
.ex-datagrid-wrap .ex-table-footer {background-color:#fff; border-bottom: 2px solid #1428a0;}
.ex-datagrid-wrap .ex-datagrid .ex-header-filter {color:#01b3e3; font:11px/1 FontAwesome; cursor: pointer; margin-right: 3px;}
.ex-datagrid-wrap .ex-datagrid .ex-header-filter:before {font-family: "FontAwesome"; font-weight: 900; content: "\f0b0";}
.ex-datagrid-wrap .ex-datagrid .ex-header-filter-empty {opacity: 0; color:#fff;}
.ex-datagrid-wrap .ex-datagrid>thead>tr>th:hover .ex-header-filter-empty {opacity: 1; transition-delay: 0.5s;}
.ex-datagrid-wrap .ex-datagrid>thead>tr>th {text-align:center; padding:10px 3px; position:relative;background-color: #1428a0; min-width:40px;color:#fff; white-space: nowrap;border-bottom:1px solid #3347be;/*display: inline-block;overflow-x: hidden;text-overflow: ellipsis;*/}
.ex-datagrid-wrap .ex-datagrid>thead>tr>th.ex-group-column,.ex-datagrid tbody>tr>td.ex-group-column {width: 30px;min-width: 30px;max-width: 30px;padding: 0px;}
.ex-datagrid-wrap .ex-datagrid>thead>tr>th>a, .ex-datagrid-wrap .ex-datagrid thead>tr>th>span {font-weight: normal; color: #fff; text-decoration: none;}
.ex-datagrid-wrap .ex-datagrid>thead>tr>th>a.ex-sort-header {color:#00b3e3;}
.ex-datagrid-wrap .ex-datagrid>tbody>tr {border-bottom:1px solid #ebebeb;}
.ex-datagrid-wrap .ex-datagrid>tbody>tr>td {padding:8px 0 8px 0; /* do not change the padding right and left, it cause the incorrect header width */ position:relative; min-width:40px;text-align: center;vertical-align: middle;}
.ex-datagrid-wrap .ex-datagrid>tbody>tr>td.selectall {-moz-user-select: all;-webkit-user-select: all;-ms-user-select: all;}
.ex-datagrid-wrap .ex-datagrid>tbody>tr {background-color: #fff;}
.ex-datagrid-wrap .ex-datagrid>tbody>tr.ex-odd-row {background-color: #f7f7f7;}
.ex-datagrid-wrap .ex-datagrid>tbody>tr:last-child {border-bottom:1px solid #1428a0;}
.ex-datagrid-wrap .ex-datagrid>tfoot>tr {background-color: #f7ed8c !important; border-bottom: 1px solid #f7ed8c;}
.ex-datagrid-wrap .ex-datagrid>tfoot>tr>th {text-align:center; padding:10px 0 6px 0; min-width:40px;}
.ex-datagrid-wrap .ex-datagrid .ex-select {background-color: cadetblue!important;}
.ex-datagrid-wrap .ex-datagrid .ex-filter-btn{width:10px; cursor:pointer;}
.ex-datagrid-wrap .ex-datagrid .ex-filter-wrap{z-index:999; position:absolute; left:50%; transform:translateX(-50%); top:0; display:none;}
.ex-datagrid-wrap .ex-datagrid .ex-filter-wrap.ex-first {margin-left:60px;}
.ex-datagrid-wrap .ex-datagrid .ex-filter-wrap.ex-last {margin-left:-60px;}
.ex-datagrid-wrap .ex-datagrid .ex-filter-box{width:180px; background:#fff; border:1px solid #639dd4; position:absolute; top:26px; left:50%; transform:translateX(-50%); box-shadow:0px 2px 10px rgba(0, 0, 0, 0.2); padding:5px;}
.ex-datagrid-wrap .ex-datagrid .ex-filter-box .ex-filter-list{min-height: 15px; background:#fff; border:none; max-height:200px; padding:5px; overflow-x: auto; overflow-y: auto;}
.ex-datagrid-wrap .ex-datagrid .ex-filter-box .ex-filter-button {border-top: 1px solid #eee;padding-top: 7px;display: flex;max-width: 90%;text-align: center;align-items: center;margin: auto;}
.ex-datagrid-wrap .ex-datagrid .ex-filter-box ul {list-style-type:none; padding:0; margin:0;}
.ex-datagrid-wrap .ex-datagrid .ex-filter-box li{color:#333; font-weight:lighter; font-size:13px; text-align:left; padding: 0; height: 21px;}
.ex-datagrid-wrap .ex-datagrid .ex-filter-box li:last-child{margin-bottom:0px;}
.ex-datagrid-wrap .ex-datagrid .ex-filter-close-btn{position:absolute; cursor:pointer; top: 11px; right: 25px; font-size:14px; z-index:9999;font-size: medium; color: #aaa;}
.ex-datagrid-wrap .ex-datagrid .ex-filter-wrap.active{display:block;}
.ex-datagrid-wrap .ex-datagrid .ex-filter-wrap>.ex-filter-box input{margin:0;}
.ex-datagrid-wrap .ex-datagrid .ex-filter-wrap>.ex-filter-box input[type=checkbox]{border-radius: 3px;background-color: #e1e1e1;-webkit-appearance: none;-moz-appearance: none;appearance: none;display: inline-block;position: relative;color: #666;top: 0px;height: 15px;width: 15px;cursor: pointer;outline: none; text-indent:0;}
.ex-datagrid-wrap .ex-datagrid .ex-filter-wrap>.ex-filter-box input[type=checkbox]:checked::before {position: absolute; font: 11px FontAwesome; left: 2px; top: 2px; font-family: "FontAwesome"; font-weight: 900; content: '\f00c'; background-color: #e1e1e1;}
.ex-datagrid-wrap .ex-datagrid .ex-down-box {list-style: none;}
.ex-datagrid-wrap .ex-datagrid .ex-down-box>div {margin-top:15px;}
.ex-datagrid-wrap .ex-datagrid .ex-down-box>div>li>label>span {margin-left:3px; vertical-align: top; padding-top: 3px; display: inline-block; font-weight: lighter; font-size: 12px; color: #666; letter-spacing: .5px; font-family: 'Lucida Console'; cursor:pointer;}
.ex-datagrid-wrap .ex-datagrid .ex-down-box>div>li>label {white-space: nowrap; vertical-align: middle; line-height: 12px;}
.ex-datagrid-wrap .ex-datagrid .ex-down-box>li>input[type=text] {width: 100%; border: 1px solid #eaeaea;text-indent: 5px;}
.ex-datagrid-wrap .ex-pager {height: 29px;margin-top: 5px;}
.ex-datagrid-wrap .ex-pager .ex-pager i {color: #00b3e3;}
.ex-datagrid-wrap .ex-pager-current {color: #333; border-color: transparent; background-color: #00b3e3; border-radius:3px; color: #fff!important;}
.ex-datagrid-wrap .ex-pagers {float:left; margin-top:7px;}
.ex-datagrid-wrap .ex-pager .ex-pager {padding: 4px 7px; display: initial; color: #00b3e3;}
.ex-datagrid-wrap .ex-pager a.ex-pager:hover {background-color:#f3f3f3; text-decoration:none;}
.ex-datagrid-wrap .ex-pages {float:right; margin-top:7px;}
.ex-datagrid-wrap .ex-page {padding: 4px 7px; border-radius: 3px; border: none; color: #00b3e3;}
.ex-datagrid-wrap .ex-page>i {color: #00b3e3;}
.ex-datagrid-wrap a.ex-page:hover {background-color:#f3f3f3; text-decoration:none;}
.ex-datagrid-wrap .ex-page-current {color: #333; border-color: transparent; background-color: #00b3e3; color: #fff!important;}
.ex-datagrid-wrap .ex-header {position: relative; width: 100%; margin-top: 5px; margin-bottom: 5px; /*min-height: 32px; when there is no header, this makes height*/}
.ex-datagrid-wrap .ex-header > .ex-total-record { display: inline-block; text-align: left; font-size: initial; margin: 10px 0 5px 0; }
.ex-datagrid-wrap .ex-header > .ex-total-record b {color: #00b3e3;}
.ex-datagrid-wrap .ex-header > .ex-right-header { text-align: right; padding: 0; white-space: nowrap; }
.ex-datagrid-wrap .ex-search-text {border:1px solid #ddd; text-indent: 10px; height:32px; width:200px; border-radius: 16px; border: 1px solid #1429a0; padding: 1px 2px; margin-bottom: 0;}
.ex-datagrid-wrap .ex-input-inner-button {position: absolute; right: 11px; top: calc(100% / 2 - 10px);}
.ex-datagrid-wrap .ex-input-inner-button>a>i {font-size: 20px;color: #00b3e3;}
.ex-datagrid-wrap .ex-input-inner-button svg {font-size: 20px; color: #1429a0;}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-print-button {color:#00b3e3; font-size: 21px;margin: 5px 5px 5px 5px; cursor:pointer;vertical-align: middle;}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-download-button {color:#00b3e3; font-size: 21px;margin: 5px 5px 5px 5px; cursor:pointer; position: relative; vertical-align: middle;}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-download-button:hover > .ex-download-button-submenu {display:block;margin: 0;}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-download-button > .ex-download-button-submenu {display:none; list-style: none; position:absolute; padding: 0; width: max-content; right: 0; background-color: white; border: solid 1px #404040; z-index: 100;}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-download-button > .ex-download-button-submenu>.ex-download-button-subitem {padding: 3px 10px;text-align: left;}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-download-button > .ex-download-button-submenu>.ex-download-button-subitem:hover { background-color: #dedede}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-download-button > .ex-download-button-submenu>.ex-download-button-subitem > a { color: black; font-weight: normal; font-size: 13px; padding: 5px 10px; line-height: 20px;}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-filter-button {color:#00b3e3; font-size: 21px;margin: 5px 5px 5px 5px; cursor:pointer; position: relative; vertical-align: middle;}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-filter-button:hover > .ex-filter-button-submenu {display:block;margin: 0;}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-filter-button > .ex-filter-button-submenu {display:none; list-style: none; position:absolute; padding: 0; width: max-content; right: 0; background-color: white; border: solid 1px #404040; z-index: 100;}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-filter-button > .ex-filter-button-submenu>.ex-filter-button-subitem {padding: 3px 10px;text-align: left;}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-filter-button > .ex-filter-button-submenu>.ex-filter-button-subitem:hover { background-color: #dedede}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-filter-button > .ex-filter-button-submenu>.ex-filter-button-subitem > a { color: black; font-weight: normal; font-size: 13px; padding: 5px 10px; line-height: 20px;}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-save-filter-button {color:#00b3e3; font-size: 21px;margin: 5px 5px 5px 5px; cursor:pointer;vertical-align: middle;}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-column-organizer-button {font-size: 21px;margin: 5px; vertical-align: middle; cursor:pointer; position: relative; z-index: 2;}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-column-organizer-button > span {color:#00b3e3;}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-column-organizer-button > .ex-column-organizer-box{list-style: none; margin: 0; width:180px; background:#fff; border:1px solid #639dd4; position:absolute; right: 0; box-shadow:0px 2px 10px rgba(0, 0, 0, 0.2); padding:5px;}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-column-organizer-button > .ex-column-organizer-box .ex-column-organizer-list{min-height: 15px; background:#fff; border:none; max-height:300px; padding:5px; overflow-x: hidden; overflow-y: auto;}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-column-organizer-button > .ex-column-organizer-box .ex-column-organizer-button {border-top: 1px solid #eee;padding-top: 7px;display: flex;max-width: 90%;text-align: center;align-items: center;margin: auto;}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-column-organizer-button > .ex-column-organizer-box > div > ul {list-style-type:none; padding:0; margin:0;}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-column-organizer-button > .ex-column-organizer-box > div > ul > li{color:#333; font-weight:lighter; font-size:13px; text-align:left; padding: 0; margin: 3px 0; white-space: nowrap; font-family: sans-serif;}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-column-organizer-button > .ex-column-organizer-box > div > ul > li:last-child{margin-bottom:0px;}
.ex-datagrid-wrap .ex-header > .ex-right-header > .ex-column-organizer-button > .ex-column-organizer-box > div > ul > li.ex-drop-hover > label {color:red;}
.ex-datagrid-wrap .ex-header > .ex-right-header > div {max-width: 100%;}
.ex-datagrid-wrap .ex-header > .ex-right-header > div > input {max-width: 100%;}
.ex-datagrid-wrap .ex-btn.ex-btn-column-organizer {line-height:20px; padding: 5px 12px 1px; background:#2789e9; font-size:12px; letter-spacing:.5px;border: 1px solid #666; margin-right: 3px; border-radius:3px;font-family: sans-serif; color: white; display: inline-block; vertical-align: middle;flex:1;}
.ex-datagrid-wrap .ex-btn.ex-btn-column-organizer.ex-save > ul{display:none; padding: 0;width:150px; background:#fff; border:1px solid #639dd4; position:absolute; left:60%; transform:translateX(-50%); box-shadow:0px 2px 10px rgba(0, 0, 0, 0.2); padding:5px;}
.ex-datagrid-wrap .ex-btn.ex-btn-column-organizer.ex-save:hover > ul {display:block;}
.ex-datagrid-wrap .ex-btn.ex-btn-column-organizer.ex-save > ul > li {text-align: center;}
.ex-datagrid-wrap .ex-btn.ex-btn-column-organizer.ex-save > ul > li > a {padding: 7px 10px; margin: 3px; background-color: gray; color: white;text-align: center; display: inline-block; border-radius: 5px;font-size: 12px;}
.ex-datagrid-wrap .ex-btn.ex-btn-column-organizer.ex-save .ex-column-organizer-save-subitem {color: black;}
.ex-datagrid-wrap .ex-btn.ex-btn-filter {line-height:20px; padding: 5px 12px 1px; background:#fff; font-size:12px; letter-spacing:.5px;border: 1px solid #666; margin-right: 3px; border-radius:3px;font-family: sans-serif; color: #666; display: inline-block; vertical-align: middle;flex:1;}
.ex-datagrid-wrap .ex-btn.ex-btn-filter:hover {background:#ededed;transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;}
.ex-datagrid-wrap .ex-btn.ex-btn-filter:active {background:#ededed; box-shadow:none!important;}
.ex-datagrid-wrap .ex-btn.ex-btn-filter:visited {background:#fff;}
.ex-datagrid-wrap .ex-btn.ex-btn-filter:focus {outline:0;}
.ex-datagrid-wrap .ex-data-row.add-row {background:#e1f5f4;}
.ex-datagrid-wrap .ex-data-new-row {background-color:#e1f5f4 !important;}
.ex-datagrid-wrap .ex-data-new-row input, .ex-datagrid-wrap .ex-data-new-row select {border: 1px dashed darkgray !important;}

/* for mobile */
.ex-datagrid-wrap .ex-datagrid .ex-data-row-m-table {border-bottom: solid 5px darkgray; width: 100%;}
.ex-datagrid-wrap .ex-datagrid .ex-data-row-m-table>tbody>tr>td {font-size: 0.6rem;text-align: left;vertical-align: middle;}
.ex-datagrid-wrap .ex-datagrid .ex-data-row-m-table>tbody>tr>th>div {background-color: lightgray;border-radius: 7px;font-size: 0.6rem;color: black;padding: 4px 0 4px 5px;margin: 4px;}
.ex-datagrid-wrap .ex-datagrid .ex-data-row-m-table input {height:auto;}
.ex-datagrid-wrap .ex-datagrid .ex-data-row-m-table-add-new {text-align: center;}
.ex-datagrid-wrap .ex-datagrid .ex-data-row-m-table-add-new>td {padding: 3px 10px !important;background-color: gray;color: white;font-size: 0.6rem;display: inline-block;border-radius: 5px;margin-bottom: 5px;cursor: pointer;}

/* for px (print) mode */
.px-print-wrap {width:100%; padding:0 20px 0 0; margin:auto;}
.px-print-wrap-hide {display: none;}
.px-print-wrap .px-print-header{position: relative; margin-bottom:20px;}
.px-print-wrap .px-print-header:after{content:""; display:block; clear:both;}
.px-print-wrap .px-print-header > h1{float:left;}
.px-print-wrap .px-print-header > h2{font-family:sans-serif; font-size:34px; color:#222933; position:absolute; margin-left:180px; /*text-align:center; left:50%; margin-right:-50%; transform:translate(-50%, -50%);*/}
.px-print-wrap .px-print-header > .type3{float:right; width:316px;}
.px-print-wrap .px-print-header>.px-print-center {text-align: center; font-size:20px;}
.px-print-wrap .px-print-header>.px-print-right {text-align: right; font-size:14px;}

.px-datagrid-wrap .ex-datagrid {border-spacing: 3px;}
.px-datagrid-wrap>.ex-table-header>table {width:100%;}
.px-datagrid-wrap>.ex-table-header>.ex-datagrid>thead>tr>th {border-bottom: 2px solid black; padding: 3px;}
.px-datagrid-wrap>.ex-table-header>.ex-datagrid>thead>tr>th>span {font-size:12px;}
.px-datagrid-wrap>.ex-table-header>.ex-datagrid>tbody>tr>td {padding: 3px;font-size:12px; text-align:center;}
.px-datagrid-wrap>.ex-table-header>.ex-datagrid>tfoot>tr>th {border-top: 2px solid black; padding: 3px;font-size:12px; }
.px-datagrid-wrap .ex-datagrid>tbody>tr.ex-first-merged-row {border-top: 1px solid black;}

/* do not change above lines except developer of ex-data-grid */

/* gray theme */
.ex-datagrid-wrap > div > table {background-color: gray;}
.ex-datagrid-wrap .ex-table-header {border-top: 2px solid dimgray;}
.ex-datagrid-wrap .ex-table-body>table {border-bottom: 2px solid dimgray;}
.ex-datagrid-wrap .ex-datagrid>thead>tr>th {background-color: gray; border-bottom:1px solid #f0ebeb;}
.ex-datagrid-wrap .ex-datagrid>tbody>tr:last-child {border-bottom:1px solid dimgray;}
.ex-datagrid-wrap .ex-data-new-row {background-color:#f7f7f7 !important;}
.ex-datagrid-wrap .ex-datagrid>tbody>tr.ex-odd-row {background-color: gainsboro;}