body {
  color: #010915;
  font-family: "muli", sans-serif;
  font-size: 16px;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 24px;
  background-color: #EEF1F5;
  overflow-x: hidden;
}
@media only screen and (min-width: 1024px) {
  body {
    /*font-size: $body-font-size-desktop;
    font-weight: $body-font-weight-desktop;
    line-height: $body-line-height-desktop;*/
  }
}

.container-custom, .branche-container {
  width: 100%;
  margin-inline: auto;
  padding: 0 24px;
}

.branche-container {
  max-width: 1170px;
}

h1 {
  margin: 0 0 12px;
  color: #052D69;
  font-family: "muli", sans-serif;
  font-size: 28px;
  font-weight: 800;
  line-height: 36px;
}
@media only screen and (min-width: 1024px) {
  h1 {
    font-size: 36px;
    font-weight: 800;
    line-height: 42px;
  }
}

h2 {
  margin: 0 0 12px;
  color: #464646;
  font-family: "muli", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  text-decoration: none;
}
@media only screen and (min-width: 1024px) {
  h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
  }
}

h3 {
  margin: 0 0 12px;
  color: #464646;
  font-family: "muli", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}
@media only screen and (min-width: 1024px) {
  h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
  }
}

h4 {
  margin: 0 0 12px;
  color: #464646;
  font-family: "muli", sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 25px;
}
@media only screen and (min-width: 1024px) {
  h4 {
    font-size: 19px;
    font-weight: 700;
    line-height: 25px;
  }
}

.comments-list-title,
.comments-form-title {
  color: #052D69;
  font-size: 28px;
  line-height: 36px;
  font-weight: 800;
}

.comments-form-title {
  margin: 0 0 16px;
}

.comments-list-title {
  margin: 0 0 24px;
}
@media only screen and (min-width: 1024px) {
  .comments-list-title {
    padding-left: 60px;
  }
}

a {
  color: #0A5AD2;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  transition: color 0.47s cubic-bezier(0.25, 0.1, 0.25, 1), text-decoration 0.47s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: color, text-decoration;
}
a:hover {
  color: #ff9600;
}

a:focus,
a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.dark-mode {
  color: #DCEAFE;
  background-color: #1A1A1A;
}
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4 {
  color: #97BFFB;
}
.dark-mode .comments-list-title,
.dark-mode .comments-form-title {
  color: #97BFFB;
}
.dark-mode a {
  color: #5194F8;
}

input:not(input[type=checkbox]):not(input[type=radio]),
textarea,
select {
  width: 100% !important;
  margin: 0;
  padding: 8px 8px 5px !important;
  color: #010915 !important;
  font-family: "muli", sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  background-color: white !important;
  border: 1px solid #ADB6C2 !important;
  border-radius: 4px !important;
  transition: border-color 0.47s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: border-color;
  outline: none;
}
input:not(input[type=checkbox]):not(input[type=radio]):hover, input:not(input[type=checkbox]):not(input[type=radio]):focus,
textarea:hover,
textarea:focus,
select:hover,
select:focus {
  box-shadow: unset;
  border-color: #0A5AD2 !important;
}
input:not(input[type=checkbox]):not(input[type=radio])::placeholder,
textarea::placeholder,
select::placeholder {
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  color: #ADB6C2;
  overflow: visible;
  vertical-align: middle;
}

input[type=text],
select {
  display: block !important;
  height: 32px !important;
}

select option[value=""],
select:not(:checked):not(#calls-subject) {
  color: #7A838F !important;
}

select {
  -webkit-appearance: none !important;
  background-image: url(../images/sort-down-solid-grey.svg) !important;
  background-repeat: no-repeat !important;
  background-size: 20px !important;
  background-position: center right 7px;
}

.button, .btn {
  position: relative;
  display: inline-block;
  z-index: 20;
  width: unset;
  margin: 0 !important;
  padding: 10px 12px 6px 12px !important;
  color: #fff !important;
  font-family: "muli", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  background: #0A5AD2;
  border: 2px solid #0A5AD2;
  border-radius: 4px !important;
  text-decoration: none !important;
  text-transform: none;
  transition: border-color 0.47s cubic-bezier(0.25, 0.1, 0.25, 1), background 0.47s cubic-bezier(0.25, 0.1, 0.25, 1), color 0.47s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  will-change: border-color, background, color !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
}
.button svg, .btn svg {
  position: relative;
  display: inline-block;
  top: 3px;
  height: 16px;
  width: 16px;
  margin-right: 5px;
}
.button svg path, .btn svg path {
  fill: #fff;
}

.btn-orange {
  background: #ff9600 !important;
  border-color: #ff9600 !important;
}
.btn-orange:after {
  background: #ffa422 !important;
}

.button-green {
  background: linear-gradient(45deg, #25b902, #4efd24) !important;
}
.button-green:after {
  background: linear-gradient(80deg, #4efd24, #25b902) !important;
}

.button-red {
  background: linear-gradient(45deg, #ff012b, #ff788e) !important;
}
.button-red:after {
  background: linear-gradient(80deg, #ff788e, #ff012b) !important;
}

.block_button {
  background: linear-gradient(45deg, #ff5000, #ff7f44) !important;
}
.block_button:after {
  background: linear-gradient(80deg, #ff7f44, #ff5000) !important;
}

.button-transparent {
  color: #0A5AD2 !important;
  border: 2px solid #0A5AD2 !important;
  background: transparent !important;
}

.add-button, .btn-add {
  position: relative;
  z-index: 10;
  padding-left: 41px !important;
}
.add-button:before, .btn-add:before {
  content: url("../images/plus-solid.svg");
  position: absolute;
  left: 11px;
  top: 8px;
  z-index: 15;
  display: block;
  height: 16px;
  width: 16px;
}

.button-small {
  padding: 8px 20px !important;
}
.button-small.add-button {
  padding-left: 30px !important;
}
.button-small.add-button:before {
  left: 10px;
}

.btn-accept {
  padding-left: 46px !important;
}
.btn-accept:before {
  content: url("../images/check-solid.svg");
  position: absolute;
  left: 11px;
  top: 8px;
  z-index: 15;
  display: block;
  height: 15px;
  width: 21px;
}

.submit {
  padding-right: 42px !important;
}
.submit:after {
  content: url("../images/paper-plane-solid.svg");
  position: absolute;
  right: 9px;
  top: 8px;
  z-index: 15;
  display: block;
  height: 24px;
  width: 24px;
}

.delete {
  position: relative;
  color: #EB4850;
  font-size: 14px;
  line-height: 22px;
  font-weight: 800;
  padding-left: 27px;
}
.delete:before {
  content: url("../images/trash-solid.svg");
  position: absolute;
  top: -2px;
  left: 0;
  display: block;
  height: 16px;
  width: 14px;
}

.btn-danger {
  background-color: #ff002a;
  border-color: #ff002a;
}

.btn-warning {
  background-color: #CC7D00;
  border-color: #CC7D00;
}

.btn-success {
  background-color: #22A703;
  border-color: #22A703;
}

.btn-new {
  background-color: #485B78;
  border-color: #485B78;
}

.btn-icon {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.btn-icon svg {
  width: 20px;
  height: 20px;
}
.btn-icon svg path {
  fill: #0A5AD2;
}

.dropdown-custom .caret {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
}

.form-horizontal .control-label {
  text-align: left;
  color: #7A838F;
  font-size: 14px;
  font-weight: 800;
}

.call-create-form {
  width: 100%;
  margin: 0;
}
.call-create-form .calls-form {
  float: left;
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .call-create-form .calls-form {
    width: 50%;
    padding-right: 16px;
  }
}
.call-create-form .call-notepad {
  display: none;
  flex-direction: column;
  gap: 8px;
  float: left;
  width: 50%;
  padding-left: 16px;
  margin-bottom: 10px;
}
@media only screen and (min-width: 1024px) {
  .call-create-form .call-notepad {
    display: flex;
  }
}
.call-create-form .call-notepad .call-notepad-inner {
  padding: 16px;
  border-radius: 4px;
  border: 2px solid #EEF1F5;
}
.call-create-form .call-notepad .log-notes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.call-create-form .call-notepad .log-notes-header h4 {
  color: #3D4248;
  font-size: 14px;
  font-weight: 800;
  margin: 0;
  flex-grow: 1;
}
.call-create-form .call-notepad .log-notes {
  overflow: auto;
  max-height: unset;
  margin: 35px 0 0;
}
.call-create-form .form-footer {
  float: left;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: baseline;
}
@media only screen and (min-width: 1024px) {
  .call-create-form .form-footer {
    flex-direction: unset;
  }
}
.call-create-form .form-footer p {
  position: relative;
  z-index: 20;
  display: inline-block;
  margin-right: 10px;
  color: #3D4248;
  font-size: 14px;
  font-weight: 800;
}
.call-create-form .dropdown-menu {
  top: unset;
  bottom: 100%;
}

.update-call-form-modal .modal-content {
  max-width: 800px;
  margin: 0 auto;
}
.update-call-form-modal .modal-footer {
  display: flex;
}
.update-call-form-modal .modal.in .modal-body .field-callcomments-comment label {
  display: block;
}

.form-group.field-calls-muted_date {
  display: none;
}

.comment-form-buttons {
  display: flex;
  gap: 8px;
  flex-direction: column;
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .comment-form-buttons {
    flex-direction: unset;
    width: unset;
  }
}
.comment-form-buttons .dropdown .btn {
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .comment-form-buttons .dropdown .btn {
    width: unset;
  }
}

.dark-mode input:not(input[type=checkbox]):not(input[type=radio]),
.dark-mode textarea,
.dark-mode select {
  color: #DCEAFE !important;
  background-color: #000000 !important;
  border-color: #C2C8D1 !important;
}
.dark-mode input:not(input[type=checkbox]):not(input[type=radio])::placeholder,
.dark-mode textarea::placeholder,
.dark-mode select::placeholder {
  color: #99A4B3 !important;
}
.dark-mode input:not(input[type=checkbox]):not(input[type=radio]):hover, .dark-mode input:not(input[type=checkbox]):not(input[type=radio]):focus,
.dark-mode textarea:hover,
.dark-mode textarea:focus,
.dark-mode select:hover,
.dark-mode select:focus {
  border-color: #5194F8 !important;
}
.dark-mode select option[value=""],
.dark-mode select:not(:checked) {
  color: #99A4B3 !important;
}
.dark-mode .button, .dark-mode .btn, .dark-mode .button-transparent {
  color: #0C1D36 !important;
  background: #5194F8 !important;
  border-color: #5194F8 !important;
}
.dark-mode .button svg path, .dark-mode .btn svg path, .dark-mode .button-transparent svg path {
  fill: #0C1D36;
}
.dark-mode .add-button:before, .dark-mode .btn-add:before {
  content: url("../images/plus-solid-dark.svg");
}
.dark-mode .btn-accept:before {
  content: url("../images/check-solid-dark.svg");
}
.dark-mode .btn-new {
  background-color: #1E3759;
  border-color: #1E3759;
}
.dark-mode .submit:after {
  content: url("../images/paper-plane-solid-dark.svg");
}
.dark-mode .btn-icon {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.dark-mode .btn-icon svg path {
  fill: #5194F8;
}
.dark-mode .form-horizontal .control-label {
  color: #C2C8D1;
}
.dark-mode .call-create-form .call-notepad .call-notepad-inner {
  border: 2px solid #3D4248;
}
.dark-mode .call-create-form .call-notepad .log-notes-header h4 {
  color: #EEF1F5;
}
.dark-mode .call-create-form .call-create-form-buttons p {
  color: #EEF1F5;
}
.dark-mode .select2-selection {
  background-color: #000000;
}

.navbar-custom {
  position: relative;
  height: 84px;
  padding: 15px 0;
  background-color: #fff;
  border-bottom: 1px solid #D6DBE1;
  transition: background-color 0.47s cubic-bezier(0.25, 0.1, 0.25, 1);
}
@media only screen and (min-width: 1024px) {
  .navbar-custom {
    padding: 0;
  }
}
.navbar-custom .container-custom, .navbar-custom .branche-container {
  height: 100%;
}
@media only screen and (min-width: 1024px) {
  .navbar-custom .container-custom, .navbar-custom .branche-container {
    display: flex;
    align-items: center;
  }
}
.navbar-custom .navbar-header {
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .navbar-custom .navbar-header {
    width: unset;
    margin: 0 0 10px;
  }
}
.navbar-custom .navbar-header .navbar-toggle {
  display: block;
  border: none;
}
.navbar-custom .navbar-header .navbar-toggle .icon-bar {
  background-color: #0A5AD2;
}
@media only screen and (min-width: 1024px) {
  .navbar-custom .navbar-header .navbar-toggle {
    display: none;
  }
}
.navbar-custom .navbar-header .navbar-brand {
  max-width: 133px;
  padding: 0;
}
.navbar-custom .navbar-header .navbar-brand img {
  max-width: 100%;
}
.navbar-custom .navbar-header .navbar-brand .logo-darkmode {
  display: none;
}
.navbar-custom .navbar-collapse {
  display: none !important;
}
@media only screen and (min-width: 1024px) {
  .navbar-custom .navbar-collapse {
    display: block !important;
    width: calc(100% - 161px);
    padding-left: 16px;
  }
}
.navbar-custom .nav-wrapper {
  display: flex;
  align-items: baseline;
  float: left;
  padding: 15px 0;
}
.navbar-custom .nav-wrapper select {
  height: 32px !important;
}
.navbar-custom .activeBranche {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.navbar-custom .activeBranche .activeBrancheSelectArea {
  display: none;
}
@media only screen and (min-width: 1024px) {
  .navbar-custom .activeBranche .activeBrancheSelectArea {
    display: flex;
    flex-direction: column;
  }
}
.navbar-custom .activeBranche .activeBrancheSelectArea .activeBrancheSelectLabel {
  color: #7A838F;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}
.navbar-custom .activeBranche .activeBrancheSelectArea .activeBrancheSelect {
  margin: 0;
  padding: 8px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  border-color: #7A838F !important;
  background-image: url("../images/sort-down-solid-grey.svg");
  background-repeat: no-repeat;
  background-size: 16px 20px;
  background-position: center right 7px;
}
.navbar-custom .pauseCallButton {
  display: inline-block;
  margin: 0 0 0 15px;
  padding: 0;
}
.navbar-custom .pauseCallButton .pauseCallButtonArea .button {
  margin: 5px 0 0 !important;
  padding: 16px 13px !important;
  font-size: 10px !important;
  line-height: 16px !important;
  border: none !important;
}
.navbar-custom .navigation {
  display: inline-block;
  float: right;
  padding: 0;
  height: 100%;
}
.navbar-custom ul.nav {
  position: unset;
  display: flex;
  align-items: center;
  float: right;
  height: 100%;
  padding: 5px 0 0;
}
.navbar-custom ul.nav li {
  padding: 8px 25px;
  border-bottom: 1px solid #EEF1F5;
}
@media only screen and (min-width: 1024px) {
  .navbar-custom ul.nav li {
    display: flex;
    flex-direction: column;
    border: none;
  }
}
.navbar-custom ul.nav li:not(.profile-item):hover {
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.1);
}
.navbar-custom ul.nav li:focus-visible {
  border: unset;
}
.navbar-custom ul.nav li svg {
  height: 32px;
}
.navbar-custom ul.nav li svg path, .navbar-custom ul.nav li svg polygon, .navbar-custom ul.nav li svg rect {
  transition: fill 0.47s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.navbar-custom ul.nav li.open, .navbar-custom ul.nav li.active {
  background-color: transparent;
}
.navbar-custom ul.nav li.open a, .navbar-custom ul.nav li.active a {
  background-color: transparent;
}
.navbar-custom ul.nav li.open a:focus, .navbar-custom ul.nav li.active a:focus {
  color: unset;
  background-color: transparent;
}
.navbar-custom ul.nav li.open a svg path, .navbar-custom ul.nav li.active a svg path {
  fill: #FF9C00 !important;
}
.navbar-custom ul.nav li.open a span, .navbar-custom ul.nav li.active a span {
  color: #FF9C00;
  transition: color 0.47s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.navbar-custom ul.nav li a {
  color: #0A5AD2;
  padding: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  transition: 0.47s color cubic-bezier(0.25, 0.1, 0.25, 1);
}
.navbar-custom ul.nav li a:hover .caret {
  /* &:before {
     visibility: visible;
   }

   &:after {
     visibility: hidden;
   }*/
}
.navbar-custom ul.nav li a span:not(.caret) {
  display: block;
  margin: 5px 0 0;
  transition: color 0.47s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.navbar-custom ul.nav li a .caret {
  position: relative;
  height: 16px;
  width: 16px;
  border: none;
  /*&:before {
    content: url('data:image/svg+xml, <svg width="16px" height="16px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.56516 10.1658C8.25278 10.4782 7.74548 10.4782 7.4331 10.1658L4.23435 6.96706C4.00444 6.73715 3.93697 6.39479 4.06192 6.0949C4.18687 5.79502 4.47676 5.6001 4.80163 5.6001H11.1991C11.5215 5.6001 11.8139 5.79502 11.9388 6.0949C12.0638 6.39479 11.9938 6.73715 11.7664 6.96706L8.56766 10.1658H8.56516Z" fill="rgb(255, 156, 0)"/></svg>');
    visibility: hidden;
    transition: visibility .17s $cubic-bezier;
  }*/
}
@media only screen and (min-width: 1024px) {
  .navbar-custom ul.nav li a .caret {
    position: absolute;
    right: -11px;
    bottom: 7px;
  }
}
.navbar-custom ul.nav li a .caret:before, .navbar-custom ul.nav li a .caret:after {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 7px;
}
.navbar-custom ul.nav li a .caret:after {
  content: url('data:image/svg+xml, <svg width="16px" height="16px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.56516 10.1658C8.25278 10.4782 7.74548 10.4782 7.4331 10.1658L4.23435 6.96706C4.00444 6.73715 3.93697 6.39479 4.06192 6.0949C4.18687 5.79502 4.47676 5.6001 4.80163 5.6001H11.1991C11.5215 5.6001 11.8139 5.79502 11.9388 6.0949C12.0638 6.39479 11.9938 6.73715 11.7664 6.96706L8.56766 10.1658H8.56516Z" fill="rgb(10, 90, 210)"/></svg>');
  visibility: visible;
  transition: visibility 0.17s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.navbar-custom ul.nav li ul.dropdown-menu li:focus, .navbar-custom ul.nav li ul.dropdown-menu li:focus-visible {
  border: unset;
  outline: unset;
}
.navbar-custom ul.nav li ul.dropdown-menu li a {
  padding: 10px;
}
.navbar-custom ul.nav li ul.dropdown-menu li a:focus, .navbar-custom ul.nav li ul.dropdown-menu li a:focus-visible {
  border: none;
  outline: unset;
}
.navbar-custom ul.nav li ul.dropdown-menu li.active a {
  color: #ff9600;
}
@media only screen and (min-width: 1024px) {
  .navbar-custom ul.nav li.profile-item {
    height: 100%;
    padding: 0 0 0 20px;
    margin-left: 15px;
  }
}
.navbar-custom ul.nav li.profile-item:before, .navbar-custom ul.nav li.profile-item:after {
  content: "";
  position: absolute;
  top: -5px;
  display: block;
  z-index: 15;
  width: 1px;
  height: calc(100% + 5px);
  background-color: #D6DBE1;
  transition: background-color 0.47s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.navbar-custom ul.nav li.profile-item:before {
  left: 0;
}
.navbar-custom ul.nav li.profile-item:after {
  right: -40px;
}
@media only screen and (min-width: 1024px) {
  .navbar-custom ul.nav li.profile-item > a {
    display: flex;
    align-items: center;
    position: relative;
    color: #0A5AD2;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    transition: color 0.47s cubic-bezier(0.25, 0.1, 0.25, 1);
  }
}
.navbar-custom ul.nav li.profile-item .user-image {
  display: inline-block;
  margin: 0 5px 0 0;
  padding: 2px;
  border-radius: 50%;
  border: 2px solid #FF9C00;
}
.navbar-custom ul.nav li.profile-item .user-image .user-image-inner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.navbar-custom ul.nav li.profile-item .user-image .user-image-inner svg {
  height: 40px;
  width: 40px;
}
.navbar-custom ul.nav li.profile-item .user-image img {
  width: 100%;
  border-radius: 50%;
}
.navbar-custom ul.nav li.profile-item .caret {
  bottom: 25px;
  transition: color 0.47s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.navbar-custom ul.nav li.profile-item.open > a {
  color: #ff9600;
}
.navbar-custom .navigation-customer {
  position: relative;
  z-index: 10;
  padding-left: 30px;
}
.navbar-custom .navigation-customer:before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  z-index: -1;
  display: block;
  height: calc(100% + 6px);
  width: 100%;
  background-color: #3B7BDB;
}
.navbar-custom .navigation-customer ul.nav > li > a {
  color: #F5F6F7;
}
.navbar-custom .navigation-customer ul.nav > li > a .caret:after {
  content: url('data:image/svg+xml, <svg width="16px" height="16px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.56516 10.1658C8.25278 10.4782 7.74548 10.4782 7.4331 10.1658L4.23435 6.96706C4.00444 6.73715 3.93697 6.39479 4.06192 6.0949C4.18687 5.79502 4.47676 5.6001 4.80163 5.6001H11.1991C11.5215 5.6001 11.8139 5.79502 11.9388 6.0949C12.0638 6.39479 11.9938 6.73715 11.7664 6.96706L8.56766 10.1658H8.56516Z" fill="rgb(231, 239, 251)"/></svg>');
}
.navbar-custom .navigation-customer ul.nav > li > a svg path, .navbar-custom .navigation-customer ul.nav > li > a svg polygon, .navbar-custom .navigation-customer ul.nav > li > a svg rect {
  fill: #F5F6F7;
}
.navbar-custom .navigation-customer ul.nav li.profile-item {
  position: relative;
  z-index: 10;
}
.navbar-custom .navigation-customer ul.nav li.profile-item:before {
  z-index: -1;
  top: -21px;
  height: calc(100% + 37px);
  width: 100vw;
  background-color: #0A5AD2;
  transition: background-color 0.47s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.navbar-custom .navigation-customer ul.nav li.profile-item .user-image {
  border: none;
}
.navbar-custom .navigation-customer ul.nav li.profile-item:after {
  display: none;
}
.navbar-custom .navigation-customer ul.nav li.profile-item.open > a {
  color: #fff;
}
.navbar-custom .navigation-customer ul.nav li.profile-item.open > a .caret {
  color: #fff;
}
.navbar-custom .collapse.in {
  position: absolute;
  left: 0;
  top: 100%;
  display: block !important;
  width: 100%;
  padding: 0;
  background-color: #fff;
  overflow: hidden;
  border-top: 0.5px solid #CEDEF6;
}
@media only screen and (min-width: 1024px) {
  .navbar-custom .collapse.in {
    padding: 10px 15px;
  }
}
.navbar-custom .collapse.in .nav-wrapper {
  display: block;
  float: unset;
  padding: 0;
}
.navbar-custom .collapse.in .nav-wrapper select {
  height: 30px !important;
}
.navbar-custom .collapse.in .navigation {
  display: block;
  float: unset;
  padding: 0;
}
.navbar-custom .collapse.in .navigation.navigation-customer:before {
  display: none;
}
.navbar-custom .collapse.in .navigation.navigation-customer a {
  color: #000;
}
.navbar-custom .collapse.in .navigation.navigation-customer a .caret {
  color: #000;
}
.navbar-custom .collapse.in .navigation ul.navbar-nav {
  display: block;
  float: unset !important;
  margin: 0;
}
.navbar-custom .collapse.in .navigation ul.navbar-nav .dropdown .caret:after {
  content: url('data:image/svg+xml, <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8.94527 12.7803C9.25209 13.0732 9.75036 13.0732 10.0572 12.7803L14.7699 8.2812C15.0767 7.98828 15.0767 7.5126 14.7699 7.21968C14.4631 6.92677 13.9648 6.92677 13.658 7.21968L9.5 11.1892L5.34202 7.22203C5.0352 6.92912 4.53693 6.92912 4.23011 7.22203C3.9233 7.51494 3.9233 7.99063 4.23011 8.28354L8.94282 12.7827L8.94527 12.7803Z" fill="black"/> </svg>');
}
.navbar-custom .collapse.in .navigation ul.navbar-nav .profile-item {
  margin: 0;
}
@media only screen and (min-width: 1024px) {
  .navbar-custom .collapse.in .navigation ul.navbar-nav .profile-item {
    padding: 2px 5px 4px;
  }
}
.navbar-custom .collapse.in .navigation ul.navbar-nav .profile-item .user-image {
  display: none;
}
.navbar-custom .collapse.in .navigation ul.navbar-nav .profile-item .caret {
  bottom: 11px;
}
.navbar-custom .collapse.in .navigation ul.navbar-nav .profile-item .caret:after {
  content: url('data:image/svg+xml, <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8.94527 12.7803C9.25209 13.0732 9.75036 13.0732 10.0572 12.7803L14.7699 8.2812C15.0767 7.98828 15.0767 7.5126 14.7699 7.21968C14.4631 6.92677 13.9648 6.92677 13.658 7.21968L9.5 11.1892L5.34202 7.22203C5.0352 6.92912 4.53693 6.92912 4.23011 7.22203C3.9233 7.51494 3.9233 7.99063 4.23011 8.28354L8.94282 12.7827L8.94527 12.7803Z" fill="black"/> </svg>');
}
.navbar-custom .collapse.in .navigation ul.navbar-nav .profile-item:before, .navbar-custom .collapse.in .navigation ul.navbar-nav .profile-item:after {
  display: none;
}
.navbar-custom .collapse.in .navigation ul.navbar-nav > li {
  display: block;
  float: unset;
}
.navbar-custom .collapse.in .navigation ul.navbar-nav > li > a {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  text-align: left;
}
.navbar-custom .collapse.in .navigation ul.navbar-nav > li > a svg {
  display: none;
}
.navbar-custom .collapse.in .navigation ul.navbar-nav > li .dropdown-menu {
  position: unset;
  width: 100%;
  box-shadow: none;
  border: none;
}
.navbar-custom .collapse.in .navigation ul.navbar-nav > li .dropdown-menu li a {
  text-align: left;
}

.dark-mode .navbar-custom {
  background: #000000;
  border-color: #000000;
}
.dark-mode .navbar-custom .navbar-header .navbar-brand .logo-darkmode {
  display: block;
}
.dark-mode .navbar-custom .navbar-header .navbar-brand .logo-normal {
  display: none;
}
.dark-mode .navbar-custom .navbar-header .navbar-toggle .icon-bar {
  background-color: #5194F8;
}
.dark-mode ul.nav li:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.dark-mode ul.nav li.open, .dark-mode ul.nav li.active {
  background-color: transparent;
}
.dark-mode ul.nav li.open a, .dark-mode ul.nav li.active a {
  background-color: transparent;
}
.dark-mode ul.nav li.open a:focus, .dark-mode ul.nav li.active a:focus {
  background-color: transparent;
}
.dark-mode ul.nav li.open a:hover, .dark-mode ul.nav li.active a:hover {
  color: unset;
}
.dark-mode ul.nav li.open a:hover span, .dark-mode ul.nav li.active a:hover span {
  color: #5194F8;
}
.dark-mode ul.nav li.open a svg path, .dark-mode ul.nav li.active a svg path {
  fill: #FF9C00 !important;
}
.dark-mode ul.nav li.open a span, .dark-mode ul.nav li.active a span {
  color: #FF9C00;
}
.dark-mode ul.nav li a {
  color: #5194F8;
}
.dark-mode ul.nav li a:hover {
  color: #5194F8;
}
.dark-mode ul.nav li a .caret {
  /*&:before {
    content: url('data:image/svg+xml, <svg width="16px" height="16px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.56516 10.1658C8.25278 10.4782 7.74548 10.4782 7.4331 10.1658L4.23435 6.96706C4.00444 6.73715 3.93697 6.39479 4.06192 6.0949C4.18687 5.79502 4.47676 5.6001 4.80163 5.6001H11.1991C11.5215 5.6001 11.8139 5.79502 11.9388 6.0949C12.0638 6.39479 11.9938 6.73715 11.7664 6.96706L8.56766 10.1658H8.56516Z" fill="rgb(255, 156, 0)"/></svg>');
    visibility: hidden;
    transition: visibility .17s $cubic-bezier;
  }*/
}
.dark-mode ul.nav li a .caret:after {
  content: url('data:image/svg+xml, <svg width="16px" height="16px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.56516 10.1658C8.25278 10.4782 7.74548 10.4782 7.4331 10.1658L4.23435 6.96706C4.00444 6.73715 3.93697 6.39479 4.06192 6.0949C4.18687 5.79502 4.47676 5.6001 4.80163 5.6001H11.1991C11.5215 5.6001 11.8139 5.79502 11.9388 6.0949C12.0638 6.39479 11.9938 6.73715 11.7664 6.96706L8.56766 10.1658H8.56516Z" fill="rgb(81, 148, 248)"/></svg>');
  visibility: visible;
  transition: visibility 0.17s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.dark-mode ul.nav li a svg path {
  fill: #5194F8;
}
.dark-mode ul.nav li ul.dropdown-menu {
  background-color: #000000;
}
.dark-mode ul.nav li ul.dropdown-menu li a {
  color: #5194F8;
  padding: 10px;
}
.dark-mode ul.nav li ul.dropdown-menu li a:hover {
  color: #FFB033;
}
.dark-mode ul.nav li.profile-item:before, .dark-mode ul.nav li.profile-item:after {
  background-color: #3D4248;
}
.dark-mode ul.nav li.profile-item:before {
  left: 0;
}
.dark-mode ul.nav li.profile-item:after {
  right: -40px;
}
.dark-mode ul.nav li.profile-item > a {
  color: #5194F8;
}
.dark-mode ul.nav li.profile-item > a:hover, .dark-mode ul.nav li.profile-item > a:focus {
  color: #FFB033;
}
.dark-mode ul.nav li.profile-item .user-image {
  border: 2px solid #FFB033;
}
.dark-mode ul.nav li.profile-item.open > a {
  color: #ff9600;
}
.dark-mode .navigation-customer:before {
  background-color: #4176C6;
}
.dark-mode .navigation-customer ul.nav > li > a {
  color: #121213;
}
.dark-mode .navigation-customer ul.nav > li > a .caret:after {
  content: url('data:image/svg+xml, <svg width="16px" height="16px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.56516 10.1658C8.25278 10.4782 7.74548 10.4782 7.4331 10.1658L4.23435 6.96706C4.00444 6.73715 3.93697 6.39479 4.06192 6.0949C4.18687 5.79502 4.47676 5.6001 4.80163 5.6001H11.1991C11.5215 5.6001 11.8139 5.79502 11.9388 6.0949C12.0638 6.39479 11.9938 6.73715 11.7664 6.96706L8.56766 10.1658H8.56516Z" fill="rgb(18, 18, 19)"/></svg>');
}
.dark-mode .navigation-customer ul.nav > li > a svg path, .dark-mode .navigation-customer ul.nav > li > a svg polygon, .dark-mode .navigation-customer ul.nav > li > a svg rect {
  fill: #121213;
}
.dark-mode .navigation-customer ul.nav li.profile-item {
  position: relative;
  z-index: 10;
}
.dark-mode .navigation-customer ul.nav li.profile-item:before {
  background-color: #5194F8;
  transition: background-color 0.47s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.dark-mode .navigation-customer ul.nav li.profile-item .user-image {
  border: none;
}
.dark-mode .navigation-customer ul.nav li.profile-item:after {
  display: none;
}
.dark-mode .navigation-customer ul.nav li.profile-item.open > a {
  color: #fff;
}
.dark-mode .navigation-customer ul.nav li.profile-item.open > a .caret {
  color: #fff;
}
.dark-mode .collapse.in {
  border-top-color: #3D4248;
  background-color: #000000;
}
.dark-mode .collapse.in .navigation.navigation-customer a {
  color: #EEF1F5;
}
.dark-mode .collapse.in .navigation.navigation-customer a .caret {
  color: #EEF1F5;
}
.dark-mode .collapse.in .navigation ul.navbar-nav > li {
  border-bottom-color: #3D4248;
}
.dark-mode .collapse.in .navigation ul.navbar-nav .dropdown .caret:after {
  content: url('data:image/svg+xml, <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8.94527 12.7803C9.25209 13.0732 9.75036 13.0732 10.0572 12.7803L14.7699 8.2812C15.0767 7.98828 15.0767 7.5126 14.7699 7.21968C14.4631 6.92677 13.9648 6.92677 13.658 7.21968L9.5 11.1892L5.34202 7.22203C5.0352 6.92912 4.53693 6.92912 4.23011 7.22203C3.9233 7.51494 3.9233 7.99063 4.23011 8.28354L8.94282 12.7827L8.94527 12.7803Z" fill="white"/> </svg>');
}
.dark-mode .collapse.in .navigation ul.navbar-nav .dropdown li {
  border-bottom: none;
}
.dark-mode .collapse.in .navigation ul.navbar-nav .profile-item .caret:after {
  content: url('data:image/svg+xml, <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8.94527 12.7803C9.25209 13.0732 9.75036 13.0732 10.0572 12.7803L14.7699 8.2812C15.0767 7.98828 15.0767 7.5126 14.7699 7.21968C14.4631 6.92677 13.9648 6.92677 13.658 7.21968L9.5 11.1892L5.34202 7.22203C5.0352 6.92912 4.53693 6.92912 4.23011 7.22203C3.9233 7.51494 3.9233 7.99063 4.23011 8.28354L8.94282 12.7827L8.94527 12.7803Z" fill="white"/> </svg>');
}

.kv-grid-container {
  padding-top: 10px;
}

.table-custom {
  margin: 0;
  border: none;
  border-bottom: 1px solid #3D4248;
}
.table-custom.kv-table-wrap .filters td {
  padding-bottom: 5px;
}
.table-custom thead > tr > td,
.table-custom thead > tr > th,
.table-custom tbody > tr > td {
  padding: 20px 8px 35px 20px;
  border: none;
  /*&:first-child {
    padding-left: 15px;
  }

  &:last-child {
    padding-right: 15px;
  }*/
}
.table-custom thead > tr > th,
.table-custom thead > tr > td {
  padding: 0 8px 5px 15px;
}
.table-custom thead > tr:not(.filters) > td,
.table-custom thead > tr:not(.filters) > th {
  padding: 10px 8px 8px 15px;
}
.table-custom thead > tr > th,
.table-custom tbody > tr > td {
  border-top: 1px solid #e6ebf3;
}
.table-custom thead {
  color: #5C626B;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}
.table-custom thead tr th {
  border: none;
}
.table-custom thead tr th.create-date {
  width: 9%;
}
.table-custom thead tr .log-notes-table-header {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.table-custom thead tr .log-notes-table-header a {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.table-custom thead tr.filters td {
  border-bottom: 2px solid #D6DBE1;
  /*input.form-control {
    padding-right: 25px !important;
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="8" height="6" viewBox="0 0 8 6" fill="none"><path d="M4.56516 5.16581C4.25278 5.47819 3.74548 5.47819 3.4331 5.16581L0.234353 1.96706C0.00444272 1.73715 -0.0630309 1.39479 0.0619203 1.0949C0.186871 0.795022 0.476758 0.600098 0.801631 0.600098H7.19913C7.52151 0.600098 7.81389 0.795022 7.93884 1.0949C8.0638 1.39479 7.99382 1.73715 7.76641 1.96706L4.56766 5.16581H4.56516Z" fill="rgb(122, 131, 143)"/></svg>');
    background-position: center right 10px;
    background-size: 10px;
    margin-bottom: 10px;
  }*/
}
.table-custom thead tr.filters td .form-control {
  padding: 5px !important;
  background-repeat: no-repeat;
}
.table-custom thead tr.filters td select {
  background-position: center right 6px;
  background-size: 8px;
  margin-bottom: 10px;
}
.table-custom .kv-page-summary-container {
  border: none;
}
.table-custom .kv-page-summary-container .warning td {
  background-color: #F7EAD2;
}
.table-custom .kv-page-summary-container .kv-page-summary {
  border: none;
}
.table-custom .kv-page-summary-container .kv-page-summary td {
  padding-top: 5px;
  padding-bottom: 5px;
  border: none;
}
.table-custom .kv-page-summary-container + tbody {
  border: none;
}
.table-custom tbody {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}
.table-custom tbody tr {
  position: relative;
  z-index: 10;
  transition: 0.47s background-color cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transition;
}
.table-custom tbody tr:nth-of-type(even) {
  background-color: #F5F6F7;
}
.table-custom tbody tr:nth-of-type(odd) {
  background-color: transparent;
}
.table-custom tbody tr:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  width: 6px;
  opacity: 0;
  background-color: #0159d1;
  transition: opacity 0.47s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: opacity;
}
.table-custom tbody tr:hover {
  background-color: #EEF1F5;
}
.table-custom tbody tr:hover:after {
  opacity: 1;
}
.table-custom tbody tr td.company-name {
  width: 7%;
}
.table-custom tbody tr td.company-name a {
  font-weight: 700;
}
.table-custom tbody tr td.name {
  color: #031B3F;
  font-weight: 700;
}
.table-custom tbody tr td.contact-column a {
  display: inline-block;
  margin-bottom: 4px;
}
.table-custom tbody tr td.address {
  width: 9.65%;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.table-custom tbody tr td.first-comment {
  width: 26.13%;
}
.table-custom tbody tr td.first-comment a {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.table-custom tbody tr td[class*=status] {
  width: 10%;
}
.table-custom tbody tr td.muted-column {
  width: 1%;
  padding: 0;
  text-align: right;
}
.table-custom tbody tr td.muted-column .muted {
  position: relative;
  right: -11px;
  display: block;
  padding-top: 31px;
}
.table-custom tbody tr td.last-create-date {
  width: 10.8%;
}
.table-custom tbody tr td.last-editor-name {
  width: 10%;
}
.table-custom tbody tr td.action-column {
  width: unset;
  white-space: unset;
  padding-right: 22px;
}
.table-custom tbody tr td.action-column a {
  display: block;
  text-align: center;
  /*&:last-child:not(:first-child) {
    svg {
      path {
        fill: $color-delete;
      }
    }
  }*/
}
.table-custom tbody tr td.action-column a:not(:first-child) {
  margin-top: 5px;
}
.table-custom tbody tr td.action-column a.empty-link {
  display: none;
}
.table-custom tbody tr td.action-column a svg {
  height: 15px !important;
  width: 15px !important;
}
.table-custom tbody tr td.action-column a[title=Verwijderen] svg path {
  fill: #ff012b;
}
.table-custom tbody tr td a {
  text-decoration: none;
}
.table-custom tbody tr td .last-create-date .label {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
}
.table-custom tbody tr td .last-create-date .label.icon-calendar {
  height: 11px;
  width: 13px;
}
.table-custom tbody tr td .last-create-date .label.icon-clock {
  height: 13px;
  width: 13px;
  background-image: url('data:image/svg+xml, <svg id="Warstwa_2" data-name="Warstwa 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.09 26.09"><defs><style>.cls-1 {fill: rgb(199, 204, 215);}</style></defs><g id="Layer_1" data-name="Layer 1"><g><path class="cls-1" d="M13.05,0C9.56,0,6.28,1.36,3.82,3.82,1.36,6.28,0,9.56,0,13.05s1.36,6.76,3.82,9.22c2.46,2.46,5.74,3.82,9.22,3.82s6.76-1.36,9.22-3.82c2.46-2.46,3.82-5.74,3.82-9.22s-1.36-6.76-3.82-9.22C19.81,1.36,16.53,0,13.05,0Zm8.07,21.12c-2.16,2.16-5.02,3.34-8.07,3.34s-5.92-1.19-8.07-3.34c-2.16-2.16-3.34-5.02-3.34-8.07s1.19-5.92,3.34-8.07C7.13,2.82,10,1.63,13.05,1.63s5.92,1.19,8.07,3.34c2.16,2.16,3.34,5.02,3.34,8.07s-1.19,5.92-3.34,8.07Z"/><path class="cls-1" d="M19.07,14.74l-5.21-2.23V4.08c0-.45-.37-.82-.82-.82s-.82,.37-.82,.82V13.05c0,.33,.19,.62,.49,.75l5.71,2.45c.1,.04,.21,.07,.32,.07,.32,0,.62-.19,.75-.49,.18-.41-.01-.89-.43-1.07Z"/><path class="cls-1" d="M4.89,12.23h-.82c-.45,0-.82,.37-.82,.82s.37,.82,.82,.82h.82c.45,0,.82-.37,.82-.82s-.37-.82-.82-.82Z"/><path class="cls-1" d="M20.38,13.05c0,.45,.37,.82,.82,.82h.82c.45,0,.82-.37,.82-.82s-.37-.82-.82-.82h-.82c-.45,0-.82,.37-.82,.82Z"/><path class="cls-1" d="M13.05,20.38c-.45,0-.82,.37-.82,.82v.82c0,.45,.37,.82,.82,.82s.82-.37,.82-.82v-.82c0-.45-.37-.82-.82-.82Z"/></g></g></svg>');
}
.table-custom tbody tr td .last-create-date .info {
  margin-left: 5px;
}

#grid-view-calls-filters svg {
  position: absolute;
  right: 10px;
  top: 50%;
  height: 12.8px;
  width: 11.2px;
  z-index: 20;
  transform: translateY(-50%);
}
#grid-view-calls-filters .kv-date-remove {
  display: none;
}

.table-small {
  background-color: #fff;
}
.table-small tbody > tr {
  border-bottom: 1px solid #e6ebf3;
}
.table-small tbody > tr > th,
.table-small tbody > tr > td {
  padding: 20px 10px;
  border: none;
}
.table-small tbody > tr > th {
  padding-left: 24px;
}

table.table-calls-view {
  position: relative;
  margin-bottom: 20px;
  border-bottom: none;
}
table.table-calls-view:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  display: block;
  height: 100%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: #fff;
}
table.table-calls-view tbody {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
@media only screen and (min-width: 1024px) {
  table.table-calls-view tbody {
    display: table-row-group;
  }
}
table.table-calls-view tbody tr:after {
  display: none;
  background-color: #fff;
}
table.table-calls-view tbody tr {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
table.table-calls-view tbody tr:before {
  content: "";
  position: absolute;
  width: 100vw;
  height: 2px;
  display: block;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #EEF1F5;
}
@media only screen and (min-width: 1024px) {
  table.table-calls-view tbody tr:before {
    display: none;
  }
}
@media only screen and (min-width: 1024px) {
  table.table-calls-view tbody tr {
    display: table-row;
  }
  table.table-calls-view tbody tr th, table.table-calls-view tbody tr td {
    width: unset;
  }
}
@media only screen and (min-width: 1024px) {
  table.table-calls-view tbody tr:nth-last-child(2), table.table-calls-view tbody tr:nth-last-child(3) {
    display: none;
  }
}
table.table-calls-view tbody tr:hover {
  background-color: #fff;
}
table.table-calls-view tbody tr:hover:after {
  display: none;
}
@media only screen and (min-width: 1024px) {
  table.table-calls-view tbody tr:not(:first-of-type):not(:last-of-type) th, table.table-calls-view tbody tr:not(:first-of-type):not(:last-of-type) td {
    border-bottom: 2px solid #EEF1F5 !important;
  }
}
table.table-calls-view tbody tr:last-of-type th, table.table-calls-view tbody tr:last-of-type td {
  border-bottom: none;
}
table.table-calls-view tbody tr td {
  width: unset;
}
table.table-calls-view tbody tr td a {
  font-size: inherit;
}
table.table-calls-view tbody tr td .description {
  color: #031B3F;
  margin-left: 10px;
  font-weight: 600;
}
table.table-calls-view tbody tr th, table.table-calls-view tbody tr td {
  flex-grow: 1;
  width: 100%;
  padding: 16px 8px;
  border: none;
}
@media only screen and (min-width: 1024px) {
  table.table-calls-view tbody tr th, table.table-calls-view tbody tr td {
    width: unset;
  }
}
table.table-calls-view tbody tr th {
  padding-bottom: 0;
}
@media only screen and (min-width: 1024px) {
  table.table-calls-view tbody tr th {
    padding-bottom: 16px;
  }
}
table.table-calls-view tbody tr:nth-of-type(even) {
  background-color: #fff;
}

.dark-mode .kv-grid-container {
  background-color: #000000;
}
.dark-mode .table-custom thead {
  color: #D6DBE1;
  background-color: #000000;
}
.dark-mode .table-custom thead tr.filters td {
  border-bottom-color: #3D4248;
}
.dark-mode .table-custom tbody tr:nth-of-type(even) {
  background-color: #121213;
}
.dark-mode .table-custom tbody tr:nth-of-type(odd) {
  background-color: #000000;
}
.dark-mode .table-custom tbody tr td {
  border-color: #000000;
}
.dark-mode .table-custom tbody tr td.name {
  color: #DCEAFE;
}
.dark-mode .table-custom tbody tr td.status-new .status {
  color: #1E3759;
  background-color: #360E16;
}
.dark-mode .table-custom tbody tr td.status-waiting .status {
  color: #CC7D00;
  background-color: #432F0C;
}
.dark-mode .table-custom tbody tr td.status-waitingkf-secondary {
  color: #6397c3;
}
.dark-mode .table-custom .kv-page-summary-container .warning td {
  background-color: #432F0C;
}
.dark-mode table.table-calls-view:before {
  background-color: #000000;
}
.dark-mode table.table-calls-view tr {
  background-color: #000000 !important;
}
.dark-mode table.table-calls-view tr:before {
  background-color: #1A1A1A;
}
.dark-mode table.table-calls-view tbody tr td .description {
  color: #B9D4FC;
}

.login-page-wrapper {
  height: 100vh;
  width: 100vw;
  background-color: #fff;
}
.login-page-wrapper .container-custom, .login-page-wrapper .branche-container {
  position: relative;
  max-width: 1170px;
  height: 100%;
}

.login-image {
  position: absolute;
  bottom: 0;
  left: 30px;
  z-index: 30;
  display: none;
}
@media only screen and (min-width: 1024px) {
  .login-image {
    display: block;
    max-width: 410px;
  }
}
@media only screen and (min-width: 1200px) {
  .login-image {
    max-width: 440px;
    left: 80px;
  }
}
@media only screen and (min-width: 1921px) {
  .login-image {
    max-width: 490px;
  }
}

.form-login-wrapper {
  display: flex;
  justify-content: flex-end;
  max-width: 775px;
  width: 100%;
  margin: 100px auto 0;
  padding: 56px 30px;
  background-color: #EEF1F5;
}
@media only screen and (min-width: 768px) {
  .form-login-wrapper {
    border-top-left-radius: 200px;
  }
}
@media only screen and (min-width: 1024px) {
  .form-login-wrapper {
    float: right;
  }
}
@media only screen and (min-width: 1921px) {
  .form-login-wrapper {
    margin: 150px 0 0;
  }
}
.form-login-wrapper .login-wrapper-inner {
  max-width: 540px;
  width: 100%;
}
.form-login-wrapper .form-login-logo {
  margin-top: 50px;
  max-width: 349px;
}
.form-login-wrapper .form-login {
  margin-top: 40px;
  padding: 0 0 30px;
}
@media only screen and (min-width: 768px) {
  .form-login-wrapper .form-login {
    margin-top: 116px;
    padding: 0 95px 33px 0;
  }
}
.form-login-wrapper .form-login .form-login-heading {
  margin: 0 0 40px;
  color: #0159d1;
}
.form-login-wrapper .form-login > .form-group {
  margin: 0 0 21px;
}
.form-login-wrapper .form-login > .form-group input {
  height: 49px !important;
  padding: 5px 20px 4px !important;
}
.form-login-wrapper .form-login .form-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 23px 0 0;
}
.form-login-wrapper .form-login .forgot-link {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.form-login-wrapper .form-login .button {
  padding: 11px 47px !important;
  font-size: 18px !important;
  line-height: 24px !important;
}
.form-login-wrapper .form-login .help-block {
  margin: 5px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.form-forgot-wrapper {
  float: unset;
  margin-inline: auto;
}

.branche {
  margin: 15px -15px 0 -15px;
}
.branche .branche-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  list-style: none;
  padding: 0;
}
.branche .branche-list .item {
  display: inline-block;
  width: 100%;
  padding: 15px;
}
.branche .branche-list .item:hover .item-inner {
  transform: scale(1.05);
  text-decoration: none;
}
@media only screen and (min-width: 576px) {
  .branche .branche-list .item {
    width: 50%;
  }
}
@media only screen and (min-width: 1024px) {
  .branche .branche-list .item {
    width: 25%;
  }
}
.branche .branche-list .item:first-child .gradient-bg {
  fill: url(#gradient);
}
.branche .branche-list .item:nth-child(2) .gradient-bg {
  fill: url(#gradient2);
}
.branche .branche-list .item:nth-child(3) .gradient-bg {
  fill: url(#gradient3);
}
.branche .branche-list .item:last-child rect {
  fill: #9e9f9e;
}
.branche .branche-list .item:last-child .gradient-bg {
  fill: url(#gradient4);
}
.branche .branche-list .item .item-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px 0;
  background-color: #fff;
  border-top-left-radius: 70px;
  transition: transform 0.47s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}
.branche .branche-list .item .item-name {
  margin-top: 20px;
}
.branche .branche-list .item .item-image svg {
  height: 86px;
  width: 73px;
}

.breadcrumb {
  margin: 0 0 10px;
  padding: 3px 0;
  background-color: transparent;
}
.breadcrumb li {
  color: #3D4248 !important;
  font-family: "muli", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.breadcrumb li a {
  color: #FF9C00;
}
.breadcrumb li a:hover {
  color: #ffa422;
}

.dark-mode .breadcrumb li {
  color: #EEF1F5 !important;
}
.dark-mode .breadcrumb li a {
  color: #FFB033;
}

.layout:after {
  content: "";
  display: table;
  clear: both;
}
.layout > .layout-right, .layout > .layout-left {
  float: left;
}
@media only screen and (min-width: 1024px) {
  .layout > .layout-right, .layout > .layout-left {
    display: inline-block;
  }
}
@media only screen and (min-width: 1024px) {
  .layout > .layout-left {
    width: 50%;
  }
}
@media only screen and (min-width: 1024px) {
  .layout > .layout-right {
    width: 50%;
  }
}

.layout-top .layout-left {
  width: 40%;
  float: left;
}
.layout-top .layout-right {
  width: 60%;
  float: left;
}
.layout-top .layout-right .layout-right-inner {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  position: relative;
  z-index: 10;
}

.layout-top-form {
  display: flex;
  align-items: center;
}
.layout-top-form .layout-left {
  width: 50%;
}
.layout-top-form .layout-right {
  width: 50%;
}
.layout-top-form .layout-right > .btn-group {
  float: right;
  padding-top: 10px;
}
.layout-top-form .layout-right > .btn-group .dropdown-menu.kv-checkbox-list {
  overflow: hidden;
}
.layout-top-form .layout-right > .btn-group .dropdown-menu.kv-checkbox-list .checkbox label input[type=checkbox] {
  width: unset !important;
  right: 10px;
}

.layout-table-summary {
  display: flex;
  align-items: center;
  padding: 0 15px;
}
.layout-table-summary .layout-left {
  width: 50%;
}
.layout-table-summary .layout-right {
  position: relative;
  width: 50%;
  text-align: right;
}

.layout-top-call-view {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 30px;
}
.layout-top-call-view .layout-left {
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .layout-top-call-view .layout-left {
    width: 18%;
  }
}
.layout-top-call-view .layout-right {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .layout-top-call-view .layout-right {
    justify-content: flex-start;
    width: 82%;
  }
}
.layout-top-call-view .layout-right .button {
  margin: 0 2.5px !important;
}
.layout-top-call-view .layout-right .call-area-in-call-view {
  margin: 0 2.5px;
}
.layout-top-call-view .layout-right .call-area-in-call-view .all-input-area-inline {
  display: inline-flex;
}
.layout-top-call-view .layout-right .call-area-in-call-view .all-input-area-inline input {
  margin-bottom: 0 !important;
}

.layout-invoices-form .layout-right {
  text-align: right;
}

.grid-view-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.grid-view-top .title {
  display: none;
  flex-grow: 1;
}
@media only screen and (min-width: 1024px) {
  .grid-view-top .title {
    display: block;
  }
}
.grid-view-top h1 {
  display: none;
  margin: 0;
}
@media only screen and (min-width: 1024px) {
  .grid-view-top h1 {
    display: inline;
  }
}
.grid-view-top .buttons {
  justify-self: end;
}
.grid-view-top .buttons .button:not(:last-child) {
  margin-right: 8px !important;
}

.invoices-index .grid-view-top .title, .invoices-index .grid-view-top h1 {
  display: block;
}
.invoices-index .grid-view {
  display: block;
}
.invoices-index .grid-view .table-custom tr th:last-of-type, .invoices-index .grid-view .table-custom tr td:not(td[colspan*="3"]):last-of-type {
  display: none;
}
@media only screen and (min-width: 1024px) {
  .invoices-index .grid-view .table-custom tr th:last-of-type, .invoices-index .grid-view .table-custom tr td:not(td[colspan*="3"]):last-of-type {
    display: table-cell;
  }
}

.broker-mobile-view {
  padding: 0 8px;
}
.broker-mobile-view .summary {
  padding: 0 8px;
}

.calls-view .calls-view-inner {
  margin: 0 auto;
  padding: 16px;
}

.calls-view-top {
  display: flex;
  justify-content: space-between;
  max-width: 896px;
  margin: 0 auto 20px;
  padding: 0 16px;
}

.top-calls-view {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}
.top-calls-view:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  height: 100%;
  width: 100vw;
  background-color: #fff;
  transform: translateX(-50%);
}
.top-calls-view .table.table-calls-view {
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .top-calls-view .table.table-calls-view {
    width: 50%;
  }
}
.top-calls-view .table.table-calls-view:before {
  display: none;
}
.top-calls-view .information-block {
  width: 50%;
  position: relative;
  display: none;
}
@media only screen and (min-width: 1024px) {
  .top-calls-view .information-block {
    display: block;
  }
}

.dark-mode .top-calls-view:before {
  background-color: #000000;
}

.grid-view-custom {
  display: none;
  margin: 30px 0 0;
  background-color: #fff;
  overflow-x: auto;
}
@media only screen and (min-width: 1024px) {
  .grid-view-custom {
    display: block;
  }
}
.grid-view-custom .summary {
  padding: 8px 24px 8px 16px;
  color: #7B7B7B;
  font-family: "muli", sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
}
.grid-view-custom .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 15px 0;
  border-radius: 0;
}
.grid-view-custom .pagination li {
  padding: 0 5px;
}
.grid-view-custom .pagination li.active a {
  background-color: #0159d1;
}
.grid-view-custom .pagination li span {
  border-radius: unset;
  border: none;
}
.grid-view-custom .pagination li a {
  border-radius: unset;
  border: none;
}

.view-broker {
  display: none;
}
@media only screen and (min-width: 1024px) {
  .view-broker {
    display: block;
  }
}

.customerusage {
  display: flex;
  flex-direction: column;
  margin: 0 24px 0 0;
}
.customerusage .usage-this-month {
  color: #7A838F;
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
}
@media only screen and (min-width: 1024px) {
  .customerusage .usage-this-month {
    font-size: 14px;
    line-height: 22px;
  }
}
.customerusage .usage-last-month {
  color: #7A838F;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
}

.grid-view-calls {
  display: none;
}
@media only screen and (min-width: 1024px) {
  .grid-view-calls {
    display: block;
  }
}

.heading-ribbon {
  position: relative;
  z-index: 10;
}
.heading-ribbon:before {
  content: "";
  position: absolute;
  top: -21px;
  left: 0;
  z-index: 15;
  display: block;
  width: 95px;
  height: 3px;
  background-color: #ff9600;
}

.heading-secondary {
  padding-left: 15px;
  text-decoration: none;
}

.grid-top .customerusage {
  position: relative;
  z-index: 10;
  margin: 4px 29px 0 0;
}
.grid-top .customerusage .icon-clock {
  position: absolute;
  left: -55px;
  z-index: 15;
  height: 41px;
  width: 41px;
}
.grid-top .customerusage .customerusage-inner p {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.grid-top .customerusage .customerusage-inner p:last-child {
  font-size: 10px;
}
.grid-top .customerusage .customerusage-inner p span {
  color: #ff9600;
  font-size: 18px;
  font-weight: 700;
}
.grid-top .customerusage .customerusage-inner p strong {
  font-size: 14px;
}
.grid-top .buttons {
  margin: -4px 0 0;
}
.grid-top .buttons .button {
  margin: 0 5px 0 !important;
}
.grid-top .buttons .button:last-child {
  margin-right: 0 !important;
}
.grid-top .top-form {
  margin-right: 10px;
}

.company-top .top-form .button {
  bottom: 0 !important;
}

.top-form {
  position: relative;
  z-index: 10;
}
.top-form:after {
  content: "";
  display: table;
  clear: both;
}
.top-form .form-group {
  float: left;
}
.top-form .button {
  position: relative;
  bottom: -21px;
  margin-left: 10px !important;
}

.buttons-in-grid {
  display: inline-block;
  float: right;
  padding-bottom: 10px;
}

.calls-index .table-custom tbody td.action-column a:last-child:not(:first-child) svg path {
  fill: #0159d1;
}

.customer-index .layout-table-summary {
  padding-left: 0;
}
.customer-index .grid-view-custom .summary {
  padding-left: 5px !important;
}
.customer-index .table-custom thead > tr > td:first-child,
.customer-index .table-custom thead > tr > th:first-child,
.customer-index .table-custom tbody > tr > td:first-child {
  padding-left: 10px;
}
.customer-index .table-custom thead > tr > td:last-child,
.customer-index .table-custom thead > tr > th:last-child,
.customer-index .table-custom tbody > tr > td:last-child {
  padding-right: 0;
}
.customer-index .table-custom tbody > tr > td {
  white-space: unset;
}

.company-products-index .form-horizontal {
  padding: 0 15px 30px;
}

.company-products-index form {
  position: relative;
}
.company-products-index form:after {
  content: "";
  display: table;
  clear: both;
}

.custom-wrapper {
  position: relative;
  background-color: #fff;
  padding: 30px 24px;
  margin: 25px 0 0;
}
.custom-wrapper:after {
  content: "";
  display: table;
  clear: both;
}
.custom-wrapper .latest-log-area .table-custom tbody tr td {
  white-space: unset;
}
.custom-wrapper .form-info {
  max-width: 500px;
  margin-left: 15px;
}

.call-create-wrapper {
  z-index: 10;
}
.call-create-wrapper:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  height: 100%;
  width: 100vw;
  background-color: #fff;
  transform: translateX(-50%);
}

.invoices-form-wrapper {
  padding: 30px 15px;
}
.invoices-form-wrapper .layout-invoices-form {
  margin: 30px 0 20px;
}

.dropdown-menu {
  right: 0;
  left: unset;
}
.dropdown-menu li .checkbox label {
  display: flex;
  align-items: center;
}
.dropdown-menu button {
  border: none;
  background: transparent;
  padding: 3px 20px;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

div[class*=icon-],
span[class*=icon-] {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.glyphicon .glyphicon-ok {
  margin: 0;
}

/* The switch - the box around the slider */
.darkmode-switcher {
  display: flex;
  justify-content: space-between;
  padding: 8px 25px;
  border-bottom: 1px solid #EEF1F5;
}
@media only screen and (min-width: 1024px) {
  .darkmode-switcher {
    display: block;
    margin: -2px 0 0 15px;
    padding: 0;
    border: none;
  }
}
.darkmode-switcher .darkmode-info {
  margin-bottom: 7px;
  color: #7A838F;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

label.switch {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 15px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border: 1px solid #000;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 0;
  bottom: 0;
  background-color: white;
  border: 1px solid #000;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #382828;
  border-color: #fff;
}

input:focus + .slider {
  box-shadow: 0 0 1px #382828;
}

input:checked + .slider:before {
  -webkit-transform: translateX(9px);
  -ms-transform: translateX(9px);
  transform: translateX(9px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.list-view-custom {
  display: none;
}

.footer {
  background-color: #EEF1F5;
}
.footer p {
  color: #7A838F;
  margin: 0;
  padding: 16px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.subject-item {
  display: inline-block;
  padding: 7px 12px 2px 12px;
  color: #5C626B;
  font-weight: 600;
  line-height: 16px;
  border: 2px solid #C2C8D1;
  border-radius: 12px;
  /*white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;*/
}

.muted-to {
  display: block;
  margin-top: 6px;
  color: #3D4248;
}
.muted-to .muted-to-inner {
  color: #7A838F;
}

.cell-container {
  display: flex;
  flex-direction: column;
}

.status {
  display: inline-block;
  padding: 12px 12px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  text-transform: uppercase;
  border-radius: 16px;
}

.status-new .status {
  color: #ff002a;
  background-color: #F6DDE2;
}

.status-waiting .status {
  color: #CC7D00;
  background-color: #F7EAD2;
}

.secondary .status {
  position: relative;
  z-index: 10;
}
.secondary .status:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 15;
  display: block;
  height: 8px;
  width: 8px;
  background-color: #CC7D00;
  border-radius: 50%;
}

.secondary-blue .status {
  position: relative;
  z-index: 10;
}
.secondary-blue .status:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 15;
  display: block;
  height: 8px;
  width: 8px;
  background-color: #0a5ad2;
  border-radius: 50%;
}

.status-inprogress .status {
  color: #22A703;
  background-color: #D6EDD2;
}

.status-waitingkf .status {
  color: #0A5AD2;
  background-color: #D2DFF1;
}

.status-waitingkf-secondary {
  color: #0A5AD2;
  background-color: #D2DFF1;
}

.timestamp {
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
}

.list-view-custom {
  display: block;
}
@media only screen and (min-width: 1024px) {
  .list-view-custom {
    display: none;
  }
}
.list-view-custom .summary {
  color: #7A838F;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
}
.list-view-custom .card {
  margin-top: 16px;
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.list-view-custom .card:last-child {
  margin-bottom: 60px;
}
.list-view-custom .card-inner:hover {
  text-decoration: none;
  color: unset;
}
.list-view-custom .card-inner .card-address {
  margin: 0;
  color: #010915;
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
}
.list-view-custom .card-inner .card-name {
  color: #3D4248;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
}
.list-view-custom .card-inner .card-comment {
  margin-top: 10px;
  padding: 8px 0;
  color: #0A5AD2;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}
.list-view-custom .card-inner .card-comment p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.list-view-custom .card-inner .card-contact-details {
  margin-top: 8px;
  padding: 8px 0;
}
.list-view-custom .card-inner .card-contact-item {
  color: #5C626B;
  font-size: 12px;
  line-height: 18px;
  margin-bottom: 4px;
}
.list-view-custom .card-inner .card-contact-item:last-child {
  margin-bottom: 0;
}
.list-view-custom .card-inner .card-contact-label {
  font-weight: 600;
  color: #3D4248;
}
.list-view-custom .card-inner .card-inner-bottom {
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.list-view-custom .card-inner .card-inner-bottom span:not(.status) {
  color: #7A838F;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
}

.datepicker {
  width: fit-content !important;
  z-index: 9999 !important;
}

.datepicker-dropdown,
.bootstrap-datetimepicker-widget,
.datetimepicker {
  z-index: 9999 !important;
}

.dropdown-menu {
  z-index: 9999 !important;
}

.kv-drp-dropdown {
  z-index: 9999 !important;
}

.calls-view-status-subject > span:last-child {
  margin-left: 16px;
}

.comment {
  position: relative;
  display: flex;
  gap: 16px;
}
.comment:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  z-index: -1;
  height: 100%;
  width: 100vw;
  background-color: #fff;
  transform: translateX(-50%);
}
@media only screen and (min-width: 1024px) {
  .comment:after {
    display: none;
  }
}
.comment.odd:after {
  background-color: #E7EFFB;
}
.comment.odd .panel {
  background-color: transparent;
}
@media only screen and (min-width: 1024px) {
  .comment.odd .panel {
    background-color: #E7EFFB;
  }
}
.comment.even .comment-image img {
  border: 2px solid #FF9C00;
}
.comment .comment-image {
  position: absolute;
  top: 27px;
}
@media only screen and (min-width: 1024px) {
  .comment .comment-image {
    position: static;
    padding-top: 10px;
  }
}
.comment .comment-image img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.comment .panel {
  flex-grow: 1;
  padding: 16px 16px 16px 40px;
  border: none;
  border-radius: unset;
  background-color: transparent;
  box-shadow: unset;
}
@media only screen and (min-width: 1024px) {
  .comment .panel {
    padding: 16px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 16px rgba(0, 0, 0, 0.1);
  }
}
.comment .panel-first {
  margin-top: 0;
}
.comment .panel-heading, .comment .panel-body, .comment .panel-footer {
  border: none;
}
.comment .panel-heading, .comment .panel-footer {
  background-color: transparent;
}
.comment .panel-footer {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 1024px) {
  .comment .panel-footer {
    display: block;
  }
}
.comment .panel-heading {
  padding-bottom: 0;
  padding-top: 0;
}
.comment .panel-heading .panel-title a:last-child {
  margin-right: 20px !important;
}
.comment .panel-heading .panel-title .panel-title-inner {
  display: flex;
  justify-content: space-between;
}
.comment .panel-heading .comments-buttons {
  display: flex;
  flex-direction: row-reverse;
}
.comment .panel-heading .comment-name {
  display: inline-block;
  margin-right: 16px;
  color: #3D4248;
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
}
.comment .panel-heading .subject-item {
  font-size: 12px;
  line-height: 16px;
}
.comment .panel-heading .company-name {
  position: relative;
  margin: 10px 0;
  display: block;
  color: #5C626B;
  font-size: 12px;
  line-height: 16px;
}
@media only screen and (min-width: 576px) {
  .comment .panel-heading .company-name {
    top: -8px;
    margin: 0;
  }
}
.comment .panel-body {
  padding-top: 5px;
}

.header-block-inner {
  margin-bottom: 10px;
}

.calls-title-container {
  flex-grow: 1;
}
.calls-title-container span {
  position: relative;
  top: -8px;
  padding-left: 6px;
  color: #031B3F;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.comments-block {
  display: flex;
  flex-direction: column;
}
.comments-block.reverse {
  flex-direction: column-reverse;
}
.comments-block.reverse .comment-form {
  display: none;
  border-bottom: none;
}
@media only screen and (min-width: 1024px) {
  .comments-block.reverse .comment-form {
    display: flex;
  }
}
.comments-block.reverse .calls-form {
  display: flex;
  flex-direction: column;
  padding-right: 16px;
}
@media only screen and (min-width: 1024px) {
  .comments-block.reverse .calls-form {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    column-gap: 16px;
  }
}
.comments-block.reverse .calls-form .field-calls-subject {
  /*grid-column: 1/2;
  grid-row: 1/2;*/
}
.comments-block.reverse .calls-form .field-callcomments-comment {
  /*grid-column: 1/2;
  grid-row: 2/3;*/
}
.comments-block.reverse .calls-form .field-callcomments-contactpersons {
  /*grid-column: 1/2;
  grid-row: 4/5;*/
}
.comments-block.reverse .calls-form .field-callcomments-contactpersons #callcomments-contactpersons {
  position: relative;
}
.comments-block.reverse .calls-form .field-callcomments-contactpersons #callcomments-contactpersons:before, .comments-block.reverse .calls-form .field-callcomments-contactpersons #callcomments-contactpersons:after {
  content: "";
  display: table;
  clear: both;
}
.comments-block.reverse .calls-form .field-callcomments-contactpersons #callcomments-contactpersons .checkbox {
  width: 100%;
  float: left;
}
.comments-block.reverse .comments-form form > .form-group {
  padding: 20px 0 0;
  border-top: 1px solid #D6DBE1;
}

.information-block {
  grid-column: 2/3;
  grid-row: 1/4;
  margin: 0 0 20px;
}
.information-block .information-block-inner {
  background-color: #fff;
  padding: 16px;
}
.information-block .information-block-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.information-block .information-block-top a {
  font-size: 14px;
  font-weight: 800;
}

.comments-form {
  width: 100%;
  padding-right: 16px;
}

.call-area-buttons {
  display: flex;
  align-items: center;
}
.call-area-buttons .buttons-right {
  flex-grow: 1;
  display: none;
}
@media only screen and (min-width: 1024px) {
  .call-area-buttons .buttons-right {
    display: block;
  }
}
.call-area-buttons .buttons-left {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.call-area-buttons .buttons-left .btn-add {
  display: none;
}
@media only screen and (min-width: 1024px) {
  .call-area-buttons .buttons-left .btn-add {
    display: block;
  }
}

.header-block-customer .call-area-buttons {
  display: none;
}
@media only screen and (min-width: 1024px) {
  .header-block-customer .call-area-buttons {
    display: flex;
  }
}

.comment-form {
  display: flex;
  gap: 15px;
  margin: 40px 0 0;
  padding-bottom: 27px;
  border-bottom: 1px solid #D6DBE1;
}
.comment-form .user-image {
  padding-top: 80px;
}
.comment-form .user-image img {
  border-radius: 50%;
  width: 40px;
}
.comment-form .form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.comment-form-broker {
  display: none;
}
@media only screen and (min-width: 1024px) {
  .comment-form-broker {
    display: flex;
  }
}

.comments-list {
  margin-top: 25px;
}

.datetimepicker {
  width: fit-content;
}

.form-horizontal .form-group {
  padding-bottom: 10px;
}

.profile-picture div[class*=col] {
  padding: 0;
}

.thumbnail {
  margin: 30px 0 0;
}

@media only screen and (min-width: 1024px) {
  .call-view-mobile {
    display: none;
  }
}

.broker-buttons-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 20;
  padding: 12px 16px;
  background-color: #fff;
  border-top: #D6DBE1;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
}
.broker-buttons-bottom .broker-buttons-inner {
  display: flex;
  justify-content: center;
  gap: 8px;
}
@media only screen and (min-width: 1024px) {
  .broker-buttons-bottom {
    display: none;
  }
}

.placeholder-user-image {
  background-color: #C2C8D1;
}

.calls-create {
  margin: 20px auto 0 auto;
  padding: 0 24px;
}
.calls-create .custom-wrapper {
  padding-left: 0;
  padding-right: 0;
}

.show-log-notes-modal {
  color: #0A5AD2;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.mobile-info {
  display: block;
  padding: 12px 24px;
  background-color: #fff;
}
@media only screen and (min-width: 1024px) {
  .mobile-info {
    display: none;
  }
}

.all-input-area-inline .call-phone-input {
  height: auto !important;
}

.dark-mode .summary {
  background-color: #000000;
}
.dark-mode .summary-mobile {
  color: #C2C8D1;
  background-color: #1A1A1A;
}
.dark-mode .customerusage .usage-this-month, .dark-mode .customerusage .usage-last-month {
  color: #C2C8D1;
}
.dark-mode .card {
  background-color: #000000;
}
.dark-mode .card .card-inner .card-address {
  color: #DCEAFE;
}
.dark-mode .card .card-inner .card-name {
  color: #EEF1F5;
}
.dark-mode .card .card-inner .card-comment {
  color: #5194F8;
}
.dark-mode .card .card-inner .card-contact-item {
  color: #ADB6C2;
}
.dark-mode .card .card-inner .card-contact-label {
  color: #C2C8D1;
}
.dark-mode .card .card-inner .card-inner-bottom {
  color: #C2C8D1;
}
.dark-mode .subject-item {
  color: #C2C8D1;
  border-color: #5C626B;
}
.dark-mode .pagination {
  background-color: #000000;
}
.dark-mode .pagination li a {
  color: #EEF1F5;
  background-color: transparent;
  border-color: #5194F8;
}
.dark-mode .pagination .active a {
  background-color: #5194F8;
  border-color: #5194F8;
}
.dark-mode .pagination .disabled {
  background-color: transparent;
}
.dark-mode .pagination span {
  color: #EEF1F5;
  font-size: 12px;
  background-color: transparent;
}
.dark-mode .muted-to {
  color: #EEF1F5;
}
.dark-mode .muted-to .muted-to-inner {
  color: #C2C8D1;
}
.dark-mode .status-new .status {
  color: #1E3759;
  background-color: #360E16;
}
.dark-mode .status-waiting .status {
  color: #CC7D00;
  background-color: #432F0C;
}
.dark-mode .status-inprogress .status {
  color: #22A703;
  background-color: #1F3F19;
}
.dark-mode .status-waitingkf .status {
  color: #5194F8;
  background-color: #1E3759;
}
.dark-mode .status-waitingkf-secondary {
  color: #6397c3;
}
.dark-mode .datepicker {
  background-color: #1A1A1A;
}
.dark-mode .datepicker:after {
  border-bottom-color: #1A1A1A;
}
.dark-mode .datepicker .next:hover, .dark-mode .datepicker .prev:hover, .dark-mode .datepicker .datepicker-switch:hover {
  color: #000000;
}
.dark-mode .datepicker table tr td.day:hover {
  color: #000000;
}
.dark-mode .calls-title-container span {
  color: #B9D4FC;
}
.dark-mode .panel {
  border: none;
  background-color: #000000;
}
.dark-mode .panel-footer small {
  color: #C2C8D1;
}
.dark-mode .comment.odd:after {
  background-color: #0C1D36;
}
.dark-mode .comment.odd .panel {
  background-color: #0C1D36;
}
.dark-mode .comment:after {
  background-color: #000000;
}
.dark-mode .comment .panel-heading .comment-name {
  color: #EEF1F5;
}
.dark-mode .comment .panel-heading .company-name {
  color: #D6DBE1;
}
.dark-mode .datetimepicker {
  background-color: #1A1A1A;
}
.dark-mode .datetimepicker thead tr:first-child th:hover {
  color: #000000;
}
.dark-mode .datetimepicker table tr td:hover {
  color: #000000;
}
.dark-mode .custom-wrapper {
  background-color: #000000;
}
.dark-mode .thumbnail {
  background-color: #000000;
}
.dark-mode .broker-buttons-bottom {
  background-color: #010915;
  border-color: #3D4248;
}
.dark-mode .darkmode-switcher {
  border-bottom-color: #3D4248;
}
.dark-mode .placeholder-user-image {
  background-color: #5C626B;
}
.dark-mode .call-create-wrapper:before {
  background-color: #000000;
}
.dark-mode .information-block .information-block-inner {
  background-color: #000000 !important;
}
.dark-mode .show-log-notes-modal {
  color: #5194F8;
}
.dark-mode .mobile-info {
  background-color: #000000;
}

.ai-summary-wrapper {
  background-color: #E7EFFB;
  padding: 16px;
  color: #ffffff;
  position: relative;
  margin: 0;
}
.ai-summary-wrapper .info {
  display: flex;
  align-items: center;
}
.ai-summary-wrapper .info .icon {
  display: flex;
  margin-right: 12px;
  flex-shrink: 0;
}
.ai-summary-wrapper .info .text-info {
  color: #0A5AD2;
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
}
.ai-summary-wrapper .ai-summary {
  margin-top: 20px;
  color: #000000;
  font-size: 14px;
}
.ai-summary-wrapper .ai-summary .ai-summary-line .ai-summary-label {
  font-weight: 700;
}

.ai-summary-ready {
  font-weight: 700;
  background: linear-gradient(to right, #E78D00, #CB2602);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  height: 20px;
  display: flex;
  width: 100%;
  gap: 5px;
  align-items: center;
}

.ai-summary-buttons {
  margin-top: 15px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ai-summary-buttons .btn {
  font-size: 12px !important;
  padding: 6px 24px !important;
  border-radius: 4px;
}
.ai-summary-buttons .btn.ai-btn-add {
  background: linear-gradient(to right, #E78D00, #CB2602);
  border: none;
  color: white;
}
.ai-summary-buttons .btn.ai-btn-add:hover {
  background: linear-gradient(to right, #d17e00, #b82202);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.ai-summary-buttons .btn.ai-btn-replace {
  background: linear-gradient(to right, #E78D00, #CB2602);
  border: none;
  color: white;
}
.ai-summary-buttons .btn.ai-btn-replace:hover {
  background: linear-gradient(to right, #d17e00, #b82202);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.ai-summary-buttons .btn.ai-btn-transcript {
  background-color: transparent;
  border-color: transparent;
  color: #000000 !important;
}
.ai-summary-buttons .btn.ai-btn-transcript:hover {
  background-color: #138496;
  border-color: #117a8b;
}

.transcription-modal .transcription-text, .transcription-modal .diarized-transcription-text {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  margin-bottom: 15px;
}

.dark-mode .ai-summary-buttons .btn.ai-btn-add {
  background-color: #1e7e34;
  border-color: #1e7e34;
}
.dark-mode .ai-summary-buttons .btn.ai-btn-add:hover {
  background-color: #155724;
  border-color: #0f4c1c;
}
.dark-mode .ai-summary-buttons .btn.ai-btn-replace {
  background-color: #d39e00;
  border-color: #d39e00;
}
.dark-mode .ai-summary-buttons .btn.ai-btn-replace:hover {
  background-color: #b08800;
  border-color: #9c7700;
}
.dark-mode .ai-summary-buttons .btn.ai-btn-transcript {
  background-color: #117a8b;
  border-color: #117a8b;
}
.dark-mode .ai-summary-buttons .btn.ai-btn-transcript:hover {
  background-color: #0e6674;
  border-color: #0c5460;
}
.dark-mode .transcription-modal .transcription-text, .dark-mode .transcription-modal .diarized-transcription-text {
  background-color: #1A1A1A;
  border-color: #5C626B;
  color: #EEF1F5;
}

.user-image-lightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.user-image-lightbox-overlay.active {
  display: flex;
}

.user-image-lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  cursor: default;
}
.user-image-lightbox-content img {
  max-width: 600px;
  max-height: 600px;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.user-image-lightbox-close {
  position: absolute;
  top: -40px;
  right: -40px;
  background-color: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: background-color 0.2s;
  color: #5C626B;
}
.user-image-lightbox-close:hover {
  background-color: #EEF1F5;
}
@media only screen and (max-width: 768px) {
  .user-image-lightbox-close {
    top: 10px;
    right: 10px;
  }
}

@media only screen and (max-width: 768px) {
  .user-image-lightbox-content img {
    max-width: 90vw;
    max-height: 90vh;
  }
}
.comment-image img,
.user-image img {
  cursor: pointer;
  transition: opacity 0.2s;
}
.comment-image img:hover,
.user-image img:hover {
  opacity: 0.8;
}
.comment-image img.placeholder-user-image,
.user-image img.placeholder-user-image {
  cursor: default;
}
.comment-image img.placeholder-user-image:hover,
.user-image img.placeholder-user-image:hover {
  opacity: 1;
}

ul.nav-tabs {
  margin-top: 30px;
}
ul.nav-tabs li {
  position: relative;
  bottom: -8px;
  margin: 0;
  background-color: #fff;
  border: none;
}
ul.nav-tabs li:not(:first-child) {
  margin-left: 10px;
}
ul.nav-tabs li.active {
  bottom: unset;
  border: none;
  box-shadow: 0 -3px 8px 2px #ddd;
}
ul.nav-tabs li.active:focus-visible {
  border: red;
}
ul.nav-tabs li.active:focus {
  border: none;
}
ul.nav-tabs li.active a {
  padding: 12px;
  font-weight: 700;
  border: none;
}
ul.nav-tabs li.active a:hover {
  color: unset;
  border: none;
  border-bottom-color: unset;
}
ul.nav-tabs li.active a:focus {
  border: none;
}
ul.nav-tabs li a {
  padding: 8px;
  margin: 0;
  border: none;
}

.tab-content {
  background-color: #fff;
}
.tab-content .grid-view-custom {
  margin: 0;
}
.tab-content .grid-view-custom .summary {
  padding: 5px 15px 10px;
}

.dark-mode ul.nav-tabs {
  margin-top: 30px;
}
.dark-mode ul.nav-tabs li {
  background-color: #000000;
}
.dark-mode ul.nav-tabs li.active {
  bottom: unset;
  border: none;
  box-shadow: 0 -3px 8px 2px #3D4248;
}
.dark-mode ul.nav-tabs li.active:focus-visible {
  border: red;
}
.dark-mode ul.nav-tabs li.active a {
  color: #fff;
}
.dark-mode .tab-content {
  background-color: #000000;
}

.modal-custom .modal-content .modal-body .calls-form .form-group .control-label {
  text-align: left;
}
.modal-custom .modal-content .modal-body .information-block {
  display: none;
}
.modal-custom .modal-content .modal-footer {
  text-align: left;
}
.modal-custom .modal-content .modal-footer .button {
  margin: 0 2.5px !important;
}
.modal-custom .modal-content .modal-footer .button:last-child {
  margin-right: 0;
}
.modal-custom .modal-content .modal-footer .table-custom tbody tr td {
  white-space: unset;
}
.modal-custom .modal-content .modal-footer .modal-buttons {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.modal.in {
  padding: 0 !important;
}
@media only screen and (min-width: 1024px) {
  .modal.in {
    padding-right: 17px !important;
  }
}
.modal.in .modal-dialog {
  height: 100%;
  width: 100%;
  margin: 0;
}
@media only screen and (min-width: 1024px) {
  .modal.in .modal-dialog {
    width: auto;
    height: unset;
    margin: 10px;
  }
}
.modal.in .modal-content {
  height: 100%;
}
@media only screen and (min-width: 1024px) {
  .modal.in .modal-content {
    height: unset;
  }
}
.modal.in .modal-header {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  background-color: #EEF1F5;
  border-bottom: none;
}
.modal.in .modal-header .modal-title {
  flex-grow: 1;
  color: #5C626B;
  font-size: 20px;
  font-weight: 800;
  line-height: 32px;
}
.modal.in .modal-header .close {
  color: #0A5AD2;
  opacity: 1;
  text-shadow: unset;
}
.modal.in .modal-body {
  height: fit-content;
  background-color: #fff;
}
.modal.in .modal-body .field-calls-subject label {
  color: #7A838F;
  font-size: 14px;
  font-weight: 800;
  line-height: 22px;
}
.modal.in .modal-body .field-callcomments-comment label {
  display: none;
}
.modal.in .modal-body textarea.form-control {
  padding: 12px !important;
}
.modal.in .modal-body .calls-form {
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.modal.in .modal-footer {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  gap: 8px;
  align-items: baseline;
  width: 100%;
  background-color: #fff;
  border-top-color: #D6DBE1;
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
}
@media only screen and (min-width: 1024px) {
  .modal.in .modal-footer {
    position: static;
    width: unset;
  }
}
.modal.in .modal-footer .comment-form-buttons {
  flex-direction: column;
  width: 100%;
}
.modal.in .modal-footer .btn {
  width: 100%;
  padding: 12px 12px 10px 12px !important;
}
.modal.in .modal-footer .btn:after {
  left: calc(50% + 38px);
  top: 50%;
  transform: translateY(-50%);
}
.modal.in .modal-footer button + button {
  margin-top: 10px !important;
}
.modal.in .modal-footer .modal-buttons button + button {
  margin-top: 0 !important;
}

@media only screen and (min-width: 1024px) {
  .update-comment-modal.modal.in .modal-footer {
    flex-direction: row;
  }
}
@media only screen and (min-width: 1024px) {
  .update-comment-modal.modal.in .modal-footer .comment-form-buttons {
    width: unset;
    flex-direction: row;
  }
}
.update-comment-modal.modal.in .modal-footer button + button {
  margin-top: 0 !important;
}

.dark-mode .modal.in .modal-header {
  border-bottom-color: #3D4248;
  background-color: #3D4248;
}
.dark-mode .modal.in .modal-header .modal-title {
  color: #D6DBE1;
}
.dark-mode .modal.in .modal-header .close {
  color: #5194F8;
}
.dark-mode .modal.in .modal-body,
.dark-mode .modal.in .modal-content,
.dark-mode .modal.in .modal-footer {
  background-color: #1F2124;
}
.dark-mode .modal.in .modal-body .field-calls-subject label {
  color: #D6DBE1;
}
.dark-mode .modal.in .modal-footer {
  border-top-color: #3D4248;
}

#updatecomment_modal .hide-update-modal {
  display: none !important;
}

.dark-mode .cke_bottom {
  background-color: #000000;
}

#diarization-settings label {
  display: block !important;
}

.ai-prompt .hint-block {
  font-size: 10px;
  color: #737373;
  font-style: italic;
}

.contact-person-own {
  color: #0A5AD2;
  font-weight: 700;
}

.contact-person-secondary {
  margin-top: 4px;
  color: #455468;
  font-size: 12px;
  line-height: 16px;
}

.mobile-call-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 2px;
  width: auto;
  margin-left: 24px;
  margin-right: 24px;
  padding: 6px 0;
  background: transparent;
  border-radius: 0;
}

.mobile-call-filter .mobile-call-filter-form {
  margin: 0;
  flex: 1 1 auto;
  padding-left: 0;
}

.mobile-call-filter .mobile-call-filter-actions {
  flex: 0 0 auto;
  margin-right: 0;
}

.mobile-call-filter .mobile-call-filter-reset {
  color: #0A5AD2;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-decoration: none;
}

.mobile-call-filter .mobile-call-filter-reset:hover,
.mobile-call-filter .mobile-call-filter-reset:focus {
  color: #0A5AD2;
  text-decoration: none;
  outline: none !important;
  box-shadow: none !important;
}

.mobile-call-filter .mobile-only-my-logs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0;
  color: #455468;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.mobile-call-filter .mobile-only-my-logs > span:first-child {
  color: #0A5AD2;
  font-weight: 700;
}

.mobile-call-filter .mobile-only-my-logs-toggle {
  position: relative;
  display: inline-flex;
  width: 38px;
  height: 22px;
}

.mobile-call-filter .mobile-only-my-logs-checkbox {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}

.mobile-call-filter .mobile-only-my-logs-slider {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #D6DBE1;
  transition: background-color 0.2s ease;
}

.mobile-call-filter .mobile-only-my-logs-slider:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.mobile-call-filter .mobile-only-my-logs-checkbox:checked + .mobile-only-my-logs-slider {
  background: #0A5AD2;
}

.mobile-call-filter .mobile-only-my-logs-checkbox:checked + .mobile-only-my-logs-slider:before {
  transform: translateX(16px);
}

.mobile-only-my-logs-empty {
  display: block;
  margin: 16px 8px 72px;
  padding: 24px 16px;
  text-align: center;
  background: #fff;
  border-radius: 8px;
}

.mobile-only-my-logs-empty img {
  width: 84px;
  height: 84px;
  margin-bottom: 12px;
}

.mobile-only-my-logs-empty p {
  margin: 0;
  color: #7A838F;
  font-size: 14px;
  line-height: 20px;
}

.mobile-top-userbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  position: absolute;
  top: 26px;
  right: 107px;
  z-index: 2000;
  pointer-events: none;
}

.mobile-top-userbar .mobile-top-userbar-image {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  border: 2px solid #FFB31E;
}

.mobile-top-userbar .mobile-top-userbar-image img,
.mobile-top-userbar .mobile-top-userbar-image svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-top-userbar .mobile-top-userbar-name {
  color: #3D71C5;
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
}

@media (min-width: 480px) and (max-width: 1023px) {
  .mobile-top-userbar .mobile-top-userbar-name {
    font-size: 16px;
    line-height: 20px;
  }
}

@media (max-width: 379px) {
  .mobile-top-userbar .mobile-top-userbar-name {
    font-size: 15px;
    line-height: 18px;
  }
}

.calls-index .list-view-custom .card-inner .card-inner-bottom .card-contact-person-inline {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  margin: 0 6px;
}

.calls-index .list-view-custom .card-inner .card-inner-bottom .card-contact-person-inline.contact-person-own {
  color: #0A5AD2;
  font-weight: 700;
}

@media (max-width: 1023px) {
  .calls-index .calls-top .buttons {
    display: none;
  }

  .calls-index .summary.summary-mobile {
    margin-top: 2px;
  }
}

.mobile-menu-userbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.mobile-menu-userbar .mobile-menu-userbar-image {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
}

.mobile-menu-userbar .mobile-menu-userbar-image img,
.mobile-menu-userbar .mobile-menu-userbar-image svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-menu-userbar .mobile-menu-userbar-name {
  color: #455468;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

@media (min-width: 1024px) {
  .mobile-call-filter {
    display: none;
  }

  .mobile-only-my-logs-empty {
    display: none;
  }

  .mobile-menu-userbar,
  .mobile-top-userbar {
    display: none;
  }
}

/*# sourceMappingURL=custom.css.map */