/* Content Variables */
/* Header Variables */
/* Login Variables */
/* Form Variables */
/* Button Variables */

[data-bs-theme=dark], body[data-bs-theme=dark] [data-bs-theme=light]{
  /*--tblr-body-bg: #202020;
  --tblr-bg-surface: #252525;
  --tblr-bg-surface-tertiary: #272727;*/
  --tblr-body-bg: #131c27;
  --tblr-secondary: #8293a6;
  --tblr-secondary-rgb: 130, 147, 166;
  --tblr-primary: #1376d7;
  --tblr-blue-rgb: 19, 118, 215;
  --tblr-primary-rgb: 19, 118, 215;
  --tblr-border-color: #273747;
  --tblr-dark-lt-rgb: 255, 255, 255;
}

[data-bs-theme=dark].lg2, body[data-bs-theme=dark].lg2{
  --tblr-body-bg: rgb(28, 28, 28);
  --tblr-body-bg-rgb: 28, 28, 28;
  --tblr-bg-surface: #252525;
  --tblr-bg-surface-tertiary: #272727;
  --tblr-secondary: #a0a0a0;
  --tblr-secondary-rgb: 130, 147, 166;
  --tblr-primary: #ff2300;
  --tblr-blue-rgb: 255, 255, 255;
  --tblr-primary-rgb: 255, 255, 255;
  --tblr-border-color: #454545;
  --tblr-primary-lt-rgb: 60, 60, 60;
  --tblr-primary-lt: #1e1e1e;
  --tblr-bg-forms: #1d1d1d;
  --tblr-link-hover-color: #ff2300;
  --tblr-bg-surface-secondary: #000000;
  --tblr-dark-lt-rgb: 255, 255, 255;
  --tblr-purple: #ff2300;
  --tblr-purple-rgb: 255, 255, 255;
  --tblr-purple-lt-rgb: 60, 60, 60;
  --tblr-purple-lt: #3c3c3c;
  --tblr-blue-lt-rgb: 60, 60, 60;
  --tblr-dark-rgb: 200, 200, 200;
}

html {
  --scrollbarBG: #CFD8DC;
  --thumbBG: #90A4AE;
}

html, body {
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}

[data-bs-theme=dark] .text-black{
  color: #ffffff !important;
}

[data-bs-theme=dark] .noUi-connect{
  background: #ff2300;
}

[data-bs-theme=dark] .form-colorinput-color.bg-purple{
  background-color: #ae3ec9 !important;
}

[data-bs-theme=dark] .modal-backdrop{
  --tblr-backdrop-bg: #000000;
}

[data-bs-theme=dark] .bg-dark-lt{
  background-color: #1c1c1c !important;
  color: #ffffff !important;
}

[data-bs-theme=dark] .modal{
  --tblr-modal-border-color: #3d556f;
}

[data-bs-theme=dark].lg2 .modal{
  --tblr-modal-border-color: #000000;
}

.offcanvas{
  --tblr-offcanvas-width : 600px;
}

[data-bs-theme=dark] .offcanvas-backdrop.show{
  opacity:0.5;
}

[data-bs-theme=dark] .offcanvas-backdrop{
  background-color: #000000;
}

[data-bs-theme=dark] .modal-backdrop{
  --tblr-backdrop-opacity: 0.5;
}

[data-bs-theme=dark] #main_list .list-group-item{
  background-color: var(--tblr-bg-surface);
  color: var(--tblr-text-color);
}

[data-bs-theme=dark] .list-group{
  background-color: var(--tblr-bg-surface);
  color: var(--tblr-text-color);
}

[data-bs-theme=dark] .easing .form-selectgroup-input+.form-selectgroup-label{
  opacity:1;
}

[data-bs-theme=dark] .text-muted-light{
  --tblr-text-opacity: 0.8;
}

[data-bs-theme=dark] .timescale_container{
  background: repeating-linear-gradient(45deg, #19222d, #19222d 6px, #394f68 6px, #394f68 10px);
  border: solid 1px #4b6782;
}

[data-bs-theme=dark] .main_controller{
  background-color: var(--tblr-bg-surface);
}

[data-bs-theme=dark] .main_controller_drawer{
  background-color: var(--tblr-bg-surface);
}

[data-bs-theme=dark] .banner_name_preview:hover::after {
  background-color: rgba(var(--tblr-blue-lt-rgb), var(--tblr-bg-opacity)) !important;
  border-color: var(--tblr-bg-forms);
  color: rgba(var(--tblr-blue-rgb), var(--tblr-text-opacity)) !important;
}

[data-bs-theme=dark] .form-check-input{
  border-color: rgb(var(--tblr-secondary-rgb));
}

.theme_light{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff 50%, rgb(208, 208, 208) 50%);
}

.theme_dark{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #273747 50%, #131c27 50%);
}

.theme_lg2{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff2300 50%, #000000 50%);
}

.offcanvas{
  --tblr-offcanvas-width : 600px;
}

.comment_cursor{
  cursor: move;
}

html, body{
  border:0;
  margin:0;
  padding:0;
}

.page-body{
  padding-bottom:150px;
  margin-top:0px;;
}

.banner_comment_box{
  position: absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color: rgba(0,0,0,0);
  z-index:9999;
  display:none;
  border:solid 5px rgba(var(--tblr-success-rgb),var(--tblr-text-opacity));
}

.card-subtitle{
  max-width:220px;
}

.comment_icon_actions{
  position:absolute;
  right:15px;
  top:10px;
}

.card-comments{
  position:relative;
  top:0px;
  transition:box-shadow 0.25s ease-in-out, top 0.25s ease-in-out;
}

.card-comments:hover{
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
  border:solid 2px #000000;
  top:-8px;
}

.card-comments .card-header{
  display:block;
}
.banner:hover .banner_comment_box{
  display:block;
}

.page-wrapper .page-header{
  margin:.5rem 0 0;
}

.banner{
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  overflow:hidden;
  /*cursor: pointer;*/ 
}

.banner.size_300x250{
  width: 300px;
  height: 250px;
}
.banner.size_300x600{
  width: 300px;
  height: 600px;
}
.banner.size_728x90{
  width: 728px;
  height: 90px;
}
.banner.size_160x600{
  width: 160px;
  height: 600px;
}
.banner.size_970x250{
  width: 970px;
  height: 250px;
}
.banner.size_320x50{
  width: 320px;
  height: 50px;
}
.banner.size_300x50{
  width: 300px;
  height: 50px;
}

.banner.size_300x250 .bannerSize, .banner.size_300x250 .banner_content{
  width: 300px;
  height: 250px;
  overflow:hidden;
}
.banner.size_300x600 .bannerSize, .banner.size_300x600 .banner_content{
  width: 300px;
  height: 600px;
  overflow:hidden;
}
.banner.size_728x90 .bannerSize, .banner.size_728x90 .banner_content{
  width: 728px;
  height: 90px;
  overflow:hidden;
}
.banner.size_160x600 .bannerSize.banner.size_160x600 .banner_content{
  width: 160px;
  height: 600px;
  overflow:hidden;
}
.banner.size_970x250 .bannerSize, .banner.size_970x250 .banner_content{
  width: 970px;
  height: 250px;
  overflow:hidden;
}
.banner.size_320x50 .bannerSize, .banner.size_320x50 .banner_content{
  width: 320px;
  height: 50px;
  overflow:hidden;
}
.banner.size_300x50 .bannerSize, .banner.size_300x50 .banner_content{
  width: 300px;
  height: 50px;
  overflow:hidden;
}


.bannerSize{
  position: absolute;
  top:0px;
  left: 0px;
}

.banner_content{
  width:100%;
  height:100%;
}


.bannerSize img{
  width: 100%;
  height: 100%;
}


.banner .slide_left_fade{
  opacity:0;
}

.banner_content{
  position: absolute;
  top:0px;
  left: 0px;
  
}

.transition{
  position:absolute;
  visibility: hidden;
}



.my-handle{
  cursor: grab;
  padding:10px;
}

.list-group-item{
  background-color: white;
  padding: 1em 0.8em;
}

.layer_name_text{
  word-break: break-all;
  text-wrap: auto;
}

.list-group-item-shadow{
  background-color: white;
  padding: 1em 0.8em 1em 1.6em;
  opacity:0.5;
}

.list-group-item .text-truncate:hover .layer_preview{
  display: block;
}

.list-group-item .text-truncate{
  cursor: pointer;
}

input[type="file"] {
  display: none;
}

.list-group{
  border: solid 1px var(--tblr-border-color);
  padding: 3px;
  border-radius: var(--tblr-border-radius);
  /*background-color: var(--tblr-bg-surface);*/
  margin-left: 25px;
  min-height:3.5rem;
}

.form-range .noUi-tooltip {
  display: none;
}
.form-range .noUi-active .noUi-tooltip {
  display: block;
}

.cross{
  width:40px;
  height:40px;
  position:absolute;
  top:50%;
  left:50%;
  z-index:9999;
  display:none;
}

.cross::after {
  left: -20px;
  width: 40px;
  height: 2px;
}

.cross::before {
  top: -18px;
  width: 2px;
  height: 40px;
}

.cross::after, .cross::before {
  content: "";
  background: var(--tblr-primary);
  border-radius: 2px;
  position: absolute;
}

.dropdown-menu .form-selectgroup-label svg, .navbar .form-selectgroup-label svg{
  --tblr-icon-size: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.5rem;
}

.timeline-event-icon{
  /*width: 3rem;
  height: 2.5rem;*/
  margin-top:-1rem;
}

.timeline-event-icon.bg-primary-lt{
  border: solid 1px var(--tblr-primary);
}

/*#main_list::before{
  content: "";
  display: block;
  height: calc(100% - 4.9rem);
  width: 2px;
  background-color: var(--tblr-border-color);
  position: absolute;
  left: 9px;
  top: 0px;
}

#main_list::after{
  content: "";
  display: block;
  height: 20%;
  width: 2px;
  background-color: var(--tblr-primary);
  position: absolute;
  left: 9px;
  top: 0px;
}*/

.list-group{
  position: relative;
}

.list-group:before{
  content: "";
  display: block;
  height: calc(100% + 1rem);
  width: 2px;
  background-color: var(--tblr-border-color);
  position: absolute;
  left: -14px;
  top: 0px;
}

.list-group .vertical_progress{
  display: block;
  height: 0;
  width: 2px;
  background-color: var(--tblr-primary);
  position: absolute;
  left: -14px;
  top: 0px;
}

.list-group:last-child:before, .list-group:last-child:after {
  /*content: none;*/
}


#main_list{
  position: relative;
}

.easing{
  display: block;
}

.easing .form-selectgroup-label{
  width: 100%;
  display: flex;
}


.easing .form-selectgroup-item{
  display: inline-block;
  width: 30%;
}

.easing .form-selectgroup-input:checked+.form-selectgroup-label{
  border-width: 2px;
  opacity:1;
}

.easing .form-selectgroup-input+.form-selectgroup-label{
  opacity:0.4;
}

.form-control.disabled, .form-control:disabled{
  opacity: 0.4;
}

.layer_preview{
  position: absolute;
  border:solid 1px var(--tblr-border-active-color);
  box-sizing: border-box;
  overflow:hidden;
  top:-100px;
  left: 68px;
  background-color: #ffffff;
  display: none;
  width: 100px;
  height: auto;
  box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.2);
  z-index:50;
  aspect-ratio: 300/250;
}

.layer_preview.preview_160x600{
  top:50px;
  width: 75px;
  aspect-ratio: 160/600;
}
.layer_preview.preview_300x600{
  top:50px;
  width: 75px;
  aspect-ratio: 300/600;
}

.layer_preview.preview_728x90{
  top:50px;
  width: 200px;
  aspect-ratio: 728/90;
}

.layer_preview.preview_970x250{
  top:50px;
  width: 200px;
  aspect-ratio: 970/250;
}

#sharedDropdown{
  max-width: 45rem;
}

.form-check-input:disabled~.form-check-label, .form-check-input[disabled]~.form-check-label
{
  opacity: 0.15;
}
.form-check-input:disabled{
  opacity:0.15;
}
.form-check-input{
  border:var(--tblr-border-width) var(--tblr-border-style) rgba(4, 32, 69, 0.5);
}

.loading_status{
  /*display:flex;
  justify-content: center;
  align-items: center;*/
}

.noUi-connect{
  /*background: var(--tblr-border-color);*/
}

.total_loop.badge .icon{
  height:0.8rem;
  width:0.8rem;
  font-size:0.8rem;
}

.text-muted-light{
  --tblr-text-opacity: 0.4;
  color: rgba(var(--tblr-muted-rgb), var(--tblr-text-opacity)) !important;
}

@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
    max-width: 1450px;
  }
}

.breadcrumb-item+.banner_name::before{
  display: none;
}

.breadcrumb-item+.banner_name.breadcrumb_active::before{
  display: block;
}

.breadcrumb-item+.banner_name{
  padding-left: 0;
}

.breadcrumb-item+.banner_name.breadcrumb_active{
  padding-left: var(--tblr-breadcrumb-item-padding-x);
}

.flowchart ol, ul{
  padding-left:0;
}

.flowchart{
  position: relative;
  /*border: solid 1px var(--tblr-border-color);*/
  height:100%;
  min-height: 70vh;
  min-width: 105vw;
  /* LINES*/
  
  /*DOTS
  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
  background-size: 16px 16px;*/
  z-index:2;
  /*display: flex;
  align-items: flex-start;
  justify-content: center;*/
  padding:70px;
  display: flex;
  align-items: center;
  justify-content: center;
  width:max-content
}

.flowchart_list{
  max-width:300px;
  position: fixed;
  top:200px;
  /*left:65px;*/
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
}

.flowchart_list.collapsed{
  max-width:55px;
}

.flowchart_list.collapsed .navbar{
  overflow:hidden;
}

.flowchart_list.collapsed .list_actions{
  left:60px;
}

.flowchart_list .list_actions{
  position: absolute;
  left:305px;
}

.group_name .badge{
  position:relative !important;
  top:0 !important;
  left:0 !important;
  transform: none !important;
}

.flowchart_list .layer_name{
  font-size:0.9em;
  line-height: 1.2em;
}

.flowchart_list .list-group-item {
  padding: 1em 0.8em 1em 0.2em;
}

.flowchart_list .navbar-vertical.navbar-expand-lg{
  width: 100%;
  position:relative;
}

.flowchart_list .navbar-expand-lg.navbar-vertical{
  box-shadow: none;
}

.flowchart_list .layer_name_text{
  max-width:75%;
}

.bg-lines{
  background-image: linear-gradient(to right, #80808012 1px, transparent 1px),
    linear-gradient(to bottom, #80808012 1px, transparent 1px);
  background-size: 24px 24px;
}

.main_header{
  /*z-index:5;*/
  position:relative;
}

.flowchart .main-card{
  width:350px;
  display: inline-block;
  border-color: #868686;
  margin-left:5px;
  margin-right:5px;
  transition: all .2s ease-in-out;
  position:relative;
  top:0px;
}

.tree_group{
  min-width:350px;
}

.tree_group .accordion-button, .tree_group .accordion-collapse{
  /*background-color: var(--tblr-purple-lt);*/
}

.accordion-body{
  background-color: var(--tblr-light);
}

.flowchart .card.active{
  border:solid 3px var(--tblr-green);
  background-color: var(--tblr-green-lt);
}

.flowchart .card .badge-notification{
  width:0.7rem;
  height: 0.7rem;;
}

.flowchart .card.primary:hover{
  border-color: var(--tblr-primary);
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);
  top:-6px;
}

.flowchart .card.purple:hover{
  border-color: var(--tblr-purple);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.20);
  top:-6px;
}
.tree ul {
	padding-top: 20px; position: relative;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

.tree li {
	float: left; text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

#main_tree li:first-of-type::before{
  display: none !important;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
	content: '';
	position: absolute; top: 0; right: 50%;
	border-top: 1px solid var(--tblr-purple);
	width: 50%; height: 20px;
}
.tree li::after{
	right: auto; left: 50%;
	border-left: 1px solid var(--tblr-purple);
}

.tree .card-title{
  word-break: break-all;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
	display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
	border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
	border-right: 1px solid var(--tblr-purple);
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
	content: '';
	position: absolute; top: 0; left: 50%;
	border-left: 1px solid var(--tblr-purple);
	width: 0; height: 20px;
}

.tree li a{
	
}


.overflow-h{
  overflow:hidden;
}

.flowchart .card-title{
  font-size: 0.8rem;
  line-height: 1.0rem;
}

.page-header{
  z-index:5;
}

.accordion-button{
  padding: 0.7rem 1rem;
  font-size:1rem;
}

.accordion-button:not(.collapsed){
  
}

.screenshot_marker_icon{
  position: absolute;
  top:-15px;
  left:0;
  margin-left:-10px;
  margin-right:-10px;
}

.versions_amount{
  top: 1rem !important;
  right: -0.225rem !important;
}

.is-variation{
  /*border-color: var(--tblr-purple);
  color: var(--tblr-purple);*/
}

.is-variation{
  display: inline-block;
  width: .7rem;
  height: .7rem;
  min-width: 0;
  min-height: auto;
  padding: 0;
  border-radius: 100rem !important;
  vertical-align: baseline;
  background-color: var(--tblr-purple);
  border:solid 3px var(--tblr-purple);
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  z-index: 50;
  cursor: pointer;
  display:none;
}

.is-variation.show{
  display: inline-block;
}

.is-variation.checkbox{
  right: 9px;
}

.is-variation.left{
  position:relative;
  left: 0px;
  right: auto;
}

.dropdown-menu-variation{
  z-index: 1000;
}

.is-variation:hover{
  background-color: #ffffff;
}

.is-variation.form-check-input:checked, .is-variation .form-check-input:checked{
  /*color: var(--tblr-purple);
  background-color: var(--tblr-purple);*/
}

.is-variation.form-selectgroup-input:checked+.form-selectgroup-label{
  /*color: var(--tblr-purple);
  border-color: var(--tblr-purple);*/
}

.zindex-60{
  z-index: 60;
}


.timescale_container{
  position: relative;
  background: #b0b0b0;
  width: 100%;
  height: 52px;
  padding-left:0px;
  border-radius: 5px;
}

.timescale_block{
  top: 0;
  position: absolute;
  width: 250px;
  height: 52px;
  margin: 0 auto;
  background-image: linear-gradient(45deg, #54ffd1 12.50%, #ffffff 12.50%, #ffffff 50%, #54ffd1 50%, #54ffd1 62.50%, #ffffff 62.50%, #ffffff 100%);
  background-size: 11.31px 11.31px;
  border:solid 2px #54ffd1;
  box-sizing: border-box;
  border-radius: 5px;
}

.timescale_block.master{
  background-image: linear-gradient(45deg, #9bc5ed 12.50%, #e6f0fa 12.50%, #e6f0fa 50%, #9bc5ed 50%, #9bc5ed 62.50%, #e6f0fa 62.50%, #e6f0fa 100%);
  border:solid 2px rgba(var(--tblr-primary-rgb), 1);
}

.timescale_block.variation{
  background-image: linear-gradient(45deg, #dfb2e9 12.50%, #f7ebf9 12.50%, #f7ebf9 50%, #dfb2e9 50%, #dfb2e9 62.50%, #f7ebf9 62.50%, #f7ebf9 100%);
  border:solid 2px rgba(var(--tblr-purple-rgb), 1);
}


.timescale_handle{
  position: absolute;
  top: -2px;
  left:-3px;
  width: 10px;
  height: 52px;
  background-color: #54ffd1;
  cursor: ew-resize !important;
  opacity: 0.5;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.timescale_handle.master{
  background-color: var(--tblr-primary);
}
.timescale_handle.variation{
  background-color: var(--tblr-purple);
}

.timescale_handle &.left{
  transform-origin: left center;
}

.bg-timescale{
  --tblr-bg-opacity: 0.6;
  background-color: rgba(var(--tblr-dark-rgb), var(--tblr-bg-opacity)) !important;
}

#editTimescale svg{
  margin:0;
}

.handle_data{
  position: relative;
  left:14px;
  font-size: 0.85rem;
  font-weight: 500;
}

.dropdown-toggle:after{
  transform: rotate(-135deg);
}

.dropdown-toggle.show:after{
  transform: rotate(-45deg);
}

.flowchart_list .dropdown-toggle{
  /*background-color: rgba(var(--tblr-primary-rgb), 0.05);*/
}

.flowchart_list .navbar-vertical{
  overflow-y: auto;
}

#motionPath_container{
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;
}

.motion-path-helper{
  /*z-index: 9999 !important;*/
}

.transition.showTemp{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: scale(1) translate(0px, 0px) rotate(0deg) !important;
  top: 0px !important;
  left: 0px !important;
}

.copy-motion-path{
  display: none;
}

/*.accordion-item:not(:first-of-type){
  border-top: solid 1px var(--tblr-border-color);
}*/

/*.legal{
  position: absolute;
  bottom:-100%;
  left:0%;
  width: 100%;
  height: auto;
  font-size:12px;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  padding:10px;
  background-color: #e1e1e1;
  z-index:9998;
}

.legal_btn{
  position: absolute;
  bottom:0;
  right:0;
  padding:3px 8px;
  font-size:12px;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #e1e1e1;
  z-index:9999;
  cursor: pointer;
}
*/

/*=== LEGAL | debut ============================*/
.legal-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.4);
  opacity: 0;
  cursor: pointer;
  z-index: 999;
  -webkit-transform: translate3d(-1px,100%,0);
  -webkit-transition: opacity .5s ease;
  -moz-transition:    opacity .5s ease;
  -o-transition:      opacity .5s ease;
  -ms-transition:     opacity .5s ease;
  transition:         opacity .5s ease;
  visibility:hidden
}
.legal-bg.legal-active {
  opacity: 1;
  -webkit-transform: translate3d(-1px,0,0);
  -webkit-transition: opacity .5s ease;
  -moz-transition:    opacity .5s ease;
  -o-transition:      opacity .5s ease;
  -ms-transition:     opacity .5s ease;
  transition:         opacity .5s ease;
  visibility:visible;
}
.legal {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: auto;
  font-family: helvetica, arial, sans-serif;
  color: #707070;
  z-index: 999;
  -webkit-transform: translate3d(0,0,0);
  -webkit-transition: -webkit-transform .5s ease;
}
.legal.legal-active {
  -webkit-transform: translate3d(0,-100%,0);
}
.legal-btn {
  position: absolute;
  top: -22px;
  left: 0;
  height: 25px;
  background: #f0f0f0;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  padding-top:2px;
  padding-left:6px;
  padding-right:6px;
}
.legal-btn.right{
  right: 0;
  left: auto;
}
.legal-text {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  max-height: 300px;
  background: #f0f0f0;
  font-size: 10px;
  line-height:11px;
  text-align: justify;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 8px;
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  color: #707070;
}

.banner.size_300x250 .legal-text{
  max-height: 210px;
}
/*=== LEGAL | fin ============================*/

.offcanvas .form-imagecheck-image{
  max-width: 150px;
}

.offcanvas.offcanvas-top{
  min-height: 375px;
}

#featureBackground {
  height: 100%;
  overflow: hidden;
  position: absolute;
  width: 100%;
  top:0px;
  left: 0px;
}

.dot {
  position: absolute;
  background-color: #91e600;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  will-change: transform;
}

.snowflake {
  width: 10px;
  height: 10px;
  background-color: rgb(0, 0, 0);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.prod_layer.is_morph_path .layer_name_text, .layer_is_morph{
  opacity:0.3;
}

.accordion-item:not(.d-none):not(:first-of-type){
  border-top: var(--tblr-accordion-border-width) solid var(--tblr-accordion-border-color);
}

.is-removed{
  background-color: var(--tblr-danger-lt);
}

.is-removed .layer_name_text{
  text-decoration: line-through;
  color: var(--tblr-danger);
}

.is-added{
  background-color: var(--tblr-green-lt);
}
.is-added .layer_name_text{
  color: var(--tblr-green);
}

.avatar{
  --tblr-avatar-size: 4.5rem;
  --tblr-avatar-font-size: 1rem;
}

.load_recent_project:hover{
  text-decoration: none;
}

.hide_for_empty{
  display: none;
}

.form-switch{
  padding-left:3rem;
}

.currentAppVersion{
  font-size: 0.8rem;
  letter-spacing: .04em;
}

.assets_folder .image{
  width: 100%;
  height: auto;
  max-width: 200px;
  max-height: 200px;
  border:var(--tblr-border-width) solid var(--tblr-border-color);
}

.assets_folder .folder{
  width: 100%;
  height: auto;
  max-width: 200px;
  max-height: 200px;
}

.height-fit-content{
  height: fit-content;
}

#offcanvasEndAssets .offcanvas-body{
  flex-grow: initial;
}

.imageUsed{
  position: absolute;
  top:10px;
  right:10px;
}

.cta_bounds{
  position: absolute;
  top:0;
  left:0;
  background-color:rgba(0, 255, 200, 0.5);
  border:solid 2px #a8ffe8;
  width:300px;
  height: 250px;
  z-index:999;
}

.corners{
  display: block;
  position: absolute;
  height: 10px;
  width: 10px;
  background: #00b081;
}

.corners.bottomRight {
  right: 0;
  bottom: 0;
}

.corners.bottomLeft {
  left: 0;
  bottom: 0;
}

.corners.topLeft {
  left: 0;
  top: 0;
}

.corners.topRight {
  right: 0;
  top: 0;
}

.corners.top {
  height: 2px;
  width: 100%;
  background: #00ffbb;
}

.corners.left {
  height: 100%;
  width: 2px;
  background: #00ffbb;
  left: 0;
}

.corners.right {
  height: 100%;
  width: 2px;
  background: #00ffbb;
  right: 0;
}

.corners.bottom {
  height: 2px;
  width: 100%;
  background: #00ffbb;
  bottom: 0;
}

.bounds_actions{
  position: absolute;
  top:10px;
  right:10px;
  z-index: 99999;
}

.bounds_actions svg{
  width: 1.5rem;
  height: 1.5rem;
}

.cta_rect{
  position: absolute;
  top:0;
  left:0;
  width: 300px;
  height: 250px;
  background-color: rgba(0, 255, 200, 0);
  border:solid 2px #a8ffe8;
  z-index: 990;
  opacity: 0;
}

.full .clr-field button {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.dropdown-menu .form-selectgroup-label{
  padding: .7rem 1rem;
}

iframe{
  border:0;
  overflow: hidden;
}


.form-check-input.green:checked{
  background-color:var(--tblr-green);
}

.form-check-input.purple:checked{
  background-color:var(--tblr-purple);
}

.card.selected{
  background-color: var(--tblr-primary-lt);
  border:solid 1px var(--tblr-primary);
}

.card.selected.green{
  background-color: var(--tblr-green-lt);
  border:solid 1px var(--tblr-green);
}

.card.selected.purple{
  background-color: var(--tblr-purple-lt);
  border:solid 1px var(--tblr-purple);
}

.card.selection:not(.selected){
  opacity:0.15;
}

.sticky-offset{
  padding-top:15px;
  backdrop-filter: blur(12px);
  background-color: rgba(var(--tblr-body-bg-rgb), 0.8);
}

.banner_name_preview{
  white-space: nowrap;
  max-width: 185px;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
}

.banner_name_preview:hover{
  overflow: visible;
}
.banner_name_preview:hover::after {
  content: attr(data-fulltext);
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  color: #000;
  border: 1px solid #ccc;
  padding: 5px;
  white-space: normal;
  z-index: 10;
  width: max-content;
  max-width: 400px; /* Optional: Limit tooltip width */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow:visible;
}

.nav-link.disabled-elipsis{
  color: var(--tblr-nav-link-disabled-color);
  cursor: default;
}

.main_controller{
  position: fixed;
  bottom:0;
  width:100%;
  padding:20px 60px;
  background-color:#ffffff;
  transition:all 0.4s ease;
  box-shadow: 0px -5px 20px 0px rgba(0,0,0,0.05);
  z-index:9999;
}
.main_controller.hide{
  bottom:-200px;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
  background-color: var(--tblr-btn-bg);
  border: var(--tblr-btn-border-width) solid var(--tblr-btn-border-color);
  box-shadow: var(--tblr-btn-box-shadow);
}

.visibility_hidden{
  position: absolute;
  top:-5000px;
  left: -5000px;
}

.gif_container{
  width: 100%;
  height: 125px;
  margin-bottom:10px;
  display: flex;
}

.gif_preview{
  width: 100px;
  height: 100px;
  object-fit:cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*justify-content: center;*/
  text-align: center;
  margin-right:10px;
  position: relative;
}

.gif_preview img{
  max-width: 100%;
  max-height: auto;
}

.gif_preview_add{
  width: 100px;
  height: 100px;
  object-fit:cover;
  display: inline-block;
  margin-right:10px;
  border:solid 1px var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
}

.icon-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.icon-item{
  cursor:pointer;
  width: 100px;
  height: 100px;
  object-fit:cover;
  margin-right:10px;
  border:solid 1px var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  position: relative;
  background-color:#ffffff;
}

.icon-item.disabled{
  opacity:0.5;
  pointer-events: none;
}

.icon-item:hover{
  background-color: var(--tblr-primary-lt);
  border:solid 1px var(--tblr-primary);
}

.gif_remove_icon{
  position: absolute;
  top:-10px;
  right:-10px;
  cursor: pointer;
  margin-right: 0;
  background-color:#ffffff;
}

.offcanvas.offcanvas-comments{
  width:400px;
}

.offcanvas-comments .offcanvas-body{
  padding-bottom:175px;
}

.comment_mode{
  cursor: grab;
}

.dropdown-item:hover{
  background-color: var(--tblr-primary-lt);
}

/* PROOFREADING */
.card-comments.proofreading{
  background-color: rgba(var(--tblr-purple-rgb), 0.05);
  color:var(--tblr-purple);
  cursor:pointer;
}

.card-comments.proofreading.completed{
  background-color: rgba(var(--tblr-secondary-rgb), 0.05);
  color:var(--tblr-secondary);
  opacity:0.5;
}

.card-comments.proofreading.completed.highlight{
  background-color: rgba(var(--tblr-secondary-rgb), 0.1);
  border:solid 2px var(--tblr-secondary);
}

.card-comments.proofreading.completed:hover{
  background-color: rgba(var(--tblr-secondary-rgb), 0.1);
}

.card-comments.proofreading.highlight{
  background-color: rgba(var(--tblr-purple-rgb), 0.1);
  border:solid 2px var(--tblr-purple);
}

.card-comments.proofreading:hover{
  background-color: rgba(var(--tblr-purple-rgb), 0.1);
}
/* PROOFREADING */
/* INTERNAL */
.card-comments.internal{
  background-color: rgba(var(--tblr-green-rgb), 0.05);
  color:var(--tblr-green);
  cursor:pointer;
}

.card-comments.internal.completed{
  background-color: rgba(var(--tblr-secondary-rgb), 0.05);
  color:var(--tblr-secondary);
  opacity:0.5;
}

.card-comments.internal.completed.highlight{
  background-color: rgba(var(--tblr-secondary-rgb), 0.1);
  border:solid 2px var(--tblr-secondary);
}

.card-comments.internal.completed:hover{
  background-color: rgba(var(--tblr-secondary-rgb), 0.1);
}

.card-comments.internal.highlight{
  background-color: rgba(var(--tblr-green-rgb), 0.1);
  border:solid 2px var(--tblr-green);
}

.card-comments.internal:hover{
  background-color: rgba(var(--tblr-green-rgb), 0.1);
}
/* INTERNAL */
/* EXTERNAL */
.card-comments.external{
  background-color: rgba(var(--tblr-primary-rgb), 0.05);
  color:var(--tblr-green);
  cursor:pointer;
}

.card-comments.external.completed{
  background-color: rgba(var(--tblr-secondary-rgb), 0.05);
  color:var(--tblr-secondary);
  opacity:0.5;
}

.card-comments.external.completed.highlight{
  background-color: rgba(var(--tblr-secondary-rgb), 0.1);
  border:solid 2px var(--tblr-secondary);
}

.card-comments.external.completed:hover{
  background-color: rgba(var(--tblr-secondary-rgb), 0.1);
}

.card-comments.external.highlight{
  background-color: rgba(var(--tblr-primary-rgb), 0.1);
  border:solid 2px var(--tblr-primary);
}

.card-comments.external:hover{
  background-color: rgba(var(--tblr-primary-rgb), 0.1);
}
/* EXTERNAL */

.comment_icon, .comment_icon_scrub, .comment_icon_new{
  position: absolute;
  cursor: pointer;
  transition: all 0.2s ease-out;
  z-index: 99999;
  width:24px;
  height: 24px;;
}

.comment_icon svg, .comment_icon_scrub svg, .comment_icon_new svg{
 /* width: 1.6rem;
  height: 1.6rem;
  font-size: 1.6rem;*/
  width:24px;
  height:24px;
}

.comment_icon:hover, .comment_icon_scrub:hover{
  transform:scale(1.3);
  -moz-transform: scale(1.3);
  -webkit-transform: scale(1.3);
}

.mark_as_done{
  transition:transform 0.2s ease-out;
}

.mark_as_done:hover{
  transform:scale(1.3);
  -moz-transform: scale(1.3);
  -webkit-transform: scale(1.3);
}

.card.move-up{
  /*background-color:rgba(var(--tblr-purple-rgb), 0.5);*/
  border:solid 2px var(--tblr-primary);
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);
  transform:translateY(-10px);
  -moz-transform: translateY(-10px);
  -webkit-transform: translateY(-10px);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  background-color: var(--tblr-primary-lt);
  color: var(--tblr-primary);
  cursor: pointer;
  box-sizing: border-box;
  border-radius: var(--tblr-border-radius);
  margin:-1px;
}

.card.green.move-up{
  border:solid 2px var(--tblr-green);
  background-color: var(--tblr-green-lt);
}

.card.purple.move-up{
  border:solid 2px var(--tblr-purple);
  background-color: var(--tblr-purple-lt);
}

.card_banner.banner{
  
}

.fit-content{
  width: fit-content;
}

.status_pending_opacity{
  opacity:0.3;
}

.comment_tag{
  position: absolute;
  top:50%;
  left:50%;
  display: none;
  z-index:999999;
}

.comment_tag svg{
  width: 1.6rem;
  height: 1.6rem;
  font-size: 1.6rem;
}

.pointer-none{
  pointer-events: none;
}

.comment_tag .card{
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
}

.comment_tag_text .form-check{
  margin-bottom: 0rem;
}

.comment_tag_text .form-switch{
  padding-left: 2.5rem;
}
 

.comment_tag_text{
  width:350px;
}


.driver-popover.driverjs-theme {
  background-color: #fde047;
  color: #000;
}

.empty-img img{
  height:13rem;
}

.driver-popover.driverjs-theme .driver-popover-title {
  font-size: 20px;
}

.driver-popover.driverjs-theme .driver-popover-title,
.driver-popover.driverjs-theme .driver-popover-description,
.driver-popover.driverjs-theme .driver-popover-progress-text {
  color: #000;
}

.driver-popover.driverjs-theme button {
  flex: 1;
  text-align: center;
  background-color: #000 !important;
  color: #ffffff;
  border: 2px solid #000;
  text-shadow: none;
  font-size: 14px;
  padding: 5px 8px;
  border-radius: 6px;
}

.driver-popover.driverjs-theme button:hover {
  background-color: #000;
  color: #ffffff;
}

.driver-popover.driverjs-theme .driver-popover-navigation-btns {
  justify-content: space-between;
  gap: 3px;
}

.driver-popover.driverjs-theme .driver-popover-close-btn {
  color: #9b9b9b;
}

.driver-popover.driverjs-theme .driver-popover-close-btn:hover {
  color: #000;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
  border-left-color: #fde047;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
  border-right-color: #fde047;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
  border-top-color: #fde047;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
  border-bottom-color: #fde047;
}