/* Apple Linked Tree */
.apple-linked-tree{
  background: white;
  border-radius: var(--dash-br);
  overflow: hidden;
  display: flex;
  padding: 10px;
  gap: 6px
}
.apple-linked-tree .resources{
  width: 33.33%;
}
.apple-linked-tree[data-max-dept="2"] .resources{
  width: 50%;
}
.apple-linked-tree .resources .click-through{
  padding: 3px 6px 3px 12px;
  position: relative;
  font-size: 13px;
  border-radius: 6px;
}
.apple-linked-tree .resources .click-through.active{ 
  background:var(--dash-black);
  color: white;
}
.apple-linked-tree .child-click-throughs{ display:none }
.apple-linked-tree .resources .click-through:not(.select):after{
  content: '→';
  position: absolute;
  right: 10px;
  opacity: .3;
}
/* End Apple Linked Tree */

/* Log files */
.log-file {
  font-family: monospace;
  font-size: 14px;
  white-space: pre-wrap;
  max-height: 70vh;
  overflow: auto;
}
.log-file p{ font-size: 12px }
.log-file span:not(.message);{ font-size: 10px }
.log-file .ip,
.log-file .timestamp { color: #888 }
.log-file .payload { color: #0074D9 }
.log-file .status[data-status^="2"] { color: green }
.log-file .status[data-status^="3"] { color: orange }
.log-file .status[data-status^="4"], .status[data-status^="5"] { color: red }
.log-file .message { color: #333 }
.log-file .tags{ color: purple }

/* Content Blocks */
.content-block{ 
  padding: 12px;
  border-radius: var(--dash-br);
  background: var(--dash-light);
  margin-top: 5px;
  border: 2px solid var(--dash-light-alt)
}
.content-block.shared{ 
  background:var(--dash-dark);
  border: 2px solid var(--dark);
}
.content-block[data-soort="2"]{ 
  background: #8ebce6;
  border: 2px solid #6e9ac3
}
.content-block.shared[data-soort="2"]{
  background: #3e73a4;
  border: 2px solid #183651  
}
.content-block.shared[data-soort="3"],
.content-block[data-soort="3"]{ 
  background: #43a976;
  border: 2px solid #458648
}
.content-block[data-soort="2"] details .btn,
.content-block[data-soort="2"] *,
.content-block[data-soort="3"] details .btn,
.content-block[data-soort="3"] *,
.content-block.shared details .btn,
.content-block.shared *{ color:white }

.content-block[data-soort="2"] details *, .content-block.shared details *{ color: var(--dash-dark) }
.content-block[data-soort="3"] details *{ color: var(--dash-dark) }

.content-block[data-soort="2"] :is(input, textarea),
.content-block[data-soort="3"] :is(input, textarea),
.content-block.shared :is(input, textarea) { color:var(--dash-dark) }
.content-block :is(span,p){ font-size:12px }
.content-settings{
  position: sticky;
  top: 95px;
  z-index: 1;
  background: var(--dash-light-alt);
  padding: 12px 0 2px 0px;  
}
input.change-content-order.content-block{ margin-top:-4px }
.in-content-block input.change-content-order:not(.content-block){
  border-color: var(--dash-medium-text) !important;
  margin-top:-4px;
}
/* End Content Blocks */

/* Habits Container */
.habits-container .habit{
  display: flex;
  position: relative;
  flex-direction: column;
  padding: 15px 15px 0 125px;
  border-radius: var(--dash-br);
  background: white;
  margin-top: 10px;  
}
.habits-container .habit:nth-of-type(even){
  background: var(--dash-light);
}
.habits-container .habit .habit-info{
  color: var(--dash-dark);
  border-bottom: 1px solid var(--light);
  padding-bottom: 5px;
}
.habits-container .habit:nth-of-type(even) .habit-info{ border-color:white }
.habits-container .habit .habit-icon{
  position: absolute;
  left: 15px;
  top: 15px;
}
.habits-container .habit .habit-icon img{
  width: 90px;
  height: 90px;
}
.habits-container .habit-checkins{
  display: flex;
  overflow: auto;  
}
.habits-container .habit-checkins .habit-checkin{
  display: flex;
  flex-direction: column;
  width: 55px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  height: 65px;
  align-items: center;
  color: var(--dash-black);
  border-right: 1px solid var(--dash-light);
  padding-top: 5px;
  margin-bottom: 10px;
  transition:var(--trf);
}
.habits-container .habit:nth-of-type(even) .habit-checkins .habit-checkin{ border-color:white }
.habits-container .habit-checkins .habit-checkin:has(input:checked){
  color: var(--dash-success);
}
.habits-container .habit-checkins .habit-checkin input{
  width: 20px;
  height: 20px;
}
:root{
  --colors-bg: #c4d3e5;
  --colors-gray-0: linear-gradient(90deg, #EC9B2D, #F8B85A );
  --colors-var-0: #b7b6b6;
  --colors-var-1: #2366bb;
  --colors-var-2: #fff;
  --colors-var-3: #7c7c7c;
  --colors-var-4: #1e2d52;
  --colors-var-5: #0e0f1f;
  --colors-var-6: #c1c1c1;
  --colors-var-7: #69acdf;
  --colors-var-8: #f99900;
  --colors-var-9: #ed847c;
  --colors-var-10: #092755;
  --colors-var-11: #f0ecea;
  --colors-var-12: #ec9e30;
  --colors-var-13: #d2c8c1;
  --colors-var-14: #939393;
  --colors-var-15: #db9385;
  --colors-var-16: #007c86;
  --colors-var-17: #bfb1a9;
  --colors-var-18: #31444c;
  --colors-var-19: #ebc7ba;
  --colors-var-20: #ffba3d;
  --colors-var-21: #bb9982;
  --colors-var-22: #0050a8;
  --colors-var-23: #00c1aa;
  --colors-var-24: #adcced;
  --colors-var-25: #a76c5c;
  --colors-var-26: #cc3636;
  --colors-var-27: #20275a;
  --colors-var-28: #00568b;
  --colors-var-29: #768c99;
  --colors-var-30: #006daa;
  --colors-var-31: #23275a;
  --colors-var-32: #e3ab9f;
  --colors-var-33: #bcd5f0;
  --colors-var-34: #6d9cbc;
  --colors-var-35: #61bac5;
  --colors-var-36: #58808f;
  --colors-var-37: #00899d;
  --colors-var-38: #007b8d;
  --colors-var-39: #f7d5cb;
  --colors-var-40: #646464;
  --colors-var-41: #96c0e8;
  --colors-var-42: #e7e1df;
  --colors-var-43: #f9f7f7;
  --colors-var-44: #0073ad;
  --colors-var-45: #005c6b;
  --colors-var-46: #d8762e;
  --colors-var-47: #275291;
  --colors-var-48: #cbddf4;
  --colors-var-49: #c7ebf2;
  --colors-var-50: #00a8e8;
  --colors-var-51: #9bdee2;
  --colors-var-52: #f3c6bc;
  --colors-var-53: #094061;
  --colors-var-54: #d3cfcd;
  --colors-var-55: #7192bb;
  --colors-var-56: #dfeaf8;
  --colors-var-57: #224c78;
  --colors-var-58: #bbcbe0;
  --colors-var-59: #ffc800;
  --colors-var-60: #8baac9;
  --colors-var-61: #c63434;
  --colors-var-62: #e4f1f5;
  --colors-var-63: #bdcee2;
  --colors-var-64: #8ebce6;
  --colors-var-65: #001f44;
  --colors-var-66: #2e65ae;
  --colors-var-67: #008ea3;
  --colors-var-68: #d5d5d5;
  --colors-var-69: #c69689;
  --colors-var-70: #057;
  --colors-var-71: #005b6c;
  --colors-var-72: #6398d1;
  --colors-var-73: #9c9c9c;
  --colors-var-74: #dce7f7;
  --colors-var-75: #c6c5c5;
  --colors-var-76: #444;
  --colors-var-77: #accbec;
  --colors-var-78: #001935;
  --colors-var-79: #d8968b;
  --colors-var-80: #99b4d3;
  --colors-var-81: #5db7db;
  --colors-var-82: #041e44;
  --colors-var-83: #00aab9;
  --colors-var-84: #e5eefa;
  --colors-var-85: #f8d0bd;
  --colors-var-86: #e6eaf2;
  --colors-var-87: #bc5804;
  --colors-var-88: #c1e1e5;
  --colors-var-89: #fdfdfd;
  --colors-var-90: #4599a6;
}
:root{
  --dash-light: #e9eff4;
  --dash-light-alt: #d5deed;
  --dash-medium: #a5b9d2;
  --dash-medium-text: #708e99;
  --dash-dark: #0e2538;
  --dash-black: #002338;
  --dash-success: #44b7a8;
  --dash-warning: #ee7120;
  --dash-danger: #e30613;
  --dash-br: 14px;
  --dash-brs: 8px;
  --dash-tr: .3s all;
  --dash-trf: .15s all;
}
.dashboard-container{
  background: var(--dash-light);
  padding:30px 30px 50px 30px;
}
.hidden,
form.create-new-image,
.content-navigation-container:not(.active),
.saved-chats .saved-chats-categroy .content-navigation-container:not(.active){
  display: none;
}
.same-height {
  display: flex;
  align-items: stretch; 
}
.same-height .col {
  display: flex;
  flex-direction: column;
}
.same-height .col-4-5 {
  height: 100%;
  overflow: hidden;
}
.same-height .col-4-5 .ptu-user-filters-container {
  height: 100%;
  overflow: auto;
}
.same-height .page-block:not(.exclude-same-height){ height: 100% }
span.content-number,
input.change-content-order{ 
  width: 32px !important;
  height: 32px;
  padding: 0 !important;
  text-align: center;
  border: 4px solid #f55050 !important;
  font-weight: 700;
  color: var(--dark)!important;
}
tr.sub-cat span.content-number{
  width: 24px !important;
  height: 24px;
  border: none !important;
  color: white!important;
  background:  #f55050;
  margin-left: 4px;
}
.habit-select-contents{
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: auto;
  padding: 0 35px;
}
.habit-select-contents .select-sub-content{
  text-align: left;
  border:1px solid var(--dash-success);
  border-radius:var(--dash-br);
  padding: 8px 12px 2px 12px;
  flex-shrink: 0;
  flex-direction: column;
  display: flex;
  font-size: 12px;
  color:var(--dash-medium);
}
.navigation-bar .habit-select-contents :is(.next,.prev){ 
  background: var(--dash-black); 
  padding-bottom: 24px;
  align-items: flex-end;
  opacity: 1;
  transition: var(--dash-tr);
}
.habit-select-contents.last .next,
.habit-select-contents.first .prev{ 
  opacity:0.5;
  pointer-events: none;
}
.navigation-bar .habit-select-contents:has(.select-sub-content.no-count) :is(.next,.prev){ padding-bottom: 15px }
.habit-select-contents .select-sub-content.no-count{ padding: 8px 12px }
.habit-select-contents .select-sub-content *{
  line-height: 12px;
  color:var(--dash-medium);
}
.habit-select-contents .select-sub-content.active *{ color:white }
.habit-select-contents .select-sub-content span.title{
  font-weight: 600;
  font-size:13px;
}
.habit-select-contents .select-sub-content.active{ 
  background:var(--dash-success);
  color:white;
}
tr.disabled{ opacity:.6 }
span.content-number{
  border-radius:100%;
  display: inline-block;
}
span.calendar-info{
  height: 26px;
  display: flex;
  align-items: center;
  color: white;
  font-size: 14px;
  margin-left: 10px;  
}
input.change-content-order[type="number"]::-webkit-inner-spin-button,
input.change-content-order[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* Search input */
.input-search-container{ position:relative; }
.input-search-container:before{
  content: '';
  background: url(/images/search.svg);
  width: 30px;
  height: 100%;
  position: absolute;
  top: 0;
  background-position: center;
  background-repeat: no-repeat;
  left: 10px;
  background-size: 80%;
}
input.search{ padding-left: 50px!important; }

.ptu-user-filters{
  display: flex;
  align-items: center;
}
/* Chat */
.chat-container{
  display: flex;
  flex-direction: column;
  height: 650px;
  overflow: auto;
  padding: 20px 20px 0 20px;
  position: relative;
}
.chat-menu{
  position: absolute;
  bottom: -108px;
  left: 0;
  border-radius: 0 0 var(--dash-br) var(--dash-br);
  background: white;
  width: 100%;  
  overflow: hidden;
  transition: var(--dash-tr);
}
.chat-menu.active{
  bottom:0;
}
.chat-menu .chat-menu-item{
  padding: 0 20px;
  line-height: 54px;
  display: flex;
  align-items: center;
}
.chat-menu .chat-menu-item svg{
  width: 16px;
  height: 16px;
  margin-right: 15px;
}
.chat-menu .chat-menu-item:not(.danger) svg *{ stroke: var(--dash-dark) }
.chat-menu .chat-menu-item.danger svg *{ fill: white }
.chat-menu .chat-menu-item.danger{
  background: var(--dash-danger);
  color:white;
}
.chat-outer-container{
  overflow: hidden;
  position: relative;
}
.chat-message{
  background: white;
  border-radius: var(--dash-brs);
  box-shadow: var(--box-shadow);
  padding: 6px 12px;  
  width: fit-content;
  max-width: 100%;
}
.chat-message.me.active{
  background: var(--dash-medium);
}
.chat-message .content{
  font-size: 12px;
  line-height: 18px;
  padding: 0;
  margin-top: -2px;
  font-weight: 300;
  position: relative;
}
.chat-message .recording-time{
  bottom: 52px;
  top: inherit;
  left: 0;
  display: none;
}
.chat-message.playing .recording-time{
  display: inherit;
}
.chat-message .send-by{
  color: var(--dash-dark);
  font-weight: 600;
  font-size: 14px;
}
.unread-counter{ 
  background: var(--dash-success);
  transition: var(--tr);
  width: 22px;
  height: 22px;
  color: white;
  display: inline-block;
  border-radius: 100%;
  font-size: 14px;
  text-align: center;
  line-height: 22px;
  margin-left: 4px;
  opacity: 1;
  font-weight: 500;
}
.chat-type-select{
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  align-items: flex-start;
}
.chat-type-select svg :is(.fill-dark, .fill-white, .stroke-dark, .stroke-white){ transition: var(--dash-tr) }
.chat-type-select .active svg .fill-dark{ fill:var(--dark) }
.chat-type-select .active svg .fill-white{ fill:white }
.chat-type-select .active svg .stroke-dark{ stroke:var(--dark) }
.chat-type-select .active svg .stroke-white{ stroke:white }

.chat-type-select svg{ width: 36px; }
.chat-type-select .calendar svg{ width:24px }
[data-current="true"] .unread-counter,
.unread-counter[data-count="0"]{ opacity:0 }
.chat-message[data-status="active"]:not(.me) .send-by{ color: var(--dash-success) }
.chat-message[data-status="passive"] .send-by{ color: var(--dash-warning) }
.chat-message[data-status="inactive"] .send-by{ color: var(--dash-danger) }
.chat-container .chat-in-future,
.chat-container .send-at{
  font-size: 10px;
  color:var(--dash-medium-text);
  margin-bottom: 15px;
  padding: 0 8px;
}
.chat-container .chat-in-future.me,
.chat-container .send-at.me{ text-align:right; }
.chat-message.me{ margin-left: auto }
.create-chat .buttons{ 
  display:flex;
  gap: 6px;
  justify-content: end;
}
.chat-container .chat-in-future{
  margin: 8px 0 0 0;
}
.chat-reciever{ display:none }
.group-chat-container .chat-reciever{ display:block; }
.chat-reciever p{ line-height:20px }
.chat-reciever p.user-blocks-participants:not(.active){ display:none }

.btn.set-user-ids{
  background: transparent;
  border: 1px solid white;
  position: relative;
  padding-left: 44px;
  color:white;
  line-height: 40px;
}
.btn.set-user-ids img{
  position: absolute;
  left: 10px;
  top: 11px;
  height: 18px;
  width: 24px;
  object-fit: cover;
}
.btn.set-user-ids.active{
  background: var(--dash-dark);
  border-color: var(--dash-dark);
}
.btn.set-user-ids.has-been-send{
  background: transparent;
  border-color: white;
  opacity: .8;
  pointer-events: none;
  position: relative;
}
.btn.set-user-ids.has-been-send:after{
  content: '';
  position: absolute;
  right: -4px;
  top: -10px;
  background: url(/images/done.svg);
  width: 24px;
  height: 24px;
  z-index: 11;
  background-repeat: no-repeat;
}
.audio-wave-bars,
.chat-type-fields:not(.active),
.create-chat input.post-time{ display:none }

.create-chat textarea{ min-height:98px }
.create-chat .buttons .btn{ flex: 1 }
.saved-chats .saved-chats-categroy,
.saved-chats .saved-chats-categroy .content-navigation-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
}
.saved-chats-categroy:not(.active){ display:none!important }
.saved-chats .btn {
  flex: 0 1 calc(50% - 5px);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  color: white;
  font-size: 14px;
  border: 1px solid;
}
/* Chat agenda */
table.set-current-date-time,
table.select-date{ 
  width:100%;
  border-spacing: 0;
  border-collapse: collapse
}
table.set-current-date-time th{
  font-weight: 400;
  font-size: 14px;
}
table.set-current-date-time th:not(.first),
table.set-current-date-time td{ 
  width: 13%;
  transition: var(--dash-trf);
  background: white;
}
table.set-current-date-time td[data-past="true"]{
  background: var(--dash-light);
}
table.set-current-date-time td:hover{ cursor:pointer; }
table.set-current-date-time td{ border: 1px solid var(--dash-medium) }
table.set-current-date-time td.active{
  background: var(--dash-black);
}
table.set-current-date-time td.active:after{
  content: '';
  background: url(/images/message-calendar.svg);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
table.set-current-date-time td.active .chats{ opacity:0 }
table.set-current-date-time tr:last-child td{ border-bottom: none }
table.set-current-date-time td:last-child{
  border-right: none;
}
table.set-current-date-time td.post-time{
  background: var(--dash-light);
  font-size: 12px;
  width: 70px;
  padding: 6px 0;
}
table.set-current-date-time :is(td,th),
table.select-date :is(td,th){ 
  text-align:center;
  position: relative;
}
table.set-current-date-time td .chats{
  position: absolute;
  left: 0;
  top:0;
  display: flex;
  flex-wrap: nowrap;
  overflow-y: hidden;
  gap: 2px;
  height: 100%;
  opacity: 1;
  transition: var(--dash-trf);
  width: 100%;
  padding-right: 22px;
}
table.set-current-date-time span.set-created-at{
  background: white;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  color: var(--dash-success);
  font-weight: 500;  
  background: #e5f6f0;
  z-index: 2;
}
table.set-current-date-time td .chats .chat{
  background: var(--dash-success);
  color: white;
  padding: 0 4px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
table.set-current-date-time td .chats .chat svg{
  width: 18px;
  height: 20px;
}
table.select-date td{ 
  color:white;
  padding: 4px 0;
  font-weight: 500;
  transition: var(--dash-trf);
}
table.select-date td:hover{
  cursor: pointer;
  background: var(--dash-success);
}
table.select-date tr:has(td.selected) td{ background: var(--dash-black)}
table.select-date tr:has(td.selected) td:nth-of-type(1){ border-radius: 6px 0 0 6px }
table.select-date tr:has(td.selected) td:nth-of-type(7){ border-radius: 0 6px 6px 0 }
table.select-date td.selected{ background: var(--dash-success)!important }
table.select-date td.other{ opacity: .5 }
.saved-chats-agenda.loading{ pointer-events:none }
.saved-chats-agenda .page-block{ overflow:hidden }
.create-chat-clone{ padding-bottom: 20px }
.create-chat-clone .create-chat .buttons .btn{
  flex:0;
}
.create-chat-clone .update-buttons{
  display: flex;
  gap: 6px;
  justify-content: end;  
}

p.habit-done-list svg{
  float: right;
  width: 30px;
  height: 30px;
}
.has-custom-time svg :is(path, rect){
  stroke: var(--dash-success);
  fill: var(--dash-success);
}
.has-custom-time svg{
  box-shadow: 0 0px 0px 4px white;
  background: white;
  margin-left: 4px;
  border-radius: 2px;
}
/* Page Blocks */
.page-block{
  padding: 20px;
  background: var(--dash-medium);
  margin-bottom:20px;
  border-radius: var(--dash-br);
}
.default-border,
.page-block.inc-border{
  border:1px solid var(--light);
}
.page-block .app-block :is(svg,img){
  width: 70px;
  height:70px;
}
.page-block.flex-space-between{
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.page-block.has-bottom-button{
  padding: 20px 15px 15px 15px;
}
.page-block :is(p,h1,h2,h3){ margin:0 0 8px }
.page-block :is(p:last-child,h1:last-child,h2:last-child,h3:last-child){ margin:0 }
.page-block.dark{
  background: var(--dash-black);
  color:white;
}
.page-block.num-block{
  padding: 30px 80px 30px 110px;
  position: relative;
  min-height: 180px;
}
.page-block.num-block span.num{
  font-size: 74px;
  line-height: 60px;
  margin-right: 15px;
  position: absolute;  
  top:30px;
  left:30px;
}
.page-block.num-block p{
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
}

.page-title{
  background: var(--dash-black);
  color: white;
  padding: 6px 20px;
}

table.delayed-jobs :is(td:not(.error),th){ 
  white-space:nowrap;
  vertical-align:top
}
table.delayed-jobs td.error:not(:hover) span{
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;  
}
.page-block.light{
  background: var(--dash-light);
}
.page-block.light-alt{
  background: var(--dash-light-alt);
}
.page-block.transparent{
  background: transparent
}
.page-block.dark :is(p, ol, li, a, span){color:white}
.page-block.white{
  background: white;
}
/* End Page Blocks */

/* Achievement Blocks */
.achievement-block{
  display: flex;
}
.achievement-block .content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1 1 auto; 
}
.achievement-block .image{
  width: 90px;
  padding-right: 10px;
  flex-shrink: 0;
}

/* Page Block Lines */
.page-block-line{
  padding: 10px 20px;
  display: flex;
  margin: 0;
  border-top: 1px solid var(--dash-medium);  
  position: relative;
}
.page-block-line[data-index="0"]{ border-top:0 }
.isolated .page-block-line{ border-top: none }
.page-block-line.with-score-block{ padding-left: 60px }
.page-block-line.with-score-block.chat{ padding-left: 50px }
.chat.page-block-line.with-score-block[data-current="true"]{ background:var(--dash-light-alt) }
.page-block-line.edit{
  flex-direction: column;
}
.page-block-line.team-header{
  border: none;
  padding: 15px 20px;
  align-items: center;
  background: var(--dash-medium);
  color: white;
}
.page-block-line.team-header * { color:white }
.page-block-line.team-header .icon img{
  width: 46px;
  height:46px;
}
.page-block-line-edits{ 
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  border-radius: var(--dash-br);
  overflow: hidden;
  background: white;
}
.page-block-line-edits .page-block-line-edit{
  padding: 10px 15px;
  background: white;
  border-left: 1px solid var(--dash-light-alt);
  border-right: 1px solid var(--dash-light-alt);  
}
.page-block-line-edit.slider-th.target:not(.active){ display:none }
.page-block-line-edits:not(.in-active-menu) .page-block-line-edit.slider-th{ 
  border-left:10px solid var(--dash-medium);
  border-right:10px solid var(--dash-medium);
}
.page-block-line-edits:not(.in-active-menu) .page-block-line-edit.th.slider-th{ background:var(--dash-medium) }
.page-block-line-edits:not(.in-active-menu) .page-block-line-edit.slider-th.last{ border-bottom:10px solid var(--dash-medium) }
.page-block-line-edits .page-block-line-edit:nth-of-type(odd){
  background: var(--dash-light);
}
.page-block-line-edit.flex-grid{
  display: flex;
  justify-content: space-between;  
  flex-wrap: wrap;
}
.page-block-line-edit.flex-grid .th{ 
  width: 100%;
  flex: 1 1;
}
.page-block-line-edit.flex-grid .th[nested_resource="true"]{ 
  flex-basis: 100%;
  padding-top: 20px;
}
.page-block-line-edit .th[nested_resource="true"] .label{ min-width:150px }
.page-block-line-edit.flex-grid .th[colspan="2"]{ width:200% }
.page-block-line-edit.flex-grid .th[colspan="3"]{ width:300% }
.page-block-line-edit.flex-grid:not(.new) .th{ padding: 0 5px }
.page-block-line-edits .page-block-line-edit .question :is(select, input){ 
  background:white!important;
  border-radius: 0 var(--dash-br) var(--dash-br) 0; 
  padding-left:10px;
  color:var(--dash-black);

}
.page-block-line-edits .page-block-line-edit .question textarea{ min-height: 112px }
.page-block-line-edits .page-block-line-edit .question .lang-fields .lang-field :is(input,textarea){
  padding-left: 55px;
}
.page-block-line-edits .page-block-line-edit .question .upload-image{
  height: 30px!important;
  width: 24px;
}
.question-line{ 
  display: flex;
}
.text-right .question-line{ justify-content: end; }
.edit-smart-resource-buttons{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;  
}
.page-block-line-edit:not(.new):not(.edit) .th[nested_resource="true"],
.page-block-line-edit:not(.edit) .edit-smart-resource-buttons,
.page-block-line-edit:not(.edit) .question-line[list="false"]{display: none;}
.page-block-line-edit.edit{
  border-top: 2px solid var(--dash-dark);
  border-bottom: 2px solid var(--dash-dark);
  background: white!important;  
}
.question-line .question-line-label{
  opacity: 0.7;
  min-width: 80px;
  font-size: 10px !important;
  padding-right: 10px;
}
.question .lang-fields .lang-field .flag{ border-radius:0 }
.question .field.with-image .inner{ width:100% }
.question .field.with-image input[type="text"]{ width:calc(100% - 14px) }
.page-block-line-edit .question{
  padding: 10px 5px 0 5px;
  display: flex;
}
.page-block-line-edit .btn{
  height:30px;
  min-height: 30px;
  line-height: 30px;
  padding:0 12px;
}
.page-block-line-edit .question:last-child{padding-bottom:10px}
.page-block-line-edit .label{
  background: var(--dash-light-alt);
  padding: 0 6px 0 12px;
  border-radius: var(--dash-br) 0 0 var(--dash-br);  
  min-width: 110px;
  font-size: 12px;
  display: flex;
  align-items: center;  
  color: var(--dash-black);
}
.page-block-line-edits .page-block-line-edit.th{ 
  background:var(--dash-dark);
  color:white;
  font-weight: 700;
  border: none;
}
.page-block-line-edits .page-block-line-edit.new{
  background: var(--dash-medium);
  color:white;
  padding:8px 0;
  border:none;
}
.page-block-line-edits .page-block-line-edit :is(select, input){
  padding: 0;
  border-radius: 0;
  line-height: 35px;
  height:35px;
  background: transparent!important;
  height: 30px;
  color:white;
}
.page-block-line-edits .page-block-line-edit :is(select, input)::placeholder{ 
  color: white;
  opacity: .5;
}
.page-block-line-edits .page-block-line-edit :is(select.darkend, input.darkend){ color:var(--dark) }
.page-block-line-edits .page-block-line-edit .new-ptu{ line-height:35px }
.page-block-line-edits .page-block-line-edit *{ font-size:13px }
.page-block-line-edits .page-block-line-edit .col{ overflow:auto }
.page-block-line-edits .page-block-line-edit .inner-th.nested-resource{
  padding:10px;
  background: white;
  margin: 4px 0;
  border-radius: var(--dash-br);
  border: 1px solid white;
}
.page-block-line-edits .page-block-line-edit .th .inner-th.nested-resource:nth-child(odd) { background:var(--dash-light-alt) }
.page-block-line .icon{ 
  line-height:0;
  padding-right: 15px;
}
.page-block-line .icon img{
  width: 65px;
  max-width: 65px;
  height: 65px;
}
.chat.page-block-line .icon img {
  width: 50px;
  max-width: 50px;
  height: 50px;
}
.page-block-line .score{
  height: 65px;
  display: flex;
  align-items: center;
  position: absolute;
  left: 15px;
}
.page-block-line .score .no-throphy-score{
  width: 35px;
  padding: 2px 0;
  background: var(--dash-dark);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  border-radius: var(--dash-brs);
}
.page-block-line .score :is(svg, img){ 
  margin-left:5px;
  width:28px;
  height: 100%;
}
.page-block-line .naming{ 
  color: var(--dash-dark);
  width: 100%;
  padding-right: 20px;
  min-height: 65px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.chat.page-block-line .naming{ min-height:50px }
.page-block-line .naming .subtitle{ 
  font-size:13px;
  line-height: 15px;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  
}
.page-block-line .naming .subtitle:has(input){
  white-space: inherit;
}
.chat.page-block-line .naming .subtitle{ font-size:12px }
.page-block-line .naming .title{
  font-size:18px;
  font-weight: 600;
}
.chat.page-block-line .naming .title{ font-size: 14px; }
.page-block-line.active .naming .title{ color: var(--dash-success) }
.page-block-line.passive .naming .title{ color: var(--dash-warning) }
.page-block-line.inactive .naming .title{ color: var(--dash-danger) }
.page-block-line .points{ 
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: center;
  max-height: 65px;
}
.chat.page-block-line .points-block {
  border-radius: var(--dash-brs);
  font-size: 14px;
  line-height: 18px;
}
.chat.page-block-line .score{ 
  height:50px;
  left: 8px;
}
.page-block-line .points-block{
  border: 1px solid var(--dash-medium);
  padding: 4px 12px;
  border-radius: var(--dash-br);
  font-weight: 700;
  font-size:18px;
}
.page-block-line.page-block-edit:not(.active){ display: none; }
.page-block-line.page-block-edit{ background:var(--dash-light-alt) }
.page-block-line .active-not-active{
  position: absolute;
  top: 10px;
}
.page-block-line .active-not-active.status-name{
  top: 70px;
  font-size: 10px;
  background: var(--dash-black);
  padding: 0 7px;
  line-height: 20px;
  color: white;
  width: 70px;
  text-align: center;
  border-radius: 4px;
}
.page-block-line .active-not-active svg{
  width: 26px;
  height: 26px;
  background: var(--dash-success);
  border-radius: 100%;
  padding:6px;
}
.page-block-line.passive .active-not-active svg{ background:var(--dash-warning) }
.page-block-line.inactive .active-not-active svg{ background:var(--dash-danger) }
/* End Page Block Lines */

.full-saved-chats{ width:100% }

/* Changable List Items */
.changable-list-items .saved-chats-categroy{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex-direction: column;  
}
.change-list-title.sixt{
  position: absolute;
  top: 263px;
}
.change-list-title.white{ color:white }
.change-list-item:hover{ cursor:ns-resize }
.changable-list-items .sortable-placeholder,
.changable-list-items .change-list-item{
  background: white;
  padding: 5px 20px;
  border-radius: var(--dash-brs);
  position: relative;
  font-size: 12px;
}
.changable-list-items .sortable-placeholder{
  height: 36px;
  opacity: .5;
}
.changable-list-items .change-list-item:before{
  top:0;
}
.changable-list-items .change-list-item:before,
.changable-list-items .change-list-item:after{
  position: absolute;
  right: 12px;
  font-size: 20px;
  font-weight: 400;
  content: '▴';
  width: 10px;
  opacity: .7;
}
.changable-list-items .change-list-item:after{
  transform: rotate(180deg);
  bottom:0;
}

td.actions{ text-align:right }
td.actions .btn{ 
  font-size: 12px; 
  text-transform: capitalize;
}
td .logos{ display:flex }
td .logos.habit-logos .logo{ 
  background:var(--dash-dark);
}
td .logos .logo{ 
  width:60px; 
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
td .logos.habit-logos .logo img{
  width: 60%;
  height: 60%;
}
td .logos .logo img{
  width: 100%;
  height: 100%;
}
.page-block .title-with-num{ 
  padding: 0 0 0 8px; 
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 18px;  
}
.page-block .title-with-num span.big-number{
  font-size: 42px;
  margin-right: 10px;
  line-height: 46px;
}
.page-block .title-with-num span.big-number.small{
  font-size: 32px;
  line-height: 38px;
}
p.function-description{
  padding: 6px 12px;
  font-size: 12px;
  background: var(--dash-light);
  border-radius: var(--dash-br);  
}
table.dashboard{ 
  width:100%;
  border-radius: var(--dash-br);
  overflow:hidden;
  border-collapse: collapse
}
table.dashboard :is(td, th){ padding: 8px 16px }
table.dashboard th{ 
  background: var(--dash-dark);
  text-align: left;
  color:white;
  padding: 16px;
}
table.dashboard td{ vertical-align: baseline; }
table.dashboard :is(td.small, th.small){ 
  font-size: 12px;
  font-weight: 300;
}
table.dashboard th.text-right{ text-align:right; }
table.dashboard td{ background:var(--dash-light) }
table.dashboard td:first-child{ border-left:1px solid var(--dash-light-alt) }
table.dashboard td:last-child{ border-right:1px solid var(--dash-light-alt) }
table.dashboard tr:nth-of-type(odd) td{ background:var(--dash-light-alt) }
table.dashboard tr.sub-cat td{
  font-size: 12px;
  position: relative;
  padding: 3px 16px;
  background: white;
  border-bottom: 1px solid var(--dash-light);  
}
table.dashboard tr.sub-cat td *{ font-size:12px; }
table.dashboard tr.sub-cat .btn{
  line-height: 24px;
  min-height: 24px;
  padding: 0 12px;
}
table.dashboard tr.sub-cat td:first-child{ padding-left:30px }
table.dashboard tr.sub-cat td:first-child:before{
  content: '';
  background: var(--dash-dark);
  width: 15px;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
}
.dashboard-menu li.dropdown{
  list-style-type: none;
  position: relative;
}
.dashboard-menu li.dropdown:before{
  content: '→';
  position: absolute;
  left: -15px;
  width: 15px;
  height: 15px;
  font-size: 12px;
}
.dashboard-menu li.dropdown.open:before{
  content: '↓';
}
.dashboard-menu li.dropdown-item{
  list-style-type: none;
  font-size: 90%;
}
.dashboard-menu li.dropdown-item:before{
  content: '⇢';
  margin-right: 5px;
  font-weight: 900;
}
.dashboard-menu li.dropdown-item:not(.open){
  display: none;
}
.dashboard-menu a{ text-decoration:none }
.dashboard-menu a.active{ font-weight:700 }

.content-navigation{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.content-navigation .right-btns{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content-navigation .right-btns.with-line{
  border-left: 2px solid white;
  padding-left: 15px;
  margin-left: 15px;
}
.content-navigation a{ text-decoration:none }
.content-navigation.big-icons svg{
  width: 60px;
  height: 60px;
  margin-bottom:6px;
}
.content-navigation .nav{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  line-height: 15px;
  color:white;
  font-size: 12px;
}
.content-navigation:not(.big-icons) .nav :is(img,svg){
  width: 32px;
  height: 24px;
  object-fit: cover;
}
.content-navigation[data-type="LanguageSelection"] .nav :is(img, svg) {
  height: 20px;
  width: 24px;
}
.content-navigation[data-type="LanguageSelection"] .nav.btn{
  padding: 0 10px;
  background: transparent;
  border: 1px solid white;  
}
.content-navigation[data-type="LanguageSelection"] .nav.btn.active{
  border: 1px solid var(--dash-dark);
}
.content-navigation .nav.btn.active{
  background: var(--dash-dark);
  color:white;
}
.flex-space-between .content-navigation{ 
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.flex-space-between .content-navigation .nav{
  margin-right:0;
}
.content-navigation .nav.active svg .circle-1{ fill: var(--dash-dark) }
.content-navigation .nav.active svg :is(.path-1, .circle-2){
  fill: transparent;
  stroke: white;
  stroke-width: 3px;
}
.content-navigation .nav svg .path-2{ fill: var(--dash-medium) }
.content-navigation .nav.active svg .path-2{ fill: white }
.content-navigation .nav:not(.active) svg .circle-1{ fill: white }
.content-navigation .nav:not(.active) svg :is(.path-1, .circle-2){
  fill: transparent;
  stroke: var(--dash-medium);
  stroke-width: 3px;
}
.habit-select-container{
  display: flex;
  flex-wrap: wrap;
  margin: -5px;
  position: relative;
}
.habit-select-container .habit-select{
  display: flex;
  font-size: 14px;
  align-items: center;
  flex: 1 0 calc(50% - 10px);
  background: white;
  padding: 8px 10px;
  border-radius: var(--dash-br);
  margin: 5px;
  transition: var(--dash-tr);
}
.habit-select-container .habit-select.active{
  background: var(--dash-dark);
  color: white;
}
.habit-select-container:not(.edit) .habit-select:not(.active){ display:none }
.habit-select-container .habit-select .logo{ line-height:0 }
.habit-select-container .habit-select img{
  width: 34px;
  height: 34px;
  margin-right: 10px;
}
.habit-select-container .edit{
  position: absolute;
  right: 10px;
  top: -30px;
}

/* Color Fields */
.color-field{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.color-field .field.with-image{
  margin: 0;
  width: 100%;
}
.color-field .field.with-image input[type="text"]{ line-height:0 }
.styling-field .color-field :is(input, select, textarea){ 
  width: 100%;
  background: var(--dash-light);
  color: var(--dash-dark);
  line-height: 22px;  
}
.color-field select{ min-width:200px }
.color-field input[type="color"]{
  padding: 0;
  height: 35px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  box-shadow: none;
  overflow: hidden;
  border: 1px solid var(--dash-light);
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  border: none;
}

input[type="color"]::-webkit-color-swatch {
  border: none; 
}
.color-field .name{ min-width:200px; margin-right:10px }
.color-field input:first-of-type{
  border-top-left-radius: var(--dash-br);
  border-bottom-left-radius: var(--dash-br);
}
.color-field input:last-of-type{
  border-top-right-radius: var(--dash-br);
  border-bottom-right-radius: var(--dash-br);
}
.color-field.gradient input:last-of-type{
  margin-right: 15px;
}
.styling-field{
  padding: 20px;
  background: var(--dash-light);
  border-radius: var(--dash-br);
  margin-bottom: 20px;   
}
.styling-field .color-field{
  margin-top: 10px;
  background: white;
  padding: 6px  6px 6px 20px;
  border-radius: var(--dash-br);  
  color: var(--dash-dark);
}
.styling-field:last-child{ margin-bottom: 0 }
.color-field .number-field-type{ padding: 0 5px }
.lang-fields{ width:100% }
.lang-fields .lang-field{
  position: relative;
  margin-bottom:6px;
  overflow: hidden;
}
.lang-fields .lang-field:last-child{ margin-bottom:0 }
.lang-fields .lang-field .flag{
  width: 40px;
  height: 100%;
  position: absolute;
  padding: 6px;
  background: var(--dash-light-alt);
  border-radius: 3px 0 0 3px;
  display: flex;
  align-items: center;  
}
.page-block.light-alt .lang-fields .lang-field .flag{ background: var(--dash-light) }
.lang-fields .lang-field .flag img{
  width: 100%;
  height: 18px;
  object-fit: cover;
  border-radius: 4px;
  margin: auto;
}
.lang-fields .lang-field :is(input,textarea){ padding-left: 55px; }
.lang-fields .lang-field textarea{ margin-bottom: -8px }
/* End Color Fields */

.page-block-line-edit.flex-grid .th[nested_resource="true"][count="1"] .nested-controls .btn.remove{ display:none }
.nested-controls .btn{ 
  border-radius:var(--dash-brs);
  font-size:18px;
}

/* Frequency select */
.select-frequency .select-buttons{ 
  display:flex;
  flex-direction: column;
}
.select-frequency .select-buttons .btn{
  font-size: 12px;
  line-height: 25px;
  min-height: 25px;
  padding: 0 10px;
  margin-bottom: 2px;
  text-align: left;
}
/* End frequency select */

/* Active colored circle */
.active-colored-circle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.active-colored-circle {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    var(--dash-success) 0% 70%,
    var(--dash-warning) 70% 87%,
    var(--dash-danger) 87% 100%
  );
}
.active-colored-circle::before {
  content: '';
  display: block;
  width: 76%;
  height: 76%;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 12%;
  left: 12%;
}
/* End active colored circle */

/* User lines */
.user-lines .user-line{ 
  border-bottom: 1px solid var(--dash-light);
  font-size: 13px;
  font-weight: 300;
}

/* Weerk rows */
.week-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 5px;
}
.week-row .week-bar{
  border-radius: var(--dash-br);
  background: var(--dash-light);
  height: 14px!important;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.week-row .week-bar .success{
  height: 100%;
  position: absolute;
  left:0;
  width: 0%;
  background: var(--dash-success);
  transition: width 1s;
}
.week-row .week-bar .success.danger{ background:var(--dash-danger) }
.week-row .week-bar .success.warning{ background:var(--dash-warning) }
.week-row .week-procent{
  width: 70px;
  text-align: right;
  font-size:18px;
  margin-top:-5px;
}

/* Colos */
.colors-container{
  padding: 30px;
  background: var(--colors-bg);
}

/* Activity table */
.activity-table{ 
  display:flex;
  padding: 20px 0;
}
.activity-table .left-labels{
  width: fit-content;
}
.activity-table .left-labels label{
  height: 40px;
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 11px;
  justify-content: end;
  padding-right: 8px;
}
.activity-table .graph-container{
  width: 100%;
  position: relative;
}
.activity-table .graph{
  border-left: 1px solid var(--dash-medium);
  border-bottom: 1px solid var(--dash-medium)
}
.activity-table .graph .line{
  height: 40px;
  display: flex;
  align-items: center;
}
.activity-table .graph .bar{ 
  height: 22px;
  color: white;
  font-weight: 500;
  text-align: right;
  padding: 0 5px;
  line-height: 22px;
  font-size: 13px;
}
.activity-table .graph .bar.success{ background:var(--dash-success) }
.activity-table .graph .bar.warning{ background:var(--dash-warning) }
.activity-table .graph .bar.danger{ background:var(--dash-danger) }
.activity-table .buttons{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: end;
  gap: 6px;
  padding-left: 8px; 
}
.activity-table .btn{
  font-size: 11px;
  padding: 0 14px;
}
.activity-table .graph-container .graph-title{ 
  position: absolute;
  font-size: 11px;
}
.habit-progression-container{
  filter:brightness(1.0);
  opacity: 1;
  transition: var(--dash-tr);
}
.habit-progression-container.is-loading{
  pointer-events: none;
  opacity: .90;
  filter:brightness(75%);
}
/* End activity table */

/* Comments */
.comment{
  display: flex;
  margin-top: 25px;
}
.comment.active .comment-content .inner{ background:var(--dash-medium) }
.comment[data-dept="1"]{ margin-left: 35px }
.comment[data-dept="1"] .comment-content{ width:calc(100% - 35px) }
.comment[data-dept="2"]{ margin-left: 70px }
.comment[data-dept="2"] .comment-content{ width:calc(100% - 70px) }
.comment[data-dept="3"]{ margin-left: 105px }
.comment[data-dept="3"] .comment-content{ width:calc(100% - 105px) }
.comment .comment-image img{
  width: 40px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 100%;
  margin-right: 20px;
}
.comment .comment-content{ width:100% }
.comment .comment-content .inner{
  background: var(--dash-light);
  padding: 6px 12px;
  border-radius: var(--dash-brs);
  color: var(--dash-black);
  position: relative;
}
.comment .comment-content .title{
  font-weight: 600;
  font-size: 16px;
}
.comment .comment-content .unread-badge{
  position: absolute;
  right: -5px;
  padding: 0;
  width: 22px;
  height: 22px;
  line-height: 20px;
  font-weight: 900;
  font-size: 14px;
  border-radius: 100%;
  top: -5px;  
}
.seen-comments-controller-container{
  position: relative;
  height: calc(100% - 40px);
  overflow: auto;
}
.seen-comments-controller{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  padding-bottom: 80px;
}
.comments-counting-container{ display:inline }
.add-interactions-container,
.feed-interaction-outer-container{
  padding: 10px 20px;
  border-bottom: 1px solid var(--dash-light);
  margin: -20px -20px 0 -20px;  
}
.add-interactions-container{ margin-top: 0 }
.current-interactions{ 
  display:flex;
  margin-left: auto;
}
.current-interactions .reactions{ margin-left: auto }
.current-interactions svg{
  width: fit-content;
  height: 20px;
  margin-left: -2px;
  margin-right: 0!important;
}
.current-interactions .count{ margin-left:5px }
.add-interactions-container{ 
  display: flex;
  gap: 10px;
}
.add-interactions-container.text-center{
  justify-content: center;
}
.add-interactions-container svg{
  width: 20px;
  height: 20px;  
  min-width: 20px;
  min-height: 20px;  
  margin-right: 8px;
}
.add-interactions-container .interaction-type svg{margin: 0 6px}
.add-interactions-container span{
  display: flex;
  align-items: center;
  position: relative;
}
.add-interactions-container span.hidden{ display:none }
.add-interactions-container.comment{
  border-bottom:none;
  font-size:12px;
}
.page-block:has(.comments-counting-container){ overflow:hidden }
form.new-feed-comment{
  position: absolute;
  bottom: 20px;
  left: var(--grid-pix);
  background: white;
  right: var(--grid-pix);
  width: calc(100% - 16px);
  padding: 10px 20px;
  justify-content: center;
  align-items: flex-end;
  border-radius: 0 0 var(--dash-br) var(--dash-br);
  box-shadow: var(--box-shadow);
  display: none;
}
form.new-feed-comment.active{ display: flex}
form.new-feed-comment textarea{ 
  min-height: 40px;
  line-height: 18px;
  padding: 12px 20px;
  height: 40px;
  resize: vertical;
}
form.new-feed-comment .send{
  background: var(--dash-black);
  width: 40px;
  border-radius: 100%;
  display: flex;
  margin-left: 10px;
  margin-bottom: 2px;  
}
.add-interactions-container span.interaction-container{
  position: absolute;
  bottom: calc(100% + 3px);
  background: white;
  padding: 4px;
  border-radius: var(--dash-brs);
  border: 1px solid var(--dash-light-alt);
  display: none;
}
.add-interactions-container span.add-value.active span.interaction-container{ display:inherit; }
.interaction-container .interaction-type{ transition: var(--dash-tr) }
.interaction-container .interaction-type:not(.active){ filter: grayscale(100%); }
/* End Comments */
.api-group{
  margin-bottom:40px;
}
.api-group:last-child{ margin-bottom:0 }
.api-group .api-group-header{
  font-size: 30px;
  line-height: 38px;
  margin-bottom:-10px;
}
.api-item:not(.open) .api-item-body{
  display: none;
}
.api-group .api-item .api-item-header{ 
  padding:20px;
  background: var(--dash-light);
  position: relative;
  margin-top:20px;
  border-radius: var(--dash-br)
}
.api-group .api-item.open .api-item-header{ 
  border-radius: var(--dash-br) var(--dash-br) 0 0;
  border-bottom: 2px solid var(--dash-black);
}
.api-group .api-item .api-item-header.important{ 
  background: var(--dash-warning);
  color:white;
}
.api-group .api-item:first-child .api-item-header{ border-top: none }
.api-group .api-item .api-item-header .open-close-api-item-body{
  padding:6px 12px;
  position: absolute;
  right:20px;
  top:20px;
  background: var(--dash-black);
  border-radius: var(--dash-br);  
  color: white;
}
.api-group .api-item .api-item-header .title{ font-size:24px }
.api-group .api-item .api-item-header .title .title-method{
  float: left;
  padding: 0 6px;
  color: #4CAF50;
  font-weight: 700;
  background: white;
  margin-right: 6px;
  border-radius: 4px;
}
.api-group .api-item .api-item-header .title .title-method[data-method='post']{ color:#2196F3 }
.api-group .api-item .api-item-body{ 
  padding: 20px;
  background: var(--dash-light);
  border-radius: 0 0 var(--dash-br) var(--dash-br)  
}
.api-item-body .item-value{
  padding: 6px 12px;
  background: white;
  margin-bottom: 10px;
  border-radius: var(--dash-br);
}
.api-item-body .item-value:last-child{ margin-bottom:0 }
.api-item-body .item-value .key{ font-weight:700 }
.api-item-body .api-data-fields{
  padding: 20px;
  background: var(--dash-light-alt);
  margin-bottom: 10px;
  border-radius: var(--dash-br);
}
.api-item-body .api-data-fields .item-value{ background:white }
.api-item-body .api-data-fields:last-child{ margin-bottom:0 }
.api-item-body .data-fields-title{ 
  font-weight: 700;
  margin-bottom: 6px;
  margin-top:20px;
}
.api-code-example .code-example{
  padding:20px;
  background: var(--dash-black);
  color: white;
  margin-bottom:20px;
  border-radius: var(--dash-br);
}
.api-code-example:last-child .code-example{ margin-bottom: 0 }
.api-code-example .code-example-header{
  font-size:20px;
  margin-bottom:6px;
}
body,html{ 
  margin:0;
  overflow-x: hidden;
}
html{scroll-behavior: smooth;}
*{ font-family: "Poppins", sans-serif; }
body,*,html,div,h1,h2,h3,h4,h5,h6,p,a,li,ul,ol,canvas{
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.05rem;
}
body{ display:inline }
svg *{
    font-family: 'Poppins', sans-serif!important;
}
h1,h2,h3,h4,h5,h6,p,a,li,ul,ol{ color: var(--dash-dark); }
ol,div,p{
  font-size: 15px;
  line-height:24px
}

/* SVG fix */
svg {
  width: 100%;
  height: 100%;
  fill: none; /* Overwrite any inherited fill */
  stroke: none; /* Overwrite any inherited stroke */
  filter: none; /* Ensure no unexpected filters are applied */
}
svg filter {
  filter: none; /* Disable any external filter influence */
}

/* Colors */
.bluegreen{ color: var(--bluegreen)!important }
h1.white,h2.white,h3.white,ul.white,li.white,p.white,label.white{ color:white!important }
h1{ line-height: 38px; }
h2{ line-height: 34px; }
/* Styling */
.box-shadow{ box-shadow: 8px -4px 25px rgba(0, 0, 0, 0.1); }
.br-big{ border-radius:20px }
.no-underline{ text-decoration: none }
.full{ width:100% }
.high-z{ z-index:3 }
.relative{ position:relative }
.overflow-hidden{ overflow:hidden }
.nowrap{ white-space: nowrap }
.green{color: var(--dash-success)}
.red{color: var(--dash-danger)}

/* Backgrounds */
p.background-gradient, h1.background-gradient{  
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}
.background-white{ background: white }
.background-gradient{ background: var(--gradient) }
.background-gray{ background: var(--gray) }
.background-block-gradient{ background: var(--block-gradient) }
.background-gradient-trans-12{ background: var(--gradient-trans-12) }
.background-gradient-trans-24{ background: var(--gradient-trans-24) }  
.background-dash-medium{ background: var(--dash-medium) }
p.background-gradient-trans-24, h1.background-gradient-trans-24{  
  background: var(--gradient-trans-24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}
.background-dash-dark{ background: var(--dash-dark) }
.background-dash-black{ background: var(--dash-black) }
.page-block.num-block span.num,
p.background-gradient-trans-36, h1.background-gradient-trans-36{  
  background: var(--gradient-trans-36);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}
/* General */
form{ width:100% }
input:disabled{ opacity:.7 }
img,svg{max-width: 100%}
.text-center { text-align:center; }
.text-left { text-align:left; }
.text-right { text-align:right; }
.float-left { float: left }
.float-right { float: right }
.italic{ font-style: italic }
.rotate-180{ transform: rotate(180deg) }
.line-right{ border-right:1px solid var(--light) }
.line-left{ border-left:1px solid var(--light) }
.height-auto{ height:auto!important }
.no-underline{ text-decoration:none }
.border-bottom{ border-bottom: 1px solid  var(--dash-medium) }
.border-top{ border-top: 1px solid  var(--dash-medium) }
.border-left{ border-left: 1px solid  var(--dash-medium) }
.border-right{ border-right: 1px solid  var(--dash-medium) }
.page-block.border-top{ border-top: 1px solid  var(--dash-light) }

/* Margin autos */
.mr-auto{ margin-right:auto }
.ml-auto{ margin-left:auto }

/* Font Weight */
.fw-1{ font-weight:100!important }
.fw-2{ font-weight:200!important }
.fw-3{ font-weight:300!important }
.fw-4{ font-weight:400!important }
.fw-5{ font-weight:500!important }
.fw-6{ font-weight:600!important }
.fw-7{ font-weight:700!important }
.fw-8{ font-weight:800!important }
.fw-9{ font-weight:900!important }

/* Padding */
.pad-0{ padding: 0!important; }
.pad-1{ padding: 5px!important; }
.pad-2{ padding: 10px!important; }
.pad-3{ padding: 15px!important; }
.pad-4{ padding: 20px!important; }
.pad-5{ padding: 30px!important; }
.pad-6{ padding: 40px!important; }
.pad-7{ padding: 50px!important; }
.pad-8{ padding: 60px!important; }

/* Padding top */
.pt-0{ padding-top: 0px!important; }
.pt-1{ padding-top: 5px!important; }
.pt-2{ padding-top: 10px!important; }
.pt-3{ padding-top: 15px!important; }
.pt-4{ padding-top: 20px!important; }
.pt-5{ padding-top: 30px!important; }
.pt-6{ padding-top: 40px!important; }
.pt-7{ padding-top: 50px!important; }
.pt-8{ padding-top: 60px!important; }

/* Padding bottom */
.pb-0{ padding-bottom: 0px!important; }
.pb-1{ padding-bottom: 5px!important; }
.pb-2{ padding-bottom: 10px!important; }
.pb-3{ padding-bottom: 15px!important; }
.pb-4{ padding-bottom: 20px!important; }
.pb-5{ padding-bottom: 30px!important; }
.pb-6{ padding-bottom: 40px!important; }
.pb-7{ padding-bottom: 50px!important; }
.pb-8{ padding-bottom: 60px!important; }

/* Padding left */
.pl-0{ padding-left: 0px!important; }
.pl-1{ padding-left: 5px!important; }
.pl-2{ padding-left: 10px!important; }
.pl-3{ padding-left: 15px!important; }
.pl-4{ padding-left: 20px!important; }
.pl-5{ padding-left: 30px!important; }
.pl-6{ padding-left: 40px!important; }
.pl-7{ padding-left: 50px!important; }
.pl-8{ padding-left: 60px!important; }

/* Padding right */
.pr-0{ padding-right: 0px!important; }
.pr-1{ padding-right: 5px!important; }
.pr-2{ padding-right: 10px!important; }
.pr-3{ padding-right: 15px!important; }
.pr-4{ padding-right: 20px!important; }
.pr-5{ padding-right: 30px!important; }
.pr-6{ padding-right: 40px!important; }
.pr-7{ padding-right: 50px!important; }
.pr-8{ padding-right: 60px!important; }

/* Margin top */
.mt-0{ margin-top: 0px!important; }
.mt-1{ margin-top: 5px!important; }
.mt-2{ margin-top: 10px!important; }
.mt-3{ margin-top: 15px!important; }
.mt-4{ margin-top: 20px!important; }
.mt-5{ margin-top: 30px!important; }
.mt-6{ margin-top: 40px!important; }
.mt-7{ margin-top: 50px!important; }
.mt-8{ margin-top: 60px!important; }
.mt-auto{ margin-top: auto!important }

/* Margin bottom */
.mb-0{ margin-bottom: 0px!important; }
.mb-1px{ margin-bottom: 1px!important; }
.mb-2px{ margin-bottom: 2px!important; }
.mb-3px{ margin-bottom: 3px!important; }
.mb-1{ margin-bottom: 5px!important; }
.mb-2{ margin-bottom: 10px!important; }
.mb-3{ margin-bottom: 15px!important; }
.mb-4{ margin-bottom: 20px!important; }
.mb-5{ margin-bottom: 30px!important; }
.mb-6{ margin-bottom: 40px!important; }
.mb-7{ margin-bottom: 50px!important; }
.mb-8{ margin-bottom: 60px!important; }
.mb-auto{ margin-bottom: auto!important }

/* Margin left */
.ml-0{ margin-left: 0px!important; }
.ml-1{ margin-left: 5px!important; }
.ml-2{ margin-left: 10px!important; }
.ml-3{ margin-left: 15px!important; }
.ml-4{ margin-left: 20px!important; }
.ml-5{ margin-left: 30px!important; }
.ml-6{ margin-left: 40px!important; }
.ml-7{ margin-left: 50px!important; }
.ml-8{ margin-left: 60px!important; }
.ml-auto{ margin-left: auto!important }

/* Margin right */
.mr-0{ margin-right: 0px!important; }
.mr-1{ margin-right: 5px!important; }
.mr-2{ margin-right: 10px!important; }
.mr-3{ margin-right: 15px!important; }
.mr-4{ margin-right: 20px!important; }
.mr-5{ margin-right: 30px!important; }
.mr-6{ margin-right: 40px!important; }
.mr-7{ margin-right: 50px!important; }
.mr-8{ margin-right: 60px!important; }
.mr-auto{ margin-right: auto!important }

/* Font sizes */
.fs-10{ font-size:10px!important }
.fs-11{ font-size:11px!important }
.fs-12{ font-size:12px!important }
.fs-13{ font-size:13px!important }
.fs-14{ font-size:14px!important }
.fs-14{ font-size:14px!important }
.fs-15{ font-size:15px!important }
.fs-16{ font-size:16px!important }
.fs-18{ font-size:18px!important }
.fs-20{ font-size:20px!important }
.fs-22{ font-size:22px!important }
.fs-24{ font-size:24px!important }
.fs-26{ font-size:26px!important }
.fs-28{ font-size:28px!important }
.fs-30{ font-size:30px!important }

/* Line Heights */
.lh-12{ line-height:12px!important }
.lh-13{ line-height:13px!important }
.lh-14{ line-height:14px!important }
.lh-14{ line-height:14px!important }
.lh-15{ line-height:15px!important }
.lh-16{ line-height:16px!important }
.lh-18{ line-height:18px!important }
.lh-20{ line-height:20px!important }
.lh-22{ line-height:22px!important }
.lh-24{ line-height:24px!important }
.lh-26{ line-height:26px!important }
.lh-28{ line-height:28px!important }
.lh-30{ line-height:30px!important }

/* Border radius options */
.nbr-b{ 
  border-bottom-left-radius: 0!important;
  border-bottom-right-radius: 0!important
}
.nbr-t{ 
  border-top-left-radius: 0!important;
  border-top-right-radius: 0!important
}
.nbr-l{ 
  border-top-left-radius: 0!important;
  border-bottom-left-radius: 0!important
}
.nbr-r{ 
  border-top-right-radius: 0!important;
  border-bottom-right-radius: 0!important
}
.nbr{ border-radius: 0!important }

/* Borders */
.nbt{ border-top: none!important }
.nbb{ border-bottom: none!important }

/* Remove autofill background color */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}
input:-webkit-autofill {
    -webkit-text-fill-color: inherit;
}
textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

.date-select{
  display: flex;
  border-radius: var(--dash-br);
  overflow: auto;
  gap: 2px;
}
.date-select select{
  border-radius: 0;
}

/* Details */
details{
  margin-top: 10px !important;
  padding: 10px 20px;
  background: var(--dash-light-alt);
  border-radius: var(--dash-br);  
}
details[open] summary{
  padding-bottom:15px;
}
:root{
  --grid-pix: 8px;
  --minus-grid-pix: -8px;
}
.row {
  margin-right: var(--minus-grid-pix);
  margin-left: var(--minus-grid-pix);
  display: flex;
  flex-wrap: wrap;
}

.col {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: var(--grid-pix);
  padding-left: var(--grid-pix);
}

.same-height {
  display: flex;
  align-items: stretch; 
}
.same-height .col {
  display: flex;
  flex-direction: column;
}
.col-flex-end{
  align-items: end;
  display: flex;
  flex-direction: column;  
}

.col-1 { width: 8.3333333333%; }
.col-2 { width: 16.6666666667%; }
.col-3 { width: 25%; }
.col-3-5 { width: 31%; }
.col-4 { width: 33.3333333333%; }
.col-4-5 { width: 38%; }
.col-5 { width: 41.6666666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.3333333333%; }
.col-7-5 { width: 60%; }
.col-8 { width: 66.6666666667%; }
.col-8-5 { width: 69%; }
.col-9 { width: 75%; }
.col-10 { width: 83.3333333333%; }
.col-11 { width: 91.6666666667%; }
.col-12 { width: 100%; }

@media (min-width: 576px) {
  .col-sm-1 { width: 8.3333333333%; }
  .col-sm-2 { width: 16.6666666667%; }
  .col-sm-3 { width: 25%; }
  .col-sm-4 { width: 33.3333333333%; }
  .col-sm-5 { width: 41.6666666667%; }
  .col-sm-6 { width: 50%; }
  .col-sm-7 { width: 58.3333333333%; }
  .col-sm-8 { width: 66.6666666667%; }
  .col-sm-9 { width: 75%; }
  .col-sm-10 { width: 83.3333333333%; }
  .col-sm-11 { width: 91.6666666667%; }
  .col-sm-12 { width: 100%; }
}

@media (max-width: 768px) {
  .col-xs-1 { width: 8.3333333333%; }
  .col-xs-2 { width: 16.6666666667%; }
  .col-xs-3 { width: 25%; }
  .col-xs-4 { width: 33.3333333333%; }
  .col-xs-5 { width: 41.6666666667%; }
  .col-xs-6 { width: 50%; }
  .col-xs-7 { width: 58.3333333333%; }
  .col-xs-8 { width: 66.6666666667%; }
  .col-xs-9 { width: 75%; }
  .col-xs-10 { width: 83.3333333333%; }
  .col-xs-11 { width: 91.6666666667%; }
  .col-xs-12 { width: 100%; } 
}

@media (min-width: 768px) {
  .col-md-1 { width: 8.3333333333%; }
  .col-md-2 { width: 16.6666666667%; }
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.3333333333%; }
  .col-md-5 { width: 41.6666666667%; }
  .col-md-6 { width: 50%; }
  .col-md-7 { width: 58.3333333333%; }
  .col-md-8 { width: 66.6666666667%; }
  .col-md-9 { width: 75%; }
  .col-md-10 { width: 83.3333333333%; }
  .col-md-11 { width: 91.6666666667%; }
  .col-md-12 { width: 100%; } 
}

@media (min-width: 992px) {
  .col-lg-1 { width: 8.3333333333%; }
  .col-lg-2 { width: 16.6666666667%; }
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.3333333333%; }
  .col-lg-5 { width: 41.6666666667%; }
  .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.3333333333%; }
  .col-lg-8 { width: 66.6666666667%; }
  .col-lg-9 { width: 75%; }
  .col-lg-10 { width: 83.3333333333%; }
  .col-lg-11 { width: 91.6666666667%; }
  .col-lg-12 { width: 100%; }
}

@media (min-width: 1200px) {
  .col-xl-1 { width: 8.3333333333%; }
  .col-xl-2 { width: 16.6666666667%; }
  .col-xl-3 { width: 25%; }
  .col-xl-4 { width: 33.3333333333%; }
  .col-xl-5 { width: 41.6666666667%; }
  .col-xl-6 { width: 50%; }
  .col-xl-7 { width: 58.3333333333%; }
  .col-xl-8 { width: 66.6666666667%; }
  .col-xl-9 { width: 75%; }
  .col-xl-10 { width: 83.3333333333%; }
  .col-xl-11 { width: 91.6666666667%; }
  .col-xl-12 { width: 100%; }
}

@media screen and (max-width: 768px){
  .col { width: 100%; }   
  .page-block{
    overflow: auto;
    margin-bottom:20px;
  }
  .page-block table th{ white-space:nowrap; }
  .same-height .page-block:not(.exclude-same-height){ height:inherit; }
}
.audio-recording{
  min-height: 94px;
  background: white;
  border-radius: var(--dash-br);
  overflow: hidden;
  margin-bottom:10px;
  position: relative;
}
.new-saved-chat-audio-location .audio-recording{
  min-height: 0;
  background: transparent;
}
.audio-recording .actions{
  background: var(--dash-light);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;  
  position: relative;
}
.audio-recording .live-waveform .play-pause{
  right: 10px;
  top: 10px;  
}
.audio-recording .actions svg{
  width: 30px;
}
.audio-recording svg .stroke-white{stroke: white}
.audio-recording svg .fill-dark{fill: var(--dash-success)}

.audio-recording:not(.recording) .stop-recording,
.audio-recording.recording .start-recording{
  display: none;
}
.waveforms{
  display: flex;
  background: var(--dash-light);
  justify-content: end;
  gap: 6px;
  padding: 0 6px;
}
.chat-message .waveforms{
  border-radius: var(--dash-brs);
}
.chat-message.playing .waveforms{ display:none }
.chat-message .waveforms .recording-item{ width:100% }
.waveforms .recording-item{
  position: relative;
  width: 60px;
  margin: 5px 0;
  background: white;
  border-radius: var(--dash-brs);
  height: 40px;
  display: flex;
  align-items: center;
  padding: 3px;
  border: 2px solid white;
  overflow-x: auto;
  white-space: nowrap;   
}
.waveforms .recording-item.active{ border: 2px solid var(--dash-success) }
.recording-item .waveform-bar{
  width: 2px;
  background: var(--dash-medium);
}
.recording-time{ 
  position: absolute;
  left: 15px;
  font-size: 12px;
  top: -30px;
}
.recording-item audio,
.waveform{ display:none }
.live-waveform {
  height: 120px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  white-space: nowrap; 
}
.chat-message .live-waveform{
  height: 0;
  padding:0;
}
.chat-message.playing .live-waveform{
  height: 90px;
}
.waveform-bar {
  width: 4px;
  height: 1px;
  min-height: 1px;
  transition: height 0.4s ease;
  background: var(--dash-light);
  flex-shrink: 0;
  border-radius: 4px;
}
.live-waveform .play-pause{
  position: absolute;
  right: 0;
  top:0;
}
.live-waveform .play-pause img{
  width: 22px;
  height: 22px;
}
.live-waveform:not(.is-playing) .play-pause img.pause,
.live-waveform.is-playing .play-pause img.play{
  display: none;
}
.audio-recording.recording .waveform-bar,
.waveform-bar.played{ background:var(--dash-dark) }
.audio-recording.recording .waveforms .waveform-bar{ background:var(--dash-light) }
path.animate-line-in{
  fill: none; 
  stroke: #00a0a5;
  stroke-dasharray: 350;
  stroke-dashoffset: 350;
  will-change: stroke-dashoffset;
  stroke-width: 10px;
}
path.animate-line-in.active {
  -webkit-animation: dash 3s ease-out forwards;
  animation: dash 3s ease-out forwards;
}
line.fill-line{
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  will-change: stroke-dashoffset;
}
line.fill-line.active{
  -webkit-animation: dash 1s ease-out forwards;
  animation: dash 1s ease-out forwards;
}
circle.before-circle,
circle.fill-circle{ 
  opacity:0;
  transition: all 1s;
}
circle.before-circle.active,
circle.fill-circle.active{
  opacity: 1;
}
text.animate-line-percentage{
  fill: var(--dark);
  font-size: 27px;
  font-weight: 700;  
}
.add-data-resource-value{
  padding: 20px;
  background: var(--dash-light);
}
.alert{
  padding: 10px 20px;
  border-radius: 10px;
  background: var(--dash-success);
  color: white;
  font-size: 14px;
}
.sexy-checkboxes input[type="checkbox"] {
  display: none;
}
.sexy-checkboxes label:has(input[type="checkbox"]):hover{ cursor:pointer; }
.sexy-checkboxes label:has(input[type="checkbox"]):before{
  content: '';
  background: white;
  width: 25px;
  height: 24px;
  border: 1px solid var(--dash-medium);
  border-radius: 100%;
  position: absolute;
  left: 0;
  align-items: center;
  justify-content: center;
  display: flex;
  padding-top: 1px;
  transition: var(--dash-tr);
  color:white;
}
.sexy-checkboxes label:has(input[type="checkbox"]:checked):before{
  content: '✓';
  border: 1px solid var(--dash-success);
  background: var(--dash-success);
}
.sexy-checkboxes label:has(input[type="checkbox"]){
  padding-left: 38px;
  display: flex;
  align-items: center;
  position: relative;
  min-height: 38px;
}
.sexy-checkboxes input[type="checkbox"]:focus {
  outline: 2px solid #28a745;
  outline-offset: 2px;
}
.alert.warning{ background:var(--dash-warning) }
.anker-point{ scroll-margin-top: 120px; }
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
.auth-code-container{
  display: flex;
  align-items: center;
}
.auth-code-container input.auth-code{
  width: 130px;
  font-size: 26px;
  text-align: center;
  padding-left: 0;
  padding-right: 0;  
}
.auth-code-container span{
  padding: 0 6px;
  font-size: 26px;
  color: var(--light);  
}
.home-outer-container{ background:var(--white) }
.home-color svg .cls-content-boog-white-svg-boog-white-nl-1{ fill: var(--white)!important}
.header:before{
  content: '';
  width: 100%;
  height: 14px;
  background: var(--gradient);
  position: absolute;
  top: 0;
  left: 0;
}

.header{ 
  padding: 42px 30px 26px;
  position: sticky;
  top: 0;
  background: white;
  z-index: 15;
  box-shadow: var(--box-shadow);  
}
.circle-animation-line{
  transform: rotate(0);
  transition: all 1.2s ease-in-out;
  transform-origin: center;
}
.circle-animation-line.circle{
  transform: rotate(360deg);
}
body.scrolled .header .logo .show-xs.scrolled{ 
  display:inherit; 
  max-width: 60px;
  height: 60px;
}
body.scrolled .header .logo .hide-xs.full{ display:none }
.header .inner{
  position: relative;
}
body.scrolled .header{ 
  padding: 26px 30px 12px;
}
body.scrolled .header .header-menu{ top: 10px }
.header .inner .logo{ max-width:340px }

body:before{
  content: '';
  background: var(--site-dark);
  position: fixed;
  top:0;
  left: 0;
  bottom:0;
  right: 0;
  opacity: 0;
  transition: all .4s;
  z-index: -1;
}
body.menu-open:before{
  opacity: .7;
  z-index: 10;
}
html.menu-open{
  overflow: hidden;
}
  
.header .open-menu{
  width: 42px;
  height: 42px;
  border: 2px solid var(--light);
  line-height: 0;
  padding: 10px;
  display: flex;
  border-radius: 100%;
  justify-content: center;
  align-items: center;  
  margin-left:16px;
}
.header .open-menu .cls-icons-bars-svg-1-bars-svg{
  transition: all .8s;
  opacity: 1;
  transform: rotate(0deg);
  transform-origin: center;  
}
.header .open-menu.open .cls-icons-bars-svg-1-bars-svg:nth-of-type(1){
  transform: rotate(45deg) translate(0px, 5px);
}
.header .open-menu.open .cls-icons-bars-svg-1-bars-svg:nth-of-type(2){
  opacity: 0;
}
.header .open-menu.open .cls-icons-bars-svg-1-bars-svg:nth-of-type(3){
  transform: rotate(-45deg) translate(0px, -5px);
}
.bottom-footer .right,
.header .header-menu{
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
}
.footer{
  background: var(--dark);
  padding: 50px 30px;
  position: relative;
  margin-top:-1px;
}
.footer .quote{
  text-align: center;
  color: white;
  font-size: 24px;
  line-height: 28px;
  margin-top: 10px;  
}
.footer .inner{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.footer .logo{ width:100px }
.bottom-footer{
  background: var(--extra-dark);
  color: var(--medium-dark);
  padding:20px 30px;
  font-weight: 300;
}
.bottom-footer .inner{ 
  position:relative; 
  min-height: 42px;
  display: flex;
  align-items: center;
}
.bottom-footer span.copy{ font-size:12px }
.bottom-footer .social-links svg{
  width: 20px;
  margin-left: 16px;  
}
.boog{ 
  line-height:0;
  margin-bottom:-1px;
  overflow: hidden;
  display: flex;
  justify-content: center;  
  position: relative;
}
.boog .inner-contenr{
  position: absolute;
  top:0;
  z-index: 2;
}
.boog .inner-footer{
  position: absolute;
  bottom: 0;
  width: calc(100% - 20px);
  background: white;
  padding-top: 100px;
  right: 0;
  left: 10px;
}
.color-boog.white-bottom:after{
  content: '';
  background: white;
  width: 100%;
  height: 305px;
  z-index: 0;
  position: absolute;
  bottom: 0;
}
.boog .inner-footer.rotated-boog{
  padding: 0 0 100px;
  background: transparent;
}
.boog .inner-footer p.content{
  max-width: 670px;
  margin: 0 auto;
}
p.site-content,
.boog .inner-footer p.content{
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
}
.boog .dot-on-boog svg{
  width: 300px;
  height:300px;
}
.boog.color-boog{ padding-top: 150px }
.boog .inner,
.boog .inner svg{
  width: 2250px;
  max-width: 2250px !important;
  z-index:1;
}
.boog .inner:not(.rotate-180) svg{ margin-top: -5px }
.site-container.mt-minus-boog{ margin-top: -120px }
.site-container .boog{
  width: calc(100% + 60px);
  margin-left:-30px;
  z-index:1;
}
.boog.footer-boog:not(.site){ background:var(--dash-light); margin-top: -30px }
.boog .footer-boog svg{
  min-width: var(--max-width);
  width: 102%;
}
.site-dropdown .select .selection,
.site-dropdown{
  height: 42px;
  border: 2px solid var(--light);
  border-radius: 21px;
  padding: 0 21px;
  display: flex;
  justify-content: center;
  position: relative;  
  flex-direction: column;
  transition: var(--tr);
  background: white;
}
.side-menu .site-dropdown,
.side-menu .site-dropdown .current,
.side-menu .site-dropdown .select .selection, 
.side-menu .site-dropdown a{ 
  color:white;
  background: transparent;
}
.side-menu .site-dropdown:hover .current{ color: var(--dark) }
.site-dropdown *{ transition:var(--tr)}
.site-dropdown:hover .select{ display:inherit; }
.site-dropdown .select{
  position: absolute;
  top:100%;
  left:0;
  padding-top: 6px;
  display: none;
  z-index:1;
}
.site-dropdown .select .selection:first-child{
  height: 36px;
}
.site-dropdown .select a{ text-decoration:none; }
.site-dropdown .select .selection:hover,
.site-dropdown:hover{ 
  background:var(--extra-light) 
}
.site-dropdown *{
  font-size:12px;
  font-weight: 700;
  color: var(--medium-dark);  
}
.site-dropdown svg *{ stroke: var(--medium-dark) }
.site-dropdown *:hover{
  color:var(--dark);
}
.bottom-footer :is(.site-dropdown .select .selection, .site-dropdown){
  border-color:var(--medium-dark);
  background: transparent;
}
.bottom-footer .site-dropdown .select{
  top: inherit;
  bottom:100%;
  padding-bottom: 6px;
}
.bottom-footer .site-dropdown *:hover{ color:var(--light); }
.bottom-footer :is(.site-dropdown .select .selection:hover, .site-dropdown:hover){ background: rgba(255,255,255,.05); }

.site-dropdown .current{
  display: flex;
  padding-right: 30px;
  position: relative;
}
.side-menu{
  width: 300px;
  padding: 0 30px 30px 30px;
  right: -300px;
  position: fixed;
  z-index: 21;
  background: var(--site-dark);
  top:0;
  bottom:0;
  transition: all .4s;
  overflow: auto;
}
body.menu-open .side-menu{
  right: 0;
}
body.menu-open .header-menu{
  right: 320px;
  position: fixed;
  top: 36px!important;
}
.side-menu .inner-side-menu{
  position: sticky;
  display: flex;
  top:30px;
  flex-direction: column;
}
.side-menu .logo{ margin-bottom: 20px;}
.side-menu a{ 
  text-decoration: none; 
  margin-bottom: 10px;
  color: white;
}
.site-dropdown .current svg{
  width: 8px;
  height: 100%;
  position: absolute;
  right: 0;
  transform:rotate(180deg);
  transition: var(--tr);
}
.site-dropdown:hover .current svg{ transform:rotate(270deg) }
.bottom-footer .site-dropdown:hover .current svg{ transform:rotate(90deg) }
.site-dropdown .current svg .cls-chevron-1{ stroke: var(--medium-dark) }

.site-container{ padding-left:30px; padding-right:30px }
.site-container.with-background{
  background-repeat: no-repeat;
  background-position: center top;  
}
.video-frame{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border: 1px solid var(--light);
  border-radius: 40px;  
  overflow: hidden;
}
.video-frame.feed-example{ border-radius:0 }
.video-frame video{
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  z-index: 1;
}
.video-frame-shadow{
  width: 60%;
  box-shadow: 0px 3px 30px rgba(0, 0, 0, .35);
  position: relative;
  bottom: 0;
  left: 20%;
  background: transparent;
  height: 15px;
  margin-top: -15px;
}
.video-frame .controls{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  z-index: 2;
  transition: var(--tr)
}
.video-frame .controls.activated{ background:transparent;}
.video-frame .controls.activated:not(:hover) svg{ opacity:0 }
.video-frame .controls.activated:hover{ background:rgba(255,255,255,.75) }
.video-frame .controls svg{
  width: 125px;
  transition: var(--tr);
  opacity: 1;
}
.social-link{
  position: relative;
  padding-left: 40px;  
  display: inline-block;
}
.social-link svg{ 
  width: 24px;
  height: 24px;
  bottom: 0;
  left: 0;
  position: absolute;
}
.social-link svg *{ fill: var(--dark) }

/* Paragraph styling */
p.xl{ 
  font-size: 36px; 
  line-height:44px;
  font-weight: 500;
}
h1.title{
  font-size: 46px;
  line-height: 58px;
  font-weight: 600;
}
h1.title.title-xl{
  font-size: 65px;
  line-height: 73px;
}
.arrow-navigation{ 
  display:flex;
  justify-content: center;
  align-items: center;
  z-index:2;
  position: relative;
}
.arrow-navigation svg{
  width: 60px;
  margin:0 10px;
  border-radius: 100%;
}
.arrow-navigation svg:hover{
  background: var(--gradient-trans-12);
}
.arrow-navigation .next svg{ transform: rotate(180deg); }
/* End paragraph styling */

.home-banner .inner{ position:relative; }
.home-banner-overlay{  
  position: absolute;
  right: 170px;
  z-index: 0;
  bottom: 0;
}
.home-banner-overlay :is(png, svg){
  width: 2336px;
  max-width: 2336px;  
}
.single-line{ border-bottom:1px solid var(--light) }
.show-text-field-when-checked input[type="text"]{display: none}
.show-text-field-when-checked:has(input:checked) input[type="text"]{display: inherit;}

.site-track-container .review-by{
  padding:15px;
  border-radius: 40px;
  position: relative;
  padding-left: 70px;
}
.site-track-container p.site-content{ font-size: 15px }
.site-track-container .review-by p{
  line-height: 19px;
}
.site-track-container .review-by :is(img,svg){ 
  width: 46px;
  height: 46px;
  border-radius: 100%;
  position: absolute;
  left: 15px;
  top: 15px;  
}
.site-track-outer-container .left{
  padding: 21px 32px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  border-radius: 60px;
  transform: var(--tr);
  text-align: left;
  display: flex;
  align-items: center;
  position: relative;
  border: 1px solid var(--bluegreenhalf);
  margin-bottom: 10px;
}
.site-track-outer-container .left.site-track{
  flex-direction: column;
  align-items: baseline;
}
.site-track-outer-container .left img.company{
  width: 70px;
  margin-left: auto;  
}
.site-track-outer-container .left img.profile{
  border: 1px solid var(--light);
  width: 90px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 100%;
  margin: 0 20px 0 -10px;
}
.site-track-outer-container .left div.name{
  display: flex;
  flex-direction: column;
}
.site-review .title,
.site-track-outer-container .left div.name span.name{
  font-size: 26px;
  line-height: 34px;
  font-weight: 600;
}
.site-track-outer-container .left div.name span.name{ font-size:22px }
.site-track-outer-container .left div.name span.function{
  color: var(--bluegreen);
  font-style: italic;
  font-size: 15px;
  font-weight: 400;
}
.site-track-outer-container .left[data-disabled="true"]{ border-color:transparent; }
.site-track-outer-container .left[data-disabled="true"] span{ opacity:.5 }
.site-track-outer-container .left .disabled{
  font-size: 12px;
  color: var(--bluegreen);
  font-style: italic;
  margin-top: -2px;
  margin-bottom: -5px;
}
.site-track-outer-container .left.active{
  background: white;
  border: 1px solid var(--light);
  box-shadow: 8px -4px 25px rgba(0, 0, 0, 0.1);
}
.site-track-container:not(.active){ display:none }

.flex-center-vertical{
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.navigate-site-track-container{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.navigate-site-track-container .nav-bal{
  width: 24px;
  aspect-ratio: 1;
  background: var(--bluegreen);
  border-radius: 50%;
  transition: all .4s;
  opacity: .3;
}
.navigate-site-track-container .nav-bal.active{ opacity:1 }
.navigate-site-track-container:after,
.navigate-site-track-container:before{
  content: '';
  position: absolute;
  left: 10px;
  width: 30px;
  height: 30px;
  opacity: .8;
  border-radius: 50%;
  background: url(/images/chevron-bluegreen.svg) white no-repeat;
  background-position: 6px center;
  background-size: 50% 50%;
  transition: all .4s;
  border: 1px solid var(--bluegreen);
}
.navigate-site-track-container[active="1"]:before,
.navigate-site-track-container.last-active:after{ opacity:.3 }
.navigate-site-track-container:after{
  left: inherit;
  right: 10px;
  transform:rotate(180deg);
}
.site-review .site-review-stars{
  background: white;
  width: 150px;
  padding: 8px 12px;
  border-radius: 20px;
  border: 1px solid var(--light);
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.site-review .site-review-stars:before{
  content: '';
  width: 0%;
  background: white;
  right:0;
  height: 100%;
  position: absolute;
}
.site-review .site-review-stars[stars="9"]:before { width: 20px; }
.site-review .site-review-stars[stars="8"]:before { width: 33.5px; }
.site-review .site-review-stars[stars="7"]:before { width: 47px; }
.site-review .site-review-stars[stars="6"]:before { width: 60px; }
.site-review .site-review-stars[stars="5"]:before { width: 73.5px; }
.site-review .site-review-stars[stars="4"]:before { width: 87px; }
.site-review .site-review-stars[stars="3"]:before { width: 100.5px; }
.site-review .site-review-stars[stars="2"]:before { width: 114px; }
.site-review .site-review-stars[stars="1"]:before { width: 127.5px; }

.site-charities-outer-container {
  overflow: hidden; /* Zorg ervoor dat de zesde logo niet zichtbaar is */
  max-width: 1100px !important;
  padding: 30px 0;
}
.site-review .reviewer-info{
  display: flex;
  align-items: center;
  margin: 10px 0 30px 0;
  justify-content: space-between;
}
.site-review .reviewer-info div.name{
  padding: 0 5px 0 10px;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.site-review .reviewer-info span.name{
  font-weight: 700;
  line-height: 20px;
}
.site-review .reviewer-info span.function{
  font-size:11px;
  line-height: 14px;
  color:var(--bluegreen);
}
.site-review .reviewer-info img.profile{
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 100%;
  border: 2px solid var(--light);  
}
.site-review .reviewer-info img.company{
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 100%;
}
.site-charities-container {
  white-space: nowrap;
  display: flex;
  z-index:3;
  position: relative;
}

.site-charity {
  width: 20%;
  flex: 0 0 20%;
  text-align: center;
  transition:var(--tr);  
}
.show-xs{ display:none }
.site-charity :is(img,svg) {
  width: 65%;
  height: auto;
  object-fit: contain;
  transition:var(--tr);
}
.site-charity[data-index="3"],
.site-charity[data-index="1"]{
  padding-top:40px;
}
.switch-images{ min-height:410px }
.global-custom-pad{ padding-top:240px }
.site-charity[data-index="2"]{ 
  padding-top: 20px;
}
.site-charity[data-index="2"] :is(img,svg){
  width: 90%;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);  
  border-radius: 100%;
}
.switch-text{ height: 120px; }
.switch-text .target-text,
svg g[inkscape\:label="visible_image_group"] :is(use,image){ 
  opacity:0; 
  transition: all .8s;
}
.switch-text .target-text.active{
  transform: translateY(0);
}
svg g[inkscape\:label="icon"]{
  animation: smoothBounce 5s infinite;
}

svg g[inkscape\:label="icon"][icon="1"]{ animation-delay: 1s; }
svg g[inkscape\:label="icon"][icon="2"]{ animation-delay: 2s; }
svg g[inkscape\:label="icon"][icon="3"]{ animation-delay: 3s; }
svg g[inkscape\:label="icon"][icon="4"]{ animation-delay: 4s; }

@keyframes smoothBounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* Peak of the jump */
  }
  100% {
    transform: translateY(0px); /* Slight downward adjustment */
  }
}
.switch-text .target-text.active,
svg g.active[inkscape\:label="visible_image_group"] :is(use,image){ 
  opacity:1 
}
.switch-text{ position:relative; }
.switch-text .target-text{
  position: absolute;
  top:0;
  transform: translateY(-25px);  
}
.switch-text .target-text.active.gone{
  transform: translateY(50px);    
  opacity: 0;
}
.comming-soon{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: var(--dash-light);
}
.comming-soon img{
  max-width: 700px;
  width: 90%;
}

/* Slide Ins */
.slide-in .slide-in-block{
  opacity: 0;
  transition: var(--trs);
  transform: translateX(-50%);
}
.slide-in .slide-in-block.right{ transform: translateX(50%); }
.slide-in .slide-in-block.bottom{
  transform: translateX(0);  
  transform: translateY(50%); 
}
.slide-in.done .slide-in-block{
  opacity: 1;
  transform: translateX(0) translateY(0);

}
:root{
  --white: #f6fbf9;
  --blue: #7fcaee;
  --bluegreen: #74cfcc;
  --bluegreenhalf: #74cfcc69;
  --green: #b9d799;
  --blue-trans-12: #eff8fc;
  --green-trans-12: #f6faf2;
  --blue-trans-24: #e0f2fa;
  --green-trans-24: #eef5e6;  
  --blue-trans-36: #d2ecf9;
  --green-trans-36: #e7f0dc;    

  --extra-light: #f7f7f7;
  --light: #d6d6d6;

  --medium-dark: #6d6d6d;
  --gray: rgba(60, 60, 59, .45);
  --dark: #2d2d2d;
  --extra-dark: #232323;

  --gradient: linear-gradient(90deg, var(--blue), var(--green));
  --block-gradient: linear-gradient(135deg, #98d0bc, #b9d799);
  --gradient-trans-12: linear-gradient(90deg, var(--blue-trans-12), var(--green-trans-12));
  --gradient-trans-24: linear-gradient(90deg, var(--blue-trans-24), var(--green-trans-24));
  --gradient-trans-36: linear-gradient(90deg, var(--blue-trans-36), var(--green-trans-36));

  --max-width: 1370px;
  --max-width-medium: 1100px;
  --max-width-mid: 900px;
  --max-width-small: 780px;
  
  --trf: all .3s;
  --tr: all .6s;
  --trs: all 1s;

  --box-shadow: 8px -4px 25px rgba(0, 0, 0, 0.1);;
}
.site-container .inner,
.bottom-footer .inner,
.footer .inner,
.header .inner,
.menu .inner,
.container{
  max-width: var(--max-width);
  margin: 0 auto;
}
.container.medium{ max-width:var(--max-width-medium) }
.container.mid{ max-width:var(--max-width-mid) }
.container.small{ max-width:var(--max-width-small) }
.content{
  padding: 20px 0;
}
hr{
  border: 1px solid var(--dash-medium);
  margin:30px 0;
  border-bottom:none;
}
hr.light{ border-color:var(--dash-light) }
.page-block hr{
  margin: 30px -20px 25px;
}
/* Hover cursor pointer*/
.btn:hover,
summary:hover,
.open-menu:hover,
.popup-close:hover,
.add-comment:hover,
.upload-image:hover,
.click-through:hover,
.site-dropdown:hover,
[data-ajax-link]:hover,
.select-chat-type:hover,
.select-sub-content:hover,
input[type="submit"]:hover,
.arrow-navigation svg:hover,
.open-close-api-item-body:hover,
.video-frame .controls div:hover,
.dashboard-menu li.dropdown:hover,
.habit-select-container .edit:hover,
.chat-type-select span.calendar:hover,
.site-track-outer-container .left:hover,
.habit-select-container .habit-select:hover,
.navigation-bar :is(.next:hover,.prev:hover),
.add-interactions-container span.add-value:hover{
  cursor: pointer;
}
.click-through:hover{
  background: var(--dash-light);
}
/* End hover */

/* User Select */
.navigation-bar-container,
.add-interactions-container span{ 
  user-select: none; 
}
/* End User Select */

body:has(.popup-container.open),
html:has(.popup-container.open){ overflow:hidden }
.popup-container{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  background: rgba(0, 35, 56, .925);
  z-index:-1;  
  display: flex;
  justify-content: center;
  padding: 4%;
  opacity: 0;
  transition: var(--dash-tr);
  overflow: auto;
}
.popup-container .demo-popup{
  padding: 20px;
  text-align: center;  
}
.popup-container .demo-popup img{ height: calc(92vh - 110px); }
.popup-container.max{
  padding: 20px;
}
.popup-container.max .popup{ max-width:100% }
.popup-container.small .popup{ max-width: 550px }
.popup-container.open{ opacity:1; z-index: 99 }
.popup-container .popup{
  background: var(--dash-light);
  width: 100%;
  max-width: 980px;
  border-radius: var(--dash-br);
  overflow: hidden;
  height: fit-content;
}
.popup-container .popup .popup-close{
  background: var(--dash-black);
  position: relative;
  height: 50px;
  color: white;
  padding: 0 20px;
  line-height: 50px;
}
.popup-container .popup .popup-close img{ 
  width: 26px;
  height: 18px;
  position: absolute;
  right: 20px;
  top:14px;
}
.field{ margin-bottom:20px }
.field.with-image img{
  width: 40px;
  height: 40px;
  margin-top: auto;
  object-fit: contain;
  margin-left: auto;
}
.field.with-image{
  display: flex;
  align-items: center;
}
.upload-image{
  width: 44px;
  height: 44px!important;
  background: var(--dash-black);
  float: right;
  border-radius: 0 var(--dash-br) var(--dash-br) 0;
  margin-left: -10px;
  z-index: 1;
  position: relative;  
}
.upload-image:before{
  content: '+';
  position: absolute;
  color: white;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
.sticky-top{ position:sticky; top:109px }
body.scrolled .content-navigation.sticky-top{
  position: fixed;
  right: 0;
  z-index: 20;
  background: white;
  padding: 10px;
  border-radius: var(--dash-brs) 0 0 var(--dash-brs);
  box-shadow: var(--box-shadow);
}
body.scrolled .content-navigation.sticky-top .nav.btn:not(.active){ background: var(--dash-light)}
select,
textarea,
input[type="date"],
input[type="time"],
input[type="text"],
input[type="email"],
input[type="number"],
input[type="file"],
input[type="password"] {
  width: 100%;
  max-width: 100%;
  background: white;
  border: none;
  padding:12px 20px;
  border-radius: var(--dash-br);
}
input[data-optional="false"].not-entered{ box-shadow: 0 0 10px #c8090075 }
textarea{ min-height: 90px }
.page-block.white :is(input[type="number"], input[type="text"], input[type="email"], input[type="password"], input[type="date"], textarea, select){
  background: var(--dash-light);
}
.field.with-image input[type="text"]{ width:calc(100% - 34px) }
.field.with-image .inner{ width: calc(100% - 50px); }
.field label{ 
  margin-bottom:10px;
  display: inline-block;
}
.round{ border-radius: 100% }
.badge,
.btn{ 
  display:inline-block;
  text-align: center;
}
.btn[disabled]{
  opacity: .7;
  pointer-events: none;
}
.badge{
  background-color: white;
  transition: all 2s;
}
.btn.outline{
  background: white!important;
  border: 1px solid white;
}
.btn.success.outline{
  border-color: var(--dash-success);
  color: var(--dash-success);
}
.btn.warning.outline{
  border-color: var(--dash-warning);
  color: var(--dash-warning);
}
.btn.danger.outline{
  border-color: var(--dash-danger);
  color: var(--dash-danger);
}
.btn.secondary.outline{
  border-color: var(--dash-medium);
}

.btn.svg-icon{
  padding: 0;
  width: 32px;
  height: 32px;
  position: relative;
}
.btn.svg-icon svg { 
  fill: white;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 8px;
  left: 8px;
 }
.btn.text-left{text-align: left}
.btn.select-styling{
  padding-left: 20px;
  color: black;
  font-size: 13.33333px;
  font-weight: 400;
}
.buttons-container{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.same-height .page-block .btn :is(svg,img),
.breadcrumbs a{
  text-decoration: none;
  color: var(--dash-success);
}
.page-block:has(.auto-load-max-container){ position:relative; }
.auto-load-max-container{
  position: absolute;
  overflow: auto;
  height: calc(100% - 40px);
  width: 100%;
  left: 0;
  top: 20px;
  right: 0;
  bottom: 20px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
table.set-current-date-time td .chats,
html:has(body[data-dashboard="true"]),
.seen-comments-controller-container,
.new-feed-comment textarea,
.habit-select-contents,
.recording-item,
.chat-container,
.live-waveform{
  scrollbar-width: none;
  -ms-overflow-style: none;
}
table.set-current-date-time td .chats::-webkit-scrollbar,
html:has(body[data-dashboard="true"])::-webkit-scrollbar,
.seen-comments-controller-container::-webkit-scrollbar,
.new-feed-comment textarea::-webkit-scrollbar,
.auto-load-max-container::-webkit-scrollbar,
.habit-select-contents::-webkit-scrollbar,
.chat-container::-webkit-scrollbar,
.recording-item::-webkit-scrollbar,
.live-waveform::-webkit-scrollbar{
  display: none;
}
.chat.auto-load-max-container{
  left: 0;
  right: 0;
  width: 100%;
}
.auto-load-max-container .ptu-user-filters{
  position: sticky;
  top:0;
  background: white;
  z-index: 1;
}
.pt-0.pb-0 .auto-load-max-container{
  top:0;
  height: 100%;
}
.breadcrumbs span.sep:before{
  content: '→'
}
.btn :is(svg,img){
  height:24px;
}
.btn.fit-content{ width:fit-content; }
.btn.full{ width:100% }
.btn,
.badge,
.menu a,
input[type="submit"],
.content-navigation .nav.btn{
  padding: 0 16px;
  background: white;
  color: var(--dash-black);
  text-decoration: none;
  font-size:12px;
  border-radius: var(--dash-brs);
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 32px;
  min-height: 32px;
  transition: var(--dash-tr);
  font-weight: 400;
  flex-direction: row;  
}
.badge{ 
  line-height: 18px;
  min-height: 18px;
  padding: 0 8px;
  font-size: 11px;
}
.btn .badge{
  margin-right: 6px;
}
.split-buttons{
  display: flex;
  border-radius: var(--dash-br);
  overflow: hidden;  
}
.split-buttons .btn{
  width: 100%;
  border-radius: 0;
}
input.submit[type="submit"]{ font-size:15px }
.btn:hover{
  filter: brightness(95%);
}
.badge.warning,
.btn.warning,
input.warning[type="submit"],
.content-navigation .nav.btn.warning,
.menu a.warning{
  background: var(--dash-warning);
  color: white;
}
span.big-number.warning{ color:var(--dash-warning) }
.badge.success,
.btn.success,
input.success[type="submit"],
.content-navigation .nav.btn.success,
.menu a.success{
  background: var(--dash-success);
  color: white;
}
span.big-number.success{ color:var(--dash-success) }

.btn.danger,
input.danger[type="submit"],
.menu a.danger{
  background: var(--dash-danger);
  color: white;
}
span.big-number.danger{ color:var(--dash-danger) }
.btn.primary,
.badge.primary,
input.primary[type="submit"],
.content-navigation .nav.btn.primary,
.menu a.primary{
  background: var(--dash-black);
  color: white;
}
.btn.secondary,
.badge.secondary,
input.secondary[type="submit"],
.content-navigation .nav.btn.secondary,
.menu a.secondary{
  background: var(--dash-light-alt);
  color:var(--dash-black);
}
input.big-checkbox{
  width: 18px;
  height: 18px;
}
td input.big-checkbox{
  margin: 2px 8px 0 0;
  float: left;  
}
.menu{
  padding: 20px 30px;
  overflow: auto;
  background: var(--gradient-trans-12);
}
.menu .inner{ display:flex }
.menu a{ margin-right: 10px }
.menu .btn.active,
.menu a.active{
  background: var(--dash-black);
  color: white;
}
.side-menu .menu-sub{
  margin-bottom: 10px;
  position: relative;
}
.side-menu .menu-sub:after{
  content: '→';
  position: absolute;
  color: white;
  right: 0;
  transition: var(--dash-tr);
  top: 2px;
}
.side-menu .menu-sub:hover:after{
  transform: rotate(90deg);
}
.menu-sub .sub{ 
  display:none;
  padding:6px 12px;
  border-radius: 4px;
}
.menu-sub:hover .sub{
  position: relative;
  display: flex;
  flex-direction: column;
  z-index:10;
  background: rgba(255,255,255,.1);
}
.menu-sub .sub li{ 
  list-style:none;
  display: inline-grid;
}
.menu-sub .sub :is(a, span.text){
  margin: 0;
  line-height: 25px;
  height: 25px;
  min-height: 25px;
  font-size: 14px;
  color: var(--dash-light);
}
.menu-sub .sub li.dropdown-item a,
.menu-sub .sub span.text{
  color: var(--dash-light);
  padding-left: 15px;
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  min-height: 24px;
  position: relative;
  background: rgba(255, 255, 255, .1);
  border-radius: 4px;
  margin-bottom: 2px;  
}
.menu-sub .sub span.text{
  padding:0;
  background: transparent;
}
.menu-sub .sub li.dropdown-item a{
  color: var(--dash-light-alt);
}
.menu-sub .sub li.dropdown-item a:before{
  content: '→';
  margin-right: 3px;
}
.menu-sub .sub span.text:after{
  content: '→';
  position: absolute;
  right: 10px;
  transform: rotate(90deg);
}
a:hover{
  filter: brightness(95%);
}
.navigation-bar{
  background: var(--dash-black);
  color: white;
  font-weight: 300;
  padding: 8px 0;
  text-align: center;
  margin: 0 -20px;  
  position: relative;
}
.pad-3 > .navigation-bar{ margin: 0 -15px }
.navigation-bar .bar:not(.active),
.navigation-bar-target:not(.active){ display:none }
.navigation-bar :is(.next,.prev){
  position: absolute;
  left: 0;
  top: 0;
  width: 35px;
  height: 100%!important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.navigation-bar svg{
  height: 20px;
  width: 9px;
}
.navigation-bar .next{ right: 0; left: inherit; }
.navigation-bar .next svg{ transform: rotate(180deg); }
.navigation-bar .title{ font-weight:500 }

/* Animated-lines */
.animated-lines .line{
  opacity: 0;
  transition: var(--tr);
  transform: translateY(30%);  
}
.animated-lines .line.show{ 
  opacity:1;
  transform: translateY(0%);  
}
.animated-lines.list-with-left-icons .line span{
  font-size:22px;
  font-weight: 900;
  line-height: 30px;
}
.animated-lines.list-with-left-icons .line{ 
  font-weight: 300;
  line-height: 28px;
  padding: 20px 0 30px 100px;
  position: relative;
  font-size: 16px;
  overflow: hidden;
}
.animated-lines.list-with-left-icons .line .check{
  width: 70px;
  position: absolute;
  left: 0px;
  top: 0;
}
.animated-lines.list-with-left-icons .line .check:before{
  content: '';
  width: 3px;
  position: absolute;
  top: 70px;
  left: 33px;
  height: 0px;
  background: var(--extra-light);
  transition: height 1s;
  transition-delay: 750ms;
}
.select-sub-target:not(.active),
.animated-lines.list-with-left-icons .line:last-child .check:before{ display:none }
.animated-lines.list-with-left-icons .line.show .check:before{
  height: calc(100% + 20px);
}
.animated-lines.big-title-lines{ margin-top: -30px }
.animated-lines.big-title-lines .line{
  font-size: 52px;
  line-height: 68px;
  color:white;
}
.data-resource-table{
  width: 100%;
  border-spacing: 0;
  border-radius: 0 0 var(--dash-br) var(--dash-br);
  overflow: hidden;
}
.data-resource-table th{
  text-align: left;
  background: var(--dash-black);
  color:white;
}
.data-resource-table tr:nth-child(odd) td{
  background: #f4f8ff;
}
.data-resource-table tr:nth-child(even) td{
  background: white;
}
.data-resource-table :is(td,th){
  padding: 6px 10px;
}
.abs-bottom-popup{
  position: absolute;
  bottom: 0;
  left: 0;
}
.pad-4 .abs-bottom-popup{
  left: 20px;
  bottom: 20px;
}

/* Flash messages */
.flash-messages{
  position: fixed;
  z-index: 100;
  top: 200px;
  right: 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: end;  
}
.flash-messages .flash{
  right: -100%;
  padding: 10px 20px;
  color: white;
  background: var(--dash-dark);  
  transition: var(--tr);
  margin-top: 6px;
  position: relative;
  box-shadow: var(--box-shadow);
  width: fit-content;
  border-radius: 0;
  max-width: 400px;
}
.flash-messages .flash.success{ background:var(--dash-success) }
.flash-messages .flash.danger{ background:var(--dash-danger) }
.flash-messages .flash.active{
  right: 0;
}
/* Pagination */
.pagination{
  gap: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
}
.pagination :is(em,a){
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  background: var(--dash-dark);
  color: white;
  border-radius: 6px;
  text-decoration: none;
  position: relative;
}
.pagination em{
  background: var(--dash-medium);
}
.pagination a.next_page:before, 
.pagination a.previous_page:before{
  content: '→';
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
}
.pagination a.previous_page:before{ transform: rotate(180deg) }
:root{
  --site-dark: #3c3c3b;
}
.site-container :is(h1, h2, h3, h4, h5, h6, p, a, li, ul, ol){
  color: var(--site-dark);
}
.time-select{
  display: flex;
  align-items: center;
  position: relative;
}
.time-select .min,
.time-select .hour{
  width: fit-content;
  height: 50px!important;
  background: white;
  color: var(--dash-dark);
  font-size: 34px;
  padding: 0 10px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--dash-br);
  border: 1px solid var(--blue-line);
  position: relative;
  font-weight: 200;
  color: var(--dash-dark);
}
.time-select .sub-select{
  position: absolute;
  top: calc(100% + 2px);
  background: white;
  border: 1px solid var(--dash-light);
  width: fit-content;
  max-height: 180px;
  overflow: auto;
  border-radius: var(--dash-br);
  right: 0;
  z-index:10;
}
.time-select .sub-select div{
  font-size: 20px;
  border-bottom: 1px solid var(--dash-light);
  text-align: center;
  padding: 3px 18px;
}
.time-select .sub-select div.current{
  background: var(--dash-medium);
  color:white;
}
.time-select .double{
  font-size: 34px;
  padding: 0 5px;
  margin-top: -5px;  
}
img.time-select-bel{
  width: 26px;
}
@media screen and (max-width:1366px){
  .home-banner-overlay{right: -300px}
  .home-banner-overlay .pulse-icon{ display:none }
}
@media screen and (max-width:768px){
  .bottom-footer .inner{ flex-direction:column; }
  .bottom-footer .right, .header .header-menu{
    position: absolute;
    right: 0;
    width: auto;
    height: 100%;
    display: flex;
    justify-content: center;
  } 
  body{
    zoom:100%!important;
  }  
  .header .header-menu{ height: 60px; }
  body.scrolled .header .header-menu{ top: 0 }
  body.menu-open .header-menu{ top: 22px!important }
  body.scrolled .header,
  .header{
    padding: 22px 20px 8px;
  }
  p.xl{
    font-size:24px;
    line-height: 32px;
  }
  h1.title.title-xl{ 
    font-size: 28px;
    line-height: 36px;
  }
  .site-review .title,
  h1.title{ 
    font-size: 25px;
    line-height: 34px;
  }
  .global-custom-pad{ padding-top:140px }
  h1.title.target-text{
    width: 100%;
    font-size: 28px;
  }
  .video-frame{
    border-radius: 15px;
  }
  .video-frame .controls svg{
    width: 65px;
  }
  .navigate-site-track-container .navigation{ display:inherit; }
  .site-container{
    padding-left:20px;
    padding-right: 20px;
  }
  .show-xs{ display:inherit }
  .menu,
  .hide-xs{ display:none }
  .boog.color-boog .inner, .boog.color-boog .inner svg{
    width: 1250px;
    max-width: 1250px !important;  
  }
  .footer{padding-bottom: 40px}
  .footer .social-links{
    margin-top:40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .footer .social-links svg{
    width: 30px;
    margin: 0 5px;
  }
  .boog .inner, .boog .inner svg{
    width: 700px;
    max-width: 700px !important;  
    margin-top: -3px;
  }
  .boog .inner.rotate-180 svg{ margin-top:0 }
  .boog.color-boog .inner-contenr{ top: -25px }
  .boog .inner-footer{ 
    top: 280px;
  }
  .page-block.num-block span.num{
    font-size: 60px;
  }
  .page-block.num-block {
    padding: 30px 30px 30px 90px;
    min-height: auto;
  }
  .page-block.num-block p{
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
  }
  .with-background.empowering{ background-image: none !important; }
  .boog .dot-on-boog svg{
    width: 175px;
    height: 175px;
    margin-bottom: -40px;
  }
  .animated-lines.big-title-lines .line{
    font-size:24px;
    line-height: 36px;
  }
  .site-container .boog.color-boog{
    padding-top: 65px;
    padding-bottom: 160px;
  }
  .site-container .boog.color-boog.pb-0-xs{ padding-bottom: 0px }
  .site-container{ overflow:hidden }
  .header .inner .logo {
    max-width: 60px;
    margin: 0 auto;
    height: 60px;
  }
  .animated-lines.list-with-left-icons .line{ padding: 0 0 30px 75px }
  .animated-lines.list-with-left-icons .line span{
    font-size: 18px;
    line-height: 26px;
  }
  .animated-lines.list-with-left-icons .line .check{ width:50px }
  .animated-lines.list-with-left-icons .line .check:before{
    left:25px;
    top: 50px;
    background: var(--light);
  }
  .site-charity{ 
    width:33%;
    flex: 0 0 33%;
    padding-bottom: 20px;
  }
  .site-track-container .site-review{
    padding: 20px;
    border-radius: 20px;
    background: white;
    border: 1px solid var(--light);
    box-shadow: 8px -4px 25px rgba(0, 0, 0, 0.1);
    position: relative;
  }
  .site-review .site-review-stars{
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    margin: 0 auto;    
  }
  .site-review .title{
    font-size:20px;
  }
  .site-track-container p.site-content{ font-size:14px }
  .site-track-container .site-review p.site-content{ margin-top:0 }
  .site-charity[data-index="0"]{ display:none }
  .color-boog.white-bottom:after{ height:150px }
  .animated-lines.list-with-left-icons .line.show .check:before{ height: calc(100% + 100px) }
  .animated-lines.big-title-lines{margin-top:10px}
  /* Padding */
  .pad-0-xs{ padding: 0!important; }
  .pad-1-xs{ padding: 5px!important; }
  .pad-2-xs{ padding: 10px!important; }
  .pad-3-xs{ padding: 15px!important; }
  .pad-4-xs{ padding: 20px!important; }
  .pad-5-xs{ padding: 30px!important; }
  .pad-6-xs{ padding: 40px!important; }
  .pad-7-xs{ padding: 50px!important; }
  .pad-8-xs{ padding: 60px!important; }

  /* Padding top */
  .pt-0-xs{ padding-top: 0px!important; }
  .pt-1-xs{ padding-top: 5px!important; }
  .pt-2-xs{ padding-top: 10px!important; }
  .pt-3-xs{ padding-top: 15px!important; }
  .pt-4-xs{ padding-top: 20px!important; }
  .pt-5-xs{ padding-top: 30px!important; }
  .pt-6-xs{ padding-top: 40px!important; }
  .pt-7-xs{ padding-top: 50px!important; }
  .pt-8-xs{ padding-top: 60px!important; }

  /* Padding bottom */
  .pb-0-xs{ padding-bottom: 0px!important; }
  .pb-1-xs{ padding-bottom: 5px!important; }
  .pb-2-xs{ padding-bottom: 10px!important; }
  .pb-3-xs{ padding-bottom: 15px!important; }
  .pb-4-xs{ padding-bottom: 20px!important; }
  .pb-5-xs{ padding-bottom: 30px!important; }
  .pb-6-xs{ padding-bottom: 40px!important; }
  .pb-7-xs{ padding-bottom: 50px!important; }
  .pb-8-xs{ padding-bottom: 60px!important; }

  /* Padding left */
  .pl-0-xs{ padding-left: 0px!important; }
  .pl-1-xs{ padding-left: 5px!important; }
  .pl-2-xs{ padding-left: 10px!important; }
  .pl-3-xs{ padding-left: 15px!important; }
  .pl-4-xs{ padding-left: 20px!important; }
  .pl-5-xs{ padding-left: 30px!important; }
  .pl-6-xs{ padding-left: 40px!important; }
  .pl-7-xs{ padding-left: 50px!important; }
  .pl-8-xs{ padding-left: 60px!important; }

  /* Padding right */
  .pr-0-xs{ padding-right: 0px!important; }
  .pr-1-xs{ padding-right: 5px!important; }
  .pr-2-xs{ padding-right: 10px!important; }
  .pr-3-xs{ padding-right: 15px!important; }
  .pr-4-xs{ padding-right: 20px!important; }
  .pr-5-xs{ padding-right: 30px!important; }
  .pr-6-xs{ padding-right: 40px!important; }
  .pr-7-xs{ padding-right: 50px!important; }
  .pr-8-xs{ padding-right: 60px!important; }

  /* Margin top */
  .mt-0-xs{ margin-top: 0px!important; }
  .mt-1-xs{ margin-top: 5px!important; }
  .mt-2-xs{ margin-top: 10px!important; }
  .mt-3-xs{ margin-top: 15px!important; }
  .mt-4-xs{ margin-top: 20px!important; }
  .mt-5-xs{ margin-top: 30px!important; }
  .mt-6-xs{ margin-top: 40px!important; }
  .mt-7-xs{ margin-top: 50px!important; }
  .mt-8-xs{ margin-top: 60px!important; }

  /* Margin bottom */
  .mb-0-xs{ margin-bottom: 0px!important; }
  .mb-1-xs{ margin-bottom: 5px!important; }
  .mb-2-xs{ margin-bottom: 10px!important; }
  .mb-3-xs{ margin-bottom: 15px!important; }
  .mb-4-xs{ margin-bottom: 20px!important; }
  .mb-5-xs{ margin-bottom: 30px!important; }
  .mb-6-xs{ margin-bottom: 40px!important; }
  .mb-7-xs{ margin-bottom: 50px!important; }
  .mb-8-xs{ margin-bottom: 60px!important; }

  /* Margin left */
  .ml-0-xs{ margin-left: 0px!important; }
  .ml-1-xs{ margin-left: 5px!important; }
  .ml-2-xs{ margin-left: 10px!important; }
  .ml-3-xs{ margin-left: 15px!important; }
  .ml-4-xs{ margin-left: 20px!important; }
  .ml-5-xs{ margin-left: 30px!important; }
  .ml-6-xs{ margin-left: 40px!important; }
  .ml-7-xs{ margin-left: 50px!important; }
  .ml-8-xs{ margin-left: 60px!important; }

  /* Margin right */
  .mr-0-xs{ margin-right: 0px!important; }
  .mr-1-xs{ margin-right: 5px!important; }
  .mr-2-xs{ margin-right: 10px!important; }
  .mr-3-xs{ margin-right: 15px!important; }
  .mr-4-xs{ margin-right: 20px!important; }
  .mr-5-xs{ margin-right: 30px!important; }
  .mr-6-xs{ margin-right: 40px!important; }
  .mr-7-xs{ margin-right: 50px!important; }
  .mr-8-xs{ margin-right: 60px!important; }  

  .text-center-xs { text-align:center; }
  .text-left-xs { text-align:left; }
  .text-right-xs { text-align:right; }  

  .fs-12-xs{ font-size:12px!important; line-height: 22px!important}
  .fs-13-xs{ font-size:13px!important }
  .fs-14-xs{ font-size:14px!important }
  .fs-14-xs{ font-size:14px!important }
  .fs-15-xs{ font-size:15px!important }
  .fs-16-xs{ font-size:16px!important }
  .fs-18-xs{ font-size:18px!important }
  .fs-20-xs{ font-size:20px!important }
  .fs-22-xs{ font-size:22px!important }
  .fs-24-xs{ font-size:24px!important }
  .fs-26-xs{ font-size:26px!important }
  .fs-28-xs{ font-size:28px!important }
  .fs-30-xs{ font-size:30px!important }  
}
@media screen and (max-width:421px){
  .site-container .boog.color-boog{ 
    padding-bottom: 61%!important;
  }
  .site-container .boog.color-boog.white-bottom{
    padding-bottom: 0!important;
  }
}
@media screen and (max-width:370px){
  .boog .inner-footer{ top:inherit }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */