#smartwrite-chat-modal {
    background: #fff;
}
.smartwrite-main {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-between;
    padding: 0 0 5px 0;
    box-sizing: border-box;
}
.smartwrite-main .view {
    display: flex;
    flex-direction: column;
}

.view.conversation-view {
    display: block;
    flex-grow: 1;
    overflow-y: auto;
}

.message {
    display: flex;
    gap: 20px;
    padding: 10px 60px 15px 60px;
    font-size: 0.95em;
    font-family: 'Oxygen', sans-serif !important;
}

.user.message {
    color: #000;
    font-family: 'Oxygen', sans-serif !important;
    font-size: 1.7em;
}
.user .identity {
    padding-top: 0px;
}

.assistant.message {
    position: relative;
    padding-bottom: 25px;
    color: #000;
    font-family: 'Oxygen', sans-serif !important;
    font-size: 1.7em;
}

.assistant.message .error {
    background-color: rgba(32, 191, 233, 0.3);
    padding: 3px 12px;
    border-radius: 12px;
    border: 1px solid rgba(32, 191, 233, 1.0);
}

#message-form {
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    max-width: 850px;
    text-align: center;
    padding: 0px 45px 0 45px;
}

.message-wrapper {
    position: relative;
    margin-top: 15px;
}

#message::placeholder {
    color: #9ca6b5;
}

#message {
    background: #ffffff;
    border-radius: 13px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(0,0,0,.15);
    resize: none;
    padding: 17px 85px 17px 15px;
    font-family: inherit;
    font-size: 1.5em;
    color: #000;
    box-shadow: rgba(0,0,0,0.2) 0 0 45px;
    outline: none;
    font-family: 'Oxygen', sans-serif !important;
    height: 80px;
}

.disclaimer {
    margin-top: 12px;
    color: #676767;
}

.send-button {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(95,195,25,1.0);
    border-radius: 5px;
    display: inline-block;
    font-size: 2.5em !important;
    padding: 7px 9px 7px 7px;
    color: #FFFFFF;
    border: none;
    margin-top: -2px;
    background-color: #f8a91a;
}

:is(a, button).send-button{
	background-color: #f8a91a;
	background-image: -webkit-linear-gradient(
		top left,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.2) 37%,
		rgba(255, 255, 255, 0.8) 45%,
		rgba(255, 255, 255, 0.0) 50%
	);
	background-image: -moz-linear-gradient(
		0 0,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.2) 37%,
		rgba(255, 255, 255, 0.8) 45%,
		rgba(255, 255, 255, 0.0) 50%
	);    
	background-image: -o-linear-gradient(
		0 0,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.2) 37%,
		rgba(255, 255, 255, 0.8) 45%,
		rgba(255, 255, 255, 0.0) 50%
	);

	background-image: linear-gradient(
		0 0,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.2) 37%,
		rgba(255, 255, 255, 0.8) 45%,
		rgba(255, 255, 255, 0.0) 50%
	);

	background-position: 80% -45px, 0 0;
	background-size: 250% 250%, 100% 100%;
	display: inline-block;
	text-decoration: none;
	text-shadow: var(--default-text-shadow);
	transition: background-position 0s ease;

}

:is(a, button).send-button:hover{
	background-position: 0 0, 0 0;
	transition-duration: 0.5s;
}

i.user-icon {
    padding: 6px;
    color: #fff;
    background: #000;
    display: inline-block;
    text-align: center;
    width: 15px;
    border-radius: 3px;
    margin-right: 6px;
    font-style: normal;
    width: 18px;
    height: 18px;
    font-size: 15px;
    text-transform: uppercase;
}

.gpt.user-icon  {
    background: #20bfe9;
}
.smartwrite-logo {
    position: relative;
    z-index: 1;
    text-align: center;
}
.smartwrite-logo img {
    width: 200px;
    margin-top: 5px;
    margin-bottom: 15px;
}

.useDraftButton {
    position: absolute;
    bottom: 0px;
    right: 7%;
    background-color: #f8a91a;
    color: #ffffff;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    font-family: 'Oxygen', sans-serif !important;
    font-size: 20px !important;
    cursor: pointer;
    transition: background-color 0.3s;
    height: auto;
}

/*
.useDraftButton:hover {
    background-color: #f8a91a;
}

.useDraftButton:active {
    background-color: #f8a91a;
    transform: translateY(2px);
}
*/

:is(a, button).useDraftButton{
	background-color: #f8a91a;
	background-image: -webkit-linear-gradient(
		top left,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.2) 37%,
		rgba(255, 255, 255, 0.8) 45%,
		rgba(255, 255, 255, 0.0) 50%
	);
	background-image: -moz-linear-gradient(
		0 0,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.2) 37%,
		rgba(255, 255, 255, 0.8) 45%,
		rgba(255, 255, 255, 0.0) 50%
	);    
	background-image: -o-linear-gradient(
		0 0,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.2) 37%,
		rgba(255, 255, 255, 0.8) 45%,
		rgba(255, 255, 255, 0.0) 50%
	);

	background-image: linear-gradient(
		0 0,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.2) 37%,
		rgba(255, 255, 255, 0.8) 45%,
		rgba(255, 255, 255, 0.0) 50%
	);

	background-position: 80% -45px, 0 0;
	background-size: 250% 250%, 100% 100%;
	display: inline-block;
	text-decoration: none;
	text-shadow: var(--default-text-shadow);
	transition: background-position 0s ease;

}

:is(a, button).useDraftButton:hover{
	background-position: 0 0, 0 0;
	transition-duration: 0.5s;
}

.clear-chat {
    position: fixed;
    top: 10px;
    left: 10px;
    padding: 10px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
}

.clear-chat:hover {
    background: #d7d7d7;
}

.chat-message {
    border-radius: 10px;
    padding: 5px 15px;
}

#cursor {
position: relative;
left: -9999px;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #20bfe9;
color: #20bfe9;
box-shadow: 9984px 0 0 0 #20bfe9, 9999px 0 0 0 #20bfe9, 10014px 0 0 0 #20bfe9;
animation: dot-typing 1.5s infinite linear;
margin-top: 30px;
}

@keyframes dot-typing {
    0% {
    box-shadow: 9984px 0 0 0 #20bfe9, 9999px 0 0 0 #20bfe9, 10014px 0 0 0 #20bfe9;
    }
    16.667% {
    box-shadow: 9984px -10px 0 0 #20bfe9, 9999px 0 0 0 #20bfe9, 10014px 0 0 0 #20bfe9;
    }
    33.333% {
    box-shadow: 9984px 0 0 0 #20bfe9, 9999px 0 0 0 #20bfe9, 10014px 0 0 0 #20bfe9;
    }
    50% {
    box-shadow: 9984px 0 0 0 #20bfe9, 9999px -10px 0 0 #20bfe9, 10014px 0 0 0 #20bfe9;
    }
    66.667% {
    box-shadow: 9984px 0 0 0 #20bfe9, 9999px 0 0 0 #20bfe9, 10014px 0 0 0 #20bfe9;
    }
    83.333% {
    box-shadow: 9984px 0 0 0 #20bfe9, 9999px 0 0 0 #20bfe9, 10014px -10px 0 0 #20bfe9;
    }
    100% {
    box-shadow: 9984px 0 0 0 #20bfe9, 9999px 0 0 0 #20bfe9, 10014px 0 0 0 #20bfe9;
    }
}

.tokens {
    float: right;
    color: #676767;
    font-family: 'Oxygen', sans-serif !important;
}
.identity {
    padding-top: 20px;
}

#smartwriter-id-button i.mce-ico {
    min-width: 100px; 
    background-size: contain; 
    background-repeat: no-repeat;
}
/* SMARTWRITE DASHBOARD STYLES */
#swDataTable_wrapper select {
    margin-top: 17px !important;
}
#swDataTable_wrapper a {
    color: #000 !important;
}
#swDataTable_wrapper table tr:nth-child(even) {
    background-color: #ebebeb !important; /* Light grey for even rows */
}

/* Target odd rows */
#swDataTable_wrapper table tr:nth-child(odd) {
     background-color: #fff !important; /* White for odd rows */
}
 .dashboard {
    font-family: Arial, sans-serif;
    margin: 20px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.charts-flex-container {
    display: flex;
    justify-content: space-around; 
    flex-wrap: wrap;
}

.chart-container {
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
    height:40vh;
    flex-basis: calc(50% - 40px); 
    background: #fff;
    border-radius: 8px;
    box-sizing: border-box; 
    padding: 20px;
}

.token-details {
    clear: both;
    background: #fff;
    color: #000 !important;
    padding: 20px;
    border-radius: 8px;
}
.token-details p strong {
    color: #000 !important;
}

#swUserTable_wrapper select {
    margin-top: 17px !important;
}
#swUserTable_wrapper a {
    color: #000 !important;
}
#swUserTable_wrapper table tr:nth-child(even) {
    background-color: #ebebeb !important; /* Light grey for even rows */
}

/* Target odd rows */
#swUserTable_wrapper table tr:nth-child(odd) {
     background-color: #fff !important; /* White for odd rows */
}

.swBanUser {
    width: 100px !important;
    float: none !important;
}

.unban {
    background: #f8a91a !important;
    text-shadow: none !important;
}
/* End of SMARTWRITE DASHBOARD */