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

.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;}

#txt-idesign-text {
    width: 98%;
    height: 47px;
    font-size: 1.4em;
}

#krisla-preview-text-font {
    width: 100%;
    float: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 370px;
    margin-top: 5px;
}

#krisla-preview-text-name {
    width: 100%;
    float: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 370px;
    margin-top: 5px;
    position: relative;
    height: 370px;
    max-height: 370px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* NUR für Text-spans, NICHT für Image-span! */
#cpp-prview-text-row1, #cpp-prview-text-row2 {
    position: absolute;
    left: 50%;
    text-align: center;
    width: 370px;
    max-width: 330px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.2;
}

/* Image hat eigene Regeln */
#cpp-prview-text-image {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    height: auto !important;    max-height: 180px;    display: flex;    justify-content: center;    align-items: center;}

#cpp-prview-text-image img {
    width: auto;
    height: auto;
    max-width: 330px;
    max-height: 200px;
}

#krisla-preview-text-container, #krisla-preview-title-container {
    width: 100%;
    float: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 370px;
}

#krisla-preview-title-container {
    margin-top: 15px;
}

#cpp-preview-text-title {
    padding: 3px 0 0 10px;
    font-size: 1.4em;
    color: #0085b9;
}

.cpp-preview-text-descr {
    margin: 0 0 10px 0 !important;
    padding: 10px 12px 10px 17.5px !important;
    font-size: 1.3rem !important;
    font-weight: 600!important;
}

#selectTemplateLeft img {
    max-height: 30px;
    padding: 3px 0 0 3px;
}

/* Mobile */
@media (max-width: 768px) {
    #krisla-preview-text-name {
        max-width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    
    #cpp-prview-text-row1, #cpp-prview-text-row2 {
        font-size: 50px !important;
    }
    
    #cpp-prview-text-image img {
        max-width: 250px !important;
        max-height: 130px !important;
    }
}