@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

:root {
    --vendor-dashboard-primary-color: #ffc107;
    --vendor-dashboard-primary-hover-color: #EEB006;
    --vendor-dashboard-secondary-color: #333c44;
    --vendor-dashboard-text-color: #000000de;
    --vendor-dashboard-body-color: #f5f5f5;
}


/* ### START: General ### */
#wcfm-main-content *:not(i) {
    font-family: 'Roboto', sans-serif;
}

/* ### END: General ### */


/* ### START: Loader ### */
/* NOTE: The loader is used to hide the loading delay of these style sheets, so after it's loaded we will remove the loader, so the old style will not be visible to the user */
/* 
    ### We need to add these in the "css" section in "WordPress Customization" page
    .wcfm-dashboard-page::before {
        content: "";
        display: block;
        width: 75px;
        height: 75px;
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 10000;
        transform: translate(-50%, -46%);
        border: var(--vendor-dashboard-primary-color) 15px dotted;
        border-radius: 50%;
        z-index: 1000000;
        animation: full-rotation 3s infinite linear;
    }

    .wcfm-dashboard-page::after {
        content: "";
        display: block;
        background: #FFF;
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000;
    }

    @keyframes full-rotation {
    from {
            transform: rotate(0deg);
        }
    to {
            transform: rotate(360deg);
        }
    }
*/

.wcfm-dashboard-page::after,
.wcfm-dashboard-page::before {
    content: none !important;
}

/* ### END: Loader ### */


/* ### START: Layout ### */
/* #page.site.grid-container.start-container-head {
    min-height: calc(100vh - 60px - 75px - 69px);
} */

#content {
    margin: 0 !important;
}

.grid-container {
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
}

#wcfm-main-content {
    max-width: 100% !important;
    padding: 0 !important;
}

#wcfm-content {
    min-height: calc(100vh - 42px) !important; /* screnn height - footer height */
}

.wcfm-dashboard-page .navigation-wrapper {
    display: none;
}


.wkpa-button{
    padding: 0px !important;
    background-color: transparent !important;
  }
/* ### END: Layout ### */

.wkpa_table_image{
    height: 100px;
    width: 100px;
    object-fit: cover;
}

.wcfm-wp-fields-uploader #list_banner_display,
.wcfm-wp-fields-uploader #mobile_banner_display,
.wcfm-wp-fields-uploader #banner_display,
.wcfm-wp-fields-uploader #gravatar_display{
    max-width: 250px !important;
}


.store_address .wcfm-wp-fields-uploader{
    width: 30% !important;
    margin-top: 15px;
}

.dataTables_empty{
    text-align-last:center !important;
}
.wkpa_paginate_button{
    background-color: #fff !important;
    background-image: none !important;
    border: 1px solid #a7a5a5 !important;
}
.wkpa_paginate_button:hover{
background-color: #e9ecef !important;
}

.wkpa_pagination{
    text-align: right;
}

.wkpa_pagination_active{
    color: #ffc221 !important;
}

#founder_section_title, #founder1{
    pointer-events: none;
    visibility: hidden;
}

.banner_color_type{
    width:35% !important;
    display: inline-block !important;
    vertical-align: top !important;
    font-family: 'Roboto', sans-serif;
    margin-left: 3% !important;
    width: 32% !important;
    padding: 3px !important;
    font-size: 15px !important;
    margin-bottom: 10px !important;
    font-style: italic !important;

}
#wcfm-main-contentainer fieldset {
    margin-left: 0% !important;
}