hr {
  border-color: red; /* Set the color of the line to red */
  border-width: 2px; /* Set the width of the line to 2 pixels */
}

/* .gui-size { */
/*     font-size: 3.0vw;   */
/* } */

/* input, textarea, select, .hints { */
/*    font-size: 3.5vw; */
/* } */

.blue-line {
  border-color: blue; /* Set the color of the line to blue */
  border-width: 2px; /* Set the width of the line to 2 pixels */
}

.button-icon {
   width: 30px;
   height: 30px;
}

.pad-right {
    padding-right: 20px;
}

.pad-left {
    padding-left: 10px;
}

.pad-left20 {   /*used to pad 1-9 board numbers*/
    padding-left: 14px;
}

.login-body {
    background-color: #000066;
}

.match-result {
    font-size: 14px;
    font-weight: bold;
    border: 3px solid red;
    /* background-color: yellow; */
    padding-right: 20px;
}

.winner {
    background-color: yellow;
}

.scoretable-header {    
    border: none;
    font-weight: bold; /* Makes the text bold */
    font-style: italic; /* Makes the text italic */
    font-size: 14px; /* Sets the font size to 18 pixels */
    text-align: center;
}

.same-points {
    background-color: yellow;
}

.higher-points {
    border-bottom: 5px solid yellow;
}

.lower-points {
    border-top: 5px solid yellow;
}

.styled-table td {
  /*border: 1px solid black; /* Add a 1px solid black border to all table cells */
  padding: 6px; /* Add padding to improve readability */
  font-family: monospace; /* Set the font-family to monospace */
  line-height: 0.7; /* Adjust the line height to increase the row height */
}

/* Using Flexbox */
.container {
  display: flex; /* Use Flexbox layout */
  justify-content: space-between; /* Space elements evenly along the main axis */
}

.end {
    display: flex; /* Use Flexbox layout */
    justify-content: flex-end;
}

.start {
    display: flex; /* Use Flexbox layout */
    justify-content: flex-start;
}

.placeholder {
  flex-grow: 1; /* Empty placeholder element grows to fill remaining space */
}

/*  NS vulnerable */
.n-ns-vul {  /* Dealer is North */
    font-weight: bold;
    padding-right: 16%;
    border-top: 3px dashed red;
    border-bottom: 3px solid red;
    border-left: 3px solid green;
    border-right: 3px solid green;
}
.e-ns-vul {  /* Dealer is East */
    font-weight: bold;
    padding-right: 16%;
    border-top: 3px solid red;
    border-bottom: 3px solid red;
    border-left: 3px solid green;
    border-right: 3px dashed green;
}
.w-ns-vul {  /* Dealer is West */
    font-weight: bold;
    padding-right: 16%;
    border-top: 3px solid red;
    border-bottom: 3px solid red;
    border-left: 3px dashed green;
    border-right: 3px solid green;
}
.s-ns-vul {  /* Dealer is South */
    font-weight: bold;
    padding-right: 16%;
    border-top: 3px solid red;
    border-bottom: 3px dashed red;
    border-left: 3px solid green;
    border-right: 3px solid green;
}

/*  EW vulnerable */
.n-ew-vul {  /* Dealer is North */
    font-weight: bold;
    padding-right: 16%;
    border-top: 3px dashed green;
    border-bottom: 3px solid green;
    border-left: 3px solid red;
    border-right: 3px solid red;
}
.e-ew-vul {  /* Dealer is East */
    font-weight: bold;
    padding-right: 16%;
    border-top: 3px solid green;
    border-bottom: 3px solid green;
    border-left: 3px solid red;
    border-right: 3px dashed red;
}
.w-ew-vul {  /* Dealer is West */
    font-weight: bold;
    padding-right: 16%;
    border-top: 3px solid green;
    border-bottom: 3px solid green;
    border-left: 3px dashed red;
    border-right: 3px solid red;
}
.s-ew-vul {  /* Dealer is South */
    font-weight: bold;
    padding-right: 16%;
    border-top: 3px solid green;
    border-bottom: 3px dashed green;
    border-left: 3px solid red;
    border-right: 3px solid red;
}

/*  None vulnerable */
.n-none-vul {   /* Dealer is North */
    font-weight: bold;
    padding-right: 16%;
    border-top: 3px dashed green;
    border-bottom: 3px solid green;
    border-left: 3px solid green;
    border-right: 3px solid green;
}
.e-none-vul {   /* Dealer is East */
    font-weight: bold;
    padding-right: 16%;
    border-top: 3px solid green;
    border-bottom: 3px solid green;
    border-left: 3px solid green;
    border-right: 3px dashed green;
}
.w-none-vul {   /* Dealer is West */
    font-weight: bold;
    padding-right: 16%;
    border-top: 3px solid green;
    border-bottom: 3px solid green;
    border-left: 3px dashed green;
    border-right: 3px solid green;
}
.s-none-vul {   /* Dealer is South */
    font-weight: bold;
    padding-right: 16%;
    border-top: 3px solid green;
    border-bottom: 3px dashed green;
    border-left: 3px solid green;
    border-right: 3px solid green;
}

/*  All vulnerable */
.n-all-vul {   /* Dealer is North */
    font-weight: bold;
    padding-right: 16%;
    border-top: 3px dashed red;
    border-bottom: 3px solid red;
    border-left: 3px solid red;
    border-right: 3px solid red;
}	
.e-all-vul {   /* Dealer is East */
    font-weight: bold;
    padding-right: 16%;
    border-top: 3px solid red;
    border-bottom: 3px solid red;
    border-left: 3px solid red;
    border-right: 3px dashed red;
}
.w-all-vul {   /* Dealer is West */
    font-weight: bold;
    padding-right: 16%;
    border-top: 3px solid red;
    border-bottom: 3px solid red;
    border-left: 3px dashed red;
    border-right: 3px solid red;
}
.s-all-vul {   /* Dealer is South */
    font-weight: bold;
    padding-right: 16%;
    border-top: 3px solid red;
    border-bottom: 3px dashed red;
    border-left: 3px solid red;
    border-right: 3px solid red;
}
.edit-result {  /* used in editResult */
    font-size: xx-large;
    font-weight: bold;
    padding-right: 16%;
    border-top: 3px solid blue;
    border-bottom: 3px solid blue;
    border-left: 3px solid blue;
    border-right: 3px solid blue;
}

.lead {
    font-size: large;
}

.larger-font {
    font-size: larger;
}

.loadbutt {  /* abcd */
    padding: 14px 6px;
    margin: 16px;
    font-size: larger;
    border-top: 3px solid blue;
    border-bottom: 3px solid blue;
    border-left: 3px solid blue;
    border-right: 3px solid blue;
}

.unfin {
    background-color: yellow;
}

.fin {
    background-color: white;
}

.rank-border {   /* used in showTour */
    font-weight: bold;
    padding-right: 16%;
    border-top: 3px solid black;
    border-bottom: 3px solid black;
    border-left: 3px solid black;
    border-right: 3px solid black;
}

.news { 
    color: red;
}

.self-center {
    align-self:center;
}

.fasfa-backspace {
    font-size:48px;
    color:red;
}

.full-width {
    width:100%;
}

.center-vertically {
    align-items: center;
}