input[type="date"] {
  color: transparent;
  width: 100%;
}

input[type="date"]:focus,
input[type="date"]:valid {
  color: black;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  appearance: textfield;
}

input[type="date"] {
  appearance: none;
}


.inp-BB,
.inp-AA {
  width: 100%;
}

.in-icon {
  background-color: white;
  z-index: 2;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70%;
}

.in-icon img {
  width: 13px !important;
  margin-left: auto;
}

.form-check {
  margin-top: 10px;
  padding-top: 15px;
  padding-bottom: 10px;
  border-top: solid 1px rgb(155 155 155 / 40%)
}

:root {
  --red400: #A82525;
  --orgColr: #ff5722;
  --whiteclr: #fff;
  --lightgray: #f1f1f1;
  --gray-100: #F5F5F5;
  --black-90: #0A0A0A;
  --bs-gray-200: #e9ecef;
  --gray-200: #F5F5F5;
  --gray-300: #E0E0E0;
  --blackdark: #0A0A0A;
  --black616161: #616161;
  --black424242: #424242;
  --gray757575: #757575;
  --transparent: #ffffff00;
  --bs-accordion-border-color: var(--transparent);
  --bs-accordion-border-width: var(--bs-border-width);

}

body {
  /* box-sizing: unset !important; */
}

.height-screen {
  height: 100vh;
}
/*
.modal {
    z-index: 1055 !important;
}

.modal-backdrop {
    z-index: 1040 !important;
}*/

.frame-bg {
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.frame-center-text {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    z-index: 2;
}

.frame-overlay {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.3); /* white overlay */
    z-index: 1;
    width: 100%;
    height: 100%;
}

.img-selected {
    border: 3px solid var(--orgColr);
    border-radius: 18px;
    box-shadow: 0 0 20px 4px rgba(255, 87, 34, 0.8);
    transform: scale(1.05);
    padding: 5px;
}

.txt-clr{
    color: var(--orgColr);
}

.frame-border {
    border: 1px solid white;
    color: black;
}

.frame-selected {
    border: 3px solid darkblue;
    box-shadow: 0 0 20px 4px darkblue;
}

@media only screen and (max-height: 600px) {
    .height-screen {
    min-height: 100vh;
    height: auto;
  }
  
}

.login-image {
  object-fit: cover;
}

ul.flexcombo2 li:last-child {
  margin-right: 0px !important;
}

.accordion-item {
  /* --bs-accordion-border-color: var(--bs-border-color); */
  border-radius: 20px !important;
}

.accordion {
  --bs-accordion-border-color: var(--transparent) !important;
}

.accordion-button:not(.collapsed) {
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  background-color: var(--bs-gray-100) !important;
  border: 0px !important;

}

.accordion-button:not(.collapsed) .accordion-item {
  --bs-accordion-border-color: var(--bs-border-color) !important;
}

.activebTn {
  background-color: rgb(255 255 255 / 14%) !important;
}

.h1024px {
  height: 100%;
  display: flex;
  align-items: center;
}

.hlogin {
  width: 1240px;
  height: 100%;
}

.p10 {
  padding: 10px !important;
}

.py6 {
  padding-top: 6px;
  padding-bottom: 6px;
}

.linebar1 {
  width: auto;
  height: 1px;
  background-color: var(--gray-100);
}

.mb15 {
  margin-bottom: 15px !important;
}

body {
    font-family: biennaleRegi !important;
    /* font-family: "Poppins", sans-serif !important; */
    /* font-weight: 400; */
    font-style: normal;
    font-weight: 500;
    background-color: var(--gray-200);
}

.fntbiennaleSB {
  font-family: biennaleSB;
}

.blackdark {
  color: var(--blackdark) !important;
}

@font-face {
  font-family: BiennaleMedium;
  src: url(../fonts/biennale/BiennaleMedium.otf);
}

@font-face {
  font-family: biennaleSB;
  /* src: url(../fonts/biennale/BiennaleRegular.otf); */
  src: url(../fonts/biennale/BiennaleSemiBold.otf);


}

@font-face {
  font-family: biennaleRegi;
  src: url(../fonts/biennale/BiennaleRegular.otf);
}

.BiennaleMedium {
  font-family: BiennaleMedium !important;
  font-weight: 400;
}

.groot-xy label {
  margin-bottom: 4px !important;
  font-size: 16px;

}

.mb30 {
  margin-bottom: 30px;
}

.mb10 {
  margin-bottom: 10px !important;
}

.clss-p23 {
  position: absolute;
  bottom: 30px;
  padding-left: 30px;
  font-size: 12px;
}

input[placeholder] {
  letter-spacing: -.5px;
  font-size: 14px;
  color: var(--gray757575) !important;
}

.h424242 {
  color: var(--black424242);
}

.h3 {
  color: var(--blackdark);
}

.h616161 {
  color: var(--black616161);
}

.btnShee:hover .lngpos {
  opacity: 1;
  visibility: visible;
}

.endsidebar li {
  margin-top: 30px;
}

.lngpos img {
  width: auto;
}

.lngpos button:hover {
  background-color: var(--gray-100);
  ;
}

.lngpos button {
  border: none;
  background-color: white;
  display: flex;
  z-index: 1;
  padding: 10px;
  position: relative;
}

.lngpos img {
  width: 33px !important;
}

.lngpos button.active-language::after {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"> <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/> </svg>');
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-40%);
  width: 20px;
}

.lngpos button:first-child {
  border-bottom: solid 1px rgb(155 155 155 / 50%);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.lngpos button:last-child {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}


.lngpos {
  bottom: -31px;
  left: 47px;
  flex-direction: column;
  z-index: 3;
  width: 79px;
  background-color: white;
  opacity: 0;
  visibility: hidden;
  transition: all .7s;
  display: flex;
  box-shadow: 1px 6px 12px rgb(155 155 155 / 50%);
  border-radius: 7px;
  overflow: hidden;
}

.font14 {
  font-size: 14px;
}

.ltrspc {
  letter-spacing: -.5px;
}

.b600 {
  font-weight: 600;
}

.plftsid30px {
  padding-left: 30px;
  padding-top: 30px;
}

.bdRadiou {
  border-radius: 20px;
}

.bdRadiou-rts img {
  border-bottom-right-radius: 18px;
  border-top-right-radius: 18px;
}

.hachi img {
  height: 100%;
  width: 100%;
}

.flexRow {
  flex-direction: row;
  display: flex;
}

.h100 {
  height: 100%;
}

.w250 {
  width: 250px;
}

.groot-xy {
  flex-direction: column;
  display: flex;
  justify-content: center;
}

.login-section {
    display: flex;
    flex-direction: column;
}

.meDiaScrns {
  margin-bottom: 10px;
}

.rtside button {
  border: unset;
}

.actionArea label {
  font-size: 14px;
}

.mediA label {
  padding-left: 8px;
}

.upcoming .mediA {
  font-size: 14px;
}

/* .inp-AA{
  margin-right:10PX;
} */
.mediA {
  gap: 10px;
}

.mediaSide {
  margin-right: 20px;
}

.actionArea {
  padding: 20px;
}

.in-icon {
  position: absolute;
  right: 12px;
  top: 6px;
}

.blk1-a {
  border-top-left-radius: 18px;
}

.blk1-b {
  border-top-right-radius: 18px;
}

.blk1-e {
  border-bottom-left-radius: 18px;
}

.blk1-f {
  border-bottom-right-radius: 18px;
}

.aa {
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  border-top-left-radius: 30px;
  border-top-left-radius: 30px;
}

.blockScreentype {
  border: 10px solid #FF5722;
}

.blk1-c,
.blk1-b,
.blk1-g,
.blk1-f,
.blk1-d,
.blk1-a,
.blk1-f,
.blk1-e {
  background-color: var(--orgColr);
}

.screenstand {
  flex: auto;
}

.Inactive .mediA {
  flex-direction: row;
  display: flex;
}

.Inactive {
  width: 53%;
  transition: all .25s;
}

.upcoming .mediA {
  flex-direction: row;
  display: flex;
}

.upcoming {
  width: 63%;
  transition: all .25s;
}

.collapsD {}

.collapsE {
  width: 24%;

}

.collapsE .mediA {
  flex-direction: column;
}

.fscreeN {
  width: 100%;
  display: flex;
}

.imgF img {
  width: 100%;
}

.blockScreentype>div {
  height: 74px;
  flex: auto;
  /* aspect-ratio: 4/1; */
}

.blockScreentype {
  overflow: hidden;
}

.ratio-4-1 {
  height: initial !important;
  aspect-ratio: 4/1;
}

.toparealist {
  padding: 20px;
}

.lftside>ul {
  align-items: center;
}

.btn-blk90-bg {
  background-color: var(--black-90);
  color: var(--whiteclr);
}

.btn-org-bg {
  background-color: var(--orgColr);
  color: var(--whiteclr);
}

.active-screen-button {
  background-color: var(--orgColr) !important;
  color: var(--whiteclr) !important;
}

.rtside img {
  width: auto;
  height: 100%;
}

.screensarea {
  background-color: var(--whiteclr);
}

.titlebar2 {
  display: flex;
  align-items: center;
  background: white;
  padding: 20px;
  height: 76px;
  justify-content: space-between;
}

.rad30 {
  border-radius: 30px;
}

.mtrad {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.mbrad {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.slexYx li:hover {
  background-color: #E0E0E0;
}

ul.slexYx li {
  padding: 7px 10px;
}

.itemfoldcov :hover .selectbtnitme {
  opacity: 1;
  visibility: visible;
}

.selectbtnitme a {
  color: var(--black-90);
}

.mb14 {
  margin-bottom: 14px !important;
}

.selectbtnitme {
  display: none;
  width: 109px;
  top: 17px;
  left: 18px;
  padding: 7px;
  position: absolute;
  visibility: hidden;
  transition: all .7s;
  z-index: 3;
  display: flex !important;
}

.slexYx {
  background-color: var(--whiteclr);
  width: 100%;
  font-size: 12px;
  color: black;
  padding: 4px 0px !important;
  border-radius: 6px;
}

.me14 {
  margin-right: 14px;
}

.mb14 {
  margin-bottom: 14px;
}

.itemText {
    width: 100%;
    position: absolute;
    bottom: 10px;
    font-size: 12px;
    color: white;
    text-align: left;
    display: flex;
    flex-direction: column;
    padding-left: 16px;
    background-color: rgba(0, 0, 0, 0.5);
}

.itemText small {
  font-size: 10px;
}

.iticonS {
    position: absolute;
    right: 16px;
    top: 11px;
    padding: 4px;
    background-color: rgba(0, 0, 0, 0.5);
}

.iticonS>img {
  width: 4px !important;
}

.itemfolder {
  width: 150px;
  height: 150px;
  border-radius: 25px;
  /*background-image: url("../images/bgimagelogo.png");11*/
  background-repeat: no-repeat;
  background-origin: content-box;
  background-size: cover;
  position: relative;
  border-radius: 18px;
  border: 1px solid black;
}

.itemfoldcov {
  width: 100%;
  height: 100%;
  position: absolute;
}

.bg-white {
  background-color: var(--whiteclr);
}

.listtextS {
  font-size: 20px;
  font-weight: 600;
}

.sbarea>ul>li {
  margin-bottom: 20px;
}

.plis-prim {
  background-color: #E7FAF5 !important;
  border: 1px solid #B5D0C9 !important;
  color: #21725E !important;
  font-size: 12px !important;
}

.plis-dang {
  background-color: #FFE8E8 !important;
  border: 1px solid #E2B6B6 !important;
  color: var(--red400) !important;
  font-size: 12px !important;
}

.plis-scond {
  background-color: #F5F5F5 !important;
  border: 1px solid #C2C2C2 !important;
  color: #424242 !important;
  font-size: 12px !important;
}

.toparealist {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.iconbg2 {
  background-color: var(--gray-200) !important;
}

.listitem {
  background-color: var(--whiteclr);
  border-radius: 30px !important;
  height: 76px;

}

.listitem ul {
  align-items: center;
}

.lftside ul li {
  margin-right: 10px;
}

.iconS-2 {
  width: 12px !important;
}

.sidebaR {
  margin-right: 20px;
  /*height: 90vh;*/ /* Comment this as was not display correct in responsive */
  top: 4vh;
}

.tabarea {
  width: 100%;
}

li input.sort {
  width: 30px;
  padding: 5px;
  text-align: center;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #dedddd;
}

.chevron-up-down {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.lucide-chevron-up-icon,
.lucide-chevron-down-icon,
.iconsS {
  color: rgba(117, 117, 117, 1);
}

.accordion-button::after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-icon lucide-plus"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') !important;
}

.accordion-button:not(.collapsed)::after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus-icon lucide-minus"><path d="M5 12h14"/></svg>') !important;
}

.btnclrs {
  color: #0A0A0A;
}

.posit2 {
  position: absolute;
  right: 12px;
  top: 6px;
}

.iconsize16x {
  width: 16px;
}

.sbcont img {
  width: 100%;
}

.exiarea {
  height: 90vh;
  top: 4vh;
  z-index: -1;
}

.sbcont {
  padding: 30px 20px;
  position: relative;
  z-index: 0;
}

.flexcombo2 {
  display: flex;
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-14 {
  gap: 14px;
}

.tabbtns {
  width: 250px;
  padding: 19px 20px;
  margin-right: 20px;
  background-color: var(--whiteclr);
}

.bggray {
  background-color: var(--gray-200);
}

.iconsbar ul li {
  margin-bottom: 20px;
}

.iconcover img {
  width: 100%;
}

.logosbar img {
  width: 100%;
}

.logosbar {
  width: 34px;
  margin-bottom: 30px;
}

.endsidebar {
  height: 100%;
  display: flex;
  align-items: end;
}

.endsidebar img {
  width: 100%;
}

.userbg {
  border-radius: 50px;
  background-color: var(--orgColr) !important;
}

.bTn-sc-bg {
  background-color: var(--bs-gray-100);
  border: 1px solid #E0E0E0;
}

.iconcover:hover {
  background-color: rgb(255 255 255 / 14%);

}

.iconcover {
  background-color: transparent;
  padding: 7px;
  display: flex;
  border-radius: 8px;
}

.iconsS {
  width: 24px;
  height: 24px;
}

.side-flx {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.side-barF {
  width: 78px;
  height: 100%;
  background-color: var(--black-90);
  border-radius: 30px;
  padding: 20px;
  padding: 20px;
}

.accordion-item {
  border: var(--bs-accordion-border-width) solid var(--gray-300) !important;
  border-radius: 20px !important;
}

.accordion-item:has(.show) {
  border-radius: 15px !important;
}

.accordion-item button {
  border-radius: 50px !important;
  background-color: var(--gray-200);
  padding: 10px 16px;
}

.accordion {}

.accordion-button {
  /* border-radius: 50px; */
  /* background-color: var(--gray-200); */
}

.accordion-button:not(.collapsed) {

  background-color: var(--gray-200);

}

.bTn:hover {
  color: var(--whiteclr);
  background-color: var(--orgColr);

  border-color: var(--orgColr);
}

.bTn-radius {
  border-radius: 50px !important;
}

.bd-radius {
  border-radius: 50px !important;
}

.primeclr {
  background-color: var(--orgColr) !important;
  color: var(--whiteclr) !important;
}

ul {
  list-style: none;
  margin: 0px !important;
  padding: 0px !important;
}

a {
  text-decoration: none !important;

}

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.colaps {
  display: flex;
  flex-direction: row;
}

.li-fs{
    font-size: 13px !important;
}

.btn-b-none{
    border: none;
}

body.modal-open > *:not(.modal):not(.modal-backdrop):not(.jq-toast-wrap) {
    position: relative;
    z-index: 1;
}

.modal-backdrop {
    z-index: 1040 !important;
}

.modal {
    z-index: 1055 !important;
}

.iframe-wrapper {
    position: relative;
}

.iframe-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
}

@media only screen and (max-width: 900px) {
  .colaps {
    flex-direction: column;
    background: blue;
  }
}

@media only screen and (max-width: 991px) {
  .hachi {
    background-color: lightblue;
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .hachi {
    background-color: lightblue;
    display: none;
  }

}

@media only screen and (max-width: 1070px) {
  .upcoming .mediA, .Inactive .mediA{
    flex-direction: column;

  }
  .screen-button-text {
    display: none;
  }
}

.dataTable {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.accordion-item:has(.show) {
    border-color: #007bff; /* blue highlight */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

.playlist-item {
    border: 1px solid lightgrey;
    border-radius: 10px;
    background: #fff;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(255, 87, 34, 0.08);
    transition: all 0.25s ease-in-out;
}

#screenAndFramesContainer {
    width: 100%;
    padding: 20px;
    height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.ta-bd-radius {
    border-radius: 30px !important;
}

.accordion-item.selected button {
    background-color: var(--orgColr);
    color: white;
}
.fadeWidth {
    transition: width 0.2s ease-in-out;
}

.modal-backdrop {
    z-index: -1 ;
}

.no-right-radius {
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
}

.no-left-radius {
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
}

.device-offline {
    --bs-text-opacity: 1;
    color: white;
    background-color: red;
    padding: 5px 10px;
    border-radius: 50px;
    display: inline-block;
}

.device-online {
    --bs-text-opacity: 1;
    color: white;
    background-color: green;
    padding: 5px 10px;
    border-radius: 50px;
    display: inline-block;
}

@media (max-width: 630px) {
}    
.option-button {
        display: inline-block;
        overflow: auto;
    }

.playlist-title {
    font-weight: bold;
    font-size: 18px;
}

/*body.modal-open > .jq-toast-wrap {
    position: fixed;
    z-index: 2000;
}*/