/* NOTE: contaner with main image and selector's container */

div.MagicToolboxContainer {

    text-align: center;

}

div.MagicToolboxContainer.minWidth {

    min-width: 250px;

}



/* NOTE: main image styles */

div.MagicToolboxContainer > a {

    margin: 0 auto;

}



/* NOTE: container with selectors */

div.MagicToolboxSelectorsContainer {

    clear: both;

}



/* NOTE: selectors styles */

div.MagicToolboxSelectorsContainer > a {

    display: inline-block;

    margin: 4px 1px;

}



/* NOTE: contaner with message under Magic Zoom Plus */

div.MagicToolboxMessage {

    text-align: center;

}



/* NOTE: styles for templates */

div.MagicToolboxMainContainer {

    max-width: 100%; float:right

}

div.MagicToolboxSelectorsContainer img {

    max-width: 100%;

}



/* NOTE: selectors on the bottom */

div.MagicToolboxContainer.selectorsBottom .MagicToolboxSelectorsContainer {

    padding-top: 5px;height:89px;

}



/* NOTE: selectors on the top */

div.MagicToolboxContainer.selectorsTop .MagicToolboxSelectorsContainer {

    padding-bottom: 5px;

}



/* NOTE: selectors on the left */

div.MagicToolboxContainer.selectorsLeft {

    display: inline-table;

    height: 100%;

}

div.MagicToolboxContainer.selectorsLeft .MagicToolboxMainContainer,

div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer {

    display: table-cell;

    vertical-align: top;

    height: 100%;

    padding-right: 5px;

}

div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer .MagicScroll {

    height: 100%;

}

div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer a {

    display: block;

}

/* NOTE: fix for MagicScroll */

div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer .MagicScroll > a:nth-child(n+2) {

    display: none;

}



/* NOTE: selectors on the right */

div.MagicToolboxContainer.selectorsRight {

    display: inline-table;

    height: 100%;

}

div.MagicToolboxContainer.selectorsRight .MagicToolboxMainContainer,

div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer {

    display: table-cell;

    vertical-align: top;

    height: 100%;

    /*padding-left: 5px;*/



}
div.MagicToolboxContainer.selectorsRight .MagicToolboxMainContainer{ margin-left:15px;}
div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer .MagicScroll {

    height: 100%;

}

div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer a {

    display: block;

}

/* NOTE: fix for MagicScroll */

div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer .MagicScroll > a:nth-child(n+2) {

    display: none;

}



/* NOTE: fix for MagicScroll when height of parent elements is not defined */

div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer,

div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer {

    position: relative;

}

div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer .MagicScroll,

div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer .MagicScroll {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    margin-top: 18px

}
@media only screen and (max-width: 770px) {
div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer .MagicScroll,

div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer .MagicScroll {
    margin-top: 10px

}
}



/* NOTE: to highlight magic360 selector (magiczoom(plus) + magic360) */

.zoom-with-360.mz-thumb-selected img {

    -webkit-filter: none;

    filter: none;

}

.zoom-with-360.mz-thumb:hover:not(.active-selector) img,

.zoom-with-360.m360-selector:hover:not(.active-selector) img {

    -webkit-filter: brightness(70%) !important;

    filter: brightness(70%) !important;

}

.zoom-with-360.active-selector img {

    -webkit-filter: brightness(50%) !important;

    filter: brightness(50%) !important;

}

/* NOTE: IE fix */

.no-cssfilters-magic .zoom-with-360.mz-thumb-selected img {

    opacity: 1;

    filter: alpha(opacity=100);

}

/*.no-cssfilters-magic .zoom-with-360.mz-thumb,*/

.no-cssfilters-magic .zoom-with-360.m360-selector {

    background: #000;

}

/*.no-cssfilters-magic .zoom-with-360.mz-thumb:hover:not(.active-selector) img,*/

.no-cssfilters-magic .zoom-with-360.m360-selector:hover:not(.active-selector) img {

    opacity: .7;

    filter: alpha(opacity=70);

}

.no-cssfilters-magic .zoom-with-360.active-selector img {

    opacity: .5;

    filter: alpha(opacity=50);

}

/*.mz-thumb, .mz-thumb:focus,*/

.zoom-with-360.m360-selector, .zoom-with-360.m360-selector:focus {

    display: inline-block;

    line-height: 0;

    outline: none;

}

/* NOTE: border for magic360 selector */

.zoom-with-360.m360-selector img {

    border: 0;

    box-shadow: 0 0 1px 0px rgba(0,0,0,0.3);

    box-sizing: border-box;

}

.ie9-magic .zoom-with-360.m360-selector {

    box-shadow: 0 0 4px 0px rgba(0,0,0,0.3);

}



/* NOTE: magicscroll makes the image smaller if there is a margin */

/*

.MagicScrollItem a {

    margin: 0 !important;

}

*/

.invisible,
.hidden-selector {
    display: none !important;
}
.ignore-magento-css {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}
/* NOTE: this style was added because if issue #36402 , may be it is no longer needed */
/*
.MagicZoom, .MagicZoomPlus {
    opacity: 1 !important;
    filter: none !important;
}
*/
/* NOTE: styles for selectors in original template */
.more-views {
    text-align: left;
}
.more-views a {
    text-align: center;
    line-height: 100%;
}
.more-views a img {
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
}
.more-views a:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.more-views .product-image-thumbs a {
    height: 66px;
    width: 66px;
}
.more-views .product-image-thumbs a img {
    display: inline-block;
}

/* NOTE: fixed an isssue with not visible borders in 'List' view mode on category page */
.products-list .product-image {
    padding-right: 1px;
}
/* NOTE: fixed an isssue with not visible borders in 'Grid' view mode on category page */
.products-grid .product-image {
    padding: 1px;
}
/* NOTE: fixed an isssue with height in 'Grid' view mode on category page */
.products-grid .product-image .MagicZoom {
    max-height: 100%;
}
/* NOTE: some styles for Recently Viewed Products block */
.widget .mini-products-images-list li.item {
    float: none;
    width: 100%;
    height: auto;
    text-align: center;
}

.MagicToolboxSelectorsContainer img {
    display: inline;
}