.BSLayout3-Master { display: flex; flex-direction: column; row-gap: 3rem; } .BSLayout3-NavBar { width: 100%; position: fixed; z-index: 3; background-color: #000; height: 40px; } // body{ // background-color: #f3f3f3; // } .BSLayout3 { overflow: hidden; position: relative; top: 2rem; } .BSLayout3Standard { overflow: hidden; position: relative; top: 3.5rem; height: 100%; @media (max-width: 768px) { top: 2rem; } @media (max-width: 500px) { top: 2rem; } } .BSBillingTable-oCbtn { font-size: 14px; cursor: pointer; position: fixed; right: 0; top: 5rem; } .BSCategory3-Contentcont { overflow: hidden; display: flex; flex-direction: column; width: 100vw; // width: 100vw; } .BSCategory3-Cardcont { overflow: auto; display: flex; height: 100%; //nk // height:74vh, // // height: 75vh; // height: clamp(80vh, 71rem, 50vh); } .BsLayout3-ContentDiv { display: flex; overflow: hidden; height: 89vh; //nk // height: 94vh; // justify-content: space-between; } .BSCategory3-tablecont { width: 430px !important; margin: 1rem 0.5rem; height: clamp(68vh, 50rem, 50vh); background-color: #fff; } @media (min-width: 280px) and (max-width: 499px) { .BSLayout3-Master .BSTable3_overall { height: 0vh !important; } // .BSCategory3-Cardcont { // height: 66vh !important; // } //Naresh // .BSCategory3-Cardcont { // height: 48vh !important; // } // .BSLayout3-Master .bs-item-card-masterdiv { height: 68%; } .BSLayout3-Master .BSBTOverall6-defaultscreen { height: 0 !important; } .BSLayout3-Master .BSCategory3-Cardcont { height: 94% !important; } .BSLayout3-Master .BSBTOverall1-div { bottom: 0; } .BsLayout3-ContentDiv { display: flex; overflow: hidden; height: 74vh !important; } .BSLayout3-Master .Table4-Price-summarypop { display: none; } .BSCategory3-tablecont { width: 100% !important; justify-content: flex-end !important; height: 104px; display: flex !important; position: fixed !important; align-items: center !important; bottom: 0; } //nk .BSLayout3-Master .BsTable2-Master { height: 0vh !important; } // } @media (min-width: 500px) and (max-width: 767px) { // .BSCategory3-Cardcont { // height: 60vh !important; // } .BSLayout3-Master .BSTable3_overall { height: 0px !important; } //Naresh // .BSCategory3-Cardcont { // height: 56vh !important; // } // //nk .BSLayout3-Master .BSBTOverall6-defaultscreen { height: 0 !important; } .BSLayout3-Master .bs-item-card-masterdiv { height: 70% !important; } //Naresh .BSLayout3-Master .BSCategory3-Cardcont { height: 80% !important; } .BSLayout3-Master .BSBTOverall1-div { bottom: 0; } // .BSLayout3-Master .BsTable2-Master { height: 0vh !important; } .BSCategory3-tablecont { // width:800px!important; height: 60px; display: flex !important; justify-content: space-between !important; position: fixed !important; align-items: center !important; bottom: 33px; background: rgb(255, 255, 255) !important; } } @media (width: 1280px) and (max-height: 1024px) { .BSCategory3-tablecont { height: clamp(66.5vh, 71rem, 79vh) !important; } } //nk .BSLayout3-Master .BSBTOverall1-Default { // height: 84vh; //vm height: 79vh; } .BSLayout3-Master .BsTable2-Master { // height: 84vh; //vm height: 79vh; } .BSLayout3-Master .BSTable3_overall { // height: 84vh; //vm height: 79vh; } .BSLayout3-Master .BSBilling4TableCont-default { // height: 84vh; //vm height: 79vh; } .BSLayout3-Master .BSBillingTable5-table-master-div { // height: 84vh; //vm height: 79vh; } .BSLayout3-Master .BSBTOverall6-defaultscreen { // height: 84vh; //vm height: 79vh; } .BSLayout3-Master .bs-item-card-masterdiv { height: 100%; } .example1 { height: 20px; background-color: var(--ERROR_COLOR); overflow: hidden; position: relative; } .example1 p { width: 100%; font-weight: 600; font-size: 12px; color: #fff; position: absolute; text-align: center; /* Starting position */ -moz-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); /* Apply animation to this element */ -moz-animation: example1 10s linear infinite; -webkit-animation: example1 10s linear infinite; animation: example1 20s linear infinite; } /* Move it (define the animation) */ @-moz-keyframes example1 { 0% { -moz-transform: translateX(100%); } 40% { -moz-transform: translateX(0%); } 60% { -moz-transform: translateX(0%); } 100% { -moz-transform: translateX(-100%); } } @-webkit-keyframes example1 { 0% { -webkit-transform: translateX(100%); } 40% { -webkit-transform: translateX(0%); } 60% { -webkit-transform: translateX(0%); } 100% { -webkit-transform: translateX(-100%); } } @keyframes example1 { 0% { -moz-transform: translateX(100%); /* Firefox bug fix */ -webkit-transform: translateX(100%); /* Firefox bug fix */ transform: translateX(40%); } 40% { -moz-transform: translateX(0%); /* Firefox bug fix */ -webkit-transform: translateX(0%); /* Firefox bug fix */ transform: translateX(0%); } 60% { -moz-transform: translateX(0%); /* Firefox bug fix */ -webkit-transform: translateX(0%); /* Firefox bug fix */ transform: translateX(0%); } 100% { -moz-transform: translateX(-100%); /* Firefox bug fix */ -webkit-transform: translateX(-100%); /* Firefox bug fix */ transform: translateX(-43%); } } .example2 { height: 20px; overflow: hidden; background-color: var(--ERROR_COLOR); position: relative; } .example2 p { text-align: center; width: 100%; color: #fff; font-weight: 600; position: absolute; font-size: 12px; /* Starting position */ -moz-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); /* Apply animation to this element */ -moz-animation: example2 20s linear infinite 0s; /* Set animation-delay to 0s */ -webkit-animation: example2 20s linear infinite 0s; /* Set animation-delay to 0s */ animation: example2 20s linear infinite 0s; /* Set animation-delay to 0s */ } /* Move it (define the animation) */ @-moz-keyframes example2 { 0% { -moz-transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); } } @-webkit-keyframes example2 { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); } } @keyframes example2 { 0% { -moz-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(40%); } 100% { -moz-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-35%); } } .example3 { height: 20px; overflow: hidden; position: relative; background-color: var(--ERROR_COLOR); } .example3 p { color: #fff; width: 100%; position: absolute; text-align: center; font-size: 12px; font-weight: 600; /* Starting position */ -moz-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); /* Apply animation to this element */ -moz-animation: example3 10s linear infinite; -webkit-animation: example2 10s linear infinite; animation: example3 20s linear infinite, Blink 0.5s 1s infinite; } /* Move it (define the animation) */ @-moz-keyframes example3 { 0% { -moz-transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); } } @-webkit-keyframes example3 { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); } } @keyframes example3 { 0% { -moz-transform: translateX(100%); /* Firefox bug fix */ -webkit-transform: translateX(100%); /* Firefox bug fix */ transform: translateX(40%); } 100% { -moz-transform: translateX(-100%); /* Firefox bug fix */ -webkit-transform: translateX(-100%); /* Firefox bug fix */ transform: translateX(-35%); } } @keyframes Blink { 0%, 50% { opacity: 1; } 25% { opacity: 0; } } .NosDays { width: max-content; padding: 0rem 0.4rem; background-color: #fff; font-size: 12px; // font-weight: 700; border-radius: 3px; color: #000; } .upgrdbtn { font-size: 10px; width: max-content; height: 10px; padding: 0rem 0.4rem; background-color: gold; color: #000; cursor: pointer; } .upgrdbtn:hover { background-color: #fff; } .Expired { font-weight: 600; color: #ffffff; /* Red color, change it according to your design */ } .ExpiredMessage { color: #fff; /* Red color, change it according to your design */ }