<!-- Afegir o eliminar "hidden" al tag següent per amagar o mostrar les alertes --><style>

</style>

<div class="hidden grid-alert">
	
  <div style="width:auto;position:absolute;left:20%;top:6%">
		id="alert-icon">
    <i class="fas fa-bullhorn" style="font-size:4em; color:#2A7886"></i>
	  </div>
	
  <div styleid="margin:2vh 25% 0 26%;">
		"alert-message">
   <div class="">
    <h3>2022/04/22 UPDATE:</h3>
    <p>Dear CSUC HPC users, we have to perform a maintenance operation in our /scratch storage starting on <strong>Thursday October 11th</strong>. </p>
		<p>Unfortunately, the infrastructure <strong>is not operational</strong> during the intervention..</p>
		<p>We thank your for your patience and strive to restore service as soon as possible.</p>
	</div></p>
    <p>We are experiencing technical problems that are affecting the access to the cluster. We are working hard to resolve the issue as soon as possible. Thank you for your patience and apologise for the inconvenience.</p>
   </div>

    <p class="hidden">
      <strong>Maintenance:</strong>
      CPD upgrade intervention on Friday 26/02/2021 at 21:00h (UTC+1).
      <a href=#>more</a>
    </p>
    <p class="hidden">
      <strong>Training:</strong>
      "Jornada de formació sobre l'ús del servei de càlcul" on Thursday 16/12/2021 at 10:00h (UTC+1).
      <a href="https://csuc.cat/ca/agenda/jornada-formacio-servei-calcul">More information.</a>
    </p>

  </div>

</div>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<style>
	.nodeco { text-decoration

 /*
 *  Remove items from Atlassian for a cleaner Portal aspect.
 */

  .ia-splitter-left, #main-header, .page-metadata, #likes-and-labels-container, #comments-section, #footer, .aui-nav li { display: none !important; }
  .ia-splitter { border:none !important }
  #editPageLink { display:inline-block !important; }
  #header { position: absolute !important; width: 100vw  .nodeco i { text-align:center; font-size:6em; color:#2A7886 }
	.flex { display:flex; }
	.column { flex-direction:column; }
	.justbwn { justify-content:space-between; }
	.justrnd { justify-content:space-around; }
	a:hover i { color:rgba(42,120,134,0.9) !important; }
    .ia-splitter-left, #main-header, .page-metadata, #likes-and-labels-container, #comments-section, #footer { display: none !important; }
    #editPageLink { display:inline-block !important; }
    #main { margin:0 !important; height:94.5vh !important; border:none !important }
    .ia-splitter { border:none !important }
    h1:last-child { font-size: 3em !important; font-weight:bold !important; margin-top: 10% !important; }
</style>

<span class="flex justbwn">
	!important; z-index: 99 !important; }
  #main { margin:0 !important; width:100vw !important; height: 100vh !important; padding-top: 10vh !important;  border:none !important; }
  #content { padding: 0 !important; }
  #CSUCHPCPortal-HPCPORTAL { font-size: 3em !important; font-weight:bold !important;}


 /*
 *  Style HPC alert items.
 */

  .grid-alert {
    display: grid;
    grid-template-columns: 1fr 1fr 7fr 2fr;
    grid-gap: 0 10px;
    grid-template-areas: ". a b ."
  }
  #alert-icon { grid-area: a;}
  #alert-message { grid-area: b;}

@media (max-width: 600px) {
  .grid-alert {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
    grid-gap: 10px 0;
    grid-template-areas: "a"
                         "b";
    justify-self: center;
    text-align: center;
  }
  #alert-icon i { font-size:1em;}

}


 /*
 *  Style HPC navigation items.
 */

  .grid-nav {
    display: grid;
    grid-template-columns: 1fr repeat(3, 3fr) 1fr;
    grid-template-rows: 1fr;
    grid-gap: 0 10px;
    grid-template-areas: ". a b c .";
  }

@media (max-width: 600px) {
  .grid-nav {
    display: grid;
    grid-template-columns: 1fr 9fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 10px 0;
    grid-template-areas: ". a ."
                         ". b ."
                         ". c .";
  }
}

  .hpc-nav-item {
    align-self: center;
    justify-self: center;
    text-align: center;
    text-decoration: none !important;
  }

  #support { grid-area: a; }
  #docs{ grid-area: b; }
  #stats{ grid-area: c; }

  .hpc-nav-item i {
    font-size: 6em;
    color: #2A7886;
    padding: 10px;
  }
  .hpc-nav-item:hover i {
    color: rgba(42,120,134,0.9);
  }
  .hpc-nav-item p {
    font-size: 1.8em;
    color: black;
    padding: 10px;
  }
  .hpc-nav-item:hover p {
    color: rgba(0,0,0,0.8);
  }
</style>

<div class="grid-nav">
    <div class="hpc-nav-item" id="support">
      <a href="https://servicedesk.csuc.cat/servicedesk/customer/portal/10" class="nodeco flex column justrnd" style="width:20%; margin-left:20%; text-align:center;">
		>
        <i class="fas fa-question-circle"></i>
        <p>Support</p>
		<h2 style="text-align:center;font-size:1.8em">Support</br><span style="font-size:0.7em">(with registration)</span></h2>
	</a>

	<a   </a>
      <a href="https://servicedesk.csuc.cat/servicedesk/customer/portal/10/user/forgotpassword">(With registration, forgot your password?)</a>
    </div>
    <a class="hpc-nav-item" id="docs" href="https://confluence.csuc.cat/display/HPCKB/HPC+Knowledge+Base">
 class="nodeco flex column justrnd" style="width:20%; text-align:center;">
		<i class="fas fa-book"></i>
		<h2 style="text-align:center;font-size:1.8em">Documentation</h2>      <p>Documentation</p>
	</a>

	<a     <a class="hpc-nav-item" id="stats" href="https://confluence.csuc.cat/display/HPCKB/HPC+Stats" class="nodeco flex column justrnd" style="width:20%; margin-right:20%; text-align:center;">
		>
      <i class="fas fa-chart-bar"></i>
		<h2 style="text-align:center;font-size:1.8em">Status</br></h2>
	      <p>Status</p>
    </a>
</span>div>