@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-Regular.eot');
    src: url('../fonts/Roboto/Roboto-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto/Roboto-Regular.svg#Roboto-Regular') format('svg'), url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype'), url('../fonts/Roboto/Roboto-Regular.woff') format('woff'), url('../fonts/Roboto/Roboto-Regular.woff2') format('woff2'); font-weight: normal;
    font-style: normal;
}

/*General*/
body {box-sizing: border-box;font-family: 'Roboto', sans-serif;display: flex;}
body > .app-root {flex: 1;}

*:focus {outline: none !important;}
.fet-border-container {border: 1px solid var(--border);border-radius: 4px;padding: 12px 16px;}
.fet-absolute-center-middle {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

/* Utilities */
.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-lowercase {text-transform: lowercase;}
.text-uppercase {text-transform: uppercase;}
.text-capitalize {text-transform: capitalize;}
.font-weight-bold {font-weight: bold;}
.font-weight-normal {font-weight: normal;}
.font-weight-light {font-weight: 300;}
.flex-center-middle {display: flex;align-items: center;justify-content: center;}
.user-select-none {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.pointer {cursor: pointer;}

/*Flex*/
.fet-inline-flex {display: inline-flex;}
.fet-flex-center-middle {display: flex;align-items: center;justify-content: center}
/*FET Display*/
.fet-display {font-size: .75rem;height: 28px;}
/*FET Form */
.fet-form-container {margin: 1rem .75rem;padding: 1rem .75rem;border: 1px solid var(--gray-300);border-radius: .25rem;}
.fet-form-sub-title {display: inline-block;margin: .5rem 0;padding-right: 6px;border-bottom: 1px solid var(--gray-300);font-size: 1.8rem;font-weight: bold;}
.fet-form-control {display: block;width: 100%;height: calc(1.5em + .75rem + 2px);padding: .375rem .75rem;font-size: 1rem;font-weight: 400;line-height: 1.5;color: #495057;background-color: #fff;background-clip: padding-box;border: 1px solid #ced4da;border-radius: .25rem;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.fet-form-control:focus, .form-control:focus {border-color: var(--dark);outline: 0;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(65, 67, 65, .6);box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(65, 67, 65, .6);}
.fet-form-group {margin: .4rem 0;}
.fet-form-group .fet-form-label {padding: .375rem 1rem;font-size: 1rem;line-height: 1.5;}
/*FET Form inside Dashboard*/
.fet-form .fet-form-group {padding: 0 1rem;}
.fet-form .fet-form-group label {font-size: .75rem;padding-right: 6px;}
.fet-form .fet-form-group label > span.hint {color: var(--gray-500);font-size: .675rem;}
.fet-form .fet-form-sub-title {margin: 3px 0;font-size: .875rem;font-weight: bold;}
.fet-form .fet-form-control, .fet-form gr-dyn[input~=display] .gney_display {height: 28px;border-radius: .25rem;font-size: .75rem;}
.fet-form textarea.fet-form-control {height: initial;resize: vertical;}
.fet-form .fet-checkbox {height: 22px;width: 22px;}
.fet-form .message {position: absolute;font-size: 10px;color: var(--danger);}
.fet-form .message.warning {color: var(--warning);}
.fet-form .fet-btn {margin-left: 8px;font-size: .75rem;}
.fet-form .fet-form-action {margin: 18px 0 9px;width: 100%;text-align: right;}
.fet-form .fet-form-group > .fet-btn {height: 28px;font-size: .75rem;line-height: 1.3;}
.fet-form .table-panel tr th, .table-panel tr td {padding: 4px 8px !important;border: none !important;border-bottom: 1px solid #ddd !important;}
.fet-form .table-panel thead tr th > span {font-size: .75rem;}
/*FET Form with-error*/
.fet-form .with-error .fet-form-control,
.fet-form .with-error .ui-select-container .ui-select-toggle, .ui-select-container .form-control {border-color: var(--danger);}
.fet-form .with-error .grassland-label, 
.fet-form .with-error .grassland-label .required-hint {color: var(--danger);}
/*FET Form gney-display*/
.fet-form .fet-form-group .gney_display {min-height: 28px;padding-left: .75rem;}
/* FET Form Group */
.fet-form-group .gney_display,
.fet-form-group .grassland-label,
.fet-form-group .table-panel thead tr th > span, .fet-form-group .table-panel tbody tr td > span {font-size: .875rem;}

/*DateTime Picker*/
.fet-date-picker, .fet-datetime-picker .gr-dyn-input-date {position: relative;}
.fet-date-picker > i, .fet-datetime-picker .gr-dyn-input-date > i {position: absolute;top: 50%;right: .75rem;transform: translate(0, -50%);-webkit-transform: translate(0, -50%);color: #ced4da;cursor: pointer;}
.fet-date-picker > i:hover, .fet-datetime-picker .gr-dyn-input-date > i:hover {color: var(--dark);}

.fet-datetime-picker {display: flex;}
.fet-datetime-picker .gr-dyn-input-date {flex: 1;margin-right: 6px;}
.fet-datetime-picker .form-control {margin: 0 2px;display: block;width: 100%;height: calc(1.5em + .75rem + 2px);padding: .375rem .75rem;font-size: 1rem;font-weight: 400;line-height: 1.5;color: #495057;background-color: #fff;background-clip: padding-box;border: 1px solid #ced4da;border-radius: .25rem;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.fet-form .fet-datetime-picker .form-control {height: 28px;font-size: .75rem;}

.fet-date-picker table tr td button.active, .fet-datetime-picker table tr td button.active {background: var(--primary) !important;color: #fff;}
.fet-date-picker table tr td button.active .text-info, .fet-datetime-picker table tr td button.active .text-info {color: #fff !important;}
.fet-date-picker table tr td button .text-info, .fet-datetime-picker table tr td button .text-info {color: var(--primary) !important;color: #fff}

/*DatePicker icon*/
.gr-dyn-input-date .dropdown-menu {padding: 12px;border: 0;box-shadow: var(--card-inner-box-shadow);}
.gr-dyn-input-date .dropdown-menu table th small {font-weight: bold;}
.gr-dyn-input-date .dropdown-menu table .btn {border: 0;}

/*FET list*/
.fet-list .list-action {display: flex;flex-wrap: wrap;/*align-items: center;*/justify-content: space-between;}
.fet-list .list-action gr-action {flex-grow: 1;}
.fet-list .gr-query .badge_list {margin-top: 8px;}
.fet-list .gr-query .badge_list > span.badge {margin-right: 6px;padding: 6px 12px;border-radius: 10em;background: var(--secondary);font-weight: normal;}
.fet-list .gr-query .badge_list > span.badge > i {margin-left: 6px;color: var(--primary);cursor: pointer;}
.fet-list .gr-query .top-left {display: flex;}
.fet-list .gr-query .top-left > div {margin-right: 6px;width: initial;max-width: 250px;/*max width fix for edge*/}
.fet-list .gr-query .top-left > button.btn-link {color: var(--primary);}
.fet-list .gr-query .top-left > div > input {height: initial;}
.fet-list .table-panel table tr.selected {border-left: 5px solid var(--primary);background: rgba(0, 157, 221, .1);}
.fet-list .table-panel tr th, .table-panel tr td {padding: 4px 8px !important;border: none !important;border-bottom: 1px solid #ddd !important;}
.fet-list .table-panel thead tr th > span, .fet-list .table-panel tbody tr td > span  {font-size: .875rem;}
.fet-list .table-panel thead tr th > .logo {display: inline-block;margin: 0 3px;font-size: .65rem;vertical-align: middle;}
.fet-list .table-panel thead tr th > .logo > i {cursor: pointer;}
.fet-list .table-panel input[type="checkbox"] {height: initial;}
.fet-list .table-panel .fet-img-wrapper {height: 50px;width: 40px;}
.fet-list .table-panel .fet-img-wrapper > img {height: 100%;width: 100%;object-fit: cover;}
.fet-list .table-panel .fet-img-wrapper > i {font-size: 35px;}
/*Pagination*/
.fet-list .table_pagination {display: flex;padding: 16px 0;font-size: 12px;}
.fet-list .pagination {margin-left: 12px}
.fet-list .pagination > .active > a, 
.fet-list .pagination > .active > span, 
.fet-list .pagination > .active > a:hover, 
.fet-list .pagination > .active > span:hover, 
.fet-list .pagination > .active > a:focus, 
.fet-list .pagination > .active > span:focus {border-color: var(--primary);background: var(--primary);}
/*Button*/
.fet-list .fet-btn {padding: .275rem .75rem;font-size: .75rem;}

/*FET Button*/
.fet-btn {display: inline-block;font-weight: 400;text-align: center;vertical-align: middle;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-color: transparent;border: 1px solid transparent;padding: .375rem .75rem;font-size: .75rem;line-height: 1.5;border-radius: .25rem;transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.fet-btn:not(.disabled) {cursor: pointer;}
.fet-btn-primary {background: var(--primary);color: var(--primary-invert);}
.fet-btn-secondary {background: var(--secondary);color: var(--secondary-invert);}
.fet-btn-primary:hover {background: var(--blue);}
.fet-btn-secondary:hover {background: var(--gray);}
.fet-btn-primary-outline {border: 1px solid var(--primary);color: var(--primary);} 
.fet-btn-primary-outline:hover {background: var(--primary);color: var(--primary-invert);}
.fet-btn-secondary-outline {border: 1px solid var(--secondary);color: var(--secondary);} 
.fet-btn-secondary-outline:hover {background: var(--secondary);color: var(--secondary-invert);}
.fet-btn-rounded {border-radius: 10em;padding-left: 1.6rem;padding-right: 1.6rem;}
/*Cont. FET Button*/
.fet-btn[disabled] {background: var(--disabled);cursor: not-allowed;}

/*Checkbox*/
.fet-checkbox {-webkit-appearance: initial;appearance: initial;width: 28px;height: 28px;margin: 0 !important;border: 2px solid #ced4da;border-radius: .25rem;position: relative;cursor: pointer;}
.fet-checkbox:checked {background: var(--primary);border-color: var(--primary);}
.fet-checkbox:checked:after {content: "✔";font-size: 1rem;color: #fff;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}

/*Dropdown menu*/
.bs4-dropdown-menu.dropdown-menu .dropdown-item:focus, 
.bs4-dropdown-menu.dropdown-menu .dropdown-item:hover, 
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {background: var(--primary);color: #fff;cursor: pointer;}
.bs4-dropdown-menu.dropdown-menu .dropdown-item > i {margin-right: 6px;}

/*ui Dropdown*/
.ui-select-container .ui-select-toggle, .ui-select-container .form-control {height: 28px;padding: .375rem .75rem;border-color: #ced4da;border-radius: .25rem;font-size: .75rem;color: #495057;line-height: 1.3;}
.ui-select-container .ui-select-choices-row.active > span {background: var(--primary);color: #fff;}
.ui-select-container .btn-default:focus, .btn-default:hover, .btn-default:active, .btn-default-focus {background: initial !important;color: initial !important;outline: none !important;box-shadow: none !important;}

.ui-select-bootstrap .ui-select-toggle > a.btn {margin-top: 0;margin-right: 15px;padding: 0px;height: 0;top: 2px;right: 15px;}
.ui-select-bootstrap .ui-select-match-text {padding-right: 2.5em;}

/*Select*/
select[disabled].fet-form-control {cursor: not-allowed;opacity: .65;}

/* glyphicon -> fontawesome */
.glyphicon {font-family: FontAwesome !important;}
.glyphicon-chevron-left:before {content: "\f053";}
.glyphicon-chevron-right:before {content: "\f054";}
.glyphicon-remove:before {content: "\f00d";}

/*Media Query*/
@media (min-width: 768px) {
    .fet-flex-wrap {display: flex;flex-wrap: wrap;} 
    .fet-col-1 {-ms-flex: 0 0 8.333333%;flex: 0 0 8.333333%;max-width: 8.333333%;}
    .fet-col-2 {-ms-flex: 0 0 16.666667%;flex: 0 0 16.666667%;max-width: 16.666667%;}
    .fet-col-3 {-ms-flex: 0 0 25%;flex: 0 0 25%;max-width: 25%;}
    .fet-col-4 {-ms-flex: 0 0 33.333333%;flex: 0 0 33.333333%;max-width: 33.333333%;}
    .fet-col-5 {-ms-flex: 0 0 41.666667%;flex: 0 0 41.666667%;max-width: 41.666667%;}
    .fet-col-6 {-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;}
    .fet-col-7 {-ms-flex: 0 0 58.333333%;flex: 0 0 58.333333%;max-width: 58.333333%;}
    .fet-col-8 {-ms-flex: 0 0 66.666667%;flex: 0 0 66.666667%;max-width: 66.666667%;}
    .fet-col-9 {-ms-flex: 0 0 75%;flex: 0 0 75%;max-width: 75%;}
    .fet-col-10 {-ms-flex: 0 0 83.333333%;flex: 0 0 83.333333%;max-width: 83.333333%;}
    .fet-col-11 {-ms-flex: 0 0 91.666667%;flex: 0 0 91.666667%;max-width: 91.666667%;}
    .fet-col-12 {-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;}
    /*Form*/
    .fet-col-6 gr-dyn > div {display: flex;flex-wrap: wrap;}
    .fet-col-6 gr-dyn > div > label {-ms-flex: 0 0 33.333333%;flex: 0 0 33.333333%;max-width: 33.333333%;}
    .fet-col-6 gr-dyn > div > div {-ms-flex: 0 0 66.666667%;flex: 0 0 66.666667%;max-width: 66.666667%;}
 }

@media (min-width: 1200px) {
    .fet-wrapper {padding: 0 0 0 276px;}
}

 /*Sidebar*/
.sidebar {position: fixed;top: 4px;display: block;width: 276px;height: 100%;background: #2b3034;z-index: 101;}
.sidebar.sidebar-collapse {display: none;}
.sidebar .sidebar-header {padding: 9px 10px;background-color: #202529;}
.sidebar .sidebar-header > div {color: #eeeeee;text-align: center;font-size: 18px;font-weight: bold;position: relative;}
.sidebar .sidebar-header > div > .sidebar-toggle {position: absolute;top: 50%;right: 0;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);cursor: pointer;}
.sidebar .sidebar-nav {height: calc(100% - 140px);overflow: auto;}
.sidebar ul {margin: 0;padding: 0;list-style-type: none;}
.sidebar ul li a {display: block;padding: 8px 10px 8px 20px;border-bottom: 1px solid #252a2e !important;color: #eeeeee;font-size: .75rem;}
.sidebar ul li a .sidebar-icon {margin-right: 6px;}
.sidebar ul.menu > li.select {border-left: 5px solid var(--primary);background-color: #252a2e;}
.sidebar .menu .lv1 {padding-left: 45px;}
.sidebar .menu .lv2 {padding-left: 70px;}
.sidebar .menu li a.has-arrow:after {display: block;content: "\f078";border: none;font: normal normal normal 10px/1 FontAwesome;width: 10px;padding: 0;margin-right: 0;position: relative;top: 4px;float: right;-webkit-transition: .2s ease-in-out;transition: .2s ease-in-out;font-weight: lighter;}
.sidebar .menu li.select > a.has-arrow:after {content: "\f054";-webkit-transition: .2s ease-in-out;transition: .2s ease-in-out;}
.sidebar .sidebar-dropdown {padding: 8px 10px 8px 20px;}
.sidebar .sidebar-dropdown > i {color: #eeeeee;}
.sidebar .sidebar-dropdown .fet-btn {padding: 4px 8px;font-size: 14px;}
/*User Auth*/
.fet-user-auth {display: flex;align-items: center;padding: 12px 16px;}
.fet-user-auth .user-img-wrapper {height: 40px;width: 40px;min-width: 40px;margin-right: 8px;object-fit: cover;border-radius: 10em;overflow: hidden;}
.fet-user-auth .user-img-wrapper > img {width: 100%;height: 100%;}
.fet-user-auth .user-img-wrapper > i {font-size: 40px;color: #eeeeee;}
.fet-user-auth .user-info-wrapper {color: #eeeeee;}
.fet-user-auth .user-info-wrapper .user-info {display: inline-flex !important;}
.fet-user-auth .user-info-wrapper .user-info .user-name {font-size: 16px;}
.fet-user-auth .user-info-wrapper .user-info .dropdown-toggle {margin-left: 8px;user-select: none;cursor: pointer;}
.fet-user-auth .user-info-wrapper .user-role {font-size: 14px;}
/*FET Wrapper*/
.fet-wrapper {/*padding: 4px 0 0 276px;*/ -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.fet-wrapper.sidebar-collapse {padding: 0;}
.fet-wrapper .fet-wrapper-header {display: flex;align-items: center;justify-content: space-between;padding: 10px;position: sticky;position: -webkit-sticky;top: 4px;background: #fff;border-bottom: 1px solid #eee;z-index: 100;}
.fet-wrapper .fet-wrapper-header .fet-breadcrumb {display: flex;align-items: baseline;margin-left: 8px;}
.fet-wrapper .fet-wrapper-header .fet-breadcrumb .divider {margin: 0 8px;}
.fet-wrapper .fet-wrapper-header .fet-breadcrumb .home:hover {color: var(--primary);}
.fet-wrapper .fet-wrapper-header .vendor-wrapper {display: flex;align-items: baseline;}
.fet-wrapper .fet-wrapper-header .vendor-wrapper .vendor-name {font-size: .75rem;}
.fet-wrapper .fet-wrapper-header .sidebar-toggle {position: absolute;top: 0;left: 0;cursor: pointer;padding: 10px;display: none;font-size: 18px;background: #202529;color: #eeeeee;}
.fet-wrapper.sidebar-collapse .fet-wrapper-header .fet-breadcrumb {margin-left: 35px;}
.fet-wrapper.sidebar-collapse .fet-wrapper-header .sidebar-toggle {display: block;height: 43px;background: #fff;color: #202529;border-bottom: 1px solid #eee;}
.fet-wrapper .fet-wrapper-header .header-title {color: var(--dark);font-size: 18px;}
.fet-wrapper .fet-wrapper-header .dropdown {margin-right: 16px;}
.fet-wrapper .fet-wrapper-header .dropdown .dropdown-menu-right {transform: translate3d(-78px, 23px, 0px) !important;}
.fet-wrapper .fet-wrapper-header .dropdown .fet-btn {padding: 0;font-size: 14px;}
.fet-wrapper .fet-wrapper-header .dropdown .fet-btn.disabled-dropdown {background: initial;cursor: initial;}
.fet-wrapper .fet-wrapper-header .dropdown .fet-btn.disabled-dropdown::after {content: none;}
/*FET Inner Wrapper*/
.fet-wrapper .fet-inner-wrapper {margin: 1.2rem 1rem;}

/*Color*/
.fet-color-danger {color: var(--danger);}
.fet-color-success {color: var(--success);}

:root {
  --primary: #009DDD;
  --primary-invert: #fff;
  --secondary: #231F20;
  --secondary-invert: #fff;
  --danger: #d50000;
  --success: #4CAF50;
  --danger: #F44336;
  --red-800: #c62828;
  --blue: #2195F2;
  --dark: #343a40;
  --gray-light: #9e9e9e;
  --gray: #414341;
  --gray-300: #e0e0e0;
  --gray-500: #9e9e9e;
  --border: #e0e0e0;
  --card-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
  --card-inner-box-shadow: 0 5px 10px 0 rgba(0,0,0,.16), 0 5px 15px 0 rgba(0,0,0,.12);
  --disabled: #ddd;
}

/*Override*/
html, body {font-size: initial;color: initial;}
label {display: initial;max-width: initial;margin-bottom: initial;font-weight: initial;}
a, a:focus, a:hover {color: initial;text-decoration: none;}
/*Booststrap 4 form-check*/
.form-check {padding: 12px 0;}
.form-check > input {height: initial;position: initial;margin: initial;}
.form-check > label {cursor: pointer;font-size: 14px;}
/*grCom*/
gr-table .table_pagination select {width: initial !important;}
gr-table table tr td a.td-link {font-weight: bold;text-decoration: underline;color: var(--primary);}