/* ------------- Fuente ATM ------------------- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

.text-semibold {
    font-weight: 400 !important;
}

/* ------------- Genericas ATM ------------------- */

body{
    font-family: "Poppins", sans-serif !important;
    font-size: 1rem !important;
    font-weight: 200 !important;
}

a {
    color: #000000 !important;
    font-weight: 300 !important;
    text-decoration: none !important;
    border: none !important;
}

.font-weight-unset {
    font-weight: unset !important;
}

/* -------------Varios ATM ------------------- */

.btn-back2 {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50%  !important;
    background-color: #7c1338 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: white !important;
}

.btn-back2:hover {
    background-color: #eb3068 !important;
}

.btn-back2:focus {
    background-color: #eb3068 !important;
}

.new-templates-list {
    padding: 20px 0;
}

.x_card-links {
    text-align-last: center;
    position: absolute;
    transform: translate(-50%, -10%);
    left: 50%;
    bottom: 0px;
    width: 90%;
}

.x_link-elem {
    /*filter: opacity(0.7);*/
    box-shadow: 0px 0px 8px 2px grey;
}

.x_card-body2 {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 0.25rem;
    place-content: center;
}

.x_wrapper2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 6px;
}

@media (max-width: 960px) {
    .x_wrapper2 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 6px;
    }
}

@media (max-width: 720px) {
    .x_wrapper2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 6px;
    }
}

@media (max-width: 540px) {
    .x_wrapper2 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 6px;
    }
}

.x_alert-info {
    color: #fff;
    background-color: #91344d8f;
    border-color: #91344d8f;
}

.text-decoration-unset {
    text-decoration: unset !important;
}

.text-border {
    text-shadow: -1px 1px 0 #000,
        1px 1px 0 #000,
        1px -1px 0 #000,
        -1px -1px 0 #000;
}

.border-radius-100 {
    border-radius: 100% !important;
}

.fix-3 {
    max-height: 300px;
    max-width: -webkit-fill-available !important;
    width: unset !important;
}

/* ------------- Boton primario ATM ------------------- */

.btn-primary {
    color: #fff !important;
    background-color: #7c1338 !important;
    border-color: #7c1338 !important;
    border-radius: .2rem !important;
    box-shadow: none
}


.btn-primary:hover {
    color: #fff !important;
    background-color: #eb3068 !important;
    border-radius: .2rem !important;
    border-color: #eb3068
}

.btn-primary.focus,
.btn-primary:focus {
    color: #fff !important;
    background-color: #eb3068 !important;
    border-color: #eb3068 !important;
    border-radius: .2rem !important;
}

/* ------------- Boton primario Outline ATM ------------------- */

.btn-outline-primary {
    color: #7c1338 !important;
    border-color: #7c1338 !important;
}

.btn-outline-primary:hover {
    color: #fff !important;
    background-color: #7c1338 !important;
    border-color: #7c1338 !important;
}

.btn-outline-primary.focus,
.btn-outline-primary:focus {
    box-shadow: 0 0 0 0 rgba(216, 27, 96, 0.5)
}

/* ------------- Boton secundario ATM ------------------- */

.btn-secondary {
    color: #7c1338 !important;
    background-color: #f3e8ec !important;
    border: .5px solid #7c1338 !important;
    border-radius: .2rem !important;
    box-shadow: none
}


.btn-secondary:hover {
    color: #fff !important;
    background-color: #8e244b !important;
    border-radius: .2rem !important;
    border: .5px solid #8e244b !important
}

.btn-secondary.focus,
.btn-secondary:focus {
    color: #ffffff !important;
    background-color: #8e244b !important;
    border: .5px solid #8e244b !important;
    border-radius: .2rem !important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5)
}

/* ------------- Boton CRUD ATM ------------------- */

.btn-edit {
    color: #fff !important;
    background-color: #03a9f4 !important;
    border: .5px solid #03a9f4 !important;
    border-radius: .2rem !important;
    box-shadow: none
}


.btn-edit:hover {
    color: #fff !important;
    background-color: #1f8dc0 !important;
    border-radius: .2rem !important;
    border-color: #1f8dc0
}

.btn-edit.focus,
.btn-edit:focus {
    color: #fff !important;
    background-color: #03a9f4 !important;
    border: .5px solid  #03a9f4 !important;
    border-radius: .2rem !important;
    box-shadow: 0 0 0 0 rgba(38, 143, 255, .5)
}

.btn-copy {
    color: #fff !important;
    background-color: #ff9800 !important;
    border: .5px solid  #ff9800 !important;
    border-radius: .2rem !important;
    box-shadow: none
}


.btn-copy:hover {
    color: #fff !important;
    background-color: #f2a531 !important;
    border-radius: .2rem !important;
    border: .5px solid  #f2a531
}

.btn-copy.focus,
.btn-copy:focus {
    color: #fff !important;
    background-color: #ff9800 !important;
    border: .5px solid  #ff9800 !important;
    border-radius: .2rem !important;
    box-shadow: 0 0 0 0 rgba(38, 143, 255, .5)
}

.btn-clone {
    color: #fff !important;
    background-color: #8bc34a !important;
    border: .5px solid  #8bc34a !important;
    border-radius: .2rem !important;
    box-shadow: none
}


.btn-clone:hover {
    color: #fff !important;
    background-color: #70a731 !important;
    border-radius: .2rem !important;
    border: .5px solid  #70a731
}

.btn-clone.focus,
.btn-clone:focus {
    color: #fff !important;
    background-color: #8bc34a !important;
    border: .5px solid  #8bc34a !important;
    border-radius: .2rem !important;
    box-shadow: 0 0 0 0 rgba(38, 143, 255, .5)
}

.btn-preview {
    color: #fff !important;
    background-color: #9c27b0 !important;
    border: .5px solid  #9c27b0 !important;
    border-radius: .2rem !important;
    box-shadow: none
}


.btn-preview:hover {
    color: #fff !important;
    background-color: #b743cb !important;
    border-radius: .2rem !important;
    border: .5px solid  #b743cb
}

.btn-preview.focus,
.btn-preview:focus {
    color: #fff !important;
    background-color: #9c27b0 !important;
    border: .5px solid  #9c27b0 !important;
    border-radius: .2rem !important;
    box-shadow: 0 0 0 0 rgba(38, 143, 255, .5)
}

.btn-delete {
    color: #fff !important;
    background-color: #f44336 !important;
    border: .5px solid  #f44336 !important;
    border-radius: .2rem !important;
    box-shadow: none
}


.btn-delete:hover {
    color: #fff !important;
    background-color: #cc2d21 !important;
    border-radius: .2rem !important;
    border: .5px solid  #cc2d21
}

.btn-delete.focus,
.btn-delete:focus {
    color: #fff !important;
    background-color: #f44336 !important;
    border: .5px solid  #f44336 !important;
    border-radius: .2rem !important;
    box-shadow: 0 0 0 0 rgba(38, 143, 255, .5)
}

.btn-download {
    color: #fff !important;
    background-color: #3b5998 !important;
    border: .5px solid  #3b5998 !important;
    border-radius: .2rem !important;
    box-shadow: none
}


.btn-download:hover {
    color: #fff !important;
    background-color: #2d4373 !important;
    border-radius: .2rem !important;
    border: .5px solid  #2d4373
}

.btn-download.focus,
.btn-download:focus {
    color: #fff !important;
    background-color: #3b5998 !important;
    border: .5px solid  #3b5998 !important;
    border-radius: .2rem !important;
    box-shadow: 0 0 0 0 rgba(38, 143, 255, .5)
}


/* ------------- Buscar barra lateral ATM ------------------- */

[class*=sidebar-light] .btn-sidebar {
    background-color: #eaeaea !important;
    border: none !important;
    border-radius: .5rem !important;
    color: #7c1338 !important;
}

[class*=sidebar-light] .form-control-sidebar {
    background-color: #eaeaea !important;
    border: none !important;
    border-radius: .5rem !important;
    color: #000b16 !important;
}

/* ---------------Forms ATM --------------------------------- */

.form-control {
    display: block !important;
    width: 100% ;
    height: calc(2.25rem + 2px) !important;
    padding: .375rem .75rem !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #000000 !important;
    font-weight: 400 !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: none !important;
    border-bottom: 1px solid #7c1338 !important;
    border-radius: 0px !important;
    /* box-shadow: inset 0 0 0 transparent; */
    /* transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; */
}

/* --------------- Fondo ATM --------------------------------- */

.content-wrapper {
    background-color: #ffffff !important;
}

.bg-atm {
    background-color: #7c1338 !important;
}

.bg-info-atm {
    border: .1rem solid #7c1338 !important;
    background-color: #f3e8ec !important;
}

/* --------------- Botones Menu lateral ATM --------------------------------- */

nav ul li a {
    line-height: 1rem !important;
}

.nav-sidebar .nav-item>.nav-link {
    margin-bottom: 1rem !important;
}

[class*=sidebar-light-] .sidebar a {
    color: #616368 !important;
    font-weight: 600 !important;
}

.nav-sidebar>.nav-item>.nav-link>.icon-sidebar {
    color: #7c1338 !important;
}

.nav-sidebar>.nav-item>.nav-link.active>.icon-sidebar {
    color: #fff !important;
}

.nav-sidebar>.nav-item:hover>.nav-link>.icon-sidebar {
    color: #fff !important;
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: #7c1338 !important;
    color: #fff !important;
}

[class*=sidebar-light-] .nav-sidebar>.nav-item.menu-open>.nav-link,
[class*=sidebar-light-] .nav-sidebar>.nav-item:hover>.nav-link {
    background-color: #7c1338 !important;
    color: #fff !important;
}


/* --------------- Home ATM --------------------------------- */

.title {
    margin-bottom: -0.9rem;
    font-size: 2.5rem;
    font-weight: 600;
    color: #000;
}

.subtitle {
    margin-bottom: 0rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #000;
}

.circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: #7c1338;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 3rem;
}

.circle-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: #000;
}

.imghome {
    width: 80%;
    /* height: 80%; */
}

@media (max-width: 1500px) {
    .title {
        font-size: 2rem;
        font-weight: 600;
        color: #000;
    }

    .subtitle {
        font-size: 1rem;
        font-weight: 600;
        color: #000;
    }

    .circle {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background-color: #7c1338;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 2rem;
    }

    .circle-text {
        font-size: 1rem;
        font-weight: 600;
        color: #000;
    }

    .imghome {
        width: 60%;
        /* height: 60%; */
    }
}

/* --------------- Tablas ATM --------------------------------- */

th {
    font-weight: 400;
    color: #000;
}

/* --------------- Masonry ATM --------------------------------- */

.grid-item {
    width: 25%;
}

.grid-item--width2 {
    width: 400px;
}

.pointer {
    cursor: pointer;
}

.pointerOff {
    cursor: not-allowed;
}

/* --------------- card-accordion ATM --------------------------------- */

.card-accordion{
    border: 0.5px solid #7c1338 !important;
    border-radius: 5px !important;
    /* box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3) !important; */
}

.card-body-content{
    border-radius: 5px !important;
    background-color: #f3e8ec !important;
}

.card-img-top{
    border-radius: 5px 5px 0 0!important;
}


/* --------------- Custom label ATM --------------------------------- */

label:not(.form-check-label):not(.custom-file-label) {
    font-weight: 400 !important;
}

.custom-control-label {
    margin-bottom: .5rem !important;
}

.custom-control-input:checked~.custom-control-label::before {
    border-color: #7c1338 !important;
    background-color: #7c1338 !important;
}

/* --------------- Side Bar ATM --------------------------------- */

.brand-link {
    border-bottom: none !important;
    overflow: auto !important;

}

.elevation-1 {
    box-shadow: 0 0px 0px rgba(0,0,0,.12),0 0px 2px rgba(0,0,0,0.16) !important;
}

.main-sidebar{
    position: fixed !important;
    top: 0; /* O el valor que necesites */
    bottom: 0; /* Para asegurar que ocupe todo el alto */

}

.sidebar{
    /* position: fixed !important; */
    top: 0; /* O el valor que necesites */
    bottom: 0; /* Para asegurar que ocupe todo el alto */
    overflow-y: auto !important; /* Habilita el scroll vertical */
    scroll-margin-right: 0.5px !important;
}

/* --------------- Nav Bar ATM --------------------------------- */

.main-header {
    border-bottom: none !important;
}

/* --------------- Columns ATM --------------------------------- */
.card-columns {
      column-count: 4 !important;
  }

/* --------------- Text colors -------------------------------- */

.text-darkred {
    color: #7c1338 !important;
}


/* fluid 5 columns */
.grid-item { width: 20%; }


/* --------------- Accordion ATM --------------------------------- */

.card-accordion {
    border: none !important;
    border-bottom: 1px solid #7c1338 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 2rem !important;

  }

  .card-accordion-header {
    border: none;
    margin-bottom: 1rem;
  }

  .card-accordion-body {
    border: none;
  }

.card-accordion-header a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    text-decoration: none;
    color: #7c1338 !important;
    font-size: 1.2rem;
    font-weight: 900;
}


/* --------------- Video Tutoriales --------------------------------- */

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
    height: 0;
    overflow: hidden;
    cursor: pointer;
}
.video-container img, .video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video-container img {
    z-index: 1;
}
.video-container video {
    z-index: 2;
    display: none;
}