/*=============================================================
    OptDev Theme
    Bootstrap 5 Companion Stylesheet

    Bootstrap provides the layout.
    OptDev provides the appearance.
==============================================================*/


/*=============================================================
    Theme Colours
==============================================================*/

:root {

    --optdev-primary: #00C9A6;
    --optdev-secondary: #A4D4E6;
    --optdev-blue: cornflowerblue;

    --optdev-dark: #444444;
    --optdev-light: #f8f9fa;
    --optdev-border: #d8d8d8;

    --optdev-success: #28a745;
    --optdev-danger: #dc3545;

}


/*=============================================================
    Page
==============================================================*/

html,
body {

    height: 100%;

}

body {

    margin: 0;

    background: var(--optdev-light);

    color: var(--optdev-dark);

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 16px;

    line-height: 1.6;

}


/*=============================================================
    Typography
==============================================================*/

h1 {

    font-size: 2rem;
    font-weight: 300;

}

h2 {

    font-size: 1.75rem;
    font-weight: 300;

}

h3 {

    font-size: 1.5rem;
    font-weight: 400;

}

h4 {

    font-size: 1.25rem;

}

h5 {

    font-size: 1.15rem   ;

}

h6 {

    font-size: 1rem;

}

p {

    margin-bottom: 1rem;
    font-size: 0.875rem;

}


/*=============================================================
    Links
==============================================================*/

a {

    color: var(--optdev-blue);

    text-decoration: none;

}

a:hover {

    color: #2b6fd6;

    text-decoration: underline;

}


/*=============================================================
    Navbar
==============================================================*/

.optdev-navbar {

    background: white;

    border-bottom: 1px solid var(--optdev-border);

    box-shadow: 0 2px 8px rgba(0,0,0,.08);

}

.navbar-brand {

    padding-top: .25rem;

    padding-bottom: .25rem;

}

.navbar-logo {

    height: 58px;

    width: auto;

}

.navbar-nav .nav-link {

    color: var(--optdev-dark);

    font-weight: 500;

    padding-left: 1rem;

    padding-right: 1rem;

}

.navbar-nav .nav-link:hover {

    color: var(--optdev-blue);

}

.dropdown-menu {

    border-radius: .4rem;

    border: 1px solid #ddd;

    box-shadow: 0 8px 20px rgba(0,0,0,.15);

}

.dropdown-item:hover {

    background: #eef5ff;

}

.navbar-toggler {

    border-color: #cccccc;

}

.navbar-toggler:focus {

    box-shadow: none;

}


/* Dark hamburger on white navbar */

.navbar-light .navbar-toggler-icon {

    filter: brightness(0);

}




/*=============================================================
    Cards (Bootstrap 5 replacement for Panels)
==============================================================*/

.card {

    border: 1px solid var(--optdev-border);

    border-radius: .4rem;

    box-shadow: 0 2px 8px rgba(0,0,0,.08);

    margin-bottom: 1.5rem;

}

.card-header {

    background: #f5f7fa;

    border-bottom: 1px solid var(--optdev-border);

    font-weight: 600;

}

.card-body {

    background: white;

}


/*=============================================================
    Buttons
==============================================================*/

.btn {

    border-radius: .3rem;

    font-weight: 500;

    transition: all .2s ease;

}

.btn-primary {

    background: var(--optdev-primary);

    border-color: var(--optdev-primary);

}

.btn-primary:hover {

    background: #00b293;

    border-color: #00b293;

}

.btn-secondary {

    background: #6c757d;

    border-color: #6c757d;

}

.btn-outline-primary {

    color: var(--optdev-primary);

    border-color: var(--optdev-primary);

}

.btn-outline-primary:hover {

    background: var(--optdev-primary);

    color: white;

}


/*=============================================================
    Forms
==============================================================*/

.form-control,
.form-select {

    border-radius: .3rem;

    border: 1px solid #c8c8c8;

}

.form-control:focus,
.form-select:focus {

    border-color: var(--optdev-primary);

    box-shadow: 0 0 0 .2rem rgba(0,201,166,.18);

}

.form-label {

    font-weight: 600;

}


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

.table {

    background: white;

    border: 1px solid var(--optdev-border);

}

.table thead {

    background: #eef3f8;

}

.table thead th {

    border-bottom: 2px solid var(--optdev-border);

    color: #444;

    font-weight: 600;

}

.table-striped tbody tr:nth-child(even) {

    background: #fafafa;

}

.table-hover tbody tr:hover {

    background: #eef7ff;

}

.table td,
.table th {

    vertical-align: middle;

}


/*=============================================================
    Legacy table support
==============================================================*/

table {

    border-collapse: collapse;

}

table th {

    font-weight: 600;

}


/*=============================================================
    Alerts
==============================================================*/

.alert {

    border-radius: .35rem;

}

.alert-success {

    background: #e9f8ef;

    border-color: #b8e6c5;

}

.alert-danger {

    background: #fdecec;

    border-color: #f2c1c1;

}


/*=============================================================
    Footer
==============================================================*/

.footer {

    background: white;

    border-top: 1px solid var(--optdev-border);

    margin-top: 3rem;

    padding: 1rem 0;

    color: #666;

}

.footer p {

    margin-bottom: 0;

}


/*=============================================================
    Images
==============================================================*/

img {

    max-width: 100%;

    height: auto;

}

.img-thumbnail {

    border-radius: .4rem;

}


/*=============================================================
    Horizontal Rules
==============================================================*/

hr {

    border-top: 1px solid #ddd;

    opacity: 1;

}


/*=============================================================
    Lists
==============================================================*/

.list-group-item {

    border-color: var(--optdev-border);

}


/*=============================================================
    Badges
==============================================================*/

.badge {

    font-weight: 500;

}


/*=============================================================
    Utilities
==============================================================*/

.shadow-soft {

    box-shadow: 0 3px 10px rgba(0,0,0,.08);

}

.rounded-soft {

    border-radius: .5rem;

}

.border-light {

    border: 1px solid var(--optdev-border);

}

.bg-optdev {

    background: var(--optdev-primary);

    color: white;

}

.text-optdev {

    color: var(--optdev-primary);

}

.text-muted {

    color: #777 !important;

}

/*=============================================================
    Plotly / Charts / Dashboards
==============================================================*/

.chart-container,
.plotly-container,
.graph-container {

    background: #ffffff;

    border: 1px solid var(--optdev-border);

    border-radius: .4rem;

    padding: 1rem;

    margin-bottom: 1.5rem;

    box-shadow: 0 2px 8px rgba(0,0,0,.08);

}

canvas {

    max-width: 100%;

}


/*=============================================================
    Legacy Bootstrap 3 Compatibility
==============================================================*/

/* pull-left / pull-right */

.pull-left {

    float: left !important;

}

.pull-right {

    float: right !important;

}

/* text alignment */

.text-left {

    text-align: left !important;

}

.text-right {

    text-align: right !important;

}

/* responsive images */

.img-responsive {

    display: block;

    max-width: 100%;

    height: auto;

}

/* thumbnail images */

.img-rounded {

    border-radius: .4rem;

}

.img-circle {

    border-radius: 50%;

}


/*=============================================================
    Wells (Bootstrap 3)
==============================================================*/

.well {

    background: white;

    border: 1px solid var(--optdev-border);

    border-radius: .4rem;

    padding: 1rem;

    box-shadow: 0 2px 8px rgba(0,0,0,.08);

}


/*=============================================================
    Panels (Bootstrap 3)
==============================================================*/

.panel {

    border: 1px solid var(--optdev-border);

    border-radius: .4rem;

    background: white;

    margin-bottom: 1.5rem;

}

.panel-heading {

    padding: .75rem 1rem;

    background: #f4f6f8;

    border-bottom: 1px solid var(--optdev-border);

    font-weight: 600;

}

.panel-body {

    padding: 1rem;

}

.panel-footer {

    padding: .75rem 1rem;

    border-top: 1px solid var(--optdev-border);

    background: #fafafa;

}


/*=============================================================
    Definition Lists
==============================================================*/

dt {

    font-weight: 600;

}

dd {

    margin-bottom: .75rem;

}


/*=============================================================
    Forms
==============================================================*/

label {

    font-weight: 600;

}

input,
select,
textarea {

    max-width: 100%;

}


/*=============================================================
    Code blocks
==============================================================*/

pre {

    background: #fafafa;

    border: 1px solid #ddd;

    border-radius: .3rem;

    padding: 1rem;

}

code {

    color: #c7254e;

}


/*=============================================================
    Helpers
==============================================================*/

.hidden {

    display: none !important;

}

.visible {

    display: block !important;

}

.no-margin {

    margin: 0 !important;

}

.no-padding {

    padding: 0 !important;

}

.margin-top {

    margin-top: 1rem;

}

.margin-bottom {

    margin-bottom: 1rem;

}

.center {

    text-align: center;

}





/*=============================================================
    Mobile
==============================================================*/

@media (max-width:991px){

    .navbar-nav{

        padding-top:.5rem;

    }

    .dropdown-menu{

        border:none;

        box-shadow:none;

        background:#f8f9fa;

        margin-left:1rem;

    }

    .navbar-nav .nav-link{

        padding:.6rem 0;

    }

}


/*=============================================================
    Desktop
==============================================================*/

@media (min-width:992px){

    .dropdown:hover>.dropdown-menu{

        display:block;

        margin-top:0;

    }

}

/*=============================================================
    Ordered Lists (Classic OptDev)
==============================================================*/

ol.round {

    list-style: none;

    padding-left: 0;

}

ol.round li {

    margin: 25px 0;

    padding-left: 45px;

    background-repeat: no-repeat;

    background-position: left top;

    min-height: 40px;

}

ol.round li.zero {
    background-image: url("../Images/orderedList0.png");
}

ol.round li.one {
    background-image: url("../Images/orderedList1.png");
}

ol.round li.two {
    background-image: url("../Images/orderedList2.png");
}

ol.round li.three {
    background-image: url("../Images/orderedList3.png");
}

ol.round li.four {
    background-image: url("../Images/orderedList4.png");
}

ol.round li.five {
    background-image: url("../Images/orderedList5.png");
}

ol.round h5 {

    margin: 0 0 .4rem 0;

    font-size: 18px;

    font-weight: 600;

}

ol.round h5 {

    font-size: 1.15rem;

    font-weight: 400;

    color: #444;

    margin-bottom: .35rem;

}

/*=============================================================
    Featured Banner
==============================================================*/

.featured {

    position: relative;

    overflow: visible;      /* allow the accent to extend below */

    background:
        linear-gradient(
            90deg,
            var(--optdev-primary),
            var(--optdev-secondary));

    color: white;

    margin: 0;

    padding: 0; 

}

.featured::after {

    content: "";

    position: absolute;

    left: 0px;             /* adjust to taste */

    bottom: -30px;          /* exactly the image height */

    width: 60px;

    height: 30px;

    background: url("../Images/heroAccent.png") no-repeat;

    background-size: 60px 30px;

    opacity: 1;

    pointer-events: none;

    z-index: 10;

}

.featured * {

    color: inherit;

}

.featured h2 {

    font-size: 2rem;
    font-weight: 300;

}

.featured p {

    font-size: 1rem;    

}

.featured h1:first-child,
.featured h2:first-child,
.featured h3:first-child {

    margin-top: 0;

}

.featured p:last-child {

    margin-bottom: 0;

}

.featured a {

    color: white;

}

.featured a:hover {

    color: #f8f9fa;

}

.featured-content {

    max-width: 1140px;

    margin: 0 auto;

    /* padding: 2rem 20px; */
    
    padding: 1.25rem 1.25rem;

    position: relative;

    z-index: 2;

}

@media (max-width: 576px) {
    .featured-content {
        padding: 0.5rem 0.5rem;
    }
}

.main-content {

    padding-top: 3rem;
    color: #333;

}

.featured p {
    color: #333;
}

/*=============================================================
    General Links
==============================================================*/

.main-content a:link {
    color: blue;
    text-decoration: none;
}

.main-content a:visited {
    color: purple;
}

.main-content a:hover {
    color: red;
    text-decoration: underline;
}

.main-content a:active {
    color: yellow;
}

i.red {
    color: red;
}

i.green {
    color: green;
}

/*=============================================================
    Financial Model etc Tables
==============================================================*/

table.rb_tbl {
    font-size: 0.75rem;
}

h5.rb_h5,
h6.rb_h6 {
    font-weight: 600;
}

/*=============================================================
    Custom Form Data - SIR Input Parameters
==============================================================*/

label.cust-form-data {
    font-size: 1rem;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
}

.cust-form-data {
    font-size: 1rem;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
}

input.cust-form-data {
    width: 100%;
    padding: 0;
    border: none;
    background-color: transparent;
    box-shadow: none;
    margin-bottom: 0.75rem;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

textarea.cust-form-data {
    width: 100%;
    padding: 0;
    font-size: 0.85rem;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

/*=============================================================
    Link Data - SIR Input Parameters
==============================================================*/

label.link-data {
    font-size: 0.8rem;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
}

div.link-data {
    font-size: 0.8rem;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: blue;
}



/*=============================================================
    Custom Form Inputs - SIR Input Parameters
==============================================================*/

#form-input-grey-wrapper {
    background-color: #efeeef;
    padding: 1.5rem ;
}
input.cust-form-data,
textarea.cust-form-data {
    background-color: white;
    border: none;
    box-shadow: none;
}