/** 
 * Information Services Landing Page: Common Shared Stylesheet
 * by Stephen Christopher | Information Servicess
 * (c) 2018 University of Portsmouth
 */

html,
body {
  /*overflow-x: hidden;*/ /* Prevent scroll on narrow devices */
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch; /* smooth scroll on devices */
  text-rendering: optimizeLegibility;   
}

body {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;  
  background-color: #f6f6f6;  
  padding: 0;
  margin: 0;	
  /*background: url(../images/bgnoise.png) repeat left top;  */
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 400; }
h4 {
  font-weight: 500;
}

a {
  color: #59379e;
}

a:hover {
  color: #402577;
}
/**
 * ---------------------------------------------------------
 *
 * Alerts / Messages
 *
 * ---------------------------------------------------------
 */

#global-alert { 
  z-index: 3040;  
  position: fixed;  
  text-align:left;
  top: 30px;  
  margin:0 10px;
  left: 0;  
  right: 0;
  word-break:break-all;
}

#global-alert .inner {
  position:relative;
  display:inline-block;
  width:100%;
  min-width:auto;
  margin-bottom:0;
}

@media (min-width: 768px) {
  #global-alert { 
    left: 20%;
    right: 20%;
  }
}

/**
 * ---------------------------------------------------------
 *
 * Preloader
 *
 * ---------------------------------------------------------
 */
.preloader-relative { position: relative; display: block; height: 75px;}

.preloader-outer {
  display: inline-block; position: absolute; top: 50%; left: 50%; margin: -60px 0 0 -72px; width: 144px; height: 120px; background: #ffffff; border-radius: 10px; box-shadow: 0 3px 9px rgba(0, 0, 0, 0.2);}
.preloader-outer .wait { text-align: center; font-weight: bold; padding-top: 25px;}
.preloader { display: inline-block; position: absolute; top: 50%; left: 50%; margin: -18px 0 0 -18px; width: 36px; height: 36px; -webkit-animation: container-rotate 1568ms linear infinite; animation: container-rotate 1568ms linear infinite; }
.preloader-outer .preloader { margin-top: -5px; }
.preloader .spin { position: absolute; width: 100%; height: 100%; opacity: 1; -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; border-color: #007bff; }
.preloader .circle { border-radius: 50%; }
.preloader .gap { position: absolute; top: 0; left: 45%; width: 10%; height: 100%; overflow: hidden; border-color: inherit; }
.preloader .gap .circle { width: 1000%; left: -450%; }
.preloader .clip { display: inline-block; position: relative; width: 50%; height: 100%; overflow: hidden; border-color: inherit; }
.preloader .clip .circle { width: 200%; height: 100%; border-width: 3px; border-style: solid; border-color: inherit; border-bottom-color: transparent !important; border-radius: 50%; -webkit-animation: none; animation: none; position: absolute; top: 0; right: 0; bottom: 0; }
.preloader .clip { display: inline-block; position: relative; width: 50%; height: 100%; overflow: hidden; border-color: inherit; }
.preloader .clip.left .circle { -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
.preloader .clip.right .circle { -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
.preloader .clip.left .circle { left: 0; border-right-color: transparent !important; -webkit-transform: rotate(129deg); transform: rotate(129deg); }
.preloader .clip.right .circle { left: -100%; border-left-color: transparent !important; -webkit-transform: rotate(-129deg); transform: rotate(-129deg); }

@-webkit-keyframes container-rotate { to { -webkit-transform: rotate(360deg); } }
@keyframes container-rotate { to { transform: rotate(360deg); } }
@-webkit-keyframes fill-unfill-rotate { 12.5% { -webkit-transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); } to { -webkit-transform: rotate(1080deg); } }
@keyframes fill-unfill-rotate { 12.5% { transform: rotate(135deg); } 25% { transform: rotate(270deg); } 37.5% { transform: rotate(405deg); } 50% { transform: rotate(540deg); } 62.5% { transform: rotate(675deg); } 75% { transform: rotate(810deg); } 87.5% { transform: rotate(945deg); } to { transform: rotate(1080deg); } }
@-webkit-keyframes left-spin { from { -webkit-transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); } to { -webkit-transform: rotate(130deg); } }
@keyframes left-spin { from { transform: rotate(130deg); } 50% { transform: rotate(-5deg); } to { transform: rotate(130deg); } }
@-webkit-keyframes right-spin { from { -webkit-transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); } to { -webkit-transform: rotate(-130deg); } }
@keyframes right-spin { from { transform: rotate(-130deg); } 50% { transform: rotate(5deg); } to { transform: rotate(-130deg); } }

/**
 * ---------------------------------------------------------
 *
 * Back to top
 *
 * ---------------------------------------------------------
 */
a.back-to-top {    
  position: fixed;
  display: none;
  color: #fff;
  background: #621360;
  box-shadow: 0px 10px 10px -2px rgba(0, 0, 0, 0.3);
  border: 2px solid #cfc8de;
  font-size: 20px;
  height: 30px;
  line-height: 25px;
  margin: auto;
  left: 60px;
  bottom: 20px;
  opacity: 0.8;
  /*transition: all 0.2s linear 0s;*/
  width: 30px;
  text-align: center;
  border-radius: 5px;
}

a.back-to-top:hover {
    
}

a.back-to-top > i {
  position: relative;
  top: 2px;   
  transition: all 0.2s linear 0s;
}

a.back-to-top:hover > i {
  top: 0;
}


@media screen and (max-width: 767px) {
  a.back-to-top {
    left: 20px;   
    bottom: 7px;
  }
}

.down-caret {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #343a40 transparent transparent transparent;
  display: inline-block;
  margin-left: 6px;
  top: -3px;
  position: relative;
  transform: rotate(0deg);
  transition: all .25s ease-in;
}

.open-caret {
  transform: rotate(180deg);
  transition: all .25s ease-out;
}

/**
 * ---------------------------------------------------------
 *
 * Dropdown menu
 *
 * ---------------------------------------------------------
 */

.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color:rgba(220, 220, 220, 1);
    animation: fade 0.5s forwards;
}

@keyframes fade {
    from {background-color:rgba(220, 220, 220, 1);}
    to {background-color:rgba(220, 220, 220, 0.5);}
}

.dropdown-menu a.dropdown-item {  
  font-size: 14px;    
  padding: 6px 2rem 6px 1.5rem;
  color: #333;
}

.dropdown-menu .fa {
  width: 24px;
  text-align: center;
}

.dropdown-fix {
  position: fixed;
}

/**
 * ---------------------------------------------------------
 *
 * Buttons
 *
 * ---------------------------------------------------------
 */

.btn-link {
  position: relative;
  top: 0;
  color: #444;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 13px;
  /*background:#f8f8f8;*/
}

.btn-link:hover, .btn-link:focus, .btn-link:active {    
  background: #fff;
  color: #444;
  border:1px solid #ccc;
  text-decoration: none;
}

.dropdown-toggle::after {    
    vertical-align: 0.120em;
}

/* simple way to allow clear search button - input type must be set to 'search' */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
  cursor: pointer;
}