@import url("/Template_Unionbank_Web_Themes/Theme.Template_Unionbank_Web_Themes.css?16763");

/* ===================================================================== */
/*  The following CSS was created using Theme Editor.                    */
/*  To modify this CSS, click "Open Theme Editor".                       */
/* ===================================================================== */

/* ===================================================================== */
/*  Root - CSS Variables                                                 */
/* ===================================================================== */

:root {
    /* Color - Brand */
    --color-primary: #ff9800;
    --color-secondary: #ff9800;

    --color-primary-hover: #bf7219;
    --color-primary-selected: rgba(255, 152, 0, .12);

    /* Color - Extended */
    --color-red-lightest: #faeaea;
    --color-red-lighter: #e9aaaa;
    --color-red-light: #d96a6a;
    --color-red: #c92a2a;
    --color-red-dark: #ab2424;
    --color-red-darker: #8d1d1d;
    --color-red-darkest: #6f1717;

    --color-pink-lightest: #fbebf0;
    --color-pink-lighter: #efadc4;
    --color-pink-light: #e27098;
    --color-pink: #d6336c;
    --color-pink-dark: #b62b5c;
    --color-pink-darker: #96244c;
    --color-pink-darkest: #761c3b;

    --color-grape-lightest: #f7ecfa;
    --color-grape-lighter: #dfb2e9;
    --color-grape-light: #c678d9;
    --color-grape: #ae3ec9;
    --color-grape-dark: #9435ab;
    --color-grape-darker: #7a2b8d;
    --color-grape-darkest: #60226f;

    --color-violet-lightest: #f1edfd;
    --color-violet-lighter: #c6b6f6;
    --color-violet-light: #9b7fef;
    --color-violet: #7048e8;
    --color-violet-dark: #5f3dc5;
    --color-violet-darker: #4e32a2;
    --color-violet-darkest: #3e2880;

    --color-indigo-lightest: #eceffd;
    --color-indigo-lighter: #b3c1f7;
    --color-indigo-light: #7b92f1;
    --color-indigo: #4263eb;
    --color-indigo-dark: #3854c8;
    --color-indigo-darker: #2e45a5;
    --color-indigo-darkest: #243681;

    --color-blue-lightest: #e8f2fa;
    --color-blue-lighter: #a3c9ea;
    --color-blue-light: #5fa1db;
    --color-blue: #1a79cb;
    --color-blue-dark: #1667ad;
    --color-blue-darker: #12558e;
    --color-blue-darkest: #0e4370;

    --color-cyan-lightest: #e7f2f4;
    --color-cyan-lighter: #9eccd3;
    --color-cyan-light: #56a6b2;
    --color-cyan: #0d8091;
    --color-cyan-dark: #0b6d7b;
    --color-cyan-darker: #095a66;
    --color-cyan-darkest: #074650;

    --color-teal-lightest: #e6f2ef;
    --color-teal-lighter: #9cccbd;
    --color-teal-light: #52a58c;
    --color-teal: #087f5b;
    --color-teal-dark: #076c4d;
    --color-teal-darker: #065940;
    --color-teal-darkest: #044632;

    --color-green-lightest: #ebf7ed;
    --color-green-lighter: #afe0b8;
    --color-green-light: #73c982;
    --color-green: #37b24d;
    --color-green-dark: #2f9741;
    --color-green-darker: #267d36;
    --color-green-darkest: #1e622a;

    --color-lime-lightest: #f1f8e8;
    --color-lime-lighter: #c7e3a2;
    --color-lime-light: #9ecd5c;
    --color-lime: #74b816;
    --color-lime-dark: #639c13;
    --color-lime-darker: #51810f;
    --color-lime-darkest: #40650c;

    --color-orange-lightest: #fef0e6;
    --color-orange-lighter: #fcc29c;
    --color-orange-light: #f99551;
    --color-orange: #f76707;
    --color-orange-dark: #d25806;
    --color-orange-darker: #ad4805;
    --color-orange-darkest: #883904;

    --color-yellow-lightest: #fef5e5;
    --color-yellow-lighter: #fbd999;
    --color-yellow-light: #f8bc4c;
    --color-yellow: #f59f00;
    --color-yellow-dark: #d08700;
    --color-yellow-darker: #ac6f00;
    --color-yellow-darkest: #875700;

    /* Color - Neutral */
    --color-neutral-0: #ffffff;
    --color-neutral-1: #f8f9fa;
    --color-neutral-2: #f1f3f5;
    --color-neutral-3: #e9ecef;
    --color-neutral-4: #dee2e6;
    --color-neutral-5: #ced4da;
    --color-neutral-6: #adb5bd;
    --color-neutral-7: #868e96;
    --color-neutral-8: #5c656d;
    --color-neutral-9: #343a40;
    --color-neutral-10: #15181a;

    /* Color - Semantic */
    --color-error-light: #fceaea;
    --color-error: #e03131;

    --color-warning-light: #fdf6e5;
    --color-warning: #e9a100;

    --color-success-light: #eaf3eb;
    --color-success: #2a843c;

    --color-info-light: #e5f5fc;
    --color-info: #009dde;

    /* Elevation / Shadow */
    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .1);
    --shadow-s: 0 2px 4px rgba(0, 0, 0, .1);
    --shadow-m: 0 4px 6px rgba(0, 0, 0, .1);
    --shadow-l: 0 6px 8px rgba(0, 0, 0, .1);
    --shadow-xl: 0 8px 10px rgba(0, 0, 0, .1);

    /* App Settings */
    --color-background-body: #f3f6f8;
    --header-color: #ffffff;
    --side-menu-size: 300px;
}

/* Login Background */

.layout-login-simple .layout-login-background, .layout-login-background {
    background-color: #fca40c;
}

/* Header Color */

.layout .header {
    background-color: var(--header-color);
}

.btn,
.Button {
    color: var(--color-primary);
}

.tag,
.badge,
.btn.Is_Default, 
.Button.Is_Default {
    color: #fff;
}

/*Font*/
@font-face {
   font-family: 'Roboto';
   src: url('/ResourceManagement_Style/Roboto-Regular.ttf');
}

.font-roboto{
    font-family: 'Roboto';
}

/*overwrite*/

:root{
    --color-orange: #FF9800;
    --bg-login-image: url('/ResourceManagement_Style/img/login_bg.jpg?45371');
    --font-semi-bold: 500;
    --border-radius-curved:15px;
}

body{
    mix-blend-mode:inherit;
    font-family: 'Roboto';
}

.layout-login .layout-login-background {
    background-image: var(--bg-login-image);
    background-size: cover;
    background-position-x: 100%;
}

label {
    margin-bottom: 10px;
}
.input{    
    padding: 15px;
    border-radius: 10px;
    height: auto;
}
.input, textarea.input, .select, select[disabled="disabled"] {
    padding: 15px;
    border-radius: 10px;
    height: auto;
}
.TableRecords .TableRecords_Header, .EditableTable thead th {
    background-color: #EAEAEA;
    border-radius: 5px 5px 0px 0px;
}

table a, table a:visited, table a:hover, table a:active{
    color:#000 !important;
}
table{
    font-size: var(--font-size-xs);
    color: #000;
}

.layout-header {
    padding: 1em !important;
}

.wizard-item .wizard-item-icon-wraper:before {
    height: 1px;
}

.choices__inner{
    font-size: var(--font-size-s);
    height: auto;
    line-height: calc(var(--font-size-s) * 2);
    border: 1px solid #F3F1F1;
    box-shadow: 0px 5px 13px rgb(209 209 209 / 50%);
    border-radius: 10px !important;
    padding: 4px 1px !important;
}
.choices{
    border-radius: var(--border-radius-curved);
}

.choices__list--single .choices__item{
    padding-top: var(--space-s);
}

div.Feedback_Message_Error, 
div.Feedback_Message_Warning, 
div.Feedback_Message_Success, 
div.Feedback_Message_Info{
    min-width: auto;
}
 
div.Feedback_Message_Info{
    background-color:  var(--color-info);
}

div.Feedback_Message_Info > a.Feedback_Message_Wrapper_Close {
    -webkit-text-stroke: 2px var(--color-info);
}
.layoutsimple .layout .main {
    padding-top: 0px;
}
.is--visible .dropdown-header.select {
    border: none;
}

.layout .Form .input.Not_Valid,
.layout .Form .select.Not_Valid {
    padding: var(--space-base) var(--space-base);
}
.accordion-item .accordion-item-header{
    font-size: var(--font-size-s) !important;
}
.accordion-item.recognition{
    border-radius: var(--border-radius-curved);
}
.accordion-item.recognition.is--open {
    border-radius: var(--border-radius-curved);
    border-top: var(--border-size-s) solid var(--color-neutral-4);
}

.qq-upload-drop-area {
    background: var(--color-primary-ext);
}

.modal-wrapper {
    max-width: 900px !important;
    width: auto;
}

/*end overwrite*/

.button-request-leave{
    background: #F8BB4D;
    font-size: 12px;
    border-radius: 10px;
    padding-bottom: var(--space-s);
    padding-left: var(--space-m);
    padding-right: var(--space-m);
    padding-top: var(--space-s);
    color: black;
}

.border-bottom-primary{
    border-bottom: 2px solid var(--color-primary);
}

.font-normal{
    font-weight: normal;
}


.overflow-word-break{
    overflow-wrap: break-word;
}
.font-weight-normal{
    font-weight: normal;
}

.display-none{
    display:none;
}

.btn-delete{
    color: #fff;
    background: var(--color-black);
    border-radius: 5px;
    padding: var(--space-s);
    text-align: center;
    font-size: var(--font-size-s);
    filter: drop-shadow(0px 4px 4px var(--color-neutral-6));
}

.display-initial{
    display: initial !important;
}
.border-orange-s{
    border: var(--border-size-s) solid var(--color-primary);
}
.width-auto{
    width: auto;
}

.width-half{
    width:50%;
}

.profile-photo{
    height: 150px;
    width: 150px;
    padding: var(--space-xs);
    border-radius: var(--border-radius-rounded);
    border: 2px solid var(--color-orange-light);`
}
.profile-image-wrap { 
    /* whatever the dimensions you want the "cropped" image to be */
    height: 6.5em;
    width: 6.5em;
    overflow: hidden; 
}
.view-profile-image-wrap { 
    /* whatever the dimensions you want the "cropped" image to be */
    height: 6em;
    width: 6em;
    overflow: hidden; 
}
.profile-image-wrap img, .view-profile-image-wrap img{
    max-width:500% !important;
}
 
.overflow-wrap-anywhere{
    overflow-wrap: anywhere;
}

.align-center{
    align-items:center;
    display: inline-flex;
}

.border-radius-top-soft{
    border-radius: 4px 4px 0px 0px;
}

.border-radius-bottom-soft{
    border-radius: 0px 0px 4px 4px;
}

.border-radius-curved{
    border-radius: var(--border-radius-curved);
}

.top-menu-layout-header{
    background: #F2F2F2;
    padding: var(--space-s) var(--space-l);
}
.top-menu-right{
    align-items: center;
    display: inline-flex;
    text-align: right;
}

.enrollment-card{    
    background: #fff;
    border-radius: 8px;
    filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.16));
    height: 350px;
    margin-top: -215px;
    width: 540px;
    margin-left: 170px;
}

.enrollment-card img{
    border-radius: 8px 8px 0px 0px;
    width: 120% !important;
}

.boxShadow {
    box-shadow: 2px 2px 10px 2px #e5e5e5;
    border: 0.5px #e5e5e5;
    border-radius: 5px;
}


.login-left{
    padding:0 20%;
}

.logininfo-options{
    background: #fff;
    margin-top: 1%;
    position: absolute;
    margin-left: 10.2%;
    width: 165px;
    border-radius: var(--border-radius-soft);
    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.logininfo-options a:visited{
    color:  #000;
}

.left-nav{
    width:8vw;
    position:fixed;
}

.left-nav > div:nth-child(1){
    min-height: 500px;
    padding: 5%;
    background: #fff;
    border-radius:4px;
    margin: 20px 0 20px 20px;
    box-shadow: 0px 5px 25px rgb(0 0 0 / 8%);
}

.right-content{
    width: 89vw;
    margin-left: 10%;
}

.text-note{
    font-size: 12px;
    color: #9B9B9B;
}

.text{
    color: #4F4F4F;
}

.btn-gray{
    background: #E0E0E0;
    color:#636363;
    border:none;
}

.btn-white-gray{
    background: #fff;
    border:1px solid #636363;
    color:#636363 !important;
}

.jz-menu-size{
    max-height: 2em;
    max-width: 2em;
}

.jz-menu-card{
    text-align: center;
    border: none;
    background: none;
    padding: 7px 0px;
}

.Responsive div.Feedback_Message_Wrapper {
    margin-top: 35px;
}

.ja-login-card{
    background: #ffffff;
    padding: 10% 5% 10% 5%;    
    margin: 0 auto;
    max-width: 45%;
}


/*Custom Layout*/
.layout-header{
    background-color: #4E4B48;
    border-radius: 7px;
    padding: 2em;
}

/*Landing Page*/

.sidebar-card{
    box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.08);
    margin: 20px 0 20px 20px;
}

.lead-cards .columns .columns-item .card{
    height: fit-content;
    box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.08);
}

.white-card{
    background-color: #ffffff;
}

.success-modal .modal-wrapper{
    max-width: 800px;
    width: 100%;
    padding:3%;
}

/*Login*/
.signin-wrapper{
    margin-top:-29%;
}
.signin-wrapper > div:nth-child(1){
    background: #fff;
    padding: var(--space-xxl);
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-s);
    margin-top: 30px;
}
.signin-wrapper > div:nth-child(2){
    background: #fff;
    padding: var(--space-xxl);
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-s);
    margin-top: 120px;
}


/*Leads Flow*/
.add-member-header{
    background: #fff;
    border-radius: 10px;
    padding: 1%;
}

.plus-img{
    margin-top: 2px;
    margin-left: -5px;
}

.add-member-content{
    background: #fff;
    margin:0 auto;
    margin-top:20px
}
.proj-details-cont{
    padding: var(--space-m);
    border-radius: 10px;
    border:1px solid var(--color-background-body);
    box-shadow: 2px 2px var(--color-background-body);
}
.label-approved{
    background: #37B24D;
    color:#fff;
    border-radius: 5px;
    padding:3%;
    text-align: center;
}

.label-rejected{
    background: var(--color-red);
    color:#fff;
    border-radius: 5px;
    padding:3%;
    text-align: center;
}


.label-resigned{
    background: #848791;
    color:#fff;
    border-radius: 5px;
    padding:3%;
    text-align: center;
}

.label-forapproval{
    background: #fff;
    color: var(--color-orange);
    border: 1px solid var(--color-orange);
    border-radius: 5px;
    padding:3%;
    text-align: center;
}

.label-forreview{
    color: #fff;
    background: var(--color-orange);
    border-radius: 5px;
    padding:3%;
    text-align: center;
}

.label-noproject{
    background: #FF9F00;
    border-radius: 5px;
    color: #fff;
    padding: 3%;
}

.label-active{
    background: #37B24D;
    padding: var(--space-xs) var(--space-m);
    border-radius: var(--border-radius-soft);
    color: white;
    text-align: center;
    font-size: var(--font-size-xs);
}
.name-icon{
    background-color: var(--color-orange); 
    color: #fff;
    border-radius: var(--border-radius-circle); 
    padding: var(--space-m);
    font-size: 24px;
    font-weight: 500;
}

.members-nav{
    background: #FAF9FA;
    border-radius: 10px 10px 0px 0px;
    padding:2%;
    font-size: var(--font-size-s);
}

.memberdetals-status{
    border: 1px solid #D26C11;
    color: #D26C11;
    padding:8%;
    border-radius: var(--border-radius-rounded);
}

.profile-star{
    margin-left: -10%;
    margin-top: 10%;
}

/*Lead Dashboard*/

.graph-cont{
    border-radius: 10px;
    padding: var(--space-m);
    background: #fff;
    filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.12));
}

.graph-cont .highcharts-container{
    width:100%;
}
.summary-card{
    border-radius: 10px;
    padding: var(--space-m);
    background: #fff;
    width: 19%;
    margin-right: 1%;
    filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.12));
    color: linear-gradient(180deg, #FF8B00 0%, #F32C00 100%);
    font-weight: bold;
}

/*Form*/

.form-label{
    color:#9B9B9B;
}

.animated-label input:not(:-webkit-autofill) {
    border: 1px solid #E0E0E0;
}
.animated-label-inline .input:focus, 
.layout .Form .animated-label-inline .input.ReadOnly:not(.Not_Valid):focus{
    bordeR: 1px solid #E0E0E0;
}

.employee-enroll .multiple-file-container{
    width:auto ;
    margin-left: -322px !important;
    margin-top: 40px !important;
}

.employee-member .multiple-file-container{
    width: 120px;
    margin-left: -20px;
    height: 43px;
    margin-top: -120px;
}

.new-accordion-wrapper{
    border: var(--border-size-s) solid var(--color-neutral-4);
    border-bottom-width: var(--border-size-s);
    border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft);
    margin-bottom: var(--space-xs);
}

.new-accordion-header{
    border-top: var(--border-size-m) solid var(--color-primary);
    margin-top: -3px;
}

/*Project Upload*/

.qq-upload-drop-area {
    min-height: 50px !important;
    font-size: 14px !important;
    background: #FF9800 !important;
}


.qq-uploader {
    margin-top: -15px !important;
}

.certbadge .qq-uploader {
    margin-top: -180px !important;
}
.qq-upload-button {
    float: left !important;
    margin-top: 0px;
    margin-bottom: 0px;
}

.Add {
    background: #FFFFFF;
    border: 1px solid #FF9800 ;
    box-shadow: 0px 5px 9px rgb(209 209 209 / 24%) ;
    border-radius: 7px;
    color: #FF9800;
    margin-top: 85px;
    margin-left: 147px;
    height: 42px;
    width: 113px;
    margin-right: 145px;
    margin-bottom: 10px;
}

.certbadge .Add {
    background: var(--color-primary);
    border-radius: 7px;
    color: #fff;
    margin-top: 100px;
    margin-left: 110px;
    height: 42px;
    width: 120px;
}

.btn-upload-div{
    position: fixed;
    bottom: 20px;
    width: 91%;
    right: 20px;
}

.upload-container {
    border-style: dotted;
    border-width: 1px;
    height: 150px;
    margin-top: 0px;
    width: 400px;
    margin-left: 10px;
    border-color: #FF9800;
}

.file-name{
    position: absolute;
    height: 140px;
    top: 120px;
    width: 400px;
    margin-left: 55px;
    text-align: center;
    font-size: 14px;
}
.icon-clip{
    position: absolute;
    left: 260px;
    top: 90px;
}

.drag-drop{
    position: absolute;
    left: 210px;
    top: 130px;
    font-size: 14px;
    color: #f90;
}

/*Dashboard*/

.member-dashboard-header{
    background: url('/ResourceManagement_Style/img/dashboardheader.png?45371') no-repeat;
    background-size: cover;
}
.member-dashboard-header .Button + .Button {
    margin-left: 1.96078431372549%;
}
.overtime-header{
    background: url('/ResourceManagement_Style/img/overtimeheader.png?45371') no-repeat;
    background-size: cover;
    height:130px;
}

.vl-header{
    background: url('/ResourceManagement_Style/img/vlheader.png?45371') no-repeat;
    background-size: cover;
    height:130px;
}

.sl-header{
    background: url('/ResourceManagement_Style/img/slheader.png?45371') no-repeat;
    background-size: cover;
    height:130px;
}

.announcement-header{
    background: url('/ResourceManagement_Style/img/announcementheader.png?45371') no-repeat;
    background-size: cover;
    height:180px;
}

.announcement-uploader-wrapper{
    height: 43px;
    margin-top: -210px;
    width: 125px;
    margin-left: 210px;
}
.requirements-header{
    background: url('/ResourceManagement_Style/img/requirementsheader.png?45371') no-repeat;
    background-size: cover;
    height:180px;
}

.onboarding-image{
    background: url('/ResourceManagement_Style/img/BPAGroupPhoto.jpg?45371') no-repeat;
    background-size: cover;
}
.announcement-counter{
    background: var(--color-blue);
    border-radius: var(--border-radius-circle);
    color: #fff;
    font-size: 10px;
    padding: 3.5px 6px;
    top: -2px;
    width: auto;
    text-align: center;
}
.announcement-img{
    height: 18vw;
    width: 16vw;
    object-fit: contain;
}
.new-announcement-img{
    height: 15vw;
    width: 13vw;
    object-fit: contain;
}

/*Resource Assignment Table*/

.view{
    width: 87vw;
}
.wrapper {
  position: relative;
  overflow: auto;
  white-space: nowrap;
}

.sticky-col {
  position: -webkit-sticky;
  position: sticky;
}

.first-col {
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  left: 0px;
    border: 1px solid #fff;
}

.second-col {
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  left: 251px;
    border: 1px solid #fff;
}

.project-name-text{
    text-overflow: ellipsis;
    white-space: pre-wrap;    
}
.name-role{
    background-color: #4B4948;
}

.month-header-bg{
    background-color: #56a6b2;
}

.month-header{
    width:140px;
    margin-left: 1px;
    display: table-cell;
}

.projects-cell{
    min-width: 140px;
    max-width: 140px;
    margin-left: 1px;
    display: table-cell;
    border: 1px solid #fff;
    vertical-align: middle;
}

.margin-left-1{
    margin-left: 1px;
}

.resourceassignment .Button + .Button{
    margin-left: var(--space-s);
}

.certificate-badge{
    object-fit:contain;
}


.upload-form{
    background: #FFFFFF;
    border: 1px solid #FF9800;
    box-shadow: 0px 5px 9px rgb(209 209 209 / 24%);
    border-radius: 7px;
    color: #FF9800;
    margin-top: 10px;
    height: 42px;
    width: 113px;
}


.policy .qq-uploader {
  margin-top: 0px;
}

.policy .filename{
    font-size: 14px;
    margin-top: -31px;
    margin-left: 140px;
    margin-bottom: 60px;
}

.member-details .modal-wrapper{
    max-width: 500px !important;
    width: 100%;
}


/*Project Details*/

.projects .TableRecords .TableRecords_EvenLine{
    padding: 0px !important;
    font-size: 13px;
}

.projects .TableRecords .TableRecords_OddLine{
    padding: 0px !important;
    font-size: 13px;
}

.projects .TableRecords .TableRecords_Header .ThemeGrid_MarginGutter{
    margin-left: 1.7%;
}

.projects .TableRecords .accordion-item .accordion-item-title, 
.projects .TableRecords .accordion-item .accordion-item-header{
    font-size: 13px !important;
}


.assign-active{
    background: #37B24D;
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--border-radius-soft);
    color: white;
    text-align: center;
    font-size: var(--font-size-xs);
}
.assign-inactive{
    background: var(--color-neutral-6);
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--border-radius-soft);
    color: white;
    text-align: center;
    font-size: var(--font-size-xs);
}

.bday-names{
    white-space: initial;
    word-wrap: break-word;
    font-size: 120%;
}