/* 
 * ---------------------------------------------> DASHBOARD
 * */
body.dashboard { background: rgba(0,0,0,0.02); }

.first-login { margin-top: 100px; }
.first-login h1 { margin-bottom: 30px; }

.box { width: 90%; border: 1px solid #efefef; border-radius: 5px; margin-bottom: 3em; padding: 0; background: #fff; 
transition: .3s; 
/* box-shadow: -1px 2px 3px rgba(0,0,0,0.2);  */
border: 1px solid rgba(0,0,0,0.2);
}
.box:hover { box-shadow: -1px 2px 2px rgba(0,0,0,0.2); color: #036; cursor: pointer; }
.box:hover h3 a { color: #2a6496; transition: .3s; }

.box a:hover { text-decoration: none; }

.box .head { display: block; position: relative; background-image: url(../i/image-placeholder.png); background-repeat: no-repeat; background-size: cover; height: 300px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom: 1px solid rgba(0,0,0,0.1); }


/* .box .head a { color: #fff; } */
.box h3 { color: #333; padding: 10px 0 0 10px; margin: 0; }
/* truncate overly long titles */
.box h3 { width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box h3 a { color: #333; }
.box ul.icons { list-style: none; position: absolute; top: 10px; right: 10px; }
.box ul.icons li { width: 20px; float: left; margin-left: 10px; }
.box ul.icons li a { width: 20px; float: left; margin: 5px 20px 0 0; opacity: 0.8; color: #000; }
.box ul.icons li a.disabled { opacity: 0.5; }
.box ul.icons li a:hover { opacity: 1; color: #2a6496; animation: fadein 2s; }
.box ul.icons li a.delete-issue:hover { color: #d2322d; }

.box .stats  { padding: .5em 0 1em 0; position: relative; }
.box .stats ul.traffic { display: none; list-style: none; margin: 0 5%; padding: 0; }
.box .stats ul.traffic li  { display: inline-block; width: 32%; text-align: center; font-size: 90%; color: #999; }
.box .stats ul.traffic li strong { display: block; font-size: 270%; font-weight: normal; color: #333; }
.box .stats button { margin: 2em auto; text-align: center; display: block; width: auto; font-size: 110%; transition: .3s; border: 1px solid rgba(0,0,0,0.1); }
.box .stats button.publish:hover { background: #080; color: #fff; transition: .3s; }
.box .stats button.published { background: #060; color: #fff; border: 1px solid rgba(0,0,0,0.3); }
.box .stats button.published:hover { background: #040; }
.box .stats .clone { margin: 0 auto; text-align: center; display: block; color: grey; }
.box .stats .clone { display: none; }
a.disabled { opacity: 0.5; }
a.clone-issue { text-align: center; color: #999; margin: -.5em auto 0 auto; display: block; padding: 0; }
a.clone-issue:hover { color: #080; transition: .3s; }

.box .options ul { list-style: none; margin: 0 5%; padding: 0; }
.box .options li  { display: inline-block; width: 32%; text-align: center; text-size: 80%; padding: .4em 0;}
.box .options li a { color: #333; }
.box .options li a:hover { color: #2a6496; }
.box .options ul li:nth-child(even) { border-left: 1px solid #ccc; border-right: 1px solid #ccc; }

input.share { border: none; }
input.share ::selection { background: #ffcc33; }


/* Cover Preview Thumbnails */
/* @note overwrites prev .box css */
div.box { width: 100%;  margin-bottom: 1em;}
div.box .head {
	position: relative;
	display: block;
	height: 200px;
	overflow: hidden;
	width: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}



div.box .head h1 { font-size: 1.7em; position: absolute; }
div.box .head .extra { position: absolute; }
div.box .head .logo { position: absolute; width: 60px; height: 40px; }
div.box .head img { width: 100%; }

div.box .head.original h1 { width: 90%; top: 10px; left: 10px; }
div.box .head.original .logo { bottom: 15px; left: 10px; overflow: hidden; }

div.box .head.plain h1 { text-align: center; top: 30%; max-width: 70%; margin: 0 15%;  }
div.box .head.plain .extra { top: 10%; left: 5%; width: 90%; height: 80%; border: 1px solid #fff; }
div.box .head.plain .logo { top: 0; left: 50%; }
div.box .head.plain .logo .img-wrap { position: relative; left: -60%;  background: #fff; width: 80px; padding: 10px;}
div.box .head.plain .logo .img-wrap img {  }

div.box .head.strip h1 { text-align: center; top: 60px; width: 40%; left: 30%; }
div.box .head.strip .extra { top: 0; left: 25%;; width: 50%; height: 100%; background: rgba(0,0,0,0.5); }
div.box .head.strip .logo { left: 50%; display: block; }
div.box .head.strip .logo img { position: relative; left: -50%; }

.modal-new .modal-dialog { width: 700px; }
.modal-new .modal-header {background: transparent; color: #333; text-align: center; border-bottom: none; }
.modal-new .modal-header button.close { color: #333; }
.modal-dialog.modal-md { width: 675px; }
h2.modal-title { margin: 10px 0; padding: 0; }

.modal-content.v2  { padding: 1em 2em; }
.modal-content.v2 .input-lg  { margin: 1em 0; }
.modal-content.v2 h2.modal-title { text-align: left; font-weight: bold; }

/* .create-template button { border: none; background: transparent; border-top: 150px solid #2CA05A; margin-left: 15px; color: #2CA05A; width: 120px; line-height: 200%; } */
/* .create-template button:hover { border-color: #fc3; color: #333; } */
a.create-template { width: 130px; display: inline-block; text-align: center; position: relative; margin: 5px 10px 50px 10px; color: #2CA05A; }
a.create-template img { max-width: 130px; padding-bottom: 10px; }
a.create-template .description { display: block; opacity: 0; position: absolute; top: 0; left: 0; width: 130px; height: 177px; background: #2CA05A;  color: #fff; transition: .2s linear all; }
a.create-template .description p { text-align: left; padding: 2em 1em; font-size: 120%; }
/* a.create-template:hover > .description { opacity: 1; } */

body.minimal  { padding-bottom: 5em; }
body.minimal h1 { font-weight: bold; }
body.minimal .btn-lg { margin-top: 1em; }

/* 
 * ---------------------------------------------> Upgrade Modal
 * */
#upgradeModal {}
#upgradeModal .modal-dialog { width: 700px; }
#upgradeModal .modal-header { background: transparent; text-align: center; border: none;}
#upgradeModal .modal-header h2 { color: #2ca05a; margin: .5em 0 .5em 0; }
#upgradeModal .modal-header h3 { color: #808080; margin: 0 0 1em 0;}
#upgradeModal  ul { color: #2ca05a; margin: 0 0 2em 0; list-style: none; }
#upgradeModal  ul li { margin: 0 0 1em 0; }
#upgradeModal  .btn { margin: 2em 0 1em 0; padding: .5em 2em;}
#upgradeModal  a.btn { color: #000; }
#upgradeModal  .btn-upgrade { background: #fc3; }
#upgradeModal  .btn-cancel { background: #fff; border-color: #fff; }

/* 
 * ---------------------------------------------> SMALLER SCREENS
 * */
@media screen and (max-width: 800px) {
.box { width: 90%; margin: 1em 5%; }

}