/****************
* Common
****************/

@font-face {
    font-family: metropolis-regular;
    src: url(/assets/fonts/metropolis/Metropolis-Regular-c453c296236f6323fd1dec162f8fc429.ttf);
}

@font-face {
    font-family: metropolis-medium;
    src: url(/assets/fonts/metropolis/Metropolis-Medium-cfd95ec89d58a51650ccac76a407ff0c.ttf);
}

@font-face {
    font-family: metropolis-light;
    src: url(/assets/fonts/metropolis/Metropolis-Light-f14fa3d5ff4da6bd411fce9b59e9a95f.ttf);
}

@font-face {
    font-family: roboto-regular;
    src: url(/assets/fonts/roboto/Roboto-Regular-8a36205bd9b83e03af0591a004bc97f4.ttf);
}

.success {
    color: #62A420;
}

.low {
    color: #F2F2F2;
}

.warning {
    color: var(--cds-alias-status-warning)
}

.high {
    color: #440061;
}

.danger {
    color: var(--cds-alias-status-danger)
}

.exclamation {
    width: 26px;
    height: 26px;
    margin-left: -4px;
}

.report-header-separator {
    width: 100%;
    max-height: 10px;
}

.report-section-separator {
    width: 100%;
    margin-left: -6px;
}

.report-header-title {
    font-family: metropolis-light;
    font-size: 28px;
}

.report-icon {
    height: 32px;
    width: 32px;
    padding-top: 0px;
    padding-right: 10px;
}

.spring-hero-icon {
    height: 61px;
    width: 80px;
    padding-top: 0px;
    padding-right: 10px;
}

.boxes-container {
    height: 300px;
    margin-top: 10px;
}

.box-icon {
    float: left;
    height: 100%;
    margin-top: 5px;
}

.box-title {
    height: 78px;
    margin: auto;
    padding-right: 10px;
}

.box-title p {
    font-family: metropolis-regular !important;
    font-size: 18px !important;
    line-height: 26px !important;
}

.box-description p {
    font-family: metropolis-regular !important;
    font-size: 14px !important;
    line-height: 20px !important;
    margin-bottom: 10px !important;
    width: 360px !important;
}

.box-description a {
    font-family: metropolis-medium !important;
    font-size: 14px !important;
    line-height: 14px !important;
}

a {
    color: rgb(0, 145, 218) !important;
}

a:visited {
    color: rgb(0, 145, 218) !important;
}

a:visited:hover {
    color: rgb(0, 145, 218) !important;
}

.card {
    margin-top: 12px;
}

.logo img {
    height: 26px;
}

.logo span {
    margin-left: 5px;
    font-weight: 500;
    margin-top: auto;
    font-size: 16px;
}

.vertical-divider {
    height: 195px;
    border-style: dashed;
    border-width: 1px;
    border-color: #d9d9d9;
    margin-right: 12px;
    margin-left: 12px;
}

html {
    width: 937px;
}

.total-checks-amount {
    display: block;
    font-size: 22px;
    font-weight: normal !important;
}

.total-checks-label {
    display: block;
    color: #717074;
    margin-top: 8px;
    font-size: 14px;
}

.col-donut-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.col-donut-right {
    margin-left: 0px;
    margin-right: 10px;
}

.col-charts {
    border-left-style: dotted;
    border-left-color: #d9d9d9;
    border-left-width: 2px;
    padding-left: 12px;
    margin-left: 12px;
    padding-bottom: 32px;
}

.col-donut {
    height: 300px;
}

.donut-centered {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.status-overtime-chart {
    margin-bottom: 10px;
}

.compliance-score-chart {
    margin-bottom: 10px;
}

#compliance-score-status p {
    margin-top: 0px;
}

.roi-section {
    height: 180px;
    margin-top: 10px;
}

.roi-section .report-headline-simplified-image {
    text-align: center;
    display: block;
    color: white;
    font-family: metropolis-light;
    font-size: 18px;
    line-height: 26px;
    background: #005C8A;
    height: 30%;
    border-radius: 5px 5px 0px 0px;
    padding-top: 18px;
    text-align: left;
    padding-left: 10px;
}

.roi-section .report-headline-reduce-risk {
    text-align: center;
    display: block;
    color: white;
    font-family: metropolis-light;
    font-size: 18px;
    line-height: 26px;
    background: #70518F;
    height: 30%;
    border-radius: 5px 5px 0px 0px;
    padding-top: 18px;
    text-align: left;
    padding-left: 25px;
}

.roi-section .report-text {
    margin-top: 5px;
    text-align: center;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    text-align: left;
    font-size: 14px;
    font-family: metropolis-regular;
}

.roi-section .roi-vertical .report-text .report-date-value{
    font-size: 14px;
    font-family: metropolis-regular;
}

.roi-section .roi-vertical-simplified {
    float: left;
    width: 48.0%;
    background: #FFFFFF;
    margin-left: 10px;
    height:100%;
    border-radius: 5px;
    border:1px solid #005C8A;
}

.roi-section .roi-vertical-risk {
    float: left;
    width: 48.0%;
    background: #FFFFFF;
    margin-left: 10px;
    height:100%;
    border-radius: 5px;
    border:1px solid #70518F;
}

/****************
* Charts
****************/

.doughnuts-section .report-headline {
    margin-left: 20px;
}

.doughnuts-section .doughnut-vertical {
    float: left;
    width: 33.33%;
}

.donut-overlay {
    position: relative;
    display: inline-block;
    top: -192px;
    width: 100%;
    padding-left: 35px;
    padding-right: 35px;
    color: black;
}

.donut-center-percentage {
    font-family: metropolis-regular;
    font-size: 14px;
    line-height: 24px;
    display: block;
    width: 100%;
    text-align: center;
}

.donut-center-label {
    font-family: metropolis-regular;
    font-size: 14px;
    display: block;
    width: 60%;
    margin: auto;
    line-height: 14px;
    text-align: center;
}

.donut-right-side-bold {
    font-family: metropolis-regular;
    font-size: 24px;
    display: block;
    width: 60px;
}

.donut-right-side-bold-tac {
    font-family: metropolis-regular;
    font-size: 24px;
    display: block;
    width: 30px;
}

.donut-right-side-text {
    font-size: 14px;
    display: block;
    margin-bottom: 10px;
    font-family: metropolis-regular;
}

/****************
* Charts
 ****************/

.report-headline {
    font-family: metropolis-light;
    font-size: 22px;
    line-height: 26px;
}

.report-checks-section {
    margin-top: -4px !important;
    width: 100%;
    padding-right: 24px;
}

.report-checks-table {
    padding-right: 0px;
    text-align: right;
}

.report-checks-table-select {
    padding-left: 6px;
    padding-top: 2px;
    display: inline-flex;
    border-width: 1px;
    border-style: solid;
    border-color: #dedede;
    border-radius: 18px;
    font-family: metropolis-regular;
}

:focus {
  outline: 0;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069;
}

:focus:not(.focus-visible) {
  outline: 0;
  box-shadow: none;
}

.report-checks-table-select-label {
    line-height: 1rem;
}

.report-checks-table-select-input {
    border: transparent;
    background: transparent;
}

.report-date-label {
    font-weight: normal !important;
    color: #717074;
    font-size: 14px;
    margin-right: 5px;
}

.report-checks-section .clr-row {
    margin-left: 0;
}

.report-checks-summary {
    font-size: 14px;
    line-height: 14px;
    font-family: metropolis-regular;
    white-space: nowrap;
    margin-bottom: 8px;
}

.report-checks-row-icon-collapse {
    float: right;
    width: 24px;
    height: 24px;
}

.report-checks-row {
    display: flex;
    align-items: flex-end;
}

.report-checks-row-name {
    font-size: 18px;
    line-height: 26px;
    font-family: metropolis-light;
    padding-bottom: 4px;
    width: 800px;
}

.report-checks-row-label {
    font-size: 14px;
    line-height: 14px;
    font-family: metropolis-regular;
    color: #565656;
    white-space: nowrap;
    margin-bottom: 8px;
}

.report-checks-row-value {
    font-size: 14px;
    line-height: 16px;
    font-family: metropolis-regular;
    margin-top: auto;
    margin-bottom: auto;
}

.report-checks-row-value > span {
    display: inline-block;
    font-size: 14px;
}

.report-checks-row-value-transitive {
    margin-left: -6px;
}

.report-checks-row-icon-collapse {
    float: right;
    width: 24px;
    height: 24px;
}

.report-checks-row-icon-pop-out {
    margin-bottom: 5px;
    width: 16px;
    height: 16px;
}

.report-checks-row-value-pop-out {
    color: rgb(0, 145, 218) !important;
}

.report-checks-table tbody:before{
    content: "@";
    display: table-row;
    line-height: 8px;
    visibility: hidden;
}

.report-checks-uncollapsed {
    padding-top: 10px;
    padding-bottom: 5px;
}

#migration-effort-full {
    margin-left: 35px;
}

.vulnerability-text {
    font-size: 15px !important;
    font-weight: bold !important;
    margin: 0 0 3px -13px !important;
}

div#vulnerabilities-full {
    width: 378px;
}

#finding-recommendations-section p {
    width: 420px !important;
    line-height: 14px !important;
    font-size: 14px;
    font-family: metropolis-regular !important;
}

#finding-recommendations-section b {
    white-space: nowrap;
}

#finding-recommendations-section.boxes-container {
    height: unset;
}

#recommendations {
    margin-left: 20px
}

/*
 * Empty report.
 */

#empty-report {
    text-align: center;
    margin: auto;
}

#empty-report h3 {
    font-size: 22px !important;
    line-height: 26px !important;
}

#empty-report p {
    font-size: 14px !important;
    line-height: 14px !important;
}

#empty-report * {
    font-family: metropolis-light !important;
    width: 274px;
}

/*
* Disclaimer.
*/

#report-disclaimer p {
    margin-top: 7px;
    margin-bottom: 7px;
}

#read-carefully-section li {
    padding-left: 10px;
}

#read-carefully-section li::marker {
    font-size: 11px;
}

#support-contact-section h3,#read-carefully-section h3 {
    font-family: metropolis-light;
    font-size: 22px;
    line-height: 22px;
}

#support-contact-section p,#read-carefully-section p {
    font-family: metropolis-light;
    font-size: 14px;
    line-height: 20px;
}

/*
* CDS Overrides
 */
.card-block .clr-col {
    padding-right: 0px;
    flex-grow: 1;
}
.card-wrapper .clr-col{
    flex-grow: unset; /* Adjust this value to allocate more space */
}
.card-wrapper .clr-col:nth-child(4) {
    flex-grow: 2; /* Adjust this value to allocate more space */
}
.card-wrapper .clr-col:nth-child(3) {
    flex-grow: 2; /* Adjust this value to allocate more space */
}

.card-wrapper .clr-col:nth-child(1) {
    flex-grow: 0.6; /* Adjust this value to allocate more space */
}

.icon-severity-Critical {
    background-image: url('data:image/svg+xml,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.8168 5.09705C8.91386 5.09705 4.93921 9.0717 4.93921 13.9747C4.93921 18.8777 8.91386 22.8523 13.8168 22.8523C18.7198 22.8523 22.6945 18.8777 22.6945 13.9747C22.6945 11.6202 21.7592 9.36213 20.0943 7.69725C18.4294 6.03237 16.1713 5.09705 13.8168 5.09705ZM12.7147 9.53586C12.7147 8.92299 13.2116 8.42616 13.8244 8.42616C14.4373 8.42616 14.9341 8.92299 14.9341 9.53586V14.6331C14.9341 15.246 14.4373 15.7428 13.8244 15.7428C13.2116 15.7428 12.7147 15.246 12.7147 14.6331V9.53586ZM12.5446 18.2506C12.5446 18.9534 13.1143 19.5231 13.817 19.5231C14.5198 19.5231 15.0895 18.9534 15.0895 18.2506C15.0895 17.5478 14.5198 16.9781 13.817 16.9781C13.1143 16.9781 12.5446 17.5478 12.5446 18.2506Z" fill="%238E220D"/></svg>');
    width: 26.633px;
    height: 26.633px;
}
.icon-severity-High {
    background-image: url('data:image/svg+xml,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M22.9382 19.7723L15.7325 6.50022C15.3439 5.78622 14.596 5.3418 13.7831 5.3418C12.9702 5.3418 12.2224 5.78622 11.8338 6.50022L4.62067 19.7723C4.23648 20.4619 4.2475 21.3037 4.6496 21.983C5.05171 22.6623 5.78437 23.0769 6.57375 23.0718H20.9851C21.7678 23.0725 22.493 22.6609 22.8937 21.9886C23.2944 21.3162 23.3113 20.4825 22.9382 19.7945V19.7723ZM12.6771 10.3028C12.6771 9.68994 13.174 9.1931 13.7868 9.1931C14.3997 9.1931 14.8965 9.68994 14.8965 10.3028V15.4001C14.8965 16.0129 14.3997 16.5098 13.7868 16.5098C13.174 16.5098 12.6771 16.0129 12.6771 15.4001V10.3028ZM12.544 19.0251C12.544 19.7278 13.1137 20.2976 13.8164 20.2976C14.5192 20.2976 15.0889 19.7278 15.0889 19.0251C15.0889 18.3223 14.5192 17.7526 13.8164 17.7526C13.1137 17.7526 12.544 18.3223 12.544 19.0251Z" fill="%23FE6F54"/></svg>');
    width: 26.633px;
    height: 26.633px;
}
.icon-severity-Medium {
    background-image: url('data:image/svg+xml,<svg width="28" height="27" viewBox="0 0 28 27" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.8168 4.53589C8.91386 4.53589 4.93921 8.51054 4.93921 13.4135C4.93921 18.3165 8.91386 22.2912 13.8168 22.2912C18.7198 22.2912 22.6945 18.3165 22.6945 13.4135C22.6945 11.059 21.7592 8.80097 20.0943 7.13609C18.4294 5.47121 16.1713 4.53589 13.8168 4.53589ZM12.7147 8.97471C12.7147 8.36183 13.2116 7.865 13.8244 7.865C14.4373 7.865 14.9341 8.36183 14.9341 8.97471V14.072C14.9341 14.6848 14.4373 15.1817 13.8244 15.1817C13.2116 15.1817 12.7147 14.6848 12.7147 14.072V8.97471ZM12.5446 17.6895C12.5446 18.3922 13.1143 18.9619 13.817 18.9619C14.5198 18.9619 15.0895 18.3922 15.0895 17.6895C15.0895 16.9867 14.5198 16.417 13.817 16.417C13.1143 16.417 12.5446 16.9867 12.5446 17.6895Z" fill="%23D58B26"/></svg>');
    width: 26.633px;
    height: 26.633px;
}
.icon-severity-Low {
    background-image: url('data:image/svg+xml,<svg width="28" height="27" viewBox="0 0 28 27" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.8168 4.75537C8.91386 4.75537 4.93921 8.73002 4.93921 13.633C4.93921 18.536 8.91386 22.5106 13.8168 22.5106C18.7198 22.5106 22.6945 18.536 22.6945 13.633C22.6945 11.2785 21.7592 9.02045 20.0943 7.35557C18.4294 5.69069 16.1713 4.75537 13.8168 4.75537ZM12.7147 9.19419C12.7147 8.58132 13.2116 8.08449 13.8244 8.08449C14.4373 8.08449 14.9341 8.58132 14.9341 9.19419V14.2914C14.9341 14.9043 14.4373 15.4011 13.8244 15.4011C13.2116 15.4011 12.7147 14.9043 12.7147 14.2914V9.19419ZM12.5446 17.9089C12.5446 18.6117 13.1143 19.1814 13.817 19.1814C14.5198 19.1814 15.0895 18.6117 15.0895 17.9089C15.0895 17.2062 14.5198 16.6365 13.817 16.6365C13.1143 16.6365 12.5446 17.2062 12.5446 17.9089Z" fill="%23FDC838"/></svg> ');
    width: 26.633px;
    height: 26.633px;
}

td {
    padding-right: 0.6rem;
}

.upgrade-steps > div {
    padding-left: 0px;
}

.tac-container {
    /* container row */
    width: 493px;
    height: 72px;
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

.separator {
    position: absolute;
    left: 0%;
    right: 0.05%;
    top: 97.22%;
    bottom: 1.24%;
    background: rgba(115, 126, 132, 0.5);
}

.tac-support-heading {
    width: 455px;
    height: 29px;
    top: 0px;
    left: 50px;
    position: absolute;
    font-size: 14px;
    font-family: Metropolis-regular;
    font-weight: 400;
    line-height: 28.85px;
    word-wrap: break-word
}

.tac-support-existing {
    color: #4F6169;
    font-size: 12px;
    font-family: Metropolis;
    font-weight: 600;
    text-transform: uppercase;
    word-wrap: break-word
}


.tac-container-title {
    font-size: 14px;
    color: #565656;
    font-family: Metropolis-regular;
    font-weight: 600;
    text-transform: uppercase;
    word-wrap: break-word;
    width: 158px;
}

.tac-container-value {
    font-size: 14px;
    font-family: Metropolis-regular;
    font-weight: 400;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 300px;
    padding-left: 1.5em;
}

.tac-container-equivalent-header {
   font-size: 14px;
   color: #565656;
   font-family: Metropolis-regular;
   font-weight: 600;
   text-transform: uppercase;
   word-wrap: break-word;
   width: 158px;
}

.tac-container-equivalent {
    font-size: 14px;
    font-family: Metropolis-regular;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tac-container-proposed-title {
    font-size: 14px;
    color: #565656;
    font-family: Metropolis-regular;
    font-weight: 600;
    text-transform: uppercase;
    word-wrap: break-word;
    width: 388px;
}

.tac-container-proposed-content {
    font-size: 14px;
    font-family: Metropolis;
    font-weight: 400;
    word-wrap: break-word;
    width: 130%;
}

.tac-benefit-title {
    font-size: 16px;
    font-family: Metropolis-regular;
    font-weight: 400;
    word-wrap: break-word;
}

.tac-benefit-detail {
    width: 100%;
    font-size: 14px;
    font-family: Metropolis-regular;
    font-weight: 400;
    word-wrap: break-word
}

.tac-benefit-box {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 6px;
    display: inline-flex
}

.tac-benefit-box-long {
    flex-direction: column;
    padding-left: 0.7em;
    gap: 6px;
    display: inline-flex
}

.tac-benefit-icon-box {
    width: 26.63px;
    height: 26.63px;
    position: relative
}

.tac-benefit-icon {
    width: 26.76px;
    height: 26.76px;
    top: -4px;
    position: absolute
}

.tac-benefit-box-header {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 6px;
    display: inline-flex
}

.tac-benefit-block {
    padding: 6px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 29px;
    display: inline-flex
}

.tac-line {
    width: 492.76px;
    height: 1.11px;
    left: 0px;
    top: 150px;
    position: absolute;
    background: rgba(115.10, 126.06, 132.04, 0.50)
}

.tac-block {
    left: 39px;
    top: 6px;
    position: absolute;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.tac-image {
    width: 493px;
    height: 140px;
    position: relative
}

.tac-line-benefits {
    width: 50%;
    height: 1px;
    left: 546px;
    top: 0.15px;
    position: absolute;
    background: rgba(115.10, 126.06, 132.04, 0.50)
}

.tac-line-images {
    width: 50%;
    height: 1px;
    left: 0px;
    top: 0.15px;
    position: absolute;
    background: rgba(115.10, 126.06, 132.04, 0.50)
}

.tac-benefit-heading {
    width: 455px;
    height: 29px;
    left: 619px;
    top: 0px;
    position: absolute;
    font-size: 14px;
    font-family: Metropolis-regular;
    font-weight: 400;
    line-height: 28.85px;
    word-wrap: break-word
}

.tac-container-proposed-block {
    left: 39px;
    top: 65px;
    position: absolute;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.tac-container-equivalent-block {
    left: 39px;
    top: 36px;
    position: absolute;
    justify-content: flex-start;
    align-items: center;
    gap: 32px;
    display: inline-flex
}