:root {
  --form-small: 600px;
  --form-medium: 1000px;
  --form-large: 1600px;
  --form-full: calc(100vw - 40px);
  --color-main: #fa6901;
  --color-extra: #184563;
  --color-bg: #f1f7f7;
}

#blazor-error-ui {
  display: none;
}

#components-reconnect-modal {
  background: rgba(0, 0, 0, 0.2) !important;
  left: 0px !important;
  right: 0px !important;
  top: 0px !important;
  bottom: 0px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
}

#components-reconnect-modal h5 {
  display: none;
}

#components-reconnect-modal button {
  font-size: 0px;
  font-weight: 600;
  border: 0px;
  color: #fff;
  background: #485fc7;
  padding: 9px 20px;
  border-radius: 5px;
  cursor: pointer;
}

#components-reconnect-modal button::after {
  content: "Thử lại";
  font-size: 14px;
}

#connect {
  position: fixed;
  z-index: 99999;
  width: 280px;
  bottom: 10px;
  left: calc(50% - 140px);
  opacity: 0.8;
}

#connect .field {
  width: 100%;
  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.4);
  border-radius: 999px;
}

#callfromJS {
  display: none !important;
}

section.is-loading,
.card.is-loading {
  position: relative;
}

section.is-loading > *,
.card.is-loading > * {
  opacity: 0.5;
}


section.is-loading::before,
.card.is-loading::before {
  display: block;
  content: "LOADING";
  left: calc(50% - 5rem);
  top: calc(30% + 3rem);
  position: absolute;
  font-weight: bold;
  letter-spacing: 3px;
  width: 10rem;
  text-align: center;
}

section.is-loading::after,
.card.is-loading::after {
  -webkit-animation: spinAround 75s infinite linear;
  animation: spinAround 0.75s infinite linear;
  border-radius: 9999px;
  border: 2px solid #dbdbdb;
  border-right-color: #355caa;
  border-top-color: #184563;
  content: "";
  display: block;
  height: 4rem;
  width: 4rem;
  left: calc(50% - 2rem);
  top: calc(30% - 2rem);
  position: absolute;
}

html {
  background: #fbfbfb;
  overflow-y: auto;
}

body {
  width: 100%;
  font-family: "Roboto", Arial, sans-serif;
  margin: 0px auto;
}

#header {
  min-height: 52px;
  position: relative;
  z-index: 21;
}
#header .navbar {
  background: #fff;
  box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 10;
}

.navbar-link.is-active, a.navbar-item.is-active {
  color: var(--color-main) !important;
}

#main {
  margin: 0px;
  position: relative;
}

#gotop {
  display: flex;
  right: 20px;
  bottom: 20px;
  position: fixed;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0px 2px 9px 2px rgba(0, 0, 0, 0.6);
  opacity: 0.9;
  z-index: 2;
}

/* Bulma CSS */

.scrollx {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
}
.scrolly {
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  scrollbar-color: #3d4160 #f1f1f1;
  scrollbar-width: thin;
}
.scrolly::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.scrolly::-webkit-scrollbar-track {
  background: #f9f9f9;
}
.scrolly::-webkit-scrollbar-thumb {
  background: #eaebeb;
}
.scrolly::-webkit-scrollbar-thumb:hover {
  background: #bebfbf;
}
.scrollx.scrolly {
  overflow: auto;
}

hr {
  background: #dbdbdb;
  height: 1px;
}

strong {
  color: inherit;
}

.is-size-14 {
  font-size: 14px !important;
}

.is_cover {
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 1s;
}

.is-fullwidth {
  width: 100%;
}

.is-vcentered {
  align-items: center;
}

.is-centered {
  justify-content: center;
}

.has-text-warning {
  color: #e8ad09 !important;
}

.label {
  color: #565c7c !important;
  font-weight: 500;
  font-size: inherit;
}

.tags.has-addons {
  margin-bottom: 0px;
}

.tags.has-addons .tag {
  margin-bottom: 0px;
}

.tag:not(body).is-light {
  background: #a1a1a1;
  color: #fff;
}

.tag:not(body).is-grey {
  background: #707070;
  color: #fff;
}

.tag .icon:last-child {
  margin-right: -8px !important;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
}

.tag-list.is-less {
  max-height: 24px;
  overflow: hidden;
}

.tag-list .tag {
  margin-right: 4px;
  margin-bottom: 4px;
}

.tag-list .control > .input {
  border-radius: 4px;
  height: 24px;
  padding: 0px 7px;
}

.tag-list .control > .icon {
  height: 24px !important;
}

.button.is-transparent {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.button .is_count {
  background: #f14668;
  color: #fff;
  line-height: 20px;
  min-width: 20px;
  border-radius: 50%;
  font-size: 12px;
  margin-left: 8px;
}

.select.is-transparent select {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.select.is-dark select {
  background: #6d6c6c;
  color: #fff;
}

.select.is-primary select {
  background-color: #ebfffc;
  color: #00947e;
}

.select.is-link select {
  background-color: #eef3fc;
  color: #2160c4;
}

.select.is-info select {
  background-color: #eef6fc;
  color: #1d72aa;
}

.select.is-success select {
  background-color: #effaf3;
  color: #257942;
}

.select.is-warning select {
  background-color: #fffbeb;
  color: #947600;
}

.select.is-danger select {
  background-color: #feecf0;
  color: #cc0f35;
}

.checkbox,
.radio {
  display: inline-flex;
  align-items: center;
}

.checkbox input,
.radio input {
  margin-right: 0.5rem;
}

.control {
  font-size: inherit;
}

.control.has-icons-left > .icon,
.control.has-icons-right > .icon {
  height: 100%;
}

.control.has-icons-left > a.icon,
.control.has-icons-right > a.icon {
  pointer-events: auto;
}

.field.is-grouped {
  align-items: center;
}

.input.is-line, 
.select.is-line select {
  border-radius: 0;
  border-width: 0px;
  background: transparent;
  padding-left: 0px;
  box-shadow: none;
  font-family: inherit;
}

.input.is-line {
  padding: 0px;
  height: 1.7em;
}

.input.is-line:hover,
.select.is-line:hover select {
  box-shadow: 0px 1px 0px 0px #dbdbdb;
}

tr:hover > td .input.is-line,
tr:hover > td .select.is-line:hover select {
  box-shadow: 0px 1px 0px 0px #dbdbdb;
}

.input_color {
  background-color: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  height: 35px;
  width: 35px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input_color input {
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.tooltip {
  position: relative;
}

.tooltip > small {
  position: absolute;
  background: #333;
  color: #fff;
  padding: 2px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 6px;
  left: -5px;
  bottom: calc(100% + 8px);
  display: none;
  white-space: nowrap;
}

.tooltip:hover > small {
  display: block;
}

.tooltip > small::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 7px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #333;
}

.tooltip.is-right > small {
  left: auto;
  right: -4px;
}

.tooltip.is-right > small::after {
  left: calc(100% - 22px);
}

.tooltip.is-center > small {
  bottom: calc(50% - 11px);
  left: calc(100% + 8px);
}

.tooltip.is-center > small::after {
  left: -12px;
  top: calc(50% - 6px);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #333;
}

a.tag:hover {
  text-decoration: none;
}

.icon.is-bordered {
  border: 1px solid #dbdbdb;
  border-radius: 4px;
}

.icon.is-rounded,
.image .is-rounded {
  border-radius: 50%;
}

.icon-text {
  align-items: center;
  flex-wrap: nowrap;
  max-width: 100%;
}

.icon-text.is-fullwidth {
  width: 100%;
}

.icon-text > *:not(.icon) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-text.is-multiline {
  align-items: flex-start;
}
.icon-text.is-multiline > *:not(.icon) {
  text-overflow: unset;
  white-space: normal;
}

.image.is-rounded {
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
}

.image.is-radius {
  border-radius: 8px;
  overflow: hidden;
}

.image img {
  object-fit: cover;
  height: 100%;
  max-height: none;
  transition: all 0.25s;
}

.image.is-hover img:hover {
  background: white;
  transform: scaleX(2) scaleY(2);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  position: relative;
  z-index: 1;
}

.image .tags {
  position: absolute;
  left: 10px;
  bottom: 10px;
}

.image .delete {
  position: absolute;
  right: 10px;
  top: 10px;
}

.card-image {
  overflow: hidden;
  border-bottom: 1px solid #ddd;
}

.card-image .image img:hover {
  transform: scaleX(1.1) scaleY(1.1);
}

.content {
  word-break: break-word;
}

.content h1 {
  font-size: 1.75em;
}

.content h2 {
  font-size: 1.5em;
}

.content h3 {
  font-size: 1.4em;
}

.content img {
  width: 100%;
  display: block;
  margin: 10px 0px;
}

.columns.is-variable {
  margin: calc(-1 * var(--columnGap));
}

.columns.is-variable > .column {
  padding: var(--columnGap);
}

.columns.is_gap {
  margin-top: calc(-1 * var(--columnGap));
  margin-bottom: calc(-1 * var(--columnGap));
}

.columns.is_gap > .column {
  padding-top: var(--columnGap);
  padding-bottom: var(--columnGap);
}

.column.is-narrow {
  max-width: 100%;
}

.column.is-small {
  flex: none;
  width: var(--form-small);
}

.column.is-medium {
  flex: none;
  width: var(--form-medium);
}

.column.is-large {
  flex: none;
  width: var(--form-large);
}

.table-container {
  border: 1px solid #dbdbdb;
  overflow-y: auto;
}

.table-sticky {
  width: max-content;
  min-width: 100%;
  border: 0px !important;
}

.table-sticky > thead > tr {
  position: sticky;
  z-index: 12;
  top: 0;
}

.table-sticky > tfoot > tr {
  position: sticky;
  z-index: 12;
  bottom: 0;
}

.table-sticky > tbody > tr:hover {
  position: relative;
  z-index: 11;
}

.table-sticky .is_sticky {
  position: sticky;
  z-index: 8;
  left: 1px;
}

.table-sticky > thead > tr > th,
.table-sticky > tfoot > tr > td {
  border-top: 0px;
  border-bottom: 0px;
  box-shadow: inset 0px -1px 0px 0px #dbdbdb;
}

.table-sticky > tfoot > tr > td {
  box-shadow: inset 0px 1px 0px 0px #dbdbdb;
}

.table-sticky > tbody > tr > td {
  border-top: 1px solid #dbdbdb !important;
  border-bottom: 1px solid #dbdbdb !important;
}

.table-sticky > tbody > tr > td.is_sticky {
  background: #fff;
}

.table-sticky .is_sticky.is_last {
  box-shadow: inset -1px 0px 0px 0px #dbdbdb;
}

.table-sticky .is_sticky.is_first {
  box-shadow: inset 1px 0px 0px 0px #dbdbdb;
}

.table-sticky th.is_sticky:last-child,
.table-sticky td.is_sticky:last-child {
  box-shadow: inset 1px 0px 0px 0px #dbdbdb;
}

.table {
  border-top: 1px solid #dbdbdb;
  border-bottom: 1px solid #dbdbdb;
}

.table > thead > tr > th,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
  background: #f3f3f3;
  border-bottom-width: 1px;
  cursor: default;
}

.table > thead > tr:not(.has-text-weight-semibold) > th {
  font-weight: 500;
}

.table.is-fullwidth {
  table-layout: fixed;
}

.table.is-vcentered td {
  vertical-align: middle;
}

.table td[valign="bottom"] {
  vertical-align: bottom;
}

.table:not(.is-bordered):not(.is-striped) > tbody > tr > td:first-child,
.table:not(.is-bordered):not(.is-striped) > thead > tr > th:first-child {
  padding-left: 5px;
}

.table:not(.is-bordered):not(.is-striped) > tbody > tr > td:last-child,
.table:not(.is-bordered):not(.is-striped) > thead > tr > th:last-child {
  padding-right: 5px;
}

.table.is-striped > tbody > tr:not(.is-selected):nth-child(odd) {
  background: #f1f7f7;
}

.table.is-striped > tbody > tr:not(.is-selected):nth-child(even) {
  background: none;
}

.modal-card {
  max-width: calc(100vw - 40px);
}

.modal-card.is-small,
.modal-content.is-small {
  width: var(--form-small);
}

.modal-card.is-medium,
.modal-content.is-medium {
  width: var(--form-medium);
}

.modal-card.is-large,
.modal-content.is-large {
  width: var(--form-large);
}

.modal-card.is-full,
.modal-content.is-full {
  width: var(--form-full);
}

.modal-card-head {
  justify-content: space-between;
  background: #fff;
  padding: 0.5rem 1rem;
}

.modal-card-head .tabs {
  flex: none;
  margin: 0px 0px -8px -16px;
  width: calc(100% + 32px);
}

.modal-card-head .tabs+.delete {
  position: absolute;
  top: 14px;
  right: 14px;
}

.modal-card-foot {
  padding: 1rem;
}

.modal-card-foot.is-right {
  justify-content: flex-end;
}

.modal-card-foot .field {
  width: 100%;
}

.modal-card-title {
  max-width: calc(100% - 40px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  color: var(--color-extra) !important;
  font-weight: bold !important;
  font-size: 1rem !important;
  line-height: 1.5;
}

.dropdown.is-fullwidth,
.dropdown.is-fullwidth .dropdown-trigger {
  width: 100%;
}

.dropdown.is-active .dropdown-menu,
.dropdown.is-hoverable:hover .dropdown-menu {
  display: none;
}
.dropdown.is-active > .dropdown-menu,
.dropdown.is-hoverable:hover > .dropdown-menu {
  display: block;
}

.dropdown-menu {
  min-width: 100%;
}

.dropdown-content {
  max-height: 400px;
  overflow-y: auto;
}

a.dropdown-item,
button.dropdown-item {
  padding-right: 1rem;
  text-align: left;
  font-size: inherit;
}

.dropdown-item.icon-text {
  display: flex;
}

.datepicker .dropdown-menu {
  width: 190px;
}

.datepicker .column.is-narrow {
  width: calc(100% / 7) !important;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
}

.datepicker .column.is-narrow:hover {
  background: #ccc;
}

.datepicker .column.is-narrow.is-active {
  background: #485fc7;
  color: #fff;
}

.datepicker .column.is-narrow.is-range {
  background: #56a4e5;
  color: #fff;
}

.datepicker .field {
  align-items: center;
}

.datepicker .control:not(:last-child) {
  margin-right: 5px !important;
}

.datepicker select {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
}

/* Custom CSS */

.text_inline {
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.text_1_line:not(.is-show) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  height: 1.5em;
}

.text_2_line:not(.is-show) {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 3em;
}

.text_3_line:not(.is-show) {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  height: 4.5em;
}

.text_4_line:not(.is-show) {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  height: 6em;
}

.text_5_line:not(.is-show) {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  height: 7.5em;
}

#notify {
  font-size: 16px;
  position: fixed;
  z-index: 90000;
  top: 12px;
  right: 12px;
  max-width: 500px;
}

#notify .notification {
  padding: 0.5rem;
  padding-right: 2.4rem;
}

#notify .notification .delete {
  top: 14px;
}

.has_suggest:hover .suggest,
.has_suggest input:focus ~ .suggest {
  display: block;
}

.suggest {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 100%;
  margin-top: 0px;
  background: #fff;
  _border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  z-index: 20;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 300px;
  display: none;
}

.suggest .rsitem {
  border-bottom: 1px solid #eee;
  padding: 6px 10px;
  position: relative;
  color: #333;
  font-size: 13px;
  cursor: pointer;
}

.suggest .rsitem.seleted,
.suggest .rsitem:hover {
  background: #f7f6f6;
}

.suggest .rsitem:last-child {
  border-bottom: 0px;
}

.daterangepicker td.active {
  background-color: var(--color-main) !important;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  border-color: #ddd;
}

.table > thead > tr > th[scope="col"] > div {
  display: flex;
  align-items: center;
  position: relative;
}
.table > thead > tr > th[scope="col"] > div > span:nth-child(2) {
  width: 12px;
  display: inline-flex;
  align-items: center;
  opacity: 0.7;
  position: absolute;
  left: -12px;
  top: calc(50% - 6px);
}
.table > thead > tr > th[scope="col"] > div > div.float-right {
  display: inline-flex;
  align-items: center;
}
.table > thead > tr > th[scope="col"] > div > div.float-right a {
  display: inline-flex;
  align-items: center;
  opacity: 0.3;
  padding: 4px;
}
.table > thead > tr > th[scope="col"] > div > div.float-right a[aria-expanded="true"] {
  opacity: 0.7;
}
.table > thead > tr > th[scope="col"] > div > div.float-right a span {
  opacity: 1 !important;
  width: 12px;
  display: inline-flex;
  align-items: center;
}
.table > thead > tr > th[scope="col"] > div > div.float-right.mr-1 {
  opacity: 0;
  margin: 0px;
  cursor: pointer;
}
.table > thead > tr > th[scope="col"]:hover > div > div.float-right.mr-1 {
  opacity: 1;
}
.table > thead > tr > th[scope="col"] > div > div.float-right.mr-1 span {
  width: 12px;
  display: inline-flex;
  align-items: center;
}
.table > thead[role="search"] > tr {
  z-index: 12;
  position: absolute;
}
.table > thead[role="search"] > tr > th {
  padding: 0px !important;
}
.table > thead[role="search"] > tr > th > .float-right {
  position: absolute;
  top: 58px;
  left: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
}
.table > thead[role="search"] > tr > th > .popover {
  transform: translate3d(6px, 79px, 0px) !important;
}
.popover {
  z-index: 12;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: .3rem;
  display: block;
  width: 180px;
  position: absolute;
  inset: 0px auto auto 0px;
  margin: 0px;
  transform: translate3d(-27px, 20.5px, 0px);
}
.popover > .arrow {
  display: block;
  width: 1rem;
  height: .5rem;
  position: absolute;
  left: 0px;
  top: calc((.5rem + 1px)* -1);
  transform: translate3d(81px, 0px, 0px);
}
.popover > .arrow::before,
.popover > .arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}
.popover > .arrow::before {
  top: 0;
  border-width: 0 .5rem .5rem .5rem;
  border-bottom-color: rgba(0, 0, 0, .25);
}
.popover > .arrow::after {
  top: 1px;
  border-width: 0 .5rem .5rem .5rem;
  border-bottom-color: #fff;
}
.popover .popover-header {
  padding: .5rem .75rem;
  margin-bottom: 0;
  font-size: 1rem;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  border-top-left-radius: calc(.3rem - 1px);
  border-top-right-radius: calc(.3rem - 1px);
}
.popover .popover-body {
  padding: .5rem .75rem;
  color: #212529;
}
.popover .popover-body select,
.popover .popover-body input {
  border: 1px solid #ddd;
  border-radius: 4px;
  height: 30px;
  width: 100%;
  display: block;
  margin-bottom: 5px;
}
.popover .popover-body br {
  display: none;
}
.popover .popover-body .justify-content-md-center {
  padding-top: 5px;
}
.popover .popover-body .btn {
  border: 1px solid #dbdbdb;
  font-size: 12px;
  padding: 6px 8px;
  background: #f2f2f2;
  border-radius: 4px;
  cursor: pointer;
}
.popover .popover-body .btn.btn-primary {
  background: #485fc7;
  color: #fff;
}


/* blazor-dragdrop */
.plk-dd-inprogess > * {
  pointer-events: none;
}

.plk-dd-dropzone {
  min-height: 10px;
}

.plk-dd-spacing {
  height: auto;
  transition: all 0.25s;
}

.plk-dd-spacing.plk-dd-inprogess {
  background-color: #eee;
  min-height: 1rem;
}

.plk-dd-spacing.plk-dd-spacing-dragged-over {
  background-color: #b9defc;
  min-height: 3rem;
}

.plk-dd-draggable {
  transition: all 0.25s;
}

.plk-dd-dragged-over {
  opacity: 0.8;
  padding: 1rem 0;
  animation: blinker 1s linear infinite;
}

.plk-dd-dragged-over-denied {
  background-color: red;
  opacity: 0.6;
  animation: blinker 1s linear infinite;
}

.plk-dd-in-transit {
  opacity: 0;
  overflow: hidden;
}

.plk-dd-in-transit > div {
  opacity: 0;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.blink_me {
  animation: blinker 1s linear infinite;
}

.plk-dd-noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}