body, html { margin: 0; /*overflow: hidden;*/ /* HP MOD: disable for toolbar & scrolling */ height: 100%; font-family: Montserrat, Helvetica, 'Open Sans', Arial, sans-serif; font-size: 11pt; } .progress-bar { background-color: #BF1E2D; color: #BF1E2D; } body { /*overflow: auto;*/ /* HP MOD: disable for toolbar & scrolling */ } .tile { width: 100%; display: inline-block; box-sizing: border-box; background: rgba(255,255,255,0.8); /*#5133ab;*/ color: #000; padding: 20px; margin-bottom: 10px; min-height: 128px; } .tile h1, .tile h2, .tile h3, .tile h4, .tile a, .tile p { color: #000; } .tile:hover { background-color: #BF1E2D; color: #FFF; } a.tile { text-decoration: none; } .tile h3 { margin-top: 0px; } .tile h5 { font-style: italic; } .tile.tile1, .tile.tile2, .tile.tile3, .tile.tile4, .tile.tile5 { color: #fff; } .tile.tile1 { background: rgba(170,0,255,0.4); /*#5133ab;*/ } .tile.tile2 { background: rgba(255,109,0,0.4); } .tile.tile3 { background: rgba(48,79,254,0.4); } .tile.tile4 { background: rgba(0,191,165,0.4); } .tile.tile5 { background: rgba(0,191,165,0.4); } /* Start of Kendo-nova-theme-custom*/ .k-grid td { padding: 6px 1.286em; } /* End of Kendo-nova-theme-custom*/ /* [Start] bootstrap multiselect customization */ .multiselect-container.dropdown-menu { max-height: 250px; overflow-y: auto; overflow-x: hidden; } /* [End] bootstrap multiselect customization */ /* Horizontal - Vertical Center => Src: https://stackoverflow.com/questions/22196587/how-to-center-align-vertically-the-container-in-bootstrap */ .body-container { position: relative; height: 100%; width: 100%; } .container-center, .body-container .child-container.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* within mobile viewport */ @media only screen and (max-device-width : 480px) { .container-center { position: initial; transform: initial; } } /* Horizontal - Vertical Center => Src: https://jsfiddle.net/y69tbpk2/3/ => NOT WORK */ .body-container1 { display: table; position: absolute; height: 100%; width: 100%; } .body-container1 .child-container.center { display: table-cell; vertical-align: middle; } /* Horizontal - Vertical Center => Src: https://stackoverflow.com/questions/22196587/how-to-center-align-vertically-the-container-in-bootstrap => NOT WORK */ .body-container2 { height: 100%; margin: 0; padding: 0; } .root-container { height: 100%; display: table; width: 100%; padding: 0; } .root-container .row-fluid { height: 100%; display: table-cell; vertical-align: middle; } .root-container .centering { float: none; margin: 0 auto; } /* Horizontal - Vertical Center => Src: http://jsfiddle.net/hashem/ut5sbqvz/ => TEMPORARY ACCEPTED */ .body-container3 { height: 100%; } .body-container3 .child-container.vertical-center { margin-bottom: 0; /* Remove the default bottom margin of .jumbotron */ } .body-container3 .vertical-center { min-height: 100%; /* Fallback for vh unit */ min-height: 100vh; /* You might also want to use 'height' property instead. Note that for percentage values of 'height' or 'min-height' properties, the 'height' of the parent element should be specified explicitly. In this case the parent of '.vertical-center' is the element */ /* Make it a flex container */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* Align the bootstrap's container vertically */ -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; /* In legacy web browsers such as Firefox 9 we need to specify the width of the flex container */ width: 100%; /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers hence the bootstrap's container won't be aligned to the center anymore. Therefore, we should use the following declarations to get it centered again */ -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } /*#region Logo customization*/ .navbar-header a.navbar-brand img, .header .nav-logo a img { display: inline-block; width: auto; height: 55px; transition: all 0.27s cubic-bezier(0, 0, 0.58, 1); -webkit-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1); -moz-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1); -o-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1); -ms-transition: all 0.27s cubic-bezier(0, 0, 0.58, 1); } .footer-default .widget img.img-responsive { width: 140px; } /*#endregion*/ /* #region New design chat containers */ .conversation-body > div, .conversation-body > .sub-thread-tab > div { position: relative; margin: 6px 0; } .conversation-body > div > span, .conversation-body > .sub-thread-tab > div > span { display: flex; align-items: center; margin: 2px 0; } .conversation-body > div > span.top, .conversation-body > .sub-thread-tab > div > span.top { align-items: baseline; } .conversation-body .message { padding: 6px 12px 7px; margin-right: 2px; line-height: 20px; max-width: calc(80% - 32px); white-space: pre-wrap; } .conversation-body .date-time { flex: 1; margin: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; font-size: 13px; color: #888; } .conversation-body > div.right > span, .conversation-body > .sub-thread-tab > div.right > span { flex-direction: row-reverse; } .conversation-body > div.right > .avatar, .conversation-body > .sub-thread-tab > div.right > .avatar { display: none; } .conversation-body > div.right .message, .conversation-body > .sub-thread-tab > div.right .message { border-radius: 16px 4px 4px 16px; background-color: #09f; color: #fff; } .conversation-body > div.right > span:first-of-type > .message, .conversation-body > .sub-thread-tab > span:first-of-type > .message { border-top-right-radius: 16px !important; } .conversation-body > div.right > span:last-of-type > .message, .conversation-body > .sub-thread-tab > div.right > span:last-of-type > .message { border-bottom-right-radius: 16px !important; } .conversation-body > div.right .date-time, .conversation-body > .sub-thread-tab > div.right .date-time { text-align: right; } .conversation-body > div:not(.right) > .avatar, .conversation-body > .sub-thread-tab > div:not(.right) > .avatar { position: absolute; left: 0; bottom: 0; font-size: 32px; } .conversation-body > div:not(.right), .conversation-body > .sub-thread-tab > div:not(.right) { padding-left: 36px; } .conversation-body > .sub-thread-tab:not(.right) { padding-left: unset !important; } .conversation-body > div:not(.right) .message, .conversation-body > .sub-thread-tab > div:not(.right) .message { border-radius: 4px 16px 16px 4px; background-color: #F1F0F0; color: #000; } .conversation-body > div:not(.right) > span:first-of-type > .message, .conversation-body > .sub-thread-tab > div:not(.right) > span:first-of-type > .message { border-top-left-radius: 16px !important; } .conversation-body > div:not(.right) > span:last-of-type > .message, .conversation-body > .sub-thread-tab > div:not(.right) > span:last-of-type > .message { border-bottom-left-radius: 16px !important; } #PublicNotes .modal-footer { padding: 15px; } .conversation-body.form-control[disabled], .conversation-body.form-control[readonly], .conversation-body.fieldset[disabled] .form-control { background-color: #fff } .conversation-body .tooltip { z-index: 1000; } /* #endregion */