SCRA colors changes

SRCA_DEV
Sultan Khan 4 years ago
parent 723cdde798
commit c6660fb925

@ -7,10 +7,12 @@
height: 20px; height: 20px;
width: 20px; width: 20px;
} }
.rowAH ion-col { .rowAH ion-col {
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
font-size: 13px; font-size: 13px;
} }
.titleH { .titleH {
font-size: 13px; font-size: 13px;
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
@ -18,14 +20,17 @@
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-bottom: 0px; border-bottom: 0px;
} }
.gridAH { .gridAH {
text-align: center; text-align: center;
padding: 5px 5px !important; padding: 5px 5px !important;
border-radius: 5px; border-radius: 5px;
} }
ion-card-content.confirm-details { ion-card-content.confirm-details {
padding: 0; padding: 0;
} }
.confirm-details label { .confirm-details label {
font-size: 13px; font-size: 13px;
} }
@ -42,7 +47,7 @@ ion-card-content.confirm-details{
.Header { .Header {
font-weight: bold; font-weight: bold;
color: #1a586d !important; color: #c6903e !important;
font-size: 10px; font-size: 10px;
} }
@ -74,6 +79,7 @@ ion-card-content.confirm-details{
margin: 10px; margin: 10px;
border-radius: 5px; border-radius: 5px;
} }
.submitNote { .submitNote {
background: #ffffff; background: #ffffff;
height: 80px; height: 80px;
@ -98,11 +104,13 @@ ion-card-content.confirm-details{
background: none; background: none;
background: none; background: none;
border-radius: 32px; border-radius: 32px;
ion-item { ion-item {
// margin-top: 5px; // margin-top: 5px;
// margin-bottom: 5px; // margin-bottom: 5px;
background-color: transparent; background-color: transparent;
.item-date { .item-date {
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;
@ -116,7 +124,9 @@ ion-card-content.confirm-details{
left: 0; left: 0;
top: 12%; top: 12%;
} }
ion-label , [item-end]{
ion-label,
[item-end] {
white-space: normal; white-space: normal;
font-size: 14px; font-size: 14px;
@ -204,6 +214,7 @@ ion-card-content.confirm-details{
border: #dedede solid 1px; border: #dedede solid 1px;
} }
.empImgeRep { .empImgeRep {
border-radius: 50% !important; border-radius: 50% !important;
width: 80px; width: 80px;
@ -256,8 +267,9 @@ ion-card-content.confirm-details{
--border-radius: 20px; --border-radius: 20px;
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.confirmEitOkButton { .confirmEitOkButton {
@ -266,7 +278,7 @@ ion-card-content.confirm-details{
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
--background: #269DB8; --background: #BE332F;
width: 80% !important; width: 80% !important;
color: white !important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
@ -278,6 +290,7 @@ ion-card-content.confirm-details{
text-align: right; text-align: right;
} }
.approvalTitle { .approvalTitle {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;

@ -145,7 +145,7 @@
<div> <div>
<ion-row> <ion-row>
<ion-col class="colBold"> <ion-col class="colBold">
<label style="color:#269DB8;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','startDate')}} </label> <label style="color:#BE332F;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','startDate')}} </label>
<br> <br>
<label class="label" style="color:black;" for=""> {{item.START_DATE}}</label> <label class="label" style="color:black;" for=""> {{item.START_DATE}}</label>
<br> <br>
@ -154,7 +154,7 @@
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col class="colBold"> <ion-col class="colBold">
<label style="color:#269DB8;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','endDate')}}</label> <label style="color:#BE332F;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','endDate')}}</label>
<br> <br>
<label class="label" style="color:black;" for=""> {{item.END_DATE}}</label> <label class="label" style="color:black;" for=""> {{item.END_DATE}}</label>
<br> <br>
@ -163,7 +163,7 @@
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col class="colBold"> <ion-col class="colBold">
<label style="color:#269DB8;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','absenceType')}} </label> <label style="color:#BE332F;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','absenceType')}} </label>
<br> <br>
<label class="label" style="color:black;" for="">{{item.ABSENCE_TYPE}}</label> <label class="label" style="color:black;" for="">{{item.ABSENCE_TYPE}}</label>
<br> <br>
@ -172,7 +172,7 @@
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col class="colBold"> <ion-col class="colBold">
<label style="color:#269DB8;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','absenceCategory')}}</label> <label style="color:#BE332F;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','absenceCategory')}}</label>
<br> <br>
<label class="label" style="color:black;" for="">{{item.ABSENCE_CATEGORY}}</label> <label class="label" style="color:black;" for="">{{item.ABSENCE_CATEGORY}}</label>
<br> <br>
@ -181,7 +181,7 @@
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col class="colBold"> <ion-col class="colBold">
<label style="color:#269DB8;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','days')}}</label> <label style="color:#BE332F;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','days')}}</label>
<br> <br>
<label class="label" style="color:black;" for="">{{item.ABSENCE_DAYS}}</label> <label class="label" style="color:black;" for="">{{item.ABSENCE_DAYS}}</label>
<br> <br>
@ -190,7 +190,7 @@
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col class="colBold"> <ion-col class="colBold">
<label style="color:#269DB8;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','hours')}}</label> <label style="color:#BE332F;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','hours')}}</label>
<br> <br>
<label class="label" style="color:black;" for="">{{item.ABSENCE_HOURS}}</label> <label class="label" style="color:black;" for="">{{item.ABSENCE_HOURS}}</label>
<br> <br>
@ -199,7 +199,7 @@
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col class="colBold"> <ion-col class="colBold">
<label style="color:#269DB8;font-weight: bold;" for="">{{ts.trPK('absenceList','approvalStatus')}}</label> <label style="color:#BE332F;font-weight: bold;" for="">{{ts.trPK('absenceList','approvalStatus')}}</label>
<br> <br>
<label class="label" style="color:black;" for="">{{item.APPROVAL_STATUS}}</label> <label class="label" style="color:black;" for="">{{item.APPROVAL_STATUS}}</label>
<br> <br>
@ -208,7 +208,7 @@
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col class="colBold"> <ion-col class="colBold">
<label style="color:#269DB8;font-weight: bold;" for="">{{ts.trPK('absenceList','absenceStatus')}}</label> <label style="color:#BE332F;font-weight: bold;" for="">{{ts.trPK('absenceList','absenceStatus')}}</label>
<br> <br>
<label class="label" style="color:black;" for="">{{item.ABSENCE_STATUS}}</label> <label class="label" style="color:black;" for="">{{item.ABSENCE_STATUS}}</label>
<br> <br>

@ -9,7 +9,7 @@
} }
.addClass { .addClass {
background-color: #269DB8; background-color: #BE332F;
width: 80px; width: 80px;
height: 80px; height: 80px;
right: 8%; right: 8%;
@ -47,7 +47,7 @@
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
/* border-radius: 12px !important; */ /* border-radius: 12px !important; */
background: #269DB8; background: #BE332F;
border-bottom: 1px solid #a7a4a4; border-bottom: 1px solid #a7a4a4;
border-top: 1px solid #cac8c8; border-top: 1px solid #cac8c8;
margin-left: -13px; margin-left: -13px;
@ -56,13 +56,13 @@
.header-div { .header-div {
background-color: #269DB8; background-color: #BE332F;
text-transform: capitalize; text-transform: capitalize;
height: 100px; height: 100px;
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
@ -104,11 +104,13 @@
margin-top: -19px; margin-top: -19px;
} }
.datelabel { .datelabel {
margin-left: 150px; margin-left: 150px;
color: black !important; color: black !important;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
} }
.iconCalendar { .iconCalendar {
// margin-left: -241px; // margin-left: -241px;
// margin-top: 5px; // margin-top: 5px;
@ -118,6 +120,7 @@
margin-top: -50px !important; margin-top: -50px !important;
margin-bottom: 23px !important; margin-bottom: 23px !important;
} }
// .today-graph{ // .today-graph{
// display: block !important; // display: block !important;
@ -149,10 +152,12 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
.header { .header {
margin-top: -126px; margin-top: -126px;
} }
.result-text-container { .result-text-container {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -183,6 +188,7 @@
font-family: workSans-Regular; font-family: workSans-Regular;
} }
} }
.green-label { .green-label {
font-size: 12px; font-size: 12px;
margin-top: -13px; margin-top: -13px;
@ -223,13 +229,14 @@ margin-top: -13px;
.contentEit:before { .contentEit:before {
position: absolute; position: absolute;
content: ""; content: "";
// background: #269DB8; // background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
top: 0px; top: 0px;
z-index: 1; z-index: 1;
} }
.div-green { .div-green {
position: relative; position: relative;
left: 82%; left: 82%;
@ -251,6 +258,7 @@ margin-top: -13px;
right: 16px; right: 16px;
} }
// .div-red-ar{ // .div-red-ar{
// position: relative; // position: relative;
// bottom: 131px; // bottom: 131px;
@ -266,7 +274,7 @@ margin-top: -13px;
// bottom: 146px; // bottom: 146px;
// color: black; // color: black;
// background-color: #CB3232; // background-color: #CB3232;
// // background-color: #269DB8; // // background-color: #BE332F;
// width: 11%; // width: 11%;
// height: 6px; // height: 6px;
// } // }
@ -281,6 +289,7 @@ margin-top: -13px;
width: 11%; width: 11%;
height: 6px; height: 6px;
} }
.div-green-ar { .div-green-ar {
position: relative; position: relative;
bottom: 124px; bottom: 124px;
@ -291,6 +300,7 @@ margin-top: -13px;
height: 6px; height: 6px;
right: 16px; right: 16px;
} }
.subTitle { .subTitle {
margin-top: -10px; margin-top: -10px;
margin-left: 10px; margin-left: 10px;
@ -330,6 +340,7 @@ max-height: 4cm;
position: relative; position: relative;
margin-top: -98px; margin-top: -98px;
} }
// .label-container{ // .label-container{
// position: absolute; // position: absolute;
// // width: 20%; // // width: 20%;
@ -342,20 +353,25 @@ max-height: 4cm;
.green-label-container { .green-label-container {
margin-top: 20px; margin-left: 12px; margin-top: 20px;
margin-left: 12px;
} }
.green-label-container-ar { .green-label-container-ar {
margin-top: 20px; margin-right: 12px; margin-top: 20px;
margin-right: 12px;
} }
.black-label-container { .black-label-container {
margin-left: 12px; margin-left: 12px;
} }
.black-label-container-ar { .black-label-container-ar {
margin-right: 12px; margin-right: 12px;
} }
.used-label-container { .used-label-container {
// border-top: 5px solid #292F42; // border-top: 5px solid #292F42;
// padding: 1px 0px; // padding: 1px 0px;
@ -367,6 +383,7 @@ max-height: 4cm;
background-color: #b60c0c; background-color: #b60c0c;
margin-top: 30px; margin-top: 30px;
} }
.current-label-container { .current-label-container {
width: 12px; width: 12px;
height: 12px; height: 12px;
@ -375,21 +392,23 @@ max-height: 4cm;
background-color: black; background-color: black;
margin-top: 21px; margin-top: 21px;
} }
.current-label { .current-label {
width: 12px; width: 12px;
height: 12px; height: 12px;
padding-right: -10px; padding-right: -10px;
border-radius: 100%; border-radius: 100%;
background-color: #269DB8; background-color: #BE332F;
// margin-top: 30px; // margin-top: 30px;
} }
.span-one { .span-one {
// display: block; // display: block;
// font-size: 12px; // font-size: 12px;
// color: black; // color: black;
display: block; display: block;
font-size: 12px; font-size: 12px;
color: #269DB8; color: #BE332F;
margin-left: 6px; margin-left: 6px;
margin-top: -2px; margin-top: -2px;
font-weight: bold; font-weight: bold;
@ -399,7 +418,7 @@ max-height: 4cm;
.span-one-ar { .span-one-ar {
display: block; display: block;
font-size: 12px; font-size: 12px;
color: #269DB8; color: #BE332F;
margin-right: 6px; margin-right: 6px;
margin-top: -2px; margin-top: -2px;
font-weight: bold; font-weight: bold;
@ -411,7 +430,7 @@ max-height: 4cm;
// font-size: 22px; // font-size: 22px;
display: block; display: block;
font-size: 12px; font-size: 12px;
color: #269DB8; color: #BE332F;
margin-left: 6px; margin-left: 6px;
margin-top: -2px; margin-top: -2px;
font-weight: bold; font-weight: bold;
@ -431,6 +450,7 @@ max-height: 4cm;
font-weight: bold; font-weight: bold;
} }
.black-span1-ar { .black-span1-ar {
// display: block; // display: block;
// font-size: 12px; // font-size: 12px;
@ -443,6 +463,7 @@ max-height: 4cm;
font-weight: bold; font-weight: bold;
} }
.black-span2 { .black-span2 {
// display: block; // display: block;
// font-size: 22px; // font-size: 22px;
@ -455,6 +476,7 @@ max-height: 4cm;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
} }
.red-span1 { .red-span1 {
// display: block; // display: block;
// font-size: 12px; // font-size: 12px;
@ -467,6 +489,7 @@ max-height: 4cm;
font-weight: bold; font-weight: bold;
} }
.red-span1-ar { .red-span1-ar {
// display: block; // display: block;
// font-size: 12px; // font-size: 12px;
@ -479,6 +502,7 @@ max-height: 4cm;
font-weight: bold; font-weight: bold;
} }
.red-span2 { .red-span2 {
// display: block; // display: block;
// font-size: 22px; // font-size: 22px;
@ -491,6 +515,7 @@ max-height: 4cm;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
} }
.yearLabel { .yearLabel {
font-size: 13px; font-size: 13px;
color: gray; color: gray;
@ -498,6 +523,7 @@ max-height: 4cm;
margin-left: 29px; margin-left: 29px;
margin-top: 5px; margin-top: 5px;
} }
.yearLabel-ar { .yearLabel-ar {
font-size: 13px; font-size: 13px;
color: gray; color: gray;

@ -118,7 +118,7 @@ export class HomeComponent implements OnInit {
backgroundColor: [ backgroundColor: [
// '#1FA269', // '#1FA269',
// '#CB3232',], // '#CB3232',],
'#269DB8', '#BE332F',
'#b60c0c',], '#b60c0c',],
borderWidth: 1 borderWidth: 1
} }
@ -276,7 +276,7 @@ export class HomeComponent implements OnInit {
{ {
data: [this.accrualNet, this.accrualUsed], data: [this.accrualNet, this.accrualUsed],
backgroundColor: [ backgroundColor: [
'#269DB8', '#BE332F',
'#b60c0c',], '#b60c0c',],
borderWidth: 1 borderWidth: 1
} }

@ -8,7 +8,8 @@
.Header { .Header {
color: black !important; color: black !important;
font-size: 25px !important; font-size: 25px !important;
font-weight: bold !important;; font-weight: bold !important;
;
margin: 0; margin: 0;
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
@ -32,22 +33,20 @@
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
--background:: #269DB8; --background: #BE332F;
width: 100% !important; width: 100% !important;
color: white !important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
} }
.submitCancelButton { .submitCancelButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
--background:: #269DB8; --background: #BE332F;
width: 100% !important; width: 100% !important;
color: white !important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
} }

@ -5,7 +5,7 @@
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.confirmEitOkButton { .confirmEitOkButton {
@ -14,7 +14,7 @@
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
--background: #269DB8; --background: #BE332F;
width: 80% !important; width: 80% !important;
color: white !important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
@ -54,6 +54,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
padding-right: 20px; padding-right: 20px;
} }
:root[dir="rtl"] { :root[dir="rtl"] {
background-image: linear-gradient(-135deg, #999 50%, transparent 50%), linear-gradient(-45deg, transparent 50%, #999 50%), linear-gradient(to right, #ffffff, #ffffff); background-image: linear-gradient(-135deg, #999 50%, transparent 50%), linear-gradient(-45deg, transparent 50%, #999 50%), linear-gradient(to right, #ffffff, #ffffff);
background-position: calc(1em - 10px) calc(100% - 8px), calc(1em - 4px) calc(100% - 8px), 0 100%; background-position: calc(1em - 10px) calc(100% - 8px), calc(1em - 4px) calc(100% - 8px), 0 100%;
@ -81,9 +82,11 @@
padding: 5px 0px; padding: 5px 0px;
padding-left: 10px !important; padding-left: 10px !important;
margin: 10px auto; margin: 10px auto;
:root[dir="ltr"] { :root[dir="ltr"] {
font-family: var(--fontFamilySemiBoldEN) !important; font-family: var(--fontFamilySemiBoldEN) !important;
} }
:root[dir="rtl"] { :root[dir="rtl"] {
font-family: var(--fontFamilyIOSAR) !important; font-family: var(--fontFamilyIOSAR) !important;
font-weight: bold; font-weight: bold;
@ -109,6 +112,3 @@
padding-top: 6px !important; padding-top: 6px !important;
color: #999999 !important; color: #999999 !important;
} }

@ -1,3 +1,3 @@
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }

@ -77,7 +77,7 @@ header
.logout { .logout {
background-color: #269DB8; background-color: #BE332F;
border: none; border: none;
color: white; color: white;
// padding: 20px; // padding: 20px;
@ -96,7 +96,7 @@ header
} }
.logout-ar { .logout-ar {
background-color: #269DB8; background-color: #BE332F;
border: none; border: none;
color: white; color: white;
text-align: center; text-align: center;

@ -44,14 +44,14 @@
left: 79%; left: 79%;
bottom: 35px; bottom: 35px;
color: black; color: black;
background-color: #269DB8; background-color: #BE332F;
width: 20%; height: 6px;"> width: 20%; height: 6px;">
</div> </div>
<div style="position: relative; <div style="position: relative;
left: 79%; left: 79%;
bottom: 20px; bottom: 20px;
color: black; color: black;
background-color: #269DB8; background-color: #BE332F;
width: 20%; height: 6px;"> width: 20%; height: 6px;">
</div> </div>

@ -1,8 +1,9 @@
.colorBG { .colorBG {
--background: #f0efef; --background: #f0efef;
} }
.header-div { .header-div {
background: #269DB8; background: #BE332F;
color: var(--light); color: var(--light);
text-transform: capitalize; text-transform: capitalize;
display: block; display: block;
@ -24,7 +25,7 @@
.navbar { .navbar {
font-size: 10px !important; font-size: 10px !important;
--background: #269DB8 !important; --background: #BE332F !important;
color: aliceblue !important; color: aliceblue !important;
// margin-top: 10px !important; // margin-top: 10px !important;
@ -34,7 +35,7 @@
// margin-left:330px !important; // margin-left:330px !important;
margin-top: 0px !important; margin-top: 0px !important;
font-size: 35px !important; font-size: 35px !important;
background: #269DB8; background: #BE332F;
color: aliceblue; color: aliceblue;
margin-left: 0px !important; margin-left: 0px !important;
@ -45,7 +46,7 @@
margin-left: 100px !important; margin-left: 100px !important;
margin-top: 0px !important; margin-top: 0px !important;
font-size: 23px !important; font-size: 23px !important;
background: #269DB8 !important; background: #BE332F !important;
color: aliceblue !important; color: aliceblue !important;
} }
@ -79,6 +80,7 @@ height: 250px !important;
border-radius: 20px !important; border-radius: 20px !important;
height: 270px !important; height: 270px !important;
} }
.labelGrid { .labelGrid {
margin-top: -30px !important; margin-top: -30px !important;
background-color: white !important; background-color: white !important;
@ -99,6 +101,7 @@ height: 250px !important;
color: black !important; color: black !important;
} }
.dateLable { .dateLable {
margin-left: 90px !important; margin-left: 90px !important;
@ -106,6 +109,7 @@ height: 250px !important;
font-size: small !important; font-size: small !important;
margin-top: 15px !important; margin-top: 15px !important;
} }
// h1{ // h1{
// font-size: 15px !important; // font-size: 15px !important;
// text-align: center !important; // text-align: center !important;
@ -117,6 +121,7 @@ height: 250px !important;
margin-top: 15px !important; margin-top: 15px !important;
} }
.arrowDropleft { .arrowDropleft {
font-size: 20px !important; font-size: 20px !important;
margin-left: 10px !important; margin-left: 10px !important;
@ -139,7 +144,7 @@ height: 250px !important;
background: var(--primary); background: var(--primary);
background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%, var(--secondary) 59%, var(--customnavy) 100%); background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%, var(--secondary) 59%, var(--customnavy) 100%);
background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%, var(--secondary) 59%, var(--customnavy) 100%); background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%, var(--secondary) 59%, var(--customnavy) 100%);
background: #269DB8; background: #BE332F;
// background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%); // background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%);
color: var(--light); color: var(--light);
text-transform: capitalize; text-transform: capitalize;
@ -239,4 +244,3 @@ height: 250px !important;
font-family: workSans-Regular; font-family: workSans-Regular;
} }
} }

@ -50,9 +50,9 @@ public data = {
backgroundColor: [ backgroundColor: [
'#269DB8', '#BE332F',
'#269DB8', '#BE332F',
], ],
borderWidth: 2 borderWidth: 2

@ -1,5 +1,5 @@
.header-toolbar { .header-toolbar {
--background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #1a586d 100%); --background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #c6903e 100%);
} }
.btnBack { .btnBack {
@ -11,6 +11,7 @@
.login-input { .login-input {
border: none; border: none;
} }
.item-input { .item-input {
--min-height: 1.0cm !important; --min-height: 1.0cm !important;
--border-radius: 12px; --border-radius: 12px;
@ -38,4 +39,5 @@
--min-height: 1.6cm !important; --min-height: 1.6cm !important;
width: 315px; width: 315px;
} }
/////////////////////////////////////////// ///////////////////////////////////////////

@ -182,7 +182,7 @@ img.centerDiv {
.middle-circle { .middle-circle {
position: relative; position: relative;
background: #1a586d !important; background: #c6903e !important;
border-radius: 50%; border-radius: 50%;
height: 160px; height: 160px;
width: 170px; width: 170px;

@ -1,5 +1,5 @@
.header-toolbar { .header-toolbar {
--background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #1a586d 100%); --background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #c6903e 100%);
} }
.btnBack { .btnBack {

@ -13,7 +13,8 @@
width: 22px; width: 22px;
height: 22px; height: 22px;
} }
.Header { .Header {
font-weight: bold; font-weight: bold;
color: #1a586d; color: #c6903e;
} }

@ -25,15 +25,16 @@
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.addEitOkButton { .addEitOkButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
background-color: #269DB8; background-color: #BE332F;
width: 80% !important; width: 80% !important;
color: white !important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;

@ -25,15 +25,16 @@ ion-label {
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.addEitOkButton { .addEitOkButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
background-color: #269DB8; background-color: #BE332F;
width: 80% !important; width: 80% !important;
color: white !important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;

@ -63,7 +63,7 @@
<!-- <ion-footer style="background: #f5f5f5 !important;"> <!-- <ion-footer style="background: #f5f5f5 !important;">
<div class="centerDiv" (click)="gotoTransactionsPage()"> <div class="centerDiv" (click)="gotoTransactionsPage()">
<ion-button ion-button style="background: #269db8 !important; --background: #269db8"> <ion-button ion-button style="background: #BE332F !important; --background: #BE332F">
{{'vacation-rule, next-label' | translate}}</ion-button> {{'vacation-rule, next-label' | translate}}</ion-button>
</div> </div>
</ion-footer> --> </ion-footer> -->

@ -22,7 +22,7 @@
<div *ngFor="let item of EITTransactionList.Collection_Transaction"> <div *ngFor="let item of EITTransactionList.Collection_Transaction">
<ion-row *ngIf="item.DISPLAY_FLAG != 'N' " class=""> <ion-row *ngIf="item.DISPLAY_FLAG != 'N' " class="">
<ion-col class="" *ngIf="item.SEGMENT_PROMPT!=''"> <ion-col class="" *ngIf="item.SEGMENT_PROMPT!=''">
<label style="color:#269DB8;font-weight: bold;" class="label" for="">{{item.SEGMENT_PROMPT}} </label> <label style="color:#BE332F;font-weight: bold;" class="label" for="">{{item.SEGMENT_PROMPT}} </label>
<br> <br>
<label class="label" style="color:black;" for="">{{item.SEGMENT_VALUE_DSP}} </label> <label class="label" style="color:black;" for="">{{item.SEGMENT_VALUE_DSP}} </label>
<br> <br>

@ -12,6 +12,7 @@
margin-top: -19px; margin-top: -19px;
} }
.iconCalendar { .iconCalendar {
margin-left: 30px !important; margin-left: 30px !important;
width: 22% !important; width: 22% !important;
@ -19,11 +20,13 @@
margin-top: -69px !important; margin-top: -69px !important;
margin-bottom: 20px !important; margin-bottom: 20px !important;
} }
h4 { h4 {
font-size: 2.2rem; font-size: 2.2rem;
text-align: center; text-align: center;
color: #000000; color: #000000;
} }
.grids { .grids {
border-radius: 20px !important; border-radius: 20px !important;
background: white; background: white;
@ -47,12 +50,13 @@
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
/* border-radius: 12px !important; */ /* border-radius: 12px !important; */
background: #269DB8; background: #BE332F;
border-bottom: 1px solid #a7a4a4; border-bottom: 1px solid #a7a4a4;
border-top: 1px solid #cac8c8; border-top: 1px solid #cac8c8;
margin-left: -13px; margin-left: -13px;
margin-right: -13px; margin-right: -13px;
} }
.colEit { .colEit {
border-right: 1px solid #cac8c8; border-right: 1px solid #cac8c8;
border-bottom-left-radius: -10px !important; border-bottom-left-radius: -10px !important;
@ -64,7 +68,7 @@
.header-div { .header-div {
background-color: #269DB8; background-color: #BE332F;
text-transform: capitalize; text-transform: capitalize;
height: 160px; height: 160px;
// position: relative; // position: relative;
@ -73,11 +77,11 @@
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.addClass { .addClass {
background-color: #269DB8; background-color: #BE332F;
width: 80px; width: 80px;
height: 80px; height: 80px;
right: 8%; right: 8%;
@ -94,7 +98,7 @@
.contentEit:before { .contentEit:before {
position: absolute; position: absolute;
content: ""; content: "";
// background: #269DB8; // background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
@ -114,7 +118,7 @@
.content:before { .content:before {
position: absolute; position: absolute;
content: ""; content: "";
background: #269DB8; background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
@ -133,12 +137,14 @@
margin-top: -33px; margin-top: -33px;
font-size: 17px; font-size: 17px;
} }
.title { .title {
text-align: center; text-align: center;
color: black; color: black;
margin-top: 5px; margin-top: 5px;
font-size: 17px; font-size: 17px;
} }
.today-graph { .today-graph {
display: block !important; display: block !important;
height: 196px; height: 196px;
@ -160,6 +166,7 @@
border-radius: 20px; border-radius: 20px;
margin-top: 17px; margin-top: 17px;
} }
.result-graph { .result-graph {
font-size: 14px; font-size: 14px;
margin-left: -48px; margin-left: -48px;
@ -175,21 +182,25 @@
margin-left: 7px !important; margin-left: 7px !important;
margin-right: 42px; margin-right: 42px;
} }
.green-label-ar { .green-label-ar {
font-size: 15px !important; font-size: 15px !important;
margin-left: 7px !important; margin-left: 7px !important;
margin-right: 15px; margin-right: 15px;
} }
.blue-label { .blue-label {
font-size: 15px !important; font-size: 15px !important;
margin-left: 7px !important; margin-left: 7px !important;
margin-right: 13px; margin-right: 13px;
} }
.light-label { .light-label {
font-size: 15px !important; font-size: 15px !important;
margin-left: 7px !important; margin-left: 7px !important;
margin-right: -26px; margin-right: -26px;
} }
.light-label-ar { .light-label-ar {
font-size: 15px !important; font-size: 15px !important;
margin-right: 7px !important; margin-right: 7px !important;
@ -203,14 +214,16 @@
border-radius: 50% !important; border-radius: 50% !important;
display: inline-block; display: inline-block;
} }
.blue-dote { .blue-dote {
background-color: #269DB8; background-color: #BE332F;
width: 12px; width: 12px;
height: 12px; height: 12px;
border-radius: 50% !important; border-radius: 50% !important;
display: inline-block; display: inline-block;
} }
.green-dote { .green-dote {
background-color: #1FA269; background-color: #1FA269;
width: 12px; width: 12px;
@ -219,6 +232,7 @@
display: inline-block; display: inline-block;
margin-right: -1px; margin-right: -1px;
} }
.col { .col {
text-align: right; text-align: right;
} }
@ -232,6 +246,7 @@
margin-right: 14px; margin-right: 14px;
} }
.columns { .columns {
margin: 3px; margin: 3px;
margin-bottom: 13px; margin-bottom: 13px;
@ -251,6 +266,7 @@
letter-spacing: 1px; letter-spacing: 1px;
font-weight: bold; font-weight: bold;
} }
.services { .services {
font-size: 12px; font-size: 12px;
@ -276,9 +292,10 @@
margin-right: 0px; margin-right: 0px;
margin-left: 5px; margin-left: 5px;
} }
.child-dote { .child-dote {
background-color: #269DB8; background-color: #BE332F;
width: 15px; width: 15px;
height: 15px; height: 15px;
border-radius: 50% !important; border-radius: 50% !important;
@ -286,8 +303,9 @@
margin-left: -17px; margin-left: -17px;
margin-right: 5px; margin-right: 5px;
} }
.child-dote-ar { .child-dote-ar {
background-color: #269DB8; background-color: #BE332F;
width: 15px; width: 15px;
height: 15px; height: 15px;
border-radius: 50% !important; border-radius: 50% !important;
@ -295,6 +313,7 @@
margin-right: 1px; margin-right: 1px;
margin-left: 5px; margin-left: 5px;
} }
.infants-dote { .infants-dote {
background-color: #1FA269; background-color: #1FA269;
width: 15px; width: 15px;
@ -315,16 +334,15 @@
margin-right: 1px; margin-right: 1px;
margin-left: 5px; margin-left: 5px;
} }
.addEitOkButton { .addEitOkButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
background-color: #269DB8; background-color: #BE332F;
width: 80% !important; width: 80% !important;
color: white !important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
} }

@ -12,7 +12,7 @@
.Header { .Header {
font-weight: bold; font-weight: bold;
color: #1a586d !important; color: #c6903e !important;
font-size: 10px; font-size: 10px;
} }
@ -44,6 +44,7 @@
margin: 10px; margin: 10px;
border-radius: 5px; border-radius: 5px;
} }
.submitNote { .submitNote {
background: #ffffff; background: #ffffff;
height: 80px; height: 80px;
@ -68,11 +69,13 @@
background: none; background: none;
background: none; background: none;
border-radius: 32px; border-radius: 32px;
ion-item { ion-item {
// margin-top: 5px; // margin-top: 5px;
// margin-bottom: 5px; // margin-bottom: 5px;
background-color: transparent; background-color: transparent;
.item-date { .item-date {
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;
@ -86,7 +89,9 @@
left: 0; left: 0;
top: 12%; top: 12%;
} }
ion-label , [item-end]{
ion-label,
[item-end] {
white-space: normal; white-space: normal;
font-size: 14px; font-size: 14px;
@ -174,6 +179,7 @@
border: #dedede solid 1px; border: #dedede solid 1px;
} }
.empImgeRep { .empImgeRep {
border-radius: 50% !important; border-radius: 50% !important;
width: 80px; width: 80px;
@ -226,24 +232,28 @@
--border-radius: 20px; --border-radius: 20px;
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.title { .title {
margin-top: -37px; margin-top: -37px;
margin-left: 85px; margin-left: 85px;
} }
.title-ar { .title-ar {
margin-top: -37px; margin-top: -37px;
margin-right: 101px; margin-right: 101px;
} }
.confirmEitOkButton { .confirmEitOkButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
background-color: #269DB8; background-color: #BE332F;
width: 80% !important; width: 80% !important;
color: white !important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
@ -255,9 +265,9 @@
text-align: right; text-align: right;
} }
.approvalTitle { .approvalTitle {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
text-align: left; text-align: left;
} }

@ -12,7 +12,7 @@
.Header { .Header {
font-weight: bold; font-weight: bold;
color: #1a586d !important; color: #c6903e !important;
font-size: 10px; font-size: 10px;
} }
@ -44,6 +44,7 @@
margin: 10px; margin: 10px;
border-radius: 5px; border-radius: 5px;
} }
.submitNote { .submitNote {
background: #ffffff; background: #ffffff;
height: 80px; height: 80px;
@ -68,11 +69,13 @@
background: none; background: none;
background: none; background: none;
border-radius: 32px; border-radius: 32px;
ion-item { ion-item {
// margin-top: 5px; // margin-top: 5px;
// margin-bottom: 5px; // margin-bottom: 5px;
background-color: transparent; background-color: transparent;
.item-date { .item-date {
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;
@ -86,7 +89,9 @@
left: 0; left: 0;
top: 12%; top: 12%;
} }
ion-label , [item-end]{
ion-label,
[item-end] {
white-space: normal; white-space: normal;
font-size: 14px; font-size: 14px;
@ -174,6 +179,7 @@
border: #dedede solid 1px; border: #dedede solid 1px;
} }
.empImgeRep { .empImgeRep {
border-radius: 50% !important; border-radius: 50% !important;
width: 80px; width: 80px;
@ -226,24 +232,28 @@
--border-radius: 20px; --border-radius: 20px;
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.title { .title {
margin-top: -37px; margin-top: -37px;
margin-left: 85px; margin-left: 85px;
} }
.title-ar { .title-ar {
margin-top: -37px; margin-top: -37px;
margin-right: 101px; margin-right: 101px;
} }
.confirmEitOkButton { .confirmEitOkButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
background-color: #269DB8; background-color: #BE332F;
width: 80% !important; width: 80% !important;
color: white !important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
@ -255,6 +265,7 @@
text-align: right; text-align: right;
} }
.approvalTitle { .approvalTitle {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;

@ -223,7 +223,7 @@
<ion-row *ngIf="item.DISPLAY_FLAG != 'N' " class=""> <ion-row *ngIf="item.DISPLAY_FLAG != 'N' " class="">
<ion-col class="" *ngIf="item.SEGMENT_PROMPT!=''"> <ion-col class="" *ngIf="item.SEGMENT_PROMPT!=''">
<label style="color:#269DB8;font-weight: bold;" class="label" for="">{{item.SEGMENT_PROMPT}} </label> <label style="color:#BE332F;font-weight: bold;" class="label" for="">{{item.SEGMENT_PROMPT}} </label>
<br> <br>
<label class="label" style="color:black;" for="">{{item.SEGMENT_VALUE_DSP}} </label> <label class="label" style="color:black;" for="">{{item.SEGMENT_VALUE_DSP}} </label>
<br> <br>

@ -15,6 +15,7 @@
margin-top: -19px; margin-top: -19px;
} }
.iconCalendar { .iconCalendar {
// margin-left: -241px; // margin-left: -241px;
// margin-top: 5px; // margin-top: 5px;
@ -24,11 +25,13 @@
margin-top: -69px !important; margin-top: -69px !important;
margin-bottom: 20px !important; margin-bottom: 20px !important;
} }
h4 { h4 {
font-size: 2.2rem; font-size: 2.2rem;
text-align: center; text-align: center;
color: #000000; color: #000000;
} }
.grids { .grids {
border-radius: 20px !important; border-radius: 20px !important;
background: white; background: white;
@ -52,12 +55,13 @@ h4 {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
/* border-radius: 12px !important; */ /* border-radius: 12px !important; */
background: #269DB8; background: #BE332F;
border-bottom: 1px solid #a7a4a4; border-bottom: 1px solid #a7a4a4;
border-top: 1px solid #cac8c8; border-top: 1px solid #cac8c8;
margin-left: -13px; margin-left: -13px;
margin-right: -13px; margin-right: -13px;
} }
.colEit { .colEit {
border-right: 1px solid #cac8c8; border-right: 1px solid #cac8c8;
border-bottom-left-radius: -10px !important; border-bottom-left-radius: -10px !important;
@ -69,7 +73,7 @@ h4 {
.header-div { .header-div {
background-color: #269DB8; background-color: #BE332F;
text-transform: capitalize; text-transform: capitalize;
height: 160px; height: 160px;
// position: relative; // position: relative;
@ -78,11 +82,11 @@ h4 {
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.addClass { .addClass {
background-color: #269DB8; background-color: #BE332F;
width: 80px; width: 80px;
height: 80px; height: 80px;
right: 8%; right: 8%;
@ -99,7 +103,7 @@ h4 {
.contentEit:before { .contentEit:before {
position: absolute; position: absolute;
content: ""; content: "";
// background: #269DB8; // background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
@ -119,7 +123,7 @@ z-index: 1;
.content:before { .content:before {
position: absolute; position: absolute;
content: ""; content: "";
background: #269DB8; background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
@ -138,12 +142,14 @@ z-index: 1;
margin-top: -33px; margin-top: -33px;
font-size: 17px; font-size: 17px;
} }
.title { .title {
text-align: center; text-align: center;
color: black; color: black;
margin-top: 5px; margin-top: 5px;
font-size: 17px; font-size: 17px;
} }
.today-graph { .today-graph {
display: block !important; display: block !important;
height: 196px; height: 196px;
@ -176,6 +182,7 @@ z-index: 1;
border-radius: 20px; border-radius: 20px;
margin-top: 17px; margin-top: 17px;
} }
.result-graph { .result-graph {
font-size: 14px; font-size: 14px;
margin-left: -48px; margin-left: -48px;
@ -191,21 +198,25 @@ z-index: 1;
margin-left: 7px !important; margin-left: 7px !important;
margin-right: 42px; margin-right: 42px;
} }
.green-label-ar { .green-label-ar {
font-size: 15px !important; font-size: 15px !important;
margin-left: 7px !important; margin-left: 7px !important;
margin-right: 15px; margin-right: 15px;
} }
.blue-label { .blue-label {
font-size: 15px !important; font-size: 15px !important;
margin-left: 7px !important; margin-left: 7px !important;
margin-right: 13px; margin-right: 13px;
} }
.light-label { .light-label {
font-size: 15px !important; font-size: 15px !important;
margin-left: 7px !important; margin-left: 7px !important;
margin-right: -26px; margin-right: -26px;
} }
.light-label-ar { .light-label-ar {
font-size: 15px !important; font-size: 15px !important;
margin-right: 7px !important; margin-right: 7px !important;
@ -219,14 +230,16 @@ z-index: 1;
border-radius: 50% !important; border-radius: 50% !important;
display: inline-block; display: inline-block;
} }
.blue-dote { .blue-dote {
background-color: #269DB8; background-color: #BE332F;
width: 12px; width: 12px;
height: 12px; height: 12px;
border-radius: 50% !important; border-radius: 50% !important;
display: inline-block; display: inline-block;
} }
.green-dote { .green-dote {
background-color: #1FA269; background-color: #1FA269;
width: 12px; width: 12px;
@ -235,6 +248,7 @@ z-index: 1;
display: inline-block; display: inline-block;
margin-right: -1px; margin-right: -1px;
} }
.col { .col {
text-align: right; text-align: right;
} }
@ -248,6 +262,7 @@ z-index: 1;
margin-right: 14px; margin-right: 14px;
} }
.columns { .columns {
margin: 3px; margin: 3px;
margin-bottom: 13px; margin-bottom: 13px;
@ -267,6 +282,7 @@ z-index: 1;
letter-spacing: 1px; letter-spacing: 1px;
font-weight: bold; font-weight: bold;
} }
.services { .services {
font-size: 12px; font-size: 12px;
@ -292,9 +308,10 @@ z-index: 1;
margin-right: 0px; margin-right: 0px;
margin-left: 5px; margin-left: 5px;
} }
.child-dote { .child-dote {
background-color: #269DB8; background-color: #BE332F;
width: 15px; width: 15px;
height: 15px; height: 15px;
border-radius: 50% !important; border-radius: 50% !important;
@ -302,8 +319,9 @@ z-index: 1;
margin-left: -17px; margin-left: -17px;
margin-right: 5px; margin-right: 5px;
} }
.child-dote-ar { .child-dote-ar {
background-color: #269DB8; background-color: #BE332F;
width: 15px; width: 15px;
height: 15px; height: 15px;
border-radius: 50% !important; border-radius: 50% !important;
@ -311,6 +329,7 @@ z-index: 1;
margin-right: 1px; margin-right: 1px;
margin-left: 5px; margin-left: 5px;
} }
.infants-dote { .infants-dote {
background-color: #1FA269; background-color: #1FA269;
width: 15px; width: 15px;
@ -331,4 +350,3 @@ z-index: 1;
margin-right: 1px; margin-right: 1px;
margin-left: 5px; margin-left: 5px;
} }

@ -53,7 +53,8 @@ export class EitListComponent implements OnInit {
public options = { public options = {
cutoutPercentage: 80, cutoutPercentage: 80,
tooltips: { enabled: false }, tooltips: { enabled: false },
legend: { display: false }}; legend: { display: false }
};
gaugeType = 'full'; gaugeType = 'full';
accrualBalancesList: any; accrualBalancesList: any;
common: any; common: any;
@ -97,10 +98,11 @@ export class EitListComponent implements OnInit {
this.data = { this.data = {
// labels: ['earingTotal', 'deductionTotal'], // labels: ['earingTotal', 'deductionTotal'],
datasets: [ datasets: [
{ data: [this.accrualNetInfants, this.accrualUNetChild, this.accrualNetAdult], {
data: [this.accrualNetInfants, this.accrualUNetChild, this.accrualNetAdult],
backgroundColor: [ backgroundColor: [
'#1FA269', '#1FA269',
'#269DB8', '#BE332F',
'#3CB9D5',], '#3CB9D5',],
borderWidth: 2 borderWidth: 2
} }

@ -29,7 +29,7 @@
<div *ngFor="let notificationBody of item.Collection_Notification "> <div *ngFor="let notificationBody of item.Collection_Notification ">
<ion-row *ngIf=" notificationBody.DISPLAY_FLAG != 'N' "> <ion-row *ngIf=" notificationBody.DISPLAY_FLAG != 'N' ">
<ion-col class="colBold"> <ion-col class="colBold">
<label style="color:#269DB8;font-weight: bold;" class="label" for="">{{notificationBody.SEGMENT_PROMPT}}</label> <label style="color:#BE332F;font-weight: bold;" class="label" for="">{{notificationBody.SEGMENT_PROMPT}}</label>
<!-- </ion-col> <!-- </ion-col>
<ion-col class="colBold"> --> <ion-col class="colBold"> -->
<br> <br>

@ -4,7 +4,7 @@
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
background-color: #269DB8; background-color: #BE332F;
width: 80% !important; width: 80% !important;
color: white !important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;

@ -13,7 +13,7 @@ ion-item.custCollabs.item.item-block.item-ios {
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
ion-item.item.item-block { ion-item.item.item-block {
@ -25,6 +25,7 @@ ion-item.item.item-block {
ion-item.childItem.item.item-block { ion-item.childItem.item.item-block {
padding: 0px 5px; padding: 0px 5px;
width: 100%; width: 100%;
ion-label.label.label-md, ion-label.label.label-md,
ion-label.label.label-ios { ion-label.label.label-ios {
-webkit-box-shadow: none; -webkit-box-shadow: none;
@ -46,9 +47,11 @@ ion-item.item.item-block {
padding: 0px 10px; padding: 0px 10px;
min-height: 40px; min-height: 40px;
} }
div.notSelected { div.notSelected {
padding: 0px 10px; padding: 0px 10px;
} }
// ion-label.label.label-md, // ion-label.label.label-md,
// ion-label.label.label-ios { // ion-label.label.label-ios {
} }
@ -56,11 +59,13 @@ ion-item.item.item-block {
ion-icon::before { ion-icon::before {
line-height: 2; line-height: 2;
} }
.arrow-down { .arrow-down {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
} }
// .list-md > .item-block:last-child .item-inner, // .list-md > .item-block:last-child .item-inner,
// .list-ios > .item-block:last-child .item-inner{ // .list-ios > .item-block:last-child .item-inner{
@ -86,6 +91,7 @@ ion-icon::before {
font-size: 25px; font-size: 25px;
color: grey; color: grey;
} }
.arrow-forward-ar { .arrow-forward-ar {
float: left; float: left;
font-size: 25px; font-size: 25px;

@ -8,7 +8,8 @@
.Header { .Header {
color: black !important; color: black !important;
font-size: 25px !important; font-size: 25px !important;
font-weight: bold !important;; font-weight: bold !important;
;
margin: 0; margin: 0;
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
@ -32,22 +33,20 @@
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
--background:: #269DB8; --background: #BE332F;
width: 100% !important; width: 100% !important;
color: white !important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
} }
.submitCancelButton { .submitCancelButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
--background:: #269DB8; --background: #BE332F;
width: 100% !important; width: 100% !important;
color: white !important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
} }

@ -27,10 +27,10 @@ export class ConnectorService {
public static retryTimes = 0; public static retryTimes = 0;
public static timeOut = 180 * 1000; public static timeOut = 180 * 1000;
// public static host = 'https://uat.hmgwebservices.com/'; public static host = 'https://uat.hmgwebservices.com/';
// public static host = 'https://hmgwebservices.com/'; // public static host = 'https://hmgwebservices.com/';
// public static host = 'http://riyt-mohemm1:1010/' //MOE // public static host = 'http://riyt-mohemm1:1010/' //MOE
public static host = 'http://riyt-mohemm1.mopm.gov.sa:1010/' // public static host = 'http://riyt-mohemm1.mopm.gov.sa:1010/'
// public static host = 'http://mohemm-app-test.srca.org.sa:1010/' // public static host = 'http://mohemm-app-test.srca.org.sa:1010/'
// public static host = 'http://10.254.212.41:1010/' // public static host = 'http://10.254.212.41:1010/'

@ -2,5 +2,5 @@
<div class="main-container" [ngStyle]="active === true ? {'color': color} : {}"> <div class="main-container" [ngStyle]="active === true ? {'color': color} : {}">
<div class="main-container-radius" [ngStyle]="active === true ? {'color': '#ffffff'} : {'color': color}"></div> <div class="main-container-radius" [ngStyle]="active === true ? {'color': '#ffffff'} : {'color': color}"></div>
<span class="text-span" [ngStyle]="active === true ? {'color': '#269DB8'} : {}">{{text}}</span> <span class="text-span" [ngStyle]="active === true ? {'color': '#BE332F'} : {}">{{text}}</span>
</div> </div>

@ -8,14 +8,14 @@
.navbar { .navbar {
font-size: 10px !important; font-size: 10px !important;
--background: #269DB8 !important; --background: #BE332F !important;
color: aliceblue !important; color: aliceblue !important;
} }
.menu { .menu {
margin-top: 0px !important; margin-top: 0px !important;
font-size: 35px !important; font-size: 35px !important;
background: #269DB8; background: #BE332F;
color: aliceblue; color: aliceblue;
margin-left: 0px !important; margin-left: 0px !important;
@ -25,7 +25,7 @@
margin-left: 100px !important; margin-left: 100px !important;
margin-top: 0px !important; margin-top: 0px !important;
font-size: 23px !important; font-size: 23px !important;
background: #269DB8 !important; background: #BE332F !important;
color: aliceblue !important; color: aliceblue !important;
} }
@ -52,6 +52,7 @@
color: black !important; color: black !important;
} }
.dateLable { .dateLable {
margin-left: 90px !important; margin-left: 90px !important;
@ -59,6 +60,7 @@
font-size: small !important; font-size: small !important;
margin-top: 15px !important; margin-top: 15px !important;
} }
// h1{ // h1{
// font-size: 15px !important; // font-size: 15px !important;
// text-align: center !important; // text-align: center !important;
@ -70,6 +72,7 @@
margin-top: 15px !important; margin-top: 15px !important;
} }
.arrowDropleft { .arrowDropleft {
font-size: 20px !important; font-size: 20px !important;
margin-left: 10px !important; margin-left: 10px !important;
@ -92,7 +95,7 @@
background: var(--primary); background: var(--primary);
background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%, var(--secondary) 59%, var(--customnavy) 100%); background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%, var(--secondary) 59%, var(--customnavy) 100%);
background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%, var(--secondary) 59%, var(--customnavy) 100%); background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%, var(--secondary) 59%, var(--customnavy) 100%);
background: #269DB8; background: #BE332F;
// background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%); // background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%);
color: var(--light); color: var(--light);
text-transform: capitalize; text-transform: capitalize;

@ -7,12 +7,14 @@
display: block; display: block;
text-align: center; text-align: center;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
h2 { h2 {
font-size: 25px; font-size: 25px;
font-weight: bold; font-weight: bold;
margin: 0 auto; margin: 0 auto;
line-height: 36px; line-height: 36px;
} }
span { span {
width: 125px; width: 125px;
display: block; display: block;
@ -61,18 +63,21 @@
color: rgb(163, 163, 163) !important; color: rgb(163, 163, 163) !important;
} }
} }
.today-graph { .today-graph {
display: block; display: block;
height: 127px; height: 127px;
width: 270px; width: 270px;
margin-left: -60px; margin-left: -60px;
} }
.today-graph-ar { .today-graph-ar {
display: block; display: block;
height: 127px; height: 127px;
width: 270px; width: 270px;
margin-right: -70px; margin-right: -70px;
} }
.amountlabel { .amountlabel {
color: black !important; color: black !important;
font-weight: bold !important; font-weight: bold !important;
@ -82,6 +87,7 @@
display: block; display: block;
text-align: center; text-align: center;
} }
.rowlabel { .rowlabel {
color: #a3a3a3 !important; color: #a3a3a3 !important;
font-size: 13px !important; font-size: 13px !important;
@ -91,15 +97,18 @@
text-align: center; text-align: center;
padding: 1px; padding: 1px;
} }
.grid { .grid {
padding-bottom: -20px !important; padding-bottom: -20px !important;
padding-top: -20px !important; padding-top: -20px !important;
height: 360px !important; height: 360px !important;
} }
.liftcol { .liftcol {
border-right: 1px solid rgb(163, 163, 163) !important; border-right: 1px solid rgb(163, 163, 163) !important;
} }
.liftcol-ar { .liftcol-ar {
border-left: 1px solid rgb(163, 163, 163) !important; border-left: 1px solid rgb(163, 163, 163) !important;
@ -110,6 +119,7 @@ height: 360px !important;
margin-left: 5px !important; margin-left: 5px !important;
} }
.gridrow { .gridrow {
border-top: 1px solid rgb(163, 163, 163) !important; border-top: 1px solid rgb(163, 163, 163) !important;
margin-left: 19px; margin-left: 19px;
@ -121,12 +131,14 @@ height: 360px !important;
border-radius: 10px; border-radius: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.div-ar { .div-ar {
border: 1px solid #a3a3a3 !important; border: 1px solid #a3a3a3 !important;
border-radius: 9px; border-radius: 9px;
width: 264%; width: 264%;
margin-right: -302px; margin-right: -302px;
} }
.p0 { .p0 {
margin-bottom: -13px !important; margin-bottom: -13px !important;
color: black !important; color: black !important;
@ -137,6 +149,7 @@ height: 360px !important;
display: block; display: block;
width: 100%; width: 100%;
} }
.p1 { .p1 {
margin-bottom: -7px !important; margin-bottom: -7px !important;
color: black !important; color: black !important;
@ -147,6 +160,7 @@ height: 360px !important;
display: block; display: block;
width: 100%; width: 100%;
} }
.p2 { .p2 {
font-weight: bold !important; font-weight: bold !important;
font-size: 17px !important; font-size: 17px !important;
@ -158,6 +172,7 @@ height: 360px !important;
display: block; display: block;
width: 100%; width: 100%;
} }
.p3 { .p3 {
color: black !important; color: black !important;
font-weight: bold !important; font-weight: bold !important;
@ -168,7 +183,8 @@ height: 360px !important;
width: 100%; width: 100%;
} }
.p2-ar{ font-weight: bold !important; .p2-ar {
font-weight: bold !important;
font-size: 17px !important; font-size: 17px !important;
margin-bottom: 43px !important; margin-bottom: 43px !important;
margin-top: 0px !important; margin-top: 0px !important;
@ -176,22 +192,27 @@ height: 360px !important;
font-weight: bold !important; font-weight: bold !important;
margin-right: 33px; margin-right: 33px;
} }
.p3-ar{ /* margin-bottom: -72px !important; */
.p3-ar {
/* margin-bottom: -72px !important; */
color: black !important; color: black !important;
font-weight: bold !important; font-weight: bold !important;
font-size: 19px; font-size: 19px;
margin-top: -43px; margin-top: -43px;
margin-right: 27px; margin-right: 27px;
} }
.p4{ margin-bottom: 56px !important;
.p4 {
margin-bottom: 56px !important;
margin-top: -26px !important; margin-top: -26px !important;
color: black !important; color: black !important;
} }
// .pdiv{background-color: gray;height: 26px;} // .pdiv{background-color: gray;height: 26px;}
.p5 { .p5 {
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
background-color: #269DB8; background-color: #BE332F;
color: white; color: white;
margin-top: -13px; margin-top: -13px;
margin-bottom: -3px; margin-bottom: -3px;
@ -206,12 +227,13 @@ height: 360px !important;
.slider-container { .slider-container {
padding-bottom: 20px; padding-bottom: 20px;
} }
.col { .col {
border-bottom: 1px solid rgb(204, 204, 204); border-bottom: 1px solid rgb(204, 204, 204);
border-right: 1px solid rgb(204, 204, 204); border-right: 1px solid rgb(204, 204, 204);
} }
.col-ar { .col-ar {
border-bottom: 1px solid rgb(204, 204, 204); border-bottom: 1px solid rgb(204, 204, 204);
border-left: 1px solid rgb(204, 204, 204); border-left: 1px solid rgb(204, 204, 204);
} }

@ -94,7 +94,7 @@ export class DateInfoModalComponent implements OnInit {
{ {
data: [this.percChart], data: [this.percChart],
backgroundColor: [ backgroundColor: [
'#269DB8' '#BE332F'
], ],
borderWidth: 2 borderWidth: 2
}] }]

@ -7,11 +7,12 @@
-ms-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.btnImge { .btnImge {
// button{ // button{
border-color: transparent !important; border-color: transparent !important;
--background: #269DB8 !important; --background: #BE332F !important;
background: #269DB8 !important; background: #BE332F !important;
height: 57px !important; height: 57px !important;
width: 60px !important; width: 60px !important;
@ -19,9 +20,10 @@
// } // }
} }
//test //test
.changeIcon { .changeIcon {
background: #269DB8 !important; background: #BE332F !important;
border-radius: 50% !important; border-radius: 50% !important;
width: 73px; width: 73px;
height: 55px; height: 55px;

@ -6,12 +6,14 @@
border-radius: 100%; border-radius: 100%;
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
img { img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
} }
} }
.ion-title { .ion-title {
color: white; color: white;
font-size: 0.5cm; font-size: 0.5cm;
@ -21,9 +23,11 @@
text-align: center; text-align: center;
line-height: 46px; line-height: 46px;
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.setting-conatainer { .setting-conatainer {
height: 40px !important; height: 40px !important;
width: 40px !important; width: 40px !important;

@ -1,9 +1,10 @@
.float-left { .float-left {
float: left; float: left;
} }
ion-menu-button { ion-menu-button {
font-size: 0.8cm; font-size: 0.8cm;
color: white; color: white;
background: #269DB8; background: #BE332F;
margin: 0 auto; margin: 0 auto;
} }

@ -4,7 +4,7 @@ ion-row {
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.profile-image-container { .profile-image-container {
@ -56,7 +56,7 @@ ion-label {
.contentBg:before { .contentBg:before {
position: absolute; position: absolute;
content: ""; content: "";
background: #269DB8; background: #BE332F;
height: 100px; height: 100px;
width: 100%; width: 100%;
left: 0; left: 0;
@ -101,7 +101,7 @@ ion-label {
ion-button { ion-button {
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
background: #269db8; background: #BE332F;
--background: transparent; --background: transparent;
--box-shadow: none !important; --box-shadow: none !important;
height: auto; height: auto;
@ -149,7 +149,7 @@ ion-label {
// z-index: 2; // z-index: 2;
// height: 112px; // height: 112px;
// width: 112px; // width: 112px;
// background-color: #269DB8; // background-color: #BE332F;
// border-radius: 50%; // border-radius: 50%;
// display: inline-block; // display: inline-block;
// img { // img {

@ -1,7 +1,5 @@
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.contentBg { .contentBg {
@ -11,7 +9,7 @@
.contentBg:before { .contentBg:before {
position: absolute; position: absolute;
content: ""; content: "";
background: #269DB8; background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
@ -32,7 +30,8 @@
border-radius: 20px; border-radius: 20px;
border: 1px solid #ccc; border: 1px solid #ccc;
padding-top: 12px; padding-top: 12px;
}} }
}
@media screen and (min-width: 768px) and (max-width:1024px) { @media screen and (min-width: 768px) and (max-width:1024px) {
.result-graph { .result-graph {
@ -47,11 +46,13 @@
border-radius: 20px; border-radius: 20px;
border: 1px solid #ccc; border: 1px solid #ccc;
padding-top: 114px !important; padding-top: 114px !important;
}} }
}
.user-info { .user-info {
text-align: center; text-align: center;
margin-bottom: 3px; margin-bottom: 3px;
.user-image-container { .user-image-container {
position: relative; position: relative;
width: 100%; width: 100%;
@ -60,7 +61,8 @@
display: flex; display: flex;
margin: 0 auto; margin: 0 auto;
align-items: center; align-items: center;
}} }
}
.Boldtext { .Boldtext {
font-size: 13px; font-size: 13px;
@ -85,10 +87,12 @@
margin-bottom: 15px; margin-bottom: 15px;
border-radius: 20px; border-radius: 20px;
border: 1px solid #ccc; border: 1px solid #ccc;
ion-col { ion-col {
padding: 15px; padding: 15px;
// border-bottom: 1px solid #ccc; // border-bottom: 1px solid #ccc;
} }
h2 { h2 {
font-size: 13px; font-size: 13px;
// font-family: WorkSans-Bold; // font-family: WorkSans-Bold;
@ -96,6 +100,7 @@
font-weight: bold; font-weight: bold;
color: rgb(128, 124, 124); color: rgb(128, 124, 124);
} }
p { p {
font-size: 13px; font-size: 13px;
margin: 0; margin: 0;
@ -114,7 +119,9 @@
/* border: 1px solid #ccc; */ /* border: 1px solid #ccc; */
margin-top: -125px; margin-top: -125px;
}} }
}
@media screen and (min-width: 768px) and (max-width:1024px) { @media screen and (min-width: 768px) and (max-width:1024px) {
.user-image { .user-image {
position: relative; position: relative;
@ -123,7 +130,8 @@
height: 100%; height: 100%;
border-radius: 80px; border-radius: 80px;
margin-bottom: 371px; margin-bottom: 371px;
}} }
}
.img { .img {
width: 100px; width: 100px;
@ -137,7 +145,7 @@
} }
.sendCodeBtn { .sendCodeBtn {
--background: #269DB8; --background: #BE332F;
color: white; color: white;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -186,6 +194,7 @@ ion-input {
transition: all .2s ease-in-out; transition: all .2s ease-in-out;
border-radius: 3px; border-radius: 3px;
display: inline-block; display: inline-block;
&:focus { &:focus {
border-color: var(--ion-color-secondary) !important; border-color: var(--ion-color-secondary) !important;
box-shadow: 0 0 5px var(--ion-color-secondary) !important; box-shadow: 0 0 5px var(--ion-color-secondary) !important;
@ -197,7 +206,7 @@ ion-input {
} }
.sendVerifyBtn { .sendVerifyBtn {
--background: #269DB8; --background: #BE332F;
color: white; color: white;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -221,7 +230,8 @@ ion-input {
border-color: #dcdcdc; border-color: #dcdcdc;
margin-top: 6px !important; margin-top: 6px !important;
border-color: #d8d4d4 !important; border-color: #d8d4d4 !important;
margin-bottom: 18px;} margin-bottom: 18px;
}
.text-label { .text-label {
color: black !important; color: black !important;
@ -229,7 +239,8 @@ ion-input {
margin-left: 2px; margin-left: 2px;
margin-right: 2px; margin-right: 2px;
font-family: 'WorkSans-Bold'; font-family: 'WorkSans-Bold';
} } }
}
@media screen and (min-width: 325px) { @media screen and (min-width: 325px) {
.custom-radio .radio-icon { .custom-radio .radio-icon {
@ -240,7 +251,8 @@ ion-input {
border-color: #dcdcdc; border-color: #dcdcdc;
margin-top: 6px !important; margin-top: 6px !important;
border-color: #d8d4d4 !important; border-color: #d8d4d4 !important;
margin-bottom: 18px;} margin-bottom: 18px;
}
.text-label { .text-label {
color: black !important; color: black !important;
@ -248,7 +260,8 @@ ion-input {
margin-left: 15px; margin-left: 15px;
margin-right: 13px; margin-right: 13px;
font-family: 'WorkSans-Bold'; font-family: 'WorkSans-Bold';
} } }
}
// .radio-list{ // .radio-list{
// background: white; // background: white;
@ -301,6 +314,7 @@ ion-input {
font-size: 13px; font-size: 13px;
text-align: start; text-align: start;
} }
.filedDesc-ar { .filedDesc-ar {
border-radius: 30px; border-radius: 30px;
border: 1px solid #d3d5d5 !important; border: 1px solid #d3d5d5 !important;
@ -413,7 +427,8 @@ ion-input {
font-family: 'WorkSans-bold'; font-family: 'WorkSans-bold';
font-size: 16px; font-size: 16px;
min-height: 1.0cm; min-height: 1.0cm;
--background: #19a163 !important;} --background: #19a163 !important;
}
.filed-container { .filed-container {
@ -442,6 +457,7 @@ ion-input {
--min-height: 1.6cm !important; --min-height: 1.6cm !important;
width: 315px; width: 315px;
} }
.footer { .footer {
padding: 15px 0px 0px 0px; padding: 15px 0px 0px 0px;
background-color: var(--light) !important; background-color: var(--light) !important;
@ -449,9 +465,13 @@ ion-input {
box-shadow: none !important; box-shadow: none !important;
-webkit-box-shadow: none; -webkit-box-shadow: none;
} }
.Btn { .Btn {
margin: auto; text-align: center; display: block; margin: auto;
text-align: center;
display: block;
} }
.footer2 { .footer2 {
padding: 15px 0px 0px 24px; padding: 15px 0px 0px 24px;
background-color: var(--light) !important; background-color: var(--light) !important;
@ -464,13 +484,16 @@ ion-input {
--background: #259CB8; --background: #259CB8;
width: 80%; width: 80%;
} }
@media screen and (min-width: 325px) { @media screen and (min-width: 325px) {
.fileUpload { .fileUpload {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
margin: 10px; margin: 10px;
margin-left: -233px; margin-left: -233px;
}} }
}
@media screen and (min-width: 1px) and (max-width:320px) { @media screen and (min-width: 1px) and (max-width:320px) {
.fileUpload { .fileUpload {
position: relative; position: relative;
@ -478,7 +501,8 @@ ion-input {
margin: 10px; margin: 10px;
margin-left: -158px; margin-left: -158px;
}} }
}
.fileUpload input.upload { .fileUpload input.upload {
position: absolute; position: absolute;
@ -527,6 +551,7 @@ select option[data-default] {
.button-native { .button-native {
box-shadow: none !important; box-shadow: none !important;
} }
.gridAH { .gridAH {
text-align: justify; text-align: justify;
} }

@ -1,11 +1,11 @@
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
ion-content { ion-content {
--ion-background-color: whitesmoke; --ion-background-color: whitesmoke;
} }
.contentBg { .contentBg {
padding: 0px 20px; padding: 0px 20px;
} }
@ -13,7 +13,7 @@
.contentBg:before { .contentBg:before {
position: absolute; position: absolute;
content: ""; content: "";
background: #269DB8; background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
@ -34,7 +34,8 @@
border-radius: 20px; border-radius: 20px;
border: 1px solid #ccc; border: 1px solid #ccc;
padding-top: 12px; padding-top: 12px;
}} }
}
@media screen and (min-width: 768px) and (max-width:1024px) { @media screen and (min-width: 768px) and (max-width:1024px) {
.result-graph { .result-graph {
@ -49,11 +50,13 @@
border-radius: 20px; border-radius: 20px;
border: 1px solid #ccc; border: 1px solid #ccc;
padding-top: 114px !important; padding-top: 114px !important;
}} }
}
.user-info { .user-info {
text-align: center; text-align: center;
margin-bottom: 3px; margin-bottom: 3px;
.user-image-container { .user-image-container {
position: relative; position: relative;
width: 100%; width: 100%;
@ -62,7 +65,8 @@
display: flex; display: flex;
margin: 0 auto; margin: 0 auto;
align-items: center; align-items: center;
}} }
}
.Boldtext { .Boldtext {
// font-size: 13px; // font-size: 13px;
@ -79,6 +83,7 @@
line-height: 19px; line-height: 19px;
} }
.p { .p {
text-align: center; text-align: center;
// font: normal normal 600 13px/0px Poppins; // font: normal normal 600 13px/0px Poppins;
@ -89,6 +94,7 @@
font-size: 13px; font-size: 13px;
line-height: 0px; line-height: 0px;
} }
.p1 { .p1 {
text-align: center; text-align: center;
// font: normal normal 600 13px/6px Poppins; // font: normal normal 600 13px/6px Poppins;
@ -99,6 +105,7 @@
color: #A2A2A2; color: #A2A2A2;
opacity: 1; opacity: 1;
} }
.Nametext { .Nametext {
// font-size: 15px; // font-size: 15px;
// font-family: WorkSans-Bold; // font-family: WorkSans-Bold;
@ -146,10 +153,12 @@
// margin-bottom: 15px; // margin-bottom: 15px;
border-radius: 20px; border-radius: 20px;
border: 1px solid #ccc; border: 1px solid #ccc;
ion-col { ion-col {
padding: 15px; padding: 15px;
// border-bottom: 1px solid #ccc; // border-bottom: 1px solid #ccc;
} }
h2 { h2 {
// font-size: 13px; // font-size: 13px;
// margin: 0; // margin: 0;
@ -163,6 +172,7 @@
color: #A2A2A2; color: #A2A2A2;
opacity: 1; opacity: 1;
} }
p { p {
// font-size: 13px; // font-size: 13px;
// margin: 0; // margin: 0;
@ -189,10 +199,12 @@
// margin-bottom: 15px; // margin-bottom: 15px;
border-radius: 20px; border-radius: 20px;
border: 1px solid #ccc; border: 1px solid #ccc;
ion-col { ion-col {
padding: 15px; padding: 15px;
// border-bottom: 1px solid #ccc; // border-bottom: 1px solid #ccc;
} }
h2 { h2 {
// font-size: 13px; // font-size: 13px;
// margin: 0; // margin: 0;
@ -206,6 +218,7 @@
color: #A2A2A2; color: #A2A2A2;
opacity: 1; opacity: 1;
} }
p { p {
// font-size: 13px; // font-size: 13px;
// margin: 0; // margin: 0;
@ -234,7 +247,9 @@
/* border: 1px solid #ccc; */ /* border: 1px solid #ccc; */
margin-top: -125px; margin-top: -125px;
}} }
}
@media screen and (min-width: 768px) and (max-width:1024px) { @media screen and (min-width: 768px) and (max-width:1024px) {
.user-image { .user-image {
position: relative; position: relative;
@ -243,7 +258,8 @@
height: 100%; height: 100%;
border-radius: 80px; border-radius: 80px;
margin-bottom: 371px; margin-bottom: 371px;
}} }
}
.img { .img {
width: 100px; width: 100px;
@ -257,7 +273,7 @@
} }
.sendCodeBtn { .sendCodeBtn {
--background: #269DB8; --background: #BE332F;
color: white; color: white;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -306,6 +322,7 @@ ion-input {
transition: all .2s ease-in-out; transition: all .2s ease-in-out;
border-radius: 3px; border-radius: 3px;
display: inline-block; display: inline-block;
&:focus { &:focus {
border-color: var(--ion-color-secondary) !important; border-color: var(--ion-color-secondary) !important;
box-shadow: 0 0 5px var(--ion-color-secondary) !important; box-shadow: 0 0 5px var(--ion-color-secondary) !important;
@ -317,7 +334,7 @@ ion-input {
} }
.sendVerifyBtn { .sendVerifyBtn {
--background: #269DB8; --background: #BE332F;
color: white; color: white;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -340,7 +357,8 @@ ion-input {
border-color: #dcdcdc; border-color: #dcdcdc;
margin-top: 6px !important; margin-top: 6px !important;
border-color: #d8d4d4 !important; border-color: #d8d4d4 !important;
margin-bottom: 18px;} margin-bottom: 18px;
}
.text-label { .text-label {
color: black !important; color: black !important;
@ -390,6 +408,7 @@ ion-input {
// padding-right: 252px; // padding-right: 252px;
padding-right: 115px; padding-right: 115px;
} }
.filed2 { .filed2 {
border-radius: 30px; border-radius: 30px;
border: 1px solid #d3d5d5 !important; border: 1px solid #d3d5d5 !important;
@ -401,6 +420,7 @@ ion-input {
// padding-right: 252px; // padding-right: 252px;
padding-right: 153px; padding-right: 153px;
} }
.filed3 { .filed3 {
border-radius: 30px; border-radius: 30px;
border: 1px solid #d3d5d5 !important; border: 1px solid #d3d5d5 !important;
@ -412,6 +432,7 @@ ion-input {
// padding-right: 252px; // padding-right: 252px;
padding-right: 61px; padding-right: 61px;
} }
.filedDesc { .filedDesc {
border-radius: 30px; border-radius: 30px;
border: 1px solid #d3d5d5 !important; border: 1px solid #d3d5d5 !important;
@ -423,6 +444,7 @@ ion-input {
font-size: 13px; font-size: 13px;
text-align: start; text-align: start;
} }
.filedDesc-ar { .filedDesc-ar {
border-radius: 30px; border-radius: 30px;
border: 1px solid #d3d5d5 !important; border: 1px solid #d3d5d5 !important;
@ -525,7 +547,8 @@ ion-input {
color: white; color: white;
// margin-left: 15px; // margin-left: 15px;
// margin-right: 5px; // margin-right: 5px;
font-family: 'WorkSans-bold';} font-family: 'WorkSans-bold';
}
.filed-container { .filed-container {
@ -542,7 +565,8 @@ ion-input {
font-family: 'WorkSans-Bold'; font-family: 'WorkSans-Bold';
} }
@media screen and (min-width: 325px) { .CreateBtn{ @media screen and (min-width: 325px) {
.CreateBtn {
--background: var(--newgreen) !important; --background: var(--newgreen) !important;
background: var(--newgreen) !important; background: var(--newgreen) !important;
white-space: normal; white-space: normal;
@ -554,7 +578,9 @@ ion-input {
--min-height: 1.6cm !important; --min-height: 1.6cm !important;
width: 315px; width: 315px;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
}} }
}
@media screen and (min-width: 1px) and (max-width:320px) { @media screen and (min-width: 1px) and (max-width:320px) {
.CreateBtn { .CreateBtn {
--background: var(--newgreen) !important; --background: var(--newgreen) !important;
@ -568,7 +594,8 @@ ion-input {
--min-height: 1.6cm !important; --min-height: 1.6cm !important;
width: 231px; width: 231px;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
}} }
}
.footer { .footer {
@ -578,9 +605,13 @@ ion-input {
box-shadow: none !important; box-shadow: none !important;
-webkit-box-shadow: none; -webkit-box-shadow: none;
} }
.Btn { .Btn {
margin: auto; text-align: center; display: block; margin: auto;
text-align: center;
display: block;
} }
.footer2 { .footer2 {
padding: 15px 0px 0px 24px; padding: 15px 0px 0px 24px;
background-color: var(--light) !important; background-color: var(--light) !important;
@ -600,6 +631,7 @@ ion-input {
margin: 10px; margin: 10px;
margin-left: -233px; margin-left: -233px;
} }
.fileUpload input.upload { .fileUpload input.upload {
position: absolute; position: absolute;
top: 0; top: 0;

@ -1,10 +1,9 @@
ion-content { ion-content {
--ion-background-color: whitesmoke; --ion-background-color: whitesmoke;
} }
.sendCodeBtn { .sendCodeBtn {
--background: #269DB8; --background: #BE332F;
color: white; color: white;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -27,6 +26,7 @@
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
margin: 50px 0px 0px 100px; margin: 50px 0px 0px 100px;
} }
.empty-ar { .empty-ar {
color: black; color: black;
text-align: center; text-align: center;
@ -63,6 +63,7 @@
border-radius: 10px; border-radius: 10px;
opacity: 1; opacity: 1;
} }
.text { .text {
text-align: left; text-align: left;
/* font-family: var(--fontFamilyPoppins-Medium, inherit); */ /* font-family: var(--fontFamilyPoppins-Medium, inherit); */
@ -86,13 +87,15 @@
opacity: 1; opacity: 1;
} }
@media screen and (min-width: 1px) and (max-width:320px) { @media screen and (min-width: 1px) and (max-width:320px) {
.date { .date {
// margin-right: -38px; // margin-right: -38px;
color: gray; color: gray;
font-size: 12px; font-size: 12px;
margin-left: -44px; margin-left: -44px;
}} }
}
@media screen and (min-width: 325px) { @media screen and (min-width: 325px) {
.date { .date {
@ -100,7 +103,8 @@
margin-right: -49px; margin-right: -49px;
color: gray; color: gray;
font-size: 12px; font-size: 12px;
}} }
}
@media screen and (min-width: 1px) and (max-width:320px) { @media screen and (min-width: 1px) and (max-width:320px) {
.date-ar { .date-ar {
@ -108,7 +112,8 @@
color: gray; color: gray;
font-size: 10px; font-size: 10px;
margin-left: 58px; margin-left: 58px;
}} }
}
@media screen and (min-width: 325px) { @media screen and (min-width: 325px) {
.date-ar { .date-ar {
@ -116,7 +121,8 @@
margin-right: -49px; margin-right: -49px;
color: gray; color: gray;
font-size: 12px; font-size: 12px;
}} }
}
.labels { .labels {
// font-size: 13px; // font-size: 13px;
@ -135,6 +141,7 @@
opacity: 1; opacity: 1;
padding-bottom: 3px; padding-bottom: 3px;
} }
.labels-ar { .labels-ar {
// font-size: 13px; // font-size: 13px;
// margin-bottom: 0px; // margin-bottom: 0px;
@ -152,6 +159,7 @@
opacity: 1; opacity: 1;
padding-bottom: 3px; padding-bottom: 3px;
} }
.request-list-container { .request-list-container {
position: relative; position: relative;
padding-left: 37px; padding-left: 37px;
@ -159,6 +167,7 @@
min-height: 200px; min-height: 200px;
padding-top: 15px; padding-top: 15px;
} }
.request-list-container:before { .request-list-container:before {
content: ""; content: "";
position: absolute; position: absolute;
@ -168,6 +177,7 @@
top: 15px; top: 15px;
background-color: #f5f4f4; background-color: #f5f4f4;
} }
.request-list-container-ar { .request-list-container-ar {
position: relative; position: relative;
padding-left: 60px; padding-left: 60px;
@ -176,6 +186,7 @@
// margin-bottom: 80px; // margin-bottom: 80px;
padding-top: 15px; padding-top: 15px;
} }
.request-list-container-ar:before { .request-list-container-ar:before {
content: ""; content: "";
position: absolute; position: absolute;
@ -198,6 +209,7 @@
line-height: 25px; line-height: 25px;
font-size: 16px; font-size: 16px;
} }
.text-span:before { .text-span:before {
content: ""; content: "";
position: absolute; position: absolute;
@ -205,7 +217,7 @@
border-radius: 50%; border-radius: 50%;
width: 15px; width: 15px;
height: 15px; height: 15px;
background-color: #269db8; background-color: #BE332F;
top: 1px; top: 1px;
} }
@ -221,6 +233,7 @@
font-size: 16px; font-size: 16px;
margin-right: 37px; margin-right: 37px;
} }
.text-span-ar:before { .text-span-ar:before {
content: ""; content: "";
position: absolute; position: absolute;
@ -228,7 +241,7 @@
border-radius: 50%; border-radius: 50%;
width: 15px; width: 15px;
height: 15px; height: 15px;
background-color: #269db8; background-color: #BE332F;
top: 1px; top: 1px;
} }
@ -240,6 +253,7 @@
// padding-left: 15px; // padding-left: 15px;
margin-right: 20px; margin-right: 20px;
margin-bottom: 15px; margin-bottom: 15px;
p { p {
// font-size: 14px; // font-size: 14px;
text-align: left; text-align: left;
@ -261,6 +275,7 @@
// padding-left: 15px; // padding-left: 15px;
margin-right: 20px; margin-right: 20px;
margin-bottom: 15px; margin-bottom: 15px;
p { p {
// font-size: 14px; // font-size: 14px;
text-align: right; text-align: right;
@ -273,6 +288,7 @@
font-size: 13px; font-size: 13px;
} }
} }
.date-span { .date-span {
text-align: right; text-align: right;
@ -285,6 +301,7 @@
color: #A2A2A2; color: #A2A2A2;
opacity: 1; opacity: 1;
} }
// @media screen and (min-width: 325px){ // @media screen and (min-width: 325px){
// .date-span{ // .date-span{
// font-size: 13px; // font-size: 13px;
@ -329,28 +346,43 @@
font-family: 'WorkSans-bold'; font-family: 'WorkSans-bold';
} }
.ReOpen{ margin-top: 5px; .ReOpen {
margin-top: 5px;
color: #1FA169; color: #1FA169;
} }
.AssToManager{ margin-top: 5px;
.AssToManager {
margin-top: 5px;
color: #259CB8; color: #259CB8;
} }
.AssToSpec{ margin-top: 5px;
.AssToSpec {
margin-top: 5px;
color: #259CB8; color: #259CB8;
} }
.Pending{ margin-top: 5px;
.Pending {
margin-top: 5px;
color: #E29D03; color: #E29D03;
} }
.BackToSpec{ margin-top: 5px;
.BackToSpec {
margin-top: 5px;
color: #3A476E; color: #3A476E;
} }
.Closed{ margin-top: 5px;
.Closed {
margin-top: 5px;
color: #CA3332; color: #CA3332;
} }
.BackToManager{ margin-top: 5px;
.BackToManager {
margin-top: 5px;
color: #3A476E; color: #3A476E;
} }
.AssignedToHR{ margin-top: 5px;
.AssignedToHR {
margin-top: 5px;
color: #259CB8; color: #259CB8;
} }
@ -371,8 +403,9 @@
// font-weight: 600; // font-weight: 600;
line-height: 16px; line-height: 16px;
font-size: 10px; font-size: 10px;
color: #269db8; color: #BE332F;
} }
.postedDate { .postedDate {
text-align: left !important; text-align: left !important;
// font-weight: 600; // font-weight: 600;
@ -383,6 +416,7 @@
color: #969696 !important; color: #969696 !important;
opacity: 1 !important; opacity: 1 !important;
} }
.DescrText { .DescrText {
text-align: left; text-align: left;
// font: normal normal medium 13px/18px Poppins; // font: normal normal medium 13px/18px Poppins;
@ -394,6 +428,7 @@
line-height: 5px; line-height: 5px;
font-size: 13px; font-size: 13px;
} }
.DescrText-ar { .DescrText-ar {
text-align: right; text-align: right;
// font: normal normal medium 13px/18px Poppins; // font: normal normal medium 13px/18px Poppins;
@ -405,10 +440,10 @@
line-height: 5px; line-height: 5px;
font-size: 13px; font-size: 13px;
} }
.div { .div {
position: relative; position: relative;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: -12px; margin-bottom: -12px;
} }

@ -1,6 +1,7 @@
ion-content { ion-content {
--ion-background-color: whitesmoke; --ion-background-color: whitesmoke;
} }
ion-title { ion-title {
color: white; color: white;
position: absolute; position: absolute;
@ -13,6 +14,7 @@ ion-title{
height: 100%; height: 100%;
font-family: WorkSans-Regular; font-family: WorkSans-Regular;
} }
.contentBg { .contentBg {
padding: 0px 20px; padding: 0px 20px;
} }
@ -20,7 +22,7 @@ ion-title{
.contentBg:before { .contentBg:before {
position: absolute; position: absolute;
content: ""; content: "";
background: #269DB8; background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
@ -31,6 +33,7 @@ ion-title{
.user-info { .user-info {
text-align: center; text-align: center;
margin-bottom: 15px; margin-bottom: 15px;
.user-image-container { .user-image-container {
position: relative; position: relative;
width: 100%; width: 100%;
@ -40,6 +43,7 @@ ion-title{
margin: 0 auto; margin: 0 auto;
align-items: center; align-items: center;
} }
// position: relative; // position: relative;
// width: 80px; // width: 80px;
// height: 80px; // height: 80px;
@ -72,7 +76,9 @@ ion-title{
/* border: 1px solid #ccc; */ /* border: 1px solid #ccc; */
margin-top: -125px; margin-top: -125px;
}} }
}
@media screen and (min-width: 768px) and (max-width:1024px) { @media screen and (min-width: 768px) and (max-width:1024px) {
.user-image { .user-image {
position: relative; position: relative;
@ -81,7 +87,9 @@ ion-title{
height: 100%; height: 100%;
border-radius: 80px; border-radius: 80px;
margin-bottom: 371px; margin-bottom: 371px;
}} }
}
h1 { h1 {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -89,6 +97,7 @@ ion-title{
font-size: 18px; font-size: 18px;
margin-bottom: 4px; margin-bottom: 4px;
} }
span { span {
font-size: 12px; font-size: 12px;
display: block; display: block;
@ -97,12 +106,15 @@ ion-title{
} }
$actionBtnSize : 36px; $actionBtnSize : 36px;
.user-actions { .user-actions {
text-align: center; text-align: center;
margin-left: 1px; margin-left: 1px;
.action-button { .action-button {
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
// white-space: nowrap; // white-space: nowrap;
// color: #888; // color: #888;
.action-button-icon { .action-button-icon {
@ -111,15 +123,17 @@ ion-title{
border-radius: $actionBtnSize; border-radius: $actionBtnSize;
margin: 0 auto; margin: 0 auto;
display: block; display: block;
background-color: #269DB8; background-color: #BE332F;
line-height: $actionBtnSize; line-height: $actionBtnSize;
margin-bottom: 3px; margin-bottom: 3px;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
display: flex; display: flex;
img { img {
margin: 0 auto; margin: 0 auto;
vertical-align: middle; vertical-align: middle;
} }
.span { .span {
font-size: 10px; font-size: 10px;
display: block; display: block;
@ -135,6 +149,7 @@ ion-title{
border-radius: 20px; border-radius: 20px;
opacity: 1; opacity: 1;
} }
// .employee-information-indetail{ // .employee-information-indetail{
// background: white; // background: white;
// margin-top: 15px; // margin-top: 15px;
@ -181,14 +196,15 @@ ion-title{
// margin-right: 22px; // margin-right: 22px;
// margin-left: 22px; // margin-left: 22px;
margin-left: 19px; margin-left: 19px;
background-color: #269DB8; background-color: #BE332F;
display: flex; display: flex;
} }
} }
@media screen and (min-width: 768px) and (max-width:1024px) { @media screen and (min-width: 768px) and (max-width:1024px) {
.active-Segment { .active-Segment {
background: #269DB8 !important; background: #BE332F !important;
// padding-left: 17px; // padding-left: 17px;
// display: flex; // display: flex;
width: 11%; width: 11%;
@ -204,7 +220,8 @@ ion-title{
// margin-left: 14px; // margin-left: 14px;
display: flex; display: flex;
}} }
}
@media screen and (min-width: 1px) and (max-width:767px) { @media screen and (min-width: 1px) and (max-width:767px) {
.normal-Segment { .normal-Segment {
@ -223,6 +240,7 @@ ion-title{
} }
} }
@media screen and (min-width: 768px) and (max-width:1024px) { @media screen and (min-width: 768px) and (max-width:1024px) {
.normal-Segment { .normal-Segment {
width: 11%; width: 11%;
@ -238,7 +256,8 @@ ion-title{
// margin-left: 14px; // margin-left: 14px;
background: #414040 !important; background: #414040 !important;
display: flex; display: flex;
}} }
}
@ -252,21 +271,27 @@ ion-title{
margin: auto; margin: auto;
height: 18px; height: 18px;
display: flex; display: flex;
}} }
}
@media screen and (min-width: 768px) and (max-width:1024px) { @media screen and (min-width: 768px) and (max-width:1024px) {
.imgSize{position: absolute; .imgSize {
position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 2px; left: 2px;
margin: auto; margin: auto;
height: 28px; height: 28px;
display: flex;}} display: flex;
}
}
.colum-container { .colum-container {
padding: 15px; padding: 15px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
.img { .img {
width: 100px; width: 100px;
height: 100px; height: 100px;
@ -278,6 +303,7 @@ ion-title{
background: transparent; background: transparent;
margin-left: -3px; margin-left: -3px;
} }
///////////////////////// Team Members css //////////////////////@extend ///////////////////////// Team Members css //////////////////////@extend
.filters-row { .filters-row {
@ -285,11 +311,13 @@ ion-title{
} }
.search-dropdown { .search-dropdown {
background: #269DB8; background: #BE332F;
ion-select { ion-select {
.select-text { .select-text {
margin-left: -10px; margin-left: -10px;
} }
.select-icon { .select-icon {
.select-icon-inner { .select-icon-inner {
opacity: 1; opacity: 1;
@ -302,6 +330,7 @@ ion-title{
.input-container { .input-container {
background: white; background: white;
ion-input { ion-input {
border-bottom-color: transparent; border-bottom-color: transparent;
} }
@ -309,17 +338,20 @@ ion-title{
.search-container { .search-container {
margin-top: 15px; margin-top: 15px;
ion-col { ion-col {
background: white; background: white;
border-radius: 12px; border-radius: 12px;
padding-right: 10px; padding-right: 10px;
flex: none; flex: none;
ion-icon { ion-icon {
margin-right: 3px; margin-right: 3px;
font-size: 14px; font-size: 14px;
margin-left: 3px; margin-left: 3px;
vertical-align: middle; vertical-align: middle;
} }
span { span {
font-size: 12px; font-size: 12px;
vertical-align: middle; vertical-align: middle;
@ -344,11 +376,13 @@ ion-title{
margin-top: -1px; margin-top: -1px;
margin-left: 43px; margin-left: 43px;
} }
.activeArrow { .activeArrow {
height: 20px; height: 20px;
width: 20px; width: 20px;
color: #269DB8; color: #BE332F;
} }
.disabledArrow { .disabledArrow {
height: 20px; height: 20px;
width: 20px; width: 20px;
@ -358,9 +392,10 @@ ion-title{
.activeArrow-ar { .activeArrow-ar {
height: 20px; height: 20px;
width: 20px; width: 20px;
color: #269DB8; color: #BE332F;
margin-right: 275px; margin-right: 275px;
} }
.disabledArrow-ar { .disabledArrow-ar {
height: 20px; height: 20px;
width: 20px; width: 20px;
@ -382,7 +417,8 @@ ion-title{
border-radius: 20px; border-radius: 20px;
border: 1px solid #ccc; border: 1px solid #ccc;
padding-top: 12px; padding-top: 12px;
}} }
}
@media screen and (min-width: 768px) and (max-width:1024px) { @media screen and (min-width: 768px) and (max-width:1024px) {
.result-graph { .result-graph {
@ -397,7 +433,9 @@ ion-title{
border-radius: 20px; border-radius: 20px;
border: 1px solid #ccc; border: 1px solid #ccc;
padding-top: 114px !important; padding-top: 114px !important;
}} }
}
.result-graph-attendence { .result-graph-attendence {
position: relative; position: relative;
background: white; background: white;
@ -418,6 +456,7 @@ ion-title{
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 10px; margin-left: 10px;
} }
.request-heading-ar { .request-heading-ar {
text-align: right; text-align: right;
display: block; display: block;
@ -435,12 +474,14 @@ ion-title{
display: block; display: block;
text-align: center; text-align: center;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
h2 { h2 {
font-size: 38px; font-size: 38px;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
margin: 0 auto; margin: 0 auto;
line-height: 36px; line-height: 36px;
} }
span { span {
width: 125px; width: 125px;
display: block; display: block;
@ -449,6 +490,7 @@ ion-title{
font-family: workSans-Regular; font-family: workSans-Regular;
} }
} }
@media screen and (min-width: 325px) { @media screen and (min-width: 325px) {
.today-graph { .today-graph {
// width: 100%; // width: 100%;
@ -457,7 +499,9 @@ ion-title{
height: 132px; height: 132px;
width: 264px; width: 264px;
margin-left: 154px; margin-left: 154px;
}} }
}
@media screen and (min-width: 1px) and (max-width:320px) { @media screen and (min-width: 1px) and (max-width:320px) {
.today-graph { .today-graph {
// width: 100%; // width: 100%;
@ -466,7 +510,8 @@ ion-title{
height: 132px; height: 132px;
width: 264px; width: 264px;
margin-left: 84px; margin-left: 84px;
}} }
}
.today-graph-ar { .today-graph-ar {
max-height: 4cm; max-height: 4cm;
@ -511,6 +556,7 @@ ion-title{
line-height: 11px !important; line-height: 11px !important;
display: block; display: block;
} }
h2 { h2 {
font-size: 25px; font-size: 25px;
font-weight: bold; font-weight: bold;
@ -549,6 +595,7 @@ ion-title{
font-size: 10px; font-size: 10px;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
} }
span { span {
font-size: 10px; font-size: 10px;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
@ -571,31 +618,39 @@ ion-title{
// } // }
} }
@media screen and (min-width: 325px) { @media screen and (min-width: 325px) {
.statsIcon { .statsIcon {
background: white; background: white;
margin-left: 12px; margin-left: 12px;
margin-top: 6px; margin-top: 6px;
}} }
}
@media screen and (min-width: 1px) and (max-width:320px) { @media screen and (min-width: 1px) and (max-width:320px) {
.statsIcon { .statsIcon {
background: white; background: white;
margin-left: -15px; margin-left: -15px;
margin-top: 6px; margin-top: 6px;
}} }
}
@media screen and (min-width: 325px) { @media screen and (min-width: 325px) {
.statsIcon-ar { .statsIcon-ar {
background: white; background: white;
// margin-left: 12px; // margin-left: 12px;
margin-top: 6px; margin-top: 6px;
}} }
}
@media screen and (min-width: 1px) and (max-width:320px) { @media screen and (min-width: 1px) and (max-width:320px) {
.statsIcon-ar { .statsIcon-ar {
background: white; background: white;
margin-right: -2px; margin-right: -2px;
margin-top: 6px; margin-top: 6px;
}} }
}
.month-year-span { .month-year-span {
font-size: 16px; font-size: 16px;
// font-family: WorkSans-Bold; // font-family: WorkSans-Bold;
@ -603,14 +658,14 @@ ion-title{
} }
.green-label-container { .green-label-container {
// border-top: 5px solid #269DB8; // border-top: 5px solid #BE332F;
// padding: 1px 0px; // padding: 1px 0px;
// margin: 15px 0px // margin: 15px 0px
width: 12px; width: 12px;
height: 12px; height: 12px;
padding-right: -10px; padding-right: -10px;
border-radius: 100%; border-radius: 100%;
background-color: #269DB8; background-color: #BE332F;
} }
@ -625,6 +680,7 @@ ion-title{
background-color: #292F42; background-color: #292F42;
margin-top: 30px; margin-top: 30px;
} }
.span-one { .span-one {
// display: block; // display: block;
// font-size: 12px; // font-size: 12px;
@ -637,6 +693,7 @@ ion-title{
font-weight: bold; font-weight: bold;
} }
.span-two { .span-two {
// display: block; // display: block;
// font-size: 22px; // font-size: 22px;
@ -662,6 +719,7 @@ ion-title{
font-weight: bold; font-weight: bold;
} }
.spa-two { .spa-two {
// display: block; // display: block;
// font-size: 22px; // font-size: 22px;
@ -674,6 +732,7 @@ ion-title{
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
} }
.graph-container { .graph-container {
margin-left: -50px; margin-left: -50px;
position: relative; position: relative;
@ -685,6 +744,7 @@ ion-title{
position: relative; position: relative;
margin-left: 50px; margin-left: 50px;
} }
.label-container { .label-container {
position: absolute; position: absolute;
// width: 20%; // width: 20%;
@ -694,6 +754,7 @@ ion-title{
left: 20px; left: 20px;
} }
@media screen and (min-width: 325px) { @media screen and (min-width: 325px) {
.attendance-summary .attendance-information { .attendance-summary .attendance-information {
span { span {
@ -701,6 +762,7 @@ ion-title{
display: block; display: block;
line-height: 14px; line-height: 14px;
} }
h2 { h2 {
// text-align: right; // text-align: right;
// font-family: WorkSans-Bold; // font-family: WorkSans-Bold;
@ -708,7 +770,9 @@ ion-title{
font-size: 13px; font-size: 13px;
} }
}} }
}
@media screen and (min-width: 1px) and (max-width:320px) { @media screen and (min-width: 1px) and (max-width:320px) {
.attendance-summary .attendance-information { .attendance-summary .attendance-information {
span { span {
@ -717,6 +781,7 @@ ion-title{
line-height: 7px; line-height: 7px;
font-size: 7px; font-size: 7px;
} }
h2 { h2 {
// text-align: right; // text-align: right;
// font-family: WorkSans-Bold; // font-family: WorkSans-Bold;
@ -724,7 +789,8 @@ ion-title{
font-size: 13px; font-size: 13px;
} }
}} }
}
.calendar-container { .calendar-container {
background: white; background: white;
@ -733,6 +799,7 @@ ion-title{
border-radius: 20px; border-radius: 20px;
border: 1px solid #ccc; border: 1px solid #ccc;
padding-bottom: 25px; padding-bottom: 25px;
span { span {
text-align: left; text-align: left;
display: block; display: block;
@ -741,11 +808,13 @@ ion-title{
margin-left: 10px; margin-left: 10px;
} }
} }
.calendar-container-ar { .calendar-container-ar {
background: white; background: white;
margin-bottom: 100px; margin-bottom: 100px;
margin-top: 20px; margin-top: 20px;
border-radius: 20px; border-radius: 20px;
span { span {
text-align: right; text-align: right;
display: block; display: block;
@ -784,14 +853,17 @@ ion-title{
font-size: 16px; font-size: 16px;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
} }
.stats { .stats {
color: #289DB8; font-size: 9px; color: #289DB8;
font-size: 9px;
margin-right: 5px; margin-right: 5px;
font-family: 'WorkSans-Bold'; font-family: 'WorkSans-Bold';
} }
.stats-ar { .stats-ar {
color: #289DB8; font-size: 9px; color: #289DB8;
font-size: 9px;
margin-left: 5px; margin-left: 5px;
font-family: 'WorkSans-Bold'; font-family: 'WorkSans-Bold';
} }
@ -807,7 +879,7 @@ ion-title{
width: 22px; width: 22px;
height: 20px; height: 20px;
border-radius: 100%; border-radius: 100%;
background-color: #269DB8; background-color: #BE332F;
z-index: 9; z-index: 9;
margin-top: 25px; margin-top: 25px;
padding-left: 4px; padding-left: 4px;
@ -817,7 +889,7 @@ ion-title{
width: 22px; width: 22px;
height: 20px; height: 20px;
border-radius: 100%; border-radius: 100%;
background-color: #269DB8; background-color: #BE332F;
z-index: 9; z-index: 9;
margin-top: 25px; margin-top: 25px;
padding-right: 4px; padding-right: 4px;
@ -844,12 +916,15 @@ ion-title{
pointer-events: none; pointer-events: none;
opacity: .3; opacity: .3;
} }
.favIcon { .favIcon {
height: 18px; margin-left: 23px; height: 18px;
margin-left: 23px;
} }
.favIcon-ar { .favIcon-ar {
height: 18px; margin-right: 23px; height: 18px;
margin-right: 23px;
} }
.call { .call {
@ -859,6 +934,7 @@ ion-title{
.call-ar { .call-ar {
margin-left: 16px; margin-left: 16px;
} }
.name { .name {
text-align: center; text-align: center;
letter-spacing: -0.84px; letter-spacing: -0.84px;
@ -868,6 +944,7 @@ ion-title{
line-height: 21px; line-height: 21px;
font-size: 21px; font-size: 21px;
} }
.email { .email {
text-align: center; text-align: center;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
@ -878,6 +955,7 @@ ion-title{
opacity: 1; opacity: 1;
padding-top: 3px; padding-top: 3px;
} }
.subTitle { .subTitle {
text-align: center; text-align: center;
letter-spacing: -0.52px; letter-spacing: -0.52px;
@ -887,6 +965,7 @@ ion-title{
font-size: 13px; font-size: 13px;
line-height: 0px; line-height: 0px;
} }
.profile { .profile {
text-align: left; text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
@ -898,6 +977,7 @@ ion-title{
margin-top: 20px; margin-top: 20px;
margin-bottom: 2px; margin-bottom: 2px;
} }
.label1 { .label1 {
text-align: left; text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
@ -929,6 +1009,7 @@ ion-title{
margin-top: 20px; margin-top: 20px;
margin-bottom: 2px; margin-bottom: 2px;
} }
.label1-ar { .label1-ar {
text-align: right; text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
@ -948,25 +1029,30 @@ letter-spacing: -0.64px;
color: #2B353E; color: #2B353E;
opacity: 1; opacity: 1;
} }
@media screen and (min-width: 768px) and (max-width:1024px) { @media screen and (min-width: 768px) and (max-width:1024px) {
.div { .div {
position: relative; position: relative;
display: flex; display: flex;
margin-left: 48px; margin-left: 48px;
}} }
}
@media screen and (min-width: 1px) and (max-width:767px) { @media screen and (min-width: 1px) and (max-width:767px) {
.div { .div {
position: relative; position: relative;
display: flex; display: flex;
margin-left: -1px; margin-left: -1px;
}} }
}
.MyTeamdiv { .MyTeamdiv {
position: relative; position: relative;
display: flex; display: flex;
margin-bottom: -12px; margin-bottom: -12px;
} }
.numberEmp { .numberEmp {
color: white; color: white;
font-size: 12px; font-size: 12px;
@ -977,7 +1063,7 @@ opacity: 1;
width: 23px; width: 23px;
height: 23px; height: 23px;
border-radius: 100%; border-radius: 100%;
background-color: #269DB8; background-color: #BE332F;
z-index: 9; z-index: 9;
margin-top: 25px; margin-top: 25px;
/* padding-left: 4px; */ /* padding-left: 4px; */
@ -995,7 +1081,7 @@ opacity: 1;
width: 23px; width: 23px;
height: 23px; height: 23px;
border-radius: 100%; border-radius: 100%;
background-color: #269DB8; background-color: #BE332F;
z-index: 9; z-index: 9;
margin-top: 25px; margin-top: 25px;
/* padding-left: 4px; */ /* padding-left: 4px; */
@ -1023,6 +1109,7 @@ opacity: 1;
color: #4D4D4D; color: #4D4D4D;
margin-top: -13px; margin-top: -13px;
} }
.btnDiv { .btnDiv {
position: relative; position: relative;
display: flex; display: flex;
@ -1031,7 +1118,3 @@ opacity: 1;
margin-top: -12px; margin-top: -12px;
} }

@ -449,7 +449,7 @@ export class DetailsComponent implements OnInit {
data: [this.absentDays, this.attendedDays], data: [this.absentDays, this.attendedDays],
backgroundColor: [ backgroundColor: [
'black', 'black',
'#269DB8' '#BE332F'
], ],
borderWidth: 1, borderWidth: 1,
// cutoutPrecentage:20 , // cutoutPrecentage:20 ,

@ -23,19 +23,22 @@ ion-title{
.contentBg:before { .contentBg:before {
position: absolute; position: absolute;
content: ""; content: "";
background: #269DB8; background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
top: 0px; top: 0px;
z-index: 1; z-index: 1;
} }
ion-content { ion-content {
--ion-background-color: whitesmoke; --ion-background-color: whitesmoke;
} }
.request-heading { .request-heading {
padding-left: 15px; padding-left: 15px;
margin-top: 10px; margin-top: 10px;
span { span {
// display: block; // display: block;
// padding-top: 8px; // padding-top: 8px;
@ -81,6 +84,7 @@ ion-content {
z-index: 1; z-index: 1;
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.result-text-container { .result-text-container {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -90,12 +94,14 @@ ion-content {
display: block; display: block;
text-align: center; text-align: center;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
h2 { h2 {
font-size: 38px; font-size: 38px;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
margin: 0 auto; margin: 0 auto;
line-height: 36px; line-height: 36px;
} }
span { span {
width: 125px; width: 125px;
display: block; display: block;
@ -104,6 +110,7 @@ ion-content {
font-family: workSans-Regular; font-family: workSans-Regular;
} }
} }
.today-graph { .today-graph {
width: 100%; width: 100%;
max-height: 4cm; max-height: 4cm;
@ -113,23 +120,29 @@ ion-content {
margin: 0 !important; margin: 0 !important;
width: 100% !important; width: 100% !important;
} }
.filters-row { .filters-row {
margin-top: 10px; margin-top: 10px;
} }
.search-input { .search-input {
margin-top: 15px; margin-top: 15px;
background: white; background: white;
border-radius: 15px; border-radius: 15px;
ion-input { ion-input {
border-bottom-color: transparent; border-bottom-color: transparent;
} }
} }
.search-dropdown { .search-dropdown {
background: #269DB8; background: #BE332F;
ion-select { ion-select {
.select-text { .select-text {
margin-left: -10px; margin-left: -10px;
} }
.select-icon { .select-icon {
.select-icon-inner { .select-icon-inner {
opacity: 1; opacity: 1;
@ -139,8 +152,10 @@ ion-content {
} }
} }
} }
.input-container { .input-container {
background: white; background: white;
ion-input { ion-input {
border-bottom-color: transparent; border-bottom-color: transparent;
} }
@ -152,6 +167,7 @@ ion-content {
height: 80px; height: 80px;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
&:before { &:before {
position: absolute; position: absolute;
content: ""; content: "";
@ -164,10 +180,12 @@ ion-content {
background-color: red; background-color: red;
z-index: 9; z-index: 9;
} }
&.present:before { &.present:before {
background-color: green !important; background-color: green !important;
} }
} }
.user-image { .user-image {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -189,17 +207,20 @@ ion-content {
top: 45px; top: 45px;
right: 38px; right: 38px;
z-index: 999999; z-index: 999999;
ion-col { ion-col {
// background: white; // background: white;
// border-radius: 12px; // border-radius: 12px;
// padding-right: 10px; // padding-right: 10px;
flex: none; flex: none;
ion-icon { ion-icon {
margin-right: 3px; margin-right: 3px;
font-size: 14px; font-size: 14px;
margin-left: 3px; margin-left: 3px;
vertical-align: middle; vertical-align: middle;
} }
span { span {
font-size: 12px; font-size: 12px;
vertical-align: middle; vertical-align: middle;
@ -265,8 +286,10 @@ ion-content {
border-style: var(--border-style); border-style: var(--border-style);
border-color: #dcdcdc; border-color: #dcdcdc;
margin-top: 6px !important; margin-top: 6px !important;
border-color: #d8d4d4 !important;} border-color: #d8d4d4 !important;
} }
}
.text { .text {
// font-size: 16px; // font-size: 16px;
// font-weight: bolder; // font-weight: bolder;
@ -289,7 +312,7 @@ ion-content {
// height: 21px; // height: 21px;
// padding-right: -10px; // padding-right: -10px;
// border-radius: 100%; // border-radius: 100%;
// background-color: #269DB8; // background-color: #BE332F;
// z-index: 9; // z-index: 9;
// margin-top: 26px; // margin-top: 26px;
// } // }
@ -305,20 +328,22 @@ ion-content {
width: 22px; width: 22px;
height: 20px; height: 20px;
border-radius: 100%; border-radius: 100%;
background-color: #269DB8; background-color: #BE332F;
z-index: 9; z-index: 9;
margin-top: 25px; margin-top: 25px;
padding-left: 4px; padding-left: 4px;
} }
.number-ar { .number-ar {
width: 22px; width: 22px;
height: 20px; height: 20px;
border-radius: 100%; border-radius: 100%;
background-color: #269DB8; background-color: #BE332F;
z-index: 9; z-index: 9;
margin-top: 25px; margin-top: 25px;
padding-right: 4px; padding-right: 4px;
} }
.numberEmp { .numberEmp {
color: white; color: white;
font-size: 12px; font-size: 12px;
@ -329,13 +354,14 @@ ion-content {
width: 23px; width: 23px;
height: 23px; height: 23px;
border-radius: 100%; border-radius: 100%;
background-color: #269DB8; background-color: #BE332F;
z-index: 9; z-index: 9;
margin-top: 25px; margin-top: 25px;
/* padding-left: 4px; */ /* padding-left: 4px; */
text-align: center; text-align: center;
padding-top: 3px; padding-top: 3px;
} }
.numberEmp-ar { .numberEmp-ar {
color: white; color: white;
font-size: 12px; font-size: 12px;
@ -346,13 +372,14 @@ ion-content {
width: 23px; width: 23px;
height: 23px; height: 23px;
border-radius: 100%; border-radius: 100%;
background-color: #269DB8; background-color: #BE332F;
z-index: 9; z-index: 9;
margin-top: 25px; margin-top: 25px;
/* padding-left: 4px; */ /* padding-left: 4px; */
text-align: center; text-align: center;
padding-top: 3px; padding-top: 3px;
} }
.div { .div {
position: relative; position: relative;
display: flex; display: flex;

@ -44,7 +44,7 @@ export class HomeComponent implements OnInit {
{ {
data: [100], data: [100],
backgroundColor: [ backgroundColor: [
'#269DB8' '#BE332F'
], ],
borderWidth: 5 borderWidth: 5
}] }]
@ -111,7 +111,7 @@ export class HomeComponent implements OnInit {
} }
toggleColor() { toggleColor() {
this.myColor = 'secondary'; this.myColor = 'secondary';
// this.myColor = '#269DB8' // this.myColor = '#BE332F'
} }
// activeFilter(index: number) { // activeFilter(index: number) {

@ -4,7 +4,7 @@
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
--background: #269DB8; --background: #BE332F;
width: 80% !important; width: 80% !important;
color: white !important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
@ -73,6 +73,7 @@
.employee-name { .employee-name {
display: inline-block; display: inline-block;
width: 80%; width: 80%;
.name { .name {
// font-size: 16px; // font-size: 16px;
// color: black; // color: black;
@ -128,6 +129,7 @@
.employee-name-ar { .employee-name-ar {
display: inline-block; display: inline-block;
width: 80%; width: 80%;
.name { .name {
// font-size: 16px; // font-size: 16px;
// color: black; // color: black;
@ -179,6 +181,7 @@
margin-top: -10px; margin-top: -10px;
} }
} }
.image-container { .image-container {
width: 20%; width: 20%;
display: inline-block; display: inline-block;
@ -186,12 +189,14 @@
vertical-align: top; vertical-align: top;
margin-top: 5px; margin-top: 5px;
} }
.swipe-information { .swipe-information {
color: #888; color: #888;
font-size: 12px; font-size: 12px;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
padding-top: 6px; padding-top: 6px;
margin-top: 6px; margin-top: 6px;
.check-in { .check-in {
font-size: 12px; font-size: 12px;
margin-right: 15px; margin-right: 15px;

@ -270,7 +270,7 @@ ion-title {
.contentBg:before { .contentBg:before {
position: absolute; position: absolute;
content: ""; content: "";
background: #269DB8; background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
@ -423,7 +423,7 @@ ion-content {
border-radius: 50%; border-radius: 50%;
width: 15px; width: 15px;
height: 15px; height: 15px;
background-color: #269db8; background-color: #BE332F;
top: 1px; top: 1px;
} }
@ -498,7 +498,7 @@ ion-content {
.text-span-active { .text-span-active {
font-size: 12px; font-size: 12px;
color: white; color: white;
background-color: #269DB8; background-color: #BE332F;
width: auto; width: auto;
height: 40px; height: 40px;
border: 1px solid; border: 1px solid;

@ -3,39 +3,46 @@ ion-card-content.card-content.card-content-ios {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
} }
.col { .col {
//border: #dedede solid 1px; //border: #dedede solid 1px;
padding: 2px !important; padding: 2px !important;
text-align: center; text-align: center;
font-size: 15px; font-size: 15px;
} }
.item-md.item-block .item-inner, .item-md.item-block .item-inner,
.item-ios.item-block .item-inner { .item-ios.item-block .item-inner {
padding: 0px !important; padding: 0px !important;
} }
.itemAH { .itemAH {
padding: 0px !important padding: 0px !important;
;
font-size: 13px; font-size: 13px;
} }
.gridAH { .gridAH {
text-align: center; text-align: center;
padding: 5px 5px !important; padding: 5px 5px !important;
border-radius: 5px; border-radius: 5px;
} }
.rowAH { .rowAH {
white-space: normal; white-space: normal;
.col { .col {
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
} }
} }
.Header { .Header {
font-weight: bold; font-weight: bold;
// font-family: "WorkSans-SemiBold" !important; // font-family: "WorkSans-SemiBold" !important;
color: #1a586d; color: #c6903e;
// padding: 0px !important; // padding: 0px !important;
// margin: 0px !important; // margin: 0px !important;
} }
.titleH { .titleH {
//background-color:$custgreen; //background-color:$custgreen;
//height: 40px; //height: 40px;
@ -45,18 +52,24 @@ ion-card-content.card-content.card-content-ios {
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-bottom: 0px; border-bottom: 0px;
.col { .col {
border: 0px; border: 0px;
} }
} }
ion-label.label.label-md, ion-label.label.label-md,
ion-label.label.label-ios { ion-label.label.label-ios {
margin: 0px; margin: 0px;
} }
.rowAH .col { .rowAH .col {
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
padding: 2px !important; padding: 2px !important;
text-align: center; text-align: center;
font-size: 15px; font-size: 15px;
} }
.ion-card-content{padding:0;}
.ion-card-content {
padding: 0;
}

@ -1,3 +1,3 @@
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }

@ -154,7 +154,7 @@
<ion-col size='3'> <ion-col size='3'>
<button [disabled]='searchKey == undefined || 1 > searchKey.length' (click)='onChangeInput()' <button [disabled]='searchKey == undefined || 1 > searchKey.length' (click)='onChangeInput()'
style="--background: white; background: transparent; margin-top: 4px; --background-hover: transparent !important;"> style="--background: white; background: transparent; margin-top: 4px; --background-hover: transparent !important;">
<ion-label><p style="color: #269db8;">{{"general, search" | translate}}</p></ion-label> <ion-label><p style="color: #BE332F;">{{"general, search" | translate}}</p></ion-label>
</button> </button>
</ion-col> </ion-col>
</ion-row> </ion-row>

@ -9,7 +9,7 @@
} }
ion-radio { ion-radio {
--color-checked: #269db8; --color-checked: #BE332F;
} }
.center { .center {
@ -247,7 +247,7 @@ button.item-button.button.button-md.button-clear.button-clear-md {
} }
ion-radio { ion-radio {
--color-checked: #269db8; --color-checked: #BE332F;
} }
.center { .center {
@ -313,7 +313,7 @@ ion-radio {
} }
.isFavLetterActive { .isFavLetterActive {
color: #269db8; color: #BE332F;
display: block; display: block;
width: 60%; width: 60%;
float: right; float: right;
@ -328,7 +328,7 @@ ion-radio {
.searchText { .searchText {
background: transparent; background: transparent;
color: #269db8; color: #BE332F;
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
} }

@ -73,7 +73,7 @@
</ion-col> </ion-col>
<ion-col size='3'> <ion-col size='3'>
<button [disabled]='inputSearch == undefined || inputSearch.length < 1' (click)='onChangeInput()' style="--background: white;background: transparent;--background-hover: transparent !important; margin-top: 4px;"> <button [disabled]='inputSearch == undefined || inputSearch.length < 1' (click)='onChangeInput()' style="--background: white;background: transparent;--background-hover: transparent !important; margin-top: 4px;">
<ion-label><p style="color: #269db8;">{{"general, search" | translate}}</p></ion-label> <ion-label><p style="color: #BE332F;">{{"general, search" | translate}}</p></ion-label>
</button> </button>
</ion-col> </ion-col>
</ion-row> </ion-row>

@ -160,7 +160,7 @@ button.item-button.button.button-md.button-clear.button-clear-md {
} }
ion-radio { ion-radio {
--color-checked: #269db8; --color-checked: #BE332F;
} }
.center { .center {
@ -228,10 +228,10 @@ ion-radio {
} }
.isFavLetterActive { .isFavLetterActive {
// background: #269db8; // background: #BE332F;
// width: 55px; // width: 55px;
// border-radius: 60px; // border-radius: 60px;
color: #269db8; color: #BE332F;
display: block; display: block;
width: 60%; width: 60%;
float: right; float: right;
@ -253,7 +253,7 @@ ion-radio {
.searchText { .searchText {
background: transparent; background: transparent;
color: #269db8; color: #BE332F;
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
} }

@ -1,4 +1,3 @@
.no-padding-label { .no-padding-label {
padding: 0px !important; padding: 0px !important;
} }
@ -9,42 +8,49 @@
.active-Segment { .active-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
background: #269DB8 !important; background: #BE332F !important;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border-radius: 100px; border-radius: 100px;
border: 0; border: 0;
} }
.active-Segment ion-label { .active-Segment ion-label {
font-size: 11px; font-size: 11px;
color: white !important; color: white !important;
} }
.normal-Segment ion-label { .normal-Segment ion-label {
color: black !important; color: black !important;
font-size: 11px; font-size: 11px;
} }
.normal-Segment { .normal-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border: 0; border: 0;
} }
.action-btn { .action-btn {
white-space: nowrap; white-space: nowrap;
font-size: 10px; font-size: 10px;
} }
.name { .name {
color:black !important ;font-weight: bold; color: black !important;
font-weight: bold;
} }
.timeline-item { .timeline-item {
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
font-size: 10px; font-size: 10px;
} }
.req_info { .req_info {
width: 20px; width: 20px;
height: 20px; height: 20px;
display: inline-block; display: inline-block;
margin: 15px 10px 0px 0px; margin: 15px 10px 0px 0px;
} }

@ -5,23 +5,27 @@
.margin-left { .margin-left {
margin-left: 0px; margin-left: 0px;
} }
@media only screen and (max-width: 320px) { @media only screen and (max-width: 320px) {
.active-Segment { .active-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
background: #269DB8 !important; background: #BE332F !important;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border-radius: 100px; border-radius: 100px;
border: 0; border: 0;
} }
.active-Segment ion-label { .active-Segment ion-label {
font-size: 8px !important; font-size: 8px !important;
color: white !important; color: white !important;
} }
.normal-Segment ion-label { .normal-Segment ion-label {
color: black; color: black;
font-size: 8px !important; font-size: 8px !important;
} }
.normal-Segment { .normal-Segment {
font-size: 0.3cm; font-size: 0.3cm;
text-transform: none; text-transform: none;
@ -29,22 +33,26 @@
border: 0; border: 0;
} }
} }
.active-Segment { .active-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
background: #269DB8 !important; background: #BE332F !important;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border-radius: 100px; border-radius: 100px;
border: 0; border: 0;
} }
.active-Segment ion-label { .active-Segment ion-label {
font-size: 11px; font-size: 11px;
color: white !important; color: white !important;
} }
.normal-Segment ion-label { .normal-Segment ion-label {
color: black !important; color: black !important;
font-size: 11px; font-size: 11px;
} }
.normal-Segment { .normal-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
text-transform: none; text-transform: none;
@ -56,15 +64,19 @@
white-space: nowrap; white-space: nowrap;
font-size: 10px; font-size: 10px;
} }
.req_info { .req_info {
width: 20px; width: 20px;
height: 20px; height: 20px;
display: inline-block; display: inline-block;
margin: 15px 10px 0px 0px; margin: 15px 10px 0px 0px;
} }
.name { .name {
color:black !important ;font-weight: bold; color: black !important;
font-weight: bold;
} }
.timeline-item { .timeline-item {
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;

@ -1,4 +1,3 @@
.no-padding-label { .no-padding-label {
padding: 0px !important; padding: 0px !important;
} }
@ -10,20 +9,23 @@
@media only screen and (max-width: 320px) { @media only screen and (max-width: 320px) {
.active-Segment { .active-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
background: #269DB8 !important; background: #BE332F !important;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border-radius: 100px; border-radius: 100px;
border: 0; border: 0;
} }
.active-Segment ion-label { .active-Segment ion-label {
font-size: 8px !important; font-size: 8px !important;
color: white !important; color: white !important;
} }
.normal-Segment ion-label { .normal-Segment ion-label {
color: black; color: black;
font-size: 8px !important; font-size: 8px !important;
} }
.normal-Segment { .normal-Segment {
font-size: 0.3cm; font-size: 0.3cm;
text-transform: none; text-transform: none;
@ -34,20 +36,23 @@
.active-Segment { .active-Segment {
font-size: 0.3cm; font-size: 0.3cm;
background: #269DB8 ; background: #BE332F;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border-radius: 100px; border-radius: 100px;
border: 0; border: 0;
} }
.active-Segment ion-label { .active-Segment ion-label {
font-size: 11px; font-size: 11px;
color: white !important; color: white !important;
} }
.normal-Segment ion-label { .normal-Segment ion-label {
color: black; color: black;
font-size: 11px; font-size: 11px;
} }
.normal-Segment { .normal-Segment {
font-size: 0.3cm; font-size: 0.3cm;
text-transform: none; text-transform: none;
@ -60,18 +65,21 @@
white-space: nowrap; white-space: nowrap;
font-size: 10px; font-size: 10px;
} }
.name { .name {
color:black !important ;font-weight: bold; color: black !important;
font-weight: bold;
} }
.timeline-item { .timeline-item {
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
font-size: 10px; font-size: 10px;
} }
.req_info { .req_info {
width: 20px; width: 20px;
height: 20px; height: 20px;
display: inline-block; display: inline-block;
margin: 15px 10px 0px 0px; margin: 15px 10px 0px 0px;
} }

@ -1,4 +1,3 @@
.no-padding-label { .no-padding-label {
padding: 0px !important; padding: 0px !important;
} }
@ -9,26 +8,30 @@
.active-Segment { .active-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
background: #269DB8 !important; background: #BE332F !important;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border-radius: 100px; border-radius: 100px;
border: 0; border: 0;
} }
.active-Segment ion-label { .active-Segment ion-label {
font-size: 11px; font-size: 11px;
color: white !important; color: white !important;
} }
.normal-Segment ion-label { .normal-Segment ion-label {
color: black !important; color: black !important;
font-size: 11px; font-size: 11px;
} }
.normal-Segment { .normal-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border: 0; border: 0;
} }
.action-btn { .action-btn {
// white-space: pre-wrap; // white-space: pre-wrap;
white-space: nowrap; white-space: nowrap;
@ -36,13 +39,16 @@
} }
.name { .name {
color:black !important ;font-weight: bold; color: black !important;
font-weight: bold;
} }
.timeline-item { .timeline-item {
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
font-size: 10px; font-size: 10px;
} }
.req_info { .req_info {
width: 20px; width: 20px;
height: 20px; height: 20px;

@ -315,12 +315,12 @@
<ion-card-content> <ion-card-content>
<div> <div>
<ion-row> <ion-row>
<ion-col class="rowBorder" style="background: #269db8;"> <ion-col class="rowBorder" style="background: #BE332F;">
<ion-label> <ion-label>
<p style="color: white;">{{ 'general, current' | translate}}</p> <p style="color: white;">{{ 'general, current' | translate}}</p>
</ion-label> </ion-label>
</ion-col> </ion-col>
<ion-col class="rowBorder" style="background: #269db8;"> <ion-col class="rowBorder" style="background: #BE332F;">
<ion-label> <ion-label>
<p style="color: white;">{{ 'general, proposed' | translate}}</p> <p style="color: white;">{{ 'general, proposed' | translate}}</p>
</ion-label> </ion-label>

@ -1,5 +1,3 @@
.actionBtn { .actionBtn {
height: auto; height: auto;
@ -9,34 +7,40 @@
white-space: normal; white-space: normal;
} }
button.actionBtn.button.button-md, button.actionBtn.button.button-md,
button.actionBtn.button.button-ios, button.actionBtn.button.button-ios,
button.actionBtn.button.button button.actionBtn.button.button {
{
width: 90%; width: 90%;
} }
.actionBtnCol { .actionBtnCol {
text-align: center; text-align: center;
} }
.actionBtnGrid { .actionBtnGrid {
padding: 0px; padding: 0px;
} }
.notColBtn { .notColBtn {
min-height: 150px !important; min-height: 150px !important;
padding: 0px; padding: 0px;
background: transparent; background: transparent;
border: 2px solid #e4e5e7; border: 2px solid #e4e5e7;
p { p {
color: var(--secondary); color: var(--secondary);
margin-top: 0px; margin-bottom:0px; margin-top: 0px;
margin-bottom: 0px;
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
white-space: normal; white-space: normal;
padding: 3px 0px; padding: 3px 0px;
min-height: 50px; min-height: 50px;
} }
span { span {
display: block; display: block;
@ -52,7 +56,10 @@
} }
} }
.notColBtn.button,.notColBtn.button-md, .notColBtn.button-ios{
.notColBtn.button,
.notColBtn.button-md,
.notColBtn.button-ios {
background: transparent !important; background: transparent !important;
color: var(--dark); color: var(--dark);
box-shadow: none; box-shadow: none;
@ -63,6 +70,7 @@
border: 2px solid var(--gray); border: 2px solid var(--gray);
min-width: auto; min-width: auto;
} }
//////////////////////// ////////////////////////
.itemHISBtn { .itemHISBtn {
padding: 5px; padding: 5px;
@ -89,6 +97,7 @@
} }
.colBorder { .colBorder {
border-right: solid 0.02cm var(--grayBG); border-right: solid 0.02cm var(--grayBG);
@ -99,6 +108,7 @@
margin-left: 5px; margin-left: 5px;
text-align: left; text-align: left;
} }
.req_info { .req_info {
width: 25px; width: 25px;
height: 25px; height: 25px;
@ -109,6 +119,7 @@
.deligate { .deligate {
margin-left: 25px; margin-left: 25px;
} }
.actionBtn { .actionBtn {
--border-radius: 50% !important; --border-radius: 50% !important;
height: 55px; height: 55px;
@ -197,6 +208,7 @@
margin-right: 6px; margin-right: 6px;
margin-bottom: 8px; margin-bottom: 8px;
} }
.status { .status {
text-align: center; text-align: center;
// background: green; // background: green;
@ -206,6 +218,7 @@ height: 40px;
color: white; color: white;
position: relative; position: relative;
} }
.rowHeader { .rowHeader {
border-bottom: 1px solid var(--cusgray); border-bottom: 1px solid var(--cusgray);
padding-bottom: 10px; padding-bottom: 10px;
@ -215,6 +228,7 @@ position: relative;
.container { .container {
position: relative; position: relative;
} }
.overflow-hid-div { .overflow-hid-div {
overflow: hidden; overflow: hidden;
margin-left: 50px; margin-left: 50px;
@ -223,6 +237,7 @@ position: relative;
background-color: red; background-color: red;
} }
.inner { .inner {
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -232,6 +247,7 @@ position: relative;
top: 25px; top: 25px;
} }
.gridSubordinates { .gridSubordinates {
margin-left: 3%; //38px; margin-left: 3%; //38px;
border-top-left-radius: 16px; //28px; border-top-left-radius: 16px; //28px;
@ -250,6 +266,7 @@ position: relative;
float: left; float: left;
margin-right: 10px; margin-right: 10px;
} }
.subOrdinateImg { .subOrdinateImg {
width: 85px; width: 85px;
border: #e4e4e4 solid 2px; border: #e4e4e4 solid 2px;
@ -270,6 +287,7 @@ position: relative;
margin-right: -13px; margin-right: -13px;
margin-bottom: 8px; margin-bottom: 8px;
} }
.gridSubordinates-Ar { .gridSubordinates-Ar {
border-top-right-radius: 28px; border-top-right-radius: 28px;
border-bottom-right-radius: 40px; border-bottom-right-radius: 40px;
@ -289,6 +307,7 @@ position: relative;
position: absolute; position: absolute;
top: -2px; top: -2px;
} }
/////////////////////////////////////////////// ///////////////////////////////////////////////
.label { .label {
@ -300,19 +319,24 @@ font-size: 14px;
padding-top: 10px; padding-top: 10px;
font-weight: bold; font-weight: bold;
} }
.action-history ion-card-content { .action-history ion-card-content {
padding: 0; padding: 0;
} }
ion-card.action-history { ion-card.action-history {
margin: 10px margin: 10px
} }
.submitterInfo { .submitterInfo {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
} }
ion-card { ion-card {
color: black !important; color: black !important;
} }
//// ////
.tabBar { .tabBar {
height: 70px height: 70px
@ -321,6 +345,7 @@ ion-card{
.cardAlignTextEn { .cardAlignTextEn {
text-align: left; text-align: left;
} }
.cardAlignTextAr { .cardAlignTextAr {
text-align: right; text-align: right;
} }
@ -331,33 +356,40 @@ ion-card{
.active-Segment { .active-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
background: #269DB8 !important; background: #BE332F !important;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border-radius: 100px; border-radius: 100px;
border: 0; border: 0;
} }
.active-Segment ion-label { .active-Segment ion-label {
font-size: 11px; font-size: 11px;
color: white !important; color: white !important;
} }
.normal-Segment ion-label { .normal-Segment ion-label {
color: black !important; color: black !important;
font-size: 11px; font-size: 11px;
} }
.normal-Segment { .normal-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border: 0; border: 0;
} }
.action-btn { .action-btn {
white-space: pre-wrap; white-space: pre-wrap;
font-size: 11px; font-size: 11px;
} }
.name { .name {
color:black !important ;font-weight: bold; color: black !important;
font-weight: bold;
} }
.timeline-item { .timeline-item {
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;

@ -1,7 +1,7 @@
.header-toolbar { .header-toolbar {
--background: #269DB8; --background: #BE332F;
} }
ion-toggle { ion-toggle {
--background-checked: #269DB8; --background-checked: #BE332F;
} }

@ -75,7 +75,7 @@
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.colorBG { .colorBG {
@ -83,7 +83,7 @@
} }
.header-div { .header-div {
background-color: #269DB8; background-color: #BE332F;
text-transform: capitalize; text-transform: capitalize;
height: 119px; height: 119px;
position: relative; position: relative;
@ -323,7 +323,7 @@
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
/* border-radius: 12px !important; */ /* border-radius: 12px !important; */
background: #269DB8; background: #BE332F;
border-bottom: 1px solid #a7a4a4; border-bottom: 1px solid #a7a4a4;
border-top: 1px solid #cac8c8; border-top: 1px solid #cac8c8;
margin-left: -13px; margin-left: -13px;
@ -377,7 +377,7 @@
left: 83%; left: 83%;
bottom: 117px; bottom: 117px;
color: black; color: black;
background-color: #269DB8; background-color: #BE332F;
width: 16%; width: 16%;
height: 6px; height: 6px;
} }
@ -387,13 +387,13 @@
// left: 77%; // left: 77%;
// bottom: 117px; // bottom: 117px;
// color: black; // color: black;
// background-color: #269DB8; // background-color: #BE332F;
// width: 20%; height: 6px; // width: 20%; height: 6px;
position: relative; position: relative;
left: 4%; left: 4%;
bottom: 117px; bottom: 117px;
color: black; color: black;
background-color: #269DB8; background-color: #BE332F;
width: 15%; width: 15%;
height: 6px; height: 6px;
} }
@ -405,7 +405,7 @@
left: 83%; left: 83%;
bottom: 67px; bottom: 67px;
color: black; color: black;
background-color: #269DB8; background-color: #BE332F;
width: 16%; width: 16%;
height: 6px; height: 6px;
} }
@ -415,13 +415,13 @@
// left: 77%; // left: 77%;
// bottom: 67px; // bottom: 67px;
// color: black; // color: black;
// background-color: #269DB8; // background-color: #BE332F;
// width: 20%; height: 6px; // width: 20%; height: 6px;
position: relative; position: relative;
left: 4%; left: 4%;
bottom: 67px; bottom: 67px;
color: black; color: black;
background-color: #269DB8; background-color: #BE332F;
width: 15%; width: 15%;
height: 6px; height: 6px;
} }

@ -56,7 +56,8 @@ export class HomeComponent implements OnInit {
public options = { public options = {
cutoutPercentage: 85, cutoutPercentage: 85,
tooltips: { enabled: false }, tooltips: { enabled: false },
legend: { display: false }}; legend: { display: false }
};
gaugeType = "full"; gaugeType = "full";
// gaugeValue = 11.200; // gaugeValue = 11.200;
@ -180,8 +181,7 @@ slidePrev(object, slideView) {
// P_PAGE_NUM: this.P_PAGE_NUM, // P_PAGE_NUM: this.P_PAGE_NUM,
// P_PAGE_LIMIT: this.P_PAGE_LIMIT // P_PAGE_LIMIT: this.P_PAGE_LIMIT
}; };
this.payslipService.getPayslip(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=> this.payslipService.getPayslip(request, () => { }, this.ts.trPK('general', 'retry')).subscribe((result) => {
{
this.handleRespondGetPayslipResult(result); this.handleRespondGetPayslipResult(result);
} }
); );
@ -221,8 +221,7 @@ slidePrev(object, slideView) {
P_ACTION_CONTEXT_ID: ActionContextID, P_ACTION_CONTEXT_ID: ActionContextID,
}; };
this.payslipService.getSummeryOFPayment(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=> this.payslipService.getSummeryOFPayment(request, () => { }, this.ts.trPK('general', 'retry')).subscribe((result) => {
{
this.handleSummeryOfPaymentResult(result); this.handleSummeryOfPaymentResult(result);
} }
); );
@ -237,14 +236,16 @@ slidePrev(object, slideView) {
labels: ['earingTotal', 'deductionTotal'], labels: ['earingTotal', 'deductionTotal'],
datasets: [ datasets: [
{ data: [this.earingTotal,this.deductionTotal], {
data: [this.earingTotal, this.deductionTotal],
backgroundColor: [ backgroundColor: [
'#269DB8', '#BE332F',
'#269DB8', ], '#BE332F',],
borderWidth: 2 borderWidth: 2
} }
] ]
}; } };
}
} }
@ -253,8 +254,7 @@ getPaymentInfo(ActionContextID){
P_ACTION_CONTEXT_ID: ActionContextID, P_ACTION_CONTEXT_ID: ActionContextID,
}; };
this.payslipService.getPaymentInfo(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=> this.payslipService.getPaymentInfo(request, () => { }, this.ts.trPK('general', 'retry')).subscribe((result) => {
{
this.handleGetPaymentInfoResult(result); this.handleGetPaymentInfoResult(result);
} }
); );
@ -286,8 +286,7 @@ getEarings(ActionContextID){
P_PAGE_LIMIT: 100 P_PAGE_LIMIT: 100
} }
this.doinfinitEarReq = request; this.doinfinitEarReq = request;
this.payslipService.getEarings(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=> this.payslipService.getEarings(request, () => { }, this.ts.trPK('general', 'retry')).subscribe((result) => {
{
this.handleGetEaringsResult(result); this.handleGetEaringsResult(result);
} }
); );
@ -314,8 +313,7 @@ getDeduction(ActionContextID){
// this.deductionReq.P_PAGE_LIMIT=100; // this.deductionReq.P_PAGE_LIMIT=100;
this.doinfiniteDedReq = request; this.doinfiniteDedReq = request;
this.payslipService.getDeduction(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=> this.payslipService.getDeduction(request, () => { }, this.ts.trPK('general', 'retry')).subscribe((result) => {
{
this.handleGetDeductionResult(result); this.handleGetDeductionResult(result);
} }
); );

@ -25,19 +25,21 @@
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.addEitOkButton { .addEitOkButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
background-color: #269DB8; background-color: #BE332F;
width: 80% !important; width: 80% !important;
color: white !important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
} }
.country { .country {
margin-top: 10px; margin-top: 10px;
padding: 10px; padding: 10px;

@ -25,15 +25,16 @@
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.addEitOkButton { .addEitOkButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
background-color: #269DB8; background-color: #BE332F;
width: 80% !important; width: 80% !important;
color: white !important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;

@ -12,7 +12,7 @@
.Header { .Header {
font-weight: bold; font-weight: bold;
color: #1a586d !important; color: #c6903e !important;
font-size: 10px; font-size: 10px;
} }
@ -44,6 +44,7 @@
margin: 10px; margin: 10px;
border-radius: 5px; border-radius: 5px;
} }
.submitNote { .submitNote {
background: #ffffff; background: #ffffff;
height: 80px; height: 80px;
@ -68,11 +69,13 @@
background: none; background: none;
background: none; background: none;
border-radius: 32px; border-radius: 32px;
ion-item { ion-item {
// margin-top: 5px; // margin-top: 5px;
// margin-bottom: 5px; // margin-bottom: 5px;
background-color: transparent; background-color: transparent;
.item-date { .item-date {
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;
@ -86,7 +89,9 @@
left: 0; left: 0;
top: 12%; top: 12%;
} }
ion-label , [item-end]{
ion-label,
[item-end] {
white-space: normal; white-space: normal;
font-size: 14px; font-size: 14px;
@ -174,6 +179,7 @@
border: #dedede solid 1px; border: #dedede solid 1px;
} }
.empImgeRep { .empImgeRep {
border-radius: 50% !important; border-radius: 50% !important;
width: 80px; width: 80px;
@ -226,24 +232,28 @@
--border-radius: 20px; --border-radius: 20px;
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.title { .title {
margin-top: -37px; margin-top: -37px;
margin-left: 85px; margin-left: 85px;
} }
.title-ar { .title-ar {
margin-top: -37px; margin-top: -37px;
margin-right: 101px; margin-right: 101px;
} }
.confirmEitOkButton { .confirmEitOkButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
background-color: #269DB8; background-color: #BE332F;
width: 80% !important; width: 80% !important;
color: white !important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
@ -255,9 +265,9 @@
text-align: right; text-align: right;
} }
.approvalTitle { .approvalTitle {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
text-align: left; text-align: left;
} }

@ -12,7 +12,7 @@
.Header { .Header {
font-weight: bold; font-weight: bold;
color: #1a586d !important; color: #c6903e !important;
font-size: 10px; font-size: 10px;
} }
@ -44,6 +44,7 @@
margin: 10px; margin: 10px;
border-radius: 5px; border-radius: 5px;
} }
.submitNote { .submitNote {
background: #ffffff; background: #ffffff;
height: 80px; height: 80px;
@ -68,11 +69,13 @@
background: none; background: none;
background: none; background: none;
border-radius: 32px; border-radius: 32px;
ion-item { ion-item {
// margin-top: 5px; // margin-top: 5px;
// margin-bottom: 5px; // margin-bottom: 5px;
background-color: transparent; background-color: transparent;
.item-date { .item-date {
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;
@ -86,7 +89,9 @@
left: 0; left: 0;
top: 12%; top: 12%;
} }
ion-label , [item-end]{
ion-label,
[item-end] {
white-space: normal; white-space: normal;
font-size: 14px; font-size: 14px;
@ -174,6 +179,7 @@
border: #dedede solid 1px; border: #dedede solid 1px;
} }
.empImgeRep { .empImgeRep {
border-radius: 50% !important; border-radius: 50% !important;
width: 80px; width: 80px;
@ -226,24 +232,28 @@
--border-radius: 20px; --border-radius: 20px;
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.title { .title {
margin-top: -37px; margin-top: -37px;
margin-left: 85px; margin-left: 85px;
} }
.title-ar { .title-ar {
margin-top: -37px; margin-top: -37px;
margin-right: 101px; margin-right: 101px;
} }
.confirmEitOkButton { .confirmEitOkButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
background-color: #269DB8; background-color: #BE332F;
width: 80% !important; width: 80% !important;
color: white !important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
@ -255,9 +265,9 @@
text-align: right; text-align: right;
} }
.approvalTitle { .approvalTitle {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
text-align: left; text-align: left;
} }

@ -12,7 +12,7 @@
.Header { .Header {
font-weight: bold; font-weight: bold;
color: #1a586d !important; color: #c6903e !important;
font-size: 10px; font-size: 10px;
} }
@ -44,6 +44,7 @@
margin: 10px; margin: 10px;
border-radius: 5px; border-radius: 5px;
} }
.submitNote { .submitNote {
background: #ffffff; background: #ffffff;
height: 80px; height: 80px;
@ -68,11 +69,13 @@
background: none; background: none;
background: none; background: none;
border-radius: 32px; border-radius: 32px;
ion-item { ion-item {
// margin-top: 5px; // margin-top: 5px;
// margin-bottom: 5px; // margin-bottom: 5px;
background-color: transparent; background-color: transparent;
.item-date { .item-date {
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;
@ -86,7 +89,9 @@
left: 0; left: 0;
top: 12%; top: 12%;
} }
ion-label , [item-end]{
ion-label,
[item-end] {
white-space: normal; white-space: normal;
font-size: 14px; font-size: 14px;
@ -174,6 +179,7 @@
border: #dedede solid 1px; border: #dedede solid 1px;
} }
.empImgeRep { .empImgeRep {
border-radius: 50% !important; border-radius: 50% !important;
width: 80px; width: 80px;
@ -226,24 +232,28 @@
--border-radius: 20px; --border-radius: 20px;
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.title { .title {
margin-top: -37px; margin-top: -37px;
margin-left: 85px; margin-left: 85px;
} }
.title-ar { .title-ar {
margin-top: -37px; margin-top: -37px;
margin-right: 101px; margin-right: 101px;
} }
.confirmEitOkButton { .confirmEitOkButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
background-color: #269DB8; background-color: #BE332F;
width: 80% !important; width: 80% !important;
color: white !important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
@ -255,9 +265,9 @@
text-align: right; text-align: right;
} }
.approvalTitle { .approvalTitle {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
text-align: left; text-align: left;
} }

@ -1,13 +1,15 @@
ion-col.colBold, ion-col.colBold > label{ ion-col.colBold,
ion-col.colBold>label {
font-weight: bold; font-weight: bold;
} }
.colorBG { .colorBG {
--background: #f0efef; --background: #f0efef;
} }
.header-div { .header-div {
text-transform: capitalize; text-transform: capitalize;
background: #269DB8; background: #BE332F;
display: block; display: block;
position: relative; position: relative;
height: 160px; height: 160px;
@ -43,11 +45,13 @@ border-radius: 50%;
top: 80%; top: 80%;
left: 65%; left: 65%;
} }
.changeImgBtn-ar { .changeImgBtn-ar {
position: absolute; position: absolute;
top: 80%; top: 80%;
left: 66%; left: 66%;
} }
.profileImg { .profileImg {
width: 160px; width: 160px;
height: 160px; height: 160px;
@ -82,6 +86,7 @@ border-radius: 50%;
line-height: 10px !important; line-height: 10px !important;
} }
.proTitles { .proTitles {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -119,6 +124,7 @@ border-radius: 50%;
padding-left: 5px; padding-left: 5px;
} }
.rowBolds { .rowBolds {
color: black !important; color: black !important;
font-size: 14px !important; font-size: 14px !important;

@ -15,14 +15,16 @@
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269db8; --background: #BE332F;
} }
.colorBG { .colorBG {
--background: #f0efef; --background: #f0efef;
} }
.header-div { .header-div {
text-transform: capitalize; text-transform: capitalize;
background: #269db8; background: #BE332F;
display: block; display: block;
position: relative; position: relative;
height: 113px; height: 113px;
@ -84,6 +86,7 @@ ion-thumbnail.menu-thumb {
// margin-left: 30px; // margin-left: 30px;
// margin-right: 30px; // margin-right: 30px;
} }
.gridService-ar { .gridService-ar {
// margin-top: 87px; // margin-top: 87px;
// border-radius: 10px; // border-radius: 10px;
@ -101,6 +104,7 @@ ion-thumbnail.menu-thumb {
// padding-top: 19px; // padding-top: 19px;
// padding-bottom: 26px; // padding-bottom: 26px;
} }
.columns-ar { .columns-ar {
// margin: 10px; // margin: 10px;
// background: #0B4775; // background: #0B4775;
@ -119,10 +123,12 @@ ion-thumbnail.menu-thumb {
// font-weight: bold; // font-weight: bold;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
} }
.services { .services {
font-size: 12px; font-size: 12px;
color: white; color: white;
} }
.service-ar { .service-ar {
font-size: 20px; font-size: 20px;
color: white; color: white;
@ -130,6 +136,7 @@ ion-thumbnail.menu-thumb {
font-weight: bold; font-weight: bold;
margin-right: 10px; margin-right: 10px;
} }
.services-ar { .services-ar {
font-size: 20px; font-size: 20px;
color: white; color: white;
@ -144,19 +151,23 @@ ion-thumbnail.menu-thumb {
border: #bebbbb !important; border: #bebbbb !important;
padding: 2px; padding: 2px;
} }
.p { .p {
color: black !important; color: black !important;
font-size: medium; font-size: medium;
text-align: center; text-align: center;
border-bottom: rgb(190, 187, 187) solid 1px; border-bottom: rgb(190, 187, 187) solid 1px;
} }
.itemline { .itemline {
border-bottom: rgb(190, 187, 187) solid 1px; border-bottom: rgb(190, 187, 187) solid 1px;
} }
.itemlins { .itemlins {
border-bottom: rgb(190, 187, 187) solid 1px; border-bottom: rgb(190, 187, 187) solid 1px;
margin-bottom: 209px; margin-bottom: 209px;
} }
.empName { .empName {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -166,6 +177,7 @@ ion-thumbnail.menu-thumb {
font-size: 16px; font-size: 16px;
margin-top: 38px; margin-top: 38px;
} }
.empJob { .empJob {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -174,10 +186,12 @@ ion-thumbnail.menu-thumb {
font-size: 16px; font-size: 16px;
margin-top: 4px; margin-top: 4px;
} }
.arrow { .arrow {
width: 20px; width: 20px;
height: 22px !important; height: 22px !important;
} }
.arrow-ar { .arrow-ar {
float: left; float: left;
font-size: 25px; font-size: 25px;
@ -198,6 +212,7 @@ ion-thumbnail.menu-thumb {
width: 85%; width: 85%;
margin: -12px 0px 0px 25px; margin: -12px 0px 0px 25px;
} }
.service-row-ar { .service-row-ar {
width: 104%; width: 104%;
margin: -12px 0px 0px 0px; margin: -12px 0px 0px 0px;
@ -206,6 +221,7 @@ ion-thumbnail.menu-thumb {
ion-content { ion-content {
--ion-background-color: whitesmoke; --ion-background-color: whitesmoke;
} }
ion-title { ion-title {
color: white; color: white;
position: absolute; position: absolute;
@ -218,6 +234,7 @@ ion-title {
height: 100%; height: 100%;
font-family: WorkSans-Regular; font-family: WorkSans-Regular;
} }
.contentBg { .contentBg {
padding: 0px 20px; padding: 0px 20px;
} }
@ -225,7 +242,7 @@ ion-title {
.contentBg:before { .contentBg:before {
position: absolute; position: absolute;
content: ""; content: "";
background: #269db8; background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
@ -236,6 +253,7 @@ ion-title {
.user-info { .user-info {
text-align: center; text-align: center;
margin-bottom: 15px; margin-bottom: 15px;
.user-image-container { .user-image-container {
position: relative; position: relative;
width: 100%; width: 100%;
@ -245,6 +263,7 @@ ion-title {
margin: 0 auto; margin: 0 auto;
align-items: center; align-items: center;
} }
// position: relative; // position: relative;
// width: 80px; // width: 80px;
// height: 80px; // height: 80px;
@ -278,6 +297,7 @@ ion-title {
margin-top: -125px; margin-top: -125px;
} }
} }
@media screen and (min-width: 768px) and (max-width: 1024px) { @media screen and (min-width: 768px) and (max-width: 1024px) {
.user-image { .user-image {
// position: relative; // position: relative;
@ -307,6 +327,7 @@ ion-title {
margin-top: -125px; margin-top: -125px;
} }
} }
@media screen and (min-width: 768px) and (max-width: 1024px) { @media screen and (min-width: 768px) and (max-width: 1024px) {
.user-image-ar { .user-image-ar {
// position: relative; // position: relative;
@ -322,7 +343,9 @@ ion-title {
border-radius: 80px; border-radius: 80px;
margin-bottom: 321px; margin-bottom: 321px;
margin-right: 52px; margin-right: 52px;
}} }
}
h1 { h1 {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -330,6 +353,7 @@ h1 {
font-size: 18px; font-size: 18px;
margin-bottom: 4px; margin-bottom: 4px;
} }
span { span {
font-size: 11px; font-size: 11px;
display: block; display: block;
@ -337,11 +361,14 @@ span {
} }
$actionBtnSize: 36px; $actionBtnSize: 36px;
.user-actions { .user-actions {
text-align: center; text-align: center;
.action-button { .action-button {
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
// white-space: nowrap; // white-space: nowrap;
// color: #888; // color: #888;
.action-button-icon { .action-button-icon {
@ -350,9 +377,10 @@ $actionBtnSize: 36px;
border-radius: $actionBtnSize; border-radius: $actionBtnSize;
margin: 0 auto; margin: 0 auto;
display: block; display: block;
background-color: #269db8; background-color: #BE332F;
line-height: $actionBtnSize; line-height: $actionBtnSize;
margin-bottom: 3px; margin-bottom: 3px;
img { img {
margin: 0 auto; margin: 0 auto;
vertical-align: middle; vertical-align: middle;
@ -360,6 +388,7 @@ $actionBtnSize: 36px;
} }
} }
} }
.employee-information-indetail { .employee-information-indetail {
background: white; background: white;
margin-top: 15px; margin-top: 15px;
@ -367,10 +396,12 @@ $actionBtnSize: 36px;
margin-bottom: 15px; margin-bottom: 15px;
border-radius: 20px; border-radius: 20px;
border: 1px solid #ccc; border: 1px solid #ccc;
ion-col { ion-col {
padding: 15px; padding: 15px;
// border-bottom: 1px solid #ccc; // border-bottom: 1px solid #ccc;
} }
h2 { h2 {
font-size: 13px; font-size: 13px;
// font-family: WorkSans-Bold; // font-family: WorkSans-Bold;
@ -378,6 +409,7 @@ $actionBtnSize: 36px;
font-weight: bold; font-weight: bold;
color: rgb(128, 124, 124); color: rgb(128, 124, 124);
} }
p { p {
font-size: 13px; font-size: 13px;
margin: 0; margin: 0;
@ -405,9 +437,10 @@ $actionBtnSize: 36px;
border-radius: 50% !important; border-radius: 50% !important;
margin-right: 22px; margin-right: 22px;
margin-left: 22px; margin-left: 22px;
background-color: #269db8; background-color: #BE332F;
} }
} }
@media screen and (min-width: 768px) and (max-width: 1024px) { @media screen and (min-width: 768px) and (max-width: 1024px) {
.active-Segment { .active-Segment {
width: 11%; width: 11%;
@ -419,7 +452,7 @@ $actionBtnSize: 36px;
border-radius: 50% !important; border-radius: 50% !important;
margin-right: 62px; margin-right: 62px;
margin-left: 45px; margin-left: 45px;
background: #269db8 !important; background: #BE332F !important;
padding-left: 17px; padding-left: 17px;
} }
} }
@ -438,6 +471,7 @@ $actionBtnSize: 36px;
background: #414040 !important; background: #414040 !important;
} }
} }
@media screen and (min-width: 768px) and (max-width: 1024px) { @media screen and (min-width: 768px) and (max-width: 1024px) {
.normal-Segment { .normal-Segment {
width: 11%; width: 11%;
@ -465,6 +499,7 @@ $actionBtnSize: 36px;
height: 18px; height: 18px;
} }
} }
@media screen and (min-width: 768px) and (max-width: 1024px) { @media screen and (min-width: 768px) and (max-width: 1024px) {
.imgSize { .imgSize {
position: absolute; position: absolute;
@ -480,6 +515,7 @@ $actionBtnSize: 36px;
padding: 15px; padding: 15px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
.img { .img {
width: 100px; width: 100px;
height: 100px; height: 100px;
@ -491,6 +527,7 @@ $actionBtnSize: 36px;
background: transparent; background: transparent;
margin-left: 119%; margin-left: 119%;
} }
.img-ar { .img-ar {
width: 100px; width: 100px;
height: 100px; height: 100px;
@ -502,6 +539,7 @@ $actionBtnSize: 36px;
background: transparent; background: transparent;
margin-right: 119%; margin-right: 119%;
} }
///////////////////////// Team Members css //////////////////////@extend ///////////////////////// Team Members css //////////////////////@extend
.filters-row { .filters-row {
@ -509,11 +547,13 @@ $actionBtnSize: 36px;
} }
.search-dropdown { .search-dropdown {
background: #269db8; background: #BE332F;
ion-select { ion-select {
.select-text { .select-text {
margin-left: -10px; margin-left: -10px;
} }
.select-icon { .select-icon {
.select-icon-inner { .select-icon-inner {
opacity: 1; opacity: 1;
@ -526,6 +566,7 @@ $actionBtnSize: 36px;
.input-container { .input-container {
background: white; background: white;
ion-input { ion-input {
border-bottom-color: transparent; border-bottom-color: transparent;
} }
@ -533,17 +574,20 @@ $actionBtnSize: 36px;
.search-container { .search-container {
margin-top: 15px; margin-top: 15px;
ion-col { ion-col {
background: white; background: white;
border-radius: 12px; border-radius: 12px;
padding-right: 10px; padding-right: 10px;
flex: none; flex: none;
ion-icon { ion-icon {
margin-right: 3px; margin-right: 3px;
font-size: 14px; font-size: 14px;
margin-left: 3px; margin-left: 3px;
vertical-align: middle; vertical-align: middle;
} }
span { span {
font-size: 12px; font-size: 12px;
vertical-align: middle; vertical-align: middle;
@ -567,11 +611,13 @@ $actionBtnSize: 36px;
margin-top: -1px; margin-top: -1px;
margin-left: 43px; margin-left: 43px;
} }
.activeArrow { .activeArrow {
height: 20px; height: 20px;
width: 20px; width: 20px;
color: #269db8; color: #BE332F;
} }
.disabledArrow { .disabledArrow {
height: 20px; height: 20px;
width: 20px; width: 20px;
@ -581,9 +627,10 @@ $actionBtnSize: 36px;
.activeArrow-ar { .activeArrow-ar {
height: 20px; height: 20px;
width: 20px; width: 20px;
color: #269db8; color: #BE332F;
margin-right: 275px; margin-right: 275px;
} }
.disabledArrow-ar { .disabledArrow-ar {
height: 20px; height: 20px;
width: 20px; width: 20px;
@ -608,6 +655,7 @@ $actionBtnSize: 36px;
width: 90%; width: 90%;
left: 5%; left: 5%;
} }
.result-graph-ar { .result-graph-ar {
position: relative; position: relative;
background: white; background: white;
@ -658,6 +706,7 @@ $actionBtnSize: 36px;
right: 5%; right: 5%;
} }
} }
.result-graph-attendence { .result-graph-attendence {
position: relative; position: relative;
background: white; background: white;
@ -678,6 +727,7 @@ $actionBtnSize: 36px;
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 10px; margin-left: 10px;
} }
.request-heading-ar { .request-heading-ar {
text-align: right; text-align: right;
display: block; display: block;
@ -695,12 +745,14 @@ $actionBtnSize: 36px;
display: block; display: block;
text-align: center; text-align: center;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
h2 { h2 {
font-size: 38px; font-size: 38px;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
margin: 0 auto; margin: 0 auto;
line-height: 36px; line-height: 36px;
} }
span { span {
width: 125px; width: 125px;
display: block; display: block;
@ -709,6 +761,7 @@ $actionBtnSize: 36px;
font-family: workSans-Regular; font-family: workSans-Regular;
} }
} }
.today-graph { .today-graph {
// width: 100%; // width: 100%;
max-height: 4cm; max-height: 4cm;
@ -753,6 +806,7 @@ $actionBtnSize: 36px;
line-height: 11px !important; line-height: 11px !important;
display: block; display: block;
} }
h2 { h2 {
font-size: 25px; font-size: 25px;
font-weight: bold; font-weight: bold;
@ -790,6 +844,7 @@ $actionBtnSize: 36px;
margin: 0; margin: 0;
font-size: 14px; font-size: 14px;
} }
span { span {
font-size: 9px; font-size: 9px;
} }
@ -801,6 +856,7 @@ $actionBtnSize: 36px;
margin: 0; margin: 0;
font-size: 14px; font-size: 14px;
} }
span { span {
font-size: 11px; font-size: 11px;
margin-bottom: 3px; margin-bottom: 3px;
@ -815,14 +871,14 @@ $actionBtnSize: 36px;
} }
.green-label-container { .green-label-container {
// border-top: 5px solid #269DB8; // border-top: 5px solid #BE332F;
// padding: 1px 0px; // padding: 1px 0px;
// margin: 15px 0px // margin: 15px 0px
width: 12px; width: 12px;
height: 12px; height: 12px;
padding-right: -10px; padding-right: -10px;
border-radius: 100%; border-radius: 100%;
background-color: #269db8; background-color: #BE332F;
} }
.blue-label-container { .blue-label-container {
@ -836,6 +892,7 @@ $actionBtnSize: 36px;
background-color: #292f42; background-color: #292f42;
margin-top: 30px; margin-top: 30px;
} }
.span-one { .span-one {
// display: block; // display: block;
// font-size: 12px; // font-size: 12px;
@ -847,6 +904,7 @@ $actionBtnSize: 36px;
margin-top: -2px; margin-top: -2px;
font-weight: bold; font-weight: bold;
} }
.span-two { .span-two {
// display: block; // display: block;
// font-size: 22px; // font-size: 22px;
@ -870,6 +928,7 @@ $actionBtnSize: 36px;
margin-top: 28px; margin-top: 28px;
font-weight: bold; font-weight: bold;
} }
.spa-two { .spa-two {
// display: block; // display: block;
// font-size: 22px; // font-size: 22px;
@ -881,11 +940,13 @@ $actionBtnSize: 36px;
font-weight: bold; font-weight: bold;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
} }
.graph-container { .graph-container {
margin-left: -50px; margin-left: -50px;
position: relative; position: relative;
margin-right: 50px; margin-right: 50px;
} }
.label-container { .label-container {
position: absolute; position: absolute;
// width: 20%; // width: 20%;
@ -894,12 +955,14 @@ $actionBtnSize: 36px;
margin-top: -27px; margin-top: -27px;
left: 20px; left: 20px;
} }
.attendance-summary .attendance-information { .attendance-summary .attendance-information {
span { span {
height: 32px; height: 32px;
display: block; display: block;
line-height: 14px; line-height: 14px;
} }
h2 { h2 {
// text-align: right; // text-align: right;
// font-family: WorkSans-Bold; // font-family: WorkSans-Bold;
@ -915,6 +978,7 @@ $actionBtnSize: 36px;
border-radius: 20px; border-radius: 20px;
border: 1px solid #ccc; border: 1px solid #ccc;
padding-bottom: 25px; padding-bottom: 25px;
span { span {
text-align: left; text-align: left;
display: block; display: block;
@ -923,11 +987,13 @@ $actionBtnSize: 36px;
margin-left: 10px; margin-left: 10px;
} }
} }
.calendar-container-ar { .calendar-container-ar {
background: white; background: white;
margin-bottom: 100px; margin-bottom: 100px;
margin-top: 20px; margin-top: 20px;
border-radius: 20px; border-radius: 20px;
span { span {
text-align: right; text-align: right;
display: block; display: block;
@ -958,6 +1024,7 @@ $actionBtnSize: 36px;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
font-size: 16px; font-size: 16px;
} }
.stats { .stats {
color: #289db8; color: #289db8;
font-size: 9px; font-size: 9px;
@ -977,7 +1044,7 @@ $actionBtnSize: 36px;
height: 20px; height: 20px;
padding-right: -10px; padding-right: -10px;
border-radius: 100%; border-radius: 100%;
background-color: #269db8; background-color: #BE332F;
z-index: 9; z-index: 9;
margin-top: 26px; margin-top: 26px;
} }
@ -1005,7 +1072,7 @@ $actionBtnSize: 36px;
.header-background-style-card { .header-background-style-card {
padding-top: 1px; padding-top: 1px;
background: #269db8; background: #BE332F;
height: 115px; height: 115px;
} }
@ -1013,6 +1080,7 @@ $actionBtnSize: 36px;
text-align: center; text-align: center;
width: 20px; width: 20px;
} }
@media screen and (min-width: 1px) and (max-width:766px) { @media screen and (min-width: 1px) and (max-width:766px) {
.grid-card { .grid-card {
right: 5px; right: 5px;
@ -1020,7 +1088,9 @@ $actionBtnSize: 36px;
display: block; display: block;
z-index: 5; z-index: 5;
width: 103%; width: 103%;
}} }
}
@media screen and (min-width: 1px) and (max-width:766px) { @media screen and (min-width: 1px) and (max-width:766px) {
.grid-card-ar { .grid-card-ar {
left: 5px; left: 5px;
@ -1028,7 +1098,9 @@ $actionBtnSize: 36px;
display: block; display: block;
z-index: 5; z-index: 5;
width: 103%; width: 103%;
}} }
}
@media screen and (min-width: 768px) and (max-width:1050px) { @media screen and (min-width: 768px) and (max-width:1050px) {
.grid-card { .grid-card {
right: 5px; right: 5px;
@ -1036,7 +1108,9 @@ $actionBtnSize: 36px;
display: block; display: block;
z-index: 5; z-index: 5;
width: 101%; width: 101%;
}} }
}
@media screen and (min-width: 768px) and (max-width:1050px) { @media screen and (min-width: 768px) and (max-width:1050px) {
.grid-card-ar { .grid-card-ar {
left: 5px; left: 5px;
@ -1044,7 +1118,8 @@ $actionBtnSize: 36px;
display: block; display: block;
z-index: 5; z-index: 5;
width: 101%; width: 101%;
}} }
}
@media screen and (min-width: 1px) and (max-width:766px) { @media screen and (min-width: 1px) and (max-width:766px) {
.changeImgBtn { .changeImgBtn {
@ -1058,7 +1133,9 @@ $actionBtnSize: 36px;
right: 36%; right: 36%;
top: -15%; top: -15%;
z-index: 99; z-index: 99;
}} }
}
@media screen and (min-width: 768px) and (max-width:1050px) { @media screen and (min-width: 768px) and (max-width:1050px) {
.changeImgBtn { .changeImgBtn {
position: absolute; position: absolute;
@ -1071,7 +1148,9 @@ $actionBtnSize: 36px;
right: 41%; right: 41%;
top: -10%; top: -10%;
z-index: 99; z-index: 99;
}} }
}
@media screen and (min-width: 1060px) and (max-width:1090px) { @media screen and (min-width: 1060px) and (max-width:1090px) {
.changeImgBtn { .changeImgBtn {
position: absolute; position: absolute;
@ -1084,7 +1163,8 @@ $actionBtnSize: 36px;
right: 41%; right: 41%;
top: -10%; top: -10%;
z-index: 99; z-index: 99;
}} }
}
@media screen and (min-width: 1px) and (max-width:766px) { @media screen and (min-width: 1px) and (max-width:766px) {
.changeImgBtn-ar { .changeImgBtn-ar {
@ -1098,7 +1178,9 @@ $actionBtnSize: 36px;
left: 36%; left: 36%;
top: -15%; top: -15%;
z-index: 99; z-index: 99;
}} }
}
@media screen and (min-width: 768px) and (max-width:1050px) { @media screen and (min-width: 768px) and (max-width:1050px) {
.changeImgBtn-ar { .changeImgBtn-ar {
position: absolute; position: absolute;
@ -1111,7 +1193,9 @@ $actionBtnSize: 36px;
left: 41%; left: 41%;
top: -10%; top: -10%;
z-index: 99; z-index: 99;
}} }
}
@media screen and (min-width: 1060px) and (max-width:1090px) { @media screen and (min-width: 1060px) and (max-width:1090px) {
.changeImgBtn-ar { .changeImgBtn-ar {
position: absolute; position: absolute;
@ -1124,7 +1208,8 @@ $actionBtnSize: 36px;
left: 46%; left: 46%;
top: -10%; top: -10%;
z-index: 99; z-index: 99;
}} }
}
.menubutton { .menubutton {
background: #f0ecec; background: #f0ecec;
@ -1204,11 +1289,17 @@ $actionBtnSize: 36px;
// opacity: 1; // opacity: 1;
// } // }
.update { .update {
--background: #20A169; background: white; width: 100%; --background: #20A169;
background: white;
width: 100%;
} }
.add { .add {
--background: #00bcd4; background: white; width: 100%; --background: #00bcd4;
background: white;
width: 100%;
} }
.add-icon-styling { .add-icon-styling {
background-color: #191814; background-color: #191814;
width: 35px; width: 35px;
@ -1228,6 +1319,7 @@ $actionBtnSize: 36px;
line-height: 21px; line-height: 21px;
font-size: 21px; font-size: 21px;
} }
.email { .email {
text-align: center; text-align: center;
font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-family: var(--fontFamilyPoppins-SemiBold, inherit);
@ -1291,7 +1383,8 @@ $actionBtnSize: 36px;
opacity: 1; opacity: 1;
margin-top: -3px; margin-top: -3px;
margin-bottom: 2px; margin-bottom: 2px;
margin-left: -11px;} margin-left: -11px;
}
.type-label-text-form { .type-label-text-form {
@ -1337,7 +1430,8 @@ $actionBtnSize: 36px;
opacity: 1; opacity: 1;
margin-top: -3px; margin-top: -3px;
margin-bottom: 2px; margin-bottom: 2px;
margin-left: -11px;} margin-left: -11px;
}
.type-label-text-form-ar { .type-label-text-form-ar {
@ -1359,9 +1453,11 @@ $actionBtnSize: 36px;
color: #2B353E; color: #2B353E;
opacity: 1; opacity: 1;
} }
.create-edit { .create-edit {
font-size: 20px; font-size: 20px;
} }
.profile-green { .profile-green {
background: #20A16A; background: #20A16A;
margin-right: 5px; margin-right: 5px;
@ -1377,6 +1473,7 @@ $actionBtnSize: 36px;
height: 8px; height: 8px;
border-radius: 5px; border-radius: 5px;
} }
.family-member-button { .family-member-button {
width: 115px; width: 115px;
height: 45px; height: 45px;
@ -1387,11 +1484,13 @@ $actionBtnSize: 36px;
border-radius: 20px; border-radius: 20px;
box-shadow: 0px 0px 5px #00000029; box-shadow: 0px 0px 5px #00000029;
} }
.profile-note-en { .profile-note-en {
margin-left: 20px; margin-left: 20px;
margin-top: 5px; margin-top: 5px;
font-size: 13px; font-size: 13px;
} }
.profile-note-ar { .profile-note-ar {
margin-right: 20px; margin-right: 20px;
margin-top: 5px; margin-top: 5px;
@ -1403,11 +1502,13 @@ $actionBtnSize: 36px;
margin-top: 5px; margin-top: 5px;
font-size: 13px; font-size: 13px;
} }
.profile-compilation-ar { .profile-compilation-ar {
margin-left: 20px; margin-left: 20px;
margin-top: 5px; margin-top: 5px;
font-size: 13px; font-size: 13px;
} }
.disabledButton { .disabledButton {
opacity: .5; opacity: .5;
pointer-events: none; pointer-events: none;

@ -34,7 +34,7 @@
</ion-col> </ion-col>
<ion-col> <ion-col>
<ion-button style=" width: 90%; background: white; --background: #269db8" (click)="dismiss('next')" [disabled]="!isChange">{{ts.trPK('general','next')}}</ion-button> <ion-button style=" width: 90%; background: white; --background: #BE332F" (click)="dismiss('next')" [disabled]="!isChange">{{ts.trPK('general','next')}}</ion-button>
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>

@ -16,7 +16,7 @@ export class EditDetailProfileComponent implements OnInit {
public ts: TranslatorService, public ts: TranslatorService,
) { } ) { }
colorRadio = "#269db8" colorRadio = "#BE332F"
ngOnInit() { ngOnInit() {
console.log(this.sourceName); console.log(this.sourceName);

@ -1,12 +1,10 @@
.colorBG { .colorBG {
--background: #f0efef; --background: #f0efef;
} }
.header-div { .header-div {
text-transform: capitalize; text-transform: capitalize;
background: #269DB8; background: #BE332F;
display: block; display: block;
position: relative; position: relative;
height: 160px; height: 160px;
@ -27,6 +25,7 @@
margin-left: 337px; margin-left: 337px;
} }
.profileImg { .profileImg {
width: 25px; width: 25px;
height: 24px; height: 24px;
@ -64,6 +63,7 @@
border: solid #d7d4d4 !important; border: solid #d7d4d4 !important;
} }
.Text { .Text {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -77,6 +77,7 @@
// margin-left: 74px; // margin-left: 74px;
width: 100%; width: 100%;
} }
.Text-ar { .Text-ar {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -134,6 +135,7 @@
margin-top: -7px !important; margin-top: -7px !important;
font-weight: bold !important; font-weight: bold !important;
} }
.label-ar { .label-ar {
font-size: 15px !important; font-size: 15px !important;
margin-top: -7px !important; margin-top: -7px !important;
@ -147,6 +149,7 @@
margin-left: 90px !important; margin-left: 90px !important;
} }
.labelvalue-ar { .labelvalue-ar {
// margin-right: 19px !important; // margin-right: 19px !important;
font-size: 24px !important; font-size: 24px !important;
@ -161,6 +164,7 @@
margin-left: -7px; margin-left: -7px;
} }
.percentage-ar { .percentage-ar {
// margin-right: -54px; // margin-right: -54px;
font-size: 19px !important; font-size: 19px !important;
@ -173,11 +177,10 @@
margin-top: -70px; margin-top: -70px;
} }
.gauge-ar { .gauge-ar {
transform: translate(-24px, -65px); transform: translate(-24px, -65px);
margin-bottom: -187px; margin-bottom: -187px;
margin-top: -20px; margin-top: -20px;
margin-right: -56px; margin-right: -56px;
} }

@ -48,7 +48,7 @@ export class PerformanceEvaluationComponent implements OnInit {
colorScheme = { colorScheme = {
domain: ['#269DB8', '#269DB8', '#3CB9D5', '#1FA269', '#0D155E'] domain: ['#BE332F', '#BE332F', '#3CB9D5', '#1FA269', '#0D155E']
}; };
ngOnInit() { ngOnInit() {

@ -9,7 +9,7 @@
// border-radius: 50% !important; // border-radius: 50% !important;
// } // }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.imgCircle { .imgCircle {
@ -44,11 +44,12 @@ width: 234px;
height: auto !important; height: auto !important;
width: 70% !important; width: 70% !important;
} }
//box-shadow: 0px 0px 0px 10px #8c8c8c; //box-shadow: 0px 0px 0px 10px #8c8c8c;
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }

@ -8,7 +8,8 @@
.Header { .Header {
color: black !important; color: black !important;
font-size: 25px !important; font-size: 25px !important;
font-weight: bold !important;; font-weight: bold !important;
;
margin: 0; margin: 0;
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
@ -32,22 +33,20 @@
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
--background:: #269DB8; --background: #BE332F;
width: 100% !important; width: 100% !important;
color: white !important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
} }
.submitCancelButton { .submitCancelButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
--background:: #269DB8; --background: #BE332F;
width: 100% !important; width: 100% !important;
color: white !important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
} }

@ -12,7 +12,7 @@
.Header { .Header {
font-weight: bold; font-weight: bold;
color: #1a586d !important; color: #c6903e !important;
font-size: 10px; font-size: 10px;
} }
@ -44,6 +44,7 @@
margin: 10px; margin: 10px;
border-radius: 5px; border-radius: 5px;
} }
.submitNote { .submitNote {
background: #ffffff; background: #ffffff;
height: 80px; height: 80px;
@ -68,11 +69,13 @@
background: none; background: none;
background: none; background: none;
border-radius: 32px; border-radius: 32px;
ion-item { ion-item {
// margin-top: 5px; // margin-top: 5px;
// margin-bottom: 5px; // margin-bottom: 5px;
background-color: transparent; background-color: transparent;
.item-date { .item-date {
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;
@ -86,7 +89,9 @@
left: 0; left: 0;
top: 12%; top: 12%;
} }
ion-label , [item-end]{
ion-label,
[item-end] {
white-space: normal; white-space: normal;
font-size: 14px; font-size: 14px;
@ -174,6 +179,7 @@
border: #dedede solid 1px; border: #dedede solid 1px;
} }
.empImgeRep { .empImgeRep {
border-radius: 50% !important; border-radius: 50% !important;
width: 80px; width: 80px;
@ -226,24 +232,28 @@
--border-radius: 20px; --border-radius: 20px;
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
.title { .title {
margin-top: -37px; margin-top: -37px;
margin-left: 85px; margin-left: 85px;
} }
.title-ar { .title-ar {
margin-top: -37px; margin-top: -37px;
margin-right: 101px; margin-right: 101px;
} }
.confirmEitOkButton { .confirmEitOkButton {
white-space: normal !important; white-space: normal !important;
text-transform: capitalize !important; text-transform: capitalize !important;
min-height: 45px !important; min-height: 45px !important;
min-width: 5px !important; min-width: 5px !important;
margin: 8px !important; margin: 8px !important;
background-color: #269DB8; background-color: #BE332F;
width: 80% !important; width: 80% !important;
color: white !important; color: white !important;
border-radius: 16px !important; border-radius: 16px !important;
@ -255,9 +265,9 @@
text-align: right; text-align: right;
} }
.approvalTitle { .approvalTitle {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
text-align: left; text-align: left;
} }

@ -185,7 +185,7 @@
// .header-div { // .header-div {
// background-color: #269DB8; // background-color: #BE332F;
// text-transform: capitalize; // text-transform: capitalize;
// height: 180px; // height: 180px;
// position: relative; // position: relative;
@ -214,7 +214,7 @@
// .navbar{ // .navbar{
// font-size: 10px !important; // font-size: 10px !important;
// --background: #269DB8 !important; // --background: #BE332F !important;
// color: aliceblue !important; // color: aliceblue !important;
// // margin-top: 10px !important; // // margin-top: 10px !important;
@ -224,7 +224,7 @@
// // margin-left:330px !important; // // margin-left:330px !important;
// margin-top: 0px !important; // margin-top: 0px !important;
// font-size: 35px !important; // font-size: 35px !important;
// background: #269DB8; // background: #BE332F;
// color: aliceblue; // color: aliceblue;
// margin-left: 0px !important; // margin-left: 0px !important;
@ -235,7 +235,7 @@
// margin-left:100px !important; // margin-left:100px !important;
// margin-top: 0px !important; // margin-top: 0px !important;
// font-size: 23px !important; // font-size: 23px !important;
// background: #269DB8 !important; // background: #BE332F !important;
// color: aliceblue !important; // color: aliceblue !important;
// } // }
@ -374,7 +374,7 @@
// background:var(--primary); // background:var(--primary);
// background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%); // background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
// background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%); // background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
// background: #269DB8; // background: #BE332F;
// // background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%); // // background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%);
// color:var(--light); // color:var(--light);
// text-transform: capitalize; // text-transform: capitalize;
@ -490,6 +490,7 @@
ion-content { ion-content {
--ion-background-color: whitesmoke; --ion-background-color: whitesmoke;
} }
ion-title { ion-title {
color: white; color: white;
position: absolute; position: absolute;
@ -501,6 +502,7 @@ ion-title{
font-weight: bold; font-weight: bold;
height: 100%; height: 100%;
} }
.contentBg { .contentBg {
padding: 0px 20px; padding: 0px 20px;
} }
@ -508,7 +510,7 @@ ion-title{
.contentBg:before { .contentBg:before {
position: absolute; position: absolute;
content: ""; content: "";
background: #269DB8; background: #BE332F;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
@ -519,6 +521,7 @@ z-index: 1;
.user-info { .user-info {
text-align: center; text-align: center;
margin-bottom: 15px; margin-bottom: 15px;
.user-image-container { .user-image-container {
position: relative; position: relative;
width: 80px; width: 80px;
@ -541,6 +544,7 @@ z-index: 1;
// background-color: green !important; // background-color: green !important;
// } // }
} }
.user-image { .user-image {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -551,6 +555,7 @@ z-index: 1;
border: 1px solid #ccc; border: 1px solid #ccc;
margin: 0px auto 6px; margin: 0px auto 6px;
} }
h1 { h1 {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -558,28 +563,34 @@ z-index: 1;
font-size: 18px; font-size: 18px;
margin-bottom: 4px; margin-bottom: 4px;
} }
span { span {
font-size: 14px; font-size: 14px;
display: block; display: block;
color: #888 color: #888
} }
} }
$actionBtnSize : 36px; $actionBtnSize : 36px;
.user-actions { .user-actions {
text-align: center; text-align: center;
.action-button { .action-button {
font-size: 11px; font-size: 11px;
white-space: nowrap; white-space: nowrap;
color: #888; color: #888;
.action-button-icon { .action-button-icon {
width: $actionBtnSize; width: $actionBtnSize;
height: $actionBtnSize; height: $actionBtnSize;
border-radius: $actionBtnSize; border-radius: $actionBtnSize;
margin: 0 auto; margin: 0 auto;
display: block; display: block;
background-color: #269DB8; background-color: #BE332F;
line-height: $actionBtnSize; line-height: $actionBtnSize;
margin-bottom: 3px; margin-bottom: 3px;
img { img {
margin: 0 auto; margin: 0 auto;
vertical-align: middle; vertical-align: middle;
@ -587,20 +598,24 @@ $actionBtnSize : 36px;
} }
} }
} }
.employee-information-indetail { .employee-information-indetail {
background: white; background: white;
margin-top: 15px; margin-top: 15px;
border-radius: 20px; border-radius: 20px;
margin-bottom: 15px; margin-bottom: 15px;
ion-col { ion-col {
padding: 15px; padding: 15px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
h2 { h2 {
font-size: 13px; font-size: 13px;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
margin: 0; margin: 0;
} }
p { p {
font-size: 13px; font-size: 13px;
margin: 0; margin: 0;
@ -617,26 +632,30 @@ $actionBtnSize : 36px;
.active-Segment { .active-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
background: #269DB8 !important; background: #BE332F !important;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border-radius: 100px; border-radius: 100px;
border: 0; border: 0;
} }
.active-Segment ion-label { .active-Segment ion-label {
font-size: 11px; font-size: 11px;
color: white !important; color: white !important;
} }
.normal-Segment ion-label { .normal-Segment ion-label {
color: black !important; color: black !important;
font-size: 11px; font-size: 11px;
} }
.normal-Segment { .normal-Segment {
font-size: 0.3cm !important; font-size: 0.3cm !important;
text-transform: none; text-transform: none;
--color-checked: none; --color-checked: none;
border: 0; border: 0;
} }
.colum-container { .colum-container {
padding: 15px; padding: 15px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
@ -649,11 +668,13 @@ $actionBtnSize : 36px;
} }
.search-dropdown { .search-dropdown {
background: #269DB8; background: #BE332F;
ion-select { ion-select {
.select-text { .select-text {
margin-left: -10px; margin-left: -10px;
} }
.select-icon { .select-icon {
.select-icon-inner { .select-icon-inner {
opacity: 1; opacity: 1;
@ -666,6 +687,7 @@ $actionBtnSize : 36px;
.input-container { .input-container {
background: white; background: white;
ion-input { ion-input {
border-bottom-color: transparent; border-bottom-color: transparent;
} }
@ -673,17 +695,20 @@ $actionBtnSize : 36px;
.search-container { .search-container {
margin-top: 15px; margin-top: 15px;
ion-col { ion-col {
background: white; background: white;
border-radius: 12px; border-radius: 12px;
padding-right: 10px; padding-right: 10px;
flex: none; flex: none;
ion-icon { ion-icon {
margin-right: 3px; margin-right: 3px;
font-size: 14px; font-size: 14px;
margin-left: 3px; margin-left: 3px;
vertical-align: middle; vertical-align: middle;
} }
span { span {
font-size: 12px; font-size: 12px;
vertical-align: middle; vertical-align: middle;
@ -708,11 +733,13 @@ $actionBtnSize : 36px;
margin-top: -1px; margin-top: -1px;
margin-left: 43px; margin-left: 43px;
} }
.activeArrow { .activeArrow {
height: 20px; height: 20px;
width: 20px; width: 20px;
color: white; color: white;
} }
.disabledArrow { .disabledArrow {
height: 20px; height: 20px;
width: 20px; width: 20px;
@ -729,6 +756,7 @@ $actionBtnSize : 36px;
z-index: 1; z-index: 1;
margin-bottom: 10px; margin-bottom: 10px;
} }
.request-heading { .request-heading {
text-align: left; text-align: left;
display: block; display: block;
@ -736,6 +764,7 @@ $actionBtnSize : 36px;
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 10px; margin-left: 10px;
} }
.request-heading-ar { .request-heading-ar {
text-align: right; text-align: right;
display: block; display: block;
@ -753,12 +782,14 @@ $actionBtnSize : 36px;
display: block; display: block;
text-align: center; text-align: center;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
h2 { h2 {
font-size: 38px; font-size: 38px;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
margin: 0 auto; margin: 0 auto;
line-height: 36px; line-height: 36px;
} }
span { span {
width: 125px; width: 125px;
display: block; display: block;
@ -767,6 +798,7 @@ $actionBtnSize : 36px;
font-family: workSans-Regular; font-family: workSans-Regular;
} }
} }
.today-graph { .today-graph {
width: 100%; width: 100%;
max-height: 4cm; max-height: 4cm;
@ -807,6 +839,7 @@ $actionBtnSize : 36px;
line-height: 11px !important; line-height: 11px !important;
display: block; display: block;
} }
h2 { h2 {
font-size: 25px; font-size: 25px;
font-weight: bold; font-weight: bold;
@ -830,16 +863,19 @@ $actionBtnSize : 36px;
height: 321px !important; height: 321px !important;
border: 1px solid #d6d4d4 !important; border: 1px solid #d6d4d4 !important;
} }
.attendance-information { .attendance-information {
background: white; background: white;
border-radius: 20px; border-radius: 20px;
padding: 10px; padding: 10px;
@media screen and (min-width: 300px) and (max-width:359px) { @media screen and (min-width: 300px) and (max-width:359px) {
h2 { h2 {
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 14px; font-size: 14px;
} }
span { span {
font-size: 9px; font-size: 9px;
} }
@ -851,6 +887,7 @@ $actionBtnSize : 36px;
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
} }
span { span {
font-size: 9px; font-size: 9px;
} }
@ -864,7 +901,7 @@ $actionBtnSize : 36px;
} }
.green-label-container { .green-label-container {
border-top: 5px solid #269DB8; border-top: 5px solid #BE332F;
padding: 1px 0px; padding: 1px 0px;
margin: 15px 0px margin: 15px 0px
} }
@ -874,21 +911,25 @@ $actionBtnSize : 36px;
padding: 1px 0px; padding: 1px 0px;
margin: 15px 0px margin: 15px 0px
} }
.span-one { .span-one {
display: block; display: block;
font-size: 12px; font-size: 12px;
color: black; color: black;
} }
.span-two { .span-two {
display: block; display: block;
font-size: 22px; font-size: 22px;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
} }
.graph-container { .graph-container {
margin-left: -50px; margin-left: -50px;
position: relative; position: relative;
margin-right: 50px; margin-right: 50px;
} }
.label-container { .label-container {
position: absolute; position: absolute;
width: 20%; width: 20%;
@ -896,23 +937,27 @@ $actionBtnSize : 36px;
top: 50%; top: 50%;
margin-top: -60px; margin-top: -60px;
} }
.attendance-summary .attendance-information { .attendance-summary .attendance-information {
span { span {
height: 32px; height: 32px;
display: block; display: block;
line-height: 14px; line-height: 14px;
} }
h2 { h2 {
text-align: right; text-align: right;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
} }
} }
.calendar-container { .calendar-container {
background: white; background: white;
margin-bottom: 100px; margin-bottom: 100px;
margin-top: 20px; margin-top: 20px;
border-radius: 20px; border-radius: 20px;
span { span {
text-align: left; text-align: left;
display: block; display: block;
@ -921,11 +966,13 @@ $actionBtnSize : 36px;
margin-left: 10px; margin-left: 10px;
} }
} }
.calendar-container-ar { .calendar-container-ar {
background: white; background: white;
margin-bottom: 100px; margin-bottom: 100px;
margin-top: 20px; margin-top: 20px;
border-radius: 20px; border-radius: 20px;
span { span {
text-align: right; text-align: right;
display: block; display: block;
@ -934,8 +981,3 @@ $actionBtnSize : 36px;
margin-right: 12px; margin-right: 12px;
} }
} }

@ -185,7 +185,7 @@ export class TimeCardDetailsComponent implements OnInit {
data: [this.absentDays, this.attendedDays], data: [this.absentDays, this.attendedDays],
backgroundColor: [ backgroundColor: [
'#292F42', '#292F42',
'#269DB8' '#BE332F'
], ],
borderWidth: 2 borderWidth: 2
}] }]

@ -2,13 +2,16 @@
.item-md ios { .item-md ios {
white-space: normal; white-space: normal;
} }
.col { .col {
white-space: normal; white-space: normal;
font-size: 14px; font-size: 14px;
} }
ion-col.colBold { ion-col.colBold {
color: #1a586d; color: #c6903e;
} }
.imgSize { .imgSize {
width: 22px; width: 22px;
height: 22px; height: 22px;
@ -24,7 +27,7 @@ ion-card-header {
} }
.header-toolbar { .header-toolbar {
--background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #1a586d 100%); --background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #c6903e 100%);
} }
.btnBack { .btnBack {
@ -49,6 +52,7 @@ ion-card-header {
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
background: #acacac; background: #acacac;
.hrTitle { .hrTitle {
white-space: normal; white-space: normal;
padding: 5px; padding: 5px;
@ -57,6 +61,7 @@ ion-card-header {
min-height: 45px; min-height: 45px;
line-height: 1.2; line-height: 1.2;
} }
.button, .button,
.button-md, .button-md,
button-ios { button-ios {
@ -71,14 +76,14 @@ ion-card-header {
} }
//////////new design//////////////////////// //////////new design////////////////////////
.itemVR .itemVR {
{
background: #f0efef !important; background: #f0efef !important;
--background: #f0efef !important; --background: #f0efef !important;
border: #dbdbdb 1px solid; border: #dbdbdb 1px solid;
border-radius: 10px; border-radius: 10px;
margin-bottom: 7px; margin-bottom: 7px;
} }
.listVR { .listVR {
background: transparent !important; background: transparent !important;
@ -118,15 +123,18 @@ ion-card-header {
font-size: 17px; font-size: 17px;
} }
.label { .label {
margin-top: -19px; margin-top: -19px;
// border-bottom: #eaeaea solid; // border-bottom: #eaeaea solid;
padding-bottom: 8px; padding-bottom: 8px;
color: black !important; color: black !important;
} }
.createdOn { .createdOn {
margin: -12px 0px -14px 0px; margin: -12px 0px -14px 0px;
} }
.optionBtn { .optionBtn {
background: transparent !important; background: transparent !important;
} }

@ -40,7 +40,7 @@ button {
} }
.header-toolbar { .header-toolbar {
--background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #1a586d 100%); --background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #c6903e 100%);
} }
ion-label { ion-label {
@ -114,7 +114,7 @@ ion-label {
} }
.header-toolbar { .header-toolbar {
--background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #1a586d 100%); --background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #c6903e 100%);
} }
.btnBack { .btnBack {
@ -1481,7 +1481,7 @@ div.no-dataDiv {
} }
.header-toolbar-new { .header-toolbar-new {
--background: #269DB8; --background: #BE332F;
} }
@ -1501,7 +1501,7 @@ div.no-dataDiv {
// margin-left:0; // margin-left:0;
// } // }
// .search-dropdown{ // .search-dropdown{
// background: #269DB8; // background: #BE332F;
// ion-select { // ion-select {
// .select-text{ // .select-text{
// margin-left: -10px; // margin-left: -10px;
@ -1591,7 +1591,7 @@ div.no-dataDiv {
color: #fff !important; color: #fff !important;
&:before { &:before {
background-color: #269DB8 !important; background-color: #BE332F !important;
} }
} }
@ -1655,7 +1655,7 @@ div.no-dataDiv {
// border-radius: 50%; // border-radius: 50%;
// } // }
// .absent::after{ // .absent::after{
// background: #269DB8; // background: #BE332F;
// } // }
// .present::after{ // .present::after{
@ -1705,7 +1705,7 @@ table.monthview-datetable th small {
bottom: -8px; bottom: -8px;
.swiper-pagination-bullet-active { .swiper-pagination-bullet-active {
background: #269DB8; background: #BE332F;
} }
} }
@ -1846,4 +1846,8 @@ ion-app[dir="rtl"] {
.iconBox img { .iconBox img {
margin: 5px !important; margin: 5px !important;
} }
.pClass {
text-align: right !important;
}
} }

@ -2,42 +2,52 @@
font-family: WorkSans-Light; font-family: WorkSans-Light;
src: url('../assets/font/WorkSans-Light.otf'); src: url('../assets/font/WorkSans-Light.otf');
} }
@font-face { @font-face {
font-family: GE_SS_TWO_MEDIUM; font-family: GE_SS_TWO_MEDIUM;
src: url('../assets/font/GE_SS_TWO_MEDIUM.otf'); src: url('../assets/font/GE_SS_TWO_MEDIUM.otf');
} }
@font-face { @font-face {
font-family: WorkSans-Medium; font-family: WorkSans-Medium;
src: url('../assets/font/WorkSans-Medium.otf'); src: url('../assets/font/WorkSans-Medium.otf');
} }
@font-face { @font-face {
font-family: GE_SS_Two_Light; font-family: GE_SS_Two_Light;
src: url('../assets/font/GE_SS_Two_Light.otf'); src: url('../assets/font/GE_SS_Two_Light.otf');
} }
@font-face { @font-face {
font-family: WorkSans-Regular; font-family: WorkSans-Regular;
src: url('../assets/font/WorkSans-Regular.otf'); src: url('../assets/font/WorkSans-Regular.otf');
} }
@font-face { @font-face {
font-family: GE_SS_Two_Bold; font-family: GE_SS_Two_Bold;
src: url('../assets/font/GE_SS_Two_Bold.otf'); src: url('../assets/font/GE_SS_Two_Bold.otf');
} }
@font-face { @font-face {
font-family: WorkSans-SemiBold; font-family: WorkSans-SemiBold;
src: url('../assets/font/WorkSans-SemiBold.otf'); src: url('../assets/font/WorkSans-SemiBold.otf');
} }
@font-face { @font-face {
font-family: GE_SS_Two_Bold; font-family: GE_SS_Two_Bold;
src: url('../assets/font/GE_SS_Two_Bold.otf'); src: url('../assets/font/GE_SS_Two_Bold.otf');
} }
@font-face { @font-face {
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
src: url('../assets/font/WorkSans-Bold.otf'); src: url('../assets/font/WorkSans-Bold.otf');
} }
@font-face { @font-face {
font-family: Poppins-SemiBold; font-family: Poppins-SemiBold;
src: url('../assets/font/Poppins-SemiBold.ttf'); src: url('../assets/font/Poppins-SemiBold.ttf');
} }
@font-face { @font-face {
font-family: Poppins-Medium; font-family: Poppins-Medium;
src: url('../assets/font/Poppins-Medium.ttf'); src: url('../assets/font/Poppins-Medium.ttf');
@ -47,14 +57,17 @@
font-family: Poppins-Bold; font-family: Poppins-Bold;
src: url('../assets/font/Poppins/Poppins-Bold.ttf'); src: url('../assets/font/Poppins/Poppins-Bold.ttf');
} }
@font-face { @font-face {
font-family: Poppins-Medium; font-family: Poppins-Medium;
src: url('../assets/font/Poppins/Poppins-Medium.ttf'); src: url('../assets/font/Poppins/Poppins-Medium.ttf');
} }
@font-face { @font-face {
font-family: Poppins; font-family: Poppins;
src: url('../assets/font/Poppins/Poppins-Regular.ttf'); src: url('../assets/font/Poppins/Poppins-Regular.ttf');
} }
:root { :root {
--ion-font-family: 'Poppins'; --ion-font-family: 'Poppins';
--break-small: 450px; --break-small: 450px;
@ -75,7 +88,7 @@
--primary: #3ac1f1; --primary: #3ac1f1;
--secondary: #19a163; --secondary: #19a163;
--danger: #f53d3d; --danger: #f53d3d;
--customnavy: #1a586d; --customnavy: #c6903e;
--light: #ffffff; --light: #ffffff;
--dark: #000000; --dark: #000000;
--gray: #e4e5e7; --gray: #e4e5e7;
@ -89,8 +102,8 @@
--red: #BE1E2D; --red: #BE1E2D;
--blue: #223262; --blue: #223262;
--cyanblue: #1b75bc; --cyanblue: #1b75bc;
--newgreen:#269DB8; --newgreen: #BE332F;
--darkblue:#269DB8; --darkblue: #BE332F;
--lightblue: #3cb9d5; --lightblue: #3cb9d5;
--newred: #cb3232; --newred: #cb3232;
--fontFamilyPoppins-SemiBold: 'Poppins-SemiBold'; --fontFamilyPoppins-SemiBold: 'Poppins-SemiBold';

Loading…
Cancel
Save