.bar-stable { background-color: var(--cusgray) !important; } .tabs{ background-color: var(--cusgray) !important; } .icon-size-lg { font-size: 40px; } /*Timeline*/ .pos-absolute-right { position: absolute; right: 8px; } .timelineMain { position: relative; margin: 15px 0 0 0; } .timelineMain:before { content: ''; position: absolute; top: 0; bottom: 0; width: 1.5%; height: 99%; background: #e4e4e4; z-index: 1; /* margin-left: -10px; */ /* z-index: 1; */ } .timelineMain .timelineMain-thumb { border-radius: 500px; width: 50px; z-index: 2; position: absolute; // :root[dir="ltr"]{ // left: 37px; // } // :root[dir="rtl"]{ // right: 37px; // } width: 50px; float: right; top: 0px; } .timelineMain .timelineMain-thumb.timelineMain-icon { height: 50px; // text-align: center; // color: white; // border: 5px solid #CBD0D3; transform: scale(0.3); } .timelineMain .timelineMain-item { width: 50px; } .timelineMain .timelineMain-stats { position: relative; font-size: 12px; color: var(--darkgray); } .divider-title { background: #e4e4e4; padding: 5px 15px; } .color-red { color: var(--danger) !important; } .bg-color-dot { // background-color: #ff3b30 !important; background: var(--primary); background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%); background: -webkit-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%); background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%); } .notification-list{ background: none; ion-item{ // margin-top: 5px; // margin-bottom: 5px; background-color: transparent; .item-date{ width: 100%; font-size: 16px; font-weight: bold; text-align: start; padding: 0; margin: 0; position: absolute; left: 0; top: 12%; } ion-label , [item-end]{ white-space: normal; font-size: 14px; padding-top: 15%; // :root[dir="ltr"]{ // margin-left: 10px; // } // :root[dir="rtl"]{ // margin-right: 10px; // } } } } .input-wrapper { --flex:none; } ion-input ,ion-datetime{ border-bottom: #dedede 1px solid; } .left { --background: #f0efef; .timelineMain:before{ left: 21px; } .notification-list ion-item{ padding-left: 3px; margin-left: -12%; } .timelineMain-thumb{ left: 9%; top: 30%; } } .right { --background: #f0efef; .timelineMain:before{ right: 62px; } .notification-list ion-item{ padding-right: 3px; } .timelineMain-thumb{ right: 37px; } } .menuList{ margin-left: -40px; height: 160%; padding-top: 370%; } .colorBG{ --background: #f0efef; } .menuListCol{ padding-left: 50px; margin-left: -33px; } .menuListItem{ padding-top: 9%; margin: -20%; padding-left: 13%; } .menuListBtn{ width: 100%; background: white; --background: white; } .activeTabMenu{ --background: #ff726f; } .notifincationList{ margin-left: 5%; margin-top: 6%; } .itemListNotification{ padding-bottom: 18px; } .footerSearchBtn{ padding: 0px !important; background: #f0efef !important; } .viewAndSearch{ margin-bottom: 13px; } .toSearchBtn{ margin-top: 4%; } .emptyItem{ white-space: normal; padding-left: 10%; } ///////////////////////////////////////////NEW DESIGN///////////////////////////////////// .profile-image-container{ position: relative; z-index: 999; img { width: 32px; float: right; border-radius: 20px; height: 32px; margin-right: 10px; } } ion-title{ color: white; position: absolute; top: 0; text-align: center; left: 15%; right: 15%; font-size: 0.42cm; font-weight: bold; height: 100%; } .contentBg:before { position: absolute; content: ""; background: #269DB8; height: 140px; width: 100%; left: 0; top: 0px; z-index: 1; } ion-content { --ion-background-color: whitesmoke; } .request-heading { span { text-align: center; display: block; padding-top: 8px; font-family: workSans-Regular; } } .result-graph { position: relative; background: white; margin-right: 20px; margin-left: 20px; margin-top: 20px; padding-bottom: 20px; border-radius: 20px; z-index: 1; } .result-text-container { padding: 0; margin: 0; position: absolute; left: 50%; top: 50%; display: block; text-align: center; transform: translate(-50%, -50%); h2 { font-size: 38px; font-family: WorkSans-Bold; margin: 0 auto; line-height: 36px; } span { width: 125px; display: block; margin: 0 auto; font-size: 12px; font-family: workSans-Regular; } } .today-graph { width: 100%; max-height: 4cm; } .swiper-container { margin: 0 !important; width: 100% !important; } .filters-row { margin-top: 10px; margin-left: 20px; } .work-list-container { position: relative; padding-left: 60px; clear: both; min-height: 200px; margin-bottom: 80px; padding-top: 15px; } .work-list-container:before{ content: ""; position: absolute; height: 100%; width: 4px; left: 30px; top: 15px; background-color: #dddddd; } .work-list-container-ar { position: relative; padding-left: 60px; clear: both; min-height: 200px; margin-bottom: 80px; padding-top: 15px; } .work-list-container-ar:before{ content: ""; position: absolute; height: 100%; width: 4px; left: 30px; top: 15px; right: 6px; background-color: #dddddd; } .search-container{ margin-top: 15px; display: block; padding: 0 20px; position: relative; z-index: 99; ion-col{ background: white; border-radius: 12px; padding-right: 30px; flex: none; ion-icon{ margin-right: 3px; font-size: 20px; margin-left: 3px; vertical-align: middle; } span{ font-size: 14px; vertical-align: middle; margin: 5px; } } } .date-span { position: relative; display: block; margin-bottom: 10px; } .date-span:before{ content: ""; position: absolute; left: -35px; border-radius: 50%; width: 15px; height: 15px; background-color: #269db8; top: 1px; } .date-span-ar{ position: relative; display: block; margin-bottom: 10px; /* margin-top: 10px; */ margin-right: 30px; } .date-span-ar:before{ content: ""; position: absolute; right: -29px; border-radius: 50%; width: 15px; height: 15px; background-color: #38c9b3; top: 1px; } .date-data{ background-color: white; padding: 1px; border-radius: 20px; font-family: WorkSans-Regular; padding-left: 15px; margin-right: 20px; margin-bottom: 15px; p{ font-size: 14px; } } .no-data-available { background: white; font-family: WorkSans-Regular; padding: 30px; position: absolute; left: 85px; bottom: 20%; } .disable-filter { pointer-events: none; opacity: .3; } .total-result { margin-top: 55px; padding-left: 20px; color: #888; font-size: 15px; } .text-span{ font-size: 12px; color: #888; background-color: white; width: auto; height: 40px; border: 1px solid; border-radius: 30px; padding: 10px 30px; } .text-span-active{ font-size: 12px; color:white; background-color:#269DB8; width: auto; height: 40px; border: 1px solid; border-radius: 30px; padding: 10px 30px; } .slideCss{ width: auto !important; }