#createClipModal .modal-body {
   padding-bottom: 0;
}

#createClipModal.modal {
   max-height: calc(100vh - 4rem - (100vw * .5625) - 0rem);
   bottom: 0;
}

#createClipModal .modal-footer {
   position: sticky;
   bottom: 0;
   background: var(--base-01);
   z-index: 2;
   box-shadow: 0 -2px 16px 0px #00000029;
}

#createClipModal .modal-body #clip-name,
#clip-description {
   margin-bottom: .5rem;
   border: 1px solid var(--border-color);
   border-radius: .25rem;
   color: var(--base-content);
   width: 100%;
   padding: .25rem .5rem;
   font-size: 14px;
resize: none;
}

.required-note {
   color: var(--base-mute);
   font-style: italic;
   margin-left: auto;
}

#clip-name::-webkit-input-placeholder,
#clip-description::-webkit-input-placeholder {
   color: var(--base-mute);
   line-height: 1.3;
}

/* Time Inputs */
.time-inputs-container {
   display: flex;
   gap: .5rem;
   justify-content: center;
margin:0;
   /* margin-bottom: 1rem; */
}

.time-inputs {
   display: flex;
   flex-direction: column;
   white-space: normal;
}

.time-inputs:first-of-type {
   align-items: flex-end;
}

.time-inputs:last-of-type {
   align-items: flex-start;
}

.time-inputs:first-of-type label {
   justify-content: flex-end;
}

#createClipModal label {
   padding: 0 !important;
   border: none;
   color: var(--base-content);
   font-size: var(--text-sm);
   cursor: default;
   text-wrap: nowrap;
}

#createClipModal label:hover {
   background-color: unset;
}

.time-inputs input {
   margin-bottom: .5rem;
   border: 1px solid var(--border-color);
   border-radius: .25rem;
   color: var(--base-content);
}


#start-time,
#end-time {
   width: 100px;
   padding: 5px;
   font-size: 14px;
   text-align: center;
}

.time-dash {
   position: relative;
   top: 35px;
}

.transcript-preview {
   background-color: #F3F1F2;
   font-size: var(--text-xs);
   color: var(--base-mute);
   border-radius: .25rem;

   padding: 0.125rem 0.25rem;
}

.transcript-preview p {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   line-height: 1.3;
}

.transcript-preview strong {
   font-weight: 700;
}

.timeline-container {
   width: 100%;
   max-width: 100%;
   overflow-x: hidden;
   /* Allows horizontal scrolling */
   position: relative;
   cursor: grab;
   /* Change the cursor to indicate dragging */
   user-select: none;
   /* Prevent text selection while dragging */
   white-space: nowrap;
   /* Prevent line breaks in the timeline */
   padding: 0 2rem 1rem 2rem;
   margin: 0 0 0.3rem 0; /* -1.5rem; */
   scroll-behavior: smooth;
}


.timeline {
   display: flex;
   flex-direction: row;
   position: relative;
   margin-top: 10px;
   padding: 0;
   z-index: 1;
   width: 100%;
   /* Will be set dynamically by JS */
background-color: lightgray;
border-radius:0.5rem;
   height: 60px;
}

.thumbnail {
   width: 120px;
   height: 60px;
   background-color: lightgray;
   text-align: center;
   display: inline-block;
   position: relative
}

.thumbnail:nth-of-type(1) {
   border-top-left-radius: .5rem;
   border-bottom-left-radius: .5rem;
}

.thumbnail:nth-last-of-type(1) {
   border-top-right-radius: .5rem;
   border-bottom-right-radius: .5rem;
}

.handles {
   position: absolute;
   top: -10px;
   width: 100%;
}

.handle {
   width: 1.5rem;
   height: 5rem;
   top: 1.05rem;
   background-color: var(--primary);
   cursor: pointer;
   position: absolute;
   z-index: 2;
   display: flex;
   justify-content: center;
   align-items: center;
}

.handle-marker {
   display: block;
   width: .2rem;
   height: 1.5rem;
   background-color: white;
   border-radius: .2rem;
}

.handle.start {
   left: 0;
   border-top-left-radius: 1rem;
   border-bottom-left-radius: 1rem;
}

.handle.end {
   left: 240px;
   /* Set to 2 minutes, considering 120px per minute */
   border-top-right-radius: 1rem;
   border-bottom-right-radius: 1rem;
}

.overlay-start,
.overlay-end {
   position: absolute;
   background: rgba(255, 255, 255, 0.62);
   width: auto;
   height: 80px;
   display: block;
   z-index: 1;
}

.overlay-start {
   left: 0px;
}

.overlay-end {
   right: 0px;
   margin-left: 1rem;
}

.handle-middle {
   position: absolute;
   height: 5rem;
   background-color: var(--primary);
   margin-left: 1rem;
   top: 1.05rem;
   border-radius: .5rem;
}

.middle-top-left,
.middle-top-right,
.middle-bottom-right,
.middle-bottom-left {
   z-index: 1;
   position: absolute;
}

.middle-top-left {
   top: 5px;
   right: -11px;
}

.middle-top-right {
   top: 5px;
   left: -11px;
   transform: rotate(90deg)
}

.middle-bottom-right {
   bottom: 4px;
   left: -11px;
   transform: rotate(180deg)
}

.middle-bottom-left {
   bottom: 4px;
   right: -11px;
   transform: rotate(270deg)
}

.timeline-indicator {
display:none;
   width: 100%;
   height: 2rem;
   background-color: #FBF9FA;
   margin-top: 1rem;
   border: .75px solid #CDD0D1;
   position: relative;
}

.timeline-marker {
   position: absolute;
   top: 7px;
   width: 120px;
   text-align: center;
   font-size: 14px;
   transform: translateX(-28px);
   color: var(--base-mute);
   font-size: var(--text-xs);
}

.timeline-line {
   position: absolute;
   height: .625rem;
   width: 1.5px;
   background-color: #CDD0D1;
   z-index: 1;
   border-radius: 2px;
   top: 11px;
   transform: translateX(32px);
}

.clip-container {
   background: rgb(111, 141, 164);
   background: linear-gradient(135deg, rgba(0, 29, 52, .5) 0%, rgba(0, 29, 52, .5) 100%);
   overflow: hidden;
   border-radius: .5rem;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.33);
   border-left: .5rem solid var(--dark-01);
}
.clip-container:not(.expand) .fa-angle-up {
       transform: rotateX(180deg);
}
.clip-container .clip-header {
   padding: .5rem 1.0rem;
   display: flex;
   position: relative;
   gap: 1rem;
   align-items: center;
   position: relative;
}

.clip-container .clip-icon-container {
   background-color: var(--dark-01);
   height: 2rem;
   width: 2rem;
   margin: auto 0;
   border-radius: 100%;
   display: flex;
   align-items: center;
   flex-shrink: 0;
   justify-content: center;
}

.clip-container .clip-header h2 {
   line-height: 1.3;
   font-size: var(--text-lg);
   font-weight: 500;
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   flex-grow: 1;
}
.clip-container .header-options-container {
   display: flex;
   gap: .25rem;
}
.clip-container .collapsible {
   display: flex;
   position: relative;
}

.clip-container .collapsible .collapsible-title,
.clip-container .toggle-clip-btn {
   height: 2rem;
   width: 2rem;
   margin: auto 0;
   border-radius: 100%;
   display: flex;
   align-items: center;
   flex-shrink: 0;
   justify-content: center;
   background-color:rgba(0, 29, 52, .33);
   align-items: center;
   font-size: var(--text-sm);
   color: var(--dark-content);
   border: none;
}
.clip-container .collapsible .collapsible-title:hover,
.clip-container .toggle-clip-btn:hover {
   background-color:rgba(0, 29, 52, .5);
}
.clip-container .collapsible-content {
   position: absolute;
   right: 0;
   z-index: 100;
   visibility: hidden;
   opacity: 0;
   display: flex;
   flex-direction: column;
   background-color: var(--base-01);
   min-width: 160px;
   border-radius: 0.5rem;
   padding: 0;
   text-wrap: nowrap;
   border: 1px solid var(--primary);
   box-shadow: 0px 0 50px 500px rgb(0 53 95 / 5%);
   overflow: hidden;
   transition: var(--three);
   top: 2.25rem;
}
.clip-container .collapsible.active .collapsible-content {
   visibility: visible;
   opacity: 1;
   transform: scale(1) translateY(0);
   transition: var(--three);
}
.clip-container .collapsible ul[role='list'],
.clip-container .collapsible ol[role='list'] {
   list-style: none;
   list-style-type: none;
}
.clip-container .collapsible-content button {
   padding: .75rem 1rem;
   white-space: nowrap;
   text-decoration: none;
   display: flex;
   gap: .5rem;
   align-items: center;
   background-color: transparent;
   color: var(--primary);
   font-weight: 500;
   font-size: var(--text-sm);
   width: 100%;
   border: none;
}
.clip-container .collapsible-content button:hover {
   background-color: var(--base-02);
}
.clip-container .clip-body {
   padding: .5rem 1.0rem;
   font-size: var(--text-base);
   border-top: 1px solid rgb(0, 29, 52);
}
.clip-container .clip-footer {
   padding: 0rem 1.0rem .75rem 1.0rem;
   font-size: var(--text-base);
   display: flex;
   gap: .5rem;
   justify-content: flex-end;
}
.clip-container .clip-footer .clip-control-button{
   height: 2.25rem;
   color: var(--dark-content);
   border-radius: .25rem;
   border: none;
   padding: 0 1.0rem;
   background-color: rgb(208, 229, 237, 0);
   text-decoration:none;
}
.clip-container .clip-footer .clip-control-button:hover {
   background-color: rgb(208, 229, 237, 0.25);
}

.clip-control-button i {
   margin-right:5px;
}

.clip-container .clip-body-footer-container {
   transition: all 0.2s ease-in-out;
}

.expand .clip-body-footer-container {
    max-height: 1000px;
   transition: all 0.2s ease-in-out;
}

.clip-container:not(.expand) .clip-body-footer-container {
    max-height: 0;
   transition: all 0.2s ease-in-out;
}


@media only screen and (min-width: 360px) {
   /* CSS rules */
}

@media only screen and (min-width: 500px) {
   /* CSS rules */
}

@media only screen and (min-width: 640px) {
   .header-media-container.active {
      margin: .5rem 6rem 0rem 6rem !important;
   }

   #createClipModal.modal {
      margin: 0;
      max-height: calc(100vh - ((100vw - 12rem - 2.5rem) * .5625) - 1.5rem);
   }

   body.fixed:has(#createClipModal.modal.active) {
      position: relative;
      top: -5rem;
   }
}

@media only screen and (min-width: 768px) {
   body.fixed:has(#createClipModal.modal.active) {
      top: 0;
   }

   .header-media-container.active {
      margin: .5rem 4rem 0rem 4rem !important;
   }

   .handle-middle {
      top: 14px;
      height: 4.5rem;
   }

   .handle {
      top: 14px;
      height: 4.5rem;
   }
}

@media only screen and (min-width: 1024px) {
   .header-media-container.active {
      margin: 0 !important;
      width: 100%;
      display: flex;
      gap: 1rem;
   }

   .header-media-container.active .cmpl-iframe-container {
      width: 60%;
      height: fit-content;
   }

   #createClipModal.modal {
      margin: unset;
      max-height: unset;
      position: relative;
      width: unset;
      border-radius: .5rem;
      height: 0;
      width: calc(40% - 1rem);
   }
   #createClipModal .modal-footer {
      padding-bottom: .75rem;
      width: 100%;
   }
   .clip-container .clip-header,
   .clip-container .clip-body {
      padding: .75rem 1.5rem;
   }
   .clip-container .clip-footer {
      padding: .75rem 1.5rem 1.5rem 1.5rem;
   }
}

@media only screen and (min-width: 1280px) {
   .header-media-container.active .cmpl-iframe-container {
      width: calc(100% - 25rem);
        position: relative;
        height: 0;
        overflow: hidden;
        padding-top: 56.25%;
   }

   #createClipModal.modal {
      width: 24rem;
   }

   .header-media-container.active .cmpl_iframe_div.cmpl_16x9.cmpl_resize_ready_v2.cmpl_no_transcript {
      position: absolute !important;
       top: 0;
       left: 0;
   }
   form#clipSaveForm {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
}

@media only screen and (min-width: 1536px) {
   /* CSS rules */
}

.modal-footer #btnDeleteClip
{
    background-color: red !important;
    border-color: red !important;
    display: inline;
color:white;
}

.modal-footer #btnDeleteClip i{
margin-right:5px;
}

.capturetime{
cursor:pointer;
}

.capturetime:hover {
transform:scale(1.2);
}