/* ============= This is a section ============= */

@font-face {
  font-family: 'Montserrat';
  src: url('../../fonts/Montserrat-Italic.eot');
  src: url('../../fonts/Montserrat-Italic.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/Montserrat-Italic.woff2') format('woff2'),
  url('../../fonts/Montserrat-Italic.woff') format('woff'),
  url('../../fonts/Montserrat-Italic.ttf') format('truetype'),
  url('../../fonts/Montserrat-Italic.svg#Montserrat-Italic') format('svg');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../../fonts/Montserrat-Light.eot');
  src: url('../../fonts/Montserrat-Light.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/Montserrat-Light.woff2') format('woff2'),
  url('../../fonts/Montserrat-Light.woff') format('woff'),
  url('../../fonts/Montserrat-Light.ttf') format('truetype'),
  url('../../fonts/Montserrat-Light.svg#Montserrat-Light') format('svg');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../../fonts/Montserrat-Bold.eot');
  src: url('../../fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/Montserrat-Bold.woff2') format('woff2'),
  url('../../fonts/Montserrat-Bold.woff') format('woff'),
  url('../../fonts/Montserrat-Bold.ttf') format('truetype'),
  url('../../fonts/Montserrat-Bold.svg#Montserrat-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../../fonts/Montserrat-Regular.eot');
  src: url('../../fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/Montserrat-Regular.woff2') format('woff2'),
  url('../../fonts/Montserrat-Regular.woff') format('woff'),
  url('../../fonts/Montserrat-Regular.ttf') format('truetype'),
  url('../../fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: Roboto, 'Open Sans', sans-serif;
  font-size: 14px;
  background-color: #fff;
}

/* ------------- This is a sub-section   ------------- */

/* Colors should always be defined with their respective hex code or rgb values, never color names. (wrong { color: tomato; }) */

h1, h2, h3 {
  font-family: Roboto, Montserrat, sans-serif;
  font-weight: bold;
  line-height: 1.5em;
}

h1 {
  font-size: 1.8em;
}

h2 {
  font-size: 1.4em;
}

h3 {
  font-size: 1.3em;
}

h4 {
  font-size: 1.2em;
}

h5 {
  font-size: 1.1em;
}

h6 {
  font-size: 1em;
}

i, address {
  font-style: normal;
}

hr {
  border-top: 1px solid #C8C8C8;
}

/* ============= Page wrapper ============= */
.well a {
  font-weight: bold;
}

/* ============= Navbar ============= */

.navbar .brand, .navbar .nav > li > a, .navbar .language-switch a {
  color: #fff;
  text-shadow: none;
}

.navbar {
  background-color: #fff;
  border-bottom: 1px solid #FFFFFF;
  min-height: 32px;
  padding: 1rem 1.625rem 1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e6f8fc;
}

.navbar-inverse .navbar-inner, .navbar-inverse .btn-navbar {
  background: #fff;
}

.navbar .brand {
  width: 200px;
  height: 24px;
  text-indent: -9999px;
  background: url(../img/company-logo.svg) no-repeat;
  margin-left: 20px;
  background-size: contain;
}

.navbar.navbar-small .brand {
  width: 161px;
  height: 40px;
  background: url(../img/company-logo.svg) no-repeat;
}

.navbar .nav > .active > a {
  color: #444444;
}

.tooltip {
  font-size: 12px;
  font-weight: bold;
}

.tooltip-inner {
  border-radius: 5px;
}

.deep-box {
  border-radius: 5px;
}

/* ============= Buttons ============= */

.btn {
  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none;
  background-image: none;
  background-repeat: no-repeat;
  padding: 0.5em 1em;
}

.modal-footer .btn {
  font-weight: normal;
  font-size: 14px;
  line-height: 18px;
}

.modal-footer input.btn {
  height: 34px;
}

.btn-medium {
  font-size: 14px;
  border-radius: 4px;
}

.btn-primary {
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: #041295;
  border: none;
  color: #ffffff;
  margin-top: 10px;
  height: 40px;
}

.btn-secondary {
  color: #041295;
  background-color: white;
  border: 2px solid #041295 !important;
  border-radius: 2px !important;
  box-sizing: border-box;
  height: 40px;
  width: 100%;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
  opacity: 0.8;
  background-color: #041295;
}

.btn-grey, a.btn-grey, .btn-grey:hover, .btn-grey:focus, .btn-grey:active, .btn-grey.active {
  opacity: 0.8;
}

.btn-grey, a.btn-grey {
  border-top: 1px solid #fff;
  border-bottom: 3px solid #8f8f8f;
}

.btn-grey:hover, .btn-grey:focus, .btn-grey:active, .btn-grey.active {
  border-top: 3px solid #8f8f8f;
  border-bottom: 1px solid #fff;
}

.modal-footer .btn {
  font-weight: normal;
  font-size: 14px;
  line-height: 18px;
}

.list-striped a.btn-primary {
  text-shadow: 1px 1px 0 #2D5F7C;
}

.social-list-item, .social-list-action {
  line-height: 30px;
}

/* ============= Lists ============= */

.list-striped {
  background-color: #ECECEC;
}

.list-striped li {
  padding: 15px;
}

.list-striped li:nth-child(even) {
  background: none repeat scroll 0 0 white;
  box-shadow: 0 0 3px 0 #8A8A8A inset;
}

.list-striped li:last-child {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.list-striped a {
  text-shadow: 0 1px 0 #FFFFFF;
}

/* ============= Forms ============= */

fieldset {
  border: 1px solid #c8c8c8;
  box-shadow: inset 1px 1px 0 #fff;
}

legend {
  font-weight: bold;
  color: #444444;
  background-color: #FFF;
  text-shadow: 0 2px 0 white;
}

.control-label {
  font-size: 14px;
  font-weight: normal;
}

.control-group.error .control-label {
  color: #444444;
}

.optional-indicator {
  font-weight: normal;
  font-style: italic;
}

.chosen-container {
  border-radius: 3px;
  color: #555555;
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  font-size: inherit;
}

.chosen-container-single .chosen-single {
  border: none;
  border-radius: 3px;
  background: none;
  padding: 2px 0 2px 8px;
  box-shadow: none;
}

.notification-message-box {
  text-align: center;
  padding: 10px;
}

input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"],
input[type="date"], input[type="number"], input[type="search"], textarea {
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="url"]:focus, input[type="date"]:focus, input[type="number"]:focus, input[type="search"]:focus,
textarea:focus, select:focus {
  background: #f9f9f9;
}

input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"],
input[type="date"], input[type="number"], input[type="search"], textarea, select {
  font-size: 16px;
  color: #404040;
  background-color: #FFFFFF;
  padding: 10px 8px;
  width: 100%;
  height: 40px;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  border: 1px solid #5D607E;
  border-radius: 2px;
  box-sizing: border-box;
}

/* Do not merge with the selector above, because IE9 cannot handle the :invalid pseudo selector and ignore the whole rule */
input:focus:invalid, textarea:focus:invalid, select:focus:invalid,
input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus {
  color: #404040;
  background: #f9f9f9;
  box-shadow: inset -1px -1px 1px #ccc;
  border-color: #cccccc;
  border-bottom: 1px solid #fcfcfc;
}

.ielte9 .readonly input {
  color: #444;
}

a.uneditable-content:hover {
  color: #5195bc;
}

.password-criteria li {
  color: #8a8a8a;
}

.password-criteria li.valid {
  color: #444;
}

/* ============= Dashboard ============= */

.uneditable-content {
  color: #444444;
  font-size: 12px;
  line-height: 20px;
}

/* ============= Social icons ============= */

.external-idps {
  margin-top: 2em;
}

.login-form.form-horizontal .external-idps .login-buttons.controls {
  margin-left: 0;
}

.login-actions ul li {
  text-shadow: 0 1px 0 white;
}

.login-actions ul li i, .login-actions ul li time {
  padding-left: 18px;
  background-repeat: no-repeat;
  background-image: url(../img/personal/clock.png);
  background-image: none, url(../img/personal/clock.svg);
  background-size: 12px 12px;
  height: 12px;
}

.social-list-item::before {
  content: " ";
  float: left;
  display: block;
  margin-right: 5px;
  width: 20px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: center center;
}

.social-list-item-facebook::before {
  background-image: url("../img/personal/facebook.svg");
}

.social-list-item-twitter::before {
  background-image: url("../img/personal/twitter.svg");
}

.social-list-item-google_oauth2::before {
  background-image: url("../img/personal/google.svg");
}

.social-list-item-linkedin::before {
  background-image: url("../img/personal/linkedin.svg");
}

.social-list-item-mockgini::before, .social-list-item-mockgininoactivation::before, .social-list-item-unp_idp::before {
  background-image: url("../img/personal/mockgini.svg");
}

.social-list-item-digid::before {
  background: url("../img/personal/digid.svg") no-repeat 0 top;
}

.social-list-item-eidas::before {
  background: url("../img/personal/eidas.png") no-repeat 0 top;
}

.social-list-item-azure_ad_b2c::before {
  background: url("../img/personal/azure_ad_b2c.svg") no-repeat 0 top;
}

.social-list-item-itsme::before {
  background-size: 20px;
  background: url("../img/personal/itsme.svg") no-repeat center;
}

.social-list-item-eherkenning::before {
  background-size: 20px;
  background: url("../img/personal/eherkenning.png") no-repeat center;
}

.login-actions ul li {
  font-size: 12px;
}

/* ============= Footer ============= */

.popover {
  background-color: #ffffff;
  border: 1px solid #ccc;
}

.popover.top .arrow {
  border-top-color: #ccc;
}

.popover.top .arrow:after {
  border-top-color: #e2e2e2;
}

.popover.right .arrow {
  border-right-color: #ccc;
}

.popover.right .arrow:after {
  border-right-color: #e2e2e2;
}

.popover.bottom .arrow {
  border-bottom-color: #ccc;
}

.popover.bottom .arrow:after {
  border-bottom-color: #e2e2e2;
}

.popover.left .arrow {
  border-left-color: #ccc;
}

.popover.left .arrow:after {
  border-left-color: #e2e2e2;
}

.popover-content {
  color: #444;
}

/* ============= Footer ============= */

#footer {
  border-top: 1px solid #C8C8C8;
}

#footer a, #footer a:visited {
  color: #444444;
}

/* ============= Page specific parts ============= */
/* -------------   doLogin/landing   ------------- */

.wayf ul li a {
  border: 1px solid #444;
  border-radius: 0;
}

.wayf ul li a:hover {
  margin-top: -10px;
  margin-bottom: 10px;
}

.login-box-right {
  text-align: left;
}

.login-section-header {
  display: block;
}

.box-footer .g_prev, .box-footer .g_next {
  width: 16px;
  background-repeat: no-repeat;
  background-size: 30px 15px;
  background-image: url("../img/personal/nav.png");
  background-image: none, url("../img/personal/leftright.svg");
  float: left;
}

/* ============= Media queries ============= */

@media (max-width: 767px) {
  .login-box-right {
    border-top: none;
  }
}