html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; font-family: "Helvetica Neue","Helvetica","Arial","sans-serif"; font-size: 14px; } h1, h2 { color: #555555; font-size: 1.5em; font-weight: 500; margin: 0 5px 0 5px; } p { margin: 5px 0 5px 0; } .body-content { display: flex; flex-direction: column; flex-grow: 1; } .view-box { display: flex; flex-direction: column; flex-grow: 1; } #container { display: flex; flex-direction: column; flex-grow: 1; } #content { display: flex; flex-grow: 1; overflow: auto; } .block { display: block; } .col { display: flex; flex-direction: column; } .col-g { display: flex; flex-direction: column; flex-grow: 1; } .colItem { display: flex; flex-grow: 0; } .colItem-g { display: flex; flex-grow: 1; align-items: stretch; justify-content: flex-start; flex-basis: 30%; flex-direction: column; } .row { display: flex; flex-direction: row; } .row-g { display: flex; flex-direction: row; flex-grow: 1; } .rowItem-g { display: flex; flex-grow: 1; align-items: stretch; justify-content: flex-start; flex-basis: 30%; /*margin on both sides*/ margin: 2px 10px 2px 10px; flex-direction: column; } .rowItem-gc { display: flex; flex-grow: 1; align-items: stretch; justify-content: center; flex-basis: 30%; /*margin on both sides*/ margin: 2px 10px 2px 10px; flex-direction: column; } .rowItem-l { display: flex; flex-grow: 0; align-items: stretch; justify-content: flex-start; /*no right margin on a left item*/ margin: 2px 0 2px 10px; flex-direction: column; } .rowItem-r { display: flex; flex-grow: 0; align-items: stretch; justify-content: flex-end; /*no left margin on a right item*/ margin: 2px 10px 2px 0; flex-direction: column; } .headerItem-l { display: flex; flex-grow: 0; align-items: center; justify-content: flex-start; /*no right margin on a left item*/ margin: 1px 0 2px 10px; flex-direction: row; } .headerItem-g { display: flex; flex-grow: 1; align-items: center; justify-content: flex-start; flex-basis: 30%; /*margin on both sides*/ margin: 1px 10px 2px 10px; flex-direction: row; } .headerItem-r { display: flex; flex-grow: 0; align-items: center; justify-content: flex-end; /*no left margin on a right item*/ margin: 1px 10px 2px 0; flex-direction: row; } .topBuffer { margin-top: 10px; } .itemBuffer { margin: 2px 10px 2px 10px; } .rightBuffer { margin-right: 10px; } .button-sm { width: 90px; } .button-md { width: 119px; } .button-lg { width: 150px; } hr { background-color: gray; border-top-color: rgb(163, 208, 228); margin: 10px 0 0 0; } .bg-superior-red { background-color: #fa0000 } .font-superior-red { color: #fa0000 } .bg-superior-blue { background-color: #0000a0; } .font-superior-blue { color: #0000a0; } #globalBar { display: flex; justify-content: space-between; background-image: linear-gradient(to bottom, #6464ff, #6464ff, #0000a0); color: white; padding-right: 5px; padding-left: 5px; padding-bottom: 1px; white-space: nowrap; min-height: 40px; } #globalBar > div > .k-icon { color: gray; } #globalBar .company { display: flex; align-items: center; margin-left: 15px; margin-right: 15px; } #globalBar .homeImage { display: flex; align-items: center; } .container { display: flex; } .searchContainer { display: flex; flex-direction: column; flex-grow: 1; flex-basis: 800px; justify-content: center; } .searchName { display: flex; flex-grow: 1; line-height: 35px; } .sidePadding { display: flex; flex-basis: 100px; } .sidePadding-lg { display: flex; flex-basis: 200px; } .favoritesStar { display: flex; align-items: center; margin-left: 5px; } .groupBox { border: 2px solid #0000a0; border-radius: 5px; width: 850px; margin: auto; background-color: #f5f5f5; padding-left: 25px; padding-right: 25px; } .groupBox .row div { padding: 5px; } .groupBox .footer.row { margin-bottom: 10px; } .groupBox .footer div { padding: 0; } .groupBox .footer hr { margin-top: 5px; } #header { box-shadow: 0 2px 2px #666666; padding: 2px 3px 3px 3px; margin-bottom: 10px; background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 50%, #e7e7e7 95%, #666666 100%); min-height: 33px; } .utilError.k-window-content.k-dialog-content, .utilWarning.k-window-content.k-dialog-content { /*padding: 0;*/ width: 800px; } .datePicker-width { width: 120px; } .bottomPadding { padding: 2px 10px 10px 10px; } .note { font-style: italic; color: gray; } .overflow { overflow: auto; }