/*!
    bootstrap PRIMARY = #337ab7
    hrnext "blue" = #143D8D
    hrnext "green" = #78A22F
 */

body {
    height: 100%;
}

a:focus, a:hover {
    color: #003d60;
    cursor: pointer;
}

/********* media queries */
/* http://www.telerik.com/forums/responsive-radgrid-with-filters */

/*  
    LANDSCAPE
    iPhone 5    = 568 
    iPhone 6    = 667
    iPhone 6+   = 736
    iPad        = 1024

    PORTRAIT
    iPhone 5    = 320 
    iPhone 6    = 375
    iPhone 6+   = 414
    iPad        = 768
*/

/* RadGrid PAGER LINE
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    < 1000 (hide parts)
    > 1000 (show extra parts)
*/
@media screen and (max-width: 567px) {
    /* List of individual PAGE NUMBERS
        These will add too much space at the small viewports...and make things look bad.
    */
    .RadGrid_Bootstrap .rgPager .rgNumPart {
        display: none !important;
    }
}

@media screen and (max-width: 999px) {
    .rgFilterRow {
        display: none !important;
    }
    /* Item X to Y of ZZ */
    .RadGrid_Bootstrap .rgPager .rgInfoPart {
        display: none !important;
    }
    /* List of individual PAGE NUMBERS 
    .RadGrid_Bootstrap .rgPager .rgNumPart {display: none !important;}
    */

    /* GOTO Page number */
    .RadGrid_Bootstrap .rgPager .rgAdvPart [id*="GoToPageLabel"],
    .RadGrid_Bootstrap .rgPager .rgAdvPart [id*="GoToPageTextBox_wrapper"],
    .RadGrid_Bootstrap .rgPager .rgAdvPart [id*="PageOfLabel"],
    .RadGrid_Bootstrap .rgPager .rgAdvPart [id*="GoToPageLinkButton"] {
        display: none !important;
    }
}
/* Think around 1000 it is safe to add back in our extra "pager" items. Really want this at least on the LS iPad, so 1000 seems a good MIN point. */
@media screen and (min-width: 1000px) {
    .rgFilterRow {
        display: none !important;
    }

    /* Item X to Y of ZZ */
    .RadGrid_Bootstrap .rgPager .rgInfoPart {
        display: normal !important;
    }

    /* GOTO Page number */
    .RadGrid_Bootstrap .rgPager .rgAdvPart [id*="GoToPageLabel"],
    .RadGrid_Bootstrap .rgPager .rgAdvPart [id*="GoToPageTextBox_wrapper"],
    .RadGrid_Bootstrap .rgPager .rgAdvPart [id*="PageOfLabel"],
    .RadGrid_Bootstrap .rgPager .rgAdvPart [id*="GoToPageLinkButton"] {
        display: normal !important;
    }
}
/* RadGrid PAGER LINE
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    < 1000 (hide parts)
    > 1000 (show extra parts)
*/


/* RadGrid COLUMNS
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/

/* Boundary for biggest portrait phone.  This is where you'll want to turn most things off except bare min things...
    i.e. things/cols without ANY particular restriction.
*/
@media screen and (max-width: 414px) {
    .colShowForLSPhone {
        display: none;
    }

    .colShowForTablet {
        display: none;
    }

    .colShowForDesktop {
        display: none;
    }

    .colShowForDesktopWide {
        display: none;
    }
}

/* Boundary for biggest LS phone and/or iPad portrait.  This is where you'll want to maybe add in an extra 1 or 2 fields (at most).
    Rember, 736 is the iPhone 6+ in LS (and iPad is 768 portrait), that's a big jump from iPhone 5 (568) in LS, so, can't go crazy here.
*/
@media screen and (max-width: 767px) {
    .colShowForTablet {
        display: none;
    }

    .colShowForDesktop {
        display: none;
    }

    .colShowForDesktopWide {
        display: none;
    }
}


/* Boundary for iPad LS (and maybe some small res laptops).  Again, probably 1 or 2 extra fields. */
@media screen and (max-width: 1024px) {
    .colShowForDesktop {
        display: none;
    }

    .colShowForDesktopWide {
        display: none;
    }
}

/* Boundary (arbitrary) that we are calling desktop (1200). Here you can polish off the list of fields that a normal/standard desktop user should see */
@media screen and (max-width: 1200px) {
    .colShowForDesktopWide {
        display: none;
    }
}

/* Boundary for EXTRA detail here... to give large screen users something extra to look at with all the space the might have available.
    Still, don't go crazy.  You don't know if they have a display of 1205 or 2205.  We can keep going with these boundaries, but one needs to cut it off
    and go with something for now.
*/
@media screen and (min-width: 1200px) {
    .colShowForDesktopWide {
        display: normal;
    }
}
/* RadGrid COLUMNS
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/

/* Font ZOOM
    Until BS4 (where they might have better type scaling techniques), it is hard to do this super right, but let's have something in place...
*/

/*
@media screen and (max-width: 767px)
{
    h1 {font-size: 22px;}
    h2 {font-size: 18px;}
    h3 {font-size: 16px;}
    h4 {font-size: 14px;}
    h5 {font-size: 12px;}
    h6 {font-size: 10px;}
}
*/

/********* media queries */



/********* Telerik bootstrap skin adjustments */
/*      GRID */
.RadGrid_Bootstrap .rgFilterRow .rgFilter {
    margin-left: 5px;
}

.RadGrid_Bootstrap .rgFilterRow > td {
    border-left: 1px solid #ddd;
}

.RadGrid_Bootstrap .rgHeader {
    font-weight: bold !important;
}

.RadGrid_Bootstrap .rgHoveredRow.rgSelectedRow, .RadGrid_Bootstrap .rgSelectedRow,
.RadGrid_Bootstrap .rgSelectedRow td, .RadGrid_Bootstrap .rgMasterTable .rgSelectedCell {
    background-color: #bfbfbf !important;
}

/*2015 Q2 SP2 seemed to move (float) the middle pager piece to the left instead of keeping it fluid in the center...
    think it looks better being fluid in the center.*/
.RadGrid_Bootstrap .rgPager .rgPagerCell .NextPrevNumericAndAdvanced .rgWrap.rgAdvPart {
    float: none;
    text-align: center;
}

/*      INPUTS  */
/*          (DATE/TIME PICKERS) */
.RadPicker .RadInput_Bootstrap .riEmpty {
    font-style: normal !important;
    color: #999 !important;
}

.RadPicker .RadInput_Bootstrap .form-control {
    z-index: inherit !important;
}

.form-group .RadPicker {
    display: block;
    width: 100%;
}
/*          (TEXT/disabled) */
.RadInput_Bootstrap .riTextBox.riDisabled {
    background: #eee;
}
/*          (RADCOMBOBOX)...trying to match up with other BS elements */
.RadComboBox_Bootstrap.form-control {
    padding: 0;
    width: 100% !important;
}

.RadComboBox_Bootstrap.form-control .rcbInner {
    border-style: none;
    padding-left: 12px;
    padding-right: 12px;
}
/*          (RAD DATE/TIME PICKER)...trying to match up with other BS elements */
.RadInput_Bootstrap .form-control.riTextBox {
    padding-left: 12px;
    padding-right: 12px;
}


/********* Telerik bootstrap skin adjustments */



/********* HRnext custom */

/*This adds a margin left to account
for the side menu space (new mega-menu) and removes it
when the side menu is hidden in smaller screens*/
.megaMenuContent {
    margin-left: 240px;
}
@media (max-width: 956px) {
    .megaMenuContent {
        margin-left: revert;
    }
}


.old-menu-switch .megaMenuContent {
    margin-left: revert;
}
/* .marginContent {margin: 1em;} */
.marginLeftElement {
    margin-left: 1em;
}

.marginLeftElementHalfx {
    margin-left: .5em;
}

.marginRightElement {
    margin-right: 1em;
}

.marginRightElementHalfx {
    margin-right: .5em;
}

.marginBottomElement {
    margin-bottom: 1em;
}

.marginBottomElementHalfx {
    margin-bottom: .5em;
}

.marginBottomElement2x {
    margin-bottom: 2em;
}

.marginBottomElement3x {
    margin-bottom: 3em;
}

.marginTopElement {
    margin-top: 1em;
}

.marginTopElementHalfx {
    margin-top: .5em;
}

.marginTopElement2x {
    margin-top: 2em;
}

.marginTopElement3x {
    margin-top: 3em;
}

.paddingRight {
    padding-right: 1em;
}

.paddingRightHalfx {
    padding-right: .5em;
}

.paddingRight2x {
    padding-right: 2em;
}

.paddingRight3x {
    padding-right: 3em;
}

.paddingLeft {
    padding-left: 1em;
}

.paddingLeftHalfx {
    padding-left: .5em;
}

.paddingLeft2x {
    padding-left: 2em;
}

.paddingLeft3x {
    padding-left: 3em;
}

.breakAll {
    word-break: break-all;
}

.modal-title span.label.breakAll {
    white-space: normal;
}

.bgLightGrey {
    background-color: #d4d4d4;
}
/********* HRnext custom */

/********* BROWSER custom 
    Undo Chrome's ugly YELLOW AUTOFILL
*/
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 500px white inset !important;
}

/********* BROWSER custom */


/********* NAV/HEADER BAR
*/

/* .siteHeaderUpperBand {min-height: 1em; background-color: #78A22F;} */
/* .siteHeaderLowerBand {background-color: #009ac7;} */

/* Dynamic NAVBAR brand/image
    navbar-brand height dictates the overall height of the header bar.
    However, as it moves, the padding on the .nav > li > a links needs to move with it to put the links closer to the bottom, but
        also to stretch the gray "click" area.

.navbar-brand {height: 90px;}
*/
/* .navbar-brand {padding-top: 0 !important; padding-bottom: 0 !important;}

.navbar-brand > img {
    max-height: 100%;
    height: 100%;
    max-width: 100%;
    width: auto;
    margin: 0 auto;
    /* probably not needed anymore, but doesn't hurt */
/* -o-object-fit: contain;
    object-fit: contain; */
/* } */
/* When the viewport is small, take the brand smaller so the toggle button doesn't shift over brand and cause a newline.
    Adjust "70%" as necessary if weird/different brand image sizes causes issues.
*/
/* @media screen and (max-width: 900px) {
    .navbar-brand {max-width: 95%;}
    .navbar-header {max-width: 30%;}
}
@media screen and (max-width: 767px) {
    .navbar-brand {max-width: 95%;}
    .navbar-header {max-width: 80%;}
} */

/* .nav > li > a {
    padding: 60px 10px 14px 10px;
    font-weight: bold;
    font-size: 1em;
    color: #78A22F;
} */

/* .userHeader {margin-top: .5em; margin-left:.5em; font-size: 1em; text-align: center;}
.userHeader:last-child {margin-right: 1.35em;}
.userHeader .panel-body {padding: 0px 5px 5px 5px;}
.userHeader .panel {margin-bottom: 0px;}
.userHeader .btn {margin-top: .5em;}

@media screen and (max-width: 1100px)
{
.nav > li > a {font-size: 1em;}
.userHeader {font-size: .75em;}
}
@media screen and (max-width: 767px)
{
.nav > li > a {font-size: 1.5em;}
.userHeader {font-size: 1.5em; margin-left:1.25em; margin-right:1.25em;}
} */


/********* NAV/HEADER BAR */

/********* Telephone (international) Mask input */
.iti-flag {
    background-image: url("../images/telephone/flags.png");
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .iti-flag {
        background-image: url("../images/telephone/flags@2x.png");
    }
}

.intl-tel-input {
    display: inherit;
}
/********* Telephone (international) Mask input */

/********* Dropdown values/rows
    This is a technique used in conjuntion with PADDING of values while using fixed-width fonts.
    Problem with it is that different types/sizes of data make this extremely volotile. 
.dropdown-menu span.text,
.bootstrap-select button.btn.dropdown-toggle
{white-space: pre; font-family:'Lucida Console','Courier New';}
*/
/********* Dropdown values/rows */

/* This removes any IE "x" buttons in the INPUT fields (in this case, for class .typeahead).  We'll leave it for other things.
    But, we don't want this getting in the way of the functioning of how our typeaheads work.
*/
input.typeahead[type=text]::-ms-clear {
    display: none;
}

/* Some custom look for our employee info bar...*/
.employeeInfo h1,
.employeeInfo h2,
.employeeInfo h3,
.employeeInfo h4,
.employeeInfo h5,
.employeeInfo h6,
.employeeInfo label {
    margin-bottom: 0em;
    margin-top: 0em;
}

.spaced-radio input[type="radio"] {
    margin-left: 30px;
    margin-right: 3px;
}

/* eSignature stuff...*/
.eSignatureText {
    display: inline-block;
    font-size: 2.5em;
    width: 100%;
    height: 1.75em;
    font-family: 'cedarville_cursiveregular', Arial, 'sans-serif' !important;
    font-weight: bold !important;
    padding: 5px;
    background-color: lightgrey;
}


/* This is the same as the bootstrap .text-danger, but we needed something WITHOUT a dash involved for our special
    **inactive** process that tries to split out and bold text before the dash... well, injecting a class name with a dash in it messes that up,
    so we need a class name that does the SAME thing, but doesn't have a dash in the name itself.
*/
.hrnextTextDanger {
    color: #a94442;
}

.gallerythumb {
    margin-bottom: 1em;
}

.modalHRnextHeaderHeight {
    line-height: 5em;
}

.modalHRnextHeaderTextAlignment {
    display: inline-block;
    vertical-align: middle;
    font-size: 2.5em;
    font-weight: bold;
}

/* TODO: Port these styles for loading animations over to a SCSS file when redesign is complete*/
.loading-wrapper {
    width: 100%;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .loading-wrapper .loading-text {
        width: 100%;
    }

.loading-spinner {
    position: relative;
    width: 128px;
    display: flex;
    align-items: center;
}

    .loading-spinner:before {
        content: '';
        display: block;
        padding-top: 100%;
    }

    .loading-spinner .circular {
        -webkit-animation: rotate 2s linear infinite;
        animation: rotate 2s linear infinite;
        height: 100%;
        transform-origin: center center;
        width: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    .loading-spinner .path {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
        -webkit-animation: dash 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        animation: dash 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        stroke-linecap: square;
        stroke: #009ac7;
    }

.form-control {
    color: #000 !important;
}

.btn .fa-floppy-o {
    display: none;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

/* IE MODAL STYLING */
.modal.message {
    display: none;
    background-color: rgba(0,0,0,0.4);
}

.modal.message.display {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* VUE Styling */
#homeContent.asure-portal-app {
    position: relative;
    width: 95%;
    margin: auto;
    padding-top: 1rem;
}

#homeContent #homeMain {
    flex: 3 6 auto;
}

div.ads-container {
    margin: auto;
}

#homeContent #homeAside {
    flex: 2 1 auto;
}

#homeContent .items-banner {
    margin: .25rem 0;
}

.asure-portal-app h1 {
    padding: 0.5rem 0;
    font-weight: 700 !important;
}

.asure-portal-app h2 {
    line-height: 2.5rem;
    font-weight: 700 !important;
    padding: 1rem 0;
}

.asure-portal-app .pto .h4 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}

.asure-portal-app .loading .bx--skeleton__placeholder {
    margin: 0.75rem 0;
}

.asure-portal-app .loading .bx--skeleton__placeholder.skeleton-h6 {
    height: 1.125rem;
}

.asure-portal-app .pto .list {
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-top: 1px solid var(--color-neutral-300, #ebebeb);
}

.asure-portal-app .pto .list:last-child {
    border-bottom: 1px solid var(--color-neutral-300, #ebebeb);
}

.asure-portal-app .pto-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

    .asure-portal-app .pto-list svg {
        font-size: 1.15rem;
    }

        .asure-portal-app .pto-list svg path {
            fill: #057fa8 !important;
        }

    .asure-portal-app .pto-list li {
        border-bottom: 1px solid var(--color-neutral-300, #ebebeb);
        padding: 1rem 0;
        position: relative;
    }

    .asure-portal-app .pto-list:first-child {
        border-top: 1px solid var(--color-neutral-300, #ebebeb);
    }

    .asure-portal-app .pto-list .pto-type {
        margin-left: 1.75rem;
    }

        .asure-portal-app .pto-list .pto-type.pending {
            margin-left: 0.625rem;
        }

.negative {
    color: var(--color-danger-600, #bf0018);
    font-style: italic;
}

.pto-pending {
    position: absolute;
    z-index: 200;
    left: -2%;
    top: 80%;
    width: 90%;
    background-color: var(--color-neutral-0);
    font-size: 0.875rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-neutral-300, #ebebeb);
    border-radius: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .pto-pending:before {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid var(--color-neutral-300, #ebebeb);
        display: block;
        content: '';
        position: absolute;
        top: -5px;
        left: 7px;
    }

    .pto-pending:after {
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 4px solid var(--color-neutral-0, #FFFFFF);
        display: block;
        content: '';
        position: absolute;
        top: -4px;
        left: 8px;
    }

    .pto-pending li {
        border: none !important;
        line-height: 24px;
        margin: 0;
        padding: 0;
    }

        .pto-pending li:first-child {
            border: none !important;
        }

        .pto-pending li:last-child {
            font-weight: 700;
        }

.asure-portal-app.pto a {
    line-height: 1.5rem;
    color: var(--color-primary-700, #006c93);
}

.asure-portal-app #homeAside .ACWidget {
    margin-bottom: 0.875rem;
}

.punchedIn {
    font-size: 1rem;
    gap: .25rem;
}

.asure-portal-app .punchedIn:before {
    height: 14px;
    width: 14px;
    background-color: #79AC37;
    border-radius: 50%;
    content: '';
    display: inline-block;
}

.asure-portal-app time.h1 {
    line-height: 1.3em;
}

#homeContent.asure-portal-app .ac-toast-details {
    padding-top: 0px;
}

#homeContent .tile-grid {
    gap: .5rem;
    column-gap: .5rem;
    grid-column-gap: .5rem;
}

#homeContent .tile-container .icon {
    height: 48px;
}

#homeContent .tile-container .link {
    height: 1.5rem;
    margin-top: auto;
}

    #homeContent .tile-container .link a.disabled {
        color: #9e9e9e !important;
        text-decoration: none;
        pointer-events: none;
    }

#homeContent .tile-container .body {
    height: calc(100% - 48px - 1.5rem - 4px);
}

@media only screen and (max-width: 550px) {
    .asure-portal-app .bannerHasHeaderOnly, .asure-portal-app .bannerHasMessage {
        height: auto !important;
        padding: .5rem 1rem !important;
    }

    .asure-portal-app .ACWidget {
        padding: 1rem !important;
    }

    .asure-portal-app .ac-toast.bx--toast-notification {
        min-width: auto !important;
    }
}

[v-cloak] {
    display: none;
}

.asure-portal-app .paystub-margin {
    margin-top: 0px;
}

.asure-portal-app div + .paystub-margin {
    margin-top: 24px;
}

.acknowledge-task-div {
    margin-top: 16px !important;
}

.acknowledge-task-div > div .skeleton-ACbanner-container {
    display: none !important;
}

.acknowledge-task-div > div:last-child .skeleton-ACbanner-container {
    display: flex !important;
}

.task-cards {
    gap: 0.5rem;
}

.task-cards > div {
    min-width: 260px;
    max-width: 384px;
}

.task-cards > div > div {
    width: 100%;
}

.task-cards .taskCard {
    width: 100%;
}

/* one item */
.task-cards > div:first-child:nth-last-child(1) {
    /* -or- li:only-child { */
    width: calc(100% - (.25rem * 3));
}
/* two items */
.task-cards > div:first-child:nth-last-child(2),
.task-cards > div:first-child:nth-last-child(2) ~ div {
    width: calc(50% - (.25rem * 3));
}
/* three items */
.task-cards > div:first-child:nth-last-child(3),
.task-cards > div:first-child:nth-last-child(3) ~ div {
    width: calc(33.3333% - (.25rem * 3));
}
/* four items */
.task-cards > div:first-child:nth-last-child(4),
.task-cards > div:first-child:nth-last-child(4) ~ div {
    width: calc(25% - (.25rem * 3));
}

@media only screen and (max-width: 1692px) {
    .task-cards > div:first-child:nth-last-child(4),
    .task-cards > div:first-child:nth-last-child(4) ~ div {
        width: calc(50% - .25rem);
    }
}

@media only screen and (max-width: 1281px) {
    /* three items */
    .task-cards > div:first-child:nth-last-child(3),
    .task-cards > div:first-child:nth-last-child(3) ~ div {
        width: 100%;
    }
}

@media only screen and (max-width: 585px) {
    .task-cards .taskCard {
        height: auto;
    }
    /* two items */
    .task-cards > div:first-child:nth-last-child(2),
    .task-cards > div:first-child:nth-last-child(2) ~ div {
        width: 100%;
    }

    /* four items */
    .task-cards > div:first-child:nth-last-child(4),
    .task-cards > div:first-child:nth-last-child(4) ~ div {
        width: 100%;
    }
}
/* NEW TIME OFF REQUEST ADMIN */



.sectionTimeOffRequests li {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

.sectionTimeOffRequests li, .sectionTimeOffRequests.viewMore li:nth-child(4) {
    border-bottom: 1px solid rgba(0,0,0,0.25);
}

.sectionTimeOffRequests li:last-child, .sectionTimeOffRequests li:nth-child(4) {
    border-bottom: none;
}

.sectionTimeOffRequests li {
    display: none;
}

.sectionTimeOffRequests li:nth-child(-n+4) {
    display: flex;
}

.sectionTimeOffRequests.viewMore li {
    display: flex;
}

.sectionTimeOffRequests li span.d-flex {
    gap: .5rem;
}

.sectionTimeOffRequests li .btn.cloud {
    font-size: 14px;
    text-transform: capitalize;
}

.sectionTimeOffRequests li .timeOffInformation {
    line-height: 1.25em;
}

.inputGroupCustom {
    width: 100%;
}

.unMaskIconEye {
    cursor: pointer;
    position: absolute;
    top: 9px;
    right: 11px;
    z-index: 9;
}

.productTourSection {
    display: none;
}

.importation {
    padding: 0 40px 40px 40px;
}

.importation label {
    font-weight: normal;
}

.importation legend {
    border: none;
}