/* Color css start */
:root {
    --color-primary: #3b5998;
    --color-primary-2: #f7941d;
    --text-color: #334155;
    --text-color-2: #fff;
    --bg-primary: #FFFFFF;
    --bg-secondary: #F9FAFB;
    --font-primary: "DM Sans", sans-serif;
}
.modern-form{
    background-color: var(--bg-secondary);
    width: 99%!important;
}

.modern-form .ui-panel-titlebar {
    background: var(--color-primary);
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
}
.modern-form label {
    font-size: 16px!important;
    line-height: 1.75rem;
    color: var(--text-color);
    width: 100%;
}
.modern-form select {
    color: #495057;
    background: #fff;
    padding: .5rem .5rem;
    border: 1px solid #ced4da;
    outline: 0 none;
    font-size: 1rem;
    border-radius: 4px;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, opacity .2s;
}
.modern-form .ui-inputfield {
    color: #495057;
    background: #fff;
    border: 1px solid #ced4da;
    outline: 0 none;
    font-size: 16px;
    border-radius: 4px;
    padding: 5px;
}
.modern-form .ui-fluid .ui-trigger-calendar input.hasDatepicker {
    font-size: 11px!important;
}
.modern-form .ui-fluid .ui-trigger-calendar .ui-datepicker-trigger.ui-button {
    background-color: #f1e9e9 !important;
} {
    font-size: 11px!important;
}
.modern-form .ui-fluid .ui-button {
    min-height: 30px;
}
.modern-form .ui-icon.fa  {
    margin-top: -3px;
}
.modern-form .dtable-css .ui-icon.fa {
    margin-top: -7px;
}
.modern-form button  {
    /*border: 1px solid #79b7e7;*/
    min-height: 30px!important;
    background: var(--color-primary)!important;
    font-weight: bold!important;
    color: var(--text-color-2)!important;
    font-family: var(--font-primary) !important;
}

.modern-form th.ui-state-default {
    background: var(--color-primary);
    color: white;
}
.modern-form .ui-widget-header {
    background: var(--color-primary);
    color: white;
}
.modern-form .ui-widget-header .shrink:hover {
    color: white;
}
.modern-form tfoot td.ui-state-default {
    background: #c8daff;
}
.modern-form .tabTahakkuk .defaultBtn {
    padding: 9px 9px 9px 9px!important;
}
.modern-form .tabTahakkuk .ui-icon.fa {
    margin-top: -7px;
}
.modern-form .tabTahakkuk th {
    font-weight: 400!important;
}
.modern-form .tabTahakkuk tabTahakkukModul {
    font-weight: 400!important;
}
.modern-form .tabTahakkuk .tabTahakkukVadex label {
    line-height: 1rem!important;
}
.modern-form .tabTahakkuk .btnSmall  {
    /*border: 1px solid #79b7e7;*/
    min-height: 30px!important;
    background: var(--color-primary)!important;
    font-weight: bold!important;
    color: var(--text-color-2)!important;
    font-family: var(--font-primary) !important;
}

.modern-form .captcha-display {
    background: #333f58;
    border-radius: 3px;
    text-align: center;
    border: 1px solid #ddd;
    color: white;
    font-size: 20px;
    font-weight: bold;
    display: block;
}

.d-25{
    width: 25%!important;
}
.d-50{
    width: 50%!important;
}
.d80-m100{
    width: 80%!important;
    min-width: 80%!important;
}
.d50-m100{
    width: 50%!important;
}
.d60-m100{
    width: 60%!important;
}
.d80-m100{
    width: 80%!important;
}
.modern-form .ui-tabs-header{
    font-size: 16px;
}
.modern-form .grouptext label{
    width:auto;
}
.dm100{
    width: 100%!important;
}
.d-display-none-m-block{
    display: none;
}
.ui-widget .ui-widget {
    font-size: 13px;
}
/*.taksitlendirmeTable{*/
/*    font-size: 16px!important;*/
/*}*/

@media (max-width: 640px) {
    .ui-panelgrid .ui-grid-responsive .ui-grid-row {
        border-top: 0px solid #bcc7cf!important;
    }
    .d-25{
        width: 45%!important;
    }
    .d-50{
        width: 90%!important;
    }
    .d-m-90{
        width: 90%!important;
    }
    .d80-m100{
        width: 100%!important;
    }
    .d50-m100{
        width: 100%!important;
    }
    .d60-m100{
        width: 100%!important;
    }
    .d80-m100{
        width: 100%!important;
    }
    .d-m100{
        width: 100%!important;
    }
    .modern-form .ui-fluid .ui-trigger-calendar input.hasDatepicker {
        font-size: 8px !important;
    }
    .m-display-none{
        display: none!important;
    }
    .d-display-none-m-block{
        display: block;
    }
}