/* ================
	GLOBAL STYLING
   ================ */




/* ----- ROOT SETUP ----- */
 :root {
 	/* COLORS */
	--cp: #7F4B9D;
	--cs: #4D0C74;
	--cd: #1D0D29;
	--ct: #343D46;
	--cg: #5E5C73;
	--cl: #DAC8E1;
	--cm: #BF9FD6;
	--cw: #ffffff;

	/* WIDTH */
	--w2: 20%;
	--wq: 25%;
	--w3: 30%;
	--w4: 40%;
	--w6: 60%;
	--w8: 80%;
	--wf: 100%;

	/* TRANSITIONS */
	--tr: 0.3s all ease;

	font-size: 14px;
 }


/* ----- SPACING ----- */
 body.navbar-is-fixed-top {
 	margin-top: 0px;
 	margin-left: 0px;
 }

 .col-sm-12 {
	padding-left: 0;
	padding-right: 0;
 }

 :focus,
 :active,
 input:focus,
 .form-control:focus {
 	outline: none;
 }

 .main-container {
 	margin: 0px 20px 40px;
 }


/* ----- TYPOGRAPHY ----- */

 body {
 	font-family: 'Poppins', sans-serif;
 	font-size: 1rem;
 	color: var(--ct);
 }

 h1 {
 	all: unset;
 	font-size: 3.5rem;
 	color: var(--cp);
 	text-align: center;
 	font-weight: 900;
 	margin: var(--st) var(--sm);
 }

 .page-header {
 	all: unset;
 	width: 100%;
 	font-size: 3.5rem;
 	color: var(--cw);
 	text-align: center;
 	margin: 0px 0px 40px;
 	padding: 25px 0px;
 	font-weight: 900;
 	background-color: var(--cp);
 	display: inline-block;
 }

 h2 {
 	all: unset;
 	font-size: 2rem;
 	color: var(--cp);
 	text-align: center;
 	font-weight: 700;
 	margin: var(--st) var(--ss);
 }

 h3 {
 	font-size: 1.5rem;
 	color: var(--cd);
 	text-align: center;
 	font-weight: 700;
 	margin: var(--st) var(--st);
 }

 a {
 	color: var(--cp);
 	text-decoration: none;
 	transition: all 0.3s ease;
 }

 a:hover, a:focus, a:active {
 	color: var(--cs);
 	text-decoration: none;
 }


/* ----- BUTTONS ----- */
 .btn {
 	padding: 8px 25px;
 	border: none;
 	border-radius: 4px;
 	font-size: 1rem;
 	cursor: pointer;
 }

 .btn-primary {
 	background-color: var(--cp);
 	color: var(--cw);
 	transition: var(--tr);
 }

 .btn-primary:hover,
 .btn-primary:focus,
 .btn-primary:active {
 	background-color: var(--cs);
 	color: var(--cw);
 }

 .btn-default {
 	background-color: var(--cl);
 	color: var(--cd);
 	transition: var(--tr);
 }

 .btn-default:hover,
 .btn-default:focus,
 .btn-default:active {
 	background-color: var(--ct);
 	color: var(--cw);
 }

 .btn-danger {
 	background-color: #840029;
 	color: var(--cw);
 	transition: var(--tr);
 }

 .btn-danger:hover,
 .btn-danger:focus,
 .btn-danger:active {
 	background-color: #60112E;
 	color: var(--cw);
 }

 .btn-success {
 	background-color: #008442;
 	color: var(--cw);
 	transition: var(--tr);
 }

 .btn-success:hover,
 .btn-success:focus,
 .btn-success:active {
 	background-color: #16633B;
 	color: var(--cw);
 }

 .btn-warning {
 	background-color: #BFB341;
 	color: var(--cw);
 	transition: var(--tr);
 }

 .btn-warning:hover,
 .btn-warning:focus,
 .btn-warning:active {
 	background-color: #897D25;
 	color: var(--cw);
 }

 .btn-info {
 	background-color: #005587;
 	color: var(--cw);
 	transition: var(--tr);
 }

 .btn-info:hover,
 .btn-info:focus,
 .btn-info:active {
 	background-color: #003057;
 	color: var(--cw);
 }

 
/* ----- PLACEHOLDERS ----- */
 .form-item input::-webkit-input-placeholder,
 .form-item textarea::-webkit-input-placeholder {
 	color: var(--cm);
 }

 .form-item input:-moz-placeholder,
 .form-item textarea:-moz-placeholder {
 	color: var(--cm);
 }

 .form-item input::-moz-placeholder,
 .form-item textarea::-moz-placeholder {
 	color: var(--cm);
 }

 .form-item input:-ms-input-placeholder,
 .form-item textarea:-ms-input-placeholder {
 	color: var(--cm);
 }


/* ----- AJAX ----- */
 .glyphicon-refresh:before {
 	background-image: url('/sites/default/files/loading.svg');
    background-size: 12px 12px;
    display: inline-block;
    width: 12px; 
    height: 12px;
    content:"";
    vertical-align: middle;
    margin: 4px;
 }


/* ----- PAGER ----- */
 .pagination > li > a, .pagination > li > span {
    float: none;
    padding: 10px 15px;
    line-height: 1;
    color: var(--cd);
    text-decoration: none;
    background-color: var(--cl);
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin: 0px 2px;
    transition: var(--tr);
    text-align: center;
 }

 .pagination > li > a:hover,
 .pagination > li > span:hover,
 .pagination > li > a:focus,
 .pagination > li > span:focus,
 .pagination > li > a:active,
 .pagination > li > span:active,
 .pagination > .active > a,
 .pagination > .active > span,
 .pagination > .active > a:hover,
 .pagination > .active > span:hover,
 .pagination > .active > a:focus,
 .pagination > .active > span:focus {
 	background-color: var(--cp);
 	color: var(--cw);
 }

 .pagination > li:first-child > a, .pagination > li:first-child > span,
 .pagination > li:last-child > a, .pagination > li:last-child > span {
 	border-radius: 50%;
 }
 

/* ----- ALERT STYLING ----- */

 .alert {
	position: fixed;
	top: 80px;
	z-index: 9999;
	right: 15px;
	margin-bottom: 10px;
	width: 20%;
	overflow: hidden;
	animation-name: notify;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-delay: 1s;
	animation-duration: 10s;
	animation-fill-mode: both;
	border: 0px;
	border-radius: 4px;
	-webkit-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.5);
	padding: 25px;
	font-size: 14px;
	background-color: #f1f1f1;
 }

 .alert-danger {
	animation-name: stick;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-delay: 1s;
	animation-duration: 10s;
	animation-fill-mode: both;
 }

 .alert:hover {
	-webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
 }

 body.simplelogin .alert {
 	top: 14px;
 }

 @keyframes notify {
	0% {margin-right: -22%;}
	4% {margin-right: 0px; opacity: 1;}
	95% {opacity: 1; margin-right: 0px;}
	100% {opacity: 0; margin-right: -22%; display: none;}
 }

 @keyframes stick {
	0% {margin-right: -22%; background-color: #f1f1f1;}
	4% {margin-right: 0px; opacity: 1; background-color: #f1f1f1;}
	8% {margin-right: 0px; opacity: 1; background-color: #f1f1f1;}
	15% {margin-right: 0px; opacity: 1; background-color: #eac0c0;}
	20% {margin-right: 0px; opacity: 1; background-color: #f1f1f1;}
	25% {margin-right: 0px; opacity: 1; background-color: #eac0c0;}
	30% {margin-right: 0px; opacity: 1; background-color: #f1f1f1;}
	95% {opacity: 1; margin-right: 0px;}
	100% {opacity: 1; margin-right: 0px;}
 }


/* ----- LOGIN STYLING ----- */
 
 body.simplelogin {
 	font-family: 'Poppins', sans-serif;
 }
 .simplelogin-link {
 	display: none;
 }

 .simplelogin-logo svg {
 	max-width: 100%;
 }

 .simplelogin-logo h1 {
 	display: none;
 }

 .simplelogin-form {
 	border: none;
 	border-radius: 20px;
 	-webkit-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.16);
 	-moz-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.16);
 	box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.16);
 	padding: 25px 40px;
 }

 body.simplelogin {
 	background-color: var(--cd);
 	margin-top: 0px;
   margin-left: 0px;
 }

 body.simplelogin:after {
   display: block;
   content: "";
   background-color: var(--cd);
   opacity: 0.5;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;

 }

 .simplelogin-form .page-header {
 	font-size: 2rem;
 	display: block;
 	text-align: center;
 	font-weight: 900;
 	margin: 25px 0px;
 	width: 100%;
 	background-color: transparent;
 	padding: 0px;
 }

 .simplelogin input.form-text, .simplelogin input.form-tel,
 .simplelogin input.form-email, .simplelogin input.form-url,
 .simplelogin input.form-search, .simplelogin input.form-file,
 .simplelogin input.form-number, .simplelogin input.form-color,
 .simplelogin textarea.form-textarea, .simplelogin select.form-select,
 .path-tfa input.form-control {
 	border-radius: 4px;
 	border: 1px solid var(--cg);
 	color: var(--cg);
 	height: auto;
 }

 .simplelogin-form input,
 .form-item-code input {
 	background-color: var(--cw);
 	margin: 0px 0px 10px;
 	padding: 12px;
 }

 .simplelogin-form input:focus,
 .simplelogin-form input:active,
 input:focus, input:active {
 	outline: none;
 	box-shadow: none;
 }

 .simplelogin-form input[type="submit"], .simplelogin-form button.form-submit,
 .path-tfa .btn {
 	text-transform: none;
 	border: none;
 	font-weight: 400;
   border-radius: 20px;
   padding: 13px 25px;
   width: 100%;
 }

 .user-login-form .form-actions,
 .path-tfa .form-actions {
 	text-align: center;
 	margin-top: 30px;
 }

 .simplelogin-form .forgot-password {
 	text-align: center;
 	font-size: 12px;
 	color: var(--cg);
 }

 .simplelogin-form .form-actions .btn, .simplelogin-form .form-actions .btn-group,
 .path-tfa .form-actions .btn, .form-actions .btn-group {
 	margin-right: 0px;
 }

 #block-socialauthlogin {
  text-align: center;
 }
 
 #block-socialauthlogin a {
  display: block;
  border: 2px solid var(--cm);
  border-radius: 50px;
  padding: 10px 20px;
  margin-top: 15px;
  transition: var(--tr);
 }

 #block-socialauthlogin a:hover,
 #block-socialauthlogin a:focus,
 #block-socialauthlogin a:active {
   background-color: var(--cp);
   color: var(--cw);
   border-color: var(--cp);
 }

 #block-socialauthlogin a:hover svg,
 #block-socialauthlogin a:focus svg,
 #block-socialauthlogin a:active svg {
   fill: var(--cw);
   
 }

 .social-auth.auth-icon {
  width: auto;
  height: 20px;
  margin-right: 10px;
 }

 .simplelogin-logo img {
   height: 100px;
   margin-bottom: 25px;
 }