html {
	height: 100vh;
}

body {
	background-color: rgb(50, 50, 50);
/*	color:  lightgrey;
	color:  #907763;*/
	color: #4f4f4f;
	font-family: /*"Lucida Grande"*/ 'Alegreya Sans SC';	
	text-align: center;
	margin:  0px;
	padding-top: 4.5vh;
	/*padding-top: env(safe-area-inset-top);*/
	height: 100vh;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

a{
	text-decoration: none;
	color: inherit;
}


.game-room-body{
	overflow: hidden;
}

.flipchess-title{
	color: #907763;
	margin-top: 4vh;
	font-size: 1.25em;
	letter-spacing: 2px;
	display: flex;
	align-items: center;
	justify-content: center;	
}

#spin-title{
	padding-right: 2px;
	position: relative;
}

#spin-title img{
	width: 100%
}

#cross-out{
	display: none;
	position: absolute;
	/* width: 8%; */
	padding-top: 3px;	
}

.cross-out-on{
	display: block!important;
}

#chess-title{
	padding-left: 2px;
}

.spin-chess-title-boring{
	color: #969696;
}

.flipchess-download-title{
	color: #907763;
	margin-top: 4vh;
	font-size: 1.75em;
	letter-spacing: 2px;
}

.flipchess-title-game-room-standard{
	color: #907763;
	margin-top: 7%;
	font-size: 1em;
	letter-spacing: 2px;	
}

.flipchess-title-game-room{
	color: #907763;
	margin-top: 2%;
	font-size: 1em;
	letter-spacing: 2px;	
}

.flipchess-subtitle{
	font-style:  italic;
	margin-top:  7px;
}

.spin-chess-subtitle-remove{
	display: none;
}

.flipchess-student-portal{
	color: rgb(129, 129, 129);
	font-size: 1.25em;
	margin-top: 11px;
	letter-spacing: 7px;
}

.game-options-container{
	display: flex;
	flex-direction: column;
	height: 28vh;
	justify-content: space-evenly;
	width: 100%;
	max-width: 289px;
	margin: auto;
}

.game-id-input{
	text-align: center;
	color: rgb(121, 121, 121);
	background-color: rgb(40, 40, 40);
	width: 100%;
	height: 48px;
	border: 1px solid rgb(101, 101, 101);
	border-radius: 47px;
	cursor: pointer;	
	margin-bottom: 10px;
	font-size: 1.1em;
	padding-left: 0px !important;
	padding-right: 0px !important;   
	font-family: /*"Lucida Grande"*/ 'Alegreya Sans SC';
}


::placeholder {
   text-align: center;
	padding-left: 0px !important;
	padding-right: 0px !important;    
}

/* or, for legacy browsers */

::-webkit-input-placeholder {
   text-align: center;
	padding-left: 0px !important;
	padding-right: 0px !important;      
}

:-moz-placeholder { /* Firefox 18- */
   text-align: center;  
	padding-left: 0px !important;
	padding-right: 0px !important;      
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;  
 	padding-left: 0px !important;
	padding-right: 0px !important;   		   
}

:-ms-input-placeholder {  
   text-align: center; 
	padding-left: 0px !important;
	padding-right: 0px !important;      
}


.flipchess-btn{
	color: rgb(42, 42, 42);
	background-color: grey;
	width: 100%;
	height: 48px;
	border: 1px solid rgb(101, 101, 101);
	border-radius: 47px;
	cursor: pointer;
	font-size: 1.1em;
	font-family: /*"Lucida Grande"*/ 'Alegreya Sans SC';
}

.flipchess-about-btn{
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	margin: auto;
	margin-bottom: 40px;
	color: rgb(42, 42, 42);
	background-color: grey;
	width: 80%;
	max-width: 300px;
	height: 48px;
	border: 1px solid rgb(101, 101, 101);
	border-radius: 47px;
	cursor: pointer;
	font-size: 1.1em;
	font-family: /*"Lucida Grande"*/ 'Alegreya Sans SC';

}

.developed-by{
	text-align: center;
	color: rgb(68, 68, 68);
	font-size: .75em;
}

.tt-sig{
	text-align: center;
	color: rgb(31, 31, 31);
	font-size: 1.2em;	
}


.join-game-form{
	display: flex;
	flex-direction: column;
	margin: auto;
}

/* Flip Chess Game Coin */

.flipchess-coin{
	width: 70px;
	height: 70px;
	background-color: grey;
	border-radius: 44px;
	margin: auto;
	margin-top: 10%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	color: rgb(45, 45, 45);
	border: 1px solid rgb(91, 91, 91);	
}




.coin-container{
  display: flex;
  align-items: center;
  justify-content: center;	
  margin-top:  7%;
  /*height: 100%;
  width: 100%;*/
}

.coin {
  background: #5d5d5d;
  width: 10em;
  height: 10em;
  border-radius: 50%;
  position: relative;
  -webkit-transform-style: preserve-3d;
}

.spin-da-bitch{
	animation:  spin .5s linear infinite;
}

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

.coin:before {
  background-color: #393939;
  position: absolute;
  border-radius: 50%;
  content: "";
 height: 10.1em;
 width: 10.15em;
 left: -0.05em;
  -webkit-transform: translateZ(-0.75em);
}
.coin:after {
  background-color: #393939;
  content: "";
  left: 4.25em;
  position: absolute;
  height: 10.12em;
  width: 0.75em;
  z-index: -10;
  -webkit-transform: rotateY(-90deg);
  -webkit-transform-origin: 100% 50%;
}

.tails {
  background-color: #393939;
  position: absolute;
  border-radius: 50%;
  content: "";
  height: 10em;
  width: 10em;
  -webkit-transform: translateZ(-0.005em);
  border: 1px solid #393939;
	display: flex;
	flex-direction: column;
	justify-content: space-around;   
}

.heads {
  background-color: #5d5d5d;
  position: absolute;
  border-radius: 50%;
  content: "";
  height: 10em;
  width: 10em;
  -webkit-transform: translateZ(-0.755em);
  border: 1px solid #393939;
	display: flex;
	flex-direction: column;
	justify-content: space-around;  
}


.coin-face-flip{
	transform: scale(-1, 1);
	font-size: 2em;
	color:  rgb(60, 60, 60);
}

.coin-face-stay{
	position: absolute;
	top: 0;
	bottom: 0;
	font-size: 2em;
	margin: auto;
	left: 0;
	right: 0;
	vertical-align: middle;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	color:  rgb(60, 60, 60);
}


#opponent-status{
	width: 100%;
	height: 30px;
	color: #907763;
	margin-top:  8px;
}

.move-indication{
	color: rgb(103, 103, 103);
}

.whites-move{
	color: #907763;
	text-shadow: .5px .5px black, -.5px .5px black, .5px -.5px black, -.5px -.5px black;
	font-weight: bolder;
	font-size: 1.2em;
}

.blacks-move{
	color:  black;
	text-shadow: .5px .5px #907763, -.5px .5px #907763, .5px -.5px #907763, -.5px -.5px #907763;
	font-weight: bolder;
	font-size: 1.2em;
}

.link-share-container{
	display: flex;
	width:  85%;
	max-width:  500px;
	justify-content: space-evenly;
	margin:  auto;
}

.sharing-link-item{
	display: flex;
	flex-direction: column;
	cursor: pointer;
	font-size:  .75em;
}

.sharing-img{
	width: 66%;
	max-width:  75px;
	border-radius: 100px;
	margin: auto;
	margin-bottom: 11px;
	z-index: 99;	
}

.text-area-cover{
	background-color: rgb(50, 50, 50);
	/* background-color: blue; */
	width: 30px;
	height: 42px;
	position: absolute;
	z-index: -90;
}

.copy-link-textarea{
  position: absolute;
	width: 1px;
	z-index:  -99;
	/*resize: none;
	background: rgba(255, 255, 255, 0);
	border: 0;
	color: rgba(255, 255, 255, 0);*/
}

.game-id-displayed{
	color: #d1a786;
	margin-top: 15px;
	margin-bottom: 18px;
}


.share-message{
	font-size:  .8em;
}

/*.sharing-img:hover{
	background-color: #26201c;
}*/

.sharing-img:active{
	background-color: #d9a67e;
}

.waiting-container{
	margin: auto;
	display: inline-block;
	position: relative;	
	margin-top: 15px;
	margin-left: 11px;	
}


.one {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.0s;
    animation: dot 1.3s infinite;
    animation-delay: 0.0s;
}

.two {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.2s;
      animation: dot 1.3s infinite;
      animation-delay: 0.2s;
}

.three {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.3s;
     animation: dot 1.3s infinite;
     animation-delay: 0.3s;
}

@-webkit-keyframes dot {
      0% { opacity: 0; }
     50% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes dot {
      0% { opacity: 0; }
     50% { opacity: 0; }
    100% { opacity: 1; }
}
/* Start Screen Coin */

@keyframes casual-spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}


.coin-container-start-screen{
  display: flex;
  align-items: center;
  justify-content: center;	
	margin-top: 9vh;
	margin-bottom: 14vh;
  /*height: 100%;
  width: 100%;*/
}

.coin-container-download-screen{
  display: flex;
  align-items: center;
  justify-content: center;	
	margin-top: 9vh;
	margin-bottom: 0vh;
  /*height: 100%;
  width: 100%;*/
}

.coin-container-game-screen{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 3%;
	margin-bottom: 2%;	
}


.start-screen-coin{
	background: #252525;
	animation:  spin 3s linear infinite;
}

.start-screen-coin-img{
	width: 43%;
	text-align: center;
	height: 47%;
	margin: auto;
	margin-bottom: 42px;
}


.start-screen-coin-img-reverse{
	width: 43%;
	text-align: center;
	height: 79%;
	margin: auto;
	margin-top: 14px;
	transform: rotate(180deg);
}


/* Game Board */

@keyframes evenSpin {
  0% {
	transform: rotateY(0deg);
  }
  100% {
	transform: rotateY(1080deg);
  }
}
	
@keyframes oddSpin {
  0% {
	transform: rotateY(0deg);
  }
  100% {
	transform: rotateY(900deg);
  }
}

.spin-odd{
	transform: rotate(900deg)!important;
	transition-property: transform;
	transition-duration:  3s;
}

.spin-even{
	transform: rotate(1080deg)!important;
	transition-property: transform;
	transition-duration:  3s;
}

.single-spin{
	transform: rotate(180deg)!important;
	transition-property: transform;
	transition-duration:  .5s;
}

.single-spin .chess-piece{
	transform: rotate(180deg);
	transition-property: transform;
	transition-duration:  .75s;
}

.spin-odd .chess-piece {
	transform: rotate(900deg);
	transition-property: transform;
	transition-duration:  3.5s;
}

.spin-even .chess-piece {
	transform: rotate(1080deg);
	transition-property: transform;
	transition-duration:  3.5s;
}

@keyframes flipBoard {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}


.board-flipped{
	transform: rotate(180deg)!important;
	transition-property: transform;
	transition-duration:  .5s;

}

.board-flipped .chess-piece{
	transform: rotate(180deg);
	transition-property: transform;
	transition-duration:  .75s;	
}

.chess-piece{
	transform: rotate(0deg);
	transition-property: transform;
	transition-duration:  .75s;		
}

.main-board-standard{
	position: sticky;
	/*top: 21%;
	left: 0;
	right: 0;
	bottom: 0;	*/

	width: 98%;
	aspect-ratio: 1/1;
	margin: auto;
	max-width: 55vh;
	margin-top: 20px;
	margin-bottom: 8px;	
}

.main-board{
	position: sticky;
	/*top: 21%;
	left: 0;
	right: 0;
	bottom: 0;	*/
	transform: rotate(0deg);
	transition-property: transform;
	transition-duration:  .5s;	
	width: 98%;
	aspect-ratio: 1/1;
	margin: auto;
	max-width: 55vh;
	margin-top: 20px;
	margin-bottom: 8px;	
}


/* Game Coin */


.flipchess-game-coin{
	width: 70px;
	height: 70px;
	background-color: grey;
	border-radius: 44px;
	margin: auto;
	margin-top: 10%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	color: rgb(45, 45, 45);
	border: 1px solid rgb(91, 91, 91);	
}




.game-coin-container{
  display: flex;
  align-items: center;
  justify-content: center;	
  margin-top:  7%;
  /*height: 100%;
  width: 100%;*/
}

.game-coin {
  background: #5d5d5d;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  position: relative;
  -webkit-transform-style: preserve-3d;
}

.spin-da-bitch{
	animation:  spin .5s linear infinite;
}

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



.game-coin:before {
  background-color: #393939;
  position: absolute;
  border-radius: 50%;
  content: "";
 height: 5.1em;
 width: 5.15em;
 left: -0.05em;
  -webkit-transform: translateZ(-0.50em);
}
.game-coin:after {
  background-color: #393939;
  content: "";
  left: 2.25em;
  position: absolute;
  height: 5.12em;
  width: 0.5em;
  z-index: -10;
  -webkit-transform: rotateY(-90deg);
  -webkit-transform-origin: 100% 50%;
}

.game-tails {
  background-color: #393939;
  position: absolute;
  border-radius: 50%;
  content: "";
  height: 5em;
  width: 5em;
  -webkit-transform: translateZ(-0.005em);
  border: 1px solid #393939;
	display: flex;
	flex-direction: column;
	justify-content: space-around;   
}

.game-heads {
  background-color: #5d5d5d;
  position: absolute;
  border-radius: 50%;
  content: "";
  height: 5em;
  width: 5em;
  -webkit-transform: translateZ(-0.51em);
  border: 1px solid #393939;
	display: flex;
	flex-direction: column;
	justify-content: space-around;  
}


.game-coin-face-flip{
	transform: scale(-1, 1);
	font-size: 2em;
	color:  rgb(60, 60, 60);
}

.game-coin-face-stay{
	position: absolute;
	top: 0;
	bottom: 0;
	font-size: 2em;
	margin: auto;
	left: 0;
	right: 0;
	vertical-align: middle;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	color:  rgb(60, 60, 60);
}



.coin-container-game-screen{
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 18px;
	width: 7em;
}


.game-coin{
	background: #252525;
	/*animation:  spin 3s linear infinite;*/
}



.game-coin-img{
	width: 43%;
	text-align: center;
	height: 47%;
	margin: auto;
	margin-bottom: 23px;
}


.game-coin-img-reverse{
	width: 46%;
	text-align: center;
	height: 79%;
	margin: auto;
	margin-top: 6px;
	transform: rotate(180deg);
}

@keyframes spin-stay {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(1440deg);
  }
}

@keyframes spin-stay-1 {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(1800deg);
  }
}


@keyframes spin-flip {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(1620deg);
  }
}


@keyframes spin-flip-1 {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(1980deg);
  }
}




.spin-stay-1{
	animation:  spin-stay-1 1s linear;
	animation-fill-mode: forwards;	
}

.spin-stay{
	animation:  spin-stay 1s linear;
	animation-fill-mode: forwards;	
}

.spin-flip-1{	
	animation:  spin-flip-1 1s linear;
	animation-fill-mode: forwards;
}


.spin-flip{	
	animation:  spin-flip 1s linear;
	animation-fill-mode: forwards;
}


@-webkit-keyframes your-move {
      0% { color: #907763; }
     50% { color: #d0aa8c; }
    100% { color: #907763; }
}

@keyframes your-move {
      0% { color: #907763; }
     50% { color: #d0aa8c; }
    100% { color: #907763; }
}

.your-move{
		margin-top: 10px;
    -webkit-animation: your-move 1.3s infinite;
    -webkit-animation-delay: 0.3s;
     animation: your-move 1.3s infinite;
     animation-delay: 0.3s;
}


.their-move{
	margin-top: 10px;
	color: grey;
	font-style: italic;
}


#game-status{
	-webkit-animation: your-move 1.3s infinite;
	-webkit-animation-delay: 0.3s;
	animation: your-move 1.3s infinite;
	animation-delay: 0.3s;	
}

.about-description{
	color:  rgb(167, 167, 167);
	width: 80%;
	max-width: 600px;
	text-align: justify;
	margin: auto;	
}


.about-page{
	overflow: scroll;
	padding-top: 50px;
}


#close {
  position: absolute;
  right: 32px;
  top: 6vh;
  width: 32px;
  height: 32px;
  opacity: 0.3;
}
#close:hover {
  opacity: 1;
}
#close:before, #close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #737373;
}
#close:before {
  transform: rotate(45deg);
}
#close:after {
  transform: rotate(-45deg);
}

#message{
	margin: auto;
	margin-top: 10%;
	color: #907763;
	width: 90%;	
}

#message-screen-curtain{
	transform: translateZ(200px);
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	right:  0;
	left:  0;
	background-color: rgba(0, 0, 0, 0.52);
	z-index:  100;
}

#message-screen{
	transform: translateZ(205px);
	display: none;
	position: absolute;
	width: 78%;
	height: auto;
	padding-bottom: 27px;
	max-width: 400px;
	background-color: rgba(0, 0, 0, 0.79);
	margin: auto;
	z-index: 101;
	top: 26%;
	right: 0;
	border: 2px solid #907763;
	left: 0;
	border-radius: 3px;
}

.turn-on{
	display: block!important;
}

.message-button-container{
	display: flex;
	justify-content: space-evenly;
	margin-top:  10%;
}

.message-button{
	width: 66px;
	background-color: rgb(87, 87, 87);
	color:  black;
	height: 38px;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	border-radius: 4px;
}

.spinchess-icon-alert-screen-img{
	width:  65px;
	margin-bottom: 21px;
}

.contact{
	color: rgb(28, 28, 28);	
	margin-top:  20px;
}


/* Download images */

/*.download-symbol-img{
	width: 64%;
	max-width: 300px;
	margin-right: auto;
	margin-left: auto;	
}*/

.download-img-container{
	display: flex;
	flex-direction: column;	
	margin-top: 5%;
}

.appstore-link{
	margin-bottom: 21px;
	cursor: pointer;
}

.appstore-link-img{
	width: 200px;
	display: inline-block;
	filter: brightness(40%);
	cursor: pointer;
}

.total-games{
	position: absolute;
	right: 5px;
	bottom: 5px;
	color: rgb(59, 59, 59);
}


@keyframes icon-spinny-spin {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotatez(-1080deg);
  }
}

#icon-spinner{
	width: 30%;
	max-width: 187px;
}

.spin-icon{
	animation:  icon-spinny-spin .75s linear;
	animation-fill-mode: forwards;
}

.spinchess-social-container{
	display: flex;
	justify-content: space-evenly;
}

.spinchess-social-media-icon{
	width: 50px;
	filter: grayscale();	
	cursor: pointer;
}


/*** Device Sizes ***/

/** iPhone 8 Plus **/
@media only screen 
    and (device-width : 414px) 
    and (device-height : 736px) 
    and (-webkit-device-pixel-ratio : 3) { 

    	body {
    		padding-top: 19px;
    	}

    	.coin-container-game-screen {
    		margin-top: 2%;
    	}

    	.game-id-displayed{
    		margin-top: 2%;
    		margin-bottom: 2%;
    	}

    	.sharing-img {
    		width: 49%;
    		margin-bottom: 2%;
    	}

    	.waiting-container {
    		margin-top: 10px;
    	}
}

/** iPhone Pro 14 Max **/
 @media only screen 
        and (device-width: 428px) 
        and (device-height: 926px) 
        and (-webkit-device-pixel-ratio: 3) { 

        	body{
        		padding-top: 57px;
        	}

        	#close{
        		top: 51px;
        	}
}


/** iPhone SE **/
@media only screen and (min-width: 375px) {


    	.coin-container-game-screen {
    		margin-top: 2vh;
    	}

    	.message-container {
    		font-size: .8em;
    	}

    	.game-id-displayed{
    		margin-top: 1.5vh;
    		margin-bottom: 1.5vh;
    	}

     	.sharing-img {
    		width: 50%;
    		margin-bottom: 2vh;
    	}

   	  .waiting-container {
    		margin-top: 2px;
    	}

}

/* ipad Mini Portrait */
@media only screen and (width:768px) and (resolution: 163dpi) {
		.flipchess-title-game-room {
			font-size: 2em;
		}


		#opponent-status {
			font-size: 1.2em;
		}		
}



/** iPad Air **/
@media only screen and (min-width: 820px) and (max-width: 1180px)  { 
		.flipchess-title-game-room {
			font-size: 1.2em;
		}



		#opponent-status {
			font-size: 1.2em;
		}		
 }


/** iPad Pro 11 inch**/
@media only screen and (min-width: 1194px) and (orientation: portrait){ 
		.flipchess-title-game-room {
			font-size: 2em;
		}


		#opponent-status {
			font-size: 1.5em;
		}	
}


/** iPad Pro 12.9 inch **/

@media only screen and (min-width: 1024px) and (orientation: portrait) { 

	.flipchess-title-game-room {
		font-size: 2em;
	}



	#opponent-status {
		font-size: 1.5em;
	}

}

/*** Device Sizes End ***/


/***** Vert Switch *****/


#toggle-a:focus {
	box-shadow: none;
	outline: none;
}

#toggle-b:focus {
	box-shadow: none;
	outline: none;
}	

#toggle-a:hover {
	box-shadow: none;
	outline: none;
}

#toggle-b:hover {
	box-shadow: none;
	outline: none;
}	

#toggle-a:active {
	box-shadow: none;
	outline: none;
}

#toggle-b:active {
	box-shadow: none;
	outline: none;
}	


.toggle-switch-container {
	align-content: center;
	padding: 30px;
	position: absolute;
	right: 0;
	top: 0;
	padding-top: 0;
  }
  
  .toggle-switch {
	margin: 0;
  }
  
  .toggle-switch {
	width: 10px;
	position: relative;
  }
  
  .toggle-switch input {
	position: absolute;
	top: 0;
	z-index: 2;
	opacity: 0;
	cursor: pointer;
  }
  
  .toggle-switch input:checked {
	z-index: 1;
  }
  
  .toggle-switch input:checked + label {
	display: block;
	opacity: 1;
	cursor: default;
  }
  
  .toggle-switch input:not(:checked) + label:hover {
	opacity: 0.5;
  }
  
  .toggle-switch label {
	color: #fff;
	opacity: 0.33;
	cursor: pointer;
	transition: opacity 0.3s ease-in-out;
  }
  
  .toggle-switch .toggle-outside {
	height: 100%;
	border-radius: 17px;
	padding: 11px;
	overflow: hidden;
	transition: opacity 0.3s ease-in-out;
  }
  
  .toggle-switch .toggle-inside {
	border-radius: 50%;
	background: #424242;
	position: absolute;
	transition: all 0.3s ease-in-out;
  }
  
  .switch-vertical {
	background-color: #00F;
	width: 0px;
	height: 60px;
	margin-left: 27px;
  }
  
  .switch-vertical input {
	height: 100%;
	width: 60px;
	right: 0;
	margin: 0;
  }
  
  .switch-vertical label {
	display: none;
	position: absolute;
	font-size: 15px;
	line-height: 30px;
	width: 80px;
	height: 50%;
	margin: 0;
	text-align: left;
	padding-left: 12px;
  }
  
  .switch-vertical .toggle-outside {
	background: rgba(32, 31, 31, 0.5);
	position: absolute;
	width: 1px;
	height: 24px;
	right: 0;
	top: 0;
  }
  
  .switch-vertical .toggle-inside {
	height: 17px;
	left: 3px;
	top: 3px;
	width: 17px;
  }
  
  .switch-vertical input:checked ~ .toggle-outside .toggle-inside {
	top: 3px;
  }
  
  .switch-vertical input ~ input:checked ~ .toggle-outside .toggle-inside {
	top: 24px;
  }

  

  /**** End Vert Switch ****/