div.greenTable { font-family: Georgia, serif; border: 6px solid #24943A; background-color: #D4EED1; width: 100%; text-align: center; } .divTable.greenTable .divTableCell, .divTable.greenTable .divTableHead { border: 1px solid #24943A; padding: 3px 2px; } .divTable.greenTable .divTableBody .divTableCell { font-size: 13px; } .divTable.greenTable .divTableHeading { background: #24943A; background: -moz-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%); background: -webkit-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%); background: linear-gradient(to bottom, #5baf6b 0%, #3a9e4d 66%, #24943A 100%); border-bottom: 0px solid #444444; } .divTable.greenTable .divTableHeading .divTableHead { font-size: 19px; font-weight: bold; color: #F0F0F0; text-align: center; border-left: 2px solid #24943A; } .divTable.greenTable .divTableHeading .divTableHead:first-child { border-left: none; } .greenTable .tableFootStyle { font-size: 13px; font-weight: bold; color: #F0F0F0; background: #24943A; background: -moz-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%); background: -webkit-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%); background: linear-gradient(to bottom, #5baf6b 0%, #3a9e4d 66%, #24943A 100%); border-top: 1px solid #24943A; } .greenTable .tableFootStyle { font-size: 13px; } .greenTable .tableFootStyle .links { text-align: right; } .greenTable .tableFootStyle .links a{ display: inline-block; background: #FFFFFF; color: #24943A; padding: 2px 8px; border-radius: 5px; } .greenTable.outerTableFooter { border-top: none; } .greenTable.outerTableFooter .tableFootStyle { padding: 3px 5px; } .divTable{ display: table; } .divTableRow { display: table-row; } .divTableHeading { display: table-row;} .divTableCell, .divTableHead { display: table-cell;} .divTableFoot { display: table-footer-group;} .divTableBody { display: table-row-group;} label { height: 21px; line-height: 21px; font-size: 14px; color: black; flex: 0 1 auto; } input { margin-left: 20px; margin-right: 20px; flex: 1; } select { margin-left: 20px; margin-right: 20px; } html, body { height: 100%; width: 100%; margin: 0; } #outer { display: flex; flex-flow: column; height: 100%; } #inner_fixed { height: 200px; background-color: rgb(188, 188, 188); padding: 20px; } .inner_remaining { background-color: #eee; flex-grow : 1; height: auto; } /*-----Loader*/ .lds-roller { display: inline-block; position: relative; width: 64px; height: 64px; } .lds-roller div { animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 32px 32px; } .lds-roller div:after { content: " "; display: block; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: blue; margin: -3px 0 0 -3px; } .lds-roller div:nth-child(1) { animation-delay: -0.036s; } .lds-roller div:nth-child(1):after { top: 50px; left: 50px; } .lds-roller div:nth-child(2) { animation-delay: -0.072s; } .lds-roller div:nth-child(2):after { top: 54px; left: 45px; } .lds-roller div:nth-child(3) { animation-delay: -0.108s; } .lds-roller div:nth-child(3):after { top: 57px; left: 39px; } .lds-roller div:nth-child(4) { animation-delay: -0.144s; } .lds-roller div:nth-child(4):after { top: 58px; left: 32px; } .lds-roller div:nth-child(5) { animation-delay: -0.18s; } .lds-roller div:nth-child(5):after { top: 57px; left: 25px; } .lds-roller div:nth-child(6) { animation-delay: -0.216s; } .lds-roller div:nth-child(6):after { top: 54px; left: 19px; } .lds-roller div:nth-child(7) { animation-delay: -0.252s; } .lds-roller div:nth-child(7):after { top: 50px; left: 14px; } .lds-roller div:nth-child(8) { animation-delay: -0.288s; } .lds-roller div:nth-child(8):after { top: 45px; left: 10px; } @keyframes lds-roller { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }