/* SPDX-License-Identifier: CC-BY-4.0 */
/* Copyright Contributors to the Zowe project. */
body {
  margin: 0 auto;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color:#333333;
  font-weight:300;
  line-height:1.4em;
  text-decoration: none;
}

body, html {
  overflow-x:hidden;
}

p {
  margin-bottom:1%;
}

a:hover{
  text-decoration: none !important;
}

.content {
  width:80%;
  margin-left:5%;
  padding-right:5%;
}

.lfheader {
  background-image: url('/assets/img/bg2.webp'); 
  background-repeat: no-repeat; 
  background-size: cover;
  width: 100%;
  background-position: center;
}

.lfheader img.img-top {
  width:20%;
  padding-top:0.5%;
  padding-left:2%;
}

.lfheader nav.nav {
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4.6px);
  -webkit-backdrop-filter: blur(4.6px);
}

.main-zowe-descr {
  padding-top: 2%;
  padding-bottom: 2%;
  font-weight: 500;
}

.copyright {
  width:90% !important;
  margin-top:2%;
  font-size:0.8em;
  display:block;
  line-height:1.5em;
  float:left;
  color:white !important;
}

.copyright a {
  color:white !important;
}

.navigation-top {
  border-bottom:0px solid white !important;
  position:relative !important;
  padding-top:3%;
  padding-bottom:2%;
  padding-left:5%;
  background-color:#292929 !important;
  color:white !important;
  vertical-align:middle;
}

.logo img {
  height: 90px;
  width: 210px;
}

.menu a{
  display:inline-block;
  padding-right:2%;
  font-size:1.2em;
  font-weight:500;
  color:#aaaaaa!important;
  text-decoration:none;
}

.menu {
  float:right;
  margin-top:-4%;
  width:75%;
}

.topbanner {
  font-weight:400;
  background:url("../img/bg.jpg");
  text-align:center;
  font-size:27pt;
  color:white;
  background-size:100%;
  padding-top:15%;
  padding-bottom:15%;
}

.announcementsection {
  background-color:#eeeeee;
  padding-bottom:0.5%;
  border-bottom: 1px solid #C1BFBF;
}

.announcementsection strong {
  font-weight: 600;
}
.section1col1 {
  width:60%;
  float:left;
}

.videocol {
  width:40%;
  padding-left:5%;
  float:left;
}

.whitebackground h1 {
 font-size:2.3em;
 line-height:1.1em;
 margin-bottom:1%;
 /* color:#145391 !important; */
 font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.announcementsection h1 {
 font-size:2.3em;
 margin-bottom:1.5%;
 line-height:1.1em;
 /* color:#145391 !important; */
 font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.bluebackground h1 {
 font-size:2.3em;
 line-height:2em;
 color:white !important;
 font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.whitebackground {
  padding-top:3%;
  float:left;
  padding-left:7%;
  padding-right:10%;
  padding-bottom:3%;
}

.bluebackground {
  padding-top:3%;
  color:white;
  width:100%;
  background-color:#145391;
  padding-left:7%;
  float:left;
  padding-right:10%;
  padding-bottom:4%;
}

.whitebackground .button {
 padding:2%;
 font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
 margin-top:2%;
 margin-right:2%;
 margin-bottom:2%;
 background-color:white;
 font-size:1.2em;
 font-weight:700;
 border:3px solid #145391;
 color:#145391;
 line-height: 5em;
 white-space: nowrap;
}

.whitebackground a.button {
 color:#145391 !important;
 text-decoration:none;
}

.whitebackground button {
  padding:2%;
  font-family:"Roboto Condensed", sans-serif;
  margin-top:2%;
  margin-right:2%;
  margin-bottom:2%;
  background-color:white;
  font-size:1.2em;
  font-weight:700;
  border:3px solid #145391;
  color:#145391;
 }
 
 .whitebackground button a {
 
  color:#145391 !important;
  text-decoration:none;
 }
 

.bluebackground .button {
 padding:2%;
 font-family:"Roboto Condensed", sans-serif;
 margin-top:2%;
 margin-right:3%;
 margin-bottom:2%;
 background-color:#145391;
 font-size:1.2em;
 font-weight:700;
 border:3px solid white;
 color:white;
 line-height: 7em;
 white-space: nowrap;
}

.bluebackground a.button {
 color:white !important;
 text-decoration:none !important;
}

.twoboxes {
 background-color:#145391;
 padding-left:5%;
 padding-right:5%;
 padding-top:1%;
 padding-bottom:4%;
 width:100%;
 float:left;
}

.boxone {
  padding-left:4%;
  padding-right:4%;
  padding-top:6%;
  padding-bottom:6%;
  margin:2%;
  width:30%;
  float:left;
  background-color:white;
}

.boxtwo {
  padding-left:4%;
  padding-right:4%;
  padding-top:6%;
  padding-bottom:6%;
  margin:2%;
  float:left;
  width:30%;
  background-color:white;
}

h2 {
  font-size:2em;
  font-weight:400;
}

footer {
  background-color:#222222;
  padding-top:5%;
  padding-left:7%;
  color:white;
  width:100%;
  padding-bottom:2%;
  float:left;
}

.footercol1 {
  width:35%;
  float:left;
  font-size:1.3em;
}

.footercol2 {
  width:30%;
  float:left;
}

.footercol3 {
  width:30%;
  float:left;
}

.footercol2 a{
  display:block;
  color:white;
  text-decoration:none;
  line-height:1.7em;
}

.footercol2 a:hover{
  text-decoration: none;
}
.footercol3 a{
  display:block;
  color:white;
  text-decoration:none;
  line-height:1.7em;
}

.footercol1 img{
  padding-bottom:4%;
  display:block;
  width:55%;
}

.footercol1 a img{
  width: auto;
}

.bluebackground details table {
  background-color: white;
  color: #33332B;
  padding: 5px;
}

.bluebackground a.white {
  color:white !important;
}
 
summary {
  display:list-item;
  cursor:pointer;
}

a.back-to-top {
	display: none;
	width: 60px;
	height: 60px;
	text-indent: -9999px;
	position: fixed;
	z-index: 999;
	right: 20px;
	bottom: 20px;
	background: #333 url("../img/up-arrow.png") no-repeat center 43%;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}

.zowe-video {
  max-height: 216px;
}

.lfheader img.img-top {
  width: 450px;
}

div h2 {
  font-size: 1.75rem;
}

div h4 {
  font-size: 1.25rem;
}

.img-top {
  vertical-align: top;
  display: block;
}

.zowe-img-middle {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 15px;
  width: 35%;
  text-align: center;
}

.zowe-img-middle-inner {
  width: 100%;
  margin: auto;
  margin-top: -20px;
  margin-bottom: -20px;
}

@media (max-width:750px) {
  .lfheader { /* mobile - short and stout, at the top but enough room to show the logo */
    padding-bottom: 10px;
    background-image: url('/assets/img/bg2.webp'); 
    background-repeat: no-repeat; 
    background-size: cover;
    width: 100%;
    background-position: center;
  }

  .zowe-img-middle-inner { /* mobile - more centered, correct looking logo */
    width: 175% !important;
    margin: auto;
    padding: 0px !important;
    padding-bottom: 10px !important;
    margin-left: -33%; /* width 150%? margin-left -25%, width 200%? margin-left -50% etc. etc.*/
    margin-bottom: -50px;
  }

  .lfheader img{
    width:120%;
    padding-top:1.5%;
    padding-left:2%;
  }

  .lfheader img.img-top {
    width: 250px;
  }

  .lfheader li.nav-item {
    width: 100%;
  }

  .copyright {
    width:95% !important;
    margin-top:3%;
    font-size:0.7em;
    display:block;
    line-height:1.2em;
    float:left;
    color:white !important;
  }

  .announcementsection {
    padding-bottom:8%;
  }

  .whitebackground {
    padding-top:3%;
    width:100%;
    padding-bottom:7%;
  }

  .bluebackground {
    width:100%;
    padding-bottom:8%;
  }

  .section1col1 {
    width:100%;
    float:left;
  }

  .videocol {
    width:100%;
    padding-left:0%;
    padding-top:9%;
  }

  .boxone {
    width:80%;
  }

  .boxtwo {
    width:80%;
    background-color:white;
  }

  .navigation-top {
    border-bottom:0px solid white !important;
    position:relative !important;
    padding-top:3%;
    padding-bottom:12%;
    padding-left:5%;
    color:white !important;
    vertical-align:middle;
  }

  .logo img {
    width:80%;
    padding-bottom:5%;
    padding-top:3%;
    padding-left:1%;
    text-align:center;
  }

  .menu a{
    display:inline-block;
    padding-right:2%;
    font-size:1.2em;
    font-weight:500;
    color:#aaaaaa!important;
    text-decoration:none;
  }

  .menu {
    float:right;
    margin-top:-4%;
    width:100%;
    padding-bottom:4%;
  }

  .topbanner {
    font-weight:400;
    background:url("../img/bg.jpg");
    text-align:center;
    font-size:27pt;
    color:white;
    padding-top:25%;
    padding-bottom:25%;
  }
  
  .footercol1 {
    width:100%;
    float:left;
    font-size:1.3em;
  }

  .footercol2 {
    width:100%;
    padding-top:2%;
    float:left;
  }

  .footercol3 {
    width:100%;
    padding-top:4%;
    float:left;
  }

  .whitebackground .button {
   padding:3%;
  }

  .bluebackground .button {
    padding:3%;
  }

  .content {
    width:90%;
    margin-left:5%;
    padding-right:2%;
  }

  .zowe-video {
    max-height: 181px;
  }
}

@media (min-width:1500px) {
  .zowe-video {
    max-height: inherit;
  }
}

#navbarSupportedContent {
  margin: 0px;
  padding: 0px;
}

.animated-tile {
  transition: transform 0.3s ease-in-out; /* Smooth transition for the scaling effect */
}

.animated-tile-bigger {
  transition: transform 0.3s ease-in-out;
}

.animate-upwards {
  transform-origin: bottom; /* Makes the scaling grow upwards */
  margin-bottom: -1px; /* Makes things cleaner on some resolutions */
}

.animated-tile:hover {
  transform: scale(1.05); /* Scales up the element by 5% when hovered over */
}

.animated-tile-bigger:hover {
  transform: scale(1.10); /* 10% */
}

.main-zowe-descr {
  padding: 3%; 
  padding-bottom: 3%
}

#intents {
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 1%;
  padding-bottom: 1%;
}

#intents div.row > div {
  padding: 20px; 
  margin: 10px;
}

#intents div.row>div a {
  font-weight: inherit;
  font-size: 28px;
  padding-left: 15px;
  vertical-align: middle;
}

#intents img {
  width: 48px;
  height: 48px;
}

#components {
  padding: 4% 5% 5% 5%;
}

#metrics {
  padding: 2% 3%; 
  color: black !important;
}

#events .past {
  color: #939393;
}

#events .future {
  color: #24a148;
}

span.stage, span.dedication {
  border-radius: 22px;
  padding: 4px 8px 4px 8px;
  display: inline-block;
} 

span.long-term-support {
  background-color: #0059FF;
  color: white;
}

span.generally-available {
  background-color: #3579F6;
  color: white;
}

span.technical-preview {
  background-color: #D0E2FF;
  color: #161616;
}

span.under-development {
  background-color: #E0E0E0;
  color: #161616;
}

span.core {
  background-color: black;
  color: white;
}

span.extension {
  background-color: black;
  color: white;
}

.lfheader button.navbar-toggler {
  position: absolute;
  top: 5px;
  right: 5px;
}

.burgerbtn {
  display: none;
}

.mobile-button {
  background-image: url('/assets/img/navbar-toggler.png'); 
  background-repeat: no-repeat; 
  background-size: cover; 
  height: 47px; 
  width: 63px;
}

div#components img {
  width: 100%;
  max-height: 400px;
}


#feedback {
  position: fixed; 
  bottom: 75px; 
  right: 37px; 
  height: 400px;
  background-color: white;
  z-index: 999;
  display: none;
  box-shadow: 0px 0px 10px #b2b2b2;
}

#feedback-closed {
  position: fixed; 
  bottom: 0px; 
  right: 0px;
  display: none;
  z-index: 1000;
  background-image: url('../img/question-of-month.png');
  background-repeat: no-repeat;
  font-size: 24px;
  margin: 2px;
  margin-right: -12px;
  font-weight: bold;
  padding: 6px 12px;
  cursor: pointer;    
  width: 326px;
  height: 83px;
}

#feedback-closed.feedback-hide, #feedback.feedback-hide, .announcementsection .feedback-hide {
  display: none;
}

.feedback-header {
  font-size: 24px;
  margin: 2px;
  font-weight: bold;
  padding: 4px 6px 0 22px;
  cursor: pointer;
}

.feedback-container {
  height: 356px; 
  width: 270px; 
  border: none;
}

.whitebackground .legalbutton {
  padding: 0;
}

.whitebackground .legalbutton a {
  display: block;
  line-height: 5rem;
  width: 7rem;
}

@media (min-width: 896px) and (min-height: 530px) {
  #feedback-closed { 
    display: block;
  }

  #feedback {
    display: block;
  }
}

@media (max-width: 991px) {
  .burgerbtn {
    display: block;
  }
}