.left {
  float: left;
}
.right {
  float: right;
}
.center {
  text-align: center;
}

.btn_use_template {
  border: none !important;
  background-color: transparent !important;
  color: #1976d2 !important;
  float: left;
  font-weight: bold !important;
}

.btn_use_template:hover {
  background-color: transparent !important;
  color: #1976d2 !important;
  border: none;
}

.btn_send {
  background-color: #1976d2 !important;
  font-size: 14px;
  color: #fff !important;
  font-weight: bold !important;
}

.btn_send:hover {
  background-color: #1976d2 !important;
  color: #fff;
  font-weight: bold;
}

.btn_send:focus {
  border: none !important;
  background-color: #1976d2 !important;
  color: #fff;
  font-weight: bold;
}

.btn_save_draft {
  border: none !important;
  background-color: #dfeffd !important;
  font-size: 14px;
  color: #1976d2 !important;
  font-weight: bold !important;
}

.btn_save_draft:hover {
  background-color: #dfeffd !important;
  color: #1976d2 !important;
  font-weight: bold;
}

.btn_save_draft:focus {
  border: none !important;
  background-color: #dfeffd !important;
  color: #1976d2 !important;
  font-weight: bold;
}

.tblLayoutComponent [role="presentation"] {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.tblLayoutComponent [role="columnheader"] {
  font-size: 14px;
  color: #455a64;
  background-color: #dee4e7;
}

/*Create media query for tblLayoutComponent width for ipad and tablets*/

/* Table Layout Component Media Queries */
.tblLayoutComponent {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* iPad (landscape and portrait) */
@media (min-width: 772px) and (max-width: 1020px) {
  .tblLayoutComponent {
    width: 94vw !important;
    overflow-x: auto;
    margin: auto;
  }

  .heading_text_parent {
    width: 91vw !important;
    margin: auto;
  }
}

/* Tablets (large tablets) */
@media (min-width: 1020px) and (max-width: 1366px) {
  .tblLayoutComponent {
    width: 70vw;
    overflow-x: auto;
     margin: auto;
  }

  .heading_text_parent {
    width: 55vw !important;
    margin: auto;
  }
}

/* Small devices (mobile) */
@media (max-width: 770px) {
  .tblLayoutComponent {
    width: 93vw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin:auto;
  }

  .heading_text_parent {
    width: 93vw !important;
    margin: auto;
  }
}




.tblContainer {
  max-width: 100%;
  overflow-x: auto;
}

@media only screen and (max-width: 480px) {
  .tblContainer {
    max-width: calc(100vw - 20px);
  }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
  .tblContainer {
    max-width: calc(100vw - 30px);
  }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .tblContainer {
    max-width: calc(100vw - 30px);
  }
}

.tblContactLayoutComponent
  [role="row"]:first-child
  [role="presentation"]:first-child
  [role="columnheader"] {
  border-top-left-radius: 8px;
}
.tblContactLayoutComponent
  [role="row"]:first-child
  [role="presentation"]:last-child
  [role="columnheader"] {
  border-top-right-radius: 8px;
}

.tblContactLayoutComponent [role="presentation"] {
  height: 50px;
  border: #455a64;
}

.tblContactLayoutComponent [role="columnheader"] {
  font-size: 14px;
  color: #455a64;
  background-color: #dee4e7;
}

.tblContactLayoutComponent [role="row"]:nth-child(even) {
  background-color: #e6edf1 !important;
  border: #455a64;
}

/* Ensure the text inside even rows is white */
.tblContactLayoutComponent [role="row"]:nth-child(even) [role="presentation"] {
  background-color: #e6edf1;
}

.tblContactLayoutComponent [role="row"] [role="presentation"]:first-child {
  border-right: 1px solid #ccc;
}

#contactDGroups div[role="gridcell"]:has(span[role="button"]) label {
  display: none;
}

.hide-resize-observer {
  display: none !important;
}

/* ComboBox Heigth issue fix for iPhone */
.P1vhCW_tray-dialog,
.cTLQuW_tray-dialog {
  height: fit-content !important;
}

/* React Spectrum Datepicker BG issue fix for Safari*/
.date_bg_fix > div:first-child {
  background-color: transparent;
}

#listActivityStatus [role="option"] {
  height: 30px;
}

#listProjectStatus [role="option"] {
  height: 30px;
}

/*SERVICE ACTIVITY COMPONENT*/
#listActivityCards [aria-selected="true"] {
  width: 98%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 130px !important;
}

#listActivityCards [aria-selected="true"] div {
  border: none !important;
}

#listActivityCards [aria-selected="false"]:hover {
  width: 98%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#listActivityCards [aria-selected="false"]:hover div {
  border: none !important;
}

#listActivityCards [role="option"] {
  height: 95% !important;
  width: 98%;
}

#listActivityCards [role="img"] {
  display: none;
}

#listActivityCardsMobile [aria-selected="true"] {
  width: auto;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 130px;
  margin-left: 5px;
  margin-right: 8px;
}

#listActivityCardsMobile [aria-selected="true"] div {
  border: none !important;
}

#listActivityCardsMobile [aria-selected="false"]:hover {
  width: auto;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#listActivityCardsMobile [aria-selected="false"]:hover div {
  border: none !important;
}

#listActivityCardsMobile [role="option"] {
  height: 95% !important;
}

#listActivityCardsMobile [role="img"] {
  display: none;
}

/*PROJECT ACTIVITY COMPONENT*/
#listProjectCards [aria-selected="true"] {
  width: 98%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 130px;
}

#listProjectCards [aria-selected="true"] div {
  border: none !important;
}

#listProjectCards [aria-selected="false"]:hover {
  width: 98%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#listProjectCards [aria-selected="false"]:hover div {
  border: none !important;
}

#listProjectCards [role="option"] {
  height: 95% !important;
  width: 98%;
}

#listProjectCards [role="img"] {
  display: none;
}

#listProjectCardsMobile [aria-selected="true"] {
  width: auto;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 130px;
}

#listProjectCardsMobile [aria-selected="true"] div {
  border: none !important;
}

#listProjectCardsMobile [aria-selected="false"]:hover {
  width: 98%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#listProjectCardsMobile [aria-selected="false"]:hover div {
  border: none !important;
}

#listProjectCardsMobile [role="option"] {
  height: 95% !important;
}

#listProjectCardsMobile [role="img"] {
  display: none;
}

/*MESSAGE LIST COMPONENT*/
#listMessageCards [aria-selected="true"] {
  border-radius: 8px;
  background-color: #eff7fe !important;
  height: 95% !important;
  width: 98% !important;
}

#listMessageCards [aria-selected="true"] div {
  border: none !important;
}

#listMessageCards [aria-selected="false"]:hover {
  border-radius: 8px;
  background-color: #eff7fe;
  height: 95% !important;
}

#listMessageCards [aria-selected="false"]:hover div {
  border: none !important;
}

#listMessageCards [role="option"] {
  height: 95% !important;
  width: 98%;
}

#listMessageCards [role="img"] {
  display: none;
}

#listMessageCardsMobile [aria-selected="true"] {
  border-radius: 8px;
  background-color: #eff7fe !important;
  height: 95% !important;
  width: 99% !important;
  top: 0 !important;
  margin-top: 0 !important;
}

#listMessageCardsMobile [aria-selected="true"] div {
  border: none !important;
}

#listMessageCardsMobile [aria-selected="false"]:hover {
  border-radius: 8px;
  background-color: #eff7fe;
  height: 95% !important;
}

#listMessageCardsMobile [aria-selected="false"]:hover div {
  border: none !important;
}

#listMessageCardsMobile [role="option"] {
  height: 95% !important;
  width: 99%;
}

#listMessageCardsMobile [role="img"] {
  display: none;
}

/* Custom Scrollbar Styles */
::-webkit-scrollbar {
  width: 5px;
  overflow: auto;
  opacity: 0.1;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  opacity: 0.1;
}

::-webkit-scrollbar-thumb {
  background: #f5f6f9;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #f5f6f9;
}

@media only screen and (max-width: 480px) {
  #listActivityStatus [role="img"] {
    margin-top: -10px;
  }
}

/*Contact COMPONENT*/
#contactCards [aria-selected="true"] {
  width: 99%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #ff9800 !important;
  box-sizing: border-box;
  height: 115px !important;
}

#contactCards [aria-selected="true"] div {
  border: none !important;
}

#contactCards [aria-selected="false"]:hover {
  width: 99%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #ff9800 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#contactCards [aria-selected="false"]:hover div {
  border: none !important;
}

#contactCards [role="option"] {
  height: 95% !important;
  width: 98%;
}

#contactCards [role="img"] {
  display: none;
}

#contactCardsMobile [aria-selected="true"] {
  width: auto;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #ff9800 !important;
  box-sizing: border-box;
  height: 130px;
}

#contactCardsMobile [aria-selected="true"] div {
  border: none !important;
}

#contactCardsMobile [aria-selected="false"]:hover {
  width: auto;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #ff9800 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#contactCardsMobile [aria-selected="false"]:hover div {
  border: none !important;
}

#contactCardsMobile [role="option"] {
  height: 95% !important;
}

#contactCardsMobile [role="img"] {
  display: none;
}

/*REACT SELECT SPERATOR REMOVE*/

.css-1u9des2-indicatorSeparator {
  background-color: transparent !important;
}

#txtSubject {
  height: 25px;
}

/*Product COMPONENT*/
#productCards [aria-selected="true"] {
  width: 99%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 115px !important;
}

#productCards [aria-selected="true"] div {
  border: none !important;
}

#productCards [aria-selected="false"]:hover {
  width: 99%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#productCards [aria-selected="false"]:hover div {
  border: none !important;
}

#productCards [role="option"] {
  height: 95% !important;
  width: 98%;
}

#productCards [role="img"] {
  display: none;
}

#productCardsMobile [aria-selected="true"] {
  width: auto;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 130px;
}

#productCardsMobile [aria-selected="true"] div {
  border: none !important;
}

#productCardsMobile [aria-selected="false"]:hover {
  width: auto;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#productCardsMobile [aria-selected="false"]:hover div {
  border: none !important;
}

#productCardsMobile [role="option"] {
  height: 95% !important;
}

#productCardsMobile [role="img"] {
  display: none;
}
.k-window-content,
.k-prompt-container {
  padding-inline: 5px !important;
}
/*CUSTOM MODAL CSS*/
/*Event Cards*/
#eventCards [aria-selected="true"] {
  width: 99%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 115px !important;
}

#eventCards [aria-selected="true"] div {
  border: none !important;
}

#eventCards [aria-selected="false"]:hover {
  width: 99%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#eventCards [aria-selected="false"]:hover div {
  border: none !important;
}

#eventCards [role="option"] {
  height: 95% !important;
  width: 98%;
}

#eventCards [role="img"] {
  display: none;
}

#eventCardsMobile [aria-selected="true"] {
  width: auto;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 130px;
}

#eventCardsMobile [aria-selected="true"] div {
  border: none !important;
}

#eventCardsMobile [aria-selected="false"]:hover {
  width: auto;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#eventCardsMobile [aria-selected="false"]:hover div {
  border: none !important;
}

#eventCardsMobile [role="option"] {
  height: 95% !important;
}

#eventCardsMobile [role="img"] {
  display: none;
}