/* CS Green Colour #00A145 rgb(0, 161, 69) */
/* CS Blue Colour #1668b1 rgb(22, 104, 177) */

/* CS 10% blue Colour #e5f0f8 rgb(229, 240, 248) */
/* CS 10% green Colour #e5f7ee rgb(229, 247, 238) */

/* CS Green Light Colour #abe0c2 rgb(171, 224, 194) */
/* CS Green Dark Colour #00813a rgb(0, 129, 58) */

/* CS Blue Light Colour #abcde6 rgb(171, 205, 230) */
/* CS Blue Dark Colour #00508b rgb(0, 80, 139) */

/*$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer / 4, 4px
2: $spacer / 2, 8px
3: $spacer, 16px
4: $spacer * 1.5, 24px
5: $spacer * 3, 48px
7: $spacer * 5, 80px
10: $spacer * 8, 128px
);

#00A145, #abe0c2, #e5f7ee 

*/

/* XXL container 1920 px
-------------------------------------------------- */
@media (min-width: 1920px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
        max-width: 1860px;
    }
}

/* Modal \
-------------------------------------------------- */
.modal-header {
  background-color: #e5f7ee;
}

.modal-footer {
  background-color: #e5f0f8;
}

.modal-title {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}

/* Carousel
-------------------------------------------------- */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    height: 200px;
    width: 200px;
    background-size: 100%, 100%;
    background-image: none;
}

.carousel-control-next-icon:after
{
    content: '\21E8';
    font-size: 150px;
    font-weight: 900;
    color: red;
}

.carousel-control-prev-icon:after {
    content: '\21E6';
    font-size: 150px;
    font-weight: 900;
    color: red;
}


/* Cards
-------------------------------------------------- */
.card-title {
    padding-top: 0rem;
    padding-left: 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 0rem;
}



/* Icons
-------------------------------------------------- */
.icon-circle {
    display: inline-block;
    border-radius: 120px;
    box-shadow: 0 0 2px #888;
    padding: 0.5em 0.6em;
}


/* Dividers 
-------------------------------------------------- */
.fancy-hr {
    margin-top: 5.71429rem ;
    margin-bottom: 5.71429rem ;
    text-align: center;
    position: relative;
    border-top-width: 1px;
    background-image: linear-gradient(to right, transparent, #ddd, transparent);
    height: 1px;
    border: none;
    margin-left: auto!important;
    margin-right: auto!important;
}

.fancy-hr-icon {
    left: auto;
    right: auto;
    margin-left: -1.42857rem;
    position: absolute;
    top: -1.42857rem;
    width: 2.85714rem;
    height: 2.85714rem;
    font-size: 1.28571rem;
    line-height: 2.85714rem;
    text-align: center;
    font-style: normal;
    border-radius: 50%!important;    
}

/* Tables 
-------------------------------------------------- */
.table-bordered {
    border: 1px solid #777;
}
 
.table-bordered td, .table-bordered th {
    border: 1px solid #777;
}

.table-bordered thead th {
    border-bottom-width: 1px;
}
 
.table thead th {
    border-bottom: 1px solid #777;
    border-bottom-width: 1px;
}
   
.table td, .table th {
    border-top: 1px solid #777;
}
 
.table .thead-csblue-normal th {
    color: #ffffff;
    background-color: #1668b1;
    vertical-align: center;
    font-weight: 700;
}

.table .tfoot-csblue-light td {
    color: #000000;
    background-color: #abcde6;
    vertical-align: center;
    font-weight: 700;
}

.table .trow-csblue-10percent td {
    color: #000000;
    background-color: #e5f0f8;
    vertical-align: center;
}

.table-fixed {
    table-layout: fixed;
}
 
.table-auto {
    table-layout: auto;
}

/* Data Tables
-------------------------------------------------- */
.page-item.active .page-link {
    background-color: #00A145;
    border-color: #00A145;
}

.page-link {
    color: #00A145;
    background-color: #e5f7ee;
    border: 1px solid #00813a;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 10px 0!important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    background-color: #00A145!important;
}

/* Widths 
-------------------------------------------------- */
.w-20 {
    width: 20%!important;
}

.w-30 {
    width: 30%!important;
}
 
.w-33 {
    width: 33%!important;
}
 
.w-40 {
    width: 40%!important;
}

.w-66 {
    width: 66%!important;
}


/* Alerts 
-------------------------------------------------- */
.alert-success {
    color: #00813a; /*CS Green Dark Colour*/
    background-color: #e5f7ee; /*CS Green 10 percent Colour*/
    border-color: #00813a; /*CS Green Dark Colour*/
}

.alert-primary {
    color: #00508b; /*CS Blue Dark Colour*/
    background-color: #e5f0f8; /*CS Blue 10 percent Colour*/
    border-color: #00508b; /*CS Blue Dark Colour*/
} 
 
.alert-warning { 
    border-color: #856404;
}
 
.alert-secondary { 
    border-color: #383d41;
} 
 
.alert-danger {
    border-color: #721c24;
}

 
/* Help Icons 
-------------------------------------------------- */
.help-icon-csblue {
    border: 0;
    opacity: .9;
    background-color: #e5f0f8; /*CS Blue 10 percent Colour*/
    color: #00508b; /*CS Blue Dark Colour*/
}

.help-icon-csgreen {
    border: 0;
    opacity: .9;
    background-color: #e5f7ee; /*CS Green 10 percent Colour*/
    color: #00813a; /*CS Green Dark Colour*/
}

.help-icon-red {
    border: 0;
    opacity: .9;
    background-color: transparent;
    color: #00813a; /*CS Green Dark Colour*/
}


/* Forms 
-------------------------------------------------- */
.form-frame {
    position: relative;
    padding: 1rem;
    border: solid #adb5bd;
    border-width: 1px;
}

.form-group {
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}
 
form small {
    color: #1668b1 !important;
} 


/* Nav bar 
-------------------------------------------------- */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,.75);
}
 
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: rgba(255,255,255,.95);
}
 
.nav-tabs .nav-link {
    background-color: #00A145;
    color: #fff;
    border-color: #fff #fff #00A145;
    font-weight: 900;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}
   
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #fff;
    background-color: #1668b1;
    border-color: #fff #fff #1668b1;
}
 
.nav-tabs .nav-link.disabled {
    color: #6c757d;
    background-color: #D3D3D3;
    border-color: #fff #fff #D3D3D3;
}

.nav-fixed-top-gmw {

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}


/* Misc 
-------------------------------------------------- */
.u-shadow-v21 {
    box-shadow: 0 20px 25px -12px rgb(0 0 0 / 9%);
    transition-property: all;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-duration: .3s;
}

@media print {
    .page-break {
        clear: both;
        page-break-after: always;
    }
}


/* Logo and Header
-------------------------------------------------- */
.img-logo {
    max-width: 300px;
    height: auto;
}
 
@media all and (max-width: 575px) {
    .img-logo  {
        width: 220px !important;
    }
}

.img-container {
    height: 450px;
}


/* Responsive Splash Image
-------------------------------------------------- */
.splash-img {
    background-position: center; 
    background-size: cover; 
    border-bottom: 5px solid #abcde6;
    height: 169px;
}

@media (min-width: 576px) {
    .splash-img {
        height: 169px;
    }
}
   
@media (min-width: 768px) {
    .splash-img {
        height: 225px;
      
    }
}

@media (min-width: 992px) {
    .splash-img {
        height: 300px;
    }
}
   
@media (min-width: 1200px) {
    .splash-img {
        height: 356px;
    }
}

.img-max-width {
    max-width: 1440px;
    height:100%;     
}
.img-fluid-max-width {
    max-width: 100%;
    height: auto;
}

@media (min-width: 992px) {
    .img-max-width {
        max-width: 1440px;
        height:auto;
    }
    .img-fluid-max-width {
        max-width: 100%;
        height: auto;
    }
}

.with-bg-size {
    background-image: url('https://i.stack.imgur.com/wPh0S.jpg');
    width: 200px;
    height: 100px;
    background-position: center;
    /* Make the background image cover the area of the <div>, and clip the excess */
    background-size: cover;
}


/* list check marks
-------------------------------------------------- */
.list-display li {
    margin-bottom:.4rem;
}
.list-checkmarks {
    padding-left:1.5rem;
}
.list-checkmarks li {
    list-style-type:none;
    padding-left:1rem;
    align-items: center;
}
.list-checkmarks li:before {    
    font-family: bootstrap-icons !important;
    content: "\F633";
    margin:0 10px 0 -31px;
    color: #00813a;
    font-weight: 900;
}

.list-cross {
    padding-left:1.5rem;
}
.list-cross li {
    list-style-type:none;
    padding-left:1rem;
}
.list-cross li:before {    
    font-family: bootstrap-icons !important;
    content: "\f62a";
    font-size: 1.2rem;
    margin:0 10px 0 -31px;
    color: #721c24;
    font-weight: 900;
}

/* Buttons
-------------------------------------------------- */
.btn-csgreen-normal {
    color: #fff;
    background-color: #00A145;
    border-color: #00813a;
}
.btn-csblue-normal {
    color: #fff;
    background-color: #1668b1;
    border-color: #00508b;
}
.btn-primary {
    color: #fff;
    background-color: #1668b1;
    border-color: #00508b;
}


/* Side notes for calling out things
-------------------------------------------------- */

/* Base styles (regardless of theme) */
.bs-callout {
    margin: 20px 0;
    padding: 15px 30px 15px 15px;
    border-left: 5px solid #eee;
    font-weight: 200;
    font-size: 80%;
}
.bs-callout h4 {
    margin-top: 0;
    font-weight: 400;
}
.bs-callout p:last-child {
    margin-bottom: 0;
}
.bs-callout code,
.bs-callout .highlight {
    background-color: #fff;
}

/* Themes for different contexts */
.bs-callout-danger {
    background-color: #fcf2f2;
    border-color: #dFb5b4;
}
.bs-callout-warning {
    background-color: #fefbed;
    border-color: #f1e7bc;
}
.bs-callout-csblue {
    background-color: #e5f0f8;
    border-color: #1668b1;
}
.bs-callout-csgreen {
    background-color: #e5f7ee;
    border-color: #00A145;
}

.bs-callout-danger h4 {
    color: #B94A48;
}
.bs-callout-warning h4 {
    color: #C09853;
}
.bs-callout-csblue h4 {
    color: #1668b1;
}
.bs-callout-csgreen h4 {
    color: #00A145;
}


/* Background 
-------------------------------------------------- */
.bg-lineargradient-csblue {
    background-color: #1668b1; /* For browsers that do not support gradients */
    background-image: -webkit-linear-gradient(160deg, rgb(0, 80, 139), rgb(22, 104, 177));
    background-image: -moz-linear-gradient(160deg, rgb(0, 80, 139), rgb(22, 104, 177));
    background-image: -o-linear-gradient(160deg, rgb(0, 80, 139), rgb(22, 104, 177));
    background-image: linear-gradient(160deg, rgb(0, 80, 139), rgb(22, 104, 177));
}

.bg-radialgradient-csblue-light {
    background-color: #abcde6; /* For browsers that do not support gradients */
    background-image: -webkit-radial-gradient(circle, rgb(229, 240, 248), rgb(171, 205, 230));
    background-image: -moz-radial-gradient(circle, rgb(229, 240, 248), rgb(171, 205, 230));
    background-image: -o-radial-gradient(circle, rgb(229, 240, 248), rgb(171, 205, 230));
    background-image: radial-gradient(circle, rgb(229, 240, 248), rgb(171, 205, 230));
}

.bg-csblue-normal {
    background-color: #1668b1 !important;
}
.bg-csblue-light {
    background-color: #abcde6 !important;
}
.bg-csblue-dark {
    background-color: #00508b !important;
} 
.bg-csblue-10percent {
    background-color: #e5f0f8 !important;
} 
  
.bg-csgreen-normal {
    background-color: #00A145 !important;
}
.bg-csgreen-light {
    background-color: #abe0c2 !important;
}
.bg-csgreen-dark {
    background-color: #00813a !important;
} 
.bg-csgreen-10percent {
    background-color: #e5f7ee !important;
} 
   

/* colors
-------------------------------------------------- */

.color-csblue-normal {
    color: #1668b1 !important;
}
.color-csblue-light {
    color: #abcde6 !important;
}
.color-csblue-dark {
    color: #00508b !important;
} 
.color-csblue-10percent {
    color: #e5f0f8 !important;
} 
  
.color-csgreen-normal {
    color: #00A145 !important;
}
.color-csgreen-light {
    color: #abe0c2 !important;
}
.color-csgreen-dark {
    color: #00813a !important;
} 
.color-csgreen-10percent {
    color: #e5f7ee !important;
} 


/* Additional Spacing Classes
-------------------------------------------------- */
.mt-8 {
    margin-top: 5.5rem;
}

.p-7 {
    padding: 5rem;
}
.py-7 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.px-7 {
    padding-left: 5rem;
    padding-right: 5rem;
}
.pt-7 {
    padding-top: 5rem;
}
.pb-7 {
    padding-bottom: 5rem;
}
.pl-7 {
    padding-left: 5rem;
}
.pr-7 {
    padding-right: 5rem;
}

.m-7 {
    margin: 5rem;
}
.my-7 {
    margin-top: 5rem;
    margin-bottom: 5rem;
}
.mx-7 {
    margin-left: 5rem;
    margin-right: 5rem;
}
.mt-7 {
    margin-top: 5rem;
}
.mb-7 {
    margin-bottom: 5rem;
}
.ml-7 {
    margin-left: 5rem;
}
.mr-7 {
    margin-right: 5rem;
}

.p-10 {
    padding: 8rem;
}
.py-10 {
    padding-top: 8rem;
    padding-bottom: 8rem;
}
.px-10 {
    padding-left: 8rem;
    padding-right: 8rem;
}
.pt-10 {
    padding-top: 8rem;
}
.pb-10 {
    padding-bottom: 8rem;
}
.pl-10 {
    padding-left: 8rem;
}
.pr-10 {
    padding-right: 8rem;
}

.m-10 {
    margin: 8rem;
}
.my-10 {
    margin-top: 8rem;
    margin-bottom: 8rem;
}
.mx-10 {
    margin-left: 8rem;
    margin-right: 8rem;
}
.mt-10 {
    margin-top: 8rem;
}
.mb-10 {
    margin-bottom: 8rem;
}
.ml-10 {
    margin-left: 8rem;
}
.mr-10 {
    margin-right: 8rem;
}


/* Fonts
-------------------------------------------------- */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1.5rem;  
    margin-top: 2.8rem;  
    color: #00A145;    
    font-family: 'Open Sans', sans-serif;
    font-weight: 900;
}
.body, body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
} 
.header {
    font-size: 1.0rem;
    font-weight: 500;
}
.footer {
    font-size: 0.8rem;
}
.footer .btn {
    font-size: 0.8rem;
    font-weight: 300 !important;
}
.b-icon {
    font-size: 2.0rem;
}
.large {
    font-size: 120%;
}
.strong {
    font-weight: 600;
}
b, strong {
    font-weight: 600;
}
.little {
    font-size: 87.5%;
    font-weight: 300;
}
a {
  color: #00A145;
}


/* Responsive Font Sizes
-------------------------------------------------- */
.display-4 {
	font-size: 1.5rem;
}
.h1, h1 {
    font-size: 1.625rem;
}
.h2, h2 {
    font-size: 1.25rem;
}
.h3, h3 {
    font-size: 1rem;
} 
.h4, h4 {
    font-size: 0.9rem;
} 
body {
    font-size: 0.9rem;
}
.lead {
    font-size: 1rem;
    font-weight: 500;
}
.boxtext {
    font-size: 0.9;
}
.boxbullet {
    font-size: 0.8;
}

.table {
    font-size: 0.9rem;
}
.checkmark li{
    font-size: 0.9rem;
}


.nav-bottom-padding{
    padding-bottom: 77px;
}

/* 
Extra small <576px	
Small ≥576px	
Medium ≥768px	
Large ≥992px	
Extra large ≥1200px
*/


@media (min-width: 576px) {
    .display-4 {
		font-size: 2.0rem;
    }
    body {
        font-size: 1rem;
    }
    .lead {
        font-size: 1.1rem;
        font-weight: 500;
    }
    .table {
        font-size: 1rem;
    }
    .checkmark li{
        font-size: 1rem;
    }
    .nav-bottom-padding{
        padding-bottom: 86px;
    }
}

@media (min-width: 768px) {
    .display-4 {
		font-size: 2.5rem;
    }
    .h1, h1 {
        font-size: 2rem;
    }
    .h2, h2 {
        font-size: 1.15rem;
    }
    .h3, h3 {
        font-size: 1.125rem;
    }
    .h4, h4 {
        font-size: 1.1rem;   
    }  
    body {
        font-size: 1.1rem;
    }
    .lead {
        font-size: 1.2rem;
        font-weight: 500;
    }
    .table {
        font-size: 1.0rem;
    }
    .checkmark li{
        font-size: 1.1rem;
    }
    .py-md-7 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
    .nav-bottom-padding{
        padding-bottom: 86px;
    }
}

@media (min-width: 992px) {
	.display-4 {
		font-size: 3.0rem;
    }
	.h1, h1 {
        font-size: 2.5rem;
    }
    .h2, h2 {
        font-size: 1.75rem;
    }
    .h3, h3 {
        font-size: 1.25rem;
    }
    .h4, h4 {
        font-size: 1.1rem;
    }
    body {
        font-size: 1.1rem;
    }
    .lead {
        font-size: 1.22rem;
        font-weight: 500;
    }
    .table {
        font-size: 1.0rem;
    }
    .checkmark li{
        font-size: 1.1rem;
    }  
    .nav-bottom-padding{
        padding-bottom: 88px;
    }
}
   
@media (min-width: 1200px) {
	.display-4 {
		font-size: 3.5rem;
	}
	.h1, h1 {
        font-size: 3rem;
    }
    .h2, h2 {
        font-size: 2.25rem;
    }
    .h3, h3 {
        font-size: 1.5rem;
    }
    .h4, h4 {
        font-size: 1.188rem;
    }
    body {
        font-size: 1.1rem;
    }
    .lead {
        font-size: 1.22rem;
        font-weight: 500;
    }
    .table {
        font-size: 1rem;
    }
    .checkmark li{
        font-size: 1.1rem;
    }
}

@media (min-width: 1440px) {
    .table {
        font-size: 1rem;
    }
    .checkmark li{
        font-size: 1rem;
    }
}

.vcdetails-attribute-headings {
    font-size: 20px;
    margin: 5px 2px;
}

.vcdetails-attribute-values {
    font-family: GCFCamingo, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 22px;
    color: #2095db;
}
 
/*
1 = 4px = 0.25rem
2 = 8px = 0.5rem
3 = 16px = 1rem (base)
4 = 24px = 1.5rem
5 = 48px = 3.0rem
7 = 80px = 5.0rem
10 = 128px = 8.0rem

4px = 0.25rem
8px = 0.5rem
9px = 0.5625rem
10px = 0.625rem
11px = 0.6875rem
12px = 0.75rem
13px = 0.8125rem
14px = 0.875rem
15px = 0.9375rem
6px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
22px = 1.375rem
24px = 1.5rem
26px = 1.625rem
28px = 1.75rem
30px = 1.875rem
32px = 2rem
34px = 2.125rem
36px = 2.25rem
38px = 2.375rem
40px = 2.5rem
48px = 3.0rem
80px = 5.0rem
128px = 8.0rem
*/