h1, h2, h3, h4, h5, h6{margin:0; font-size:inherit; font-family:inherit; line-height:inherit;}
textarea {display: block;}
.app-content-area {padding: 0 24px;}
@media screen and (min-width: 1024px) {.app-content-area {padding: 0 80px;}}
.device-E699A2C3-7580-42E0-A479-22CEC83CF796 .app-content-area {padding: 0 80px;}

.tbl-cards .sys-fx {line-height: 40px !important; width: 40px; text-align: center; padding:0 8px}

.app-sub-title {font-family: "Roboto",Arial; font-weight: bold; font-size: 18px; margin-bottom: 32px; }
.app-field-title{font-family: "Roboto",Arial; font-weight: bold; font-size: 12px; text-transform: uppercase; margin-bottom:8px; }
.app-field-row + .app-sub-title, .app-field-row + .app-field-title { margin-top: 32px; }
 
.app-field-row, .app-generic-row {display: table; width: 100%; border-spacing: 8px 0; table-layout:fixed}
.app-field-row label{ font-family: var(--label-font-family); font-size: var(--label-font-size); color:var(--label-color); margin-bottom:8px; display:inline-block }
.app-field-desc{font-size:12px; font-style:italic}
/*.window-content .app-field-row { border-spacing: 0; }*/
.app-field-row + .app-field-row { margin-top: 24px; }
.app-field-col, .app-generic-col {display: table-cell; vertical-align:top}

.ag-col-25{width:25%}

@media screen and (max-width:1024px) and (min-width:768px){
.app-rsive-row-t{display:block}
.app-rsive-row-t .app-field-col{width:auto; display:block}
.app-rsive-row-t .app-field-col + .app-field-col{margin-top:24px}
}

@media screen and (max-width:767px){
.app-rsive-row-m{display:block}
.app-rsive-row-m .app-field-col{width:auto; display:block}
.app-rsive-row-m .app-field-col + .app-field-col{margin-top:24px}
}

.app-field-separator{border-top:1px solid rgb(232, 232, 232); margin:32px 0}

.sample-area .app-field-row, .sample-area .app-field-col{outline:1px dotted #ccc; position:relative}
.sample-area .app-field-row:before, .sample-area .app-field-col:before{position:absolute; display:block; font-size:8px; bottom:100%; left:0; padding:4px; background:#fff; outline:1px dotted #ccc}
.sample-area .app-field-row:before{content:'Form Row'}
.sample-area .app-field-col:before{content:'Form Column'}

.app-header-row { display: table; table-layout: fixed; width: 100%; border-spacing: 8px; }
.app-header-col { display: table-cell; vertical-align: top; }
.app-header-col-field, .app-field-col-field { width: 160px; }
.app-field-col-icon-lower { vertical-align: bottom; }

.app-tab-header{border-bottom:1px solid #b6b6b6; margin-bottom:32px}
.app-tab-list{list-style:none; margin:0; padding:0; display:table; }
.app-tab-list > li{display:table-cell}
.app-tab-list a{display:block; padding:16px 24px; color:rgba(33,33,33,.8); font-weight:bold; border-bottom:4px solid transparent}
.app-tab-list a:hover, .app-tab-list .select a{color:#03a9f4; border-color:#03a9f4}

.app-tips{margin-top:32px; font-style:italic; font-size:14px}
/*
.app-form-wrapper input[type=text], .app-form-wrapper input[type=email], .app-form-wrapper input[type=tel], .app-form-wrapper input[type=password], .app-form-wrapper textarea,
.app-content-area input[type=text], .app-content-area input[type=email], .app-content-area input[type=tel], .app-content-area input[type=password], .app-content-area textarea,
.app-window-popup input[type=text], .app-window-popup input[type=email], .app-window-popup input[type=tel], .app-window-popup input[type=password], .app-window-popup textarea{width:100%; border:none; color:var(--field-value-color); border-bottom:1px solid var(--field-border-off); padding:8px 0; outline:none; font-size:14px; font-family:inherit}
.app-content-area table input[type=text], .app-content-area table input[type=email], .app-content-area table input[type=tel], .app-content-area table textarea,
.app-window-popup table input[type=text], .app-window-popup table input[type=email], .app-window-popup table input[type=tel], .app-window-popup table textarea{border:1px solid var(--field-border-off); padding:8px}
.app-content-area input[type=text]:hover, .app-content-area input[type=email]:hover, .app-content-area input[type=tel]:hover, .app-content-area textarea:hover,
.app-window-popup input[type=text]:hover, .app-window-popup input[type=email]:hover, .app-window-popup input[type=tel]:hover, .app-window-popup textarea:hover{border-color:var(--field-border-on);}
    */
.app-content-area input[type=button] {}
.app-content-area table th { text-align: left; }
.app-content-area table textarea, .app-window-popup table textarea { height: 34px; display: block; }
/*input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #ccc !important;}
input:-moz-placeholder, textarea:-moz-placeholder { /* Firefox 18- * /color: #ccc !important;}
input::-moz-placeholder, textarea::-moz-placeholder { /* Firefox 19+ * /color: #ccc !important;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {color: #ccc !important;}*/

.app-form-field-label{margin-bottom:8px; font-size:16px}

/*textbox*/
.app-form-txtbox {width: 100%; outline: none; box-sizing: border-box; font-size: inherit; font-family: inherit;}

/*Material*/
.app-material-design .app-form-txtbox {padding: 8px 0; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid var(--field-border-off); }
/*Metro*/
.app-metro-design .app-form-txtbox { padding: 8px; border: 1px solid var(--field-border-off); }

.app-form-txtbox.error + label {color: #f00; margin-top: 8px; display: block;}

.app-form-line:before, .app-form-line:after { content: ''; position: absolute; bottom: 0; border-bottom-width: 2px; border-bottom-style: solid; width: 0; transition: all .2s; border-bottom-color: var(--field-border-on);}
.app-form-field-wrap {position: relative;}
.app-material-design input:focus ~ .app-form-line:before, .app-material-design input:focus ~ .app-form-line:after, .app-material-design textarea:focus ~ .app-form-line:before, .app-material-design textarea:focus ~ .app-form-line:after, .app-material-design select:focus ~ .app-form-line:before, .app-material-design select:focus ~ .app-form-line:after, 
.app-system-design input:focus ~ .app-form-line:before, .app-system-design input:focus ~ .app-form-line:after, .app-system-design textarea:focus ~ .app-form-line:before, .app-system-design textarea:focus ~ .app-form-line:after, .app-system-design select:focus ~ .app-form-line:before, .app-system-design select:focus ~ .app-form-line:after {width: var(--field-line-width);}



.app-material-design .app-form-line:before, .app-system-design .app-form-line:before {right: var(--field-line-width);}
.app-material-design .app-form-line:after, .app-system-design .app-form-line:after {left: var(--field-line-width);}
.app-system-design, .app-material-design {--field-line-width:50%;}

.app-form-field-wrap input[type=text], .app-form-field-wrap input[type=email], .app-form-field-wrap input[type=tel], .app-form-field-wrap input[type=password], .app-form-field-wrap textarea {width: 100%;  outline: none; font-family: var(--field-font-family); color: var(--field-value-color);  padding: var(--field-padding); font-size: var(--field-font-size); background-color: transparent; box-sizing:border-box;}
.app-form-field-wrap input[type=text]:disabled, .app-form-field-wrap input[type=email]:disabled, .app-form-field-wrap input[type=tel]:disabled, .app-form-field-wrap input[type=password]:disabled, .app-form-field-wrap textarea:disabled {border-bottom: 1px dashed var(--field-border-off);}

/*Material*/
.app-material-design input[type=text], .app-material-design input[type=email], .app-material-design input[type=tel], .app-material-design input[type=password], .app-material-design textarea, .app-material-design .app-upload-field,
.app-system-design input[type=text], .app-system-design input[type=email], .app-system-design input[type=tel], .app-system-design input[type=password], .app-system-design textarea, .app-system-design .app-upload-field{border: none; border-bottom: 1px solid var(--field-border-off); padding-left:0!important}

/*Metro*/
.app-metro-design input[type=text], .app-metro-design input[type=email], .app-metro-design input[type=tel], .app-metro-design input[type=password], .app-metro-design textarea, .app-metro-design .app-upload-field{border: 1px solid var(--field-border-off);}
.app-metro-design input[type=text]:focus, .app-metro-design input[type=email]:focus, .app-metro-design input[type=tel]:focus, .app-metro-design input[type=password]:focus, .app-metro-design textarea:focus, .app-metro-design .select-field-block select:focus{border-color: var(--field-border-on);}

.app-system-design textarea{height:96px}
.app-system-design input[type=text].rcbInput{border:none;}


.box-group-field {display: table; table-layout: fixed; border-collapse: collapse; width: 100%; }
.box-group-field input, .box-group-field textarea {border: none !important;}
.bgf-col {display: table-cell; vertical-align: middle; border: 1px solid #b6b6b6;}
.bgf-label {padding: 8px; width: auto;}
.bgf-price {}
.bgf-price .bgf-label {width: 48px;text-align: center;}

/*Common Column Icon Width*/
.app-item-col-icon, .tbl-cards-header-col-icon, .app-field-col-icon {width: 24px; text-align: left; }
.tbl-cards-header-col-field {width: 160px; }
.app-item-list {list-style: none; margin: 0;padding: 0;}
.app-item-list > li {border: 1px solid transparent;}
.app-item-row { display: table; width: 100%; table-layout: fixed; border-left: 8px solid transparent; box-sizing:border-box; border-spacing:8px 0}
.app-system-design .app-item-row {background: rgba(182,182,182,.2);}
.app-item-col { padding: 8px 0; display: table-cell; vertical-align: middle; border-spacing:0}
.status-online {border-color: #4CAF50; }
.status-offline {border-color: #ff5252; }
.app-item-row a { color: rgba(33,33,33,.8); }
.app-item-row a:hover {color: #03a9f4;}
.app-item-header + div {margin-top: 8px; opacity: .5;}
.app-item-detail { opacity: .5; margin-top: 8px;}

.app-card-item-list {list-style: none; margin: 0;padding: 0;}

.app-card-item{box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3); border-radius: 4px; overflow:hidden; padding:20px; font-size:14px; position:relative}

.app-add-repeat-item {color: #fff; background: #ff5252; width: 24px; height: 24px; border-radius: 50%; line-height: 24px; text-align: center; display: block;}
.app-error-msg {color: #f00; font-size: 12px; margin-top: 4px; display: none;}
.app-success-msg {display: none;}
.app-table-wrapper {overflow: auto;}
.app-table {width: 100%;}
.app-table th {text-align: left;}
.app-truncate-text {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.app-table th.app-tbl-col-center, .app-tbl-col-center {text-align: center;}
.app-tbl-col-right { text-align: right;}
.x-datetimepicker-widget {position: absolute; background: #fff; z-index: 500; box-shadow: 0 2px 5px rgba(0,0,0,0.4); }


/*Button*/
.app-form-button-group {text-align:right; margin-top:40px}
.app-form-button-group .app-form-button, .app-form-button-group .app-form-link-button{display:inline-block}

.app-form-field-wrap input[type="button"], .app-form-button, .app-form-field-wrap .app-upload-btn, .app-form-field-wrap .app-upload-remove-btn, .app-form-icon-button, .app-form-link-button{ box-sizing: border-box; text-transform: uppercase; border: 0; min-width: 160px; border-style: initial; border-color: initial; border-image: initial; transition: all 0.3s ease 0s; cursor: pointer; padding: 0 16px; text-align: center; line-height: 48px; border-spacing: 0; text-decoration: none;}

.app-form-field-wrap input[type="button"], .app-form-button, .app-form-field-wrap .app-upload-btn, .app-form-field-wrap .app-upload-remove-btn{ display: table; margin: var(--button-position); width: var(--button-width); color: var(--button-color); background-color: var(--button-bg-color);}
.app-form-field-wrap .app-upload-remove-btn{ color:var(--button-bg-color); background:none}
.app-form-link { color: var(--link-color); text-decoration: none;}
.app-form-link:hover {text-decoration: underline;}
.app-form-link-button{color:var(--button-bg-color); display:inline-block; border-spacing:0; cursor:pointer;     font-size: 14px; line-height: 32px; min-width: 88px}

.app-form-icon-button{display: table; margin: var(--button-position); width: var(--button-width); color: var(--button-color); background-color: var(--button-bg-color);}
.app-form-icon-link-button{display: table; margin: var(--button-position); width: var(--button-width); color: var(--button-bg-color); cursor:pointer}
.app-form-icon-button-row{table-layout:fixed; display: table; margin:0 auto}
.app-form-icon-button-col{display:table-cell; vertical-align:middle; box-sizing:border-box}
.app-form-icon-button-col-icon{width:32px}
.app-form-icon-button-col-icon .material-icons{margin-right:8px}
.app-form-icon-button-col + .app-form-icon-button-col-icon .material-icons{margin-right:0; margin-left:8px}
.app-form-icon-button .material-icons{line-height:inherit}


.app-file-upload input[type="file"] {position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; width: 100%; opacity: 0;}
.app-file-upload {position: relative;}
.app-form-field-wrap .app-upload-btn , .app-form-field-wrap .app-upload-remove-btn { margin: 0px; padding:9px; line-height: 14px; font-size:14px; width: 100%; min-width:initial}
.app-upload-row, .app-search-row, .app-filter-row {border-spacing: 0; display: table; width: 100%; table-layout: fixed;}
.app-upload-col, .app-search-col, .app-filter-col{display: table-cell; vertical-align: middle;}
.app-upload-col:first-child, .app-search-col:first-child {padding-right: 16px;}

/*.app-upload-col + .app-upload-col {width: 160px; background: #ccc;}*/
.app-search-col + .app-search-col { width: 40px;}
.app-filter-row{margin-bottom:24px}
.app-filter-col-field{width:160px}

.app-upload-btn-col{width:120px}
.app-upload-field{width:100%; background:transparent; box-sizing: border-box;  border: 0; min-width: 160px; border-style: initial; border-color: initial; border-image: initial; transition: all 0.3s ease 0s; cursor: pointer; padding: 0 16px; line-height:30px;  border-spacing: 0; text-decoration: none;}
@media screen and (max-width:767px){
    .app-upload-col:first-child{width:100%; margin-bottom:8px}
    .app-upload-col{display:inline-block}
}

.app-count-value{width:28px; height:28px; box-sizing:border-box; padding:8px; background:#b6b6b6; color:#fff; border-radius:50px; display:inline-block; font-weight:normal}
.drag-enable{cursor:move}


.app-form-popup{position:fixed; top:0; left:0; bottom:0; right:0; background:rgba(0,0,0,0.3)}
.app-form-popup-window {position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:32px 32px 64px 32px; min-width:320px; background:#fff}
.app-form-popup-window .close-btn{position:absolute; right:32px; text-decoration:none}


.app-popup-header{margin-bottom:24px}
.app-popup-title{font-size:24px}
.app-form-popup .app-form-button{line-height:32px; min-width:88px; display:inline-block;}
.app-form-popup-action-bar{ border-top:1px solid rgba(182,182,182,.5); position:fixed; bottom:0; left:0; right:0; text-align:right }
.app-form-popup-action-bar .app-form-button{background:none; color:#03a9f4; font-size:14px}
.app-form-popup-action-bar .app-form-button:hover{background:rgba(153,153,153,.2)}

.app-system-design .app-form-popup-action-bar{padding:8px 64px;}
.app-material-design .app-form-popup-action-bar{padding:8px 32px;}

.app-more-action-trigger{position:relative; width:24px;}
.app-more-action-content{position: absolute; right: 0;  z-index: 10; background: #fff; text-align: left; filter: drop-shadow(0 0 3px rgba(0,0,0,.3)); -webkit-filter: drop-shadow(0 0 3px rgba(0,0,0,.3)); width:160px; display:none;}

.app-more-action-content:before{content:'';    position: absolute; right: 8px; bottom: 100%; border-style: solid; border-width: 3px; border-color: transparent transparent #fff transparent; margin-bottom: 0; margin-top: -3px; bottom: 100%; top: auto;}
.app-more-action-trigger:hover .app-more-action-content{display:block}
.app-more-action-list{list-style:none; margin:0; padding:0;}
.app-more-action-list a{display:table; box-sizing:border-box; width:100%; color:rgba(33,33,33,.8)}
.app-more-action-list a span{display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
    padding: 8px;}
.app-more-action-list a span.sys-fx{width:40px}
.app-more-action-list a:hover{background-color:#F2F2F2; color:#03a9f4}
/*data table*/
.tbl-base {}
.tbl-cards {box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5); border-radius: 4px; padding: 0 0 32px 0; color: rgba(33,33,33,.8);}
.tbl-cards + .tbl-cards{margin-top:32px}
.tbl-cards .sys-more-action-content:before {border-color: transparent transparent #fff transparent;}
.tbl-cards-header { position: relative; padding: 28px 24px 32px 24px; display: table; width: 100%; box-sizing: border-box; border-spacing:8px}
.tbl-cards-header-col {display: table-cell; vertical-align: top; border-spacing:0}
.tbl-cards .sys-title-trigger:hover {cursor: pointer; color:#03a9f4}
.tbl-title {font-weight: bold; font-size:24px}
.tbl-cards-body{padding: 0 24px ;}
.tbl-footer-link{text-align:right; text-transform:uppercase}

.tbl-frame{overflow:auto}
.data-table {width: 100%; border-collapse: collapse; font-size:14px;     line-height: 1.5;}
.data-table thead {background: #03a9f4; color: #fff;}
.data-table thead .mdc-checkbox__background {border-color: #fff;}
/*.data-table tr {display: table; width: 100%; table-layout: fixed;}*/
.data-table td, .data-table th { padding: 4px 16px 4px 16px; border-bottom: 1px solid #d5d5d5; /*width: auto; display: table-cell;*/ height: 48px; }
.data-table th { background-position: calc(100% - 4px) 50%; background-repeat:no-repeat}
.tbl-thumbnail {max-height: 40px;}
.data-table td.cell-type-chkbox, .data-table th.cell-type-chkbox {width: 48px; padding-right: 0;}
.data-table td.cell-type-date, .data-table th.cell-type-date{width:180px}
.data-table td.cell-type-icon, .data-table th.cell-type-icon {width: 56px; padding: 0;}
.data-table td .data-content {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; /*white-space: nowrap; text-overflow: ellipsis; overflow: hidden;*/}

.sort-normal, .sort-asc, .sort-desc{cursor:pointer}
.sort-normal{background-image:url('../img/arrow_sort_normal.png')}
.sort-asc{background-image:url('../img/arrow_sort_asc.png'); background-color:rgba(0,0,0,.1)}
.sort-desc{background-image:url('../img/arrow_sort_desc.png'); background-color:rgba(0,0,0,.1)}
/*Pagination*/
.pagination-wrapper {margin: 16px 0; text-align: center;}
.pagination-nav-bar .pagination, .pagination-dropdown .sel-pagination { list-style: none; margin: 0; padding: 0; border-width: 1px!important; border-style:solid!important; border-color:var(--field-border-off); border-radius: 4px;}
.pagination-dropdown .sel-pagination{padding: 7px 24px 8px 8px!important;}
.pagination-nav-bar .pagination{overflow:hidden}
.pagination-nav-bar .pagination li {display: inline-block; vertical-align: middle; float:left}
.pagination-nav-bar .pagination li + li {border-left: 1px solid #b6b6b6;}
.pagination-nav-bar a {line-height: 32px; display: inline-block; width: 32px; color: #03a9f4; vertical-align: middle; text-decoration: none;}
.pagination-nav-bar ul:not(.disabled) .active a, .pagination-nav-bar ul:not(.disabled) a:hover { color: #fff; background: #03a9f4; }
.pagination-nav-bar .disabled a {color: #b6b6b6; cursor:default}
.pagination-nav-bar .active.disabled a {color: #fff; background:#b6b6b6;}
.pagination-nav-bar, .pagination-dropdown {display: inline-block; vertical-align: middle;}
.pagination-dropdown {margin-left: 16px; font-size: 14px;}
.pagination-dropdown > div { display: inline-block;}
.pagination-nav-bar .material-icons {line-height: 32px; font-size: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.pagination-nav-bar .first a, .pagination-nav-bar .prev a, .pagination-nav-bar .next a, .pagination-nav-bar .last a {position: relative; height: 32px; }
.pagination-info{margin-top:8px; font-size:14px}
.app-list-filter { position: relative;}
.app-custom-filter-wrapper {position: absolute; right: 0; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5); border-radius: 4px; padding: 4px; background: #fff; display: none; width: 320px; box-sizing: border-box;}
.app-custom-filter-wrapper .app-field-row + .app-field-row { margin-top: 0;}

.select-field-block {background: url(../img/arrow_dropdown.png) no-repeat 100%;}
.select-field-block select  {font-size: var(--field-font-size); line-height: normal; font-family: var(--field-font-family); background-color: transparent; padding:var(--field-padding); padding-right:24px!important;  color: var(--field-value-color); outline: none; width: 100%; background-color: transparent; background-image: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;  cursor: pointer; }
.app-material-design .select-field-block select, .app-system-design .select-field-block select  {border: none;  border-bottom: 1px solid var(--field-border-off); padding-left:0!important}
.app-metro-design .select-field-block select  {border: 1px solid var(--field-border-off);}
/*CheckBox*/
.app-form-chkbox-list { list-style: none; margin: 16px 8px 8px; padding: 0;}
.app-form-chkbox-list li + li {margin-top: 8px;}
.app-form-chkbox {display:inline-block; width:24px; height:24px; vertical-align:top}
.app-hidden-chkbox {display: none;}
.app-form-chkbox label {position: relative; padding-left: 24px; cursor: pointer; display: block;}
.app-form-chkbox.app-form-chkbox-with-txt{width:auto; height:auto}
.app-form-chkbox-with-txt label {padding-left: 32px; }
.app-form-checkbox-check { top: 0; left: 7px; width:10px; height: 17px;border: 2px solid;  border-top: none; border-left: none; opacity: 0; z-index: 10; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); transition: all .5s;}
.app-form-checkbox-box { height: 24px; width: 24px; z-index: 9; left: 0; }
.app-form-checkbox-check, .app-form-checkbox-box { position: absolute; top: 0; display: block; box-sizing:border-box}
.app-form-checkbox-text{padding-top:4px; line-height:1; display:block; font-size:var(--field-font-size); font-family:var(--field-font-family); color:var(--field-value-color)}

.app-hidden-chkbox:checked ~ label .app-form-checkbox-check { opacity: 1;}
.app-hidden-chkbox:disabled:checked ~ label .app-form-checkbox-box { border: 2px solid #b6b6b6; background: #b6b6b6;}
.app-hidden-chkbox:disabled ~ label .app-form-checkbox-box { border: 2px solid #b6b6b6; }
.app-hidden-chkbox:disabled ~ label{cursor:default}

.app-material-design .app-form-checkbox-check, .app-system-design .app-form-checkbox-check {border-color:#fff; }
.app-material-design .app-form-checkbox-box, .app-system-design .app-form-checkbox-box { border: 2px solid var(--field-border-off); border-radius: 2px;  }
.app-material-design .app-hidden-chkbox:checked ~ label .app-form-checkbox-box, .app-system-design .app-hidden-chkbox:checked ~ label .app-form-checkbox-box { border: 2px solid var(--field-border-on); background: var(--field-border-on); }

.app-metro-design .app-form-checkbox-check {border-color:var(--field-border-on); }
.app-metro-design .app-form-checkbox-box { border: 1px solid var(--field-border-off); }
.app-metro-design .app-hidden-chkbox:checked ~ label .app-form-checkbox-box { border: 1px solid var(--field-border-on); }

.radio-horizontal-selector-wrap{border-spacing:0; margin-top:8px}
.radio-horizontal-selector{list-style: none; margin:0; padding: 0; display:table-row; border-collapse:collapse; font-size:14px; }
.radio-horizontal-selector li{display:table-cell; vertical-align:middle; border:1px solid #b6b6b6}
.radio-horizontal-selector li + li{border-left:none}
.radio-horizontal-selector li:first-child, .radio-horizontal-selector li:first-child label:before{border-radius:4px 0 0 4px}
.radio-horizontal-selector li:last-child, .radio-horizontal-selector li:last-child label:before{border-radius:0 4px 4px 0}
.radio-horizontal-selector input{display:none;}
.radio-horizontal-selector label{display:block; padding:8px 16px; cursor:pointer; position:relative; color:var(--field-value-color)}
.radio-horizontal-selector input:checked + label, .radio-horizontal-selector label:hover{color:var(--field-border-on)}
.radio-horizontal-selector input:checked + label:before, .radio-horizontal-selector label:hover:before{content:''; position:absolute; display:block; top:-1px; left:-1px; bottom:-1px; right:-1px; border:2px solid var(--field-border-on); }
.app-hidden-rd{display:none;}

.radio-vertical-selector-wrap{border-spacing:0; margin-top:8px}
.radio-vertical-selector{list-style: none; margin:0; padding: 0; display:table-row; border-collapse:collapse; font-size:14px; }
.radio-vertical-selector li{}
.radio-vertical-selector li + li{margin-top: 8px;}
.radio-vertical-selector label{display:table;}
.radio-vertical-selector label > span{display:table-cell; vertical-align:top}
.app-form-rd-icon{position:relative; width:20px; padding-right:8px; box-sizing:border-box}
.app-form-rd-check{}

.app-form-rd-box, .app-form-rd-check { display: block; width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box;}
.app-form-rd-check{position: absolute;  transition: all .5s;  background-color:var(--field-border-on)}

.app-metro-design .app-form-rd-box{border-width:1px; border-style:solid}
.app-metro-design .app-form-rd-check {left: 5px; top: 5px; width: 10px; height: 10px; ; opacity:0 }
.app-metro-design .app-form-rd-box { border-color:var(--field-border-off); }
.app-metro-design .app-hidden-rd:checked ~ label .app-form-rd-box { border-color:var(--field-border-on); }
.app-metro-design .app-hidden-rd:checked ~ label .app-form-rd-check {opacity:1}

.app-material-design .app-form-rd-box, .app-system-design .app-form-rd-box{border-width:2px; border-style:solid}
.app-material-design .app-form-rd-check, .app-system-design .app-form-rd-check {border-color:var(--field-border-on); transform: scale(0); width: 12px; height: 12px; left: 4px; top: 4px;}
.app-material-design .app-form-rd-box, .app-system-design .app-form-rd-box { border-color: var(--field-border-off); }
.app-material-design .app-hidden-rd:checked ~ label .app-form-rd-check, .app-system-design .app-hidden-rd:checked ~ label .app-form-rd-check {transform: scale(1);}
.app-material-design .app-hidden-rd:checked ~ label .app-form-rd-box ,.app-system-design .app-hidden-rd:checked ~ label .app-form-rd-box { border-color:var(--field-border-on); }

.lbl-radio-with-option{display:inline-block!important; margin-right:8px}

.app-form-group{padding:16px; background:#eee; margin-top:8px}

/* Preloader */
.app-preloader-bg{position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0.3); z-index:10}
.app-preloader-wrapper {-webkit-animation: container-rotate 1568ms linear infinite; animation: container-rotate 1568ms linear infinite;}
.app-preloader-bg .app-preloader-wrapper{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}
@-webkit-keyframes container-rotate {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes container-rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.sample-area .app-preloader-wrapper{}
.app-preloader-wrapper.big {width: 64px; height: 64px;}
.app-preloader-wrapper.small {width: 36px; height: 36px;}
.app-preloader-wrapper {display: inline-block; position: relative; width: 50px; height: 50px;}

/*.spinner-layer {position: absolute; width: 100%; height: 100%; opacity: 0; border-color: #26a69a;}
.spinner-layer {opacity: 1; -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;}
.spinner-layer.spinner-blue {-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
.spinner-layer.spinner-red {-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;}
.spinner-layer.spinner-yellow { -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;}
.spinner-layer.spinner-green {-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;}*/

.app-preloader-bg .app-preloader-wrapper{position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); }
.app-preloader-wrapper, .app-preloader-wrapper:before, .app-preloader-wrapper:after{border-radius: 50%; border: 3px solid transparent; }
.app-preloader-wrapper { display: block; border-top-color: #3498db; -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}
.app-preloader-wrapper:before {content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-top-color: #e74c3c; -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ }
.app-preloader-wrapper:after {content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-top-color: #f9c922; -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}

@-webkit-keyframes spin {
    0%   { 
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   { 
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}




@-webkit-keyframes fill-unfill-rotate {
    12.5% {-webkit-transform: rotate(135deg);}
    25% {-webkit-transform: rotate(270deg);}
    37.5% {-webkit-transform: rotate(405deg);}
    50% {-webkit-transform: rotate(540deg);}
    62.5% {-webkit-transform: rotate(675deg);}
    75% {-webkit-transform: rotate(810deg);}
    87.5% {-webkit-transform: rotate(945deg);}
    to {-webkit-transform: rotate(1080deg);}
}

@keyframes fill-unfill-rotate {
    12.5% {-webkit-transform: rotate(135deg); transform: rotate(135deg);}
    25% {-webkit-transform: rotate(270deg); transform: rotate(270deg);}
    37.5% {-webkit-transform: rotate(405deg); transform: rotate(405deg);}
    50% {-webkit-transform: rotate(540deg); transform: rotate(540deg);}
    62.5% {-webkit-transform: rotate(675deg); transform: rotate(675deg);}
    75% {-webkit-transform: rotate(810deg); transform: rotate(810deg);}
    87.5% {-webkit-transform: rotate(945deg); transform: rotate(945deg);}
    to {-webkit-transform: rotate(1080deg); transform: rotate(1080deg);}
}

@-webkit-keyframes blue-fade-in-out {
    from {opacity: 1;}
    25% {opacity: 1;}
    26% {opacity: 0;}
    89% {opacity: 0;}
    90% {opacity: 1;}
    100% {opacity: 1;}
}

@keyframes blue-fade-in-out {
    from {opacity: 1;}
    25% {opacity: 1;}
    26% {opacity: 0;}
    89% {opacity: 0;}
    90% {opacity: 1;}
    100% {opacity: 1;}
}

@-webkit-keyframes red-fade-in-out {
    from {opacity: 0;}
    15% {opacity: 0;}
    25% {opacity: 1;}
    50% {opacity: 1;}
    51% {opacity: 0;}
}

@keyframes red-fade-in-out {
    from {opacity: 0;}
    15% {opacity: 0;}
    25% {opacity: 1;}
    50% {opacity: 1;}
    51% {opacity: 0;}
}

@-webkit-keyframes yellow-fade-in-out {
    from {opacity: 0;}
    40% {opacity: 0;}
    50% {opacity: 1;}
    75% {opacity: 1;}
    76% {opacity: 0;}
}

@keyframes yellow-fade-in-out {
    from {opacity: 0;}
    40% {opacity: 0;}
    50% {opacity: 1;}
    75% {opacity: 1;}
    76% {opacity: 0;}
}

@-webkit-keyframes green-fade-in-out {
    from {opacity: 0;}
    65% {opacity: 0;}
    75% {opacity: 1;}
    90% {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes green-fade-in-out {
    from {opacity: 0;}
    65% {opacity: 0;}
    75% {opacity: 1;}
    90% {opacity: 1;}
    100% {opacity: 0;}
}
.spinner-blue, .spinner-blue-only {border-color: #4285f4;}
.spinner-red, .spinner-red-only {border-color: #db4437;}
.spinner-yellow, .spinner-yellow-only {border-color: #f4b400;}
.spinner-green, .spinner-green-only {border-color: #0f9d58;}
.circle-clipper {display: inline-block; position: relative; width: 50%; height: 100%; overflow: hidden; border-color: inherit;}

.circle-clipper.left {float: left !important;}
.circle-clipper.right {float: right !important;}
.circle-clipper.left .circle {-webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;}
.circle-clipper.left .circle { left: 0; border-right-color: transparent !important; -webkit-transform: rotate(129deg);transform: rotate(129deg);}

.circle-clipper.right .circle { -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;}
.circle-clipper.right .circle {left: -100%; border-left-color: transparent !important; -webkit-transform: rotate(-129deg); transform: rotate(-129deg);}
.circle {border-radius: 50%;}


@-webkit-keyframes left-spin {
    from {-webkit-transform: rotate(130deg);}
    50% {-webkit-transform: rotate(-5deg);}
    to {-webkit-transform: rotate(130deg);}
}

@keyframes left-spin {
    from {-webkit-transform: rotate(130deg); transform: rotate(130deg);}
    50% {-webkit-transform: rotate(-5deg); transform: rotate(-5deg);}
    to {-webkit-transform: rotate(130deg); transform: rotate(130deg);}
}

@-webkit-keyframes right-spin {
    from {-webkit-transform: rotate(-130deg);}
    50% {-webkit-transform: rotate(5deg);}
    to {-webkit-transform: rotate(-130deg);}
}

@keyframes right-spin {
    from {-webkit-transform: rotate(-130deg); transform: rotate(-130deg);}
    50% {-webkit-transform: rotate(5deg); transform: rotate(5deg);}
    to {-webkit-transform: rotate(-130deg); transform: rotate(-130deg);}
}
.circle-clipper .circle {width: 200%; height: 100%; border-width: 3px; border-style: solid; border-color: inherit; border-bottom-color: transparent !important; border-radius: 50%; -webkit-animation: none; animation: none; position: absolute; top: 0; right: 0; bottom: 0;}
.gap-patch {position: absolute; top: 0; left: 45%; width: 10%; height: 100%; overflow: hidden; border-color: inherit;}

/*SnackBar*/
.app-snackbar-wrap{position: fixed; bottom: 10px; z-index: 1010; width: 100%; text-align: center; font-size: 14px; left: 0; border: none !important; pointer-events:none}
.app-snackbar-block{padding: 15px 24px; display: table; margin: 0 auto; border-radius: 2px; min-width: 288px; max-width: 568px; box-shadow: 0 0 8px #b6b6b6; pointer-events:initial; background-color:#fff}
.app-snackbar-block.success{background-color: #4CAF50; color: white; }
.app-snackbar-block.error{background-color: #ff5252; color: white;}



/*.app-form-wrapper, .app-window-popup, .app-content-area, .app-material-design {    
    --label-font-family:Arial;
    --label-font-size:14px;
    --label-color:rgba(33,33,33,.5);
    --field-font-family:Arial;
    --field-font-size:14px;
    --field-value-color:rgba(33,33,33,.5);
    --field-border-on:#03a9f4;
    --field-border-off:#b6b6b6;
    --field-padding:8px 0;
    --button-width:auto;
    --button-position:0;
    --button-color:#fff;
    --button-bg-color:#03a9f4;
    --link-color:#03a9f4;
}*/


.app-system-design {
    --label-font-family:'Roboto', Arial;
    --label-font-size:14px;
    --label-color:rgba(33,33,33,.8);
    --field-font-family:'Roboto', Arial;
    --field-font-size:14px;
    --field-value-color:rgba(33,33,33,.5);
    --field-border-off:#b6b6b6;
    --field-border-on:#03a9f4;
    --field-padding:8px 0;
    --button-width:auto;
    --button-position:0 0 0 auto;
    --button-color:#fff;
    --button-bg-color:#03a9f4;
    --link-color:#03a9f4;
}

.app-data-section{display: table; table-layout: fixed; width: 100%;}
.app-data-section-child{display:table-cell; vertical-align: top; padding-right: 40px;}
.app-data-section-child + .app-data-section-child{padding-left: 64px; border-left: 1px solid rgb(232, 232, 232);}
.app-data-section-child:nth-child(1){width:40%}
.app-data-title{font-weight: bold; font-size: 18px; margin-bottom: 32px;}
.app-data-title, .app-data-label, .app-data-value{color:rgba(33,33,33,.8); font-family: "Roboto",Arial}
.app-data-title + .app-data-row-item{margin-top:24px}
.app-data-row-item + .app-data-row-item{margin-top:20px}
.app-data-label{font-size:14px; font-weight: 600; display: block; margin-bottom:4px}
.app-data-separator{border-top:1px solid rgb(232, 232, 232); margin:48px 0}
.app-data-list-clean{list-style: none; margin:0; padding:0;}
.app-data-list-clean > li + li{margin-top:24px}


.app-report-value{color:#03a9f4; font-size:45px; margin-top:8px}