/* line 1, ../sass/diagram.scss */
div.ebu-bridge-diagram {
    font-family: arial;
  }
  /* line 4, ../sass/diagram.scss */
  div.ebu-bridge-diagram div.diagram {
    display: grid;
    font-size: 140%;
    margin: 5px 0px 20px 20px;
    grid-template-columns: 220px 220px 220px; 
    grid-template-areas: "info north north-east" "west compass east" "south-west south south-east";
  }
  /* line 12, ../sass/diagram.scss */
  div.ebu-bridge-diagram div.diagram div {
    padding: 2px 5px;
  }
  /* line 16, ../sass/diagram.scss */
  div.ebu-bridge-diagram div.diagram div.north {
    grid-area: north;
    color:#000000;
    font-size: 1.475rem;
  }

  div.ebu-bridge-diagram div.diagram div.north-east {
    grid-area: north-east;

  }

  div.ebu-bridge-diagram div.diagram div.south-west {
    grid-area: south-west;
  }

  div.ebu-bridge-diagram div.diagram div.south-east {
    grid-area: south-east;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* line 20, ../sass/diagram.scss */
  div.ebu-bridge-diagram div.diagram div.south {
    grid-area: south;
    color:#000000;
    font-size: 1.475rem;
  }
  /* line 24, ../sass/diagram.scss */
  div.ebu-bridge-diagram div.diagram div.west {
    grid-area: west;
    padding-right: 15px;
    align-content: end;
    color:#000000;
    font-size: 1.475rem;
  }
  /* line 29, ../sass/diagram.scss */
  div.ebu-bridge-diagram div.diagram div.east {
    grid-area: east;
    padding-left: 15px;
    color:#000000;
    font-size: 1.475rem;
  }
  /* line 34, ../sass/diagram.scss */
  div.ebu-bridge-diagram div.diagram div.compass {
    grid-area: compass;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* line 42, ../sass/diagram.scss */
  div.ebu-bridge-diagram div.diagram div.info {
    grid-area: info;
    text-align: center;
    display: flex;
    font-size: 90%;
    align-items: center;
    justify-content: center;
  }
  /* line 51, ../sass/diagram.scss */
  div.ebu-bridge-diagram div.diagram span.suit {
    width: 26px; /* 20px; */
  }
  /* line 57, ../sass/diagram.scss */
  div.ebu-bridge-diagram span.suit {
    font-size: 120%;
    /*font-size: 33.8769px;
    line-height: 29.36px;*/
    font-family: Arial;
    display: inline-block;
  }
  /* line 62, ../sass/diagram.scss */
  div.ebu-bridge-diagram span.red {
    color: #f00;
  }
  /* line 66, ../sass/diagram.scss */
  div.ebu-bridge-diagram div.bidding {
    display: grid;
    max-width: 200px; /* 500 */
    font-size: 120%;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin: 5px 0px 20px 20px;
  }
  /* line 75, ../sass/diagram.scss */
  div.ebu-bridge-diagram div.bidding div {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* line 81, ../sass/diagram.scss */
  div.ebu-bridge-diagram div.bidding div.header {
    border-bottom: 1px solid black;
  }

  .bi-suit-spade-fill {
        color: blue; /* currentColor will now be blue */
    }
    .bi-suit-heart-fill {
        color: red; /* currentColor will now be red */
    }
    .bi-suit-diamond-fill {
        color: orange; /* currentColor will now be orange */
    }
    .bi-suit-club-fill {
        color: green; /* currentColor will now be green */
    }
    span.sp {
        content: '<i class="bi bi-suit-spade-fill"></i>';
        /*font-size: calc(1.2583rem + 0.0996vw);*/
        color: blue; /* currentColor will now be red */
        font-size: 142%;
		text-align: bottom;
		line-height: 90%;
    }
    span.ht {
        content: '<i class="bi bi-suit-heart-fill"></i>';
        /*font-size: calc(1.2583rem + 0.0996vw);*/
        color: red; /* currentColor will now be red */
        font-size: 133%;
		text-align: bottom;
		line-height: 90%;
    }
    span.di {
        content: '<i class="bi bi-suit-diamond-fill"></i>';
        /*font-size: calc(1.2583rem + 0.0996vw);*/
        color: orange; /* currentColor will now be orange */
        font-size: 148%;
		text-align: bottom;
		line-height: 90%;
    }
    span.cl {
        content: '<i class="bi bi-suit-club-fill"></i>';
        /*font-size: calc(1.2583rem + 0.0996vw);*/
        color: green; /* currentColor will now be green */
        font-size: 126%;
		text-align: bottom;
		line-height: 90%;
    }