/*		GENERAL/RESET
 *		______________________________________________________________ */

html, body { -webkit-font-smoothing: antialiased; }
.builder-container {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
} 
html, body, ul, li { margin: 0; padding: 0; }
html, body, input, button, textarea, select { font-family: 'Titillium Web', serif; }
/* Firefox disable inset borders */
/*input, textarea, select { border:0; border-radius:0; box-shadow:none; background-image: none; }*/
select { background: #ffffff; font-size: 16px; -webkit-appearance:none; -moz-appearance:none; appearance:none; background-repeat: no-repeat; background-image: url(../img/select_arrow.png); background-position: right center; }
input, textarea { font-size: 16px; }
input[disabled] { background: #ffffff; }
textarea { resize: none; }
button { font-size: 14px; border: none; }
*:focus { outline: none; }
div { background-repeat: no-repeat; }
a, button { cursor: pointer; }

/* Tables */
table { width: 100%; font-size: 14px; padding: 0px 0px 50px 0px; }
tr { color: #9692a6; height: 65px; background: #f7f7f7; }
td a { color: #9692a6 !important; text-decoration: none; min-width: 45px; display: inline-block; }
tr:nth-child(even) { background: #ffffff; }
tr, td { text-align: center; }
table .head { color: #cfceda; background: #403e53 !important; font-size: 16px; }
table .subhead { color: #cfceda; background: #403e53 !important; font-size: 16px; }
table .subhead td, table .sub-cell { background: #373548; }
table .sub-cell2 { background: #e5e4f2; }
table th { font-weight: 400; }
.table-interactive tr:hover { background: #c3c2c8; cursor: pointer; }
table .images-row { background: #d4d3d9; padding: 20px; position: relative; height: 221px; }
table .images-row .frame-container { position: absolute; width: 100%; height: 261px; top: 0px; left: 0px; overflow-x: scroll; white-space: nowrap; text-align: left; }
table .images-row .frame { padding: 10px; width: 305px; height: 185px; background: #ffffff; display: inline-block; margin: 20px 0px 0px 20px; }
table .images-row .frame:last-child { margin-right: 20px; }
table .images-row .frame .picture { width: 100%; height: 150px; background-size: cover; margin: 0px; }
table .images-row .frame .tools { text-align: center; padding: 10px 0px 0px 0px; }
table .images-row .button:first-child { float: left; }
table .images-row .button:last-child { float: right; }
table .images-row .text { display: inline-block; width: 60px; }

/* Animations */
.animate-opacity { -webkit-transition: opacity 150ms ease-out; -moz-transition: opacity 150ms ease-out; -ms-transition: opacity 150ms ease-out; -o-transition: opacity 150ms ease-out;	transition: opacity 150ms ease-out; }
.animate-all { -webkit-transition: all 150ms ease-out; -moz-transition: all 150ms ease-out; -ms-transition: all 150ms ease-out; -o-transition: all 150ms ease-out; transition: all 150ms ease-out; }
.animate-mapspot { -webkit-transition: margin 100ms ease-out, background 100ms ease-out; -moz-transition: margin 100ms ease-out, background 100ms ease-out; -ms-transition: margin 100ms ease-out, background 100ms ease-out; -o-transition: margin 100ms ease-out, background 100ms ease-out; transition: margin 100ms ease-out, background 100ms ease-out; }

.ng-enter {
	opacity: 0;
	-webkit-transition: opacity 500ms ease-out; -moz-transition: opacity 500ms ease-out; -ms-transition: opacity 500ms ease-out; -o-transition: opacity 500ms ease-out;	transition: opacity 500ms ease-out;
}
.ng-enter-active { opacity: 1; }
.ng-leave { opacity: 1; }
.ng-leave-active { opacity: 0; }

/*.slideform { position: absolute; -webkit-transition: left 500ms ease-out; -moz-transition: left 500ms ease-out; -ms-transition: left 500ms ease-out; -o-transition: left 500ms ease-out; transition: left 500ms ease-out; }
.slideform .ng-enter { left: 100%; }
.slideform .ng-enter-active { left: 0%; }*/

/* Main blocks */
.container { width: 100%; height: 100%; margin: 0px; }
#wrapper { padding: 40px 116px 0px 116px; margin: 0 auto; }
#wrapper {
	-webkit-transition: transform 750ms ease-out; -moz-transition: transform 750ms ease-out; -ms-transition: transform 750ms ease-out; -o-transition: transform 750ms ease-out;	transition: transform 750ms ease-out;
}
#wrapper.wrapper-animate { transform: translateX(100%); }

.orientation { background-color: #000000; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 99999999; display: none; }
.orientation .device { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
@media only screen and (orientation: portrait) {
  html .orientation { display: block; color: #ffffff; font-size: 20px; }
  html .orientation div { position: absolute; top: 50%; left: 50%; margin-left: -10px; margin-top: 10px; }
  html .orientation .rotation { margin-top: -15px; opacity: 0.35; }
  html .orientation .device {  }
}

/* Buttons */
.button { cursor: pointer; }
.text-button { font-size: 11px !important; letter-spacing: 1px; }

.button-group { display: inline-block; border-radius: 2px; border: 1px solid #f1f1f1; min-width: 85px; height: 40px; margin-right: 30px; overflow: hidden; }
.button-group .button { float: left; text-align: center; line-height: 42px; text-transform: uppercase; text-decoration: none; font-size: 16px; font-weight: 600; color: #9692a6; border-right: 1px solid #f1f1f1; min-width: 85px; }
.button-group .button * { pointer-events: none; }
.button-group .button input { pointer-events: all; }
.button-group .button:last-child { border-right: 0px transparent !important; }
.button-group .button-active, .button-group .button:hover { background: #f7f7f7; }

.submit { background: #ffffff; box-shadow: 2px 2px 0px #cfceda; cursor: pointer; border-radius: 4px; min-width: 156px; padding: 0px 10px; height: 42px; line-height: 42px; border: 0px; text-transform: uppercase; font-weight: 600; color: #ff4d5e; }
.submit:hover { background: #f0f0f0; }

.button-row { margin: 20px 0px 0px 0px; padding: 10px 0px 0px 0px; border-top: 1px solid #cfceda; text-align: right; }

/* Icons */
.close[data-icon="d"] { font-size: 13px; }
.button-group .button[data-icon="n"] { font-size: 11px; }
.button-group .button[data-icon="r"] { font-size: 15px; }
.button-group .button[data-icon="s"] { font-size: 18px; }
*[data-icon="o"] { font-size: 30px; line-height: 77px !important; }

/* Select groups */

.select-group { float: right; }
.select-group select { padding: 0px 0px 0px 10px; line-height: 40px; font-size: 16px; font-weight: 600; color: #9692a6; border: 1px solid #f1f1f1; min-width: 185px; height: 42px; margin-right: 20px; }

/* Forms */
.form { padding-bottom: 40px; }
.form label { display: block; font-size: 16px; font-weight: 600; color: #9692a6; height: 25px; }
.form .checkbox-row { display: block; font-size: 16px; font-weight: 400; color: #9692a6; height: 25px; background: #ffffff; padding: 7px 7px; margin-bottom: 4px; }
.form label span { font-weight: 300; cursor: pointer; }
.form-column { float: left; width: 308px; margin: 0px 40px 0px 0px; }
.form-column-large { width: 680px; margin-right: 0px; }

.multiple-inputs input { margin-top: 1px !important; }
.multiple-inputs input:first-child { margin-top: 0px !important; }

.ui-default .form .input-file { background-color: #ffffff; padding: 7px 7px; height: 27px; font-size: 16px; }

.form .form-row { margin-top: 25px; }
.form .form-row:first-child { margin-top: 0px; }
.form-object { margin: 0px 0px 20px 0px; }

.form .button-group { float: right; margin: 10px 0px 6px 0px; }
.form .button-group .button { background: #ffffff; border-right: 1px solid #f8f8f9; }
.form .button-group .button:hover { background: #f8f8f9; }

.form .button-option { height: 40px; }
.form .button-option .button { width: 153px; font-size: 16px; text-transform: none; height: 40px; line-height: 38px; }
.form .button-option .optional { background: #6a4dff; color: #ffffff; }
.form .button-option .mandatory { background: #ff4d5e; color: #ffffff; }

.form yesno { display: block; width: 100%; height: 44px; }
.form .yesno-options { float: left; background: #e6e6e6; margin-right: 10px; max-width: 80px; height: 40px; padding: 2px; }
.form .yesno-options div { display: inline-block; width: 40px; text-align: center; line-height: 40px; opacity: 0.25; cursor: pointer; }
.form .yesno-options.yes-active .yes, .form .yesno-options.no-active .no { background: #ffffff; opacity: 1; }
.form .amount-options { float: left; }
.form .amount-options * { float: left; background: #ffffff; height: 44px !important; text-align: center; line-height: 42px; box-shadow: 0px 1px 1px #d6d6d9; }
.form .amount-options .amount-label { width: 60px; }
.form .amount-options .amount-plus, .form .amount-options .amount-minus { width: 40px; cursor: pointer; }
.form .amount-options input { width: 50px !important; min-width: 50px !important; }

/* Tools */
.tool-group { margin: 0px 0px 20px 0px; }
.tools, .camera-tools { color: #9692a6; }
.tool { width: 70px; height: 70px; background: #ffffff; color: #9692a6; border: 1px solid #f0f0f0; border-top: 0px transparent; text-align: center; line-height: 75px; cursor: pointer; }
.tool-active, .tool:hover { background: #f0f0f0; }
.tool-red { color: #ff4d5e; }

/* General */
.clear { clear: both; }
.no-float { float: none !important; }
.semibold { font-weight: 600 !important; }
.hidden-input { position: relative; }
.hidden-input input { opacity: 0; top: 0px; left: 0px; position: absolute; width: 100%; height: 100%; }

/* Dialog */
.dialog { width: 500px; height: 300px; background: #f5f4f4; border: 10px solid #ffffff; position: fixed; top: 50%; left: 50%; margin-top: -150px; margin-left: -250px; z-index: 100; }
.dialog {

}
.dialog-bg { width: 100%; height: 100%; background: #3b3a42; position: fixed; opacity: 0.4; top: 0px; left: 0px; z-index: 99; }

.dialog .button-row { border: none; padding: 0; margin: 0; text-align: center; position: absolute; bottom: 30px; margin-left: 88px; }
.dialog .close { position: absolute; top: 10px; right: 10px; color: #9692a6; }
.dialog .text { width: 60%; padding: 0px 20%; height: 298px; display: table-cell; vertical-align: middle; color: #aba8bf; font-size: 26px; line-height: 30px; font-weight: 600; text-align: center; }
.dialog .text img { display: block; margin: 0 auto; margin-bottom: 15px; }

/*		UI-DEFAULT:		*
 *		______________________________________________________________ */

.ui-default { background: #f0f0f0; }
.ui-default, .ui-default a { color: #000000; }

/* Forms */
.ui-default .form input, .ui-default .form select, .ui-default .form textarea { width: 288px; height: 40px; padding: 0px 10px; margin: 0px; border: none; color: #d6d6d9; font-weight: 600; }
.ui-default .form input, .ui-default .form select, .ui-default .form textarea, .ui-default .form .button-group, .ui-default .form .checkbox-row { box-shadow: 0px 1px 1px #d6d6d9; }
.ui-default .form select { width: 308px; }
.ui-default .form input[type="checkbox"] { box-shadow: none; }
.ui-default .form textarea { padding: 10px; }
.ui-default ::-webkit-input-placeholder { color: #d6d6d9; }
.ui-default :-moz-placeholder { color: #d6d6d9; opacity: 1; }
.ui-default ::-moz-placeholder { color: #d6d6d9; opacity: 1; }
.ui-default :-ms-input-placeholder { color: #d6d6d9; }
.ui-default :-o-input-placeholder { color: #d6d6d9; }
.ui-default .form .button-option { box-shadow: 0px 0px 0px; }

/*		DATABASE
 *		______________________________________________________________ */

/*		MENU
 *		______________________________________________________________ */

#menu { width: 100%; height: 80px; background: #302f3e; }
#menu .logo { width: 115px; height: 80px; float: left; line-height: 80px; text-align: center; }
#menu .menu-button { font-family: 'va-ica'; font-size: 17px; width: 84px; height: 80px; color: #9692a6; text-align: center; line-height: 80px; text-decoration: none; display: block; float: left; cursor: pointer; margin: 0px 0px 0px 1px; }
#menu .menu-button-active { color: #ff4d5e; }
#menu .logo, #menu .menu-button:hover { background: #373548; color: #ff4d5e; }

/*		NAVBAR
 *		______________________________________________________________ */
 
.navbar { min-height: 90px; background: #ffffff; box-shadow: 2px 0px 0px #dcdcde; }
.navbar .navbar-wrapper { padding: 25px 116px 25px 116px; min-height: 40px; }
.navbar .title { float: left; border-left: 4px solid #9692a6; padding: 0px 0px 0px 10px; color: #9692a6; font-size: 24px; line-height: 23px; font-weight: 600; }
.navbar .button-groups { float: right; }
.navbar .button-groups .button-group:last-child { margin-right: 0px; }

/*		BUILDER
 *		______________________________________________________________ */

.builder-container { top: 0px !important; z-index: 50; overflow: hidden; }
.builder { position: absolute; top: 0px; left: 0px; }
.builder img { pointer-events: none; max-width: 1280px; }

.builder-tools, .webcam-tools { position: absolute; top: 20px; left: 20px; z-index: 51; }
.builder-panels { 
	position: absolute; top: 0px; right: 0px; z-index: 52; background: #302f3e; width: 90px; height: 100%; overflow: hidden;
	/*-webkit-transition: width 250ms ease-out; -moz-transition: width 250ms ease-out; -ms-transition: width 250ms ease-out; -o-transition: width 250ms ease-out;	transition: width 250ms ease-out;*/
}
.builder-panels-active { width: 470px; }

.builder-panel { position: absolute; top: 0px; left: 90px; width: 380px; height: 100%; background: #e6e6e6; overflow-y: scroll; 
	-webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important;	transition: none !important;
}
.builder-panels .panel-button { height: 90px; width: 90px; text-align: center; color: #aba8bf; font-size: 10px; font-weight: 600; line-height: 15px; cursor: pointer; }
.builder-panels .panel-button .icon { margin-top: 28px; display: inline-block; font-size: 15px; }
.builder-panels .panel-button-active { color: #ff5e6e; }
.builder-panel .panel-button:hover { background: #373548; color: #ff5e6e; }

.builder-panel .navbar { padding: 25px 30px 0px 30px; min-height: 65px; }
.builder-panel .form, .builder-panel .gallery { padding: 30px; }
.builder-panel .gallery-image { width: 300px; background: #ffffff; padding: 10px; margin: 0px 0px 20px 0px; cursor: pointer; }
.builder-panel .gallery-image-active { box-shadow: inset 0 0 0 5px #ff4d5e; }
.builder-panel .gallery-image .image { width: 300px; height: 150px; background-position: center center; background-size: cover; margin-bottom: 6px; }
.builder-panel .gallery .toolbar { min-height: 20px; }
.builder-panel .gallery .trash { float: right; }
.builder-panel .gallery { color: #aba8b8; }

.builder-container screen { width: 450px; height: 200px; position: absolute; top: 0px; left: 0px; background-color: #000000; background-repeat: no-repeat; cursor: pointer; }
.builder-container screen { 
	-webkit-transition: transform 150ms ease-out, border 150ms ease-out, width 150ms ease-out, height 150ms ease-out;
	-moz-transition: transform 150ms ease-out, border 150ms ease-out, width 150ms ease-out, height 150ms ease-out;
	-ms-transition: transform 150ms ease-out, border 150ms ease-out, width 150ms ease-out, height 150ms ease-out;
	-o-transition: transform 150ms ease-out, border 150ms ease-out, width 150ms ease-out, height 150ms ease-out;
	transition: transform 150ms ease-out, border 150ms ease-out, width 150ms ease-out, height 150ms ease-out;
}
.builder-container screen .info { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background-color: rgba(48,47,62,0.9); font-weight: 600; color: #ff5e6e; text-align: center; font-size: 16px; }
.builder-container screen .info .wrap { height: 100%; width: 100%; text-align: center;
	display:-ms-flexbox;
	-ms-flex-pack:center;
	-ms-flex-align:center;
	display:-moz-box;
	-moz-box-pack:center;
	-moz-box-align:center;
	display:-webkit-box;
	-webkit-box-pack:center;
	-webkit-box-align:center;
	display:box;
	box-pack:center;
	box-align:center;
}

/*		MAP
 *		______________________________________________________________ */ 

.store-container.ng-hide { display: block !important; }
.map-container, .builder-container { position: fixed; top: 170px; left: 0px; z-index: 0; width: 100%; height: 100%; background-color: #dddddd; overflow: hidden; }
.map-container {
	z-index: 1;
	-webkit-transition: top 1000ms ease-out; -moz-transition: top 1000ms ease-out; -ms-transition: top 1000ms ease-out; -o-transition: top 1000ms ease-out; transition: top 1000ms ease-out;
}
.map-container .map { position: absolute; left: 0px; top: 0px; }
.map-container .map img { pointer-events: none; }
.map-container.ng-hide { top: 5000px !important; display: block !important; }

.mapspot { width: 38px; height: 34px; background: #ff4d5e; color: #ffffff; font-weight: 600; position: absolute; cursor: pointer; }
.mapspot .text { width: 100%; margin: 4px 0px 0px 0px; text-align: center; pointer-events: none; }
.map-container .pin, table .mapspot .pin { width: 8px; height: 8px; position: absolute; bottom: -3px; left: 15px; background: #ff4d5e; transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); pointer-events: none; }
table .mapspot { position: relative; display: inline-block; line-height: 28px; }
table .mapspot[mandatory="0"], .map-container mapspot[mandatory="0"], .map-container mapspot[mandatory="0"] .pin, table .mapspot[mandatory="0"] .pin { background: #6a4dff; }
.map-container .mapspot-active { margin-top: -5px; }
.map .mapspot { margin-top: -34px; margin-left: -19px; }

.map-popup { position: absolute; left: 0px; top: 0px; width: 305px; height: 215px; margin-left: -146px; margin-top: -250px; color: #9692a6; background: #ffffff; padding: 10px; border-radius: 4px; }
.map-popup .title { font-size: 18px; font-weight: 600; line-height: 26px; min-height: 20px; }
.map-popup .close { float: right; margin-right: 4px; }
.map-popup .popup-picture { width: 100%; height: 150px; background-size: cover; background-position: center center; margin-top: 4px; }
.map-popup .popup-tools { padding-top: 11px; }
.map-popup .button { display: inline-block; margin: 0px 0px 0px 4px; }
.map-popup .button:last-child { float: right; margin: 0px 4px 0px 0px; }
.map-popup .pin { left: 160px; background: #ffffff; }
.map-popup .close, .map-popup .button { cursor: pointer; }

/*		CAMERA & PICTURES
 *		______________________________________________________________ */

.webcam-container { height: 100%; background-color: #000000; }
webcam, .webcam-container { position: fixed; width: 100%; top: 0px; left: 0px; z-index: 50; }

webcam img, webcam canvas { position: absolute; top: 0px; left: 0px; z-index: 51; display: none; }
.capture-active, webcam canvas { display: block; }

webcam .grid { width: 100%; height: 100%; position: fixed; background-repeat: repeat; opacity: 1; }
webcam .grid-red { background-image: url(../img/webcam_grid_red.png); }
webcam .grid-black { background-image: url(../img/webcam_grid_black.png); }
.webcam-tools-right { left: auto; right: 20px; }
.webcam-action { position: fixed; left: 0px; bottom: 0px; z-index: 52; background: #ff4d5e; cursor: pointer; width: 100%; height: 80px; color: #d6414f; text-align: center; line-height: 80px; font-weight: 600; font-size: 24px; }
.webcam-action:hover { color: #f3495a; background: #d6414f; }

.picture { width: 640px; height: 360px; background-image: url(../img/pspattern.jpg); background-repeat: repeat; margin: 0px 0px 0px 20px; }
.picture-frame { width: 100%; height: 410px; padding: 20px 0px 0px 0px; background: #ffffff; box-shadow: 0px 1px 1px #d6d6d9; position: relative; text-align: center; }
.picture-frame .placeholder { padding: 70px 0px 0px 0px; font-size: 28px; line-height: 34px; font-weight: 600; color: #aba8bf; opacity: 0.6; }
.picture-frame .placeholder img { margin: 0px 0px 10px 0px; }
.picture-frame .captured-picture { width: 100%; height: 100%; background-size: cover; background-position: center center; }

.camera-tools { bottom: 0px; width: 640px; height: 40px; padding: 0px 20px; position: absolute; }
.camera-tools .button { float: right; min-width: 60px; height: 40px; text-align: right; overflow: hidden; margin-right: 4px; padding-top: 3px; }
.camera-tools div:first-child { float: left; }

/*		UI-LOGIN:		LOGIN/LOST PASSWORD
 *		______________________________________________________________ */

.ui-login { background: #302f3e; }
.ui-login, .ui-login a { color: #aba8bf; }

.login-wrapper { height: 500px; background-image: url(../img/poweredby.png); background-position: center bottom; position: absolute; top: 50%; margin-top: -280px; left: 50%; margin-left: -157px; }
.login-wrapper .title { color: #ff4d5e; text-align: center; font-size: 54px; font-weight: 600; letter-spacing: 20px; text-transform: uppercase; margin: 35px 0px 35px 0px; }
.login-wrapper .form-group { max-width: 325px; margin: 0 auto; text-align: center; }

.login-wrapper input[type="email"], .login-wrapper input[type="password"] { color: #9692a6; padding: 15px 0px; max-height: 16px; width: 320px; text-align: center; background: #fdfdfd; border: 1px solid #3a394c; }
.login-wrapper ::-webkit-input-placeholder { color: #9692a6; }
.login-wrapper :-moz-placeholder { color: #9692a6; opacity: 1; }
.login-wrapper ::-moz-placeholder { color: #9692a6; opacity: 1; }
.login-wrapper :-ms-input-placeholder { color: #9692a6; }
.login-wrapper :-o-input-placeholder { color: #9692a6; }

.login-wrapper .has-error input { background: #ff4d5e; color: #ffffff; }

.login-wrapper input { margin-bottom: 10px; }
.login-wrapper .submit { background: #3a394c; box-shadow: 2px 2px 0px #2c2b3b; margin: 20px 0px 40px 0px; }


/*		RESPONSIVE
 *		______________________________________________________________ */

/*@media only screen and (min-width: 1320px) {*/
  .form-column { width: calc(33% - 40px); margin: 0px 0px 0px 0px; padding: 0px 40px 0px 0px; }
  .form-column:last-child { width: 34%; padding: 0px 0px 0px 0px; }
  .ui-default .form input, .ui-default .form select, .ui-default .form textarea { width: 100%; min-width: 280px; }
  .ui-default .form input, .ui-default .form textarea { width: calc(100% - 19px); }
  .form .button-option .button { width: 50%; }
  .ui-default .form .button-option { width: 100%; }
  .form-column-large { width: 680px; padding: 0px 0px 0px 0px; }
/*}*/