//////////////////////////////////////////////////////////////////////
// Concat from original source file: widget_package/fgWidgets.style.less
//////////////////////////////////////////////////////////////////////
// This file is prepended and made available to all packaged .less files in common, widgets, and site styles.
/**************************************************
Theme Variables
Do not edit color values here.
Default colors are specified in common.config.json.
The color values here will have no effect.
***************************************************/
@PrimaryAccentColor: #a2a2a2;
@PrimaryAccentFontColor: #fff;
@MenuBackgroundColorPrimary: #3d3d3d;
@MenuBackgroundColorSecondary: #313131;
@MenuSelectedPageBackgroundColor: #2f2f2f;
@MenuSelectedPageAccentColor: #a3a3a3;
@MenuIconColor: #fff;
@MenuFontColor: #fff;
@ScrollbarColor: #a3a3a3;
@ScrollbarBackgroundColor: #3d3d3d;
@backgroundColor: #fff;
@BackgroundOverlayColor: rgba(255,255,255,0.8);
@BackgroundTextFontColor: #3d3d3d;
@CardTextFontColor: #3d3d3d;
@CardBackgroundColor: rgb(255,255,255);
@LineBreakColor: #a1a1a1;
@BackgroundOddItemColor: #eeeeee;
@BackgroundEvenItemColor: #f9f9f9;
@BackgroundSelectedItemColor: #fff;
@GoodColor: #aeaeae;
@BadColor: #858585;
@NeutralExpenseColor: #555555;
@TextOverGoodColor: #3d3d3d;
@TextOverBadColor: #fff;
@ChartRangeStartColor: hsl(0,0%,15%);
@ChartRangeEndColor: hsl(0,0%,93%);
@BackgroundUnselectedGraphExtentOnBackgroundColor: rgb(230,230,230);
@BackgroundSelectedGraphExtentOnBackgroundColor: rgb(255,255,255);
@BackgroundUnselectedGraphExtentOnCardColor: rgb(243,243,243);
@BackgroundSelectedGraphExtentOnCardColor: rgb(240,240,240);
@SliderSVGBarColor: #fff;
@SliderSVGBackgroundColor: #333;
@RetirementGoalColor: #353535;
@EducationGoalColor: #858585;
@MajorPurchaseGoalColor: #484848;
@OverlayColor: rgba(0,0,0,0.7);
@HeadingFontColor: #fff;
@BodyFontColor: #fff;
@LinkColor: #fff;
@RightSidebarBackgroundColor: #3d3d3d;
@RightSidebarFontColor: #fff;
@LogoBackgroundColor: #3d3d3d;
@GoodColorGradientExtent: rgb(40, 40, 40);
@NeutralExpenseColorGradientExtent: rgb(232, 232, 232);
@IncomeTransactionGradientStart: rgb(82, 82, 82);
@IncomeTransactionGradientEnd: rgb(193, 193, 193);
@ExpenseTransactionGradientStart: rgb(7, 7, 7);
@ExpenseTransactionGradientEnd: rgb(143, 143, 143);
@CardBackgroundColorTransparent: rgba(250, 250, 250, 0.8);
@backgroundUrl: "''";
/****************************************************************
Other
Here you can put any other mixins or variables to be made available
in all other stylesheets.
*****************************************************************/
@FontFamilyPrimary: 'Roboto', sans-serif;
@FontFamilySecondary: 'Roboto', sans-serif;
// ! OPEN SANS HAS 300 / 400 / 600 / 700 / 800
// Content type styles
.TypeDisplay4 {
font-family: @FontFamilyPrimary;
font-size: 56px;
font-weight: 300;
}
.TypeDisplay3 {
font-family: @FontFamilyPrimary;
font-size: 48px;
font-weight: 300;
}
.TypeDisplay2 {
font-family: @FontFamilyPrimary;
font-size: 42px;
font-weight: 300;
}
.TypeDisplay1 {
font-family: @FontFamilyPrimary;
font-size: 36px;
font-weight: 300;
}
.TypeHeadlineBold {
font-family: @FontFamilyPrimary;
font-size: 24px;
font-weight: 600;
}
.TypeHeadline {
font-family: @FontFamilyPrimary;
font-size: 24px;
font-weight: 400;
}
.TypeTitle {
font-family: @FontFamilyPrimary;
font-size: 18px;
font-weight: 400;
}
.TypeSubheading {
font-family: @FontFamilyPrimary;
font-size: 16px;
font-weight: 400;
}
.TypeBody2 {
font-family: @FontFamilyPrimary;
font-size: 14px;
font-weight: 600;
}
.TypeBody1 {
font-family: @FontFamilyPrimary;
font-size: 14px;
font-weight: 400;
}
.TypeCaption {
font-family: @FontFamilyPrimary;
font-size: 12px;
font-weight: 400;
}
.TypeLabel {
font-family: @FontFamilyPrimary;
font-size: 12px;
font-weight: 400;
}
.TypeHyperlink {
font-family: @FontFamilyPrimary;
font-size: 14px;
font-weight: 400;
text-decoration: underline;
}
.TypeButton {
font-family: @FontFamilyPrimary;
font-size: 14px;
font-weight: 700;
}
// Menu type styles
.TypeMenuPageCategory {
font-family: @FontFamilyPrimary;
font-size: 16px;
font-weight: 400;
}
.TypeMenuPage {
font-family: @FontFamilyPrimary;
font-size: 15px;
font-weight: 300;
}
.TypeMenuHeading {
font-family: @FontFamilyPrimary;
font-size: 24px;
font-weight: 300;
}
.TypeMenuBody {
font-family: @FontFamilyPrimary;
font-size: 14px;
font-weight: 300;
}
.TypeMenuCaption {
font-family: @FontFamilyPrimary;
font-size: 12px;
font-weight: 300;
}
.TypeMenuHyperlink {
font-family: @FontFamilyPrimary;
font-size: 12px;
font-weight: 300;
text-decoration: underline;
}
.IconInvalid {
content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDIwMCAyMDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KCjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTEwMCwyMDBDNDQuOSwyMDAsMCwxNTUuMSwwLDEwMFM0NC45LDAsMTAwLDBzMTAwLDQ0LjksMTAwLDEwMFMxNTUuMSwyMDAsMTAwLDIwMHoiIHN0eWxlPSJmaWxsOiNlZDFjMjQiLz4KPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTAwLDEyMi42Yy03LjIsMC0xMy01LjgtMTMtMTNWNTIuOGMwLTcuMiw1LjgtMTMsMTMtMTNzMTMsNS44LDEzLDEzdjU2LjhDMTEzLDExNi44LDEwNy4yLDEyMi42LDEwMCwxMjIuNnoiIHN0eWxlPSJmaWxsOiNmZmYiLz4KPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTAwLDE2MS40Yy0zLjQsMC02LjgtMS4zLTkuMi0zLjhjLTIuMy0yLjMtMy44LTUuNy0zLjgtOS4xYzAtMy41LDEuNC02LjksMy44LTkuMmM0LjktNC45LDEzLjYtNC44LDE4LjQsMCAgYzIuMywyLjMsMy44LDUuNywzLjgsOS4yYzAsMy40LTEuNCw2LjctMy44LDkuMUMxMDYuNywxNjAuMSwxMDMuNSwxNjEuNCwxMDAsMTYxLjR6IiBzdHlsZT0iZmlsbDogI2ZmZiIvPgo8L3N2Zz4=');
width: 16px;
height: 16px;
display: inline-block;
position: absolute;
}
.RvtBoxShadow {
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
/* ICON SVG BEFORE ENCODING
*/
.upload-vault-modal {
@media (min-width: 768px) {
.modal-dialog {
width: 750px;
}
}
.title-container {
.TypeHeadline;
margin: 15px;
}
.content-container {
position: relative;
margin: 15px;
.preview-container {
height: 260px;
line-height: 260px;
width: 33.3333%;
border: 1px solid @LineBreakColor;
border-radius: 3px;
display: inline-block;
img {
max-height: 248px;
max-width: 100%;
}
}
.file-info {
position: absolute;
width: 66.6666%;
display: inline-block;
padding-left: 15px;
.file-name-label,
label{
display: block;
.TypeLabel;
margin-bottom: 5px;
}
.file-upload {
position: relative;
width: 100%;
display: inline-block;
white-space: nowrap;
line-height: 30px;
height: 30px;
.file-name {
float: left;
width: 65%; // fallback for browsers that don't support calc()
width: calc(~"100% - 105px") !important;
overflow: hidden;
text-overflow: ellipsis;
}
.browse-button {
display: inline-block;
float: right;
width: 100px;
position: relative;
input[type=file] {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
font-size: 0;
width: 100%;
height: 100%;
opacity: 0;
}
}
}
.valid-file-types {
.TypeCaption;
margin-bottom: 10px;
}
.file-description {
height: 118px;
textarea {
width: 100%;
height: 100%;
float: left;
resize: none;
}
}
}
.buttons-container {
margin-top: 12px;
text-align: right;
.rvt-btn-300 {
min-width: 90px;
}
}
}
}
@media (max-width: 767px){
.upload-vault-modal {
.content-container {
.preview-container {
width: 100%;
line-height: inherit;
margin-bottom: 10px;
}
.file-info {
width: 100%;
position:relative;
padding:0;
.file-name {
width:55%;
}
}
}
}
}
.fg-generic-modal-title-container {
margin: 10px;
font-size: 130%;
}
.fg-generic-modal-container {
.modal-footer{
border-color:@LineBreakColor;
}
.modal-header{
border-color:@LineBreakColor;
}
}
.fg-generic-modal-title-container {
margin: 0;
.TypeHeadline;
}
.fg-generic-modal-message-container {
margin: 0;
.TypeBody1;
}
.fg-generic-modal-buttons-container {
margin: 0;
.left-buttons{
text-align: left;
}
.right-buttons{
text-align: right;
}
button {
margin: 0 0 0 15px;
}
}
.fg-generic-modal-button-container {
margin-left: 10px;
}
.legal-modal {
.modal-dialog {
height: auto;
.modal-content {
max-height: inherit;
font-family: "Times New Roman", serif;
font-size: 14px;
line-height: 32px;
h1 {
font-family: Arial, sans-serif;
margin-top: 20px;
font-size: 28px;
@media(min-width: 992px){
margin-top: 40px;
}
}
h2 {
font-weight: bold;
font-size: 18px;
}
h3 {
font-weight: bold;
font-size: 14px;
}
ol {
padding-left: 20px;
}
a {
word-break: break-all;
}
}
}
@media (min-width: 400px){
.modal-dialog {
min-width: 350px;
}
}
@media (min-width: 768px) {
.modal-dialog {
width: 740px;
}
}
@media (min-width: 992px) {
.modal-dialog {
width: 900px;
}
}
}
.fg-legal-modal-title-container {
font-size: 130%;
width: 90%;
margin: 0 auto;
padding: 20px 0;
}
.fg-legal-modal-description-container {
font-size: 115%;
width: 90%;
margin: 0 auto;
}
.fg-legal-modal-message-container {
font-size: 115%;
width: 90%;
margin: 20px auto 0;
}
.fg-legal-modal-buttons-container {
text-align: right;
width: 90%;
margin: 0 auto;
padding: 10px 0;
div {
text-align: right;
}
}
.fg-legal-modal-button-container {
margin-left: 10px;
min-width: 100px;
div {
text-align: right;
}
}
.large-dialog {
position: fixed;
max-height: 100%;
height: 100%;
.modal-body {
height: 450px;
}
}
.input-btn-group {
fg-motivation-button {
display: table-cell;
}
.rvt-dropdown {
display: inline-block;
}
}
.motivation-dropdown {
width: 200px;
text-align: left;
}
.motivation-comment-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: @CardBackgroundColor;
z-index: 2;
box-shadow: 0 0 50px rgba(0,0,0,0.35);
padding-left: 200px;
.motivation-form {
text-align: center;
> * {
text-align: right;
}
}
&.panel-group {
margin: 0;
}
.motivation-box {
height: 200px;
transition: height 400ms ease;
max-width: 1000px;
min-width: auto;
margin: 0 auto !important;
&.collapsed {
overflow: hidden;
height: 0;
transition: height 400ms ease;
}
.display-id {
color: #909090;
}
}
textarea.form-control {
width: 100%;
height: 54px;
}
.save {
margin: 5px 0 15px;
}
.input-btn-group {
margin-top: 15px;
@media (max-width: 992px) {
margin: 0 0 5px 0;
}
}
.comments-title {
text-align: left;
h3 {
.TypeSubheading;
margin: 25px 0 15px 0;
@media (max-width: 992px) {
margin-top: 15px;
}
}
}
.motivation-select {
display: inline-block;
}
.comments-disclaimer[class*="col-"] {
padding-top: 5px;
.TypeCaption;
}
}
.global-motivation-box {
z-index: 1000;
}
fg-motivation-button {
.rvt-btn-300 {
vertical-align: top;
[class^="icon-"] {
margin-left: 0;
}
}
}
.fg-document-list {
background-color: @CardBackgroundColor;
.header {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
.TypeTitle;
margin-bottom: 15px;
}
.loading-spinner {
text-align: center;
padding: 20px;
position: relative;
}
.document-table-wrapper {
.document-table {
width: 100%;
display: table;
.TypeCaption;
.sort-order {
position: relative;
height: 0;
width: 0;
vertical-align: top;
display: inline-block;
color:fade(@CardTextFontColor, 30%);
&.sort-focus{
color:@CardTextFontColor
}
&:after {
content: ' \25b2';
position: absolute;
top: -1px;
left: 4px;
}
&.reverse:after {
content: ' \25bc';
}
}
input[type="checkbox"].fg-checkbox {
display: inline-block;
visibility: hidden;
height: 16px;
width: 16px;
margin: 0;
&:checked + label {
background-color: transparent;
}
+ label {
cursor: pointer;
height: 16px;
width: 16px;
top: 10px;
left: 50%;
margin-top: -8px;
margin-left: -8px;
background-color: transparent;
border: 1px solid @LineBreakColor;
&::after {
height: 5px;
width: 8px;
top: 1px;
left: 2px;
}
}
}
.table-header {
cursor: pointer;
white-space: nowrap;
border-bottom: 1px solid @LineBreakColor;
margin-bottom: 5px;
line-height: 18px;
.TypeLabel;
user-select: none;
-webkit-user-select: none;
}
.document-row-wrapper {
display: table-row;
width: 100%;
&.active {
color: @CardTextFontColor;
.document-row {
position: relative;
&:before {
content: " ";
width: 4px;
background: @PrimaryAccentColor;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
div {
span {
&.file-name-content {
white-space: normal;
word-break: break-all;
}
&.file-description-content {
white-space: normal;
word-break: break-word;
}
}
}
}
.document-actions {
position: relative;
display: block;
&:before {
content: " ";
width: 4px;
background: @PrimaryAccentColor;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.file-description{
display:none;
}
label {
.TypeLabel;
}
textarea.edit-description {
height: 100%;
width: 100%;
resize: none;
}
a {
text-decoration: none;
}
}
}
.document-actions {
padding: 0 15px 15px;
display: none;
.preview-image {
max-height: 260px;
max-width: 100%;
height: auto;
width: auto;
display: block;
margin-bottom: 30px;
}
.no-preview{
.TypeCaption;
display: block;
margin-bottom: 10px;
}
.download-btn.disabled {
cursor: default;
opacity: 0.5;
}
.delete-btn:disabled {
cursor: default;
}
}
.table-header,
.document-row {
padding: 12px 0;
display: block;
width: 100%;
.document-actions {
display: none;
}
div {
display: table-cell;
position: relative;
vertical-align: top;
span {
padding-right: 10px;
&.file-description-content {
position: absolute;
display: block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&.file-description-spacer {
height: 0;
overflow: hidden;
opacity: 0;
display: block;
word-break: break-all;
}
&.file-name-content {
display: block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 140px;
}
}
&.file-select {
text-overflow: clip;
span {
width: 40px;
display: block;
}
}
&.file-name {
}
&.file-description {
width: 100%;
}
&.file-date{
span{
width: 80px;
display: inline-block;
}
}
}
}
}
.table-body {
width: 100%;
display: inherit;
.no-documents {
text-align: center;
padding: 14px 30px 30px;
white-space: normal;
background-color: @CardBackgroundColor !important;
}
.document-row-wrapper {
&:nth-child(even) {
background-color: @CardBackgroundColor;
}
&:nth-child(odd) {
background-color: #f5f5f5;
}
.document-row {
cursor: pointer;
.TypeBody1;
}
}
}
}
}
}
@media (max-width:767px){
.document-row-wrapper {
&.active{
.file-name{
.file-name-content {
position: relative;
}
}
}
.file-name{
width:100%;
.file-name-content {
width: 100% !important;
position: absolute;
}
}
.file-description {
display: none !important;
}
.document-actions{
.file-description{
display: block !important;
padding-bottom: 10px;
max-width: 100%;
word-break: break-word;
}
}
}
}
.fgHelpOverlayButton {
color: @HeadingFontColor;
position: fixed;
z-index: 200;
right: 0;
top:0;
padding-left: 10px;
transition: right 0.4s ease;
.optionWrapper {
text-align: right;
.overlayOption {
text-align:right;
.optionText {
vertical-align: top;
display: inline-block;
line-height: 40px;
cursor: default;
}
.optionIcon {
cursor: pointer;
width: 40px;
height: 40px;
display: inline-block;
padding: 8px;
svg * {
fill: @BackgroundTextFontColor;
}
&.whiteSVG {
svg * {
fill: @HeadingFontColor;
}
}
span {
color: @BackgroundTextFontColor;
font-size: 30px;
@media (max-width: 480px){
color: @HeadingFontColor;
font-size: 24px;
}
&.icon-x {
color: @HeadingFontColor;
}
}
}
}
}
.underHypothekenBanner {
top: 50px;
}
}
@media (min-width:768px) {
.has-return-to-hypotheken{
.fgHelpOverlayButton {
right: 20px;
top: 50px;
}
}
.fgHelpOverlayButton {
right:10px;
top: 10px;
.optionWrapper{
.overlayOption{
.optionIcon{
padding:5px;
margin-right: 7px;
svg * {
fill: @BackgroundTextFontColor;
}
}
}
}
}
}
// Portrait Orientation
@media (max-width:480px){
.fgHelpOverlayButton {
background-color: @MenuBackgroundColorPrimary;
.optionWrapper {
.overlayOption {
.optionIcon {
svg * {
fill: @HeadingFontColor;
}
}
}
}
}
}
@media (min-width: 481px) and (max-width: 992px) {
.nav-active {
.fgHelpOverlayButton {
right: -50px;
transition: right 0.2s ease;
}
}
}
.sidebar-container {
@figlo-blue: #00B0F0;
@figlo-purple: #7030A0;
@figlo-green: #00B050;
@figlo-orange: #E8A418;
@figlo-red: #A03030;
@bs-margin: 15px;
@FontFamilyPrimary: 'Roboto', sans-serif;
@FontFamilySecondary: 'Roboto', sans-serif;
@color-white: #FFF;
@color-black: #000;
@color-primary: #0076a3;
@side-nav-background: #2f3035;
@side-nav-background-light: #505054;
@side-nav-text-color: @color-white;
@menu-item-separator-color: fade(@side-nav-text-color, 20);
@color-primary-light: lighten(@color-primary, 20);
@side-nav-highlight: @color-primary-light;
@footer-height: @side-nav-item-height + @bs-margin;
@duration-hover: 0.085s;
@menu-item-hover-opacity: 50;
@menu-item-active-opacity: 100;
@side-nav-item-height: 46px;
@side-nav-width: 265px;
@z-index-negative: -1;
@z-index-lifted: 10;
@z-index-max: 10000;
@duration-medium: 0.300s;
.fill-container(@margin) {
display: block;
position: absolute;
top: @margin;
bottom: @margin;
left: @margin;
right: @margin;
}
position: fixed;
height: 100%;
z-index: 100;
min-width: 50px;
width: inherit;
.figlo-current-situation-color {
color: @figlo-blue;
}
.figlo-generic-plan-color {
color: @figlo-green;
}
.figlo-mortgage-plan-color {
color: @figlo-purple;
}
.figlo-advisor-plan-color {
color: @figlo-orange;
}
.plans-overview {
width: 40px;
padding: 0px !important;
.figlo-generic-plan-color {
font-size: 16px !important;
margin-left: 7px;
padding: 0px !important;
}
.figlo-mortgage-plan-color {
font-size: 16px !important;
margin-left: -10px;
padding: 0px !important;
}
}
.dropdown-menu-right {
right: 0;
left: auto;
}
.figlo-dropdown-menu {
border-radius: 0;
margin-bottom: 10px;
.button-menu {
min-width: 150px;
margin: 5px 10px !important;
font-size: 14px;
display: block;
text-align: center !important;
}
}
.tools-title {
display: inline-block !important;
line-height: 3;
border-bottom: 1px solid fade(@MenuFontColor, 20%);
width: 100% !important;
.menu-item-icon {
padding-left: @bs-margin;
}
.menu-item-title {
font-family: 'Roboto', sans-serif;
font-size: 15px;
font-weight: bold;
}
}
.tools-title:hover {
border-color: transparent !important;
background-image: none !important;
cursor: default;
border-bottom: 1px solid fade(@MenuFontColor, 20%) !important;
}
.tools-title:hover span {
color: fade(@MenuFontColor, 75%) !important;
}
.dropdown-menu.tools-button {
background: @side-nav-background-light !important;
}
.tools-dropdown-menu {
position: fixed;
top: auto !important;
bottom: 46px !important;
left: 0px !important;
width: @side-nav-width;
height: auto;
display: block;
margin-bottom: 0 !important;
background-color: @side-nav-background-light !important;
box-shadow: none;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
z-index: @z-index-max;
li {
display: block;
list-style: none;
cursor: pointer;
.sidebar-link-title {
vertical-align: baseline !important;
line-height: @side-nav-item-height !important;
white-space: nowrap !important;
padding-left: 25px !important;
.TypeMenuPage;
}
a {
z-index: 1010 !important;
display: block !important;
text-decoration: none !important;
color: @color-white !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
width: @side-nav-width - 60px !important;
}
}
}
ul {
display: block;
margin: 0;
padding: 0;
&#tool-link-area {
margin-top: 30px;
}
li {
display: block;
list-style: none;
cursor: pointer;
.sidebar-link-title {
vertical-align: baseline;
line-height: @side-nav-item-height;
white-space: nowrap;
.TypeMenuPage;
}
a {
display: block;
text-decoration: none;
color: inherit;
overflow: hidden;
text-overflow: ellipsis;
width: inherit;
border-left: 5px solid fade(@MenuSelectedPageAccentColor, 0%);
.alert-count-icon {
position: absolute;
color: @TextOverBadColor;
background-color: @BadColor;
font-size: 10px;
border-radius: 100%;
width: 16px;
height: 16px;
line-height: 18px;
text-align: center;
float: right;
margin-left: 25px;
margin-top: 3px;
z-index: 20;
}
}
.mortgage-sub-page-link {
display: block;
font-weight: 300;
font-size: 15px;
line-height: @side-nav-item-height;
font-family: @FontFamilyPrimary;
border-left: 5px solid fade(@MenuSelectedPageAccentColor, 0%);
.padding-overload {
padding-left: 30px !important;
}
&.selected,
&:not(.disabled, .static):active {
font-weight: 500;
transition-duration: @duration-hover;
color: @MenuFontColor !important;
border-color: #7030a0;
background-repeat: repeat-x;
background-image: -webkit-linear-gradient(45deg, fade(#7030a0, 25%), fade(#7030a0, 0%));
background-image: -o-linear-gradient(45deg, fade(#7030a0, 25%), fade(#7030a0, 0%));
background-image: linear-gradient(45deg, fade(#7030a0, 25%), fade(#7030a0, 0%));
}
&:hover {
transition-duration: @duration-hover;
color: @MenuFontColor !important;
}
&:not(.disabled):hover {
border-color: fade(#7030a0, 50%);
background-repeat: repeat-x;
background-image: -webkit-linear-gradient(45deg, fade(#7030a0, 10%), fade(#7030a0, 0%));
background-image: -o-linear-gradient(45deg, fade(#7030a0, 10%), fade(#7030a0, 0%));
background-image: linear-gradient(45deg, fade(#7030a0, 10%), fade(#7030a0, 0%));
}
}
.mortgage-sub-page-link.image-less {
padding-left: 0px !important;
}
.loadingKey {
font-size: 0 !important;
&:not(.mortgage-title)::after {
content: '';
display: inline-block;
width: 50%;
height: 0px;
border: solid 3px rgba(255, 255, 255, 0.2);
border-radius: 3px;
margin-bottom: 1px;
}
}
}
}
#sidebar-wrapper {
height: inherit;
width: inherit;
position: relative;
.clientMenuItem {
font-family: @FontFamilyPrimary;
font-weight: 400;
font-size: 15px;
height: 40px;
width: 40px;
display: inline-block;
padding: 10px 0 0 10px;
line-height: 1.8;
position: absolute;
border-left: 3px solid transparent;
}
.back-to-hypotheken-link {
white-space: nowrap;
color: fade(@MenuFontColor, 75%);
margin-top: 5px;
&.icon-long-arrow-left {
text-decoration: none;
&:before {
vertical-align: middle;
margin-left: 15px;
}
}
span {
.TypeMenuHyperlink;
padding: 15px;
padding-left: 5px;
cursor: pointer;
}
}
#nav-sidebar-main {
background-color: @MenuBackgroundColorSecondary;
float: left;
overflow: hidden;
min-height: 100%;
display: inline-block;
transition: color 400ms ease;
.hamburger {
display: inline-block;
position: absolute;
top: 22px;
left: 0;
margin-left: 15px;
width: 26px;
border-top: 2px solid #2f3035;
border-bottom: 2px solid #2f3035;
cursor: pointer;
&:before {
content: "";
display: block;
height: 2px;
background-color: #2f3035;
margin: 7px 0;
}
}
&.open {
min-width: @side-nav-width;
width: @side-nav-width;
.hamburger {
border-color: #707070;
&:before {
background-color: #707070;
}
}
}
ul {
cursor: default;
&.sidebar-link-item-wrapper {
margin-top: 10px;
}
h4 {
.TypeMenuPageCategory;
line-height: 14px;
margin: 35px 15px 10px 15px;
white-space: nowrap;
color: #a0a0a0;
cursor: default;
}
li {
color: fade(@MenuFontColor, 75%);
overflow: hidden;
&.logo-container {
line-height: 0;
padding: 10px 15px;
.product-logo svg {
height: 70px;
}
.organization-logo {
max-height: 200px;
img {
max-width: 235px;
}
}
* {
cursor: default;
}
}
&.active {
background-color: fade(@PrimaryAccentColor, 30%);
[class^="icon-"] {
border-left: 3px solid @MenuSelectedPageAccentColor;
}
}
&.sub-nav-active {
background-color: darken(@MenuSelectedPageBackgroundColor, 6%);
[class^="icon-"] {
border-left: 3px solid @MenuSelectedPageAccentColor;
}
}
&.sidebar-link-item {
&.static {
> a {
border-left: none !important;
padding-left: 5px;
color: fade(@side-nav-text-color, 75) !important;
cursor: default;
&::before {
display: none;
visibility: hidden;
}
.menu-item-text {
font-weight: 300 !important;
}
}
&:not(.open) ul {
display: none;
visibility: hidden;
}
}
&.disabled {
cursor: not-allowed;
pointer-events: none;
font-weight: normal;
}
&.current-situation {
&.selected,
&:not(.disabled, .static):active {
font-weight: 500;
transition-duration: @duration-hover;
color: @figlo-blue !important;
background-repeat: repeat-x !important;
background-image: -webkit-linear-gradient(45deg, fade(@figlo-blue, 25%), fade(@figlo-blue, 0%)) !important;
background-image: -o-linear-gradient(45deg, fade(@figlo-blue, 25%), fade(@figlo-blue, 0%)) !important;
background-image: linear-gradient(45deg, fade(@figlo-blue, 25%), fade(@figlo-blue, 0%)) !important;
}
&:not(.disabled):hover {
transition-duration: @duration-hover;
color: @figlo-blue !important;
border-color: fade(@figlo-blue, 50%);
background-repeat: repeat-x !important;
background-image: -webkit-linear-gradient(45deg, fade(@figlo-blue, 10%), fade(@figlo-blue, 0%)) !important;
background-image: -o-linear-gradient(45deg, fade(@figlo-blue, 10%), fade(@figlo-blue, 0%)) !important;
background-image: linear-gradient(45deg, fade(@figlo-blue, 10%), fade(@figlo-blue, 0%)) !important;
}
}
&.hasSubPages {
a {
border-left: none;
padding-left: 5px;
.sidebar-link-title {
height: 45px;
}
}
}
a {
position: relative;
.caret {
font-size: 16px;
position: absolute;
right: 30px;
top: 12px;
will-change: transform;
transition-property: transform;
transition-duration: 0.3s;
}
}
}
&.bottom-line {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
&.top-line {
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
&.selected,
&.expanded,
&:not(.disabled, .static):active {
color: @MenuFontColor;
&:not(.hasSubPages) {
a {
border-color: @MenuSelectedPageAccentColor;
background-repeat: repeat-x;
background-image: -webkit-linear-gradient(45deg, fade(@MenuSelectedPageAccentColor, 25%), fade(@MenuSelectedPageAccentColor, 0%));
background-image: -o-linear-gradient(45deg, fade(@MenuSelectedPageAccentColor, 25%), fade(@MenuSelectedPageAccentColor, 0%));
background-image: linear-gradient(45deg, fade(@MenuSelectedPageAccentColor, 25%), fade(@MenuSelectedPageAccentColor, 0%));
}
&.red {
a {
border-color: rgba(255, 0, 0, 0.25);
background-image: -webkit-linear-gradient(45deg, rgba(255, 0, 0, 0.15), rgba(255, 0, 0, 0));
background-image: -o-linear-gradient(45deg, rgba(255, 0, 0, 0.15), rgba(255, 0, 0, 0));
background-image: linear-gradient(45deg, rgba(255, 0, 0, 0.15), rgba(255, 0, 0, 0));
}
}
}
}
&:not(.disabled):hover {
color: @MenuFontColor;
&:not(.hasSubPages) {
a {
border-color: fade(@MenuSelectedPageAccentColor, 80%);
background-repeat: repeat-x;
background-image: -webkit-linear-gradient(45deg, fade(@MenuSelectedPageAccentColor, 10%), fade(@MenuSelectedPageAccentColor, 0%));
background-image: -o-linear-gradient(45deg, fade(@MenuSelectedPageAccentColor, 10%), fade(@MenuSelectedPageAccentColor, 0%));
background-image: linear-gradient(45deg, fade(@MenuSelectedPageAccentColor, 10%), fade(@MenuSelectedPageAccentColor, 0%));
}
&.red {
a {
border-color: rgba(255, 0, 0, 0.25);
background-image: -webkit-linear-gradient(45deg, rgba(255, 0, 0, 0.15), rgba(255, 0, 0, 0));
background-image: -o-linear-gradient(45deg, rgba(255, 0, 0, 0.15), rgba(255, 0, 0, 0));
background-image: linear-gradient(45deg, rgba(255, 0, 0, 0.15), rgba(255, 0, 0, 0));
}
}
}
}
&.expanded {
.caret {
transform: rotateX(180deg);
}
}
&.selected,
&.expanded,
&:not(.disabled, .static):active {
.sidebar-link-title {
font-weight: 500;
}
}
&.sub-nav-item {
line-height: 30px;
cursor: default;
&.active {
background-color: fade(@MenuSelectedPageAccentColor, 30%);
border-left: 3px solid @MenuSelectedPageAccentColor;
}
> span {
height: 30px;
line-height: 30px;
&[class^="icon-"] {
padding: 8px 8px 8px 15px;
}
}
.icon-color-dot {
height: 30px;
&:before {
content: "\25CF";
color: @PrimaryAccentColor;
position: absolute;
margin-top: -10px;
}
}
.sidebar-link-title {
padding-left: 50px;
.TypeMenuCaption;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sub-nav-cancel {
position: absolute;
right: 0;
padding: 0 10px;
line-height: 35px;
cursor: pointer;
}
&.active-client {
.sidebar-link-title, .icon-color-dot, .icon-x {
height: 30px;
line-height: 30px;
}
.icon-color-dot {
padding-left: 19px;
&:before {
margin-top: -8px;
}
}
.icon-x:before {
vertical-align: middle;
}
.sidebar-link-title {
padding-right: 30px;
}
}
}
span[class*="icon-caret"] {
font-size: 10px;
:before {
vertical-align: middle;
}
}
span[class^="icon-"] {
height: 40px;
width: 40px;
font-size: 16px;
display: inline-block;
padding: 10px 0 0 14px;
line-height: 0;
position: absolute;
border-left: 3px solid transparent;
}
span[class^="awesome-icon"] {
height: 40px;
width: 40px;
font-size: 16px;
display: inline-block;
padding: 10px 0 0 14px;
line-height: 23px;
position: absolute;
&.mortgage-plan {
color: #7030A0;
}
&.current-situation {
color: #00B0F0;
padding: 10px 0 0 14px !important;
}
}
.sidebar-link-title {
padding-left: @side-nav-item-height;
&.reposition {
padding-left: 10px !important;
}
}
}
}
#tool-link-area {
.sidebar-link-item {
&.active {
pointer-events: none;
}
a {
padding: 15px;
.tool-link {
border: 1px solid @MenuFontColor;
width: 100%;
border-radius: 3px;
.tool-link-icon {
font-size: 26px;
margin-top: -3px;
}
.sidebar-link-title {
.TypeMenuCaption;
padding-left: 50px;
}
}
}
}
}
}
.nav-sideBar-bottom {
position: fixed;
bottom: 61px;
left: 0;
height: auto;
width: inherit;
border-top: none;
border-bottom: 1px solid @menu-item-separator-color;
ul.sidebar-link-item {
&.disabled {
cursor: not-allowed;
pointer-events: none;
font-weight: normal;
}
&.selected,
&:not(.disabled, .static):active {
font-weight: 500;
transition-duration: @duration-hover;
color: @MenuFontColor !important;
border-color: #7030a0;
background-repeat: repeat-x;
background-image: -webkit-linear-gradient(45deg, fade(#7030a0, 25%), fade(#7030a0, 0%));
background-image: -o-linear-gradient(45deg, fade(#7030a0, 25%), fade(#7030a0, 0%));
background-image: linear-gradient(45deg, fade(#7030a0, 25%), fade(#7030a0, 0%));
}
&:not(.disabled):hover {
transition-duration: @duration-hover;
color: @MenuFontColor !important;
border-color: fade(#7030a0, 50%);
background-repeat: repeat-x;
background-image: -webkit-linear-gradient(45deg, fade(#7030a0, 10%), fade(#7030a0, 0%));
background-image: -o-linear-gradient(45deg, fade(#7030a0, 10%), fade(#7030a0, 0%));
background-image: linear-gradient(45deg, fade(#7030a0, 10%), fade(#7030a0, 0%));
}
li {
a {
position: relative;
.caret {
font-size: 16px;
position: absolute;
right: 30px;
top: 12px;
will-change: transform;
transition-property: transform;
transition-duration: 0.3s;
}
}
}
}
}
.nav-sideBar-footer {
position: fixed;
bottom: 15px;
left: 0;
width: 100%;
max-width: @side-nav-width;
height: @side-nav-item-height;
z-index: @z-index-lifted;
display: block;
background-color: @side-nav-background-light;
will-change: border-top-color;
transition-property: border-top-color;
transition-duration: @duration-medium;
&:not(.open) {
display: none;
}
ul.sideBar-footer-menu {
display: flex;
min-height: @side-nav-item-height;
width: 100%;
max-width: 255px;
padding: 0 3px;
margin-left: 0px;
justify-content: space-between;
li {
display: inherit;
flex: 0 @side-nav-item-height;
width: @side-nav-item-height;
height: @side-nav-item-height;
align-items: center;
justify-content: center;
&.pull-up {
padding: 7px;
}
&.pull-right {
position: relative;
float: right;
}
a {
display: inherit;
width: @side-nav-item-height;
height: @side-nav-item-height;
border-left: none;
border-bottom: 3px solid fade(@menu-item-separator-color, 0);
padding-left: 0 !important;
}
&:not([disabled=disabled]):hover {
border-bottom-color: fade(@menu-item-separator-color, @menu-item-hover-opacity);
}
&.user-logout, &.app-exit, &.custom-button {
border-bottom: none !important;
}
// this is moved to the sitemodule style, because here it is not working!
&.user-logout:hover, &.app-exit:hover {
background-image: -webkit-linear-gradient(0deg, #a00000, rgba(160, 0, 0, 0.35)) !important;
background-image: -o-linear-gradient(0deg, #a00000, rgba(160, 0, 0, 0.35)) !important;
background-image: linear-gradient(0deg, #a00000, rgba(160, 0, 0, 0.35)) !important;
}
a:not([disabled=disabled]):active, a.active, &.active a, &.open > a {
border-bottom-color: fade(@menu-item-separator-color, @menu-item-active-opacity);
}
ul.tools-dropdown-menu li {
width: auto;
}
ul.dropdown-menu-right.tools-dropdown-menu.figlo-dropdown-menu li {
width: auto;
&:not(.disabled):hover {
transition-duration: @duration-hover;
color: @MenuFontColor !important;
border-color: fade(#7030a0, 50%);
background-repeat: repeat-x;
background-image: -webkit-linear-gradient(45deg, fade(#7030a0, 20%), fade(#7030a0, 0%));
background-image: -o-linear-gradient(45deg, fade(#7030a0, 20%), fade(#7030a0, 0%));
background-image: linear-gradient(45deg, fade(#7030a0, 20%), fade(#7030a0, 0%));
}
}
}
.menu-item-icon, .menu-item-caret {
display: inherit;
align-items: center;
justify-content: center;
width: @side-nav-item-height;
height: @side-nav-item-height;
background: none;
border: none;
outline: none;
flex: 0 0 @side-nav-item-height;
i {
min-width: @side-nav-item-height / 2;
text-align: center;
font-size: 16px;
width: 24px;
}
}
}
.nav-sideBar-version {
display: flex;
width: 100%;
height: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
align-items: center;
justify-content: center;
background-color: @side-nav-background-light;
.trade-mark {
color: @color-white;
font-size: 11px;
font-weight: 300;
letter-spacing: 0.5px;
opacity: 0.5;
}
}
}
}
a:not([disabled=disabled]):active,
a:not([disabled=disabled]):hover,
a.active,
&.active a {
transition-duration: 0ms;
border-left-color: fade(@side-nav-highlight, @menu-item-active-opacity);
color: @side-nav-text-color;
}
.ff-btn-grp {
display: block;
width: 230px;
padding: 0 15px 10px;
button {
overflow: hidden;
}
#ff-open-btn {
margin: 0 auto;
width: 100%;
}
#ff-close-btn, #ff-save-btn {
display: inline-block;
}
#ff-close-btn {
color: @MenuFontColor;
}
#ff-save-btn {
width: 130px;
}
}
}
@media (max-width: 992px) {
.sidebar-container {
#sidebar-wrapper {
#nav-sidebar-main {
.hamburger {
display: inline-block;
}
ul {
li {
color: @BackgroundTextFontColor;
transition: width 400ms ease, color 400ms ease;
&.disabled {
color: fade(@BackgroundTextFontColor, 30%);
cursor: none;
}
.icon-x:before {
display: none;
}
&.logo-container {
padding: 10px 0;
}
}
}
#tool-link-area {
.tool-link {
margin-left: -15px;
transition: margin-left 400ms ease;
}
}
&.open {
width: 265px;
ul {
li {
color: fade(@MenuFontColor, 75%);
&.disabled {
color: fade(@MenuFontColor, 30%);
cursor: none;
}
.icon-x:before {
display: inline-block;
}
&.logo-container {
padding: 10px 15px;
}
}
}
#tool-link-area {
.tool-link {
margin-left: 0px;
}
}
}
}
}
}
}
//Portrait Orientation
@media (max-width: 480px) {
.sidebar-container {
min-width: 0;
#sidebar-wrapper {
#nav-sidebar-main {
position: relative;
&:not(.open) {
~ .ps-scrollbar-x-rail, ~ .ps-scrollbar-y-rail {
display: none;
}
}
ul {
li {
a {
white-space: nowrap;
span {
&[class^="icon-"] {
position: static;
}
&.sidebar-link-title {
padding-left: 0;
}
}
}
}
}
}
}
}
}
/*
fgWidgets.style.less
This file contains all styling that is shared by all of the widgets.
Any styling specific to a widget goes in that widget's local LESS file.
*/
@colorPrimary: dodgerblue;
@colorHighlight: goldenrod;
@semiTransparentBackground: rgba(235, 237, 231, 0.9);
@incomeColor: rgb(0,181,90);
@expenseColor: rgb(32,44,56);
@negativeText: red;
.fg-widgets-title {
color: white;
text-align: center;
.TypeHeadline;
}
.fg-widgets-text-uppercase {
.TypeLabel;
}
.fgHighchartsLegend {
padding:0 10px;
.legendItem{
.TypeLabel;
list-style: none;
display: inline-block;
color: @BackgroundTextFontColor;
margin-right: 20px;
line-height: 20px;
cursor: pointer;
white-space: nowrap;
.square{
width: 10px;
height: 10px;
display: inline-block;
margin-right: 5px;
&:after{
content: " ";
}
}
.dashes{
background-color: transparent !important;
display: inline-block;
margin-right: 5px;
&:after{
content: "---";
}
}
.line{
width: 10px;
height: 3px;
display: inline-block;
margin-right: 5px;
&:after{
content: " ";
}
}
.circle{
width: 10px;
height: 10px;
display: inline-block;
margin-right: 5px;
border-radius: 50%;
&:after{
content: " ";
}
}
.legendSeriesIcon{
margin-right: 5px;
font-size: 20px;
font-weight: bold;
}
}
}
.fgHighchartsTooltip{
padding:8px 16px;
background-color:@CardBackgroundColorTransparent;
display:table;
color:@CardTextFontColor;
.tooltipLabel{
.TypeBody1;
display:block;
}
.tooltipDataRow{
display:table-row;
.tooltipDataName{
.tooltipDataIcon{
width: 12px;
display: inline-block;
&.square{
height: 8px;
line-height: 8px;
}
&.circle{
height: 12px;
line-height: 12px;
border-radius:50%;
}
}
font-weight:bold;
text-transform:uppercase;
display:table-cell;
.tooltipDataIcon{
font-size:16px;
margin-right:5px;
font-weight:bold;
}
}
.tooltipDataAmount{
text-align:right;
display:table-cell;
padding-left:5px;
}
}
}
.highcharts-tooltip {
z-index: 9998 !important;
position: absolute !important;
path {
top: -20px;
}
}
.truncate{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
rvt-alert-head-bar .alert-head-bar{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
padding: 15px;
background-color: @PrimaryAccentColor;
border-radius: 0;
margin-top: 15px;
line-height: 30px;
text-align: center;
z-index:95;
button {
color: white;
border-color: white;
margin-left: 15px;
}
.message {
color: white;
}
}
//////////////////////////////////////////////////////////////////////
// Concat from original source file: rivet_package/rivet.style.less
//////////////////////////////////////////////////////////////////////
// This file is prepended and made available to all packaged .less files in common, widgets, and site styles.
/**************************************************
Theme Variables
Do not edit color values here.
Default colors are specified in common.config.json.
The color values here will have no effect.
***************************************************/
@PrimaryAccentColor: #a2a2a2;
@PrimaryAccentFontColor: #fff;
@MenuBackgroundColorPrimary: #3d3d3d;
@MenuBackgroundColorSecondary: #313131;
@MenuSelectedPageBackgroundColor: #2f2f2f;
@MenuSelectedPageAccentColor: #a3a3a3;
@MenuIconColor: #fff;
@MenuFontColor: #fff;
@ScrollbarColor: #a3a3a3;
@ScrollbarBackgroundColor: #3d3d3d;
@backgroundColor: #fff;
@BackgroundOverlayColor: rgba(255,255,255,0.8);
@BackgroundTextFontColor: #3d3d3d;
@CardTextFontColor: #3d3d3d;
@CardBackgroundColor: rgb(255,255,255);
@LineBreakColor: #a1a1a1;
@BackgroundOddItemColor: #eeeeee;
@BackgroundEvenItemColor: #f9f9f9;
@BackgroundSelectedItemColor: #fff;
@GoodColor: #aeaeae;
@BadColor: #858585;
@NeutralExpenseColor: #555555;
@TextOverGoodColor: #3d3d3d;
@TextOverBadColor: #fff;
@ChartRangeStartColor: hsl(0,0%,15%);
@ChartRangeEndColor: hsl(0,0%,93%);
@BackgroundUnselectedGraphExtentOnBackgroundColor: rgb(230,230,230);
@BackgroundSelectedGraphExtentOnBackgroundColor: rgb(255,255,255);
@BackgroundUnselectedGraphExtentOnCardColor: rgb(243,243,243);
@BackgroundSelectedGraphExtentOnCardColor: rgb(240,240,240);
@SliderSVGBarColor: #fff;
@SliderSVGBackgroundColor: #333;
@RetirementGoalColor: #353535;
@EducationGoalColor: #858585;
@MajorPurchaseGoalColor: #484848;
@OverlayColor: rgba(0,0,0,0.7);
@HeadingFontColor: #fff;
@BodyFontColor: #fff;
@LinkColor: #fff;
@RightSidebarBackgroundColor: #3d3d3d;
@RightSidebarFontColor: #fff;
@LogoBackgroundColor: #3d3d3d;
@GoodColorGradientExtent: rgb(40, 40, 40);
@NeutralExpenseColorGradientExtent: rgb(232, 232, 232);
@IncomeTransactionGradientStart: rgb(82, 82, 82);
@IncomeTransactionGradientEnd: rgb(193, 193, 193);
@ExpenseTransactionGradientStart: rgb(7, 7, 7);
@ExpenseTransactionGradientEnd: rgb(143, 143, 143);
@CardBackgroundColorTransparent: rgba(250, 250, 250, 0.8);
@backgroundUrl: "''";
/****************************************************************
Other
Here you can put any other mixins or variables to be made available
in all other stylesheets.
*****************************************************************/
@FontFamilyPrimary: 'Roboto', sans-serif;
@FontFamilySecondary: 'Roboto', sans-serif;
// ! OPEN SANS HAS 300 / 400 / 600 / 700 / 800
// Content type styles
.TypeDisplay4 {
font-family: @FontFamilyPrimary;
font-size: 56px;
font-weight: 300;
}
.TypeDisplay3 {
font-family: @FontFamilyPrimary;
font-size: 48px;
font-weight: 300;
}
.TypeDisplay2 {
font-family: @FontFamilyPrimary;
font-size: 42px;
font-weight: 300;
}
.TypeDisplay1 {
font-family: @FontFamilyPrimary;
font-size: 36px;
font-weight: 300;
}
.TypeHeadlineBold {
font-family: @FontFamilyPrimary;
font-size: 24px;
font-weight: 600;
}
.TypeHeadline {
font-family: @FontFamilyPrimary;
font-size: 24px;
font-weight: 400;
}
.TypeTitle {
font-family: @FontFamilyPrimary;
font-size: 18px;
font-weight: 400;
}
.TypeSubheading {
font-family: @FontFamilyPrimary;
font-size: 16px;
font-weight: 400;
}
.TypeBody2 {
font-family: @FontFamilyPrimary;
font-size: 14px;
font-weight: 600;
}
.TypeBody1 {
font-family: @FontFamilyPrimary;
font-size: 14px;
font-weight: 400;
}
.TypeCaption {
font-family: @FontFamilyPrimary;
font-size: 12px;
font-weight: 400;
}
.TypeLabel {
font-family: @FontFamilyPrimary;
font-size: 12px;
font-weight: 400;
}
.TypeHyperlink {
font-family: @FontFamilyPrimary;
font-size: 14px;
font-weight: 400;
text-decoration: underline;
}
.TypeButton {
font-family: @FontFamilyPrimary;
font-size: 14px;
font-weight: 700;
}
// Menu type styles
.TypeMenuPageCategory {
font-family: @FontFamilyPrimary;
font-size: 16px;
font-weight: 400;
}
.TypeMenuPage {
font-family: @FontFamilyPrimary;
font-size: 15px;
font-weight: 300;
}
.TypeMenuHeading {
font-family: @FontFamilyPrimary;
font-size: 24px;
font-weight: 300;
}
.TypeMenuBody {
font-family: @FontFamilyPrimary;
font-size: 14px;
font-weight: 300;
}
.TypeMenuCaption {
font-family: @FontFamilyPrimary;
font-size: 12px;
font-weight: 300;
}
.TypeMenuHyperlink {
font-family: @FontFamilyPrimary;
font-size: 12px;
font-weight: 300;
text-decoration: underline;
}
.IconInvalid {
content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDIwMCAyMDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KCjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTEwMCwyMDBDNDQuOSwyMDAsMCwxNTUuMSwwLDEwMFM0NC45LDAsMTAwLDBzMTAwLDQ0LjksMTAwLDEwMFMxNTUuMSwyMDAsMTAwLDIwMHoiIHN0eWxlPSJmaWxsOiNlZDFjMjQiLz4KPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTAwLDEyMi42Yy03LjIsMC0xMy01LjgtMTMtMTNWNTIuOGMwLTcuMiw1LjgtMTMsMTMtMTNzMTMsNS44LDEzLDEzdjU2LjhDMTEzLDExNi44LDEwNy4yLDEyMi42LDEwMCwxMjIuNnoiIHN0eWxlPSJmaWxsOiNmZmYiLz4KPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTAwLDE2MS40Yy0zLjQsMC02LjgtMS4zLTkuMi0zLjhjLTIuMy0yLjMtMy44LTUuNy0zLjgtOS4xYzAtMy41LDEuNC02LjksMy44LTkuMmM0LjktNC45LDEzLjYtNC44LDE4LjQsMCAgYzIuMywyLjMsMy44LDUuNywzLjgsOS4yYzAsMy40LTEuNCw2LjctMy44LDkuMUMxMDYuNywxNjAuMSwxMDMuNSwxNjEuNCwxMDAsMTYxLjR6IiBzdHlsZT0iZmlsbDogI2ZmZiIvPgo8L3N2Zz4=');
width: 16px;
height: 16px;
display: inline-block;
position: absolute;
}
.RvtBoxShadow {
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
/* ICON SVG BEFORE ENCODING
*/
rvt-circle-loader{
.rvt-circle-loader-text{
.TypeSubheading;
text-align: center;
top: 50%;
position: absolute;
width: 100%;
padding-top: 40px;
}
}
rvt-horizontal-break{
width: 100%;
display: block;
position: relative;
text-align: left;
padding: 60px 0 50px;
overflow: hidden;
white-space: nowrap;
font-size: 0;
opacity: 0.3;
&:before{
content: "";
display: inline-block;
width: 50%;
background-color: #717685;
height: 2px;
margin-left: -13px;
}
&:after{
content: "";
display: inline-block;
width: 100%;
background-color: @LineBreakColor;
height: 2px;
}
.horizontal-break-triangle{
width: 26px;
padding: 0 3px;
display: inline-block;
position: relative;
&:after{
content: "";
border-right: 2px solid #717685;
border-top: 2px solid #717685;
transform: rotate(-45deg);
width: 18px;
height: 18px;
display: inline-block;
position: absolute;
top: -12px;
}
}
}
#background-image {
position: fixed;
z-index: -2;
left: -5px; // Moves background to hide blur feather
right: -5px;
top: -5px;
height: 125%;
.image{
height:100%;
width:100%;
position:absolute;
background-color: @backgroundColor;
-webkit-background-size: cover;
background-size: cover;
-webkit-transition: background-image 600ms;
transition: background-image 600ms;
-webkit-transition: background-position 0.2s ease;
transition: background-position 0.2s ease;
filter: blur(5px);
}
.background-overlay{
height:100%;
width:100%;
position:absolute;
background-color: @BackgroundOverlayColor;
}
}
#background-image.fg-nav-sidebar-offset{
background-position:230px 0;
}
@media (min-width:1200px){
#background-image {
-webkit-transition: none;
transition: none;
}
}
#background-image-container{
z-index: -10;
width: 100%;
height: 100%;
position: absolute;
#background-overlay{
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(255,255,255,0.65);
}
#background-image{
width: 100%;
height: 100%;
position: absolute;
background-image: url('http://www.advicentsolutions.net/images/themebackgrounds/photo1.jpg');
background-size: cover;
}
}
#root-wrapper{
&.padding-override{
padding-left: 0px !important;
}
&.closed{
padding-left: 0px;
}
&.sub-open{
padding-left: 185px;
}
}
#root-wrapper{
&.app-mode-Figlo{
position: relative;
display: block;
transition: padding-left 400ms ease;
padding-left: 185px;
}
&.app-mode-NaviPlan{
padding-left: 0px;
padding-right: 0px;
#root-page-content-wrapper{
padding-left: 0px;
padding-right: 0px;
}
padding-top: 45px;
&.has-return-to-hypotheken {
padding-top: 90px;
}
@media (max-width: 768px){
padding-top: 100px;
&.has-return-to-hypotheken{
padding-top: 140px;
}
&.has-fact-finder-button{
padding-top: 145px;
}
&.has-fact-finder-button.has-return-to-hypotheken{
padding-top: 185px;
}
}
}
}
#root-page-content-wrapper {
padding-right: 45px;
padding-left: 65px;
@media(max-width: 992px){
padding-right: 45px;
padding-left: 45px;
}
}
.center-block{
max-width: 1000px;
width: 100%;
margin: 0 auto;
position: relative;
}
.rvt-card {
background-color: @CardBackgroundColor;
height: auto;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
margin-bottom: 30px;
position: relative;
padding: 30px;
@media(max-width: 992px){
padding: 30px 15px;
}
}
.rvt-card-secondary {
background-color: rgb(245,245,245); // SWITCH to variable when created
margin-bottom: 30px;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
position: relative;
}
.rvt-container {
height: auto;
position: relative;
margin-bottom: 30px;
}
.row{
/* This property eliminates whitespace between columns, and needs to be overridden in child elements to prevent inheritance */
font-size: 0;
display: block;
clear: both;
min-width: 100%;
margin: 0 -15px 0 -15px; // Allows content to go edge to edge
.row {
margin: 0;
}
&.dense {
margin: 0 -7.5px 0 -7.5px;
[class*="col-"]{
padding: 0 7.5px 0 7.5px;
.rvt-card {
margin-bottom: 15px;
}
}
}
[class*="col-"]{
font-size: 14px;
padding: 0 15px 0 15px;
}
&:after{
content: " ";
display: block;
width: 100%;
clear: both;
}
&.no-gutter{
padding: 0 15px;
[class*="col-"]{
padding: 0;
margin-bottom: 0;
}
}
&.small-gutter{
padding: 0 10px;
[class*="col-"]{
padding: 0 5px;
margin-bottom: 10px;
}
}
[class*="col-"]{
padding: 0 15px;
display: inline-block;
vertical-align: top;
position: relative;
&.offset-1 {
margin-left: 8.3332%;
}
&.offset-2 {
margin-left: 16.6665%;
}
&.offset-3 {
margin-left: 25%;
}
&.offset-4 {
margin-left: 33.3332%;
}
&.offset-5 {
margin-left: 41.6665%;
}
&.offset-6 {
margin-left: 50%;
}
&.offset-7 {
margin-left: 58.3332%;
}
&.offset-8 {
margin-left: 66.6665%;
}
&.offset-9 {
margin-left: 75%;
}
&.offset-10 {
margin-left: 83.3332%;
}
&.offset-11 {
margin-left: 91.6665%;
}
}
}
.pull-right{
float:right;
clear: right;
}
.pull-left{
float:left;
clear: left;
}
.col-12{
width: 100%;
}
.col-11{
width: 91.6665%;
}
.col-10{
width: 83.3332%;
}
.col-9{
width: 75%;
}
.col-8{
width: 66.6665%;
}
.col-7{
width: 58.3332%;
}
.col-6{
width: 50%;
}
.col-5{
width: 41.6665%;
}
.col-4{
width: 33.3332%;
}
.col-3{
width: 25%;
}
.col-2{
width: 16.6665%;
}
.col-1{
width: 8.3332%;
}
.pane{
padding: 30px;
background-color: @CardBackgroundColor;
position: relative;
}
/* XL */
@media (max-width: 1500px){
.col-xl-12{
width: 100%;
}
.col-xl-11{
width: 91.6665%;
}
.col-xl-10{
width: 83.3332%;
}
.col-xl-9{
width: 75%;
}
.col-xl-8{
width: 66.6665%;
}
.col-xl-7{
width: 58.3332%;
}
.col-xl-6{
width: 50%;
}
.col-xl-5{
width: 41.6665%;
}
.col-xl-4{
width: 33.3332%;
}
.col-xl-3{
width: 25%;
}
.col-xl-2{
width: 16.6665%;
}
.col-xl-1{
width: 8.3332%;
}
.row.no-gutter-xl{
margin: 0;
}
.row.no-gutter-xl>[class^="col-"]{
padding: 0;
margin-bottom: 0;
}
}
/* LG */
@media (max-width: 1200px){
.col-lg-12{
width: 100%;
}
.col-lg-11{
width: 91.6665%;
}
.col-lg-10{
width: 83.3332%;
}
.col-lg-9{
width: 75%;
}
.col-lg-8{
width: 66.6665%;
}
.col-lg-7{
width: 58.3332%;
}
.col-lg-6{
width: 50%;
}
.col-lg-5{
width: 41.6665%;
}
.col-lg-4{
width: 33.3332%;
}
.col-lg-3{
width: 25%;
}
.col-lg-2{
width: 16.6665%;
}
.col-lg-1{
width: 8.3332%;
}
.row.no-gutter-lg{
margin: 0;
}
.row.no-gutter-lg>[class^="col-"]{
padding: 0;
margin-bottom: 0;
}
}
/* MD */
@media (max-width: 1000px){
.col-md-12{
width: 100%;
}
.col-md-11{
width: 91.6665%;
}
.col-md-10{
width: 83.3332%;
}
.col-md-9{
width: 75%;
}
.col-md-8{
width: 66.6665%;
}
.col-md-7{
width: 58.3332%;
}
.col-md-6{
width: 50%;
}
.col-md-5{
width: 41.6665%;
}
.col-md-4{
width: 33.3332%;
}
.col-md-3{
width: 25%;
}
.col-md-2{
width: 16.6665%;
}
.col-md-1{
width: 8.3332%;
}
.row.no-gutter-md{
margin: 0;
}
.row.no-gutter-md>[class^="col-"]{
padding: 0;
margin-bottom: 0;
}
.center-block {
padding-left: 15px;
padding-right: 15px;
}
}
/* SM */
@media (max-width: 768px){
.col-sm-12{
width: 100%;
}
.col-sm-11{
width: 91.6665%;
}
.col-sm-10{
width: 83.3332%;
}
.col-sm-9{
width: 75%;
}
.col-sm-8{
width: 66.6665%;
}
.col-sm-7{
width: 58.3332%;
}
.col-sm-6{
width: 50%;
}
.col-sm-5{
width: 41.6665%;
}
.col-sm-4{
width: 33.3332%;
}
.col-sm-3{
width: 25%;
}
.col-sm-2{
width: 16.6665%;
}
.col-sm-1{
width: 8.3332%;
}
.row.no-gutter-sm{
margin: 0;
}
.row.no-gutter-sm>[class^="col-"]{
padding: 0;
margin-bottom: 0;
}
}
/* XS */
@media (max-width: 480px){
.row{
[class*="col-"]{
[class*="col-"]{
padding: 0 15px;
.no-gutter{
padding: 0 15px;
}
.small-gutter{
padding: 0 10px;
}
}
}
&.no-gutter, &.small-gutter{
padding:0;
}
}
#root-page-content-wrapper {
padding: 0;
}
.col-xs-12{
width: 100%;
}
.col-xs-11{
width: 91.6665%;
}
.col-xs-10{
width: 83.3332%;
}
.col-xs-9{
width: 75%;
}
.col-xs-8{
width: 66.6665%;
}
.col-xs-7{
width: 58.3332%;
}
.col-xs-6{
width: 50%;
}
.col-xs-5{
width: 41.6665%;
}
.col-xs-4{
width: 33.3332%;
}
.col-xs-3{
width: 25%;
}
.col-xs-2{
width: 16.6665%;
}
.col-xs-1{
width: 8.3332%;
}
.row.no-gutter-xs{
margin: 0;
}
.row.no-gutter-xs>[class^="col-"]{
padding: 0;
margin-bottom: 0;
}
}
@charset "UTF-8";
@font-face {
font-family: "narrator-icons";
src:url("rivet_package/lib/content/icons/fonts/narrator-icons.eot");
src:url("rivet_package/lib/content/icons/fonts/narrator-icons.eot?#iefix") format("embedded-opentype"),
url("rivet_package/lib/content/icons/fonts/narrator-icons.woff") format("woff"),
url("rivet_package/lib/content/icons/fonts/narrator-icons.ttf") format("truetype"),
url("rivet_package/lib/content/icons/fonts/narrator-icons.svg#narrator-icons") format("svg");
font-weight: normal;
font-style: normal;
}
[data-icon]:before {
font-family: "narrator-icons" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "narrator-icons" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
//vertical-align: middle;
}
.icon-exclamation-point:before {
content: "\21";
}
.icon-help-icon:before {
content: "\3f";
}
.icon-log-out-menu:before {
content: "\63";
}
.icon-menu-alerts:before {
content: "\64";
}
.icon-menu-analytics:before {
content: "\65";
}
.icon-menu-client-list:before {
content: "\66";
}
.icon-menu-documents:before {
content: "\67";
}
.icon-menu-finance-future:before {
content: "\68";
}
.icon-menu-finance-manager:before {
content: "\69";
}
.icon-menu-goals:before {
content: "\6a";
}
.icon-menu-hamburger:before {
content: "\6b";
}
.icon-menu-hdn-messenger:before {
content: "\6c";
}
.icon-menu-home:before {
content: "\6d";
}
.icon-menu-settings:before {
content: "\6e";
}
.icon-quick-add:before {
content: "\6f";
}
.icon-quick-delete:before {
content: "\70";
}
.icon-quick-edit:before {
content: "\71";
}
.icon-quick-more:before {
content: "\72";
}
.icon-thumbs-up:before {
content: "\73";
}
.icon-caret-down:before {
content: "\61";
}
.icon-caret-left:before {
content: "\62";
}
.icon-caret-right:before {
content: "\74";
}
.icon-caret-up:before {
content: "\75";
}
.icon-times-circle-o:before {
content: "\76";
}
.icon-calendar:before {
content: "\77";
}
.icon-advisorbriefcase-hypothekenlogo:before {
content: "\78";
}
.icon-figlo-hypothekenlogo:before {
content: "\79";
}
.icon-naviplan-hypothekenlogo:before {
content: "\7a";
}
.icon-magnifying-glass:before {
content: "\41";
}
.icon-x:before {
content: "\42";
}
.icon-comment:before {
content: "\45";
}
.icon-comment-o:before {
content: "\43";
}
.icon-cogs:before {
content: "\44";
}
.icon-tags:before {
content: "\47";
}
.icon-unlock:before {
content: "\49";
}
.icon-lock:before {
content: "\4a";
}
.icon-ellipsis-h:before {
content: "\4b";
}
.icon-hourglass:before {
content: "\4c";
}
.icon-star:before {
content: "\4d";
}
.icon-star-empty:before {
content: "\4e";
}
.icon-long-arrow-left:before {
content: "\4f";
}
.icon-long-arrow-right:before {
content: "\50";
}
.icon-pencil:before {
content: "\51";
}
.icon-link:before {
content: "\53";
}
.icon-retirement:before {
content: "\54";
}
.icon-education:before {
content: "\55";
}
.icon-disability:before {
content: "\56";
}
.icon-death:before {
content: "\57";
}
.icon-concern:before {
content: "\58";
}
.icon-bigexpense:before {
content: "\59";
}
.icon-check:before {
content: "\5a";
}
.icon-factfinder:before {
content: "\30";
}
.icon-retirement:before {
content: "\54";
}
.icon-review-recs:before {
content: "\31";
}
.icon-reporting:before {
content: "\32";
}
.icon-insurance:before {
content: "\33";
}
.icon-income-expenses:before {
content: "\34";
}
.icon-goal-details:before {
content: "\35";
}
.icon-assets-liabilities:before {
content: "\36";
}
.icon-uparrow:before {
content: "\37";
}
.icon-creditcard:before {
content: "\38";
}
.icon-downarrow:before {
content: "\39";
}
.icon-hh-empty:before {
content: "\22";
}
.icon-hyp-budget:before {
content: "\23";
}
.icon-hyp-risk:before {
content: "\24";
}
.icon-death:before {
content: "\57";
}
.icon-download:before {
content: "\25";
}
.icon-repeat:before {
content: "\26";
}
.icon-sort:before {
content: "\48";
}
@InputButtonGrey: rgb(62,75,91); // Placeholder variable until colors are finalized
@RvtInputHeight: 30px; // Used to help make sure all inputs are same height
// Styles for icons within buttons and list-buttons
.rvt-btn-icon {
height: 14px;
display: inline-block;
svg {
height: 19px;
max-width: 20px;
vertical-align: middle;
margin-top: -4px;
* {
fill: @PrimaryAccentColor;
}
}
}
.rvt-input-primary {
.rvt-btn-icon {
svg * {
fill: @CardBackgroundColor;
}
}
}
//#############################
//SHARED COLORATION STYLES
//#############################
[class*="rvt-btn"]{
background: none;
border: 1px solid @InputButtonGrey;
border-radius: 3px;
color: @InputButtonGrey;
&:hover:not(:disabled), &:focus {
border-width: 2px;
outline: none;
}
&:disabled:not(.loading) {
border: 1px dashed @LineBreakColor;
color: @LineBreakColor;
cursor: default;
}
&:not(.loading), &:not(.saving){
fg-loading-spinner {
display: none;
}
}
&.loading {
position: relative;
z-index: 19;
overflow: hidden;
fg-loading-spinner {
display: block;
z-index: -1;
.loader::before, .loader::after {
width: 500px;
height: 500px;
margin-top: -250px;
margin-left: -250px;
-webkit-animation: pulse 5s ease-out infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: pulse 5s ease-out infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
.loader::after {
-webkit-animation: pulse 2.5s ease-out infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: pulse 2.5s ease-out infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
}
}
}
.rvt-btn-style-primary {
background-color: fade(@PrimaryAccentColor, 35%); // Primary Accent Color 35% opacity
border-color: rgba(77,195,214,.05); // to try and match colors
.TypeBody1;
&:not(:disabled){
.TypeButton;
}
&:hover, &:focus {
border-color: @PrimaryAccentColor;
outline: none;
}
&:active {
background-color: @PrimaryAccentColor;
color: @PrimaryAccentFontColor;
outline: none;
}
&.loading {
border: none;
background-color: fade(@PrimaryAccentColor, 35%);
color: @CardTextFontColor;
&:before, &:after {
background: none;
}
}
&:disabled:not(.loading) {
background: none;
}
}
.rvt-btn-style-standard {
.TypeBody1;
border-color: @InputButtonGrey;
&:active{
background-color: @InputButtonGrey;
color: @PrimaryAccentFontColor;
outline: none;
}
&.loading {
border: none;
background-color: fade(@LineBreakColor, 25%);
color: @PrimaryAccentFontColor;
&:before, &:after {
background: none;
}
}
}
//#############################
//BUTTONS
//#############################
.rvt-btn {
&:not([class*="rvt-btn-style"]){
.rvt-btn-style-standard;
}
text-align: center;
position: relative;
border-radius: 2px;
display: inline-block;
cursor: pointer;
white-space: nowrap;
vertical-align: top;
// This seems redundant, but allows for buttons placed within a span within a button as well as on the button directly
&[class*="icon-"]:before {
font-size: 20px;
vertical-align: middle;
background: none;
}
[class*="icon-"] {
font-size: 20px;
margin-left: 6px;
vertical-align: middle;
display: inline-block;
height:20px;
}
.rvt-icon-add{
height: 24px;
&:before{
vertical-align: top;
}
}
&:disabled{
pointer-events: none;
}
.count-icon {
line-height: 12px;
font-size: 12px;
color: @CardBackgroundColor;
width: 16px;
height: 16px;
background-color: @BadColor;
border-radius: 16px;
padding: 2px;
margin: -4px 5px -4px 0;
display: inline-block;
}
}
.rvt-btn-300 {
.rvt-btn;
line-height: 28px;
padding: 0 10px;
&:not(:disabled):hover, &:focus {
line-height: 26px;
padding: 0 9px;
}
&.loading {
line-height: 30px;
}
}
.rvt-btn-400 {
.rvt-btn;
line-height: 36px;
padding: 0 15px;
&:not(:disabled):hover, &:focus {
line-height: 34px;
padding: 0 14px;
}
&.loading {
line-height: 38px;
}
}
.rvt-btn-500 {
.rvt-btn;
line-height: 48px;
padding: 0 18px;
&:not(:disabled):hover, &:focus {
line-height: 46px;
padding: 0 17px;
}
&.loading {
line-height: 50px;
}
}
.input-with-button {
.rvt-btn-300 {
line-height: 0;
min-width: 30px;
padding: 5px 10px;
}
.rvt-btn-300 [class^="icon-"] {
margin-left: 0;
}
input {
width: 100%;
}
.input-col {
width: 100%;
}
}
//#############################
// DROPDOWNS
//#############################
rvt-dropdown{
display: block;
max-width: 100%;
position: relative;
.TypeBody1;
button{
border: none;
border-bottom: 1px solid @InputButtonGrey;
background: none;
position: relative;
padding: 0 25px 0 0;
height: @RvtInputHeight;
.TypeBody1;
width: 100%;
display: block;
text-align: inherit;
color: inherit;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
padding-bottom: 1px;
&:hover:not(:disabled), &:focus:not(:disabled), &:active:not(:disabled) {
border-width: 2px;
padding-bottom: 0;
}
&:before {
position: absolute;
right: 0;
top: 0;
content: "\61";
font-family: "narrator-icons" !important;
font-size: 14px;
padding: 0 5px;
line-height: @RvtInputHeight;
}
&:focus, &:active {
border-color: @PrimaryAccentColor;
outline: none;
}
&:disabled {
cursor: default;
border-bottom: 1px dashed @LineBreakColor;
color: @LineBreakColor;
&:before {
color: fade(@LineBreakColor, 25%);
}
}
}
fieldset{
list-style: none;
display: none;
padding: 0;
margin: 0;
position: absolute;
min-width: 100%;
z-index: 50;
border: 1px solid @InputButtonGrey;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
box-sizing: border-box;
a{
color: inherit;
padding: 0 10px;
line-height: 30px;
display: block;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
&:hover, &:focus {
background-color: rgba(113,118,133,.25);
}
}
}
&.open{
button {
border-bottom: 2px solid @PrimaryAccentColor;
padding-bottom: 0;
&:before {
content: "\75";
}
}
fieldset{
display: block;
background-color: @CardBackgroundColor;
&:not(.multi-column-list) {
max-height: 300px;
overflow: auto;
}
}
}
&.drop-up {
fieldset {
bottom: 30px;
position: absolute;
margin-top: 0;
margin-bottom: -1px;
}
&.open fieldset {
border: 1px solid @InputButtonGrey;
border-radius: 0;
border-top-left-radius: 2px;
border-top-right-raidus: 2px;
}
}
}
[uib-dropdown] .dropdown-menu {
position: absolute;
z-index: 80;
background-color: #ffffff;
li:hover {
background: transparent;
}
}
[uib-dropdown]:not(.open) .dropdown-menu {
display: none;
}
.rvt-input-wrap.invalid{
.open .rvt-dropdown-head, .rvt-dropdown-head, button{
border-bottom-color: @BadColor;
&:focus, &:active {
border-bottom-color: @BadColor;
}
}
}
.rvt-dropdown {
max-width: 100%;
position: relative;
.TypeBody1;
.rvt-dropdown-head, button.rvt-dropdown-head {
border: none;
border-bottom: 1px solid @InputButtonGrey;
background: none;
position: relative;
padding: 0 25px 0 0;
height: @RvtInputHeight;
.TypeBody1;
width: 100%;
display: block;
text-align: inherit;
color: inherit;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
padding-bottom: 1px;
&:hover:not(:disabled), &:focus:not(:disabled), &:active:not(:disabled) {
border-width: 2px;
padding-bottom: 0;
}
&:before {
position: absolute;
right: 0;
top: 0;
content: "\61";
font-family: "narrator-icons" !important;
font-size: 14px;
padding: 0 5px;
line-height: @RvtInputHeight;
}
&:focus, &:active {
border-color: @PrimaryAccentColor;
outline: none;
}
&:disabled {
cursor: default;
border-bottom: 1px dashed @LineBreakColor;
color: @LineBreakColor;
&:before {
color: fade(@LineBreakColor, 25%);
}
}
}
&.drop-up {
.dropdown-menu {
bottom: 30px;
position: absolute;
margin-top: 0;
margin-bottom: -1px;
}
&.open ul {
border: 1px solid @InputButtonGrey;
border-radius: 0;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
}
&.open {
UL {
display: block;
background-color: @CardBackgroundColor;
&:not(.multi-column-list) {
max-height: 300px;
overflow: auto;
}
}
.rvt-dropdown-head {
border-bottom: 2px solid @PrimaryAccentColor;
padding-bottom: 0;
&:before {
content: "\75";
}
}
}
&:disabled, &[disabled] {
background: none;
.rvt-dropdown-head {
cursor: default;
border-bottom: 1px dashed fade(@LineBreakColor, 25%);
}
}
&.read-only {
.rvt-dropdown-head:disabled {
border: none;
color: @CardTextFontColor;
&:before {
content: none;
}
}
}
.dropdown-with-headers {
min-width: 100%;
ul {
position: relative;
border: none;
}
}
&.open .dropdown-with-headers {
border: 1px solid #002560;
border-top: none;
}
h4 {
margin: 0;
padding: 0 10px;
line-height: 30px;
color: @PrimaryAccentColor;
border-bottom: 1px solid @PrimaryAccentColor;
}
UL {
list-style: none;
display: none;
padding: 0;
margin: 0;
position: absolute;
min-width: 100%;
z-index: 50;
border: 1px solid @InputButtonGrey;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
box-sizing: border-box;
LI {
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
&.no-results {
cursor: default;
}
&.selected {
&:before {
position: absolute;
left: 0;
top: 0;
height: 100%;
content: ' ';
width: 3px;
background-color: @PrimaryAccentColor;
}
}
&:not(.no-results) a {
&:hover, &:focus {
background-color: rgba(113,118,133,.25);
}
&:active {
background-color: fade(@PrimaryAccentColor, 35%);
}
}
img {
height: 10px;
margin: 9px 0;
}
A {
color: inherit;
padding: 0 10px;
line-height: 30px;
display: block;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
}
}
}
.multi-column-list {
position: absolute;
width: 300% !important;
max-width: 100%;
min-width: 320px;
margin: 0;
padding: 5px;
background-color: @CardBackgroundColor;
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
ul {
position: relative;
padding: 0;
text-align: left;
border: none;
overflow: initial;
li {
margin: 0;
.TypeCaption;
line-height: 10px;
color: @TextOverGoodColor;
background-color: @CardBackgroundColor;
A {
line-height: 20px;
}
}
}
}
}
//#############################
// LIST BUTTONS
//#############################
.rvt-list-btn {
text-align: left;
position: relative;
display: inline-block;
width: 300%;
max-width: 100%;
vertical-align: middle;
.rvt-list-btn-head {
&:not([class*="rvt-btn-style"]){
.rvt-btn-style-standard;
}
&:disabled:not(.loading) {
opacity: 1;
border: 1px dashed @LineBreakColor;
background: none;
color: @LineBreakColor;
pointer-events: none;
&:after{
color: fade(@LineBreakColor, 25%);
}
}
}
&.disabled, &[disabled] {
> UL {
display: none;
}
}
&:not(.open) {
> UL {
display: none;
}
}
&.open {
.rvt-list-btn-head {
border-radius: 3px 3px 0 0;
background-color: @InputButtonGrey;
color: #fff;
&.rvt-btn-style-primary {
color: @CardTextFontColor;
background-color: @PrimaryAccentColor;
}
}
&.drop-up{
.rvt-list-btn-head{
border-radius: 0 0 3px 3px;
}
.dropdown-menu, .multi-column-list{
bottom: 26px;
position: absolute;
border-radius: 3px 3px 0 0;
}
}
.multi-column-list {
margin-top: -1px;
UL {
LI {
&:last-child {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
}
}
}
/* styles for nested list buttons */
&.rvt-nested-list-btn {
text-align: left;
.rvt-nested-list-btn-sub {
padding: 0;
.rvt-list-btn-head {
padding: 0;
border-radius: 0;
border: none;
&:after {
content: none;
}
a {
border: none;
color: @PrimaryAccentColor;
&:hover, &:active, &:focus{
color: @PrimaryAccentFontColor;
}
&:after {
content: "\61";
font-family: "narrator-icons" !important;
text-transform: none;
font-size: 14px;
right: 4px;
position: absolute;
}
}
}
&:not(.open) {
> UL {
display: none;
}
}
}
UL {
LI {
color: @CardTextFontColor;
background-color: @CardBackgroundColor;
}
}
> UL {
background-color: @CardBackgroundColor;
> LI {
&:last-child {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
overflow: hidden;
}
}
}
}
.rvt-list-btn-head {
padding: 0 30px 0 10px;
line-height: 28px;
display: block;
position: relative;
white-space: nowrap;
text-align: left;
width: 100%;
border-width: 1px;
&:after {
content: "\61";
font-family: "narrator-icons" !important;
text-transform: none;
font-size: 14px;
line-height: 24px;
position: absolute;
right: 7px;
}
&:hover:not(:disabled), &:focus:not(:disabled) {
border-width: 2px;
line-height: 26px;
padding: 0 29px 0 9px;
outline: none;
&:after {
line-height: 23px;
right: 6px;
}
}
}
> UL {
position: absolute;
width: 100%;
z-index: 50;
background-color: @CardBackgroundColor;
border: 1px solid @InputButtonGrey;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
UL {
list-style: none;
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: @CardBackgroundColor;
h4 {
margin: 5px;
font-size: 14px;
color: @PrimaryAccentColor;
border-bottom: 1px solid @PrimaryAccentColor;
font-family: @FontFamilySecondary;
}
LI {
list-style: none;
font-size: inherit;
background: none;
cursor: pointer;
.TypeCaption;
A {
padding: 0 6px;
line-height: 26px;
display: block;
text-decoration: none;
color: @CardTextFontColor;
&:active {
background-color: fade(@PrimaryAccentColor, 35%);
}
&:hover, &:focus {
background-color: rgba(113,118,133,.25);
outline: none;
}
}
}
}
.multi-column-list {
width: 300% !important;
max-width: 100%;
min-width: 300px;
margin: 0;
padding: 5px;
background-color: @CardBackgroundColor;
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
ul {
padding: 0;
text-align: left;
display: inline-block;
width: 100%;
li {
margin: 0;
font-size: 11px;
line-height: 10px;
color: @TextOverGoodColor;
background-color: @CardBackgroundColor;
}
li:hover {
background-color: @PrimaryAccentColor;
color: @TextOverBadColor;
}
}
}
}
//#############################
// PILL BUTTONS
//#############################
.rvt-pill-btn {
font-size: 0;
BUTTON {
.rvt-btn-style-standard;
.TypeBody1;
text-align: center;
display: inline-block;
min-width: 60px;
cursor: pointer;
text-decoration: none;
border-radius: 0;
&:first-child {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
&:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
&.active {
.rvt-btn-style-primary;
.TypeButton;
}
}
}
//#############################
// TEXT & FILE INPUTS
//#############################
input {
&::-ms-clear {
display: none;
}
}
.rvt-input-wrap {
display: block;
position: relative;
max-width: 100%;
font-size: 0;
&[class*="col-"]{
font-size: 0;
}
INPUT {
-webkit-appearance: none; //Removes glow on inputs on ipads
-webkit-tap-highlight-color:rgba(0,0,0,0);
color: @InputButtonGrey;
}
&:not(.rvt-number-stepper) INPUT:not(.rvt-check-box):not(.rvt-radio-btn){
width: 100%;
}
INPUT:not(.rvt-check-box):not(.rvt-radio-btn), TEXTAREA {
.TypeBody1;
border-radius: 0;
background: none;
padding: 0;
height: @RvtInputHeight;
text-overflow: ellipsis;
border: none;
border-bottom: 1px solid @InputButtonGrey;
padding-bottom: 1px;
&:hover:not(:disabled) {
border-bottom-width: 2px;
padding-bottom: 0;
}
&:active:not(:disabled), &:focus:not(:disabled) {
border-bottom: 2px solid @PrimaryAccentColor;
color: @InputButtonGrey;
padding-bottom: 0;
outline: none;
}
&:disabled:not(.read-only) {
border-bottom: 1px dashed @LineBreakColor;
color: @LineBreakColor;
}
}
&.title-field INPUT:not(.rvt-check-box):not(.rvt-radio-btn) {
.TypeTitle;
}
&.invalid {
INPUT:not(.rvt-check-box):not(.rvt-radio-btn) {
border-bottom-color: @BadColor;
&:active, &:focus {
border-bottom-color: @BadColor;
}
}
&.empty LABEL {
color: @BadColor;
}
}
&.read-only {
input:not(.rvt-check-box):not(.rvt-radio-btn):disabled {
border-bottom: none;
color: @CardTextFontColor;
}
}
LABEL {
.TypeLabel;
color: @CardTextFontColor;
transition: all 200ms ease;
display: block;
min-height: 19px;
}
&.empty {
LABEL {
min-height: 19px;
transform: translateY(22px);
.TypeBody1;
transition: all 200ms ease;
pointer-events: none;
}
&.invalid {
INPUT {
border-color: @BadColor;
}
LABEL {
color: @BadColor;
}
}
}
.input-description {
.TypeCaption;
display: block;
color: @LineBreakColor;
padding-top: 3px;
}
&.invalid {
INPUT, TEXTAREA {
border-bottom: 2px solid @BadColor;
}
& INPUT:not(:active):not(:focus)>LABEL, .input-description {
color: @BadColor;
}
}
}
.rvt-file-input {
input[type="file"] {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
label {
position: absolute;
width: 300px;
display: inline-block;
border: 1px solid @PrimaryAccentColor;
border-radius: 3px;
height: 30px;
background-color: @CardBackgroundColor;
cursor: pointer;
line-height: 30px;
font-size: 0;
color: @TextOverGoodColor;
SPAN {
position: absolute;
line-height: 28px;
&.file {
.TypeBody1;
padding-left: 5px;
width: 49%;
overflow: hidden;
}
}
button{
float: right;
line-height: 26px;
border-radius: 0 3px 3px 0;
}
}
}
//#############################
// QUICK ACTIONS
//#############################
.rvt-quickActions {
.TypeButton
A {
text-align: center;
text-indent: 1px;
line-height: 23px;
color: @PrimaryAccentColor;
cursor: pointer;
border: 1px solid @CardBackgroundColor;
width: 24px;
height: 23px;
display: inline-block;
border-radius: 3px;
margin: 0 2px;
svg {
width: 100%;
height: 100%;
display: block;
* {
fill: @PrimaryAccentColor;
}
}
&:hover {
border: 1px solid darken(@PrimaryAccentColor, 4%);
svg {
* {
fill: darken(@PrimaryAccentColor, 4%);
}
}
}
&:active {
border: 1px solid darken(@PrimaryAccentColor, 8%);
background-color: darken(@PrimaryAccentColor, 8%);
svg {
* {
fill: @CardBackgroundColor;
}
}
}
}
}
input[type="checkbox"] {
&:checked {
&.fg-checkbox {
+ label {
background-color: @CardBackgroundColor;
&:after {
content: '';
border: 3px solid @CardTextFontColor;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
height: 6px;
width: 10px;
top: 1px;
left: 1px;
position: absolute;
}
}
}
}
&.fg-checkbox {
display: none;
+ label {
height: 15px;
width: 15px;
background: #ddd;
border-radius: 3px;
position: absolute;
margin-top: -7px;
transition: all 0.3s ease;
+ span {
margin-top: -5px;
margin-left: 20px;
position: absolute;
}
}
}
}
//#############################
// TOOLTIPS
//#############################
@tooltip-arrow-width: 4px;
.tooltip {
position: absolute;
z-index: 10;
display: block;
width: auto;
&.top {
margin-top: -3px;
padding: @tooltip-arrow-width 0;
.tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @CardTextFontColor;
}
}
&.right {
margin-left: 3px;
padding: 0 @tooltip-arrow-width;
.tooltip-arrow {
top: 50%;
left: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
border-right-color: @CardTextFontColor;
}
}
&.left {
margin-left: -3px;
padding: 0 @tooltip-arrow-width;
.tooltip-arrow {
top: 50%;
right: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
border-left-color: @CardTextFontColor;
}
}
&.bottom {
margin-top: 3px;
padding: @tooltip-arrow-width 0;
.tooltip-arrow {
top: 0;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @CardTextFontColor;
}
}
&.top-left .tooltip-arrow {
bottom: 0;
right: @tooltip-arrow-width;
margin-bottom: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @CardTextFontColor;
}
&.top-right .tooltip-arrow {
bottom: 0;
left: @tooltip-arrow-width;
margin-bottom: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @CardTextFontColor;
}
&.bottom-left .tooltip-arrow {
top: 0;
right: @tooltip-arrow-width;
margin-top: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @CardTextFontColor;
}
&.bottom-right .tooltip-arrow {
top: 0;
left: @tooltip-arrow-width;
margin-top: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @CardTextFontColor;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip-inner {
max-width: 180px;
padding: 3px 8px;
color: @TextOverBadColor;
text-align: center;
background-color: @CardTextFontColor;
border-radius: 3px;
}
}
//#############################
// POPOVERS
//#############################
@popover-arrow-outer-width: 6px;
@popover-arrow-width: 4px;
.popover {
z-index: 1060;
padding: 1px;
position: absolute;
top: 0;
left: 0;
z-index: 10;
display: none;
max-width: 276px;
padding: 1px;
// Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
background-color: @BadColor;
background-clip: padding-box;
-webkit-background-clip: padding-box;
border: 1px solid @BadColor;
border-radius: 3px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
// Offset the popover to account for the popover arrow
&.top {
margin-top: -@popover-arrow-width;
> .arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-bottom-width: 0;
border-top-color: @BadColor;
bottom: -@popover-arrow-outer-width;
&:after {
content: " ";
bottom: 1px;
margin-left: -@popover-arrow-width;
border-bottom-width: 0;
border-top-color: @BadColor;
}
}
}
&.right {
margin-left: @popover-arrow-width;
> .arrow {
top: 50%;
left: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
border-left-width: 0;
border-right-color: @BadColor;
&:after {
content: " ";
left: 1px;
bottom: -@popover-arrow-width;
border-left-width: 0;
border-right-color: @BadColor;
}
}
}
&.bottom {
margin-top: @popover-arrow-width;
> .arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-top-width: 0;
border-bottom-color: @BadColor;
top: -@popover-arrow-outer-width;
&:after {
content: " ";
top: 1px;
margin-left: -@popover-arrow-width;
border-top-width: 0;
border-bottom-color: @BadColor;
}
}
}
&.left {
margin-left: -@popover-arrow-width;
> .arrow {
top: 50%;
right: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
border-right-width: 0;
border-left-color: @BadColor;
&:after {
content: " ";
right: 1px;
border-right-width: 0;
border-left-color: @BadColor;
bottom: -@popover-arrow-width;
}
}
}
.popover-title {
margin: 0; // reset heading margin
padding: 8px 14px;
background-color: @BadColor;
border-radius: 3px;
color: @TextOverBadColor;
}
.popover-content {
padding: 9px 14px;
color: @TextOverBadColor;
}
> .arrow {
border-width: @popover-arrow-outer-width;
&:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
&:after {
border-width: @popover-arrow-width;
content: "";
}
}
}
//#############################
// DATE PICKERS
//#############################
[uib-datepicker-popup-wrap] {
position: absolute;
z-index: 20;
}
.uib-clear {
display: none;
}
.rvt-datepicker {
font-size: 0;
position: relative;
BUTTON.rvt-icon-datepicker {
position: absolute;
right: 5px;
border: none;
padding: 0;
&:disabled {
border: none;
}
&:hover {
line-height: 28px;
padding: 0;
}
&:active, &:focus {
background: none;
border: none;
line-height: 28px;
color: @PrimaryAccentColor;
}
}
ul.uib-datepicker-popup {
list-style-type: none;
left: 0;
cursor: default;
padding: 0;
margin-top: 5px;
border: 1px solid @InputButtonGrey;
border-top: 20px solid @PrimaryAccentColor;
border-radius: 3px;
z-index: 100;
* {
font-family: @FontFamilyPrimary;
color: @CardTextFontColor;
&:focus {
outline: none;
}
}
.uib-datepicker {
background-color: @CardBackgroundColor;
padding: 10px 15px 15px;
cursor: default;
.uib-yearpicker, .uib-monthpicker, .uib-daypicker{
cursor: default;
}
td {
padding: 0;
&.uib-day button{
&.active {
border: 0;
padding: 9px;
background-color: fade(@PrimaryAccentColor, 35%);
&:hover {
border: 2px solid @PrimaryAccentColor;
padding: 7px;
}
}
}
}
th {
.TypeBody2;
small {
.TypeCaption;
cursor: default;
}
button:not(.uib-title) {
border: 1px solid @InputButtonGrey;
padding: 8px 9px;
&:hover {
border-width: 2px;
padding: 7px 8px;
}
}
}
tr {
text-align: center;
}
BUTTON {
border: 0;
background: none;
border-radius: 2px;
padding: 9px;
cursor: pointer;
&:focus{
outline: none;
}
&:hover:not(:disabled), &:active:not(:disabled) {
background: none;
border: 1px solid @InputButtonGrey;
padding: 8px;
}
&:disabled * {
color: @LineBreakColor;
}
.glyphicon-chevron-left:before {
content: "\25C4";
color: @InputButtonGrey;
font-style: normal !important;
}
.glyphicon-chevron-right:before {
content: "\25BA";
color: @InputButtonGrey;
font-style: normal !important;
}
}
.text-muted {
color: @LineBreakColor;
}
}
}
}
//#############################
// MODAL DIALOG BOXES
//#############################
rvt-dialog {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
top: 0;
.rvt-modal-container{
width: 40%;
height: 20%;
position: absolute;
left: 30%;
top: 40%;
background-color: #fff;
}
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 110;
display: none;
-webkit-overflow-scrolling: touch;
text-align: center;
.modal-dialog {
overflow: auto;
height: auto;
margin: 30px auto;
display: inline-block;
text-align: left;
&.force-vert-center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
max-height: 90%;
}
.modal-content {
background-color: @CardBackgroundColor;
-webkit-background-clip: padding-box;
background-clip: padding-box;
padding: 40px;
.modal-header {
margin: 0 0 10px 0;
h4 {
.TypeTitle;
font-weight: normal;
margin: 0;
padding: 0;
}
}
.modal-body {
padding: 20px 0;
margin: 0;
span {
.TypeBody1;
}
}
.modal-footer {
text-align: right;
margin: 0;
padding: 0;
}
}
.modal-btn {
position: absolute;
top: -10px;
right: -10px;
height: 30px;
width: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}
}
}
.modal-open {
overflow: hidden;
.modal {
//overflow-x: hidden;
//overflow-y: auto;
overflow: auto;
}
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
background-color: @OverlayColor;
}
@media (min-width: 400px){
.modal {
.modal-dialog {
min-width: 350px;
}
}
}
@media (min-width: 600px){
.modal {
.modal-dialog {
min-width: 500px;
}
}
}
//#############################
// PAGINATIONS
//#############################
.rvt-pagination {
.TypeButton;
font-weight: bold;
margin: 0;
cursor: default;
li {
list-style-type: none;
display: inline-block;
border-radius: 3px;
margin: 0 2px;
text-align: center;
line-height: 24px;
font-size: 12px;
font-weight: 400;
&.pagination-prev a, &.pagination-next a {
width: auto !important;
display: block;
margin: 0 5px;
}
a {
text-decoration: none !important;
color: @PrimaryAccentColor;
display: block;
width: 24px;
height: 24px;
border: 1px solid transparent;
&.active {
border-radius: 3px;
color: @PrimaryAccentFontColor;
border: 1px solid @PrimaryAccentColor;
background-color: @PrimaryAccentColor;
&:hover {
color: @PrimaryAccentFontColor;
background-color: darken(@PrimaryAccentColor, 4%);
}
}
}
&:hover {
color: darken(@PrimaryAccentColor, 4%);
text-decoration: none;
}
&.disabled {
visibility: hidden;
}
}
}
//#############################
// ACCORDIAN PANELS
//#############################
rvt-accordion{
display: block;
&:not(.open){
.rvt-accordion-body{
display: none;
}
}
}
@media print {
.panel-collapse{
height: auto !important;
display: block !important;
}
}
uib-accordion:not(.rvt-accordion) {
.panel {
margin-bottom: 20px;
background-color: @CardBackgroundColor;
border: 1px solid transparent;
//border-radius: 4px;
//-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
//box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
&.panel-default {
border-color: #ddd;
& > .panel-heading {
& > .panel-heading {
color: #333;
background-color: #f5f5f5;
border-color: #ddd;
& + .panel-collapse{
> .panel-body {
border-top-color: #ddd;
}
}
}
.panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #ddd;
}
}
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
.panel-title {
margin-top: 0;
margin-bottom: 0;
.TypeBody1;
a {
text-decoration: none;
color: #0d3349;
}
}
}
}
}
.collapse {
display: none;
&.in {
display: block;
}
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: .35s;
-o-transition-duration: .35s;
transition-duration: .35s;
-webkit-transition-property: height, visibility;
-o-transition-property: height, visibility;
transition-property: height, visibility;
}
.panel-group {
margin-bottom: 20px;
.panel {
margin-bottom: 0;
border-radius: 4px;
.panel-heading {
border-bottom: 0;
& + .panel-collapse > .panel-body {
border-top: 1px solid #ddd;
}
}
.panel-footer + .panel-collapse .panel-body {
border-bottom: 1px solid #ddd;
}
}
.panel + .panel {
margin-top: 5px
}
}
}
uib-accordion.rvt-accordion {
.panel {
border: none;
margin-bottom: 30px;
.panel-heading {
padding: 0;
border: none;
.panel-title {
margin: 0 0 5px 0;
.TypeBody1;
color: @CardTextFontColor;
&:after {
content: "\61";
font-family: "narrator-icons" !important;
color: @LineBreakColor;
position: relative;
right: 0;
top: 0;
font-size: 14px;
padding: 0 5px;
}
a, a:focus {
text-decoration: none;
outline: none;
color: @CardTextFontColor;
}
}
&:hover .panel-title:after {
color: @CardTextFontColor;
}
}
.panel-collapse {
.panel-body {
border: none;
}
}
&.panel-open {
.panel-title:after {
content: "\75";
color: @PrimaryAccentColor;
}
.panel-heading .panel-title:after {
color: @PrimaryAccentColor;
}
}
}
.collapse {
display: none;
&.in {
display: block;
}
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: .35s;
-o-transition-duration: .35s;
transition-duration: .35s;
-webkit-transition-property: height, visibility;
-o-transition-property: height, visibility;
transition-property: height, visibility;
}
}
//#############################
// TOGGLE SWITCHES
//#############################
.rvt-toggle-switch {
position: relative;
display: inline-block;
text-align: center;
cursor: default;
.toggle-label {
color: @CardTextFontColor;
cursor: pointer;
.TypeBody1;
&.selected {
font-weight: 700;
}
}
label {
position: relative;
top: 5px;
margin: 0 15px;
width: 40px;
height: 20px;
cursor: pointer;
background-color: transparent;
border-radius: 3px;
&:before, &:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: " ";
}
&:before {
right: 1px;
background-color: @NeutralExpenseColor;
border-radius: 3px;
transition: background 0.4s;
}
&:after {
width: 15px;
height: 15px;
margin: 1px;
background-color: @CardBackgroundColor;
border-radius: 3px;
.RvtBoxShadow;
transition: margin 0.4s;
}
}
input.toggle-switch {
position: absolute;
visibility: hidden;
&:checked + label {
&::before {
background-color: @NeutralExpenseColor;
}
&::after {
margin-left: 22px;
}
}
}
&.disabled {
.toggle-label {
color: #ccc;
cursor: default;
}
label {
cursor: default;
&:before {
background-color: #ccc;
}
}
}
}
//#############################
// NUMBER STEPPER
//#############################
.rvt-number-stepper {
font-size: 0; // Clears white-space from between buttons and input
display: inline-block;
white-space: nowrap;
&.invalid .side-label{
color: @BadColor;
}
.side-label {
.TypeCaption;
}
INPUT {
margin-right: 15px;
width: ~"calc(100% - 85px)"; // Accounts for button width
}
[class*="-btn-"] {
width: 35px;
vertical-align: top;
padding: 0;
&:hover{
padding: 0;
}
&:before {
font-size: 20px;
}
&:first-of-type {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:last-of-type {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
}
//#############################
// RADIO BUTTONS
//#############################
form.invalid {
span.form-title::after {
.IconInvalid;
}
span.invalid::after{
.IconInvalid;
position: relative;
}
}
.form-title {
.TypeCaption;
}
.rvt-check-box, .rvt-radio-btn {
height: 0;
width: 0;
opacity: 0 !important;
position: absolute;
outline: none;
+ label {
.TypeBody1;
margin-right: 15px;
user-select: none;
height: @RvtInputHeight;
line-height: @RvtInputHeight;
span {
display: inline-block;
height: 22px;
width: 22px;
cursor: pointer;
border: 1px solid @InputButtonGrey;
margin-right: 5px;
border-radius: 3px;
vertical-align: middle;
background: none;
* {
font-size: 0;
}
&:after {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: transparent;
}
}
&:hover, &:focus {
outline: none;
span {
outline: none;
border-width: 2px;
}
}
}
&:disabled *, &.read-only *{
pointer-events: none;
}
}
.rvt-check-box {
&:focus + label span {
border: 2px solid @PrimaryAccentColor;
}
&:checked {
+ label span{
border: none;
background-color: fade(@PrimaryAccentColor, 35%);
&:after {
font-family: "narrator-icons" !important;
content: '\5a';
line-height: 20px;
font-size: 16px;
vertical-align: top;
text-align: center;
color: @CardTextFontColor;
background: none;
}
&:hover {
border: 2px solid @PrimaryAccentColor;
&:after {
line-height: 16px;
}
}
}
&:focus, &:focus:hover, &:focus:active {
+ label span {
background-color: @PrimaryAccentColor;
border: none;
line-height: 20px;
&:after {
line-height: 20px;
}
}
}
}
&:disabled:not(.read-only) {
+ label {
opacity: 1;
span {
background: none;
color: @LineBreakColor;
opacity: 1;
cursor: default;
border: 1px dashed @LineBreakColor;
&:after {
color: @LineBreakColor;
}
}
}
&:hover + label span:after {
line-height: 20px;
}
}
&.read-only:disabled {
+ label {
span {
pointer-events: none;
border: none;
background: none;
&:after {
color: @CardTextFontColor;
}
}
}
&:active + label span:after{
line-height: 20px;
}
}
}
.rvt-radio-btn {
+ label {
span {
-moz-border-radius: 50%;
border-radius: 50%;
padding: 4px;
&:after {
-moz-border-radius: 50%;
border-radius: 50%;
}
}
}
&:checked:not(:disabled) {
+ label {
span {
border: 2px solid @InputButtonGrey;
padding: 3px;
&:after {
background-color: @InputButtonGrey;
transition: background-color ease 400ms;
}
}
}
}
&:disabled:not(.read-only) {
+ label {
span {
padding: 4px;
border: 1px dashed @LineBreakColor;
cursor: default;
}
}
}
&:checked:disabled {
+ label span:after{
background-color: @LineBreakColor;
}
}
&.read-only:disabled {
+ label {
span {
border-color: rgb(62, 75, 91);
&:after {
background-color: rgb(62, 75, 91);
}
}
&:hover span {
border-width: 1px;
padding: 4px;
cursor: default;
}
}
}
}
//#############################
// TOOLTIPS
//#############################
[class*="rvt-tooltip"].tooltip{
.TypeBody1;
position: absolute;
width: 100%;
max-width: 250px;
padding: 8px 0;
margin: -4px 0 0 -6px;
.tooltip-arrow{
&::after{
border-width: 9px;
display: block;
content: " ";
border-style: solid;
border-color: transparent;
}
}
.tooltip-inner {
border-radius: 3px;
text-align: center;
cursor: default;
padding: 2px;
max-width: none;
.RvtBoxShadow;
background-color: @CardTextFontColor;
color: @PrimaryAccentFontColor;
border: 2px solid @CardTextFontColor;
}
&.top {
.tooltip-arrow {
border-top-color: @CardTextFontColor;
border-width: 10px 10px 0;
&::after {
margin: -12px -9px;
border-top-color: @CardTextFontColor;
bottom: 1px;
}
}
}
&.bottom {
.tooltip-arrow {
border-width: 0 10px 10px;
border-bottom-color: @CardTextFontColor;
&::after {
margin: -6px -9px;
border-bottom-color: @CardTextFontColor;
}
}
.tooltip-inner {
border-color: @CardTextFontColor;
}
}
}
.conditional-tooltip.tooltip {
position: absolute;
width: 100%;
max-width: 250px;
padding: 10px 0;
.TypeBody1;
&.top {
margin: 0 0 0 -5px;
}
.tooltip-arrow {
border-top-color: @CardTextFontColor;
border-width: 10px 10px 0;
&::after {
border-width: 9px;
display: block;
content: " ";
border-style: solid;
border-color: transparent;
margin: -12px -9px;
border-top-color: @CardTextFontColor;
bottom: 1px;
}
}
.tooltip-inner {
padding: 15px;
text-align: left;
color: @PrimaryAccentFontColor;
border: 2px solid @CardTextFontColor;
background-color: @CardTextFontColor;
max-width: none;
.icon-x {
position: absolute;
top: 13px;
right: 5px;
font-size: 15px;
color: @PrimaryAccentFontColor;
cursor: pointer;
}
}
}
.rvt-tooltip-label.tooltip {
max-width: 250px;
padding: 8px 0;
.TypeCaption;
&.top {
margin: -3px 0 0 -6px;
.tooltip-arrow {
border-top-color: fade(@CardTextFontColor, 90%);
border-width: 8px 10px 0;
&::after {
content: none;
}
}
}
.tooltip-inner {
background-color: fade(@CardTextFontColor, 90%);
color: @PrimaryAccentFontColor;
border: 0;
padding: 2px 6px;
}
&.bottom {
margin: -5px 0 0 -7px;
.tooltip-arrow {
border-width: 0 10px 8px;
border-bottom-color: fade(@CardTextFontColor, 90%);
&::after {
content: none;
}
}
}
}
//#############################
// LOADING SPINNER
//#############################
fg-loading-spinner, rvt-circle-loader {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
// These styles allow the loading spinner to take up the entire space of the widget it is placed in, and center the animation accordingly
&.delayed{
.loader:before, .loader:after{
-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
animation-delay: 1s;
-webkit-transform: scale(0); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: scale(0); /* IE 9 */
transform: scale(0); /* Firefox 16+, IE 10+, Opera */
}
}
.loader, .rvt-circle-loader {
opacity: 0.6;
&:before {
content: "";
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
position: absolute;
background-color: #000; //SWITCH to variable when created
-webkit-animation: pulse 3s ease-out infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: pulse 3s ease-out infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
border-radius: 50%;
}
&:after {
content: "";
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
position: absolute;
background-color: #000; //SWITCH to variable when created
-webkit-animation: pulse 1.5s ease-out infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: pulse 1.5s ease-out infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
border-radius: 50%;
}
}
&.secondary{
.loader {
opacity: 1;
&:before, &:after{
background-color: @CardBackgroundColor;
}
}
}
}
rvt-loading-spinner, rvt-circle-loader {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
// These styles allow the loading spinner to take up the entire space of the widget it is placed in, and center the animation accordingly
&.delayed{
.loader:before{
-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
animation-delay: 1s;
-webkit-transform: scale(0); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: scale(0); /* IE 9 */
transform: scale(0); /* Firefox 16+, IE 10+, Opera */
}
.loader:after{
-webkit-animation-delay: 1.5s; /* Safari 4.0 - 8.0 */
animation-delay: 1.5s;
-webkit-transform: scale(0); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: scale(0); /* IE 9 */
transform: scale(0); /* Firefox 16+, IE 10+, Opera */
}
.loader-two:before{
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-delay: 2s;
-webkit-transform: scale(0); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: scale(0); /* IE 9 */
transform: scale(0); /* Firefox 16+, IE 10+, Opera */
}
}
.loader {
opacity: 0.75;
&:before {
opacity: 0;
content: "";
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
position: absolute;
background-color: @CardTextFontColor;
-webkit-animation: pulse 3s ease-out infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: pulse 3s ease-out infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
border-radius: 50%;
}
&:after {
opacity: 0;
content: "";
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
position: absolute;
background-color: @CardTextFontColor;
-webkit-animation: pulse 3s ease-out infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: pulse 3s ease-out infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
border-radius: 50%;
animation-delay: .5s;
}
}
.loader-two {
opacity: 0.75;
&:before {
opacity: 0;
content: "";
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
position: absolute;
background-color: @CardTextFontColor;
-webkit-animation: pulse 3s ease-out infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: pulse 3s ease-out infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
border-radius: 50%;
animation-delay: 1s;
}
}
&.secondary{
.loader, .loader-two {
opacity: 1;
&:before, &:after{
background-color: @CardBackgroundColor;
}
}
}
}
.rvt-btn-style-primary {
fg-loading-spinner{
.loader {
opacity: 1;
text-align: center;
&:before {
background-color: @PrimaryAccentFontColor;
}
&:after {
background-color: @PrimaryAccentFontColor;
}
}
}
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(0); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: scale(0); /* IE 9 */
transform: scale(0); /* Firefox 16+, IE 10+, Opera */
opacity: 1;
}
100% {
-webkit-transform: scale(0.60); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: scale(0.60); /* IE 9 */
transform: scale(0.60); /* Firefox 16+, IE 10+, Opera */
opacity: 0;
}
}
@keyframes pulse {
0% {
-webkit-transform: scale(0); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: scale(0); /* IE 9 */
transform: scale(0); /* Firefox 16+, IE 10+, Opera */
opacity: 0.6;
}
100% {
-webkit-transform: scale(0.60); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: scale(0.60); /* IE 9 */
transform: scale(0.60); /* Firefox 16+, IE 10+, Opera */
opacity: 0;
}
}
//#############################
// TILE ELEMENTS
//#############################
.rvt-tile {
height: 60px;
width: auto;
background-color: rgba(255, 255, 255, 0.75);
padding: 10px;
&:hover {
background-color: #fff;
}
}
.rvt-expandable-tile {
height: auto;
min-height: 60px;
max-height: 60px;
background-color: rgba(255,255,255,0.75);
padding: 10px;
&.rvt-tile-expanded{
max-height: none;
background-color: @CardBackgroundColor;
&:before {
height: 100%;
}
}
&:hover {
background-color: #fff;
}
.rvt-tile-content {
margin-top: 10px;
}
}
.rvt-tile-warning {
min-height: 22px;
padding: 10px;
background-color: rgb(245,245,245); //SWITCH to variable when created
color: #3c3d42;
line-height: 18px;
.TypeBody1;
&.selected{
.RvtBoxShadow;
}
}
.rvt-tile-selected {
background-color: @CardBackgroundColor;
.RvtBoxShadow;
&:before {
position: absolute;
height: inherit;
width: 4px;
background-color: @PrimaryAccentColor;
content: " ";
margin: -10px;
}
}
//#############################
// MISC FIXES
//#############################
input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9;
line-height: normal;
padding: 0;
pointer-events: none;
}
label {
display: inline-block;
max-width: 100%;
}
.loaderSpinner,
.loaderSpinner:before,
.loaderSpinner:after {
background: #e9662c;
-webkit-animation: loadSpinnerAnimation 1s infinite ease-in-out;
animation: loadSpinnerAnimation 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loaderSpinner:before,
.loaderSpinner:after {
position: absolute;
top: 0;
content: '';
}
.loaderSpinner:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loaderSpinner {
text-indent: -9999em;
margin: 22px auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loaderSpinner:after {
left: 1.5em;
}
@-webkit-keyframes loadSpinnerAnimation {
0%,
80%,
100% {
box-shadow: 0 0 #e9662c;
height: 4em;
}
40% {
box-shadow: 0 -2em #e9662c;
height: 5em;
}
}
@keyframes loadSpinnerAnimation {
0%,
80%,
100% {
box-shadow: 0 0 #e9662c;
height: 4em;
}
40% {
box-shadow: 0 -2em #e9662c;
height: 5em;
}
}
@keyframes slideIn {
0%{
opacity: 0;
}
50%{
opacity:0;
}
100%{
opacity:1;
}
}
#root-page-content-wrapper [ui-view].ng-enter:not(.analytic-UI) {
animation: slideIn 0.4s both ease-in-out;
}
#root-page-content-wrapper [ui-view].ng-leave:not(.analytic-UI) {
display: none;
}
@charset "UTF-8";
@font-face {
font-family: "rivet-icons";
src:url("rivet_package/lib/content/icons/fonts/rivet-icons.eot");
src:url("rivet_package/lib/content/icons/fonts/rivet-icons.eot?#iefix") format("embedded-opentype"),
url("rivet_package/lib/content/icons/fonts/rivet-icons.woff") format("woff"),
url("rivet_package/lib/content/icons/fonts/rivet-icons.ttf") format("truetype"),
url("rivet_package/lib/content/icons/fonts/rivet-icons.svg#rivet-icons") format("svg");
font-weight: normal;
font-style: normal;
}
[data-icon]:before {
font-family: "rivet-icons" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="rvt-icon-"]:before,
[class*=" rvt-icon-"]:before {
font-family: "rivet-icons" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.rvt-icon-add:before {
content: "\61";
}
.rvt-icon-datepicker:before {
content: "\62";
}
.rvt-icon-delete:before {
content: "\63";
}
.rvt-icon-disability-insurance:before {
content: "\64";
}
.rvt-icon-education:before {
content: "\65";
}
.rvt-icon-help:before {
content: "\66";
}
.rvt-icon-long-term-care-insurance:before {
content: "\67";
}
.rvt-icon-life-insurance:before {
content: "\68";
}
.rvt-icon-sync:before {
content: "\69";
}
.rvt-icon-person:before {
content: "\6a";
}
.rvt-icon-purchase:before {
content: "\6b";
}
.rvt-icon-reset:before {
content: "\6c";
}
.rvt-icon-subtract:before {
content: "\6d";
}
.rvt-icon-resync:before {
content: "\6e";
}
.rvt-icon-retirement:before {
content: "\6f";
}
.rvt-icon-critical-illness:before {
content: "\70";
}
.rvt-icon-clock:before {
content: "\73";
}
.semi-transparent-background {
background-color: @CardBackgroundColor;
}
.noTransition{
transition:none !important;
}
.no-select {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* non-prefixed version, currently
not supported by any browser */
}
#root-wrapper{
padding-left: 0;
&.nav-alternate{
padding-left: 265px;
}
}
fg-help-overlay{
position: relative;
}
.helpOverlay {
position: absolute;
color: @BodyFontColor;
width: 90%;
z-index: 98;
font-size: 16px;
line-height: 35px;
font-weight: 400;
.helpTitleText {
max-width: 600px;
margin: 0 auto;
border-bottom: 1px dotted @HeadingFontColor;
padding-bottom: 5px;
margin-bottom: 20px;
.TypeTitle;
line-height: 28px;
}
.helpInfoText {
max-width: 600px;
margin: 0 auto;
margin-bottom: 18px;
.TypeHeadlineBold;
}
.helpActionText {
max-width: 600px;
margin: 0 auto;
.TypeSubheading;
}
.helpMoreUrl {
font-size: 16px;
color: white !important;
cursor: pointer;
}
}
//#rvt-body{
// font-family: 'Roboto';
// margin: 0;
// background-color: #fafafa;
//
// #rvt-component-library{
// max-width: 1200px;
// margin: 0 auto;
// padding-top: 30px;
//
// *{
// box-sizing: border-box;
// }
//
// h1{
// font-size: 34px;
// }
// h2{
// font-size: 34px;
// margin: 0 0 30px 0;
// font-weight: 400;
// }
// h3{
// font-size: 24px
// }
// img{
// max-width: 100%;
// }
// .rvt-card{
// padding: 30px;
// margin-bottom: 30px;
// .switcher {
// text-align: right;
// a {
// cursor: pointer;
// &.active {
// font-weight: 700;
// }
// }
// }
// }
// #rvt-icons{
// [class*="icon-"]{
// &:before{
// font-size: 30px;
// margin-right: 15px;
// }
// font-size: 12px;
// vertical-align: top;
// line-height: 30px;
// }
// }
//
// .example-block{
// min-height: 70px;
// position: relative;
// }
// #rvt-loading-saving{
// .example-block{
// height: 1px;
// }
// }
// #rvt-tooltip{
// .example-block{
// padding: 30px 0;
// text-align: center;
// }
// }
// .snippet-block, .script-block{
// width: 100%;
// resize: none;
// margin-bottom: 70px;
// background-color: #f1f1f1;
// overflow-x: auto;
// padding: 15px;
// }
//
// xmp{
// background-color: #f9f9f9;
// padding: 0 15px 15px;
// margin: 0;
// white-space: pre-wrap;
// border: 1px solid #ccc;
// display: block;
// margin-bottom: 45px;
// margin-top: 15px;
// font-size: 12px;
// }
// }
// rvt-nav{
// display: block;
// width: 210px;
// background-color: #2f2f2f;
// height: 100%;
// position: fixed;
// h2 {
// padding-left: 15px;
// color: #fff;
// }
// div{
// line-height: 30px;
// color: #fff;
// cursor: pointer;
// padding: 0 15px;
// }
// }
//
//}
.row .page-title {
color: @BackgroundTextFontColor;
text-align: center;
.TypeDisplay1;
margin-bottom: 20px;
padding-top:20px;
@media(min-width:768px){
padding-top:40px;
}
@media (max-width:767px) and (max-device-aspect-ratio: 13/9){
padding-top:60px;
}
}
.page-subtitle {
color: @BackgroundTextFontColor;
font-weight: 400;
font-size: 12px;
text-align: center;
font-family: @FontFamilySecondary;
letter-spacing: 0.065em;
text-transform: uppercase;
padding: 10px 0px 10px 0px;
}
.page-text {
.TypeHeadline;
text-align: center;
color: @BackgroundTextFontColor;
line-height: 25px;
padding: 10px;
}
//##########################################################
// TEXT STYLES PULLED FROM INPUT STYLES
//##########################################################
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//-------------------------------
//New text styles
.nav-text-style{
font-family: @FontFamilyPrimary;
font-size: 14px;
text-align: left;
color: #fafafa;
}
.radio-button-text{
color: #3c3d42;
font-family: @FontFamilySecondary;
font-size: 10px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
}
.h1-page-title{
font-family: @FontFamilyPrimary;
font-weight: 100;
text-align: center;
font-size: 36px;
color: #3c3d42;
}
.h2-analytics-title{
color: #3d3d3d;
font-family: @FontFamilyPrimary;
font-size: 25px;
font-weight: 100;
text-align: center;
}
.h3-help-heading{
color: #ffffff;
font-family: @FontFamilyPrimary;
font-size: 20px;
font-weight: 100;
line-height: 28px;
text-align: left;
}
.h4-card-title{
font-family: @FontFamilyPrimary;
font-weight: 100;
color: #3c3d42;
font-size: 18px;
text-align: left;
}
.h5-column-heading{
color: #3c3d42;
font-family: @FontFamilySecondary;
font-size: 11px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
}
.alert-list-unread{
color: #3c3d42;
font-family: @FontFamilyPrimary;
font-size: 13px;
font-weight: bold;
text-align: left;
}
.alert-list-read{
color: #3c3d42;
font-family: @FontFamilyPrimary;
font-size: 13px;
font-weight: normal;
text-align: left;
}
.client-count{
color: #3c3d42;
font-family: @FontFamilyPrimary;
font-size: 18px;
font-weight: 100;
text-align: left;
}
.analytic-tiles{
color: #3c3d42;
font-size: 15px;
font-family: @FontFamilyPrimary;
text-align: left;
}
.analytic-description{
color: #3c3d42;
font-family: @FontFamilyPrimary;
font-size: 16px;
text-align: left;
}
.analytic-description-filter{
color: #3c3d42;
font-family: @FontFamilyPrimary;
font-size: 16px;
text-align: left;
}
.segment-control-text{
.active {
color: #ffffff;
font-family: @FontFamilySecondary;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.inactive {
font-family: @FontFamilySecondary;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: #3cb878;
}
}
.chart-tooltip-text{
color: #3c3d42;
font-family: @FontFamilyPrimary;
font-size: 12px;
text-align: left;
}
.alert-bar{
.description{
font-family: @FontFamilyPrimary;
font-size: 17px;
text-align: center;
color: #fafafa;
.count{
font-weight: bold;
}
}
.cta-link{
font-family: @FontFamilyPrimary;
font-size: 14px;
font-style: italic;
font-weight: 100;
text-align: center;
text-decoration: underline;
color: #fafafa;
}
}
.graph-legend{
color: rgb(60, 61, 66);
font-family: @FontFamilyPrimary;
font-size: 12px;
font-weight: bold;
text-align: left;
}
.graph-scale{
.vertical{
.graph-label{
color: rgb(60, 61, 66);
font-family: @FontFamilyPrimary;
font-size: 12px;
text-align: left;
}
.graph-scale{
color: rgb(60, 61, 66);
font-family: @FontFamilyPrimary;
font-size: 11px;
text-align: left;
}
}
.horizontal{
.graph-label{
color: rgb(60, 61, 66);
font-family: @FontFamilyPrimary;
font-size: 12px;
text-align: left;
}
.graph-scale{
color: rgb(60, 61, 66);
font-family: @FontFamilyPrimary;
font-size: 11px;
text-align: left;
}
}
}
.help-action-text{
color: #ffffff;
font-family: @FontFamilyPrimary;
font-weight: 400;
font-size: 16px;
text-align: left;
}
.help-info-text{
color: #ffffff;
font-family: @FontFamilyPrimary;
font-size: 20px;
font-weight: bold;
text-align: left;
}
.toggle-switch{
.selected{
color: #3c3d42;
font-family: @FontFamilyPrimary;
font-size: 14px;
font-weight: bold;
text-align: center;
}
.not-selected{
font-family: @FontFamilyPrimary;
color: #3c3d42;
font-size: 14px;
font-weight: 400;
text-align: center;
}
}
.pagination-text{
text-decoration: none;
text-align: center;
font-weight: normal;
font-size: 12px;
font-family: @FontFamilySecondary;
color: #3cb878;
}
.fg-invalid {
background-color: rgb(237, 28, 36);
color: #fff;
z-index: 100000;
}
.tooltip.fg-invalid .tooltip-inner {
background-color: rgb(237, 28, 36);
}
.tooltip.bottom.fg-invalid .tooltip-arrow {
border-bottom-color: rgb(237, 28, 36);
}
.popover.bottom.fg-invalid > .arrow:after {
border-bottom-color: rgb(237, 28, 36);
}
.popover.right.fg-invalid > .arrow:after {
border-right-color: rgb(237, 28, 36);
}
.popover.left.fg-invalid > .arrow:after {
border-left-color: rgb(237, 28, 36);
}
.popover.top.fg-invalid > .arrow:after {
border-top-color: rgb(237, 28, 36);
}
//////////////////////////////////////////////////////////////////////
// Concat from original source file: src/client/content/styles/site.style.less
//////////////////////////////////////////////////////////////////////
// The body should be the scroll container, this fix issues with static elements while scrolling in IE. And otherwise a second scrollbar will be visible when showing a modal. Only apply to screen so a printer can still see the whole page.
@media screen {
html {
overflow: hidden;
height: 100%;
}
body {
overflow: auto;
height: 100%;
}
}
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
height: 100%;
color: @CardTextFontColor;
font-family: @FontFamilyPrimary;
font-size: 13px;
font-weight: 400;
*:focus{
//fix for Chrome
outline:none;
}
.scrollBody {
font-family: @FontFamilyPrimary;
overflow-x: hidden;
overflow-y: scroll;
}
.modal-content{
background-color:@CardBackgroundColor;
border-color:transparent;
}
&.modal-open{
//overflow:auto;
}
//#scroll-container{
// overflow-y: scroll;
// overflow-x: hidden;
// height: 100%;
// width: 100%;
// position: relative;
//}
.legal-links {
text-align: center;
clear: both;
padding: 85px 0 30px;
@media(max-width: 320px){
position: absolute;
top: 100vh;
}
@media(max-height: 600px){
margin-top: 30%;
}
}
[ng-click]{
cursor: pointer;
}
}
input:focus{
outline: none;
}
#root-wrapper {
transition: all .4s ease 0s;
height: 100%;
-webkit-backface-visibility: hidden;
}
#root-page-content-wrapper {
position:relative;
width: 100%;
min-width: 980px;
height: auto;
transition: all 0.4s ease;
min-height:100%;
}
.root-inner{
min-height:400px;
float: none;
> .loading-block .loading-text {
display: none;
}
}
.cursor-pointer {
cursor: pointer !important;
}
.cursor-default {
cursor: default !important;
}
.text-bold {
font-weight: bold;
}
.no-padding {
padding: 0 !important;
}
.sort-order {
position: relative;
height: 0;
width: 0;
color:fade(@CardTextFontColor, 30%);
&.sort-focus{
color:@CardTextFontColor;
}
&:after {
content: ' \25b2';
position: absolute;
top: -1px;
left: 4px;
}
&.reverse{
&:after {
content: ' \25bc';
}
}
}
@media (max-width : 767px){
fg-help-overlay-button .fgHelpOverlayButton{
margin-right: 15px;
}
}
@media (max-width: 480px){
.page-title {
margin-top: 30px;
}
}
/**********************
OTHER
***********************/
.import-client {
position: relative;
overflow: hidden;
input[type=file] {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
font-size: 0;
width: 100%;
height: 100%;
opacity: 0;
}
}
.error-page-message {
margin-top: 200px;
}
.loading-spinner {
text-align: center;
padding: 40px;
position: relative;
}
.help-overlay-glass {
top: 0;
left: 0;
position: fixed;
width: 100%;
min-height: 103%;
background: @OverlayColor;
z-index: 97;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
#nav-sidebar-main {
@media (max-width: 995px){
&:not(.open){
#nav-bottom-area .sidebar-advisor-info {
padding: 20px 0;
}
}
}
}
//////////////////////////////////////////////////////////////////////
// Concat from original source file: dist/temp/siteModules/siteModuleMortgage.less
//////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////
// Concat from original source file: rivet_package/lessVariables.less
//////////////////////////////////////////////////////////////////////
// This file is prepended and made available to all packaged .less files in common, widgets, and site styles.
/**************************************************
Theme Variables
Do not edit color values here.
Default colors are specified in common.config.json.
The color values here will have no effect.
***************************************************/
@PrimaryAccentColor: #a2a2a2;
@PrimaryAccentFontColor: #fff;
@MenuBackgroundColorPrimary: #3d3d3d;
@MenuBackgroundColorSecondary: #313131;
@MenuSelectedPageBackgroundColor: #2f2f2f;
@MenuSelectedPageAccentColor: #a3a3a3;
@MenuIconColor: #fff;
@MenuFontColor: #fff;
@ScrollbarColor: #a3a3a3;
@ScrollbarBackgroundColor: #3d3d3d;
@backgroundColor: #fff;
@BackgroundOverlayColor: rgba(255,255,255,0.8);
@BackgroundTextFontColor: #3d3d3d;
@CardTextFontColor: #3d3d3d;
@CardBackgroundColor: rgb(255,255,255);
@LineBreakColor: #a1a1a1;
@BackgroundOddItemColor: #eeeeee;
@BackgroundEvenItemColor: #f9f9f9;
@BackgroundSelectedItemColor: #fff;
@GoodColor: #aeaeae;
@BadColor: #858585;
@NeutralExpenseColor: #555555;
@TextOverGoodColor: #3d3d3d;
@TextOverBadColor: #fff;
@ChartRangeStartColor: hsl(0,0%,15%);
@ChartRangeEndColor: hsl(0,0%,93%);
@BackgroundUnselectedGraphExtentOnBackgroundColor: rgb(230,230,230);
@BackgroundSelectedGraphExtentOnBackgroundColor: rgb(255,255,255);
@BackgroundUnselectedGraphExtentOnCardColor: rgb(243,243,243);
@BackgroundSelectedGraphExtentOnCardColor: rgb(240,240,240);
@SliderSVGBarColor: #fff;
@SliderSVGBackgroundColor: #333;
@RetirementGoalColor: #353535;
@EducationGoalColor: #858585;
@MajorPurchaseGoalColor: #484848;
@OverlayColor: rgba(0,0,0,0.7);
@HeadingFontColor: #fff;
@BodyFontColor: #fff;
@LinkColor: #fff;
@RightSidebarBackgroundColor: #3d3d3d;
@RightSidebarFontColor: #fff;
@LogoBackgroundColor: #3d3d3d;
@GoodColorGradientExtent: rgb(40, 40, 40);
@NeutralExpenseColorGradientExtent: rgb(232, 232, 232);
@IncomeTransactionGradientStart: rgb(82, 82, 82);
@IncomeTransactionGradientEnd: rgb(193, 193, 193);
@ExpenseTransactionGradientStart: rgb(7, 7, 7);
@ExpenseTransactionGradientEnd: rgb(143, 143, 143);
@CardBackgroundColorTransparent: rgba(250, 250, 250, 0.8);
@backgroundUrl: "''";
/****************************************************************
Other
Here you can put any other mixins or variables to be made available
in all other stylesheets.
*****************************************************************/
@FontFamilyPrimary: 'Roboto', sans-serif;
@FontFamilySecondary: 'Roboto', sans-serif;
// ! OPEN SANS HAS 300 / 400 / 600 / 700 / 800
// Content type styles
.TypeDisplay4 {
font-family: @FontFamilyPrimary;
font-size: 56px;
font-weight: 300;
}
.TypeDisplay3 {
font-family: @FontFamilyPrimary;
font-size: 48px;
font-weight: 300;
}
.TypeDisplay2 {
font-family: @FontFamilyPrimary;
font-size: 42px;
font-weight: 300;
}
.TypeDisplay1 {
font-family: @FontFamilyPrimary;
font-size: 36px;
font-weight: 300;
}
.TypeHeadlineBold {
font-family: @FontFamilyPrimary;
font-size: 24px;
font-weight: 600;
}
.TypeHeadline {
font-family: @FontFamilyPrimary;
font-size: 24px;
font-weight: 400;
}
.TypeTitle {
font-family: @FontFamilyPrimary;
font-size: 18px;
font-weight: 400;
}
.TypeSubheading {
font-family: @FontFamilyPrimary;
font-size: 16px;
font-weight: 400;
}
.TypeBody2 {
font-family: @FontFamilyPrimary;
font-size: 14px;
font-weight: 600;
}
.TypeBody1 {
font-family: @FontFamilyPrimary;
font-size: 14px;
font-weight: 400;
}
.TypeCaption {
font-family: @FontFamilyPrimary;
font-size: 12px;
font-weight: 400;
}
.TypeLabel {
font-family: @FontFamilyPrimary;
font-size: 12px;
font-weight: 400;
}
.TypeHyperlink {
font-family: @FontFamilyPrimary;
font-size: 14px;
font-weight: 400;
text-decoration: underline;
}
.TypeButton {
font-family: @FontFamilyPrimary;
font-size: 14px;
font-weight: 700;
}
// Menu type styles
.TypeMenuPageCategory {
font-family: @FontFamilyPrimary;
font-size: 16px;
font-weight: 400;
}
.TypeMenuPage {
font-family: @FontFamilyPrimary;
font-size: 15px;
font-weight: 300;
}
.TypeMenuHeading {
font-family: @FontFamilyPrimary;
font-size: 24px;
font-weight: 300;
}
.TypeMenuBody {
font-family: @FontFamilyPrimary;
font-size: 14px;
font-weight: 300;
}
.TypeMenuCaption {
font-family: @FontFamilyPrimary;
font-size: 12px;
font-weight: 300;
}
.TypeMenuHyperlink {
font-family: @FontFamilyPrimary;
font-size: 12px;
font-weight: 300;
text-decoration: underline;
}
.IconInvalid {
content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDIwMCAyMDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KCjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTEwMCwyMDBDNDQuOSwyMDAsMCwxNTUuMSwwLDEwMFM0NC45LDAsMTAwLDBzMTAwLDQ0LjksMTAwLDEwMFMxNTUuMSwyMDAsMTAwLDIwMHoiIHN0eWxlPSJmaWxsOiNlZDFjMjQiLz4KPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTAwLDEyMi42Yy03LjIsMC0xMy01LjgtMTMtMTNWNTIuOGMwLTcuMiw1LjgtMTMsMTMtMTNzMTMsNS44LDEzLDEzdjU2LjhDMTEzLDExNi44LDEwNy4yLDEyMi42LDEwMCwxMjIuNnoiIHN0eWxlPSJmaWxsOiNmZmYiLz4KPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTAwLDE2MS40Yy0zLjQsMC02LjgtMS4zLTkuMi0zLjhjLTIuMy0yLjMtMy44LTUuNy0zLjgtOS4xYzAtMy41LDEuNC02LjksMy44LTkuMmM0LjktNC45LDEzLjYtNC44LDE4LjQsMCAgYzIuMywyLjMsMy44LDUuNywzLjgsOS4yYzAsMy40LTEuNCw2LjctMy44LDkuMUMxMDYuNywxNjAuMSwxMDMuNSwxNjEuNCwxMDAsMTYxLjR6IiBzdHlsZT0iZmlsbDogI2ZmZiIvPgo8L3N2Zz4=');
width: 16px;
height: 16px;
display: inline-block;
position: absolute;
}
.RvtBoxShadow {
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
/* ICON SVG BEFORE ENCODING
*/
//////////////////////////////////////////////////////////////////////
// Concat from original source file: src/actionsMenu/actionsMenu.style.less
//////////////////////////////////////////////////////////////////////
.actions-menu {
ul {
left: auto;
right: 0;
}
.sub-menu {
.sub-menu-text {
font-style: italic;
}
a {
padding-left: 35px !important;
}
.sub-menu-input {
display: flex;
.rvt-input-wrap {
min-width: 70px;
margin-left: 10px;
line-height: 22px;
margin-top: 3px;
font-style: normal;
flex-grow: 1;
input {
height: 24px;
position: absolute;
}
span.invalid {
top: 1px;
}
}
}
}
}
//////////////////////////////////////////////////////////////////////
// Concat from original source file: src/budget/solutionConstruction/budgetSolutionConstruction.less
//////////////////////////////////////////////////////////////////////
.expander-contents-updated {
text-shadow: 0.4px -0.1px #00000033;
transition: text-shadow 0.2s, transform 0.2s, color 0.2s;
transform: scale(1.02);
color: @PrimaryAccentColor;
}
.expander-contents-not-updated {
text-shadow: none;
transition: text-shadow 0.2s, transform 0.2s, color 0.2s;
transform: scale(1.00);
color: inherit;
}
.expander-label-updated {
text-shadow: 0.4px -0.1px #00000033;
transition: text-shadow 0.2s, transform 0.2s, color 0.2s;
color: @PrimaryAccentColor;
}
.expander-label-not-updated {
text-shadow: none;
transition: text-shadow 0.2s, transform 0.2s, color 0.2s;
color: inherit;
}
//////////////////////////////////////////////////////////////////////
// Concat from original source file: src/budget/solutionConstruction/rankingConstruction/changeSupplier.less
//////////////////////////////////////////////////////////////////////
.change-supplier-modal {
.modal-dialog {
width: 1000px;
max-width: 95%;
.modal-content {
min-height: 650px;
max-height: 100%;
padding-bottom: 0;
}
}
.dropdown {
margin-top: 50px !important;
}
.buttons {
button {
margin-top: 25px !important;
margin-left: 4px;
float: right;
}
}
}
//////////////////////////////////////////////////////////////////////
// Concat from original source file: src/budget/solutionConstruction/rankingConstruction/rankingConstruction.less
//////////////////////////////////////////////////////////////////////
.ranking-construction-modal {
margin-bottom: 30px;
.modal-dialog {
width: 1000px;
max-width: 95%;
.modal-content {
min-height: 650px;
max-height: 100%;
padding-bottom: 0;
}
}
.settings {
margin-bottom: 10px;
&.aboveViewport,
&.belowViewport {
.settings-content {
box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.2);
}
}
.settings-content {
background-color: #FFF;
margin: 0 -40px;
padding: 0 40px 10px 40px;
.filters {
> div {
border-bottom: 1px solid #e5e5e5;
padding-top: 8px;
padding-bottom: 8px;
}
> div > * {
display: inline-block;
margin-right: 3px;
vertical-align: middle;
}
.keep-together {
> * {
display: inline-block;
margin-right: 3px;
vertical-align: middle;
}
}
button.rvt-dropdown-head {
border: none !important;
}
.pdf-button,
.apply-filter-button {
float: right;
clear: right;
margin-left: 5px;
}
.rvt-input-wrap {
width: 55px;
.tooltip {
font-size: 12px;
}
&.currency {
width: 110px;
}
}
}
.per-date-text {
margin-top: 10px;
margin-left: 6px;
}
}
}
.content {
margin-bottom: 0px;
table {
border-spacing: 0px;
thead {
font-weight: bold;
}
td {
padding-left: 10px;
padding-right: 10px;
}
}
.content-body {
margin-bottom: 20px;
}
.content-table {
margin: 0 auto;
min-width: 600px;
.implementation-header {
height: 40px;
user-select: none;
.header {
padding-right: 0px;
}
.sorting-arrow {
padding-left: 2px;
padding-right: 10px;
min-width: 25px;
i {
margin: 0px;
padding: 0px;
}
}
}
}
.shaded-row {
background-color: #f5f5f5;
}
.hovering-row {
background-color: #e0f6ff;
}
.selected-row {
background-color: #a6cfdf;
}
.implementation-main-info {
height: 40px;
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
> td:first-child {
width: 45px;
padding: 0px;
}
> td:nth-child(2) {
width: 10px;
padding: 0px;
}
> td:nth-child(-n+2) {
background-color: white !important;
}
.company-logo {
vertical-align: middle !important;
}
}
.implementation-details {
table {
margin-bottom: 10px;
th {
padding-right: 50px;
}
td {
padding-left: 10px;
}
}
> td:first-child {
background-color: white !important;
}
}
.no-products-visible {
text-align: center;
}
.show-more-items {
height: 40px;
td {
text-align: center;
}
}
}
.action-footer {
&.aboveViewport,
&.belowViewport {
.action-footer-content {
box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.2);
}
}
.action-footer-content {
background-color: #FFF;
margin: 0 -40px;
padding: 15px 40px;
.buttons {
text-align: right;
}
}
}
}
//////////////////////////////////////////////////////////////////////
// Concat from original source file: src/budget/solutionConstruction/rankingConstruction/rankingConstruction.pdf.template.less
//////////////////////////////////////////////////////////////////////
@media print {
.ranking-construction-pdf {
.title {
display: block;
background: #2a3a48;
color: #fff;
font-size: 28px;
padding: 10px;
margin: 0 0 15px;
margin-top: 10px;
text-transform: uppercase;
font-family: "Montserrat",Arial,sans-serif;
font-size: 24px;
letter-spacing: 1px;
font-weight: normal;
}
.plan-name {
font-size: 15pt;
padding-left: 10px;
margin-bottom: 30px;
}
.settings-div {
float: left;
width: 50%;
margin-top: 20px;
margin-bottom: 10px;
}
.content-table {
padding-top: 10px;
margin: 0 auto;
min-width: 600px;
border-spacing: 0px;
td {
padding-left: 10px;
padding-right: 10px;
}
.shaded-row {
background-color: #f5f5f5;
}
.implementation-header {
height: 40px;
th {
font-size: 10.5pt;
div {
padding-left: 10px;
}
}
.header {
padding-right: 0px;
}
.sorting-arrow {
min-width: 25px;
padding-left: 2px;
padding-right: 10px;
}
}
.implementation-main-info {
page-break-inside: avoid;
vertical-align: middle;
> td:first-child {
width: 10px;
padding: 0px;
background-color: white !important;
.company-logo {
vertical-align: middle !important;
padding-right: 12px;
}
}
td {
div {
padding-left: 10px;
}
}
}
.implementation-details {
page-break-inside: avoid;
> td:first-child {
background-color: white !important;
}
table {
padding: 0px;
margin: 0px 0px 0px 7px;
tr {
> td:first-child {
font-weight: bold;
div {
padding-right: 50px;
}
}
td {
max-height: 10px;
padding: 0px;
}
}
}
.last-details-table {
margin-bottom: 8px;
}
}
}
}
}
//////////////////////////////////////////////////////////////////////
// Concat from original source file: src/externalTools/mortgageAcceptanceResult/mortgageAcceptanceResult.pdf.template.less
//////////////////////////////////////////////////////////////////////
.mortgage-acceptance-pdf {
.header {
display: block;
background: #2a3a48;
color: #fff;
font-size: 28px;
padding: 10px;
margin: 15px 0px 20px 0px;
text-transform: uppercase;
font-family: "Montserrat",Arial,sans-serif;
font-size: 24px;
letter-spacing: 1px;
font-weight: normal;
}
.sub-header {
font-weight: bold;
padding-top: 25px;
}
.na-dash::before {
content: "\2014";
display: inline-block;
font-size: x-large;
margin-top: 4px;
}
.indent {
padding-left: 15px;
}
.plan-name {
font-size: 15pt;
padding-left: 10px;
margin-bottom: 30px;
}
.quick-result {
.col-2 {
text-align: center;
}
p {
&.value {
min-height: 38px;
display: flex;
align-items: center;
justify-content: center;
}
}
.logo {
min-height: 38px;
margin: 14px 0 14px 0;
img {
max-height: 35px;
}
i {
font-size: 21px;
-webkit-text-stroke: 1px white;
margin-top: 9px;
}
}
.loanToIncomeAcceptedChart {
height: 38px;
width: 38px;
background-color: #0076A3;
margin: 14px 0px 0px 35px;
.availableLoan {
background-color: #FF3D3D;
max-height: 100%;
}
&.isAccepted {
.availableLoan {
background-color: #B8E1B7;
}
}
}
.negative-month {
color: red;
font-size: 16px;
}
.conditional-tooltip {
width: auto;
max-width: none;
}
}
.hat-principles-panel {
margin: 20px 0px 0px 15px;
div {
margin-bottom: 10px;
font-size: 10.5pt;
}
div:first-child {
font-weight: 700;
margin-bottom: 12px;
}
}
.hat-loan-parts-panel {
margin-bottom: 50px;
tr {
page-break-inside: avoid;
}
.text-right {
text-align: right;
}
table {
margin-left: -2px;
}
th,
td {
font-size: 10.5pt;
}
}
.acceptance-details {
white-space: nowrap;
overflow: auto;
margin: 20px 0 20px 0px;
table {
border-spacing: 0px;
}
.group-block-header {
z-index: 1;
padding-top: 0;
padding-bottom: 0;
}
.group-block {
border-right: 2px solid gray;
padding-top: 0;
padding-bottom: 0px;
}
.group-block:last-child {
border-right: 0px solid gray;
}
th {
top: 0;
background: #fafafa;
z-index: 2;
&:first-child {
z-index: 3;
}
}
td,
th {
text-align: right;
padding: 5px;
&:first-child {
text-align: left;
left: 0;
span {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
max-width: 400px;
}
&::after {
content: "";
display: block;
position: absolute;
background: linear-gradient(90deg, #fafafa 0%, rgba(255, 255, 255, 0) 100%);
height: 100%;
top: 0;
right: -8px;
width: 8px;
}
}
}
tr {
page-break-inside: avoid;
td {
background: #fafafa none repeat scroll 0 0;
}
&:nth-child(2n) td {
background: #f0f0f0 none repeat scroll 0 0;
&:first-child {
&::after {
background: linear-gradient(90deg, #f0f0f0 0%, rgba(255, 255, 255, 0) 100%);
}
}
}
}
.sub-table {
width: 100%;
td {
width: 80px;
text-align: right !important;
}
}
}
}
//////////////////////////////////////////////////////////////////////
// Concat from original source file: src/fgDropdownPicker/fgDropdownPicker.style.less
//////////////////////////////////////////////////////////////////////
fg-dropdown-picker {
.expandleft { right: 0px;}
#quickActionMenu { width: auto; min-width: 100%;
.right { right: 0; }
}
.items.multiplecolumns { width: 250px; white-space: normal;
li.items-tile { width: 50px; text-align: center; padding: 10px 0 !important; display: inline-block; }
}
div.items > li:hover { background-color: darken(@PrimaryAccentColor, 4%); color: #fff; }
div.quick-actions > li:hover { background-color: darken(@PrimaryAccentColor, 4%); color: #fafafa; }
.quick-actions { border-bottom: 1px solid @PrimaryAccentColor; border-bottom-radius: 3px; }
body #scroll-container { overflow-y: scroll; overflow-x: hidden; height: 100%; width: 100%; position: relative; }
.dropdown-menu { display: none; }
.open > .dropdown-menu { display: block; }
.quick-action-tile { width: 100%; padding: 0 6px; display: block; position: relative; }
.item-tile { }
.dropdown-scroll-wrapper { max-height: 300px; overflow-y: scroll; box-sizing: content-box; }
}
//////////////////////////////////////////////////////////////////////
// Concat from original source file: src/fgFixedContent/fgFixedContent.style.less
//////////////////////////////////////////////////////////////////////
.fixedContentContainer {
position: relative;
&.aboveViewport,
&.belowViewport {
> .fixedContent {
position: fixed;
z-index: 2;
}
}
&.aboveViewport {
> .fixedContent {
top: 0;
}
}
&.belowViewport {
> .fixedContent {
bottom: 0;
}
}
}
.containerSizeHelper {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
z-index: -1;
}
//////////////////////////////////////////////////////////////////////
// Concat from original source file: src/fgLoadingBlock/fgLoadingBlock.style.less
//////////////////////////////////////////////////////////////////////
/* LOADING BLOCK */
.loading-block {
transform: scale(3);
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
.spinner-container {
position: absolute;
top: 50%;
left: 50%;
height: 0;
fg-loading-spinner {
display: block;
}
}
.loading-text {
position: absolute;
top: 50%;
width: 100%;
margin-top: -0.5em;
font-weight: 300;
color: #333;
font-size: 8px;
text-align: center;
}
}
//////////////////////////////////////////////////////////////////////
// Concat from original source file: src/fgLoanPartsEditor/fgLoanPartsEditor.less
//////////////////////////////////////////////////////////////////////
.loan-parts-editor {
@information-color: #2e6da4;
.desired-interest-rate {
margin-top: 0 !important;
}
.weighted-average {
.invalid {
top: 1px !important;
}
fg-min-max-validator-icon {
font-style: normal;
}
.dropdown-menu {
z-index: 1;
overflow: hidden !important;
}
.rvt-input-wrap {
margin-bottom: 2px !important;
}
.icon-help-icon {
color: @information-color !important;
position: relative;
top: 2px;
}
.set-to-manual {
border-bottom: solid 1px lightgray;
}
}
manual-maturity-editor {
display: block;
margin: -5px -15px;
}
}
//////////////////////////////////////////////////////////////////////
// Concat from original source file: src/getDefaultValueButton/getDefaultValueButton.style.less
//////////////////////////////////////////////////////////////////////
.default-value-tooltip {
pointer-events: none;
}
.fixed-width {
width:42px;
}
.get-default-value-popover {
.arrow {
display: none;
}
.popover-content {
color: #3e4b5b !important;
}
z-index: 1000;
background-color: #a6cfdf !important;
border: none !important;
}
//////////////////////////////////////////////////////////////////////
// Concat from original source file: src/interestRates/interestRates.pdf.style.less
//////////////////////////////////////////////////////////////////////
.interest-rates-pdf {
h2 {
display: block;
background: #2a3a48;
color: #fff;
font-size: 28px;
padding: 10px;
text-transform: uppercase;
font-family: "Montserrat",Arial,sans-serif;
font-size: 24px;
letter-spacing: 1px;
font-weight: normal;
}
.settings-table {
margin-left: 60px;
margin-top: 60px;
margin-bottom: 10px;
border: hidden;
border-spacing: initial;
width: 100%;
.settings {
width: 50%;
border: hidden;
vertical-align: top;
}
}
.content {
border-spacing: initial;
th {
font-size: 10pt;
}
tr:nth-child(even) {
background-color: #f5f5f5;
}
div {
padding-left: 10px;
}
.content-row {
page-break-inside: avoid;
vertical-align: middle;
.applied-specifications span {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
&:not(:last-child)::after {
content: ", ";
white-space: pre;
}
}
> td:first-child {
width: 10px;
padding: 0px;
background-color: white !important;
.company-logo {
vertical-align: middle !important;
padding-right: 12px;
}
}
td:not(:first-child) {
padding-left: 20px;
}
}
}
}
//////////////////////////////////////////////////////////////////////
// Concat from original source file: src/interestRates/interestRates.style.less
//////////////////////////////////////////////////////////////////////
.interestRates {
.actionFooter {
margin: 5px -30px -15px -30px;
.actionFooterContent {
padding: 15px 30px;
background-color: #FFF;
}
&.aboveViewport,
&.belowViewport {
.actionFooterContent {
box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.2);
}
}
}
.settings {
margin-bottom: -5px;
> * {
display: inline-block;
margin-right: 3px;
margin-bottom: 5px;
vertical-align: middle;
}
.keepTogether {
margin-right: 0px;
> * {
display: inline-block;
margin-right: 3px;
vertical-align: middle;
}
}
button.rvt-dropdown-head {
border: none !important;
}
.float-right {
float: right;
}
fg-pdf-button,
#btnApply {
margin-left: 5px;
}
.rvt-input-wrap {
width: 55px;
.tooltip {
font-size: 12px;
}
&.currency {
width: 110px;
}
}
.slash {
font-size: 20px;
line-height: 30px;
}
.perDate {
font-size: 12px;
margin-left: 6px;
line-height: 28px;
}
.no-selection {
color: #898989;
}
}
.noProductsVisible {
text-align: center;
}
.row {
[class*="col-"] {
padding: 0 1px;
overflow: hidden;
text-overflow: ellipsis;
&:first-child {
padding-left: 15px;
}
&:last-child {
padding-right: 5px;
}
}
&:not(.header) {
.labelContainer {
display: flex;
align-items: center;
min-height: 47px;
.label {
padding: 5px 0;
width: 100%;
}
}
.maturityInterestType {
overflow: hidden;
text-overflow: ellipsis;
}
.appliedSpecifications .label .item {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
&:not(:last-child)::after {
content: ", ";
white-space: pre;
}
}
}
}
}
//////////////////////////////////////////////////////////////////////
// Concat from original source file: src/interestRates/interestRatesProduct.pdf.style.less
//////////////////////////////////////////////////////////////////////
@media print {
.interest-rates-product-pdf {
h2 {
display: block;
background: #2a3a48;
color: #fff;
font-size: 28px;
padding: 10px;
margin: 0 0 15px;
margin-top: 10px;
text-transform: uppercase;
font-family: "Montserrat",Arial,sans-serif;
font-size: 24px;
letter-spacing: 1px;
font-weight: normal;
}
.settings-div {
float: left;
width: 50%;
margin-top: 20px;
margin-bottom: 10px;
}
.content-div {
width: 100%;
padding-top: 20px;
margin-top: 20px;
margin-bottom: 0px;
clear: both;
h3 {
font-size: 20px;
font-weight: 400;
font-family: 'Roboto', sans-serif;
margin: 10px 0;
}
div {
margin: 0;
padding: 0;
color: #3c3d42;
font-family: 'Roboto', sans-serif;
font-size: 13px;
font-weight: 400;
}
table {
border-bottom: 1px solid #ddd;
width: 100%;
text-indent: initial;
border-spacing: 2px;
thead {
font-weight: bold;
}
td,
th {
text-align: center;
border-top: 1px solid #ddd;
padding: 12px;
font-size: 12px;
white-space: nowrap;
}
td {
display: table-cell;
border-top: 1px solid #ddd;
vertical-align: inherit;
}
td:first-child {
text-align: left;
font-weight: bold;
}
td:last-child {
border-top: 1px solid #ddd;
width: 100%;
}
th.NhgLast,
td.NhgLast {
border-right: 1px solid #e5e5e5;
}
}
}
.foot-note {
display: block;
padding: 15px 0 0;
margin: 5px 0 0 !important;
span {
display: block;
width: 100%;
font-size: 12px !important;
}
}
}
}
//////////////////////////////////////////////////////////////////////
// Concat from original source file: src/interestRates/interestRatesProduct.style.less
//////////////////////////////////////////////////////////////////////
.interestRatesProduct {
.result-control {
margin-bottom: 15px;
& > * > * {
display: inline-block;
margin-right: 3px;
}
.charge-options {
margin-bottom: 10px;
padding-bottom: 10px;
.not-applicable {
color: darkgray;
}
}
.filters {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 10px;
padding-bottom: 10px;
.unused {
color: #898989;
}
}
button.rvt-dropdown-head {
border: none !important;
}
}
}
//////////////////////////////////////////////////////////////////////
// Concat from original source file: src/siteModule.style.less
//////////////////////////////////////////////////////////////////////
@mortgage-color: #7030A0;
.mortgage-module {
// Variables
@error-color: #bf1f1d;
@warning-color: #f1803c;
@information-color: #2e6da4;
/* BASE ELEMENTS */
.center-block {
margin-bottom: 25px;
max-width: 1500px;
}
.container {
position: relative;
width: 1100px;
margin: 0 auto;
}
a:not(.rvt-btn-300) {
color: inherit;
cursor: pointer;
}
.rvt-btn-300 [class^="icon-"] {
margin-left: 0;
}
.rvt-btn-300.pdf {
margin: 0px;
color: #d60000;
font-size: x-large;
border: none;
line-height: 30px;
cursor: pointer;
padding: 0 10px;
background: none;
&:hover {
color: darken(#d60000, 5%);
}
&:active {
color: darken(#d60000, 10%);
}
&:disabled {
color: lightgray;
cursor: none;
}
}
.rvt-btn-300.mv {
width: 38px;
height: 30px;
background-image: url("content/images/moneyview-blue.png");
background-position: center center;
background-repeat: no-repeat;
background-size: 24px 24px;
&:active {
background-image: url("content/images/moneyview-white.png");
}
}
// Implementatie part like in Figlo Start.
.fs-btn-default {
line-height: 1.8;
margin: 0px 2px;
padding: 3px 10px;
border-color: #ccc;
border-radius: 3px;
font-size: 12px;
&:focus {
line-height: 1.8;
border-width: 1px;
outline: none;
padding: 3px 10px;
}
&:hover {
line-height: 1.8;
border-width: 1px;
outline: none;
background-color: #e6e6e6;
border-color: #adadad;
text-decoration: none;
padding: 3px 10px;
.dot {
background-color: #e6e6e6;
color: darkgray;
}
}
&.special-attention {
background-color: green;
color: white;
&:disabled {
color: lightgray;
background-color: darkseagreen;
}
}
}
.hrSpace {
margin: 25px 10px 15px;
background: none;
border: 0;
height: 0px;
}
.borderless {
border: none !important;
}
.dot {
height: 20px;
width: 20px;
background-color: #bbb;
color: cornsilk;
border-radius: 50%;
margin-left: 4px;
display: inline-block;
&.error {
background-color: @error-color;
}
&.warn {
background-color: @warning-color;
}
&.info {
background-color: @information-color;
}
}
.rulecube-alert.dot {
&.info {
background-color: green;
}
}
.rvt-btn-300 [class*="icon-caret-"] {
font-size: 14px;
margin-left: 6px;
vertical-align: middle;
display: inline-block;
height: 20px;
}
#buttonBarButtonGroup {
background-color: #fff;
}
.closing-cross-default {
position: absolute;
top: 10px;
right: 10px;
padding: 7px;
font-size: 14px;
cursor: pointer;
&.invalid {
cursor: default;
color: #898989;
}
}
.isOpen {
font-weight: bold;
}
.caption-fit {
overflow: hidden;
white-space: nowrap;
display: block;
text-overflow: ellipsis;
}
h1 {
font-size: 36px;
font-weight: 300;
font-family: @FontFamilyPrimary;
margin: 30px 0;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
h2, h2 a:link {
font-size: 20px;
font-weight: 400;
font-family: @FontFamilyPrimary;
margin: 10px 0;
}
h3 {
font-size: 15px;
font-weight: 500;
margin: 0 0 5px;
}
h4 {
font-size: 12px;
}
strong {
font-weight: 400;
}
label {
font-weight: normal;
}
.full-size {
margin: 0;
padding: 0;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.invalid-area {
background-color: rgba(237, 28, 36, 0.1)
}
.ColumnWordWrap {
word-wrap: break-word;
}
/* CURRENCY FIELD */
.rvt-input-wrap.currency {
position: relative;
input {
padding-left: 18px !important;
}
&:before {
position: absolute;
top: 6px;
left: 7px;
content: "\20AC";
color: #3e4b5b;
font-size: 13px;
line-height: 20px;
}
}
/* FREQUENCY FIELD */
.rvt-input-wrap.frequency {
position: relative;
span {
position: absolute;
top: 8px;
right: 7px;
font-size: 11px;
font-style: italic;
}
input.ng-invalid + span {
right: 27px;
}
}
/* EXPANDER ARROW */
a[aria-expanded="false"] .glyph-expand:before {
content: "\74";
}
a[aria-expanded="true"] .glyph-expand:before {
content: "\61";
}
/* TAGS */
.tag {
border: 1px solid #ddd;
border-radius: 3px;
font-size: 11px;
padding: 2px 8px;
&.a {
background: #f0f0f0;
color: #666;
}
&.na {
background: #ffffff;
color: #666;
}
}
/* DISABLED FIELDS */
.rvt-dropdown[disabled] .rvt-dropdown-head,
.rvt-input-wrap input:disabled {
background-color: #eee;
border: 1px solid #ccc;
}
.rvt-input-wrap input.ng-invalid {
border-color: #bf1f1d;
background-color: rgba(237, 28, 36, 0.1)
}
/* RIVET LIST DROPDOWN */
.rvt-list-btn {
.rvt-list-btn-head {
display: inline-block;
width: auto; /* W7 IE 11 Hack */
}
&[keyboard-nav] UL LI A:focus:not(:active) {
background-color: transparent;
color: inherit;
}
ul {
white-space: nowrap !important;
}
li {
background-color: inherit;
color: inherit;
}
li.selected {
background-color: @PrimaryAccentColor !important;
color: #fff !important;
}
.icon {
font-size: 8px;
}
}
/* TEXT / BUTTON */
.text-with-button {
border-collapse: collapse;
td {
padding: 0;
width: 100%;
vertical-align: top;
}
}
/* SMALL ICON BUTTON */
.small-icon-button {
padding: 0px 2px !important;
line-height: 1em !important;
border-width: 1px !important;
&:hover {
box-shadow: 0 0 0 1px black;
}
}
/* DROPDOWN / BUTTON */
.dropdown-with-button {
border-collapse: collapse;
min-width: 50px !important;
&.left-btn td {
width: inherit;
}
&.left-btn td + td {
width: 100% !important;
}
td {
width: 100%;
padding: 0;
}
}
.loan-parts-editor {
.dropdown-with-button {
button {
padding: 0px 19px 0px 10px !important;
}
}
}
/* DROPDOWN / FREE INPUT */
.dropdown-free-input {
input[type="text"] {
top: 0;
position: absolute;
left: 0;
right: 0px;
display: block;
height: 100%;
&:not(.hide-dropdown) {
width: calc(~"100% - 25px");
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
}
/* FIELD COMBINATION: RADIO / TEXT / BUTTON */
.radio-text-button {
border-collapse: collapse;
td {
padding: 0;
&:first-child {
padding-right: 8px;
input {
margin: 4px 0 0;
}
}
&:nth-child(2) {
width: 100%;
}
}
input[type="radio"] + label {
margin: 0;
}
&.no-input {
label {
line-height: 21px;
}
span {
margin-right: 13px;
}
}
input[type="radio"] + label span {
width: 16px;
height: 16px;
}
}
/* RADIO / CHECKBOXES */
.radio-inline label,
.check-inline label {
display: inline;
}
.radio-inline,
.check-inline,
.radio-check {
input[type="radio"] + label {
line-height: 30px;
}
input[type="radio"] + label span {
position: relative;
top: -3px;
}
input[type="checkbox"] + label span {
position: relative;
top: -1px;
}
input[type="radio"] + label span {
width: 16px;
height: 16px;
}
}
.check-inline {
padding-top: 0px !important;
}
/* FORMBUILDER RADIO */
.fbf-radio {
input[type="radio"] + label span {
width: 16px;
height: 16px;
position: relative;
top: -3px;
}
}
/* SPACE WHEN NO INPUT FIELD AVAILABLE */
.no-input td {
padding: 6px 0;
}
/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
/* FIELD VALIDATION */
input {
&.ng-invalid {
border: 1px solid @error-color;
color: @error-color;
}
}
a.invalid-hint {
color: @error-color;
&::after {
content: "!";
left: 5px;
position: relative;
top: 1px;
font-size: 12px;
}
}
.sub a.invalid-hint::after {
display: none;
}
span.invalid, span.question {
width: 20px;
height: 20px;
position: absolute;
right: 5px;
top: 5px;
text-align: center;
}
span.invalid::after {
content: "!";
color: @error-color;
font-size: 18px;
}
span.question::after {
content: "?";
color: @information-color;
font-size: 18px;
}
.help {
&.icon-help-icon,
&.info {
color: @information-color;
display: inline-block;
width: 16px;
height: 24px;
line-height: 28px;
text-align: center;
position: absolute;
top: 3px;
right: -6px;
z-index: 1;
cursor: pointer;
&.icon-in-table-cell {
right: 5px;
top: 8px;
}
}
&.icon-exclamation-point,
&.warning {
color: @warning-color;
display: inline-block;
width: 16px;
height: 24px;
line-height: 24px;
text-align: center;
position: absolute;
top: 3px;
right: -6px;
z-index: 1;
cursor: pointer;
}
&.error {
color: @error-color;
}
}
.realignment {
padding: 0px;
margin: 0px 10px;
}
[class^="icon-invalid"] {
content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDIwMCAyMDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KCjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTEwMCwyMDBDNDQuOSwyMDAsMCwxNTUuMSwwLDEwMFM0NC45LDAsMTAwLDBzMTAwLDQ0LjksMTAwLDEwMFMxNTUuMSwyMDAsMTAwLDIwMHoiIHN0eWxlPSJmaWxsOiNlZDFjMjQiLz4KPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTAwLDEyMi42Yy03LjIsMC0xMy01LjgtMTMtMTNWNTIuOGMwLTcuMiw1LjgtMTMsMTMtMTNzMTMsNS44LDEzLDEzdjU2LjhDMTEzLDExNi44LDEwNy4yLDEyMi42LDEwMCwxMjIuNnoiIHN0eWxlPSJmaWxsOiNmZmYiLz4KPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTAwLDE2MS40Yy0zLjQsMC02LjgtMS4zLTkuMi0zLjhjLTIuMy0yLjMtMy44LTUuNy0zLjgtOS4xYzAtMy41LDEuNC02LjksMy44LTkuMmM0LjktNC45LDEzLjYtNC44LDE4LjQsMCAgYzIuMywyLjMsMy44LDUuNywzLjgsOS4yYzAsMy40LTEuNCw2LjctMy44LDkuMUMxMDYuNywxNjAuMSwxMDMuNSwxNjEuNCwxMDAsMTYxLjR6IiBzdHlsZT0iZmlsbDogI2ZmZiIvPgo8L3N2Zz4=');
width: 18px;
height: 18px;
position: relative;
top: 5px;
right: 5px;
}
.fg-warning {
background-color: @warning-color;
color: #fff;
}
.fg-info {
background-color: @information-color;
color: #fff;
}
.conditional-tooltip.tooltip.top {
margin-top: 2px;
}
.conditional-tooltip .tooltip-inner {
width: 500px;
}
/* FADE OUT WITH NG-HIDE / SHOW */
.fade {
transition: all linear 500ms;
opacity: 1;
}
.fade.ng-hide {
opacity: 0;
display: inherit !important;
pointer-events: none;
}
/* ALERT */
.figlo-alert {
margin: 0 0 30px;
border: 1px solid @PrimaryAccentColor;
color: @PrimaryAccentColor;
background: rgba(255, 255, 255, 0.25);
border-radius: 4px;
padding: 15px 0;
text-align: center;
position: relative;
fg-loading-spinner {
display: block;
position: relative;
}
.loader::before {
margin-top: -40px;
background-color: @PrimaryAccentColor;
}
.loader::after {
margin-top: -40px;
background-color: @PrimaryAccentColor;
}
.icon-repeat {
visibility: hidden;
}
}
.ruleCubeAlertOverlay,
.userNotificationOverlay {
font-size: 13px;
background-color: #fff;
border-radius: 4px;
&.hasError {
color: @error-color;
}
.details {
font-size: 13px;
background: #f9f9f9;
border: 1px solid #e1e1e1;
border-width: 1px 0;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
> div {
margin: 10px 0;
> span {
padding: 5px 15px 5px 33px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
li {
padding: 5px 15px 5px 33px;
display: flex;
align-items: center;
i {
width: 7px;
margin-right: 9px;
font-size: 6px;
flex-grow: 0;
flex-shrink: 0;
}
&.error i {
color: @error-color;
}
&.warn i {
color: @warning-color;
}
&.warning i {
color: @warning-color;
}
&.info i {
color: @information-color;
}
&.rulecube-type.info i {
color: green;
}
}
}
}
}
}
.userNotificationCounter {
position: relative;
top: 5px;
text-decoration: underline;
padding-bottom: 15px; // to keep a distance from the outer edge, specifically in Chrome.
&.error {
color: @error-color;
}
&.warn {
color: @warning-color;
}
&.info {
color: @information-color;
}
}
.motivation-form {
textarea {
height: 90px;
resize: none;
}
.motivation-select .rvt-dropdown UL LI A {
text-align: left;
}
}
/* EXPANDER BUTTON ON MORTGAGE PARTS */
.rvt-btn-300.add-mortgage {
min-width: initial !important;
padding: 0 7px !important;
border: 0;
i {
color: #3d3d3d;
font-size: 13px;
}
&:hover {
border: 0 !important;
i {
color: #fff;
}
}
}
.construction-group {
padding: 8px 0;
}
.sub .construction-group {
padding: 0;
.selling {
margin-top: 25px;
}
}
.first-item table {
margin-left: 27px;
}
.row-label,
.construction-label {
display: block;
margin: 6px 0;
[class^="icon-"] {
position: relative;
top: 1px;
left: -4px;
font-size: 12px;
}
a {
display: block;
text-decoration: none;
width: 100%;
border: 0;
}
> span {
display: block;
padding-left: 15px;
}
}
.sub .field-label,
.sub .construction-label {
margin-left: 18px;
}
.subsub .construction-label {
margin-left: 27px;
}
.panel {
background: none;
border: 0;
position: relative;
border-radius: 4px;
margin: 0 0 5px;
}
.panel .panel {
background: #fff; /*box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);*/
}
.panel.seperate {
margin-bottom: 30px;
}
.panel.total {
margin-bottom: 30px;
background: transparent; /*box-shadow: none;*/
}
.total .construction-label {
font-weight: 500;
text-align: right;
}
.sub .item {
display: table;
padding: 5px 0;
width: 100%;
}
.sub.panel {
background: #f9f9f9;
border: 1px solid #e1e1e1;
border-width: 1px 0;
padding: 10px 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.budget-principles.sub.panel {
border-bottom: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
}
.subsub.panel {
border-left: 5px solid @PrimaryAccentColor;
border-bottom: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
padding: 10px 0;
margin: 10px 0;
border-radius: 0;
}
.current-mortgages.subsub.panel {
padding-bottom: 0px;
margin-bottom: -10px;
border-bottom: 1px solid #e1e1e1;
}
.subsub .sub .subsub.panel {
border-left: 0 none;
}
.subsub .sub.panel {
margin: 10px 0 0;
}
/* TITLE PDF BUTTON */
.title-pdf {
margin: 35px 0 0;
}
/* QUICK RESULTS CONSTRUCTION */
.quick-result {
background: #fff; /*box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);*/
border-radius: 4px;
display: table;
margin: 0 0 5px;
padding: 10px;
position: relative;
width: 100%;
p {
margin: 0;
text-align: center;
&.value {
font-size: 25px;
font-family: @FontFamilySecondary;
height: 38px;
padding-top: 8px;
}
&.description {
font-size: 12px;
font-weight: 300;
margin-top: 10px;
.max-mortgage-suggestion-tooltip {
color: #2e6da4;
position: relative;
top: 1px;
left: 2px;
margin-top: -5px;
}
}
}
.row {
margin: 15px 0px 10px 0px;
}
a {
border: 0;
}
.label {
display: block;
margin-top: 17px;
color: #3c3d42;
font-family: "Roboto",Arial,sans-serif;
font-size: 13px;
font-weight: 400;
}
.more {
cursor: pointer;
margin: 10px 0 0;
display: inline-block;
color: #3c3d42;
font-family: "Roboto",Arial,sans-serif;
font-size: 13px;
font-weight: 400;
text-decoration: underline;
}
.lti-principles-label {
margin: 7.5px 0;
}
/* QUICK RESULTS EXPANDER */
.results {
background: #fff; /*box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);*/
// margin: 15px 0 10px;
// padding: 20px 10px;
border-radius: 3px;
// border-top: 1px solid #eee;
.row [class*="col-"] {
font-size: 13px;
font-weight: 300;
}
.item {
padding: 5px 0;
}
.detail {
margin-top: 20px;
}
.help {
top: -4px;
}
.motivation-btn {
margin-top: 5px;
}
.tag {
float: right;
}
hr {
margin: 25px 10px 15px;
background: #eee;
border: 0;
height: 1px;
}
.showDetails {
cursor: pointer;
display: inline-block;
color: #3c3d42;
font-family: "Roboto",Arial,sans-serif;
font-size: 13px;
font-weight: 400;
text-decoration: underline;
}
}
.logo {
text-align: center;
height: 38px;
i {
font-size: 21px;
-webkit-text-stroke: 1px white;
margin-top: 9px;
}
}
.interest {
.interest-container {
position: relative;
height: 30px;
margin-top: 8px;
}
input {
text-align: center;
height: 30px;
font-size: 25px !important;
}
.label {
margin-top: 13px;
text-align: right;
label {
font-weight: 300;
font-size: 12px;
}
}
}
.lti-result {
span:nth-child(1) {
display: inline-block;
}
& > span:nth-child(2) {
display: none;
}
&.warning-lti-result {
color: @warning-color;
}
&:not(.showing-negative-month) {
.hat-result-lti-section {
> span:nth-child(2) {
display: none;
}
}
}
&.declined-lti-result {
color: @error-color;
&::after {
content: "!";
left: 5px;
position: relative;
font-size: 25px;
}
&.showing-negative-month {
font-size: 16px;
&::after {
font-size: 18px;
}
.hat-result-lti-section {
> span:nth-child(1) {
display: none;
}
> span:nth-child(2) {
display: inline-block;
padding-top: 6px;
}
}
}
}
}
.declined-ltv-result {
color: @error-color;
}
.warning-ltv-result {
color: @warning-color !important;
}
}
.quick-result-bar {
.row {
margin-top: 10px;
margin-bottom: 5px;
height: 80px;
}
}
.mortgage-acceptance {
actions-menu {
td {
padding: 0px !important;
}
}
.quick-result {
.flex-center {
display: flex;
justify-content: center;
.max-mortgage-suggestion-tooltip {
color: #2e6da4;
position: static;
margin-top: 7px;
margin-left: 5px;
}
}
p {
&.value {
min-height: 38px;
display: flex;
align-items: center;
justify-content: center;
}
}
.logo {
text-align: center;
height: 38px;
img {
max-height: 38px;
}
i {
font-size: 21px;
-webkit-text-stroke: 1px white;
margin-top: 9px;
}
.na-dash::before {
content: "\2014";
display: inline-block;
font-size: x-large;
padding-top: 10px;
}
}
.loanToIncomeAcceptedChart {
height: 38px;
width: 38px;
background-color: #0076A3;
margin: auto;
.availableLoan {
background-color: #FF3D3D;
max-height: 100%;
}
&.isAccepted {
.availableLoan {
background-color: #B8E1B7;
}
}
}
.negative-month {
color: @error-color;
font-size: 16px;
}
.conditional-tooltip {
width: auto;
max-width: none;
}
}
}
.alternate-background {
background-color: #f9f9f9;
}
/* button bar */
.button-bar,
#buttonBar {
background-color: #fff;
border-radius: 4px;
padding: 10px;
}
/* HEADER NAV */
#headerNav {
background: #fff;
border-radius: 4px;
margin: 2px 0 1px 0;
padding: 10px 0;
position: relative;
.first-col {
> div {
float: left;
margin-right: 10px;
}
}
button {
width: auto;
}
}
/* COMPARE PLAN / RESULTS PAGES */
.result {
.pdf {
margin: 35px 20px;
}
result-view {
display: block;
margin: 0 0 30px;
}
.monthly {
.icon-caret-right,
.icon-caret-down {
font-size: 10px;
margin-right: 4px;
position: relative;
top: 1px;
}
}
.result-summary {
background: rgba(255, 255, 255, 0.5);
width: 100%;
padding: 25px 5px 25px 10px;
h2 {
margin: 0;
}
h3 {
margin: 0;
font-size: 13px;
font-weight: 300;
}
}
.result-block {
background: #fff;
padding: 15px 0;
margin-bottom: 30px;
.table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
font-size: 13px;
text-align: right;
td,
th {
padding: 10px 5px 10px 15px;
border-top: 1px solid #ddd;
}
th:first-child,
td:first-child {
padding-left: 5px;
text-align: left;
}
th {
font-family: @FontFamilySecondary;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
}
tr:nth-child(2n) {
background: #f5f5f5;
}
}
.highcharts-title tspan {
font-size: 13px;
font-weight: 400;
}
.btn-group {
margin: 10px 0;
}
}
.result-reference {
padding: 10px 0 15px;
height: 70px;
.row [class*="col-"] {
padding: 0;
font-size: 13px;
}
}
.list-group {
padding-left: 0;
strong {
font-weight: 500;
font-size: 13px;
}
.list-group-item {
display: block;
border-top: 1px solid #ddd;
padding: 10px 0;
}
}
.motivation-summary {
overflow: hidden;
line-height: 1em;
white-space: pre-wrap;
height: 53px;
max-height: 53px;
position: absolute;
width: 100%;
padding-right: 80px;
text-overflow: ellipsis;
}
tfoot {
font-weight: 600;
}
}
.result-control {
background: #fff;
border: 1px solid #e5e5e5;
border-width: 1px 0;
display: inline-block;
font-family: @FontFamilySecondary;
font-size: 11px;
padding: 10px 15px 8px;
width: 100%;
.result-select-dropdowns {
display: inline;
button {
font-size: 11px;
}
> * {
display: inline-block;
}
}
.rvt-btn-300 {
position: relative;
top: -1px;
margin-left: 10px;
}
}
/* RISK PROFILE */
.profile {
margin: 0 0 30px;
.rvt-btn-300 {
border-color: transparent;
}
.summary {
margin: 0 0 30px;
padding: 15px;
display: inline-block;
width: 100%;
background: #fff;
border-radius: 4px;
}
.result,
.description {
margin: 6px 5px 0 0;
display: inline-block;
}
.result {
font-weight: bold;
font-size: 13px;
}
.item {
padding: 15px 30px 30px;
margin: 0 0 30px;
background: #fff;
border-radius: 4px;
p {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #ccc;
&.error {
color: #f00;
}
}
.sub-title {
display: inline-block;
width: 130px;
}
label span {
position: relative;
top: -2px;
margin-right: 10px;
}
}
}
/* LIST VIEW */
.list {
background: #fff;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
padding: 20px;
border-radius: 3px;
.save {
margin: 25px 0 5px;
}
&.tools-input {
margin: 0 0 20px;
padding: 15px 10px;
.list-new {
padding: 0;
}
.sub {
padding: 10px 5px 0;
margin: 15px 0 0;
border-top: 1px solid #e1e1e1;
}
}
}
.list-new {
padding: 0 0 20px;
[class^="icon-"] {
position: relative;
top: 1px;
left: -4px;
}
hr {
background: #e1e1e1;
border: 0;
height: 1px;
margin: 20px 0;
}
// Pension
h2 {
font-size: 16px;
}
// Household
.label {
padding: 5px 0;
display: block;
}
.row {
padding: 5px 0;
}
}
.fixedContentContainer.settingsHeader {
margin-bottom: 20px;
.tools-input {
margin: 0 !important;
}
&.aboveViewport {
.tools-input {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
&.belowViewport {
.tools-input {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
}
.clickable {
cursor: pointer;
&:hover {
background: #ebebeb;
}
}
.not-clickable {
cursor: default;
}
.list-view {
font-size: 13px;
.header {
text-align: left;
padding: 16px 0;
span {
font-family: @FontFamilySecondary;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
white-space: nowrap;
}
.icon {
position: relative;
top: 2px;
color: #ccc;
font-size: 11px;
}
.icon:hover {
cursor: pointer;
}
.active .icon {
color: #000;
}
}
.panel {
margin: 0;
border: 0;
}
&.panel {
margin: 0 0 10px;
}
.list-row {
background: #ffffff;
&:nth-child(2n) {
background: #f5f5f5;
}
a {
display: block;
width: 100%;
text-decoration: none;
}
.icon-caret-right::before {
font-size: 11px;
position: relative;
left: -3px;
}
.label {
display: inline-block;
padding: 16px 0;
}
.sub {
border-bottom: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
padding: 15px 0;
background: #fff;
}
.sub .label {
padding: 5px 0;
}
.sub .row {
padding: 5px 0;
}
/* .sub .col-6 + .col-6 { padding-right: 0; } */
.sub.hh .col-6 + .col-6 {
padding-right: 15px;
}
.subsub {
border-bottom: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
padding: 15px 0;
margin: 5px 0 15px;
border-left: 5px solid @PrimaryAccentColor;
}
.subsub .label {
padding: 6px 0 6px 10px;
}
.subsub .col-2 .label {
padding-left: 4px;
}
.list-delete {
float: right;
position: relative;
top: 9px;
.icon-quick-delete {
margin: 0;
}
}
}
// INTEREST RATES
.row:not(.header) {
.provider {
&:hover {
background: #ebebeb;
}
.labelContainer {
padding-left: 40px;
font-size: 13px;
}
}
}
.logo {
display: inline-block;
width: 40px;
height: 40px;
padding: 2px;
position: absolute;
top: 4px;
left: 5px;
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
img {
width: 28px;
height: 28px;
margin: 3px;
}
}
.interest,
.maturityInterestType {
font-size: 13px;
padding: 16px 0;
text-overflow: ellipsis;
overflow: hidden;
}
.interest {
text-align: center;
}
.interestHeader {
text-align: center;
}
.more-results {
padding-top: 20px;
text-align: center;
}
label.no-data {
border: 1px solid #e1e1e1;
border-radius: 4px;
font-weight: 500;
padding: 15px;
width: 100%;
font-size: 13px;
}
}
fg-form-builder,
fg-form-builder-property {
.row {
padding: 4px 0;
&.row.no-gutter {
padding: 0 !important;
.col-5 {
padding: 0 0 0 8px;
}
.col-6:last-child {
padding: 0 0 0 8px;
}
}
.col-3 .label {
padding: 7px 2px;
}
}
.label {
display: block;
padding: 7px 10px;
}
}
.living-situation #result .col-10 .row .col-3:nth-child(3),
.living-situation #result .col-10 .row .col-3:nth-child(4) {
visibility: hidden;
}
.living-situation .quick-result .more {
display: none;
}
/* AFFORDABILITY GRAPH */
.row.affordability-action {
margin: 0 0 30px;
}
.row.nested {
margin: 0 -15px;
}
.motivate strong {
position: relative;
top: 6px;
right: 6px;
text-transform: uppercase;
color: @PrimaryAccentColor;
font-family: "Montserrat",Arial,sans-serif;
font-size: 10px;
}
/* MORTGAGE ACCEPTANCE TABLE */
.mortgage-acceptance {
.hat-principles-table {
width: 100%;
.radio-check {
padding-top: 2px;
}
.settings-updated-row {
visibility: hidden;
border: solid 1px;
border-color: rgba(255, 0, 0, 0);
color: rgba(0, 0, 0, 0);
transition: color 1.0s, border-color 1.0s, visibility 1.0s;
}
.settings-updated {
visibility: visible;
border-color: rgba(255, 0, 0, 1);
color: rgba(0, 0, 0, 1);
}
}
.no-padding {
padding: 0px;
}
.loan-parts,
.maximum-mortgage-suggestion {
margin-left: 14px;
}
.maximum-mortgage-suggestion {
margin-top: 20px;
}
table {
font-size: 13px;
text-align: left;
border-collapse: collapse;
td {
padding: 5px;
}
}
.hat-drop-down {
margin-top: 15px !important;
}
.hat-month-display {
.group-block-header {
z-index: 1;
padding-top: 0;
padding-bottom: 0;
}
.group-block {
box-shadow: inset -1px 0px 0 lightgray;
padding-top: 0;
padding-bottom: 3px;
}
.sub-table {
width: 100%;
td {
width: 80px;
text-align: right !important;
}
}
strong {
font-weight: bold;
}
}
.summary {
background: #fff;
}
.summary table {
display: inline;
margin-right: 15px;
}
.loan-parts {
tr {
vertical-align: top;
}
th {
padding: 6px;
white-space: nowrap;
}
td {
white-space: nowrap;
}
.parts-box1 {
display: flex;
.part-box1-amount {
min-width: 78px;
float: right;
}
.part-box1-enddate {
float: right;
}
.part-box1-seperator {
padding-left: 5px;
padding-right: 5px;
}
}
}
.maximum-mortgage-suggestion {
tr {
vertical-align: top;
}
th {
padding: 6px;
}
}
.maximum-mortgage-suggestion-positive-result {
th {
font-weight: normal
}
}
.list {
margin-bottom: 15px;
}
.acceptance-details {
white-space: nowrap;
overflow: auto;
max-height: calc(~"100vh - 170px");
margin: 20px 0 20px 15px;
.sticky {
position: sticky;
top: 28px;
background: #fafafa;
z-index: 2;
}
th {
position: sticky;
top: 0;
background: #fafafa;
z-index: 2;
&:first-child {
z-index: 3;
}
}
td,
th {
text-align: right;
padding: 5px;
&:first-child {
text-align: left;
position: sticky;
left: 0;
span {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
max-width: 400px;
@media (max-width: 1000px) {
max-width: calc(~"(100vw - 207px) * .5");
}
}
&::after {
content: "";
display: block;
position: absolute;
background: linear-gradient(90deg, #fafafa 0%, rgba(255, 255, 255, 0) 100%);
height: 100%;
top: 0;
right: -8px;
width: 8px;
}
}
}
tr {
td {
background: #fafafa none repeat scroll 0 0;
}
&:nth-child(2n) td {
background: #f0f0f0 none repeat scroll 0 0;
&:first-child {
&::after {
background: linear-gradient(90deg, #f0f0f0 0%, rgba(255, 255, 255, 0) 100%);
}
}
}
}
}
}
.fg-invalid-dropdown {
border-bottom: 1px @error-color solid;
border-radius: 4px;
}
.fg-invalid-dropdown-icon {
padding-left: 15px;
}
.sidebar-container {
#nav-sidebar-main:not(.open) {
ul {
li {
display: none;
.sidebar-link-title {
display: none;
}
}
}
}
}
.product-contract-status {
i {
display: inline-block;
border-radius: 4px;
color: white;
width: 27px;
line-height: 30px;
text-align: center;
font-size: 16px;
}
.continue {
background-color: #d8d8d8;
}
.relink {
background-color: #f28c4f;
font-size: 20px;
}
.stop-untaxed-payment {
background-color: #f28c4f;
}
.stop {
background-color: #d60000;
}
}
.actions-menu {
li {
i {
width: 20px;
}
svg {
width: 20px;
vertical-align: middle;
}
}
.action-menu-with-percentage-input {
cursor: default;
display: inline-flex !important;
&:hover {
background-color: transparent;
}
input {
margin-left: 5px !important;
width: 75px !important;
}
}
.no-button-icon {
padding: 0 25px 0 0px !important;
}
.action-menu-italic {
font-style: italic;
}
}
.interestRateRiskClasses {
margin: 6px 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
> span {
flex-grow: 1;
min-width: 85px;
}
}
.salesCurrentProperties {
> *:not(:last-child) {
border-bottom: 1px solid #e1e1e1;
padding-bottom: 15px;
margin-bottom: 15px;
}
.realEstateLabel {
transition: text-shadow 0.5s, transform 0.5s, color 0.5s;
transform-origin: left;
}
> .highlight {
.realEstateLabel {
text-shadow: 0.4px 0 0 #0076a3, 0 -0.1px 0 #0076a3, 0 0.1px 0 #0076a3;
transition: text-shadow 0.2s, transform 0.2s, color 0.2s;
transform: scale(1.05);
color: #0076a3;
}
}
}
.mortgagePartSpecification {
> * {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding-left: 22px;
}
}
.rulecube-result {
i {
margin: 0px 5px;
}
.one {
color: @error-color;
}
.two {
color: @warning-color;
}
.three {
color: green;
}
}
.rulecube-axaanvraagmetzekerheid {
position: absolute;
bottom: 5px;
right: 40px;
}
.rulecube-result.error {
.one {
font-weight: 900;
}
}
.rulecube-result.warn {
.two {
font-weight: 900;
}
}
.rulecube-result.info {
.three {
font-weight: 900;
}
}
.hat-principles-number-input-validation {
.invalid {
margin-right: 9px;
}
}
.hat-result-lti-section {
position: relative;
.calendar {
position: absolute;
top: -28px;
right: -55px;
font-size: 28px;
width: 50px;
height: 50px;
color: #3c3d42;
.calendar-text {
position: relative;
top: -2px;
left: -27px;
font-size: 12px;
pointer-events: none;
}
}
}
}
/* MODAL */
.modal.mortgageDialogMessage .modal-dialog {
max-width: 600px;
min-width: auto;
}
.fg-generic-modal-buttons-container .right-buttons {
padding: 0 0 30px;
}
.interest-rates-modal {
.modal-dialog {
width: 1400px;
max-width: 95%;
margin: 30px auto;
padding: 0;
position: relative;
left: initial;
top: initial;
.modal-content {
min-height: 650px;
max-height: 100%;
overflow-y: auto;
padding: 30px 30px 15px;
}
}
.btn-group {
margin: 20px 0;
}
.result-control {
padding: 10px 0;
.rvt-list-btn {
float: left;
width: auto;
width: initial;
}
}
h2 {
margin-bottom: 20px;
}
table {
border-bottom: 1px solid #ddd;
width: 100%;
border-collapse: collapse;
}
td, th {
text-align: center;
border-top: 1px solid #ddd;
padding: 12px;
font-size: 12px;
white-space: nowrap;
}
td:first-child {
text-align: left;
font-weight: bold;
}
td:last-child {
width: 100%;
}
tr.selected td.selectable {
background-color: fade(@PrimaryAccentColor, 35%);
}
tr:hover {
background-color: fade(@PrimaryAccentColor, 15%);
}
th.NhgLast, td.NhgLast {
border-right: 1px solid #e5e5e5;
}
td.selected,
div.interest.selected {
background-color: @PrimaryAccentColor !important;
color: #fafafa;
}
.change-date {
display: block;
padding: 15px 0 0;
margin: 5px 0 0 !important;
span {
display: block;
width: 100%;
font-size: 12px !important;
}
}
.interestRates {
.col-1 {
padding: 0;
text-align: center;
}
}
.interestRatesProduct {
.maturityInterestType {
padding: 0 0 10px 0;
overflow-x: hidden;
text-overflow: ellipsis;
}
}
}
.hideMenu {
#scroll-container, #root-wrapper {
padding-left: 0;
}
.sidebar-container {
display: none;
}
}
.global-motivation-box {
z-index: 99;
}
/* (RIVET) OVERWRITE */
.mortgage-module {
// Variables
@accepted-color: #3cb878;
@not-accepted-color: #bf1f1d;
.side-padding {
padding-left: 150px;
padding-right: 150px;
@media (max-width: 1400px) {
padding-left: 0;
padding-right: 0;
}
}
.row {
margin: 0px;
}
.row [class*="col-"] {
font-size: 13px;
}
.relative-row {
position: relative;
}
.rvt-input-wrap INPUT:not(.rvt-check-box):not(.rvt-radio-btn),
.rvt-input-wrap TEXTAREA {
background: #fff;
border: 1px solid #ccc;
font-size: 13px;
padding: 0 6px;
border-radius: 3px;
}
.rvt-input-wrap INPUT:disabled:not(.rvt-check-box):not(.rvt-radio-btn):not(.read-only),
.rvt-input-wrap TEXTAREA:disabled:not(.read-only) {
border: 1px solid #ccc;
background: #eee;
}
.rvt-input-wrap INPUT:hover:not(.rvt-check-box):not(.rvt-radio-btn):not(:disabled),
.rvt-input-wrap TEXTAREA:hover:not(:disabled) {
border-bottom-width: 1px;
}
.rvt-input-wrap INPUT:active:not(.rvt-check-box):not(.rvt-radio-btn):not(:disabled),
.rvt-input-wrap TEXTAREA:active:not(:disabled),
.rvt-input-wrap INPUT:focus:not(.rvt-check-box):not(.rvt-radio-btn):not(:disabled),
.rvt-input-wrap TEXTAREA:focus:not(:disabled) {
border-bottom-width: 1px;
}
.resize-input-wrap {
width: 110px !important;
}
.rvt-dropdown .rvt-dropdown-head,
.rvt-dropdown button.rvt-dropdown-head {
background: #fff;
border: 1px solid #ccc;
font-size: 13px;
padding: 0 25px 0 6px;
border-radius: 3px;
}
.rvt-dropdown .rvt-dropdown-head:hover:not(:disabled),
.rvt-dropdown button.rvt-dropdown-head:hover:not(:disabled),
.rvt-dropdown .rvt-dropdown-head:focus:not(:disabled),
.rvt-dropdown button.rvt-dropdown-head:focus:not(:disabled),
.rvt-dropdown .rvt-dropdown-head:active:not(:disabled),
.rvt-dropdown button.rvt-dropdown-head:active:not(:disabled) {
border-width: 1px;
}
.rvt-dropdown .separator {
margin: 2px 5px;
border-top: 1px solid grey;
cursor: context-menu;
pointer-events: none;
}
.rvt-dropdown .multiline {
white-space: normal !important;
width: 400px;
height: 60px;
}
.rvt-check-box + label,
.rvt-radio-btn + label {
font-size: 13px;
margin-right: 8px;
}
.rvt-list-btn {
.rvt-list-btn-head {
display: inline-block;
font-size: 13px;
width: auto;
overflow: hidden;
text-overflow: ellipsis;
border-style: solid;
color: #3e4b5b;
&:not(:disabled) {
cursor: pointer;
}
&:disabled:not(.loading):not(.saving) {
pointer-events: auto;
}
&.rvt-btn-style-primary {
:not(:disabled) {
&:active,
&:focus {
background-color: @PrimaryAccentColor;
color: #fafafa;
}
border-color: transparent;
}
}
&:not(.rvt-btn-style-primary) {
border-radius: 3px;
background-color: initial;
&:active,
&:focus {
background-color: #3e4b5b;
color: #fafafa;
}
&:hover,
&:focus {
border-width: 1px;
padding: 0 30px 0 10px;
line-height: 28px;
&::after {
line-height: 24px;
right: 7px;
}
}
}
}
&.open .rvt-list-btn-head {
color: #fafafa;
&:not(.rvt-btn-style-primary) {
background-color: #3e4b5b;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
> UL {
width: auto;
}
}
.rvt-check-box:checked + label span::after {
font-size: 11px;
line-height: 16px;
}
.rvt-check-box + label span, .rvt-radio-btn + label span {
height: 16px;
width: 16px;
border: 1px solid #3e4b5b;
}
.rvt-check-box + label:hover span, .rvt-radio-btn + label:hover span, .rvt-check-box + label:focus span, .rvt-radio-btn + label:focus span {
border-width: 1px;
outline: medium none;
}
.rvt-dropdown-borderless {
.rvt-dropdown-head {
border: 0px !important;
}
&[disabled] .rvt-dropdown-head {
background: none;
}
}
/* @Arjen, this restores bootstrap's collapse code. */
.collapse {
display: none;
&.in {
display: block;
}
tr&.in {
display: table-row;
}
tbody&.in {
display: table-row-group;
}
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-property: height, visibility;
transition-property: height, visibility;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.companyProductsForm {
.companyOtherValidation {
span {
right: 29px;
}
}
.productOtherValidation {
span {
right: 29px;
}
}
}
.lti {
.list-view .header span {
white-space: normal;
}
.data-columns span {
text-align: right;
}
.label {
width: 100%;
&.success {
i {
color: @accepted-color;
}
}
&.error {
i {
color: @not-accepted-color;
}
}
}
hr {
background: #e1e1e1;
border: 0;
height: 1px;
margin: 0 15px 5px;
}
.lti-subheader {
border-bottom: 1px solid #ddd;
}
.warning-lines {
margin-top: 5px;
margin-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}
}
.compare-terms {
padding-top: 60px;
.tools-input {
padding: 15px 0;
}
.product-terms {
.product-term-category {
margin: 15px 0;
padding-bottom: 10px;
.strip {
position: absolute;
top: 0;
bottom: 0;
left: -15px;
width: 3px;
}
.category-title {
font-size: 20px;
margin-bottom: 10px;
color: #000;
}
.product-term {
color: #000;
background-color: #EFEFEF;
&.meta {
color: #666;
&:nth-child(1) {
margin-top: 30px;
}
}
.category, .description {
padding: 10px 15px;
height: 100%;
display: block;
}
&:nth-child(2n+1) {
background-color: #FFF;
}
}
}
}
}
.addRepaymentProduct {
.header {
font-style: italic;
background-color: inherit;
cursor: default;
text-align: left;
padding: 0 6px;
}
ul li:not(:first-child) a {
padding-left: 20px;
}
}
.addCopyOfCurrentProduct {
li a {
padding-left: 20px;
&.header {
text-align: left;
padding-left: 6px;
font-weight: bold;
}
&.disabled {
&:hover,
&:focus {
background-color: inherit;
cursor: default;
}
}
}
}
#mortgageAmountSub {
.interestRate {
button {
svg {
vertical-align: middle;
}
}
}
}
#mortgagePartSub {
.firstColItemIndent {
margin-left: 27px;
}
.loanPartTransactions,
.extraRepayments {
padding: 0;
margin: -5px 0;
.addLoanPartTransactionButton,
.addExtraRepaymentButton {
line-height: 28px;
&:not(:disabled):hover,
&:focus {
line-height: 26px;
}
.icon {
font-size: 8px;
line-height: 22px;
}
}
}
.enableExtraPartBox1_Block {
.icon {
font-size: 8px;
line-height: 22px;
}
}
.partBox1Block {
.partBox1Block-date {
span.invalid {
right: 55px;
}
}
}
}
#otherProductSub {
.targets {
.orderedList {
li:last-child {
margin-bottom: 10px;
}
&.dragging {
li:nth-last-child(2) {
margin-bottom: 10px;
}
}
}
.rvt-list-btn {
width: 50%;
padding-right: 15px;
.rvt-list-btn-head {
width: 100%;
}
}
}
.hdn-lx {
.rvt-btn-300 {
width: 100%;
font-size: 13px;
}
}
}
}
.sidebar-container #sidebar-wrapper #nav-sidebar-main {
.content-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100vh;
width: inherit;
max-height: ~"calc(100vh - 150px)"; // The 150px must be changed when height of nav-sideBar-footer is changed.
}
/* Repositions logo to save screen real estate */
.sub-nav-logo-wrapper {
position: relative;
display: inline-block;
width: 100%;
height: auto;
line-height: 0px;
li {
cursor: default;
}
img {
width: 89px;
height: 42px;
display: inline-block;
position: relative;
margin: 10px 6px 10px 51px;
}
div.mortgage-logo {
position: relative;
display: inline-block;
width: 100%;
text-align: center;
width: 111px;
float: right;
margin-top: 18px;
margin-right: 7px;
height: 25px;
font-family: 'Roboto', sans-serif;
letter-spacing: 1px;
color: #FFF;
font-weight: 400;
.mortgage-title {
position: relative;
font-size: 16px;
padding: 3px 10px 0px 10px;
display: inline-block;
line-height: normal;
}
.mortgage-subtitle {
position: relative;
top: 10px;
font-style: italic;
font-size: 12px;
}
.background {
will-change: background-color;
transition-property: background-color;
transition-duration: 0.3s;
background-color: @mortgage-color;
border-radius: 10px 0 10px 0;
transform: skew(-4deg);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
}
.sidebar-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
overflow-y: auto;
width: inherit;
> * {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin: 0;
padding: 0;
&.sidebar-content-bottom {
position: fixed;
bottom: 0px !important;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
}
}
}
money-view-iframe {
iframe {
border: none;
}
}
.money-view {
.modal-content {
padding: 0 !important;
}
.loading-block {
.loading-text {
display: none;
}
}
}
.fg-moneyview-modal-container {
display: inline-block;
}
.moneyview-cancel {
margin: 0 50px 30px 0;
}
.budget-overview {
.budget-overview-table {
display: table;
width: 100%;
}
.tr {
display: table-row;
width: 100%;
}
.category:nth-child(odd) {
background-color: #F9F9F9;
}
.td {
display: table-cell;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
}
.indent-to-right {
padding-left: 50px;
text-align: left;
}
.indent-to-right-more {
padding-left: 100px;
text-align: left;
}
.indent-to-left-more {
padding-right: 100px;
text-align: right;
}
.bold {
font-weight: bold;
}
.text-overflow-ellipsis {
max-width: 100px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
.budget-fixed-header {
background-color: #e5e5e5;
.panel-notification {
background-color: #E7AA37;
color: #1E1E1E;
padding: 5px 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 4px;
margin-bottom: 5px;
border-radius: 4px;
&:not(.instant) {
animation: fadeIn 1s forwards;
}
span {
margin: 0;
font-weight: 500;
}
}
}
.lti-ranking {
padding-top: 60px;
.lti-ranking-items .header {
.lti-name, .lti-value, .lti-interest-rate {
text-align: left;
}
.lti-column {
&:hover, &:focus, &.active {
.sort-direction {
opacity: 1;
}
}
&.active.ascending .sort-direction {
transform: rotateX(180deg);
}
.sort-direction {
opacity: .5;
will-change: opacity, transform;
transition-property: opacity, transform;
transition-duration: 0.125s;
}
}
}
.lti-ranking-items .lti-ranking-item {
background: #ffffff;
&:nth-child(2n) {
background: #f5f5f5;
}
.lti-name, .lti-value, .lti-interest-rate {
text-align: left;
}
.lti-company-product-name {
padding-left: 40px;
font-size: 13px;
}
}
.pdf-btn {
button {
margin-top: -5px;
float: right;
}
}
}
.orderedList {
list-style: none;
padding: 1px 0 0 0;
margin: 0;
li {
height: 30px;
cursor: move;
cursor: grab;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
border: 1px solid #ccc;
margin-top: -1px;
background-color: #f9f9f9;
&:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
button {
border-top-right-radius: 3px;
}
}
&:last-child {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
button {
border-bottom-right-radius: 3px;
}
}
&.dragItem {
border-radius: 3px 3px 3px 3px;
cursor: grabbing;
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 3px 0px;
button {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
}
&.dragging {
opacity: 0.4;
}
.index {
font-weight: bold;
color: #999;
display: inline-block;
width: 30px;
height: 100%;
line-height: 28px;
border-right: 1px solid #ccc;
text-align: center;
vertical-align: middle;
}
.gripIcon {
color: #999;
margin: 0 10px 0 0;
float: right;
line-height: 28px;
}
.name {
margin: 0 0 0 5px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
vertical-align: middle;
max-width: calc(~"100% - 105px");
display: inline-block;
vertical-align: middle;
}
button {
margin-top: -1px;
margin-right: -1px;
border-radius: 0;
height: 30px;
line-height: 0;
}
}
&.dragging {
cursor: grabbing;
li:nth-last-child(2) {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
button {
border-bottom-right-radius: 3px;
}
}
}
}
#ssoContainer {
.ssoErrorText {
position: absolute;
}
.loadingKey .loading-text {
display: none;
}
}
fg-bread-crumbs {
display: block;
font-size: 22px;
font-weight: 300;
font-family: 'Roboto', sans-serif;
padding: 15px;
height: 60px;
}
.bread-crumbs {
.bread-crumb {
display: flex;
position: relative;
> :not(.bread-crumb) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 34px;
flex-shrink: 1;
}
}
/* 1st (base) bread-crumb */
> .bread-crumb {
margin-left: -16px;
> :not(.bread-crumb)::before {
content: "\00a0\00a0\00a0"; /* \00a0 == */
}
}
/* nested bread-crumb */
.bread-crumb .bread-crumb {
flex-shrink: 0;
max-width: 100%;
margin-right: -34px;
padding-right: 34px;
> :not(.bread-crumb)::before {
content: "\00a0/\00a0"; /* \00a0 == */
}
}
}
.maximumMainResidenceDebtSpecification {
.value {
position: relative;
white-space: nowrap;
&.total-value {
display: inline-block;
min-width: 80px;
margin-top: -5px;
padding-top: 4px;
border-top: 1px solid black;
}
&.addition-value,
&.deduction-value {
display: inline-block;
}
&.addition-value::before {
content: "+";
position: absolute;
right: -12px;
}
&.deduction-value::before {
content: "-";
position: absolute;
right: -10px;
}
}
.maximumMainResidenceDebt {
font-weight: bold;
margin-bottom: 20px;
}
.maximumMainResidenceDebtCorrection {
> div:first-child {
padding-top: 7.5px;
}
.addition-value::before {
top: 8px;
}
.rvt-input-wrap {
display: inline-block;
max-width: 107px;
input {
text-align: right;
}
}
}
.form-buttons {
margin-top: 30px;
}
}
.header-back-button {
button {
top: 35px;
}
}
.nav-active {
.mortgage-module {
.mortgage-acceptance {
.acceptance-details {
th,
td {
&:first-child {
span {
@media (max-width: 1260px) {
max-width: calc(~"(100vw - 462px) * .5");
}
}
}
}
}
}
}
}
// this is placed here for it to work, should be part of sidebar style, however that is overruled.
&.user-logout:hover, &.app-exit:hover {
background-image: -webkit-linear-gradient(92deg, #a00000 -100%, rgba(180, 0.15, 0.15, 0.15) -7%) !important;
background-image: -o-linear-gradient(92deg, #a00000 -100%, rgba(180, 0.15, 0.15, 0.15) -7%) !important;
background-image: linear-gradient(92deg, #a00000 -100%, rgba(180, 0.15, 0.15, 0.15) -7%) !important
}
.empty-icon {
padding-right: 23px;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.bridgeloan-description-row {
margin-top: 10px;
}
.preserve-newlines {
white-space: pre-line;
}
//////////////////////////////////////////////////////////////////////
// Concat from original source file: src/siteModule.style_print.less
//////////////////////////////////////////////////////////////////////
@media print{
.result {
status-bar,
button,
.rvt-list-btn { display: none; }
.rvt-dropdown {
.rvt-dropdown-head { border: none;
&:before { display: none; }
span { position: inherit; }
.current-selection { padding: 0 0 20px 0; font-size: 18px; line-height: 1em; height: 2em;
display: block; background: #2a3a48; color: #fff; font-size: 28px; padding: 10px; margin: 0 0 15px; margin-top: 10px; text-transform: uppercase; font-family: "Montserrat",Arial,sans-serif; font-size: 24px; letter-spacing: 1px; font-weight: normal;
}
}
}
h3,
.result-row-header,
.result-summary,
.result-control,
.result-block { padding: 0 !important; margin: 0 !important; }
.row [class*="col-"] { padding: 0; }
h2 { display: block; background: #2a3a48; color: #fff; font-size: 28px; padding: 10px; margin: 0 0 15px; margin-top: 10px; text-transform: uppercase; font-family: "Montserrat",Arial,sans-serif; font-size: 24px; letter-spacing: 1px; font-weight: normal; }
h3 { display: block; font-size: 15px; padding: 3px !important; margin: 0 0 15px; font-weight: normal; }
table { width: 100% !important; border-collapse: collapse; }
.table th,
.table td,
.list-group-item { padding: 6px 0; }
table tr:nth-child(2n) { background: #f3f3f4; }
.list-group-item { border: none; list-style: none; }
.list-group { padding-left: 0; }
label.motivation-summary { font-size: 13px; }
}
.print-table {
table { width: 100% !important; border-collapse: collapse; }
h2 { display: block; background: #2a3a48; color: #fff; font-size: 28px; padding: 10px; margin: 0 0 15px; margin-top: 10px; text-transform: uppercase; font-family: "Montserrat",Arial,sans-serif; font-size: 24px; letter-spacing: 1px; font-weight: normal; }
.site-module-print-table {
table tr:nth-child(2n + 1) { background: #f3f3f4; }
tr.empty { background: #fff !important; height: 40px;}
}
tr { width: 100% !important}
td {
text-align: right;
padding: 6px 0;
}
td.value {
width: 125px;
}
span.pull-left {
margin-left: 25px;
text-align: left;
}
td.label {
text-align: left;
}
td.total {
font-weight: 700;
}
.lti{
thead tr { background: #f3f3f4; }
tbody tr:nth-child(2n + 1) { background: #f3f3f4; }
td { width: 10%; }
hr { padding-top: 0px !important; padding-bottom: -10px !important; margin-top: 0px !important; margin-bottom: -10px !important; }
.lti-overview-table span { font-size: 10px; }
.extra-margin-right { margin-right: 25px; }
.extra-margin-left { margin-right: 25px; }
}
}
.icon-star:before { content: "\2605"; font-family: inherit !important; }
.group-conclusion { page-break-inside: avoid; }
td { font-size: 12px; padding: 3px !important; margin: 0; }
th { font-size: 11px; padding: 10px 3px !important; margin: 0; text-align: left; vertical-align: top; }
tfoot { font-weight: bold; }
.helpOverlay { display: none; }
fg-loading-spinner { display: none; }
.lti {
i {
padding-left: 50%;
}
}
.budget-overview {
font-size: 14px;
.budget-overview-table {
display: table;
width: 100%;
}
.tr {
display: table-row;
width: 100%;
}
.category:nth-child(odd) {
background-color: #F9F9F9;
}
.td {
display: table-cell;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
}
.indent-to-right {
padding-left: 50px;
text-align: left;
}
.indent-to-right-more {
padding-left: 100px;
text-align: left;
}
.indent-to-left-more {
padding-right: 100px;
text-align: right;
}
.bold {
font-weight: bold;
}
}
.maximum-mortgage-suggestion {
tr {
vertical-align: top;
}
th {
padding: 6px;
}
}
.maximum-mortgage-suggestion-positive-result {
th {
font-weight: normal
}
}
}