/* You can add global styles to this file, and also import other style files */
@import 'variables';
@import "~node_modules/bootstrap/scss/bootstrap";
@import '~@angular/material/prebuilt-themes/indigo-pink.css';


/* Form specific styles to match Landmark requirements */
$base: #353432;
$primary: #005674;
$primary-dark: #053251;
$secondary: #0D3151;
$success: #2c5e29;
$success-dark: #004B00; /* Success 20% Darker */
$warning: #f7941d;
$error: #f63440;
$light-gray: #d5d3d3;
$disabled: #949699;
$white: #ffffff;
$background: #f8f9fa;
$width-to-mobile: 767px;

.landmark-hero {
  background-color: $primary;
  padding: 0.5em 3em;
}

.landmark-hero-emoji {
  font-size: 4.5em;
  color: $white;
  text-align: center;
}

.landmark-hero-status {
  font-size: 2.25em;
  color: $white;
  text-align: center;
  margin: 0;
}

.landmark-hero-copy {
  font-size: 1.15em;
  color: $white;
  text-align: center;
}

.muted-background {
  background-color: $background !important;
}
/*** Errors display ***/
.form-control.ng-invalid.ng-touched .form-control.ng-invalid.ng-dirty {
    border-color: $error;
}
.invalid-feedback {
  display: block;
}

/*** Custom buttons***/
.btn-custom , .btn-custom:visited ,.btn-custom:hover{
  padding-left: 30px !important;
  padding-right: 30px !important;
}

.btn-custom:active, .btn-custom.active {
  color: $white;
  background-color: $primary !important;
}

.btn-success {
  background-color: $success;
  font-size: 16px;
  font-family: Arial, sans-serif;
}
.btn-success:hover{
  background-color: $success-dark;
}

.btn-continue {
  margin: 0 0 1em 1em;
}

.btn-previous {
  margin: 0 0 1em 0;
  text-decoration: underline;
}

.btn-disabled {
  background-color: #999999;
  color: #ffffff;
  margin: 0 0 1em 1em;
}

@media(min-width: 1200px) {
  .btn-vertical-divider {
    border-right: 1px solid #EAEAEA;
    margin-right: 48px;
    margin-top: 24px;
  }
}

@media(min-width: 992px) {
  .btn-vertical-divider {
    border-right: 1px solid #EAEAEA;
    margin-right: 48px;
    margin-top: 24px;
  }
}

/*** Watermarks ***/
.watermark-primary {}
.watermark-secondary
{
  max-width: 200px;
  position:absolute;
  right:10%;
  opacity:1;
  z-index: -1;
}
//Resize
@media screen and (max-width: $width-to-mobile) {
  .watermark-primary {
    display:none;
  }
  .watermark-secondary {
    max-width: 75px;
    position: absolute;
    top:4%;
    left: 0;
    right: 0;
    margin: auto;
  }
}

/*** Color of icons before text***/
.input-group-prepend .input-group-text {
  background-color: $primary;
  border-color: $primary;
  color: #FFFFFF;
}

.limited-width-col{
  max-width: 400px;
}

// checkbox restyling came from a stack overflow question, seems to work really well
// note that it has been customized to look like graydient's design
// https://stackoverflow.com/questions/43520218/how-to-create-a-tick-mark-in-a-custom-checkbox
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}

[type="checkbox"]:not(:checked)+label,
[type="checkbox"]:checked+label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

[type="checkbox"]:not(:checked)+label:before,
[type="checkbox"]:checked+label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 15px;
  background: white;
  border: solid gray 1px;
  outline: none;
}

[type="checkbox"]:checked:hover +label:before,
[type="checkbox"]:not(:checked):hover +label:before,
[type="checkbox"]:focus + label::before {
  background: $light-gray;
  border: solid $primary 1px;
}

[type="checkbox"]:not(:checked)+label:after,
[type="checkbox"]:checked+label:after {
  content: url('/assets/checkbox/check.png');
  position: absolute;
  top: -10px;
  left: -5px;
  font-size: 34px;
  line-height: 0.8;
  color: green;
  transition: all .2s;
}

[type="checkbox"]:not(:checked)+label:after {
  opacity: 0;
  transform: scale(0);
}

[type="checkbox"]:checked+label:after {
  opacity: 1;
  transform: scale(1);
}

.checkbox-label {
  left: -25px;
  top: 40px;
}

.padding {
  padding-left: 1rem;
  padding-right: 1rem;
}

.icon-input-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

.input-auto {
    width: auto;
}

.input-lmcu-fixed-width {
  width: 20em;
}

.summary-card > .col-4  {
    padding-left: 2em;
}
.submit-row {
    margin: 2em 0 2em 0;
}

.disclosure-text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.97em;
    line-height: 1.15em;
  }

/*** Placeholder ***/
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: $light-gray !important;
  font-family: Arial,  sans-serif;
  font-style: italic !important;
  font-size: 16px !important;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: $light-gray !important;
  font-style: italic !important;
  font-size: 16px !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: $light-gray !important;
  font-style: italic !important;
  font-size: 1rem !important;
}

/*** Headers ***/
h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', sans-serif !important;
}

h1, h2 {
  font-size: 44px;
  font-weight: 400;
  color: $primary;
}

h3 {
  font-size: 24px;
  font-weight: 700;
  color: $base;
}

h4 {
  font-size: 20px;
  font-weight: 400;
  color: $base;
}
/*** Hint / helper text ***/
.hint-field .control-label{
  margin-bottom: 0;
}

.hint {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 14px;
  color: $light-gray;
  font-style: italic;
}
/*** Accordion ***/
.accordion .card{
  border-radius: .25rem;
  border: 2px solid $secondary;
}

.accordion .card:first-of-type{
  border-bottom: 2px solid $secondary;
  border-radius: 0.25rem;
}

.accordion .card .card-header {
  position: relative;
  background-color: $secondary;
  color: $white;
  font-size: 1.2rem;
  letter-spacing: 1.5px;
  border-radius: 0;
}
.accordion .card .card-header a {
  color: $white;
}

.accordion .card .card-header a:hover {
  color: $light-gray;
}

.accordion .card .card-header p {
  margin-bottom: 0;
}

.accordion .card .card-header .card-icon {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 1.8rem;
}

html * {
  font-family: Arial, sans-serif;
}

.legal-text {
  color: #000000;
  border-color: $warning;
  border-width: 2px;
  font-size: 0.85em;
}

/*** Modal ***/
.modal-title {
  color: $white !important;
}
.close {
  color: $white !important;
}

.modal-header {
  background-color: $primary-dark !important;
}

.title-hr {
  margin: 0 0 0.67em 0;
  color: #DFDFDF;
  height: 4px;
  border: none;
  background-color: #DFDFDF;
}

.optional-text {
  color: $light-gray;
  font-size: 14px;
  font-style: italic;
}

.form-group {
  margin-bottom: 1rem;
}

/*** Select **/
.custom-drop-down select {
   display: inline-block;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   cursor: pointer;
   outline: none;
   z-index: 0 !important;
 }

.custom-drop-down .input-group :before {
  z-index: 1;
  content: '';
  right: 0;
  top:  0;
  width: 35px;
  height: 38px;
  background: $primary;
  position: absolute;
  pointer-events: none;
  font-size: 26px;
  font-family: monospace !important;
  font-style: normal;
  font-weight: normal;
  border: 4px solid $primary;
  border-top-right-radius: .25rem;
  border-bottom-right-radius: .25rem;
  padding: 2px 2px 2px 2px;
}
.custom-drop-down { position: relative; }
.custom-drop-down:after {
  z-index: 1;
  content:  "▾";
  color: white;
  font-size: 26px;
  font-family: monospace !important;
  font-style: normal;
  font-weight: normal;
  right: 25px;
  top: -3px;
  bottom: 0;
  background: transparent;
  position: absolute;
  pointer-events: none;
}

@-moz-document url-prefix() {
  // alignment for firefox
  .custom-drop-down:after {
    right: 22px;
    top: 1px;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  // alignment for IE
  .custom-drop-down:after {
    right: 22px;
    top: -2px;
  }
  // fix input box height
  .form-control {
    padding: 0.55rem 0.75rem !important;
  }
}

// fix height/width for input icons
span.input-group-text {
  height: 38px !important;
  width: 40px !important;
}
div.input-group-text {
  height: 38px !important;
  width: 40px !important;
}
// remove internet explorer / edge
input::-ms-clear { display: none; }

.custom-checkbox-mt {
  position: relative;
  top: 2px;
}