/* v.038 */
body{font-family:Helvetica,Arial,sans-serif;margin:0 0;padding:0 0}
#page{background:#144940;display:flex;align-items:center;justify-content:center}
#main-container{margin:0 0;width:auto;max-width:100%}
.fpd-actions-wrapper>.fpd-action-btn.fpd-active,.fpd-actions-wrapper>.fpd-action-btn:hover,.fpd-container .fpd-primary-bg-color,.fpd-thumbnail-preview>.fpd-preview-price{background-color:#144940!important}
.fpd-container .fpd-btn,.fpd-container .fpd-secondary-bg-color,.fpd-modal-product-designer.fpd-modal-overlay .fpd-done,.fpd-modal-wrapper .fpd-modal-content .fpd-btn,.fpd-switch-container.fpd-enabled .fpd-switch-bar,.fpd-switch-container.fpd-enabled .fpd-switch-toggle{background-color:#1d1d1d!important}
.fpd-container textarea{font-size:2em}
.fpd-draggable-dialog { width: 350px; height: 350px; }
.fpd-grid-columns-2 .fpd-grid>.fpd-item { width: 33%; height: 100px; }

.api-buttons>a{margin:0 5px 0 0!important;text-decoration:none!important}
.d-inlineblock {display: inline-block!important;}
.title-sec{background:#144940;color:#FFF;font-weight:100;font-size:15px;line-height:1.1em;padding:.5em;border-radius:10px;border:1px solid #CCC;text-align:left;box-sizing:border-box;margin:0 0 1em;width:83px;}

.fpd-modal-download span[data-value="svg"],.fpd-modal-download .fpd-checkbox
{display:none;}

#external-resources{position:absolute;top:18em;left:0;width:5em;padding:.2em 1em;}
#external-resources ul{margin-block-start:1em;padding-inline-start:0;padding:0 0;margin:0 0;}
#external-resources ul li{list-style:none;font-size:.8em;line-height:1.1em;padding:0 .3em .3em;border-radius:10px;border:1px solid #CCC;background:#000;text-align:center;box-sizing:border-box;box-shadow:1px 1px 10px 2px #00000073;margin:0 0 1em;}
#external-resources ul li a{color:#FFF;text-decoration:none}
#external-resources ul li:hover{color:#FFF;text-decoration:none;background:rgb(5,37,31);}
#external-resources [class^=fpd-icon-]{font-size:2em;display:inline-block;position:relative}
#help-faqs{padding:10px;position:absolute;top:0;left:4px;width:auto;z-index:999;}
#faqs-title:hover,.close-btn:hover{background:#000;cursor:pointer;opacity:.8}
#faqs{display:block;background:rgba(255,255,255,.899);max-width:480px;width:100%;padding: 0 0 3em 0;overflow-y:scroll;height:100vh;position:fixed;top:0;left:-100vw;z-index:-1;transition:all ease-in .3s;box-shadow:4px 0 10px 2px #4a4949;}
#faqs.d-inlineblock{left:0;transition:all ease-out .1s;z-index: 9;}
 #faqs ul{width:auto;width:auto;font-size:1em;line-height:1.5em;padding: 1em 1em 5em;}
#faqs ul li{margin:0 0 2em;list-style: none;}
.faq-question { background:#144940;color:#FFF;font-size:1em;line-height:1.1em;padding:1em;border-radius:10px;border:1px solid #CCC;text-align:center;box-sizing:border-box; margin:0 0 1em; }
.faq-answer { }
.close-btn{position:absolute;z-index:999;background:#000;width:1em;height:1em;display:block;right:1em;top:1em;border-radius:50px;}

#help-guide { padding: 10px; position: fixed; top: 0; right: 4px; width: auto; z-index: 999; }
#guide-title:hover,.close-btn:hover{background:#000;cursor:pointer;opacity:.8}
#guide-title { width: 9em; animation: background-color-change 2s infinite alternate; text-wrap: balance; text-align: center; }
#guide.d-inlineblock{ transition: all ease-out .1s; z-index: 999; right: 0; }
#guide { display: flex; background: rgb(5 23 20); max-width: 400px; width: 100%; padding: 0 1em 0 0; overflow-y: scroll; height: 100vh; color: #fff; position: fixed; top: 0; right: -100vw; z-index: -1; transition: all ease-in .3s; box-shadow: 4px 0 10px 2px #4a4949; align-content: center; }
#guide ol { margin-block-start: 3em; margin-block-end: 2em; }
#guide li { font-size: 1.2em; margin: 0 0 10px; line-height: 1.3em; font-weight: 300; text-rendering: optimizeLegibility; }
#guide ul{ font-size: 0.8em; }
.guide-close-btn { cursor: pointer; position: absolute; z-index: 999; background: #000; width: 0; height: 1em; display: block; right: 3em; top: 1em; border-radius: 50px; padding: 0; }
.g-ico { padding: 10px; border-radius: 20px; }

#print-button { display: none; }

@keyframes background-color-change {
0% { background-color: rgb(27, 75, 27); } 100% { background-color: rgb(234, 202, 39); }
}

@media (min-width: 1366px){

}


@media (min-width: 900px){
    #help-faqs{top:13em;left:4px}
}
@media (min-width: 1366px){
}

@media (min-width: 1440px){
}