/* General container for tiles */
.tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Defines 4 columns in the grid */
    gap: 16px; /* Space between tiles */
    padding: 16px;
    box-sizing: border-box;
}

/* Default style for all tiles (inherits background from theme, no borders) */
.tile {
    background-color: inherit; /* Keeps the default background from theme */
    border: none; /* No borders on tiles */
    text-align: center;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow for visual clarity */
    transition: transform 0.2s ease-in-out;
}

/* Full-width tile style (applied dynamically via JS) */
.full-width-tile {
    grid-column: span 4; /* Makes the tile span across all 4 columns */
    padding: 24px; /* Extra padding to emphasize the full-width tile */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Stronger shadow for emphasis */
}

/* Optional: Hover effect for all tiles */
.tile:hover {
    transform: scale(1.05); /* Slight zoom-in effect */
}

/* Image inside a tile */
.tile img {
    max-width: 80px;
    margin-bottom: 16px;
}

/* Text inside a tile */
.tile p {
    font-size: 16px;
    font-weight: bold;
    color: #005eb8; /* Connectbase blue */
    margin: 0;
}

/* Optional: Make the title bold and change color */
.tile h2 {
    font-size: 18px;
    color: #005eb8;
}

/* Tile container adjustments for responsiveness (if needed) */
@media (max-width: 768px) {
    .tiles {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on smaller screens */
    }
}

@media (max-width: 480px) {
    .tiles {
        grid-template-columns: 1fr; /* 1 column on mobile screens */
    }
}





/* Primary color for links, buttons, sidebar, portal-header etc */
a,.text-primary,.btn-link,.pagination>li>a,.pagination>li>span,.publication-contents a:hover {
    color:#005eb8;
}

.bg-primary,.btn-primary,.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover,.pagination>.active>span:hover,.pagination>.active>a:focus,.pagination>.active>span:focus,.portal-single-publication .publication-icon {
    background-color:#005eb8;
}


.portal-header::before{
  background-color: #005eb8;  

}

.inner .search-field::placeholder{
color:rgba(0, 0, 0)
}


.btn-primary,.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover,.pagination>.active>span:hover,.pagination>.active>a:focus,.pagination>.active>span:focus {
    border-color:#005eb8;
}

/* Hover primary color */
a:hover,a:focus,.btn-link:hover,.btn-link:focus {
    color: #005eb8;
}

.nav-site-sidebar li a:focus{
    background-color: #005eb8;
}

.toc.nav.nav-site-sidebar li a:focus,.toc.nav.nav-site-sidebar li a:hover{
	background-color:#4c8ecd;
}

a.text-primary:hover,a.text-primary:focus,.btn-primary:hover,a.bg-primary:hover,a.bg-primary:focus,.btn-primary:focus,.btn-primary.focus,.btn-primary:active,.btn-primary.active,.open > .dropdown-toggle.btn-primary,.btn-primary:active:hover,.btn-primary.active:hover,.open>.dropdown-toggle.btn-primary:hover,.btn-primary:active:focus,.btn-primary.active:focus,.open>.dropdown-toggle.btn-primary:focus,.btn-primary:active.focus,.btn-primary.active.focus,.open>.dropdown-toggle.btn-primary.focus {
    background-color:#005eb8;
}

.btn-primary:focus,.btn-primary.focus,.btn-primary:hover,.btn-primary:active,.btn-primary.active,.open > .dropdown-toggle.btn-primary,.btn-primary:active:hover,.btn-primary.active:hover,.open>.dropdown-toggle.btn-primary:hover,.btn-primary:active:focus,.btn-primary.active:focus,.open>.dropdown-toggle.btn-primary:focus,.btn-primary:active.focus,.btn-primary.active.focus,.open>.dropdown-toggle.btn-primary.focus {
    border-color:#005eb8;
}

/* Secondary color - For portal search button, publication count */
.portal-header .portal-search button,.publication-contents h4 span {
    background-color:#ffb81c;    
}
.portal-header .portal-search button:hover{
     background-color:#cc9316;
}

/* Tertiary color - For pager */
.pager li>a,.pager li>span {
    color:#005eb8;   
}

.pager li>a:hover,.pager li>span:hover {
    background-color:#005eb8;
}    

/*Portal Header Start*/
portal-header{
	color:#005eb8;
	height:350px;
	padding:30px 15px;
	position:relative;
	text-align:center
}

@media (min-width:768px){
	.portal-header{padding:30px 50px}
}

.portal-header .logo-link{
	display:block
}

@media (min-width:768px){
	.portal-header .logo-link{text-align:left}
}

.portal-header .logo{
	height:90px;
	margin-bottom:20px
}

@media (min-width:768px){
	.portal-header .logo{margin-bottom:0;height:80px}
}

.portal-header h1{
	font-size:28px;
	margin-bottom:0.835em;
	color:#005eb8
}

@media (min-width:768px){
	.portal-header h1{font-size:36px}
}

.portal-header .portal-search .search-field{
	border-radius:4px 0 0 4px;
	font-size:16px;
	width:60%;
	display:inline-block;
	color:#000;
	vertical-align:middle!important
}

@media (min-width:992px){
	.portal-header .portal-search .search-field{width:500px}
}

.portal-header .portal-search button{
	background-color:#ffb81c;
	border-radius:0 4px 4px 0;
	border:0;
	padding:12px 18px;
	font-size:16px;
	width:52px;
	display:inline-block;
	color:#fff;
	-webkit-transition:background-color 0.2s ease-out;
	-o-transition:background-color 0.2s ease-out;
	transition:background-color 0.2s ease-out
}

.portal-header .portal-search button:hover{
	color:#fff;background-color:#cc9316
}

.portal-header:after,.portal-header:before{
	content:"";top:0;left:0;bottom:0;right:0;position:absolute
}

.portal-header:before{
	background-color:#005eb8;
	z-index:-10
}

.portal-header::after{
    z-index: -5;
	background-size: cover;
    opacity: .7;
    filter: grayscale(100%);
}

.portal-header .search-page-link{
	margin-top:10px;
	font-size:0.875em
}

.portal-header .search-page-link a{
color:rgba(255, 255, 255, 0.8)
}

/*Site sidebar and search text box*/
.search-field::-webkit-input-placeholder{
	color:rgba(0, 0, 0, 1)
}

.search-field:-ms-input-placeholder{
	color:rgba(0, 0, 0, 1)
}

.search-field::-ms-input-placeholder{
	color:rgba(0, 0, 0, 1)
}

.site-sidebar .search-field::placeholder{
color:rgba(255, 255, 255)
}

.site-sidebar{
	background-color:#081f2c;
}

.nav-site-sidebar li a{
	color:rgba(255, 255, 255);
	display:block;
	-webkit-transition:background-color 0.2s ease-out;
	-o-transition:background-color 0.2s ease-out;
	transition:background-color 0.2s ease-out
}

.nav-site-sidebar .active>a{
	color:#fff;
	background-color:#005eb8
}

.nav-site-sidebar ul{
	list-style:none;
	padding:0;
	display:none
}

.nav-site-sidebar .opened>ul{
	display:block
}

.nav-site-sidebar ul a{
	color:rgba(255, 255, 255);
	padding:5px 15px 5px 30px;
	font-size:0.9em
}

.nav-site-sidebar ul ul a{
	padding-left:45px
}

.nav-site-sidebar ul ul ul a{
	padding-left:60px
}

.nav-site-sidebar ul ul ul ul a{
	padding-left:70px
}

.nav-site-sidebar ul ul ul ul ul a{
	padding-left:80px
}

.nav-site-sidebar ul ul ul ul ul ul a{
	padding-left:90px
}

.guibutton {
  font-size:11pt;
  font-family: "Verdana";
  font-weight: 900;
  color: #0f0f0f;
}

.guilabel {
	font-size:11pt;
	font-style: italic;
	font-weight: normal;
    color: #005EB8;
}



/* Adjust table header and data formatting */

.th {
    font-size:11pt;
    font-weight: bold;
    color: #005EB8
}

th, td {
    padding: 8px 10px!important;
    vertical-align:top;
}



/* Adjust colour for all headings */

h1, h2, h3, h4, h5, h6 {
    color:#005eb8
}


/* Format guibutton element */


.portal-single-publication a {    
    color: #005eb8;
    background-color: #EAEAEA;
}

.portal-single-publication .publication-icon {
    background-color: #005eb8;
}

/*Featured Content Section*/

.featured-content-label {
    display: none;
}

.portal-contents .featured-content {
    display: none;
}

.portal-contents .inner {
    display: none;
}

.email {
	font-size:11pt;
}


/* Adjust inline image alignment */

.inlinemediaobject img:not([height]):not([width]) {
    height: 80%;
    vertical-align: top;
}
.inlinemediaobject {
    vertical-align: top;
}



/* This part changes the text margin of text within the admonition */
.warning > p,
.note > p,
.important > p,
.notice > p,
.caution > p,
.danger > p,
.tip > p{
        margin-left: 60px!important;
}

.note h3 {
	background-color:#005EB8;
}

.tip h3 {
	background-color:#005EB8;
}

.notice h3 {
	background-color:#919191;
}

.notice {
	background-color: #f1f0f0;
}



.important h3 {
	background-color:#919191;
}

.important {
	background-color: #f1f0f0;
}

/* This part applies margin around media objects e.g. images */

.mediaobject img {
    border: 2px solid #005EB8;
}


/* This part changes the color of procedure numbering color */

.theme1 .procedure > li::before{
    background-color: #005EB8 ;
}





.autocomplete-item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}
.autocomplete-item:hover {
  background-color: #f0f0f0;
}