﻿/* Imported fonts */
@import url('https://fonts.googleapis.com/css?family=Montserrat|Open+Sans'); /* Turn font off if no internet connection */

/* Color variables */

:root {
    /* Custom color definitions */
    --font-family:          "Open Sans", "Arial", "sans-serif";
    --font-family-headings: "Montserrat", "Verdana", "Helvetica", "sans-serif";   
    --teal:                 rgba(114, 211, 197, 1);
    --teal-30:              rgba(114, 211, 197, .3);
    --purple:               rgba(181, 0, 101, 1);
    --purple-30:            rgba(181, 0, 101, .3);
    --dark-purple:          rgba(98, 42, 55, 1);
    --dark-purple-30:       rgba(98, 42, 55, .3);
    --darkteal:             rgba(12, 96, 89, 1);
    --lightteal:            rgba(225, 251, 249, 1);
    --orange:               rgba(242, 83, 48, 1); 
    --orange-30:            rgba(242, 83, 48, .3);
    --yellow:               rgba(255, 204, 0, 1);
    --yellow-30:            rgba(255, 204, 0, .3);
    
    /* Default styling values */
    --boxshadow:            0 0 0 0.2rem;
}

/* Bootstrap style overrides */

body {
    font-family: "Open Sans", "Arial", "sans-serif";
}

/*///////////////////////////////////////////////////////
BACKGROUND COLOURS
///////////////////////////////////////////////////////*/

.bg-primary {
    background-color: rgba(114, 211, 197, 1) !important; /* Must be set as important to override Bootstrap styles */
}

.bg-secondary {
    background-color: rgba(181, 0, 101, 1) !important; /* Must be set as important to override Bootstrap styles */
}

.bg-dark {
    background-color: rgba(12, 96, 89, 1) !important; /* Must be set as important to override Bootstrap styles */
}

.bg-light {
    background-color: rgba(225, 251, 249, 1) !important; /* Must be set as important to override Bootstrap styles */
}

/*///////////////////////////////////////////////////////
BORDER COLOURS
///////////////////////////////////////////////////////*/

.border-primary {
    border-color: rgba(114, 211, 197, 1) !important; /* Must be set as important to override Bootstrap styles */
}

.border-secondary {
    border-color: rgba(181, 0, 101, 1) !important; /* Must be set as important to override Bootstrap styles */
}

.border-light {
    border-color: rgba(114, 211, 197, 1) !important; /* Must be set as important to override Bootstrap styles */
}

.border-dark {
    border-color: rgba(12, 96, 89, 1) !important; /* Must be set as important to override Bootstrap styles */
}

hr {
    border-top-color: rgba(114, 211, 197, 1);
}

hr.secondary {
	border-top-color: rgba(181, 0, 101, 1);
}

hr.light {
	border-top-color:rgba(114, 211, 197, 1); 
}

/*///////////////////////////////////////////////////////
TYPOGRAPHY
///////////////////////////////////////////////////////*/

h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat", "Verdana", "Helvetica", "sans-serif";
}

a {
    color: rgba(114, 211, 197, 1);
}

.bg-light a {
	color: rgba(12, 96, 89, 1);
	text-decoration: none;
}

.bg-light a:hover {
	color: rgba(181, 0, 101, 1);
}

a:hover,
a.hover {
    color: rgba(12, 96, 89, 1);
}

a:active,
a.active {
    color: rgba(242, 83, 48, 1); 
}

.text-primary {
    color: rgba(114, 211, 197, 1) !important; /* Must be set as important to override Bootstrap styles */
}

.blockquote-footer {
    color: rgba(12, 96, 89, 1);
}

/*///////////////////////////////////////////////////////
BUTTONS
///////////////////////////////////////////////////////*/

.btn {
    border-radius: 0px;
}

/* Button Primary START */
.btn-primary,
.btn-primary.disabled{
    background-color: rgba(114, 211, 197, 1);
    border-color: rgba(114, 211, 197, 1);
}

.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle{
    background-color: rgba(12, 96, 89, 1);
    border-color: rgba(12, 96, 89, 1);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active:active
.show>.btn-primary.dropdown-toggle {
    background-color: rgba(242, 83, 48, 1);
    border-color: rgba(242, 83, 48, 1);
}

.btn-primary:focus,
.btn-primary.focus{
    box-shadow: 0 0 0 0.2rem rgba(114, 211, 197, 0.3);
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled):active.active{
    box-shadow: 0 0 0 0.2rem rgba(242, 83, 48, .3);
}
/* Button Primary END */

/* Button outline primary START */

.btn-outline-primary,
.btn-outline-primary.disabled{
    border-color: rgba(114, 211, 197, 1);
    color: rgba(114, 211, 197, 1);
}


.btn-outline-primary:hover {
    background-color: rgba(114, 211, 197, 1);
    border-color: rgba(114, 211, 197, 1);
}

.btn-outline-primary:focus {
    box-shadow:  0 0 0 0.2rem rgba(114, 211, 197, 0.5);
}

.btn-outline-primary:not(:disabled):not(.disabled).active, 
.btn-outline-primary:not(:disabled):not(.disabled):active, 
.show>.btn-outline-primary.dropdown-toggle {
    background-color: rgba(242, 83, 48, 1);
    border-color: rgba(242, 83, 48, 1);
}

.btn-outline-primary:not(:disabled):not(.disabled).active:focus, 
.btn-outline-primary:not(:disabled):not(.disabled):active:focus, 
.show>.btn-outline-primary.dropdown-toggle:focus {
    box-shadow:  0 0 0 0.2rem rgba(242, 83, 48, .5);
}

/* Button Secondary START */
.btn-secondary,
.btn-secondary.disabled{
    background-color: rgba(181, 0, 101, 1);
    border-color: rgba(181, 0, 101, 1);
}

.btn-secondary:not(:disabled):not(.disabled):hover,
.btn-secondary:not(:disabled):not(.disabled).active{
    background-color: rgba(98, 42, 55, 1);
    border-color: rgba(98, 42, 55, 1);
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active:active
.show>.btn-secondary.dropdown-toggle {
    background-color: rgba(242, 83, 48, 1);
    border-color: rgba(242, 83, 48, 1);
}

.btn-secondary:focus,
.btn-secondary.focus{
    box-shadow: 0 0 0 0.2rem rgba(181, 0, 101, .3);
}

.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled):active.active{
    box-shadow: 0 0 0 0.2rem rgba(242, 83, 48, .3);
}
/* Button Secondary END */

/* Button outline secondary START */
.btn-outline-secondary {
    border-color: rgba(181, 0, 101, 1);
    color: rgba(181, 0, 101, 1);
}

.btn-outline-secondary:hover {
    background-color: rgba(181, 0, 101, 1);
    border-color: rgba(181, 0, 101, 1);
}
/* Button outline secondary END */

.btn-warning {
    background-color: rgba(255, 204, 0, 1);
    border-color: rgba(255, 204, 0, 1);
}

/*///////////////////////////////////////////////////////
TABLES
///////////////////////////////////////////////////////*/

.table {
	font-size: 13px;
}

.table thead th {
background-color: rgba(225, 251, 249, 1);
    border-bottom: 2px solid rgba(181, 0, 101, 1);
	color: rgba(0,0,0, 0.6)
}

.table-hover tbody tr:hover {
    background-color: rgba(114, 211, 197, 0.1)
}

.table-active,
.table-active > td,
.table-active > th {
    background-color: rgba(114, 211, 197, 0.1);
}

.table-hover .table-active:hover {
    background-color: rgba(114, 211, 197, 0.1);
}

.table-primary,
.table-primary > td,
.table-primary > th {
    background-color: rgba(114, 211, 197, 0.3);
}

.table-hover .table-primary:hover,
.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th{
    background-color: rgba(114, 211, 197, 0.5);
    color: #ffffff;
}

.table-secondary,
.table-secondary > td,
.table-secondary > th {
    background-color: rgba(181, 0, 101, .3);
}

.table-hover .table-secondary:hover,
.table-hover .table-secondary:hover > td,
.table-hover .table-secondary:hover > th{
    background-color: rgba(181, 0, 101, .5);
    color: #ffffff;
}

.table-dark,
.table-dark > td,
.table-dark > th {
    background-color: rgba(12, 96, 89, .3);
}

.table-hover .table-dark:hover,
.table-hover .table-dark:hover > td,
.table-hover .table-dark:hover > th{
    background-color: rgba(12, 96, 89, .5);
    color: #ffffff;
}

/*///////////////////////////////////////////////////////
FORMS
///////////////////////////////////////////////////////*/

.form-control {
    border-radius: 0px;
    border-color: rgba(114, 211, 197, 1);
}

.form-control:focus {
    border-color: rgba(114, 211, 197, 1);
    box-shadow: 0 0 0 0.2rem rgba(114, 211, 197, 0.5);
}

.custom-control-input:active~.custom-control-label::before {
    background-color: rgba(225, 251, 249, 1);
}

.secondary.custom-control-input:active~.custom-control-label::before {
	background-color: rgba(181, 0, 101, 1);
}

.custom-checkbox .custom-control-label::before {
    border-radius: 0px;
}

.custom-control-input:checked~.custom-control-label::before,
.custom-control-input:checked~.custom-control-label::before{
    background-color: rgba(114, 211, 197, 1) !important;
}

.secondary .custom-control-input:checked~.custom-control-label::before, .custom-control-input:checked~.custom-control-label::before {
	background-color: rgba(181, 0, 101, 1) !important;
}

.secondary.custom-control-input:checked~.custom-control-label::before,
.secondary.custom-control-input:checked~.custom-control-label::before{
	background-color: rgba(181, 0, 101, 1) !important;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    border-radius: 0;
}

.custom-select {
    border-radius: 0px;
}

.form-control:disabled, .form-control[readonly] {
    background-color: rgba(225, 251, 249, 0.5);
    border-color: rgba(225, 251, 249, 1);
}

.form-control.is-invalid {
	color: #dc3545;
}

.form-control.is-invalid::placeholder {
    color: #dc3545;
}

.form-control::placeholder {
    color: rgba(114, 211, 197, 1);
}

.form-control:disabled::placeholder, .form-control[readonly]::placeholder {
    color: rgba(114, 211, 197, .5);
}

.custom-upload > input{
	position: absolute;
	opacity: 0;
	width: 0.1px;
	height: 0.1px;
	overflow: hidden;
	z-index: -1;
}

/*///////////////////////////////////////////////////////
NAVS
///////////////////////////////////////////////////////*/

.dropdown-item:focus,
.dropdown-item:hover {
    background-color: rgba(225, 251, 249, 1);
}

.dropdown-item.active, 
.dropdown-item:active {
    background-color: rgba(242, 83, 48, 1);
}

/* Nav tabs START */
.nav-tabs {
    border-bottom-color: rgba(114, 211, 197, 1);
}

.nav-tabs .nav-link {
    border-radius: 0px;
}

.nav-tabs .nav-link.disabled {
    color: rgba(225, 251, 249, 1);
}

.nav-tabs .nav-item.show .nav-link, 
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:focus{
    border-top-color: rgba(114, 211, 197, 1);
    border-right-color: rgba(114, 211, 197, 1);
    border-left-color: rgba(114, 211, 197, 1);
    border-bottom-color: #fff;
    color: rgba(114, 211, 197, 1);
}
 
.nav-tabs .nav-link:hover {
    border-top-color: rgba(225, 251, 249, 1);
    border-left-color: rgba(225, 251, 249, 1);
    border-right-color: rgba(225, 251, 249, 1);
    border-bottom-color: #fff;
}

.nav-tabs .nav-link.disabled:hover,
.nav-tabs .nav-link.disabled:focus {
    border-top-color: #fff;
    border-left-color: #fff;
    border-right-color: #fff;
    border-bottom-color: rgba(114, 211, 197, 1);
}

.nav-tabs .nav-link.active:hover {
    border-bottom-color: #fff;
}

/* Nav tabs END */

/* Nav pills START */

.nav-pills .nav-link {
    border-radius: 0;
}

.nav-pills .nav-link.disabled {
    color: rgba(225, 251, 249, 1);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link{
    background-color: rgba(12, 96, 89, 1);
}

/* Nav pills END */

/* Pagination START */

.page-link {
    color: rgba(114, 211, 197, 1);
    border-color: rgba(114, 211, 197, 1);
}

.page-item.active .page-link {
    background-color: rgba(12, 96, 89, 1);
    border-color: rgba(12, 96, 89, 1);
    color: #ffffff;
}

.page-link:hover {
    background-color: rgba(114, 211, 197, 1);
    border-color: rgba(114, 211, 197, 1);
    color: #ffffff;
}

.page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(114, 211, 197, .3);
}

.page-item.disabled .page-link {
    color: rgba(225, 251, 249, 1);
    border-color: rgba(225, 251, 249, 1);
}

/* Pagination END */

.dropdown-divider {
    border-top: 1px solid rgba(114, 211, 197, 1);
}

.dropdown-menu {
    border-color: rgba(114, 211, 197, 1);
    border-radius: 0;
}

/*///////////////////////////////////////////////////////
ALERTS
///////////////////////////////////////////////////////*/

.alert {
	background-color: #fff;
	font-size: 14px;
}

.alert-heading {
	position: relative;
	left: -20px;
	width: 200px;
	line-height: 24px;
	font-size: 16px;
	padding-left: 10px;
	padding-right: 10px;
}

.alert > .close {
	position: absolute;
	top: -5px;
	right: -5px;
	display: block;
	border: 1px solid;
	line-height: 13px;
	width: 25px;
	padding: 5px;
	padding-bottom: 6px;
	text-align: center;
	background-color: #fff;
	opacity: 1;
	border-radius: 4px;
	text-shadow: none;
}

.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover {
	opacity: 1;
	color: #fff;
}

.alert-primary {
    border-color: rgba(114, 211, 197, 1);
    color: rgba(114, 211, 197, 1);
}

.alert-heading > .fa {
	position: relative;
	top: -1px;
	font-size: 13px;
}

.alert-primary > .alert-heading {
	color: #fff;
	background-color: rgba(114, 211, 197, 1);
}

.alert-primary > .close:not(.disabled) {
	border-color: rgba(114, 211, 197, 1);
}

.alert-primary > .close:not(:disabled):not(.disabled):focus, .alert-primary > .close:not(:disabled):not(.disabled):hover {
	background-color: rgba(114, 211, 197, 1);
}

.alert-primary .alert-link {
    color: rgba(12, 96, 89, 1);
}

.alert-secondary {
    border-color: rgba(181, 0, 101, 1);
    color: rgba(181, 0, 101, 1);
}

.alert-secondary > .alert-heading {
	background-color: rgba(181, 0, 101, 1);
	color: #fff;
}

.alert-secondary > .close:not(:disabled):not(.disabled):focus, .alert-secondary > .close:not(:disabled):not(.disabled):hover {
	background-color: rgba(181, 0, 101, 1);
	border-color: rgba(181, 0, 101, 1);
}

.alert-secondary .alert-link {
    color: rgba(98, 42, 55, 1);
}

.alert-danger {
	border-color: rgba(186, 14, 26, 1);
}

.alert-danger > .alert-heading {
	background-color: rgba(186, 14, 26, 1);
	color: #fff;
}

.alert-danger > .close:not(.disabled) {
	border-color: rgba(186, 14, 26, 1);
	color: rgba(186, 14, 26, 1);
}

.alert-danger > .close:not(:disabled):not(.disabled):focus, .alert-danger > .close:not(:disabled):not(.disabled):hover {
	background-color: rgba(186, 14, 26, 1);
}

.alert-light {
	border-color: #ccc;
}

.alert-light > .alert-heading {
	background-color: #ccc;
	color: #666;
}

.alert-light > .close:not(.disabled) {
	border-color: #ccc;
	color: #ccc;
}

.alert-light > .close:not(:disabled):not(.disabled):focus, .alert-light > .close:not(:disabled):not(.disabled):hover {
	background-color: #ccc;
	color: #666;
}

.alert-success {
	border-color: #0f7a33;
}

.alert-success > .alert-heading {
	background-color: #0f7a33;
	color: #fff;
}

.alert-success > .close:not(.disabled) {
	color: #0f7a33;
	border-color: #0f7a33;
}

.alert-success > .close:not(:disabled):not(.disabled):focus, .alert-success > .close:not(:disabled):not(.disabled):hover {
	background-color: #0f7a33;
}

.alert-info {
	border-color: #17a2b8;
}

.alert-info > .alert-heading {
	background-color: #17a2b8;
	color: #fff;
}

.alert-info > .close:not(.disabled) {
	color: #17a2b8;
	border-color: #17a2b8;
}

.alert-info > .close:not(:disabled):not(.disabled):focus, .alert-info > .close:not(:disabled):not(.disabled):hover {
	background-color: #17a2b8;
}

.alert-warning {
	border-color: #fcca02;
}

.alert-warning > .alert-heading {
	background-color: #fcca02;
	color: #fff;
}

.alert-warning > .close:not(.disabled) {
	color: #fcca02;
	border-color: #fcca02;
}

.alert-warning > .close:not(:disabled):not(.disabled):focus, .alert-warning > .close:not(:disabled):not(.disabled):hover {
	background-color: #fcca02;
}

/*///////////////////////////////////////////////////////
BADGES
///////////////////////////////////////////////////////*/

.badge {
    border-radius: 0px;
}

.badge-pill {
    border-radius: 15px;
}

.badge-primary{
    background-color: rgba(114, 211, 197, 1);
}

.badge-secondary {
    background-color: rgba(181, 0, 101, 1);
}

.badge-light {
    background-color: rgba(225, 251, 249, 1);
}

.badge-dark {
    background-color: rgba(12, 96, 89, 1);
}

/*///////////////////////////////////////////////////////
PROGRESS BARS
///////////////////////////////////////////////////////*/

.progress {
    background-color: rgba(225, 251, 249, 1);
}

.progress-bar {
    background-color: rgba(114, 211, 197, 1);
}

/*///////////////////////////////////////////////////////
JUMBOTRON
///////////////////////////////////////////////////////*/

.jumbotron {
    background-color: rgba(225, 251, 249, 1);
}

/*///////////////////////////////////////////////////////
CARDS
///////////////////////////////////////////////////////*/

.card {
    border-radius: 0px;
}

.border-primary .card-header {
    background-color: rgba(114, 211, 197, .2);
    border-bottom-color: rgba(114, 211, 197, 1);
    color: rgba(114, 211, 197, 1);
}

.border-secondary .card-header {
    background-color: rgba(181, 0, 101, .2);
    border-bottom-color: rgba(181, 0, 101, 1);
    color: rgba(181, 0, 101, 1);
}

.border-success .card-header {
    background-color: rgba(40, 167, 69, .2);
    border-bottom-color: rgba(40, 167, 69, 1);
    color: rgba(40, 167, 69, 1);
}

.border-danger .card-header {
    background-color: rgba(220, 53, 69, .2);
    border-bottom-color: rgba(220, 53, 69, 1);
    color: rgba(220, 53, 69, 1);
}

.border-warning .card-header {
    background-color: rgba(255, 193, 7, .2);
    border-bottom-color: rgba(255, 193, 7, 1);
    color: rgba(255, 193, 7, 1);
}

.border-info .card-header {
    background-color: rgba(23, 162, 184, .2);
    border-bottom-color: rgba(23, 162, 184, 1);
    color: rgba(23, 162, 184, 1);
}

.border-light .card-header {
    background-color: rgba(225, 251, 249, .2);
    border-bottom-color: rgba(114, 211, 197, 1);
    color: rgba(114, 211, 197, 1);
}

.border-dark .card-header {
    background-color: rgba(12, 96, 89, .2);
    border-bottom-color: rgba(12, 96, 89, 1);
    color: rgba(12, 96, 89, 1);
}

/*///////////////////////////////////////////////////////
LIST GROUPS
///////////////////////////////////////////////////////*/

.list-group-item:first-child {
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}

.list-group-item:last-child {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.list-group-item {
    border-color: rgba(114, 211, 197, 1);
}

.list-group-item-action:hover {
    background-color: rgba(225, 251, 249, 1);
}

.list-group-item.active {
    background-color: rgba(12, 96, 89, 1);
    border-color: rgba(12, 96, 89, 1);
}

/*///////////////////////////////////////////////////////
TOOLTIPS
///////////////////////////////////////////////////////*/

.tooltip > .tooltip-inner {
    background-color: rgba(12, 96, 89, .975);
}

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
    border-top-color: rgba(12, 96, 89, .975);
}

.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
    border-right-color: rgba(12, 96, 89, .975);
}

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: rgba(12, 96, 89, .975);
}

.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
    border-left-color: rgba(12, 96, 89, .975);
}

/*///////////////////////////////////////////////////////
POPOVERS
///////////////////////////////////////////////////////*/

.popover {
    border-color: rgba(114, 211, 197, 1);
    border-radius: 0px;
}

.popover-header {
    background-color: rgba(114, 211, 197, .2);
    border-bottom-color: rgba(114, 211, 197, 1);
}

/* Popover arrow - popover placed at top, arrow on bottom */
.bs-popover-auto[x-placement^=top] .arrow::before, .bs-popover-top .arrow::before {
    border-top-color: rgba(114, 211, 197, 1);
}

/* Popover arrow - popover placed at left, arrow on right */
.bs-popover-auto[x-placement^=left] .arrow::before, .bs-popover-left .arrow::before {
    border-left-color: rgba(114, 211, 197, 1);
}

/* Popover arrow - popover placed at bottom, arrow on top */
.bs-popover-auto[x-placement^=bottom] .arrow::before, .bs-popover-bottom .arrow::before {
    border-bottom-color: rgba(114, 211, 197, 1);
}

/* Popover arrow - popover placed at bottom, arrow on top must have same background color as heading */
.bs-popover-auto[x-placement^=bottom] .arrow::after, .bs-popover-bottom .arrow::after {
    border-bottom-color: rgb(227, 246, 243);
}

/* Popover arrow - popover placed at right, arrow on left */
.bs-popover-auto[x-placement^=right] .arrow::before, .bs-popover-right .arrow::before {
    border-right-color: rgba(114, 211, 197, 1);
}

