:root {
  --font-size: 16px;
  --body-padding: 20px;
  --white-background: #fff;
  --gray-color : #b5b5b5;

  --card-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
  --card-border-radius: 0.9375rem;
  --card-padding: 0.8rem 1.2rem;
  --btn-padding: 0.3rem 1.3rem;

  /* #F6F8FB */
  --btn-grey-color: #e8eef7;
  --btn-radius: 24px;
  --btn-hover-color: #202A44;

  --paracolor: #7E7E7E;

  --gray-lightest: #c5c5c5;

  --dashboard-card-radius: 0.75rem;
  --gray-light: #a7a7a7;
  --gray: #8E8E8E;

  --LightGray: #F6F8FB;

  --Primary: #FFBA4D;
  --prw-color : #007EC7;
  --line-chart-color : #EC334D;
  --tower-color : #EBEDF2;


  --bg-success:#00B868;
}


* {
  font-family: Geologica;
}

.fw-100 {
  font-weight: 400;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.secondary-font-color {
  color: #202A44;
}

.fnt-size-1rem {
  font-size: 1rem;
}


::-webkit-scrollbar {
  height: 4px;
}

/* Target the scrollbar thumb */
::-webkit-scrollbar-thumb {
  background-color: var(--btn-hover-color) ;
  border-radius: 20px; /* Set the border radius of the scrollbar thumb */
}

/* Target the scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Set the color of the scrollbar thumb on hover */
}


.parent {
  padding: 1.25rem;
  height: max-content;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.parent>.dashboard {
  width: 73vh;
  flex: 1;
}

.card-holder{
  padding: var(--card-padding) ;
  box-shadow: var(--card-box-shadow);
  border-radius: var(--dashboard-card-radius);
  background-color:  var(--white-background) ;
}

.card-holder-heading{
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 700;
  color: var(--btn-hover-color) ;
  letter-spacing: -0.02875rem;
}

.box-padding {
  padding: 0.7rem 1.2rem;
}

.small-box-padding {
  padding: 0.4rem 1rem;
}

.color-dark-blue{
  background-color: var(--btn-hover-color) ;
  color: white;
} 

.text-color-dark-blue{
  color: var(--btn-hover-color) !important ;
  cursor: pointer;
}

.medium-font{
  font-size: 1rem;
  font-weight: 500;
}

/* for blacken background on modals */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: 9999;
  overflow: hidden !important ;
}

.box-shadow{
  box-shadow: var(--card-box-shadow);
}

.centre-all{
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.postition-relative{
  position: relative;
}

.overflow-hidden{
  overflow: hidden;
}

.white-color-text{
  color: var(--white-background) !important;
}


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


.backgorund-light-gray{
  background-color: var(--LightGray);
}

.description-border{
  border: 1px dashed #FFBA4D;
}

.over-border-radius{
  border-radius: 1rem  1rem 0 0;
}

.tab-button{
  padding: 0.6rem 2rem  ;
  border-radius: var(--btn-radius);
  box-shadow: var(--card-box-shadow) ;
  text-wrap: nowrap;
  cursor: pointer;
}

.primary-color{
  background-color:  var(--Primary) ;
}

.testing-border{
  border: 1px solid #FFBA4D ;
}

.box-hr{
  width: 95%;
  height: 1px;
  margin: auto;
  opacity: 0.30000001192092896;
  background-color: var(--gray);
}

.round-btn{
  border-radius: var(--btn-radius);
  padding: var(--btn-padding) ;
}

.grey-color {
  color:  var(--gray);
}

.upper-description{
  color: var(--white-background);
  border-radius: 9px 0px 9px 0px;
}

.w-49{
  width: 49%;
}

.w-90{
  width: 90%;
}

.w-80{
  width: 80%;
}

.place-top{
  position: absolute;
  top: -20%;
  right: -20%;
}

.top-side-curved{
  border-radius: 7px 7px 0 0;
}

.br-radius-14{
  border-radius: 14px;
}

.br-radius-7{
  border-radius: 7px;
}

.boder{
  border: 1px solid var(--gray) ;
}

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

.bg-gray-light{
  background-color: var(--gray-light);
}

.smallest-font{
  font-size: 9px;
}

.small-font{
  font-size: 13px;
}

.text-primary-color{
  color: var(--Primary);
}

.snag-tab{
  padding: 0.7rem 2.5rem  ;
  border-radius: var(--btn-radius);
  box-shadow: var(--card-box-shadow) ;
  text-wrap: nowrap;
}
.snag-tab-rectangle-shape{
  padding: 0.7rem 2.5rem  ;
  box-shadow: var(--card-box-shadow) ;
  text-wrap: nowrap;
}


.input-presentation{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 80%;
  width: 60%;
  opacity: 0;
}

.input-presentation > input{
  width: 100%;
  height: 100%;
}

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

.custom-danger{
  background-color: var(--line-chart-color);
}

.low-visibility-no-touch{
  opacity: 0.6;
  pointer-events: none;
  background-color: var(--gray-light);
}

.place-top-left{
  position: absolute;
  top: 0%;
  right: 50%;
  transform: translate(-50%,-50%);
}

.flex-childs > div{
  display: flex;
  gap: 15px;
  align-items: center;
}

.scroll-y{
  overflow-y: scroll;
}

.scroll-x{
  overflow-x: scroll;
}

.btn-grey-bg-color{
  background-color: var(--btn-grey-color);
}

.tabs-border-radius {
    border-radius: 9px 9px 0px 0px;
}
.attachement-dot{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--btn-hover-color);
}

/*  new css */
card-holder-heading-new {
  font-size: 0.91rem;
  font-style: normal;
  font-weight: 700;
  color: var(--btn-hover-color);
  letter-spacing: -0.02875rem;
}

  .small-font-text{
    font-size: 11px;
}