﻿body {
    padding: 0px;
    margin: 0px;
}

.Credentials {
    color: white;
    margin-right: 20px;
}

    .Credentials:hover {
        color: white;
    }

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.sign-in {
    width: 450px;
    padding: 30px 20px;
    border-radius: 30px;
    border: 1px solid rgb(222,222,222);
    background: rgb(253,253,253);
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.11), 0 15px 12px rgba(0, 0, 0, 0.08);
    margin: auto;
    margin-top: 150px;
}

* {
    font-family: 'Montserrat', sans-serif;
}

.sign-in .btn-primary {
    width: 100%;
}

.sign-in .form-group {
    width: 100% !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.sign-in h1 {
    font-size: 34px;
    margin-bottom: 20px;
}

.sign-in input {
    border-radius: 8px;
}

.form-check {
    margin-bottom: 5px;
}


/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

* {
    font-family: 'Montserrat', sans-serif;
}

.registration {
    width: 75%;
    margin: auto;
    padding: 90px 40px;
}

.carousel-item article {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.registration form {
    padding: 30px;
    border: 1px solid rgb(222,222,222);
    border-radius: 30px;
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.08), 0 15px 12px rgba(0, 0, 0, 0.08);
    background: rgb(254,254,254);
}

.form-group {
    width: 49%;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.carousel-indicators {
    bottom: -100px;
}

.form-control {
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid rgb(222,222,222);
}

.carousel-inner section {
    transition: 0.8s;
    padding: 10px 0px 60px 0px;
}

.submit-first-page {
    float: right;
    width: 250px;
    border-radius: 7px;
    font-size: 18px;
    padding: 8px 0px 6px 0px;
}

.navigation {
    width: 450px;
    position: relative;
    height: 40px;
    margin: auto;
}

    .navigation .btn {
        width: 100%;
        border: 1px solid rgb(222,222,222);
    }

.active-btn {
    background: #0069D9 !important;
    color: #fff !important;
    border: none !important;
}

.navigation a {
    opacity: 1 !important;
    width: 50%;
}

.disabled-btn {
    transition: 0.5s;
}

    .disabled-btn:hover {
        background: rgb(234,234,234);
    }

.form-group {
    margin-bottom: 1.2rem;
}

    .form-group label {
        font-size: 17px;
    }

    .form-group input {
        font-size: 16px;
    }

        .form-group input::placeholder {
            font-size: 16px;
        }

.registration h1 {
    font-size: 38px;
    margin-bottom: 30px;
}

.form-control:focus {
    box-shadow: none;
}


@media screen and (max-width:700px) {
    .form-group {
        width: 100%;
    }

    .registration {
        width: 97%;
    }

    .submit-first-page {
        width: 100%;
    }

    .navigation {
        width: 99%;
    }
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 100%;
}

.form-check-label {
    padding-left: 15px;
}

.form-check-inline {
    padding-left: 15px;
}

.loader {
    margin: auto;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari 
  animation: spin 2s linear infinite;
}*/
    /* Safari */
    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
