/* Top Popup 
.wordgpt-popup {
	max-width: 95%;
}*/
.wordgpt-popup-content {
	margin: 10px;
}

/* Main Content */
.wordgpt-wrap {
	margin-bottom: 1%;
	margin-top: 1%;
}

.wordgpt-main {
	margin: auto;
	margin-bottom: 3% !important;
	width: 98% !important;
	max-width: 98% !important;
	border: 1px solid black;
	padding: 10px;
	padding-bottom: 3% !important;
}
.wordgpt-main-header {
	margin: auto;
	padding: 10px;
	text-align: center;
}
.wordgpt-main-header-brand {
	font-size: 44px !important;
}
.wordgpt-main-card-body {
	text-align: center;
}

/* Main Input Section */
.wordgpt-input-box {
	width: 500px;
	height: 40px;
	padding: 10px;
	font-size: 18px;
	border: 1px solid #ddd;
	border-radius: 24px;
	margin-bottom: 20px;
}
.wordgpt-input-button-generate {
	padding: 10px 20px;
	background-color: #f2f2f2;
	border: 1px solid #f2f2f2;
	border-radius: 12px;
	margin-right: 10px;
	font-size: 18px;
	cursor: pointer;
}
.wordgpt-input-button-options {
	padding: 10px 20px;
	background-color: #f2f2f2;
	border: 1px solid #f2f2f2;
	border-radius: 12px;
	margin-right: 10px;
	font-size: 18px;
	cursor: pointer;
}

/* Options Section */
.wordgpt-input-options {
	margin: auto;
	max-width: 50%;
	margin-top: 5%;
}

/* Special Alert Boxes */
.wordgpt-notice-warning {
    border-left-color: #dba617;
}
.wordgpt-notice-information {
	border-left-color: blue;
	border-left-width: 3px;
}

/* Modal */
.wordgpt-modal {
	text-align: center !important;
}

/* Progress Grid */
.lds-grid {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}
.lds-grid div {
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #272626;
	animation: lds-grid 1.2s linear infinite;
}
.lds-grid div:nth-child(1) {
	top: 8px;
	left: 8px;
	animation-delay: 0s;
}
.lds-grid div:nth-child(2) {
	top: 8px;
	left: 32px;
	animation-delay: -0.4s;
}
.lds-grid div:nth-child(3) {
	top: 8px;
	left: 56px;
	animation-delay: -0.8s;
}
.lds-grid div:nth-child(4) {
	top: 32px;
	left: 8px;
	animation-delay: -0.4s;
}
.lds-grid div:nth-child(5) {
	top: 32px;
	left: 32px;
	animation-delay: -0.8s;
}
.lds-grid div:nth-child(6) {
	top: 32px;
	left: 56px;
	animation-delay: -1.2s;
}
.lds-grid div:nth-child(7) {
	top: 56px;
	left: 8px;
	animation-delay: -0.8s;
}
.lds-grid div:nth-child(8) {
	top: 56px;
	left: 32px;
	animation-delay: -1.2s;
}
.lds-grid div:nth-child(9) {
	top: 56px;
	left: 56px;
	animation-delay: -1.6s;
}
@keyframes lds-grid {
	0%, 100% {
	  opacity: 1;
	}
	50% {
	  opacity: 0.5;
	}
}