/*! Note: 
    1. Before adding color codes, please check whether the color code is already present or not.
    2. Add the color codes in their series and arrange it alphabetically
    3. Follow the below naming conventions to add color code

          Color code        Color Variable
        ----------------------------------------
			#AAAAAA		- 	$color_AA
            #ABABAB     -   $color_AB
            #ABCABC     -   $color_ABC
            #ABCDEF     -   $color_ABCDEF
**/
.search-wrapper {
  padding: 16px 16px 35px;
}

.search {
  display: inline-flex;
  float: left;
  width: 92%;
}
.search .e-float-input {
  margin-top: 0;
}

.search-btn {
  cursor: pointer;
  float: right;
  padding: 5px;
  z-index: 1;
}

.search-txt {
  border-color: #1D275F !important;
  border-width: 0 !important;
  font-size: 14px !important;
  width: 110%;
}

.e-grid .e-gridcontent tr:first-child td {
  border-top: 1px solid #E3E3E6;
}

.title-row-text {
  color: #1F1F1F;
  float: left;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  padding-bottom: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 60%;
}

@media (min-width: 1367px) {
  .title-row-text,
  #increased-width-Id {
    font-size: 15px !important;
  }
  .descrip-row,
  .story-point-txt {
    font-size: 14px !important;
  }
  .estimated-icon .material-icons,
  .pending-icon .material-icons {
    font-size: 23px !important;
  }
  .delete-icon .material-icons {
    font-size: 21px !important;
  }
}
.descrip-row {
  color: #717171;
  float: left;
  font-size: 12px;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 90%;
}

.grid-row.active {
  background-color: #E1ECFF;
}

.grid-row td {
  border-bottom: 1px solid #E3E3E6;
  padding: 14px 16px 13px 16px;
  width: 100%;
}
.grid-row :hover {
  background-color: #E8EEF8;
}

#storyListGrid_content_table .e-emptyrow td {
  padding: 14px 15px 13px 21px;
}

.no-icon {
  padding-left: 15px;
}

.delete-icon {
  color: #878787;
  float: right;
  margin-left: 10px;
}

.delete-icon .material-icons {
  font-size: 19px;
  margin-top: -5px;
}

.delete-icon:hover {
  cursor: pointer !important;
}

.pending-icon {
  color: #FFBE4F;
  float: right;
  margin-left: 10px;
}

.pending-icon .material-icons {
  font-size: 21px;
  margin-top: -6px;
}

.story-point-txt {
  float: right;
  font-weight: 500;
  margin-left: 3px;
  margin-top: -3px;
}

.estimated-icon {
  color: #4CAF50;
  float: right;
}

.estimated-icon .material-icons {
  font-size: 21px;
  margin-top: -6px;
}

.increased-width {
  width: 110% !important;
}

.story-filter {
  left: 6px;
}

.story-filter-ul {
  left: -110px !important;
  min-width: 115px !important;
  top: 35px !important;
}

.story-filter-ul > li > a {
  padding: 8px 24px !important;
}

.e-search-icon::before {
  content: "\e993";
}

.filter-wrapper {
  padding: 5px 0 5px 16px;
}

.filter-text-outer {
  background-color: #cbcbcb;
  border-radius: 16px;
  float: left;
  height: 17px;
  line-height: 22px;
  padding: 0 4px 0 12px;
}

.filter-text {
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px;
  position: relative;
  top: -5px;
}

.filter-close {
  font-family: e-icons;
  margin-left: 2px;
  position: relative;
  text-align: center;
  top: -4px;
}
.filter-close .close-icon {
  font-size: 11px;
}
.filter-close .close-icon:hover {
  background-color: #8f8f8f;
  border-radius: 8px;
  cursor: pointer;
}