﻿.vCenter {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(15px, -50%);
    -ms-transform: translateY(15px, -50%);
    transform: translate(15px, -50%);
}
.fullwidth { width:100%;}
.wide10 { padding: 0 10%; }
p { margin: 1em 0 0.5em 0;}
a.link {cursor:pointer;}
.underline {text-decoration:underline;}
.line {white-space:nowrap;}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
.left {float:left;}
.flex { 
    display:flex;
    /*flex-wrap:wrap;*/
    justify-content:center;
}

small, .small { font-size: 80%; }

input { border-width:0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px;}
input.rounded { position: relative; width: 96%; z-index:1; right:0; top:0;}
.status {
    color:#E52530;
    white-space:nowrap;
}
.error {
    color:#E52530;
    font-size:14px;
    font-weight:bold;
    white-space:nowrap;
    width:100%;
    /*display:none;*/
}
.op {
    color:#2B982B;
    white-space:nowrap;
    display:none;
}

[ng-click] {cursor:pointer;}

#recent_proj {
    background-color:#f3f3f3;
    padding: 0;
}
#edit_proj {
    background-color:#f3f3f3;
}
#pricing { width:350px; margin:1em auto;}
#pricing > div {background-color:#f3f3f3; margin:0.3em 0;}
#pricing > div > span { display:inline-block; padding:0.5em 1em; }
#pricing > div > span:first-child { width:100px; }
#recent_proj h2, #edit_proj h2 {
    background-color:#e0e0e0;
    padding: 1em 0;
    margin:0;
}
#pricing h2 {
    background-color:#e0e0e0;
    padding: 0.5em 0;
    margin:0;
}
#edit h4 {display:inline; font-weight:bold;}
.proj_view {text-align:center; padding-bottom:1em;}

.proj_row { margin: 0 1em; padding:0.6em 0; position:relative; overflow:hidden; transition:0.8s; }

.proj_row:not(:last-child) { border-bottom: 1px solid #303030; }
.proj_row::after { clear:both; content:""; display:block; }
.proj_row > span { display:inline-block; vertical-align:middle; width:65%; }
.proj_row > .name { overflow:hidden; text-overflow:ellipsis; }
.proj_row > .view_thumb { float:left; position:relative;}
.view_thumb img { max-height:5em; }
.view_icon {position:absolute; left:1.6em; top:0.8em; color:white; font-size:1.3em;}
.view_icon > i:first-child { opacity:0.8;}
.view_icon .fa-inverse {opacity:1; color:#e52530;}

#proj_vis { margin:0 2em; position:relative;}
.pageEl { position:absolute; box-sizing: border-box; text-align:center;}
.pageEl:hover { border:1px solid #e52530;}
.pageEl.selected { border:3px solid #e52530;}

#list_vis {position:relative; padding:0.5em 0 1em 0;}
.pageItem { box-sizing: border-box; text-align:center; position:relative; display:inline-block; padding:0.2em;}
.img_block { position:relative; display:inline-block;}
.img_block img { width:100%;}
.img_block img.disabled {opacity:0.3;}

.swiper_button_next, .swiper_button_prev {
    position: absolute;
    top: -0.5em;
    z-index: 10;
    cursor: pointer;
    font-size:150%;
    color:#E52530;
}
.swiper_button_next.swiper-button-disabled, .swiper_button_prev.swiper-button-disabled {color:#a0a0a0;}
.swiper_button_next {left: 10px; right:auto;}
.swiper_button_prev {right: 10px; left:auto;}

.lowDPI {width:100%; position:absolute; right:0; bottom:0; background-color:#de8100; opacity:0.8; color:white; display:inline-block; padding:0.5em 0;}
#edit_proj.single .lowDPI {bottom:initial; top:0;}
#edit_proj.single .pageEl:hover { border:0;}
#edit_proj.single #proj_vis img {
    -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.3);
}
.pageTools {height:2em; display:inline-block;}
.pageTools .tool_btn {margin:1em 0.5em 0 0.5em; height:2em;}

#framesTool {text-align:center;}
#framesTool img {
    width:5em; margin:1em 0.5em 0.5em 0.5em;; border-radius:8px;
    -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.3);
}
#framesTool img.selected {border:solid #e52530 2px;}

#tool_bar, #order, #uploader { background-color: #e0e0e0; text-align:center; }
#tool_bar > div > span, .tool_btn { background-color: #e52530; color:white; padding:0.5em; margin:1em 0.5em; display:inline-block;}
#tool_bar > div > span.disabled { background-color: #a0a0a0; }
#tool_bar > div > span.white { background-color: white; color:initial;}

#order .op_status {color:#e52530; text-align:center; padding-bottom:0.5em;}

#editor_area { position:relative; padding:2em 0;}
#crop_container { display:none; overflow:hidden; position:absolute; top:0; width:100%; height:100%; z-index:10;}
#crop_container > img { max-width:100%;}

@media only screen and (min-width: 950px) {
    .swiper-container { width:100%; height:initial;}
    #slides.swiper-container { background-color:#e52530; }
    .swiper-slide { width:initial; height:initial;}
    #slides .swiper-pagination { display:none; }
    #recent_proj { margin-left:1em; width:40%; max-width:430px; }
    #edit_proj { width:60%; flex-grow:1; }
    #edit_proj.single { width:680px; }
}
@media only screen and (max-width: 1200px) {
}
@media only screen and (min-width: 481px) {
    .mobile_only {display:none !important;}
}
@media only screen and (max-width: 480px) {
	/* mobile */
    .wide10 { padding: 0 2%; }
    #main_container, #highlights { flex-direction:column; }
    #recent_proj { margin-bottom:1em; }
    .proj_row > span { width:60%; }
    #tool_bar > span, .pageTools { font-size:66%;}
    #framesTool img { width:4em;}
    .proj_row.ng-enter, .proj_row.ng-leave.ng-leave-active { height: 0;}
    .proj_row.ng-enter.ng-enter-active, .proj_row.ng-leave { height: 6.2em;}
    #pricing { padding: 0 2%; width:100%; }
    #pricing > div > span:first-child { width:150px; }
}
@media only screen and (max-width: 380px) {
	/* mobile */
    #pricing > div > span:first-child { width:120px; }
}

/*
 * jQuery File Upload Plugin CSS 1.3.0
 * https://github.com/blueimp/jQuery-File-Upload
 */

.container { position:relative; }

.fileinput-button input {
  position: absolute;
  display:block;
  top: 0px;
  right: 0;
  margin: 0;
  opacity: 0;
  -ms-filter: 'alpha(opacity=0)';
  cursor: pointer;
    padding: 0;
    width:10%;
}
.cancel-button 
{
  /*float:right;*/
  color: #e52530;
  padding:0 10px;
  text-decoration: none;
  cursor: pointer;
  font-size:1.4em;
}
.cancel-button.disabled {color:#a0a0a0;}
#uploader {padding-top:1em;}
.file-name {display:none;}
.uploading {display:inline-block; height:2em;}
.progress {
  height:1em;
  width:50%;
  display:inline-block;
  border: solid 1px #b0b0b0;
  border-radius: 1em;
}
.progress.hide { display:none; }
.progress-bar {
  width:0%;
  background-color: #e52530;
  height:100%;
  margin-left:100%;
  border-radius: 1em;
}
#loading {
    display:none; 
    width:64px; 
    height:64px; 
    position:absolute; 
    top:162px; 
    right:50%;
    transform: translateX(50%);
}
/* Fixes for IE < 8 */
@media screen\9 {
  .fileinput-button input {
    filter: alpha(opacity=0);
    font-size: 100%;
    height: 100%;
  }
}
