@import url(https://fonts.googleapis.com/css?family=Quicksand:400, 700);
@import url(//fonts.googleapis.com/css?family=Open + Sans);
@import url(//fonts.googleapis.com/css?family=Open + Sans:bold);
@import url(//fonts.googleapis.com/css?family=Roboto);
@import url(//fonts.googleapis.com/css?family=Roboto:bold);

html {
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
}

:root {
    --background-color: #f6f6f6;
    --text-color: #032738;
    --white: white;
    --blue: #039be5;
    --blue-light: #ecf9ff;
    --blue-dark: #036697;
    --green: #4caf50;
    --green-light:#edfbd8;
    --orange: #ffc107;
    --orange-light: #fefae2;
    --red: #f54438;
    --red-light: #ffebe3;
    --grey: #aaa;
    --grey-light: #eee;
    --font-small: .7rem;
    --font-normal: .8rem;
    --font-medium: 1rem;
    --font-large: 1.15rem;
    --shadow: 0 0px 4px 0px rgba(38,38,38,0.08), 0 2px 4px 0px rgba(38,38,38,0.07);
    --border-radius: 3px;
    --input-background-color:#fff;
    --input-border-color: #d7dee2;
    --button-border-color: #ff3441;
    --button-background-color: #ff3441;
    --card-header-background: #032738;
    --text-alt-color: #032c40;

}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color:var(--text-color);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--background-color);
}

@media (prefers-color-scheme: dark) {


  /* (same rules as above, but body.dark => body.auto) */
  body .css-lightonly {
   display: none;
  }

  body .css-darkonly {
   display: unset;
  }
  body {
      --background-color: #222;
      --text-color: #fff;
      --white: #121212;
      --grey-ultralight: #444;
      --blue: #35afea;
      --blue-light: #666;
      --blue-dark: #81cdf2;
      --green: #01C794;
      --green-light:#666;
      --orange-light: #666;
      --red-light: #666;
      --grey: #aaa;
      --grey-light: #5d5e62;
      --input-background-color:var(--white);
      --input-border-color: var(--grey);
      --button-border-color: #b6252f;
      --button-background-color: #b6252f;
      --card-header-background: #000;
      --text-alt-color: #fff;
  }

  body nav a img {
      filter: invert(1);
  }
}

.form-control {
  background-color: var(--white);
}
.form-control:focus {
  background-color: var(--white);

}

a:focus,
a:hover,
button {
    text-decoration: none !important;
    outline: 0 !important;
    cursor: pointer;
    color:var(--text-color);

}
::-moz-selection {
    background-color: #2e3138;
    color: #fff;
}
::selection {
    background-color: #2e3138;
    color: #fff;
}
.section {
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
}
.section-title {
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0;
    padding-bottom: 1rem;
    line-height: 1;
    font-size: 1.75rem;
    font-weight: 800;
}
.svg-pattern {
    width: 100%;
    position: relative;
}
.bg-white {
    background-color: var(--white, white);
}
.text-white {
    color: #fff !important;
}
@media all and (-ms-high-contrast: none) {
    ::-ms-backdrop {
        background: 0 0;
        color: #000;
    }
}
.bg-mail {
    background: url(https://mijn.intention.nl/images/bg-mail.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.bg-pattern-effect {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.bg-pattern-effect img {
    width: 100%;
}
@media all and (-ms-high-contrast: none) {
    ::-ms-backdrop {
        top: 3px;
    }
}
.logo1234 {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

@media (max-width: 1024px) {
    .bg-pattern-effect {
        bottom: -4px;
    }
}
@media (max-width: 768px) {
    .bg-pattern-effect {
        bottom: -7px;
    }
}
@media all and (-ms-high-contrast: none) {
    ::-ms-backdrop {
        top: 3px;
    }
}
@media (min-width: 768px) {
    .form-row {
        height: 62px;
    }
}
body {
    padding-right: 0 !important;
}
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 8px;
    font-family: Colfax, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    background: var(--button-background-color);;
    border: 2px solid var(--button-border-color);;;
    border-radius: 30px;
    transition: 0.25s ease;
    transition-property: background, border, color;
}
.button:focus {
    outline: 0;
}
.button:hover {
    background: #ff0111;
    border-color: #ff0111;
}
.button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 16px;
    color: #80929b;
    background: 0 0;
    border: 2px solid #80929b;
    border-radius: 50%;
}
.button-icon:hover {
    color: #fff;
    background: var(--text-color);
    border-color: var(--text-color);;
}
.button-link {
    color: #80929b;
    text-decoration: none;
    border-bottom: 1px solid #80929b;
}
.button-row {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
.cp-card {
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 16px rgba(3, 39, 56, 0.05);
    width:500px;
    padding: 0px;
}
.cp-card-header {
    background: var(--card-header-background);
   border-radius: 8px 8px 0px 0px;
    width:500px;
    padding: 0px;
}

@media (min-width: 800px) {
}


.cp-card-body {
    overflow: auto;
    background-color: var(--white, white);
    padding:25px;
   border-radius: 0px 0px 8px 8px;
}
.form-field {
    width: 100%;
    height: 40px;
    font-size: 14px;
    color: var(--text-color);
    text-indent: 5px;
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
    transition: box-shadow 0.25s ease;
}

.row {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    height:calc(100vh - 100px);
}
.login-logo {

    width:250px;
    padding-top:25px;
    padding-bottom:25px
}
.footer {
    background-color: var(--white, white);
    padding-bottom:50px
}
input {
    padding:5px;
    outline:none;
}
input:focus {
    border-color:red;
}


form {
    width: 100%;
    margin: 0 auto;
}

form div {
    position: relative;
}

form div + div {
    margin-top: 20px;
}

/* CARD */
.card {
    background: #F9FAFB;
    border-radius: 3px;
    padding: 8px 16px 8px;
//    margin-bottom: 16px;
    border: 1px solid #ecf0f5;
}

.card-alert {
    background: #FFCCCE;
    border: 1px solid #FF4A48;
    border-left: 0.5rem solid #FF4A48;
    color: #434F58;
    font-size: 14px;
}

.card-link {
    text-decoration: none;
    color: #032c40
}

.card-primary {
    background: #eaedf1;
}

.card-success {
    background: #e6ffee;
    border: 1px solid green;
    border-left: 0.5rem solid green;
    color: #434F58;
    font-size: 14px;
}

.card-info {
    background: #F9FAFB;
    border-left: 0.5rem solid #044565;
    color: #434F58;
    font-size: 14px;
}

.card-info2 {
    background: #D6EAF8;
    border-left: 0.5rem solid #85C1E9;
    color: #434F58;
    font-size: 14px;
}
@media screen and (max-width: 1024px) {
    .bg-pattern-effect {
	display:none;
    }
    .row {
	height:calc(120vh);
    }
}
@media screen and (max-width: 600px) {
    .bg-pattern-effect {
	display:none;
    }
    .cp-card {
	margin: 0 auto;
	width:100%;
    }
    .row {
	margin-left:0px;
	margin-right:0px;
	height:100%;
    }
    .cp-card-header {
	width:100%;
    }
}