.btn-primary{
    background: #2D6DF6!important;
    color: white!important;
    text-align: center;
    font-family: "surasans"!important;
    font-size: 16px;
    font-style: normal;
    font-weight: 600!important;
    border: none!important;
    letter-spacing: 0px !important;
}

.contextual-region.block--type-basic.block.block--basic.block--apigee-kickstart-nombredelsitio {
    width: 100% !important;
    position: absolute;
    left: 0px;
    top: 0px;
}

.s-c-header__descriptor{
    width: 100% !important;
    background: #0033a0;
    padding-top: 14px;
    padding-bottom: 12px;
    position: absolute;
    left: 0px;
    top: 96px;
}

.s-c-header__descriptor span {
    font-size: 18px;
    line-height: 18px;
    font-family: "sura sans";
    font-weight: 600;
    padding-left: 13.75px;
}


.s-c-header__descriptor .container {
    padding-left: 0px;
    padding-top: 14px;
    padding-bottom: 12px;
}

table tbody td, .table tbody td {
    word-break: break-Word!important;
}

.paragraph.cta.cta--default.py-6.bg-dark.text-light a.btn.btn-primary {
    color: #0033a0 !important;
}

body .views-exposed-form .form-actions input.btn-reset.btn {
    text-align: center;
    padding: 0px !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    display: flex;
    margin-bottom: 24px !important;
}

select#edit-environment {
    width: auto !important;
}

.form-control, .form-select {
    padding: 0.5rem 3.75rem 0.5rem 1.25rem !important;
    height: auto !important;
    width: 100% !important;
}


.dropbutton-action.secondary-action a:hover, .dropbutton-action.secondary-action a:hover::after, .dropbutton-action.secondary-action a:focus, .dropbutton-action.secondary-action a:focus::after {
    background: #969696!important;
}

.dropbutton-toggle button:hover {
    background-color: #969696 !important;
}

.dropbutton-action a:hover, .dropbutton-action a:focus {
    background: #969696 !important;
}

input#edit-submit {
    width: 100% !important;
    margin-top: 16px !important;
}

button.button--primary.js-form-submit.form-submit.btn.btn-primary.button{
background: #2D6DF6!important;
    color: white!important;
    text-align: center;
    font-family: "surasans"!important;
    font-size: 16px;
    font-style: normal;
    font-weight: 600!important;
    border: none!important;
    letter-spacing: 0px !important;
}

a#edit-cancel {
font-family: "surasans"!important;
    text-decoration: none !important;
    display: flex;
    height: 48px !important;
    padding: 8px 32px !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 300px !important;
    letter-spacing: 0px !important;
    text-transform: initial !important;
    font-size: 16px !important;
    background: white !important;
    margin-top: 16px !important;
    border: solid 1px #0033A0;
    color: #0033A0 !important;
}

span.ui-dialog-title {
    font-size: 20px;
    font-weight: bold;
}

.ui-dialog .ui-dialog-buttonpane button {
font-family: "surasans"!important;
    text-decoration: none !important;
    display: flex;
    height: 48px !important;
    padding: 8px 32px !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 300px !important;
    letter-spacing: 0px !important;
    text-transform: initial !important;
    font-size: 16px !important;
    background: white !important;
    margin-top: 16px !important;
    border: solid 1px #0033A0;
    color: #0033A0 !important;
}

button.ui-dialog-titlebar-close::after {
    content: "X";
    font-family: "sura sans";
    font-size: 20px !important;
    line-height: 0px !important;
}

.ui-dialog-titlebar.ui-corner-all.ui-widget-header.ui-helper-clearfix.ui-draggable-handle {
    background: transparent !important;
    border: none !important;
}


button.ui-dialog-titlebar-close {
    border-radius: 300px !important;
    border: none !important;
    background: transparent !important;
}


.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-dialog-buttons.ui-draggable.ui-resizable {
    border-radius: 32px !important;
    overflow: hidden !important;
    padding: 8px !important;
    border: none !important;
}

input#edit-actions-submit {
    width: 100% !important;
}

a#edit-actions-delete {
text-decoration:none!important;
    display: flex;
    height: 48px !important;
    padding: 8px 32px !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 300px !important;
    letter-spacing: 0px !important;
    text-transform: initial !important;
    font-size: 16px !important;
    background: white !important;
    margin-top: 16px !important;
    border: solid 1px #0033A0;
    color: #0033A0 !important;
}

.collapsible-card__toggle span.btn.btn-link.px-0 {
    background: transparent !important;
    font-size: 18px !important;
    font-weight: bold !important;
    border:none!important;
text-decoration:none!important;
color:#2d6df6!important;
}

.collapsible-card.collapsible-card--collapsed.apigee-entity--app.apigee-entity--app--view-mode-collapsible-card.collapsible-card--active {
    border-radius: 12px !important;
}

.collapsible-card--active .collapsible-card__toggle {
    border-radius: 12px 12px 0px 0px !important;
}

span.badge {
    border-radius: 300px !important;
    font-weight: 300 !important;
}

button.collapsible-card__toggle {
    border-radius: 12px !important;
    border: solid 1px #2d6df6 !important;
    background: #DFEAFF !important;
}

a.bg-light:hover, a.bg-light:focus, button.bg-light:hover, button.bg-light:focus {
    background: #DFEAFF !important;
}

button.collapsible-card__toggle:hover {
    border: solid 1px #2d6df6 !important;
    background: #DFEAFF !important;
}

.alert.alert-success.border-0.rounded-sm.alert-dismissible {
    border-radius: 12px !important;
}


.btn-primary:hover, .btn-primary:focus {
    background-color: #0033a0 !important;
    border-color: #0033a0 !important;
}

.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
    color: White!important;
   background-color: #0033a0 !important;
    border-color: #0033a0 !important;
}


input#edit-preview {
    display: none !important;
}

small#edit-displayname-0-value-machine-name-suffix button {
    font-size: 16px !important;
    background: white !important;
    color: #0033a0 !important;
    font-weight: bold !important;
    height: 48px !important;
    padding: 8px 32px !important;
    justify-content: center !important;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    display: none!important;
    border-radius: 300px;
    letter-spacing: 0px !important;
    border: 1px solid #0033a0 !important;
}

.view-apigee-api-catalog h2.card-title {
    font-size: 20px !important;
    font-weight: bold;
    color: #2d6df6;
    margin: 0px !important;
}

.btn-primary:hover{
    background: #0033A0;
    transition: 200ms all;
}

.card:focus .card-footer, .card:hover .card-footer {
    background-color: #0033A0!important;
}


h1,h2,h3,h4,h5,h6,p,li,a,span,button,select,label,input,small,div{
    font-family: "surasans";
    font-style: normal !important;
    font-weight: normal;
    letter-spacing: 0px !important;
}

.apidoc--view-mode-card {
    border-radius: 12px !important;
    overflow: hidden;
}

.views-exposed-form {
    border-radius: 12px !important;
}

.views-exposed-form .fieldset-legend {
    font-weight: bold;
    color: #2d6df6 !important;
}

span.text-end.badge {
    color: #2d6df6 !important;
    margin: 8px 0px !important;
    padding: 0px 30px !important;
}

.form-check.highlight > svg > path {
    fill: #2D6DF6 !important;
}

.form-check > svg > path {
    fill: #0033a0 !important;
}

.card-body .apidoc__body p {
    margin: 0px !important;
}

details.details.faq.faq--teaser {
    padding: 0px !important;
    border: 1px solid #81B1FF;
    border-radius: 12px !important;
    margin: 8px 0px !important;
}

.faq .details-wrapper {
    padding: 0px 16px 16px 16px !important;
}

.faq .details__summary .details__icon {
    top: 30%!important;
    right: 16px!important;
}

.navbar-toggler {
    background: transparent!important;
    color: white!important;
    box-shadow: none !important;
}

.faq h2.details__title span {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #0033a0;
    padding-right: 20px;
    display: block;
}

footer .footer {
    background: white !important;
    padding: 24px 0px !important;
}

footer a.nav-link {
    color: #2d6df6!important;
    font-size: 16px !important;
}

.copyright {
    background: white!important;
    padding: 16px 0px!important;
}


.copyright p{
color: #0033a0 !important;
    font-size: 16px !important;
     margin: 0px !important;
}

footer.page__footer {
    border-top: 1px solid #0033a0;
}

footer.page__footer .footer .container>div:before {
    content: " ";
    display: block !important;
    height: 40px;
    width: 120px;
    background: url(https://developer.plataformadigital.labsura.com.co/sites/default/files/2025-07/logoazulsura.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin: 8px;
}

.path-user form {
    width: 100% !important;
    margin: 0 auto!important;
}

.container>div>div.col-md-8{
    width: 100%!important;
}

.title-bar__content {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 16px !important;
}

.copyright>div>div {
    justify-content: flex-start !important;
}
  
.view-faq .item-list > ul > li:last-child {
    border-bottom: none!important;
}

.user .bg-lighter {
    border-radius: 12px !important;
}

.user h3 {
    font-weight: bold;
    color: #2d6df6 !important;
}

.user--full .field__label {
    color: #0033a0 !important;
}

.view-faq summary.details__summary {
    padding: 16px !important;
}

.views-exposed-form .form-actions input.btn-reset.btn {
    padding-left: 3.2rem!important;
}

.buttons--card-group span.buttons__item a {
    max-width: 320px !important;
    margin: 0 auto;
    font-size: 16px !important;
    font-weight: 600;
    font-family: "surasans";
    color: #0033A0 !important;
    border-color: #0033A0 !important;
}

li.nav-item.tabs__tab a {
    border: none !important;
    background: transparent !important;
    color: #5C5C5C !important;
    font-size: 16px !important;
}

.nav-tabs .nav-link.active:after {
    border-radius: 30px 30px 0px 0px;
}

li.nav-item.tabs__tab a.nav-link.active {
    color: #2d6df6 !important;
}

ul.tabs.nav-tabs.nav-tabs--primary.clearfix {
    border-left: none !important;
    justify-content: center;
    display: flex;
}

h1.page__title {
    font-weight: bold;
    color: #0033a0 !important;
}

.is-collapse-enabled .nav-tabs:before, .is-horizontal .nav-tabs:before {
    border-bottom: 1px solid #81B1FF !important;
}

.card-group--default .card {
    border-radius: 12px !important;
    overflow: hidden !important;
    height: 100%!important;
}

.card-group--default .card:hover {
    border: 1px solid #81B1FF;
}

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-group--default .row{
    align-items: stretch!important;
}

.card-group--default .row .h-100 {
    height: auto !important;}


h3.card-title {
    font-size: 24px !important;
    font-weight: bold !important;
    color: #3f3f41 !important;
}

.card-body p {
    font-size: 16px !important;
    font-weight: 300 !important;
    color: #3f3f41 !important;
}

.card-footer {
    width: 90% !important;
    border-radius: 300px !important;
    margin: 0px auto 20px auto !important;
    text-align: center;
    font-family: "surasans";
    font-size: 16px !important;
    height: 48px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: white !important;
    background: #2D6DF6 !important;
    letter-spacing: 0px !important;
    box-shadow: none !important;
}

.card-img-top {
    padding: 0px !important;
    width: 100% !important;
    overflow: hidden;
}

.card-img-top img {
    width: 100% !important;
    border-radius: 0px !important;
}

.hero {
    display: flex;
    justify-content: center;
    padding: 20px 10% !important;
    background:white!important;
    height: auto !important;
    min-height: 500px;
    justify-content: center;
    display: flex;
    align-items: center;
}

.hero h1, .hero p{
    text-align: left;
}

.bg-light {
    background: #F4F4F4 !important;
}

.bg-lighter {
    background: #DFEAFF !important;
}

nav.page__breadcrumbs, .breadcrumb {
    background: #DFEAFF !important;
}

.title-bar {
    padding-top: 8px !important;
}

li.breadcrumb-item, li.breadcrumb-item:before, li.breadcrumb-item a {
    color: #0033A0 !important;
    font-size: 14px !important;
    letter-spacing: 0px !important;

}

h1.title-bar__title {
    font-weight: bold;
    color: #0033a0 !important;
}

.title-bar__icon {
    display: none !important;
}

.title-bar__content {
    border-color: #2d6df6 !important;
    border-width: 1px !important;
}

.title-bar__field-text {
    font-size: 16px;
    color: #3f3f41 !important;
}

li.breadcrumb-item:before {
    font-weight: 100 !important;
    font-size: 20px !important;
    line-height: 20px;
}

ol.breadcrumb li:last-child {
    font-weight: bold !important;
}

ol.breadcrumb li:last-child span {
    font-weight: bold !important;
}

.page__title span {
    font-weight: bold;
    color: #0033a0 !important;
}

.hero__wrapper {
    display: flex;
    flex-direction: column-reverse;
    width: 100% !important;
    background: white !important;
    align-items: center;
    max-width: 1440px;
}

.navbar-nav .nav-item .nav-link.is-active::after, .navbar-nav .nav-item.active::after{
    display: none!important;
}

.navbar-collapse.collapse.show {
    position: absolute;
    background: #ffffff;
    width: 100% !important;
    left: 0px !important;
    top: 96px !important;
    box-shadow: 0px 16px 20px 0px rgba(0, 0, 0, 0.1);
}

.navbar-collapse.collapse.show a {
    color: #2d6df6 !important;
    width: 100% !important;
    text-align: left !important;
    justify-content: left;
    padding: 0px !important;
    height: 48px !important;
}

.navbar-collapse.collapse.show .block.block--apigee-kickstart-menu-account ul {
    flex-direction: column-reverse !important;
    display: flex;
}

.navbar-collapse.collapse.show li {
    text-align: left;
    width: 100% !important;
    padding: 0px 24px;
}

.hero__content.py-9 {
    padding: 32px 0px !important;
}

article>.paragraph {
    padding-left:16px;
    padding-right:16px;
}

.navbar {
   min-height: 96px !important;
   margin-bottom: 50px!important;
}

a.navbar-brand img {
    height: 38px !important;
}

.hero__media {
    position: initial;
    display: block !important;
}

.hero__media div{
    height: 100%!important;
    display: flex;
}


.buttons.buttons--hero {
    display: flex;
    justify-content: start;
}

.btn {
    display: flex;
    height: 48px !important;
    padding: 8px 32px !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 300px !important;
    letter-spacing: 0px !important;
    text-transform: initial !important;
    font-size: 16px!important;
}

input[type="text"],input[type="password"],input[type="email"] {
    border: solid #0033A0 1px !important;
    border-radius: 12px !important;
    min-height: 48px !important;
    background: white !important;
}

.form-label {
    color: #2D6DF6;
}

h1.hero__title {
    font-size: 48px !important;
    color: #2d6df6;
    font-weight: 700 !important;
    line-height: 48px;
}

.hero p {
    font-size: 22px !important;
    color: #3f3f41 !important;
    line-height: 26px !important;
}

.hero__media img.img-fluid {
    height: 100% !important;
    object-fit: cover;
    max-width: 1000px!important;
    width: 100%!important;
}

.hero .contextual {
    position: initial !important;
}


.navbar .container {
    max-width: 1440px;
    width: 100% !important;
    padding: 0px!important;
}

.navbar-nav a.nav-link {
    font-size: 18px !important;
    font-weight: 600 !important;
    border-radius: 300px;
    line-height: 18px !important;
    padding: 8px 16px !important;
    height: 40px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar-nav a.nav-link:hover {
    background: #0033a0;
}

/*Cards inicio*/

#comofunciona {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0px 16px;
  margin-bottom: 40px!important;
}

#comofunciona .cardsfunciona {
    border-radius: 12px;
    overflow: hidden;
    padding: 8px 16px !important;

}

#comofunciona .comocardimg {
    height: 220px;
    background-position: center;
    background-repeat: no-repeat;
    width: 100% !important;
    background-size: contain;
    margin: 8px 0px!important;
}

/* Fondos específicos por tarjeta */
#comofunciona .comocard1 .comocardimg {
  background-image: url('https://developer.plataformadigital.labsura.com.co/sites/default/files/2025-09/elige.png');
}

#comofunciona .comocard2 .comocardimg {
  background-image: url('https://developer.plataformadigital.labsura.com.co/sites/default/files/2025-07/construye.png');
}

#comofunciona .comocard3 .comocardimg {
  background-image: url('https://developer.plataformadigital.labsura.com.co/sites/default/files/2025-07/implementa.png');
}

#comofunciona .cardsfunciona h3 {
    color: #2D6DF6 !important;
    font-size: 22px !important;
    text-align: center;
    font-weight: bold;
    margin: 0px 0px 4px 0px;
}

#comofunciona .cardsfunciona p {
    color: #0033a0 !important;
    margin: 0;
    text-align: center;
    font-size: 16px !important;
    line-height: 22px;
}

.cta--default.bg-dark a.btn.btn-primary {
    font-size: 16px !important;
    background: #e3e829 !important;
    color: #0033a0;
    font-weight: bold;
}

.cta--default.bg-dark a.btn.btn-primary:hover {
    background: #D7DE17 !important;
}


.block--apigee-kickstart-menu-account ul li:first-child a.nav-link {
    font-size: 16px !important;
    background: #e3e829 !important;
    color: #0033a0!important;
    font-weight: bold!important;
    display: flex;
    height: 48px!important;
    padding: 8px 32px!important;
    justify-content: center!important;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 300px;
    letter-spacing: 0px !important;
}

.block--apigee-kickstart-menu-account ul li:first-child a.nav-link:hover {
    background: #D7DE17 !important;
}

.block--apigee-kickstart-menu-account ul {
    display: flex;
    flex-direction: row-reverse !important;
    justify-content: center;
    align-items: center;
    gap: 8px !important;
}


.cta--default.bg-dark {
    background: #2d6df6 !important;
}

.cta--default.bg-dark .cta__title, .cta--default.bg-dark p  {
    color: white!important;
    margin: 0px 0px 8px 0px !important;
}

.card-group__title, .tituloseccion, .cta__title {
    font-size: 32px !important;
    font-weight: bold;
    color: #2D6DF6 !important;
}

.comofuncionatitulo {
    margin-bottom: 40px!important;
    text-align: center;
    color: #0033a0 !important;
}

/*Fondo comofuncion*/

[data-quickedit-entity-id="paragraph/197"] .col-md-8 {
 width: 100%!important;
}
[data-quickedit-entity-id="paragraph/199"] .col-md-8 {
 width: 100%!important;
}

[data-quickedit-entity-id="paragraph/197"] {
    /*background: #DFEAFF!important;*/
    padding: 1rem 0px!important;
}


[about="/home"] .paragraph.text:nth-child(3) .col-md-8 {
 width: 100%!important;
}

[about="/home"] .paragraph.text:nth-child(4) .col-md-8 {
 width: 100%!important;
}

[about="/home"] .paragraph.text:nth-child(4) {
    padding: 1rem  0px!important;
    /*background: #DFEAFF!important;*/
}


[about="/home"] .card-group--default .col.h-100:last-child .card {
    background: #E5E9EA !important;
    border: none !important;
    box-shadow: none !important;
}

[about="/home"] .card-group--default .col.h-100:last-child .card h3 , [about="/home"] .card-group--default .col.h-100:last-child .card p{
    color: #888B8D!important;
}

.bloque-opendata {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px;
  gap: 24px;
  max-width: 1200px;
  margin: auto;
  border: solid 2px #2D6DF6 !important;
  border-radius: 24px !important;
}

.opendata-img {
  width: 200px;
  height: 200px;
  background-image: url('https://developer.plataformadigital.labsura.com.co/sites/default/files/2025-07/quesopendata.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.opendata-texto {
  text-align: center;
}

.opendata-texto h2 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 12px;
}

.opendata-texto p {
    max-width: 600px;
    margin: auto;
    color: #3f3f41 !important;
    text-align: left;
    font-size: 16px !important;
    line-height: 22px;
}

/* Desktop & tablet desde 768px en adelante */
@media (min-width: 768px) {
  .bloque-opendata {
    flex-direction: row;
    justify-content: center;
    text-align: left;
    gap: 48px;
  }

  .opendata-img {
    width: 280px;
    height: 280px;
  }

  .opendata-texto {
    text-align: left;
    max-width: 600px;
  }

  #comofunciona {
    flex-direction: row;
    justify-content: space-between;
  }

  #comofunciona .cardsfunciona {
    width: 32%;
  }

  .hero__wrapper {
    flex-direction: row;}
}


@media (max-width: 992px){
.navbar-collapse{
    position: absolute;
    background: #ffffff!important;
    width: 100% !important;
    left: 0px !important;
    top: 96px !important;
    box-shadow: 0px 16px 20px 0px rgba(0, 0, 0, 0.1);
    padding-bottom: 16px!important;
    }



.navbar-collapse a.nav-link {
    color: #2d6df6 !important;
    width: 100% !important;
    text-align: left !important;
    justify-content: left!important;
    padding: 0px !important;
    height: 48px !important;
}


.navbar-collapse li {
    text-align: left;
    width: 100% !important;
    padding: 0px 24px!important;
}

.navbar-collapse .block.block--apigee-kickstart-menu-account ul {
    flex-direction: column-reverse !important;
    display: flex;
}

.navbar-nav a.nav-link:hover {
    background: white!important;
}

ul.tabs.nav-tabs.nav-tabs--primary.clearfix {
    flex-direction: column;
    gap: 8px;
}


}