@import "https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap";
/* iFrame Blocking */
html {
	display : none;
	overflow-y: hidden;
}
html,
body {
  overflow: auto;
  overflow-x: hidden;
}
body {
  position: relative;
  font-family: "Poppins", sans-serif;
}
/* General */
:root {
  --primary: #1EA1A1;
  --primarylight: #f6f9fb;
  --secondary: #f7fbfb;
  --navy: #2A0944;
  --red: #D32F2F;
  --green: #388E3C;
  --white: #ffffff;
  --black: #333333;
  --blue: #1976D2;
  --gray: #dddddd;
  --graydark: #444444;
  --graymid: #B2B1B9;
  --hover: #c3e1e1;
  --graylight: #f1f5f9;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
	color: var(--primary)!important;
}
h1 {
	color: var(--navy);
}
h2:not(#editor h2),
h3:not(#editor h3),
h4:not(#editor h4),
h5:not(#editor h5),
h6:not(#editor h6) {
	margin-bottom: 15px;
	font-size: 16px;
	font-weight: normal;
	color: var(--navy);
}
textarea {
	padding: 10px;
	width: 100%;
	resize: none;
	font-family: Helvetica, sans-serif;
	font-size: 16px;
	line-height: 25px;
	color: var(--navy);
	border: 1px solid var(--hover);
	border-radius: 5px;
}
#qna-inputs,
#clipboardtextarea,
#copy-info {
	display: none;
}
#copy-info.on,
#qna-inputs.on {
	display: block;
}
#unsafe-info {
	padding: 20px;
	color: red;
	border: 1px solid var(--hover);
	border-radius: 5px;
}
#copy-info.on {
	z-index: 99999;
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 250px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background: var(--navy);
	color: var(--white);
	font-size: 16px;
	border-radius: 5px;	
}
#qna-inputs input {
	margin-top: 10px;
	margin-bottom: 25px;
	padding: 15px 10px 15px 10px;
	width: 100%;
	font-family: Helvetica, sans-serif;
	font-size: 16px;
	color: var(--navy);
	border: 1px solid var(--hover);
	border-radius: 5px;
}
#qna-inputs label {
	color: var(--navy);
}
textarea:focus,
.aioutput:focus,
#qna-inputs input:focus {
	outline: none;
	border: 1px solid var(--primary);	
}
#usertitle {
	height: 50px;
}
#userprompt {
	height: 140px;
}
#save-content-wrap,
#open-editor,
.app-input,
.overlay {
	display: none;
}
.primary {
	color: var(--primary)!important;
}
.selected {
	color: var(--white)!important;
	background: var(--primary)!important;
}
.selected i {
	color: var(--white)!important;
}
.o-hidden {
	overflow: hidden!important;
}
.text-danger {
	color: var(--red);
}
.fs-24 {
	font-size: 24px!important;
}
.pt-20 {
	padding-top: 20px;
}
.float-left {
	float: left!important;
}
.float-right {
	float: right!important;
}
.clear {
	clear: both;
}
.w-48 {
	width: 48%!important;
}
.mt-20 {
	margin-top: 20px!important;
}
.mb-20 {
	margin-bottom: 20px!important;
}
.mb-30 {
	margin-bottom: 30px!important;
}
.eq-height-120 {
	height: 120px!important;
}
.eq-height-wrap {
	display: table; 
	width: 100%;
}
.eq-height-div {
	display: table-cell;
}
/* Main SiDEBAR */
.menu,
.sidebar {
  position: fixed;
  top: 0;
  height: 100%;
  padding: 6px 14px;
  z-index: 99;
  transition: all 0.5s ease;
}
.menu {
  overflow: hidden;
  left: 0;
  width: 20%;
  background: var(--primarylight);
  border-right: 1px solid var(--gray);
}
.sidebar {
  right: 0;
  padding: 0px;
  width: 20px;
  background: var(--white);
  border-left: 1px solid var(--gray);
  border-right: 1px solid var(--gray);
}
.sidebar.open {
  width: 40%;
}
#mob-menu-btn {
	display: none;
}
.nav-wrap {
	overflow-y: auto;
	padding-bottom: 5%;
	width: 110%;
	max-height: 85vh;
}
.nav-list:not(.nav-list.docbtn) {
	padding-right: 5%;
}
.nav-list.docbtn {
	margin-top: 15px;
	width: 100%;
}
.nav-list li {
	display: block;
	padding: 5px;
	padding-left: 10px!important;
	font-size: 14px;
	color: var(--navy);
	border-radius: 5px;
	cursor: pointer;
}
.nav-list li.on {
	background: var(--gray);
}
.nav-list li span {
	margin-left: 10px;
}
.nav-list li:hover:not(.main-tools) {
	background: var(--hover);
}
.main-tools {
	padding-top: 5px;
	padding-bottom: 5px;
	font-weight: normal;
	font-size: 14px;
	color: var(--navy);
	border-radius: 0px!important;
	cursor: pointer!important;
}
.main-tools i {
	margin-right: 10px;
	height: 30px;
	width: 30px;
	line-height: 30px;
	text-align: center;
	color: var(--primary);
	background: var(--hover);
	border-radius:50%;
}
#main {
	width: 60%;
	background: #ffffff;
	transition: all 0.5s ease;
}
.page-content {
	position: relative;
	margin-left: 31.5%;
	padding: 30px;
	padding-top: 70px;
	width: 70%;
}
#title-wrap {
	z-index: 2;
	position: fixed;
	top: 0;
	left: 0;
	margin-left: 20%;
	padding-left: 20px;
	width: 100%;
	height: 41px;
	line-height: 41px;
	font-size: 10px;
	background: var(--white);
	border-bottom: 1px solid var(--gray);
}
.submit {
	margin-top: 10px;
	padding: 15px;
	width: 100%;
	font-size: 14px;
	font-weight: bold;
	background: var(--navy);
	color: var(--white);
	border: none;
	border-radius: 5px;
	cursor: pointer;
}
.submit:hover {
	opacity: 0.9;
}
#footer {
	clear: both;
	margin-top: 50px;
	padding: 20px 0px;
	color: var(--navy);
	text-align: center;
}
/* Files and Admin Panel */
#documents {
	margin-top: -10px;
	margin-bottom: 10px;
	background: var(--primary);
	color: var(--white);
	cursor: pointer;
}
#documents i {
	color: var(--white);
}
.main-hidden {
	display: none!important;
}
#files-wrap {
	overflow: auto;
	z-index: 9999999;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fafafa;
}
#dashboard {
	float: left;
	margin: 0 auto;
	padding: 20px;
	width: 25%;
	height: 100vh;
	background: var(--primarylight);
	border-right: solid 1px var(--gray);
}
#dash-menu {
	margin-top: 30px;
}
#dash-menu a {
	display: block;
	margin: 10px auto;
	padding: 10px;
	font-size: 16px;
	color: var(--navy);
	text-decoration: none;
	border-radius: 10px;	
}
#dash-menu a:hover {
	background: var(--hover);	
}
#dash-menu a i {
	margin-right: 10px;
	color: var(--primary);
}
#dash-menu .nav-list {
	width: 100%;
}
.all-doc {
	padding: 10px!important;
	font-size: 16px!important;
	background: var(--primary);
	color: var(--white)!important;
	border-radius: 10px;
	cursor: default!important;
}
.all-doc:hover {
	background: var(--primary)!important;
}
.all-doc i {
	color: var(--white);
}
.grid {
	float: right;
	overflow: auto;
	margin: 0 auto;
	padding: 20px;
	width: 75%;
	height: 100vh;
	text-align: center;
}
.grid.admin {
	text-align: left!important;
}
.grid h2 {
	margin-bottom: 30px;
	padding-bottom: 10px;
	text-align: left;
	border-bottom: solid 1px var(--gray);
}
.grid > .card {
	overflow: hidden;
	position: relative;
	margin: 2%;
	float: left;
	width: 29%;
	height: 170px;
	text-align: left;
	background: #ffffff;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
}
.card > p {
	padding: 10px;
	color: var(--navy);
}
.card > .tools {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 10px;
	width: 100%;
	font-size: 24px;
	background: #ffffff;
	border-top: solid 1px #ccc;
}
.card > .tools i {
	color: var(--graymid);
}
.card > .tools i:hover {
	color: var(--primary);
}
.card form {
	padding: 10px;
}
.card input,
.admin input {
	padding: 10px 10px;
	width: 100%!important;
	font-size: 18px;
	color: var(--navy);
	border: 1px solid var(--hover);
	border-radius: 5px;
}
.admin input.admin-input {
	margin: 10px!important;
	margin-left: 0px!important;
	width: 100%!important;
}
.admin input.admin-submit {
	margin: 10px!important;
	margin-left: 0px!important;
	width: 100%!important;
	color: var(--white)!important;
	background: var(--navy)!important;
	cursor: pointer!important;
}
.card input:focus,
.admin input:focus {
	outline: none;
	border: 1px solid var(--primary);	
}
.admin select {
	margin-bottom: 20px;
	font-size: 14px;
}
#addfile {
	margin-top: 10px;
	color: var(--white);
	background: var(--primary);
	text-align: center;
	cursor: pointer;
}
#addfile:hover {
	opacity: 0.8;
}
.edit-file {
	color: var(--primary);
	margin-top: 5px;
	margin-right: 5%;
	font-size: 24px!important;
	background: none;
	border: none;
	cursor: pointer;
}
/* Accordion */
.accordion {
    display: flex;
    flex-direction: column;
}
.accordion-box {
    margin-bottom: 10px;
}
.accordion-box .nav-list {
    display: none!important;
}
.accordion-box.active .nav-list {
    display: block!important;
	padding-top: 12px;
	padding-bottom: 12px;
	border-bottom: solid 1px var(--gray);
}
.accordion-box.active .usecases {
	background: var(--primary);
	color: var(--white)!important;
	border-radius: 5px!important;
}
.usecases {
    position: relative;
	padding-left: 5px;
}
.usecases:hover {
	background: var(--hover);
}
.usecases::before {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}
.accordion-box.active .usecases::before{
    content: '-';
}	
/* Text highlighted options */
#word-counter p {
	float: right;
	display: inline-block;
	margin-top: 10px;
	padding: 10px;
	color: var(--navy);
}
#textoptions {
	display: none!important;
}
#textoptions.on {
	display: inline-block!important;
}
#textoptions form {
	display: inline-block;
}
#textoptions textarea {
	display: none!important;
}
#textoptions input {
	margin-top: 10px;
	padding: 10px;
	background: var(--white);
	color: var(--primary);
	border: 1px solid var(--hover);
	border-radius: 5px;
	cursor: pointer;
}
#textoptions input:hover {
	background: var(--primary);
	color: var(--white);
}
#rewrite {
	margin-left: 10px!important;
}
#saving-text,
#updating-text {
	display: none!important;
}
#saving-text.on,
#updating-text.on {
	display: inline-block!important;
	margin-left: 20px;
	color: var(--primary);
}
#saving-text.on {
	margin-top: 10px;
}
/* Display all images */
#list-all-images {
	display: none;
}
#list-all-images.on {
	display: block;
}
#form.on {
	display: none;
}
#list-all-images .output-wrap {
	display: inline-block;
	position: relative;
	margin: 0px;
	width: 50%;
}
#list-all-images .aioutput {
	margin: 0px;
	border-radius: 0px;
}
/* Grammarly */
grammarly-editor-plugin {
  --grammarly-default-font-family: Optima, sans-serif;
  --grammarly-interactive-color: var(--primary);
  --grammarly-default-border-radius: 5px;
  --grammarly-card-border-radius: 5px;
}
.grammarly-button {
	z-index: 9999;
	position: fixed;
	right: 20px;
	bottom: 70px;
}

/* Editor */
#editor {
	height: 85vh;
	font-size: 16px;
	color: var(--navy);
}
.ql-picker-label:hover,
.ql-picker-label:hover,
.ql-picker-label.ql-active,
.ql-picker-label.ql-active,
.ql-picker-item:hover,
.ql-picker-item:hover,
.ql-picker-item.ql-selected,
.ql-picker-item.ql-selected {
	color: var(--primary)!important;
}
button:hover .ql-stroke,
button:hover .ql-stroke,
button:focus .ql-stroke,
button:focus .ql-stroke,
button.ql-active .ql-stroke,
button.ql-active .ql-stroke,
button.ql-active .ql-stroke {
	stroke: var(--primary)!important;
}
.ql-toolbar,
#editor {
	border-top: 0px!important;
	border-left: 0px!important;
	border-right: 0px!important;
	border-bottom: 1px solid var(--gray)!important;
}
#word-counter p {
	padding: 10px;
	color: var(--navy);
}
#output {
	display: none;
	margin-top: 30px;
}
#output.off  {
	display: none!important;
}
.aioutput,
#output.on {
	margin-bottom: 30px;
	padding: 20px;
	font-size: 18px;
	line-height: 28px;
	white-space: pre-line;
	color: var(--navy);
	border: 1px solid var(--gray);
	border-radius: 5px;
}
.copy-btn,
.add-btn,
.download-btn {
	margin-top: 10px;
	margin-right: 10px;
	padding: 5px!important;
	font-size: 12px!important;
	background: var(--hover)!important;
	color: var(--navy)!important;
	border-radius: 5px;
	text-decoration: none!important;
	border: 1px solid var(--hover)!important;
	cursor: pointer;
}
.copy-btn:hover,
.add-btn:hover,
.download-btn:hover {
	background: var(--primary)!important;
	color: var(--white)!important;
	border: 1px solid var(--primary)!important;
}
.generating-text {
	margin: 0 auto;
	height: 30px;
	width: 50%;
	color: var(--primary);
	background:
    linear-gradient(currentColor 0 0) calc(0*100%/5) 50%,
    linear-gradient(currentColor 0 0) calc(1*100%/5) 50%,
    linear-gradient(currentColor 0 0) calc(2*100%/5) 50%,
    linear-gradient(currentColor 0 0) calc(3*100%/5) 50%,
    linear-gradient(currentColor 0 0) calc(4*100%/5) 50%,
    linear-gradient(currentColor 0 0) calc(5*100%/5) 50%;
	background-size:calc(100%/6 + 1px) 50%;
	background-repeat: no-repeat;
	animation: w9 1s infinite cubic-bezier(0.5,170,0.5,-170);
}
@keyframes w9 {
    14.28% {background-position: calc(0*100%/5) 51%, calc(1*100%/5) 50%, calc(2*100%/5) 50%, calc(3*100%/5) 50%, calc(4*100%/5) 50%, calc(5*100%/5) 50%}
    28.57% {background-position: calc(0*100%/5) 50%, calc(1*100%/5) 51%, calc(2*100%/5) 50%, calc(3*100%/5) 50%, calc(4*100%/5) 50%, calc(5*100%/5) 50%}
    42.85% {background-position: calc(0*100%/5) 50%, calc(1*100%/5) 50%, calc(2*100%/5) 51%, calc(3*100%/5) 50%, calc(4*100%/5) 50%, calc(5*100%/5) 50%}
    57.14% {background-position: calc(0*100%/5) 50%, calc(1*100%/5) 50%, calc(2*100%/5) 50%, calc(3*100%/5) 51%, calc(4*100%/5) 50%, calc(5*100%/5) 50%}
    71.42% {background-position: calc(0*100%/5) 50%, calc(1*100%/5) 50%, calc(2*100%/5) 50%, calc(3*100%/5) 50%, calc(4*100%/5) 51%, calc(5*100%/5) 50%}
    85.71% {background-position: calc(0*100%/5) 50%, calc(1*100%/5) 50%, calc(2*100%/5) 50%, calc(3*100%/5) 50%, calc(4*100%/5) 50%, calc(5*100%/5) 51%}
}
/* Range Slider */
#language-wrap,
#creativity-wrapper,
#tools-wrapper {
	display: inline-block;
	margin: 20px auto;
	padding: 20px;
	width: 100%;
	color: var(--navy);
	border: 1px solid var(--gray);
	border-radius: 5px;
}
#language-wrap.onimg,
#creativity-wrapper.onimg {
	display: none;
}
#tools-wrapper {
	margin-bottom: 0px!important;
}
#template-wrap {
	display: none;
	float: right;
	width: 48%;
}
#tone-wrap {
	width: 100%;
}
#tone-wrap.tone-wrap-alt {
	float: left;
	width: 48%;
}
#tone-option,
#template-option,
#language-option,
.admin select {
	margin-top: 10px;
	padding: 10px;
	width: 100%;
	color: var(--navy);
	border: 1px solid var(--hover);
	border-radius: 5px;
	outline: none;
}
#set-wordlength {
	margin-top: 20px;
}
#prompt-title {
	margin-bottom: 20px;
}
.prompt-wrap {
	position: relative;
}
#main-prompt.off,
#subheading.off {
	display: none!important;
}
.charlimit {
	position: absolute;
	right: 10px;
	bottom: 10px;
	font-size: 12px;
}
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px f7fbfb;
  background: #c3e1e1;
  border-radius: 50px;
  border: 0px solid #f7fbfb;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 1px #000000;
  border: 0px solid 1EA1A1;
  height: 20px;
  width: 20px;
  border-radius: 50px;
  background: #1EA1A1;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #c3e1e1;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px f7fbfb;
  background: #c3e1e1;
  border-radius: 50px;
  border: 0px solid #f7fbfb;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 1px #000000;
  border: 0px solid 1EA1A1;
  height: 20px;
  width: 20px;
  border-radius: 50px;
  background: #1EA1A1;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #c3e1e1;
  border: 0px solid #f7fbfb;
  border-radius: 100px;
  box-shadow: 0px 0px 0px f7fbfb;
}
input[type=range]::-ms-fill-upper {
  background: #c3e1e1;
  border: 0px solid #f7fbfb;
  border-radius: 100px;
  box-shadow: 0px 0px 0px f7fbfb;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 1px #000000;
  border: 0px solid 1EA1A1;
  height: 20px;
  width: 20px;
  border-radius: 50px;
  background: #1EA1A1;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #c3e1e1;
}
input[type=range]:focus::-ms-fill-upper {
  background: #c3e1e1;
}
@media (max-width: 991.98px) {
	#mob-menu-btn,
	#open-editor {
		z-index: 999999;
		display: block;
		position: fixed;
		text-align: center;
		font-size: 14px;
		color: #ffffff;
		background: var(--primary);
		cursor: pointer;
	}
	#mob-menu-btn {
		top: 5px;
		right: 15px;
		width: 30px;
		height: 30px;
		line-height: 30px;
		border-radius: 3px;
	}
	#open-editor {
		bottom: 5px;
		right: 15px;
		width: 40px;
		height: 40px;
		line-height: 40px;
		border-radius: 50%;
	}
	#mob-menu-btn.hide,
	#open-editor.hide {
		display: none;
	}
	#main {
		width: 100%!important;
	}
	.menu,
	.sidebar {
		display: none;
	}
	.menu.on {
		z-index: 99;
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 85%;
	}
	.sidebar.on {
		z-index: 99;
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}
	.overlay.on {
		z-index: 9;
		position: fixed;
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0, 0.6);
	}
	.page-content {
		margin-left: 0%;
		width: 100%;
	}
	#title-wrap {
		margin-left: 0%;
		padding-left: 20px;
		width: 100%;
	}
	/* Dashboard */
	#dashboard {
		clear: both;
		margin: 0 auto;
		padding: 20px;
		width: 100%;
		height: auto;
		background: var(--primarylight);
		border-bottom: solid 1px var(--gray);
	}
	#dash-menu {
		margin-top: 20px;
	}
	.grid {
		clear: both;
		width: 100%;
		height: auto;
	}
	.grid > .card {
		clear: both;
		margin: 10px auto!important;
		width: 100%;
	}
	.admin input.admin-input,
	.admin input.admin-submit {
		width: 100%!important;
	}
}