:root {
	--color-swan: 229, 229, 229;
	--color-snow: 255, 255, 255;
	--color-eel: 75, 75, 75;
	--color-wolf: 119, 119, 119;

	--button-back: #9d9d9d;
	--button-color: #f3f3f3;
	--button-disabled: #e3e3e3;
	--button-disabled-color: #b5b5b5;
}

:root[data-duo-theme="dark"] {
	--color-swan: 55, 70, 79;
	--color-snow: 19, 31, 36;
    --color-eel: 241, 247, 251;
	--color-wolf: 220, 230, 236;

	--button-back: #37464f;
	--button-color: #f1f7fb;
	--button-disabled: #2c3a41;
	--button-disabled-color: #b5b5b5;
}

:root[data-duo-theme="dark"] .icon {
	filter: invert(1);
}

body {
	min-width: 350px;
	max-width: 410px;
	font-family: din-round, sans-serif;
	color: rgb(var(--color-eel));
	background-color: rgb(var(--color-snow));
}

a {
	color: var(--d-cgpt-accent-color);
}

.top {
	margin-top: 20px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.top > * {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 0px 15px;
}

.version {
    border: 2px solid var(--d-cgpt-accent-color);
    border-radius: 20px;
    font-size: 11px;
	overflow: hidden;
	text-decoration: none;
}

.version > * {
	padding: 4px 5px;
}

.version > div {
	color: rgb(var(--color-snow));
    background-color: var(--d-cgpt-accent-color);
    height: 100%;
    display: flex;
    align-items: center;
    font-weight: bold;
}

.version #version {
    color: var(--d-cgpt-accent-color);
    padding: 4px 6px;
}

.app-info {
	column-gap: 15px;
}

.app-info img {
	width: 24px;
}

.app-info div {
    font-size: 20px;
    font-weight: bold;
}

#settings {
	display: flex;
	flex-direction: column;
	row-gap: 5px;
}

.footer {
    text-align: center;
    margin-bottom: 15px;
	margin-top: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 5px;
}

.footer > img {
	width: 35px;
}

.footer #version {
	font-size: 12px;
	color: rgb(var(--color-wolf));
	margin-top: 5px;
}

.footer .links {
    display: flex;
    align-items: center;
    column-gap: 10px;
    width: fit-content;
    margin: auto;
}

.footer .links a {

}

.separator {
	width: 93%;
    height: 2px;
    background-color: rgb(var(--color-swan));
    margin: 20px auto;
}

.element {
	padding: 8px 10px;
}

.element > .title {
	padding-bottom: 5px;
    font-size: 15px;
	font-weight: bold;
	display: flex;
    align-items: center;
    column-gap: 10px;
}

.element > .title > a {
    display: flex;
    align-items: center;
}

.element > .title > a img {
    width: 13px;
    opacity: 0.8;
}

.element input {
    width: 97%;
    border: unset;
    border-bottom: 1px solid rgb(var(--color-swan));
    padding: 7px 2px;
	color: rgb(var(--color-wolf));
	background-color: rgb(var(--color-snow));
}

.element .link {
	display: inline-block;
    margin-top: 5px;
    opacity: 0.9;
}

.element .buttons {
    display: flex;
    justify-content: space-between;
    margin: 15px auto;
    margin-bottom: unset;
    width: 270px;
}

.element .buttons button {
	padding: 8px 0px;
    border-radius: 10px;
	border: unset;
	cursor: pointer;
	width: 80px;
	font-weight: bold;
	background-color: var(--button-back);
	color: var(--button-color);
}

.element .buttons button:hover {
    background-color: var(--d-cgpt-accent-color);
    color: rgb(var(--color-snow));
}

.button-disabled {
	color: rgb(var(--color-wolf));
	pointer-events: none;
	background-color: var(--button-disabled) !important;
	color: var(--button-disabled-color) !important;
}

.input-wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	column-gap: 10px;
}

.input-wrapper > img {
	width: 20px;
}

.input-wrapper > img:hover {
	opacity: 0.5;
}

.icon-colored {
	cursor: pointer;
	filter: invert(83%) sepia(29%) saturate(5497%) hue-rotate(102deg) brightness(90%) contrast(101%) !important;
}

.icon-accent {
	opacity: 1 !important;
}

.popup {
    background-color: rgb(var(--color-snow));
	border-top: 4px solid var(--d-cgpt-accent-color);
	border-radius: 5px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 75%;
    height: fit-content;
    padding: 5px 15px;
    padding-bottom: 15px;
    text-align: center;
}

.popup p {
    text-align: left;
}

.popup button {
	padding: 8px 15px;
	border-radius: 10px;
	border: unset;
	cursor: pointer;
	font-weight: bold;
	background-color: var(--button-back);
	color: var(--button-color);
}

.popup button:hover {
	background-color: var(--d-cgpt-accent-color);
	color: rgb(var(--color-snow));
}

.darken {
	width: 100%;
    height: 100%;
    position: fixed;
    background-color: black;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    opacity: 0.8;
}

.api-mode {
    display: flex;
    flex-direction: row;
	font-weight: bold;
	column-gap: 5px;
}

.api-mode > div {
	font-size: 14px;
	text-align: center;
    width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 7px;
	border: 1px solid var(--d-cgpt-accent-color);
}

.api-mode > div:hover {
	background-color: var(--d-cgpt-accent-color);
	color: rgb(var(--color-snow));
	cursor: pointer;
}

.api-mode-selected {
	background-color: var(--d-cgpt-accent-color);
	color: rgb(var(--color-snow));
}

.api-mode > div:first-child, html[dir="rtl"] .api-mode > div:last-child {
	border-radius: 30px 0px 0px 30px;
}

.api-mode > div:last-child, html[dir="rtl"] .api-mode > div:first-child {
	border-radius: 0px 30px 30px 0px;
}

.api-key-input:hover {
	opacity: 1 !important;
}