/* Custom css for the VPN Portal */


/* links ***************************************/
a {
  color: #234A84; /* text color of links */
}


/* buttons *************************************/
.btn {
  border: 1px solid #315C9D; /* border of buttons */
  color: #234A84; /* text color of buttons */
}

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

.btn:active { /* active buttons are buttons the user is currently clicking on */
  background-color: #315C9D; /* background color of active buttons */
  color: #ffffff; /* text color of active buttons */
}

.btn:focus { /* focused buttons are buttons the user has either tabbed to or clicked on */
  background-color: #315C9D; /* background color of focused buttons */
  color: #ffffff; /* text color of focused buttons */
}
/* AuthPoint / SAML button */
#saml_btn {

    width: 280px !important;
    height: 50px !important;

    padding: 0 25px !important;

    font-size: 17px !important;
    font-weight: 600 !important;

    border-radius: 5px !important;

    box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
/* Move the login window horizontally only */
#login-window,
#login-window.saml {
    transform: translateX(170px) !important;
}
/* 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 PAGE — FULLY TRANSPARENT HEADER AND CONTAINER
   ========================================================= */

/* Keep the vessel image fully visible */
body.custom_bk {
    background-color: transparent !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Remove any page-level white background */
#login-page {
    background: transparent !important;
}

/* Remove the large white login window */
#login-window,
#login-window.saml {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove the former WatchGuard logo/header area */
#login-window > header,
#login-window.saml > header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hide the WatchGuard logo completely */
#login-window > header > .logo,
#login-window.saml > header > .logo,
#login-window .custom_logo {
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Collapse the empty logo/header space */
#login-window > header,
#login-window > header > .logo {
    height: 0 !important;
    min-height: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* applications page ********************************/
/* these styles apply to the page that has the tabbed list of the applications */
/* Dark header */
#applications-page > header {
    background: #333333 !important;
}
/* Off-white background only behind the Kassian logo */
#applications-page > header .image.custom_header_logo {
    background-color: #f5f3eb !important;
}
/* Logo container */
#applications-page > header > .logo,
div.logo {
    background: #f5f3eb !important;
    padding: 5px !important;
    border: none !important;
    box-shadow: none !important;
}
#applications-page h2{
    color:#234A84 !important;
    font-weight:700;
}
/* Main applications panel */
#applications-page > #applications {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* Glass panel */
#ag_tab0.tab-container.active {
    background: rgba(255,255,255,.72) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 10px;
    box-shadow: 0 12px 35px rgba(0,0,0,.25);
}
#applications-page .tabs > .tab-bar {
    display: none !important;
}
/* Remove the solid white inner layer */
#applications-page > #applications .tabs,
#applications-page > #applications .tab-container,
#applications-page > #applications .tab-container.active {
    background: transparent !important;
}
/* Make the small Applications tab transparent too */
#applications-page > #applications .tab-bar .tab,
#applications-page > #applications .tab-bar .tab.active,
#applications-page > #applications a.tab.active {
    background: rgba(245, 243, 235, 0.30) !important;
    color: #36bed6 !important;
}
/* Keep the portal title and header icons white */
#applications-page > header,
#applications-page > header a {
    color: #ffffff !important;
}
/* Make application names bold */
#applications-page .app .name,
#applications-page .application-name,
#applications-page .icon-label,
#applications-page a {
    font-weight: 700 !important;
}
/* 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;
  }
}
/* Keep the Applications tab itself readable */
#applications-page > #applications .tab-bar > .tab.active {
    background: rgba(245, 243, 235, 0.92) !important;
    color: #36bed6 !important;
}
/* 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;
  }
}