/* Type your CSS code here. */

.zekat-header-title {
    text-align: center;
}
.zekat-header-title .page-title {
    color: #000000 !important;
    line-height: 29px;
    font-size: 20px !important;
    font-family: 'Gotham Narrow Medium';
}
.zekat-header-title .page-description {
    color: #4B5262;
    font-size: 18px;
    line-height: 29px !important;
    margin-bottom: 50px;
    font-family: 'Gotham Narrow Medium';
}
.zekat_tabs {
    display: grid !important;
    grid-template-columns: repeat(9, 1fr);
    gap: 10px;
    overflow-x: auto;
    list-style-type: none !important;
}
.zekat_tabs::-webkit-scrollbar {
    height: 5px;
}
.zekat_tabs::-webkit-scrollbar-thumb {
    background: #987b4d;
    border-radius: 6px;
}
.zekat_tabs::-webkit-scrollbar-track {
    background: #987b4d;
}
.zekat_tabs .tab:hover .icon svg path {
    fill: #987B4D;
}
.zekat_tabs .tab {
    background-color: #f1ede7;
    width: 112px;
    height: 112px;
    border-radius: 18.5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    transition: 0.5s ease;
    gap: 8px;
}

.zekat_tabs a.active .tab {
    background-color: #987b4d;
}

.zekat_tabs a.active .tab .icon {
    background-color: #fff;
}

.zekat_tabs a.active .tab p {
    color: #fff;
}

.zekat_tabs .tab:hover {
    background-color: #987B4D;
}

.zekat_tabs .tab:hover .icon {
    background-color: #fff;
}

.zekat_tabs .tab:hover p {
    color: #fff;
}

.zekat_tabs .tab .icon {
    width: 55px;
    min-height: 55px;
    border-radius: 100%;
    background-color: #987B4D;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.zekat_tabs a.active .tab .icon svg path {
    fill: #a38962;
}
.zekat_tabs .tab .icon svg {
    width: 25px;
    height: 25px;
    transform: rotate(0);
}
.zekat_tabs .tab .icon svg path {
    fill: #ffffff;
}
.zekat_tabs .tab p {
    font-size: 14px;
    line-height: 16px;
    color: #000000;
    font-family: 'Gotham Narrow Book';
    text-align: center;
}

/* Tab contents */
.zekat-hesaplama-all-tabs {
    margin-bottom: 4%;
}
.zekat-tab-contents {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
}
.zekat-tab-contents .zekat-tab-form {
    border-radius: 25.5px;
    background: #FFF;
    flex-shrink: 0;
    position: relative;
    min-height: 516px;
}

.zekat-tab-contents .zekat-tab-form .tab-pane {
    width: 100%;
    height: 100%;
    border-radius: 25.5px;
    background: #987B4D26;
    border: 1px solid #987B4D;
    padding: 29px 22px 0 20px;
    display: grid;
    grid-template-columns: 1fr;
}

.zekat-tab-contents .zekat-tab-form .tab-pane p {
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-family: 'Gotham Narrow Light';
    line-height: 23px;
}

.zekat-tab-contents .zekat-tab-form .tab-pane form .inputs{
    display: flex;
    flex-direction: column;
    border-radius: 25.5px;
    border: 0.3px solid #90909047;
    padding: 11px;
    margin-bottom: 19px;
    margin-top: 19px;
}

.zekat-tab-contents .zekat-tab-form .tab-pane form .inputs label {
    color: #A38962;
    font-size: 12px;
    font-style: normal;
    font-family: 'Gotham Narrow Book';
    line-height: 29px;
}
.zekat-tab-contents .zekat-tab-form .tab-pane form .inputs input {
    margin-bottom: 15px;
    text-align: left;
}

.zekat-tab-contents .zekat-tab-form  button {
    /* position: absolute; */
    /* bottom: 25px;
    right: 22px; */
    margin-bottom: 10px !important;
}
.form-control:disabled {
    background-color: #f8f8f8;
}
/* Zekat custom select starts */
.zekat-tab-contents select {
    -webkit-appearance: auto;
}
.alacak-subform {
    display: none;
}
.alacak-subform.active-select {
    display: block !important;
}

.borc-subform {
    display: none;
}
.borc-subform.active-select {
    display: block !important;
}
/* Zekat custom select ends */

.zekat-tab-contents .zekat-tab-form .tab-pane form button {
    float: right;
    width: 148px !important;
    height: 39px !important;
    font-size: 14px !important;
    margin-bottom: 46px;
}
.zekat-tab-contents .zekat-tab-form .tab-pane.show {
    display: block;
}
.zekat-tab-contents .zekat-tab-form .tab-pane {
    display: none;
}

.zekat-tab-contents .zekat-sonuclari {
    border-radius: 25.5px;
    flex-shrink: 0;
    min-height: 516px;
    background: #987B4D26;
    border: 1px solid #987B4D;
}
.zekat-tab-contents .zekat-sonuclari .bos-zekat-sepeti {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.zekat-tab-contents .zekat-sonuclari .bos-zekat-sepeti svg {
    width: 86px;
    height: 86px;
    margin-bottom: 20px;
}
.zekat-tab-contents .zekat-sonuclari svg path {
    fill: #987b4d;
}

.zekat-tab-contents .zekat-sonuclari .bos-zekat-sepeti p {
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-family: 'Gotham Narrow Book';
    line-height: 29px;
    text-align: center;
}

.zekat-tab-contents .zekat-sonuclari .zekat-sepeti {
    padding: 20px 13px;
    height: 100%;
    position: relative;
}

.zekat-tab-contents .zekat-sonuclari .zekat-sepeti #zekat-overlay, .zekat-tab-contents .zekat-sonuclari .zekat-sepeti #zekat-overlay-remove-item {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    border-radius: 25.5px;
    z-index: 1;
    background-color: rgb(255 255 255 / 0%);
    backdrop-filter: blur(2px);
    /* display: flex; */
    align-items: center;
    justify-content: center;
    font-size: 30px !important;
    color: #eb1c23;
    display: none;
}
.zekat-tab-contents .zekat-sonuclari .zekat-sepeti .sepet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
    border-bottom: 2px solid #90909014;
}
.sepet-header button svg {
    fill: #fff;
    width: 32px;
    height: 13px;
    transition: all 0.3s;
    stroke: #FFF;
}
.sepet-main ul li .urun-delete-btn {
    outline: unset;
    border: 0;
    background: transparent;
}
.zekat-tab-contents .zekat-sonuclari .zekat-sepeti .sepet-header .button {
    height: 34px !important;
    font-size: 11px;
    font-style: normal;
    font-family: 'Gotham Narrow Medium';
    line-height: 29px;
    margin:0 4px;
}
.zekat-sepeti button.urun-delete-btn svg {
    transform: rotate(0);
}
.zekat-tab-contents .zekat-sonuclari .zekat-sepeti .sepet-header p{
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-family: 'Gotham Narrow Medium';
    line-height: 23px;
}

.zekat-tab-contents .zekat-sonuclari .zekat-sepeti .sepet-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    right: 0;
    padding: 0 15px;
    background-color: #fff;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
}

.zekat-tab-contents .zekat-sonuclari .zekat-sepeti .sepet-footer .button {
    width: 148px;
    height: 39px;
    font-size: 14px;
    font-style: normal;
    font-family: 'Gotham Narrow Medium';
    line-height: 29px;
}

.zekat-tab-contents .zekat-sonuclari .zekat-sepeti .sepet-footer .zekat-mektari .title {
    color: #987b4d !important;
    font-size: 14px;
    font-style: normal;
    font-family: 'Gotham Narrow Medium';
    line-height: 29px;
}

.zekat-tab-contents .zekat-sonuclari .zekat-sepeti .sepet-footer .zekat-mektari .toplam-miktar {
    color: #4A4A4A !important;
    font-size: 20px;
    font-style: normal;
    font-family: 'Gotham Narrow Medium';
    line-height: 29px;
} 

.sepet-main {
    max-height: 316px;
    overflow: hidden;
    overflow-y: auto;
    padding: 15px;
}

.sepet-main::-webkit-scrollbar-thumb {
    background: #987b4d;
    border-radius: 6px;
}

.sepet-main::-webkit-scrollbar-track {
    background: #F5EAEA;
}

.sepet-main::-webkit-scrollbar {
    width: 5px;
}
.sepet-main ul{
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    padding-inline-start: 0 !important;
}

.sepet-main ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #90909014;
}

.sepet-main ul li .mal-adi {
    color: #987b4d;
    font-size: 14px;
    font-style: normal;
    font-family: 'Gotham Narrow Medium';
    line-height: 29px;
}

.sepet-main ul li .toplam-tutar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.sepet-main ul li .miktar {
    text-align: right;
}

.sepet-main ul li .miktar-rakami {
    color: #4A4A4A;
    font-size: 14px;
    font-style: normal;
    font-family: 'Gotham Narrow Book';
    line-height: 29px;
}

.sepet-main ul li .toplam-tutar-miktari {
    color: #000;
    font-size: 13px;
    font-style: normal;
    font-family: 'Gotham Narrow Medium';
    line-height: 29px;
}

.sepet-main ul li .toplam-tutar-miktari span {
    color: #4A4A4A;
    font-size: 16px;
    font-style: normal;
    font-family: 'Gotham Narrow Medium';
    line-height: 29px;
}

.sepet-main ul li .urun-delete-btn {
    background-color: transparent;
}

.no-zekat {
    text-align: center;
    padding: 10px;
}

.no-zekat p {
    font-size: 14px;
    color: #987b4d !important;
    line-height: 29px;
    font-family: 'Gotham Narrow Medium';
}

#zirai-urunler-bugday-soru{
    display: none;
}

#zirai-urunler-bugday-soru.activate {
    display: block !important;
}

#toplam-maliyet {
    display: none;
}

#toplam-maliyet.activate-input {
    display: block !important;
}

#zirai-urun-miktari-error {
    display: none;
    color: #987b4d !important;
    text-align: center;
}

.black-span {
    color: #5c6873;
    font-family: 'Gotham Narrow Medium';
}

.red-span {
    font-family: 'Gotham Narrow Medium';
    color: #987b4d;
}

#alacaklar a {
    font-size: 15px;
    /* color: #987b4d; */
    font-family: 'Gotham Narrow Medium';
}

.currency-unit {
    font-family: cursive !important;
}

.zirai-urunler-diger {
    padding: 10px;
    text-align: justify;
    display: none;
}

.zirai-urunler-diger p {
    font-size: 12px !important;
}

/* media queries */
@media screen and (max-width: 991px){
    .zekat-tabs {
        padding-bottom: 20px;
    }
    .zekat-tab-contents {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 1200px){
    .zekat_tabs {
        padding-bottom: 20px;
    }
}

@media screen and (max-width: 470px){
    .zekat-tab-contents .zekat-sonuclari .zekat-sepeti .sepet-header {
        gap: 5px;
        flex-direction: column;
        padding-bottom: 25px;
    }
    .zekat-tab-contents .zekat-sonuclari .zekat-sepeti .sepet-footer {
        flex-direction: column;
        padding-bottom: 25px;
    }
    .zekat-tab-contents .zekat-sonuclari .zekat-sepeti .sepet-footer .zekat-mektari {
        text-align: center;
    }
}
.form-control {
    display: block;
    width: 100%;
    font-family: 'Gotham Narrow Book';
    line-height: 1.5;
    color: #495057;
    transition: border-color 0.15sease-in-out, box-shadow 0.15sease-in-out;
    height: 50px;
    background-color: #f8f8f8;
    padding: 0 25px;
    font-size: 14px;
    border: 0;
    border-radius: 25px;
}
.sepet-header button, 
.zekat-tab-form button {
    max-width: 270px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 100%;
    height: 50px;
    background-color: #987b4d;
    border: 2px solid #987b4d;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s;
    color: #fff;
    width: 148px !important;
    height: 39px !important;
    font-size: 14px !important;
    margin-bottom: 10px;
}
.sepet-header button.button:hover,
.zekat-tab-form button:hover {
    background-color: #000;
    color: #fff;
    border-color: #000;
}