/* ================= GENERAL SETTINGS ======================== */

@font-face {
  font-family: PT Sans;
  font-display: swap;
  src: url(/external/fonts/ptsans/PTS55F.ttf); 
}
@font-face {
  font-family: PT Sans-bold;
  font-display: swap;
  src: url(/external/fonts/ptsans/PTS75F.ttf); 
}
@font-face {
  font-family: PT Sans-italic;
  font-display: swap;
  src: url(/external/fonts/ptsans/PTS56F.ttf); 
}
body {
  background-color: white; 
  font-family: PT Sans, Arial, Helvetica, Verdana, Tahoma, 'Trebuchet MS', sans-serif;
  color: #575757; 
  text-shadow: 0 0 0 #000;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
a {
  font-size: 14px;
  color: #0075bb;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
h1 {
  text-align: center;
}
h2, h3 {
  font-size: 18px;
  color: #0075bb;
  text-align: center;
  width: 320px;
  margin: 0 0 8px 0;
}
h3 {
  width: 100%;
  color: #0075bb;
}
.action-item {
  width: 100%; 
  float: left;
  margin-top: 8px;
}
.error {
  background: #FFF6F5 url(/images/error-icon_14.gif) 4px 2px no-repeat; 
  border: 1px solid #FF0000; 
  color: #FF0000; 
  margin: 12px;
  padding: 7px 12px 7px 25px;
  font-style: italics;
  font-size: 13px;
  clear: both;
}
.item {
  width: 100%;
  float: left;
}
.item .left-col, .item .right-col {
  width: 40%;
  float: left;
}
.item .right-col {
  width: 60%;
} 
label {
  width: 90%;
  min-height: 24px;
  text-align: right;
  margin:0 8px 10px 0;
  font-size: 12px; 
  float: right;
  line-height: 14px;
}
input[type=text], input[type=number], input[type=password], textarea, select, .rb {
  border: 1px solid #334aff;
  background-color: #F7F7F7;    
  border-radius: 5px;
  padding: 2px;
  box-shadow: 1px 1px 2px #858585;
  transition: border linear 0.5s, box-shadow linear 0.5s;
  outline: none;
  font-family: Roboto;
  font-size: 14px;
}
textarea {
  height: 60px;
  overflow: auto;
  clear: left;
}
select {
  width: 284px;
  height: 20px;
  margin-bottom: 10px;
  padding: 1px;
}
.button-wrap {
  float: left;
  margin: 15px 0;
  margin-left: 40%;
  width: 58%;
  min-width: 300px;
}
.button {
  float: left;
  width: 240px;                                                                                                                                         
  height: 24px;
  display: block;
  text-align: center;
  font-weight: bold; 
  font-size: 14px;
  line-height: 23px;
  border-radius: 5px;
  background-color: #0075bb;
  color: #FFFFFF;
}
.cf { 
  display: block; 
}
.cf:after {
  clear: both;
  content: '';
  display: block;
  height: 0;
  line-height: 0;
  visibility: hidden;
}
.w120 {
  width: 120px;
}
.w150 {
  width: 150px;
}
.w240 {
  width: 240px;
}

/* =================  CONTAINER SETTINGS ======================== */
#container {
  width: 100%; 
  text-align: left;
  margin: 0 auto;
  position: relative;
}

/*   ============   HEADER & TITLE SECTION   ============   */
.title-wrap {
  background-color: #858585;   
  width: 100%;
  padding: 10px 0; 
}
.title-wrap h1 {
  margin: 0;
  line-height: 30px;
  font-size: 30px;
  letter-spacing: 3px;
  font-family: 'PT Sans';
  color: #0075bb;
}

/*   ============   FOOTER SECTION   ============   */
#footer-fwidth {
  background-color: #858585;
  position: relative;
  width: 100%; 
  min-height: 30px;
} 
#footer-wrap {
  width: 100%; 
  color: #FFFFFF;          
  text-align: center;
  line-height: 28px;
}
#footer-wrap .version {
  width: 120px;
  margin-right: 12px;
  display: inline;
  float: right;
  margin: 0 10px 0 0;
  font-size: 13px;
  color: white;
}

/*   ============   CONTENT   ============ */
#content-fwidth {
  clear: both;
}       
#content-wrap {
  min-width: 320px;
  padding-top: 30px;
  padding-bottom: 30px;
}
#content-wrap p {
  margin: 0;
  padding: 0 20px 0 20px;
  line-height: 1.5;
  font-size: 14px;
}
.breadcrumb {
  background-color: white; 
  border-radius: 5px;
  position: relative;
  top: -25px;
  padding: 2px 5px;
  margin-left: 4px;
  float: left;
  font-size: 10px;
}
#login #content-wrap, #forgot-pw #content-wrap, #login-contact #content-wrap, #pw-reset #content-wrap {
  background-color: transparent;
}
#login #content-fwidth, #forgot-pw #content-fwidth, #login-contact #content-fwidth, #pw-reset #content-fwidth {
 background: url(/images/tcw.png) 0 0 no-repeat; 
 background-size: cover;
}
#pw-reset #container, #login-contact #container, #login-timezone #container, #logout #container, #system-message #container, #betaald #container {
  min-height: 300px;
}

/*   ============   BOX SETTINGS ============  */
#box-container {
  float: none;
  max-width: 600px;
  margin: 20px auto 0 auto;  
}
.box-wide, #login-box, #single-box, #login-box-disabled, #message-box {
  background-color: #C5E9FA; 
  width:  calc(100% - 2px);  
  min-width: 318px;  
  margin: 0 auto;  padding: 18px 0;
  margin-bottom: 30px;
  border: 1px solid;
  box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.box-wide p {
  padding: 6px 20px;
}

/*   ============   LOGIN PAGE   ============   */
#login p {
  padding: 8px 20px;
}
#login #content-fwidth {
 min-width: 320px;
}
#login .box-wide {
  background-color: #C5E9FA; 
  text-align: center;
}
#login-box, #login-box-disabled {
  float: none; 
  width: 325px;
  min-height: 200px;
  margin: 30px auto;
  padding: 10px 0;
}
#single-box {
  width: 330px;
  margin: 0 auto;
}
#login-box .left-col {
  width: 130px;
}
#login-box .left-col label {
  max-width: 100%;
  line-height: 16px;
}
#login-box .right-col {
  width: 194px;
}
#login-box .right-col .pw-eye {
  float: right;
  margin-top: 6px;
  margin-right: 8px;
  width: 26px;
}
#login-box .input {
  width: 150px;
}
#login-box #pw-sequence {
  float: left;
  background-color: #D7D7D7;
  font-size: 11px;
  margin-bottom: 4px;
  padding: 4px 10px;
  display: none;
}
#login-box .bottom-section {
  margin: 24px 0 0 80px;
  width: 200px;
}
#login-box .button {
  width: 125px;
}
#login-box .bottom-section .item {
  width: 240px;
}
#login-box #change_pw .checkbox {
  margin: 0 4px 0 8px;
  float: left;
}
#login-box #change_pw p {
  width: 200px;
  float: left;
  font-size: 12px;
  padding: 0 2px;
  line-height: 1.1;
}
#login-box a {
  display: block;
  margin: 8px 0 8px 8px;
}
#login-box-disabled {
  background-color: #D7D7D7;
}
#login-box-disabled p {
  font-size: 14px;
  line-height: 24px;
  padding: 0 50px 0 18px;
  color: white;
  font-style: BOLD;
}

/*   ============   FORGOT PASSWORD PAGE   ============   */
#forgot-pw #content-fwidth {
 min-width: 320px;
}
#forgot-pw .input {
  max-width: 210px;
  width: 95%;
}
#forgot-pw select {
  width: 216px;
}
#forgot-pw #captcha-wrap .input {
  width: 60px;
}
#forgot-pw .error {
  width: 340px;
  margin: 20px 0 10px 280px;
}
#forgot-pw .box-wide .cancel a {
  margin-left: 40px;
}
#forgot-pw .box-wide #captcha-wrap a {
  margin: 0
}
#forgot-pw .error {
  width: 80%;
  max-width: 320px;
  margin-left: 5%;
}

/*   ============   LOGIN CONTACT PAGE   ============   */
#login-contact .cancel {
  margin-left: 40px;
}                  
/*   ============   PASSWORD RESET PAGE   ============   */
#pw-reset .input {
  margin-right: 20px;
  width: 150px;
  float: left;
}
#pw-check .new-check {
  float: none;
  padding-left: 20px;
}
#pw-check input {
  float: left;
  margin: 0 6px;
}
#pw-check label {
  float: left;
  text-align: left;
  width: 200px;
  min-height: 16px;
}
#pw-reset .right-col {
  width: 60%;
}
#pw-reset .error {
  width: 80%;
  max-width: 320px;
  margin-left: 5%;
}

/*   ============   LOGOUT PAGE   ============   */
#logout #content-fwidth {
 min-width: 320px;
}
#logout .expired {
  background: url(/images/inactief2.png) 0 0 no-repeat;
  background-size: cover;
  min-height: 500px;
}
#logout .logout {
  background: none;
  background-color: #f2f2f2;
  height: 400px;
}
#logout #content-wrap {
  background-color: transparent;
}
#logout #message-box p {
  color: #464646;
}
#logout .logout-img {
  width: 250px;
  margin: 50px auto 0 auto;
}

/*   ============   CAPTCHA   ============   */
#captcha-wrap {
  margin: 15px 0;
  width: 100%;
  float: left;
}
#captcha-wrap .captcha-items {
  float: left;
  width: calc(40% - 8px);
  margin-right: 8px;
}
#captcha-wrap .captcha-items label {
  width: 100%;
  float: right;
  text-align: right;
  margin: 0 0 8px 0;
} 
#captcha-wrap .input {
  width: 60px;
  margin-right: 40px;
  margin-bottom: 0;
  float: right;
}
#captcha-wrap .captcha-image {
  max-width: 220px;
  width: 100%;
  width: 60%;
  float: left;
}
#captcha-wrap img {
  border: 1px solid;
  float: left;
  height: 78px;
  width: 210px;
}
#captcha-wrap .new-code {
  width: 100%;
  float: right;
  display: block;
  text-align: right; 
  margin-top: 8px;
}
#captcha-wrap a {
  font-size: 14px;
  text-align: right;
  padding-left: 10px;
  color: 0075bb;
}

/*   ============   SYSTEM MESSAGE PAGE (also used for system message on Login/Logout page)   ============   */
#system-message #content-fwidth {
 min-width: 320px;
}
#system-message .background {
  background: url(/images/system_message.jpg) 0 0 no-repeat;
  background-size: cover;
  min-height: 300px;
}
#system-message #content-wrap {
  min-height: 300px;
  background-color: transparent;
}
#message-box {
  margin: 20px auto 0 auto;           
  background-color: #ffe8fc; 
  border-color: blue;   
}
#message-box p {
  margin: 0;
  color: #464646;
  font-size: 14px;
}