@charset "utf-8";
/* CSS Document */

/* Modal Overlay Styles */
.integrated-modal-overlay, .account-modal, .about-modal, .contact-modal, .file-viewer-modal, .mobile-share-modal-overlay {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.integrated-modal-overlay.closing, .account-modal.closing, .about-modal.closing, .contact-modal.closing, .file-viewer-modal.closing, .mobile-share-modal-overlay.closing {
  opacity: 0;
  transform: scale(0) rotate(5deg);
}



/* PORTRAIT MOBILE (up to 1099px wide) */
@media only screen and (orientation: portrait) and (max-width: 1099px) {

.mobile-close-btn /*share*/, .diary-close-btn, .worry-close-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    font-size: 35px;
    font-weight: bold;
    color: #D5FF4F;
    cursor: pointer;
    z-index: 1002;
    background: none;
    border: none;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.50);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    -webkit-tap-highlight-color: transparent; /* ADD THIS */
    -webkit-touch-callout: none; /* ADD THIS */
    user-select: none; /* ADD THIS */
}
	
}

/* LANDSCAPE MOBILE/TABLET (480px to 1099px wide) */
@media only screen and (min-width: 480px) and (orientation: landscape) and (max-width: 1099px) {
	
.mobile-close-btn /*share*/, .diary-close-btn, .worry-close-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    font-size: 35px;
    font-weight: bold;
    color: #D5FF4F;
    cursor: pointer;
    z-index: 1002;
    background: none;
    border: none;
	/*circle*/
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.50);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;	
}
	
}

/* DESKTOP (1100px and wider) */
@media only screen and (min-width: 1100px) {

.diary-close-btn, .worry-close-btn {
    position: fixed;
    top: 5vh;
    right: 5vw;
    font-size: 35px;
    font-weight: bold;
    color: #D5FF4F;
    cursor: pointer;
    z-index: 1002;
    background: none;
    border: none;
	/*circle*/
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.50);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;	
}	

}