:root {
    /* maketintsandshades.com */
    --myTextColour: #0c0f06; /* 90% */
/*    --myActiveTabColour: #3b491e; /* 50% */
    --myActiveTabColour: #475824; /* 40% */
    --myActiveModalColour: #5e7530; /* 20% */
    --myHeaderColour:#5e7530; /* 20% */
    --myMainColour: #76923c;
/*    --myInactiveTabColour: #bbc99e; 50% */
    --myInactiveTabColour: #c8d3b1; /* 60% */
    --myInactiveModalColour: #c8d3b1; /* 60% */
    --myBackgroundColour: #f1f4ec;
}

.modal {
    background-color:  var(--myTextColour);
    opacity: 0.7;
}

.modal-dialog {
    pointer-events: inherit;
}

.modal-nav-body {
  margin-top: 100px; 
  width: 100%;
  height: auto;
}

.modal-nav-body ul {
  list-style-type: none;
}

.modal-nav-body ul li {
  text-align: center;
  font-size: 130%;
}

.main-container {
    border:8px var(--myActiveTabColour) solid;
    border-radius:24px;
    background-color:white;
}

.modal-nav-body .nav-tabs .nav-link {
    color: var(--myInactiveModalColour);
}

.modal-nav-body .nav-tabs .nav-link.active, .modal-nav-body .nav-tabs .nav-link:hover {
    color: var(--myActiveModalColour);
    background-color: transparent;
    border-color: transparent;
}

.modal-nav-body .nav-tabs .nav-link:hover {
    color: var(--myActiveModalColour);
}

/* mods to bootstrap standard settings */

.navbar-nav.nav-tabs .nav-link {
    color: var(--myActiveTabColour);
    background-color: var(--myInactiveTabColour);
    border-color: var(--myInactiveTabColour);
    border-top-left-radius: 0.8rem;
    border-top-right-radius: 0.8rem;
    margin-bottom: 0px;
}

.navbar-nav.nav-tabs .nav-link.active, .navbar-nav.nav-tabs .nav-link:hover {
    color: var(--myInactiveTabColour);
    background-color: var(--myActiveTabColour);
    border-color: var(--myActiveTabColour);
}

.navbar-nav.nav-tabs .nav-link:hover {
    color: var(--myInactiveTabColour);
    background-color: var(--myActiveTabColour);
    border-color: var(--myActiveTabColour);
}

.nav-tabs {
    border: 0;
}

.buttons {
    color: var(--myInactiveTabColour);
    background-color: var(--myActiveTabColour);
    border-color: var(--myActiveTabColour);
    border-radius: 0.6rem;
    padding-top:4px;padding-bottom:4px;
    padding-left:20px;padding-right:20px;
}

.form_table td {
    padding-bottom: 30px;
    padding-right: 5px;
}

.form_table tr {
    vertical-align: top;
}

.required {
    color: red;
}

*:focus {
    outline: dashed grey 1px!important;
    box-shadow: none!important;
}

h4, h5, h6 {
    color: var(--myHeaderColour);
}

body {
    color: var(--myTextColour);
    background-color: var(--myBackgroundColour);
}

ul li::marker {
    color : var(--myMainColour);
}

ul li a, ul li a:hover,
p a, p a:hover {
    color: var(--myTextColour);
}