/* TodO: check this out old css */
.tx-p123designer-pi5 .label { float: left; width: 200px; }
.tx-p123designer-pi5 .field { float: left; width: 350px; }
.tx-p123designer-pi5 .error { border: 0px solid #000000; color: red; margin-top: 20px; padding: 10px 0px; width: 620px; }
.tx-p123designer-pi5 .error div { color: red; }
.tx-p123designer-pi5 .error br, .tx-p123designer-pi5 .error span { display: none; }
/*.tx-p123designer-pi5 .preview { background: #666666 url(../typo3conf/ext/p123designer/res/loading.gif) center no-repeat; border: {$styles.content.imgtext.borderThick}px solid {$styles.content.imgtext.borderColor}; }*/
.tx-p123designer-pi5 .dbutton { background: #999999; border: 1px solid #999999; color:#FFFFFF; font-size: 10px; font-weight: bold; }
.tx-p123designer-pi5 .clear { clear: both; font-size: 0px; height: 0px; line-height: 0px; width: 0px; }
.tx-p123designer-pi5 .required { color: red; }
.tx-p123designer-pi5 input[type="checkbox"] { float: left; }
.tx-p123designer-pi5 input[type="checkbox"] + label { display: block; margin-left: 20px; }
.tx-p123designer-pi5 .helpbox { background-image: url(../typo3conf/ext/p123designer/res/editbox.png); display: none; line-height: 1; position: absolute; text-align: center; }
.tx-p123designer-pi5 .helpbox span { display: none; }
#TB_load.tx-p123designer-pi5-load { background: rgba(255, 255, 255, 0.9); border: 1px solid #C0C0C0; border-color: rgba(192, 192, 192, 0.6); color: #333333; font-weight: bold; height: 50px; padding-top: 25px; text-align: center; white-space: nowrap; width: 325px;
    -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;
    -moz-box-shadow: 1px 1px 4px 0px #C0C0C0; -webkit-box-shadow: 1px 1px 4px 0px #C0C0C0; box-shadow: 1px 1px 4px 0px #C0C0C0; }
#TB_load.tx-p123designer-pi5-load span { display: block; }
/* old end */

:root {
    --pi5-imagewrap-padding: 1em;
    --pi5-imagewrap-margin: .5em;
    --pi5-image-bottom-padding: 1em;
    --pi5-col-number: 1;
}

.tx-p123designer-pi5 {
    margin-top: 3em;
}

.pi5-image-selection {
    background-color: var(--background-color);
}

.pi5-image-selection .pi5-image a:before {
    display: none;
}

.pi5-image-selection.flex-container .pi5-imagewrap {
    width: calc((100% - var(--pi5-imagewrap-margin) * (var(--pi5-col-number) - 1)) / var(--pi5-col-number) );
    padding: var(--pi5-imagewrap-padding);
    margin-right: var(--pi5-imagewrap-margin);
    margin-bottom: var(--pi5-imagewrap-margin);
    background-color: var(--box-background-color);
    box-sizing: border-box;
}

.pi5-image-selection.flex-container .pi5-imagewrap:nth-child(1n) {
    margin-right: 0;
}

.pi5-image-bottom {
    padding: var(--pi5-image-bottom-padding);
}

.pi5-image-bottom.flex-container {
    justify-content: stretch !important;
    align-items: flex-start !important;
    flex-direction: column !important;
}

.pi5-button {
    width: 100%;
    margin-top: .5rem;
}

.pi5-button a {
    width: 100%;
    font-size: 1.1rem;
    float: right;
}

.pi5-image-caption {
    width: 100%;
    box-sizing: border-box;
    padding: .5rem;
    background-color: var( --background-color);
}

.pi5-image-caption span {
    font-size: 1.2em;
}

.pi5-imagewrap.hide {
    display: none;
}

/* pi5-image-search beign */
.pi5-image-search {
    margin-bottom: 2em;
}

.pi5-image-search .sarch-boday {
    width: 100%;
}

.pi5-image-search .sarch-boday select {
    width: 100%;
}

.pi5-image-search .sarch-boday .select-btn {
    display: none;
}

.pi5-image-search .sarch-boday .select-btn.flex-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.pi5-image-search .sarch-boday .select-btn.flex-container button {
    flex: 1 1 0;
    margin: .2em;
}
.pi5-image-search .sarch-boday .select-btn.flex-container button.currrent {

}

.pi5-image-search .sarch-boday .select-btn button:after {
    display: none;
}
/* pi5-image-search beign */

.tx-p123designer-pi5 .hint-and-buttons {
    margin-top: 1em;
}

/* #TB_window beign */
html.txp123designer-pi5  #TB_window #TB_caption {
    display: none;
}
/* #TB_window end */

/* 360px */
/* Galaxy Note 3 */
/* Galaxy S9/S9Plus */
/* Galaxy S10/S10Plus */
/* Galaxy S20 */
@media only screen and (min-width: 22.5em) {
}

/* 375px (374px)*/
/* iPhone 6/7/8 */
/* iPhone SE 2nd */
/* iPhone X/XS */
/* iPhone 11 Pro */
/* iPhone 12/13 mini */
@media only screen and (min-width: 23.375em) {
}

/* 384px */
/* Galaxy S20+ */

/* 390px */
/* iPhone 12/13 + Pro */
@media only screen and (min-width: 24.375em) {
}

/* 400px */
@media only screen and (min-width: 25em) {
}

/* 412px */
/* Galaxy S20 Ultra */
/* Galaxy Note 20 Ultra */

/* 414px */
/* iPhone 6/7/8 Plus*/
/* iPhone XR/11 */
/* iPhone XS Max */
/* iPhone 11 Pro Max */
/* Galaxy Note 9 */
@media only screen and (min-width: 25.875em) {
}

/* 428px */
/* iPhone 12/13 ProMaxi */
@media only screen and (min-width: 26.625em) {
}

/* 600px */
/* Nexus 7 */
@media only screen and (min-width: 37.5em) {
}

/* 648px */
@media only screen and (min-width: 40.5em) {
}

/* 768px */
@media only screen and (min-width: 48em) {
    :root {
        --pi5-col-number: 2;
    }

    .pi5-image-selection.flex-container .pi5-imagewrap:nth-child(1n) {
        margin-right: var(--pi5-imagewrap-margin);
    }

    .pi5-image-selection.flex-container .pi5-imagewrap:nth-child(2n) {
        margin-right: 0;
    }
}

/* 960px */
@media only screen and (min-width: 60em) {
    :root {
        --pi5-col-number: 3;
    }

    .pi5-image-search .sarch-boday.select-btn select {
        display: none;
    }

    .pi5-image-search .sarch-boday .select-btn {
        display: flex;
    }

    .pi5-image-selection.flex-container .pi5-imagewrap:nth-child(2n) {
        margin-right: var(--pi5-imagewrap-margin);
    }

    .pi5-image-selection.flex-container .pi5-imagewrap:nth-child(3n) {
        margin-right: 0;
    }
}

/* 1024px */
@media only screen and (min-width: 64em) {
    /*:root {*/
    /*    --pi5-col-number: 4;*/
    /*}*/

    /*.pi5-image-selection.flex-container .pi5-imagewrap:nth-child(3n) {*/
    /*    margin-right: var(--pi5-imagewrap-margin);*/
    /*}*/

    /*.pi5-image-selection.flex-container .pi5-imagewrap:nth-child(4n) {*/
    /*    margin-right: 0;*/
    /*}*/
}

/* 1184px */
@media only screen and (min-width: 74em) {
}

/* 1424px */
@media only screen and (min-width: 89em) {
    /*.pi5-image-bottom.flex-container {*/
    /*    justify-content: space-between !important;*/
    /*    align-items: baseline !important;*/
    /*    flex-direction: row !important;*/
    /*}*/

    /*.pi5-button {*/
    /*    width: auto;*/
    /*    margin-top: 0;*/
    /*}*/

    /*.pi5-button a {*/
    /*    float: none;*/
    /*}*/
}