/* ============================================ *
 * Moodboard
 * ============================================ */
.moodboard-holder {
    z-index: 50;
    overflow:hidden;
}
.moodboard-content { position:absolute; top:62px; left:60px; right:0; bottom:0; width:auto; background-color:#494949; overflow-x: hidden; overflow-y: hidden; }
.dealer .moodboard-content { top: 102px; }

.moodboard-nav-holder { position:absolute; top:0; left:0; width: 60px; height: 100%; z-index: 9999; cursor: pointer; }
.dealer .moodboard-nav-holder { cursor: default; }
.moodboard-nav-holder .moodboard-nav { position:absolute; top:0; left:0;bottom:0;right:0; z-index:1; background-color: #697bb7;
    -webkit-transition: background-color .5s ease-in 0.1s;
    -moz-transition: background-color .5s ease-in 0.1s;
    -o-transition: background-color .5s ease-in 0.1s;
    transition: background-color .5s ease-in 0.1s; }
.moodboard-nav-holder .opener { position:absolute; top:0; left:0;bottom:0;right:0; z-index:-1; }
.moodboard-holder.active .moodboard-nav { background-color: rgba(40,59,81,1);}
/* .nav-moodboard .counter { position: absolute; right: 50%; margin-right: -13px; top: 0; }
.nav-moodboard .heart { position: absolute; right: 50%; margin-right: -19px; bottom: 0; color: white; }*/
.moodboard-nav .center-icons { display:block; height: 76px; width: 60px; top: 50%; margin-top: -38px; text-align:center; position: fixed; }
.moodboard-nav .center-icons:hover { text-decoration: none; }
.moodboard-nav .badge { display:block; margin:0 auto; padding:5px 0; border-radius: 50%; color: #697bb7; width:2em;}
.moodboard-nav .icon { margin:0 auto; color: white; font-size:2.2em; line-height:1.4; }
.moodboard-nav .open-closer { position: fixed; top: 75px; color: white; width: 60px; }
#moodpanel .open-closer .fa { width: 100%; text-align: center; }
#moodpanel .open-closer .fa-chevron-right { display: none;}

.moodboard-active-helper { position: fixed; top: 0; bottom: 0; width: 100%; height: 100%; z-index: 103; background: rgba(73, 73, 73, 0.4); cursor: pointer; }
#moodpanel {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 60px;
    z-index: 100;
}
#moodpanel.collapsed .moodboard-nav-holder { /*margin-left: 60px;*/ }
#moodpanel.collapsed .open-closer .fa-chevron-left { display: none; }
#moodpanel.collapsed .open-closer .fa-chevron-right { display: inline-block; }

.moodboard-nav .help-button,
.moodboard-nav .home-button {
    position: fixed;
    bottom: 20px;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22);
    width: 35px;
    height: 35px;
    display: table-cell;
    background: white;
    text-align: center;
    color: #697bb7;
    cursor: pointer;
    border-radius: 50%;
    vertical-align: middle;
    text-align: center;
    font-size: 24px;
    z-index: 101;
    margin-left: 12px;
}
.moodboard-nav .help-button { bottom: 70px; }
.moodboard-nav .home-button .fa,
.moodboard-nav .help-button .fa { text-align: center; position: absolute; top: 6px; left: 0px; width: 100%; }
.moodboard-nav .help-button:hover .fa,
.moodboard-nav .home-button:hover .fa { color: black; }
#helpcenter {
    -webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,0.25);
    box-shadow: 0 1px 5px 0 rgba(0,0,0,0.25);
    -webkit-transform: translateZ(0);
    border-radius: 6px;
    background: #fff;
    position: absolute;
    z-index: 685;
    position: fixed;
    bottom: 10px;
    right: 80px;
    width: 250px;
    min-height: 200px;
    padding: 22px 26px;
    text-align: center;
    display: none;
}

#helpcenter.active { display: block;}
#helpcenter .btn { font-size: 14px; width:100%;}
#helpcenter .btn .fa { position: absolute; right:14px; margin-left 0;}
#helpcenter.moodboard-active { left: 160px; right: 0px; }
#iso_list:after {
    content: ' ';
    display: block;
    clear: both;
}
.moodboard-nav.attract{
    background-color:#283b51;
}
.grid-sizer { width:20%; padding:0 1px 1px 0; }

.moodboard-items { margin-top: 10px; padding: 0; position: relative; height: 80vh; }
.moodboard-items .loader { background: green none repeat scroll 0 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000; }
.moodboard-items .item {  width:212px; margin:0; padding: 0px; height: 0px; float: left; background-size: cover; background-position: center center; }
.moodboard-items .item .canvas {  position: absolute; top: 0px; left: 0px; position: relative; /*display:table-cell;  vertical-align: middle; height:100%; width:100%; overflow:hidden; text-align: center;*/ }
.moodboard-items .item .canvas.add-image,
.moodboard-items .item .canvas.color,
.moodboard-items .item .canvas img { /*max-width:425px; max-height:350px;*/ min-height:100%; min-width:100%;position: absolute; top: 0px; left: 0px;  }
.moodboard-items .item.empty {/*padding:5px;*/}
.moodboard-items .item.empty footer,
.moodboard-items .item.empty .center-content { display: none; }
.moodboard-items .item.empty .active footer,
.moodboard-items .item.empty .active .center-content { display: block; }
.moodboard-items .item.empty .container-edit { display: block; min-height: auto; background-color: transparent; }
.moodboard-items .item.canvas{ padding-bottom: 100%; position: relative; }
.moodboard-items .item.empty .canvas:before { content: ''; position: absolute; /*height:90%; width: 90%;*/ border: 2px dashed #aaaaaa; bottom:.5em; top:.5em; left:.5em; right:.5em; }
.moodboard-items .tile-small { padding-bottom:  20%; width: 20%; max-width: 20%; }
.moodboard-items .tile-large { padding-bottom:40%; width:40%; max-width: 40%; }
.moodboard-items .tile-up { padding-bottom:40%; width: 20%; max-width: 20%; }
.moodboard-items .tile-wide { padding-bottom:  20%; width:40%;max-width: 40%; }
.moodboard-items .btn-edit { display: block; }
.moodboard-items .empty .btn-edit { display: block; }
.moodboard-items .item:hover .btn-edit,
.moodboard-items .item:focus .btn-edit { display: block; }
.moodboard-items .btn-edit.edit-image,
.moodboard-items .btn-edit.edit-color { /*text-align: right;*/ }
#moodpanel .moodboard-items { padding-bottom: 20px; }

/* FOCUSPOINT */
.focuspoint { width: 100%; padding-bottom: 100%; }
.tile-wide .focuspoint { width: 100%; padding-bottom: 50%; }
.tile-up .focuspoint { width: 100%; padding-bottom: 200%; }

.moodboard-items .btn-edit { position: absolute; top: 50%; left: 50%; margin-left: -73px; height: 38px; margin-top: -19px; text-align: center; width: 146px; z-index:3; }
.moodboard-items .btn-edit .fa { /*margin: 0px; left: 8px; right: auto; position: absolute;*/ }
.moodboard-items .counter { position: absolute; color: white; top: 25px; right: 5px; z-index:100; }
.moodboard-items .login-required { color: #a94442; }

.moodboard-items .container-edit { position:absolute; left:0; top:0; right:0; bottom:0; display:none; font-size:90%; text-align:center; color:#fff; background-color: rgba(0,0,0,0.75); }
.moodboard-items .container-edit.colorswap { background: transparent; }
.moodboard-items .canvas.color .container-edit { min-height: auto; }

.colpick { height: 176px; }
.container-edit.active { display:block; z-index:20; }
.container-edit a, .container-edit a:focus, .container-edit a:visited { color:#fff; text-decoration: none; cursor: pointer; }
.container-edit em { font-style:normal; }
.container-edit .enlarge { position:relative; float:left; display:block; width:30px; height:30px; background:transparent; z-index:3;}
.container-edit .enlarge .icon { display:block; width:100%; padding:10px; }
.container-edit .share-icons { float:right; display:block; width:30px; margin-top:10px;  }

.container-edit .center-content { position:absolute; top:0; bottom:0; margin:0; width:100%; text-align: center; z-index:1; }
.container-edit .moodboard-swap { display: block; height: 100%; cursor: move; opacity:.75; padding-top:.5em; }
.container-edit .moodboard-swap:focus,
.container-edit .moodboard-swap:hover { opacity:1;}
.container-edit .moodboard-swap .fa { display:block; font-size:2.5em; width:1em; margin:0 auto; cursor: move; }
.item.empty .container-edit .moodboard-swap .fa { padding:.33em 0;  }

.tile-up .container-edit .moodboard-swap,
.tile-large .container-edit .moodboard-swap { padding-top:1.5em; }

.container-edit .middle-content { position:absolute; top:28%; width:100%; clear:both; text-align: center; }
.moodboard-items .item.empty .container-edit footer,
.moodboard-items .canvas.color .container-edit footer { top: 66%; }
.tile-up .container-edit .middle-content,
.tile-large .container-edit .middle-content { top: 25%; }
.tile-up .container-edit .bottom-content,
.tile-large .container-edit .bottom-content { bottom: auto; top: 55%; }
.tile-up .container-edit footer,
.tile-large .container-edit footer { bottom: auto; top: 75%; }

@media only screen and (max-width: 1024px) {
    .tile-up .container-edit .bottom-content,
    .tile-large .container-edit .bottom-content { top: 60%; }
}

.container-edit .container-layout { position: relative; z-index: 3; width:auto; width:164px; margin:0 auto; }
.container-edit .layout { width:160px; margin:10px auto; }
.container-edit .layout .template { float:left; display:inline-block; margin-right:5px; width:35px; height:28px; border:1px solid; padding:1px; color: #fff; opacity: 0.7; }
.item.tile-small .template.small,
.item.tile-large .template.large,
.item.tile-up .template.up,
.item.tile-wide .template.wide,
.container-edit .layout .template:hover,
.container-edit .layout .template.active { opacity:1; }
.container-edit .layout .icon { float:left; display:inline-block; background-color: #fff; width:50%; height:13px; }
.container-edit .layout .large .icon { width:100%; height:24px; }
.container-edit .layout .up .icon { width:50%; height:24px; }
.container-edit .layout .wide .icon { width:100%; height:13px; }
.container-edit .layout .small { margin-right:0; }

.container-edit .bottom-content { position:absolute; bottom:30%; width:100%; }
.container-edit footer { position:absolute; top:80%; width:100%; color:#fff; background:transparent; padding:0 4% 10px 4%; }
.tile-large .container-edit footer { }
.container-edit footer .delete { position:relative; display:inline-block; cursor: pointer; z-index:3; }
.container-edit footer .delete .fa { display:block; margin: 4px auto; }

.moodboard-settings { position:relative; margin-top:10px; color:#fff; margin-bottom: 10px; z-index: 99; }
.moodboard-settings em { display:block; color: #7b7b7b; font-family: 'MuseoSansRounded-300'; font-weight: 300; font-style:normal; }
.moodboard-settings .textarea { margin-left:-2px; }
.moodboard-settings .edit { padding:2px;  border: 1px dashed transparent;}
.moodboard-settings .edit:focus { border: 1px dashed rgba(255, 255, 255, 0.25); border-radius: 5px; }
.moodboard-settings .editable { text-decoration: underline; }
.moodboard-settings .h1 { display:inline-block; }
.moodboard-settings .settings { position:relative; float:right; color:#fff; z-index:4; }
.moodboard-settings .settings:focus { outline: none; }
.moodboard-settings .settings .fa { margin-left:4px; font-size:110%; }
.moodboard-settings .menu { position:absolute; right:0; top:-4px; border:1px solid #7b7b7b; background-color: #585858; z-index:2; }
.moodboard-settings .menu-list { list-style:none; padding:0; margin:1.7em 1em 1em; }
.moodboard-settings .menu-list a { display: inline-block; padding: 2px 0; color: #fff; }
.moodboard-container { /*padding-bottom: 200px;*/}

.popover { min-width: 200px; font-size: 12px;}
#settings {
    display:none;
    opacity:0;

    -webkit-transition-property: display, opacity;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function:ease-in-out, ease-in-out;

    -moz-transition-property: display, opacity;
    -moz-transition-duration: 1s;
    -moz-transition-timing-function:ease-in-out, ease-in-out;

    -o-transition-property: display, opacity;
    -o-transition-duration: 1s;
    -o-transition-timing-function:ease-in-out, ease-in-out;

    transition-property: display, opacity;
    transition-duration: 1s;
    transition-timing-function:ease-in-out, ease-in-out;
}
#settings.active {
    display:block;
    opacity:1;
}
.moodboard-settings span.textarea { position: relative; display: inline-block; padding: 0px; margin-bottom: 10px; margin-top: 10px; }
.moodboard-settings .toggle-editable img { position: absolute; right: 0px; top: 0px; opacity: 0.7; }
.moodboard-settings .toggle-editable:hover img { opacity: 1;}
.moodboard-settings textarea  { background: transparent; border: 0px; color: white; resize: none; overflow: hidden;  padding: 0px;  }
.moodboard-settings #moodboard-titel {  font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
    font-size: 36px;
    height: auto;
}

.moodboard-settings #moodboard-description { height: 110px; }
.moodboard-settings .h3 { display:inline-block; font-size: 1.325em; font-weight: 200; }
.moodboard-settings .outgoing .h3 { /*width:60%; min-width: 160px;*/ }
.moodboard-settings .social-media .h3 { width: auto; margin-bottom: 8px; margin-right:7px; margin-top: 0px;}

.moodboard-settings .sharing { display:inline-block; }
.moodboard-settings .sharing .badge { font-size:1.125em; border-radius:50%; height: 30px; line-height:1.35; width: 30px; background-color: #797979; color: #494949;}
.moodboard-settings .sharing .fa-envelope-o { margin-left:-1px; margin-top:1px; }
.moodboard-settings .sharing .badge:hover { color: #fff; }

.moodboard-settings .btn { width:100%; text-align: left; position: relative; white-space: normal; padding: 12px; }
.moodboard-settings .btn:hover { color:#fff; opacity:0.8; }
.moodboard-settings .btn .fa { position: absolute; right:12px;}
.moodboard-settings .btn-plain { width: auto; margin-bottom: 8px; color: #494949;}
.moodboard-settings .btn-plain:hover { color:#494949; }
.moodboard-settings .link { color:#fff; display: block; margin: 1em 0;}
.moodboard-settings .btn-primary.btn-sm { width: auto; padding-right: 30px; }

.moodboard-suggestions { bottom:0; left:auto; background-color:#494949; padding: 15px 0 0 0; width: 66.66666667%; position: fixed; }
.moodboard-suggestions.collision { position: static; float: left; width: 100%; }
.moodboard-suggestions ul {
    height:150px; overflow: hidden;
}
.scroll-me { height: 70vh; overflow-y: scroll; }
.moodboard-suggestions.active ul {}
.moodboard-suggestions .header span { color:#fff; }
.moodboard-suggestions .header .btn-plain { margin-right:1em; border-radius:8px; font-size:80%; padding:2px 10px; text-transform: lowercase; margin-left: 15px;}
.moodboard-suggestions .header .btn:hover { opacity:0.8; }
.moodboard-suggestions .choise-list {  }
.moodboard-suggestions .choise-list .choise { padding-top: 1em; padding-bottom: 1em; position: relative; text-align: center; height: 100%; width: 150px; }
.moodboard-suggestions .choise a {      background-position: center center;
    background-size: cover;
    display: inline-block;
    height: 100%;
    width: 100%;
}
.moodboard-suggestions .choise .btn { position: absolute; top:50%; left:50%; margin-left:-42px; margin-top:-8px; text-transform: lowercase; opacity:0; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s; }
.moodboard-suggestions .choise .btn:hover {  }
.moodboard-suggestions .choise a:hover .btn { color:#fff; opacity:0.88; }

span.disabled-message {
    font-size: 12px;
    display: block;
}