/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.menu .app-brand.demo {
    height: 64px;
}

.dark-style .menu .app-brand.demo {
    height: 64px;
}

.app-brand-logo.demo svg {
    width: 30px;
    height: 24px;
}

.app-brand-text.demo {
    font-size: 1.25rem;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
    padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
    z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
    display: block !important;
}

.demo-inline-spacing > * {
    margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
    margin-top: 1.25rem !important;
    margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
    margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
    margin-top: 1.875rem !important;
    margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
    margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
    margin-top: 5rem !important;
    margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
    margin-top: 0 !important;
}

.rtl-only {
    display: none !important;
    text-align: left !important;
    direction: ltr !important;
}

[dir="rtl"] .rtl-only {
    display: block !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
    #dropdown-variation-demo .btn-group .text-truncate {
        width: 300px;
        position: relative;
    }
    #dropdown-variation-demo .btn-group .text-truncate::after {
        position: absolute;
        top: 45%;
        right: 0.65rem;
    }
}
/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 1.25rem;
}
.layout-demo-placeholder img {
    width: 900px;
}
.layout-demo-info {
    text-align: center;
    margin-top: 1.25rem;
}
.list_color:hover {
    color: #15a7f5;
}

/* Employee List */
.employeelist_pagination {
    justify-content: end !important;
}
.card_sec_headr_dropoption {
    margin-right: 6px;
}
@media (min-width: 1024px) and (max-width: 1305px) {
    .card_sec_headr_font {
        font-size: 15px !important;
    }
}

@media (max-width: 1023px) {
    .card_sec_headr_font {
        font-size: 12px !important;
    }
    .Employee_table_div {
        gap: 16px;
    }
    .card_sec_headr_options {
        width: 100%;
    }
}
@media (max-width: 520px) {
    .Btn_width_dropdown {
        width: 100%;
    }
    .card_sec_headr_dropoption,
    .card_sec_headr_dropoption2 {
        width: 100% !important;
        display: inline-block;
        padding: 10px 16px;
        box-sizing: border-box;
    }
    .employeelist_pagination {
        justify-content: center !important;
    }
    .card_sec_headr_font {
        font-size: 14px !important;
    }
    .card_sec_headr_dropoption2 {
        margin-top: 8px;
    }
}

/* NewEmployeeOnboarding Personal-Details */
@media (max-width: 520px) {
    .img_res_mob {
        height: 85px !important;
        width: 85px !important;
    }
}

/* Invite Employee List */

.Invite_Emply_Cardheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 520px) {
    .Invite_Emply_Cardheader {
        flex-direction: column;
        align-items: start;
        gap: 10px;
    }
    .inviteemployeelist_pagination {
        justify-content: center !important;
    }
}

/* (Company) Index.blade.php */
.Company_index_card_header .addbutton {
    display: flex;
    justify-content: end;
    align-items: center;
}
@media (max-width: 374px) {
    .Company_index_card_header {
        flex-direction: column;
        align-items: start !important;
    }
    .Company_index_card_header .addbutton {
        margin-top: 10px;
    }
}

/* (Project) Index.blade.php */
@media (min-width: 425px) {
    .Project_index_card_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

/* Leave Pakage Index */
@media (min-width: 768px) and (max-width: 1023px) {
    .leave_pkg_small {
        font-size: 12px;
    }
}
.select2-container {
    width: 100% !important;
}
.select2-container--default .select2-selection--multiple {
    padding: calc(0.5rem - 1px) calc(0.5rem - 1px) !important;
}

/* Tier Pakage Index */
@media (min-width: 768px) and (max-width: 1023px) {
    .tier_pkg_small {
        font-size: 12px !important;
    }
}

/* Attendence Index */
/* Existing styles */
@media (min-width: 768px) and (max-width: 1023px) {
    .Attendence_pkg_small {
        font-size: 13px !important;
    }
}

@media (min-width: 320px) and (max-width: 520px) {
    .Attendence_pkg_small {
        width: 100%;
        text-align: center;
    }
}
.dropdown-menu-width {
    width: 100%;
}

.dropdown-menu {
    min-width: 0;
}

.BORDERRRR {
    border: none !important;
    color: white !important;
    background-color: #ffb400 !important;
}
.BORDERRRR:hover {
    background-color: #ffb400 !important;
}
/* This will target the arrow of the select dropdown */
#exampleSelect {
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none;
    padding-right: 25px; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

#exampleSelect option {
    background: white !important;
    color: black;
}

.dropdown {
    position: relative;
}

.dropdown:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 0;
    height: 0;
    pointer-events: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid white;
    transform: translateY(-50%);
}

/* Roaster */

@media (min-width: 320px) and (max-width: 520px) {
    .roaster_btn_w {
        width: 100%;
    }
}
.width_class {
    width: auto !important;
}
/* Link Management Create */
@media (max-width: 520px) {
    .HMDORWGBY label {
        width: 100%;
        margin-bottom: 12px;
    }
    .Workin_Day_Width {
        width: 100% !important;
    }
    .Workin_Day_Width label {
        width: 100%;
    }
    .modal-content .modal-header .modal-title {
        font-size: 0.9rem;
        text-wrap: wrap;
    }
}

/* NavBar Notification */
.dropdown-notifications-list .notification-list {
    overflow-y: auto;
    overflow-x: auto;
    white-space: nowrap;
}

.dropdown-notifications-list .notification-list::-webkit-scrollbar {
    height: 4px;
    width: 4px;
}

.dropdown-notifications-list .notification-list::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

.dropdown-notifications-list .notification-list::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* form */
@media (max-width: 400px) {
    .eye-icon {
        position: absolute !important;
        top: 30px !important;
        right: 23px !important;
    }
    .arrow-icon {
        position: absolute !important;
        top: 45px !important;
        right: 14px !important;
    }
}