.account-side-wrapper {height: 680px; display: flex;}
.account-side-wrapper .account-side-container {max-width: 245px; width: 100%;background-color: #fff; height: 100%; box-shadow: var(--shadow); border-radius: 20px 0px 0px 20px; padding: 32px 24px ; } 
.account-side-wrapper .account-side-container .button { width: 100%; border-radius: 30px;  padding: 10px 20px; font-size: 21px; margin-bottom: 20px; display: block; text-align: left; cursor: pointer;}
.account-side-wrapper .account-side-container .button.active {background-color: var(--theme-color-7); color: var(--theme-color-3);}
.account-side-wrapper .account-content-container {background-color: #fff; flex: 1;  height: 100%;border-radius: 0px 20px 20px 0px; box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(2,1fr); padding: 24px;}

/** Date picker */
.date-picker {position: relative;display: inline-block;}
.date-picker input {width: 200px;padding: 10px;font-size: 16px;border: 1px solid #ccc;border-radius: 4px;cursor: pointer;}
.date-picker-dropdown {position: absolute;top: 45px;left: 0;border: 1px solid #ddd;background: #fff;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);z-index: 10;display: none;border-radius: 4px;}
.date-picker-header {display: flex;justify-content: space-between;align-items: center;background: #f4f4f4;padding: 10px;border-bottom: 1px solid #ddd;}
.date-picker-header button {background: none;border: none;font-size: 16px;cursor: pointer;display: flex;align-items: center;justify-content: center;gap: 6px; padding:4px; transition:.3s;}
.date-picker-header button:hover {color:var(--theme-color-3)}
.date-picker-header span {font-weight: bold;font-size: 16px;}
.date-picker-grid {display: grid;grid-template-columns: repeat(7, 1fr);gap: 5px;padding: 10px; position: relative; overflow: hidden;}
.date-picker-grid::after {width: 100%; height: 100%; position: absolute; content: ''; display: flex; align-items: center; justify-content: center; background-color: #fff; font-family: "Font awesome 6 Pro"; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
.date-picker-grid::before {width: 100%; height: 100%; position: absolute; content: '\f3f4'; display: flex; align-items: center; justify-content: center; background-color: transparent; font-family: "Font awesome 6 Pro"; opacity: 0; transition: opacity 0.5s; pointer-events: none; animation: infinite 0.5s loader; z-index: 100;}
.date-picker-grid.loading::before,.date-picker-grid.loading::after{opacity: 1; pointer-events: all;}
.date-picker-grid .day-names {display: grid;grid-template-columns: repeat(7, 1fr);gap: 5px; grid-area: 1 / 1 / 2 / 8; text-align: center; padding: 0;}
.date-picker-grid button {border: none;background: #fff;padding: 8px;text-align: center;font-size: 16px;cursor: pointer;border-radius: 4px;}
.date-picker-grid button:hover {background: #e0e0e0;}
.date-picker-grid button.disabled {color: #aaa;cursor: not-allowed;}
.date-picker-grid button.allowed {background: var(--theme-color-3);border-radius:50%;color:#fff;}
.date-picker-grid button.allowed:hover {background: var(--theme-color-2);}

strong {color: var(--theme-color-1);}

.hidden {display: none !important; visibility: hidden !important; opacity: 0 !important;}