/*#region Sync Group*/

.Sync_Group {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: auto auto 25px auto;
	width: 100%;
}

/*#endregion Sync Group*/

#Sync_Show_Container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-bottom: 25px;
}

#Sync_Show {
    font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-weight: 850;
	background-color: RGB(100,255,100);
	color: RGB(0,0,80);
	border-radius: 3px;
	border: none;
	padding: 10px;
}

.Show_More::after {
	content: "Show More";
}

.Show_Less::after {
	content: "Show Less";
}

#Sync_Show:hover {
	background-color: RGBA(100,255,100,0.7);
}

#Sync_Form {
	display: grid;
}

#Sync_Controls {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	gap: 10px;
	padding: 10px;
}

#Sync_Save, #Sync_Delete {
	border-radius: 3px;
    font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	font-weight: 850;
}

#Sync_Save {
	background-color: RGB(100,255,100);
	color: RGB(0,0,80);
}

#Sync_Delete {
	background-color: RGB(255,0,0);
	color: RGB(255,255,255);
}

/*#region Inputs*/

input {
	width: 225px;
	height: 35px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	color: RGB(0,0,0);
	border: none;
	border-radius: 3px;
}

input::placeholder, input::selection, textarea::placeholder, textarea::selection {
    font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	color: RGB(0,0,0);
}

input:hover, textarea:hover {
	background-color: RGB(100,255,100);
}

input:focus, textarea:focus {
	background-color: RGB(100,255,100);
	outline: none !important;
}

input:not(:placeholder-shown), textarea:not(:placeholder-shown) {
	background-color: RGB(100,255,100);
}

input:not(:placeholder-shown)::selection, textarea:not(:placeholder-shown)::selection {
	background-color: RGB(0,0,80);
	color: RGB(100,255,100);
}

textarea {
	width: 225px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	color: RGB(0,0,0);
	border: none;
	border-radius: 3px;
}

/*#endregion Inputs*/

/*#region Sync Classes*/

.show {
	visibility: visible;
}

.hide {
	visibility: hidden;
}

.Sync_Options {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 10px;
	width: 100%;
	max-height: 160.67px !important;
	box-sizing: border-box;
}

.Sync_Options .Radio {
	flex: 1 1 200px;
	max-width: calc(50% - 20px);
	margin: 0;
	text-align: left;
	box-sizing: border-box;
	padding: 0;
}

.Sync_Radio {
	background-color: RGB(255,255,255) !important;
}

.Sync_Radio:hover {
	background-color: RGB(100,255,100) !important;
	border-color: RGB(100,255,100) !important;
}

.Sync_Radio:checked {
	background-color: RGB(100,255,100) !important;
	border-color: RGB(100,255,100) !important;
}

.Sync_Radio:focus {
	box-shadow: 0 0 0 0.2rem RGBA(100,255,100,0.3) !important;
}

.Sync_Creator {
	padding-bottom: 10px !important;
}

.Sync_Image_Container {
	flex-direction: column !important;
	gap: 10px;
}

.Sync_Image_Label {
	font-family: 'Montserrat', sans-serif;
	font-weight: 850;
}

.Sync_Image_Uploader {
	width: 300px;
	border: none;
	background-color: transparent;
}

.Sync_Image_Uploader {
	background-color: RGB(100,255,100);
	border-color: RGB(0,0,80);
}

.Sync_Image_Uploader:hover {
	background-color: RGB(0,0,80);
	color: RGB(100,255,100);
	border-top: 2px solid !important;
	border-left: none !important;
	border-bottom: 2px solid !important;
	border-right: 2px solid !important;
	border-color: RGB(100,255,100);
}

.Sync_Image_Uploader::-webkit-file-upload-button {
    font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	background-color: RGB(100,255,100);
	color: RGB(0,0,80);
	height: 35px;
	border-top: none;
	border-left: none;
	border-bottom: none;
	border-color: RGB(0,0,80);
}

.Sync_Image_Uploader::-webkit-file-upload-button:hover {
	background-color: RGB(0,0,80);
	color: RGB(100,255,100);
	border-top: none !important;
	border-left: 2px solid !important;
	border-bottom: 2px solid !important;
	border-right: none !important;
	border-color: RGB(100,255,100);
}

.Sync_Image_Preview_Label {
    font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	font-weight: 850;
}

/*#endregion Sync Classes*/

/*#region Sync Tiles*/

#Sync_Tile {
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: center;
	background-color: RGB(0,0,80);
	color: RGB(100,255,100);
    font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	width: 400px;
	gap: 10px;
}

#Sync_Brand {
	width: 100%;
	max-height: 70px;
	padding: 10px 0 10px 0;
	text-align: center;
	border-bottom: solid 3px RGB(100,255,100);
}

#Sync_Brand_Text {
    font-family: 'Montserrat', sans-serif;
	font-size: 24px;
	margin: 0;
}

/*#region Sync Type*/

#Sync_Type {
	width: 100%;
	max-height: 70px;
	padding: 10px 0 10px 0;
	text-align: center;
	border-bottom: solid 3px RGB(100,255,100);
}

#Sync_Type_Text {
    font-family: 'Montserrat', sans-serif;
	font-size: 24px;
	margin: 0;
}

#Sync_Type_Icon {
	margin: 0;
	font-size: 32px;
	vertical-align: middle;
}

/*#endregion Sync Type*/

/*#region Icon Styles*/

#Sync_Type_Icon.bi-discord{
    color: RGB(88,101,242);
}

#Sync_Type_Icon.bi-youtube{
    color: RGB(255,0,0);
}

#Sync_Type_Icon.bi-twitch{
    color: RGB(145,70,255);
}

#Sync_Type_Icon.bi-facebook{
    color: RGB(8,101,254);
}

#Sync_Type_Icon.bi-twitter-x{
    color: RGB(255,255,255);
}

#Sync_Type_Icon.bi-steam{
    color: RGB(255,255,255);
}

#Sync_Type_Icon.bi-filetype-html{
	color: RGB(100,255,100);
}

/*#endregion Icon Styles*/

/*#region Sync Image*/

#Sync_Image_Container {
	display: flex;
	flex-direction: row;
	justify-self: center;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 375px;
	height: 210px;
	min-height: 210px;
}

#Sync_Image {
	width: auto;
	max-width: 375px;
	max-height: 210px;
}

/*#endregion */

/*#region Sync Body*/

#Sync_Body {
	width: 375px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-self: center;
	gap: 10px;
	padding: 0;
	margin: 0;
}

#Sync_Username_Container {
	width: 100%;
	text-align: center;
	word-wrap: break-word;
}

#Sync_Username {
    font-family: 'Montserrat', sans-serif;
	font-size: 24px;
	font-weight: 850;
	width: 100%;
	margin: 0;
}

#Sync_Button_Container {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0;
	gap: 10px;
}

#Sync_Button, #Sync_Button_PFP, #Sync_Button_BIO {
    font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	font-weight: 600;
	background-color: RGB(100,255,100);
	color: RGB(0,0,80);
}

#Sync_Button:hover, #Sync_Button_PFP:hover, #Sync_Button_BIO:hover {
	background-color: RGBA(100,255,100,0.5);
}

#Sync_Text_Container {
	display: flex;
	justify-content: center;
	max-width: 100%;
	text-align: left;
	word-wrap: break-word;
	max-height: 120px;
	overflow-y: auto;
	margin: 0;
}

#Sync_Text_Container_Featured {
	display: flex;
	justify-content: center;
	max-width: 100%;
	text-align: center;
	word-wrap: break-word;
	max-height: 120px;
	overflow-y: auto;
	margin: 0 0 10px 0;
}

#Sync_Text {
    font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	margin: 0;
}

/*#endregion Sync Body*/

/*#region Sync Footer*/

#Sync_Footer_Container {
	width: 100%;
	border-top: solid 3px RGB(100,255,100);
	padding: 10px 0 10px 0;
	text-align: center;
	margin: 0;
	min-height: 55px;
	max-height: 55px;
}

#Sync_Footer {
    font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	margin: 0;
}

/*#endregion Sync Footer*/

/*#endregion Sync Tiles*/











/*#region Sync V2*/

/*#region Inputs*/

input {
	width: 225px;
	height: 35px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	color: RGB(0,0,0);
	border: none;
	border-radius: 3px;
}

input::placeholder, input::selection, textarea::placeholder, textarea::selection {
    font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	color: RGB(0,0,0);
}

input:hover, textarea:hover {
	background-color: RGB(100,255,100);
}

input:focus, textarea:focus {
	background-color: RGB(100,255,100);
	outline: none !important;
}

input:not(:placeholder-shown), textarea:not(:placeholder-shown) {
	background-color: RGB(100,255,100);
}

input:not(:placeholder-shown)::selection, textarea:not(:placeholder-shown)::selection {
	background-color: RGB(0,0,80);
	color: RGB(100,255,100);
}

textarea {
	width: 225px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	color: RGB(0,0,0);
	border: none;
	border-radius: 3px;
}

/*#endregion Inputs*/

/*#region Tile*/

.Sync_Tile {
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: center;
	background-color: RGB(0,0,80);
	color: RGB(100,255,100);
    font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	width: 400px;
	gap: 10px;
}

.Sync_Type {
	width: 100%;
	max-height: 70px;
	padding: 10px 0 10px 0;
	text-align: center;
	border-bottom: solid 3px RGB(100,255,100);
}

/*#endregion*/

/*#region Options*/

.Sync_Options {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 10px;
	width: 100%;
	max-height: 160.67px !important;
	box-sizing: border-box;
}

.Sync_Options .Radio {
	flex: 1 1 200px;
	max-width: calc(50% - 20px);
	margin: 0;
	text-align: left;
	box-sizing: border-box;
	padding: 0;
}

/*#endregion*/

/*#region Radio*/

.Sync_Radio {
	background-color: RGB(255,255,255) !important;
}

.Sync_Radio:hover {
	background-color: RGB(100,255,100) !important;
	border-color: RGB(100,255,100) !important;
}

.Sync_Radio:checked {
	background-color: RGB(100,255,100) !important;
	border-color: RGB(100,255,100) !important;
}

.Sync_Radio:focus {
	box-shadow: 0 0 0 0.2rem RGBA(100,255,100,0.3) !important;
}

/*#endregion*/

/*#region Image*/

.Sync_Image_Container {
	display: flex;
	flex-direction: row;
	justify-self: center;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 375px;
	height: 210px;
	min-height: 210px;
}

/*#endregion*/

/*#region Body*/

.Sync_Body {
	width: 375px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-self: center;
	gap: 10px;
	padding: 0;
	margin: 0;
}

/*#region Username*/

.Sync_Username_Container {
	width: 100%;
	text-align: center;
	word-wrap: break-word;
}

/*#endregion*/

/*#region Button*/

.Sync_Button_Container {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0;
	gap: 10px;
}

/*#endregion*/

/*#region Text*/

.Sync_Text_Container {
	display: flex;
	justify-content: center;
	max-width: 100%;
	text-align: left;
	word-wrap: break-word;
	max-height: 120px;
	overflow-y: auto;
	margin: 0;
}

/*#endregion*/

/*#endregion*/

/*#region Footer*/

.Sync_Footer_Container {
	width: 100%;
	border-top: solid 3px RGB(100,255,100);
	padding: 10px 0 10px 0;
	text-align: center;
	margin: 0;
	min-height: 55px;
	max-height: 55px;
}

/*#endregion*/

/*#region Sync Controls*/

.Sync_Controls {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	gap: 10px;
	padding: 10px;
}

.Sync_Save, .Sync_Delete {
	border-radius: 3px;
    font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	font-weight: 850;
}

.Sync_Save {
	background-color: RGB(100,255,100);
	color: RGB(0,0,80);
}

.Sync_Delete {
	background-color: RGB(255,0,0);
	color: RGB(255,255,255);
}

/*#endregion*/

/*#region Image Stuff*/

.Sync_Image_Label {
	font-family: 'Montserrat', sans-serif;
	font-weight: 850;
}

.Sync_Image_Uploader {
	width: 300px;
	border: none;
	background-color: transparent;
}

.Sync_Image_Uploader {
	background-color: RGB(100,255,100);
	border-color: RGB(0,0,80);
}

.Sync_Image_Uploader:hover {
	background-color: RGB(0,0,80);
	color: RGB(100,255,100);
	border-top: 2px solid !important;
	border-left: none !important;
	border-bottom: 2px solid !important;
	border-right: 2px solid !important;
	border-color: RGB(100,255,100);
}

.Sync_Image_Uploader::-webkit-file-upload-button {
    font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	background-color: RGB(100,255,100);
	color: RGB(0,0,80);
	height: 35px;
	border-top: none;
	border-left: none;
	border-bottom: none;
	border-color: RGB(0,0,80);
}

.Sync_Image_Uploader::-webkit-file-upload-button:hover {
	background-color: RGB(0,0,80);
	color: RGB(100,255,100);
	border-top: none !important;
	border-left: 2px solid !important;
	border-bottom: 2px solid !important;
	border-right: none !important;
	border-color: RGB(100,255,100);
}
/*#endregion*/

/*#endregion*/