:root {
   --sp-gradient-primary: linear-gradient(180deg, #003879 0%, #1e68bd 100%);
   --sp-bg-primary: #003879;
   --sp-bg-secondary: #2770ff;
   --col-white: #fff;
}


* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Poppins", sans-serif;
}


body {
    /* background: linear-gradient(180deg, #CA2970 0%, #EE2D70 100%); */
    background: var(--sp-gradient-primary);
    width: 100%;
    background-repeat: no-repeat;
    height: 90vh;
 }

 .register-left-title {
    font-weight: 600;
 }

 .user-ragistration {
    background-image: url("../../static/images/Waves.png");
    background-size: cover;
    background-repeat: no-repeat;
 }

 .containr {
    height: 90vh;
    display: flex;
    align-items: center;
 }

 .register {

    padding: 3%;
    /* align-items: center; */
    justify-content: space-between;
    /* height: 90vh; */
    width: 90%;
    margin: 0 auto;
    /* margin-top: -10%; */

 }

 .register .register-form {
    padding: 10%;
    margin-top: 10%;
 }

 @media (max-width: 991px) {
    .register .register-form {
       margin-top: 16%;
    }
 }

 @media (max-width: 667px) {
    .register .register-form {
       margin-top: 20%;
    }
 }

 .register .nav-tabs {
    margin-top: 3%;
    border: none;
    background: var(--sp-bg-secondary);
    border-radius: 1.5rem;
    width: 28%;
    float: right;
 }

 @media (max-width: 991px) {
    .register .nav-tabs {
       width: 33%;
       margin-top: 8%;
    }
 }

 .register .nav-tabs .nav-link {
    padding: 2%;
    height: 34px;
    font-weight: 600;
    color: var(--col-white);
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
 }

 .register .nav-tabs .nav-link:hover {
    border: none;
 }

 .register .nav-tabs .nav-link.active {
    width: 100px;
    color: var(--sp-bg-secondary);
    border: 2px solid var(--sp-bg-secondary);
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
 }

 .register-left {
    /* text-align: center; */
    color: var(--col-white);
    /* margin-top: 4%; */
    padding: 2%;
 }

 .register-left input {
    border: none;
    border-radius: 1.5rem;
    padding: 2%;
    width: 60%;
    background: #f8f9fa;
    font-weight: bold;
    color: #383d41;
    margin-top: 30%;
    margin-bottom: 3%;
    cursor: pointer;
 }

 .register-left img {
    /* margin-top: 15%; */
    margin-bottom: 5%;
    width: 20%;
    /* animation: mover 1s infinite alternate; */
 }

 .register-left p {
    font-size: 18px;
    margin-top: 4%;
    /* width: 75%; */
 }

 .register-right {
    background: var(--col-white);
    border-radius: 6px;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
 }

 @-webkit-keyframes mover {
    0% {
       transform: translateY(0);
    }

    100% {
       transform: translateY(-20px);
    }
 }

 @keyframes mover {
    0% {
       transform: translateY(0);
    }

    100% {
       transform: translateY(-20px);
    }
 }

 .btnRegister {
    float: right;
    margin-top: 5%;
    border: none;
    border-radius: .3rem;
    padding: 2%;
    background: var(--sp-gradient-primary);
    color: var(--col-white);
    font-weight: 600;
    width: 100%;
    cursor: pointer;
 }

 .register-heading {
    text-align: center;
    margin-top: 8%;
    margin-bottom: -15%;
    color: var(--sp-bg-primary);
 }

 @media (max-width: 991px) {
    .register-heading {
       font-size: 1.5rem;
    }
 }

 .myform .form-control:focus,
 .form-check-input:focus {
    border-color: var(--sp-bg-secondary);
    box-shadow: none;
 }

 .myform .form-check-input:focus {
    border-color: var(--sp-bg-secondary);
    box-shadow: none;
 }

 .accented {
    accent-color: var(--sp-bg-secondary);
 }

 .passwordDiv{
   position: relative;
 }

 .toggle-password{
   position: absolute;
   top: 43px;
   right: 8px;
 }

 .cp{
   cursor: pointer;
 }