@font-face {
    font-family: 'Nebulous';
    src: url('../fonts/Nebulous-Regular.ttf')  format("truetype"),
         local('nebulous');
}
  
@font-face {
    font-family: 'HussarBoldWeb';
    src: url('../fonts/HussarBoldWeb.otf')  format("truetype"),
         local('hussarBoldWeb');
}

@font-face {
    font-family: 'RockhillSans';
    src: url('../fonts/RockhillSans-Rough.otf')  format("truetype"),
         local('rockhillSans');
}

/*##### GENERAL INTERFACE #####*/

/* Always display the scroll bar to avoid resizes due to its appearance */
html
{
    overflow-y: scroll;
}

/* Limit the minimum size to avoid breaks of the responsive design */
body
{
    min-width: 300px;
}

/* Configuration of the navbar elements */
.navbar.navbar-dark
{
    height: 150px;
    background-color: #17281E;
    padding: 0px 10px;
    transition: all 0.5s;
}

.navbar-brand
{
    height: 100%;
    display: flex; /* contexte sur le parent */
    flex-direction: column; /* direction d'affichage verticale */
    justify-content: center; /* alignement vertical */
    /*font-family: 'Nebulous';*/
    font-family: 'RockhillSans';
    font-size: 60px;
    text-align: center;
    padding: 5px 35px 0px 20px;
}

.navbar-brand h1
{
    font-size: 46px;
    transition: all 0.5s;
}

.navbar-nav
{
    width: auto;
}

.navbar-nav, #navbarToggler
{
    height: 100%;
}

.navbar-nav .nav-item
{
    font-family: 'HussarBoldWeb';
    text-align: center;
    color: #FFFFFF;
    min-width: 10em;
    z-index: 1;
}

.navbar-nav .btn
{
    height: 100%;
    display: flex; /* contexte sur le parent */
    flex-direction: column; /* direction d'affichage verticale */
    justify-content: center; /* alignement vertical */
}

.navbar-nav .btn:not(:hover)
{
    background-color: #17281E;
}

/* Change the color of the navbar button corresponding to the actual page, when when hovered */
.navbar-nav .btn:hover, .navbar-nav > .nav-item > a.active
{
    background-color: #194A3F !important;
    color: white !important;
}

/* Change the color of the navbar button clicked */
.navbar-nav > .nav-item > a:active
{
    background-color: rgb(33, 99, 84) !important;
    color: white !important;
}

/* Progressively change the size of the icons when the navbar is collapsing */
.fas,.far
{
    transition: all 0.5s;
}

/* Handle the behavior of navbar collapsing with the corresponding Javascript : hide the correct set of right buttons */
.nav-item-hidden
{
    display: none;
    z-index: -1;
}

.sticky
{
    position: fixed;
    top: 0;
    width: 100%;
}

.sticky + .container-fluid
{
    padding-top: 0px;
}

/*##### LOGIN PAGE #####*/

.form-signin
{
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}

.form-signin .checkbox
{
    font-weight: 400;
}

.form-signin .form-control
{
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 16px;
}

.form-signin .form-control:focus
{
    z-index: 2;
}

.form-signin input[type="email"]
{
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input[type="password"]
{
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#img_index
{
    width: 50%;
    max-width: 600px;
    height: auto;
}

/*##### NAME GENERATOR #####*/

.card-header-description
{
    padding-top: 21px;
}

.card-header h4, .card-header h5
{
    font-family: 'HussarBoldWeb';
}

#name-generator .card-header
{
    padding: 0;
}

#generator-tab .nav-link
{
    padding-top: 25px;
}

.nav-tabs > .nav-item > .nav-link:not(.active)
{
    color: #437558;
    transition: all 0.2s;
}

.nav-tabs > .nav-item > .nav-link:hover:not(.active)
{
    color: #67B588;
}

/* Color the classic buttons */
.btn-success
{
    background-color: #437558;
    border-color: #437558;
}

/* Add shadows bellow buttons to add more elevation */
.box-shadow--4dp:not(.active)
{
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2)
}

/* Clarify the color of the classic buttons when hovered */
.btn-success:hover
{
    background-color: #67B588;
    border-color: #67B588;
}

/* Green the outline buttons (Upload/Search) when overed */
.btn-outline-success:hover
{
    background-color: #294936;
    border-color: #294936;
}

/* Darken the button when clicked  */
.btn-success:active
{
    background-color: #4e8866 !important;
    border-color: #4e8866 !important;
}

/* Clarify the color of the classic buttons when hovered */
.form-control:focus
{
    border-color: rgba(103, 181, 136, 0.8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(103, 181, 136, 0.6);
    outline: 0 none;
}

.input-group > .input-group-append:first-child > .input-group-text
{
    width: 180px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.input-group > .input-group-append:nth-child(2) > .input-group-text
{
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.input-group > .input-group-append > .input-group-text
{
    display: inline-block;
    text-align: center;
}

.input-group > .form-control[type="text"]
{
    width: 40%;
}

#reference-number-modal
{
    width: 10%;
}

.input-group > .form-control[type="number"], #reference-number-new, #reference-number-update
{
    width: 30px;
}

#file-name-new, #file-name-update, #reference-number-new, #reference-number-update, .input-group > .form-control[type="number"]
{
    display: inline-block;
    text-align: center;
}

.file
{
    visibility: hidden;
    position: absolute;
}

#upload-group, #search-group
{
    width: 50%;
}

#upload-addon2
{
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

#search-addon1
{
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

#load-group
{
    display: inline-flex;
    width: 100%;
}

/* The bar between the Upload and the Search fields */
.vl {
    border-left: 10px solid #294936;
    height: 38px;
  }

/*#### DATABASE ####*/

th
{
    text-align: center;
    cursor: pointer;
}

td
{
    text-align: center;
}

#input-group-search-db > .form-control[type="text"], select
{
    width: 0%;
    text-align: center;
}

#input-group-search-db > .input-group-append > .input-group-text
{
    width: auto;
}

/*#### ABOUT PAGE ####*/
        
/* Style the tab */
.tab
{
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button
{
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover
{
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active
{
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent
{
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/* Reset the border radius to modify it based on the position */
#input-group-about > .btn
{
    border-radius: 0px;
}

/* Round the first button's left edges */
#input-group-about > .btn:first-child
{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

/* Round the last button's right edges */
#input-group-about > .btn:last-child
{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Color with a lighter color the activated button and suppress the shadows to give a "pushed" aspect */
#input-group-about > button.active
{
    background-color: #67B588 !important;
    border-color: #67B588 !important;
    box-shadow: 0 0 0 0 transparent !important;
}

.doc-nav-item
{
    font-family: 'HussarBoldWeb';
    color: #437558;
    padding-top: 11px;
    margin-bottom: 4px;
}
.doc-nav-item:hover
{
    color: #67B588;
}

.doc-nav-item:focus
{
    box-shadow: 0 0 0 transparent inset, 0 0 0 transparent;
    outline: 0 none;
}

a
{
    color: #4e8866;
}

a:hover
{
    color: #437558;
}

.card-header-about
{
    font-family: 'HussarBoldWeb';
    padding-top: 20px !important;
}

.card-header-about > .card-link > h5 
{
    margin-bottom: 0;
}

.card-body > ul
{
    margin-bottom: 0;
}

.list-group-item > h5
{
    font-family: 'HussarBoldWeb';
    margin-top: 10px;
}