body{ font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; min-height: 100vh; margin: 0; } /** * Make body at least 100% height * You can also use a combination * of height: 100% in and * min-height: 100% in . */ .holy-grail { min-height: 100vh; } /** * Let's do a column distribution * (mobile first) * flex value is 1 1 auto to make * body skrinkable and extensible */ .holy-grail, .holy-grail-body { display: flex; flex: 1 1 auto; flex-direction: column; } /** * Content body item is made * extensible too. */ .holy-grail-content { flex: 1 1 auto; } /** * Put the first sidebar before content. * If you need sidebar to be before content * only in big screen put those 3 next lines * in @media block. */ .holy-grail-sidebar-1 { order: -1; } /** * Let's introduce bigger screen */ @media (min-width: 768px) { /** * Body items are now side by side */ .holy-grail-body { flex-direction: row; } /** * Sidebars have a basic 260 width * and are not really flexible anymore */ .hg-sidebar { flex: 0 0 200px; } .hg-sidebar-small { flex: 0 0 100px; } } .opmanagerColumn { flex: 1 1 1; width: 100%; padding: 1rem; height: auto; overflow: auto } .left-side { flex: 1 1 1; width: 70%; padding: 1rem; } .left-side-2 { flex: 1 1 1; width: 40%; padding: 1rem; } .right-side { flex: 1 1 1; width: 30%; padding: 1rem; margin-right: 25px; } .right-side-2 { flex: 1 1 1; width: 20%; padding: 1rem; margin-right: 5px; } .left-side-3 { flex: 1 1 1; width: 33%; padding: 1rem; } .left-side-4 { flex: 1 1 1; width: 15%; padding: 1rem; } .right-side-3 { flex: 1 1 1; width: 33%; padding: 1rem; } .middle-split-3{ flex: 1 1 1; width: 33%; padding: 1rem; } .middle-split-4{ flex: 1 1 1; width: 50%; padding: 1rem; } .login-form { margin: 0; display: flex; height: 100%; align-items: center; justify-content: center; flex-direction: column; width: 100% } .form-group{ text-align:center; padding-top: 10px; } .login-form-group{ text-align:center; padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; box-shadow: inset 0 -1px 0 0 #cccccc, inset 0 1px 0 0 #cccccc; background-color: #D1D1D1; } .login-form-group label{ float: left; font-family: Roboto; font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; } .form-control { padding-left: 5px; } .form-textbox{ width: 300px; height: 30px; background-color: #ffffff; } .dropboxLogButton{ float: right; } .button-color-CG { text-align:center; vertical-align: middle; padding-top: 7px; padding-bottom: 7px; padding-left: 10px; padding-bottom: 7px; border: none; background-color: #f78f1e; color: #ffffff; } .danger { text-align:center; vertical-align: middle; height: 30px; padding-top: 7px; padding-bottom: 10px; padding-bottom: 10px; border: none; background-color: #f44336; color: #ffffff; } .danger:hover { text-align:center; vertical-align: middle; height: 30px; padding-top: 7px; padding-bottom: 10px; padding-bottom: 10px; border: none; background: #da190b; color: #ffffff; } .forgot_link { padding-right: 2px; height: 18px; font-family: Roboto; font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.29; letter-spacing: 0.25px; text-align: center; color: #f78f1e; } .table-main{ padding-top: 10px; margin-top: 10px; width: 100%; border-collapse: collapse; white-space: normal!important; } .table-header{ width: 125px; height: 25px; font-family: Roboto; font-size: 12px; font-weight: 400; font-style: normal; font-stretch: normal; line-height: 1.5; letter-spacing: 0.25px; color: white; background-color: #f78f1e; text-align: left; padding-bottom: 5px; } .table-header th { text-align: left; } .table-row { width: 125px; height: 35px; font-family: Roboto; font-size: 12px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: .75; letter-spacing: 0.25px; text-align: center; } .table-row-left { width: 125px; height: 25px; margin-top: 5px; padding-top: 5px; font-family: Roboto; font-size: 12px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: .85; letter-spacing: 0.25px; text-align: left; } .table-main tr:nth-child(even) { background-color: #F1F1F1; } .dev_tenant_list_main{ margin-left: 5px; margin-right: 5px; display: flex; } .sales_info_left{ display: flex; flex: 0 1 50%; min-height: 100%; max-width: 30%; padding: .5em; } .sales_info_right{ font-family: Roboto; display: flex; margin-left: 10px; flex: 0 1 80%; height: 100%; max-width: 100%; flex-wrap: wrap; align-items: flex-start; } .health-info-content{ font-family: Roboto; font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.25; letter-spacing: 0.25px; color: #666666; } .statusIcon a{ display: none; } .statusIcon a:hover{ display: block; } .dev_tenant_list_content_left{ display: flex; flex: 0 1 50%; min-height: 100%; max-width: 40%; padding: .5em; } .devTenantScrollable{ max-height: 900px; overflow: auto; } .dev_tenant_list_content_right{ font-family: Roboto; display: flex; margin-left: 10px; flex: 0 1 80%; height: 100%; max-width: 100%; flex-wrap: wrap; align-items: flex-start; } .rectangle_tenant_info { font-size: 14px; font-family: 'Roboto', sans-serif; margin-top: 10px; padding: 5px; width: 100% ; height: 100px; box-shadow: inset 0 -1px 0 0 #cccccc, inset 0 1px 0 0 #cccccc; background-color: #f1f1f1; padding-bottom: 15px; align-content: top; } .deployment-rectangle { font-family: Roboto; margin-right: 15px; padding: 15px; padding-right: 10px; width: 100%; height: 85px; box-shadow: inset 0 -1px 0 0 #cccccc, inset 0 1px 0 0 #cccccc; background-color: #f1f1f1; text-align: center; } .deployment-status-title{ width: 477px; height: 20px; font-family: Roboto; font-size: 16px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.25; letter-spacing: 0.25px; color: #666666; } .deployment-status-right{ width: 477px; height: 20px; float:right; font-family: Roboto; font-size: 16px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.25; letter-spacing: 0.25px; color: #666666; } .deployment-status-title-heavy { width: 477px; height: 20px; font-family: Roboto; font-size: 16px; font-weight: 700; font-style: normal; font-stretch: normal; line-height: 1.25; letter-spacing: 0.25px; color: #4d4d4d; } .right-side-3-sec{ margin-left: 25px; } .tenant_table1{ width: 100%; align-items: left; margin-right: auto; text-align: left; border-spacing: 0; } .tenant_table1-header { height: 16px; font-family: Roboto; font-size: 14px; font-weight: 700; font-style: normal; font-stretch: normal; line-height: 1.4; letter-spacing: 0.33px; color: white; background: #f78f1e; } .tenant_table1-header a{ font-family: Roboto; color: white; font-size: 11px; } .tenant_table1-row{ height: 16px; font-family: Roboto; font-size: 10px; font-style: normal; font-stretch: normal; line-height: 1.4; letter-spacing: 0.33px; text-align: center; } .tenant_table1-row-left{ height: 16px; font-family: Roboto; font-size: 10px; font-style: normal; font-stretch: normal; line-height: 1.4; letter-spacing: 0.33px; text-align: left; } .task-success { width: 125px; height: 25px; font-family: 'Roboto', sans-serif; font-weight: 700; font-style: normal; font-stretch: normal; line-height: 1.33; letter-spacing: 0.25px; color: green; } .task-pending { width: 125px; height: 25px; font-family: 'Roboto', sans-serif; font-weight: 700; font-style: normal; font-stretch: normal; line-height: 1.33; letter-spacing: 0.25px; color: #f78f1e; } .task-warning { width: 125px; height: 25px; font-family: 'Roboto', sans-serif; font-weight: 700; font-style: normal; font-stretch: normal; line-height: 1.33; letter-spacing: 0.25px; color: #f78f1e; } .task-failed { width: 125px; height: 25px; font-family: 'Roboto', sans-serif; font-weight: 700; font-style: normal; font-stretch: normal; line-height: 1.33; letter-spacing: 0.25px; color: red; } .msg-success{ font-family: 'Roboto', sans-serif; font-weight: 700; font-style: normal; font-stretch: normal; line-height: 1.33; letter-spacing: 0.25px; color: green; } .msg-fail{ font-family: 'Roboto', sans-serif; font-weight: 700; font-style: normal; font-stretch: normal; line-height: 1.33; letter-spacing: 0.25px; color: red; } .migration-p{ font-family: 'Roboto', sans-serif; font-size: 12px; font-style: normal; font-stretch: normal; line-height: 1.33; letter-spacing: 0.25px; } .sidebar-rectangle{ font-family: Roboto; margin-right: 5px; margin-left: 25px; padding: 15px; padding-right: 25px; padding-top: 50px; width: 100%; min-height: 100vh; box-shadow: inset 0 -1px 0 0 #cccccc, inset 0 1px 0 0 #cccccc; background-color: #f1f1f1; text-align: left; align-items: left; } .sidebar-Title{ width: 477px; height: 20px; font-family: Roboto; font-size: 16px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.25; letter-spacing: 0.25px; color: #666666; } .sidebar-Title-sub{ width: 477px; height: 20px; font-family: Roboto; font-size: 12px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.25; letter-spacing: 0.25px; color: #666666; }