﻿.LoginForm1003 {
    margin-top: 25px;
    margin-bottom: 25px;
}

.LoginForm1003ErrorMessage {
    padding: 0px 50px;
    font-family: BYekan;
}

.LoginForm1003Xs {
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: 8px;
    margin-right: 8px;
}
.LoginForm1003formXs {
    margin: auto;
    
    padding: 20px 0px;
    background: #fff;
    border: 4px solid darkblue;
    border-radius: 25px;
    background-image: linear-gradient(45deg,palegoldenrod,lightgreen,palegoldenrod,lightgreen,palegoldenrod);
    /*background-color: rgb(245, 215, 180);*/
    background-size: cover;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective-origin: 50px center;
    perspective-origin: 50px center;
    -webkit-perspective: 2000px;
    perspective: 2000px;
    -webkit-transition: -webkit-transform 1s ease;
    transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1s ease, -webkit-transform 1s ease;
    /*box-shadow: 0px 0px 5px 5px rgba(255,225,190,0.4);*/
}
.LoginForm1003form {
    margin: auto;
    width: 400px;
    padding: 20px 30px;
    background: #fff;
    border: 4px solid darkblue;
    border-radius: 25px;
    background-image: linear-gradient(45deg,palegoldenrod,lightgreen,palegoldenrod,lightgreen,palegoldenrod);
    /*background-color: rgb(245, 215, 180);*/
    background-size: cover;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective-origin: 50px center;
    perspective-origin: 50px center;
    -webkit-perspective: 2000px;
    perspective: 2000px;
    -webkit-transition: -webkit-transform 1s ease;
    transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1s ease, -webkit-transform 1s ease;
    /*box-shadow: 0px 0px 5px 5px rgba(255,225,190,0.4);*/
}

    .LoginForm1003form::before, .LoginForm1003form::after {
        content: "";
        position: absolute;
        width: 100%;
        left: 0;
    }

    .LoginForm1003form::before {
        /*height: 100%;
  top: 0;
  -webkit-transform: translateZ(-100px);
          transform: translateZ(-100px);
  background: #333;
  opacity: 0.3;*/
    }

    .LoginForm1003form::after {
        content: "";
        -webkit-transform: translateY(-50%) translateZ(-101px) scaleX(-1);
        transform: translateY(-50%) translateZ(-101px) scaleX(-1);
        top: 50%;
        color: #fff;
        text-align: center;
        font-weight: bold;
    }

.LoginForm1003field {
    position: relative;
    background: #cfcfcf;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

}
.LoginForm1003fieldXs {
    position: relative;
    background: #cfcfcf;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    margin-right: 20px;
    margin-left: 20px;
}

    .LoginForm1003field + .LoginForm1003field {
        margin-top: 10px;
    }
        .LoginForm1003fieldXs + .LoginForm1003fieldXs {
        margin-top: 10px;
    }
.LoginForm1003icon {
    width: 24px;
    height: 24px;
    position: absolute;
    top: calc(50% - 12px);
    left: 12px;
    -webkit-transform: translateZ(50px);
    transform: translateZ(50px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

    .LoginForm1003icon::before, .LoginForm1003icon::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .LoginForm1003icon::after {
        -webkit-transform: translateZ(-23px);
        transform: translateZ(-23px);
        opacity: 0.5;
    }

.LoginForm1003input {
    border: 1px solid #dfdfdf;
    background: #fff;
    height: 48px;
    line-height: 48px;
    padding: 0 10px 0 48px;
    width: 100%;
    -webkit-transform: translateZ(26px);
    transform: translateZ(26px);
    font-family: BYekan;
}
.LoginForm1003inputXs {
    border: 1px solid #dfdfdf;
    background: #fff;
    height: 48px;
    line-height: 48px;
    padding: 0 10px 0 48px;
    width: 100%;

    -webkit-transform: translateZ(26px);
    transform: translateZ(26px);
    font-family: BYekan;
}
.LoginForm1003button {
    display: block;
    width: 100%;
    border: 0;
    text-align: center;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(45deg, rgb(15,50,26), rgb(49,160,85),rgb(15,50,26));
    margin-top: 20px;
    padding: 14px;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(26px);
    transform: translateZ(26px);
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    cursor: pointer;
}
.LoginForm1003buttonXs {
    display: block;
    width: 95%;
    margin: auto;
    border: 0;
    text-align: center;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(45deg, rgb(15,50,26), rgb(49,160,85),rgb(15,50,26));
    margin-top: 20px;
    padding: 14px;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(26px);
    transform: translateZ(26px);
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    cursor: pointer;
}
    .LoginForm1003button:hover {
        -webkit-transform: translateZ(13px);
        transform: translateZ(13px);
    }

/*.side-top-bottom {
  width: 100%;
}
.side-top-bottom::before, .side-top-bottom::after {
  content: "";
  width: 100%;
  height: 26px;
  background: linear-gradient(45deg, rgb(15,26,50), rgb(49,85,160),rgb(15,26,50));
  position: absolute;
  left: 0;
}
.side-top-bottom::before {
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transform: translateZ(-26px) rotateX(90deg);
          transform: translateZ(-26px) rotateX(90deg);
  top: 0;
}
.side-top-bottom::after {
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  -webkit-transform: translateZ(-26px) rotateX(-90deg);
          transform: translateZ(-26px) rotateX(-90deg);
  bottom: 0;
}

.side-left-right {
  height: 100%;
}
.side-left-right::before, .side-left-right::after {
  content: "";
  height: 100%;
  width: 26px;
  position: absolute;
  top: 0;
}
.side-left-right::before {
  background: #e53935;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transform: rotateY(90deg);
          transform: rotateY(90deg);
  left: 0;
}
.side-left-right::after {
  background: #e35d5b;
  -webkit-transform-origin: right center;
          transform-origin: right center;
  -webkit-transform: rotateY(-90deg);
          transform: rotateY(-90deg);
  right: 0;
}*/

.Username .LoginForm1003icon::before, .Username .LoginForm1003icon::after {
    background: url("/Content/MainContent/Design1003/UsernamePic.svg") center/contain no-repeat;
}

.password .LoginForm1003icon::before, .password .LoginForm1003icon::after {
    background: url("/Content/MainContent/Design1003/PasswordPic.svg") center/contain no-repeat;
}

/*.face-up-left {
  -webkit-transform: rotateY(-30deg) rotateX(30deg);
          transform: rotateY(-30deg) rotateX(30deg);
}

.face-up-right {
  -webkit-transform: rotateY(30deg) rotateX(30deg);
          transform: rotateY(30deg) rotateX(30deg);
}

.face-down-left {
  -webkit-transform: rotateY(-30deg) rotateX(-30deg);
          transform: rotateY(-30deg) rotateX(-30deg);
}

.face-down-right {
  -webkit-transform: rotateY(30deg) rotateX(-30deg);
          transform: rotateY(30deg) rotateX(-30deg);
}

.LoginForm1003form-complete {
  -webkit-animation: formComplete 2s ease;
          animation: formComplete 2s ease;
}

.LoginForm1003form-error {
  -webkit-animation: formError 2s ease;
          animation: formError 2s ease;
}*/

input .LoginForm1003input:active, input .LoginForm1003input:focus, button .LoginForm1003button:active, button .LoginForm1003button:focus {
    outline: none;
    border: 1px solid #e77371;
}

/*@-webkit-keyframes formComplete {
  50%, 55% {
    -webkit-transform: rotateX(30deg) rotateY(180deg);
            transform: rotateX(30deg) rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateX(0deg) rotateY(1turn);
            transform: rotateX(0deg) rotateY(1turn);
  }
}

@keyframes formComplete {
  50%, 55% {
    -webkit-transform: rotateX(30deg) rotateY(180deg);
            transform: rotateX(30deg) rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateX(0deg) rotateY(1turn);
            transform: rotateX(0deg) rotateY(1turn);
  }
}
@-webkit-keyframes formError {
  0%, 100% {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
            transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    -webkit-transform: rotateX(-25deg);
            transform: rotateX(-25deg);
  }
  33% {
    -webkit-transform: rotateX(-25deg) rotateY(45deg);
            transform: rotateX(-25deg) rotateY(45deg);
  }
  66% {
    -webkit-transform: rotateX(-25deg) rotateY(-30deg);
            transform: rotateX(-25deg) rotateY(-30deg);
  }
}
@keyframes formError {
  0%, 100% {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
            transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    -webkit-transform: rotateX(-25deg);
            transform: rotateX(-25deg);
  }
  33% {
    -webkit-transform: rotateX(-25deg) rotateY(45deg);
            transform: rotateX(-25deg) rotateY(45deg);
  }
  66% {
    -webkit-transform: rotateX(-25deg) rotateY(-30deg);
            transform: rotateX(-25deg) rotateY(-30deg);
  }
}
small {
  color: #999;
  text-align: center;
  display: block;
  margin-top: 20px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}*/
.SignInForm1003input {
    font-family: BYekan;
    font-size: 16px;
    color: darkblue;
    
}
.SignInForm1003DropDowninput {
    font-family: BYekan;
    font-size: 14px;
    color: darkblue;  
}

.SignInForm1003Header {
    font-family: BYekan;
    font-size: 16px;
    color: blueviolet;
}
.SignInForm1003ValidationMessage {
    color: red;
}