<div key={rule.id} className="rule-top">
        <div className='semi-bold'><span>{rule.position}</span><span>.</span><span>{rule.name}</span></div>
        <div style={{ display: 'flex', alignItems: 'baseline', flexDirection: 'row' }}>
            <p style={{fontSize: '0.8rem', color: '#757575'}}>{ListConditions(rule)}</p>
            <div style={{ verticalAlign: 'middle', marginLeft: '30px' }}> {rule.active ? <FwToggle size="medium" checked></FwToggle> : <FwToggle size="medium"></FwToggle>}
            </div>
            <button onClick={() => handleEditPage(rule)}>Edit</button>
            <div style={{ verticalAlign: 'middle', margin: '0 0 0 10px' }}>  <FwButton style={{ marginTop: '20px' }} size="icon" color="secondary" onFwClick={() => showMenuList(ind)}><FwIcon name="more-vertical" size={18} color="black" ></FwIcon></FwButton>
            </div>
            {menuList ? <MenuList Index={ind}></MenuList> : null}
        </div>
        <div className="timeShow" style={{ display: 'flex', alignItems: 'baseline', fontSize: '12px' }}>
            <div className='date-show'><span className='color-change'>Last Modified:</span>
                <span className='semi-bold'>{moment(rule.updated_at).fromNow()}</span></div>
            <div className='date-show' style={{ textAlign: 'center' }}><span className='color-change'>By :</span><span className='semi-bold'>{agentsList.map(e => {
                if (e.value === rule.last_updated_by)
                    return e.text
            })}</span></div>
            <div className='date-show' style={{ width: '32%', padding: '0 20px 0 0', textAlign: 'center' }}><span className='color-change'>Impacted tickets (Last 7 days):</span><span className='semi-bold'>{(rule.affected_tickets_count === 0) ? '--' : rule.affected_tickets_count}</span></div>
        </div>
    </div>


body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

.rule-top {
  height: auto;
  padding: 18px 20px 18px 48px;
  position: relative;
  border-bottom: 1px solid #ebeff3;
  /* flex-direction: row; */
  margin-left: 46px;
  width: 700px;
}

.reorder-border {
  cursor: pointer;
  pointer-events: all;
  border-radius: 4px;
  /* border: 2px solid #f5f1f1; */
  background-color: #fff;
  margin-bottom: 10px;
  /* transition: transform .4sease-in-out; */
}


.fw-flex {
  display: flex;
}

.fw-flex-column {
  flex-direction: column;
}

.fw-flex-row {
  flex-direction: row;
}

.fw-flex-grow {
  flex-grow: 1;
}



.flex-container-border {
  border: 1px solid #cfd7df;
  /* padding: 10px 0px; */
  /* width: 600px; */
}

.flex-item-border {
  /* width: 600px; */
  margin: 0px 10px;
  /* row-gap: 10px;
	column-gap: 10px; */
}

/* Rule Creation Page styles */

.addIcon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 15px;
  margin: 0 4px 0 0;
  border-radius: 50%;
  display: inline-block;
  color: #fff;
  background-color: #2c5cc5;
  border: 1px solid #2c5cc5;
  /* // marginRight: '10px',
  // textAlign: 'center' */
}

.circleEvent {
  background-color: #ebeff3;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  text-align: center
}

.addNewFilter {
  position: relative;
  /* top: '25px', */
  background-color: white;
  left: 50%;
  border: 1px solid #dadfe3;
  border-radius: 16px;
  padding: 8px 12px 8px 12px;
  transform: translateX(-50%);
}

.filterBorder {
  position: absolute;
  top: 0;
  left: 50%;
  content: " ";
  display: block;
  height: 25px;
  z-index: 1;
  border-left: 1px dashed #acb6be;
  transform: translateX(-50%)
}

.dropdownBackground {
  display: flex;
  flex-wrap: wrap;
  background-color: #f5f7f9;
  /* width: 100%;
  max-width: 100%; */
  padding: 16px 66px 16px 24px;
  position: relative;
  animation: transitionSlideDown .3s linear;
  border-radius: 4px 4px 0 0;
}

/* 48px */
.timeShow {
  padding: 9px;
  border-radius: 0 0 4px 4px;
  background-color: #f5f7f9;
}

.date-show {
  width: 32%;
  padding: 0 20px 0 0;
  text-align: left;
  border-right: 1px solid #cfd7df;
}

.color-change {
  color: #6f7c87;
}

.semi-bold {
  font-weight: 500;
}

span.slider.medium .toggle-switch input:checked+.slider {
  background-color: green !important;
}

.fw-btn--secondary {
  border-color: white;
}

.rule-top {
  margin: 0 0 20px;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 0 1px 0 #acb6be, 0 2px 6px 0 rgba(22, 29, 37, .05);
}

/* popup show */
.list-icon {
  width: 5px;
  height: 5px;
  /* display: inline-block; */
  border-radius: 50%;
  border: 3px solid #2c5cc5;
  /* margin-left: 50px; */
  /* top: 10px; */
  margin-left: 50px;
  position: relative;
}

/* .addSpace {
  display: flex;
  gap: 5px;
} */
.SummaryKey {
  font-weight: 600;
}

.SummaryValue {
  color: #007958;
}

.dropdown-menu {
  min-width: 140px;
  padding: 8px;
  top: 5px;
  left: unset;
  right: 125px;
}

.note-wrapper {
  display: flex;
  width: 500px;
  margin-top: 15px;
  border: 1px solid #ebeff3;
  padding: 10px 15px;
  position: relative;
}

.note-icon {
  width: 14px;
  height: 15px;
  /* display: inline-block; */
  background: #ff9d00;
  text-align: center;
  border-radius: 2px;
  margin-top: 1px;
}

.summary_text {
  margin-top: 30px;
  padding: 0 30px 20px;
  border: 1px solid #dadfe3;
  border-radius: 4px;
  position: relative;
}

.filterCondition {
    position: absolute;
    padding: 2px 0;
    top: -15px;
    width: 52px;
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
    border: 1px solid #dadfe3;
    border-radius: 16px;
    background-color: #fff;
    z-index: 9;
}

.deleteNewCondition {
  position: absolute;
  /* top: 27px; */
  right: 17px;
  width: 25px;
  height: 25px;
  text-align: center;
  transition: all .3s;
  /* opacity: 0; */
  border-radius: 50%;
}
.deleteNewCondition:hover {
  cursor: pointer;
  background-color: red;
  color: white
}

.components_switcher {
  width: 120px;
  height: 37px;
  position: relative;
  background-color: white;
  left: 42%;
  border-radius: 24px;
  border: 1px solid #dadfe3;
  transition: all .5s;
}
.toggle {
  top: 2px;
  width: 62px;
  height: 15px;
  padding: 7px 4px;
  line-height: 15px;
  position: absolute;
  border-radius: 24px;
  border: 1px solid #2c5cc5;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15);
  transition: all .5s;
  background-image: linear-gradient(-180deg, #fff 3%, #f5f7f9 96%);
}

.andOrSwitcher{
  width: 15%;
  height: 100%;
  padding-top: 9px;
  font-weight: 400;
  border-radius: 15px;
  transition: all .5s;
  cursor: pointer;

}

.switch-btn {
  padding: 10px 30px;
  border-radius: 50px;  /* This makes the button oval */
  border: 2px solid #007BFF;  /* Blue border */
  background-color: #fff;  /* White background */
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;  /* Smooth transition */
  font-weight: bold;
}

.switch-btn.and {
  color: #28a745;  /* Green for AND */
}

.switch-btn.or {
  color: #dc3545;  /* Red for OR */
}

.switch-btn:hover {
  background-color: #f0f0f0;  /* Light gray background on hover */
}

.switch-btn:focus {
  outline: none;  /* Remove outline on focus */
}

what csss in the html apply as inline with existing css and add this to inline