/*
    
    Pro-Watch Vendor Portal Mobile Browser Support 
    
    Mobile & Web Responsive 


*/



/*###################   styles for device width below 600px Starts here #####################*/

@media only screen and (max-width: 600px) {
    .Plugin-headerbanner {
        -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.3);
        -moz-box-shadow: 0 1px 0px rgba(0,0,0,.3);
    }

    .VPDashbaord {
        width: 100% !important;
        height: calc(100vh - 122px);
    }

    .padd_m_0 {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .hide_cont_xs {
        display: none;
    }

    .wrapper section#page-body {
        position: relative;
        left: 0 !important;
        width: 100%;
    }

    #widget-BadgeType-box {
        overflow: auto;
    }

        #widget-BadgeType-box::-webkit-scrollbar, #widget-pending-box .table-responsive::-webkit-scrollbar {
            height: 6px !important;
        }

    ::-webkit-scrollbar {
        width: 4px;
        height: 4px !important;
    }

        ::-webkit-scrollbar:hover {
            width: 4px;
        }

    ::-webkit-scrollbar-thumb {
        border-radius: 15px !important;
        background: #a8a8aa;
    }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #c1c1c1;
        }

    #widget-BadgeType-box #badge-type-chart-container {
        width: 700px !important;
    }


    #widget-BadgeType-box .header-title {
        text-align: left;
    }

    .card-box {
        margin-bottom: 30px;
    }

    #Widget-TotalBadgeExpiringCount .card-box:last-child {
        margin-bottom: 0px;
    }

    .card-box-chart-height {
        /*height: 58vh !important;*/
        height: auto !important;
    }

    .card-box-pending-height {
        height: auto !important;
    }

    div.card-box-pending-height:last-child {
        margin-bottom: 0px !important;
    }

    #Widget-BadgeType, #Widget-BadgeExpiring, #Widget-TotalBadgeExpiringCount, #Widget-pending, #Widget-pending-count {
        padding: 0px;
    }

        #Widget-BadgeType, #Widget-BadgeExpiring, #Widget-TotalBadgeExpiringCount, #Widget-pending, #Widget-pending-count header-title {
            text-align: center
        }

    .Plugin-Panel-Body {
        top: 56px;
    }

    .clsSidebarContainer {
        width: 16%;
        max-width: unset !important;
        display: none;
    }

    .clsLogo {
        margin-left: 0px !important;
        padding-top: 10px;
        width: 100%;
    }

    .tooltip-inner {
        display: none !important;
    }

    .clsHeader {
        padding: 0px;
    }

    #sm_hamburg_toggler.fa-bars {
        font-size: 26px !important;
        color: #fff;
        padding: 15px 10px 0px 10px;
        vertical-align: top;
        float: left;
        display: block;
    }

    .show_sidebar {
        display: block !important;
    }

    .sm-hamburg-icon {
        display: block !important;
        margin: 14px 0px 0px 15px;
    }

    .mt50 {
        margin-top: 25px !important;
    }

    ::-webkit-scrollbar {
        width: 0px;
    }

    .sm-hamburg-icon .tooltip-arrow {
        display: none;
    }


    .Shell-Notify {
        top: 200px;
        right: 0px;
        width: 98%;
        margin: 0 1%;
    }

    /*Badging module styles*/

    .Plugin-List-Container {
        width: 100%;
    }

    .Plugin-Details-Container {
        width: 100%;
        left: 0;
    }

    .Plugin-full-Container {
        width: 100%;
        left: 0;
    }

    .badge-main-root .Filter-detail {
        width: 100%
    }

    .badge-main-root .list-group-item {
        padding: 20px 15px
    }

    .badgedetailview {
        display: none;
    }

    .Badge-Cards {
        display: none;
    }

    .BageCards-icon {
        display: none !important;
    }

    #Dashboard_pintodefault, #blob-show-universal-list.Plugin-Header-icon {
        display: none;
    }

    .badgedetailview_mobile {
        display: none;
    }

    .vp_hideContent {
        display: none !important;
    }

    .vp_showContent {
        display: block !important;
    }

    #BadgeHolderlist_grid_view .row.Filter-ViewOption{
        overflow-x:auto;
        height: 50px;
    }

    #BadgeHolderlist_grid_view .row.Filter-ViewOption .Shell-tab{
        width: 1102px;
    }

    #BadgeHolderlist_grid_view .row.badgelistview {
        height: calc(100vh - 117px);
        overflow: auto;
    }

    #BadgeHolderlist_grid_view .row.badgelistview::-webkit-scrollbar {
        width: 4px !important;
        height: 4px !important
    }

    #BadgeHolderlist_grid_view .row.companies-info-common {
        width: 1200px;
    }

    /*Pending application module styles*/
    .Plugin-InnerPageheaderbanner {
        left: 0px !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        border-bottom: none;
    }

    #InProgress-Main-content #campany_main_content {
        overflow-x: auto;
    }

    .shell-tab-page-header {
        width: 675px !important;
    }

    .Shell-tab-bar {
        width: 209px !important;
    }

    #InProgress-Main-content #campany_main_content .Shell-tab-bar {
        width: 209px !important;
    }

    .Shell-Filter-Menu-container {
        width: 400px !important;
    }

    #pending-applicant-details-container::-webkit-scrollbar {
        height: 4px !important;
    }

    #pending-applicant-details-container {
        height: calc(100vh - 121px);
        overflow-x: auto;
        top: 46px;
    }

    .pending-applicant-details {
        width: 820px;
    }

    /*Company app module styles*/
    /*.company_menu_options{
             display:none
         }*/

    #campany_Info_content .companies-info-common,
    #campany_Address_content .companies-info-common,
    #campany_Contacts_content .companies-info-common {
        margin-top: 60px;
    }

    .companies-info-common .CompanyHeader{
        width: 100% !important;
    }

    #Author_Companies .AuthorSigner-Badge-root {
        height: calc(100vh - 66px);
        overflow-y: auto;
    }

    #campany_Info_content .row.companies-info-common{
        border-bottom: none;
    }

    .companies-info-sponsor-detail{
        margin-bottom: 30px;
    }

    .companies-info-common .CompanyHeader-AddressTile{
        width: 100% !important;
        max-width: unset !important;
    }


    #campany_main_content .Shell-tab-bar {
        width: 100% !important;
        border-right: none !important;
        text-align: center;
    }

    #campany_Info_content ul.grid-list,
    #campany_Address_content ul.grid-list,
    #campany_Contacts_content ul.grid-list {
        margin: 0px;
    }

    #campany_Contacts_content .companies-info-common h2 {
        font-size: 23px;
    }

    .signers_table_contain {
        overflow: auto;
    }

    .signers_table_contain div.per100 {
        width: 998px !important
    }

    .zero-m-padd {
        padding: 0px !important;
    }

    .Message-list-Container {
        width: 100%;
    }

    .Message-list-Detail {
        width: 100%;
        left: 0px;
        top: 0px
    }

    .Message-Detail-root #Registration-form .textbox-Date-size,
    .Message-Detail-root #Registration-form .textbox-size.Message-box {
        width: 100% !important;
    }

    .Message-Detail-root .MessageDetailview {
        padding: 20px;
    }

    .Message-Detail-root .MessageDetailview {
        padding: 0px;
    }

    .Message-Detail-root .MessageDetailview .col-md-12:first-child {
        padding: 0px;
    }

    #campany_main_content .mr30 {
        margin-right: 0px !important;
    }

    /*Badge applicant plugin styles*/
    #badgelistview #Badge_list_root .UserClassCreate {
        left: 0;
    }

    #Badge_list_root .Shell-Alphabetics-Filter {
        left: 0;
    }

    .Badge-Appcontainer {
        padding: 17% 0 2% 0;
        margin-right: 0px;
    }

    .badge-main-root .Filter-ViewOption {
        width: 100%;
    }

    #choose_process.container {
        width: 100%;
        margin-top: 20px !important;
    }

    #Applicant_Editor_View .per20 {
        width: 100% !important;
    }

    #Applicant_Editor_View .Shell-tab {
        margin-left: 0px;
    }

    #Applicant_WorkFlow_View .per20.fa-stack {
        width: 100% !important;
    }

    #Applicant_WorkFlow_View .Shell-tab {
        margin-left: 0px;
    }

    #Applicant_Editor_View .BadgeApp-Wizard {
        top: 57px !important
    }

    #Add_Applicant_View .wizard div.item {
        width: 100%;
        display: none;
    }

        #Add_Applicant_View .wizard div.item.selected {
            display: block;
        }

    .BadgeApp-Wizard .Wizard .item {
        width: 100%;
        display: none;
        height: 75px;
    }

        .BadgeApp-Wizard .Wizard .item.selected {
            display: block;
        }

    #Registration-form .RowHeight80 {
        height: auto;
        margin-bottom: 15px;
    }

    #Registration-form .RowHeight50 {
        height: auto;
        margin-bottom: 15px;
    }

    #Registration-form .btn.theme-btn-outlined, #Registration-form a.theme-btn-outlined,
    #Registration-form .theme-btn:hover, #Registration-form .theme-btn:focus {
        margin-bottom: 0px;
    }


    .extra-field-box {
        height: 60px;
        margin-right: 15px;
        margin-bottom: 30px;
    }

    .widget-boxed-height .side-list .RowHeight90 {
        height: auto;
    }

    #applicant_details_review .padd_m_0, #profile_detail_view .padd_m_0 {
        padding-left: 0px;
        padding-right: 0px;
    }

    #applicant_details_review .ml20, #Applicant_Editor_View .ml20 {
        margin-left: 0px !important;
    }

    #BadgeHolderListView_holders i.fa-calendar,
    #BadgeHolderListView_holders i.fa-undo {
        display: none;
    }

    /* Manage applicant alternate end user workflow*/
    #Applicant_WorkFlow_View.Plugin-full-Container {
        height: calc(100vh - 100px);
        overflow-y: auto;
    }

    #Applicant_WorkFlow_View #WorkFlow_View .container {
        width: 100%;
        margin-top: 50px !important;
    }

        #Applicant_WorkFlow_View #WorkFlow_View .container h2 {
            margin-bottom: 20px;
        }

    #Applicant_main_View.Plugin-full-Container .container.mt75 {
        width: 100%;
    }

    #Insta-Login.VP-BadgeApp-Login .container,
    #Insta-Login-verification.VP-BadgeApp-Login .container {
        width: 100%;
        position: absolute;
        top: 40vh;
        transform: translateY(-50%);
        padding: 0px;
    }

        #Insta-Login.VP-BadgeApp-Login .container h2,
        #Insta-Login-verification.VP-BadgeApp-Login .container h2 {
            font-size: 34px;
            line-height: 1.2;
            margin-bottom: 30px;
            padding: 0px 15px
        }

        #Insta-Login.VP-BadgeApp-Login .container p,
        #Insta-Login-verification.VP-BadgeApp-Login .container p {
            padding: 0px 15px;
            line-height: 24px;
        }

    .clsLogoText {
        font-size: 12px;
    }

    .box-body .RowHeight90,
    .box-body .RowHeight100 {
        height: auto;
    }

    form#Add_Applicant_View {
        margin-bottom: 0px;
    }

        form#Add_Applicant_View .ml20.padd_m_0 {
            margin-left: 0px !important;
        }

    #ApplicantList_View .badge-main-root .controls,
    #BadgeHolderListView_holders .badge-main-root .controls{
        width: 100%;
    }
    #ApplicantList_View .Shell-badgetab-bar.per100.fa-stack {
        padding-right: 0px;
    }

    /* Settings plugin styles */
    #Settings_class_list_view.Plugin-List-Container, #Settings_class_Create_view.Plugin-Details-Container, #Settings_class_detail_view.Plugin-Details-Container, #Settings_user_list_view.Plugin-List-Container, #Settings_user_detail_view.Plugin-Details-Container {
        top: 132px;
    }

    .SettingPlugin-root .Plugin-InnerPageheaderbanner {
        height: auto;
    }

    #Settings_class_list_view .mt50.Setting-classlist-root,
    #Settings_user_list_view .mt50.Setting-Userlist-root {
        margin-top: 50px !important;
    }

    #Settings_class_list_view .Setting-classlist-root .per40 {
        width: auto !important;
    }

    .SettingPlugin-root.Setting-classlist-root .Shell-badgetab-bar{
        margin-left: 0px !important; 
    }

    #Settings_main_content .Shell-tab {
        margin-left: 0px;
    }

    #Settings_main_content .Shell-tab-bar {
        width: 100% !important;
        text-align: center;
        border-right: none;
        border-bottom: 1px solid var(--Theme-border);
    }

        #Settings_main_content .Shell-tab-bar:last-child {
            border-bottom: none;
        }

    #Settings_main_content .col-md-8 {
        padding: 0px;
    }

    #Settings_class_list_view .SettingPlugin-root ul li {
        width: 100%;
    }

    #Settings_class_list_view .badgelistview .UserClassCreate {
        left: 0px;
    }

    #Create-Classview_content input.textbox-size {
        width: 100% !important;
    }

    #Create-Classview_content h5.font-bold.no-margins, #profile_detail_view h5.font-bold.no-margins {
        display: inline-block;
    }

    #Create-Classview_content .RowHeight100 {
        height: auto;
    }

    #profile_detail_view .widget-head-color-box.Setting-navy-bg {
        height: auto !important;
        margin-bottom: 20px;
        padding: 10px 0px 20px;
    }

    #profile_detail_view .sett_class_sm {
        padding-bottom: 20px;
        border-bottom: 1px solid var(--Theme-border);
    }

        #profile_detail_view .sett_class_sm:first-child {
            padding: 10px;
        }

    #Settings_class_detail_view #profile_detail_view {
        overflow-y: auto;
    }

    #profile_detail_view .col-md-12.mt20.padd_m_0 {
        top: 20px;
    }

    #Settings_user_detail_view #profile_detail_view {
        overflow-x: auto;
    }

    .ta_m_center {
        text-align: center;
    }

    /* Report plugin styles */
    #Report_Result_View .Shell-badgetab-bar.per60,
    #Report_Result_View .fa-stack.per80 {
        width: 100% !important;
    }

    #BadgeHolderGridView thead,
    #BadgeHolderGridView tbody{
        width: 100%;
    }
}






/*###################   styles for device width between 600 => 900px Starts here #####################*/

@media screen and (max-width: 900px) and (min-width: 600px) {
    .wrapper section#page-body {
        position: relative;
        width: 100%;
        left: 0 !important;
    }

    #widget-BadgeType-box {
        overflow: auto;
    }

   /* ::-webkit-scrollbar {
        width: 4px;
        height: 4px !important;
    }*/

    ::-webkit-scrollbar:hover {
        width: 4px;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 15px !important;
        background: #a8a8aa;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #c1c1c1;
    }

    .Plugin-headerbanner {
        -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.3);
        -moz-box-shadow: 0 1px 0px rgba(0,0,0,.3);
    }

    .VPDashbaord {
        width: 100% !important;
    }

    #navigation-menu {
        display: none;
    }

    #Widget-BadgeType, #Widget-BadgeExpiring, #Widget-TotalBadgeExpiringCount, #Widget-pending, #Widget-pending-count {
        padding: 0px;
    }

    .card-box-chart-height {
        height: auto !important;
    }

    .card-box-pending-height {
        height: auto !important;
    }

        .card-box-pending-height:last-child {
            margin-bottom: 0px !important;
        }

    .Plugin-Panel-Body {
        top: 56px;
    }

    .clsSidebarContainer {
        width: 9%;
        max-width: unset !important;
        display: none;
    }

    .clsLogo {
        margin-left: 0px !important;
        padding-top: 10px;
        width: 100%;
    }

    .clsHeader {
        padding: 0px;
    }

    #sm_hamburg_toggler.fa-bars {
        font-size: 26px !important;
        color: #fff;
        padding: 15px 10px 0px 10px;
        vertical-align: top;
        float: left;
        display: block;
    }

    .show_sidebar {
        display: block !important;
    }

    .tooltip-inner {
        display: none !important;
    }

    .sm-hamburg-icon {
        display: block !important;
        margin: 14px 4px 0px 22px;
    }

    /*::-webkit-scrollbar {
        width: 0px;
    }*/

    .sm-hamburg-icon .tooltip-arrow {
        display: none;
    }

    .Shell-Notify {
        top: 132px;
        right: 0px;
    }

    /*Badging module styles*/

    .Badge-Cards {
        width: 70% !important;
    }

    #ul-ExpiringBadge {
        display: block !important;
    }

    #badgelist_header_text, #badgelist_header_icongroup {
        display: block !important;
    }

    #BadgeHolderlist_grid_view .row.Filter-ViewOption {
        overflow-x: auto;
        height: 50px;
    }

    #BadgeHolderlist_grid_view .row.Filter-ViewOption .Shell-tab {
        width: 1102px;
    }

    #BadgeHolderlist_grid_view .row.badgelistview {
        height: calc(100vh - 117px);
        overflow: auto;
    }

        #BadgeHolderlist_grid_view .row.badgelistview::-webkit-scrollbar {
            width: 4px !important;
            height: 4px !important
        }

    #BadgeHolderlist_grid_view .row.companies-info-common {
        width: 1200px;
    }

    /*Pending application module styles*/
    .Plugin-InnerPageheaderbanner {
        left: 0px !important;
    }

    #InProgress-Main-content #campany_main_content {
        overflow-x: auto;
    }

    .shell-tab-page-header {
        margin-left: 0px !important;
    }

    .Shell-tab-bar {
        width: 209px !important;
    }

    #InProgress-Main-content #campany_main_content .Shell-tab-bar {
        width: 209px !important;
    }

    .Shell-Filter-Menu-container {
        width: 400px !important;
    }

    #pending-applicant-details-container::-webkit-scrollbar {
        height: 6px !important;
    }

    #campany_main_content::-webkit-scrollbar {
        height: 0px !important;
    }

    #pending-applicant-details-container {
        height: calc(100vh - 121px);
        overflow-x: auto;
        top: 46px;
    }

    .pending-applicant-details {
        width: 820px;
    }

    .Plugin-InnerPageheaderbanner {
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
    }


    /*Company app module styles*/
    .signers_table_contain {
        overflow: auto;
    }

        .signers_table_contain div.per100 {
            width: 998px !important
        }

    .zero-m-padd {
        padding: 0px !important;
    }

    #campany_main_content .mr30 {
        margin-right: 0px !important;
    }

    #campany_main_content .Shell-tab-bar {
        width: 160px !important;
    }

    .companies-info-common .CompanyHeader {
        width: 100% !important;
    }

    #Author_Companies .AuthorSigner-Badge-root {
        height: calc(100vh - 66px);
        overflow-y: auto;
    }

    #campany_Info_content .row.companies-info-common {
        border-bottom: none;
    }

    .companies-info-sponsor-detail {
        margin-bottom: 30px;
    }

    .companies-info-common .CompanyHeader-AddressTile {
        width: 100% !important;
        max-width: unset !important;
    }

    /*Messsage app module styles*/
    .Message-list-Container {
        width: 100%;
    }

    .Message-list-Detail {
        width: 100%;
        left: 0px;
        top: 0px
    }


    /*Badge applicant plugin styles*/
    #ApplicantList_View .Plugin-List-Container {
        width: 100%;
    }

    #Badge_list_root .UserClassCreate {
        left: 0;
    }

    #Badge_list_root .Shell-Alphabetics-Filter {
        left: 0;
    }

    .badge-main-root .Filter-ViewOption {
        width: 100%;
    }

    #Applicant_WorkFlow_View .per20.fa-stack {
        width: 100% !important;
    }

    #Applicant_WorkFlow_View .Shell-tab {
        margin-left: 0px;
    }

    #Applicant_Editor_View .per20 {
        width: 100% !important;
    }

    #Applicant_Editor_View .Shell-tab {
        margin-left: 0px;
    }

    #choose_process.container {
        width: 100%;
        margin-top: 20px !important;
    }

    #Applicant_Editor_View .BadgeApp-Wizard {
        top: 57px !important
    }

    #Add_Applicant_View .wizard div.item {
        width: 100%;
        display: none;
    }

    #Add_Applicant_View .BadgeApp-Wizard.mt-70 {
        overflow-x: auto;
        height: 90px;
    }

    #Add_Applicant_View .BadgeApp-Wizard::-webkit-scrollbar {
        height: 3px !important;
    }

    #Add_Applicant_View .Badge-Appcontainer {
        margin-right: 0px;
        padding-top: 12%;
        padding-bottom: 2%;
    }

    #Add_Applicant_View .BadgeApp-Wizard .Wizard .item {
        height: 90px;
        width: auto;
    }

    #Registration-form .RowHeight80 {
        height: auto;
        margin-bottom: 15px;
    }

    #Registration-form .RowHeight50 {
        height: auto;
        margin-bottom: 15px;
    }

    #Registration-form .btn.theme-btn-outlined, #Registration-form a.theme-btn-outlined,
    #Registration-form .theme-btn:hover, #Registration-form .theme-btn:focus {
        margin-bottom: 0px;
    }

    .extra-field-box {
        height: 60px;
        margin-right: 15px;
        margin-bottom: 60px;
    }

    .widget-boxed-height .side-list .RowHeight90 {
        height: auto;
    }

    #applicant_details_review .padd_m_0 {
        padding-left: 0px;
        padding-right: 0px;
    }

    #applicant_details_review .ml20 {
        margin-left: 0px !important;
    }

    #ApplicantList_View .badge-main-root .controls,
    #BadgeHolderListView_holders .badge-main-root .controls {
        width: 100%;
    }

    #ApplicantList_View .Shell-badgetab-bar.per100.fa-stack {
        padding-right: 0px;
    }

    /* Manage applicant alternate end user workflow*/
    #Applicant_WorkFlow_View.Plugin-full-Container {
        height: calc(100vh - 100px);
        /*overflow-y: auto;*/
    }

    #Applicant_WorkFlow_View #WorkFlow_View .container {
        width: 100%;
        margin-top: 50px !important;
    }

        #Applicant_WorkFlow_View #WorkFlow_View .container h2 {
            margin-bottom: 10px;
        }

    #Applicant_main_View.Plugin-full-Container .container.mt75 {
        width: 100%;
    }

    #Insta-Login.VP-BadgeApp-Login .container,
    #Insta-Login-verification.VP-BadgeApp-Login .container {
        width: 100%;
        position: absolute;
        top: 50vh;
        transform: translateY(-50%);
        padding: 0px;
    }

        #Insta-Login.VP-BadgeApp-Login .container h2,
        #Insta-Login-verification.VP-BadgeApp-Login .container h2 {
            font-size: 34px;
            line-height: 1.2;
            margin-bottom: 55px;
            padding: 0px 15px
        }

        #Insta-Login.VP-BadgeApp-Login .container p,
        #Insta-Login-verification.VP-BadgeApp-Login .container p {
            padding: 0px 15px;
            line-height: 24px;
        }

    .box-body .RowHeight90,
    .box-body .RowHeight100 {
        height: auto;
    }

    form#Add_Applicant_View {
        margin-bottom: 0px;
    }

        form#Add_Applicant_View .Badge-Appcontainer {
            overflow: auto;
            padding-bottom: 2%;
        }

    .padd_m_0 {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    form#Add_Applicant_View .ml20.padd_m_0 {
        margin-left: 0px !important;
    }
    /*Settings plugin styles*/
    #Settings_main_content .Shell-tab {
        margin-left: 0px;
    }

    #Settings_main_content .fa-stack.Shell-tab-bar:last-child {
        border-right: none;
    }

    #Settings_class_list_view.Plugin-List-Container,
    #Settings_user_list_view.Plugin-List-Container {
        width: 100%;
    }

    #Settings_class_list_view .badgelistview .UserClassCreate,
    #Settings_user_list_view .badgelistview .UserClassCreate {
        left: auto
    }

    #Settings_class_detail_view.Plugin-Details-Container,
    #Settings_class_Create_view.Plugin-Details-Container,
    #Settings_user_detail_view.Plugin-Details-Container {
        width: 100%;
        left: 0;
    }

    #Create-Classview_content h5.font-bold.no-margins,
    #profile_detail_view h5.font-bold.no-margins {
        display: inline-block;
    }

    #Create-Classview_content input.textbox-size {
        width: 100% !important;
    }

    #Create-Classview_content h5.font-bold.no-margins,
    #profile_detail_view h5.font-bold.no-margins {
        display: inline-block;
    }

    #Create-Classview_content .RowHeight100 {
        height: auto;
    }

    #Settings_class_detail_view #profile_detail_view,
    #Settings_user_detail_view #profile_detail_view {
        overflow-y: auto;
    }

    #profile_detail_view .widget-head-color-box.Setting-navy-bg {
        height: auto !important;
        margin-bottom: 20px;
    }

    #profile_detail_view .sett_class_sm {
        padding-bottom: 20px;
        border-bottom: 1px solid var(--Theme-border);
    }

        #profile_detail_view .sett_class_sm:first-child {
            padding: 10px;
        }

    .ta_m_center {
        text-align: center;
    }

    /* Report plugin styles */
    #Report_Result_View .Shell-badgetab-bar.per60,
    #Report_Result_View .fa-stack.per80 {
        width: 100% !important;
    }

    #BadgeHolderGridView thead,
    #BadgeHolderGridView tbody {
        width: 100%;
    }
}

@media only screen and (max-width: 738px) {
    #navigation-menu {
        display: none;
    }

    #dash-message {
        width: auto !important;
    }

    #dash-message::before {
        left: unset !important;
        right: 5%;
    }

    #Report_Result_View .hide_cont_xs {
        display: none;
    }
}


/*###################   styles for device width between 900 => 1200px Starts here #####################*/
@media screen and (max-width: 1200px) and (min-width:901px) {

    ::-webkit-scrollbar {
       /* width: 4px;
        height: 4px !important;*/
    }

    #page-body{
        width: 95%;
        left: 5% !important;
    }

    .clsSidebarContainer {
        width: 5%;
        display: block !important;
    }

    #Widget-BadgeType, #Widget-BadgeExpiring, #Widget-TotalBadgeExpiringCount, #Widget-pending, #Widget-pending-count {
        padding-right: 0px;
    }

    .VPDashbaord {
        width: 100% !important;
    }

    .card-box-pending-height, .card-box-chart-height {
        height: auto !important;
    }

    .Plugin-InnerPageheaderbanner {
        left: 0px !important;
    }

    .shell-tab-page-header {
        margin-left: 0px !important;
    }

    .Shell-tab-bar {
        width: 209px !important;
    }

    #pending-applicant-details-container {
        top: 46px;
    }

    .Plugin-InnerPageheaderbanner {
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
    }


    #BadgeHolderlist_grid_view .row.Filter-ViewOption {
        overflow-x: auto;
        height: 50px;
    }

    #BadgeHolderlist_grid_view .row.Filter-ViewOption .Shell-tab {
        width: 1102px;
    }

    #BadgeHolderlist_grid_view .row.badgelistview {
        height: calc(100vh - 117px);
        overflow: auto;
    }

    #BadgeHolderlist_grid_view .row.badgelistview::-webkit-scrollbar {
        width: 4px !important;
        height: 4px !important
    }

    #BadgeHolderlist_grid_view .row.companies-info-common {
        width: 1200px;
    }

    /*Company module styles*/
    .companies-info-common .CompanyHeader {
        width: 100% !important;
    }

    #Author_Companies .AuthorSigner-Badge-root {
        height: calc(100vh - 66px);
        overflow-y: auto;
    }

    #campany_Info_content .row.companies-info-common {
        border-bottom: none;
    }

    .companies-info-sponsor-detail {
        margin-bottom: 30px;
    }

    .companies-info-common .CompanyHeader-AddressTile {
        width: 100% !important;
        max-width: unset !important;
    }

    /*#campany_Address_content .companies-info-common .col-md-10.zero-m-padd {
        width: 100%;
    }*/

    #campany_main_content > .col-md-6.col-xs-10{
        width: 100%;
    }

    /*Badge applicant plugin styles*/
    #ApplicantList_View .Plugin-List-Container {
        width: 100%;
    }

    #Add_Applicant_View .BadgeApp-Wizard {
        overflow-x: auto;
    }

        #Add_Applicant_View .BadgeApp-Wizard::-webkit-scrollbar {
            height: 5px !important;
        }

    .BadgeApp-Wizard .Wizard .item {
        width: auto;
    }

    #Badge_list_root .UserClassCreate {
        left: 0;
    }

    #Badge_list_root .Shell-Alphabetics-Filter {
        left: 0;
    }

    .badge-main-root .Filter-ViewOption {
        width: 100%;
    }

    #Applicant_WorkFlow_View .per20.fa-stack {
        width: 100% !important;
    }

    #Applicant_WorkFlow_View .Shell-tab {
        margin-left: 0px;
    }

    #Applicant_Editor_View .per20 {
        width: 100% !important;
    }

    #Applicant_Editor_View .Shell-tab {
        margin-left: 0px;
    }

    .BadgeApp-Wizard .Wizard .item {
        height: 75px;
    }

    #Registration-form .RowHeight80 {
        height: auto;
        margin-bottom: 15px;
    }

    #Registration-form .RowHeight50 {
        height: auto;
        margin-bottom: 15px;
    }

    #Registration-form .btn.theme-btn-outlined, #Registration-form a.theme-btn-outlined,
    #Registration-form .theme-btn:hover, #Registration-form .theme-btn:focus {
        margin-bottom: 0px;
    }

    .extra-field-box {
        height: 60px;
        margin-right: 15px;
        margin-bottom: 30px;
    }

    .widget-boxed-height .side-list .RowHeight90 {
        height: auto;
    }

    #applicant_details_review .col-md-9.padd_m_0.ipad_land,
    #applicant_details_review .col-md-3.padd_m_0.ipad_land {
        width: 100%;
    }

    #applicant_details_review .col-md-4.padd_m_0 {
        width: 50%;
    }


    /* Manage applicant alternate end user workflow*/
    #Insta-Login.VP-BadgeApp-Login .container h2,
    #Insta-Login-verification.VP-BadgeApp-Login .container h2 {
        line-height: 1.2;
        margin-bottom: 100px;
        font-size: 42px;
    }

    form#Add_Applicant_View {
        margin-bottom: 0;
    }

        form#Add_Applicant_View .Badge-Appcontainer {
            overflow: auto;
            padding-bottom: 2%;
        }

        form#Add_Applicant_View .ml20.padd_m_0 {
            margin-left: 0px !important;
        }
    /*Settings plugin styles*/

    #Create-Classview_content input.textbox-size {
        width: 100% !important;
    }

    #Create-Classview_content h5.font-bold.no-margins,
    #profile_detail_view h5.font-bold.no-margins {
        display: inline-block;
    }

    #Create-Classview_content .RowHeight100 {
        height: auto;
    }

    #Settings_class_detail_view #profile_detail_view,
    #Settings_user_detail_view #profile_detail_view {
        overflow-y: auto;
    }

    #profile_detail_view .widget-head-color-box.Setting-navy-bg {
        height: auto !important;
        margin-bottom: 20px;
    }

    #profile_detail_view .sett_class_sm {
        padding-bottom: 20px;
        border-bottom: 1px solid var(--Theme-border);
    }

        #profile_detail_view .sett_class_sm:first-child {
            padding: 10px;
        }

    .ta_m_center {
        text-align: center;
    }

    .width_ms_full {
        width: 100px !important;
    }

    /* Report plugin styles */
    #Report_Result_View .Shell-badgetab-bar.per60,
    #Report_Result_View .fa-stack.per80 {
        width: 100% !important;
    }

    #BadgeHolderGridView thead,
    #BadgeHolderGridView tbody {
        width: 100%;
    }
}



/*additional non device-specific styles*/

#sm_hamburg_toggler {
    display: none;
}

#Create-Classview_content .widget-head-color-box, #profile_detail_view .widget-head-color-box {
    height: 55px !important;
    margin-top: -5px !important;
    margin-left: 0px !important;
}

#Create-Classview_content .RowHeight30 {
    height: auto;
}

#Settings_class_list_view .badgelistview .UserClassCreate,
#Settings_user_list_view .badgelistview .UserClassCreate {
    overflow: auto;
    border-right: none;
}

#Settings_class_list_view.Plugin-List-Container,
#Settings_user_list_view.Plugin-List-Container {
    overflow-y: auto;
    height: calc(100vh - 60px);
}

#Settings_class_detail_view .user-height.mt20,
#Settings_user_list_view .user-height.mt20 {
    overflow: auto;
    width: 100%;
}