bnbservice-checkout-embed/css/bnbservice--layout.css

Embeddable app to facilitate the request of a service instance

/* Request form Starts */
.bnbservice--embeddable{
    position: relative;
}
.bnbservice--request-user-form-wrapper {
    display: flex;
    padding: 15px;
}
.rf--form-wrapper.summary-shown {
    flex-basis: 70%;
}
.rf--form-wrapper.summary-hidden {
    flex-basis: 100%;
}
.rf--summary-wrapper {
    flex-basis: 30%;
    flex-grow: 1;
    padding: 0 0 0 20px;
    position: relative;
}
.rf--form-heading, .rf--form-content, .rf--summary-heading{
    padding: 20px;
}
.rf--form, .rf--summary {
    border: 1px solid #e8e8e8;
    border-radius: 5px;
}
.rf--form-heading, .rf--summary-heading {
    border-bottom: 1px solid #ededed;
}
.rf--summary {
    position: sticky;
    top: 20px;
}
.rf--details, .rf--form-elements{
    padding: 20px 0;
}
.fe--line-item-pricing-wrapper .subscription-pricing {
    padding: 4px 20px;
    display: flex;
    justify-content: space-between;
}
/* Request form Ends */

/* Elements */
.fe--pricing-breakdown-wrapper, .fe--total-price-wrapper{
    padding: 20px;
}
.fe--total-price-wrapper {
    border-top: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
}

/* Loader */
.page-loader {
    position: fixed;
    z-index: 99999999;
    height: 100vh;
    width: 100vw;
    background: #ffffffab;
    top: 0px;
    left: 0px;
}
.page-loader > div, .page-loader .page-loader-text{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.page-loader .page-loader-text{
    transform: translate(-50%, 50%);
}
.loader{
    position: relative;
}
.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
}
.lds-ellipsis div {
    position: absolute;
    top: 27px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #3194ff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
    left: 6px;
    animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
    left: 6px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
    left: 26px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
    left: 45px;
    animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}
@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(19px, 0);
    }
}

/* Icons */
.card.icon {
    color: #000;
    position: absolute;
    margin-left: 2px;
    margin-top: 4px;
    width: 15px;
    height: 10px;
    border-radius: 1px;
    border: solid 1px currentColor;
}

.card.icon:before {
    content: '';
    position: absolute;
    top: 1px;
    left: -1px;
    width: 17px;
    height: 2px;
    background-color: currentColor;
}

.card.icon:after {
    content: '';
    position: absolute;
    right: 1px;
    bottom: 2px;
    width: 4px;
    height: 1px;
    background-color: currentColor;
}

.keyboard.icon {
    color: #000;
    position: absolute;
    margin-left: 1px;
    margin-top: 4px;
    width: 17px;
    height: 11px;
    border-radius: 1px;
    border: solid 1px currentColor;
}

.keyboard.icon:before {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 1px;
    height: 1px;
    border: 1px solid transparent;
    box-shadow: -2px 0 0 -1px currentColor,  2px 0 0 -1px currentColor,  0 -2px 0 -1px currentColor,  0 2px 0 -1px currentColor,  -6px 0 0 -1px currentColor,  6px 0 0 -1px currentColor,  -4px -2px 0 -1px currentColor,  -4px 2px 0 -1px currentColor,  4px -2px 0 -1px currentColor,  4px 2px 0 -1px currentColor;
}

.keyboard.icon:after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 4px;
    width: 9px;
    height: 1px;
    background-color: currentColor;
}

/* Edit properties / change plan modal */
.change-plan-modal{
    position: fixed;
    min-height: 100%;
    width: 100%;
    background: #050413a1;
    top: 0px;
    left: 0px;
    z-index: 999;
}
.change-plan-modal h3 {
    padding: 20px 50px;
    background-color: #0f407d;
    color: white;
}
.change-plan-modal-form-wrapper{
    background: white;
    border-radius: 5px;
    max-width: 80%;
    margin: auto;
    margin-top: 150px;
    overflow: hidden;
}
.change-plan-modal-form{
    padding: 50px;
}


/* iPad Size or Smaller */
@media only screen and (max-width: 768px) {
    .bnbservice--request-user-form-wrapper{
        flex-direction: column;
    }
    .rf--summary-wrapper{
        margin-top: 20px;
        padding: 0;
    }
}
/* iPhone Size or Smaller */
@media only screen and (max-width: 414px) {
    .bnbservice--request-user-form-wrapper {
        padding: 0;
    }
    .rf--form-heading, .rf--form-content, .rf--summary-heading {
        padding: 20px 12px;
    }
    .fe--pricing-breakdown-wrapper, .fe--total-price-wrapper{
        padding: 20px 12px;
    }
    .mbf--current-services-list {
        flex-direction: column;
    }

    .mbf--current-services-item {
        margin: 8px 0 !important;
    }
    .mbf--card-wrapper{
        width: 269pt;
    }
    .mbf--card-display{
        padding: 32% 5% 5%;
    }
    .mbf--card-first-12 span{
        width: 9px;
        height: 9px;
    }
    .mbf--card-chip{
        top: 34%;
    }
    form.mbf--funding-personal-info button[type="submit"]{
        margin-left: 0;
    }
}