@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
:root {
	--purple-main: #6546F3;
	--purple-light: #A491FA;
	--ossidiana-main: #493990;
	--ossidiana-light: #271E52;
	--black-main: #1e1e1e;
}

.ecomic a {transition: all 0.4s; color:var(--purple-light);}
.ecomic a:hover {color:var(--ossidiana-light);}

.btn-outline-primary {border-color:var(--purple-main); color:var(--purple-main);}
.btn-outline-primary:hover,
.btn-outline-check:focus+.btn-outline-primary, .btn-outline-primary:focus {
	color: #fff;
	background-color: var(--purple-main);
	border-color: var(--purple-main);
	box-shadow: 0 0 0 0 rgba(49, 132, 253, .5);
}

.btn-outline-light {border-color:#FFF; color:#FFF;}
.btn-outline-light:hover,
.btn-outline-light:focus+.btn-outline-light, .btn-outline-light:focus {
	color: var(--purple-main);
	background-color: #FFF;
	border-color: #FFF;
	box-shadow: 0 0 0 0 rgba(49, 132, 253, .5);
}


.btn-primary {color: #fff; background-color: #6546F3; border-color: #6546F3; transition: all 0.4s;}
.btn-primary:hover,
.btn-check:focus+.btn-primary, .btn-primary:focus {
	color: #fff;
	background-color: #493990;
	border-color: #493990;
	box-shadow: 0 0 0 0 rgba(49, 132, 253, .5);
}

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  color:var(--black-main)!important;
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  color:#FFF;
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: var(--purple-light);
}

.btn-block {width: 100%;}
.bg-purple {background-color:var(--purple-main);}
.bg-purple-light {background-color:var(--purple-light);}
.bg-ossidiana {background-color:var(--ossidiana-main);}
.bg-ossidiana-light {background-color:var(--ossidiana-light);}

.ecomic .navbar-logo img {height: 80px;}
.ecomic .navbar-logo {padding:30px 0px;}
.ecomic .navbar {justify-content: center;}
.ecomic .my-text blockquote {background-color: var(--ossidiana-main); color:#FFF; padding:22px;}

.ecomic .card {padding:20px;}

.captcha-check,
.checkbox-check {display:flex; justify-content: flex-start; align-items: flex-start;}
.checkbox-check input[type="checkbox"]{margin-right: 10px; margin-top:5px;}

.mod_form .form-label {color:var(--purple-main);}
/*.checkbox-check label {align-items: flex-start;}*/

.ecomic .card {border-radius: 0px; border:0px;}
.ecomic input {border-radius:0px;}
.ecomic .btn {border-radius:0px; padding:20px 40px; border-width:2px;}
.ecomic .captcha-check input {height: 45px; margin-left: 10px;}



.mod_form .help-block.form-error {color:red; font-size: 12px;}
.mod_form .form-check-input[type=checkbox] {border-radius:0px;}

fieldset, legend {
   all: revert;
}

legend {color:var(--purple-main);}
fieldset {border:1px solid #ced4da}



.sending-overlay {background-color: rgba(255,255,255,0.8); position: absolute; width:100%; top:0; left:0; right:0; bottom:0; z-index: 99; display:none;}

.sending-overlay .spin {
   width: 48px;
   height: 48px;
   display: grid;
   border: 2px solid #ccc9;
   border-radius: 50%;
   border-color: var(--purple-main) #ccc9;
   animation: spinner-e04l1k 1.2s infinite linear;
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-24px;
   margin-left:-24px;
}
.sending-overlay .spin::before,
.sending-overlay .spin::after {
   content: "";
   grid-area: 1/1;
   margin: 3.5px;
   border: inherit;
   border-radius: 50%;
}

.sending-overlay .spin::before {
   border-color: #ccc99 #ccc9;
   animation: inherit;
   animation-duration: 0.6s;
   animation-direction: reverse;
}
.sending-overlay .spin::after {
   margin: 14px;
}

.success-overlay {background-color:var(--purple-main);  position: absolute; width:100%; top:0; left:0; right:0; bottom:0; z-index: 99; display:none; color:#FFF;}
.success-overlay .int {  display: flex;justify-content: center; align-items: center; height: 100%; width:100%;}
@keyframes spinner-e04l1k {
   100% {
   transform: rotate(1turn);
   }
}

@media (max-width: 580px){
  .ecomic .card {padding:10px;}
}