html {
  font-size: 14px;
}
body {
    background-color: #f7f7f7;
    font-family: Geneva, Tahoma, sans-serif;
    margin: 0px;
}

#app {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

    #app .approw {
        display: table-row;
        vertical-align: middle;
        padding: 0px;
    }

        #app .approw .appcell {
            display: table-cell;
            align-content: center;
            padding: 0px;
        }

    #app .height100pc {
        height: 100%;
    }

    #app .width100pc {
        width: 100%;
    }

    #app .padding5px {
        padding: 5px;
    }

    #app .padding10px {
        padding: 10px;
    }

    #app .halignleft {
        text-align: left;
    }

    #app .halignright {
        text-align: right;
    }

    #app .border-right {
        border-right: 1px solid #e7e7e7;
    }

    #app .approw .appcell .topbar {
        display: table;
        width: 100%;
        background-color: #3b4f66;
        color: #ffffff;
        margin-top: auto;
        /*color: #95a7b7;*/
    }

        #app .approw .appcell .topbar .appselection {
            display: block;
            padding: 0px 0px 0px 10px;
            text-align: left;
        }

            #app .approw .appcell .topbar .appselection .svg {
                display: block;
                float: left;
                margin-top: 2px;
                padding: 0px 15px 0px 0px;
                width: 16px;
                opacity: 40%;
            }

                #app .approw .appcell .topbar .appselection .svg::before {
                    content: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 9h-8v-6.5a1.5 1.5 0 0 1 1.5-1.5h6.5v8zm0 2v8h-6.5a1.5 1.5 0 0 1-1.5-1.5v-6.5h8zm2 0v8h6.5a1.5 1.5 0 0 0 1.5-1.5v-6.5h-8zm4-10a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 1 1 0-2h2v-2a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
                }

            #app .approw .appcell .topbar .appselection .appinfo {
                display: inline-block;
            }

                #app .approw .appcell .topbar .appselection .appinfo.selectionavailable {
                    cursor: pointer;
                }
                    #app .approw .appcell .topbar .appselection .appinfo.selectionavailable::before {
                        color: #a0a0a0;
                        content: 'Selected App:\00a0\00a0';
                    }
                    #app .approw .appcell .topbar .appselection .appinfo.selectionavailable::after {
                        color: #a0a0a0;
                        content: '\00a0\00a0\25BC';
                    }

            #app .approw .appcell .topbar .appselection .appmenu {
                display: table;
                visibility: hidden;
                float: right;
                background-color: #EFEFEF;
                border: 1px solid #a5a5a5;
                border-radius: 6px;
                position: absolute;
                z-index: 1;
                text-align: left;
                margin-top: 3px;
            }

        #app .approw .appcell .topbar .shopinfo {
            display: block;
            text-align: right;
            align-content: center;
            vertical-align: middle;
            padding: 0px 20px 0px 0px;
        }

            #app .approw .appcell .topbar .shopinfo .avatar {
                display: inline-block;
                text-align: center;
                vertical-align: middle;
                width: 36px;
                height: 36px;
                background-color: #50b83c;
                border-radius: 50%;
            }

                #app .approw .appcell .topbar .shopinfo .avatar span {
                    display: block;
                    font-size: 14px;
                    padding: 9px 0px 0px 0px;
                    color: #ffffff;
                    font-weight: bold;
                    cursor: pointer;
                }

            #app .approw .appcell .topbar .shopinfo .shop {
                display: inline-block;
                text-align: left;
                vertical-align: middle;
                padding: 0px 0px 0px 8px;
            }

            #app .approw .appcell .topbar .shopinfo .displayname {
                font-size: 14px;
                cursor: pointer;
            }

            #app .approw .appcell .topbar .shopinfo .primarydomainname {
                display: none;
            }

            #app .approw .appcell .topbar .shopinfo .myshopifydomainname {
                color: #95a7b7;
                font-size: 13px;
                cursor: pointer;
            }

            #app .approw .appcell .topbar .shopinfo .accountpanel {
                display: inline-block;
            }

            #app .approw .appcell .topbar .shopinfo .accountmenupanel {
                display: table;
                visibility: hidden;
                float: right;
                background-color: #EFEFEF;
                border: 1px solid #a5a5a5;
                border-radius: 6px;
                position: absolute;
                z-index: 1;
                text-align: left;
                right:10px;
                margin-top: 3px;
                min-width:260px;
            }
        #app .approw .appcell .topbar .item {
            display: table-row;
        }

            #app .approw .appcell .topbar .item:hover {
                background-color: #d5d5d5;
            }

        #app .approw .appcell .topbar .column {
            display: table-cell;
            white-space: nowrap;
            padding: 10px 50px 10px 20px;
        }
            #app .approw .appcell .topbar .nowrap {
                white-space: nowrap;
            }

        #app .approw .appcell .topbar .item .svg {
            display:inline-block;
            float: left;
            margin-top: 2px;
            padding: 0px 15px 0px 0px;
            width: 16px;
            opacity: 40%;
        }

        #app .approw .appcell .topbar .shopinfo .accountmenupanel .item .svg::before {
            content: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 14v-8h-2v-2h2.5c.8 0 1.5.7 1.5 1.5v9c0 .8-.7 1.5-1.5 1.5h-2.5v-2h2z'/%3E%3Cpath d='M17.7 18.3c-.2-.2-.4-.3-.7-.3h-2c-.3 0-.5-.1-.7-.3-.2-.2-.3-.4-.3-.7v-14c0-.3.1-.5.3-.7.2-.2.4-.3.7-.3h2c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7 0-.3-.1-.5-.3-.7-.2-.2-.4-.3-.7-.3h-2c-.7 0-1.5.3-2 .8-.5-.5-1.2-.8-2-.8h-2c-.3 0-.5.1-.7.3-.2.2-.3.4-.3.7 0 .3.1.5.3.7.2.2.4.3.7.3h2c.3 0 .5.1.7.3.2.2.3.4.3.7v14c0 .3-.1.5-.3.7-.2.2-.4.3-.7.3h-2c-.3 0-.5.1-.7.3-.2.2-.3.4-.3.7 0 .3.1.5.3.7.2.2.4.3.7.3h2c.7 0 1.5-.3 2-.8.5.5 1.2.8 2 .8h2c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7 0-.3-.1-.5-.3-.7zm-15.7-4.3v-8h8v-2h-8.5c-.8 0-1.5.7-1.5 1.5v9c0 .8.7 1.5 1.5 1.5h8.5v-2h-8zm4-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E");
        }

        #app .approw .appcell .topbar .shopinfo .accountmenupanel .item[type=createaccount] .svg::before {
            content: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 11a1 1 0 1 0 2 0v-1h1a1 1 0 1 0 0-2h-1v-1a1 1 0 1 0-2 0v1h-1a1 1 0 1 0 0 2h1v1zm-2.637-5.78a4.22 4.22 0 1 1-8.439 0 4.22 4.22 0 0 1 8.439 0zm-11.693 9.249c1.385-1.09 4.141-2.853 7.474-2.853 3.332 0 6.089 1.764 7.474 2.853.618.486.81 1.308.567 2.056l-.333 1.02a2.11 2.11 0 0 1-2.007 1.455h-11.404a2.11 2.11 0 0 1-2.005-1.455l-.333-1.02c-.245-.748-.052-1.57.567-2.056z'/%3E%3C/svg%3E");
        }

        #app .approw .appcell .topbar .shopinfo .accountmenupanel .item[type=logout] .svg::before {
            content: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10c0-5.514 4.486-10 10-10s10 4.486 10 10-4.486 10-10 10-10-4.486-10-10zm8.414-1 1.293-1.293a1 1 0 0 0-1.414-1.414l-3 3a.997.997 0 0 0 0 1.414l3 3a1 1 0 0 0 1.414-1.414l-1.293-1.293h5.586a1 1 0 0 0 0-2h-5.586z'/%3E%3C/svg%3E");
        }

        #app .approw .appcell .topbar .shopinfo .accountmenupanel .item[type=removeaccount] .svg::before {
            content: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 11h4a1 1 0 0 0 0-2h-4a1 1 0 0 0 0 2zm-1.637-5.78a4.22 4.22 0 1 1-8.439-.001 4.22 4.22 0 0 1 8.439 0zm-11.693 9.249c1.384-1.09 4.141-2.853 7.474-2.853 3.332 0 6.089 1.764 7.474 2.853.618.486.81 1.308.567 2.056l-.333 1.02a2.11 2.11 0 0 1-2.006 1.455h-11.405a2.11 2.11 0 0 1-2.005-1.455l-.333-1.02c-.245-.748-.052-1.57.566-2.056zm-2651.67 430.531h100v100h-100v-100z'/%3E%3C/svg%3E");
        }

        #app .approw .appcell .topbar .item .link {
            display:inline-blockccoun;
            float: left;
            font-size: 15px;
        }

        #app .approw .appcell .topbar .item a {
            display: inline-block;
            width: 100%;
            color: darkslategray;
            text-decoration: none;
        }

            #app .approw .appcell .topbar .item a:hover {
                color: maroon;
                text-decoration: underline;
            }

        #app .approw .appcell .topbar .app_item_tr {
            display: table-row;
        }

        #app .approw .appcell .topbar .app_item_tc {
            display: table-cell;
            vertical-align: middle;
        }

    #app .approw .appcell .footer {
        display: table;
        width: 100%;
    }

        #app .approw .appcell .footer .app_item_tr {
            display: table-row;
            vertical-align: middle;
            background-color: #f7f7f7;
        }

        #app .approw .appcell .footer .app_item_tc {
            display: table-cell;
            text-align: right;
            vertical-align: middle;
            font-size: 12px;
            color: #666666;
        }

        #app .approw .appcell .footer .copyright {
            padding: 0px 20px 0px 0px;
        }

    #app .approw .appcell .contentpanel {
        border-collapse: collapse;
        display: table;
        width: 100%;
        height: 100%;
    }

        #app .approw .appcell .contentpanel .app_item_tr {
            display: table-row;
            vertical-align: middle;
        }

        #app .approw .appcell .contentpanel .app_item_tc {
            display: table-cell;
            padding: 10px;
        }

            .menu {
                padding: 10px 0px 0px 0px;
            }
                .menu .menuitem {
                    display: block;
                    min-width: 200px;
                    max-width: 220px;
                    padding: 6px 0px 6px 0px;
                }
                .menu .menuitem a {
                    display: inline-block;
                    font-family: Arial, Helvetica, sans-serif;
                    padding: 3px 0px 3px 0px;
                    text-decoration: none;
                    font-weight: bold;
                    font-size: 13px;
                    color: #555555;
                    fill: #888888;
                }
                    .menu .menuitem a:hover {
                        fill: #222222;
                        color: #d5680b;
                    }
                    .menu .menuitem .t {
                        display: table;
                    }

                        .menu .menuitem .t .tr {
                            display: table-row;
                        }

                            .menu .menuitem .t .tr .tc {
                                display: table-cell;
                                padding: 0px !important;
                                vertical-align: top;
                            }

                    .menu .menuitem a:visited {
                    }

                    .menu .menuitem a svg {
                        display: block;
                        padding: 0px 3px 0px 3px;
                        margin: 0px;
                        width: 20px;
                        height: 20px;
                    }

                    .menu .menuitem a .caption {
                        display: block;
                        padding: 4px 3px 0px 5px;
                    }
                    .menu .menuitem a .subcaption {
                        display: block;
                        font-size:11px;
                        font-weight:lighter;
                        padding: 4px 3px 0px 5px;
                    }




    #app .approw .appcell .link {
        display: block;
        float: left;
        font-size: 15px;
    }
    #app .approw .appcell .link a {
        display: inline-block;
        width: 100%;
        color: darkslategray;
        text-decoration: none;
    }
        #app .approw .appcell .link a:hover {
            color: maroon;
            text-decoration: underline;
        }

.login {
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .login .panel {
        display: block;
        width: 380px;
        border-radius: 8px;
        border: 2px solid #a5a5a5;
        vertical-align: top;
        padding: 6px 6px 6px 6px;
        background-color: #f0f0f0;
    }

        .login .panel .t {
            display: table;
            width: 100%;
        }

            .login .panel .t .tr {
                display: table-row;
            }

                .login .panel .t .tr .tc {
                    display: table-cell;
                    padding: 4px 6px 4px 6px;
                }

            .login .panel .t .caption {
                font-size: 14px;
                white-space: nowrap;
                color: #666666;
            }

            .login .panel .t .entry {
                font-size: 14px;
                width: 100%;
            }

                .login .panel .t .entry input {
                    width: 100%;
                }

            .login .panel .t .submit {
                width: 100%;
                text-align: right;
            }

                .login .panel .t .submit input {
                    width: 80px;
                }

            .login .panel .t .heading {
                display: block;
                font-size: 18px;
                color: #888888;
            }

            .login .panel .t .message {
                font-size: 12px;
                color: maroon;
            }

            .login .panel .t .error {
                display: block;
                font-size: 16px;
                color: red;
                padding: 0px 5px 0px 0px;
            }

.form {
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .form .panel {
        display: block;
        width: 750px;
        border-radius: 8px;
        border: 1px solid #a5a5a5;
        vertical-align: top;
        padding: 6px 6px 6px 6px;
        background-color: #fafafa;
    }

        .form .panel .t {
            display: table;
            width: 100%;
        }

            .form .panel .t .tr {
                display: table-row;
            }

                .form .panel .t .tr .th {
                    display: table-cell;
                    color: #999999;
                    font-size: 12px;
                    padding: 8px 16px 8px 16px;
                }

                .form .panel .t .tr .tc {
                    display: table-cell;
                    padding: 8px 16px 8px 16px;
                }

            .form .panel .t .caption {
                font-size: 14px;
                white-space: nowrap;
                color: #666666;
            }

            .form .panel .t .entry {
                font-size: 14px;
                width: 100%;
            }

                .form .panel .t .entry input {
                    width: 100%;
                }

            .form .panel .t .submit {
                width: 100%;
                text-align: right;
            }

                .form .panel .t .submit input {
                    width: 120px;
                }

            .form .panel .t .heading {
                display: block;
                font-size: 18px;
                color: #888888;
            }

            .form .panel .t .footer {
                display: block;
                font-size: 12px;
                color: maroon;
            }

            .form .panel .t .error {
                display: block;
                font-size: 16px;
                color: red;
            }

#app .approw .appcell .topbar .close {
    height: 2px;
    display: block;
    position: absolute;
    color: #000000;
    top: 5px;
    left: 100%;
    margin-left: -23px;
}

    #app .approw .appcell .topbar .close:hover {
        cursor: pointer;
    }

    #app .approw .appcell .topbar .close .svg {
        height: 16px;
        position: absolute;
        display: block;
        content: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10c0-5.514 4.486-10 10-10s10 4.486 10 10-4.486 10-10 10-10-4.486-10-10zm7.707-3.707a1 1 0 0 0-1.414 1.414l2.293 2.293-2.293 2.293a1 1 0 1 0 1.414 1.414l2.293-2.293 2.293 2.293a1 1 0 0 0 1.414-1.414l-2.293-2.293 2.293-2.293a1 1 0 0 0-1.414-1.414l-2.293 2.293-2.293-2.293z'/%3E%3C/svg%3E");
        opacity: 40%;
    }

        #app .approw .appcell .topbar .close .svg:hover {
            opacity: 70%;
        }
.appcell .t {
    display: table;
    width: 100%;
}
    .appcell .t .tr {
        display: table-row;
    }
        .appcell .t .tr .tc {
            display: table-cell;
            padding: 4px 6px 4px 6px;
        }
            .appcell .t .tr .border-bottom {
                border-bottom: 1px solid #e7e7e7;
            }
.help {
}
    .help h1 {font-size:17pt;font-weight:normal;color:#666666;}
    .help h2 {font-size: 14pt;font-weight: normal;color: #444444;}
    .help h3 {font-size: 12pt;text-decoration:none;font-weight:normal;color: #444444;margin:8px 0px 8px 0px;font-style:normal;}
    .help .intro {
    }
        .help .intro ol li, .help .intro ul li {
            padding: 2px 10px 2px 10px;
        }
    .help .content {
        display: block;
        padding: 5px 0px 5px 0px;
    }
    .help .content .section {
        display: block;
        padding: 6px 0px 6px 0px;
    }
        .help .content .section .paragraph {
            display: block;
            padding: 4px 0px 4px 0px;
            line-height:1.4;
        }
            .help .content .section .paragraph .item {
                padding: 0px 0px 8px 0px;
            }

            .help .content .section .paragraph .note {
                padding: 0px 0px 6px 0px;
                font-size: 10px;
                color: maroon;
            }
            .help .content .section .paragraph .highlight {
                color: maroon;
            }
        .help .content .section .image {
            padding: 8px 0px 8px 0px;
        }
        .help .content .section .image img{
            width:600px;
        }
        .help .popupcontent {
            color: #ffffff;
            max-width: 550px;
            text-align: left;
        }
        .help .popupcontent .item{
            color: #ffffff;
            padding:3px 0px 3px 0px;
        }
        .help .popupcontent ul{
            color: #ffffff;
        }
.staticmessage {
    display:block;
    width:100%;
}