/*
 Template Name: Stexo - Responsive Bootstrap 4 Admin Dashboard
 Author: Themesdesign
 Website: www.themesdesign.in
 File: Main Css File
*/
/* ============
TABLES OF CSS
---------------

01. General
02. Bootstrap-custom
03. Helper
04. Waves Effect
05. Demo Only
06. Menu
07. Buttons
08. Cards
09. Email
10. Calender
11. Ecommerce
12. Project
13. Alerts
14. Pagination
15. Popover & Tooltip
16. Rangeslider
17. Sweet alert
18. Tab & Accordion
19. Form Elements
20. Form Validation
21. Form advanced
22. Form editor
23. Form summernote
24. Form upload
25. Form wizard
26. Chart
27. Tables
28. widgets
29. Maps
30. Timeline
31. Invoice
32. Pricing
33. Extra pages
34. Account pages
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap");
.accent-font {
  font-weight: normal;
  font-family: 'Roboto', sans-serif;
}
/* ==============
  General
===================*/
body {
  background-repeat: repeat;
  background-color: #f0f2f5;
  font-family: "Poppins", sans-serif;
  color: #354558;
  font-size: 13px;
}

@media (max-width: 991px) {
  body {
    overflow-x: hidden;
  }
}

html {
  overflow-x: hidden;
  position: relative;
  min-height: 100%;
}

h1, h2, h3, h4, h5, h6 {
  margin: 10px 0;
  font-family: "Poppins", sans-serif;
}

h6 {
  font-size: 14px;
}

p {
  line-height: 1.7;
}

svg {
  max-width: 100%;
}

* {
  outline: none !important;
}

.bg-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110px;
  z-index: -1;
  background-attachment: fixed;
  background-color: #EF7A1D;
}

a {
  color: #EF7A1D;
}
a.active {
  color: #EF7A1D;
}

a:hover, a:active, a:focus {
  outline: 0;
  text-decoration: none;
}

b, strong {
  font-weight: 500;
}

.fwb {font-weight: bold;}
.fwn {font-weight: normal !important;}

.text-line-through {
  text-decoration: line-through;
}

textarea {
   resize: none;
}

.cursor-pointer {
  cursor: pointer;
}

.custom-wysiwyg {
  background-color: #ffffff;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}
.custom-wysiwyg.active {
  border-color: #495057;
}
.wysiwyg-content {
  font-size: 14px;
  min-height: 94px;
  padding: 0.6rem 0.8rem;
  overflow-y: auto;
  color: #354558;
}
.wysiwyg-content p {
  margin-bottom: 0;
  line-height: 1.5;
}
.wysiwyg-content ul {
  margin-left: -21px;
  margin-bottom: 0;
}
.wysiwyg-content ol {
  margin-left: -25px;
  margin-bottom: 0;
}
.wysiwyg-content a:hover {
  text-decoration: underline;
  cursor: pointer;
}
.wysiwyg-content .blockquote {
 font-size: 14px;
 padding: 2px 12px;
 border-left-width: 3px;
 border-left-color: #e6e6e6;
}
.wysiwyg-tools {
  padding: 0.5rem 0.9rem;
  border-top: 1px solid #f1f1f1; 
}
.wysiwyg-format-tools {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}
.wysiwyg-tools-icon {
  position: relative;
  width: 24px;
  height: 24px;
  font-size: 16px;
  border-radius: 4px;
  color: #616f80;
  margin: 0 2px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  display: inline-block;
}
.wysiwyg-tools-icon.active {
  color: #354558;
  background-color: #e6e6e6;
}
.wysiwyg-tools-icon:hover {
  color: #616f80;
  background-color: #f1f1f1;
}
.wysiwyg-tools-icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.custom-wysiwyg.disabled-actions .wysiwyg-tools {
  opacity: 0.4;
}
.custom-wysiwyg.disabled-actions .wysiwyg-tools .dropdown-toggle,
.custom-wysiwyg.disabled-actions .wysiwyg-tools .wysiwyg-format-tools a,
.custom-wysiwyg.disabled .wysiwyg-tools .dropdown-toggle,
.custom-wysiwyg.disabled .wysiwyg-tools .wysiwyg-format-tools a {
  cursor: default;
}
.custom-wysiwyg.disabled-actions .wysiwyg-tools .wysiwyg-format-tools a:hover,
.custom-wysiwyg.disabled .wysiwyg-tools .wysiwyg-format-tools a:hover {
  background-color: transparent;
}
.custom-wysiwyg.disabled {
  opacity: 0.5;
  cursor: default;
}
.custom-wysiwyg.disabled .wysiwyg-tools {
  opacity: 0.6;
}

.container-alt {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

#wrapper {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.slimScrollDiv {
  height: auto !important;
}

/* ==============
  Bootstrap-custom
===================*/

.opacity-4 {
  opacity: 0.4;
}

.dropdown-menu {
  padding: 0;
  font-size: 13px;
  /*-webkit-filter: drop-shadow(0px 8px 10px rgba(0,0,0,0.07)) drop-shadow(0px 8px 5px rgba(0,0,0,0.09));*/
  /*filter: drop-shadow(0px 8px 10px rgba(0,0,0,0.07)) drop-shadow(0px 8px 5px rgba(0,0,0,0.09));*/
  box-shadow: 0 0 50px 0 rgb(82 63 105 / 15%);
  background-color: #ffffff;
  border-color: #dbdbdb;
  margin: 0;
  border-radius: 6px;
  /*border-top-left-radius: 0;
  border-top-right-radius: 0;*/
}
.dropdown-menu.normal-radius {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.list-mentions {
  width: 224px;
  border: none;
  box-shadow: 0 8px 20px 0 rgba(0,0,0,0.3);
  border-radius: .25rem;
  max-height: 250px;
  overflow-y: auto;
}
.list-mentions li a {
  display: block;
  padding: 9px 10px;
  color: #212529;
  /*font-weight: 500;*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-mentions li a:hover {
  background-color: #EF7A1D;
  color: #ffffff;
}
.mention_image {
  border-radius: 50%;
  width: 24px !important;
  height: 24px !important;
  margin-right: 6px;
}

.datepicker {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  z-index: 1200 !important;
}

.dropdown.dd-radius .dropdown-toggle {
  display: block;
  position: relative;
  z-index: 1;
}
.dropdown.dd-radius .dropdown-toggle:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  background-color: #EF7A1D;
  border-radius: 34px;
  opacity: 0.1;
  z-index: -1;
}
.dropdown.dd-radius.white-hover .dropdown-toggle:hover:before {
  background-color: #ffffff;
  opacity: 0.15;
}
.dropdown.dd-radius.normal-hover .dropdown-toggle:hover:before {
  background-color: transparent;
}
.dropdown.dd-radius .dropdown-menu {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.dropdown.dd-radius .dropdown-menu .dropdown-item:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.dropdown.dd-radius .dropdown-menu .dropdown-item {
  padding: .8rem 1rem;
}
.dropdown.dd-radius .dropdown-menu .dropdown-item i {
  width: 27px;
}

.dd-input .btn {
  text-align: left;
  border-color: #ced4da;
}
.dd-input .btn:hover {
  color: #354558;
  border-color: #ced4da;
}
.dd-input .dropdown-toggle::after {
  float: right;
  margin-top: 0.5rem;
}
.info-input {
  display: inline-block;
  vertical-align: middle;
}

.dropdown-item-text {
  border-bottom: 1px solid #e9ecef;
  padding: 1rem;
  margin: 0;
}

.dropdown-item {
  background-color: #ffffff;
  padding: .8rem 1rem;
  border-bottom: 1px solid #e9ecef;
}
.ws-wrap {
 white-space: initial !important;
}
.dropdown-item:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom: none;
}
.dropdown-item:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.dropdown-item:active, .dropdown-item:hover {
  background-color: #f3f6f9;
  color: #354558;
}

.dropdown-item.active, .dropdown-item:active {
  background-color: #f3f6f9;
  color: #354558;
}
.dropdown-item.disabled {
  color: rgb(156, 168, 179) !important;
}

.card-notif {
  padding: 1.5rem;
}

.notify-all {
  background-color: #EF7A1D;
  color: #ffffff;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border-color: #EF7A1D;
  font-size: 14px;
}
.notify-all:active, .notify-all:hover {
  background-color: #EF7A1D;
  color: #ffffff;
}

.dropdown-menu-animated {
  display: block;
  visibility: hidden;
  opacity: 0;
  transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  margin-top: 20px !important;
}

.show > .dropdown-menu {
  visibility: visible;
  opacity: 1;
  margin-top: -2px !important;
}

.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #9ca8b3;
  content: "\f105" !important;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

.blockquote {
  padding: 10px 20px;
  margin-bottom: 20px;
  border-left: 4px solid #e9ecef;
}

.blockquote-reverse {
  border-left: 0;
  border-right: 4px solid #e9ecef;
  text-align: right;
}

.bg-primary {
  background-color: #EF7A1D !important;
}

.bg-success {
  background-color: #02c58d !important;
}

.bg-info {
  background-color: #59c6fb !important;
}

.bg-warning {
  background-color: #fcbe2d !important;
}

.bg-danger {
  background-color: #fc5454 !important;
}

.bg-muted {
  background-color: #9ca8b3 !important;
}

.bg-secondary {
  background-color: #616f80 !important;
}

.bg-white {
  background-color: #ffffff !important;
}

.bg-white-smoke {
  background-color: #fafafa !important;
}

.bg-lighter-gray {
  background-color: rgb(247, 249, 250);
}

.bg-lighter {
  background-color: rgb(220, 225, 230) !important;
}

.bg-lighten-primary {
  background-color: #c4caed;
}

.bg-lighten-success {
  background-color: #aefee7;
}

.bg-lighten-info {
  background-color: #bde8fd;
}

.bg-lighten-warning {
  background-color: #fddd92;
}

.bg-lighten-danger {
  background-color: #feb8b8;
}

.bg-lighten-secondary {
  background-color: #dfe3e7;
}

.bg-soft-green {
  background-color: rgb(233, 247, 244);
}
.bg-soft-red {
  background-color: rgb(252, 237, 235);
}
.bg-soft-blue {
  background-color: rgb(235, 246, 255);
}
.bg-soft-yellow {
  background-color: rgb(255, 248, 235);
}

.text-white {
  color: #ffffff !important;
}

.text-danger {
  color: #fc5454 !important;
}

.text-muted {
  color: #9ca8b3 !important;
}

.text-primary {
  color: #EF7A1D !important;
}

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

.text-blue {
  color: #6495ED !important;
}

.text-pink {
  color: #E37383 !important;
}

.text-purple {
  color: #9467bd !important;
}

.text-green-2 {
  color: #EF7A1D !important;
}

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

.text-success {
  color: #02c58d !important;
}

.text-info {
  color: #59c6fb !important;
}

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

.text-secondary {
  color: #616f80 !important;
}

.link-black {
  color: #354558;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.link-black:hover {
  color: #EF7A1D;
}

.link-dark {
  color: #616f80;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.link-dark:hover {
  color: #EF7A1D;
}

.black-link {
  color: #354558;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.black-link:hover {
  color: #EF7A1D;
}

.link-muted {
  color: #9ca8b3;
}
.link-muted:hover {
  color: #EF7A1D;
}

.l-text-right {
  text-align: right;
}

.l-ml-2 {
  margin-left: 0.75rem;
}
.l-ml-3 {
  margin-left: 1rem;
}
.l-ml-4 {
  margin-left: 1.5rem;
}

.l-mr-2 {
  margin-right: 0.75rem;
}
.l-mr-3 {
  margin-right: 1rem;
}
.l-mr-4 {
  margin-right: 1.5rem;
}
.l-mr-5 {
  margin-right: 3rem;
}

.pl-2rem {
  padding-left: 2rem;
}
.l-px-4 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.l-px-5 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.l-mb-5 {
  margin-bottom: 3rem;
}

.select-normal {
  min-width: 125px;
}

.select-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.select-group .select2-container .select2-selection--single {
  height: 35px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.select-group .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.7;
}
.select-group .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.select-14 .select2-container .select2-selection--single {
  height: 35px;
}
.select-14 .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.7;
  font-size: 14px;
}

.flex-normal {
  display: flex;
  align-items: center;
}
.flex-wrap {
  display: flex;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-1 {
  flex: 1;
}
.flex-end {
  justify-content: flex-end;
}
.l-flex {
  display: flex;
  align-items: center;
}

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

.select-100 .select2-container {
  width: 100% !important;
}

.big-text {
  font-size: 44px;
  font-weight: 500;
}

.custom-accordion {
  margin-top: 1rem;
}
.custom-accordion .panel-title {
  padding: 1rem 0.9rem;
  /*background-color: #f1f1f1;*/
  border-bottom: 1px solid #e9ecef;
  font-size: 17px;
  cursor: pointer;
}
.custom-accordion .panel:last-child .panel-title {
  border-bottom: none;
}
.panel-heading {
  position: relative;
}
.panel-heading:before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1.1rem;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  background-color: #fafafa;
}
.panel-heading:after {
  position: absolute;
  top: 50%;
  right: 1.6rem;
  transform: translateY(-50%);
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: "\f107";
  color: #EF7A1D;
  transition: all 0.5s;
}
.panel-heading.active:after {
  margin-top: -10px;
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
.panel-heading.active .panel-title {
  border-bottom-color: #ffffff;
}
.panel-collapse {
  border-bottom: 1px solid #e9ecef;
}
.custom-accordion .panel:last-child .panel-collapse {
  border-bottom: none;
}
.panel-body {
  padding: 0 1.2rem 1.3rem 1.2rem;
}

.accordion-reviews .panel {
  margin-bottom: 1.2rem;
}
.accordion-reviews .panel-title {
  padding: 1rem 5rem 1rem 1rem;
  border: 1px solid #dee2e6;
  font-size: 15px;
  color: #616f80;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
}
.sct-review svg {
  width: 1em;
  height: 1em;
  fill: #9ca8b3;
  font-size: 20px;
  margin-top: -3px;
  margin-right: .5rem;
}
.accordion-reviews .panel-heading.active .panel-title {
  border-bottom-color: #dee2e6;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.accordion-reviews .panel-collapse {
  border: 1px solid #dee2e6;
  border-top: none;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.accordion-reviews .panel-body {
  padding: 1rem 1rem 0 1rem;
}

.panel.panel-normal .panel-heading:before,
.panel.panel-normal .panel-heading:after {
  display: none;
}
.panel.panel-normal .panel-heading {
  cursor: pointer;
}
.panel.panel-normal .panel-heading.active i {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  transform: rotate(-180deg);
  transition: all 0.3s;
}
.panel.panel-normal .panel-heading.active .panel-title {
  border: none;
}
.panel.panel-normal .panel-collapse {
  border-bottom: none;
  padding: 0;
}
.panel.panel-normal .panel-body {
  padding: 0;
}

.user-action-item {
  display: flex;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #e6e6e6;
  /*box-shadow: rgba(35, 43, 51, 0.16) 0px 1px 3px 0px;*/
  /*border-radius: 4px;*/
}
.user-action-item:first-child {
  padding-top: 0;
}
.user-action-item:last-child {
  border-bottom: none;
}
.user-action-item-ic {
  position: relative;
  height: 25px;
  width: 25px;
  top: 2px;
  margin-right: 10px;
  /*border-radius: 50%;
  background-color: #f3f6f9;*/
}
.user-action-item-ic i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #EF7A1D;
  font-size: 14px;
}
.user-action-item-ic i.mdi {
  font-size: 20px;
}
.user-action-item-ic svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  color: #EF7A1D;
}
.user-action-item-desc {
  flex: 1;
  max-height: 38px;
  overflow: hidden;
}

.border-primary {
  border-color: #EF7A1D !important;
}

.border-success {
  border-color: #02c58d !important;
}

.border-info {
  border-color: #59c6fb !important;
}

.border-warning {
  border-color: #fcbe2d !important;
}

.border-danger {
  border-color: #fc5454 !important;
}

.border-dark {
  border-color: #354558 !important;
}

.border-secondary {
  border-color: #616f80 !important;
}

.no-italic {
  font-style: normal;
}

dt {
  font-weight: 500;
}

.bs-spinner .spinner-border, .bs-spinner .spinner-grow {
  margin-right: 8px;
  margin-top: 10px;
}

.loading-text {
  font-size: 14px;
  margin-top: 1rem;
}

.custom-control-input:checked ~ .custom-control-label:before {
  border-color: #EF7A1D;
  background-color: #EF7A1D;
}

.modal-med {
  max-width: 640px;
}

.custom-h-content {
  min-height: auto;
  max-height: calc(95vh);
}

/* Navs & Tabs */
.nav-pills .nav-item.show .nav-link, .nav-pills .nav-link.active {
  background-color: #EF7A1D;
}

.nav-pills > .active > a > .badge {
  color: #EF7A1D;
}

.badge {
  font-weight: 500;
}

.badge-primary {
  background-color: #EF7A1D;
}

.badge-success {
  background-color: #02c58d;
}

.badge-info {
  background-color: #59c6fb;
}

.badge-warning {
  background-color: #fcbe2d;
  color: #ffffff;
}

.badge-danger {
  background-color: #fc5454;
}

.badge-dark {
  background-color: #354558;
}

.badge-secondary {
  background-color: #616f80;
}

.badge-soft-primary {
  background-color: rgba(48, 65, 155, 0.2);
  color: #EF7A1D;
}

.badge-soft-success {
  background-color: rgba(2, 197, 141, 0.2);
  color: #02c58d;
}

.badge-soft-info {
  background-color: rgba(89, 198, 251, 0.2);
  color: #59c6fb;
}

.badge-soft-warning {
  background-color: rgba(252, 190, 45, 0.2);
  color: #fcbe2d;
}

.badge-soft-danger {
  background-color: rgba(252, 84, 84, 0.2);
  color: #fc5454;
}

.badge-soft-dark {
  background-color: #f1f1f1;
  color: #354558;
}

.badge-soft-secondary {
  background-color: rgba(97, 111, 128, 0.2);
  color: #616f80;
}

.badge-big {
  margin-right: 0.5rem;
  display: inline-block;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  vertical-align: middle;
  margin-top: -3px;
  text-transform: uppercase;
  user-select: none;
  white-space: nowrap;
  line-height: 14px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  background-color: #f1f1f1;
  color: rgb(97, 112, 128);
  border-radius: 4px;
}
.badge-big.soft-red {
  background-color: rgb(252, 237, 235);
  color: rgb(180, 62, 44);
}
.badge-big.soft-orange {
  background-color: rgb(255, 248, 235);
  color: rgb(153, 104, 6);
}
.badge-big.soft-green {
  background-color: rgb(233, 247, 244);
  color: rgb(22, 123, 106);
}
.numb-count {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background-color: #e9f7f1;
  border-radius: 50%;
  margin-right: 18px;
  line-height: 22px;
  font-weight: 500;
  font-size: 14px;
}

.custom-ul {
  margin-left: -21px;
  margin-bottom: 0;
}

/* ==============
  Progressbar
===================*/
.progress-bar {
  background-color: #EF7A1D;
}

/* ==============
  Pagination
===================*/
.page-link {
  color: #EF7A1D;
}

.page-item.active .page-link {
  background-color: #EF7A1D;
  border-color: #EF7A1D;
}

.page-link:focus, .page-link:hover {
  color: #EF7A1D;
  background-color: #fdf1e8;
}

/* ==============
  Helper Classes
===================*/
.p-t-5 {
  padding-top: 5px;
}
.p-t-6 {
  padding-top: 6px;
}
.p-t-10 {
  padding-top: 10px;
}
.p-b-5 {
  padding-bottom: 5px;
}
.p-b-10 {
  padding-bottom: 10px;
}
.pl-40 {
  padding-left: 40px;
}
.p-10 {
  padding: 10px;
}

.m-b-5 {
  margin-bottom: 5px;
}

.m-b-10 {
  margin-bottom: 10px;
}

.m-b-15 {
  margin-bottom: 15px;
}

.m-b-20 {
  margin-bottom: 20px;
}

.m-b-25 {
  margin-bottom: 25px;
}

.m-b-30 {
  margin-bottom: 30px;
}

.m-b-40 {
  margin-bottom: 40px;
}

.m-t-5 {
  margin-top: 5px;
}
.m-t--5 {
  margin-top: -5px !important;
}
.m-t--2rem {
  margin-top: -2rem !important;
}
.m-x--1-5rem {
  margin-left: -1.5rem !important;
  margin-right: -1.5rem !important;
}

.m-t-10 {
  margin-top: 10px;
}

.m-t-n-10 {
  margin-top: -10px;
}

.m-t-15 {
  margin-top: 15px;
}

.m-t-20 {
  margin-top: 20px;
}

.m-t-30 {
  margin-top: 30px;
}

.m-t-40 {
  margin-top: 40px;
}

.m-r-5 {
  margin-right: 5px;
}
.m-r-10 {
  margin-right: 10px;
}
.m-r-15 {
  margin-right: 15px;
}

.w-30 {
  max-width: 30px;
}

.w-xs {
  min-width: 80px;
}

.w-sm {
  min-width: 95px;
}

.w-md {
  min-width: 110px;
}

.w-lg {
  min-width: 140px;
}

.l-h-23 {
  line-height: 23px;
}

.l-h-34 {
  line-height: 34px;
}

.font-10 {
  font-size: 10px;
}

.font-11 {
  font-size: 11px;
}

.font-12 {
  font-size: 12px;
}

.font-13 {
  font-size: 13px;
}

.font-13-5 {
  font-size: 13.5px;
}

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

.font-15 {
  font-size: 15px;
}

.font-16 {
  font-size: 16px;
}

.font-18 {
  font-size: 18px;
}

.font-20 {
  font-size: 20px;
}

.font-22 {
  font-size: 22px;
}

.font-24 {
  font-size: 24px;
}

.font-26 {
  font-size: 26px;
}

.font-28 {
  font-size: 28px;
}

.font-30 {
  font-size: 30px;
}

.font-32 {
  font-size: 32px;
}

.thumb-sm {
  height: 32px;
  width: 32px;
}

.thumb-md {
  height: 48px;
  width: 48px;
}

.thumb-lg {
  height: 88px;
  width: 88px;
}
.thumb-60 {
  width: 60px;
  height: 60px;
  border: 1px solid #dbdbdb;
}

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

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

.text-underline {
  text-decoration: underline;
}

.header-title {
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 5px;
}

.rating-symbol-foreground {
  top: 0px;
}

.sub-title {
  margin-bottom: 25px;
  color: #adb5bd;
}

.bg-pattern {
  background-image: url("../images/bg-pattern.png");
  background-size: cover;
  background-position: bottom;
}

label {
    margin-bottom: .25rem;
}

.separator {
  padding: 30px 0 10px 0;
  text-align: center;
  position: relative;
}
.separator span {
  display: inline-block;
  background: #ffffff;
  position: relative;
  z-index: 100;
  padding: 0 15px;
}
.separator:after {
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  background: #e9ecef;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: 10px;
}

.row-section {
  border-top: 1px solid #e6e6e6;
  padding: 2.5rem 0 1.9rem 0;
  margin-top: 1rem;
}
.card-stat {
  background-color: #ffffff;
  border: 1px solid #dbdbdb;
  padding: 1.3rem;
  border-radius: 8px;
}

.lh-normal {
  line-height: 1.5;
}

.img-sm-inline {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-color: #fafafa;
  overflow: hidden;
  border-radius: 50%;
  vertical-align: middle;
  margin-top: -2px;
}
.img-sm-inline img {
  width: 100%;
  min-height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.fw500 {
  font-weight: 500 !important;
}

.material-switch > input[type="checkbox"] {
  display: none;   
}
.material-switch > label {
  cursor: pointer;
  height: 0px;
  position: relative; 
  width: 40px;  
}
.material-switch > label::before {
  background: rgb(220, 225, 230);
  border-radius: 16px;
  content: '';
  height: 24px;
  margin-top: -8px;
  position:absolute;
  transition: all 0.4s ease-in-out;
  width: 44px;
}
.material-switch > label::after {
  content: '';
  background: #ffffff;
  border-radius: 16px;
  border: 2px solid rgb(220, 225, 230);
  height: 24px;
  left: 0;
  margin-top: -8px;
  position: absolute;
  top: 0;
  transition: all 0.3s ease-in-out;
  width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
  background: #EF7A1D;
}
.material-switch > input[type="checkbox"]:checked + label::after {
  border-color: #EF7A1D;
  left: 20px;
}

#snackbar {
  /*visibility: hidden;*/
  position: fixed;
  left: 50%;
  bottom: 30px;
  min-width: 250px;
  margin-left: -125px;
  background-color: rgba(0,0,0,0.9);
  color: #fff;
  text-align: center;
  padding: 14px;
  font-size: 14px;
  z-index: 1070;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

/*CLOSE ICON*/
.alert-dismissible .close {
  font-weight: normal;
  margin-top: -2px;
}
.alert-dismissible .close:hover {
  color: #ffffff;
  opacity: 1 !important;
}
.modal-header .close {
  font-weight: normal;
  font-size: 32px;
}
.modal-header {
  padding: 1rem 1.3rem .9rem 1.3rem;
}
.close.close-only {
  position: absolute;
  top: 0;
  right: -45px;
  width: 35px;
  height: 35px;
  font-size: 1.7rem;
  font-weight: normal;
  background-color: rgb(0, 0, 0, 0.5);
  color: #ffffff;
  text-shadow: none;
  padding-left: 1px;
  margin: 0;
  opacity: 1 !important;
  border-radius: 50%;
  z-index: 1;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.close.close-only:hover {
  background-color: rgb(0, 0, 0, 1);
}
.btn-close {
  display: inline-block;
  font-size: 1.5rem;
  color: #616f80;
  margin-top: 3px;
  line-height: 1;
}
.modal-body {
  padding: 1.3rem;
}
.modal-footer {
  display: block;
  padding: 1rem 1.3rem;
  background-color: #ebedf3;
  border-top: 1px solid #dae1e6;
}
.write-comment {
  margin-bottom: 0.8rem;
}
.btn-comment .input-group-text {
  background-color: #ffffff;
  color: #EF7A1D;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.btn-comment:hover .input-group-text {
  background-color: #EF7A1D;
  color: #ffffff;
  border-color: #EF7A1D;
}

/* ==============
 Demo Only css
===================*/
.button-items .btn {
  margin-top: 8px;
  margin-right: 5px;
}

.mfp-content .card {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.bs-example-modal {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 1;
  display: block;
}

.icon-demo-content {
  text-align: center;
  color: #9ca8b3;
}

.icon-demo-content i {
  display: block;
  font-size: 24px;
  margin-bottom: 16px;
  color: #616f80;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.icon-demo-content .col-md-4 {
  margin-bottom: 30px;
}

.icon-demo-content .col-md-4:hover i {
  color: #EF7A1D;
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}

.custom-file, .custom-file input, .custom-file label {
  cursor: pointer !important;
}

/* ==============
  Popover & Tooltips
===================*/
.popover-header {
  margin-top: 0;
}

.tooltip .tooltip-inner {
  padding: 4px 10px;
}

/* ==============
  Waves Effect
===================*/
/*!
 * Waves v0.7.6
 * http://fian.my.id/Waves 
 * 
 * Copyright 2014-2018 Alfiana E. Sibuea and other contributors 
 * Released under the MIT license 
 * https://github.com/fians/Waves/blob/master/LICENSE */
.waves-effect {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
}

.waves-effect .waves-ripple {
  position: absolute;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.2);
  background: radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -webkit-transition-property: -webkit-transform, opacity;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-transform: scale(0) translate(0, 0);
  transform: scale(0) translate(0, 0);
  pointer-events: none;
}

.waves-effect.waves-light .waves-ripple {
  background: rgba(255, 255, 255, 0.4);
  background: radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}

.waves-effect.waves-classic .waves-ripple {
  background: rgba(0, 0, 0, 0.2);
}

.waves-effect.waves-classic.waves-light .waves-ripple {
  background: rgba(255, 255, 255, 0.4);
}

.waves-notransition {
  -webkit-transition: none !important;
  transition: none !important;
}

.waves-button,
.waves-circle {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

.waves-button,
.waves-button:hover,
.waves-button:visited,
.waves-button-input {
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  outline: none;
  color: inherit;
  background-color: rgba(0, 0, 0, 0);
  font-size: 1em;
  line-height: 1em;
  text-align: center;
  text-decoration: none;
  z-index: 1;
}

.waves-button {
  padding: 0.85em 1.1em;
  border-radius: 0.2em;
}

.waves-button-input {
  margin: 0;
  padding: 0.85em 1.1em;
}

.waves-input-wrapper {
  border-radius: 0.2em;
  vertical-align: bottom;
}

.waves-input-wrapper.waves-button {
  padding: 0;
}

.waves-input-wrapper .waves-button-input {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}

.waves-circle {
  text-align: center;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  border-radius: 50%;
}

.waves-float {
  -webkit-mask-image: none;
  -webkit-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
  -webkit-transition: all 300ms;
  transition: all 300ms;
}

.waves-float:active {
  -webkit-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
}

.waves-block {
  display: block;
}

/******* Metis Menu css *******/
.metismenu {
  padding: 0;
}

.metismenu ul {
  padding: 0;
}

.metismenu ul li {
  list-style: none;
}

/******* Topbar *******/
.topbar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
}

.btn-menu-meetings {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 999;
}

.btn-menu-meetings button {
  background-color: #EF7A1D;
  color: #ffffff;
  height: 53px;
  width: 53px;
  border-radius: 53px;
  font-size: 24px;
  border: none;
}

.btn-menu-reviews {
  position: fixed;
  right: 0;
  top: 75px;
  z-index: 4;
}
.btn-menu-reviews.with-tab {
  top: 130px;
}
.btn-menu-reviews button {
  background-color: #EF7A1D;
  color: #ffffff;
  width: 40px;
  height: 35px;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  font-size: 20px;
  border: none;
}

.topbar .topbar-left {
  /*background-color: #ffffff;*/
  background-color: #EF7A1D;
  float: left;
  text-align: center;
  height: 70px;
  position: relative;
  width: 240px;
  z-index: 1;
}

.topbar .topbar-left .logo {
  line-height: 70px;
  color: #ffffff;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
}

.topbar .topbar-left .logo .logo-sm {
  display: none;
}

.topbar .navbar-custom {
  background-color: #ffffff;
  border-radius: 0;
  margin-bottom: 0;
  padding: 0 10px 0 0;
  /*margin-left: 240px;*/
  height: 65px;
  /*border-bottom: 1px solid #dbdbdb;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 40px 0 rgb(82 63 105 / 10%);
  /*box-shadow: 0px 1px 4px 1px rgba(0,0,0,.12);*/
}

.topbar .navbar-custom .navbar-right .dropdown-toggle:after {
  content: initial;
}

.tobar-search {
  position: relative;
  width: 550px;
}
.search-small .search-with-icon.search-top .form-control,
.search-small .search-with-icon.search-top .form-control:focus {
  border: none;
  border-bottom: 1px solid #e9ecef;
  height: 45px;
  padding: 6px 15px 5px 42px;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0;
}
.search-small .search-with-icon.search-top .fa-search {
  top: 16px;
  left: 15px;
}

.search-box-list {
  position: absolute;
  top: 30px;
  width: 550px;
  background-color: #ffffff;
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding-top: 5px;
  -webkit-box-shadow: 0 40px 40px rgba(150, 155, 187, 0.2);
  box-shadow: 0 40px 40px rgba(150, 155, 187, 0.2);
  max-height: 452px;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
}
.search-box-list.show {
  visibility: visible;
  opacity: 1;
}
.search-box-list.search-box-list-small {
  top: 45px;
  width: 100%;
  border: none;
  padding-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  max-height: 404px;
}
.search-box-list .group-search-list {
  background-color: #f3f6f9;
  padding: .625rem 1rem;
  color: #9ca8b3;
  border-bottom: 1px solid #e9ecef;
}
.search-box-list .item-search-list a {
  display: flex;
  align-items: flex-start;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #e9ecef;
  color: #354558;
}
.search-box-list .item-search-list a:hover {
  color: #EF7A1D;
}
.search-box-list .item-search-list:last-child a {
  border-bottom: none;
}
.search-box-list .item-search-list a .item-search-left {
  position: relative;
  height: 36px;
  width: 36px;
  top: 2px;
  margin-right: 15px;
  border-radius: 4px;
  border: 1px solid #e9ecef;
  overflow: hidden;
}
.search-box-list .item-search-list a .item-search-left i {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: 1px;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #EF7A1D;
}
.search-box-list .item-search-list a .item-search-left img {
  width: 100%;
  min-height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
.search-box-list .item-search-list a .item-search-right {
  flex: 1;
}
.search-box-list .item-search-list a .item-search-right span {
  display: block;
}

.notification-item-list {
  max-height: 395px;
  overflow-x: hidden;
  overflow-y: auto;
}
.notification-item-list .dropdown-item:nth-child(1) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.suggestions {
  max-height: 230px;
  overflow-y: auto;
}

/*===================
  NAVBAR MINIMALIST
====================*/
.navbar-minimalist {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  background-color: #ffffff;
  border-bottom: 1px solid rgb(220, 225, 230);
}
.navbar-minimalist.navbar-dark {
  background-color: #6e456f;
  border-bottom: none;
}
.navbar-close {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 63px;
  border-right: 1px solid rgb(220, 225, 230);
  font-size: 26px;
}
.navbar-minimalist.navbar-dark .navbar-close {
  border-right-color: rgba(255, 255, 255, 0.15);
  border-width: 2px;
  color: #ffffff;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.navbar-minimalist.navbar-dark .navbar-close:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-right-color: transparent;
}
.navbar-left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navbar-title {
  padding-left: 1.5rem;
  color: #354558;
  font-size: 1.2rem;
  line-height: 24px;
  font-weight: 500;
  max-width: 300px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.navbar-title.title-draft {
  opacity: 0.4;
}
.navbar-minimalist.navbar-dark {
  color: #ffffff;
}
.navbar-minimalist.navbar-dark .navbar-title {
  max-width: 270px;
  color: #ffffff;
}
.navbar-center {
  font-size: 1rem;
}
.navbar-minimalist-right {
  padding-right: 2rem;
}
.btn-navbar {
  background-color: rgba(255, 255, 255, 0.32);
  color: #ffffff;
  padding: 5px 16px;
}
.btn-navbar:hover {
  background-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}
.navbar-minimalist .dropdown-toggle {
  font-size: 22px;
  color: #ffffff;
}
.navbar-minimalist .dropdown {
  margin-right: 0.5rem;
}
.navbar-minimalist-right .btn {
  padding-left: 20px;
  padding-right: 20px;
}

.custom-scroll {
  overflow-y: auto;
}
/*.custom-scroll.scroll-hover {
  overflow-y: hidden;
}
.custom-scroll.scroll-hover:hover {
  overflow-y: scroll;
}*/
.custom-scroll::-webkit-scrollbar,
.notification-item-list::-webkit-scrollbar,
.suggestions::-webkit-scrollbar,
.task-list::-webkit-scrollbar,
.search-box-list::-webkit-scrollbar,
.people-list-wbtn::-webkit-scrollbar,
.detail-section::-webkit-scrollbar,
.tp-comment-body::-webkit-scrollbar {
  width: 6px;
}
.custom-scroll::-webkit-scrollbar-track,
.notification-item-list::-webkit-scrollbar-track,
.suggestions::-webkit-scrollbar-track,
.task-list::-webkit-scrollbar-track,
.search-box-list::-webkit-scrollbar-track,
.people-list-wbtn::-webkit-scrollbar-track,
.detail-section::-webkit-scrollbar-track,
.tp-comment-body::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1);
}
.custom-scroll::-webkit-scrollbar-thumb,
.notification-item-list::-webkit-scrollbar-thumb,
.suggestions::-webkit-scrollbar-thumb,
.task-list::-webkit-scrollbar-thumb,
.search-box-list::-webkit-scrollbar-thumb,
.people-list-wbtn::-webkit-scrollbar-thumb,
.detail-section::-webkit-scrollbar-thumb,
.tp-comment-body::-webkit-scrollbar-thumb {
  background-color: #cccccc;
}

.modal-height-custom {
  max-height: calc(70vh);
  overflow-y: auto;
}

.navbar-custom .dropdown-menu.dropdown-menu-right {
  -webkit-transform: none !important;
  transform: none !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
}

.notification-list.list-inline-item.notif-ontop .dropdown-menu {
  width: 380px;
  margin-top: -3px !important;
}

.notification-list.list-inline-item:not(:last-child) {
  margin-right: 0;
}

.notification-list .nav-link {
  padding: 0 10px;
  line-height: 70px;
  max-height: 70px;
  color: #149CA1;
}

.notification-list .noti-icon {
  font-size: 28px;
  vertical-align: middle;
}

.notification-list .noti-icon-badge {
  display: inline-block;
  position: absolute;
  top: 16px;
  right: 10px;
  font-size: 13px;
  padding-left: 0;
  padding: .25em .4em;
}

.notify-item {
  display: flex;
  align-items: flex-start;
  padding: 1.2rem 1rem;
  white-space: initial;
}

.notify-item .notify-icon {
  position: relative;
  height: 40px;
  width: 40px;
  top: 2px;
  margin-right: 15px;
  border-radius: 6px;
  /*background-color: #f3f6f9;*/
  border: 1px solid #e9ecef;
}

.notify-item .notify-icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #EF7A1D;
  font-size: 18px;
}

.notify-item .notify-icon i.fa-user-plus, .notify-item .notify-icon i.fa-bullhorn {
  font-size: 15px;
}

.notify-item .notify-details {
  flex: 1;
  font-size: 14px;
}
.notify-item .notify-details span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
}

.notification-list.show .nav-link {
  background-color: rgba(53, 69, 88, 0.05);
}

.notification-list .nav-user img {
  height: 36px;
  width: 36px;
  border: 1px solid #dbdbdb;
}

.notification-list .profile-dropdown i {
  font-size: 17px;
  vertical-align: middle;
  margin-right: 10px;
  color: #616f80;
}
.notification-list .profile-dropdown.create-right-dd {
  width: 320px;
}
.notification-list .profile-dropdown.create-right-dd .dropdown-item {
  padding: 0.8rem 1rem;
}
.notification-list .profile-dropdown.create-right-dd i {
  font-size: 25px;
  margin-right: 0;
  color: #EF7A1D;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
/*.notification-list .profile-dropdown.create-right-dd i.fa-crosshairs {
  font-size: 16px;
}*/

.notification-list .profile-dropdown span {
  margin-top: 5px;
}

.arrow-none:after {
  border: none;
  margin: 0;
  display: none;
}

.dropdown-menu-lg {
  width: 300px;
}

/*============
  DASHBOARD
=============*/
.profile-summary {
  padding-top: 1.5rem;
}
.profile-summary .summary-left {
  padding-right: 3.5rem;
}
.profile-summary .summary-right {
  padding-left: 0;
}
.svg-icon {
  display: inline-block;
  vertical-align: middle;
  width: 23px;
  height: 23px;
  color: #9ca8b3;
  margin-top: -3px;
  margin-right: 10px;
}
.link-summary {
  font-size: 14px;
}
.link-summary a {
  font-weight: normal;
}
.summary-okr {
  padding: 1.4rem 1.5rem;
}
.summary-okr .col-auto {
  margin-right: 10px;
}
.summary-okr .col-auto:last-child {
  margin-right: 0;
}
.profile-summary .obj-owner-list {
  justify-content: flex-start;
  margin-left: 10px;
  padding-top: 8px;
  padding-bottom: 0;
}
.profile-summary .title-owner {
  margin-left: 6px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.direct-r {
  border-top: 1px solid #e9ecef;
  margin-top: 0.5rem;
  padding-top: 1rem !important;
  margin-bottom: 1.3rem;
}
.profile-summary .obj-owner-list.direct-r .owner-item:nth-of-type(1) {
  margin-top: 3px;
}
.profile-summary .obj-owner-list.direct-r .title-owner {
  margin-top: 0;
  padding-left: 4px;
}
.btn-p-small {
  padding: .140rem .510rem;
}
.profile-summary .card-header {
  background-color: #ffffff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.profile-summary .card-header .l-text-right {
  padding-top: 5px;
}
.summary-right .list-okrs.alignedto {
  margin-top: -9px;
  padding-bottom: 5px;
}

.task-list {
  max-height: 398px;
  overflow-y: auto;
}
.task-list.overflow-auto {
  max-height: 100%;
  overflow-y: auto;
}
.task-item {
  position: relative;
  padding: 1.5rem 120px 1.5rem 0;
  margin: 0 1.5rem;
  border-bottom: 1px solid #e9ecef;
}
.task-item:last-child {
  border-bottom: none;
}
.task-item.task-progress {
  color: #EF7A1D;
}
.task-item.task-progress.task-success {
  color: #02c58d;
}
.task-item.task-progress.task-warning {
  color: #fcbe2d;
}
.task-item.task-progress.task-danger {
  color: #fc5454;
}
.task-item.task-progress:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1.5rem;
  transform: translate(0, -50%);
  width: 3px;
  height: 68%;
  background-color: #EF7A1D;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.task-item.task-progress.task-success:before {
  background-color: #02c58d;
}
.task-item.task-progress.task-warning:before {
  background-color: #fcbe2d;
}
.task-item.task-progress.task-danger:before {
  background-color: #fc5454;
}
.task-title {
  font-size: 14px;
}
.task-desc {
  padding-top: 8px;
}
.task-action {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-53%);
}
.task-action .btn {
  width: 100px;
}
.task-item.auto-btn {
  padding: 1.5rem 150px 1.5rem 0;
}
.task-item.auto-btn .task-action .btn {
  width: auto;
}
.task-item.auto-btn .task-title .progress {
  width: 70px;
  height: 8px;
}

.task-item.user-progress {
  padding: 1.5rem 145px 1.5rem 0;
}
.task-item.user-progress .task-action {
  display: flex;
  align-items: center;
}
.task-item.user-progress .task-action .progress {
  width: 70px;
  height: 8px;
}

.dash-okr-list {
  border-top: 1px solid #e9ecef;
  margin-top: 1.3rem;
  padding-top: 1.3rem;
  color: #354558;
}
.dash-okr-list:hover {
  color: #354558;
}
.dash-okr-list:hover .m-b-10, .dash-okr-list:hover .text-muted {
  color: #EF7A1D !important;
}
.dash-okr-list .obj-owner-list .title-owner {
  margin-top: 10px;
  margin-right: 18px;
}
.dash-okr-list .obj-owner-list {
  justify-content: flex-start;
  margin-left: -6px;
}
.dash-okr-list .obj-owner-list .owner-item {
  height: 38px;
  width: 38px;
}
.dash-okr-list .obj-owner-list .owner-item .owner-image {
  min-height: 38px;
  width: 38px;
}
.dash-okr-list .obj-owner-list .owner-item .more-owner {
  width: 35px;
  height: 35px;
  font-size: 13px;
  line-height: 2.2rem;
  margin-top: 2px;
}
.card-direct {
  border-top: 1px solid #dbdbdb;
  margin-top: 1rem;
  padding-top: .5rem;
}
.card-direct .direct-r {
  border-top: none;
  border-bottom: 1px solid #e6e6e6;
  margin-left: 0;
  padding-left: 10px;
  padding-bottom: 1.2rem;
  margin-top: 0;
  margin-bottom: 0;
}
.nav.tab-default .nav-link {
  padding: .5rem .9rem;
  color: #616f80;
  font-weight: 500;
}
.nav.tab-default .nav-link:hover {
  color: #EF7A1D;
}
.nav.tab-default .nav-link.active, .nav.tabs-normal .nav-link.active {
  cursor: default;
}
.nav.tabs-normal {
  border-bottom: 1px solid #e9ecef;
}
.nav.tabs-normal .nav-link {
  position: relative;
  padding: 1rem 1.3rem;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
.nav.tabs-normal .nav-link.active:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #EF7A1D;
}
.card-direct .nav.tab-default {
  border-bottom: 1px solid #dbdbdb;
  padding-bottom: .465rem;
}
.nav.tabs-normal.tabs-block .nav-item {
    width: 50%;
}
.nav.tabs-normal.bb-dark {
  border-bottom-color: rgb(220, 225, 230);
}

/*SEARCH SUGGESTION*/
.search-list {
  position: relative;
}
.search-list .form-control,
.search-list .form-control:focus {
  font-size: 14px;
  height: 40px;
  padding: 5px 15px 4px 42px;
  background: #f1f1f1;
  -webkit-box-shadow: none;
  box-shadow: none;
  width: 100%;
  border: none;
}
.search-list .form-group i {
  position: absolute;
  top: 14px;
  left: 15px;
  display: block;
  color: #9ca8b3;
  font-size: 13px;
  border: none;
  background-color: transparent;
}
.people-list-wbtn {
  max-height: 359px;
  overflow-y: auto;
}
.suggestions {
  max-height: 392px;
}
.suggestions.list-only.with-search {
  padding-top: 0;
}
.suggestions-list {
  border-bottom: 1px solid #e9ecef;
  padding: .75rem 1.3rem;
  display: flex;
  align-items: center;
}
.suggestions-list.with-link {
  color: #3f4254;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.suggestions-list.with-link:hover {
  color: #EF7A1D;
}
.custom-checkbox.suggestions-list {
  padding-left: 37px;
  padding-top: 8px;
}
.suggestions-list:last-child {
  border-bottom: none;
}
.suggestions-list .suggestions-desc h5 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggestions-list .suggestions-desc p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-checkbox.suggestions-list .checkmark {
  top: 22px;
}

.padding-row {
  padding: 1rem 2.4rem;
}
.padding-row:nth-child(2) {
  border-left: 1px solid #e9ecef;
  border-right: 1px solid #e9ecef;
}

.search-list.for-tree {
  padding: 0 0 1.3rem 0;
}
.search-list.for-tree .form-control,
.search-list.for-tree .form-control:focus {
  height: 50px;
  padding: 5px 15px 4px 60px;
  border-radius: 0;
}
.search-list.for-tree .form-group i {
  top: 19px;
  left: 30px;
}

.search-with-icon {
  position: relative;
}
.search-with-icon .form-control,
.search-with-icon .form-control:focus {
  font-size: 14px;
  height: 40px;
  padding: 5px 15px 4px 42px;
  border-top-left-radius: 3px !important;
  border-bottom-left-radius: 3px !important;
  z-index: 1;
}
.search-with-icon .fa-search {
  position: absolute;
  top: 14px;
  left: 15px;
  color: #9ca8b3;
  font-size: 13px;
  z-index: 5;
}

.search-with-icon.search-top .form-control {
  font-size: 14px;
  height: 36px;
  padding: 5px 15px 4px 42px;
  border-color: #ced4da;
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}
.form-control.light-placeholder::-webkit-input-placeholder {
  color: #b9c2c9;
}
.form-control.light-placeholder:-ms-input-placeholder {
  color: #b9c2c9;
}
.form-control.light-placeholder::-ms-input-placeholder {
  color: #b9c2c9;
}
.form-control.light-placeholder::placeholder {
  color: #b9c2c9;
}

.search-with-icon.search-top .form-control:focus {
  border-color: #9B9B9B;
}
.search-with-icon.search-top .fa-search {
  position: absolute;
  top: 12px;
  left: 15px;
  color: #9ca8b3;
  font-size: 13px;
  z-index: 5;
}

.button-menu-mobile, .side-button-menu {
  border: none;
  color: #9ca8b3;
  display: inline-block;
  height: 65px;
  width: 60px;
  background-color: #ffffff;
  font-size: 24px;
}
.top-title {
  position: relative;
  /*font-size: 16px;*/
  display: inline-block;
  vertical-align: middle;
  color: #354558;
}
.top-title:hover {
  color: #354558;
}
.top-title img {
  position: absolute;
  left: 0;
  top: -15px;
  height: 28px;
}
.top-title svg {
  margin-top: -2px;
  height: 25px;
}

/******* Sidemenu *******/
.side-menu {
  width: 240px;
  z-index: 10;
  /*background: linear-gradient(to bottom, #14a0a1, #242939 16%);*/
  background-color: #242939;
  bottom: 0;
  margin-top: 0;
  position: fixed;
  top: 65px;
}

.side-menu .waves-effect .waves-ripple {
  background-color: rgba(48, 65, 155, 0.4);
}

#sidebar-menu {
  padding: 27px 12px 50px 12px;
}

#sidebar-menu > ul > li.mm-active > a > span > .menu-arrow i {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  margin-top: -2px;
}

#sidebar-menu > ul > li {
  list-style-type: none;
}
#sidebar-menu > ul > li > a {
  position: relative;
  font-size: 13.5px;
  color: rgba(255,255,255,0.6);
  /*color: #989eb3;*/
  display: block;
  padding: 12px 14px;
  margin-bottom: 3px;
  border-radius: 4px;
}

#sidebar-menu > ul > li > a:hover {
  color: #ffffff;
  text-decoration: none;
}

#sidebar-menu > ul > li > a > span {
  margin-left: 7px;
}

#sidebar-menu > ul > li > a i {
  line-height: 1;
  width: 24px;
  display: inline-block;
  vertical-align: middle;
  color: rgba(255,255,255,0.5);
  /*color: #646c88;*/
  font-size: 16px;
}

#sidebar-menu > ul > li > a span span.menu-arrow i {
  font-size: 12px;
  width: auto;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  color: rgba(255,255,255,0.3);
  margin-right: -2px;
}

#sidebar-menu > ul > li > a .badge {
  margin-top: 3px;
}

#sidebar-menu > ul > li > a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
#sidebar-menu > ul > li > a:hover i {
  color: #ffffff;
}

#sidebar-menu > ul > li > a.mm-active {
  color: #ffffff !important;
  background-color: rgba(255,255,255,0.13);
}
#sidebar-menu > ul > li > a.mm-active i {
  color: #ffffff;
}

#sidebar-menu .menu-title {
  padding: 24px 12px 6px 12px;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 2px;
  text-transform: uppercase;
}
#sidebar-menu .menu-title svg {
  width: 18px;
  height: 18px;
  margin-left: -3px;
  margin-right: 6px;
}
#sidebar-menu .menu-title i {
  font-size: 14px;
  width: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -1px;
}

#sidebar-menu .submenu li.mm-active > a {
  color: #ffffff;
  background-color: rgba(255,255,255,0.13);
}

#sidebar-menu .submenu li a {
  padding: 12px 14px;
  font-size: 13.5px;
  color: #989eb3;
  display: block;
  position: relative;
  z-index: 1;
  border-radius: 4px;
  margin-bottom: 3px;
}
#sidebar-menu .submenu li a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 5px;
  height: 1px;
  background-color: #989eb3;
}

#sidebar-menu .submenu li a:focus {
  background-color: left-bar;
}

#sidebar-menu .submenu li a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
/*#sidebar-menu .submenu li a:hover::before {
  background-color: rgba(0,0,0,0.2);
}*/

#sidebar-menu .submenu > li > a {
  padding-left: 50px;
}

#sidebar-menu .submenu > li .submenu > li > a {
  padding-left: 70px;
}

.company-logo {
  position: relative;
  width: 102px;
  padding-top: 100px;
  margin: 10px auto;
  /* border-radius: 50%; */
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.company-logo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* border-radius: 50%; */
  padding: 10px;
}

.company-name {
  color: #989eb3;
  text-align: center;
  padding-top: 4px;
  /* padding-left: 1rem;
  padding-right: 1rem; */
  margin: 0 6px 26px 6px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.side-menu.side-hide {
  -webkit-transform: translateX(-240px);
  -moz-transform: translateX(-240px);
  -ms-transform: translateX(-240px);
  -o-transform: translateX(-240px);
  transform: translateX(-240px);
}
.side-menu.side-hide.side-show {
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
}

/******* Enlarged *******/
.enlarged .slimScrollDiv {
  overflow: inherit !important;
}

.enlarged .slimScrollBar {
  visibility: hidden;
}

.enlarged #wrapper .topbar .topbar-left {
  width: 70px !important;
}

.enlarged #wrapper .topbar .topbar-left .logo .logo-light {
  display: none;
  opacity: 0;
}

.enlarged #wrapper .topbar .topbar-left .logo .logo-sm {
  display: block;
  line-height: 70px;
  font-size: 28px;
}

/*.enlarged #wrapper .navbar-custom {
  margin-left: 70px;
}*/

.enlarged #wrapper #sidebar-menu .menu-title,
.enlarged #wrapper #sidebar-menu .menu-arrow,
.enlarged #wrapper #sidebar-menu .badge {
  opacity: 0;
  display: none !important;
}

.enlarged #wrapper #sidebar-menu {
  padding: 27px 0 50px 0;
}

.enlarged #wrapper #sidebar-menu .mm-collapse.mm-show {
  display: none;
}

.enlarged #wrapper #sidebar-menu .nav.mm-collapse {
  height: inherit !important;
}

.enlarged #wrapper #sidebar-menu ul ul {
  background-color: #149CA1;
  margin-top: -2px;
}
.enlarged #wrapper #sidebar-menu .submenu li a {
  padding: 12px 15px !important;
  color: #ffffff;
  margin-bottom: 0;
}
.enlarged #wrapper #sidebar-menu .submenu li a::before {
  display: none;
}

.enlarged #wrapper .left.side-menu {
  position: absolute;
  width: 70px;
  z-index: 5;
  padding: 0;
}

.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li {
  position: relative;
  white-space: nowrap;
}

.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li:hover > a {
  position: relative;
  width: 260px;
  color: #ffffff;
  background-color: #EF7A1D;
  z-index: 1;
}

.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li:hover > a.open :after, .enlarged #wrapper .left.side-menu #sidebar-menu > ul > li:hover > a.mm-active :after {
  display: none;
}

.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li:hover > ul {
  display: block;
  left: 70px;
  position: absolute;
  width: 190px;
  height: auto !important;
}

.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li:hover > ul a {
  -webkit-box-shadow: none;
          box-shadow: none;
  padding: 8px 20px;
  position: relative;
  width: 190px;
  z-index: 6;
}

.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li:hover > ul a:hover {
  color: #ffffff;
}

.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li:hover a span {
  display: inline-block;
}

.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a {
  -webkit-transition: none;
  transition: none;
  border-radius: 0;
}

.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a:hover, .enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a:active, .enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a:focus {
  color: #ffffff;
  background-color: #EF7A1D;
}

.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a i {
  font-size: 18px;
  margin-left: 10px;
  margin-right: 16px !important;
}

.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a span {
  display: none;
  padding-left: 10px;
}

.enlarged #wrapper .left.side-menu #sidebar-menu ul ul li:hover > ul {
  display: block;
  left: 190px;
  margin-top: -36px;
  position: absolute;
  width: 190px;
}

.enlarged #wrapper .left.side-menu #sidebar-menu ul ul li > a span.float-right {
  position: absolute;
  right: 20px;
  top: 12px;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}

.enlarged #wrapper .left.side-menu #sidebar-menu ul ul li.mm-active a {
  color: #ffffff;
}

.enlarged .company-logo {
  margin: 1px auto 27px auto;
  width: 32px;
  padding-top: 30px;
}
.enlarged .company-logo img {
  padding: 0;
}

.enlarged .company-name {
  display: none;
}

.enlarged #wrapper .content-page {
  margin-left: 70px;
}

.enlarged #wrapper .footer {
  left: 70px;
}

.overflow-y-max {
  max-height: 400px;
  overflow-y: auto;
}
.overflow-y-max.for-tree {
  max-height: 600px;
}
.sample-item-list {
  max-height: 550px;
  overflow-y: auto;
}

/*CUSTOM TABS*/
.custom-tab .nav .nav-link.active {
  background-color: #EF7A1D;
  color: #ffffff;
}

/*==================
  OBJECTIVE / OKR
===================*/
.period-list-view {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.okr-toggle-view {
  margin-right: 1.5rem;
}
.okr-toggle-view .btn {
  background-color: #ffffff;
  border: 1px solid #ced4da;
  height: 35px;
  /*font-size: 18px;*/
  padding-top: 3px;
}
.okr-toggle-view .btn .mdi {
  font-size: 18px;
}
.okr-toggle-view .btn .mdi-wrap:before {
  -moz-transform:    scaleX(-1);
  -o-transform:      scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform:         scaleX(-1);
}
.okr-toggle-view .btn:hover {
  background-color: #fafafa;
}
.okr-toggle-view .btn.active {
  background-color: #f3f6f9;
  color: #EF7A1D;
}
.dd-select {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}
.dd-select .select2-container {
  /*width: 160px !important;*/
  /*width: 63px !important;*/
}
.dd-period {
  display: flex;
  justify-content: flex-end;
}
.dd-period.not-admin {
  justify-content: flex-start;
}
.dd-period .btn {
  background-color: #ffffff;
  border: 1px solid #ced4da;
}
.dd-period .btn.dropdown-toggle {
  border-left: none;
  border-right: none;
  border-radius: 0;
}
.dd-period:hover .btn {
  border-color: #EF7A1D !important;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.dd-period .btn.btn-prev-period {
  color: #EF7A1D;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.dd-period .btn.btn-next-period {
  color: #EF7A1D;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.dd-period .btn.btn-prev-period:hover, .dd-period .btn.btn-next-period:hover {
  background-color: #EF7A1D;
  color: #ffffff;
}
.dd-period .dropdown-item {
  padding: 0.7rem 1rem;
}

.accordion-okr-analytic {
  margin-bottom: 1.5rem;
  padding: 0 1.5rem;
  /*border: 1px solid #dbdbdb;*/
  background-color: #ffffff;
  border-radius: 6px;
  -webkit-box-shadow: 0 0 30px 0 rgb(82 63 105 / 5%);
  box-shadow: 0 0 30px 0 rgb(82 63 105 / 5%);
}
.hide-analytic {
  display: inline-block;
  margin-top: 4px;
}
.hide-analytic .chevron {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}  
.hide-analytic .chevron:before {
  content: "\f077";
}
.hide-analytic.collapsed .chevron {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}  
.hide-okr-analytic {
  padding: 1.1rem 0;
}
.okr-analytics {
  /*border-top: 1px solid #e9ecef;*/
  padding: 1.55rem 0 1.4rem 0;
}
.okr-analytics .progress {
  margin-top: 14px;
  height: 14px;
}
.okr-analytics .progress-bar {
  border-right: 2px solid #ffffff;
}
.okr-analytics .progress-bar:last-child {
  border-right: none;
}
.okr-analytics .progress-bar.bg-light {
  background-color: rgb(197, 206, 214) !important;
}
.okr-analytics .col-auto {
  padding-left: 2rem;
}
.okr-analytics .col-auto a {
  color: #354558;
}

/*====================
  TREEVIEW HORZONTAL
=====================*/
.new-tree-view {
  overflow-x: auto;
}
.newtree-wrapper {
  cursor: move;
}
.newtree-branch {
  position: relative;
  top: 0px;
  left: 56px;
  display: none;
}
.newtree-branch.active {
  display: block;
}
.newtree-branch.active:before {
  content: "";
  position: absolute;
  top: 45px;
  bottom: 0;
  left: -50px;
  display: block;
  width: 0;
  border-left: 2px solid #EF7A1D;
  z-index: -1;
}
.newtree-branch.active .newtree-entry:before {
  content: "";
  position: absolute;
  display: block;
  width: 47px;
  height: 0;
  border-top: 2px solid #EF7A1D;
  top: 50px;
  left: -47px;
} 
.newtree-branch.active .newtree-entry:last-child:before {
  background: #fafafa;
  width: 50px;
  height: auto;
  left: -50px;
  bottom: 0;
}        
.newtree-entry {
  display: flex;
  position: relative;
}
.newtree-label {
  position: relative;
  display: flex;
  margin-right: 25px;
  margin-bottom: 25px;
}
.newtree-card {
  width: 312px;
  height: 145px;
}
.inner-card {
  position: relative;
  background-color: white;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding: 1rem;
  min-height: 145px;
  border-radius: 6px;
  border: 1px solid #e6e6e6;
  box-shadow: rgba(35, 43, 51, 0.16) 0px 1px 3px 0px;
}
.px-kpi-card {
  padding: 0 2rem;
}
.inner-card.card-view-kpi {
  min-height: 290px;
  border: 1px solid #dbdbdb;
  box-shadow: none;
  margin-top: .5rem;
  margin-bottom: 2rem;
}
.tree-progress {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  position: absolute;
  top: 0;
  /*left: 0;*/
  right: 0;
  color: white;
  font-size: 14px;
  font-weight: 500;
  /*padding: 4px 17px 3px 8px;
  border-radius: 6px 0 30px 0;*/
  padding: 4px 8px 3px 17px;
  border-radius: 0 6px 0 30px;
}
.tree-title {
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 1.1rem;
  padding-right: 2.5rem;
}
.inner-card.card-view-kpi .tree-title {
  border-bottom: none;
  padding-top: 0.1rem;
  padding-bottom: 0.5rem;
  padding-right: 0;
}
.tree-title .link-black {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  height: 43px;
  overflow: hidden;
}
.inner-card.card-view-kpi .tree-title .link-black {
  height: auto;
  max-height: 43px;
  overflow: hidden;
}
.tree-title .okr-type {
  margin-top: 26px;
}
.inner-card.card-view-kpi .tree-title .okr-type {
  margin-top: 3px;
}
.sparkline-area {
  text-align: center;
  padding-bottom: 1.5rem;
}
.inner-card.card-view-kpi .okr-card-body {
  border-top: 1px solid #e9ecef;
}
.inner-card .okr-card-item:nth-child(1) {
  width: 31%;
}
.inner-card .okr-card-item:nth-child(2) {
  width: 69%;
  justify-content: flex-end;
}
.inner-card.card-view-kpi .okr-card-item:nth-child(2) {
  padding-right: 4px;
  color: #616f80;
  font-weight: 500;
}
.expander-box {
  position: absolute;
  top: 36px;
  left: calc(100% + 16px);
  z-index: 1;
  box-sizing: border-box;
}
.expander-btn {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  cursor: pointer;
  height: 32px;
  width: 56px;
  background: white;
  border-radius: 32px;
  transition: all 250ms ease 0s;
  border-width: 2px;
  border-style: solid;
  border-color: #7cd3ae;
  border-image: initial;
}
.expander-btn:hover {
  border-color: #EF7A1D;
}
.expander-box.expanded {
  width: 40px;
}
.expander-box.expanded .expander-btn {
  width: 32px;
  border-color: #EF7A1D;
}
.expander-box.expanded .arrow-box {
  transform: rotate(-180deg);
}
.expander-box.expanded .text-box {
  display: none;
}
.text-box {
  margin-left: 13px;
  font-size: 14px;
  line-height: 20px;
  color: rgb(34, 45, 56);
  font-weight: 600;
}
.arrow-box {
  display: inline-flex;
  align-self: center;
  font-size: 18px;
  color: rgb(34, 45, 56);
  transform: rotate(0deg);
  padding: 7px;
  transition: transform 200ms ease-in-out 0s;
}
.arrow-box svg {
  width: 1em;
  max-width: 1em;
  height: 1em;
  fill: #EF7A1D;
  position: relative;
  top: 0px;
}

/*===================
  TREEVIEW VERITCAL
====================*/
.tree-view ul {
  margin-left: -40px;
  z-index: 2;
}
.tree-view ul ul {
  margin-left: -20px;
}
.tree-view ul.open:before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 0;
  left: 0;
  display: block;
  width: 0;
  border-left: 2px solid #EF7A1D;
  z-index: -1;
}
.tree-view li {
  position: relative;
  list-style: none;
}
.tree-view .card {
  padding: 1.5rem;
  margin-bottom: 20px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.tree-view .card:hover {
  border-color: #EF7A1D;
}
.tree-view ul li.first-tree:before {
  display: none;
}
.tree-view ul li:before {
  content:"";
  display: block;
  width: 20px;
  height: 0;
  border-top: 2px solid #EF7A1D;
  margin-top: -1px;
  position: absolute;
  top: 65px;
  left: -20px;
}
.tree-view ul li:last-child:before {
  background: #fafafa;
  height: auto;
  top: 65px;
  left: -20px;
  bottom: 0;
}
.tree-view li .data-parent {
  cursor: pointer;
}
.tree-view li .data-parent:before {
  position: absolute;
  top: 55px;
  right: 2rem;
  content: "";
  width: 10px;
  height: 10px;
  border: solid #EF7A1D;
  border-width: 0 1px 1px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.tree-view li .data-parent:after {
  position: absolute;
  bottom: 23px;
  right: 3.7rem;
  content: "SHOW";
  font-size: 12px;
}
.tree-view li .data-parent.okr-card:before {
  top: auto;
  bottom: 30px;
  right: 2.3rem
}
.tree-view li .data-parent.expanded {
  border: 2px solid #EF7A1D;
}
.tree-view li .data-parent.expanded:before {
  top: 60px;
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.tree-view li .data-parent.expanded:after {
  content: "HIDE";
}
.tree-view li .data-parent.okr-card.expanded:before {
  top: auto;
  bottom: 24px;
  right: 2.3rem
}
.tree-view li.not-has-child:before {
  display: none;
}

.tree-view.mode-tree {
  max-width: 1125px;
  overflow-x: auto;
}
.tree-view.mode-tree li {
  display: flex;
}
.tree-view.mode-tree li .card {
  width: 312px;
}

.content-obj-left {
  float: left;
  width: 370px;
  padding-right: 35px;
  padding-left: 15px;
  margin-top: -2px;
}
.progress-obj {
  width: 86px;
  height: 86px;
}
.progress-obj.auto-width {
  width: auto;
  height: auto;
}
.title-obj {
  font-size: 18px;
  margin-bottom: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.label-area {
  margin-top: 4px;
}
.label-area .badge {
  background-color: #fafafa;
  border: 1px solid #dbdbdb;
  color: rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: .2rem .3rem;
  font-size: 70%;
  margin-right: 2px;
}
.progressing {
  background-color: #ffffff !important;
  color: #fcbe2d !important;
  border-color: #fcbe2d !important;
}
.offtrack {
  background-color: #ffffff !important;
  color: #fc5454 !important;
  border-color: #fc5454 !important;
}
.ontrack {
  background-color: #ffffff !important;
  color: #02c58d !important;
  border-color: #02c58d !important;
}
.content-obj-middle {
  float: left;
  width: 239px;
  padding-left: 40px;
  padding-right: 30px;
  border-left: 1px dashed #cccccc;
  border-right: 1px dashed #cccccc;
}
.obj-owner-list {
  list-style: none;
  display: flex;
  justify-content: center;
  padding-top: 17px;
  padding-bottom: 16px;
}
.flex-center {
  align-items: center;
}
.content-obj-middle.with-rated .obj-owner-list {
  padding-top: 0;
  padding-bottom: 8px;
}
.content-obj-middle.with-rated .rated {
  margin-left: -10px;
  display: flex;
  justify-content: center;
}
.obj-owner-list .title-owner {
  margin-top: 13px;
  margin-left: -10px;
  margin-right: 23px;
}
.obj-owner-list .owner-item {
  margin-left: -10px;
  height: 45px;
  width: 45px;
  background: #ffffff;
  border-radius: 50%;
  position: relative;
}
.obj-owner-list .owner-item .more-owner {
  display: block;
  width: 43px;
  height: 43px;
  font-size: 14px;
  line-height: 2.8rem;
  background: #e3e3e3;
  border-radius: 50%;
  text-align: center;
  user-select: none;
}
.obj-owner-list .owner-item:before {
  display: none;
}
.obj-owner-list .owner-item:nth-of-type(1) {z-index: 3;}
.obj-owner-list .owner-item:nth-of-type(2) {z-index: 2;}
.obj-owner-list .owner-item:nth-of-type(3) {z-index: 1;}
.obj-owner-list .owner-item .owner-image {
  min-height: 45px;
  width: 45px;
  vertical-align: middle;
  border-radius: 50%;
  border: none;
  margin: 0;
}
.obj-owner-list .owner-item .owner-image img {
  width: 100%;
  border-radius: 50%;
  padding: 2px;
}
.content-obj-right {
  float: left;
  padding-left: 30px;
  padding-top: 21px;
}

.tree-view.read-only {
  padding: 0.5rem;
}
.tree-view.read-only .card {
  margin-bottom: 25px;
}
.tree-view.read-only .content-obj-left {
    width: 500px;
}
.tree-view.read-only .content-obj-right {
  float: right;
  padding-left: 0;
  padding-right: 1rem;
}

/*DETAIL OBJECTIVE*/
.title-okr {
  padding: 0.5rem 1rem 1rem 1rem;
}
.detail-obj {
  padding: 0.1rem 0.5rem 1rem 0.5rem;
}
.obj-desc {
  width: 100%;
}
.third {
  width: 33%;
  float: left;
  text-align: center;
  font-size: 14px;
  padding: 1.4rem 1rem;
}
.third.third-small {
  padding: 0 1rem;
}
.third:nth-child(2) {
  width: 34%;
  border-left: 1px solid #dbdbdb;
  border-right: 1px solid #dbdbdb;
}
.obj-desc .third .value {
  font-weight: bold;
  font-size: 16px;
  margin-top: 6px;
}
.detail-obj .progress-obj {
  width: auto;
  height: auto;
  margin-left: 20px;
  margin-bottom: 18px;
}
.obj-desc.obj-user {
  border-top: 1px solid #dbdbdb;
}
.obj-desc.obj-user .obj-owner-list {
  padding-top: 10px;
  padding-bottom: 0;
  padding-left: 10px;
}
.obj-owner-list .owner-item {
  cursor: pointer;
}
.title-obj-detail {
  padding-bottom: 1.6rem;
  margin-bottom: 1.8rem;
  border-bottom: 1px solid #dbdbdb;
}
.detail-obj .nav {
  margin-top: 2rem;
  border-top: 1px solid #dbdbdb;
  border-bottom: 1px solid #dbdbdb;
}
.detail-obj .nav .nav-link {
  padding: 1.2rem 1.7rem 1.1rem 1.7rem;
  font-size: 14px;
}
.detail-obj .nav-pills .nav-item.show .nav-link, .nav-pills .nav-link.active {
  background-color: #ffffff;
  color: #EF7A1D;
  position: relative;
}
.detail-obj .nav .nav-link.active:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #EF7A1D;
}

.p-child-table {
  padding: 0 1.3rem;
}
.obj-card-list {
  max-height: 293px;
  overflow-y: auto;
}
.obj-card-item {
  background-color: #ffffff;
  border: 1px solid #dbdbdb;
  padding: 1.3rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  -webkit-filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.03)) drop-shadow(0px 3px 2px rgba(0,0,0,0.05));
  filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.03)) drop-shadow(0px 3px 2px rgba(0,0,0,0.05));
}
.obj-card-item.no-shadow {
  -webkit-filter: none;
  filter: none;
}
.obj-card-item:last-child {
  margin-bottom: 0;
}
.progress-title {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #dbdbdb;
}
.obj-card-item .progress-obj {
  padding-top: 6px;
  display: inline-block;
}
.title-period {
  display: inline-block;
  vertical-align: top;
  margin-top: 9px;
  margin-left: 1rem;
}
.title-period .font-16 {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.obj-card-item .obj-owner-list {
  justify-content: flex-start;
  padding-left: 10px;
  padding-top: 3px;
  padding-bottom: 0;
}
.obj-card-item .btn {
  margin-top: 8px;
}

.obj-card-list.small-obj {
  max-height: none;
}
.obj-card-list.small-obj .obj-card-item {
  padding: 1.5rem 0 1.2rem 0;
  border: none;
  border-bottom: 1px solid #dbdbdb;
  border-radius: 0;
  margin-bottom: 0;
}
.obj-card-list.small-obj .obj-card-item:first-child {
  padding: 0.2rem 0 1.2rem 0;
}
.obj-card-list.small-obj .obj-card-item .progress-obj {
  margin-left: 0 !important;
  margin-bottom: 0 !important;
}
.obj-card-list.small-obj .progress-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.obj-card-list.small-obj .title-period {
  margin-top: 2px;
  margin-left: 1.3rem;
}
.obj-card-list.small-obj .title-period .font-16 {
  max-width: 550px;
}
.obj-card-list.small-obj .obj-card-item .obj-owner-list {
  padding-top: 0.7rem;
}

.target-current {
  padding: 0.8rem;
  border-bottom: 1px solid #ebedf3;
}
.target-current .col-md-6 {
  text-align: center;
}
.target-current .col-md-6:last-child {
  border-left: 1px solid #e6e6e6;
}
.comment-upload {
  margin-top: 1.5rem;
}
.status-progress .btn {
  border: 1px solid #ced4da;
  padding: .475rem .75rem;
}
.status-progress .btn:hover {
  background-color: #fafafa;
}
.status-progress .btn:nth-child(1).active {
  background-color: rgb(252, 237, 235);
  border-color: rgb(243, 184, 175);
  color: rgb(252, 84, 84);
}
.status-progress .btn:nth-child(2).active {
  background-color: rgb(255, 248, 235);
  border-color: rgb(251, 223, 166);
  color: rgb(245, 175, 34);
}
.status-progress .btn:nth-child(3).active {
  background-color: rgb(233, 247, 244);
  border-color: rgb(165, 222, 213);
  color: rgb(31, 174, 148);
}
.status-progress .btn.focus, .btn:focus {
  box-shadow: none;
}

.status-progress.stat-close-meeting .btn {
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 15px;
  padding: 0.8rem 0;
  border-color: transparent;
  color: #616f80;
  border-radius: 6px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.status-progress.stat-close-meeting .btn i {
  font-size: 22px;
  margin-right: .8rem;
}
.status-progress.stat-close-meeting .btn:hover, .status-progress.stat-close-meeting .btn.active {
  padding: 0.8rem;
}
.status-progress.stat-close-meeting .btn:nth-child(1):hover {
  background-color: rgb(233, 247, 244);
  color: rgb(31, 174, 148);
}
.status-progress.stat-close-meeting .btn:nth-child(2):hover {
  background-color: rgb(255, 248, 235);
  color: rgb(245, 175, 34);
}
.status-progress.stat-close-meeting .btn:nth-child(3):hover {
  background-color: rgb(252, 237, 235);
  color: rgb(252, 84, 84);
}
.status-progress.stat-close-meeting .btn:nth-child(1).active {
  background-color: rgb(233, 247, 244);
  border-color: rgb(165, 222, 213);
  color: rgb(31, 174, 148);
}
.status-progress.stat-close-meeting .btn:nth-child(2).active {
  color: rgb(245, 175, 34);
}
.status-progress.stat-close-meeting .btn:nth-child(3).active {
  background-color: rgb(252, 237, 235);
  border-color: rgb(243, 184, 175);
  color: rgb(252, 84, 84);
}

.add-rate span {
  cursor: pointer !important;
}
.add-rate .rating-symbol {
  margin-right: 6px;
}.add-rate .rating-symbol:last-child {
  margin-right: 0;
}
.add-rate .mdi {
  font-size: 36px;
}

.empty-page {
  background-color: #ffffff;
  border: 1px solid #dbdbdb;
  text-align: center;
  margin: 2.5rem 0;
  padding: 2.5rem;
  border-radius: 8px;
}
.empty-page.empty-page-dashed {
  border-width: 2px;
  border-style: dashed;
  border-color: rgb(197, 206, 214);
  margin: 0 0 1.5rem 0;
  padding: 2.5rem 2rem;
}
.empty-icon {
  margin: 0 auto;
  display: block;
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background-color: #f3f6f9;
}
.empty-page.empty-page-dashed .empty-icon {
  width: 75px;
  height: 75px;
  border-radius: 75px;
}
.empty-icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: #EF7A1D;
}
.empty-text {
  font-size: 22px;
  margin-top: 1.3rem;
}

.empty-item {
  background-color: #fafafa;
  border: 2px dashed #e6e6e6;
  padding: 1.6rem 1.3rem;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
}
.empty-item .empty-icon {
  margin: 0 auto;
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background-color: #f3f6f9;
}
.empty-item .empty-icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #EF7A1D;
}
.empty-item .empty-text {
  margin-top: 1rem;
}
.empty-item .empty-btn {
  margin-top: 1rem;
  margin-bottom: 0.2rem;
}

.icon-circle {
  position: relative;
  margin: 4px auto 10px auto;
  width: 42px;
  height: 42px;
  border-radius: 42px;
  background-color: rgba(252, 190, 45, 0.1);
}
.icon-circle i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  color: #fcbe2d;
}

.table-custom .dataTables_length {
  padding: 1.5rem 1.5rem 1.1rem 1.5rem;
}
.table-custom .dataTables_filter {
  padding: 0 0 1.1rem 0;
}
.table-custom .dataTables_info {
  padding: 1.5rem 0 !important;
}
.table-custom .dataTables_paginate {
  padding: 0;
}

.modal-filter .modal-body {
  max-height: 450px;
  overflow-y: auto;
}

.when-activity {
  text-align: right;
}
.when-date-input {
  text-align: left !important;
  cursor: pointer;
}

.p-63 {
  padding-left: 63px;
}

/*NEW OKR*/
.okr-card {
  padding-top: 0 !important;
  padding-bottom: 1rem !important;
  margin-bottom: 1.5rem !important;
  -webkit-box-shadow: 0 40px 40px rgba(150, 155, 187, 0.2);
  box-shadow: 0 40px 40px rgba(150, 155, 187, 0.2);
}
.okr-card.kpi-card {
  padding-bottom: 0 !important;
}
.okr-type {
  cursor: pointer;
  margin-top: 1px;
  vertical-align: middle;
  color: #9ca8b3;
}
.kpi-sparkline {
  padding: 1rem 0 1rem 1rem;
}
.kpi-sparkline .inlinesparkline {
  width: 50px;
}
.okr-type.type-on-large {
  margin-top: 0;
}
.okr-type i {
  font-size: 16px;
}
.okr-type i.fa-network-wired {
  font-size: 13.5px;
}
.okr-type i.fa-building {
  font-size: 13.5px;
}
.okr-type i.fa-users {
  font-size: 13.5px;
}
.okr-card .okr-card-title {
  position: relative;
  font-size: 17px;
  border-bottom: 1px solid #e9ecef;
  padding-top: 1.4rem;
  padding-right: 3.5rem;
  padding-bottom: 1.3rem;
}
.okr-card .okr-card-title.ellipsis {
  border-bottom: none;
  padding-right: 1rem !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.okr-card.kpi-card .okr-card-title {
  border-bottom: none;
  padding-bottom: 1.4rem;
}
.okr-card .okr-card-title a {
  color: #354558;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.okr-card .okr-card-title a:hover {
  color: #EF7A1D;
}
.okr-card-action {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  z-index: 1;
}
.okr-card-action .dropdown.dd-radius .dropdown-toggle:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  background-color: #fafafa;
  border-radius: 34px;
  z-index: -1;
}
.okr-card-action .dropdown.dd-radius .dropdown-toggle:hover:before {
  background-color: #EF7A1D;
}
.okr-card-action .show > .dropdown-menu {
  visibility: visible;
  opacity: 1;
  margin-top: -33px !important;
  left: -22px !important;
}
.okr-card-body {
  display: flex;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-top: 1rem;
  color: #8c97a1;
}
.okr-card-body.with-pr {
  padding-right: 3rem;
}
.okr-card-item {
  display: flex;
  align-items: center;
  /*width: 25%;*/
  position: relative;
}
.okr-card-body.with-pr .okr-card-item {
  width: 22%;
}
.okr-card-body.with-pr .okr-card-item:nth-child(1) {
  width: 30%;
}
.okr-card-item-title {
  margin-right: 8px;
  color: #354558;
}
.item-owner-list {
  margin-left: 10px;
}
.item-owner {
  display: inline-block;
  margin-left: -10px;
  height: 32px;
  width: 32px;
  background: #ffffff;
  border-radius: 50%;
  position: relative;
}
.item-owner:nth-child(1) {z-index: 3;}
.item-owner:nth-child(2) {z-index: 2;}
.item-owner:nth-child(3) {z-index: 1;}
.image-owner {
  min-height: 32px;
  width: 32px;
  vertical-align: middle;
  border-radius: 50%;
  border: none;
  margin: 0;
}
.image-owner img {
  width: 100%;
  border-radius: 50%;
  padding: 2px;
}
.item-owner .more-owner {
  display: block;
  width: 28px;
  height: 28px;
  font-size: 12px;
  line-height: 1.8rem;
  background: #e3e3e3;
  color: #616f80;
  border-radius: 50%;
  text-align: right;
  padding-right: 6px;
  user-select: none;
  cursor: pointer;
}
.item-owner.item-add {
  margin-left: 3px;
}
.item-owner.item-add .more-owner {
  background: #EF7A1D;
  color: #ffffff;
  text-align: center;
  padding-right: 0;
}
.item-owner-meeting .item-owner {
  margin-left: 3px;
}
.item-owner-meeting .item-owner .more-owner {
  text-align: center;
  padding-right: 0;
}
.ready-check {
  position: absolute;
  right: 2px;
  bottom: 1px;
  width: 9px;
  height: 9px;
  border-radius: 9px;
  background-color: #02c58d;
  border: 1px solid #ffffff;
}

.okr-card-item .progress {
  width: 80px;
  height: 10px;
}
.bg-gray {
  background-color: #9ca8b3;
}
.text-gray {
  color: #9ca8b3;
}

.custom-breadcumb {
  border-bottom: 1px solid #e6e6e6;
  margin: 0 1rem 1.5rem 1rem;
  padding-bottom: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.custom-breadcumb .link-black {
  display: block;
  font-size: 14px;
  max-width: 500px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.custom-breadcumb .link-black .mdi {
  font-size: 19px;
  color: #EF7A1D;
  display: inline-block;
  vertical-align: middle;
  margin-top: -1px;
}
.custom-breadcumb .dd-radius .btn {
  padding: 4px 15px 4px 9px;
  font-weight: 500;
}
.custom-breadcumb .dd-radius .btn .mdi {
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -1px;
}
.custom-breadcumb .dd-radius .dropdown-toggle:before {
  display: none;
}
.progress-detail .card-detail-okr {
  background-color: #ffffff;
  padding: 1.5rem 1.5rem 1.8rem 1.5rem;
  border-color: #e6e6e6;
  box-shadow: rgba(35, 43, 51, 0.16) 0px 1px 3px 0px;
  border-radius: 8px;
}
.progress-detail-current .progress {
  height: 10px;
}
.progress-detail .list-okrs {
  margin-top: 2rem;
  margin-bottom: 3.5rem;
}
.list-okr-title {
  margin-bottom: 0.8rem;
  font-weight: 500;
  color: #616f80;
  letter-spacing: 1px;
}
.list-okr-title a {
  float: right;
  letter-spacing: 0;
}
.list-okrs .okr-card {
  padding: 0 !important;
  margin-bottom: 1.1rem !important;
  border-color: #e6e6e6;
}
.list-okrs .okr-card:hover {
  border-color: #EF7A1D;
}
.list-okrs .okr-card .okr-card-title {
  font-size: 14px;
  padding: 0.9rem 0 0.8rem 0;
  margin: 0 1rem;
  line-height: 1.7;
}
.list-okrs .okr-card .okr-card-body {
  padding: 0.5rem 1rem;
  justify-content: space-between;
}
.list-okrs .okr-card .okr-card-item .okr-card-item-title {
  color: #8c97a1;
}
.list-okrs .okr-card .okr-card-item .progress {
  width: 70px;
  height: 7px;
  font-weight: normal;
}
.list-okrs.alignedto {
  margin-top: 0.3rem;
  margin-bottom: 0;
}
.list-okrs.alignedto .okr-card {
  box-shadow: none;
  border-color: #dbdbdb;
  margin-bottom: 1.3rem !important;
}
.list-okrs.alignedto .okr-card.mb-0 {
  margin-bottom: 0 !important;
}
.list-okrs.child-okrs .okr-card .okr-card-item .progress {
  width: 60px;
}
.list-okrs.child-okrs .okr-card .okr-card-item:nth-child(1) {
  width: 25%;
}
.list-okrs.child-okrs .okr-card .okr-card-item:nth-child(2) {
  width: 21%;
}
.list-okrs.child-okrs .okr-card .okr-card-item:nth-child(3) {
  width: 39%;
  justify-content: flex-start;
}
.list-okrs.child-okrs .okr-card .okr-card-item:nth-child(4) {
  width: 15%;
  justify-content: flex-end;
}
.child-okrs {
  max-height: 300px;
  overflow-y: auto;
}
.max-height-okrs {
  max-height: 610px;
  overflow-y: auto;
  overflow-x: hidden;
}
.list-okrs.on-modal {
  padding: 1rem;
}
.list-okrs.on-modal .search-list {
  margin-bottom: 10px;
}
.search-list.for-tree .form-group i {
  top: 19px;
  left: 19px;
}
.list-okrs.on-modal .search-list .form-control {
  background: #ffffff;
  border: 1px solid #dbdbdb;
  padding: 5px 15px 4px 47px;
  border-radius: 6px;
}
.list-okrs.on-modal .search-list .form-control:focus {
  border-color: #9B9B9B;
}
.list-okrs.on-modal .okr-card {
  border-color: #dbdbdb;
  margin-bottom: 1.5rem !important;
}
.list-okrs.on-modal .okr-card:hover {
  border-color: #EF7A1D;
}
.list-okrs.on-modal .card .btn-add {
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
}
.list-okrs.on-modal .card .btn-add a {
  font-weight: 500;
}
.list-okrs.on-modal .card .okr-card-body {
  margin-right: 120px;
  border-right: 1px solid #e6e6e6;
}
.list-okrs.on-modal .okr-card .okr-card-item:nth-child(1) {
  width: 32%;
}
.list-okrs.on-modal .okr-card .okr-card-item:nth-child(2) {
  width: 24%;
}
.list-okrs.on-modal .okr-card .okr-card-item:nth-child(3) {
  width: 24%;
  justify-content: flex-start;
}
.list-okrs.on-modal .okr-card .okr-card-item:nth-child(4) {
  width: 20%;
}
.list-okrs.on-modal .okr-card .okr-card-item .okr-card-item-title {
  color: #354558;
}
.list-okrs.on-modal .card .okr-card-title {
  font-size: 16px;
  margin-right: 120px;
  border-right: 1px solid #e6e6e6;
}
.progress-detail-right {
  padding-left: 2rem;
}
.progress-detail-right label {
  padding-bottom: 3px;
}
.detail-owners {
  display: block;
  margin-top: 0.4rem;
}
.detail-owners .owners-item {
  display: flex;
  align-items: center;
  margin-bottom: 11px;
}
.owners-item img {
  width: 45px;
  height: 45px;
}
.owners-item .title-owners {
  font-size: 14px;
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav.tab-okrs.tab-kpi {
  margin-bottom: 2rem;
  border-bottom: 1px solid #dbdbdb;
}
.nav.tab-okrs .nav-link {
  padding: 1.2rem 1.7rem 1rem 1.7rem;
  font-size: 14px;
  font-weight: 500;
  color: #616f80;
}
.nav.tab-okrs.tab-kpi .nav-link {
  padding: 0.5rem 1.7rem 0.9rem 1.7rem;
  font-size: 14px;
  font-weight: 500;
}
.nav-pills.tab-okrs .nav-item.show .nav-link, .nav-pills .nav-link.active {
  background-color: transparent;
  color: #EF7A1D;
  position: relative;
}
.nav.tab-okrs .nav-link.active:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #EF7A1D;
}
.tab-users {
  position: relative;
}
.tab-users .btn-add-user {
  position: absolute;
  right: 0;
  top: 0;
}
.tab-users .nav.tab-okrs.tab-kpi {
  margin-bottom: 0.9rem;
}
.tab-users .nav.tab-okrs.tab-kpi .nav-link {
  padding: 0.5rem 1rem 0.9rem 1rem;
  font-size: 14px;
  font-weight: 500;
  color: #616f80;
}
.tab-users .nav.tab-okrs.tab-kpi .nav-link:hover, .tab-users .nav.tab-okrs.tab-kpi .nav-link.active {
  color: #EF7A1D;
}
.nav.tab-okrs .nav-link .count-tab {
  font-weight: normal;
  font-family: 'Roboto', sans-serif;
  margin-left: 2px;
}
.card-tabs {
  background-color: #ffffff;
  padding: 0 1.5rem;
  box-shadow: rgba(35, 43, 51, 0.16) 0px 1px 3px 0px;
  border-radius: 8px;
}

.comment-list {
  border-top: 1px solid #e6e6e6;
  padding: 1.3rem 1rem;
}
.comment-list:first-child {
  border-top: none;
}
.comment-list:last-child {
  padding-bottom: .625rem;
}
.comment-list.on-meeting {
  border-top: none;
  border-bottom: 1px solid #d2d5de;
  padding: 1.3rem 0;
}
.comment-list.on-meeting:last-child {
  border-bottom: none;
}
.comment-list .comment-list-top {
  display: flex;
  align-items: center;
  margin-bottom: .625rem;
}
.comment-list .comment-list-top strong {
  max-width: 115px;
}
.comment-list img {
  width: 28px;
  height: 28px;
}
.comment-reply {
  border-left: 4px solid #d8d8d8;
  background-color: #fafafa;
  padding: 1rem 1.2rem;
  margin-top: .625rem;
  margin-bottom: 0.5rem;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.comment-list.on-meeting .comment-reply {
  border-left-width: 3px;
  background: linear-gradient(to right, #f1f1f1, #f5f6f7);
  padding: .9rem 1.2rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.mentioned {
  background-color: #f3f6f9;
}
.comment-link {
  color: #EF7A1D;
}
.comment-link:hover {
  cursor: pointer;
  /*color: #149CA1;*/
}
.nav.on-modal {
  background-color: #fafafa;
  border-bottom: 1px solid #dee2e6;
}

.nav.tab-sample-okrs {
  background-color: #fafafa;
  border-bottom: 1px solid #dee2e6;
}
.nav.tab-sample-okrs .nav-link {
  padding: 1rem 1.5rem 0.9rem 1.5rem;
  font-size: 14px;
}
.nav-pills.tab-sample-okrs .nav-item.show .nav-link, .nav-pills .nav-link.active {
  background-color: transparent;
  color: #EF7A1D;
  position: relative;
  cursor: default;
}
.nav.tab-sample-okrs .nav-link.active:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #EF7A1D;
}

.for-aligned {
  max-height: 500px;
  overflow-y: auto;
  padding: 1.8rem 1.5rem !important;
}
.list-okrs.on-modal.for-aligned .card .okr-card-title {
    margin-right: 124px;
}
.list-okrs.on-modal.for-aligned .card .okr-card-body {
    margin-right: 124px;
}

.filter-sample {
  background-color: #fafafa;
  padding: 1.9rem 1rem;
  border-bottom: 1px solid #dee2e6;
}
.category-sample {
  display: flex;
  align-items: center;
}
.category-sample select {
  width: 250px;
  height: 40px;
  font-size: 14px;
}
.sample-item-list {
  padding: 1.9rem 0.8rem;
}
.sample-item {
  background-color: #ffffff;
  border: 1px solid #dbdbdb;
  border-radius: 8px;
  margin-bottom: 1.6rem;
}
.sample-header {
  background-color: #fafafa;
  border-bottom: 1px solid #dbdbdb;
  padding: 1.5rem;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.sample-category-title {
 color: #EF7A1D;
 margin-bottom: 0.5rem;
 font-size: 14px;
}
.sample-title {
 font-size: 17px;
 font-weight: 500;
 margin-bottom: 1.3rem;
}
.sample-header .btn {
  font-weight: 500;
}
.sample-content {
  padding: 1.3rem 1rem;
  min-height: 217px;
}
.sample-content ul {
 margin-bottom: 0;
 margin-left: -1em;
}
.sample-content ul li {
 padding: 0.5rem 0;
}

.callout {
  padding: 1rem;
  background-color: rgb(255, 248, 235);
}
.callout span {
  color: rgb(245, 175, 34);
}

.search-on-mobile {
  display: none;
}

/*TEAM MEMBERS*/
.tm-card {
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #e9ecef;
  border-bottom: none;
  padding: 1.5rem 1.3rem;
  /*margin-bottom: 1.3rem;*/
  /*border-radius: 8px;*/
}
.px-kpi-card:first-child .tm-card {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.px-kpi-card:last-child .tm-card {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom: 1px solid #e9ecef;
}
.tm-img-name {
  display: flex;
  align-items: center;
}
.tm-img {
  width: 50px;
  height: 50px;
  background-color: #fafafa;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 1.3rem;
}
.tm-img img {
  width: 100%;
  min-height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
.tm-icon {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #f1f1f1;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 1.3rem;
}
.tm-icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  color: #9ca8b3;
}
.tm-name {
  flex: 1;
}
.tm-name .link-black, .tm-name .black-link {
  display: block;
  /*color: #354558;*/
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 1px;
}
.tm-action .dropdown .dropdown-toggle {
  font-size: 14px;
}
.tm-action .dropdown .dropdown-menu {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.tm-action .dropdown .dropdown-menu .dropdown-item:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.action-right {
  display: flex;
  align-items: center;
}
.people-list-wbtn .tm-card {
  padding: 1rem 1.5rem;
  border-left: none;
  border-right: none;
}
.people-list-wbtn .tm-card:first-child {
  border-top: none;
}
.people-list-wbtn .tm-img-name .tm-img {
  width: 45px;
  height: 45px;
  margin-right: 1rem;
}
.people-list-wbtn .tm-name .link-black {
  font-size: 14px;
  max-width: 200px;
  max-height: 42px;
  overflow: hidden;
}

.bottom-table .dd-select .select2-container {
  width: 60px !important;
}
.bottom-table .dd-select {
  justify-content: flex-end;
}

/*===========
  MEETINGS
===========*/
.connect-to-calendar {
  max-width: 280px;
  margin: 0 auto;
}
.list-calendar-sync .suggestions-list {
  padding: 1.3rem 1.5rem;
  border-bottom-color: #e9ecef;
}
.list-calendar-sync .suggestions-list:hover {
  background-color: #fcfcfc;
}
.list-calendar-sync .suggestions-list.active-click {
  background-color: #f3f6f9;
  color: #EF7A1D;
}
.list-calendar-sync .suggestions-list .suggestions-desc {
  padding-top: 0;
}
.side-menu.side-meetings {
  background: linear-gradient(to bottom, #ffffff, #ffffff);
  border-right: 1px solid rgb(220, 225, 230);
}
.side-menu.side-meetings.side-show {
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
}
.side-menu.side-meetings #sidebar-menu {
    padding-bottom: 75px;
}
.side-menu.side-meetings #sidebar-menu > ul > li {
  position: relative;
}
.side-menu.side-meetings #sidebar-menu > ul > li > a {
  position: relative;
  color: #7f849b;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-right: 27px;
}
.side-menu.side-meetings #sidebar-menu > ul > li .dropdown {
  position: absolute;
  top: 9px;
  right: 6px;
  opacity: 0;
}
.side-menu.side-meetings #sidebar-menu > ul > li .dropdown.dd-radius .dropdown-toggle:hover:before {
  background-color: transparent;
}

.side-menu.side-meetings #sidebar-menu > ul > li > a:focus,
.side-menu.side-meetings #sidebar-menu > ul > li > a:active {
  color: #354558;
}

.side-menu.side-meetings #sidebar-menu > ul > li:hover .dropdown {
  opacity: 1;
}
.side-menu.side-meetings #sidebar-menu > ul > li > a:hover {
  color: #354558 !important;
  background-color: #f3f6f9;
  /*background-color: #eff7fe;*/
}
.side-menu.side-meetings #sidebar-menu > ul > li > a.mm-active {
  color: #354558 !important;
  background-color: #f3f6f9;
}
.side-menu.side-meetings #sidebar-menu > ul > li > a.mm-active:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background-color: #EF7A1D;
}
.side-menu.side-meetings #sidebar-menu .menu-title {
  color: #EF7A1D;
  letter-spacing: 1px;
  font-weight: 500;
}
.side-menu.side-meetings #sidebar-menu > ul > li > a i {
  -webkit-transition: none;
  transition: none;
  color: #9ca8b3;
  margin-top: -1px;
}
.side-menu.side-meetings #sidebar-menu > ul > li > a i.name-initial {
  position: relative;
  font-style: normal;
  margin-top: -2px;
}
.img-side-menu {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  margin-top: -2px;
}
.img-side-menu img {
  width: 100%;
  min-height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  border-radius: 20px;
}
.side-menu.side-meetings #sidebar-menu > ul > li > a i.name-initial strong {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 11px;
  margin-top: -0.5px;
  text-transform: uppercase;
}
.side-menu.side-meetings #sidebar-menu > ul > li > a i.name-initial:before {
  content: "";
  position: absolute;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background-color: #EF7A1D;
  z-index: -1;
}
.side-menu.side-meetings #sidebar-menu > ul > li > a i.name-initial.with-icon:before {
  background-color: #ffffff;
  border: 1px solid #e6e6e6;
}
.side-menu.side-meetings #sidebar-menu > ul > li > a i.font-15 {
  margin-top: -3px;
  margin-left: 2px;
  width: 18px;
}
.side-menu.side-meetings #sidebar-menu > ul > li > a > span {
  margin-left: 10px;
}
.btn-new-meeting {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 240px;
  padding: 20px;
  background-color: #ffffff;
  border-right: 1px solid #e9ecef;
}
.btn-new-meeting .dropdown-menu {
  width: 200px;
}

/*WHITE PAGE*/
.content-page.white-page {
  background-color: #ffffff;
}
.content-page.white-page .content {
  margin-bottom: 0;
  padding: 0;
}
.content-page.white-page .content .container-fluid {
  padding-left: 0;
  padding-right: 0;
}
.top-header {
  border-bottom: 1px solid rgb(220, 225, 230);
  padding: 1.6rem 1.5rem 1.4rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-header .tm-img-name .tm-img {
  width: 50px;
  height: 50px;
  margin-right: 1rem;
}
.top-header .tm-img-name .tm-name .link-black {
  display: inline-block;
  font-size: 18px;
}
.tm-title {
  display: inline-block;
  background-color: #f1f1f1;
  padding: 1px 6px;
  border-radius: 3px;
  vertical-align: middle;
  margin-top: -5px;
}
.dp-meeting {
  width: 180px;
}
/*.top-header .dd-when {
  width: 185px;
}*/
.top-header-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn-history-meeting .btn {
  font-size: 18px;
  padding: 0 .3rem;
}
.btn-history-meeting .btn i.mirror:before {
  -moz-transform:    scaleX(-1);
  -o-transform:      scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform:         scaleX(-1);
}
.title-meeting {
  max-width: 400px;
  max-height: 60px;
  overflow: hidden;
}
.wp-content {
  padding: 1.2rem 2rem 3rem 2rem;
  border-right: 1px solid rgb(220, 225, 230);
}
.wp-content .empty-page {
  background-color: #ffffff;
  border: 2px dashed #e9ecef;
  margin: 1.5rem 0;
  padding: 3rem 2rem;
}
.wp-content .empty-page .empty-text {
  margin-top: 0;
}
.tp-list {
  margin: 1rem 0;
}
.tp-list.at-first {
  margin-top: 0.3rem;
  margin-bottom: 0.5rem;
}
.tp-list-item {
  position: relative;
  background-color: #ffffff;
  display: flex;
  padding: 0 0 0 20px;
  /*padding: 0 45px 0 20px;*/
  margin-bottom: 5px;
  border-radius: 4px;
}
.tp-list.at-first .tp-list-item {
  margin-bottom: 0;
}
.tp-inner {
  width: 100%;
  padding: 10px 0;
  cursor: pointer;
}
.tp-title {
  font-size: 14px;
  color: #212529;
  line-height: 1.7;
  padding-right: 45px;
}
.pr-45 {
  padding-right: 45px;
}

.tp-list.at-first .tp-title {
  font-size: 13.5px;
  color: #354558;
}
.draggicon {
  position: absolute;
  left: -18px;
  top: 0;
  width: 20px;
  height: 43px;
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  opacity: 0;
}
.draggicon svg {
  margin-top: 11px;
}
.draggicon:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}
.tp-list-item:hover .draggicon {
  opacity: 1;
}
.tp-list .custom-checkbox.primary-check {
  top: 5px;
  padding-left: 0;
  margin-right: 27px;
}
.tp-list .custom-checkbox.primary-check:hover, .tp-list-item:hover {
  background-color: #fafafa;
}
.dragabble-highlight {
  background-color: rgba(38, 182, 121, 0.2);
  margin-bottom: 5px;
  border-radius: 4px;
}
.dragabble-highlight-default {
  background-color: rgba(38, 182, 121, 0.2);
  border-radius: 4px;
}
.tp-list .custom-checkbox.primary-check .checkmark {
  top: 6px;
  left: -9px;
  height: 19px;
  width: 19px;
  border: 1px solid #9B9B9B;
  border-radius: 19px;
}
.tp-list .custom-checkbox.primary-check .checkmark:hover {
  border-color: #212529;
}
/*.tp-list .custom-checkbox:first-child .checkmark {
  top: 12px;
}*/
.tp-list .custom-checkbox.primary-check .checkmark:after {
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid #EF7A1D;
  border-width: 0 2px 2px 0;
}
.tp-list .custom-checkbox.primary-check input:checked~.checkmark {
  background-color: transparent;
  border: 1px solid transparent;
  -webkit-animation: sparkles 500ms ease-in-out;
  animation: sparkles 500ms ease-in-out;
}
@keyframes sparkles {
  0%, 10% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  15% {
    opacity: 1;
    -webkit-transform: scale(0.6) rotate(-20deg);
            transform: scale(0.6) rotate(-20deg);
    box-shadow: 1px -1px 0 0rem #ff8080, -1px -1px 0 0rem #ffed80, 1px -1px 0 0rem #ffed80, 1px -1px 0 0rem #a4ff80, 1px 1px 0 0rem #a4ff80, 1px 1px 0 0rem #80ffc8, 1px 1px 0 0rem #80ffc8, 1px 1px 0 0rem #80c8ff, -1px 1px 0 0rem #80c8ff, -1px 1px 0 0rem #a480ff, -1px 1px 0 0rem #a480ff, -1px 1px 0 0rem #ff80ed, -1px -1px 0 0rem #ff80ed, -1px -1px 0 0rem #ff8080;
  }
}
.tp-inner .gray-label {
  display: inline-block;
  margin-bottom: 0;
  font-size: 11px;
  color: #9ca8b3;
}
.tm-img.tp-owner {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 24px;
  height: 24px;
  margin-right: 0;
}
.tp-options {
  background-color: #fafafa;
  position: absolute;
  top: 11px;
  right: 37px;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  opacity: 0;
}
.tp-options:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: -3.1em;
  height: 100%;
  width: 3.1em;
  background: linear-gradient(270deg, #fafafa, rgba(250,250,250,0));
}
.tp-options a {
  display: inline-block;
  color: #616f80;
  font-size: 14px;
}
.tp-options a .tp-options-icon {
  padding: 0 3px;
}
.tp-options a:hover, .tp-options a.active {
  color: #EF7A1D;
}
.tp-options a:nth-child(2) {
  margin: 0 1rem;
}
.tp-list-item:hover .tp-options {
  opacity: 1;
}

.tp-title-step {
  position: relative;
}
.custom-checkbox.check-inner-step {
  color: #9ca8b3;
  margin-bottom: 10px;
  padding-left: 25px;
  padding-right: 110px;
}
.tp-title-step:last-child .custom-checkbox.check-inner-step {
  margin-bottom: 0;
}
.custom-checkbox.check-inner-step .checkmark {
  top: 7px;
  height: 15px;
  width: 15px;
  border-radius: 2px;
  border-color: #cacaca;
}
.custom-checkbox.check-inner-step .checkmark:after {
  left: 5.2px;
  top: 1px;
}
.custom-checkbox.check-inner-step input:checked~.checkmark {
  background-color: #b3b3b3;
}
.tp-title-step .tm-img.tp-owner {
  position: absolute;
  top: 2px;
  right: 10px;
}
.tp-title-step .tp-options {
  top: 5px;
  right: 37px;
  padding-left: 0.8rem;
  padding-right: 0.6rem;
  background-color: #ffffff;
  opacity: 1;
  text-align: right;
}
.tp-title-step .tp-options:before {
  display: none;
}
.tp-list-item:hover .tp-title-step .tp-options {
  background-color: #fafafa;
}
.tp-attach {
  position: relative;
  width: 100px;
  height: 50px;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  margin-top: 1rem;
  margin-right: 17px;
}
.tp-attach.attach-large {
  width: 130px;
  height: 80px;
  margin-top: 0;
  margin-bottom: 1rem;
}
.tp-attach-img {
  background-image: url("../images/dummy-mockup.png");
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 4px;
}
.attach-options {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0,0,0,0.7);
  color: #ffffff;
  font-size: 13px;
  text-align: center;
  padding: 0.4rem;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  opacity: 0;
}
.attach-options a {
  color: #ffffff;
  margin: 0 10px;
}
.tp-attach.attach-large:hover {
  cursor: pointer;
}
.tp-attach.attach-large:hover .attach-options {
  opacity: 1;
}

/*TP Detail*/
.modal-tp-detail .modal-content {
  display: flex;
  flex: 1;
  flex-direction: row;
  width: calc(100vw - 100px);
  min-height: auto;
  max-height: calc(88vh);
}
/*.modal-tp-detail .close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-weight: normal;
  font-size: 32px;
  text-shadow: none;
}*/
.detail-section {
  flex: 6;
  padding: 2rem;
  overflow-y: auto;
}
.ds-tp-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.ds-tp-top-left {
  display: flex;
  margin-bottom: 1rem;
}
.tp-channel {
  display: flex;
  align-items: center;
  color: #354558;
}
.tp-channel i {
  color: #9ca8b3;
  width: 20px;
  margin-right: 8px;
}
.tp-channel i.fa-user {
  margin-right: 3px;
}
.tp-channel .tp-channel-name {
  font-size: 14px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 175px;
}
.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.tp-author {
  max-width: 130px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ds-tp-title {
  font-size: 20px;
  margin-bottom: 1.5rem;
}
/*.ds-tp-circle {
  padding: 5px 10px 2px 11px;
  border-radius: 19px;
  background-color: #fafafa;
}*/
/*.ds-tp-circle {
  display: inline-block;
}*/
.ds-tp-circle .custom-checkbox {
  padding: 8px 16px 7px 10px;
  border-radius: 19px;
  background-color: #f5f6f7;
  font-size: 14px;
  padding-left: 30px;
  display: inline-block;
  margin-bottom: 0;
}
.ds-tp-circle .custom-checkbox .checkmark {
  top: 8px;
  left: 9px;
  height: 19px;
  width: 19px;
  border: 1px solid #9B9B9B;
  border-radius: 19px;
}
.ds-tp-circle .custom-checkbox .checkmark:hover {
  border-color: #212529;
}
.ds-tp-circle .custom-checkbox .checkmark:after {
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid #EF7A1D;
  border-width: 0 2px 2px 0;
}
.ds-tp-circle .custom-checkbox input:checked~.checkmark {
  background-color: transparent;
  border: 1px solid transparent;
  -webkit-animation: sparkles 500ms ease-in-out;
  animation: sparkles 500ms ease-in-out;
}
.ds-tp-step {
  padding: 12px 17px 0.5px 13px;
  border-radius: 50px;
  background-color: #fafafa;
  display: inline-block;
  margin-bottom: 0;
}
.gray-label {
  font-weight: 500;
  color: #616f80;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.icon-label {
  font-size: 19px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -1px;
}

.tp-title-step.at-detail {
  margin: 0 -2rem;
  padding: 0 2rem;
  background-color: #ffffff;
}
.tp-title-step.at-detail:hover {
  background-color: #fafafa;
}
.draggicon-step {
  position: absolute;
  left: 11px;
  top: 10px;
  width: 20px;
  height: 43px;
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  z-index: 1;
  opacity: 0;
}
.draggicon-step:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}
.tp-title-step.at-detail:hover .draggicon-step {
  opacity: 1;
}
.tp-title-step.at-detail .draggicon svg {
  margin-top: 0;
}
.tp-title-step.at-detail .custom-checkbox.check-inner-step {
  font-size: 14px;
  color: #212529;
  line-height: 1.7;
  margin-left: -8px;
  margin-bottom: 0;
  padding-top: 10px;
  padding-right: 110px;
  padding-bottom: 10px;
  padding-left: 38px;
  border-radius: 4px;
}
.tp-title-step:last-child .custom-checkbox.check-inner-step {
  margin-bottom: 0;
}
.tp-title-step.at-detail .custom-checkbox.check-inner-step .checkmark {
  top: 11px;
  left: 8px;
  height: 19px;
  width: 19px;
  border-color: #9B9B9B;
}
.tp-title-step.at-detail .custom-checkbox.check-inner-step .checkmark:after {
  left: 7px;
  top: 3px;
}
.tp-title-step.at-detail .custom-checkbox.check-inner-step input:checked~.checkmark {
  background-color: #EF7A1D;
}
.text-step-active {
  color: #9ca8b3;
  text-decoration: line-through;
}
.tp-title-step.at-detail .tm-img.tp-owner {
  top: 9px;
  right: 3.5rem;
}
.tp-title-step.at-detail .tp-options {
  top: 12px;
  right: 5.2rem;
  padding-right: 0.8rem;
}
.step-action {
  position: absolute;
  top: 7px;
  right: 1.5rem;
}
.tp-title-step.at-detail:hover .tp-options {
  background-color: #fafafa;
}



.comment-section {
  flex: 4;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #dee2e6;
  background-color: #f5f6f7;
  border-top-right-radius: .3rem;
  border-bottom-right-radius: .3rem;
}
.tp-comment-top {
  padding: 2rem;
}
.tp-comment-body {
  position: relative;
  flex-grow: 1;
  padding: 0 2rem;
  overflow-y: auto;
  overflow-x: hidden;
}
.tp-comment-body .empty-icon i {
  font-size: 42px;
}
.empty-centered {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  align-items: center;
  justify-content: center;
}
.tp-comment-list {
  padding-bottom: 1rem;
}
.tp-comment-list .separator {
  padding: 0;
}
.tp-comment-list .separator:after {
  background: #d2d5de;
  margin-top: 0;
}
.tp-comment-list .separator span {
  background: #f5f6f7;
  font-weight: 500;
  font-size: 11px;
  color: #616f80;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.tp-comment-bottom {
  border-top: 1px solid #dee2e6;
  background-color: #ffffff;
  padding: 1rem 1rem 0.7rem 1rem;
  border-bottom-right-radius: .3rem;
}
.tp-comment-input {
  width: 100%;
  height: 40px;
  padding: 8px 50px 8px 14px;
  font-size: 14px;
  border: none;
  overflow: hidden;
}
.tp-comment-bottom .tp-btn-publish {
  bottom: 10px;
  height: 32px;
}

.box-below {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}
.box-below.at-first {
  padding-top: 0.7rem;
  margin-bottom: 0.7rem;
}
.tp-box-input {
  position: relative;
  width: 100%;
}
.tp-box-input .tp-input {
  height: 40px;
  padding: 8px 84px 8px 14px;
  font-size: 14px;
  overflow: hidden;
}
.form-control.tp-input-edit {
  height: auto;
  padding: 10px 14px 9px 14px;
  font-size: 14px;
  line-height: 1.7;
  overflow: hidden;
}
.char-count {
  position: absolute;
  right: 45px;
  bottom: 0;
  width: 30px;
  height: 40px;
  transition: opacity .2s ease-in;
  font-size: .75rem;
  font-weight: 500;
  line-height: 40px;
  text-align: right;
  color: #9ca8b3;
  opacity: 0;
}
.tp-box-input .tp-input:focus+.char-count {
  opacity: 1;
}
.tp-btn-publish {
  position: absolute;
  right: 3px;
  bottom: 1px;
  width: 38px;
  height: 38px;
  border: none;
  background-color: #ffffff;
  color: #EF7A1D;
  font-size: 18px;
  opacity: 0.8;
}
.tp-btn-publish:hover {
  opacity: 1;
}

/*TP Notes*/
/*.box-notes {
  border: 1px solid #dee2e6;
}*/
.notes-top {
  border: 1px solid #dee2e6;
  background: #fafafa;
  padding: 0.6rem 1rem;
}
.notes-tool {
  display: flex;
  align-items: center;
  padding: 0.8rem 0;
  border-bottom: 1px solid #dee2e6;
}
.notes-tool .dropdown {
  margin-top: 1px;
}
.format-tools, .color-tools {
  display: flex;
  align-items: center;
  margin-left: 2rem;
}
.notes-tool-icon {
  position: relative;
  width: 30px;
  height: 30px;
  font-size: 18px;
  border-radius: 4px;
  color: #616f80;
  margin: 0 3px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  display: inline-block;
}
.notes-tool-icon.active {
  color: #354558;
  background-color: #e6e6e6;
}
.notes-tool-icon:hover {
  color: #616f80;
  background-color: #f1f1f1;
}
.notes-tool-icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.notes-tool-icon i.mdi-emoticon-excited-outline {
  font-size: 22px;
}
.notes-tool-icon span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 18px;
  background-color: yellow;
}
.notes-tool-icon span.pink {
  background-color: pink;
}
.notes-tool-icon span.yellow {
  background-color: yellow;
}
.notes-tool-icon span.green {
  background-color: green;
}
.notes-tool-icon span.blue {
  background-color: blue;
}
.notes-tool-icon span.purple {
  background-color: purple;
}
.notes-area {
  width: 100%;
  min-height: 350px;
  border: none;
  padding: 1rem 0;
  font-size: 14px;
  color: #354558;
  overflow: hidden;
}
.notes-label-name {
  position: absolute;
  background-color: rgba(0,0,0,0.7);
  color: #ffffff;
  padding: 1px 8px;
  border-radius: 4px;
}

/*TP Suggestion*/
.tp-suggest {
  margin-left: 20px;
  padding: 10px 16px;
  border-radius: 4px;
  background-color: #f3f6f9;
  color: #EF7A1D;
  font-size: 14px;
  letter-spacing: -.15px;
  white-space: nowrap;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.tp-suggest:hover {
  background-color: rgba(38, 182, 121, 0.2);
}
.modal.left .modal-dialog {
  position: fixed;
  margin: auto;
  width: 100%;
  height: 100%;
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}
.modal-tp-suggestion .tab-okrs {
  border-bottom: 1px solid #dee2e6;
}
.modal-tp-suggestion .nav.tab-okrs .nav-link {
  padding: 1rem 1.3rem;
  font-weight: normal;
}
.tp-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fafafa;
  padding: 0.5rem 1.3rem;
  border-bottom: 1px solid #dee2e6;
}
.tp-filter.at-sync {
  padding: 0.7rem 1.3rem;
  margin-top: -0.4rem;
  border-top: 1px solid #e9ecef;
  border-bottom-color: #e9ecef;
}
.tp-filter.at-sync .select-calendar {
  height: 35px;
  margin-right: 1rem;
}
.tp-filter-left {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tp-filter-left .dropdown {
  margin-right: 1.3rem;
  padding-right: 1.3rem;
  border-right: 1px solid #dee2e6;
}
.tp-filter-left .dropdown:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: none;
}
.tp-filter .dropdown.dd-radius .dropdown-toggle:hover:before {
  background-color: transparent;
}
.tp-filter-right .search-with-icon .form-control, .tp-filter.at-sync .search-with-icon .form-control {
  height: 35px;
  padding: 4px 15px 4px 39px;
}
.tp-filter-right .search-with-icon .fa-search, .tp-filter.at-sync .search-with-icon .fa-search {
  top: 11px;
  left: 14px;
}
.modal.left .modal-content {
  width: 700px;
  height: 100%;
  border-radius: 0;
}
.tp-suggest-modal {
  padding: 0 4rem;
  overflow-y: auto;
}
.tp-suggest-list {
  padding-top: 1.8rem;
  padding-bottom: 3rem;
}
.tp-section-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  margin-top: 2.8rem;
  margin-bottom: 0.3rem;
}
.tp-section-list:first-child {
  margin-top: 1rem;
}
.tp-add-all {
  padding: 0;
  border: none;
  background: #ffffff;
  color: #EF7A1D;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.tp-suggest-item {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 2.5rem;
}
.tp-suggest-item .tp-title-suggest {
  flex: 1;
  display: block;
  color: #616f80;
  font-size: 13.5px;
  padding: 1rem 0;
}
.tp-suggest-item:hover {
  background-color: #fafafa;
}
.tp-suggest-item:hover .tp-title-suggest {
  color: #212529;
}
.tp-suggest-item:hover .tp-favorite {
  opacity: 1;
}
.tp-suggest-item:hover .tp-btn-add {
  background-color: #EF7A1D;
  border-color: #EF7A1D;
  color: #ffffff;
}
.tp-list-suggest .tp-suggest-item {
  padding: 0;
  margin: 0.6rem 0;
}
.tp-list-suggest .tp-suggest-item:hover {
  background-color: transparent;
}
.tp-list-suggest .tp-suggest-item .tp-title-suggest {
  background-color: #f3f6f9;
  color: #EF7A1D;
  padding: 0.5rem 0.8rem;
  border-radius: 4px;
}
.tp-list-suggest .tp-suggest-item .tp-title-suggest:hover {
  background-color: rgba(38, 182, 121, 0.2);
}

.tp-favorite, .tp-btn-add {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 28px;
  border: 1px solid #cccccc;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.tp-favorite {
  margin: 0 1rem;
  color: #cccccc;
  opacity: 0;
}
.tp-favorite:before {
  content: "\f004";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}
.tp-favorite:hover {
  color: #ff4a77;
  border-color: #ff4a77;
}
.tp-favorite.active {
  color: #ff4a77;
  border-color: transparent;
  opacity: 1;
}
.tp-favorite.active:hover {
  border-color: #ff4a77;
}
.tp-favorite:before, .tp-btn-add i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.tp-btn-add i {
  font-size: 14px;
}

/*TP Step*/
.tp-step {
  display: flex;
  align-items: center;
}
.tp-circle {
  margin-right: 0.7rem;
}
.tp-step-text {
  margin-top: -10px;
  font-weight: 500;
}

.wp-content-right {
  padding-bottom: 10rem;
  border-left: 1px solid rgb(220, 225, 230);
  margin-left: -1px;
}
.wp-content-right .tp-comment-list {
  padding: 0.6rem 1.5rem 0.2rem 1.5rem;
  max-height: 320px;
  overflow-y: hidden;
}
.wp-content-right .tp-comment-list:hover {
  overflow-y: auto;
}
.wp-content-right .comment-list.on-meeting {
  padding: 1rem 0;
}
.wp-content-right .tp-comment-bottom {
  padding: 0.5rem 0.3rem 0 0.3rem;
  border-bottom-right-radius: 0;
  border-bottom: 1px solid #dee2e6;
  background-color: #fafafa;
}
.wp-content-right .tp-comment-bottom .tp-comment-input {
  background-color: #fafafa;
}
.wp-content-right .tp-comment-bottom .tp-btn-publish {
  bottom: 9px;
  right: -0.2rem;
  background-color: #fafafa;
}
.wp-content-right .inner-card {
  margin: 0 0 1rem 0;
  min-height: auto;
  padding-top: 0.8rem;
  padding-bottom: 0.5rem;
  box-shadow: none;
}
.wp-content-right .inner-card:last-child {
  margin-bottom: 0;
}
.wp-content-right .tree-title {
  padding-bottom: 0.8rem;
  padding-right: 2rem;
}
.wp-content-right .tree-title .link-black {
  font-size: 13.5px;
  font-weight: normal;
  line-height: 1.5;
  height: auto;
  max-height: 40px;
}
.wp-content-right .tree-progress {
  font-size: 12px;
  padding: 3px 6px 3px 13px;
  border-radius: 0 6px 0 30px;
}
.wp-content-right .okr-card-body {
  padding-top: 0.5rem;
}
.wp-content-right .inner-card .okr-card-item:nth-child(2) {
  font-size: 12px;
}
.list-small-kpi a {
  padding: 1.2rem 0;
  border-bottom: 1px solid #e6e6e6;
}
.list-small-kpi .title-kpi {
  max-height: 38px;
  overflow: hidden;
}
.list-small-kpi a:last-child {
  border-bottom: none;
}
.list-small-kpi a:first-child {
  padding-top: 0.5rem;
}

.section-draggable {
  position: fixed;
  bottom: 23px;
  right: 23px;
  z-index: 1000;
}
.meeting-tool-options {
  width: 220px;
  background-color: #333333;
  color: #ffffff;
  padding: 0.5rem;
  border-radius: 4px;
  cursor: move;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.06), 0 2px 32px 0 rgba(0, 0, 0, 0.16);
}
.meeting-tool-options .notes-tool-icon {
  width: 40px;
  height: 40px;
  font-size: 22px;
  color: #ffffff;
  margin: 0;
}
.meeting-tool-options .notes-tool-icon:hover, .meeting-tool-options .notes-tool-icon.active {
  background-color: rgba(255, 255, 255, 0.15);
}

/*Videocall*/
.section-vidcall {
  position: fixed;
  bottom: 23px;
  right: 266px;
  z-index: 1000;
}
.vidcall {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 400px;
  border-radius: 6px;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.06), 0 2px 32px 0 rgba(0, 0, 0, 0.16);
}
.vidcall-header {
  background-color: #333333;
  color: #ffffff;
  padding: 1rem;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.vidcall-body {
  position: relative;
  background-color: #000000;
  color: #ffffff;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  flex-grow: 1;
  height: 184px;
}
.vidcall-user-list {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.vidcall-user-item {
  position: relative;
  display: block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border: 2px solid rgba(255, 255, 255, 0.4);
  margin: 2px 3px;
  border-radius: 5px;
}
.vidcall-user-item:hover, .vidcall-user-item.active {
  border-color: rgba(255, 255, 255, 0.8);
}
.vidcall-user-ava {
  width: 32px;
  height: 32px;
  background-color: #ffffff;
  border-radius: 3px;
  overflow: hidden;
}
.vidcall-user-ava img {
  width: 100%;
  min-height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  border-radius: 3px;
}
.user-microphone {
  position: absolute;
  bottom: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  text-align: center;
  line-height: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  font-size: 16px;
}
/*#expand_vidcall {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  font-size: 20px;
  background-color: rgba(255, 255, 255, 0.20);
  color: #ffffff;
  line-height: 40px;
  text-align: center;
}*/
.vidcall-camera {
  height: 184px;
}
.vidcall-section-ava {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  align-items: center;
  justify-content: center;
}
.vidcall-avatar {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: #ffffff;
  overflow: hidden;
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.vidcall-avatar img {
  width: 100%;
  min-height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
.vidcall-footer .meeting-tool-options {
  width: 100%;
  background-color: #ffffff;
  border-radius: 0;
  cursor: default;
  padding: 0.8rem;
  box-shadow: none;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  justify-content: center;
}
.vidcall-footer .meeting-tool-options .notes-tool-icon {
  margin: 0 8px;
  color: #333333;
  border-radius: 40px;
  border: 1px solid #cccccc;
}
.vidcall-footer .meeting-tool-options .notes-tool-icon:hover {
  border-color: #333333;
}
.vidcall-footer .notes-tool-icon.active {
  background-color: red;
  color: #ffffff;
  border-color: red;
}

/*Vidcall fullscreen*/
.section-vidcall.fullscreen-active {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.section-vidcall.fullscreen-active .vidcall {
  width: 100%;
  height: 100vh;
  border-radius: 0;
  cursor: default;
}
.section-vidcall.fullscreen-active .vidcall-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.section-vidcall.fullscreen-active .vidcall-avatar {
  width: 170px;
  height: 170px;
}
.section-vidcall.fullscreen-active .vidcall-footer .meeting-tool-options {
  padding: 1rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.section-vidcall.fullscreen-active .vidcall-footer .meeting-tool-options .notes-tool-icon {
  width: 55px;
  height: 55px;
  font-size: 25px;
  margin: 0 13px;
}

.section-vidcall.fullscreen-active .vidcall-user-list {
  top: 15px;
  right: 15px;
}
.section-vidcall.fullscreen-active .vidcall-user-ava {
  width: 85px;
  height: 85px;
}
.section-vidcall.fullscreen-active .vidcall-user-item {
  margin: 2px 8px;
  border-width: 3px;
  border-radius: 6px;
}
.section-vidcall.fullscreen-active .user-microphone {
  width: 24px;
  height: 24px;
  line-height: 24px;
  background-color: rgba(0, 0, 0, 0.7);
  font-size: 20px;
}
.section-vidcall.fullscreen-active .vidcall-user-item.active {
  border-color: rgba(255, 255, 255, 0.9);
}

/*Sharescreen*/
.share-screen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #212121;
  z-index: 1001;
  display: none;
}
.sc-area {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("../images/dummy-mockup.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.sc-cursor-default {
  cursor: url("../images/cursor-default.png"), auto;
}
.sc-cursor-pencil {
  cursor: url("../images/cursor-pencil.png"), auto;
}
.sc-label-name {
  position: absolute;
  background-color: #000000;
  color: #ffffff;
  padding: 1px 8px;
  border-radius: 4px;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.06), 0 2px 32px 0 rgba(0, 0, 0, 0.16);
}
.sc-label-name-arrow {
  position: relative;
}
.sc-label-name-arrow:before {
  position: absolute;
  content: "";
  top: 1px;
  left: -19px;
  width: 0; 
  height: 0; 
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;   
  border-right: 11px solid #000000;
}
.sc-present {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.ic-present {
  font-size: 50px;
}
.sc-footer {
  position: fixed;
  bottom: 25px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}
.sc-footer .meeting-tool-options {
  width: 280px;
  background-color: #000000;
  cursor: default;
  padding: 1rem;
  border-radius: 6px;
  justify-content: center;
}
.sc-footer .meeting-tool-options .notes-tool-icon {
  width: 55px;
  height: 55px;
  border-radius: 55px;
  font-size: 25px;
  margin: 0 13px;
  border: 1px solid #f1f1f1;
}
.sc-footer .meeting-tool-options .notes-tool-icon:hover {
  background-color: rgba(255, 255, 255, 0.25);
}
.sc-footer .notes-tool-icon.active {
  background-color: red;
  color: #ffffff;
  border-color: red;
}
.sc-footer .notes-tool-icon.active:hover {
  background-color: red;
  border-color: #f1f1f1;
}

/*Split Content*/
.split-container {
  /*display: flex;
  flex: 1;
  flex-direction: row;*/
  padding-top: 65px;
  /*height: 100vh;*/
}
.split-container.on-modal {
  padding-top: 0;
  height: 100%;
}
.split-container .wp-content {
  /*width: 650px;*/
  border-right: none;
  padding-top: 2rem;
  padding-bottom: 6.5rem;
}
.split-container.on-modal .wp-content {
  padding-top: 2.2rem;
  padding-bottom: 4rem;
}
.split-container .wp-content-right {
  background-color: #f5f6f7;
  height: 100vh;
}
.split-container.on-modal .wp-content-right {
  height: 100%;
}
.right-split {
  padding: 2.5rem 2rem 2.3rem 2rem;
  border-bottom: 1px solid #d2d5de;
  max-height: 352px;
  overflow-y: auto;
}
.right-split:last-child {
  padding-top: 2rem;
  padding-bottom: 0;
  border-bottom: none;
  max-height: 342px;
}
.split-container.on-modal .right-split {
  padding: 2rem 2rem 2rem 2rem;
  max-height: 344px;
}
.split-container.on-modal .right-split:last-child {
  max-height: 525px;
  border-bottom: 1px solid #d2d5de;
}
.input-guide {
  display: flex;
  flex-direction: row;
}
.input-guide-left {
  flex: 1;
  width: 65%;
  max-width: 650px;
  padding-right: 2.5rem;
  border-right: 1px solid #e9ecef;
}
.input-guide-right {
  position: relative;
  width: 35%;
}
.input-guide-box {
  position: absolute;
  top: 21px;
  left: 0;
  padding-left: 2.5rem;
  background-color: #ffffff;
}

/*=========
  REVIEWS
==========*/
.link-tab {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-bottom: 2rem;
  border-bottom: 1px solid #dbdbdb;
}
.link-tab a {
  position: relative;
  padding: 1rem 1.3rem;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
.link-tab a.font-20 {
  font-size: 20px;
}
.link-tab a.active {
  cursor: default;
  color: #EF7A1D;
}
.link-tab a.active:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #EF7A1D;
}
.input-height-40 {
  height: 40px;
  padding: .580rem .85rem;
}
.select-h40 .select2-container .select2-selection--single {
  height: 40px;
}
.select-h40 .select2-container .select2-selection--single .select2-selection__rendered {
  padding: .580rem .85rem;
  font-size: 14px;
}
.select-h40 .select2-container--default .select2-selection--single .select2-selection__arrow b {
  margin-left: -11px;
  margin-top: 16px;
}

.table-list {
  max-height: 200px;
  overflow-y: scroll;
  border: 1px solid rgb(220, 225, 230);
  border-radius: 4px;
  padding: 0.5rem 0;
}
.table-list td {
  padding: 0.3rem 1rem;
  font-size: 13.5px;
}

.minimalist-table {
  width: 100%;
}
.minimalist-table thead {
  border-bottom: 1px solid #dee2e6;
}
.minimalist-table > thead > tr > th,
.minimalist-table > tbody > tr > td,
.minimalist-table > tfoot > tr > td {
  padding: 1rem;
}
.minimalist-table > tbody > tr > td {
  border-bottom: 1px solid #dee2e6;
  padding: 1.2rem 1rem;
}
.minimalist-table .title-review {
  color: #354558;
  display: block;
  font-size: 16px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.minimalist-table .title-review .badge {
  margin-left: 0.6rem;
  display: inline-block;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  vertical-align: middle;
  margin-top: -3px;
  text-transform: uppercase;
  user-select: none;
  white-space: nowrap;
  line-height: 14px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  background-color: #f1f1f1;
  color: rgb(97, 112, 128);
  border-radius: 4px;
}
.minimalist-table .desc-review {
  max-width: 80%;
}
.minimalist-table > tbody > tr:hover {
  cursor: pointer;
  background-color: #fafafa;
}
.minimalist-table > tbody > tr:hover .title-review {
  color: #EF7A1D;
}
.reviews-progress .progress {
  width: 70px;
  height: 8px;
}
.minimalist-table.hoverless > tbody > tr:hover {
  cursor: default;
  background-color: #ffffff;
}
.reviews-detail-template,
.reviews-detail-tr {
  cursor: pointer;
}

.box-rating-type {
  background-color: rgb(247, 249, 250);
  padding: 1.3rem 1.5rem 0.9rem 1.5rem;
  border: 1px solid rgb(220, 225, 230);
  border-radius: .25rem;
}
.box-rating-type-content {
  flex-wrap: wrap;
  flex-direction: column;
  display: flex;
  max-height: 252px;
  counter-reset: scale-list-counter 0;
}
.box-rating-type-content.multi {
  max-height: calc((1rem + 33.5px) * 8);
}
.rating-type-item {
  margin-bottom: 1rem;
}
.rating-type-input {
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
}
.rating-type-input input {
  width: 250px;
  padding-left: 10px;
}
.rating-type-input::before {
  content: counter(scale-list-counter);
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  display: inline-flex;
  width: 33.5px;
  height: 33.5px;
  line-height: 1;
  text-align: center;
  counter-increment: scale-list-counter 1;
  color: rgb(97, 112, 128);
  font-size: 14.5px;
  border-radius: 4px 0px 0px 4px;
}
.rating-type-item.disabled .rating-type-input::before {
  opacity: 0.3;
}
.rating-type-input.border-numb input {
  width: 260px;
  border-radius: 0px 4px 4px 0px;
}
.rating-type-input.border-numb::before {
  background-color: #fafafa;
  border: 1px solid #ced4da;
  border-right: none;
}
.rating-type-item.multi .rating-type-input::before {
  display: none;
}
.multi-option {
  width: 33.5px;
  height: 33.5px;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  margin-left: -3px;
}
.multi-option .custom-radio, .multi-option .custom-radio.radio-grayscale,
.multi-option .custom-checkbox, .multi-option .custom-checkbox.checkbox-grayscale {
  padding-left: 4px;
  padding-top: 4px;
}
.multi-option .custom-radio.radio-grayscale,
.multi-option .custom-checkbox.checkbox-grayscale {
  cursor: default;
}
.multi-option .custom-radio input, .multi-option .custom-checkbox input {
  position: relative;
}
.delete-rating {
  cursor: pointer;
  display: inline-flex;
  font-size: 1rem;
  color: rgb(105, 120, 135);
  margin-left: 0.3rem;
}
.delete-rating:hover {
  color: #354558;
}
.delete-rating svg {
  width: 1em;
  fill: currentcolor;
  position: relative;
  top: 4px;
}
.box-rating-type-content .btn-outline-muted {
  margin-left: 33.5px;
  width: 250px;
  height: 33.5px;
  background-color: #ffffff;
  color: #EF7A1D;
  font-weight: 500;
  margin-bottom: 1rem;
}
.box-rating-type-content .btn-outline-muted.w260 {
  width: 260px;
}
.box-rating-type-content .btn-outline-muted:hover {
  color: #EF7A1D;
  border-color: #EF7A1D;
}

.section-reviews {
  width: 100%;
  background-color: #ffffff;
  min-height: 100vh;
  padding-top: 64px;
}
.section-reviews-side {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 465px;
  height: 100%;
  display: block;
  transform: translateX(0px);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.section-reviews-side.hide-side {
  width: 350px;
  transform: translateX(-327px);
}
.side-reviews {
  height: calc(100vh - 64px);
  margin-top: 64px;
  border-right: 1px solid rgb(220, 225, 230);
  padding: 2rem 1.5rem;
  background-color: rgb(247, 249, 250);
  overflow-y: auto;
}
.btn-reviews-side {
  position: absolute;
  right: -16px;
  height: 32px;
  width: 32px;
  margin-top: -2px;
  box-shadow: rgba(34, 45, 56, 0.16) 0px 1px 3px;
  cursor: pointer;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.btn-reviews-side:hover {
  color: #EF7A1D;
}
.btn-reviews-side i {
  margin-left: -2px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.btn-reviews-side i.rotate {
  margin-left: 2px;
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.navbar-center .link-tab {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-bottom: 0;
  border-bottom: none;
}
.navbar-center .link-tab a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.8rem;
  font-size: 15px;
  font-weight: normal;
  height: 64px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0.8rem;
}
.navbar-center .link-tab a:hover {
  color: #ffffff;
}
.navbar-center .link-tab a.active {
  color: #ffffff;
}
.navbar-center .link-tab a.active:before {
  height: 3px;
  background-color: #ffffff;
}

/*Questions*/
.box-question {
  position: relative;
}
.box-question.disabled .checkbox-at-multi,
.box-question.disabled .material-switch,
.box-question.disabled .rating-type-btn {
  opacity: 0.4;
}
.box-question-count {
  display: flex;
  padding-top: 1.24rem;
  flex-direction: column;
  position: absolute;
  left: -44px;
  height: 100%;
}
.box-question-count div {
  text-align: center;
}
.box-question-count .btn-updown {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  outline: none;
}
.box-question-count .btn-updown:hover {
  color: #EF7A1D;
}
.box-question-count .btn-updown:disabled:hover {
  color: rgba(16, 16, 16, 0.3);
}
.box-question-body {
  border-width: 2px;
  border-style: dashed;
  border-color: #EF7A1D;
  padding: 1.5rem;
  border-radius: 8px;
}
.checkbox-at-comment, .checkbox-at-multi {
  transform: translateX(50px);
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.checkbox-at-comment.show, .checkbox-at-multi.show {
  transform: translateX(0px);
  opacity: 1;
}
.rating-type-btn .btn {
  border: 1px solid #ced4da;
  padding: .475rem .75rem;
}
.rating-type-btn .btn:hover {
  background-color: transparent;
  border-color: #EF7A1D;
  color: #EF7A1D;
}
.rating-type-btn .btn.active {
  background-color: rgb(233, 247, 244);
  border-color: #EF7A1D;
  color: #EF7A1D;
}
.rating-type-btn .btn.focus, .btn:focus {
  box-shadow: none;
}
.box-question-footer {
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.box-question:hover .box-question-footer {
  opacity: 1;
}
.box-question.done .box-question-body {
  border-color: transparent;
}
.box-question.done:hover .box-question-body {
  border-color: rgb(197, 206, 214);
}
.box-question.on-modal .box-question-body {
  border: none;
}

.question-card {
  background-color: #ffffff;
  border: 1px solid #ffffff;
  cursor: default;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 4px;
  padding: 16px;
  margin: 13px 0px;
  border-radius: 4px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.question-card-title {
  word-break: break-word;
  font-size: 14px;
  max-height: 42px;
  overflow: hidden;
}
.question-hover {
  display: none;
  margin-top: 16px;
}
.question-rating-count {
  width: 100%;
  background-color: rgb(240, 242, 245);
  color: rgb(97, 112, 128);
  text-align: center;
  font-size: 14px;
  padding: 7px 10px;
  border-radius: 4px;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  cursor: pointer;
}
.question-rating-count.active,
.question-rating-count.active:hover {
  background-color: #EF7A1D;
  color: #ffffff;
}
.question-rating-count:hover, .question-rating-small:hover {
  color: #EF7A1D;
}
.question-rating-small {
  width: 280px;
  margin-bottom: 8px;
  background-color: rgb(240, 242, 245);
  color: rgb(97, 112, 128);
  font-size: 13.5px;
  padding: 8px 8px 7px 16px;
  border-radius: 4px;
  cursor: pointer;
}
.question-rating-small.selected {
  background-color: #f3f6f9;
  border: 1px solid #EF7A1D;
}
.question-rating-small.answer {
  cursor: default;
}
.question-rating-small.answer.selected {
  background-color: #f3f6f9;
  border: 1px solid #EF7A1D;
}

textarea.disable-white:disabled {
  background-color: #ffffff;
  opacity: 0.6;
  padding: .6rem .75rem;
  cursor: not-allowed;
}
@-webkit-keyframes showquestion {
  0% { opacity: 0; -webkit-transform: translateY(10%); }   
  100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes showquestion {
  0% { opacity: 0; -moz-transform: translateY(10%); }   
  100% { opacity: 1; -moz-transform: translateY(0); }
}
.question-card:hover {
  border-color: #EF7A1D;
}
.question-card:hover .question-hover {
  display: block;
  -webkit-animation: showquestion .3s ease-out;
  -moz-animation: showquestion .3s ease-out;
}
.question-card:hover .type-question {
  display: none;
}
.section-reviews-content {
  margin-left: 465px;
  padding: 2.5rem 4rem;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.section-reviews-content.full-content {
  margin-left: 0;
}
.content-reviews {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0px auto;
}
.btn-link-custom {
  color: #EF7A1D;
}
.btn-link-custom:hover {
  color: #EF7A1D;
  text-decoration: none;
  background-color: #fafafa;
}
.btn-link-custom i.rotate {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.section-reviews-split {
  margin-left: 300px;
  margin-right: 450px;
  min-height: calc(100vh - 64px);
}
.section-reviews-split.full-content {
  margin-right: 0;
}
.reviews-split-left {
  height: calc(100vh - 64px);
  overflow: auto;
}
.reviews-split-left-content {
  width: 100%;
  max-width: 816px;
  padding: 3rem;
  margin: 0 auto;
}
.reviews-split-right {
  position: fixed;
  right: 0;
  top: 64px;
  width: 450px;
  transform: translateX(0px);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.reviews-split-right.hide-side {
  transform: translateX(425px);
}
.reviews-split-right-content {
  height: calc(100vh - 64px);
  overflow: auto;
  background-color: rgb(247, 249, 250);
  border-left: 1px solid rgb(220, 225, 230);
  padding: 5rem 0 3rem 0;
}
.btn-reviews-split-right {
  position: absolute;
  top: 27px;
  left: -16px;
  height: 34px;
  width: 34px;
  box-shadow: rgba(34, 45, 56, 0.16) 0px 1px 3px;
  cursor: pointer;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.btn-reviews-split-right-m {
  position: fixed;
  top: 75px;
  left: 0;
  z-index: 6;
  width: 40px;
  height: 35px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  box-shadow: rgba(34, 45, 56, 0.16) 0px 1px 3px;
  cursor: pointer;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 35px;
}
.btn-reviews-split-right:hover {
  color: #EF7A1D;
}
.btn-reviews-split-right i {
  margin-left: 1px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.btn-reviews-split-right-m i {
  margin-left: 10px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.btn-reviews-split-right i.rotate,
.btn-reviews-split-right-m i.rotate {
  margin-left: -1px;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.btn-reviews-split-right-m i.rotate {
  margin-left: 9px;
}

/* ================
    Cycle Review
==================*/
.section-reviews.cycle-reviews {
  height: 100vh;
}
.section-reviews-side.show-side {
  transform: translateX(0px) !important;
}
.section-reviews.cycle-reviews .section-reviews-side {
  width: 300px;
}
.section-reviews.cycle-reviews .section-reviews-side .side-reviews {
  padding: 3rem 0;
}
.cycle-menu {
  padding: 0 1.5rem;
}
.cycle-menu .cycle-menu-item a {
  position: relative;
  display: block;
  padding: 0.43rem 0.7rem 0.3rem 0.7rem;
  margin-bottom: 6px;
  font-size: 13.5px;
  color: #616f80;
  font-weight: 500;
  border-radius: 4px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.cycle-menu .cycle-menu-item a:hover {
  background-color: #f3f6f9;
  color: #EF7A1D;
}
.cycle-menu .cycle-menu-item a.active {
  background-color: #EF7A1D;
  color: #ffffff;
}
.cycle-menu .cycle-menu-item a.done,
.cycle-submenu-item .done {
  text-decoration: line-through;
}
.cycle-menu .cycle-menu-item a.done:after,
.cycle-submenu-item .done:after {
  font-size: 12px;
  content: "\f00c";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: 0.7rem;
  transform: translateY(-50%);
  color: #EF7A1D;
}
.cycle-menu .cycle-menu-item a.done.active:after {
  color: #ffffff;
}
.cycle-big-menu {
  padding: 0 2rem;
}
.cycle-big-menu .btn-group .btn {
  font-size: 13.5px;
  background-color: #E2D9E2;
  padding: 0.65rem 0;
  color: #ffffff;
  border: none;
  margin: 0 1px;
  line-height: 1;
}
.cycle-big-menu .btn-group .btn:hover,
.cycle-big-menu .btn-group .btn.active {
  background-color: #6e456f;
}
.cycle-big-menu .cycle-menu-item {
  margin-bottom: 3rem;
}
.cycle-big-menu .cycle-menu-item a {
  display: flex;
  align-items: center;
  font-size: 20px;
  color: #354558;
  font-weight: 500;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.cycle-big-menu .cycle-menu-item a svg {
  margin-right: 1rem;
  stroke: #697887;
}
.cycle-big-menu .cycle-menu-item a.done svg {
  stroke: transparent;
  fill: #697887;
}
.cycle-big-menu .cycle-menu-item a:hover,
.cycle-big-menu .cycle-menu-item a.active {
  background-color: transparent;
  color: #EF7A1D;
}
.cycle-big-menu .cycle-menu-item a:hover svg,
.cycle-big-menu .cycle-menu-item a.active svg {
  stroke: #EF7A1D;
}
.cycle-big-menu .cycle-menu-item a.done.active svg,
.cycle-big-menu .cycle-menu-item a.done:hover svg {
  stroke: transparent;
  fill: #EF7A1D;
}
.section-reviews.cycle-reviews .section-reviews-content {
  margin-left: 300px;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.cycle-submenu-item {
  padding-left: 2rem;
}
.cycle-big-menu .cycle-menu-item .cycle-submenu-item .submenu-name {
  font-size: 14px;
  padding: 0.3rem 0;
  margin-bottom: 6px;
}
.cycle-big-menu .cycle-menu-item .cycle-submenu-item .active {
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  background-color: #EF7A1D;
  color: #ffffff;
}
.cycle-submenu-item .done {
  position: relative;
}
.section-reviews.cycle-reviews .section-reviews-content .content-reviews {
  padding: 3rem 0;
  max-width: 100%;
  height: calc(100vh - 154px);
  overflow-y: auto;
}
.section-reviews.cycle-reviews .section-reviews-content .content-reviews.content-normal {
  height: calc(100vh - 64px);
  padding-bottom: 2rem;
}
.section-reviews.cycle-reviews .section-reviews-content .content-reviews .content-review-box {
  width: 100%;
  max-width: 740px;
  margin: 0px auto;
}
.section-reviews.cycle-reviews .section-reviews-content .content-reviews.content-normal .content-review-box {
  max-width: 100%;
  padding: 0 3rem;
}
.section-reviews.cycle-reviews .section-reviews-content .form-control::-webkit-input-placeholder {
  color: #b9c2c9;
}
.section-reviews.cycle-reviews .section-reviews-content .form-control:-ms-input-placeholder {
  color: #b9c2c9;
}
.section-reviews.cycle-reviews .section-reviews-content .form-control::-ms-input-placeholder {
  color: #b9c2c9;
}
.section-reviews.cycle-reviews .section-reviews-content .form-control::placeholder {
  color: #b9c2c9;
}
.content-actions {
  border-top: 1px solid #ced4da;
  padding: 1.5rem;
}
.content-action-box {
  width: 740px;
  text-align: right;
  margin: 0 auto;
}
.content-action-box .btn {
  padding-left: 20px;
  padding-right: 20px;
  font-weight: 500;
}
.review-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.review-type-item {
  cursor: pointer;
  padding: 1.5rem 2rem;
  border: 1px solid #ced4da;
  border-radius: 4px;
  color: #616f80;
  line-height: 1.6;
}
.review-type-item:hover, .reviewees-type-item:hover {
  border-color: #EF7A1D;
}
.review-type-item.active {
  border-color: #EF7A1D;
  background-color: #f3f6f9;
  color: #EF7A1D;
}
.review-type-item.a-r {
  display: flex;
  font-weight: normal;
  margin-bottom: 1.5rem;
}
.a-r-value {
  display: none;
}
.review-type-item.a-r.active {
  background-color: #ffffff;
  color: #616f80;
}
.review-type-item.a-r.active .a-r-value {
  display: block;
}
.ar-radio {
  margin-top: 6px;
  margin-right: 1rem;
}

.reviewees-type-item {
  display: block;
  margin-bottom: 25px;
  font-weight: normal;
}
.reviewees-type-item input[type=radio]{
  display: none;
}
.reviewees-type-item-box {
  cursor: pointer;
  padding: 14px 20px 16px 20px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  color: #616f80;
  line-height: 1.6;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.reviewees-type-item-box:hover {
  border-color: #EF7A1D;
}
.reviewees-type-item input[type=radio]:checked+.reviewees-type-item-box {
  border-color: #EF7A1D;
  background-color: #EF7A1D;
  color: #ffffff;
}
.progress-setting-template {
  width: 40px;
  height: 10px;
  margin-top: 1px;
}

.specific-employee-section {
  margin-bottom: 1rem;
  display: flex;
  border: 1px solid #ced4da;
  border-radius: 4px;
}
.employee-section-left {
  flex-basis: 73%;
  border-right: 1px solid #ced4da;
}
.employee-list-left {
  max-height: 50vh;
  min-height: 50vh;
  overflow-y: auto;
  background-color: rgb(247, 249, 250);
}
.employee-list-left ul {
  margin-left: -40px;
}
.employee-list-left ul ul {
  margin-left: -20px;
}
.employee-list-left li {
  position: relative;
  list-style: none;
}
.employee-list-left .data-parent {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 100%;
  padding-right: 20px;
  cursor: pointer;
  /*background-color: #f3f6f9;*/
}
.employee-list-left li .data-parent:before {
  display: block;
  position: absolute;
  top: 28px;
  left: 10px;
  content: "";
  width: 7px;
  height: 7px;
  border: solid #616f80;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.employee-list-left li .data-parent.expanded:before {
  top: 26px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.employee-list-left .data-parent:hover:before {
  border-color: #000;
}
.user-list {
  cursor: pointer;
  width: 100%;
  border-bottom: 1px solid rgb(220, 225, 230);
  margin-bottom: 0;
  font-weight: normal;
}
.user-list input {
  position: absolute;
  right: 12px;
  top: 15px;
  opacity: 0;
}
.user-list .checkmark {
  position: absolute;
  top: 24px;
  right: 12px;
  height: 16px;
  width: 16px;
  border: 1px solid #9B9B9B;
  border-radius: 16px;
  -webkit-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}
.user-list .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  right: 6px;
  top: 3px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.user-list input:checked~.checkmark {
  background-color: #EF7A1D;
  border: none;
}
.user-list input:checked~.checkmark:after {
  display: block;
}
.user-list-box {
  background-color: #ffffff;
  padding: 12px 50px 12px 30px;
}
.user-list-box:hover {
  background-color: #fafafa;
}
.user-list-box img {
  width: 40px;
  height: 40px;
  border-radius: 40px;
}
.name-title {
  margin-left: 0.8rem;
  font-size: 14px;
}
.name-title div {
  max-width: 175px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.user-list input[type=checkbox]:checked+.user-list-box {
  background-color: #e9f7f1;
}

.employee-section-right {
  flex: 1 1 auto;
  background: rgb(247, 249, 250);
  border-radius: 0px 4px 4px 0px;
}
.employee-list-title {
  padding: 1.1rem 1rem;
  border-bottom: 1px solid #ced4da;
}
.employee-section-right .employee-list-content {
  max-height: 50vh;
  min-height: 50vh;
  overflow-y: auto;
  padding-top: 10px;
}
.employee-item {
  padding: 3px 7px 3px 12px;
  font-size: 12px;
}
.name-close {
  max-width: 150px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.employee-item .black-link i {
  padding-top: 10px;
}

/*Sequence*/
.box-sequence {
  border: 1px solid #dee2e6;
  margin: 2rem 0;
  border-radius: 6px;
}
.box-sequence.borderless {
  border: none;
}
.box-sequence-header {
  padding: 1.3rem;
}
.box-sequence-body {
  background-color: rgb(247, 249, 250);
  padding: 1.5rem;
}
.box-sequence-header-set {
  background-color: rgb(247, 249, 250);
  padding: 1.3rem 1.5rem;
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
}
.box-sequence-body .select-14 .select2-container .select2-selection--single {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group-append.append-custom .input-group-text {
  height: 35px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* ===========
    Results
=============*/
.section-results {
  height: calc(100vh - 64px);
  margin-top: 64px;
  background-color: #ffffff;
  overflow-y: auto;
}
.content-results {
  max-width: 1152px;
  width: 100%;
  margin: 48px auto;
  padding: 0px 16px;
}
.results-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(184px), 1fr));
  gap: 16px;
  flex-wrap: wrap;
}
.comparison-item {
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  text-align: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  background-color: transparent;
  padding: 16px;
  border-radius: 4px;
  border-width: 2px;
  border-style: dashed;
  border-color: rgb(220, 225, 230);
  border-image: initial;
}
.comparison-item:hover {
  border-color: #EF7A1D;
}
.comparison-item.active {
  display: block;
  text-align: left;
  background-color: rgb(247, 249, 250);
  border-width: 1px;
  border-style: solid;
}
.comparison-item.active:hover {
  background-color: #f3f6f9;
}

.delete-comparison {
  cursor: pointer;
  color: rgb(105, 120, 135);
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.delete-comparison:hover {
  color: #354558;
}
.delete-comparison svg {
  width: 18px;
  height: 18px;
  fill: currentcolor;
  position: relative;
  top: -1px;
}
.comparison-item:hover .delete-comparison {
  opacity: 1;
}
.title-comparison {
  color: rgb(34, 45, 56);
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 180px;
  overflow: hidden;
}
.comparison-item .text-gray {
  color: #000000;
  margin-top: 1px;
  opacity: 0.5;
}
.comparison-item .text-gray svg {
  display: inline-block;
  vertical-align: middle;
  margin-top: -2.5px;
  margin-right: 3px;
  fill: rgb(105, 120, 135);
  width: 16px;
  height: 16px;
}
.scatter-comparison {
  position: relative;
  padding-left: 3rem;
}
.scatter-comparison-left {
  position: absolute;
  left: 0;
  top: 0;
  webkit-writing-mode: vertical-lr;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  max-height: 295px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 13.5px;
  color: rgb(97, 112, 128);
}
.scatter-comparison-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
}
.scatter-comparison-bottom .text-scatter {
  padding-top: 0.5rem;
  max-width: 540px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  font-size: 13.5px;
  color: rgb(97, 112, 128);
}
.heatmap {
  display: flex;
  border-radius: 4px;
  border: 1px solid #ced4da;
}
.heatmap-left {
  display: flex;
  flex-direction: column;
}
.heatmap-left-top {
  position: relative;
  display: flex;
  margin-bottom: 2px;
  white-space: nowrap;
}
.heatmap-left-top-content {
  display: flex;
  -webkit-box-pack: end;
  justify-content: flex-end;
  height: 110px;
  width: 250px;
}
.heatmap-title {
  padding-left: 1rem;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
  height: 80px;
  background-color: rgb(247, 249, 250);
  display: flex;
  border-top: 1px solid #ced4da;
  border-right: 1px solid #e6e6e6;
}
.heatmap-title:last-child {
  border-bottom-left-radius: 4px;
}
.heatmap-title-text {
  max-width: 260px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 13.5px;
  color: rgb(97, 112, 128);
}
.heatmap-content {
  display: flex;
  -webkit-box-flex: 1;
  flex-grow: 1;
  flex-direction: column;
  overflow-x: auto;
}
.heatmap-content-top {
  position: relative;
  display: flex;
  margin-bottom: 2px;
  white-space: nowrap;
}
.heatmap-content-top-title {
  display: flex;
  -webkit-box-pack: start;
  justify-content: flex-start;
  width: 100%;
  height: 110px;
  min-width: 196px;
}
.top-title-box {
  width: 80px;
}
.heatmap-content-top-title-item {
  display: inline-block;
  transform: translate(10px, 40px) rotate(-45deg);
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 110px;
  overflow: hidden;
  font-weight: 500;
  color: rgb(97, 112, 128);
}
.heatmap-content-value {
  width: 80px;
  height: 80px;
  display: inline-flex;
  flex-shrink: 0;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  border-top: 1px solid #ced4da;
  border-right: 1px solid #ced4da;
  background: white;
  font-size: 14px;
  line-height: 20px;
  color: #9ca8b3;
}
.heatmap-content-value.active {
  font-weight: 500;
  color: rgb(34, 45, 56);
}
.heatmap-content-value.active.success-1 {
  background: #EF7A1D;
  color: #ffffff;
}
.heatmap-content-value.active.success-2 {
  background: #75d0aa;
}
.heatmap-content-value.active.success-3 {
  background: #b0e4ce;
}
.heatmap-content-value.active.success-4 {
  background: #ebf8f2;
}

.heatmap-content-value.active.warning-1 {
  background: #ffe181;
}
.heatmap-content-value.active.warning-2 {
  background: #ffeaa6;
}
.heatmap-content-value.active.warning-3 {
  background: #fff3cc;
}
.heatmap-content-value.active.warning-4 {
  background: #fffcf2;
}

.heatmap-content-value.active.danger-1 {
  background: #ff3c60;
  color: #ffffff;
}
.heatmap-content-value.active.danger-2 {
  background: #ff6783;
  color: #ffffff;
}
.heatmap-content-value.active.danger-3 {
  background: #ff93a7;
}
.heatmap-content-value.active.danger-4 {
  background: #ffd3db;
}

.change-bar {
  display: flex;
}
.change-bar-left {
  -webkit-box-flex: 1;
  flex-grow: 1;
}
.change-bar-left .box-change-bar {
  display: flex;
  align-items: center;
  background-color: #fafafa;
  border: 1px solid #ced4da;
  padding: 1px 0 0 15px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  height: 40px;
}
.change-bar-center {
  width: 8%;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  display: flex;
  height: 40px;
  text-align: center;
  padding: 6px 0px;
  border-top: 1px solid #ced4da;
  border-bottom: 1px solid #ced4da;
}
.change-bar-right {
  -webkit-box-flex: 1;
  flex-grow: 1;
}
.change-bar-right .box-change-bar {
  display: flex;
  align-items: center;
  background-color: #fafafa;
  border: 1px solid #ced4da;
  padding: 1px 0 0 15px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  height: 40px;
}
.note-results {
  display: flex;
  justify-content: space-between;
}
.note-results-right {
  border-left: 2px solid rgb(251, 223, 166);
  padding-left: 1rem;
  margin-left: 1.5rem;
}
.note-results-right svg {
  margin-top: -1px;
}


/* ================
    Right Panel
==================*/
.side-panel-right {
  opacity: 0;
  background-color: #ffffff;
  box-shadow: -10px 0px 30px 1px rgba(0,0,0,0.1);
  position: fixed;
  top: 65px;
  bottom: 0px;
  left: 100%;
  width: 0px;
  z-index: 6;
  transform: translateX(0px);
  transition: transform 150ms ease 0s;
  display: flex;
  flex-direction: column;
}
.side-panel-right.show-panel {
  opacity: 1;
  width: 350px;
  transform: translateX(-350px);
}
.panel-right-header .black-link {
  padding: 1.3rem 1.5rem 1rem 1.5rem;
  /*border-bottom: 1px solid #e9ecef;*/
}
.panel-right-title {
  padding: 0 1.5rem 1.2rem 1.5rem;
}
.panel-right-title-text {
  max-width: 265px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.panel-right-header .nav.tabs-normal {
  border-top: 1px solid #e9ecef;
  /*background-color: rgb(247, 249, 250);*/
}
.panel-right-header .nav.tabs-normal .nav-item {
  width: 50%;
}
.panel-right-body {
  flex-grow: 1;
  padding: 2rem 1.5rem;
  font-size: 13.5px;
  overflow-y: auto;
}
.nice-list {
  margin-left: -27px;
}
.nice-list li, .panel-right-body p {
  margin-bottom: 1.5rem;
}

/* =============
    Alertify
==============*/
.alertify, .alertify-logs {
  z-index: 9999;
  left: 50% !important;
  bottom: 1.5rem !important;
  transform: translateX(-50%) !important;
}

.alertify input {
  border: 2px solid #9ca8b3;
}

.alertify-logs > .success {
  background-color: #02c58d;
  color: #ffffff;
}

.alertify-logs > .error {
  background-color: #fc5454;
  color: #ffffff;
}

.alertify-logs > *, .alertify-logs > .default {
  border-radius: 4px;
  background-color: #EF7A1D;
  font-size: 14px;
}
.alertify-logs>.show {
  padding: 1rem 2rem;
}

.chart-org {
  height: 100vh;
  position: relative;
}
.chart-org-content {
  margin-top: -5rem;
  cursor: move;
}
.chart-org .chart-org-content .edit-wrapper {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
.chart-org .chart-org-content .link path {
  stroke: #d6d6d6;
}
.chart-org-bottom {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  width: 100%;
  background-color: #fafafa;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  position: fixed;
  display: flex;
  bottom: 0;
  border-top: 1px solid #dbdbdb;
}
.chart-org-bottom .company-title {
  font-size: 1.9rem;
  font-weight: 500;
  margin-left: 1rem;
}
.chart-org-bottom .btn {
  font-size: 14px;
}

/******* Footer *******/
.footer {
  bottom: 0;
  text-align: center !important;
  padding: 19px 30px 20px;
  position: absolute;
  background-color: #ffffff;
  right: 0;
  left: 240px;
  font-family: "Poppins", sans-serif;
}

/******* Responsive *******/
@media (min-width: 769px) {
  .enlarged {
    min-height: 1200px;
  }
  .enlarged .slimscroll-menu {
    overflow: inherit !important;
  }
}

@media (max-width: 419px) {
  .content-page {
    margin-left: 70px;
  }
  .enlarged .side-menu.left {
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
  }
}

@media (max-width: 480px) {
  .side-menu {
    z-index: 10 !important;
  }
  /*.button-menu-mobile {
    display: block;
  }*/
  .navbar-custom {
    margin-left: 0 !important;
  }
}

@media (max-width: 768px) {
  .close.close-only {
    position: fixed;
    top: 15px;
    right: 15px;
    padding-left: 0;
    background-color: rgb(0, 0, 0, 0.4);
  }

  .l-text-right {
    text-align: left;
  }

  .l-ml-2, .l-ml-3, .l-ml-4 {
    margin-left: 0;
  }

  .l-mr-2, .l-mr-3, .l-mr-4, .l-mr-5 {
    margin-right: 0;
  }

  .l-px-4 {
    padding-left: 0;
    padding-right: 0;
  }
  .l-px-5 {
    padding-left: 0;
    padding-right: 0;
  }

  .l-mb-5 {
    margin-bottom: 2rem;
  }

  .m-pt-0 {
    padding-top: 0 !important;
  }
  .m-pb-0 {
    padding-bottom: 0 !important;
  }
  .m-mt-0 {
    margin-top: 0 !important;
  }
  .m-mb-0 {
    margin-bottom: 0 !important;
  }
  .m-pl-0 {
    padding-left: 0 !important;
  }
  .m-ml-0 {
    margin-left: 0 !important;
  }
  .m-pr-0 {
    padding-right: 0 !important;
  }
  .m-mr-0 {
    margin-right: 0 !important;
  }
  .m-m-x--1-5rem {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .m-tac {
    text-align: center;
  }

  .l-flex {
    display: block;
  }

  .badge-big {
    white-space: normal;
  }

  .topbar .topbar-left {
    width: 70px !important;
    height: 70px;
  }
  .topbar .topbar-left .logo-light {
    display: none !important;
  }

  .topbar .topbar-left {
    display: none;
  }
  .topbar .topbar-left .logo-sm {
    display: block !important;
    line-height: 70px !important;
    font-size: 28px;
  }
  .topbar .navbar-custom {
    padding: 0;
  }
  .top-title img {
    left: -5px;
    top: -8px;
    height: auto;
    width: 79px;
  }
  .top-title svg {
    height: auto;
    width: 79px;
    margin-left: -3px;
  }
  .notification-list.list-inline-item.notif-ontop .dropdown-menu {
    width: 340px;
    right: -2.9rem !important;
  }
  .card-notif {
    padding: 0;
  }
  .card-notif .notify-item:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  .tobar-search {
    display: none;
  }
  .button-menu-mobile, .side-button-menu {
    padding-left: 0;
    padding-right: 0;
  }
  .search-on-mobile {
    display: inline-block;
  }
  .side-menu.side-meetings {
    -webkit-transform: translateX(-240px);
    -moz-transform: translateX(-240px);
    -ms-transform: translateX(-240px);
    -o-transform: translateX(-240px);
    transform: translateX(-240px);
  }

  /*===================
    NAVBAR MINIMALIST
  ====================*/
  .navbar-minimalist {
    height: 56px;
  }
  .navbar-close {
    width: 54px;
    height: 55px;
    font-size: 24px;
  }
  .navbar-title {
    padding-left: 1.2rem;
    font-size: 1.1rem;
    max-width: 200px;
  }
  .navbar-center.m-posf {
    position: fixed;
    top: 56px;
    width: 100%;
    background-color: #6e456f;
    border-top: 1px solid rgba(255, 255, 255, 0.15)
  }
  .navbar-center .link-tab a {
    height: 54px;
  }
  .navbar-minimalist-right {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background-color: #ffffff;
    border-top: 1px solid rgb(220, 225, 230);
    padding: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .navbar-minimalist.navbar-dark .navbar-title {
    max-width: 175px;
  }

  /*.navbar-custom {
    margin-left: 70px !important;
  }*/
  .content-page {
    margin-left: 0 !important;
  }
  .content-page .content {
    padding: 0 !important;
  }
  .card {
    margin-bottom: 20px !important;
  }
  .card.m-noround {
    border-radius: 0;
  }
  .px-kpi-card {
    padding: 0 1rem;
  }
  .inner-card.card-view-kpi {
    margin-top: 0;
  }
  .m-pr-0 {
    padding-right: 0 !important;
  }
  .m-pl-0 {
    padding-left: 0 !important;
  }
  .m-mb-3 {
    margin-bottom: 3px;
  }
  .m-mb-10 {
    margin-bottom: 10px;
  }
  .m-mb-16 {
    margin-bottom: 18px;
  }
  .m-pt-5 {
    padding-top: 5px;
  }
  .m-pt-10 {
    padding-top: 10px;
  }
  .page-title-box {
    padding-top: 25px !important;
  }
  
  .profile-summary {
    padding-top: 0.5rem;
  }
  .profile-summary .summary-left {
    padding: 0 1.5rem;
    margin-bottom: 2rem;
  }
  .profile-summary .summary-right {
    padding-left: 15px;
  }
  .profile-summary .progress {
    margin-bottom: 6px;
  }
  .task-item, .task-item.auto-btn {
    padding: 1.3rem 0;
    margin: 0 1.3rem;
  }
  .task-item.user-progress {
    padding: 1.3rem 0;
  }
  .task-action {
    position: relative;
    top: auto;
    right: auto;
    left: 0;
    transform: translateY(0);
    margin-top: 1rem;
  }
  .task-item.user-progress .task-action .progress {
    margin-bottom: 0;
  }
  .summary-right .list-okrs.alignedto {
    margin-top: 0;
  }

  .row-section {
    padding: 1.3rem 0 2rem 0;
    margin-top: 0; 
  }
  .m-block {
    display: block !important;
    width: 100%;
  }
  .table-custom {
    overflow-x: auto;
  }
  th.width-215 {
    min-width: 215px;
  }
  th.width-150 {
    min-width: 150px;
  }
  .enlarged .left.side-menu {
    margin-left: -70px;
  }
  .notification-list .nav-link {
    padding: 0 8px 0 8px;
  }
  .notification-list .nav-link.nav-user {
    margin-right: 7px;
  }
  .suggestions {
    max-height: 280px;
  }
  .overflow-y-max {
    max-height: 300px;
  }
  .overflow-y-max.for-tree {
    max-height: 465px;
  }
  .modal-filter .modal-body {
    max-height: 414px;
  }

  .period-list-view {
    display: block;
    margin-top: 20px;
    text-align: center;
  }
  .period-list-view.not-admin {
    margin-top: 0;
  }
  .okr-toggle-view {
    margin-right: 0;
  }
  .dd-period {
    width: 100%;
    justify-content: center;
    margin-top: 20px;
  }
  .dd-period.not-admin {
    justify-content: center;
    margin-top: 0;
  }

  .summary-okr {
    padding-top: 0.7rem;
  }
  .summary-okr .col-auto {
    margin-right: 0;
  }
  .okr-analytics .col-auto, .summary-okr .col-auto {
    width: 50%;
    padding-bottom: 1rem;
    padding-left: 15px;
    margin-top: 1rem;
    border-bottom: 1px solid #e9ecef;
  }
  .okr-analytics .col-auto:last-child, .summary-okr .col-auto:last-child {
    width: 100%;
    padding-bottom: 0;
    border-bottom: none;
  }
  .okr-analytics.col4 .col-auto:last-child {
    width: 50%;
    padding-bottom: 0;
  }
  .okr-analytics.col4 .col-auto:nth-child(4) {
    padding-bottom: 0;
    border-bottom: none;
  }
  .okr-card-body.with-pr {
    padding-right: 0;
  }
  .okr-card-item {
    width: 100%;
    padding: .4rem 0;
    margin-right: 0;
  }
  .okr-card-body.with-pr .okr-card-item {
    width: 100%;
  }
  .okr-card-body.with-pr .okr-card-item:nth-child(1) {
    width: 100%;
  }
  .newtree-card .inner-card .okr-card-body .okr-card-item {
    padding: 0;
  }
  .title-okr {
    padding: 0;
  }
  .detail-obj {
    padding: 0;
  }
  .detail-obj .progress-obj {
    margin-left: 90px;
  }
  .obj-desc {
    margin-top: 15px;
  }
  .third {
    width: 100%;
    float: none;
    text-align: left;
    padding: 1rem 0;
    border-bottom: 1px solid #e9ecef;
  }
  .third.third-small {
    padding: 1rem 1rem;
    text-align: center;
  }
  .third.third-small:nth-child(3) {
    border-bottom: none;
  }
  .third.third-small .text-muted {
    float: none;
  }
  .third:nth-child(2) {
    width: 100%;
    border-left: none;
    border-right: none;
  }
  .third:after {
    display: block;
    clear: both;
    content: "";
  }
  .third .text-muted {float: left;}
  .third .value {float: right;}
  .obj-desc .third .value {
    font-weight: normal;
    font-size: 14px;
    margin-top: 0px;
  }
  .obj-desc.obj-user {
    border-top: none;
    margin-top: 0;
  }
  .obj-desc.obj-user .obj-owner-list {
    padding-top: 0;
    padding-left: 0;
    justify-content: flex-end;
  }
  .obj-desc.obj-user .third .text-muted {
    padding-top: 12px;
  }
  .obj-desc.obj-user .third:last-child {
    border-bottom: none;
  }
  .title-obj-detail .font-22 {
    font-size: 18px;
  }

  .detail-obj .nav {
    flex-wrap: nowrap;
    overflow: hidden;
    overflow-x: auto;
  }
  .detail-obj .nav .nav-item:nth-child(2) .nav-link {
    /*width: 210px;*/
    width: 135px;
  }
  .detail-obj .nav .nav-item:nth-child(3) .nav-link {
    /*width: 180px;*/
    width: 130px;
  }
  .detail-obj .nav .nav-link {
    padding: 1.2rem 1.5rem 1.1rem 1.5rem;
  }
  .comment-list .float-left {
    float: none !important;
  }
  .obj-card-list.small-obj .obj-card-item .progress-obj {
    width: 70px;
    height: 70px;
  }
  .obj-card-list.small-obj .title-period {
    margin-top: 13px;
    margin-left: 0;
  }
  .obj-card-list.small-obj .obj-card-item .obj-owner-list {
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0.4rem;
  }
  .target-current .col-md-6 {
    text-align: left;
  }
  .target-current .col-md-6:last-child {
    border-left: none;
    padding-top: 8px;
  }
  .list-okrs .okr-card .okr-card-item:nth-child(1) {
    width: 100%;
  }
  .list-okrs .okr-card .okr-card-item:nth-child(2) {
    width: 100%;
  }
  .list-okrs .okr-card .okr-card-item:nth-child(3) {
    width: 100%;
    justify-content: flex-start;
  }
  .progress-detail .list-okrs {
    margin-bottom: 2.5rem;
  }
  .nav.tab-okrs {
    flex-wrap: nowrap;
    overflow: hidden;
    overflow-x: auto;
  }
  .nav.tab-okrs.tab-kpi {
    margin-bottom: 1.5rem;
  }
/*  .nav.tab-okrs .nav-item:nth-child(2) .nav-link {
    width: 135px;
  }
  .nav.tab-okrs.tab-kpi .nav-item:nth-child(2) .nav-link {
    width: auto;
  }
  .nav.tab-okrs .nav-item:nth-child(3) .nav-link {
    width: 130px;
  }
  .nav.tab-okrs .nav-item:nth-child(4) .nav-link {
    width: 130px;
  }*/
  .nav.tab-okrs .nav-link {
    padding: 1.2rem 1.5rem 1.1rem 1.5rem;
  }
  .comment-list {
    padding: 1.3rem 0;
  }
  .progress-detail-right {
    padding-left: 16px;
    margin-top: 1.5rem;
  }
  .nav.on-modal .nav-link {
    padding: 1rem 1rem 1rem 1rem;
  }
  .nav.on-modal .nav-item:nth-child(2) .nav-link {
    width: 175px;
  }
  .padding-mobile {
    padding: 1.3rem !important;
  }
  .max-height-okrs {
    max-height: 470px;
  }
  .list-okrs.on-modal {
    padding: 0;
  }
  .list-okrs.on-modal .search-list {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .list-okrs.on-modal .okr-card .okr-card-item:nth-child(1) {
    width: 100%;
  }
  .list-okrs.on-modal .okr-card .okr-card-item:nth-child(2) {
    width: 100%;
  }
  .list-okrs.on-modal .okr-card .okr-card-item:nth-child(3) {
    width: 100%;
  }
  .list-okrs.on-modal .okr-card .okr-card-item:nth-child(4) {
    width: 100%;
  }
  .list-okrs.on-modal .card .okr-card-title {
    margin-right: 1rem !important;
    border-right: none;
  }
  .list-okrs.on-modal .card .okr-card-body {
    margin-right: 0 !important;
    border-right: none;
  }
  .list-okrs.on-modal .card .btn-add {
    position: relative;
    right: -1rem;
    top: -1.3rem;
    transform: translateY(0);
    margin-top: 1.5rem;
  }

  .content-obj-left {
    float: none;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-top: 1rem;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 1.5rem;
  }
  .content-obj-middle {
    float: none;
    width: 100%;
    padding-left: 10px;
    padding-right: 0;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #e9ecef;
  }
  .obj-owner-list {
    justify-content: flex-start;
  }
  .content-obj-right {
    float: right;
    padding-left: 0;
    padding-top: 1.3rem;
  }
  .padding-row {
    padding: 0 0.8rem;
  }
  .padding-row:nth-child(2) {
    border-left: none;
    border-right: none;
  }
  .tree-view.read-only {
    padding: 0;
  }
  .tree-view.read-only .content-obj-left {
    width: 100%;
  }
  .tree-view.read-only .content-obj-right {
    padding-right: 0;
  }
  .search-list.for-tree .form-control,
  .search-list.for-tree .form-control:focus {
    padding: 5px 15px 4px 47px;
    border-radius: 0;
  }
  .search-list.for-tree .form-group i {
    top: 19px;
    left: 20px;
  }
  .p-child-table {
    padding: 0 0;
  }

  .title-obj {
    overflow: auto;
    text-overflow: initial;
    white-space: initial;
  }
  .child-okrs {
    max-height: 400px;
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: 1.5rem;
  }
  .child-okrs.align-only {
    border-bottom: none;
    padding-bottom: 0;
  }
  .list-okrs.child-okrs .okr-card .okr-card-item:nth-child(1) {
  width: 100%;
  }
  .list-okrs.child-okrs .okr-card .okr-card-item:nth-child(2) {
    width: 100%;
  }
  .list-okrs.child-okrs .okr-card .okr-card-item:nth-child(3) {
    width: 100%;
  }
  .list-okrs.child-okrs .okr-card .okr-card-item:nth-child(4) {
    width: 100%;
    justify-content: flex-start;
    margin-top: 5px;
  }
  .obj-card-list {
    max-height: 492px;
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: 1.5rem;
  }
  .obj-card-item {
    padding: 1.2rem;
  }
  .title-period {
    display: block;
    vertical-align: initial;
    margin-top: 0.7rem;
    margin-left: 0;
  }
  .title-period .font-16 {
    max-width: none;
    overflow: auto;
    text-overflow: initial;
    white-space: initial;
    margin-bottom: 8px;
  }
  .obj-card-item .obj-owner-list {
    padding-top: 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom: 0.6rem;
  }
  .obj-card-item .text-right {
    text-align: left !important;
  }

  .when-activity {
    text-align: left;
    padding-bottom: 1rem;
  }
  .when-activity .pt-3 {
    padding-top: 0 !important;
  }

  .custom-breadcumb {
    margin: 0 1rem 1.5rem 1rem;
    padding-bottom: 1.5rem;
    display: block;
  }
  .custom-breadcumb .link-black {
    max-width: 300px;
    margin-bottom: 1rem;
  }

  .tm-card {
    padding: 1.3rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    border-bottom: 1px solid #e9ecef;
  }
  .people-list-wbtn .tm-card {
    padding: 1.3rem;
    border-left: none;
    border-right: none;
    border-bottom: none;
    margin-bottom: 0;
    border-radius: 0;
  }
  .tm-img-name {
    width: 100%;
  }
  .tm-img {
    width: 45px;
    height: 45px;
    margin-right: 1rem;
  }
  .tm-name .link-black {
    font-size: 18px;
    margin-bottom: 0;
  }
  .tm-name .font-16 {
    font-size: 14px;
  }
  .tm-action {
    margin-top: 1.3rem;
  }

  /*White Background*/
  .top-header {
    display: block;
    padding: 1.5rem 1.3rem 1.3rem 1.3rem;
  }
  .dp-meeting {
    width: 150px;
  }
  .wp-content {
    padding: 1rem 1.3rem 0 1.3rem;
    border-right: none;
  }

  /*Meetings*/
  .list-calendar-sync .suggestions-list {
    padding: 1.2rem 1.5rem;
  }
  .tp-list-item {
    padding: 0 45px 0 9px;
  }
  .tp-inner-value {
    margin-right: -45px;
  }
  .custom-checkbox.check-inner-step {
    padding-right: 95px;
  }
  .box-below {
    flex-flow: row wrap;
    margin-bottom: 1.5rem;
  }
  .tp-box-input {
    order: 2;
  }
  .modal-tp-detail .modal-content {
    display: block;
    max-height: 100%;
  }
  .detail-section {
    padding: 1.3rem;
  }
  .ds-tp-top {
    display: block;
  }
  .tp-title-step.at-detail {
    margin: 0 -1.3rem;
    padding: 0 1.3rem;
  }
  .draggicon-step {
    display: none;
  }
  .tp-title-step.at-detail .custom-checkbox.check-inner-step {
    padding-right: 110px;
  }
  .tp-title-step.at-detail .tp-options {
    right: 4.2rem;
  }
  .tp-title-step.at-detail .tm-img.tp-owner {
    right: 2.8rem;
  }
  .step-action {
    right: 0.9rem;
  }
  .attach-options {
    opacity: 1;
  }
  .comment-section {
    border-left: none;
    border-bottom-left-radius: .3rem;
  }
  .tp-comment-body .empty-centered {
    position: relative;
    margin-bottom: 2.5rem;
  }
  .tp-comment-top {
    padding: 1.5rem 1.3rem;
  }
  .tp-comment-body {
    padding: 0;
  }
  .tp-comment-list {
    padding-left: 1.3rem;
    padding-right: 1.3rem;
    max-height: 350px;
    overflow-y: auto;
  }
  .tp-comment-bottom {
    border-bottom-left-radius: .3rem;
    padding: .8rem .5rem 0.3rem .5rem;
  }
  .notes-body {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0.8rem;
  }
  .notes-area {
    min-height: 200px;
  }
  .notes-tool {
    display: block;
  }
  .notes-tool .dropdown {
    text-align: center;
    margin-top: 5px;
  }
  .format-tools, .color-tools {
    display: block;
    margin-left: 0;
    text-align: center;
  }
  .format-tools {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }
  .notes-tool-icon {
    margin: 0 7px;
  }
  .tp-box-suggest {
    order: 1;
    width: 100%;
    margin-bottom: 1rem;
  }
  .tp-suggest {
    display: block;
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
  .modal.left .modal-content {
    width: 100%;
  }
  .modal-tp-suggestion .nav.tab-okrs {
    overflow: inherit;
  }
  .modal-tp-suggestion .nav.tab-okrs .nav-link {
    text-align: center;
    font-size: 13.5px;
  }
  .modal-tp-suggestion .nav.tab-okrs .nav-item:nth-child(2) .nav-link,
  .modal-tp-suggestion .nav.tab-okrs .nav-item:nth-child(3) .nav-link {
    width: auto;
  }
  .modal-tp-suggestion .nav.tab-okrs .nav-link.active:before {
    bottom: auto;
    top: 0;
  }
  .tp-filter.m-block {
    padding: 1rem 1.3rem;
  }
  .tp-filter-right.on-mobile {
    margin-top: 15px;
  }
  .tp-suggest-list {
    padding-top: 0.1rem;
    padding-bottom: 1.5rem;
  }
  .tp-suggest-item {
    padding: 0.3rem 1.3rem;
    border-bottom: 1px solid #e9ecef;
  }
  .tp-suggest-item:last-child {
    border-bottom: none;
  }
  .tp-favorite {
    opacity: 1;
    border-color: #e6e6e6;
  }
  .tp-favorite.active {
    border-color: #e6e6e6;
  }
  .tp-section-list {
    padding: 0 1.3rem;
    margin-top: 2.8rem;
    margin-bottom: 0;
  }

  .wp-content-right {
    padding: 0 0 8rem 0;
  }
  .section-draggable {
    bottom: 1rem;
    right: auto;
    left: 1rem;
  }

  .section-vidcall {
    position: fixed;
    bottom: 90px;
    right: 1rem;
    left: 1rem;
  }
  .vidcall {
    width: 100%;
  }
  .section-vidcall.fullscreen-active .vidcall-footer .meeting-tool-options .notes-tool-icon {
    width: 50px;
    height: 50px;
    font-size: 25px;
    margin: 0 10px;
  }

  /*Split Content*/
  .split-container {
    display: block;
    padding-top: 55px;
    height: auto;
  }
  .split-container .page-title {
    font-size: 18px;
    margin-bottom: 0 !important;
  }
  .split-container .wp-content {
    width: 100%;
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #d2d5de;
  }
  .split-container .wp-content-right {
    height: auto;
    padding-bottom: 2rem;
    border-left: none;
  }
  .right-split {
    padding: 1.8rem 1.3rem 1.8rem 1.3rem;
    max-height: 366px;
  }
  .right-split:last-child {
    padding-top: 1.7rem;
    max-height: 364px;
  }
  .split-container.on-modal .wp-content {
    padding: 0 0 1.5rem 0;
  }
  .split-container.on-modal .wp-content-right {
    margin: 0 -1.3rem;
    padding-bottom: 0;
  }
  .split-container.on-modal .right-split {
    padding: 2rem 1.3rem;
  }
  .input-guide {
    display: block;
  }
  .input-guide-left {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    border-right: none;
  }
  .input-guide-right {
    width: 100%;
  }
  .input-guide-box {
    position: relative;
    top: 0;
    padding-left: 0;
    margin-bottom: 1.5rem;
  }

  .tab-users .nav.tab-okrs.tab-kpi {
    margin-bottom: 1.3rem;
  }
  .tab-users .nav.tab-okrs.tab-kpi .nav-link {
    padding: 0.5rem 0.5rem 0.9rem 0.5rem;
    /*width: 105px;*/
    text-align: center;
  }
 /* .tab-users .nav.tab-okrs.tab-kpi .nav-item:nth-child(2) .nav-link {
    width: 130px;
  }
  .tab-users .nav.tab-okrs.tab-kpi .nav-item:nth-child(3) .nav-link {
    width: 130px;
  }
  .tab-users .nav.tab-okrs.tab-kpi .nav-item:nth-child(4) .nav-link {
    width: 180px;
  }*/
  .tab-users .btn-add-user {
    position: relative;
    width: 100%;
  }

  .minimalist-table .title-review {
    font-size: 14px;
  }
  .minimalist-table .desc-review {
    max-width: 100%;
  }
  .minimalist-table > thead > tr > th:first-child {
    padding-left: .5rem;
  }
  .minimalist-table > tbody > tr > td:first-child {
    padding-left: .5rem;
  }
  .m-x-scroll {
    overflow-x: auto;
  }
  .side-panel-right.show-panel {
    width: 100%;
    transform: translateX(-100%);
  }
  .side-panel-right.on-active-reviews {
    top: 111px;
  }
  .box-rating-type {
    padding: 1.1rem 1.3rem 0.7rem 1.3rem;
  }
  .box-rating-type-content, .box-rating-type-content.multi {
    display: block;
    max-height: 100%;
  }
  .rating-type-input input, .rating-type-input.border-numb input {
    width: 100%;
  }
  .box-rating-type-content .btn-outline-muted, .box-rating-type-content .btn-outline-muted.w260 {
    width: 100%;
    margin-left: 0;
  }
  .section-reviews-side {
    transform: translateX(-465px);
    z-index: 4;
  }
  .section-reviews-side.hide-side {
    width: 100%;
    transform: translateX(0);
  }
  .btn-reviews-side {
    right: -32px;
    margin-top: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background-color: #EF7A1D;
    color: #ffffff;
  }
  .btn-reviews-side i {
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
    color: #ffffff;
  }
  .btn-reviews-side i.rotate {
    margin-left: -3px;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    color: #ffffff;
  }
  .section-reviews-side.hide-side .btn-reviews-side {
    right: 0;
    margin-top: -3px;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .section-reviews-side.hide-side .btn-reviews-side i.rotate {
    margin-left: 1px;
  }
  .side-reviews {
    margin-top: 56px;
    height: calc(100vh - 56px);
    padding: 1.2rem 1.2rem 5rem 1.2rem;
  }
  .section-reviews-content {
    margin-left: 0;
    padding: 3.6rem 1.3rem 7rem 1.3rem;
  }
  .section-reviews-split {
    margin-left: 0;
    margin-right: 0;
    min-height: calc(100vh - 56px);
  }
  .reviews-split-left {
    height: calc(100vh - 56px);
  }
  .reviews-split-left.with-tab {
    height: calc(100vh - 111px);
    margin-top: 55px;
  }
  .reviews-split-left-content {
    padding: 4.5rem 1.3rem 3rem 1.3rem;
  }
  .btn-reviews-split-right {
    display: none;
  }
  .reviews-split-right {
    top: 56px;
    width: 100%;
    transform: translateX(-450px);
    z-index: 5;
  }
  .reviews-split-right.hide-side {
    transform: translateX(0px);
  }
  .reviews-split-right-content {
    height: calc(100vh - 56px);
  }

  /*Reviews*/
  .navbar-minimalist .dropdown {
    margin-right: 0;
  }
  .section-reviews.cycle-reviews {
    height: auto;
    padding-top: 56px;
  }
  .section-reviews.cycle-reviews .side-reviews {
    margin-top: 56px;
    height: calc(100vh - 56px);
  }
  .section-reviews.cycle-reviews .side-reviews.with-tab {
    margin-top: 111px;
    height: calc(100vh - 111px);
  }
  .section-reviews.cycle-reviews .section-reviews-side {
    transform: translateX(-300px);
    width: 270px;
    z-index: 6;
  }
  .section-reviews.cycle-reviews .section-reviews-side .side-reviews {
    padding: 2rem 0;
  }
  .section-reviews.cycle-reviews .section-reviews-content {
    margin-left: 0;
  }
  .cycle-big-menu {
    padding: 0 1.5rem;
  }
  .section-reviews.cycle-reviews .section-reviews-content .content-reviews {
    padding: 1rem 1.3rem 5.5rem 1.3rem;
    height: auto;
  }
  .section-reviews.cycle-reviews .section-reviews-content .content-reviews.content-normal {
    height: calc(100vh - 56px);
  }
  .section-reviews.cycle-reviews .section-reviews-content .content-reviews.content-normal.with-tab {
    height: calc(100vh - 111px);
    margin-top: 55px;
  }
  .section-reviews.cycle-reviews .section-reviews-content .content-reviews.content-normal .content-review-box {
    max-width: 100%;
    padding: 0;
  }
  .specific-employee-section {
    width: 740px;
  }
  .content-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .8rem;
    background-color: #ffffff;
    z-index: 4;
  }
  .content-action-box {
    width: 100%;
  }
  .content-action-box .btn-lg {
    /*font-size: 14px;*/
  }
  .review-type {
    display: block;
  }
  .review-type-item {
    padding: 1rem;
    margin-bottom: 1.3rem;
  }
  .box-sequence-header {
    padding: 1rem;
  }
  .box-sequence-header-set {
    padding: 1rem;
  }
  .box-sequence-body {
    padding: 1.3rem;
  }

  /*Question*/
  .box-question-count {
    left: -1.2rem;
  }
  .box-question-count .font-20 {
    background-color: #ffffff;
  }
  .box-question-count .btn-updown {
    background-color: #ffffff;
  }
  .rating-type-btn .btn-group {
    display: block;
  }
  .rating-type-btn .btn {
    width: 100%;
    margin-bottom: 10px;
    border-radius: 4px !important;
  }

  /*Results*/
  .m-h74 {
    height: 74px;
    text-align: center;
  }
  .section-results {
    height: calc(100vh - 111px);
    margin-top: 111px;
  }
  .content-results {
    margin: 1.3rem auto;
    padding: 0px 1.3rem;
  }
  .results-comparison {
    max-height: 300px;
    overflow-y: auto;
  }
  .delete-comparison {
    opacity: 1;
  }
  .title-comparison {
    max-width: 270px;
  }
  .scatter-comparison {
    padding-left: 0;
    margin-top: 1rem;
  }
  .scatter-comparison-left {
    top: -2rem;
    webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    transform: rotate(0);;
    max-width: 250px;
  }
  .scatter-comparison-bottom .text-scatter {
    max-width: 250px;
  }
  .heatmap-content {
    overflow-x: initial;
  }
  .change-bar-center {
    width: 13%;
  }
  .note-results-right {
    margin-top: 1rem;
    margin-left: 0;
  }

  .accordion-reviews .panel-title {
    padding: 1rem 3.5rem 1rem 1rem;
  }

  .bottom-table .dd-select {
    justify-content: center;
  }
  .bottom-table .dd-select select {
    width: 70px;
  }
  .bottom-table .pagination {
    justify-content: center;
  }

  .footer {
    left: 0 !important;
  }
  
  .empty-icon {
    width: 70px;
    height: 70px;
    border-radius: 70px;
  }
  .empty-icon i {
    font-size: 24px;
  }
  .empty-text {
    font-size: 16px;
    margin-top: 1rem;
  }

  .filter-sample {
    padding: 1.3rem 0.3rem;
  }
  .category-sample {
    margin-top: 1.3rem;
  }
  .category-sample select {
    width: 200px;
  }
  .sample-item-list {
    padding: 1.9rem 0.2rem;
    max-height: 355px;
  }
  .sample-header {
    padding: 1.3rem;
  }

  .empty-item {
    border: 1px dashed #dbdbdb;
  }

  .alertify-logs > *, .alertify-logs > .default {
    border-radius: 4px;
  }
  .alertify-logs>.show {
    width: 300px;
    padding: 1rem 1.5rem;
  }

  .table-custom .dataTables_length {
    text-align: left !important;
    padding: 1.5rem 1.5rem 0 1.5rem ;
  }
  .table-custom .dataTables_filter {
    text-align: left !important;
    padding: 3.5rem 1.5rem 1rem 0;
  }
  .dt-buttons {
    position: relative;
  }
  .table-custom .dataTables_info {
    padding: 1.5rem 1.5rem 0 1.5rem !important;
  }
  .table-custom .dataTables_paginate {
    padding: 1rem 1.5rem 2rem 1.5rem;
  }
  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    justify-content: center;
  }
  .chart-org-bottom {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }
  .chart-org-bottom .company-title {
    font-size: 1.5rem;
    margin-left: 0.6rem;
  }
  .chart-org-bottom .btn {
    font-size: 13px;
  }
}

.right-sidebar {
  position: fixed;
  width: 280px;
  top: 70px;
  bottom: 0px;
  right: 0px;
  padding-bottom: 30px;
  background: #ffffff;
  -webkit-box-shadow: 0px 0px 13px 0px rgba(236, 236, 241, 0.44);
          box-shadow: 0px 0px 13px 0px rgba(236, 236, 241, 0.44);
}

@media (min-width: 1200px) {
  .dasboard-content {
    margin-right: 280px;
  }
}

/******* Content Page *****/
.content-page {
  margin-left: 240px;
  overflow: hidden;
}

.content-page .content {
  padding: 0 15px 10px 15px;
  margin-top: 65px;
  margin-bottom: 60px;
}

/******* Page Title *******/
.page-title-box {
  padding: 35px 0px 27px 0px;
}

.page-title-box .page-title {
  font-size: 18px;
  margin: 0;
  line-height: 30px;
}

.page-title-box .breadcrumb {
  padding: 4px 0;
  background-color: transparent;
  margin-bottom: 0;
}

.page-title-box .breadcrumb a {
  color: #354558;
}

.page-title-box .breadcrumb a:hover {
  color: rgba(53, 69, 88, 0.9);
}

.page-title-box .breadcrumb .active {
  color: rgba(53, 69, 88, 0.7);
}

/******* menu light *******/
.left-side-menu-light .side-menu {
  background-color: #ffffff;
}

.left-side-menu-light #sidebar-menu > ul > li > a.mm-active {
  color: #4090cb !important;
  background-color: #f9f9f9;
  -webkit-box-shadow: 0px 1px 1px 0px rgba(43, 46, 49, 0.07);
          box-shadow: 0px 1px 1px 0px rgba(43, 46, 49, 0.07);
}

.left-side-menu-light #sidebar-menu > ul > li > a:hover, .left-side-menu-light #sidebar-menu > ul > li > a:focus, .left-side-menu-light #sidebar-menu > ul > li > a:active {
  color: #4090cb;
}

.left-side-menu-light #sidebar-menu > ul > li > a.waves-effect .waves-ripple {
  background: rgba(255, 255, 255, 0.4);
}

.left-side-menu-light #sidebar-menu > ul > li > a .badge-light {
  background-color: #EF7A1D;
  color: #ffffff;
}

.left-side-menu-light #sidebar-menu .submenu li a:hover {
  background-color: #ffffff;
  color: #4090cb;
}

.left-side-menu-light.enlarged #sidebar-menu > ul > li:hover > a {
  color: #4090cb !important;
  background-color: #f9f9f9 !important;
}

.left-side-menu-light.enlarged #sidebar-menu > ul > li:hover > ul a:hover {
  color: #4090cb !important;
}

.left-side-menu-light.enlarged #sidebar-menu > ul > li > a:hover, .left-side-menu-light.enlarged #sidebar-menu > ul > li > a:active, .left-side-menu-light.enlarged #sidebar-menu > ul > li > a:focus {
  color: #4090cb !important;
}

.left-side-menu-light.enlarged #sidebar-menu ul ul {
  background-color: #ffffff !important;
  -webkit-box-shadow: 0px 0px 13px 0px rgba(236, 236, 241, 0.44);
          box-shadow: 0px 0px 13px 0px rgba(236, 236, 241, 0.44);
}

.left-side-menu-light .navbar-custom {
  background-color: #383c40;
}

.left-side-menu-light .navbar-custom .button-menu-mobile {
  color: #e9ecef;
  background-color: #383c40;
}

.left-side-menu-light .navbar-custom .btn-light {
  background-color: #42464b !important;
  border-color: #42464b !important;
  color: #ced4da !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.left-side-menu-light .navbar-custom .notification-list .nav-link {
  color: #ced4da;
}

.left-side-menu-light .navbar-custom .notification-list .app-search .form-control::-webkit-input-placeholder {
  color: #ced4da;
}

.left-side-menu-light .navbar-custom .notification-list .app-search .form-control:-ms-input-placeholder {
  color: #ced4da;
}

.left-side-menu-light .navbar-custom .notification-list .app-search .form-control::-ms-input-placeholder {
  color: #ced4da;
}

.left-side-menu-light .navbar-custom .notification-list .app-search .form-control::placeholder {
  color: #ced4da;
}

.left-side-menu-light .navbar-custom .notification-list .app-search .form-control,
.left-side-menu-light .navbar-custom .notification-list .app-search .form-control:focus {
  border: 1px solid #42464b;
  background: #42464b;
  color: #ced4da;
}

@media (max-width: 576px) {
  .page-title-box .breadcrumb {
    display: none;
  }
}

@media (min-width: 576px) {
  .modal-filter {
      max-width: 400px !important;
  }
}

@media (max-width: 420px) {
  /*.dropdown-menu-lg {
    width: 220px;
  }
  .notify-icon {
    display: none;
  }*/
  .navbar-custom .dropdown-menu.dropdown-menu-lg {
  right: -48px !important;
  }
  .notify-details {
    margin-left: 0px !important;
  }
}

/* =============
   Alerts
============= */
.alert {
  position: relative;
  border: 0;
}

.alert .alert-link {
  font-weight: 500;
  text-decoration: underline;
}

.alert-primary {
  color: #ffffff;
  background-color: #EF7A1D;
}

.alert-primary hr {
  border-top-color: #243174;
}

.alert-success {
  color: #ffffff;
  background-color: #02c58d;
}

.alert-success hr {
  border-top-color: #019369;
}

.alert-danger {
  color: #ffffff;
  background-color: #fc5454;
}

.alert-danger hr {
  border-top-color: #fb2222;
}

.alert-warning {
  color: #ffffff;
  background-color: #fcbe2d;
}

.alert-warning hr {
  border-top-color: #f3ab03;
}

.alert-info {
  color: #ffffff;
  background-color: #59c6fb;
}

.alert-info hr {
  border-top-color: #27b5fa;
}

.alert-secondary {
  color: #ffffff;
  background-color: #616f80;
}

.alert-secondary hr {
  border-top-color: #4b5663;
}

.alert-dark {
  color: #ffffff;
  background-color: #354558;
}

.alert-dark hr {
  border-top-color: #222c38;
}

/* ==============
  Buttons
===================*/
.btn {
  border-radius: 3px;
  font-size: 13px;
}

.btn.px-20 {
  padding-left: 20px;
  padding-right: 20px;
}

button:focus, .btn:focus {
  outline: none;
  box-shadow: none !important;
}

.btn-sm {
  font-size: 10.83333px;
}

.btn-lg {
  font-size: 15.6px;
}

.btn-primary, .btn-success, .btn-info, .btn-warning,
.btn-danger, .btn-dark, .btn-pink, .btn-purple, .btn-indigo, .btn-teal,
.btn-lime, .btn-orange, .btn-brown, .btn-blue-grey {
  color: #ffffff;
}

.btn-primary {
  background-color: #EF7A1D;
  border: 1px solid #EF7A1D;
}

.btn-primary:hover, .btn-primary.focus, .btn-primary:hover, .open > .dropdown-toggle.btn-primary, .btn-outline-primary.active, .btn-outline-primary:active,
.show > .btn-outline-primary.dropdown-toggle, .btn-outline-primary:hover, .show > .btn-primary.dropdown-toggle,
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle,
.btn-outline-primary:not([disabled]):not(.disabled).active, .btn-outline-primary:not([disabled]):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
  background-color: #EF7A1D;
  border: 1px solid #EF7A1D;
}

.btn-primary:active, .btn-primary:focus, .btn-primary.active, {
  background-color: #EF7A1D;
  border: 1px solid #EF7A1D;
}

.btn-primary.focus, .btn-primary:focus, .btn-outline-primary.focus, .btn-outline-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 2px rgba(48, 65, 155, 0.3);
  box-shadow: 0 0 0 2px rgba(48, 65, 155, 0.3);
}

.btn-secondary.focus, .btn-secondary:focus, .btn-outline-secondary.focus, .btn-outline-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-secondary.dropdown-toggle:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 2px rgba(53, 69, 88, 0.3);
  box-shadow: 0 0 0 2px rgba(53, 69, 88, 0.3);
}

.btn-success {
  background-color: #02c58d;
  border: 1px solid #02c58d;
}

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active,
.btn-success.focus, .btn-success:active, .btn-success:focus, .btn-success:hover,
.open > .dropdown-toggle.btn-success, .btn-outline-success.active, .btn-outline-success:active,
.show > .btn-outline-success.dropdown-toggle, .btn-outline-success:hover, .btn-success.active,
.btn-success:active, .show > .btn-success.dropdown-toggle,
.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show > .btn-success.dropdown-toggle:focus,
.btn-outline-success:not([disabled]):not(.disabled).active, .btn-outline-success:not([disabled]):not(.disabled):active,
.show > .btn-outline-success.dropdown-toggle {
  background-color: #02ac7b;
  border: 1px solid #02ac7b;
}

.btn-success.focus, .btn-success:focus, .btn-outline-success.focus, .btn-outline-success:focus,
.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show > .btn-success.dropdown-toggle:focus,
.btn-outline-success:not(:disabled):not(.disabled).active:focus, .btn-outline-success:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-success.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 2px rgba(2, 197, 141, 0.3);
  box-shadow: 0 0 0 2px rgba(2, 197, 141, 0.3);
}

.btn-info {
  background-color: #59c6fb;
  border: 1px solid #59c6fb;
}

.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .btn-info.focus,
.btn-info:active, .btn-info:focus, .btn-info:hover, .open > .dropdown-toggle.btn-info,
.btn-outline-info.active, .btn-outline-info:active,
.show > .btn-outline-info.dropdown-toggle, .btn-outline-info:hover, .btn-info.active, .btn-info:active,
.show > .btn-info.dropdown-toggle, .btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show > .btn-info.dropdown-toggle,
.btn-outline-info:not([disabled]):not(.disabled).active, .btn-outline-info:not([disabled]):not(.disabled):active, .show > .btn-outline-info.dropdown-toggle {
  background-color: #40bdfa;
  border: 1px solid #40bdfa;
}

.btn-info.focus, .btn-info:focus, .btn-outline-info.focus, .btn-outline-info:focus,
.btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus, .show > .btn-info.dropdown-toggle:focus,
.btn-outline-info:not(:disabled):not(.disabled).active:focus, .btn-outline-info:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-info.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 2px rgba(89, 198, 251, 0.3);
  box-shadow: 0 0 0 2px rgba(89, 198, 251, 0.3);
}

.btn-warning {
  background-color: #fcbe2d;
  border: 1px solid #fcbe2d;
}

.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active,
.btn-warning.focus, .btn-warning:active, .btn-warning:focus, .btn-warning:hover,
.open > .dropdown-toggle.btn-warning, .btn-outline-warning.active, .btn-outline-warning:active,
.show > .btn-outline-warning.dropdown-toggle, .btn-outline-warning:hover, .btn-warning.active,
.btn-warning:active, .show > .btn-warning.dropdown-toggle,
.btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, .show > .btn-warning.dropdown-toggle,
.btn-outline-warning:not([disabled]):not(.disabled).active, .btn-outline-warning:not([disabled]):not(.disabled):active, .show > .btn-outline-warning.dropdown-toggle {
  background-color: #fcb614;
  border: 1px solid #fcb614;
  color: #ffffff;
}

.btn-warning.focus, .btn-warning:focus, .btn-outline-warning.focus, .btn-outline-warning:focus,
.btn-warning:not(:disabled):not(.disabled).active:focus, .btn-warning:not(:disabled):not(.disabled):active:focus, .show > .btn-warning.dropdown-toggle:focus,
.btn-outline-warning:not(:disabled):not(.disabled).active:focus, .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-warning.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 2px rgba(252, 190, 45, 0.3);
  box-shadow: 0 0 0 2px rgba(252, 190, 45, 0.3);
}

.btn-danger {
  background-color: #fc5454;
  border: 1px solid #fc5454;
}

.btn-danger:active, .btn-danger:focus, .btn-danger:hover, .btn-danger.active,
.btn-danger.focus, .btn-danger:active, .btn-danger:focus, .btn-danger:hover,
.open > .dropdown-toggle.btn-danger, .btn-outline-danger.active, .btn-outline-danger:active,
.show > .btn-outline-danger.dropdown-toggle, .btn-outline-danger:hover, .btn-danger.active,
.btn-danger:active, .show > .btn-danger.dropdown-toggle,
.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show > .btn-danger.dropdown-toggle,
.btn-outline-danger:not([disabled]):not(.disabled).active, .btn-outline-danger:not([disabled]):not(.disabled):active, .show > .btn-outline-danger.dropdown-toggle {
  background-color: #fc3b3b;
  border: 1px solid #fc3b3b;
}

.btn-danger.focus, .btn-danger:focus, .btn-outline-danger.focus, .btn-outline-danger:focus,
.btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, .show > .btn-danger.dropdown-toggle:focus,
.btn-outline-danger:not(:disabled):not(.disabled).active:focus, .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-danger.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 2px rgba(252, 84, 84, 0.3);
  box-shadow: 0 0 0 2px rgba(252, 84, 84, 0.3);
}

.btn-dark {
  background-color: #354558;
  border: 1px solid #354558;
  color: #ffffff;
}

.btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active, .btn-dark.focus,
.btn-dark:active, .btn-dark:focus, .btn-dark:hover, .open > .dropdown-toggle.btn-dark,
.btn-outline-dark.active, .btn-outline-dark:active,
.show > .btn-outline-dark.dropdown-toggle, .btn-outline-dark:hover,
.btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active, .show > .btn-dark.dropdown-toggle,
.btn-outline-dark:not([disabled]):not(.disabled).active, .btn-outline-dark:not([disabled]):not(.disabled):active, .show > .btn-outline-dark.dropdown-toggle {
  background-color: #2b3948;
  border: 1px solid #2b3948;
  color: #ffffff;
}

.btn-dark.focus, .btn-dark:focus, .btn-outline-dark.focus, .btn-outline-dark:focus,
.btn-dark:not(:disabled):not(.disabled).active:focus, .btn-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-dark.dropdown-toggle:focus,
.btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-dark.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 2px rgba(53, 69, 88, 0.3);
  box-shadow: 0 0 0 2px rgba(53, 69, 88, 0.3);
}

.btn-secondary {
  background-color: #616f80;
  border: 1px solid #616f80;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active,
.btn-secondary.focus, .btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover,
.open > .dropdown-toggle.btn-secondary, .btn-outline-secondary.active, .btn-outline-secondary:active,
.show > .btn-outline-secondary.dropdown-toggle, .btn-outline-secondary:hover, .btn-secondary.active,
.btn-secondary:active, .show > .btn-secondary.dropdown-toggle,
.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-secondary.dropdown-toggle:focus,
.btn-outline-secondary:not([disabled]):not(.disabled).active, .btn-outline-secondary:not([disabled]):not(.disabled):active,
.show > .btn-outline-secondary.dropdown-toggle {
  background-color: #566271;
  border: 1px solid #566271;
}

.btn-secondary.focus, .btn-secondary:focus, .btn-outline-secondary.focus, .btn-outline-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-secondary.dropdown-toggle:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 2px rgba(97, 111, 128, 0.3);
  box-shadow: 0 0 0 2px rgba(97, 111, 128, 0.3);
}

.btn-link {
  color: #354558;
}

.btn-link:hover {
  color: #EF7A1D;
}

/* button Outline */
.btn-outline-primary {
  color: #EF7A1D;
  /*background-color: #EF7A1D;*/
  border-color: #EF7A1D;
}
/*.btn-outline-primary:hover {
  background-color: #EF7A1D;
  border-color: #EF7A1D;
}*/

.btn-outline-green {
  color: #EF7A1D;
  border-color: #EF7A1D;
}
.btn-outline-green:hover {
  color: #ffffff;
  background-color: #EF7A1D;
}

.btn-outline-magenta {
  color: #EF7A1D;
  border-color: #EF7A1D;
}
.btn-outline-magenta:hover {
  color: #ffffff;
  background-color: #EF7A1D;
  border-color: #EF7A1D;
}

.btn-outline-muted {
  color: #354558;
  background-color: transparent;
  border-color: #c1c1ce;
}
.btn-outline-muted i {
  color: #9ca8b3;
}
.btn-outline-muted:hover {
  color: #EF7A1D;
  border-color: #EF7A1D;
}
.btn-outline-muted:hover i {
  color: #EF7A1D;
}

.btn-outline-success {
  color: #02c58d;
  border-color: #02c58d;
}

.btn-outline-info {
  color: #59c6fb;
  border-color: #59c6fb;
}

.btn-outline-warning {
  color: #fcbe2d;
  border-color: #fcbe2d;
}

.btn-outline-danger {
  color: #fc5454;
  border-color: #fc5454;
}

.btn-outline-dark {
  color: #354558;
  background-image: none;
  background-color: transparent;
  border-color: #354558;
}

.btn-outline-secondary {
  color: #616f80;
  border-color: #616f80;
}

.btn-outline-gray {
  background-color: #ffffff;
  border-color: #c1c1ce;
  padding: 10px 12px;
  border-radius: 4px;
}
.btn-outline-gray:hover {
  border-color: #EF7A1D;
}
.btn-outline-gray svg {
  width: 18px;
  height: 18px;
  margin-right: 10px;
}
.btn-outline-gray.p-normal {
  padding: .375rem .75rem
}

.btn-light-primary {
  background-color: #fdf1e8;
  color: #EF7A1D;
}
.btn-light-primary:hover {
  background-color: #EF7A1D;
  color: #ffffff;
}

.btn-rounded {
  border-radius: 30px;
}

.btn-icon {
  position: relative;
}

.btn-icon .btn-icon-label {
  margin: -.55rem .9rem -.55rem -.9rem;
  padding: .6rem .9rem;
}

.btn-icon::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  width: 38%;
  background-color: rgba(255, 255, 255, 0.15);
  -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.btn-icon:hover::before {
  width: 100%;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%);
}

.btn-group-custom .btn {
  background-color: #ffffff;
  border: 1px solid #ced4da;
}
.btn-group-custom .btn svg {
  width: 16px;
  height: 16px;
  fill: #354558;
  margin-right: 3px;
}
.btn-group-custom .btn:hover {
  background-color: #fafafa;
}
.btn-group-custom .btn.active {
  background-color: #f3f6f9;
  color: #EF7A1D;
  font-weight: 500;
}
.btn-group-custom .btn.active svg {
  fill: #EF7A1D;
}

/* ==============
  Radio & Checkbox
===================*/
.custom-radio.radio-small {
  /*display: inline-block;
  margin-right: 20px;
  font-size: 0.9rem;*/
  padding-top: 9px;
}
/*.custom-radio.radio-small:last-child {
  margin-right: 0 !important;
}*/
.custom-radio {
  display: block;
  position: relative;
  padding-left: 27px;
  margin-bottom: 5px;
  cursor: pointer;
  /*font-size: 1rem;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: normal;
}
.custom-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.custom-radio input:checked~.checkmark {
  background-color: white;
  border: 1px solid #EF7A1D;
}
.custom-radio.radio-small .checkmark {
  top: 9px;
}
.custom-radio .checkmark {
  position: absolute;
  top: 5px;
  left: 0;
  height: 18px;
  width: 18px;
  border: 1px solid #9B9B9B;
  border-radius: 50%;
}
.custom-radio input:checked~.checkmark:after {
  display: block;
}
.custom-radio .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #EF7A1D;
}

.custom-radio.radio-grayscale {
  padding-top: 5px;
  margin-bottom: 5px;
}
.custom-radio.radio-grayscale .checkmark {
  width: 17px;
  height: 17px;
  top: 6px;
  background-color: #fafafa;
  border-color: #b3b3b3;
}
.custom-radio.radio-grayscale input:checked~.checkmark {
  background-color: #fafafa;
  border-color: #b3b3b3;
}
.custom-radio.radio-grayscale .checkmark:after {
  width: 7px;
  height: 7px;
  background: #b3b3b3;
}

.custom-checkbox {
  display: block;
  position: relative;
  padding-top: 5px;
  padding-left: 27px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: normal;
}
.custom-checkbox.checkbox-big-text {
  font-size: 14px;
  padding-left: 32px;
}
.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.custom-checkbox .checkmark {
  position: absolute;
  top: 5px;
  left: 0;
  height: 18px;
  width: 18px;
  border-radius: 3px;
  border: 2px solid #D5D5D5;
  -webkit-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}
.custom-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.custom-checkbox input:checked~.checkmark {
  background-color: #EF7A1D;
  border: none;
}
.custom-checkbox input:checked~.checkmark:after {
  display: block;
}

.custom-checkbox.checkbox-grayscale {
  margin-bottom: 5px;
}
.custom-checkbox.checkbox-grayscale .checkmark {
  border-radius: 2px;
  width: 16px;
  height: 16px;
  top: 6px;
  background-color: #fafafa;
  border-color: #cacaca;
}
.custom-checkbox.checkbox-grayscale .checkmark:after {
  left: 6px;
  top: 2px;
}
.custom-checkbox.checkbox-grayscale input:checked~.checkmark {
  background-color: #b3b3b3;
}

.custom-checkbox.check-obj {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 26px;
}
.custom-checkbox.check-obj .checkmark {
  top: 6px;
  height: 16px;
  width: 16px;
}
.custom-checkbox.check-obj .checkmark:after {
  left: 6px;
  top: 2px;
}

/* ==============
  Card
===================*/
.card {
  border: none;
  margin-bottom: 30px;
  border-radius: 6px;
  -webkit-box-shadow: 0 0 30px 0 rgb(82 63 105 / 5%);
  box-shadow: 0 0 30px 0 rgb(82 63 105 / 5%);
}
.shadow-light {
  -webkit-box-shadow: 0 10px 20px -6px rgba(0,0,0,0.1) !important;
  -moz-box-shadow: 0 10px 20px -6px rgba(0,0,0,0.1) !important;
  box-shadow: 0 10px 20px -6px rgba(0,0,0,0.1) !important;
}

@media (min-width: 576px) {
  .card-columns {
    -webkit-column-gap: 30px;
    column-gap: 30px;
  }
}

.card-columns .card {
  margin-bottom: 30px;
}

/* =============
   Nestable
============= */
.custom-dd .dd-list .dd-item .dd-handle {
  background: #f0f4f7;
  border: 1px solid #f0f4f7;
  padding: 10px 16px;
  height: auto;
  font-size: 14px;
  font-weight: normal;
  border-radius: 3px;
}

.custom-dd .dd-list .dd-item .dd-handle:hover {
  color: #EF7A1D;
}

.custom-dd .dd-list .dd-item button {
  height: auto;
  font-size: 25px;
  margin: 8px auto;
  color: #9ca8b3;
  width: 35px;
}

.custom-dd-empty .dd-list .dd3-handle {
  border: none;
  background: #dee2e6;
  height: 36px !important;
  width: 36px !important;
}

.custom-dd-empty .dd-list .dd3-handle:before {
  color: inherit;
  top: 7px;
}

.custom-dd-empty .dd-list .dd3-handle:hover {
  color: #EF7A1D;
}

.custom-dd-empty .dd-list .dd3-content {
  height: auto;
  border: none;
  padding: 8px 16px 8px 46px;
  background: #dee2e6;
}

.custom-dd-empty .dd-list .dd3-content:hover {
  color: #EF7A1D;
}

.custom-dd-empty .dd-list button {
  width: 26px;
  height: 26px;
  font-size: 16px;
  font-weight: 600;
}

.dd-dragel > .dd-item .dd-handle {
  padding: 8px 16px !important;
  background: #dee2e6;
  height: auto;
}

.dd-placeholder, .dd-empty {
  background: #dee2e6;
  border: 1px dashed #9ca8b3;
}

.dd-dragel > .dd3-item > .dd3-handle {
  border: none;
  background: #dee2e6;
  height: 36px !important;
  width: 36px !important;
}

.dd-dragel > .dd3-item > .dd3-handle:before {
  color: inherit;
  top: 7px;
}

.dd-dragel > .dd3-item > .dd3-content {
  padding: 8px 16px 8px 46px;
  background: #dee2e6;
  height: auto;
}

/* Ion Range slider */
.irs--modern .irs-bar, .irs--modern .irs-to, .irs--modern .irs-from, .irs--modern .irs-single, .irs--modern .irs-handle > i:first-child {
  background: #EF7A1D !important;
}

.irs--modern .irs-to:before, .irs--modern .irs-from:before, .irs--modern .irs-single:before {
  border-top-color: #EF7A1D;
}

.irs--modern .irs-min, .irs--modern .irs-max {
  color: #616f80;
}

.irs--modern .irs-grid-text {
  font-size: 10px;
}

/* =========== */
/* Sweet Alert2 */
/* =========== */
.swal2-modal .swal2-title {
  font-size: 24px;
}

.swal2-modal .swal2-content {
  font-size: 16px;
}

.swal2-modal .swal2-spacer {
  margin: 10px 0;
}

.swal2-modal .swal2-file, .swal2-modal .swal2-input, .swal2-modal .swal2-textarea {
  border: 2px solid #9ca8b3;
  font-size: 16px;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.swal2-modal .swal2-file:focus, .swal2-modal .swal2-input:focus, .swal2-modal .swal2-textarea:focus {
  outline: 0;
  border: 2px solid #EF7A1D;
}

.swal2-popup .swal2-styled:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.swal2-icon.swal2-question {
  color: #EF7A1D;
  border-color: #EF7A1D;
}

.swal2-icon.swal2-success {
  border-color: #02c58d;
}

.swal2-icon.swal2-success .line {
  background-color: #02c58d;
}

.swal2-icon.swal2-success .placeholder {
  border-color: #02c58d;
}

.swal2-icon.swal2-warning {
  color: #fcbe2d;
  border-color: #fcbe2d;
}

.swal2-icon.swal2-error {
  border-color: #fc5454;
}

.swal2-icon.swal2-error .line {
  background-color: #fc5454;
}

/* ==============
  Form-elements
===================*/
label {
  font-weight: 600;
}

.form-control {
  font-size: 13px;
}

.form-control:focus {
  border-color: #9B9B9B;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.custom-control-input:checked ~ .custom-control-indicator {
  background-color: #EF7A1D;
}

.custom-control-input:focus ~ .custom-control-indicator {
  -webkit-box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #EF7A1D;
  box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #EF7A1D;
}

.has-success .form-control {
  border-color: #02c58d;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.has-warning .form-control {
  border-color: #fcbe2d;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.has-danger .form-control {
  border-color: #fc5454;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.input-group-addon {
  border-radius: 2px;
  border: 1px solid #f0f4f7;
}

.input-group-text {
  font-size: 13px;
}

.input-group-append.on-left .input-group-text {
  border-top-left-radius: 4px;  
  border-bottom-left-radius: 4px;
  border-right: none;
}

/* ==============
  Form-Validation
===================*/
.error {
  color: #ff0000;
}

.parsley-error {
  border-color: #fc5454;
}

.parsley-errors-list {
  display: none;
  margin: 0;
  padding: 0;
}

.parsley-errors-list.filled {
  display: block;
}

.parsley-errors-list > li {
  font-size: 12px;
  list-style: none;
  color: #fc5454;
  margin-top: 5px;
}

/* ==============
  Form-Advanced
===================*/
/* Datepicker */
.datepicker {
  border: 1px solid #ced4da;
  padding: 8px;
}

.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover, .datepicker table tr td.today, .datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover, .datepicker table tr td.today:hover, .datepicker table tr td.selected,
.datepicker table tr td.selected.disabled, .datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected:hover {
  background-color: #EF7A1D !important;
  background-image: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #ffffff;
}

.table-condensed thead th, .table-condensed tbody td {
  padding: 5px;
}

/* Bootstrap-touchSpin */
.bootstrap-touchspin .input-group-btn-vertical .btn {
  padding: 9px 12px;
}

.bootstrap-touchspin .input-group-btn-vertical i {
  top: 4px;
  left: 8px;
}

.input-group-addon {
  padding: .375rem .75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
}

/* Prism */
:not(pre) > code[class*="language-"], pre[class*="language-"] {
  background: #f0f4f7;
}

/* Rating */
.badge:empty {
  padding: 0;
}

/* ==============
  Form Editor
===================*/
.mce-panel {
  border-color: #dfe8ee !important;
  background-color: #f0f4f7 !important;
}

.mce-menu-item:hover, .mce-menu-item.mce-selected, .mce-menu-item:focus {
  background-color: #EF7A1D !important;
}

.mce-menu {
  background-color: #ffffff !important;
}

/* ==============
  Form-Upload
===================*/
/* Dropzone */
.dropzone {
  min-height: 230px;
  border: 2px dashed rgba(0, 0, 0, 0.3);
  background: #ffffff;
  border-radius: 6px;
}

.dropzone .dz-message {
  font-size: 22px;
}

/* ==============
  Summernote
===================*/
.note-btn-group .dropdown-menu > li > a {
  display: block;
  padding: 5px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
}

.note-btn-group .dropdown-menu > li > a:hover {
  background-color: #f7f9fb;
}

.note-image-popover, .note-air-popover, .note-link-popover {
  display: none;
}

.note-image-popover .dropdown-toggle::after, .note-air-popover .dropdown-toggle::after, .note-link-popover .dropdown-toggle::after {
  margin-left: 0;
}

.note-icon-caret {
  display: none;
}

.note-editor {
  position: relative;
}

.note-editor .btn-light {
  background-color: transparent;
  border-color: transparent;
}

.note-editor .btn-group-sm > .btn, .note-editor .btn-sm {
  padding: 8px 12px;
}

.note-editor .note-toolbar {
  background-color: #f0f4f7;
  border-bottom: 1px solid #f0f4f7;
  margin: 0;
}

.note-editor .note-statusbar {
  background-color: #ffffff;
}

.note-editor .note-statusbar .note-resizebar {
  border-top: none;
  height: 15px;
  padding-top: 3px;
}

.note-editor.note-frame {
  border: 1px solid #f0f4f7;
  margin-bottom: 0px;
}

.note-popover .popover .popover-content {
  padding: 5px 0 10px 5px;
}

.note-popover .btn-default {
  background-color: transparent;
  border-color: transparent;
}

.note-popover .btn-group-sm > .btn, .note-popover .btn-sm {
  padding: 8px 12px;
}

.note-toolbar {
  padding: 5px 0 10px 5px;
}

/* ==============
  Widgets
===================*/
.widget-chart li {
  width: 31.5%;
  display: inline-block;
  padding: 0;
}

.widget-chart li i {
  font-size: 22px;
}

.mini-stat-icon i {
  font-size: 24px;
  width: 58px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
}

.icon-title {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-top: -12px;
  margin-right: 17px;
  font-size: 20px;
  z-index: 1;
}
.done-stat:before, .progress-stat:before, .pending-stat:before {
  content: "";
  position: absolute;
  top: -80px;
  left: -85px;
  right: 0;
  width: 220px;
  height: 220px;
  border-radius: 220px;
  opacity: 0.1;
  z-index: -1;
}
.done-stat:before {
  background-color: #02c58d;
}
.progress-stat:before {
  background-color: #EF7A1D;
}
.pending-stat:before {
  background-color: #fcbe2d;
}
.text-kpi {
  display: inline-block;
  vertical-align: middle;
  margin-top: -10px;
  margin-left: 10px;
}
.text-kpi a {
  position: relative;
  z-index: 1;
}

.btn-group-kpi .btn {
  font-size: 14px;
  color: #354558;
  margin-left: 13px;
}
.btn-group-kpi .btn:hover {
  font-size: 14px;
  color: #ffffff;
}
.btn-group-kpi .btn:hover i {
  color: #ffffff !important;
}
.btn-group-kpi .btn.active i {
  color: #ffffff !important;
}
.btn-group-kpi .btn:first-child {
  margin-left: 0;
}
.btn-group-kpi .btn i {
  font-size: 11px;
  vertical-align: middle;
  margin-top: -3px;
  margin-right: 8px;
}
.btn-group-kpi .btn-outline-primary:hover {
  background-color: #EF7A1D;
  border-color: #EF7A1D;
}
.btn-group-kpi .btn-outline-primary.active {
  background-color: #EF7A1D !important;
  border-color: #EF7A1D !important;
}

.dashboard-ct-chart .ct-grid {
  stroke: rgba(0, 0, 0, 0.05);
}

#slider-1 {
  height: 49px;
}

#slider-2 {
  height: 49px;
}


/* Activity */
.activity-feed {
  list-style: none;
}

.activity-feed .feed-item {
  position: relative;
  padding-bottom: 30px;
  padding-left: 30px;
  border-left: 2px solid #f0f4f7;
}

.activity-feed .feed-item:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 6px solid #EF7A1D;
  background-color: #ffffff;
}

.activity-feed .feed-item:last-child {
  border-color: transparent;
}

.suggestion-icon i {
  width: 30px;
  height: 30px;
  line-height: 30px;
  color: #ffffff;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  background-color: #EF7A1D;
  font-size: 15px;
}

/* ==============
  Charts
===================*/
.jqstooltip {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.chart {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 110px;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.chart canvas {
  position: absolute;
  top: 0;
  left: 0;
}

.chart.chart-widget-pie {
  margin-top: 5px;
  margin-bottom: 5px;
}

.percent {
  display: inline-block;
  line-height: 110px;
  z-index: 2;
}

.percent:after {
  content: '%';
  margin-left: 0.1em;
  font-size: .8em;
}

/* Morris chart */
/* Morris chart */
.morris-charts text {
  font-family: "Poppins", sans-serif !important;
}

.morris-hover.morris-default-style {
  border-radius: 5px;
  padding: 10px 12px;
  background: #ffffff;
  border: none;
  -webkit-box-shadow: 0 5px 25px 5px rgba(0, 0, 0, 0.14);
          box-shadow: 0 5px 25px 5px rgba(0, 0, 0, 0.14);
}

.morris-hover.morris-default-style .morris-hover-point {
  font-weight: 500;
  font-size: 14px;
  color: #354558 !important;
}

.morris-hover.morris-default-style .morris-hover-row-label {
  background-color: #354558;
  color: #ffffff;
  padding: 4px;
  border-radius: 5px 5px 0 0;
  margin: -10px -12px 10px;
}

/* Flot chart */
#flotTip {
  padding: 8px 12px;
  background-color: #ffffff;
  z-index: 100;
  color: #354558;
  -webkit-box-shadow: 0 5px 25px 5px rgba(0, 0, 0, 0.14);
          box-shadow: 0 5px 25px 5px rgba(0, 0, 0, 0.14);
  border-radius: 1px;
}

/* Chartist chart */
.ct-golden-section:before {
  float: none;
}

.ct-chart {
  height: 300px;
}

.ct-grid {
  stroke: rgba(0, 0, 0, 0.09);
  stroke-width: 2px;
  stroke-dasharray: 3px;
}

.ct-chart .ct-label {
  fill: #9ca8b3;
  color: #9ca8b3;
  font-size: 14px;
  line-height: 1;
}

.ct-chart.simple-pie-chart-chartist .ct-label {
  color: #ffffff;
  fill: #ffffff;
  font-size: 16px;
}

.ct-chart .ct-series.ct-series-a .ct-bar,
.ct-chart .ct-series.ct-series-a .ct-line,
.ct-chart .ct-series.ct-series-a .ct-point,
.ct-chart .ct-series.ct-series-a .ct-slice-donut {
  stroke: #EF7A1D;
}

.ct-chart .ct-series.ct-series-b .ct-bar,
.ct-chart .ct-series.ct-series-b .ct-line,
.ct-chart .ct-series.ct-series-b .ct-point,
.ct-chart .ct-series.ct-series-b .ct-slice-donut {
  stroke: #02c58d;
}

.ct-chart .ct-series.ct-series-c .ct-bar,
.ct-chart .ct-series.ct-series-c .ct-line,
.ct-chart .ct-series.ct-series-c .ct-point,
.ct-chart .ct-series.ct-series-c .ct-slice-donut {
  stroke: #fcbe2d;
}

.ct-chart .ct-series.ct-series-d .ct-bar,
.ct-chart .ct-series.ct-series-d .ct-line,
.ct-chart .ct-series.ct-series-d .ct-point,
.ct-chart .ct-series.ct-series-d .ct-slice-donut {
  stroke: #59c6fb;
}

.ct-chart .ct-series.ct-series-e .ct-bar,
.ct-chart .ct-series.ct-series-e .ct-line,
.ct-chart .ct-series.ct-series-e .ct-point,
.ct-chart .ct-series.ct-series-e .ct-slice-donut {
  stroke: #59c6fb;
}

.ct-chart .ct-series.ct-series-f .ct-bar,
.ct-chart .ct-series.ct-series-f .ct-line,
.ct-chart .ct-series.ct-series-f .ct-point,
.ct-chart .ct-series.ct-series-f .ct-slice-donut {
  stroke: #fc5454;
}

.ct-chart .ct-series.ct-series-g .ct-bar,
.ct-chart .ct-series.ct-series-g .ct-line,
.ct-chart .ct-series.ct-series-g .ct-point,
.ct-chart .ct-series.ct-series-g .ct-slice-donut {
  stroke: #f0f4f7;
}

.ct-series-a .ct-area,
.ct-series-a .ct-slice-pie {
  fill: #EF7A1D;
}

.ct-series-b .ct-area,
.ct-series-b .ct-slice-pie {
  fill: #fcbe2d;
}

.ct-series-c .ct-area,
.ct-series-c .ct-slice-pie {
  fill: #02c58d;
}

.chartist-tooltip {
  position: absolute;
  display: inline-block;
  opacity: 0;
  min-width: 10px;
  padding: 2px 10px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  background-clip: padding-box;
  background: #354558;
  color: #ffffff;
  text-align: center;
  pointer-events: none;
  z-index: 1;
  -webkit-transition: opacity .2s linear;
  transition: opacity .2s linear;
}

.chartist-tooltip.tooltip-show {
  opacity: 1;
}

/* C3 chart */
.c3 svg {
  max-width: 100%;
}

.c3-tooltip td > span {
  background: #354558;
}

.c3-tooltip td {
  border-left: none;
}

.c3-tooltip {
  -webkit-box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.12);
          box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.12);
  opacity: 1;
}

.c3-chart-arcs-title {
  font-size: 16px;
  font-weight: 500;
}

.c3-tooltip tr {
  border: none !important;
}

.c3-tooltip th {
  background-color: #354558;
}

.c3-tooltip .value {
  font-weight: 600;
}

.c3-line {
  stroke-width: 2px;
}

.c3-legend-item {
  font-size: 13px;
}

/* ==============
  Maps
===================*/
.gmaps, .gmaps-panaroma {
  height: 300px;
  background: #f0f4f7;
  border-radius: 3px;
}

.gmaps-overlay {
  display: block;
  text-align: center;
  color: #ffffff;
  font-size: 16px;
  line-height: 40px;
  background: #EF7A1D;
  border-radius: 4px;
  padding: 10px 20px;
}

.gmaps-overlay_arrow {
  left: 50%;
  margin-left: -16px;
  width: 0;
  height: 0;
  position: absolute;
}

.gmaps-overlay_arrow.above {
  bottom: -15px;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 16px solid #EF7A1D;
}

.gmaps-overlay_arrow.below {
  top: -15px;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 16px solid #EF7A1D;
}

/* ==============
  Tables
===================*/
.table {
  margin-bottom: 10px;
}

.table > tbody > tr > td, .table > tfoot > tr > td, .table > thead > tr > td {
  padding: 15px 12px;
}

.table-hover tbody tr:hover, .table-striped tbody tr:nth-of-type(odd),
.thead-default th {
  background-color: #f3f6f9;
  /*border-bottom: 1px solid #dee2e6 !important;*/
  font-weight: 600;
}

.table td, .table th {
  vertical-align: middle;
}

/************** datatables ***************/
.dataTables_wrapper.container-fluid {
  width: auto;
}

/* == Responsive Table ==*/
table.focus-on tbody tr.focused th {
  background-color: #EF7A1D;
  color: #ffffff;
}

table.focus-on tbody tr.focused td {
  background-color: #EF7A1D;
  color: #ffffff;
}

.table-rep-plugin .btn-toolbar {
  display: block;
}

.table-rep-plugin .table-responsive {
  border: none !important;
}

.table-rep-plugin .fixed-solution {
  margin-bottom: 0px;
}

.table-rep-plugin .fixed-solution .sticky-table-header {
  top: 70px !important;
}

.table-rep-plugin .btn-group.float-right .dropdown-menu {
  left: auto;
  right: 0;
  -webkit-transform: none !important;
          transform: none !important;
  top: 100% !important;
}

.table-rep-plugin tbody th {
  font-size: 14px;
  font-weight: normal;
}

.table-rep-plugin .checkbox-row {
  padding-left: 40px;
}

.table-rep-plugin .checkbox-row label {
  display: inline-block;
  padding-left: 5px;
  position: relative;
}

.table-rep-plugin .checkbox-row label::before {
  -o-transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
  background-color: #ffffff;
  border-radius: 3px;
  border: 1px solid #dee2e6;
  content: "";
  display: inline-block;
  height: 17px;
  left: 0;
  margin-left: -20px;
  position: absolute;
  transition: 0.3s ease-in-out;
  width: 17px;
  outline: none !important;
}

.table-rep-plugin .checkbox-row label::after {
  color: #616f80;
  display: inline-block;
  font-size: 11px;
  height: 16px;
  left: 0;
  margin-left: -20px;
  padding-left: 3px;
  padding-top: 1px;
  position: absolute;
  top: -1px;
  width: 16px;
}

.table-rep-plugin .checkbox-row input[type="checkbox"] {
  cursor: pointer;
  opacity: 0;
  z-index: 1;
  outline: none !important;
}

.table-rep-plugin .checkbox-row input[type="checkbox"]:disabled + label {
  opacity: 0.65;
}

.table-rep-plugin .checkbox-row input[type="checkbox"]:focus + label::before {
  outline-offset: -2px;
  outline: none;
}

.table-rep-plugin .checkbox-row input[type="checkbox"]:checked + label::after {
  content: "\f00c";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

.table-rep-plugin .checkbox-row input[type="checkbox"]:disabled + label::before {
  background-color: #f0f4f7;
  cursor: not-allowed;
}

.table-rep-plugin .checkbox-row input[type="checkbox"]:checked + label::before {
  background-color: #EF7A1D;
  border-color: #EF7A1D;
}

.table-rep-plugin .checkbox-row input[type="checkbox"]:checked + label::after {
  color: #ffffff;
}

.table-custom {
  /*background-color: #ffffff;*/
  /*border: 1px solid #dbdbdb;*/
  /*border-radius: 6px;*/
  /*box-shadow: 0 0 30px 0 rgb(82 63 105 / 5%);*/
  /*box-shadow: rgba(0,0,0,0.07) 0px 3px 10px, rgba(0,0,0,0.09) 0px 3px 5px;*/
}
.table-custom.no-shadow {
  box-shadow: none;
}
.table-custom.custom-border {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background-color: #ffffff;
}
.table-custom .container-fluid {
 padding-left: 0 !important;
 padding-right: 0 !important;
}
.table-custom table.dataTable {
   /*border-collapse: collapse !important;*/
   border-spacing: 0;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
   background-color: #ffffff;
   border: 1px solid #dbdbdb;
   border-radius: 8px;
   box-shadow: 0 0 30px 0 rgb(82 63 105 / 5%);
   width: 100% !important;
}
.table-custom .table-bordered {
  border: none;
  /*border-top: none;
  border-right: none;
  border-left: none;*/
}
.table-custom .table th {
  border-top: none;
  border-bottom: none;
  padding: 1rem .75rem .9rem .75rem;
}
.table-custom .table th:first-child {
  border-left: none;
  border-top-left-radius: 8px;
}
.table-custom .table th:last-child {
  border-right: none;
  border-top-right-radius: 8px;
}
.table-custom.custom-default .table-bordered th {
  border-top: none;
  border-bottom: none;
}

.table-custom.custom-default .table th:first-child {
  border-top-left-radius: 8px;
}
.table-custom.custom-default .table th:last-child {
  border-top-right-radius: 8px;
}
.table-custom .table tbody > tr:last-child td {
  border-bottom: none;
}
.table-custom .table td:first-child {
  border-left: none;
}
.table-custom .custom-checkbox {
  margin-left: 10px;
  margin-top: -14px;
}

/* ==============
  Calendar
===================*/
.calendar {
  float: left;
  margin-bottom: 0;
}

.none-border .modal-footer {
  border-top: none;
}

.fc-toolbar {
  margin-bottom: 5px;
}

.fc-toolbar h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  text-transform: uppercase;
}

.fc-day {
  background: #ffffff;
}

.fc-toolbar .fc-state-active, .fc-toolbar .ui-state-active,
.fc-toolbar button:focus, .fc-toolbar button:hover,
.fc-toolbar .ui-state-hover {
  z-index: 0;
}

.fc-widget-header {
  border: 1px solid #d5d5d5;
  background-color: #f0f4f7;
}

.fc-widget-content {
  border: 1px solid #d5d5d5;
}

.fc th.fc-widget-header {
  font-size: 14px;
  line-height: 20px;
  padding: 10px 0;
  font-weight: 600;
  text-transform: uppercase;
}

.fc-button {
  background: #ffffff;
  border: 1px solid #d5d5d5;
  color: #555555;
  text-transform: capitalize;
}

.fc-text-arrow {
  font-family: arial;
  font-size: 16px;
}

.fc-state-hover {
  background: #adb5bd;
}

.fc-state-highlight {
  background: #f0f0f0;
}

.fc-cell-overlay {
  background: #f0f0f0;
}

.fc-unthemed .fc-today {
  background: #ffffff;
}

.fc-event {
  border-radius: 2px;
  border: none;
  cursor: move;
  font-size: 13px;
  margin: 5px 0;
  padding: 5px 5px;
  text-align: center;
  background-color: #EF7A1D;
  color: #ffffff !important;
}

.external-event {
  color: #ffffff;
  cursor: move;
  margin: 10px 0;
  padding: 6px 10px;
}

.fc-basic-view td.fc-week-number span {
  padding-right: 5px;
}

.fc-basic-view td.fc-day-number {
  padding-right: 5px;
}

/* ==============
  Email
===================*/
.email-leftbar {
  width: 230px;
  float: left;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 5px;
}

.email-rightbar {
  margin-left: 260px;
}

.dot-online {
  position: absolute;
  left: 28px;
  font-size: 12px;
}

.chat-user-box p.user-title {
  font-size: 13px;
  color: #354558;
  font-weight: 500;
}

.chat-user-box p {
  font-size: 12px;
}

@media (max-width: 767px) {
  .email-leftbar {
    float: none;
    width: 100%;
  }
  .email-rightbar {
    margin: 0;
  }
}

.mail-list a {
  display: block;
  color: #3f5168;
  font-size: 13px;
  line-height: 24px;
  padding: 5px;
}

.mail-list a.active {
  color: #fc5454;
  font-weight: 500;
}

.message-list {
  display: block;
  padding-left: 0;
}

.message-list li {
  position: relative;
  display: block;
  height: 75px;
  line-height: 75px;
  cursor: default;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
}

.message-list li a {
  color: #354558;
}

.message-list li:hover {
  background: rgba(53, 69, 88, 0.08);
  -webkit-transition-duration: .05s;
          transition-duration: .05s;
}

.message-list li .col-mail {
  float: left;
  position: relative;
}

.message-list li .col-mail-1 {
  width: 320px;
}

.message-list li .col-mail-1 .star-toggle,
.message-list li .col-mail-1 .checkbox-wrapper-mail,
.message-list li .col-mail-1 .dot {
  display: block;
  float: left;
}

.message-list li .col-mail-1 .dot {
  border: 4px solid transparent;
  border-radius: 100px;
  margin: 22px 26px 0;
  height: 0;
  width: 0;
  line-height: 0;
  font-size: 0;
}

.message-list li .col-mail-1 .checkbox-wrapper-mail {
  margin: 28px 10px 0 20px;
}

.message-list li .col-mail-1 .star-toggle {
  margin-top: 31px;
  font-size: 13px;
  margin-left: 5px;
}

.message-list li .col-mail-1 .title {
  position: absolute;
  left: 110px;
  right: 0;
  top: 8px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 0;
}

.message-list li .col-mail-2 {
  position: absolute;
  top: 0;
  left: 360px;
  right: 0;
  bottom: 0;
}

.message-list li .col-mail-2 .subject,
.message-list li .col-mail-2 .date {
  position: absolute;
  top: 0;
}

.message-list li .col-mail-2 .subject {
  left: 0;
  right: 200px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  top: 8px;
}

.message-list li .col-mail-2 .date {
  right: 0;
  width: 170px;
  padding-left: 70px;
}

.message-list li.active,
.message-list li.active:hover {
  -webkit-box-shadow: inset 3px 0 0 #EF7A1D;
          box-shadow: inset 3px 0 0 #EF7A1D;
}

.message-list li.unread {
  background-color: #f7f7f7;
  font-weight: 500;
  color: #2b3948;
}

.message-list li.unread a {
  color: #2b3948;
  font-weight: 500;
}

.message-list .checkbox-wrapper-mail {
  cursor: pointer;
  height: 20px;
  width: 20px;
  position: relative;
  display: inline-block;
  -webkit-box-shadow: inset 0 0 0 1px #dee2e6;
          box-shadow: inset 0 0 0 1px #dee2e6;
  border-radius: 1px;
}

.message-list .checkbox-wrapper-mail input {
  opacity: 0;
  cursor: pointer;
}

.message-list .checkbox-wrapper-mail input:checked ~ label {
  opacity: 1;
}

.message-list .checkbox-wrapper-mail label {
  position: absolute;
  height: 20px;
  width: 20px;
  left: 0;
  cursor: pointer;
  opacity: 0;
  margin-bottom: 0;
  -webkit-transition-duration: .05s;
          transition-duration: .05s;
  top: 0;
}

.message-list .checkbox-wrapper-mail label:before {
  content: "\F12C";
  font-family: "Material Design Icons";
  top: 0;
  height: 20px;
  color: #2b3948;
  width: 20px;
  position: absolute;
  margin-top: -27px;
  left: 4px;
  font-size: 13px;
}

.email-inbox {
  position: relative;
}

.email-inbox .form-control,
.email-inbox .form-control:focus {
  border: 1px solid #f0f4f7;
  font-size: 13px;
  height: 40px;
  padding-left: 34px;
  padding-right: 12px;
  margin-right: 16px;
  background: #f6f6f6;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: none;
}

.email-inbox button {
  position: absolute;
  top: 12px;
  left: 6px;
  display: block;
  color: #9ca8b3;
  font-size: 11px;
  border: none;
  background-color: transparent;
}

@media (max-width: 425px) {
  .title img {
    display: none;
  }
}

.email-img-overlay .email-overlay i {
  background: #EF7A1D;
  color: #ffffff;
  font-size: 20px;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  line-height: 40px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  text-align: center;
  left: 0;
  right: 0px;
  margin: 0 auto;
  opacity: 0;
}

.email-img-overlay:hover img {
  opacity: 0.2;
}

.email-img-overlay:hover .email-overlay i {
  opacity: 1;
}

@media (max-width: 375px) {
  .date {
    display: none;
  }
}

@media (max-width: 768px) {
  .mo-mb-2 {
    margin-bottom: 10px;
  }
  .mo-mt-2 {
    margin-top: 10px !important;
  }
  .ex-pages {
    padding: 24px 0px;
  }
  .btn-toolbar {
    margin-top: 15px;
  }
}

.home-btn {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 1;
}

.bottom-svg {
  position: absolute;
  background-position: center center;
  background-color: #149CA1;
  bottom: 0;
  width: 100%;
  height: 25vh;
}
.bottom-svg:before, .top-svg:before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f0f2f5;
  z-index: -1;
}
.bottom-svg svg {
  position: absolute;
  background-position: center center;
  width: 100%;
  bottom: 25vh;
  height: auto;
  /*-moz-transform: scale(-1, -1);
  -o-transform: scale(-1, -1);
  -webkit-transform: scale(-1, -1);
  transform: scale(-1, -1);*/
}

.wrapper-page {
  margin: 7.5% auto;
  width: 420px;
  position: relative;
}

@media (max-width: 767px) {
  .wrapper-page {
    width: 90%;
  }
}

.account-pages {
  margin: 10.5% auto;
  position: relative;
}

.comming-watch div {
  display: inline-block;
}

.comming-watch div .card {
  margin: 0px 15px 15px 15px;
}

.comming-watch div .card .countdown-num {
  font-weight: 600;
  color: #EF7A1D;
}

.comming-watch div span {
  width: 150px;
  display: block;
}

.comming-watch div span:first-child {
  height: 60px;
  font-weight: 300;
  font-size: 3em;
  line-height: 48px;
}

.comming-watch div span:last-child {
  padding-top: 14px;
  font-size: 0.9em;
}

.coming-soon-search-form input {
  padding: 15px 20px;
  width: 100%;
  color: #354558;
  border: 2px solid #e9ecef;
  outline: none !important;
  padding-right: 180px;
  padding-left: 30px;
  border-radius: 30px;
}

.coming-soon-search-form button {
  position: absolute;
  top: 7px;
  right: 8px;
  outline: none !important;
  border-radius: 30px;
  padding: 9px 30px;
}

.coming-soon-search-form form {
  position: relative;
  max-width: 600px;
  margin: 0px auto;
}

.faq-box {
  border-left: 3px solid;
}

.error-bg {
  background: url("../images/error.png");
  position: absolute;
  background-position: center center;
  height: 100%;
  width: 100%;
  top: 0;
}

.error-page {
  text-transform: uppercase;
  background: repeating-linear-gradient(180deg, #ffffff, #ffffff 4px, #fcbe2d 4px, #fcbe2d 8px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 110px;
  font-weight: bold;
  line-height: .8;
  position: relative;
  letter-spacing: 10px;
}
.error-500 {
  text-transform: uppercase;
  background: repeating-linear-gradient(-45deg, #ffffff, #ffffff 4px, #fcbe2d 4px, #fcbe2d 8px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 110px;
  font-weight: bold;
  line-height: .8;
  position: relative;
  letter-spacing: 14px;
}

.maintenance-img img {
  max-width: 320px;
}

/* ==============
  Timeline
===================*/
.cd-container {
  width: 90%;
  max-width: 1170px;
  margin: 0 auto;
}

.main-timeline {
  overflow: hidden;
  position: relative;
}

.main-timeline:before {
  content: "";
  width: 3px;
  height: 100%;
  background: #adb5bd;
  position: absolute;
  top: 0;
  left: 50%;
}

.main-timeline .timeline {
  padding-right: 30px;
  position: relative;
}

.main-timeline .timeline-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #adb5bd;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: -4px;
}

.main-timeline .timeline-icon:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #EF7A1D;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.main-timeline .year {
  display: inline-block;
  padding: 8px 20px;
  margin: 0;
  font-size: 14px;
  color: #ffffff;
  background: #EF7A1D;
  text-align: center;
  position: absolute;
  top: 50%;
  right: 35%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.main-timeline .year:before {
  content: "";
  border-right: 18px solid #EF7A1D;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  position: absolute;
  top: 0;
  left: -18px;
}

.main-timeline .timeline-content {
  width: 46.5%;
  padding: 43px 50px;
  margin: 0 20px 0 0;
  background: #f0f4f7;
  position: relative;
}

.main-timeline .timeline-content:after {
  content: "";
  border-left: 20px solid #f0f4f7;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  position: absolute;
  top: 50%;
  right: -20px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.main-timeline .title {
  float: left;
  font-size: 18px;
  margin: 0 20px 20px 0;
}

.main-timeline .description {
  font-size: 14px;
  line-height: 24px;
  margin: 0;
  clear: both;
}

.main-timeline .timeline:before,
.main-timeline .timeline:after {
  content: "";
  display: block;
  width: 100%;
  clear: both;
}

.main-timeline .timeline:first-child:before,
.main-timeline .timeline:last-child:before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #adb5bd;
  background: #ffffff;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: -3px;
}

.main-timeline .timeline:last-child:before {
  top: auto;
  bottom: 0;
}

.main-timeline .timeline:nth-child(2n) {
  padding: 0 0 0 30px;
}

.main-timeline .timeline:nth-child(2n) .year {
  right: auto;
  left: 35%;
}

.main-timeline .timeline:nth-child(2n) .year:before {
  border: 18px solid transparent;
  border-right: none;
  border-left: 18px solid #EF7A1D;
  left: auto;
  right: -18px;
}

.main-timeline .timeline:nth-child(2n) .timeline-content {
  float: right;
  margin: 0 0 0 20px;
}

.main-timeline .timeline:nth-child(2n) .timeline-content:after {
  border-left: none;
  border-right: 20px solid #f0f4f7;
  right: auto;
  left: -20px;
}

@media only screen and (max-width: 1200px) {
  .main-timeline .year {
    right: 30%;
  }
  .main-timeline .timeline:nth-child(2n) .year {
    left: 30%;
  }
}

@media only screen and (max-width: 990px) {
  .main-timeline .year {
    right: 25%;
  }
  .main-timeline .timeline:nth-child(2n) .year {
    left: 25%;
  }
}

@media only screen and (max-width: 767px) {
  .main-timeline:before {
    left: 10px;
  }
  .main-timeline .timeline {
    padding: 0 0 0 30px;
    margin-bottom: 20px;
  }
  .main-timeline .timeline:last-child {
    margin-bottom: 0;
  }
  .main-timeline .timeline:first-child:before,
  .main-timeline .timeline:last-child:before {
    display: none;
  }
  .main-timeline .timeline-icon {
    margin: 0;
    position: absolute;
    top: 7px;
    left: 0;
  }
  .main-timeline .year,
  .main-timeline .timeline:nth-child(2n) .year {
    display: block;
    font-weight: bold;
    margin: 0 0 32px 30px;
    z-index: 1;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    -webkit-transform: none;
            transform: none;
  }
  .main-timeline .timeline:nth-child(2n) .year:before {
    border-left: none;
    border-right: 18px solid #EF7A1D;
    right: auto;
    left: -18px;
  }
  .main-timeline .timeline-content {
    padding: 20px;
  }
  .main-timeline .timeline-content,
  .main-timeline .timeline:nth-child(2n) .timeline-content {
    width: auto;
    float: none;
    margin: 0 0 0 30px;
  }
  .main-timeline .timeline-content:after,
  .main-timeline .timeline:nth-child(2n) .timeline-content:after {
    border: none;
    border-bottom: 20px solid #f0f4f7;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    top: -20px;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

@media only screen and (max-width: 480px) {
  .main-timeline .title {
    float: none;
  }
  .main-timeline .year,
  .main-timeline .timeline:nth-child(2n) .year {
    margin-left: 20px;
  }
  .main-timeline .timeline-content,
  .main-timeline .timeline:nth-child(2n) .timeline-content {
    margin-left: 10px;
  }
}

.pricing-box {
  padding: 30px;
  position: relative;
}

.pricing-box .pricing-icon i {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  font-size: 24px;
  line-height: 56px;
  top: -25px;
  position: absolute;
  display: inline-block;
  margin: 0 auto;
  left: 0px;
  right: 0px;
}

.pricing-box .pricing-features {
  padding-left: 20px;
}

.pricing-box .pricing-plan sup {
  font-size: 26px;
  position: relative;
  top: -18px;
}

.pricing-box .pricing-border {
  border-top: 1px solid #f0f4f7;
  margin: 0 auto;
  border-bottom: 1px solid #f0f4f7;
  padding: 5px;
}

.pricing-box .pricing-features {
  padding-left: 20px;
}

#pekerjaan_chart g.tick text tspan,
#hobi_chart g.tick text tspan,
#tokoh_chart g.tick text tspan,
#ethnic_chart g.tick text tspan {
    font-family: "Poppins", sans-serif;
    color: #354558;
    font-size: 12px;
}

.field-icon {
    float: right;
    margin-top: -33px;
    padding: 10px 30px 10px 0px;
    position: relative;
    z-index: 2;
}

.table-bordered-5 td {
    border: 5px solid #ebedf3;
}

/* LOADING MODAL */
.loading-spinner{
  width:30px;
  height:30px;
  border:2px solid indigo;
  border-radius:50%;
  border-top-color:#0001;
  display:inline-block;
  animation:loadingspinner .7s linear infinite;
}
@keyframes loadingspinner{
  0%{
    transform:rotate(0deg)
  }
  100%{
    transform:rotate(360deg)
  }
}

/* LOADING MODAL FULL */
#ftco-loader {
  position: fixed;
  width: 96px;
  height: 96px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-box-shadow: 0px 24px 64px rgba(0, 0, 0, 0.24);
  box-shadow: 0px 24px 64px rgba(0, 0, 0, 0.24);
  border-radius: 16px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .2s ease-out, visibility 0s linear .2s;
  -o-transition: opacity .2s ease-out, visibility 0s linear .2s;
  transition: opacity .2s ease-out, visibility 0s linear .2s;
  z-index: 1000; }

#ftco-loader.fullscreen {
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  background-color: #fff;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none; }

#ftco-loader.show {
  -webkit-transition: opacity .4s ease-out, visibility 0s linear 0s;
  -o-transition: opacity .4s ease-out, visibility 0s linear 0s;
  transition: opacity .4s ease-out, visibility 0s linear 0s;
  visibility: visible;
  opacity: 0.7; }

#ftco-loader .circular {
  -webkit-animation: loader-rotate 2s linear infinite;
  animation: loader-rotate 2s linear infinite;
  position: absolute;
  left: calc(50% - 24px);
  top: calc(50% - 24px);
  display: block;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg); }

#ftco-loader .path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: loader-dash 1.5s ease-in-out infinite;
  animation: loader-dash 1.5s ease-in-out infinite;
  stroke-linecap: round; }

@-webkit-keyframes loader-rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes loader-rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@-webkit-keyframes loader-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0; }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px; }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -136px; } }

@keyframes loader-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0; }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px; }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -136px; } }