html,
body {
    margin: 0;
    height: 100%;
    overflow: hidden
}


.loader__balls {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.loader__balls__group {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  height: 100px;
  width: 40px;
}
.ball {
  height: 30px;
  width: 30px;
  border-radius: 15px;
  position: absolute;
  transform-origin: bottom;
}

/* ANIMATION BALL 1*/
.loader__balls__group :nth-child(1) {
  background-color: #99e2d0;
  animation-name: jumpinBallAnimation1;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
}
@keyframes jumpinBallAnimation1 {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  10% {
    transform: translateY(0) scale(1.3, 0.8);
  }
  11% {
    transform: translateY(0) scale(0.7, 1.2);
    animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
  }
  39% {
    transform: translateY(-75px) scale(1);
    animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
  }
  40% {
    transform: translateY(-75px) scale(1);
  }
  41% {
    transform: translateY(-75px) scale(1);
    animation-timing-function: cubic-bezier(1, 0, 1, 0);
  }
  69% {
    transform: translateY(0px) scale(1, 1);
    animation-timing-function: cubic-bezier(1, 0, 1, 0);
  }
  70% {
    transform: translateY(0) scale(1.5, 0.4);
  }
  80% {
    transform: translateY(0) scale(0.8, 1.2);
  }
  90% {
    transform: translateY(0) scale(1.1, 0.8);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}

/* ANIMATION BALL 2*/
.loader__balls__group :nth-child(2) {
  background-color: #ff79da;
  animation-name: jumpinBallAnimation2;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
}
@keyframes jumpinBallAnimation2 {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  10% {
    transform: translateY(0) scale(1.3, 0.8);
  }
  11% {
    transform: translateY(0) scale(0.7, 1.2);
    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
  }
  39% {
    transform: translateY(-75px) scale(1);
    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
  }
  40% {
    transform: translateY(-75px) scale(1);
  }
  41% {
    transform: translateY(-75px) scale(1);
    animation-timing-function: cubic-bezier(1, 0, 1, 0.5);
  }
  69% {
    transform: translateY(0px) scale(1, 1);
    animation-timing-function: cubic-bezier(1, 0, 1, 0.5);
  }
  70% {
    transform: translateY(0) scale(1.5, 0.4);
  }
  80% {
    transform: translateY(0) scale(0.8, 1.2);
  }
  90% {
    transform: translateY(0) scale(1.1, 0.8);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}

/* ANIMATION BALL 3*/
.loader__balls__group :nth-child(3) {
  background-color: #9356dc;
  animation-name: jumpinBallAnimation3;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
}
@keyframes jumpinBallAnimation3 {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  10% {
    transform: translateY(0) scale(1.3, 0.8);
  }
  11% {
    transform: translateY(0) scale(0.7, 1.2);
    animation-timing-function: cubic-bezier(0, 1, 0.5, 1);
  }
  39% {
    transform: translateY(-75px) scale(1);
    animation-timing-function: cubic-bezier(0, 1, 0.5, 1);
  }
  40% {
    transform: translateY(-75px) scale(1);
  }
  41% {
    transform: translateY(-75px) scale(1);
    animation-timing-function: cubic-bezier(1, 0, 1, 1);
  }
  69% {
    transform: translateY(0px) scale(1, 1);
    animation-timing-function: cubic-bezier(1, 0, 1, 1);
  }
  70% {
    transform: translateY(0) scale(1.5, 0.4);
  }
  80% {
    transform: translateY(0) scale(0.8, 1.2);
  }
  90% {
    transform: translateY(0) scale(1.1, 0.8);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}
.loader__balls__group .item1 {
  animation-delay: 0ms;
}
.loader__balls__group .item2 {
  animation-delay: 100ms;
}
.loader__balls__group .item3 {
  animation-delay: 200ms;
}



/*----------Loading-------------*/

#loading-mask {
    background-color: #ffffff;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 20000;
}

#loading {
    height: auto;
    position: relative;
    top: 30%;
    padding: 2px;
    z-index: 20001;
}

#loading a {
    color: #225588;
}

#loading .loading-indicator {
    color: #ffffff !important;
    position: relative;
    font: 14px Helvetica, Arial, sans-serif;
    height: auto;
    margin: 0;
    padding: 0px;
    line-height: 60px;
}

#loading-msg {
    font-size: 12px;
    font-weight: normal;
}

.x-menu-item-icon-default {
    width: 24px;
    height: 24px;
    top: 8px !important;
    left: 4px;
    line-height: 24px;
    font-size: 16px;
    color: #919191;
    background-position: center center;
}

.login-logo {
    background-color: #1d4967;
    height: 65px;
    font-size: 16px;
    color: #FFFFFF;
    margin-left: 17px;
    .main-logo {
        line-height: 65px;
        img {
            margin-left: 15px;
            margin-right: 10px;
            top: 8px;
            position: relative;
        }
    }
}

.main-toolbar {
    background-color: #f6f6f6;
    height: 65px;
    img {
        margin-left: 15px;
        margin-right: 10px;
        top: 10px;
        position: relative;
    }
}

.main-title {
    line-height: 65px;
    font-size: 23px;
    color: #213563;
    background-color: #ffffff;
    font-weight: 600;
    span {
        font-weight: 800;
        font-family: Arial, Helvetica, sans-serif;
        text-decoration: underline;
        -webkit-text-decoration-color: #3054A3;
        text-decoration-color: #3054A3;
        text-decoration-thickness: 3px;
    }
}

.login-title {
    line-height: 65px;
    font-size: 28px;
    color: #3054A3;
    span {
        font-weight: 800;
        font-family: Arial, Helvetica, sans-serif;
        -webkit-text-decoration-color: #3054A3;
        text-decoration-color: #3054A3;
        text-decoration-thickness: 4px;
    }
}

.tab-bar-top {
    border-bottom: 1px solid #d0d0d0 !important;
}   

.tab-bar-left {
    background-color: #f6f8fa !important;
}

.sk-fading-circle {
    margin: 20px auto;
    width: 50px;
    height: 50px;
    position: relative;
}

.sk-fading-circle .sk-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.sk-fading-circle .sk-circle:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: #FFFFFF;
    border-radius: 100%;
    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
    animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}

.sk-fading-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

.sk-fading-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}

.sk-fading-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.sk-fading-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}

.sk-fading-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg);
}

.sk-fading-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.sk-fading-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg);
}

.sk-fading-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg);
}

.sk-fading-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.sk-fading-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg);
}

.sk-fading-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg);
}

.sk-fading-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.sk-fading-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

.sk-fading-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.sk-fading-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.sk-fading-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.sk-fading-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.sk-fading-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.sk-fading-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.sk-fading-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.sk-fading-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.sk-fading-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
    0%,
    39%,
    100% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
}

@keyframes sk-circleFadeDelay {
    0%,
    39%,
    100% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
}

.rowdieukien .x-grid-cell {
    background-color: #81F781 !important;
    color: white;
}

.rowdieukien .x-grid-row {
    border: thin solid #000 !important;
}

.dieukienup.x-action-col-icon {
    color: green !important
}

.dieukiendown.x-action-col-icon {
    color: red !important
}

.clear-rating-button {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

.clear-rating-button span {
    color: #d6d6d6 !important;
    font-size: 18px !important;
}

#app-header {
    color: #596F8F;
    font-size: 22px;
    font-weight: 200;
    padding: 8px 15px;
    text-shadow: 0 1px 0 #fff;
}

#app-msg {
    background: #D1DDEF;
    border: 1px solid #ACC3E4;
    padding: 3px 15px;
    font-weight: bold;
    font-size: 13px;
    position: absolute;
    right: 0;
    top: 0;
}

.x-panel-ghost {
    z-index: 1;
}

.x-border-layout-ct {
    background: #DFE8F6;
}

.x-portal-body {
    padding: 0 0 0 8px;
}

.x-portal .x-portal-column {
    /* columns must have vertical padding to avoid losing dimensions when empty */
    padding: 8px 8px 0 0;
}

.x-portal .x-panel-dd-spacer {
    border: 2px dashed #99bbe8;
    background: #f6f6f6;
    border-radius: 4px;
    -moz-border-radius: 4px;
    margin-bottom: 10px;
}

.x-portlet {
    margin-bottom: 10px;
    padding: 1px;
}

.x-portlet .x-panel-body {
    background: #fff;
}

.portlet-content {
    padding: 10px;
    font-size: 11px;
}

#app-options .portlet-content {
    padding: 5px;
    font-size: 12px;
}

.text-blue {
    color: #0073b7 !important;
}

.text-red {
    color: red !important;
}

.text-green {
    color: #17650e !important;
}

.text-dark-warning {
    color: #f18f00 !important;
}

.text-dark-processing {
    color: #033c6b !important;
}

.text-toolbar {
    color: #D9D9D9 !important;
    border-left-color: #D9D9D9 !important;
}

.green-bar .x-progress-bar {
    background: #0073b7 !important;
}

.red-bar .x-progress-bar {
    background: #E94B3C !important;
}

.yellow-bar .x-progress-bar {
    background: #00A591 !important;
}

.custom-column {
    vertical-align: middle !important;
}

.btnNum-blue {
    background: #167abc;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 4px;
    border-radius: 6px;
    color: white;
    font-size: 12px;
}

.btnNum-green {
    background: #9cc96b;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 4px;
    border-radius: 6px;
    color: white;
    font-size: 12px;
}

.btnNum-red {
    background: #e44959;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 4px;
    border-radius: 6px;
    color: white;
    font-size: 12px;
}

.btnNum-orange {
    background: #f6a623;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 4px;
    border-radius: 6px;
    color: white;
    font-size: 12px;
}

.btnNum-info-light {
    background: #4DA3FF;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 4px;
    border-radius: 6px;
    color: white;
    font-size: 12px;
}

.btnNum-info-dark {
    background: #1F73B7;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 4px;
    border-radius: 6px;
    color: white;
    font-size: 12px;
}

.btnNum-warning {
    background: #f18f00;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 4px;
    border-radius: 6px;
    color: white;
    font-size: 12px;
}

.btnNum-yellow {
    background: #FBC02D;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 4px;
    border-radius: 6px;
    color: white;
    font-size: 12px;
}

.btnNum-success {
    background: #4CAF50;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 4px;
    border-radius: 6px;
    color: white;
    font-size: 12px;
}

.btnNum-purple {
    background: #AB47BC;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 4px;
    border-radius: 6px;
    color: white;
    font-size: 12px;
}

.btnNum-danger-light {
    background: #EF5350;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 4px;
    border-radius: 6px;
    color: white;
    font-size: 12px;
}

.btnNum-status-new {
    background: #9E9E9E;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 4px;
    border-radius: 6px;
    color: rgb(0, 0, 0);
    font-size: 12px;
}

.btnNum-processing {
    background: #033c6b;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 4px;
    border-radius: 6px;
    color: white;
    font-size: 12px;
}

.btnNum-default {
    background: #9E9E9E;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 4px;
    border-radius: 6px;
    color: white;
    font-size: 12px;
}

.btnNum-error {
    background: #E53935;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin: 4px;
    border-radius: 6px;
    color: white;
    font-size: 12px;
}

.icon-margin {
    margin-right: 12px !important;
}

.tunes-grid {
    background-color: #eeeeee;
    transition: filter 250ms;

    .grid-image {
        width: 100%;
        height: 120px;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

.custom-grid {
    .x-grid-td {
        overflow: hidden;
        border-width: 0;
        vertical-align: middle !important;
    }
    .x-column-header {
        border-right: 1px solid #919191 !important;
        border-bottom: 1px solid #919191 !important;
        color: #000000;
        font: 500 13px / 19px 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
        outline: 0;
        background-color: #fff;
    }
}

.custom-grid .x-grid-row .x-grid-cell-inner {
    white-space: pre-line;
}

.custom-grid .x-grid-row-over .x-grid-cell-inner {
    white-space: pre-line;
}

.grid-border .x-grid-with-row-lines .x-grid-item {
    border-color: #919191 !important;
}

.grid-border .x-grid-with-col-lines .x-grid-cell {
    border-color: #919191 !important;
}

.grid-border .x-grid-scrollbar-clipper-locked,
.x-grid-scrollbar-locked {
    border-color: #919191 !important;
}

.grid-border .x-grid-item {
    color: #000000 !important;
    font: 600 13px/19px 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif !important;
}

.grid-border .x-grid-inner-locked {
    border-right-color: #919191 !important;
}

.grid-border .x-grid-group-hd {
    border-color: #919191 !important;
}

.grid-border .x-grid-body {
    border-width: 1px 1px 1px !important;
    border-color: #919191 !important;
    border-right-width: 0 !important;
    border-left-width: 0 !important;
}

.grid-border .x-grid-body {
    border-top-color: #919191 !important;
}

.grid-custom-color .x-grid-item {
    color: #000000 !important;
    font: 500 13px/19px 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif !important;
}

.grid-custom-color .x-column-header {
    color: #000000 !important;
    font: 500 13px/19px 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif !important;
}

.avatar {
    vertical-align: middle;
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.tabxemchitiet .x-tab.x-tab-active.x-tab-default {
    border-color: #0a3a82 !important;
    border-width: 0 0 0 4px !important;
    background-color: #fff !important;
}

.tabxemchitiet .x-tab-focus.x-tab-default {
    outline: 0px !important;
}

.tabxemchitiet .x-tab.x-tab-default {
    background-color: #91919142 !important;
}

.tabxemchitiet2 .x-tab.x-tab-active.x-tab-default {
    border-color: #0a3a82 !important;
    border-width: 0 4px 0 0px !important;
    background-color: #fff !important;
}

.tabxemchitiet2 .x-tab-focus.x-tab-default {
    outline: 0px !important;
}

.tabxemchitiet2 .x-tab.x-tab-default {
    background-color: #91919142 !important;
}

.tabviewport .x-tab.x-tab-active.x-tab-default {
    border-color: #cf6311;
    border-width: 4px 0 0 0;
}

.tabviewport .x-tab-focus.x-tab-default {
    outline: 0px;
}

.avatar-grid {
    vertical-align: middle;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-right: 10px;
}

.avatar-grid-relation {
    vertical-align: middle;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    margin-right: 5px;
    margin-top: 4px;
}

.avatar-grid-relation-toolbar {
    vertical-align: middle;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 5px;
}

.avatar-grid-relation-toolbar-onway {
    vertical-align: middle;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 5px;
    opacity: 0.4;
}

.x-form-edit-trigger {
    font-size: 16px !important;
    font-family: 'Font Awesome 5 Free' !important;
}

.x-form-edit-trigger:before {
    content: '\f044' !important;
}

.x-form-add-trigger {
    font-size: 16px !important;
    font-family: 'Font Awesome 5 Free' !important;
}

.x-form-add-trigger:before {
    content: '\f055' !important;
}

.x-form-plus-trigger {
    font-size: 16px !important;
    font-family: 'Font Awesome 5 Free' !important;
}

.x-form-plus-trigger:before {
    content: '\f067' !important;
}

.x-form-save-trigger {
    font-size: 16px !important;
    font-family: 'Font Awesome 5 Free' !important;
    color: #0f557b !important;
}

.x-form-save-trigger:before {
    content: '\f0c7' !important;
}