@import "variables";

/* avatar */

.avatar-border {
    border: 2px solid var(--color-primary-100);
}

.avatar-l {
    border-radius: 50% !important;
    width: 56px;
    height: 56px !important;
}

.avatar-m {
    border-radius: 50% !important;
    width: 48px;
    height: 48px !important;
}

.avatar-xs {
    border-radius: 50% !important;
    width: 24px;
    height: 24px !important;
}

.success-badge {
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background-color: var(--color-success-500);
    position: relative;
    top: 40px;
    left: 54px;
}

.avatarContent {
    padding: 8px 14px;
}

.avatarTitle-l {
    font-size: var(----font-size-4);
    font-weight: var(----font-weight-3);
    margin-bottom: 0px;
}

.avatarTitle-m {
    font-size: var(----font-size-3);
    font-weight: var(----font-weight-3);
    margin-bottom: 0px;
}

/* button */
.button-style {
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    margin: 4px;
    font-weight: var(--font-weight-2);
    font-size: var(--font-size-3);
}

.button-xl {
    padding: 12px 20px;
    gap: 8px;
    height: 50px;
}

.button-l {
    padding: 10px 16px;
    gap: 4px;
    height: 38px;
}

.button-md {
    padding: 8px 14px;
    gap: 4px;
    font-size: var(--font-size-2);
    height: 34px;
}

.primary {
    background-color: var(--color-primary-700);
    color: var(--color-white-100) !important;
    border: 1px solid var(--color-primary-700);
}

.primary:hover {
    box-shadow: 0px 0px 0px 4px var(--color-primary-100);
}

.stroke {
    background-color: var(--color-white-100);
    color: var(--color-gray-700) !important;
    border: 1px solid var(--color-gray-300);
}

.stroke:hover,
.stroke-danger:hover {
    box-shadow: 0px 0px 0px 4px var(--color-gray-100);
}

.stroke .dot-icon {
    color: var(--color-success-500);
}

.danger {
    background-color: var(--color-red-700);
    color: var(--color-white-100) !important;
    border: 1px solid var(--color-red-700);
}

.danger:hover {
    box-shadow: 0px 0px 0px 4px var(--color-red-100);
}

.stroke-danger {
    color: var(--color-red-700) !important;
    background-color: var(--color-white-100);
    border: 1px solid var(--color-red-300);
}

.primary-link {
    border: none !important;
    background-color: var(--color-white-100);
    color: var(--color-primary-700) !important;
}

.primary-link:hover {
    background-color: var(--color-primary-50);
}

.primary-link .dot-icon {
    color: var(--color-success-500);
}

.link-danger {
    color: var(--color-red-700) !important;
    border: none;
    background-color: var(--color-white-100);
}

.link-danger:hover {
    background-color: var(--color-red-50);
}

/* badges */
.badge-content {
    border-radius: 8px;
}

.table-title{
    font-size: 18px;
}

.badge-number{
    font-size: 14px !important;
    background-color: rgba(245, 245, 245, 1) !important;
    padding: 3px 8px !important;
    border-radius: 16px !important;
    font-weight: 400 !important;
    color: rgba(65, 70, 81, 1) !important; 
    margin: 0 20px;
}

.deleteBtn{
    background-color: rgba(217, 45, 32, 1) !important;
    border-radius: 8px !important   ;
    color: #ffffff !important;
}


.dataTables_paginate .paginate_button.disabled button {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.dt-btn{
    border: 1px solid rgba(213, 215, 218, 1);
    border-radius: 8px;
    padding: 8px 14px;
    box-shadow: 0px px 6px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    color: #000;
}
button:disabled,
button[disabled] {
    opacity: 0.4 !important;
}

 

.badge-l {
    padding: 8px 16px;
}

.badge-gray {
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-2);
}

.dot-badge {
    color: var(--color-gray-500);
}

/* label */

.label {
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-2);
    color: var(--color-gray-700);
    margin-bottom: 0.2rem;
}

.input {
    height: 38px;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}
.input {
    border: 1px solid var(--color-gray-300) !important;
    border-left: 1px !important;
}

.input-padding-tooltip {
    padding-inline-start: 40px !important;
}

.input-group .input {
    border: 1px solid var(--color-gray-300) !important;
}

.input:focus {
    border: 1px solid var(--color-primary-300) !important;
    box-shadow: 0px 0px 0px 4px hsla(240, 100%, 95%, 1) !important;
}

.tooltip-input{
    border: none  !important;
}

.form-icon {
    z-index: 7 !important;
    transform: translateY(40%) !important;
}

.input-icon {
    padding: 8px 32px !important;
}

.was-validated .form-control:invalid {
    border: 1px solid var(--color-red-300) !important;
}
.was-validated .form-control:invalid:focus {
    box-shadow: 0px 0px 0px 4px var(--color-red-100);
}

.was-validated .input:focus:invalid {
    border: 1px solid var(--color-red-300) !important;
    box-shadow: 0px 0px 0px 4px var(--color-red-100) !important;
}

/* .was-validated .form-control:valid{
    border: 1px solid var(--color-primary-300) !important;

} */

.invalid-feedback {
    color: var(--color-red-600) !important;
    font-size: var(--font-size-1) !important;
}

input:disabled {
    background-color: var(--color-gray-50) !important;
    cursor: not-allowed;
}

.form-control::placeholder {
    /* Standard */
    color: var(--color-gray-400) !important;
}

/* drop-down */

.select-title {
    color: var(--color-gray-900) !important;
    margin-bottom: 0.2rem;
}

.selectInput .input {
    color: var(--color-gray-900) !important;
}

.dropdownContent {
    position: relative;
    height: 38px;
}

/* Dropdown button */

.dropdown-btn {
    padding: 8px 12px !important;
    border-radius: 8px !important;
    border: 1px solid var(--color-gray-300) !important;
    background-color: var(--color-white-100) !important;
    cursor: pointer;
    text-align: left;
    height: 38px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.was-validated .dropdown-btn:focus {
    border: 1px solid var(--color-red-300) !important;
    box-shadow: 0px 0px 0px 4px var(--color-red-100);
}

.dropdown-text {
    color: var(--color-gray-400) !important;
    gap: 8px;
    display: flex !important;
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-1);
}

.selected-option {
    color: var(--color-gray-700) !important;
}

.dropdown-btn:hover {
    background-color: var(--color-white-100) !important;
}

/* Dropdown content */
.dropdown-content {
    padding: 8px 12px;
    display: none;
    border-radius: 8px;
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    margin-top: 2.5rem;
    width: 100%;
    cursor: pointer;
}

.dropdown-content-item {
    padding: 8px 12px !important;
    gap: 8px;
    display: flex !important;
}

.dropdown-content div:hover {
    background-color: #f1f1f1;
}

.dropdown-btn:focus,
.dropdown-btn.focused {
    border: 1px solid var(--color-primary-300) !important;
    background-color: var(--color-white-100) !important;
    box-shadow: 0px 0px 0px 4px var(--color-primary-50);
}

.dropdown-content div:focus,
.dropdown-content div.focused {
    background-color: #ddd;
    outline: none;
}

.select-icon {
    width: 16px;
    height: 16px;
}

.dropdown-title {
    font-weight: var(--font-weight-2);
    font-size: var(--font-size-2);
    color: var(--color-gray-700);
    /* margin-bottom: 0.2rem; */
}

/* checkbox */
.checkbox-content {
    display: flex;
    position: relative;
    padding-left: 25px;
    margin-bottom: 19px;
    cursor: pointer;
    font-size: var(--font-size-3);
    color: var(--color-gray-700);
}
.input-checkbox {
    height: 20px;
    width: 20px;
}

.checkbox-content input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius: 4px;
    border: 1px solid var(--color-gray-300);
    /* background-color: #; */
}

.checkbox-content:hover input ~ .checkmark {
    background-color: var(--color-primary-50);
    border: 1px solid var(--color-primary-600);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-content input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-content .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;

    transform: rotate(45deg);
}

.checkbox-content input:checked ~ .checkmark {
    background-color: var(--color-primary-50);
    border: 1px solid var(--color-primary-600) !important;
    box-shadow: 0px 0px 0px 2px var(--color-primary-50);
}

.checkbox-content input.checkbox:checked ~ .checkmark:after {
    border: solid var(--color-primary-600);
    border-width: 0 2px 2px 0;
    height: 9px;
    top: 4px;
    left: 7px;
}

.needs-validation {
    padding: 24px 16px;
    border-radius: 8px;
    border: 1px solid var(--color-gray-400);
}

/* table */

.table-header {
    height: 44px;
    background-color: var(--color-red-20) !important;
}

.table-col {
    font-size: var(--font-size-1) !important;
    color: var(--color-gray-600) !important;
    background-color: var(--color-gray-25) !important;
    border: none !important;
}
.table-row {
    border: none !important;
}
.table-content tbody tr {
    height: 72px;
}
.table-content tbody td {
    border: none;
    font-size: var(--font-size-2) !important;
}

 .custom-table .sorting::after,
.custom-table .sorting_asc::after,
.custom-table .sorting_desc::after {
  display: inline-flex;
  align-items: center;
  width: 12px;
  height: 7px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.46094 6.03906L0.960938 1.53906C0.65625 1.25781 0.65625 0.765625 0.960938 0.484375C1.24219 0.179688 1.73438 0.179688 2.01562 0.484375L6 4.44531L9.96094 0.484375C10.2422 0.179688 10.7344 0.179688 11.0156 0.484375C11.3203 0.765625 11.3203 1.25781 11.0156 1.53906L6.51562 6.03906C6.23438 6.34375 5.74219 6.34375 5.46094 6.03906Z' fill='%23D5D7DA'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  content: "";
  margin-left: 0.5rem;
} 

.custom-table .sorting_asc::after {
    display: inline-flex;
    align-items: center;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.46094 0.984375C5.74219 0.679688 6.23438 0.679688 6.51562 0.984375L11.0156 5.48438C11.3203 5.76562 11.3203 6.25781 11.0156 6.53906C10.7344 6.84375 10.2422 6.84375 9.96094 6.53906L6 2.57812L2.01562 6.53906C1.73438 6.84375 1.24219 6.84375 0.960938 6.53906C0.65625 6.25781 0.65625 5.76562 0.960938 5.48438L5.46094 0.984375Z' fill='%23414651'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    content: "";
    margin-left: 0.5rem;
  }
  .custom-table .sorting_desc::after {
    display: inline-flex;
    align-items: center;
    width: 12px;
    height: 7px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.46094 6.03906L0.960938 1.53906C0.65625 1.25781 0.65625 0.765625 0.960938 0.484375C1.24219 0.179688 1.73438 0.179688 2.01562 0.484375L6 4.44531L9.96094 0.484375C10.2422 0.179688 10.7344 0.179688 11.0156 0.484375C11.3203 0.765625 11.3203 1.25781 11.0156 1.53906L6.51562 6.03906C6.23438 6.34375 5.74219 6.34375 5.46094 6.03906Z' fill='%23D5D7DA'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    content: "";
    margin-left: 0.5rem;
  }
/* .custom-table .sorting_asc::after {
    background-image: url("data:image/svg+xml,%3Csvg width='0.7rem' height='0.7rem' viewBox='0 0 292 375' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M131.965 15.3808C139.5 7.12345 152.5 7.12346 160.035 15.3808L262.976 128.193C274.106 140.39 265.453 160 248.941 160H43.0589C26.5474 160 17.8943 140.39 29.0238 128.193L131.965 15.3808Z' fill='%23dde1ee'/%3E%3Cpath d='M160.035 359.619C152.5 367.877 139.5 367.877 131.965 359.619L29.0238 246.807C17.8942 234.61 26.5473 215 43.0589 215L248.941 215C265.453 215 274.106 234.61 262.976 246.807L160.035 359.619Z' fill='%23377dff'/%3E%3C/svg%3E%0A") !important ;
    content: "";
  }
  .custom-table .sorting_desc::after {
    background-image: url("data:image/svg+xml,%3Csvg width='0.7rem' height='0.7rem' viewBox='0 0 292 375' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M131.965 15.3808C139.5 7.12345 152.5 7.12346 160.035 15.3808L262.976 128.193C274.106 140.39 265.453 160 248.941 160H43.0589C26.5474 160 17.8943 140.39 29.0238 128.193L131.965 15.3808Z' fill='%23377dff'/%3E%3Cpath d='M160.035 359.619C152.5 367.877 139.5 367.877 131.965 359.619L29.0238 246.807C17.8942 234.61 26.5473 215 43.0589 215L248.941 215C265.453 215 274.106 234.61 262.976 246.807L160.035 359.619Z' fill='%23dde1ee'/%3E%3C/svg%3E%0A");
    content: "";
  } */