.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; 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 .md-step: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; } .md-stepper-horizontal .md-step:last-child .md-step-circle { margin-left:20px } .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); } .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: 80px; } .md-stepper-horizontal .md-step .md-step-bar-right { right:0; left:50%; margin-left:20px; } .md-stepper-horizontal .md-step .md-step-bar-left { margin-right: 0px; left: 55px } .orange .md-step-bar-left { background:#CC9B14 !important; } .green .md-step-bar-left { background:#1FA169 !important; } .header{ height: 150px; width: 100%; position: absolute; background: #259CB8; top: 0; } .header-toolbar{ --background: #259CB8 !important; } .bottom{ height: 88%; width: 100%; position: absolute; background: #F5F5F5; top: 20%; } .md-step-optional{ font-size: 12px; background: #cccccc; color: #ffffff !important; padding: 2px; border-radius: 5px; margin: 5px; } .orange .md-step-optional{ font-size: 12px; background: #CC9B14; color: #ffffff !important; padding: 2px; border-radius: 5px; } .green .md-step-optional{ font-size: 12px; background-color:#00AE4D; color: #ffffff !important; padding: 3px 5px 3px 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: 1px; border-radius: 15px; background: #fff; } .sale-icon ion-icon{ font-size: 35px; } .sale-icon p{ margin-top:5px; margin-top: 5px; margin-bottom: 0; font-size: 12px; font-weight: bold; } .add-details{ background: #fff; margin: 15px; padding: 10px; box-shadow: 3px 4px 3px -1px #ccc; border-radius: 20px; } .add-details ion-item{ border-radius: 25px; border: 1px solid #cdcd; padding: 5px; } .add-details p{ font-weight: bold; font-size: 18px; } .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: -15px; 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:orange } .description-details img{ margin:10px; } .waring{color: red; padding: 10px; font-size: 14px;} .selling h2{ display: inline-block; font-weight: bolder; } .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; } .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: 16px; font-weight: bold; } .camera-icon{ font-size: 35px; position: absolute; margin: auto; left: 0; right: 0; top: 60px; bottom: 0; color: #259CB8; }