.w-ecomp-tabs {
  //.bg_portalWhite;//white for 1702
  .bg_portalGray;  // gray for 1610

  position: fixed;
  left: 0;
  right: 0;
  bottom: @page-main-bottom;
  overflow-y: hidden;
  top: @header-height;
  padding-left: 0;
  height:50px;
  z-index:101;
  .go-button {
    .btn-green;
    width: 96px;
    position: absolute;
    border-radius: 0px;
  }

  .tabs-container {
    .content_justify;
    position: relative;
    padding: 15px 0 32px 0;
    width: 100%;

    .tabs-title {
      //.a24r;
      .dBlue24r;  // AT&T Dark Blue
      margin: auto;
      .content_justify;
    }
    .portals-list {
      min-height: 70vh;
      //display: flex;
      justify-content: center;
      flex-flow: row wrap;
      width: 1170px;

      margin: auto;
      margin-bottom: 63px;

      .app-gridster-header {
        background-color: @portalWhite;
      }

      .app-gridster-footer {
        background-color: @portalWhite;
      }

      .portals-list-item {
        background-color: @portalWhite;
        border-radius: 2px;
        box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1);
        display: inline-block;
        width: 360px;
        height: 300px;
        background-size: cover;
        cursor: pointer;
        margin: 15px;
        overflow: hidden;

        .portals-item-info {
          background-color: @portalWhite;
          height: 120px;
          top: 180px;
          position: relative;
          box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1);
          padding: 16px;

          .info-title {
            //.a24r;
            .dBlue24r;  // AT&T Dark Blue
            margin-bottom: 4px;
            
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .info-description {
            .portalDBlue16r;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          .info-button {
            .btn-green;
            width: 96px;
            position: absolute;
            bottom: 16px;
            left: 16px;
          }

          &:hover {
            opacity: .93;
            z-index: 3;
          }
        }
      }
    }
  }
}

.w-ecomp-main-disclaimer {
  text-align: center;
  .dGray14r;
  bottom: -37px;
  width: 100%;
  line-height: 1.5em;

}
//.build-number {
//  .o12i;
//}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}



.tab-container {
  background: @portalLGray;
  margin: 0;
  padding: 0;
  max-height: 40px;
}
.tab-container ul.nav-tabs {
  margin: 0;
  list-style-type: none;
  line-height: 40px;
  max-height: 40px;
  overflow: hidden;
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  padding-right: 20px;
  border-bottom: 5px solid @funcBkgGray;
}
.tab-container ul.nav-tabs > li {
  margin: 5px -14px 0;
  -moz-border-radius-topleft: 28px 145px;
  -webkit-border-top-left-radius: 28px 145px;
  border-top-left-radius: 28px 145px;
  -moz-border-radius-topright: 28px 145px;
  -webkit-border-top-right-radius: 28px 145px;
  border-top-right-radius: 28px 145px;
  padding: 0 30px 0 25px;
  height: 170px;
  background: #c3d5e6;
  position: relative;
  -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  width: 200px;
  max-width: 200px;
  min-width: 20px;
  border: 1px solid @portalGray;
}
.tab-container ul.nav-tabs > li:first-child {
  margin-left: 0;
}
.tab-container ul.nav-tabs > li:last-of-type {
  margin-right: 0;
}
.tab-container ul.nav-tabs > li > a {
  display: block;
  max-width: 100%;
  text-decoration: none;
  color: @portalBlack;
  padding: 3px 7px;
}
.tab-container ul.nav-tabs > li > a span {
  overflow: hidden;
  white-space: nowrap;
  display: block;
}
.tab-container ul.nav-tabs > li > a:focus, .tab-container ul.nav-tabs > li > a:hover {
  background-color: transparent;
  border-color: transparent;
}
.tab-container ul.nav-tabs > li > a .glyphicon-remove {
  color: @portalDGray;
  display: inline-block;
  padding: 3px;
  font-size: 10px;
  position: absolute;
  z-index: 10;
  top: 7px;
  right: -10px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.tab-container ul.nav-tabs > li > a .glyphicon-remove:hover {
  background: @portalLPurple;
  color: @portalWhite;
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.tab-container ul.nav-tabs > li.active {
  z-index: 4;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 30, color-stop(0%, @portalWhite), color-stop(100%, @funcBkgGray));
  background-image: -moz-linear-gradient(@portalWhite, @funcBkgGray 30px);
  background-image: -webkit-linear-gradient(@portalWhite, @funcBkgGray 30px);
  background-image: linear-gradient(@portalWhite, @funcBkgGray 30px);
}
.tab-container ul.nav-tabs > li.active > a {
  background-color: transparent;
  border-color: transparent;
  border-bottom-color: transparent;
}
.tab-container ul.nav-tabs > li.active > a:focus, .tab-container ul.nav-tabs > li.active > a:hover {
  background-color: transparent;
  border-color: transparent;
  border-bottom-color: transparent;
}
.tab-container ul.nav-tabs .btn {
  float: left;
  height: 20px;
  width: 35px;
  min-width: 35px;
  max-width: 35px;
  margin: 10px 0 0 0;
  border-color: @portalLBlue;
  outline: none;
  -moz-transform: skew(30deg);
  -ms-transform: skew(30deg);
  -webkit-transform: skew(30deg);
  transform: skew(30deg);
}
.tab-container ul.nav-tabs .btn.btn-default {
  background: #c3d5e6;
}
.tab-container ul.nav-tabs .btn.btn-default:hover {
  background: #d2deeb;
}
.tab-container ul.nav-tabs .btn.btn-default:active {
  background: #9cb5cc;
}
.tab-container .tab-pane {
  padding: 0px 0px;
  text-align: center;
}
.tab-container .tab-pane.active {
  border-top: 1px solid #ddd;
}

.tab-container md-content {
  background-color: transparent !important; }
  .tab-container md-content md-tabs {
    border: 1px solid #e1e1e1; }
    .tab-container md-content md-tabs md-tab-content {
      background: #f6f6f6; }
    .tab-container md-content md-tabs md-tabs-canvas {
      background: white; }
  .tab-container md-content h1:first-child {
    margin-top: 0; }
.tab-container md-input-container {
  padding-bottom: 0; }
.tab-container .remove-tab {
  margin-bottom: 40px; }
.tab-container .demo-tab > div > div {
  padding: 25px;
  box-sizing: border-box; }
.tab-container .edit-form input {
  width: 100%; }
.tab-container md-tabs {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.tab-container md-tab[disabled] {
  opacity: 0.5; }
.tab-container label {
  text-align: left; }
.tab-container .long > input {
  width: 264px; }
.tab-container .md-button.add-tab {
  transform: translateY(5px); }

.md-tab{
	font-size: 13px;
    line-height: 30px;
    margin: 5px -3px 0;
    border-top-left-radius: 88px 205px;
    border-top-right-radius: 88px 205px;
    padding: 0 30px 0 25px;
    height: 40px;
    background: @portalLGray;
    position: relative;
    box-shadow: 0 4px 6px rgba(0,0,0,.5);
    width: 180px;
    max-width: 200px;
    min-width: 20px;
    border: 1px solid #aaa;
    text-transform: capitalize;
    text-align: left;
}

md-tabs .md-tab {
	color: #222;
}

md-tabs-canvas {
    border-bottom: 5px solid #f7f7f7;
    height: 40px;
}
.md-tab.md-active {
  	z-index: 4;
  	background-color: #f5f5f5 !important;
}
.md-tab:first-child{
	margin-left: 10px;
}
md-ink-bar{
	z-index: 5 !important;
}

.glyphicon {
      position: fixed;
      line-height: 4;
}
.close_button {
	font-size: x-small;width: 10px;
    margin-left: 130px;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.close_button {
		font-size: x-small;width: 10px;margin-left: 130px;margin-top: 55px;
	}
}

*,
*:after,
*:before
{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


.button-default
{
  .transition(@transitionDefault color);
  background: transparent;
  border: none;
  cursor: pointer;
  margin: 0;
  outline: none;
  position: relative;
}

.show-notifications
{
  position: relative;

  &:hover,
  &:focus,
  &.active
  {
    #icon-bell
    {
      fill: @colorWetAsphalt;
    }
  }

  #icon-bell
  {
    fill: @colorAsbestos;
  }



  &.active ~ .notifications
  {
    opacity: 1;
    top: 35px;
  }
}
.notifications_li{
    border-top: 1px solid #bdc3c7;
    color: #7f8c8d;
    cursor: default;
    display: block;
    padding: 10px;
    position: relative;
    white-space: nowrap;
    width: 350px;
}
.notifications_li:hover{
	background:#eee;
}
.notifications_detail{
	margin-left: 10px;
    white-space: normal;
    width: 280px;
    display: inline-block;
    vertical-align: middle;
}

.notifications_empty{
    display: none;
    text-align: center;
}
.notifications_title{
    display: block;
}

.notifications_date{
    color: #95a5a6;
    font-size: .85em;
    margin-top: 3px;
}
.notifications
{
  .border-radius(@borderRadius);
  .transition(@transitionDefault opacity);
  background: @colorClouds;
  border: 1px solid @colorSilver;
  left: 10px;
  opacity: 0;
 // position: absolute;
  //top: -999px;

  &:after
  {
    border: 10px solid transparent;
    border-bottom-color: @colorPeterRiver;
    content: '';
    display: block;
    height: 0;
    left: 10px;
    position: absolute;
    top: -20px;
    width: 0;
  }

  h3,
  .show-all
  {
    background: @colorPeterRiver;
    color: @colorWhite;
    margin: 0;
    padding: 10px;
    width: 350px;
  }

  h3
  {
    cursor: default;
    font-size: 1.05em;
    font-weight: normal;
  }

  .show-all
  {
    display: block;
    text-align: center;
    text-decoration: none;

    &:hover,
    &:focus
    {
      text-decoration: underline;
    }
  }

  .notifications-list
  {
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;

    .item
    {
      .transition-transform(@transitionDefault);
      border-top: 1px solid @colorSilver;
      color: @colorAsbestos;
      cursor: default;
      display: block;
      padding: 10px;
      position: relative;
      white-space: nowrap;
      width: 350px;

      &:before,
      .details,
      .button-dismiss
      {
        display: inline-block;
        vertical-align: middle;
      }

      &:before
      {
        .border-radius(50%);
        background: @colorPeterRiver;
        content: '';
        height: 8px;
        width: 8px;
      }

      .details
      {
        margin-left: 10px;
        white-space: normal;
        width: 280px;

        .title,
        .date
        {
          display: block;
        }

        .date
        {
          color: @colorConcrete;
          font-size: .85em;
          margin-top: 3px;
        }
      }

      .button-dismiss
      {
        color: @colorSilver;
        font-size: 2.25em;

        &:hover,
        &:focus
        {
          color: @colorConcrete;
        }
      }

      &.no-data
      {
        display: none;
        text-align: center;

        &:before
        {
          display: none;
        }
      }

      &.expired
      {
        color: @colorSilver;

        &:before
        {
          background: @colorSilver;
        }

        .details
        {
          .date
          {
            color: @colorSilver;
          }
        }
      }

      &.dismissed
      {
        .transform(translateX(100%));
      }
    }
  }

  &.empty
  {
    .notifications-list
    {
      .no-data
      {
        display: block;
        padding: 10px;
      }
    }
  }
}

/* variables */
@colorClouds: #ecf0f1;
@colorSilver: #bdc3c7;
@colorWhite: #fefefe;
@colorPeterRiver: #3498db;
@colorConcrete: #95a5a6;
@colorAsbestos: #7f8c8d;
@colorWetAsphalt: #34495e;

@borderRadius: 2px;

@transitionDefault: 0.25s ease-out 0.10s;

/* mixins */
.background-clip(@value: border-box)
{
    -moz-background-clip: @value;
    -webkit-background-clip: @value;
    background-clip: @value;
}

.border-radius(@value: 5px)
{
    -moz-border-radius: @value;
    -webkit-border-radius: @value;
    border-radius: @value;
    .background-clip(padding-box);
}

.transform(@value)
{
  -webkit-transform: @value;
  -moz-transform: @value;
  -ms-transform: @value;
  -o-transform: @value;
  transform: @value;
}

.transition(@value: all 0.25s ease-out)
{
  -webkit-transition: @value;
  -moz-transition: @value;
  -o-transition: @value;
  transition: @value;
}

.transition-transform(@transition: 0.25s ease-out)
{
  -webkit-transition: -webkit-transform @transition;
  -moz-transition: -moz-transform @transition;
  -o-transition: -o-transform @transition;
  transition: transform @transition;
}

.icon-primary-close{
font-size: 14px;
}
.tab-cross-sign{
	position: relative;
    margin-left: 123px;
    top: -76px;
	 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 	 top:-70px;
	}    
}

#tab-cross-sign-icon{
    margin: 48px 0px 0px 0px; 
    width: 16.1px;
    border-bottom-width:0px;
    padding: 6px 6px 6px 3px;   
}

.tab-iframe {
	height: 90vh;
}

.selectedIndex-spn {
	overflow: hidden;
	white-space: 
	nowrap;display: block;
}

.tab-space-pos {
	position: fixed; 
	right: 290px; 
	top: 62px;
}

.search-box {
	position: fixed; 
	right: 0; 
	top: 58px;
}