:root {
	--primary-color: #0066ff;
	--secondary-color: #f7ba2b;
	--primary-color-dark: #0860e3;
	--gray: #5f666d;
	--card-boder-radius: 6px;
    --color-bg-1: #f6f6ff;
    --hero-bg: rgb(39, 39, 42);


	/* Bs Variables */
	--bs-border-radius-lg: 0.9rem;
	--bs-primary-rgb: 0, 102, 255;
}


html, body {
	width: 100%;
	height: 100%;
}
body {
	font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	background-color: #ebeff2;
	background-color: rgb(244, 244, 245);
	font-family: 'Satoshi', -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	-webkit-font-smoothing: antialiased;
}

body.admin {
	background: #f7f9fb;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-weight: 900;
	/* letter-spacing: -1px; */
	color: #00435d;
	color: #1f2831;
}
.mt-6 { margin-top: 4.5rem !important;}
.my-6 { margin-top: 4.5rem !important; margin-bottom: 4.5rem !important; }
.mw-800 {max-width: 800px;}
.fw-bolder { font-weight: 900 !important;}
a {
    color: var(--primary-color);
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
a:hover {
	color: var(--primary-color-dark);
}

h1, .h1 {
	font-size: 2em;
}

p.lead {
	line-height: 1.8;
    font-size: 18px;
	font-weight: 400;
	color: var(--gray);
}

.badge-lg { font-size: 14px; }

.card-img-top.full-radius {
	border-radius: var(--card-boder-radius);
}

.modal {
	--bs-modal-padding: 2rem;
	--bs-modal-padding: 1.2rem;
}
.modal-header.big .modal-title {
	font-size: 33px;
    line-height: 30px;
}
.modal-header.nb {
	border-bottom: 0;
}
.modal .btn-close {
	position: absolute; top: 26px; right: 22px;
	z-index: 9999;
}
.modal-backdrop { background-color: #2b2548;}

@media (max-width: 576px) {
	.modal .modal-dialog {
		display: flex;
		align-items: flex-end;
		/* min-height: calc(100% - var(--bs-modal-margin) * 2); */
		margin: 0;
		min-height: 100%;
	}
	.modal .modal-dialog .modal-content {
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
		border: 0;
	}
}
@media (min-width: 576px) {
	.modal-sm {
		--bs-modal-width: 400px;
	}
}

.fw400 { font-weight: 400 !important; }
.fw700 { font-weight: 700 !important; }

.fs14 { font-size: 14px !important; }
.fs17 { font-size: 17px !important; }
.fs20 { font-size: 20px !important; }

.color-brand { color: var(--primary-color); }
.color-grey { color: #788790; }
.color-lite { color: #475761; }

#vue-app, .main {
	width: 100%;
	height: 100%;
}


[v-cloak] { display: none !important; }

.btn{border-radius:6px;padding-left:17px;padding-right:17px;font-weight:700;}
.btn:not([class*="outline"]){border:0}
.btn-primary,.btn-brand{background:var(--primary-color);color:#fff}
.btn-primary:hover,.btn-brand:hover{background:var(--primary-color-dark);color:#fff}
.btn-primary:active,.btn-brand:active,.btn-primary:focus-visible,.btn-brand:focus-visible{background-color:var(--primary-color-dark) !important;color:#fff !important}

.btn-outline-primary { color: var(--primary-color); border-color: var(--primary-color);}
.btn-outline-primary:hover { background: var(--primary-color); color: white; border-color: var(--primary-color);}
.btn-outline-primary:active { background: var(--primary-color-dark) !important; color: white; border-color: var(--primary-color-dark) !important;}
.btn-success{background-color:#99c432;border-color:#89b02d}
.btn-success:hover{background-color:#89b02d}
.btn-icon {
	width: 32px;
	height: 32px;
	padding: 0;
}
.btn-link {
	text-decoration: none;
    color: var(--primary-color);
}
.btn-block { width: 100%; }
.btn-link:hover { color: var(--primary-color-dark); }
.btn-link:active { color: var(--primary-color-dark) !important; }

.btn-lg{ font-size: 18px; border-radius:6px;padding: 12px 28px; font-weight:700;}

.main-hero { background-color: var(--hero-bg);}
.modal-header { border-bottom: 1px solid rgba(0,0,0,.06);     padding: 20px 30px; }
.navbar-light .navbar-nav .nav-link { color: #254a58; font-weight: 700; }
.navbar-brand{ padding: 0;}
.navbar-brand .logo { height: 32px; }
.navbar-brand .isologo { height: 48px; }
.navbar{min-height:70px;background-color:var(--hero-bg);border-bottom:1px solid rgba(0,0,0,0)}
.navbar-dark .navbar-nav .nav-link{color:#fffdef}
.dropdown-menu-categories{width:650px;left:auto;right:0;flex-wrap:wrap}
.dropdown-menu-categories.show{display:flex}
.dropdown-menu-categories .dropdown-item{width:25%}
.navbar .nav-item{font-weight:700;margin-left:25px}
.navbar .user-profile-pic { width: 40px; height: 40px; border-radius: 20px; }
.navbar-nav { align-items: center;}

footer{background-color:#fdfcfc;padding:40px 0}
footer .text-muted { font-size: 90%; line-height: 1.8; margin-right: 20px;}
footer a{color:#25243c;font-size:14px}
.footer-category-list{display:flex;flex-wrap:wrap}
.footer-category-list > a{width:50%;min-width:50%}
.footer-categories{list-style:none;padding:0;margin:0}
.footer-categories li{float:left;width:46%;font-size:13px;margin:0 2%}

.hero{position:relative}
.hero > img{width:100%}
.jumbotron{border-radius:0;text-align:center;background-color:#40b4c9}
.jumbotron h1{font-weight:700;font-size:43px}
.jumbotron .lead{font-weight:400;color:#8784a5}
.jumbotron-content{margin-top:40px;margin-bottom:110px}
.page-link{color:var(--primary-color)}
.page-item.active .page-link{z-index:1;color:#fff;background-color:var(--primary-color);border-color:var(--primary-color)}

.header-container { text-align: center; padding: 100px 0;}
.header-container h1 { font-size: 38px;}
.header-container p { margin-top: 20px; color:#555f78; font-size: 18px;}

.quote-card-fan {
	position: absolute;
	height: 100%;
	width: 100%;
}
.quote-card-fan div:nth-child(1) {
	transform: translate(-50%, -50%) rotate(-16.6666666667deg);
}
.quote-card-fan div:nth-child(2) {
	transform: translate(-50%, -50%) rotate(-8.3333333333deg);
}
.quote-card-fan div:nth-child(3) {
	transform: translate(-50%, -50%) rotate(0deg);
}
.quote-card-fan div:nth-child(4) {
	transform: translate(-50%, -50%) rotate(8.3333333333deg);
}
.quote-card-fan div:nth-child(5) {
	transform: translate(-50%, -50%) rotate(16.6666666667deg);
}
.quote-card-fan:hover div:nth-child(1) {
	transform: translate(-50%, -50%) rotate(-20deg);
}
.quote-card-fan:hover div:nth-child(2) {
	transform: translate(-50%, -50%) rotate(-10deg);
}
.quote-card-fan:hover div:nth-child(3) {
	transform: translate(-50%, -50%) rotate(0deg);
}
.quote-card-fan:hover div:nth-child(4) {
	transform: translate(-50%, -50%) rotate(10deg);
}
.quote-card-fan:hover div:nth-child(5) {
	transform: translate(-50%, -50%) rotate(20deg);
}
.quote-card-fan-item {
	background: white;
	background-size: cover;
	height: 300px;
	width: 200px;
	border-radius: 5px;
	position: absolute;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
	left: 50%;
	top: 50%;
	transform-origin: center 120%;
	transition: transform 1s ease-out;
}


.card{border-radius:var(--card-boder-radius);background-color:#fdfdfd;border:1px solid rgba(0,0,0,.07);margin-bottom:25px;break-inside:avoid;-webkit-column-break-inside:avoid}
.card-header{border-bottom:1px solid rgba(0,0,0,.07)}
.card > a{text-decoration:none!important;cursor:zoom-in!important}
.card-body{padding:1rem}



.preview {
    display: flex;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 10px;
    padding: 6px;
    display: none;
	background-color: white;
}
.preview img {
  border-radius: 8px;
  width: 180px;
  min-width: 180px;
  object-fit: cover;
  height: 150px;
  margin-right: 20px;
}
.preview .preview-content {
display: flex;
    flex-direction: column;
    justify-content: center;
        margin-right: 10px;
}

.preview-domain-link {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: row;
  }
  .preview-favicon {
	width: 20px !important;
	height: 20px !important;
	object-fit: cover !important;
	min-width: unset !important;
	border-radius: 2px !important;
	margin-right: 10px !important;
  }

  #data-container, pre.code {
	font-family: "Operator Mono", "Fira Code", "SF Mono", "Roboto Mono", Menlo, monospace;
	font-size: 13px;
	line-height: 1.85;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	-moz-tab-size: 2;
	-o-tab-size: 2;
	tab-size: 2;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	background: #fff;
	color: #495057;
	padding: 14px;
	margin: .5em 0;
	overflow: auto;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 8px;
	overflow: hidden;

	background-color: #22212a;
	color: #d4d4d4;
  }

  #data-container:empty{
	display: none;
  }

  #ajax-loader-container{
	display: none;
	margin: 0 auto;
	width: 120px;
  }

  #ajax-loader-container img{
	width: 100%;
  }
  .home-feature .bi { font-size: 22px; background-color: var(--primary-color); color: white; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 4px;}
  .home-feature p { font-size: 18px; }

.curl {
    width: auto;
    display: inline-block;
    background: #1d1c1c;
    border-radius: 8px;
    overflow: hidden;
    color: #fff;
    line-height: 50px;
    height: 50px;
    padding: 0 20px;
    text-align: left;
    font-family: monospace;
}
.curl.code {
	line-height: 1.5;
    height: auto;
	width: 100%;
	padding: 0 24px;
}
.pricing {
	flex-wrap: nowrap;
	overflow-x: auto;
}
.pricing .pricing-col {
    min-width: 260px;
    max-width: 320px;
}
.pricing .plan-duration {
	position: relative;
	top: 4px;
}
.pricing .plan-features li {
	font-size: 15px;
	margin-bottom: 8px;
	color: #000;
	font-weight: 500;
}

.is-loading::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-right: 5px;
    color: transparent !important;
    position: relative;
    top: 2px;
}


  /* Animación para girar el spinner */
  @keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }