/* Custom css for the VPN Portal */


/* links ***************************************/
a {
  color: #36bed6; /* text color of links */
}


/* buttons *************************************/
.btn {
  border: 1px solid #97dfeb; /* border of buttons */
  color: #36bed6; /* text color of buttons */
}

.btn.primary { /* primary buttons emphasize the button the user should click (for example the login button) */
  background: #36bed6; /* 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: #eaf6fa; /* background color of hovered buttons */
  color: #36bed6; /* text color of hovered buttons */
}

.btn:active { /* active buttons are buttons the user is currently clicking on */
  background-color: #eaf6fa; /* background color of active buttons */
  color: #36bed6; /* text color of active buttons */
}

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


/* input ***************************************/
input { /* used for text boxes like the username and passphrase on the login page */
  border: 1px solid #97dfeb; /* 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%, #36bed6 50%), /* left side of arrow */
    linear-gradient(125deg, #36bed6 50%, transparent 50%), /* right side of arrow */
    linear-gradient(to bottom, #36bed6, #36bed6), /* left border of arrow box */
    linear-gradient(to right, #eaf6fa, #eaf6fa); /* arrow box background */
  border: 1px solid #97dfeb; /* border of the select */
}


/* login window ********************************/
#login-window > header {
  background: #ffffff; /* background color behind the logo on the login page */
}

#login-window > header > .logo {
  height: 150px; /* logo height */
  width: 300px; /* logo width */
}


/* applications page ********************************/
/* these styles apply to the page that has the tabbed list of the applications */
#applications-page > header {
  background: #1C4E7E; /* background color of header bar at the top of the page */
}

#applications-page > header > .logo {
  background: #ffffff; /* background color behind the logo in the header bar at the top of the page */
}

#applications-page > #applications .tabs > .tab-bar > .tab {
  background: #1C4E7E; /* 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: #1C4E7E; /* 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;
  }
}