/* 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 */
  color: #333333;
}

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


/* applications page ********************************/
#applications-page > #applications {

    width: 100%;
    height: 75vh;
    padding: 20px;
    margin: 0 auto;
    box-sizing: border-box;

}

#applications-page > #applications .tabs {
    padding: 20px;
    position: relative;
    top: 40%;
    height: 50%;
}

#applications-page > #applications .tabs .tab-bar {

    background: #ffffff;
}
/* these styles apply to the page that has the tabbed list of the applications */
#applications-page > header {
  background: #ffffff; /* 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: #36bed6; /* 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: #36bed6; /* text color of the selected tab */
}

#applications-page > header .account .user {
    color: #333333;
}

#applications-page > header .account-menu-button .cls-1 {
    fill: #333333;

}

#applications-page > header .search-button .cls-1 {
    fill: #333333;
    
}

#applications-page > header > .account > a {

    color: #333333;

}

body.custom_bk {
  
  background-image: none;

}

body.custom_bk #login-page { 

  background-image: url('/custom_images/custom-bk-image.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

}

#login-page { 

  min-height: 100vh;

}

/* iphone **************************************/
@media (max-width: 767px) {

#applications-page > header > .logo {

  display: inline !important;
  width: 150px !important;

}

#applications-page > header > .logo > .image {

  margin-left: 0 !important;
  margin-right: 0 !important;
  background-position: center left !important;
  background-size: contain !important;


}

#applications-page > header > .account .user {

  display: inline !important;
  margin-right: 10px;

}

#applications-page > header > .account .account-menu-button {

  padding: 0 5px;

}

#applications-page > header > .account .search-button {

  padding: 0 10px;

}

#applications-page > header > .title {

  display: none !important;

}
  
.custom_bk {

  background-image: none !important;

}

  #login-window > header {

    background-image: none !important;
    

  }

  #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;
  }
}