.button, .button1, .button2, .button3 {background: #575757 !important; color: #fff !important; padding: 4px 5px !important; font: bold 12px arial !important; float: left !important; cursor: pointer !important; border: none !important; margin-left: 3px !important;}
#btnskip {background: #09b420 !important; border-radius: 4px !important;}
#btnchangePassword {margin: 10px 0 0 0 !important; padding: 10px 25px !important; background: #684dfa !important; border-radius: 4px; font-family: 'Nunito Sans' !important; font-weight: 500 !important; font-size: 14px !important; line-height: 19px !important; color: #FFF !important;}
#btnskip {display: none !important;}
.form span {font-size: 12px !important;}

.blueBtn {margin: 10px 0 0 0 !important; padding: 10px 25px !important; background: #684dfa !important; border-radius: 4px; font-family: 'Nunito Sans' !important; font-weight: 500 !important; font-size: 14px !important; line-height: 19px !important; color: #FFF !important; margin-right: 10px !important;}
.whiteBtn {margin: 10px 0 0 0 !important; padding: 10px 25px !important; background: #fff !important; border-radius: 4px; border: 1px solid #684dfa; font-family: 'Nunito Sans' !important; font-weight: 500 !important; font-size: 14px !important; line-height: 19px !important; color: #684dfa !important;}

/**** header ****/
#header {height: auto; background: #2c52b4; padding: 20px 15px;}
#header h1.logo {margin: 0; padding: 0;}

/**** contentPartWrapper ****/
#contentPartWrapper {margin: 0; padding: 0; height: calc(100vh - 136px); background: #F3F3F3; display: flex; align-items: center; flex-wrap: wrap; justify-content: center;}
.formWrapperNew {width: 90%;}
.formWrapperNew table#table1 {width: 100%; max-width: 500px;}
.formWrapperNew table#table1 h2 {font-family: 'Nunito Sans'; font-weight: 700; font-size: 32px; line-height: 44px; color: #684DFA; margin: 0; padding: 0 0 10px 0;}
.formWrapperNew table#table1 p.contentTxt {font-family: 'Nunito Sans'; font-weight: 400; font-size: 16px; line-height: 28px; color: #393939; margin: 0; padding: 0 0 20px 0;}
.formWrapperNew table#table1 tr td input[type="password"], .formWrapperNew table#table1 tr td input[type="text"] {background: #FFF; box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15); border-radius: 4px; font-family: 'Nunito Sans'; font-weight: 400; font-size: 14px; line-height: 28px; color: #393939; padding: 4px 15px; height: auto; margin-bottom: 6px;}
.formWrapperNew table#table1 tr td input[type="password"]:focus, .formWrapperNew table#table1 tr td input[type="text"]:focus {outline: none;}
.formWrapperNew table#table1 tr td input[type="password"]::-webkit-input-placeholder, .formWrapperNew table#table1 tr td input[type="text"]::-webkit-input-placeholder {color: #818181;}
.formWrapperNew table#table1 tr td input[type="password"]::-moz-placeholder, .formWrapperNew table#table1 tr td input[type="text"]::-moz-placeholder {color: #818181;}
.formWrapperNew table#table1 tr td input[type="password"]:-ms-input-placeholder, .formWrapperNew table#table1 tr td input[type="text"]:-ms-input-placeholder {color: #818181;}
.formWrapperNew table#table1 tr td input[type="password"]:-moz-placeholder, .formWrapperNew table#table1 tr td input[type="text"]:-moz-placeholder {color: #818181;}
.formWrapperNew table#table1 tr td span.errorMessage {font-family: 'Nunito Sans'; font-weight: 400; font-size: 12px; line-height: 16px; color: #AA0A0A; padding: 0 0 0 15px;}
.formWrapperNew table#table1 tr td span.errorMessageRed {background: #AA0A0A; padding: 4px 10px; border-radius: 3px; color: #fff; font-weight: normal; font-size: 12px !important;}
.formWrapperNew table#table1 tr td.formFieldWrapper {padding-bottom: 15px;}
.formWrapperNew table#table1 tr td.showPasswordField input[type="checkbox"] {accent-color: #684DFA; width: 18px; height: 18px; margin-right: 10px; margin-top: 0; margin-left: 0;}
.formWrapperNew table#table1 tr td.showPasswordField .showPasswordWrapper {display: flex; align-items: center; flex-wrap: wrap;}
.formWrapperNew table#table1 tr td.showPasswordField .showPasswordWrapper span {padding: 0 !important; font-family: 'Nunito Sans'; font-weight: 400; font-size: 14px !important; line-height: 24px; color: #393939;}
img.forgetPasswordVector {max-width: 500px;}

/**** footer ****/
#footer {margin: 0; background: #2c52b4; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; height: 45px; line-height: inherit; padding: 0 15px; position: relative;}
#footer .copyrightTxt, #footer .footerRight {font-family: 'Nunito Sans'; display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: space-between;}

/**** media queries ****/
@media only screen and (min-width: 0px) and (max-width: 575px) {
    #header h1.logo {margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; width: 100%;}
    #header h1.logo img {max-width: 140px;}
    #contentPartWrapper {height: auto; padding: 30px 0;}
    img.resetPasswordVector, img.forgetPasswordVector {max-width: 260px;}
    .formWrapperNew table#table1 h2 {padding: 20px 0 4px 0;}
    .formWrapperNew table#table1 p.contentTxt {font-size: 14px; line-height: 24px;}
    #footer {height: auto; padding: 15px; justify-content: center;}
    #footer .copyrightTxt {padding-bottom: 6px;}
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    #header h1.logo {margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; width: 100%;}
    #header h1.logo img {max-width: 140px;}
    #contentPartWrapper {height: auto; padding: 30px 0;}
    img.resetPasswordVector, img.forgetPasswordVector {max-width: 260px;}
    .formWrapperNew table#table1 h2 {padding: 20px 0 4px 0;}
    .formWrapperNew table#table1 p.contentTxt {font-size: 14px; line-height: 24px;}
    #footer {height: auto; padding: 15px; justify-content: center;}
    #footer .copyrightTxt {padding-bottom: 6px;}
}