﻿; /* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/* Variables */
element {
    --mobile-width: 512px;
  }

.navbar-toggleable-sm {
    margin-bottom: 1rem;
}

a.navbar-brand {
    white-space: normal;
    text-align: start;
    word-break: break-all;
    color: #2C2961!important;
    opacity: 1;
    background: #fff;
    margin-right: 0;
}

.navbar {
    font-size: 25px;
    letter-spacing: 0px;
}

.logo {
    width: 80%;
}

.decisions-results-bar {
    display: inline-flex;
    padding-bottom: 50px;
}

.decisions-results-bar a {
    color: #9699A6;
}

.row {
    display: flex !important;
}

.sub-menu-mobile {
    display: none !important;
}

.hidden {
    display: none;
}

.fill-div {
    padding: 10px;
    text-decoration: none !important;
    width: 205px;
    text-align: center;
    background: #F5F6F8 0% 0% no-repeat padding-box;
}

.fill-div:hover {
    background: #EDEDED;
}

.fill-div-large {
    width: 307px;
}

.border-left-rounded {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.border-right-rounded {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.results-tab.menu-right.border-right-rounded-end {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.border-left-rounded-deep {
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

.border-right-rounded-deep {
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

.map-1-tab, .map-1-tab.fill-div-large:hover {
    color: #C4081B;
}

.map-1-tab.active {
    background-color: #C4081B !important;
}

.map-1-tab.active:hover {
    color: #C4081B;
}

.map-2-tab, .map-2-tab.fill-div-large:hover {
    color: #FFA800;
}

.map-2-tab.active {
    background-color: #FFA800!important;
}

.map-2-tab.active:hover {
    color: #FFA800;
}

.map-3-tab, .map-3-tab.fill-div-large:hover {
    color: #09B261;
}

.map-3-tab.active {
    background-color: #09B261!important;
}

.map-3-tab.active:hover {
    color: #09B261;
}

.map-4-tab, .map-4-tab.fill-div-large:hover {
    color: #5c32a7;
}

.map-4-tab.active {
    background-color: #5c32a7!important;
}

.map-4-tab.active:hover {
    color: #5c32a7;
}

.map-5-tab.hover {
    color: #3311bb;
}

.map-5-tab.active {
    background-color: #3311bb!important;
}

.pandl-tab.fill-div-large {
    color: #2C2961;
}

.pandl-tab.active, .pandl-full-tab.active {
    background-color: #2C2961;
}

.pandl-tab.active:hover, .pandl-full-tab.active:hover {
    color: #fff !important;
    background-color: #2C2961;
}

.pandl-sub-nav {
    display: inline-flex!important;
}

.active {
    color: #fff!important;
    background-color: #795BAE;
}

.active:hover {
    background-color: #795BAE;
    color: #fff;
}

#map-1, #map-2, #map-3, #map-4, #pandl {
    display: none;
}

#map-1 .active {
    background: #C4081B;
}

#map-2 .active {
    background: #FFA800;
}

#map-3 .active {
    background: #09B261;
}

#map-4 .active {
    background: #5c32a7;
}


#decisions-map-1 .active, #decisions-map-1 .active:hover, #results-map-1 .decisions-results-body-inner-results.active {
    background-color: #C4081B;
}

#decisions-map-1 .decisions-results-body-inner:hover {
    border: 3px solid #C4081B
}

#decisions-map-2 .active, #decisions-map-2 .active:hover, #results-map-2 .decisions-results-body-inner-results.active {
    background-color: #FFA800;
}

#decisions-map-2 .decisions-results-body-inner:hover {
    border: 3px solid #FFA800
}

#decisions-map-3 .active, #decisions-map-3 .active:hover, #results-map-3 .decisions-results-body-inner-results.active {
    background-color: #09B261;
}

#decisions-map-3 .decisions-results-body-inner:hover {
    border: 3px solid #09B261
}

#decisions-map-4 .active, #decisions-map-4 .active:hover, #results-map-4 .decisions-results-body-inner-results.active {
    background-color: #5c32a7;
}

#decisions-map-4 .decisions-results-body-inner:hover {
    border: 3px solid #5c32a7
}

.container {
    max-width: 1600px!important;
}

.tab-content {
    margin: 210px 0 0 50px;    
}

.tab-content.landing {
    position: absolute;
    top: 30%;
    width: 85%;
}

.pandl-content {
    padding-left: 0;
}

.container-svg {
    padding-left: 15px;
    padding-right: 15px;
    display: block;
}

.decisions-results-content {
    padding-left: 15px;
    padding-right: 15px;
}

.decisions-results-content span {
    display: block;
}

.decisions-results-title::before {
    height: 54px;
    content: ' ';
    position: absolute;
    top: 0;
    width: 1%;
    left: 0;
    background-color: #795BAE;
}

#map-1 .decisions-results-title::before {
    background: #C4081B;
}

#map-2 .decisions-results-title::before {
    background: #FFA800;
}

#map-3 .decisions-results-title::before {
    background: #09B261;
}

#map-4 .decisions-results-title::before {
    background: #5c32a7;
}

.decisions-results-title {
    font-size: 23px;
    font-weight: 500;
    background: #F5F6F8;
    color: #47484C;
    padding: 10px;
    width: 99%;
    position: relative;
}

.decisions-results-body {
    padding: 30px;
}


.decisions-results-body-inner {
    border: 3px solid #F5F6F8;
    height: 425px;
    width: 465px;
}

.decisions-results-body-inner:hover {
    border: 3px solid #795BAE;
    cursor: pointer;
}

.decisions-results-body-inner .row {
    padding-bottom: 15px;
}

.decisions-results-body-inner input[type="radio"]:checked {
    color: #fff!important;
    background-color: #795BAE;
}

.decisions-results-body-inner-results {
    height: 310px;
}

.decisions-results-body-inner-results:hover {
    cursor: default;
    border: 3px solid #F5F6F8;
}

.point-header {
    font-size: 25px;
    width: 50%;
}

.point-header-value {
    padding-top: 5px;
    font-size: 15px;
    text-align: right;
    color: darkgray;
    width: 50%;
}

.point-desc {
    font-size: 18px;
}

input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}

/* Flow chart styles
-------------------------------------------------- */
.tree-header-map-1 {
    color: #fff;
    background-color: #C4081B;
    font-size: 12px;
}

.tree-header-map-2 {
    color: #fff;
    background-color: #FFA800;
    font-size: 12px;
}

.tree-header-map-3 {
    color: #fff;
    background-color: #09B261;
    font-size: 12px;
}

.tree-header-map-4 {
    color: #fff;
    background-color: #5c32a7;
    font-size: 12px;
}

.tree-header-map-5 {
    color: #fff;
    background-color: #3311bb;
    font-size: 12px;
}

.tree-header-general {
    color: #fff;
    background-color: #383737;
    font-size: 12px;
}

.tree-content {
    font-size: 18px;
}

.tree-content-left {
    color: #fff;
    background: #909090;
}

.tree-content-right {
    color: #000;
    background: #fff;
}

.profit {
    color: #40A629;
}

.loss {
    color: red!important;
}



/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 2px 2px 17px #16161599;
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
    background: #fff;
}

body {
  /* Margin bottom by footer height */
  min-height: 100%;
  margin-top: 210px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    /* Set the fixed height of the footer here */
    height: 60px;
    line-height: 60px; /* Vertically center the text there */
}

.welcome-text {
    text-align: center;
    color: #2C2961;
}

.submit-bar {
    background: #795BAEF2;
    text-align: right;
    font-size: 21px;
    color: #fff;
    position: sticky;
    bottom: 0;
    z-index: 2;
}

#decisions-map-1 .submit-bar {
    background: #C4081B;
}
#decisions-map-2 .submit-bar {
    background: #FFA800;
}
#decisions-map-3 .submit-bar {
    background: #09B261;
}
#decisions-map-4 .submit-bar {
    background: #5c32a7;
}

.submit-button {
    background-color: #fff;
    color: #795BAEF2;
    width: 125px;
    height: 45px;
    border-style: none;
    font-weight: 600;
}

.submit-button-landing {
    background-color: #795BAEF2;
    color: #fff;
    width: 200px;
    height: 100px;
    border-style: none;
    font-size: 40px;
}

#decisions-map-1 .submit-button {
    color: #C4081B;
}

#decisions-map-2 .submit-button {
    color: #FFA800;
}

#decisions-map-3 .submit-button {
    color: #09B261;
}

#decisions-map-4 .submit-button {
    color: #5c32a7;
}

.button-no-border {
    border-style: none;
}

#btn-download {
    background-color: #2C2961;
    font-size: 21px;
}

.download-row {
    padding-bottom: 25px;
}

.landing-pass {
    font-size: 65px;
    text-align: center;
}

.landing-validation {
    font-size: 40px;
}

.landing-label {
    padding-left: 10px;
}

.landing-row {
    margin: 0;
    width: 79%;
}

label {
    display: block;
}

.submit-content {
    padding: 15px;
    padding-right: 50px;
    cursor: default;
}

.submit-text {
    padding-top: 5px;
    padding-right: 20px;
    display: inline-block!important;
}

hr {
    display: none;
}

.results-tab.map-1-tab.border-right-rounded {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Desktop */
@media (max-width: 1920px) {
    .sub-menu-mobile {
        display: none;
    }
}
    
/* Mobile and Small Tablet */
@media (max-width: 844px) {
    .landing-row {
        width: 95%;
    }

    .landing-label {
        padding-left: 15px;
    }

    .landing-button-row {
        padding-top: 20px;
    }

    .submit-button-landing {
        width: 100%;
    }

    body {
        margin-top: 160px;
    }

    hr {
        display: block;
        margin-right: -15px;
        margin-left: -15px;
    }

    .logo {
        width: 90%;
    }

    .navbar {
        padding: 0;
    }

    a.navbar-brand {
        text-align: center!important;
    }

    .navbar-expand-sm > .container {
        padding: 15px;
    }

    .navbar-toggleable-sm {
        margin-bottom: 2px!important;
    }

    .navbar a {
        margin-bottom: 3px;
    }

    .active {
        display: block!important;
    }

    .sub-menu-mobile  a.active, .sub-menu-mobile .map-1-tab {
        padding-left: 50px;
    }
    
    .sub-menu-mobile .map-1-tab:after{
        content: '';
        border: 10px solid transparent;
        border-top: 10px solid #3b3b3b;
        margin-left: 2px;
        display: inline-block;
        vertical-align: bottom;
        margin: 20px 20px 0 0;
        float: right;
    }

    .sub-menu-mobile a.active:after{
        content: '';
        border: 10px solid transparent;
        border-top: 10px solid #fff;
        margin-left: 2px;
        display: inline-block;
        vertical-align: bottom;
        margin: 20px 20px 0 0;
        float: right;
    }

    .sub-menu-desktop {
        display: none;
    }

    .sub-menu-mobile {
        display: flex !important;
    }

    .fill-div-large {
        width: 100%!important;
    }

    .tab-content {
        margin: 0!important;        
    }

    .tab-content.landing {
        top: 35%;
        width: 100%;
    }

    .decisions-results-title {
        font-size: 17px!important;
        width: 100%;
    }

    .navbar {
        font-size: 22px!important;
    }

    .sub-menu-mobile.navbar {
        font-size: 28px!important;
    }

    .decisions-results-bar {
        padding-bottom: 0!important;
        width: 100%;
    }

    .decisions-tab, .results-tab {
        width: 50%!important;
    }

    .welcome-text {
        padding-top: 250px;
        font-size: 36px;
    }

    .decisions-results-content {
        padding: 0!important;
    }

    .decisions-results-content-videos .col-md-4 {
        padding-bottom: 15px;
    }

    .decisions-results-body {
        padding: 15px 0px 15px 0px!important;
    }

    .decisions-results-body-inner {
        height: 100%!important;
        width: 100%!important;
        padding: 10px 20px 0 20px!important;
    }

    .decisions-results-title::before {
        height: 46px!important;
    }

    .iframe-lightbox-link img {
        width: 100%!important;
    }

    .point-header {
        font-size: 20px!important;
    }

    .decisions-results-body-inner-decisions .point-header, .decisions-results-body-inner-decisions .point-header-value {        
        margin-top: -21px;
    }

    .submit-content {        
        padding-right: 0;
        text-align: center;
        margin-left: -15px;
        margin-right: -15px;
    }

    .submit-text {        
        text-align: center;
    }

    .btn-close {
        top: 35%!important;
    }

    .pandl-sub-nav {
        font-size: 20px!important;
        margin-bottom: -10px;
    }

    .results-tab.menu-right.border-right-rounded-start {
        border-top-right-radius: 20px;
    }

    .results-tab.menu-right.border-right-rounded-end {
        border-top-right-radius: 0;
        border-bottom-right-radius: 20px;
    }

    .results-tab.menu-right.active {
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .results-tab.menu-right.active.border-right-rounded-start-open {        
        border-top-right-radius: 20px;
        border-bottom-right-radius: 0;
    }

    .menu-right {
        float: right;
    }

    .menu-right.chevron:after{
        content: '';
        border: 10px solid transparent;
        border-top: 10px solid #3b3b3b;
        margin-left: 2px;
        display: inline-block;
        vertical-align: bottom;
        margin: 10px 20px 0 0;
        float: right;
    }

    .menu-right.active:after{
        content: '';
        border: 10px solid transparent;
        border-top: 10px solid #fff;
        margin-left: 2px;
        display: inline-block;
        vertical-align: bottom;
        margin: 10px 20px 0 0;
        float: right;
    }

    #pandl-overview {
        width: 1477px;
    }

    #pandl-map-1 {
        width: 1445px;
    }

    #pandl-map-2 {
        width: 1444px;
    }

    #pandl-map-3 {
        width: 1445px;
    }

    #pandl-map-4 {
        width: 1444px;
    }

    #pandl-map-5 {
        width: 1477px;
    }

    #pand-full-svg {
        width: 2366px;
    }
}