/*==============================================================
TABLE OF CONTENTS:
================================================================
Generic
	- Box sizing
	- Normalize
Layouts
	- login
==============================================================*/

:root {
    --white-color: #ffffff;
    --white-bk: #ffffff;
    --primary-color-main: #212143;
    --primary-color-surface: #D3D3D9;
    --primary-color-border: #B5B5C0;
    --primary-color-hover: #464662;
    --primary-color-pressed: #07070D;
    --primary-color-focus: #21214333;
    --semantic-color-danger-main: #FD314D;
    --semantic-color-danger-surface: #FFD6DB;
    --semantic-color-danger-border: #FEBAC4;
    --semantic-color-danger-hover: #D32940;
    --semantic-color-danger-pressed: #7E1826;
    --semantic-color-danger-focus: #FD314D33;
    --semantic-color-warning-main: #F0B732;
    --semantic-color-warning-surface: #FCF1D6;
    --semantic-color-warning-border: #FAE7BB;
    --semantic-color-warning-hover: #C8982A;
    --semantic-color-warning-pressed: #785B19;
    --semantic-color-warning-focus: #F0B73233;
    --semantic-color-success-main: #0A7E22;
    --semantic-color-success-surface: #CEE5D3;
    --semantic-color-success-border: #ADD4B5;
    --semantic-color-success-hover: #08691C;
    --semantic-color-success-pressed: #053F11;
    --semantic-color-success-focus: #0A7E2233;
    --semantic-color-success2-main: #146ADC;
    --semantic-color-success2-surface: #D0E1F8;
    --semantic-color-success2-border: #B1CDF3;
    --semantic-color-success2-hover: #1158B7;
    --semantic-color-success2-pressed: #0A356E;
    --semantic-color-success2-focus: #146ADC33;
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 100;
    src: local("Poppins"), url(../DM_Sans/static/DMSans-Thin.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    font-style: italic;
    font-weight: 100;
    src: local("Poppins"), url(../DM_Sans/static/DMSans-ThinItalic.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 200;
    src: local("Poppins"), url(../DM_Sans/static/DMSans-ExtraLight.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    font-style: italic;
    font-weight: 200;
    src: local("Poppins"), url(../DM_Sans/static/DMSans-ExtraLightItalic.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 300;
    src: local("Poppins"), url(../DM_Sans/static/DMSans-Light.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    font-style: italic;
    font-weight: 300;
    src: local("Poppins"), url(../DM_Sans/static/DMSans-LightItalic.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400;
    src: local("Poppins"), url(../DM_Sans/static/DMSans-Regular.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    font-style: italic;
    font-weight: 400;
    src: local("Poppins"), url(../DM_Sans/static/DMSans-Italic.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 500;
    src: local("Poppins"), url(../DM_Sans/static/DMSans-Medium.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    font-style: italic;
    font-weight: 500;
    src: local("Poppins"), url(../DM_Sans/static/DMSans-MediumItalic.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 600;
    src: local("Poppins"), url(../DM_Sans/static/DMSans-SemiBold.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    font-style: italic;
    font-weight: 600;
    src: local("Poppins"), url(../DM_Sans/static/DMSans-SemiBoldItalic.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 700;
    src: local("Poppins"), url(../DM_Sans/static/DMSans-Bold.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    font-style: italic;
    font-weight: 700;
    src: local("Poppins"), url(../DM_Sans/static/DMSans-BoldItalic.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 800;
    src: local("Poppins"), url(../DM_Sans/static/DMSans-ExtraBold.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    font-style: italic;
    font-weight: 800;
    src: local("Poppins"), url(../DM_Sans/static/DMSans-ExtraBoldItalic.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 900;
    src: local("Poppins"), url(../DM_Sans/static/DMSans-Black.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    font-style: italic;
    font-weight: 900;
    src: local("Poppins"), url(../DM_Sans/static/DMSans-BlackItalic.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100;
    src: local("Inter"), url(../Inter/static/Inter-Thin.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 200;
    src: local("Inter"), url(../Inter/static/Inter-ExtraLight.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300;
    src: local("Inter"), url(../Inter/static/Inter-Light.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    src: local("Inter"), url(../Inter/static/Inter-Regular.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    src: local("Inter"), url(../Inter/static/Inter-Medium.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    src: local("Inter"), url(../Inter/static/Inter-SemiBold.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    src: local("Inter"), url(../Inter/static/Inter-Bold.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 800;
    src: local("Inter"), url(../Inter/static/Inter-ExtraBold.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 900;
    src: local("Inter"), url(../Inter/static/Inter-Black.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 100;
    src: local("Poppins"), url(../Poppins/Poppins-Thin.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 100;
    src: local("Poppins"), url(../Poppins/Poppins-ThinItalic.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 200;
    src: local("Poppins"), url(../Poppins/Poppins-ExtraLight.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 200;
    src: local("Poppins"), url(../Poppins/Poppins-ExtraLightItalic.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 300;
    src: local("Poppins"), url(../Poppins/Poppins-Light.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 300;
    src: local("Poppins"), url(../Poppins/Poppins-LightItalic.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    src: local("Poppins"), url(../Poppins/Poppins-Regular.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 400;
    src: local("Poppins"), url(../Poppins/Poppins-Italic.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    src: local("Poppins"), url(../Poppins/Poppins-Medium.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 500;
    src: local("Poppins"), url(../Poppins/Poppins-MediumItalic.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    src: local("Poppins"), url(../Poppins/Poppins-SemiBold.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 600;
    src: local("Poppins"), url(../Poppins/Poppins-SemiBoldItalic.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    src: local("Poppins"), url(../Poppins/Poppins-Bold.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 700;
    src: local("Poppins"), url(../Poppins/Poppins-ExtraBoldItalic.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 800;
    src: local("Poppins"), url(../Poppins/Poppins-ExtraBold.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 800;
    src: local("Poppins"), url(../Poppins/Poppins-ExtraBoldItalic.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 900;
    src: local("Poppins"), url(../Poppins/Poppins-Black.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 900;
    src: local("Poppins"), url(../Poppins/Poppins-BlackItalic.ttf) format("truetype");
    font-display: swap;
}

:root {
    --max-width-desktop: 1240px;
    --max-width-large: 992px;
    --max-width-tablet: 768px;
    --max-width-mobile: 576px;
}

:root {
    --font-default: "Poppins", sans-serif;
    --font__code: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
    --font__pre: "Courier 10 Pitch", courier, monospace;
    --line-height-body: 1.7;
}

input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
    color: #404040;
    font-size: 14px;
}

button.Zebra_DatePicker_Icon {
    background: url(../images/all/Icon.png) no-repeat !important;
}

body.onlyDashboard .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile aside,
body.onlyRoster .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile aside {
    height: 170vh;
}

.daterangepicker .ranges ul li:last-child {
    display: none;
}

/*==============================================================
Generic
==============================================================*/

/* >>>>>>>> Box Sizing >>>>>>>> */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http:
//css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */

*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

/* >>>>>>>> Global >>>>>>>> */

::-webkit-scrollbar {
    width: 5px;
    height:5px;
}

::-webkit-scrollbar-track {
    background: #dcdcdc;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background: #777;
    border-radius: 8px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

/* >>>>>>>> Normalize >>>>>>>> */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
    -webkit-text-size-adjust: 100%;
    line-height: 1.15;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
    margin: 0;
    font-family: var(--font-default);
}

/**
 * Render the `main` element consistently in IE.
 */

main {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
    background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    border-bottom: 0;
    text-decoration: underline;
    text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
    border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
    cursor: pointer;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button;
}

    /**
 * Remove the inner border and padding in Firefox.
 */

    button::-moz-focus-inner,
    [type=button]::-moz-focus-inner,
    [type=reset]::-moz-focus-inner,
    [type=submit]::-moz-focus-inner {
        border-style: none;
        padding: 0;
    }

    /**
 * Restore the focus styles unset by the previous rule.
 */

    button:-moz-focusring,
    [type=button]:-moz-focusring,
    [type=reset]:-moz-focusring,
    [type=submit]:-moz-focusring {
        outline: 1px dotted ButtonText;
    }

/**
 * Correct the padding in Firefox.
 */

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

    /**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

    [type=search]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
    display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
    display: none;
}

svg {
    cursor: pointer;
}

/*==============================================================
Layouts
==============================================================*/

/* >>>>>>>> activity clock report >>>>>>>> */

.main-dashboard.main-activiry-clock-report .mycontainer .myrow-one aside.desktop,
.main-dashboard.main-activiry-clock-report .mycontainer .myrow-one aside.mobile {
    height: 100vh;
}

.main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .box-title h1 {
    color: #404040;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 21px;
    /* 105% */

    letter-spacing: -0.12px;
    margin: 0;
}

.main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .box-info-employees {
    padding: 16px 32px;
    margin: 0 31px 11px 31px;
    background: #fff;
    border-radius: 8px;
}

.main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent {
    display: flex;
    flex-wrap: wrap;
    display: none;
}

    .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent.active {
        display: flex;
        overflow: auto;
    }

    .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .box-period {
        width: 100%;
        margin-bottom: 32px;
    }

        .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes label {
                display: block;
                color: #404040;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                letter-spacing: -0.072px;
                margin-bottom: 7px;
            }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes input {
                border-radius: 8px;
                border: 1px solid #C2C2C2;
                background: #FFF;
                padding: 12px 14px;
                color: #404040;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 21px;
                letter-spacing: -0.072px;
                width: 100%;
                position: relative;
                z-index: 2;
                background: transparent;
            }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes select {
                border-radius: 8px;
                border: 1px solid #c2c2c2;
                padding: 12px 14px;
                width: 100%;
                background: url(../images/employee/arrow-top-popup.png) no-repeat right #fff;
                -webkit-appearance: none;
                color: #404040;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 21px;
                letter-spacing: -0.072px;
                background-position-x: calc(100% - 14px);
            }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes .left {
                width: calc(33.33% - 11px);
            }

                .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes .left .period-range {
                    position: relative;
                }

                .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes .left svg {
                    position: absolute;
                    right: 14px;
                    bottom: 14px;
                    z-index: 1;
                }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes .center {
                width: calc(33.33% - 11px);
            }

                .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes .center .list-employee {
                    margin: 0;
                }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes .right {
                position: relative;
                width: calc(33.33% - 11px);
            }

                .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes .right input {
                    padding-left: 50px;
                }

                .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes .right ::-webkit-input-placeholder {
                    color: #9E9E9E;
                    font-family: Inter;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 24px;
                    letter-spacing: -0.176px;
                    position: relative;
                    top: 2px;
                }

                .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes .right :-ms-input-placeholder {
                    color: #9E9E9E;
                    font-family: Inter;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 24px;
                    letter-spacing: -0.176px;
                    position: relative;
                    top: 2px;
                }

                .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes .right ::placeholder {
                    color: #9E9E9E;
                    font-family: Inter;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 24px;
                    letter-spacing: -0.176px;
                    position: relative;
                    top: 2px;
                }

                .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes .right button {
                    margin: 0;
                    padding: 5px 10px;
                    border: none;
                    position: absolute;
                    z-index: 3;
                    left: 17px;
                    top: 40px;
                    background: transparent;
                }

    .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .k-grid tbody tr:hover,
    .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .k-grid tbody tr.k-state-hover {
        background: #F2F2F2;
    }

    .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report {
        border-color: transparent;
        height: unset !important;
    }

        .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .k-grid-header {
            padding: 0 !important;
        }

        .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .k-grid-content {
            overflow-y: visible;
            height: unset !important;
        }

        .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report table {
            border-collapse: collapse;
            width: 100%;
        }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report table td {
                padding: 0;
                vertical-align: top;
                border: none;
            }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report table thead tr {
                border: none;
            }

                .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report table thead tr th {
                    border: none;
                    background: #D9D9D9;
                    padding: 13px 14px;
                    color: #0A0A0A;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 18px;
                    text-align: left;
                }

                    .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report table thead tr th span {
                        margin: 0;
                    }

                    .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report table thead tr th[data-field=Employee],
                    .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report table thead tr th[data-field=Roster],
                    .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report table thead tr th[data-field=Employee2],
                    .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report table thead tr th[data-field=Management],
                    .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report table thead tr th[data-field=AdjustmentTime],
                    .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report table thead tr th[data-field=EditedBy] {
                        border-left: 1px solid #C2C2C2;
                    }

                    .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report table thead tr th:nth-child(1) {
                        padding-left: 17px;
                    }

                    .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report table thead tr th:last-child {
                        padding-right: 17px;
                    }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report table tbody td {
                vertical-align: middle;
            }

                .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report table tbody td span {
                    position: relative;
                    right: 5px;
                }

        .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .k-pager.k-grid-pager {
            display: none;
        }

        .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report tr:nth-child(even) {
            background: #F2F2F2;
        }

        .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report span:not(.k-icon) {
            display: block;
            color: #0A0A0A;
            font-family: Poppins;
            font-size: 10px;
            font-style: normal;
            font-weight: 500;
            line-height: 18px;
            padding: 0;
            margin: 0;
            margin-bottom: 3px;
        }

        .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report input {
            width: 41px;
            height: 18px;
            flex-shrink: 0;
            border-radius: 4px;
            border: 1px solid #c2c2c2;
            text-align: right;
            padding: 0;
            padding-right: 4px;
        }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report input[type=number]::-webkit-outer-spin-button,
            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report input[type=number]::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report input[type=number][type=number] {
                -moz-appearance: textfield;
            }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report input[type=number]:hover::-webkit-outer-spin-button,
            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report input[type=number]:hover::-webkit-inner-spin-button {
                background: none;
            }

        .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-employe {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 16px;
        }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-employe .box-text span {
                display: block;
                margin: 0;
                position: static;
            }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-employe span {
                color: #000;
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
            }

        .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-roster {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 16px;
        }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-roster span {
                color: #0A0A0A;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
            }

        .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-employe2 {
            display: flex;
            flex-direction: column;
            padding: 16px;
        }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-employe2 span {
                color: #0A0A0A;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: 18px;
            }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-employe2 .box-start {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-employe2 .box-end {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }

        .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-management {
            display: flex;
            flex-direction: column;
            padding: 16px;
        }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-management span {
                color: #0A0A0A;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
            }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-management .box-start {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }

                .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-management .box-start span:last-child {
                    font-weight: 500;
                }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-management .box-end {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }

                .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-management .box-end span:last-child {
                    font-weight: 500;
                }

        .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-adjustmentTime {
            display: flex;
            flex-direction: column;
            padding: 16px;
        }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-adjustmentTime span {
                color: #0A0A0A;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
            }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-adjustmentTime .box-start {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }

                .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-adjustmentTime .box-start span:last-child {
                    font-weight: 500;
                }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-adjustmentTime .box-end {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }

                .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-adjustmentTime .box-end span:last-child {
                    font-weight: 500;
                }

        .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-editedBy {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 16px;
        }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-editedBy span {
                color: #0A0A0A;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
            }

            .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent #kendo-activity-clock-report .box-data-editedBy .box-end span {
                font-weight: 500;
            }

@media only screen and (max-width: 992px) {
    .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes {
        gap: 12px;
    }

        .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes .left,
        .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes .center,
        .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes .right {
            width: 100% !important;
        }

    .main-dashboard.main-activiry-clock-report .mycontainer .myrow-one section.content .box-info-employees {
        padding: 12px;
        margin: 12px;
        margin-top: 0;
    }
}
/* >>>>>>>> dashboard >>>>>>>> */

.main-dashboard .mycontainer .myrow-one {
    display: flex;
    flex-wrap: wrap;
}

    .main-dashboard .mycontainer .myrow-one section.content {
        width: calc(100% - 250px);
        background: #F5F5F5;
    }

        .main-dashboard .mycontainer .myrow-one section.content .navigation-top {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            background: #fff;
            padding: 10px 32px;
        }

            .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-burger.mobile {
                display: none;
            }

            .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-burger.responsive {
                display: none;
            }

            .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
            }

                .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif {
                    margin-right: 36px;
                    position: relative;
                }

@keyframes heartbeat {
    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }

    25% {
        -webkit-transform: scale(0.1);
        opacity: 0.1;
    }

    50% {
        -webkit-transform: scale(0.5);
        opacity: 0.3;
    }

    75% {
        -webkit-transform: scale(0.8);
        opacity: 0.5;
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 0;
    }
}

.main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif span.notify {
    width: 5px;
    height: 5px;
    position: absolute;
    top: -1px;
    right: -6px;
    border-radius: 50%;
    background-color: #0089ed;
}

.main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif span.heartbeat {
    position: absolute;
    top: -11px;
    right: -16px;
    height: 25px;
    width: 25px;
    z-index: 10;
    border: 4px solid;
    border-color: #0089ed;
    border-radius: 70px;
    animation: heartbeat 1s ease-out;
    -moz-animation: heartbeat 1s ease-out;
    -moz-animation-iteration-count: infinite;
    -o-animation: heartbeat 1s ease-out;
    -o-animation-iteration-count: infinite;
    -webkit-animation: heartbeat 1s ease-out;
    -ms-animation: heartbeat 1s ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif > ul {
    display: none;
    margin-top: 33px;
    width: 325px;
    right: -19px;
    left: auto;
    position: absolute;
    top: 0;
    padding: 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 5px 15px 2px rgba(0, 0, 0, 0.3);
    z-index: 999;
}

    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif > ul::before {
        content: "";
        position: absolute;
        top: -7px;
        right: 19px;
        display: inline-block;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #eee;
        border-left: 7px solid transparent;
        border-bottom-color: rgba(122, 205, 215, 0.2);
    }

    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif > ul li {
        list-style-type: none;
    }

        .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif > ul li ul.menu {
            right: 0;
            padding: 0;
            margin: 0;
        }

            .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif > ul li ul.menu li {
                border-bottom: 1px solid #eee;
            }

                .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif > ul li ul.menu li a {
                    padding: 11px;
                    text-decoration: none;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                }

                    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif > ul li ul.menu li a span.image {
                        width: 44px;
                        height: 44px;
                        border-radius: 50%;
                        color: #fff;
                        text-align: center;
                        display: inline-block;
                        vertical-align: top;
                    }

                        .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif > ul li ul.menu li a span.image img {
                            border-radius: 50%;
                            border: 2px solid #fff;
                            box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.2);
                        }

                    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif > ul li ul.menu li a span.menu-info {
                        display: inline-block;
                        position: relative;
                        top: 3px;
                        left: 10px;
                        width: calc(100% - 45px);
                    }

                        .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif > ul li ul.menu li a span.menu-info span.menu-title {
                            margin: 0;
                            font-size: 14px;
                            color: #333;
                            float: left;
                            width: 100%;
                            line-height: 1;
                            font-weight: bold;
                            margin-bottom: 2px;
                        }

                        .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif > ul li ul.menu li a span.menu-info .menu-desc {
                            margin: 0;
                            font-size: 12px;
                            color: #888;
                            float: left;
                            width: 100%;
                            line-height: 20px;
                        }

                            .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif > ul li ul.menu li a span.menu-info .menu-desc svg {
                                fill: #888;
                                position: relative;
                                top: 1px;
                                width: 12px;
                                height: 12px;
                            }

        .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif > ul li.header {
            font-size: 14px;
            font-weight: 700;
            width: 100%;
            border-bottom: 1px solid #eee;
            text-align: center;
            padding: 5px;
            line-height: 3;
        }

        .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif > ul li.footer {
            width: 100%;
            height: 45px;
        }

            .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif > ul li.footer a {
                text-decoration: none;
                text-align: center;
                border-top: 1px solid #eee;
                font-size: 14px;
                color: #0089ed;
                font-weight: 500;
                display: block;
                padding: 5px;
                line-height: 2;
            }

.main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .account {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .account .email {
        color: #404040;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        /* 175% */

        letter-spacing: -0.072px;
        margin-right: 8px;
        cursor: pointer;
    }

    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .account .image {
        width: 21px;
        height: 21px;
        background: #D9D9D9;
        border-radius: 100%;
        cursor: pointer;
    }

.main-dashboard .mycontainer .myrow-one section.content .box-title {
    padding: 18px 31px;
    padding: 16px 32px;
    padding: 20px 32px 29px;
}

    .main-dashboard .mycontainer .myrow-one section.content .box-title h1 {
        color: #404040;
        font-family: Poppins;
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 21px;
        /* 105% */

        letter-spacing: -0.12px;
        margin: 0;
    }

.main-dashboard .mycontainer .myrow-one section.content .box-notif {
    padding: 8px 16px;
    padding: 16px 32px;
    border-radius: 8px;
    background: #fff;
    margin: 0 31px 11px 31px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

    .main-dashboard .mycontainer .myrow-one section.content .box-notif .left {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }

        .main-dashboard .mycontainer .myrow-one section.content .box-notif .left span.title {
            color: #0A0A0A;
            font-family: Poppins;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: 24px;
            /* 150% */

            letter-spacing: -0.176px;
        }

        .main-dashboard .mycontainer .myrow-one section.content .box-notif .left span.desc {
            color: #616161;
            font-family: Poppins;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            /* 150% */

            letter-spacing: -0.084px;
        }

            .main-dashboard .mycontainer .myrow-one section.content .box-notif .left span.desc span.mark {
                color: #0089ED;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 600;
                line-height: 21px;
                letter-spacing: -0.084px;
            }

    .main-dashboard .mycontainer .myrow-one section.content .box-notif .right button {
        padding: 6px 16px;
        color: #FFF;
        font-family: Inter;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 21px;
        /* 175% */

        letter-spacing: -0.072px;
        border-radius: 6px;
        background: #0089ED;
        border: none;
    }

.main-dashboard .mycontainer .myrow-one section.content .box-info {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin: 0 31px 11px 31px;
}

    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left {
        border-radius: 8px;
        background: #fff;
        padding: 10px 32px 16px 32px;
        padding: 16px 32px;
        width: 280px;
        width: 300px;
    }

        .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .month {
            display: inline-flex;
            height: 32px;
            padding: 8px;
            align-items: center;
            gap: 8px;
            border-radius: 8px;
            border: 1px solid #E0E0E0;
            background: #fff;
            margin-bottom: 14px;
            cursor: pointer;
        }

            .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .month span {
                color: #616161;
                text-align: center;
                /* Text S/Regular */

                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
                /* 150% */
            }

        .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .title span {
            color: #404040;
            font-family: Poppins;
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 24px;
            letter-spacing: -0.176px;
            display: block;
            margin-bottom: 8px;
        }

        .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .total span {
            color: #0089ED;
            /* Heading/M */

            font-family: Inter;
            font-size: 28px;
            font-style: normal;
            font-weight: 500;
            line-height: 36px;
            /* 128.571% */

            letter-spacing: -0.588px;
            display: block;
            margin-bottom: 8px;
        }

        .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

            .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time span {
                color: #9E9E9E;
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
            }

            .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .full-time > span {
                margin-right: 8px;
            }

            .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .full-time span.mark {
                color: #0089ED;
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
                margin-right: 10px;
            }

            .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .permanent > span {
                margin-right: 8px;
            }

            .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .permanent span.mark {
                color: #F0B732;
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
                margin-right: 10px;
            }

            .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .casual > span {
                margin-right: 8px;
            }

            .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .casual span.mark {
                color: #1A8E18;
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
                margin-right: 0;
            }

            .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress {
                margin-top: 14px;
                margin-bottom: 15px;
                display: flex;
                flex-wrap: wrap;
                width: 100%;
            }

                .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-full-time {
                    background: #0089ED;
                    height: 8px;
                    border-radius: 8px 0 0 8px;
                }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-full-time.one {
                        flex-grow: 1;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-full-time.two {
                        flex-grow: 2;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-full-time.three {
                        flex-grow: 3;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-full-time.four {
                        flex-grow: 4;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-full-time.five {
                        flex-grow: 5;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-full-time.six {
                        flex-grow: 6;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-full-time.seven {
                        flex-grow: 7;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-full-time.eight {
                        flex-grow: 8;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-full-time.nine {
                        flex-grow: 9;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-full-time.ten {
                        flex-grow: 10;
                    }

                .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-permanent {
                    background: #F0B732;
                    height: 8px;
                }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-permanent.one {
                        flex-grow: 1;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-permanent.two {
                        flex-grow: 2;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-permanent.three {
                        flex-grow: 3;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-permanent.four {
                        flex-grow: 4;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-permanent.five {
                        flex-grow: 5;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-permanent.six {
                        flex-grow: 6;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-permanent.seven {
                        flex-grow: 7;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-permanent.eight {
                        flex-grow: 8;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-permanent.nine {
                        flex-grow: 9;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-permanent.ten {
                        flex-grow: 10;
                    }

                .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-casual {
                    background: #1A8E18;
                    height: 8px;
                    border-radius: 8px;
                    border-radius: 0 8px 8px 0;
                }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-casual.one {
                        flex-grow: 1;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-casual.two {
                        flex-grow: 2;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-casual.three {
                        flex-grow: 3;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-casual.four {
                        flex-grow: 4;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-casual.five {
                        flex-grow: 5;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-casual.six {
                        flex-grow: 6;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-casual.seven {
                        flex-grow: 7;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-casual.eight {
                        flex-grow: 8;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-casual.nine {
                        flex-grow: 9;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .time .progress .progress-casual.ten {
                        flex-grow: 10;
                    }

        .main-dashboard .mycontainer .myrow-one section.content .box-info > .left .view-details button {
            color: #0089ED;
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.072px;
            display: flex;
            padding: 2px 12px;
            align-items: center;
            gap: 4px;
            border-radius: 6px;
            border: 1px solid #0089ED;
        }

    .main-dashboard .mycontainer .myrow-one section.content .box-info > .right {
        padding: 16px 32px;
        background: #fff;
        border-radius: 8px;
        width: calc(100% - 312px);
        display: flex;
        flex-wrap: wrap;
    }

        .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box1 .title {
            width: 100%;
        }

            .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box1 .title h2 {
                color: #0A0A0A;
                font-family: Poppins;
                font-size: 16px;
                font-style: normal;
                font-weight: 700;
                line-height: 24px;
                letter-spacing: -0.176px;
                margin-top: 0;
                margin-bottom: 15.5px;
            }

        .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 {
            width: 100%;
            display: flex;
        }

            .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .border-left,
            .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .border-right {
                margin: 0 26px;
            }

                .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .border-left .border,
                .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .border-right .border {
                    width: 2px;
                    height: 89px;
                    background: #E0E0E0;
                }

            .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-1 h3,
            .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-2 h3,
            .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-3 h3 {
                color: #404040;
                font-family: Poppins;
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: 24px;
                letter-spacing: -0.176px;
                margin: 0;
                margin-bottom: 8px;
            }

            .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-1 span.total,
            .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-2 span.total,
            .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-3 span.total {
                color: #0089ED;
                font-family: Inter;
                font-size: 28px;
                font-style: normal;
                font-weight: 500;
                line-height: 36px;
                letter-spacing: -0.588px;
                margin-bottom: 8px;
                display: block;
            }

            .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-1 .box,
            .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-2 .box,
            .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-3 .box {
                display: flex;
                flex-wrap: wrap;
                margin-bottom: 37px;
            }

                .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-1 .box .left,
                .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-2 .box .left,
                .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-3 .box .left {
                    display: flex;
                    flex-wrap: wrap;
                    margin-right: 24px;
                }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-1 .box .left span.text,
                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-2 .box .left span.text,
                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-3 .box .left span.text {
                        color: #9E9E9E;
                        font-family: Inter;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 18px;
                        margin-right: 8px;
                        display: block;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-1 .box .left span.mark,
                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-2 .box .left span.mark,
                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-3 .box .left span.mark {
                        font-family: Inter;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 18px;
                    }

                        .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-1 .box .left span.mark.green,
                        .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-2 .box .left span.mark.green,
                        .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-3 .box .left span.mark.green {
                            color: #009716;
                        }

                .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-1 .box .right,
                .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-2 .box .right,
                .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-3 .box .right {
                    display: flex;
                    flex-wrap: wrap;
                }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-1 .box .right span.text,
                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-2 .box .right span.text,
                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-3 .box .right span.text {
                        color: #9E9E9E;
                        font-family: Inter;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 18px;
                        margin-right: 8px;
                        display: block;
                    }

                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-1 .box .right span.mark,
                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-2 .box .right span.mark,
                    .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-3 .box .right span.mark {
                        font-family: Inter;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 18px;
                    }

                        .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-1 .box .right span.mark.red,
                        .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-2 .box .right span.mark.red,
                        .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-3 .box .right span.mark.red {
                            color: #D32940;
                        }

            .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-1 .view-details button,
            .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-2 .view-details button,
            .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-3 .view-details button {
                color: #0089ed;
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                letter-spacing: -0.072px;
                display: flex;
                padding: 2px 12px;
                align-items: center;
                gap: 4px;
                border-radius: 6px;
                border: 1px solid #0089ed;
            }

.main-dashboard .mycontainer .myrow-one section.content .box-chart {
    margin: 0 35px 22px 30px;
    margin: 0 31px 11px 31px;
    background: #fff;
    border-radius: 8px;
    padding: 13px 32px;
    padding: 16px 32px;
    padding-bottom: 24px;
}

    .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-date .box-filter {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

        .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-date .box-filter .title h3 {
            color: #404040;
            font-family: Poppins;
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 24px;
            letter-spacing: -0.176px;
            margin: 0;
        }

        .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-date .box-filter .filter {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

            .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-date .box-filter .filter .period {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
            }

                .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-date .box-filter .filter .period span.text-period {
                    display: block;
                    margin-right: 9px;
                    color: #404040;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 24px;
                    letter-spacing: -0.132px;
                }

            .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-date .box-filter .filter .week {
                display: flex;
                height: 33px;
                padding: 8px;
                align-items: center;
                flex-shrink: 0;
                border-radius: 8px;
                border: 1px solid #e0e0e0;
                background: #fff;
                margin-right: 17px;
                cursor: pointer;
            }

                .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-date .box-filter .filter .week span {
                    color: #616161;
                    text-align: center;
                    font-family: Inter;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 18px;
                    display: block;
                    margin-right: 8px;
                }

            .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-date .box-filter .filter .range {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                border-radius: 8px;
                border: 1px solid #e0e0e0;
                background: #fff;
                cursor: pointer;
                position: relative;
            }

                .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-date .box-filter .filter .range svg {
                    margin-right: 4px;
                    position: absolute;
                    left: 16px;
                }

                .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-date .box-filter .filter .range span {
                    padding: 6px 16px;
                    padding-left: 36px;
                    color: #404040;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                    display: block;
                    position: relative;
                    z-index: 3;
                }

    .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-cost {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 17px;
        margin-bottom: 26px;
    }

        .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-cost span.title {
            color: #404040;
            font-family: Poppins;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
            letter-spacing: -0.154px;
            display: block;
            margin-right: 11px;
        }

        .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-cost span.const {
            color: #0A7E22;
            font-family: Poppins;
            font-size: 28px;
            font-style: normal;
            font-weight: 500;
            line-height: 24px;
            letter-spacing: -0.308px;
            display: block;
        }

    .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-color {
        margin-top: 37px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

        .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-color .box-color {
            display: flex;
            flex-wrap: wrap;
        }

            .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-color .box-color > div {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
            }

            .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-color .box-color div .border {
                width: 15px;
                height: 15px;
                background: #000;
                border-radius: 100%;
                margin-right: 3px;
            }

            .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-color .box-color div .text {
                display: block;
                margin-right: 20px;
                color: #6C6C6C;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
                /* 200% */

                letter-spacing: -0.132px;
            }

            .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-color .box-color div.weekday .border {
                background: #0089ED;
            }

            .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-color .box-color div.saturday .border {
                background: #F0B732;
            }

            .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-color .box-color div.sunday .border {
                background: #FE85D2;
            }

            .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-color .box-color div.public-holiday .border {
                background: #1A8E18;
            }

        .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-color .box-button button {
            border: none;
            display: flex;
            padding: 2px 12px;
            align-items: center;
            gap: 4px;
            border-radius: 6px;
            background: #0089ED;
            color: #FFF;
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            /* 175% */

            letter-spacing: -0.072px;
        }

section.box-form-branch {
    position: relative;
    background: #fff;
    width: 1024px;
    height: 780px;
    transition: 1s all;
    margin: 0 auto;
}

    section.box-form-branch .add-new-branch header {
        position: relative;
        overflow: hidden;
    }

        section.box-form-branch .add-new-branch header .border {
            border-radius: 100%;
            background: #d0e1f8;
            width: 118%;
            height: 1030px;
            position: absolute;
            top: -786px;
            left: -9%;
            overflow: hidden;
        }

        section.box-form-branch .add-new-branch header .image {
            position: relative;
            z-index: 1;
            top: 70px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

            section.box-form-branch .add-new-branch header .image img {
                position: relative;
                bottom: 35px;
                left: 2px;
            }

        section.box-form-branch .add-new-branch header h1 {
            margin: 0;
            margin-top: 93px;
            color: #0A0A0A;
            font-family: Poppins;
            font-size: 28px;
            font-style: normal;
            font-weight: 500;
            line-height: 36px;
            letter-spacing: -0.588px;
            text-align: center;
        }

    section.box-form-branch .add-new-branch main.content ul.proses {
        margin: 0;
        margin-top: 42px;
        margin-bottom: 59px;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

        section.box-form-branch .add-new-branch main.content ul.proses li {
            list-style-type: none;
            border-radius: 100%;
            width: 34px;
            height: 34px;
            color: #404040;
            font-family: DM Sans;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 23px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            background: #EFF0F6;
        }

            section.box-form-branch .add-new-branch main.content ul.proses li.active {
                color: #fff;
                background: #0089ED;
            }

            section.box-form-branch .add-new-branch main.content ul.proses li.border {
                width: 98.091px;
                height: 6px;
                margin: 0 18px;
                flex-shrink: 0;
                border-radius: 40px;
                background: #EFF0F6;
            }

    section.box-form-branch .add-new-branch main.content form {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: flex-start;
        position: relative;
        margin: 0 auto;
        width: 451px;
    }

        section.box-form-branch .add-new-branch main.content form label {
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.072px;
            display: block;
            margin-bottom: 7px;
        }

        section.box-form-branch .add-new-branch main.content form input {
            height: 44px;
            flex-shrink: 0;
            border-radius: 8px;
            border: 1px solid #C2C2C2;
            background: #FFF;
            padding: 11px 18px;
        }

        section.box-form-branch .add-new-branch main.content form ::placeholder {
            color: #A3A3A3;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
        }

        section.box-form-branch .add-new-branch main.content form :-ms-input-placeholder {
            color: #A3A3A3;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
        }

        section.box-form-branch .add-new-branch main.content form ::-ms-input-placeholder {
            color: #A3A3A3;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
        }

    section.box-form-branch .add-new-branch main.content button.next {
        border: none;
        display: flex;
        width: 109px;
        padding: 6px 16px;
        justify-content: center;
        align-items: center;
        gap: 4px;
        border-radius: 6px;
        background: #0089ed;
        color: #fff;
        text-align: center;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 21px;
        letter-spacing: -0.084px;
        position: absolute;
        bottom: 34px;
        right: 24px;
    }

    section.box-form-branch .import-employee {
        display: none;
    }

        section.box-form-branch .import-employee main.content {
            padding-top: 23px;
            margin-left: 27px;
            margin-right: 27px;
        }

            section.box-form-branch .import-employee main.content h1 {
                margin: 0;
                margin-bottom: 46px;
                text-align: center;
                color: #0A0A0A;
                font-family: Poppins;
                font-size: 28px;
                font-style: normal;
                font-weight: 500;
                line-height: 36px;
                letter-spacing: -0.588px;
            }

            section.box-form-branch .import-employee main.content ul.proses {
                margin: 0;
                margin-bottom: 46px;
                padding: 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }

                section.box-form-branch .import-employee main.content ul.proses li {
                    list-style-type: none;
                    border-radius: 100%;
                    width: 34px;
                    height: 34px;
                    color: #404040;
                    font-family: DM Sans;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 23px;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    justify-content: center;
                    background: #EFF0F6;
                }

                    section.box-form-branch .import-employee main.content ul.proses li.active {
                        color: #fff;
                        background: #0089ED;
                    }

                    section.box-form-branch .import-employee main.content ul.proses li.border {
                        width: 98.091px;
                        height: 6px;
                        margin: 0 18px;
                        flex-shrink: 0;
                        border-radius: 40px;
                        background: #EFF0F6;
                    }

            section.box-form-branch .import-employee main.content .title {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-bottom: 25px;
            }

                section.box-form-branch .import-employee main.content .title h2 {
                    margin: 0;
                    color: #404040;
                    font-family: Poppins;
                    font-size: 20px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 21px;
                    letter-spacing: -0.12px;
                }

                section.box-form-branch .import-employee main.content .title button {
                    border: none;
                    display: inline-flex;
                    padding: 6px 16px;
                    align-items: center;
                    gap: 4px;
                    border-radius: 6px;
                    border: 1px solid #0089ED;
                    background: #D0E1F8;
                    color: #0089ED;
                    font-family: Poppins;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 21px;
                    letter-spacing: -0.084px;
                }

            section.box-form-branch .import-employee main.content .list-employee-import .myrow {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-bottom: 19px;
            }

                section.box-form-branch .import-employee main.content .list-employee-import .myrow .left {
                    display: flex;
                    flex-wrap: wrap;
                    border-radius: 8px;
                    border: 1px solid #D2D2D2;
                    background: #FFF;
                    padding: 13px 19px;
                }

                    section.box-form-branch .import-employee main.content .list-employee-import .myrow .left .box-data {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        gap: 9px;
                    }

                        section.box-form-branch .import-employee main.content .list-employee-import .myrow .left .box-data .image {
                            display: flex;
                            flex-wrap: wrap;
                            align-items: center;
                        }

                        section.box-form-branch .import-employee main.content .list-employee-import .myrow .left .box-data .info span.status {
                            display: block;
                            margin-bottom: 5px;
                            color: #0089ED;
                            font-family: Poppins;
                            font-size: 10px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 18px;
                        }

                        section.box-form-branch .import-employee main.content .list-employee-import .myrow .left .box-data .info .boxes {
                            display: flex;
                            flex-wrap: wrap;
                            gap: 77px;
                        }

                            section.box-form-branch .import-employee main.content .list-employee-import .myrow .left .box-data .info .boxes .box1 {
                                display: flex;
                                flex-wrap: wrap;
                                align-items: center;
                                gap: 7px;
                            }

                                section.box-form-branch .import-employee main.content .list-employee-import .myrow .left .box-data .info .boxes .box1 span.name {
                                    color: #404040;
                                    font-family: Poppins;
                                    font-size: 12px;
                                    font-style: normal;
                                    font-weight: 400;
                                    line-height: 18px;
                                }

                            section.box-form-branch .import-employee main.content .list-employee-import .myrow .left .box-data .info .boxes .box2 {
                                display: flex;
                                flex-wrap: wrap;
                                align-items: center;
                                gap: 6px;
                            }

                                section.box-form-branch .import-employee main.content .list-employee-import .myrow .left .box-data .info .boxes .box2 span.email {
                                    color: #404040;
                                    font-family: Inter;
                                    font-size: 12px;
                                    font-style: normal;
                                    font-weight: 400;
                                    line-height: 18px;
                                }

                section.box-form-branch .import-employee main.content .list-employee-import .myrow .center {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                }

                    section.box-form-branch .import-employee main.content .list-employee-import .myrow .center button {
                        padding: 7px 15px;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        justify-content: space-between;
                        gap: 6px;
                        height: 33px;
                        flex-shrink: 0;
                        border-radius: 16.5px;
                        border: 1px solid #0089ed;
                        color: #0089ed;
                        font-family: Poppins;
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 130%;
                        letter-spacing: -0.14px;
                    }

                section.box-form-branch .import-employee main.content .list-employee-import .myrow .right {
                    display: flex;
                    flex-wrap: wrap;
                    border-radius: 8px;
                    border: 1px solid #D2D2D2;
                    background: #FFF;
                    padding: 13px 19px;
                }

                    section.box-form-branch .import-employee main.content .list-employee-import .myrow .right .box-data {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        gap: 9px;
                    }

                        section.box-form-branch .import-employee main.content .list-employee-import .myrow .right .box-data .image {
                            display: flex;
                            flex-wrap: wrap;
                            align-items: center;
                        }

                        section.box-form-branch .import-employee main.content .list-employee-import .myrow .right .box-data .info span.status {
                            display: block;
                            margin-bottom: 5px;
                            color: #0089ED;
                            font-family: Poppins;
                            font-size: 10px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 18px;
                        }

                        section.box-form-branch .import-employee main.content .list-employee-import .myrow .right .box-data .info .boxes {
                            display: flex;
                            flex-wrap: wrap;
                            gap: 77px;
                        }

                            section.box-form-branch .import-employee main.content .list-employee-import .myrow .right .box-data .info .boxes .box1 {
                                display: flex;
                                flex-wrap: wrap;
                                align-items: center;
                                gap: 7px;
                            }

                                section.box-form-branch .import-employee main.content .list-employee-import .myrow .right .box-data .info .boxes .box1 span.name {
                                    color: #404040;
                                    font-family: Poppins;
                                    font-size: 12px;
                                    font-style: normal;
                                    font-weight: 400;
                                    line-height: 18px;
                                }

                            section.box-form-branch .import-employee main.content .list-employee-import .myrow .right .box-data .info .boxes .box2 {
                                display: flex;
                                flex-wrap: wrap;
                                align-items: center;
                                gap: 6px;
                            }

                                section.box-form-branch .import-employee main.content .list-employee-import .myrow .right .box-data .info .boxes .box2 span.email {
                                    color: #404040;
                                    font-family: Inter;
                                    font-size: 12px;
                                    font-style: normal;
                                    font-weight: 400;
                                    line-height: 18px;
                                }

            section.box-form-branch .import-employee main.content .list-employee-import button.save {
                border: none;
                display: flex;
                width: 109px;
                padding: 6px 16px;
                justify-content: center;
                align-items: center;
                gap: 4px;
                border-radius: 6px;
                background: #0089ED;
                color: #FFF;
                text-align: center;
                font-family: Inter;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                letter-spacing: -0.084px;
                position: absolute;
                bottom: 34px;
                right: 24px;
            }

    section.box-form-branch .finish {
        display: none;
    }

        section.box-form-branch .finish header {
            position: relative;
            overflow: hidden;
            height: 340px;
        }

            section.box-form-branch .finish header .border {
                border-radius: 100%;
                background: #d0e1f8;
                width: 118%;
                height: 1055px;
                position: absolute;
                top: -717px;
                left: -9%;
                overflow: hidden;
            }

        section.box-form-branch .finish main.content h1 {
            margin: 0;
            margin-bottom: 44px;
            text-align: center;
            color: #404040;
            font-family: Poppins;
            font-size: 28px;
            font-style: normal;
            font-weight: 500;
            line-height: 36px;
            letter-spacing: -0.588px;
            position: absolute;
            top: 30px;
            left: 50%;
            transform: translate(-50%, 0);
        }

        section.box-form-branch .finish main.content ul.proses {
            margin: 0;
            margin-top: 42px;
            margin-bottom: 59px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 69px;
            left: 50%;
            transform: translate(-50%, 0);
        }

            section.box-form-branch .finish main.content ul.proses li {
                list-style-type: none;
                border-radius: 100%;
                width: 34px;
                height: 34px;
                color: #404040;
                font-family: DM Sans;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 23px;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                background: #EFF0F6;
            }

                section.box-form-branch .finish main.content ul.proses li.active {
                    color: #fff;
                    background: #0089ED;
                }

                section.box-form-branch .finish main.content ul.proses li.border {
                    width: 98.091px;
                    height: 6px;
                    margin: 0 18px;
                    flex-shrink: 0;
                    border-radius: 40px;
                    background: #EFF0F6;
                }

        section.box-form-branch .finish main.content .image-bottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            position: relative;
            bottom: 162px;
        }

        section.box-form-branch .finish main.content .title {
            position: relative;
            bottom: 202px;
            bottom: 183px;
            bottom: 165px;
        }

            section.box-form-branch .finish main.content .title h2 {
                text-align: center;
                margin: 0;
                margin-bottom: 111px;
                color: #0089ed;
                font-family: Poppins;
                font-size: 28px;
                font-style: normal;
                font-weight: 700;
                line-height: 36px;
                letter-spacing: -0.588px;
                position: absolute;
                top: 22px;
                left: 50%;
                transform: translate(-50%, 0);
            }

            section.box-form-branch .finish main.content .title button {
                position: absolute;
                top: 30px;
                top: 141px;
                left: 50%;
                transform: translate(-50%, 0);
                border: none;
                display: flex;
                width: 424px;
                padding: 6px 16px;
                justify-content: center;
                align-items: center;
                gap: 4px;
                border-radius: 6px;
                background: #0089ED;
                color: #FFF;
                text-align: center;
                font-family: Inter;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                letter-spacing: -0.084px;
            }

@media only screen and (max-width: 1100px) {
    section.box-form-branch {
        width: 95%;
    }

        section.box-form-branch .import-employee main.content {
            overflow: auto;
        }

            section.box-form-branch .import-employee main.content .list-employee-import {
                width: 970px;
                padding-right: 1px;
            }
}

@media only screen and (max-width: 768px) {
    section.box-form-branch .add-new-branch header .border {
        width: 140%;
        left: -20%;
        top: -800px;
    }

    section.box-form-branch .finish header .border {
        width: 140%;
        left: -20%;
        top: -800px;
    }
}

@media only screen and (max-width: 580px) {
    section.box-form-branch {
        height: 740px;
    }

        section.box-form-branch .add-new-branch header h1 {
            padding: 0 24px;
        }

        section.box-form-branch .add-new-branch main.content form {
            width: 100%;
            padding: 0 24px;
        }

        section.box-form-branch .add-new-branch main.content ul.proses li.border {
            width: 40px;
            margin: 0 12px;
        }

        section.box-form-branch .add-new-branch main.content form label,
        section.box-form-branch .add-new-branch main.content form input {
            width: 100%;
        }

        section.box-form-branch .import-employee main.content ul.proses li.border {
            width: 40px;
            margin: 0 12px;
        }

        section.box-form-branch .import-employee main.content .title {
            flex-direction: column;
            gap: 15px;
        }

            section.box-form-branch .import-employee main.content .title button {
                width: 174px;
            }

        section.box-form-branch .import-employee main.content .list-employee-import .myrow .left .box-data .info .boxes,
        section.box-form-branch .import-employee main.content .list-employee-import .myrow .right .box-data .info .boxes {
            gap: 30px;
        }

        section.box-form-branch .finish main.content ul.proses li.border {
            width: 40px;
            margin: 0 12px;
        }

        section.box-form-branch .finish main.content h1,
        section.box-form-branch .finish main.content .title h2 {
            width: 100%;
        }

        section.box-form-branch .finish main.content .title button {
            top: 100px;
            width: 50%;
        }
}

@media only screen and (max-width: 1400px) {
    .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .border-left,
    .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .border-right {
        margin: 0 15px;
    }
}

@media only screen and (max-width: 1350px) {
    .main-dashboard .mycontainer .myrow-one section.content .box-notif,
    .main-dashboard .mycontainer .myrow-one section.content .box-info > .left,
    .main-dashboard .mycontainer .myrow-one section.content .box-info > .right,
    .main-dashboard .mycontainer .myrow-one section.content .box-chart {
        padding: 15px;
    }

    .main-dashboard .mycontainer .myrow-one section.content .box-info {
        flex-direction: column;
    }

        .main-dashboard .mycontainer .myrow-one section.content .box-info > .left,
        .main-dashboard .mycontainer .myrow-one section.content .box-info > .right {
            width: 100%;
        }
}

@media only screen and (max-width: 1024px) {
    .main-dashboard .mycontainer .myrow-one section.content {
        width: calc(100% - 65px);
    }
}

@media only screen and (max-width: 998px) {
    .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .border-left,
    .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .border-right {
        display: none;
    }

    .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 {
        flex-wrap: wrap;
    }

        .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-1,
        .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-2,
        .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-3 {
            width: 100%;
            border-bottom: 2px solid #f5f5f5;
            padding: 12px 0;
        }

        .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box2 .col-3 {
            border: none;
        }
}

@media only screen and (max-width: 768px) {
    .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile {
        position: relative;
        z-index: 999;
    }

    .main-dashboard .mycontainer .myrow-one section.content .navigation-top,
    .main-dashboard .mycontainer .myrow-one section.content .box-title {
        padding: 12px;
    }

    .main-dashboard .mycontainer .myrow-one section.content .box-notif,
    .main-dashboard .mycontainer .myrow-one section.content .box-info,
    .main-dashboard .mycontainer .myrow-one section.content .box-chart {
        margin-left: 12px;
        margin-right: 12px;
    }

        .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-date .box-filter {
            flex-direction: column;
        }

            .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-date .box-filter .title {
                margin-bottom: 12px;
            }

            .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-date .box-filter .filter > div {
                margin-bottom: 12px;
            }

        .main-dashboard .mycontainer .myrow-one section.content .box-chart .box-info-color .box-button {
            margin-top: 12px;
        }

        .main-dashboard .mycontainer .myrow-one section.content .box-info > .right .box1 .title h2 {
            margin-bottom: 0;
        }

    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif > ul {
        right: -100px;
        top: 5px;
    }

        .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif > ul::before {
            right: 100px;
        }
}

@media only screen and (max-width: 580px) {
    .main-dashboard .mycontainer .myrow-one section.content .box-notif {
        gap: 10px;
    }

    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-burger.desktop,
    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-burger.mobile,
    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-burger.responsive {
        display: none;
    }

    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif > ul {
        right: -191px;
    }

        .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif > ul::before {
            right: 191px;
        }
}
/* >>>>>>>> employee >>>>>>>> */

.main-dashboard.main-employee .mycontainer .myrow-one aside.desktop,
.main-dashboard.main-employee .mycontainer .myrow-one aside.mobile {
    height: 100vh;
}

.main-dashboard.main-employee .mycontainer .myrow-one section.content .box-title h1 {
    color: #404040;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 21px;
    /* 105% */

    letter-spacing: -0.12px;
    margin: 0;
}

.main-dashboard.main-employee .mycontainer .myrow-one section.content .box-info-employees {
    padding: 16px 32px;
    margin: 0 31px 11px 31px;
    background: #fff;
    border-radius: 8px;
}

    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-info-employees .box-action {
        margin-bottom: 24px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-info-employees .box-action .left {
            display: flex;
            flex-wrap: wrap;
        }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-info-employees .box-action .left form {
                position: relative;
            }

                .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-info-employees .box-action .left form ::-webkit-input-placeholder {
                    color: #9E9E9E;
                    font-family: Inter;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 24px;
                    letter-spacing: -0.176px;
                    padding-left: 32px;
                }

                .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-info-employees .box-action .left form :-ms-input-placeholder {
                    color: #9E9E9E;
                    font-family: Inter;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 24px;
                    letter-spacing: -0.176px;
                    padding-left: 32px;
                }

                .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-info-employees .box-action .left form ::placeholder {
                    color: #9E9E9E;
                    font-family: Inter;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 24px;
                    letter-spacing: -0.176px;
                    padding-left: 32px;
                }

                .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-info-employees .box-action .left form input {
                    display: flex;
                    width: 322px;
                    height: 44px;
                    padding: 8px;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    border-radius: 8px;
                    border: 1px solid #c2c2c2;
                    background: #fff;
                    margin-right: 8px;
                }

                .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-info-employees .box-action .left form button {
                    position: absolute;
                    top: 0;
                    height: 44px;
                    left: 16px;
                    padding: 0;
                    margin: 0;
                    border: none;
                    background: transparent;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-info-employees .box-action .right a {
            display: flex;
            padding: 6px 16px;
            align-items: center;
            gap: 4px;
            border-radius: 6px;
            background: #0089ED;
            border: none;
            color: #ffffff;
            font-family: Poppins;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.084px;
            text-decoration: none;
            width: 154px;
        }

.main-dashboard.main-employee .mycontainer .myrow-one section.content .box-total {
    margin-bottom: 24px;
}

    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-total h2 {
        margin: 0;
        color: #0a0a0a;
        font-family: Poppins;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px;
        letter-spacing: -0.176px;
    }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-total h2 .mark {
            color: #0089ED;
            font-family: Poppins;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: 24px;
            letter-spacing: -0.176px;
        }

.main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time {
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 532px;
}

    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time > div {
        margin-right: 31px;
    }

    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .full-time span {
        color: #404040;
        font-family: Poppins;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 18px;
        /* 128.571% */
    }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .full-time span.mark {
            color: #0089ED;
            font-family: Poppins;
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 18px;
        }

    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .permanent span {
        color: #404040;
        font-family: Poppins;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 18px;
        /* 128.571% */
    }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .permanent span.mark {
            color: #F4C965;
            font-family: Poppins;
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 18px;
        }

    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .casual span {
        color: #404040;
        font-family: Poppins;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 18px;
        /* 128.571% */
    }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .casual span.mark {
            color: #009716;
            font-family: Poppins;
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 18px;
        }

    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-full-time {
            background: #0089ed;
            height: 9px;
            border-radius: 8px 0 0 8px;
        }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-full-time.one {
                flex-grow: 1;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-full-time.two {
                flex-grow: 2;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-full-time.three {
                flex-grow: 3;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-full-time.four {
                flex-grow: 4;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-full-time.five {
                flex-grow: 5;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-full-time.six {
                flex-grow: 6;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-full-time.seven {
                flex-grow: 7;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-full-time.eight {
                flex-grow: 8;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-full-time.nine {
                flex-grow: 9;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-full-time.ten {
                flex-grow: 10;
            }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-permanent {
            background: #f0b732;
            height: 9px;
        }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-permanent.one {
                flex-grow: 1;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-permanent.two {
                flex-grow: 2;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-permanent.three {
                flex-grow: 3;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-permanent.four {
                flex-grow: 4;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-permanent.five {
                flex-grow: 5;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-permanent.six {
                flex-grow: 6;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-permanent.seven {
                flex-grow: 7;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-permanent.eight {
                flex-grow: 8;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-permanent.nine {
                flex-grow: 9;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-permanent.ten {
                flex-grow: 10;
            }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-casual {
            background: #1a8e18;
            height: 9px;
            border-radius: 8px;
            border-radius: 0 8px 8px 0;
        }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-casual.one {
                flex-grow: 1;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-casual.two {
                flex-grow: 2;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-casual.three {
                flex-grow: 3;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-casual.four {
                flex-grow: 4;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-casual.five {
                flex-grow: 5;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-casual.six {
                flex-grow: 6;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-casual.seven {
                flex-grow: 7;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-casual.eight {
                flex-grow: 8;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-casual.nine {
                flex-grow: 9;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time .progress .progress-casual.ten {
                flex-grow: 10;
            }

.main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table {
    overflow-y: auto;
}

    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table table {
        border-spacing: 0;
        width: 100%;
        overflow: hidden;
    }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table table tr:nth-child(odd) {
            background: #F2F2F2;
        }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table table tr.header th {
            padding: 12px;
            gap: 8px;
            flex: 1 0 0;
            background: #D9D9D9;
            color: #0a0a0a;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 18px;
            border-left: 1px solid #e0e0e0;
        }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table table tr.header th:first-child {
                border-left: none;
            }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table table td.user {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            padding: 12px;
            min-width: 200px;
            color: #000;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
            /* 150% */
        }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table table td.status {
            padding: 12px;
        }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table table td.status span {
                display: flex;
                padding: 8px 16px;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 10px;
                border-radius: 18px;
                color: #404040;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: 18px;
                /* 150% */
            }

                .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table table td.status span.casual {
                    background: #CEE5D3;
                }

                .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table table td.status span.permanent {
                    background: #FCF1D6;
                }

                .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table table td.status span.full-time {
                    background: #D0E1F8;
                }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table table td.job {
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
        }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table table td.rate {
            padding: 12px;
            color: #0a0a0a;
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
            text-align: end;
        }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table table td.hours {
            padding: 12px;
            color: #0a0a0a;
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
            text-align: center;
        }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table table td.email {
            padding: 12px;
            color: #0a0a0a;
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
            text-align: center;
        }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table table td.action {
            padding: 12px;
            display: flex;
            padding: 12px;
            justify-content: center;
            align-items: center;
            gap: 40px;
            flex: 1 0 0;
            align-self: stretch;
        }

    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: end;
        align-items: center;
        padding: 8px 16px;
        gap: 8px;
        border-top: 1px solid #e0e0e0;
        background: #fff;
    }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table nav .icon-prev button {
            display: flex;
            flex-wrap: wrap;
            padding: 8px;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            background: #fff;
        }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table nav .text-prev button,
        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table nav .text-next button {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            height: 32px;
            padding: 8px;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            background: #fff;
            color: #616161;
            text-align: center;
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
            line-height: 1.3;
        }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table nav .text-next {
            margin-right: 16px;
        }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table nav .text-next button {
                background: #0089ED;
                color: #fff;
                border: none;
            }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table nav .search-page {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px;
        }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table nav .search-page label {
                color: #404040;
                text-align: center;
                font-family: Inter;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 21px;
                letter-spacing: -0.084px;
            }

            .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table nav .search-page input {
                display: flex;
                flex-wrap: wrap;
                width: 68px;
                height: 32px;
                padding: 8px;
                align-items: center;
                border-radius: 8px;
                border: 1px solid #e0e0e0;
                background: #fff;
                color: #616161;
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
            }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table nav .total-user {
            color: #4F4F4F;
            text-align: center;
            font-family: Inter;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.084px;
            margin-right: 16px;
        }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table nav .total-row {
            display: flex;
            height: 32px;
            padding: 8px;
            align-items: center;
            gap: 8px;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            background: #fff;
            color: #616161;
            text-align: center;
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
        }

section.box-form {
    position: relative;
    background: #fff;
    padding: 29px 37px;
    max-width: 868px;
    border-radius: 12px;
    margin: 20px auto;
    transition: 1s all;
}

    section.box-form .boxs h2 {
        padding: 0;
        margin: 0;
        margin-bottom: 25px;
        color: #0A0A0A;
        font-family: Poppins;
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: 36px;
        letter-spacing: -0.588px;
    }

    section.box-form .boxs nav ul {
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        margin-bottom: 31px;
    }

        section.box-form .boxs nav ul li {
            list-style: none;
        }

            section.box-form .boxs nav ul li a {
                text-decoration: none;
                padding: 8px;
                color: #A3A3A3;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                /* 150% */

                letter-spacing: -0.084px;
            }

                section.box-form .boxs nav ul li a.active {
                    color: #0089ED;
                    border-bottom: 2px solid #0089ED;
                }

    section.box-form .boxs .container .content-form {
        display: none;
    }

        section.box-form .boxs .container .content-form.active {
            display: block;
        }

    section.box-form .boxs .container span.mark {
        color: #FD314D;
    }

    section.box-form .boxs .container .col label {
        color: #404040;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 21px;
        /* 175% */

        letter-spacing: -0.072px;
        display: block;
        margin-bottom: 7px;
    }

    section.box-form .boxs .container .col input,
    section.box-form .boxs .container .col select,
    select.select-manual{
        width: 247px;
        height: 44px;
        border-radius: 8px;
        border: 1px solid #C2C2C2;
        background: #FFF;
        padding: 17px;
        color: #404040;
        font-size: 15px;
    }

    section.box-form .boxs .container .col select,
    select.select-manual {
        background: url(../images/employee/arrow-top-popup.png) no-repeat right #fff;
        -webkit-appearance: none;
        padding: 12px 17px;
        background-position-x: 220px;
        color: #404040;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        /* 175% */

        letter-spacing: -0.072px;
    }

    section.box-form .boxs .container .col2 {
        display: flex;
        flex-wrap: wrap;
        gap: 47px;
        margin-bottom: 16px;
    }

        section.box-form .boxs .container .col2 input,
        section.box-form .boxs .container .col2 select {
            width: 374px;
            width: 368px;
            height: 44px;
            flex-shrink: 0;
        }

        section.box-form .boxs .container .col2 select {
            background-position-x: 338px;
        }

    section.box-form .boxs .container .col3 {
        margin-bottom: 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

        section.box-form .boxs .container .col3.break {
            margin-bottom: 36px;
        }

    section.box-form .boxs .container h3 {
        margin: 0;
        color: #404040;
        font-family: Poppins;
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 21px;
        letter-spacing: -0.12px;
        margin-bottom: 23px;
    }

    section.box-form .boxs .container .box-btn {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
    }

        section.box-form .boxs .container .box-btn button {
            border: none;
            display: flex;
            width: 96px;
            padding: 6px 16px;
            justify-content: center;
            align-items: center;
            gap: 4px;
            border-radius: 6px;
            background: #D9D9D9;
            padding: 6px 16px;
            color: #404040;
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.072px;
        }

            section.box-form .boxs .container .box-btn button.cancel {
                margin-right: 12px;
            }

            section.box-form .boxs .container .box-btn button.next {
                background: #0089ED;
                color: #fff;
            }

@media only screen and (max-width: 1300px) {
    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table table tr.header th {
        min-width: 200px;
    }
}

@media only screen and (max-width: 998px) {
    section.box-form {
        width: 85%;
        margin: 50px auto;
    }

        section.box-form .boxs nav ul {
            gap: 35px 20px;
        }

        section.box-form .boxs .container .col2,
        section.box-form .boxs .container .col3 {
            gap: 25px;
        }

            section.box-form .boxs .container .col2 .box1,
            section.box-form .boxs .container .col2 .box2,
            section.box-form .boxs .container .col2 .box3,
            section.box-form .boxs .container .col3 .box1,
            section.box-form .boxs .container .col3 .box2,
            section.box-form .boxs .container .col3 .box3 {
                width: 100%;
            }

        .Zebra_DatePicker_Icon_Wrapper,
        section.box-form .boxs .container .col input,
        section.box-form .boxs .container .col select {
            width: 100%;
        }

        section.box-form .boxs .container .col select {
            background-position-x: calc(100% - 17px);
        }
}

@media only screen and (max-width: 580px) {
    section.box-form {
        width: 95%;
        margin: 20px auto;
        padding: 20px;
    }
}

@media only screen and (max-width: 768px) {
    section.box-form .boxs nav {
        overflow-y: auto;
        margin-bottom: 35px;
    }

        section.box-form .boxs nav ul {
            width: 560px;
            flex-wrap: nowrap;
            margin: 20px 0;
        }

    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-info-employees .box-action {
        flex-direction: column;
        gap: 12px;
    }

    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-title,
    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table nav {
        padding: 12px;
    }

    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-info-employees {
        padding: 12px;
        margin: 12px;
        margin-top: 0;
    }
}

@media only screen and (max-width: 580px) {
    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-time {
        gap: 5px;
    }

    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-info-employees .box-action .left {
        gap: 8px;
    }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-info-employees .box-action .left form input {
            width: 185px;
            margin-right: 0;
        }

    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table nav {
        padding-left: 0;
        overflow: hidden;
        flex-wrap: nowrap;
        width: 100%;
        justify-content: flex-start;
    }

        .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table nav .search-page {
            width: 100%;
            flex-wrap: nowrap;
        }
}
/* >>>>>>>> leave >>>>>>>> */

.main-dashboard.main-employee.main-leave .mycontainer .myrow-one aside.desktop,
.main-dashboard.main-employee.main-leave .mycontainer .myrow-one aside.mobile {
    height: 100vh;
}

.main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-title h1 {
    color: #404040;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 21px;
    /* 105% */

    letter-spacing: -0.12px;
    margin: 0;
}

.main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-info-employees {
    padding: 16px 32px;
    margin: 0 31px 11px 31px;
    background: #fff;
    border-radius: 8px;
}

    .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-info-employees .box-action {
        margin-bottom: 24px;
        margin-bottom: 35px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

        .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-info-employees .box-action .left {
            display: flex;
            flex-wrap: wrap;
        }

            .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-info-employees .box-action .left form {
                position: relative;
            }

                .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-info-employees .box-action .left form ::-webkit-input-placeholder {
                    color: #9E9E9E;
                    font-family: Inter;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 24px;
                    letter-spacing: -0.176px;
                    padding-left: 32px;
                }

                .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-info-employees .box-action .left form :-ms-input-placeholder {
                    color: #9E9E9E;
                    font-family: Inter;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 24px;
                    letter-spacing: -0.176px;
                    padding-left: 32px;
                }

                .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-info-employees .box-action .left form ::placeholder {
                    color: #9E9E9E;
                    font-family: Inter;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 24px;
                    letter-spacing: -0.176px;
                    padding-left: 32px;
                }

                .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-info-employees .box-action .left form input {
                    display: flex;
                    width: 322px;
                    height: 44px;
                    padding: 8px;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    border-radius: 8px;
                    border: 1px solid #c2c2c2;
                    background: #fff;
                    margin-right: 8px;
                }

                .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-info-employees .box-action .left form button {
                    position: absolute;
                    top: 0;
                    height: 44px;
                    left: 16px;
                    padding: 0;
                    margin: 0;
                    border: none;
                    background: transparent;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                }

        .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-info-employees .box-action .right a {
            display: flex;
            padding: 6px 16px;
            align-items: center;
            gap: 4px;
            border-radius: 6px;
            background: #0089ED;
            border: none;
            color: #ffffff;
            font-family: Poppins;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.084px;
            text-decoration: none;
            width: 154px;
        }

.main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table {
    overflow-y: auto;
}

    .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table table {
        border-spacing: 0;
        width: 100%;
        overflow: hidden;
    }

        .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table table tr:nth-child(odd) {
            background: #F2F2F2;
        }

        .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table table tr.header th {
            padding: 12px;
            gap: 8px;
            flex: 1 0 0;
            background: #D9D9D9;
            color: #0a0a0a;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 18px;
            border-left: 1px solid #C2C2C2;
            text-align: left;
        }

            .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table table tr.header th:first-child {
                border-left: none;
            }

        .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table table td {
            padding: 12px;
            color: #0A0A0A;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
        }

            .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table table td.user {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 8px;
                padding: 12px;
                min-width: 200px;
                color: #000;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
            }

            .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table table td.status span.rejected {
                color: #FD314D;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
                text-align: left;
                display: block;
                padding: 0;
            }

            .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table table td.status span.pending {
                color: #F0B732;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
                text-align: left;
                display: block;
                padding: 0;
            }

            .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table table td.status span.approved {
                color: #009716;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
                text-align: left;
                display: block;
                padding: 0;
            }

            .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table table td.action {
                display: flex;
                padding: 12px;
                justify-content: center;
                align-items: center;
                gap: 8px;
                position: relative;
                bottom: 10px;
            }

                .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table table td.action button {
                    border: none;
                    background: none;
                }

                    .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table table td.action button.approve {
                        display: flex;
                        padding: 2px 6px;
                        align-items: center;
                        gap: 4px;
                        border-radius: 6px;
                        border: 1px solid #009716;
                        background: #CEE5D3;
                        color: #009716;
                        font-family: Poppins;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 21px;
                        letter-spacing: -0.072px;
                    }

                    .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table table td.action button.reject {
                        display: flex;
                        padding: 2px 6px;
                        align-items: center;
                        gap: 4px;
                        border-radius: 6px;
                        border: 1px solid #FD314D;
                        background: #FFD6DB;
                        color: #FD314D;
                        font-family: Poppins;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 21px;
                        letter-spacing: -0.072px;
                    }

                    .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table table td.action button.edit {
                        display: flex;
                        padding: 2px 6px;
                        justify-content: center;
                        align-items: center;
                        gap: 4px;
                        border-radius: 6px;
                        border: 1px solid #0089ED;
                        background: #C8E8FF;
                        color: #0089ED;
                        font-family: Poppins;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 21px;
                        letter-spacing: -0.072px;
                    }

                .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table table td.action span {
                    color: #6C6C6C;
                    font-family: Poppins;
                    font-size: 10px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 18px;
                    display: block;
                }

    .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: end;
        align-items: center;
        padding: 8px 16px;
        gap: 8px;
        border-top: 1px solid #e0e0e0;
        background: #fff;
    }

        .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table nav .icon-prev button {
            display: flex;
            flex-wrap: wrap;
            padding: 8px;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            background: #fff;
        }

        .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table nav .text-prev button,
        .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table nav .text-next button {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            height: 32px;
            padding: 8px;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            background: #fff;
            color: #616161;
            text-align: center;
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
            line-height: 1.3;
        }

        .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table nav .text-next {
            margin-right: 16px;
        }

            .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table nav .text-next button {
                background: #0089ED;
                color: #fff;
                border: none;
            }

        .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table nav .search-page {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px;
        }

            .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table nav .search-page label {
                color: #404040;
                text-align: center;
                font-family: Inter;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 21px;
                letter-spacing: -0.084px;
            }

            .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table nav .search-page input {
                display: flex;
                flex-wrap: wrap;
                width: 68px;
                height: 32px;
                padding: 8px;
                align-items: center;
                border-radius: 8px;
                border: 1px solid #e0e0e0;
                background: #fff;
                color: #616161;
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
            }

        .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table nav .total-user {
            color: #4F4F4F;
            text-align: center;
            font-family: Inter;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.084px;
            margin-right: 16px;
        }

        .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table nav .total-row {
            display: flex;
            height: 32px;
            padding: 8px;
            align-items: center;
            gap: 8px;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            background: #fff;
            color: #616161;
            text-align: center;
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
        }

section.box-form-create-leave {
    position: relative;
    background: #fff;
    padding: 29px 37px;
    max-width: 868px;
    max-width: 604px;
    border-radius: 12px;
    margin: 20px auto;
    transition: 1s all;
}

    section.box-form-create-leave .boxs h2 {
        padding: 0;
        margin: 0;
        margin-bottom: 25px;
        color: #0A0A0A;
        font-family: Poppins;
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: 36px;
        letter-spacing: -0.588px;
    }

    section.box-form-create-leave .boxs .container .content-form {
        display: none;
    }

        section.box-form-create-leave .boxs .container .content-form.active {
            display: block;
        }

    section.box-form-create-leave .boxs .container span.mark {
        color: #FD314D;
    }

    section.box-form-create-leave .boxs .container ::placeholder {
        /* Chrome, Firefox, Opera, Safari 10.1+ */

        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        /* 175% */

        letter-spacing: -0.072px;
    }

    section.box-form-create-leave .boxs .container :-ms-input-placeholder {
        /* Internet Explorer 10-11 */

        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        /* 175% */

        letter-spacing: -0.072px;
    }

    section.box-form-create-leave .boxs .container ::-ms-input-placeholder {
        /* Microsoft Edge */

        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        /* 175% */

        letter-spacing: -0.072px;
    }

    section.box-form-create-leave .boxs .container .placeholder {
        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-create-leave .boxs .container .col {
        margin-bottom: 16px;
    }

        section.box-form-create-leave .boxs .container .col label {
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            /* 175% */

            letter-spacing: -0.072px;
            display: block;
            margin-bottom: 7px;
        }

        section.box-form-create-leave .boxs .container .col input,
        section.box-form-create-leave .boxs .container .col select {
            width: 247px;
            height: 44px;
            border-radius: 8px;
            border: 1px solid #C2C2C2;
            background: #FFF;
            padding: 17px;
            color: #404040;
            font-size: 15px;
        }

        section.box-form-create-leave .boxs .container .col select {
            background: url(../images/employee/arrow-top-popup.png) no-repeat right #fff;
            -webkit-appearance: none;
            padding: 12px 17px;
            background-position-x: 220px;
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            /* 175% */

            letter-spacing: -0.072px;
        }

    section.box-form-create-leave .boxs .container .col1 input {
        width: 100%;
    }

    section.box-form-create-leave .boxs .container .col1 select {
        width: 100%;
        background-position-x: calc(100% - 17px);
    }

    section.box-form-create-leave .boxs .container .col2 {
        display: flex;
        flex-wrap: wrap;
        gap: 47px;
        margin-bottom: 16px;
    }

        section.box-form-create-leave .boxs .container .col2 input,
        section.box-form-create-leave .boxs .container .col2 select {
            width: 374px;
            width: 368px;
            height: 44px;
            flex-shrink: 0;
        }

        section.box-form-create-leave .boxs .container .col2 select {
            background-position-x: 338px;
        }

    section.box-form-create-leave .boxs .container .col3 {
        margin-bottom: 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

        section.box-form-create-leave .boxs .container .col3.break {
            margin-bottom: 36px;
        }

    section.box-form-create-leave .boxs .container .col.period {
        display: flex;
        flex-wrap: wrap;
        gap: 29px;
    }

        section.box-form-create-leave .boxs .container .col.period input {
            width: 249px;
        }

    section.box-form-create-leave .boxs .container .col.notes textarea {
        border-radius: 8px;
        border: 1px solid #c2c2c2;
        background: #fff;
        padding: 8px 18px;
        width: 100%;
    }

    section.box-form-create-leave .boxs .container .col.notes span.count {
        color: #404040;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
        text-align: right;
        display: block;
        position: relative;
        bottom: 3px;
    }

    section.box-form-create-leave .boxs .container .col.attachment {
        position: relative;
    }

        section.box-form-create-leave .boxs .container .col.attachment input#myFile {
            display: none;
        }

        section.box-form-create-leave .boxs .container .col.attachment button {
            position: absolute;
            border: none;
            background: none;
            bottom: 12px;
            left: 17px;
            border-right: 1px solid #c2c2c2;
            position: absolute;
            border: none;
            background: none;
            bottom: 0;
            left: 17px;
            border-right: 1px solid #c2c2c2;
            height: 44px;
            padding-right: 22px;
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            /* 175% */

            letter-spacing: -0.072px;
        }

            section.box-form-create-leave .boxs .container .col.attachment button svg {
                margin-right: 6px;
                position: relative;
                top: 4px;
            }

        section.box-form-create-leave .boxs .container .col.attachment input#attachment {
            padding-left: 150px;
        }

    section.box-form-create-leave .boxs .container .box-btn {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

        section.box-form-create-leave .boxs .container .box-btn button {
            display: flex;
            width: 252px;
            padding: 6px 16px;
            justify-content: center;
            align-items: center;
            gap: 4px;
            border-radius: 6px;
            text-align: center;
            font-family: Inter;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.084px;
            border: none;
        }

            section.box-form-create-leave .boxs .container .box-btn button.cancel {
                background: #D3D3D9;
                color: #404040;
            }

            section.box-form-create-leave .boxs .container .box-btn button.save {
                background: #0089ED;
                color: #fff;
            }

section.box-form-leave-detail {
    position: relative;
    background: #fff;
    padding: 29px 37px;
    max-width: 604px;
    border-radius: 12px;
    margin: 20px auto;
    transition: 1s all;
}

    section.box-form-leave-detail .container .row h2 {
        padding: 0;
        margin: 0;
        margin-bottom: 25px;
        color: #0A0A0A;
        font-family: Poppins;
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: 36px;
        letter-spacing: -0.588px;
    }

    section.box-form-leave-detail .container .row .box-form-info span.mark {
        color: #FD314D;
    }

    section.box-form-leave-detail .container .row .box-form-info ::placeholder {
        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-leave-detail .container .row .box-form-info :-ms-input-placeholder {
        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-leave-detail .container .row .box-form-info ::-ms-input-placeholder {
        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-leave-detail .container .row .box-form-info .placeholder {
        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-leave-detail .container .row .box-form-info .col {
        margin-bottom: 16px;
    }

        section.box-form-leave-detail .container .row .box-form-info .col label {
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.072px;
            display: block;
            margin-bottom: 7px;
        }

        section.box-form-leave-detail .container .row .box-form-info .col input,
        section.box-form-leave-detail .container .row .box-form-info .col select {
            width: 247px;
            height: 44px;
            border-radius: 8px;
            border: 1px solid #C2C2C2;
            background: #FFF;
            padding: 17px;
            color: #404040;
            font-size: 15px;
        }

        section.box-form-leave-detail .container .row .box-form-info .col select {
            background: url(../images/employee/arrow-top-popup.png) no-repeat right #fff;
            -webkit-appearance: none;
            padding: 12px 17px;
            background-position-x: 220px;
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
        }

    section.box-form-leave-detail .container .row .box-form-info .col1 input {
        width: 100%;
    }

    section.box-form-leave-detail .container .row .box-form-info .col1 select {
        width: 100%;
        background-position-x: calc(100% - 17px);
    }

    section.box-form-leave-detail .container .row .box-form-info .col2 {
        display: flex;
        flex-wrap: wrap;
        gap: 47px;
        margin-bottom: 16px;
    }

        section.box-form-leave-detail .container .row .box-form-info .col2 input,
        section.box-form-leave-detail .container .row .box-form-info .col2 select {
            width: 374px;
            width: 368px;
            height: 44px;
            flex-shrink: 0;
        }

        section.box-form-leave-detail .container .row .box-form-info .col2 select {
            background-position-x: 338px;
        }

    section.box-form-leave-detail .container .row .box-form-info .col3 {
        margin-bottom: 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    section.box-form-leave-detail .container .row .box-form-info .col.break {
        margin-bottom: 36px;
    }

    section.box-form-leave-detail .container .row .box-form-info .boxes {
        display: flex;
        flex-wrap: wrap;
    }

        section.box-form-leave-detail .container .row .box-form-info .boxes .col {
            margin-bottom: 31px;
        }

    section.box-form-leave-detail .container .row .box-form-info span {
        display: block;
    }

        section.box-form-leave-detail .container .row .box-form-info span.title {
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.072px;
            margin-bottom: 9px;
        }

        section.box-form-leave-detail .container .row .box-form-info span.value {
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
        }

    section.box-form-leave-detail .container .row .box-form-info .col.leave-type,
    section.box-form-leave-detail .container .row .box-form-info .col.period-start,
    section.box-form-leave-detail .container .row .box-form-info .col.leave-hours {
        width: 139px;
        margin-right: 139px;
    }

    section.box-form-leave-detail .container .row .box-form-info .col.attachment {
        position: relative;
    }

        section.box-form-leave-detail .container .row .box-form-info .col.attachment button {
            position: absolute;
            background: 0 0;
            width: 122px;
            height: 24px;
            border-radius: 8px;
            border: 1px solid #0089ed;
            color: #0089ed;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
            left: 125px;
        }

    section.box-form-leave-detail .container .row .box-form-info .col.status .value {
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-leave-detail .container .row .box-form-info .col.status {
        margin-bottom: 45px;
    }

        section.box-form-leave-detail .container .row .box-form-info .col.status .value.approve,
        section.box-form-leave-detail .container .row .box-form-info .col.status .value.Approve,
        section.box-form-leave-detail .container .row .box-form-info .col.status .value.approved,
        section.box-form-leave-detail .container .row .box-form-info .col.status .value.Approved {
            color: #009716;
        }

        section.box-form-leave-detail .container .row .box-form-info .col.status .value.pending,
        section.box-form-leave-detail .container .row .box-form-info .col.status .value.Pending {
            color: #f0b732;
        }

        section.box-form-leave-detail .container .row .box-form-info .col.status .value.reject,
        section.box-form-leave-detail .container .row .box-form-info .col.status .value.Reject,
        section.box-form-leave-detail .container .row .box-form-info .col.status .value.rejected,
        section.box-form-leave-detail .container .row .box-form-info .col.status .value.Rejected {
            color: #fd314d;
        }

    section.box-form-leave-detail .container .row .box-form-info .col.button {
        margin: 0;
    }

        section.box-form-leave-detail .container .row .box-form-info .col.button button {
            border: none;
            display: flex;
            width: 527px;
            padding: 6px 16px;
            justify-content: center;
            align-items: center;
            gap: 4px;
            border-radius: 6px;
            background: #D3D3D9;
            color: #404040;
            text-align: center;
            font-family: Inter;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.084px;
        }

@media only screen and (max-width: 1300px) {
    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table table tr.header th {
        min-width: 200px;
    }
}

@media only screen and (max-width: 998px) {
    section.box-form-create-leave {
        width: 85%;
        margin: 50px auto;
    }

        section.box-form-create-leave .boxs nav ul {
            gap: 35px 20px;
        }

        section.box-form-create-leave .boxs .container .col2,
        section.box-form-create-leave .boxs .container .col3 {
            gap: 25px;
        }

            section.box-form-create-leave .boxs .container .col2 .box1,
            section.box-form-create-leave .boxs .container .col2 .box2,
            section.box-form-create-leave .boxs .container .col2 .box3,
            section.box-form-create-leave .boxs .container .col3 .box1,
            section.box-form-create-leave .boxs .container .col3 .box2,
            section.box-form-create-leave .boxs .container .col3 .box3 {
                width: 100%;
            }

        section.box-form-create-leave .boxs .container .col input,
        section.box-form-create-leave .boxs .container .col select {
            width: 100%;
        }

        section.box-form-create-leave .boxs .container .col select {
            background-position-x: calc(100% - 17px);
        }
}

@media only screen and (max-width: 580px) {
    section.box-form-create-leave {
        width: 95%;
        margin: 20px auto;
        padding: 20px;
    }
}

@media only screen and (max-width: 768px) {
    .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-info-employees {
        padding: 12px;
        margin: 12px;
        margin-top: 0;
    }

    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-info-employees .box-action {
        flex-direction: column;
        gap: 12px;
    }

    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-title,
    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-table nav {
        padding: 12px;
    }

    .main-dashboard.main-employee .mycontainer .myrow-one section.content .box-info-employees {
        padding: 12px;
        margin: 12px;
        margin-top: 0;
    }
}

@media only screen and (max-width: 580px) {
    .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-info-employees .box-action .left {
        gap: 8px;
    }

        .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-info-employees .box-action .left form input {
            width: 185px;
            margin-right: 0;
        }

    .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table nav {
        padding-left: 0;
        overflow: hidden;
        flex-wrap: nowrap;
        width: 100%;
        justify-content: flex-start;
    }

        .main-dashboard.main-employee.main-leave .mycontainer .myrow-one section.content .box-table nav .search-page {
            width: 100%;
            flex-wrap: nowrap;
        }
}

@media only screen and (max-width: 998px) {
    section.box-form-create-leave .boxs .container .col.period,
    section.box-form-create-leave .boxs .container .col.period input,
    section.box-form-create-leave .boxs .container .col.period .Zebra_DatePicker_Icon_Wrapper {
        width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    section.box-form-create-leave .boxs .container .box-btn {
        gap: 20px;
    }

        section.box-form-create-leave .boxs .container .box-btn button {
            width: 100%;
        }
}

@media only screen and (max-width: 580px) {
    section.box-form-create-leave {
        width: 90%;
        margin: 20px auto;
        padding: 20px;
    }
}

@media only screen and (max-width: 998px) {
    section.box-form-leave-detail {
        width: 85%;
        margin: 50px auto;
    }

        section.box-form-leave-detail .container .row .box-form-info .col.button button {
            width: 100%;
        }
}

@media only screen and (max-width: 768px) {
    section.box-form-leave-detail .container .row .box-form-info .boxes .col {
        width: 100%;
    }
}

@media only screen and (max-width: 580px) {
    section.box-form-leave-detail {
        width: 90%;
        margin: 20px auto;
        padding: 20px;
    }

        section.box-form-leave-detail .container .row .box-form-info .col.attachment button {
            display: block;
            margin-top: 12px;
            position: static;
        }
}
/* >>>>>>>> login >>>>>>>> */

.main-login .mycontainer {
    background: #0089ED;
    height: 458px;
}

    .main-login .mycontainer .myrow-one {
        padding: 28px 75px 0;
    }

    .main-login .mycontainer .myrow-two {
        display: flex;
        justify-content: space-between;
        padding: 0 73px;
        gap: 60px;
    }

        .main-login .mycontainer .myrow-two .left {
            display: flex;
        }

            .main-login .mycontainer .myrow-two .left .box-text {
                max-width: 311px;
                margin-right: 53px;
            }

                .main-login .mycontainer .myrow-two .left .box-text h1 {
                    color: var(--white-color);
                    font-family: Poppins;
                    font-size: 34px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: normal;
                    margin-top: 36px;
                    margin-bottom: 21px;
                }

                .main-login .mycontainer .myrow-two .left .box-text p {
                    color: var(--white-color);
                    font-family: Poppins;
                    font-size: 13px;
                    font-style: normal;
                    font-weight: 300;
                    line-height: normal;
                }

            .main-login .mycontainer .myrow-two .left .box-icon {
                margin-top: 18px;
            }

        .main-login .mycontainer .myrow-two .right .box-login {
            border-radius: 40px;
            background: var(--white-color);
            box-shadow: 0 4px 35px 0 rgba(0, 0, 0, 0.08);
            width: 539px;
            position: relative;
            bottom: 38px;
            padding: 44px;
            padding-bottom: 79px;
        }

            .main-login .mycontainer .myrow-two .right .box-login .text-welcome {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-bottom: 2px;
            }

                .main-login .mycontainer .myrow-two .right .box-login .text-welcome .left span:first-child {
                    color: #000;
                    font-family: Poppins;
                    font-size: 21px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    margin-right: 4px;
                }

                .main-login .mycontainer .myrow-two .right .box-login .text-welcome .left span:last-child {
                    color: #0187EA;
                    font-family: Poppins;
                    font-size: 21px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: normal;
                }

                .main-login .mycontainer .myrow-two .right .box-login .text-welcome .right span {
                    color: #8D8D8D;
                    font-family: Poppins;
                    font-size: 13px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    display: block;
                }

                .main-login .mycontainer .myrow-two .right .box-login .text-welcome .right a {
                    color: #0089ED;
                    font-family: Poppins;
                    font-size: 13px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    text-decoration: none;
                }

            .main-login .mycontainer .myrow-two .right .box-login .text-signin h2 {
                color: #000;
                font-family: Poppins;
                font-size: 55px;
                font-style: normal;
                font-weight: 500;
                line-height: normal;
                margin-top: 0;
                margin-bottom: 42px;
            }

            .main-login .mycontainer .myrow-two .right .box-login .login {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 20px;
                margin-bottom: 47px;
            }

                .main-login .mycontainer .myrow-two .right .box-login .login .google {
                    display: flex;
                    align-items: center;
                    border-radius: 9px;
                    background: #E9F1FF;
                    padding: 10px 14px 10px 32px;
                    cursor: pointer;
                }

                    .main-login .mycontainer .myrow-two .right .box-login .login .google .g-signin2 {
                        margin:0;
                        color: #4285F4;
                        font-family: Poppins;
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: normal;
                    }

                        .main-login .mycontainer .myrow-two .right .box-login .login .google .g-signin2 .abcRioButtonLightBlue {
                            background-color: transparent !important;
                            color: #757575;
                            border: none !important;
                            box-shadow: none;
                        }

.main-login .mycontainer .myrow-two .right .box-login .login .facebook {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-radius: 9px;
    background: #F6F6F6;
    padding: 15px 52px 11px 52px;
    cursor: pointer;
}

            .main-login .mycontainer .myrow-two .right .box-login form ::-webkit-input-placeholder {
                color: #808080;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 300;
                line-height: normal;
            }

            .main-login .mycontainer .myrow-two .right .box-login form :-ms-input-placeholder {
                color: #808080;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 300;
                line-height: normal;
            }

            .main-login .mycontainer .myrow-two .right .box-login form ::placeholder {
                color: #808080;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 300;
                line-height: normal;
            }

            .main-login .mycontainer .myrow-two .right .box-login form label#username {
                color: #000;
                font-family: Poppins;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                margin-bottom: 13px;
                display: block;
            }

            .main-login .mycontainer .myrow-two .right .box-login form input#username {
                border-radius: 9px;
                border: 1px solid #adadad;
                background: #FFF;
                height: 57px;
                padding: 19px 25px;
                width: 100%;
                margin-bottom: 38px;
            }

                .main-login .mycontainer .myrow-two .right .box-login form input#username:focus {
                    outline: 1px solid #4285F4;
                }

            .main-login .mycontainer .myrow-two .right .box-login form label#password {
                color: #000;
                font-family: Poppins;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                margin-bottom: 13px;
                display: block;
            }

            .main-login .mycontainer .myrow-two .right .box-login form input#password {
                border-radius: 9px;
                border: 1px solid #ADADAD;
                background: #FFF;
                height: 57px;
                padding: 19px 25px;
                width: 100%;
                margin-bottom: 12px;
            }

                .main-login .mycontainer .myrow-two .right .box-login form input#password:focus {
                    outline: 1px solid #4285F4;
                }

            .main-login .mycontainer .myrow-two .right .box-login form a#forgot,
            .main-login .mycontainer .myrow-two .right .box-login div.form a#forgot {
                color: #4285F4;
                font-family: Poppins;
                font-size: 13px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                display: block;
                text-align: right;
                text-decoration: none;
                margin-bottom: 49px;
            }

            .main-login .mycontainer .myrow-two .right .box-login form button#submit,
            .main-login .mycontainer .myrow-two .right .box-login div.form button#submit {
                border-radius: 10px;
                background: #0089ed;
                box-shadow: 0 4px 19px 0 rgba(119, 147, 65, 0.3);
                height: 54px;
                text-align: center;
                color: #fff;
                font-family: Poppins;
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: normal;
                width: 100%;
                border: none;
                cursor: pointer;
            }

@media only screen and (max-width: 1300px) {
    .main-login .mycontainer .myrow-two .left {
        display: block;
    }

        .main-login .mycontainer .myrow-two .left .box-text {
            max-width: max-content;
            margin-right: 0;
        }
}

@media only screen and (max-width: 1024px) {
    .main-login .mycontainer .myrow-two {
        display: block;
        padding-bottom: 100px;
    }

        .main-login .mycontainer .myrow-two .left {
            display: flex;
            gap: 25px;
        }

        .main-login .mycontainer .myrow-two .right .box-login {
            bottom: 0;
        }
}

@media only screen and (max-width: 768px) {
    .main-login .mycontainer {
        height: 750px;
    }

        .main-login .mycontainer .myrow-one {
            padding: 0 30px;
            padding-top: 30px;
        }

        .main-login .mycontainer .myrow-two {
            padding: 0 30px;
            padding-bottom: 100px;
        }

            .main-login .mycontainer .myrow-two .left {
                display: block;
            }

                .main-login .mycontainer .myrow-two .left .box-icon {
                    margin: 20px 0;
                }

            .main-login .mycontainer .myrow-two .right .box-login {
                bottom: 0;
                width: auto;
                height: auto;
                padding: 30px;
            }

                .main-login .mycontainer .myrow-two .right .box-login .login {
                    flex-direction: column;
                    align-items: flex-start;
                }

                    .main-login .mycontainer .myrow-two .right .box-login .login .google,
                    .main-login .mycontainer .myrow-two .right .box-login .login .facebook {
                        width: 100%;
                        padding-left: 32px;
                    }
}

@media only screen and (max-width: 480px) {
    .main-login .mycontainer .myrow-two {
        padding: 0;
        padding-bottom: 100px;
    }

        .main-login .mycontainer .myrow-two > .left {
            padding: 0 30px;
        }

        .main-login .mycontainer .myrow-two .right .box-login {
            padding: 30px;
        }

            .main-login .mycontainer .myrow-two .right .box-login .text-welcome {
                display: block;
            }

                .main-login .mycontainer .myrow-two .right .box-login .text-welcome .right {
                    margin: 10px 0;
                }

            .main-login .mycontainer .myrow-two .right .box-login .login .google,
            .main-login .mycontainer .myrow-two .right .box-login .login .facebook {
                padding-right: 0;
            }

                .main-login .mycontainer .myrow-two .right .box-login .login .google span,
                .main-login .mycontainer .myrow-two .right .box-login .login .facebook span {
                    margin-right: 0;
                    padding-right: 10px;
                }
}
/* >>>>>>>> Navigasi >>>>>>>> */

.main-dashboard .mycontainer .myrow-one aside.sidebar {
    width: 250px;
    background: #0089ed;
    overflow: hidden;
}

    .main-dashboard .mycontainer .myrow-one aside.sidebar .box-button-close {
        display: none;
    }

        .main-dashboard .mycontainer .myrow-one aside.sidebar .box-button-close button {
            background: 0 0;
            position: absolute;
            top: 0;
            right: 0;
            padding: 10px 20px;
            border: 1px solid #68b5f3;
        }

            .main-dashboard .mycontainer .myrow-one aside.sidebar .box-button-close button svg {
                fill: #fff;
            }

    .main-dashboard .mycontainer .myrow-one aside.sidebar .box-logo {
        padding: 12px 38px 18px 39px;
    }

    .main-dashboard .mycontainer .myrow-one aside.sidebar ul {
        margin: 0;
        padding: 0 11px;
    }

        .main-dashboard .mycontainer .myrow-one aside.sidebar ul li {
            list-style: none;
            padding: 12px 24px;
            margin: 0;
            position: relative;
        }

            .main-dashboard .mycontainer .myrow-one aside.sidebar ul li a {
                text-decoration: none;
                display: flex;
                align-items: center;
            }

                .main-dashboard .mycontainer .myrow-one aside.sidebar ul li a svg {
                    margin-right: 12px;
                    width: 20px;
                    height: 20px;
                }

                .main-dashboard .mycontainer .myrow-one aside.sidebar ul li a span {
                    color: #FFF;
                    font-family: Poppins;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 21px;
                    letter-spacing: -0.084px;
                }

                .main-dashboard .mycontainer .myrow-one aside.sidebar ul li a .count {
                    position: absolute;
                    right: 14px;
                    min-width: 31px;
                    min-height: 15px;
                    border-radius: 7.5px;
                    background: #fff;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    align-items: center;
                }

                    .main-dashboard .mycontainer .myrow-one aside.sidebar ul li a .count span {
                        color: #404040;
                        font-family: Poppins;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 21px;
                        letter-spacing: -0.072px;
                        text-align: center;
                        display: block;
                        line-height: 0;
                    }

                .main-dashboard .mycontainer .myrow-one aside.sidebar ul li a .arrow {
                    position: absolute;
                    right: 14px;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-end;
                    align-items: center;
                }

                    .main-dashboard .mycontainer .myrow-one aside.sidebar ul li a .arrow svg {
                        margin: 0;
                        width: 16px;
                        height: 16px;
                    }

            .main-dashboard .mycontainer .myrow-one aside.sidebar ul li .sub-menu {
                display: none;
            }

            .main-dashboard .mycontainer .myrow-one aside.sidebar ul li.employee {
                border-bottom: 1px solid #68B5F3;
                margin: 0 -11px;
                padding: 12px 35px;
            }

            .main-dashboard .mycontainer .myrow-one aside.sidebar ul li.roster {
                border-bottom: 1px solid #68B5F3;
                margin: 0 -11px;
                padding: 12px 35px;
            }

            .main-dashboard .mycontainer .myrow-one aside.sidebar ul li.active {
                border-radius: 8px;
                background: rgba(208, 225, 248, 0.7);
                margin: 0;
                padding: 12px 24px;
            }

                .main-dashboard .mycontainer .myrow-one aside.sidebar ul li.active a svg path {
                    stroke: #06499A;
                }

                .main-dashboard .mycontainer .myrow-one aside.sidebar ul li.active a span {
                    color: #0A356E;
                    font-family: Poppins;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 21px;
                    /* 150% */

                    letter-spacing: -0.084px;
                }

                .main-dashboard .mycontainer .myrow-one aside.sidebar ul li.active a .count span {
                    color: #0a356e;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                    text-align: center;
                    display: block;
                    line-height: 0;
                }

            .main-dashboard .mycontainer .myrow-one aside.sidebar ul li.list-parent.active .arrow {
                transform: rotateZ(180deg);
            }

        .main-dashboard .mycontainer .myrow-one aside.sidebar ul .sub-menu {
            display: none;
        }

            .main-dashboard .mycontainer .myrow-one aside.sidebar ul .sub-menu li {
                list-style: none;
                padding: 12px 24px;
                padding-right: 0;
                padding-left: 46px;
                margin: 0;
                position: relative;
            }

                .main-dashboard .mycontainer .myrow-one aside.sidebar ul .sub-menu li a {
                    color: #FFF;
                    font-family: Poppins;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 21px;
                    letter-spacing: -0.084px;
                }

                .main-dashboard .mycontainer .myrow-one aside.sidebar ul .sub-menu li.active a {
                    color: #0a356e;
                }
        /*.main-dashboard .mycontainer .myrow-one aside.sidebar ul li.active + ul.sub-menu {
	display: block;
}*/

        .main-dashboard .mycontainer .myrow-one aside.sidebar ul > li.active + ul.sub-menu {
            display: block;
        }

/*.main-dashboard .mycontainer .myrow-one aside.sidebar ul .sub-menu:has(.active) {
	display: block;
}*/


.main-dashboard .mycontainer .myrow-one .sidebar-only-desktop {
    display: flex;
}

    .main-dashboard .mycontainer .myrow-one .sidebar-only-desktop aside.sidebar.mobile {
        display: none;
        width: 65px;
    }

        .main-dashboard .mycontainer .myrow-one .sidebar-only-desktop aside.sidebar.mobile .box-logo {
            padding: 7px 11px;
            padding-bottom: 54px;
        }

        .main-dashboard .mycontainer .myrow-one .sidebar-only-desktop aside.sidebar.mobile ul li {
            padding: 12px 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

            .main-dashboard .mycontainer .myrow-one .sidebar-only-desktop aside.sidebar.mobile ul li a svg {
                margin: 0;
            }

            .main-dashboard .mycontainer .myrow-one .sidebar-only-desktop aside.sidebar.mobile ul li a span {
                display: none;
            }

            .main-dashboard .mycontainer .myrow-one .sidebar-only-desktop aside.sidebar.mobile ul li a .arrow {
                display: none;
            }

            .main-dashboard .mycontainer .myrow-one .sidebar-only-desktop aside.sidebar.mobile ul li .count {
                position: absolute;
                right: -1px;
                min-width: 15px;
                min-height: 15px;
                top: 5px;
                padding: 2px 3px;
            }

                .main-dashboard .mycontainer .myrow-one .sidebar-only-desktop aside.sidebar.mobile ul li .count span {
                    display: block;
                }

.main-dashboard .mycontainer .myrow-one .sidebar-only-mobile {
    display: none;
}

    .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile aside.sidebar.mobile {
        width: 65px;
    }

        .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile aside.sidebar.mobile .box-logo {
            padding: 7px 11px;
            padding-bottom: 54px;
        }

        .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile aside.sidebar.mobile ul li {
            padding: 12px 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

            .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile aside.sidebar.mobile ul li a svg {
                margin: 0;
            }

            .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile aside.sidebar.mobile ul li a span {
                display: none;
            }

            .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile aside.sidebar.mobile ul li a .arrow {
                display: none;
            }

            .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile aside.sidebar.mobile ul li .count {
                position: absolute;
                right: -1px;
                min-width: 15px;
                min-height: 15px;
                top: 5px;
                padding: 2px 3px;
            }

                .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile aside.sidebar.mobile ul li .count span {
                    display: block;
                }

.main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-burger-only-desktop {
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-burger-only-desktop .burger-desktop {
        display: block;
    }

    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-burger-only-desktop .burger-mobile {
        display: none;
    }

.main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-burger-only-mobile {
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    display: none;
}

    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-burger-only-mobile .burger-desktop {
        display: none;
    }

    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-burger-only-mobile .burger-mobile {
        display: block;
    }

.main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-info-navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 23px;
}

    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-info-navigation .box-select label {
        display: none;
    }

    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-info-navigation .box-select select {
        width: 141px;
        height: 29px;
        flex-shrink: 0;
        border-radius: 8px;
        border: 1px solid #D9D9D9;
        background: #FFF;
        color: #404040;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
        padding: 4px 9px;
        background: url(../images/employee/arrow-top-popup.png) no-repeat right #fff;
        -webkit-appearance: none;
        background-position-x: calc(100% - 9px);
    }

    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-info-navigation a {
        width: 29px;
        height: 29px;
        flex-shrink: 0;
        border-radius: 8px;
        border: 1px solid #0089ed;
        background: #fff;
        margin-left: 14px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

@media only screen and (max-width: 1024px) {
    .main-dashboard .mycontainer .myrow-one .sidebar-only-desktop {
        display: none;
    }

    .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile {
        display: flex;
    }

        .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile aside.sidebar.desktop {
            display: none;
        }

        .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile aside.sidebar.mobile {
            display: block;
        }

    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-burger-only-desktop {
        display: none;
    }

    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-burger-only-mobile {
        display: flex;
    }
}

@media only screen and (max-width: 768px) {
    .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile {
        position: absolute;
        top: 50px;
    }

    .main-dashboard .mycontainer .myrow-one section.content {
        width: 100% !important;
    }

    .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile aside.sidebar.mobile {
        display: none !important;
    }
}

@media only screen and (max-width: 580px) {
    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .notif {
        margin-right: 20px;
    }

    .main-dashboard .mycontainer .myrow-one section.content .navigation-top .box-account .account .email {
        display: none;
    }
}

body.switch-mode-tablet .main-dashboard .mycontainer .myrow-one .navigation-top .box-burger-only-desktop {
    display: none;
}

body.switch-mode-tablet .main-dashboard .mycontainer .myrow-one .navigation-top .box-burger-only-mobile {
    display: block;
}

body.switch-mode-tablet .main-dashboard .mycontainer .myrow-one .sidebar-only-desktop {
    display: none;
}

body.switch-mode-tablet .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile {
    display: flex;
}

    body.switch-mode-tablet .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile aside.sidebar.desktop {
        display: block;
        width: 0;
        visibility: hidden;
        transition: all 0.8s;
    }

    body.switch-mode-tablet .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile aside.sidebar.mobile {
        opacity: 1;
        transition: all 0.4s;
    }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile aside.sidebar.desktop {
        display: block;
        width: 0;
        visibility: hidden;
        transition: all 0.8s;
    }

    .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile aside.sidebar.mobile {
        opacity: 1;
        transition: all 0.4s;
    }
}

body.active-sidebar .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile aside.sidebar.desktop {
    width: 250px;
    visibility: visible;
    transform: translateX(0);
}

body.active-sidebar .main-dashboard .mycontainer .myrow-one .sidebar-only-mobile aside.sidebar.mobile {
    width: 0;
    opacity: 0;
    visibility: hidden;
}

body.active-sidebar .main-dashboard .mycontainer .myrow-one section.content {
    width: calc(100% - 250px);
}

body.hide-sub-menu .main-dashboard .mycontainer .myrow-one aside.sidebar ul.sub-menu {
    display: none !important;
}

body.hide-sub-menu .main-dashboard .mycontainer .myrow-one aside.sidebar .arrow {
    transform: none !important;
}

/* >>>>>>>> Payslip >>>>>>>> */

.main-dashboard.main-payslip .mycontainer .myrow-one aside.desktop,
.main-dashboard.main-payslip .mycontainer .myrow-one aside.mobile {
    height: 100vh;
}

.main-dashboard.main-payslip .mycontainer .myrow-one section.content .box-title h1 {
    color: #404040;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 21px;
    /* 105% */

    letter-spacing: -0.12px;
    margin: 0;
}

.main-dashboard.main-payslip .mycontainer .myrow-one section.content .box-info-employees {
    padding: 16px 32px;
    margin: 0 31px 11px 31px;
    background: #fff;
    border-radius: 8px;
}

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .box-info-employees .box-tabs {
        margin-bottom: 35px;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .box-info-employees .box-tabs ul {
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 24px;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .box-info-employees .box-tabs ul li {
                list-style-type: none;
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                color: #A3A3A3;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                /* 150% */

                letter-spacing: -0.084px;
                padding: 8px;
                cursor: pointer;
            }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .box-info-employees .box-tabs ul li span {
                    color: #404040;
                }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .box-info-employees .box-tabs ul li.active {
                    color: #0089ED;
                    border-bottom: 2px solid #0089ED;
                }

                    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .box-info-employees .box-tabs ul li.active span {
                        color: #0089ED;
                    }

.main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent {
    display: flex;
    flex-wrap: wrap;
    display: none;
}

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.active {
        display: flex;
        overflow: auto;
    }

.main-dashboard.main-payslip .mycontainer .myrow-one section.content .k-grid tbody tr:hover,
.main-dashboard.main-payslip .mycontainer .myrow-one section.content .k-grid tbody tr.k-state-hover {
    background: #F2F2F2;
}

.main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip .box-period {
    width: 100%;
}

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip .box-period form .boxes {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip .box-period form .boxes label {
            display: block;
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.072px;
            margin-bottom: 7px;
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip .box-period form .boxes input {
            border-radius: 8px;
            border: 1px solid #C2C2C2;
            background: #FFF;
            padding: 12px 14px;
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
            width: 100%;
            position: relative;
            z-index: 2;
            background: transparent;
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip .box-period form .boxes select {
            border-radius: 8px;
            border: 1px solid #c2c2c2;
            padding: 12px 14px;
            width: 100%;
            background: url(../images/employee/arrow-top-popup.png) no-repeat right #fff;
            -webkit-appearance: none;
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
            background-position-x: calc(100% - 14px);
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip .box-period form .boxes .left {
            width: calc(50% - 11px);
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip .box-period form .boxes .left .period-range {
                position: relative;
            }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip .box-period form .boxes .left .period-range svg {
                    position: absolute;
                    right: 14px;
                    bottom: 14px;
                    z-index: 1;
                }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip .box-period form .boxes .right {
            width: calc(50% - 11px);
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip .box-period form .boxes .right .list-employee {
                margin: 0;
            }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip .box-period form button {
        border: none;
        display: flex;
        width: 107px;
        padding: 6px 25px;
        justify-content: center;
        align-items: center;
        gap: 4px;
        border-radius: 6px;
        background: #0089ED;
        color: #FFF;
        text-align: center;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 21px;
        letter-spacing: -0.084px;
        margin: 12px 0 18px;
    }

.main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip {
    border-color: transparent;
    height: unset !important;
}

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .k-grid-header {
        padding: 0 !important;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .k-grid-content {
        overflow-y: visible;
        height: unset !important;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip table {
        border-collapse: collapse;
        width: 100%;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip table td {
            padding: 0;
            vertical-align: top;
            border: none;
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip table thead tr {
            border: none;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip table thead tr th {
                border: none;
                background: #D9D9D9;
                padding-top: 12px;
                padding-bottom: 12px;
                padding-left: 8px;
                padding-right: 8px;
                color: #0A0A0A;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: 18px;
                text-align: left;
            }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip table thead tr th span {
                    margin: 0;
                }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip table thead tr th:nth-child(1) {
                    padding-left: 17px;
                }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip table thead tr th[data-field=Paid] {
                    text-align: center;
                }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip table thead tr th:last-child {
                    padding-right: 17px;
                    text-align: center;
                }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip table tbody td:last-child {
            text-align: center;
        }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .k-pager.k-grid-pager {
        display: none;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip tr:first-child .box-data-employe {
        padding-top: 32px;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip tr:nth-child(even) {
        background: #F2F2F2;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip span {
        display: block;
        color: #0A0A0A;
        font-family: Poppins;
        font-size: 10px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
        padding: 0;
        margin: 0;
        margin-bottom: 3px;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip input {
        width: 41px;
        height: 18px;
        flex-shrink: 0;
        border-radius: 4px;
        border: 1px solid #c2c2c2;
        text-align: right;
        padding: 0;
        padding-right: 4px;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip input[type=number]::-webkit-outer-spin-button,
        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip input[type=number]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip input[type=number][type=number] {
            -moz-appearance: textfield;
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip input[type=number]:hover::-webkit-outer-spin-button,
        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip input[type=number]:hover::-webkit-inner-spin-button {
            background: none;
        }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-employe {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding-top: 32px;
        padding-left: 17px;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-employe .box-text span {
            display: block;
            margin: 0;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-employe .box-text span.status {
                color: #F0B732;
                font-family: Poppins;
                font-size: 10px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-employe .box-text span.salary {
                color: #404040;
                font-family: Poppins;
                font-size: 10px;
                font-style: normal;
                font-weight: 500;
                line-height: 24px;
                letter-spacing: -0.11px;
            }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-employe .box-text span.salary svg {
                    margin-right: 3px;
                }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-hours {
        padding: 11px 8px;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-hours-time {
        padding: 11px 8px;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-leave {
        padding: 11px 8px;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-leave2 {
        padding: 11px 8px;
        margin-right: 35px;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-leave2 .box-leave2 {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-leave2 .box-leave2 span {
                text-align: right;
            }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-leave2 .box-leave2 span.leaveData2,
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-leave2 .box-leave2 span.leaveData3,
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-leave2 .box-leave2 span.leaveData4 {
                    padding-right: 4px;
                }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-sick-leave {
        padding: 11px 8px;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-sick-leave2 {
        padding: 11px 8px;
        margin-right: 25px;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-sick-leave2 input {
            width: 41px;
            height: 18px;
            flex-shrink: 0;
            border-radius: 4px;
            border: 1px solid #c2c2c2;
            text-align: right;
            padding: 0;
            padding-right: 4px;
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-sick-leave2 .box-sick-leave2 {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-sick-leave2 .box-sick-leave2 span {
                text-align: right;
            }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-sick-leave2 .box-sick-leave2 span.leaveData2,
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-sick-leave2 .box-sick-leave2 span.leaveData3,
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-sick-leave2 .box-sick-leave2 span.leaveData4 {
                    padding-right: 4px;
                }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-total {
        padding: 11px 8px;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-total .box-total {
            display: flex;
            flex-wrap: wrap;
        }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-tax {
        padding: 11px 8px;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-tax input {
            width: 57px;
            height: 18px;
            flex-shrink: 0;
            border-radius: 4px;
            border: 1px solid #c2c2c2;
            text-align: right;
            padding: 0;
            padding-right: 4px;
        }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-paid {
        padding: 11px 8px;
        text-align: center;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-paid .box-paid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-cash {
        padding: 11px 8px;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-cash span {
            position: relative;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-cash span::before {
                content: "$";
                position: absolute;
                top: 1px;
                left: 26px;
            }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-cash input {
            width: 57px;
            height: 18px;
            flex-shrink: 0;
            border-radius: 4px;
            border: 1px solid #c2c2c2;
            text-align: right;
            padding: 0;
            padding-right: 4px;
            color: #0A0A0A;
            font-family: Poppins;
            font-size: 10px;
            font-style: normal;
            font-weight: 500;
            line-height: 18px;
        }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-transfer {
        padding: 11px 8px;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-transfer span {
            position: relative;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-transfer span::before {
                content: "$";
                position: absolute;
                top: 1px;
                left: 26px;
            }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-transfer input {
            width: 57px;
            height: 18px;
            flex-shrink: 0;
            border-radius: 4px;
            border: 1px solid #c2c2c2;
            text-align: right;
            padding: 0;
            padding-right: 4px;
            color: #0A0A0A;
            font-family: Poppins;
            font-size: 10px;
            font-style: normal;
            font-weight: 500;
            line-height: 18px;
        }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-payslip .box-data-super {
        padding: 11px 8px;
    }

.main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-footer-payslip {
    margin-top: 22px;
    border: none;
    height: unset !important;
}

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-footer-payslip .k-grid-header {
        display: none;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-footer-payslip .k-grid-pager {
        display: none;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-footer-payslip .k-grid td,
    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-footer-payslip .k-grid .k-grid-content,
    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-footer-payslip .k-grid .k-grid-header-locked,
    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-footer-payslip .k-grid .k-grid-content-locked {
        border-color: #dee2e6;
        border: none;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-footer-payslip .k-grid-content {
        height: unset !important;
        overflow: unset;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-footer-payslip table {
        border-collapse: collapse;
        width: 100%;
        border-radius: 8px;
        background: #B1CDF3;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-footer-payslip table td {
            border: none;
            padding: 13px 12px;
            color: #000;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-footer-payslip table td.Paid {
                text-align: center;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-footer-payslip table td:nth-child(1),
            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip #kendo-footer-payslip table td:nth-child(2) {
                font-weight: 500;
            }

.main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip .box-btn-payslip {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: 172px;
    width: 100%;
}

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip .box-btn-payslip button.generate-payslip {
        margin-top: 20px;
        display: flex;
        width: 196px;
        padding: 6px 25px;
        justify-content: flex-end;
        align-items: center;
        gap: 4px;
        border-radius: 6px;
        border: 1px solid #0089ED;
        background: #D0E1F8;
        color: #000;
        text-align: center;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 21px;
        letter-spacing: -0.084px;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip .box-btn-payslip button.generate-payslip svg {
            margin-right: 15px;
        }

.main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip .box-period {
    width: 100%;
}

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip .box-period form .boxes {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip .box-period form .boxes label {
            display: block;
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.072px;
            margin-bottom: 7px;
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip .box-period form .boxes input {
            border-radius: 8px;
            border: 1px solid #C2C2C2;
            background: #FFF;
            padding: 12px 14px;
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
            width: 100%;
            position: relative;
            z-index: 2;
            background: transparent;
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip .box-period form .boxes select {
            border-radius: 8px;
            border: 1px solid #c2c2c2;
            padding: 12px 14px;
            width: 100%;
            background: url(../images/employee/arrow-top-popup.png) no-repeat right #fff;
            -webkit-appearance: none;
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
            background-position-x: calc(100% - 14px);
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip .box-period form .boxes .left {
            width: calc(33.33% - 11px);
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip .box-period form .boxes .left .list-employee {
                margin: 0;
            }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip .box-period form .boxes .center {
            width: calc(33.33% - 11px);
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip .box-period form .boxes .center .list-employee {
                margin: 0;
            }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip .box-period form .boxes .right {
            position: relative;
            width: calc(33.33% - 11px);
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip .box-period form .boxes .right input {
                padding-left: 50px;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip .box-period form .boxes .right ::-webkit-input-placeholder {
                color: #9E9E9E;
                font-family: Inter;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
                letter-spacing: -0.176px;
                position: relative;
                top: 2px;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip .box-period form .boxes .right :-ms-input-placeholder {
                color: #9E9E9E;
                font-family: Inter;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
                letter-spacing: -0.176px;
                position: relative;
                top: 2px;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip .box-period form .boxes .right ::placeholder {
                color: #9E9E9E;
                font-family: Inter;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
                letter-spacing: -0.176px;
                position: relative;
                top: 2px;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip .box-period form .boxes .right button {
                margin: 0;
                padding: 5px 10px;
                border: none;
                position: absolute;
                z-index: 3;
                left: 17px;
                top: 40px;
                background: transparent;
            }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip .box-period form .box-btn-generated-payslip {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        width: 100%;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip .box-period form .box-btn-generated-payslip button.generate-payslip {
            display: flex;
            width: 154px;
            width: 164px;
            padding: 6px 25px;
            justify-content: flex-end;
            align-items: center;
            gap: 4px;
            border-radius: 6px;
            border: 1px solid #FD314D;
            background: #FFD6DB;
            color: #FD314D;
            text-align: center;
            font-family: Inter;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.084px;
            margin-top: 56px;
            margin-bottom: 19px;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip .box-period form .box-btn-generated-payslip button.generate-payslip svg {
                margin-right: 12px;
            }

.main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip {
    border-color: transparent;
    height: unset !important;
}

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip .k-grid-header {
        padding: 0 !important;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip > .k-grid-content {
        overflow-y: visible;
        height: unset !important;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip table {
        border-collapse: collapse;
        width: 100%;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip table td {
            padding: 0;
            vertical-align: top;
            border: none;
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip table thead tr {
            border: none;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip table thead tr th {
                border: none;
                background: #D9D9D9;
                padding: 12px;
                color: #0A0A0A;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: 18px;
                text-align: left;
            }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip table thead tr th span {
                    margin: 0;
                }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip table thead tr th[data-field=Hours],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip table thead tr th[data-field=Total],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip table thead tr th[data-field=Tax],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip table thead tr th[data-field=AmountPaid],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip table thead tr th[data-field=Cash],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip table thead tr th[data-field=Transfer],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip table thead tr th[data-field=GenerateDate],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip table thead tr th[data-field=GenerateBtn] {
                    border-left: 1px solid #C2C2C2;
                    text-align: center;
                }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip table thead tr th[data-field=GenerateDate] {
                    color: transparent;
                }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip table thead tr th:nth-child(1) {
                    padding-left: 17px;
                }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip table thead tr th:last-child {
                    padding-right: 17px;
                }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip table tbody td {
            vertical-align: middle;
            text-align: right;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip table tbody td span {
                position: relative;
                right: 5px;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip table tbody td.GenerateDate {
                text-align: center;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip table tbody td.GenerateBtn {
                text-align: center;
            }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip table tbody td.GenerateBtn svg {
                    border-radius: 6px;
                    border: 1px solid #0089ED;
                    padding: 6px 19px;
                    align-items: center;
                    gap: 4px;
                    text-align: center;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    margin: 0 auto;
                }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip .k-pager.k-grid-pager {
        display: none;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip tr:nth-child(even) {
        background: #F2F2F2;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip tr:last-child {
        border-bottom: 1px solid #E0E0E0;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip span {
        display: block;
        color: #0A0A0A;
        font-family: Poppins;
        font-size: 10px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
        padding: 0;
        margin: 0;
        margin-bottom: 3px;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip input {
        width: 41px;
        height: 18px;
        flex-shrink: 0;
        border-radius: 4px;
        border: 1px solid #c2c2c2;
        text-align: right;
        padding: 0;
        padding-right: 4px;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip input[type=number]::-webkit-outer-spin-button,
        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip input[type=number]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip input[type=number][type=number] {
            -moz-appearance: textfield;
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip input[type=number]:hover::-webkit-outer-spin-button,
        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip input[type=number]:hover::-webkit-inner-spin-button {
            background: none;
        }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip .box-data-employe {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip .box-data-employe .box-text span {
            display: block;
            margin: 0;
            position: static;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip .box-data-employe .box-text span.status {
                color: #F0B732;
                font-family: Poppins;
                font-size: 10px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip .box-data-employe .box-text span.salary {
                color: #404040;
                font-family: Poppins;
                font-size: 10px;
                font-style: normal;
                font-weight: 500;
                line-height: 24px;
                letter-spacing: -0.11px;
            }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip #kendo-generated-payslip .box-data-employe .box-text span.salary svg {
                    margin-right: 3px;
                }

.main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip nav.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
}

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip nav.pagination .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: end;
        align-items: center;
        padding: 8px 16px;
        gap: 8px;
        background: #fff;
        width: 100%;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip nav.pagination .container .icon-prev button {
            display: flex;
            flex-wrap: wrap;
            padding: 8px;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            background: #fff;
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip nav.pagination .container .text-prev button,
        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip nav.pagination .container .text-next button {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            height: 32px;
            padding: 8px;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            background: #fff;
            color: #616161;
            text-align: center;
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
            line-height: 1.3;
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip nav.pagination .container .text-next {
            margin-right: 16px;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip nav.pagination .container .text-next button {
                background: #0089ED;
                color: #fff;
                border: none;
            }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip nav.pagination .container .search-page {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip nav.pagination .container .search-page label {
                color: #404040;
                text-align: center;
                font-family: Inter;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 21px;
                letter-spacing: -0.084px;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip nav.pagination .container .search-page input {
                display: flex;
                flex-wrap: wrap;
                width: 68px;
                height: 32px;
                padding: 8px;
                align-items: center;
                border-radius: 8px;
                border: 1px solid #e0e0e0;
                background: #fff;
                color: #616161;
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
            }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip nav.pagination .container .total-user {
            color: #4F4F4F;
            text-align: center;
            font-family: Inter;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.084px;
            margin-right: 16px;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip nav.pagination .container .total-user span.number {
                color: #0089ED;
            }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.generated-payslip nav.pagination .container .total-row {
            display: flex;
            height: 32px;
            padding: 8px;
            align-items: center;
            gap: 8px;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            background: #fff;
            color: #616161;
            text-align: center;
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
        }

.main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip .box-period {
    width: 100%;
}

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip .box-period form .boxes {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip .box-period form .boxes label {
            display: block;
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.072px;
            margin-bottom: 7px;
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip .box-period form .boxes input {
            border-radius: 8px;
            border: 1px solid #C2C2C2;
            background: #FFF;
            padding: 12px 14px;
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
            width: 100%;
            position: relative;
            z-index: 2;
            background: transparent;
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip .box-period form .boxes select {
            border-radius: 8px;
            border: 1px solid #c2c2c2;
            padding: 12px 14px;
            width: 100%;
            background: url(../images/employee/arrow-top-popup.png) no-repeat right #fff;
            -webkit-appearance: none;
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
            background-position-x: calc(100% - 14px);
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip .box-period form .boxes .left {
            width: calc(33.33% - 11px);
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip .box-period form .boxes .left .list-employee {
                margin: 0;
            }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip .box-period form .boxes .center {
            width: calc(33.33% - 11px);
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip .box-period form .boxes .center .list-employee {
                margin: 0;
            }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip .box-period form .boxes .right {
            position: relative;
            width: calc(33.33% - 11px);
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip .box-period form .boxes .right input {
                padding-left: 50px;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip .box-period form .boxes .right ::-webkit-input-placeholder {
                color: #9E9E9E;
                font-family: Inter;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
                letter-spacing: -0.176px;
                position: relative;
                top: 2px;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip .box-period form .boxes .right :-ms-input-placeholder {
                color: #9E9E9E;
                font-family: Inter;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
                letter-spacing: -0.176px;
                position: relative;
                top: 2px;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip .box-period form .boxes .right ::placeholder {
                color: #9E9E9E;
                font-family: Inter;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
                letter-spacing: -0.176px;
                position: relative;
                top: 2px;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip .box-period form .boxes .right button {
                margin: 0;
                padding: 5px 10px;
                border: none;
                position: absolute;
                z-index: 3;
                left: 17px;
                top: 40px;
                background: transparent;
            }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip .box-period form .box-btn-void-payslip {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        width: 100%;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip .box-period form .box-btn-void-payslip button.delete {
            display: flex;
            width: 125px;
            padding: 6px 25px;
            justify-content: flex-end;
            align-items: center;
            gap: 4px;
            border-radius: 6px;
            border: 1px solid #FD314D;
            background: #FFD6DB;
            color: #FD314D;
            text-align: center;
            font-family: Inter;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.084px;
            margin-top: 56px;
            margin-bottom: 14px;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip .box-period form .box-btn-void-payslip button.delete svg {
                margin-right: 12px;
            }

.main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip {
    border-color: transparent;
    height: unset !important;
}

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip .k-grid-header {
        padding: 0 !important;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip > .k-grid-content {
        overflow-y: visible;
        height: unset !important;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip table {
        border-collapse: collapse;
        width: 100%;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip table td {
            padding: 0;
            vertical-align: top;
            border: none;
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip table thead tr {
            border: none;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip table thead tr th {
                border: none;
                background: #D9D9D9;
                padding: 12px;
                color: #0A0A0A;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: 18px;
                text-align: left;
            }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip table thead tr th span {
                    margin: 0;
                }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip table thead tr th[data-field=Employee],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip table thead tr th[data-field=VoidDate],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip table thead tr th[data-field=Hours],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip table thead tr th[data-field=Earnings],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip table thead tr th[data-field=Tax],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip table thead tr th[data-field=NetPay],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip table thead tr th[data-field=AmountPaid] {
                    border-left: 1px solid #C2C2C2;
                    text-align: center;
                }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip table thead tr th[data-field=VoidDate] {
                    text-align: left;
                }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip table thead tr th:last-child {
                    padding-right: 17px;
                }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip table tbody td {
            padding: 12px;
            vertical-align: middle;
            text-align: right;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip table tbody td span {
                position: relative;
                right: 5px;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip table tbody td.VoidDate {
                text-align: left;
            }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip .k-pager.k-grid-pager {
        display: none;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip tr:nth-child(even) {
        background: #F2F2F2;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip tr:last-child {
        border-bottom: 1px solid #E0E0E0;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip span {
        display: block;
        color: #0A0A0A;
        font-family: Poppins;
        font-size: 10px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
        padding: 0;
        margin: 0;
        margin-bottom: 3px;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip input[type=number]::-webkit-outer-spin-button,
    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip input[type=number][type=number] {
        -moz-appearance: textfield;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip input[type=number]:hover::-webkit-outer-spin-button,
    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip input[type=number]:hover::-webkit-inner-spin-button {
        background: none;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip .box-data-employe {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip .box-data-employe .box-text span {
            display: block;
            margin: 0;
            position: static;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip .box-data-employe .box-text span.status {
                color: #F0B732;
                font-family: Poppins;
                font-size: 10px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip .box-data-employe .box-text span.salary {
                color: #404040;
                font-family: Poppins;
                font-size: 10px;
                font-style: normal;
                font-weight: 500;
                line-height: 24px;
                letter-spacing: -0.11px;
            }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip #kendo-void-payslip .box-data-employe .box-text span.salary svg {
                    margin-right: 3px;
                }

.main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip nav.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
}

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip nav.pagination .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: end;
        align-items: center;
        padding: 8px 16px;
        gap: 8px;
        background: #fff;
        width: 100%;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip nav.pagination .container .icon-prev button {
            display: flex;
            flex-wrap: wrap;
            padding: 8px;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            background: #fff;
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip nav.pagination .container .text-prev button,
        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip nav.pagination .container .text-next button {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            height: 32px;
            padding: 8px;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            background: #fff;
            color: #616161;
            text-align: center;
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
            line-height: 1.3;
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip nav.pagination .container .text-next {
            margin-right: 16px;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip nav.pagination .container .text-next button {
                background: #0089ED;
                color: #fff;
                border: none;
            }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip nav.pagination .container .search-page {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip nav.pagination .container .search-page label {
                color: #404040;
                text-align: center;
                font-family: Inter;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 21px;
                letter-spacing: -0.084px;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip nav.pagination .container .search-page input {
                display: flex;
                flex-wrap: wrap;
                width: 68px;
                height: 32px;
                padding: 8px;
                align-items: center;
                border-radius: 8px;
                border: 1px solid #e0e0e0;
                background: #fff;
                color: #616161;
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
            }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip nav.pagination .container .total-user {
            color: #4F4F4F;
            text-align: center;
            font-family: Inter;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.084px;
            margin-right: 16px;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip nav.pagination .container .total-user span.number {
                color: #0089ED;
            }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.void-payslip nav.pagination .container .total-row {
            display: flex;
            height: 32px;
            padding: 8px;
            align-items: center;
            gap: 8px;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            background: #fff;
            color: #616161;
            text-align: center;
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
        }

.main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip .box-period {
    width: 100%;
    margin-bottom: 37px;
}

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip .box-period form .boxes {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip .box-period form .boxes label {
            display: block;
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.072px;
            margin-bottom: 7px;
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip .box-period form .boxes input {
            border-radius: 8px;
            border: 1px solid #C2C2C2;
            background: #FFF;
            padding: 12px 14px;
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
            width: 100%;
            position: relative;
            z-index: 2;
            background: transparent;
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip .box-period form .boxes select {
            border-radius: 8px;
            border: 1px solid #c2c2c2;
            padding: 12px 14px;
            width: 100%;
            background: url(../images/employee/arrow-top-popup.png) no-repeat right #fff;
            -webkit-appearance: none;
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
            background-position-x: calc(100% - 14px);
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip .box-period form .boxes .left {
            width: calc(33.33% - 11px);
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip .box-period form .boxes .left .list-employee {
                margin: 0;
            }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip .box-period form .boxes .center {
            width: calc(33.33% - 11px);
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip .box-period form .boxes .center .list-employee {
                margin: 0;
            }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip .box-period form .boxes .right {
            position: relative;
            width: calc(33.33% - 11px);
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip .box-period form .boxes .right input {
                padding-left: 50px;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip .box-period form .boxes .right ::-webkit-input-placeholder {
                color: #9E9E9E;
                font-family: Inter;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
                letter-spacing: -0.176px;
                position: relative;
                top: 2px;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip .box-period form .boxes .right :-ms-input-placeholder {
                color: #9E9E9E;
                font-family: Inter;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
                letter-spacing: -0.176px;
                position: relative;
                top: 2px;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip .box-period form .boxes .right ::placeholder {
                color: #9E9E9E;
                font-family: Inter;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
                letter-spacing: -0.176px;
                position: relative;
                top: 2px;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip .box-period form .boxes .right button {
                margin: 0;
                padding: 5px 10px;
                border: none;
                position: absolute;
                z-index: 3;
                left: 17px;
                top: 40px;
                background: transparent;
            }

.main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip {
    border-color: transparent;
    height: unset !important;
}

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip .k-grid-header {
        padding: 0 !important;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip .k-grid-content {
        overflow-y: visible;
        height: unset !important;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table {
        border-collapse: collapse;
        width: 100%;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table td {
            padding: 0;
            vertical-align: top;
            border: none;
        }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table thead tr {
            border: none;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table thead tr th {
                border: none;
                background: #D9D9D9;
                padding: 12px;
                color: #0A0A0A;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: 18px;
                text-align: left;
            }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table thead tr th span {
                    margin: 0;
                }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table thead tr th[data-field=Employee],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table thead tr th[data-field=Period],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table thead tr th[data-field=Hours],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table thead tr th[data-field=Total],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table thead tr th[data-field=Tax],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table thead tr th[data-field=Paid],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table thead tr th[data-field=Cash],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table thead tr th[data-field=Transfer],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table thead tr th[data-field=VoidDate] {
                    border-left: 1px solid #C2C2C2;
                    text-align: center;
                }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table thead tr th[data-field=Employee],
                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table thead tr th[data-field=Period] {
                    text-align: left;
                }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table thead tr th[data-field=BtnGenerate] {
                    color: transparent;
                }

                    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table thead tr th[data-field=BtnGenerate] span {
                        color: transparent;
                    }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table thead tr th:last-child {
                    padding-right: 17px;
                }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table tbody td {
            padding: 12px;
            vertical-align: middle;
            text-align: right;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table tbody td span {
                position: relative;
                right: 5px;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table tbody td.Period {
                text-align: left;
            }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table tbody td.Period span {
                    position: static;
                }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip table tbody td.BtnGenerate button {
                display: flex;
                width: 100px;
                padding: 3px 12px;
                justify-content: center;
                align-items: center;
                border-radius: 6px;
                border: 1px solid #0089ED;
                color: #0089ED;
                text-align: center;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 21px;
                letter-spacing: -0.072px;
            }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip .k-pager.k-grid-pager {
        display: none;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip tr:nth-child(even) {
        background: #F2F2F2;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip tr:last-child {
        border-bottom: 1px solid #E0E0E0;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip span {
        display: block;
        color: #0A0A0A;
        font-family: Poppins;
        font-size: 10px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
        padding: 0;
        margin: 0;
        margin-bottom: 3px;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip input[type=number]::-webkit-outer-spin-button,
    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip input[type=number][type=number] {
        -moz-appearance: textfield;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip input[type=number]:hover::-webkit-outer-spin-button,
    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip input[type=number]:hover::-webkit-inner-spin-button {
        background: none;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip .box-data-employe {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip .box-data-employe .box-text span {
            display: block;
            margin: 0;
            position: static;
        }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip .box-data-employe .box-text span.status {
                color: #F0B732;
                font-family: Poppins;
                font-size: 10px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
            }

            .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip .box-data-employe .box-text span.salary {
                color: #404040;
                font-family: Poppins;
                font-size: 10px;
                font-style: normal;
                font-weight: 500;
                line-height: 24px;
                letter-spacing: -0.11px;
            }

                .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.outstanding-payslip #kendo-outstanding-payslip .box-data-employe .box-text span.salary svg {
                    margin-right: 3px;
                }

@media only screen and (max-width: 992px) {
    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .box-info-employees .box-tabs {
        overflow-y: auto;
        margin-bottom: 20px;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .box-info-employees .box-tabs ul {
            width: 580px;
            padding-bottom: 10px;
            gap: 10px;
        }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes {
        gap: 12px;
    }

        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes .left,
        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes .center,
        .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent .box-period form .boxes .right {
            width: 100% !important;
        }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .box-info-employees {
        padding: 12px;
        margin: 12px;
        margin-top: 0;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent #kendo-payslip table {
        width: 100% !important;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent.payslip .box-btn-payslip {
        margin-bottom: 25px;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent #kendo-generated-payslip table {
        width: 100% !important;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent #kendo-void-payslip table {
        width: 100% !important;
    }

    .main-dashboard.main-payslip .mycontainer .myrow-one section.content .boxes.mycontent #kendo-outstanding-payslip table {
        width: 100% !important;
    }
}
/* >>>>>>>> Productivity Report >>>>>>>> */

.main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-title h1 {
    color: #404040;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 21px;
    /* 105% */

    letter-spacing: -0.12px;
    margin: 0;
}

.main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees {
    padding: 16px 32px;
    margin: 0 31px 11px 31px;
    background: #fff;
    border-radius: 8px;
}

    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-mytitle {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 13px;
        width: 100%;
    }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-mytitle .box-heading {
            padding: 0;
        }

            .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-mytitle .box-heading h2 {
                margin: 0;
                color: #0A0A0A;
                font-family: Poppins;
                font-size: 16px;
                font-style: normal;
                font-weight: 700;
                line-height: 24px;
                letter-spacing: -0.176px;
            }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-mytitle .box-period {
            width: 312px;
        }

            .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-mytitle .box-period form .boxes {
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-end;
            }

                .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-mytitle .box-period form .boxes label {
                    display: block;
                    color: #404040;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                    margin-bottom: 7px;
                }

                .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-mytitle .box-period form .boxes input {
                    border-radius: 8px;
                    border: 1px solid #C2C2C2;
                    background: #FFF;
                    padding: 12px 14px;
                    color: #404040;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                    width: 100%;
                    position: relative;
                    z-index: 2;
                    background: transparent;
                }

                .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-mytitle .box-period form .boxes select {
                    border-radius: 8px;
                    border: 1px solid #c2c2c2;
                    padding: 12px 14px;
                    width: 100%;
                    background: url(../images/employee/arrow-top-popup.png) no-repeat right #fff;
                    -webkit-appearance: none;
                    color: #404040;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                    background-position-x: calc(100% - 14px);
                }

                .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-mytitle .box-period form .boxes .box-period-range .period-range {
                    position: relative;
                }

                .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-mytitle .box-period form .boxes .box-period-range svg {
                    position: absolute;
                    right: 14px;
                    bottom: 14px;
                    z-index: 1;
                }

    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .left {
            width: 30%;
        }

            .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .left .box-select {
                margin-bottom: 34px;
            }

                .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .left .box-select select {
                    display: flex;
                    width: 154px;
                    height: 32px;
                    padding: 8px;
                    align-items: center;
                    gap: 107px;
                    flex-shrink: 0;
                    border-radius: 8px;
                    border: 1px solid #E0E0E0;
                    background: #fff;
                    background: url(../images/employee/arrow-top-popup.png) no-repeat right #fff;
                    -webkit-appearance: none;
                    background-position-x: calc(100% - 9px);
                    color: #616161;
                    font-family: Inter;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 18px;
                }

            .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .left .box-infomartion {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                margin-top: 17px;
            }

                .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .left .box-infomartion .info1 {
                    margin-right: 45px;
                }

                    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .left .box-infomartion .info1 .boxes {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
                    }

                        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .left .box-infomartion .info1 .boxes .border svg {
                            margin-right: 11px;
                        }

                        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .left .box-infomartion .info1 .boxes .text span.info-text1,
                        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .left .box-infomartion .info1 .boxes .text span.info-text2 {
                            display: block;
                            color: #6C6C6C;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 24px;
                            letter-spacing: -0.132px;
                        }

                            .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .left .box-infomartion .info1 .boxes .text span.info-text1 span.color,
                            .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .left .box-infomartion .info1 .boxes .text span.info-text2 span.color {
                                color: #0089ED;
                                font-weight: 500;
                            }

                .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .left .box-infomartion .info2 .boxes {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                }

                    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .left .box-infomartion .info2 .boxes .border svg {
                        margin-right: 11px;
                    }

                    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .left .box-infomartion .info2 .boxes .text span.info-text1,
                    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .left .box-infomartion .info2 .boxes .text span.info-text2 {
                        display: block;
                        color: #6C6C6C;
                        font-family: Poppins;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 24px;
                        letter-spacing: -0.132px;
                    }

                        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .left .box-infomartion .info2 .boxes .text span.info-text1 span.color,
                        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .left .box-infomartion .info2 .boxes .text span.info-text2 span.color {
                            color: #0089ED;
                            font-weight: 500;
                        }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .right {
            width: 63%;
        }

            .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .right .box-info-color {
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-end;
            }

                .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .right .box-info-color .box-color {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 17px;
                }

                    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .right .box-info-color .box-color .hour {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                    }

                        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .right .box-info-color .box-color .hour .border {
                            width: 15px;
                            height: 15px;
                            background: #8C179F;
                            border-radius: 100%;
                            margin-right: 11px;
                        }

                        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .right .box-info-color .box-color .hour .text {
                            color: #6C6C6C;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 24px;
                            letter-spacing: -0.132px;
                        }

                    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .right .box-info-color .box-color .cost {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                    }

                        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .right .box-info-color .box-color .cost .border {
                            width: 15px;
                            height: 15px;
                            background: #0089ED;
                            border-radius: 100%;
                            margin-right: 11px;
                        }

                        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .right .box-info-color .box-color .cost .text {
                            color: #6C6C6C;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 24px;
                            letter-spacing: -0.132px;
                        }

.main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees1 {
    margin-bottom: 17px;
}

    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees1 .box-info1 .box-chartjs .left .box-canva {
        width: 72%;
    }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees1 .box-info1 .box-chartjs .left .box-canva #chartTypeDoughnut1 {
            transform: rotate(-20deg);
        }

.main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-mytitle {
    margin-bottom: 0;
}

.main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left #chartTypeDoughnut2 {
    transform: rotate(-20deg);
}

.main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .top .box-canva {
        width: 50%;
    }

    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .top .text {
        width: 33%;
    }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .top .text span {
            display: block;
            margin-bottom: 4px;
        }

            .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .top .text span.info-text {
                color: #404040;
                font-family: Poppins;
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                letter-spacing: -0.096px;
            }

            .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .top .text span.info-number {
                color: #0A0A0A;
                font-family: Inter;
                font-size: 28px;
                font-style: normal;
                font-weight: 500;
                line-height: 36px;
                letter-spacing: -0.588px;
            }

            .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .top .text span.info2 {
                margin-bottom: 22px;
            }

.main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .bottom {
    margin-top: 37px;
}

    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .bottom .box-infomartion {
        display: flex;
        flex-wrap: wrap;
        justify-content: unset;
    }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .bottom .box-infomartion .info-day .boxes .border {
            margin-bottom: 2px;
        }

            .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .bottom .box-infomartion .info-day .boxes .border svg {
                margin-right: 11px;
            }

            .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .bottom .box-infomartion .info-day .boxes .border span {
                display: inline-block;
                color: #6C6C6C;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
                letter-spacing: -0.132px;
            }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .bottom .box-infomartion .info-day .boxes .info-detail {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
        }

            .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .bottom .box-infomartion .info-day .boxes .info-detail .hours svg {
                margin-right: 9px;
            }

            .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .bottom .box-infomartion .info-day .boxes .info-detail .hours span {
                display: inline-block;
                color: #404040;
                font-family: Poppins;
                font-size: 10px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
                letter-spacing: -0.11px;
            }

            .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .bottom .box-infomartion .info-day .boxes .info-detail .cost svg {
                margin-right: 3px;
            }

            .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .bottom .box-infomartion .info-day .boxes .info-detail .cost span {
                display: inline-block;
                color: #6C6C6C;
                font-family: Poppins;
                font-size: 10px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
                letter-spacing: -0.11px;
            }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .bottom .box-infomartion .weekday {
            margin-right: 75px;
            margin-bottom: 31px;
        }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .bottom .box-infomartion .public-holiday {
            margin-bottom: 31px;
        }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .bottom .box-infomartion .weekend {
            margin-right: 75px;
        }

.main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .right {
    margin-top: 65px;
}

@media only screen and (max-width: 1350px) {
    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left {
        width: 35%;
    }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .top {
            justify-content: unset;
        }

            .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .top .text {
                margin-left: 28px;
            }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .bottom .box-infomartion .weekday,
        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .bottom .box-infomartion .weekend {
            margin-right: 65px;
        }
}

@media only screen and (max-width: 1210px) {
    .main-dashboard.main-productivity-report .mycontainer .myrow-one aside.desktop,
    .main-dashboard.main-productivity-report .mycontainer .myrow-one aside.mobile {
        height: 222vh;
    }

    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs {
        flex-direction: column;
    }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .left {
            width: 50%;
            margin-bottom: 40px;
        }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .right {
            width: 100%;
            margin-top: 0px;
        }

    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs {
        flex-direction: column;
    }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left {
            width: 50%;
        }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .right {
            width: 100%;
        }
}

@media only screen and (max-width: 992px) {
    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees {
        padding: 12px;
        margin: 12px;
        margin-top: 0;
    }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .left .box-infomartion {
            justify-content: flex-start;
        }
}

@media only screen and (max-width: 888px) {
    .main-dashboard.main-productivity-report .mycontainer .myrow-one aside.desktop,
    .main-dashboard.main-productivity-report .mycontainer .myrow-one aside.mobile {
        height: 215vh;
    }

    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs {
        flex-direction: column;
    }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left {
            width: 65%;
        }
}

@media only screen and (max-width: 700px) {
    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-mytitle {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 12px;
    }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-mytitle .box-heading h2 {
            margin-bottom: 15px;
        }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-mytitle .box-period form .boxes {
            justify-content: flex-start;
        }
}

@media only screen and (max-width: 580px) {
    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees .box-info1 .box-chartjs .left {
        width: 100%;
    }

    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .top .box-canva {
        width: 72%;
    }

    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .top {
        flex-direction: column;
        gap: 25px;
    }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .top .text {
            margin-left: 0;
        }

    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .bottom .box-infomartion {
        flex-direction: column;
    }

        .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .left .bottom .box-infomartion .info-day {
            margin-bottom: 12px;
        }

    .main-dashboard.main-productivity-report .mycontainer .myrow-one section.content .box-info-employees2 .box-info1 .box-chartjs .right {
        margin: 0;
    }
}
/* >>>>>>>> register >>>>>>>> */

.main-register .mycontainer {
    background: #0089ED;
    height: 458px;
}

    .main-register .mycontainer .myrow-one {
        padding: 28px 75px 0;
    }

    .main-register .mycontainer .myrow-two {
        display: flex;
        justify-content: space-between;
        padding: 0 73px;
        gap: 60px;
    }

        .main-register .mycontainer .myrow-two .left {
            display: flex;
        }

            .main-register .mycontainer .myrow-two .left .box-text {
                max-width: 311px;
                margin-right: 53px;
            }

                .main-register .mycontainer .myrow-two .left .box-text h1 {
                    color: var(--white-color);
                    font-family: Poppins;
                    font-size: 34px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: normal;
                    margin-top: 36px;
                    margin-bottom: 0;
                }

                .main-register .mycontainer .myrow-two .left .box-text p.sub-title {
                    color: #FFF;
                    font-family: Poppins;
                    font-size: 24px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    margin: 0;
                    margin-bottom: 22px;
                }

                .main-register .mycontainer .myrow-two .left .box-text p {
                    color: var(--white-color);
                    font-family: Poppins;
                    font-size: 13px;
                    font-style: normal;
                    font-weight: 300;
                    line-height: normal;
                }

            .main-register .mycontainer .myrow-two .left .box-icon {
                margin-top: 18px;
            }

        .main-register .mycontainer .myrow-two .right .box-login {
            border-radius: 40px;
            background: var(--white-color);
            box-shadow: 0 4px 35px 0 rgba(0, 0, 0, 0.08);
            width: 539px;
            position: relative;
            bottom: 38px;
            padding: 44px;
            padding-bottom: 62px;
        }

            .main-register .mycontainer .myrow-two .right .box-login .text-welcome {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-bottom: 1px;
            }

                .main-register .mycontainer .myrow-two .right .box-login .text-welcome .left span:first-child {
                    color: #000;
                    font-family: Poppins;
                    font-size: 21px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    margin-right: 4px;
                }

                .main-register .mycontainer .myrow-two .right .box-login .text-welcome .left span:last-child {
                    color: #0187EA;
                    font-family: Poppins;
                    font-size: 21px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: normal;
                }

                .main-register .mycontainer .myrow-two .right .box-login .text-welcome .right span {
                    color: #8D8D8D;
                    font-family: Poppins;
                    font-size: 13px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    display: block;
                }

                .main-register .mycontainer .myrow-two .right .box-login .text-welcome .right a {
                    color: #0089ED;
                    font-family: Poppins;
                    font-size: 13px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    text-decoration: none;
                }

            .main-register .mycontainer .myrow-two .right .box-login .text-signup h2 {
                color: #000;
                font-family: Poppins;
                font-size: 55px;
                font-style: normal;
                font-weight: 500;
                line-height: normal;
                margin-top: 0;
                margin-bottom: 45px;
            }

            .main-register .mycontainer .myrow-two .right .box-login form ::-webkit-input-placeholder {
                color: #808080;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 300;
                line-height: normal;
            }

            .main-register .mycontainer .myrow-two .right .box-login form :-ms-input-placeholder {
                color: #808080;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 300;
                line-height: normal;
            }

            .main-register .mycontainer .myrow-two .right .box-login form ::placeholder {
                color: #808080;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 300;
                line-height: normal;
            }

            .main-register .mycontainer .myrow-two .right .box-login form label#email {
                color: #000;
                font-family: Poppins;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                margin-bottom: 13px;
                display: block;
            }

            .main-register .mycontainer .myrow-two .right .box-login form input#email {
                border-radius: 9px;
                border: 1px solid #adadad;
                background: #FFF;
                height: 57px;
                padding: 19px 25px;
                width: 100%;
                margin-bottom: 40px;
            }

                .main-register .mycontainer .myrow-two .right .box-login form input#email:focus {
                    outline: 1px solid #4285F4;
                }

            .main-register .mycontainer .myrow-two .right .box-login form label#password {
                color: #000;
                font-family: Poppins;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                margin-bottom: 13px;
                display: block;
            }

            .main-register .mycontainer .myrow-two .right .box-login form input#password {
                border-radius: 9px;
                border: 1px solid #ADADAD;
                background: #FFF;
                height: 57px;
                padding: 19px 25px;
                width: 100%;
                margin-bottom: 40px;
            }

                .main-register .mycontainer .myrow-two .right .box-login form input#password:focus {
                    outline: 1px solid #4285F4;
                }

            .main-register .mycontainer .myrow-two .right .box-login form label#password2 {
                color: #000;
                font-family: Poppins;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                margin-bottom: 13px;
                display: block;
            }

            .main-register .mycontainer .myrow-two .right .box-login form input#password2 {
                border-radius: 9px;
                border: 1px solid #ADADAD;
                background: #FFF;
                height: 57px;
                padding: 19px 25px;
                width: 100%;
                margin-bottom: 64px;
            }

                .main-register .mycontainer .myrow-two .right .box-login form input#password2:focus {
                    outline: 1px solid #4285F4;
                }

            .main-register .mycontainer .myrow-two .right .box-login form button#submit {
                border-radius: 10px;
                background: #0089ED;
                box-shadow: 0px 4px 19px 0px rgba(119, 147, 65, 0.3);
                height: 54px;
                text-align: center;
                color: #fff;
                font-family: Poppins;
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: normal;
                width: 100%;
                border: none;
                cursor: pointer;
            }

@media only screen and (max-width: 1300px) {
    .main-register .mycontainer .myrow-two .left {
        display: block;
    }

        .main-register .mycontainer .myrow-two .left .box-text {
            max-width: max-content;
            margin-right: 0;
        }
}

@media only screen and (max-width: 1024px) {
    .main-register .mycontainer .myrow-two {
        display: block;
        padding-bottom: 100px;
    }

        .main-register .mycontainer .myrow-two .left {
            display: flex;
            gap: 25px;
        }

        .main-register .mycontainer .myrow-two .right .box-login {
            bottom: 0;
        }
}

@media only screen and (max-width: 768px) {
    .main-register .mycontainer {
        height: 750px;
    }

        .main-register .mycontainer .myrow-one {
            padding: 0 30px;
            padding-top: 30px;
        }

        .main-register .mycontainer .myrow-two {
            padding: 0 30px;
            padding-bottom: 100px;
        }

            .main-register .mycontainer .myrow-two .left {
                display: block;
            }

                .main-register .mycontainer .myrow-two .left .box-icon {
                    margin: 20px 0;
                }

            .main-register .mycontainer .myrow-two .right .box-login {
                bottom: 0;
                width: auto;
                height: auto;
                padding: 30px;
            }
}

@media only screen and (max-width: 480px) {
    .main-register .mycontainer .myrow-two {
        padding: 0;
        padding-bottom: 100px;
    }

        .main-register .mycontainer .myrow-two > .left {
            padding: 0 30px;
        }

        .main-register .mycontainer .myrow-two .right .box-login {
            padding: 30px;
        }

            .main-register .mycontainer .myrow-two .right .box-login .text-welcome {
                display: block;
            }

                .main-register .mycontainer .myrow-two .right .box-login .text-welcome .right {
                    margin: 10px 0;
                }
}
/* >>>>>>>> roster >>>>>>>> */

.main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info {
    flex-direction: column;
    padding-bottom: 45px;
}

    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day {
        padding: 16px 32px;
        border-radius: 8px;
        background: #fff;
    }

        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day nav {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 26px;
        }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day nav ul {
                margin: 0;
                padding: 0;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                border-radius: 8px;
                border: 1px solid #a3a3a3;
                background: #fff;
            }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day nav ul li {
                    list-style: none;
                    padding: 6px 25px;
                    color: #404040;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    cursor: pointer;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day nav ul li.active {
                        background: #009716;
                        color: #fff;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day nav ul li#day.active {
                        border-radius: 8px 0 0 8px;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day nav ul li#week {
                        border-left: 1px solid #a3a3a3;
                        border-right: 1px solid #a3a3a3;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day nav ul li#month.active {
                        border-radius: 0 8px 8px 0;
                    }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day nav button.addShifts {
                text-decoration: none;
                border: none;
                display: flex;
                padding: 6px 16px;
                align-items: center;
                gap: 4px;
                border-radius: 6px;
                background: #0089ed;
                color: #f5f5f5;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                letter-spacing: -0.084px;
            }

        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-pagination {
            margin-bottom: 22px;
        }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-pagination .pagination {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
            }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-pagination .pagination .box1 button {
                    border: none;
                    background: #fff;
                    padding: 8px;
                    margin: 0;
                    margin-right: 21px;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-pagination .pagination .box1 .month-years {
                    color: #0a0a0a;
                    font-family: Poppins;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 24px;
                    letter-spacing: -0.176px;
                    margin-right: 21px;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-pagination .pagination .box2 span {
                    color: #0089ed;
                    text-align: center;
                    font-family: Inter;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                    cursor: pointer;
                }

        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-info-filter {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 16px;
        }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-info-filter .box1 button {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                padding: 10px 26px;
                border-radius: 8px;
                border: 1px solid #a3a3a3;
                background: #fff;
            }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-info-filter .box1 button svg {
                    margin-right: 6px;
                }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-info-filter .box2 {
                display: flex;
                flex-wrap: wrap;
                gap: 22px;
            }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-info-filter .box2 div {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-info-filter .box2 span.radius {
                    width: 15px;
                    height: 15px;
                    display: block;
                    stroke-width: 1px;
                    border: 1px solid #a3a3a3;
                    border-radius: 100%;
                    margin-right: 3px;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-info-filter .box2 span.text {
                    color: #6c6c6c;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 24px;
                    letter-spacing: -0.132px;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-info-filter .box2 .unpublished .radius {
                    background: #f5f5f5;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-info-filter .box2 .declined .radius {
                    background: #ffd6db;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-info-filter .box2 .declined svg {
                    position: relative;
                    left: 5px;
                    bottom: 3px;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-info-filter .box2 .published .radius {
                    background: #fcf1d6;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-info-filter .box2 .approved .radius {
                    background: 0 0;
                    border: none;
                    margin-right: 0;
                    position: relative;
                    right: 3px;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-info-filter .box2 .approved .radius svg {
                        width: 15px;
                        height: 15px;
                    }

        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container {
            border-radius: 8px;
            background: #FFF;
            box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.15);
        }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.one {
                display: flex;
                flex-wrap: wrap;
            }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.one .left {
                    width: 148px;
                    padding: 15px 24px;
                    border-right: 1px solid #D2D2D2;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.one .left .col.total {
                        margin-bottom: 8px;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.one .left .col.total span {
                            display: block;
                            color: #000;
                            font-family: Poppins;
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: 18px;
                        }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.one .left .col.cost {
                        width: 100px;
                        border-radius: 12px;
                        background: #0089ed;
                        margin-bottom: 4px;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        justify-content: space-between;
                        padding: 2px 15px;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.one .left .col.cost span {
                            display: block;
                            color: #FFF;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: 24px;
                            letter-spacing: -0.132px;
                        }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.one .left .col.info-user {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
                        gap: 3px;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.one .left .col.info-user span {
                            display: block;
                        }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.one .left .user {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        justify-content: center;
                        gap: 6px;
                        border-radius: 12px;
                        border: 1px solid #0089ED;
                        width: 48px;
                        height: 24px;
                        flex-shrink: 0;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.one .left .user span {
                            display: block;
                            color: #0089ED;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: 24px;
                            letter-spacing: -0.132px;
                        }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.one .left .duration {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        justify-content: center;
                        gap: 6px;
                        border-radius: 12px;
                        border: 1px solid #0089ED;
                        width: 48px;
                        height: 24px;
                        flex-shrink: 0;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.one .left .duration span {
                            display: block;
                            color: #0089ED;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: 24px;
                            letter-spacing: -0.132px;
                        }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.one .right {
                    width: calc(100% - 148px);
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    justify-content: center;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.one .right span {
                        display: block;
                        color: #000;
                        text-align: center;
                        font-family: Poppins;
                        font-size: 20px;
                        font-style: normal;
                        font-weight: 600;
                        line-height: 21px;
                        letter-spacing: -0.12px;
                    }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two {
                display: flex;
                flex-wrap: wrap;
                border-top: 1px solid #d2d2d2;
            }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two span {
                    display: block;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .time {
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: column;
                    background: #FFF;
                    padding-left: 23px;
                    padding-right: 23px;
                    position: relative;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .time::before {
                        content: "";
                        background: #d2d2d2;
                        width: 68px;
                        height: 1px;
                        position: absolute;
                        top: calc(50% - 1px);
                        left: 0;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .time span {
                        color: #404040;
                        text-align: center;
                        font-family: Poppins;
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 21px;
                        letter-spacing: -0.084px;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .time span.am,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .time span.pm {
                            height: 50%;
                            display: flex;
                            flex-wrap: wrap;
                            align-items: center;
                        }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .days .list-days {
                    padding: 4px 31.5px;
                    border: 1px solid #d2d2d2;
                    border-top: 0;
                    height: 30px;
                    text-align: center;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .days .list-days span {
                        color: #404040;
                        text-align: center;
                        font-family: Poppins;
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 21px;
                        letter-spacing: -0.084px;
                    }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .content {
                    display: flex;
                    flex-wrap: wrap;
                    width: calc(100% - 149px);
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .content span {
                        padding: 4px 31.5px;
                        padding: 4px 22px;
                        border-bottom: 1px solid #F5F5F5;
                        border-bottom: 1px solid #d2d2d2;
                        border-top: 0;
                        padding-top: 0;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .content .col {
                        width: 20%;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .content .col .list-row-content {
                            height: 30px;
                        }

                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .content .col .list-row-content:last-child {
                                border: none;
                            }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .content .col .mycontent {
                            padding-top: 0;
                            padding-bottom: 0;
                            border-radius: 8px;
                            height: 321px;
                            height: 330px;
                            position: relative;
                            z-index: 1;
                            padding-left: 29px;
                            padding-right: 29px;
                        }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .content .col1 span.list-row-content {
                        padding-right: 0;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .content .col1 .mycontent {
                        background: #F5F5F5;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .content .col2 span.list-row-content {
                        padding-right: 0;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .content .col2 .mycontent {
                        border: 1px solid #F0B732;
                        background: #FCF1D6;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .content .list-row-content p {
                        color: #000;
                        font-family: Poppins;
                        font-size: 10px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 18px;
                        display: block;
                        margin: 0;
                        margin-bottom: 1px;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .content .list-row-content p.status {
                            padding-top: 84px;
                        }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .content .list-row-content p.name {
                            color: #000;
                            font-family: Poppins;
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: 18px;
                        }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .content .list-row-content .boxes {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        justify-content: space-between;
                        padding: 0;
                        margin-top: 5px;
                        margin-bottom: 25px;
                        background: transparent;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .content .list-row-content .boxes p {
                            padding: 0;
                            display: flex;
                            flex-wrap: wrap;
                            align-items: center;
                            color: #000;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: 24px;
                            letter-spacing: -0.132px;
                        }

                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .content .list-row-content .boxes p svg {
                                margin-right: 6px;
                            }

                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .content .list-row-content .boxes p span {
                                padding: 0;
                                border: none;
                            }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .content .list-row-content p.hours {
                        color: #000;
                        font-family: Poppins;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 18px;
                        margin-bottom: 3px;
                        text-align: center;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.two .content .list-row-content p.total {
                        color: #000;
                        font-family: Poppins;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 18px;
                        text-align: center;
                    }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.there .box-info-color {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                border-top: 1px solid #d1d1d1;
                padding: 26px 29px;
            }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.there .box-info-color .box-color {
                    display: flex;
                    flex-wrap: wrap;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.there .box-info-color .box-color > div {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                    }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.there .box-info-color div .border {
                    width: 15px;
                    height: 15px;
                    background: #000;
                    border-radius: 100%;
                    margin-right: 3px;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.there .box-info-color div .text {
                    display: block;
                    margin-right: 20px;
                    color: #6C6C6C;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 24px;
                    letter-spacing: -0.132px;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.there .box-info-color div div.weekday .border {
                    background: #0089ED;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.there .box-info-color div div.saturday .border {
                    background: #F0B732;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.there .box-info-color div div.sunday .border {
                    background: #FE85D2;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.there .box-info-color div div.public-holiday .border {
                    background: #1A8E18;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.there .box-info-color .box-btn {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.there .box-info-color .box-btn button {
                        border: none;
                        width: 121px;
                        border-radius: 8px;
                        background: #0089ed;
                        padding: 8px 24px;
                        padding-right: 8px;
                        color: #fff;
                        font-family: Poppins;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 18px;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.there .box-info-color .box-btn button span.mark {
                            width: 21px;
                            height: 21px;
                            padding: 2px;
                            color: #0089ed;
                            background: #fff;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 500;
                            line-height: 18px;
                            display: flex;
                            flex-wrap: wrap;
                            align-items: center;
                            justify-content: center;
                            border-radius: 100%;
                            margin-left: 8px;
                        }

@media only screen and (max-width: 1350px) {
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day {
        width: 100%;
        overflow-y: auto;
    }

        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container {
            width: 1000px;
        }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.there {
                border-top: 1px solid #d2d2d2;
            }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-content-days .container .row.there .box-info-color {
                    width: max-content;
                    border: none;
                }
}

@media only screen and (max-width: 768px) {
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day {
        padding: 12px;
    }

        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-info-filter {
            flex-direction: column;
            gap: 15px;
        }
}

@media only screen and (max-width: 580px) {
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day nav {
        gap: 15px;
    }

        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day nav ul li {
            padding: 5px 15px;
        }

    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-pagination .pagination .box1 button {
        margin-right: 10px;
    }

    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-pagination .pagination .box1 .month-years {
        margin-right: 0;
        width: 100%;
        display: block;
        margin-top: 15px;
    }

    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-day .box-pagination .pagination {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

.main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info {
    flex-direction: column;
    padding-bottom: 45px;
}

    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week {
        padding: 16px 32px;
        border-radius: 8px;
        background: #fff;
    }

        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week nav {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 26px;
        }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week nav ul {
                margin: 0;
                padding: 0;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                border-radius: 8px;
                border: 1px solid #a3a3a3;
                background: #fff;
            }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week nav ul li {
                    list-style: none;
                    padding: 6px 25px;
                    color: #404040;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    cursor: pointer;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week nav ul li.active {
                        background: #009716;
                        color: #fff;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week nav ul li#day.active {
                        border-radius: 8px 0 0 8px;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week nav ul li#week {
                        border-left: 1px solid #a3a3a3;
                        border-right: 1px solid #a3a3a3;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week nav ul li#month.active {
                        border-radius: 0 8px 8px 0;
                    }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week nav button.addShifts {
                text-decoration: none;
                border: none;
                display: flex;
                padding: 6px 16px;
                align-items: center;
                gap: 4px;
                border-radius: 6px;
                background: #0089ed;
                color: #f5f5f5;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                letter-spacing: -0.084px;
            }

        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-pagination {
            margin-bottom: 22px;
        }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-pagination .pagination {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
            }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-pagination .pagination .box1 button {
                    border: none;
                    background: #fff;
                    padding: 8px;
                    margin: 0;
                    margin-right: 21px;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-pagination .pagination .box1 .month-years {
                    color: #0a0a0a;
                    font-family: Poppins;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 24px;
                    letter-spacing: -0.176px;
                    margin-right: 21px;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-pagination .pagination .box2 span {
                    color: #0089ed;
                    text-align: center;
                    font-family: Inter;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                    cursor: pointer;
                }

        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-info-filter {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 16px;
        }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-info-filter .box1 button {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                padding: 10px 26px;
                border-radius: 8px;
                border: 1px solid #a3a3a3;
                background: #fff;
            }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-info-filter .box1 button svg {
                    margin-right: 6px;
                }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-info-filter .box2 {
                display: flex;
                flex-wrap: wrap;
                gap: 22px;
            }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-info-filter .box2 div {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-info-filter .box2 span.radius {
                    width: 15px;
                    height: 15px;
                    display: block;
                    stroke-width: 1px;
                    border: 1px solid #a3a3a3;
                    border-radius: 100%;
                    margin-right: 3px;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-info-filter .box2 span.text {
                    color: #6c6c6c;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 24px;
                    letter-spacing: -0.132px;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-info-filter .box2 .unpublished .radius {
                    background: #f5f5f5;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-info-filter .box2 .declined .radius {
                    background: #ffd6db;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-info-filter .box2 .declined svg {
                    position: relative;
                    left: 5px;
                    bottom: 3px;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-info-filter .box2 .published .radius {
                    background: #fcf1d6;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-info-filter .box2 .approved .radius {
                    background: 0 0;
                    border: none;
                    margin-right: 0;
                    position: relative;
                    right: 3px;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-info-filter .box2 .approved .radius svg {
                        width: 15px;
                        height: 15px;
                    }

        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container {
            border-radius: 8px;
            background: #FFF;
            box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.15);
        }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one {
                display: flex;
                flex-wrap: wrap;
            }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .current {
                    background: #E0ECF5;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .sidebar-total {
                    width: 170px;
                    width: 204px;
                    height: 109px;
                    padding: 15px 24px;
                    border-right: 1px solid #d2d2d2;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .sidebar-total .col.total {
                        margin-bottom: 8px;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .sidebar-total .col.total span {
                            display: block;
                            color: #000;
                            font-family: Poppins;
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: 18px;
                        }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .sidebar-total .col.cost {
                        width: 100px;
                        width: 113px;
                        border-radius: 12px;
                        background: #0089ed;
                        margin-bottom: 4px;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        justify-content: space-between;
                        padding: 2px 15px;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .sidebar-total .col.cost span {
                            display: block;
                            color: #FFF;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: 24px;
                            letter-spacing: -0.132px;
                        }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .sidebar-total .col.info-user {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 3px;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .sidebar-total .col.info-user span {
                            display: block;
                        }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .sidebar-total .user {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        justify-content: center;
                        gap: 6px;
                        border-radius: 12px;
                        border: 1px solid #0089ED;
                        min-width: 48px;
                        flex-shrink: 0;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .sidebar-total .user span {
                            display: block;
                            color: #0089ED;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: 24px;
                            letter-spacing: -0.132px;
                        }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .sidebar-total .duration {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        justify-content: center;
                        gap: 6px;
                        border-radius: 12px;
                        border: 1px solid #0089ed;
                        padding: 0 11px;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .sidebar-total .duration span {
                            display: block;
                            color: #0089ED;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: 24px;
                            letter-spacing: -0.132px;
                        }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day1,
                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day2,
                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day3,
                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day4,
                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day5,
                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day6,
                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day7 {
                    width: 126px;
                    width: 127px;
                    padding: 5px 0;
                    border-right: 1px solid #E4E5E5;
                    border-bottom: 1px solid #E4E5E5;
                    height: 109px;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day1 .date,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day2 .date,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day3 .date,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day4 .date,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day5 .date,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day6 .date,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day7 .date {
                        margin-bottom: 15px;
                        border-bottom: 1px solid #e4e5e5;
                        padding-left: 11px;
                        padding-right: 11px;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day1 .date span.text,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day2 .date span.text,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day3 .date span.text,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day4 .date span.text,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day5 .date span.text,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day6 .date span.text,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day7 .date span.text {
                            display: block;
                            color: #404040;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 500;
                            line-height: 18px;
                            margin-bottom: 5px;
                            margin-bottom: 2px;
                            text-align: center;
                        }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day1 .date span.border,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day2 .date span.border,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day3 .date span.border,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day4 .date span.border,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day5 .date span.border,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day6 .date span.border,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day7 .date span.border {
                            background: #0089ed;
                            width: 80px;
                            height: 4px;
                            display: block;
                            position: relative;
                            top: 3px;
                            left: 9px;
                            border-radius: 8px;
                        }

                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day1 .date span.border.public-holiday,
                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day2 .date span.border.public-holiday,
                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day3 .date span.border.public-holiday,
                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day4 .date span.border.public-holiday,
                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day5 .date span.border.public-holiday,
                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day6 .date span.border.public-holiday,
                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day7 .date span.border.public-holiday {
                                background: #009716;
                            }

                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day1 .date span.border.saturday,
                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day2 .date span.border.saturday,
                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day3 .date span.border.saturday,
                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day4 .date span.border.saturday,
                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day5 .date span.border.saturday,
                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day6 .date span.border.saturday,
                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day7 .date span.border.saturday {
                                background: #F0B732;
                            }

                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day1 .date span.border.sunday,
                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day2 .date span.border.sunday,
                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day3 .date span.border.sunday,
                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day4 .date span.border.sunday,
                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day5 .date span.border.sunday,
                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day6 .date span.border.sunday,
                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day7 .date span.border.sunday {
                                background: #FE85D2;
                            }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day1 .boxes,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day2 .boxes,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day3 .boxes,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day4 .boxes,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day5 .boxes,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day6 .boxes,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day7 .boxes {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        justify-content: space-between;
                        margin-bottom: 8px;
                        padding-left: 11px;
                        padding-right: 11px;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day1 .boxes span,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day2 .boxes span,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day3 .boxes span,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day4 .boxes span,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day5 .boxes span,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day6 .boxes span,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day7 .boxes span {
                            color: #404040;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: 24px;
                            letter-spacing: -0.132px;
                        }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day1 .boxes .cost,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day2 .boxes .cost,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day3 .boxes .cost,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day4 .boxes .cost,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day5 .boxes .cost,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day6 .boxes .cost,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day7 .boxes .cost {
                            display: flex;
                            flex-wrap: wrap;
                            align-items: center;
                            gap: 5px;
                        }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day1 .boxes .hours,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day2 .boxes .hours,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day3 .boxes .hours,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day4 .boxes .hours,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day5 .boxes .hours,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day6 .boxes .hours,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day7 .boxes .hours {
                            display: flex;
                            flex-wrap: wrap;
                            align-items: center;
                            gap: 5px;
                        }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day1 .user,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day2 .user,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day3 .user,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day4 .user,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day5 .user,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day6 .user,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day7 .user {
                        padding-left: 11px;
                        padding-right: 11px;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        gap: 8px;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day1 .user span,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day2 .user span,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day3 .user span,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day4 .user span,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day5 .user span,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day6 .user span,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day7 .user span {
                            color: #404040;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: 24px;
                            letter-spacing: -0.132px;
                        }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user {
                flex-wrap: wrap;
                display: flex;
            }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .current {
                    background: #E0ECF5;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .sidebar-user {
                    width: 170px;
                    width: 204px;
                    height: 109px;
                    padding: 21px 25px;
                    border-top: 1px solid #d2d2d2;
                    border-right: 1px solid #d2d2d2;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .sidebar-user .boxes.user {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        gap: 8px;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .sidebar-user .boxes.user .image {
                            width: 35px;
                        }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .sidebar-user .boxes.user .text {
                            display: flex;
                            flex-wrap: wrap;
                            flex-direction: column;
                        }

                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .sidebar-user .boxes.user .text .status {
                                display: block;
                                color: #0089ED;
                                font-family: Poppins;
                                font-size: 10px;
                                font-style: normal;
                                font-weight: 400;
                                line-height: 18px;
                            }

                                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .sidebar-user .boxes.user .text .status.casual {
                                    color: #009716;
                                }

                                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .sidebar-user .boxes.user .text .status.permanent {
                                    color: #F0B732;
                                }

                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .sidebar-user .boxes.user .text .name {
                                display: block;
                                color: #404040;
                                font-family: Poppins;
                                font-size: 12px;
                                font-style: normal;
                                font-weight: 400;
                                line-height: 18px;
                            }

                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .sidebar-user .boxes.user .text .boxes {
                                display: flex;
                                flex-wrap: wrap;
                                align-items: center;
                                justify-content: space-between;
                                gap: 15px;
                            }

                                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .sidebar-user .boxes.user .text .boxes span {
                                    color: #404040;
                                    font-family: Poppins;
                                    font-size: 12px;
                                    font-style: normal;
                                    font-weight: 600;
                                    line-height: 24px;
                                    letter-spacing: -0.132px;
                                }

                                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .sidebar-user .boxes.user .text .boxes .cost {
                                    display: flex;
                                    flex-wrap: wrap;
                                    align-items: center;
                                    gap: 5px;
                                }

                                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .sidebar-user .boxes.user .text .boxes .hours {
                                    display: flex;
                                    flex-wrap: wrap;
                                    align-items: center;
                                    gap: 5px;
                                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day1,
                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day2,
                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day3,
                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day4,
                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day5,
                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day6,
                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day7 {
                    width: 127px;
                    height: 109px;
                    padding: 5px;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day1 .mycontent,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day2 .mycontent,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day3 .mycontent,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day4 .mycontent,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day5 .mycontent,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day6 .mycontent,
                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day7 .mycontent {
                        padding-top: 9px;
                        border-radius: 8px;
                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-wrap: wrap;
                        flex-direction: column;
                        align-items: center;
                        border: 1px dashed #A3A3A3;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day1 .mycontent span.hours,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day2 .mycontent span.hours,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day3 .mycontent span.hours,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day4 .mycontent span.hours,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day5 .mycontent span.hours,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day6 .mycontent span.hours,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day7 .mycontent span.hours {
                            display: block;
                            color: #404040;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 18px;
                        }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day1 .mycontent span.total,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day2 .mycontent span.total,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day3 .mycontent span.total,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day4 .mycontent span.total,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day5 .mycontent span.total,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day6 .mycontent span.total,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day7 .mycontent span.total {
                            display: block;
                            color: #404040;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 18px;
                        }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day1 .mycontent.solid,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day2 .mycontent.solid,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day3 .mycontent.solid,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day4 .mycontent.solid,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day5 .mycontent.solid,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day6 .mycontent.solid,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day7 .mycontent.solid {
                            border: 1px solid #f5f5f5;
                            background: #f5f5f5;
                        }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day1 .mycontent.public-holiday,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day2 .mycontent.public-holiday,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day3 .mycontent.public-holiday,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day4 .mycontent.public-holiday,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day5 .mycontent.public-holiday,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day6 .mycontent.public-holiday,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day7 .mycontent.public-holiday {
                            border: 1px solid #009716;
                            background: #CEE5D3;
                        }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day1 .mycontent.saturday,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day2 .mycontent.saturday,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day3 .mycontent.saturday,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day4 .mycontent.saturday,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day5 .mycontent.saturday,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day6 .mycontent.saturday,
                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day7 .mycontent.saturday {
                            border: 1px solid #F0B732;
                            background: #FCF1D6;
                        }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.bottom {
                border-top: 1px solid #d2d2d2;
            }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.bottom .box-info-color {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    padding: 26px 29px;
                    width: 100%;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.bottom .box-info-color .box-color {
                        display: flex;
                        flex-wrap: wrap;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.bottom .box-info-color .box-color > div {
                            display: flex;
                            flex-wrap: wrap;
                            align-items: center;
                        }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.bottom .box-info-color div .border {
                        width: 15px;
                        height: 15px;
                        background: #000;
                        border-radius: 100%;
                        margin-right: 3px;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.bottom .box-info-color div .text {
                        display: block;
                        margin-right: 20px;
                        color: #6C6C6C;
                        font-family: Poppins;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 24px;
                        letter-spacing: -0.132px;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.bottom .box-info-color div div.weekday .border {
                        background: #0089ED;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.bottom .box-info-color div div.saturday .border {
                        background: #F0B732;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.bottom .box-info-color div div.sunday .border {
                        background: #FE85D2;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.bottom .box-info-color div div.public-holiday .border {
                        background: #1A8E18;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.bottom .box-info-color .box-btn {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.bottom .box-info-color .box-btn button {
                            border: none;
                            width: 121px;
                            border-radius: 8px;
                            background: #0089ed;
                            padding: 8px 24px;
                            padding-right: 8px;
                            color: #fff;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 500;
                            line-height: 18px;
                            display: flex;
                            flex-wrap: wrap;
                            align-items: center;
                        }

                            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.bottom .box-info-color .box-btn button span.mark {
                                width: 21px;
                                height: 21px;
                                padding: 2px;
                                color: #0089ed;
                                background: #fff;
                                font-family: Poppins;
                                font-size: 12px;
                                font-style: normal;
                                font-weight: 500;
                                line-height: 18px;
                                display: flex;
                                flex-wrap: wrap;
                                align-items: center;
                                justify-content: center;
                                border-radius: 100%;
                                margin-left: 8px;
                            }

@media only screen and (min-width: 1475px) {
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .sidebar-total,
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .sidebar-user {
        width: 18.8%;
    }

    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day1,
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day2,
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day3,
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day4,
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day5,
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day6,
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day7,
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day1,
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day2,
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day3,
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day4,
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day5,
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day6,
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user .day7 {
        width: 11.6%;
    }

        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day1 .date span.border,
        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day2 .date span.border,
        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day3 .date span.border,
        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day4 .date span.border,
        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day5 .date span.border,
        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day6 .date span.border,
        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one .day7 .date span.border {
            left: 15%;
            width: 70%;
        }
}

@media only screen and (max-width: 1475px) {
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week {
        width: 100%;
        overflow-y: auto;
    }

        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container {
            width: 1096px;
        }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week,
            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.one,
            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.sidebar-list-user {
                width: 1096px;
            }
}

@media only screen and (max-width: 1350px) {
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-content-week .container .row.bottom .box-info-color {
        max-width: max-content;
    }
}

@media only screen and (max-width: 768px) {
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week {
        padding: 12px;
    }

        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-info-filter {
            flex-direction: column;
            gap: 15px;
        }
}

@media only screen and (max-width: 580px) {
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week nav {
        gap: 15px;
    }

        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week nav ul li {
            padding: 5px 15px;
        }

    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-pagination .pagination .box1 button {
        margin-right: 10px;
    }

    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-pagination .pagination .box1 .month-years {
        margin-right: 0;
        width: 100%;
        display: block;
        margin-top: 15px;
    }

    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-week .box-pagination .pagination {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

.main-dashboard.main-roster .mycontainer .myrow-one section.content {
    order: 1;
}

    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info {
        flex-direction: column;
        padding-bottom: 45px;
    }

        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month {
            padding: 16px 32px;
            border-radius: 8px;
            background: #fff;
        }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month nav {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-bottom: 26px;
            }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month nav ul {
                    margin: 0;
                    padding: 0;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    border-radius: 8px;
                    border: 1px solid #A3A3A3;
                    background: #FFF;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month nav ul li {
                        list-style: none;
                        padding: 6px 25px;
                        color: #404040;
                        font-family: Poppins;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 21px;
                        /* 175% */

                        letter-spacing: -0.072px;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        cursor: pointer;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month nav ul li.active {
                            background: #009716;
                            color: #fff;
                        }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month nav ul li#day.active {
                            border-radius: 8px 0 0 8px;
                        }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month nav ul li#week {
                            border-left: 1px solid #a3a3a3;
                            border-right: 1px solid #a3a3a3;
                        }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month nav ul li#month.active {
                            border-radius: 0 8px 8px 0;
                        }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month nav button.addShifts {
                    text-decoration: none;
                    border: none;
                    display: flex;
                    padding: 6px 16px;
                    align-items: center;
                    gap: 4px;
                    border-radius: 6px;
                    background: #0089ED;
                    color: #f5f5f5;
                    font-family: Poppins;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 21px;
                    letter-spacing: -0.084px;
                }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-pagination {
                margin-bottom: 22px;
            }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-pagination .pagination {
                    display: flex;
                    flex-wrap: wrap;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-pagination .pagination .box1 button {
                        border: none;
                        background: #fff;
                        padding: 8px;
                        margin: 0;
                        margin-right: 21px;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-pagination .pagination .box1 .month-years {
                        color: #0a0a0a;
                        font-family: Poppins;
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 700;
                        line-height: 24px;
                        letter-spacing: -0.176px;
                        margin-right: 80px;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-pagination .pagination .box2 {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-pagination .pagination .box2 span {
                            color: #0089ED;
                            text-align: center;
                            font-family: Inter;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 500;
                            line-height: 21px;
                            /* 175% */

                            letter-spacing: -0.072px;
                            cursor: pointer;
                        }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-filter {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-bottom: 16px;
            }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-filter .box1 button {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    padding: 10px 26px;
                    border-radius: 8px;
                    border: 1px solid #A3A3A3;
                    background: #FFF;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-filter .box1 button svg {
                        margin-right: 6px;
                    }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-filter .box2 {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 22px;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-filter .box2 span.radius {
                        width: 15px;
                        height: 15px;
                        display: block;
                        stroke-width: 1px;
                        border: 1px solid #A3A3A3;
                        border-radius: 100%;
                        margin-right: 3px;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-filter .box2 span.text {
                        color: #6C6C6C;
                        font-family: Poppins;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 24px;
                        letter-spacing: -0.132px;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-filter .box2 div {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-filter .box2 .unpublished .radius {
                        background: #F5F5F5;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-filter .box2 .declined .radius {
                        background: #FFD6DB;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-filter .box2 .declined svg {
                        position: relative;
                        left: 5px;
                        bottom: 3px;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-filter .box2 .published .radius {
                        background: #FCF1D6;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-filter .box2 .approved .radius {
                        background: 0 0;
                        border: none;
                        margin-right: 0;
                        position: relative;
                        right: 3px;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-filter .box2 .approved .radius svg {
                            width: 15px;
                            height: 15px;
                        }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month #calendar .fc-header-toolbar {
                display: none;
            }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month #calendar .fc-daygrid-event-harness a.fc-event div {
                color: transparent;
                padding: 7px 11px;
                border-radius: 8px;
                margin-bottom: 7px;
            }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month #calendar .fc-daygrid-event-harness a.fc-event div.unpublished {
                    background: #F5F5F5;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month #calendar .fc-daygrid-event-harness a.fc-event div.declined {
                    border: 1px solid #FD314D;
                    background: #FFD6DB;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month #calendar .fc-daygrid-event-harness a.fc-event div.published {
                    border: 1px solid #F0B732;
                    background: #FCF1D6;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month #calendar .fc-daygrid-event-harness a.fc-event div.approve {
                    border: 1px solid #009716;
                    background: #CEE5D3;
                }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month #calendar .fc-daygrid-event-harness a.fc-event span {
                display: none;
            }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month #calendar .fc-daygrid-event-harness a.fc-event span.user-name {
                    color: #000;
                    font-family: Poppins;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 18px;
                    margin-bottom: 6px;
                    display: block;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month #calendar .fc-daygrid-event-harness a.fc-event span.jam-mulai-bekerja,
                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month #calendar .fc-daygrid-event-harness a.fc-event span.jam-selesai-bekerja {
                    color: #000;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 18px;
                    display: inline-block;
                    margin-bottom: 3px;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month #calendar .fc-daygrid-event-harness a.fc-event span.jam-mulai-bekerja::after {
                        content: "-";
                        margin: 0 5px;
                    }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month #calendar .fc-daygrid-event-harness a.fc-event span.jam-total-bekerja {
                    display: block;
                    color: #000;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 18px;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month #calendar .fc-daygrid-event-harness a.fc-event span.jam-total-bekerja::before {
                        content: "( ";
                        position: relative;
                        top: 1px;
                    }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month #calendar .fc-daygrid-event-harness a.fc-event span.jam-total-bekerja::after {
                        content: " )";
                        position: relative;
                        top: 1px;
                    }

            .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-color {
                margin-top: 36px;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-color .box-color {
                    display: flex;
                    flex-wrap: wrap;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-color .box-color > div {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                    }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-color div .border {
                    width: 15px;
                    height: 15px;
                    background: #000;
                    border-radius: 100%;
                    margin-right: 3px;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-color div .text {
                    display: block;
                    margin-right: 20px;
                    color: #6C6C6C;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 24px;
                    letter-spacing: -0.132px;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-color div div.weekday .border {
                    background: #0089ED;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-color div div.saturday .border {
                    background: #F0B732;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-color div div.sunday .border {
                    background: #FE85D2;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-color div div.public-holiday .border {
                    background: #1A8E18;
                }

                .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-color .box-btn {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                }

                    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-color .box-btn button {
                        border: none;
                        width: 121px;
                        border-radius: 8px;
                        background: #0089ed;
                        padding: 8px 24px;
                        padding-right: 8px;
                        color: #fff;
                        font-family: Poppins;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 18px;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                    }

                        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-color .box-btn button span.mark {
                            width: 21px;
                            height: 21px;
                            padding: 2px;
                            color: #0089ed;
                            background: #fff;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 500;
                            line-height: 18px;
                            display: flex;
                            flex-wrap: wrap;
                            align-items: center;
                            justify-content: center;
                            border-radius: 100%;
                            margin-left: 8px;
                        }

section.box-form-add-shifts {
    position: relative;
    background: #fff;
    padding: 29px 37px;
    max-width: 1000px;
    max-width: 1204px;
    border-radius: 12px;
    margin: 20px auto;
    transition: 1s all;
}

    section.box-form-add-shifts .boxs h2 {
        color: #0A0A0A;
        font-family: Poppins;
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: 36px;
        letter-spacing: -0.588px;
        margin-bottom: 31px;
    }

    section.box-form-add-shifts .boxs .container form {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: relative;
        gap: 68px;
    }

        section.box-form-add-shifts .boxs .container form .left {
            width: 50%;
            width: calc(50% - 34px);
        }

            section.box-form-add-shifts .boxs .container form .left span.mark {
                color: #FD314D;
            }

            section.box-form-add-shifts .boxs .container form .left .col label {
                color: #404040;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                letter-spacing: -0.072px;
                display: block;
                margin-bottom: 7px;
            }

            section.box-form-add-shifts .boxs .container form .left .col input,
            section.box-form-add-shifts .boxs .container form .left .col select {
                width: 247px;
                height: 44px;
                border-radius: 8px;
                border: 1px solid #C2C2C2;
                background: #FFF;
                padding: 17px;
                color: #404040;
                font-size: 15px;
            }

            section.box-form-add-shifts .boxs .container form .left .col select {
                background: url(../images/employee/arrow-top-popup.png) no-repeat right #fff;
                -webkit-appearance: none;
                padding: 12px 17px;
                background-position-x: 220px;
                color: #404040;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 21px;
                letter-spacing: -0.072px;
            }

            section.box-form-add-shifts .boxs .container form .left .col .custom_placeholder {
                position: relative;
            }

                section.box-form-add-shifts .boxs .container form .left .col .custom_placeholder span {
                    display: block;
                    color: #a3a3a3;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                    position: absolute;
                    bottom: 12px;
                    right: 17px;
                }

            section.box-form-add-shifts .boxs .container form .left .col .box-textarea {
                width: 100%;
            }

                section.box-form-add-shifts .boxs .container form .left .col .box-textarea textarea {
                    border-radius: 8px;
                    border: 1px solid #C2C2C2;
                    background: #FFF;
                    padding: 8px 18px;
                    width: 100%;
                }

                section.box-form-add-shifts .boxs .container form .left .col .box-textarea ::-webkit-input-placeholder {
                    color: #A3A3A3;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                }

                section.box-form-add-shifts .boxs .container form .left .col .box-textarea :-ms-input-placeholder {
                    color: #A3A3A3;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                }

                section.box-form-add-shifts .boxs .container form .left .col .box-textarea ::placeholder {
                    color: #A3A3A3;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                }

                section.box-form-add-shifts .boxs .container form .left .col .box-textarea span.count {
                    color: #404040;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                    text-align: right;
                    display: block;
                    position: relative;
                    bottom: 3px;
                }

            section.box-form-add-shifts .boxs .container form .left .col1 {
                display: flex;
                flex-wrap: wrap;
                gap: 47px;
                margin-bottom: 16px;
            }

                section.box-form-add-shifts .boxs .container form .left .col1 select {
                    width: 368px;
                    width: 100%;
                    background-position-x: 340px;
                    background-position-x: calc(100% - 17px);
                }

                section.box-form-add-shifts .boxs .container form .left .col1 .box1 {
                    width: 100%;
                }

            section.box-form-add-shifts .boxs .container form .left .col2 {
                display: flex;
                flex-wrap: wrap;
                gap: 48px;
                margin-bottom: 16px;
            }

                section.box-form-add-shifts .boxs .container form .left .col2 input,
                section.box-form-add-shifts .boxs .container form .left .col2 select {
                    width: 100%;
                    height: 44px;
                    flex-shrink: 0;
                }

                section.box-form-add-shifts .boxs .container form .left .col2 select {
                    background-position-x: calc(100% - 17px);
                }

                section.box-form-add-shifts .boxs .container form .left .col2 .box1,
                section.box-form-add-shifts .boxs .container form .left .col2 .box2 {
                    width: calc(50% - 24px);
                }

            section.box-form-add-shifts .boxs .container form .left .col3 {
                margin-bottom: 16px;
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
            }

                section.box-form-add-shifts .boxs .container form .left .col3.break {
                    margin-bottom: 36px;
                }

            section.box-form-add-shifts .boxs .container form .left .box-notice {
                border-radius: 8px;
                border: 1px solid #F0B732;
                background: #FCF1D6;
                padding: 16px;
                margin-bottom: 16px;
            }

                section.box-form-add-shifts .boxs .container form .left .box-notice .box {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    margin-bottom: 8px;
                    position: relative;
                }

                    section.box-form-add-shifts .boxs .container form .left .box-notice .box svg {
                        margin-right: 8px;
                    }

                        section.box-form-add-shifts .boxs .container form .left .box-notice .box svg.close {
                            position: absolute;
                            top: 0;
                            right: 0;
                            margin: 0;
                        }

                    section.box-form-add-shifts .boxs .container form .left .box-notice .box span.title {
                        display: block;
                        color: #0A0A0A;
                        font-family: Poppins;
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 700;
                        line-height: 24px;
                        letter-spacing: -0.154px;
                    }

                section.box-form-add-shifts .boxs .container form .left .box-notice span.desc {
                    display: block;
                    color: #404040;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                    margin-left: 32px;
                }

            section.box-form-add-shifts .boxs .container form .left .box-checbox {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-bottom: 39px;
            }

                section.box-form-add-shifts .boxs .container form .left .box-checbox span {
                    display: block;
                    color: #404040;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                }

                section.box-form-add-shifts .boxs .container form .left .box-checbox label {
                    color: #404040;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                    margin-left: 8px;
                    margin-right: 22px;
                }

                section.box-form-add-shifts .boxs .container form .left .box-checbox .boxes {
                    display: flex;
                    flex-wrap: wrap;
                }

                    section.box-form-add-shifts .boxs .container form .left .box-checbox .boxes > div {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                    }

                        section.box-form-add-shifts .boxs .container form .left .box-checbox .boxes > div label {
                            display: block;
                            cursor: pointer;
                        }

                    section.box-form-add-shifts .boxs .container form .left .box-checbox .boxes .forthnightly label {
                        margin-right: 0;
                    }

        section.box-form-add-shifts .boxs .container form .right {
            width: 50%;
            width: calc(50% - 34px);
        }

            section.box-form-add-shifts .boxs .container form .right .never .box1 {
                margin-bottom: 11px;
            }

                section.box-form-add-shifts .boxs .container form .right .never .box1 label {
                    color: #404040;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                    margin-bottom: 6px;
                    display: block;
                }

                section.box-form-add-shifts .boxs .container form .right .never .box1 input {
                    width: 100%;
                    height: 44px;
                    border-radius: 8px;
                    border: 1px solid #c2c2c2;
                    background: #fff;
                    padding: 17px;
                    color: #404040;
                    font-size: 15px;
                }

                section.box-form-add-shifts .boxs .container form .right .never .box1 .Zebra_DatePicker_Icon_Wrapper {
                    width: 100%;
                }

                section.box-form-add-shifts .boxs .container form .right .never .box1 .mycalendar {
                    border-radius: 8px;
                    border: 1px solid #D2D2D2;
                    background: #fff;
                    display: block;
                    padding: 8px 12px;
                }

                    section.box-form-add-shifts .boxs .container form .right .never .box1 .mycalendar nav.top {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        padding: 8px;
                        justify-content: space-between;
                        margin-bottom: 12px;
                    }

                        section.box-form-add-shifts .boxs .container form .right .never .box1 .mycalendar nav.top span {
                            display: block;
                            color: #0A0A0A;
                            text-align: center;
                            font-family: Poppins;
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 500;
                            line-height: 21px;
                            letter-spacing: -0.084px;
                        }

                    section.box-form-add-shifts .boxs .container form .right .never .box1 .mycalendar .day {
                        width: 100%;
                        display: flex;
                        padding: 8px;
                        padding: 16px;
                        justify-content: space-between;
                        align-items: center;
                    }

                        section.box-form-add-shifts .boxs .container form .right .never .box1 .mycalendar .day span {
                            display: block;
                            color: #757575;
                            text-align: center;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 18px;
                        }

                    section.box-form-add-shifts .boxs .container form .right .never .box1 .mycalendar .boxes.mynumber span {
                        display: block;
                        color: #0A0A0A;
                        text-align: center;
                        font-family: Inter;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 18px;
                        padding: 16px;
                        padding: 20px 16px;
                        justify-content: center;
                        align-items: center;
                        width: 14.2%;
                        cursor: pointer;
                    }

                        section.box-form-add-shifts .boxs .container form .right .never .box1 .mycalendar .boxes.mynumber span.active {
                            color: #FFF;
                            border-radius: 8px;
                            background: #0089ED;
                        }

                    section.box-form-add-shifts .boxs .container form .right .never .box1 .mycalendar .boxes.mynumber .number {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        text-align: center;
                        width: 100%;
                    }

                    section.box-form-add-shifts .boxs .container form .right .never .box1 .mycalendar nav.bottom {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        padding: 16px;
                        justify-content: space-between;
                        margin-top: 12px;
                        margin-bottom: 15px;
                    }

                        section.box-form-add-shifts .boxs .container form .right .never .box1 .mycalendar nav.bottom span {
                            display: block;
                            color: #0A0A0A;
                            text-align: center;
                            font-family: Poppins;
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 500;
                            line-height: 21px;
                            letter-spacing: -0.084px;
                        }

            section.box-form-add-shifts .boxs .container form .right .weekly .content-right-weekly {
                margin-bottom: 17px;
            }

                section.box-form-add-shifts .boxs .container form .right .weekly .content-right-weekly .boxes.week1 label {
                    color: #404040;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                    display: block;
                    margin-bottom: 7px;
                }

                section.box-form-add-shifts .boxs .container form .right .weekly .content-right-weekly .boxes.week1 .box-day {
                    border-radius: 8px;
                    border: 1px solid #d1d1d1;
                    padding: 7px;
                    padding-bottom: 8px;
                    display: flex;
                    flex-wrap: wrap;
                    gap: 14px;
                }

                    section.box-form-add-shifts .boxs .container form .right .weekly .content-right-weekly .boxes.week1 .box-day .day {
                        width: 11.95%;
                    }

                        section.box-form-add-shifts .boxs .container form .right .weekly .content-right-weekly .boxes.week1 .box-day .day span {
                            display: block;
                            display: flex;
                            padding: 8px;
                            justify-content: center;
                            align-items: center;
                            flex: 1 0 0;
                            align-self: stretch;
                            color: #757575;
                            text-align: center;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 18px;
                        }

                        section.box-form-add-shifts .boxs .container form .right .weekly .content-right-weekly .boxes.week1 .box-day .day .box {
                            display: flex;
                            padding: 20px 18px;
                            justify-content: center;
                            align-items: center;
                            flex: 1 0 0;
                            align-self: stretch;
                            border-radius: 8px;
                            border: 1px solid #D1D1D1;
                            height: 58px;
                            cursor: pointer;
                        }

                        section.box-form-add-shifts .boxs .container form .right .weekly .content-right-weekly .boxes.week1 .box-day .day.active .box {
                            background: #0089ED;
                            position: relative;
                        }

                            section.box-form-add-shifts .boxs .container form .right .weekly .content-right-weekly .boxes.week1 .box-day .day.active .box::before {
                                content: url(../images/roster/check.svg);
                                position: absolute;
                            }

            section.box-form-add-shifts .boxs .container form .right .weekly .content-right-forthnightly2 .boxes.week1 .box-day .day.active .box {
                background: #009716;
            }

            section.box-form-add-shifts .boxs .container form .right .weekly .col.start-date,
            section.box-form-add-shifts .boxs .container form .right .weekly .col.end-date {
                margin-bottom: 11px;
            }

                section.box-form-add-shifts .boxs .container form .right .weekly .col.start-date .box1 label,
                section.box-form-add-shifts .boxs .container form .right .weekly .col.end-date .box1 label {
                    color: #404040;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                    margin-bottom: 6px;
                    display: block;
                }

                section.box-form-add-shifts .boxs .container form .right .weekly .col.start-date .box1 input,
                section.box-form-add-shifts .boxs .container form .right .weekly .col.end-date .box1 input {
                    width: 100%;
                    height: 44px;
                    border-radius: 8px;
                    border: 1px solid #c2c2c2;
                    background: #fff;
                    padding: 17px;
                    color: #404040;
                    font-size: 15px;
                }

                section.box-form-add-shifts .boxs .container form .right .weekly .col.start-date .box1 .Zebra_DatePicker_Icon_Wrapper,
                section.box-form-add-shifts .boxs .container form .right .weekly .col.end-date .box1 .Zebra_DatePicker_Icon_Wrapper {
                    width: 100%;
                }

            section.box-form-add-shifts .boxs .container form .right .weekly .col.recurrence-date {
                margin-bottom: 16px;
            }

                section.box-form-add-shifts .boxs .container form .right .weekly .col.recurrence-date .box1 {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-end;
                }

                    section.box-form-add-shifts .boxs .container form .right .weekly .col.recurrence-date .box1 input {
                        display: block;
                        margin-right: 5px;
                    }

                    section.box-form-add-shifts .boxs .container form .right .weekly .col.recurrence-date .box1 label {
                        color: #404040;
                        font-family: Poppins;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 21px;
                        letter-spacing: -0.072px;
                    }

            section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly1,
            section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly2 {
                margin-bottom: 17px;
            }

                section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly1 .boxes.week1 label,
                section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly2 .boxes.week1 label {
                    color: #404040;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                    display: block;
                    margin-bottom: 7px;
                }

                section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly1 .boxes.week1 .box-day,
                section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly2 .boxes.week1 .box-day {
                    border-radius: 8px;
                    border: 1px solid #d1d1d1;
                    padding: 7px;
                    padding-bottom: 8px;
                    display: flex;
                    flex-wrap: wrap;
                    gap: 14px;
                }

                    section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly1 .boxes.week1 .box-day .day,
                    section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly2 .boxes.week1 .box-day .day {
                        width: 11.95%;
                    }

                        section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly1 .boxes.week1 .box-day .day span,
                        section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly2 .boxes.week1 .box-day .day span {
                            display: block;
                            display: flex;
                            padding: 8px;
                            justify-content: center;
                            align-items: center;
                            flex: 1 0 0;
                            align-self: stretch;
                            color: #757575;
                            text-align: center;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 18px;
                        }

                        section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly1 .boxes.week1 .box-day .day .box,
                        section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly2 .boxes.week1 .box-day .day .box {
                            display: flex;
                            padding: 20px 18px;
                            justify-content: center;
                            align-items: center;
                            flex: 1 0 0;
                            align-self: stretch;
                            border-radius: 8px;
                            border: 1px solid #D1D1D1;
                            height: 58px;
                            cursor: pointer;
                        }

                        section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly1 .boxes.week1 .box-day .day.active .box,
                        section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly2 .boxes.week1 .box-day .day.active .box {
                            background: #0089ED;
                            position: relative;
                        }

                            section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly1 .boxes.week1 .box-day .day.active .box::before,
                            section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly2 .boxes.week1 .box-day .day.active .box::before {
                                content: url(../images/roster/check.svg);
                                position: absolute;
                            }

                        section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly2 .boxes.week1 .box-day .day.active .box {
                            background: #009716;
                        }

            section.box-form-add-shifts .boxs .container form .right .fortnightly .col.start-date,
            section.box-form-add-shifts .boxs .container form .right .fortnightly .col.end-date {
                margin-bottom: 11px;
            }

                section.box-form-add-shifts .boxs .container form .right .fortnightly .col.start-date .box1 label,
                section.box-form-add-shifts .boxs .container form .right .fortnightly .col.end-date .box1 label {
                    color: #404040;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 21px;
                    letter-spacing: -0.072px;
                    margin-bottom: 6px;
                    display: block;
                }

                section.box-form-add-shifts .boxs .container form .right .fortnightly .col.start-date .box1 input,
                section.box-form-add-shifts .boxs .container form .right .fortnightly .col.end-date .box1 input {
                    width: 100%;
                    height: 44px;
                    border-radius: 8px;
                    border: 1px solid #c2c2c2;
                    background: #fff;
                    padding: 17px;
                    color: #404040;
                    font-size: 15px;
                }

                section.box-form-add-shifts .boxs .container form .right .fortnightly .col.start-date .box1 .Zebra_DatePicker_Icon_Wrapper,
                section.box-form-add-shifts .boxs .container form .right .fortnightly .col.end-date .box1 .Zebra_DatePicker_Icon_Wrapper {
                    width: 100%;
                }

            section.box-form-add-shifts .boxs .container form .right .fortnightly .col.recurrence-date {
                margin-bottom: 16px;
            }

                section.box-form-add-shifts .boxs .container form .right .fortnightly .col.recurrence-date .box1 {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-end;
                }

                    section.box-form-add-shifts .boxs .container form .right .fortnightly .col.recurrence-date .box1 input {
                        display: block;
                        margin-right: 5px;
                    }

                    section.box-form-add-shifts .boxs .container form .right .fortnightly .col.recurrence-date .box1 label {
                        color: #404040;
                        font-family: Poppins;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 21px;
                        letter-spacing: -0.072px;
                    }

    section.box-form-add-shifts .boxs .box-btn {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 39px;
    }

        section.box-form-add-shifts .boxs .box-btn button {
            display: flex;
            width: 96px;
            padding: 6px 16px;
            justify-content: center;
            align-items: center;
            gap: 4px;
            border-radius: 6px;
            background: #D9D9D9;
            color: #404040;
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.072px;
            border: none;
        }

            section.box-form-add-shifts .boxs .box-btn button.cancel {
                color: #404040;
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                letter-spacing: -0.072px;
            }

            section.box-form-add-shifts .boxs .box-btn button.save {
                color: #FFF;
                text-align: center;
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                letter-spacing: -0.072px;
                background: #0089ED;
            }

@media only screen and (max-width: 1300px) {
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month {
        width: 100%;
        overflow-y: auto;
    }

        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month #calendar {
            width: 1000px;
        }
}

@media only screen and (max-width: 768px) {
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month {
        padding: 12px;
    }

        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-filter {
            flex-direction: column;
            gap: 15px;
        }

        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-info-color {
            gap: 20px;
            width: max-content;
        }
}

@media only screen and (max-width: 580px) {
    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month nav {
        gap: 15px;
    }

        .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month nav ul li {
            padding: 5px 15px;
        }

    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-pagination .pagination .box1 button {
        margin-right: 10px;
    }

    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-pagination .pagination .box1 .month-years {
        margin-right: 0;
        width: 100%;
        display: block;
        margin-top: 15px;
    }

    .main-dashboard.main-roster .mycontainer .myrow-one section.content .box-info .boxes-tabs-month .box-pagination .pagination {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

@media only screen and (max-width: 1225px) {
    section.box-form-add-shifts {
        max-width: 998px;
    }

        section.box-form-add-shifts .boxs .container form {
            gap: 40px;
        }

            section.box-form-add-shifts .boxs .container form .left,
            section.box-form-add-shifts .boxs .container form .right {
                width: calc(50% - 20px);
            }

                section.box-form-add-shifts .boxs .container form .left .col2 {
                    gap: 20px;
                }

                    section.box-form-add-shifts .boxs .container form .left .col2 .box1,
                    section.box-form-add-shifts .boxs .container form .left .col2 .box2 {
                        width: calc(50% - 10px);
                    }

                section.box-form-add-shifts .boxs .container form .right .weekly .content-right-weekly .boxes.week1 .box-day,
                section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly1 .boxes.week1 .box-day,
                section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly2 .boxes.week1 .box-day {
                    gap: 11px;
                }

                    section.box-form-add-shifts .boxs .container form .right .weekly .content-right-weekly .boxes.week1 .box-day .day .box,
                    section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly1 .boxes.week1 .box-day .day .box,
                    section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly2 .boxes.week1 .box-day .day .box {
                        height: 50px;
                    }
}

@media only screen and (max-width: 998px) {
    section.box-form-add-shifts {
        width: 85%;
        margin: 50px auto;
    }

        section.box-form-add-shifts .boxs .container form {
            gap: 15px;
        }

            section.box-form-add-shifts .boxs .container form .left,
            section.box-form-add-shifts .boxs .container form .right {
                width: 100%;
            }

                section.box-form-add-shifts .boxs .container form .left .col {
                    width: 100%;
                    flex-direction: column;
                    position: static;
                    gap: 16px;
                }

                    section.box-form-add-shifts .boxs .container form .left .col input,
                    section.box-form-add-shifts .boxs .container form .left .col select {
                        width: 100%;
                        background-position-x: calc(100% - 17px);
                    }

                    section.box-form-add-shifts .boxs .container form .left .col .box1,
                    section.box-form-add-shifts .boxs .container form .left .col .box2 {
                        width: 100%;
                    }

                section.box-form-add-shifts .boxs .container form .right .weekly .content-right-weekly .boxes.week1 .box-day,
                section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly1 .boxes.week1 .box-day,
                section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly2 .boxes.week1 .box-day {
                    gap: 0;
                    justify-content: space-around;
                }

                    section.box-form-add-shifts .boxs .container form .right .weekly .content-right-weekly .boxes.week1 .box-day .day,
                    section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly1 .boxes.week1 .box-day .day,
                    section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly2 .boxes.week1 .box-day .day {
                        width: 13%;
                        height: 100%;
                    }

                        section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly1 .boxes.week1 .box-day .day .box,
                        section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly2 .boxes.week1 .box-day .day .box,
                        section.box-form-add-shifts .boxs .container form .right .weekly .content-right-weekly .boxes.week1 .box-day .day .box,
                        section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly1 .boxes.week1 .box-day .day .box,
                        section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly2 .boxes.week1 .box-day .day .box,
                        section.box-form-add-shifts .boxs .container form .right .weekly .content-right-weekly .boxes.week1 .box-day .day .box {
                            height: 60px;
                        }

                section.box-form-add-shifts .boxs .container form .left .box-checbox {
                    width: 100%;
                    gap: 15px;
                    flex-direction: column;
                    margin-bottom: 15px;
                }
}

@media only screen and (max-width: 580px) {
    section.box-form-add-shifts {
        width: 90%;
        margin: 20px auto;
        padding: 20px;
    }

        section.box-form-add-shifts .boxs .box-btn button {
            width: 100%;
        }
}

@media only screen and (max-width: 480px) {
    section.box-form-add-shifts .boxs .container form .left .box-notice .box {
        justify-content: space-between;
    }

        section.box-form-add-shifts .boxs .container form .left .box-notice .box span.title {
            width: 100%;
            order: 3;
        }

        section.box-form-add-shifts .boxs .container form .left .box-notice .box svg {
            order: 1;
            margin-bottom: 10px;
        }

            section.box-form-add-shifts .boxs .container form .left .box-notice .box svg.close {
                order: 2;
                position: static;
                margin-bottom: 10px;
            }

    section.box-form-add-shifts .boxs .container form .left .box-notice span.desc {
        margin-left: 0;
    }

    section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly1 .boxes.week1 .box-day .day .box,
    section.box-form-add-shifts .boxs .container form .right .fortnightly .content-right-forthnightly2 .boxes.week1 .box-day .day .box,
    section.box-form-add-shifts .boxs .container form .right .weekly .content-right-weekly .boxes.week1 .box-day .day .box {
        height: 40px;
        padding: 0;
    }

    section.box-form-add-shifts .boxs .container form .right .never .box1 .mycalendar nav.top,
    section.box-form-add-shifts .boxs .container form .right .never .box1 .mycalendar nav.bottom {
        padding: 12px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    section.box-form-add-shifts .boxs .container form .right .never .box1 .mycalendar .boxes.mynumber span {
        padding: 12px;
    }
}

@media only screen and (max-width: 380px) {
    section.box-form-add-shifts .boxs .container form .left .box-checbox .boxes {
        flex-direction: column;
        gap: 8px;
    }
}
/* >>>>>>>> Select Company >>>>>>>> */

header.head-select-company {
    position: relative;
    overflow: hidden;
}

    header.head-select-company .border {
        border-radius: 100%;
        background: #d0e1f8;
        width: 118%;
        height: 1030px;
        position: absolute;
        top: -786px;
        left: -9%;
        overflow: hidden;
    }

    header.head-select-company .image {
        position: relative;
        z-index: 1;
        top: 70px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    header.head-select-company h1 {
        margin: 0;
        color: #0a0a0a;
        font-family: Poppins;
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: 36px;
        letter-spacing: -0.588px;
        text-align: center;
        margin-top: 86px;
    }

    header.head-select-company p {
        color: #6C6C6C;
        font-family: Poppins;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 0px;
        text-align: center;
        margin-top: 23px;
        margin-bottom: 44px;
    }

main.content.select-company form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    margin: 0 auto;
    margin-bottom: 16px;
    width: 1062px;
}

    main.content.select-company form ::-webkit-input-placeholder {
        color: #9E9E9E;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -0.176px;
        padding-left: 37px;
    }

    main.content.select-company form :-ms-input-placeholder {
        color: #9E9E9E;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -0.176px;
        padding-left: 37px;
    }

    main.content.select-company form ::placeholder {
        color: #9E9E9E;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -0.176px;
        padding-left: 37px;
    }

    main.content.select-company form input {
        display: flex;
        height: 44px;
        width: 100%;
        padding: 8px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        border-radius: 8px;
        border: 1px solid #c2c2c2;
        background: #fff;
    }

    main.content.select-company form button {
        position: absolute;
        top: 1px;
        height: 42px;
        left: 0;
        padding: 0 15px;
        margin: 0;
        border: none;
        background: 0 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

main.content.select-company .box-table {
    width: 1062px;
    margin: 0 auto;
}

    main.content.select-company .box-table .k-grid.k-alt,
    main.content.select-company .box-table .k-grid .k-alt {
        background: #F2F2F2;
    }

    main.content.select-company .box-table .k-grid tbody tr:hover,
    main.content.select-company .box-table .k-grid tbody tr.k-state-hover {
        background: #F2F2F2;
    }

    main.content.select-company .box-table #kendo-select-company {
        height: auto !important;
        border: none;
    }

        main.content.select-company .box-table #kendo-select-company tr:last-child {
            border-bottom: 1px solid #e0e0e0;
        }

        main.content.select-company .box-table #kendo-select-company th {
            background: #D9D9D9;
            border: none;
            padding: 12px;
            color: #0A0A0A;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 18px;
        }

            main.content.select-company .box-table #kendo-select-company th span {
                margin: 0;
                padding: 0;
            }

            main.content.select-company .box-table #kendo-select-company th[data-field=Address] {
                border-left: 1px solid #C2C2C2;
            }

            main.content.select-company .box-table #kendo-select-company th[data-field=Button] {
                border-left: 1px solid #C2C2C2;
            }

                main.content.select-company .box-table #kendo-select-company th[data-field=Button] span {
                    display: block;
                    text-align: center;
                }

        main.content.select-company .box-table #kendo-select-company td {
            border: none;
            padding: 12px;
            color: #000;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
        }

            main.content.select-company .box-table #kendo-select-company td.Button button {
                display: flex;
                padding: 6px 16px;
                align-items: center;
                gap: 4px;
                border-radius: 6px;
                border: 1px solid #0089ED;
                background: #D0E1F8;
                color: #0089ED;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                letter-spacing: -0.084px;
                text-align: center;
                margin: 0 auto;
            }

        main.content.select-company .box-table #kendo-select-company .k-grid-header {
            padding-right: 0 !important;
        }

        main.content.select-company .box-table #kendo-select-company .k-grid-container .k-grid-content {
            height: auto !important;
            overflow: hidden;
            border-bottom: 1px solid #e0e0e0;
        }

        main.content.select-company .box-table #kendo-select-company .k-pager.k-grid-pager {
            display: none;
        }

@media only screen and (max-width: 1120px) {
    main.content.select-company form {
        width: 95%;
    }

    main.content.select-company .box-table {
        width: 95%;
    }

        main.content.select-company .box-table #kendo-select-company .k-grid-container .k-grid-content {
            overflow: unset;
            overflow-y: auto;
        }
}

@media only screen and (max-width: 992px) {
    main.content.select-company .box-table table {
        width: 100% !important;
    }
}

@media only screen and (max-width: 768px) {
    header.head-select-company .border {
        width: 140%;
        left: -20%;
        top: -800px;
    }

    header.head-select-company .image {
        top: 20px;
    }

    header.head-select-company h1 {
        margin-top: 35px;
    }
}

@media only screen and (max-width: 480px) {
    header.head-select-company .border {
        width: 180%;
        left: -40%;
        top: -800px;
    }

    header.head-select-company .image svg {
        width: 95%;
        height: 95%;
    }
}
/* >>>>>>>> timesheet >>>>>>>> */

.main-dashboard.main-timesheet .mycontainer .myrow-one aside.desktop,
.main-dashboard.main-timesheet .mycontainer .myrow-one aside.mobile {
    height: 100vh;
}

.main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-title h1 {
    color: #404040;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 21px;
    /* 105% */

    letter-spacing: -0.12px;
    margin: 0;
}

.main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-info-employees {
    padding: 16px 32px;
    margin: 0 31px 11px 31px;
    background: #fff;
    border-radius: 8px;
}

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-info-employees .box-navigation {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 24px;
    }

        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-info-employees .box-navigation .boxes.nav-icon {
            display: flex;
            flex-wrap: wrap;
            gap: 28px;
            margin-right: 28px;
        }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-info-employees .box-navigation .boxes.nav-icon button {
                border: none;
                background: none;
            }

        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-info-employees .box-navigation .boxes.date {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            margin-right: 42px;
            cursor: pointer;
        }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-info-employees .box-navigation .boxes.date span {
                color: #404040;
                font-family: Poppins;
                font-size: 16px;
                font-style: normal;
                font-weight: 700;
                line-height: 24px;
                letter-spacing: -0.176px;
                display: block;
            }

        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-info-employees .box-navigation .boxes.week {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            cursor: pointer;
        }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-info-employees .box-navigation .boxes.week span {
                color: #0089ED;
                text-align: center;
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                /* 175% */

                letter-spacing: -0.072px;
            }

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-info-employees .box-tabs {
        margin-bottom: 38px;
    }

        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-info-employees .box-tabs ul {
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 24px;
        }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-info-employees .box-tabs ul li {
                list-style-type: none;
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                color: #A3A3A3;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                /* 150% */

                letter-spacing: -0.084px;
                padding: 8px;
                cursor: pointer;
            }

                .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-info-employees .box-tabs ul li span {
                    color: #404040;
                }

                .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-info-employees .box-tabs ul li.active {
                    color: #0089ED;
                    border-bottom: 2px solid #0089ED;
                }

                    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-info-employees .box-tabs ul li.active span {
                        color: #0089ED;
                    }

.main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent {
    display: flex;
    flex-wrap: wrap;
    display: none;
}

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.active {
        display: flex;
    }

.main-dashboard.main-timesheet .mycontainer .myrow-one section.content .list-employee {
    border-radius: 8px;
    background: #FFF;
    margin-right: 18px;
    min-width: 253px;
}

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .list-employee span.title {
        display: block;
        color: #000;
        font-family: Poppins;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: -0.154px;
        border-radius: 8px 8px 0 0;
        border: 1px solid #d2d2d2;
        background: #fff;
        padding: 9px 20px;
    }

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .list-employee ul {
        margin: 0;
        padding: 0;
    }

        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .list-employee ul li {
            cursor: pointer;
            list-style: none;
            padding: 15px 18px;
            padding: 10px 18px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            border-left: 1px solid #d2d2d2;
            border-right: 1px solid #d2d2d2;
            border-bottom: 1px solid #d2d2d2;
            background: #fff;
        }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .list-employee ul li .boxes {
                cursor: pointer;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 10px;
            }

                .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .list-employee ul li .boxes .text .status {
                    display: block;
                    color: #0089ED;
                    font-family: Poppins;
                    font-size: 10px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 18px;
                }

                .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .list-employee ul li .boxes .text .name {
                    display: block;
                    margin-bottom: 2px;
                    color: #404040;
                    font-family: Poppins;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 18px;
                }

                .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .list-employee ul li .boxes .text .icons {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    gap: 41px;
                }

                    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .list-employee ul li .boxes .text .icons .col {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        gap: 6px;
                    }

                        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .list-employee ul li .boxes .text .icons .col .count {
                            color: #404040;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: 24px;
                            letter-spacing: -0.132px;
                        }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .list-employee ul li .icons > svg {
                display: none;
            }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .list-employee ul li:last-child {
                border-radius: 0 0 8px 8px;
            }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .list-employee ul li.active {
                border-left: 4px solid #0089ED;
            }

                .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .list-employee ul li.active .icons > svg {
                    display: block;
                }

.main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table {
    overflow-y: auto;
    width: calc(100% - 271px);
}

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table .boxes.btn {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table .boxes.btn button {
            margin-bottom: 11px;
        }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table .boxes.btn button.one {
                display: flex;
                padding: 6px 16px;
                align-items: center;
                gap: 4px;
                border-radius: 6px;
                background: #0089ED;
                border: none;
                padding: 6px 16px;
                color: #F5F5F5;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                letter-spacing: -0.084px;
            }

                .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table .boxes.btn button.one svg {
                    margin-right: 4px;
                }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table .boxes.btn button.approve-all {
                padding: 6px 16px;
                border-radius: 8px;
                background: #FFF;
                display: inline-flex;
                padding: 6px 16px;
                align-items: center;
                gap: 4px;
                border-radius: 6px;
                border: 1px solid #0089ED;
                background: #D0E1F8;
                color: #0089ED;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                letter-spacing: -0.084px;
            }

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table table {
        border-spacing: 0;
        width: 100%;
        overflow: hidden;
        border-bottom: 1px solid #D2D2D2;
    }

        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table table tr.header th {
            padding: 12px;
            gap: 8px;
            flex: 1 0 0;
            background: #D9D9D9;
            color: #0a0a0a;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 18px;
            border-left: 1px solid #C2C2C2;
        }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table table tr.header th:first-child {
                border-left: none;
            }

        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table table tr:nth-child(odd) {
            background: #F2F2F2;
        }

        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table table tr:hover {
            background: #D0E1F8;
        }

        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table table td {
            padding: 12px;
        }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table table td.status.waiting-approval {
                color: #F0B732;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
            }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table table td.status.rostered {
                color: #0089ED;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
            }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table table td.status.approved {
                color: #009716;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
                /* 150% */
            }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table table td.date {
                color: #0A0A0A;
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
            }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table table td.time {
                color: #0A0A0A;
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
                /* 150% */
            }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table table td.hours {
                color: #0A0A0A;
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
            }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table table td.breaks {
                color: #0A0A0A;
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
            }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table table td.pay {
                color: #0A0A0A;
                text-align: right;
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
                /* 150% */
            }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table table td.info {
                padding: 2px 6px;
                margin: 12px auto;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 4px;
                border-radius: 6px;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                letter-spacing: -0.072px;
            }

                .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table table td.info.approve {
                    border: 1px solid #009716;
                    background: #CEE5D3;
                    color: #009716;
                    width: 60px;
                }

                .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table table td.info.unapprove {
                    border: 1px solid #FD314D;
                    background: #FFD6DB;
                    color: #FD314D;
                    width: 76px;
                }

.main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.overtime-request .list-employee ul li .boxes .text .icons {
    gap: 10px;
}

.main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.overtime-request .box-table {
    overflow-y: auto;
    width: calc(100% - 271px);
}

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.overtime-request .box-table .boxes.btn {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.overtime-request .box-table .boxes.btn button {
            margin-bottom: 11px;
        }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.overtime-request .box-table .boxes.btn button.one {
                display: flex;
                padding: 6px 16px;
                align-items: center;
                gap: 4px;
                border-radius: 6px;
                background: #0089ED;
                border: none;
                padding: 6px 16px;
                color: #F5F5F5;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                letter-spacing: -0.084px;
            }

                .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.overtime-request .box-table .boxes.btn button.one svg {
                    margin-right: 4px;
                }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.overtime-request .box-table .boxes.btn button.approve-all {
                padding: 6px 16px;
                border-radius: 8px;
                background: #FFF;
                display: inline-flex;
                padding: 6px 16px;
                align-items: center;
                gap: 4px;
                border-radius: 6px;
                border: 1px solid #0089ED;
                background: #D0E1F8;
                color: #0089ED;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                letter-spacing: -0.084px;
            }

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.overtime-request .box-table .boxes.title span {
        display: block;
        color: #000;
        font-family: Poppins;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: -0.154px;
        margin-bottom: 11px;
    }

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.overtime-request .box-table table th.date {
        text-align: left;
    }

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.overtime-request .box-table table td {
        font-size: 12px;
        color: #0A0A0A;
        font-family: Inter;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        /* 150% */
    }

.main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request {
    flex-wrap: wrap;
    flex-direction: column;
}

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.one {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.one span {
            color: #000;
            font-family: Poppins;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 24px;
            letter-spacing: -0.154px;
            display: block;
            margin-bottom: 9px;
        }

        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.one .btn {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.one .btn .to {
                margin-right: 240px;
            }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.one .btn button {
                background: none;
                border: none;
                display: inline-flex;
                padding: 6px 16px;
                align-items: center;
                gap: 4px;
                border-radius: 6px;
                border: 1px solid #0089ED;
                background: #D0E1F8;
                color: #0089ED;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                letter-spacing: -0.084px;
                margin-bottom: 9px;
            }

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border-radius: 8px;
        border: 1px solid #D2D2D2;
        background: #FFF;
        padding: 24px 30px;
        margin-bottom: 13px;
    }

        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-from {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-from .boxes {
                display: flex;
                flex-wrap: wrap;
                gap: 35px;
            }

                .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-from .boxes .col1 span {
                    display: block;
                }

                    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-from .boxes .col1 span.status {
                        color: #0089ED;
                        font-family: Poppins;
                        font-size: 10px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 18px;
                        margin-bottom: 5px;
                    }

                        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-from .boxes .col1 span.status.casual {
                            color: #009716;
                        }

                    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-from .boxes .col1 span.user {
                        color: #404040;
                        font-family: Poppins;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 18px;
                        margin-bottom: 10px;
                    }

                        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-from .boxes .col1 span.user svg {
                            margin-right: 7px;
                        }

                    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-from .boxes .col1 span.time {
                        color: #404040;
                        /* Text S/Regular */

                        font-family: Inter;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 18px;
                        /* 150% */
                    }

                        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-from .boxes .col1 span.time svg {
                            margin-right: 2px;
                        }

                .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-from .boxes .col2 span {
                    display: block;
                }

                    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-from .boxes .col2 span.status {
                        color: #0089ED;
                        font-family: Poppins;
                        font-size: 10px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 18px;
                        margin-bottom: 5px;
                        visibility: hidden;
                    }

                        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-from .boxes .col2 span.status.casual {
                            color: #009716;
                        }

                    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-from .boxes .col2 span.date {
                        color: #404040;
                        font-family: Inter;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 18px;
                        margin-bottom: 10px;
                    }

                        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-from .boxes .col2 span.date svg {
                            margin-right: 2px;
                        }

                    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-from .boxes .col2 span.cost {
                        color: #404040;
                        font-family: Poppins;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 24px;
                        /* 200% */

                        letter-spacing: -0.132px;
                    }

                        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-from .boxes .col2 span.cost svg {
                            margin-right: 2px;
                        }

        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .arrow {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .arrow button {
                background: 0 0;
                font-family: Poppins;
                font-size: 10px;
                font-style: normal;
                font-weight: 500;
                line-height: 130%;
                letter-spacing: -0.1px;
                border-radius: 14.5px;
                width: 71px;
            }

                .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .arrow button.transfer {
                    color: #0089ed;
                    border: 1px solid #0089ed;
                }

                .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .arrow button.exchange {
                    color: #009716;
                    border: 1px solid #009716;
                }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .arrow .box-lapsed svg {
                margin-right: 10px;
            }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .arrow .box-lapsed span {
                color: #0089ED;
                font-family: Inter;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
            }

        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-to {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            gap: 13px;
        }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-to > .boxes {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
            }

                .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-to > .boxes > .boxes {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 35px;
                }

                    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-to > .boxes > .boxes .col1 span {
                        display: block;
                    }

                        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-to > .boxes > .boxes .col1 span.status {
                            color: #0089ED;
                            font-family: Poppins;
                            font-size: 10px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 18px;
                            margin-bottom: 5px;
                        }

                            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-to > .boxes > .boxes .col1 span.status.casual {
                                color: #009716;
                            }

                        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-to > .boxes > .boxes .col1 span.user {
                            color: #404040;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 18px;
                            margin-bottom: 10px;
                        }

                            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-to > .boxes > .boxes .col1 span.user svg {
                                margin-right: 7px;
                            }

                        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-to > .boxes > .boxes .col1 span.time {
                            color: #404040;
                            /* Text S/Regular */

                            font-family: Inter;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 18px;
                            /* 150% */
                        }

                            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-to > .boxes > .boxes .col1 span.time svg {
                                margin-right: 2px;
                            }

                    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-to > .boxes > .boxes .col2 span {
                        display: block;
                    }

                        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-to > .boxes > .boxes .col2 span.status {
                            color: #0089ED;
                            font-family: Poppins;
                            font-size: 10px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 18px;
                            margin-bottom: 5px;
                            visibility: hidden;
                        }

                            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-to > .boxes > .boxes .col2 span.status.casual {
                                color: #009716;
                            }

                        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-to > .boxes > .boxes .col2 span.date {
                            color: #404040;
                            font-family: Inter;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 18px;
                            margin-bottom: 10px;
                        }

                            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-to > .boxes > .boxes .col2 span.date svg {
                                margin-right: 2px;
                            }

                        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-to > .boxes > .boxes .col2 span.cost {
                            color: #404040;
                            font-family: Poppins;
                            font-size: 12px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 24px;
                            /* 200% */

                            letter-spacing: -0.132px;
                        }

                            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-to > .boxes > .boxes .col2 span.cost svg {
                                margin-right: 2px;
                            }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-to .box-btn {
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-end;
                gap: 10px;
            }

                .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-to .box-btn button {
                    border: none;
                    background: none;
                }

                    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-to .box-btn button.approve {
                        display: flex;
                        padding: 2px 12px;
                        align-items: center;
                        gap: 4px;
                        color: #009716;
                        font-family: Poppins;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 21px;
                        letter-spacing: -0.072px;
                    }

                    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two .list-user .user-to .box-btn button.reject {
                        display: flex;
                        padding: 2px 12px;
                        align-items: center;
                        gap: 4px;
                        color: #FD314D;
                        font-family: Poppins;
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 21px;
                        /* 175% */

                        letter-spacing: -0.072px;
                    }

section.box-form {
    position: relative;
    background: #fff;
    padding: 29px 37px;
    max-width: 868px;
    border-radius: 12px;
    margin: 20px auto;
    transition: 1s all;
}

    section.box-form .boxs h2 {
        padding: 0;
        margin: 0;
        margin-bottom: 25px;
        color: #0A0A0A;
        font-family: Poppins;
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: 36px;
        letter-spacing: -0.588px;
    }

    section.box-form .boxs nav ul {
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        margin-bottom: 31px;
    }

        section.box-form .boxs nav ul li {
            list-style: none;
        }

            section.box-form .boxs nav ul li a {
                text-decoration: none;
                padding: 8px;
                color: #A3A3A3;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                /* 150% */

                letter-spacing: -0.084px;
            }

                section.box-form .boxs nav ul li a.active {
                    color: #0089ED;
                    border-bottom: 2px solid #0089ED;
                }

    section.box-form .boxs .container .content-form {
        display: none;
    }

        section.box-form .boxs .container .content-form.active {
            display: block;
        }

    section.box-form .boxs .container span.mark {
        color: #FD314D;
    }

    section.box-form .boxs .container .col label {
        color: #404040;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 21px;
        /* 175% */

        letter-spacing: -0.072px;
        display: block;
        margin-bottom: 7px;
    }

    section.box-form .boxs .container .col input,
    section.box-form .boxs .container .col select {
        width: 247px;
        height: 44px;
        border-radius: 8px;
        border: 1px solid #C2C2C2;
        background: #FFF;
        padding: 17px;
        color: #404040;
        font-size: 15px;
    }

    section.box-form .boxs .container .col select {
        background: url(../images/employee/arrow-top-popup.png) no-repeat right #fff;
        -webkit-appearance: none;
        padding: 12px 17px;
        background-position-x: 220px;
        color: #404040;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        /* 175% */

        letter-spacing: -0.072px;
    }

    section.box-form .boxs .container .col2 {
        display: flex;
        flex-wrap: wrap;
        gap: 47px;
        margin-bottom: 16px;
    }

        section.box-form .boxs .container .col2 input,
        section.box-form .boxs .container .col2 select {
            width: 374px;
            width: 368px;
            height: 44px;
            flex-shrink: 0;
        }

        section.box-form .boxs .container .col2 select {
            background-position-x: 338px;
        }

    section.box-form .boxs .container .col3 {
        margin-bottom: 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

        section.box-form .boxs .container .col3.break {
            margin-bottom: 36px;
        }

    section.box-form .boxs .container h3 {
        margin: 0;
        color: #404040;
        font-family: Poppins;
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 21px;
        letter-spacing: -0.12px;
        margin-bottom: 23px;
    }

    section.box-form .boxs .container .box-btn {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
    }

        section.box-form .boxs .container .box-btn button {
            border: none;
            display: flex;
            width: 96px;
            padding: 6px 16px;
            justify-content: center;
            align-items: center;
            gap: 4px;
            border-radius: 6px;
            background: #D9D9D9;
            padding: 6px 16px;
            color: #404040;
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.072px;
        }

            section.box-form .boxs .container .box-btn button.cancel {
                margin-right: 12px;
            }

            section.box-form .boxs .container .box-btn button.next {
                background: #0089ED;
                color: #fff;
            }

section.box-form-add-timesheet {
    position: relative;
    background: #fff;
    padding: 29px 37px;
    max-width: 604px;
    max-width: 634px;
    max-width: 661px;
    border-radius: 12px;
    margin: 20px auto;
    transition: 1s all;
}

    section.box-form-add-timesheet .container .row h2 {
        padding: 0;
        margin: 0;
        margin-bottom: 25px;
        color: #0A0A0A;
        font-family: Poppins;
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: 36px;
        letter-spacing: -0.588px;
    }

    section.box-form-add-timesheet .container .row .box-form-info span.mark {
        color: #FD314D;
    }

    section.box-form-add-timesheet .container .row .box-form-info ::placeholder {
        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-add-timesheet .container .row .box-form-info :-ms-input-placeholder {
        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-add-timesheet .container .row .box-form-info ::-ms-input-placeholder {
        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-add-timesheet .container .row .box-form-info .placeholder {
        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-add-timesheet .container .row .box-form-info .col {
        margin-bottom: 16px;
    }

        section.box-form-add-timesheet .container .row .box-form-info .col label {
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.072px;
            display: block;
            margin-bottom: 7px;
        }

        section.box-form-add-timesheet .container .row .box-form-info .col input,
        section.box-form-add-timesheet .container .row .box-form-info .col select {
            width: 247px;
            height: 44px;
            border-radius: 8px;
            border: 1px solid #C2C2C2;
            background: #FFF;
            padding: 17px;
            color: #404040;
            font-size: 15px;
        }

        section.box-form-add-timesheet .container .row .box-form-info .col select {
            background: url(../images/employee/arrow-top-popup.png) no-repeat right #fff;
            -webkit-appearance: none;
            padding: 12px 17px;
            background-position-x: 220px;
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
        }

    section.box-form-add-timesheet .container .row .box-form-info .col1 input {
        width: 100%;
    }

    section.box-form-add-timesheet .container .row .box-form-info .col1 select {
        width: 100%;
        background-position-x: calc(100% - 17px);
    }

    section.box-form-add-timesheet .container .row .box-form-info .col2 {
        display: flex;
        flex-wrap: wrap;
        gap: 47px;
        margin-bottom: 16px;
    }

        section.box-form-add-timesheet .container .row .box-form-info .col2 input,
        section.box-form-add-timesheet .container .row .box-form-info .col2 select {
            width: 374px;
            width: 368px;
            height: 44px;
            flex-shrink: 0;
        }

        section.box-form-add-timesheet .container .row .box-form-info .col2 select {
            background-position-x: 338px;
        }

    section.box-form-add-timesheet .container .row .box-form-info .col3 {
        margin-bottom: 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    section.box-form-add-timesheet .container .row .box-form-info .col.break {
        margin-bottom: 36px;
    }

    section.box-form-add-timesheet .container .row .box-form-info .boxes {
        display: flex;
        flex-wrap: wrap;
    }

        section.box-form-add-timesheet .container .row .box-form-info .boxes .col {
            margin-bottom: 31px;
        }

    section.box-form-add-timesheet .container .row .box-form-info span {
        display: block;
    }

        section.box-form-add-timesheet .container .row .box-form-info span.title {
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.072px;
            margin-bottom: 9px;
        }

        section.box-form-add-timesheet .container .row .box-form-info span.value {
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
        }

    section.box-form-add-timesheet .container .row .box-form-info .col.date.col2 {
        gap: 29px;
        justify-content: space-between;
    }

        section.box-form-add-timesheet .container .row .box-form-info .col.date.col2 > .box1 input {
            width: 249px;
            width: 279px;
        }

        section.box-form-add-timesheet .container .row .box-form-info .col.date.col2 > .box2 .boxes {
            gap: 13px;
        }

            section.box-form-add-timesheet .container .row .box-form-info .col.date.col2 > .box2 .boxes input {
                width: 118px;
                width: 133px;
            }

    section.box-form-add-timesheet .container .row .box-form-info .col.break.col2 {
        gap: 29px;
        justify-content: space-between;
    }

        section.box-form-add-timesheet .container .row .box-form-info .col.break.col2 .box1.custom_placeholder {
            position: relative;
        }

            section.box-form-add-timesheet .container .row .box-form-info .col.break.col2 .box1.custom_placeholder input {
                width: 279px;
            }

            section.box-form-add-timesheet .container .row .box-form-info .col.break.col2 .box1.custom_placeholder span {
                display: block;
                color: #a3a3a3;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 21px;
                letter-spacing: -0.072px;
                position: absolute;
                bottom: 12px;
                right: 17px;
            }

        section.box-form-add-timesheet .container .row .box-form-info .col.break.col2 .box2.custom_placeholder {
            position: relative;
        }

            section.box-form-add-timesheet .container .row .box-form-info .col.break.col2 .box2.custom_placeholder input {
                width: 279px;
            }

            section.box-form-add-timesheet .container .row .box-form-info .col.break.col2 .box2.custom_placeholder span {
                display: block;
                color: #a3a3a3;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 21px;
                letter-spacing: -0.072px;
                position: absolute;
                bottom: 12px;
                right: 17px;
            }

    section.box-form-add-timesheet .container .row .box-form-info .box-notice {
        border-radius: 8px;
        border: 1px solid #f0b732;
        background: #fcf1d6;
        padding: 16px;
        margin-bottom: 16px;
    }

        section.box-form-add-timesheet .container .row .box-form-info .box-notice .box {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: 8px;
            position: relative;
        }

            section.box-form-add-timesheet .container .row .box-form-info .box-notice .box svg {
                margin-right: 8px;
            }

                section.box-form-add-timesheet .container .row .box-form-info .box-notice .box svg.close {
                    position: absolute;
                    top: 0;
                    right: 0;
                    margin: 0;
                }

            section.box-form-add-timesheet .container .row .box-form-info .box-notice .box span.title {
                display: block;
                color: #0a0a0a;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 700;
                line-height: 24px;
                letter-spacing: -0.154px;
                margin: 0;
            }

        section.box-form-add-timesheet .container .row .box-form-info .box-notice span.desc {
            display: block;
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
            margin-left: 32px;
        }

    section.box-form-add-timesheet .container .row .box-form-info .col.notes.col1 {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 16px;
    }

        section.box-form-add-timesheet .container .row .box-form-info .col.notes.col1 .box-textarea {
            width: 100%;
        }

            section.box-form-add-timesheet .container .row .box-form-info .col.notes.col1 .box-textarea textarea {
                border-radius: 8px;
                border: 1px solid #c2c2c2;
                background: #fff;
                padding: 8px 18px;
                width: 100%;
            }

            section.box-form-add-timesheet .container .row .box-form-info .col.notes.col1 .box-textarea span.count {
                color: #404040;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 21px;
                letter-spacing: -0.072px;
                text-align: right;
                display: block;
                position: relative;
                bottom: 3px;
            }

    section.box-form-add-timesheet .container .row .box-form-info .box-btn {
        margin-top: 51px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 14px;
    }

        section.box-form-add-timesheet .container .row .box-form-info .box-btn button {
            border: none;
            display: flex;
            padding: 6px 16px;
            justify-content: center;
            align-items: center;
            gap: 4px;
            border-radius: 6px;
            text-align: center;
            font-family: Inter;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.084px;
            width: calc(50% - 14px);
        }

            section.box-form-add-timesheet .container .row .box-form-info .box-btn button.save {
                background: #0089ED;
                color: #FFF;
            }

            section.box-form-add-timesheet .container .row .box-form-info .box-btn button.save-approve {
                border: 1px solid #0089ED;
                background: #D0E1F8;
                color: #0089ED;
            }

section.box-form-timesheet {
    position: relative;
    background: #fff;
    padding: 29px 37px;
    max-width: 604px;
    max-width: 634px;
    max-width: 661px;
    border-radius: 12px;
    margin: 20px auto;
    transition: 1s all;
}

    section.box-form-timesheet .container .row h2 {
        padding: 0;
        margin: 0;
        margin-bottom: 25px;
        color: #0A0A0A;
        font-family: Poppins;
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: 36px;
        letter-spacing: -0.588px;
    }

    section.box-form-timesheet .container .row .box-form-info span.mark {
        color: #FD314D;
    }

    section.box-form-timesheet .container .row .box-form-info ::placeholder {
        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-timesheet .container .row .box-form-info :-ms-input-placeholder {
        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-timesheet .container .row .box-form-info ::-ms-input-placeholder {
        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-timesheet .container .row .box-form-info .placeholder {
        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-timesheet .container .row .box-form-info .col {
        margin-bottom: 16px;
    }

        section.box-form-timesheet .container .row .box-form-info .col label {
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.072px;
            display: block;
            margin-bottom: 7px;
        }

        section.box-form-timesheet .container .row .box-form-info .col input,
        section.box-form-timesheet .container .row .box-form-info .col select {
            width: 247px;
            height: 44px;
            border-radius: 8px;
            border: 1px solid #C2C2C2;
            background: #FFF;
            padding: 17px;
            color: #404040;
            font-size: 15px;
        }

        section.box-form-timesheet .container .row .box-form-info .col select {
            background: url(../images/employee/arrow-top-popup.png) no-repeat right #fff;
            -webkit-appearance: none;
            padding: 12px 17px;
            background-position-x: 220px;
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
        }

    section.box-form-timesheet .container .row .box-form-info .col1 input {
        width: 100%;
    }

    section.box-form-timesheet .container .row .box-form-info .col1 select {
        width: 100%;
        background-position-x: calc(100% - 17px);
    }

    section.box-form-timesheet .container .row .box-form-info .col2 {
        display: flex;
        flex-wrap: wrap;
        gap: 47px;
        margin-bottom: 16px;
    }

        section.box-form-timesheet .container .row .box-form-info .col2 input,
        section.box-form-timesheet .container .row .box-form-info .col2 select {
            width: 374px;
            width: 368px;
            height: 44px;
            flex-shrink: 0;
        }

        section.box-form-timesheet .container .row .box-form-info .col2 select {
            background-position-x: 338px;
        }

    section.box-form-timesheet .container .row .box-form-info .col3 {
        margin-bottom: 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    section.box-form-timesheet .container .row .box-form-info .col.break {
        margin-bottom: 36px;
    }

    section.box-form-timesheet .container .row .box-form-info .boxes {
        display: flex;
        flex-wrap: wrap;
    }

        section.box-form-timesheet .container .row .box-form-info .boxes .col {
            margin-bottom: 31px;
        }

    section.box-form-timesheet .container .row .box-form-info span {
        display: block;
    }

        section.box-form-timesheet .container .row .box-form-info span.title {
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.072px;
            margin-bottom: 9px;
        }

        section.box-form-timesheet .container .row .box-form-info span.value {
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
        }

    section.box-form-timesheet .container .row .box-form-info .col.employee.col1 span.text {
        color: #404040;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
        display: block;
    }

    section.box-form-timesheet .container .row .box-form-info .col.date.col2 {
        gap: 29px;
        justify-content: space-between;
    }

        section.box-form-timesheet .container .row .box-form-info .col.date.col2 > .box1 input {
            width: 249px;
            width: 279px;
        }

        section.box-form-timesheet .container .row .box-form-info .col.date.col2 > .box2 .boxes {
            gap: 13px;
        }

            section.box-form-timesheet .container .row .box-form-info .col.date.col2 > .box2 .boxes input {
                width: 118px;
                width: 133px;
            }

    section.box-form-timesheet .container .row .box-form-info .col.break.col2 {
        gap: 29px;
        justify-content: space-between;
    }

        section.box-form-timesheet .container .row .box-form-info .col.break.col2 .box1.custom_placeholder {
            position: relative;
        }

            section.box-form-timesheet .container .row .box-form-info .col.break.col2 .box1.custom_placeholder input {
                width: 279px;
            }

            section.box-form-timesheet .container .row .box-form-info .col.break.col2 .box1.custom_placeholder span {
                display: block;
                color: #a3a3a3;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 21px;
                letter-spacing: -0.072px;
                position: absolute;
                bottom: 12px;
                right: 17px;
            }

        section.box-form-timesheet .container .row .box-form-info .col.break.col2 .box2.custom_placeholder {
            position: relative;
        }

            section.box-form-timesheet .container .row .box-form-info .col.break.col2 .box2.custom_placeholder input {
                width: 279px;
            }

            section.box-form-timesheet .container .row .box-form-info .col.break.col2 .box2.custom_placeholder span {
                display: block;
                color: #a3a3a3;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 21px;
                letter-spacing: -0.072px;
                position: absolute;
                bottom: 12px;
                right: 17px;
            }

    section.box-form-timesheet .container .row .box-form-info .box-notice {
        border-radius: 8px;
        border: 1px solid #f0b732;
        background: #fcf1d6;
        padding: 16px;
        margin-bottom: 16px;
    }

        section.box-form-timesheet .container .row .box-form-info .box-notice .box {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: 8px;
            position: relative;
        }

            section.box-form-timesheet .container .row .box-form-info .box-notice .box svg {
                margin-right: 8px;
            }

                section.box-form-timesheet .container .row .box-form-info .box-notice .box svg.close {
                    position: absolute;
                    top: 0;
                    right: 0;
                    margin: 0;
                }

            section.box-form-timesheet .container .row .box-form-info .box-notice .box span.title {
                display: block;
                color: #0a0a0a;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 700;
                line-height: 24px;
                letter-spacing: -0.154px;
                margin: 0;
            }

        section.box-form-timesheet .container .row .box-form-info .box-notice span.desc {
            display: block;
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
            margin-left: 32px;
        }

    section.box-form-timesheet .container .row .box-form-info .col.notes.col1 {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 16px;
    }

        section.box-form-timesheet .container .row .box-form-info .col.notes.col1 .box-textarea {
            width: 100%;
        }

            section.box-form-timesheet .container .row .box-form-info .col.notes.col1 .box-textarea textarea {
                border-radius: 8px;
                border: 1px solid #c2c2c2;
                background: #fff;
                padding: 8px 18px;
                width: 100%;
            }

            section.box-form-timesheet .container .row .box-form-info .col.notes.col1 .box-textarea span.count {
                color: #404040;
                font-family: Poppins;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 21px;
                letter-spacing: -0.072px;
                text-align: right;
                display: block;
                position: relative;
                bottom: 3px;
            }

    section.box-form-timesheet .container .row .box-form-info .box-btn {
        margin-top: 51px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 14px;
    }

        section.box-form-timesheet .container .row .box-form-info .box-btn button {
            border: none;
            display: flex;
            padding: 6px 16px;
            justify-content: center;
            align-items: center;
            gap: 4px;
            border-radius: 6px;
            text-align: center;
            font-family: Inter;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.084px;
            width: calc(50% - 14px);
        }

            section.box-form-timesheet .container .row .box-form-info .box-btn button.unapprove,
            section.box-form-timesheet .container .row .box-form-info .box-btn button.discard {
                border: 1px solid #FD314D;
                background: #FFD6DB;
                color: #FD314D;
                display: none;
            }

            section.box-form-timesheet .container .row .box-form-info .box-btn button.save-changes,
            section.box-form-timesheet .container .row .box-form-info .box-btn button.approve-next {
                background: #0089ED;
                color: #FFF;
                display: none;
            }

section.box-form-overtime-detail {
    position: relative;
    background: #fff;
    padding: 29px 37px;
    max-width: 604px;
    border-radius: 12px;
    margin: 20px auto;
    transition: 1s all;
}

    section.box-form-overtime-detail .container .row h2 {
        padding: 0;
        margin: 0;
        margin-bottom: 25px;
        color: #0A0A0A;
        font-family: Poppins;
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: 36px;
        letter-spacing: -0.588px;
    }

    section.box-form-overtime-detail .container .row .box-form-info span.mark {
        color: #FD314D;
    }

    section.box-form-overtime-detail .container .row .box-form-info ::placeholder {
        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-overtime-detail .container .row .box-form-info :-ms-input-placeholder {
        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-overtime-detail .container .row .box-form-info ::-ms-input-placeholder {
        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-overtime-detail .container .row .box-form-info .placeholder {
        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-overtime-detail .container .row .box-form-info .col {
        margin-bottom: 16px;
    }

        section.box-form-overtime-detail .container .row .box-form-info .col label {
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.072px;
            display: block;
            margin-bottom: 7px;
        }

        section.box-form-overtime-detail .container .row .box-form-info .col input,
        section.box-form-overtime-detail .container .row .box-form-info .col select {
            width: 247px;
            height: 44px;
            border-radius: 8px;
            border: 1px solid #C2C2C2;
            background: #FFF;
            padding: 17px;
            color: #404040;
            font-size: 15px;
        }

        section.box-form-overtime-detail .container .row .box-form-info .col select {
            background: url(../images/employee/arrow-top-popup.png) no-repeat right #fff;
            -webkit-appearance: none;
            padding: 12px 17px;
            background-position-x: 220px;
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
        }

    section.box-form-overtime-detail .container .row .box-form-info .col1 input {
        width: 100%;
    }

    section.box-form-overtime-detail .container .row .box-form-info .col1 select {
        width: 100%;
        background-position-x: calc(100% - 17px);
    }

    section.box-form-overtime-detail .container .row .box-form-info .col2 {
        display: flex;
        flex-wrap: wrap;
        gap: 47px;
        margin-bottom: 16px;
    }

        section.box-form-overtime-detail .container .row .box-form-info .col2 input,
        section.box-form-overtime-detail .container .row .box-form-info .col2 select {
            width: 374px;
            width: 368px;
            height: 44px;
            flex-shrink: 0;
        }

        section.box-form-overtime-detail .container .row .box-form-info .col2 select {
            background-position-x: 338px;
        }

    section.box-form-overtime-detail .container .row .box-form-info .col3 {
        margin-bottom: 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    section.box-form-overtime-detail .container .row .box-form-info .col.break {
        margin-bottom: 36px;
    }

    section.box-form-overtime-detail .container .row .box-form-info .boxes {
        display: flex;
        flex-wrap: wrap;
    }

        section.box-form-overtime-detail .container .row .box-form-info .boxes .col {
            margin-bottom: 31px;
        }

    section.box-form-overtime-detail .container .row .box-form-info span {
        display: block;
    }

        section.box-form-overtime-detail .container .row .box-form-info span.title {
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.072px;
            margin-bottom: 9px;
        }

        section.box-form-overtime-detail .container .row .box-form-info span.value {
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
        }

    section.box-form-overtime-detail .container .row .box-form-info .boxes.start-and-end {
        display: flex;
        flex-wrap: wrap;
        gap: 86px;
    }

    section.box-form-overtime-detail .container .row .box-form-info .col.button {
        margin-top: 60px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 23px;
        width: 100%;
    }

        section.box-form-overtime-detail .container .row .box-form-info .col.button .box {
            width: calc(50% - 23px);
        }

            section.box-form-overtime-detail .container .row .box-form-info .col.button .box button {
                width: 100%;
                padding: 6px 16px;
                display: flex;
                padding: 6px 16px;
                justify-content: center;
                align-items: center;
                gap: 4px;
                border-radius: 6px;
                text-align: center;
                font-family: Inter;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 21px;
                letter-spacing: -0.084px;
                border: none;
            }

                section.box-form-overtime-detail .container .row .box-form-info .col.button .box button.back {
                    background: #D3D3D9;
                    color: #404040;
                }

                section.box-form-overtime-detail .container .row .box-form-info .col.button .box button.next {
                    color: #FFF;
                    background: #0089ED;
                }

section.box-form-exchange-request {
    position: relative;
    background: #fff;
    padding: 29px 37px;
    max-width: 604px;
    border-radius: 12px;
    margin: 20px auto;
    transition: 1s all;
}

    section.box-form-exchange-request .container .row h2 {
        padding: 0;
        margin: 0;
        margin-bottom: 25px;
        color: #0A0A0A;
        font-family: Poppins;
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: 36px;
        letter-spacing: -0.588px;
    }

    section.box-form-exchange-request .container .row .box-form-info span.mark {
        color: #FD314D;
    }

    section.box-form-exchange-request .container .row .box-form-info ::placeholder {
        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-exchange-request .container .row .box-form-info :-ms-input-placeholder {
        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-exchange-request .container .row .box-form-info ::-ms-input-placeholder {
        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-exchange-request .container .row .box-form-info .placeholder {
        color: #A3A3A3;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: -0.072px;
    }

    section.box-form-exchange-request .container .row .box-form-info .col {
        margin-bottom: 16px;
    }

        section.box-form-exchange-request .container .row .box-form-info .col label {
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.072px;
            display: block;
            margin-bottom: 7px;
        }

        section.box-form-exchange-request .container .row .box-form-info .col input,
        section.box-form-exchange-request .container .row .box-form-info .col select {
            width: 247px;
            height: 44px;
            border-radius: 8px;
            border: 1px solid #C2C2C2;
            background: #FFF;
            padding: 17px;
            color: #404040;
            font-size: 15px;
        }

        section.box-form-exchange-request .container .row .box-form-info .col select {
            background: url(../images/employee/arrow-top-popup.png) no-repeat right #fff;
            -webkit-appearance: none;
            padding: 12px 17px;
            background-position-x: 220px;
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
        }

    section.box-form-exchange-request .container .row .box-form-info .col1 input {
        width: 100%;
    }

    section.box-form-exchange-request .container .row .box-form-info .col1 select {
        width: 100%;
        background-position-x: calc(100% - 17px);
    }

    section.box-form-exchange-request .container .row .box-form-info .col2 {
        display: flex;
        flex-wrap: wrap;
        gap: 47px;
        margin-bottom: 16px;
    }

        section.box-form-exchange-request .container .row .box-form-info .col2 input,
        section.box-form-exchange-request .container .row .box-form-info .col2 select {
            width: 374px;
            width: 368px;
            height: 44px;
            flex-shrink: 0;
        }

        section.box-form-exchange-request .container .row .box-form-info .col2 select {
            background-position-x: 338px;
        }

    section.box-form-exchange-request .container .row .box-form-info .col3 {
        margin-bottom: 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    section.box-form-exchange-request .container .row .box-form-info .col.break {
        margin-bottom: 36px;
    }

    section.box-form-exchange-request .container .row .box-form-info .boxes {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

        section.box-form-exchange-request .container .row .box-form-info .boxes .col {
            margin-bottom: 31px;
        }

    section.box-form-exchange-request .container .row .box-form-info span {
        display: block;
    }

        section.box-form-exchange-request .container .row .box-form-info span.title {
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.072px;
            margin-bottom: 9px;
        }

        section.box-form-exchange-request .container .row .box-form-info span.value {
            color: #404040;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: -0.072px;
        }

    section.box-form-exchange-request .container .row .box-form-info .box,
    section.box-form-exchange-request .container .row .box-form-info .col {
        min-width: 70px;
        min-width: 85px;
    }

    section.box-form-exchange-request .container .row .box-form-info .boxes.times .time-left {
        display: flex;
        flex-wrap: wrap;
        gap: 52px;
    }

    section.box-form-exchange-request .container .row .box-form-info .boxes.times .time-right {
        display: flex;
        flex-wrap: wrap;
        gap: 52px;
    }

    section.box-form-exchange-request .container .row .box-form-info .boxes.break .break-left {
        display: flex;
        flex-wrap: wrap;
        gap: 52px;
    }

    section.box-form-exchange-request .container .row .box-form-info .boxes.break .break-right {
        display: flex;
        flex-wrap: wrap;
        gap: 52px;
    }

    section.box-form-exchange-request .container .row .box-form-info .col.button {
        margin-top: 46px;
        margin-bottom: 29px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
    }

        section.box-form-exchange-request .container .row .box-form-info .col.button .box button {
            border: none;
            display: flex;
            width: 257px;
            padding: 6px 16px;
            justify-content: center;
            align-items: center;
            gap: 4px;
            border-radius: 6px;
            text-align: center;
            font-family: Inter;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
            letter-spacing: -0.084px;
        }

            section.box-form-exchange-request .container .row .box-form-info .col.button .box button.reject {
                border: 1px solid #FD314D;
                background: #FFD6DB;
                color: #FD314D;
            }

            section.box-form-exchange-request .container .row .box-form-info .col.button .box button.approve {
                border: 1px solid #0089ED;
                background: #0089ED;
                color: #FFF;
            }

    section.box-form-exchange-request .container .row .box-form-info .col.info-footer {
        width: 100%;
        margin: 0;
    }

        section.box-form-exchange-request .container .row .box-form-info .col.info-footer span.title {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-items: center;
        }

        section.box-form-exchange-request .container .row .box-form-info .col.info-footer span.mark {
            color: #a3a3a3;
            margin: 0 5px;
        }

@media only screen and (max-width: 1350px) {
    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request {
        overflow-y: auto;
        padding-top: 0;
    }

        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.one,
        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.exchange-request .container.two {
            width: 1000px;
            overflow: hidden;
        }
}

@media only screen and (max-width: 1300px) {
    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table table tr.header th {
        min-width: 200px;
    }
}

@media only screen and (max-width: 998px) {
    section.box-form {
        width: 85%;
        margin: 50px auto;
    }

        section.box-form .boxs nav ul {
            gap: 35px 20px;
        }

        section.box-form .boxs .container .col2,
        section.box-form .boxs .container .col3 {
            gap: 25px;
        }

            section.box-form .boxs .container .col2 .box1,
            section.box-form .boxs .container .col2 .box2,
            section.box-form .boxs .container .col2 .box3,
            section.box-form .boxs .container .col3 .box1,
            section.box-form .boxs .container .col3 .box2,
            section.box-form .boxs .container .col3 .box3 {
                width: 100%;
            }

        section.box-form .boxs .container .col input,
        section.box-form .boxs .container .col select {
            width: 100%;
        }

        section.box-form .boxs .container .col select {
            background-position-x: calc(100% - 17px);
        }

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-info-employees .box-navigation {
        gap: 15px;
    }

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table .boxes.btn {
        margin-bottom: 15px;
        gap: 15px;
        position: absolute;
        top: 0;
    }

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-info-employees .box-tabs {
        overflow-y: auto;
    }

        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-info-employees .box-tabs ul {
            width: 580px;
            padding-bottom: 10px;
        }

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent {
        gap: 20px;
        position: relative;
        padding-top: 50px;
    }

        .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.overtime-request {
            padding-top: 0;
        }

            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table,
            .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent.overtime-request .box-table {
                width: 100%;
            }

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .list-employee {
        margin-right: 0;
    }
}

@media only screen and (max-width: 768px) {
    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-title {
        padding: 12px;
    }

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-info-employees {
        padding: 12px;
        margin: 12px;
        margin-top: 0;
    }
}

@media only screen and (max-width: 580px) {
    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .list-employee {
        width: 100%;
    }

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-table .boxes.btn button {
        margin-bottom: 0;
    }

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent {
        padding-top: 98px;
    }

    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .box-info-employees .box-tabs ul {
        gap: 10px;
    }

    section.box-form {
        width: 95%;
        margin: 20px auto;
        padding: 20px;
    }

    .main-dashboard.main-timesheet .mycontainer .myrow-one aside.desktop,
    .main-dashboard.main-timesheet .mycontainer .myrow-one aside.mobile {
        height: 110vh;
    }
}

@media only screen and (max-width: 365px) {
    .main-dashboard.main-timesheet .mycontainer .myrow-one section.content .boxes.mycontent {
        padding-top: 115px;
    }
}

@media only screen and (max-width: 998px) {
    section.box-form-add-timesheet {
        width: 85%;
        margin: 50px auto;
    }

        section.box-form-add-timesheet .container .row .box-form-info .col.button button {
            width: 100%;
        }

        section.box-form-add-timesheet .container .row .box-form-info .boxes .col {
            width: 100%;
        }

        section.box-form-add-timesheet .container .row .box-form-info .Zebra_DatePicker_Icon_Wrapper {
            width: 100%;
        }

        section.box-form-add-timesheet .container .row .box-form-info .col.date.col2 .box1,
        section.box-form-add-timesheet .container .row .box-form-info .col.date.col2 .box2 {
            width: 100%;
        }

        section.box-form-add-timesheet .container .row .box-form-info .col.date.col2 > .box1 input {
            width: 100%;
        }

        section.box-form-add-timesheet .container .row .box-form-info .col.date.col2 > .box2 .boxes input {
            width: 100%;
        }

        section.box-form-add-timesheet .container .row .box-form-info .col.break.col2 .box1.custom_placeholder,
        section.box-form-add-timesheet .container .row .box-form-info .col.break.col2 .box2.custom_placeholder,
        section.box-form-add-timesheet .container .row .box-form-info .col.break.col2 .box1.custom_placeholder input,
        section.box-form-add-timesheet .container .row .box-form-info .col.break.col2 .box2.custom_placeholder input {
            width: 100%;
        }
}

@media only screen and (max-width: 580px) {
    section.box-form-add-timesheet {
        width: 90%;
        margin: 20px auto;
        padding: 20px;
    }

        section.box-form-add-timesheet .container .row .box-form-info .box-btn button {
            width: 100%;
        }
}

@media only screen and (max-width: 480px) {
    section.box-form-add-timesheet .container .row .box-form-info .box-notice .box {
        justify-content: space-between;
    }

        section.box-form-add-timesheet .container .row .box-form-info .box-notice .box span.title {
            width: 100%;
            order: 3;
        }

        section.box-form-add-timesheet .container .row .box-form-info .box-notice .box svg {
            order: 1;
            margin-bottom: 10px;
        }

            section.box-form-add-timesheet .container .row .box-form-info .box-notice .box svg.close {
                order: 2;
                position: static;
                margin-bottom: 10px;
            }

    section.box-form-add-timesheet .container .row .box-form-info .box-notice span.desc {
        margin-left: 0;
    }
}

@media only screen and (max-width: 998px) {
    section.box-form-timesheet {
        width: 85%;
        margin: 50px auto;
    }

        section.box-form-timesheet .container .row .box-form-info .col.button button {
            width: 100%;
        }

        section.box-form-timesheet .container .row .box-form-info .boxes .col {
            width: 100%;
        }

        section.box-form-timesheet .container .row .box-form-info .Zebra_DatePicker_Icon_Wrapper {
            width: 100%;
        }

        section.box-form-timesheet .container .row .box-form-info .col.date.col2 .box1,
        section.box-form-timesheet .container .row .box-form-info .col.date.col2 .box2 {
            width: 100%;
        }

        section.box-form-timesheet .container .row .box-form-info .col.date.col2 > .box1 input {
            width: 100%;
        }

        section.box-form-timesheet .container .row .box-form-info .col.date.col2 > .box2 .boxes input {
            width: 100%;
        }

        section.box-form-timesheet .container .row .box-form-info .col.break.col2 .box1.custom_placeholder,
        section.box-form-timesheet .container .row .box-form-info .col.break.col2 .box2.custom_placeholder,
        section.box-form-timesheet .container .row .box-form-info .col.break.col2 .box1.custom_placeholder input,
        section.box-form-timesheet .container .row .box-form-info .col.break.col2 .box2.custom_placeholder input {
            width: 100%;
        }
}

@media only screen and (max-width: 580px) {
    section.box-form-timesheet {
        width: 90%;
        margin: 20px auto;
        padding: 20px;
    }

        section.box-form-timesheet .container .row .box-form-info .box-btn button {
            width: 100%;
        }
}

@media only screen and (max-width: 480px) {
    section.box-form-timesheet .container .row .box-form-info .box-notice .box {
        justify-content: space-between;
    }

        section.box-form-timesheet .container .row .box-form-info .box-notice .box span.title {
            width: 100%;
            order: 3;
        }

        section.box-form-timesheet .container .row .box-form-info .box-notice .box svg {
            order: 1;
            margin-bottom: 10px;
        }

            section.box-form-timesheet .container .row .box-form-info .box-notice .box svg.close {
                order: 2;
                position: static;
                margin-bottom: 10px;
            }

    section.box-form-timesheet .container .row .box-form-info .box-notice span.desc {
        margin-left: 0;
    }
}

@media only screen and (max-width: 998px) {
    section.box-form-overtime-detail {
        width: 85%;
        margin: 50px auto;
    }

        section.box-form-overtime-detail .container .row .box-form-info .col.button button {
            width: 100%;
        }
}

@media only screen and (max-width: 768px) {
    section.box-form-overtime-detail .container .row .box-form-info .boxes .col {
        width: 100%;
    }

    section.box-form-overtime-detail .container .row .box-form-info .col.button {
        gap: 15px;
    }

        section.box-form-overtime-detail .container .row .box-form-info .col.button .box {
            width: 100%;
        }

    section.box-form-overtime-detail .container .row .box-form-info .boxes.start-and-end {
        gap: 0;
    }

    section.box-form-overtime-detail .container .row .box-form-info .col.button {
        margin-top: 15px;
    }
}

@media only screen and (max-width: 580px) {
    section.box-form-overtime-detail {
        width: 90%;
        margin: 20px auto;
        padding: 20px;
    }

        section.box-form-overtime-detail .container .row .box-form-info .col.attachment button {
            display: block;
            margin-top: 12px;
            position: static;
        }
}

@media only screen and (max-width: 998px) {
    section.box-form-exchange-request {
        width: 85%;
        margin: 50px auto;
    }

        section.box-form-exchange-request .container .row .box-form-info .col.button button {
            width: 100%;
        }
}

@media only screen and (max-width: 768px) {
    section.box-form-exchange-request {
        max-width: 90%;
        overflow-y: auto;
    }

        section.box-form-exchange-request .container {
            overflow: hidden;
            width: 560px;
        }
}

@media only screen and (max-width: 580px) {
    section.box-form-exchange-request .container {
        width: 505px;
    }

        section.box-form-exchange-request .container .row .box-form-info .box,
        section.box-form-exchange-request .container .row .box-form-info .col {
            min-width: 80px;
        }

            section.box-form-exchange-request .container .row .box-form-info .col.button {
                gap: 20px;
                flex-direction: column;
            }

                section.box-form-exchange-request .container .row .box-form-info .col.button button {
                    width: 232px;
                }

            section.box-form-exchange-request .container .row .box-form-info .col.info-footer span.title {
                justify-content: flex-start;
            }
}