TourIAm/TIAMSharedUI/Pages/Transfer_old.razor.css

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

@media (max-width: 767px) {
    #featureContainer .carousel-inner .carousel-item > div {
        display: none;
    }

        #featureContainer .carousel-inner .carousel-item > div:first-child {
            display: block;
        }
}

#featureContainer .carousel-inner .carousel-item.active,
#featureContainer .carousel-inner .carousel-item-next,
#featureContainer .carousel-inner .carousel-item-prev {
    display: flex;
}

@media (min-width: 768px) {

    #featureContainer .carousel-inner .carousel-item-end.active,
    #featureContainer .carousel-inner .carousel-item-next {
        transform: translateX(25%);
    }

    #featureContainer .carousel-inner .carousel-item-start.active,
    #featureContainer .carousel-inner .carousel-item-prev {
        transform: translateX(-25%);
    }

    #featureContainer .card img {
        width: 90%;
        height: 40vh;
    }

    #featureContainer .carousel-item {
        justify-content: space-between;
    }
}

@media (max-width: 767px) {
    #featureContainer .card img {
        width: 100%;
        height: 75vh;
    }
}

#featureContainer .carousel-inner .carousel-item-end,
#featureContainer .carousel-inner .carousel-item-start {
    transform: translateX(0);
}

#featureContainer .card {
    border: 0;
}

#featureContainer .card {
    position: relative;
}

    #featureContainer .card .card-img-overlays {
        position: absolute;
        bottom: 15%;
        left: 10%;
    }

#featureContainer a {
    text-decoration: none;
}

#featureContainer .indicator {
    border: 1px solid rgb(202, 202, 202);
    padding: 3px 6px 3px 6px;
}

    #featureContainer .indicator:hover {
        background-color: blue;
        border: 1px solid blue;
        transition: 200ms;
    }

    #featureContainer .indicator:hover {
        color: white;
        transition: 200ms;
    }

#featureContainer .indicator {
    color: lightgray;
}

#featureContainer .float-end {
    padding-top: 10px;
}




/* Reseting */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.wrapper {
    max-width: 800px;
    min-height: 500px;
    margin: 10px auto;
    padding: 30px 30px 30px 30px;
    /*background-color: #ecf0f3;*/
    border-radius: 15px;
    /*box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;*/
}


    .wrapper .name {
        font-weight: 600;
        font-size: 1.4rem;
        letter-spacing: 1.3px;
        padding-left: 10px;
        /*color: #555*/;
    }

    .wrapper .form-field input {
        width: 100%;
        display: block;
        border: none;
        outline: none;
        background: none;
        font-size: 1.2rem;
        color: #666;
        padding: 10px 15px 10px 10px;
        /* border: 1px solid red; */
    }

    .wrapper .form-field {
        padding-left: 10px;
        margin-bottom: 20px;
        border-bottom: 1px solid;
        /*border-radius: 20px;*/
        //*ox-shadow: inset 3px 3px 3px #cbced1, inset -3px -3px 3px #fff;*/
    }

        .wrapper .form-field .fas {
            color: #555;
        }

    .wrapper .btn {
        box-shadow: none;
        width: 100%;
        height: 40px;
        /*background-color: #03A9F4;*/
        color: #fff;
        border-radius: 15px;
        /*box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;*/
        letter-spacing: 1.3px;
    }

        .wrapper .btn:hover {
            background-color: #039BE5;
        }

    .wrapper a {
        text-decoration: none;
        font-size: 0.8rem;
        color: #03A9F4;
    }

        .wrapper a:hover {
            color: #039BE5;
        }

@media(max-width: 380px) {
    .wrapper {
        margin: 30px 20px;
        padding: 40px 15px 15px 15px;
    }
}