@import url('https://fonts.googleapis.com/css2?family=Tajawal&display=swap');


body{
background: #f3f5fa;
}
.post-page{
    display: flex;
    flex-wrap: nowrap;
}
.side{
max-width:350px;
}
.side a{
    color: #636363;
    background-color: #f8f9fa!important;
    border: 1px solid #ddd !important;
    display: block;
    font-weight: 700;
    text-decoration: none;
    opacity: .8;
    font-size:11px;
	direction: ltr;
    }
.side a:hover{
    color: #0059ff;
    background-color: #d3e9ff!important;
    border: 1px solid #89b2ff !important;
    opacity: 1;
    }
    
.post{
background-color: #fff!important;
width:100%;
font-family: 'Tajawal', sans-serif;


}
    
.table{
	padding:10px 20px;
    border-collapse: separate;
    text-indent: initial;
    border-spacing: 2px;
}

.table th{
    width: 20%;
    padding: 6px 0;
    color: #a7a7b1;
    font-weight: 400;
    border-bottom: 1px solid #f6f7f9;
    vertical-align: top;
}
.table th.headerT {
    color: #434249;
    font-weight: 600;
    border-bottom: 0;
}
.table td {
    width: 80%;
    color: #434249;
    border-bottom: 1px solid #f6f7f9;
    border-image: linear-gradient(-90deg,#f6f7f9 0,rgba(246,247,249,0) 80%) 0 0 100% 0 stretch;
    vertical-align: top;
    }
    
.dlive{
	display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.dlive div::after{
content:"·";
margin:0 5px;
font-weight: 900;
}
.dlive div:last-child:after{
content:"";
}
.dsize {
    font-size: 20px;
    border-radius: 5px;
    padding: 5px 10px;
    width: fit-content;
    box-shadow: 0px 0px 5px 0px #3eb9ff61, -2px 3px 5px 0px #3eb9ff40;
}

.supports{
    display: flex;
    align-items: center;
}
.supports i{

    opacity: 0.5;
    margin-left: 5px;
}

.supports:hover i{
    opacity: 7;
}
.supports.battery,.supports.weight{
font-weight: 900;
}
.supports.battery::after,.supports.weight::after{
margin:7px 3px 0;
font-weight: 900;
font-size: 11px;
}
.supports.battery i,.supports.weight i{
font-size: 15px;
}  
.supports.weight i,.supports.gb i{
color: #6c6c6c;
}  
.supports.battery::after{
content: "mAh";
} 
.supports.weight::after{
content: "غرام";
font-size: 13px;
} 



.supports.gb{
font-weight: 900;
}
.supports.gb::before{
margin:7px 3px 0;
font-weight: 900;
font-size: 11px;
}

.supports.gb i{
	font-size: 15px;
}
.supports.gb::before{
content: "GB";
font-size: 11px;
}



.supports.pricepost i{
color: #6c6c6c;
font-size: 13px;
}
.supports.pricepost:hover i{
color: #2da800;
}

.item-device-network{
	display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
}
.pie-slice {
border-radius: 50%;
    width: 25px;
    height: 25px;
    line-height: 1.9;
    text-align: center;
    background: #ffffff;
    margin: 2px;
    display: block;
    font-size: 13px;

}


.pie-global {
color: #1b8d00;
    background-image: linear-gradient(205deg,#2da800b5,#00f40887,#2da800e3 70%);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin-left: 6px;
    transition: all .3s ease-out;
   }

.item-device-network:hover .pie-global{
background-position:22px;
color: #000;
}

.dlist {
    font-size:13px;
}
.dlist div{
	display: list-item;
    margin-bottom: 5px;
    margin-right: 15px;
}


.dlist1 {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    font-size:13px;
}
.dlist1 div{
    margin-bottom: 5px;
}
.device-diagonal {
    font-weight: 900;
}
.device-diagonal::after {
    content:"''";
    padding: 0 0 0 5px;
}

.dlist2{
    column-count: 2;
    font-size:14px;
    padding-right: inherit;
    margin-right: 5px;
}
.dlist2 li,.dlist2 div{
margin-bottom: 6px;
}
.dlist2 div{
	font-size: 13px;
	display: list-item;
    margin-bottom: 5px;
}

  .advantages th.headerT{
    color: #11a300;
    font-weight: 900;
  }
  .defects th.headerT{
    color: #e10000;
    font-weight: 900;
  }
.advantages .dlist,.defects .dlist{
font-size: 15px;
}



.rotationicon{
animation: rotation 4s infinite linear;
}
@keyframes rotation {
  100%{ transform:rotatey(360deg); }
}


.brand div {
    width: 76px;
    height: 40px;
    background-size: 100%;
    background-repeat: no-repeat;
	background-position: center;
    transition: all .1s ease-out;
}

.table tbody tr th{
transition: all .1s ease-out;
}


.table tbody tr:hover th{
color: #393939;
}


@media (max-width:991px) {
.side{
max-width:100%;
}
.post-page{
    flex-direction: column;
}

}

@media (max-width:575px) {
.side{
max-width:100%;
}
.side a{
    font-size:13px;
    }
    


}


.device-img{
    display: flex;
    max-width: 564px;
    margin: auto;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
	
}
.device-img .spotlightg{
height: 55px;
width: 60px;
margin: 5px;
border-radius: 10px;
    background-color: rgba(14,53,127,.05);
}


.device-img a{
    background-color: transparent;
	height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
    overflow: hidden;
    cursor: pointer;
}
	
.device-img img{
	width: auto;
	height: auto;
	
}
.device-img img{
background-color: rgba(14,53,127,.05);
    max-width: 60px;
    max-height: 60px;
    /* border: 1px solid #eee; */
    margin: 5px;
    /* padding: 4px; */
    /* border-radius: 10px; */
    border-radius: 3px;
    mix-blend-mode: multiply;
	
	}
	
	.dflex-loding{
	display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80vh;
		
		
	}
	
	.sidebrand{
    position: sticky;
    top: 60px;

	}


/***/
.module {
    padding: 0;
    margin-bottom: 30px;
}
.module, a.module-phones-link {
    position: relative;
}

.module-latest .module-phones-link {
    margin: 5px;
}
.module-phones-link {
    float: right;
    display: block;
    width: 80px;
    min-height: 182px;
    text-align: center;
    font: 700 13px Arimo,Arial,sans-serif;
    color: #333;
    margin: 0 10px;
    border: none;
    position: relative;
}
.module a {
    font: 700 13px/18px Arimo,Arial,sans-serif;
    color: #444;
}
.module a img {
    transition: transform 1s cubic-bezier(0.26,0.695,0.375,0.965);
}
.module-phones-link img {
    filter: brightness(0.953);
}
.module-phones-link img {
    height: 133px;
    position: relative;
    background: #fff;
    z-index: 1;
    opacity: .953;
	
    margin-bottom: 10px;


}

.displaymore{

display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.side .module a {
    border: 0 !important;
    background: none !important;
}
@supports (filter:brightness(0.953))
.module-phones-link img {
    filter: brightness(0.953);
}


	
@media (max-width:576px) {
.table th{
 width: 30%;
}
}