/* ---------------------------------------------------
Danish state
----------------------------------------------------- */
:root {
  --branding-1-50: #D2EADC;
  --branding-1-100: #A0BDA8;
  --branding-1-200: #759C80;
  --branding-1-300: #4C815F;
  --branding-1-400: #116B43;
  --branding-1-500: #005734;
  --branding-1-600: #004C2D;
  --branding-1-700: #004223;  
  --branding-1-800: #00371A;
  --branding-1-900: #002A0D;  

--gray-50: #ffffff;
--gray-100: #F3F2F2;
--gray-200: #CDCDCF;
--gray-300: #AAABAD;
--gray-400: #888A8C;
--gray-500: #68696B;
--gray-600: #4D4D4F;
--gray-700: #454547;
--gray-800: #343234;
--gray-900: #292728;
--dark: #000000;
}

#sidebar {
  background:var(--branding-1-400);
  color: var(--gray-50);
}

#sidebar a{
  color: var(--branding-1-50);
}

#sidebar .sidebar-header {
  border-bottom: 1px solid var(--branding-1-500);
}

#sidebar h3{
  color: var(--branding-1-50);
}

#sidebar .sidebar-header button {
  color: var(--branding-1-50);
}

#sidebar button:hover {
  color: var(--branding-1-100);
}

#sidebar ul li a {
  border-left: 4px solid var(--branding-1-400);
}

#sidebar ul li ul li{
  background-color: var(--branding-1-600);
}

#sidebar ul li.active>a{
  background: var(--branding-1-800);
  border-left: 4px solid var(--branding-1-100);
  border-left: 4px solid var(--branding-1-100);
}

#sidebar ul li a:hover {
  background: var(--branding-1-600);
  border-left: 4px solid var(--branding-1-100);    
}

#sidebar hr{
  border-bottom: 1px solid var(--branding-1-600);
}

.tooltip-inner {
  background-color: var(--branding-1-800);
}
.tooltip.bs-tooltip-right .arrow:before {
  border-right-color: var(--branding-1-800) !important;
}
.tooltip.bs-tooltip-left .arrow:before {
  border-left-color: var(--branding-1-800) !important;
}
.tooltip.bs-tooltip-bottom .arrow:before {
  border-bottom-color: var(--branding-1-800) !important;
}
.tooltip.bs-tooltip-top .arrow:before {
  border-top-color: var(--branding-1-800) !important;
} 

.userB .dropdown-menu{
  box-shadow: 0px 2px 2px rgba(21, 21, 23, 0.24);
}
	
.list-group-item a:hover { /*user dropdown bottom links*/
  color: var(--branding-1-600);
}

.list-group-item a::before {
  background-color: var(--branding-1-600);
}

.dropdown-item{
  border-left: 4px solid var(--gray-50);
}

.dropdown-item:hover{
  background-color: var(--branding-1-50);
  border-left: 4px solid var(--branding-1-900);
}  

.navbar .container-fluid{
  border-color: var(--gray-200);
}

.navbar .userB{
  background-color: var(--gray-200);
  border-bottom: 1px solid var(--gray-200);

}
.navbar .userB:hover{
  background-color: var(--gray-300);
}

.userB .userBimg,
.btn .userBimg{
  border: 1px solid var(--dark-800);
}

.navbar .appName{
  color: var(--branding-1-400);
}

.navbar .brandBlurb{
  color: var(--branding-1-500);
}

.headTxtSm{
  color: var(--dark);
}

.headTxtSm a{
  color: var(--dark-900);
}

#appSelect .dropdown-item{
  border-left: 4px solid  var(--gray-50);
  padding: .35rem 1.5rem .35rem 1rem
}
#appSelect .dropdown-item:hover{
  background-color:  var(--branding-1-50);
  border-left: 4px solid  var(--branding-1-600);
}  

#appSelect .appSelectChevron span{
  color: var(--dark);
}

#appSelect .dropdown-item + .section-title{
  background-color: var(--branding-1-50);
  border-left: 4px solid var(--branding-1-50)!important;  
}

#appSelect .dropdown-item + .section-title p{
  color: var(--dark);
}

#appSelect .dropdown-item + .section-title:hover{
  color: var(--dark);
}

.nav-item .badge{
  border: 2px solid var(--gray-50);
}

.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-text {
	color: var(--gray-500);
}
.nav-tabs {
  margin-bottom: 0.7rem;
}

.ttLogo-tr{
  content:url("/v2/images/danish-state-recruitment-logo.png")!important;
}

/*removing "more apps" section and marketplace link in sidebar*/
.ds-remove, .ds-remove + * {
  display: none;
}














/* ---------------------------------------------------
Danish state career and user login
----------------------------------------------------- */
.DS-body {
  .col {
    background-color: var(--gray-50);
  }
  * {
    font-family: 'Open Sans', verdana, 'ITC Avant Garde', sans-serif;
  }
  .fa-regular, .fa-solid, .fa-light, .fa-thin {
    font-family: "Font Awesome 6 Pro";
  }
  .fa-brands {
    font-family: "Font Awesome 6 Brands";
  }

  .navbar-toggler {
    &:hover,
    &:focus,
    &:active{
      box-shadow: 0 0 0 0.2rem var(--dark);
    }
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    color:var(--dark);
  }
  h1 {
    font-size: 1.476rem;
  }
  h2 {
    font-size: 1.383rem;
  }
  h3 {
    font-size: 1.296rem;
  }
  h4 {
    font-size: 1.215rem;
  }
  h5 {
    font-size: 1.138rem;
  }

  h6 {
    font-size: 1.67rem;
  }

  .DS-navbar {
    height: auto;
    p{
      font-size: 0.9rem;
      margin-bottom: 0rem;
      line-height: 1.2rem; 
    }
  }

  .DS-login {
    padding: 0.7rem;
  }

  table th {
  text-transform: initial;
  }
  .accordion .card-header button{
    color:  var(--dark);
  }

  .accordion .card-header .text-left{
    padding: 0.4rem;  
  }
  .accordion h2 {
    color: var(--dark);
    padding-block: 0;
    margin-block: 0;
  }

  .btn-mitid{
      background-color: #0260E6;
      border: 1px solid transparent;
    }
    .btn-mitid:hover{
      background-color: #0147a8;
      border: 1px solid transparent;
    }
    
    .btn-mitid:active{
      background-color: #013d90;
      border: 1px solid transparent;
    }
    .btn-mitid:focus{
      background-color: #0147a8;
      border: 1px solid transparent;
    }
      .btn-mitid {
      color: var(--gray-50) !Important;
    }
    .large-icon {
      font-size: 7rem;
    }
    h1.display-2 {
      font-size: 3rem;
    }
    @media (max-width: 576px) {
      h1.display-2 {
        font-size: 2rem;
      }
      .large-icon {
        font-size: 4rem;
      }
    }

    .DS-contact-col h2 {
      font-size: 1rem;
      font-weight: 600;
    }
    .media .media-body p {
      font-family: inherit;
      font-weight: 400;
    }
    .media img {
      max-width: 22%;
    }
    .media-body h3, .h6{
      font-size: 1rem;
    }
  .list-group-item {
      border: none;
      padding: 0;
      margin: 0;
    }
    .lead {
      font-weight: 500;
    }
.btn {
  text-transform: inherit;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.3rem;
  border-radius: 7px;
  margin: 2px;
    &:visited,
    &:hover,
    &:focus,
    &:active{
      border: 6px solid tranparent;
      box-shadow: 0 0 0 0.2rem var(--dark);
    } 
  }

  .btn-primary {
    background-color: var(--branding-1-400);
    border-color: transparent !important;
    &:visited,
    &:hover,
    &:focus,
    &:active{
      background-color: var(--branding-1-500) !important;      
    } 
  }

  .btn-outline-primary {
    background-color: var(--gray-50);
    color: var(--branding-1-500);
    border-color: var(--branding-1-500) !important;
      &:visited,
      &:hover,
      &:focus,
      &:active{
        background-color: var(--branding-1-400) !important;
        color: var(--gray-50);
      }  
  }

  table .btn.btn-secondary, 
  .btn-secondary {
    background-color: var(--gray-200);
    border-color: transparent !important;
      &:visited,
      &:hover,
      &:focus,
      &:active{
        background-color: var(--gray-500) !important;
        color: var(--gray-50) !important;
      } 
  }

  a.btn {
    border: 6px solid transparent;
    &:visited,
    &:hover,
    &:focus,
    &:active{
      border: 6px solid transparent !important;
    } 
  }

  a.btn-primary {
    &:visited,
    &:hover,
    &:focus,
    &:active{
     color: var(--gray-50);
    } 
  }

  .btn .ApplyButton,
  .btn .apply {
    width: 100%;
    padding: 0.4rem;
    background-color: transparent;
    color: var(--gray-50);
    font-family: inherit;
    font-weight: 700;
    border-color: transparent;
  }
  .btn:has(.ApplyButton),
  .btn:has(.apply) {
    padding: 0;
    padding: 0 1rem 0 1rem;
  }

  /* buttons for TIMEOUT BOX*/
  #Button_No,
  #Button_Yes,
  .timeoutwarning_buttonyes,
  .timeoutwarning_buttonno,
  .DS-btn-primary {
    border: 3px solid #116B43;
    background-color: #116B43;
    padding: 0.4rem 1rem 0.4rem 1rem;
    margin: 0.4rem 0.2rem 0.4rem 0.2rem;
    border-radius: 7px;
    color: white;
    font-family: inherit;
    font-weight: 700;
      &:visited,
      &:hover,
      &:focus,
      &:active
      &:focus-visible{
        background-color: var(--branding-1-500) !important;  
        color: white !important;
        box-shadow: 0 0 0 0.2rem #000000 !important;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
      }
  }


  a{
  color: var(--branding-1-400);
  text-decoration: underline;
    &:visited,
    &:hover,
    &:focus,
    &:active{
      border: 6px solid tranparent;
      box-shadow: 0 0 0 0.2rem var(--dark) !important;
    } 
}

table .btn {
  text-transform:none !important;
}

  a.btn-primary {
    text-decoration: none;
    color: var(--gray-50);  
}

a.nav-link {
    text-decoration: none;
  }
    h1, .h1 {
      font-size: 1.2rem;
      font-weight: 600;
    }
    h2, .h2 {
      font-size: 1rem;
      font-weight: 600;
    }
  }



  /*DANISH STATE MODAL OVERRIDES*/
  .DS-modal .modal-dialog .modal-content .modal-header {
    background-color: inherit !important;
    color: inherit !important;
    padding: 1rem  !important;
    font-size: reset  !important;
    font-weight: inherit !important;
    border-bottom: reset !important;  
    display: inherit !important;  
    justify-content: revert !important;
    align-items: normal !important;
    font-size: 2rem !important;
    h5, .h5 {
      font-size: 1rem;
    }
    .close {
      font-size: 2rem !important;
    }
  }

  .DS-modal .modal-dialog .modal-content .modal-body {
    color: inherit !important;
    font-size: 1.075rem;
  }

.DS-modal .modal-dialog .modal-content .modal-footer {
    padding: 0.7rem;
    gap: normal;
    border-top: reset  !important;
    background-color: #f1f1f3  !important;
  }

  .modal-footer .btn-primary,
  .modal-footer .btn-outline-primary,
  .modal-footer .btn-primary-outline {
    background-color: var(--branding-1-500) !important;
    border: var(--branding-1-500) !important;
    color: white !important;
  }


/*DANISH STATE ALERT OVERRIDE*/
  .DS-alert {
    position: --webkit-sticky !important;
    position: fixed !important;
    top: 12vh !Important;
    width: 100%;
    z-index: 222;
    left: 50% !important;
    transform: translateX(-50%);
    .alert {
      padding-bottom: 2rem;
    }
  }


  /*
  input {
  margin-top: 1rem;
}

input::file-selector-button {
  font-weight: bold;
  color: white;
  padding: 1rem;
  border: 3px solid orange;
  border-radius: 6px;
  background-color: green;
}*/