/* Matchdata style sheet */
* {
  /* for all HTML elements, ensure padding and border are included */
  /* in the total width and height of the elements. */
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  /*background-color: rgb(0,30,0);*/
  }

body {background-color: rgb(0,30,0);}
div.supportlarge { display: none;}

@media only screen and (min-width: 600px) {body { background-color: rgb(0,30,0);}}
@media only screen and (min-width: 768px) {body { background-color: rgb(0,30,0);}}
@media only screen and (min-width: 2000px) {body { background-color: rgb(0,30,0);}}


/*body {background-color: rgb(0,30,0) ;}*/

.row::after {
  content: "";
  clear: both;
  display: table;
  }

[class*="col-"] {
  float: left;
  padding: 5px;
  /*border: 1px solid blue;*/
  }

/*For mobile phones every column is full width regardless*/
[class*="col-"] {width: 100%;}



/*@media only screen and (min-width:600px){*/
@media screen and (min-width:600px){
	/* for tablets*/
  .col-s-1 {width: 10%;}
  .col-s-2 {width: 20%;}
  .col-s-3 {width: 30%;}
  .col-s-4 {width: 40%;}
  .col-s-5 {width: 50%;}
  .col-s-6 {width: 60%;}
  .col-s-7 {width: 70%;}
  .col-s-8 {width: 80%;}
  .col-s-9 {width: 90%;}
  .col-s-10 {width: 100%;}

  div.supportsmall { display: block;}
  div.supportlarge { display: none;}
	}

/*@media only screen and (min-width:768px){*/
@media screen and (min-width:768px){
	/* for desktop
		It might seem odd that we have two sets of identical classes, but it
		gives us the opportunity in HTML, to decide what will happen with the
		columns at each breakpoint
	*/
  .col-1 {width: 10%;}
  .col-2 {width: 20%;}
  .col-3 {width: 30%;}
  .col-4 {width: 40%;}
  .col-5 {width: 50%;}
  .col-6 {width: 60%;}
  .col-7 {width: 70%;}
  .col-8 {width: 80%;}
  .col-9 {width: 90%;}
  .col-10 {width: 100%;}

  div.supportsmall { display: block;}
  div.supportlarge { display: none;}
}

  
  @media screen and (min-width: 2000px) {
    div.scoreshare { visibility: hidden;}
    div.scoresheets { display: none;}
    div.scoreboard { display: none;}
    div.gethome { display: none;}
    div.supportsmall {display: none;}
    div.supportlarge { display: block;}

    div.scoreheader {
      text-align: center;
      padding-bottom: 0.5vh ;
      background-color: rgb(0,30,0);
      color: white;
      font: bold 7vh Verdana Pro, Verdana, Arial, Times, serif;
      }

    div.scorecontext {
      text-align: center;
      padding-bottom: 0.5vh ;
      background-color: rgb(0,30,0);
      color: darkkhaki;
      font: bold 2.5vh Verdana Pro, Verdana, Arial, Times, serif;
    }
    
    div.scores {
      text-align: center;
      padding-bottom: 0.5vh ;
      background-color: rgb(0,30,0);
      color: yellow;
      font: bold 40vh Verdana Pro, Verdana, Arial, Times, serif;
    }

    div.scoredetails {
      text-align: center;
      padding-bottom: 0.5vh ;
      background-color: rgb(0,30,0);
      color: darkkhaki;
      font: bold 2vh Verdana Pro, Verdana, Arial, Times, serif;
    }

    div.scoretrycount {
      text-align: center;
      padding-bottom: 0.5vh ;
      background-color: rgb(0,30,0);
      color: darkkhaki;
      font: bold 10vh Verdana Pro, Verdana, Arial, Times, serif;
    }

    div.scorebrdtime {
      text-align: center;
      padding-bottom: 0.5vh ;
      background-color: rgb(0,30,0);
      color: antiquewhite;
      font: bold 15vh Verdana Pro, Verdana, Arial, Times, serif;
    }

  }
  

.title-header {
	margin: 0px; padding: 0px ; text-align: center;
	font: bold italic x-large Verdana, Arial, Times, serif;
	text-shadow: saddlebrown 0.25vh 0.25vw;
  background-color: rgb(0,15,0);
  color: wheat;
	}
.title-header a {	
  margin: 0px; padding: 0px ; text-align: center;
	font: bold italic x-large Verdana, Arial, Times, serif;
	text-shadow: saddlebrown 0.25vh 0.25vw;
  background-color: rgb(0,15,0);
  color: wheat;
}
.title-header a:hover {
  text-decoration:none; background-color: rgba(0,30,0,100%); color: wheat;
}
.tagline-header {
	text-align: center;
	margin: 0px;  padding: 0px ;
	font: italic medium Verdana, Arial, Times, serif;
  text-shadow: saddlebrown 0.1vh 0.1vw;
	background-color: rgb(0,15,0);
  color: wheat;
	padding-top: 0.25vh; padding-bottom: 0.25vh;
	vertical-align: middle;
	}

.mainfooter {
  text-align: center;
  margin: 0px; padding: 0px ;
  font: italic medium Verdana, Arial, Times, serif;
  text-shadow: saddlebrown 0.1vh 0.1vw;
  background-color: rgb(0,15,0);
  color: wheat;
  padding-top: 0.25vh; padding-bottom: 0.25vh;
  vertical-align: middle;
}
.subfooter {
  text-align: center;
  margin: 0px;  padding: 0px ;
  font: x-small Verdana, Arial, Times, serif;
  text-shadow: saddlebrown 0.05vh 0.05vw;
  background-color: rgb(0,15,0);
  color: wheat;
  padding-top: 0.05vh; padding-bottom: 1vh;
  vertical-align: middle;
}

/*a {text-decoration:none; background-color: rgba(0,100,100,100%); color: white;}*/
a {text-decoration:none; background-color: rgba(0,100,0,100%); color: white;}
a:hover {text-decoration:none; background-color: rgba(0,150,0,100%); color: white;}
p {margin-top: 0.5vh; margin-bottom: 1vh;}
button {border-color: rgb(0,80,0); border-width: 1px; border-style: outset; border-radius: 5px; margin: 3px;}
input {border-color: rgb(0,80,0); border-width: 1px; border-style: outset; border-radius: 5px; margin: 3px;}
caption {
  font: bold small Verdana, Arial, Times, serif;
  background-color: rgb(0,100,0);
  color: wheat; }

table {width: 100%;
  border: 1px solid rgb(0,30,0);
  border-collapse: collapse;
}
th, td {
  border: 1px solid rgb(0,30,0);
  border-collapse: collapse;
  padding: 5px ;
  text-align:left;
}
/*th, td {padding-bottom: 5px ; text-align:left;}*/
/*th {border-bottom: 1px solid wheat ;}
#t02 td {border:1px solid white;}*/

/*.bordered th, tr, td {border:1px solid wheat;border-spacing:0px;}*/
.bordered th, td {
  border: 1px solid rgb(0,30,0);
  border-collapse: collapse;
  padding: 5px ; text-align:left;
  border-spacing:0px;
}

.outlined th, td {
  /*border: 1px solid wheat;*/
  border-collapse: collapse;
  padding: 2px ; text-align: left;
  border-spacing: 0px;
}

.pijama table {border-spacing:0px; border-collapse: collapse;}
.pijama th {color: white; background-color: rgb(0,80,0) ;}
.pijama tr:nth-child(even) {color: black; background-color: rgb(200,240,200) ;}
.pijama tr:nth-child(odd) {color:black; background-color: rgb(180,240,180) ;}

.matchtable table {border-spacing:0px; border-collapse: collapse;}
.matchtable th {color: white; background-color: saddlebrown ;}
.matchtable tr:nth-child(even) {color: white; background-color: rgb(0,70,0) ;}
.matchtable tr:nth-child(odd) {color: white; background-color: rgb(0,45,0) ;}


.statement {
  text-align: left;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-bottom: 0.5vh ;
  background-color: rgb(229, 252, 229);
  color:black;
  font: small Verdana Pro, Verdana, Arial, Times, serif;
  }
.statement table {border-spacing:0px; border-collapse: collapse;}
.statement th {color: white; background-color: saddlebrown ;}
.statement tr:nth-child(even) {color: rgb(0,30,0); background-color: rgb(220,255,220) ;}
.statement tr:nth-child(odd) {color:rgb(0,30,0); background-color: rgb(188, 231, 186) ;}
.statement body {background-color: rgb(229,252,229);}

.getattention {
  text-align: left;
  padding-left: 1vw;
  padding-right: 1vw;
  background-color: rgb(0,30,0);
  color: orange;
  font: medium Verdana Pro, Verdana, Arial, Times, serif;
}

.tempworkaround {
  text-align: left;
  padding-bottom: 0.5vh;
  background-color: powderblue;
  color: black;
  font: medium Verdana Pro, Verdana, Arial, Times, serif;
}
.loginstatus {
  text-align: left;
  margin-bottom: 0.5vh;
  background-color: rgb(0,30,0);
  color: wheat;
  font: bold italic small Verdana Pro, Verdana, Arial, Times, serif;
  }

.gcsdebug {
  text-align: left;
  padding-bottom: 0.5vh ;
  background-color: cornsilk;
  color: blue;
  font: small Verdana Pro, Verdana, Arial, Times, serif;
}

.advertisements {
  text-align: left;
  padding-bottom: 0.5vh ;
  background-color: rgb(0,30,0);
  color: rgb(0,30,0);
  font: small Verdana Pro, Verdana, Arial, Times, serif;
}

.gothere {
  padding-top: 0.5vh ;
  padding-bottom: 0.5vh ;
  background-color: rgb(0,30,0);
  color: white;
  font: small Verdana Pro, Verdana, Arial, Times, serif;
}
.gothere a {border: 2px ridge grey; text-decoration: none ; text-align: center; background-color: rgba(0,180,0,100%); color: white; margin-bottom: 0.5vh; padding: 0.5vw;}
.gothere a:hover {border: 2px ridge grey; text-decoration:none; text-align: center; background-color: rgba(0,180,0,100%); color: wheat;margin-bottom: 0.5vh; padding: 0.5vw;}
.gothere button {padding: 0.5vh; text-decoration: none ; background-color: rgba(0,100,0,100%); color: wheat; }
.gothere button:hover { text-decoration:none; background-color: rgba(0,150,0,100%); color: wheat;}

.gethome {
  padding-top: 0.5vh;
  padding-bottom: 0.5vh ;
  background-color: rgb(0,30,0);
  color: antiquewhite;
  font: small Verdana Pro, Verdana, Arial, Times, serif;
}
.gethome a {border: 2px ridge grey; text-decoration: none ; background-color: rgba(0,100,0,100%); color: wheat; margin-bottom: 0.5vh; padding: 0.5vw;}
.gethome a:hover {border: 2px ridge grey; text-decoration:none; background-color: rgba(0,150,0,100%); color: wheat;margin-bottom: 0.5vh; padding: 0.5vw;}
.gethome button {padding: 0.5vh; text-decoration: none ; background-color: rgba(0,100,0,100%); color: wheat; }
.gethome button:hover { text-decoration:none; background-color: rgba(0,150,0,100%); color: wheat;}

.guidance {
  text-align: left;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-bottom: 0.5vh ;
  background-color: rgb(0,30,0);
  color: antiquewhite;
  font: small Verdana Pro, Verdana, Arial, Times, serif;
  }
.guidance ul {
  list-style-position: inside;
  list-style-type: disc;
	text-align: left;
	text-decoration: none;
	margin: 0;
	padding: 0;
  }
.guidance ol {
  /*list-style-type: none;*/
  list-style-position: inside;
  text-align: justify;
	text-decoration: none;
	margin: 0;
	padding: 0;
}
.guidance li {
  list-style-position:inside;
	/*margin-bottom: 0.5vh; padding: 0.5vw;*/
  background-color: rgba(0,30,0,100%);
	color: white;
  /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
	font: small Verdana Pro, Verdana, Arial, Times, serif;
}
.guidance button {padding: 0.5vh; background-color: rgba(0,100,0,100%); color: white; }
.guidance button:hover {padding: 0.5vh; background-color: rgba(0,150,0,100%); color: white; }

.score-container {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-gap: 1vh;
  text-decoration: none;
  background-color: rgb(0,30,0);
  color: white;
  padding-top: 0.5vh;
  padding-bottom: 0.5vh;
  padding-left: 2vh;
  padding-right: 3vh;
}

.scores {
  text-align: center;
  padding-bottom: 0.5vh ;
  background-color: rgb(0,30,0);
  color: yellow;
  font: bold 18vw Verdana Pro, Verdana, Arial, Times, serif;
  }

.scoreheader {
  text-align: center;
  padding-bottom: 0.5vh ;
  background-color: rgb(0,30,0);
  color: white;
  font: bold 4vw Verdana Pro, Verdana, Arial, Times, serif;
  }

.scoreshare {
  text-align: center;
  padding-bottom: 0.5vh ;
  background-color: rgb(0,30,0);
  color: white;
  font: bold 3vw Verdana Pro, Verdana, Arial, Times, serif;
}

.scorecontext {
  text-align: center;
  padding-bottom: 0.5vh ;
  background-color: rgb(0,30,0);
  color: darkkhaki;
  font: bold 2.5vw Verdana Pro, Verdana, Arial, Times, serif;
}

.scoredetails {
  text-align: center;
  padding-bottom: 0.5vh ;
  background-color: rgb(0,30,0);
  color: darkkhaki;
  font: bold 2vw Verdana Pro, Verdana, Arial, Times, serif;
}

.scoretrycount {
  text-align: center;
  padding-bottom: 0.5vh ;
  background-color: rgb(0,30,0);
  color: darkkhaki;
  font: bold 2vw Verdana Pro, Verdana, Arial, Times, serif;
}

.scoreboardnews {
  text-align: center;
  padding-bottom: 0.5vh ;
  background-color: rgb(0,30,0);
  color: lightyellow;
  font: 2vw Verdana Pro, Verdana, Arial, Times, serif;
  }

.scoreboard {
  text-align: center;
  padding-bottom: 0.05vh ;
  background-color: rgb(0,30,0);
  color: antiquewhite;
  font: 2vw Verdana Pro, Verdana, Arial, Times, serif;
  }

.scoresheets {
  text-align: center;
  padding-bottom: 0.5vh ;
  background-color: rgb(0,30,0);
  color: white;
  font: bold 2vw Verdana Pro, Verdana, Arial, Times, serif;
}

.scorebrdtime {
  text-align: center;
  padding-bottom: 0.5vh ;
  background-color: rgb(0,30,0);
  color: khaki;
  font: bold 5vw Verdana Pro, Verdana, Arial, Times, serif;
}

/*
.scoresheets button {padding: 0.5vh; animation-name: stand-out ; animation-duration: 7s; animation-iteration-count: infinite;}
.scoresheets button:hover {padding: 0.5vh; animation-name: stand-out ; animation-duration: 7s; animation-iteration-count: infinite;}
*/


@keyframes stand-out {
  from {background-color: rgb(0,100,0); color:white;}
  to {background-color: rgb(0,250,0);color: black ;}
}

/*
@keyframes stand-out {
  0%{color: white;}
  25%{color: yellow;}
  50%{color: white;}
  75%{color: yellow;}
  100%{color:white;}
}
*/


.rippled {
  font-size: 2vh;
  text-align: center ;
  color: rgba(225,225,225,.1) ;
  background-image: url(ripple.png) ;
  background-repeat: repeat-x ;
  -webkit-background-clip : text ;
  animation: powered 10s linear infinite ;
}

@keyframes powered {
  0%{ background-position: left 0px top 5px; }
  40% { background-position: left 800px top 5px; }
}

.heythere {
  font-size: 2vh;
  text-align: center ;
  animation-name: chameleon ;
  animation-duration: 5s ;
  animation-iteration-count: infinite ;
}

@keyframes chameleon {
  0%{color: rgb(0,100,0);}
  10%{color:rgb(0,125,0);}
  20%{color: rgb(0,150,0);}
  30%{color:rgb(0,175,0);}
  40%{color: rgb(0,200,0);}
  50%{color: rgb(0,250,0);}
  60%{color: rgb(0,200,0);}
  70%{color:rgb(0,175,0);}
  80%{color: rgb(0,150,0);}
  90%{color:rgb(0,125,0);}
  100%{color:rgb(0,100,0);}
}

.teams {
  text-align: center;
  padding-bottom: 0.5vh ;
  background-color: rgb(0,30,0);
  color: darkkhaki;
  font: bold 2vw Verdana Pro, Verdana, Arial, Times, serif;
}


.menu h3 {
  text-align: left;
  margin-bottom: 0.5vh;
  color: navajowhite;
  font: medium Verdana Pro, Verdana, Arial, Times, serif;
  font-weight: bold;
  }
.menu ul {
	list-style-type: none;
	text-align: center;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	}

.menu li {
	display: block;
	margin-bottom: 3px;
  padding: 5px;
  background-color: rgba(0,100,0,100%);
	color: white;
  /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
	font: small Verdana Pro, Verdana, Arial, Times, serif;
	}
.menu li:hover {color: white; background-color: rgba(0,130,0,100%);}
.menu a:hover {background-color: rgba(0,130,0,100%);}

/* Make a grid container with 2 columns  auto width*/
.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  /*grid-template-columns: 48vw 48vw;*/
  /*grid-gap: 0.3vh;*/
  text-decoration: none;
  color: white;
  background-color: rgb(0,30,0);
  /*padding: 0.25vh;*/
  }

.grid-item {
	margin-bottom: 0px ;
  padding: 0.5vw;
  background-color: rgba(0,100,0,100%);
  color: white;
  }
.grid-item-header {
	margin-bottom: 0px ;
  padding: 0.5vw;
  background-color: rgba(0,80,0,100%);
  color: white;
  }
.grid-item-input {
  margin-bottom: 0px ;
  padding: 0.5vw;
  background-color: rgba(0,150,0,100%);
  color: white;
  border-color: rgb(0,80,0); border-width: 1px; border-style: outset; border-radius: 5px;
  /*border-style: groove;*/
  /*border-color: rgb(0,80,0); border-width: 1px; border-style: outset; border-radius: 5px; margin: 3px; */
  }

.grid-item-input-cbx {
  margin-bottom: 0px ;
  padding: 0.5vw;
  background-color: antiquewhite ;
  color: rgb(0,80,0);
}

.grid-item-danger {
    margin-bottom: 0px ;
    padding: 0.5vw;
    background-color: rgba(100,0,0,100%);
    color: white;
  }

.teamsheet-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  /*grid-gap: 0.3vh;*/
  text-decoration: none;
  color: white;
  background-color: rgb(0,30,0);
  /*padding: 0.25vh;*/
}

.teamsheet-item {
  margin-bottom: 0px ;
  padding: 0.5vw;
  background-color: rgba(0,100,0,100%);
  color: white;
}

.teamsheet-item-input {
  margin-bottom: 0px ;
  padding: 0.5vw;
  background-color: antiquewhite;
  color: rgb(0,80,0);
  /*border-style: groove;*/
}

.team-display-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  /*grid-gap: 0.3vh;*/
  text-decoration: none;
  color: white;
  background-color: rgb(0,30,0);
  /*padding: 0.25vh;*/
}

.helpsection {
  text-align: left;
  padding-bottom: 0.5vh ;
  background-color: rgb(0,30,0);
  color: white;
  font: 100% Verdana Pro, Verdana, Arial, Times, serif;
  line-height: 150%;
}

.helpcontent {
  text-align: left;
  padding-bottom: 0.5vh ;
  background-color: rgb(0,30,0);
  padding-left: 5vw ;
  padding-right: 2vw;
  color: antiquewhite;
  font: 100% Verdana Pro, Verdana, Arial, Times, serif;
  line-height: 150%;
}


.helpsection a {text-decoration:none; background-color: rgba(0,30,0,100%); color: white;}
.helpsection a:hover {text-decoration:none; background-color: rgba(0,70,0,100%); color: white;}
.helpsection ol {padding-left: 3vw;}
.helpsection h1 { color: goldenrod; font: bolder large;}
.helpsection h2 { color: goldenrod; font: bold medium; padding-left: 3vw;}
.helpsection h3 { color: goldenrod; font: lighter small; padding-left: 5vw;}

.helpcontent a {border: 2px ridge grey; text-decoration: none ; background-color: rgba(0,50,0,100%); color: white; margin-bottom: 0.5vh; font: medium Verdana Pro, Verdana, Arial, Times, serif; }
.helpcontent a:hover {border: 2px ridge grey; text-decoration:none; background-color: rgba(0,70,0,100%); color: white; margin-bottom: 0.5vh; padding: 0.5vw;font: medium Verdana Pro, Verdana, Arial, Times, serif; }
.helpcontent button {padding: 0.2vh; background-color: rgba(0,60,0,100%); color: white; }
.helpcontent img {border: 1px ridge palegoldenrod; margin-bottom: 1vh; margin-top: 2vh; padding: 0.5vw;}
.helpcontent ul {padding-left: 3vw;}

.playersponsor {color: wheat; font: smaller;}
.playernotes {color: wheat; font: smaller;}

.aboutcontent {
  text-align: left;
  padding-bottom: 0.5vh ;
  background-color: rgb(0,30,0);
  padding-left: 3vw ;
  padding-right: 2vw;
  color: antiquewhite;
  font: 105% Verdana Pro, Verdana, Arial, Times, serif;
  line-height: 150%; 
}
.aboutcontent button {padding: 0.2vh; background-color: rgba(0,60,0,100%); color: white; font-size: 105%; }

.supportsmall {
  text-align: center;
  /*padding-left: 1vw;
  padding-right: 1vw;
  /*padding-bottom: 0.5vh ;*/
  background-color: rgb(0,30,0);
  color: antiquewhite;
  font: Verdana Pro, Verdana, Arial, Times, serif;
  font-size: small ; 
}

.supportlarge {
  text-align: center;
  /*padding-left: 1vw;
  padding-right: 1vw;
  /*padding-bottom: 0.5vh ;*/
  background-color: rgb(0,30,0);
  color: antiquewhite;
  font: Verdana Pro, Verdana, Arial, Times, serif; 
  font-size: larger;
}

.mdvert {
  overflow: hidden ;
}

.sliding-background {
  /*background: url("../images/Bears_sponsors.png") repeat-x ;*/
  height: auto;
  width: 95% ;
  animation: vertslide 20s linear infinite ;
}

@keyframes vertslide {
  0% { transform: translate3d(105%,0,0); }
  50% { transform: translate3d(-105%,0,0); }
  100% { transform: translate3d(110%,0,0); }
}

.rotating-still {
  /*background: url("../images/Bears_sponsors.png") repeat-x ;*/
  height: 15%;
  width: 10% ;
  animation: spinning 20s linear infinite ;
}

@keyframes spinning {
  0% {transform: rotate(0deg);}
  20% {transform: rotate(72deg);}
  40% {transform: rotate(144deg);}
  60% {transform: rotate(216deg);}
  80% {transform: rotate(288deg);}
  100% {transform: rotate(360deg);}
}

.rolling-across {
  /*background: url("../images/Bears_sponsors.png") repeat-x ;*/
  height: 50px;
  width: 75px ;
  animation: rolling 20s linear infinite ;
}

@keyframes rolling {
  0% {transform: rotate(0deg) translateX(0%); }
  10% {transform: rotate(36deg) translateX(10%); }
  20% {transform: rotate(72deg) translateX(20%);}
  30% {transform: rotate(108deg) translateX(30%);}
  40% {transform: rotate(144deg) translateX(40%);}
  50% {transform: rotate(180deg) translateX(50%);}
  60% {transform: rotate(144deg) translateX(60%);}
  70% {transform: rotate(108deg) translateX(70%);}
  80% {transform: rotate(72deg) translateX(80%);}
  90% {transform: rotate(36deg) translateX(90%);}
  100% {transform: rotate(0deg) translateX(100%);}
}

.centerimage {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.centerimagedark {
  background-color: rgb(0,30,0) ;
  margin-top: auto;
  margin-bottom:auto;
  margin-left: auto;
  margin-right: auto;
  display: block; 
}

.centeraligned {
  display: flex ;
  align-items: center;
  /*justify-content: center ;*/
}