:root{
    --main-font: "Inter";
    --main-white:rgba(255, 255, 255, 1);
    --main-primary: rgba(82, 114, 190, 1);
    --main-dark: rgba(0, 0, 0, 0.25);
    --main-danger: rgba(245, 34, 45, 1);
    --main-success: rgba(82, 196, 26, 1);
    --main-orange: rgba(250, 140, 22, 1);

    --input-border-color: rgba(217, 217, 217, 1);
}


/*GLOBAL SEARCH BUTTON START*/
.search_wrapper{
    position: relative;
    margin-right: 1rem !important
}

.search_wrapper i {
    position: absolute;
    right: 10px;
    top: 10px;
    color: var(--input-border-color);
}

.global_search_input{
    border-radius: 6px;
    min-width: 250px;
    border: 1px solid var(--main-dark);
    height: 34px;
    outline: none;
    color: #555;
    padding-left: 10px!important;
    padding-right: 30px!important;
}

.global_search_input:focus{
    border: 1px solid #555;
}

.global_search_input::placeholder{
    padding-left: 5px;
    color: var(--main-dark);
}
/*GLOBAL SEARCH BUTTON END*/

/*GLOBAL CREATE BUTTON START*/

.global_add_btn{
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--main-primary);
    background-color: var(--main-primary);
    color: var(--main-white);
    padding: 0 16px 0 16px;
    line-height: 32px;
    border-radius: 6px;
}

.global_add_btn .text{
    font-size: 14px;
    font-weight: 400
}

/*GLOBAL CREATE BUTTON END*/

/*GLOBAL TABLE START*/
.table_head {
    color: rgba(0, 0, 0, 0.02);
    background-color: rgb(244,247,246);
    border-bottom: 1px solid rgba(240, 240, 240, 1);
    height: 38px!important;
    vertical-align: middle;
}

.table .table_head tr th {
    text-transform: none;
    font-size: 14px;
    font-weight: 800;
    line-height: 22px;
}

.table_tbody tr{
    vertical-align: middle;
}

.table_tbody tr td{
    border-bottom: 2px solid rgba(240, 240, 240, 1)!important;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.88);
}

.table > :not(:first-child){
    border-top: none;
}
/*GLOBAL TABLE END*/

/*INPUT*/
.main-input-group {
    position: relative;
}

.main-input-group .form-control {
    display: block;
    border: 1px solid var(--input-border-color);
    background-color: var(--main-white);
    padding: 0   12px 0 12px;
    border-radius: 8px;
    height: 40px;
    width: 100%;
}

.main-input-group .form-control:invalid:focus,
.main-input-group .form-control.is-invalid:focus,
.main-input-group .form-control.is-invalid:hover,
.main-input-group .form-control.is-invalid:active {
    border-color: #dc3545;
    box-shadow: 0 0 0 .25rem rgba(220, 53, 69, 0.25)
}

.main-input-group .form-control:invalid, .main-input-group .form-control.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem)
}

.main-input-group .form-control-sm {
    display: block;
    border: 1px solid var(--input-border-color);
    background-color: var(--main-white);
    padding: 0   12px 0 12px;
    border-radius: 8px;
    height: 32px;
    width: 100%;
}

.main-input-group .form-control.textarea {
    height: inherit;
    padding-top: 5px;
}

.main-input-group .form-control:focus,
.main-input-group .form-control:hover,
.main-input-group .form-control:active {
    border-color: var(--main-primary) !important;
    cursor: pointer;
    box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
    outline: 0;
}

.main-input-group .form-control:disabled,
.main-input-group .form-control:disabled:hover {
    border-color: var(--input-border-color)!important;
    background-color: rgba(0, 0, 0, 0.04)!important;
    outline: none!important;
    box-shadow: none !important;
    color: rgba(0, 0, 0, 0.25);
    cursor: not-allowed;
}

.main-input-group select option:first-child{
    color: rgba(0, 0, 0, 0.25);
}


.main-input-group label {
    font-family: var(--main-font), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
}

.main-input-group .required:after {
    content: ' *';
    color: var(--main-danger);
}

.main-input-group .error{
    font-family: var(--main-font), sans-serif;
    font-size: 12px;
    color: var(--main-danger);
}

.main-input-group i,
.main-input-group .add-icon{
    position: absolute;
    right: 10px;
    top: 35px;
    color: var(--input-border-color);
}

/*RADIO*/
.main-input-group .form-check-input{
    border-color: var(--input-border-color);
    background-color: var(--main-white);
}

.main-input-group .form-check-input:checked{
    background-color: var(--main-primary);
    border-color: var(--main-primary);
}


/*SAVE AND CANCEL BUTTON*/
.global_cancel_btn{
    font-family: var(--main-font), sans-serif;
    border-radius: 6px;
    border: 1px solid rgba(217, 217, 217, 1);
    background-color: rgba(255, 255, 255, 1);
    color: rgba(107, 78, 255, 1);
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
    padding-left:10px ;
    padding-right:10px ;
    display: flex;
    align-items: center;
    gap: 10px;
}

.global_save_btn {
    font-family: var(--main-font), sans-serif;
    border-radius: 6px;
    border: 1px solid rgba(107, 78, 255, 1);
    background-color:rgba(107, 78, 255, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
    padding-left:10px ;
    padding-right:10px ;
    display: flex;
    align-items: center;
    gap: 10px;
}

.global_cancel_btn img{
    filter: none;
}

.global_save_btn:hover,
.global_cancel_btn:hover{
    transform: translateY(-5%);
    transition: 0.21s ease;
}


.global_save_btn.disabled-btn{
    opacity: 0.5;
    cursor: not-allowed;
}

/*ANT TIME MULTIPLE PICKER*/
.ant-picker{
    border: 1px solid var(--input-border-color);
    position: relative;
    display: inline-flex;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.88);
    font-size: 14px;
    list-style: none;
    align-items: center;
    border-radius: 8px;
    width: 100%;
    height: 40px;
}

.ant-picker .ant-picker-input{
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.ant-picker .ant-picker-input >input {
    position: relative;
    display: inline-block;
    width: 100%;
    color: rgba(0, 0, 0, 0.88) ;
    font-size: 14px;
    line-height: 22px;
    transition: all .3s;
    flex: auto;
    padding: 5px;
    background: transparent;
    border: 0;
    font-family: var(--main-font), sans-serif;
}

.ant-picker .ant-picker-input >input:focus,
.ant-picker .ant-picker-input >input:hover{
    box-shadow: none;
    outline: none;
}

/*CUSTOM TOOLTIP*/
.my-tooltip-container {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.my-custom-tooltip {
    position: absolute;
    top: -35px; /* Strelka uchun joy qoldiriladi */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.85);
    color: rgba(255, 255, 255, 1);
    padding: 5px 10px;
    border-radius: 3px;
    white-space: nowrap;
    font-size: 14px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
}

.my-custom-tooltip::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
}

.my-tooltip-container:hover .my-custom-tooltip {
    visibility: visible;
    opacity: 1;
}

.main_search_area{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    flex-wrap: wrap;
}

.global_search_input_for_filter{
    width: auto;
    font-size: 12px;
    padding: 6px 12px;
    background-color: white;
}