@font-face{font-family:"irsans";font-style:normal;font-weight:300;src:url(font/irsans.eot);src:url(font/irsans.eot) format("embedded-opentype"),url(font/irsans.woff) format("woff"),url(font/irsans.ttf) format("truetype")}
body{font-family:"irsans",Arial,sans-serif;background:#222}
.demo-toolbar{background:#23282d;color:#fff;padding:10px;position:fixed;top:0;left:0;right:0;z-index:9999;height:50px;box-sizing:border-box;font-family:"irsans",Roboto,sans-serif}
.demo-content{margin-top:50px;height:calc(100vh - 50px);background:#f0f0f0}
.demo-iframe{width:100%;height:100%;border:none;background:#fff}
.device-btn{font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;background:#0073aa;color:#fff;border:none;padding:5px 10px;cursor:pointer;border-radius:3px;font-size:16px;transition:background .3s ease}
.device-btn:hover{background:#ecd486}
.device-btn.active{background:#00a0d2}
.purchase-btn{background:#a49267!important;color:#fff!important;padding:5px 15px!important;text-decoration:none!important;border-radius:3px!important;transition: .3s ease!important}
.purchase-btn:hover{background:#ecd486!important;color:#222!important;}
#demo-selector{display:none}
.custom-select-container{position:relative;display:inline-block;font-family:"irsans";min-width:150px}
.custom-select-display{font-family:"irsans";padding:5px 35px 5px 10px;border-radius:20px;border:1px solid #424242;background:#555;color:#fff;cursor:pointer;user-select:none;transition:all .2s ease;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right 10px center;background-repeat:no-repeat;background-size:16px 16px}
.custom-select-display:hover{border-color:#666;background-color:#666}
.custom-select-display.active{border-color:#777;box-shadow:0 0 0 2px #fff3}
.custom-select-options{position:absolute;top:100%;left:0;right:0;background:#555;border:1px solid #424242;border-radius:10px;margin-top:2px;z-index:1000;max-height:200px;overflow-y:auto;box-shadow:0 4px 6px #0000004d;display:none}
.custom-select-options.show{display:block}
.custom-select-option{font-family:"irsans";padding:8px 12px;color:#fff;cursor:pointer;transition:.2s ease}
.custom-select-option:hover{background-color:#a49267!important;transition:.2s ease}
.custom-select-option:first-child{border-radius:10px 10px 0 0}
.custom-select-option:last-child{border-radius:0 0 10px 10px}
.custom-select-option.selected{background-color:#ecd486!important;color:#222;transition: .3s ease}
.custom-select-option.selected:hover{background-color:#a49267!important;color:#fff;transition: .3s ease}
.custom-select-options::-webkit-scrollbar{width:6px}
.custom-select-options::-webkit-scrollbar-track{background:#555;border-radius:3px}
.custom-select-options::-webkit-scrollbar-thumb{background:#888;border-radius:3px}
#iframe-container{transition:all .3s ease;display:flex;justify-content:center;align-items:flex-start;box-sizing:border-box}
#demo-iframe{transition:all .3s ease;box-shadow:0 0 20px #0000001a;border-radius:5px;overflow:hidden}
@keyframes spin {
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
.device-btn{background:#a49267;color:#fff;border:none;padding: 6px 8px 1px;cursor:pointer;border-radius:3px;font-size:16px;transition:all .2s ease}
.device-btn:hover{background:#a49267;}
.device-btn.active{background:#ecd486;box-shadow:0 2px 4px #0003}
#iframe-container{transition:all .3s ease;position:relative}
#demo-iframe{transition:all .3s ease;box-shadow:0 0 20px #0000001a}
.back-btn:hover{opacity:.8;}
#fallback-notice{animation:slideDown .3s ease}
@keyframes slideDown {
from{transform:translateY(-100%)}
to{transform:translateY(0)}
}
@media (max-width: 768px) {
.demo-toolbar > div{flex-direction:column!important;gap:10px!important;align-items:stretch!important}
.demo-toolbar{height:auto!important;padding:10px!important}
.demo-content{margin-top:80px;height:calc(100vh - 80px)}
#iframe-container{padding:10px}
}