/*---- STYLE.CSS -----
|  File Type: css
|
|  Purpose:  Stylize elements in both index.php and pdfIframe.php.
*----------------- */ 


 /*---- @font-face -----
|  Purpose: Init Clearsky font for use in css
|
|  Returns:  font-family
*----------------- */ 
@font-face {
    font-family: "Calibri";
    src: url("BNG.woff2") format("woff2");
  }

 


 /*---- body -----
|  Tag: body
|
|  Purpose: Remove margin, make font the clearsky font for entire body.
*----------------- */ 
body
{
    margin:0;
}



 /*---- header-container -----
|  Class: .header-container
|
|  Purpose: Create CSS grid to loosely emulate the clearsky website
*----------------- */ 
.header-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    align-items: center;
    padding:10px 0 0 0;
}

 /*---- logo -----
|  Class: logo
|
|  Purpose: Sets the logo to grid-column 2 as to retain the space at the beggining of the header
*----------------- */ 
.logo
{
    grid-column:2;
}


 /*---- header-container h6 -----
|  Class: .header-container
|
|  Tag:h6  
|
|  Purpose: Style emulation for the text in the clearsky homepage
*----------------- */ 
.header-container h6 {
    font-size: 12px;
    color: #6c6c6c;
    font-weight: 400;
    margin:0;
    padding:0;
    vertical-align: middle;
}


 /*---- header-container h5 -----
|  Class: .header-container
|
|  Tag:h5
|
|  Purpose: Style emulation for the text in the clearsky homepage
*----------------- */ 
.header-container h5 {
    font-size: 14px;
    font-weight: 600;
    color:#232323;
    margin:0;
    padding:0;
    vertical-align: middle;
}

 /*---- pdf-paginator div -----
|  Id: pdf-paginator
|
|  Tag:div
|
|  Purpose: Style for the paginator UI buttons, transition property to give transfer to colour
|  for the div:hover element below.
*----------------- */ 
#pdf-paginator div 
{
    color: #fff;
    text-decoration: none;
    list-style-type: none;
    text-align: center;
    padding:10px;
    display: inline-block;
    transition: background-color .2s;
    margin:5px;
}

#pdf-paginator div:hover
{
    background-color: #ff8a66;
    color: #fff;
}


 /*---- pdf-paginator -----
|  Purpose: Remaining style for the UI, centered button text, no text selecting cursor
*----------------- */ 
#pdf-paginator
{
    margin:25px 0 25px 0;
    width: 50%;
    height: 5%;
    text-align: center;
    cursor:default;
}


 /*---- btn -----
|  Purpose: Class for the paginator divs, emulating some of the style from the clearsky main page. DEPRECATED
*----------------- */ 
.btn 
{
    background: #0390cc; 
    padding: 9px 25px; 
    font-size:15px; 
    font-weight: 600; 
    margin: 20px 0;   
    border-radius: 3px;
    user-select: none;	 
}
.btn:hover
{
    color: white;
}





 /*---- pdf -----
|  Class : .pdf
|
|
|  Purpose: Style for the images to be generated in pdfIframe. couples with hover below it to flow slightly
|  when hovered over
*----------------- */ 
.pdf {
    height: 80%;
    border: 1px solid #ddd;
    border-radius: 4%;
    background-color: white;
}
  
.pdf:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

 /*---- pdf-conatiner div -----
|  Id: pdfContainer
|
|  Tag:div
|
|  Purpose: Style for the paginator UI buttons, transition property to give transfer to colour
|  for the div:hover element below.
*----------------- */ 
#pdfContainer div:not(.pdfHover){
    display:inline-block;
}

 #pdfContainer > .table
{
    display:flex;
}

#content
{
    vertical-align: middle;
}

iframe :not(div.grecaptcha-logo > iframe){
    border:none;
    height:300px;
    width:210px;
}



 /*---- iframe.table -----
|  Purpose: Styling for iframes in table
*----------------- */ 
iframe.table
{
    border:none;
    height:30px;
    width:22px;
    vertical-align: middle;
}
 /*---- iframe.table -----
|  Purpose: Styling for iframes specifically in blue box on mouse hover
*----------------- */ 
iframe.pdfHover
{
    border:none;
    display:none;
}


 /*---- iframe pdfinner -----
|  Purpose: Styling for iframes specifically in blue box on mouse hover
*----------------- */ 

iframe.table:hover ~ div>center>iframe.pdfHover
{
    border:none;
    height:300px;
    width:220px;
    display:block;
    z-index:1;
}


 /*---- iframe.table:hover ~ div.pdfHover -----
|  Purpose: Hides on hover pdfs when mouse not hovering.
*----------------- */ 
iframe.table~ div.pdfHover
{
    display:none;
    color:white;
    
}

 /*---- iframe.table:hover ~ div.pdfHover -----
|  Purpose: Styling for iframe box on for on hover pdfs. Gives blue box background
*----------------- */ 
iframe.table:hover ~ div.pdfHover
{
    background-color: 0390cc;

    position: absolute;
    transform: translate(-50%, 10%);
    border-radius: 4%;
    display:inline-block;
    z-index:1;

}


 /*---- iframe.pdfInner -----
|  Purpose: Styling for the iframe within iframe box on for on hover pdfs
*----------------- */ 
iframe.pdfInner
{
    border:none;
    height:300px;
    width:210px;
    display:inline-block;
    z-index:1;
}

 /*---- div.pdfBox > center > h6 -----
|  Purpose: Styling for the text within the iframe box
*----------------- */ 
div.pdfBox > center > h6
{
    position: relative;
    top: -50px;
}

 /*---- div.pdfBox -----
|  Purpose: Styling for the iframe box itself.
*----------------- */ 
div.pdfBox
{
    height:280px;
    width:220px;
    background-color: #0390cc;
    transform: translate(-50%);

    position: absolute;    
    border-radius: 4%;
    display:inline-block;
    z-index:1;
}






 /*---- footer -----
|  class : footer, roboto
|
|  tags : h3, p
|
|
|  Purpose: Styling for the footer tag.
*----------------- */ 
.footer 
{
    background:#222327;
}
.footer h3 
{
    color:#ffffff; font-size:22px; font-weight:600; margin:0; padding-bottom:15px;
}
.footer p
{
    font-size:14px; color:#b0b0b0;  
}
.roboto 
{
    font-family:Calibri, sans-serif;
}


 /*---- topRow -----
|  class : topRow
|
|  tags : h3
|
|  Purpose: Styling for the subheader of PDF table.
*----------------- */ 
.topRow
{
    color: #6e6e6e;
    border-bottom: 4px solid #b0b0b0;
    cursor:default;
}



 /*---- mainMenuBtn -----
|  Purpose: Styling for the main menu buttons across the top In header.
*----------------- */ 
#mainMenuBtn
{
    grid-template-columns: auto auto auto auto auto auto auto;
    align-items: center;
    display:grid;
}

#mainMenuBtn div {
    color: #fff;
    text-decoration: none;
    list-style-type: none;
    text-align: center;
    padding:10px;
    transition: background-color .3s;
    cursor:default;
    margin:0px;
}
#mainMenuBtn >div:not(:last-child)
{
    border-right: 1px solid rgb(255 255 255 / 21%);
    
    
}
#mainMenuBtn >div:first-child
{
    grid-column:2;
    
    
}



 /*---- mainMenuBtn -----
|  Purpose: Styling for the sub menus under main menu.
*----------------- */ 
#mainMenuBtn div > ul
{

    background-color: #0390cc;
    color: #fff;
    z-index: 1;
    position: absolute;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    min-width: 160px;
    opacity: 0;
    margin: 10px 0px 0px -10px;
    text-align: left;
    padding: 0px;
    transition: opacity .2s;
}
#mainMenuBtn div:hover ul
{
    opacity: 1;
}
#mainMenuBtn div:not(.dropContainer):hover
{
    background-color: #ff8a66;
    color: #fff;
}

.member-link:hover > li > ul.sub-menu {   transform: scaleY(1) translateZ(0);  display: block; }
/* .member-link li:hover ul.sub-menu {     } */
.member-link > li ul.sub-menu {transform-origin: 50% 0;  transform: scaleY(0) translateZ(0);  transition: transform 0.3s, opacity 0.3s; display: block;  }
    


 /*---- iframe component-----
|  Purpose: Styling for the table component. As it's formatted in an iframe, border needs to be disabled.
*----------------- */ 
iframe.component
{
    border:none;
    width:100%;
    height:350px;
    display: block;
}

 /*---- pdfContainer > .table -----
|  Purpose: Styling for the selection system. .table on hover for background on item on hover. .table.selected for when item is selected.
*----------------- */ 
#pdfContainer > .table:hover
{
    background: rgba(0, 140, 186, 0.5);

}

#pdfContainer > .table.selected
{
    background: rgba(0, 140, 186, 1);
}

 /*---- download_button -----
|  Purpose: Styling for the download button
*----------------- */ 
#download_button
{
    background: rgba(0, 140, 186, 1);
    margin: 20px;
    float: right;
    border:none;
    padding: 10px;
    border-radius: 3px;
}
#download_button:hover
{
    color: white;
}
#download_button.hide
{
    display:none;
    border:none;
}
 /*---- select button -----
|  Purpose: Styling for the select button
*----------------- */ 
#select_all_btn
{
    background: rgba(0, 140, 186, 1);
    margin: 20px;
    border:none;
    padding: 10px;
    border-radius: 3px;
}
#select_all_btn:hover
{
    color: white;
}
#select_all_btn.hide
{
    display:none;
    border:none;
}


 /*---- .topRow.addedHeader -----
|  Purpose: Styling for primary header for top Row
*----------------- */ 
.topRow.addedHeader
{
    color: #345815;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #345815;
    cursor:default;
}

 /*---- .topRow.addedHeader -----
|  Purpose: Styling for error areas register.php
*----------------- */ 
.red p{
    color: #CC3333;
}
 

 /*---- input -----
|  Purpose: Styling for input register.php
*----------------- */ 
td > div > input
{
    border: solid 1px gray;
}

input 
{
    display: inline;
}


/* ADDED BY TUANPV */
nav.nav_area ul.menu {
   margin-bottom: 0px;
}