:root{
   --dark-blue: rgb(0, 46, 110);
   --blue: rgb(0, 127, 198);
   --cyan-blue: rgb(0, 174, 239);
   --light-blue: rgb(232, 243, 252);
   --orange: rgb(242, 99, 34);
   --red: rgb(190, 20, 27);
   --dark: rgb(28, 28, 28);
   --gray: rgb(113, 112, 115);
   --light-gray: rgb(223, 231, 232);
}
@font-face {
  font-family: "DIN W01";
  src: url("../fonts/a94d5d16-cbe3-439e-b1a5-fbdfb180d789.eot");
  src: url("../fonts/a94d5d16-cbe3-439e-b1a5-fbdfb180d789.eot?#iefix") format("embedded-opentype"), url("../fonts/8beea44e-c2c9-4889-9123-13d0e8b8d1bc.woff2") format("woff2"), url("../fonts/871e70ec-2f76-44c5-a2f1-77ee8cd0a5fe.woff") format("woff"), url("../fonts/8fa83ec7-0734-49e5-b5ad-b13a41463328.ttf") format("truetype");
}
@font-face {
  font-family: "DIN W01";
  src: url("../fonts/a397c752-ee83-47cf-b8a8-b476511dd2c9.eot");
  src: url("../fonts/a397c752-ee83-47cf-b8a8-b476511dd2c9.eot?#iefix") format("embedded-opentype"), url("../fonts/53fb9c60-2054-4c31-9283-5562244b4935.woff2") format("woff2"), url("../fonts/45831ca8-93bd-4808-aa5f-3c915944f727.woff") format("woff"), url("../fonts/429a3e29-88da-4603-94ff-c1450c089c88.ttf") format("truetype");
}

*{
   font-family: "DIN W01";
}

body{
   background-color: var(--light-blue);
}

.btn-out-line{
   display: block;
   width: auto;
   border: 1px solid var(--dark);
   color: var(--dark);
   padding: 10px 10px;
   text-align: center;
   background-color: transparent;
   border-radius: 0;
}

.btn-spill{
   padding: 10px 20px;
   color: #fff;
   display: block;
   position: relative;
   text-decoration: none;
   background-color: var(--orange);
   border-radius: 0;
}

header{
   background-color: #fff;
   margin-bottom: 60px;
}

header .logo{
   padding: 15px 0;
}

header .logo img{
   max-height: 60px;
}

h1{
   color: var(--dark-blue);
   font-weight: bold;
   font-size: 36px;
   margin-bottom: 60px;
}

.form-login .form-wrap{
   background-color: #fff;
   padding: 45px 85px;
   max-width: 800px;
   margin: auto;
}

.form-login .form-title{
   margin-bottom: 30px;
   color: var(--dark-blue);
   font-weight: 600;
}

.form-login .form-wrap label{
   color: var(--dark-blue);
   font-weight: 600;
}

.form-login .form-wrap input,
.form-login .form-wrap input:focus,
.form-login .form-wrap input:active{
   border-radius: 0;
   border: 2px solid var(--dark-blue);
   outline: none;
   box-shadow: none;
}

a, a:hover,
.form-login .form-wrap a.forgot-link,
.form-login .form-wrap a.forgot-link:hover{
   color: var(--dark-blue);
}

.form-login .form-wrap .link{
   margin-right: 3rem;
}

.alert-danger{
   background-color: var(--red);
   color: #fff;
}

.form-login .form-wrap p{
   margin-bottom: 0;
}

/* home page */
.main-homepage{
   padding-bottom: 60px;
}
.main-homepage .nav{
   padding: 30px 0;
   border: none;
   background-color: var(--dark-blue);
}
.main-homepage .nav .nav-item .nav-link{
   width: 100%;
   border: none;
   border-radius: 0;
   font-weight: bold;
   color: #fff;
   background-color: var(--dark-blue);
   font-size: 22px;
   text-align: left;
}

.main-homepage .nav .nav-item .nav-link.active,
.main-homepage .nav .nav-item.current-menu-item .nav-link{
   color: var(--orange);
}

.main-homepage .tab-content{
   background-color: #fff;
   height: 100%;
   padding: 30px;
}

.main-homepage .tab-content .tab-pane ul li,
.main-homepage .tab-content .tab-pane ul li a {
   font-size: 18px;
   color: #000;
   text-decoration: none;
}

.main-homepage .tab-content .tab-pane ul li a:hover{
   text-decoration: underline;
   color: var(--orange);
}

.main-homepage .tab-content .tab-pane h4,
.main-homepage .tab-content .tab-pane h4 a{
   font-weight: bold;
   font-size: 18px;
   text-decoration: underline;
   color: #000;
}

.main-homepage .main-title{
   text-align: center;
   font-weight: bold;
   color: var(--dark-blue);
   margin-bottom: 25px;
}

@media (max-width: 767px){
   .form-login .form-wrap{
      padding: 30px;
   }

   .form-login .form-wrap .link{
      margin-right: 10px;
   }
}