@font-face {
    font-family: 'SoleilLight';
    font-style: normal;
    font-weight: normal;
    src: local('SoleilLight'), url('../fonts/soleil/SoleilLight.otf') format('truetype');
}

:root {
    --sdg01: #F4D4D7;
    --sdg02: #faf6ed;
    --sdg03: #eff5ec;
    --sdg04: #f9e8ea;
    --sdg05: #ffebe8;
    --sdg06: #e9f8fc;
    --sdg07: #fff9e6;
    --sdg08: #f6e8ec;
    --sdg09: #fff0e9;
    --sdg10: #fce7f0;
    --sdg11: #fff5e9;
    --sdg12: #f8f3ea;
    --sdg13: #ebf2ec;
    --sdg14: #e6f4fb;
    --sdg15: #eef9e9;
    --sdg16: #e5f0f5;
    --sdg17: #e8ecf0;

    --goal1: #ea1d2d;
    --goal2: #d19f2a;
    --goal3: #2d9a47;
    --goal4: #c22033;
    --goal5: #ef412a;
    --goal6: #26bde2;
    --goal7: #fdb714;
    --goal8: #8f1838;
    --goal9: #f36e24;
    --goal10: #e01a83;
    --goal11: #f99d25;
    --goal12: #cd8b2a;
    --goal13: #48773c;
    --goal14: #007dbb;
    --goal15: #3fae49;
    --goal16: #00558a;
    --goal17: #1b3668;
}


body {
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
    font-family: "SoleilLight";
}

.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin: 10px;
    display: inline-block;
    position: relative;
    z-index: 1;
}

/* Style for the SVG */ 
#line-svg {
    position: absolute;
    top: 1rem;
    left: 0;
    z-index: 0;
    /* border: 1px solid; */
}

/* .sdg {
    width: 3.5rem;
    height: 3.5rem;
    transform: skew(0deg);
    border-bottom-right-radius: 20px;
} */

.sdg {
    transform: skew(0deg);
    width: 4.8rem;
    margin-left: -7px;
}

#TargetsTable {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin-top: 3rem;
}
#TargetsTable th{font-family: "SoleilLight";}
.sdg01 {
    background-color: var(--sdg01);
}

.sdg02 {
    background-color: var(--sdg02);
}

.sdg03 {
    background-color: var(--sdg03);
}

.sdg04 {
    background-color: var(--sdg04);
}

.sdg05 {
    background-color: var(--sdg05);
}

.sdg06 {
    background-color: var(--sdg06);
}

.sdg07 {
    background-color: var(--sdg07);
}

.sdg08 {
    background-color: var(--sdg08);
}

.sdg09 {
    background-color: var(--sdg09);
}

.sdg10 {
    background-color: var(--sdg10);
}

.sdg11 {
    background-color: var(--sdg11);
}

.sdg12 {
    background-color: var(--sdg12);
}

.sdg13 {
    background-color: var(--sdg13);
}

.sdg14 {
    background-color: var(--sdg14);
}

.sdg15 {
    background-color: var(--sdg15);
}

.sdg16 {
    background-color: var(--sdg16);
}

.sdg17 {
    background-color: var(--sdg17);
}

.box {
    text-align: center;
    width: 3.5rem;
    height: 3.5rem;
}

.box.selected>span{
    font-size: 1.25rem;
    font-weight: bold;
}


.box span {
    line-height: 3.5rem;
    font-size: 1rem;
    /* font-weight: 600; */
    font-family: ProximaNova, proxima-nova, "Helvetica Neue", sans-serif;
}

#TargetsTable>thead>tr>th {
    text-align: left;
    font-size: 0.6rem;
    padding-left: 1rem;
    vertical-align: top;
}

#TargetsTable>tbody>tr>td {
    padding-left: 0.2rem;
}


.box.disabled {
    opacity: 0.3;
    background-color: #eeeeee;
}


/* .has-data{border: 1px solid #8e8e8e;} */
.has-data.sdg01 {
    border: 2px solid var(--goal1);
}

.has-data.sdg02 {
    border: 2px solid var(--goal2);
}

.has-data.sdg03 {
    border: 2px solid var(--goal3);
}

.has-data.sdg04 {
    border: 2px solid var(--goal4);
}

.has-data.sdg05 {
    border: 2px solid var(--goal5);
}

.has-data.sdg06 {
    border: 2px solid var(--goal6);
}

.has-data.sdg07 {
    border: 2px solid var(--goal7);
}

.has-data.sdg08 {
    border: 2px solid var(--goal8);
}

.has-data.sdg09 {
    border: 2px solid var(--goal9);
}

.has-data.sdg10 {
    border: 2px solid var(--goal10);
}

.has-data.sdg11 {
    border: 2px solid var(--goal11);
}

.has-data.sdg12 {
    border: 2px solid var(--goal12);
}

.has-data.sdg13 {
    border: 2px solid var(--goal13);
}

.has-data.sdg14 {
    border: 2px solid var(--goal14);
}

.has-data.sdg15 {
    border: 2px solid var(--goal15);
}

.has-data.sdg16 {
    border: 2px solid var(--goal16);
}

.has-data.sdg17 {
    border: 2px solid var(--goal17);
}

.box.has-data:hover {
    cursor: pointer;
}

.title {
    margin-left: 8rem;
    margin-top: 2.5rem;
    list-style: none;
}

.flag {
    height: 6.5rem;
   
}

.target-title {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 5px;
    margin-top: 5px;
}

.main-content {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #8e8e8e;
    line-height: 1.1rem;
}

.total-syrengies {    
    color:#32325D;
}
.total-tradeoffs{
    margin-bottom: 10px;
    color:#32325D;}
.title h1,
.title h4 {
    margin: 0;
}

.title>li:first-child {
    padding-top: 1rem;
}

.title>li:nth-child(2) {
    padding-top: 1.3rem;
}

.question {
    float: right;
    margin-top: -3.5rem;
    margin-right: 1rem;
    color: #6e6c6c;
}

@media screen and (max-width:1222px) {
    .question {
        margin-top: 0;
    }
}

.target-title.goal01 {
    color: var(--goal1);
}

.target-title.goal02 {
    color: var(--goal2);
}

.target-title.goal03 {
    color: var(--goal3);
}

.target-title.goal04 {
    color: var(--goal4);
}

.target-title.goal05 {
    color: var(--goal5);
}

.target-title.goal06 {
    color: var(--goal6);
}

.target-title.goal07 {
    color: var(--goal7);
}

.target-title.goal08 {
    color: var(--goal8);
}

.target-title.goal09 {
    color: var(--goal9);
}

.target-title.goal10 {
    color: var(--goal10);
}

.target-title.goal11 {
    color: var(--goal11);
}

.target-title.goal12 {
    color: var(--goal12);
}

.target-title.goal13 {
    color: var(--goal13);
}

.target-title.goal14 {
    color: var(--goal14);
}

.target-title.goal15 {
    color: var(--goal15);
}

.target-title.goal16 {
    color: var(--goal16);
}

.target-title.goal17 {
    color: var(--goal17);
}

@media screen and (max-width:1155px) {
    .box,.sdg {
        height: 3rem;
        width: 3rem;
    }
    .box span{line-height: 3rem;}
}
.legend-container{width:100%;float: left;padding-left: 17px;margin-bottom: 1.5rem;font-style: italic;font-size: 0.9rem;}
.legend-line{border-bottom: 4px solid;width: 20px;height:1px;display:inline-block;padding-top: 5px;vertical-align: top; margin-left:15px;}
.green-line{border-color: #2d9a47}
.red-line{border-color: #ea1d2d}
.gray-line{border-color: #8898AA}
.colors-legend{margin-left: 100px;}
.escwa-logo{width:20rem;}
.inff-logo{width:18rem;float:right;}
.radio-container{position:absolute;z-index: 2;width: 100%;}
.radio-container input{margin-left: 2rem;}

.close:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.modal-header .close {
    padding: 1rem;
    margin: -1rem -1rem -1rem auto;
}

button.close {
    padding: 0;
    background-color: transparent;
    border: 0;     
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

.close:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.close:focus, .close:hover {
    color: #000;
    text-decoration: none;
    opacity: .75;
}


.modal-dialog {
    max-width: 90%!important;
    margin: 1.75rem auto!important;
  }

  .modal-content {
    width: 100%!important;
  }