:root {
  --font-family-primary: "Inter";
  --font-family-secondary: "Open Sans";
  --primary-color : #1bbbdb;
  --success-color : #50cd89;
  --info-color : #7239ea;
  --warning-color : #ffc700;
  --danger-color : #f1416c;
  --gray-color : #00000032;
  --primary-color-hover : #11b1d1;
  --success-color-hover : #46c37f;
  --info-color-hover : #682fe0;
  --soft-gray-color : #f3f3f4;
  --light-gray-color : #fbfbfb;
  --warning-color-hover : #f5bd00;
  --danger-color-hover : #e73762;
  --facebook-color : rgb(26, 119, 242);
  --link-color : #337ab7;
  --background-inbound : rgba(255, 255, 255, 0.8);
  --background-outbound : #e3f4fc;
  --background-note : #d9e4d5;
  --link-color-hover : #014885;
  --hover-brightness : 0.95;
  --background-login : #1e272c;
  --header-logo : url("/img/logooneboxwhiteorange.png");
  --brand-logo : url("/img/onebox-blue.png");
  --border-radius : 8px;
  --btn-border-radius : 5px;
  --primary-text-color : #555;
  --max-width-tab : 100px;
  --link-col : #ffffff;
  --link-col-border : #e7eaec;
  --background-header : #1bbbdb;
  --red-dot-notification : #dc3545;

}

/*
 *
 *   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: #1bbbdb;
}

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

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: var(--primary-color);
  background-color: #fff;
}
.btn-primary.btn-outline[disabled], .btn-primary.btn-outline:focus, .btn-primary.btn-outline:active {
  color: white;
}
.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;
}
label.required::after,
label[required]:after {
  content: '*';
  color: red;
  margin-left: 3px;
}
/* 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);
  font-weight: 600;
  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-gray-bg {
  background: var(--light-gray-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: var(--background-inbound);
}

.bg-outbound{
  background-color: var(--background-outbound);
}

.bg-note{
  background-color: var(--background-note);
}

/* 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;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #c4c4c4;
  /* Warna thumb */
  border-radius: 10px;
  border: 3px solid transparent;
  /* Memberi efek padding */
  background-clip: padding-box;
  /* Membuat efek padding lebih jelas */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #b0b0b0;
  /* Warna thumb saat di-hover */
}

::-webkit-scrollbar-track {
  background-color: transparent;
  /* Track scrollbar tetap transparan */
}

::-webkit-scrollbar-track:hover {
  background-color: transparent;
  /* Track scrollbar tetap transparan saat di-hover */
}

@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;
}
.font-size-x-small {
  font-size: x-small;
}
@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 roll */
.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 */
.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: 10px 15px;
  border: 1px solid #e7eaec;
  border-top: 0;
}
.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;
	}

  .modal-lg{
    width : 80%;
  }
}

.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;
}
.nav-tabs > li > a {
  border-radius: var(--border-radius, 8px) var(--border-radius, 8px) 0 0;
  font-weight: 600;
  padding: 10px;
}

.tabs-container .nav-tabs.nav-border > li > a {
  border:none;
  border-bottom: 2px solid transparent;
}
.tabs-container .nav-tabs.nav-border > li.active > a {
  background:transparent;
  border:none;
  border-bottom: 3px solid var(--primary-color);
}

/* 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;
}
.border-default .select2-container--default .select2-selection--single {
	border-radius: var(--btn-border-radius, 3px)!important;
    border-color: #e7eaec!important;
}
.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-airframe.fullscreen,.note-editor.note-frame.fullscreen {
  z-index: 10000 !important;
}
.container-summernote {
  border-top: 1px solid #e7eaec;
}
.container-summernote.chat {
  background-color: #F9F8F8;
  padding: 10px 10px 0 10px;
}
.container-summernote.chat > .note-editor{
  background-color: #fff;
  border: 1px solid #e7eaec;
  border-radius: 12px;
}
.container-summernote.chat.note-bg > .note-editor{
  background-color: #D9EAD3;
}
.container-summernote.chat > .note-editor .note-toolbar {
  border-radius: 12px 12px 0 0;
}
.container-summernote.chat > .note-editor .note-resizebar{
  display: none;
  border-radius: 0 0 12px 12px;
}
.container-summernote.chat > .note-editor .note-editable{
  height: 80px!important;
}
.container-summernote.chat > .note-editor .note-editable[contenteditable="false"]{
  border-radius: 10px;
}

.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;
}

/* MARGINS & PADDINGS */
.p-xxs {
  padding: 5px;
}
.p-xs {
  padding: 10px;
}
.p-sm {
  padding: 15px;
}
.p-m {
  padding: 20px;
}
.p-md {
  padding: 25px;
}
.p-lg {
  padding: 30px;
}
.p-xl {
  padding: 40px;
}
.p-w-xs {
  padding: 0 10px;
}
.p-w-sm {
  padding: 0 15px;
}
.p-w-m {
  padding: 0 20px;
}
.p-w-md {
  padding: 0 25px;
}
.p-w-lg {
  padding: 0 30px;
}
.p-w-xl {
  padding: 0 40px;
}
.p-h-xs {
  padding: 10px 0;
}
.p-h-sm {
  padding: 15px 0;
}
.p-h-m {
  padding: 20px 0;
}
.p-h-md {
  padding: 25px 0;
}
.p-h-lg {
  padding: 30px 0;
}
.p-h-xl {
  padding: 40px 0;
}
.p-sxxs {
  padding: 3px;
}
.p-l-none {
  padding-left: 0;
}
.p-l-xs {
  padding-left: 5px;
}
.p-l-sm {
  padding-left: 10px;
}
.p-l {
  padding-left: 15px;
}
.p-l-md {
  padding-left: 20px;
}
.p-l-lg {
  padding-left: 30px;
}
.p-l-xl {
  padding-left: 40px;
}
.p-l-n-xxs {
  padding-left: -1px;
}
.p-l-n-xs {
  padding-left: -5px;
}
.p-l-n-sm {
  padding-left: -10px;
}
.p-l-n {
  padding-left: -15px;
}
.p-l-n-md {
  padding-left: -20px;
}
.p-l-n-lg {
  padding-left: -30px;
}
.p-l-n-xl {
  padding-left: -40px;
}
.p-t-none {
  padding-top: 0;
}
.p-t-xxs {
  padding-top: 1px;
}
.p-t-xs {
  padding-top: 5px;
}
.p-t-sm {
  padding-top: 10px;
}
.p-t {
  padding-top: 15px;
}
.p-t-md {
  padding-top: 20px;
}
.p-t-lg {
  padding-top: 30px;
}
.p-t-xl {
  padding-top: 40px;
}
.p-t-n-xxs {
  padding-top: -1px;
}
.p-t-n-xs {
  padding-top: -5px;
}
.p-t-n-sm {
  padding-top: -10px;
}
.p-t-n {
  padding-top: -15px;
}
.p-t-n-md {
  padding-top: -20px;
}
.p-t-n-lg {
  padding-top: -30px;
}
.p-t-n-xl {
  padding-top: -40px;
}
.p-r-none {
  padding-right: 0;
}
.p-r-xxs {
  padding-right: 1px;
}
.p-r-xs {
  padding-right: 5px;
}
.p-r-sm {
  padding-right: 10px;
}
.p-r {
  padding-right: 15px;
}
.p-r-md {
  padding-right: 20px;
}
.p-r-lg {
  padding-right: 30px;
}
.p-r-xl {
  padding-right: 40px;
}
.p-r-n-xxs {
  padding-right: -1px;
}
.p-r-n-xs {
  padding-right: -5px;
}
.p-r-n-sm {
  padding-right: -10px;
}
.p-r-n {
  padding-right: -15px;
}
.p-r-n-md {
  padding-right: -20px;
}
.p-r-n-lg {
  padding-right: -30px;
}
.p-r-n-xl {
  padding-right: -40px;
}
.p-b-none {
  padding-bottom: 0;
}
.p-b-xxs {
  padding-bottom: 1px;
}
.p-b-xs {
  padding-bottom: 5px;
}
.p-b-sm {
  padding-bottom: 10px;
}
.p-b {
  padding-bottom: 15px;
}
.p-b-md {
  padding-bottom: 20px;
}
.p-b-lg {
  padding-bottom: 30px;
}
.p-b-xl {
  padding-bottom: 40px;
}
.p-b-n-xxs {
  padding-bottom: -1px;
}
.p-b-n-xs {
  padding-bottom: -5px;
}
.p-b-n-sm {
  padding-bottom: -10px;
}
.p-b-n {
  padding-bottom: -15px;
}
.p-b-n-md {
  padding-bottom: -20px;
}
.p-b-n-lg {
  padding-bottom: -30px;
}
.p-b-n-xl {
  padding-bottom: -40px;
}

.m-xxs {
  margin: 2px 4px;
}
.m-xs {
  margin: 5px;
}
.m-sm {
  margin: 10px;
}
.m-md {
  margin: 20px;
}
.m-lg {
  margin: 30px;
}
.m-xl {
  margin: 50px;
}
.m-n {
  margin: 0 !important;
}
.m-l-none {
  margin-left: 0;
}
.m-l-xs {
  margin-left: 5px;
}
.m-l-sm {
  margin-left: 10px;
}
.m-l {
  margin-left: 15px;
}
.m-l-md {
  margin-left: 20px;
}
.m-l-lg {
  margin-left: 30px;
}
.m-l-xl {
  margin-left: 40px;
}
.m-l-xxl {
  margin-left: 50px;
}
.m-l-n-xxs {
  margin-left: -1px;
}
.m-l-n-xs {
  margin-left: -5px;
}
.m-l-n-sm {
  margin-left: -10px;
}
.m-l-n {
  margin-left: -15px;
}
.m-l-n-md {
  margin-left: -20px;
}
.m-l-n-lg {
  margin-left: -30px;
}
.m-l-n-xl {
  margin-left: -40px;
}
.m-t-none {
  margin-top: 0;
}
.m-t-xxs {
  margin-top: 1px;
}
.m-t-xs {
  margin-top: 5px;
}
.m-t-sm {
  margin-top: 10px;
}
.m-t {
  margin-top: 15px;
}
.m-t-md {
  margin-top: 20px;
}
.m-t-lg {
  margin-top: 30px;
}
.m-t-xl {
  margin-top: 40px;
}
.m-t-n-xxs {
  margin-top: -1px;
}
.m-t-n-xs {
  margin-top: -5px;
}
.m-t-n-sm {
  margin-top: -10px;
}
.m-t-n {
  margin-top: -15px;
}
.m-t-n-md {
  margin-top: -20px;
}
.m-t-n-lg {
  margin-top: -30px;
}
.m-t-n-xl {
  margin-top: -40px;
}
.m-r-none {
  margin-right: 0;
}
.m-r-xxs {
  margin-right: 1px;
}
.m-r-xs {
  margin-right: 5px;
}
.m-r-sm {
  margin-right: 10px;
}
.m-r {
  margin-right: 15px;
}
.m-r-md {
  margin-right: 20px;
}
.m-r-lg {
  margin-right: 30px;
}
.m-r-xl {
  margin-right: 40px;
}
.m-r-n-xxs {
  margin-right: -1px;
}
.m-r-n-xs {
  margin-right: -5px;
}
.m-r-n-sm {
  margin-right: -10px;
}
.m-r-n {
  margin-right: -15px;
}
.m-r-n-md {
  margin-right: -20px;
}
.m-r-n-lg {
  margin-right: -30px;
}
.m-r-n-xl {
  margin-right: -40px;
}
.m-b-none {
  margin-bottom: 0;
}
.m-b-xxs {
  margin-bottom: 1px;
}
.m-b-xs {
  margin-bottom: 5px;
}
.m-b-sm {
  margin-bottom: 10px;
}
.m-b {
  margin-bottom: 15px;
}
.m-b-md {
  margin-bottom: 20px;
}
.m-b-lg {
  margin-bottom: 30px;
}
.m-b-xl {
  margin-bottom: 40px;
}
.m-b-n-xxs {
  margin-bottom: -1px;
}
.m-b-n-xs {
  margin-bottom: -5px;
}
.m-b-n-sm {
  margin-bottom: -10px;
}
.m-b-n {
  margin-bottom: -15px;
}
.m-b-n-md {
  margin-bottom: -20px;
}
.m-b-n-lg {
  margin-bottom: -30px;
}
.m-b-n-xl {
  margin-bottom: -40px;
}
.space-15 {
  margin: 15px 0;
}
.space-20 {
  margin: 20px 0;
}
.space-25 {
  margin: 25px 0;
}
.space-30 {
  margin: 30px 0;
}
.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;
}
/* MARGINS PADDING */
.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.s17{
  width: 17px; 
  height: 17px;
}
.oicon.s18{
  width: 18px; 
  height: 18px;
}
.oicon.s19{
  width: 19px; 
  height: 19px;
}
.oicon.s20{
  width: 20px; 
  height: 20px;
}
.oicon.s22{
  width: 22px;
  height: 22px;
}
.s27{
  width: 27px;
  height: 27px;
}
.oicon.s30{
  width: 30px;
  height: 30px;
}
.oicon.s35{
  width:35px;
  height:35px;
}
.oicon.s40{
  width:40px;
  height:40px;
}
.oicon-input{
  float: left;
  position: absolute;
  top: 28px;
  left: 13px;
  color: #999c9e;
}
.showonhover > .oicon{
  display:none;
}
.showonhover:hover > .oicon{
  display:inline-block;
}

.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;
}
.b-r {
  border-right: 1px solid #e7eaec;
}
.b-l {
  border-left: 1px solid #e7eaec;
}
.b-b {
  border-bottom: 1px solid #e7eaec;
}
.b-t {
  border-top: 1px solid #e7eaec;
}
.b-box {
  border: 1px solid #e7eaec;
}

.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-block {
  display: block;
}
.d-flex-h {
  display: flex;
  overflow: hidden;
}

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

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

.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-direction-row-reverse {
  flex-direction: row-reverse;
}

.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;
  color: white; 
}

.table-sticky-header.dataTable thead .sorting_asc:after,
.table-sticky-header.dataTable thead .sorting_desc:after {
  color: #333;
}

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

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

.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;
}

.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
}

/* select2 colors: 
  select2
    -primary
    -success
    -info
    -warning
    -danger
    -gray
*/
  /* primary color */
  .select2-selection--single.select2-primary {
    border: solid 1px var(--primary-color);
    background-color: #e3f4fc;
  }
  .select2-selection--single.select2-primary > .select2-selection__rendered {
    color: var(--primary-color);
    font-weight: 600;
  }
  .select2-selection--single.select2-primary > .select2-selection__arrow b {
    border-color: var(--primary-color) transparent transparent transparent;
  }
  /* success color */
  .select2-selection--single.select2-success {
    border: solid 1px var(--success-color);
    background-color: #effae4;
  }
  .select2-selection--single.select2-success > .select2-selection__rendered {
    color: var(--success-color);
    font-weight: 600;
  }
  .select2-selection--single.select2-success > .select2-selection__arrow b {
    border-color: var(--success-color) transparent transparent transparent;
  }
  /* warning color */
  .select2-selection--single.select2-warning {
    border: solid 1px var(--warning-color);
    background-color: #fef7f0;
  }
  .select2-selection--single.select2-warning > .select2-selection__rendered {
    color: var(--warning-color);
    font-weight: 600;
  }
  .select2-selection--single.select2-warning > .select2-selection__arrow b {
    border-color: var(--warning-color) transparent transparent transparent;
  }
  /* info color */
  .select2-selection--single.select2-info {
    border: solid 1px var(--info-color);
    background-color: #effae4;
  }
  .select2-selection--single.select2-info > .select2-selection__rendered {
    color: var(--info-color);
    font-weight: 600;
  }
  .select2-selection--single.select2-info > .select2-selection__arrow b {
    border-color: var(--info-color) transparent transparent transparent;
  }
  /* danger color */
  .select2-selection--single.select2-danger {
    border: solid 1px var(--danger-color);
    background-color: #fff2f4;
  }
  .select2-selection--single.select2-danger > .select2-selection__rendered {
    color: var(--danger-color);
    font-weight: 600;
  }
  .select2-selection--single.select2-danger > .select2-selection__arrow b {
    border-color: var(--danger-color) transparent transparent transparent;
  }
  /* gray color */
  .select2-selection--single.select2-gray {
    border: solid 1px var(--gray-color);
    background-color: inherit;
  }
  .select2-selection--single.select2-gray > .select2-selection__rendered {
    color: var(--gray-color);
    font-weight: 600;
  }
  .select2-selection--single.select2-gray > .select2-selection__arrow b {
    border-color: var(--gray-color) transparent transparent transparent;
  }
/* select2 colors */

/* 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;
}

.tabs-container .tab-pane .panel-body {
  border-radius: 
    var(--border-radius, 8px) 
    var(--border-radius, 8px) 
    var(--border-radius, 8px) 
    var(--border-radius, 8px);
  /* box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03); */
}

.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 */

.material-switch > input[type="checkbox"] {
  display: none;   
}

.material-switch > label {
    cursor: pointer;
    height: 0px;
    position: relative; 
    width: 36px;  
}

.material-switch > label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 18px;
    margin-top: -9px;
    position:absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 36px;
}

.material-switch > label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;    
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 16px;
    left: 1px;
    margin-top: -4px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 16px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.8;
}
.material-switch > input[type="checkbox"]:checked + label::after {
    background: rgb(255, 255, 255);
    left: 19px;
}

/* prospect management */
#tab-prospect-upload{
  position: relative;
}

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}
.modal-body-left, .modal-body-right {
    max-height: calc(100vh - 312px);
    overflow-y: auto;
}

#Upload .form-horizontal .checkbox{
  padding-top: 0;
  padding-bottom: 0;
  min-height: auto;
}
#Upload .form-horizontal .subtitle{
  display: block;
  margin-left: 5px;
}
#Upload .form-horizontal .dataTables_wrapper {
  padding-bottom: 0;
}
.table-xs > thead > tr > th, 
.table-xs > tbody > tr > td,
.table-xs > tfoot > tr > td
{
  padding: 6px 8px;
  font-size: 11px;
  vertical-align: middle;
}

.hideOpt{
    display: none;
}

.hideTdExcelField{
  display:none;
}

.summernote-container {
	border: 1px solid #e6e6e6;
}
.input-group .select2-container {
  position: relative;
  z-index: 2;
  float: left;
  width: 50%;
  margin-bottom: 0;
  display: table;
  table-layout: fixed;
}

.label-small {
	vertical-align: super;
	font-size: small;
}

.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;
}

/*fix tampilan*/
.ajax-file-upload-container{
	display:none;
}

/* START: monitoring realtime */

.wallboard {
  position: relative;
}
.wallboard .object-agent{
  width: 30%;
}
.wallboard .object-number{
  width: 70%;
}
.wallboard .object-number:only-child {
  flex: 0 0 80%; /* Lebar menjadi 90% */
}
.wallboard .widget h3{
  font-size: small;
}
.wallboard .widget-number {
  font-size: 3em;
  line-height: 1.2;
  text-align: center;
  font-weight: 500;
}
.wallboard .container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  margin-bottom: 20px; /*sama dengan gap */
  flex-wrap: wrap;
  align-content: stretch;
}
.wallboard .box {
  flex: 1;
  min-width: 120px;
  border-radius: var(--border-radius, 8px);
}
.wallboard .box .btn {
  font-size: small;
}
.wallboard .box:not(:first-child) {
  /* Gaya untuk kotak selain yang pertama */
  margin-left: 25px;
}

.wallboard .container .label {
  font-size: 12px;
  width: 35px;
}

.font-xl{
  font-size: x-large;
}
.font-lg{
  font-size: large !important;
}
.font-md{
  font-size: medium;
}
.font-sm{
  font-size: small;
}
.font-xs{
  font-size: smaller;
}

.table-wallboard > thead > tr > th, 
.table-wallboard > tbody > tr > th, 
.table-wallboard > tfoot > tr > th, 
.table-wallboard > thead > tr > td, 
.table-wallboard > tbody > tr > td, 
.table-wallboard > tfoot > tr > td {
 vertical-align: middle;
 font-size: small;
}
.table-wallboard > thead > tr > th:last-child, 
.table-wallboard > tbody > tr > th:last-child, 
.table-wallboard > tfoot > tr > th:last-child, 
.table-wallboard > thead > tr > td:last-child, 
.table-wallboard > tbody > tr > td:last-child, 
.table-wallboard > tfoot > tr > td:last-child {
  padding: 15px 25px 15px 8px;
}

.table-wallboard > thead > tr > th:first-child, 
.table-wallboard > tbody > tr > th:first-child, 
.table-wallboard > tfoot > tr > th:first-child, 
.table-wallboard > thead > tr > td:first-child, 
.table-wallboard > tbody > tr > td:first-child, 
.table-wallboard > tfoot > tr > td:first-child {
  padding: 15px 8px 15px 25px;
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 768px)  {
  .wallboard .container {
    flex-direction: column;
  }
  .wallboard .object-agent,
  .wallboard .object-number{
      width: 100%;
  }
  .wallboard .box:not(:first-child) {
      margin-left: 0;
  }
  .wallboard .box{
      margin-bottom: 15px;
  }
  .wallboard .container .label {
    width: fit-content;
    margin-bottom: 10px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 769px){
  .text-vertical {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px){}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and (max-width: 1400px){}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1401px) and (max-width: 1540px) {
  .wallboard .widget-number {
    font-size: 4em;
    line-height: 1;
  }
  .wallboard .box .btn {
    font-size: medium;
  }
  .wallboard .widget h3 {
    font-size: medium;
  }
  .table-wallboard > thead > tr > th, 
  .table-wallboard > tbody > tr > th, 
  .table-wallboard > tfoot > tr > th, 
  .table-wallboard > thead > tr > td, 
  .table-wallboard > tbody > tr > td, 
  .table-wallboard > tfoot > tr > td {
    font-size: medium;
  }
}

/* XXX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1541px) {
  .wallboard .widget-number {
    font-size: 5.5em;
  }
  .wallboard .box .btn {
    font-size: large;
  }
  .wallboard .widget h3 {
    font-size: large;
  }
  .table-wallboard > thead > tr > th, 
  .table-wallboard > tbody > tr > th, 
  .table-wallboard > tfoot > tr > th, 
  .table-wallboard > thead > tr > td, 
  .table-wallboard > tbody > tr > td, 
  .table-wallboard > tfoot > tr > td {
    font-size: large;
  }
  .wallboard .container .label {
    font-size: 20px;
    width: 50px;
  }
}
.space-between {
  justify-content: space-between;
}

.wallboard-sm .widget-number {
  font-size: 3em;
  line-height: 1.2;
}
.wallboard-sm .box .btn {
  font-size: small;
}
.wallboard-sm .widget h3{
  font-size: small;
}
.wallboard-sm .container .label {
  font-size: 12px;
}

.wallboard-md .widget-number {
  font-size: 4em;
  line-height: 1;
}
.wallboard-md .box .btn {
  font-size: medium;
}
.wallboard-md .widget h3 {
  font-size: medium;
}

.wallboard-lg .widget-number {
  font-size: 5.5em;
}
.wallboard-lg .box .btn {
  font-size: large;
}
.wallboard-lg .widget h3 {
  font-size: large;
}
.wallboard-lg .container .label {
  font-size: 20px;
}

.wallboard-xl .widget-number {
  font-size: 6.5em;
}
.wallboard-xl .box .btn {
  font-size: x-large;
}
.wallboard-xl .widget h3 {
  font-size: x-large;
}
.wallboard-xl .container .label {
  font-size: 24px;
}

.wallboard-xxl .widget-number {
  font-size: 7em;
}
.wallboard-xxl .box .btn {
  font-size: xx-large;
}
.wallboard-xxl .widget h3 {
  font-size: xx-large;
}
.wallboard-xxl .container .label {
  font-size: 28px;
}

/* END: monitoring wallboard */

/* scroll ticket */

#pageTabContent {
  overflow-y: auto;   
  overflow-x: hidden; 
}

.sticky {
  position: fixed;
  top: 10px;
  z-index: 999;
}


/* END: scroll ticket */
.case-chat-bubble {
  max-width: 100%;
  overflow-wrap: anywhere;
  position: relative;
  white-space: pre-wrap;
}

.float-left {
  float: left
}
.m-w-80 {
  max-width: 80%;
}
.pointer {
  cursor: pointer;
}
.white-space-normal {
  white-space: normal;
}

/* END: monitoring wallboard */

[aria-role="same-message-list"] {
  [aria-role="message-wrapper"]:first-child > .case-chat-bubble:first-child:after,
  [aria-role="message-wrapper"]:first-child > .case-chat-bubble:first-child:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 0 solid transparent;
    border-bottom: 25px solid transparent;
    position: absolute;
    top: 10px;
  }

  [aria-role="message-wrapper"]:first-child > .case-chat-bubble.bg-outbound:first-child:after {
    border-left: 11px solid var(--background-outbound);
    right: -11px;
  }

  [aria-role="message-wrapper"]:first-child > .case-chat-bubble.bg-note:first-child:after {
    border-left: 11px solid var(--background-note);
    right: -11px;
  }

  [aria-role="message-wrapper"]:first-child > .case-chat-bubble.bg-inbound:first-child:before {
    border-right: 11px solid var(--background-inbound);
    left: -10px;
  }

  [aria-role="message-wrapper"] > .case-chat-bubble table {
    border-collapse: collapse;
    width: 100%;
  }

  [aria-role="message-wrapper"] > .case-chat-bubble table,
  [aria-role="message-wrapper"] > .case-chat-bubble table th,
  [aria-role="message-wrapper"] > .case-chat-bubble table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
  }

}

[aria-role="same-message-list"] > .case-chat-bubble:after,
[aria-role="same-message-list"] > .case-chat-bubble:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 0 solid transparent;
  border-bottom: 25px solid transparent;
  position: absolute;
  top: 10px;
}

[aria-role="same-message-list"] > .case-chat-bubble.bg-outbound:first-child:after {
  border-left: 11px solid var(--background-outbound);
  right: -11px;
}

[aria-role="same-message-list"] > .case-chat-bubble.bg-note:first-child:after {
  border-left: 11px solid var(--background-note);
  right: -11px;
}

[aria-role="same-message-list"] > .case-chat-bubble.bg-inbound:first-child:before {
  border-right: 11px solid var(--background-inbound);
  left: -10px;
}

[aria-role="same-message-list"] > .case-chat-bubble table {
  border-collapse: collapse;
  width: 100%;
}

[aria-role="same-message-list"] > .case-chat-bubble table,
[aria-role="same-message-list"] > .case-chat-bubble table th,
[aria-role="same-message-list"] > .case-chat-bubble table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.basis-full {
  flex-basis: 100%;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


/* START: from floating-input */
.floating-container .form-floating {
  position: relative;
}
.floating-container .form-floating > .form-control,
.floating-container .form-floating > .form-control-plaintext,
.floating-container .form-floating > .form-select {
  height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  line-height: 1.25;
}
.floating-container .form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  padding: 1rem 0.75rem;
  overflow: hidden;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  border: var(--bs-border-width) solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .floating-container .form-floating > label {
    transition: none;
  }
}
.floating-container .form-floating > .form-control,
.floating-container .form-floating > .form-control-plaintext {
  padding: 1rem 0.75rem;
}
.floating-container .form-floating > .form-control::-moz-placeholder,
.floating-container .form-floating > .form-control-plaintext::-moz-placeholder {
  color: transparent;
}
.floating-container .form-floating > .form-control::placeholder,
.floating-container .form-floating > .form-control-plaintext::placeholder {
  color: transparent;
}
.floating-container .form-floating > .form-control:not(:-moz-placeholder-shown),
.floating-container .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) {
  padding-top: 1.75rem;
  padding-bottom: 0.5rem;
}
.floating-container .form-floating > .form-control:focus,
.floating-container .form-floating > .form-control:not(:placeholder-shown),
.floating-container .form-floating > .form-control-plaintext:focus,
.floating-container .form-floating > .form-control-plaintext:not(:placeholder-shown) {
  padding-top: 1.75rem;
  padding-bottom: 0.5rem;
}
.floating-container .form-floating > .form-control:-webkit-autofill,
.floating-container .form-floating > .form-control-plaintext:-webkit-autofill {
  padding-top: 1.75rem;
  padding-bottom: 0.5rem;
}
.floating-container .form-floating > .form-select {
  padding-top: 1.75rem;
  padding-bottom: 0.5rem;
}
.floating-container .form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
  opacity: .65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.floating-container .form-floating > .form-control:focus ~ label,
.floating-container .form-floating > .form-control:not(:placeholder-shown) ~ label,
.floating-container .form-floating > .form-control-plaintext ~ label,
.floating-container .form-floating > .form-select ~ label {
  opacity: .65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.floating-container .form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
  position: absolute;
  inset: 1rem 0.375rem;
  z-index: -1;
  height: 1.5em;
  content: "";
  background-color: var(--bs-body-bg);
  border-radius: var(--bs-border-radius);
}
.floating-container .form-floating > .form-control:focus ~ label::after,
.floating-container .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.floating-container .form-floating > .form-control-plaintext ~ label::after,
.floating-container .form-floating > .form-select ~ label::after {
  position: absolute;
  inset: 1rem 0.375rem;
  z-index: -1;
  height: 1.5em;
  content: "";
  background-color: var(--bs-body-bg);
  border-radius: var(--bs-border-radius);
}
.floating-container .form-floating > .form-control:-webkit-autofill ~ label {
  opacity: .65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.floating-container .form-floating > .form-control-plaintext ~ label {
  border-width: var(--bs-border-width) 0;
}
.floating-container .form-floating > :disabled ~ label,
.floating-container .form-floating > .form-control:disabled ~ label {
  color: #6c757d;
}
.floating-container .form-floating > :disabled ~ label::after,
.floating-container .form-floating > .form-control:disabled ~ label::after {
  background-color: var(--bs-secondary-bg);
}

.floating-container .input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
.floating-container .input-group > .form-control,
.floating-container .input-group > .form-select,
.floating-container .input-group > .form-floating {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.floating-container .input-group > .form-control:focus,
.floating-container .input-group > .form-select:focus,
.floating-container .input-group > .form-floating:focus-within {
  z-index: 5;
}
.floating-container .input-group .btn {
  position: relative;
  z-index: 2;
}
.floating-container .input-group .btn:focus {
  z-index: 5;
}
.floating-container .input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  text-align: center;
  white-space: nowrap;
  background-color: var(--bs-tertiary-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.floating-container .input-group-lg > .form-control,
.floating-container .input-group-lg > .form-select,
.floating-container .input-group-lg > .input-group-text,
.floating-container .input-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: var(--bs-border-radius-lg);
}
.floating-container .input-group-sm > .form-control,
.floating-container .input-group-sm > .form-select,
.floating-container .input-group-sm > .input-group-text,
.floating-container .input-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm);
}
.floating-container .input-group-lg > .form-select,
.floating-container .input-group-sm > .form-select {
  padding-right: 3rem;
}
.floating-container .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.floating-container .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),
.floating-container .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,
.floating-container .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.floating-container .input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.floating-container .input-group.has-validation > .dropdown-toggle:nth-last-child(n+4),
.floating-container .input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-control,
.floating-container .input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.floating-container .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: calc(var(--bs-border-width) * -1);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.floating-container .input-group > .form-floating:not(:first-child) > .form-control,
.floating-container .input-group > .form-floating:not(:first-child) > .form-select {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.floating-container .valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-form-valid-color);
}
.floating-container .valid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #fff;
  background-color: var(--bs-success);
  border-radius: var(--bs-border-radius);
}
.floating-container .was-validated :valid ~ .valid-feedback,
.floating-container .was-validated :valid ~ .valid-tooltip,
.floating-container .is-valid ~ .valid-feedback,
.floating-container .is-valid ~ .valid-tooltip {
  display: block;
}
.floating-container .was-validated .form-control:valid,
.floating-container .form-control.is-valid {
  border-color: var(--bs-form-valid-border-color);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.floating-container .was-validated .form-control:valid:focus,
.floating-container .form-control.is-valid:focus {
  border-color: var(--bs-form-valid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}
.floating-container .was-validated textarea.form-control:valid,
.floating-container textarea.form-control.is-valid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}
.floating-container .was-validated .form-select:valid,
.floating-container .form-select.is-valid {
  border-color: var(--bs-form-valid-border-color);
}
.floating-container .was-validated .form-select:valid:not([multiple]):not([size]),
.floating-container .was-validated .form-select:valid:not([multiple])[size="1"],
.floating-container .form-select.is-valid:not([multiple]):not([size]),
.floating-container .form-select.is-valid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  padding-right: 4.125rem;
  background-position: right 0.75rem center, center right 2.25rem;
  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.floating-container .was-validated .form-select:valid:focus,
.floating-container .form-select.is-valid:focus {
  border-color: var(--bs-form-valid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}
.floating-container .was-validated .form-control-color:valid,
.floating-container .form-control-color.is-valid {
  width: calc(3rem + calc(1.5em + 0.75rem));
}
.floating-container .was-validated .form-check-input:valid,
.floating-container .form-check-input.is-valid {
  border-color: var(--bs-form-valid-border-color);
}
.floating-container .was-validated .form-check-input:valid:checked,
.floating-container .form-check-input.is-valid:checked {
  background-color: var(--bs-form-valid-color);
}
.floating-container .was-validated .form-check-input:valid:focus,
.floating-container .form-check-input.is-valid:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}
.floating-container .was-validated .form-check-input:valid ~ .form-check-label,
.floating-container .form-check-input.is-valid ~ .form-check-label {
  color: var(--bs-form-valid-color);
}
.floating-container .form-check-inline .form-check-input ~ .valid-feedback {
  margin-left: 0.5em;
}
.floating-container .was-validated .input-group > .form-control:not(:focus):invalid,
.floating-container .input-group > .form-control:not(:focus).is-invalid,
.floating-container .was-validated .input-group > .form-select:not(:focus):invalid,
.floating-container .input-group > .form-select:not(:focus).is-invalid,
.floating-container .was-validated .input-group > .form-floating:not(:focus-within):invalid,
.floating-container .input-group > .form-floating:not(:focus-within).is-invalid {
  z-index: 4;
}
.floating-container .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px;
    margin-top: 1rem;
}
.floating-container .select2-container {
  width: 100% !important;
}
.floating-container .select2-selection {
  height: auto !important;
  min-height: 38px;
}
.floating-container .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 4rem;
  position: absolute;
  top: 1px;
  right: 1px;
  width: 20px;
}
.floating-container .select2-container--default .select2-selection--multiple {
  padding-top: 1.5rem;
  background-color: white;
  border: 1px solid #e7eaec;
  border-radius: 4px;
  cursor: text;
}
.floating-container .select2-container--default.select2-container--focus .select2-selection--multiple {
  border: solid #24d0e3 1px;
  outline: 0;
}
.floating-container .select2-container .select2-selection--single .select2-selection__rendered {
  display: block;
  padding: 1rem 0.75rem 0.5rem;
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: normal;
}

.floating-container .bootstrap-tagsinput input {
  padding: 3px;
  margin-top: 18px;
}

.floating-container .bootstrap-tagsinput .tag {
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: default;
  float: left;
  margin-right: 5px;
  margin-top: 2rem;
  padding: 0 5px;
  font-size: 13px;
  font-weight: 400;
  padding: 3px 5px;
}

.floating-container .form-floating select:empty ~ label {
  opacity: .65;
  transform: scale(1) translateY(0);
}

.floating-container .form-floating select:focus ~ label,
.floating-container .form-floating select:not(:placeholder-shown) ~ label {
  opacity: .65;
  transform: scale(0.85) translateY(-10px);
}

.floating-container .custom-floating {
  position: relative;
}

/* Posisi default label (jika kosong) diatur ke bawah */
.floating-container .custom-floating label {
  position: absolute;
  left: 0.75rem;
  bottom: 0.5rem;
  transition: all 0.2s ease;
  pointer-events: none;
  color: #6c757d; /* Warna label default */
}

/* Jika ada nilai (ditandai dengan class has-value), label naik ke atas */
.floating-container .custom-floating.has-value label {
  bottom: 100%;
  font-size: 0.8rem;
  color: #495057;
}

.reply-quote {
  background-color: #f9f9f9;
  border-left: 3px solid #1c84c6;
  padding: 5px 10px;
  margin-bottom: 8px;
  border-radius: 3px;
  font-size: 12px;
  color: #555;
}

.reply-quote strong {
  color: #1c84c6;
  font-weight: bold;
}

[aria-role="same-message-list"] > :not(:first-child) > span.font-size-importanttext {
  display: none;
}

.dataTables_processing {
  z-index: 10000;
}

/* END: from floating-input */

[aria-role="message-wrapper"][aria-mode="select-forward"] {
  transition: background-color 0.3s ease;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
}
[aria-role="message-wrapper"][aria-mode="select-forward"]:hover {
  cursor:pointer;
  border-radius: 5px;
  background-color: #ffffffba;
}