/* ==========================================================================
   Table of Contents
   ==========================================================================

   1. Variables
   2. Video Item and Placeholder Styles
   3. Play Button Styles
   4. Utility Classes
   ========================================================================== */

/* ==========================================================================
   1. Variables
   ========================================================================== */

   :root {
    --deensimc-white: #ffffff;
    --deensimc-black: #000000;
  }
  
  /* ==========================================================================
     2. Video Item and Placeholder Styles
     ========================================================================== */
  
  .deensimc-video-main .deensimc-marquee .deensimc-video-item {
    display: grid;
    background: var(--deensimc-black);
    place-items: center;
  }
  
  .deensimc-video-item .deensimc-hosted-video {
    height: 170px;
  }
  
  .deensimc-video-item iframe {
    height: 100%;
  }
  
  .deensimc-video-placeholder {
    position: relative;
    height: 175px;
    cursor: pointer;
  }
  
  .deensimc-video-placeholder img {
    width: 100%;
  }
  
  .deensimc-placeholder-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ==========================================================================
     6. Invalid Video URL Styles
     ========================================================================== */
  
     .deensimc-invalid-video-url {
      width: 250px;
      text-align: center;
      vertical-align: center;
      justify-content: center;
      display: flex;
      align-items: center;
      color: var(--deensimc-color-white);
    }  
  
  /* ==========================================================================
     3. Play Button Styles
     ========================================================================== */
  
  .deensimc-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
  }
  
  .deensimc-play-button svg, .deensimc-play-button i {
    width: 80px;
    height: 80px;
    fill: var(--deensimc-white);
    color: var(--deensimc-white);
  }
  
  .deensimc-play-button i {
    position: relative;
  }
  
  .deensimc-play-button i::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  /* ==========================================================================
     4. Utility Classes
     ========================================================================== */
  
  .deensimc-d-none {
    display: none;
  }