/*#####################################################################################

  CSS tweaks for Version 2 Summary Pages on the Web

  Version Date: 7-Nov-2023

  NOTE
  ----
  This simply tweaks summary page styles, e.g., fonts to fit in with the Web version.
/*#####################################################################################

/*
 =======
 General
 =======
*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

/* Use Web font and sizing */
html.is-summarypage-2,
div.is-summarypage-2,
button
{
  font-family:'Open Sans', Sans-serif, 'Helvetica Neue', Helvetica, Verdana, Arial;
  font-size:12.5px;
  -webkit-overflow-scrolling: touch;
}

/* iOS Safari (stop page being able to be dragged which sometimes interferes with scrollable divs) */
@media not print {
  html, body
  {
    bottom:0;
    left:0;
    position:fixed;
    right:0;
    top:0;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Body will have no padding or margin so add some to the surrounding div */
body > div.is-summarypage-2 {
  padding:4px;
}

/* Allow photos to be collapsed */
.is-summarypage-2 div.is-photo {
  border:0;
  box-shadow:none;
  padding:0;
}
.is-summarypage-2 div.is-photo > img {
  border:0;
  padding:0;
  margin:0;
  vertical-align: middle;
}

/* Blocks */
div.is-summarypage-2 div.is-summarypage-block {
  border-radius:4px !important;
  overflow:hidden;
}


/*
  ==========
  Responsive
  ==========
*/

/* Make columns stack rather than be side-by-side and restrict blocks to 100% width */
.is-container-small div.is-summarypage-2 div.is-summarypage-section-columns,
.is-container-small div.is-summarypage-2 div.is-summarypage-section-columns > div {
  display:block !important;
  max-width:100% !important;
  position:relative;
}
.is-container-small div.is-summarypage-2 div.is-summarypage-section-columns > div > div {
  display:block !important;
  max-width:100% !important;
  position:relative;
  width:100% !important;
}
.is-container-small div.is-summarypage-2 div.is-summarypage-block-body {
  overflow-x:auto;
  max-width:100% !important;
  position:relative;
  width:100% !important;
  -webkit-overflow-scrolling:touch;
}



/*
  ======
  Tables
  ======
*/

/* Table columns */
.is-container-small .is-summarypage-2 .hidden-800 {display:none; visibility:hidden}
.is-container-small .is-summarypage-2 .hidden-640 {display:none; visibility:hidden}
.is-container-small .is-summarypage-2 .hidden-500 {display:none; visibility:hidden}
.is-container-small .is-summarypage-2 .hidden-400 {display:none; visibility:hidden}
/*
.is-container-small .is-summarypage-2 .hidden-320 {display:none; visibility:hidden}
.is-container-small .is-summarypage-2 .hidden-240 {display:none; visibility:hidden}
*/


/*
=======
Buttons
=======
*/
.is-summarypage-2 button.is-template-button
{
  background-color:#f4f4f4 !important;
  border:1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius:12px !important;
  display:inline-block;
  margin:0 2px 0 2px;
  cursor:pointer;
  font-family:'Open Sans', Sans-serif, 'Helvetica Neue', Helvetica, Verdana, Arial !important;
  font-weight:normal;
  font-size:12px !important;
  height:32px;
  min-width:80px;
  outline:none;
  padding:0 8px 0 8px;
}

.is-summarypage-2 button.is-template-button:hover
{
  background-color:#e8e8e8 !important;
  border:1px solid rgba(0, 0, 0, 0.2) !important;
}

.is-summarypage-2 button.is-template-button > img
{
  margin-top:-2px;
}

.is-summarypage-2 div.is-table-actions > ul.is-actions > li > a {
  border-radius:12px !important;
  font-size:11px !important;
  line-height:20px !important;
}

/*
======================
Sectioned Page Support
======================
*/
h1.is-section-heading {
  color:#0000A0;
  font-weight:bold;
  padding:0;
  font-size:14.375px;
  margin-top:0.85em;
  margin-bottom:0.1em;
}

/*
================
Special Headings
================
*/
.is-heading > h3 {
  color:black;
  font-size:0.975em;
}

/*
 ==========================================================================================
 Additional Classes for finPOWER Connect Cloud-only Summaries (e.g., taken from Widget CSS)
 ==========================================================================================
*/
.is-info-text {
  color: #7c2a16;
  cursor: default;
  font-size: 13px;
  margin: 4px 0 8px 0;
  /* Small */

  /* List */

  /* Information (e.g., below the checkboxes on the Account Application Accept/ Decline wizard) */

  /* Validation (e.g., on Search View as validation message) */

  /* Warning */

  /* Control (after a control) */

}
.is-info-text.small {
  font-size: 11px;
}
.is-info-text > ul {
  padding: 4px;
  margin: 2px 0 2px 12px;
}
.is-info-text.info {
  animation: pop 0.2s;
  background-color: #ffffee;
  border: 1px solid rgba(0, 0, 0, 0.05);
  color: black;
  display: inline-block;
  padding: 8px;
}
.is-info-text.info p {
  margin: 6px 0 6px 0;
}
.is-info-text.validation {
  animation: pop 0.2s;
  background-color: #a7381e;
  color: white;
  display: inline-block;
  padding: 2px;
}
.is-info-text.warning {
  animation: pop 0.2s;
  color: red;
}
.is-info-text.control {
  color: gray;
  font-size: 11px;
  padding-left: 4px;
}

@keyframes pop {
  from {
    transform: scale(0.8);
  }
  to {
    transform: scale(1);
  }
}