#tebriks { text-align: center; font-size: larger; font-weight: 800; color: blue; background-color: coral; padding: 3px; border: 1px solid white; } .innot { text-align: center; } .guess-table { width: 100%; display: table; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; } @media screen and (max-device-width: 1000px) { .guess-table { display: block; overflow-x: auto; } } .guess-th { border: aliceblue 3px solid; } .guess-td { text-align: center; border: aliceblue 1px solid; } .type0 { background-color: red; font-weight: 800; } .type1 { background-color: orange; color: darkblue; font-weight: 500; } .type2 { background-color: green; } .type10 { background-color: red; font-weight: 800; } .type10::after { content: "👇" } .type12 { background-color: red; font-weight: 800; } .type12::after { content: "👆" } /* */ /* AUTOCOMPLETE */ /* */ .autocomplete { /*the container must be positioned relative:*/ position: relative; display: inline-block; box-sizing: border-box; } .autocomplete-items { box-sizing: border-box; position: absolute; border: 2px solid #10161d; border-bottom: none; border-top: none; z-index: 99; /*position the autocomplete items to be the same width as the container:*/ top: 100%; left: 0; right: 0; } .autocomplete-items div { padding: 10px; cursor: pointer; background-color: #96939B; border-bottom: 1px solid #10161d; } .autocomplete-items div:hover { /*when hovering an item:*/ background-color: #00ADB5; color: #e8e8e8; } .autocomplete-active { /*when navigating through the items using the arrow keys:*/ background-color: #00ADB5 !important; color: #e8e8e8; }