/**
 * =============================================================================
 * This is the file where all your styling should go in.
 * Instead of modifying the styles found in the monogatari.css file or others,
 * you should overwrite those styles in this file.
 *
 * The CSS selectors shown are not an extensive list but they are the most
 * common you might want to change. To find what other elements are available,
 * you can take a look at the monogatari.css file or use your browser's dev
 * tools to inspect the elements.
 * =============================================================================
**/

/* Import External Font */
@font-face {
	font-family: "metropolis";
	src: url('../assets/fonts/Metropolis-Medium.otf');
}

/**
 * ===========================
 * General Styling
 * ===========================
**/

body {
	background-color: #2c303a;
}

/* Change Cusor to Chiyopi */
body, main-menu, button, button:hover, [data-action], span, svg, game-screen, credits-screen,  save-screen, settings-screen, help-screen{
	cursor: url('../assets/cursor/chiyopi.cur'), none !important;
}

/* General Styling for Menu Screens */
[data-screen] {
	overflow: hidden;
}

.hidden{
	visibility: hidden;
}

.modal__content, .wrapper-image {
	background: url('../assets/images/paper-bg.webp');
	border-radius: 20px !important;
}

.fancy-error > .modal__content  {
	background-color: rgba(255,255,255, 0.85);
	background-image: url('../assets/images/iocry.webp');
	background-repeat: no-repeat;
	background-size: contain;
	background-blend-mode: hue;
	background-position: center;
}

.fancy-error > .modal__content_nowebp {
	background-color: rgba(255,255,255, 0.85);
	background-image: url('../assets/images/iocry.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-blend-mode: color-dodge;
	background-position: center;
	height: auto;
	width: 90%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	position: absolute;
	padding: 1rem;
	max-height: 100%;
	text-align: center;
	width: 90%;
	overflow: auto;
}

.modal {
	background: rgba(0,0,0,.2);
}

dialog-log .modal__content [data-content=log] [data-spoke] {
	border-bottom: 0px !important;
}

/**
 * ===================================
 * Language Selctor Screen Styling
 * ===================================
**/

language-selection-screen {
	background-color: #2c303a;
	color: white;
}

language-selection-screen [data-content=buttons] {
	text-decoration: none !important;
	gap: 5vmin;
}

language-selection-screen button {
	border: 0px;
	text-decoration: none !important;
	color: white;
	width: 10vmax;
}

language-selection-screen  button:hover [data-content="language"], button:focus [data-content="language"] {
	text-decoration: none !important;
}

language-selection-screen button:hover {
	border: 0px;
}

language-selection-screen button:active {
	border: 0px;
}

[data-language=Indonesia] {
	background: rgb(249,163,203);
	background: linear-gradient(169deg, rgba(249,163,203,1) 7%, rgba(229,106,179,1) 98%);
	transition: box-shadow 0.5s ease-in-out;
}

[data-language=Indonesia]:hover {
	background: rgb(249,163,203);
	background: linear-gradient(169deg, rgba(249,163,203,1) 7%, rgba(229,106,179,1) 98%);
	box-shadow: 10px 23px 55px 0px rgba(239,135,190,0.36);
	-webkit-box-shadow: 10px 23px 55px 0px rgba(239,135,190,0.36);
	-moz-box-shadow: 10px 23px 55px 0px rgba(239,135,190,0.36);
}

[data-language=Indonesia]:focus {
	background: rgb(249,163,203);
	background: linear-gradient(169deg, rgba(249,163,203,1) 7%, rgba(229,106,179,1) 98%);
	box-shadow: 23px 23px 40px 0px rgba(239,135,190,0.26);
	-webkit-box-shadow: 23px 23px 40px 0px rgba(239,135,190,0.26);
	-moz-box-shadow: 23px 23px 40px 0px rgba(239,135,190,0.26);
	border: 0px;
}

[data-language=English] {
	background: rgb(156,230,124);
	background: linear-gradient(38deg, rgba(156,230,124,1) 0%, rgba(32,159,94,1) 92%);
	transition: box-shadow 0.5s ease-in-out;
}

[data-language=English]:hover {
	background: rgb(156,230,124);
	background: linear-gradient(38deg, rgba(156,230,124,1) 0%, rgba(32,159,94,1) 92%);
	box-shadow: 10px 23px 55px 0px rgba(156,230,124,0.36);
	-webkit-box-shadow: 10px 23px 55px 0px rgba(156,230,124,0.36);
	-moz-box-shadow: 10px 23px 55px 0px rgba(156,230,124,0.36);
}

[data-language=English]:focus {
	background: rgb(156,230,124);
	background: linear-gradient(38deg, rgba(156,230,124,1) 0%, rgba(32,159,94,1) 92%);
	box-shadow: 23px 23px 40px 0px rgba(156,230,124,0.26);
	-webkit-box-shadow: 23px 23px 40px 0px rgba(156,230,124,0.26);
	-moz-box-shadow: 23px 23px 40px 0px rgba(156,230,124,0.26);
	border: 0px;
}

[data-language=日本語] {
	background: rgb(124,183,230);
	background: linear-gradient(38deg, rgba(124,183,230,1) 0%, rgba(32,90,159,1) 92%);
	transition: box-shadow 0.5s ease-in-out;
}

[data-language=日本語]:hover {
	background: rgb(124,183,230);
	background: linear-gradient(38deg, rgba(124,183,230,1) 0%, rgba(32,90,159,1) 92%);
	box-shadow: 10px 23px 55px 0px rgba(124,183,230,0.36);
	-webkit-box-shadow: 10px 23px 55px 0px rgba(124,183,230,0.36);
	-moz-box-shadow: 10px 23px 55px 0px rgba(124,183,230,0.36);
}

[data-language=日本語]:focus {
	background: rgb(124,183,230);
	background: linear-gradient(38deg, rgba(124,183,230,1) 0%, rgba(32,90,159,1) 92%);
	box-shadow: 23px 23px 40px 0px rgba(124,183,230,0.26);
	-webkit-box-shadow: 23px 23px 40px 0px rgba(124,183,230,0.26);
	-moz-box-shadow: 23px 23px 40px 0px rgba(124,183,230,0.26);
	border: 0px;
}

/**
 * ===========================
 * Loading Screen Styling
 * ===========================
**/

loading-screen {
	background-color: #2c303a;
	color: white;
}

loading-screen div {
	width: 100%;
}

[data-content="loading wrapper"] {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 25%;
}

[data-content="progress"] {
	appearance: none;
	border: none;
	margin: 1em auto;
	display: block;
	background: transparent;
	width: 50%;
	border-radius: 30px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
	height: 1.5vmax !important;
}
[data-content="progress"]::-webkit-progress-bar {
	background: transparent;
	animation: progressAnimation 6s !important; 
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
	border-radius: 30px !important;
	padding: 6px !important;
}
[data-content="progress"]::-webkit-progress-value {
	animation: progressAnimation 6s !important; 
	background-color: #F9BCCA !important;
	border-radius: 30px !important;
}
[data-content="progress"]::-moz-progress-bar {
	animation: progressAnimation 6s !important; 
	background-color: #EF476F !important;
	border-radius: 30px !important;
}



/* [data-content="progress"] {
  height: 18px;
  border-radius: 30px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  transition: 0.4s linear;
  transition-property: width, background-color;
} */

/* .progress-moved > [data-content="progress"] {
  width: 85%;
  
  animation: progressAnimation 6s; 
} */

@keyframes progressAnimation {
  0% {
    background-color: #F9BCCA;
  }
  100% {
    background-color: #EF476F;
  }
}

/**
 * ===========================
 * Main Menu Styling
 * ===========================
**/

/* Main Menu Styling */
[data-screen="main"] {
	background-image: url(../assets/images/main1.webp);
	background-repeat: no-repeat;
	background-position: top;
	background-attachment: fixed;
	background-size: cover;	
}

[data-component="main-menu"] {
	display: flex;
	flex-direction: row;
	align-self: center;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20vmin;
	padding: 0 10px;
	margin: auto;
}

/* Main Menu Buttons Styling */
[data-screen="main"] button {
	padding: 0 5px;
	margin: 0 5px;
}

#logo {
	width: 20vmax;
}

.wrapper-logo {
	display: flex;
	padding: 2vmax;
}

.wrapper-copy {
	position: absolute;
	left: 1vmax;
	bottom: 0;
	text-align: left;
	color: #eee;
}

.wrapper-version {
	position: absolute;
	right: 1vmax;
	bottom: 0;
	text-align: right;
	color: #eee;
}

.wrapper-copy > p, .wrapper-version > p {
	margin: 0;
	padding: 0;
	size: 5vmin;
}

.wrapper-copy > p:last-child, .wrapper-version > p:last-child {
	padding-bottom: 1.5vmax;
}

.copy-bg1 {
	font-weight: bold;
	-webkit-text-stroke: 1px #545454;
}

.version-bg1 {
	color: #545454;
	font-weight: bold;
}

#ehehe {
	font-size: 1vmin;
}

#nc-license {
	font-size: 1.3vmin;
	margin: 0;
}

/**
 * ===========================
 * Save and Load Menus Styling
 * ===========================
**/

[data-component="load-screen"] {
	overflow-y: auto;
}

/**
 * ===========================
 * Help Styling
 * ===========================
**/

[data-component="help-screen"] {
	padding: 2rem 5rem;
	overflow-y: auto;
	color: #eee;
}

help-screen [data-content='symbols'] [data-content='shortcut'] {
	width: 3rem;
	height: 2rem;
}


/**
 * ===========================
 * About US Styling
 * ===========================
**/

[data-component="about-screen"] {
	padding: 2rem 5rem;
	overflow-y: auto;
	color: #eee;
}

[data-component="about-screen"] [data-action="back"] {
	margin: 0 1rem;
}

[data-component="about-screen"] h1 {
	text-align: center;
	margin: 0 0 3rem;
}

[data-component="about-screen"] h3 {
	text-align: left;
	margin: 0 0 2rem;
}

[data-component="about-screen"] p {
	text-align: left;
	line-height: 1.5em;
	margin: 0 0 2rem;
}

[data-component="about-screen"] a {
	color: #c75f5f;
}

[data-component="about-screen"] a:hover {
	color: #f19c9c;
	text-decoration: underline;
}


/**
 * ===========================
 * Game Elements Styling
 * ===========================
**/

/* Choice Buttons style */
[data-component="choice-container"] button {
	border-radius: 35px;
	background: linear-gradient(145deg, #ffd0d0, #dcafaf);
	box-shadow:  5px 5px 10px #cfa5a5,
            	-5px -5px 10px #ffdfdf;
	transition: box-shadow 1s;
	color: #123622;
	font-family: 'Poppins', sans-serif;
	font-size: 1.2rem;
	padding: 2%;
	width: 100%;
}

[data-component="choice-container"] button:hover {
	box-shadow:  15px 15px 30px #cfa5a5,
            	-15px -15px 30px #ffdfdf;
}

[data-component="choice-container"] button:active {
	background: linear-gradient(145deg, #dcafaf, #ffd0d0);
	box-shadow:  15px 15px 30px #cfa5a5,
							-15px -15px 30px #ffdfdf;
	border: none;
	outline: none;
}

[data-component="choice-container"] button:focus {
	border: none;
	outline: none;
}

/* Text Box styling */
[data-component="text-box"] {
	width: 95%;
	left: 0;
	right: 0;
	bottom: 0.5rem;
	margin: auto;
	border: 0;
	background: none;
	min-height: auto;
	max-height: none;
	row-gap: 5px;
}

[data-content="text"] {
	border-radius: 25px;
	background-color: rgba(255, 255, 255, 0.95);
	background-image: url(../assets/images/textbox-splash-sprite.webp), url(../assets/images/textbox-splash-sprite.webp);
	background-repeat: no-repeat;
	background-size: 149px 195px;
	background-position: top -66px right -64px, top -43px left -92px;
	background-blend-mode: multiply;
	padding: 0.875rem 2.5rem 2.5rem;
}

text-box [data-content="dialog"] {
	font-size: 0.875rem;
	line-height: 1.4em;
	height: 4.2em;
	max-height: 4.2em;
	color: #050507;
	padding: 0;
	font-family: "metropolis";
}

/* Character Name Style */
[data-content="name"] {
	justify-self: start;
	border-radius: 25px;
	background-color: rgba(255, 255, 255, 0.9);
	background-image: url(../assets/images/textbox-splash-sprite.webp), url(../assets/images/textbox-splash-sprite.webp);
	background-repeat: no-repeat;
	background-size: 149px 195px;
	background-position: top -5px right -67px, top -14px left -92px;
	background-blend-mode: multiply;
	font-weight: bold;
	padding: 0 5rem;
}

[data-ui="who"] {
	padding: 0.1rem 0;
	height: 1.7rem;
	font-family: 'Poppins';
	color: #005051;
}

/* Style for Centered Text */
[data-component="centered-dialog"] {
	color: #eee;
	animation: fadeInLeft;
}

/* Character Images Styles */
[data-screen="game"] [data-character] {
	bottom: -25vh;
	max-height: 120vh;
}

[data-screen="game"] [data-character].left {
	left: 15vw;
}

[data-character].protect {
	left: 25vw;
}

[data-screen="game"] [data-character].right {
	right: 15vw;
}

[data-screen="game"] [data-character].right-out {
	right: -100%;
}

[data-screen="game"] [data-character=iofi],
[data-screen="game"] [data-character=putriPertama] {
	height: 94.7vh; /* 150cm (145+5) */
}

[data-screen="game"] [data-character=yagoo],
[data-screen="game"] [data-character=susyagoo] {
	height: 108.6vh; /* 172cm */
}

[data-screen="game"] [data-character=mib1] {
	height: 101.1vh; /* 160cm */
}

[data-screen="game"] [data-character=mib2] {
	height: 101.1vh; /* 160cm */
}

[data-screen="game"] [data-character=mchan] {
	height: 97.9vh; /* 155cm */
}
[data-screen="game"] [data-character=mchan].left {
	margin-left: -10vw;
}

[data-screen="game"] [data-character=putriKedua] {
	height: 88.4vh; /* 140cm */
}

[data-screen="game"] [data-character=raja] {
	height: 109.9vh; /* 174cm */
}

[data-screen="game"] [data-character=ratu] {
	height: 101.1vh; /* 160cm */
}

[data-screen="game"] [data-character=kaisar] {
	height: 116.8vh; /* 185cm */
}

[data-screen="game"] [data-character=penasihat] {
	height: 97.9vh; /* 155cm */
}

[data-screen="game"] [data-character=utusan] {
	height: 107.4vh; /* 170cm */
}

[data-screen="game"] [data-character=kuda] {
	height: 120vh; /* 190cm */
}
[data-screen="game"] [data-character=kuda].left {
	margin-left: -5vw;
}

[data-screen="game"] [data-character=kecoa] {
	height: 113.7vh; /* 180cm */
}

/* Credit Styles */
credits-container {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #000;
	z-index: 50;
	color: #fff;
	font-size: 20px;
	line-height: 2rem;
}

credits-container.credit-fade {
	display: flex;
	align-items: center;
	justify-content: center;
}

credits-container .credit-section {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	align-items: flex-start;
	text-align: center;
}

credits-container .credit-section h1 {
	flex: 1 100%;
	font-size: 32px;
	margin: 0 0 30px;
}

credits-container .credit-section h3 {
	flex: 1 100%;
	font-size: 24px;
	margin: 0 0 30px;
}

credits-container .credit-section div {
	flex: 1 100%;
}

credits-container .credit-section img {
	max-height: 8rem;
}

credits-container .credit-section dl {
	flex: 1 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
}

credits-container .credit-section dl dt {
	flex: 1 50%;
	padding: 0 15px 15px 0;
	text-align: right;
	color: #ddd;
}

credits-container .credit-section dl dd {
	flex: 1 100%;
	margin: 0;
	padding: 0 0 15px;
}

credits-container .credit-section dl dt + dd {
	flex: 1 50%;
	padding: 0 0 15px 15px;
	text-align: left;
}

credits-container .credit-section dl dd p {
	margin: 0 0 5px;
}

credits-container .credit-bgm-section dl {
	flex: 1 50%;
}

credits-container .credit-bgm-section dl dt {
	flex: 1 100%;
	padding: 0 0 15px;
	text-align: center;
	color: #fff;
}

credits-container .credit-bgm-section dl dt + dd {
	flex: 1 100%;
	padding: 0 0 60px;
	text-align: center;
}

credits-container .credit-section p {
	flex: 1 100%;
	margin: 0 0 30px;
}

credits-container.credit-scroll .wrapper {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin: auto;
}

credits-container.credit-scroll .credit-section {
	margin: 0 auto 60px;
	max-width: 960px;
}

#source {
	text-align: right;
}



/**
 * ===========================
 * Quick Menu Styling
 * ===========================
**/

/* These styles are applied to the Mobile version of the Quick Menu */

/* Quick Menu Style */
[data-component="quick-menu"] {
	width: 90%;
	left: 0;
	right: 0;
	top: auto;
	bottom: 0.5rem;
	margin: auto;
	padding: 0 2rem 0 0;
	background: none;
	justify-content: center;
}

[data-component="quick-menu"] > button {
	font-size: 0.875rem;;
}

/* Quick Menu Buttons Style on Hover */
[data-component="quick-menu"] > button:hover, [data-component="quick-menu"] > button:focus {
	color: #f4c2c2;
	border-bottom: 0px;
}

[data-component="quick-menu"] > button:after {
	content: " ";
  display: block;
  border-top: 2px solid #f19c9c;
  border-bottom: 2px solid #f19c9c;
  border-radius: 2px;
	width: 0;
	transition: 0.5s;
  margin: 0 auto;
}

[data-component="quick-menu"] > button:hover:after {
	width: 95%;
	transition: 0.5s;
}

[data-component="quick-menu"] > button:focus:after {
	content: " ";
  display: block;
  border-top: 2px solid #585858;
  border-bottom: 2px solid #585858;
  border-radius: 2px;
	transition: 0.5s;
	width: 5%;
}


/* Quick Menu Buttons Icon Style */
[data-component="quick-menu"] > button {
	color: #050507;
}

/**
 * ===========================
 * BackLog Styling
 * ===========================
**/

.paper {
	background-image: url('../assets/images/paper-bg.webp');
	background-color: none;
	background-blend-mode: unset;
}

[data-content=log] {
	height: 90% !important;
	max-height: 90% !important;
	padding: 1rem 2rem 1rem 4rem !important;
}

dialog-log > .modal__content{
	height: 90%;
	max-height: 90%;
	width: 100%;
	max-width: 75%;
}

[data-content=backlog] {
	height: 90%;
	max-height: 90%;
	overflow: hidden;
	position: relative;
	padding-top: 2%;
	padding-left: 1%;
	padding-right: 1%;
}

[data-content=backlog] > h3 {
	margin-bottom: 1%;
	color: #545454;
	/* -webkit-text-stroke-width: 0.5px; */
	/* -webkit-text-stroke-color: #545454; */
	font-size: 3rem;
	text-align: left;
	margin-left: 1%;
}

.dialog, [data-string="Confirm"]{
	font-size: 1.5rem !important;
	color:#535353 !important;
	font-weight: bold;
}

.name {
	font-size: 1.5rem !important;
	font-weight: bold;
}

hr {
  border: 0;
	height: 2px;
	background: #333;
	background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
	background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
	background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
	background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}


/* Close Button */
#close a {
  width: 64px;
  height: 64px;
  position: absolute;
  right: 3vmin;
  top: 2vmin;
  background-color: #ffffff;
  border-radius: 50px;
  opacity: 1;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-box-shadow: 0px 0px 30px 0px rgba(207, 165, 165, 0.5);
  -moz-box-shadow: 0px 0px 30px 0px rgba(207, 165, 165, 0.5);
  box-shadow: 0px 0px 30px 0px rgba(207, 165, 165, 0.5);
}
#close a > span {
  background-color: #f19c9c;
  display: block;
  height: 12px;
  border-radius: 6px;
  position: relative;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  position: absolute;
  top: 50%;
  margin-top: -6px;
  left: 7px;
  width: 50px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
}
#close a > span span {
  display: block;
  background-color: #f08484;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  position: absolute;
  left: 0;
  top: 0;
}
#close a > span.left {
  transform: rotate(45deg);
  transform-origin: center;
}
#close a > span.left .circle-left {
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  margin-left: 0;
}
#close a > span.left .circle-right {
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  margin-left: 37px;
}
#close a > span.right {
  transform: rotate(-45deg);
  transform-origin: center;
}
#close a > span.right .circle-left {
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  margin-left: 0;
}
#close a > span.right .circle-right {
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  margin-left: 37px;
}
#close a:hover > span {
  background-color: #fc2752;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#close a:hover > span span {
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  background-color: #f87c95;
}
#close a:hover > span.left .circle-left {
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  margin-left: 37px;
}
#close a:hover > span.left .circle-right {
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  margin-left: 0;
}
#close a:hover > span.right .circle-left {
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  margin-left: 37px;
}
#close a:hover > span.right .circle-right {
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  margin-left: 0;
}

/**
 * ===========================
 * Range Styling
 * ===========================
**/

[data-component="settings-screen"] {
	overflow-y: auto;
}

/* Use the background property to set a color for these */
input[type=range] {
	margin: 18px 0;
	width: 100%;
}

input[type=range]:focus {
	outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 8.4px;
	cursor: pointer;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	background:  #ffb7ce;
	border-radius: 1.3px;
	border: 0.2px solid #010101;
}

input[type=range]::-webkit-slider-thumb {
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	border: 1px solid #000000;
	height: 36px;
	width: 16px;
	border-radius: 3px;
	background: #ffffff;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -14px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
	background:  #ffb7ce;
}

input[type=range]::-moz-range-track {
	width: 100%;
	height: 8.4px;
	cursor: pointer;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	background:  #ffb7ce;
	border-radius: 1.3px;
	border: 0.2px solid #010101;
}

input[type=range]::-moz-range-thumb {
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	border: 1px solid #000000;
	height: 36px;
	width: 16px;
	border-radius: 3px;
	background: #ffffff;
	cursor: pointer;
}

input[type=range]::-ms-track {
	width: 100%;
	height: 8.4px;
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	border-width: 16px 0;
	color: transparent;
}

input[type=range]::-ms-fill-lower {
	background:  #ffb7ce;
	border: 0.2px solid #010101;
	border-radius: 2.6px;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-fill-upper {
	background:  #ffb7ce;
	border: 0.2px solid #010101;
	border-radius: 2.6px;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-thumb {
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	border: 1px solid #000000;
	height: 36px;
	width: 16px;
	border-radius: 3px;
	background: #ffffff;
	cursor: pointer;
}

input[type=range]:focus::-ms-fill-lower {
	background:  #ffb7ce;
}

	input[type=range]:focus::-ms-fill-upper {
	background:  #ffb7ce;
}

[data-settings="special-main-menu"] {
	display: flex;
    justify-content: center;
    align-items: center;
}

[data-component="settings-screen"] input[type=checkbox] {
	appearance: none;
	-webkit-appearance: none;
	display: flex;
	align-content: center;
	justify-content: center;
	border: 0.15em solid currentColor;
	border-radius: 0.15em;
}

[data-component="settings-screen"] input[type="checkbox"]::before {
	content: "";
	width: 1.15rem;
	height: 1.15rem;
	clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
	transform: scale(0);
	transition: transform 0.2s ease-in-out;
	background-color: #ffb7ce;
}

[data-component="settings-screen"] input[type="checkbox"]:checked::before {
	transform: scale(1);
}

/** Phone Devices 5.5 inch **/
@media screen and (max-width: 37.56254em) {
	[data-component="text-box"] {
		bottom: 1rem;
	}
	
	[data-content="name"] {
		background-position: top 0px right -67px, top -3px left -92px;
	}
	
	[data-ui="who"] {
		padding: 0.3rem 0;
		height: 2rem;
	}
	
	[data-content="text"] {
		padding: 0.875rem 3rem 3rem;
	}
	
	text-box [data-content="dialog"] {
		font-size: 0.95rem;
		height: 3.2em;
	}

	[data-content="next"] {
		width: 4.5%;
		position: absolute;
		right: 7%;
		bottom: 13%;
	}

	[data-component="choice-container"] button {
		font-size: 0.95rem;
	}

	/* Styles for the desktop version of the Quick Menu */

	/* Quick Menu Style */
	[data-component="quick-menu"] {
		bottom: 1rem;
	}

	
	[data-component="quick-menu"] span[data-string] {
		display: none;
	}

	[data-component="quick-menu"] > button {
		margin-right: 5%;
	}

	/* Backlog */
	[data-content=backlog] > h3 {
		margin-bottom: 1%;
		font-size: 2rem;
		text-align: left;
		margin-left: 3%;
	}

	[data-content=log] {
		padding: 0rem 2rem 0rem 2rem !important;
	}
	
	dialog-log > .modal__content{
		height: 90%;
		max-height: 90%;
		width: 100%;
		max-width: 75%;
	}

	.dialog, [data-string="Confirm"]{
		font-size: 1rem !important;
	}
	
	.name {
		font-size: 1rem !important;
	}

	#close a {
		width: 48px;
		height: 48px;
		right: 3vmin;
		top: 2vmin;
		border-radius: 50px;
	}
	#close a > span {
		height: 10px;
		border-radius: 6px;
		top: 52%;
		width: 35px;
	}
	#close a > span span {
		width: 10px;
		height: 10px;
		border-radius: 6px;
	}
	#close a > span.left .circle-right {
		margin-left: 25px;
	}
	#close a > span.right .circle-right {
		margin-left: 25px;
	}
	#close a:hover > span.left .circle-left {
		margin-left: 25px;
	}
	#close a:hover > span.right .circle-left {
		margin-left: 25px;
	}
}

/** Medium Screens, Phablets (601px) **/
@media screen and (min-width: 37.56255em) {
	[data-component="text-box"] {
		bottom: 1rem;
	}
	
	[data-content="name"] {
		background-position: top 0px right -67px, top -3px left -92px;
	}
	
	[data-ui="who"] {
		padding: 0.3rem 0;
		height: 2.25rem;
	}
	
	text-box [data-content="dialog"] {
		font-size: 1rem;
	}
	/* Styles for the desktop version of the Quick Menu */

	/* Quick Menu Style */
	[data-component="quick-menu"] {
		bottom: 1rem;
	}
	
	[data-component="quick-menu"] span[data-string] {
		display: none;
	}

	[data-component="quick-menu"] > button {
		margin-right: 3%;
	}

	/* Backlog */
	[data-content=backlog] > h3 {
		margin-bottom: 1%;
		font-size: 2rem;
		text-align: left;
		margin-left: 3%;
	}

	[data-content=log] {
		padding: 0rem 2rem 0rem 2rem !important;
	}
	
	dialog-log > .modal__content{
		height: 90%;
		max-height: 90%;
		width: 100%;
		max-width: 75%;
	}

	.dialog, [data-string="Confirm"]{
		font-size: 1rem !important;
	}
	
	.name {
		font-size: 1rem !important;
	}

	[data-content="next"] {
		width: 5%;
		position: absolute;
		right: 7%;
		bottom: 13%;
	}

	#close a {
		width: 48px;
		height: 48px;
		right: 3vmin;
		top: 2vmin;
		border-radius: 50px;
	}
	#close a > span {
		height: 10px;
		border-radius: 6px;
		top: 52%;
		width: 35px;
	}
	#close a > span span {
		width: 10px;
		height: 10px;
		border-radius: 6px;
	}
	#close a > span.left .circle-right {
		margin-left: 25px;
	}
	#close a > span.right .circle-right {
		margin-left: 25px;
	}
	#close a:hover > span.left .circle-left {
		margin-left: 25px;
	}
	#close a:hover > span.right .circle-left {
		margin-left: 25px;
	}
}

/** Medium Devices, Tablets (992px)**/
@media screen and (min-width: 62em) {
	[data-component="text-box"] {
		width: 90%;
		bottom: 2.5rem;
	}
	
	[data-content="name"] {
		background-size: 198px 259px;
		background-position: top -3px right -92px, top -20px left -118px;
		padding: 0 6rem;
	}

	[data-ui="who"] {
		padding: 0.5rem 0;
		height: 2.8rem;
	}
	
	[data-content="text"] {
		background-size: 198px 259px;
		background-position: top -114px right -85px, top -64px left -118px;
		padding: 1rem 4rem 2.5rem;
	}
	
	text-box [data-content="dialog"] {
		font-size: 1.125rem;
	}

	[data-component="quick-menu"] {
		bottom: 2.5rem;
	}

	[data-component="quick-menu"] span.ri-feedback-fill {
		position: relative;
		top: 2px;
	}

	[data-content="next"] {
		width: 3.5%;
		position: absolute;
		right: 5%;
		bottom: 15%;
	}

	/* Backlog */
	[data-content=backlog] > h3 {
		margin-bottom: 1%;
		font-size: 2.5rem;
		text-align: left;
		margin-left: 3%;
	}

	[data-content=log] {
		padding: 1rem 2rem 0rem 2rem !important;
	}

	.dialog, [data-string="Confirm"]{
		font-size: 1.5rem !important;
	}
	
	.name {
		font-size: 1.5rem !important;
	}

	#close a {
		width: 55px;
		height: 55px;
		right: 3vmin;
		top: 2vmin;
		border-radius: 50px;
	}
	#close a > span {
		height: 10px;
		border-radius: 6px;
		top: 52%;
		width: 40px;
		left: 8px;
	}
	#close a > span span {
		width: 10px;
		height: 10px;
		border-radius: 6px;
	}
	#close a > span.left .circle-right {
		margin-left: 30px;
	}
	#close a > span.right .circle-right {
		margin-left: 30px;
	}
	#close a:hover > span.left .circle-left {
		margin-left: 30px;
	}
	#close a:hover > span.right .circle-left {
		margin-left: 30px;
	}
}

/** HD Screen, Large Devices, Wide Screens, Desktop (1200px) **/
@media screen and  (min-width: 75em) {
	[data-ui="who"] {
		padding: 0.3rem 0;
		height: 2.8rem;
	}
	
	[data-content="text"] {
		background-position: top -97px right -85px, top -64px left -118px;
		padding: 1.25rem 4rem 2.5rem;
	}
	
	[data-component="centered-dialog"] {
		font-size: 1.5rem;
	}
	
	text-box [data-content="dialog"] {
		font-size: 1.375rem;
	}
	
	[data-component="quick-menu"] > button {
		font-size: 1rem;
		margin-right: 1%;
	}

	[data-component="quick-menu"] span[data-string] {
		display: inline-block;
	}
}

/** 1440px screen */
@media screen and (min-width: 90em) {
	[data-content="text"] {
		background-position: top -86px right -85px, top -64px left -118px;
		padding: 1.5rem 4.5rem 2.5rem;
	}

	[data-component="centered-dialog"] {
		font-size: 1.75rem;
	}

	text-box [data-content="dialog"] {
		font-size: 1.5rem;
	}

	[data-component="quick-menu"] > button {
		font-size: 1.25rem;
	}
}

/** Full HD Screen, Large Devices, Wide Screens, Large Desktops (1920px) **/
@media screen and (min-width: 120em) {
	[data-component="text-box"] {
		width: 85%;
	}
	[data-content="name"] {
		background-size: 297px 389px;
		background-position: top -5px right -140px, top -37px left -190px;
		padding: 0 7rem;
	}
	[data-content="text"] {
		background-size: 297px 389px;
		background-position: top -167px right -128px, top -97px left -190px;
		padding: 1.75rem 6rem 3rem;
	}
	[data-ui="who"] {
		font-size: 2rem;
		height: 3.6rem;
	}
	[data-component="centered-dialog"] {
		font-size: 1.875rem;
	}
	text-box [data-content="dialog"] {
		font-size: 1.875rem;
	}
	[data-component="quick-menu"] > button {
		font-size: 1.375rem;
	}
}

/** Retina Screen , Large Devices, Wide Screens(2560px) **/
@media screen and (min-width: 160em) {
	[data-component="text-box"] {
		width: 80%;
	}
	[data-component="centered-dialog"] {
		font-size: 2.5rem;
	}
	text-box [data-content="dialog"] {
		font-size: 2rem;
	}
}

/** 4k Screens, Large Devices, Wide Screens (3840px) **/
@media screen and (min-width: 240em) {

}

/** 5k Screens, Large Devices, Wide Screens (5000px) **/
@media screen and (min-width: 312.5em) {

}

/** 8k Screens, Large Devices, Wide Screens (8000px) **/
@media screen and (min-width: 500em) {

}

/* * Text boxes height based on screen height *
@media screen and (max-height: 48em) {
	[data-component="text-box"] {
	}
}

@media screen and (max-height: 64em) {
	[data-component="text-box"] {
	}
} */

/** Custom CSS Element **/
#footer {
	align-self: flex-start;
	flex-direction: column;
	align-items: flex-start;
	position: absolute;
	bottom: 0;
	padding-left: 20px;
	text-align: left;
	padding-bottom: 15px;
	color:#eee;
}

#footer p{
	margin: 0px;
}


[data-action="quit"] {
	margin-right: 5%;
}

[data-ui="extend-background"] {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50%;
	width: 50%;
	height: 100%;
}

[data-ui=background] {
	position: absolute;
}

.hp {
	position: initial !important;
}

.wrapper-image{
	position: absolute !important;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 25vmax;
	height: 25vmax;
	background-color: rgba(255, 255, 255, 0.55);
	margin: auto;
	padding: 1%;
}

[data-ui=background].bg-sus {
	background-position: 50% 100%;
}

[data-string=SlotDeletion] {
	color: #000;
}

[data-content=context] {
	color: #000;
	padding: 1rem;
}

input[data-content=context] {
	color: #000;
}


[data-string="Close"], [data-action="quit"], [data-action="dismiss-alert"], [data-action="delete-slot"], [data-action="overwrite-slot"] {
	border-radius: 35px;
	background: linear-gradient(145deg, #ffd0d0, #dcafaf);
	box-shadow:  5px 5px 10px #cfa5a5,
				-5px -5px 10px #ffdfdf;
	transition: box-shadow 1s;
	color: #123622;
	font-family: 'Poppins', sans-serif;
	font-size: 1.2rem;
}

[data-string="Close"]:hover, [data-action="quit"]:hover, [data-action="dismiss-alert"]:hover, [data-action="delete-slot"]:hover, [data-action="overwrite-slot"]:hover {
	box-shadow:  15px 15px 30px #cfa5a5,
				-15px -15px 30px #ffdfdf;
}


[data-string="Close"]:active, [data-action="quit"]:active, [data-action="dismiss-alert"]:active, [data-action="delete-slot"]:active, [data-action="overwrite-slot"]:active {
	background: linear-gradient(145deg, #dcafaf, #ffd0d0);
	box-shadow:  15px 15px 30px #cfa5a5,
				-15px -15px 30px #ffdfdf;
	border: none;
	outline: none;
}


[data-string="Close"]:focus, [data-action="quit"]:focus, [data-action="dismiss-alert"]:focus, [data-action="delete-slot"]:focus, [data-action="overwrite-slot"]:focus {
	border: none;
	outline: none;
}

[data-component="settings-screen"], [data-component="load-screen"], [data-component="save-screen"] {
	background: url(../assets/images/paper-bg.webp);
}

[data-action="save"] {
	background: linear-gradient(145deg, #dcafaf, #ffd0d0);
	color: #123622;
	transition: box-shadow 1s;
}

[data-action="save"]:hover {
	box-shadow:  15px 15px 30px #cfa5a5,
				-15px -15px 30px #ffdfdf;
}

[data-action="save"]:active {
	background: linear-gradient(145deg, #dcafaf, #ffd0d0);
	box-shadow:  15px 15px 30px #cfa5a5,
				-15px -15px 30px #ffdfdf;
	border: none;
	outline: none;
}

[data-action="save"]:focus {
	border: none;
	outline: none;
}

[data-component="save-slot"] button:hover {
	background: #c23b22;
}