/* Custom css for the VPN Portal */
/* Palette: slate grey (#5f6975) + white, matching granite/slate/white brand imagery */


/* links ***************************************/
a {
  color: #5f6975; /* text color of links */
}


/* buttons *************************************/
.btn {
  border: 1px solid #c7ccd1; /* border of buttons */
  color: #5f6975; /* text color of buttons */
}

.btn.primary { /* primary buttons emphasize the button the user should click (for example the login button) */
  background: #5f6975; /* background color of primary buttons */
  color: #ffffff; /* text color of primary buttons */
}

.btn:hover { /* hovered buttons are buttons the user's mouse is over */
  background-color: #eef0f2; /* background color of hovered buttons */
  color: #454e58; /* text color of hovered buttons */
}

.btn:active { /* active buttons are buttons the user is currently clicking on */
  background-color: #e3e6e9; /* background color of active buttons */
  color: #454e58; /* text color of active buttons */
}

.btn:focus { /* focused buttons are buttons the user has either tabbed to or clicked on */
  background-color: #eef0f2; /* background color of focused buttons */
  color: #454e58; /* text color of focused buttons */
}


/* input ***************************************/
input { /* used for text boxes like the username and passphrase on the login page */
  border: 1px solid #c7ccd1; /* border of the input box */
}


/* select **************************************/
select { /* used for the drop down selection lists like the domain list on the login page */
  background-image: /* controls the colors of the arrow on the right side of the select */
    linear-gradient(55deg, transparent 55%, #5f6975 50%), /* left side of arrow */
    linear-gradient(125deg, #5f6975 50%, transparent 50%), /* right side of arrow */
    linear-gradient(to bottom, #5f6975, #5f6975), /* left border of arrow box */
    linear-gradient(to right, #eef0f2, #eef0f2); /* arrow box background */
  border: 1px solid #c7ccd1; /* border of the select */
}


/* login window ********************************/
#login-window > header {
  background: #5f6975; /* background color behind the logo on the login page */
  display: flex; /* center the logo inside the header box, regardless of the header's own height */
  align-items: center;
  justify-content: center;
}

#login-window > header > .logo {
  height: 88px; /* logo height, matches login_logo.png at 300x88 */
  width: 300px; /* logo width */
  background-repeat: no-repeat; /* prevent tiling if box is ever taller/wider than the image */
  background-position: center center; /* keep the logo centered in the box regardless of box size */
  background-size: contain; /* scale the logo to fit without distortion or cropping */
}


/* applications page ********************************/
/* these styles apply to the page that has the tabbed list of the applications */
#applications-page > header {
  background: #3e444d; /* darker slate/charcoal for header bar, granite feel */
}

#applications-page > header > .logo {
  background: transparent; /* let the logo sit directly on the header bar instead of a mismatched box */
  background-repeat: no-repeat;
  background-position: center left;
  background-size: contain;
}

#applications-page > #applications .tabs > .tab-bar > .tab {
  background: #5f6975; /* background color of the tabs */
  color: #ffffff; /* text color of the tabs */
}

#applications-page > #applications .tabs > .tab-bar > .tab.active {
  background: #ffffff; /* background color of the selected tab */
  color: #5f6975; /* text color of the selected tab */
}



/* iphone **************************************/
@media (max-width: 767px) {
  #login-window > header, #login-window > header > .logo {
    height: 266px;
  }

  #login-window.saml > header, #login-window.saml > header > .logo {
    height: 150px;
  }
}

/* iphone 5/6SE **************************************/
@media (max-width: 320px) {
  #login-window > header, #login-window > header > .logo {
    height: 140px;
  }

  #login-window.saml > header, #login-window.saml > header > .logo {
    height: 70px;
  }
}