/*-----------------------------------------------
|   Employee Profile Styles
-----------------------------------------------*/
/*-----------------------------------------------
|   Variables
-----------------------------------------------*/
/* Color Variables */
/* sizing */
/* Typo */
/*-----------------------------------------------
|   Functions & Mixins
-----------------------------------------------*/
@use "../variables" as *;
/** media query start from screen and maximum width you provide */
/** media query start from screen and maximum width you provide */
/** media query start from minimum width you provide and rest of the screen size expand */
/* styles */
div.search-section { display: flex; }

div.search-section img.side-image { width: 200px; height: 200px; object-fit: contain; object-position: center; }

.section-title { font-size: 14px; }

button.btn-icon { padding: .1rem .2rem; width: fit-content !important; height: fit-content !important; font-size: 18px; }

/* profile component */
div.profile-card { position: relative; display: block; background: transparent; }

@media (max-width: 576px) { div.profile-card { width: 100%; height: 180px; border-radius: 6px; overflow: hidden; } }

@media (min-width: 576px) and (max-width: 768px) { div.profile-card { width: 100%; height: 180px; border-radius: 6px; overflow: hidden; } }

@media (min-width: 768px) and (max-width: 960px) { div.profile-card { width: 100%; height: 240px; } }

@media (min-width: 960px) and (max-width: 1140px) { div.profile-card { width: 100%; height: 240px; } }

@media (min-width: 1140px) { div.profile-card { width: 100%; height: 240px; } }

div.profile-card img.profile-bg { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; }

div.profile-card .profile-picture-clip { position: absolute; margin: auto; top: 0; bottom: 0; right: 0; left: 0; overflow: hidden; }

@media (max-width: 576px) { div.profile-card .profile-picture-clip { width: 120px; height: 140px; } }

@media (min-width: 576px) and (max-width: 768px) { div.profile-card .profile-picture-clip { width: 120px; height: 140px; } }

@media (min-width: 768px) and (max-width: 960px) { div.profile-card .profile-picture-clip { width: 180px; height: 200px; } }

@media (min-width: 960px) and (max-width: 1140px) { div.profile-card .profile-picture-clip { width: 180px; height: 200px; } }

@media (min-width: 1140px) { div.profile-card .profile-picture-clip { width: 180px; height: 200px; } }

div.profile-card .profile-picture-clip .profile-border { display: none; }

div.profile-card .profile-picture-clip .profile-img-wrapper { position: relative; text-align: center; margin: auto 0; width: 100%; height: 100%; background: white !important; clip-path: url(#clip-profile-picture); }

div.profile-card .profile-picture-clip .profile-img-wrapper img.profile-img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    clip-path: url(#clip-profile-picture);
    z-index: 20;
    overflow: hidden;
    width: 96%;
    height: 95%;
    object-fit: cover;
    object-position: center;
}

div.profile-card .profile-picture-clip .profile-img-wrapper .image-hover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 96%; height: 95%; clip-path: url(#clip-profile-picture); background: #0067AB; z-index: 20; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; }

div.profile-card .profile-picture-clip .profile-img-wrapper .image-hover .upload-image-btn { color: white; }

@media (max-width: 576px) { div.profile-card .profile-picture-clip .profile-img-wrapper .image-hover .upload-image-btn { font-size: 20px; } }

@media (min-width: 576px) and (max-width: 768px) { div.profile-card .profile-picture-clip .profile-img-wrapper .image-hover .upload-image-btn { font-size: 20px; } }

@media (min-width: 768px) and (max-width: 960px) { div.profile-card .profile-picture-clip .profile-img-wrapper .image-hover .upload-image-btn { font-size: 32px; } }

@media (min-width: 960px) and (max-width: 1140px) { div.profile-card .profile-picture-clip .profile-img-wrapper .image-hover .upload-image-btn { font-size: 32px; } }

@media (min-width: 1140px) { div.profile-card .profile-picture-clip .profile-img-wrapper .image-hover .upload-image-btn { font-size: 32px; } }

div.profile-card .profile-picture-clip .profile-img-wrapper .image-hover p.btn-text { font-weight: normal; color: white; margin-top: .4rem; }

@media (max-width: 576px) { div.profile-card .profile-picture-clip .profile-img-wrapper .image-hover p.btn-text { font-size: 10px; } }

@media (min-width: 576px) and (max-width: 768px) { div.profile-card .profile-picture-clip .profile-img-wrapper .image-hover p.btn-text { font-size: 10px; } }

@media (min-width: 768px) and (max-width: 960px) { div.profile-card .profile-picture-clip .profile-img-wrapper .image-hover p.btn-text { font-size: 14px; } }

@media (min-width: 960px) and (max-width: 1140px) { div.profile-card .profile-picture-clip .profile-img-wrapper .image-hover p.btn-text { font-size: 14px; } }

@media (min-width: 1140px) { div.profile-card .profile-picture-clip .profile-img-wrapper .image-hover p.btn-text { font-size: 14px; } }

div.profile-card .profile-picture-clip .profile-img-wrapper .image-hover:hover { opacity: 1; transition: opacity ease-in 300ms; cursor: pointer; }

div#profile-component { display: flex; position: relative; }

@media (max-width: 576px) { div#profile-component { flex-direction: column !important; width: 100%; height: fit-content; } }

@media (min-width: 576px) and (max-width: 768px) { div#profile-component { flex-direction: column !important; width: 100%; height: fit-content; } }

@media (min-width: 768px) and (max-width: 960px) { div#profile-component { flex-direction: row !important; width: 100%; height: 86vh; } }

@media (min-width: 960px) and (max-width: 1140px) { div#profile-component { flex-direction: row !important; width: 100%; height: 86vh; } }

@media (min-width: 1140px) { div#profile-component { flex-direction: row !important; width: 100%; height: 86vh; } }

@media (max-width: 576px) { div#profile-component .profile-widget { display: flex; flex-direction: column; width: 100%; margin: 0 0 .6rem 0; } }

@media (min-width: 576px) and (max-width: 768px) { div#profile-component .profile-widget { display: flex; width: 100%; flex-direction: column; margin: 0 0 .6rem 0; } }

@media (min-width: 768px) and (max-width: 960px) { div#profile-component .profile-widget { display: block; min-width: 270px; max-width: 320px; overflow-y: scroll !important; flex-direction: column; margin-right: .4rem; } }

@media (min-width: 960px) and (max-width: 1140px) { div#profile-component .profile-widget { display: block; min-width: 270px; max-width: 320px; overflow-y: scroll !important; flex-direction: column; margin-right: .4rem; } }

@media (min-width: 1140px) { div#profile-component .profile-widget { display: block; min-width: 270px; max-width: 320px; overflow-y: scroll !important; flex-direction: column; margin-right: .4rem; } }

div#profile-component .profile-widget::-webkit-scrollbar { display: none; }

div#profile-component .profile-widget .profile-picture { position: relative; border-radius: 6px; overflow: hidden; transition: all ease-in 300ms; }

@media (max-width: 576px) { div#profile-component .profile-widget .profile-picture { width: 240px; height: 180px; margin-right: .4rem; } }

@media (min-width: 576px) and (max-width: 768px) { div#profile-component .profile-widget .profile-picture { width: 240px; height: 180px; margin-right: .4rem; } }

@media (min-width: 768px) and (max-width: 960px) { div#profile-component .profile-widget .profile-picture { width: 100%; height: 240px; } }

@media (min-width: 960px) and (max-width: 1140px) { div#profile-component .profile-widget .profile-picture { width: 100%; height: 240px; } }

@media (min-width: 1140px) { div#profile-component .profile-widget .profile-picture { width: 100%; height: 240px; } }

div#profile-component .profile-widget .profile-picture img.bg { position: relative; height: 100%; width: 100%; object-fit: cover; object-position: center; overflow: hidden; }

div#profile-component .profile-widget .profile-picture div.user-img { position: absolute; display: flex; align-items: center; justify-content: center; margin: auto; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; }

@media (max-width: 576px) { div#profile-component .profile-widget .profile-picture div.user-img { width: 140px; height: 140px; } }

@media (min-width: 576px) and (max-width: 768px) { div#profile-component .profile-widget .profile-picture div.user-img { width: 140px; height: 140px; } }

@media (min-width: 768px) and (max-width: 960px) { div#profile-component .profile-widget .profile-picture div.user-img { width: 210px; height: 210px; } }

@media (min-width: 960px) and (max-width: 1140px) { div#profile-component .profile-widget .profile-picture div.user-img { width: 210px; height: 210px; } }

@media (min-width: 1140px) { div#profile-component .profile-widget .profile-picture div.user-img { width: 210px; height: 210px; } }

div#profile-component .profile-widget .profile-picture div.user-img div.border-line { position: absolute; display: flex; margin: auto; background: #30B300; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); z-index: 10; }

@media (max-width: 576px) { div#profile-component .profile-widget .profile-picture div.user-img div.border-line { width: 168px; height: 190px; } }

@media (min-width: 576px) and (max-width: 768px) { div#profile-component .profile-widget .profile-picture div.user-img div.border-line { width: 108px; height: 130px; } }

@media (min-width: 768px) and (max-width: 960px) { div#profile-component .profile-widget .profile-picture div.user-img div.border-line { width: 168px; height: 190px; } }

@media (min-width: 960px) and (max-width: 1140px) { div#profile-component .profile-widget .profile-picture div.user-img div.border-line { width: 168px; height: 190px; } }

@media (min-width: 1140px) { div#profile-component .profile-widget .profile-picture div.user-img div.border-line { width: 168px; height: 190px; } }

div#profile-component .profile-widget .profile-picture div.user-img img#clipped-image { position: absolute; margin: auto; object-fit: cover; object-position: center; overflow: hidden; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); z-index: 10; }

@media (max-width: 576px) { div#profile-component .profile-widget .profile-picture div.user-img img#clipped-image { width: 160px; height: 180px; } }

@media (min-width: 576px) and (max-width: 768px) { div#profile-component .profile-widget .profile-picture div.user-img img#clipped-image { width: 100px; height: 120px; } }

@media (min-width: 768px) and (max-width: 960px) { div#profile-component .profile-widget .profile-picture div.user-img img#clipped-image { width: 160px; height: 180px; } }

@media (min-width: 960px) and (max-width: 1140px) { div#profile-component .profile-widget .profile-picture div.user-img img#clipped-image { width: 160px; height: 180px; } }

@media (min-width: 1140px) { div#profile-component .profile-widget .profile-picture div.user-img img#clipped-image { width: 160px; height: 180px; } }

div#profile-component .profile-widget .profile-info-section { width: 100%; }

div#profile-component .profile-info-area { width: 100%; }

div.hover-content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #0067AB; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); opacity: 0; z-index: 10; }

@media (max-width: 576px) { div.hover-content { width: 100px; height: 120px; } }

@media (min-width: 576px) and (max-width: 768px) { div.hover-content { width: 100px; height: 120px; } }

@media (min-width: 768px) and (max-width: 960px) { div.hover-content { width: 160px; height: 180px; } }

@media (min-width: 960px) and (max-width: 1140px) { div.hover-content { width: 160px; height: 180px; } }

@media (min-width: 1140px) { div.hover-content { width: 160px; height: 180px; } }

div.hover-content a { width: 100%; height: 100%; }

div.hover-content .upload-image-btn { display: flex; justify-content: center; align-items: center; flex-grow: 1; height: 100%; width: 100%; font-size: 36px; color: white !important; }

.profile-picture:hover { transition: all ease-in 300ms; }

.profile-picture:hover div.user-img { transition: all ease-in 300ms; }

.profile-picture:hover div.user-img div.border-line { background: white !important; transition: all ease-in 300ms; }

.profile-picture:hover div.user-img + .hover-content { opacity: 1; transition: all ease-in 300ms; }

.number-card { display: flex; flex-direction: column; background: #EDF2F9; text-align: center; padding: 1rem; border-radius: 4px; margin-right: 8px; }

.number-card p, .number-card h6 { margin: 0; padding: 0; }

.number-card h6 { font-weight: bold; color: #F69F1A; font-size: 16px; }

.number-card p { font-size: 12px; }

.name-info-wrapper { position: relative; flex-grow: 1; }

.name-info-wrapper .nam-info { display: flex; flex-direction: row; justify-content: space-between; align-items: start; width: 100%; }

.name-info-wrapper .nam-info h4 { font-size: 16px; font-weight: normal; color: #0067AB; flex-grow: 1; line-height: 22px; margin-bottom: .2rem !important; }

.name-info-wrapper .nam-info button { padding: .2rem .4rem !important; width: fit-content; height: fit-content; }

.name-info-wrapper .nam-info .dropdown-toggle::after { display: none; }

.position-badge { background: #EDF2F9; padding: .2rem .4rem !important; width: fit-content; height: fit-content; font-size: 10px !important; }

.profile-completion-card { position: relative; background: #EDF2F9; margin: .4rem 0 0 0; }

@media (max-width: 576px) { .profile-completion-card .chart-wrapper canvas { display: none; } }

@media (min-width: 576px) and (max-width: 768px) { .profile-completion-card .chart-wrapper canvas { display: none; } }

@media (min-width: 768px) and (max-width: 960px) { .profile-completion-card .chart-wrapper canvas { display: block; } }

@media (min-width: 960px) and (max-width: 1140px) { .profile-completion-card .chart-wrapper canvas { display: block; } }

@media (min-width: 1140px) { .profile-completion-card .chart-wrapper canvas { display: block; } }

.profile-completion-card .chart-wrapper .chart-percentage { font-weight: bold; }

@media (max-width: 576px) { .profile-completion-card .chart-wrapper .chart-percentage { position: relative; font-size: 12px; margin: .2rem .4rem .2rem 0; border-radius: 4px; padding: .4rem; background: white; } }

@media (min-width: 576px) and (max-width: 768px) { .profile-completion-card .chart-wrapper .chart-percentage { position: relative; font-size: 12px; margin: .2rem .4rem .2rem 0; border-radius: 4px; padding: .4rem; background: white; } }

@media (min-width: 768px) and (max-width: 960px) { .profile-completion-card .chart-wrapper .chart-percentage { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; font-size: 18px; } }

@media (min-width: 960px) and (max-width: 1140px) { .profile-completion-card .chart-wrapper .chart-percentage { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; font-size: 18px; } }

@media (min-width: 1140px) { .profile-completion-card .chart-wrapper .chart-percentage { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; font-size: 18px; } }

.profile-completion-card .completion-message-wrap { display: flex; width: 100%; }

@media (max-width: 576px) { .profile-completion-card .completion-message-wrap { align-items: center; justify-content: space-between; flex-direction: row; } }

@media (min-width: 576px) and (max-width: 768px) { .profile-completion-card .completion-message-wrap { align-items: center; justify-content: space-between; flex-direction: row; } }

@media (min-width: 768px) and (max-width: 960px) { .profile-completion-card .completion-message-wrap { align-items: start; flex-direction: column; } }

@media (min-width: 960px) and (max-width: 1140px) { .profile-completion-card .completion-message-wrap { align-items: start; flex-direction: column; } }

@media (min-width: 1140px) { .profile-completion-card .completion-message-wrap { align-items: start; flex-direction: column; } }

.profile-completion-card .completion-message-wrap h6 { font-size: 12px; font-weight: normal; width: fit-content; }

@media (max-width: 576px) { .profile-completion-card .completion-message-wrap h6 { margin-bottom: 0; } }

@media (min-width: 576px) and (max-width: 768px) { .profile-completion-card .completion-message-wrap h6 { margin-bottom: 0; } }

@media (min-width: 768px) and (max-width: 960px) { .profile-completion-card .completion-message-wrap h6 { margin-bottom: .4rem; } }

@media (min-width: 960px) and (max-width: 1140px) { .profile-completion-card .completion-message-wrap h6 { margin-bottom: .4rem; } }

@media (min-width: 1140px) { .profile-completion-card .completion-message-wrap h6 { margin-bottom: .4rem; } }

.profile-completion-card .completion-message-wrap button { font-size: 12px; }

@media (min-width: 576px) and (max-width: 768px) { .profile-completion-card { position: relative; } }

.profile-completion-card .card-body { padding: .6rem; display: flex; flex-direction: row; align-items: center; justify-content: start; }

.general-info-wrapper { position: relative; margin: .6rem 0; flex-wrap: wrap; flex-direction: row; justify-content: space-between; align-items: center; }

@media (max-width: 576px) { .general-info-wrapper { display: none; } }

@media (min-width: 576px) and (max-width: 768px) { .general-info-wrapper { display: none; } }

@media (min-width: 768px) and (max-width: 960px) { .general-info-wrapper { display: flex; } }

@media (min-width: 960px) and (max-width: 1140px) { .general-info-wrapper { display: flex; } }

@media (min-width: 1140px) { .general-info-wrapper { display: flex; } }

@media (max-width: 576px) { .quick-links-wrapper { display: none; } }

@media (min-width: 576px) and (max-width: 768px) { .quick-links-wrapper { display: none; } }

.quick-links-wrapper .title { font-size: 12px; font-weight: 600; margin-bottom: .6rem; }

.quick-links-wrapper .action-list { display: flex; flex-direction: row; flex-wrap: wrap; }

.quick-links-wrapper .action-list .btn { font-size: 18px; font-weight: normal; padding: .6rem; margin-right: .4rem; }

.quick-links-wrapper .action-list .btn svg { font-size: 18px; width: 18px; height: 14px; }

.chart-wrapper { position: relative; width: fit-content; height: fit-content; }

.chart-wrapper p.chart-percentage { position: absolute; width: fit-content; height: fit-content; font-size: 24px; font-weight: normal; color: #0067AB; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }

.chart-wrapper canvas.chart { width: 100px; height: 100px; }

.chart { position: relative; }

.chart .chart-wrapper-sm { position: relative; width: fit-content; height: fit-content; }

.chart .chart-wrapper-sm p.chart-percentage { position: absolute; width: fit-content; height: fit-content; font-size: 18px; font-weight: normal; color: #0067AB; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }

.chart .chart-wrapper-sm canvas.chart { width: 60px; height: 60px; }

.chart p.chart-title { font-size: 10px !important; }

/*-----------------------------------------------
|   Search Component styles
-----------------------------------------------*/
div.search-component { padding: 0; margin: 0; }

div.search-component .s-comp-wrapper { position: relative; display: flex; padding: 0; align-items: center; }

@media screen and (max-width: 576px) { div.search-component .s-comp-wrapper { flex-direction: row; flex-wrap: wrap; } }

@media (min-width: 576px) { div.search-component .s-comp-wrapper { flex-direction: row; } }

@media screen and (max-width: 576px) { div.search-component .s-comp-wrapper .select2-search-component { width: 80%; margin: 0 .6rem .6rem 0; } }

@media (min-width: 576px) { div.search-component .s-comp-wrapper .select2-search-component { flex-grow: 1; } }

div.search-component .s-comp-wrapper .filter-btn { width: fit-content; height: 100%; }

@media screen and (max-width: 576px) { div.search-component .s-comp-wrapper .filter-btn { width: fit-content; height: fit-content; margin: 0 0 .6rem 0; } }

@media (min-width: 576px) { div.search-component .s-comp-wrapper .filter-btn { margin: 0 .4rem 0 .6rem; } }

div.search-component .s-comp-wrapper .filter-btn .btn { height: 100%; padding: .4rem .6rem; font-size: 12px; }

div.search-component .s-comp-wrapper .filter-btn .btn svg { height: 12px; width: 12px; }

div.search-component .s-comp-wrapper .new-emp-btn { width: fit-content; margin: 0; }

@media screen and (max-width: 576px) { div.search-component .s-comp-wrapper .new-emp-btn { width: 100%; }
  div.search-component .s-comp-wrapper .new-emp-btn button { width: 100%; } }

/*-----------------------------------------------
|   Select2 Override styles
-----------------------------------------------*/
.user-image { border: 2px solid white; width: 40px; height: 40px; object-fit: cover; object-position: center; border-radius: 40px !important; margin-right: .6rem; }

.select2-selection { height: 30px; background: #EDF2F9; border-color: #B6C2D2; }

.select2-selection__rendered { padding: 0 .8rem; font-size: 12px; font-weight: bold; }

.select2-selection__placeholder { font-weight: normal; color: #727b8b; }

.select2-search__field { border: none !important; }

.select2-dropdown { background: #EDF2F9 !important; border-color: #B6C2D2; }

.select2-results {
    background: #EDF2F9;
    border-color: #B6C2D2;
}

.select2-results__options {
    background: #EDF2F9;
}

.select2-search--dropdown {
    padding: .4rem;
}

/*-----------------------------------------------
|   Tab Navigation Styles
-----------------------------------------------*/
.alert-wrapper {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    margin: auto;
}

ul.profile-tab-navigation {
    font-size: 12px !important;
    margin: .8rem 0;
    width: 100% !important;
}

ul.profile-tab-navigation li {
    margin-right: .5rem;
}

ul.profile-tab-navigation li.nav-item {
    background: white;
    font-weight: normal;
}

ul.profile-tab-navigation li.nav-item a.nav-link {
    padding: .4rem .6rem !important;
    color: #5E6E82;
}

ul.profile-tab-navigation li.nav-item a.nav-link:hover {
    background: #0067AB;
    color: white;
}

ul.profile-tab-navigation li.nav-item a.active {
    background: #0067AB;
    color: white;
}

/*-----------------------------------------------
|   Card Styles
-----------------------------------------------*/
div.qualification-card .q-title { font-size: 14px; line-height: 22px; line-break: auto; }

div.qualification-card p i { font-size: 12px; margin-right: .4rem !important; }

div.qualification-card .q-action { font-size: 12px; padding: 4px !important; }

div.qualification-new-card { height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: .6rem; }

div.qualification-new-card .card-body { border: 2px dashed #aeb3be; border-radius: 4px !important; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #aeb3be !important; }

div.qualification-new-card .card-body .action-title { font-size: 16px; font-weight: normal; width: fit-content; height: fit-content; color: #727b8b !important; }

div.spouse-card .s-title { font-size: 14px; font-weight: 600; line-height: 24px; }

div.spouse-card .s-info { cursor: pointer !important; user-select: none; }

div.children-card .c-title { font-size: 14px; font-weight: 600; line-height: 24px; }

div.children-card .c-info { cursor: pointer !important; user-select: none; }

div.contact-card .ct-number { font-size: 14px !important; font-weight: 600; line-height: 24px; }

div.contact-card .ct-number a:hover { text-decoration: none !important; text-underline: none !important; font-size: 14px !important; }

div.contact-card .ct-relationship { font-size: 12px; cursor: pointer; user-select: none; }

div.contact-card .ct-name { cursor: pointer !important; user-select: none; }

div.contact-card .actions { display: flex; flex-direction: row; align-items: center; }

div.contact-card .actions .btn { width: 36px; font-weight: normal; padding: .6rem !important; }

div.contact-card .actions .btn i { margin: 0; width: 12px; height: 12px; font-size: 12px !important; }

div.vaccination-card .v-name { font-size: 14px; margin-bottom: 0 !important; line-height: 24px; }

div.vaccination-card .badge { font-size: 10px !important; font-weight: normal !important; padding: .3rem .3rem !important; margin-bottom: 0 !important; }

div.vaccination-card .v-info { font-size: 12px; margin-bottom: 0 !important; }

div.vaccination-card .actions { display: flex; flex-direction: row; align-items: center; }

div.vaccination-card .actions .btn { width: 36px; font-weight: normal; padding: .6rem !important; }

div.vaccination-card .actions .btn i { margin: 0; width: 12px; height: 12px; font-size: 12px !important; }

div.document-card div.icon { justify-content: center; align-items: center; display: flex; background: #DBE5EC; border-radius: 4px; margin-right: .8rem; color: #0067AB; font-size: 24px; padding: 1.2rem !important; }

div.document-card div.icon i { color: #0067AB; }

div.document-card .document-info-wrapper .doc-name { position: relative; font-size: 14px; line-height: 24px; text-overflow: ellipsis; color: #024D7E !important; }

div.document-card .document-info-wrapper .doc-share { font-size: 12px; padding: .2rem .4rem; }

div.document-card .document-info-wrapper .doc-size { font-size: 12px; font-weight: normal; }

div.document-card .actions { display: flex; flex-direction: row; align-items: center; }

div.document-card .actions .btn { width: 36px; font-weight: normal; padding: .6rem !important; }

div.document-card .actions .btn i { margin: 0; width: 12px; height: 12px; font-size: 12px !important; }

.empty-search-card { position: relative; min-height: 157px; overflow: hidden; }

@media screen and (max-width: 576px) { .empty-search-card { margin: .6rem 0 0 0; } }

@media (min-width: 576px) { .empty-search-card { margin: .6rem 0 0 0; } }

@media screen and (max-width: 576px) { .empty-search-card .card-body { height: 260px; } }

.empty-search-card .search-background { position: absolute; margin: auto; object-fit: contain; object-position: center; }

@media screen and (max-width: 576px) { .empty-search-card .search-background { top: auto; left: auto; right: 20px; bottom: 0; width: 160px; height: 160px; } }

@media (min-width: 576px) { .empty-search-card .search-background { right: 0; left: auto; top: 0; bottom: 0; width: 220px; height: 220px; } }

.card-notification { position: relative; padding: 0; margin: 0; font-family: Poppins, sans-serif !important; }

.card-notification .card-header { padding: .8rem; font-family: Poppins, sans-serif !important; }

.card-notification .card-body { padding: .8rem; font-family: Poppins, sans-serif !important; }

.card-notification .card-footer { padding: .8rem; font-family: Poppins, sans-serif !important; }

.active-status-checkboxes { display: flex; flex-direction: row; justify-content: start; align-items: center; margin-bottom: .4rem; }

.form-check.form-check-inline { font-family: Poppins, sans-serif !important; }

.delete-filter { height: fit-content !important; font-size: 12px; padding: .225rem .225rem !important; }

div.profile-section-title { position: relative; display: flex; flex-direction: row; align-items: center; margin: .8rem 0 .4rem 0; width: 100%; min-height: 26px !important; }

div.profile-section-title .title { margin-bottom: 0; }

div.profile-section-title .title h1, div.profile-section-title .title h2, div.profile-section-title .title h3, div.profile-section-title .title h4, div.profile-section-title .title h5, div.profile-section-title .title h6 { margin-bottom: 0 !important; }

div.profile-section-title .actions { margin-left: auto; font-size: 12px; font-weight: normal; display: flex; flex-direction: row; }

div.profile-section-title .actions button.btn { font-size: 10px; font-weight: normal; padding: .4rem; align-items: center; justify-content: center; display: flex; margin-right: .4rem; }

div.profile-section-title .actions button.btn i, div.profile-section-title .actions button.btn svg { width: 12px !important; height: 12px !important; font-weight: normal; }

div.profile-section-title .actions button.btn:last-child { margin-right: 0 !important; }

.document-item-wrapper { margin-bottom: .4rem; }

.document-item-wrapper:last-child { margin-bottom: 0 !important; }

.document-item-wrapper .document-item { padding: .4rem .6rem; border: 1px solid #E5E5E5; background: #FFFFFF !important; border-radius: 4px; font-size: 12px; display: flex; flex-direction: row; align-items: center; }

.document-item-wrapper .document-item ::-webkit-scrollbar { display: none; }

.document-item-wrapper .document-item p.document-title { font-size: 12px; font-weight: normal; font-family: Poppins, sans-serif !important; margin-bottom: 0 !important; display: inline-block; max-width: 240px; height: fit-content; overflow: scroll; text-overflow: ellipsis; white-space: nowrap; }

.document-item-wrapper .document-item p.document-title:hover { width: fit-content; height: fit-content; overflow: scroll; text-overflow: unset !important; white-space: nowrap; margin-bottom: 0; }

.document-item-wrapper .document-item .document-actions { position: relative; margin-left: auto; display: flex; flex-direction: row; width: fit-content; }

.document-item-wrapper .document-item .document-actions button { font-size: 10px; padding: .2rem .5rem; height: fit-content; width: fit-content; }

.document-item-wrapper .document-item .document-actions button:first-child { margin-right: .4rem; }

.contact-info-wrapper { font-family: Poppins, sans-serif !important; }

.contact-info-wrapper .ct-number { font-family: Poppins, sans-serif !important; }

.contact-info-wrapper .ct-name { font-family: Poppins, sans-serif !important; }

.children-card { font-family: Poppins, sans-serif !important; }

.vaccination-info-wrapper { font-family: Poppins, sans-serif !important; }

.spouse-card { font-family: Poppins, sans-serif !important; }

.fancy-tab { padding: 0; margin: .8rem 0 0 0; position: relative; background: #FFFFFF; border-radius: 6px; overflow: hidden; }

.fancy-tab div.nav-bar { border-bottom: 3px solid #F3F3F3; }

.fancy-tab div.nav-bar .nav-bar-item { font-size: 14px; font-weight: 600; padding: .8rem 1rem; }

.fancy-tab div.tab-contents { margin: 0; background: #FFFFFF; }