@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700');

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Montserrat', 'Arial', 'Helvetica', sans-serif;
}

p,
table,
tr,
td {
  font-family: 'Montserrat', 'Arial', 'Helvetica', sans-serif;
}

:root {
  --botopadding: 10px 10px;
  --botoborder-radius: 12px;
  --botobgcolor: #EFEFEF;

}
#botoRedColor{
  color: #AD2121;
  font-weight:bold;
}

.botoCenter {
  margin: auto;
  max-width: 1100px;
  padding: var(--botopadding);
}

/* for open now button*/
.botoBttn {
  font-family: 'Montserrat', 'Arial', 'Helvetica', sans-serif;
  border: none;
  padding: 10px;
  text-align: center;
  font-size: large;
  color: #AD2121;
  text-decoration: none;
  border-radius: 8px;
  background-color: white;
  outline: 2px solid #AD2121;
  margin: 1%;
}

.botoBttn:hover {
  background-color: #AD2121;
  outline: 4px solid white;
  color: white;
  text-decoration: underline;
}
/*colored checking tabs*/
.botoButtonTab {
  border: none;
  padding: 18px;
  position: relative;
  outline: none;
  font-size: x-large;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.botoGreen {
  background-color: #195228;
  color: white;
}

.botoRed {
  background-color: #BE1E2D;
  color: white;
  font-weight: bold;
}

.botoPurple {
  background-color: #522773;
  color: white;
}

.botoBlue {
  background-color: #4A67B0;
  color: white;
}

.botoGold {
  background-color: #a79360;
  color: white;
}

/* card container grid layout desktop view*/
.botoCardContainer {
  display: grid;
  margin: auto;
  min-height: 400px;
  max-width: 1000px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: .1fr .2fr .1fr 1fr;
  grid-template-areas:
    "botoLabel botoEmpty botoEmpty botoEmpty"
    "botoDetails botoDetails botoDetails botoDetails"
    "botoContentH1 botoContentH2 botoContentH3 botoContentH4"
    "botoContent1 botoContent2 botoContent3 botoContent4";
  grid-gap: 0.2rem;
  padding: 1%;
}

#botoLabel {
  grid-area: botoLabel;
  text-align: left;
}

#botoEmpty {
  grid-area: botoEmpty;
  text-align: left;
}

#botoDetails {
  font-family:sans-serif;
  
  background-color: beige;
  grid-area: botoDetails;
  padding: var(--botopadding);
  border-top-right-radius: 12px;
}

/*header for grid/table */
#botoContentH1 {
  background-color: lightgray;
  font-weight: bold;
  padding: var(--botopadding);
  grid-area: botoContentH1;
}

#botoContentH2 {
  background-color: lightgray;
  padding: var(--botopadding);
  font-weight: bold;
  grid-area: botoContentH2;
}

#botoContentH3 {
  background-color: lightgray;
  padding: var(--botopadding);
  font-weight: bold;
  grid-area: botoContentH3;
}

#botoContentH4 {
  background-color: lightgray;
  padding: var(--botopadding);
  font-weight: bold;
  grid-area: botoContentH4;
}

/* content for grid/table */
#botoContent1 {
  padding: var(--botopadding);
  background-color: var(--botobgcolor);
  grid-area: botoContent1;
  border-bottom-left-radius: var(--botoborder-radius);
}

#botoContent2 {
  padding: var(--botopadding);
  background-color: var(--botobgcolor);
  grid-area: botoContent2;
}

#botoContent3 {
  padding: var(--botopadding);
  background-color: var(--botobgcolor);
  grid-area: botoContent3;
}

#botoContent4 {
  padding: var(--botopadding);
  background-color: var(--botobgcolor);
  grid-area: botoContent4;
  border-bottom-right-radius: var(--botoborder-radius);
}
/*card container end*/


/*3x1 grid start*/
.botoContainer3x1 {
  display: grid;
  margin: auto;
  max-width: 700px;
  grid-template-columns: 1fr 2fr .3fr;
  grid-template-areas:
    "contentL contentM contentR";
}

#botoContentL {
  grid-area: contentL;
  padding: var(--botopadding);
  text-align: center;
}

#botoContentM {
  grid-area: contentM;
  padding: var(--botopadding);
  text-align: left;


}

#botoContentR {
  grid-area: contentR;
  padding: var(--botopadding);
  text-align: left;
  font-weight: bold;
}

/*3x1 grid end */


/*  mobile view for card container start*/
@media only screen and (max-width:600px) {
  .botoCardContainer {
    grid-template-columns: 1fr 2fr;
    grid-template-rows: .3fr .5fr 2fr 2fr 2fr 2fr;
    grid-template-areas:
      "botoLabel botoEmpty"
      "botoDetails botoDetails"
      "botoContentH1 botoContent1"
      "botoContentH2 botoContent2"
      "botoContentH3 botoContent3"
      "botoContentH4 botoContent4";
  }

  /* adjust for corner border radius*/
  #botoContent1 {
    padding: var(--botopadding);
    background-color: var(--botobgcolor);
    grid-area: botoContent1;
    border-bottom-left-radius: 0;
  }

  #botoContentH4 {
    background-color: lightgray;
    padding: var(--botopadding);
    font-weight: bold;
    grid-area: botoContentH4;
    border-bottom-left-radius: var(--botoborder-radius);
  }


}

.selector {
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
/* mobile view for card container end*/