// $font-family-base: "WorkSans-Regular" !default; body{ :root[dir="rtl"]{ font-family: var(--fontFamilyIOSAR) !important; } :root[dir="ltr"]{ font-family: var(--fontFamilyMediumEN) !important; } } input, textarea, p ,label,div{ font-size: 16px; :root[dir="rtl"]{ font-family: var(--fontFamilyIOSAR) !important; } :root[dir="ltr"]{ font-family: var(--fontFamilyLightEN) !important; } } h1, h2,h3, button { :root[dir="rtl"]{ font-family: var(--fontFamilyIOSAR) !important; } :root[dir="ltr"]{ font-family: var(--fontFamilyMediumEN) !important; } } .header-toolbar { --background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #1a586d 100%); } ion-label{ color:var(--labelColor) !important; } .tipsPadding{ padding: 0px 10px; } .profileDiv{ margin: 5px auto !important; } .profileDiv-ar{ margin: 16px auto !important; } .full-modal{ --height:100%; --width:100%; } .profileImg{ width: 160px; height: 160px; display: inline-flex; overflow: hidden; background: transparent; -webkit-border-radius:50% !important; -moz-border-radius:50% !important; border-radius: 20% !important; position: relative; top: 7px; // margin:0 auto 40px; img{ -webkit-border-radius:50% !important; -moz-border-radius:50% !important; border-radius: 50% !important; width: 90px; height: 90px; } //box-shadow: 0px 0px 0px 10px #8c8c8c; } .loading-gif{ background: transparent !important; width:100px; height: 100px; } #custom-progress-loader .container{ background: transparent !important; box-shadow: none; -webkit-box-shadow:none; -moz-box-shadow: none; width: 150px; } /***********change header color***************/ .headerBtn{ background-color: transparent; } .headerImg{ width: 36px; } .header-toolbar{ --background: linear-gradient(45deg, #3ac1f1 0%, #19a163 36%, #19a163 59%, #1a586d 100%); } .btnBack{ background: transparent !important; } /***************/ .attachImg{ max-width: 30px; width: 30px; } img.attachImg { max-width: 30px; width: 30px; } .attachImgBtn{ background-color: transparent; } .toolbar-title,.toolbar-title-md,.toolbar-title-ios{ color:(--light); font-size: 18px; } ion-header ion-icon.back-button-icon.icon { color: (--light); font-size: 25px; } ion-header ion-icon.icon.icon-ios.ion-ios-back{ font-size: 25px; } ion-header ion-icon.icon.icon-md.ion-md-back, ion-header ion-icon.icon.icon-md.ion-md-search, ion-header ion-icon.icon.icon-ios.ion-ios-search{ color: (--light); font-size: 18px; } button.disable-hover.item-button.button.button-md.button-clear.button-clear-md , button.disable-hover.item-button.button.button-ios.button-clear.button-clear-ios{ background: transparent; font-size: 16px; color:(--darkgray); } button.item-button.button.button-md.button-clear.button-clear-md, button.item-button.button.button-ios.button-clear.button-clear-ios { background: transparent; font-size: 16px; color:(--darkgray); } ion-header ion-icon.icon.icon-md.ion-md-close, ion-header ion-icon.icon.icon-ios.ion-ios-close{ color: (--light); } ion-header ion-icon.icon.icon-md.ion-md-add, ion-header ion-icon.icon.icon-ios.ion-ios-add{ color: (--light); } ion-icon.icon.icon-md.ion-md-search, ion-icon.icon.icon-ios.ion-ios-search{ color: (--darkgray); } .toolbar-background { background: var(--primary); background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%); background: -webkit-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%); background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--primary)', endColorstr='--var(customnavy)',GradientType=1 ); } /***************button bckground***************/ a{ color:var(--primary); } .button,.button-md, button-ios{ background:var(--customnavy); white-space: normal; // background: $primary; // background: -moz-linear-gradient(45deg, $primary 0%, $secondary 36%, $secondary 59%, $customnavy 100%); // background: -webkit-linear-gradient(45deg, $primary 0%,$secondary 36%,$secondary 59%,$customnavy 100%); // background: linear-gradient(45deg, $primary 0%,$secondary 36%,$secondary 59%,$customnavy 100%); // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$primary', endColorstr='$customnavy',GradientType=1 ); color:var(--light); text-transform: capitalize; // min-width: 200px; min-height: 45px; } .iconButton{ min-width: auto; min-height: auto; } /*********select style************/ ion-item.item.item-block.item-md.item-select.ng-touched, ion-item.item.item-block.item-ios.item-select.ng-touched, ion-item.item.item-block.item-md.item-datetime.ng-touched, ion-item.item.item-block.item-ios.item-datetime.ng-touched { border-bottom: 2px solid var(--danger); } ion-item.item.item-block.item-md.item-select.ng-touched.input-has-value.item-input-has-value, ion-item.item.item-block.item-ios.item-select.ng-touched.input-has-value.item-input-has-value, ion-item.item.item-block.item-md.item-datetime.ng-touched.input-has-value.item-input-has-value, ion-item.item.item-block.item-ios.item-datetime.ng-touched.input-has-value.item-input-has-value { border-bottom: 0px; } /********center element****************/ .centerDiv{ margin:auto; text-align: center; display: block; // .button,.button-md, button-ios{ // min-width: 200px; // } .iconButton{ min-width: auto; min-height: auto; } } /***********item icon************/ .item-icon{ width:25px; height:25px; } [dir="ltr"] .item-icon{ margin: 9px 8px 9px 0; } [dir="rtl"] .item-icon{ margin: 6px 0px 9px 9px; } /**********text format**********/ p.text-caps{ text-transform: uppercase; } .boldTxt,p.boldTxt,.boldTxt>label { :root[dir="ltr"]{ font-family: var(--fontFamilyBoldEN) !important; } :root[dir="rtl"]{ font-family: var(--fontFamilyIOSAR) !important; font-weight: bold; } } .boldTxtNav,p.boldTxtNav,.boldTxtNav>label { color: var(--dark) !important; :root[dir="ltr"]{ font-family: var(--fontFamilyBoldEN) !important; } :root[dir="rtl"]{ font-family: var(--fontFamilyIOSAR) !important; font-weight: bold; } } ion-label.boldTxtNav.label.label-md,ion-label.boldTxtNav.label.label-ios{ // font-weight: bold; color:var(--dark); :root[dir="ltr"]{ font-family: var(--fontFamilySemiBoldEN) !important; } :root[dir="rtl"]{ font-family: var(--fontFamilyIOSAR) !important; font-weight: bold; } } /******* label stacked***********/ .label-md[stacked], .label-ios[stacked] { font-size: 16px; } /**********input **************/ input.text-input.text-input-md, input.text-input.text-input-ios{ font-size: 16px; :root[dir="ltr"]{ text-align: left; } :root[dir="rtl"]{ text-align: right; } } ion-datetime.datetime.datetime-md.ng-valid.ng-dirty.ng-touched, ion-datetime.datetime.datetime-ios.ng-valid.ng-dirty.ng-touched { direction: ltr !important; text-align: left !important; } /**********background************/ .gray-bg{ background-color:var(--gray); margin-top: 10px; } /***************select and alert ************/ .alert-md .alert-head,.alert-ios .alert-head{ background-color:var(--grayBG); color: var(--light); } /********profile grid************/ // .profile-grid{ // .col{ // text-align: center; // } // } /**********card**********/ ion-card ,ion-card-md ,ion-card-ios { box-shadow: black; // background-color: #99999938; -webkit-border-top-left-radius: 10px !important; -webkit-border-top-right-radius: 10px !important; -moz-border-radius-topleft: 10px !important; -moz-border-radius-topright: 10px !important; border-top-left-radius: 10px !important; border-top-right-radius: 10px !important; } ion-card-content { background-color: white; } ion-card-header{ padding: 0px 10px !important; color: var(--light) !important; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; background: var(--grayBG); .hrTitle{ white-space: normal; padding: 5px; padding-top: 12px; width:85%; min-height: 45px; @media screen and (max-width: var(--break-big)) { width: 80%; } @media screen and (max-width: var(--break-small)) { width: 74%; } :root[dir="ltr"]{ float:left; } :root[dir="rtl"]{ float:right; } line-height: 1.2; } .button,.button-md, button-ios{ background: transparent; box-shadow: none; -webkit-box-shadow:none; -moz-box-shadow: none; min-width: auto; padding: 0px !important; margin:0px 5px !important; :root[dir="ltr"]{ float:right; } :root[dir="rtl"]{ float:left; } } } ion-col.colBold,ion-col.colBold>label{ // font-weight: bold; color:var(--customnavy); font-weight:bold; // :root[dir="ltr"]{ // font-family: var(--fontFamilyBoldEN) !important; // } // :root[dir="rtl"]{ // font-family: var(--fontFamilyIOSAR) !important; // font-weight: bold; // } font-size: 15px; } // .boldTxt{ // font-weight: bold; // } // p.boldTxt{ // font-weight: bold; // } /**********button grid***********/ // .gridBtn{ // height: auto; // min-height: 35px !important; // padding: 10px; // font-size: 12px; // white-space: normal; // } // button.gridBtn.button.button-md, // button.gridBtn.button.button-ios, // button.gridBtn.button.button // { // width: 90%; // } // .gridBtnCol{ // text-align: center; // } // .btnGrid{ // padding:0px; // } .floating-form { width:320px; } // /**** floating-Lable style start ****/ // .floating-label { // position:relative; // margin-bottom:20px; // } // .floating-input , .floating-select { // font-size:14px; // padding:4px 4px; // display:block; // width:100%; // height:30px; // background-color: transparent; // border:none; // border-bottom:1px solid #757575; // } // .floating-input:focus , .floating-select:focus { // outline:none; // border-bottom:2px solid #5264AE; // } // label { // color:#999; // font-size:14px; // font-weight:normal; // position:absolute; // pointer-events:none; // left:5px; // top:5px; // transition:0.2s ease all; // -moz-transition:0.2s ease all; // -webkit-transition:0.2s ease all; // } // .floating-input:focus ~ label, .floating-input:not(:placeholder-shown) ~ label { // top:-18px; // font-size:14px; // color:#5264AE; // } // .floating-select:focus ~ label , .floating-select:not([value=""]):valid ~ label { // top:-18px; // font-size:14px; // color:#5264AE; // } // /* active state */ // .floating-input:focus ~ .bar:before, .floating-input:focus ~ .bar:after, .floating-select:focus ~ .bar:before, .floating-select:focus ~ .bar:after { // width:50%; // } // *, *:before, *:after { // -webkit-box-sizing: border-box; // -moz-box-sizing: border-box; // box-sizing: border-box; // } // .floating-textarea { // min-height: 30px; // max-height: 260px; // overflow:hidden; // overflow-x: hidden; // } // /* highlighter */ // .highlight { // position:absolute; // height:50%; // width:100%; // top:15%; // left:0; // pointer-events:none; // opacity:0.5; // } // /* active state */ // .floating-input:focus ~ .highlight , .floating-select:focus ~ .highlight { // -webkit-animation:inputHighlighter 0.3s ease; // -moz-animation:inputHighlighter 0.3s ease; // animation:inputHighlighter 0.3s ease; // } // /* animation */ // @-webkit-keyframes inputHighlighter { // from { background:#5264AE; } // to { width:0; background:transparent; } // } // @-moz-keyframes inputHighlighter { // from { background:#5264AE; } // to { width:0; background:transparent; } // } // @keyframes inputHighlighter { // from { background:#5264AE; } // to { width:0; background:transparent; } // } // /**** floating-Lable style end ****/ /*** Body style start ***/ // html { // font-family: "Helvetica Neue", Helvetica, "Noto Sans", sans-serif, Arial, sans-serif; // font-size: 12px; // line-height: 1.42857143; // color: #949494; // background-color: #ffffff; // } /*** Body style end ***/ /*** daniel - Fork me friend - style ***/ // .floating-credit { position:fixed; bottom:10px;right:10px; color:#aaa; font-size:13px;font-family:arial,sans-serif; } // .floating-credit a { text-decoration:none; color:#000000; font-weight:bold; } // .floating-credit a:hover { border-bottom:1px dotted #f8f8f8; } // .floating-heading { position:fixed; color:#aaa; font-size:20px; font-family:arial,sans-serif; } /*** daniel - Fork me friend - style ***/ /**************************TEST********************888/ /*****************dynamic form*******************/ .dynamicField{ border-radius: 30px; border: 1px solid #a2a5a6!important; margin-bottom: 20px; } .daynamicForm-Label{ font-size: 16px; // margin-left: 15px; color: #a2a5a6 !important; display: block; overflow: hidden; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; /* font-size: inherit; */ // text-overflow: ellipsis; // white-space: nowrap; white-space: normal; // padding-top: 10px; padding: 5px 0px; padding-left: 10px !important; margin: 10px auto; :root[dir="ltr"]{ font-family: var(--fontFamilySemiBoldEN) !important; } :root[dir="rtl"]{ font-family: var(--fontFamilyIOSAR) !important; font-weight: bold; } } .ardaynamicForm-Label{ font-size: 16px; // margin-left: 15px; color: #a2a5a6 !important; display: block; overflow: hidden; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; /* font-size: inherit; */ // text-overflow: ellipsis; // white-space: nowrap; white-space: normal; // padding-top: 10px; padding: 5px 0px; padding-left: 10px !important; margin: 10px auto; margin-right: 12px !important; :root[dir="ltr"]{ font-family: var(--fontFamilySemiBoldEN) !important; } :root[dir="rtl"]{ font-family: var(--fontFamilyIOSAR) !important; font-weight: bold; } } img.flipImg{ :root[dir="rtl"]{ -webkit-transform: scaleX(-1); transform: scaleX(-1); } } .daynamicForm-Input{ width: 100%; border: none; border-bottom: var(--gray) solid 1px; border-radius: 0px; // margin-left: 10px; // text-align: right; color: var(--dark); font-size: 15px; padding: 6px 0px; } .daynamicForm-Button{ background:var(--customnavy); white-space: normal; // background: $primary; // background: -moz-linear-gradient(45deg, $primary 0%, $secondary 36%, $secondary 59%, $customnavy 100%); // background: -webkit-linear-gradient(45deg, $primary 0%,$secondary 36%,$secondary 59%,$customnavy 100%); // background: linear-gradient(45deg, $primary 0%,$secondary 36%,$secondary 59%,$customnavy 100%); // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$primary', endColorstr='$customnavy',GradientType=1 ); color:var(--light); text-transform: capitalize; min-width: 200px; min-height: 45px; font-weight: 500; border: none; border-radius: 2px; -ms-flex: 1; flex: 1; font-size: 14px; padding: 0 1.1em; margin: 0.4rem 0.2rem; justify-content: center; } .custom-button-element{ //margin-top: 10px; margin: 10px auto; text-align: center; } .daynamicForm-DateTime{ color: var(--dark); font-size: 15px; border: none; font-weight: 400; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); width: 100%; padding: 6px 0px; // background: var(--light); border-bottom: var(--cusgray) solid 1px; border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; box-shadow: none; -webkit-box-shadow:none; -moz-box-shadow: none; margin-bottom: 8px; } .daynamicForm-DateTime:after{ width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #999; border-radius: 0px; position: absolute; top: 40%; :root[dir="ltr"]{ right: 5px; } :root[dir="rtl"]{ left: 5px; } content: ""; z-index: 98; margin-left: 31px; } .daynamicForm-Select{ color: var(--dark); font-size: 15px; // background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0; // background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiP…AgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=), -webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(0, 0, 0, 0.12)), color-stop(50%, rgba(0, 0, 0, 0.12))); // background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiP…AgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=), linear-gradient(to top, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.12) 50%); // background-size: 96% 0; // background-repeat: no-repeat; border: none; font-weight: 400; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); width: 80%; padding: 6px 0px; background-color: var(--light); border-bottom: var(--cusgray) solid 1px; border-radius: 0px; // margin-left: 20px; margin-left: 34px; margin-top: -10px; // -webkit-appearance: none; // -moz-appearance: none; text-indent: 1px; // text-overflow: ''; box-shadow: none; -webkit-box-shadow:none; -moz-box-shadow: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; :root[dir="ltr"]{ background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%), linear-gradient(to right, #ffffff, #ffffff); background-position: calc(100% - 14px) calc(1em + 2px), calc(100% - 8px) calc(1em + 2px), 100% 0; background-size: 6px 6px, 6px 6px, 2.9em 2.9em; background-repeat: no-repeat; padding-right: 20px; } :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-position: calc(1em - 10px) calc(100% - 8px), calc(1em - 4px) calc(100% - 8px), 0 100%; background-size: 6px 6px, 6px 6px, 2.9em 2.9em; background-repeat: no-repeat; padding-left: 20px; } } .ardaynamicForm-Select{ color: var(--dark); font-size: 15px; // background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0; // background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiP…AgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=), -webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(0, 0, 0, 0.12)), color-stop(50%, rgba(0, 0, 0, 0.12))); // background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiP…AgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=), linear-gradient(to top, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.12) 50%); // background-size: 96% 0; // background-repeat: no-repeat; border: none; font-weight: 400; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); width: 80%; padding: 6px 0px; background-color: var(--light); border-bottom: var(--cusgray) solid 1px; border-radius: 0px; margin-right: 34px; margin-top: -10px; // -webkit-appearance: none; // -moz-appearance: none; text-indent: 1px; // text-overflow: ''; box-shadow: none; -webkit-box-shadow:none; -moz-box-shadow: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; :root[dir="ltr"]{ background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%), linear-gradient(to right, #ffffff, #ffffff); background-position: calc(100% - 14px) calc(1em + 2px), calc(100% - 8px) calc(1em + 2px), 100% 0; background-size: 6px 6px, 6px 6px, 2.9em 2.9em; background-repeat: no-repeat; padding-right: 20px; } :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-position: calc(1em - 10px) calc(100% - 8px), calc(1em - 4px) calc(100% - 8px), 0 100%; background-size: 6px 6px, 6px 6px, 2.9em 2.9em; background-repeat: no-repeat; padding-left: 20px; } } .daynamicForm-Select:after{ width: 0; height: 0; border-radius: 0px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #999; position: absolute; top: 40%; :root[dir="ltr"]{ right: 5px; } :root[dir="rtl"]{ left: 5px; } z-index: 98; } .requiredClass::before{ content:"* "; } .requiredClassElm{ border-bottom:2px solid var(--danger); } textarea:disabled, input:disabled ,.daynamicForm-Select:disabled, .daynamicForm-DateTime:disabled{ background: rgba(204, 204, 204, 0.11); } div.daynamicForm-DateTime.disabled{ background: rgba(204, 204, 204, 0.11); } .iconButton{ background: transparent; -webkit-box-shadow:none; -moz-box-shadow: none; box-shadow: none; } .imgSize{ width: 22px !important; height: 22px; -webkit-box-shadow:none; -moz-box-shadow: none; box-shadow: none; } /************footer****************/ ion-footer { padding:15px 0px; background-color: var(--light) !important; border: 0px !important; box-shadow: none !important; -webkit-box-shadow:none; -moz-box-shadow: none; } .footer-md::before,.footer-ios::before{ background-color: var(--light) !important; background-image:none; border: 0px !important; box-shadow: none !important; -webkit-box-shadow:none; -moz-box-shadow: none; } /*************progress bar****************/ .progcontainer { margin: auto; text-align: center; width: 100%; min-height: 100px; } .cusprogressbar { counter-reset: step; padding: 0px; } .cusprogressbar li { list-style-type: none; width: 33.333%; :root[dir="ltr"]{ float: left; } :root[dir="rtl"]{ float: right; } font-size: 12px; position: relative; text-align: center; color: var(--darkgray); :root[dir="ltr"]{ font-family:var(--fontFamilySemiBoldEN); } :root[dir="rtl"]{ font-family: var(--fontFamilyIOSAR); font-weight: bold; } } .cusprogressbar li:before { width: 40px; height: 40px; content: counter(step); color: var(--light); counter-increment: step; line-height: 40px; border: 0px; background-color: var(--grayBG); display: block; text-align: center; margin: 0 auto 10px auto; border-radius: 50%; } .cusprogressbar li:after { width: 100%; height: 2px; content: ''; position: absolute; background-color: var(--cusgray); top: 20px; :root[dir="ltr"]{ left: -50%; } :root[dir="rtl"]{ right: -50%; } z-index: -1; } .cusprogressbar li:first-child:after { content: none; } .cusprogressbar li.active { color: var(--custgreen); } .cusprogressbar li.active:before { background-color: var(--custgreen); } //.cusprogressbar li.active + li:after { // background-color: #55b776; //color: $custgreen; //} /**************badge **********************/ .badge-md,.badge-ios { color: #fff; background-color: #327eff; background: red; border-radius: 50% !important; min-width: 30px; min-height: 30px; line-height: 2; } /**********no data div***********/ div.no-dataDiv{ .row { border-bottom: 1px solid; border-color:var(--cusgray); } h4 { font-size: 140%; text-align: center; color: #888888; } .empty-data { font-size: 10.2em; display: block; margin: .2em auto 0; color: var(--custgreen); } } .toast-md .toast-message,.toast-ios .toast-message { background-color: var(--secondary); } /*************picker style*********************/ .picker-md .picker-opt,.picker-ios .picker-opt{ font-size: 18px; } .picker-md .picker-col,.picker-ios .picker-col { padding: 0px 2px !important; } .progress-loading-page{ position: fixed; height: 100%; z-index: 1000000; width: 100%; background: rgba(0, 0, 0, 0.3); touch-action: none; text-align: center; top: 0; bottom: 0; display: flex; } .progress-loading-page .container { background: transparent !important; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; width: 100px !important; margin: auto; } .progress-loading-page .loading-gif { margin-top: 0.42cm; width:100%; } .centerDiv .button{width:200px;} .note-modal { // width: 90%; // height: 50%; // top: 20%; // left: 5%; // right: 5%; // bottom: 5%; background: rgba(0, 0, 0, 0.5) !important; padding: 60% 10% !important; padding: 30% 10% !important; --height: 12cm !important; // --width: 80% !important; --border-radius: 0.4cm; } .replaceRoll-modal { padding: 30% 1% !important; --height: 15cm !important; --width: 100% !important; --border-radius: 0.4cm; } .slides-gray-bullets { // --bullet-background: var(--primary) !important; // --bullet-background-active: var(--secondary) !important; --bullet-background: var(--cusgray) !important; //var(--primary) !important; --bullet-background-active: var(--darkgray) !important; --bullet-border: solid 1px var(--cusgray) !important; } .slides-gray-bullets .swiper-pagination { top: 0.2cm !important; } .swiper-container-horizontal>.swiper-pagination-bullets { width: initial; top: 34%; right: 0; bottom: inherit; // left: inherit; } .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 5px; width: 12px; height: 12px; } // .skipbutton,.button-md, button-ios{ .skipbutton{ width: 100px; --background: var(--orange); white-space: normal; color: var(--light); text-transform: capitalize; min-height: 45px; background: var(--orange); float: right; border-top-left-radius: 7px; border-top-right-radius: 7px; --background-focused: none; --background-hover: none; } .cancelBtn { background:var(--darkblue) !important; white-space: normal !important; color:var(--light) !important; text-transform: capitalize !important; // min-width: 200px; min-height: 45px !important; border-radius: 5px !important; width:125px !important; min-width: 5px !important; width: 10px !important; margin: 8px !important; --background:transparent; } .confirmBtn { background:var(--newgreen) !important; white-space: normal !important; color:var(--light) !important; text-transform: capitalize !important; // min-width: 200px; min-height: 45px !important; border-radius: 5px !important; width:125px !important; min-width: 5px !important; width: 10px !important; margin: 8px !important; --background:transparent; } .checkOutOkBtn{ margin-left: 50px !important; margin-right: 55px !important; margin-top: 10px !important; margin-bottom: 10px !important; border-radius: 5px !important; height: 40px !important; min-height: 40px !important; background: var(--lightblue) !important; -webkit-box-flex: 1; flex: 1 1 auto; border-top: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); border-right: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); color: white !important; border: none !important; width: 80%; --background: var(--lightblue) !important; } .checkOutCancelBtn{ margin-left: 50px !important; margin-right: 55px !important; margin-top: 10px !important; margin-bottom: 10px !important; border-radius: 5px !important; height: 40px !important; min-height: 40px !important; background: var(--darkblue) !important; -webkit-box-flex: 1; flex: 1 1 auto; border-top: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); border-right: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); color: white !important; border: none !important; width: 80%; --background: var(--darkblue) !important; } .buttonClassWhite { border-radius: 10px !important; width: 95% !important; height: 3.7cm !important; background: var(--newred) !important; box-shadow: none !important; border: 1px solid #cccccc !important; } .nationalIdIcon { text-align: center; margin: 0 auto; display: block; padding-top: 14px; max-height: 130px !important; } .pClassMyFileIconBlack { color: #515a5d !important; font-weight: bold !important; font-size: 15px !important; // margin-top: cm !important; } .logo { max-width:150%; width:150%; border:0px } .logoHeader { max-width: 130%; width: 130%; border: 0px; } .headerTxt{ font-size: 20px; font-weight: bold; } .login-input { border: none; } .item-input-login{ --min-height: 1.0cm !important; --border-radius: 12px; --ion-color-base: white !important; // --background: color: var(--darkgray) !important; // background: #7f8c8d !important; border-radius: 33px; --border: solid #9999992b !important; border: solid #9999992b !important; margin-bottom :12px; margin-left: 12px; margin-right: 12px; } .button-login{ --background: var(--newgreen) !important; background: var(--newgreen) !important; white-space: normal; color: var(--light); text-transform: capitalize; min-height: 1.0cm; --border-radius: 33px !important; border-radius: 33px !important; --min-height: 1.6cm !important; width: 315px !important; } .active-Segment { border-radius: 25px !important; // font-size: 0.3cm !important; background: var(--newgreen) !important; color: var(--light) !important; font-weight: bold !important; text-transform: none; border: none; } .normal-Segment { border-radius: 10px !important; // font-size: 0.3cm !important; background: rgba(255, 255, 255, 0) !important; color: var(--dark) !important; font-weight: bold !important; text-transform: none; border: none; } .active-Segment, .normal-Segment { flex: 1 100%; } .ion-segment-all { height: 50px !important; background: white !important; border-radius: 25px !important; border: 1px solid #cccccc; margin-top: 10px; } .more-modal { background: rgba(0, 0, 0, 0.5) !important; padding: 30% 10% !important; --height: 12cm !important; --border-radius: 0.4cm; } // .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { // /* bottom: 10px; */ // left: 0; // width: 100%; // // .employee-slider .custom-button{ // padding: 13px !important; // } // .employee-slider .iconBox img{ // max-width: 40% !important; // } .advanced-search-modal { --height: 12cm !important; --width: 88% !important; --border-radius: 0.6cm; } .slideFullWidth { margin-left:-15px; margin-right:-15px; } .slideFullWidth .swiper-container .swiper-wrapper .swiper-slide:first-child { margin-left:15px; } .alert-button-group.sc-ion-alert-md, .alert-button.sc-ion-alert-ios { text-align: center; } .alert-message.sc-ion-alert-md, .alert-message.sc-ion-alert-ios, .alert-sub-title.sc-ion-alert-md, .alert-title.sc-ion-alert-md, .alert-sub-title.sc-ion-alert-ios, .alert-title.sc-ion-alert-ios { text-align: center; } .alert-button-inner.sc-ion-alert-md { justify-content: center !important; } .replaceRoll-modal { padding: 30% 1% !important; --height: 15cm !important; --width: 100% !important; --border-radius: 0.4cm; } .replaceRoll-modal2 { padding: 5% 1% !important; --height: 100% !important; --width: 100% !important; --border-radius: 0.4cm; } .header-md:after { height: 0px !important; display: none !important; } .attendance-home .header-toolbar-new { --background: #094773 !important; } .header-toolbar-new { --background: #269DB8; } .boldText{ color: var(--dark) !important; font-weight: bold; font-size: 20px; } .boldP{ font-size: 20px; } // .select-text{ // --margin-left: -10px; // margin-left:0; // } // .search-dropdown{ // background: #269DB8; // ion-select { // .select-text{ // margin-left: -10px; // } // .select-icon{ // .select-icon-inner{ // opacity: 1; // color: white; // margin-top: -1px; // } // } // } // } .monthview-primary-with-event, .absent, .present, .dayoff { background-color: #fff !important; z-index: 1; color: #fff !important; position: relative; } .advanced-search-modal-custom { --height: 9cm !important; --width: 80% !important; --border-radius: 0.4cm; } .calendar-modal { --height: 14.5cm !important; --width: 88% !important; --border-radius: 0.4cm; } .nfc-modal { --height: 12cm !important; --width: 90% !important; --border-radius: 0.4cm; } .wifi-modal { --height: 10cm !important; --width: 90% !important; --border-radius: 0.4cm; } .monthview-datetable { @media screen and (min-width: 300px) and (max-width:360px) { *{ font-size: 9px !important; font-weight: normal !important; } } @media screen and (min-width: 361px) { *{ font-size: 11px !important; font-weight: normal !important; } } thead th { border:none !important; color:#888; } tbody td{ border:none !important; line-height: 40px !important; background: none !important; padding: 0 !important; &.text-muted { visibility: hidden; } &.monthview-selected { color: black; } &.monthview-selected.present, &.present { color:#fff !important; &:before { background-color: #269DB8 !important; } } &.monthview-selected.absent, &.absent { color:#fff !important; &:before { background-color:#292F42 !important; } } &.monthview-selected.dayoff, &.dayoff { color:#555 !important; &:before { background-color:#e5e5e5 !important; } } &.monthview-selected.scheduleDay, &.scheduleDay { color: #000 !important; &:before { background-color: #fff !important; border: 1px solid #ccc !important; } } &:before { content: ""; width: 40px; height: 40px; display: block; border-radius: 100px; text-align: center; margin: 9px auto -40px; } } } .table-bordered{ border:none !important; } // .monthview-primary-with-event::after, .absent::after, .present::after, .dayoff::after { // content: " "; // width: 80%; // height: 3px; // background: #77cfb8; // position: absolute; // bottom: 0; // left: 0; // right: 0; // margin: auto; // height: 100%; // color: #fff; // z-index: -1; // border-radius: 50%; // } // .absent::after{ // background: #269DB8; // } // .present::after{ // background: #77cfb8; // } // .dayoff::after{ // background: gray; // } [dir=ltr] .monthview-container .swiper-slide, [dir=rtl] .monthview-container .swiper-slide { margin: 0 !important; } table.monthview-datetable th small { font-size: 60%; } .modal-wrapper{ border-radius: 20px !important; } .disable-phone { pointer-events: none; opacity: .3; } // .replaceRoll-modal { // padding: 30% 1% !important; // --height: 15cm !important; // --width: 100% !important; // --border-radius: 0.4cm; // } .calendar-modal .swiper-container-horizontal > .swiper-pagination-bullets{ top: auto; bottom: -8px; .swiper-pagination-bullet-active { background: #269DB8; } } .alert-wrapper { min-width: 80% !important;//what ever you like } .disable-button-opacity { opacity: .2; } .digital-id-modal-css .modal-wrapper { height: 90%; width: 90%; top: 3%; position: absolute; display: block; } .fav-employee-details{ font-size: 20px; position: absolute; bottom: 85px; font-weight: bold; color: black !important; padding: 5px; } .fav-profileImageDiv{ width: 100%; text-align: start; } ion-segment-button { --indicator-color: transparent !important; --indicator-color-checked: transparent !important; } #surveyRatingNew ion-button{ background: #fff !important; } #surveyRatingNew ion-buttons{ border-radius: 12px; background: #fff; width: 75%; margin: auto; } .filter-modal .modal-wrapper{ border-radius: 0px !important; }