@font-face {
  font-family: 'Cocogoose Classic Medium';
  src: url('../../../fonts/Cocogoose-Classic-Medium.woff2') format('woff2'),
  url('../../../fonts/Cocogoose-Classic-Medium.woff') format('woff');
}


body{
	max-height: 90vh;
  font-family: "Cocogoose Classic Medium";
  background: #f3f4f6
}

#MainSection{
  margin-top: 0.5em
}

#TopBanner{
	background-color: transparent;
	text-align: center;
}

.PageHeader {
  background-color: white;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

#ShapesArea {
background: #fffffff8;
  border: 5px solid red;
  padding-bottom: 5px;
  width: 30vh
}


#topBannerLogoSewBug{
	height: 10vh;
	width: auto;
	padding-bottom: 5px;
}

.shapesAreaFooter {
  width: 100%;
  display: flex;
  flex-direction:row;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 10px;
}

.SubHead{
	text-align: center;
}

.spacerDiv{
	height:3em;
}

.smallSpacerH3{
	height: 1.7em;
}

.layersLayerName{
  color:white;
  border:rgb(255, 226, 226);
  outline:#fff;
	width: 100%;
	margin-top: 1em;

  padding: 0.1em;
}

.myactive{
	background-color: #4ea78f;
}

#shapesContainer{
	max-height: 65vh;
	overflow-y: scroll;

}

.ShapeHolder{
	width: 100%;
	height: 15vh;
  border: 1px solid lightgray;
  border-radius: 10px;
  box-shadow: 0px 1px lightgray;

}

#LayersArea {
	height: 30vh;
	overflow-y: scroll;
  padding-right: 0;
  background: #fffffff8;
}

.LayersAreaContainer {
  background: #fffffff8;
}

.ResImg{
  width:100%;
  height:auto;
  border:1px white solid;
}

.premDis{
  border: 1px solid red;
}

/*Buttons*/
.third{
  width: 32%;
}

.btnMain{
	width: 100%;
	padding: 1px;
}

.btnWithIcon{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding-top: 0.5em;
}

.btnCYSS{
	background-color: #4ea78f;
	color: #fff;
}

.btnSmall{
	width: 95%;
	padding: 0px;
}

.btnPill{
	border-radius: 16px;
}

.centeredButtonColumn{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.startButtonColumn{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.endButtonColumn{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.layerSideBtn{
	height: 6vh;
}

.sliderVertical{
      writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* Chromium */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}

#addNewShapeBtn{
	height: 19vh;
	font-size: 1.5em;
}

#previewBtn{
	font-size: 1.5em;
}

#downloadBtn{
  font-size: 1.5em;
}

.PanDBtn{
	padding: .1em;
	font-size: 1.5em;
}

#resetZoomBtn {

}

/*end of buttons*/



/*Range styling*/



input[type=range] {
  -webkit-appearance: none;
  height: 80%;
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  margin: 5;
  width: 20%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  cursor: pointer;
  box-shadow: 0px 0px 0px #fffffff8;
  background: #180a5e;
  border-radius: 16px;
  border: 0px solid #000000;
  background: #c7c7c7;

}
input[type=range]::-webkit-slider-thumb {

  box-shadow: 0px 0px 0px #000000;
  border: 0px solid #2497E3 !important;
  height: 60px;
  width: 60px;
  border-radius: 60px;
  background: #4EA78F !important;
  cursor: pointer;

  margin-top: -12.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #c7c7c7;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 100%;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000;
  background: #180a5e;
  border-radius: 16px;
  border: 0px solid #000000;
  background: #c7c7c7;

}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 0px solid #2497E3;
  height: 20px;
  width: 20px;
  border-radius: 20px;
  background: #4EA78F;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #c7c7c7;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
  background: #c7c7c7;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px #000000;
  border: 0px solid #2497E3;
  height: 60px;
  width: 60px;
  border-radius: 30px;
  background: #4EA78F;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #4EA78F;
}
input[type=range]:focus::-ms-fill-upper {
  background: #4EA78F;
}
/*end of range styleing*/