doi.css

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f4f4f4;
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
} 

/* sets the display of the element to flex */
.flex{
  display:flex;
}

.doiTitle{
  font-size:30px;
}

/* sets the background color as esrf blue*/
.blueBackground{
  background-color: #132577 !important;
}

.lightRedBackground{
  background-color: #ffcaca !important;
}

.grayBackground{
  background-color: #dcdee2;
}

/* vertically center the font and sets its color to white */
.whiteVCenteredFont{
  color: white;
  margin-top: auto;
  margin-bottom:auto;
}

.padding-top-15{
  padding-top:15px;
}

.padding-bottom-15{
  padding-bottom:15px;
}

.padding-left-15{
  padding-left:15px;
}

/* ######################## For doi landing page ######### */
.myBorder-left{
  border-left-color: #132577;
  border-left-width: 8px;
  border-left-style: solid;
  padding-left:10px;
}

.card-footer{
  background-color: #FFFFFF;
  border: 0;	
}

hr{
  margin-top: 30px;
  margin-bottom: 30px;
}

label{
  margin-bottom: 0px;
}

/* ######################## For welcome page ############# */
.padding10{
  padding:10px;
}

.padding-0{
  padding-right:0;
  padding-left:0;
}

.whiteBackground{
  background-color: #ffffff;
}

.welcomeBanner{
  heigth:100px;
}

.whiteFont{
  color: #ffffff;
}

.flexCentered{
  display:flex;
  justify-content: center; /* align horizontal */
  align-items: center; 
}

.height100p{
  height:100%;
}

/* ########################################### */
/*                the buttons                  */
/* ########################################### */


/* make all button's text to wrap to a new line */
.btn{
  white-space: normal;
}

/* when the buttons are hovered */
.btn-primary:hover {
}

.btn-primary {
  border-color: #132577;
  background-color: #132577
}

/* when the buttons are disabled */
.btn-primary.disabled{
  background-color: #132577;
  border-color: #132577;
  cursor: not-allowed;
}

.btn.disabled{
  opacity : .50  
}

/* ############## end the buttons ############## */

    
/*sets all labels to bold */

label{
  font-weight: bold;
}

/* ################# esrf logo ############### */
#logo{
  height: 50px;
}

/* ############### right side metadata ##########*/
.card-header{
  background-color: #CFD1D2;
}

/* ######################################################### */
/* ##         the please-wait-loading-animation           ## */
/* ######################################################### */

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
  display:    none;
  position:   absolute;
  z-index:    1000;
  top:        82px;
  bottom:     60px;
  background: rgba( 0, 0, 0, .05 ) 
              url('../src/images/ajax-loader.gif') 
              50% 50% 
              no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
  overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
  display: block;
}

/* ######################################################### */