/*aligning the sweet alert icons to the middle starts with 1em space on top*/

.swal2-icon {
    margin: 1em auto !important;
}

/*using this because while using the svg icons with the buttons there is a padding which causes svg icons in a row to next line*/
.button-no-padding {
    padding: 0 !important;
}


/*making sure that the dropdown menu aligns to the end of the button in right side for partner.customers since the card clips the dropdown menu*/
.dropdown-menu-fix {
    left: auto;
    right: 0px;
}

/*for message notification banner background colours*/
.message-info-type {
    background-color: #3598DC !important;
}

/*begin: Shop */
.shop-filter-title {
    min-height: 25px !important;
}

.shop-item-title {
    min-height: 25px !important;
}

.shop-list {
    padding: 6px !important;
}

.shop-tile-ruler {
    margin-top: 0px;
    margin-bottom: 5px;
}

.shop-item-detail {
    height: 90px;
}

.message-info-Warning {
    background-color: #F3C200 !important;
}

.shopping-cart-color {
    color: #ffffff !important;
}

.shop-item-footer {
    position: absolute;
    padding-right: 9px;
    padding-bottom: 4px;
    padding-left: 16px;
    bottom: 0;
    right: 0;
}

.shop-list .inner-card {
    padding-top: 15px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*end: Shop */
.message-info-all-good {
    background-color: #1BBC9B !important;
}

.message-info-attention {
    background-color: #F93154 !important;
}

.message-system-style { 
    transform: translateX(-42%);
    position: fixed;
    z-index: 10000; 
    width: 80%;
    margin: 0 36px;
    left: 50%;
    bottom: 60px; 
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0px 5px 30px rgb(5 4 33 / 30%); 
}

.engage-system-style { 
    position: fixed;
    z-index: 10000; 
    left: 62%;
    bottom: 14px; 
}

.engage-system-template3-style {
    position: fixed;
    z-index: 10000;
    left: 75%;
    bottom: 14px;
}

.engage-system-template8-style {
    position: fixed;
    z-index: 10000;
    left: 68%;
    bottom: 14px;
}

.engage-system-template7-style {
    position: fixed;
    z-index: 10000;
    left: 50%;
    bottom: 14px;
}

    .messaging-system-banner-padding-top {
        display: flex;
        align-items: center;
        margin-right: 10px;
        padding-top: 3vh !important;
        height: 7vh;
    }
.message-system-popup-style {
    height: 45vh !important;
    overflow: hidden !important;
    overflow-y: auto !important;
}

.message-crossmark-position {
    position: absolute !important;
    left: 97.0% !important;
    z-index: 999 !important;
    padding-top: 0.8% !important;
}

.listing-page-spinner {
    width: 200px;
    height: 100px;
    margin: 0 auto;
}

.config-padding-top {
    padding-top: var(--paddingTop);
}

/*perfect scroll*/

.scroller {
    position: relative; /* relative or absolute positioning required by Perfect Scrollbar */
    max-height: 80vh; /* height must be limited to induce scrolling behavior */
}

.scroller-custom {
    position: relative; /* relative or absolute positioning required by Perfect Scrollbar */
}

.ps__thumb-y{
    background-color:none !important;
}

.row-flex-fix {
    padding-top: 10% !important
}

.ui-select-choices.ui-select-choices-content.ui-select-dropdown.dropdown-menu {
    display: block;
}

.ui-select-multiple.ui-select-bootstrap .ui-select-match-item {
    padding: 1px 2px 1px 1em;
}

/**begin: data table css*/
.datatable > table > thead {
    visibility: visible;
    display: block;
    position: relative;
    vertical-align: middle;
    border-color: inherit;
}

    .datatable > table > thead > tr {
        display: table;
        table-layout: initial;
        border-bottom: 1px solid #EBEDF3;
        width: 100%;
    }

    .datatable > table > thead > tr > th {
        display: table-cell;        
    }


        .datatable > table > thead > tr > th.sortable {
            cursor: pointer;
        }

            .datatable > table > thead > tr > th.sortable .sort-indicator {
                padding-right: 18px;
                position: relative;                    
            }

                .datatable > table > thead > tr > th.sortable .sort-indicator:after,
                .datatable > table > thead > tr > th.sortable .sort-indicator:before {
                    content: "";
                    border-width: 0 4px 4px;
                    border-style: solid;
                    border-color: #000 transparent;
                    visibility: visible;
                    right: 5px;
                    top: 50%;
                    position: absolute;
                    opacity: 0.3;
                    margin-top: -4px;                    
                }

                .datatable > table > thead > tr > th.sortable .sort-indicator:before {
                    margin-top: 2px;
                    border-bottom: 0;
                    border-left: 4px solid transparent;
                    border-right: 4px solid transparent;
                    border-top: 4px solid #000;                    
                }

                .datatable > table > thead > tr > th.sortable .sort-indicator:hover:after,
                .datatable > table > thead > tr > th.sortable .sort-indicator:hover:before {
                    opacity: 1;
                    visibility: visible;                    
                }

            .datatable > table > thead > tr > th.sortable.sort-desc,
            .datatable > table > thead > tr > th.sortable.sort-asc {               
                color: #3699FF;
            }

                .datatable > table > thead > tr > th.sortable.sort-desc .sort-indicator:after,
                .datatable > table > thead > tr > th.sortable.sort-asc .sort-indicator:after {
                    margin-top: -2px;
                }

                .datatable > table > thead > tr > th.sortable.sort-desc .sort-indicator:before,
                .datatable > table > thead > tr > th.sortable.sort-asc .sort-indicator:before {
                    visibility: hidden;                    
                }

                .datatable > table > thead > tr > th.sortable.sort-asc .sort-indicator:after,
                .datatable > table > thead > tr > th.sortable.sort-asc .sort-indicator:hover:after {
                    visibility: visible;
                    filter: alpha(opacity=60);
                    -khtml-opacity: 0.6;
                    -moz-opacity: 0.6;
                    opacity: 0.6;
                }

                .datatable > table > thead > tr > th.sortable.sort-asc .sort-indicator:after {                  
                    border-color: #3699FF transparent;
                }

                .datatable > table > thead > tr > th.sortable.sort-desc .sort-indicator:after {
                    border-bottom: 0;
                    border-left: 4px solid transparent;
                    border-right: 4px solid transparent;
                    border-top: 4px solid #000;
                    visibility: visible;
                    -webkit-box-shadow: none;
                    -moz-box-shadow: none;
                    box-shadow: none;
                    filter: alpha(opacity=60);
                    -khtml-opacity: 0.6;
                    -moz-opacity: 0.6;
                    opacity: 0.6;
                    border-color: #3699FF transparent;
                }
/**end: data table css*/

.comments-left-scrollbar {
    position: relative !important; /* relative or absolute positioning required by Perfect Scrollbar */
    max-height: 70vh !important; /* height must be limited to induce scrolling behavior */
    overflow-y: auto !important; /* added this property because in case of table scroll doesnt work without overflow y auto*/
    overflow-x: auto !important /* consider responsiveness in mobile view with horizontal scroll*/
}

.comments-right-scrollbar {
    position: relative !important; /* relative or absolute positioning required by Perfect Scrollbar */
    max-height: 72vh !important; /* height must be limited to induce scrolling behavior */
    overflow-y: auto !important;
    overflow-x: auto !important /* consider responsiveness in mobile view with horizontal scroll*/
}

.customer-comments-right-scrollbar {
    position: relative !important; /* relative or absolute positioning required by Perfect Scrollbar */
    max-height: 60vh !important; /* height must be limited to induce scrolling behavior */
    overflow-y: auto !important;
    overflow-x: auto !important /* consider responsiveness in mobile view with horizontal scroll*/
}


.ps__rail-y:hover {
    background-color:  transparent; /*to change the hover background color of the perfect scroll*/
}


/*----classes for the table alignment in c3---*/
.header-alignment-normal {
    text-align: left !important;
}

.header-price-alignment {
    text-align: right !important;
}

.header-icon-alignment {
    text-align: center !important;
}

.header-action-alignment {
    text-align: center !important;
}

.body-alignment-normal {
    text-align: left !important;
}

.body-price-alignment {
    text-align: right !important;
}

.body-icon-alignment {
    text-align: center !important;
}

.body-action-alignment {
    text-align: center !important;
}
/*-------------------------*/

.welcome-page-footer {
    font-size: 13px !important;
}
.welcome-page-card-font-size{
    font-size:16px;
}

.welcome-page-btn-padding {
 padding:8px !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fbfcfd !important;
}

.link-text-color:hover {
    color: #3699FF !important;
}



.padding-left-5 {
    padding-left: 5px !important;
}

.padding-left-10 {
    padding-left: 10px !important;
}

.padding-right-5 {
    padding-right: 5px !important;
}

.padding-right-10 {
    padding-right: 10px !important;
}



/* bootstrap callout css classes copied from documentation*/
.bs-callout {
  margin: 20px 0;
  padding: 15px 30px 15px 15px;
  border-left: 5px solid #eee;
}
.bs-callout h4 {
  margin-top: 0;
}
.bs-callout p:last-child {
  margin-bottom: 0;
}
.bs-callout code,
.bs-callout .highlight {
  background-color: #fff;
}

/* Themes for different contexts */
.bs-callout-danger {
  background-color: #fcf2f2;
  border-color: #dFb5b4;
}
.bs-callout-warning {
  background-color: #fefbed;
  border-color: #f1e7bc;
}
.bs-callout-info {
  background-color: #f0f7fd;
  border-color: #d0e3f0;
}


/*handling the word break here because its not working in the template*/
/*.datatable-cell{
    white-space:normal;
    word-break:break-word;
    word-wrap:break-word;
}*/

 th.sortable {
    cursor: pointer;
}

 th.sortable .sort-indicator {
        padding-right: 18px;
        position: relative;
    }

 th.sortable .sort-indicator:after,
 th.sortable .sort-indicator:before {
            content: "";
            border-width: 0 4px 4px;
            border-style: solid;
            border-color: #000 transparent;
            visibility: visible;
            right: 5px;
            top: 50%;
            position: absolute;
            opacity: 0.3;
            margin-top: -4px;
        }
 th.sortable .sort-indicator:before {
            margin-top: 2px;
            border-bottom: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid #000;
        }

th.sortable .sort-indicator:hover:after,
th.sortable .sort-indicator:hover:before {
            opacity: 1;
            visibility: visible;
        }

th.sortable.sort-desc,
 th.sortable.sort-asc {
        color: #3699FF;
    }

th.sortable.sort-desc .sort-indicator:after,
th.sortable.sort-asc .sort-indicator:after {
            margin-top: -2px;
        }

 th.sortable.sort-desc .sort-indicator:before,
     table > thead > tr > th.sortable.sort-asc .sort-indicator:before {
            visibility: hidden;
        }

 th.sortable.sort-asc .sort-indicator:after,
 th.sortable.sort-asc .sort-indicator:hover:after {
            visibility: visible;
            filter: alpha(opacity=60);
            -khtml-opacity: 0.6;
            -moz-opacity: 0.6;
            opacity: 0.6;
        }

  th.sortable.sort-asc .sort-indicator:after {
            border-color: #3699FF transparent;
        }

 th.sortable.sort-desc .sort-indicator:after {
            border-bottom: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid #000;
            visibility: visible;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            filter: alpha(opacity=60);
            -khtml-opacity: 0.6;
            -moz-opacity: 0.6;
            opacity: 0.6;
            border-color: #3699FF transparent;
        }

.report-usage-instructions i {
    font-size: 1rem !important;
}

/* BEGIN: Angular Block UI */
.block-ui-message {
    border: 1px solid #ddd !important;
    background-color: #eee !important;
    -webkit-border-radius: 2px !important;
    -moz-border-radius: 2px !important;
    -ms-border-radius: 2px !important;
    -o-border-radius: 2px !important;
    border-radius: 2px !important;
    -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1) !important;
    -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1) !important;
    color: #000000 !important;
    font-weight: normal !important;
    font-size: 14px !important;
}

.block-ui-overlay-scrollable {
    position: fixed !important;
    top: -33px !important;
}

.block-ui-message-scrollable {
    position: fixed !important;
}
/* END: Angular Block UI */

/*overy effect in notification*/
tbody > tr.table-hover-mailbox:hover {
    border-left: 4px solid #217ebd !important;
}

table tbody tr td:first-child{
    font-weight:bolder;
}

.mailbox-status-box {
    position: relative;
}
.bg-green {
    background: #1BC5BD !important;
}

.bg-grey-gallery {
    background: #555 !important;
}

.mailbox-status {
    opacity: 1;
    position: absolute;
    top: 0;
    transition: .5s ease;
    backface-visibility: hidden;
}
.bg-font-grey-gallery {
    color: #fff !important;
}

.mailbox-status-overlay {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.bg-font-green {
    color: #FFF !important;
}

tbody > tr:hover .mailbox-status {
    opacity: 0.1;
}

tbody > tr:hover .mailbox-status-overlay {
    opacity: 1;
}

.mailbox-overlay-message {
    position: relative ; 
    padding-left: 5px;
    color: #217ebd;
}
/*END of overy effect*/


.auditlog-border-top {
    border-top : 0px !important;
}

table tbody tr td:first-child {
    font-weight: bolder;
}

.static-info {
    margin-bottom: 10px;
}

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

.well {
    border: 0;
    padding: 20px;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    min-height: 20px;   
    margin-bottom: 20px;
    background-color: #f1f4f7;   
    border-radius: 4px;   
}

.comments-modal-fixed-hight {
    position: relative !important; /* relative or absolute positioning required by Perfect Scrollbar */
    max-height: 50vh !important; /* height must be limited to induce scrolling behavior */
    overflow-y: auto !important;
    min-height:45vh !important; 
}

.comments-modal-fixed-hight-cart{
    height:50vh !important;
}

.static-info .name {
    font-size: 14px;
}

.static-info .value {
    font-size: 14px;
    font-weight: 600;
}

.font-green-jungle {
    color: #26C281 !important;
}

.font-red-sunglo {
    color: #E26A6A !important;
}

.link-text:hover {
    color: #3699FF;    
}

.link-font-icon {
    color: #3699FF;
    cursor: pointer;
}

.link-font-icon:hover {
    color: #3699FF;
    cursor: pointer;
}



/*loading animation css*/
.circle-ball {
    display: inline-block;
    /*#3699FF*/
    background-color: #3699FF;
    height: 15px;
    width: 15px;
    border-radius: 25px;
}


#ball-container {
    height: 200px;
    margin-top: 50px;
}

#ball-1 {
    -webkit-animation-name: bounce;
    -webkit-animation-delay: 0s;
    -webkit-animation-duration: 1.2s;
    -webkit-animation-iteration-count: infinite;
}

#ball-2 {
    -webkit-animation-name: bounce;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-duration: 1.2s;
    -webkit-animation-iteration-count: infinite;
}

#ball-3 {
    -webkit-animation-name: bounce;
    -webkit-animation-delay: 0.2s;
    -webkit-animation-duration: 1.2s;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes bounce {
    0% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(23px);
    }

    60% {
        transform: translateY(-25px);
    }

    80% {
        transform: translateY(0);
    }
}


/*spark lines css (className attribute from the object passed to sparkline.js wanst working :( )*/
.jqstooltip {
   /* background-color: white !important;
    font-size: 11px !important;
    padding: 5px !important;
    color: black !important;
    overflow: auto !important;
    text-align: center !important;
    border-color: #CCCCCC !important;*/
   position: absolute;

    width: auto !important;
    height: auto!important;
    max-width: 400px !important;
    max-height: 400px !important;
    font-family: poppins !important;
    border-radius: 5px;
}

/*.jqsfield {
    font-size: 10px !important;
    color: black !important;*/ /*set the text color here */
/*}*/

.addPlanBorderColorforGreaterprice {
    border: 3px solid gold !important;
    border-top: 2px solid gold !important;
}

.addPlanBorderColorforlessPrice {
    border: 2px solid red !important;
    border-top: 2px solid red !important;
}

.highlight {
    background-color: palegreen;
}

.public-signup-logo-bounds { 
    margin:0px !important;
    min-height: 20em !important;
    margin: 0px !important; 
    position: center; 
    background-repeat: no-repeat !important;
    background-size: cover;
}

.stack-top {
    z-index: 2;
    margin: 30px;
    top: 0%;
    position: absolute;
    transform: translate(-3%, 0%);
    gap: 55%;
}

.time-out-stack-top {
    z-index: 2;
    margin: 30px;
    top: 0%;
    position: absolute;
    transform: translate(-3%, 0%);
    gap: 35%;
}


.cart-count {
    width: auto !important;
    min-width:13px !important;
    height: 13px !important;
    position: absolute !important;
    left: 0 !important;
    top:0px !important;
    font-size: 10px !important;
    border-radius: 45% !important;
    background-color: #3699FF !important;
}

/*.cart-count:not(:hover){
    background-color:white !important;
}*/

.card-count:hover {
    background-color: #3699FF !important;
}

/*remove the background color of the span in the ui-select*/
.ui-select-bootstrap .ui-select-match .ui-select-toggle {
    background-color: white !important;
    border: 1px solid #c2cad8 !important;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    /*padding right causes issue which clips off the bottom of the dropdown arrow*/
    padding-right:unset !important;
    vertical-align: middle;
    border-top: 4px solid;
    /*    border-top: 4px solid\9;
*/ border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    color: #464E5F !important;
}

.bg-warning-approval {
    background-color: #f0ead2 !important;
}

/*public signup background color*/
.public-signup-background-color {
    background-color: #eef0f8 !important;
}

.public-signup-cards-hover-effect:hover {
    box-shadow: 1px 8px 20px grey;
    -webkit-transition: box-shadow .6s ease-in;
}


.ui-select-bootstrap .ui-select-match .ui-select-toggle .ui-select-placeholder {
    color: #464E5F !important;
}


.ui-select-bootstrap .ui-select-match .ui-select-toggle .ui-select-match-text {
    color: #464E5F !important;
}


/*grey background for disabled*/

.ui-select-bootstrap .ui-select-match .ui-select-toggle[disabled] {
    background-color: #eef1f5 !important
}

.brand-logo {
    width: 180px !important;
    height: 45px !important;
}
/*welcome-layout */
.welcome-section {
    padding-top:17vh;
}

.welcome-page-card-font-size {
    font-size: 13px;
}

.welcome-logo {
    width: 240px !important;
    height: 50px !important;
}

.form-control[disabled] {
    cursor: not-allowed;
}
.dropdown-menu a{
    cursor:pointer;
}
.nav-link{
    cursor:pointer;
}

a{
    cursor:pointer;
}

/*welcome page logo and buttons padding top*/
.navbar-expand-lg{
    padding-top:15px !important;
}

.strike-through{
    text-decoration:line-through !important;
}

.ui-select-multiple.ui-select-bootstrap[disabled] {
    background-color: #eef1f5 !important
}

/*.tooltip-inner {
    tooltip-inner has 200px from bundle
    which was causing some of the text to collapse to next line
    adjust the width here for overflow
    max-width:400px !important;
}*/

.cursor-pointer {
    cursor: pointer !important;
}

.btn.btn-default-primary {
    color: #B5B5C3;
    background-color: #F3F6F9;
    border-color: #F3F6F9;
}

    .btn.btn-default-primary i {
        color: #B5B5C3;
    }

    .btn.btn-default-primary .svg-icon svg g [fill] {
        -webkit-transition: fill 0.3s ease;
        transition: fill 0.3s ease;
        fill: #B5B5C3;
    }

    .btn.btn-default-primary .svg-icon svg:hover g [fill] {
        -webkit-transition: fill 0.3s ease;
        transition: fill 0.3s ease;
    }

    .btn.btn-default-primary.dropdown-toggle:after {
        color: #B5B5C3;
    }

    .btn.btn-default-primary:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-default-primary:focus:not(.btn-text), .btn.btn-default-primary.focus:not(.btn-text) {
        color: #3699FF;
        background-color: #F3F6F9;
        border-color: #F3F6F9;
    }

        .btn.btn-default-primary:hover:not(.btn-text):not(:disabled):not(.disabled) i, .btn.btn-default-primary:focus:not(.btn-text) i, .btn.btn-default-primary.focus:not(.btn-text) i {
            color: #3699FF;
        }

        .btn.btn-default-primary:hover:not(.btn-text):not(:disabled):not(.disabled) .svg-icon svg g [fill], .btn.btn-default-primary:focus:not(.btn-text) .svg-icon svg g [fill], .btn.btn-default-primary.focus:not(.btn-text) .svg-icon svg g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
            fill: #3699FF;
        }

        .btn.btn-default-primary:hover:not(.btn-text):not(:disabled):not(.disabled) .svg-icon svg:hover g [fill], .btn.btn-default-primary:focus:not(.btn-text) .svg-icon svg:hover g [fill], .btn.btn-default-primary.focus:not(.btn-text) .svg-icon svg:hover g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
        }

        .btn.btn-default-primary:hover:not(.btn-text):not(:disabled):not(.disabled).dropdown-toggle:after, .btn.btn-default-primary:focus:not(.btn-text).dropdown-toggle:after, .btn.btn-default-primary.focus:not(.btn-text).dropdown-toggle:after {
            color: #3699FF;
        }

    .btn.btn-default-primary.disabled, .btn.btn-default-primary:disabled {
        color: #B5B5C3;
        background-color: #F3F6F9;
        border-color: #F3F6F9;
    }

        .btn.btn-default-primary.disabled i, .btn.btn-default-primary:disabled i {
            color: #B5B5C3;
        }

        .btn.btn-default-primary.disabled .svg-icon svg g [fill], .btn.btn-default-primary:disabled .svg-icon svg g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
            fill: #B5B5C3;
        }

        .btn.btn-default-primary.disabled .svg-icon svg:hover g [fill], .btn.btn-default-primary:disabled .svg-icon svg:hover g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
        }

        .btn.btn-default-primary.disabled.dropdown-toggle:after, .btn.btn-default-primary:disabled.dropdown-toggle:after {
            color: #B5B5C3;
        }

    .btn.btn-default-primary:not(:disabled):not(.disabled):active:not(.btn-text), .btn.btn-default-primary:not(:disabled):not(.disabled).active,
    .show > .btn.btn-default-primary.dropdown-toggle,
    .show .btn.btn-default-primary.btn-dropdown {
        color: #3699FF;
        background-color: #F3F6F9;
        border-color: #F3F6F9;
    }

        .btn.btn-default-primary:not(:disabled):not(.disabled):active:not(.btn-text) i, .btn.btn-default-primary:not(:disabled):not(.disabled).active i,
        .show > .btn.btn-default-primary.dropdown-toggle i,
        .show .btn.btn-default-primary.btn-dropdown i {
            color: #3699FF;
        }

        .btn.btn-default-primary:not(:disabled):not(.disabled):active:not(.btn-text) .svg-icon svg g [fill], .btn.btn-default-primary:not(:disabled):not(.disabled).active .svg-icon svg g [fill],
        .show > .btn.btn-default-primary.dropdown-toggle .svg-icon svg g [fill],
        .show .btn.btn-default-primary.btn-dropdown .svg-icon svg g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
            fill: #3699FF;
        }

        .btn.btn-default-primary:not(:disabled):not(.disabled):active:not(.btn-text) .svg-icon svg:hover g [fill], .btn.btn-default-primary:not(:disabled):not(.disabled).active .svg-icon svg:hover g [fill],
        .show > .btn.btn-default-primary.dropdown-toggle .svg-icon svg:hover g [fill],
        .show .btn.btn-default-primary.btn-dropdown .svg-icon svg:hover g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
        }

        .btn.btn-default-primary:not(:disabled):not(.disabled):active:not(.btn-text).dropdown-toggle:after, .btn.btn-default-primary:not(:disabled):not(.disabled).active.dropdown-toggle:after,
        .show > .btn.btn-default-primary.dropdown-toggle.dropdown-toggle:after,
        .show .btn.btn-default-primary.btn-dropdown.dropdown-toggle:after {
            color: #3699FF;
        }
}


/*doughnut css class*/
.flotTip {
    position: relative;
    padding: 5px;
    font-size: 12px !important;
    border-radius: 2px !important;
    border-color: transparent !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
    color: #f1f1f1;
    z-index: 5;
}

.entity-scroll{
    position:relative !important;
    max-height:50vh !important;
}

.has-error input.form-control{
    border-color: #F64E60 !important;
}

.has-error .ui-select-bootstrap .ui-select-match .ui-select-toggle {
    border-color: red !important;
}
.accordion.accordion-toggle-plus .card .card-header .card-title.collapsed:after
{
    color: #3699FF !important;
}

.ui-select-match-item {
    color: white !important;
    background-color: #428bca !important ;
}

.form-control{
    outline:none !important;
}

/*remove the black outline for form-control- sm/lg/xs*/
select[class^="form-control"]{
    outline:none !important
}

.bg-none{
    background-color:white !important
}

/*new welcome layout style*/
.anim {
    width: 0px;
    height: 3px;
    background: rgb(190, 190, 209);
    position: relative;
}

.hover-anim:hover .anim {
    animation: mymove 2s;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

.login-shadow:hover {
    box-shadow: 0px 2px 2px 2px #666666 !important;
}

@keyframes mymove {
    from {
        width: 0%;
    }

    to {
        width: 100%;
        background-color: rgb(190, 190, 209);
    }
}

.text-padding {
    padding-left: 4vh;
}
.min-max-heignt{
    min-height: 95vh !important;
    max-height: 95vh !important;
}
/*.label.label-sm {
   top:-10px;
}*/

.label-auto-height{
    height : auto !important;
}


.preserve-linebreak {
    font-size: 1rem;
    font-weight: 400 !important;
    color: #464E5F;
    font-family: 'Poppins';
}




.bootstrap-filestyle input:disabled.form-control {
    cursor: context-menu !important;
}


public-signup-overlay:not(:hover) {
    background-color: unset !important;
}


.public-signup-cart-backdrop {
    background-color: black;
    opacity: 0.5;
}

/*.label.label-sm {
    height: auto !important;
    width: 16px;
    font-size: 0.75rem;
}*/

.shadow-md {
    -webkit-box-shadow: 0rem 0.55rem 1.5rem 0.625rem rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0rem 0.55rem 1.5rem 0.625rem rgba(0, 0, 0, 0.05) !important;
}

.swal2-container {
    z-index: 10000 !important
}

.public-signup-card-header {
    border-bottom: 0 none !important;
}

.public-signup-card-footer {
    border-top: 0 none !important;
}
/*.overlay-layer {
    background-color: #bfbfbf !important;
}*/

.public-input::-webkit-outer-spin-button,
.public-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance: textfield;
}

.custom-placeholder .ui-select-toggle .ui-select-placeholder {
    display: block !important;
}


/*.public-input{
    -webkit-appearance: none !important;
    
}*/

.table-heading-fontsize {
    font-size: 13px !important;
}

 .line-break-all{
     word-break:break-word !important;
     word-wrap:break-word !important;
 }
/*
 .word-break-unset{
     word-break:unset !important;
 }*/

/*scroll height in dropdown for user context list*/

.scroller-user-context{
    position:relative;
    height:30vh !important
}

.word-break-all{
    word-break: break-all !important;
}
 .font-size-1-rem{
     font-size:1rem !important
 }
.iframe-height-width{
    width: 100%;
    height: 100%;
}
 
/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
/*.scroll-test::-webkit-scrollbar {
    width: 8px;
    height: 5px;
} 
.scroll-test::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
.scroll-test::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
}
 */

/*media queries for fixing welcome layout*/
@media only screen and (min-width: 200px) and (min-height: 400px) and (max-width : 600px) and (max-height: 916px) {
    .hero-section {
        padding-top: 30px !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: bottom center !important;
        height: auto !important;
        min-height: unset !important;
        max-height: unset !important;
    }
}
/*media queries for fixing welcome layout*/


/* media queries for the show sidebar button */

.show-sidebar{
    display:none
}


@media only screen and (min-width: 200px) and (min-height: 400px) and (max-width : 912px) and (max-height: 1368px){
    .show-sidebar{
        display:block;
    }
}

/* media queries for the show sidebar button*/



/* responsive text width for cards in dashboard starts */

.decrease-card-text-width {
    width: unset;
    text-overflow: unset;
    overflow: unset; 
   white-space: unset;
}



@media only screen and (min-width: 200px) and (min-height: 400px) and (max-width : 912px) and (max-height: 1368px) {
    .decrease-card-text-width {
        width: 9em !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }
}


/* responsive text width for cards in dashboard starts */


.hide-filters{

    display:inline;

}


/* hiding filters for mobile and ipad*/

@media (max-width: 480px) {
    .hide-filters {
        display: none !important;
    }
}

/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
    .hide-filters {
        display: none !important;
    }
}

/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px) {
    .hide-filters {
        display: none !important;
    }
}

/* hiding filters ends*/


/* text no wrap for mobile devices*/

.text-wrap-mobile{

    white-space:unset;

}


@media (max-width: 480px) {
    .text-wrap-mobile {
        white-space:nowrap !important;
    }
}

/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
    .text-wrap-mobile {
        white-space: nowrap !important;
    }
}

/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px) {
    .text-wrap-mobile {
        white-space: nowrap !important;
    }
}


/* text no wrap for mobile devices*/



/* perfect scroll for subheader in x axis starts*/

.subheader-scroll-custom {
    position: relative !important; /* relative or absolute positioning required by Perfect Scrollbar */
    opacity:1 !important;
    padding-top:10px!important;
    padding-bottom: 10px !important;
}

.subheader-scroll-custom .ps__rail-x {
    opacity: 0.6 !important;
}

    .subheader-scroll-custom .ps__thumb-x{
        opacity:0.6 !important
    }
/* perfect scroll for subheader in x axis ends*/

/* trying the decrease scrollbar width starts*/




.scroll-test::-webkit-scrollbar {
    width: 8px;
    height:5px;
}

.scroll-test::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.scroll-test::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
}




/* trying the decrease scrollbar width ends*/



/* ui select  placeholder overflow fix starts*/



@media (max-width: 480px) {

    .ui-select-toggle {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .ui-select-match-text > span {
        white-space: nowrap;
        max-width: 200px;
        text-overflow: ellipsis;
    }

}



/*ui-select wordbreak on large text*/

/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {

    .ui-select-toggle {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .ui-select-match-text > span {
        white-space: nowrap;
        max-width: 200px;
        text-overflow: ellipsis;
    }
}

/* Media Query for Tablets Ipads portrait mode */
/*@media (min-width: 768px) and (max-width: 1024px) {

    .ui-select-toggle {
        overflow: hidden;
    }
}*/

/* ui select  placeholder overflow fix starts */


/* the dropdown goes to right side on small devices when ui select is */


/*@media (max-width: 480px) {

    .move-ui-select-choice-left.ui-select-choices.ui-select-choices-content.ui-select-dropdown.dropdown-menu {
        left: -12em;
    }
}*/

/* Media Query for low resolution  Tablets, Ipads */
/*@media (min-width: 481px) and (max-width: 767px) {

    .move-ui-select-choice-left.ui-select-choices.ui-select-choices-content.ui-select-dropdown.dropdown-menu {
        left: -12em;
    }
}*/

/*the ui select dropdowns in mobile ends*/



/*start: z-index above the tooltip >= 1070*/

.higher-zindex-than-tooltip{

    z-index:1072;
}



/*end:*/

/* start show plans filter in  a popup during add more products*/

.popup-plans-filter{
    display:none !important
}



/* Media Query for Mobile Devices */
@media (max-width: 480px) {
    .popup-plans-filter{
        display:initial !important
    }
}

/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
    .popup-plans-filter {
        display: initial !important
    }
}

/* start show plans filter in  a popup during add more products*/



/*remove take a tour*/


.hide-take-tour {
    display: block
}

@media (max-width: 480px) {

    .hide-take-tour {
        display: none !important
    }
}

/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
    .hide-take-tour {
        display: none !important
    }
}

/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px) {
    .hide-take-tour {
        display: none !important
    }
}
         

/* change icons for stop impersonation in mobile view*/

.stop-impersonation {
    display: none !important
}

@media (max-width: 480px) {

    .stop-impersonation {
        display: initial !important
    }
}

/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
    .stop-impersonation {
        display: initial !important
    }
}

/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px) {
    .stop-impersonation {
        display: initial !important
    }
}


/* hide support and comments */

.stop-impersonation {
    
}

@media (max-width: 480px) {

    .hide-support-comments {
        display: none !important
    }
}

/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
    .hide-support-comments {
        display: none !important
    }
}

/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px) {
    .hide-support-comments {
        display: none !important
    }
}


/* place uib modal on the top of bootstrap modals*/
/* uib modals on top of other uib modal is handled by library automatically*/

.modal:not([uib-modal-window]) {
    z-index: 1040 !important;
}

.modal-backdrop:not([uib-modal-backdrop]) {
    z-index: 1030 !important;
}

.fit-button-width-mobile {
    width: -moz-max-content !important;
    width: -webkit-max-content !important;
    width: max-content !important;
}


/* hide filter in public signup for mobile view*/
/*comment this out if this gives issues*/
@media (min-width: 768px) and (max-width: 991px) {
/*ipad and some low level tablets leave gap for public signup filter*/
    .ipad-issue.flex-column.offcanvas-mobile {
        position: initial !important;
    }
}


/*size of the icon/logo image*/
.cart-symbol-65 {
    width: 10em;
    max-width: 80px;
    height: 80px;
}

 .width-80-percent{
     width : 80% !important;
     max-width:80% !important;
 }

.engage-hover-effect {
    box-shadow: 7px 10px 10px Gray;
    text-shadow: none !important;
}
.card-shadow-effect {
    box-shadow: none !important;
    text-shadow: none !important;
}


/* fixing the spark lines width in all res , currently due to static values and library assuming width causes it to overflow*/
.sparkline-canvas-width > canvas{

    width:100% !important
}


/* engage mobile responsive fix start */

.ignore-bootstrap-column{

}

.engage-width{
    width:75%
}

@media (max-width: 480px) {

    /*place this in col-2 in template*/
    .ignore-bootstrap-column {
        display:none !important;
    }

    .engage-system-style {
        position: fixed;
        z-index: 10000;
        left:0;

        padding-left:10px;
        padding-right:10px
    }

    .engage-width {
        width: 100%
    }


    .engage-system-template3-style {
        position: fixed;
        z-index: 10000;
        left: unset;
        bottom: 14px;

        padding-left: 10px;
        padding-right: 10px
    }

    .engage-system-template7-style {
        position: fixed;
        z-index: 10000;
        left: unset;
        bottom: 14px;

        padding-left: 10px;
        padding-right: 10px
    }

    .engage-system-template8-style {
        position: fixed;
        z-index: 10000;
        left: unset;
        bottom: 14px;

        padding-left: 10px;
        padding-right: 10px
    }
}


/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {

   /*place this in col-2 in template*/
    .ignore-bootstrap-column {
        display: none !important;
    }

    .engage-system-style {
        position: fixed;
        z-index: 10000;
        left: 0;

        padding-left: 10px;
        padding-right: 10px
    }

    .engage-system-template3-style {
        position: fixed;
        z-index: 10000;
        left: unset;
        bottom: 14px;

        padding-left: 10px;
        padding-right: 10px
    }

    .engage-system-template7-style {
        position: fixed;
        z-index: 10000;
        left: unset;
        bottom: 14px;

        padding-left: 10px;
        padding-right: 10px
    }


    .engage-system-template8-style {
        position: fixed;
        z-index: 10000;
        left: unset;
        bottom: 14px;

        padding-left: 10px;
        padding-right: 10px
    }

}

/* engage mobile responsive fix end */


.overflow-x-hidden{
    overflow-x : hidden !important;
}

.overflow-y-hidden{
    overflow-y: hidden !important;
}

.ui-select-active-fix .ui-select-search {
    width: auto !important;
}

.ui-select-dropdown-auto-width{
    width:auto !important
}

.checkbox-popup-align > input{
    align-self: flex-start !important;
    align-items: flex-start !important;
    margin-top : 4px !important;
    outline : none;
}

.swal-confirm-button-color{
    background-color : red !important;
}