:root {
  --dcp-black: rgba(10,20,20,1);
  --dcp-darkgrey: rgba(40, 40, 42, 1);
  --dcp-darkgrey2: rgba(50,50,52, 1);
  --dcp-darkcyan: rgba(3, 57, 57, 1);
  --dcp-midcyan: rgba(14, 154, 151, 1);
  --dcp-lightcyan1: rgba(6, 211, 206, 1);
  --dcp-lightcyan2: rgba(105, 242, 235, 1);
  --dcp-lightcyan3: rgba(180, 250, 250, 1);
  --dcp-lightcyan4: rgba(224, 255, 255, 1);
  --dcp-palered: rgba(255, 138, 121, 1);
  --dcp-red: rgba(255, 97, 76, 1);
  --dcp-bg-light: rgba(255, 255, 255, 1);
  --dcp-lightgrey: rgba(91, 91, 91, 1);
  --dcp-lightgrey2: rgba(151, 151, 151, 1);
  --dcp-lightgrey3: rgba(220, 220, 220, 1);
  --dcp-lightgrey4: rgba(244, 244, 244, 1);
  --dcp-white: rgba(255, 255, 255, 1);
  --variable-collection-box-visualiser: rgba(255, 255, 255, 0.15);
  --bs-link-color: var(--dcp-midcyan);
  --bs-link-hover-color: var(--dcp-lightcyan1);
  --dcp-cap-app-circle: var(--dcp-palered);
  --dcp-cap-app-line: var(--dcp-red);
  --dcp-cap-app-fill: var(--dcp-red);
  --dcp-cap-app-num: var(--dcp-black);
  --dcp-cap-con-circle: var(--dcp-white);
  --dcp-cap-con-line: var(--dcp-white);
  --dcp-cap-con-fill: var(--dcp-white);
  --dcp-cap-con-num: var(--dcp-black);
  --dcp-cap-target: #00ff33;;
  --dcp-cap-bg: rgba(6,85,92,1);
  --dcp-cloud-panel-0: #00404bff;
  --dcp-cloud-panel-1: #004f59ff;
  --dcp-cloud-panel-2: #00737bff;
  --dcp-cloud-panel-3: #158c93ff;
  --dcp-cloud-panel-4: #41b0b3ff;
  --dcp-cloud-panel-5: #5dc7c7ff;
  --dcp-cloud-panel-6: #7dddddff;
  --dcp-cloud-panel-7: #a4f5f4ff;
  --dcp-cloud-panel-8: #d0fafaff;
  --dcp-cloud-panel-9: #e3ffffff;
  --dcp-cloud-panel-10: #ffffffff;
  --dcp-cap-ring-0: #158c93ff;
  --dcp-cap-ring-1: #158c93ff;
  --dcp-cap-ring-2: #158c93ff;
  --dcp-cap-ring-3: #158c93ff;
  --dcp-cap-ring-4: #158c93ff;
  --dcp-cap-ring-5: #158c93ff;
  --dcp-cap-ring-6: #158c93ff;
  --dcp-cap-ring-7: #158c93ff;
  --dcp-cap-ring-8: #158c93ff;
  --dcp-diagram-outline: var(--dcp-black);
  --dcp-label-text: var(--dcp-lightcyan3);
  --dcp-score-line-thickness: 2;
  --dcp-score-opacity: 0.25;
}

.dcp-topic-card{
    /* width: 18rem; */
    background: var(--dcp-darkgrey);
    border: 2px solid var(--dcp-lightcyan2);
    border-radius: 10px;
    margin: 0px;
    margin-top: 1rem;
    margin-bottom: 1rem;

}

.dcp-topic-card > img.card-img-top{
    height: 3rem;
    border: 2px solid #000;
    border-radius: 10px 10px 0 0;
    object-fit: cover;
}
.dcp-topic-card h6{
    font-weight: bold;
}

.card,.dcp-card{
background: var(--dcp-darkgrey);
border: 2px solid var(--dcp-lightcyan2);
border-radius: 10px;
}

.dcp-card-full{
    height: 100%;
}

.dcp-key-pill{
    border: 2px solid #000;
    display: inline-block;
    padding: 2px 5px 2px 5px;
    border-radius: 5px;
}

.cloud-high-key{
    background-color: var(--dcp-cloud-panel-0);
    color: var(--dcp-white);
}
.cloud-mid-key{
    background-color: var(--dcp-cloud-panel-5);
    color: var(--dcp-black);
}
.cloud-low-key{
    background-color: var(--dcp-cloud-panel-9);
    color: var(--dcp-black);
}

.cap-target-key{
    background-color: var(--dcp-cap-target);
    border-color: var(--dcp-cap-target);
    color: var(--dcp-cap-app-num);
}

.cap-app-key{
    background-color: var(--dcp-cap-app-fill);
    border-color: var(--dcp-cap-app-line);
    color: var(--dcp-cap-app-num);
}

.cap-con-key{
    background-color: var(--dcp-cap-con-fill);
    border-color: var(--dcp-cap-con-line);
    color: var(--dcp-cap-con-num);
}

.form-explainer{
    color: var(--dcp-lightgrey2);
    border-radius: 10px;
}

/* table.dcp-table{ */
/* color: var(--dcp-white); */
/* } */


.dcp-explainer dd, .dcp-explainer dt{
border: 2px solid var(--dcp-lightcyan2);
padding: 0.5em;
}
.dcp-explainer dt{
border-radius: 10px 10px 0 0;
margin-bottom: -1px;
text-align: center;
border-bottom: none;
}
.dcp-explainer dd{
padding: 1em;
border-radius: 0 0 10px 10px;
font-size: 90%;
}
.dcp-explainer dl{
margin: 1em;
}
.dcp-auto-question-row{
margin-bottom: 2em;
}
.dcp-question-explainer{
font-size: 80%;
color: var(--dcp-lightgrey2);
}
.btn-primary{
--bs-btn-color: var(--dcp-white);
--bs-btn-bg: var(--dcp-darkcyan);
--bs-btn-border-color: var(--dcp-lightcyan1);
--bs-btn-hover-color: var(--dcp-white);
--bs-btn-hover-bg: var(--dcp-lightcyan1);
--bs-btn-hover-border-color: var(--dcp-lightcyan1)
--bs-btn-active-color: var(--dcp-white);
--bs-btn-active-bg: var(--dcp-darkcyan);
--bs-btn-active-border-color: var(--dcp-lightcyan2);
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: var(--dcp-lightgrey);
--bs-btn-disabled-bg: var(--dcp-darkgrey);
--bs-btn-disabled-border-color: var(--dcp-lightgrey);
}
.dcp-header-logo{
height: 40px;
}
.alert-info {
--bs-alert-color: var(--dcp-darkcyan);
--bs-alert-bg: var(--dcp-lightcyan2);
--bs-alert-border-color: var(--dcp-lightcyan2);
}
.border-primary-dcp{
border-color: var(--dcp-lightcyan2);
}
.bg-primary-dcp{
background: var(--dcp-lightcyan2);
color: var(--dcp-darkgrey);
}
.card-title{
color: var(--dcp-white);
}
.list-group {
--bs-list-group-color: var(--dcp-darkcyan);
--bs-list-group-bg: var(--dcp-darkgrey);
--bs-list-group-border-color: rgba(0, 0, 0, 0.125);
--bs-list-group-border-width: 1px;
--bs-list-group-border-radius: 0.375rem;
--bs-list-group-item-padding-x: 1rem;
--bs-list-group-item-padding-y: 0.5rem;
--bs-list-group-action-color: #495057;
--bs-list-group-action-hover-color: #495057;
--bs-list-group-action-hover-bg: #f8f9fa;
--bs-list-group-action-active-color: #212529;
--bs-list-group-action-active-bg: #e9ecef;
--bs-list-group-disabled-color: #6c757d;
--bs-list-group-disabled-bg: #fff;
--bs-list-group-active-color: #fff;
--bs-list-group-active-bg: #0d6efd;
--bs-list-group-active-border-color: #0d6efd;
}
li.list-group-item{
color: var(--dcp-white);
border-color: var(--dcp-lightgrey);
}
.btn-outline-secondary {
--bs-btn-color: var(--dcp-lightcyan2);
--bs-btn-border-color: var(--dcp-lightcyan1);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--dcp-darkcyan);
--bs-btn-hover-border-color: #6c757d;
--bs-btn-focus-shadow-rgb: 108,117,125;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #6c757d;
--bs-btn-active-border-color: #6c757d;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #6c757d;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #6c757d;
--bs-gradient: none;
}
.btn-success {
--bs-btn-color: #fff;
--bs-btn-bg: var(--dcp-midcyan);
--bs-btn-border-color: var(--dcp-lightcyan1);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #157347;
--bs-btn-hover-border-color: #146c43;
--bs-btn-focus-shadow-rgb: 60,153,110;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #146c43;
--bs-btn-active-border-color: #13653f;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #198754;
--bs-btn-disabled-border-color: #198754;
}

div.dcp-cloud-card .card-header {
background-color: var(--dcp-midcyan);
color: var(--dcp-white);
}

.question-card{
    background-color: var(--dcp-darkgrey);
    padding: 2rem;
}

div.dcp-cloud-card {
    background-color: var(--dcp-darkgrey);
}

label.dcp-cloud-btn{
}
.dcp-cloud-btn:checked{
background-color: var(--dcp-lightcyan1);
color: var(--dcp-white);
}

img.dcp-logo-icon{
    display:inline-block;
    width: 1em;
    vertical-align: top;
    margin-right: 1ex;
}

img.dcp-footer{
    height: 4em;


}


footer{
    bottom: 0;
    width: 100%;
}

.capabilityCanvas-div{
    background: url("/static/images/dcp_icons/cap_icon_cyan.png");
}

.cloudCanvas-div{
    background: url("/static/images/dcp_icons/cloud_icon_cyan.png");
}

.taster-canvas-div{
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 64px;
    background-color: var(--dcp-darkgrey);
}

.taster-canvas-div h2{
    color: var(--dcp-lightcyan3);
}



.alignment-table th{
    padding-right: 1em;
}

.alignment-table{
    margin: 1em;
}

.taster-report-table h1{
    font-size: 16pt;
    font-weight: bold;
}


.taster-report-table, .dcp-table{
    color: var(--dcp-black);
}



.table{

    --bs-table-striped-bg: var(--dcp-lightcyan4);
    --bs-table-bg: var(--dcp-lightgrey3);
    --bs-table-hover-bg: var(--dcp-white);
}

.table thead tr{
    background: var(--dcp-midcyan) !important;
    color: var(--dcp-white) !important;
    --bs-table-bg: var(--dcp-midcyan);

}

.table tr th, .table tr td{
    padding: 20px;
}


/* Added to make tables and cards be visable in globval page  */
/* TODO delete when global stylign is done */
.dcp-light-card {
    background: #adb5bd;
}

/* .table>:not(caption)>*>* { */
/*     background: #adb5bd; */
/* } */

.site-accordion-button{
    height: 4rem;
    align-items: center;



}


.dcp-acordion-header{
    border-radius: 10px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    background: var(--dcp-midcyan);
    border: 1px solid var(--dcp-lightcyan1);
    border-bottom: none;
}


.accordion-item {
    background-color: transparent;
    border: none;
}



.accordion-item:first-of-type .accordion-button, .accordion-button {
    border-radius: 0px;
    border-top-left-radius: 10px;
    background: var(--dcp-midcyan);
    border: 1px solid var(--dcp-lightcyan1);
    padding: 0px;
    padding-left: 1rem;
    height: 4rem;
    border-bottom: none;
    border-right: none;
    box-shadow: none;
    color: var(--dcp-white);
}

.accordion-item:last-of-type .accordion-button.collapsed{
    border-bottom-right-radius: 0px;
    color: var(--dcp-black);
}

div.unit-site-container{
    margin-left: 4rem;


}

.site-body-collapse{

    border: 1px solid var(--dcp-lightcyan1);
    border-top: none;
    margin-top: 0px;
}

.accordion-header {
    margin-bottom: 0px;
    background: transparent;
    padding-bottom: 0px;
}


img.small-thumbnail{
    height: 2rem;
}
img.medium-thumbnail{
    height: 8rem;
}
div.demo-block{
    margin: 1rem;
    padding: 2rem;
    border: 2px solid var(--dcp-palered);
    border-radius: 10px;
   box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px;
}

.dcp-place-group{
    border: 1px solid var(--dcp-lightgrey2);
    border-radius: 10px;

}

.btn-group{
    flex-wrap: wrap;
}

.deployment-detail-container{
    margin: 1rem;
    border: 2px solid var(--dcp-lightcyan2);
    background: var(--dcp-darkgrey2);
    padding: 1rem;
    border-radius: 10px;
}

.deployment-detail-header{

}


.btn-report{
    border: 2px solid var(--dcp-lightcyan1);
    color: var(--dcp-white);
    background: var(--dcp-darkcyan);
}

.question-set label{
    color: var(--dcp-lightcyan3);
}

.bg-light h2{
    color: var(--dcp-black);
}
