.iform {
    display: none;
    position: absolute;
    /*left: 30%;*/
    /*right: 30%;*/
    top: 160px;

    border-radius: var(--spacing-10);
    box-shadow: var(--shadow-popup);
    z-index: 2000;
}

.iform > div {
    border-left: 1px solid var(--color-window-border-dk);
    border-right: 1px solid var(--color-window-border-dk);
}


/*#############################################################################
####    Header    ###########################################################*/

.iform > div:first-child {
    background-color: var(--color-control);
    border-top-left-radius: var(--spacing-10);
    border-top-right-radius: var(--spacing-10);
    border-top: 1px solid var(--color-window-border-dk);
}
/* added not(.disableHeader) for shonetic.com */
.iform:not(.disableHeader) > div:first-child {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.iform.headerPrimary > div:first-child {
    background-color: var(--color-primary);
    color: var(--color-primary-text);
}
.iform.headerDark > div:first-child {
    background-color: var(--color-control-dk);
}

/* the header title/label div; added not(.disableHeader) for shonetic.com */
.iform:not(.disableHeader) > div:first-child > div:first-child {
    font-weight: bold;
    flex-grow: 100;
    flex-shrink: 100;
    overflow: hidden;
    color: var(--color-window-text);
    padding-left: var(--spacing-20);
    padding-right: var(--spacing-20);
    padding-top: var(--spacing-15);
    padding-bottom: var(--spacing-15);
}

/* div wrapper for close button */
/* added not(.disableHeader) for shonetic.com */
.iform:not(.disableHeader) > div:first-child > div:last-child {
    padding: var(--spacing-10);
}
.iform > div:first-child > div:last-child > .btn {
    padding-left: var(--spacing-15);
    padding-right: var(--spacing-15);
}

/*#############################################################################
####    Body    #############################################################*/

.iform:not(.disableHeader) > div:nth-child(2){
    background-color: var(--color-window);
    color: var(--color-window-text);
}
.iform:not(.disableHeader).pad > div:nth-child(2) {
    padding-top: var(--spacing-20);
    padding-left: var(--spacing-20);
    padding-right: var(--spacing-20);
    padding-bottom: 0px;
}
.iform.disableFooter.pad > div:nth-child(2){
    padding-bottom: var(--spacing-20);
}
.iform:not(.disableHeader).pad40 > div:nth-child(2) {
    padding-top: var(--spacing-40);
    padding-left: var(--spacing-40);
    padding-right: var(--spacing-40);
    padding-bottom: 0px;
}
.iform.disableFooter.pad40 > div:nth-child(2){
    padding-bottom: var(--spacing-40);
}


.iform.disableHeader > div:nth-child(1){
    background-color: var(--color-window);
    color: var(--color-window-text);
}
.iform.disableHeader.pad > div:nth-child(1) {
    padding: var(--spacing-20);
}
/*#############################################################################
####    Footer (or body if no footer)   ######################################*/

.iform > div:last-child {
    border-bottom-left-radius: var(--spacing-10);
    border-bottom-right-radius: var(--spacing-10);
    border-bottom: 1px solid var(--color-window-border-dk);
    background-color: var(--color-window);
}
.iform.pad > div:nth-child(3){
    padding: var(--spacing-20);
}
.iform.pad40 > div:nth-child(3){
    padding: var(--spacing-40);
    padding-top: var(--spacing-20);
}
.iform.disableHeader > div:nth-child(3) {
    padding-top: 0;
}

/*#############################################################################
####    Widths    ###########################################################*/
.iform.width10 {
    left: 10%;
    right: 10%;
}
.iform.width20 {
    left: 20%;
    right: 20%;
}

.iform.width30 {
    left: 30%;
    right: 30%;
}

.iform.width40 {
    left: 40%;
    right: 40%;
}

.iform.widthAuto {
    width: max-content;
    /*left: 50%;*/
    /*transform: translate(calc(-50% + 0.1px), 0);*/
}

.iform.minWidth500 {
    min-width: 500px;
}
.iform.minWidth600 {
    min-width: 600px;
}
.iform.minWidth700 {
    min-width: 700px;
}

.iform.width400px {
    right:auto;
    width: max-content;
    min-width: 400px;
    max-width: 400px;
}

.iform.width500px {
    right:auto;
    width: 500px;
    min-width: 500px;
    max-width: 500px;
}

/*#############################################################################
####    Responsive Design   #################################################*/
/*@media (max-height: 600px) {*/
/*    .iform {*/
/*        top: 0px;*/
/*        max-height: 100%;*/
/*    }*/
/*}*/
/*@media (min-height: 600px) {*/
/*    .iform {*/
/*        top: 85px;*/
/*        max-height: calc(100vh - 85px - 80px);*/
/*    }*/
/*}*/
@media (max-width: 900px) {
    .iform {
        top: 0 !important;
        /*bottom: 0px;*/
        left: 0;
        right: 0;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        border-left: none;
        border-right: none;
        border-radius: 0;
        overflow-y: auto;
        height: 100vh;
    }
    .iform > div  {
        border-radius: 0 !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
    }
    .iform > div:first-child > div:last-child {
        padding: var(--spacing-5);
    }
    .iform > div:first-child > div:last-child > .btn {
        padding: var(--spacing-5);
        padding-left: var(--spacing-15);
        padding-right: var(--spacing-15);
    }

    .iform.widthAuto {
        width: 100%;
    }

    .iform.width20 {
        left: 0;
        right: 0;
        width: 100%;
    }
    .iform.width30 {
        left: 0;
        right: 0;
        width: 100%;
    }
    .iform.width40 {
        left: 0;
        right: 0;
        width: 100%;
    }
    .iform.minWidth500 {
        min-width: 0px;
    }
    .iform.minWidth600 {
        min-width: 0px;
    }
    .iform.minWidth700 {
        min-width: 0px;
    }
}