:root {
  --font-family-primary: "Inter";
  --font-family-secondary: "Open Sans";
  --primary-color : #00A492;
  --success-color : #50cd89;
  --info-color : #7239ea;
  --warning-color : #ffc700;
  --danger-color : #f1416c;
  --primary-color-hover : #009a88;
  --success-color-hover : #46c37f;
  --info-color-hover : #682fe0;
  --warning-color-hover : #f5bd00;
  --danger-color-hover : #e73762;
  --facebook-color : rgb(26, 119, 242);
  --link-color : #337ab7;
  --link-color-hover : #014885;
  --hover-brightness : 0.95;
  --background-login : #1e272c;
  --header-logo : url("https://contactcenter.sumutprov.go.id/FileManager/getFile/5036");
  --brand-logo : url("/img/onebox-blue.png");
  --border-radius : 8px;
  --btn-border-radius : 5px;
  --primary-text-color : #555;
  --max-width-tab : 100px;
}

/*
 *
 *   INSPINIA - Responsive Admin Theme
 *   version 2.6
 *
 *   all custom css
*/

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover {
  background-color: var(--primary-color);
}

.nav-header {
  background-color: #FFFFFF;
}

.nav > li.active {
  /* border-left: 4px solid #00A492; */
}

body:not(.fixed-sidebar):not(.canvas-menu).mini-navbar .nav li:hover > .nav-second-level,
.mini-navbar .nav li:focus > .nav-second-level {
  display: block;
  position: absolute;
  margin-bottom: 0px;
  padding-bottom: 0px;
}
.navbar-default .special_link a {
  background: var(--primary-color);
}
.navbar-default .special_link a span.label {
  color: var(--primary-color);
}
.navbar-default .landing_link a:hover {
  background: var(--primary-color) !important;
}
body.mini-navbar .nav-header {
  background-color: var(--primary-color);
}
.top-navigation .navbar-nav .dropdown-menu > .active > a {
  color: var(--primary-color);
}
.top-navigation .nav > li a:hover,
.top-navigation .nav > li a:focus {
  color: var(--primary-color);
}
.top-navigation .nav > li.active > a {
  color: var(--primary-color);
}
.top-navigation .navbar-brand {
  background: var(--primary-color);
}
.navbar-toggle {
  background-color: var(--primary-color);
}
.btn {
  border-radius: var(--btn-border-radius, 3px);
}
.btn-primary.btn-outline {
  color: #fff;
  background-color: #fff;
}
.btn-success.btn-outline {
  color: var(--success-color);
  background-color: #fff;
}
.btn-info.btn-outline {
  color: var(--info-color);
  background-color: #fff;
}
.btn-warning.btn-outline {
  color: var(--warning-color);
  background-color: #fff;
}
.btn-danger.btn-outline {
  color: var(--danger-color);
  background-color: #fff;
}
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary,
.btn-primary:active:focus,
.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary.active:focus {
  background-color: var(--primary-color-hover);
  border-color: var(--primary-color-hover);
}
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled,
.btn-primary.disabled:hover,
.btn-primary.disabled:focus,
.btn-primary.disabled:active,
.btn-primary.disabled.active,
.btn-primary[disabled],
.btn-primary[disabled]:hover,
.btn-primary[disabled]:focus,
.btn-primary[disabled]:active,
.btn-primary.active[disabled],
fieldset[disabled] .btn-primary,
fieldset[disabled] .btn-primary:hover,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary:active,
fieldset[disabled] .btn-primary.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.btn-success {
  background-color: var(--success-color);
  border-color: var(--success-color);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success,
.btn-success:active:focus,
.btn-success:active:hover,
.btn-success.active:hover,
.btn-success.active:focus {
  background-color: var(--success-color-hover);
  border-color: var(--success-color-hover);
}
.btn-success.disabled,
.btn-success.disabled:hover,
.btn-success.disabled:focus,
.btn-success.disabled:active,
.btn-success.disabled.active,
.btn-success[disabled],
.btn-success[disabled]:hover,
.btn-success[disabled]:focus,
.btn-success[disabled]:active,
.btn-success.active[disabled],
fieldset[disabled] .btn-success,
fieldset[disabled] .btn-success:hover,
fieldset[disabled] .btn-success:focus,
fieldset[disabled] .btn-success:active,
fieldset[disabled] .btn-success.active {
  background-color: var(--success-color);
  border-color: var(--success-color);
}
.btn-info {
  background-color: var(--info-color);
  border-color: var(--info-color);
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info,
.btn-info:active:focus,
.btn-info:active:hover,
.btn-info.active:hover,
.btn-info.active:focus {
  background-color: var(--info-color-hover);
  border-color: var(--info-color-hover)
}
.btn-info.disabled,
.btn-info.disabled:hover,
.btn-info.disabled:focus,
.btn-info.disabled:active,
.btn-info.disabled.active,
.btn-info[disabled],
.btn-info[disabled]:hover,
.btn-info[disabled]:focus,
.btn-info[disabled]:active,
.btn-info.active[disabled],
fieldset[disabled] .btn-info,
fieldset[disabled] .btn-info:hover,
fieldset[disabled] .btn-info:focus,
fieldset[disabled] .btn-info:active,
fieldset[disabled] .btn-info.active {
  background-color: var(--info-color);
  border-color: var(--info-color);
}
.btn-warning {
  background-color: var(--warning-color);
  border-color: var(--warning-color);
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning,
.btn-warning:active:focus,
.btn-warning:active:hover,
.btn-warning.active:hover,
.btn-warning.active:focus {
  background-color: var(--warning-color-hover);
  border-color: var(--warning-color-hover);
}
.btn-warning.disabled,
.btn-warning.disabled:hover,
.btn-warning.disabled:focus,
.btn-warning.disabled:active,
.btn-warning.disabled.active,
.btn-warning[disabled],
.btn-warning[disabled]:hover,
.btn-warning[disabled]:focus,
.btn-warning[disabled]:active,
.btn-warning.active[disabled],
fieldset[disabled] .btn-warning,
fieldset[disabled] .btn-warning:hover,
fieldset[disabled] .btn-warning:focus,
fieldset[disabled] .btn-warning:active,
fieldset[disabled] .btn-warning.active {
  background-color: var(--warning-color);
  border-color: var(--warning-color);
}
.btn-danger {
  background-color: var(--danger-color);
  border-color: var(--danger-color);
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger,
.btn-danger:active:focus,
.btn-danger:active:hover,
.btn-danger.active:hover,
.btn-danger.active:focus {
  background-color: var(--danger-color-hover);
  border-color: var(--danger-color-hover);
}
.btn-danger.disabled,
.btn-danger.disabled:hover,
.btn-danger.disabled:focus,
.btn-danger.disabled:active,
.btn-danger.disabled.active,
.btn-danger[disabled],
.btn-danger[disabled]:hover,
.btn-danger[disabled]:focus,
.btn-danger[disabled]:active,
.btn-danger.active[disabled],
fieldset[disabled] .btn-danger,
fieldset[disabled] .btn-danger:hover,
fieldset[disabled] .btn-danger:focus,
fieldset[disabled] .btn-danger:active,
fieldset[disabled] .btn-danger.active {
  background-color: var(--danger-color);
  border-color: var(--danger-color);
}
.btn-link {
  color: inherit!important;
}
.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.btn-link.active,
.open .dropdown-toggle.btn-link {
  color: var(--primary-color)!important;
  text-decoration: none;
}
.btn-facebook {
  background-color: var(--facebook-color);
  border-color: var(--facebook-color);
  color: #FFFFFF;
}
.btn-facebook:hover,
.btn-facebook:focus,
.btn-facebook:active,
.btn-facebook.active,
.open .dropdown-toggle.btn-facebook,
.btn-facebook:active:focus,
.btn-facebook:active:hover,
.btn-facebook.active:hover,
.btn-facebook.active:focus {
  filter:brightness(var(--hover-brightness));
  color: #FFFFFF;
}
button.btn-primary.dim {
  box-shadow: inset 0 0 0 var(--primary-color), 0 5px 0 0 var(--primary-color), 0 10px 5px #999999;
}
button.btn-primary.dim:active {
  box-shadow: inset 0 0 0 var(--primary-color), 0 2px 0 0 var(--primary-color), 0 5px 3px #999999;
}
button.btn-default.dim {
  box-shadow: inset 0 0 0 #b3b3b3, 0 5px 0 0 #b3b3b3, 0 10px 5px #999999;
}
button.btn-default.dim:active {
  box-shadow: inset 0 0 0 #b3b3b3, 0 2px 0 0 #b3b3b3, 0 5px 3px #999999;
}
button.btn-warning.dim {
  box-shadow: inset 0 0 0 var(--warning-color), 0 5px 0 0 var(--warning-color), 0 10px 5px #999999;
}
button.btn-warning.dim:active {
  box-shadow: inset 0 0 0 var(--warning-color), 0 2px 0 0 var(--warning-color), 0 5px 3px #999999;
}
button.btn-info.dim {
  box-shadow: inset 0 0 0 var(--info-color), 0 5px 0 0 var(--info-color), 0 10px 5px #999999;
}
button.btn-info.dim:active {
  box-shadow: inset 0 0 0 var(--info-color), 0 2px 0 0 var(--info-color), 0 5px 3px #999999;
}
button.btn-success.dim {
  box-shadow: inset 0 0 0 var(--success-color), 0 5px 0 0 var(--success-color), 0 10px 5px #999999;
}
button.btn-success.dim:active {
  box-shadow: inset 0 0 0 var(--success-color), 0 2px 0 0 var(--success-color), 0 5px 3px #999999;
}
button.btn-danger.dim {
  box-shadow: inset 0 0 0 var(--danger-color), 0 5px 0 0 var(--danger-color), 0 10px 5px #999999;
}
button.btn-danger.dim:active {
  box-shadow: inset 0 0 0 var(--danger-color), 0 2px 0 0 var(--danger-color), 0 5px 3px #999999;
}
.label {
  font-family: var(--font-family-primary, --font-family-secondary), 'Helvetica Neue', Helvetica, Arial, sans-serif;
  border-radius: 0.45em;
}
.badge {
  font-family: var(--font-family-primary, --font-family-secondary), 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.label-primary,
.badge-primary {
  background-color: var(--primary-color);
}
.label-success,
.badge-success {
  background-color: var(--success-color);
}
.label-warning,
.badge-warning {
  background-color: var(--warning-color);
}
.label-warning-light,
.badge-warning-light {
  background-color: var(--warning-color);
}
.label-danger,
.badge-danger {
  background-color: var(--danger-color);
}
.label-info,
.badge-info {
  background-color: var(--info-color);
}
.label-inverse,
.badge-inverse {
  background-color: #262626;
}
.label-white,
.badge-disable {
  background-color: #2A2E36;
  color: #8B91A0;
}
/* TOOGLE SWICH */
.onoffswitch-label {
  border: 2px solid var(--primary-color);
}
.onoffswitch-inner:before {
  background-color: var(--primary-color);
}
.onoffswitch-switch {
  border: 2px solid var(--primary-color);
}
.fc-state-active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.fc-event,
.fc-agenda .fc-event-time,
.fc-event a {
  background-color: var(--primary-color);

  border-color: var(--primary-color);
}
/* LIST GROUP */
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* PEACE */
.pace .pace-progress {
  background: var(--primary-color);
}
/* INPUTS */
.form-control:focus,
.single-line:focus {
  border-color: var(--primary-color) !important;
}
.has-success .form-control {
  border-color: var(--success-color);
}
.has-warning .form-control {
  border-color: var(--warning-color);
}
.has-error .form-control {
  border-color: var(--danger-color);
}
.has-success .control-label {
  color: var(--success-color);
}
.has-warning .control-label {
  color: var(--warning-color);
}
.has-error .control-label {
  color: var(--danger-color);
}
.noUi-connect {
  background: none repeat scroll 0 0 var(--primary-color);
}
/* Toastr custom style */
.toast {
  background-color: var(--primary-color);
}
.toast-success {
  background-color: var(--success-color);
}
.toast-error {
  background-color: var(--danger-color);
}
.toast-info {
  background-color: var(--info-color);
}
.toast-warning {
  background-color: var(--warning-color);
}
.inspinia-notify.alert-warning {
  border-left: 6px solid var(--warning-color);
}
.inspinia-notify.alert-success {
  border-left: 6px solid var(--success-color);
}
.inspinia-notify.alert-danger {
  border-left: 6px solid var(--danger-color);
}
.inspinia-notify.alert-info {
  border-left: 6px solid var(--info-color);
}
/* Image cropper style */
.forum-item.active .fa {
  color: var(--primary-color);
}
.forum-item.active a.forum-item-title {
  color: var(--primary-color);
}
.vertical-date small {
  color: var(--primary-color);
}
.jvectormap-zoomin,
.jvectormap-zoomout,
.jvectormap-goback {
  background: var(--primary-color);
}
/*Slick Carousel */
.slick-prev:before,
.slick-next:before {
  color: var(--primary-color) !important;
}
/* Select2 custom styles */
.select2-container .select2-selection--multiple .select2-selection__rendered {
  overflow:inherit;
}
/* Dropzone */
.dropzone {
  border: 1px dashed var(--primary-color);
}
html {
  overflow-x: hidden;
}
body {
  font-family: var(--font-family-primary, --font-family-secondary), "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--primary-text-color);
}
.branding {
  background-color: var(--primary-color);
}
.read td {
  background-color: #fbfbfb;
}
.read:hover,
.unread:hover {
  background-color: #fbfbfb!important;
}
.panel-primary {
  border-color: var(--primary-color);
}
.panel-primary > .panel-heading {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.panel-success {
  border-color: var(--success-color);
}
.panel-success > .panel-heading {
  background-color: var(--success-color);
  border-color: var(--success-color);
}
.panel-info {
  border-color: var(--info-color);
}
.panel-info > .panel-heading {
  background-color: var(--info-color);
  border-color: var(--info-color);
}
.panel-warning {
  border-color: var(--warning-color);
}
.panel-warning > .panel-heading {
  background-color: var(--warning-color);
  border-color: var(--warning-color);
}
.panel-danger {
  border-color: var(--danger-color);
}
.panel-danger > .panel-heading {
  background-color: var(--danger-color);
  border-color: var(--danger-color);
}
.progress-bar {
  background-color: var(--primary-color);
}
.progress-bar-success {
  background-color: var(--success-color);
}
.progress-bar-info {
  background-color: var(--info-color);
}
.progress-bar-warning {
  background-color: var(--warning-color);
}
.progress-bar-danger {
  background-color: var(--danger-color);
}
/* COLORS */
.text-navy {
  color: var(--primary-color);
}
.text-success {
  color: var(--success-color);
}
.text-info {
  color: var(--info-color);
}
.text-warning {
  color: var(--warning-color);
}
.text-danger {
  color: var(--danger-color);
}
.text-blue {
  color: var(--primary-color);
}
.text-link {
  color: var(--link-color);
}
.text-link:hover, 
.text-link:focus {
  color: var(--link-color-hover);
}
.category-list li a .text-navy {
  color: var(--primary-color);
}
.category-list li a .text-primary {
  color: var(--primary-color);
}
.category-list li a .text-info {
  color: var(--info-color);
}
.category-list li a .text-danger {
  color: var(--danger-color);
}
.category-list li a .text-warning {
  color: var(--warning-color);
}
.file-list li a:hover {
  color: var(--primary-color);
}
/* MAILBOX */
.mail-box {
  font-size: 12.5px;
}
/* FAQ */
.faq-question {
  color: var(--primary-color);
}
/* ISSUE TRACKER */
.issue-tracker .btn-link {
  color: var(--primary-color);
}
.agile-list li.success-element {
  border-left: 3px solid var(--success-color);
}
.product-name:hover,
.product-name:focus {
  color: var(--primary-color);
}
.product-price {
  background-color: var(--primary-color);
}
.vote-actions a {
  color: var(--primary-color);
}
.vote-info a:hover {
  color: var(--info-color);
}
.vote-icon.active {
  color: var(--primary-color);
}
.sk-spinner-rotating-plane.sk-spinner {
  background-color: var(--primary-color);
}
.sk-spinner-double-bounce .sk-double-bounce1,
.sk-spinner-double-bounce .sk-double-bounce2 {
  background-color: var(--primary-color);
}
.sk-spinner-wave div {
  background-color: var(--primary-color);
}
.sk-spinner-wandering-cubes .sk-cube1,
.sk-spinner-wandering-cubes .sk-cube2 {
  background-color: var(--primary-color);
}
.sk-spinner-pulse.sk-spinner {
  background-color: var(--primary-color);
}
.sk-spinner-chasing-dots .sk-dot1,
.sk-spinner-chasing-dots .sk-dot2 {
  background-color: var(--primary-color);
}
.sk-spinner-three-bounce div {
  background-color: var(--primary-color);
}
.sk-spinner-circle .sk-circle:before {
  background-color: var(--primary-color);
}
.sk-spinner-cube-grid .sk-cube {
  background-color: var(--primary-color);
}
.sk-spinner-wordpress.sk-spinner {
  background-color: var(--primary-color);
}
.sk-spinner-fading-circle .sk-circle:before {
  background-color: var(--primary-color);
}
body.landing-page {
  font-family: var(--font-family-primary, --font-family-secondary), helvetica, arial, sans-serif;
}
.landing-page span.navy {
  color: var(--primary-color);
}
.landing-page a.navy-link {
  color: var(--primary-color);
}
.landing-page .navy-line {
  border-bottom: 2px solid var(--primary-color);
}
.landing-page .navbar-default .nav li a {
  font-family: var(--font-family-primary, --font-family-secondary), helvetica, arial, sans-serif;
}
.landing-page .navbar-default .navbar-nav > .active > a,
.landing-page .navbar-default .navbar-nav > .active > a:hover {
  border-top: 6px solid var(--primary-color);
}
.landing-page .navbar-default .navbar-nav > li > a:hover,
.landing-page .navbar-default .navbar-nav > li > a:focus {
  color: var(--primary-color);
}
.landing-page .navbar-default .navbar-brand {
  background: var(--primary-color);
}
.landing-page .navbar-scroll.navbar-default .nav li a:hover {
  color: var(--primary-color);
}
.landing-page .navbar-default .navbar-nav > .active > a,
.landing-page .navbar-default .navbar-nav > .active > a:hover {
  border-top: 6px solid var(--primary-color);
}
.landing-page .features small {
  color: var(--primary-color);
}
.landing-page .features-icon {
  color: var(--primary-color);
}
.landing-page .navy-section {
  background: var(--primary-color);
}
.landing-page .social-icon a {
  background: var(--primary-color);
}
.landing-page .pricing-plan .pricing-price span {
  color: var(--primary-color);
}
.landing-page li.pricing-title {
  background: var(--primary-color);
}
.landing-page .testimonials {
  background-color: var(--primary-color);
}
.landing-page .features .big-icon {
  color: var(--primary-color) !important;
}
.landing-page .btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.landing-page .btn-primary:hover,
.landing-page .btn-primary:focus,
.landing-page .btn-primary:active,
.landing-page .btn-primary.active,
.landing-page .open .dropdown-toggle.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
@media (max-width: 768px) {
  .landing-page .navbar-default .nav li a:hover {
    color: var(--primary-color);
  }
}
.spin-icon {
  background: var(--primary-color);
}
.md-skin .nav .open > a,
.md-skin .nav .open > a:hover,
.md-skin .nav .open > a:focus {
  background: var(--primary-color);
}
.md-skin.landing-page .navbar-default .navbar-nav > li > a:hover,
.md-skin.landing-page .navbar-default .navbar-nav > li > a:focus {
  color: var(--primary-color);
}
.md-skin.top-navigation .nav > li a:hover,
.md-skin .top-navigation .nav > li a:focus,
.md-skin.top-navigation .nav .open > a,
.md-skin.top-navigation .nav .open > a:hover,
.md-skin.top-navigation .nav .open > a:focus {
  color: var(--primary-color);
}
.md-skin.top-navigation .nav > li.active a {
  color: var(--primary-color);
}
.nav-menu-custom > li > a {
  padding: 20px 8px;
}
.nav-menu-custom > li > a:hover {
  color: var(--primary-color);
  border-bottom: 3px solid var(--primary-color);
  outline: 0
}
.nav-menu-custom > .on > a {
  border-bottom: 3px solid var(--primary-color);
  color: var(--primary-color);
  height: 60px;
  outline: 0
}
/* BACKGROUNDS */
.bg-primary {
  background-color: var(--primary-color);
}
.bg-success {
  background-color: var(--success-color);
}
.lazur-bg,
.bg-info {
  background-color: var(--info-color);
}
.bg-warning {
  background-color: var(--warning-color);
}
.bg-danger {
  background-color: var(--danger-color);
}
.nav-bg,
.dark-bg {
  background-color: #1e272c !important;
}
.navy-bg,
.blue-bg {
  background-color: var(--primary-color);
}
.royalblue-sentiment-bg{
  background-color: #5274ce !important;
  color: #ffffff !important;
}

.green-sentiment-bg{
  background-color: #5cb85c !important;
  color: #ffffff !important;
}

.yellow-sentiment-bg{
  background-color: #ffc000 !important;
  color: #ffffff !important;
}

.redcoral-sentiment-bg{
  background-color: #f8734a !important;
  color: #ffffff !important;
}

.aliceblue-object-bg{
  background-color: #ebf1ff !important;
  color: #5274ce !important;
}
.light-gray {
  color: var(--primary-text-color);
}
.light-primary {
  color: #696969;
}
.light-primary-border {
  color: var(--primary-color);
  border: solid 1px var(--primary-color);
}
.light-success-border {
  color: var(--success-color);
  border: solid 1px var(--success-color);
}
.light-warning-border {
  color: var(--warning-color);
  border: solid 1px var(--warning-color);
}
.light-info-border {
  color: var(--info-color);
  border: solid 1px var(--info-color);
}
.light-danger-border {
  color: var(--danger-color);
  border: solid 1px var(--danger-color);
}
/* FONT */
.font-22{
  font-size: 22px !important;
}
.brand-logo {
  background-image: url("/img/onebox-blue.png");
}

.avatar-left{
  padding: 6px 0;
  background-color: rgba(169, 169, 169, 0.2);
  font-size: 16px;
  width: 34px;
  height: 34px;
  text-align: center;
  display: inline-block;
}

.avatar-right{
  padding: 6px 0;
  background-color: rgba(0, 188, 212, 0.2);
  font-size: 16px;
  width: 34px;
  height: 34px;
  text-align: center;
  display: inline-block;
}

.ticket-message-content{
  padding-left:15px;
  padding-right:15px;
  border-radius:25px
}

.border-chat-left {
  border-radius: 10px;
  border:1px solid whitesmoke;
  padding:5px 0px;
}

.border-chat-right {
  border-radius: 10px;
  border:1px solid #dcedf5;
  padding:5px 0px;
}

/* .border-chat-left .ibox-title,
.border-chat-right .ibox-title{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.border-chat-left .ibox-content,
.border-chat-right .ibox-content{
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
} */

.border-chat-left .ibox-title,
.border-chat-right .ibox-title,
.border-chat-left .ibox-content,
.border-chat-right .ibox-content,
.border-chat-left .ibox-footer,
.border-chat-right .ibox-footer{
  background-color: rgba(0, 0, 0, 0) !important;
}

.border-chat-left .ibox-content{
  padding:0;
  border-top:2px solid whitesmoke;
}

.border-chat-right .ibox-content{
  padding:0;
  border-top:2px solid #dcedf5;
}

.border-chat-left .ibox-content .mail-attachment{
  border-top:2px solid whitesmoke;
  padding: 10px 20px;
  font-size: 12px;
}

.border-chat-right .ibox-content .mail-attachment{
  border-top:2px solid #dcedf5;
  padding: 10px 20px;
  font-size: 12px;
}

.contact-name-case {
  padding: 5px !important;
}

.message-media-type {
  padding:1px 5px;
  border:1px solid #62676b99;
  border-radius:5px;
  font-size:10px;
  color:#62676b;
  display: inline-block;
  font-weight:normal;
  text-transform: capitalize;
}

.case-header-status {
  padding: 4px 0px;
}
.case-header-status p,
.case-header-status label,
.case-header-status span {
  font-size: 13px !important;
}

.bg-inbound{
  background-color: rgba(255, 255, 255, 0.8);
}

.bg-outbound{
  background-color: #e3f4fc;
}

.bg-note{
  background-color: #d9e4d5;
}

/* width */
.scroll-case::-webkit-scrollbar {
  width: 5px;
}
.scroll-case::-webkit-scrollbar-thumb {
    background-color: #535353;
    border-radius: 10px;
}
.scroll-case::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}
@media print {
  nav.navbar-static-side {
    display: none;
  }
  body {
    overflow: visible !important;
  }
  #page-wrapper {
    margin: 0;
  }
}

.refresh-div{
	position: absolute;
	margin-top:0px;
	width: 100%;
	height: auto;
	z-index: 99;
}

.refresh-div span{
	padding:5px;
	position: absolute;
	left:45%;
	top:5px;
	background-color:white;
	border-radius: 20px;
	box-shadow: 0 0px 7px 0 rgba(0, 0, 0, 0.4);
}

.refresh-div span label{
	margin: 0;
}

.refresh-div span i{
	color: #00BCD4;
}

.contact-case-tabs{
  display: block;
}
.sendmsgstatus{
		display: block;
}

/* WIDTH */
.width-10x{
	width: 10%;
}
.width-15x{
	width: 15%;
}
.width-20x{
	width: 20%;
}
.width-30x{
	width: 30%;
}

.show-xs {
  display: none;
}

/* // Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
	.col-xs-0 {
		display: none;
	}

  .show-xs {
    display: inline-block!important;
  }

  .refresh-div span{
    padding:5px;
    position: absolute;
    left:40%;
    top:5px;
    background-color:white;
    border-radius: 20px;
    box-shadow: 0 0px 7px 0 rgba(0, 0, 0, 0.4);
  }

  .contact-case-tabs{
    width: auto;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
  }

  .contact-case-tabs li{
    float: none !important;    
    display: inline-block;
    zoom: 1;
  }

  .sendmsgstatus{
		overflow: hidden;
	}

  /* default: flex */
  .tabs-container #pageTab {
    display: block!important;
  }
  .tabs-container #pageTab > li > a.ticket-center span{
    max-width: 100px!important;
  }
}

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
	.col-sm-0 {
		display: none;
	}

  .refresh-div span{
    padding:5px;
    position: absolute;
    left:40%;
    top:5px;
    background-color:white;
    border-radius: 20px;
    box-shadow: 0 0px 7px 0 rgba(0, 0, 0, 0.4);
  }

  .contact-case-tabs{
    width: auto;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
  }

  .contact-case-tabs li{
    float: none !important;    
    display: inline-block;
    zoom: 1;
  }

  .sendmsgstatus{
		overflow: hidden;
	}
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
	.col-md-0 {
		display: none;
	}

  .refresh-div span{
    padding:5px;
    position: absolute;
    left:40%;
    top:5px;
    background-color:white;
    border-radius: 20px;
    box-shadow: 0 0px 7px 0 rgba(0, 0, 0, 0.4);
  }
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.col-lg-0 {
		display: none;
	}
}

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.col-lg-0 {
		display: none;
	}
}
.sanitizeHtmlEmail{
  margin:0;padding:0;border:0;width:100%;height:auto;overflow:auto;
}
.sanitizeHtmlEmail html,
.sanitizeHtmlEmail body,
.sanitizeHtmlEmail div,
.sanitizeHtmlEmail dl,
.sanitizeHtmlEmail dt,
.sanitizeHtmlEmail dd,
.sanitizeHtmlEmail ul,
.sanitizeHtmlEmail ol,
.sanitizeHtmlEmail li,
.sanitizeHtmlEmail h1,
.sanitizeHtmlEmail h2,
.sanitizeHtmlEmail h3,
.sanitizeHtmlEmail h4,
.sanitizeHtmlEmail h5,
.sanitizeHtmlEmail h6,
.sanitizeHtmlEmail pre,
.sanitizeHtmlEmail form,
.sanitizeHtmlEmail fieldset,
.sanitizeHtmlEmail input,
.sanitizeHtmlEmail p,
.sanitizeHtmlEmail blockquote,
.sanitizeHtmlEmail th,
.sanitizeHtmlEmail td{
  margin:0!important;
}
.bodyChatContent{
  padding : 10px 20px;
}

.chat-container{
  padding:15px 20px;
  background-color:#e7eaec;
  height:100%;
}

/* TYPOGRAPHY */

@media (max-width: 768px){  /* xs */
  .font-size-title{
    font-size:20px!important;
  }
  .font-size-subtitle{
    font-size:18px!important;
  }
  .nav > li > a,
  .font-size-input,
  .font-size-listitem{
    font-size:16px!important;
  }
  .font-size-listtitle,
  .font-size-caption,
  .font-size-button,
  .font-size-tab,
  .font-size-importanttext{
    font-size:11px!important;
  }  
  .font-size-paragraph,
  .font-size-secondarytext{
    font-size:13px!important;
  }
  .font-size-subparagraph{
    font-size:12px!important;
  }
  .font-size-smaller{
    font-size:11px!important;
  }

  .ajax-file-upload-error{
    position: absolute;
    width: 100%;
    bottom: 45px;
    display: table;
    font-weight: lighter;
    font-size: 12px;
  }
}

@media (min-width: 769px){  /* sm */
  .message-action{
    display: none;
  }
  .message-action:hover{
    display: block;
  }

  .font-size-title{
    font-size:18px!important;
  }
  .font-size-subtitle{
    font-size:16px!important;
  }
  .font-size-input,
  .font-size-importanttext,
  .font-size-listitem{
    font-size:14px!important;
  }
  .font-size-listtitle,
  .font-size-caption,
  .font-size-secondarytext,
  .font-size-button,
  .font-size-tab,
  .font-size-paragraph{
    font-size:13px!important;
  }
  .font-size-subparagraph{
    font-size:12px!important;
  }
  .font-size-smaller{
    font-size:11px!important;
  }

  .ajax-file-upload-error{
    font-weight: lighter;
    font-size: 12px;
  }
}

.font-size-button,
.font-size-tab,
.font-size-importanttext,
.font-size-listtitle{
  font-weight: 600; /* medium */
}
.font-size-caption, 
.font-size-subparagraph,
.font-size-smaller,
.lighter,
.font-size-secondarytext{
  font-weight: lighter;
}
@media (max-width: 600px){
  .chatheader{
    height:50px;
  }
  .assigne-fullcase{
    padding-left:44px;
  }
  .notif-mobile{
    margin-right: 0px;
		margin-top: 0px;
    left:-175px!important;
  }
}

/* TYPOGRAPHY */

/* HEADER */

@media (max-width: 768px){ /* xs */
  #search-bar{
    display:none;
  }
  #search-bar-min{
    display: inline-block;
  }
}

@media (min-width: 769px){  /* sm */
  #search-bar-min{
    display:none;
  }
  #search-bar{
    display: inline-block;
  }
}

/* HEADER */
/* adjust bottom inbox potrait view fix slimscroll */
.some-content-related-div{
      height: 500px;
}
@media (min-height: 768px) and (max-height: 1000px){
  .some-content-related-div{
    min-height: 630px;
  }
}
@media (min-height: 700px) and (max-height: 768px){
  .some-content-related-div{
    min-height: 550px;
  }
}
/* adjust bottom inbox div potrait view fix slimscroll */


/*start: ticket detail */
.modal-lg{
  width : 80%;
}

.mail-text{
	min-height:170px!important;
}
/* FONT SIZE */
.font-size-10{
  font-size: 10px;
}
.font-size-11{
  font-size: 11px;
}
.font-size-12{
  font-size: 12px;
}
.font-size-13{
  font-size: 13px;
}
.font-size-14{
  font-size: 14px;
}
.font-size-15{
  font-size: 15px;
}
.font-size-16{
  font-size: 16px;
}
.font-size-17{
  font-size: 17px;
}
.font-size-18{
  font-size: 18px;
}
.font-size-19{
  font-size: 19px;
}
.font-size-20{
  font-size: 20px;
}

.btn-floating{
	/* border-top:5px solid #e7eaec; */
  background-color: #F9F8F8;
  padding: 15px;
}
.list-file-upload > a {
  display : inline-block !important;
}
.delete-file-upload {
  margin: 4px;
  padding: 0px 5px;
  background: #ff5555;
  color: white;
  border-radius: 3px;
  text-align: center;
}
.list-file.dropdown-menu>li>a {
  padding:3px 5px;
}


@media (max-width: 375px)
{
  .img-prospect{
    width: 20vh;
    height: 20vh;
    margin: auto;
    padding: auto;
  }

  .modal-wide .modal-dialog{
    width: 100%;
  }
}

@media (min-width: 376px) and (max-width: 575.98px)
{
  .img-prospect{
    width: 20vh;
    height: 20vh;
    margin: auto;
    padding: auto;
  }

  .modal-wide .modal-dialog{
    width: 100%;
  }
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px)
{
  .img-prospect{
    width: 20vh;
    height: 20vh;
    margin: auto;
    padding: auto;
  }
  .modal-wide .modal-dialog{
    width: 100%;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px)
{
  .modal .modal-dialog{
    /* width: 80%; or whatever you wish */
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px)
{
  .modal .modal-dialog{
    /* width: 80%; or whatever you wish */
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px)
{
  .modal .modal-dialog{
    /* width: 80%; or whatever you wish */
  }
}
@media only screen and (max-width: 768px) {
	/* xs - smartphone */
  .btn-floating {
   /*  position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		background-color: #fff; */
		padding: 10px;
  }
	.p-l-xs-xs{
		padding-left:5px;
	}
	.p-l-xs-sm{
		padding-left:10px;
	}
	.p-l-xs-md{
		padding-left:15px;
	}
	.p-l-xs-lg{
		padding-left:20px;
	}
	.p-r-xs-xs{
		padding-right:5px;
	}
	.p-r-xs-sm{
		padding-right:10px;
	}
	.p-r-xs-md{
		padding-right:15px;
	}
	.p-r-xs-lg{
		padding-right:20px;
	}
	.space-bottom{
		padding-bottom: 80px;
	}
}

.select2-container{
  width:100%!important
}
.p-sm-input{
  padding:0 3px 5px 3px
}

.panel-body .header-info {
  border-bottom:1px solid #e7eaec;
  padding: 15px 10px 10px 10px;
}

.panel-body .header-info h1 {
  font-size:16px;
  font-weight:500;
  width:100%;
  margin-top:0;
}

.ticket-detail .tabs-right .panel-body {
  width: calc(100% - 40px);
  margin-right: 40px;
}
.ticket-detail .tabs-right > .nav-tabs {
  width: 40px;
  margin: 0;
  padding: 0;
}
.ticket-detail .tabs-right > .nav-tabs li {
  padding-top: 5px;
  padding-bottom: 5px;
}
.ticket-detail .tabs-right .row {
  display:flex;
  flex-wrap:wrap;
}
/* show hide sidebar tab */
.col-xs-12.layout {
  width: calc(100% - 50px);
}
.col-xs-1.layout {
  width: auto;
}
/* form */
.form-control {
  border-radius: 5px;
  padding: 3px 8px;
  font-size:13px;
}
label{
  font-weight: 500;
  font-size: 12px;
}
/* .select2-results__options li.select2-results__option:first-child, */
/* [contenteditable=true]:empty:not(:focus):before, */
input::placeholder, textarea::placeholder {
  font-size:13px;
  color:#999;
}
textarea::placeholder {
  padding:0;
  margin:0
}
.select2-selection__choice__remove { 
    float: right; /* moved close ico nto right side */
    margin-left: 5px
}
.bootstrap-tagsinput {
  padding: 0 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 0 8px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.bootstrap-tagsinput .tag {
  background-color: #F3F3F4;
  color: #444;
  white-space: pre-wrap;
  text-align:left;
}
.bootstrap-tagsinput .tag {
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: default;
  float: left;
  margin-right: 5px;
  margin-top: 5px;
  padding: 0 5px;
  font-size:13px;
  font-weight:400;
  padding: 3px 5px;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
  margin-left: 4px;
  color: #999;
  font-weight: bold;
  float:right;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
  content:"×"
}
.bootstrap-tagsinput input {
  padding: 3px;
}
.bootstrap-tagsinput input::placeholder {
  font-size:13px;
  color:#999;
}
/* summernote */
.note-editor .note-editable {
  min-height: 70px;
}
.note-resizebar {
  background: #e7eaec;
}
/* [contenteditable=true]:empty:not(:focus):before {
  content: "Fill text here..."
} */

.drop-kanan>li>a{
      padding: 10px 20px;
}
.drop-kanan{
  float: right;
  right: 0;
  left: auto;
  margin-right: 50px;
  margin-top: 10px;
}

/*end: ticket detail */

/** start:daterangepicker */
.daterangepicker .ranges li {
  color: var(--primary-color);
}
.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
  background-color: var(--primary-color-hover);
  border-color: var(--primary-color-hover);
  color: #fff;
}
.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: var(--primary-color-hover);
  border-color: var(--primary-color-hover);
  color: #fff;
}
/** end:daterangepicker */

@media print {
  nav.navbar-static-side {
    display: none;
  }
  body {
    overflow: visible !important;
  }
  #page-wrapper {
    margin: 0;
  }
}

.swal-custom{
  height: 8vh;
  font-size: 15px !important;
}

/* BORDER RADIUS */
.br-10{
	border-radius: 10px;
}
.br-20{
	border-radius: 20px;
}
.br-30{
	border-radius: 30px;
}
.br-40{
	border-radius: 40px;
}
.br-50{
	border-radius: 50px;
}

.p-b-none-custom2{
  padding-bottom: 0;
}
/*------------------------------------------------------------------
[ Responsive Contact Us]*/

.contact-padding-bottom{
  padding-bottom: 0 !important;
}

.contact-padding-top{
  padding-top: 30px !important;
}

@media (max-width: 1200px) {
  .contact-pic {
    width: 33.5%;
  }

  .contact-form {
    width: 44%;
  }

  .contact-padding-bottom{
    padding-bottom: 0 !important;
  }

  .contact-padding-top{
    padding-top: 30px !important;
  }
}

@media (max-width: 992px) {
  .container-contact1 {
    padding: 90px 80px 88px 90px;
  }

  .contact-pic {
    width: 35%;
  }

  .contact-form {
    width: 55%;
  }

  .contact-padding-bottom{
    padding-bottom: 0 !important;
  }

  .contact-padding-top{
    padding-top: 30px !important;
  }
}

@media (max-width: 768px) {
  .container-contact {
    padding: 90px 80px 88px 80px;
  }

  .contact-pic {
    display: none;
  }

  .contact-form {
    width: 100%;
  }

  .contact-padding-bottom{
    padding-bottom: 15px !important;
  }

  .contact-padding-top{
    padding-top: 0 !important;
  }
}

@media (max-width: 576px) {
  .container-contact {
    padding: 90px 15px 88px 15px;
  }
}

/*------------------------------------------------------------------
[ Responsive Sign In]*/

.nav-sign-in {
  display: none;
}

@media (max-width: 768px) {
  .nav-sign-in {
    display: inline-block;
    color: #888888;
    font-size: 23px;
    padding: 8px 10px;
    background-color: #ffffff;
    border: none;
    position: relative;
    float: right;
    background-image: none;
    border-radius: 4px;
  }
  .custom-p-t-5 {
    padding-top: 5px !important;
  }
}

@media (max-width: 576px) {
  .nav-sign-in {
    display: inline-block;
    color: #888888;
    font-size: 23px;
    margin: 8px 0px;
    padding: 0px 10px;
    background-color: #ffffff;
    border: none;
    position: relative;
    float: right;
    background-image: none;
    border-radius: 4px;
  }
  .custom-p-t-5 {
    padding-top: 5px !important;
  }
}

.btn-oicon {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
  align-content: center;
}

/* new style login */
.lgn-body {
  
  background: #fff;
}
.lgn-form {
    
    background: #fff;
    width: 400px;
    border-radius: 6px;
    margin: 0 auto;
    display: table;
    /* padding: 15px 30px 30px; */
    padding: 0px 70px 9px;
    box-sizing:inherit;
}

.lgn-input-section {
  margin-bottom: 5px;
}

.lgn-toggle-password {
  float: right;position: absolute;z-index:3;top:10px;right:15px;cursor:pointer
}
.lgn-form .lgn-social-icon {
    width: 100%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    float: left;
  
}

.lgn-form-group {
  float: left;
  width: 100%;
  margin: 0 0 15px;
  position: relative;
}
.lgn-form input[type="email"], .lgn-form input[type="password"],  .lgn-form input[type="text"] {
    width: 100%;
    padding: 10px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 12px;
    padding-left: 50px;
}

.lgn-form select {
    width: 100%;
    padding: 8px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 12px;
    
    
}
.lgn-form input:focus{
    border-color: red;
}


.lgn-form .lgn-form-group .input-icon-lgn {
  float: left;position: absolute;z-index:3;top:10px;left:15px;  
  width: 15px;
  /* width: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    position: absolute;
    border-radius: 25px;
    bottom: 0;
    height: 100%;
    padding-left: 20px;
    color: #666; */
}
.lgn-form .lgn-btn {

  /* padding: 11px 10px; */
  color: #fff;
  text-align: center;
  margin: 0 auto;
  font-size: 14px;
  border-radius: 10px;
  width:100%;
  height: 36px;
  cursor: pointer;
  align-items: center;
  
}
.lgn-form .lgn-reset-psw {
  float: left;
  width: 100%;
  text-decoration: none;
  font-size: 12px;
  text-align: left;
  margin-top: 5px;
}

.lgn-form .lgn-font-bottom {
  float: left;
  width: 100%;
  text-decoration: none;
  color: #090909;
  font-size: 12px;
  text-align: left;

}


.lgn-form .seperator {
  float: left;
  width: 100%;
  border-top: 2px solid #ccc;
  text-align: center;
  margin: 25px 0 -20px;
}
.lgn-form .lgn-seperator span {
  width: 60px;
  height: 40px;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  background: #fff;
  display: inline-block;
  position: relative;
  top: -22px;
  z-index: 1;
}



.lgn-form .lgn-social-icon button {
    font-size: 20px;
    color: white;
    height: 50px;
    width: 50px;
    background: #1017e3;
    border-radius: 60%;
    margin: 0px 5px;
    border: none;
    cursor: pointer;
}
/* .lgn-form button:hover{
  opacity: 0.9;
} */

.lgn-form .lgn-section-bottom{
  width: 100%;
  float:left;
}

.lgn-form .lgn-font-bottom a {

font-size: 12px;
}


.lgn-form p {
  float: left;
  width: 100%;
  text-align: center;
  font-size: 16px;
  margin: 0 0 10px;
}
@media screen and (max-width:767px) {
.lgn-form {
    width: 90%;
    padding: 15px 15px 30px;
}
}
.lgn-imgcontainer {
  text-align: center;
  margin-top: 35%;
}

.lgn-imgcontainer img{
  width: 260px;
}


/* Avatar image */
img.lgn-avatar {
  vertical-align: middle;
    width: 100%;
    height: 100%;
  /* border-radius: 50%;   */
}
/*  CSS Social Media */

.lgn-smGlobalBtn{ /* global button class */

    margin: 5px;
    display: inline-block;
    position: static;
    cursor: pointer;
    width: 30px;
    height: 30px;
    box-shadow: 0 2px 2px #999;
    padding: 0px;
    text-decoration: none;
    text-align: center;
    font-size: 17px;
    font-weight: lighter;
    line-height: 2em;
    border-radius: 25px;
    -moz-border-radius:25px;
    -webkit-border-radius:25px;
    

}

/* facebook button class*/
.lgn-facebookBtn{
    color: white;
    background: #4060A5;
}

.lgn-facebookBtn:before{ /* use :before to add the relevant icons */
    font-family: "FontAwesome";
    content: "\f09a"; /* add facebook icon */
}

.lgn-facebookBtn:hover{
    /* color: #4060A5; */
    color: white;
    background: #4876b7;
    /* background: #fff; */
}

/* twitter button class*/
.lgn-twitterBtn{
    color: #fff;
    background: #00ABE3;
}

.lgn-twitterBtn:before{
      font-family: "FontAwesome";
      content: "\f099"; /* add twitter icon */
}

.lgn-twitterBtn:hover{
      color: #fff;
      background: #49aecf;
}

/* google plus button class*/

.lgn-googleBtn:before{
      font-family: "FontAwesome";
      content: "\f1a0"; /* add googleplus icon */
}

.lgn-bgGoogle{
  background: white;
}

.lgn-bgGoogle:hover{
  background: #f1eded;
}
.lgn-googleBtn  {
  background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.lgn-msg-error .alert {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 12px;
}

.lgn-msg-error .alert-dismissable .close, .alert-dismissible .close {
    position: relative;
  
    right: 0px;
    color: inherit;
}
.lgn-msg-error .lgn-form .lgn-copyright{
  width: 100%;
  float:left;
}

.lgn-msg-error .closeSuccess {
  position: relative;
  margin-top: -3%;
  right: 0px;
  color: inherit;
}

/* LOGIN V2: merged */
.orange-line {
  width: 60px;
  height: 1px;
  margin: 60px auto 0;
  margin-top: 0px !important;
  border-bottom: 2px solid #F79622;
}
.orange-color {
  color: #F79622;
}
.red-color {
  color: red !important;
}
.footer-p{
  margin:0;
  font-size: smaller;
}
.footer-p>img{
  width: 25px;
  padding-bottom: 3px;
}
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: black;
  color: white;
  text-align: left;
}
.alert-forgotpassword {
  text-align: end;
  margin-left: 5px;
  margin-right: 5px;
  z-index: 100000;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.flex-grow-1 {
  flex-grow: 1;
}
.text-start {
  text-align: start;
}
.text-end {
  text-align: end;
}
.nav-bg, .dark-bg {
  background: var(--background-login) no-repeat center center fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.default-white {
  background-color:#FFFFFF !Important
}
.fw-700 {
  font-weight: 700 !important;
}
.fw-500 {
  font-weight: 500 !important;
}
.primary-color{
  color:#5274ce;
}
.primary-bg {
  background-color:#5274ce !important;
}
.submit-btn {
  border-radius: 20px !important;
  border:1px solid #5274ce !important;
}
.submit-btn>span {
  margin: 3px;
  color:white;
  padding: 2px;
}

.input-icon {
  background-color: #5274ce;
  border: 1px solid #5274ce;
}
.input-icon>span {
  margin: 3px;
  color:white;
  padding: 2px;
}
.input-field {
  height:50px;
  border:1px solid #5274ce;
}

.toggle-password {
  float: right;
  position: absolute;
  z-index:3;
  top:17px;
  right:15px;
}

.toggle-password-v1 {
  float: right;
  position: absolute;
  z-index:3;
  top:10px;
  right:15px;
  cursor:pointer
}

.black-color {
  color: black;
}
.w-50-px{
  width: 50px;
}
.w-100-px{
  width: 100px;
}


#accent-span {
  border-bottom: 1px solid #F79622;
}
.row-input{
  margin-left:5px !important;
  margin-right:5px !important;    
}
.max-height-150px {
  max-height: 150px;
}
.max-height-70px {
  max-height: 70px;
}
.margin-100px {
  margin-top:100px;
}
.w-260-px{
  width: 260px !important;
}
.p-b-t-15-px {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}
.color-env {
  color:#FFFFFF;
}
.m-t-inherit {
  margin-top:inherit !important;
}
.m-r-none {
  margin-right:0 !important;
}
.m-r-xxs {
  margin-right:2px !important;
}
.m-r-sm {
  margin-right:10px !important;
}
.m-l-r-5-px {
  margin-left:5px !important;
  margin-right:5px !important;
}
.m-b-xxs {
 margin-bottom:2px;
}
.h-35-px {
  height:35px !important;
}
.btn-forgot-password {
  font-size:12px;
}

.font-size-13-px {
  font-size: 13px;
} 
.p-t-50-px{
  padding-top:50px;
}
#emailError {
  margin-bottom:5px;
  padding-left:12px;
}

.site-lgn-color {
  color: var(--primary-color);
}

.btn-lgn-color {
  background-color: var(--primary-color);
}

.btn-lgn-color:hover {
  filter: brightness(85%);
}

/* FONT: onecloud oicon */
.oicon {
  display: inline-block;
  margin-right:4px;
  margin-top: -3px;
  vertical-align:middle;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  font-size: inherit;
  text-transform: none;
  text-rendering: auto;
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  line-height: 1;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --icon-primary-color: inherit;
  --icon-secondary-color:inherit;
}
.oicon svg {
  vertical-align:top;
  overflow: hidden;
  pointer-events: none;
  width: 100%;
  height: 100%;
  color: var(--icon-primary-color); /* ambil dari var span */
   /*fill: var(--icon-secondary-color); */ /* ambil dari var span */
}
.oicon.va-base {
  vertical-align:baseline;
}
.oicon.s10{
  width: 10px; 
  height: 10px;
}
.oicon.s11{
  width: 11px; 
  height: 11px;
}
.oicon.s12{
  width: 12px; 
  height: 12px;
}
.oicon.s13{
  width: 13px; 
  height: 13px;
}
.oicon.s14{
  width: 14px; 
  height: 14px;
}
.oicon.s15{
  width: 15px; 
  height: 15px;
}
.oicon.s16{
  width: 16px; 
  height: 16px;
}
.oicon.s20{
  width: 20px; 
  height: 20px;
}
.oicon.s22{
  width: 22px;
  height: 22px;
}
.oicon.s35{
  width:35px;
  height:35px;
}
.oicon.s40{
  width:40px;
  height:40px;
}
.oicon-input{
  float: left;
  position: absolute;
  top: 28px;
  left: 13px;
  color: #999c9e;
}

.contact-case-tabs li a,
.input-group-addon {
  padding: 5px 7px!important;
}

.timeline-item .date i {
  padding: 1px 0!important;
}
/* FONT: onecloud oicon. END */

/* Case list. */
.cursor-progress{
  cursor:progress;
}
.p-absolute {
  position: absolute;
}

.b-0 {
  border: none !important;
}

.p-0 {
  padding: 0 !important;
}

.m-0 {
  margin: 0 !important;
}

.font-weight-normal {
  font-weight: normal !important;
}

.box-shadow {
  box-shadow: 0px 5px 9px 0px silver;
  padding:0 15px 0 15px;
}

.text-wrapper-custom {
  word-wrap: break-word;
  vertical-align: middle;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.body-text {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;  
  overflow: hidden !important;
  white-space: initial;
}

.b-none {
  border: none !important;
}

.p-box {
  padding: 0.8em 1.2em !important;
}

.submit-btn.text-white{
  color: #ffffff;
}

.font-weight-normal {
  font-weight: normal;
}

.range_inputs>button {
  width: 48%;
}

.translateY-min128 {
  transform: translateY(-128%);
}

.translateY-min116 {
  transform: translateY(-116%);
}

.applyBtn {
  float: left;
}

.cancelBtn {
  float: right;
}

.daterangepicker.dropdown-menu.opensright.show-calendar {
  left: auto !important;
  right: 37px !important;
}

.d-flex {
  display: flex;
}
.d-flex-h {
  display: flex;
  overflow: hidden;
}

.flex-row{
  display: flex;
  flex-wrap: wrap;
}

.flex-end{
  align-items: flex-end;
  justify-content: flex-end;
}

.flex-start{
  align-items: flex-end;
  justify-content: flex-start;
}

.flex-direction-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.align-items-start {
  align-items : start;
}

.flex-center,
.flex-align-center, 
.align-items-center {
  align-items : center;
}

.caption-info-ft {
  font-size: 0.9em;
  font-weight: normal;
}

.s9 {
  width: 9px;
  height: 12px;
}

.status-info {
  max-width: max-content;
    min-width: min-content;
}

.caption-req-acc {
  max-width: max-content;
}

.min-width-min-content {
    min-width: min-content !important;
}

.min-width-100px {
  min-width: 100px !important;
}

@media (max-width: 768px) { 
  .search-from-bot {
    padding-top : 20px;
  }
}
@media (min-width: 768px) and (max-width: 991px) { 
  .search-from-bot {
    padding-top : 20px;
  }

  div.advfilter{
    top: 6.4vh !important;
  }

  .wrapper-info-rad {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
@media (min-width: 992px) and (max-width: 1199px) { 
  .search-from-bot {
    padding-top : 0px !important;
  }
  .wrapper-info-rad {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
@media (min-width: 1200px) { 
  .search-from-bot {
    padding-top : 0px !important;
  }
  .wrapper-info-rad {
    flex-direction: row;
  }
}
/* Case list. END */

.highcharts-drilldown-axis-label {
  color: #666 !important;
  fill: #666 !important;
  cursor: pointer !important;
  font-size: 11px !important;
  font-weight: normal !important;
  text-decoration: none !important;
}
.highcharts-drilldown-data-label text {
  cursor: pointer !important;
  font-size: 11px !important;
  font-weight: bold !important;
  text-decoration: none !important;
  color: #0598ab !important;
  fill: #0598ab !important;
}
.highcharts-data-label text {
  cursor: pointer !important;
  font-size: 11px !important;
  font-weight: bold !important;
  text-decoration: none !important;
  /* color: #666 !important; */

  /* fill: #666 !important; */

}

/* membuat table header freeze */
div.sticky {
  position: sticky;
  top: 0;
  z-index:1013;
}
div.sticky-advfilter {
  position: absolute!important;
  top: 100%!important;
}
.table-sticky-header {
  width: 100%;
  border-collapse: separate;
}

.table-sticky-header > thead {
  position: sticky;
  top: 40px;
  z-index: 1012;
  height: 45px;
}

.table-sticky-header > thead > tr > th {
  vertical-align: middle!important;
}
.table-sticky-header > tbody > tr:first-child > td {
  border: none;
}

.table-sticky-header.dataTable thead .sorting:after {
  bottom: 16px;
}

.tooltip-inner{
  max-width: none;
  white-space: nowrap;
}

.checkbox input[type=checkbox]{
  margin-top: 2px;
  margin-left: -18px;
}

.modal-ok-wide .modal-dialog {
  width: 80%; /* or whatever you wish */
}

.modified-select {
  position: relative;
  display: inline-block;
  /*	margin-bottom: 15px; */
  width: 100%;
}
.modified-select select {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  padding: 6px 10px;
  outline: 0;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  border: 1px solid #CCC;
  color: #7b7b7b;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.modified-select select::-ms-expand {
  display: none;
}
.modified-select select:hover,
.modified-select select:focus {
  color: #000;
  background: #ffffff;
}
.modified-select select:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.select__arrow {
  position: absolute;
  top: 14px;
  right: 15px;
  width: 0;
  height: 0;
  pointer-events: none;
  border-style: solid;
  /* border-width: 8px 5px 0 5px; */
  border-color: #7b7b7b transparent transparent transparent;
}
.modified-select select:hover ~ .select__arrow,
.modified-select select:focus ~ .select__arrow {
  border-top-color: #000;
}
.modified-select select:disabled ~ .select__arrow {
  border-top-color: #ccc;
}

/* margin untuk menampilkan logo footer agar menu tidak terpotong */
#side-menu{
  margin-bottom: 55px;
}

.nav-menu-custom > .on > a {
  border-bottom: 3px solid #1bbbdb;
  color: #1bbbdb;
  font-weight: 600;
  height: 60px;
  outline: 0;
}

.nav-menu-custom > li > a,
.nav.navbar-right > li > a {
  color: #999c9e;
}

/* 
.nav.navbar-right > li > a {
  padding-left:5px;
  padding-right:5px;
}
*/

.fa-lg {
  vertical-align:bottom;
}

.navbar-form-custom{
  width: 220px;
  margin: auto 10px;
  height: auto;
}

.navbar-form-custom .form-control {
  background: #fbfbfb;
  margin: 16px auto auto auto;
  /* border-radius: 0.65rem;
  border: solid 1px #fff; */
  height: auto;
  line-height: 1.8;
  color: #999c9e;
  padding-left: 35px;
}

.navbar-form-custom .form-control::placeholder {
  color: #BBB;
}

/* minimize modal */
.minmaxCon .min {
  width: 250px;
  height: 40px;
  overflow: hidden !important;
  padding: 0px !important;
  margin: 0px;
  float: left;
  position: static !important;
}

.minmaxCon .min .modal-dialog, .min .modal-content {
  height: 100%;
  width: 100%;
  margin: 0px !important;
  padding: 0px !important;
}

.minmaxCon .min .modal-body {
  padding: 10px !important;
}

.display-none { display: none; }

.modalMinimize .fa {
  font-size: 16px;
  margin-left: 10px;
}

.minmaxCon {
  height: 45px;
  bottom: 1px;
  right: 0;
  position: fixed;
  right: 1px;
  z-index: 1;
}
/* minimize modal */

.select2-container .select2-selection--single {
  height:30px
}

.input-group-addon,
.select2-container--default .select2-selection--single  {
  border-radius:5px
}

/* recaptcha login */
.recaptcha-login {
  width: 100%;
}
.recaptcha-login iframe {
  margin: auto
}
.rounded{
  border-radius: var(--border-radius, 8px)
}

.count-info .label {
  left: 10px;
  top: 14px;
  right: auto;
}

.widget.style2{
  border-radius: var(--border-radius, 8px);
}
.widget.style2 .oicon{
  margin: 10px auto;
}
.widget.style2 h2{
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -1px!important;
  line-height: 1!important;
}

.tabs-container {
  padding-top: 0;
}
.tabs-container #pageTab {
  padding-top: 0;
  margin-right:0;
}
.tabs-container #pageTab {
  padding: 5px 10px 0 10px;
  background: #fbfbfb !important;
  display: block; /* flex */
  box-sizing: border-box;
  white-space: nowrap;
}
.tabs-container #pageTab > li.active > a {
  border-radius: var(--border-radius, 8px) var(--border-radius, 8px) 0 0;
  font-weight: 600;
}
.tabs-container #pageTab > li > a {
  font-weight: normal;
  padding: 5px;
  margin-right:0;
  display: flex;
  box-sizing: border-box;
}
.tabs-container #pageTab > li > a > span {
  margin:0 5px;
}

.tabs-container #pageTab > li > a.ticket-center {
  max-width: 144px;
  padding-bottom:1px !important;
}

.tabs-container #pageTab > li > a.ticket-center span{
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  /* text-overflow: ellipsis; diganti gradient*/
  max-width: var(--max-width-tab);
  min-width: 15px;
}
.tabs-container #pageTab > li.active > a.ticket-center span.gradient::before {
  content: "";
  position: absolute;
  top: 0;
  right: 24px;
  width: 17px; /* Lebar gradien, sesuaikan sesuai kebutuhan */
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
.tabs-container #pageTab > li > a.ticket-center span.gradient::before {
  content: "";
  position: absolute;
  top: 0;
  right: 24px;
  width: 17px; /* Lebar gradien, sesuaikan sesuai kebutuhan */
  height: 100%;
  background: linear-gradient(to right,rgba(255, 255, 255, 0), #fbfbfb);
}

.tabs-container #pageTab > li > a.ticket-center button{
  display: inline-block;
}

.close .oicon {
  margin-bottom: 2px!important;
  margin-right: 0;
}

/* display grid start */
.d-grid{
  display: grid;
}
/* header case detail  */
.container-head {
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 	
    'icon title action'
    'icon subtitle action' 
    'icon action-mobile action-mobile';
  padding: 0 15px;
  grid-row-gap: 5px;
}
.container-head .icon {
  grid-area: icon;
}
.container-head .title {
  grid-area: title;
}
.container-head .subtitle {
  grid-area: subtitle;
}
.container-head .action {
  grid-area: action;
}
.container-head .action-mobile {
  grid-area: action-mobile;
}

/* case detail: position responsive */
@media (max-width: 575.98px) {
  .container-head{
    padding: 0;
  }
  .container-head .action {
    grid-area: action-mobile;
  }
  .container-head .action-mobile {
    grid-area: action;
  }
}
/* case detail: position responsive */

/* display grid end */

/* start media player */
.audio-player {
  width: 100%;
  height: 24px;
  vertical-align: middle;
}
/* end media player */