/* IMAGE PICKER START  */



.media-picker-overlay {
	
	position: fixed;
	top: 0px;
	width: 100%;
	height: 100%;
	left: 0px;
	background: rgba(0,0,0,0.5);
	z-index: 50;
	align-items: center;
    justify-content: center;
    display: flex;
}

.media-picker-box {
	
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: #111;
	min-width: 950px;
	min-height: 640px;
	border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.asset-editor {
	
	position: absolute;
	width: 100%;
	height:100%;
	left: 0px;
	background: #111;
	display: none;
	z-index: 2;
}

.exit-asset-editor {
	
	display: flex;
    padding: 8px;
    font-size: 17px;
    width: 20px;
    color: #dcdcdc;
    align-items: center;
    margin-right: 15px;
    cursor: pointer;
    justify-content: center;
    border-radius: 8px;
}

.exit-asset-editor:hover {
	
	background: #555;
}

.edit-list-holder{
	

	align-items: center;
	justify-content: flex-start;
	width: 100%;
	padding-left: 8px;
	display: none;
}

.edit-list-btn {
	
	cursor: pointer;
	font-size: 14px;
	border-radius: 8px;
	padding: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--main-bright-accent);
}

.edit-list-btn:hover {
	
	background: #333;
}

.automated-hint-text {
	
	font-size: 13px;
    color: gray;
    margin-left: 15px;
    font-style: italic;
}

.media-picker-header{
	
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #222;
	height: 53px;
}

.media-picker-header-title {
	
	font-size: 15px;
	font-weight: 500;
	padding-left: 15px;
	color: white;
	white-space: pre;
}

.media-picker-header-title2 {
	
	display: none;
}


.media-picker-header-dismiss {
	
	display: flex;
	padding: 8px;
	font-size: 17px;
	width: 20px;
	color: #dcdcdc;
	align-items: center;
	margin-right: 15px;
	cursor: pointer;
	justify-content: center;
	border-radius: 8px;
}

.media-picker-header-dismiss:hover {
	
	background: #555;
	color: white;
}

.media-picker-scroller {
	
	display: flex;
    justify-content: space-between;
    height: calc(100% - 118px);
    position: absolute;
    width: 100%;
    top: 53px;
}

.media-picker-scroller-full {
	
	height:calc(100% - 53px);
	top: 53px
}

.media-picker-section {
	
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow-y: scroll;
	
}

.media-section-header {
	
	border-bottom: 1px solid #2a2a2a;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	gap:15px;
	flex-wrap: wrap;
	position: sticky;
	top:0px;
	z-index: 1;
	background: #111111;
} 


.media-section-search {
	
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 8px;
	border: 1px solid #2a2a2a;
	height: 32px;
}

.media-section-search-active {
	
	border: 1px solid var(--main-accent-color);
}

.media-section-options {
	
	display: flex;
	align-items: center;
	justify-content:flex-end;
}

.media-search-icon,.media-search-dismiss{
	
	display: flex;
	justify-content: center;
	align-items: center;
	width: 44px;
	font-size: 13px;
	cursor: pointer;
}

.media-search-dismiss {
	
	visibility: hidden;
	width: auto;
	padding: 5px;
	border-radius: 5px;
	margin: 5px;
	width: 15px;
}

.media-search-dismiss:hover {
	
	background: #555;
}

.media-search-input {
	
	border: none;
	padding: 0px;
	background: none;
	height: 100%;
	width: 100%;
	outline: none;
	color: white;
	font-size: 15px;
}

.media-section-body {
	
	height: 100%;
/*     overflow-y: scroll; */
    position: relative;
}

.media-body-scroller {
	
	width: 100%;
}

.media-body-scroller-flex  {
	
	display: flex;
	flex-wrap: wrap;
}

.media-picker-panel {
	
	width: 245px;
	min-width: 245px;
	height: 100%;
	border-right: 1px solid #2a2a2a;
	height: 100%;
	overflow-y: auto;
}

.media-picker-footer {
	
	display: flex;
	align-items: center;
	justify-content: flex-end;
	border-top: 1px solid #2a2a2a;
	position: sticky;
    bottom: 0px;
    padding: 15px;
    width:calc(100% - 30px);
    background: #111;
}

.media-picker-action {
	
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 13px;
	padding: 8px;
	color: white;
	border: 1px solid #2a2a2a;
	border-radius: 8px;
	cursor: pointer;
	margin-right: 15px;
	white-space: pre;
}

.media-picker-action:hover {
	
	background: #555;
}

.media-picker-style {
	
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 13px;
	padding: 8px;
	color: white;
	border: 1px solid #2a2a2a;
	border-radius: 8px;
	cursor: pointer;
	margin-right: 15px;
	white-space: pre;
	min-width: 34.38px;
}

.media-picker-style:hover {
	
	background: #555;
}

.media-picker-style-inner {
	
	display: flex;
	gap:8px;
	align-items: center;
}

.done-btn,.album-publish-btn {
	background: var(--main-accent-color);
}

.done-btn:hover {
	
	background:var(--main-accent-hover-color);
}

.album-publish-btn:hover{
	
	background:var(--main-accent-hover-color);
}

.media-picker-title {
	
	font-size: 14px;
	font-weight: 500;
	margin: 15px;
}

.media-item-switch  {
	
	display: flex;
    justify-content: space-between;
    height: 100%;
}

.item-switch  {
	
	display:flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	cursor: pointer;
	color:gray;
}

.item-switch-active {
	
	color: white;
	border-bottom:1px solid var(--main-bright-accent);
}

.media-picker-title-holder {
	
	height: 47px;
	margin: 0px;
}

.media-picker-panel  li  {
	
	padding-left: 15px;
	padding-right: 15px;
}

.disabled-btn {
	
	color: #9f9f9f;
	background: #222 !important;
	cursor: not-allowed !important;
}

.disabled-btn:hover {
	
	background: #222 !important;
	
}

.media-loader,.media-uploader{
	
	width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--main-accent-color);
    font-size: 5px;
}

.media-more-loader{
	
	color: var(--main-bright-accent);
    font-size: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    z-index: 1;
    height: 100%;
    left: 0px;
    pointer-events: none;
}

.media-uploader {
	
	position: absolute;
	top: 0px;
	left: 0px;
}

.no-results-label {
	
	font-size: 13px;
    color: #999999;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    flex-direction: column;
    gap: 15px;
}

.update-no-list {
	
	background: #333;
    color: var(--main-bright-accent);
    padding: 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border:1px solid #555;
}

.media-picker-grid {
	
	padding: 10px;
    width: calc(25% - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
	border-radius: 8px;
	margin: 10px;
	position: relative;
	background: #222;
	height: fit-content;
	flex-direction: column;
}

.media-grid-quarter > .media-picker-grid {
	
	width: calc(20% - 40px);
}

.media-picker-grid:hover {
	
	background: #333;
}
.media-picker-grid:hover > .media-picker-play-holder {
	
	display: flex;
}

.media-picker-grid-page {

	width: calc(100% - 40px) !important;
	flex-direction: row;
	cursor: initial;
}

.media-picker-grid-pointer {
	
	cursor: pointer !important;
}

.media-picker-img {
	
	width:100%;
	aspect-ratio:1;
	object-fit:contain;
	object-position:center center;
}


.media-picker-grid-page > img {
	
	width: 40px;
	height: 40px;
}

.media-grid-title {
	
	color: white;
	font-size: 13px;
	text-align: center;
	overflow: hidden;
	width: 100%;
	margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
    word-wrap:break-word;
    word-break: break-word;
    outline-color: var(--main-bright-accent);
}

.media-grid-bio {
	
	word-wrap:break-word;
	font-size: 13px;
	color: gray;
	text-align: center;
	margin-top: 5px;
	width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
    word-break: break-word;
	
}

.media-grid-check {
	
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 15px;
	cursor: pointer;
	pointer-events: none;
	accent-color:var(--main-bright-accent);
	
}

.media-picker-option {
	
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px;
	background: #777;
	color: white;
	cursor: pointer;
	position: absolute;
	top: 0px;
	right: 0px;
	margin: 8px;
	border-radius: 8px;
	padding-left: 8px;
	padding-right: 8px;
	
}

.media-picker-option:hover {
	
	background: #888;
}

.media-picker-play-holder {

    position: absolute;
    width: 64px;
    align-items: center;
    height: 64px;
    justify-content: center;
    display: none;
 
}

.media-picker-playing-div {
	
	display: flex !important;
}

.media-picker-play-btn {
	
	display: flex;
    align-items: center;
    justify-content: center;
    background: var(--main-accent-color);
    border-radius: 50%;
    font-size: 14px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    position: relative;
}

.media-picker-play-btn:hover {
	
	 background: var(--main-accent-hover-color);
}

.media-picker-play-spinner {
	
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0pc;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--main-accent-color);
    border-radius: 50%;
    font-size: 5px;
    display: none;
}

.media-picker-play-spinner:hover {
	
	 background: var(--main-accent-hover-color);
}


.media-picker-global-play {
	
	width: 100%;
	display: none;
}

.media-picker-grid-active {
	
	background: #333;
}


.image-dropper {
	
	 display: none;
    justify-content: center;
    width: 100%;
    align-items: center;
    background: #111111;
    position: absolute;
    top: 0px;
    height: calc(100% - 64px);
    color: white;
    bottom: 64px;
}

.grip-lines {
	
	padding: 8px;
	width: 20px;
	border-radius: 8px;
	cursor: move;
	cursor: -webkit-grab;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--main-bright-accent);
}

.grip-lines:hover {
	
	background: #444;
}

.media-picker-grid-page  .media-grid-title {
	
	margin-top: 0px;
	text-align: left;
	white-space: pre-wrap;
}

.media-picker-grid-page  .media-grid-bio {
	
	text-align: left;
}

.media-grid-inner {
	
	display: flex;
	align-items: flex-start;
	width: 100%;
}

.media-grid-info-holder {
	
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
}

.edit-page-name-holder {
	
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 15px;
}

.edit-page-btn {
	
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
	padding: 8px;
	width: 20px;
	cursor: pointer;
	font-size: 14px;
	color: #a678ff;
}

.edit-page-btn:hover {
	
	background: #444;
}

.media-picker-grid-page > .media-grid-inner {
	
	padding-left:10px;
}

.media-picker-grid-page > .media-picker-option {
	
	position: relative;
}

.media-picker-grid-page > .media-grid-check {
	
	position: relative;
}

.media-picker-grid-page > .media-picker-play-holder {
	
	left: 10px;
	width: 40px;
	height: 40px;
}

.media-picker-grid-page > .media-picker-play-holder > .media-picker-play-btn{
	
	width: 28px;
	height: 28px;
	font-size: 13px;
}


.media-section-li-active {
	
	background: #222;
	border-right: 2px solid var(--main-bright-accent);
}

.media-section-li-active:hover {
	
	background: #222;
}


.media-section-li:hover {
	
	background: #181818;
}

.media-section-li {
	
	font-size: 13px;
	min-height: 38px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #2a2a2a;
	padding-left: 30px;
	padding-right: 10px;
	cursor: pointer;
}

.media-section-ul {
	
	list-style: none;
    padding: 0px;
    margin: 0px;
    width: 100%;
}

.media-picker-list-btn {
	
	padding: 10px;
    width: calc(25% - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    margin: 10px;
    position: relative;
    background: #222;
    height: auto;
    color: var(--main-bright-accent);
    font-size: 13px;
    flex-wrap: wrap;
}

.media-grid-quarter > .media-picker-list-btn {
	
	width: calc(20% - 40px);
}

.media-collection {
	
	color: white;
}

.media-picker-list-btn:hover{
	
	background: #333;
}


.media-section-collapse {
	
	
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 5px;
	cursor: pointer;
	margin-right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 38px;
	width: 10px;
}

.media-section-collapse:hover{
	
	background: #555;
}


.media-picker-grid-page .media-grid-info-holder {
	
	width:initial;
}

/* IMAGE PICKER END  */


/* NAVIGATION/BLOCK PICKER START  */

.navigation-picker,.block-picker {

    position: absolute;
    width: 300px;
    top: 50px;
    z-index: 100;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #444;
    background: #222;
    display: none;

}

.image-hint-holder {
	
	display: none;
    position: fixed;
    flex-direction: column;
    left: 642px;
    width: 40%;
    background: #333333;
    z-index: 100;
    top: 20%;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow-x: clip;

}

.email-body .image-hint-holder {
	
	top: 10%;
}

.image-hint-img {
	
	width: 100%;
	object-fit:contain;
}

.image-hint-text {
	
	padding: 15px;
    font-size: 13px;
    color: white;
}

.image-hint-header {
	
	display: none;
	height: 50px;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #444444;
}

.image-hint-add {
	
	padding: 8px;
	padding-left: 15px;
    padding-right: 15px;
    margin-right: 15px;
    color: var(--main-bright-accent);
    cursor: pointer;
    background: #444444;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
}

.image-hint-back {

	height: 100%;
	width: 44px;
	display: flex;
	justify-content: center;
	align-items: center;
    cursor: pointer;
}

.block-hint {
	
	display: none;
}

.block-picker-header {
	
	display: flex;
	justify-content: space-between;
	padding-left: 10px;
	padding-right: 10px;
	align-items: center;
	border-bottom: 1px solid #444444;
	height: 44px;
	background: #333333;
	position: sticky;
	top: 0px;
	z-index: 1;
}

.block-picker-title {
	
	font-size: 14px;
	
}

.block-picker-dismiss {
	
	width: 20px;
	padding: 10px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 16px;
}

.navigation-picker {
	
	max-height: 400px;
    overflow-y: auto;
}

.navigation-picker-other {
	
	top: 0px;
	height: 100%;
	border: none;
}

.block-picker {
	
	bottom: 15px;
	min-height: 450px;
	max-height: calc(100% - 56px);
	top: initial;
	position: fixed;
	overflow-y: auto;
    left: 340px;
    border: 1px solid #333;
}

.email-body .block-picker {
	
	top: 56px;
}

.navigation-page {
	
	display: flex;
    padding: 10px;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid #333;
}

.navigation-page:hover {
	
	background: #333;
}

.add-new-page {
	
	background: black;
    color: #a678ff;
    position: sticky;
    bottom: 0px;
}

.add-new-page:hover {
	
  background: #111;
}

.navigation-page-name {
	
	margin-left: 10px;
	word-break: break-word;
	max-width: 80%;
}

.navigation-page-active {
	
	background: #333;
}

.navigation-page-active > i {
	
	color:#a678ff;
}

.navigation-picker-header {
	
	display: flex;
    justify-content: flex-start;
    align-items: center;
    color: white;
    font-size: 14px;
    padding: 5px;
    cursor: pointer;
    background: #333;
}

.picker-header-back {
	
	cursor: pointer;
	padding: 5px;
	border-radius: 8px;
}

.picker-header-back:hover {
	
	background: #444;
}

/* NAVIGATION PICKER END  */


/* COLOR PICKER START  */

.color-picker-parent,.font-picker-parent {
	
	position: absolute;
	background: #000;
	display: flex;
	flex-direction: column;
	padding: 15px;
	border-radius: 8px;
	border:1px solid #333;
	overflow: hidden;
	z-index:10;
	width: 200px;
}

.font-picker-parent {
	display: none;
}

.iconpicker-popover.popover {
	
	position: relative;
	background: #000;
	width: auto;
	display: block;
}

.iconpicker-items {
	background: #000 !important;
}

.iconpicker-item {
	
	background: #222;
	box-shadow: 0 0 0 1px #333 !important;
}

.popover-title {
	
	background: #000 !important;
	border-bottom: 1px solid #222 !important;
}

.iconpicker-search {
	
    background: #333 !important;
    color: white !important;
    border-radius: 8px;
    padding: 0px;
    border: 1px solid #444;
    text-indent: 10px;
    height: 28px;
    width: 100%;
}

.iconpicker-item:hover {
	
	background: #333 !important;
	
}

.color-picker-header{
	
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.color-picker-type-btn {
	
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px;
	border-radius: 8px;
	border:1px solid #333;
	width: 100%;
	margin:8px;
	font-size: 13px;
	cursor: pointer;
}

.color-picker-type-btn:hover {
	
	background: #444;
}

.color-picker-type-btn-active {
	
	background: #444;	
}

.color-picker-body {
	
	display: flex;
	flex-direction: column;
}

.color-picker-row {
	
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: white;
	font-size: 13px;
	gap:15px;
	margin-top: 10px;
	margin-bottom: 10px;
}


.color-picker-wrap {
	
    width: 100%;
    height: 25px;
    border-radius: 3px;
    overflow: hidden;
    background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAQDAwMDAwQDAwQGBAMEBgcFBAQFBwgGBgcGBggKCAkJCQkICgoMDAwMDAoMDA0NDAwRERERERQUFBQUFBQUFBT/2wBDAQQFBQgHCA8KCg8UDg4OFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAoACgDAREAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAUGCP/EACIQAQAABQMFAQAAAAAAAAAAAAAFFUNjgqLB4RESEzVRkf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwDv4AE6K0stgTgAaIAE6K0stgTgAUZra1cATW1q4A9na8WXXu/PgEqu6eQJVd08gnAAowqrjuCiADOgAowqrjuCiAD/2Q==) repeat;
    background-size: 15px;
    border: 1px solid #333;

}

.color-picker-input {
	
	-webkit-appearance: none;
    padding: 0;
    width: 150%;
    height: 150%;
    transform: translate(-10%, -15%);
    border: none;
    background: black;
    border-radius: 8px;
    cursor: pointer;
}

.color-picker-hex-input,.color-picker-opacity-input {
	
    padding: 0;
    border: none;
    width: 100%;
    height: 100%;
    background: none;
    height: 24px;
    border:1px solid #333;
    color: white;
    text-indent: 10px;
    font-size: 12px;
    width: 80px;
    border-radius: 3px;
}

.color-picker-opactiy-holder {
	
	display: flex;
	align-items: center;
	justify-content: center;
}

.color-picker-opacity-range {
	
	height: 3px;
	background: none;
	accent-color:white;
	width: 100%;
	cursor: pointer;
}

/* COLOR PICKER END  */

/* TOOL TIP START */

.tool-tip-parent {
	
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	background: #000;
	border:1px solid #333;
	overflow: hidden;
	top: 30px;
/* 	right: 0px; */
	position: fixed;
	width: 200px;
	z-index: 501;
}

.tool-tip-option {
	
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap:10px;
	color: white;
	font-size: 13px;
	border-bottom: 1px solid #111;
	padding: 8px;
	padding-top: 10px;
	cursor: pointer;
	padding-bottom: 10px;
	
}

.tool-tip-option[tag="email"] {
	
	display: none;
}

.tool-tip-option:hover {
	
	background: #111;
}

.tool-tip-option:last-child {
	
	border-bottom: none;
}

.tool-tip-option-text {
	
	
}

.tool-tip-header {
	
	display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    font-size: 14px;
    border-bottom: 1px solid #111;
}

.tool-tip-subtitle {
	
	font-size: 13px;
	color: gray;
}

/* TOOL TIP END */


/* PRESENTER START */

.present-overlay {
	
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 500;
	overflow-y: auto;
	background: rgba(0,0,0,0.5);
	
}

.present-box {
	
	max-width: 650px;
	background: #222;
	border:1px solid #444;
	border-radius: 8px;
	display: none;
	min-width: 300px;
	margin-top: auto;
    margin-bottom: auto;
    overflow: auto;
    height:auto;
    max-height: 500px;
}


.dialog-box {
	
	display: flex;
	flex-direction: column;
}

.dialog-header-toast{
	
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.dialog-header{
	
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #333;
    position: sticky;
    top: 0px;
    z-index: 1;
    background: #222;
}

.dialog-header-sticky {
	
	position: sticky;
	top: 0px;
	z-index: 1;
	background: #222;	
}

.dialog-header-info {
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 10px;
	margin-left: 15px;
}

.dialog-title {
	
	font-weight: 500;
	font-size: 15px;
}

.dialog-message{
	
	font-size: 13px;
	color: #ffffff;
	margin-top: 3px;
	word-break: break-word;
    white-space: pre-wrap;
    max-width: 300px;
	opacity: 0.7;
}


.dialog-dismiss {
	
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	width: 20px;
	cursor: pointer;
	margin-right: 8px;
	border-radius: 8px;
}

.dialog-dismiss:hover{
	
	background: rgba(0,0,0,0.3);
}

.dialog-body,.dialog-toast-body {
	
	display: flex;
	flex-direction: column;
	padding: 15px;
	gap:10px;
}

.dialog-body {
	
	height: 100%;
}

.dialog-grid {
	
	height: auto;
}

.confirm-dialog {
	
	height: 100%;
}

.dialog-input {
	
	background:none;
    border: 1px solid #333;
    padding: 0px;
    text-indent: 10px;
    height: 44px;
    min-height: 44px;
    border-radius: 8px;
    color: white;
    font-size: 15px;
    outline-color: var(--main-bright-accent);
    position: relative;
}

.dialog-hint {
	
	height: auto;
    font-size: 14px;
    color: gray;
    border: none;
    padding-top: 10px;
    padding-bottom: 10px;
}

.dialog-textarea {
	
	padding: 15px;
	padding-left: 10px;
	padding-right: 10px;
	text-indent: 0px;
	min-height: 50px;
	max-height: 200px;
}

.dialog-file {
	
	padding-top: 15px;
	cursor: pointer;

}

.dialog-file-container {
	
	display: flex;
    flex-direction: column;
    position: relative;
    gap: 10px;
    
}

.dialog-file-img {
	
    width: 100%;
    border-radius: 8px;
    max-height: 200px;
    object-fit: contain;
    background: #000;
    cursor: pointer;
}

.dialog-input::placeholder {
  color: #e4e4e4;
  opacity: 1; /* Firefox */
}

.dialog-input::-ms-input-placeholder { /* Edge 12 -18 */
  color: #e4e4e4;
}

.dialog-toast-body {
	
	padding-top: 0px;
}

.dialog-footer {
	
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 15px;
	gap:10px;
	border-top: 1px solid #333;
	position: sticky;
	bottom: 0px;
	background: #222222;
}

.dialog-btn {
	
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	padding-left: 15px;
	padding-right: 15px;
	border-radius: 8px;
	font-size: 14px;
	border:1px solid #333;
	cursor: pointer;
}

.full-dialog-btn {
	
	width: 100%;
}

.dialog-btn:hover {
	
	background: #333;
}

.dialog-btn-confirm {
	
	border:1px solid  var(--main-accent-color);
	background: var(--main-accent-color);
}

.dialog-btn-confirm:hover {
	
	background: var(--main-accent-hover-color);
}

.present-toast {
	
	position: fixed;
    z-index: 502;
    display: flex;
    align-items: center;
    justify-content: center;
    left: calc(50% - 150px);
    bottom: -100px;
}

.present-toast-box {
	
	background: #222;
    width: 300px;
    border-radius: 8px;
    border: 1px solid #444;
    overflow: hidden;
}

.toast-dialog {
	
	display: flex;
    flex-direction: column;
}

.toast-dialog-title {
	
	color:#ffffff;
	font-size: 15px;
	font-weight: 500;	
}

.dialog-load {
	
	font-size: 5px;
    color: var(--main-bright-accent);
    text-align: center;
    margin-top: 15px;
}

/* PRESENTER END */


/* // ALBUM UPLOADER START  */


.album-creator {
	
	display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    gap: 15px;
    overflow-y: auto;
    position: absolute;
    top: 53px;
    height: calc(100% - 148px);
    width:calc(100% - 30px);

}

.album-scroller {
	
	gap: 15px;
    display: flex;
    flex-direction: column;
    width: 300px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 15px;
}

.upload-album-holder{
	
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	border-radius: 8px;
	overflow: hidden;
	border:1px solid #333;
	position: relative;
}

.upload-album-file {
	
	position:absolute;
	top: 0px;
	width: 100%;
	height: 100%;
	left: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0,0,0,0.5);
	cursor: pointer;
	font-size: 14px;
}

.upload-album-file:hover {
	
	background: rgba(0,0,0,0.7);
}

.upload-album-img{
	
	aspect-ratio:1;
	object-fit:cover;
	width: 100%;
	height: 100%;
}

.album-upload-select {
	
	background: #333;
	border:1px solid #444;
	color: white;
	font-size: 14px;
	border-radius: 8px;
	width: 100%;
	height:34px;
	outline-color: var(--main-bright-accent);
	cursor: pointer;
	text-indent: 5px;
}

.upload-album-input{
	
	background: #333;
	border:1px solid #444;
	color: white;
	font-size: 14px;
	border-radius: 8px;
	width: 100%;
	max-width: 300px;
	height:34px;
	padding: 0px;
	text-indent: 10px;
	outline-color: var(--main-bright-accent);
}

.upload-album-btn {
	
	background: #333;
	border:1px solid #444;
	color: white;
	font-size: 14px;
	border-radius: 8px;
	width: calc(100% - 20px);
	height:34px;
	padding-left: 10px;
	padding-right: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}

.upload-album-btn:hover{
	
	background: #444;
}



.upload-album-btn-update {
	
	color: var(--main-bright-accent);
}

.upload-album-btn-active {
	
	color: white;
	background: var(--main-accent-color);
	
}

.upload-album-btn-active:hover {
	
	background:var(--main-accent-hover-color);
}

.upload-album-textarea {
	
	background: #333;
	border:1px solid #444;
	color: white;
	font-size: 14px;
	border-radius: 8px;
	width:calc(100% - 20px);
	height:34px;
	padding: 0px;
	resize: vertical;
	padding: 10px;
	outline-color: var(--main-bright-accent);
}

.upload-album-placeholder::placeholder {
  color: #e4e4e4;
  opacity: 1; /* Firefox */
}

.upload-album-placeholder::-ms-input-placeholder { /* Edge 12 -18 */
  color: #e4e4e4;
}

.asset-editor-title {
	
	width: 100%;
	display: flex;
	align-items: center;
	font-size: 15px;
	justify-content: flex-start;
	font-weight: 500;
	padding-left: 15px;
}

.condition-holder {
	
	display: flex;
    flex-direction: column;
    width: 100%;
    gap:5px;
    margin-top: 15px;
}

.condition-title {
	
	font-size: 14px;
}

.condition-sub {
	
	display: flex;
    gap: 15px;
    align-items: center;
}

.condition-sub-text {
	
	font-size: 13px;
    color: gray;
}

.condition-item {
	
	font-size: 13px;
    color: gray;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap:8px;
    height: 34px;
}

.condition-item > input {
	
	cursor: pointer;
	accent-color:var(--main-bright-accent)
	pointer-events: none;
}

.add-condition {
	
	background: #333;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    border:1px solid #555;
    cursor: pointer;
    margin-top: 15px;
    text-align: center;
}

.condition-delete {
	
	color: red;
    width: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    height: 34px;
    min-width: 34px;
    cursor: pointer;
    background: #333;
}

.condition-row {
	
	display: flex;
	gap:10px;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.condition-list {
	
	width: 100%;
	display: flex;
	flex-direction: column;
	gap:15px;
}

.condition-row > select {
	
	width: 100%;
	color: white;
	padding: 0px;
	height: 38px;
	background: none;
	border:1px solid gray;
	font-size: 13px;
	border-radius: 8px;
	text-indent: 8px;
}

.condition-row > input {
	
	width: 100%;
	padding: 0px;
	height: 38px;
	background: none;
	border:1px solid gray;
	color: white;
	font-size: 13px;
	border-radius: 8px;
	text-indent: 10px;
}

.condition-picker {
	
	display: flex;
    gap: 15px;
    flex-direction: column;
    width: 100%;
}

.radio-click {
	
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100px;
	height: 20px;
	cursor: pointer;
}

.radio-type-row {
	
	display: flex;
    width: 100%;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    position: relative;
}

.radio-type-row input {
	
	pointer-events: none;
	accent-color:var(--main-bright-accent)
}

.radio-type-holder {
	
	display: flex;
	flex-direction: column;
	gap:5px;
}

.radio-subtitle{
	
	font-size: 13px;
	color: gray;
}

.radio-subtitle > a {
	
	color: var(--main-bright-accent);
	text-decoration: underline;
}

/* // ALBUM UPLOADER END */


/* // LICENSE PICKER START */

.access-holder{
	
	display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.access-holder > input {
	
	background: none;
    border: 1px solid gray;
    font-size: 14px;
    padding: 0px;
    height: 38px;
    text-indent: 10px;
    color: white;
    border-radius: 8px;
}

.access-holder > input:focus {
	
	outline: 1px solid var(--main-bright-accent);
}

.access-holder > button {
	
	background: var(--main-accent-color);
    border: 1px solid var(--main-bright-accent);
    font-size: 14px;
    padding: 0px;
    height: 38px;
    color: white;
    border-radius: 8px;
    cursor: pointer;
}

.license-present-box {
	
	min-width: 650px;	
}

.dialog-grid {
	
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap:10px;
}

.license-usage-footer {
	
	display: flex;
	justify-content: flex-end;
	align-items: center;
	border-top: 1px solid #333;
	padding: 10px;
	padding-left: 15px;
	flex-direction: column;
}

.license-usage-body {
	
	display: none;
	margin-top: 15px;
	margin-bottom: 15px;
	width: 100%;
	font-size: 14px;
	color: gray;
}


.license-usage-header {
	
	display: flex;
	justify-content: space-between;
	align-items:center;
	cursor: pointer;
	width: 100%;
}

.usage-terms-text{
	
	font-size: 14px;
}

.usage-terms-arrow{
	
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	width: 20px;
	border-radius: 8px;
}

.usage-terms-arrow:hover {
	
	background: #555;
}

.license-item {
	
	display:flex;
	flex-direction: column;
	justify-content: center;
	border-radius: 8px;
	background: rgba(0,0,0,0.1);
	padding: 10px;
	width:calc(33.334% - 27px);
	cursor: pointer;
}

.license-item-full {
	
	width:calc(100% - 27px);
	flex-direction: row;
    justify-content: flex-start;
    gap: 15px;
    align-items: center;
}

.order-image {
	
	width: 50px;
	height: 50px;
	border-radius: 8px;
	object-fit:cover;
}

.order-action {
	
	display: flex;
	gap:15px;
	margin-top: 15px;
	flex-wrap: wrap;
}

.order-action-btn {
	
	padding: 8px;
	padding-left: 15px;
	padding-right: 15px;
	cursor: pointer;
	background:#222;
	color:white;
	font-size: 13px;
	border-radius: 8px;
}

.order-action-btn-green {
	
	background: var(--main-accent-color);
	color: white;
}

.license-item-active {
	
	outline: 1px solid var(--main-bright-accent);
}

.license-title {
	
	word-break: break-word;
	white-space: pre-wrap;
	font-size: 15px;
	font-weight: 500;
	color: white;
}

.license-price {
	
	font-size: 14px;
	margin-top: 10px;
	color: white;
}

.license-type {
	
	font-size: 13px;
	margin-top: 5px;
	color: #a0a0a0;
}

.dialog-title-large {
	
	font-size: 16px;
}

/* // LICENSE PICKER END */


/*
@media only screen and (max-height: 600px) {
	
	.present-box {
		
		height: 100%;
	}
}
*/


/* STOCK PICKER START  */

.inadot-gallery-overlay {
	
	position: fixed;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 500;
	background: rgba(0,0,0,0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
}

.inadot-gallery-container {
	
	position: sticky;;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.inadot-gallery-header {
	
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	font-size: 20px;
}

.inadot-gallery-header-text {
	
	display: flex;
	justify-content: center;
	align-items: center;
	height: 44px;
/* 	width: 100%; */
}

.inadot-gallery-body { 
	
	min-width: 650px;
	max-height:80%;
	display: flex;
	flex-direction: column;
	background: #111;
	padding: 15px;
	border-radius: 8px;
	width: 800px;
	min-height: 650px;
}

.inadot-gallery-close,.inadot-sorter-close {
	
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	min-width: 44px;
    min-height: 44px;
}

.inadot-gallery-close:hover {
	
	background: #222;
}

.inadot-sorter-close:hover{
	
	background: #222;
}

.inadot-gallery-search {
	
	width: calc(100% - 30px);
	padding: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 30px;
	margin-bottom: 30px;
}

#inadot-gallery-search {
	
	background: #222;
	width: 100%;
	border-radius: 8px;
	border: 1px solid gray;
	height: 38px;
	color: white;
	font-size: 15px;
	text-indent: 10px;
	outline: none;
	
}

#inadot-gallery-search:focus {
	
	outline: 1px solid #1d9cf0;
}

.inadot-gallery-search-btn {
	
	display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 15px;
    padding-right: 15px;
    height: 42px;
    background: var(--main-accent-color);
    margin-left: 15px;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
}

.inadot-gallery-holder {
	

 	column-gap: 0;
	column-count: 3;
	overflow-y: auto;
	
}

.inadot-beat-sorter {
	
	overflow-y: auto;
	
}

.inadot-gallery  {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  break-inside: avoid;
}


.inadot-gallery {
	
	cursor: pointer;
	position: relative;
}

.inadot-gallery-select {
	
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	justify-content: center;
	background: rgba(0,0,0,0.5);
	font-size: 16px;
	top: 0px;
	display: none;
}

.inadot-gallery:hover > .inadot-gallery-select {
	
	display: flex;
}

.inadot-gallery > img {
	
/* 	object-fit:contain; */

	width: 100%;
}


.inadot-gallery-no-results {
	
	color: gray;
	font-size: 14px;
	text-align: center;
}

.inadot-gallery-upload {
	
	border-radius: 8px;
    padding: 15px;
    display: flex;
    background: #1d9cf0;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.inadot-gallery-upload:hover {
	
	background: #0d86d6;
}

@media only screen and (max-height:700px) {
	
	.inadot-gallery-body  {
		
		min-height: 80%;
	}
}


@media only screen and (max-width:900px) {
	
	.inadot-gallery-body  {
		
		min-width: 90%;
	}
	
	.inadot-gallery-body  {
		
		width: 90%;
	}
	
}

/* STOCK PICKER END */

/* PRODUCT PICKER START */

.product-iframe {
	
	position: absolute;
	top: 53px;
	left: 0px;
	width: 100%;
	height: calc(100% - 53px);
	background: #222;
	overflow-y: auto;
	display: none;
    justify-content: center;
    align-items: center;
    border: none;
}

.product-type-holder {

	position: absolute;
	top: 53px;
	left: 0px;
	width: 100%;
	height: calc(100% - 53px);
	background: #222;
	overflow-y: auto;
	display: flex;
    justify-content: center;
    align-items: center;
    gap:15px;
    z-index: 2;
}

.product-icon {
	
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.product-item {
	
	display: flex;
	gap:15px;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	background: #333333;
}

.product-item:hover{
	
	outline: 1px solid var(--main-bright-accent);
}

.product-hint {
	
	font-size: 13px;
	color: gray;
}

.cartOptionHolder {
	
    min-height: 200px;
    padding: 15px;
    gap:15px;
    display: flex;
    max-height: 300px;
    overflow-y: auto;
    position: relative;
    flex-wrap: wrap;
    align-content:flex-start;
}

.cartOption {
	
	width:100%;
	height:44px; 
	color:white; 
	text-indent:10px; 
	font-size:14px; 
	background:#222; 
	border:1px solid var(--main-bright-accent); 
	border-radius:8px; 
	outline:none;
}

.cart-option-title {
	
	font-size: 14px;
}

.variant-selector {
	
	width: 300px;
}

.confirm-variant-btn {
	
	width: 100%;
	height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    color: white;
    background: var(--main-accent-color);
    font-size: 14px;
    cursor: pointer;
    position: sticky;
    bottom: 0px;
    align-self: flex-start;
}

/* PRODUCT PICKER END */


/* VIDEO PREVIEW TOOL START */

.inadot-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.inadot-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
/*     background: #000; */
    max-width: 800px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.inadot-controls {
    width:100%;
    background: #111;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    font-size: 13px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

.inadot-play-pause,
.inadot-dismiss,
.inadot-mute,
.inadot-fullscreen,
.inadot-vid-options {
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inadot-fullscreen,.inadot-vid-options {
    
    width: 34px;
    min-width: 34px;
    height: 100%;
}

.inadot-mute {
    color: white;
    width: 34px;
    min-width: 34px;
    height: 100%;
}

.inadot-play-pause {
    width: 44px;
    min-width: 44px;
    color: var(--main-bright-accent);
    height: 100%;
}

.inadot-seek-container {
    width: 100%;
}

.inadot-duration-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.inadot-volume-container,
.inadot-seek-container,
.inadot-duration-container {
    display: flex;
    align-items: center;
    color: gray;
    height: 100%;
}

.inadot-volume-slider,
.inadot-seek-slider {
    width: 100px;
    margin: 0 10px;
    accent-color: var(--main-bright-accent);
    height: 1px;
    cursor: pointer;
    height: 3px;
}

.inadot-seek-slider::-webkit-slider-thumb,
.inadot-volume-slider::-webkit-slider-thumb {
    visibility: hidden;
}

.inadot-dismiss {
    position: absolute;
    top: 0px;
    right: 0px;
    background: #111;
    height: 40px;
    width: 40px;
    color: white;
    font-size: 18px;
    border-radius: 50%;
    margin-top: -10px;
    margin-right: -10px;
    color: var(--main-bright-accent);
    cursor: pointer;
}

.inadot-loading-indicator {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    color: var(--main-bright-accent);
    font-size: 7px;
    display: none;
}

.inadot-custom-video {
	
	border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    max-height: 640px;
}

/* Context Menu Styles */
.inadot-context-menu {
   
	position: absolute;
    background: #333;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    right: 0px;
    bottom: 40px;
    margin: 10px;
}

.inadot-context-option {
    cursor: pointer;
    padding: 8px;
    transition: background 0.3s;
}

.inadot-context-option:hover {
    background: #555;
}

/* Sub-Menu Styles */
.inadot-sub-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    margin-top: -1px;
    background: #333;
    border: 1px solid #444;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.inadot-sub-menu .inadot-context-option {
    padding: 8px;
}

.inadot-context-option:hover {
    background: #555;
}

.inadot-popup-inline {
	
	position: absolute !important;
	z-index: initial !important;
	background:  none !important;
	top: initial !important;

}

.inadot-popup-inline  .inadot-custom-video {
	
	max-height: 600px;
    height: calc(100% - 40px) !important;
/* 	object-fit:contain !important; */
}


.inadot-popup-inline > .inadot-container {
	
	background: none !important;
	max-width: 100% !important;
	height: 100% !important;
	top: 0px !important;
	left: 0px !important;
	transform: initial !important;
	justify-content: space-evenly !important;

}

.inadot-popup-inline .inadot-controls {

}

.inadot-popup-inline .inadot-dismiss {
	
	display: none !important;	
}


.inadot-popup-inline .inadot-seek-container > span {
	
	display: none !important;
}

.inadot-popup-inline .inadot-volume-slider{
	
	display: none !important;
}




/* VIDEO PREVIEW TOOL END */




/* FONT PICKER TOOL START */

.font-picker {
	list-style: none;
	padding: 8px;
	background-color: #111;
	color: #fff;
	border: 1px solid #333;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	position: absolute;
	z-index: 1000;
}

.font-picker li {
	padding: 5px;
	cursor: pointer;
}

.font-picker .custom-size-input {
	width: 44px;
	padding: 3px;
	margin-top: 5px;
}

/* FONT PICKER TOOL END */


.youtube-popup {
	
	height: 100%;
    position: absolute;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
	
}

.youtube-body {
	
	display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: #222;
    border-radius: 8px;
    min-width: 650px;
    gap:10px;
	
}

.youtube-body > .inadot-dismiss {
	
	position: relative !important;
    margin: 0 !important;
    background: none !important;
}

.no-icon-btn {
	
	display: flex;
    justify-content: center;
    align-items: center;
    background: #333333;
    font-size: 14px;
    border-radius: 8px;
    height: 30px;
    cursor: pointer;
    margin-top: 15px;
}

.custom-tooltip {
	position: absolute;
	z-index: 10;
	padding: 10px;
	padding-top: 15px;
	padding-bottom: 15px;
	background-color: #333;
	color: #fff;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	gap:15px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	max-width: 250px;
}


.custom-tooltip button {
	background-color:var(--main-accent-color);
	color: #fff;
	border: none;
	padding: 8px 16px;
	border-radius: 3px;
	cursor: pointer;
}

.custom-tool-tip-title {
	
	font-weight: 500;
}

.custom-tool-tip-subtitle {
	
	font-size: 14px;
	word-break: break-word;
	white-space: pre-wrap;
}