html,
body {
  position: relative;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: #fff;
}

.container {
    width: 80%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    /* -moz-appearance: textfield; */
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1f1f1f
}

/* Zero Step Start */
.info-content {
    width: 100%;
}
.zero-step ul {
    margin: 0;
    padding: 0;
}
.zero-step h1 {
    font-size: 58px;
    letter-spacing: -0.2px;
    line-height: 70px;
    font-weight: 300;
    color: #fff;
    width: 100%;
    margin: 0 auto 0;
    margin-bottom: 15px;
}
.zero-step span {
    color: #28e98c;
    font-weight: 400;
}
.zero-text ul li {
    list-style-type: none;
}
.create-brand-btn {
    cursor: pointer;
    background: #28e98c;
    color: #fff;
    width: 200px;
    padding: 10px 0;
    text-align: center;
    border-radius: 30px;
    margin: 30px auto;
    font-weight: 600;
}
.create-brand-btn:hover {
    background: #17c671;
}

.create-brand-btn.disabled {
    background: #f000;
    border: 1px solid #fff;
    cursor: not-allowed;
}
.create-brand-btn.disabled:hover {
    background: #f000;
    border: 1px solid #fff;
    cursor: not-allowed;
}
/* Zero Step Finish*/



/* First Step Start*/
.first-step  {
    background: #1f1f1f;
}
.first-step .first-text {
    margin: 50px 0 50px 0;
    text-align: center;
}
.first-step h1 {
    font-size: 58px;
    letter-spacing: -0.2px;
    line-height: 70px;
    font-weight: 300;
    color: #fff;
    width: 100%;
    margin: 0 auto 0;
}
.first-step span {
    color: #28e98c;
    font-weight: 400;
}

.first-step .img-content > input{
    display:none
}
.first-step .img-content > img{
    cursor:pointer;
    border:5px solid #1f1f1f;
}
.first-step .img-content > input:checked + img{
    border-color: #28e98c;
}

.clothes-content .img-content img {
    border-radius: 30px;

}
.clothes-content .img-content img:hover {
    border: 2px solid #28e98c;
}
/* First Step Finish */


/* Second Step Start*/

.second-step .second-text {
    margin: 50px 0 50px 0;
    text-align: center;
}
.second-step h1 {
    font-size: 58px;
    letter-spacing: -0.2px;
    line-height: 70px;
    font-weight: 300;
    color: #fff;
    width: 100%;
    margin: 0 auto 0;
}
.second-step span {
    color: #28e98c;
    font-weight: 400;
}
.second-step .img-content {
    position: relative;
}
.second-step .img-content p {
    position: absolute;
    bottom: -15px;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    -webkit-border-bottom-right-radius: 30px;
    -webkit-border-bottom-left-radius: 30px;
    -moz-border-radius-bottomright: 30px;
    -moz-border-radius-bottomleft: 30px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    padding: 10px 0 10px 0;
}

.second-step p {
    font-size: 16px;

}

.second-step .img-content img{
    border-radius: 30px;
}
.second-step .img-content > input{
    display:none
}
.second-step .img-content > img{
    cursor:pointer;
    border:5px solid #1f1f1f;
}
.second-step .img-content > input:checked + img{
    border-color: #28e98c;
}
.fabric-content .img-content img:hover {
    border: 2px solid #28e98c;
}
/* Second Step Finish */


/* Third Step Start*/
.third-step .img-content img{
    width:100px;
    height:50px;
}
.third-step .img-content .colorPiece{
    display:none;
}
.third-step .img-content > input[type="checkbox"]{
    display:none;
}
.third-step .img-content > img{
    cursor:pointer;
    border:5px solid transparent;
}
.third-step .img-content > input[type="checkbox"]:checked + img{
    border-color: black;
    border-radius:10px;
}
.third-step .color-box {
    width: 75px;
    height: 75px;
    /* border-radius: 30px; */
    border: 1px solid #fff;
}
.third-step .color-box.active {
    width: 75px;
    height: 25px;
    text-align: center;
   color: transparent;


}
.third-step .color-box.passive {
    height: 24px;
    background: white;
    color: black;
    margin-bottom: 7px;
    font-weight: bold;
    text-align: center;
}
.third-step .color-box.ca60a39 {
    background-color: #a60a39;
}
.third-step .color-box.cc2cbe8 {
    background-color: #c2cbe8;
}
.third-step .color-box.c1b3d7d {
    background-color: #1b3d7d;
}
.third-step .color-box.c777f92 {
    background-color: #777f92;
}
.third-step .color-box.ce0b332 {
    background-color: #e0b332;
}
.third-step .color-box.c71263d {
    background-color: #71263d;
}
.third-step .color-box.c4f83bf {
    background-color: #4f83bf;
}
.third-step .color-box.c006fa5 {
    background-color: #006fa5;
}
.third-step .color-box.ce35219 {
    background-color: #e35219;
}
.third-step .color-box.cc22363 {
    background-color: #c22363;
}
.third-step .color-box.cd9dbd8 {
    background-color: #d9dbd8;
}
.third-step .color-box.c1e2738 {
    background-color: #1e2738;
}




.third-step .color-box.c3c404c {
    background-color: #3c404c;
}
.third-step .color-box.c20283b {
    background-color: #20283b;
}
.third-step .color-box.c999a9f {
    background-color: #999a9f;
}
.third-step .color-box.ca99688 {
    background-color: #a99688;
}
.third-step .color-box.c474f62 {
    background-color: #474f62;
}
.third-step .color-box.c44474e {
    background-color: #44474e;
}
.third-step .color-box.c6c6f68 {
    background-color: #6c6f68;
}
.third-step .color-box.cbfa17b {
    background-color: #bfa17b;
}
.third-step .color-box.c892e33 {
    background-color: #892e33;
}
.third-step .color-box.cd1cfb6 {
    background-color: #d1cfb6;
}
.third-step .color-box.cce88a0 {
    background-color: #ce88a0;
}
.third-step .color-box.c00665c {
    background-color: #00665c;
}



.third-step .color-box.c3c363a {
    background-color: #3c363a;
}
.third-step .color-box.c7b8675 {
    background-color: #7b8675;
}
.third-step .color-box.cd5c570 {
    background-color: #d5c570;
}
.third-step .color-box.c32465e {
    background-color: #32465e;
}
.third-step .color-box.c3e385a {
    background-color: #3e385a;
}
.third-step .color-box.c58a553 {
    background-color: #58a553;
}
.third-step .color-box.ca7c36e {
    background-color: #a7c36e;
}
.third-step .color-box.cc47145 {
    background-color: #c47145;
}
.third-step .color-box.c4a4d5e {
    background-color: #4a4d5e;
}
.third-step .color-box.c2a454c {
    background-color: #2a454c;
}
.third-step .color-box.ca61a3f {
    background-color: #a61a3f;
}
.third-step .color-box.cffffff {
    background-color: #ffffff;
}








#uploadImage {
    padding: 15px 0;
}
#err{
    margin-top: 15px;
    font-size: 12px;
    color:#28e98c;
    font-weight: bold;
}
#imageUploadForm label{
    font-size: 13px;
}


.third-step .img-content {
    width: 75px;
    position: relative;
}
.third-step .img-content .colorPiece  {
    position: absolute;
    width: 75px;
    left: 0;
    color: #000;
    font-size: 14px;
    text-align: center;
    outline: none;
}

.third-step .colorNextPage {
    position: relative;
    color: #fff;
    top: 50px;
}

.third-step .group-01, .third-step .group-02 {
    margin-bottom: 50px;
}

::placeholder {
    color: black;
    opacity: 1; /* Firefox */
  }
  
  ::-ms-input-placeholder { /* Edge 12 -18 */
    color: black;
  }





/* Third Step Finish */



.last-page-data {
    display: block;
}


.last-content {
    display: flex;
}
.last-content .last-info {
    width: 100%;
    text-align: left;
}
.last-content .form {
    width: 100%;
    text-align: left;
}

.last-content  h1 {
    font-size: 58px;
    letter-spacing: -0.2px;
    line-height: 70px;
    font-weight: 300;
    color: #fff;
    width: 100%;
    margin: 0 auto 0;
    margin-bottom: 25px;
}
.last-content span {
    color: #28e98c;
    font-weight: 400;
}
.last-content .form input {
    padding: 10px 15px;
    width: 100%;
    display: block;
    margin: 0 0 10px 0;
    border-radius: 10px;
    border: none;
    outline: none;
}
.last-content .form button {
    margin: 10px 0 0 0!important;
}

.color-box[click="true"] {
    border: 5px solid #fff;
}
@media screen and (max-width: 1366px) {
   
}

@media screen and (max-width: 992px) {
  
}

@media screen and (max-width: 786px) {

    .info-content {
        width: 100%;
    }
}

@media screen and (max-width: 450px) {
    .container {
        width: 100%;
    }
    .info-content {
        width: 100%;
    }
    .zero-step h1 {
        font-size: 40px;
    }
    .zero-text p {
        font-size: 20px;
    }
    .zero-step ul {
        margin: 0;
        padding: 0;
        font-size: 12px;
    }

    .first-step h1 {
        font-size: 28px;
        line-height: 36px;
    }
    .first-step .first-text {
        margin: 0 0 15px 0;
    }

    .first-step .img-content > img {
        /* width: 85%; */
        margin-bottom: 15px;
        border: 1px solid #1f1f1f;
        border-radius: 10px;
    }

    .first-step .mobile-clothes-content {
        text-align: center;
    }
    .first-step .img-content {
        margin: 0 5px;
        width: 85px;
    }
    


    .second-step h1 {
        font-size: 28px;
        line-height: 36px;
    }
    .second-step .second-text {
        margin: 0 0 15px 0;
    }
    .second-step .second-text p {
       display: none;
    }
    .second-step .img-content > img {
        margin-bottom: 15px;
        /* border: 1px solid #1f1f1f; */
        border:0;
        border-radius: 10px;
    }
    .second-step .mobile-fabric-content {
        text-align: center;
    }
    .second-step .img-content {
        margin: 0 5px;
        width: 85px;
    }

    .second-step .img-content p {
        position: absolute;
        bottom: -1px;
        background: rgba(0, 0, 0, 0.5);
        width: 100%;
        -webkit-border-bottom-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -moz-border-radius-bottomright: 10px;
        -moz-border-radius-bottomleft: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        padding: 5px 0 5px 0;
        font-size: 13px;
    }



    .last-content {
        display: block;
        width: 80%;
        margin: 0 auto 0;
    }
    .last-content .last-info {
        text-align: center;
        margin-bottom: 30px;
    }
    .last-content .last-info p {
        margin-bottom: 0;
        font-size: 16px;
    }
    .last-content .data-color.last-page-data {
        margin-top: 5px;
    }
    .last-content .third-step {
        margin-bottom: 5px;
    }
    .last-content h1 {
        font-size: 28px;
        line-height: 30px;
        margin-bottom: 15px;
        text-align: center;
    }

    .last-content .form {
  
        text-align: center;
    }
    .last-content #uploadImage {
        width: 88px;
        margin: 0 auto 0;
        padding: 5px 0;
    }
    .last-content #imageUploadForm label {
        font-size: 9px;
    }


    .third-step .color-box.active {
        display: inline-block
    }
    .third-step .color-box.passive {
        display: none;
    }
    .last-content .form input {
        font-size: 14px;
        padding: 7px 14px;
    }
    


    .third-step .third-text-mobile h1 {
        font-size: 32px;
        letter-spacing: -0.2px;
        line-height: 40px;
        font-weight: 300;
        color: #fff;
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
    }
    .third-step .third-text-mobile h1 span{
        color: #28e98c;
        font-weight: 400;
    }
    .third-step .img-content {
        width: 45px;
    }

    .third-step .color-box {
        width: 45px;
        height: 45px;
    }
    .third-step .create-brand-btn {
        margin: 0 auto 0;
    }


    .create-brand-btn {
        border: none;
        width: 190px;
        padding: 7px 0;
        border-radius: 10px;
        font-size: 16px;
    }
  
}