html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html, body {height:100%; width:100%; font:          normal 400 18px/1 "Calibri", sans-serif;}


/*svg {display:none;}*/

a, button, i, span, li {-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;}

input {text-align:    center;}

nav {text-align:center; margin-bottom:1em;}

button {display:block;
background:    #3d85c6;
border-radius: 5px;
color:         #fff;
display:       inline-block;
padding:       8px 20px;
font:          normal 700 24px/1 "Calibri", sans-serif;
text-align:    center;
text-shadow:   none;
border: 0;
margin:auto;
  cursor:pointer;
  
}

button:hover {background-color: #3498DB;}

button:nth-child(1), button:nth-child(2) {margin-right:10px;}

button:focus, input:focus, select:focus {
  outline-color: transparent;
  outline-style: none;
}

.animate
{
	transition: all 0.1s;
	-webkit-transition: all 0.1s;
}

.action-button
{

}

.blue
{
	background-color: #3498DB;
	border-bottom: 5px solid #2980B9;
	text-shadow: 0px -2px #2980B9;
}
.action-button:active
{
	transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
	border-bottom: 1px solid;
}


#roll {width:150px;}

#numDice,
#diceSides {
  font-size: 24px;
  margin-bottom: 1em;
}

#typeODice {padding:0;
text-align:center;  margin:0 auto 1em auto;
  top:0; background-color:#003F8B; width:100%;
padding-top:10px;
padding-bottom:10px;
  color:white;
  font-weight:bold;
}

#typeODice li .more {color:#ffffff; font-size:1.3em; line-height:1em;}

nav ul, #typeODice  section ul {list-style-type: none; margin:0; padding:0;}
nav ul span li button {margin-left:-1.5em;}
nav ul li {padding:0; margin-bottom:.25em;}

#typeODice  section ul {margin-top:.25em;}

#typeODice li {display:inline-block; padding:0;margin:0;}
#typeODice li:nth-child(1) {margin-right:10px;}
#typeODice input, #typeODice label, #typeODice select {margin:0;}

#diceTower {
  width:100%;
  margin-bottom:1em;
  display: inline-flex;
  /* or inline-flex */
  flex-direction: row;
  /* row | row-reverse | column | column-reverse;*/
  flex-wrap: wrap;
  /* nowrap | wrap | wrap-reverse;*/
  
  justify-content: center;
  space-between:0px;
  /* flex-start | flex-end | center | space-between | space-around */
}

.die {
  display: inline-block;
  height: 100px;
  width: 100px;
  background-color: white;
  border-radius: 12px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border: 2px solid rgb(200,200,200);
  padding: 5px;
  overflow: hidden;
  cursor: pointer;
  margin:5px;
  flex-basis: 100px; /*<length> | auto;  default auto */
  background: rgb(255, 255, 255);
background: -moz-linear-gradient(45deg, rgb(255, 255, 255) 50%, rgb(200, 200, 200) 50%);
background: -webkit-linear-gradient(45deg, rgb(255, 255, 255) 50%, rgb(200, 200, 200) 50%);
background: -o-linear-gradient(45deg, rgb(255, 255, 255) 50%, rgb(200, 200, 200) 50%);
background: -ms-linear-gradient(45deg, rgb(255, 255, 255) 50%, rgb(200, 200, 200) 50%);
background: linear-gradient(135deg, rgb(255, 255, 255) 50%, rgb(200, 200, 200) 50%);
}





.locked {border:2px solid  #3d85c6!important;}

.die ul {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color:white;
  width:100%;
  height:100%;
  border-radius: 12px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  position:relative;
  background-color:rgb(225,225,225);
}

.die ul li {
  line-height: 70px;
  font-size: 80px;
  text-align: center;
  vertical-align: middle;
 /**/ color: rgb(150, 150, 150);
  text-shadow: -1px -1px 0px rgb(100,100,100),1px 1px 0px   rgb(255,255,255);
}

.die.this4sided ul:before, .die.this6sided ul:before, .die.this8sided ul:before, .die.this10sided ul:before, .die.this12sided ul:before, .die.this20sided ul:before {
  position:absolute;
  font-size:16px;
  bottom:3px;
  right:3px;
}



.die.this4sided ul:before {
  content: "4";
  color: #0b4865;
}

.die.this4sided {
background: #9CDEFE;
background: -moz-linear-gradient(#9CDEFE 50%, #14A5EB 50%);
background: -webkit-linear-gradient(#9CDEFE 50%, #14A5EB 50%);
background: -o-linear-gradient(45deg, #9CDEFE 50%, #14A5EB 50%);
background: -ms-linear-gradient(45deg, #9CDEFE 50%, #14A5EB 50%);
background: linear-gradient(135deg, #9CDEFE 50%, #14A5EB 50%);
}

.die.this4sided ul {background-color:#54c7fc;}
.die.this4sided ul li {
color: #0b4865;
  text-shadow: -1px -1px 0px rgb(100,100,100),1px 1px 0px   rgb(255,255,255);
}






.die.this6sided ul:before {
  content: "6";
  color: #6e90a2;
}

.die.this6sided {
background: #fff;
background: -moz-linear-gradient(#fff 50%, #A4BDCA 50%);
background: -webkit-linear-gradient(#fff 50%, #A4BDCA 50%);
background: -o-linear-gradient(45deg, #fff 50%, #A4BDCA 50%);
background: -ms-linear-gradient(45deg, #fff 50%, #A4BDCA 50%);
background: linear-gradient(135deg, #fff 50%, #A4BDCA 50%);
}

.die.this6sided ul {background-color:#D2DFE6;}
.die.this6sided ul li {
color: #6e90a2;
  text-shadow: -1px -1px 0px rgb(100,100,100),1px 1px 0px   rgb(255,255,255);
}


.die.this8sided ul:before {
  content: "8";
  color: #553300;
}

.die.this8sided {
background: #fff;
background: -moz-linear-gradient(#FFD292 50%, #AE6600 50%);
background: -webkit-linear-gradient(#FFD292 50%, #AE6600 50%);
background: -o-linear-gradient(45deg, #FFD292 50%, #AE6600 50%);
background: -ms-linear-gradient(45deg, #FFD292 50%, #AE6600 50%);
background: linear-gradient(135deg, #FFD292 50%, #AE6600 50%);
}

.die.this8sided ul {background-color:#ff9600;}
.die.this8sided ul li {
color: #553300;
  text-shadow: -1px -1px 0px rgb(100,100,100),1px 1px 0px   rgb(255,255,255);
}


.die.this10sided ul:before {
  content: "10";
  color: #97001E;
}

.die.this10sided {
background: #fff;
background: -moz-linear-gradient(#FF728E 50%, #E1002C 50%);
background: -webkit-linear-gradient(#FF728E 50%, #E1002C 50%);
background: -o-linear-gradient(45deg, #FF728E 50%, #E1002C 50%);
background: -ms-linear-gradient(45deg, #FF728E 50%, #E1002C 50%);
background: linear-gradient(135deg, #FF728E 50%, #E1002C 50%);
}

.die.this10sided ul {background-color:#ff2851;}
.die.this10sided ul li {
color: #97001E;
  text-shadow: -1px -1px 0px #5D0012,1px 1px 0px   #FFEDF1;
}

.die.this12sided ul:before {
  content: "12";
  color: #115E5E;
}

.die.this12sided {
background: #fff;
background: -moz-linear-gradient(#A7F9F9 50%, #009494 50%);
background: -webkit-linear-gradient(#A7F9F9 50%, #009494 50%);
background: -o-linear-gradient(45deg, #A7F9F9 50%, #009494 50%);
background: -ms-linear-gradient(45deg, #A7F9F9 50%, #009494 50%);
background: linear-gradient(135deg, #A7F9F9 50%, #009494 50%);
}

.die.this12sided ul {background-color:#3CC2C2;}
.die.this12sided ul li {
color: #115E5E;
  text-shadow: -1px -1px 0px #001414,1px 1px 0px   #ffffff;
}

.die.this20sided ul:before {
  content: "20";
  color: #167827;
}

.die.this20sided {
background: #fff;
background: -moz-linear-gradient(#A9FBB7 50%, #00BD21 50%);
background: -webkit-linear-gradient(#A9FBB7 50%, #00BD21 50%);
background: -o-linear-gradient(45deg, #A9FBB7 50%, #00BD21 50%);
background: -ms-linear-gradient(45deg, #A9FBB7 50%, #00BD21 50%);
background: linear-gradient(135deg, #A9FBB7 50%, #00BD21 50%);
}

.die.this20sided ul {background-color:#44db5e;}
.die.this20sided ul li {
color: #167827;
  text-shadow: -1px -1px 0px #001904,1px 1px 0px #ffffff;
}

#container {
  height:100%; width:100%;
background-color:#D2DFE6; }

#container p {text-align:center; padding:5px; color:#2e81b7; font-size: 16px;}

#saved {  height:100%; width:100%;
text-align:center;
}



.ui-draggable-dragging{
    box-shadow:0 0 2px #000;
    z-index:100;
}
.hide {display:none!important;}
.top {z-index:100;}
.icon {height:80px; width:80px;} 
#more {margin:0; padding:0; display:inline-block;}
#more i {color: rgb(175, 175, 175); font-size:44px; line-height:20px; padding:0;; display:inline-block; vertical-align: text-top; }
#more i:hover {color: rgb(200, 200, 200);}

#diceSides, select {
border:none;
  -webkit-appearance:none;
  padding:.25em;
}

#numDice {
  background-color: white;
	color: grey;
  
}

.die4sided {background-color: #54c7fc; color:#0b4865;}
.die6sided {background-color: #D2DFE6; color:#6e90a2;}
.die8sided {background-color: #ff9600; color:#553300;}
.die10sided {background-color: #ff2851; color:#fec0ce;}
.die12sided {background-color: #3CC2C2; color:#115E5E;}
.die20sided {background-color: #44db5e; color:#035e10;}
.dieXsided {background-color: #ffcd00; color:#8c6b04;}