@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&display=swap');
@import url('https://db.onlinewebfonts.com/c/9e8905c9ac3c5e775c39bd300203d834?family=Industry+W00+Demi');
@font-face {
  font-family: 'Manrope-Bold';
  src: url('/fonts/Manrope-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Manrope-ExtraBold';
  src: url('/fonts/Manrope-ExtraBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Manrope-ExtraLight';
  src: url('/fonts/Manrope-ExtraLight.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Manrope-Light';
  src: url('/fonts/Manrope-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Manrope-Medium';
  src: url('/fonts/Manrope-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Manrope-Regular';
  src: url('/fonts/Manrope-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Manrope-SemiBold';
  src: url('/fonts/Manrope-SemiBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
body{
   background-color: #161616;
   overflow: hidden;
      /* Animation settings */
    opacity: 0; /* start invisible */
    animation: fadeIn 0.6s ease-out forwards;
    animation-delay: 0.5s;
}
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

body.modal-active {
   pointer-events: none; /* Disable all clicks */
}
.loading-modal {
   display: none; /* Hidden by default */
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10; /* Make sure it's above other content */
   background-color: rgba(0, 0, 0, 0.615);
   justify-content: center;
   align-items: center;
   color: rgb(253, 0, 0);
   font-size: 1.5em;
   text-align: center;
}

.loading-modal .spinner {
   border: 8px solid #f3f3f3; 
   border-top: 8px solid cyan; 
   border-radius: 50%;
   width: 60px;
   height: 60px;
   animation: spin 1s linear infinite !important;
   margin-bottom: 20px;
   margin-right: 20px;
}

/* Spinning animation */
@keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}
.MainContent {
  display: flex;
  height: 100vh;
  width: 100%;

}
/* SIDE BAR */
.sidebar-template{
   z-index: 2;
   width: 20%;
   height: 100%;
   position: relative;
   background-color: #161616;
   align-content: start;
   border-right: 1px solid rgba(124, 122, 122, 0.552);
   /* border: 2px grey solid; */
}
.sidebar-template .sidebar-content {
    overflow-y: auto;
}
.sidebar-template .sidebar-content .ProjectTitleArea{
   display: flex;
   
}
.sidebar-template .sidebar-content .backBtn{
   position: relative;
   background-color: transparent;
   border: 0px;
   width: 80px;  
   height: 80px;
}

.sidebar-template .sidebar-content .backBtn img {
  width: 100%;
  height: 100%;
  object-fit: contain; 
}
.sidebar-template .sidebar-content .ProjectSelectionArea{
   display: flex;
   flex-direction: column;
   flex: 1;
   padding-right: 3%;
   margin-top: 2%;
}
.sidebar-template .sidebar-content .ProjectFolderName{
   position: relative;
   font-family: "Manrope-Medium";
   font-size: 26px;
   width: 100%;
   height: 20px;
   color: #ffffff;
   z-index: 1;
}
#ProjectFolderName:hover {
    color: #f68f09  ;
}
.sidebar-template .sidebar-content .ProjectFolderGameDesc{
   position: relative;
   font-family: "Manrope-Medium";
   width: 300px;
   font-size: 18px;
   color: #ffffff;
   z-index: 1;
   border-radius: 10px;
   background: transparent;
   display: none;
}
.sidebar-template .sidebar-content .ProjectTitle{
   position: relative;
   font-family: "Manrope-Medium";
   font-size: 14px;
   color: #848484;
   z-index: 1;
   border-radius: 10px;
   background-color: #212121;
   display: block;
   width: 100%;
   height: 25px;
}

.sidebar-template .sidebar-content .ProjectTitle option{
   position: relative;
   font-family: "Manrope-Medium";
   font-size: 17px;
   color: #848484;
   z-index: 1;
}
.sidebar-template .sidebar-content .TimeArea{
   width: 94%;
   margin: 10px;
   height: 35vh;
   position: relative;
   background-color: #212121;
   border-radius: 10px;
}
.sidebar-template .sidebar-content .TimeArea  .itemRunTimeTxt{
   font-size: 16px;
   font-family: "Manrope-Medium";
   color:#848484;
   position: relative;
   z-index: 1;
   width: max-content;
   height: 30px;
   border-radius: 5px;
   text-align: left;
   margin: 0;
   padding-top: 2%;
   padding-left:3% ;
 }
 .sidebar-template .sidebar-content .TimeArea  .itemRunTime{
   font-size: 70px;
   font-family: "Manrope-ExtraBold";
   color:White;
   z-index: 1;
   text-align: center;
   height: 70px;
   margin: 0;
   line-height: 70px;
 }
.TrackingControlArea{
   display: flex;
   justify-content: center;
   position: relative;
   right: 3%;
 }
.sidebar-template .sidebar-content .TimeArea .pauseResumeTrackBtn{
   position: relative;
   font-family: "Manrope-Medium";
   color:White;
   background-color: transparent;
   width: 40px;
   height: 40px;
   border-radius: 5px;
   border: 0px;
   z-index: 1;
   padding: 0;
   opacity: 1;
   display: inline-flex;
}
.sidebar-template .sidebar-content .TimeArea .pauseResumeTrackBtn:disabled{
   opacity: 0.5;
}
.sidebar-template .sidebar-content .TimeArea .pauseResumeTrackBtn img{
   width: 40px;
   height: 40px;
   object-fit: contain; 
}
.sidebar-template .sidebar-content .TimeArea .cancelTrackBtn{
   position: relative;
   display: inline-flex;
   font-family: "Manrope-Medium";
   color:White;
   background-color: transparent;
   width: 40px;
   height: 40px;
   border-radius: 5px;
   border: 0px;
   z-index: 1;
   padding: 0;
   margin-left: 1%;
   margin-right: 2%;
}
.sidebar-template .sidebar-content .TimeArea .cancelTrackBtn:disabled{
   opacity: 0.5;
}
.sidebar-template .sidebar-content .TimeArea .cancelTrackBtn img{
   width: 40px;
   height: 40px;
   object-fit: contain; 
   display: block;   
}
.adddMinusTimeArea{
   margin-right: 2%;
}
.sidebar-template .sidebar-content .TimeArea .addTimeBtn{
   position: relative;
   font-family: "Manrope-Medium";
   color:#848484 ;
   background-color: transparent ;
   width: 20px;
   height: 20px;
   border-radius: 5px;
   border: 0px;
   z-index: 2;
   padding: 0;
   display: block;
}
.sidebar-template .sidebar-content .TimeArea .addTimeBtn:hover{
   background-color:#fff9f999 ;
}
.sidebar-template .sidebar-content .TimeArea .addTimeBtn:disabled{
   opacity: 0.5;
}
.sidebar-template .sidebar-content .TimeArea .minusTimeBtn{
   position: relative;
   display: block;
   font-family: "Manrope-Medium";
   color:#848484 ;
   background-color: transparent ;
   width: 20px;
   height: 20px;
   border-radius: 5px;
   border: 0px;
   z-index: 2;
   padding: 0;
}
.sidebar-template .sidebar-content .TimeArea .minusTimeBtn:hover{
   background-color:#fff9f999 ;
}
.sidebar-template .sidebar-content .TimeArea .minusTimeBtn:disabled{
   opacity: 0.5;
}
.setAddtionalTime{
   display: flex;
}
.sidebar-template .sidebar-content .TimeArea .setAddtionalTime input{
   position: relative;
   display: inline-flex;
   font-family: "Manrope-Medium";
   color:#ffffff ;
   background-color: #51505071;
   border: 0px;
   z-index: 1;
   width: 50px;
   height: 40px;
   font-size: 30px;
   text-align: center;
   margin-right: 3%;
}
.sidebar-template .sidebar-content .TimeArea .setAddtionalTime .span1{
   position: relative;
   color: white;
   font-size: 30px;
   z-index: 2;
   margin-top: -3%;
   margin-right: 3%;
}
.sidebar-template .sidebar-content .TimeArea .setAddtionalTime .span2{
   position: relative;
   color: white;
   font-size: 30px;
   z-index: 2;
   margin-top: -3%;
   margin-right: 3%;
}
.sidebar-template .sidebar-content .TimeArea .setAddtionalTime #hours{
   position: relative;
   border-radius: 5px;
}
.sidebar-template .sidebar-content .TimeArea .setAddtionalTime #minutes{
   position: relative;
   border-radius: 5px;
}
.sidebar-template .sidebar-content .TimeArea .setAddtionalTime #seconds{
   position: relative;
   border-radius: 5px;
}
.sidebar-template .sidebar-content .TimeArea  .currentTime{
    position: relative;
    font-family: "Manrope-ExtraBold";
    font-size: 30px;
    color:White;
    z-index: 1;
   margin-left: 3%;
   margin-bottom: 2%;
 }
.sidebar-template .sidebar-content .TimeArea  .currentTimeTxt{
   font-family: "Manrope-Medium";
   position: relative;
   font-size: 15px;
   color:White;
   z-index: 1;
   display: none;
 }

.sidebar-template .sidebar-content .TimeArea .timezoneSelect{
   font-family: "Manrope-Medium";
   position: relative;
   font-size: 12px;
   color:white;
   z-index: 1;
   background: #474747;
   border: 0px;
   height: 25px;
   border-radius: 5px;
   margin-top: 5%;
   margin-left: 3%;
}

.sidebar-template .sidebar-content .TimeArea .timezoneSelect option{
   color: white;
   border-radius: 10px;
}
.lastTimeSection{
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* top-align both columns */
   width: 100%;
   height: 25%;
}
.underOverTimeArea {
  display: flex;
  flex-direction: column;
   width: 40%;
   margin-top: 0%;
}  
.estTimeArea {
   display: flex;
   flex-direction: column;
   width: 54%;
   padding-right: 2%;
}

.sidebar-template .sidebar-content .TimeArea  .underOverTime{
   position: relative;
   display: block;
   font-family: "Manrope-ExtraBold";
   font-weight: 100;
   font-size: 30px;
   width: 200px;
   z-index: 1;
   line-height: 10px;
   border-radius: 5px;
   margin-left: 8%;
}
.sidebar-template .sidebar-content .TimeArea  .underOverTimeTxt{
   position: relative;
   display: block;
   font-family: "Manrope-Bold";
   font-size: 12px;
   width: 130px;
   color:#848484;
   z-index: 1;
   border-radius: 5px;
   height: 30px;
   line-height: 35px;
   margin-left: 8%;
}
.sidebar-template .sidebar-content .TimeArea  .underOverTimeTxt:hover{
   /* background-color: rgb(190, 113, 113); */
   cursor: pointer;
}
.estTimeTopRow {
   margin-top: 3.5%;
  display: flex;
}
.sidebar-template .sidebar-content .TimeArea  .EstTimeText{
   position: absolute;
   font-family: "Manrope-Medium";
   font-size: 12px;
   color:#848484;
   z-index: 2;
   margin-left: 1.5%;
}

.sidebar-template .sidebar-content .TimeArea  .estTimeRowSelect{
   position: relative;
   font-family: "Manrope-Medium";
   font-size: 12px;
   color:#00de90;
   z-index: 1;
   width: 100%;
   height: 23px;
   background: #474747;
   border: 0px solid rgb(150, 149, 149);
   border-radius: 5px;
   white-space: nowrap;
}


.sidebar-template .sidebar-content .TimeArea  .estTimeRowSelect option{
   font-family: "Manrope-Medium";
   color: black;
   border-radius: 10px;
   padding-left:0% ;
   text-align: left;
   background-color: #636262;
}
.sidebar-template .sidebar-content .TimeArea  .EstTime{
   position: relative;
   font-family: "Manrope-ExtraBold";
   font-size: 28px;
   width: 200px;
   color:yellow;
   z-index: 1;
   line-height: 43px;
}

.sidebar-template .sidebar-content .ImageArea{
   width: 94%;
   margin: 10px;
   height: 25vh;
   position: relative;
   background-color: #212121;
   border-radius: 10px;
   display: flex;
}
.sidebar-template .sidebar-content .ImageArea .refImg{
   width: 95%;
   height: 95%;
   margin: auto;
   display: none;
   aspect-ratio: 16 / 9;
   object-fit: contain;
}
.sidebar-template .sidebar-content .ImageArea .noImageTxt{
   color: white;
   position: relative;
   margin: auto;
   /* display: none; */
}
.ScriptArea{
   width: 94%;
   margin: 10px;
   height: 25vh;
   position: relative;
   background-color: #212121;
   border-radius: 10px;
   display: flex;
   flex-direction: column; 
}
 .ScriptArea .scriptTitle{
   position: relative;
   font-size: 16px;
   color: #666666;
   padding-left: 10px;
   padding-top: 5px;
   width: max-content;
   padding-bottom: 0px;
   margin: 0;
   text-transform: uppercase;
   font-family: "Manrope-Bold";
   font-size: 12px;
}
 .ScriptArea .scriptInput{
   width: 98%;
   height: 90%;
   margin: auto;
   background-color: transparent;
   border: 1px solid rgba(100, 100, 100, 0);
   border-radius: 10px;
   color: white;
   padding-left: 10px;
   overflow-y: scroll;
}
.scriptInput:focus{
   outline:none;  
}
.zoom-controls {
   display: flex;
   gap: 5px;
   position: absolute;   /* make it float above */
   right: 2%;          /* push to right */
   margin-top: 3.5%;
   top: 0;               /* stick at top */
   z-index: 10;
}

.zoom-btn {
   background: #44444492;
   color: white;
   border: none;
   padding: 6px 10px;
   font-size: 18px;
   cursor: pointer;
   transition: background 0.2s;
   height: max-content;
   font-family: "Manrope-ExtraBold";
   border-radius: 10px;
}

.zoom-btn:hover {
    background: #666;
}
.zoom-percentage {
   min-width: 50px;
   text-align: center;
   font-size: 16px;
   color: #fff;
   font-family: "Manrope-ExtraBold";
   padding-top: 5%;
}
/* for the script write mode */
/* .script-view-active {
   position: absolute;
   margin-top: 5%;
   height: 88%;
   width: 76%;
} */
 .script-view-active {
   position: absolute;
   margin-top: 6%;
   height: 88%;
   width: 76%;
   padding-left: 10px;
   padding-right: 10px;
}
.script-view-active-table {
   position: relative;
   margin: 0;
}
/* .script-clone-table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 12px;
   color:white;
   background-color: #2d2d2d;;
   border-radius: 10px;
}
.script-clone-table tr{}
.script-clone-table td, 
.script-clone-table th {
   border: 1px solid #ccc;
   padding: 4px 6px;
   font-size: 13px;
   vertical-align: middle;
   color:white;
   border: 0px;
} */
 .script-label{
   position: relative;
   color: white;
   pointer-events: none;
   left: 0;
   margin-left: 1%;
   color: #484848;
   font-size: 20px;
   width: 100%;
   font-family: "Manrope-Light";
 }
.sidebar-template .sidebar-content .savingTxt{
   color: white;
   margin-left: 4%;
   margin-top: auto;
   opacity: 0;
   transition: opacity 0.5s ease-in-out;
}
.sidebar-template .sidebar-content  .savingTxt.show {
   animation: flashSaving 1s infinite;
    opacity: 1;
    color: greenyellow;
}
@keyframes flashSaving {
    0%   { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
}
.main-area{
   display: flex;
   flex: 1;
   
}
/* TOP SECTION */
.top-section{
   /* 131313 */
   background-color: transparent;  
   position: relative;
   overflow: hidden;
   height: 8%;
   width: 100%;
   z-index: 3;
   padding: 0;
   margin: 0;
}

.top-section .top-section-content {
   display: flex;
   align-items: center;
   position: relative;
   width: 100%;
}

.top-section .top-section-content .bx-arrow-back{
   position:relative;
   top: 3%;
   left: 0%;
   font-size: 30px;
   font-weight: 1000;
   z-index: 1;
}

.ProjectImg{
   position: absolute;
   top: 0%;
   left: 40%;
   display: none;
 }

.AddColumnBtn {
   position: absolute;
   z-index: 2;
   font-size: 15px;
   background-color: transparent;
   color: rgb(115, 115, 115);
   padding: 5px 10px;
   cursor: pointer;
   border: 2px solid rgb(110, 110, 110);
   border-radius: 10px;
   width:120px;
   margin-top: 0.7%;
}
.AddRowBtn {
   position: absolute;
   z-index: 2;
   font-size: 15px;
   background-color: transparent;
   color: rgb(115, 115, 115);
   padding: 5px 10px;
   cursor: pointer;
   border: 2px solid rgb(110, 110, 110);
   border-radius: 10px;
   width:120px;
   margin-top: 0.7%;
   margin-left: 3%;
}
 /* Background Modifier */
.BackgroundModifier{
   display:block;
   background-color: #84848460 ;
   padding: 10px;
   border-radius: 10px;
   position: relative;
   margin-left: 3%;
   margin-top: 0.5%;
   margin-right: 38%;
   flex: none;
}

.BackgroundModifier .UpBtn{
   background-color: transparent;
   border: 1px;
   position: relative;
   font-size: 14px;
   z-index: 1;
   font-weight: 1000;
 }
 .BackgroundModifier .DownBtn{
   background-color: transparent;
   border: 1px;
   position: relative;
   font-size: 14px;
   z-index: 1;
 }

.BackgroundModifier  .RedoBtn{
   background-color: transparent;
   border: 1px;
   position: relative;
   font-size: 14px;
   z-index: 1;
 }
.BackgroundModifier  .UndoBtn{
   background-color: transparent;
   border: 1px;
   position: relative;
   font-size: 14px;
   z-index: 1;
 }

 .BackgroundModifier button:hover{
   background-color: grey;
   border-radius: 20px;
 }

.colourPicker, .highlightPicker{
   display:none;
   width: 20px;
   height: 20px;
   position: relative;
   background: none;
   background-color: none;
   border: none;
}

.colourFillPicker{
   display:none;
   width:10px;
   position: relative;
   background: none;
   background-color: none;
   border: none;
}
.BackgroundModifier .colorFillBtn{
   background-color: transparent;
   font-size: 14px;
   border: 1px;
   z-index: 1;
 }

.BackgroundModifier .ResetBgColour{
   background-color: transparent;
   border: none;
   font-size: 14px;
   border: 1px;
   z-index: 1;
 }
  .top-section .top-section-content .ShareLinkBtn{
   position: relative;
   width: max-content;
   height: 60px;
   border-radius: 50px;
   background-color: transparent;
   border: 0px;
   color: #848484;
   font-family: "Manrope-Regular";
   white-space: nowrap;
   display: block;
   font-size: 14px;
   margin-right: 15px;
 }
.top-section .top-section-content .ShareLinkBtn:hover{
   color: white;
   text-decoration: underline;
 }

.top-section .top-section-content .ViewModeBtn img{
   width: 40px;
   height: 80%;
   object-fit: fill;
   
 }
 .top-section .top-section-content .ViewModeBtn{
   position: relative;
   width: max-content;
   height: 60px;
   border-radius: 50px;
   background-color: transparent;
   border: 0px;
   color: #848484;
   font-family: "Manrope-Medium";
   white-space: nowrap;
   display: block;
   font-size: 14px;
 }
 .ViewModeContainer{
   position: absolute;
   width: 200px;
   background-color: #84848482; 
   z-index: 4;
   border-radius: 10px;
   padding: 2px;
   display: none;
 }
 .ViewModeContainer button{
   width: 100%;
   height: 100%;
   background-color: transparent;
   color: white;
   font-family: "Manrope-Regular";
   border: 0px solid white;
   border-radius: 10px;
   margin: 2px;
}
 .ViewModeContainer button:hover{
   background-color: #616161;
 }
.top-section .top-section-content .ViewModeBtn:hover{
   color: white;
   text-decoration: underline;
 }

.top-section .top-section-content .ShareLinkBtn img{
   width: 50px;
   height: 50px;
   object-fit: fill;
 }
 .top-section .top-section-content .ExportBtn{
   position: relative;
   width: max-content;
   height: 60px;
   border-radius: 50px;
   background-color: transparent;
   border: 0px;
   color: #848484;
   font-family: "Manrope-Regular";
   white-space: nowrap;
   display: block;
   font-size: 14px;
 }
  .top-section .top-section-content .ExportBtn:hover{
   color: white;
   text-decoration: underline;
 }

  .top-section .top-section-content .ExportBtn img{
   width: 30px;
   height: 30px;
   object-fit: fill;
   position:relative;
   margin-right: 5px;
 }

.top-section .top-section-content .ViewBtn{
   position: relative;
   width: max-content;
   height: 60px;
   border-radius: 50px;
   background-color: transparent;
   border: 0px;
   color: #848484;
   font-family: "Manrope-Regular";
   white-space: nowrap;
   display: block;
   font-size: 14px;
 }
.top-section .top-section-content .ViewBtn:hover{
   color: white;
   text-decoration: underline;
 }

.top-section .top-section-content .ViewBtn img{
   width: 50px;
   height: 50px;
   object-fit: fill;
 }
 /* .top-section .top-section-content .ChatboxBtn{
   position: relative;
   width: 60px;
   height: 60px;
   border-radius: 50px;
   background-color: transparent;
   border: 0px;
   margin-right: 1%;
 }
.top-section .top-section-content .ChatboxBtn:hover{

 } */

.top-section .top-section-content .ChatboxBtn img{
   width: 100%;
   height: 100%;
   object-fit: fill;
 }
 .top-section .top-section-content .searchInput{
   position: relative;
   font-family: "Manrope-Medium";
   width: 20%;
   height: 30px;
   background: radial-gradient(ellipse at center, #fefefe01 45%, #8383834d 85%, rgba(255, 255, 255, 0.164) 100%);
   border-radius: 8px;
   border: 0px solid grey;
   text-align:left;
   color: white;
   box-shadow:
      inset 0 2px 5px rgba(167, 166, 166, 0.6),
      inset 0 -2px 5px rgba(150, 150, 150, 0.05);
   text-align: center;
   margin-left: 2%;
   font-size: 14px;
   padding-bottom: 0.2%;
   margin-top: -0.1%;
   margin-right: 20px;
}
 .top-section .top-section-content .searchInput::placeholder{
   text-align: center;
 }
.ColHeaderView{
   width: 200px;
   height: 200px;
   background-color: #84848482 ;
   position: absolute;
   z-index: 4;
   padding: 10px;
   overflow-y: auto;
   border-radius: 10px;
   display: none;
}
.ColHeaderView label{
   color: white;
   display: flex;
   font-family: "Manrope-Medium";
   margin-bottom: 10px;
}

.ColHeaderView input[type="checkbox"] {
   margin-right: 10px;
}
/* For Scroll */
.ColHeaderView::-webkit-scrollbar {
   width: 10px;
}

.ColHeaderView::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.1); 
   border-radius: 10px;
}

.ColHeaderView::-webkit-scrollbar-thumb {
   background-color: rgb(160, 160, 160); 
   border-radius: 10px;
   border: 2px solid transparent;
   background-clip: content-box;
}

.ColHeaderView::-webkit-scrollbar-thumb:hover {
   background-color: rgba(255, 255, 255, 0.6);
}

/* For Export Function */
.Export-Section{
   position: absolute;
   width: 200px;
   background-color: #84848482 ;
   z-index: 4;
   border-radius: 10px;
   padding: 2px;
   display: none;

}
.Export-Section button{
   width: 99%;
   height: 100%;
   background-color: transparent;
   color: white;
   font-family: "Manrope-Medium";
   border: 0px solid white;
   border-radius: 10px;
   margin: 3px;
}
.Export-Section button:hover{
   background-color: #888787b1 ;;
}
.pdf-preview-container{
   position: fixed;
   width: 100%;
   height: 100%;
   z-index: 4;
   left:0%;
   top: 0%;
   display: none;
   font-family: "Manrope-Medium";
}
.pdf-preview-container .pdf-orientation{
   border-radius: 10px;
   background-color: white;
}
.pdf-preview-container .pdf-export-sidepanel{
   background-color: #848484 ;
   padding: 5px;
   position: relative;
   width: 250px;
   flex: 0 0 250px;
}
.pdf-preview-container .confirm-export{
   position: relative;
   top: 10%;
   background-color: grey;
   color: white;
}
.pdf-preview-container h4{
   margin-top: 20px;
}
.pdf-export-sidepanel .ColumnPreviewModifier{
   width: 240px;
   height: 230px;
   overflow-y: auto;
   position: relative;
   border-radius: 10px;
   color: white;
}
.pdf-preview-container .close-pdf-preview{
   background-color: red;
   color: white;
   position: relative;
   top: 20%;
}
.pdf-preview-container .PreviewEventName{
   background-color: white;
   margin: 0;
}
.pdf-preview-container .preview-table{
   background-color: rgb(157, 153, 153);
   width: 100%;
   position: relative;
   top: 0px;
   left: 0px;
   pointer-events: none;       
   user-select: none; 
   table-layout: fixed;
}
#ExportPreviewTable th,
#ExportPreviewTable td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  width: 100px !important;
}
#ExportPreviewTable th{
   white-space: nowrap;
}
#ExportPreviewTable th:first-child,
#ExportPreviewTable td:first-child {
  width: 60px !important; /* or any fixed width you prefer */
}
#ExportPreviewTable td:nth-child(2),
#ExportPreviewTable th:nth-child(2) {
   width: 300px !important;
}
#visual-rundown-container {
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 10px;
   overflow-y:scroll ;
   max-height: 900px;
   position: relative;
   top: 130px;
}

.visual-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    background: transparent;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.main-box {
   flex: 2;
   display: flex;
   flex-direction: column;
   gap: 6px;
   background: #69696b;
   border-radius: 6px;
   padding: 10px;
   box-sizing: border-box;
}

.main-item {
    font-weight: bold;
    font-size: 16px;
}

.main-time{
   font-size: 14px;
   width: 100px;
   position: relative;
   left: 5px;
}
.main-duration {
   font-size: 14px;
   width: 100px;
   position: relative;
}

.small-box {
    flex: 1;
   background: #69696b;
    border-radius: 6px;
    padding: 10px;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

.box-content {
    font-size: 14px;
}
.group-row {
    background-color: #d0e4ff;
    border-left: 5px solid #4682b4;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.group-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 4px;
}

.group-time-info {
    font-size: 14px;
    color: #555;
}
/* RUNDOWN TABLE */
.rundown-table-container {
   position: fixed;
   overflow-y: scroll;
   overflow-x: scroll;
   flex-direction: column;
   display: flex;
   width: 80%;
   z-index: 1;
   margin-top: 3.5%;
   margin-left: 1%;
   height: calc(100vh - 7%); 
   padding-right: 200px;
}
.rundown-table-spacer {
  min-height: 300px;
}
.rundown-table-container .rundown-table {
   border-spacing: 0 10px;
   border-collapse: separate;
   font-family: "Manrope-Regular";
}


/* GROUPING HEADER */
.Rundown-template .GroupName,
.Rundown-template .TotalDuration{  
   background-color: transparent;
   color: transparent;
   font-weight: bold;
   text-align: left;
   font-size: 20px;

}
.Rundown-template .EarliestStartTime
{
   background-color: transparent;
   color: transparent;
   font-weight: bold;
   text-align: left;
   font-size: 20px;
   font-family: "Manrope-ExtraBold";
}
.Rundown-template th{
   min-width: 40px;
   width: 40px;
   max-width: 40px;
}
.rundown-table thead th {
   position: sticky;
   top: 0;
}
.rundown-table-container .rundown-table .Rundown-template tr td:nth-child(2) {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.rundown-table-container .rundown-table .Rundown-template tr td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* HEADER AND CELL STYLING */
.rundown-table-container .rundown-table .time,
.rundown-table-container .rundown-table .duration,
.rundown-table-container .rundown-table .video,
.rundown-table-container .rundown-table .audio,
.rundown-table-container .rundown-table .graphic,
.rundown-table-container .rundown-table .script,
.rundown-table-container .rundown-table .newTdCol
{
   background-color: #2d2d2d;
   padding: 8px; 
   text-align: left;
   word-wrap: break-word;
   white-space: normal; 
   overflow-wrap: break-word;
   min-width: 150px; 
   max-width: 400px;
}
.rundown-table-container .rundown-table .Rundown-template .time, 
.rundown-table-container .rundown-table .Rundown-template .EarliestStartTime{
   color:#0080f6;
   font-family: "Manrope-SemiBold";
}
.rundown-table-container .rundown-table .Rundown-template .duration,
.rundown-table-container .rundown-table .Rundown-template .TotalDuration{
   color:#00de90;
   font-family: "Manrope-SemiBold";
}
.rundown-table-container .rundown-table .item{
   background-color: #2d2d2d; /* Semi-transparent background */
   padding: 8px; 
   text-align: left;
   word-wrap: break-word;
   white-space: normal; 
   overflow-wrap: break-word;
   width: 600px;
   min-width: 450px; 
   max-width: 600px; 
   max-height: 100px;
   overflow-y: auto;
}

/* SPECIFIC COLUMN WIDTHS */
.rundown-table-container .rundown-table .Item {
   width: 450px;
   min-width:100px;
   max-width: 600px;
   position: sticky; /* Fix column header on scroll */
   color: #484848;
   z-index: 2;
   overflow-wrap: break-word;
   background-color: #161616;
   align-items: center;
   text-transform:uppercase ;
   font-size: 16px;
}

.rundown-table-container .rundown-table .indexColHeader{
   position: sticky; /* Fix column header on scroll */
   color: white;
   z-index: 2;
   background-color: #161616;
   visibility: hidden;
}


.rundown-table-container .rundown-table .StartTime,
.rundown-table-container .rundown-table .Preset,
.rundown-table-container .rundown-table .Duration,
.rundown-table-container .rundown-table .Video,
.rundown-table-container .rundown-table .Graphic,
.rundown-table-container .rundown-table .Audio,
.rundown-table-container .rundown-table .Script,
.rundown-table-container .rundown-table .newThCol {
   width: 300px;
   min-width: 150px;
   max-width: 400px;
   position: sticky;
   color: #484848;
   z-index: 2;
   word-wrap:normal;
   word-break: normal;
   white-space: nowrap; 
   text-overflow: ellipsis;
   background-color: #161616;
   text-transform:uppercase ;
   font-size: 16px;
}



/* GENERAL CELL STYLING */
.rundown-table-container .rundown-table .Rundown-template td {
   vertical-align: top;
   word-wrap: break-word;
   word-break: break-word;
   white-space: normal; /* Wrap text to fit */
   overflow-wrap: break-word;
   padding: 8px;
   color: white;
}

.rundown-table-container .rundown-table .Rundown-template .indexCol {
   min-width: 40px;
   width: 40px;
   max-width: 40px;
   white-space: normal;
   color:white;
   text-align: center;
}

.highlight-button{
   border:4px solid red;
}

.highlight {
    border: 2px solid yellow;
}

.highlightTh {
   border: 2px solid rgb(255, 136, 0);
}

td:focus {
   border: 3px solid red;
   outline: none;
}

.dropDownBtn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgb(121, 121, 121);
    font-size: 20px;
    white-space: nowrap;
    cursor: pointer;
    z-index: 3;
}
.rundown-table-columnHeader th button.dropDownBtn {
    visibility: hidden;
}
.rundown-table-columnHeader th:hover button.dropDownBtn {
    visibility: visible;
}
/* Font Modifier */
.FontModifier{
   height: 40px;
  background: linear-gradient(to right, #3d3d3d 15%, #a0a0a00c );
  backdrop-filter: blur(4px); /* Apply the blur effect */
  -webkit-backdrop-filter: blur(4px); /* Safari support */
   position:absolute;
   display: none;
   z-index: 3;
   border-radius: 10px;
   border-right: 1px solid rgba(255, 255, 255, 0.517);
  border-top: 1px solid rgba(255, 255, 255, 0.41);
  border-left:1px solid rgba(255, 255, 255, 0.013);
  border-bottom:1px solid rgba(255, 255, 255, 0.171);
}

.FontModifier  .FontModifier-Content{
   padding-left: 5px;
}

.FontModifier  .FontModifier-Content button{
   height: 25px;
   margin-top: 5px;
}
.FontModifier  .FontModifier-Content .boldBtn,
.FontModifier  .FontModifier-Content .italicBtn,
.FontModifier  .FontModifier-Content .underlineBtn,
.FontModifier  .FontModifier-Content .colorBtn,
.FontModifier  .FontModifier-Content .eraseHighlight{
   background-color: transparent;
   width: 18px;
   height: 10px;
   margin-right: 5px;
   border: 0px;
   font-size: 20px;
   color: white;
}
.FontModifier  .FontModifier-Content .highlightBtn{
   background-color: transparent;
   width: 10px;
   height: 10px;
   margin-right: 5px;
   border: 0px;
   font-size: 16px;
   color: white;
   position: relative;
   top: -3px;
}
.FontModifier  .FontModifier-Content .highlightPicker,
.FontModifier  .FontModifier-Content .colourPicker{
   background-color: transparent;
   width: 22px;
   height: 20px;
   border: 0px;
   margin-left: 10px;
   font-size: 20px;
   color: white;
}
.FontModifier  .FontModifier-Content .bulletPoint{
   background-color: transparent;
   width: 10px;
   height: 10px;
   margin-right: 15px;
   margin-left: 10px;
   border: 0px;
   font-size: 20px;
   color: white;
   position: relative;
   top: -1px;
}
.FontModifier  .FontModifier-Content .fontSize{
   margin-left: 10px;
   position: relative;
   top: -3px;
   background-color: transparent;
   border: 1px solid white;
}
.FontModifier  .FontModifier-Content .groupTag{
   margin-left: 5px;
   position: relative;
   top: -3px;
   background-color: transparent;
   border: 1px solid white;
   width: 50px;
   font-size: 12px;
}
.FontModifier  .FontModifier-Content .groupTag option{
   background: grey;
   color: white;
}
 .FontModifier  .FontModifier-Content  .imgAdd{
   background-color: transparent;
   position: relative;
   border: none;
   font-size: 20px;
   border: 1px;
   z-index: 1;
   top: -1px;
 }
 
 .FontModifier  .FontModifier-Content  .hyperlinkBgMod{
   background-color: transparent;
   border: none;
   height: 10px;
   font-size: 20px;
   border: 1px;
   z-index: 3;
   color: white;
   position: relative;
   top: -1px;
   left: -4px;
 }

/* Hyperlink Section */
.hyperlinkSection{
   width: 400px;
   height: 270px;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 3;
   display: none;
   border-radius: 20px;
   background-color: rgb(0, 0, 0); /* Fallback color */
   background-color: rgba(0, 0, 0, 0.611); /* Black with transparency */
   backdrop-filter: blur(4px); /* Apply the blur effect */
   -webkit-backdrop-filter: blur(4px); /* Safari support */
}

.hyperlinkSection .hyperlinkSection-content{
   padding: 20px;
   text-align: left;
}

.hyperlinkSection .hyperlinkSection-content h2{
   font-family: "Manrope-Medium";
   position: relative;
   color: rgb(218, 218, 218);
}
.hyperlinkSection .hyperlinkSection-content .LinkTitle{
   font-family: "Manrope-Medium";
   color: rgb(218, 218, 218);
   position: relative;
   margin: 0;
}
.hyperlinkSection .hyperlinkSection-content .URLTitle{
   font-family: "Manrope-Medium";
   color: rgb(218, 218, 218);
   position: relative;
   margin: 0;
}
.hyperlinkSection .hyperlinkSection-content .urlTextName{
   font-family: "Manrope-Medium";
   border: 0px;
   border-bottom: 1px solid grey;
   background-color: transparent;
   width: 310px;
   position: relative;
   color: rgb(218, 218, 218);
   margin-bottom: 10px;
}
.hyperlinkSection .hyperlinkSection-content .urlLinkInput{
   font-family: "Manrope-Medium";
   border: 0px;
   border-bottom: 1px solid grey;
   width: 310px;
   background-color: transparent;
   position: relative;
   color: rgb(218, 218, 218);
}
.hyperlinkSection .hyperlinkSection-content .Addlink{
   font-family: "Manrope-Medium";
  background: linear-gradient(to right, #642f03 0%, #be5703 );
   color: white;
   border: 0px;
   border-radius: 6px;
   width: 100px;
   height: 35px;
   position: relative;
}


/* TIME SET */
.timePicker{
   width: 106px;
   height: 30px;
   background-color: rgb(87, 87, 87);
   position:fixed;
   display: none;
   z-index: 3;
   font-size: 16px;
   color: white;
}
.changeEarliestStartTime{
   position:absolute;
   z-index: 3;
   background-color: transparent;
   border: 0px;
   color: red;
}
.saved-symbol {
   margin-left: 5px;
   color: white;
   background-color: red;
   border: none;
   border-radius: 50%;
   cursor: pointer;
   width: 20px;
   height: 20px;
   font-size: 14px;
   line-height: 18px;
   padding: 0;
   z-index: 2;
   pointer-events: auto;
   position: relative;
   top: -2.5px;
}
.setTimer{


   background-color: rgb(71, 70, 70); /* Fallback color */
   background-color: rgba(93, 92, 92, 0.611); /* Black with transparency */
   border-radius: 10px;
   position:fixed;
   display: none;
   z-index: 2;
   font-size: 16px;
   padding-left: 10px;
   color: white;
}

.setTimer .setTimer-content{
   width:200px;
   font-size: 15px;
}

.setTimer input{
   background-color: transparent;
   color: white;
   border: 0px solid black;
}

.setTimer .setTimer-content button{
   width:50px;
   font-size: 15px;
   position: relative;
   background-color: transparent;
   color: white;
   border-radius: 10px;
}

/* Column Modifier */
.ColumnModifier{
   position: fixed;
   z-index: 3;
   width: 200px;
   height: max-content;
   background-color: #353434 ;
   display: none;
   padding: 10px;
   border-radius: 10px;
}
.ColumnModifier .ColumnModifier-content button{
   position: relative;
   width: 100%;   
   height: 40px;
   border: 0px solid none;
   background-color: transparent;
   z-index: 5;
   border: 0px;
   color: rgb(190, 190, 190);
   font-family: "Manrope-Medium";
}
.ColumnModifier .ColumnModifier-content button:hover{
   background-color: #888787b1 ;
   border-radius: 10px;
}
/* Start Time */
.StartTimeBtn{
   background-color: none;
   border: none;
   background: none;
   color: #848484;
   font-size: 15px;
   position: relative;
   top: 1px;
}

.StartTime button:hover{
   color: green;
}

/* Add Images */
.addImages-container{
   width: 400px;
   height: 200px;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 3;
   display: none;
   border-radius: 20px;
   background-color: rgb(0, 0, 0); /* Fallback color */
   background-color: rgba(0, 0, 0, 0.611); /* Black with transparency */
   backdrop-filter: blur(4px); /* Apply the blur effect */
   -webkit-backdrop-filter: blur(4px); /* Safari support */
}

.addImages-container .addImages-content{
   padding: 20px;
}
.addImages-container .addImages-content h3{
   font-family: "Manrope-Medium";
   color: rgb(218, 218, 218);
}
.addImages-container .addImages-content .UploadFromFiletext{
   font-family: "Manrope-Medium";
   color: rgb(218, 218, 218);
   position: relative;
   margin: 0;
   margin-bottom: 5px;
}
.addImages-container .addImages-content .AddImageBtnHide{
   display: none;
}
.addImages-container .addImages-content .AddImageBtn{
   font-family: "Manrope-Medium";
   display: inline-block;
   padding: 10px;
   color: rgb(174, 174, 174);
   background: linear-gradient(to right, #645040 0%, #b46524 );
   font-weight: bold;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   text-align: center;
   position: relative;
   margin-bottom: 10px;
}
.addImages-container .addImages-content .SupportedFile{
   font-family: "Manrope-Medium";
   color: rgb(218, 218, 218);
   position: relative;
}
/* Track Button */

.Setting-Container{
   position: absolute;
   z-index: 3;
   background-color: #2d2d2df8 ;
   width: 200px;
   height: 300px;
   padding: 10px;
   display: none;
   border-radius:10px ;
}
.Setting-Container button{
   position: relative;
   width: 100%;   
   height: 40px;
   border: 0px solid none;
   background-color:transparent;
   border: 0px;
   color: rgb(179, 178, 178);
   text-align: left;
   z-index: 2;
   display: block;
}
.Setting-Container button:hover{
   background-color: #888787b1 ;
   border-radius: 10px;
}
.RowSetting{
   background-color: transparent;
   color: white;
   border: none;
   position: absolute;
   display: none;
   font: 10px;
   z-index: 2;
   
}
.MinMaxGroupBtn{
   background-color: transparent;
   color: white;
   border: none;
   position: absolute;
   font: 12px;
   z-index: 2;
}
.numberOfRowTxt{
   background-color: #8484848e;
   color: rgb(230, 229, 229);
   font-family: "Manrope-Medium";
   border: none;
   position: absolute;
   font-size: 12px;
   z-index: 2;
   width: 20px;
   height: 20px;
   text-align: center;
   vertical-align:middle;
   align-content: center;
   border-radius: 5px;
}
.groupHeaderSettingBtn{
      background-color: transparent;
   color: white;
   border: none;
   position: absolute;
   display: none;
   font: 10px;
   z-index: 2;
}
.groupHeaderSetting{
   width: 200px;
   height: auto;
   position: absolute;
   z-index: 2;
   background-color: #2d2d2df8;
   padding: 10px;
   border-radius: 10px;
}
.groupHeaderSetting button{
   width: 100%;
   height: 50px;
   background-color: #2d2d2df8;
   color: white;
   font-family: "Manrope-Medium";
   position: relative;
   border: 0px;
   color: rgb(179, 178, 178);
   text-align: left;
   z-index: 2;
   display: block;
   border-radius: 10px;
}
.groupHeaderDeleteBtn{
   color: red !important;
}
.groupHeaderSetting button:hover{
   background-color: #6b6a6af8;
}

.groupHeaderDeleteBtn:hover{
   color: red;
}

.groupHeaderConfirmPanel {
   width: 400px;
   height: 170px;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
   background-color: rgb(0, 0, 0); /* Fallback color */
   background-color: rgba(0, 0, 0, 0.611); /* Black with transparency */
   backdrop-filter: blur(4px); /* Apply the blur effect */
   -webkit-backdrop-filter: blur(4px); /* Safari support */
   padding: 10px;
   border: 2px solid black;
   border-radius: 10px;
   display: none;
   pointer-events: all;
   color: white;
   font-family: "Manrope-Medium";
}

.groupHeaderConfirmPanel .groupHeaderYes{
   background-color: rgba(144, 238, 144, 0.674);
   font-weight: 1000;
   position: relative;
   border: 0px;
   margin-top: 5%;
}
.groupHeaderConfirmPanel .groupHeaderYes:hover{
   background-color: rgb(144, 238, 144);
}
.groupHeaderConfirmPanel .groupHeaderNo{
   background-color: rgba(255, 0, 0, 0.716);
   font-weight: 1000;
   position: relative;
   margin-left: 10px;
   border: 0px;
}
.groupHeaderConfirmPanel .groupHeaderNo:hover{
   background-color: rgb(255, 0, 0);
}
/* Group Tag */
.tag-span {
   display: inline-flex; /* Flexbox for proper alignment */
   align-items: center; /* Align icon and text vertically */
   justify-content: center; /* Center text */
   gap: 5px; /* Space between icon and text */
   padding: 5px 10px;
   margin-right: 5px;
   margin-bottom: 5px;
   border-radius: 4px;
   font-family: "Manrope-Regular";
   width: 120px; /* Adjust as needed */
   height: 30px;
}
.tag-span.collapsed {
   width: 30px;        /* smaller width for collapsed */
   height: 30px;       /* smaller height */
   padding: 0px;         /* remove padding */
   overflow: hidden;   /* hide any leftover content */
}
.tag-text {
   flex: 1; /* Allows text to take up available space */
   text-align: center; /* Ensures text is centered */
}
.l-indicator {
   display: inline-block;
   width: 8px;
   height: 10px;
   border-left: 2px solid;       /* color will be set via JS */
   border-bottom: 2px solid;     /* color will be set via JS */
   margin-right: 4px;
   position: relative;
   top: -3px;
}
.custom-icon {
    display: inline-block;
    width: 24px;      /* size of your icon */
    height: 24px;
    background-image: url('/Icon/Icon_LED.png');
      background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle
}
.custom-icon-dynamic {
    display: inline-block;
    width: 24px;      /* size of your icon */
    height: 24px;
    background-image: url('/Icon/Icon_Content.png');
   background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle
}
.custom-icon-adlibs {
    display: inline-block;
    width: 24px;      /* size of your icon */
    height: 24px;
    background-image: url('/Icon/Icon_Content.png');
   background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle
}
.trackingUserPic{
   width: 80px;
   height: 80px;
   border: 0px;
   background-color: transparent;
   position: fixed;
   top: 89%;
   left: 80%;
   border-radius: 50px;
   z-index: 2;
   margin: auto;
}
.trackingUserPic p{
   position: absolute;
   top: 0;
   margin-top: 60px;
   font-size: 13px;
   padding-left: 8px;
   font-family: "Industry W00 Demi" !important;
   color: #00FF00; /* Neon green color for text */
   text-shadow: 
      0 0 5px #00FF00,  /* Green glow */
      0 0 10px #00FF00, 
      0 0 20px #FF00FF,  /* Purple glow */
      0 0 30px #FF00FF,
      0 0 40px #FF00FF;
}
.trackingUserPic img{
   width: 80px;
   height: 80px;
   border-radius: 50px;
   margin-left: -6px;
}

.tracking-user-button {
   background: none;
   border: none;
   padding: 4px;
   margin: 4px;
   cursor: pointer;
   border-radius: 50%;
   transition: transform 0.2s ease;
   position: relative;
}

.TrackBtn{
   pointer-events: none !important;
   display: none !important;
   font-family: "Industry W00 Demi" !important;
   color: rgb(79, 238, 79) !important;
   position: absolute !important;
   top: -99999px !important;
   left: -99999px !important;
}

.trackButtonInCell{
   position: absolute; 
   font-family: "Industry W00 Demi" !important;
   z-index: 2;
   display: none;
   background-color: transparent;
   border: 0px solid black;
   color: #00FF00; /* Neon green color for text */
}

tr.TrackingBg td {
   background-color: #00de9050 !important;
}
 /* VIEW SETTING */
.ViewSettingBtn{
   position: relative;
   z-index: 2;
   border-radius: 40px;
   font-size: 30px;
   width: 60px;
   height: 60px;
   left: 1500px;
   top: 830px;
   border: 0px;
   background-color:rgb(198, 205, 247) ;
}

.ViewSetting-Container{
   display: none;
   position: relative;
   z-index: 2;
   width: 200px;
   height: 200px;
   background-color: rgb(198, 205, 247);
   border-radius: 20px;
   padding: 10px;
   left: 1380px;
   top: 5px;
}

.ViewSetting-Container button{
   font-size: 20px;
   text-align: right;
   border: 0PX;
   background-color: transparent;
   border-radius: 10px;
   float: right;
}
.Setting-Container .AddRowAbove,
.Setting-Container .AddRowBelow,
.Setting-Container .DeleteRow,
.Setting-Container .DuplicateRowAbove,
.Setting-Container .DuplicateRowBelow,
.Setting-Container .AddGroupAbove,
.Setting-Container .AddGroupBelow,
.Setting-Container .TrackBtn{
   font-family: "Manrope-Medium";
}
.Setting-Container .DeleteRow{
   color: red;
}
.ViewSetting-Container button:hover{
   background-color: rgb(161, 174, 249);
}

/* ScrollBar */
::-webkit-scrollbar {
  width: 10px;              /* Width of the scrollbar */
  height: 10px;             /* For horizontal scrollbars */
}

::-webkit-scrollbar-track {
  background: #525151;      /* Track color */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #414141;         /* Scrollbar handle */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;         /* On hover */
}

/* Hide scrollbar for prompter view of the table */
/* .script-view-active-table {
  overflow-y: auto;
  scrollbar-width: none; 
}

.script-view-active-table::-webkit-scrollbar {
  display: none; /* Chrome, Edge, Safari */
/*} */
/* Responsive Design */
@media(max-width: 3440px){
   .sidebar-template{
      width: 13%;
   }
   .top-section{
      height: 4.5%;
   }
   .sidebar-template .sidebar-content .TimeArea{
      height: 10%;
   }
   .sidebar-template .sidebar-content .TimeArea .underOverTime{
      font-size: 34px;
   }
   .sidebar-template .sidebar-content .TimeArea  .estTimeRowSelect{
      width: 90%;
   }
   .sidebar-template .sidebar-content .TimeArea .EstTime{
      font-size: 33px;
   }
   .rundown-table-container{
      width: 86%;
      margin-top: 2.5%;
      margin-left: 1%;
   }
   .script-view-active{
      height: 82vh;
      width: 86%;
      margin-top:5%;
   }
   .script-view-active-table {
      width: 12.7%;
      height: 41%;
      font-size: 28px;
      margin-right: 0;
      margin: 0;
      margin-left: 0.4%;
      transform: scale(1);
      transform-origin: top left;
      overflow-y: hidden;
      overflow-x: hidden;
   }
   .script-view-active-table #Rundown-table {
      width: 184% !important;
      transform: scale(0.55); /* make table contents slightly bigger */
      transform-origin: top left;
   }
   .BackgroundModifier{
      margin-right: 50%;
   }
}
@media(max-width: 2560px){
  .sidebar-template{
      width: 18%;
   }
   .sidebar-template .sidebar-content .TimeArea{
      height: 10%;
   }
   .sidebar-template .sidebar-content .TimeArea .underOverTime{
      font-size: 34px;
   }
   .sidebar-template .sidebar-content .TimeArea  .estTimeRowSelect{
      width: 90%;
   }
   .sidebar-template .sidebar-content .TimeArea .EstTime{
      font-size: 32px;
   }
   .top-section{
      height: 80px;
   }
   .rundown-table-container{
      width: 81%;
      margin-top: 3.5%;
      margin-left: 1%;
   }
   .script-view-active{
      height: 87vh;
      width: 81%;
   }
   .zoom-controls {
      margin-top:3% ;
   }
   .script-view-active-table {
      width: 17.7%;
      height: 37%;
      font-size: 28px;
      margin-right: 0;
      margin: 0;
      margin-left: 0.5%;
      transform: scale(1);
      transform-origin: top left;
      overflow-y: hidden;
      overflow-x: hidden;
   }
   .script-view-active-table #Rundown-table {
      width: 179% !important;
      transform: scale(0.58); /* make table contents slightly bigger */
      transform-origin: top left;
   }
   .BackgroundModifier{
      margin-right: 50%;
   }
}
@media(max-width: 1920px){
  .sidebar-template{
      width: 20%;
   }
   .sidebar-template .sidebar-content .TimeArea{
      height: 10%;
   }
   .top-section{
      height: 6%;
   }
   .sidebar-template .sidebar-content .TimeArea .underOverTime{
      font-size: 30px;
   }
   .sidebar-template .sidebar-content .TimeArea  .estTimeRowSelect{

      width: 100%;
   }
   .sidebar-template .sidebar-content .TimeArea .EstTime{
      font-size: 30px;
   }
   .rundown-table-container{
      width: 79%;
      margin-top: 3.5%;
      margin-left: 1%;
   }
   .script-view-active{
      height: 90vh;
      width: 78%;
   }
   .script-view-active-table {
      width: 18.5%;
      height: 35%;
      font-size: 28px;
      margin-right: 0;
      margin: 0;
      margin-left: 1%;
      transform: scale(1);
      transform-origin: top left;
      overflow-y: hidden;
   }
   .script-view-active-table #Rundown-table {
      width: 235% !important;
      transform: scale(0.45);
      transform-origin: top left;
   }
   .BackgroundModifier{
      margin-right: 30%;
   }
   .sidebar-template .sidebar-content .TimeArea  .EstTime{
      line-height: 44px;
   }
}
@media(max-width: 1880px){
 .sidebar-template{
      width: 22%;
   }
   .sidebar-template .sidebar-content .TimeArea{
      height: 35vh;
   }
   .sidebar-template .sidebar-content .TimeArea .underOverTime{
      font-size: 30px;
   }
   .sidebar-template .sidebar-content .TimeArea  .estTimeRowSelect{

      width: 100%;
   }
   .sidebar-template .sidebar-content .TimeArea .EstTime{
      font-size: 30px;
   }
   .top-section{
      height: 7%;
   }
   .rundown-table-container{
      width: 77%;
      margin-top: 3.5%;
      margin-left: 1%;
   }
   .script-view-active{
      width: 76.5%;
      height: 87vh;
      margin-top: 5.5%;
      overflow-y: hidden;
   }
   
   .script-view-active-table {
      width: 20.5%;
      height: 28%;
      font-size: 28px;
      margin-right: 0;
      margin: 0;
      margin-left: 1%;
      transform-origin: top left;
      overflow-y: auto;
   }
   .script-view-active-table #Rundown-table {
      width: 210% !important;
      transform-origin: top left;
      transform: scale(0.48);
   }
   .BackgroundModifier{
      margin-right: 23%;
   }
   .sidebar-template .sidebar-content .TimeArea  .EstTime{
      line-height: 43px;
   }
}
@media(max-width: 1536px){
 .sidebar-template{
      width: 25%;
      height: 99vh;
      overflow-y: hidden;
      overflow-x: hidden;
   }
   .sidebar-template .sidebar-content .TimeArea{
      height: 10%;
      overflow-x: hidden;
   }
   .sidebar-template .sidebar-content .TimeArea .itemRunTime{
      font-size: 62px;
   }
   .sidebar-template .sidebar-content .TimeArea .underOverTime{
      font-size: 30px;
   }
   .sidebar-template .sidebar-content .TimeArea  .estTimeRowSelect{

      width: 100%;
   }
   .sidebar-template .sidebar-content .TimeArea .EstTime{
      font-size: 30px;
   }
   .script-view-active{
      height: 82vh;
      width: 74%;
      margin-top: 7%;
   }
   .zoom-controls{
      margin-top: 4%;
   }
   .rundown-table-container{
      width: 74%;
      margin-top: 3.5%;
      margin-left: 1%;
   }
   .script-view-active-table {
      width: 24.5%;
      height: 29%;
      font-size: 28px;
      margin-right: 0;
      margin: 0;
      margin-left: 0.3%;
      transform: scale(1);
      transform-origin: top left;
      overflow-y: auto;
      overflow-x: hidden;
   }
   .script-view-active-table #Rundown-table {
      width: 310% !important;
      transform-origin: top left;
   }
   .BackgroundModifier{
      margin-right: 15%;
   }
   .sidebar-template .sidebar-content .TimeArea  .EstTime{
      line-height: 42px;
   }
}
@media(max-width: 1440px) and (max-height: 754px){
 .sidebar-template{
      width: 28%;
      height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
   }
   .sidebar-template .sidebar-content .TimeArea{
      height: 10%;
      overflow-x: hidden;
   }
   .sidebar-template .sidebar-content .TimeArea .underOverTime{
      font-size: 30px;
   }
   .sidebar-template .sidebar-content .TimeArea  .estTimeRowSelect{

      width: 100%;
   }
   .sidebar-template .sidebar-content .TimeArea .EstTime{
      font-size: 30px;
   }
   .script-view-active{
      height: 82vh;
      width: 74%;
      margin-top: 7%;
   }
   .zoom-controls{
      margin-top: 4%;
   }
   .rundown-table-container{
      width: 77%;
      margin-top: 3.5%;
      margin-left: 1%;
   }
   .script-view-active-table {
      width: 24.5%;
      height: 22%;
      font-size: 28px;
      margin-right: 0;
      margin: 0;
      margin-left: 0.3%;
      transform-origin: top left;
      overflow-y: auto;
      overflow-x: hidden;
      padding-bottom: 100px;
   }
   .script-view-active-table #Rundown-table {
      width: 240% !important;
      transform-origin: top left;
      transform: scale(0.45);
   }
   .BackgroundModifier{
      margin-right: 10%;
   }
   .sidebar-template .sidebar-content .TimeArea  .EstTime{
      line-height: 44px;
   }
}
@media(max-width: 1366px){
 .sidebar-template{
      width: 30%;
   }
   .sidebar-template .sidebar-content .TimeArea{
      height: 10%;
   }
   .sidebar-template .sidebar-content .TimeArea .underOverTime{
      font-size: 30px;
   }
   .sidebar-template .sidebar-content .TimeArea  .estTimeRowSelect{

      width: 92%;
   }
   .sidebar-template .sidebar-content .TimeArea .EstTime{
      font-size: 30px;
   }
   .rundown-table-container{
      width: 77%;
      margin-top: 3.5%;
      margin-left: 1%;
   }
   .script-view-active{
      height: 88vh;
      width: 91vh;
      margin-top: 8%;
   }
   .zoom-controls {
      margin-top: 4.5%;
   }
   .script-view-active-table {
      width: 29%;
      height: 32%;
      font-size: 28px;
      margin-right: 0;
      margin: 0;
      margin-left: 0.8%;
      transform-origin: top left;
      overflow-y: auto;
      overflow-x: hidden;
   }
   .script-view-active-table #Rundown-table {
      width: 200% !important;
      transform-origin: top left;
      transform: scale(0.5);
   }
   .BackgroundModifier{
      margin-right: 5%;
   }
   .sidebar-template .sidebar-content .TimeArea  .EstTime{
      line-height: 41px;
   }
}
@media(max-width: 1280px){
 .sidebar-template{
      width: 30%;
   }
   .sidebar-template .sidebar-content .TimeArea{
      height: 10%;
   }
   .sidebar-template .sidebar-content .TimeArea .underOverTime{
      font-size: 30px;
   }
   .sidebar-template .sidebar-content .TimeArea  .estTimeRowSelect{

      width: 98%;
   }
   .sidebar-template .sidebar-content .TimeArea .EstTime{
      font-size: 30px;
   }
   .rundown-table-container{
      width: 69%;
      height: 96%;
      margin-top: 5.5%;
      margin-left: 1%;
   }
   .script-view-active{
      height: 86vh;
      width: 68%;
      margin-top: 8%;
   }
   .zoom-controls {
      margin-top: 5% ;
   }
   .script-view-active-table {
      width: 29.5%;
      height: 35%;
      font-size: 28px;
      margin-right: 0;
      margin: 0;
      margin-left: 0.5%;
      transform-origin: top left;
   }
   .script-view-active-table #Rundown-table {
      width: 215% !important;
      transform-origin: top left;
      padding-bottom: 150px;
      transform: scale(0.48);
   }
   .BackgroundModifier{
      margin-right: 2%;
   }
   .sidebar-template .sidebar-content .TimeArea  .EstTime{
      line-height: 45px;
   }
}
@media(max-width: 1138px){
 .sidebar-template{
      width: 32%;
   }
   .sidebar-template .sidebar-content .TimeArea{
      height: 10%;
   }
   .sidebar-template .sidebar-content .TimeArea .underOverTime{
      font-size: 30px;
   }
   .sidebar-template .sidebar-content .TimeArea  .estTimeRowSelect{
      width: 98%;
   }
   .sidebar-template .sidebar-content .TimeArea .EstTime{
      font-size: 30px;
   }
   .rundown-table-container{
      width: 69%;
      height: 96%;
      margin-top: 5.5%;
      margin-left: 1%;
   }
   .script-view-active{
      height: 86vh;
      width: 68%;
      margin-top: 9%;
   }
   .zoom-controls {
      margin-top: 5% ;
   }
   .script-view-active-table {
      width: 30.5%;
      height: 35%;
      font-size: 28px;
      margin-right: 0;
      margin: 0;
      margin-left: 1%;
      transform-origin: top left;
   }
   .script-view-active-table #Rundown-table {
      width: 215% !important;
      transform-origin: top left;
      padding-bottom: 150px;
      transform: scale(0.45);
   }
   .BackgroundModifier{
      margin-right: 0%;
   }
   .sidebar-template .sidebar-content .TimeArea  .EstTime{
      line-height: 45px;
   }
}

@media(max-width: 1024px){
 .sidebar-template{
      width: 42%;
      overflow-y:auto;
   }
   .sidebar-template .sidebar-content .TimeArea{
      height: 10%;
   }
   .sidebar-template .sidebar-content .TimeArea .underOverTime{
      font-size: 30px;
   }
   .sidebar-template .sidebar-content .TimeArea  .estTimeRowSelect{

      width: 90%;
   }
   .sidebar-template .sidebar-content .TimeArea .EstTime{
      font-size: 30px;
   }
   .top-section{
      height: 15%;
   }
   .rundown-table-container{
      width: 57%;
      margin-top: 7.5%;
      margin-left: 1%;
   }
   .script-view-active{
      width: 57%;
      height: 83%;
      margin-top: 11%;
   }
   .zoom-controls {
      margin-top: 6%;
   }
   .script-view-active-table {
      width: 100%;
      height: 40%;
      margin-right: 0;
      margin: 0;
      margin-left: 4%;
      font-size: 28px;
      transform-origin: top left;
      overflow-x: hidden;
      overflow-y: auto; 
      position: relative;
   }
   .script-view-active-table #Rundown-table {
      width: 188% !important;
      transform-origin: top left;
      transform: scale(0.5);
   }
   .top-section .top-section-content{
      overflow-x: auto;
      
   }
   .BackgroundModifier{
      margin-right: 0%;
   }
   .sidebar-template .sidebar-content .TimeArea  .EstTime{
      line-height: 45px;
   }
}
@media(max-width: 820px){
   html, body{
      overflow-x: auto;
      overflow-y: hidden;
   }
    .sidebar-template{
      width: 45%;
   }
   .sidebar-template .sidebar-content .TimeArea{
      height: 10%;
   }
   .sidebar-template .sidebar-content .TimeArea .underOverTime{
      font-size: 30px;
   }
   .sidebar-template .sidebar-content .TimeArea  .estTimeRowSelect{
      width: 90%;
   }
   .sidebar-template .sidebar-content .TimeArea .EstTime{
      font-size: 30px;
   }
   .rundown-table-container{
      width: 60%;
      margin-top: 8.5%;
      margin-left: 2.5%;
   }
   .script-view-active{
      width: 36vh;
      height: 100%;
      margin-top: 12%;
   }
   .script-view-active-table {
      width: 97%;
      height: 45%;
      margin-right: 0;
      margin: 0;
      transform-origin: top left;
      overflow-x: hidden;
   }
   .script-view-active-table #Rundown-table {
      width: 310% !important;
      transform-origin: top left;
   }
   .BackgroundModifier{
      margin-right: 0%;
   }

   .sidebar-template .sidebar-content .TimeArea  .EstTime{
      line-height: 45px;
   }
}
@media(max-width: 430px){
   html, body{
      overflow-x: auto;
      overflow-y: hidden;
      width: 150%;
   }
    .sidebar-template{
      width: 40%;
   }
   .sidebar-template .sidebar-content .TimeArea{
      height: 10%;
   }
   .sidebar-template .sidebar-content .TimeArea .underOverTime{
      font-size: 30px;
   }
   .sidebar-template .sidebar-content .TimeArea  .estTimeRowSelect{

      width: 100%;
   }
   .sidebar-template .sidebar-content .TimeArea .EstTime{
      font-size: 30px;
   }
   .rundown-table-container{
      width: 65%;
      height: 41%;
      margin-top: 6.5%;
      margin-left: 1.5%;
   }
   .script-view-active{
      width: 130%;
      height: 85%;
      margin-top: 30%;
   }
   .zoom-controls {
      margin-top: 16.5% ;
      right: -120%;
   }
   .script-view-active-table {
      width: 100%;
      height: 42%;
      margin-right: 0;
      margin: 0;
      margin-left: 3%;
      transform-origin: top left;
      overflow-x: hidden;
   }
   .script-view-active-table #Rundown-table {
      width: 205% !important;
      transform-origin: top left;
      padding-bottom: 150px;
      transform: scale(0.45);
   }
   .BackgroundModifier{
      margin-right: 0%;
   }
   .sidebar-template .sidebar-content .TimeArea  .EstTime{
      line-height: 45px;
   }
}
@media(max-width: 344px){
   html, body{
      overflow-x: auto;
      overflow-y: hidden;
      width: 160%;
   }
    .sidebar-template{
      width: 45%;
   }
   .sidebar-template .sidebar-content .TimeArea{
      height: 10%;
      width: 150%;
   }
   .sidebar-template .sidebar-content .ImageArea{
      width: 150%;
   }
   .sidebar-template .sidebar-content .TimeArea .underOverTime{
      font-size: 30px;
   }
   .sidebar-template .sidebar-content .TimeArea  .estTimeRowSelect{

      width: 100%;
   }
   .sidebar-template .sidebar-content .TimeArea .EstTime{
      font-size: 30px;
   }
   .rundown-table-container{
      width: 65%;
      margin-top: 6.5%;
      margin-left: 1.5%;
   }
   .script-view-active{
      width: 160%;
      height: 85%;
      margin-top: 30%;
   }
   .script-view-active-table {
      width: 160%;
      height: 42%;
      margin-right: 0;
      margin: 0;
      margin-left: 2%;
      font-size: 28px;
      transform-origin: top left;
      overflow-x: hidden;
   }
   .script-view-active-table #Rundown-table {
      width: 200% !important;
      transform-origin: top left;
      transform: scale(0.54);
   }
   .BackgroundModifier{
      margin-right: 0%;
   }
   .sidebar-template .sidebar-content .TimeArea  .EstTime{
      line-height: 45px;
   }
}

/* For ScriptArea  */
@media (max-height: 1294px) {
  .ScriptArea {
   height: 40vh;
  }
}
@media (max-height: 1080px) {
  .ScriptArea {
   height: 34vh;
  }
}
@media (max-height: 921px) {
  .ScriptArea {
   height: 27vh;
  }
}
@media (max-height: 754px) {
   .ScriptArea {
      height: 35vh;
  }
}