* { box-sizing: border-box; } body{ background-color: #4D5157; } h1{ color: #CD001A; font-weight: bold; } .moveOn{ display: inline-block; border: none; padding: 6px 12px; margin-botton: 0; font-size: 1rem; font-weight: normal; text-align: center; cursor: pointer; border-radius: 4px; background-color: #4BB543; color: white; } button:disabled{ opacity: 0.5; cursor: not-allowed; } /* Modal Stuff */ .avatar { border-radius: 20px; width: 100%; max-width: 15rem; } .modalHeaderWrapper{ text-align: center; margin: 0; width: 100%; } .closeModalButton { border-radius: 50px; } .modalButton{ display: inline-block; padding: 6px 12px; margin-left: 30px; background-color: rgba(0,136,169,1); border: none; border-radius: 50px; cursor: pointer; transition: all 0.3 ease 0; font-size: 1rem; } .modalButton:hover{ background-color: rgba(0,136,169,0.8); } /* Input Box styles */ .messageBox{ color: #212121; } .subBtn{ display: inline-block; border: none; padding: 3px 50px; margin-botton: 0; margin-top: 1rem; font-size: 1.25rem; font-weight: normal; text-align: center; cursor: pointer; border-radius: 2px; color: white; background-color: #9D8C7C; } .subDisabled{ cursor: not-allowed; } /* Adding classes */ .selected { background-color: #ECAC76 !important; } .doneV{ /*background-color: #284F8F;*/ background-color: #C5E17A; } .doneH{ background-color: #C5E17A; } .done{ background-color: green; } /* Main styles*/ .main{ display: flex; justify-content: center; } .left { margin: 10px; width: 35%; font-size: .8rem; padding: 1rem; margin: 0; } .left strong{ font-size: 1rem; } .tableWrapper { width: 65%; } table{ margin: 10px ; } td { border: 4px solid white; width: 3.5rem; font-weight: bold; } /* td { display: block; float: left; border: 2px solid white; width: 5%; padding-bottom: 5%; } td span { position: absolute} table { display: block; width: 100%; } tr { display: block; width: 100%; } tbody { display: block; width: 100%; } */