.index-banner {
    padding-top: 15rem;
}

.main-banner img {
    width: 100%;
    max-width: 54%;
    min-width: 54rem;
    max-height: 20rem;
    vertical-align: middle;
}

header.header {
    margin-top: 220px;
}

#main-spliter-container {
    position: relative;
}

#edit-container {
    background-color: #fcfcfc;
}

#min-banner {
    position: absolute;
    width: 100%;
    height: 2rem;
}

.main-banner {
    text-align: center;
    padding: 1rem;
    background-color: aliceblue;
    text-align: center;
    padding: 1rem;
    position: fixed;
    top: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 999;
    padding: 13px 0;
    min-height: 13rem;
    max-height: 14rem;
    width: 100%;
}

.main-banner img {
    width: 70%;
}

.logo-main-view {
    width: 300px;
    text-align: center;
    padding: 2rem;
}

.main-left-container.container {
    height: 100%;
    background-color: lightgray;
    /* font-family: monospace; */
    font-family: montserrat, sans-serif;
}

.main-left-container.container .list {
    padding: 1rem 0rem 1rem 0;
}

.list.selected {
    font-weight: bold;
    color: #5a5278;
    ;
}

.unit-list-container {
    background-color: #fff;
    padding: 15px 15px 20px;
    display: grid;
    row-gap: 8px;
}

.unit-list-container.container .list {
    border-bottom: 1px solid #27282B;
    border-right: 1px solid #27282B;
    font-size: 1rem;
}

.unit-list-container.container :hover {
    background-color: #578eba;
}

.main-left-container {
    position: fixed;
    width: 300px !important;
}

.main-left-container .list {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.main-right-container {
    background-color: #fff;
    /* border-radius: 0 0 12px 12px; */
    padding: 15px 15px 20px;
    display: grid;
    row-gap: 8px;
    font-family: montserrat, sans-serif;
}

.main-right-container .employee-container-table-leave {
    height: 410px;

    border: 2px solid #a6a6b347 !important;
    padding: 1rem !important;
    border-radius: 0.55rem;
    width: 96% !important;
}

.holiday-today {
    display: block;
    text-align: center;
    padding-top: 8rem;
    color: red;
}

.header-right-container.container,
.container-edit-button,
.container-upload-button {
    padding: 20px 10px 10px 10px;
    border: 0;
    background: none;
    display: flex;
    align-items: center;
}

.container-list-files {
    padding: 20px 20px 10px 20px;
}

.list-files {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.header-content.text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.table-header {
    text-transform: uppercase;
}

.table-header th {
    border-top: 0;
    border-bottom-width: 1px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-weight: normal;
}

.table-body .button {
    font-size: 14px;
    background-color: transparent;
    padding: 0.25rem 0.5rem;
}

.delete-button {
    color: rgb(235 57 65);
}

.table-body td,
.table-body th {
    vertical-align: middle;
}

.table-body img {
    color: #4D5052;
    font-weight: 500;
    width: 3rem;
    height: 3rem;
    line-height: 2rem;
    border-radius: 50%;
    display: inline-block;
    background: #808488 no-repeat center/cover;
    position: relative;
    vertical-align: bottom;
    font-size: .875rem;
    user-select: none;
    object-fit: cover;
}

.table-body .image-text1 {
    font-size: 14px;
    font-weight: 500;
    margin-top: 0;
    color: black;
}

.table-body .image-text2 {
    color: #6c757d !important;
    font-size: 12px;
}

.table-body .image-text1,
.table-body .image-text2 {
    padding-left: 1rem;
    font-family: montserrat, sans-serif;
}

.employee-container-body,
.leave-employee-container {
    display: block;
    width: 100%;
    overflow-x: auto;
}

.employee-container-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.employee-container-table th:first-child {
    width: 25rem;
}

.employee-container-table thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

.employee-container-table tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

.employee-container-table table tbody tr:nth-of-type(odd) {
    background: transparent;
}

.employee-container-table table tbody tr:nth-of-type(even) {
    background-color: rgba(0, 0, 0, 0.04);
}

.employee-container-table table td,
.employee-container-table table th {
    border-style: none;
    font-size: 14px;
    /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; */
}

.employee-container-table table td,
.employee-container-table table tr {
    border-top: 1px solid #dee2e6;
    padding: 0.75rem;
}

.add-new-emp-button i {
    font-size: 14px;
    padding-right: 8px;
}

.edit-profile-button i {
    background-color: none !important;
}

.add-new-emp-button,
.edit-profile-button,
.edit-save-button,
.edit-profile-button {
    color: white;
    border-radius: 4px;
    font-size: 14px;

    margin-left: auto;
    display: flex;
    order: 100;
    align-self: center;
    background-color: #5a5278;
}

.container-profile-button {
    margin-top: 1rem;
    display: flex;
}

.container-profile-buttons.container {
    text-align: -webkit-right;
    align-self: center;
}

.container-profile-buttons.container .button {
    display: block;
    width: 115px;
    text-align: center;

    margin: 4px;
    color: white;
    border-radius: 4px;
    font-size: 14px;
    background-color: #5a5278;
}

.container-profile-buttons.container .button .text {
    margin: 5px;
}

.edit-back-button.button {
    color: white;
    border-radius: 4px;
    font-size: 14px;
    width: 5rem;
    background-color: #5a5278;
    ;
}

.edit-back-button.button:hover,
.add-new-emp-button.button:hover,
.container-profile-buttons.container .button:hover {
    background-color: #007bff;
}


.edit-back-button.button i {
    margin-right: 8px;
}

/* VIEW PROFILE */

.container-main-profile.container {
    display: flex;
    margin: 2rem 0;
    height: 150px;
    box-sizing: border-box;
    border: 2px solid #a6a6b347;
}

.container-personal-info-edit {
    display: flex;
    margin: 2rem 0;
    /* height: 150px; */
    box-sizing: border-box;
    border: 2px solid #a6a6b347;

    font-family: montserrat, sans-serif;
}

.container-photo.container {
    height: 120px;
    width: 120px;
    position: absolute;
}

.detail-picture {
    width: 120px;
    height: 120px;
    margin: 1rem;
}

.detail-picture img {
    border-radius: 50%;
    height: 120px;
    width: 120px;
    object-fit: cover;
    border: 1px solid #e4e4e8;
}

.detail-position.text,
.detail-empid.text {
    display: flex;
    font-size: 14px;
    color: #8e8e8e;
    font-weight: 500;
}

.container-profile-basic.container {
    margin-left: 140px;
    padding-right: 50px;

    font-family: montserrat, sans-serif;
}

.container-profile-basic.container .container-info-left.container {
    margin: 1rem;
}

.container-info-left.container {
    flex: 0 0 auto;
}

.container-full-name.container {
    font-size: 16px;
    font-weight: 500;
    margin-left: -12px;
}

.profile-table {
    width: 90%;
}

.profile-table .table-body tr :first-child {
    font-size: 12px;
    font-weight: 500;
}

.profile-table td,
.profile-table tr,
.profile-table th {
    border-style: none;
    font-size: 12px;
}

.profile-picture img {
    width: 200px;
    margin: 1rem 0;
}

.passport-save-button.button {
    color: white;
    border-radius: 4px;
    font-size: 14px;
    background-color: #5a5278;
}

.container-personal-info-edit-left.container {
    border-right: 2px solid #e4e4e8;
}

.container-personal-info-edit-left.container {
    width: 35%;
}

.container-personal-info-edit-right.container {
    width: 70%;
}

.edit-profile-form,
.upload-files-form,
.form-use-image {
    z-index: 999;
}

.edit-profile-form .form-body {
    overflow-y: auto;
}

.background {
    position: fixed;
}


.upload-files-form .drop-zone {
    width: 100%;
    min-height: 100px;
    text-align: center;
    border: 3px dashed #999999;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    margin: 10px 0;
}

.file-thumbnail-container {
    min-width: 100px;
    display: inline-block;
    font-family: "Raleway";
    font-size: 18px;
    color: #000000;
    background-color: transparent;
    border: none;
    margin: 0;
    padding: 5px 15px;
    text-align: center;
    width: auto !important;
}

.thumbnail {
    width: 100px;
    height: 100px;
    border-radius: 8px 8px 8px 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    -webkit-border-radius: 8px 8px 8px 8px;
    background-size: cover;
    margin: 0 auto;
    border: 1px solid #e1e1e1;
    display: block;
    background-color: #5a5278;
}

.thumbnail i {
    font-size: 32px;
    position: relative;
    top: calc(50% - 25px);
    color: #e1e1e1;
    display: block;
}

.thumbnail:hover {
    background-color: #1976D2;
    cursor: pointer;
}

.file-thumbnail-container .text {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.profile-right-top-container.container .container,
.profile-right-bottom-container.container .container {
    padding: 10px 10px 10px 10px;
    border: 0;
    background: none;
    display: flex;
    align-items: center;
}

.profile-right-bottom-container.container .scroll-container {
    position: relative;
    background-color: white;
    height: 400px;
}

.profile-right-bottom-container.container .scroll-container .file-thumbnail-container.container {
    display: inline-block;
}

.profile-right-top-container.container .passcont-table {
    height: 400px;
    overflow: auto;
}

.profile-right-top-container .container .header-content.text {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.profile-right-top-container.container .container .pasleftcont,
.profile-right-top-container.container .container .contrightcont {
    display: block;
    width: 50%;
}

.pasleftcont.container .button,
.contrightcont.container .button {
    width: auto;
    font-size: 12px;
    height: 24px;
    float: right;
    color: white;
    border-radius: 4px;
    background-color: #5a5278;
}

.profile-right-splitter {
    position: relative;
}

.passport-container,
.contract-container {
    /* margin: 10px 10px 10px 10px !important; */
    border: solid 1px gray !important;
    /* cursor: pointer; */
    height: 200px;
}

.profile-passport,
.profile-contract {
    /* width: 280px; */
    max-width: 136;
    box-shadow: 2px 2px 7px 0px #5a5278;
}

.profile-passport img,
.profile-contract img {
    max-width: 136px;
}

.profile-right-top-container .profile-input-container.container {
    display: inline-block;
}

.profile-input-container label>input {
    width: fit-content !important;
}

.profile-input-container.container .input.inline.textbox label>div {
    width: fit-content !important;
}

.profile-input-container.container .input.inline {
    padding: unset !important;
}

.container-files-edit.container .split-container {
    position: relative;
}

.passport-info-container.container .input.inline.textbox {
    display: inline-grid;
}

.passport-info-container.container .input.inline.textbox label {
    color-scheme: dark;
}

.passport-info-container.container .input.inline label {
    display: block;
}

.passport-info-container.container .input.inline.textbox input {
    padding: 8px;
}

.passport-image-container.container input {
    border: none;
}

.passport-image-container.container i {
    font-size: 5rem;
}

.passport-list.list {
    padding: 1rem;
}

.passport-list.list i{
    color: green;
    font-size: 32px;
}

.passport-image-container.container img {
    margin: 1rem 0;
    width: 200px;
}

.passport-image-container.container .button {
    color: white;
    border-radius: 4px;
    font-size: 14px;
    background-color: #5a5278;
}

.upload-save-button {
    color: white;
    border-radius: 4px;
    font-size: 14px;
    margin-left: auto;
    display: flex;
    order: 100;
    align-self: center;
    background-color: #5a5278;
}

.upload-save-button i {
    margin-right: 8px;
}

.passport-profile-picture {
    width: 300px;
}

.passport-info-container.container .date-picker.inline {
    padding: 4px 16px;
    width: 100%;
}

.passport-info-container.container .date-picker.inline label {
    display: block;
}

.passport-file-list-container.container {
    overflow-y: auto;
    height: 460px;
    border: 1px solid;
    /*2px solid #a6a6b347*/
    padding: 1rem;
}

.passport-file-list-container.container .passport-list.list img {
    width: 10rem;
    border-radius: unset;
    height: auto;
}

.passport-file-list-container.container .container {
    display: flex;
}

.passport-file-list-container.container .button {
    background-color: red;
    color: white;
    margin-left: auto;
    align-self: center;
}

.header-content-passport-list {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    font-family: montserrat, sans-serif;
    padding: 20px 10px 10px 10px;
}

.form-save-text,
.form-delete-text {
    padding: 1rem;
}

.form-use-image .form-body {
    text-align: center;
}

.use-image.button,
.cancel-image.button,
.download-button.button {
    padding: 0 1rem;
    margin: 1rem;

    color: white;
    border-radius: 4px;
    font-size: 14px;
    margin-left: auto;
    background-color: #5a5278;
}

.passport-file-list-container.container .container {
    border-bottom: 1px solid #dee2e6;
}



/* -------------------------------------------------- */

/* ------------------------ FILES -------------------------- */
.container-main-files.container {
    display: flex;
    margin: 2rem 0;
    height: 220px;
    box-sizing: border-box;
    /* border: 2px solid #a6a6b347; */
}


.container-files-info-edit {
    display: flex;
    margin: 2rem 0;
    /* height: 150px; */
    box-sizing: border-box;
    border: 2px solid #a6a6b347;

    font-family: montserrat, sans-serif;
}

.container-files-info-edit-left.container {
    border-right: 2px solid #e4e4e8;
}

.container-files-info-edit-left.container,
.container-files-info-edit-right.container {
    width: 50%;
}

.files-pass-picture {
    text-align: center;
}

.files-pass-picture img {
    max-height: 200px;
    margin: 8px;
}

/* -------------------------------------------------- */

/* ----------------------- LEAVES --------------------------------*/

.leave-top-container {
    display: inline-flex !important;
}

.leave-bottom-container {
    border: 2px solid #a6a6b347 !important;
    padding: 1rem !important;
    border-radius: 0.55rem;
    width: 96% !important;
}

.leave-buttons-container {
    margin-top: 1rem;
    display: flex;
}

.leave-onleave-today.container,
.leave-total-month.container,
.leave-total-day.container {
    display: block !important;
}

.leave-onleave-today,
.leave-total-month,
.leave-total-day {
    border: 2px solid #a6a6b347 !important;
    margin: 4px !important;
    padding: 4px !important;
    background-color: #fff;
    border-radius: 0.55rem;
}

.leave-header {
    /* display: block !important; */
    display: flex !important;
    font-size: 14px;
    font-family: "Montserrat", sans-serif;
}

.leave-counter,
.on-leave-today {
    /* display: block !important; */
    display: flex !important;
    font-family: "Montserrat", sans-serif;
    font-size: 1.17em;
    font-weight: bold;

}

.on-leave-today {
    color: #45aaf2 !important;
    font-family: "Montserrat", sans-serif;
    font-size: 1.17em;
    font-weight: bold;
}

.not-leave-today {
    color: #e03997 !important;
    font-family: "Montserrat", sans-serif;
    font-size: 1.17em;
    font-weight: bold;
}

.employee-container-table-leave {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    height: 22rem;
}

.employee-container-table-leave th:first-child {
    width: 15rem;
}

.employee-container-table-leave td:last-child {
    text-align: center;
}

.employee-container-table-leave thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

.employee-container-table-leave tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

.employee-container-table-leave table tbody tr:nth-of-type(odd) {
    background: transparent;
}

.employee-container-table-leave table tbody tr:nth-of-type(even) {
    background-color: rgba(0, 0, 0, 0.04);
}

.employee-container-table-leave table td,
.employee-container-table-leave table th {
    border-style: none;
    font-size: 12px;
    /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; */
}

.employee-container-table-leave table td,
.employee-container-table-leave table tr {
    border-top: 1px solid #dee2e6;
    padding: 0.75rem;
}

/* -------------------------------------------------- */


.employee-container-table-leave-edit {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    height: 22rem;
}

.employee-container-table-leave-edit td:last-child {
    text-align: center;
}

.employee-container-table-leave-edit thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

.employee-container-table-leave-edit tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

.employee-container-table-leave-edit table tbody tr:nth-of-type(odd) {
    background: transparent;
}

.employee-container-table-leave-edit table tbody tr:nth-of-type(even) {
    background-color: rgba(0, 0, 0, 0.04);
}

.employee-container-table-leave-edit table td,
.employee-container-table-leave-edit table th {
    border-style: none;
    font-size: 12px;
    /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; */
}

.employee-container-table-leave-edit table td,
.employee-container-table-leave-edit table tr {
    border-top: 1px solid #dee2e6;
    padding: 0.75rem;
}

/* -------------------------------------------------- */

.employee-container .button {
    background-color: white;
}

.employee-container .button .text {
    color: blue;
    font-size: 14px;
}

.detailview-container .input.inline.textbox input {
    padding: 8px;
}

.detailview-container .edit-back-button {
    width: fit-content;
    margin: 1rem;
    color: white;
}

.detailview-container .edit-save-button {
    margin: 1rem;
    color: white;
    right: 4rem;
    float: right;
}

.detailview-container .edit-back-button .text,
.detailview-container .edit-save-button .text {
    padding-left: 4px;
}

.detailview-container .date-picker.inline {
    padding: 4px 16px;
    width: 100%;
}

.detailview-container label {
    display: block;
}

.date-picker.inline label>input {
    background-color: var(--C800);
    color: var(--C50);
    padding: 8px;
    width: calc(60% - 10px);
    color-scheme: dark;
}

.date-picker.inline label>div {
    display: inline-flex;
    width: 40%;
    font-size: 12px;
}

.input.inline label>select {
    padding: 8px;
    width: calc(60% - 10px);
}

/* ------------------- Tabs ---------------------------- */
/* .container-main-profile-tabs.container{
    display: flex;
    position: relative; */
/* } */

.container-profile.container .tab {
    position: relative !important;
}

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

.tab .tab-header {
    display: inline-block;
}

.tab .tab-content-container {
    height: inherit;
    overflow-y: auto;
    border-top: solid 1px #ccc;
    padding: 12px;
}

.tab .button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

.tab .button:hover {
    background-color: #e7e7e7;
}

.tab .button.active {
    background-color: #e7e7e7;
}

.tab-content-container .container {
    top: auto;
    bottom: auto;
    display: none;
}

.tab-content-container .container.selected {
    top: auto;
    bottom: auto;
    display: block;
}

/* .container-personal-info-edit.container {
    display: block !important;
} */

/* ------- Login --------------*/
.login-main-container {
    height: 100vh !important;
    /* background: url("/images/AIT-resource.jpg"); */
    /* background: url("/images/AIT-Gate-22-banner-1.jpg"); */
    /* background-position: center;
    background-repeat: no-repeat;
    background-size: cover; */
    max-width: 100% !important;
}

.login-image-background {
    /* background: url(/images/AIT-Gate-22-banner-1.jpg); */
    background: url(/images/background1.png);

    /* filter: blur(8px px);
    -webkit-filter: blur(4px); */
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100% !important;
}

.login-login-button {
    color: white;
    border-radius: 4px;
    font-size: 14px;
    margin-left: auto;
    text-align: center;
    order: 100;
    align-self: center;
    background-color: #5a5278;
    margin-top: 1rem;
}

.login-error {
    width: 380px !important;
    height: 180px !important;
    position: absolute;
    left: 37% !important;
    top: 40% !important;
    z-index: 9999;
}

.login-error .form-body {
    padding: 1rem;
}

.login-container-center {
    max-width: 425px !important;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    font-weight: bold;
    border: 3px solid #f1f1f1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 20px;
    text-align: center;
}

.login-container-header {
    border-bottom: 1px solid #ddd;
    color: #374767;
    background-color: #fff;
    border-color: #e4e5e7;
    position: relative;
    padding: 1rem;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-right-radius: 3px;
}

.login-header-button {
    font-size: 60px;
    color: #151b8d;
    float: left;
    line-height: 0;
    background-color: #fff;
    pointer-events: none;
    padding-right: 2px;
}

.login-header-button i {
    font-size: 3rem;
}

.login-header-text {
    font-family: math;
    font-weight: bold;
    color: #1976D2;
}

.login-container-details {
    padding: 2rem 0rem;
    text-align: center;
}

.login-container-details label {
    display: block;
}

.login-container-details .input.input label>input {
    width: -webkit-fill-available;
    background-color: white;
    color: #007bff;
}

.login-container-details .input.input.inline label>div {
    display: block;
    text-align: left;
}

.login-container-footer {
    border-top: 1px solid #e1e6ef;
    padding: 10px 15px;
    font-size: 12px;
    text-align: center;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}



/* Dashboard */

.holiday-container-table {
    font-family: montserrat, sans-serif;
    font-size: 14px;
    /* border: 2px solid #a6a6b347 !important; */
    padding: 1rem !important;
    border-radius: 0.55rem;
}


.holiday-container-table table td,
.holiday-container-table table tr,
.holiday-container-table table th {
    border-style: none !important;
}

.holiday-header-content{
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    display: block;
    text-align: center;
    padding-top: 5px;
}

.holiday-container-table table tr{
    text-align-last: center;
}

.create-account,
.create-account-cancel {
    font-size: 12px;
    text-align: center;
    display: block;
    padding-top: 1rem;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    color: white;
}

.create-account-hidden,
.create-account-cancel-hidden {
    display: none;
}

.create-account:hover,
.create-account-cancel:hover {
    color: red;
    background: none;
}

/* sangpi */
.toggle{
    --width:40px;
    --height: calc(var(--width)/2);
    --border-radius: calc(var(--height)/ 2);
    display: inline-block;
    cursor: pointer;
    padding-left: 1.3rem;
}
.toggle__input{
    display: none;
}
.toggle__fill{
    position: relative;
    width: var(--width);
    height: var(--height);
    border-radius: var(--border-radius);
    background:#dddddd;
    transition: background 0.2s;
}
.toggle__input:checked ~ .toggle__fill{
    background: #009576;
}
.toggle__fill::after{
    content:"";
    position: absolute;
    top:0;
    left:0;
    height: var(--height);
    width: var(--height);
    background: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    border-radius: var(--border-radius);
    transition: transform 0.2s;
} 
.toggle__input:checked ~ .toggle__fill::after{
    transform: translateX(var(--height));
}