.login-contain{
    padding: 20px 40px;
    position: absolute;
    top: 125px;
}

#login-container {
     position: absolute;
     top: 15rem;
}


#reg-container {
    position: absolute;
    top: 7rem;
}

#forgot-container {
    position: absolute;
    top: 20rem;
}

.login-contain h2{
    font-weight: 600;
    margin-bottom: 35px;
    color: white;
}

.login-contain p{
    font-size: 15px;
    color: white;
    text-align:justify;
}

body {
    overflow-x: hidden;
}


.reguser{
    border-color: #40b09b;
    background: #fff;
}


.reguser:hover{
    border-color: #40b09b;
    background: #40b09b;
    color: #fff;
}

.lognbtn{
    margin-left: 40px;
}

.background-shapes-wrapper {
  position: absolute;
  width: 100vw;
  height: 100%;
  top: 0;
  overflow: hidden;
  /*background-image: linear-gradient(253deg, #40b09b 0, #3fb493 100%);*/

}

.background-shapes-container {
  width: 100%;
  height: 100%;
  position: relative;
}
.background-shape {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 10;
}

.square-one {
  width: 30px;
  height: 30px;
  top: 15%;
  left: 20%;
  -webkit-transform: rotate(-65deg);
  transform: rotate(-65deg);
}

.square-two {
  width: 25px;
  height: 25px;
  top: 55%;
  right: 1%;
  -webkit-transform: rotate(-65deg);
  transform: rotate(-65deg);
}
.square-three {
  width: 50px;
  height: 50px;
  top: 30%;
  left: 45%;
  -webkit-transform: rotate(-65deg);
  transform: rotate(-65deg);
}

.circle-one {
  width: 250px;
  height: 250px;
  border-radius: 100%;
  bottom: -125px;
  left: -125px;
}

.circle-two {
  width: 30px;
  height: 30px;
  bottom: 20%;
  right: 25%;
  border-radius: 100%;
}

.triangle-one {
  width: 0;
  height: 0;
  border-top: 69px solid transparent;
  border-bottom: 48px solid transparent;
  border-left: 90px solid rgba(255, 255, 255, 0.08);
  top: 45%;
  left: 30%;
  background-color: transparent;
  -webkit-transform: rotate(-100deg);
  transform: rotate(-100deg);
}
.triangle-two {
  width: 0;
  height: 0;
  border-top: 200px solid transparent;
  border-bottom: 130px solid transparent;
  border-left: 180px solid rgba(255, 255, 255, 0.1);
  top: -150px;
  right: -80px;
  background-color: transparent;
  -webkit-transform: rotate(-80deg);
  transform: rotate(-80deg);
}

.triangle-three {
  width: 0;
  height: 0;
  border-top: 68px solid transparent;
  border-bottom: 49px solid transparent;
  border-left: 90px solid rgba(255, 255, 255, 0.08);
  right: 10%;
  bottom: 1%;
  background-color: transparent;
  transform: rotate(-170deg);
}

.rectangle-one {
  width: 25px;
  height: 50px;
  top: 80%;
  left: 25%;
  -webkit-transform: rotate(-55deg);
  transform: rotate(-55deg);
}
.rectangle-two {
  width: 15px;
  height: 30px;
  top: 42%;
  right: 23%;
  -webkit-transform: rotate(-55deg);
  transform: rotate(-55deg);
}

.updatemofa{  
/*#038596
    old color :#00bbd3
*/
      background-color:  #038596 !important;
      border-radius: 4px !important;    
      color: #fff !important; 
          border-color: #00bbd3 !important;
          width:255px;
          font-size:20px;
}

.widget .box-1{
    background-color: #af64cc !important;
    color: #fff !important;
}


.widget .box-2{
    background-color: #e67e22 !important;
    color: #fff !important;
}


.widget .box-3{
    background-color: #ff6b6b !important;
    color: #fff !important;
}

.widget .box-4{
    background-color: #2297f7 !important;
    color: #fff !important;
}


.widget .box-5{
    background-color: #4db151 !important;
    color: #fff !important;
}

.widget .box-6{
    background-color: #3c4dbe !important;
    color: #fff !important;
}

.form-bordered .form-group{
        padding: 5px !important;
}

.block-title{
        padding: 10px;
}

tr th{
    background-color: #40b09b !important;
     color: #fff !important;
}


.btn-primary.btn-alt, .btn-primary.btn-alt:hover {
    color: #ffffff;
    background-color: #00bbd3;
    border-color: #00bbd3;
}

.mofano{
    width: 15%;
}

.btn-success.btn-alt, .btn-success:hover {
    background-color: #7db831;
    color: #fff;
    border-color: #7db831;
}

.dropdown-menu > li > a:hover{
    background-color: #40b09b;
}

.nav.navbar-nav-custom > li > a:hover{
    background-color: #40b09b;
}

.btn-primary.btn-alt {
    background-color: #00bbd3;
    color: #ffffff;
}

.btn-danger.btn-alt {
    background-color: #e74c3c;
    color: #ffffff;
    border-color: #e74c3c;
}


a, a:hover{
  color:  #40b09b;
}

.btn-primary,  .btn-primary:hover{
    background-color: #40b09a;
    border-color: #40b09b;
}

.navbar-collapse.collapse > ul > li > a:hover {
    color: #40b09b;
}

.login-title h1{
    margin-bottom: 0;
    margin-top: 0;
}

.updatebtn, .updatebtn:hover {
    background-color: #8bc34a !important;
    border-color: #8bc34a !important;
    color: #ffffff;
}

.navbar-collapse.collapse > ul > li > a:hover {
    color: #40b09b !important;
}

.nxtbtn, .nxtbtn:hover {
    color: #fff;
    background-color: #558b2f !important;
    border-color: #558b2f !important;
    margin-top: 0 !important;
}

@media screen and (min-width: 1024px) and (max-width: 1200px) {
    #reg-container {
        position: absolute;
        top: 3rem;
    }

    .login-contain {
    position: absolute;
    top: 30px;
}
    #login-container {
    position: absolute;
    top: 10rem;
}
#reg-container {
    position: absolute;
    top: 4rem;
}
}


    @media screen and (min-width: 767px) {
        .d-md-none {
            display: none;
        }

        .updatemofa {
            float: right !important;
            margin-left: 0 !important;
        }
    }


    @media screen and (min-width: 320px) and (max-width: 768px) {
        .login-contain {
            position: relative;
            top: 20px;
        }

        #login-container {
            position: absolute;
            top: 0;
        }

        #reg-container {
            position: absolute;
            top: 0;
        }

        #forgot-container {
            position: absolute;
            top: 0;
        }

        .triangle-two {
            display: none;
        }

        .login-contain h2 {
            font-size: 25px;
        }

        .userlogin {
            min-width: 80px !important;
        }

        .updatemofa {
            float: left !important;
            margin-left: 20px;
            width:100px;
        }

        #example-datatable1_wrapper {
            overflow-x: auto;
        }

        footer .pull-left, footer .pull-right {
            float: none !important;
            text-align: center !important;
        }

        .loginfrm, .regfrm, .forgotfrm {
            width: 93%;
        }

        .login-contain {
            padding: 20px 20px;
        }
    }