@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;400;700&display=swap');

:root{
/* Color styles */
--yello: #F5B200;
--blue: #0F88CA;
--green: #009B9B;
--pink: #E4007E;
--grey: #6B737E;
--button--yellow--hover: #F59100;
--button--yellow: #F7B200;
--button--blue: #148ACB;
--button--blue--hover: #005292;
--blue--tekstlink: #148ACB;
--button--green: #00AA9E;
--button--green--hover: #01736B;
--white: #FFFFFF;
--black: #000000;
--grey-bg: #EEEEEE;
--black--transparent: rgba(0, 0, 0, 0.1);
--white--transparent: rgba(225, 225, 225, 0.5);
--transparent: rgba(225, 225, 225, 0);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  margin-bottom: 1.2rem;
  line-height: 1.5;
  font-family: 'Trebuchet MS';
  font-weight: normal;
  font-style: normal;
}
p{
  font-family: 'inter';
  font-weight: normal;
  font-style: normal;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
a{
  text-decoration: none;
  color: var(--black);
}
@font-face {
  font-family: 'Trebuchet MS';
  src: url('/font/Trebuchet_MS.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'inter';
  src: url('/Font/Inter-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'inter';
  src: url('/Font/Inter-Thin.ttf');
  font-weight:100;
  font-style: normal;
}

/*
  Custom style
*/
.bg{
  background: rgb(238,238,238);
  background: linear-gradient(90deg, rgba(238,238,238,1) 50%, rgba(247,178,0,1) 50%);
}
.steps{
  background-color: var(--grey-bg);
  color:var(--black);
}
.steps-mob{
  background-color: var(--grey-bg);
}
.align-middle{
  margin: auto 0px;
}
.overview-block{
  background-color: var(--black--transparent);
}

/*
  Form
*/

.col-form{
  background-color: var(--yello);
  color:var(--white);
  max-width: 600px;
}
@media only screen and (min-width: 989px){
  .col-form{
    padding:3em !important;
  }
}
.form-check{
  padding-left: 0 !important;
  margin-top: 1.5em;
}
.form-control-lg, .form-select-lg, .form-select{
  border-radius: 0px !important;
  border: none;
}
.form-floating{
  color:var(--grey) !important;
  margin-bottom:1rem;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border: 2px solid var(--white);
    border-radius: 100%;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: var(--white);
    position: absolute;
    top: 5px;
    left: 5px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="checkbox"]:checked + label,
[type="checkbox"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
}
[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: -2px;
    top: -2px;
    width: 22px;
    height: 22px;
    border: 2px solid var(--white);
    border-radius: 3px;
}
[type="checkbox"]:checked + label:after,
[type="checkbox"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: var(--white);
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 1px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="checkbox"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}


/*
  Buttons
*/
.buttons{
  margin: 50px 0px;
}
.btn-primary{
  border-radius: 0px;
  background-color: var(--button--green);
  border: solid 2px var(--button--green);
  padding:10px 20px;
  float: right;
  font-size: 1em;
}
.btn-primary:hover, .btn-primary:active{
  background-color: var(--button--green--hover);
  border: solid 2px var(--button--green--hover);
}
.btn-secondary{
  border-radius: 0px;
  background-color: var(--transparent);
  border: solid 2px var(--white);
  color:var(--white);
  padding:10px 20px;
  float: left;
  font-size: 1em;
}
.btn-secondary:hover, .btn-secondary:active{
  border: solid 2px var(--white);
  background-color:var(--white);
  color:var(--yello);
}

/*
  Progress bar Desk
*/
.progress_bar li{
  list-style:none;  
  margin-left: 22px;
  counter-increment:circle 1;
  display:flex;
  position:relative;
  cursor:pointer;
  height: 40px;
  margin-bottom: 25px;
}
.progress_bar li::before{
  content:counter(circle);
  position:absolute;
  height:40px;
  margin-left: -55px;
  width:40px;
  background-color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#000;
  border-radius:50%;
  z-index:10;
  font-weight:700;
  cursor:pointer;
  transition:all 0.5s;
}
.progress_bar li::after{
  content:'';
  position:absolute; 
  height:25px;
  width:3px;
  background-color:var(--white); 
  top: -25px;
  left: -36px;
  cursor:pointer;
  transition:all 0.5s;
}
.progress_bar li:nth-child(1)::after{
  display:none;
}


/*
  Progress bar Mobile
*/
.mobile-progress{
  width: 100px;
}
.progress {
  width: 75px;
  height: 75px !important;
  float: left; 
  line-height: 90px;
  background: none;
  margin: 20px;
  box-shadow: none;
  position: relative;
}
.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.progress>span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress .progress-left {
  left: 0;
}
.progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right {
  right: 0;
}
.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-1 1.8s linear forwards;
}
.progress .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: var(--grey-bg);
  font-size: 16px;
  color: var(--black);
  line-height: 65px;
  text-align: center;
  position: absolute;
  top: 5%;
  left: 5%;
}
.progress.yellow .progress-bar {
  border-color: var(--yello);
}
@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

/*
  Time Table
*/
.notification{
  color:var(--pink);
  margin-bottom: 20px;
}
.timetable{
  margin:20px 0;
}
@media only screen and (min-width: 989px){
  .timetable{
    width: 700px;
  }
}
.timetable-wrap{
  max-width: 600px;
  overflow: auto;
}
.timetalbe-wrap-before{
  float: left;
}
.timetalbe-wrap-before tr{
  height: 191px;
  color:var(--white);
}
.timetable-wrap input{
  display: none;
  
}
.timetable-wrap label{
  border: solid 2px var(--white);
  color:var(--white);
  border-radius: 5px;
  padding: 20px;
  font-size:0.8em;
  width: 220px;
  height: 130px;
  margin-top:20px;
}

.timetable-wrap input:checked + label{
  border: solid 2px var(--white);
  color: var(--black) !important;
  background-color:var(--white--transparent) ;
}
.table>:not(caption)>*>*{
  border-bottom: solid 1px var(--white);
}