/* public-register.blade.css */
.form-focus .focus-label {
    left: 25px !important;
}

/* #regForm { */
/* background-color: #ffffff;
            margin: 50px auto;
            font-family: Raleway; */
/* padding: 40px; */
/* width: 70%;
            min-width: 300px; */
/* } */
h1 {
    text-align: center;
}

input {
    padding: 10px;
    width: 100%;
    font-size: 17px;
    /* font-family: Raleway; */
    border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
    background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
    display: none;
}

button {
    background-color: #04AA6D;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 17px;
    /* font-family: Raleway; */
    cursor: pointer;
}

button:hover {
    opacity: 0.8;
}

#prevBtn {
    background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
}

.step.active {
    opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
    background-color: #04AA6D;
}

.select2 {
    width: 100% !important;
}

.package {
    /* display: grid;
         grid-template-columns: repeat(3, 1fr);
         grid-gap: 1rem; */
    /* margin-top: 4rem; */
}

@media screen and (max-width: 800px) {
    .package {
        grid-template-columns: 1fr;
        grid-row-gap: 7rem;
    }
}

.package__item {
    width: 100%;
    height: 100%;
    transition: all ease-in-out 0.3s;
}

.package__item:hover {
    transform: translateY(-5px);
}

.package__item .package__header {
    background-color: white;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom: 3px solid rgba(0, 0, 0, 0.1);
}

.package__item .package__header .package__name {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    padding: 8px;
    color: white;
}

.package__item .package__body {
    background-color: white;
    padding-top: 1rem;
    padding-bottom: 1rem;
    min-height: 82%;
}

@media screen and (max-width: 800px) {
    .package__item .package__body {
        min-height: 100%;
    }
}

.package__item .package__body .package__price-container {
    min-height: 150px;
    background-color: rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 4px;
}

@media screen and (max-width: 800px) {
    .package__item .package__body .package__price-container {
        min-height: 100%;
    }
}

.package__item .package__body .package__price-container--column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
}

@media screen and (max-width: 800px) {
    .package__item .package__body .package__price-container--column {
        grid-template-columns: 1fr;
    }
}

.package__item .package__body .package__price-container--column .package__column {
    display: grid;
}

.package__item .package__body .package__price-container--column .package__column [class^=package__column] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.package__item .package__body .package__price-container--column .package__column .package__column-title {
    color: white;
    background-color: #78a87f;
    font-weight: 600;
}

.package__item .package__body .package__price-container--column .package__column .package__column-price {
    font-weight: bold;
}

.package__item .package__body .package__price-container--column .package__column .package__column-price--bb {
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
}

.package__item .package__body .package__price-container--column .package__column--2 {
    border-left: 1px solid rgba(0, 0, 0, 0.05);
}

.package__item .package__body .package__price-container--column .package__column--2 .package__column-title {
    background-color: #5d9064;
}

.package__item .package__body .package__price {
    text-align: center;
    font-size: 3rem;
    font-weight: 600;
    position: relative;
}

.package__item .package__body .package__price--sm {
    font-size: 1.8rem;
}

.package__item .package__body .package__price--xs {
    font-size: 1.2rem;
}

.package__item .package__body .package__price--monthly::after {
    content: "Monthly";
    background-color: #459bba;
    border-radius: 8px;
    font-size: 10px;
    padding: 1px 5px;
    color: white;
    position: absolute;
}

.package__item .package__body .package__price--quarterly::after {
    content: "Quarterly";
    background-color: orange;
    border-radius: 8px;
    font-size: 10px;
    padding: 1px 5px;
    color: white;
    position: absolute;
}

.package__item .package__body .package__price--yearly::after {
    content: "Yearly";
    background-color: #377c95;
    border-radius: 8px;
    font-size: 10px;
    padding: 1px 5px;
    color: white;
    position: absolute;
}

.package__item .package__body .package__price--ind-yearly::after {
    content: "Yearly Individual";
    background-color: #5043c9;
    border-radius: 8px;
    font-size: 10px;
    padding: 1px 5px;
    color: white;
    position: absolute;
}

.package__item .package__body .package__price--ins-yearly::after {
    content: "Yearly Institutional";
    background-color: #5d9064;
    border-radius: 8px;
    font-size: 10px;
    padding: 1px 5px;
    color: white;
    position: absolute;
}

.package__item .package__body ul {
    margin-top: 1rem;
}

.package__item .package__body ul li {
    position: relative;
    font-size: 0.875rem;
    font-weight: 600;
    color: #31363c;
}

.package__item .package__footer button {
    background-color: #2287f5;
    color: white;
    padding: 8px 0;
    width: 100%;
    border: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: all ease-in-out 0.3s;
    font-weight: 600;
}

.package__item .package__footer button::after {
    content: "»";
    opacity: 0;
    position: absolute;
    top: 0;
    font-size: 1.5rem;
    transition: all ease-in-out 0.3s;
}

.package__item .package__footer button:hover::after {
    opacity: 1;
    transform: translateX(4px);
}

.package__item:nth-child(1) .package__header {
    background-color: #eea726;
}

.package__item:nth-child(1) .package__footer button {
    background-color: #eea726;
}

.package__item:nth-child(1) .package__footer button:hover {
    background-color: #e49912;
}

.package__item:nth-child(2) .package__header {
    background-color: #459bba;
}

.package__item:nth-child(2) .package__footer button {
    background-color: #459bba;
}

.package__item:nth-child(2) .package__footer button:hover {
    background-color: #3d88a4;
}

.package__item:nth-child(3) .package__header {
    background-color: #78a87f;
}

.package__item:nth-child(3) .package__footer button {
    background-color: #78a87f;
}

.package__item:nth-child(3) .package__footer button:hover {
    background-color: #659c6d;
}

.labl {
    /* display : block;
            width: 400px; */
}

.labl>input {
    /* HIDE RADIO */
    visibility: hidden;
    /* Makes input not-clickable */
    position: absolute;
    /* Remove input from document flow */
}

.labl>div {
    /* DIV STYLES */
    cursor: pointer;
    border: 2px solid transparent;
}

.labl>input:checked+div {
    /* (RADIO CHECKED) DIV STYLES */
    background-color: #ffd6bb;
    border: 1px solid #ff6600;
}

#map {
    height: 350px;
    width: 100%
}