/*---------------------------------------------------------
   ADD CARDS
   ---------*/
   
.modal-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    background: rgba(34,34,34,0.9);
    z-index: 1;
}
#addselectmodal{
    position: absolute;
    width: 30rem;
    height: 180px;
    z-index: 2;
    top: 50%;
    left: 50%;
    margin-left: -15rem;
    margin-top: -14rem;
    display: block;
    background: #fff;
    border-radius: 0.4375rem;
    color: #222;
    text-align: center;
    padding-top:40px;
    font-size:24px;
}

#searchbar{
  font-size:14px;
  padding:10px;
  color:white;
  text-align:center;
}

#addbox{
  position:fixed;
  left:0; top:45px;
  width:100%;
  margin:0;
  overflow-y: auto;
  bottom:0;
}
/*#thecards{
  top:370px;
  display:block;
  position:fixed;
  padding-left:0;
  overflow-y: auto;
  bottom:0;
}*/
.onecard{
  display:block;
  left:0px;  width:100%;
  opacity:1; transition:opacity 350ms;
  transform: scaleY(1);
  padding-bottom:14px;
  /*overflow: hidden;*/
}
.onecard.animate{
  opacity:50%;  transition:opacity 350ms;
  transform: scaleY(0.5); transform-origin: top; transition: transform 0.26s ease;
}
.num{
  padding-top:4px;
  float: left;
  text-align:right;
  width:35px;
  font-size:12px;
  color:lightgray;
}
.glyphicon-remove-sign{
  color:OrangeRed;
}
.js-btnadd, .restorecard, .glyphicon-ok-sign{
	color:Chartreuse;
}
.cardcircle{
	font-size: 25px;
	float:right;
	width:35px;
	text-align:center;
}
.card{
/*  float: left;
  width:81%;*/
margin-left:35px;
margin-right:35px;
}
.cardelement{
    border-style: solid;
  border-width:2px;
    border-color: lightgray;
  margin-bottom:2px;
  /*min-height:18px;*/
  background-color:ivory;
  width:100%;
}

.inputfield{
  width:100%;
  padding:4px;
  /*margin-left:10%;*/
  /*margin-left:35px;
  margin-right:35px;*/
  margin-bottom:5px;
  border: 1px solid lightgray;
  background:white;
  /*height:60px;*/
  font-size:18px;
  /*padding-left:10px;*/
  word-wrap: break-word;
}

#buttonstrip{
  display:block;
  /*background:#cce6ff;*/
  /*height:50px;*/
  text-align:center;
  /*vertical-align: middle;*/
  padding-bottom:15px;
}
#newcardspace{
	background:Green;
	padding-top:17px;
}

@keyframes shrink{
  from {
    transform: scale3d(1, 1, 1);
  }
  50%{
    transform: scale3d(0.9, 0.9, 0.9);
  }
  to {
    transform: scale3d(1, 1, 1);
      height:auto;
  }
}
.animatenew{
  animation-duration: 0.7s;
  animation-fill-mode: both;
  animation-name: shrink;
}

/*---------------------------------------------------------
   EXPORT
   ------*/

.js-btnimport, .js-btnexport{
	position:relative;
	top:15px;
}

#showexport{
	display:none;
	position:absolute;
	width:80%; height:75%;
	top:15%; left:10%;
	background-color:white;
	border-color:gray;
	box-shadow:5px 5px 5px #111;
	padding:12px;
}
#showexportlist{
	width:100%; height:90%;
	position:relative;
	background-color:white;
	overflow-y:scroll;
}
#exportarea{
	width:2em; height:2em;
	position:fixed;
	top:0; left:0;
	/*background:transparent;*/
}


/*---------------------------------------------------------
   SETS
   ----*/
   
#sets{
  position:inline;
  padding-left:5%; padding-top:70px; padding-right:5%; padding-bottom:40px;
  text-align:center;
  width:100%;
  margin:0;
  overflow-y: auto;
  bottom:0;
  color:white;
    position: absolute;
    top: 0px;
}
#decktable{
	table-layout:fixed;
	width:100%;
	padding:10px;
}
#decktable tr:nth-child(odd) td{
	background:ivory;
}
#decktable tr:nth-child(even) td{
	background:seashell;
}
#decktable td{
  border-bottom: 5px solid #444;
  min-height:40px;
  font-size:14px;
  word-wrap: break-word;
  color:navy;
  padding:10px;
}

#newset{
  position:inline;
  padding-top:5%; padding-bottom:5%;
  left:0px; right:0px;
  text-align:center;
  width:100%;
  margin:0;
  overflow-y: auto;
  bottom:0;
  color:white;
  background-color:#393990;
  /*margin:5%;*/
  border-radius:3px;
}
#newsettable{
	margin-left:0%;
	margin-right:0%;
	width:80%;
	text-align:left;
	color:black;
	font-size:12px;
}
#newsettable td{
  /*border: 1px solid lightgray;
  background:ivory;*/
  min-height:30px;
  font-size:12px;
  word-wrap: break-word;
  /*color:black;*/
  padding-left:10px; padding-right:10px;
  padding-top:4px; padding-right: 4px;
}
#newsettable input{
	font-size:14px;
}
#newsettable td.td1{
	text-align:right;
	color:white;
}


@keyframes shake {
  10%, 90% {transform: translate3d(-1px, 0, 0);}
  20%, 80% {transform: translate3d(2px, 0, 0);}
  30%, 50%, 70% {transform: translate3d(-4px, 0, 0);}
  40%, 60% {transform: translate3d(4px, 0, 0);}
}
.apply-shake {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}