﻿
.progress {
    border-radius: 10px;
    border: 1px solid #ccc;
    background-color: #fff;
}
.progress-bar {
    background-color: #fff;
    border-radius: 10px;
}

.progress-step-0 .progress-bar {
    background: linear-gradient(90deg, rgba(240,240,240,1) 0%, rgba(200,200,200,1) 100%);
}
.progress-step-1 .progress-bar {
    background: linear-gradient(90deg, rgba(240,240,240,1) 0%, rgba(150,150,150,1) 100%);
}
.progress-step-2 .progress-bar {
    background: linear-gradient(90deg, rgba(240,240,240,1) 0%, rgba(100,100,100,1) 100%);
}
.progress-step-3 .progress-bar {
    background: linear-gradient(90deg, rgba(240,240,240,1) 0%, rgba(60,60,60,1) 100%);
}
.progress-step-4 .progress-bar {
    background: linear-gradient(90deg, rgba(240,240,240,1) 0%, rgba(10,10,10,1) 100%);
}
.small-text{
    font-size:12px;
}
.sweet-alert button
{
    background-color:#000!important;
    color:white!important;
}

input[type=number].form-control {
    max-width: 200px;
}
.alert-light {
    border-color: #13131340;
    border-left: none;
    color: #222;
    background-color: #fafafa;
    border-radius: 0;
    border-end-end-radius: 50px;
    border-start-end-radius: 50px;
}
    .alert-light > div {
        margin-right: 80px;
        margin-left:auto;
        width:100%;
        max-width:400px;
        text-align:left;
    }
    .alert-light span{
        color:#b0b0b0;
        font-size:14px;
    }

    .btn-primary.active {
        color: #fff !important;
        background-color: #000 !important;
        border-color: #000 !important;
    }

.input-group-append {
    border-end-end-radius: 50px;
    border-start-end-radius: 50px;
}

.btn-with-icon {
    border-radius: 5px !important;
    width:180px;
    height:180px;
    margin-right:20px;
    color:black!important;
}
    .btn-with-icon img {
     height:80px;
    }
button.btn-with-icon.active span{
    color:white!important;
}

    button.btn-with-icon span {
        margin-top: 20px;
        width: 100%;
        display: block;
        font-weight: bold;
        text-align: center;
        font-size: 14px;
        font-weight: 500;
    }

    button.btn-with-icon.active img.inactive-only {
        display: none !important;
    }
button.btn-with-icon:not(.active) img.active-only {
    display: none !important;
}

@media(max-width:1023px) {
    .alert-light > div {
        margin-right: 30px;
        max-width: 300px;
    }
}

    @media(max-width:767px) {
        .btn-with-icon {
            width: 130px;
            height:130px;
            margin-right: 5px;
        }
            .btn-with-icon img {
                height: 50px;
            }
           button.btn-with-icon span {
  font-size:12px;
}
        .alert-light > div {
            margin-right: auto;
        }
        div.steps button {
            width: 100%;
        }

            div.steps button:not(.active) {
                display: none;
            }
    }

    @media(max-width:575px) {
        .navbar-collapse {
            background-color: white;
            z-index: 1;
        }
        .btn-bigger{
            width:100%;
        }
    }