span.save-your-design-modal-container {
position: relative;
padding-right: 1em;
padding-left: 1em; }
@media (max-width: 660px) {
span.save-your-design-modal-container {
display: block;
height: 100%;
padding: 0; } }
a.save-your-design,
a.save-your-design--pdf {
display: inline-block;
padding: 4px 9px; }
a.save-your-design svg,
a.save-your-design--pdf svg {
height: 23px;
fill: currentColor;
width: 23px;
margin-right: 10px;
vertical-align: middle; }
@media (max-width: 660px) {
a.save-your-design svg,
a.save-your-design--pdf svg {
margin-right: 0;
transform: translateY(14px); } }
a.save-your-design span,
a.save-your-design--pdf span {
vertical-align: middle; }
@media (max-width: 660px) {
a.save-your-design span,
a.save-your-design--pdf span {
display: none; } }
@media (max-width: 660px) {
a.save-your-design,
a.save-your-design--pdf {
display: block;
height: 100%;
width: 60px; } }
a.save-your-design--pdf.downloading {
position: relative; }
a.save-your-design--pdf.downloading span {
opacity: 0.1; }
a.save-your-design--pdf.downloading::before {
content: '';
position: absolute;
background: url(//longwhitecloudwatches.com/wp-includes/images/spinner.gif) no-repeat 50% 50%;
width: 20px;
height: 20px;
display: block;
left: calc(50% - 10px);
top: calc(50% - 10px); }
.save-your-design.disabled + .mkl-pc-syd-modal .save-form {
display: none; }
.mkl-pc-syd-modal {
opacity: 0;
visibility: hidden;
position: absolute;
z-index: 2000;
bottom: calc( 100% + 20px);
left: calc( 50% - 125px);
transition: 0.2s all;
transform: translateY(20px);
width: 300px;
border-radius: 4px;
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 2px 30px rgba(0, 0, 0, 0.1); }
.mkl-pc-syd-modal::after {
content: ' ';
display: block;
width: 20px;
height: 20px;
position: absolute;
bottom: -10px;
left: 50%;
background: white;
z-index: 1;
transform: translateX(-50%) rotate(45deg); }
.mkl-pc-syd-modal.loading {
background: #fff url(//longwhitecloudwatches.com/wp-includes/images/spinner.gif) no-repeat 50% 50%; }
.mkl-pc-syd-modal.loading .mkl-pc-modal {
opacity: 0.2; }
.mkl-pc-syd-modal .mkl-pc-modal {
padding: 0; }
.mkl-pc-syd-modal .mkl-pc-modal input[type=text] {
width: 100%; }
.mkl-pc-syd-modal .mkl-pc-modal .save-form {
padding: 14px; }
.mkl-pc-syd-modal .mkl-pc-modal-list h4 {
font-size: 1.3rem;
background: #F0F0F0;
margin: 0;
padding: 6px 14px;
border-radius: 4px 4px 0 0; }
.mkl-pc-syd-modal .message {
transition: 0.2s all;
line-height: 1;
background: #EFEFEF;
color: #000;
padding: 12px 20px;
margin-bottom: 6px;
border-radius: 4px; }
.mkl-pc-syd-modal .message:empty {
display: none; }
.mkl-pc-syd-modal .message.error {
color: red;
border: 1px solid red;
padding: 5px; }
.mkl-pc-syd-modal .message.success {
margin-top: 10px;
color: #5baf00;
padding: 5px;
background: transparent; }
.mkl-pc-syd-modal .message.success::before {
content: '';
width: 30px;
height: 15px;
display: block;
border-left: 5px solid #5baf00;
border-bottom: 5px solid #5baf00;
transform: translateY(-10px) rotate(-45deg);
text-align: center;
margin: 0 auto;
margin-bottom: 14px; }
.mkl-pc-syd-modal .message p {
margin: 0;
padding: 0; }
.mkl-pc-syd-modal .message:not(.success) + a.dont-save-the-design {
display: none; }
.mkl-pc-syd-modal .dismiss-message {
display: none; }
.mkl-pc-syd-modal p.save-btns {
margin: 0;
padding: 0;
padding-top: 4px;
display: flex; }
.mkl-pc-syd-modal p.save-btns a {
border-bottom: 1px solid;
margin: 2px; }
.mkl-pc-syd-modal p.save-btns a.disabled {
opacity: 0.4; }
.mkl-pc-syd-modal p.save-btns a.dont-save-the-design {
color: inherit; }
.mkl-pc-syd-modal form.save-my-design__login_form input {
width: 100%;
padding: 5px; }
.mkl-pc-syd-modal form.save-my-design__login_form label {
display: block;
padding: 10px 20px; }
.mkl-pc-syd-modal form.save-my-design__login_form p {
padding: 10px 20px;
margin: 0; }
.mkl-pc-syd-modal form.save-my-design__login_form p button {
margin-right: 10px; }
@media (max-width: 660px) {
.mkl-pc-syd-modal {
bottom: 100%;
left: 0;
width: 100vw; }
.mkl-pc-syd-modal::after {
left: 30px; } }
body.logged-in .mkl_pc .mkl_pc_container footer .save-my-design__login_form {
display: none; }
.mkl_pc_layers {
transition: opacity 0.3s; }
.mkl_pc .loading-message {
text-align: center; }
.mkl_pc .loading-message p {
margin: 0;
background: #fff url(//longwhitecloudwatches.com/wp-includes/images/spinner.gif) no-repeat 10px 50%;
display: inline-block;
line-height: 1;
padding: 0.5em 1em;
padding-left: calc(1em + 20px); }
.mkl_pc_viewer.loading .mkl_pc_layers {
opacity: 0.2; }
.mkl_pc_viewer.loading .loading-message {
position: absolute;
top: 50%;
left: 10%;
width: 80%;
text-align: center; }
.mkl_pc_viewer.loading .loading-message p {
border-radius: 3px;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2), 0 2px 3px rgba(0, 0, 0, 0.2); }
span.save-your-design-modal-container.opened .mkl-pc-syd-modal {
opacity: 1;
transform: translateY(0);
visibility: visible; }
.configs-list {
margin: 0;
padding: 0; }
.configs-list li {
margin: 0;
padding: 0;
list-style-type: none; }
.configs-list li a {
padding: 8px;
display: flex;
align-items: center;
border-bottom: 1px solid #ccc; }
.configs-list li a:hover, .configs-list li a:focus {
background: #f5f5f5; }
.configs-list li .design-image {
max-height: 60px; margin-right: 10px; }
.configs-list li .design-image img {
height: auto;
width: auto;
display: block;
max-height: 35px; } .user-configs .config-item {
transition: height 0.3s, opacity 0.3s, padding 0.3s, margin 0.3s;
box-sizing: border-box; }
.user-configs .config-item.deleting {
opacity: 0.7; }
.user-configs .config-item.deleted {
opacity: 0;
overflow: hidden;
height: 0;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0; }