html, body {height: 100vh; margin : 0px;padding : 0px}

.small {font-size : inherit}

body {font-family : Lato, Verdana, Helvetica, Sans-Serif;font-weight : 300;color : #797979}

body.small .wide {display : none}

body.wide .small {display : none}

#loading {width : 30px;height : 30px;border-radius : 50%;margin : 50px auto;display : block;-webkit-animation : spin 0.7s infinite linear;-o-animation : spin 0.7s infinite linear;animation : spin 0.7s infinite linear;border-top : 5px solid #e34853;border-right : 5px solid #f1b342;border-bottom : 5px solid #6dc5ec;border-left : 5px solid #845fa4}

.navbar-brand {position : absolute;width : 100%;left : 0;text-align : center;margin : auto;color : #323232}

#sidebar {position : fixed;right : 0;width : 230px;overflow-y : unset;z-index : 1000;display : block;}

#sidebar h1 {margin : 20px 0}

#sidebar h1 a {text-indent : -9999px;display : block;width : 100%;background : url("../img/logo.png") no-repeat;background-position : center center;background-size : 78%;color : #FFF}

#sidebar h1 a:hover {text-decoration : none}

body.isecrets-sweden #sidebar h1 {margin-bottom : 9px}

body.fotohoesje #sidebar h1 {margin-bottom : 9px}

body.fotohoesje #sidebar h1 a {background : url("../img/logo_fotohoesje.svg") no-repeat;background-size : 165px;background-position : center center;line-height : 50px}

body.coque-personnalisee #sidebar h1 {margin-bottom : 9px}

body.coque-personnalisee #sidebar h1 a {background : url("../img/logo_coquepersonnalisee.svg") no-repeat;background-size : 165px;background-position : center center;line-height : 50px}

.sidebar-nav li a:hover, .sidebar-nav li a:focus:hover {border-radius : 0;background : #464646;border-radius : 0}

.sidebar-nav li a {color : #FFF;font-size : 17px;line-height : 65px;padding : 0 0 0 20px;text-indent : 45px;border-radius : 0px}

.sidebar-nav li a:focus {background : inherit;outline : none}

.sidebar-nav li a.selected {background : #464646}

.sidebar-nav li a i {float : left;position : absolute;display : block;width : 44px;height : 100%;padding : 0;background-image : url("../img/icon_covers.png");background-repeat : no-repeat;background-position : center center;background-size : 22px auto}

.sidebar-nav li a i.icon-covers {background-image : url("../img/icon_covers.png")}

.sidebar-nav li a i.icon-designs {background-image : url("../img/icon_designs.png")}

.sidebar-nav li a i.icon-text {background-image : url("../img/icon_text.png")}

.sidebar-nav li a i.icon-collections {background-image : url("../img/icon_collections.png")}

.sidebar-nav li a i.icon-emoji {background-image : url("../img/icon_emoji.png")}

.sidebar-nav li a i.icon-cart {background-image : url("../img/icon_cart.png")}

.sidebar-nav li a i.icon-citymarble {background-image : url("../img/icon_citymarble.svg")}

.sidebar-nav li#navigationSaveListItem {display : none}

@media (max-width : 992px) {
    .mapboxgl-ctrl-bottom-right {display : none}

    .sidebar-nav li#navigationSaveListItem {display : block}

    .sidebar-nav li#navigationSaveListItem a {background-color : #28A6C6}

    .sidebar-nav li#navigationSaveListItem:hover, .sidebar-nav li#navigationSaveListItem:hover a {background-color : #168aa8}

    .sidebar-nav li#navigationSaveListItem.disabled {opacity : 0.2;pointer-events : none}

    .sidebar-nav li#navigationSaveListItem.disabled a {color : #FFF !important}

    .sidebar-nav li#navigationCoversListItem {display : none !important}
}

.nav-stacked > li + li {margin-top : 0}

#content {margin-right: 480px;position : fixed; top : 0;left : 0px;right : 0px;bottom : 0px; height : auto;background : #FFF}

#content .navbar {margin : 0}

#content .navbar .navbar-header {float : left}

#content .navbar form {margin : 8px 0 8px 0;padding : 0 15px}

#canvas {margin-top : 20px;position : relative;left : 50%;-webkit-transform : translateX(-50%);-ms-transform : translateX(-50%);transform : translateX(-50%)}

#select image {cursor : pointer}

#content {padding : 15px}

#content #canvas-container {width : 100%;height : 100%;position : relative;z-index : -1}

.stepwizard-step p {margin-top : 10px}

.process-row {display : table-row}

.process {display : table;width : 100%;margin : 0 auto;position : relative;padding : 0 150px}

.process-step {display : table-cell;text-align : center;position : relative;cursor : pointer}

.process-step.disabled {cursor : auto}

.process-step p {margin : 0;line-height : 65px;position : relative;text-transform : uppercase;font-size : 18px;letter-spacing : 1px}

@media (max-width : 767px) {
    .process-step p {font-size : 16px}
}

.process-step.active p {background : #464646}

.process-step.active p:after {content : " ";display : block;width : 0;height : 0;z-index : 10;border-left : 20px solid transparent;border-right : 20px solid transparent;border-top : 20px solid #464646;margin-left : -20px;position : absolute;bottom : -10px;left : 50%}

.btn-circle {width : 100px;height : 100px;text-align : center;padding : 6px 0;font-size : 12px;line-height : 1.428571429;border-radius : 15px}

.btn-active {border-color : #71c1dc;background-color : #71c1dc;color : #fff}

#editor {display : block;z-index : 0}

#bg {position : absolute;height : 100%;z-index : 0;display : block}

.tab-pane {overflow : hidden;padding-top : 15px}

.thumbnail .img {width : 100%;height : auto}

.bg-square {background-repeat : no-repeat;background-size : cover;background-position : center}

.in-canvas-controls-holder {position : absolute;top : 0;left : 0}

.in-canvas-controls-holder button {position : absolute}

.in-canvas-controls-holder .addimage, .in-canvas-controls-holder .deleteimage, .in-canvas-controls-holder .editimage, .in-canvas-controls-holder .zoomin, .in-canvas-controls-holder .zoomout {display : block;border : none}

.in-canvas-controls-holder .addimage {background : none;width : 57px;height : 60px;margin-top : -30px;margin-left : -30px;opacity : 0.6;border-radius : 50px;padding : 14px;background-color : #fff}

@media (max-height : 630px), (max-width : 520px) {
    .in-canvas-controls-holder .addimage {width : 57px;height : 60px;margin-top : -30px;margin-left : -30px}
}

.in-canvas-controls-holder .addimage:focus {outline : none}

.in-canvas-controls-holder .addimage .icon-addimage {display : block;width : 100%;height : 100%;background : url("/images/Union6.png") no-repeat;background-size : 100%;background-position : center center}

.in-canvas-controls-holder .deleteimage, .in-canvas-controls-holder .editimage, .in-canvas-controls-holder .zoomin, .in-canvas-controls-holder .zoomout {width : 30px;height : 30px;border-radius : 30px;margin-top : -13px;margin-left : -13px;background-color: rgba(0, 113, 119, 0.08);}

.in-canvas-controls-holder .deleteimage:focus, .in-canvas-controls-holder .editimage:focus, .in-canvas-controls-holder .zoomin:focus, .in-canvas-controls-holder .zoomout:focus {outline : none}

.in-canvas-controls-holder .zoomin {display: flex; align-items: center; justify-content: center;}

.in-canvas-controls-holder .zoomout {display: flex; align-items: center; justify-content: center;}

.export-overlay {position : absolute;background : rgba(0, 0, 0, 0.8);width : 100%;height : 100%;z-index : 999999999}

.location-popup-overlay {position : absolute;background : rgba(0, 0, 0, 0.8);width : 100%;height : 100%;z-index : 999999999}

.loader {width : 24px;height : 24px;position : absolute;top : 50%;left : 50%;margin-left : -12px;margin-top : -12px;background : url(../img/loader.png);background : url(../img/loader.svg);-webkit-animation : spin 0.7s infinite linear;-o-animation : spin 0.7s infinite linear;animation : spin 0.7s infinite linear}

.custom-bar-container {box-sizing : border-box;width : 100%;height : 10px;position : absolute;top : 0;left : 0}

.progress-custom-bar {box-sizing : border-box;width : 0%;height : inherit;max-width : inherit;max-height : inherit;background : #EE4257;transition : all 0.1s ease}

.progress-custom-num {width : 300px;height : 90px;position : absolute;top : 50%;left : 50%;margin-left : -150px;margin-top : -35px;color : white;font-size : 90px;font-weight : bold;line-height : 90px;text-align : center;transition : all 0.1s ease}

img.fake-canvas {position : absolute;top : 0;left : 0;height : 100%;width : 100%}

@media (max-width : 992px) {
    .progress-custom-num {width : 150px;height : 45px;margin-left : -75px;font-size : 45px;line-height : 45px}

    #covers-container > div > div > div > div.row > div.variations.ng-scope {margin-bottom : 2rem}

    #phones .phone_color_text {display : none}

    #phones img {margin-top : 1.5rem}

    .phone-color .active {background-position : 50% 70%;display : none}

    #sidebar h1 {display : none}

    #sidebar .sidebar-nav {display : table-row;width : 100%}

    #sidebar .sidebar-nav li {float : left;margin : 0;padding : 0;width : auto;display : table-cell;width : 20%;text-align : center}

    #sidebar .sidebar-nav li .nav-collections {display : none}

    #sidebar .sidebar-nav li a {height : 70px;margin : 0;padding : 0;text-indent : 0;font-size : 11px;position : relative;line-height : 105px}

    #sidebar .sidebar-nav li a i {text-align : center;display : block;width : 100%;height : 20px;padding : 0;position : absolute;top : 15px;left : 50%;margin-left : -50%;background-size : contain}

    #sidebar .save-button {display : none}

    .process {padding : 0 20px;max-width : 400px}

    #content {margin-left : 0;bottom : 70px}
}

@media (max-width : 720px) {
    #phones {left : 84%}
}

.modal-dialog .modal-body {background : #FFF}

.modal-dialog .modal-content {border-radius : 0;border : none;box-shadow : none;-webkit-box-shadow : none;-moz-box-shadow : none;color : #797979;overflow : hidden}

.modal-dialog .modal-content h3 {color : #464646;text-transform : uppercase;text-align : center;margin-bottom : 30px;letter-spacing : 1px}

@media (max-width : 767px) {
    .modal-dialog .modal-content h3 {font-size : 20px;margin-bottom : 20px}
}

.modal-dialog .modal-content a {color : #797979}

.modal-dialog .modal-content a:hover {color : #6ccce4}

.modal-dialog .modal-header {padding : 0;background : #646464;color : #FFF;font-size : 24px;position : relative;border : none}

.modal-dialog .modal-header .close-btn {cursor : pointer;position : absolute;right : 20px;top : 50%;margin-top : -7px;display : block;width : 13px;height : 13px;background : url("/images/exit cross.png") no-repeat;background-position : center center;background-size : 100%;text-indent : -999999px;opacity : 1;z-index : 1051}

@media (max-width : 992px) {
    .modal-dialog .modal-header .close-btn {width : 20px;height : 20px;top : 3px;right : 3px;margin : 0;background-size : 8px}
}

.modal-dialog .modal-header .close-btn:hover {opacity : 0.7}

.modal-dialog .modal-header .close-btn:active, .modal-dialog .modal-header .close-btn:hover {outline : none}

.above-controls-message {text-align : center;text-transform : uppercase;padding-top : 15px;font-size : 14px}

.above-controls-message .camera-icon {display : inline-block;background-image : url("../img/icon_upload_darker.png?v=2");background-repeat : no-repeat;background-position : center;background-size : 34px;line-height : 40px;width : 36px;position : relative;top : -10px;margin : 0 5px;text-indent : -99999px;opacity : 0.4}

.above-controls-message#click-to-upload-message {color : #C9C9C9}

@media (max-width : 992px) {
    .above-controls-message {font-size : 12px}

    #click-to-upload-message {padding-top : 0}
}

#controls, #citymarbleControls {background : #f0f0f0;width : 100%;position : absolute;z-index : 900;bottom : 0;left : 0;right : 0;padding : 5px 0}

#controls, #citymarbleControls {-webkit-touch-callout : none;-webkit-user-select : none;-khtml-user-select : none;-moz-user-select : none;-ms-user-select : none;user-select : none}

@media (max-width : 992px) {
    #controls, #citymarbleControls {max-height : 48px}
}

#controls .inner, #citymarbleControls .inner {width : calc(100% - 20px);max-width : 992px;margin : 0 auto}

#controls .ctrl, #citymarbleControls .ctrl {float : left}

#controls .range-controls, #citymarbleControls .range-controls {text-align : right;padding-right : 60px;line-height : 30px}

#controls .range-controls > span, #citymarbleControls .range-controls > span {margin-right : 24px}

@media (max-width : 992px) {
    #controls .range-controls, #citymarbleControls .range-controls {padding : 0 2px 0 15px}
}

@media (max-width : 992px) {
    #controls .range-control-wrapper, #citymarbleControls .range-control-wrapper {float : left}

    #controls .range-control-wrapper.first, #citymarbleControls .range-control-wrapper.first {margin-right : 15px}
}

#controls .range-container, #citymarbleControls .range-container {float : left;display : inline}

@media (max-width : 992px) {
    #controls .range-container, #citymarbleControls .range-container {display : block;float : none;position : relative;top : -5px}
}

#controls .range-label, #citymarbleControls .range-label {margin-right : 10px;position : relative;top : 1px}

@media (max-width : 992px) {
    #controls .range-label, #citymarbleControls .range-label {text-align : center;margin : 0;line-height : 16px}
}

#controls .control, #citymarbleControls .control {color : #949494;text-transform : uppercase;background : none;border : none;font-size : 12px;float : left;display : inline}

#controls .control:focus, #controls .control:active, #citymarbleControls .control:focus, #citymarbleControls .control:active {outline : none}

#controls .control i, #citymarbleControls .control i {display : inline-block;width : 26px;height : 26px;border-radius : 4px;background-color : #818181;background-repeat : no-repeat;background-position : center;background-size : 10px;position : relative;top : 8px;margin-right : 6px}

@media (max-width : 992px) {
    #controls .control i, #citymarbleControls .control i {width : 20px;height : 20px;background-size : 8px;margin-right : 0}
}

@media (max-width : 992px) {
    #controls .control.delete-object, #citymarbleControls .control.delete-object {position : relative;top : 5px;padding-left : 20px}
}

#controls .control.delete-object i, #citymarbleControls .control.delete-object i {background-image : url("../img/icon_delete_image.png")}

@media (max-width : 992px) {
    #controls .control.edit-object, #citymarbleControls .control.edit-object {position : relative;top : 5px}
}

#controls .control.edit-object i, #citymarbleControls .control.edit-object i {background-image : url("../img/icon_edit_image.png");background-size : 14px}

@media (max-width : 992px) {
    #controls .control.edit-object i, #citymarbleControls .control.edit-object i {background-size : 13px}
}

#controls .ctrl-black-white, #citymarbleControls .ctrl-black-white {position : relative;top : 8px;padding-left : 15px}

#controls .ctrl-black-white span.small, #citymarbleControls .ctrl-black-white span.small {position : relative;top : 7px;right : 2px}

@media (max-width : 992px) {
    #controls .ctrl-black-white, #citymarbleControls .ctrl-black-white {top : -12px}
}

#controls .ctrl-delete-object, #controls .ctrl-edit-object, #citymarbleControls .ctrl-delete-object, #citymarbleControls .ctrl-edit-object {position : relative;top : 7px}

#controls #black-white-object .toggle, #citymarbleControls #black-white-object .toggle {display : inline-block;width : 46px;height : 25px;background : #818181;position : relative;top : 8px;margin-right : 6px;border-radius : 100px}

#controls #black-white-object .toggle .circle, #citymarbleControls #black-white-object .toggle .circle {display : inline-block;position : absolute;background : #FFF;top : 2px;left : 23px;width : 21px;height : 21px;border-radius : 100px;-webkit-transition : left 0.08s linear;-moz-transition : left 0.08s linear;transition : left 0.08s linear}

#controls #black-white-object .toggle.on .circle, #citymarbleControls #black-white-object .toggle.on .circle {left : 2px}

@media (max-width : 992px) {
    #controls #black-white-object .toggle, #citymarbleControls #black-white-object .toggle {width : 34px;height : 19px;top : 8px;margin-right : 6px}

    #controls #black-white-object .toggle .circle, #citymarbleControls #black-white-object .toggle .circle {top : 2px;left : 17px;width : 15px;height : 15px;border-radius : 100px}

    #controls #black-white-object .toggle.on .circle, #citymarbleControls #black-white-object .toggle.on .circle {left : 2px}
}

@media (max-width : 992px) {
    #controls, #citymarbleControls {padding-bottom : 15px}

    #controls .control-label, #citymarbleControls .control-label {display : none}
}

#controls .row, #citymarbleControls .row {max-width : 600px;margin : 0 auto;text-align : center}

#controls .col-sm-6, #citymarbleControls .col-sm-6 {width : 50%;float : left}

#controls h3, #citymarbleControls h3 {text-align : center;text-transform : uppercase;color : #a7a7a7;font-size : 18px;margin : 20px 0 10px}

#controls input[type=range], #citymarbleControls input[type=range] {display : inline-block;-webkit-appearance : none;width : 100%;max-width : 170px;margin : 0 auto}

@media (max-width : 430px) {
    #controls input[type=range], #citymarbleControls input[type=range] {max-width : 90px}
}

@media (max-width : 330px) {
    #controls input[type=range], #citymarbleControls input[type=range] {max-width : 80px}
}

#controls input[type=range]::-webkit-slider-thumb, #citymarbleControls input[type=range]::-webkit-slider-thumb {-webkit-appearance : none}

#controls input[type=range]:focus, #citymarbleControls input[type=range]:focus {outline : none}

#controls input[type=range]::-ms-track, #citymarbleControls input[type=range]::-ms-track {width : 100%;cursor : pointer;background : transparent;border-color : transparent;color : transparent}

#controls input[type=range]::-webkit-slider-thumb, #citymarbleControls input[type=range]::-webkit-slider-thumb {-webkit-appearance : none;height : 16px;width : 16px;border-radius : 16px;background : #585858;cursor : pointer;margin-top : -4px}

#controls input[type=range]::-moz-range-thumb, #citymarbleControls input[type=range]::-moz-range-thumb {height : 16px;width : 16px;border-radius : 16px;background : #585858;cursor : pointer}

#controls input[type=range]::-ms-thumb, #citymarbleControls input[type=range]::-ms-thumb {height : 16px;width : 16px;border-radius : 16px;background : #585858;cursor : pointer}

#controls input[type=range]::-webkit-slider-runnable-track, #citymarbleControls input[type=range]::-webkit-slider-runnable-track {width : 100%;height : 8px;cursor : pointer;background : #a9a9a9;border-radius : 50px}

#controls input[type=range]::-moz-range-track, #citymarbleControls input[type=range]::-moz-range-track {width : 100%;height : 8px;cursor : pointer;background : #a9a9a9;border-radius : 50px}

#controls input[type=range]::-ms-track, #citymarbleControls input[type=range]::-ms-track {width : 100%;height : 8px;cursor : pointer;background : #a9a9a9;border-radius : 50px}

#controls input[type=range]::-ms-fill-lower, #citymarbleControls input[type=range]::-ms-fill-lower {background : #a9a9a9;border-radius : 250px}

#controls input[type=range]:focus::-ms-fill-lower, #citymarbleControls input[type=range]:focus::-ms-fill-lower {background : #a9a9a9}

#controls input[type=range]::-ms-fill-upper, #citymarbleControls input[type=range]::-ms-fill-upper {background : #a9a9a9;border-radius : 50px}

#controls input[type=range]:focus::-ms-fill-upper, #citymarbleControls input[type=range]:focus::-ms-fill-upper {background : #a9a9a9}

#controls input[type=range]::-webkit-slider-thumb:before, #citymarbleControls input[type=range]::-webkit-slider-thumb:before {content : ' ';display : block;width : 40px;height : 40px;background : transparent;border-radius : 100px;position : relative;left : -12px;top : -12px}

#controls input[type=range]::-moz-range-thumb:before, #citymarbleControls input[type=range]::-moz-range-thumb:before {content : ' ';display : block;width : 40px;height : 40px;background : transparent;border-radius : 100px;position : relative;left : -12px;top : -12px}

#controls input[type=range]::-ms-thumb:before, #citymarbleControls input[type=range]::-ms-thumb:before {content : ' ';display : block;width : 40px;height : 40px;background : transparent;border-radius : 100px;position : relative;left : -12px;top : -12px}

@media (max-width : 992px) {
    #controls h3, #citymarbleControls h3 {text-align : center;text-transform : uppercase;color : #a7a7a7;font-size : 14px;margin : 15px 0 8px}

    #controls input[type=range]::-webkit-slider-thumb, #citymarbleControls input[type=range]::-webkit-slider-thumb {height : 16px;width : 16px;border-radius : 16px;margin-top : -4px}

    #controls input[type=range]::-moz-range-thumb, #citymarbleControls input[type=range]::-moz-range-thumb {height : 16px;width : 16px;border-radius : 16px;background : #585858;cursor : pointer}

    #controls input[type=range]::-ms-thumb, #citymarbleControls input[type=range]::-ms-thumb {height : 16px;width : 16px;border-radius : 16px;background : #585858;cursor : pointer}

    #controls input[type=range]::-webkit-slider-runnable-track, #citymarbleControls input[type=range]::-webkit-slider-runnable-track {width : 100%;height : 8px;cursor : pointer;background : #a9a9a9;border-radius : 50px}

    #controls input[type=range]::-moz-range-track, #citymarbleControls input[type=range]::-moz-range-track {width : 100%;height : 8px;cursor : pointer;background : #a9a9a9;border-radius : 50px}
}

.arrow-link {font-size : 26px;text-decoration : none;font-weight : 300;position : relative}

@media (max-width : 767px) {
    .arrow-link {font-size : 22px}
}

.arrow-link:hover {color : #6ccce4;text-decoration : none}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);}

.arrow-link:hover:after {content : ' ';background : url("../img/arrow_right.png") no-repeat;background-position : center center;background-size : 17px 27px;display : block;width : 17px;height : 27px;position : absolute;top : 4px;right : -30px}

.btn-default, .btn-default:focus, .btn-default:active {background : #28a6c6;border : none;color : #FFF;font-weight : 700;text-tranform : uppercase;letter-spacing : 2px;font-size : 13px;line-height : 22px;border-radius : 5px 5px 0 0;padding : 10px;position : relative;text-transform : uppercase;}

.btn-default:after, .btn-default:focus:after, .btn-default:active:after {content : ' ';display : block;height : 6px;width : 100%;position : absolute;bottom : -6px;left : 0;border-radius : 0 0 4px 4px;}

.btn-default:hover, .btn-default:focus:hover, .btn-default:active:hover {background : #2bb1d3;color : #FFF}

.btn-default:focus:hover:after, .btn-default:active:hover:after {background : #1895b6}

.btn-default.disabled, .btn-default:focus.disabled, .btn-default:active.disabled {pointer-events : none;background : #ccc;color : #525252}

.btn-default.disabled:after, .btn-default:focus.disabled:after, .btn-default:active.disabled:after {background : #b2b2b2}

.btn.btn-more-padding {padding-left : 20px;padding-right : 20px}

.save-button {display : block;width : 80%;margin : 20px auto 0 auto}

#brands-container, #models-container {width : 100%;margin : 0 auto}

#brands-container .brand-column, #brands-container .model-column, #models-container .brand-column, #models-container .model-column {margin-bottom : 10px}

#brands-container .brand-column:nth-child(odd), #brands-container .model-column:nth-child(odd), #models-container .brand-column:nth-child(odd), #models-container .model-column:nth-child(odd) {text-align : right;padding-right : 50px}

@media (max-width : 992px) {
    #brands-container .brand-column:nth-child(odd), #brands-container .model-column:nth-child(odd), #models-container .brand-column:nth-child(odd), #models-container .model-column:nth-child(odd) {padding : 0;text-align : center}
}

#brands-container .brand-column:nth-child(even), #brands-container .model-column:nth-child(even), #models-container .brand-column:nth-child(even), #models-container .model-column:nth-child(even) {padding-left : 50px}

@media (max-width : 992px) {
    #brands-container .brand-column:nth-child(even), #brands-container .model-column:nth-child(even), #models-container .brand-column:nth-child(even), #models-container .model-column:nth-child(even) {padding : 0;text-align : center}
}

#covers-container {position : relative;}

#covers-container .inner-container {margin-left : -5px;margin-right : -5px}

#covers-container .cover-column.stock-disabled img, #covers-container .cover-column.stock-disabled h2 {pointer-events : none}

#covers-container .cover-column {padding-bottom : 0px;position : relative;}

#covers-container .cover-column:last-child {border : none}

#covers-container .cover-column .inner {width : 100%;margin : 0 auto}

#covers-container .cover-column .inner h2 {color : #646464;text-transform : uppercase;text-align : center;margin-bottom : 5px;font-size : 20px;font-weight : bold;cursor : pointer}

#covers-container .cover-column .inner h3 {text-transform : none;color : #646464;text-align : center;margin : 0;font-size : 18px}

#covers-container .cover-column .inner .line {border-top : 1px solid #646464;width : 55px;display : block;margin : 18px auto}

@media (max-width : 992px) {
    #covers-container .cover-column .inner .line {margin : 10px auto}
}

#covers-container .cover-column .inner .thumbnail {background : none;border : none;position : relative;padding : 0; margin-bottom: 10px;}

#covers-container .cover-column .inner .thumbnail img {cursor : pointer;margin : 0;width : 100%}

@media (min-width : 992px) {
    #covers-container .cover-column .inner .thumbnail img {}
}

#covers-container .cover-column .inner .thumbnail .loader {display : block;width : 30px;height : 30px;background-color : #464646;background-size : 12px;background-repeat : no-repeat;background-position : center center;border-radius : 100%}

#covers-container .cover-column .inner .variations {width : 100%;clear : both;text-align : center;position : relative;top : 10px}

@media (min-width : 992px) {
    #covers-container .cover-column .inner .variations {margin-top : -80px;float : left}
}

#covers-container .cover-column .inner .variations .variations-inner {display : inline-block}

#covers-container .cover-column .inner .variations .variation-item {display : block;width : 40px;height : 40px;float : left;margin-right : 2px;padding : 2px;position : relative;cursor : pointer}

#covers-container .cover-column .inner .variations .variation-item.selected, #covers-container .cover-column .inner .variations .variation-item:hover {border : 3px solid #818181;top : -3px}

#covers-container .cover-column .inner .variations .variation-item .inner {width : 30px;height : 30px;border : 1px solid black}

#covers-container .cover-column .inner .variations .variation-item .transparent {background-color : #FFF !important;background-image : url("../img/bg_transparent.png");background-repeat : repeat;background-size : 30px}

#covers-container .cover-column .inner .caption {font-size : 14px;color : #646464;margin-bottom : 20px;text-align : center}

#covers-container .cover-column .inner .caption ul {list-style : none;padding : 0;text-align : center}

#covers-container .cover-column .inner .button-container {text-align : center;position : relative}

#covers-container .cover-column .inner .select-button {color : #FFF;font-size : 14px;line-height : 17px;padding : 10px 26px 6px;z-index : 2}

#covers-container .cover-column .inner .select-button.disabled {color : #525252}

#covers-container .cover-column .inner .select-button:after {left : 0}

#covers-container .cover-column .inner .price .currency {font-size : 15px;position : relative;top : -8px;text-transform : uppercase}

#covers-container .cover-column .inner .stock {display : block;margin-top : 10px;font-size : 14px}

@media (max-width : 992px) {#covers-container .cover-column .inner .price
    #covers-container .cover-column .inner .price {position : static;display : block;text-align : center;font-size : 18px}

    .nav-qr {display : none}
}

@media (max-width : 767px) {
    #covers-container .cover-column .inner h2 {text-align : center;font-size : 20px;margin-bottom : 5px}

    #covers-container .cover-column .inner .price {position : static;display : block;font-size : 2.2rem; font-style: normal; letter-spacing: 0.03em;}

    #covers-container .cover-column .inner .col-sm-6 {text-align : center}
    #covers-container .cover-column .inner .price
    #covers-container .cover-column .inner ul {text-align : left}

    #covers-container .cover-column .inner .thumbnail img {max-height : 250px;width : auto;}
}

.side-modal {width : 100%;background : rgba(134, 134, 134, 0.95);position : absolute;z-index : 900;top : -9999px;left : -9999px;-webkit-transition : left 0.2s linear;-moz-transition : left 0.2s linear;transition : left 0.2s linear}

.side-modal .close-button {display : block;position : absolute;top : 0;right : 0;width : 27px;height : 28px;border-radius : 0;border : none;background-color : #464646;background-image : url("../img/icon_close.png");background-repeat : no-repeat;background-position : center center;background-size : 10px}

.side-modal .close-button:hover {background-color : #535353}

.side-modal .close-button:focus {outline : none}

.side-modal:before {content : " ";display : none;width : 0;height : 0;border-left : 20px solid #464646;border-top : 20px solid transparent;border-bottom : 20px solid transparent;position : absolute;top : 18px;left : -10px}

@media (max-width : 992px) {
    .side-modal {left : 0 !important;bottom : 0;top : auto;width : 100%;height : 100%;opacity : 1;-webkit-transition : opacity 0.2s linear;-moz-transition : opacity 0.2s linear;transition : opacity 0.2s linear;}

    .side-modal:before {display : none}

    /*.side-modal.modal-hidden {display : none;opacity : 0}*/

    .side-modal .item-container {width : 100%}

    .side-modal .close-button {display : none}
}

#side-modal-designs {top : 0;left : 0}

#side-modal-designs.modal-hidden {left : -115px; display : none}

#side-modal-designs .item-container {display : table}

#side-modal-designs .design-item {border-radius: 10px;float : left;width: 65.69px; height: 125px;cursor : pointer;position : relative;display : table-row;text-align : center;display : table-cell;vertical-align : middle;background-image : url("../img/icon_designs_empty.png");background-repeat : no-repeat;background-size : auto 65px;background-position : center}

#side-modal-designs .design-item.selected, #side-modal-designs .design-item:hover {background-color :  #488284; }

#side-modal-designs.small {height : auto;width : 100%;padding-top : 0}

#side-modal-designs.small .item-container {padding-top : 40px;position : relative;margin : 0 auto;height : calc(100% - 70px);width : 100%}

#side-modal-designs.small .design-item {background-size : auto 50px}

#side-modal-emoji {top : 0;left : 0;width : 100%}

#side-modal-emoji.modal-hidden {left : -200px;left : -200px;display : none}

#side-modal-emoji .item-container .ps-scrollbar-y-rail {border-radius : 0;margin-right : -3px; display: none;}

#side-modal-emoji .item-container .ps-scrollbar-y {border-radius : 0}

#side-modal-emoji .emoji-item {display : inline-block;background-image : none;background-repeat : no-repeat;background-size : 100%;background-position : center;cursor : pointer;-webkit-touch-callout : none;-webkit-user-select : none;-khtml-user-select : none;-moz-user-select : none;-ms-user-select : none;user-select : none}

#side-modal-emoji .emoji-item:hover {opacity : 0.7}

#side-modal-emoji .emoji-item.preloading {background : url(../img/loader.png);background : url(../img/loader.svg);background-size : 15px;background-repeat : no-repeat;background-position : center;opacity : 0.3;-webkit-animation : spin 0.7s infinite linear;-o-animation : spin 0.7s infinite linear;animation : spin 0.7s infinite linear}

#side-modal-emoji.small {height : 100%;width : 100%;padding-top : 0}

#side-modal-emoji.small .item-container {padding-top : 10px;margin : 0 auto;height : calc(100% - 70px);width : 100%}

#side-modal-emoji.small .emoji-item {width : calc(20% - 20px)}

#side-modal-citymarble {top : 0;left : 0;}

 #side-modal-citymarble.modal-hidden {left : 0}

#side-modal-text textarea, #side-modal-citymarble textarea {background : #f9f9f9;border-radius : 0;border : none;font-size : 16px}

#side-modal-text .ok-button, #side-modal-citymarble .ok-button {left : 40px;margin : 20px 0;padding : 1rem 2rem 1rem 2rem}

#side-modal-text .form-group label, #side-modal-citymarble .form-group label {color : #f9f9f9;text-transform : uppercase;text-align : center;display : inline-block;width : 100%;letter-spacing : 2px;font-size : 14px}

#side-modal-text .edit-text-buttons button, #side-modal-citymarble .edit-text-buttons button {display : inline-block;width : 36px;height : 36px;background : url("../img/icon_text_bold.png") no-repeat;background-position : center center;border : none;margin-right : 8px}

#side-modal-text .edit-text-buttons button:focus, #side-modal-citymarble .edit-text-buttons button:focus {outline : none}

#side-modal-text .edit-text-buttons button:hover, #side-modal-text .edit-text-buttons button.on:hover, #side-modal-citymarble .edit-text-buttons button:hover, #side-modal-citymarble .edit-text-buttons button.on:hover {border : 3px solid #6ccce4}

#side-modal-text .edit-text-buttons button.on, #side-modal-citymarble .edit-text-buttons button.on {border : 3px solid #168AA8}

#side-modal-text .edit-text-buttons #edit-text-bold, #side-modal-citymarble .edit-text-buttons #edit-text-bold {background-image : url("/images/B.svg")}

#side-modal-text .edit-text-buttons #edit-text-italics, #side-modal-citymarble .edit-text-buttons #edit-text-italics {background-image : url("/images/Subtract-lines.svg")}

#side-modal-text .edit-text-buttons #edit-text-align, #side-modal-citymarble .edit-text-buttons #edit-text-align {background-image : url("/images/Lines.svg")}

/*#side-modal-text .edit-text-buttons #edit-text-color, #side-modal-citymarble .edit-text-buttons #edit-text-color {background-image : url("/images/palette100px.svg")}*/

#side-modal-text .font-list, #side-modal-citymarble .font-list {box-sizing : border-box;max-height : 130px;overflow-y : scroll; background-color: white; border: 2px solid rgba(43, 102, 109, 0.5);}

#side-modal-text .font-list .btn-font:hover, #side-modal-citymarble .font-list .btn-font:hover {color : #6ccce4}

#side-modal-text .font-list .btn-font:focus, #side-modal-citymarble .font-list .btn-font:focus {outline : none}

#side-modal-text .btn-font, #side-modal-citymarble .btn-font {box-sizing : border-box;width : 100%;font-size : 18px;margin-bottom : 2px}

.sp-container {border : 1px solid #FFF !important;background : #F4F4F4 !important}

.custom-dropdown {width : 120px;text-align : center;line-height : 26px;font-size : 14px}

.custom-dropdown .selected-item {border : 2px solid #6ccce4;border-radius : 6px;color : #6ccce4;z-index : 2;position : relative;cursor : pointer;background : #FFF}

.custom-dropdown .selected-item .icon {display : inline-block;width : 25px;height : 18px;position : relative;top : 5px;background-image : url("../img/arrow_down.png");background-repeat : no-repeat;background-position : center;background-size : 17px}

.custom-dropdown .list {position : relative;z-index : 1;border : 1px solid #b8dee9;background : #FFF;position : relative;top : -10px;padding-top : 15px;border-top : none}

.custom-dropdown .list .list-item {padding : 3px 0}

.custom-dropdown .list .list-item:hover {color : #6ccce4;cursor : pointer}

.collections {position : relative}

.collections .dropdown-collection-filter {position : absolute;top : -2px;right : 0;background : #FFF}

.small .collections h3 {margin-top : 55px}

.small .collections .dropdown-collection-filter {top : -50px;right : calc(50% - 60px)}

.image-select {margin-bottom : 0px}

.image-select:hover {cursor : pointer}

.image-select h4 {text-align : center;font-size : 14px}

.image-select .img {width : 100%}

.image-select.loading:after {content : ' ';display : block;height : 30px;width : 30px;background : red;position : absolute;top : calc(50% - 15px);left : calc(50% - 15px);border-radius : 100px;background : url(../img/loader.png);background : url(../img/loader.svg);background-color : #464646;background-position : center;background-size : 12px;background-repeat : no-repeat;-webkit-animation : spin 0.7s infinite linear;-o-animation : spin 0.7s infinite linear;animation : spin 0.7s infinite linear}

.image-select.disabled {pointer-events : none}

.image-select.disabled h4, .image-select.disabled .img {pointer-events : none}

#msg-free-shipping {display : inline-block;text-align : center;width : 100%;margin : 10px 0 5px 0;color : #949494}

#product-rating {display : inline-block;text-align : center;width : 100%;margin : 10px 0 5px 0;color : #FFF}

@media (max-width : 992px) {
    #msg-free-shipping, #product-rating {display : none}
}

.center-button {text-align : center}

.facebook-album:nth-child(4n+1) {clear : left}

@media (max-width : 992px) {
    .facebook-album:nth-child(2n+1) {clear : left}
}

@media (min-width : 992px) {
    .facebook-album-photo:nth-child(6n+1) {clear : left}
}

@media (max-width : 992px) {
    .facebook-album-photo:nth-child(4n+1) {clear : left}
}

@media (max-width : 768px) {
    .facebook-album-photo:nth-child(3n+1) {clear : left}

    .facebook-album-photo:nth-child(4n+1) {clear : none}
}

.fb-back-button {font-size : 16px;text-decoration : none;font-weight : 300;position : relative;background : none;border : none;text-transform : uppercase;margin-bottom : 20px;padding-left : 20px}

.fb-back-button:after {content : ' ';background : url("../img/arrow_left.png") no-repeat;background-position : center center;background-size : 10px;display : block;width : 10px;height : 16px;position : absolute;top : 5px;left : 0px}

.fb-back-button:focus, .fb-back-button:after {outline : none}

.fb-back-button:hover {color : #6ccce4;text-decoration : none}

#modal-photo .process-step i {display : none}

@media (max-width : 992px) {
    #modal-photo .process-step i {display : inline-block;width : 34px;height : 34px;background-repeat : none;background-position : center;background-repeat : no-repeat;background-size : 34px;position : relative;top : 10px}

    #modal-photo .nav-computer i {width : 44px;height : 34px;background-size : 40px;background-image : url("../img/icon_popup_camera.png")}

    #modal-photo .nav-facebook i {background-image : url("../img/icon_popup_facebook.png")}

    #modal-photo .nav-instagram i {background-image : url("../img/icon_popup_instagram.png")}

    #modal-photo .nav-collections i {background-image : url("../img/icon_popup_collections.png")}

    #modal-photo .nav-citymarble i {background-image : url("../img/icon_popup_citymarble.svg")}

    #modal-photo .process-step p span {display : none}
}

#cloak, #bw-cloak {width : 100%;height : 100%;position : absolute;background : #FFF;z-index : 9999999;-webkit-transition : opacity 0.5s linear;-moz-transition : opacity 0.5s linear;transition : opacity 0.5s linear}

#cloak.cloak-hide, #bw-cloak.cloak-hide {opacity : 0}

#bw-cloak {background : rgba(0, 0, 0, 0.5)}

#bw-cloak.cloak-hide {display : none}

#bw-cloak:before {content : ' ';position : absolute;left : 50%;top : 50%;width : 30px;height : 30px;margin-top : -15px;margin-left : -15px;border-radius : 100px;display : block;background : url(../img/loader.svg);background-color : #464646;background-position : center;background-size : 12px;background-repeat : no-repeat;-webkit-animation : spin 0.7s infinite linear;-o-animation : spin 0.7s infinite linear;animation : spin 0.7s infinite linear}

.label-rating {text-align : center}

.label-rating h3 {display : inline-block;padding-right : 10px}

.label-rating .rating {display : inline-block}

.rating .rating-item {display : inline-block;width : 16px;height : 14px;background-repeat : no-repeat;background-size : 15px;background-position : center}

.rating .rating-full {background-image : url("../img/rating_star_filled.png")}

.rating .rating-half {background-image : url("../img/rating_star_half.png")}

.rating .rating-empty {background-image : url("../img/rating_star.png")}

#top-controls {display : none}

@media (max-width : 992px) {
    #top-controls {display : block;width : 90%;margin : 0 auto;text-align : center}

    #top-controls .inner {padding-top : 5px}

    #top-controls a {color : #28a6c6;text-transform : uppercase;font-size : 14px}

    #top-controls a:hover, #top-controls a:active, #top-controls a:focus {text-decoration : none}
}

.collection-item {padding-left : 2px;padding-right : 2px;padding-top : 4px}

.collection-preview {width : 260px;position : absolute}

.collection-preview img {width : 100%}

@media (max-width : 992px) {
    .collection-preview {position : static;margin : 0 auto;width : 100px}
}

.modal-body.second-glass {padding : 0}

.modal-body.second-glass > .row {margin-left : 0;margin-right : 0}

.listDiv {box-sizing : border-box;display : block;margin-top : 30px}

.discriptionList {display : block;list-style-type : none !important;padding : 0 !important;font-size : 14px !important}

@media (max-width : 991px) {
    .discriptionList {display : inline;list-style : none}
}

@media (max-width : 991px) {
    .discriptionList li {list-style : none;display : inline;text-transform : lowercase}
}

@media (max-width : 991px) {
    .caption {padding-left : 4px;padding-right : 4px;text-transform : lowercase;margin-bottom : 13px !important}
}

@media (max-width : 991px) {
    .caption::first-letter {text-transform : uppercase}
}

@media (max-width : 991px) {
    .caption br {content : '';width : 9px;height : 18px}
}

.caption br:before {content : ', '}

@media (max-width : 991px) {
    .discriptionList li + li:before {content : ', '}
}

.btn-skip {background : none;border : none}

@media (max-width : 400px) {
    .btn-skip {width : 100% !important}
}

.btn-skip::after {position : relative;top : 0;content : "";display : inline-block;width : 0.6em;height : 0.6em;border-right : 0.2em solid #28a6c6;border-top : 0.2em solid #28a6c6;transform : rotate(45deg);-webkit-transform : rotate(45deg);-moz-transform : rotate(45deg);-o-transform : rotate(45deg);margin-right : 0.5em;left : 8px}

.second_glass {height : 100%}

.second_glass > .infobox > h3 {margin-bottom : 0px !important}

.styleContainer > h3 {margin-bottom : 15px !important}

.second_glass h4 {font-size : 13px;margin-bottom : 20px !important}

.narrowU {padding-bottom : 15px;position : relative;text-transform : uppercase}

.narrowU:before {content : "";position : absolute;width : 40%;height : 1px;bottom : 0;left : 30%;border-bottom : 1px solid gray}

.center-text {width : 60%;margin : 0 auto;text-align : center}

@media (max-width : 991px) {
    .center-text {width : 100%}
}

.center-text p, .center-text a {font-size : 14px !important;color : #646464}

.styleContainer {width : 100%}

.styleContainer textarea[name='giftText'] {background-color : #efefef;font-family : inherit;font-size : 13px !important;border : 1px solid #ccc;box-shadow : inset 0 1px 1px rgba(0, 0, 0, 0.1);border-radius : 5px;color : rgba(0, 0, 0, 0.75);display : block;margin : 10px 0 1em 0;padding : 0.5em 1em;height : 2.3125em;width : 100%;-moz-box-sizing : border-box;box-sizing : border-box;-webkit-transition : box-shadow 0.45s, border-color 0.45s ease-in-out;transition : box-shadow 0.45s, border-color 0.45s ease-in-out;height : 90px;border : 0}

@media (max-width : 991px) {
    .styleContainer textarea[name='giftText'] {height : 45px}
}

.preview_image {background-image : url("../img/testcrops/cadeau_text_white.jpg");repeat : no-repeat;background-size : cover;background-position : center;position : relative}

.glass .preview_image {height : 344px}

@media (max-width : 991px) {
    .glass .preview_image {height : 364px}
}

.cadeau .preview_image {height : 398px}

@media (max-width : 991px) {
    .cadeau .preview_image {height : 445px}
}

.preview_glass_1 {background-image : url("../img/testcrops/glass_image1.jpg")}

.preview_glass_2 {background-image : url("../img/testcrops/glass_image2.jpg")}

.preview_glass_3 {background-image : url("../img/testcrops/glass_image3.jpg")}

.preview_gift_1 {background-image : url("../img/testcrops/cadeau_text_red1.jpg")}

.preview_gift_2 {background-image : url("../img/testcrops/cadeau_text_red2.jpg")}

.preview_gift_3 {background-image : url("../img/testcrops/cadeau_text_red3.jpg")}

.image_slideshow {min-height : 344px}

.image_slideshow.slide_glass {background : #86b8c9;background : -moz-linear-gradient(top, #86b8c9 0%, #5d91aa 100%);background : -webkit-linear-gradient(top, #86b8c9 0%, #5d91aa 100%);background : linear-gradient(to bottom, #86b8c9 0%, #5d91aa 100%);filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#86b8c9', endColorstr='#5d91aa', GradientType=0)}

@media (max-width : 991px) {
    .image_slideshow.slide_glass {min-height : 364px}
}

.image_slideshow.slide_gift {background : #f0efeb}

@media (max-width : 991px) {
    .image_slideshow.slide_gift {min-height : 445px}
}

.button_price {box-sizing : border-box;width : 100%;position : relative;margin : 20px auto}

@media (max-width : 991px) {
    .button_price {margin-top : 10px}
}

.button_price > button {width : 60%;display : block;margin : 0 auto}

.button_price > #skip_gift {font-size : 16px !important;color : #646464}

.price_value {width : 20%;box-sizing : border-box;position : absolute;right : 0px;top : 50%;transform : translateY(-50%);margin-top : 2px;font-size : 1.5em;font-weight : bold;text-align : center}

.price_currency {position : absolute;font-size : 0.75em;top : 1px;text-transform : uppercase}

.striked {text-decoration : line-through}

.priced_blue {color : #3cbede}

.tutorial_link {margin-bottom : 20px}

.wide_preview {display : block}

@media (max-width : 767px) {
    .wide_preview {display : none}
}

.narrow_preview {display : none;font-size : 40px}

@media (max-width : 767px) {
    .narrow_preview {display : block}
}

@media (max-width : 992px) {
    .phone-colors .active {background-size : 70% !important;background-position : 50% 70% !important}
}

.glass > .col-sm-6.col-md-6:first-child {padding-left : 0;padding-right : 0}

.cadeau > .col-sm-6.col-md-6:first-child {padding-left : 0;padding-right : 0}

.glass > .col-sm-12.col-md-12 {padding-left : 0;padding-right : 0}

.cadeau > .col-sm-12.col-md-12 {padding-left : 0;padding-right : 0}

@media (max-width : 992px) {
    .second-header > .process {max-width : none;padding : 0 150px}
}

@media (max-width : 991px) {
    .second-header > .process {max-width : none;padding : 0}
}

.process_hook > .process-step {width : 50%}

@media (max-width : 992px) {
    .process_hook > .process-step p {padding : 0 15px;font-size : 11px}
}

.transp-inner {display : inline-flex}

.transp-buttons a {background-color : #bdc3c7;padding : 1rem;color : white !important;border-radius : 0.35rem;text-decoration : none;float : left;margin-left : 0.3rem !important;margin-right : 0.3rem !important;font-size : 14px}

.transp-buttons.ng-scope.selected > a {background-color : #28a6c6;color : white !important}

#phones {width : 100px;position : fixed;top : 50%;transform : translateY(-50%);z-index : 9999999999;left : 86%}

.phone-colors li {list-style-type : none;text-align : center;margin-bottom : -1.5rem}

.phone-colors a {color : black;text-decoration : none}

.phone-colors img {width : 100%;border-radius : 5rem}

.phone-colors .active {background : url(../img/check_white.png);display : inline-block;background-position : center;background-size : 80%;background-repeat : no-repeat;position : relative}

.phone-colors .silver-white {background : url(../img/check_black.png);display : inline-block;background-position : center;background-size : 80%;background-repeat : no-repeat;position : relative}

.phone-color img {z-index : -50;position : relative}

.phone-color {float : left}

@media only screen and (max-device-width : 768px) and (orientation : portrait) {
    #phones {width : 80px;left : 86%;margin-right : 0.5rem;z-index : 1000000000000}

    .phone-colors .active {background-size : 60% !important;background-position : 50% 80% !important}
}

@media only screen and (max-device-width : 414px) and (orientation : portrait) {
    #phones {width : 80px;left : 81%;margin-right : 0.5rem;z-index : 0}

    #phones img {width : 80%}
}

@media only screen and (max-device-width : 375px) and (orientation : portrait) {
    #phones {width : 80px;left : 78.5%;margin-right : 0.5rem;z-index : 0}
}

@media only screen and (max-device-width : 320px) and (orientation : portrait) {
    #phones {width : 70px;left : 78%}

    #phones img {margin-top : 1rem}
}

@media screen and (min-width : 1600px) {
    #phones {left : 93%}
}

#cityPicker {margin : 5px 5px 5px auto}

.location {margin : 5px auto 5px 5px}

.map-themes {text-align : center}

.map-themes label {margin : 5px;color : #f9f9f9;text-transform : uppercase;text-align : center;display : inline-block;letter-spacing : 2px;font-size : 14px}

.map-themes button {margin : 5px}

#side-modal-citymarble {text-align : center}

#side-modal-citymarble .ok-button {left : auto}

#side-modal-citymarble.wide {width : 100%}

#side-modal-citymarble::before {bottom : 18px;top : auto}

#map-buttons {width : 100%;text-align : center}

#map-buttons input {margin-right: 0px !important; margin : 5px auto;width : 60%;display : inline-block}

#map-buttons button {display : inline-block;width : 8%;padding : 5px 0;margin : 5px 8px 8px 7px}

#side-modal-citymarble.modal-hidden {left : -160px;}

.disabledcitymarble {pointer-events : none;background-color : lightgrey}

.maptheme, .maptheme:active, .maptheme:focus {padding : 0px;border-radius : 5px}

.maptheme::after, .maptheme:active::after, .maptheme:focus::after {content : none}

#mapTitle[disabled], #mapSubtitle[disabled] {background-color : #ccc;border-color : #ccc}

.mapText input {display : inline-block;width : 47.5%;margin : 5px 0}

.icon-location {display : block;height : 22px;padding : 0;background-size : 22px auto;background : url("/images/Union-location.svg") no-repeat center center}

.mapboxAttribution {position : absolute;z-index : 1002}

#mapTitleCheckbox {position : relative;vertical-align : middle;bottom : 1px;margin : 0 5px}

#mapboximprove, #mapboxlogo {margin : 0}

#mapboxlogo a {width : 50px;height : 15px;background-size : contain;margin-right : 4px}

@font-face {
    font-family : 'Kaleko';
    src         : url("../fonts/talbot_type_-_kaleko205-bold-webfont.woff2") format("woff2"), url("../fonts/talbot_type_-_kaleko205-bold-webfont.woff") format("woff");
    font-weight : 700;
    font-style  : normal
}

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

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

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

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

@font-face {
    font-family : 'Kaleko';
    src         : url("../fonts/talbot_type_-_kaleko205-bold-webfont.woff2") format("woff2"), url("../fonts/talbot_type_-_kaleko205-bold-webfont.woff") format("woff");
    font-weight : 300;
    font-style  : normal
}

#map-themes .activeStyle {-moz-box-shadow : 0px 0px 0px 3px #1895b6 inset;outline : none;outline-offset : 0}

@media screen and (-ms-high-contrast : active), (-ms-high-contrast : none) {
    #controls input[type=range], #citymarbleControls input[type=range] {width : 100px}
}

@supports (-ms-ime-align: auto) {
    #controls input[type=range], #citymarbleControls input[type=range] {width : 100px}
}

#fake-overlay {width : 100%;height : 100%;position : fixed;background-color : white;z-index : 500;display : none}

.no-items {text-align : center;font-size : 125%;padding-top : 10rem;padding-bottom : 10rem}

.confirm-box-with-background {width : 100%;height : 100vh;position : fixed;background-color : rgba(0, 0, 0, 0.5);z-index : 9999}

.confirm-box-with-background .confirm-box {
    width: 40rem;
    position: absolute;
    z-index: 9999999999999;
    margin-left: calc(50% - 20rem);
    margin-top: 20vh;
    border-radius: 10px;
}

.confirm-box-with-background .confirm-box h3 {padding-top : 2rem;padding-bottom : 2rem;margin-top : 0; font-family: 'Helvetica Neue';font-weight: bold;}

.question-class {border-radius: 30px 30px 0px 0px;}
.confirm-box-with-background .confirm-box .confirm-box-text {margin-bottom:0px; font-size : 16px; font-family: 'Helvetica Neue'}

.confirm-box-with-background .confirm-box .btns-yes-no {margin-left : calc(50% - 14rem);margin-top : 4rem;margin-bottom : 1rem}

.confirm-box-with-background .confirm-box .btns-yes-no .btn-yes, .confirm-box-with-background .confirm-box .btns-yes-no .btn-no {color: white;
    width: 10rem;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
    float: left;
    margin-left: 1rem;
    cursor: pointer;
    font-size: 15px;
    border-radius: 30px;
    text-align: center;
}

.confirm-box-with-background .confirm-box .btns-yes-no:hover {background-color : #464646}

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

#canvas-container-loader {width : 100%;float : left}

#canvas-container-loader .spin::before {
    position : absolute;
    z-index : 99999;
    animation: 1.5s linear infinite spinner;
    animation-play-state: inherit;
    border: solid 10px #cfd0d1;
    border-bottom-color: #EE4257;
    border-radius: 50%;
    content: "";
    height: 100px;
    width: 100px;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
}
#canvas-container-loader .loader-container {border : 15px solid #d8d8d8;border-radius : 50%;border-top : 15px solid #e34853;border-right : 15px solid #f1b342;border-bottom : 15px solid #6dc5ec;border-left : 15px solid #845fa4;width : 100px;height : 100px;-webkit-animation : spin 2s linear infinite;animation : spin 2s linear infinite}

@media (max-width : 850px) {
    .confirm-box {margin-left : 5% !important;width : 90% !important;height : unset}

    .confirm-box .btns-yes-no {font-size : 125% !important}
}

.btns-yes-no .btn-no {
    width: 19rem!important;
}

@keyframes rippleEffect {
    0% {
        box-shadow: 0 0 0 0 rgba(161, 236, 203, 0.9), 0 0 0 20px rgba(161, 236, 203, 0.7), 0 0 0 40px rgba(161, 236, 203, 0.5);
    }
    100% {
        box-shadow: 0 0 0 20px rgba(161, 236, 203, 0.7), 0 0 0 40px rgba(161, 236, 203, 0.5), 0 0 0 60px rgba(161, 236, 203, 0);
    }
}

.btnAddImageRippleEffect {
    display: block !important;
    animation: rippleEffect 1s linear infinite;
    position: absolute;
    right: 5%;
    top: 55%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(128, 230, 186, 255) !important;
    text-align: center;
    cursor: pointer;
}
#canvas-container-overlay-init {
    position: absolute;
    z-index : 99998;
    height: 100%;
    width: 100%;
    background-color: white;
}