/* Full body background image + blue overlay */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;

    /* Background image */
    background-image: url('../img/Register-Form.jpg');

    /* Make it cover full body */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Blue overlay using gradient */
    background-color: rgba(0, 60, 255, 0.45); /* fallback */

    /* Combine image + overlay */
    background-blend-mode: overlay;
}
/* Wrapper inside each column */
.left-side,
.right-side {
    background: #ffffff;
    padding: 10px 20px;
    margin: 5px;
    height: 100%;
    border-radius: 5px;
}
.right-side{
    position: relative;
}
.registration-form{
    width: 90%;
    margin: auto;
    padding: 30px 0px;
}
.registration-form .card-header{
    padding: 10px;
    border-radius: 2em;
}
/* Make row align items equal height */
.registration-form .row {
    display: flex;
    align-items: stretch;
}

/* Fix bootstrap col height issue */
.registration .col-div {
    display: flex;
}
label {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 5px;
}
.form-control {
    display: block;
    width: 100%;
    padding: .275rem .35rem;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 2px;
}
.submit-btn{
    position: absolute;
    bottom: 30px;
    width: 92%;
    text-align: center;
}
.submit-btn .btn{
    padding: 10px 10px 15px 10px;
}



/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
  /* CSS */
  
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
  /* CSS */
  
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  
  /* CSS */
  
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  /* CSS */
  
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  
.submit-btn{
    position: static;
}
  .col-md-6 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  
.submit-btn{
    position: static;
}
 .col-md-6 {
        flex: 0 0 auto;
        width: 100%;
    } 
}