@font-face {
    font-family: 'Gilroy';
    src: url('fonts/gilroy/Gilroy-Regular.eot');
    src: local('fonts/gilroy/Gilroy Regular'), local('Gilroy-Regular'),
        url('fonts/gilroy/Gilroy-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/gilroy/Gilroy-Regular.woff2') format('woff2'),
        url('fonts/gilroy/Gilroy-Regular.woff') format('woff'),
        url('fonts/gilroy/Gilroy-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy';
    src: url('fonts/gilroy/Gilroy-Bold.eot');
    src: local('fonts/gilroy/Gilroy Bold'), local('Gilroy-Bold'),
        url('fonts/gilroy/Gilroy-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/gilroy/Gilroy-Bold.woff2') format('woff2'),
        url('fonts/gilroy/Gilroy-Bold.woff') format('woff'),
        url('fonts/gilroy/Gilroy-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy';
    src: url('fonts/gilroy/Gilroy-Light.eot');
    src: local('fonts/gilroy/Gilroy Light'), local('Gilroy-Light'),
        url('fonts/gilroy/Gilroy-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/gilroy/Gilroy-Light.woff2') format('woff2'),
        url('fonts/gilroy/Gilroy-Light.woff') format('woff'),
        url('fonts/gilroy/Gilroy-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy';
    src: url('fonts/gilroy/Gilroy-Semibold.eot');
    src: local('fonts/gilroy/Gilroy Semibold'), local('Gilroy-Semibold'),
        url('fonts/gilroy/Gilroy-Semibold.eot?#iefix') format('embedded-opentype'),
        url('fonts/gilroy/Gilroy-Semibold.woff2') format('woff2'),
        url('fonts/gilroy/Gilroy-Semibold.woff') format('woff'),
        url('fonts/gilroy/Gilroy-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy';
    src: url('fonts/gilroy/Gilroy-Medium.eot');
    src: local('fonts/gilroy/Gilroy Medium'), local('Gilroy-Medium'),
        url('fonts/gilroy/Gilroy-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/gilroy/Gilroy-Medium.woff2') format('woff2'),
        url('fonts/gilroy/Gilroy-Medium.woff') format('woff'),
        url('fonts/gilroy/Gilroy-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}


:root{
    --primary: #222;
    --lightGreen: #8BAEA3;
    --white: #fff;
    --black: #000;
    --darkGrey: #1A1A1A;
    --lightGrey: #B3B3B3;
    --lightBg: #F4F4F4;
    --defaultSize: 14px;
    --sidebarcolor:'#393A3D'
}

body{
    background-color: #e7e7e7 !important;
    color: #8E9098;
    letter-spacing: 0.2px;
    line-height: 22px;
}

body, h1, h2, h3, h4, h5, h6, button, a, li, p, span, td, th, input, select, div, textarea{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif”
}

p, div{
    line-height: 22px;
}

.container-lg{
    max-width: 1140px;
    margin: auto;
}

/* .btn.btn-success{
    background-color: var(--primary);
    border-color: var(--primary);
} */

.btn-success{
  background-color:#c8dbcf;
  border-color: #c8dbcf;
  color:#222;
}

.d-none{
    display: none;
}

.d-flex{
    display: flex;
}

.pr-15{
    padding-right: 15px;
}

.pl-15{
    padding-left: 15px;
}

.mt-10{
    margin-top: 10px;
}

.mt-15{
    margin-top: 15px;
}

.mt-20{
    margin-top: 15px;
}

.mb-10{
    margin-bottom: 10px;
}

.mb-15{
    margin-bottom: 15px;
}

.mb-20{
    margin-bottom: 15px;
}

.m-width-50{
    min-width: 50px !important;
}

.m-width-75{
    min-width: 75px !important;
}

.m-width-100{
    min-width: 100px !important;
}

.m-width-125{
    min-width: 125px !important;
}

.m-width-150{
    min-width: 150px !important;
}

.m-width-175{
    min-width: 175px !important;
}

.m-width-200{
    min-width: 200px !important;
}

.width-50{
    width: 50px !important;
}

.width-75{
    width: 75px !important;
}

.width-100{
    width: 100px !important;
}

.width-125{
    width: 125px !important;
}

.width-150{
    width: 150px !important;
}

.width-175{
    width: 175px !important;
}

.width-200{
    width: 200px !important;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
 -webkit-appearance: none;
  -moz-appearance: textfield;
}

/*

.navbar.navbar-default{
    height: 66px;
    border-radius: 0;
    background-color: transparent;
    border: 0;
}

.navbar-nav>li>a {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
    color: #7ebb02 !important;
    background-color: rgba(126, 187, 2, .05) !important;
    font-weight: 500;
    border-bottom: 3px solid;
}*/

/*Header CSS*/

        /* .navbar-header {
            min-width: 180px !important;
        }

        @media (max-width: 1200px) {

            .container{
                width: 100%;
            }


            .navbar-toggle {
                display: block;
            }
            .navbar-collapse {
                border-top: 1px solid transparent;
                box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
            }
            .navbar-collapse.collapse {
                display: none!important;
            }
            .navbar-collapse.collapse.show {
                display: block!important;
            }
            .navbar-nav {
                float: none!important;
                margin: 7.5px -15px;
            }
            .navbar-nav>li {
                float: none;
            }
            .navbar-nav>li>a {
                padding-top: 10px;
                padding-bottom: 10px;
            }

            .navbar-collapse.collapse.show,
            .navbar-collapse.collapse.show .navbar-nav{
                margin: 0;
            }

            .navbar-default .navbar-right{
                margin-top: -70px;
                margin-right: 85px;
            }
            .navbar-default .navbar-right > .navbar-nav{
                margin-bottom: 0;
                float: right !important;
            }

            .navbar-default .navbar-right:after{
                content: "";
                clear: both;
                display: table;
            }

            .navbar-default > .container{
                padding: 0;
            }

            .navbar-default > .container .navbar-header{
                padding: 0 15px;
            }
        }

        .navbar-default {
            border: 0;
            box-shadow: 0 0 8px #e7e7e7;
        }

        .navbar-default .navbar-header{
            margin: 0;
            overflow-x: hidden;
        }

        .navbar-default .navbar-header .navbar-toggle{
            margin: 14px 0;
        }

        .navbar-default .navbar-brand{
            padding: 8px 0;
            height: 62px;
            margin-left: 0 !important;
        }

        .navbar-default .navbar-brand img{
            height: 128%;
            margin-top: -5px;
            margin-left: 69px;
            width: 60%;
        }

        .navbar-header .navbar-toggle{
            border-color: transparent;
        }

        .navbar-header .navbar-toggle[aria-expanded="true"],
        .navbar-header .navbar-toggle:focus,
        .navbar-header .navbar-toggle:hover{
            border-color: var(--primary);
            background-color: transparent;
        }

        .navbar-default .navbar-toggle .icon-bar{
            background-color: var(--primary);
        }

        .collapse.navbar-collapse .navbar-nav > li > a{
            padding-top: 20px;
            padding-bottom: 20px;
            position: relative;
        }

        .collapse.navbar-collapse .navbar-nav > li.active > a{
            color: var(--primary) !important;
            background-color: rgba(126, 187, 2, .05) !important;
            font-weight: 500;
        }

        .collapse.navbar-collapse > .navbar-nav > li > a:after{
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -2px;
            height: 3px;
            background-color: inherit;
        }

        .collapse.navbar-collapse .navbar-nav > li.active > a:after{
            background-color: #222;
        }

        .navbar-right .navbar-nav > li > a.dropdown-toggle {
            padding: 11px;
        }

        .navbar-nav > .dropdown-user > a > .imagestyle{
            padding: 0;
        }

        .navbar-default .caret{
            font-style: normal;
            font-weight: normal;
            border: 0;
            margin: 0;
            width: auto;
            height: auto;
            text-align: center;
            margin-top: -1px;
        }

        @media (max-width: 1200px) {
            .navbar-default .navbar-header{
                min-width: auto;
            }
        }

        @media (max-width: 768px){
            .navbar-nav > .dropdown-user > a > span.profile-username{
                display: none;
            }
        } */

.page-container {
    min-height: calc(100vh - 48px);
}

.table-fixed {
    table-layout: fixed;
}
/* New Header CSS  */

.navbar-nav .btn-icon{
    padding: 0;
}

.navbar-brand {
    padding: 6px 20px;
    height: auto;
}

.navbar .navbar-header .navbar-brand > img {
    height: 35px;
    width: auto;
    margin-top: 0;
    padding: 0;
}

/* Burger Animation */

.sidebar-control.sidebar-main-toggle.hidden-xs .BurgerBox {
    width: 26px;
    height: 16px;
    display: inline-block;
    position: relative;
}

.BurgerSlider .BurgerInner {
    top: 1px;
}

.BurgerInner,
.BurgerInner:before,
.BurgerInner:after {
    position: absolute;
    content: "";
    width: 100%;
    background-color: #666;
    height: 2px;
    border-radius: 0px;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.15s;
    transition-duration: 0.15s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

.BurgerInner {
    top: 50%;
    margin-top: -1px;
}

.BurgerInner,
.BurgerInner:before,
.BurgerInner:after {
    position: absolute;
    width: 100%;
    background-color: #666;
    height: 2px;
    border-radius: 0px;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.15s;
    transition-duration: 0.15s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

.BurgerInner {
    top: 50%;
    margin-top: -1px;
}

.Burger {
    padding: 5px;
    display: inline-block;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
    outline: 0;
}

.Burger {
    padding: 15px;
    display: inline-block;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
    outline: 0;
}

.BurgerSlider {
    display: inline-block;
}

.BurgerSlider .BurgerInner:before {
    top: 8px;
    -webkit-transition-property: -webkit-transform, opacity;
    -webkit-transition-property: transform, opacity;
    transition-property: transform, opacity;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-duration: 0.15s;
    transition-duration: 0.15s;
}

.BurgerSlider .BurgerInner:after {
    top: 16px;
}

body.sidebar-xs .BurgerSlider .BurgerInner {
    -webkit-transform: translate3d(0, 7px, 0) rotate(45deg);
    -ms-transform: translate3d(0, 7px, 0) rotate(45deg);
    transform: translate3d(0, 7px, 0) rotate(45deg);
}

body.sidebar-xs .BurgerSlider .BurgerInner:before {
    -webkit-transform: rotate(-45deg) translate3d(-3.7142857142857144px, -5px, 0);
    -ms-transform: rotate(-45deg) translate3d(-3.7142857142857144px, -5px, 0);
    transform: rotate(-45deg) translate3d(-3.7142857142857144px, -5px, 0);
    opacity: 0;
}

body.sidebar-xs .BurgerSlider .BurgerInner:after {
    -webkit-transform: translate3d(0, -14px, 0) rotate(-90deg);
    -ms-transform: translate3d(0, -14px, 0) rotate(-90deg);
    transform: translate3d(0, -14px, 0) rotate(-90deg);
    top: 14px;
}

/* End Animation */

.page-content > .m-20 {
    margin-top: 30px !important;
}

.bg-teal{
background-color:#222;
border-color:#222;
}

.navbar.navbar-default{
    background-color: #222;
}

.navbar .navbar-collapse .nav.navbar-nav .dropdown-toggle {
    font-weight: 600;
}

.navbar-default{
    border-color: #F2F6F9;
}

.sidebar{
    background-color: var(--sidebarcolor);
    border-right: 1px solid #F2F6F9;
}

.sidebar .navigation > li > a{
    color: var(--white);
    position: relative;
}

.sidebar .navigation > li.active > a,
.sidebar .navigation > li.active > a:hover,
.sidebar .navigation > li.active > a:focus,
.sidebar .navigation > li > a:hover{
    color: var(--white);
    background-color: var(--black);
}

.sidebar .navigation > li.active > a:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 5px;
    /* background-color: var(--white); */
}

.sidebar-xs .sidebar-main .navigation > li > a > span{
    /* background-color: var(--lightGreen);
    border-color: var(--white); */
    background-color: #222;
    border-color: #222;
}

.sidebar-xs .sidebar-main .navigation > li:hover:not(.active) > a{
    color: var(--primary);
}

@media (min-width: 769px){
    .navbar .navbar-collapse .nav.navbar-nav:first-child {
        transform: translateY(5px);
    }
    .navbar .navbar-collapse .nav.navbar-nav:last-child {
        transform: translateY(3px);
    }

    .align-center {
        display: flex;
        align-items: center;
    }

    .sidebar-fixed .sidebar-content {
        overflow: visible;
        position: fixed;
        /* top: 48px; */
    }

    .navbar.navbar-default.header-highlight.navbar-fixed-top {
        /* height: 48px; */
    }

    .sidebar-main.sidebar-fixed .sidebar-content {
        top: 56px;
    }

    .sidebar-xs .header-highlight .navbar-header .navbar-brand>img {
        display: none;
    }

    .sidebar-xs .header-highlight .navbar-header .navbar-brand {
        background: url(../images/bb-logo-mark-white-g.png) no-repeat center center;
        background-size: auto 40px;
        height: 100%;
        width: 24px;
        padding: 0;
        height: 60px;
        width: 64px;
    }

    .sidebar-xs .header-highlight .navbar-header, .sidebar-xs .sidebar-main, .sidebar-xs .sidebar-fixed.sidebar-main .sidebar-content {
        width: 64px;
        min-width: auto;
    }
}

@media (max-width: 768px){
    .nav.navbar-nav.visible-xs-block{
        transform: translateY(7px);
    }

    .sidebar-xs .sidebar-main .navigation > li > a > span{
        background-color: transparent;
    }
}


/* End New Header CSS */








/*End Header CSS*/


/* Product Preview */

.kit-preview{
    background-color: #fff;
    padding: 0;
}

.panel.kit-panel{
    border: 0;
    /* box-shadow: 0 0 8px #efefef; */
    box-shadow: none;
    background-color: transparent;
    margin-bottom: 40px;
}

.product-kit-details{
    display: flex;
    width: 100%;
}

.product-kit-details .kit-img{
    width: 45%;
    margin-top: 30px;
}

.product-kit-details .kit-img img{
    position: sticky;
    position: -webkit-sticky;
    top: 50px;
}

.product-kit-details .kit-detail{
    padding: 30px 30px 30px 45px;
    width: 55%;
}

.product-kit-details .kit-detail .kit-title{
    margin-top: 0;
    color: #575C65;
}

.product-kit-details .kit-description{
    color: #8E9098;
}

.product-kit-details .kit-price .text-muted{
    font-size: 15px;
}

/* Combo List */

.combo-list{
    background-color: #ECECEC;
    padding: 40px 0;
}

.combo-list .combo-list-heading{
    margin: 0 0 15px;
    font-size: 20px;
}

.combo-list > .container-lg > .panel.panel-white{
    padding: 30px;
    border: 0;
    box-shadow: none;
}

.combo-list-slider .owl-item .panel{
    display: flex;
    padding: 15px;
    overflow-x: hidden;
}

.combo-list-slider .owl-item .panel img{
   position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: contain;
}

.combo-list-slider .product-thumbnail {
    width: 120px;
    height: 120px;
    position: relative;
}

.combo-list-slider .owl-item .panel .combo-item-details{
    padding: 0 10px;
    flex: 1;
}

.combo-list-slider .owl-item .panel .combo-item-details .individual-product-title{
    font-size: 15px;
    margin-bottom: 5px;
}

.combo-list-slider .owl-item .panel .combo-item-details .individual-product-price{
    font-size: 18px;
    font-weight: 600;
}

.combo-list-slider .owl-dots .owl-dot span{
    width: 28px !important;
    height: 7px !important;
}

.form-footer-btns{
    padding: 0 20px 20px 20px;
}

.form-footer-btns .btn{
    margin-left: 15px;
}

/* Custom Select CSS */

.multiselect-container > li input[type='checkbox']{
    border: none;
    background: none;
    display: -moz-inline-box;
    display: inline-block;
    margin: 0;
    vertical-align: top;
    cursor: pointer;
    position: absolute;
    top: -2px;
    left: -2px;
    z-index: 2;
    position: relative;
    width: 18px;
    height: 18px;
    opacity: 0;
}

.multiselect-container > li label.checkbox{
    position: relative;
    padding-left: 18px !important;
}

.multiselect-container > li.active:not(.multiselect-filter) *{
    color: #fff;
}

.multiselect-container > li label.checkbox:before{
    position: absolute;
    content: '';
    top: 0;
    left: 12px;
    bottom: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border: 2px solid #607D8B;
    display: inline-block;
    text-align: center;
    border-radius: 2px;
}

.multiselect-container > li.active label.checkbox:before{
    border-color: #fff;
}

.multiselect-container > li.active label.checkbox:after{
    content: "\e600";
    font-family: 'icomoon';
    font-size: 16px;
    line-height: 1;
    position: absolute;
    width: 18px;
    height: 18px;
    top: 2px;
    left: 12px;
    bottom: 0;
    margin: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    opacity: 1;
}

.datatable-scroll{
    /* overflow: auto; */
}

.dataTables_filter{
    /*display: none !important;*/
	 margin: 0 0 20px 20px !important;
}

/* Dashboard Card changes */

.dashboardSmallBox .panel.has-bg-image{
    background: var(--white) !important;
    /* border-color: var(--primary) !important; */
}

.dashboardSmallBox .panel.has-bg-image i{
    color: var(--primary) !important;
}

@media (max-width: 1400px){
    /* .dashboardSmallBox .panel.has-bg-image .media-body span{
        display: block;
    } */

}

/* End */

.charts-row > div[class*='col-'] > div{
    /* overflow: auto; */
}

#datatable-po td .imagestyle img {
    min-height: 40px;
    min-width: 40px;
}

.custom-design{
    top: -33px !important;
}

body:not(.sidebar-xs) .navbar .navbar-brand{
	position: relative;
}

body:not(.sidebar-xs) .navbar .navbar-brand:after {
    /* content: 'Box & Bestow'; */
    position: absolute;
    top: 50%;
    left: 80px;
    transform: translateY(-50%);
    margin: auto;
    width: 120px;
    font-weight: 600;
    color: var(--primary);
}

.content-wrapper > .content{
    padding-top: 30px;
}

.datatable-scroll {
    width: 100%;
    overflow-x: auto;
}

.datatable-scroll .imagestyle img{
    height: 40px !important;
    width: 40px !important;
}

.row > [class*='col-lg-'] > form > .panel:nth-child(2) {
    margin-top: 30px;
}

.datatable-scroll table .btn.dropdown-toggle {
    min-width: 120px;
    justify-content: center;
}

/* Editor CSS */

.popupEditorFields, .popupEditorView, .popupEditor {
    display: block !important;
    width: 100% !important;
}

.popupEditorFields{
    padding: 0;
    padding-bottom: 20px;
}

.popupEditorFields {
    padding-top: 30px;
}

.popupEditor .popupEditorFields{
    padding-right: 0;
}

.popupEditorFields #popupEditorFieldsControl{
    height: auto !important;
    min-height: auto !important;
}
.inputContin {
    width: 50%;
}
.inputContin .col-md-6 {
    width: 50%;
    float: left;
}

.editorAddElements.d-flex{
    align-items: center;
}

.editorAddElements.d-flex i{
    margin: 0px 8px !important;
}

.editorAddElements h6{
    margin-top: 0 !important;
}

.editorAddElements i {
    font-size: 16px !important;
}

.editorAddElements{
    padding: 9px 5px !important;
    border-width: 1px !important;
}

.popupEditorView .previewButton button{
    padding: 8px 30px !important;
    font-size: 15px !important;
}

.colorPickerHold .form-control{
    height: 36px;
}

.text-right.previewButton{
    max-width: 800px;
    margin: auto;
}

.newsletterModal{
    height: 29.7cm;
    width: 21cm;
}

/* .popupEditorViewInner{
    height: 29.7cm !important;
} */

.addedElementControl span{
    /* transform: translate(7px, 19px) !important; */
    /* display: inline-block !important; */
}

.bgSizePst.bgImgColorSet:before{
    display: none;
}

.popupEditorView{
    background-color: #eee !important;
}

@media screen {
    .newsletterModal{
        border: 2px solid #f6d75b;
    }
}

@media print{
    .newsletterModal{
        margin: 0 !important;
        border: 0 !important;
        padding: 30px;
    }
}

/* End Editor CSS */

@media (min-width: 992px){
    .row > [class*='col-lg-'] > form{
        max-width: 750px;
    }

}

@media (max-width: 1200px){
    .container-lg{
        padding-right: var(--bs-gutter-x,1rem);
        padding-left: var(--bs-gutter-x,1rem);
    }

    .product-kit-details .kit-img{
        width: 30%;
    }

    .product-kit-details .kit-detail{
        padding: 30px;
        width: 60%;
    }

    .product-kit-details{
        flex-wrap: wrap;
    }

    .product-kit-details .kit-img{
        width: 100%;
    }

    .product-kit-details .kit-detail{
        padding: 30px 15px;
        width: 100%;
    }
    .custom-header{
        display: none;
    }

    .charts-row > div[class*='col-'] > div{
        overflow: hidden;
    }


}

.modal.fade.in.show{
	background-color:rgba(0,0,0,0.5);

}
.modal-header {
    padding-bottom: 13px;
}
.modal-header .close {
    position: absolute;
    right: 20px;
    top: 34%;
    margin-top: 0;
	color:#fff;
}

.mortaguageview .modal-dialog form{
    color: #000;
}
.modal .modal-header{
	background: var(--primary);
	color:#fff;
}



@media (max-width: 992px){
    .charts-row > div[class*='col-']:not(:last-child){
        margin-bottom: 20px;
    }
    #orderdet-modal, #view-modal{
       min-width: auto ;
   }
   #orderdet-modal .modal-body, #view-modal .modal-body{
       width: auto ;

   }
}

@media (max-width: 768px){
    #datatable-po_wrapper .dataTables_filter {
        margin-top: 0 !important;
        text-align: left;
        margin-left: 20px !important;
    }
    #left-upload-form{
     display: flex;
     align-items: baseline;
 }
 #role-select .rolesdetails{
       float:  left !important;
       margin-bottom: 20px;
       margin-top: 30px !important
   }
   .datatable-footer{
       display: flex;
       flex-direction: column;
   }
   .datatable-footer .dataTables_length{
       order: 1;
       text-align: left;

   }
   .datatable-footer .dataTables_info{
       order: 2;
       text-align: left;

   }
   .datatable-footer .dataTables_paginate{
       order: 3;
       text-align: left;

   }
   .homeowner-viewdet .modal-content{
       min-height: 850px;
   }
   .order-select-div .rolesdetails{
     margin-top: 0px !important;
   }
}

@media (min-width: 768px){
	.navbar .navbar-right .dropdown-user .dropdown-menu-right{
		min-width: 190px;
	}
}


/* common.css code */
.customSwitch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
}

.customSwitch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.customSwitch .slider {
    position: absolute;
    cursor: pointer;
    top: 2px;
    left: 0;
    right: 0;
    bottom: -2px;
    width: 150%;
    height: 150%;
    border-radius: 34px;
    border: 1px solid rgb(221, 221, 221);
    background-color: #a92026;
    -webkit-transition: .4s;
    transition: .4s;
}

.customSwitch .slider:before {
    position: absolute;
    content: "";
    height: 21px;
    width: 20px;
    left: 6px;
    bottom: 0px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    border-radius: 50%;
}

.customSwitch input + .slider:after,
.customSwitch input:checked + .slider:after{
    position: absolute;
    content: "Enabled";
    right: -70px;
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: medium;
    font-weight: 500;
    color: rgb(100, 189, 99);
    cursor: inherit;
    transition: all 500ms linear;
}

.customSwitch input + .slider:after{
    content: "Disabled";
    color: #F44336;
    font-size: medium;
    font-weight: 500;
    right: -70px;
    transition: all 500ms linear;
}

.customSwitch input:checked + .slider {
    box-shadow: rgb(100, 189, 99) 0px 0px 0px 8px inset;
    border-color: rgb(100, 189, 99);
    background-color: rgb(100, 189, 99);
}

.customSwitch input:checked + .slider:before {
    -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(13px);
}

.file-control:after {
    content: attr(data-filename);
}


@media screen and (max-width: 600px){
.datatable-footer {
    display: flex;
    flex-direction: column;
}
.datatable-footer .dataTables_length {
    order: 1;
    text-align: left;
}
.datatable-footer .dataTables_paginate {
    order: 3;
    text-align: left;
}
.datatable-footer .dataTables_info {
    order: 2;
    text-align: left;
}
}
@media screen and (max-width:650px) {
  .ordertbl-heading{
    flex-direction: column;
    justify-content: flex-start;
  }
    /* #superadmin_profile{
        /* flex-direction: column; ---
    }
    #superadmin_profile .media-body{
        margin-bottom: 20px;
        flex-direction: column;
    }
    #superadmin_profile .media-body label{
        margin-bottom: 8px;
        width: 100%;
        text-align: end;
    } */
    #SAdmin-comp-edit #AddUser{
        padding-left: 0 !important;
    }
    #left-upload-form{
        align-items: unset !important;

    }
}
@media screen and (max-width:680px) {
  #left-upload-form{
      align-items: unset !important;

  }
}
@media screen and (max-width:600px) {

    #quickbook-btns{
        flex-wrap: wrap;
        justify-content: left;
    }
    #quickbook-btns .ml-20{
        margin-left: 0 !important;
        padding-left: 10px;
    }
    .temp-pg #datatable-po_wrapper .datatable-footer .dataTables_paginate{
        margin-left: 0 !important;
    }


}
#tbl-profile{
    min-width: 180px;
}
#datatable-po .profileimgname, #datatable-loanofficer .profileimgname{
    min-width: 150px;
    display: flex;
    align-items: center;
}
.delt-houseowner{
    min-width: 155px;
}
/* #template-heading{
    display: flex;
    justify-content: space-between;
} */
#res-panel-heading #user-template-btns{

}
#res-panel-heading #user-template-select{
    float: right;
    margin-top: -30px;
}

#datatable-orders_wrapper #datatable-orders_filter{
    text-align: left;
    margin-top: 10px !important;
}
.user-template-select{
    float: right;
    margin-top: -30px;
}
.temp-pg #datatable-po_wrapper .datatable-footer{
    display: flex;
    align-items: baseline;
}
.temp-pg #datatable-po_wrapper .datatable-footer .dataTables_paginate{
    order: 3;
    margin-left: auto;
}

.regpage-select .open .dropdown-menu {

    min-width: 230px !important;
    padding: 10px;
}
.regpage-select .open .dropdown-menu>li>a{
    padding: 3px !important;
}
.regpage-select .open .multiselect-filter{
    display: flex;
    align-items: center;
}
.regpage-select .open .icon-search4{
    padding: 5px 15px;
}
#AddUser{
    /* padding-left: 30px !important; */
}
/* .edit-prod-upload .form-group{
    display: flex;
    flex-direction: column;
}
.edit-prod-upload .form-group .media-body{
    max-width: 100%;
    margin-top: 10px;
}
.edit-prod-upload .form-group .media-body .upload-text{
    width: 100%;
    text-align: end;
} */
.mt-0{
    margin-top: 0 !important;
}
.pt-0{
    padding-top: 0 !important;
}
.modal-form .form-control-static{
 padding-top: 0 !important;
}
.modal-form .companyname{
    padding-top: 0 !important;
}
@media screen and (max-width:420px) {
    .houseowner-modal .modal-footer{
        display: flex !important;
        flex-direction: column;
        align-items: center;
    }
    .houseowner-modal .modal-footer .btn{
        width: 150px;
        margin-bottom: 10px;
        margin-left: 0;
    }
}
@media screen and (max-width:520px) {
  .comp-user-table .user-select{
    margin-top: 0 !important;
  }
  .comp-user-table .comp-user{
    justify-content: flex-start !important;

  }
    #res-panel-heading{
    display: flex;
    flex-direction: column;
    }
    #res-panel-heading .btn.bg-primary.position-right,#res-panel-heading .btn.bg-danger.position-right{
    top: 0;
    margin: 0;
    }
    .btn-links{
    display: flex;
    justify-content: flex-start;
    }
    #res-panel-heading .btn.bg-danger.position-right{
    margin-right: 10px !important;
    }
    .panel-white>.panel-heading{
    margin-bottom: 10px;
    }
    .datatable-footer .dataTables_length, .datatable-footer .dataTables_info, .datatable-footer .dataTables_paginate{
    width: 100%;
    text-align: left;
    }
    #template-heading{
    flex-direction: column;
    }
    .template-btns{
    display: flex;
    }
    #roledata{
    padding-right: 5px;
    }
    #roledata .btn-success, #roledata .form-group, #roledata .btn-danger{
    margin: 0;
    }
    #res-panel-heading #user-template-select {
        float: left;
        margin-top: 0 !important;
        padding: 0;
    }
    #res-panel-heading #datatable-po_filter{
        margin-left: 0 !important;
    }
    #res-panel-heading #datatable-po_filter label{
        margin-top: 0 !important;
    }
.delt-user-btn #delet_user{
top: -59px !important;
}
.table-btns{
    margin-top: 50px;
    /* padding-right: 5px; */
    flex-direction: column;
    margin-bottom: 30px;
    margin-left: 20px;
}
.ordertbl-heading .btns{
  flex-wrap: wrap;

}
.ordertbl-heading .btns #delet_user, .ordertbl-heading .btns .bg-primary, .ordertbl-heading .btns .btn{
  margin-top: 10px
}

}
.p-0{
  padding: 0 !important;
}
#roledata .btn-success, #roledata .form-group {
    margin-right: 10px;
}
#roledata #people{
    position: absolute;
    z-index: 11;
}
#roledata .form-group{
    /* width: 150px;
    margin-left: auto; */
    margin-bottom: 0
}
#roledata{
  /* float: none !important;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-right: 10px;
  padding-left: 10px; */
  margin-top: 20px
}
#roledata .btn-success, #roledata .form-group  {
    margin-right: 10px;
}
.comp-user{
  float: none !important;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-right: 10px;
  padding-left: 10px;
}
/* ------------------ */
.file-control.del, .file-control{
    max-width: 400px;
    overflow: hidden;
}
.remove-pr .media-left{
    padding-right: 0 !important;

}
.order-select-div .rolesdetails{
  margin-top: 20px
}
@media (width: 768px){
.visible-xs-block {
    display: block!important;
}
.navbar-header {
    min-width: 100%;
}
.navbar-collapse.collapse {
    display: none!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
}
}
.dashboard-icons{
    display: flex;
    justify-content: center;
    /* border: 1px solid black; */
    border-radius: 50%;
    background-color: #D52B1E;
    width: 100px;
    height: 100px;
}
.dashboard-icon2{
    display: flex;
    justify-content: center;
    /* border: 1px solid black; */
    border-radius: 50%;
    background-color: #BC86AA;

    width: 100px;
    height: 100px;
}
.dashbrd-icon1{
    display: flex;
    justify-content: center;
    /* border: 1px solid black; */
    border-radius: 50%;
    background-color: #FF7F00;
    width: 100px;
    height: 100px;
}
/* -----dashboard-cards------- */
#cards{
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    padding: 0px 20px;
}
#cards .media-body{
    width: 140px;

}
.card-num{
    flex-direction: column-reverse;
    display: flex;
    align-items: flex-start;
}
.card-num .custom-font{
    font-size: 40px;
    font-weight: 600;
}
#dashboarddiv .panel-body{
    padding: 20px;
}
.comp-user-table .multi-select-container{
  width: 200px;
}
.comp-user-table .multi-select-button{
  display: flex;
  align-items: baseline;
  justify-content: space-between;

}
.templ-footer{
    display: flex;
    align-items: center;}
.templ-footer .dataTables_paginate, .templ-footer #datatable-po_info{
  margin-bottom: 0;
  margin-left: 20px;
}
.templ-footer #datatable-po_paginate{
  order: 3;
  margin-left: auto;
}
.templ-footer .dataTables_length{
  margin: 0
}
@media  (max-width: 768px) {
  .res-card{
    max-width: 300px
  }
  .templ-footer #datatable-po_length, .templ-footer #datatable-po_paginate, .templ-footer #datatable-po_info{
    width: 100%;
    text-align: left;
  }
  .templ-footer #datatable-po_paginate{
    padding-top: 10px
  }
  .comp-user-table .rolesdetails{
    float: left !important;
    margin-top: 20px !important;
    margin-bottom: 20px
  }
  .comp-user-table .comp-user{
    float: none !important;
    margin-top: 30px;
  }

}
@media  (max-width: 600px) {
  .res-card{
    max-width: 100%;
  }
  .templ-select{
      margin-top: 0 !important;
      justify-content: flex-start !important;
  }

}
.minW-100{
    min-width: 100px;
}
@media  (max-width: 800px) {
    .res-tempViewmodal{
        overflow-x: scroll;
    }
}
.templ-footer label{
    margin-top: 0;
}
.templ-footer{
    padding-bottom: 20px !important;
}

@media  (max-width: 769px) {
    .navbar-collapse.collapse.show {
        display: block  !important;
    }
    .navbar-collapse.collapse {
        display: none !important;
    }
    /* .navbar-header {
        border-bottom: 2px solid #e7e7e7;
    } */

    .sidebar-main-toggle {
        display: none !important;
    }

    .navbar-nav.navbar-left {
       float: left;
       margin: 0;
    }

    .navbar-right , .dropdown-user{
       width: 100% !important;

    }
    .dropdown-toggle{
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    .profile-username{
        margin-right: auto;
    }

}
@media  (width: 768px) {
    .dropdown-user{
        border-top: 2px solid #e7e7e7;
    }
}
.btncenter{
  display: flex;
  justify-content: center;
}
.fieldusername, .fieldemail, .fieldphonenumber{
  border: none !important;
}

.icons-list>li,
.icons-list > li > a > i{
color:#222;
}

.navigation > li > a{
font-weight:400;
}
.navbar-default .navbar-nav>li>a {
    color: #ddd !important;
}