.mt-6 {
margin-top: 6rem;
}

.modal-backdrop.show {
opacity: 0.8;
}

.table.table-wallet thead tr th, .table.table-wallet .tr-head th {
margin: 0;
line-height: 14px;
font-size: 14px;
font-family: var(--fontWeightBold);
color: #363636;
}

.modal-footer.align-center {
align-items: center;
justify-content: center;
padding-bottom: 0;
padding-top: 15px;
}

.btn.modal-go-btn {
color: #fff;
font-size: 120%;
padding: .844rem 5rem;
background-color: #d2010c;
}

.btn.modal-go-btn:hover,
.btn.modal-go-btn:focus {
    color: #fff;
    background-color: #9c1119;
}

.modal-dialogt.modal-wallet .modal-header {
background: transparent;
}

.modal-wallet .close {
position: absolute;
top: -100px;
color: #fff;
float: right;
background-color: transparent;
height: 50px;
margin: 0;
width: 100px;
right: -50px;
left: initial;
font-size: 24px;
}

.modal-wallet .close:hover {
    color: #fff !important;
    opacity: 1 !important;
}

.modal-wallet .close i {
    color: #fff;
    font-size: 22px;
}

.modal-dialog.modal-wallet .modal-content {
border: 40px solid #ecf0f1;
background-color: #ecf0f1;
border-bottom-width: 25px;
border-top-width: 40px;
}

.modal-dialog.modal-wallet .modal-content .modal-footer {
    background-color: #ecf0f1;
}


.text-exam {
height: 36px;
float: left;
width: auto;
padding-top: 5px;
padding-left: 10px;
}

.text-logo {
    width: 36px;
    height: 36px;
    float: left;
    text-align: center;
    border-radius: 6px;
    background-color: #363636;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    margin-right: 5px;
}

.logo-inline {
width: 100%;
height: 100%;
float: left;
border-radius: 50%;
background-color: #5eb619;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-family: var(--fontWeightBold);
}

.text-exam span {
width: 100%;
float: left;
}

.text-exam span.text-bold {
    margin: 0;
    line-height: 14px;
    font-size: 14px;
    font-family: var(--fontWeightBold);
    color: #363636;
}

.text-exam span.text-small, .text-exam span.text-small a {
    margin: 0;
    line-height: 14px;
    font-size: 12px;
    color: #999999;
}

.table.table-wallet .td-summary th, .table.table-wallet .td-summary td {
margin: 0;
line-height: 14px;
font-size: 12px;
font-family: var(--fontWeightBold);
color: #363636;
}

.table.table-wallet tbody tr td p {
color: #ccc;
margin: 0;
font-size: 12px;
display: inline-block;
}

.table.table-wallet tbody tr td {
margin: 0;
line-height: 14px;
font-size: 12px;
font-family: var(--fontWeightBold);
color: #363636;
}

.table.table-wallet thead tr.tr-head th {
border-bottom: 0;
border: 0;
padding: 18px 8px;
}

.table.table-wallet tbody tr.td-summary th,
.table.table-wallet tbody tr.td-summary td {
border: 0;
}

.modal-body.modal-body-wallet {
padding: 0;
}

.table.table-wallet tr > th, .table.table-wallet tr > td {
border-left: 0;
padding: 11px 15px 11px 15px;
}

.table-responsive.table-responsive-wallet {
border-radius: 6px;
overflow: hidden;
margin-bottom: 15px;
background-color: #fff;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}

.table-responsive.table-responsive-wallet .table.table-wallet {
    margin-bottom: 0;
}

.table.table-wallet tr.td-summary td, .table.table-wallet tr.td-summary th {
padding: 18px 8px;
}



.btn-group.btn-group-toggle.btn-wallet-group > .btn:not(:last-child):not(.dropdown-toggle) {
margin: 0 !important;
}

.btn-group.btn-group-toggle.btn-wallet-group > .btn:not(:first-child) {
margin: 0 !important;
}

.btn-group.btn-group-toggle.btn-wallet-group > .btn:first-child {
border-radius: 6px 0 0 6px;
}

.btn-group.btn-group-toggle.btn-wallet-group > .btn:last-child {
border-radius: 0 6px 6px 0;
}

.btn-group.btn-group-toggle.btn-wallet-group .btn {
font-size: 12px;
padding: .4rem 1.2rem;
}

.btn-group.btn-group-toggle.btn-wallet-group .btn.btn-wallet-green {
    background-color: #5eb619;
    border-color: #5eb619;
}

.btn-group.btn-group-toggle.btn-wallet-group .btn.btn-wallet-blue {
    background-color: #0097d7;
    border-color: #0097d7;
}

.btn-group.btn-group-toggle.btn-wallet-group .btn.btn-wallet-muted {
    background-color: #676767;
    border-color: #676767;
}


.body-transactions {
display: block;
padding: 15px;
background-color: #fff;
border-radius: 6px;
width: 100%;
float: left;
}

.bd-example {
display: flex;
align-items: center;
justify-content: center;
}

.btn.btn-trans-confirm {
background-color: #68bb1a;
color: #fff;
font-size: 14px;
border-radius: 6px;
padding: 0.75rem 2.35rem;
margin: 0 5px;
min-width: 150px;
}

.btn.btn-trans-confirm:hover {
    opacity: 0.7;
}

.btn.btn-trans-cancel {
background-color: #d7d7d7;
color: #363636;
font-size: 14px;
border-radius: 6px;
padding: 0.75rem 2.35rem;
margin: 0 5px;
min-width: 150px;
}

.btn.btn-trans-cancel:hover {
    opacity: 0.7;
}

.box-title.box-title-center {
width: 100%;
float: left;
margin-bottom: 0;
}

.label-title-muted {
width: 100%;
float: left;
background-color: #363636;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
line-height: 14px;
font-size: 14px;
font-family: var(--fontWeightBold);
color: #ffffff;
margin-bottom: 15px;
z-index: 2;
}

.transactions-body {
width: 100%;
float: left;
position: relative;
}

.transactions-form {
width: 100%;
float: left;
position: relative;
margin-bottom: 15px;
}

.transactions-field {
width: 100%;
float: left;
position: relative;
height: 70px;
border-radius: 6px;
border: 1px solid #e5e5e5;
color: #363636;
text-align: center;
padding: 15px;
font-size: 40px;
font-weight: 600;
font-family: var(--fontWeightBold);
outline: none;
}

.transactions-field[type="number"] {
    text-align: center;
    display: block !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield;
}

.transactions-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.transactions-field::-webkit-input-placeholder {
    font-size: 40px;
    color: #363636;
    font-size: 40px;
    font-weight: 600;
    font-family: var(--fontWeightBold);
}

.transactions-field::-moz-input-placeholder {
    font-size: 40px;
    color: #363636;
    font-size: 40px;
    font-weight: 600;
    font-family: var(--fontWeightBold);
}

.transactions-field::-ms-input-placeholder {
    font-size: 40px;
    color: #363636;
    font-size: 40px;
    font-weight: 600;
    font-family: var(--fontWeightBold);
}

.transactions-label {
width: 100%;
float: left;
position: relative;
margin-bottom: 15px;
border: 1px solid #e5e5e5;
border-radius: 6px;
padding: 7px 15px;
font-size: 14px;
line-height: 28px;
margin: 0;
margin-bottom: 15px;
}

.correct-arrow {
float: left;
width: 25px;
height: 25px;
background-color: #68bb1a;
margin: 0 5px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
}

.transactions-slider-wrap {
width: 100%;
float: left;
position: relative;
margin-bottom: 15px;
border-radius: 6px;
overflow: hidden;
}

.transactions-slider {
width: 100%;
float: left;
position: relative;
}

.transactions-slider-item {
width: 100%;
float: left;
position: relative;
height: 160px;
position: relative;
}

.transactions-slider-item .transactions-image {
    width: 100%;
    overflow: hidden;
    height: 100%;
    position: relative;
   /* top: 50%;*/
    left: 50%;
    transform: translate(-50%, -50%);
}

    .transactions-slider-item .transactions-image .img {
        width: 100%;
        height: auto;
        position: relative;
        transform: translateX(-50%);
    }


.transactions-slider .slick-prev.slick-arrow {
left: 0;
z-index: 1;
width: 22px;
height: 50px;
background-color: #000;
border-radius: 0 4px 4px 0;
opacity: 0.7;
}

.transactions-slider .slick-next.slick-arrow {
right: 0;
z-index: 1;
width: 22px;
height: 50px;
background-color: #000;
border-radius: 4px 0 0 4px;
opacity: 0.7;
}

.transactions-summary {
width: 100%;
float: left;
position: relative;
margin-bottom: 15px;
text-align: center;
padding: 35px 15px;
border-radius: 6px;
border: 1px solid #e5e5e5;
}

.transactions-summary .inner .medium {
    width: 100%;
    float: left;
    color: #363636;
    line-height: 20px;
    font-size: 16px;
    font-family: var(--fontWeightBold);
}

.transactions-summary .inner {
    position: relative;
    text-align: center;
}

    .transactions-summary .inner .large {
        width: 100%;
        float: left;
        color: #363636;
        line-height: 40px;
        font-size: 40px;
        font-family: var(--fontWeightBold);
        margin-bottom: 5px;
    }

    .transactions-summary .inner .date-time {
        width: 100%;
        float: left;
        color: #cccccc;
        line-height: 14px;
        font-size: 14px;
        /* font-family: var(--fontWeightBold); */
    }

    .transactions-summary .inner .label-logo {
        float: left;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        height: 53px;
        width: 53px;
        border-radius: 6px;
        background-color: #363636;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        padding: 9px;
    }

        .transactions-summary .inner .label-logo .label-logo-inner {
            width: 100%;
            height: 100%;
            float: left;
            border-radius: 50%;
            background-color: #5eb619;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-family: var(--fontWeightBold);
            color: #ffffff;
        }


/* dropdown */
.trans-dropdown-holder {
display: block;
width: 100%;
float: left;
margin-bottom: 15px;
}

.trans-dropdown-inner {
width: 100%;
float: left;
position: relative;
}

.dropdown-button.trans-wallet-button {
width: 100%;
height: 70px;
background: #000;
position: absolute;
border-radius: 6px;
z-index: 1;
background: transparent;
border: 0;
outline: none !important;
box-shadow: none !important;
cursor: pointer;
}

.trans-layout-wrap {
width: 100%;
border: 1px solid #e5e5e5;
position: relative;
height: 70px;
cursor: pointer;
border-radius: 6px;
background-color: #ffffff;
}

.trans-layout-text {
width: 100%;
padding: 20px 50px 20px 65px;
border-radius: 6px;
background-color: #ffffff;
float: left;
display: block;
position: relative;
height: 68px;
cursor: pointer;
}

.trans-dropdown-item.trans-dropdown-transauto .trans-layout-text {
border-bottom: 1px solid #e5e5e5;
border-radius: 0;
}

.trans-dropdown-menu.trans-transauto-elements {
position: absolute;
width: 100%;
top: 100%;
margin-top: 2px;
z-index: 2;
background-color: #ffffff;
border: 1px solid #e5e5e5;
border-radius: 6px;
/* padding: 15px; */
overflow: hidden;
max-height: 200px;
overflow-y: auto;
box-shadow: 3px 5px 25px 0 rgba(164, 163, 163, 0.1);
}

.trans-dropdown-menu.trans-transauto-elements.scroll {
    display: none;
}

.trans-dropdown-menu.trans-dropdown-menuheight.trans-transauto-elements {
max-height: 240px;
}

.trans-dropdown-menu.trans-transauto-elements.show {
display: block;
}

.trans-layout-text .trans-logo {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
height: 34px;
width: 34px;
background-color: #000;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: var(--fontWeightBold);
}



.trans-layout-text .trans-text .trans-text-large {
margin: 0;
line-height: 16px;
font-size: 16px;
font-family: var(--fontWeightBold);
color: #363636;
}

.trans-layout-text .trans-text .trans-text-small {
margin: 0;
line-height: 14px;
font-size: 14px;
color: #999999;
}

.trans-layout-text .trans-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 15px;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e5e5e5;
border-radius: 50%;
color: #ccc;
}



.transactions-item:first-child .box-title.box-title-center .label-title-muted::after,
.transactions-item:nth-of-type(2) .box-title.box-title-center .label-title-muted::after {
content: " ";
position: absolute;
right: -5%;
height: 4px;
background-color: #363636;
width: 10%;
z-index: 1;
}







/* Responsive */


@media (min-width: 1200px) {
.modal-xl {
    max-width: 1140px;
}
}


@media screen and (max-width:1200px) {
.modal-xl {
    max-width: 1140px !important;
}

.modal-dialog.modal-xl {
    max-width: 1140px !important;
}
}



@media screen and (max-width:991px) {
.modal-dialog.modal-wallet .modal-content {
    border-width: 35px 15px 15px 15px;
}

.modal-wallet .close {
    right: -15px;
    top: -35px;
    opacity: 1;
    background-color: transparent;
    height: 35px;
    font-size: 18px;
    border-radius: 0 4px 0 0;
    width: 35px;
}

    .modal-wallet .close i {
        font-size: 18px;
        color: #000;
    }

    .modal-wallet .close span {
        display: none;
    }

.btn-group.btn-group-toggle.btn-wallet-group .btn {
    padding: .4rem 0.7rem;
    min-width: 65px;
}

.text-exam {
    padding-left: 0;
}

.mt-6 {
    margin-top: 30px;
}
}


@media screen and (max-width:767px) {
.body-transactions {
    padding: 15px 0;
}

.modal-dialog.modal-wallet .modal-content .modal-footer {
    padding: 15px 0 5px 0;
}

.btn.modal-go-btn {
    width: 100%;
}

.transactions-item {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

    .transactions-item:first-child .box-title.box-title-center .label-title-muted::after,
    .transactions-item:nth-of-type(2) .box-title.box-title-center .label-title-muted::after {
        content: " ";
        display: none;
    }

.btn.btn-trans-confirm {
    padding: 0.75rem 1.35rem;
}

.btn.btn-trans-cancel {
    padding: 0.75rem 1.35rem;
}
}

.trans-logo-set{
text-transform:uppercase;
}
#wallet-modal .modal-footer.align-center {
margin-top: 20px;
}

.transactions-label {
cursor: pointer;
padding: 9px 15px 5px 15px;
}

.transactions-label .correct-arrow {
    background-color: #ccc;
    width: 23px;
    height: 23px;
    font-size: 12px;
}

.transactions-label.active .correct-arrow {
    background-color: #68bb1a;
}

.transactions-slider .transactions-slider-item.slick-slide.checked {
background-color: #000;
}


.transactions-slider .transactions-slider-item.slick-slide.checked::after {
    content: "  ";
    background-size: auto;
    background-repeat: no-repeat;
    background-image: url(../images/tick.png);
    background-position: center;
    width: 100%;
    float: left;
    height: 100%;
    position: absolute;
    background-color: rgb(0 0 0 / 68%);
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
}