.error {
color: white;
}

.rightcolumn {
    display:none;
}
  
    .leftcolumn{
        width:100% !important;
    }

img.mobile {
    display:none;
}

.details {
    padding: 10px;
    text-align: left;
}

col1 {
    display: inline-block;
    width: 168px;
    text-transform:uppercase;
    font-size:13px;
    font-weight:600

}

col2 {
    font-size: 12px;
    text-transform:uppercase;l
}

.StyledReceipt {
      filter: drop-shadow(0 0 .2rem gray); /* update the shadow here */

    background: linear-gradient(45deg,#ffffff54,#fff);
  width: 22rem;
  padding: 1rem 1rem 2rem;
  --mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/30px 100%;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}
.form-group.col-2 {
    width: 60% !important;
    max-width: 100% !important;
    display: table-cell;
    margin-bottom: 80px;
    position: relative;
    left: -15px;
    padding: 0px 0px 17px 13px;
}   

/* Set the width of the sidebar */
    .leftcolumn {
      width: 50%;
      float: left;
      padding: 0px;
      height: 100%;
    }


.bg-dark.bg {
    background-color: #34567b9c!important;
    max-width: 200px;
    min-height: 512px !important;
    position: relative;
    display: flex;
    float: left;
    border-right: 4px solid cornflowerblue;
}

.row.bg {
    background: #0000001c;
    padding: 40px;
    margin: 14px 44px;
    left: 19px;
    position: relative;
    border-radius: 1em;
}
.card-header {
    border-radius: 2em 2em 0 0!important;
    background: darkblue;
    color: white;
    text-align: center;
    font-size: 12px;
}
.card-header h3{
    font-size:14px;
    text-transform:uppercase;
    vertical-align: middle;
    padding: 12px 11px 0px;
}

thead {
    background: #16347394;
    color: white;
    font-weight: 200 !important;
    top: -23px;
    position: relative;
    border: 0 !important;
    left: -19px;
    margin: 0em !important;
    display: table-caption;
    width: 108% !important;
    z-index: 0;
    padding: 2px;
}
thead tr th  {
    color: white;
    font-weight: 200 !important;
    top: -23px;
    border: 0 !important;
    margin-right: 12em !important;
    z-index: 0 !important;
    padding: 12px !important;
    width:23% !important;
    text-align: center;
}
.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 2rem;
    background:#ffffffc9;
}
nav.navbar.navbar-expand-sm.bg-light.navbar-light {
    background: darkblue !important;
    color: white !important;
    border-radius: 4em;
    width: 77%;
    margin: 13px 0 20px 0 !important;
    display: inline-block;
    position: relative;
    text-align: right;
    left: 7%;
}

    /* Set the width of the main content */
    .rightcolumn {
      width: 50%;
      float: left;
      padding: 10px;
    }
    
    /* Style the footer */
    .footer {
        background:#00008ba3;
      position: fixed;
      color:white;
      left: 0;
      bottom: 0;
      width: 100%;
      text-align: center;
      padding: 10px;
      border-top: solid #fff;
    }
    .signinbox img {
    max-width: 210px;
    padding: 10px;
}
    body{
        background:url(/img/urbanbg.jpg);
        background-size:cover;
    background-repeat:no-repeat;
        background-color: #9ab4ed;
    }
    img.manicon{
        padding:50px;
        max-width:600px;
        position: fixed;
    }
    .signinbox {
    max-width: 400px;
    margin: 100px auto;
    text-align: center;
    padding: 10px;
}
.head img {
    width: 300px;
    margin: 18px;
}
.head {
    font-size: small;
}
.head a {
color:white;
}
a.btn.btn-primary.btn-block {
    padding: 3em 0em 1em 0em;
    border-radius: 1em;
    border-bottom: 16px solid darkblue;
}

   a.login {
    font-weight: 700;
    color: white;
    background: darkblue;
    padding: 10px 28px;
    width: 100px;
    position: relative;
    border-radius: 3em 0em 0em 3em;
} 
   a.signup {
    font-weight: 700;
    color: white;
    background: #174296;
    padding: 10px 28px;
    width: 100px;
    position: relative;
    border-radius: 0em 3em 3em 0em;
}
.buttons {
    margin: 20px;
}
.login_logo {
    background: darkred;
    width: 380px;
    position: relative;
    left: -10px;
    border-radius: 2em 2em 0 0;
    top: -10px;
}
.loginbox {
    background-color: #ff0101;
    padding: 10px;
    border-radius: 2em;
    mix-blend-mode: normal;
    width:380px;
    
}
select#color {
    background: none;
    color: white;
    font-weight: 800;
    text-align: center;
    border:none;
}
/*login style*/
.form-control:focus {
      border-color: #007bff;
      box-shadow: none;
    }
    .login-form {
      width: 340px;
      margin: 0px auto;
      font-size: 15px;
    }
input.form-control {
    border-radius: 3em;
    padding: 26px 17px;
}
button.btn.btn-primary.btn-block {
    border-radius: 53em;
    padding: 13px;
    background: black;
    border: none !important;
    text-transform: uppercase;
    font-weight: 500;
}
    .login-form h2 {
      margin: 0 0 15px;
    }
    .form-control, .btn {
      min-height: 38px;
      border-radius: 2px;
    }
    .btn {        
      font-size: 15px;
      font-weight: bold;
      background-color: #007bff;
      border-color: #007bff;
    }
    .btn:hover {
      background-color: #0069d9;
      border-color: #0062cc;
    }
    .login-form a {
      color: #007bff;
    }
    .login-form a:hover {
      text-decoration: underline;
    }
    .fa {
      margin-right: 10px;
    }