@font-face { font-family: 'bhc_regular'; src: url('../font/static/SourceSans3-Regular.ttf') format('truetype'); }

 body          { font-family: 'bhc_regular'; font-size: 15px; font-weight: lighter; background-image: url('../img/easycare-background-blur.webp'); background-size: cover; }
 h1            { margin: 0 !important; padding: 0 !important; margin-bottom: 25px !important; font-size: 20px; line-height: 20px; text-transform: uppercase; }
 label         { margin: 0 0 5px 3px !important; }
 input         { margin: 0 0 10px 0 !important; padding-right: 30px !important; font-family: 'bhc_regular'; font-size: 18px; border-radius: 6px !important; }
 input.success { outline: none; border: 1px solid #4899e8; }
 input.success { background-image: url('../img/success.png'); background-size: 9%; background-position: center; background-position-x: 98%; background-repeat: no-repeat; }
 input.error   { outline: none; border: 1px solid #c91330; }
 input.error   { background-image: url('../img/error.png'); background-size: 9%; background-position: center; background-position-x: 98%; background-repeat: no-repeat; }
 button        { position: relative; width: 80%; left: 50%; margin: 20px 0 0 -40% !important; font-family: 'bhc_regular'; font-size: 18px; color: #ffffff !important; background-color: #4899e8 !important; border-radius: 6px !important; }

.bhc-container { width: 560px; height: 360px; background-image: url('../img/easycare-display.webp'); background-position: -18%; background-size: 84%; background-repeat: no-repeat; border: none; border-radius: 11px !important; }
.bhc-container { box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8); }

.bhc-container .bhc-display     { float: left; width: 40%; text-align: center; border-top-left-radius: 12px !important; border-bottom-left-radius: 12px !important; }
.bhc-container .bhc-display img { width: 90%; margin: 20px 0 0 5px; }

.bhc-container .bhc-form { float: left; width: 60%; padding: 1.5rem 1.5rem; background: #f7f8f9; border-top-right-radius: 12px !important; border-bottom-right-radius: 12px !important; }

@media only screen and (max-width: 767px)
{
    .bhc-container           { background-position: -29%; background-size: 89%; }
    .bhc-container .bhc-form { padding: 1.5rem 1.5rem; }
}

@media only screen and (max-width: 575px)
{
    .bhc-container .bhc-display     { width: 100%; max-height: 0px; background-image: none; }
    .bhc-container .bhc-display img { position: relative; width: 70%; margin: -120px 0 0 -0; }
    .bhc-container .bhc-form        { float: none; width: 100%; border-radius: 12px !important; }
}

@media only screen and (max-width: 400px)
{
     button                         { position: relative; width: 100%; left: 0; margin: 20px 0 0 0 !important;}
    .bhc-container .bhc-display img { width: 88%; margin: -100px 0 0 -0; }
    .bhc-container .bhc-form        { padding: 1rem 1rem; }
}