/* To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. */ /* Created on : Sep 14, 2022, 5:55:52 PM Author : Permander */ :root { --onAirIdDuration-font-size: 25px; --videoHeightPlayerBox: 200px; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; } :root, .theme1 { --BG-600: #303F51; --BG-650: #2e3c4d; --BG-700: #182738; --BG-750: #192839; --BG-800: #15212F; --BG-850: #182132; --BG-900: #141D28; /* --BG-950: #0c141d; */ --BG-950: #14202f; --TX-F-COL: #AFB2BA; --TX-H-COL: #FFFFFF; --TX-A-COL: #60BEF8; --Btn-BG: #60BEF8; --borderRight: 2px solid grey; --d-input: var(--BG-600); --namedMenup: #666; --background-Color-n1: var(--BG-700); --background-Color-n2: var(--BG-950); --background-Color-n3: var(--BG-700); /* --background-Color-n4: #060a0e; */ --background-Color-n4: #0d1824; --background-Color-n7: #111C28; --background-Color-n8: var(--BG-600); --background-Color-n9: var(--BG-900); --background-Color-n10: var(--BG-800); --background-Color-n11: #55555a; --background-Color-n12: var(--BG-800); --background-Color-n15: #3f3f48; --background-Color-n16: #696972; --background-Color-n20: #272a2f; /* --background-Color-n21: #3d434a; */ --background-Color-n21: #293e58; --background-Color-n23: #3f3f48; --background-Color-n25: var(--BG-700); --background-Color-n26: var(--BG-700); --background-Color-n27: var(--BG-800); --background-Color-n28: var(--background-Color-n7); --background-Color-n31: #303040; /* --background-Color-n32: #464b68; */ --background-Color-n32: var(--BG-700); --background-Color-n33: var(--BG-700); --background-Color-n34: var(--BG-700); --background-Color-n35: var(--BG-850); --background-Color-n36: var(--BG-950); --box-shadow: rgb(0, 0, 34) 4px 3px 2px 2px; --backgroundImage-1: linear-gradient(to right, #111C28, #111C28); --operationMenuBtn-Bg: linear-gradient(to right bottom, var(--TX-A-COL), #191d30); --operationMenuBtn-Bg-Disable: linear-gradient(to right bottom, #1c1f22, #2F353a); --operationMenuBtn-Bg-shadow: 0 0px 5px 0px #59aee5; --operationMenuBtnHover-Bg-shadow: -3px -3px 4px -4px #486477, 0 5px 5px 0 #265c70; /* --border: 7px solid #141d29; */ --border: 7px solid #182738; --borderRight: 7px solid #333c47; --footerBackground: var(--BG-700); --onairPlThead: var(--BG-700); --rightBoxLayout-Border-Left: var(--BG-600); --contentMgrBorder: 2px solid var(--BG-600); --activeLinkColor: var(--TX-A-COL); --d-head: var(--BG-700); --d-foot: var(--BG-700); --modalBody_bg: var(--BG-950); --d-bg: var(--BG-950); --d-btn: #075469; --activeTab: var(--TX-A-COL); --tHead-Bg: var(--BG-900); --tBody-Bg: var(--BG-800); --bgBtnSuccess: var(--TX-A-COL); --bgBtnCancel: var(--tHead-Bg); --inputFileType: rgba(96, 190, 248, 0.4); --cloudBtn: var(--TX-A-COL); /* --d-input1: #3d434a; */ --d-input1: #15212f; --boxShadow-Btn: box-shadow: 0 12px 24px 0 rgba(0, 206, 198, 0.3); --dr-mo-Border-Color: rgb(76 80 83) rgb(76 80 83) rgb(89 95 101); --dr-mo-Border-Box-Shadow: rgb(107 135 160 / 42%) 0px 60px 123px -25px, rgba(19, 26, 32, 0.08) 0px 35px 75px -35px; --scrollTrack: #8e8e8e; --scrollThumb: #293e58; --tHeadBorder: #535c69; --mainMenuBorder: #343b43; --defaultBlock: var(--background-Color-n4); --searchBlock: var(--d-input1); } .theme2 { --TX-F-COL: #AFB2BA; --TX-H-COL: #FFFFFF; --TX-A-COL: #60BEF8; --Btn-BG: #60BEF8; --BG-850: #182132; --BG-950: #0c141d; --d-input: dimgray; --namedMenup: #455b79; --background-Color-n1: #22354E; --background-Color-n2: #1B2940; --background-Color-n3: #1b2940; --background-Color-n4: #32549c; --background-Color-n7: #041d3e; --background-Color-n8: #E3E2DE; --background-Color-n9: var(--background-Color-n7); --background-Color-n10: #22354e; --background-Color-n11: #455b79; --background-Color-n12: var(--background-Color-n7); --background-Color-n15: #1b2940; --background-Color-n16: #1b2940; --background-Color-n20: #041d3e; --background-Color-n21: #455b79; --background-Color-n23: #455b79; --background-Color-n25: var(--background-Color-n3); --background-Color-n26: var(--background-Color-n1); --background-Color-n27: var(--background-Color-n10); --background-Color-n28: var(--background-Color-n7); --background-Color-n31: #1b2940; --background-Color-n32: rgb(34 53 78); --background-Color-n33: rgb(4, 29, 62); --background-Color-n34: #182738; --background-Color-n35: var(--BG-850); --background-Color-n35: #1B2940; --box-shadow: midnightblue 4px 3px 2px 2px; --backgroundImage-1: linear-gradient(to right, #22354E, #22354E); --operationMenuBtn-Bg: linear-gradient(to left top, #272731, #272731, #272731); --operationMenuBtn-Bg-Disable: linear-gradient(to left top, #272731, #272731, #272731); --operationMenuBtn-Bg-shadow: 0 2px 3px 1px #242121, 0 3px 8px #000000, 0 -3px 4px #000000, 0 3px 4px #000000, inset 0 0 3px 0 #18191b; --operationMenuBtnHover-Bg-shadow: -3px -3px 4px -4px #2B3E42, 0 7px 9px 0 #2b3e45; --border: 7px solid grey; --borderRight: 2px solid grey; --footerBackground: #1B1E24; --onairPlThead: #041D3E; --rightBoxLayout-Border-Left: #000; --contentMgrBorder: 2px solid rgb(76 80 83) rgb(76 80 83) rgb(89 95 101); --activeLinkColor: #0066f1; --d-head: #22354e; --d-foot: #22354e; --modalBody_bg: #272731; --activeTab: #1A843A; --tHead-Bg: #444; --tBody-Bg: #272731; --bgBtnSuccess: var(--Btn-BG); --bgBtnCancel: var(--tHead-Bg); --inputFileType: rgba(96, 190, 248, 0.4); --cloudBtn: var(--Btn-BG); --d-input1: #3d434a; --boxShadow-Btn: box-shadow: 0 12px 24px 0 rgba(0, 206, 198, 0.3); --d-bg: #272731; --d-btn: #075469; --dr-mo-Border-Color: rgb(76 80 83) rgb(76 80 83) rgb(89 95 101); --dr-mo-Border-Box-Shadow: rgb(107 135 160 / 42%) 0px 60px 123px -25px, rgba(19, 26, 32, 0.08) 0px 35px 75px -35px; } .theme3 { /* --BG-900: #17312e; --BG-800: #1d3d3a; --BG-700: #215646; --BG-600: #376759; */ --BG-600: #376759; --BG-650: #315c4f; --BG-700: #1d3d3a; --BG-750: rgb(34, 63, 69); --BG-800: #215646; --BG-850: #182132; --BG-900: #263b36; --BG-950: #182132; --TX-F-COL: #AFB2BA; --TX-H-COL: #FFFFFF; --TX-A-COL: #60BEF8; --Btn-BG: #103c48; ; --d-input: var(--BG-600); ; --namedMenup: #223f45; /* / --background-Color-n16 : #223f45; / */ --background-Color-n1: var(--BG-700); --background-Color-n2: var(--BG-800); --background-Color-n3: var(--BG-700); --background-Color-n4: #103c48; --background-Color-n7: var(--BG-700); --background-Color-n8: var(--BG-600); --background-Color-n9: var(--BG-900); --background-Color-n10: var(--BG-800); --background-Color-n11: #417372; --background-Color-n12: var(--BG-800); --background-Color-n16: #1f3136; --background-Color-n19: #272731; --background-Color-n20: #272a2f; --background-Color-n21: #20434d; --background-Color-n23: #103c48; --background-Color-n25: var(--BG-700); --background-Color-n26: var(--BG-700); --background-Color-n27: var(--BG-800); --background-Color-n28: #417372; --background-Color-n31: #1f3136; --background-Color-n32: var(--BG-700); --background-Color-n33: var(--BG-700); --background-Color-n34: var(--BG-750); --background-Color-n35: var(--BG-850); --background-Color-n36: var(--BG-950); --box-shadow: rgb(29, 75, 60) 4px 3px 2px 2px; --backgroundImage-1: linear-gradient(to right, #1c2836, #223d39); --operationMenuBtn-Bg: linear-gradient(to left top, #0c4915, #175a22, #21df6f); --operationMenuBtn-Bg-Disable: linear-gradient(to left top, #0c4915, #175a22, #21df6f); --operationMenuBtn-Bg-shadow: 0 2px 3px 1px #242121, 0 3px 8px #000000, 0 -3px 4px #000000, 0 3px 4px #000000, inset 0 0 3px 0 #18191b; --operationMenuBtnHover-Bg-shadow: -3px -3px 4px -4px #2B3E42, 0 7px 9px 0 #2b3e45; --border: 7px solid grey; --borderRight: 2px solid grey; --footerBackground: var(--BG-700); --onairPlThead: var(--BG-700); --rightBoxLayout-Border-Left: var(--BG-600); --contentMgrBorder: 2px solid var(--BG-600); --activeLinkColor: #36c210; --d-head: var(--BG-700); --d-foot: var(--BG-700); --modalBody_bg: var(--BG-900); --d-bg: var(--BG-900); --d-btn: var(--BG-600); --activeTab: #1a843a; --tHead-Bg: var(--BG-900); --tBody-Bg: var(--BG-800); --bgBtnSuccess: var(--Btn-BG); --bgBtnCancel: var(--BG-900); --inputFileType: rgba(96, 190, 248, 0.4); --cloudBtn: var(--Btn-BG); --d-input1: #3d434a; --boxShadow-Btn: box-shadow: 0px 12px 24px 0px rgba(0, 206, 198, 0.3); --dr-mo-Border-Color: rgb(53 129 81) rgb(53 129 81) rgb(51 150 87); --dr-mo-Border-Box-Shadow: rgb(107 160 122 / 42%) 0px 60px 123px -25px, rgb(19 32 21 / 8%) 0px 35px 75px -35px; } .w3-bg-600 { background-color: var(--BG-600, rgb(59 130 246)) !important; } .w3-bg-650 { background-color: var(--BG-650, rgb(59 130 246)) !important; } .w3-bg-700 { background-color: var(--BG-700, rgb(59 130 246)) !important; } .w3-bg-750 { background-color: var(--BG-750, rgb(59 130 246)) !important; } .w3-bg-800 { background-color: var(--BG-800, rgb(59 130 246)) !important; } .w3-bg-850 { background-color: var(--BG-850, rgb(59 130 246)) !important; } .w3-bg-900 { background-color: var(--BG-900, rgb(59 130 246)) !important; } .w3-bg-950 { background-color: var(--BG-950, rgb(59 130 246)) !important; } .bg-blue-600 { --tw-bg-opacity: 1; background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); } .bg-blue-500 { --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); } .bg-gray-200 { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); } .bg-gray-700 { --tw-bg-opacity: 1; background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)); } .bg-gray-800 { --tw-bg-opacity: 1; background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1)); } .bg-gray-600 { --tw-bg-opacity: 1; background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1)); } .bg-gray-900 { --tw-bg-opacity: 1; background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)); } .bg-yellow-600 { background-color: #ca8a04; } .bg-green-600 { background-color: #16a34a; } .gap-12 { gap: 12%; } .hFitToContent { height: fit-content; } .w3-bg-transparent { background: transparent !important; } .text-blue-500 { --tw-text-opacity: 1; color: rgb(59 130 246 / var(--tw-text-opacity, 1)); } .text-yellow-500 { color: #facc15; } .text-gray-800 { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity, 1)); } .text-gray-700 { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity, 1)); } .text-gray-400 { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity, 1)); } .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .text-green-500 { --tw-text-opacity: 1; color: rgb(34 197 94 / var(--tw-text-opacity, 1)); } .text-gray-300 { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity, 1)); } .text-red-500 { --tw-text-opacity: 1; color: rgb(239 68 68 / var(--tw-text-opacity, 1)); } .w3-col.s1 { width: 4.16666% } .w3-col.s2 { width: 8.33332% } .w3-col.s3 { width: 12.49998% } .w3-col.s4 { width: 16.66664% } .w3-col.s5 { width: 20.8333% } .w3-col.s6 { width: 24.99996% } .w3-col.s7 { width: 29.16662% } .w3-col.s8 { width: 33.33328% } .w3-col.s9 { width: 37.49994% } .w3-col.s10 { width: 41.6666% } .w3-col.s11 { width: 45.83326% } .w3-col.s12 { width: 49.99992% } .w3-col.s13 { width: 54.16658% } .w3-col.s14 { width: 58.33324% } .w3-col.s15 { width: 62.4999% } .w3-col.s16 { width: 66.66656% } .w3-col.s17 { width: 70.83322% } .w3-col.s18 { width: 74.99988% } .w3-col.s19 { width: 79.16654% } .w3-col.s20 { width: 83.3332% } .w3-col.s21 { width: 87.49986% } .w3-col.s22 { width: 91.66652% } .w3-col.s23 { width: 95.83318% } .w3-col.s24 { width: 99.99984% } @media (min-width:601px) { .w3-col.m1 { width: 4.16666% } .w3-col.m2 { width: 8.33332% } .w3-col.m3, .w3-quarter { width: 12.49998% } .w3-col.m4 { width: 16.66664% } .w3-col.m5 { width: 20.8333% } .w3-col.m6 { width: 24.99996% } .w3-col.m7 { width: 29.16662% } .w3-col.m8 { width: 33.33328% } .w3-col.m9 { width: 37.49994%; } .w3-col.m10 { width: 41.6666% } .w3-col.m11 { width: 45.83326% } .w3-col.m12 { width: 49.99992% } .w3-col.m13 { width: 54.16658% } .w3-col.m14 { width: 58.33324% } .w3-col.m15 { width: 62.4999% } .w3-col.m16 { width: 66.66656% } .w3-col.m17 { width: 70.83322% } .w3-col.m18 { width: 74.99988% } .w3-col.m19 { width: 79.16654% } .w3-col.m20 { width: 83.3332% } .w3-col.m21 { width: 87.49986% } .w3-col.m22 { width: 91.66652% } .w3-col.m23 { width: 95.83318% } .w3-col.m24 { width: 99.99984% } } @media (min-width:993px) { .w3-col.l1 { width: 4.16666% } .w3-col.l2 { width: 8.33332% } .w3-col.l3 { width: 12.49998% } .w3-col.l4 { width: 16.66664% } .w3-col.l5 { width: 20.8333% } .w3-col.l6 { width: 24.99996% } .w3-col.l7 { width: 29.16662% } .w3-col.l8 { width: 33.33328% } .w3-col.l9 { width: 37.49994% } .w3-col.l10 { width: 41.6666% } .w3-col.l11 { width: 45.83326% } .w3-col.l12 { width: 49.99992% /***width: 25.99992%*****/ } .w3-col.l13 { width: 54.16658% } .w3-col.l14 { width: 58.33324% } .w3-col.l15 { width: 62.4999% } .w3-col.l16 { width: 66.66656% } .w3-col.l17 { width: 70.83322% } .w3-col.l18 { width: 74.99988% } .w3-col.l19 { width: 79.16654% } .w3-col.l20 { width: 83.3332% } .w3-col.l21 { width: 87.49986% } .w3-col.l22 { width: 91.66652% } .w3-col.l23 { width: 95.83318% } .w3-col.l24 { width: 99.99984% } } .plCol { float: left; padding-left: 3px !important; min-height: 32px; } .colThumb { border-left: none; padding-left: 0 !important; } html { overflow: hidden; } a { text-decoration: none; } /* font-family: Arial, Tahoma, Verdana, sans-serif!important; */ body { background: var(--BG-950); color: #eeeeee; } .parent-container { margin-left: auto; margin-right: auto; margin-bottom: 2px; max-width: 3000px; position: relative; } .cloudBtn { /* background: none; */ background: var(--TX-A-COL) !important; border: 1px solid #717779; color: #fff; cursor: pointer; border-radius: 0px; line-height: 1; height: 25px; border-radius: 4px !important; } .chContainer .cloudBtn { height: 37px; width: 100%; margin-top: 18px; font-size: medium; } .cloudBtn.btn-sm { height: 20px !important; } .cloudBtn:hover { /* background: #393D41 !important; */ color: #fff; border: 1px solid #969CA2; /* box-shadow: 0 12px 24px 0 rgba(0, 206, 198, 0.3); */ box-shadow: 1px 3px 20px 0 rgb(0 206 198 / 16%); } .cloudBtn:focus { outline: none; } /* warning */ .cloudBtn.warning { background-color: #FFC107 !important; /* Yellow */ color: #000; } /* Success */ .cloudBtn.success { background-color: #4CAF50 !important; /* Green */ color: #fff; } /* Info */ .cloudBtn.info { background-color: #17A2B8 !important; /* Teal Blue */ color: #fff; } /* Fail */ .cloudBtn.fail { background-color: #F44336 !important; /* Red */ color: #fff; } /* Pending */ .cloudBtn.pending { background-color: #FF9800 !important; /* Orange */ color: #fff; /* White text */ } /* cancel */ .cloudBtn.cancel { background-color: #1b1a19 !important; /* Orange */ color: #fff; border-color: #272626; /* White text */ } .cloudBtn.cancel:hover { color: #fff; border: 1px solid #3f464c; box-shadow: -1px 0px 7px 0 rgb(92 99 99 / 30%); } .automationBtn .fa { font-size: 14px; } .automationBtn:hover { background: #146887; box-shadow: none; transform: rotate(360deg); transition: transform .8s ease-in-out; } .automationBtn { border-radius: 50%; border: none; background: none; min-height: 25px; min-width: 25px; text-align: center; margin-right: 5px; cursor: pointer; color: #fff; /***background-color: #3669da;***/ background-color: #213c43; border: 1px solid #40575d; line-height: 1; box-shadow: var(--btn-shadow); } .automationBtnLg { min-height: 35px; min-width: 35px; padding-left: 12px; line-height: 1; margin-top: 2px; } .automationBtnLg .fa { font-size: 20px; } .automationBtn:focus { outline: none; } .playingBtn { background: #07a9e8; opacity: 1 !important; cursor: not-allowed; } /* .actionBtnContainer { text-align: center; margin: auto; overflow: hidden; line-height: 40px; vertical-align: middle; padding-top: 5px; } */ .imgBtn { background: none; border: none; } .imgBtn:hover { opacity: .5; } .btnsm, .btnSm { padding: 3px 5px; font-size: 85% } .btnDisabled { opacity: .5; pointer-events: none; cursor: not-allowed; } .btnDisabled:focus { border: none !important; } .notAllowed { cursor: not-allowed !important; opacity: .4; } /*.btnPlay{color: #1F954B;} .btnSkip{color: #FFA100;} .btnStop{color: #d81111;} .btnCancel{color: #d81111}*/ .nomargin { margin: 0; } .paddingT2 { padding-top: 2px; } .paddingL10 { padding-left: 10px; } .colorRemaining { right: -7px; text-align: right; } .timerToolTip:after { content: ''; position: absolute; top: 100%; border-width: 8px; border-style: solid; border-color: #21242B transparent transparent transparent; } .timerToolTip { color: #fff; position: absolute; bottom: 5px; padding: 1px 5px; margin: 0; line-height: 1; border: 1px solid #2d2d2d; background: rgba(45, 45, 45, .8); width: 70px; z-index: 0; } .colorCurrent { text-align: center; } .hidden { visibility: hidden; } .visible { visibility: visible; } .noOverflow { overflow: hidden } .fullheight { height: inherit; } .fullwidth { width: 100%; } .operationflex { margin-top: 55%; } .fixHeight { max-height: 32px; } .rAlign { text-align: right; } .lAlign { text-align: left; } .expandHeight { height: 250px !important; } .debug { border: 1px solid red; } .seprator { height: 20px; width: 100%; } .padding5 { padding: 5px; } /*video{ width: 100%;max-width: 411px;object-fit: cover;min-height: 125px;}*/ #videoPart { position: absolute; z-index: 6; right: 0; top: 0; width: 340px; } #videoPart { background: #1B1E24; border-left: 1px solid #1B1E24; height: calc(100vh - 30px); overflow-y: auto; animation: .5s vidPart; padding-top: 2px; } .videoPartCollapse { position: absolute; background: rgba(45, 45, 45, .7); right: 0; top: 320px; line-height: calc(100vh - 400px); vertical-align: middle; animation: animVpart 2s; } .leftWindowCollapse { position: absolute; background: rgba(45, 45, 45, .7); left: 0; top: 320px; line-height: calc(100vh - 400px); vertical-align: middle; animation: animVpart 2s; } @keyframes animVpart { 50% { background: rgba(0, 0, 0, .7); } } .videoPartCollapse .fa, .leftWindowCollapse .fa { background: #000; padding: 10px; } @keyframes vidPart { 0% { right: -400px; } } .videoTbl { width: 100%; } .videoTbl td { text-align: center; cursor: pointer; min-width: 16.5%; padding-top: 5px; } .videoTbl tr:nth-child(1) { background: #565c68; } .videoTbl tr:nth-child(2) { background: #323844; } .videoTbl tr:nth-child(2) td:hover { background: #000; } .videoTbl p { padding: 0px; margin: 0px; } .videoTbl a { border-right: 1px solid #323844; padding: 5px; } .videoTbl a:hover { background: #000; } .statusBar { background: none; padding: 0; position: relative; } .progressBg { background: #333; height: 4px; } #onAirProgress { display: block; width: 0%; background: #8BC34A; height: 4px; max-width: 100%; overflow: hidden; } #elapsedTime::before { position: absolute; left: 50px; top: 0; /**content: '+';***/ font-family: "FontAwesome"; } #remTime::before { position: absolute; right: 50px; top: 0; /***content: '-';***/ font-family: "FontAwesome"; } .currentTime { text-align: center; } .clipTiming p { margin: 0px; padding: 0px; } .clipTiming h6 { margin: 0px; padding: 0px; } .topBar { background: #0e85a5; border: 1px solid #084c5e 0; max-height: 50px; overflow: hidden; } .navTop { background-image: linear-gradient(26644F, 1E4240); position: relative; color: #fff; /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.46), 0 2px 10px 0 rgba(0, 0, 0, 0.42);*/ } .navTop h6, .navTop h4, .navTop .action { margin-top: 5px; transition: margin 1s; } .navLg { height: 175px; } #onAirTitle { position: relative; bottom: 5px; font-size: 10px; } .navLg h6, .navLg h4, .navLg .action { margin-top: 55px; transition: margin 1s; } .px8 { font-size: 8px; } .px10 { font-size: 10px; } .px10clr { color: #e6891e; } .px11 { font-size: 11px; } .px12 { font-size: 12px; } .px13 { font-size: 13px; } .px14 { font-size: 14px !important; } .px15 { font-size: 15px; } .px16 { font-size: 16px; } .px17 { font-size: 17px; } .px18 { font-size: 18px; } .px20 { font-size: 20px; } .px22 { font-size: 22px; } .px25 { font-size: 25px; } .px30 { font-size: 30px; } .textCollapse { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tdTextCollapse { max-width: auto; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .ico { cursor: pointer; padding: 8px; } .ico:hover { color: #000; } .relative { position: relative; } .fixed { position: fixed; } .relativePl { position: relative; padding: 10px 0px 0 0px; } .menuToggle { position: absolute; right: -10px; top: 78px; opacity: .5; cursor: pointer; z-index: 5; } .menuToggle:hover { opacity: 1; } .navToggle { position: absolute; right: 0; bottom: 0; opacity: .5; cursor: pointer; } .navToggle:hover, .onAirPlayerToggle:hover { opacity: 1; } #lowresPreviewPlay { background: var(--background-Color-n34); height: var(--videoHeightPlayerBox); display: inline-block; /* border-left: 3px solid white; */ } #lowresPreviewPlay:hover { opacity: .7; } #lowreVideoPlay, #webRtcPlayer, #lowresPlayer { height: var(--videoHeightPlayerBox) !important; aspect-ratio: 16/9 !important; width: calc(var(--videoHeightPlayerBox) * 16/9); background: var(--d-card); } .fp-player { height: inherit; width: calc(var(--videoHeightPlayerBox) * 16 / 9) !important; } #urlPreBody .fp-player { height: inherit; width: 100% !important; } #webRtcPlayer { /**background: #222;**/ background: var(--BG-900); /* width: 100%; */ /**min-height: 80px;***/ /***max-width: 320px;****/ /**max-width: 260px;****/ text-align: center; position: relative; overflow: hidden; /**max-height: 125px;**/ /* height: 140px; */ /* border-left: 1px solid #FF3434; */ } .is-fullscreen #lowresVideoPlay { height: 100% !important; aspect-ratio: 16/9 !important; /* width: calc(200px * 16/9); */ } /* #lowresVideoPlay{ height: 140px !important; aspect-ratio: 16/9 !important; width: calc(200px * 16/9); } */ .plStatusType { height: 175px; overflow: auto; } /* #webRtcPlayer { border-left: 1px solid #FF3434; } */ #webRtcPlayer video { width: 100.1%; object-fit: fill; max-height: 100%; margin: 0; /* border: 0px solid red; */ margin: auto; } #webRtcPlayer::after { position: absolute; right: 0; top: 0; /**content: 'Overlay';**/ /**z-index: 1;***/ background: #333; width: 50px; height: 20px; font-size: 11px; padding: 5px; cursor: pointer; } .playerOverlay { position: fixed; min-width: 360px; min-height: 135px; /**z-index: 1;**/ bottom: 25px; left: 0; } .reLoad { background: #222; min-height: inherit; /* padding-top: 30px; */ text-align: center; color: red; display: flex; flex-flow: column; justify-content: center; align-items: center; width: 100%; } #onAirPlayer { position: absolute; z-index: 6; top: 70px; left: 0; background: #000; max-height: 180px; } .onAirPlayerHide { animation: onairv 1s; } @keyframes onairv { 0% { left: -300px; } } .onAirPlayerToggle { position: absolute; left: 0px; cursor: pointer; z-index: 8; background: #555555; border-radius: 0 4px 4px 0; padding-left: 4px; } .liveSwitching { position: absolute; right: 0px; cursor: pointer; z-index: 5; background: #555555; padding: 2px 7px; font-size: 16px; border-radius: 4px 0 0 4px; } #liveSwitching { display: none; } .liveSwitching:hover #liveSwitching { display: block; height: 150px; } .liveSwitching select { border: none; padding: 3px; font-size: 13px; min-width: 120px; } .liveSwitching p { margin: 8px 0; font-size: 13px; } #playerToggleIco { border-left: 1px solid #000; padding: 5px; font-size: 110%; } .vidCollapse { display: none; } .lMenu { list-style: none; margin: 0px; padding: 0px; max-width: 450px; } .lMenu li:hover { box-shadow: -3px -3px 4px -4px #2B3E42, 0 7px 9px 0 #2b3e45; /* background: #21242B; */ } .lMenu li { white-space: nowrap; text-overflow: none; padding: 13px 8px; border-right: 0px solid #0c7693; cursor: pointer; display: inline-block; position: relative; text-align: center; } .lMenu li span { margin-top: 5px; } .lMenu li .fa { vertical-align: middle; color: #ddd } .lMenu li span.label { vertical-align: baseline; display: none; } .submenu { display: inline; } .lMenu li:focus { outline: none; } .lMenu sup { color: #fcd307; } .lMenu .tooltiptext { display: none; } .mid { margin-left: auto; margin-right: auto; } .ease { transition: all .3s; transition-timing-function: ease-in-out; } .easeW { transition: width .5s; transition-timing-function: ease-in-out; } .verticalBar { border-right: 1px solid #ccc; height: 100%; } .playlistBar { color: #fff; position: relative; cursor: pointer; /***border-bottom: 1px solid white;***/ border-bottom: 2px solid #000; } .playlistBar p { margin: 0px; padding: 0px; padding-top: 5px; } .playlistBar .w3-table td { margin: 0px; padding: 0px; padding-top: 5px; } .playlistBar .text { padding-top: 5px; } .gridBar { color: #fff; position: relative; cursor: pointer; /***border-bottom: 1px solid white;***/ border-bottom: 1.5px solid #444; } .gridBar p { margin: 0px; padding: 0px; padding-top: 5px; } .gridBar .w3-table td { margin: 0px; padding: 0px; padding-top: 5px; } .gridBar .text { padding-top: 5px; } .tblHeader { min-height: 32px; vertical-align: middle; border-bottom: 1px solid #222; } .tblPadding { -moz-padding-end: 16px; -webkit-padding-end: 8px; } .playlistSec { height: 0px; padding: 0px; display: none; overflow: hidden; } /*.playlistSec:hover{height: 100%;cursor: pointer;}*/ .playlistSec .prev { position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, .6); padding: 5px; cursor: pointer; margin-top: 45px; z-index: 1; } .playlistSec .next { position: absolute; right: 0; top: 0; background: rgba(0, 0, 0, .6); padding: 5px; cursor: pointer; margin-top: 45px; z-index: 1; } .prev:hover, .next:hover { background: #000; } .plSecCollapse { position: absolute; top: 0; cursor: pointer; padding: 0px; z-index: 1; height: 100%; vertical-align: middle; padding-top: 5px; } .plSecCollapse:hover { color: #9399af; } .plSecCollapse .fa { vertical-align: middle } .secCount { position: absolute; z-index: -1; top: 0; font-size: 10px; text-align: center; width: 100%; border-bottom: 1px solid #000; background: rgba(0, 0, 0, .4); } .tblSecPl td, .tblSecPl .w3-col { padding: 1px; color: #b3b9c6; } .tblSecPl .w3-col { padding-left: 5px } .tblSecPl { width: 100%; } .playlistSecCard { margin: 3px 4px 2px 4px; border: 1px solid #363636; cursor: pointer; border-radius: 5px 5px 0 0; } .secHeader { background: #363636; border-bottom: 1px solid #363636; } .secSelected { position: absolute; left: 0; top: 0; z-index: 2; background: rgba(0, 0, 0, .6); width: 100%; height: 100%; } .spaceR10 { margin-right: 10px; } .absolute { position: absolute; } .sticky { position: sticky; } .link { cursor: pointer; } .noLink { cursor: not-allowed !important; } .nopadding { padding: 0px !important; margin: 0px !important; } .playlistLive { background: #e18d00 !important; color: #fff; border-bottom: 1px solid #c37900; } .pStatus { text-transform: uppercase; } .pStatus::after { height: 30px; position: absolute; top: 2px; left: 0; padding: 0px 3px; min-width: 50%; } .overallStatus { position: relative; padding: 0 2px; } .overallStatus .fa { margin-left: 5px; } .overallStatus table { width: 100%; } .overallStatus tbody { background: none !important; } .overallStatus.pending { background: #FBC02D; color: #111; } .overallStatus.fail { background: #FF9494; color: #fff; } .moreStatus { position: absolute; top: 80%; left: 0; background: var(--BG-700); color: #fff; display: none; z-index: 1; min-width: 200px; } .overallStatus:hover .moreStatus { display: block; } .moreStatus td { padding: 1px 5px; } .playlistStop { height: 30px; background: #D81111; position: absolute; top: 2px; animation: transReady 4s; color: #fff; padding: 5px 5px 0 5px; border-radius: 2px 2px 0 0; } .playlisReadyColor { color: #FFA100; } .playlistReadyBorder .pStatus::after { background: #ffa100; color: #000; content: "READY" } .playlistReadyBorder { border-bottom: 1px solid #ffa100; } .playlistStopBorder { border-bottom: 1px solid #D81111; } /***.playlistOnair { background: rgb(11, 102, 35); color: #fff; cursor: not-allowed; border-bottom: 1px solid #8BC34A; }****/ .playlistOnair { background: rgb(11, 102, 35); color: #fff; cursor: not-allowed; border-bottom: 1px solid #8BC34A !important; background-image: linear-gradient(to top left, #26644F, #8BC34A) !important; } .playlistOnair .pStatus::after { background: #388E3C; content: "ONAIR" } .playlistOnairBorder { border-bottom: 1px solid #8BC34A; } .playlistOnairColor { color: #13843e; } @keyframes transOnair { 0%, 100% { background: #13843e; } 75% { background: #0f602e; } } /*.secondaryRow{font-size: 80%;}*/ .secondaryRow { background: none; } .playlistMissing { /*background:#d81111;color: #fff;*/ border-bottom: 1px solid #d81111; } .colClipid { overflow: hidden; text-overflow: ellipsis; } .playlistMissing .pStatus span, .playlistMissing .colClipid span.id { background: #d81111; padding: 0 3px; color: #eee; } tr.playlistDisabled, tr.playlistDisabled button { cursor: not-allowed !important; pointer-events: none; opacity: .4; } .playlistDisabled .fa, .playlistDisabled .pri { color: #B2B8C9 !important; background: none; } /*.playlistSelected{position: absolute;left: 0;top:0;z-index: 1;background: rgba(0,0,0,.6); background: rgba(53, 117, 211,.7); width:100%;height: 100%;}*/ .playlistSelected, .playlistSelected:hover { /* background: var(--background-Color-n7) !important; */ background: var(--BG-950) !important; } .playlistModified { /*background:-moz-linear-gradient(left,#18223a,#1d2f59,#2a3859,#485472);*/ background: none; } .playlistModified .info { position: absolute; left: 0; top: 0; background: #494949; min-width: 150px; line-height: 32px; z-index: 1; border-radius: 0 10px 10px 0; animation: infoAnim 1s; transition: opacity 1s; padding: 5px; opacity: 1; } .info .fa { float: right; font-size: 20px; } @keyframes infoAnim { 0% { left: -100px; opacity: 0; } } .fixPlay { background: #1460aa; } .playlistTM .pStatus span, .playlistTM .colClipid span.id { background: #b37100; height: 30px; position: absolute; top: 0; bottom: 0; left: 0; padding: 0 3px; color: #fff; min-width: 50%; } .border { display: none; position: absolute; width: 100%; bottom: 0; } .border-solid { border: 1px solid #444; } .borderRounded { border-radius: 5px; border: 1px solid #333333 !important; } .pasteableRow .border { border-bottom: 2px dashed #d8c4b8; display: block; } .borde:hover { border-bottom: 2px dashed #d8c4b8; } /*.pasteOptns{position: absolute;z-index: 5;text-align: center;width: 100%;left: 0;margin-bottom: 50px;}*/ .pasteBtns {} .nonPasteableRow, .noPointerEvent { pointer-events: none; } .activeIcon { color: #fff; border-bottom: 1px solid #809bce !important; background: #809bce; outline: none; } .pasteableRow .noPlaylist { border: 2px dashed #5b89e5; } #clipThumb { background: url('../../images/noimage.png')no-repeat; background-size: 32px 32px; height: 32px; width: 32px; } /*span.pri{background:url('../../images/pri.png')no-repeat; background-size:32px 32px;height: 32px; width: 32px;position: absolute;bottom: 0;right: 0;}*/ span.pri { border: 1px solid #6378a8; padding: 3px; text-transform: uppercase; } span.circle { border-radius: 50%; margin-right: 1px; min-width: 20px; min-height: 20px; display: inline-block; text-align: center; } span.hd { background: url('../../images/hd.png')no-repeat; background-size: 32px 32px; height: 32px; width: 32px; position: absolute; top: -5px; left: 0; } .colType span { font-size: 10px; display: block; float: left; text-align: center; text-transform: uppercase; } span.mType { width: 100%; height: 8px; border-bottom: 2px solid #555; } span.type { width: 50%; border-right: 1px solid #666; padding-right: 5px; } span.res { width: 50%; padding-left: 5px; } .typeWrapper { border: 0px solid #444; background: #444; min-width: 60%; float: left; margin: auto; text-transform: uppercase; padding: 0 3px; } .secondaryRow .typeWrapper { background: #222; } .modalBoxSminput { width: 100%; padding: 5px 10px; border: none; border-bottom: 2px solid #fff; background-color: inherit; color: inherit; font-size: 16px; } .confirmBox, .modalBoxSm { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .8); top: 0; /***z-index: 10;***/ z-index: 1009; } #modalBoxSmtbodt tbody { padding: 5px 10px; display: grid; } .confirmMsg { background: #3B3D42; background: var(--d-bg); min-width: 370px; max-width: fit-content; min-height: 100px; border: 1px solid #4B4D51; text-align: center; border-radius: 4px 4px 0 0; margin-right: auto; margin-left: auto; margin-top: calc(100vh - 60vh); } .confirmMsg table { width: 100%; } .confirmMsg table td { padding: 5px 10px; } .confirmMsg table .Theader { background: #161719; background: var(--d-head); } .confirmMsg table .Tfooter { border-top: 0px solid #4e5156; } .confirmMsg table tr {} .lockScreenContainer { position: absolute; width: 100%; height: 100%; background-color: rgba(45, 45, 45, .9); top: 0; z-index: 6; } .lockScreenContainerMin { position: absolute; width: 100%; height: calc(100vh - 65px); background-color: rgba(45, 45, 45, .1); top: 70px; border-top-left-radius: 145px; z-index: 1016; } .primaryWindowOverlay { position: absolute; width: 100%; height: 100%; background-color: rgba(4, 4, 4, .7) !important; top: 66px; z-index: 6; border: none !important; } /*.lockScreenContainer>div{display: table-cell;vertical-align: middle; height: 100vh;}*/ .lockContent { margin-left: calc(100vw - 50%); width: 320px; height: 150px; background: #424959; display: inline-block; transition: all 1s; } .notification { background: #111; max-width: 300px; text-align: center; padding: 3px 5px; border-radius: 4px; } .msgWarn { color: #ffa100; } .msgError { color: #f20000; } .message { cursor: pointer; position: absolute; bottom: 30px; right: 0; z-index: 100; animation: msgLeft .5s; } .messageContent { max-width: 399px; color: #fff; padding: 15px 10px 15px 10px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); border-radius: 4px 0 0 4px; } .messageHide { animation: msgHide .4s; right: -400px; } @keyframes msgLeft { 0% { right: -400px; } } @keyframes msgHide { 0% { right: -10px; } 100% { right: -200px; } } .bgSuccess { background: var(--bgBtnSuccess) !important; border: 1px solid rgba(31, 149, 75, .9) !important; padding: 2px 12px 25px 11px; font-size: 14px !important; } .bgSuccess:hover { /* background: green !important; */ box-shadow: 0 12px 24px 0 rgba(0, 206, 198, 0.3); } .bgWarn { background: rgba(234, 148, 3, .9) !important; } .bgInfo { background: rgba(43, 115, 226, .9) !important; } .bgError { background: rgba(216, 17, 17, .9) !important; } /* .bgDiscard { background: rgb(235, 235, 235, .9) !important; } */ .plListContainer { background: #404242; max-width: 1000px; animation: .2s plCont; padding: 0px; } .plListContainer .topHeader { background: #1B1E24; margin: 0; line-height: 60px; vertical-align: middle; padding: 5px; } @keyframes plCont { 0% { margin-left: -100px } } .plListBody { height: calc(100vh - 130px); overflow-y: auto; } .plListCard { background: var(--d-card); color: var(--d-card-text); margin: 0 5px 10px 0; position: relative; padding: 5px 11px !important; font-size: 11px; overflow: hidden; border-radius: 5px; width: 100%; } .plListAction { position: absolute; row-gap: 6px; /* top: 0; */ /*left: 0; width: 100%; */ width: max-content; height: auto; /***padding: 5px;****/ padding: 5px 8px; background: var(--d-card); color: var(--d-card-text); /* display: none !important; */ z-index: 1; } #segmentStatusHover.plListAction, #segmentTaggingTooltip.plListAction { /* display: none !important; */ z-index: 1; border: 1px solid #ada8a85c; border-radius: 4px; } .plListCard:hover .plListAction { display: flex !important; } td.plListCard { width: fit-content; background-color: transparent !important; } #segmentBody:has(td.plListCard:hover) .plListAction { /* display: flex !important; */ /* height: 100%; */ z-index: 1; /* Stretch overlay to row's height */ } .plListCard button { background: var(--bgBtnSuccess); color: var(--d-card-text); margin: 0; cursor: pointer; border-radius: 4px; } .plListContainer input { border: none; background: #1E2026; color: #fff; padding: 3px 5px; margin-right: 2px; border: 1px solid #545866 } .plListContainer .icon { padding: 3px 7px 3px 7px; margin-right: 3px; } .plListContainer .selected { background: #1E2026; color: #fff; } #plListHeader { margin-top: 2px; min-height: 30px; } .plListTabular { background: #272930; } .plListTabular td { padding-left: 5px; } .plListTabular tr { border: 1px solid #545866; } .bulkOpContainer { background: #666; max-width: 650px; animation: .5s plCont; } .bulkOpContainer .topHeader { background: #1B1E24; margin: 0; line-height: 60px; vertical-align: middle; padding: 5px; } .bulkOpBody { height: calc(100vh - 100px); overflow-y: auto; } .bulkOpCard .info, .bulkOpCard .head { border-bottom: 1px solid var(--d-seprator); font-size: 16px; } .bulkOpCard { background: var(--d-card); margin: 20px 1px; max-width: 160px; } .bulkOpCard.bulkOpCardFull { max-width: 100%; } .bulkOpCard table td { padding: 5px; margin: 0; /* width: 50%; */ } .bulkOpCard input { max-width: 100%; width: 100%; border-radius: 0; border: none; padding: 3px 5px; margin-top: 5px; } .bulkOpCard input[type="checkbox"] { width: 20px; } .bulkOpCard .cloudBtn { /* border: 1px solid var(--d-btn-border) !important; */ } #bulkOpResp { background: #eee; color: rgb(216, 17, 17); } .contentManager { position: absolute; height: calc(100% - 30px); background-color: rgba(0, 0, 0, .5); top: 0; right: 0; z-index: 5; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); animation: contntMgr .5s; transition-timing-function: ease-in-out; transition: all .7s; } @keyframes contntMgr { 0% { right: -400px } } .managerContainer { background: #404242; width: 580px; height: 100%; } .collapse { right: -500px; } .contentManager .topHeader { background: #1B1E24; padding: 7px 5px 7px 5px; } .contentManager .srchbar { background: #4d4f51; padding: 0 5px 0 5px; border-bottom: 0px solid #1B1E24; } .contentManager input { width: 100%; border: none; padding: 5px 2px 5px 2px; background: #1B1E24; color: #fff; } .contentManager .srchbar .cloudBtn { padding: 4px; } .contentManager .srchbar table { padding: 0; margin: 0; margin-top: -15px; } .contentManager .listview { border-bottom: 1px solid #1B1E24; margin-bottom: 1px; cursor: pointer; } .listview .w3-col { padding-top: 5px; } .listview .thumb { padding: 0; } .contentManager .controlIcons { width: 100%; text-align: right; padding: 0 5px 0 5px; } .controlIcons .fa { cursor: pointer; } .controlIcons .fa:hover { color: #1B1E24; } .controlIcons .selected { color: #1B1E24 } .contentManager .selectedCard { background: #0863d8 !important; position: relative; } #contentMgr input[type="checkbox"] { height: 15px; vertical-align: middle; cursor: pointer; } .selectedCard .checked { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); left: 0; top: 0; display: block; z-index: 2; border: 1px solid #4D4F51; font-size: 20px; } .checked { display: none; text-align: center; vertical-align: middle; line-height: 98px; } .checked .fa { color: #FAC02D; } .contentCard { /* background: var( --d-card); */ color: var(--d-card-text); margin: 2px; cursor: pointer; font-size: 10px; position: relative; max-width: 30%; } .contentCard table { width: 100%; } .contentCard td { padding: 2px; } .contentAction:empty { display: none; } .contentAction { position: absolute; width: 99%; height: calc(100% - 25px); background: rgba(0, 0, 0, 1); /* left: 0; */ /* bottom: 0; */ top: 9%; z-index: 3; /* overflow-y: auto; */ } .contentInfo tr { border-bottom: 1px solid #222; } .contentInfo td { padding: 6px 2px !important; word-break: break-word; } .contentInfo tr td:first-child { text-transform: capitalize; } .divOuterContentCard { border: 0px solid grey; width: 100%; height: 95px; border-radius: 8px; background: #20434d; } .divInnerContentCard { border: 0px solid grey; width: 100%; height: 85px; } .imgContentCard { border-top-left-radius: 8px; border-top-right-radius: 8px; } .innerSpanContentCard { position: absolute; margin: -15px 0 0 10px; background-color: #cb0909; padding: 2px; } .detailOuterDivContentCard { /* height: 51px; */ border: 0px solid red; background-color: var(--background-Color-n10); width: 100%; color: white; padding-left: 4px; margin-top: -22px; } .clipTitleContentCard { width: 85%; text-align: left; padding: 4px; font-size: 9px; overflow: hidden; text-overflow: ellipsis; margin-top: -10px; color: wheat; } .clipIdContentCard { width: 80%; text-align: left; padding: 4px; font-size: 10px; overflow: hidden; text-overflow: ellipsis; } #contentLowResPlayr { height: calc(var(--videoHeightPlayerBox)); background: #000; text-align: center; justify-content: center; display: flex; } .secTemplate { min-height: 155px; padding: 0 5px; } .tempCard { line-height: 100px; vertical-align: bottom; margin-right: 5px; border: 1px solid #404242; text-align: center; cursor: pointer; } .tempCard:hover { background: #404242; } #getContent { overflow-y: auto; /**height: calc(100vh - 253px);***/ height: calc(100vh - 360px); padding-top: 5px; padding-right: 10px } .content-listview td { white-space: nowrap; text-overflow: ellipsis; word-wrap: none; word-break: normal; padding: 2px 8px !important; } tr.selectedCard { background: var(--d-card); } .content-listview tr { cursor: pointer; height: 27px; border-bottom: 1px solid var(--d-foot); } .content-listview thead { text-transform: capitalize; background: #444; } /* .contentCard tr:first-child { border-bottom: 1px solid var(--d-seprator); } */ #getContent img { /**max-width: 48px; max-height: 27px;***/ /* width: 100%; */ max-height: 100%; display: block; margin-bottom: 0; object-fit: cover; height: 65px; aspect-ratio: 16/9; } #lowresPreviewPST img { width: 100%; height: 100%; } .contentCard p { margin: 0; } .tag { background: #404242; padding: 2px; margin: 2px; text-align: center; border-radius: 2px; } .promo { position: absolute; left: 0; } ol { padding-left: 15px; margin: 0; } #colConfig { border-bottom: 1px solid var(--d-foot); cursor: pointer; padding: 0 5px; height: 30px; } #colConfig:hover { background: var(--d-foot); } #colConfig>* { padding: 0 5px; cursor: pointer; } .movableColumn { border: 1px dashed #1B1E24 } #confBody .fa:hover { background: rgba(0, 0, 0, .5); } .configContainer { background: #404242; width: 360px; height: 100%; overflow-y: auto; } .configContainer .topHeader { background: #1B1E24; padding: 3px 5px 3px 5px; } .srchbar .tab { padding: 5px; border-right: 1px solid #1B1E24; text-align: center; float: left; cursor: pointer; border-bottom: 3px solid #4D4F51; } .tab:hover { border-bottom: 3px solid #EEEEEE; } .tabActive { border-bottom: 3px solid #EEEEEE !important; } .configContainer .cloudBtn { margin-top: 5px; } #confBody { padding: 5px; } #confBody input { width: 40px; height: auto; text-align: center; background: none; } #confBody input[type=checkbox] { display: inline; vertical-align: middle; } .modifiedConfCol { animation: confCol 5s; } #configuration li .fa { padding: 10px; border: 1px solid #404242; min-width: 40px; text-align: center; } @keyframes confCol { 0% { background: -moz-linear-gradient(left, #0A0B0E 5%, #2C313A, #454D5C) } } .editModeInfo { position: absolute; right: 0; bottom: 0; padding: 2px 5px; z-index: 6; } .accessGainedByUser { background: #823204; border: 1px solid #A33E05; animation: editMode 5s ease-in; } .editModeLg { padding: 2px 5px; bottom: 25px; } .editModeInfo small { opacity: .8; } .autoRevoke { font-size: 12px !important; opacity: .7; } .editModeInfo table { display: none; } .editModeInfo table td { padding-top: 3px; padding-right: 10px; } .editModeLg table { display: block; } .editModeLg .editMLabel { margin-bottom: 5px; } .editAllowed { background: #557FDF; } .editNotAllowed { background: #FF6008; } .editAllowed .fa { color: #fff !important; } .editNotAllowed .fa { color: #fff !important; } .accessGainedByMe a { padding: 5px; border: 1px solid #214FB5; background: #214FB5; cursor: pointer; } .accessGainedByMe a:hover { background: #2456C5; border: 1px solid #153272; } .accessGainedByUser a { padding: 5px; border: 1px solid #2F1100; background: #2F1100; cursor: pointer; } .accessGainedByUser a:hover { background: #7E2D00; border: 1px solid #2F1100; } .multipleSession { background: #0B2242 !important; border: 1px solid #0B2242 !important; } .accessGainedByMe { background: #3669DA; border: 1px solid #3669DA; animation: editModeMe 5s ease-in; } @keyframes editModeMe { 30% { background: #4775DD } 75% { background: #5882E0 } } .minimize { position: absolute; right: 0; top: 0; background: #3669DA; text-align: center; padding: 0 5px 0 5px; } .accessRequest { position: absolute; top: 0; padding: 0 4px 0 4px; left: 0; animation: accRequest 5s; } @keyframes accRequest { 0% { opacity: .7; } 100% { background: #0D0D32; border: 1px solid #0D0D32; } } .footer { background: var(--footerBackground); height: 25px; font-size: 10px; z-index: 1010; } #editPlRow td { padding: 3px; } .labelBar { background: #424959; border-bottom: 4px solid #535E72; } table { border-collapse: collapse; } .selRowTbl { max-width: 98%; min-width: 98%; height: 100%; border: 1px solid #242c3d; margin: 1px; margin-bottom: 5px; border-collapse: collapse; background: rgba(0, 0, 0, .5); } .selRowTbl .fa { display: none; font-size: 130%; } .selRowTbl:hover .fa { display: block; } /*.selRowTbl tr:first-child{border-bottom: 1px solid #1B1E24;background: #3e434c;}*/ /*#selRowActionBar{background: #424959;border-bottom: 4px solid #535E72;min-height: 40px;padding: 5px;padding-top: 8px;} #selRowActionBar td{border-bottom: 3px solid #424959; text-align: center;} #selRowActionBar .fa{cursor: pointer;} #selRowActionBar .fa:hover{color: #e8cda4;}*/ #editPlRow form input { width: 100%; border: none; border-bottom: 1px solid #4D5364; background: none; color: #eee; } #editPlRow form select { width: 100%; border: none; border-bottom: 1px solid #4D5364; background: #333; color: #eee; } #editPlRow form.readonly input, #editPlRow input:disabled { background: #1B1E24; color: #ccc; border: none; border-bottom: 1px solid #1B1E24; pointer-events: none; } #editPlRow form.readonly select { display: none; } #editPlRow form.readonly input[type=checkbox] { display: none; } .eventTLabel { display: none; } .readonly .operations { display: none; } .readonly .radio-group { display: none; } .readonly .eventTLabel { display: block; padding: 8px 0 8px 0; } .readonly .editAudio { display: none; } #editPlRow .segTag { display: inline-block; width: 32px; } input[type=radio] { position: absolute; visibility: hidden; display: none; } label { display: inline-block; cursor: pointer; padding: 4px 5px; color: #fff; } input[type=radio]:checked+label { /* background: var(--d-card); */ background: #20434d; } .radio-group label+input[type=radio]+label { /* border-left: 1px solid var(--d-card); */ } .radio-group { border: 0px solid var(--d-card); display: inline-block; overflow: hidden; text-transform: uppercase; font-size: 10px; } .radio-group-lg { background: #252930; display: inline-block; overflow: hidden; padding: 2px; width: 100%; } .radio-group-lg label { display: inline-block; cursor: pointer; padding: 10px; width: 33.33%; border-right: 1px solid var(--d-card); text-align: center; } .radio-group-lg input[type=radio]:checked+label { background: var(--d-card); } .tooltip { position: relative; } .tooltip .tooltiptext { visibility: hidden; background: #6d4c41; box-shadow: 0 8px 6px -6px black; color: #fff; text-align: center; border-radius: 2px; padding: 5px; position: absolute; z-index: 2; top: 90%; left: 1%; transition: opacity 1s; min-width: 150px; line-height: 30px; } .tooltip .tooltipleft { visibility: hidden; min-width: 150px; background: #6d4c41; box-shadow: 0 8px 6px -6px black; color: #fff; text-align: center; border-radius: 2px; padding: 5px; position: absolute; z-index: 1; top: 90%; right: 0; transition: opacity 1s; line-height: 30px; } .tooltip .tooltipleft::after { content: ""; position: absolute; bottom: 100%; right: 5%; margin-left: 0px; border-width: 10px; border-style: solid; border-color: transparent transparent #6d4c41 transparent; } .tooltip .tooltiptext::after { content: ""; position: absolute; bottom: 100%; left: 5%; margin-left: 0px; border-width: 10px; border-style: solid; border-color: transparent transparent #6d4c41 transparent; } .tooltip:hover .tooltiptext, .tooltip:hover .tooltipleft { visibility: visible; } .or { background: #494949; height: 1px; margin: 10px; opacity: .8 } .Scroll { position: relative; } .Scroll .fa { position: absolute; right: 100%; padding: 2px 5px; } .Scroll .fa:hover { background: #FFA100; color: #000; cursor: pointer; } .Scroll .fa-angle-double-right { top: 15px; } .Scroll .fa-angle-double-left { top: 0; } input[type=search]::-webkit-search-cancel-button { height: 12px; width: 12px; background: #FFF; color: #fff; /* -webkit-mask-image: url("data:image/svg+xml;utf8,");*/ -webkit-mask-image: url("data:image/svg+xml;utf8,"); } .tabWrapper { width: calc(100vw - 100px); float: left; overflow-x: auto; overflow-y: hidden; display: table-row; height: 52px; scroll-behavior: smooth; } .chContainer { position: absolute; width: 100%; height: 100%; /* / background-color: rgba(0, 0, 0, .8); / / top: 0; / / z-index: 1010; / / overflow-y: auto; / / */ background-image: url(../../core/image/loginbg.6ce8cdc00d57d0ae5f7c.png); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: bottom; } .topHeight { min-height: 70px; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; } .topBelowHeight { height: 45px; } .channelTabBar { /* background: #215646; */ height: 56px; } .channelTab { border-right: 1px solid #0e85a5; padding: 7px; display: table-cell; min-width: 100px; text-align: center; cursor: pointer; opacity: .6 } .channelTabBar .tItems { /* border-left: 1px solid #333; */ width: 40px; padding: 11px 6px; text-align: center; cursor: pointer; vertical-align: middle; } .closeBtn:hover { background: #726f6f; } .channelTab:hover, .channelTab:focus { opacity: 1; } .selectedTab { background: #0e85a5; opacity: 1; } .channelTab .fa { margin-left: 10px; display: none; } .chFilter { text-align: right; padding: 5px; } .chFilter select { border: none; margin-left: 10px; } .selChBar { background: #303030; border-bottom: 0px solid #3C3C3C; padding: 7px 10px; font-size: 120%; text-align: center; } .channelCard { /* background: #262626; */ background: var(--BG-700); max-width: 222px; /**min-width: 200px;**/ min-width: 222px; min-height: 190px; padding: 0; height: 100%; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); cursor: pointer; display: inline-block; } .channelCard:hover { box-shadow: none; } .channelCard td { padding: 0px; } .channelCard tr:first-child { border-bottom: 1px solid #494949; font-size: 120%; text-align: center; } .channelCard .player { height: 125px; width: 222px; display: flex; text-align: center; vertical-align: bottom } .player .fa { margin-top: 50px; } .player:hover .fa { border-bottom: 3px solid #CF4E06; } .custInfoCard { margin-left: auto; margin-right: auto; background: white; padding: 5px; min-height: 450px; max-width: 430px; padding: 28px; /* margin-top: calc(100vh - 82vh); */ text-align: center; border-radius: 30px; } .custInfoCard td { padding: 5px 15px; text-align: left; color: black; } .custInfoCard tr:first-child { border-bottom: 1px solid #29282857; font-size: 120%; background: white } .custInfoCard input, .custInfoCard select { border: 1px solid #adadad; border-radius: 9px; padding: 15px; background: #fff; /* height: 35px; padding: 5px; */ width: 100%; box-shadow: 0 3px 6px -6px #0E0E0E; border-radius: 5px; } .custInfoCard input:focus-within { border: 1px solid #0d99ff !important; border-radius: 9px; } .custInfoCard .fa { font-size: 120%; margin-right: 4px; color: #4682B4; } .more:hover .navigationMoreMenus { display: block; } .more:hover+.moreMenus, .more:hover>span>.moreMenus, .more:hover>.moreWaterMarkingMail, .more:hover>.moreMenus { display: block; } /* .more:hover ul.dropdown-menu { display: flex; } */ .more:hover .moreMenus>ul.dropdown-menu:first-child { display: flex; } .more:hover .navigationMoreMenus>ul.dropdown-menu:first-child { display: flex; } .moreMenus { position: absolute; top: 100%; right: 0; min-height: auto; /***min-width: 200px;****/ min-width: 320px; background: var(--background-Color-n10); color: #fff; z-index: 55; font-size: 13px; display: none; border: 1px solid #3d434a; } .moreWaterMarkingMail { position: absolute; top: 56%; right: 10px; min-height: auto; min-width: 320px; background: var(--background-Color-n10); color: #fff; z-index: 55; font-size: 10px; display: none; border: 1px solid #3d434a; } .moreWaterMarkingMail:after { position: absolute; bottom: 100%; right: 150px; content: ""; border-width: 15px; border-color: transparent transparent var(--background-Color-n10) transparent; border-style: solid; } .navigationMoreMenus { position: absolute; top: 97%; /* left: -78px; */ left: 0px; min-height: auto; background: #303238; color: #fff; z-index: 55; font-size: 13px; display: none; } .navigationMoreMenus { min-width: 201px !important; background-color: #15212F; right: -30px; border-radius: 5px; border: 0px solid rgba(255, 255, 255, 0.20); flex-shrink: 0; padding: 0px 0px; } .navigationMoreMenus .moreIcon { display: inline-flex; align-items: flex-start; flex-flow: row wrap; gap: 45px; } .cardDashboarChannelName .moreMenus { min-width: 200px; /* top: 35px; */ background-color: var(--BG-700); left: 10px; /* height: 134px; */ border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.20); flex-shrink: 0; padding: 0px 0px; } .cardDashboarChannelName .moreMenus:after, .navigationMoreMenus .moreMenus:after { display: none; } .moreMenus:after { position: absolute; bottom: 100%; right: 5px; content: ""; border-width: 15px; border-color: transparent transparent var(--background-Color-n10) transparent; border-style: solid; } /* .navigationMoreMenus:after { position: absolute; bottom: 100%; right: 5px; content: ""; border-width: 15px; border-color: transparent transparent #21242B transparent; border-style: solid; } */ .navigationMoreMenus_NOTUSED:after { position: absolute; bottom: 100% !important; /* right: 35px !important; */ right: 100% !important; left: 73px; content: ""; border-width: 7px; border-color: transparent transparent #00CEC6 transparent; border-style: solid; } .moreMenus p { margin: 0; padding: 5px 10px; text-align: left; border-top: 1px solid #4c5262; position: relative; } .moreMenus p:hover { background: var(--background-Color-n8); } .moreMenus button { position: absolute; right: 2px; top: 2px; font-size: 11px; } .navigationMoreMenus ul.dropdown-menu { padding: 0px 0px; position: absolute; /* padding-right: 0px; */ flex-direction: column; align-items: flex-start; /* gap: 30px; */ display: none; width: 200px; min-width: 10rem; margin: 0; font-size: 1rem; color: #212529; list-style: none; background-clip: padding-box; border: 1px solid #615a5a3d; border-radius: 0.375rem; text-align: left; border-radius: 5px 5px 5px 5px; background: var(--color-background-bg-800, #15212F); flex-shrink: 0; } .navigationMoreMenus ul.dropdown-menu>li { width: 100%; border-bottom: 1px solid var(--BG-600); } .navigationMoreMenus ul.dropdown-menu>li:last-child { border: none; } .dropdown-item:hover { color: #fff; fill: #fff; stroke: none; background: none !important; } a.dropdown-item>label, a.dropdown-item>span, div.dropdown-item>label, div.dropdown-item>span { width: -webkit-fill-available; max-width: 100px; text-align: left; color: #FFF; } .dropdown-submenu:hover, .dropdown-item:hover { background-color: var(--BG-700); } .dropdown-item:hover>label, .dropdown-item:hover>span, .dropdown-itemn:hover>div>svg>path { color: var(--TX-A-COL); fill: var(--TX-A-COL); stroke: none; } a.dropdown-item:hover>div>svg>path, div.dropdown-item:hover>div>svg>path, a.dropdown-item:hover>svg>path, div.dropdown-item:hover>svg>path { color: var(--TX-A-COL); fill: var(--TX-A-COL); stroke: none; } a.dropdown-item>svg:nth-of-type(2) { margin-right: 15px; } .dropdown-item { height: inherit; gap: 8px; min-height: inherit; display: inline-flex !important; flex-direction: row !important; align-items: center; /* padding: 0px 15px; */ } .dropdown-submenu { width: 100%; position: relative; /* line-height: 15px; */ height: 38px; padding: 0px 10px 0px 20px; } .dropdown-submenu>.dropdown-item { display: block; width: 100%; /* padding: 0.25rem 1rem; */ clear: both; font-weight: 400; color: #212529; text-align: inherit; text-decoration: none; white-space: nowrap; background-color: transparent; border: 0; border-radius: 0; } .dropdown-submenu>.dropdown-item path { fill: #FFF; } .dropdown-submenu>.dropdown-item>ul.dropdown-menu { position: absolute; display: none !important; left: 100%; /* gap: 20px; */ /* padding: 0px 10px 0px 20px; */ top: 0px; } .dropdown-submenu>.dropdown-item>ul.dropdown-menu>li { height: 38px; } .dropdown-submenu:hover>ul.dropdown-menu { display: flex !important; } .dropdown-submenu:hover>.dropdown-item>ul.dropdown-menu { display: flex !important; left: calc(100% + 0px); top: calc(100% - 38px); } .dropdown-submenu.moreSubMenu::after { /* content: "⮞"; */ content: "»"; float: right; margin-right: 5px; color: #cdc0c0; } .navbarDropdownMenuLink>li { min-height: inherit; display: inline-flex !important; align-items: flex-start; padding: 0px 15px; } .alerts td { text-align: left; padding: 0 8px; border-top: 0px solid #000; margin: 0; font-size: 10px; } .alerts th { text-align: left; padding: 1px; border-bottom: 0px solid rgba(255, 255, 255, .2); margin: 0; font-size: 10px; padding-top: 15px; } .cardDashboarChannelName .alerts td { text-align: left; padding: 0 8px; border-top: 0px solid #000; } .cardDashboarChannelName .alerts th { text-align: left; padding: 1px; border-bottom: 0px solid rgba(255, 255, 255, .2); margin: 0; font-size: 10px; padding-top: 15px; } .alerts th.nopadding { padding-top: 5px; } .alerts a { text-decoration: none; width: 100%; display: block; } .alerts .missingCount { background: #D81111; } .alerts p { margin: 0; } #alerts .fa { border: 1px solid transparent; color: #36c210; } .alerts .fa-times-circle { font-size: 12px !important; color: #D81111 !important; } .alerts .count { padding: 0 4px; margin-right: 2px; } .cardDashboarChannelName .alerts .count { border-radius: 50%; font-family: Poppins; font-size: 10px; font-style: normal; font-weight: 500; width: 20px; height: 20px; display: flex; text-align: center; margin: auto; align-items: center; padding-top: 2px; justify-content: center; border: 1px solid #D81111; max-width: 25px; max-height: 25px; } .alarmFound { animation: alertAnim 1.5s; color: #D81111 !important; } @keyframes alertAnim { 0% { transform: rotate(15deg); border: 1px solid #D81111; } 100% { transform: rotate(-10deg); } } .rowCount { position: absolute; bottom: 60px; right: 0; display: none; z-index: 6; background: rgba(45, 45, 45, .9); min-width: 150px; } .rowCount table { width: 100%; } .rowCount td { padding: 3px 5px; text-align: left; } .rowCountInfo:hover .rowCount { display: block; } #gfxOperation textArea { resize: vertical; width: 100%; background: var(--d-foot); border: none; color: #fff; padding: 5px; min-height: 200px; max-height: 400px; } #gfxOperation p { padding: 5px; margin: 0; } .version { background: #555555; padding: 0 5px; border-radius: 3px; } .version:hover { background: none; border: 1px solid #555555; } .versionHistory { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .2); top: 0; z-index: 5; } .versionHistory>div { max-width: 700px; margin: auto; background: #666; height: 80%; margin-top: 5%; animation: aminVersion .5s; } @keyframes aminVersion { 0% { margin-top: 0; opacity: .1; } } .versionHistory .headInfo { border-bottom: 1px solid #333; background: #333; margin: 0; padding: 5px; } .versionHistory .changesLog { margin: 0; padding: 5px; overflow-y: auto; height: 94%; } .playlistComment { width: 100%; background: #807575; text-align: center; } .playlistComment .commentLabel { line-height: 25px; text-transform: capitalize; color: #fff; } .playlistComment .bar { border-bottom: 1px dashed #717A81; } .playlistComment .commentSno { position: absolute; padding: 3px; top: 9px; background: #000; z-index: 1; } .playlistComment .delComment { position: absolute; padding: 0 15px; top: 0; right: 0; background: #2C303A; cursor: pointer; display: none; } .delComment:hover { background: #D51010; color: #fff; } .playlistComment:hover .delComment { display: block; } .playlistComment:hover~.delComment { display: block; } .toggleSwitch { position: relative; width: 100%; border-bottom: 1px solid #888; min-height: 35px; } .toggleSwitch input { display: none !important; } .toggleSwitch input:checked+.switchSlide { background: #3A6CDB; } .toggleSwitch input:checked+.switchSlide:before { content: "On"; -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); background: #fff; color: #000; font-size: 10px; text-align: center; } .switchSlide:before { position: absolute; content: "Off"; height: 15px; width: 26px; left: 4px; bottom: 5px; background-color: #ccc; -webkit-transition: .4s; transition: .4s; color: #000; font-size: 10px; text-align: center; border-radius: 2px; } .switchSlide { position: absolute; top: 5px; right: 0; cursor: pointer; width: 60px; height: 25px; background: #939393; transition: .4s; border-radius: 1px; } .toggleSwitch select { border: none; display: inline-block; position: absolute; right: 0; top: 5px; padding: 3px; background: #939393; color: #fff; } .intervalContainer { padding: 5px; border-bottom: 1px solid #333; } .intervalContainer input { border: 1px solid #aaa; text-align: left !important; margin-left: 5px; } .searchBox { position: absolute; top: 0; width: 100%; left: 0; z-index: 5; transition: 2s; animation: srchBx .5s; } .searchArea { max-width: 400px; margin: auto; background: var(--background-Color-n10); transition: 1s ease-in; border: 2px solid transparent; border-color: rgb(76 80 83) rgb(76 80 83) rgb(89 95 101); } #findResult { padding: 5px; } @keyframes srchBx { 0% { opacity: .5; top: -200px; } } .searchArea table { width: 100%; } .searchArea input { width: 80%; padding: 5px; height: 26px; background: var(--background-Color-n21); border-radius: 4px; color: #fff; border: 1px solid var(--d-input); } .searchArea .fa-times-circle { float: right; cursor: pointer; padding: 5px; font-size: 15px; } .searchArea .fa-times-circle:hover { color: #D81111; } .searchArea .tblHead { background: var(--background-Color-n1); line-height: 32px; border-bottom: 1px solid #1F3044; font-size: 110%; } .searchArea td { padding: 0 5px; min-width: 15%; font-size: 10px; word-wrap: none; } .searchArea .toggleSwitch { max-width: 50px; border-bottom: none; } .searchArea .toggleSwitch input:checked+.switchSlide { background: #4973A3; } .searchArea .switchSlide { width: 45px; left: 0; top: 0; height: 22px; border-radius: 2px; } .searchArea .toggleSwitch input:checked+.switchSlide:before { -webkit-transform: translateX(15px); -ms-transform: translateX(15px); transform: translateX(15px); font-size: 8px; } .searchArea .switchSlide:before { height: 11px; width: 20px; left: 4px; bottom: 5px; font-size: 8px; } .searchArea .srchBtn { background: #4973A3; border: 1px solid #4973A3; height: 32px; cursor: pointer; margin-left: 5px; color: #fff; } .searchArea .cloudBtn { font-size: 12px; margin-left: 2px; height: 26px; } .searchArea .srchBtn:hover { opacity: .8; } .ucase { text-transform: uppercase; } #selectedF { background: #333; padding: 5px; } .gfxContent { background: #555555; height: 95%; border-left: 0px solid #444; } .gfxContent p { background: #444; margin: 0; padding: 5px; } #gfxMedia { height: calc(93vh - 70px); overflow-y: auto; border-left: 1px dashed #444; } .gfxCard { height: 100px; background: #444; margin: 5px 5px 0 0; font-size: 12px; } .gfxCard:hover { background: #314E6E; cursor: pointer; } .gfxCard table { width: 100%; } .gfxCard td { text-align: center; padding: 3px; } .gfxPlayer { text-align: center; position: relative; border: 0px solid red; padding-top: 75%; background: url(/cloud/images/alphaBg.gif) center; overflow: hidden; } .gfxPlayer video { padding: 0; margin: 0; height: auto; width: 100%; } .gfxPlayer img {} #gfxPlayer { position: absolute; bottom: 0; left: 0; z-index: 0; } .gfxContainer p { margin: 5px 0; } .gfxPlayer .overlay { position: absolute; left: 0; top: 0; opacity: 1; filter: blur(0px); background: transparent; height: 100%; } .overlay_seg { position: absolute; left: 0; top: 0; opacity: 1; filter: blur(0px); background: transparent; height: calc(100% - 28px); width: 100%; z-index: 2; } .overlay_seg:hover { /* background: rgba(0, 0, 0, .85); */ transition: all .3s ease-in; cursor: pointer; } .overlay:hover { background: rgba(0, 0, 0, .85); transition: all .3s ease-in; cursor: pointer; } .overlayOpr { position: absolute; right: 0; top: 0; width: 50px; background: #000; z-index: 100; display: none; height: 100%; } .overlayOpr .cloudBtn { font-size: 12px; min-width: 40px; } .overlayOpr .fa { display: block; } .overlay:hover .overlayOpr { display: block; } .gfxInfo {} .gfxInfo p { margin: 0; position: relative; } #gfxInfo { padding: 0; position: relative; min-height: 250px; max-height: 270px; overflow: auto; } .overlaySetting { background: rgba(0, 0, 0, 0.8); min-width: 50%; height: 98%; position: absolute; right: 0; top: 0; padding: 5px; } .setHead { border-bottom: 1px solid #666; } .overlaySetting table { min-width: 80%; } .overlaySetting td { padding: 5px; } .overlaySetting input { border: none; padding: 5px; background: #777; color: #fff; max-width: 150px; display: block; } .gfxContainer td { padding: 2px; text-transform: capitalize; } .gfxContainer tbody { border: 0px solid #111; padding: 5px; } .gfxContainer input, .gfxContainer select { outline: none; border-radius: 0; border: 1px solid #eee; } .gfxBar { background: #444; padding: 5px; } .paramTab { background: #222; padding: 5px; margin-right: 8px; padding: 7px; display: inline-block; } .paramTab:hover, .selectedParam { background: #000; cursor: pointer; } .temFiles { background: #333; text-align: center; min-height: 80px; margin: 5px 5px 0 0; padding: 5px; cursor: pointer; } .temFiles .fa { margin-bottom: 5px; } .temFiles:hover { background: #000; } .temFilesSelected .temFiles { background: #000; } .gfxContainer ul { list-style: none; margin: 0; padding: 0; } .gfxInfo .cloudBtn { font-size: 10px; min-width: 30px; } .gfxInfo .show { display: none; } .gfxInfo .hide { display: inline-block; } .hiddenOverlay .show { display: inline-block; } .hiddenOverlay .hide { display: none; } .tciker { z-index: 20; bottom: 7px !important; position: absolute; left: 0; width: 100%; } marquee { padding: 0; margin: 0; } .tciker p { padding: 5px; margin: 0; } .tickerArea { background: #777; padding: 5px; max-height: 70%; position: absolute; right: 0; top: 0; width: 100%; overflow-y: auto; } .tickerArea input, .tickerArea select { height: 30px; border: none; padding: 2px; } .tickerArea input:out-of-range { border: 1px solid red; } .tickerArea .inputSm { width: 68px; } .tickerArea td { padding: 5px 0; } .tickerArea span { display: block; font-size: 10px; } .gfxContainer li { background: #444; padding: 5px; border-bottom: 1px solid #555; } .gfxPlayer .plyIcon { margin: auto; margin-top: 150px; } .minGfx { top: calc(100% - 68px); height: 40px; overflow: hidden; background: none; } .tickerArea .w3-col { margin-bottom: 20px; } .tickerArea .toggleSwitch { max-width: 50px; } .tickerArea .toggleSwitch input:checked+.switchSlide { background: #000; } .tickerArea .switchSlide { width: 50px; left: 0; top: 0; height: 21.5px; border-radius: 0px; } .tickerArea .toggleSwitch input:checked+.switchSlide:before { -webkit-transform: translateX(15px); -ms-transform: translateX(15px); transform: translateX(15px); font-size: 8px; } .tickerArea .switchSlide:before { height: 11px; width: 20px; left: 4px; bottom: 5px; font-size: 8px; } .deleteDiv { animation: delDiv .5s ease-out both; } @keyframes delDiv { 100% { opacity: 0; display: none; } } .secTimeline { max-height: 25px; } .secTimelineData { display: none; position: absolute; z-index: 2; top: 0; left: 0; text-transform: capitalize; min-width: 250px; text-align: left; padding: 5px; background: #0B2240; color: #000; } .timelineSeg { float: left; width: 10%; text-align: center; font-size: 10px; margin-top: -3px; position: relative; } .timelineSeg:hover .secTimelineData { display: block; } .readonlyMode { z-index: 100; position: absolute; line-height: 15px; width: 100%; background: #0B2242; color: #fff; bottom: 28px; left: 0; text-align: center; font-size: 12px; padding: 5px; transition: all .3s ease-in; } .readonlyLg { bottom: 40%; line-height: 150px; font-size: 18px; box-shadow: 0 6px 6px -6px #000; } .loginUser { text-transform: capitalize; width: max-content; } .audioMapping { position: absolute; width: 100%; height: 100%; z-index: 5; left: 0; top: 0; background: rgba(0, 0, 0, .5); } .amContainer { background: #555555; max-width: 670px; min-height: 40vh; margin: auto; margin-top: 30px; } .amHead { background: #444; padding: 5px; border-bottom: 1px solid #333; font-size: 15px; } .amFoot { border-top: 1px solid #333; height: 40px; } .amBody { padding: 5px; } .amBody table { min-width: 100%; } .amBody input[type=checkbox] { vertical-align: baseline; padding: 5px; } .amBody select, .amBody input { width: 150px; padding: 0 3px; height: 20px; } .newBtn { background: none; border: 1px solid #fff; cursor: pointer; color: #fff; padding: 4px 7px; } .newBtn:hover { background: #000; border: 1px solid #eee; } .newBtnSM { padding: 1px 3px; font-size: 11px; } .playlistContainer { overflow-y: hidden; margin-top: 0; background: #417372; max-width: 100%; } #playlistContainer:is(.list-view) #TBODY { height: calc(100vh - 185px) !important; } #playlistContainer:is(.grid-view) #TBODY { height: calc(100vh - 135px) !important; } #TBODY.expandedTbody { height: calc(100vh - 162px) !important; } /* #playlistContainer:not(.expandedTbody) { height: calc(100vh - 113px) !important; border: 1px solid blue; } */ #playlistContainer, #videoPlayerContainer { /* height: calc(100vh - 113px) !important; */ height: calc(100vh - 130px) !important; /* border: 1px solid blue; */ } #playlistContainer:is(.withoutPageFooter), #videoPlayerContainer:is(.withoutPageFooter) { height: calc(100vh - 85px) !important; } #playlistContainer:is(.subHeader_old) { height: calc(100vh - 113px) !important; /* border: 1px solid red; */ } #playlistContainer:is(.expanded):is(.playlistModule) { height: calc(100vh - 2px) !important; /* border: 1px solid red; */ } #playlistContainer:not(.expanded):is(.playlistModule) { height: calc(100vh - 60px) !important; /* border: 1px solid orange; */ } #playlistContainer.expandedTbody { height: calc(100vh - 170px) !important; } .userScrolling .fixHead { display: none; } .playlistTable { min-width: 1600px; width: 100%; border-collapse: collapse; margin-top: 0; } .playlistTable tbody { background: rgb(96, 96, 96) } /* .playlistTable thead div{position: absolute; top: 0;background: #000;z-index: 1;width:100%;left:0;text-transform: uppercase;text-overflow: ellipsis; overflow: hidden;white-space: nowrap;} */ .playlistTable thead div { margin-right: 5px; text-transform: uppercase; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .playlistTable td { padding: 0; font-size: 12px; line-height: 22px; margin: 0; } .playlistTable tbody tr { position: relative; } .wrapper { padding-top: 0px; overflow: hidden; } .titleColumn { min-width: 180px !important; } .playlistTable thead td { position: -webkit-sticky; position: sticky; vertical-align: middle; top: 0; z-index: 1; background: #eee; color: #000; } .colResizer { --webkit-column-rule-style: dashed; --moz-column-rule: dashed; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; min-width: 100%; } .colResizer:hover { resize: horizontal; } .selector span { position: absolute; z-index: 1; text-align: center; width: 100%; right: 0; top: 0; height: 23px; background: rgba(45, 45, 45, .5); } .selector span:empty { width: 0px; } .oprWrap { max-width: 90%; margin: auto; padding-top: 8px; min-height: 60px; } .selectedCount { background: #FAC02D; border-radius: 50%; text-align: center; min-height: 12px; min-width: 12px; color: #000; display: inline-block; position: absolute; left: 5%; /*****Initially 85******/ top: 0; font-size: 9px; padding: 0 1px; } .cutRow { background: #282828; opacity: .5; transition: display 1s; border: 1px dashed #eee !important; pointer-events: none; } img.thumbImg { width: 64px; height: 34px; transition: all .5s; padding: 0 !important; margin: 0 !important; position: absolute; top: 0; } .material-icons { font-size: 28px; } .gfxThumb { max-width: 100%; height: auto; max-height: 100px; width: -webkit-fill-available; margin-bottom: 2px; } #schedulerCtrl button { width: 31%; height: 100%; } .cueIdCard { width: 50%; } .activeFS { /**opacity: .5;***/ } #liveFeed { font-size: 120%; color: #e18d00; position: absolute; left: 49%; top: -9px; } .blink { color: #0b6623 !important } .previewbar { background: #555; padding: 0 5px; position: relative; height: 2px; } #previewbar { position: absolute; top: 0; left: 0; height: 100%; background: rgb(34, 139, 34); } .previewbar span { position: absolute; } #prevElFrame { top: 15px; left: 0; } #prevRemFrame { right: 0; top: 15px; } input[type=range] { width: 100%; outline: none; background: none; border: none; position: absolute; top: -6px; left: 0; } #xFactor, #playType { background: #333; height: 24px; color: #fff; border: 1px solid #111; min-width: 50px; } .otherAction { background: #333; text-align: center; } .masterSlave { position: absolute; height: 100%; width: 360px; background: #000; z-index: 5; right: 0; top: 0; } .chLock { font-size: 70%; } .previewMetaTbl { width: 100%; } .previewMetaTbl td { padding: 5px !important; } .previewMetaTbl tr:first-child { background: #555; } .previewMetaTbl tr { border-bottom: 1px solid #555; } textarea:disabled { cursor: not-allowed; } .fa-plug { font-size: 17px !important; } input.fNreplace { max-width: 50%; } input.fNrSeg { max-width: 30%; margin-left: 5px; } .fNrContainer { max-height: calc(100vh - 450px); overflow: auto; } .br { border-top: 1px solid #999; } .err { color: red; } .findTbl { width: 100%; } .findTbl td { width: auto !important; padding: 1px 5px !important; margin: 0; font-size: 10px; } .fNreplaceTbl input[type=radio] { display: inline-block; top: 0; visibility: visible; position: static; width: 20px; vertical-align: bottom; margin-left: 10px; } .mediaColor { border-collapse: collapse; } .mediaColor td { padding: 0 3px; text-align: center; position: relative; } .mediaColor td span { height: 8px; display: block; position: absolute; top: 95%; width: 100%; left: 0; z-index: -1; } .mInfo td { text-align: left; } .fa-trash:hover { color: red; cursor: pointer; } .fa-eye:hover { color: var(--bgBtnSuccess); cursor: pointer; } .accessDenied { pointer-events: none; display: none !important; } .exAudioTbl { width: 100%; margin-top: 20px; } .exAudioTbl td { padding: 10px; } .exAudioTbl input, .exAudioTbl select, .exAudioTbl button { min-width: 80%; } .profile { position: absolute; bottom: 0; right: 0; background: #0E85A5; font-size: 10px; padding: 1px 3px; height: 15px; line-height: 15px; vertical-align: middle; } #ndiLive { overflow-y: auto; } #ndiLive .labelBar { font-size: 13px; } #ndiLive td { padding: 5px; font-size: 10px; } #ndiLive input[type="text"] { height: 30px; padding: 5px; width: 100%; background: #444; border: none; border-left: 1px solid #555; color: #fff; font-size: 12px; } #ndiLive .labelBar { padding: 8px; } #ndiLive label { display: block; } #ndiLive input[type=checkbox] { margin-right: 5px; vertical-align: bottom; } .sItem { border-bottom: 1px solid #555; } .autoFocus { position: absolute; z-index: 5; right: 0; top: 0; background: #3669DA; color: #3669DA; padding: 5px; margin-top: 20px; width: 30px; transition: all .3s ease-in-out; height: 35px; overflow: hidden; vertical-align: middle; } .autoFocus:hover { width: 150px; color: #fff; } /***************Custom Modal Css ******************/ .modal { position: fixed; background-color: rgba(45, 45, 45, .1); max-height: calc(100vh - 89px); min-height: calc(-90px + 100vh); top: 64px; /***z-index: 6;****/ z-index: 1009; overflow-y: hidden; left: 0; right: 0; border-radius: 5px; border: 2px solid transparent; border-color: var(--dr-mo-Border-Color); display: flex; flex-direction: column; /* box-shadow: var(--dr-mo-Border-Box-Shadow); */ } .modalLgFull { max-width: 100%; margin: auto; } .modalLg { max-width: 1443px; margin: auto; } .modalXlg { max-width: 75%; margin: auto; } .modalMd { max-width: 50%; margin: auto; z-index: 1009; } .modalSm { max-width: 500px; margin: auto; } .modalXs { max-width: 360px; margin: auto; } .modalBody { background: var(--modalBody_bg); /*#242424; */ /* height: calc(100vh - 155px); */ height: calc(100% - 58px); overflow: auto; font-size: 11px; padding: 5px; flex: 1; } .modalHead { background: var(--d-head); height: 28px; font-size: 12px; line-height: 15px; color: #ffffffe6; flex-shrink: 0; } .modalHead>div { padding: 0 27px; } .modalFoot { background: var(--d-foot); height: 28px; font-size: 10px; } .modalFoot>div { padding: 0 5px; } .modalLable { color: #EBC844; font-size: 12px; } .modal input, .modal select, .modal textarea, .inner-table input, .inner-table select, .inner-table textarea { background: var(--d-input) !important; border: none !important; /* border-bottom: 1px solid #333 !important; */ color: #fff !important; padding: 3px 5px !important; width: 100%; height: 22px; font-size: 11px; border-radius: 4px; } #searchDiv input, #searchDiv select, #searchDiv textarea { background: var(--d-input); /* border: none !important; */ border: 1px solid #5a5656; color: #fff !important; padding: 3px 5px; width: 100%; font-size: 11px; border-radius: 4px; } .modal output { width: 5%; float: left; } .modal input[type=range] { background: #5e5c5c !important; border: none !important; border-bottom: 1px solid #333 !important; color: #fff !important; padding: 0 2px !important; width: 75%; height: 22px; font-size: 11px; position: relative; /* top: 260px; transform: rotate(-90deg); */ } .modal .cloudBtn, .modal button { font-size: 10px; height: 22px; cursor: pointer; /* background: var(--bgBtnSuccess) !important; */ border: 1px solid #717779; color: #000; /* border: 1px solid transparent !important; */ border-color: #9ca1a5 !important; border-radius: 4px; } .modal .cloudBtn:hover, .modal button:hover { /* background: #393D41 !important; */ border: 1px solid #969CA2; box-shadow: 0 12px 24px 0 rgba(0, 206, 198, 0.3); } .modalInput:focus { border-bottom: 1px solid #DA611E; } .modalInputGroup input:first-child { float: left; width: 70%; } .modalInputGroup input { float: right; width: 25%; } .modal table { width: 100%; } .modal td { padding: 2px 6px; } .modalBody tbody td { padding: 5px 6px; } .modal tbody, .modal table { background: var(--tBody-Bg); height: 26px; font-size: small; } .mediaData tbody, .mediaData table { background: var(--tBody-Bg); } .modal thead, .mediaData thead { text-transform: capitalize; background: var(--tHead-Bg); font-weight: bold; height: 26px; font-size: small; } /*************** !Custom Modal Css ******************/ .confTooltip { position: absolute; left: -5px; top: 5px; z-index: 1; } .confMgrBody { padding: 1px 0; background: #3d3b3b; } /*#0D3D56*/ .confMgrHead { background: #111; font-weight: bold; padding: 8px 7px; font-size: 14px; } .confLable { color: #EBC844; font-weight: 200; font-size: 14px; } .confMgr .w3-half { margin-bottom: 2px; width: 50%; } .activeTab, a.activeTab label { color: var(--activeTab) !important; } .tabHover:hover { color: #fff; } .tabBorder { border-color: transparent !important; } .modalTabBar { border-color: var(--activeTab) !important; } .tabBorder:before { content: ""; position: absolute; left: 10%; right: 10%; width: 80%; bottom: 0; width: 80%; border-bottom: 3px solid; border-color: var(--activeTab) !important; } .confMgr p { margin: 0; padding: 5px 10px; font-weight: 100; font-size: 14px; border-bottom: 1px solid #5e5c5c; } .tabBody { overflow-y: auto; height: calc(100vh - 237px); color: var(--TX-F-COL); } .confMgr input, .confMgr select, .confMgr textarea { background: #5e5c5c; border: none; border-bottom: 1px solid #333; color: #fff; padding: 2px 4px; width: 100%; } .confMgr input:focus { border-bottom: 1px solid #DA611E; } .confMgr input[type="color"] { height: 20px; margin-right: 2px; } .confMgr input[type="checkbox"] { width: 12px; height: 12px; } .confMgr table { width: 100%; } .confMgr td { padding: 2px 5px; position: relative; } .inputSm { border-left: 1px solid #333 !important; } .confMgr sup { padding: 2px; font-size: 70%; } .confMgr .radio-group { border: 1px solid #5e5c5c; border-radius: 0px; height: 25px; display: block; border-radius: 4px; } .confMgr input[type="radio"]:checked+label { background: #5e5c5c; } .confMgr .radio-group label { font-weight: normal; width: 50%; text-align: center; line-height: 25px; padding: 0; } #thm1, #thm2, #thm3 { border-radius: 100%; } .listview { min-height: 80px; max-height: 80px; overflow-y: auto; display: block; width: 100%; display: block; } .listHead { background: #3A6378; } .confMgr li { padding: 2px; } .confMgr .w3-card-2 { margin-bottom: 20px; } .flex-container { display: flex; flex-wrap: wrap; } .flex-container>div { min-width: 25%; padding: 0 2px; } .flex-container>table { width: 50%; padding: 0 2px; } #bindProperties { position: absolute; z-index: 1; min-height: 100%; width: 100%; background: #222; } .datagrid thead { text-transform: capitalize; color: yellow; } .datagrid { overflow-x: auto; } .datagrid td { min-width: 100px; padding: 5px; } .newTemplateForm { position: absolute; width: 100%; height: 100%; background-color: rgba(45, 45, 45, .8); top: 0; z-index: 2; } .newTemplateFormContainer { max-width: 1000px; background: #0D3D56; margin: auto; } .templateRow:hover { background: #3A6378; cursor: pointer; } .tablink { cursor: pointer; font-size: 14px; /* color: rgba(179, 179, 179, 0.50); */ color: rgb(221 220 220 / 50%); } #urlPreBody { /* max-height: calc(100vh - 350px); */ } .urlPreview { padding: 15px; } .urlPreview:empty { display: none; } /* .urlPreview div { padding: 5px 2px; } */ .liveVidBox { text-align: center; /* height: 180px; */ margin-bottom: 5px; padding: 5px; background: #444; min-width: calc(var(--videoHeightPlayerBox) * 16/9); border: 1px solid dimgray; margin: 5px 0px; position: relative; } .liveVidBox .vidDtl { position: absolute; padding-right: 10px; height: 16px; width: 100%; top: 0; padding: 0px 5px; background-color: #80808073; } .preBtn { width: 23px; height: 16px !important; /* top: -5px; */ position: relative; } .stInfo, .qcInfo { margin: 0 2px; padding: 0 3px; overflow: hidden; text-align: center; color: #eee; text-transform: capitalize; } .stMissing { background: #d81111; } .stAvailable { background: #33f0ff; } #qcInfo, #subTitleInfo { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .qcFailed { background: crimson; color: #fff; } .qcPending { background: #FBC02D; color: #000; } .qcOK { background: #33f0ff; color: #000; } .qcDisabled { background: #CFD8DC; color: #000; } #channelSubtitle span { padding: 0 1px; text-transform: capitalize; font-size: 10px; min-width: 32px; text-align: center; } #channelSubtitle { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .flex-box { display: flex; flex-wrap: nowrap; align-items: stretch; } .flex-child { text-align: center; line-height: inherit; vertical-align: baseline; padding: 0 5px; } .flex1 { flex-grow: 1 } .flex2 { flex-grow: 2 } .flex-space { border: none !important; } .dropCtrl { margin-right: 20px; ; } .chDropdown { position: relative; font-size: 12px; /***padding: 15px 10px 0 50px;****/ } .chDropdown ul { /* position: absolute; top: 33px; left: auto; */ list-style: none; background: #192939; z-index: 5000; width: 100%; padding: 0; margin: 0; display: none; padding-top: 1px; border-radius: 8px; border: 1px solid #00000047; } .chDropdown li { width: 100%; padding: 5px 10px; font-size: 1em; /***font-size:7px;****/ /* border-bottom: 1px solid #3B5998; */ border-bottom: 1px solid #000; line-height: 2.2; } .chDropdown li:hover { background: var(--background-Color-n8); cursor: pointer; } .logo { font-size: 1.3em; text-transform: capitalize; min-width: 100px; } .logo small { color: yellow; } .chDropdown:hover ul { display: block; } .chDropdown:hover .user-logout { display: flex; border: 1px solid black; background-color: black; opacity: 1; padding: 4px; border-radius: 5px; justify-content: end; gap: 10px; top: -5px; } .chDropdown:hover .fa-user { display: none; } .chDropdown .user-logout { position: absolute; display: none; right: 0px; width: fit-content; min-width: 70px; } .additionWindow .fa-angle-double-up { display: none; } .additionWindow .fa-angle-double-down { display: block; } .WindowCollapsed .fa-angle-double-up { display: block; } .WindowCollapsed .fa-angle-double-down { display: none; } .additionWinCtrl { position: absolute; right: 0; bottom: 100%; background: #222; cursor: pointer; min-height: 20px; min-width: 45px; padding: 5px; text-align: center; font-size: 20px; display: inline-block; } .additionWindow h6 { padding: 5px 0; margin: 0; color: #CDDC39; font-size: 12px; } .additionWindow>div { border-right: 1px solid #444; min-height: 100px; } .additionWindow .actTab { color: #CDDC39; border-bottom: 1px solid #CDDC39; } /* .additionWindow .w3-bar{border-bottom: 1px solid #CDDC39;} */ .additionWindow .toggleView { position: absolute; right: 0; top: 0; cursor: pointer; } /***#toggleViewLog{ left: 0px; }****/ .additionWindow .w3-button:hover { background: none !important; color: #CDDC39 !important; } .plCollapse { font-size: 18px; position: absolute; top: 2px; margin-left: 20px; right: 10%; cursor: pointer; padding: 1px 3px; } .plCollapse:hover { color: #FDD835; } .plCollapse .fa::after { position: absolute; right: 100%; top: 4px; font-size: 10px; } .plCollapse .fa-angle-up { display: none; } .collapsed { color: #FDD835; } .collapsed .fa-angle-down { display: none; } .collapsed .fa-angle-up { display: inline-block; } .plCollapsed { display: none; } .timeDiff { position: absolute; text-align: right; right: 10px; overflow: hidden; top: 0; padding: 0 0px; width: 10px; transition: all .5s ease-in-out; background: #444; color: #fff; vertical-align: middle; } .timeDiff:hover { width: 100%; } .timeDiff:empty { display: none; } .criticalLogs { color: red; } .warnLogs { color: #FFD54F; } .tb, #zabbixData { height: 100px; overflow-y: auto; padding-bottom: 20px; } .logTable { width: 100%; margin-bottom: 20px; } .logTable thead { color: #fff; } .logTable thead tr:first-child { color: #fff; /* background: #444; */ } .logTable td { padding: 1px 5px; } .hwStatus { min-width: 50%; margin: 5px; } @keyframes textAnim { 0% { color: #81C784; opacity: .7; } } .hwStatus td { padding: 1px 5px; } .hwStatus .values { animation: textAnim 3s ease; } .onairlable { /**background: #26773C;***/ /**padding: 2px 8px;**/ color: #adf9b7; font-weight: bold; } .expandLogs { position: fixed; bottom: 30px; left: 0; height: 30vh; width: 100% !important; z-index: 5; background: #222; } .expandLogs .tb { height: 55vh; } .expandLogs tbody { display: inline-block; height: calc(60vh - 100px); overflow: auto; } .expandLogs thead, .expandLogs tbody tr { display: table; width: 100%; table-layout: fixed; } .expandLogs thead { width: calc(100% - 1em); } /****TimelineExpand******/ .expandTimeline { position: fixed; bottom: 30px; left: 0; height: 60vh; width: 100% !important; z-index: 5; background: #222; } .expandTimeline .tb { height: 55vh; } .expandTimeline tbody { display: inline-block; height: calc(60vh - 100px); overflow: auto; } .expandTimeline thead, .expandTimeline tbody tr { display: table; width: 100%; table-layout: fixed; } .expandTimeline thead { width: calc(100% - 1em); } #timeLine { width: 300%; } /*****timelineENd****/ /****OnAirDetailExpand******/ .expandOnAirDetail { position: fixed; bottom: 30px; left: 0; height: 30vh; width: 100% !important; z-index: 5; background: #222; } .expandOnAirDetail .tb { height: 55vh; } .expandOnAirDetail tbody { display: inline-block; height: calc(60vh - 100px); overflow: auto; } .expandOnAirDetail thead, .expandOnAirDetail tbody tr { display: table; width: 100%; table-layout: fixed; } .expandOnAirDetail thead { width: calc(100% - 1em); } /*****OnAirDetailENd****/ .SKIP { background: #9C27B0; padding: 0 2px; display: inline-block; } .viewAudioRules { max-width: 30%; background: #0D3D56; margin: auto; margin-top: 100px; margin-left: 20px } .contentLoader { position: absolute; text-align: center; width: 200px; border-radius: 4px; margin: auto; top: 30%; left: 0; right: 0; color: #fff; z-index: 1; background: rgba(0, 0, 0, .6); } .contentLoader button { margin-bottom: 10px; } .contentLoader:empty { display: none; } tr#fakeTop { background: red !important; } tr#fakeBottom { background: yellow !important; } input:focus, select:focus { border-radius: 0; outline: none; } .w-16 { width: 4rem; } .w-24 { width: 6rem; } .w-25, .w3-third { width: 25% !important; } .w-23 { width: 23% !important; } .w-50 { width: 49% !important; } .w-72 { width: 71% !important; } .w-75, .w3-twothird { width: 75% !important; } .w-100 { width: 99% !important; } .w-perf-100 { width: 100% !important; } .w-full { width: 100%; } .h-2 { height: 0.5rem; } .h-3 { height: 0.75rem; } .h-4 { height: 1rem; } .h-8 { height: 2rem; } .h-12 { height: 3rem; } .h-16 { height: 4rem; } .h-24 { height: 6rem; } .h-100 { height: 100% !important; } .h-90 { height: 90% !important; } .h-75 { height: 75% !important; } .h-66 { height: 66% !important; } .h-60 { height: 60% !important; } .h-50 { height: 50% !important; } .h-40 { height: 40% !important; } .h-33 { height: 33% !important; } .h-30 { height: 30% !important; } .h-25 { height: 25% !important; } .rounded-lg { border-radius: 0.5rem; } .rounded { border-radius: 0.25rem; } .rounded-t-lg { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } .rounded-t { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .rounded-full { border-radius: 9999px; } .overflow-hidden { overflow: hidden; } .duration-500 { transition-duration: 500ms; } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)) } .from-blue-500 { --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position); --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) } .to-indigo-600 { --tw-gradient-to: #4f46e5 var(--tw-gradient-to-position) } .contextMenu { position: absolute; left: 0; top: 0; padding: 5px; background: red; z-index: 1; } .clientCmdTbl { width: 100%; font-size: 10px; } .clientCmdTbl thead { color: #eee; } .clientCmdTbl td { padding: 5px; } #clientCommandReview .modalBody { background: #404242; } .fileBoxContainer { height: calc(100vh - 370px); overflow: auto; margin-top: 30px; } #schedulerBody { height: calc(100vh - 200px); overflow: auto; } #gfxTable { height: 488px; } #gfxScheduler input, #gfxScheduler select { width: 270px !important; } #gfxTable tr { height: 40px; } #selectParams { height: 38px; bottom: 0; position: relative; } .addInp { margin-top: 3px; cursor: pointer; } input:focus { outline: none; } #gfxScheduler input[type='search'] { max-width: calc(100% - 60px); height: 24px; } .pagination .w3-button { border: 1px solid #eee !important; padding: 0 4px; margin-right: 2px; } .loader { border: 5px solid #f3f3f3; /* Light grey */ border-top: 5px solid #3498db; /* Blue */ border-radius: 50%; width: 25px; height: 25px; animation: spin 2s linear infinite; margin: 0 auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .playlistNewRow { animation: highlightBg 5s ease-in-out infinite; animation-play-state: paused; /*****Added to stop animation****/ background: rgba(118, 215, 196, .3); } @keyframes highlightBg { 0% { background: rgba(118, 215, 196, .1); } 100% { background: rgba(118, 215, 196, .5); } } button:focus { outline: none; } .settingMenu { margin: 0; padding: 0 5px; height: 30px; cursor: pointer; border-bottom: 1px solid var(--d-foot); background-color: var(--background-Color-n9); } .settingMenu:hover { background: var(--d-foot); } .settingMenuNxt { border-bottom: 1px solid var(--d-foot); height: 30px; background: var(--background-Color-n7); /* padding: 0px !important; */ padding-left: 5px; } .p-1 { padding: 1rem; } .py-1 { padding-top: 1rem; padding-bottom: 1rem; } .px-1 { padding-left: 1rem; padding-right: 1rem; /****font-size: 7px;****/ } .px-1-nxt { font-size: 7px; } .flowplayer .fp-engine { object-fit: cover; } .flowplayer .fa-play-circle { display: none; } .bold, .strong { font-weight: bold; } #viewRow { text-transform: capitalize; } #viewRow td { padding: 5px; } #viewRow tr { border-top: 1px solid var(--d-foot); } .audiLevels { padding: 0px 2px; height: var(--videoHeightPlayerBox); } .lowresPlayer { width: 100%; display: flex; justify-content: center; align-items: center; } /* .lowresButtonpadding { padding-top: 40px; } */ .small { font-size: 10px !important; } .textCapitalize { text-transform: capitalize !important; } .alertify-notifier .ajs-message { text-align: left; } .OnAirSwitcherStatus { bottom: 0; right: 0; background: #13843e; font-size: 10px; padding: 1px 5px; height: 15px; line-height: 15px; vertical-align: middle; } .OnAirSwitcherStatusPending { background: #FBC02D; color: #000; } .OnAirSwitcherStatusAbort { background: red; color: #000; } .OnAirSwitcherStatusUnknown { background: #CFD8DC; color: #000; } .switcherStatusBox { border: 1px solid gray; height: 160px; width: 100%; text-align: center; } .switcherStatusBoxText { position: relative; top: 50%; transform: translate(-50%, -50%); font-size: 13px; } .switchDataTbl { width: 100%; } #switchTbl label { display: flex; } #switchTbl input[type=radio] { position: relative; visibility: visible; display: inline-block; } .fastrules input[type=radio] { position: relative; visibility: visible; display: inline-block; height: 12px; } #fastruletable, #fastruletabletrigger, #fastruletablesubjected, #fastruletablecondition, #fastruletabledependency, #fastrulemetadatatable { width: 100%; border: 1px solid white; } #fastruletable th, #fastruletabletrigger th, #fastruletablesubjected th, #fastruletablecondition th, #fastruletabledependency th, #fastrulemetadatatable th { border: 1px solid white; } #fastruletable td, #fastruletabletrigger td, #fastruletablesubjected td, #fastruletablecondition td, #fastruletabledependency td, #fastrulemetadatatable td { border: 1px solid white; } #lastrowfast { width: 100%; border: 1px solid white; } #lastrowfast th { border: 1px solid white; } #lastrowfast td { border: 1px solid white; } .leftVDiv { background-image: linear-gradient(to right, #1c2836, #223d39); height: 100vh; border-right: 3px solid seagreen; /* border-color: #4e7469; */ border-top-right-radius: 25px; } .rightVDiv { background-color: #181818; } .sidepanel { /**width: 385px;***/ width: 0; position: fixed; z-index: 1; height: 100%; top: 0; right: 0; background-color: #181818; overflow-x: hidden; /**transition: 0.5s;***/ padding-top: 20px; border: 1px solid white; } .sidepanel a { padding: 8px 8px 8px 8px; text-decoration: none; font-size: 22px; color: #a3a3a3; display: block; transition: 0.3s; } .sidepanel a:hover { color: #f1f1f1; } .sidepanel .closebtn { position: absolute; top: -20px; right: 5px; font-size: 25px; color: red; } .openbtn { font-size: 20px; cursor: pointer; background-color: #111; color: white; padding: 5px 5px; border: none; } .openbtn:hover { background-color: #444; } /* Style page content - use this if you want to push the page content to the right when you open the side navigation */ #main { transition: margin-left .5s; /* If you want a transition effect */ } /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ @media screen and (max-height: 450px) { .sidepanel { padding-top: 15px; } .sidepanel a { font-size: 18px; } } .systeminline { display: inline-block; width: 115px; } #onAirThumbNxt { display: inline-block; /**margin-left: -19px;****/ } #readyThumbNxt { display: inline-block; /**margin-left: -19px;****/ } #onAirItem { margin-top: 45px; margin-left: -200px; } .onReadyBlockAfter { margin: 13px 0 0 5px; display: inline-block; background-color: #626266; padding-left: 5px; padding-right: 5px; } #readyThumbImg { background-color: white; margin-left: 20px; margin-bottom: 15px; } #statusBlock { /**width: 24.44442%;**/ /***width: 23.99992%*****/ /***width : 49.99992%;***/ margin-top: 15px; /*** padding-bottom:10px;***/ } #mysystemtime { margin-top: 4px; border: 2px solid #4e7469; height: 58px; border-radius: 0px 0px 0px 50px; margin-top: -5px; padding: 12px; background-color: #1d3d3a; margin-left: -46px; } #systemLeft { margin-top: 4px; border: 2px solid #4e7469; height: 58px; border-left: 0px; border-radius: 0px 0px 5px 0px; margin-top: -5px; /* padding: 12px; */ background-color: #1d3d3a; /* margin-left: -46px; */ } .onAirDetail { /**padding:2px;***/ display: inline-block; position: relative; /* padding: 0 2px 2px 10px; height: 190px; */ } .vl { border-left: 3.5px solid black; height: 50px; display: inline-block; } .onAirDetailBox { /* background-image: linear-gradient(180deg, #1e3d3f, #16172e); */ height: 72px; font-size: 15px; /* border-radius: 4px; */ /* border: 1px solid; */ padding: 5px 0px; border-bottom: 1px solid; border-color: #2c5d6285; box-sizing: border-box; background-color: var(--background-Color-n35); } .onairDetailRemTime, .onairDetailPlBackTime, .onairDetailNxtAssetTime { height: 100%; justify-content: center; justify-items: center; align-items: center; cursor: pointer; display: grid; box-sizing: border-box; } .onairDetailRemTime, .onairDetailPlBackTime, .onairDetailNxtAssetTime { border-right: 1.5px solid var(--background-Color-n8); } .onairDetailRemTimeSpan1 { color: #a664fc; padding-top: 5px; font-weight: bold; } .onairDetailPlBackTimeSpan1 { color: #3d84f3; padding-top: 5px; font-weight: bold; } .onairDetailNxtAssetTimeSpan1 { color: #e95c04; padding-top: 5px; font-weight: bold; } .onairDetailRemTimeSpan2, .onairDetailPlBackTimeSpan2, .onairDetailNxtAssetTimeSpan2 { font-size: 20px; color: #838490; letter-spacing: 1px; font-family: 'digital-clock-font'; } #readyThumbNxt { display: inline-block; /**margin-left: -19px;****/ /**margin-top:50px;****/ } .onReadyBlock { margin: 20px 20px 20px 100px; display: inline-block; } .onReadyBlockAfter { margin: 13px 0 20px 5px; display: inline-block; background-color: #181818; padding-left: 5px; padding-right: 5px; } #onReadyThumbImg { background-color: white; margin-left: 170px; /****margin-bottom: 15px;****/ margin-top: -30px; } .leftDivBgClr { background-color: #215646; } #audioRule input[type="checkbox"] { cursor: pointer; } .blink_me { animation: blinker 1s linear infinite; } @keyframes blinker { 50% { opacity: 0; } } .slaveMasterStatusCount { position: absolute; /***bottom: 25px;*****/ top: 45px; /***right: 0;*****/ display: none; z-index: 6; /* background: rgba(45, 45, 45, .9); */ background: #223f45; min-width: 300px; padding: 5px; border: 1px solid white; } .slaveMasterStatusCount table { width: 100%; } .slaveMasterStatusCount td { padding: 3px 5px; text-align: left; } .slaveMasterStatusCountInfo { /* width: 40%; */ /**margin-top: 25px;***/ background-color: #103c48; /***margin-left: 50px;***/ border: 0.5px solid #333333; padding: 5px 10px; border-radius: 50px; top: 10px; left: 90px; } .slaveMasterStatusCountInfo:hover .slaveMasterStatusCount { display: block; } /****.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }***/ .onairLivePlayer { padding: 10px 10px 10px 10px; } .onAirLivePlayerBox { /* border: 1.8888px solid #333333; */ /* padding: 10px 10px; background-color: #223f45;*/ border: 1.8888px solid #333333; border-radius: 5px; /* height: 230px; */ } .rightBoxLayout { padding: 0px 10px 0px 15px; border-left: 3px solid var(--rightBoxLayout-Border-Left); margin: 10px 0px 10px 0px; } .liveOnAirHead { color: #39975d; /* padding: 0px 35px; */ } .liveOnAirHead span { color: #0b6623; } .bgOfBoxPlayer { /***background-color: #223f45;***/ } .nowBox, .nextBox { padding: 8px 0 0 0; font-size: 20px; } .nowBox i { color: #18B96E; padding-left: 15px; } .onAirIdDurationSpan { /**padding: 0 0 0 85px;***/ font-size: 20px; color: #18B96E; letter-spacing: 2px; font-family: 'digital-clock-font'; } .runningFromSpan { /**padding: 0 0 0 20px;**/ font-size: 10px; color: #18b96e; } .onAirIdPlaying, .nextIdPlaying { font-size: 14px; letter-spacing: 2px; height: 27px; color: var(--TX-F-COL); } .onAirIdPlaying { /* color: #adf9b7; */ } .nextBox { margin-top: 10px; font-size: 20px; } .nextBox i { color: #0f9ffc; padding-left: 15px; } .nextIdDurationSpan { /**padding: 0 0 0 142px;***/ font-size: 20px; color: #0f9ffc; letter-spacing: 2px; font-family: 'digital-clock-font'; } .nextIdPlaying { /* color: #0f9ffc; */ font-weight: bold; } .bar-wrapper { height: 300px; position: relative; } .bar { position: relative; bottom: 0; width: 5px; display: inline-block; border: 1px solid red; height: 5px; border-bottom: 3px solid #fff; } .d-grid { display: grid; } .operation-grid { justify-items: center; /* margin-top: 55%; */ /* align-content: center; */ justify-content: center; /* margin-top: 55%; */ /* text-align: center; */ row-gap: 3px; /* height: 36%; */ } .rightBoxActiveMenu { color: #36c210; /*text-decoration: underline;*/ font-weight: bold; } .rightBoxActiveDiv { color: var(--activeLinkColor); border-bottom: 2px solid; border-radius: inherit; } #activeChannel { /* font-size: 14px; */ background-color: #103c48; border: 0.5px solid #333333; border-radius: 50px; padding: 5px 10px; display: flex; width: 220px; justify-content: space-between; align-items: center; } #activeChannel small { color: #39975d; padding-right: 5px; } .rightBoxMenuDiv { border-right: 0px solid black; /* height: 50px; */ justify-content: center; /* justify-items: center; */ align-items: center; cursor: pointer; display: grid; } .rightBoxMenu-round { width: 30px; height: 30px; background: darkcyan; /* border-radius: 50%; */ border-radius: 6px; background: #AFB2BA1a; box-shadow: 0 0 2px #3c78a5b5; display: flex; margin: auto; } .rightBoxMenu-round img { width: 50%; height: 50% } .rightBoxMenuDiv .rightBoxMenu-round, .rightBoxMenuDiv .rightBoxMenu-round i, .popupActBtn .rightBoxMenu-round, .popupActBtn .rightBoxMenu-round svg path, .popupActBtn .rightBoxMenu-round i, .opertionMenuIconCss svg path { stroke: var(--TX-F-COL) !important; color: var(--TX-F-COL) !important; } .rightBoxActiveDiv .rightBoxMenu-round, .rightBoxMenuDiv:hover .rightBoxMenu-round, .rightBoxActiveDiv .rightBoxMenu-round svg path, .rightBoxMenuDiv:hover .rightBoxMenu-round i, .popupActBtn:hover .rightBoxMenu-round, .popupActBtn:hover .rightBoxMenu-round svg path, .popupActBtn:hover .rightBoxMenu-round i, .opertionMenuIconCss:hover svg path { background: #00cec61a; box-shadow: 0 0 2px #3CA598; stroke: var(--TX-H-COL) !important; color: var(--TX-H-COL) !important; } .rightBoxActiveDiv .rightBoxMenu-round, .rightBoxActiveDiv .rightBoxMenu-round svg path, .rightBoxActiveDiv .rightBoxMenu-round i, .opertionMenuIconCss.activeTab svg path { background: #00cec61a; box-shadow: 0 0 2px #3CA598; stroke: var(--TX-A-COL) !important; /* color: var(--TX-A-COL) !important;*/ } .lifecycle-timeline { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .lc-task { display: flex; align-items: center; gap: 6px; padding: 1px 8px; border-radius: 8px; background: var(--BG-750); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); cursor: pointer; transition: transform 0.2s ease; position: relative; width: fit-content; } .lc-task:hover { transform: scale(1.05); } .lc-icon { width: 20px; height: 20px; flex-shrink: 0; } /* Status colors */ .lc-done .lc-icon { color: #28a745; fill: #28a745; } .lc-running .lc-icon { color: #007bff; fill: #007bff; animation: lc-pulse 1s infinite alternate; } .lc-pending .lc-icon { color: #ffc107; fill: #ffc107; } .lc-failed .lc-icon { color: #dc3545; fill: #dc3545; } .lc-svgIcon:hover path { fill: var(--activeLinkColor); } @keyframes lc-pulse { 0% { filter: drop-shadow(0 0 2px rgba(0, 123, 255, 0.3)); } 100% { filter: drop-shadow(0 0 6px rgba(0, 123, 255, 1)); } } /* Tooltip */ .lc-task[data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 1px 8px; margin: 2px 0px; border-radius: 4px; white-space: nowrap; font-size: 12px; opacity: 0.95; z-index: 9999; } .lc-task[data-placement="top"]:hover::after { bottom: 100%; margin-bottom: 6px; } /* If near top, show tooltip below */ .lc-task[data-placement="bottom"]:hover::after { top: 100%; margin-top: 6px; } /* Arrow connector */ .lc-arrow { font-size: 20px; color: #999; } /***************Timeline CSS******/ div.timeline { padding-left: 5px; padding-top: 20px; } .timelineBar { border-top: 1px solid #55ACEE; table-layout: fixed; width: 100%; color: #C0E0FD; border-collapse: collapse; margin-bottom: 10px; font-size: 10px; font-weight: bold; height: 10px; /* margin-top: 5px; */ text-transform: uppercase; } .timelineBar td { border-left: 1px solid #C0E0FD; border-right: 1px solid #C0E0FD; padding: 5px; cursor: help; height: 5px; position: relative; } .timelineBar span.mark { position: absolute; left: -25px; top: 5px; } .timelineBar span.cueMark { position: absolute; left: 0; top: 0; height: 100vh; border-left: 1px solid #333; z-index: 1; } .timelineBar td.cuePoint { border-top: 2px solid #333; } .insertBox { position: absolute; min-width: 250px; height: 100%; background: #2E4E8C; top: 0; right: 100%; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16) } .insertHead { background: #162440; padding: 10px; color: #fff; } .insertBody { padding: 5px; } .insertBody input { color: #000; vertical-align: bottom; } .insertBody select, .insertBody input[type=text] { width: 100%; } #intervalBar span.intrvlSlot { position: absolute; border-left: 1px solid #5E8C3E; height: 100vh; z-index: 1; } .intrvlSlot span { margin-left: -25px; margin-top: 1px; position: absolute; background: #5E8C3E; padding: 2px 5px; color: #fff; } .currentTimeTm { position: absolute; height: calc(100% + 5px); width: 5px; /**top: 0;***/ top: -23px; border-right: 1px solid #46A654; z-index: 2; left: 0; /***background: #46A654; *****/ background: #e95c04; } .tlInfo table:hover {} .currentTimeTm .active { font-weight: bold; font-size: 75%; /***position: absolute;****/ position: initial; /***background: #46A654;****/ /* background: deepskyblue; */ background: #e95c04; color: #000; /*right: -45px;*/ left: -50px; padding: 5px; margin-top: -35px; border-radius: 2px 2px 0 0; } .curTimeColor { background: #d82b50; } .tlInfoParent { position: absolute; height: calc(100% - 52px); min-width: 150px; top: 35px; left: 0; z-index: 1; } .tlInfo { border-bottom: 1px solid transparent; border-top: 1px solid #ccc; overflow-x: auto; } .tlInfo table { margin: 0; padding: 0; width: 100%; font-size: 10px; text-transform: capitalize; z-index: 0; } .tlInfo table td { padding: 1px 5px; } .top10 { margin-top: 10px; } .top25 { margin-top: 25px; } .top30 { margin-top: 30px; } .top35 { margin-top: 35px; } .deleteDiv { transform: translate(300px); opacity: .5; transition: all .5s; } .timeline { margin: 0; border-collapse: collapse; table-layout: fixed; overflow: hidden; border-bottom: 0px solid #eee; border-top: 1px solid #4E5359; } .timelineWrapper { overflow: hidden; /**min-height: 273px;**/ min-height: 130px; cursor: move; transition: scroll .5s ease-in-out; /* padding-bottom: 15px; */ } .timelineWrapper:focus { outline: none; } .timelineWrapper:hover { overflow-x: auto; } .tlControls input { background: var(--background-Color-n8); border: 2px solid #141d29; /* padding: 2px; */ } .tlControls { position: absolute; right: 1px; top: -25px; } .tlControls .fa { background: #2385E6; padding: 5px 10px; margin-left: 5px; color: #fff; } .tlControls .fa:hover, .tlControls .active { background: #000; color: red; cursor: pointer; } #tlStatus { font-weight: bold; } .poverCtrl { position: absolute; top: 10px; right: 0; z-index: 10; padding: 0 10px; width: 30px; text-align: center; } .poverCtrl:hover { background: #0078D7; color: #fff; } .reLoad { height: 100%; /* padding-top: 35px; */ text-align: center; } .previewOverlay .video { background: #666; margin: 0; border-bottom: 2px solid #FF7800; box-shadow: none !important; } .previewOverlay .video:hover { color: inherit; } .video:hover { background: #ACAFBF; transition: all .2s ease-in-out; color: #fff; } .video video { object-fit: fill; margin: auto; } #videoParent { margin-bottom: 2px; } .previewOverlay { position: absolute; right: 0; top: 0; padding-top: 41px; width: 175px; z-index: 5; } .poverCtrl { position: absolute; top: 10px; right: 0; z-index: 10; padding: 0 10px; width: 30px; text-align: center; } .poverCtrl:hover { background: #0078D7; color: #fff; } .reLoad { height: 100%; /* padding-top: 35px; */ text-align: center; } .previewOverlay .reLoad { height: 100%; padding-top: 20px; } .previewOverlay .reLoad a { position: absolute; top: 0; left: 0; padding: 5px; } .thumbImgTM:hover { transform: scale(2, 1.5); transition: all .4s ease-in; top: 0; left: 0; cursor: pointer; } .dropdown { position: relative; cursor: pointer; /* border: 1px solid #221F1F; */ /* background: #221F1F; */ background: inherit; /* margin-right: 10px; */ padding: 3px 5px; text-align: left; min-height: inherit; } .dropdown .fa { margin: 2px 5px; } /* .dropdown:hover .dropdown-content, .dropdown-content:hover { display: block; } */ .dropdown-content:hover { display: block; } .dropdown-content { background: var(--color-background-bg-800, #15212F); color: var(--color-text-color-text-light, var(--TX-F-COL)); /* top: 24px; */ top: 100%; z-index: 10; position: absolute; min-width: 180px; min-height: 50px; right: -5px; display: none; padding: 10px 1px; transition: all 1s ease-in-out; } .dropdown-content input { vertical-align: middle; margin-right: 5px; } .dropdown-content .fa { margin-right: 5px; } .dropdown p { padding: 5px; margin: 0; } .dropdown p:hover { background: #2385E6 } .trashBox { position: absolute; top: 20px; ; left: 0; z-index: 5; transition: all .2s ease-in-out; padding: 0 5px; height: 20px; overflow: hidden; } .trashBox:hover { background: rgba(0, 0, 0, .8); width: 100%; height: 90%; color: #fff; } .trashBox .w3-tag { font-size: 12px; } .trashBox .channel { border: 1px solid #55ACEE; padding: 5px; margin-bottom: 10px; } .channel:hover { background: #000; } .trashBox p { margin: 0; padding: 0; } #trashBox { overflow-y: auto; max-height: 90%; padding: 10px 0; } #getChannel { padding-top: 16px; } #getChannel li { margin-bottom: 1px; padding: 0; } #getChannel td { padding: 0; margin: 0; } #getChannel p {} #getChannel table { padding: 0; margin: 0; } #getChannel .w3-right {} .tl_container img.loader { margin-left: 10px; position: absolute; top: -10px; ; } .parent { /*background-image: linear-gradient(#004883,#2d364c,#2e374e);*/ background: #373F4A; max-width: 1365px; margin: auto; min-height: 100%; } .fullView { min-width: 99%; } .lpart { background: none; font-size: 100%; overflow-x: auto; max-width: 100%; } #moveHead { cursor: move; } .tlCard { padding: 2px 2px; border: 0px solid #3E768C; border-top: none; border-bottom: none; overflow: hidden; background: #162a49; color: #fff; cursor: pointer; /* border-radius: 10px; */ box-sizing: border-box; } .tlCardOnair { background: #049DD9 !important; font-size: 120%; } .tlCardOnair .fa, .tlCardOnair .chType, .tlCardOnair .time { color: #fff !important; } .tlCard .fa-image { font-size: 20px; display: inline-block; } .tlCardMissing { background: #e00000; } .tlCardOnair:hover { background: #00A0D5 !important; } .tlCardOnair .info { display: none; } .tblCell { padding: 2px; border-radius: 5px; } .tlCardLive { background: #FFA100; } .somMismatch { background: #b8860b; } .durationMismatch { background: #bb671c; } .animateCards { opacity: .7; font-weight: bold; } .tl_container img.loader { margin-left: 10px; position: absolute; top: -10px; ; } /*.timelineWrapper .durationMismatch{animation: durMis 2s ease-in-out infinite;}*/ .tlCard:hover, .tlCardSelected { background: #526A91 } .somDurMismatch { background: #aa5535; } .tlCardSelected .tblCell::after { position: absolute; padding: 1px 2px; z-index: 0; top: 0; left: 0; content: '\f00c'; background: #000; font-family: FontAwesome; } /*.timelineWrapper .somDurMismatch{animation: durMis 2s ease-in-out infinite;}*/ .onairInfo { font-size: 9px; font-weight: bold; padding: 5px; } .tlCard:hover .tlCardHover { /*display: block;*/ } .tlCardHover { background: #4E5359; padding: 5px; z-index: 5; position: absolute; width: 150px; bottom: 60%; display: none; margin-left: -7px; } .tlCardHover:after { position: absolute; content: ''; border-width: 7px; border-style: solid; border-color: #000 transparent transparent transparent; left: 5px; top: 100%; } #getPlaylist { padding-top: 5px; } .time { font-size: 10px; padding-top: 5px; } .title {} .clipid { font-size: 11px; border-bottom: 0px solid #888; } .chName { border-bottom: 0px solid #000; font-size: 11px; text-transform: capitalize; font-weight: bold; } sub { font-weight: 200; } .chType { font-size: 8px; text-transform: uppercase; } .chinfo { position: absolute; top: 0; left: 0; width: 100%; } .clipinfo { font-weight: 500; position: absolute; bottom: 0; left: 0; width: 100%; } .statusContainer { background: #FFA100; } .statusContainer:empty { display: none; } .statusbar { background: #34A853; display: block; height: 2px; width: 0px; transition: all .5s ease-in; font-size: 11px; text-align: left; } .tm { padding: 1px; font-size: 13px; position: absolute; bottom: 5px; color: #fff; font-weight: 100; } .tmLeft { left: 0; } .tmRight { right: 0; } .mediaType { background: #162a49; } .secWrapper { border-top: 0px solid #000; position: absolute; bottom: 0; right: 0; z-index: 0; background: rgba(0, 0, 0, .5); padding: 2px; color: #fff; font-size: 10px; width: 100%; max-width: 200px; min-height: 15px; height: 0%; transition: all .5s ease-in-out; overflow: auto; } .secWrapper:hover { height: 100% !important; } .secWrapper:hover .secMarker { height: auto; } .secMarker span { font-size: 10px; padding: 1px 3px; color: #000; font-weight: 100; text-transform: lowercase; } .secWrapper:empty { display: none; } .secBox { position: absolute; min-width: 250px; height: 100%; background: #2E4E8C; top: 0; left: 100%; overflow-y: auto; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16) } .secMarker { height: 1px; background: #A7F2F2; margin: 2px; overflow: hidden; text-overflow: hidden; } .scrollCtrl { position: absolute; width: 100%; background: #373F4A; left: 0; height: 20px; bottom: 0; border-bottom: 0px solid #55ACEE; color: #fff; z-index: 2; } .scrollCtrl span { padding: 0 10px; text-align: center; cursor: pointer; margin-top: -8px; } .scrollCtrl span:hover { background: #0078D7; color: #fff; } .scrollLeft { float: left; } .scrollRight { float: right; } .bottomWrapper {} .loadmoreBtn { width: 100px; text-align: center; } #view { border-radius: 50%; border-color: none; background-color: #2C8144; min-width: 25px; min-height: 25px; line-height: 25px; box-sizing: border-box; padding: 0px; margin-top: 0px; border: 0px; margin-right: 10px; font-size: 13px; } /* for action column */ .viewGrid { border-radius: 50%; border-color: none; background-color: #2C8144; background: linear-gradient(to right bottom, #46C76A, #125C27); box-shadow: 0px 0px 2px 2px #647F38; min-width: 25px; min-height: 25px; line-height: 25px; box-sizing: border-box; padding: 0px; margin-top: 0px; border: 0px; margin-right: 10px; font-size: 13px; cursor: pointer; } .playlistBar button.viewGrid:hover { box-shadow: 0px 0px 2px 2px #5bd40694, 0px 0px 2px 2px #47a708db; } #btnEdit { border-radius: 50%; border-color: none; background-color: #FFA73E; min-width: 24px; min-height: 24px; line-height: 22px; box-sizing: border-box; padding: 0px; margin-top: 0px; border: 0px; margin-right: 10px; font-size: 13px; } .btnEditGrid { border-radius: 50%; border-color: none; /* background-color: #FFA73E; */ background: linear-gradient(to right bottom, #DBB67A, #ED8A14); box-shadow: 0px 0px 2px 2px #A1A255; min-width: 24px; min-height: 24px; line-height: 22px; box-sizing: border-box; padding: 0px; margin-top: 0px; border: 0px; margin-right: 10px; font-size: 13px; cursor: pointer; } .playlistBar button.btnEditGrid:hover { box-shadow: 0px 0px 2px 2px #9fd40694, 0px 0px 2px 2px #ec8408f8; } .control { background: #0078D7; padding: 2px 8px; cursor: pointer; border: 1px solid #0078D7; transition: all .2s ease-in-out; color: #fff; height: 30px; } .control:hover, .controlActive { background: #000; border: 1px solid #000; } #timelineContainer { border: 3px solid #333c47; margin: 10px 0 0 0; box-sizing: border-box; } .mediaInfo { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .info { text-align: center; display: block; } .fa-exclamation { font-weight: 100 !important; } @media (max-width:1350px) { .playlistContainer { height: calc(100vh - 525px); } .drawerNXT-body { height: calc(100vh - 225px); } .w3-col s23 l23 { min-width: 1350px; } } .relative tblCell { background: linear-gradient(to right, rgb(178, 92, 253), rgb(103, 49, 239)); padding: 10px; border-radius: 10px; } .op-controls-container .op-bottom-panel { z-index: 0 !important; } .op-bigbutton-container { z-index: 0 !important; } .audioListRange { display: flex; justify-content: space-between; /* writing-mode: vertical-lr; flex-direction: column; */ width: 75%; } div.PlaylistMgr a:hover, #segmentTaggingContainer a:hover, .playlistContainer a:hover, #TBODY a:hover { background: transparent !important; } .cloudxLogo { width: 100% !important; /* height: 42px !important; */ } .rowHeight { height: 56px; } /* #TBODY:not(.expandedTbody){ height: calc(100vh - 550px) !important; } #TBODY.expandedTbody{ height:calc(100vh - 210px) !important; } */ @media screen and (min-width: 1936px) { :root { --videoHeightPlayerBox: 250px; } /* .liveOnAirHead { padding: 0px 50px; } */ .rowHeight { height: 60px; } #listCardBtn { max-width: 180px; } .onAirIdPlaying, .nextIdPlaying { height: 33px; } .altCard { height: 160px; max-width: 280px; } #getContent img { /* width:100%; */ height: 82px; aspect-ratio: 16/9; } .cloudxLogo { width: 70px !important; height: 52px !important; } .playlistContainer {} #TBODY:not(.expandedTbody) { height: calc(100vh - 485px) !important; } #TBODY:not(.expandedTbody):is(.timelineShow) { height: calc(100vh - 655px) !important; } #TBODY.expandedTbody { height: calc(100vh - 205px) !important; } #TBODY.expandedTbody:is(.timelineShow) { height: calc(100vh - 375px) !important; } #playlistContainer.expandedTbody { height: calc(100vh - 170px) !important; } #playlistContainer.expandedTbody:is(.timelineShow) { height: calc(100vh - 340px) !important; } .drawerNXT-body input:not([type='checkbox']), .drawerNXT-body select, .drawerNXT-body textarea, .confMgr input, .confMgr select, .confMgr textarea { font-size: 14px; width: 100%; } #filterContentFrm, .radio-group, ::placeholder, input, .confMgr, .modalBody, .px10, .modal button, .drawer-body { font-size: 14px !important; } .plListCard { width: 100%; font-size: 14px; } .modalLg { max-width: 2365px; } .modalHead, .confTabLink, .drawer-header { font-size: 16px; } .modalFoot { font-size: 14px; } .confMgr td { padding: 8px 20px !important; } div.PlaylistMgr a:hover { background: transparent !important; background-color: red !important; } div#modalBodyPlaylistMgr a:hover { background: #cb1e13; background-color: green; } .rangeContainer { justify-items: center; min-height: 189px; display: flex; } .rangeRotate { transform: rotate(-90deg); width: 173px; background-color: transparent; box-sizing: content-box; } input[type=range] { /* width: 100%; */ outline: none; background: none; border: none; position: absolute; top: -6px; left: 0; } .meterRange { width: 170px !important; margin: 0; position: relative !important; top: 10px !important; } .datalistRange { display: flex; flex-direction: column; justify-content: space-between; writing-mode: vertical-lr; width: 170px; margin-top: 10px; } .innerSpanContentCard { position: absolute; /***margin: -15px 0 0 0px;****/ bottom: 18px; right: 0; background-color: #cb0909; padding: 2px; font-size: 12px; } .divInnerContentCard { position: relative; border: 0px solid grey; width: 100%; height: 100px; } .clipIdContentCard { font-size: 15px; } .clipTitleContentCard { font-size: 13px; } .divOuterContentCard { /* position: relative; border: 0px solid grey; */ width: 100%; height: 120px; } /*.onAirLivePlayerBox { height: 275px; }*/ /* #webRtcPlayer, #lowresPreviewPlay { height: 200px; aspect-ratio: 16/9; } */ #lowresVideoPlay, #webRtcPlayer, #lowresPreviewPlay1 { height: var(--videoHeightPlayerBox) !important; aspect-ratio: 16/9 !important; /* width: calc(200px * 16/9); */ } .fp-player, #webRtcPlayer video { height: inherit; width: calc(var(--videoHeightPlayerBox) * 16 / 9) !important; } /* .onairDetailRemTime, .onairDetailPlBackTime, .onairDetailNxtAssetTime { height: 60px; } */ .onAirDetailBox { font-size: 18px; height: 99px; } #onAirIdDuration { font-size: var(--onAirIdDuration-font-size); } .nowBox { font-size: var(--onAirIdDuration-font-size); ; } #progressbarstatus { margin-top: 15px; } #runningfrom { font-size: 16px; } .runningFromSpan { font-size: var(--onAirIdDuration-font-size); } .nextBox { font-size: var(--onAirIdDuration-font-size); } .nextIdDurationSpan { font-size: var(--onAirIdDuration-font-size); } /* .audiLevels { padding-top: 55px; } */ .operationMenu button, .backButton button { width: 56px; font-size: var(--onAirIdDuration-font-size); } .grd_btn { height: 56px; font-size: var(--onAirIdDuration-font-size); } #searchTypeCnt, #mediaTypeCnt, #maxDur { width: 100%; } #fromDur, #toDur { width: 100% } #contentsearch { width: 100%; } #filtersearch { width: 100%; } .padding-left { padding-left: 6%; } .drawer-right { width: 26.5%; right: 43px; } .drawer { height: calc(100vh - 90px); } .drawer-body { height: calc(100vh - 150px); } #getContent { height: calc(100vh - 378px); } .contentCard { max-width: 23%; } .drawer-right { width: 26.8%; right: 11px; } .contentAction { /* width: 27.1%; */ top: 5%; } .rightBoxMenu-round { width: 45px; height: 45px; } } #cont_mng { margin-top: 8px; } #filterContentFrm { padding: 0px 2px; } @media screen and (max-width: 1936px) { #searchTypeCnt, #mediaTypeCnt { width: 100%; } #fromDur, #toDur { width: 100% } #contentsearch { width: calc(100% - 20px); } #filtersearch { width: 100%; } .drawer-right { width: 26.5%; right: 10px; } #maxDur { width: 100%; } } .drawer-right { border: 2px solid; border-radius: 5px; border-color: var(--dr-mo-Border-Color); box-shadow: var(--dr-mo-Border-Box-Shadow); background-color: var(--d-bg); } .confMgr .radio-group-three label { font-weight: normal; width: 33%; text-align: center; line-height: 25px; padding: 0; border: 1px solid #5e5c5c; border-radius: 0px; border-radius: 4px; } .plSourceNA { background-color: orangeRed; } .w3-margin-top-row-cnt { margin-top: 5px !important; } /* #durationCnt{ width:90%; } */ .btnpadding { padding: 0px 5px 0px 0px; } .paddingLeft { padding-left: 5px; } /* Style the tab API*/ .tabAPI { overflow: hidden; /**border: 1px solid #ccc;***/ background-color: #f1f1f1; } /* Style the buttons inside the tab */ .tabAPI button { background-color: #111C28; float: right; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; height: inherit; /**font-size: 17px;**/ color: var(--TX-F-COL); /* 100% */ } /* Change background color of buttons on hover */ .tabAPI button:hover { /* background-color: #dddddd40; */ color: #fff !important; } /* Create an active/current tablink class */ .tabAPI button.active { color: var(--TX-A-COL) !important; border-bottom: 1px solid var(--TX-A-COL); } /* Style the tab content */ .tabcontentAPI { display: none; /**border: 1px solid #ccc;***/ border-top: none; padding: 0px 55px; gap: 17px; flex-wrap: wrap; align-content: flex-start; overflow-y: auto; height: calc(100vh - 315px); } .btnpadding { padding: 0px 5px 0px 0px; } .paddingLeft { padding-left: 5px; } /* path { fill: none; stroke: white; } */ svg:hover path { fill: none; stroke: aqua; } a:hover { background: grey; } /***********************Contido**************************/ @font-face { font-family: SF Pro Text; /*src: url("font/RobotoMono-Light.ttf");*/ /* src: url("font/myfont.ttf"); */ src: url("../../core/font/SF-Pro-Text-Regular.otf"); } @font-face { font-family: Qanelas Soft DEMO Extra Bold; /*src: url("font/RobotoMono-Light.ttf");*/ /* src: url("font/myfont.ttf"); */ src: url("../../core/font/QanelasSoftDEMO-ExtraBold.otf"); } @font-face { font-family: Qanelas Soft DEMO Medium; /*src: url("font/RobotoMono-Light.ttf");*/ /* src: url("font/myfont.ttf"); */ src: url("../../core/font/QanelasSoftDEMO-Medium.otf"); } @font-face { font-family: Poppins; src: url("../../core/font/Poppins-Regular.ttf"); } @font-face { font-family: 'digital-clock-font'; src: url('../../core/font/digital-7.ttf'); } .channelMenuBar { background: var(--BG-700); padding: 0px; min-height: 60px; } .oConnectText { color: #FFF; font-family: Qanelas Soft DEMO Extra Bold; font-size: 28px; font-style: normal; font-weight: 800; line-height: 60px; float: left; background: var(--BG-700); padding: 0px 20px; min-height: inherit; min-width: 130px; } .usernameChannelDashboard { font-feature-settings: 'clig' off, 'liga' off; /* Text-sm/Regular */ font-family: SF Pro Text; font-size: 12px; font-style: normal; font-weight: 400; line-height: 18px; /* 150% */ } .hoverText { color: var(--color-text-color-text-light, var(--TX-F-COL)); } .hoverText:hover { color: var(--color-text-color-pure-white, #FFF); } .hoverText-active { color: var(--color-text-color-pure-white, #FFF); } .usernameChannelDashboard-Role { font-feature-settings: 'clig' off, 'liga' off; /* Text-xs/Regular */ font-family: SF Pro Text; font-size: 10px; font-style: normal; font-weight: 400; line-height: 15px; /* 150% */ } .playoutChannelDashboard-label { color: #FFF; font-family: SF Pro Text; font-size: 16px; font-style: normal; font-weight: 300; line-height: 16px; } .cardDashboarChannelName td, div.cardDashboarChannelName { color: #FFF; font-family: SF Pro Text; font-size: 14px; font-style: normal; font-weight: 500; line-height: 14px; height: 35px; text-align: left; padding-left: 15px; padding-right: 15px; position: relative; } .cardDashboarChannelType td, div.cardDashboarChannelType { color: var(--color-text-color-text-400, #AAA); font-family: SF Pro Text; font-size: 14px; font-style: normal; font-weight: 500; line-height: 10px; /* 71.429% */ text-transform: uppercase; height: 30px; text-align: left; padding-left: 15px; padding-right: 15px; } .tablinksDasboard { text-align: center; font-family: SF Pro Text; font-size: 12px; font-style: normal; font-weight: 500; line-height: 12px; /* 100% */ text-transform: uppercase; } #selChBarOneConnect { background: transparent; min-height: inherit; max-width: 300px; padding: 0px; /* border-bottom: 0px solid #3C3C3C; */ /* padding: 14px 10px; */ /* font-size: 120%; */ /* text-align: center; */ /* height: 100%; */ /* height: inherit; */ /* max-height: inherit; */ } #selChBarOneConnect form { color: #555; display: flex; float: left; padding: 2px; border-radius: 5px; margin: 0 0 0 30px; } #selChBarOneConnect input[type="search"]::placeholder { color: #bbb; } #selChBarOneConnect button[type="submit"] { text-indent: -999px; overflow: hidden; width: 40px; padding: 0; margin: 0; border: 1px solid transparent; border-radius: inherit; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat center; cursor: pointer; opacity: 0.7; } #selChBarOneConnect button[type="submit"]:hover { opacity: 1; } #selChBarOneConnect button[type="submit"]:focus, #selChBarOneConnect input[type="search"]:focus { box-shadow: 0 0 3px 0 #1183d6; border-color: #1183d6; outline: none; } #selChBarOneConnect form.nosubmit { border: none; padding: 0; } #selChBarOneConnect input.nosubmit { padding: 7px 4px 7px 40px; border: 1px solid rgba(255, 255, 255, 0.20); background: #465260 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill ='%23ffffff' width='13' height='13' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center; color: white; width: 100%; height: 35px; font-family: SF Pro Text; font-size: 10px; font-style: normal; font-weight: 600; line-height: normal; text-transform: uppercase; border-radius: 20px; margin: 0; /* margin-top: 8px; */ } #plListSrch.nosubmit, #segListSrch.nosubmit, #tagListSrch.nosubmit, #autoQcListSrch.nosubmit { background: var(--d-input1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill ='%23ffffff' width='10' height='10' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 10px center; padding-left: 25px; } #channelListSrch input.nosubmit { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill ='%23999999' width='10' height='10' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 5px center; width: 100%; padding-left: 25px; height: 31px; border-bottom: 1px solid grey; color: grey; padding: 5px 30px; border: 0px; outline: 0; border-bottom: 1px solid #303F51; } #channelListSrch>input.nosubmit::placeholder { color: #999999; } input.nosubmit::placeholder { color: white; } input.nosubmit::placeholder { color: white; } #plListSrch.nosubmit, #segListSrch.nosubmit, #tagListSrch.nosubmit { padding-left: 25px; } ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: lightgrey; opacity: 1; /* Firefox */ } .navigationMenuBar { height: inherit; gap: 30px; min-height: inherit; display: inline-flex !important; align-items: flex-start; padding: 0px 25px; } .channelDashboardMenuIcon.more:hover::after { position: absolute; bottom: 100% !important; /* right: 35px !important; */ /* right: 100% !important; */ top: 62%; left: calc(50% - 7px) !important; content: ""; border-width: 7px; border-color: transparent transparent var(--TX-A-COL) transparent; border-style: solid; } .channelDashboardMenuIcon { min-height: inherit; box-sizing: border-box; width: fit-content; /* padding: 16px 0px 10px 0px; */ gap: 8px; display: inline-flex; flex-direction: column; } .channelDashboardMenuIcon a, .channelDashboardMenuIcon div { gap: 8px; flex-direction: column; text-align: center; } .channelDashboardMenuIcon.active { border-bottom: 3px solid var(--TX-A-COL); } .channelDashboardMenuIcon>a:hover { background: none; color: var(--TX-A-COL); fill: var(--TX-A-COL); } /* .channelDashboardMenuIcon>a:hover>label, .channelDashboardMenuIcon>a:hover>svg>path { color: #fff; fill: #fff; stroke: none; } */ .channelDashboardMenuIcon>a.active>label, .channelDashboardMenuIcon>a.active>svg>path, .channelDashboardMenuIcon>a.active>svg>path, .channelDashboardMenuIcon>div.active>label, .channelDashboardMenuIcon>div.active>svg>path, .channelDashboardMenuIcon>div.active>svg>path { color: var(--TX-F-COL); stroke: none; fill: var(--TX-F-COL); } .channelDashboardMenuIcon.active>a.active>label, .channelDashboardMenuIcon.active>a.active>svg>path, .channelDashboardMenuIcon:hover.active>a.active>svg>path, .channelDashboardMenuIcon.active>div.active>label, .channelDashboardMenuIcon.active>div.active>svg>path, .channelDashboardMenuIcon:hover.active>div.active>svg>path { color: var(--TX-A-COL); stroke: none; fill: var(--TX-A-COL); } .channelDashboardMenuIcon:hover>a>label, .channelDashboardMenuIcon:hover>a>svg>path, .channelDashboardMenuIcon:hover>a>svg>circle, .channelDashboardMenuIcon:hover>div>label, .channelDashboardMenuIcon:hover>div>svg>path, .channelDashboardMenuIcon:hover>div>svg>circle { color: #fff; fill: #fff; /* stroke: #fff; */ } a.dropdown-item.active>label, a.dropdown-item.active>svg>path, div.dropdown-item.active>label, div.dropdown-item.active>svg>path { color: var(--TX-A-COL); fill: var(--TX-A-COL); /* stroke: none; */ } /* .svgSizeContidoLinks:hover, .svgSizeContidoLinks:focus{ filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%); } */ .icontextclass { color: var(--TX-F-COL); text-align: center; font-family: SF Pro Text; font-size: 10px; font-style: normal; font-weight: 700; line-height: 10px; padding: 0px; text-transform: uppercase; } .capitalizeText { text-transform: capitalize !important; /* color: #fff !important; fill:#fff !important; */ } #userNameCloudx { color: var(--BG-950); font-family: SF Pro Text; font-size: 12px; font-style: normal; font-weight: 700; line-height: 12px; text-transform: uppercase; } .fa-red { color: red; } .fa-green { color: lightgreen; } .usernamelogout { background: var(--BG-700); min-height: inherit; justify-content: flex-end; align-items: center; margin: 0 !important; padding: 0px !important; box-sizing: border-box; right: 0px; /* padding: 0px !important; */ } .cardcircleGreen { width: 8px; height: 8px; flex-shrink: 0; border-radius: 55px; background: var(--color-status-success, #18B96E); /* float: right; */ } .cardcircleOrange { width: 8px; height: 8px; flex-shrink: 0; border-radius: 55px; background: var(--color-status-rejected, #FF6C56); /* float: right; */ } .fa-power-off { color: coral; padding: inherit; } .dropdown-content>a:hover { background: none; /* background: none; */ color: #00CEC6; } .dropdown-content:hover { /* background: #465260; */ } .dropdown-content>a { padding: 0px 0px 0px 15px; } /* .cardwidthnew{ width: 270px; } */ .oconnectnewheight { background: var(--BG-700); padding: 19px 15px; } .playoutChannelSvg { align-items: center; background: var(--TX-A-COL); box-shadow: 0px 10px 10px 0px rgba(0, 206, 198, 0.20); width: 30px; height: 30px; display: flex; flex-shrink: 0; border-radius: 2px; margin-left: 20px; margin-top: 10px; } .iconsearchnodata { width: 150px; height: 193.531px; flex-shrink: 0; } .noresultfoundfdiv { color: #FFF; font-family: SF Pro Text; font-size: 50px; font-style: normal; font-weight: 700; line-height: 50px; /* 100% */ } .noresultfoundfdowndiv { color: #FFF; font-feature-settings: 'clig' off, 'liga' off; /* Text-md/Light-14px */ font-family: SF Pro Text; font-size: 14px; font-style: normal; font-weight: 300; line-height: 21px; /* 150% */ } /*******Page Loader**************/ #loading_indicator { position: absolute; /**top: 300px;***/ bottom: 300px; left: 50px; right: 50px; margin: auto; border: 10px solid grey; border-radius: 50%; border-top: 10px solid blue; width: 100px; height: 100px; animation: spinIndicator 1s linear infinite; } @keyframes spinIndicator { 100% { transform: rotate(360deg); } } tbody::-webkit-scrollbar, body::-webkit-scrollbar, div::-webkit-scrollbar, ul::-webkit-scrollbar, .card-deck::-webkit-scrollbar { width: 9px; height: 9px; } tbody::-webkit-scrollbar-track, body::-webkit-scrollbar-track, div::-webkit-scrollbar-track, ul::-webkit-scrollbar-track, .card-deck::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgb(2 27 43 / 30%); /* box-shadow: inset 0 0 6px #BCC3BC; */ border-radius: 12px; background-color: var(--scrollTrack); } tbody::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, div::-webkit-scrollbar-thumb, ul::-webkit-scrollbar-thumb, .card-deck::-webkit-scrollbar-thumb { background-color: var(--scrollThumb); border-radius: 12px; /* outline: 1px solid slategrey; */ /* border-radius: 12px; background: #304244; */ } tbody::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner, div::-webkit-scrollbar-corner, div::-webkit-scrollbar-corner, .card-deck::-webkit-scrollbar-corner { background: #242424; } /* #playlistAmLoader{ position: absolute; top: 30px; left:calc(100% / 2 - 25px); } */ div.alerts.moreMenus::after, svg:hover path { right: 28px; bottom: 98%; fill: none; stroke: var(--activeLinkColor); /* scale: 1.1 */ } .PlaylistMgr .modalHead { /* background: #32549c; */ height: 35px; font-size: 14px; /* padding: 0 15px; */ line-height: 17px; } .selSearchBox input.nosubmit { background: var(--d-input1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill ='%23ffffff' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center !important; padding: 7px 4px 7px 35px !important; border-radius: 8px !important; width: 200px; height: 32px; /* #3d434a */ } .selSearchBox input.nosearch { background: var(--searchBlock) !important; padding: 7px 4px 7px 7px !important; } .selSearchBox input.nosubmit:focus { /* box-shadow: 1px 1px 3px 0px #f3ececf2; */ } .onairtime { color: #3FF012; } .statusBackgroundPri { background: #91df91; color: #000; height: 26px; display: flex; padding: 1px 10px !important; align-items: center; gap: 10px; border-radius: 6px; width: fit-content; } .statusRoundPri { border-radius: 50px; height: 15px; width: 15px; font-weight: 600; font-size: 10px; align-items: center; justify-content: center; display: flex; top: 2px; position: relative; } .statusBackgroundSec { background: rgb(220, 141, 19); color: #000; height: 26px; display: flex; padding: 1px 10px !important; align-items: center; gap: 10px; border-radius: 6px; width: fit-content; } .statusBackgroundInfo { color: #17A2B8; padding: 1px 10px !important; align-items: flex-start; gap: 10px; border-radius: 4px; background: rgba(0, 71, 232, 0.10); } .statusBackgroundAbort { border: 1px solid; height: 26px; display: flex; width: fit-content; color: #E91E63; /* Deep pink/red to stand out from abort */ padding: 1px 10px !important; align-items: center; border-radius: 6px; background: rgba(233, 30, 99, 0.10); } .statusBackgroundmissing { display: flex; height: 26px; border: 1px solid; color: #F60A0A; padding: 1px 10px !important; align-items: center; gap: 10px; border-radius: 6px; background: rgba(246, 10, 10, 0.10); width: fit-content; } .statusBackgroundMismatch { display: flex; height: 26px; border: 1px solid; color: #F60A0A; padding: 1px 10px !important; align-items: center; gap: 10px; border-radius: 6px; background: rgba(246, 10, 10, 0.10); width: fit-content; } .statusBackgroundPending { height: 26px; border: 1px solid; display: flex; color: #FF9800; padding: 1px 10px !important; align-items: center; border-radius: 6px; background: rgba(255, 233, 0, 0.10); width: fit-content; } .statusBackgroundWarning { color: #FFC107; padding: 1px 10px !important; align-items: flex-start; border-radius: 4px; background: rgba(255, 165, 0, 0.10); width: fit-content; } .statusBackgroundRunning { height: 26px; border: 1px solid; display: flex; color: #f9fd00; padding: 1px 10px !important; align-items: center; border-radius: 6px; background: rgba(250, 192, 45, 0.10); width: fit-content; } /*.statusBackgroundReading { color: #00BCD4; padding: 1px 10px !important; align-items: flex-start; border-radius: 4px; background: rgba(0, 188, 212, 0.10); }*/ .statusBackgroundReading { height: 26px; border: 1px solid; display: flex; color: #007BFF; /* Bright blue for 'reading' state */ padding: 1px 10px !important; align-items: center; border-radius: 6px; gap: 10px; background: rgba(0, 123, 255, 0.10); width: fit-content; /* Soft blue transparent background */ } .statusBackgroundok { height: 26px; display: flex; border: 1px solid; color: #3AC977; padding: 1px 10px !important; align-items: center; gap: 10px; border-radius: 6px; background: rgba(58, 201, 119, 0.10); width: fit-content; } .statusBackgroundInactive { height: 26px; border: 1px solid; display: flex; align-items: center; border-radius: 6px; color: #9E9E9E; /* Medium neutral grey text */ padding: 1px 10px !important; width: fit-content; border-radius: 4px; gap: 10px; background: rgba(158, 158, 158, 0.15); /* Soft grey background */ /* border: 1px solid rgba(120, 120, 120, 0.15); */ /* Subtle border for clarity */ font-style: italic; /* Optional: visually shows inactive */ } /* .statusBackgroundNR { color: #BFBFBF !important; padding: 1px 10px !important; align-items: flex-start; border-radius: 4px; gap: 10px; background: rgba(200, 200, 200, 0.20); border: 1px dashed rgba(140, 140, 140, 0.25); font-style: normal; } */ .statusBackgroundNR { height: 26px; border: 1px solid; display: flex; align-items: center; border-radius: 6px; color: #A073FF !important; /* Soft purple text */ padding: 1px 10px !important; width: fit-content; border-radius: 4px; gap: 10px; background: rgba(160, 115, 255, 0.12); /* Transparent purple background */ /* border: 1px solid rgba(160, 115, 255, 0.25); */ /* Subtle purple border */ font-style: italic; /* optional: keep it consistent with inactive look */ } .secondryModal { background: #242424 !important; color: #242424 !important; font-size: 14px; border-radius: 8px; } .secondryModal .modalHead { font-size: 18px; background: var(--d-head); line-height: 24px; border-bottom: 1px solid #444; height: 45px; color: rgba(255, 255, 255, 0.90); font-size: 20px; font-style: normal; font-weight: 500; } .secondryModal .drawer-close:hover { background: #d81111; } .secondryModal .modalBody { background: var(--modalBody_bg) !important; padding: 5px 15px; } .secondryModal input, .secondryModal select, .secondryModal textarea { border-radius: 9px; background: var(--background-Color-n10) !important; height: 40px; color: #fff !important; padding: 7px 15px !important; font-size: 14px; -moz-appearance: none; appearance: none; background-repeat: no-repeat, repeat !important; background-position: right 0.7em top 50%, 0 0 !important; /* background-size: 0.65em auto, 100%; */ /* background-color: #1E1E1E !important; */ } .secondryModal select { border: 1px solid #464643 !important; /* border-right: 15px solid transparent !important; */ background-image: url('data:image/svg+xml,') !important; } .secondryModal input:not([type="file"]) { border: 1px solid #464643 !important; } .secondryModal select:focus, .secondryModal input:not([type="file"]):focus { box-shadow: 1px 1px 3px 0px #6b6464f2; } .secondryModal select:hover, .secondryModal input:not([type="file"]):hover { box-shadow: 1px 1px 3px 0px #4d4b4b; } .secondryModal input[type="date"] { border: 1px solid #464643 !important; /* border-right: 15px solid transparent !important; */ background-image: url('data:image/svg+xml,') !important; } .secondryModal label { /* color: #444; */ line-height: 28px; font-size: 13px; color: #E0E0E0 !important; } .secondryModal .modalHead>div { padding: 0px 5px; } .secondryModal .modalHead>div:first-child { padding: 0px 21px; } .secondryModal button { border-radius: 4px; } #playlistFile { padding: 50px 33px 46px 150px !important; } .secondryModal .modalBody { height: calc(100vh - 285px); } .secondryModal .modalFoot { background: var(--d-foot); border-top: 1px solid #444; height: 36px; padding: 25px; } /* */ /* #uploadplaylistheader{ background: #F9F9F9; color: #242424; font-size: 16px; line-height: 24px; border-bottom: 1px solid #DEDEDE; height: 35px; } label{ color:#444 } #modalBodyuploadplaylist{ background: #F9F9F9; font-size: 14px; } #PLfiletype, #selUploadPlsChn, #setPlaylistDate{ border-radius: 9px; background: #EBEBEB !important; height: 35px; color:rgba(68, 68, 68, 0.80) !important; } #playlistFile{ padding: 21px 11px 40px 160px !important; background: #EBEBEB !important; color: #444444 !important; border-radius: 8px; } */ /* #discardBtn{ color: black; margin-right: 10px; } */ /* [id^='discardBtn']:hover{ background: #000 !important; } [id^='btnUploadPlaylist']:hover{ background: rgb(125 187 148 / 90%) !important; } */ .more:hover .downloadMenus { display: block; } .downloadMenus { position: absolute; top: 100%; right: 0; /* min-width: 320px; */ background: #F9F9F9; color: #444; z-index: 55; font-size: 13px; border-radius: 8px; display: none; width: 260px; /* height: 160px; */ padding: 10px; text-wrap: wrap; } .downloadMenus path { stroke: green; fill: none; } .downloadMenus svg:hover path { fill: none; stroke: green; } .downloadMenus .padding { padding: 8px; } .downloadMenus svg { position: absolute; right: 9px; } .downloadMenus a:hover { background: #EBEBEB; } .uploadBtn button { border-radius: 4px; margin-right: 14px; } .popupActBtn:hover .svgIconCaption, .popupActBtn:hover .rightBoxMenu-round { color: #FFF; } .svgIconCaption { color: var(--TX-F-COL); font-family: SF Pro Text; font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; display: block; } .svgIconCaption:hover { color: #FFF; } input::file-selector-button { font-weight: 500; color: #fff; /* padding: 0.5em; */ border: thin solid grey; background: var(--inputFileType); border-radius: 4px; } ::-webkit-calendar-picker-indicator { /* background-image: url('data:image/svg+xml;utf8,'); */ -moz-appearance: none; -webkit-appearance: none; appearance: none; display: none; } .secondryModal .btn_Cancel { background: var(--bgBtnCancel) !important; border: 1px solid var(--bgBtnSuccess) !important; color: var(--bgBtnSuccess) !important; margin-right: 10px; font-size: 14px !important; padding: 2px 12px 25px 11px; } .secondryModal .bgSuccess { background: var(--bgBtnSuccess) !important; border: 1px solid var(--bgBtnSuccess) !important; } .btn_Cancel:hover { background: var(--bgBtnCancel) !important; } #modalBodyplFilter { height: calc(100vh - 280px) !important; } .boxLoader { top: calc(100% / 2); position: absolute; left: calc(100% / 2); } .boxLoaderContainer { position: absolute; /* left: calc(500px / 2); */ top: calc(91% / 2); top: 0px; left: 0px; height: 100%; width: 100%; } .fitWidth { width: fit-content; text-wrap: nowrap; } .reconcileTbody>tr { height: 27px; background: #97add6; color: black; border-bottom: 1px solid #6481b6; } .fixTableHead { position: sticky; box-shadow: inset 0 0px 0 #e2dada, inset 0 -1px 0 #9c9c9c; color: #fffffff0; top: 0; background: var(--BG-700); z-index: 2; } #filterLoader { z-index: 1020; } /* round toggle button css */ .switch { position: relative; display: inline-block; width: 40px; height: 18px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 0; bottom: 0px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked+.slider { background-color: #2196F3; } input:focus+.slider { box-shadow: 0 0 1px #2196F3; } input:checked+.slider:before { -webkit-transform: translateX(20px); -ms-transform: translateX(10px); transform: translateX(22px); } /* Rounded sliders */ .slider.round { border-radius: 14px; } .slider.round:before { border-radius: 50%; } /* round toggle button css END */ .MultiCheckBox { border: 1px solid #e2e2e2; padding: 2px 4px !important; border-radius: 4px; cursor: pointer; } .MultiCheckBox .k-icon { font-size: 15px; float: right; font-weight: bolder; margin-top: -7px; height: 10px; width: 14px; color: #787878; } .MultiCheckBoxDetail { display: none; position: absolute; border: 1px solid #e2e2e2; overflow-y: hidden; background: #F9F9F9; color: #000 } .MultiCheckBoxDetailBody { overflow: auto; } .MultiCheckBoxDetail .cont { clear: both; overflow: hidden; padding: 2px; } .MultiCheckBoxDetail .cont:hover { background-color: #cfcfcf; } .MultiCheckBoxDetailBody>div>div { float: left; padding: 0px 6px 0px 2px; } .MultiCheckBoxDetail>div>div:nth-child(1) {} .MultiCheckBoxDetailHeader { overflow: hidden; position: relative; height: 28px; background-color: #F9F9F9; border-bottom: 1px solid #8181813d; } .MultiCheckBoxDetailHeader>input { position: absolute; top: 4px; left: 3px; width: 12px !important; } .MultiCheckBoxDetailHeader>div { position: absolute; top: 5px; left: 24px; color: #000; } .channelCardAlertContainer { width: inherit; position: absolute; background-color: transparent; align-items: center; display: flex; height: 125px; min-height: 125px; display: flex !important; } .channelCardAlert { width: inherit; position: relative; background-color: #cb0909; padding: 2px; display: flex; justify-content: center; } .channelCardNotConfigured { background: #282828; opacity: .8; transition: display 1s; border: 0px dashed #eee !important; pointer-events: none; } .filterSlt { border: 1px solid #464643 !important; } .usernamelogout .deleteChannelOverlay { position: absolute; padding: 5px; z-index: 1; display: flex; width: 100%; min-height: inherit; justify-content: flex-end; align-items: center; top: 23px; } #channelList { background-color: var(--background-Color-n10); overflow-y: auto; max-height: 246px; width: 210px; } /* @import url("https://fonts.googleapis.com/css?family=Roboto:900"); */ /** * style variables */ /** * Control & indicator mixin */ .carousel { height: 83px; width: 100%; overflow: hidden; text-align: center; position: relative; padding: 0; list-style: none; /** * Where the magic happens */ /** * Control element - right/left arrows */ /** * Element for holding slide indicators */ /** * Indicator for indicating active slide */ /** * Create rules for when slides are contained within a track */ } .carousel__controls, .carousel__activator { display: none; } .carousel__activator:nth-of-type(1):checked~.carousel__track { transform: translateX(0%); } .carousel__activator:nth-of-type(1):checked~.carousel__slide:nth-of-type(1) { transition: opacity 0.5s, transform 0.5s; top: 0; left: 0; right: 0; opacity: 1; transform: scale(1); } .carousel__activator:nth-of-type(1):checked~.carousel__controls:nth-of-type(1) { display: block; opacity: 1; } .carousel__activator:nth-of-type(1):checked~.carousel__indicators .carousel__indicator:nth-of-type(1) { opacity: 1; } .carousel__activator:nth-of-type(2):checked~.carousel__track { transform: translateX(-100%); } .carousel__activator:nth-of-type(2):checked~.carousel__slide:nth-of-type(2) { transition: opacity 0.5s, transform 0.5s; top: 0; left: 0; right: 0; opacity: 1; transform: scale(1); } .carousel__activator:nth-of-type(2):checked~.carousel__controls:nth-of-type(2) { display: block; opacity: 1; } .carousel__activator:nth-of-type(2):checked~.carousel__indicators .carousel__indicator:nth-of-type(2) { opacity: 1; } .carousel__activator:nth-of-type(3):checked~.carousel__track { transform: translateX(-200%); } .carousel__activator:nth-of-type(3):checked~.carousel__slide:nth-of-type(3) { transition: opacity 0.5s, transform 0.5s; top: 0; left: 0; right: 0; opacity: 1; transform: scale(1); } .carousel__activator:nth-of-type(3):checked~.carousel__controls:nth-of-type(3) { display: block; opacity: 1; } .carousel__activator:nth-of-type(3):checked~.carousel__indicators .carousel__indicator:nth-of-type(3) { opacity: 1; } .carousel__activator:nth-of-type(4):checked~.carousel__track { transform: translateX(-300%); } .carousel__activator:nth-of-type(4):checked~.carousel__slide:nth-of-type(4) { transition: opacity 0.5s, transform 0.5s; top: 0; left: 0; right: 0; opacity: 1; transform: scale(1); } .carousel__activator:nth-of-type(4):checked~.carousel__controls:nth-of-type(4) { display: block; opacity: 1; } .carousel__activator:nth-of-type(4):checked~.carousel__indicators .carousel__indicator:nth-of-type(4) { opacity: 1; } .carousel__activator:nth-of-type(5):checked~.carousel__track { transform: translateX(-400%); } .carousel__activator:nth-of-type(5):checked~.carousel__slide:nth-of-type(5) { transition: opacity 0.5s, transform 0.5s; top: 0; left: 0; right: 0; opacity: 1; transform: scale(1); } .carousel__activator:nth-of-type(5):checked~.carousel__controls:nth-of-type(5) { display: block; opacity: 1; } .carousel__activator:nth-of-type(5):checked~.carousel__indicators .carousel__indicator:nth-of-type(5) { opacity: 1; } .carousel__control { height: 30px; width: 30px; margin-top: -15px; top: 50%; position: absolute; display: block; cursor: pointer; border-width: 5px 5px 0 0; border-style: solid; border-color: #fafafa; opacity: 0.35; outline: 0; z-index: 3; } .carousel__control:hover { opacity: 1; } .carousel__control--backward { left: 10px; transform: rotate(-135deg); } .carousel__control--forward { right: 10px; transform: rotate(45deg); } .carousel__indicators { position: absolute; bottom: 0px; width: 100%; text-align: center; } .carousel__indicator { height: 4px; width: 8px; border-radius: 25%; display: inline-block; z-index: 2; cursor: pointer; padding: 2px; opacity: 0.35; margin: 0 2.5px 0 2.5px; } .carousel__indicator:hover { opacity: 0.75; } .carousel__track { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 0; margin: 0; transition: transform 0.5s ease 0s; display: flex; align-items: center; justify-content: center; /* animation: carousel__track 15s linear 5s infinite ; */ } /* @keyframes carousel__track { 0% {background-color:red; left:-0px; top:0px; width: 222px;} 25% {background-color:yellow; left:-222px; top:0px;width: 222px;} 50% {background-color:green; left:-444px; top:0px;width: 222px;} 75% {background-color:blue; left:-222px; top:0px;width: 222px;} 100% {background-color:red; left:0px; top:0px;width: 222px;} } */ /* @keyframes carousel__track { 0% {transform: translateX(0%);} 25% {transform: translateX(-100%);} 50% {transform: translateX(-200%);} 75% {transform: translateX(-100%);} 100% {transform: translateX(0%);} } */ .carousel__track .carousel__slide { /* display: block; */ top: 0; left: 0; right: 0; opacity: 1; } .carousel__track .carousel__slide:nth-of-type(1) { transform: translateX(0%); } .carousel__track .carousel__slide:nth-of-type(2) { transform: translateX(100%); } .carousel__track .carousel__slide:nth-of-type(3) { transform: translateX(200%); } .carousel__track .carousel__slide:nth-of-type(4) { transform: translateX(300%); } .carousel__track .carousel__slide:nth-of-type(5) { transform: translateX(400%); } .carousel--scale .carousel__slide { transform: scale(0); } .carousel__slide { height: 100%; position: absolute; overflow-y: auto; opacity: 0; padding: 11px 10px; display: flex; flex-direction: column; gap: 6px; } /** * Theming */ * { box-sizing: border-box; } /* html, body { background-color: #111; font-family: 'Roboto', sans-serif; text-align: center; color: #fff; } */ .carousel-container { display: inline-block; } /* .my-carousel { border-radius: 5px; margin: 30px; } */ .carousel__slide { overflow: hidden; } .carousel--thumb .carousel__indicator { height: 30px; width: 30px; } h1 { font-size: 50px; line-height: 50px; color: #fafafa; position: absolute; top: 50%; width: 100%; text-align: center; margin-top: -25px; } h2, h3 { color: #fafafa; } h3 { font-size: 50px; } .carousel__indicator { background-color: #fafafa; } .playoutDashboardCard .carousel__slide, .playoutDashboardCard .cardDashboarChannelName { color: #FFF; font-family: Poppins; font-size: 12px; font-style: normal; font-weight: 400; line-height: 14px; } .playoutDashboardCard .cardDashboarChannelName { padding: 0px 5px; line-height: 14px; font-size: inherit; background-color: #111C28CC; width: 222px; height: 26px; position: absolute; z-index: 1; } .playoutDashboardCard .cardDashboarChannelType { color: #FFFFFFCC; height: inherit; font-size: inherit; padding: 0px; } .playoutDashboardCard sup { color: #FFFFFFCC; } .wordOverflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--TX-A-COL); } #zoomCardContainer { position: absolute; top: 0px; left: 900px; display: none; z-index: 4; } #zoomCardContainer .channelCardZoom { /* width: 420px; max-width: 420px; height: 700px; */ Width: 343px; max-width: 343px; /* Height:420px; */ } #zoomCardContainer .channelCardZoom .player { Width: 343px; Height: 193px; background-color: #111C28; border-radius: 16px 16px 0px 0px; } #zoomCardChannelName { Width: 343px; Height: 33px; z-index: 2; border-radius: 16px 16px 0px 0px; } #zoomPlaylistInfo { font-size: 14px; padding: 0px 15px; /* background-color: rgba(24, 39, 56, 0.85); */ border-radius: 0px 0px 16px 16px; } .zoomDiv:hover { -ms-transform: scale(1.5); -webkit-transform: scale(1.4); transform: scale(1.54); box-shadow: 0px 4px 4px 0px rgba(24, 39, 56, 0.25); z-index: 2; margin-top: 58px; } #zoomCard { z-index: 15; } #zoomCardContainer #zoomCard { background-color: rgba(24, 39, 56, 0.85); box-shadow: 1px 1px 1px 1px rgba(23, 23, 23, 0.6); } .cardDashboarChannelType .typeFast { border: 1px solid rgba(170, 170, 170, 1); border-radius: 4px; color: rgba(170, 170, 170, 1); } .tbody_BorderBottom tr { border-bottom: 1px solid var(--background-Color-n8) !important; } .urlPreviewPlayer { flex-wrap: wrap; justify-content: space-between; } .urlPriviewHeight { height: var(--videoHeightPlayerBox); display: flex; justify-content: center; align-items: center; } /* js */ #THEAD { background: var(--onairPlThead); border-bottom: 1px solid var(--tHeadBorder); } #mainMenu, #searchDiv, #systemLeft { background-color: var(--background-Color-n1); } #namedMenuLeft, #mysystemtime, #mainMenu, #searchDiv, #sideDrawer, #systemLeft { border: var(--border); background: var(--background-Color-n32); border-bottom: 1px solid var(--mainMenuBorder); } #mainMenu { border-right: 0px; } #searchDiv { border-right: 0px; border-left: 0px; } #mainMenu>div div { /* position: absolute; top: 100%; left: 0; */ max-height: calc(100vh - 200px); min-width: fit-content; background: transparent; z-index: 1010; display: inline; /* overflow-y: auto; */ border-bottom: 0px solid #444; } div#mainMenu a:hover { background: transparent !important; } #systemLeft { border-left: 0px; } #onAirLivePlayerBox { padding: 7px 20px; background-color: var(--background-Color-n34); } /* #namedMenuRight { background-color: var(--background-Color-n33); box-shadow: var(--box-shadow); } */ #contentMgr .drawer-body { padding: 3px; font-size: 11px; margin-right: 0px; } #rightFullDiv, #leftDivbgClr, #tmbottom { background-color: var(--background-Color-n2); } #rightFullDiv { overflow: auto; } #rightFullDiv>div { min-width: 1275px !important; } .onAirLivePlayerBox { background-color: var(--background-Color-n34); } #lowresPreviewPST { background-color: var(--BG-900); text-align: center; position: relative; overflow: hidden; cursor: pointer; /**max-height: 125px;**/ /* height:140px; */ /* border-left: 1px solid white; */ aspect-ratio: 16/9; } #playerProgressButton, #progressbarstatus { /* background-color: var(--background-Color-n26); */ padding: 10px 0px; } #activeChannel, #currentRemark { background-color: var(--defaultBlock); } .automationBtn { background-color: var(--background-Color-n10); } .bulkOpCard { background-color: var(--background-Color-n10); } .ThemesMenu, .btn-block, .plListCard, .plListAction, .slaveMasterStatusCount { background-color: var(--background-Color-n7); } .radio-group { background: var(--d-input); border-radius: 4px; } input[type=radio]:checked+label { /* background: var(--d-card); */ background: var(--TX-A-COL) !important; border: 1px solid var(--background-Color-n8); border-radius: 4px; } /* .drawer-body{ background-color: var(--background-Color-n2); } */ #contentsearch { background-color: var(--background-Color-n21); } #leftMenuBar { background-Image: var(--backgroundImage-1); border-right: var(--borderRight); } .divOuterContentCard { background-color: var(--background-Color-n7); } #tmtop { background-color: var(--background-Color-n10); } #TBODY { background-color: var(--background-Color-n27); } #playlistContainer, #videoPlayerContainer { background-color: var(--background-Color-n28); border-radius: 12px 12px 0px 0px; /* border: 1.5px solid #3a414b; */ } #tmbottom { background-color: var(--background-Color-n12); } .grd_btn { background-Image: var(--operationMenuBtn-Bg); } .grd_btn.btnDisabled { background-Image: var(--operationMenuBtn-Bg-Disable) !important; } .expanded-playbox { height: 65px; } #lowresPreviewPST video { width: 100.1%; object-fit: fill; max-height: 100%; margin: 0; border: 0px solid red; margin: auto; } #lowresPreviewPST::after { position: absolute; right: 0; top: 0; /**content: 'Overlay';**/ /**z-index: 1;***/ /* background: #333; */ width: 50px; height: 20px; font-size: 11px; padding: 5px; cursor: pointer; } #goToOnAirBtn { height: 40px; width: 40px; position: fixed; bottom: 110px; right: 15px; z-index: 99; font-size: 13px; border: none; outline: none; background-color: red; color: white; cursor: pointer; padding: 5px 10px; border-radius: 60px; display: flex; transition: transform 0.3s ease; align-items: center; border: 1px solid darkred; } #goToOnAirBtn:hover:after { content: "ON-AIR"; } #goToOnAirBtn:hover { transform: scale(1.1); width: 100px; content: "Param"; color: #FFF; } .operationPlayerDiv { background-color: var(--background-Color-n36); } #zoomPlaylistInfo>div:not(:first-child) { border-top: 1px solid rgba(255, 255, 255, 0.5); } .configCard { border: 1px solid; height: 330px; display: grid; background: var(--BG-800); left: 3%; position: sticky; top: 7%; font-size: large; width: 37%; border-radius: 8px; border: 1px solid; padding: 10px; box-shadow: 5px 10px; } .pagination { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: Arial, sans-serif; font-size: 12px; line-height: 25px; } .page-btn { /* padding: 0px 6px; */ padding: 0px; background-color: #007bff; color: white; border: none; cursor: pointer; border-radius: 4px; min-width: 30px; transition: all 0.3s ease; } .pagination .pge-btn { background-color: var(--cloudBtn); line-height: 26px; min-height: 28px; color: #fff; border: 1px solid transparent !important; border-color: #9ca1a5 !important; align-items: center; display: inline-flex; justify-content: center; font-size: 18px; /* box-shadow: var(--boxShadow-Btn); */ } .page-btn:disabled { background-color: #cccccc !important; cursor: not-allowed; } .page-numbers .page-number { /* padding: 8px 12px; */ display: inline-block; padding: 0px; line-height: 26px; min-width: 30px; margin: 0 2px; background-color: #f1f1f1; color: #333; cursor: pointer; border-radius: 4px; border: 1px solid transparent !important; text-align: center; transition: all 0.3s ease; } .page-numbers .circle-span { display: inline-flex; /* Allows centering with flex */ align-items: center; /* Centers content vertically */ justify-content: center; /* Centers content horizontally */ width: 50px; /* Fixed width */ height: 50px; /* Fixed height (equal to width) */ background-color: lightgreen; color: white; border-radius: 50%; border: 1px solid transparent !important; /* Perfectly round */ font-size: 18px; font-weight: bold; margin: 0 2px; transition: all 0.3s ease; } .page-numbers .sm { width: 25px !important; /* Fixed width */ height: 25px !important; font-size: 12px !important; font-weight: normal !important; margin: 2px; } .page-btn:hover, .page-numbers .page-number:not(.disabled):hover, .page-numbers .circle-span:not(.disabled):hover { background-color: #2c8ef7; color: #fff; transform: scale(1.1); } .page-numbers .page-number.active, .page-numbers .circle-span.active, .drawerTrack .circle-span.active { background-color: #007bff; color: white; font-weight: bold; cursor: pointer; } .page-btn.first { border-radius: 5px 0 0 5px; } .page-btn.last { border-radius: 0 5px 5px 0; } #TFOOT input, #TFOOT select, #TFOOT textarea { border: 1px solid var(--d-input); background: var(--d-input); color: var(--d-input-text); font-size: 12px; padding: 2px; height: 25px; border-radius: 4px !important; } #gridColumnSetting { overflow: auto; height: calc(100vh - 360px); } .input-with-checkbox { position: relative; display: inline-flex; align-items: center; } .input-with-checkbox input[type="text"] { padding-right: 30px; width: 200px; } .checkbox { /* position: absolute; right: 20px; */ transform: scale(1.2); cursor: pointer; min-width: 16px; width: 16px !important; } .gap_extraTiny { gap: 2px; } .gap_tiny { gap: 4px; } .gap_extraSmall { gap: 6px; } .gap_small { gap: 8px; } .gap_extraMedium { gap: 12px; } .gap_medium { gap: 16px; } .gap_xMedium { gap: 20px; } .gap_normal { gap: 24px; } .gap_large { gap: 32px; } .gap_xLarge { gap: 48px; } .gap_xxLarge { gap: 56px; } .gap_extraLarge { gap: 64px; } .gap-4 { gap: 1rem; } #segmentTaggingContainer { height: 100%; } .disabled { color: #494444b8 !important; cursor: not-allowed !important; background-color: #beb8b8 !important; } .disabled-line-through { color: var(--text-gray-400) !important; cursor: not-allowed !important; /* background-color: #beb8b8 !important; */ text-decoration-color: #de5757; text-decoration-line: line-through; text-decoration-thickness: 2px; text-decoration-style: solid; } /* The Drawer */ .drawer1 { /* position: fixed; */ /* top: 0; left: 0; width: 100%; max-height: 0; overflow: hidden; */ /* background-color: #007bff; color: white; */ transition: max-height 0.3s ease; /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); */ z-index: 1000; } .drawer1.open { /* max-height: 300px; */ /* Adjust as needed */ } /* Drawer Content */ .drawer1-content { /* padding: 20px; */ } /* Toggle Button */ .toggle-drawer1-btn { position: fixed; top: 5px; right: 15%; transform: translateX(-50%); padding: 15px 10px; background-color: #475a6d8c; color: white; border: #475a6d2e; /* border-radius: 50%; */ border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; cursor: pointer; z-index: 1001; } .toggle-drawer1-btn:hover { background-color: #4a627ac9; /* transform: rotate(180deg); //Rotates the chevron on hover transition: transform 0.3s ease; */ } .cpydownBtn { padding: 0px 11px; font-size: 16px; font-weight: bold; text-transform: uppercase; border: none; border-radius: 5px; cursor: pointer; transition: all 0.3s ease-in-out; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); position: relative; overflow: hidden; align-items: center; display: flex; height: 22px; color: #fff; } .chDropdown:hover .cpydown { display: flex; opacity: 1; justify-content: flex-start; z-index: 1000; } .chDropdown .cpydown { position: absolute; display: none; left: 13px; width: clamp(350px, 50%, 500px); /* max-height: 500px; overflow-y: scroll; top: -5px;*/ padding: 5px 1px 5px 5px; border-radius: 5px; border: 1px solid #413c3cb8; line-height: 17px; font-size: 10px; background-color: var(--d-bg); /* width: 101px; */ /* right: 0px; width: fit-content; min-width: 70px; */ } /* Download Button */ .downloadbtn { background-color: #FF6F61; box-shadow: 0 4px 8px rgba(255, 111, 97, 0.3); /* Soft shadow for depth */ } .downloadbtn:hover { background-color: #FF3E30; /* Darker shade of coral on hover */ box-shadow: 0 6px 12px rgba(255, 111, 97, 0.5); /* Slightly bigger shadow on hover */ transform: translateY(-3px); /* Slight lift effect on hover */ } .downloadbtn:active { background-color: #FF2A1D; /* Even darker on active state */ transform: translateY(1px); /* Button presses down a little */ } /* Copy Button */ .copybtn { background-color: #00BFFF; box-shadow: 0 4px 8px rgba(0, 191, 255, 0.3); /* Soft shadow for depth */ } .copybtn:hover { background-color: #0088CC; /* Darker shade of blue on hover */ box-shadow: 0 6px 12px rgba(0, 191, 255, 0.5); /* Bigger shadow on hover */ transform: translateY(-3px); /* Slight lift effect on hover */ } .copybtn:active { background-color: #0077B3; /* Darker blue on active state */ transform: translateY(1px); /* Button presses down a little */ } .overLay-bottom-border { border-bottom: 1px solid #80808061; } .lifeCycleTable { width: 100% !important; } .modal-content { background-color: #fff; margin: 10% auto; padding: 20px; width: 80%; max-width: 600px; border-radius: 5px; } .close-btn { position: absolute; top: 10px; right: 20px; font-size: 28px; cursor: pointer; } /* Tabs */ .tabs { display: flex; justify-content: space-around; margin-bottom: 10px; } .tab-button { padding: 10px; background-color: #F1F1F1; border: none; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } .tab-button:hover { background-color: #ddd; } .tab-button.active { background-color: #4CAF50; color: white; } /* Tab content */ .tab-content { display: none; } .tab-content.active { display: block; } .toggle-btn, .size-btn { /* padding: 10px 15px; background-color: #007bff; color: white; border: none; cursor: pointer; border-radius: 5px; */ font-size: 14px; transition: background-color 0.3s ease; } .toggle-btn:hover, .size-btn:hover, .toggle-btn.active, .size-btn.active, .toggle-btn.active i, .size-btn.active i { background-color: #0056b3; color: #FFF !important; } /* Grid View - Medium (Default) */ .grid-view .media-card { flex: 0 0 calc(25% - 20px); /* 4 cards per row */ } /* Grid View - Small */ .grid-view.small-grid .media-card { flex: 0 0 calc(20% - 20px); /* 5 cards per row */ } /* Grid View - Large */ .grid-view.large-grid .media-card { flex: 0 0 calc(33.33% - 20px); /* 3 cards per row */ } /* Card Container */ #cardContainer { display: flex; flex-wrap: wrap; gap: 20px; transition: all 0.5s ease; } /* Style for the card view */ .media-card { border: 1px solid #2f3d53; margin: 10px; padding: 5px 10px; border-radius: 5px; box-shadow: 5px 5px 5px rgb(76 64 64 / 17%); width: 200px; display: inline-block; vertical-align: top; z-index: 1; } .media-card-header { font-weight: bold; } .media-card-body { margin-top: 10px; /* position: relative; */ } .media-card-body img { transition: opacity 0.3s ease-in-out; } .media-card-footer { /* margin-top: 15px; */ text-align: center; min-height: 22px; display: flex; align-items: center; } .media-card-footer button { margin: 5px; } /* Style for list view */ #TBODY { display: block; } /* Hidden content initially */ .additional-info { display: none; color: white; font-size: 16px; text-align: center; background-color: rgba(0, 0, 0, 0.6); padding: 10px; border-radius: 5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* width: 100%; height: 84%; height: 100%; */ aspect-ratio: 16 / 9; width: 100%; justify-content: center; align-items: center; } /* Show additional information and apply blur on hover */ .media-card:hover { /* Apply blur effect */ transform: scale(1.05); position: relative; /* Optional: Slightly scale up the card */ } /* Show the additional information on hover */ .media-card:hover .additional-info { /* backdrop-filter: blur(10px); */ display: flex; /* Show content when hovered */ } .lifeCycleContainer { display: flex; justify-content: center; align-items: center; background-color: #f8f9fa; padding: 10px 50px 10px 50px; border-radius: 5px; min-width: 75%; } .status-tracker { display: flex; flex-direction: column; align-items: flex-start; position: relative; /* padding-left: 50px; */ } .status-tracker::before { content: ''; position: absolute; top: 20px; right: 15px; width: 4px; height: calc(100% - 40px); background-color: #ccc; z-index: 0; } .status-item { display: flex; align-items: center; position: relative; /* width: 100%; */ justify-content: space-between; } .status-tracker .status-item { margin: 15px 0; } .status-item .status { width: 120px; text-align: center; /* margin-right: 20px; */ font-weight: bold; color: #333; } .status-item .circle { width: 35px; height: 35px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: bold; border: 2px solid white; color: white; background-color: #ccc; z-index: 1; transition: transform 0.3s ease, background-color 0.3s ease; } .circle:hover { transform: scale(1.1); cursor: pointer; } /* Status-Specific Colors and Indicators */ .completed .circle { /* background-color: #28a745; */ background-color: #00d400; /* Green */ } .completed .circle::after { content: '✔'; } .in-progress .circle { /* background-color: #ffc107; */ background-color: darkorange; /* Yellow */ } .in-progress .circle::after { /* content: '⚠'; */ content: '⏳'; } .failed .circle { background-color: #ff8d8d; border-color: red; /* Red */ } .failed .circle::after { content: '❌'; } .move .circle { background-color: #FF9800; /* Red */ } .move .circle::after { content: '⬌'; /* or '⇅' depending on the direction of movement */ } .not-soruce .circle { background-color: #FF9800; /* Red */ } .not-soruce .circle::after { content: '⊘'; /* or '⇅' depending on the direction of movement */ } .proxy .circle { background-color: lightslategray; /* Red */ } .proxy .circle::after { content: '🌐'; /* or '⇅' depending on the direction of movement */ } .pending .circle, .proxydone .circle, .hold .circle { background-color: #e2e3e5; /* Gray */ } .pending .circle::after { content: '⏳'; color: #555; } .proxydone .circle::after { content: '🎥'; font-size: 10px; } .hold .circle::after { content: '⏸'; color: #555; } .mute .circle, .other .circle, .loud .circle, .black .circle { background-color: #a31212; border-color: #b51111; height: 20px; width: 20px; font-size: 15px; /* Gray */ } .mute .circle::after { content: '🔇'; } .loud .circle::after { content: '🔊'; } .black .circle::after { content: '⚫'; } .other .circle::after { content: '❖'; } .freeze .circle { background-color: #edebe8; border-color: #e0322d; height: 20px; width: 20px; font-size: 15px; /* Gray */ } .freeze .circle::after { content: '❄️'; } .not-started .circle { background-color: lightslategray; /* Red */ } .not-started .circle::after { content: '🔲'; font-size: 34%; /* or '⇅' depending on the direction of movement */ } .op-menu { width: 200px; /* background-color: white; */ background-color: var(--tBody-Bg); box-shadow: 0px 0px 26px 10px var(--d-bg); z-index: 2; border-radius: 5px; position: absolute; /* top: 0px; */ left: 50px; /* overflow: hidden; */ } .op-menu-item { display: flex; align-items: center; padding: 10px 15px; color: #FFFFFF; text-decoration: none; border-bottom: 1px solid #47454594; position: relative; cursor: pointer; } .op-menu-item:last-child { border-bottom: none; } .op-menu-item i { margin-right: 10px; color: #F9F9F9; position: relative; /* Added to serve as the reference point for .sub-menu */ } .op-menu-item:hover { /* background-color: #f0f0f0; */ background-color: var(--BG-950) !important; } .op-menu-item span { flex-grow: 1; } .op-menu-item .fas { color: #F9F9F9; } .op-sub-menu { display: none; /* background-color: #f9f9f9; */ background-color: var(--BG-750); position: absolute; top: 0; left: 100%; /* Positions the submenu to the right of the first */ width: 200px; box-shadow: 0 2px 10px rgb(22 20 20 / 73%); border-radius: 5px; /* height: 300px; */ max-height: 300px; overflow-y: auto; z-index: 1; } .op-sub-menu .op-menu-item { padding-left: 15px; } .op-menu-item:hover .op-sub-menu { display: block; } .op-sub-menu a.op-menu-item:hover { background-color: var(--BG-800) !important; } .maingridopn { width: 85px; display: inline-flex; justify-content: space-between; padding: 0 5px; } .sticky-last-column th:last-child, .sticky-last-column td:last-child { position: sticky; right: 0; background: var(--tBody-Bg); /* background-color: #1b1a1a; */ box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); } .sticky-first-column th:first-child, .sticky-first-column td:first-child { position: sticky; left: 0; background: var(--tBody-Bg); /* background-color: #1b1a1a; */ box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); } .sticky-col-head { position: sticky; left: 0; background: var(--BG-700); z-index: 2; } .sticky-col-row { position: sticky; left: 0; background: var(--background-Color-n28); z-index: 2; } .contentTable tr { border-bottom: 1.5px solid #444; text-align: left; height: 40px; } .contentTable th:last-child, .contentTable td:last-child { border-right: none; } .contentTable td { border-right: 1px solid #44444485; padding: 0 10px; box-sizing: border-box; } .contentTable th { padding: 0 0 0 10px; box-sizing: border-box; } .extra-compactRow tr { height: 20px !important; line-height: 17px !important; } .compactRow tr { height: 35px !important; line-height: 25px !important; } .standardRow tr { height: 35px !important; line-height: 33px !important; } .largeRow tr { height: 40px !important; line-height: 38px !important; } /* Trigger Area for the Hover Drawer */ #triggerArea { position: relative; top: 0; left: 0; width: 100%; height: 100%; /* background-color: #15212f; */ background: var(--background-Color-n32); cursor: pointer; z-index: 13; } /* Side Drawer */ #sideDrawer { height: calc(100vh - 110px); width: 250px; position: fixed; top: 58px; left: -187px; /* background-color: #333; */ background: var(--BG-700); color: white; transition: transform 0.3s ease-in-out; /* padding-top: 10px; */ z-index: 12; border: 3px solid var(--BG-900); } #sideDrawer a { padding: 10px; text-decoration: none; font-size: 18px; color: white; display: block; transition: 0.3s; } #sideDrawer a:hover { /* background-color: #575757; */ background-color: #ffffff1a; } /* Hover effect to open the drawer */ #triggerArea:hover+#sideDrawer, #sideDrawer:hover { transform: translateX(250px); /* Slide the drawer open using transform */ } /* Dropdown Menu Styling */ .dropdownMenus { cursor: pointer; background-color: var(--background-Color-n27); border-radius: 5px 5px 0 0; padding: 10px; text-align: left; color: white; /* margin: 5px; */ } .dropdownMenu { display: none; flex-direction: column; background-color: var(--background-Color-n27); /* background-color: #ffffsd1a; */ padding: 10px; list-style-type: none; margin: 0; border-top: 1px solid var(--BG-600); } .dropdownMenu li { padding: 8px; cursor: pointer; } .dropdownMenu li:hover { background-color: var(--background-Color-n8); } /* Section Visibility */ .content-section { display: none; } .active-section { display: block; } /* Arrow icons */ .arrow { font-size: 18px; float: right; transition: transform 0.3s ease; } .arrow.up { transform: rotate(180deg); /* Flip the arrow */ } .arrow.down { transform: rotate(0deg); /* Normal position */ } .opertionMenuIconCss { width: 58px; justify-content: center; display: flex; min-height: 55px; align-items: center; border-bottom: 2px solid #303d4c; } .statusLogText { float: right; position: relative; align-items: center; justify-content: center; display: flex; right: 84%; } .MDhtmlCss { background: lightpink; color: #fff; font-family: Moul !important; font-size: 20px; font-weight: 400; height: 50px; display: flex; align-items: center; background: #182738; } .mdMgrHeader { border-bottom: 1px solid var(--BG-600); color: #afacac; } .accordion-item { background: #333; border-radius: 5px; margin-bottom: 10px; overflow: hidden; } .accordion-button { width: 100%; background: #182740 !important; color: white; padding: 12px; text-align: left; font-size: 16px; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; outline: none; } .accordion-button i { transition: transform 0.3s ease; } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; background: #212a34; padding: 0 15px; } .accordion-content.open { max-height: 300px; padding: 10px 15px; } .rotate { transform: rotate(180deg); } .grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 16px; } @media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } } .dash-grid { display: grid; } .dash-grid-cols-4 { grid-template-columns: repeat(4, 1fr); } .dash-grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .dash-grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .dash-grid-cols-1 { grid-template-columns: repeat(1, 1fr); } .col-span-2 { grid-column: span 2; } .dash-grid-rows-3 { grid-template-rows: repeat(3, 1fr); } .space-x-2>*+* { margin-left: 0.5rem; } .space-x-4>*+* { margin-left: 1rem; } .input-group { display: flex; flex-direction: column; } .input-group label { margin-bottom: 8px; } .input-group input, .input-group select { padding: 8px; background-color: #2d3748; border: 1px solid #4a5568; border-radius: 4px; color: #fff; } .checkbox-group { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; } .checkbox-group .checkbox-item { display: flex; align-items: center; } .checkbox-group .checkbox-item input { margin-right: 8px; } .form-group1 { display: flex; flex-direction: column; } .form-group1 label { margin-bottom: 8px; } .form-group1 input, .form-group1 select { padding: 8px; background-color: #2d3748; border: 1px solid #4a5568; border-radius: 4px; color: #ffffff; } .toggle-dot { transition: transform 0.3s ease; } .toggle-dot.checked { transform: translateX(1.25rem); } /* .accordion-content { display: none; } */ .element { position: relative; /* Important: Makes .element the positioning context */ } .element::after { /* Or ::before */ content: ""; position: absolute; left: -4px; right: 0; bottom: -10px; height: 2px; background-color: var(--activeTab); width: 107%; } .lanugageDropdownMenu { background: #303f51; /* height: 22px; width: 262px; */ min-width: 250px; border-radius: 4px; /* justify-content: center; */ display: flex; align-items: center; padding: 5px; text-overflow: ellipsis; } .dropDownLang { position: absolute; overflow: auto; height: 188px; /* width: 262px; display: block; position: fixed; */ background: rgb(33, 42, 52); max-width: 341px; /* width: 342px; */ width: 100%; z-index: 2; } .dropdown-list label { display: block; /* FORCE new line */ width: 100%; } .handlerConfigImgData { overflow: auto; /* height: 210px; */ /* width: -webkit-fill-available; */ /* justify-content: center; position: relative; */ } .handlerConfigImgData>img { display: flex; justify-self: center; } .iconPossetter { position: absolute; align-items: center; right: 8px; } .drawerTrack { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background-color: var(--background-Color-n7); color: white; padding: 3px; border-radius: 20px; white-space: nowrap; visibility: hidden; opacity: 0; transition: opacity 0.3sease-in-out, transform 0.2sease-in-out; /* display: grid; */ gap: 10px; border: 1px solid #333; z-index: 2; } .containerTrack:hover .drawerTrack { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(-5px); /* Slight movement */ } #excelFile { padding: 29px 0px 0px 320px !important; justify-content: center; align-items: center; height: 75px; display: flex; width: 90%; } #playlistUploadDiv { height: 87px; justify-content: center; /* background: var(--background-Color-n10) !important; */ /* border-radius: 8px; */ /* border: 1px dotted rgba(255, 255, 255, 0.2); */ display: flex; } #vodDeliveryUploadTable { height: calc(100vh - 266px); overflow: auto; } #vodDeliveryUploadTable th { background-color: var(--BG-700); border-bottom: 1.5px solid #444; /* border-right: 1px solid */ } #vodDeliveryUploadTable td { border-bottom: 1px solid #444 !important; } .vodVideoContainer { position: relative; width: 60%; /* Full width */ /* max-width: 800px; Optional max width */ aspect-ratio: 16 / 9; /* Ensures the correct aspect ratio */ /* background: black; /* Optional background */ } .readonly-banner { display: inline-block; padding: 9px 24px; background: linear-gradient(135deg, #ff6a00, #ee0979); color: white; font-size: 1.1rem; font-weight: 600; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); text-align: center; letter-spacing: 1px; /* animation: pulse 1.8s infinite; */ margin: 20px; height: 41px; } .icon-wrapper { /* width: 30px; */ text-align: center; font-size: 20px; display: inline-flex; justify-content: center; align-items: center; border: 1px solid transparent; padding: 3px; } .icon-wrapper .fa { font-size: 14px; } .icon-wrapper .label { color: #fff; font-size: 12px; pointer-events: none; } .icon-wrapper:hover { background-color: var(--BG-650); border: 1px solid #333333; border-radius: 3px; } .player-controls { display: flex; gap: 5px; background: #111827; padding: 2px 10px; border-radius: 12px; align-items: center; box-shadow: 0 0 20px #00000055; border: 1px solid #333333; } .control-btn { border-radius: 5px; border: none; background-color: #1f2937; color: white; font-size: 12px; padding: 2px 5px; display: flex; align-items: center; gap: 4px; transition: all 0.2s ease; cursor: pointer; } .control-btn:hover { background-color: #374151; transform: scale(1.05); } .control-btn span { font-size: 12px; } /* Tooltip */ .control-btn::after { content: attr(data-tooltip); position: absolute; top: -28px; background: #333; color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .control-btn:hover::after { opacity: 1; } /* Play/Pause Animation */ .play-btn i { transition: opacity 0.3s ease; } .play-btn.playing .fa-play { opacity: 0; position: absolute; } .play-btn.playing .fa-pause { opacity: 1; position: relative; } .play-btn .fa-pause { opacity: 0; position: absolute; } .play-btn { background-color: #22c55e; color: white; font-size: 12px; padding: 2px 8px; border-radius: 50%; box-shadow: 0 0 10px #22c55e66; } .play-btn:hover { background-color: #16a34a; } #dropdownContainer { position: relative; display: inline-block; } #addNewPanel { position: absolute; top: 100%; left: 0; background-color: white; border: 1px solid #ccc; padding: 10px; display: none; z-index: 100; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } #addNewPanel input { display: block; margin-bottom: 5px; width: 200px; } #addNewPanel button { width: 100%; } .lookup-wrapper { font-family: sans-serif; background: #121e2c; /* color: #fff; */ color: var(--TX-F-COL); padding: 20px; /* max-width: 600px; */ max-width: 95%; margin: auto; border-radius: 10px; } .lookup-title { font-size: 18px; font-weight: bold; margin-bottom: 16px; } .lookup-header, .lookup-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; align-items: center; gap: 10px; margin-bottom: 8px; } .lookup-header div { font-weight: bold; text-align: center; } .lookup-header { font-weight: bold; border-bottom: 1px solid #ccc; padding-bottom: 8px; margin-bottom: 12px; color: var(--TX-F-COL) } .lookup-label { font-weight: 600; } /* .lookup-label { padding-right: 10px; font-weight: 500; } */ .lookup-bar { text-align: center; padding: 6px 0; border-radius: 5px; font-weight: bold; font-size: xx-small; } .spacer { height: 8px; } .row-type { font-size: 12px; color: #ccc; } .lookup-group-box { border: 1px solid #2a3542; padding: 8px 0px 0 0; border-radius: 8px; margin-bottom: 5px; } .ack-icon { font-size: 1.2em; margin-left: 5px; cursor: default; vertical-align: middle; transition: transform 0.2s ease; } .ack-icon:hover { transform: scale(1.2); color: #28a745; /* green highlight on hover */ } .carouselNew { position: relative; width: 100%; height: calc(100vh - 275px); overflow: hidden; } .slideNew { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; animation-duration: 20s; animation-iteration-count: infinite; animation-timing-function: steps(1, end); /* Switch without blending */ } .slideNew.active { opacity: 1; pointer-events: auto; z-index: 10; } .carouselNew:hover .slideNew { animation-play-state: paused; } .slide1 { animation-name: showSlide1; } .slide2 { animation-name: showSlide2; } .slide3 { animation-name: showSlide3; } @keyframes showSlide1 { 0%, 49.999% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes showSlide2 { 0%, 49.999% { opacity: 0; } 50%, 100% { opacity: 1; } } @keyframes showSlide3 { 0%, 49.999% { opacity: 1; } 50%, 100% { opacity: 0; } } .cardHeight1 { height: calc(100vh - 273px) !important; } .cardHeight2 { height: calc(100vh - 342px) !important; overflow: auto; } #sortingList .sortable[data-order="asc" i]::after { content: "↑"; font-size: 20px; position: absolute; right: 5px; display: flex; align-items: center; transform: translateY(-5%); color: #007bff; transition: color 0.3s ease, transform 0.3s ease; padding-right: 12px; } #sortingList .sortable[data-order="desc" i]::after { content: "↓"; font-size: 20px; position: absolute; right: 5px; display: flex; align-items: center; transform: translateY(-5%); color: #28a745; transition: color 0.3s ease, transform 0.3s ease; padding-right: 12px; } #sortingList .sortable[data-order="none" i]::after { content: "⇅"; font-size: 20px; position: absolute; right: 5px; display: flex; align-items: center; transform: translateY(-5%); color: #606265; transition: color 0.3s ease; padding-right: 12px; } #sortingList { width: 170px; } .flexStart { display: flex; justify-content: flex-start; } #sortingList ::after { display: flex; justify-content: flex-end; } .trackBtn { position: absolute; right: 16px; /* top: 50%; */ /* transform: translateY(-50%); */ background-color: #007BFF; color: white; border: none; padding: 5px 7px; /* font-size: 16px; */ border-radius: 6px; cursor: pointer; /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); */ transition: background-color 0.3s ease; } #eventClip td { text-align: center; vertical-align: middle; /* optional: vertical centering */ } .fa-trash-alt:hover { color: red; } .neon { background: transparent; color: #00f2fe; border: 1px solid #007bff; box-shadow: 0 0 0 transparent; } .neon:hover { box-shadow: 0 0 6px #00f2fe, inset 0 0 0px #007bff; color: #111c28; background: #007bff } .neon:hover svg { transform: translateX(-8px); } .back-btn { display: inline-flex; gap: 12px; font-size: 14px; padding: 4px 14px; border-radius: 50px; cursor: pointer; transition: all 0.4s ease; font-weight: 500; position: relative; overflow: hidden; height: 30px; width: 140px; } .bar-container { position: relative; width: 500px; height: 10px; background: #ccc; margin: 20px 0; } .marker { width: 10px; height: 20px; background: #333; position: absolute; top: -5px; cursor: pointer; } .highlight { position: absolute; top: 0; height: 10px; background: rgba(0, 150, 255, 0.5); } .infos, .inputs { margin-top: 10px; font-size: 14px; } .inputs input { width: 120px; margin: 0 10px; } .controls { margin-top: 10px; } .timeline-container { position: relative; width: 80%; max-width: 800px; height: 10px; background: #444; margin: 16px auto; border-radius: 5px; cursor: pointer; } .progress { position: absolute; top: 0; left: 0; height: 10px; background: #0f0; width: 0; } .mark-range { position: absolute; top: 0; height: 10px; background: rgba(255, 255, 0, 0.6); } .handle { width: 12px; height: 20px; background: #ff0; position: absolute; top: -5px; cursor: ew-resize; border-radius: 3px; } .time-info { margin-top: 10px; } .containerTrack { position: relative; display: inline-block; } .channels-dropdown { display: none; position: absolute; bottom: 100%; left: 0; background: #fff; border: 1px solid #ccc; border-radius: 4px; /* padding: 5px; */ z-index: 1000; /* min-width: 60px; */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .containerTrack:hover .channels-dropdown { display: block; } .channel-item { padding: 5px 10px; cursor: pointer; white-space: nowrap; } .channel-item:hover { background: #f0f0f0; } .channel-item.current { background: #06b348 !important; color: white; font-weight: bold; } .no-backgroundBtn { background: none; color: white; border: none; } /* .yes-border{ border: 1; } */ /* .inner-table input, .inner-table select, .inner-table textarea { background: var(--d-input) !important; border-radius: 4px; } */ .tdBackground { background-color: var(--BG-650); } .w3-red .tdBackground { background-color: transparent !important; } /* password css */ .password-text { font-weight: 500; font-size: 35px; color: #000; margin-left: 4%; } .no-hover:hover { background: inherit !important; } #downloadSearch input:focus { color: #fff; } #downloadSearch input { color: #fff; border: 1px solid #4d4c4c; } .downloadsearchbox { justify-content: end; position: relative; display: flex; align-items: center; } .addCommentBtn { background: linear-gradient(145deg, #1e2a38, #141d2b); color: #7b8a9e; border: 1px solid rgba(255, 255, 255, 0.08); padding: 0px 10px; font-size: 14px; font-weight: 600; letter-spacing: 1px; border-radius: 12px; cursor: pointer; text-transform: uppercase; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) } .addCommentBtn:hover { background: linear-gradient(145deg, #252f3d, #1a2330); color: #a8b8cc; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .commentFormNxt { border: 2px solid rgb(51 65 85 / .5); border-radius: 8px; box-shadow: 0px 3px 0px 1px #14202f; padding: 8px; background: #182234; } #lifeCycleContainer { border: 2px solid rgb(51 65 85 / .5); border-radius: 8px; padding: 5px; background: #182234; overflow: auto; } /* LTO Volume Table */ .lto-container { background: rgba(30, 41, 59, 0.5); border-radius: 8px; border: 1px solid rgba(71, 85, 105, 0.5); overflow: hidden; } .lto-header { /* padding: 20px; */ border-bottom: 1px solid rgba(71, 85, 105, 0.5); } .lto-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .lto-icon { padding: 8px; background: rgba(59, 130, 246, 0.2); border-radius: 8px; font-size: 20px; } .lto-title { font-size: 18px; font-weight: 600; color: white; margin: 0; } .lto-subtitle { font-size: 12px; color: rgb(148, 163, 184); margin: 0; } .lto-search { width: 100%; padding: 8px 16px 8px 40px; background: rgba(15, 23, 42, 0.5); border: 1px solid rgb(71, 85, 105); border-radius: 8px; color: white; font-size: 14px; } .lto-search:focus { outline: none; border-color: rgb(59, 130, 246); } .lto-table { width: 100%; border-collapse: collapse; } .lto-table thead { background: rgba(15, 23, 42, 0.9); position: sticky; top: 0; } .lto-table th { padding: 12px 20px; text-align: left; font-size: 11px; color: rgb(148, 163, 184); text-transform: uppercase; font-weight: 500; } .lto-table tbody tr { border-bottom: 1px solid rgba(71, 85, 105, 0.3); cursor: pointer; transition: background 0.2s; } .lto-table tbody tr:hover { background: rgba(71, 85, 105, 0.2); } .lto-table td { padding: 14px 20px; color: rgb(226, 232, 240); } .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 12px; } .status-healthy { background: rgb(16, 185, 129); } .status-warning { background: rgb(245, 158, 11); } .volume-name { font-family: 'Courier New', monospace; font-weight: 500; color: white; } .file-count { font-family: 'Courier New', monospace; color: rgb(203, 213, 225); } .segment-badge { padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; display: inline-block; } .segment-none { background: rgba(16, 185, 129, 0.2); color: rgb(52, 211, 153); border: 1px solid rgba(16, 185, 129, 0.3); } .segment-has { background: rgba(245, 158, 11, 0.2); color: rgb(251, 191, 36); border: 1px solid rgba(245, 158, 11, 0.3); } .storage-info { display: flex; justify-content: space-between; margin-bottom: 6px; } .storage-size { font-family: 'Courier New', monospace; font-weight: 500; color: white; } .storage-percent { font-size: 12px; color: rgb(148, 163, 184); } .progress-bar { width: 100%; height: 6px; background: rgba(71, 85, 105, 0.5); border-radius: 999px; overflow: hidden; } .progress-fill { height: 100%; border-radius: 999px; transition: width 0.3s; } .progress-low { background: rgb(16, 185, 129); } .progress-medium { background: rgb(245, 158, 11); } .progress-high { background: rgb(239, 68, 68); } .lto-footer { padding: 12px 20px; background: rgba(15, 23, 42, 0.3); border-top: 1px solid rgba(71, 85, 105, 0.5); display: flex; justify-content: space-between; font-size: 12px; color: rgb(148, 163, 184); } /* Archive Content */ .archive-tabs { background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(71, 85, 105, 0.5); border-radius: 8px; padding: 4px; display: flex; gap: 4px; margin-bottom: 16px; } .archive-tab { flex: 1; padding: 8px; background: transparent; border: none; border-radius: 6px; color: rgb(148, 163, 184); font-size: 13px; cursor: pointer; transition: all 0.2s; } .archive-tab:hover { background: rgba(71, 85, 105, 0.3); color: white; } .archive-tab.active { background: rgb(59, 130, 246); color: white; } .archive-view { display: none; } .archive-view.active { display: block; } .archive-card { border-radius: 8px; padding: 8px; margin-bottom: 12px; border: 1px solid; } .card-blue { background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.1)); border-color: rgba(59, 130, 246, 0.2); } .card-green { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1)); border-color: rgba(16, 185, 129, 0.2); } .card-purple { background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(147, 51, 234, 0.1)); border-color: rgba(168, 85, 247, 0.2); } .card-header { display: flex; justify-content: space-between; margin-bottom: 12px; } .card-label { font-size: 11px; text-transform: uppercase; margin-bottom: 4px; font-weight: 500; } .label-blue { color: rgb(96, 165, 250); } .label-green { color: rgb(52, 211, 153); } .label-purple { color: rgb(192, 132, 252); } .card-value { font-size: 32px; font-weight: 700; color: white; line-height: 1; } .card-size { font-size: 14px; color: rgb(148, 163, 184); margin-top: 4px; } .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 500; display: inline-block; margin-bottom: 6px; border: 1px solid; } .badge-blue { background: rgba(59, 130, 246, 0.2); color: rgb(96, 165, 250); border-color: rgba(59, 130, 246, 0.3); } .badge-green { background: rgba(16, 185, 129, 0.2); color: rgb(52, 211, 153); border-color: rgba(16, 185, 129, 0.3); } .badge-amber { background: rgba(245, 158, 11, 0.2); color: rgb(251, 191, 36); border-color: rgba(245, 158, 11, 0.3); } .badge-purple { background: rgba(168, 85, 247, 0.2); color: rgb(192, 132, 252); border-color: rgba(168, 85, 247, 0.3); } .card-progress { width: 100%; height: 8px; background: rgba(71, 85, 105, 0.5); border-radius: 999px; overflow: hidden; margin-top: 8px; } .card-progress-fill { height: 100%; border-radius: 999px; transition: width 0.5s; } .fill-blue { background: linear-gradient(90deg, rgb(59, 130, 246), rgb(37, 99, 235)); } .fill-green { background: linear-gradient(90deg, rgb(16, 185, 129), rgb(5, 150, 105)); } .fill-purple { background: linear-gradient(90deg, rgb(168, 85, 247), rgb(147, 51, 234)); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } .stats-box { background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(71, 85, 105, 0.5); border-radius: 8px; padding: 16px; margin-top: 16px; } .stats-title { font-size: 11px; color: rgb(148, 163, 184); text-transform: uppercase; margin-bottom: 12px; font-weight: 500; } .stat-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; } .stat-label { color: rgb(148, 163, 184); } .stat-value { font-weight: 500; color: white; } .stat-divider { border-top: 1px solid rgba(71, 85, 105, 0.5); margin-top: 8px; padding-top: 8px; } /* Donut Chart */ .donut-wrapper { text-align: center; padding: 20px; } .donut-svg { position: relative; display: inline-block; } .donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .donut-percent { font-size: 32px; font-weight: 700; color: white; } .donut-label { font-size: 12px; color: rgb(148, 163, 184); } .donut-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; } .legend-item { background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(71, 85, 105, 0.5); border-radius: 8px; padding: 12px; } /* status tabs */ .status-tabs { display: flex; align-items: center; gap: 25px; cursor: pointer; font-size: 16px; } .status-tab.active { color: #72e2ff; }