/* ANDY  */

header.vestedHeaderBenefits {
  background-image: url('/image/44d0dd63-e6f3-4952-8098-c46e804484dc?v=638954394582475841');
}
header.vestedHeader {
  background-image: url('/image/44d0dd63-e6f3-4952-8098-c46e804484dc?v=638954394582475841');
}
#loginwrap {
  background-image: url('/image/9f0dc1ff-a871-464f-8681-68c39f05828d?v=638954394582475841');
}
.active {
  font-size: x-large;
}
.navbar-default .navbar-header .navbar-brand {
  background-image: url('/image/ecfcad6c-a4d2-4a7a-b417-e1afba91ea54?v=638954394582475841');
}
#my-benefits .service-box img {
  max-width: 100% !important;
  max-height: 100% !important;
}
/* AND ANDY */

.application-icon {
  display: block;
  background: url('/image/ecfcad6c-a4d2-4a7a-b417-e1afba91ea54?v=638954394582475841') no-repeat center bottom;
  background-size: contain;
  height: 90px;
  text-indent: -9999px;
  padding: 20px 0;
  margin-bottom: 10px;
  background-position: center center;
}
.application-name-image {
  display: block;
  background: url('/image/ecfcad6c-a4d2-4a7a-b417-e1afba91ea54?v=638954394582475841') no-repeat center bottom;
  background-size: contain;
  height: 60px;
  text-indent: -9999px;
  padding: 10px 0;
  margin-top: 10px;
  background-position: center center;
}
.navbar-header .navbar-brand {
  height: 43px !important;
}
/*MAIN SITE CSS*/

/* 
Standard v 1.02f - 13/03/23

~~~Table Of Contents~~~

-Variables 

-Client specific

-Frequently used

-Welcome Page
---Navbar
---Welcome Box
---Benefit Area

-Benefits page

-Global

-TRS / navbar links

-Dashboard/expenses module

-Login Page

-Timeout/logout Page

*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~Variables~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* 
Variables - These are objects you can use in multiple places 
use them by doing: var(--variablename) 
*/

:root {
  --palette-primary-1: #009845;
  --palette-primary-2: #10cfc9;
  --palette-primary-3: #009845;
  --palette-primary-4: #c4cfda;
  --palette-secondary-4: #dc1a32;
  --palette-primary-5: #e5e3e3;
  --navbar: #ffffff;
  --benefit-category-area: #ffffff;
  --benefit-icons: #10cfc9;
  --button-border: #009845;
  --button-highlights: #402011;
  --default-light: #ffffff;
  --default-dark: #222222;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~Client specific~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

header.vestedHeaderBenefits {
  background-position-y: -186px !important;
  background-repeat: no-repeat;
}
header.vestedHeader {
  height: 300px;
  background-position-y: 300px;
}
.RenewalCountdown {
  color: var(--default-dark) !important;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~Frequently used~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* As there are only 4 benefit category's, this arranges them across the page equally*/

@media (min-width: 1200px) {
  .col-lg-3 {
    width: 25%;
  }
}
/* Use this to turn off the \"representing\" message. display: none; turns it off. */

/* Navbar - Adjust to make the logo fit (to large cuts the top and bottom off). */

#mainNav > div.container-fluid > div.navbar-header > a {
  width: 205px !important;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~Welcome Page~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~Navbar~~~~~~~~~~~~~*/

/* Change colour of header banner on main page */

.navbar-default .nav > li > a,
.navbar-default .nav > li > a:focus {
  color: var(--palette-primary-2);
  font-size: 20px;
  font-weight: bold;
}
/* Navbar Hover Colour */

.navbar-default .nav > li > a:hover,
.navbar-default.affix .nav > li > a:focus,
.navbar-default .nav > li.active > a:focus,
.navbar-default .nav > li.active > a,
.navbar-default .nav > li > a:focus:hover {
  color: var(--palette-primary-2) !important;
  font-size: 20px;
}
/*Change text colour of menu when scrolled down*/

.navbar-default.affix .nav > li > a,
.navbar-default.affix .nav > li > a:focus {
  color: var(--palette-primary-2) !important;
}
/*Change text hover colour of menu when scrolled down*/

.navbar-default.affix .nav > li > a:hover,
.navbar-default.affix .nav > li > a:focus:hover {
  color: var(--palette-primary-2) !important;
}
/* Changes the button on the top menu when the screen width is small.*/

.navbar-default .navbar-header .navbar-toggle {
  color: var(--default-light);
  background-color: var(--palette-primary-1);
  border-color: var(--default-light);
}
/* Element above the main navbar */

.navbar-default {
  background-color: var(--navbar) !important;
  border-color: var(--navbar) !important;
  color: var(--default-light);
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
/* Main Navbar all versions */

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: var(--navbar);
  background-color: var(--navbar);
}
/*To move header menu text down to match logo*/

.navbar-nav > li > a {
  padding-top: 19px;
}
/* navbar - Menu (closed) */

.container-fluid {
  padding-right: 15px;
  background-color: var(--navbar);
  color: var(--navbar);
  margin-right: auto;
  margin-left: auto;
  margin-top: 5px;
  margin-bottom: 5px;
}
/* To move logo down to center of header bar*/

.navbar-default .navbar-header .navbar-brand {
  height: 90px !important;
}
/*~~~~~~~~~~~~~~~Welcome box, picture/body ~~~~~~~~~~~~~~~*/

/* Change welcome box colour */

.welcome_message {
  color: var(--default-dark) !important;
  border-radius: 20px;
  margin: 50px auto;
  padding: 10px;
  padding-bottom: 22px;
  padding-top: 14px;
}
/* welcome message body text area*/

header.vestedHeaderBenefits .header-content .header-content-inner p {
  font-weight: 300;
  color: var(--default-dark);
  font-size: 16px;
  margin-bottom: 36px;
}
/*~~~~~~~~~~~~~~Benefit service Area CSS~~~~~~~~~~~~~*/

/* Top  part is called \"bg-primery\". This is your \"Category\" area where you open up the benefits.
once the top category is selected this opens the \"services\" area.*/

/* This effects what happens to images - Made  the effect slightly bigger*/

.bg-primary .service-box:hover img {
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  box-shadow: 0px 0px 2px 2px var(--button-highlights) !important;
}
/*~~~~~~~~~~~~~Benefit Category~~~~~~~~~~~~~~~~*/

/* This affects benefit selection Buttons - making the size uniform so they tile correctly*/

.rowBenGrp .col-lg-3 {
  height: 182px;
}
/* Change colour of benefit category background */

.bg-primary {
  background-color: var(--benefit-category-area);
  color: var(--default-dark);
}
/* Change colour of benefit category title*/

a.whiteBeneLink {
  color: var(--palette-primary-1);
}
/*Change the size of category icons text*/

h3,
.h3 {
  font-size: 20px !important;
  font-weight: bold;
}
/* Benefit category - This is the \"default\" look for the background of the icon. */

.bg-primary .service-box {
  border-radius: 500px;
  padding-bottom: 3px;
  opacity: 0.8;
  transition: ease-in-out 0.3s;
  outline: none;
  height: 190px;
  width: 190px;
}
/* Benefit category ICONS*/

#about .fa-4x {
  border-radius: 500px;
  color: var(--palette-primary-1);
  width: 104px;
  height: 104px;
  box-sizing: border-box;
}
/* Benefit category IMAGES */

#my-benefits .service-box img {
  border-radius: 500px;
  display: inherit;
  justify-content: center;
  align-items: center;
  width: 104px;
  height: 104px;
}
/* displays the icon (the above object creates the icon \"before\" it. this makes sure its aligned.*/

#about .fa-4x::before {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 104px;
  height: 98px;
}
/* Selected Benefit option highlight - what do you want to happen to the icon once its selected? */

.bg-primary .active .service-box {
  opacity: 1;
}
/* what happens when you hover over the selection button?*/

.bg-primary .service-box:hover {
  opacity: 1;
}
/* The text on the benefit category button */

.bg-primary .service-box h3 {
  color: var(--palette-primary-1);
}
/* This effects what happens to icons */

.bg-primary .service-box:hover .fa-4x {
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
}
/* Close */

/*~~~~~~~~~~~~~Benefit Services~~~~~~~~~~~~~~~~*/

/* Benefit lower Section benefit text. */

.rowBenGrp h3 {
  color: var(--default-dark) !important;
}
/* Benefit service Icon colour*/

.benefitDetailsHome .fa,
.rowBenGrp i,
.rowBenGrp h3 {
  color: var(--benefit-icons);
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~Benefit Pages~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*To change icon colors in benefit page*/

i.fa.fa-3x {
  color: var(--benefit-icons);
  margin-top: -6px;
}
/*To change the icon on the \"Make / Change your selection\" */

i.fa.fa-arrow-right {
  color: white;
}
/*Changing colour of progress bar*/

.progress-bar {
  background-color: var(--palette-primary-2);
}
/*Making the icons line up at the top of the page*/

/*Make Sal Sac*/

p.ng-binding {
  margin-top: -4px;
}
/*Window*/

i.fa.fa-3x.fa-share-square-o {
  margin-top: -5px;
}
/*Enrollment*/

i.fa.fa-3x.ti-loop {
  margin-top: -11px;
}
/* Close */

/* Adjust benefit title*/

@media (min-width: 768px) {
  header.vestedHeaderBenefits {
    min-height: 755px;
  }
}
/* Adjust benefit title*/

@media (min-width: 768px) {
  header.vestedHeader .header-content .header-content-inner h1 {
    font-size: 30px;
    margin-top: 80px;
    color: var(--default-dark);
  }
}
/*~~~~~~~~~~~~~Benefit wording~~~~~~~~~~~~~~~~*/

/* Standard Header Format (that's always open) */

.StandardHeader {
  min-height: 40px;
  text-align: left;
  padding-left: 15px;
  padding-top: 9px;
  padding-bottom: 9px;
  border-radius: 25px;
  border-color: var(--palette-primary-4);
  background-color: var(--palette-primary-4);
  color: var(--default-light);
  font-size: 14pt;
  font-weight: bold;
}
.StandardBody {
  padding-left: 15px;
  padding-right: 15px;
}
/* FAQ Headers (the ones that open and close) */

.faq-header {
  transition: opacity 0.3s ease-in-out;
  -webkit-transition: opacity 0.3s ease-in-out;
  -webkit-transition: border-radius 0.3s ease-in-out;
  transition: border-radius 0.2s ease-in-out;
  min-height: 40px;
  text-align: left;
  padding-left: 15px;
  padding-top: 9px;
  padding-bottom: 9px;
  border-radius: 25px;
  background-color: var(--palette-primary-4);
  color: var(--default-light);
  font-size: 14pt;
}
/* Changes the effect when mouse hovering FAQ areas*/

.faq-header:hover {
  cursor: pointer;
  opacity: 0.95;
  border-radius: 10px;
}
.faq-body {
  padding-left: 15px;
  padding-right: 15px;
}
/*Making arrow white in Make a new selection button*/

.benefitDetailsHome .dropdownicon {
  float: right;
  color: white;
  padding-right: 15px;
}
/*Changing the default text*/

.benefitDetailsHome p,
.benefitDetailsHome ul,
.benefitDetailsHome ol {
  font-size: 12pt;
}
/* Adjusts cost table in benefit wording*/

#CostTable {
  border-collapse: collapse;
  font-size: 12pt;
  text-align: center;
  width: 100%;
  margin-bottom: 15px;
}
#CostTable p {
  margin-bottom: 0px;
}
#CostTable th {
  padding: 8px;
  background-color: #3d4975;
  color: #fff;
  text-align: center;
}
#CostTable td,
#CostTable th {
  padding: 8px;
  border: 1px solid #dddddd;
}
#CostTable tr {
  min-height: 40px;
}
#CostTable tr:nth-child(even) {
  background-color: #f0f0f0;
}
#CostTable tr:hover {
  background-color: #ddd;
}
/* Close */

/* Adjusts resources table in benefit wording*/

#ResourcesTable {
  border-collapse: collapse;
  font-size: 12pt;
}
#ResourcesTable td,
#ResourcesTable th {
  padding: 8px;
}
#ResourcesTable tr {
  min-height: 40px;
}
#ResourcesTable tr:hover {
  background-color: #ddd;
}
/* Close */

/*Hide vested footer*/

footer {
  display: none;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~Global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* Headers */

h3,
.h3 {
  font-size: 20px !important;
}
/*header - changes how the image is positioned*/

header.vestedHeader {
  background-attachment: initial;
}
/*site wide - Changes the red of the buttons that are disabled (waiting for you to fill something in)*/

.btn-primary.disabled,
.btn-primary[disabled] {
  border-color: var(--palette-secondary-4);
}
/*Change text color of pop up boxes --*/

h3.popover-title {
  color: black;
}
.popover-content {
  color: black;
}
/*Close*/

/*Alert marker like \"Required\" on fields that need filling in.*/

.label-danger {
  background-color: var(--palette-secondary-4);
}
/*~~~~Changing color of links on site~~~~*/

a {
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
  color: var(--palette-primary-1);
}
.stage-circle {
  border-color: var(--palette-primary-2);
  color: var(--palette-primary-2);
}
a:hover,
a:focus {
  color: var(--palette-primary-2);
}
/*~~Close~~*/

/*Various Links throughout the site --*/

.btn-link:hover,
.btn-link:focus {
  color: var(--palette-primary-1);
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~Buttons~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~Conformation Buttons throughout the site~~~~*/

/*welcome button, next buttons, choose selection buttons. etc.*/

.btn-primary {
  color: var(--default-light) !important;
  background-color: var(--palette-primary-1) !important;
  border: 1px solid var(--button-border);
}
.btn-primary:hover,
.btn-primary:focus {
  color: var(--default-light);
  border: 1px solid var(--button-highlights);
}
/*~~Close~~*/

/* Navigation buttons - these are the individual buttons that move you around the sites pages. things like \"back\" */

.btn-default {
  color: var(--default-light) !important;
  background-color: var(--palette-primary-1) !important;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
  border: 1px solid var(--button-border);
}
.btn-default:hover {
  border: 1px solid var(--button-highlights);
}
/* Navigation button Arrow Colour */

.btn-default i.fa {
  color: var(--default-light) !important;
}
/*Change My Files button --*/

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: var(--default-light);
  background-color: var(--palette-primary-1);
}
/*~~~~Cancel Buttons throughout the site~~~~*/

/* things like \"cancel\" etc. original colour was \"#AB1254\" */

.btn-warning {
  color: var(--default-light);
  background-color: var(--palette-secondary-4);
  border-color: var(--palette-secondary-4);
  border: 1px solid var(--palette-primary-3);
}
.btn-warning:active:hover,
.btn-warning.active:hover,
.open > .dropdown-toggle.btn-warning:hover,
.btn-warning:active:focus,
.btn-warning.active:focus,
.open > .dropdown-toggle.btn-warning:focus,
.btn-warning:active.focus,
.btn-warning.active.focus,
.open > .dropdown-toggle.btn-warning.focus {
  color: var(--default-light);
  background-color: var(--palette-secondary-4);
  border-color: var(--palette-secondary-4);
}
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  color: var(--default-light);
  background-color: var(--palette-secondary-4);
  border-color: var(--palette-secondary-4);
}
.btn-warning:hover {
  color: var(--default-light);
  background-color: var(--palette-secondary-4);
  border-color: var(--palette-secondary-4);
}
button#ben-enrol-cancel {
  background-color: var(--palette-secondary-4);
  border-color: var(--palette-secondary-4);
}
.btn-danger:active:hover,
.btn-danger.active:hover,
.open > .dropdown-toggle.btn-danger:hover,
.btn-danger:active:focus,
.btn-danger.active:focus,
.open > .dropdown-toggle.btn-danger:focus,
.btn-danger:active.focus,
.btn-danger.active.focus,
.open > .dropdown-toggle.btn-danger.focus {
  color: var(--default-light);
  background-color: var(--palette-secondary-4);
  border-color: var(--palette-secondary-4);
}
.btn-danger {
  color: var(--default-light);
  background-color: var(--palette-secondary-4);
  border-color: var(--palette-secondary-4);
}
/*~~~~Close~~~~*/

/*~~~~Conformation buttons~~~~*/

.btn-success {
  color: var(--default-light);
  background-color: var(--palette-primary-2);
  border-color: var(--button-border);
}
.btn-success:hover {
  background-color: var(--palette-primary-2);
  border-color: var(--button-highlights);
}
/*~~~~Close~~~~*

/*Alert info is found throughout the site, just a little icon. This also includes the \"representing X\" header.*/

.alert-info {
  color: var(--palette-primary-3);
  background-color: var(--palette-primary-5);
  border-color: var(--palette-primary-3);
}
/*~~~~~~~~~~~~~~~~~~~~~TRS/Summery/MyProfile/Navbar Links ~~~~~~~~~~~~~~~~~~~~*/

/* Changes the FAQ box at the top of the TRS. */

.divTrsHome .faq-header {
  background-color: var(--palette-primary-1) !important;
}
/* Changes the buttons \"YOUR COMPANY\" and \"YOU\" */

.btn-sm,
.btn-group-sm > .btn {
  border: 1px solid var(--palette-primary-1);
}
/*TRS - \"YourCompany/You\" - centres the buttons.*/

.divRowTrsMainSummary .divColTrsContent .col-md-12 {
  text-align: center;
}
/*To make benefits and amount text in TRS boxes more level -- */

.divColTrsContent .table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 3;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
/*To make main categories table text more level in TRS page -- */

.divColTrsContent.col-md-7.col-sm-7.col-xs-12 p.text-right {
  margin-top: 7.5px;
}
/*Button on the TRS \"show Details\" and the opening button selection \"YOUR COMPANY\".*/

label.btn.btn-default.ng-pristine.ng-untouched.ng-valid.btn-success.ng-not-empty {
  background-color: var(--palette-primary-2) !important;
  border-color: var(--palette-primary-2) !important;
}
/* Little round Icons with an arrow */

i.fa.fa-2x.fa-arrow-circle-right {
  color: var(--palette-primary-1);
}
/* Text, things like \"Your Benefits\" on the benefit summery */

.text-info {
  color: var(--palette-primary-2) !important;
}
/*Align benefit name in benefits summary page to left --*/

/*To align text on top of benefit summary text regarding window dates, sal sac and enrollment to alignment left*/

.col-sm-10 p {
  text-align: left;
}
/*Close*/

/*Change female/male icons (in My Profile beneficiaries / family) */

.text-danger {
  color: var(--palette-secondary-4);
}
/*Changing benefit page summary text headers*/

.text-warning {
  color: var(--palette-primary-1);
}
.text-success {
  color: var(--palette-primary-1);
}
/*Close*/

/* Remove 'MyWorkPall' in demo mode icon at top of page --*/

#indemomode {
  background-image: url(/assets/images/demo-mode-image.png);
  background-size: 100%;
  position: fixed;
  left: 50%;
  top: 0;
  margin: 0;
  margin-left: -190px;
  width: 380px;
  height: 40px;
  z-index: 99999;
  display: none;
}
/*Text colour of dependant name*/

.text-primary {
  color: var(--palette-primary-1);
}
/*Align commencement and cost text in benefit summary page to benefit name --*/

p.text-warning.ng-binding {
  margin-top: -4px;
}
.col-sm-12.col-xs-12.ng-scope h4.benefits {
  font-weight: bold;
}
/*Close*/

/*Make benefit summary text align to left*/

.col-sm-12 {
  text-align: left;
}
/*Make benefit summary Pending Selection align to left*/

h4.benefits.text-warning {
  text-align: left;
}
/*Changing background color of Download button in Sal Sac part of selection page*/

.btn-info {
  color: var(--default-light);
  background-color: var(--palette-primary-1);
  border-color: var(--palette-primary-1);
}
.btn-info:hover {
  color: var(--default-light);
  background-color: var(--palette-primary-1);
  border-color: var(--palette-primary-1);
}
/*Close*/

/*Hide in FTE and Registered Disabled from dependants form*/

#account_dependants_ #dependantdetails div.form-group:nth-child(9),
#account_dependants_ #dependantdetails div.form-group:nth-child(10) {
  display: none;
}
/* Controls the colour of the warnings \"one required\" on Emergency contact Details - maybe controls more*/

.label-warning {
  background-color: var(--palette-secondary-4);
}
/* MyProfile - Change \"No documents Located\" box text and background color to general site gray*/

.panel-warning > .panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  box-shadow: 0px 0px 0px 1px #e3e3e3;
}
/* profile - documents - Changes the download area colour */

.panel-primary > .panel-heading {
  background-color: var(--palette-primary-1);
  border-color: var(--palette-primary-1);
}
.panel-primary {
  border-color: var(--palette-primary-1);
}
/*~~~~~~~~~~~~~~~~~~~~~~~~Dashboard/expenses module~~~~~~~~~~~~~~~~~~~~~~~~*/

/* the header of the widgets, important is required to override the colour */

.widget-header {
  background-color: var(--palette-primary-3) !important;
}
/* Controls the rows created inside the widget */

.dashboard .widget-main .row {
  margin: 10px 0px 10px 0px;
  font-size: 22px;
}
/* The outer box of the widget */

.widget-implementation2col .widget-box-implementation {
  border: none;
  padding: 0 !important;
  border-width: 3px;
  margin: 2px;
  overflow: auto;
  height: 420px;
}
/* Selecting the buttons */

.widget-implementation2col .widget-box-implementation .col-sm-10 {
  background: var(--palette-primary-1);
  color: #ffffff;
}
/* Selects the link under the button */

.widget-implementation2col .widget-box-implementation .col-sm-10 a {
  color: #ffffff;
  font-size: 18px;
}
/* Selects the text under the button */

.widget-implementation2col .widget-box-implementation .col-sm-10 span {
  font-size: 18px;
}
/* Expense type drop down area - this needs to be improved */

@media (min-width: 768px) {
  #claimexpensedetails > div:nth-child(4) > div > div {
    width: 50%;
  }
}
/* Close */

/* Expense small screen optimisation */

@media (max-width: 767px) {
  #ngview {
    padding-left: 20px;
    padding-right: 10px;
  }
  .col-lg-12 .ng-scope .torus-label {
    padding-left: 15px !important;
  }
}
/* Close */

/* Expenses menu page number  */

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: var(--palette-primary-1);
  border-color: var(--palette-primary-1);
}
/* Changes the button on the \"Managing My Team\" widget */

#WidgetBody18 .btn {
  font-size: 18px;
  border: none;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~Login Page~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*Block header logo on login page*/

.application-icon {
  display: none;
}
/*To change size of logo for log in page*/

.application-name-image {
  height: 90px;
}
/*Change background size for log in page*/

#loginwrap {
  background-size: cover;
}
/* This controls the border and the text on the \"the request a password\" part on the login page. - maybe dose more throughout the side but not confirmed. */

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
  color: var(--palette-secondary-4);
}
/*button Error*/

.has-error .form-control {
  border-color: var(--palette-secondary-4);
}
/*button Success!*/

.has-success .form-control {
  border-color: var(--palette-primary-2);
}
/*Close*/

/* Changes the \"forgotten password\" text. */

#forgotPassword .center-block {
  color: var(--default-light);
}
/* background block on \"forgotten password\" */

#loginwrap #ngview .center-block .pointer {
  background-color: var(--palette-primary-1);
  border-color: var(--palette-primary-3);
  border: 1px solid var(--palette-primary-3);
  border-radius: 50px;
  padding: 3px 8px;
  display: inline-grid;
}
/* background block on \"Keep me logged in\" */

#loginwrap #ngview .row .checkbox {
  background-color: var(--palette-primary-1);
  border-color: var(--palette-primary-3);
  border: 1px solid var(--palette-primary-3);
  border-radius: 50px;
  padding: 3px 8px;
  display: inline-grid;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~Timeout/logout Page~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* Text on the logout page */

#sessionLogout > div:nth-child(1) > p {
  color: var(--default-light);
}
/* default background colour */

body#loginwrap {
  background-color: #fff;
}