.md-stepper-horizontal { width: 95%; margin: 0 auto; background-color: #FFFFFF; box-shadow: 0 3px 8px -6px #DDDDDD; margin: auto; position: relative; border-radius: 25px; } .md-stepper-horizontal .md-step { display: table-cell; position: relative; padding: 20px 10px; text-align: left; } .md-stepper-horizontal .md-step:hover, .md-stepper-horizontal .md-step:active { background-color:rgba(0,0,0,0.04); } .md-stepper-horizontal .md-step:active { border-radius: 15% / 75%; } .md-stepper-horizontal .md-step:first-child:active { border-top-left-radius: 0; border-bottom-left-radius: 0; } .md-stepper-horizontal .md-step:last-child:active { border-top-right-radius: 0; border-bottom-right-radius: 0; } .md-stepper-horizontal .md-step:hover .md-step-circle { background-color:#757575; } .md-stepper-horizontal ion-col:last-child .md-step-bar-left { display:none; } .md-stepper-horizontal .md-step .md-step-circle { width: 30px; height: 30px; border-radius: 50%; text-align: center; line-height: 30px; font-size: 16px; font-weight: 600; color: #FFFFFF; z-index: 3; } .md-stepper-horizontal .md-step:last-child .md-step-circle { margin-left:0px } .md-stepper-horizontal.green .md-step.active .md-step-circle { background-color:#00AE4D; } .md-stepper-horizontal.orange .md-step.active .md-step-circle { background-color:#CC9B14; } .md-stepper-horizontal .md-step.active .md-step-circle { background-color: rgb(33,150,243); } .md-stepper-horizontal .md-step.done .md-step-circle:before { font-family:'FontAwesome'; font-weight:100; content: "\f00c"; } .md-stepper-horizontal .md-step.done .md-step-circle *, .md-stepper-horizontal .md-step.editable .md-step-circle * { display:none; } .md-stepper-horizontal .md-step.editable .md-step-circle { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); } .md-stepper-horizontal .md-step.editable .md-step-circle:before { font-family:'FontAwesome'; font-weight:100; content: "\f040"; } .md-stepper-horizontal .md-step .md-step-title { margin-top: 5px; font-size: 10px; font-weight:bold; } .md-stepper-horizontal .md-step .md-step-title, .md-stepper-horizontal .md-step .md-step-optional { text-align: center; color:rgba(0,0,0,.26); margin-left:0 ; } .md-stepper-horizontal .md-step.orange .md-step-title, .md-stepper-horizontal .md-step.green .md-step-title { font-weight: 600; color:black; } .md-stepper-horizontal .md-step.active.done .md-step-title, .md-stepper-horizontal .md-step.active.editable .md-step-title { font-weight:600; } .md-stepper-horizontal .md-step .md-step-optional { font-size:10px; } .md-stepper-horizontal .md-step .md-step-bar-left, .md-stepper-horizontal .md-step .md-step-bar-right { position: absolute; top: 36px; height: 2px; background: #DDDDDD; width: 120px; z-index: 0; left: 25px; } .md-stepper-horizontal .md-step .md-step-bar-left { margin-right: 0px; left: 40%; } .orange .md-step-bar-left { background:#CC9B14 !important; font-weight: bold; } .green .md-step-bar-left { background:#1FA169 !important; font-weight: bold; } .header{ height: 15%; width: 100%; position: absolute; background: #259CB8; top: 0; } .header-toolbar{ --background: #259CB8 !important; } .bottom{ height: 85%; width: 100%; position: absolute; background: #F5F5F5; top: 15%; } .md-step-optional{ font-size: 12px; background: #cccccc; color: #ffffff !important; padding: 2px 5px 2px 5px; border-radius: 5px; margin: 5px; } .orange .md-step-optional{ font-size: 12px; background: #CC9B14; color: #ffffff !important; padding:2px 5px 2px 5px; border-radius: 5px; margin-left:0 ; } .green .md-step-optional{ font-size: 12px; background-color:#00AE4D; color: #ffffff !important; padding: 2px 5px 2px 5px; border-radius: 5px; } .green .md-step-circle{ background-color:#00AE4D !important; } .orange .md-step-circle{ background: #CC9B14 !important; } .grey .md-step-circle{ background: #E3E3E3 !important; } .content{ position: relative; margin-bottom: 70px; } .offering{ font-weight: bold; margin: 20px 20px 0px; position: relative; } .offering h2{ font-weight: bold; font-size: 20px; margin-bottom: 0; } .sale-icon{ box-shadow: 1px 1px 5px 1px #cccc; padding: 10px; margin: 2px; border-radius: 15px; background: #fff; height: 115px; position: relative; } .sale-icon ion-icon{ font-size: 35px; } .sale-icon p{ margin-bottom: 0; font-size: 12px; font-weight: bold; position: absolute; bottom: 10px; text-align: left; padding: 5px; } .add-details{ background: #fff; margin: 15px; padding: 10px; box-shadow: 0px 0px 2px 1px #ccc; border-radius: 20px; } .add-details ion-item{ border-radius: 25px; border: 1px solid #cdcd; padding: 5px; } .add-details p{ font-weight: normal; font-size: 12px; } .add-details ion-label{ margin: 10px; position: relative; bottom: 3px; } .add-details ion-radio { --color-checked: #009688; } .image-container{ position: relative; height: 70px; } .image-container .uploaded{ position: relative; } .image-container .uploaded .closed{ position: absolute; right: 0; font-size: 14px; color: #fff; top: -10px; right: -10px; font-weight: bolder; background: red; padding: 6px; border-radius: 50%; text-align: center; line-height: .7; } .image-container .uploaded img{ width: 70px; } .footer-button{ background: var(--newgreen)!important;border-radius: 10px; --background: transparent; width: 80%; } .description-details .orange{ color: #CC9B14; font-weight: bold; font-size: 14px; } .description-details img{ margin:10px; } .waring{ color: #CA3332; padding: 10px; font-size: 10px; } .waring label{ font-size: 11px; padding: 0px 10px; display: inline-block; position: relative; position: absolute; } .waring img{ margin: 0px; } .selling h2{ display: inline-block; font-weight: bolder; font-size: 25px; } .selling strong{ font-size: 14px; } .flaot-button{float:right;margin:30px} .orange-border{ border-top:2px solid #CC9B14; } .green-border{ border-top:2px solid #00AE4D; } .md-step span{ position: relative; z-index: 2; } .red-button{ --background:#CA3332; } ion-footer{ bottom: 0; position: fixed; } .small-btn{ width: 40%; } .uploader-box{ border-width: 2px; border-color: #259CB8; border-style: dotted; border-radius: 10px; left: 10px; } .review-title{ font-size: 14px; font-weight: bold; } .camera-icon{ font-size: 35px; position: absolute; margin: auto; left: 0; right: 0; top: 60px; bottom: 0; color: #259CB8; } .top img{ position: absolute; top: 15px; } .upload-container{ display: inline-block; } @media screen and (min-width: 325px){ .fileUpload { position: relative; overflow: hidden; margin: 10px; }} @media screen and (min-width: 1px) and (max-width:320px){ .fileUpload { position: relative; overflow: hidden; margin: 10px; }} .fileUpload input.upload { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } .iconButton .imgSize{ width: 10px !important; height: 10px; } .close-btn{ color: red; font-size: 22px; position: relative; top: 5px; }