/*                             
used by vcj_popupMessage javascript

+------------------------------+
|                              |
| +--------------------------+ |
| |                          | |
| |                          | |
| |                          | |
| |                          | |
| +--------------------------+ |
|                              |
|                              |
+------------------------------+

 VcjPopup javascript class

 vcj-features-pop vcj-features-pop-with-iframe vcj-features-content-appearance
  extra_classes (vcj-mailchimp-appearance)
+------------------------------+ 
|                            X | vcj-features-pop-btn
|                              |  if has overlay, vcj-overlay
| +--------------------------+ | iframe
| |  +---------------------+ | | vcj-popup-content 
| |  |                     | | |
| |  |                     | | |
| |  |                     | | |
| |  |                     | | |
| |  |                     | | |
| |  +---------------------+ | |
| |                          | | 
| +--------------------------+ |
+------------------------------+


vcj-features-content-appearance also used by calendar-events with vcj-popup-container

vcj_popupMessage used by Full calender for event view events, ADDS  vcj-calendar-detail-appearance

VcjPopup class is used by mailchimp (Wednesday Update Newsletter) ADDS 'vcj-mailchimp-appearance'
*/

/* css classes for widget popups */

.vcj-features-pop-with-iframe {
  width: 90%;
  display: block;
  max-width: 815px;
  height: 90vh;
}

.vcj-features-pop iframe {
  width: 100%;
  height: 90%;
  border: 2px solid;
  border-radius: 6px;
}

.vcj-features-pop {
  padding: 20px;
  background-color: lightgray;
  color: black;
  opacity: 1;
  font-size: medium;
  border-color: black;
  border-style: solid;
  border-width: 3px;
  border-radius: 8px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  display: none;
}

.vcj-overlay {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
}

.vcj-features-pop-btn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.vcj-features-pop a {
  color: black;
}

.vcj-features-pop h4{
  margin-block-start: 0.6em;
  margin-block-end: 0.6em;
}

.vcj-features-content-appearance {
  background-image: linear-gradient(to right, #ff0000cc, orange, yellow, #32f50f, #6186e4);
  word-wrap: break-word;
}

.vcj-features-content-appearance img {
  width: 100%;
}

.vcj-features-pop-btn:hover {
  color: black;
  font-size: 32px;
}