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

/* ----- ROOT SETUP ----- */
 :root {
 	/* COLORS */
    --cl: #EDE4F1;
    --ca: #BF9FD6;
    --cb: #A779C5;
    --cp: #7F4B9D;
    --cs: #5B0C88;
    --cm: #4D0C74;
    --cd: #210F2E;
    --cg: #5E5C73;
    --ct: #343D46;
    --cw: #FFFFFF;

    --ca1: #5A9E9E;
    --ca2: #34706E;
    --ca3: #C1DBDA;
    --ca4: #2F5453;

    --cx1: #CC535E;
    --cx2: #AB263E;
    --cx3: #E1BABE;
    --cx4: #631D24;

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

	/* TRANSITIONS */
	--tr: 0.3s all ease;
   --bs: 0.6px 0.6px 2.2px rgba(0, 0, 0, 0.02), 1.3px 1.3px 5.3px rgba(0, 0, 0, 0.028), 2.5px 2.5px 10px rgba(0, 0, 0, 0.035), 4.5px 4.5px 17.9px rgba(0, 0, 0, 0.042), 8.4px 8.4px 33.4px rgba(0, 0, 0, 0.05), 20px 20px 80px rgba(0, 0, 0, 0.07);

	font-size: 17px;
 }

/* ----- SPACING ----- */
 html {
 	background-color: var(--cd);
 }

 body.toolbar-fixed .toolbar-oriented .toolbar-bar {
 	z-index: 1500;
 }

 body.navbar-is-fixed-top {
	margin-top: 110px;
 }

 .p404 {
 	top: -110px;
 }

 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3,
 .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
 .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8,
 .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
 .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	padding-left: 0;
	padding-right: 0;
 }

 input.form-control:focus {
   outline: none;
   box-shadow: none;
 }

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

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

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

 h1.page-header {
 	all: unset;
 	width: 100%;
 	font-size: 3.5rem;
 	color: var(--cw);
 	text-align: center;
 	margin: 0px 0px 30px;
 	padding: 20px 0px;
 	font-weight: 700;
 	background-color: var(--cp);
 	display: inline-block;
 	border: none;
 }

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

 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(--cb);
 	text-decoration: none;
 }

 .webform-options-display-buttons input:checked:focus + label.webform-options-display-buttons-label {
   box-shadow: none;
 }


/* ----- BUTTONS ----- */
 .btn {
 	padding: 15px 50px;
 	margin: 10px;
 	border: none;
 	border-radius: 15px;
 	font-size: 1rem;
 	cursor: pointer;
 }

 .btn-primary {
 	background-color: var(--ca3);
 	color: var(--ca4);
 	transition: var(--tr);
 }

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

 .btn-default {
 	background-color: var(--ca3);
 	color: var(--ca4);
 	transition: var(--tr);
 }

 .btn-default:hover,
 .btn-default:focus,
 .btn-default:active {
 	background-color: var(--ca1);
 	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(--cg);
 }

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

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

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

/* ----- ALERT STYLING ----- */
   .alert {
      position: fixed;
   	top: 80px;
   	z-index: 9999;
   	right: 15px;
   	margin-bottom: 10px;
   	width: 350px;
   	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: 15px;
   	-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: -370px;}
	4% {margin-right: 0px; opacity: 1;}
	95% {opacity: 1; margin-right: 0px;}
	100% {opacity: 0; margin-right: -370px; display: none;}
 }

 @keyframes stick {
	0% {margin-right: -370px; 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 ----- */
 
 .simplelogin-link {
 	display: none;
 }

 .simplelogin-logo img {
 	max-width: 100%;
 	width: 50%;
 	margin-bottom: 15px;
 }

 .simplelogin-logo h1 {
 	display: none;
 }

 .simplelogin-form {
 	border: none;
 	border-radius: 4px;
 	-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(--cl);
 	margin-top: 0px;
 }

 .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;
 	color: var(--cp);
 }

 .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;
 	width: auto;
 	border-radius: 4px;
 	border: none;
 	padding: 12px 25px;
 	font-weight: 400;
 }

 .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;
 }

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

 .simplelogin a, .simplelogin-form .forgot-password a {
 	color: var(--cp);
 	transition: var(--tr);
 }

 .simplelogin a:hover, .simplelogin a:focus, .simplelogin a:active {
 	color: var(--cs);
 }

 .simplelogin-form input.form-submit, .simplelogin-form button.form-submit {
 	background-color: var(--cp);
 	color: var(--cw);
 	transition: var(--tr);
 }

 .simplelogin-form input.form-submit:hover,
 .simplelogin-form input.form-submit:active,
 .simplelogin-form input.form-submit:focus {
 	background-color: var(--cs);
 }

 .simplelogin .nav {
 	display: none;
 }

/* ----- ACCORDION STYLING ----- */
 .ckeditor-accordion-container dl {
    border: none;
 }

 .ckeditor-accordion-container dl dt a .ckeditor-accordion-toggle:before,
 .ckeditor-accordion-container dl dt a .ckeditor-accordion-toggle:after {
    background-color: var(--cp);
 }

 .ckeditor-accordion-container dl dt.active a .ckeditor-accordion-toggle:after,
 .ckeditor-accordion-container dl dt.active a .ckeditor-accordion-toggle:before {
    background-color: var(--cw);
 }

 .ckeditor-accordion-container dl dt a:hover .ckeditor-accordion-toggle:before,
 .ckeditor-accordion-container dl dt a:hover .ckeditor-accordion-toggle:after {
    background-color: var(--cw);
 }

 .ckeditor-accordion-container dl dt a {
    padding: 25px 50px;
    background-color: var(--cl);
    color: var(--ct);
    border: none;
    transition-duration: 0.4s;
    border-radius: 15px;
    margin-bottom: 20px;
    transition: var(--tr);
 }

 .ckeditor-accordion-container dl dt a:hover {
    background-color: var(--cp);
    color: var(--cw);
    border: none;
    text-decoration: none;
    transition-duration: 0.4s;
 }

 .ckeditor-accordion-container dl dt a:focus {
    text-decoration: none;
 }

 .ckeditor-accordion-container dl dd {
    padding: 35px;
    border: none;
    background-color: #fbf8fc;
    margin-bottom: 20px;
    border-radius: 0px 0px 15px 15px;
 }

 .ckeditor-accordion-container dl dt.active a {
    background-color: var(--cp);
    color: var(--cw);
    border-bottom: none;
    text-decoration: none;
    margin-bottom: 0px;
    border-radius: 15px 15px 0px 0px;
    transition: var(--tr);
 }


/* ----- GIN LOGIN ----- */
 body.gin-login .user-form-page__wallpaper img {
   position: fixed;
   left: unset;
   right: 0;
   top: 0;
   width: 58.4vw;
   height: 100%;
   object-fit: cover;
   object-position: center;
   background-size: cover;
   background-position: center;
 }


/* ----- MODAL STYLING ----- */
   .ui-widget-overlay {
      background-color: var(--cd);
      opacity: 0.6;
      z-index: 2500;
   }

   .ui-dialog {
      z-index: 2600;
      top: 80px !important;
      padding: 0px;
      text-align: center;
      color: var(--ct);
      background-color: var(--cl);
      height: 80%;
      overflow: scroll;
   }

   .ui-widget.ui-widget-content {
      border: none;
   }

   .ui-corner-all {
      border-radius: 20px;
   }

   .ui-widget-header {
      border: none;
      background-color: var(--cp);
      color: var(--cw);
      font-size: 1.5rem;
      padding: 25px;
      border-radius: 20px 20px 0px 0px;
      text-align: left;
   }

   .ui-dialog .ui-dialog-buttonpane {
      border-radius: 0px 0px 20px 20px;
      border: none;
      background-color: var(--cl);
      color: var(--ct);
   }

   .ui-dialog .ui-dialog-content {
      padding: 25px 25px 15px 25px;
   }

   .ui-dialog .ui-dialog-buttonpane {
      margin-top: 0px;
   }

   .ui-widget .ui-dialog-buttonset .ui-widget {
      font-size: 0.9rem;
      border-radius: 15px;
      padding: 10px 20px;
   }

   .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover,
   .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
      border: none;
   }


/* ----- TABE STYLING ----- */
   .table > thead > tr > th {
      background-color: var(--cp);
      color: var(--cw);
      padding: 20px 5px;
   }

   .table > tbody > tr > td {
      padding: 15px 5px;
      vertical-align: middle;
   }

   .table > tbody > tr {
      transition: var(--tr);
   }

   .table > tbody > tr:nth-of-type(even) {
      background-color: var(--cl);
   }

   .table > tbody > tr:nth-of-type(odd) {
      background-color: #dbcfe6;
   }

   .table > tbody > tr:hover,  .table > tbody > tr:focus,  .table > tbody > tr:active {
      background-color: #cbbdd9;
   }

   table.sticky-header {
      top: 57px !important;
   }