/******************************************************************************
 *     ______                                                                 *
 *    /       \                                                               *
 *   /$$$$$$  | ________  __    __   ______    ______                         *
 *   $$ |__$$ |/        |/  |  /  | /      \  /      \                        *
 *   $$    $$ |$$$$$$$$/ $$ |  $$ |/$$$$$$  |/$$$$$$  |                       *
 *   $$$$$$$$ |  /  $$/  $$ |  $$ |$$ |  $$/ $$    $$ |                       *
 *   $$ |  $$ | /$$$$/__ $$ \__$$ |$$ |      $$$$$$$$/                        *
 *   $$ |  $$ |/$$      |$$    $$/ $$ |      $$       |                       *
 *   $$/   $$/ $$$$$$$$/  $$$$$$/  $$/        $$$$$$$/                        *
 *                                                                            *
 *   @PROJECT    : Opd Extension [Magetop.com]                                *
 *   @AUTHOR     : Azure - Developer                                          *
 *   @COPYRIGHT  : © 2019  Magetop.com                                        *
 *   @LINK       : https://Magetop.com                                        *
 *   @CREATED    :  10/10/2019                                                *
 ******************************************************************************/

.opd-loading-mask {
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.8);
    justify-content: center;
    align-items: center;
}
.opd-thum {overflow: hidden;}
.opd-thum .opd-preview-side {width:80px;float: left;margin-bottom: 8px;}
.opd-thum .opd-preview-side:not(:last-child) {margin-right:8px;}
.opd-thum .opd-preview-side svg {max-width:100%;height:auto;}
#gallery svg {
    width: 100%;
    height: auto;
}
/* customn style for inline option */
.opd-inline-product {
    display: flex;
    flex-direction: column;
    justify-content: flex-start ;
}
.inline-side-item {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}
.inline-object {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}
.inline-object-image {
    display: flex;
}
.inline-object img {
    width: 100%;
    height: auto;
    max-width: 150px;
}
#pid-opd-preview {
    display: none;
}
#gallery #pid-opd-preview  {
    display: block;
}
.inline-side-select {
    display: flex;
    flex-direction: column;
}