@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;700&family=Roboto:wght@300;400;700&display=swap');

:root {
	--bs-primary: rgb(190,12,77);
	--bs-primary-rgb: 190,12,77;
	--bs-secondary:rgb(239,199,68);
	--bs-yellow-bpso: rgb(251,242,192);
	--bs-blue-bpso: rgb(89,210,254);
	--bs-primary-light: rgba(223,57,107,1);
	--bs-primary-lighter: rgba(223,57,107,0.2);
	--bs-yellow-bg: rgba(251,242,192,0.5);
	--bs-blue-bg: rgba(89,210,254,0.2);
	--bs-success: rgb(65,165,73);
	--bs-success-rgb: 65,165,73;
	 /* fonts */
 	--font-oswald: 'Oswald', sans-serif;
  --font-roboto: 'Roboto', sans-serif;

  /* font sizes */
  --font-size-13xl: 2rem;
  --font-size-base: 1rem;
  --font-size-5xl: 1.5rem;
  --font-size-lg: 1.13rem;
  --font-size-sm: 0.88rem;

  /* border radiuses */
  --br-2xl: 21px;
  --br-5xs: 8px;
  --br-3xs: 10px;
}

body {
	font-family: var(--font-roboto);
	font-weight: 400;
}
.bg-nojs {
	background-color: var(--bs-yellow-bg);
	min-height: 50vh;
}
.info-nojs {
	display: inline-block;
}

.gov-header {
	background-color: #3366cc;
	height: 48px;
	padding-top: 12px;
	width: 100%;
}

.gov-logo {
	max-height: 24px;
}
.branding h1 {
	font-size: 2rem;
}
.branding h1 a {
	color: var(--bs-primary);
}
.branding h1 a:hover,
.branding h1a:focus {
	color: var(--bs-primary);
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--bs-primary);
	font-family: var(--font-oswald);
	font-weight: 600;
	text-decoration: none;
}

h1 {
	font-size: 2.4rem;
}

h2 {
	font-size: 2rem;
	line-height: 2.2rem;
}

a {
	color: var(--bs-gray-700);
	text-decoration: none;
}

a:hover, a:focus {
	color: var(--bs-primary);
}
.btn-outline-secondary a:hover,
.btn-outline-secondary a:focus,
.btn-secondary a {
	color: var(--bs-white);
}

.tab-pane h4 a {
	color: var(--bs-primary);
	text-decoration: none;
}

.tab-pane h4 a:hover,
.tab-pane h4 a:focus {
	color: var(--bs-gray-700);
}

.modal-content a {
	color: var(--bs-primary);
	text-decoration: none;
}

.modal-content a:hover,
.modal-content a:focus {
	color: var(--bs-gray-700);
}
.alert-primary {
  color: var(--bs-gray-900);
  background-color: var(--bs-primary-lighter);
  border-color: var(--bs-primary);
}
.alert-error {
	color: var(--bs-white);
	background-color: var(--bs-primary-light);
	border-color: var(--bs-primary);
}

.btn-outline-primary {
	border-color: var(--bs-primary);
	border-radius: 0.5rem;
	color: var(--bs-primary);
}

.btn-primary,
.btn-primary .disabled,
.btn-primary:disabled {
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
	border-radius: 0.5rem;
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--bs-gray-600);
	border-color: var(--bs-gray-600);
}

.btn-outline-primary.active,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
  background-color: transparent;
  border-color: var(--bs-gray-600);
  color: var(--bs-gray-600);
}

.main-menu {
	background-color: var(--bs-primary);
}

.background-intro {
	background: url('../img/img-home.png') no-repeat right bottom;
	background-color: var(--bs-primary);
	background-size: contain;
	color: var(--bs-white);
}

.navbar {
	padding-top: 0;
	padding-bottom: 0;
}
.nav-global {
	border-bottom: 1px solid var(--bs-secondary);
}

.navbar-light .navbar-nav .nav-link {
	background-color: var(--bs-primary);
	color: var(--bs-white);
	padding: 1rem;
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
	background-color: var(--bs-secondary);
	color: var(--bs-black);
}

.background-intro h2 {
	color: var(--bs-white);
}
.description {
	font-family: var(--font-roboto);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4rem;
}
.abc-banner {
	background-image: repeating-linear-gradient(45deg, var(--bs-gray-100) 0, var(--bs-gray-100) 1px, transparent 0, transparent 40%);
	background-size: 12px 12px;
	background-color: var(--bs-gray-200);
}
.abc-banner .card {
	border-radius: 0;
}
.abc-capital {
	color: var(--bs-primary);
}
.abc-capital-2 {
	color: var(--bs-white);
}
.abc-cards .text-bg-warning,
.abc-banner .text-bg-warning {
	background-color: var(--bs-gray-400);
	border-color: var(--bs-gray-400);
}
.abc-card-text {
	min-height: 4rem
}
.background-intro .btn-secondary {
	background-color: var(--bs-secondary);
	border-color: var(--bs-secondary);
	color: var(--bs-gray-700);
}
.background-intro .btn-secondary:hover,
.background-intro .btn-secondary:focus {
	background-color: var(--bs-gray-700);
	border-color: var(--bs-gray-700);
	color: var(--bs-white);
}

.highlight {
	background-color: var(--bs-primary);
	border: none;
	height: 12rem;
	text-align: left;
	transition: background-image 0.5s ease;
	width: 100%;
}

.highlight:focus,
.highlight:hover {
	background-color: var(--bs-gray-600);
}
.highlight h1 svg path,
.highlight-internal h1 svg path {
	fill: var(--bs-secondary);
}
.highlight .span-text {
	color: var(--bs-white);
	font-family: var(--font-oswald);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.75rem;
	width: 50%;
}
.highlight .span-text-second,
.highlight-internal .span-text-second {
	width: 70% !important;
}
.highlight .span-text-last,
.highlight-internal .span-text-last {
	width: 90% !important;
}
.btn-general,
.btn-general-internal:hover,
.btn-general-internal:focus {
	background-image: url(../img/img-btn-1.png);
	background-repeat: no-repeat;
	background-size: cover;
}
.btn-general:hover,
.btn-general:focus,
.btn-general-internal {
	background-image: url(../img/img-btn-1-bn.png);
	background-repeat: no-repeat;
	background-size: cover;
}
.btn-recommendations,
.btn-recommendations-internal:hover,
.btn-recommendations-internal:focus {
	background-image: url(../img/img-btn-2.png);
	background-repeat: no-repeat;
	background-size: cover;
}
.btn-recommendations:hover,
.btn-recommendations:focus,
.btn-recommendations-internal {
	background-image: url(../img/img-btn-2-bn.png);
	background-repeat: no-repeat;
	background-size: cover;
}
.btn-documents,
.btn-documents-internal:hover,
.btn-documents-internal:focus {
	background-image: url(../img/img-btn-3.png);
	background-repeat: no-repeat;
	background-size: cover;
}
.btn-documents:hover,
.btn-documents:focus,
.btn-documents-internal {
	background-image: url(../img/img-btn-3-bn.png);
	background-repeat: no-repeat;
	background-size: cover;
}
.btn-details,
.btn-details-internal:hover,
.btn-details-internal:focus {
	background-image: url(../img/img-btn-4.png);
	background-repeat: no-repeat;
	background-size: cover;
}
.btn-details:hover,
.btn-details:focus,
.btn-details-internal {
	background-image: url(../img/img-btn-4-bn.png);
	background-repeat: no-repeat;
	background-size: cover;
}

.highlight-internal {
	background-color: var(--bs-gray-600);
	border: none;
	height: 12rem;
	margin-top: 1rem;
	text-align: left;
	transition: background-image 0.5s ease;
	width: 100%;
}

.highlight-internal:focus,
.highlight-internal:hover {
	background-color: var(--bs-primary);
}

.highlight-internal .span-text {
	color: var(--bs-white);
	font-family: var(--font-oswald);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.75rem;
	width: 50%;
}

.small, small {
	font-size: 0.85rem;
}

.small a,
small a {
	color: var(--bs-white);
}
.quiet a {
	color: var(--bs-primary);
}

.modal-body .list-group li {
	padding-bottom: 0.5rem;
}
.section-two {
	background-color: var(--bs-gray-200);
}
/*Form styles*/
.form-select,
.form-control {
	border: none;
	border-bottom: 1px solid var(--bs-gray-dark);
	border-radius: 0;
}
.form-datalist {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
}

.gray-form .btn-primary:hover,
.gray-form .btn-primary:focus {
	background-color: var(--bs-gray-300);
	border-color: var(--bs-gray-300);
	color: var(--bs-gray-800);
}
.gray-form a{
	color: var(--bs-white);
}

.gray-form a:hover,
.gray-form a:focus {
	color: var(--bs-gray-400);
}

.gray-form li {
	color: var(--bs-white);
}

.gray-form .alert-danger li {
	color: var(--bs-gray-800);
	list-style-type: none;
}

.gray-form .btn a:hover,
.gray-form .btn a:focus {
	color: var(--bs-gray-800);
}

.form-check-input:checked {
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
}
.form-check-input:focus {
	border-color: var(--bs-primary-light);
	box-shadow: 0 0 0 .25rem rgba(223,57,107,.25);
}
/* Invitations styles*/
.nav .invitations-pill{
	border-radius: 0.25rem 0 0 0.25rem;
	color: var(--bs-body-color);
	}
.nav-link {
	color: var(--bs-gray-800);
}
.nav .nav-link:hover,
.nav .nav-link:focus {
  background: var(--bs-gray-600);
  color: #fff;
}

.nav .nav-link.active{
	background-color: var(--bs-primary);
	color: var(--bs-white);
}

.invitations-content {
	border: 2px solid var(--bs-primary);
	border-radius: 0 0.5rem 0.5rem 0;
}

.alert-disclaimer{
	background-color:var(--bs-warning);
	color: var(--bs-primary);
}

.table-primary {
	--bs-table-bg: transparent;
}

.table > thead {
	color: var(--bs-white);
	background-color: var(--bs-primary);
	font-size: var(--font-size-sm);
}
.accordion .alert,
.accordion-item .table,
.accordion .table {
	margin-bottom: 0;
	font-size: var(--font-size-sm);
}

.btn-go-link > .btn-go {
	content: url('../assets/iconoira.svg');
	width: 1.5rem;
}

.btn-go-link > .btn-go:hover {
	content: url('../assets/iconoira-hover.svg');
	width: 1.5rem;
}

.details-group .btn-outline-primary {
	border-radius: 0;
}

.modal-map{
	background-color: var(--bs-primary);
	color: var(--bs-white);
}

.modal-map a {
	color: var(--bs-white);
}

.table-no-background {
  background-color: transparent;
  color: var(--bs-white);
}

.btn-go-modal > .btn-go {
	content: url('../assets/modal-go.svg');
	width: 1.5rem;
}

.btn-go-modal > .btn-go:hover {
	content: url('../assets/iconoira-hover.svg');
	width: 1.5rem;
}

.btn-close .btn-close-map{
	color: var(--bs-white);
}

.btn-apply{
	margin: 1rem auto;
	width: 20rem;
}

.nav .invitations-tab{
	color: var(--bs-body-color);
}

.bg-card{
	background-color: var(--bs-gray-600);
}

.bg-card h5{
	color: var(--bs-white);
}

.form-group {
	margin-top: 1rem;
}

/*Footer*/
.daneFooter{
	background-color: var(--bs-primary);
}

.nameFooter {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.border-primary {
  border-color: var(--bs-primary) !important;
}

footer h5 {
	color: var(--bs-white);
	text-align: center;
	font-size: 0.8rem;
	line-height: 2.5rem;
	margin-bottom: 0;
}

footer .separator {
	margin-left: 2.5rem;
}

.dane-social-networks ul,
.dane-social-networks li {
	float: left;
	list-style: none;
	padding-left: 0;
}

.dane-social-networks ul:first-child {
	margin-left: 2.5rem;
}

.redes-ins {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 20px;
	height: 21px;
	width: 21px;
}

.dane-social-networks ul li a,
.dane-social-networks ul li a:hover,
.dane-social-networks ul li a:focus,
.dane-social-networks ul li a:visited {
  color: transparent;
}

.instagram-footer {
  background-image: url(https://www.dane.gov.co/files/images/nuevaImg/instagram_footer_off.png);
}

.twitter-footer {
  background-image: url(https://www.dane.gov.co/files/images/nuevaImg/twitter_footer_off.png);
  margin-left: 40px;
}

.facebook-footer {
  background-image: url(https://www.dane.gov.co/files/images/nuevaImg/facebook_footer_off.png);
  margin-left: 40px;
}

.youtube-footer {
  background-image: url(https://www.dane.gov.co/files/images/nuevaImg/youtube_footer_off.png);
  margin-left: 40px;
}

.icon-position {
  float: left;
  height: 28px;
  margin-right: 15px;
  width: 28px;
}
.margin-icon_pos {
  margin-bottom: 100px;
}

.text-dane-info {
	color: var(--bs-white);
	font-size: 0.8rem;
}

.text-dane-info p {
	margin: 0;
}

.text-dane-info a {
	color: var(--bs-white);
}

.text-dane-info ul,
.text-dane-info li {
	padding-left: 0;
}

/*Login css*/
.background-login {
	background: url('../img/img-login.png') no-repeat left bottom;
	background-color: var(--bs-gray-600);
	background-size: contain;
	color: var(--bs-white);
}
.background-login .card {
	background-color: rgba(255, 255, 255, 0.9);
	color: var(--bs-gray-800);
}

.container-login {
	min-height: 40vh;
}

.container-login h2 {
	color: var(--bs-white);
}
.background-login .btn-outline-primary {
	border-color: var(--bs-white);
}
.background-login .btn-outline-primary:hover,
.background-login .btn-outline-primary:focus {
	border-color: var(--bs-primary);
}
.btn-complete a{
	text-decoration: none;
}

/*Accordion*/
.accordion-button:focus {
	border-color: var(--bs-primary);
	box-shadow: 0 0 0 .25rem rgba(255, 255, 255, 0.25);
}
.accordion-button:not(.collapsed){
	color: var(--bs-primary);
	background-color: rgba(223,57,107,0.2);
}
.accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23be0c4d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
/*Inners pages*/
.invitations-content .tab-pane .table{
	margin-bottom: 0;
}
.invitations-content .tab-pane .card-body{
	padding: 0 0.7rem;
}
.invitations-content .tab-pane .nav-tabs {
  border-bottom: 1px solid var(--bs-gray-700);
}
.invitations-content .tab-pane .tab-content {
	background-color: var(--bs-white);
}

.bg-warning,
.bg-success {
	--bs-bg-opacity: 0.75;
}

@media (max-width: 575.98px) {
	html {
		font-size: 12px;
	}
	.highlight .span-text {
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.25rem;
	}
	h1 > svg {
		font-size: 1.6rem;
	}
}

@media (min-width: 576px) and (max-width: 767.98px) {
	html {
		font-size: 12px;
	}
	.highlight .span-text {
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.25rem;
	}
	h1 > svg {
		font-size: 1.6rem;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	html {
		font-size: 12px;
	}
	.branding h1 {
	font-size: 1.5rem;
}
	.btn-lg {
		font-size: 1rem;
	}
	.abc-card-text {
		min-height: 8rem
	}
	.h-50 {
		height: 35% !important;
	}
	.highlight .span-text {
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.25rem;
	}
	h1 > svg {
		font-size: 1.6rem;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	html {
		font-size: 12px;
	}
	.abc-card-text {
		min-height: 8rem
	}
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
	.abc-card-text {
		min-height: 6rem
	}
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: #FF3D00;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
