.card {position: relative;display: flex;flex-direction: column;min-width: 0;word-wrap: break-word;background-color: var(--card-bg);background-clip: border-box;border: 1px solid var(--card-border-color);border-radius: 0; } .card > hr {margin-right: 0;margin-left: 0; } .card > .list-group:first-child .list-group-item:first-child {border-top-left-radius: 0;border-top-right-radius: 0; } .card > .list-group:last-child .list-group-item:last-child {border-bottom-right-radius: 0;border-bottom-left-radius: 0; } .card-body {flex: 1 1 auto;padding: 16px;color: var(--card-color); } .card-title {margin-bottom: 32px; } .card-subtitle {margin-top: -16px;margin-bottom: 0; } .card-text:last-child {margin-bottom: 0; } .card-link:hover {text-decoration: none; } .card-link + .card-link {margin-left: 16px; } .card-header {padding: 32px 16px;margin-bottom: 0;color: var(--card-cap-color);background-color: var(--card-cap-bg);border-bottom: 1px solid var(--card-border-color); } .card-header:first-child {border-radius: calc(0 - 1px) calc(0 - 1px) 0 0; } .card-header + .list-group .list-group-item:first-child {border-top: 0; } .card-footer {padding: 32px 16px;background-color: var(--card-cap-bg);border-top: 1px solid var(--card-border-color); } .card-footer:last-child {border-radius: 0 0 calc(0 - 1px) calc(0 - 1px); } .card-header-tabs {margin-right: -8px;margin-bottom: -16px;margin-left: -8px;border-bottom: 0; } .card-header-pills {margin-right: -8px;margin-left: -8px; } .card-img-overlay {position: absolute;top: 0;right: 0;bottom: 0;left: 0;padding: 1.25rem; } .card-img {width: 100%;border-radius: calc(0 - 1px); } .card-img-top {width: 100%;border-top-left-radius: calc(0 - 1px);border-top-right-radius: calc(0 - 1px); } .card-img-bottom {width: 100%;border-bottom-right-radius: calc(0 - 1px);border-bottom-left-radius: calc(0 - 1px); } .card-deck {display: flex;flex-direction: column; } .card-deck .card {margin-bottom: 8px; } @media (min-width: 576px) {.card-deck {flex-flow: row wrap;margin-right: -8px;margin-left: -8px;}.card-deck .card {display: flex;flex: 1 0 0%;flex-direction: column;margin-right: 8px;margin-bottom: 0;margin-left: 8px;} } .card-group {display: flex;flex-direction: column; } .card-group > .card {margin-bottom: 8px; } @media (min-width: 576px) {.card-group {flex-flow: row wrap;}.card-group > .card {flex: 1 0 0%;margin-bottom: 0;}.card-group > .card + .card {margin-left: 0;border-left: 0;}.card-group > .card:not(:last-child) {border-top-right-radius: 0;border-bottom-right-radius: 0;}.card-group > .card:not(:last-child) .card-img-top,.card-group > .card:not(:last-child) .card-header {border-top-right-radius: 0;}.card-group > .card:not(:last-child) .card-img-bottom,.card-group > .card:not(:last-child) .card-footer {border-bottom-right-radius: 0;}.card-group > .card:not(:first-child) {border-top-left-radius: 0;border-bottom-left-radius: 0;}.card-group > .card:not(:first-child) .card-img-top,.card-group > .card:not(:first-child) .card-header {border-top-left-radius: 0;}.card-group > .card:not(:first-child) .card-img-bottom,.card-group > .card:not(:first-child) .card-footer {border-bottom-left-radius: 0;} } .card-columns .card {margin-bottom: 32px; } @media (min-width: 576px) {.card-columns {column-count: 3;column-gap: 1.25rem;orphans: 1;widows: 1;}.card-columns .card {display: inline-block;width: 100%;} } .accordion > .card {overflow: hidden; } .accordion > .card:not(:first-of-type) .card-header:first-child {border-radius: 0; } .accordion > .card:not(:first-of-type):not(:last-of-type) {border-bottom: 0;border-radius: 0; } .accordion > .card:first-of-type {border-bottom: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0; } .accordion > .card:last-of-type {border-top-left-radius: 0;border-top-right-radius: 0; } .accordion > .card .card-header {margin-bottom: -1px; } .row-card {margin-bottom: -16px; } .col-card {padding-bottom: 16px; } .card {flex-grow: 1;flex-shrink: 0;height: 100%;box-shadow: 0 0 0.5714285714rem rgba(var(--black), 0.25); } .card .card-body {display: flex;flex-direction: column;align-items: flex-start;width: 100%;text-align: left; } .card .card-body .form-group {width: 100%; } .card .card-body .form-group:last-child {margin-bottom: 0; } .card.card-1, .card.card-primary {border-color: var(--primary); } .card.card-2, .card.card-secondary {border-color: #84d3cd;background: var(--secondary); } .card.card-3 {background: var(--light);box-shadow: none;border: 0; } .card.card-4 {border: 0;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);border-radius: 12px;padding: 7px; } .card.card-4 .card-img {position: relative;width: 100%;height: 174px;border-radius: 12px;background: var(--light); } .card.card-4 .card-img .img-fluid {position: absolute;width: 100%;height: 100%;inset: 0;object-fit: cover;border-radius: 12px; } .card.card-4 .card-body {padding: 7px 7px 0 7px; } .card.card-4 .card-footer {padding: 0 7px 7px 7px;background: transparent;border: 0; } .card.card-4 .card-title {font-size: 14px;padding: 0;margin: 0;margin-bottom: 14px;padding-top: 2px; } .card.card-4 .card-text {display: flex;align-items: center;font-size: 12px;margin-top: 0;margin-bottom: 16px;color: #555; } .card.card-4 .card-text svg {margin-right: 5px; } .card.card-4 .card-text a {color: #555; } .card.card-4 .btn {display: flex;flex-direction: row;align-items: center;justify-content: center;margin-bottom: 0 !important;font-size: 13px;font-weight: 500;border-radius: 12px;width: 100%; } .card.card-4 .btn svg {margin-right: 5px; } .card a.card-4:hover {text-decoration: none; } .card a.card-4:hover .btn {color: var(--primary-yiq);background-color: var(--primary-hover);border-color: var(--primary-hover-border); } .card.card-5 {border: 0;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);border-radius: 12px;padding: 20px; } .card.card-5 .card-img {position: relative;width: 100%;aspect-ratio: 96/62;border-radius: 12px;background: var(--light);margin-bottom: 10px;border: 0; } .card.card-5 .card-img .img-fluid {position: absolute;width: 100%;height: 100%;inset: 0;object-fit: cover;border-radius: 12px; } .card.card-5 .card-title {font-size: 14px;margin-top: -3px;margin-bottom: 5px; } .card.card-5 .card-text {font-size: 12px;margin-bottom: 5px; } .card.card-5 .btn {box-shadow: none !important;background: transparent;top: -16px;right: -16px; } .card.card-5 .row-images {margin-left: -2px;margin-right: -2px; } .card.card-5 .row-images .col {padding-left: 2px;padding-right: 2px;padding-bottom: 4px; } .card.card-5 .row-images .col .card-img-2 {position: relative;aspect-ratio: 1/1;width: 100%;height: 100%;background: var(--light);display: flex;align-items: center;justify-content: center; } .card.card-5 .row-images .col .card-img-2 .img-fluid {position: absolute;width: 100%;height: 100%;inset: 0;object-fit: cover; } .card.card-5 .row-images .col .card-img-2 span {position: relative;font-weight: 700;color: var(--white);font-size: 12px; } .card.card-5 .row-images .col:nth-child(1) .card-img-2, .card.card-5 .row-images .col:nth-child(1) .card-img-2 .img-fluid {border-radius: 12px 0 0 0; } .card.card-5 .row-images .col:nth-child(3) .card-img-2, .card.card-5 .row-images .col:nth-child(3) .card-img-2 .img-fluid {border-radius: 0 12px 0 0; } .card.card-5 .row-images .col:nth-child(4) .card-img-2, .card.card-5 .row-images .col:nth-child(4) .card-img-2 .img-fluid {border-radius: 0 0 0 12px; } .card.card-5 .row-images .col:nth-child(6) .card-img-2, .card.card-5 .row-images .col:nth-child(6) .card-img-2 .img-fluid {border-radius: 0 0 12px 0; } .card.card-6 {border: 0;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);border-radius: 12px;font-size: 12px; } .card.card-6 .card-img {position: relative;width: 100%;aspect-ratio: 1/1;border-radius: 12px 12px 0 0;background: var(--light);margin-bottom: 0; } .card.card-6 .card-img .img-fluid {position: absolute;width: 100%;height: 100%;inset: 0;object-fit: cover;border-radius: 12px 12px 0 0; } .card.card-6 .card-img .card-form {position: absolute;width: 100%;height: 100%;inset: 0; } .card.card-6 .card-img .card-form .btn-group {position: absolute;left: 16px;bottom: 16px; } .card.card-6 .card-img .card-form .btn-group .btn {margin-right: 6px;padding: 0;width: 36px;height: 36px;border-radius: 10px;box-shadow: none; } .card.card-6 .card-img .card-form .btn-group .btn svg {width: 20px;height: auto; } .card.card-6 .card-img .card-form .form-control {border-radius: 100px;width: 32px;height: 32px;font-size: 14px;padding: 0;display: flex;align-items: center;justify-content: center;border: 0;text-align: center;position: absolute;right: 12px;top: 12px; } .card.card-6 .card-img .card-form .form-control::-webkit-outer-spin-button, .card.card-6 .card-img .card-form .form-control::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0; } .card.card-6 .card-img .card-form .form-control {-moz-appearance: textfield; } .card.card-6 .card-body {padding: 17px 40px;text-align: center;align-items: center;justify-content: center;flex-direction: row; } .card.card-6 .card-body .card-title {position: relative;margin-bottom: 0; } .card.card-6 .card-body svg {position: absolute;right: 12px;color: var(--primary);display: none; } .card.card-6.bound {outline: solid 3px var(--primary) !important; } .card.card-6.bound .card-img .card-form .btn-group .btn {background-color: var(--primary);color: var(--primary-yiq);border-color: var(--primary-border); } .card.card-6.bound .card-img .card-form .btn-group .btn:hover {background-color: var(--primary-hover);border-color: var(--primary-hover-border); } .card.card-6.bound .card-img .card-form .form-control {background: var(--primary);color: var(--white); } .card.card-6.bound .card-body svg {display: block; } .card.card-7 {border: 0;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);border-radius: 12px;font-size: 12px;margin-bottom: 33px; } .card.card-7 p {margin-bottom: 0; } .card.card-8 {height: auto;padding: 23px;border-radius: 12px;border: 0;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } .card.card-8 .card-img {aspect-ratio: 307/322;width: 100%;background: var(--light);margin-bottom: 23px;border-radius: 12px;align-items: center;justify-content: center;position: relative;display: none; } @media (min-width: 768px) {.card.card-8 .card-img {display: flex;} } .card.card-8 .card-img.active {display: flex; } .card.card-8 .card-img svg {width: 76px;height: 76px; } .card.card-8 .card-img .img-fluid {position: absolute;width: 100%;height: 100%;inset: 0;object-fit: cover;border-radius: 12px; } .card.card-8 .card-body {padding: 0; } .card.card-8 .card-body .btn {margin-bottom: 23px; } .card.card-8 .card-body .btn:last-child {margin-bottom: 0; } .card.card-8 .btn {width: 100%;border-radius: 12px !important; } .card.card-8 .btn svg {width: 24px;height: auto; }