.cardMain{border:1px solid #e1e1e1;padding:15px 22px;border-radius:10px;display:grid;grid-template-columns:85% 15%;position:relative;overflow:hidden;background:#fff;transition:all .3s ease-in-out;margin-top:7px;cursor:pointer;min-height:105px}.cardMain.active{background-color:hsla(0,0%,95%,.5)}.cardMain:active{transform:scale(.98);box-shadow:0 2px 6px rgba(0,0,0,.1)}.firstCardDiv{display:flex;align-items:center}.firstCardDiv,.secondCardDiv{transition:opacity .3s ease-in-out,transform .3s ease-in-out}.firstCardDiv.hidden,.secondCardDiv.hidden{opacity:0;transform:translateX(-20px);pointer-events:none}.thirdCardDiv{display:flex;justify-content:end;align-items:center;cursor:pointer;transition:opacity .3s ease-in-out}.actions{position:absolute;top:50%;left:100%;transform:translateY(-50%) translateX(100%);display:flex;gap:15px;opacity:0;transition:transform .4s ease-in-out,opacity .3s ease-in-out}.actions.show{left:0;width:100%;grid-column:1/2;transform:translateY(-50%) translateX(0);opacity:1;display:flex;justify-content:center;align-items:center}.btn{background:none;border:none;font-size:16px;transition:color .2s ease-in-out;cursor:pointer}html[dir=rtl] .btn{font-size:17px}.headingText{font-size:16px;font-weight:400}html[dir=rtl] .headingText{font-size:20px}.descText{color:#838383;font-weight:500;font-size:14px;margin-top:7px}html[dir=rtl] .descText{font-size:15px}.areaText{font-size:16px;font-weight:400;margin:1px 0 3px}html[dir=rtl] .areaText{font-size:19px}.secondText{color:#838383;font-weight:300;font-size:14px}html[dir=rtl] .secondText{font-size:18px}