@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
* {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

.ppmain_view {
    background: #eff7fa;
}

.ppmain_list [data-itemid="loginform_login"] .btn,
.ppmain_view [data-itemid="loginform_login"] .btn {
    color: #29a0b8 !important;
}

.searchOptions .form-control,
.searchOptions input {
    border: 1px solid #ddd !important;
}

.searchOptions .btn {
    background-color: #29a0b8 !important;
    color: white !important;
}


/*base styles*/


/*navbar color*/

.ppmain_list .navbar-default,
.ppmain_view .navbar-default {
    background: white;
    border: 0px;
}

.navbar-default>[data-itemid="logo"] a {
    text-align: center;
}

body.ppmain_view .navbar-default>[data-itemid="logo"] a,
body.ppmain_list .navbar-default>[data-itemid="logo"] a {
    color: #29a0b8;
}

body:not(.ppmain_view):not(.ppmain_list) .navbar-brand {
    padding-left: 20px;
}

.navbar-default>[data-itemid="logo"] a {
    text-align: left;
    ;
}

body.ppmain_view [data-itemid="loginform_login"] {
    padding: 0px;
}

body.ppmain_view [data-field="Picture"]>span {
    display: inline-block;
    text-align: center;
    width: 100%;
}

body.ppmain_view [data-field="Picture"]>span .r-images {
    display: inline-block;
}

.loginUser.ppmain_list [data-cellid="top_c2"] {
    padding: 0px;
}


/*search panel*/

.ppmain_list [data-itemid="simple_search"] input {
    background: #e9f6f7 !important;
    border-radius: 0px;
    border: none;
    color: #7f888a !important;
    height: 35px !important;
}

.ppmain_list [data-itemid="simple_search"] input::-webkit-input-placeholder {
    color: #1f2527 !important;
}


/*search button*/

.ppmain_list [data-itemid="simple_search"] .btn[title="Search"] {
    background: transparent !important;
    border: none;
    color: white;
}

.ppmain_list [data-body-align="left"] {
    width: 100%;
}


/*.filterPanelContainer .panel.panel-info .list-group .list-group-item>a {
    font-size: 12px;
    color: white;
    text-transform: uppercase;
}*/


/*data-cellid="top_c1"*/

@media(min-width: 768px) and (min-width: 1200px) {
    .ppmain_list .r-grid,
    .ppmain_view .r-content,
    .ppmain_view [data-location="supertop"] {
        width: 1130px !important;
    }
    .ppmain_list [data-cellid="top_c1"],
    .ppmain_list [data-location="supertop"] {
        width: calc(1130px + 85px);
        /*  width: calc(1130px + 250px + 45px);
        min-width: calc(850px + 250px + 45px);*/
    }
}

@media (min-width: 768px) and (min-width: 1400px) {
    .ppmain_list .r-grid,
    .ppmain_view .r-content,
    .ppmain_view [data-location="supertop"] {
        width: 1200px !important;
    }
    .ppmain_list [data-cellid="top_c1"],
    .ppmain_list [data-location="supertop"] {
        width: calc(1200px + 250px + 45px);
        min-width: calc(920px + 250px + 45px);
    }
}

@media (min-width: 768px) and (min-width: 1800px) {
    .ppmain_list .r-grid,
    .ppmain_view .r-content,
    .ppmain_view [data-location="supertop"] {
        width: 1300px !important;
    }
    .ppmain_list [data-cellid="top_c1"],
    .ppmain_list [data-location="supertop"] {
        width: calc(1300px + 250px + 45px);
        min-width: calc(1020px + 250px + 45px);
    }
}

.ppmain_list [data-cellid="top_c"] .category_menu .category_item>a {
    color: white;
    text-transform: uppercase;
}

.ppmain_list [data-cellid="top_c"] .category_menu .subcategory_item>a {
    color: #353535;
    font-size: 12px;
}

.ppmain_list .category_menu {
    padding: 10px 0px;
    display: flex;
    justify-content: center;
}

.ppmain_list .category_menu .category_item {
    padding: 0px 5px;
}

.ppmain_list .r-topheader,
.ppmain_view .r-topheader {
    background: white;
}

.ppmain_list [data-location="supertop"],
.ppmain_view [data-location="supertop"] {
    box-shadow: none;
}

.ppmain_list .r-menu {
    background: white;
    display: flex !important;
    width: 100%;
    justify-content: center;
}

.ppmain_list .r-menu>li>a {
    color: #757575;
    padding-top: 8px;
    padding-bottom: 8px;
}

.ppmain_list .r-menu>li.active>a,
.ppmain_list .r-menu>li>a:hover {
    color: #24a3b4;
}

@media (min-width: 768px) {
    .ppmain_list [data-cellid="top_c"] {
        background: #29a0b8;
    }
    .navbar-default>[data-itemid="logo"] a {
        width: 100%;
    }
    .navbar-brand {
        padding: 0px;
        height: auto;
    }
    .ppmain_view .r-body {
        display: block !important;
    }
    .ppmain_view .r-body .r-content {
        margin: 0 auto;
    }
    .ppmain_list .category_menu .category_item .subcategory {
        visibility: hidden;
        display: block;
        width: 250px;
        position: absolute;
        background-color: white;
        z-index: 0;
        box-shadow: 0px 9px 27px 0px rgb(0 0 0 / 23%);
        border-top: none !important;
        border: 1px solid #e8e8e8;
        -webkit-transition: all .2s ease-in-out;
        opacity: 0;
        margin-top: 12px;
    }
    .ppmain_list .category_menu .category_item:hover .subcategory,
    .ppmain_list .category_menu .category_item .subcategory:hover {
        visibility: visible;
        opacity: 1 !important;
        z-index: 100;
    }
    .ppmain_list .category_menu .category_item .subcategory {
        display: flex;
        flex-direction: column;
    }
    .ppmain_list .category_menu .category_item .subcategory .subcategory_item {
        text-align: center;
        padding: 5px 0;
    }
    .ppmain_list .category_menu .category_item .subcategory .subcategory_item:first-child {
        padding-top: 10px;
    }
    .ppmain_list .category_menu .category_item .subcategory .subcategory_item:last-child {
        padding-bottom: 10px;
    }
    .ppmain_list .r-topbar-page .r-body .r-content .r-left:not( [data-hidden])+.r-data-block {
        max-width: calc(100vw - 250px - 80px);
    }
    .ppmain_list {
        min-height: 100vh;
        background: #eff7fa;
        ;
    }
    .ppmain_list [data-field="Picture"] {
        margin-top: 10px;
    }
    .ppmain_list .r-data-block .r-grid .r-fluid {
        display: flex;
        flex-wrap: wrap;
        width: 100% !important;
        justify-content: space-between;
        margin: 0px;
    }
    .ppmain_list .r-grid .r-record-body {
        margin-bottom: 10px;
        flex: 33% 0 0;
        padding: 0px;
    }
    .ppmain_list .r-grid .panel {
        box-shadow: none;
        border: 1px solid white;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
    }
    .ppmain_list .r-grid .r-record-body .panel:hover {
        background: transparent !important;
        box-shadow: none;
        border-color: #9ad8dd;
        box-shadow: 0px 3px 3px 1.65px rgb(148 148 148 / 23%);
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
    }
    .ppmain_list .r-data-block,
    .ppmain_view .r-content {
        background: #ffffff;
        padding: 15px;
        box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 6%);
        border-radius: 4px;
    }
    .ppmain_list .r-left {
        /*  display: none;*/
        background: #ffffff;
        box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 6%);
        margin-right: 20px;
        padding-right: 0px !important;
    }
    .ppmain_list .r-content {
        padding-top: 15px;
        justify-content: center;
    }
    .ppmain_list .r-top .r-form,
    .ppmain_list .r-top .r-form .row {
        margin: 0px;
    }
    .ppmain_list .r-top .r-form .row [data-cellid="top_c"] {
        padding: 0px;
    }
    .ppmain_list .r-top .r-form .row [data-cellid="top_c1"] {
        margin-bottom: 10px;
        float: none;
        margin: 0px auto;
        padding: 10px 0px 0px 0px;
    }
    .ppmain_list .r-left * {
        background: white;
        border: none;
        color: #353535;
    }
    body.ppmain_view .navbar-default,
    body.ppmain_list .navbar-default {
        justify-content: space-between;
        margin: 0 auto;
    }
    .ppmain_list .r-body {
        padding: 0px !important;
    }
    /*[data-itemid="filter_panel"] .filterPanelContainer>.panel {
        background: #29a0b8;
    }*/
    body.ppmain_list .navbar-default>[data-itemid="logo"] {
        flex: 15% 0 0;
    }
    body.ppmain_list:not(.loginUser) [data-itemid="loginform_login"] {
        flex: 3% 0;
        padding: 0px;
    }
    body.ppmain_list [data-itemid="list_options"] {
        flex: 7.5% 0;
    }
    body.ppmain_list [data-itemid="list_options"] .btn {
        padding: 0px;
    }
    body.ppmain_list [data-itemid="simple_search"] {
        flex: 70% 0;
        text-align: center;
    }
    body.ppmain_list [data-itemid="simple_search"] .input-group {
        width: 100%;
    }
    body.ppmain_list [data-itemid="simple_search"] .input-group {
        background-image: -webkit-linear-gradient( 0deg, #ff934b 0%, #ff5e62 100%);
    }
    body.ppmain_list [data-itemid="simple_search"]>span {
        width: 60%;
    }
    .ppmain_list [data-fieldname="Picture"] img {
        height: 166px;
        width: auto;
    }
    .filter-Category-container {
        display: none;
    }
    body.ppmain_list [data-itemid="list_options"],
    body.ppmain_list:not(.loginUser) [data-itemid="loginform_login"],
    body.ppmain_list [data-itemid="list_options"] .btn:hover,
    body.ppmain_list:not(.loginUser) [data-itemid="loginform_login"] .btn:hover,
    body.ppmain_list.loginUser [data-itemid="username_button"],
    body.ppmain_list.loginUser [data-itemid="username_button"] .btn:hover {
        text-align: right;
    }
    .ppmain_list ol.breadcrumb {
        display: inline-block;
        float: left;
    }
}

body.ppmain_list:not(.loginUser) [data-itemid="menu"],
body.ppmain_list:not(.loginUser) [data-itemid="username_button"],
body.ppmain_view:not(.loginUser) [data-itemid="username_button"] {
    display: none !important;
}

body.ppmain_list [data-itemid="list_options"],
body.ppmain_list:not(.loginUser) [data-itemid="loginform_login"],
body.ppmain_list [data-itemid="list_options"] .btn:hover,
body.ppmain_list:not(.loginUser) [data-itemid="loginform_login"] .btn:hover,
body.ppmain_list.loginUser [data-itemid="username_button"],
body.ppmain_list.loginUser [data-itemid="username_button"] .btn:hover {
    color: #29a0b8 !important;
}

[data-itemtype="view_back_list"] .btn {
    background: #24a3b4 !important;
    color: white !important;
}

@media (max-width: 768px) {
    .ppmain_list ol.breadcrumb {
        text-align: left;
        background: transparent !important;
    }
    [data-itemid="category_list"] {
        display: none !important;
    }
    [data-runner-toggle] {
        margin-top: 20px;
        background: #21A5B3;
    }
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
        border-color: transparent !important;
    }
    body.loginUser .navbar-form[data-itemid="loginform_login"] {
        display: none !important;
    }
    .navbar-form[data-itemid="list_options"],
    .navbar-form[data-itemid="loginform_login"],
    .navbar-form[data-itemid="username_button"] {
        float: left !important;
        width: 50%;
    }
    .navbar-form[data-itemid="loginform_login"] {
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
        text-align: center !important;
    }
    [data-field="Picture"] {
        margin-top: 10px;
    }
    body.ppmain_view .r-view-field[data-field="Picture"] .r-images {
        display: flex;
        flex-wrap: wrap;
    }
    body.ppmain_view .r-view-field[data-field="Picture"] .r-images img {
        width: 45%;
    }
    [data-cellid="grid_c7"][data-page="ppmain_view"][data-cellid="grid_c7"][data-page="ppmain_view"][data-cellid="grid_c7"][data-page="ppmain_view"] {
        width: 100% !important;
    }
    .ppmain_view:not(.loginUser) [data-itemid="loginform_login"] {
        display: block !important;
    }
    .ppmain_list.list1.loginUser [data-cellid="top_c"] {
        border-top: 1px solid #21A5B3;
        border-bottom: 1px solid #21A5B3;
    }
    .ppmain_view:not(.loginUser) [data-runner-toggle] {
        display: none !important;
    }
    .ppmain_view .navbar-header[data-itemid="logo"] {
        width: 60% !important;
        display: inline-block !important;
        float: left !important;
    }
    .ppmain_view .navbar-form[data-itemid="loginform_login"] {
        width: 40% !important;
        display: inline-block !important;
        float: left !important;
    }
    .ppmain_view a[data-itemtype='logo'] {
        padding-top: 0px;
        margin-top: 8px;
        padding-bottom: 0px;
    }
    .ppmain_list .r-menu {
        flex-wrap: wrap;
    }
}