@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&display=swap');
body{
    font-family: 'Open Sans', Sans-Serif;
    font-size: 14px;
    /*background: #0d6e50;*/
    color: #2e2e2e;
}

.card img {
    max-width: 500px;
    padding: 20px;
}


.btn-success {
        color: #fff;
    background-color: #09cad8 !important;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 5px;
       margin: 20px 0px 0px 0px;
    text-align: center;
}

.login-area
{
        box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    border-radius: 0px !important;
    border: 1px solid #eee;
}

.image-area
{
    padding: 30px 0px;
}


#photo span{
    color: #0b6a7d;
    font-family: 'Dancing Script', cursive;
    font-size: 45px;
    font-weight: bold;
    display: inline-block;
        margin-left: 15px;
}
strong {
    font-weight: 600;
}
.main-color
{
        background-color: #17a2b8;
}

.footer-bottom {
         background: #e9ecef;
    padding: 15px;
    font-size: 13px;
    line-height: 24px;
   
    text-align: center;
    color: #0b6a7d;
    font-weight: bold;
}

#photo span p{
   
   color: #0b6a7d;
    font-family: 'Dancing Script', cursive;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
   
    margin-left: 50%;
   
}
.card {
    font-weight: 400;
    border: 0;
    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    border-radius: 10px !important;
}
h5.card-header {
    background: transparent;
    border: none;
    color: #0d6e50;
    border-top: none;
    font-size: 24px;
}

h5.card-header strong {
    color: #0b6a7d;
    font-weight: 600;
    font-size: 18px;
}

.md-form {
    margin-bottom: 10px;
}

form h4 {
       font-size: 14px;
    color: white;
    margin-top: 0px;
    margin-bottom:5px;
  
    text-align: left;
}

.otp-button
{
   text-align: center;
    border: 1px solid white;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    /* font-weight: bold; */
    color: black;
    background-color: white;
    font-size: 13px;
    font-weight: 600;
}
 
.divide {
       color: #421010;
    border: 0;
    border-top: 1px solid #dee2e6;
    margin: 25px 25%;
    position: relative;
    width: 50%;
}
.form-control{ display: block;
    width: 100%;
    height: auto;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: black;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #17a2b8;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
   .divide span {
        background: #0b6a7d;
    /* font-weight: bold; */
    font-size: 12px;
    color: white;
    text-transform: uppercase;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0 15px;
    text-align: center;
}


select.browser-default.custom-select {
    font-size: 14px;
}

.price {
      font-size: 14px;
    color:white;
    text-decoration: unset;
    
    text-align: right;
}

.cost-price label:first-child {
    font-weight: 600;
    font-size: 16px;
}

.forget-pass {
    text-decoration: underline;
    font-weight: 600;
}

.forget-pass a{
    color: inherit;
}
.member-img
{
    height: 350px;
    width: 320px;
    margin: auto;
}


.member-img img
{
    height: 350px;
    width: 320px;
}


.login-right
{
      background-color: #0b6a7d;
    color: white !important;
    text-align: center;
    padding: 40px 30px;

}


.md-form>label {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    padding-left: 15px;
}

.md-form label {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1rem;
    color: white;
    cursor: text;
    -webkit-transition: color .2s ease-out, -webkit-transform .2s ease-out;
    transition: color .2s ease-out, -webkit-transform .2s ease-out;
    transition: transform .2s ease-out, color .2s ease-out;
    transition: transform .2s ease-out, color .2s ease-out, -webkit-transform .2s ease-out;
    -webkit-transform: translateY(12px);
    transform: translateY(12px);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
input::-webkit-input-placeholder {
    font-size:13px;
   
}
.card .md-form label {
   font-weight: 300;
    font-size: 13px;
    pointer-events: none;
    padding-left: 5px;
}

.already-login p {
    font-weight: 500;
    font-size: 13px;
}
.pb-20{
   padding-bottom:20px ; 
}
.already-login p a {
    color: #09cad8;
}

.form-check label {
    /*font-weight: 600;*/
}

.md-form {
    margin-bottom: 10px;
}
.md-form input:not([type]):focus:not([readonly])+label, .md-form input[type="text"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="password"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="email"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="url"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="time"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="date"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="datetime"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="datetime-local"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="tel"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="number"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="search"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="phone"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="search-md"]:focus:not([readonly])+label, .md-form textarea.md-textarea:focus:not([readonly])+label {
    color: white;
}

.md-form input:not([type]):focus:not([readonly]), .md-form input[type="text"]:not(.browser-default):focus:not([readonly]), .md-form input[type="password"]:not(.browser-default):focus:not([readonly]), .md-form input[type="email"]:not(.browser-default):focus:not([readonly]), .md-form input[type="url"]:not(.browser-default):focus:not([readonly]), .md-form input[type="time"]:not(.browser-default):focus:not([readonly]), .md-form input[type="date"]:not(.browser-default):focus:not([readonly]), .md-form input[type="datetime"]:not(.browser-default):focus:not([readonly]), .md-form input[type="datetime-local"]:not(.browser-default):focus:not([readonly]), .md-form input[type="tel"]:not(.browser-default):focus:not([readonly]), .md-form input[type="number"]:not(.browser-default):focus:not([readonly]), .md-form input[type="search"]:not(.browser-default):focus:not([readonly]), .md-form input[type="phone"]:not(.browser-default):focus:not([readonly]), .md-form input[type="search-md"]:focus:not([readonly]), .md-form textarea.md-textarea:focus:not([readonly]) {
   
    -webkit-box-shadow: 0 1px 0 0 #0b6a7d;
    box-shadow: unset;
    /* color: white !important; */
}

.md-form input:not([type]), .md-form input[type="text"]:not(.browser-default), .md-form input[type="password"]:not(.browser-default), .md-form input[type="email"]:not(.browser-default), .md-form input[type="url"]:not(.browser-default), .md-form input[type="time"]:not(.browser-default), .md-form input[type="date"]:not(.browser-default), .md-form input[type="datetime"]:not(.browser-default), .md-form input[type="datetime-local"]:not(.browser-default), .md-form input[type="tel"]:not(.browser-default), .md-form input[type="number"]:not(.browser-default), .md-form input[type="search"]:not(.browser-default), .md-form input[type="phone"]:not(.browser-default), .md-form input[type="search-md"], .md-form textarea.md-textarea {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    background-color: transparent;
    border: none;
    border: 1px solid #ced4da;
    border-radius: 5px;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;
    padding: 10px 15px;
}

.md-form input:not([type]):focus:not([readonly]), .md-form input[type="text"]:not(.browser-default):focus:not([readonly]), .md-form input[type="password"]:not(.browser-default):focus:not([readonly]), .md-form input[type="email"]:not(.browser-default):focus:not([readonly]), .md-form input[type="url"]:not(.browser-default):focus:not([readonly]), .md-form input[type="time"]:not(.browser-default):focus:not([readonly]), .md-form input[type="date"]:not(.browser-default):focus:not([readonly]), .md-form input[type="datetime"]:not(.browser-default):focus:not([readonly]), .md-form input[type="datetime-local"]:not(.browser-default):focus:not([readonly]), .md-form input[type="tel"]:not(.browser-default):focus:not([readonly]), .md-form input[type="number"]:not(.browser-default):focus:not([readonly]), .md-form input[type="search"]:not(.browser-default):focus:not([readonly]), .md-form input[type="phone"]:not(.browser-default):focus:not([readonly]), .md-form input[type="search-md"]:focus:not([readonly]), .md-form textarea.md-textarea:focus:not([readonly]) {
    border-bottom: 1px solid white;
    -webkit-box-shadow: 0 1px 0 0 #4285f4;
    box-shadow: 0 1px 0 0 #4285f4;
}
.md-form input:not([type]):focus:not([readonly])+label, .md-form input[type="text"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="password"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="email"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="url"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="time"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="date"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="datetime"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="datetime-local"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="tel"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="number"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="search"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="phone"]:not(.browser-default):focus:not([readonly])+label, .md-form input[type="search-md"]:focus:not([readonly])+label, .md-form textarea.md-textarea:focus:not([readonly])+label {
    color: white;
    margin-top: -16px;
}
@media (max-width: 576px){
    .card img{
        max-width: 300px;
    }
    form {
        padding: 20px 0;
    }
}


@media (min-width: 360px) and (max-width: 677px) {

 #photo span {
    color: #0b6a7d;
    font-family: 'Dancing Script', cursive;
    font-size: 24px;
    font-weight: bold;
    display: inline-block;
    margin-left: 15px;
}
#photo span p {
    color: #0b6a7d;
    font-family: 'Dancing Script', cursive;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin-left: unset;
}
}