/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* Card Block module style overrides for ONA JUDGE MURAL page (hs-content-id-212526389853) */
#hs_cos_wrapper_widget_1778257275502 {
  display: block;
  text-align: left;
  #card-block-mobile-banner {
    display: none;
    @media screen and (width <= 460px) { 
      display: block;
    }
  }
  .card-block {
    .card-block-bg {
      .card-block-first {
        width: 100%;
      }
      .card-block-second {
        width: 0;
      }
    }
    .card-block-container {
      .card-block-wrapper {
        .card-block-item {
          max-width: 420px;
          min-height: 600px;
          padding: 0;
          border-bottom: 30px solid rgb(0 25 77);
          @media screen and (width <= 460px) { 
            width: 100%;
            max-width: 460px;
          }
          .card-block-arrows {
            display: inherit;
            .splide__arrow {
              height: 24px;
              width: 24px;
              top: 102%;
            }
            .splide__arrow--prev {
              left: 10px;
              background: url("https://47559073.fs1.hubspotusercontent-na1.net/hubfs/47559073/assets/graphics/carousel-prev-btn.svg");
              /*content: "https://47559073.fs1.hubspotusercontent-na1.net/hubfs/47559073/assets/graphics/carousel-prev-btn.svg"*/
              svg {
                display: none;
              }
            }
            .splide__arrow--next {
              right: 10px;
              background: url("https://47559073.fs1.hubspotusercontent-na1.net/hubfs/47559073/assets/graphics/carousel-next-btn.svg");
              /*content: "https://47559073.fs1.hubspotusercontent-na1.net/hubfs/47559073/assets/graphics/carousel-next-btn.svg"*/
              svg {
                display: none;
              }
            }
          }
          .card-block-list {
            .card-block-slide {
              .card-block-body {
                .card-block-logo {
                  width: 100%;
                  margin: 0;
                  img {
                    width: 100%;
                    height: auto;
                    object-fit: contain;
                    object-position: center;
                  }
                }
                .card-block-description {
                  padding: 10px 28px 0px 28px;
                  margin: 0;
                  min-height: 400px;
                  background: rgba(85, 105, 149, 1);
                  /* Card Block Body Text Styles - using Nunito Sans as a free replacement for Avenir */
                  .card-block-description-inner {
                    /* Inner container for card block description... duh. */
                    .slide-body-heading {
                      color: #f2e8da;
                      line-height: 150%;
                      font-weight: normal; 
                      font-size: 32px;
                    }
                    .slide-body-desc1 {
                      color: #f2e8da;
                      line-height: 150%;
                      font-weight: normal; 
                      font-size: 19px;
                    }
                    .video-info {
                      display: grid;
                      grid-template-columns: 60% 40%;
                      .slide-body-desc2 {
                        color: #f2e8da;
                        line-height: 150%;
                        font-weight: normal; 
                        font-size: 16px;
                        &.video-button-container {
                          margin-bottom: 10px;
                        }
                        &.share-button-container {
                          display: flex;
                          margin-bottom: 15px;
                          padding-left: 20px;
                          /*max-width: 110px;*/
                          img.share-postcards-icon {
                            height: auto;
                            max-width: 100%;
                            width: auto;
                            object-fit: contain;
                          }
                          .share-postcards-link {
                            align-content: center;
                            /*color: #E0B384;
                            text-decoration: underline;*/
                            font-size: 15px;
                            font-weight: 800;
                            padding: 0px 0 5px 15px;
                            width: 120px;
                          }
                        }
                        .desc-left-col {
                          padding: 0 6px 0 0;
                        }
                        .desc-right-col {
                          padding: 0 0 0 6px;
                        }
                      }
                    }
                }
              }
                .card-block-btn {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
  }
}

/* Modal Styles for YoutTube embedded video */
/* The Main Modal Container */
#custom-modal {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

/* The Modal (background) */
.custom-modal-overlay {
  display: none; /* Hidden by default */
  position: absolute; /* Stay in place */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  z-index: 1; /* bottom layer within the main modal container */
}

/* Modal Content Box */
#custom-modal-content {
  display: none; /* Hidden by default */
  background: rgb(3 25 74);
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px 40px;
  border: 1px solid #888;
  width: inherit;
  z-index: 2; /* Top layer within the main modal container */
  #iframe-container{
    display: none;
    position: relative;
    width: 100%;
    object-fit: contain;
    aspect-ratio: 16 / 9;
    z-index: 9; /* Make sure video is top layer in content container */
    iframe.video-player {
      display: none;
      object-fit: contain;
      width: 100%;
      height: 100%;
      border: 0;
    }
  }
}
@media screen and (width <= 640px) {
  #custom-modal-content {
    /*width: 100%;*/
  }
}

/* The Close Button */
.custom-modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: relative;
  z-index: 10;
}

.custom-modal-close:hover,
.custom-modal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/*
 * Styles for Postcard Sharing Carousel 
*/
#share-modal {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  justify-content: center;
  align-items: center;
  z-index: 999;
  
  #share-modal-overlay {
    display: none; /* Hidden by default */
    position: absolute; /* Stay in place */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0 25 77 / 50%); /* Dark Blue w/ opacity */
    z-index: 1; /* bottom layer within the main modal container */ 
  }

  .share-modal-content {
    position: relative;
    display: block; /* Hidden by default */
    background: rgb(3 25 74);
    margin: 15% auto; /* 15% from the top and centered */
    /*padding: 20px 40px;*/
    padding: 0;
    border: 1px solid #888;
    width: inherit;
    max-width: 420px;
    z-index: 2; /* Top layer within the main modal container */
    
    #share-header {
      display: grid;
      grid-auto-flow: column;
      padding: 5px;
      .share-title {
        color: white;
        text-align: right;
        padding: 5px;
      }
      .share-modal-close {
        padding: 5px;
        color: #aaa;
        font-size: 28px;
        font-weight: bold;
        position: relative;
        z-index: 10;
      }
      .share-modal-close:hover,
      .share-modal-close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
      }
    }
    /* Tiny Slider Outer styles */
    .tns-outer {
      .tns-nav {
        margin-top: 20px;
        margin-bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        button {
          outline: 2px solid #e3b382;
          outline-offset: 2px;
          border-radius: 100%;
          opacity: 1;
          background: transparent;
          width: 8px;
          height: 8px;
          &.tns-nav-active {
            background-color: #e3b382;
          }
        }
      }
      /* Tiny Slider Inner styles */
      .tns-inner {
        .main-carousel {
          .share-slide {
            .share-slide-body {
              .postcard-thumbnail {
                width: 80%;
                margin: auto;
                img {
                  display: block;
                  width: 100%;
                  height: 100%;
                  object-fit: contain;
                  user-drag: none;
                  -webkit-user-drag: none;
                  -moz-user-select: none;
                  border-radius: 10px;
                }
              }
              .share-button {
                display: flex;
                flex-direction: column;
                padding: 10px;
                button.share-button-tap {
                  padding: 12px;
                  width: 140px;
                  border-radius: 5px;
                  color: black;
                  display: block;
                  margin: auto;
                  position: relative;
                  background: #e3b382;
                  font-weight: 800;
                }
                .share-copy-url {
                  padding: 5px;
                  color: #E0B384;
                }
                .share-copy-url:hover, 
                .share-copy-url:focus {
                  color: white;
                  cursor: pointer;
                }
                }
              }
            }
          }
        }    
      }
    #custom_controlsContainer {
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      top: -20px;
      padding: 0 5px;
      .tinyslider-btn {
        background: #e3b382;
        padding: 6px;
        border-radius: 18px;
        color: black;
        font-size: 12px;
        font-weight: 800;
        text-decoration: none;
    }
  }
} /* END #share-modal */