/* 
    #############################################
    #   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;
    }
}

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

.popUp{
	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);
    
}

.popUp2Title{
    font-size: 2 rem;
}


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

.stopScrolling{
	overflow: hidden;
}

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