/* --------------- GSE Homepage Stylesheet------------------ */

/* Layout
------------------------------------------------------ */
body {
  text-decoration: none;
  color: #000000; /* Primary Text Color */
  font-size: 12px;
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-weight: normal;
}

.logged-out.login-view #footer{
  display: none!important;
}
a {
  text-decoration: none;
}

tr[style="height: 5px;"] {
  display: none;
}

#price-book,
#search-wrapper h3 {
  clear: both;
}

body.logged-in,
.logged-in table.page-content {
  background: #ffffff;
}

.logged-in .page-content table td[width="10"] {
  display: none;
}

.logged-in .page-content table table td {
  position: relative;
}

.logged-in .page-content {
  position: absolute;
  left: 0;
  height: 670px;
}

.logged-in .page-content .dummy-td {
  border-style: solid;
  border-width: 0 !important;
  position: relative;
  display: block;
  width: 960px !important; /*IE 7*/
  margin: 0 auto !important; /*IE 7*/
}

.logged-in .login-view .page-content .dummy-td,
.logged-in .guest-access .page-content .dummy-td {
  width: 100% !important!; /*IE 7*/
}

.logged-in .dummy-td {
  min-height: 650px;
  width: auto;
}

.logged-in .dummy-td table tr {
  position: relative;
}

/* Login screen and Homepage Header 
------------------------------------------------------ */
.login-view > h1 {
  position: absolute;
  top: 0;
  left: 40%;
  margin: 0;
  z-index: 100;
}

/*Login Page
------------------------------------------------------ */
body.logged-out {
background-color: #FFFFFF!important;
  overflow-x: hidden;
}

#login-logo {
  display: none;
}

.logged-out #footer img {
  display: none;
}

.logged-out .extra-panes {
  top: 0;
  left: 0px;
  bottom: 0;
  right: 0;
  width: 1200px !important;
  height: 100 !important;
}

.logged-out #login-form-wrap {
  background: #0568AE;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  height: 10px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}

.logged-out #login-form {
  border-radius: 0px;
  box-shadow: none;
  padding-top: 15px;
  padding-left: -0px;
  border: 0px solid #b5b8c8;
  height: 0px;
  width: 180px !important;
}

#login-form-head {
  background-color: #0568AE !important;
  position: absolute;
  width: 98.5%;
  height: 300px;
  top: 0px;
  margin-left: -9px;
}

#login-form-head img {
  display: none;
}

.login-fields b {
  font-size: 12px;
  position: absolute;
  text-align: left;
  border: 0px solid #ffffff;
  width: 90%;
  color: #E66749;
  z-index: 100;
  text-transform: none!important;
  top: -40px;
}

.login-fields b{
	text-indent: -9999px;
  line-height: 0;
}

.login-fields b:after{
	text-indent: 0;
  display: block;
  line-height: initial;
  content: 'You must have ROME access to use CPQ; please submit a myLogins request to get access to ROME. Once you receive ROME access, you will be able to access CPQ 24 hours later. If you are on MyPrice internal logon page, then please navigate to https://myprice.att.com/sso/saml_request.jsp to redirect to Global Logon.'!important;
}

#login-form .product-name {
  display: none;
}

#login-form label {
  font-size: 12px;
  font-weight: bold;
}
/*vb999n - MobileToGo - Modified the width for mobile portal alignment*/
#login-form-head {
  background-color: #000000 !important;
  background: url(../../image/logo/MyPriceLogo.png) no-repeat scroll;
  position: absolute;
  width: 104%;
  height: 200px;
}

div.login-fields{
  position: absolute;
  z-index: 15;
  background-color: #fff !important;
  background: url(../../image/Demo_Landing/login_bkgd.png) no-repeat scroll left
    top rgba(0, 0, 0, 0);
  background-size: 100%;
  width: 100%;
  height: 150%;
  top: 250px;
  left: 0px;
  padding-left: 3%;
  padding-right: 3%;
}

div.login-button {
  position: absolute;
  z-index: 15;
  top: 440px;
  left: 2.5%;
}
div.login-links {
  position: absolute;
  z-index: 15;
  top: 385px;
  left: 3.5%;
}
.pipe {
  padding: 0 6px;
}

#login-form .form-input {
  line-height: 15px;
  width: 29%;
}

#login-form-wrap .login-toggle .hide {
  display: none;
}

#login-form .login-button td img {
  display: none;
}

#login-form label {
  margin: 0;
  padding: 0;
  display: block;
  line-height: 16px;
  margin-top: 13px;
}

#login-form label {
  color: #0568AE;
  font-size: 16px;
  font-weight: 300;
  padding-bottom: 5px;
}

#login-form a {
  color: #008193;
}

#login-form a:hover {
  text-decoration: underline;
}

#login-form #psword {
  margin-bottom: 10px;
}

#login-form select.form-input {
  margin-bottom: 5px;
}

#login-form br {
  display: none;
}

#login-form .form-input {
  margin: 0px;
  clear: both;
}

#login-form .login-links {
  line-height: 13px;
}

.button-text {
  text-decoration: none !important;
}

#login-form td.button-middle {
  /*background: #fff none repeat scroll 0 0;*/
  border: 1px solid #c8cfd5;
  border-radius: 2px;
  height: 38px;
  padding: 0 !important;
  width: 100px;
}
#login-form td.button-middle div {
  margin: 0 !important;
}

#login-form .button-middle a {
  text-align: center !important;
  color: #008193;
  font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman",
    "HelveticaNeue-Roman", "Helvetica Neue Roman", Helvetica, Arial, sans-serif;
  font-size: 24px !important;
  font-weight: 200 !important;
  line-height: 36px !important;
}

#login-form td.button-middle:hover {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #0572ce !important;
}

#login-form .button-middle a:hover {
  color: #0572ce !important;
}
#login-form td.button-middle:active {
  background: #0572ce none repeat scroll 0 0 !important;
  border: 1px solid #0572ce !important;
}

#login-form .button-middle a:active {
  color: #ffffff !important;
}

/*Login - Guest Access
------------------------------------------------------ */
.guest-access #login-form-head {
  background-color: #0467bd !important;
}

.guest-access #login-form .form-input {
  line-height: 15px;
  width: 85%;
}

.guest-access #login-form .product-name {
  color: #ffffff;
  font-size: 36px;
  font-weight: 500;
  width: 200px;
  left: 3%;
  right: 20%;
  letter-spacing: 0.01em;
  position: absolute;
  text-align: left;
  top: 140px;
  border: 0px solid #ffffff;
}

.guest-access .extra-panes {
  display: block;
  position: absolute;
  top: 0;
  width: 100% !important;
  padding: 0;
  margin: 0;
  visibility: hidden;
  z-index: 1002 !important;
  float: none;
}
.guest-access .extra-panes form {
  width: 960px;
  margin: 0 auto;
  display: block;
  visibility: hidden;
  z-index: 1001 !important;
  position: relative;
}

.guest-access .main-pane {
  margin: 0;
}

.guest-access #login-form-wrap {
  visibility: visible;
  z-index: 1000 !important;
  background: #0467bd;
  border: 1px solid #0467bd;
  height: 630px;
  left: 250px;
  width: 440px;
  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.8);
}

.guest-access #login-form-wrap {
  display: none;
}

.guest-access div.login-fields {
  border: 1px solid #0572ce;
  position: absolute;
  z-index: 15;
  background: #fff;
  width: 380px;
  height: 280px;
  left: 0px;
  top: 230px;
  padding: 30px 10px 10px 10px;
}

.guest-access div.login-button,
.guest-access div.login-links {
  margin-left: 5px;
}

.guest-access #login-form-head {
  background: url(../../image/Icons/logomark.png) no-repeat scroll right top
    rgba(0, 0, 0, 0);
  margin-left: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 250px;
  top: 0px;
  margin-top: 0px;
}
.guest-access .pipe {
  padding: 0 6px;
}

.guest-access #login-form {
  background: transparent;
  padding: 0;
  -moz-box-shadow: none;
  border-radius: 0px;
  box-shadow: none;
  background: url(../../image/Icons/OracleLogoWHT.png) no-repeat scroll 255px
    570px rgba(0, 0, 0, 0);
  border-top: 30px solid #ffffff !important;
  margin: 0 10px 10px 0px;
  height: 600px;
  width: 440px !important;
}

.guest-access #login-form-wrap .login-toggle {
  position: absolute;
  top: 3px;
  right: 3px;
  height: 16px;
  width: 16px;
  border: 5px solid #ffffff;
  background: #ffffff url(../../image/Icons/close_button.png) no-repeat right
    top;
  cursor: pointer;
  z-index: 1005;
}
.guest-access #login-form-wrap .login-toggle:hover {
  background-position: right -16px;
}

.guest-access #login-form-wrap .login-toggle .hide {
  display: none;
}

/* Search Box 
------------------------------------------------------ */

#search-outer-wrapper,
#serial-search-outer-wrapper {
  margin: 0 0px 0 0;
  padding: 5px 23px 12px 10px;
  z-index: 100;
  -moz-box-shadow: 5px 5px 20px #999999;
  -webkit-box-shadow: 5px 5px 20px #999999;
  box-shadow: 5px 5px 20px #999999;
  background: #0568ae;
  border: 1px solid white;
  border-radius:12px;
}

#search-login-toggle-wrapper {
  float: right;
  padding: 0;
  margin-top: -1px;
  margin-right: 5px;
  white-space: nowrap;
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
}

#search-login-toggle-wrapper span.pipe {
  display: none !important;
}

#search-login-toggle-wrapper a,
.return-to-quote a {
  display: block;
  float: left;
  height: 26px;
  line-height: 26px;
  padding: 0 10px;
  margin: 5px 0 0 -1px;
  color: #000000; /* Primary Text Color */
  background-color: transparent;
  background-image: #e4e8ea; /* For browsers that do not support gradients */
  background-image: -webkit-linear-gradient(
    #f1f3f4,
    #e4e8ea
  ); /* For Safari 5.1 to 6.0 */
  background-image: -o-linear-gradient(
    #f1f3f4,
    #e4e8ea
  ); /* For Opera 11.1 to 12.0 */
  background-image: -moz-linear-gradient(
    #f1f3f4,
    #e4e8ea
  ); /* For Firefox 3.6 to 15 */
  background-image: linear-gradient(#f1f3f4, #e4e8ea); /* Standard syntax */
  border: 1px solid #c4ced7;
  border-radius: 2px;
  height: 26px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  font-weight: 700;
}

#search-login-toggle-wrapper a:hover {
  background-color: #f7f8f9;
  color: #FFFFF;
}

#search-outer-wrapper,
#serial-search-outer-wrapper {
  display: none;
  position: absolute;
  right: 0;
  top: 36px;
  padding: 5px 5px 0px 0px;
}

#search-wrapper {
  float: left;
  width: auto;
  padding-left: 10px;
  margin-top: 7px;
  position: relative;
}
#serial-search-wrapper {
  float: left;
  width: 215px;
  padding-left: 10px;
  margin-top: 7px;
  position: relative;
}
#search-wrapper h3,
#serial-search-wrapper h3 {
  float: left;
  color: white; /* Primary Text Color */
  padding: 0 0 2px 0;
  margin: 0 0 2px 0;
}
#search-login-toggle-wrapper .parts-search-toggle,
#search-login-toggle-wrapper .serial-num-search-toggle {
  padding-left: 30px;
  background: #0568ae url(../../image/Icons/func_magnify_act.png) no-repeat 5px;
  color:white;
  border-radius:20px;
}

#search-login-toggle-wrapper .parts-search-toggle:hover,
#search-login-toggle-wrapper .serial-num-search-toggle:hover {
  background: #0568ae url(../../image/Icons/func_magnify_act.png) no-repeat 5px;
  color:white;
}

#search-wrapper .parts-search-toggle,
#serial-search-wrapper .serial-num-search-toggle {
  float: right;
  height: 16px;
  width: 16px;
  background: transparent url(../../image/Icons/white_close_icon.png) no-repeat;
  cursor: pointer;
}

#search-top-wrapper,
#serial-search-top-wrapper {
  width: 100%;
  width: 280px !important!; /* IE 7 */
}
#search-bottom-wrapper,
#serial-search-bottom-wrapper {
  clear: both;
}
#search-wrapper .parts-search-toggle:hover,
#serial-search-wrapper .serial-num-search-toggle:hover {
  background-position: 0 -16px;
}
#search-wrapper .hide,
#serial-search-wrapper .hide {
  display: none;
}
#search-wrapper div,
#serial-search-wrapper div {
  float: left;
}
/* search input */
div.search-input-wrapper {
  border: 1px solid #d6dfe6;
  height: 24px;
  margin: 6px 0px;
  background: #fff;
}

#simple-search {
  height: 20px;
  line-height: 20px;
  padding: 1px;
  font-size: 12px;
  border: none;
  margin: 1px;
  width: 140px;
}

/* search button */
div.search-button-wrapper {
  margin: 6px 4px 6px 2px;
  background-color: transparent;
  background-image: #e4e8ea; /* For browsers that do not support gradients */
  background-image: -webkit-linear-gradient(
    #f1f3f4,
    #e4e8ea
  ); /* For Safari 5.1 to 6.0 */
  background-image: -o-linear-gradient(
    #f1f3f4,
    #e4e8ea
  ); /* For Opera 11.1 to 12.0 */
  background-image: -moz-linear-gradient(
    #f1f3f4,
    #e4e8ea
  ); /* For Firefox 3.6 to 15 */
  background-image: linear-gradient(#f1f3f4, #e4e8ea); /* Standard syntax */
  border: 1px solid #c4ced7;
  color: #000000;
  border-radius: 2px;
  cursor: pointer;
}

.search-button-wrapper input.button {
  background: url(../../image/Icons/func_magnify_ena.png) no-repeat center 3px;
  border: none;
  width: 22px;
  height: 24px;
  cursor: pointer;
}

div.search-button-wrapper input.button:hover {
  background: #f7f8f9 url(../../image/Icons/func_magnify_hov.png) no-repeat
    center 3px;
}

div.search-button-wrapper input.button:active {
  background: #0572ce url(../../image/Icons/func_magnify_act.png) no-repeat
    center 3px;
  border-color: #0572ce !important;
}

.search-button-wrapper input.button::-moz-focus-inner {
  padding: 0;
  border: none;
}

.multiple-search,
.advanced-search {
  font-size: 11px;
  height: 16px;
  line-height: 16px;
  margin: 7px 8px 7px 0;
  clear: both;
  display: block;
  color: white;
}
.advanced-search:hover {
  text-decoration: underline;
  color:   color: #FFFFFF;
}

.multiple-search:hover,
.advanced-search:hover {
  text-decoration: underline;
}

/* Return To Quote */
/* ------------------------------------------------------ */
.return-to-quote,
.return-to-quote-pipe {
  display: none !important;
}

#price-book {
  height: 20px;
  padding: 2px 1px 2px 0;
}

#price-book select {
  background: #fff !important;
  border: solid 1px #666666; /* Secondary Color */
  margin-top: 4px;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  padding: 0 0 0 2px;
}

/* Wrapper
------------------------------------------------------ */
#wrapper {
  width: 100%;
  margin-left: -6px;
  text-align: center;
}

#wrapper-inner {
  border: 1px solid #d6dfe6;
  margin: 10px;
  padding: 10px;
  border-radius: 3px;
  background: #fff;
  text-align: left;
  min-height: 400px;
  position: relative;
  width: 950px;
  margin-left: auto;
  margin-right: auto;
}

/* Content
------------------------------------------------------ */
#content {
  padding: 0px 15px 30px 15px;
  background: #fff;
}

.featured-image {
  padding: 5px;
  border: solid 1px #fff;
  float: right;
}

/* Footer
------------------------------------------------------ */
#footer {
  background: transparent;
  margin-left: -25px;
  margin-bottom: -35px;
}
#footer-inner {
  width: 940px;
  padding: 10px;
  margin: 0 auto;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100px;
}
.powered-by {
  margin: 20px 0 0 0;
  display: block;
}

/* Product Family Nav Bar
------------------------------------------------------ */
#family-nav {
  height: 36px;
  border-bottom: 1px solid #d6dfe6;
  padding: 0px;
  margin: 0;
  max-width: 1200px;
  background: transparent;
}

#family-nav li {
  float: left;
  list-style: none;
}

#family-nav > li > a {
  color: #145c9e;
  height: 28px;
  font-size: 12px;
  line-height: 28px;
  padding: 2px 8px 4px 8px;
  margin: 1px 5px 0 0;
  text-decoration: none;
  float: left;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px !important;
  font-weight: 400 !important;
  border-radius: 0px;
}

#family-nav > li.sfHover > a {
  text-decoration: underline;
}

#family-nav > li > a.active {
  border-left: 1px solid #d6dfe6;
  border-right: 1px solid #d6dfe6;
  border-top: 1px solid #d6dfe6;
  padding: 0px 8px 3px 8px;
  margin: 1px 5px 0 0;
  border-bottom: 3px solid #0572ce;
  text-decoration: none;
  font-weight: bold !important;
}

ul.dropdown > li > a {
  display: block;
  float: left;
  height: 28px;
  line-height: 28px;
  margin-bottom: -1px;
  margin-left: 5px;
  padding: 0px 10px;
}
/* Hide Sub Indicator on Product Family dropdown */
/* ------------------------------------------------------ */
.sf-sub-indicator {
  display: none;
}

/* Product Line Nav Bar 
------------------------------------------------------*/
.product-line-nav {
  display: none;
  padding: 0px;
  position: relative;
} /* Product Line and model styles set in dropdown.css */

.product-line-nav ul {
  padding: 0px;
  display: inline-block;
}

.product-content h2 {
  display: none;
}

/* Model Line Tabs / Dropdown - Level One
------------------------------------------------------ */
ul.dropdown {
  position: relative;
  margin: 0 10px;
  /*	z-index: 50; */
}

ul.dropdown li {
  display: inline-block;
  float: left;
  font-size: 12px;
  font-weight: bold;
  position: relative;
}

/* Dropdown - Level Two items */
ul.dropdown ul {
  width: auto;
  max-width: 550px;
  height: auto;
  display: block;
  visibility: hidden;
  position: absolute;
  top: 99%;
  border: 1px solid #c4ced7;
}

ul.dropdown ul li {
  font-weight: normal;
  color: #000000;
  float: none;
  font-size: 12px;
  display: block;
  height: auto;
  display: inline-block !important!; /* IE 6 & 7 Needs Inline Block */
}
ul.dropdown li:hover > ul {
  visibility: visible;
}

/* Dropdown -Inactive Tab items*/
ul.dropdown ul li a {
  background: #ffffff;
  border: 0px solid #c4ced7;
  width: auto;
  display: block;
  line-height: 20px;
  padding: 3px 8px;
  color: #000000;
  text-decoration: none !important;
}

ul.dropdown ul li:first-child a {
}

ul.dropdown li ul li a:hover {
  background: #ebeced !important;
  color: #000000;
  text-decoration: none !important;
}

/* Dropdown - Active Tab items*/
ul.dropdown li.active ul li a {
  background: #ffffff;
  text-decoration: none !important;
}

ul.dropdown li.active ul li a:hover {
  background: #ebeced;
  color: #000000;
  text-decoration: none !important;
}

/* Dropdown - Level Three items*/
ul.dropdown ul ul {
  left: 100%;
  top: 0;
}

ul.dropdown li li a {
  min-width: 150px;
  display: block;
  white-space: nowrap;
  text-decoration: none !important;
}

/* Dropdown - Documents */
ul.dropdown li li.doc a {
  padding-left: 25px;
  padding-left: 10px !important!;
}

ul.dropdown li li.doc-head {
  border-top: solid 2px;
  -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15) inset;
  -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15) inset;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15) inset;
}
ul.dropdown li li.doc-head a {
  cursor: default;
  padding-left: 10px !important;
  font-weight: bold;
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.4);
}

ul.dropdown li li.doc-head a:hover {
  background: none repeat scroll 0 0 transparent;
}

ul.dropdown li li.doc a {
  padding-left: 25px;
}

/* Model Details - Added for GSE demo environments */
/*Products Cards changes start here*/
.model {
  font-size: 12px;
  line-height: 1.5em;
  width: 212px;
  margin: 10px;
  background: rgba(247, 249, 253, 1);
  display: inline-block;
}

.model h3 a {
  font-size: 16px;
  color: white;
  text-decoration: none;
}

.model a:hover {
  color: #145c9e;
  text-decoration: underline;
}
/*added black background to home-page product cards - hover behavior*/
.model-summary-wrapper h3 {
  font-size: 120%;
  line-height: 462%;
  text-align: center;
  background-color: black;
  margin: 0;
  border-radius: 0px 0px 25px 0px;
}
/* End Here*/
.img-wrapper {
  display: block !important!; /* IE7 */
  padding-top: 10px !important!; /* IE7 */
  height: 190px !important!; /* IE7 */
  display: table-cell;
  width: 226px;
  text-align: center;
  /*border: solid 1px white;*/
  border-bottom: 4px double lightgrey; /*20210315 GJAIN*/
  padding: 4px; /*20210315 GJAIN*/
}
/*Adding border to home-page product cards - hover behavior*/
[id*="model-"]:hover {
  border: 2px solid #0568ae;
}
/*End here*/
.img-wrapper img {
  max-width: 200px;
  max-height: 200px;
  vertical-align: middle;
}
/*adding border radius to home-page product cards - hover behavior*/
[id*="model-"] {
  border: 2px solid #d2d2d2;
  box-shadow: 5px 5px #d2d2d266;
  border-radius: 25px 0px 27px 0px;
}
/*End Here*/
/* Products Cards changes End here*/
/* Hide unwanted models on homepage (Specific to Vision Servers) */
/* ------------------------------------------------------ */
div#model-greenServer3500.model,
div#model-greenServer7500.model,
div#model-greenServer9560.model,
div#model-sentinelPowerServer4500.model,
div#model-sentinelPowerServer5500.model,
div#model-sentinelPowerServer7500.model,
div#model-ultraPowerServer1500.model,
div#model-ultraPowerServer3000.model,
div#model-ultraPowerServer4500.model,
div#model-partUpload.model {
  display: none;
}

#wrapper-inner {
  border: 1px solid #d6dfe6;
  margin: 10px;
  padding: 10px;
  border-radius: 3px;
  background: #f2f2f2;
  text-align: left;
  min-height: 400px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

#model-pricingTool {
  font-size: 12px;
  line-height: 1.5em;
  float: left;
  width: 212px;
  margin: 0 4px 0px 4px;
  padding: 0 10px 10px 0px;
  position: absolute;
  height: 140px;
  overflow: hidden;
  -webkit-transition: height 0.8s; /* Safari */
  transition: height 0.8ss;
  text-align: center;
}

#model-pricingTool:hover {
  height: 240px;
}

.img-wrapper img {
  /*   border-radius: 100px;
 */
  -webkit-transition: border 0.2s, opacity 0.2s; /* Safari */
  transition: border 0.2s, opacity 0.2s;
  opacity: 0.8;
}

.img-wrapper img:hover {
  opacity: 1;
}

#cpq-alta-header {
  /*! width:130% !important; */
}

/*To center align Cards*/
[id*="content-mobility_pf"] .row.clearfix,
#content-wireline-solution .row.clearfix {
  width: 100%;
  text-align: center;
}