:root {
	
  --main-bg-color: #151616;
  --main-primary-color: #ffffff; 
  --main-accent-color: #0d9834;
  --main-bright-accent:#00ff48;
  --main-accent-hover-color: #078a2c;
  --main-font-family: -apple-system,BlinkMacSystemFont,"San Francisco","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  
  
  --main-update-color: #00ff48;
  --main-delete-color: #ff004a;
  --main-share-color: #00c7ff;
  --main-orange-color:#ffc600;
  --main-error-color: #ff004a;
  --main-purple-color:#8b00ff;
  
  --main-max-width:1250px;
  --main-max-width-player:950px;
  --mobile-paddings:15px;
  --main-website-font:-apple-system,BlinkMacSystemFont,"San Francisco","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
/* "Inter", */
body {
	
	margin: 0px auto;
	background:  var(--main-bg-color);
	color:  var(--main-primary-color);
	font-family: var(--main-font-family);
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
}

.drag-drop-builder {
	
}

input, textarea, select {
	
	font-family: var(--main-font-family);
	outline-color: var(--main-bright-accent);
	text-size-adjust: 100%;
	-webkit-text-size-adjust:100%;
	font-size: 16px !important;
}

.drag-drop-builder input, 
.drag-drop-builder textarea, 
.drag-drop-builder select {
  font-family: var(--main-website-font);
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {

/*
	input, textarea {
		
		font-size: 16px !important;
	}
*/
}

textarea {
	
	resize: vertical;
}

.iframe-textarea {
	
	min-height: 144px;
}

.main-app {
	
	display: none;
}

.app-section {
	
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 56px;
	height: calc(100% - 56px);
	width: 100%;
	background: var(--header-bg-color);
	overflow:hidden;
}

.app-loader {
	
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0px;
	left: 0px;
	flex-direction: column;
	gap:10px;
	color: gray;
}


.ripple {

	position: relative;
	overflow: hidden;
	transition: transform 300ms;
}

.ripple::before {
	content: "";
	position: absolute;
	background-color: rgba(0,0,0,.1);
	width: 10%;
	height: 25%;
	border-radius: 20%;
	z-index: 1;
	top: 35%;
	left: 45%;
	-webkit-transform: scale(0);
	transform: scale(0);
	pointer-events: none;
}

.ripple:hover::before {
	-webkit-transform: scale(12);
	transform: scale(12);
	-webkit-transition: border-radius .5s .5s,-webkit-transform .5s;
	transition: border-radius .5s .5s,-webkit-transform .5s;
	transition: transform .5s,border-radius .5s .5s;
	transition: transform .5s,border-radius .5s .5s,-webkit-transform .5s;;
}

.ripple:hover::after {
	
	content: "";
	position: absolute;
	z-index: 2;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.ripple:active {
	
	-webkit-transform: scale(0.95);
}

.rippleCard {

	position: relative;
	overflow: hidden;
	transition: transform 300ms;
}

.rippleCard::before {
	content: "";
	position: absolute;
	background-color: rgba(0,0,0,.1);
	width: 10%;
	height: 25%;
	border-radius: 20%;
	z-index: 1;
	top: 35%;
	left: 45%;
	-webkit-transform: scale(0);
	transform: scale(0);
	pointer-events: none;
}

.rippleCard:hover::before {
	-webkit-transform: scale(12);
	transform: scale(12);
	-webkit-transition: border-radius .5s .5s,-webkit-transform .5s;
	transition: border-radius .5s .5s,-webkit-transform .5s;
	transition: transform .5s,border-radius .5s .5s;
	transition: transform .5s,border-radius .5s .5s,-webkit-transform .5s;;
}

.rippleCard:hover::after {
	
	content: "";
	position: absolute;
	z-index: 2;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.default-cursor {
	
	cursor: initial !important;
}

.show-cursor {
	
	cursor: pointer !important;
}

p {
	
	margin: 0px;
}

.ql-editor.ql-blank::before {
	
	color: white !important;
}

.ql-color-picker > .ql-picker-options{
	
/* 	display: none !important; */
}

/*
.ql-toolbar.ql-snow {
	
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap:10px;
}
*/

.ql-container {
	
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;	
}

::-webkit-calendar-picker-indicator {
filter: invert(1);
}

.settings-container {
	
	display: flex;
	flex-direction: column;
	align-items: center;
    justify-content: center;
	padding-left: 15px;
}

.settings-item {
	
	display: flex;
	min-height: 44px;
	border-bottom: 1px solid #222222;
	font-size: 13px;
	color: #ededed;
	width: 100%;
	align-items: center;
	cursor: pointer;
	position: relative;
}

.settings-dropdown {
	
	padding-left: 15px !important;
	background: #222222;
}

.settings-item-icon {
	
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-right: 10px;
}

.settings-item-arrow {
	
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	right: 0px;
	top: 0px;
	height: 100%;
	width: 44px;
}

.select-font-picker,.select-color-picker,.select-dimensions,.select-website-image,.select-page-settings{
	
	display: flex;
    flex-direction: column;
    width: 100%;
    font-size: 13px;
}

.font-item {
	
	border-bottom: 1px solid #222;
	padding: 10px;
	display: flex;
	align-items: center;
	cursor: pointer;
	min-height: 20px;
}

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

.settings-item-collapse {
	
/* 	background: #222; */
/* 	text-indent: 10px; */

}

.settings-collapse-arrow {
	
	position: absolute;
	right: 15px;
}

.color-cell,.website-image-cell {
	
	display: flex;
	align-items: center;
	gap:15px;
	padding-top: 10px;
	padding-bottom: 10px;
	cursor: pointer;
	border-bottom: 1px solid #222222;
	cursor: initial;

}

.image-cell-title {
	
/* 	width: 100%; */
}

.image-cell-holder {
	
	width: 100%;
}

.web-image-file {
	
	width: 100%;
	cursor: pointer;
}

.cell-colors {
	
	display: flex;
	flex-direction: column;
	gap:5px;
	justify-content: center;
}

.color-cell-title {
	
	font-weight: 600;
}

.embed-textarea {
	
	height: 89px;
    min-height: 100px;
    margin-top: 10px;
    max-height: 100px;
    resize: none;
    padding: 15px;
    width: calc(100% - 30px);
    background: #000;
    color: white;
    border: 1px solid gray;
    border-radius: 8px;
}

.register-domain {
	
	background: var(--main-accent-color);
    padding: 15px;
    width: calc(100% - 45px);
    border-radius: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap:8px;

}

.domain-subtext {
	
	font-size: 13px;
	opacity: 0.8;
}

.has-domain {
	
	display: flex;
	flex-direction: column;
	gap:8px;
	justify-content: center;
	width: 100%;
	align-items: flex-start;
	padding-top: 10px;
	padding-bottom: 10px;
}

.refresh-domain {
	
	position: absolute;
    right: 10px;
    padding: 8px;
    width: 20px;
    background: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    background: #333;
}

.existing-domain {
	
	width: 100%;
	display: flex;
	flex-direction: column;
	gap:10px;
}

.domain-site-link {
	
	color: #cacaca;
	border-bottom: 1px solid #222222;
	padding-bottom: 10px;
}

.image-cell-select {
	
	height: 40px;
	font-size: 14px;
}

.page-settings {
	
	color: white;
	padding-left: 30px;
	width: calc(100% - 30px);
}

.page-settings:hover {
	
	background: #181818;
}