// Thin
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 100;
    src: local('Poppins'), url(../fonts/Poppins/Poppins-Thin.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 100;
    src: local('Poppins'), url(../fonts/Poppins/Poppins-ThinItalic.ttf) format('truetype');
    font-display: swap;
}

// ExtraLight
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 200;
    src: local('Poppins'), url(../fonts/Poppins/Poppins-ExtraLight.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 200;
    src: local('Poppins'), url(../fonts/Poppins/Poppins-ExtraLightItalic.ttf) format('truetype');
    font-display: swap;
}

// Light
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: local('Poppins'), url(../fonts/Poppins/Poppins-Light.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 300;
    src: local('Poppins'), url(../fonts/Poppins/Poppins-LightItalic.ttf) format('truetype');
    font-display: swap;
}

// Regular
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: local('Poppins'), url(../fonts/Poppins/Poppins-Regular.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 400;
    src: local('Poppins'), url(../fonts/Poppins/Poppins-Italic.ttf) format('truetype');
    font-display: swap;
}

// Medium
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: local('Poppins'), url(../fonts/Poppins/Poppins-Medium.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 500;
    src: local('Poppins'), url(../fonts/Poppins/Poppins-MediumItalic.ttf) format('truetype');
    font-display: swap;
}

// SemiBold
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: local('Poppins'), url(../fonts/Poppins/Poppins-SemiBold.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 600;
    src: local('Poppins'), url(../fonts/Poppins/Poppins-SemiBoldItalic.ttf) format('truetype');
    font-display: swap;
}

// Bold
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: local('Poppins'), url(../fonts/Poppins/Poppins-Bold.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 700;
    src: local('Poppins'), url(../fonts/Poppins/Poppins-ExtraBoldItalic.ttf) format('truetype');
    font-display: swap;
}

// ExtraBold
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    src: local('Poppins'), url(../fonts/Poppins/Poppins-ExtraBold.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 800;
    src: local('Poppins'), url(../fonts/Poppins/Poppins-ExtraBoldItalic.ttf) format('truetype');
    font-display: swap;
}

// Black
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 900;
    src: local('Poppins'), url(../fonts/Poppins/Poppins-Black.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 900;
    src: local('Poppins'), url(../fonts/Poppins/Poppins-BlackItalic.ttf) format('truetype');
    font-display: swap;
}

// Remove menu
.js {
    #adminmenu {
        .toplevel_page_solace {
            .wp-submenu li{
                display: none;
            }
        }
    }
}
.js #adminmenu .toplevel_page_solace .wp-submenu li:nth-child(4),
.js #adminmenu .toplevel_page_solace .wp-submenu li:nth-child(5),
.js #adminmenu .toplevel_page_solace .wp-submenu li:nth-child(6),
.js #adminmenu .toplevel_page_solace .wp-submenu li:nth-child(14) {
    display: block; 
}
.js #adminmenu .toplevel_page_solace .wp-submenu li.upgrade-menu-item {
    display: block; 
    background-color: #FF8F00;
    border-radius: 30px;
    font-weight: 700;
    margin: 0 15px;
    a {
        color: #fff;
        text-align: center;
        &:hover {
            box-shadow: none !important;
        }
    }
}
.js #adminmenu .toplevel_page_solace .wp-submenu li.support-menu-item {
    display: block;
}

body .swal-footer {
    display: flex;
    justify-content: center;
}

body.solace_page_dashboard,
body.solace_page_dashboard-sitebuilder,
body.solace_page_dashboard-video,
body.solace_page_dashboard-starter-templates,
body.solace_page_dashboard-sitebuilder,
body.solace_page_dashboard-step5,
body.solace_page_dashboard-step6,
body.solace_page_dashboard-progress, 
body.solace_page_dashboard-congratulations {
    #wpbody-content .notice {
        display: none !important;
    }
}

// BORDER BOTTOM FOR ACTIVE MENU
body.solace_page_dashboard .box-menu .dashboard,
body.toplevel_page_solace .box-menu .dashboard,
body.solace_page_dashboard-video .box-menu .dashboard,
body.solace_page_dashboard-sitebuilder .box-menu .sitebuilder,
body.solace_page_dashboard-starter-templates .box-menu .starter,
body.solace_page_dashboard-step5 .box-menu .starter,
body.solace_page_dashboard-step6 .box-menu .starter,
body.solace_page_dashboard-progress .box-menu .starter,
body.solace_page_dashboard-congratulations .box-menu .starter {
    &::after {
        content: "";
        display: block;
        width: 100%;
        height: 4px;
        background: #ff8d00;
        position: relative;
        top: 24px;
    }
}
body.toplevel_page_solace .box-menu .dashboard,
body.solace_page_dashboard-video .box-menu .dashboard {
    &::after {
        top: 25px;
    }
}
body.solace_page_dashboard-step5 .box-menu .starter {
    &::after {
        top: 22px;
    }
}
 
body.solace_page_dashboard-starter-templates,
body.solace_page_dashboard-sitebuilder,
body.solace_page_dashboard-type,
body.solace_page_dashboard-video,
body.toplevel_page_solace,
body.solace_page_dashboard-step5,
body.solace_page_dashboard-step6,
body.solace_page_dashboard,
body.solace_page_dashboard-sitebuilder,
body.solace_page_dashboard-progress,
body.solace_page_dashboard-congratulations {

    a:focus,
    button:focus,
    button.button:focus {
        box-shadow: none;
        outline: 2px solid transparent;
    }

    // #adminmenumain,
    // #wpadminbar {
    //     display: none;
    // }

    // #wpcontent,
    // #wpfooter {
    //     margin-left: 0;
    //     padding-left: 0;
    // }

    .wrap {
        font-family: Poppins;
        background: #f1f1f1;
        padding: 0;
        margin: 0;
        overflow: auto;

        // Remove notif.
        div.notice {
            display: none !important;
        }

        > nav {
            background: #000F44;
            margin-bottom: 28px;

            .mycontainer {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-between;
                max-width: $max_width;
                margin: 0 auto;
                padding: 0 43px;
                height: 79px;

                .box-logo {
                    a {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    text-decoration: none;

                        .logo1 {}

                        .logo2 {
                            margin-right: 15px;

                            h1 {
                                color: #FFF;
                                font-family: Poppins;
                                font-size: 30px;
                                font-style: normal;
                                font-weight: 700;
                                line-height: normal;
                            }
                            img {
                                height: 50px;
                                padding: 5px 0 0 0;
                            }
                        }

                        div.version {
                            display: flex;
                            display: none;
                            flex-wrap: wrap;
                            align-items: center;
                            justify-content: center;
                            width: 55px;
                            height: 34px;
                            flex-shrink: 0;
                            background: #F4F4F4;
                            color: #000;
                            font-family: Poppins;
                            font-size: 18px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: normal;
                        }
                    }
                }

                .box-menu {
                    ul {
                        margin: 0;
                        padding: 0;
                        display: flex;
                        flex-wrap: wrap;
                        align-content: center;
                        gap: 50px;

                        li {
                            list-style-type: none;
                            margin-bottom: 0;

                            a {
                                display: block;
                                text-decoration: none;
                                color: #FFF;
                                font-family: Poppins;
                                font-size: 18px;
                                font-style: normal;
                                font-weight: 400;
                                line-height: normal;
                            }

                            a.pro {
                                border-radius: 100px;
                                background: #FF8E00;
                                padding: 3px 19px;
                            }
                        }

                        li.active,
                        li.active-custom {
                            &::after {
                                content: "";
                                display: block;
                                width: 100%;
                                height: 4px;
                                background: #ff8d00;
                                position: relative;
                                top: 24px;
                            }
                        }
                    }
                }
            }
        }

        footer.bottom {
            display: none;
            padding: 20px;
            margin-top: 30px;
            background: #fff;
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 8px;

            .mycontainer {
                max-width: $max_width;
                margin: 0 auto;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                .box {
                    margin: 0;

                    a {
                        text-decoration: none;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        // width: 70px;
                        padding: 5px 0;
                        color: #135e96;
                        color: #000;
                        text-decoration: none;
    
                        svg {
                            width: 17px;
                            height: 17px;
                            fill: #000;
                        }
    
                        span {
                            display: inline-block;
                            font-size: 17px;
                        }
                    }
                }

                .box.left {
                    a {
                        svg {
                            margin-right: 8px;
                        }
                    }
                }

                .box.center {
                    a {
                    }
                }                

                .box.right {
                    a {
                        svg {
                            margin-left: 8px;
                        }
                    }
                }
            }
        }
    }
}

body.toplevel_page_solace {
    .wrap {
        footer.bottom {
            .mycontainer {
                max-width: calc($max_width + 38px);
            }
        }
    }
}

@media only screen and (max-width: 1200px) {
    body.solace_page_dashboard-starter-templates,
    body.solace_page_dashboard-sitebuilder,
    body.solace_page_dashboard-type,
    body.solace_page_dashboard-video,
    body.solace_page_dashboard-step5,
    body.solace_page_dashboard-step6,
    body.toplevel_page_solace,
    body.solace_page_dashboard,
    body.solace_page_dashboard-sitebuilder,
    body.solace_page_dashboard-progress,
    body.solace_page_dashboard-congratulations {
        .wrap {
            nav {
                div.mycontainer {
                    height: auto;
                    gap: 15px;
                    padding: 25px 0;
                }
            }
        }
    }
}

@media only screen and (max-width: 1024px) {
    body.solace_page_dashboard-starter-templates,
    body.solace_page_dashboard-sitebuilder,
    body.solace_page_dashboard-type,
    body.solace_page_dashboard-video,
    body.solace_page_dashboard-step5,
    body.solace_page_dashboard-step6,
    body.toplevel_page_solace,
    body.solace_page_dashboard,
    body.solace_page_dashboard-sitebuilder,
    body.solace_page_dashboard-progress,
    body.solace_page_dashboard-congratulations {

        .wrap nav div.mycontainer {
            flex-direction: column;
            padding: 20px 10px;

            div.box-menu {
                ul {

                    li {
                        &::after {
                            top: 20px;
                        }
                    }
                }
            }
        }
    }
}

@media only screen and (max-width: 992px) {
    body.solace_page_dashboard-starter-templates,
    body.solace_page_dashboard-sitebuilder,
    body.solace_page_dashboard-type,
    body.solace_page_dashboard-video,
    body.toplevel_page_solace,
    body.solace_page_dashboard,
    body.solace_page_dashboard-sitebuilder,
    body.solace_page_dashboard-progress {
        .wrap footer.bottom {
            padding-left: 15px;
            padding-right: 15px;
        }
    }
}

@media only screen and (max-width: 782px) {
    body.solace_page_dashboard-starter-templates,
    body.solace_page_dashboard-type,
    body.solace_page_dashboard-video,
    body.solace_page_dashboard-step5,
    body.solace_page_dashboard-step6,
    body.toplevel_page_solace,
    body.solace_page_dashboard,
    body.solace_page_dashboard-sitebuilder,
    body.solace_page_dashboard-progress,
    body.solace_page_dashboard-congratulations {
        .wrap {
            footer.bottom {
                left: 0;
            }
        }
    }
}

@media only screen and (max-width: 768px) {
    body.solace_page_dashboard-starter-templates,
    body.solace_page_dashboard-sitebuilder,
    body.solace_page_dashboard-type,
    body.solace_page_dashboard-video,
    body.solace_page_dashboard-step5,
    body.solace_page_dashboard-step6,
    body.toplevel_page_solace,
    body.solace_page_dashboard,
    body.solace_page_dashboard-sitebuilder,
    body.solace_page_dashboard-progress,
    body.solace_page_dashboard-congratulations {

        .wrap nav div.mycontainer {
            flex-direction: column;
            padding: 20px 10px;

            div.box-menu {
                ul {
                    flex-direction: column;
                    text-align: center;
                    gap: 15px;

                    li {
                        &::after {
                            top: 2px;
                        }
                    }
                }
            }
        }
    }
}

@media only screen and (max-width: 600px) {
    body.solace_page_dashboard-starter-templates,
    body.solace_page_dashboard-sitebuilder,
    body.solace_page_dashboard-type,
    body.solace_page_dashboard-video,
    body.solace_page_dashboard-step5,
    body.solace_page_dashboard-step6,
    body.toplevel_page_solace,
    body.solace_page_dashboard,
    body.solace_page_dashboard-sitebuilder,
    body.solace_page_dashboard-progress,
    body.solace_page_dashboard-congratulations {
        #wpbody {
            padding-top: 0;
        }
    }
}

@media only screen and (max-width: 580px) {
    body.solace_page_dashboard-starter-templates,
    body.solace_page_dashboard-sitebuilder,
    body.solace_page_dashboard-type,
    body.solace_page_dashboard-video,
    body.toplevel_page_solace,
    body.solace_page_dashboard,
    body.solace_page_dashboard-sitebuilder,
    body.solace_page_dashboard-progress {
        .wrap footer.bottom .mycontainer {
            gap: 15px;
            align-items: center;
        }
    }
}