:root {
    --color1: #6C3B1C; /* brown*/
    --color2: #21474D; /* light green */
    --color3: #17383D; /* dark green*/
    --color4: #17383D; /* dark green btn */
    --color5: rgba(33, 71, 77, 0.2); /*accordian background #17383D*/
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: rgba(76, 78, 100, 0.6);
    list-style: none;
    text-decoration: none;
}
body{
    /* background: #F7F7F9; */
    background-image: linear-gradient(to right, #F7F7F9,#f7f7f9, #fff);
    width: 100%;
    height: 100%;
}
.flex{
    display: flex;
    justify-content: space-between;
}
.container{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 100vh;
    /* border: 1px solid red; */
}
.container .container-left{
    background: #F7F7F9;
    width: 940px;
    display: flex;
    justify-content: center;
}
.container .container-left img{
    width: 489px;
    height: 600px;
}
.container .container-right{
    background-color: #fff;
    width: 500px;
    height: 100%;
    /* border: 1px solid yellow; */
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.container-right .logoText{
    display: flex;
    /* margin-right: 62px; */
    margin-bottom: 10px;
}
.logoText img{
    margin-left: -33px;
}
#imgTroyReg{
    margin-left: -53px;
    margin-bottom: 10px;
}
form .form-check span{
    color: #666CFF;
}
form h1{
    color: rgba(76, 78, 100, 0.87);
    font-size: 24px;
}
form button{
    width: 100%;
    margin-bottom: 20px;
    border-radius: 8px;
}
form p{
    color: rgba(76, 78, 100, 0.6);
    font-size: 14px;
    position: relative;
}
div.container-right p span{
    color: #666CFF;
    cursor: pointer;
}
form i {
    margin-left: 246px;
    cursor: pointer;
    top: 11px;
    /* margin-bottom: -4px; */
    position: absolute;
}

input.form-control::placeholder {
    color: rgba(76, 78, 100, 0.38);
}

.form-control{
    /* width: 246px!important; */
    width: 276px!important;
    height: 44px;
    border-radius: 8px;
    color: rgba(76, 78, 100, 0.87);
}
#provi{
    color: white;
    list-style: none;
    text-decoration: none;
}
#img{
    margin-left: -60px;
}

@media only screen and (max-width: 978px) {
    .container .container-right {
        background-color: #fff;
        width: 498px;
        height: 100%;
        /* border: 1px solid yellow; */
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: -77px;
    }
    .container .container-left {
        background: #F7F7F9;
        width: 710px;
        display: flex;
        justify-content: center;
    }
    .container .container-left img {
        width: 337px!important;
        height: 100%;
        margin-right: 74px;
    }
}
@media only screen and (max-width: 990px){
    body{
        background: #F7F7F9;
    }
    .container .container-right {
        background-color: #f7f7f7;
        width: 500px;
        height: 100%;
        /* border: 1px solid yellow; */
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: 80px;
    }
    .container .container-left img {
        width: 380px;
        height: 100%;
        /* margin-left: 15px; */
    }
    .container .container-left {
        background: #F7F7F9;
        width: 940px;
        display: flex;
        justify-content: center;
    }
}
@media only screen and (max-width: 767px){
    body{
        background: #F7F7F9;
    }
    .container .container-left {
        /* background: #F7F7F9; */
        width: 358px;
        display: flex;
        justify-content: center;
    }
    .container .container-left img {
        width: 244px!important;
        height: 100%;
        /* margin-right: 157px; */
    }
    .container .container-right {
        background-color: #f7f7f7;
        width: 500px;
        height: 100%;
        /* border: 1px solid yellow; */
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: 6px;
    }
}
@media only screen and (max-width: 480px){
    .container .container-left {
        display: none;
    }
    .form-control {
        width: 273px!important;
    }
    .container .container-right{
        position: fixed;
    }
    .mb-3Alterad p{
        margin-bottom: 0px;
    }
    #passwords{
        margin-top: -8px;
    }
    .mb-3, .my-3 {
        margin-bottom: 0.5rem!important;
    }
}

 .btn-primary {
     --mdb-btn-bg: var(--color3);
     --mdb-btn-color: #fff;
     --mdb-btn-box-shadow: 0 4px 9px -4px var(--color3);
     --mdb-btn-hover-bg: var(--color2);
     --mdb-btn-hover-color: #fff;
     --mdb-btn-focus-bg: var(--color2);
     --mdb-btn-focus-color: #fff;
     --mdb-btn-active-bg: var(--color2);
     --mdb-btn-active-color: #fff;
     background-color: var(--color3);
     border-color: var(--color3);
 }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active:hover{
    --mdb-btn-bg: var(--color3);
    --mdb-btn-color: #fff;
    --mdb-btn-box-shadow: 0 4px 9px -4px var(--color3);
    --mdb-btn-hover-bg: var(--color2);
    --mdb-btn-hover-color: #fff;
    --mdb-btn-focus-bg: var(--color2);
    --mdb-btn-focus-color: #fff;
    --mdb-btn-active-bg: var(--color2);
    --mdb-btn-active-color: #fff;
    opacity: 0.8;
    background-color: var(--color3);
    border-color: var(--color3);
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle{
    --mdb-btn-bg: var(--color3);
    --mdb-btn-color: #fff;
    --mdb-btn-box-shadow: 0 4px 9px -4px var(--color3);
    --mdb-btn-hover-bg: var(--color2);
    --mdb-btn-hover-color: #fff;
    --mdb-btn-focus-bg: var(--color2);
    --mdb-btn-focus-color: #fff;
    --mdb-btn-active-bg: var(--color2);
    --mdb-btn-active-color: #fff;
    opacity: 0.8;
    background-color: var(--color3);
    border-color: var(--color3);
}
