html, body {
	height: 100%;
}

body{
	min-height: 100%;
	font-family: "PT Sans", "Arial";
	background-color: #f9f9f9;
}

.shadow{
	-webkit-box-shadow: 0 0 10px 2px rgba(0,0,0,0.2) ;
	box-shadow: 0 0 10px 2px rgba(0,0,0,0.2) ;
}

.center{
	text-align: center;
}

.right{
	text-align: right;
}

.radius10{
	border-radius: 10px;
}

.container{
	margin: 0 auto 20px;
	padding: 30px;
	max-width: 1024px;
	min-height: 100%;
/*	padding-bottom:100px;*/
	border-radius: 10px;
}

.chapterlist{
	margin-top: 20px;
	border: #eeeeee solid 1px;
	border-radius: 10px;
	font-size: 16pt;
	font-weight: bold;
	color: #ffffff;
	padding: 13px;
	background-color: #999999;
	cursor: pointer;
}

.header{
	font-size: 16pt;
	font-weight: bold;
	color: #556600;
	padding: 10px;
}

ol{
	font-size: 16pt;
}

ol li.chapterlist h3{
	font-size: 16pt;
	color: #000099;
}


.basket{
	background: #ffc37a;
	color: #ffffff;
	border: #eeeeee solid 1px;
	border-radius: 9px;
}

.basket button{
	border-radius: 7px;
	background: white;
	color: gray;
	border: #eeeeee solid 1px;
	padding: 10px;
	cursor: pointer;
}


.half{
	width: 40%;
}

.red{
	color: red;
}

.padding30{
	padding: 30px;
}

.padding20{
	padding: 20px;
}

.padding10{
	padding: 10px;
}

.margin20{
	margin: 20px;
}

.margin30{
	margin: 30px;
}

.margin10{
	margin: 10px;
}

.margintop10{
	margin-top: 10px;
}

.margintop20{
	margin-top: 20px;
}

.padding5{
	padding: 5px;
}

.border{
	border: solid red 0px;
}

.bordertop{
	border-top: solid #aaaaaa 1px;
}

.flex{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;
	align-items: stretch;
}

.item {
	padding:10px;
	background-color: #ffffff;
	border: #eeeeee solid 1px;
	margin-top: 10px;
	border-radius: 10px;
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.item .ico{
	cursor: pointer;
	min-width: 160px;
	text-align: center;
}

.item .title{
	color: #555555;
	font-size: 18px;
	cursor: pointer;
}

.item .plashka{
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	border-radius: 10px;
	min-width: 200px;
}

.item .plashka .price{
	font-size: 16pt;
	font-weight: bold;
	color: #777777;
}

.item .plashka .unit{
	font-size: 10pt;
	color: #aaaaaa;
}

.item .plashka .butt1{
	text-align: center;
	padding: 20px;
}

.item .plashka .buy{
	background-color: lightgreen;
	font-size: 12pt;
	color: #ffffff;
	padding: 8px;
	border-radius: 6px;
	border: solid #cccccc 1px;
	cursor: pointer;
}

.item .plashka .butt1 button,
.item .plashka .butt1 input{
	padding: 3px;
	font-size: 12pt;
	font-weight: bold;
	margin:-1px;
}

.item .plashka .butt1 button{
	width: 26px;
	cursor: pointer;
}

.item .plashka .butt1 input{
	text-align: center;
	width: 36px;
}

.item .plashka .butt2{
	text-align: center;
	padding: 20px;
}

.summ{
	color: red !important;
	font-weight: bold;
}


/* *** FADE *** */
.fade-enter-active{
  transition: opacity 0.3s ease;
}
.fade-leave-active {
  transition: opacity 0.1s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* *** SLIDE *** */
.slide-enter-active {
  transition: all 0.1s ease-out;
}
.slide-leave-active {
  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-enter-from,
.slide-leave-to {
  transform: translateX(40px);
  opacity: 0;
}

/* *** COMBO *** */
.combo-enter-active {
  transition: all 0.2s ease-out;
}
.combo-leave-active {
  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
}

.combo-enter-from{
  transform: translateX(40px);
  opacity: 0;
}

.combo-leave-to {
/*  transform: translateX(40px);*/
  opacity: 0;
}

/* *** POP UP BOX *** */
#popup-overlay {
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}

#popup {
  position: absolute;
  display: block;
  margin-top: 20px; 
  min-width: 300px;
  max-width: 1024px;
  min-height: 100px;
  background-color: #fefefe;
  border-radius: 10px;
  color: #333333;
  padding: 20px;
}

#title{
	text-align: center;
}

#article{
	text-align: right;
}

#footer{
	margin-top: 20px;
	text-align: center;
}

#footer button{
	border: solid #aaaaaa 1px;
	border-radius: 5px;
	padding: 7px;
	cursor: pointer;
}

.button{
	border-radius: 5px;
	padding: 7px;
	cursor: pointer;
}

.pre-wrap{
	white-space: pre-wrap;       /* Since CSS 2.1 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
}

.bold{
	font-weight: bold;
}

.router-link-active,
.router-link-exact-active{
	border: solid red 2px;
	border-radius:5px;
}


/* ***DROP FILES*** */
.dropzone-container {
    padding: 2rem;
    margin: 2rem;
    background: #f7fafc;
    border: dotted 5px #cccccc;
}

.hidden-input {
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
}

.file-label {
    font-size: 20px;
    display: block;
    cursor: pointer;
}

.preview-container {
    display: flex;
    flex-wrap: wrap;
	align-content: flex-end;
	align-items: flex-start;
    margin-top: 2rem;
}

.preview-card {
    display: flex;
    border: 1px solid #a2a2a2;
    padding: 5px;
    margin-left: 5px;
    margin-top: 5px;
}

.preview-img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #a2a2a2;
    background-color: #a2a2a2;
}