@import url('/ClientResources/override.css');
 @import url('catalog-override.css');
 

/*
This CSS file is for styles necessary to override the client's scraped content (including 
it's own stylesheets). This file is applied both to the iMIS template, and to any ATS 
apps. For overrides specific to the iMIS site, see Net/App_Themes/01-Masterpage.css.

*/
/* OVERRIDE BASE BOOTSTRAP INCLUDED BY THE STORE */

html {
    font-size: 18px;
}

/* To fix the scrolling sideways on mobile  */
body.store div.storewrapper .form-group.row {
    flex-wrap: wrap;
}

/*This makes the margin on the left of the text block go away and makes it full width on mobile */
body.store div.storewrapper .proddetailinfo {
    margin-left: 20px !important;
}

/*these 2 styles remove the too much space between the bottom metadata*/
body.store div.storewrapper .productDetail .form-group{margin-bottom:0}

body.store div.storewrapper .productDetail .form-control-plaintext {padding:.20rem}

/* this moves the available for download down a bit to make it stand out more example book is here https://imis.counseling.org/store/detail.aspx?id=PEJCD22002 */
body.store div.storewrapper .Electronic {margin-top:.75rem}

/* move Purchase Ebook link down a bit from the desc. text */
body.store div.storewrapper .productDetail .divProductInfo ul {margin-top:1rem;}

/* style Purchase Ebook to remove icon on the left side */
body.store div.storewrapper .description .divProductInfo li {
    background:none;
    padding-left:0;
}

/* Style Purchase Ebook to make it match the add to cart button */
body.store div.storewrapper .description .divProductInfo li a {
    border: 1px solid #24b09b;
    padding: .25rem .5rem;
    border-radius: 5px;
    color: #fff !important;
  font-weight: 700;
  background: #24b09b;
  text-shadow: 0 1px 0 #636363;
}

body.store div.storewrapper .description .divProductInfo li a:hover{
    border: 1px solid #8ad3c8;
  background: #8ad3c8;
  text-decoration: none;}

/* hide the tiny social share buttons */
  body.store div.storewrapper .divSocialSharing {
    display: none;
  }

/* apply this to mobile only if possible, This removes the float on the image*/
body.store div.storewrapper .imgzoom {float:none;text-align:left;}



body.store {
    font-size: 1rem;

	& #headerMainSearchContainer {
		display:none!important;
	}

    & a.text-primary:focus,
    & a.text-primary:hover {
        color:rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important;
          text-decoration:underline;
    }

    & .navbar {
        margin-bottom: 0;
    }

    & .bg-primary .utility-nav a,
    & .bg-primary a {
        color: #fff;
        &:hover {
            text-decoration:none;
        }
    }

    & .dropdown-item:hover {
        color: var(--bs-dropdown-link-hover-color);
    }

    & .prod_search {
        & .row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: row;
            flex-wrap: wrap;
            &:before,
            &:after {
                display: none;
            }
        }

        & .col-sm-6 {
            width: unset;
        }

        & .form-inline {
            flex-wrap: nowrap;
        }
    }/* end .prod_search */

    
    & .navbar-collapse {
        &.collapse {
            @media(max-width: 1199px) {
                display:none!important;
            }

            &:not(.show) {
                @media(max-width: 1200) {
                    display: none!important;
                }
            }

            &.show {
                display: block!important;
            }
        } /* end .collapse */


        & .navbar-nav {
            @media(min-width: 768px) {
                float: none!important;
            }

            & > li {
                @media(min-width: 768px) {
                    float: none!important;
                }
            }
        }
    }/* end .navbar-collapse*/

    & .storewrapper {
        margin-top:1rem;
        margin-bottom:1rem;
    }
    
    & .ui-state-active,
    & .ui-widget-content .ui-state-active,
    & .ui-widget-header .ui-state-active,
    & a.ui-button:active,
    & .ui-button:active,
    & .ui-button.ui-state-active:hover {
        border: 1px solid #24b09b!important;
        background: #24b09b!important;
        font-weight: normal;
        color: #ffffff;
    }

    & .alert:before {
        float:none;
    }


    /* Override Default jQuery Styles in Highlight Tabs */
    & .ui-widget {font-family:unset;}
    & .ui-widget-content{
        & .itemTemplate {
           & a{
               
                color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity, 1));
            }
        }
       
    }
    & .itemTemplate{
        & .ProductImage {
            margin-bottom:.5rem;
        }
        & .title{
            font-size:.95em;
            line-height:1.1em;
        }
        & .price{
            font-size:.8em;
        } 
    }

    & .form-group.row {
            flex-wrap:nowrap;
            display: flex;
            align-items: center;
        & .col-form-label {
            width: auto;
            float: none;  
            padding:0;
            padding-right:5px;    
        }
        & div[class*="col-"] {
                padding:0 10px;
        }
    } /* end .form-group.row */
    
    & .divAddToCart {
        padding-left:0;
    }
	
	& .modal-footer {
		& .btn {
			font-size:.8rem;
		}
	}
}/* end body.store */


.btn-group-vertical>.btn-group:after, .btn-group-vertical>.btn-group:before, .btn-toolbar:after, .btn-toolbar:before, .clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .dl-horizontal dd:after, .dl-horizontal dd:before, .form-horizontal .form-group:after, .form-horizontal .form-group:before, .modal-footer:after, .modal-footer:before, .modal-header:after, .modal-header:before, .nav:after, .nav:before, .navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, .pager:after, .pager:before, .panel-body:after, .panel-body:before, .row:after, .row:before {
    display: none;
}



@media screen and (min-width:768px){
/* apply this to mobile only if possible, This removes the float on the image*/
body.store div.storewrapper .imgzoom {float:left;}}