/* 
    #############################################
    #   Simple Pop Up Window v1.00              #
    #       By Mark Foyster                     #
    #############################################

    For usage instructions, please refer to README.md


Set up your preferred colours, sizes etc using the custom properties below  

*/
:root{
    /* COLOURS */
    --popUpBackgroundColour: whitesmoke; 
    --popUpBoxShadowColour: rgb(141, 139, 139); /* Best to set this a darker tone of the background colour */
    --popUpTitleColour:red;
    --popUpBorderColour: mediumblue;
    
    /* SIZES */
    --popUpSize: 90%; /*This is the size of the entire popup relative to screen*/
    --popUpTitleFontSize: 1.5rem;
}

@keyframes popUpFadeIn 
{
    from { 
        visibility: hidden;
        opacity: 0;
    }
    to { 
        visibility: visible;
        opacity: 1;
    }
}

@keyframes popUpFadeOut 
{
    from { 
        visibility: visible;
        opacity: 1;
    }
    to { 
        visibility: hidden;
        opacity: 0;
    }
}

#cwCloseBtn{
    position:absolute;
	right: 10px;
	top: 10px;
    /* padding: 1vw;*/
	z-index: 4; 
}

.cwPopUp{
	position: fixed;
	width: var(--popUpSize);
	height: var(--popUpSize);
	left: calc( (100% - var(--popUpSize))/2);
	top: calc( (100% - var(--popUpSize))/2);
	background-color: var(--popUpBackgroundColour);
	border-radius: 25px;
	border: 3px solid var(--popUpBorderColour);
	padding: 5px;
    box-shadow: 7px 7px 3px 3px var(--popUpBoxShadowColour); 
	z-index: 3;
    overflow: hidden;
}
.popUpFadeIn{
    animation: popUpFadeIn 0.5s ease-in-out;
    visibility: visible;
}

.popUpFadeOut{
    animation: popUpFadeOut 0.5s ease-in-out;
    visibility: hidden;
}

.popUpTitle, .popUp2Title{
    color: var(--popUpTitleColour);
    text-align: center;
    font-size: var(--popUpTitleFontSize);
    
}

.contactTitle{
    font-size: 1rem;
}


.popUpTitleContainer {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   width: var(--popUpSize);
   text-align: center;
}

.stopScrolling{
	overflow: hidden;
}

.popupInnerScrollable{
    overflow-y:scroll;
    max-height: 100%;
}

.contactForm{
    text-align: center;
    background-color: #dddddd;
}

#reviewFormData{
    text-align: center;
    background-color: #dddddd;
}

#contactMessage{
    height: 15em;
    width: 25em;
}

.msgDataType{
    color:blue;
}

#msgSubject{
    display: none;
}

@media (min-width: 900px) {
    #contactMessage{
        height: 10em;
        width: 60em;
    }
    .contactTitle{
        font-size: 2rem;
    }

}