:root {
  --color-fondo: #00818B;
  --background:#ffffff;

--webPrimaryColor:#334F9E;
--webPrimaryColorInv:#f5f5f5;

--webAlternateColor:#D9DCEB;
--webAlternateColorInv:#334F9E;



--backgroundMobile:#f8f9fa;
--backgroundRowTotal: #E8E8E8;
--colorRowTotal:#334F9E;
--groupBackground: #E8E8E8;
--groupColor: #334F9E;

  /* Step color */
  --titlecolor:#334F9E;
	
	/* Sample buttons */
	--btnBckColor:#f1f3ff;
	--btnColor:#ef3340;
	--btnColorActive: #334F9E;
    --btnBorderColor:white;
	--boxedCheckWidth:135px;
	
	/* Btn bar buttons */
	--btnMnuBorderColor:#334F9E;
	--btnMnuBackColor:#334F9E;
	--btnMnuColor:#f5f5f5;
	--ButtonRoundFontSize:0.9rem;
	 
	--FontFamily:   sans-serif;
	--FontFamilyTitlesXS:   sans-serif
	--FontFamilyTitles:  sans-serif
	--roundFontSize:0.9rem;
 
  --defaultBaseSize: 12px; 
  
  
  --lh: 1.5rem;

  
  --h1: clamp(2rem, 5vw, 3rem);  
  --h2: clamp(1.5rem, 4vw, 2.5rem);
  --h3: clamp(1.25rem, 3.5vw, 2rem);
  --h4: clamp(1.1rem, 3vw, 1.5rem);
  --h5: clamp(1rem, 2.5vw, 1.2rem);
  --h6: clamp(0.9rem, 2vw, 1rem);  
 

	
} 
 
body {
  font-size: var(--defaultBaseSize);
	line-height: var(--lh);
	font-family: var(--FontFamily);
 
	background-color: var(--background);
	margin:8px;
	overflow-x:hidden;
}
/* Adaptive Headings */
h1 { font-size: var(--h1); font-family:  sans-serif; font-weight: 700; }
h2 { font-size: var(--h2); font-family: sans-serif; font-weight: 600; }
h3 { font-size: var(--h3); font-family:  sans-serif; font-weight: 600; }
h4 { font-size: var(--h4); font-family:  sans-serif; font-weight: 500; }
h5 { font-size: var(--h5); font-family: sans-serif; font-weight: 500; }
h6 { font-size: var(--h6); font-family:  sans-serif; font-weight: 400; }



/* BASE SIZE FOR REM*/
html {
	font-size:var(--defaultBaseSize);
}
 
/* @media (max-width: 1200px) {  */
/* 	html { */
/*       font-size:12px; */
/*   } */
/* } */


.custom-navigate {
    background-color: var(--webAlternateColor) !important;
    color: var(--webAlternateColorInv) !important;
}

 
/* Headings - Default for mobile */
@media (max-width: 768px) { 
	body {
	  
		background-color: var(--backgroundMobile);
	}
	 
 	.container-fluid {
      padding: 10px;
  }
  
}

.rtl {
  direction: rtl;
}

/* BANNER */
.top-banner {
	width: 100%;
	overflow: hidden;
}

.top-banner img {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	display: block;
}
@media (max-width: 1200px) {
	.top-banner img {
		width: 100%;
	}
}

/* CARDS FOR HOME SECTIONS */
.card {
    border-radius: 8px;
    margin-bottom: 10px;
}

 
/* BUTTONS ROUNDS */
.list-group-flush .list-group-item {
    font-weight:bold;
    font-size:var(--roundFontSize);
    position: relative;
    display: block;
    padding: .75rem 0.75rem;
    margin-bottom: 5px;
    margin-top: 5px;
    background-color: var(--btnBckColor);
    border: 1px solid var(--btnBorderColor);
}

.list-group-item-action:focus, .list-group-item-action:hover {
    color: #ffffff;
    background-color: var(--btnColor);
}   
.list-group-item.active {
    color: #ffffff;
    background-color: var(--btnColor);
}
.list-group-item-active {
    color: #ffffff;
    background-color: var(--btnColor);
}
.list-group-item+.list-group-item.active {
    margin-top: 5px;
}
.odaBtnBig {
	font-size: 1rem;
}

a:hover {
    color: var(--bs-gray-900);
}

a {
    color: var(--webPrimaryColor);
    text-decoration: underline;
}
ul, ol {
    list-style-position: inside; /* Ensures the bullet aligns with the text */
}
li p {
    display: inline;
}
ol p {
    display: inline;
}
#PAGE img {
    margin: 1rem; /* Bootstrap's m-3 equivalent */
}

/* BUTTONS SAMPLES */

.boxed-check-group .boxed-check .boxed-check-input:checked + .boxed-check-label{
    border: 1px solid #000;
    background-color:var(--btnBckColor);
    color:#000;
}
.boxed-check-group .boxed-check .boxed-check-input:not(:disabled) + .boxed-check-label:hover{
    border: 0px solid var(--btnColor);
    background-color:var(--btnColor);
    color:#ffffff;
}
.boxed-check-group .boxed-check .boxed-check-label {
    display: block;
    background-color: var(--btnBckColor);
    border: 1px solid var(--btnBorderColor);
    padding: 0.1rem 0.3rem;
    margin: 0.1rem 0.1rem;
    border-radius: .25rem;
    cursor: pointer;
}
.boxed-check-label {
	padding:.2rem .5rem;
	font-size: 0.8rem;
}
.boxed-check-inline{
	width: var(--boxedCheckWidth);
}

/* LI SAMPLES FOR XS */
.country-list {
/*     max-height: 300px; */
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px;
    background: white;
}


/* MENUS BUTTONS */
/* Ensure dropdown menus are hidden by default */
.dropdown-menu {
    display: none;
}

/* Show dropdown menu when hovering over the parent */
.nav-item.dropdown:hover > .dropdown-menu {
    display: block;
}

/* Submenus styling */
.dropdown-submenu {
    position: relative;
}

/* Position nested submenu */
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -0.5rem;
    display: none;
}


/* Show submenu when hovering */
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

/* Improve visual style */
.navbar .dropdown-menu {
    background-color: var(--bs-light); /* Use your defined color */
    border-radius: 6px;
}

.navbar .dropdown-item {
    color: var(--bs-gray-900);
}

.navbar .dropdown-item:hover {
    background-color: var(--bs-gray-900);
    color: var(--bs-light);
}
.navbar-custom .navbar-nav .nav-link,
.navbar-custom .navbar-nav .nav-link:hover,
.navbar-custom .navbar-nav .nav-link:focus,
.navbar-custom .navbar-nav .nav-link:active {
  color: #fff !important;
}



@media (max-width: 576px) {
    .btn-group-custom {
        flex-direction: column;
    }
}
/* BUTTONS */
@media (max-width: 1200px) {
	.odaBtn,odaBtnBar {
		font-size:0.9rem;
		font-weight:bold; 
	}

}
@media (min-width: 1201px) {
	.odaBtn,odaBtnBar {
		font-size:1rem;
		font-weight:bold; 
	}
}

/* SPECIAL INDICATOR GROUP BUTTONS */

.btn-group-indicator {
    background-color: #CB347B;  
    color: white;                
    border: none;                
    padding: 2px 4px;         
    border-radius: 5px;          
    transition: all 0.3s ease-in-out;
}

.btn-group-indicator:hover {
    background-color: #A42D67;   
}

.btn-group-indicator.button-active {
    background-color: #8A2458;  /* Darker pink for active state */
    color: #FFD700;             /* Gold text for emphasis */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);  /* Subtle shadow */
    font-weight: bold;           /* Make text bold */
}
 
  
/* EQUIV ROUNDS BUTTONS */
.btn-odasmall {
    padding: .2rem .4rem ;
    font-size: .700rem ;
    line-height: 1.5 ;
    border-radius: .2rem ;
}

/* INDEX LEVELS */
.oda-idxsection-1 {
	border-left:3px solid #b42a2d;
}
.oda-idxsection-2 {
	border-left:3px solid #ea562c;
	padding-left:20px !important;	 
}
.oda-idxsection-3 {
	border-left:3px solid #23d1a0;
	padding-left:20px !important;	 
}
.oda-idxlevel-1 {
	font-size:1rem;
	font-weight:bold  ;
}
.oda-idxlevel-2 {
	font-size:0.9rem;
	font-weight:bold  ;
}
.oda-idxlevel-3 {
	font-size:0.8rem;
	font-weight:bold  ;
}

.oda-idx-item{
	font-size:1rem;
	border-left:3px solid #c0c0c0!Important;
	padding-left:20px !important;	 
	padding-top:10px !important;
	padding-bottom:10px !important;
	padding-right:10px !important;
	font-weight:normal !important;
	border-top:0px !important;
	border-right:0px !important;
	border-bottom:1px solid rgba(0,0,0,.125) !important;

}

/* ODA MENUS BUTTONS */
.btn-menus {
    border: none;
    font-size: 1rem;
    padding: 5px 9px;
    border-radius: 6px;
		color:var(--btnMnuColor);
		background-color:var(--btnMnuBackColor);
}

.btn-menus:hover {
		color:var(--btnMnuBackColor);
		background-color:var(--btnMnuColor);
}
.btn-menus:active, .btn-menus-active {
		color:var(--btnMnuColorSelected);
		background-color:var(--btnMnuBackColorSelected);
}

  
  
/* Index searh */  
@media (max-width: 768px) {
	 #ODA_INDEX_TOOLBAR {
        display: flex;
        flex-wrap: nowrap; /* Prevents wrapping */
    }

    .input-group {
        flex: 1; /* Makes search input take remaining space */
        max-width: 75%; /* Adjust width to fit Reset button */
    }

    #BTN_IDX_CLEAR {
        flex-shrink: 0; /* Prevents button from shrinking */
    }
    .form-check-inline {
        font-size: 14px;  
    }
}
.yellow-marked {
	background-color:yellow;
}


.toolbarLbl {
	font-size:1rem;
}
.odaToolbarBtn {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ddd;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.odaToolbarBtn:hover {
    background-color: #f8f9fa;
    transform: scale(1.1);
}


.text-justified {
	text-align:justify;
}


input.radio-md {
	width: 1.5rem;
   	height:1.5rem;	
}
.radio-lbl-md {
   	margin-left: 10px;	
   	font-size: 1rem;
}

/* PROGRESS FASE */
.atenuado {
  opacity: 0.5 !important;
  pointer-events: none;
}
 

/* GRIDBOX */
div.gridbox_dhx_web.gridbox table.obj tr td {
	font-size:1rem;
}
 
div.gridbox_dhx_web.gridbox table.hdr td {
    border-width: 0 1px 0 0;
    border-top: 1px solid #dbdbdb;
    border-right-color: #dbdbdb;
    padding: 7px 0 8px 0;
    background-color: #f4f4f4;
   	font-family: var(--FontFamily);
    font-size:1rem;
    color: #000;
    vertical-align: top;
    text-align: left;
    position: relative;
}
div.gridbox div.ftr td {
  font-size: 1rem ;
}

div.gridbox_dhx_web.gridbox table.obj tr td {
	font-family: var(--FontFamily);
}
div.gridbox_dhx_web.gridbox table.obj.row20px tr td{
	font-family: var(--FontFamily);
}
 
div.gridbox div.ftr td {
    padding: 0;
    padding-left: 10px;
    padding-right: 5px;
    border-top: 1px solid gray;
    border-right: 1px solid gray;
    background-color: var(--backgroundRowTotal) !important;
    font-style: italic;
    font-family: var(--FontFamily) !important;
    color: var(--colorRowTotal);
    overflow: hidden;
}


div.gridbox {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

@media (max-width: 768px) { 
	div.gridbox_dhx_web.gridbox table.obj tr td {
		font-size:0.8rem;
	}
	 
	div.gridbox div.ftr td {
	  font-size: 0.8rem ;
	}
	  
}



.ODAHeadLink {
	cursor:pointer;
	display:block;
}
.ODAHeadLink:hover {
	cursor:pointer;
	display:block;
	background-color:lightGray;
}
.ODAHeadGroup {
	font-weight:bold;
	display:block;
	text-align:center;
}
.odaGroupStyle {
	background-color: var(--groupBackground);
	color: var(--groupColor);
}

/*****************************
WEB STYLES
********************************/
.webPrimaryBackground {
  background-color: var(--webPrimaryColor) !important;
  color: var(--webPrimaryColorInv) !important;
  
  background-image:   var(--webPrimaryBackgroundUrl)  ;
  background-repeat: repeat;
  
  /* Increase background size to create spacing */
  background-size: 150px 150px; 
  
  /* Optional: center the image in each repetition */
  background-position: center;
  
  position: relative;
}


/*****************************
SNIPPET COUNTRY LIST
********************************/

.country-list-container {
    max-height: 60vh; /* Ensures it does not exceed 60% of the viewport height */
    overflow-y: auto; /* Enables vertical scrolling */
/*     border: 1px solid #ddd; Optional: Adds a subtle border */
    padding: 5px; /* Optional: Adds some spacing */
}

@media (max-height: 600px) {
    .country-list-container { max-height: 40vh; }
}

@media (max-height: 400px) {
    .country-list-container { max-height: 30vh; }
}

.blockquote {
    margin-bottom: 1rem;
    font-size: 1rem;
}

.equal-img {
    width: 100%;           /* Full width */
    height: 220px;         /* Set a fixed height */
    object-fit: cover;     /* Crop the image while maintaining aspect ratio */
    object-position: center; /* Center the image within the frame */
}
/*****************************
SNIPPET NEWS
********************************/
 
    /* Ensure all images have the same height */
.news-fixed-image {
         width: 100%; /* Ensures it doesn't overflow */
    height: 230px; /* Fixed height */
    object-fit: cover; /* Ensures the image maintains aspect ratio while filling */
    object-position: center; /* Centers the image */
    display: block;
    margin:0 !important;
}


.card-title-wrapper {
  height: 70px;
  overflow: hidden;
  position: relative;
}
.card-title-wrapper-long {
  height: 160px;
  overflow: hidden;
  position: relative;
}
.card-title-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px; /* adjust the height of the fade as needed */
  /* Adjust the gradient colors to match your card background */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%);
}
@media (hover: hover) and (pointer: fine) {
  .news-equal-card:hover,
  .news-equal-card:focus-within {
    box-shadow: 0 0 0 2px #ccc !important;
  }
}

.white {
    color: white !Important;
}
 
 

/* For contents-web pages:    */
.social-icons {
	z-index:200;	
}


 
.carousel .card-img-top {
  object-fit: contain;
  width: 90%;
	}
.carousel .card-body {
  min-height: 100px; /* optional to align text zones */
}

.carousel-indicators [data-bs-target] {
  background-color: #333;       /* dark gray dot */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 1;
}

.carousel-indicators .active {
  background-color: #007bff;    /* active = Bootstrap primary */
}

/* .carousel-indicators { */
/*   position: static; */
/*   margin-top: 1rem; */
/*   justify-content: center; */
/* } */

.people-photo-card {
	max-width:130px;
}

.wvs-box-img {
  max-height: 150px;
  object-fit: contain;
}