* {
    font-family: 'Andika', sans-serif;
}

body {
	margin: 0;
}

.mb-20 {
    margin-bottom: 20px;
}

#nameInputs {
	width: 400px;
	z-index: 50;
}

#nameModal {
	display: none;
	position: fixed;
	top: 0;
    width: 100vw;
	height: 100vh;
	background-color: #0000003d;
	z-index: 999;
}

.modalContent {
	display: block;
    box-shadow: 0px 0px 10px black;
    width: 400px;
    text-align: center;
	margin: 35vh auto 0;
	background-color: white;
	padding: 20px;
}

.closeButton {
	width: 100px;
}

.customizerTitleAndInputRow {
	display: flex;
    justify-content: space-between;
	padding: 10px 20px 0px;
}

.customizerTitle {
	font-size: 30px;
    font-weight: bold;
}

.nextStepButton {
	cursor: pointer;
	position: absolute;
    bottom: 0px;
    right: 126px;
}

.previousStepButton {
	cursor: pointer;
    position: absolute;
    top: 20px;
    left: 4px;
    transform: scale(0.75);
}

.nextStep {
	width: 333px;
}

.previousStep {
	width: 333px;
}

.triangle {
	z-index: -1;
    width: 80px;
    height: 80px;
    position: relative;
    top: -60px;
    right: -258px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
    transform: rotate(45deg);
    background: #3498db;
}

.triangle.back {
	transform: scaleX(-1) rotate(45deg);
    right: 6px;
}

#resetCharacterButtons {
    position: absolute;
    top: 128px;
    right: 64px;
	text-align: center;
}

.reset.character, .reset.restartBook {
	width: 30px;
	cursor: pointer;
}

#restartBookButtons {
	position: absolute;
	top: 16px;
    right: 30px;
	text-align: center;
}

.slidersSelectionBox {
	display: flex;
	flex-direction: column;
}

.slidersBox {
	display: flex;
	padding: 8px 0;
}

.sliderIcon {
	width: 18px;
	padding: 0 8px;
}

.slider {
	cursor: pointer;
}

.sliderIcon.closer,
.sliderIcon.farther {
	transform: rotate(45deg);
}

.hide {
	display: none;
}

.btn {
	cursor: pointer;
	border: none;
	background: #3498db;
	font-family: Arial;
	color: #ffffff;
	font-size: 20px;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
}

.nextStepButton:hover .btn,
.nextStepButton:hover .triangle {
  background: #3cb0fd;
  text-decoration: none;
}

.pronouns {
	margin-bottom: 20px;
}

#step3, #hairAndEyebrowsSelections, #skinSelections, #faceSelections, #cothingSelections {
	display: none;
}

.characterSVG {
  width: 300px;
  overflow: visible;
}

.customizer {
	display: flex;
    justify-content: space-between;
}

#characterFeatureSelections {
	display: flex;
    flex-direction: column;
	flex: 1;
}

.characterContainerArea {
	min-width: 500px;
	position: relative;
}

.featureBox {
    border: solid black 1px;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 26px;
	padding: 20px;
	text-align: center;
}

#characterFeatureStyleAndColorSelections, #characterFeatureStyleAndColorSelectorOptions {
    border: solid black 1px;
    height: fit-content;
    font-weight: bold;
    font-size: 20px;
	flex: 1;
}

#characterFeatureStyleAndColorSelectorOptions {
	border: none;
	padding: 10px;
}

.pointer {
	cursor: pointer;
}

.selectionsBox {
	display: flex;
    justify-content: center;
    align-items: center;
    border: solid black 1px;
	min-height: 24px;
	padding: 14px;
	text-align: center;
}

.selectionsBox:hover {
	background-color: #4fb4f75d;
}

.slidersSelectionBox:hover {
	background-color: white;
}

.selectionsBox > label {
	margin-left: 10px;
}

#storyboookArea {
    display: none;
}

.paragraphText {
    padding: 20px;
    color: white;
    background-color: #8080809e;
    border-radius: 50px;
    margin: 10px;
    text-align: center;
}

#storyTitle, #backCover {
    text-align: center;
    color: white;
    background-image: url(/images/dynamicStories/pages/Title.png) !important;
    background-size: 100% 100% !important;
}

#backCover {
	transform: scaleX(-1);
}

#characterContainer {
	position: relative;
	transform: scale(.8);
	width: 300px;
	margin: 0 auto;
	visibility: hidden;
}

.svgImg {
	position: absolute;
}

.hairSVG {
    top: -284px;
    right: 38px;
    width: 224px;
}

.eyebrowSVG {
	top: -290px;
    right: 96px;
    width: 50px;
}

.eyebrowSVG.left {
    left: 96px;
	transform: scaleX(-1) rotate(12deg);
}

.eyebrowSVG.right {
	transform: rotate(12deg);
}

.eyeSVG {
	top: -288px;
    right: 96px;
    width: 50px;
}

.eyeSVG.left {
    left: 96px;
}

.lipsSVG {
    top: -264px;
    right: 129px;
    width: 40px;
}

.noseSVG {
    top: -292px;
    right: 136px;
    width: 27px;
}

.characterImage {
	width: 300px;
    position: absolute;
    transform: scale(.3);
}

.hard {
    background: #ccc !important;
}

#flipbook {
    font-family: 'Andika', sans-serif;
}

.flipbook-viewport{
	overflow:hidden;
	width:100%;
	height:100%;
}

.flipbook-viewport .container{
	position:absolute;
	top: 41%;
	left:50%;
	margin:auto;
}

.flipbook-viewport .flipbook{
	width:1080px;
	height:703px;
	left:-540px;
	top:-300px;
}

.flipbook-viewport .page{
	width:540px;
	height:703px;
	background-color:white;
	background-repeat:no-repeat;
	background-size:100% 100%;
}

.flipbook .page{
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
	box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.flipbook .page-wrapper{
	-webkit-perspective:2000px;
	-moz-perspective:2000px;
	-ms-perspective:2000px;
	-o-perspective:2000px;
	perspective:2000px;
}

.flipbook-viewport .page img{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin:0;
}

.flipbook-viewport .shadow{
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;
	transition: -ms-box-shadow 0.5s;
	-webkit-box-shadow:0 0 24px black;
	-moz-box-shadow:0 0 24px black;
	-ms-box-shadow:0 0 24px black;
	-o-box-shadow:0 0 24px black;
	box-shadow:0 0 24px black;
}


#characterFeatureStyleAndColorSelectorOptions {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	max-width: 280px;
}

.svg-item {
	padding: 8px;
	cursor: pointer;
}

.selectionImg {
	width: 135px;
    cursor: pointer;
}

.left {
	transform: scaleX(-1);
}
  
.active {
	color: white;
	background-color: #4fb4f7;
}

.selected {
	display: block !important;
}

.selectedOption {
	box-sizing: border-box;
	border: solid #2261ff 6px;
    border-radius: 50px;
	background-color: #4fb4f750;
}

#spinner-container {
    position: absolute;
    width: 100%;
    margin: 200px auto 0;
    z-index: 30;
}

#loading-spinner {
  width: 60px;
  height: 60px;
  position: relative;
  margin: 50px auto;
  border: 16px solid #918f8f;
  border-radius: 50%;
  border-top-color: #3498db;
  animation: spin 1s linear infinite;
}


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}