.my-exam-list{ width: 100%; /* margin-top: 25px; */ direction: rtl; } .my-exam-list-content{ width: 100%; border: 1px solid #E0E0E0; overflow: hidden; background-color: white; } .melc-header{ width: 100%; height: 65px; display: flex; align-items: center; border-bottom: 5px solid #F6F6F6; position: relative; } .melc-h-tab-name-item{ width: fit-content; padding: 0 10px; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 17px; font-family: IRANSans; color: #B1B1B1; margin-right: 35px; position: relative; cursor: pointer; } .melc-h-tab-name-item-line{ width: 100%; height: 5px; background-color: #df1452; position: absolute; right: 0; border-radius: 10px; bottom: -5px; } .melc-h-move-btns{ position: absolute; left: 27px; height: 100%; display: flex; width: 70px; justify-content: space-between; align-items: center; direction: ltr; font-size: 15px; font-family: IRANSans; color: #df1452; } .melc-h-move-btns *{ font-size: 30px; color: #df1452; cursor: pointer; } .melc-content{ width: 100%; height: 281px; position: relative; padding: 0; } .melc-content-dark-cover{ position: absolute; top: 30px; left: -187px; /* height: 100%; */ width: 14.42vw; aspect-ratio: 0.989/1; border-radius: 0 12px 30px; background-color: rgb(0, 0, 0); opacity: 0.7; } .melc-content-item{ /* width: 100%; */ /* height: 280px; */ margin: 30px 0; /* margin-top: 30px; */ margin-right: 35px; display: flex; position: absolute; top: 0; right: 0; transition: all 0.6s ease; } .melc-content-item-more{ width: 221px; flex-shrink: 0; height: 221px; border-radius: 25px 12px 30px 6px; margin-left: 20px; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 30px; font-family: IRANSans; color: #df1452; border: 2px solid #E0E0E0; cursor: pointer; } .melc-content-item-more:hover{ background-color: #E0E0E0; /* background-color: rgba(46,129,232, 0.1); */ color: white; } .melc-content-i-item{ width: 221px; /* width: 27.34%; */ /* width: 14.42vw !important; aspect-ratio: 0.989/1; */ flex-shrink: 0; height: 221px; position: relative; border-radius: 25px 12px 30px 6px; margin-left: 20px; overflow: hidden; } .melc-c-i-i-bg{ width: 100%; height: 100%; } .melc-c-i-i-exam-sit{ position: absolute; top: 20px; left: 10px; padding: 5px 5px; display: flex; align-items: center; color: #FF0000; background-color: white; border-radius: 5px; } .melc-c-i-i-exam-sit-text{ margin-right: 1px; font-size: 9px; font-weight: 700; font-family: IRANSans; } .melc-c-i-i-cover{ width: 100%; height: 100%; position: absolute; top:0; right: 0; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); } .melc-c-i-i-under-cover{ width: 100%; height: 100%; position: absolute; top:0; right: 0; transform: scaleY(0); transform-origin: bottom; transition: all 0.5s ease; } .melc-c-i-item-info{ position: absolute; bottom: 17px; right: 50%; transform: translateX(50%); width: 90%; /* background-color: aquamarine; */ } .melc-c-i-i-info-title{ display: flex; align-items: center; color: white; font-size: 14px; font-family: IRANSans; } .melc-c-i-i-info-title img{ margin-left: 5px; } .melc-c-i-i-info-date-time{ display: flex; align-items: center; justify-content: space-between; } .melc-ciiidt-date-container{ display: flex; align-items: center; margin-right: 3px; color: white; } .melc-clock-icon{ font-size: 20px; } .melc-ciiidt-date{ color: white; font-size: 10px; font-family: IRANSansXFaNum-Regular; margin-right: 5px; } .melc-ciiidt-time{ color: white; font-size: 10px; font-family: IRANSans; margin-left: 5px; } .melc-c-i-i-info-line{ width: 100%; height: 1px; background-color: white; opacity: 13%; margin-top: 3px; margin-bottom: 3px; } .melc-c-i-i-info-descriptin{ width: 100%; font-size: 11px; font-family: IRANSans; color: white; max-height: 0; transform: translateY(140px); overflow: hidden; text-overflow: ellipsis; transition: all 0.5s ease; /* margin-top: 10px; margin-bottom: 5px; */ } .descript_is_active{ /* margin-top: 15px; */ /* display: block; */ transform: translateY(0); /* overflow: hidden; */ display: -webkit-box; -webkit-line-clamp: 4; /* number of lines to show */ -webkit-box-orient: vertical; max-height: none; margin-top: 10px; margin-bottom: 5px; } /* * --------responsive-setting---------------------------------------------------------- */ @media screen and (max-width: 1200px){ .melc-h-tab-name-item{ font-size: 15px; } .melc-content-i-item{ border-radius: 25px; } } @media screen and (max-width: 1110px){ .melc-h-tab-name-item{ font-size: 13px; } } @media screen and (max-width: 1070px){ .melc-h-tab-name-item{ font-size: 12px; } }