/* Builder Sections Style 
** Provides uniform style for all builder sections
** except for preview-submit
*/

.section-name-instructions:not(.titleright){
    margin-bottom: 24px;
    padding: 0px 10px;
}

.section-name-instructions:not(.titleright) .instruction-text {
    width:95%;
}

.section-name-instructions.titleright {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
}

.section-name-instructions.titleright .instruction-text {
    margin-left: 24px;
    font-size: var(--wp--preset--font-size--x-small);
}

.instructions-short {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
}

.instructions-short .instructions-title {
    margin-left: 24px;
    font-size: var(--wp--preset--font-size--x-small);
}

.open-all-item-details,
.close-all-item-details {
    display:none;
}

.open-all-item-details.is-displayed,
.close-all-item-details.is-displayed {
    display: inline-block;
    margin-left: 1em;
    padding: calc(0.334em + 2px) calc(0.334em + 2px) !important;
    /* padding: calc(0.667em + 2px) calc(0.667em + 2px) !important; */
    font-family: var(--wp--preset--font-family--oswald) !important;
    font-size: var(--wp--preset--font-size--x-small) !important;
    text-transform: uppercase;
    background-color: var(--wp--preset--color--medium-green);
	color: var(--wp--preset--color--white);
	border: 0px;
	border-radius: 0px;		
}

.all-item-details-trigger:hover {
    background-color: var(--wp--preset--color--medium-green-alpha-6);
}
.builder-section-header p {
    font-size: var(--wp--preset--font-size--x-small);
}

.section-header-alt {
    display: none;
}

.block-editor-block-list__block .builder-section-header-alt {
    display: block;
}

.section-header-alt.is-displayed {
    display:block;
}

.select-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: flex-start; */
    justify-content: space-between;
    align-items: flex-start;
    column-gap: 24px;
}

.select-item {     
    display: none;       
}

/*Used for and select items flex -items cannot be hidden by attribute, require a class*/
/* .is-desktop-preview .select-item, */
.select-item.is-displayed { 
    box-sizing: border-box;
    margin-bottom: 1rem;
    flex-basis: 48%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    height: 220px;
    padding: 8px;
    border: 1px solid var(--wp--preset--color--logo-systems-grey);
}

/*from image-select on test*/
.item-display-area {
    box-sizing: border-box;
    min-height: 180px;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.item-display-area.detail-display {
    justify-content: flex-start;
}

.item-image {    
    min-height: auto;    
    display: flex;
    align-items: center;
}

.item-image.is-hidden { 
    display: none;
}

.item-select-box {
    box-sizing: border-box;
    flex-basis: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.item-select-box.detail-display {
    flex-basis: 35%;
}

.item-title-icon {
    display: flex;
    align-items: baseline;
}

.item-title-icon h3 {
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    padding: 0px 5px 5px;
    font-size: var(--wp--preset--font-size--medium);    
}

.item-title-icon i.fa-square-info {
    display: none; 
}

.item-title-icon i.fa-square-info.is-displayed {
    display: inline-block;
    margin-left: .25em;
    color: var(--wp--preset--color--medium-green);
    font-size: var(--wp--preset--font-size--medium);  
}

.item-title-icon i.fa-square-info.is-displayed:hover {    
    color: var(--wp--preset--color--medium-green-alpha-6);  
}

.item-detail-container {
    /* background-color: beige; */
    flex-basis: 65%;
   
}

.item-detail-flex {
    /* background-color: pink; */
    
}

.close-detail {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.select-area {
    box-sizing: border-box;
    margin-left: 10px;
    margin-bottom: 20px;
    background-color: var(--wp--preset--color--white);
    border-radius: 50%;
    border: 2px solid var(--wp--preset--color--medium-light-grey);
    width: 90px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.select-check {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .25rem .5rem;
}

.select-check i {
    font-size: 36px;
    color: var(--wp--preset--color--medium-light-grey);
}

.select-area.item-selected {
    border: 2px solid var(--wp--preset--color--medium-green);
}

.select-area.item-selected .select-check i {    
    color: var(--wp--preset--color--medium-green);
}

.select-counter {
    display: flex;
    justify-content: flex-start;
    align-items: center;    
    width: 80px;
    padding: 20px;
}

.counter-number {
    font-size: 36px;
    color: var(--wp--preset--color--medium-light-grey);
    padding: .25rem .5rem;
}

.counter-minus i,
.counter-plus i {
    font-size: 18px;
    color: var(--wp--preset--color--medium-light-grey);
}

.select-area.item-selected .counter-number {
    color: var(--wp--preset--color--medium-green);
}

.select-area.item-selected .counter-minus i,
.select-area.item-selected .counter-plus i {
    color: var(--wp--preset--color--black);
}

.select-area.item-selected .counter-minus i:hover,
.select-area.item-selected .counter-plus i:hover {   
    color: var(--wp--preset--color--medium-grey);
}

.select-group-textarea.is-hidden {
    display: none;
}

.select-group-textarea {
    box-sizing: border-box;
    margin-bottom: 1rem;
    flex-basis: 48%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 220px;
    padding: 8px 8px 0px;
    border: 1px solid var(--wp--preset--color--logo-systems-grey);
}

.select-group-textarea h3 {
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    padding: 0px 5px 5px;
    font-size: var(--wp--preset--font-size--medium); 
}

.select-group-textarea h3 span.comments-info {
    font-family: var(--wp--preset--font-family--roboto) !important;
    font-size: var(--wp--preset--font-size--x-small) !important;  
}

.select-group-textarea .mps-form-group {
    margin-top: 5px;
}

.select-group-textarea .mps-form-group textarea {
    box-sizing: border-box;
    width: 99%;        
    padding: 10px 8px;
    margin-bottom: 0px;
    resize: none;
}

.select-group-textarea .mps-form-group textarea:focus {
    outline: none !important;
    border:1px solid var(--wp--preset--color--pale-grey);
    box-shadow: 0 0 5px var(--wp--preset--color--pale-grey);
  }

/* desktop 801 on up */
.wp-block-basebuilder-builder-page > .acf-innerblocks-container {
    max-width: 90vw !important;
    margin-left: auto !important;
    margin-right: auto !important;  
}

/* desktop 1701 on up */
.wp-block-basebuilder-builder-sections > .acf-innerblocks-container {
    max-width: var(--wp--style--global--content-size) !important; /* 60vw */
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 1441px) and (max-width: 1700px){
    .wp-block-basebuilder-builder-page > .acf-innerblocks-container #select-base-system .wp-block-columns,
    .wp-block-basebuilder-builder-page > .acf-innerblocks-container .base-system-header,
    .wp-block-basebuilder-builder-sections > .acf-innerblocks-container,
    .preview-button-bar,
    .preview-container,
    .builder-submit-modal {
        max-width: 72vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (min-width: 1100px) and (max-width: 1440px) {
    .wp-block-basebuilder-builder-page > .acf-innerblocks-container #select-base-system .wp-block-columns,
    .wp-block-basebuilder-builder-page > .acf-innerblocks-container .base-system-header,
    .wp-block-basebuilder-builder-sections > .acf-innerblocks-container,
    .preview-button-bar,
    .preview-container,
    .builder-submit-modal {
        max-width: 85vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (min-width: 801px) and (max-width: 1099px) {
    .wp-block-basebuilder-builder-page > .acf-innerblocks-container #select-base-system .wp-block-columns,
    .wp-block-basebuilder-builder-page > .acf-innerblocks-container .base-system-header,
    .wp-block-basebuilder-builder-sections > .acf-innerblocks-container,
    .preview-button-bar,
    .preview-container,
    .builder-submit-modal {
        max-width: 87vw !important;        
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .select-item.is-displayed,
    .select-group-textarea {
        min-height: 160px;
        max-height: 198px;
    }

    .select-area {
        margin-top: 50px;
        width: 60px;
        height: 60px;
    }
    
    .select-check i {
        font-size: 30px;
        color: var(--wp--preset--color--medium-light-grey);
    }

    .select-counter {          
        width: 54px;
        padding: 20px;
    }

    .counter-minus i,
    .counter-plus i {
        font-size: 12px;
    }

    .counter-number {
        font-size: 24px;
        padding: .125rem .25rem;
    }

    .item-image {
        margin-top: 0px;
    }

    .item-image img {
        width:240px;
        height: 160px;
    }

    .select-group-textarea .mps-form-group {
        margin-top: 0px;
    }

    .select-group-textarea .mps-form-group textarea {
        box-sizing: border-box;
        width: 99%;        
        padding: 5px 8px 0px;
        margin-bottom: 0px;
        resize: none;
    }
}

/*check box in right*/
@media (max-width: 800px) {
    .item-display-area {
        position: relative;
        flex-basis: 100%;
        display: flex;
        flex-direction: column;        
        justify-content: flex-start;
    }

    .item-select-box {
        flex-direction: row;        
        flex-basis: 100%;
        justify-content: space-between;
        align-items: flex-start;        
    }
    
    .select-area {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 100;
        margin-top: 0px;
        margin-left: 0px;
        box-sizing: border-box;    
        width: 60px;
        height: 60px;
    }
    
    .select-check i {
        font-size: 24px;
    }

    .select-counter {           
        width: 54px;
        padding: 20px;
    }
    
    .counter-number {
        font-size: 24px;
        padding: .125rem .25rem;
    }
    
    .counter-minus i,
    .counter-plus i {
        font-size: 12px;
    }
}

@media (min-width: 660px) and (max-width: 800px) {    
    .wp-block-basebuilder-builder-page > .acf-innerblocks-container #select-base-system .wp-block-columns,
    .wp-block-basebuilder-builder-page > .acf-innerblocks-container .base-system-header,
    .wp-block-basebuilder-builder-sections > .acf-innerblocks-container,
    .preview-button-bar,
    .preview-container,
    .builder-submit-modal {
        max-width: 90vw !important;        
        margin-left: auto !important;
        margin-right: auto !important;
    }    
    
    #builder-header .wp-block-media-text.is-stacked-on-mobile {
        grid-template-columns: 50% 1fr !important;
    }

    #builder-header .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
        align-self: flex-start;
        grid-column: 1;
        grid-row: 1;
    }

    #builder-header .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
        grid-column: 2;
        grid-row: 1;
        align-self: flex-start;
        padding-left: 5vw;
        padding-right: 5vw;
    }

    #builder-header .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content h2.has-large-font-size {
        font-size: 28px !important;
    }

    .select-item.is-displayed,
    .select-group-textarea {
        min-height: 160px;
        max-height: 210px;
    }
  
    .item-image {
        margin-top: 0px;        
    }

    .item-image img {
        max-width:220px;
        height: 100%;
        object-fit: contain;
        margin-left: 8px;
    }

    .select-group-textarea .mps-form-group {
        margin-top: 0px;
    }

    .select-group-textarea .mps-form-group textarea {
        box-sizing: border-box;
        width: 99%;        
        padding: 5px 8px 10px;
        margin-bottom: 0px;
        resize: none;
    }
 }
 
 @media (max-width: 659px) {
    .wp-block-basebuilder-builder-page > .acf-innerblocks-container #select-base-system .wp-block-columns,
    .wp-block-basebuilder-builder-page > .acf-innerblocks-container .base-system-header,
    .wp-block-basebuilder-builder-sections > .acf-innerblocks-container,
    .preview-button-bar,
    .preview-container,
    .builder-submit-modal {
        max-width: 98vw !important;        
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .select-item.is-displayed,
    .select-group-textarea {        
        min-width: 90vw;
    }
 
    .item-image {
        margin-top: 0px;        
    }

    .item-image img {
        max-width:260px !important;
        height: 100%;
        object-fit: contain;
        margin-left: 8px;
    }
}

@media (min-width: 320px) and (max-width: 359px) {
    .item-image img {
        max-width:240px !important;
        height: 100%;
        object-fit: contain;
        margin-left: 8px;
    }
}

@media (max-width: 319px) {
    .item-image img {
        max-width:180px !important;
        height: 100%;
        object-fit: contain;
        margin-left: 8px;
    }

    .select-area {
        position: absolute;
        top: 20px;
        right: 10px;
        z-index: 100;
        margin-top: 0px;
        margin-left: 0px;
        box-sizing: border-box;    
        width: 58px;
        height: 58px;
    }
}