.smartTab{
	text-align:center;
	background: #d0cac3;
	padding: 4px 3px 4px 3px;
    box-shadow: inset 0px 7px 5px -7px #FFF, inset 0px -7px 7px -10px #FFF, 0px 0px 19px -10px #000000;
	border-radius: 2px;
	position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;	
}
.smartTab::after{
	content: ' ';
    display: block;
    background: #d0cac3;
    background: linear-gradient(to right, #d0cac3, rgba(43, 43, 43, 0));
    position: absolute;
    z-index: 3;
    top: 4px;
    left: 10px;
    width: 30px;
    height: 27px;	
}

.smartTabTabs{
    padding: 0 10px 0 51px;
    margin: 0 10px;
    width: calc(100% - 20px);
    overflow: auto;
    overflow-y: hidden;
    white-space: nowrap;
	position: relative;
	-webkit-overflow-scrolling: touch;
}
.smartTabTabs::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.smartTabTabs::-webkit-scrollbar-thumb {
    background: transparent;
}

.smartTabTabs::-webkit-scrollbar-track {
    background: transparent;
}


.smartTabTab1{
    display: table-cell;
    padding: 8px 13px;
    border-radius: 10px;
    background: #d0cac3;
    position: relative;
    max-height: 42px;
	cursor:pointer;
	transition: all .1s linear;
	vertical-align: middle;
	
}
.smartTabContents .tabTools{
    position: absolute;
    left: 4px;
    top: 10px;
    z-index: 2;
}

.stSmall .smartTabTab1{
	padding: 6px 14px;
	height: 32px;
}
.smartTabImg{
	border-radius:4px!important;
}
.smartTabTaTitleText {
    display: inline-block;
    /* float: right; */
	line-height: 18px;
	min-width: 45px;
}
.smartTabTab1:hover .smartTabTab1Title, .smartTab:hover .smartTabTab1Active .smartTabTab1Title{
	    background: #a5d6da;
}
.smartTabTab1::before{
    content: '';
    box-shadow: 0.6px 0.6px 0px 0px #ddeff196;
    width: 0.5px;
    position: absolute;
    height: 64%;
    left: 0px;
    bottom: 7px;
    background: #494f521a;
}
.smartTabTab1Active{
    background: #e2dcd2;
    border-radius: 7px 7px 0px 0px;
	color:#000;
    box-shadow: 8px 7px 6px -5px #000000a8, inset 2px 14px 19px -8px #ffffff26;	
}
.smartTabTab1Active:hover .smartTabTab1Title{
	    background: transparent;
		  
}
.smartTabTab1Active::before{
    content: '';
    box-shadow: 8px 8px 0px 1px #e2dcd2;
    width: 20px;
    position: absolute;
    height: 23px;
    display: block;
    z-index: 0;
    border-radius: 20px;
    left: -19px;
    bottom: 0px;
    background: transparent;
	transition: all .1s linear;
}
.smartTabTab1Active::after{
	content: '';
    box-shadow: -8px 8px 0px 1px #e2dcd2;
    width: 20px;
    position: absolute;
    height: 23px;
    display: block;
    z-index: 0;
    border-radius: 20px;
    right: -20px;
    bottom: 0px;
    background: transparent;
	transition: all .1s linear;
}
.smartTabTab1Title{
	position: relative;
    z-index: 3;
    padding: 4px 6px;
    margin: -5px -10px;
    border-radius: 10px;
	transition: all .4s linear;
	font-size: 11px;
	line-height: 0;
	overflow: hidden;
	min-height: 31px;
	display: flex;
    align-items: center;
    align-content: center;
	flex-wrap: nowrap;
}
.smartTabTab1Title .starVerfied {
	display: block;
    position: absolute;
    top: 3px;
    right: 8px;	
}
.smartTabTab1:hover .smartTabTab1TitleClose{
	background: #00619b;
	color: #f2fcff;
}
.smartTabTab1TitleClose,.smartTabTab1TitleClose:focus{
    border: 0;
    outline: 0;
    background: #2b2b2b;
    color: #939393;	
    font-size: 9px;
    height: 16px;
    width: 16px;
    border-radius: 8px;
    text-align: center;
    padding: 0px;
    margin: 0 5px 0 -1px;
    float: left;
    line-height: 10px;
	position: relative;
}
.smartTabTab1Active .smartTabTab1TitleClose{

    background: #494949;
    color: #c7c7c7;
	
}
.smartTabTab1TitleClose:hover{
    background: #007eca;
    color: #FFF;	
}
.stSmall .smartTabTab1Title{
	padding: 1px 5px;
	border-radius: 6px;
	
}
.smartTabTab1TitleBig{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden!important;
    max-width: 150px;
    display: block;
	
}
.smartTabTab1Active .smartTabTab1TitleBig{
	
	text-shadow: 1px 1px #dbe9ff;
}
.smartTabTab1Active .smartTabTab1TitleBig .badge {
	text-shadow: none;
}

.smartTabBrowser .smartTabTab1TitleBig{
	    padding: 0 0 0 20px;
	
}

.smartTabTab1TitleBig big{
	line-height: 25px;
}
.smartTabTab1Title img{
	border-radius: 50%;
    width: 28px;
    height: 28px;
    margin: -1px -4px -2px 4px;
	align-self: flex-end;
}
.smartTabTab1Title small{
	display:block;
	font-size:8px;
	color:#565656;
}
.smartTabContents{
	background: #e2dcd2;
	padding: 2px;
	border-radius: 4px;
	position: relative;
	display:none;
}
.smartTabContents .highlight,.highlighter{
	background: #ffffa554;
	color:unset!important;
    text-shadow: unset!important;
	font-weight: bolder;
    font-size: 110.1%;
}
	
.smartTabContent{
	display:none;
	
}
.smartTabContent img{
	max-width:100%;
}





.stSmallList{
	position: relative;
}
.stSmallListFilter{
	
}
.stSmallListItems{
	padding:5px 0 0 0;
    max-height: 62vh;
    overflow: hidden;
    overflow-y: auto;	
}
.stSmallListItems::-webkit-scrollbar-track{
	background: transparent;
	border: 0px none #ffffff!important;
}


.stSmallListItems::-webkit-scrollbar-thumb{
	background: #FFF;
}
.stSmallListItems::-webkit-scrollbar-track{
	background: transparent;
	box-shadow:none;
}

.stSmallListItem{
    display: block;
	position:relative;
    border-radius: 4px;
    margin: 0 0 1px 2px;
    text-align: right;
    padding: 2px 5px 3px 4px;
    font-size: 12px;
    color: #717375;
	max-width: 100%;
	
	
}
.stListFlix{
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    width: 100%;
    flex-wrap: nowrap;
	justify-content: flex-end;
	padding: 10px 0;

}
.stListFlixUser{

    flex-direction: row;

}
.stListHyper,.stListItemUserName b{
	color:#4491ff;
	
}
.stListInfo {
	margin:2px 10px 10px 0;
	display:inline-block;
}
.stListFlix>div{
	width: calc(100% - 42px);
}
.stListItemImg{
	float: left;
    max-height: 60px;
    margin: 2px 5px 0 0;
    border-radius: 5px;
}
.stListItemImgCircle{
	border-radius:50%;
	height:60px;
	width:60px;
	margin: 2px 0px 0 13px;
}
.stSmallListItemImg{
	float: left;
    max-height: 43px;
    margin: 2px 5px 0 0;
    border-radius: 5px;
}
.stSmallListItemImgCover{
	background-size: cover;
    background-position: center;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    margin: -2px -10px 0 0;
}
.stSmallListItemImgIcon img {
    position: absolute;
    top: 0;
    left: -2px;
    height: 19px;
}

.stListItemUserName{
    direction: ltr;
}

.stListItemUserName i.fab,.stListItemUserName img{
   float: left;
    font-size: 20px;
    padding: 4px 6px 0 0;
	max-height: 23px;

}
.stListItemUserName small.fa-at{
    opacity: 0.5;
}
.stListItemUserName img{
	
}
.stSmallListItem img{
	  filter: grayscale(70%);
}
.stSmallListItem:hover, .stSmallListItem.active{
    background: #FFF;	
    color: #000;	
	text-decoration: none;
}

.stSmallListItemGhost{
	opacity:.5;
}
.searchContentDiv .stSmallListItem.active{
    background: #c5e4fc;	
}
.stSmallListItem:hover img, .stSmallListItem.active img{
	  filter: grayscale(0%);

}
.stSmallListItemOneLine{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}
.stSmallListInfo{
    max-width: calc(100% - 50px);
    position: absolute;
	transform: translateY(calc(-50% + 8px));
    left: 0;
}
.stSmallListItems .smallTitle{
    font-size: 7px;
    padding: 0px 6px 1px;
    border-radius: 4px 4px 0 0;
    margin: 0 0 0 3px;
    opacity: 0.5;
}

.stSmallListInfoNL{
	max-width: calc(100% - 10px);
	margin: 2px 0 2px 0;
}
.stSmallListInfoNLCircleRight{
    border-radius: 50%;
    height: 16px;
    width: 16px;
    float: right;
    margin: 0 0 0 6px;
}
.stSmallListInfoNLlast{
    position: absolute;
    left: 0;
}
.stSmallListInfoNLlastSmall{
    position: absolute;
    left: 0;
	top: -4px;
}
.stSmallListInfoNL img{
	max-height: 16px;
}
.stSmallListInfoCol{
	max-width: calc(100% - 10px);
	margin: 2px 0 2px 0;
}
.stSmallListInfoNL, .stSmallListInfo, .stSmallListInfoCol{
    white-space: nowrap;
    display: inline-block;
    text-overflow: ellipsis;
    font-size: 10px;
    opacity: 0.7;
    overflow: hidden;
	line-height: 1.7;
}
small.stSmallListInfoNL{
	    font-size: 8px;
}
.stSmallListFilterInput{
	display: block;
    width: 100%;
    background: #fcfcfc;
    border-radius: 4px;
    text-align: right;
    padding: 4px 7px 3px 0;
    font-size: 9px;
	line-height: 13px;
    color: #a0a3a5;
    outline: 0;
    border: none;
    margin: auto;	
    margin-bottom:10px;	
	border-bottom: 1px solid #d0cac3;
}
.stBigListFilterInput{
	border-radius: 18px;
    font-size: 13px;
    padding: 10px 19px;
}
.smartSearchInput:focus {
    outline: 1.2px solid #a8c7fa;
}
.::selection {
    background-color: #a8c7fa; 
    color: #031430;
	text-shadow:unset!important;
}
.smartSearchInput{
	position: relative;
}
.smartSearchInput::after{
	content: "🔍";
    font-size: 16px;
	-webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
.stSmallListFilterInput[type="number"]::-webkit-inner-spin-button,
.stSmallListFilterInput[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stSmallListFilterInput::-webkit-search-cancel-button {

  transform: translateX(50%)!important;
	color:#FFF!important;

}



/* Mobile Phones */
@media only screen and (max-width: 480px) {
  /* أكواد CSS للشاشات الصغيرة هنا */
  .smartTab .smartTabTabs, .smartTab .stSmallListItem, .smartTab .stSmallListFilterInput {
	  zoom: 0.7;
  }
}

/* Tablets */
@media only screen and (min-width: 481px) and (max-width: 1024px) {
  /* أكواد CSS للأجهزة اللوحية هنا */
    .smartTab .smartTabTabs, .smartTab .stSmallListItem, .smartTab .stSmallListFilterInput {
	   zoom: 1; 
  }
}

/* Desktops/Laptops */
@media only screen and (min-width: 1025px) {
  /* أكواد CSS للحواسيب واللابتوبات هنا */
    .smartTab .smartTabTabs, .smartTab .stSmallListItem, .smartTab .stSmallListFilterInput  {
	   zoom: 1.3; 
  }
}