/* NTFC country profile. Loaded only on node 42143. */

.tfc-image-container {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 300px; color:#CC3F73}

/* === NTFC country-detail responsive layout (page content) === */
.field--name-body,
.col-md-9.content,
#content.col-md-9 {
  max-width: 100%;
  overflow-x: visible;
}

.field--name-body .row,
.col-md-9.content .row,
#content .row {
  max-width: 100%;
}

.field--name-body [class*="col-"],
.col-md-9.content [class*="col-"],
#content [class*="col-"] {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Topic tabs */
#buttons.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}
#buttons .col-md-2 {
  flex: 0 0 50%;
  max-width: 50%;
  width: 50%;
  float: none;
  padding: 4px !important;
  box-sizing: border-box;
}
#buttons .col-md-2 > div,
#buttons div[id^="tTopic"] {
  height: auto !important;
  min-height: 64px;
  max-height: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  padding: 10px 6px 14px !important;
  font-size: clamp(10px, 2.8vw, 14px) !important;
  line-height: 1.2 !important;
  box-sizing: border-box;
  overflow: visible;
  word-break: break-word;
  hyphens: auto;
  position: relative;
}
#buttons .col-md-2 > div:hover,
#buttons div[id^="tTopic"]:hover {
  font-size: clamp(10px, 2.8vw, 14px) !important;
}
#buttons #tTopic6 {
  padding-top: 10px !important;
}
#buttons .col-md-2 > div br {
  display: none;
}

@media (min-width: 576px) {
  #buttons .col-md-2 {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    width: 33.333%;
  }
}
@media (min-width: 992px) {
  #buttons .col-md-2 {
    flex: 0 0 16.666%;
    max-width: 16.666%;
    width: 16.666%;
  }
  #buttons .col-md-2 > div {
    min-height: 80px;
    font-size: clamp(11px, 1.1vw, 15px) !important;
  }
  #buttons .col-md-2 > div br {
    display: inline;
  }
}

/* Contact / topic content tables */
.tContent,
.tContent .row,
.tContent .col-md-6 {
  min-width: 0;
  max-width: 100%;
}
.tContent .col-md-6,
.tContent a {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.tContent .row {
  margin-left: 0;
  margin-right: 0;
}
.tContent .row > [class*="col-"] {
  padding-left: 8px;
  padding-right: 8px;
}
@media (max-width: 767.98px) {
  .tContent .row > .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
  .tContent .row > .col-md-6.value2Undefined,
  .tContent .row > .col-md-6.value2Defined,
  .tContent .row > .col-md-6.isArray,
  .tContent .row > .col-md-6.notArray {
    font-weight: 600;
    padding-top: 6px;
  }
}

/* Score / tools sidebar */
.row > .col-md-3 {
  min-width: 0;
  overflow: visible;
}
.tfc-image-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
  width: 100% !important;
  margin-left: auto;
  margin-right: auto;
  color: #CC3F73;
}
.tfc-image-container img {
  width: 100%;
  height: auto;
  max-width: 300px;
}
.tfc-image-container .text-container {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1.2;
  width: 70%;
}
.tfc-image-container .tfcScore {
  font-weight: bold;
  padding-top: 8px;
  cursor: pointer;
  font-size: clamp(22px, 6vw, 40px);
}
.tfc-image-container .hundred {
  font-size: clamp(22px, 6vw, 40px);
  font-weight: bold;
}
@media (max-width: 991.98px) {
  .col-md-9.content,
  #content.col-md-9 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
  .row > .col-md-3 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    margin-top: 1rem;
  }
  .tfc-image-container {
    max-width: 260px;
  }
}

/* Country select */
#listOfCountries + .select2-container,
.select2-container {
  max-width: 100% !important;
  width: 100% !important;
}




/* Topic tab arrows: sit centered under the active colored box */
#buttons .col-md-2,
#buttons .col-md-2 > div,
#buttons div[id^="tTopic"] {
  overflow: visible !important;
  position: relative;
}
#buttons .arrow-down {
  content: " ";
  position: absolute !important;
  top: 100% !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 10px solid transparent !important;
  border-right: 10px solid transparent !important;
  border-bottom: none !important;
  z-index: 2;
  pointer-events: none;
}
#buttons #tTopic1 > .arrow-down { border-top: 10px solid #5791CF !important; }
#buttons #tTopic2 > .arrow-down { border-top: 10px solid #FFA500 !important; }
#buttons #tTopic3 > .arrow-down { border-top: 10px solid #ED6B78 !important; }
#buttons #tTopic4 > .arrow-down { border-top: 10px solid #94C21F !important; }
#buttons #tTopic5 > .arrow-down { border-top: 10px solid #FABA00 !important; }
#buttons #tTopic6 > .arrow-down { border-top: 10px solid #6B5888 !important; }

/* Fix left clipping on small screens */
.field--name-body {
  overflow-x: visible !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  box-sizing: border-box;
}
.field--name-body .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100%;
}
.field--name-body .row > [class*="col-"] {
  overflow: visible !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.col-md-9.content,
#content.col-md-9 {
  overflow: visible !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.row > .col-md-3 {
  overflow: visible !important;
}
#checkboxes,
.tContent,
#buttons {
  padding-left: 0;
  margin-left: 0;
  max-width: 100%;
  box-sizing: border-box;
}
#checkboxes .row > .col-md-3,
#checkboxes .row > [id^="cb"],
#checkboxes div[id^="cb"] {
  overflow: visible !important;
}
@media (max-width: 991.98px) {
  .field--name-body {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Checkboxes panel: keep icon + label aligned on small screens */
#checkboxes .row[style*="display: none"],
#checkboxes .row[style*="display:none"] {
  display: none !important;
}
#checkboxes .row {
  display: flex;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 12px;
}
#checkboxes .row > .col-md-3,
#checkboxes .row > [id^="cb"] {
  flex: 0 0 40px !important;
  max-width: 40px !important;
  width: 40px !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#checkboxes .row > .col-md-9 {
  flex: 1 1 auto !important;
  max-width: none !important;
  width: auto !important;
  float: none !important;
  padding-left: 0.5rem !important;
  padding-right: 0 !important;
  line-height: 1.3;
}
#checkboxes div[id^="cb"] {
  height: 35px !important;
  width: 35px !important;
  max-width: 35px !important;
  background-position: center !important;
  background-size: contain !important;
  margin: 0;
}
/* Story overlays on sustainability */
.story_caption,
.story_caption2 {
  max-width: 40%;
  font-size: clamp(0.7rem, 2.5vw, 1.2rem) !important;
}
.story_img {
  max-width: 100%;
  height: auto !important;
}


.tfc-image-container img {width: 100%}
.tfc-image-container .text-container {position: absolute;  top: 30%;  left: 50%;  transform: translate(-50%, -50%);  text-align: center;line-height:24px}
.tfc-image-container .tfcScore {font-weight: bold;padding-top: 15px;cursor:pointer;font-size:40px}
.tfc-image-container .pointsover {text-decoration:underline;padding-bottom:5px}
.tfc-image-container .hundred {font-size:40px;font-weight: bold;}

#buttons {color:white; font-weight:bold}
#buttons .col-md-2 { padding-bottom:10px;padding-right:5px;padding-left:5px;position:relative}
#buttons .col-md-2 > div {height:auto;min-height:64px; text-align: center;vertical-align: middle; /*padding-bottom:30px*/; padding-top:15px; cursor: pointer; opacity: 100%}
#buttons .col-md-2 > div.selected {opacity: 100%}
#buttons .col-md-2 > div:hover {font-size:16px; opcity:100%}
#buttons .col-md-2:nth-of-type(1) {padding-left:0px}
#buttons .col-md-2:nth-of-type(6) {padding-right:0px}


/*#buttons .col-md-2:nth-of-type(6n) {padding-left:5px;padding-right:15px}
#buttons .col-md-2:nth-of-type(6n+5) {padding-right:5px;padding-left:15px}*/

#checkboxes .row {padding-bottom: 20px;text-align: left;}
div[id^="cb"] {height:35px;  background-position: right;}
div.enabledCb { background: url(/sites/default/files/2024-07/EnabledCB.png) no-repeat right !important;}
.story_img {
    height: 100%;
    /*transform: translateX(-4rem);  */
    backface-visibility: hidden; 
 }
 
.story_caption {
    position: absolute; 
    top: 50%; 
    left: 19%; 
    transform: translate(-50%, -50%); 
    font-size: 1.2rem; 
    text-align: center;  
    backface-visibility: hidden; 
	border-radius:50%;
	width:20%;
	height:65%
}

.story_caption2 {
    position: absolute; 
    /*top: 51%; */
	bottom: -85px;
    left: 49%; 
    transform: translate(-50%, -50%); 
    font-size: 1.2rem; 
    text-align: center;  
    backface-visibility: hidden; 
	border-radius:50%;
	width:20%;
	height:65%
}

div[id^="tTopic"] { padding-top:25px !important}
div[id^="tTopic"].hiddenAfter:after {content: ""}

#tTopic1, #t1Title {background-color:#5791CF}
#tTopic2, #t2Title {background-color:#FFA500}
#tTopic3, #t3Title {background-color:#ED6B78}
#tTopic4, #t4Title {background-color:#94C21F}
#tTopic5, #t5Title {background-color:#FABA00}
#tTopic6, #t6Title {background-color:#6B5888}

#tTopic6 {padding-top:35px !important}
div[id$="Title"] {color:#fff;padding-left:10px}


#tTopic1>.arrow-down  {border-top: 10px solid #5791CF;}
#tTopic2>.arrow-down {border-top: 10px solid #FFA500;}
#tTopic3>.arrow-down  {border-top: 10px solid #ED6B78;}
#tTopic4>.arrow-down  {border-top: 10px solid #94C21F;}
#tTopic5>.arrow-down  {border-top: 10px solid #FABA00;}
#tTopic6>.arrow-down  {border-top: 10px solid #6B5888;}


.arrow-down {
  content: " ";
  position: absolute;
  right: 50%;
  top: 90px;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: none;
  display:none
}

.row.lineempty { height:5px}
.row.line, .row.lineempty { border-bottom: 1px dotted; margin-left:0px;margin-right:0px}
.content .row { margin-left: 0px; margin-right: 0px; }
.caret {color: #5490CE}
.bootstrap-select>.dropdown-toggle { background-color:#fff;font-size: 14px;font-weight: 100; border-color: #000}

#topic2, #topic3, #topic4, #topic5, #topic6, #TFCImage { display: none; }
#tfc-download-row, [data-tfc-url], [data-tfc-topic], [data-tfc-download] { cursor: pointer; }
[data-tfc-download] { display: flex; align-items: center; }