@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
p {
    font-family: "Poppins", sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif !important;
}


/* Custom Utilities -------------------- */

.bg-dark {
    background-color: #ff3644 !important;
}

.main {
    background-color: #fdfdfd !important;
    padding-top: 0px;
    padding-bottom: 0px;
}

.btn {
    border-radius: 28px;
    font-size: 14px !important;
    font-family: "Poppins", sans-serif !important;
    -webkit-appearance: none;
    outline: none !important;
    transition: all 0.1s;
    padding: 15px;
}

.btn-primary {
    color: #fff;
    background-color: #ff3644 !important;
    border-color: #ff3644 !important;
}

.btn-icondo {
    color: #fff;
    background-color: #ff3644 !important;
    border-color: #ff3644 !important;
    width: 100%;
}

.btn-icondo:hover {
    color: white;
    background-color: #ff364380;
}

.btn-primary:hover {
    color: #fff;
    background-color: #ff3644;
    border-color: #ff3644;
}

input.expiry,
input.cvv {
    width: 150px;
    text-align: center;
}

.btn-secundary:hover {
    color: #fff!important;
    background-color: #fff!important;
    border-color: #fff!important;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #ff3644;
    border-color: #ff3644;
}

.fileinput-button {
    display: flex !important;
    flex-wrap: wrap;
    position: relative;
}

.fileinput-button>span {
    order: 0;
    width: 60%;
    margin-left: 34%;
}

.fileinput-button input[type="file"] {
    width: 100%;
    opacity: 0;
}

.fileinput-button input[type="file"]:hover {
    cursor: pointer;
}

.fileinput-button:before {
    content: 'Choose File';
    display: block;
    background-color: #F6F6F6;
    border: 1px solid #F6F6F6;
    border-radius: 4px;
    font-size: 13px;
    font-family: "Poppins", sans-serif;
    padding: 1rem .7rem;
    position: absolute;
    left: 0;
    bottom: .5rem;
    pointer-events: none;
}

.fileinput-button:after {
    content: 'No file chosen';
    display: block;
    font-size: 13px;
    font-family: "Poppins", sans-serif;
    position: absolute;
    left: 39%;
    bottom: 1.2rem;
    pointer-events: none;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 0px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.375rem;
    outline: 0;
}

.modal-header.payment-modal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 0px;
    padding: 5px;
}

.modal-body {
    padding: 5px;
}

/* .modal {
    width: 94% !important;
    margin: 0 auto !important;
    left: 3% !important;
    padding: 15px 0px !important;
} */

.modal body {
    background-color: #fff !important;
}

.modal .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* @media (min-width: 992px) {
    .modal {
        width: 376px !important;
    }
} */

.modal embed>.row {
    margin-right: 0 !important;
    margin-left: 0 !important;
    overflow: hidden !important;
}

embed {
    overflow: hidden !important;
    min-width: 100% !important;
}

embed .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

#classCard label #logo_card {
    height: 25px !important;
    top: 65px !important;
    position: absolute !important;
    right: 30px !important;
    -o-object-fit: contain !important;
    object-fit: contain !important;
}

.sidebar {
    background-color: white !important;
    border-right: none !important;
}

.sidebar::after {
    content: "";
    background-color: transparent !important;
    box-shadow: 1px 1px 2px #0000000D !important;
    opacity: 1 !important;
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    -webkit-transform: translateZ(0px);
}

.sidebar-nav>li.active,
.sidebar-nav>li.active>a,
.sidebar-nav>li.active>.nav-item,
.sidebar-nav>li.active .sidebar-nav,
.sidebar-nav>li.open,
.sidebar-nav>li.open>a,
.sidebar-nav>li.open>.nav-item,
.sidebar-nav>li.open .sidebar-nav {
    background-color: #fcfcfc;
    color: #ff3644;
}

.sidebar-nav>li.active,
.sidebar-nav>li.active>a,
.sidebar-nav>li.active>.nav-item,
.sidebar-nav>li.active .sidebar-nav,
.sidebar-nav>li.open,
.sidebar-nav>li.open>a,
.sidebar-nav>li.open>.nav-item,
.sidebar-nav>li.open .sidebar-nav {
    background-color: #fcfcfc;
    color: #ff3644;
}

.sidebar-nav>li.active {
    border-left-color: #ff3644;
}

.sidebar-nav>li>a:focus,
.sidebar-nav>li>a:hover,
.sidebar-nav>li>.nav-item:focus,
.sidebar-nav>li>.nav-item:hover {
    text-decoration: none;
    outline: none;
    color: #ff3644;
}

.sidebar-nav>li.active,
.sidebar-nav>li.active>a,
.sidebar-nav>li.active>.nav-item,
.sidebar-nav>li.active .sidebar-nav,
.sidebar-nav>li.open,
.sidebar-nav>li.open>a,
.sidebar-nav>li.open>.nav-item,
.sidebar-nav>li.open .sidebar-nav {
    background-color: #fcfcfc;
    color: #ff3644;
}

.sidebar-nav>li.active>.nav-item>em,
.sidebar-nav>li.active>a>em,
.sidebar-nav>li.open>.nav-item>em,
.sidebar-nav>li.open>a>em {
    color: #ff3644;
}

.card {
    background-color: #fff;
    box-shadow: 0 4px 10px 0 #8080803d;
    width: 300px;
    border-radius: 10px;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0px white;
    border-radius: 0.25rem;
}

.card-flat {
    box-shadow: none !important;
    width: 100% !important;
}

@media screen and (min-width: 568px) {
    .card-flat {
        max-width: 465px;
        min-width: 465px;
    }
}

.card-flat .bg-dark {
    background-color: white !important;
}

.card-flat .card-header {
    padding-top: 1.5rem !important;
}

.card-flat .card-body {
    padding-top: 1rem !important;
}

.card-flat .card-body>p {
    font-size: 18px !important;
    letter-spacing: 0;
    line-height: 28px;
    margin-top: 0 !important;
    margin-bottom: .5rem;
    color: #2D2F39;
    opacity: 1;
    font-weight: 500;
}

.card-modal-payment {
    margin-bottom: 0 !important;
    padding-left: 1.3rem !important;
    padding-right: 1.3rem !important;
}

.avatar-css {
    margin-top: -50px;
}

select#card_list {
    height: 50px;
}

.payment {
    padding: 10px;
    width: 100%;
    border-radius: 10px;
    font-size: 13px;
}

.payment:hover {
    font-weight: 600;
    font-size: 13px;
    background-color: #ff3644;
    border: none;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border-radius: 10px;
}

.cancel {
    width: 100%;
    top: 0;
}

.form-control {
    border: none !important;
    height: 57px !important;
    padding: 0.375rem 1rem !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    color: #818E94 !important;
    background: #FFFFFF 0% 0% no-repeat padding-box !important;
    box-shadow: 0px 0px 6px #0000000F !important;
    border-radius: 4px !important;
    margin-bottom: .5rem !important;
}

.form-control:focus {
    box-shadow: 0px 0px 6px #00000033 !important;
}

input#card {
    border: none !important;
    height: 57px !important;
    padding: 0.375rem 1rem !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    color: #818E94 !important;
    background: #FFFFFF 0% 0% no-repeat padding-box !important;
    border-radius: 4px !important;
    margin-bottom: .5rem !important;
}

input#card:focus {
    box-shadow: 0px 0px 6px #00000033 !important;
}

.form-control::-webkit-input-placeholder {
    color: #D3D8DA !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

.form-control::-moz-placeholder {
    color: #D3D8DA !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

.form-control:-ms-input-placeholder {
    color: #D3D8DA !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

.form-control::-ms-input-placeholder {
    color: #D3D8DA !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

.form-control::placeholder {
    color: #D3D8DA !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

select.form-control {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    color: #9fa4a7 !important;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 0 !important;
    font-family: "Poppins", sans-serif !important;
    font-weight: 400 !important;
    padding: 0 .9rem !important;
    font-size: 16px !important;
    line-height: 54px !important;
    background-image: url("../img/angle-down-solid.svg") !important;
    background-size: 15px !important;
    background-repeat: no-repeat !important;
    background-position: right 5px top 55% !important;
    margin-bottom: 5px !important;
    padding-right: 1.8rem !important;
}

select.form-control:hover {
    background-color: transparent !important;
}

select.form-control:focus {
    outline: none !important;
    box-shadow: none !important;
}

#loginform .form-group .input-group .input-group-append,
#loginForm .form-group .input-group .input-group-append {
    display: none !important;
}

#loginform .input-group-append,
#loginForm .input-group-append {
    display: none !important;
}

#lostPassword {
    text-align: center !important;
    text-decoration: underline !important;
    letter-spacing: 0px !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 16px !important;
    line-height: 26px !important;
    color: #ff3644 !important;
}

.radio {
    display: grid;
    grid-template-columns: -webkit-min-content auto;
    grid-template-columns: min-content auto;
    grid-gap: 0.5em;
    font-size: 16px !important;
    font-family: "Poppins", sans-serif !important;
    color: #2D2F39;
}

.radio:focus-within .radio__label {
    opacity: 1;
}

.radio__input {
    display: flex;
}

.radio__input input {
    opacity: 0;
    width: 0;
    height: 0;
}

.radio__input input:focus+.radio__control {
    box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em #ff3644;
}

.radio-gradient input:checked+.radio__control {
    background: radial-gradient(#ff3644 44%, white 51%);
    border: 2px solid #ff3644;
}

.radio-before .radio__control {
    display: grid;
    place-items: center;
}

.radio-before input+.radio__control::before {
    content: "";
    width: 10px;
    height: 10px;
    box-shadow: inset 0.5em 0.5em currentColor;
    border-radius: 50%;
    transition: 180ms transform ease-in-out;
    transform: scale(0);
}

.radio-before input:checked+.radio__control::before {
    transform: scale(1);
}

.radio__control {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #2D2F39;
    margin-top: 3px !important;
}

.input-group-prepend,
.input-group-append {
    display: none !important;
}

.wd-xl {
    width: 100% !important;
    padding: .5rem 0 !important;
}

@media (min-width: 1000px) {
    .wd-xl {
        width: 465px !important;
        margin-top: 0 !important;
    }
}

.loginLogo {
    width: 200px !important;
}

#tiloLogo {
    width: 95px !important;
    margin-bottom: 1rem !important;
}

#enlaceTiloPage {
    font-family: "Poppins", sans-serif !important;
    color: #ff3644;
    font-size: 11px !important;
    line-height: 22px !important;
}

.wrapper {
    background-color: #F4F7FC !important;
    font-family: "Poppins", sans-serif !important;
}

.wrapper .section-container {
    background-color: #F4F7FC !important;
}

.user-block-picture {
    width: 116px !important;
    border: 0 !important;
}

.user-block-status img.img-thumbnail {
    border: 2px solid #FFCB05;
    border-radius: 50% !important;
    width: 116px !important;
    height: 116px !important;
    -o-object-fit: contain !important;
    object-fit: contain !important;
}

.user-block-status .circle {
    display: none !important;
}

.user-block-name {
    font-size: 20px !important;
    color: #2D2F39 !important;
    font-family: "Poppins", sans-serif !important;
    font-weight: 500 !important;
    margin-bottom: 1rem !important;
}

.nav-heading {
    display: none !important;
}

.sidebar-nav li a {
    color: #AAAAAA !important;
    font-size: 13px !important;
    font-family: "Poppins", sans-serif !important;
    font-weight: 400 !important;
}

.sidebar-nav li.active a {
    color: #ff3644 !important;
}

.aside-collapsed .user-block-picture {
    width: 56px !important;
    border: 0 !important;
}

.aside-collapsed .user-block-status img.img-thumbnail {
    border: 2px solid #FFCB05;
    border-radius: 50% !important;
    width: 56px !important;
    height: 56px !important;
}

.aside-collapsed .user-block-status .circle {
    display: none !important;
}

.section-container {
    background-color: #F4F7FC !important;
}

.section-container .content-wrapper {
    background-color: #F4F7FC !important;
}

.section-container .content-wrapper .content-heading {
    background-color: transparent !important;
    border: none !important;
    position: relative !important;
    color: #2D2F39 !important;
    font-family: "Poppins", sans-serif !important;
}

.section-container .content-wrapper .content-heading::after {
    content: "";
    background-color: transparent !important;
    box-shadow: 1px 1px 2px #0000000D !important;
    opacity: 1 !important;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px !important;
    width: 100%;
    -webkit-transform: translateZ(0px);
}

.section-container .card {
    background-color: white !important;
    background-clip: border-box;
    border: 0 !important;
    box-shadow: 1px 1px 2px #00000005 !important;
    border-radius: 12px !important;
}

.section-container .card .card-body {
    padding-top: .8rem !important;
}

table {
    font-size: 14px !important;
    font-weight: 400 !important;
}

table tr th {
    font-size: 14px !important;
    font-weight: 400 !important;
}

table tr td {
    font-size: 14px !important;
    font-weight: 400 !important;
}

.table-striped thead tr {
    font-size: 14px !important;
    font-weight: 400 !important;
}

.table-striped thead tr th {
    border-right: 1px solid #E8E8E8 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.table-striped thead tr th:last-child {
    border-right: none !important;
}

.modal {
    width: 100% !important;
}

.modal embed {
    width: 100% !important;
}

.card-modal-payment {
    font-family: "Poppins", sans-serif !important;
    width: 100% !important;
}

.card-modal-payment .amount {
    font-family: "Poppins", sans-serif !important;
    background-color: transparent !important;
    font-weight: 500;
}

.card-modal-payment .amount .total {
    color: #FF3644 !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 20px !important;
    font-weight: bold !important;
}

.card-modal-payment .amount .total .dollar {
    color: #FF3644 !important;
    font-family: "Poppins", sans-serif !important;
    font-weight: bold !important;
    font-size: 20px !important;
}

#logo_card {
    top: 49px !important;
}

#pay.payment {
    border-radius: 28px;
    font-size: 14px !important;
    font-family: "Poppins", sans-serif !important;
    -webkit-appearance: none;
    outline: none !important;
    transition: all 0.1s;
    padding: 15px;
}
/*
@media (min-width: 1000px) {
     .modal {
        width: 376px !important;
    }
    .modal embed {
        width: 100% !important;
    }
    .card-modal-payment {
        font-family: "Poppins", sans-serif !important;
        width: 370px !important;
    }
}*/

.topnavbar {
  -webkit-backface-visibility: hidden;
  margin-bottom: 0;
  border-radius: 0;
  z-index: 1050;
  border: 0;
  padding: 0;
  min-height: 95px !important;
  background-color: #ff3644;
  background-image: linear-gradient(to right, #ff3644 0%, #ff3644 100%);
  background-repeat: repeat-x;
  display: flex;
 }
.sidebar-toggle {
  top: 10px !important;
}

.topnavbar .navbar-nav > .nav-item > .nav-link {
  font-size: 1.5rem; }
  .topnavbar .navbar-nav > .nav-item > .nav-link:hover, .topnavbar .navbar-nav > .nav-item > .nav-link:focus {
    color: white !important; }
  .topnavbar .navbar-nav > .nav-item > .nav-link:hover {
    opacity: .7 !important; }

.navbar-header a.navbar-brand .brand-logo-collapsed img {
    width: 80px !important;
}

.wrapper .footer-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    border-top: 1px solid #e4eaec94;
    background-color: white !important;
    padding: 20px;
    z-index: 109;
    font-size: .875rem;
}

.wrapper .footer-container span {
    font-size: 16px !important;
    font-family: "Poppins", sans-serif !important;
    color: #9F9F9F !important;
    line-height: 26px !important;
    letter-spacing: 0px !important;
}

#logo_card.logoCardModal {
    height: 25px !important;
    top: 65px !important;
    position: absolute !important;
    right: 30px !important;
    object-fit: contain !important;
}

.logoCardModal2 {
    height: 25px !important;
    top: 60px !important;
    position: absolute !important;
    right: 40px !important;
    object-fit: contain !important;
}

label[for=tokenize] {
    padding-left: 5px;
}

.form-control.inputtxt {
    height: 40px;
    font-size: 12px;
    padding: 5px;
}

select.form-control {
    font-size: 16px !important;
    line-height: 19px !important;
}

.card-modal-payment {
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.loginLogo {
    width: auto!important;
    max-height: 70px!important;
    max-width: 300px !important;
}

#close {
    padding: 0;
}

.pt-4 {
    padding-top: 10px !important;
}

.spinner-border-sm {
    margin-left: -15px !important;
}

.topnavbar-suscripcion {
    -webkit-backface-visibility: hidden;
    margin-bottom: 0;
    border-radius: 0;
    z-index: 1050;
    border: 0;
    padding: 0;
    min-height: 20px !important;
    background-repeat: repeat-x;
}

.form-control {
    box-shadow: 0px 0px 6px #666666 !important;
}

.trTest {
    background-color: #D7EFFF !important;
}
.trTestBadge{
    border: solid 3px #A3DBFF;
}
.trOnlyAuth{
    background-color: #F3FFEB !important;
}
.trOnlyAuthBadge{
    border: solid 3px #CEFFAD;
}
.trRefund{
    background-color: #ECEBFE !important;
}
.trRefundBadge{
    border: solid 3px #A39EFE;
}
.trRejected{
    background-color: #FFF5F5 !important;
}
.trRejectedBadge{
    border: solid 3px #FFADAD;
}