.Background {
    width: 100%;
    height: 100%;
    background-color: #494949;
}
.logo {
    text-align : center;
    margin-top : 15%;
}

.auth-icon{
    font-size:20px;
}

.button-phone-addon {
    border-top: solid 1px #06b2b2;
    border-bottom: solid 1px #06b2b2;
    border-right: none;
    padding-right:0px;
    padding-top: 8px;
}

.btn.focus, .btn:focus {
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.form-control:disabled, .form-control[readonly] {
    background-color: var(--greyish-brown);
}

.button-phone {
    /* width: 254px; */
    height: 50px;
    /* margin-top: 5rem; */
    padding-left: 5px;
    border-radius: 10px;
    border-top: solid 1px #06b2b2;
    border-right: solid 1px #06b2b2;
    border-bottom: solid 1px #06b2b2;
    border-left: none;
    background-color: var(--greyish-brown);
    color: white;
}

.form-control:focus {
    background-color: var(--greyish-brown);
    border-top: solid 1px #06b2b2;
    border-right: solid 1px #06b2b2;
    border-bottom: solid 1px #06b2b2;
    color: white;
}

h1,p{
    color:white
}
@media (min-width: 1281px) {
    .label-left{
        padding-left:3.5rem;
    }
    .label-right {
        padding-right: 3rem;
    }
    .h1-right{
        padding-right:2rem;
    }
    .h1-left {
        padding-left:1rem;
    }
    .rectangle-input {
        width: 254px;
        height: 50px;
        margin-top: 5rem;
        padding-left: 1rem;
        border-radius: 10px;
        border: solid 1px #06b2b2;
        background-color: var(--greyish-brown);
        color: white;
    }

    .rectangle-input-2 {
        width: 254px;
        height: 50px;
        margin-top: 4rem;
        padding-left: 1rem;
        border-radius: 10px;
        border: solid 1px #89c724;
        background-color: var(--greyish-brown);
        color: white;
    }



    .btn-blue-signIn {
        width: 254px;
        height: 50px;
        margin: 1rem 0 0;
        border-radius: 10px;
        background-color: #06b2b2;
    }

    .btn-green-signIn {
        width: 254px;
        height: 50px;
        margin: 1rem 0 0;
        border-radius: 10px;
        background-color: #89c724;
    }

    .Sign-In {
        font-size: 16px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.88;
        letter-spacing: normal;
        text-align: center;
        color: rgba(255, 255, 255, 0.93);
    }

}

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

@media (min-width: 1025px) and (max-width: 1280px) {
    .label-left {
        padding-left: 3.5rem;
    }

    .label-right {
        padding-right: 3rem;
    }
    .h1-right {
        padding-right: 2rem;
    }

    .h1-left {
        padding-left: 1rem;
    }
    .rectangle-input {
        width: 254px;
        height: 50px;
        margin: 5rem;
        padding-left: 1rem;
        border-radius: 10px;
        border: solid 1px #06b2b2;
        background-color: var(--greyish-brown);
        color: white;
    }

    .rectangle-input-2 {
        width: 254px;
        height: 50px;
        margin: 5rem;
        padding-left: 1rem;
        border-radius: 10px;
        border: solid 1px #89c724;
        background-color: var(--greyish-brown);
        color: white;
    }



    .btn-blue-signIn {
        width: 254px;
        height: 50px;
        margin: 1rem 0 0;
        border-radius: 10px;
        background-color: #06b2b2;
    }

    .btn-green-signIn {
        width: 254px;
        height: 50px;
        margin: 1rem 0 0;
        border-radius: 10px;
        background-color: #89c724;
    }

    .Sign-In {
        font-size: 16px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.88;
        letter-spacing: normal;
        text-align: center;
        color: rgba(255, 255, 255, 0.93);
    }

}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
    .sign-in-label {
        text-align: center
    }
    .h1-right {
        text-align:center
    }

    .h1-left {
        text-align:center
    }
    .image-logo {
        width: -webkit-fill-available;
        
    }

    .forgot-link {
        font-size: 2rem;
    }
    .rectangle-input {
        width: -webkit-fill-available;
        height: 4rem;
        margin: 5rem;
        padding-left: 1rem;
        border-radius: 10px;
        border: solid 1px #06b2b2;
        background-color: var(--greyish-brown);
        color: white;
        font-size: 2rem;
    }

    .rectangle-input-2 {
        width: -webkit-fill-available;
        height: 4rem;
        margin: 5rem;
        padding-left: 1rem;
        border-radius: 10px;
        border: solid 1px #89c724;
        background-color: var(--greyish-brown);
        color: white;
        font-size: 2rem;
    }



    .btn-blue-signIn {
        width: -webkit-fill-available;
        height: 4rem;
        margin: 1rem 5rem 0;
        border-radius: 10px;
        background-color: #06b2b2;
        font-size: 2rem;
    }

    .btn-green-signIn {
        width: -webkit-fill-available;
        height: 4rem;
        margin: 1rem 5rem 0;
        border-radius: 10px;
        background-color: #89c724;
        font-size: 2rem;
    }

    .Sign-In {
        font-size: 16px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.88;
        letter-spacing: normal;
        text-align: center;
        color: rgba(255, 255, 255, 0.93);
    }

}

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

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .sign-in-label{
        text-align:center
    }
    .h1-right {
        text-align: center
    }

    .h1-left {
        text-align: center
    }
    .image-logo {
        width: -webkit-fill-available;
    }
    .forgot-link {
        font-size: 2rem;
    }
    .rectangle-input {
        width: -webkit-fill-available;
        height: 4rem;
        margin: 5rem;
        padding-left: 1rem;
        border-radius: 10px;
        border: solid 1px #06b2b2;
        background-color: var(--greyish-brown);
        color: white;
        font-size: 2rem;
    }

    .rectangle-input-2 {
        width: -webkit-fill-available;
        height: 4rem;
        margin: 5rem;
        padding-left: 1rem;
        border-radius: 10px;
        border: solid 1px #89c724;
        background-color: var(--greyish-brown);
        color: white;
        font-size: 2rem;
    }



    .btn-blue-signIn {
        width: -webkit-fill-available;
        height: 4rem;
        margin: 1rem 5rem 0;
        border-radius: 10px;
        background-color: #06b2b2;
        font-size: 2rem;
    }

    .btn-green-signIn {
        width: -webkit-fill-available;
        height: 4rem;
        margin: 1rem 5rem 0;
        border-radius: 10px;
        background-color: #89c724;
        font-size:2rem;
    }

    .Sign-In {
        font-size: 16px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.88;
        letter-spacing: normal;
        text-align: center;
        color: rgba(255, 255, 255, 0.93);
    }

}