@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot.jsf');
  src: url('../fonts/glyphicons-halflings-regular.eot.jsf') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff.jsf') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf.jsf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg.jsf') format('svg');
}

@font-face {
  font-family: 'Allstar';
  src: url('../fonts/allstar.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Ancona Cd';
  src: url('../fonts/Ancona-Cd-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Ancona Ex';
  src: url('../fonts/Ancona-Ex-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Arezzo';
  src: url('../fonts/Arezzo-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Balloon Caps';
  src: url('../fonts/Balloon-Caps-Xbold.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Bar';
  src: url('../fonts/Bar-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Baskerville';
  src: url('../fonts/Baskerville-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Bernhard Fashion';
  src: url('../fonts/Bernhard-Fashion.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Bluff';
  src: url('../fonts/Bluff.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Bodoni';
  src: url('../fonts/Bodoni-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Bonita';
  src: url('../fonts/Bonita.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'CalligraphScript';
  src: url('../fonts/CalligraphScript.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Canossa';
  src: url('../fonts/Canossa-Light.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Casual';
  src: url('../fonts/Casual.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Copperplate Gothic';
  src: url('../fonts/Copperplate-Gothic-Light.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Courier PS';
  src: url('../fonts/Courier-PS-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Dessau';
  src: url('../fonts/Dessau-Light.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Elegant Script';
  src: url('../fonts/Elegant-Script.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Elmore';
  src: url('../fonts/Elmore.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Falcon';
  src: url('../fonts/Falcon-Light.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FourthAvenue';
  src: url('../fonts/FourthAvenue.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FranklinGothic';
  src: url('../fonts/FranklinGothic-Medium.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FrontPage';
  src: url('../fonts/FrontPage-Medium.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Function';
  src: url('../fonts/Function-Light.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gainsborough';
  src: url('../fonts/Gainsborough.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Giulio';
  src: url('../fonts/Giulio-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Huntington';
  src: url('../fonts/Huntington-Light.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Imperial Std';
  src: url('../fonts/Imperial-Basics-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'LeHavre';
  src: url('../fonts/LeHavre.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Micro';
  src: url('../fonts/Micro-Medium.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MicroSquare';
  src: url('../fonts/MicroSquare-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Osborne';
  src: url('../fonts/Osborne.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Palmer';
  src: url('../fonts/Palmer-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Philadelphia';
  src: url('../fonts/Philadelphia-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Roman PS';
  src: url('../fonts/Roman-PS-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Stafford';
  src: url('../fonts/Stafford-Light.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TiogaScript';
  src: url('../fonts/TiogaScript-Medium.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Typewriter';
  src: url('../fonts/Typewriter-Medium.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ViolinScript';
  src: url('../fonts/ViolinScript.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

/** Start Google Fonts **/
@font-face {
  font-family: 'Aldrich';
  src: url('../fonts/Aldrich.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Arimo';
  src: url('../fonts/Arimo.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Istok Web';
  src: url('../fonts/IstOkWeb.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Overlock';
  src: url('../fonts/Overlock.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Signika';
  src: url('../fonts/Signika.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Ubunutu';
  src: url('../fonts/Ubunutu.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

/** End Google Fonts **/

/** Start Google 2017 Fonts **/
@font-face {
  font-family: 'Combo';
  src: url('../fonts/Combo-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Clicker Script';
  src: url('../fonts/ClickerScript-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Amatic SC';
  src: url('../fonts/AmaticSC-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Amatic SC';
  src: url('../fonts/AmaticSC-Bold.woff.jsf') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Sacramento';
  src: url('../fonts/Sacramento-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Ribeye Marrow';
  src: url('../fonts/RibeyeMarrow-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Reenie Beanie';
  src: url('../fonts/ReenieBeanie-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Petit Formal Script';
  src: url('../fonts/PetitFormalScript-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Pecita';
  src: url('../fonts/Pecita.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Parisienne';
  src: url('../fonts/Parisienne-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Oregano';
  src: url('../fonts/Oregano-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Oregano';
  src: url('../fonts/Oregano-Italic.woff.jsf') format('woff');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Kaushan Script';
  src: url('../fonts/KaushanScript-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Indie Flower';
  src: url('../fonts/IndieFlower-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Great Vibes';
  src: url('../fonts/GreatVibes-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Grand Hotel';
  src: url('../fonts/GrandHotel-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Englebert';
  src: url('../fonts/Englebert-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Unica One';
  src: url('../fonts/UnicaOne-Regular.woff.jsf') format('woff');
  font-weight: normal;
  font-style: normal;
}
/** End Google 2017 Fonts **/

.cewe-editor-iconset-up-brand,
.cewe-editor-iconset-down-brand {
  margin-left: 14px;
}

body {
  overflow: hidden;
}

body, .cewe-button-bar {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.cewe-pre-editor-stage {
  background-color: #ccc;
}

.full-width {
  width: 100%;
}

.cewe-flip-x-on {
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  -ms-transition: 0.5s ease;
  -o-transition: 0.5s ease;
  transition: 0.5s ease;

  -webkit-transform: rotateZ(180deg);
  -moz-transform: rotateZ(180deg);
  -ms-transform: rotateZ(180deg);
  -o-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
}

.cewe-flip-x-off {
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  -ms-transition: 0.5s ease;
  -o-transition: 0.5s ease;
  transition: 0.5s ease;

  -webkit-transform: rotateZ(0deg);
  -moz-transform: rotateZ(0deg);
  -ms-transform: rotateZ(0deg);
  -o-transform: rotateZ(0deg);
  transform: rotateZ(0deg);
}

.panel .panel-heading {
  color: #fff;
  background-color: #666;
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
  opacity: 0.45;
}

.cewe-spinner {
  height: 100px;
  width: 100px;
  animation: spinner-rotate 1.5s infinite linear;
  border: 12px solid #E10019;
  border-right-color: transparent;
  border-radius: 50%;
  background-color: #eee;
}

@keyframes spinner-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.cewe-spinner.stop {
  animation: spinner-rotate 0s infinite linear;
}

.cewe-projects-container {
  position: relative;
}

.cewe-projects-container .cewe-spinner {
  position: absolute;
  left: calc(50% - 50px);
  top: 40%;
  z-index: 1051;
}

.horizontal-scroll-area .cewe-spinner,
.vertical-scroll-area .cewe-spinner {
  position: relative;
  bottom: 20px;
  width: 50px;
  height: 50px;
  border-width: 4px;
}

.cw-guided-tour-box {
  min-width: 350px;
}

.cewe-btn-label-headline {
  line-height: 1.3;
}

.cewe-btn-label-subline {
  line-height: 1.1;
  font-size: 11px;
  color: #E1001A; /* <-- Frank Bruns 15.09.2014: This color setting needs to be moved to COPS CSS file. */
}

.btn.cewe-button-category-selection {
  height: 134px;
  width: 185px;
  border: none;
  background-color: #eeeeee;
  padding: 15px;
  position: relative;
  overflow: hidden;
  float: left;
}

.cewe-context-panel-area .btn.cewe-button-category-selection {
  height: 150px;
}

.cewe-btn-select-category {
  color: #c90014;
  height: 45px;
  width: 155px;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
  text-decoration: underline;
}

.cewe-btn-select-category:hover {
  color: #E10019;
}

.cewe-selected-category {
  font-size: 18px;
  height: 75px;
  width: 155px;
  margin-left: auto;
  margin-right: auto;
  display: table-cell;
  vertical-align: middle;
  line-height: 1.3;
  white-space: normal;
}

.cw-dialog {
  position: fixed;
  display: table;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  border: 1px solid #515151;
  background-color: #eeeeee;
  padding: 5px;
  z-index: 100;
}

.cw-dialog .cw-row {
  display: table-row;
}

.cw-dialog .cw-header {
  display: table-cell;
  height: 44px;
  width: 100%;
}

.cw-dialog .cw-content {
  display: table-cell;
  height: 100%;
  width: 100%;
  text-align: center;
  vertical-align: middle;
}

.cw-dialog .cw-footer {
  display: table-cell;
  height: 44px;
  width: 100%;
}

.cw-dialog .cw-header .btn,
.cw-dialog .cw-footer .btn {
  float: right
}

#designElementSwitcher .tab-icon {
  bottom: 3px;
}

#designElementSwitcher .tab-label {
  line-height: 1.8;
}

#designElementSwitcher .tab-content {
  border-left: 1px solid #DDDDDD;
  border-right: 1px solid #DDDDDD;
  border-bottom: 1px solid #DDDDDD;
  padding: 10px;
}

.cewe-color-chooser .cewe-color {
  margin: 5px;
  cursor: pointer;
}

.cewe-color-chooser .cewe-color,
.cewe-confirm-apply-colored-border-settings-dialog .cewe-color {
  width: 110px;
  height: 110px;
  border-style: solid;
  border-width: 2px;
  border-color: #e3e3e3;
}

.cewe-confirm-apply-colored-border-settings-dialog .cewe-color {
  margin: 15px auto;
}

.cewe-color-chooser .cewe-color:hover {
  border-style: solid;
  border-color: #ccc;
  border-width: 6px;
  border-radius: 50%;
}

.cewe-color-chooser .cewe-color.selected {
  border-style: solid;
  border-color: #888;
  border-width: 6px;
  border-radius: 50%;
}

/* --------------------------------
   Styling for Navigation tabset
   -------------------------------- */
#designElementSwitcher .nav {
  margin-bottom: 0;
  float: left;
  margin-right: 15px;
  width: 150px;
}

.designElementTabset {
  width: calc(100% - 160px);
}

.designElementChooser {
  float: left;
  width: auto;
}

.vertical-scroll-area {
  overflow-x: hidden;
  overflow-y: auto;
  white-space: nowrap;
  padding-left: 20px;
  background-color: #fff;
}

.vertical-scroll-area ul {
  margin: 0
}

.vertical-scroll-area li {
  float: left;
  display: inline-block;
  margin-top: 1px;
  margin-left: 0
}

.horizontal-scroll-area {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding-left: 20px;
  background-color: #fff;
}

.horizontal-scroll-area ul {
  margin: 0px;
}

.horizontal-scroll-area li {
  display: inline-block;
  margin-top: 1px;
  margin-left: 0px;
}

.headerRight {
  right: 0;
  top: 0;
  width: 160px;
  height: 134px;
  position: absolute;
  background-color: #e7e7e7;
  border-left: 1px solid #CCCBCB;
}

.header-logo {
  height: 67px;
  width: 160px;
  background: url("../images/defaultLogo/logo.png.jsf") no-repeat center center;
  background-size: contain;
  visibility: hidden;
}

.cewe-selection-tab-item {
  padding: 4px;
  cursor: pointer;
}

/* --------------------------------
   Styling for background selection tab
   -------------------------------- */

.background-selection-tab .background-item-template {
  display: table-cell;
  vertical-align: middle;
  overflow: hidden;
  background-size: cover;
}

.background-selection-tab .horizontal-scroll-area {
  background-color: #ffffff;
}

.background-selection-tab .cewe-background-category-container {
  height: calc(75vh - 150px);
  overflow-y: scroll;
}

.background-selection-tab .cewe-background-category-flyout {
  position: absolute;
  width: 810px;
  z-index: 1054;
}

.background-selection-tab .cewe-background-category {
  position: relative;
  float: left;
  width: 180px;
  height: 152px;
  margin: 5px;
}

.background-selection-tab .cewe-background-category-representative {
  position: absolute;
  width: 110px;
  height: 79px;
  margin: 5px;
  border: 1px solid #c0c0c0;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  cursor: pointer;
  background: no-repeat center center /cover;
}

.background-selection-tab .cewe-background-category-representative.first {
  top: 20px;
  left: 10px;
}

.background-selection-tab .cewe-background-category-representative.second {
  top: 10px;
  left: 34px;
  transform: scale(.95);
}

.background-selection-tab .cewe-background-category-representative.third {
  left: 54px;
  transform: scale(.9);
}

.background-selection-tab .cewe-label-background-category {
  position: absolute;
  top: 110px;
  width: 170px;
  text-align: center;
  font-size: 14px;
}

.background-selection-tab .cewe-modal-background {
  z-index: 1053;
}

.desktop-device .cewe-background-gradient {
  position: fixed;
  z-index: -1;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  background: -webkit-radial-gradient(transparent 50%, #eee 70%);
  background: -o-radial-gradient(transparent 50%, #eee 70%);
  background: -moz-radial-gradient(transparent 50%, #eee 70%);
  background: radial-gradient(transparent 50%, #eee 70%);
}

/* --------------------------------
   Styling for clipart and alpha mask selection areas
   -------------------------------- */

.clipart-item-box,
.alpha-mask-item-box,
.deco-frame-item-box {
  background-image: linear-gradient(white 20%, #eee 100%);
}

.alpha-mask-item-box .panel,
.deco-frame-item-box .panel {
  margin-bottom: 0;
}

.clipart-item-box:hover,
.alpha-mask-item-box:hover,
.deco-frame-item-box:hover,
.selected .clipart-item-box,
.selected .alpha-mask-item-box
.selected .deco-frame-item-box {
  background-image: none;
}

.clipart-selection-tab .clipart-item-template,
.cewe-alpha-mask-category-selection .alpha-mask-item-template,
.cewe-deco-frame-category-selection .deco-frame-item-template {
  display: table-cell;
  vertical-align: middle;
  overflow: hidden;
  background-color: transparent;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.clipart-selection-tab .horizontal-scroll-area {
  background-color: #ffffff;
}

.clipart-selection-tab .cewe-clipart-category-container,
.cewe-alpha-mask-category-selection .cewe-alpha-mask-category-container,
.cewe-deco-frame-category-selection .cewe-deco-frame-category-container {
  height: calc(75vh - 150px);
  overflow-y: scroll;
}

.clipart-selection-tab .cewe-clipart-category-flyout,
.cewe-alpha-mask-category-selection .cewe-alpha-mask-category-flyout,
.cewe-deco-frame-category-selection .cewe-deco-frame-category-flyout {
  position: absolute;
  width: 775px;
  z-index: 1054;
}

.cewe-alpha-mask-category-selection .cewe-alpha-mask-category-flyout .panel-heading,
.cewe-deco-frame-category-selection .cewe-deco-frame-category-flyout .panel-heading {
  background-color: #f5f5f5;
}

.cewe-alpha-mask-category-selection .cewe-alpha-mask-category-flyout,
.cewe-deco-frame-category-selection .cewe-deco-frame-category-flyout {
  bottom: 125px;
}

.clipart-selection-tab .cewe-clipart-category,
.cewe-alpha-mask-category-selection .cewe-alpha-mask-category,
.cewe-deco-frame-category-selection .cewe-deco-frame-category {
  position: relative;
  float: left;
  width: 175px;
  height: 168px;
  margin: 3px;
  text-align: center;
}

.clipart-selection-tab .cewe-clipart-category.selected,
.cewe-alpha-mask-category-selection .cewe-alpha-mask-category.selected,
.cewe-deco-frame-category-selection .cewe-deco-frame-category.selected {
  color: #fff;
}

.clipart-selection-tab .cewe-clipart-category-representatives,
.cewe-alpha-mask-category-selection .cewe-alpha-mask-category-representatives,
.cewe-deco-frame-category-selection .cewe-deco-frame-category-representatives {
  width: 117px;
  height: 117px;
  border: 1px solid #c0c0c0;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  background-color: #fff;
  margin: 8px auto;
  position: relative;
}

.clipart-selection-tab .cewe-clipart-category-representative,
.cewe-alpha-mask-category-selection .cewe-alpha-mask-category-representative,
.cewe-deco-frame-category-selection .cewe-deco-frame-category-representative {
  position: absolute;
  width: 50px;
  height: 50px;
  cursor: pointer;
  background: no-repeat center center /contain;
}

.clipart-selection-tab .cewe-clipart-category-representative.first,
.cewe-alpha-mask-category-selection .cewe-alpha-mask-category-representative.first,
.cewe-deco-frame-category-selection .cewe-deco-frame-category-representative.first {
  top: 5px;
  left: 5px;
}

.clipart-selection-tab .cewe-clipart-category-representative.second,
.cewe-alpha-mask-category-selection .cewe-alpha-mask-category-representative.second,
.cewe-deco-frame-category-selection .cewe-deco-frame-category-representative.second {
  top: 5px;
  left: 60px;
}

.clipart-selection-tab .cewe-clipart-category-representative.third,
.cewe-alpha-mask-category-selection .cewe-alpha-mask-category-representative.third,
.cewe-deco-frame-category-selection .cewe-deco-frame-category-representative.third {
  top: 60px;
  left: 5px;
}

.clipart-selection-tab .cewe-clipart-category-representative.fourth,
.cewe-alpha-mask-category-selection .cewe-alpha-mask-category-representative.fourth,
.cewe-deco-frame-category-selection .cewe-deco-frame-category-representative.fourth {
  top: 60px;
  left: 60px;
}

.clipart-selection-tab .cewe-label-clipart-category,
.cewe-alpha-mask-category-selection .cewe-label-alpha-mask-category,
.cewe-deco-frame-category-selection .cewe-label-deco-frame-category {
  position: absolute;
  top: 130px;
  width: 100%;
  text-align: center;
  font-size: 14px;
}

.clipart-selection-tab .cewe-modal-background,
.cewe-alpha-mask-category-selection .cewe-modal-background,
.cewe-deco-frame-category-selection .cewe-modal-background {
  z-index: 1053;
}

/* --------------------------------
   Styling for photo selection tab
   -------------------------------- */

.photo-selection-tab li {
  min-width: 40px;
}

.photo-selection-tab .usage-marker {
  position: relative;
  float: right;
  width: 0px;
  top: -6px;
  right: 15px;
  z-index: 2;
}

.add-on-page-button {
  top: 2px;
}

.photo-selection-tab .enlarge-photo-button-container {
  position: relative;
  float: left;
  width: 0;
  top: 4px;
  z-index: 2;
  left: 4px;
}

.photo-selection-tab .enlarge-photo-button {
  padding-top: 10px;
  font-size: 16px;
  width: 42px;
}

.enlarge-photo-lightbox-filename {
  float: left;
}

/* --------------------------------
   Photo lightbox
   -------------------------------- */

.cw-lightbox-image {
  text-align: center;
  margin-bottom: 10px;
}

/* ------------------
  Styling for context panels
  --------------------*/

.cewe-context-panel-area {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.cewe-context-panel-area .cewe-content {
  position: relative;
  z-index: 1060;
}

.cewe-context-panel-area .cewe-tabs {
  margin-left: 15px;
  top: 1px;
}

.cewe-context-panel-area .cewe-tabs .btn-default {
  background-color: #666;
  color: #fff;
}

.cewe-context-panel-area .cewe-tab-content {
  background-color: #f5f5f5;
  height: 148px;
  border: 1px solid #ccc;
}

.cewe-context-panel-area .cewe-context-panel-area-button-menu {
  height: 100%;
  width: 160px;
  background-color: #ddd;
  border-left: 2px solid #ccc;
  height: 145px;
}

.cewe-context-panel-area .cewe-context-panel-area-button-menu .cewe-content {
  width: 100%;
  height: 100%;
}

.cewe-context-panel-area .cewe-context-panel-area-button-menu .cewe-button-group {
  position: relative;
  top: 40px;
  height: 50px;
  text-align: right;
}

.cewe-context-panel-area .cewe-context-panel-area-button-menu .btn {
  margin: 5px;
  width: calc(100% - 10px);
}

.cewe-context-panel-area .cewe-settings-block {
  float: left;
  background-color: #eee;
  width: 150px; /* default settings, should be overriden */
  height: 145px; /* default settings, could be overriden */
}

.cewe-context-panel-area .cewe-settings-block .cewe-label {
  font-weight: bold;
  margin-bottom: 15px;
}

.cewe-context-panel-area .cewe-settings-block.cewe-border-apply-to .cewe-label {
  margin-bottom: 10px;
}

.cewe-context-panel-area .cewe-colored-border-settings .cewe-settings-block.cewe-border-apply-to {
  width: 320px;
  padding: 15px;
  height: 150px;
  background-color: #ddd;
  border-right: 2px solid #ccc;
  text-align: left;
}

.cewe-context-panel-area .cewe-colored-border-settings .cewe-settings-block.cewe-border-width {
  width: 255px;
  height: 150px;
  padding: 15px;
}

.cewe-context-panel-area .cewe-text-format-settings .cewe-settings-block {
  padding: 15px;
  height: 150px;
  text-align: center;
}

.cewe-context-panel-area .cewe-text-format-settings .cewe-settings-block.cewe-font-size {
  width: 255px;
}

.cewe-context-panel-area .cewe-text-format-settings .cewe-settings-block.cewe-font-style {
  width: 160px;
}

.cewe-context-panel-area .cewe-text-format-settings .cewe-settings-block.cewe-font-size .cewe-font-size-edit-container {
  width: 225px;
  margin: auto;
}

.cewe-context-panel-area .cewe-text-format-settings .cewe-settings-block.cewe-text-alignment {
  width: 425px;
  height: 150px;
}

.cewe-context-panel-area .cewe-text-format-settings .cewe-settings-block.cewe-text-alignment .btn-group {
  margin: 0 10px;
}

.cewe-context-panel-area .cewe-colored-border-settings .cewe-settings-block .cewe-border-width-form,
.cewe-context-panel-area .cewe-text-format-settings .cewe-settings-block .cewe-font-size-form {
  display: inline;
}

.cewe-context-panel-area .cewe-colored-border-settings .cewe-settings-block.cewe-border-colors {
  width: calc(100% - 255px - 320px - 160px); /* 100% - settingsBlock "border width" -  settingsBlock "apply to" - "button menu" */
  background-color: #fff;
}

.cewe-context-panel-area .cewe-alpha-mask-settings .cewe-settings-block.cewe-alpha-mask-category-selection,
.cewe-context-panel-area .cewe-deco-frame-settings .cewe-settings-block.cewe-deco-frame-category-selection {
  width: 185px;
}

.cewe-context-panel-area .cewe-alpha-mask-settings .cewe-settings-block.cewe-alpha-masks,
.cewe-context-panel-area .cewe-deco-frame-settings .cewe-settings-block.cewe-deco-frames {
  width: calc(100% - 185px - 160px); /* 100% - settingsBlock "category button" - "button menu" */
  background-color: #fff;
}

.cewe-context-panel-area .cewe-photo-effects-settings .cewe-settings-block.photo-effects {
  width: calc(100% - 160px); /* 100% - settingsBlock - "button menu" */
  background-color: #fff;
}

.cewe-context-panel-area .cewe-font-color-settings .cewe-settings-block.cewe-font-colors,
.cewe-context-panel-area .cewe-text-background-color-settings .cewe-settings-block.cewe-background-colors,
.cewe-context-panel-area .cewe-font-settings .cewe-settings-block.cewe-fonts {
  width: calc(100% - 160px); /* 100% - "button menu" */
  background-color: #fff;
}

.cewe-context-panel-area .cewe-font-settings .cewe-settings-block.cewe-fonts .text-item-template {
  text-overflow: ellipsis;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  overflow: hidden;
}

.cewe-context-panel-area .cewe-photo-effects-settings .horizontal-scroll-area {
  padding-left: 0;
}

.cewe-context-panel-area .cewe-photo-effects-settings .horizontal-scroll-area ul {
  padding-left: 0;
}

.cewe-context-panel-area .cewe-photo-effects-settings .horizontal-scroll-area li {
  margin-left: 3px;
  margin-right: 3px;
}

.cewe-context-panel-area .cewe-photo-effects-settings .horizontal-scroll-area .photo-effect-thumb {
  border-color: rgba(255, 255, 255, 1);
  border-width: 2px;
  border-style: solid;
  cursor: pointer;
}

.cewe-context-panel-area .cewe-photo-effects-settings .horizontal-scroll-area .photo-effect-thumb.selected {
  border-color: rgba(7, 124, 214, 1);
}

.cewe-context-panel-area .cewe-photo-effects-settings .horizontal-scroll-area .effect-name {
  bottom: 0;
  /* float: left; */
  position: relative;
  background-color: #fff;
}

/* --------------------------------
   Styling for design areas
   -------------------------------- */

.cewe-design-area-container {
  margin: 0 auto;
  display: table;
}

.cewe-design-area-edit-container {
  display: table-row;
}

.cewe-design-area-container .cewe-turn-page-container {
  display: table-row;
  height: 27px;
}

.cewe-turn-page-container .cw-turn-left, .cewe-turn-page-container .cw-turn-right, .cewe-turn-page-container .cw-add-text-item {
  margin-top: 8px;
  position: relative;
  z-index: 2;
}

.cewe-turn-page-container .cw-add-text-item {
  float: left;
  left: calc(50% - 170px);
}

.cewe-turn-page-container .cw-turn-left {
  float: left;
  margin-right: 10px;
}

.cewe-turn-page-container .cw-turn-right {
  float: right;
  margin-left: 10px;
}

.cewe-empty-cell {
  display: table-cell;
}

.cewe-design-area-bottom-container {
  display: table-row;
  height: 43px;
}

.cewe-edit-pages-container {
  display: table-cell;
  text-align: center;
}

.cewe-head-area {
  margin-bottom: 0;
  position: relative;
}

.cewe-head-area,
.cewe-design-areas-container,
.cewe-toggle-head-area,
.cewe-context-panel-area {
  -moz-transition: top 0.5s, height 0.5s;
  -webkit-transition: top 0.5s, height 0.5s;
  transition: top 0.5s, height 0.5s;
}

.cewe-toggle-head-area {
  z-index: 1031;
  top: 185px;
}

.cewe-toggle-head-area .btn,
.cewe-toggle-head-area .btn:focus {
  background-color: #CCCBCB;
  outline: none;
  width: 100%;
  border: none;
}

.cewe-toggle-head-area .btn:hover {
  background-color: #bbb;
}

.cewe-detail-view .cewe-design-area-canvas, .cewe-detail-view .cewe-print-area {
  -moz-transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s;
  -webkit-transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s;
  transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s;
}

.cewe-design-areas {
  height: 100%;
}

.cewe-storyboard-view {
  height: 100%;
  top: 237px;
}

.cw-design-area-detail-view {
  float: none;
  margin-left: auto;
  margin-right: auto;
  border-color: #e7e7e7;
}

.cewe-detail-view {
  height: 100%;
}

.cewe-detail-view .cewe-deselector {
  height: 100%;
}

.cw-design-area {
  display: table-cell;
}

.cewe-button-bar {
  position: absolute;
}

.cewe-button-bar .panel {
  margin: 0;
  border: 0;
  max-height: 42px;
}

.cewe-button-bar {
  cursor: pointer;
}

.cewe-button-bar .dropdown-menu,
#photoSelectionContainer .cw-photo-sources-container .photo-sources-dropdown .dropdown-menu {
  padding: 0 0;
  border: solid;
  border-color: #ddd;
  border-radius: 4px;
}

.cewe-button-bar .dropdown-menu > li,
#photoSelectionContainer .cw-photo-sources-container .photo-sources-dropdown .dropdown-menu > li {
  padding: 6px 0;
  height: 42px;
  border-bottom: solid;
  border-bottom-width: 1px;
  border-bottom-color: #adadad;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}

.cewe-button-bar .dropdown-menu > li:hover,
#photoSelectionContainer .cw-photo-sources-container .photo-sources-dropdown .dropdown-menu > li:hover {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

.cewe-button-bar .dropdown-menu > li > a,
#photoSelectionContainer .cw-photo-sources-container .photo-sources-dropdown .dropdown-menu > li > a {
  padding-right: 35px;
  padding: 3px 7px;
}

.cewe-button-bar-arrow {
  border: 2px solid #CCC;
  border-radius: 7px;
}

.cewe-button-bar-arrow:before, .cewe-button-bar-arrow:after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

.cewe-button-bar-arrow-top:after {
  bottom: calc(100% - 4px);
  left: calc(50% - 19px);
  border-color: transparent transparent #FFF transparent;
  border-width: 0px 19px 20px 19px;
}

.cewe-button-bar-arrow-top:before {
  bottom: 100%;
  left: calc(50% - 19px);
  border-color: transparent transparent #CCC transparent;
  border-style: solid;
  border-width: 0px 19px 19px 19px;
}

.cewe-button-bar-arrow-bottom:after {
  top: calc(100% - 4px);
  left: calc(50% - 19px);
  border-color: #FFF transparent transparent transparent;
  border-style: solid;
  border-width: 20px 19px 0px 19px;
}

.cewe-button-bar-arrow-bottom:before {
  top: 100%;
  left: calc(50% - 19px);
  border-color: #CCC transparent transparent transparent;
  border-style: solid;
  border-width: 19px 19px 0px 19px;
}

.cw-design-area-storyboard-view .cw-design-area {
  margin-bottom: 20px;
}

.cw-design-area-storyboard-view .cewe-page-package-buttons {
  position: absolute;
  bottom: 60%;
  right: 20%;
  z-index: 2;
}

.cw-design-area-detail-view .cewe-page-package-buttons {
  float: right;
  margin-top: 8px;
  position: relative;
  z-index: 2;
}

.cw-design-area-storyboard-view {
  position: relative;
  float: left;
  padding: 9px 50px;
  border-color: #e7e7e7;
}

.cw-design-area-storyboard-view .cewe-print-area {
  cursor: pointer;
}

.cw-design-area-storyboard-view .shadow {
  -moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
}

.cw-design-area-detail-view .shadow {
  -moz-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.8);
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.8);
}

.btn-group.cw-designarea-toolbar {
  vertical-align: bottom;
  /*display: table-cell;*/
  /* Frank Bruns 05.03.2015: Commented out since it reserves space in height even if the layouts box is not expanded, preventing mouse event from reaching the toolbar */
  position: relative;
  z-index: 2;
  background-color: #666;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding: 3px;
}

.cw-designarea-toolbar .cewe-option {
  background-color: #ddd;
  border-radius: 4px;
}

.cw-designarea-toolbar .cewe-option .btn.active {
  background-color: #fff;
}

.cw-designarea-toolbar.cewe-empty-cell {
  width: 206px;
}

.btn-group.cw-designarea-toolbar .cewe-label {
  color: #fff;
  padding-top: 5px;
}

.btn-group.cw-designarea-toolbar.cewe-left {
  right: 5px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 4px;
}

.btn-group.cw-designarea-toolbar.cewe-right {
  left: 5px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 10px;
}

.cw-design-area-detail-view .cw-designarea-toolbar .cewe-toolbar-button {
  width: 200px;
}

.cw-design-area-detail-view .cw-designarea-toolbar .cewe-toolbar-button button {
  width: 100%;
}

.cewe-page-number {
  position: relative;
}

.cw-design-area-storyboard-view .cewe-page-number {
  top: 10px;
}

.cw-design-area-detail-view .cewe-page-number {
  top: 12px;
}

.cewe-page-number.cewe-left-page {
  float: left;
}

.cewe-page-number.cewe-right-page {
  float: right;
}

.book {
  width: 273px;
  height: 180px;
}

.selected {
  background-color: #888;
  border-radius: 4px;
}

.desktop-device .cewe-selection-tab-item.selected:hover,
.desktop-device .background-selection-tab .cewe-background-category.selected:hover,
.desktop-device .clipart-selection-tab .cewe-clipart-category.selected:hover,
.desktop-device .cw-layouts-flyout .cw-layouts-flyout-item .cw-layout-thumb.selected:hover {
  background-color: #888;
  border-radius: 4px;
}

.desktop-device .cewe-selection-tab-item:hover,
.desktop-device .background-selection-tab .cewe-background-category:hover,
.desktop-device .clipart-selection-tab .cewe-clipart-category:hover,
.desktop-device .cw-layouts-flyout .cw-layouts-flyout-item .cw-layout-thumb:hover {
  background-color: #ccc;
  border-radius: 4px;
}

.desktop-device .cw-design-area-storyboard-view .cewe-print-area:hover {
  -webkit-box-shadow: 0px 0px 0px 6px #ccc;
  -moz-box-shadow: 0px 0px 0px 6px #ccc;
  box-shadow: 0px 0px 0px 6px #ccc;
}

.selected .cewe-design-area-container .cewe-turn-page-container,
.background-selection-tab .cewe-background-category.selected {
  color: #fff;
}

.selected .btn-primary, .selected .btn-primary:hover {
  border-color: #ccc;
}

/* --------------------------------
   Styling for debugging (helper)
   -------------------------------- */

.cw-debug-helper {
  position: absolute;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  border: 1px solid #515151;
  background-color: #eeeeee;
  padding: 5px;
  cursor: move;
  z-index: 1032;
}

/* --------------------------------
   Login/Register Popup
   -------------------------------- */

.headerRight .cewe-login {
  padding: 10px;
}

.btn.btn-login,
.btn.btn-logout {
  width: 140px;
}

.cewe-login-register-dialog {
  padding: 10px 20px;
}

.cewe-login-register-form {
  max-width: 700px;
}

.cewe-login-register-form .alert {
  white-space: normal;
}

.cewe-login-register-form .cewe-button-group {
  margin: 30px 0;
}

.cewe-login-register-form .btn-submit {
  float: right;
}

.cw-content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  margin-top: 20px;
}

#photoSelectionContainer .cw-photo-sources-container {
  width: 180px;
  height: 133px;
  float: left;
}

#photoSelectionContainer .one-photo-source-button, #buttonAddPhotosToSelection.btn-default {
  height: 133px;
  border: none;
  background-color: #EEE;
  margin-right: 0;
  padding: 15px;
  border-radius: 0;
  min-width: 180px;
}

#buttonAddPhotosToSelection.btn-default .cewe-label {
  position: relative;
  top: 50px;
  left: -10px;
}

#photoSelectionContainer .photo-sources-button {
  height: 88px;
}

#photoSelectionContainer .cw-photo-sources-container .photo-sources-dropdown {
  position: relative;
  float: left;
  width: 100%;

}

#photoSelectionContainer .cw-photo-sources-container .photo-sources-dropdown .btn {
  width: 100%;
  background-color: #EEE;
  border-radius: 0;
  border-width: 0;
  border-top-width: 2px;
  height: 45px;
  border-color: #adadad;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}

#photoSelectionContainer .cw-photo-sources-container .photo-sources-dropdown .dropdown-menu {
  min-width: 180px;
  max-width: 500px;
}

#photoSelectionContainer .cw-photo-sources-container .photo-sources-dropdown .dropdown-menu a > span {
  display: inline-block;
  float: none;
  line-height: 28px;
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.photo-sources-button .cewe-label,
.one-photo-source-button .cewe-label {
  position: relative;
  top: 31px;
  left: -6%;
}

.cewe-photo-sources-dialog .photo-sources {
  width: 100%;
  max-width: 100%;
  display: table;
  padding: 20px;
}

.cewe-photo-sources-dialog .local,
.cewe-photo-sources-dialog .cewe-my-photos {
  display: table-cell;
  width: 50%;
  vertical-align: middle;
  text-align: center;
}

.cewe-photo-sources-dialog .my-photos-logo {
  background-image: url('/web/javax.faces.resource/app/tatooine/images/icons/myPhotosLogo.png.jsf');
  width: 150px;
  height: 24px;
}

.cewe-photo-sources-dialog .cewe-my-photos.alert.alert-info {
  text-align: left;
}

.cewe-photo-sources-dialog .local {
  padding-left: calc(25% - 82.5px);
}

.cewe-photo-sources-dialog .my-photos-sources-events-container,
.cewe-photo-sources-dialog .my-photos-sources-photos-container {
  overflow-y: scroll;
  max-height: 50vh;
}

.cewe-photo-sources-dialog .my-photos-events,
.cewe-photo-sources-dialog .my-photos-photos {
  width: 100%;
  display: table;
  padding: 10px;
}

.cewe-photo-sources-dialog .my-photos-event {
  width: 100%;
  height: 75px;
  display: table;
  float: left;
  border-color: rgba(255, 255, 255, 1);
  border-width: 2px;
  border-style: solid;
  vertical-align: middle;
  border-top: 2px solid #c00010;
  table-layout:fixed;
}

.cewe-photo-sources-dialog .my-photos-photo {
  width: 20%;
  height: 150px;
  display: table-cell;
  float: left;
  text-align: center;
  border-color: rgba(255, 255, 255, 1);
  border-width: 4px;
  border-style: solid;
}

.cewe-photo-sources-dialog .my-photos-event:hover,
.cewe-photo-sources-dialog .my-photos-photo:hover {
  background-color: rgba(204, 204, 204, 0.4);
  cursor: pointer;
}

.cewe-photo-sources-dialog .my-photos-event.event-selected,
.cewe-photo-sources-dialog .my-photos-photo.photo-selected {
  background-color: rgba(0, 148, 220, 0.4)
}

.cewe-photo-sources-dialog .my-photos-event .my-photos-head-photo {
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  width: 100px;
  background-position: center top;
  display: table-cell;
}

.cewe-photo-sources-dialog .my-photos-photos .my-photos-thumbnail {
  background-size: cover;
  background-repeat: no-repeat;
  height: 75%;
  background-position: center;
}

.cewe-photo-sources-dialog .my-photos-photos .my-photos-thumbnail {
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  background-position: center;
}

.cewe-photo-sources-dialog .my-photos-event .name,
.cewe-photo-sources-dialog .my-photos-event .photo-count,
.cewe-photo-sources-dialog .my-photos-event .date {
  vertical-align: middle;
  display: table-cell;
}

.cewe-photo-sources-dialog .year-break {
  display: table;
  table-layout:fixed;
  width: 100%;
  height: 38px;
  background-color: #c00010;
  text-align: center;
  color: #fff;
  padding-top: 8px;
  font-size: 14pt;
}

.cewe-photo-sources-dialog .my-photos-event .name {
  padding-left: 20px;
  width: calc(50% - 100px);
}

.cewe-photo-sources-dialog .my-photos-event .photo-count {
  width: calc(50% - 120px);
}

.cewe-photo-sources-dialog .my-photos-event .date {
  width: 120px;
}

.cewe-photo-sources-dialog .cewe-description {
  padding-left: 10px;
}

.cewe-photo-sources-dialog .my-photos-photos-header,
.cewe-photo-sources-dialog .my-photos-events-header {
  display: table;
  width: calc(100% - 15px);
  padding-bottom: 5px;
}

.cewe-photo-sources-dialog .my-photos-photos-header .cewe-description,
.cewe-photo-sources-dialog .my-photos-events-header .cewe-description {
  display: table-cell;
  width: 60%;
  padding-left: 10px;
  vertical-align: middle;
}

.cewe-photo-sources-dialog .my-photos-photos-header .all-photos-toggle-container,
.cewe-photo-sources-dialog .my-photos-events-header .search-event-container {
  display: table-cell;
  width: 40%;
}

.cewe-photo-sources-dialog .my-photos-photos-header .all-photos-toggle-container .cewe-option {
  float: left;
  position: relative;
  top: 13px;
  margin-right: 5px;
}

.cewe-photo-sources-login-dialog {
  margin: 5px;
  padding-left: 10px;
  padding-right: 10px;
}

.btn-file {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  float: left;
  margin-right: 20px;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;

}

/* --------------------------------
   Notifications
   -------------------------------- */
.cw-notifications {
  z-index: 9999;
  position: fixed;
  top: 130px;
  width: 100%;
  padding: 10px;
}

.badge {
  background-color: #60B620;
}

.cw-button-margin {
  margin-top: 8px;
  margin-bottom: 8px;
}

.cw-button-position {
  text-align: center;
}

.cw-layouts-flyout {
  position: absolute;
  width: 200px;
  z-index: 1028;
  bottom: 43px;
}

.cw-layouts-flyout.faded-out {
  -moz-transition: opacity 0s, height 0.5s;
  -webkit-transition: opacity 0s, height 0.5s;
  transition: opacity 0s, height 0.5s;
}

.cw-layouts-flyout.faded-in {
  -moz-transition: opacity 0s, height 0.5s;
  -webkit-transition: opacity 0s, height 0.5s;
  transition: opacity 0s, height 0.5s;
  -webkit-transition-delay: 0.5s, 0s;
  transition-delay: 0.5s, 0s;
}

.cw-layouts-flyout.cw-layouts-flyout-left {
  right: 0;
}

.cw-layouts-flyout.cw-layouts-flyout-right {
  left: 0;
}

.cw-layouts-flyout .cw-layouts-content {
  background-color: #fff;
  overflow-y: scroll;
  height: 100%;
  padding: 5px;
  border-top: 3px solid #666;
}

.cw-layouts-flyout .cw-layouts-content .cw-layout-category {
  margin: 5px;
}

.cw-layouts-flyout .cw-layouts-content .cw-layout-category-content {
  display: table-row;
}

.cw-layouts-flyout .cw-layouts-flyout-item {
  float: left;
  line-height: 0.7;
}

.cw-layouts-flyout .cw-layouts-flyout-item .cw-layout-thumb {
  padding: 5px;
}

.cw-photobook-banner {
  top: -15px;
  position: relative;
}

input.ng-invalid.ng-dirty {
  border-color: #FA787E;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 0, 0, 0.6)
}

.cewe-navbar .cewe-navbar-btn.cewe-options-menu {
  margin-left: 4px;
}

.cewe-options-menu .cewe-toggle {
  z-index: 1052;
  position: relative;
}

.cewe-file-handle-filter {
  cursor: auto;
}

.cewe-file-handle-filter .panel .panel-body {
  color: #000;
  background-color: #fff;
}

.cewe-file-handle-filter .cewe-modal-background {
  z-index: 1060;
}

.cewe-file-handle-filter .cewe-options {
  max-width: 375px;
}

.cewe-file-handle-filter .cewe-options .cewe-option {
  display: inline-block;
  width: 60%;
  margin-right: 5px;
}

.cewe-options-menu .cewe-container {
  background-color: #ffffff;
  border-radius: 4px;
  -moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
  z-index: 1051;
}

.cewe-options-menu .cewe-container .cewe-content {
  margin-top: 20px;
  position: absolute;
}

.cewe-options-menu .menuActive {
  position: absolute;
  height: 3800px;
  width: 320px;
}

.cewe-price-list-info {
  -moz-transition: bottom 0.5s;
  -webkit-transition: bottom 0.5s;
  transition: bottom 0.5s;
}

.cewe-modal-background {
  z-index: 1050;
  opacity: 0;
  position: fixed;
  top: -203px;
  right: 0;
  bottom: 0;
  width: 100%;
  left: 0;
  background-color: #000;
  height: 3400px;
  -moz-transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s linear;
}

.cewe-modal-background.fade-in {
  opacity: 0.6;
}

.cewe-modal-background.fade-out {
  opacity: 0;
}

.cewe-modal-background.transparent {
  opacity: 0;
}

.cewe-options-menu .cewe-content .cewe-divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

.cewe-options-menu .cewe-content .cewe-options-menu-button {
  width: 260px;
  text-align: left;
}

#toast-container > .toast-badQuality.toast-warning {
  background-image: url('/web/javax.faces.resource/app/tatooine/images/designArea/ico_warning_Editor.png.jsf') !important;
  background-size: 30px 30px;
}

#toast-container > .toast-save-reminder {
  background-image: url('/web/javax.faces.resource/app/tatooine/images/icons/tatooine-icon-save.png.jsf') !important;
}

.cewe-product-choice-dialog * {
  -webkit-transform: translate3d(0, 0, 0);
}

.cewe-product-choice-dialog .cewe-product-options-tabs .btn {
  color: #fff;
  background-color: #666;
}

.cewe-product-choice-dialog .cewe-product-options-tabs .btn.active,
.cewe-product-choice-dialog .cewe-product-options-tabs .btn:hover,
.cewe-product-choice-dialog .cewe-product-options-tabs .btn:focus {
  background-color: #E10019;
}

.cewe-product-choice-dialog .cewe-product-options-tabs .btn:hover,
.cewe-product-choice-dialog .cewe-product-options-tabs .btn:focus {
  cursor: pointer;
}

.cewe-product-choice-dialog .cewe-book-box {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
}

.desktop-device .cewe-product-choice-dialog .cewe-book-box:hover {
  color: #E10019;
  border-style: solid;
  border-width: 1px;
  border-color: #c90014;
}

.cewe-product-choice-dialog .panel-body .btn-group :hover {
  color: inherit !important;
}

.cewe-product-choice-dialog .cewe-book-box.selected {
  color: #E10019;
  background-color: #ccc;
  border-style: solid;
  border-width: 1px;
  border-color: #c90014;
}

.cewe-product-choice-dialog .cewe-book-format {
  width: 190px;
  height: 160px;
  background-size: 160px;
  background-position-x: 15px;
  background-repeat: no-repeat;
}

.cewe-product-choice-dialog .cewe-book-covertype,
.cewe-product-choice-dialog .cewe-book-papertype {
  width: 200px;
  height: 160px;
  background-size: 180px;
  background-position: 10px;
  background-repeat: no-repeat;
}

.cewe-product-choice-dialog .cewe-option-headline {
  position: relative;
  top: 7px;
  white-space: normal;
}

.cewe-product-choice-dialog .cewe-book-format .cewe-option-headline {
  top: 5px;
}

.cewe-product-choice-dialog .cewe-option-headline .cewe-text {
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
}

.cewe-product-choice-dialog .cewe-book-formats-container,
.cewe-product-choice-dialog .cewe-book-covertypes-container,
.cewe-product-choice-dialog .cewe-book-papertypes-container {
  height: 225px;
  text-align: center;
}

.cewe-product-choice-dialog .cewe-book-covertypes-container > div,
.cewe-product-choice-dialog .cewe-book-papertypes-container > div {
  margin-right: 20px;
}

.cewe-product-choice-dialog .cewe-book-formats-container .cewe-label,
.cewe-product-choice-dialog .cewe-book-covertypes-container .cewe-label,
.cewe-product-choice-dialog .cewe-book-papertypes-container .cewe-label {
  text-align: center;
}

.cewe-product-choice-dialog .cewe-book-format.cewe-mini {
  background-image: url('/web/javax.faces.resource/app/tatooine/images/products/formats/cfb_start_prod_mini_klein_01.png.jsf');
}

.cewe-product-choice-dialog .cewe-book-format.cewe-compact_panorama {
  background-image: url('/web/javax.faces.resource/app/tatooine/images/products/formats/cfb_start_prod_compact_pano_01.png.jsf');
}

.cewe-product-choice-dialog .cewe-book-format.cewe-quad {
  background-image: url('/web/javax.faces.resource/app/tatooine/images/products/formats/cfb_start_prod_quad_01.png.jsf');
}

.cewe-product-choice-dialog .cewe-book-format.cewe-large {
  background-image: url('/web/javax.faces.resource/app/tatooine/images/products/formats/cfb_start_prod_gross_01.png.jsf');
}

.cewe-product-choice-dialog .cewe-book-format.cewe-large_across {
  background-image: url('/web/javax.faces.resource/app/tatooine/images/products/formats/cfb_start_prod_gross_pano_01.png.jsf');
}

.cewe-product-choice-dialog .cewe-book-format.cewe-xl {
  background-image: url('/web/javax.faces.resource/app/tatooine/images/products/formats/cfb_start_prod_xl_01.png.jsf');
}

.cewe-product-choice-dialog .cewe-book-format.cewe-xxl {
  background-image: url('/web/javax.faces.resource/app/tatooine/images/products/formats/cfb_start_prod_xxl_01.png.jsf');
}

.cewe-product-choice-dialog .cewe-book-format.cewe-xxl_across {
  background-image: url('/web/javax.faces.resource/app/tatooine/images/products/formats/cfb_start_prod_xxl_pano_01.png.jsf');
}

.cewe-product-choice-dialog .cewe-book-covertype.cewe-hardcover {
  background-image: url('/web/javax.faces.resource/app/tatooine/images/products/covertypes/hardcover.png.jsf');
}

.cewe-product-choice-dialog .cewe-book-covertype.cewe-softcover {
  background-image: url('/web/javax.faces.resource/app/tatooine/images/products/covertypes/softcover.png.jsf');
}

.cewe-product-choice-dialog .cewe-book-papertype.cewe-digital_standard,
.cewe-book-papertype.cewe-digitalprint {
  background-image: url('/web/javax.faces.resource/app/tatooine/images/products/papertypes/Symb_Obj_Fb-Digi_01.png.jsf');
}

.cewe-product-choice-dialog .cewe-book-papertype.cewe-digital_glossy,
.cewe-book-papertype.cewe-glossy {
  background-image: url('/web/javax.faces.resource/app/tatooine/images/products/papertypes/Symb_Obj_Fb-Digi-Glos_01.png.jsf');
}

.cewe-product-choice-dialog .cewe-book-papertype.cewe-digital_premium_matte,
.cewe-book-papertype.cewe-indigo-matt {
  background-image: url('/web/javax.faces.resource/app/tatooine/images/products/papertypes/Symb_Obj_Fb-Digi-Pmat_01.png.jsf');
}

.cewe-product-choice-dialog .cewe-book-papertype.cewe-photopaper_matte,
.cewe-book-papertype.cewe-fotopaper {
  background-image: url('/web/javax.faces.resource/app/tatooine/images/products/papertypes/Symb_Obj_Fb-Digi-aFP_01.png.jsf');
}

.cewe-product-choice-dialog .cewe-book-papertype.cewe-photopaper_glossy,
.cewe-book-papertype.cewe-fotopaper-glossy {
  background-image: url('/web/javax.faces.resource/app/tatooine/images/products/papertypes/Symb_Obj_Fb-Digi-aFP-Glos_01.png.jsf');
}

.cewe-product-choice-dialog .cewe-scroll-button {
  position: absolute;
  margin-top: 100px;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 5px;
  z-index: 1;
  border: none !important; /* borderstyling in the am-fade class in cfb-editor.css - are we serious?- TODO REMOVE from am-fade*/
  border-radius: 4px;
}

.cewe-product-choice-dialog .cewe-scroll-button:hover {
  background-color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.cewe-product-choice-dialog .cewe-scroll-button.cewe-scroll-button-right {
  right: 15px;
  float: right;
}

.cewe-product-choice-dialog .panel-body.cewe-product-options-navbuttons {
  padding: 7px 15px;
  margin: 5px 0 0 0;
  background-color: rgb(238, 238, 238);
  border-top: 1px solid #CCC;
  border-radius: 0;
}

.cewe-product-choice-dialog .noProductAvailableText {
  margin: 15px 0;
}

html {
  height: 100%;
  width: 100%;
  min-width: 900px;
  min-height: 600px;
  position: relative;
}

#pageflip {
  z-index: 1196;
  position: absolute;
  top: 40px;
}

@media only screen
and (orientation: portrait) and (max-device-width: 1000px) {
  html {
    min-width: 0;
    min-height: 0;
  }
}

.cewe-book-preview-container {
  position: relative;
  top: 0;
}

.cewe-book-preview-container .cewe-preview-background {
  z-index: 1054;
  opacity: 0;
  position: fixed;
  top: -203px;
  right: 0;
  bottom: 0;
  width: 100%;
  left: 0;
  background-color: #000;
  height: 3400px;
  -moz-transition: opacity 0.5s linear;
  -webkit-transition: opacity 0.5s linear;
  transition: opacity 0.5s linear;
}

.cewe-book-preview-container .cewe-preview-content {
  width: 100%;
  height: 100%;
  position: absolute;
  float: left;
  left: 0;
  top: 20px;
}

.cewe-book-preview-container .cewe-preview-background.fade-in {
  opacity: 0.85;
}

.cewe-book-preview-container .cewe-preview-background.fade-out {
  opacity: 0;
}

.cewe-book-preview-container .cewe-preview-content .cewe-preview-btn-group {
  z-index: 2000;
  position: absolute;
  display: inline-flex;
  right: 0;
  margin: 10px;
}

.cewe-book-preview-container .cewe-preview-content .closePreview {
  font-size: 12pt;
}

.cewe-book-preview-container .cewe-preview-content .cewe-check-book-text {
  z-index: 2000;
  color: #fff;
  position: absolute;
  width: 100%;
  text-align: center;
}

.cewe-book-preview-container .cewe-preview-content .cewe-price-list-info {
  width: 200px;
  bottom: 0;
  float: right;
  z-index: 2000;
  position: absolute;
  right: 200px;
  color: #fff;
}

/* (portrait) ----------- */
#warning-message {
  display: none;
}

@media only screen
and (orientation: portrait)
and (max-device-width: 1000px) {
  #mainContainer, .introjs-tooltip, .introjs-overlay, .introjs-helperLayer, .introjs-tooltipReferenceLayer {
    display: none;
  }

  #warning-message {
    display: block;
    text-align: center;
  }
}

@media only screen and (orientation: landscape) {
  #warning-message {
    display: none;
  }
}

/* navbar */
.cewe-navbar {
  height: 54px;
  border-bottom: 1px solid #FFF;
  background-color: #ccc;
  border-top: 1px solid #FFF;
  padding: 5px 0;
}

.cewe-navbar .cewe-navbar-btn {
  margin: 0 2px;
  text-align: left;
}

.cewe-navbar .cewe-shoppingcart-btn {
  margin: 0 4px;
}

.cewe-navbar .cewe-options-menu .icon {
  margin-right: 0;
}

.cewe-shoppingcart-btn .icon {
  background-color: #E10019;
  width: 32px;
  height: 40px;
  left: -14px;
  top: -6px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.cewe-upselling-options-container .cewe-shoppingcart-btn .icon,
.cewe-book-preview-container .cewe-shoppingcart-btn .icon {
  left: -12px;
}

.cewe-navbar .cewe-shoppingcart-btn .label-container {
  position: relative;
  left: -5px;
}

.cewe-navbar .cewe-btn-undo, .cewe-navbar .cewe-btn-redo {
  position: absolute;
  width: 175px;
}

.cewe-navbar .cewe-btn-undo {
  left: calc(50% - 177px);
}

.cewe-navbar .cewe-btn-redo {
  left: calc(50% + 2px);
}

@media (max-width: 1599px) {
  .cewe-navbar .cewe-btn-undo, .cewe-navbar .cewe-btn-redo {
    width: 59px;
  }

  .cewe-navbar .cewe-btn-undo {
    left: calc(50% - 61px);
  }

  .cewe-navbar .cewe-btn-undo .label-container, .cewe-navbar .cewe-btn-redo .label-container {
    display: none !important;
  }

  .cewe-navbar .cewe-btn-undo .icon, .cewe-navbar .cewe-btn-redo .icon {
    display: table-cell !important;
  }
}

@media (max-width: 1399px) {
  .cewe-navbar .cewe-navbar-btn .icon {
    display: none !important;
  }

  .cewe-navbar .cewe-navbar-btn.cewe-options-menu .label-container {
    display: none !important;
  }

  .cewe-navbar .cewe-navbar-btn.cewe-options-menu .icon,
  .cewe-navbar .cewe-btn-undo .icon, .cewe-navbar .cewe-btn-redo .icon,
  .cewe-navbar .cewe-navbar-btn.cewe-shoppingcart-btn .icon {
    display: table-cell !important;
  }
}

@media (max-width: 1299px) {
  .cewe-navbar .cewe-navbar-btn .icon {
    display: table-cell !important;
  }

  .cewe-navbar .cewe-navbar-btn .label-container {
    display: none !important;
  }

  .cewe-navbar .cewe-navbar-btn.cewe-shoppingcart-btn .label-container {
    display: table-cell !important;
  }
}

@media (max-width: 899px) {
  .cewe-navbar .cewe-shoppingcart-btn .btn {
    background-color: #E10019;
    border-radius: 4px;
    width: 59px;
  }

  .cewe-navbar .cewe-shoppingcart-btn .icon {
    margin-left: 15px;
  }

  .cewe-navbar .cewe-navbar-btn.cewe-shoppingcart-btn .label-container {
    display: none !important;
  }
}

@media (max-width: 510px) {
  .cewe-navbar .cewe-btn-undo, .cewe-navbar .cewe-btn-redo {
    position: relative;
    left: 0;
  }
}

.cewe-navbar-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 5;
}

.cewe-navbar-bottom .cewe-product-options {
  margin: 0 25px;
}

.saveProjectChoiceLightbox .saveProjectChoiceButtonContainer {
  margin-top: 20px;
}

.cewe-my-projects-dialog .modal-header {
  display: table;
  width: 100%;
}

.cewe-my-projects-dialog .cewe-headline {
  vertical-align: middle;
  display: table-cell;
  padding: 0;
}

.cewe-my-projects-dialog .header-logo {
  display: table-cell;
}

.cewe-my-projects-dialog .cewe-my-projects-info {
  margin-bottom: 5px;
}

.cewe-projects-container {
  overflow: auto;
  height: calc(85vh - 200px);
}

.cewe-projects-container .alert {
  max-width: 700px;
}

.cewe-my-projects-dialog .cewe-projects-container {
  height: calc(85vh - 180px);
}

.cewe-projects-container .cewe-project-item {
  display: table;
  width: 100%;
  height: 200px;
  padding: 20px;
  border-top: 2px solid #d8d8d8;
}

.cewe-projects-container .cewe-project-item:hover {
  background-color: #d8d8d8;
}

.cewe-projects-container .cewe-project-preview-thumbnail {
  display: table-cell;
  width: 33%;
  max-width: 250px;
  height: 100%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}

.cewe-projects-container .cewe-project-details {
  display: table-cell;
  padding-left: 10px;
  vertical-align: middle;
}

.cewe-projects-container .cewe-project-details .cewe-project-title {
  font-size: 18pt;
}

.cewe-projects-container .cewe-project-details .cewe-product-last-modified .date {
  margin-left: 10px;
}

.cewe-projects-container .cewe-project-options {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}

.btn-default:focus, .modal-content .cewe-product-options-navbuttons .btn.btn-default:focus {
  background-color: #fff;
  border-color: rgb(173, 173, 173);
}

.btn-default:active, .modal-content .cewe-product-options-navbuttons .btn.btn-default:active {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.btn-default:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.cewe-start-editor-choice-container {
  padding: 30px;
  height: calc(85vh - 189px);
}

.cewe-start-editor-choice-header {
  background-color: #666;
  padding: 5px 20px;
  display: table;
  width: 100%;
}

.cewe-start-editor-choice-container .cewe-headline {
  text-align: left;
  vertical-align: middle;
  display: table-cell;
  color: #fff;
  font-size: 36px;
}

.cewe-start-editor-choice-container .header-logo {
  display: table-cell;
}

.cewe-start-editor-choice-container .cewe-options {
  display: table;
  width: 100%;
  background-color: #fff;
  border-radius: 0 0 6px 6px;
}

.cewe-start-editor-choice-container .cewe-option {
  display: table-cell;
  text-align: left;
  padding: 30px;
}

.cewe-start-editor-choice-container .cewe-option.cewe-create-new {
  width: 40%;
  border-right: 5px solid #666;
}

.cewe-start-editor-choice-container .cewe-option.cewe-my-projects {
  width: 60%;
}

.cewe-start-editor-choice-container .cewe-option .cewe-text {
  min-height: 40px;
  max-width: 90%;
}

/* Start color definition of the round progress bar e.g. in the saveButton */

.cw_tatooine_content svg circle {
  stroke: rgb(255, 255, 255) !important;
}

.cw_tatooine_content svg path {
  stroke: rgb(225, 0, 26) !important;
}

.cw_tatooine_content {
  height: 100vh;
}

.cewe-tatooine-maincontainer {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* End color definition of the round progress bar*/

.cewe-upselling-options-container {
  width: 80%;
  left: 10%;
  position: relative;
}

.cewe-upselling-options-container {
  padding: 30px;
  background-color: #fff;
  border-radius: 6px;
}

.cewe-upselling-options-header {
  padding: 5px 15px;
  display: table;
  width: 100%;
  border-bottom: solid #666;
}

.cewe-upselling-options-container .cewe-headline {
  text-align: left;
  vertical-align: middle;
  display: table-cell;
  color: #666;
  font-size: 36px;
}

.cewe-upselling-options-container .cewe-upselling-reminder {
  display: table;
  width: 100%;
  height: 5vh;
}

.cewe-upselling-options-container .cewe-upselling-reminder .cewe-current-product {
  vertical-align: middle;
  padding: 30px 15px;
  font-size: 13pt;
}

.cewe-upselling-options-container .cewe-upselling-category-header {
  display: table;
  background-color: #666;
  color: #fff;
  width: 100%;
}

.cewe-upselling-options-container .cewe-upselling-category-content {
  display: table;
  background-color: #fff;
  height: 30vh;
}

.cewe-upselling-options-container .panel-default,
.cewe-upselling-options-container .panel {
  margin-bottom: 0;
}

.cewe-upselling-options-container .table-cell-one {
  display: table-cell;
  width: 30%;
}

.cewe-upselling-options-container .table-cell-two {
  display: table-cell;
  width: 30%;
}

.cewe-upselling-options-container .table-cell-three {
  display: table-cell;
  width: 20%;
}

.cewe-upselling-options-container .table-cell-four {
  display: table-cell;
  width: 20%;
  min-width: 215px;
}

.cewe-upselling-options-container .table-cell-full-width {
  display: table-cell;
  width: 100%;
}

.cewe-upselling-options-container .cewe-upselling-category-content .cewe-upselling-option.cewe-image {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.cewe-upselling-options-container .cewe-upselling-category-content .cewe-upselling-option.cewe-description {
  padding-left: 10px;
  vertical-align: middle;
}

.cewe-upselling-options-container .cewe-upselling-category-content .cewe-upselling-option.cewe-selection {
  padding-left: 10px;
  vertical-align: middle;
  cursor: pointer;
  text-align: right;
  right: 20px;
  position: relative;
}

.cewe-upselling-options-container .cewe-upselling-category-content .cewe-upselling-option.cewe-selection .cewe-label {
  bottom: 10px;
  position: relative;
  left: 5px;
  font-weight: bold;
}

.cewe-upselling-options-container .cewe-upselling-category-content .cewe-upselling-option.cewe-selection > [type="checkbox"] {
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.cewe-upselling-options-container .cewe-upselling-category-content .cewe-upselling-option.cewe-price {
  padding-left: 10px;
  vertical-align: middle;
  font-size: 18pt;
  text-align: right;
}

.cewe-upselling-options-container .cewe-upselling-summary {
  display: table;
  width: 100%;
  height: 10vh;
  background-color: #666;
  border-radius: 0 0 6px 6px;
  border-color: #666;
  border-width: 1px;
  border-style: solid;
  padding: 15px;
}

.cewe-upselling-options-container .cewe-upselling-summary .cewe-price {
  color: #fff;
  min-width: 175px;
  vertical-align: middle;
  padding-left: 10px;
  font-weight: bold;
  font-size: 18pt;
  text-align: right;
}

.cewe-upselling-options-container .cewe-upselling-summary .cewe-navigation {
  padding-left: 10px;
  vertical-align: middle;
  cursor: pointer;
  text-align: right;
  right: 20px;
  position: relative;
}

.cewe-save-button .cewe-upload-progress-all-svg {
  margin-right: 5px;
}

.cewe-save-button .cewe-upload-progress-all-percentage {
  margin-top: 7px;
  font-size: 10px;
  text-align: center;
  width: 32px;
  position: absolute;
}

.cewe-upload-progress-flyout {
  height: calc(85vh - 189px);
  position: absolute;
  width: 20vw;
  z-index: 1061;
}

.cewe-upload-progress-background.cewe-modal-background {
  z-index: 1060;
}

.cewe-upload-progress-flyout .cewe-upload-progress-header {
  height: 10%;
  display: table;
  width: 100%;
}

.cewe-upload-progress-flyout .cewe-upload-progress-header .header-title {
  display: table-cell;
  vertical-align: middle;
}

.cewe-upload-progress-flyout .cewe-upload-progress-header .header-title-progress {
  display: table-cell;
  vertical-align: top;
  float: right;
}

.cewe-upload-progress-flyout .cewe-upload-progress-header .cewe-upload-progress-all-percentage {
  margin-top: 12px;
  font-size: 12px;
  text-align: center;
  width: 40px;
  position: absolute;
}

.cewe-upload-progress-flyout .cewe-upload-progress-body {
  height: 80%;
  overflow: hidden;
}

.cewe-upload-progress-flyout .cewe-upload-progress-body .cewe-body-info {
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  width: 100%;
  padding: 5px 10px;
  overflow-y: scroll;
}

.cewe-upload-progress-flyout .cewe-upload-progress-body .cewe-body-content {
  overflow-y: scroll;
  padding: 10px;
  height: calc(100% - 55px);
}

.cewe-upload-progress-flyout .cewe-upload-progress-footer {
  padding: 5px 10px;
  height: 10%;
  display: table;
  overflow-y: scroll;
  width: 100%;
  bottom: 0;
  position: absolute;
}

.cewe-upload-progress-flyout .cewe-upload-progress-footer .cewe-footer-btn {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}

.cewe-upload-progress-flyout .cewe-upload-progress-body .cewe-upload-progress-item-container {
  clear: both;
  margin-bottom: 5px;
  height: 110px;
}

.cewe-upload-progress-flyout .cewe-upload-progress-body .cewe-upload-progress-item-container .cewe-upload-progress-item {
  float: left;
  width: 100px;
  height: 100px;
  margin: 2px 0
}

.cewe-upload-progress-flyout .cewe-upload-progress-body .cewe-upload-progress-item-container .cewe-upload-progress-item-description {
  padding: 5px;
  overflow: hidden
}

.cewe-img-rounded {
  border-radius: 4px;
  overflow: hidden;
  -webkit-box-shadow: 0px 0px 0px 1px #ddd;
  -moz-box-shadow: 0px 0px 0px 1px #ddd;
  box-shadow: 0px 0px 0px 1px #ddd;
}

.mobile-device .tooltip {
  display: none !important;
}

.cewe-confirm-apply-colored-border-settings-dialog .cewe-colored-border-settings {
  display: table;
  margin: 20px auto;
  width: 80%;
  text-align: center
}

.cewe-confirm-apply-colored-border-settings-dialog .cewe-colored-border-settings-labels,
.cewe-confirm-apply-colored-border-settings-dialog .cewe-colored-border-settings-values {
  display: table-row;
}

.cewe-confirm-apply-colored-border-settings-dialog .cewe-colored-border-settings-label {
  display: table-cell;
  white-space: nowrap;
}

.cewe-confirm-apply-colored-border-settings-dialog .cewe-colored-border-width,
.cewe-confirm-apply-colored-border-settings-dialog .cewe-colored-border-color {
  display: table-cell;
  vertical-align: middle
}

.modal-dialog .modal-header {
  background-color: #666;
  color: #fff;
  padding: 8px 15px;
}

.modal-dialog .cewe-product-choice-dialog .modal-header {
  padding: 8px 15px;;
}

.cewe-options-menu .magnet-line-container .toggle-switch,
.cewe-photo-sources-dialog .all-photos-toggle-container .toggle-switch {
  width: 100px;
  height: 42px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
}

.cewe-options-menu .magnet-line-container .toggle-switch {
  float: right;
}

.cewe-options-menu .magnet-line-container .toggle-switch span,
.cewe-photo-sources-dialog .all-photos-toggle-container .toggle-switch span {
  line-height: 37px;
}

.cewe-options-menu .magnet-line-container .toggle-switch .switch-left,
.cewe-photo-sources-dialog .all-photos-toggle-container .toggle-switch .switch-left {
  color: #fff;
  background: #E10019;
}

.cewe-options-menu .magnet-line-container .toggle-switch .knob,
.cewe-photo-sources-dialog .all-photos-toggle-container .toggle-switch .knob {
  background-color: #fff;
  border-left: none;
}

.cewe-options-menu .magnet-line-container {
  height: 42px;
}

.cewe-options-menu .magnet-line-container .cewe-option {
  float: left;
  margin-top: 13px;
  color: #333;
}

.cw-design-area.ui-state-disabled {
  background-image: none;
  opacity: 1;
}

.drop-hover {
  -webkit-box-shadow: 2px 2px 0px 10px rgba(7, 124, 214, 1);
  -moz-box-shadow: 2px 2px 0px 10px rgba(7, 124, 214, 1);
  box-shadow: 2px 2px 0px 10px rgba(7, 124, 214, 1);
}

.cewe-shake {
  -webkit-animation-name: cewe-shake;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  -webkit-transition-timing-function: linear;
}

@-webkit-keyframes cewe-shake {
  0%, 100% {
    -webkit-transform: translateX(0) rotate(0deg) translateY(0);
  }
  15%, 35%, 55%, 75%, 95% {
    -webkit-transform: translateX(-1px) rotate(-2deg);
  }
  25%, 45%, 65%, 85% {
    -webkit-transform: translateX(1px) rotate(2deg);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateY(1px);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateY(-1px);
  }
}