@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    --side-margin: 80px;
    --blur: 40px;
}

body{
    background: #ffffff;
    font-family: Poppins;
    font-weight: normal;
    color: var(--MAIN-DARKEN-90);
}

#divBackgroundCircle{
    position: fixed;
    width: 100vw;
    height: 100vw;
    right: -50%;
    top: -20%;
    background: var(--MAIN-LIGHTEN-90);
    opacity: 0.8;
    border-radius: 50%;
    z-index: -1;
}

#divBackgroundCircleLayerOne{
    position: fixed;
    width: 100vw;
    height: 100vw;
    right: -40%;
    bottom: -130%;
    background: var(--MAIN-LIGHTEN-80);
    opacity: 0.8;
    border-radius: 50%;
    z-index: -1;
}

#divLogin{
    position: absolute;
    width: 700px;
    left: calc(50% - 350px);
    margin-top: 10%;
    border-radius: 20px;
    backdrop-filter: blur(var(--blur));
    /*box-shadow: 0px 0px 2px #323232;*/
    border: 1px solid #f1f1f1;
    padding-bottom: 50px;
    padding-top: 50px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.2);
}

#divLeftBottomOverlay{
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 400px;
    height: 400px;
    background: url('/images/overlay_cms.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.3;
    z-index: -1;
}

#divLogin label{
    font-weight: normal;
}

#divLogin .panel-body{
    text-align: center;
}

#imgLoginLogo{
    width: 200px;
    margin: auto;
    margin-bottom: 50px;
}

button{
    background: var(--MAIN) !important;
    border-color: var(--MAIN-DARKEN-20) !important;
}

a{
    color: var(--ACCENT) !important;
}

input:focus{
    outline: none !important;
    border: 2px solid var(--ACCENT) !important;
}

select:focus{
    outline: none !important;
    border: 2px solid var(--ACCENT) !important;
}

textarea:focus{
    outline: none !important;
    border: 2px solid var(--ACCENT) !important;
}

.checkbox:checked:before{
    background-color: var(--ACCENT) !important;
}

.has-error .help-block, .has-error .control-label{
    color: var(--ACCENT) !important;
    font-weight: 300 !important;
}

.has-error .control-label{
    color: #636b6f !important;
}
#pLoginVersion{
    font-size: 12px;
    text-align: center;
}

header{
    padding-top: 50px;
    margin-left: var(--side-margin);
    margin-right: var(--side-margin);
}

#divUser{
    float: right;
    margin: 0px;
    padding: 0px;
}

#divUser p {
    margin: 0px;
    font-weight: 400;
    font-size: 15px;
    float: left;
}

#divAvatarHolder{
    width: 50px;
    height: 50px;
    background: #ffffff;
    border-radius: 25px;
    float: left;
    margin-right: 10px;
    margin-top: -13px;
}

#divAvatarHolder img{
    width: 44px;
    height: 44px;
    border-radius: 24px;
    margin-left: 3px;
    margin-top: 3px;
}

#divInbox{
    float: left;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
    margin-top: 4px;
}

#divInbox i{
    font-size: 22px;
}

#pInboxCounter{
    position: absolute;
    background: var(--ACCENT);
    width: 20px;
    height: 20px;
    border-radius: 10px 10px 10px 6px;
    text-align: center;
    color: #ffffff;
    top: -10px;
    right: -10px;
    font-size: 9px;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    padding-top: -2px;
}

#pUsername{
    cursor: pointer;
}

#divUsernameHolder{
    float: right;
    position: relative;
}

#divUserSubMenu{
    background: #ffffff;
    border-radius: 15px;
    padding: 20px;
    box-sizing: border-box;
    float: left;
    position: absolute;
    top: 45px;
    right: 0px;
    text-align: right;
    display: none;
    min-width: 160px;
    box-shadow: 0px 0px 10px #f1f1f1;
    z-index: 10;
}

#divUserSubMenu::before{
    content: "";
    display: block;
    position: absolute;
    border-radius: 35px 35px 40px 40px;
    right: 20px;
    top: -10px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    border-bottom: 20px solid white;
}

#divUserSubMenu a{
    color: var(--MAIN-DARKEN-80) !important;
    float: right;
    margin-bottom: 10px;
}

#divUserSubMenu a p{
    margin: 0px;
    padding: 0px;
}

#divUserSubMenu i{
    margin-left: 0px;
    width: 40px;
    text-align: center;
}

#iUsernameArrow{
    transition: all 0.2s ease-in-out;
}

.iSubMenuHandle{
    transition: all 0.2s ease-in-out;
}

#divInboxMenu{
    background: #ffffff;
    border-radius: 15px;
    padding: 20px;
    box-sizing: border-box;
    float: left;
    position: absolute;
    top: 45px;
    right: -27px;
    text-align: right;
    display: none;
    min-width: 460px;
    box-shadow: 0px 0px 10px #f1f1f1;
    z-index: 10;
}

#divInboxMenu::before{
    content: "";
    display: block;
    position: absolute;
    border-radius: 35px 35px 40px 40px;
    right: 20px;
    top: -10px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid white;
}

#tableInbox{
    width: 100%;
    margin-top: 10px;
}

#tableInbox i{
    width: 100%;
    text-align: center;
    font-size: 18px;
}

#tableInbox p{
    width: 100%;
    text-align: center;
    font-size: 14px;
}

#divInboxMenuContentWrapper{
    text-align: left;
}

#divMenu{
    width: 380px;
    height: 100%;
    position: fixed;
    background: #ffffff;
    left: 0px;
    top: 0px;
    padding-left: var(--side-margin);
    padding-top: 50px;
    transition: left 0.2s ease-in-out;
}

#imgLogo{
    width: 200px;
}

#divMenu ul{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    margin-top: 50px;
    margin-left: calc(var(--side-margin) * -1);
}

#divMenu ul a{
    text-decoration: none;
    color: var(--MAIN-DARKEN-80);
}

#divMenu ul li{
    display: block;
    float: left;
    width: 100%;
    margin: 0px;
    min-height: 50px;
    margin-bottom: 2px;
    padding-top: 12px;
    box-sizing: border-box;
    padding-left: var(--side-margin);
    cursor: pointer;
    color: var(--MAIN-DARKEN-80);
}

#divMenu ul li:hover{
    background: rgba(249,249,249, 0.8);
}


#divMenu ul .liMenuHasSub:hover{
    background: #FFFFFF;
}

#divMenu ul li i{
    float: left;
    font-size: 25px;
    width: 25px;
    text-align: center;
    margin-right: 20px;
}

#divMenu ul li p{
    float: left;
}

#divMenu .ulMenuSub{
    width: 100%;
    display: none;
    list-style-type: none;
}

.liMenuSelected .ulMenuSub i{
    color: var(--MAIN-DARKEN-90);
}

.ulMenuSub li{
    display: block;
    width: calc(100% + var(--side-margin)) !important;
    margin-left: 0px;
    padding-left: calc(40px + var(--side-margin)) !important;
}

.ulMenuSub i{
    font-size: 6px !important;
    margin-top: 9px;
    width: auto;
}

.iSubMenuHandle{
    font-size: 15px !important;
    float: right !important;
    margin-top: 5px;
}

.aSubMenuSelected{
    color: var(--ACCENT) !important;
}


.aSubMenuSelected li{
    color: var(--ACCENT) !important;
}

.liMenuSelected::before{
    content: "";
    background: var(--ACCENT);
    width: 10px;
    height: 10px;
    display: block;
    position: absolute;
    border-radius: 5px;
    left: 20px;
    margin-top: 8px;
}

.liMenuSelected i, .liMenuSelected p{
    color: var(--ACCENT) !important;
}

#divMenuVersionHolder{
    position: fixed;
    bottom: 30px;
    text-align: center;
    width: 380px;
    margin-left: calc(var(--side-margin) * -1);
}

#pMenuVersion{
    text-align: center;
    width: 100%;
    font-weight: 500;
    margin: 0px;
}

@keyframes rotateFull {
    from {transform: rotate(0deg)}
    to {transform: rotate(360deg)}
}

.cmsrow{
    margin-top: 100px;
}

h1{
    color: var(--MAIN-DARKEN-90) !important;
    font-weight: 500;
    font-size: 25px;
    margin: 0px;
}

h2{
    color: var(--MAIN-DARKEN-90) !important;
    font-weight: 400;
    font-size: 15px;
    margin: 0px;
    text-transform: uppercase;
}

.divTable{
    float: left;
    width: 100%;
    margin: 0px;
    margin-top: 20px;
    position: relative;
}

.cmscontainer{
    margin-left: 420px;
    width: calc(100% - 420px - var(--side-margin));
    transition: all 0.2s ease-in-out;
    z-index: 0;
    position: absolute !important;
    margin-top: 20px;
}

.divTableControls{
    width: 100%;
    min-height: 60px;
    float: left;
}

.divTableControlsTop{
    height: 60px;
    float: left;
    right: 0px;
    top: -60px;
    position: absolute;
}

.button{
    display: inline-block;
    text-decoration: none !important;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 10px;
    box-sizing: border-box;
    background: var(--ACCENT);
    color: #ffffff !important;
    float: left;
    height: 40px;
    margin-right: 10px;
    cursor: pointer;
}

.button:hover{
    background: var(--ACCENT-DARKEN-40);
}

.sub{
    background: var(--ACCENT-LIGHTEN-80);
    color: var(--ACCENT) !important;
}

.sub:hover{
    background: var(--ACCENT-LIGHTEN-60);
}

.right{
    float: right !important;
    margin-right: 0px;
    margin-left: 10px;
}

.divTableControlsSearch{
    float: left;
    width: 400px;
    height: 40px;
    margin-right: 10px;
}

.divTableControlsSearch input{
    position: relative;
    width: calc(100% - 100px);
    height: 100%;
    border-radius: 10px;
    border: 1px solid #f1f1f1;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    color: var(--MAIN-DARKEN-90) !important;
    float: left;
    margin: 0px;
    height: 45px;
    border-radius: 20px 0px 0px 20px;
    border-right: 0px;
}

.divTableControlsSearch input[type='submit']{
    width: 100px;
    float: right;
    box-sizing: border-box;
    color: #ffffff !important;
    border-radius: 0px 20px 20px 0px;
}

.divTableControlsDate{
    float: left;
    height: 40px;
    margin-left: 10px;
}

.divTableControlsDateTypeWrapper{
    height: 42px;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
}

.divTableControlsDateTypeWrapper a{
    display: inline-block;
    text-decoration: none !important;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    box-sizing: border-box;
    background: var(--BLACK-LIGHTEN-80);
    color: #323232 !important;
    font-weight: 500;
    float: left;
    height: 40px;
    margin: 0px;
}

.divTableControlsDateTypeWrapper a:hover{
    background: var(--BLACK-LIGHTEN-60);
}

.divTableControlsDateToday{
    display: inline-block;
    text-decoration: none !important;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    box-sizing: border-box;
    background: var(--BLACK-LIGHTEN-80);
    color: #323232 !important;
    height: 40px;
    margin: 0px;
    border-radius: 10px;
    border: 1px solid #dcdcdc;
    margin-left: 10px;
    font-weight: 500;
}

.divTableControlsDateToday:hover{
    background: var(--BLACK-DARKEN-10);
}

.divTableControlsDateTypeWrapper .aSelected{
    background: var(--ACCENT);
    color: #f1f1f1 !important;
}

.divTableControlsDateTypeWrapper .aSelected:hover{
    background: var(--ACCENT-DARKEN-30);
}

.divTableControlsDateTypeWrapper a:first-of-type{
    border-radius: 10px 0px 0px 10px;
    border-right: 1px solid #dcdcdc;
}

.divTableControlsDateTypeWrapper a:last-of-type{
    border-radius: 0px 10px 10px 0px;
    border-left: 1px solid #dcdcdc;
}

.tableData{
    width: 100%;
    border-collapse: separate;
    padding-bottom: 300px;
}

.tableDataWithSidebar{
    width: calc(100% - 430px);
    float: left;
    margin-left: 30px;
}

.tableData td{
    padding-left: 10px;
    box-sizing: border-box;
    font-weight: 500;
}

.tableData thead tr td{
    height: 50px;
    background: rgba(255,255,255, 0.7);
    backdrop-filter: blur(var(--blur));
    border-top: 1px solid #f1f1f1;
}

.tableData thead tr td:last-of-type{
    border-top-right-radius: 20px;
    border-right: 1px solid #f1f1f1;
}

.tableData thead tr td:first-of-type{
    border-top-left-radius: 20px;
    border-left: 1px solid #f1f1f1;
}

.tableData tbody tr{
    height: 80px;
    background: rgba(241,241,241, 0.3);
    backdrop-filter: blur(var(--blur));
    border-left: 1px solid #f1f1f1;
    border-right: 1px solid #f1f1f1;
}

.tableDataSmall tbody tr{
    height: 50px;
}

.tableData td p{
    margin: 0px;
    padding: 0px;
    display: inline-block;
}

.aInteractiveTable{
    display: inline-block;
    color: var(--MAIN-DARKEN-90) !important;
}

.tableData tbody td{
    font-weight: 400 !important;
}

.tableData tbody tr:nth-child(even){
    background: rgba(255,255,255, 0.5);
}

.tableData tbody tr:hover{
    background: var(--ACCENT-LIGHTEN-90);
}

.pTableText{
    margin: 0px;
    padding: 0px;
    display: block;
    font-size: 14px;
}

.pTableTextLong{
    max-width: 400px;
    display: -webkit-box;
    line-height: 1;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 29px;
}

.iViewPassword{
    position: absolute !important;
    right: 20px;
    top: 12px;
    cursor: pointer;
}

.divTableImageHolder{
    width: 100px;
    height: 80px;
    margin-right: 10px;
}

.divTableImageHolderRound{
    width: 70px;
    height: 70px;
    border-radius: 35px;
    border: 2px solid #f1f1f1;
}

.divTableImageHolderSmall{
    width: 35px;
    height: 35px;
    border-radius: 18px;
    border: 2px solid #f1f1f1;
    display: block;
    float: left;
}

.pTableTextUser{
    display: block;
    margin-top: 7px !important;
}

.tdRight{
    text-align: right;
    padding-right: 20px;
}

.trLastRight td:last-of-type{
    text-align: right;
    padding-right: 20px;
}

.divTablePaginationHolder{
    float: right;
    padding-top: 5px;
    padding-bottom: 5px;
    box-sizing: border-box;
    margin-right: 10px;
}

.divGridPaginationHolder{
    box-sizing: border-box;
    text-align: center;
    width: 100%;
}

.pagination>.active>span{
    background-color: var(--ACCENT);
    border-color: var(--ACCENT);
}

.pagination>.active>span:hover{
    background-color: var(--ACCENT-DARKEN-40);
    border-color: var(--ACCENT-DARKEN-40);
}

.tdActions{
    opacity: 0.2;
}

.tableData tr:hover .tdActions{
    opacity: 1;
}

.tdActions a{
    margin-right: 10px;
    font-size: 17px;
}

#iMenu{
    position: absolute;
    right: 20px;
    font-size: 20px;
    color: var(--MAIN-DARKEN-90);
    cursor: pointer;
    display: none;
}

.pNoResults{
    width: 100%;
    text-align: center;
    font-size: 12px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.pNoResultsTall{
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

.pNoResults i{
    font-size: 22px;
}

.pNoResultsGrid{
    width: 100%;
    text-align: center;
    font-size: 15px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.pNoResultsGrid i{
    font-size: 32px;
}

.prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.pRoleDisplay{
    font-size: 12px !important;
    text-align: center;
    width: 100%;
}

.pRoleDisplay i{
    margin: 0px;
    width: auto !important;
    color: var(--ACCENT) !important;
}

#divUserSubMenu hr{
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.swal2-confirm{
    background: var(--ACCENT) !important;
    outline: var(--ACCENT) !important;
}

.swal2-deny{
    background: var(--BLACK-DARKEN-10) !important;
    outline: var(--BLACK-LIGHTEN-40) !important;;
}

.swal2-title{
    font-size: 25px !important;
}

.swal2-html-container{
    font-size: 15px !important;
}

.swal2-actions button{
    padding: 10px 15px 10px 15px;
}

.swal2-popup{
    background-color: #ffffff !important;
    background-image: url('/images/overlay.png') !important;
    background-position: 200px 0px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

.aBack{
    margin-bottom: 10px;
    display: block;
    margin-top: -33px;
    text-transform: uppercase;
    font-weight: bold;
}

.divFormHolder{
    width: 100%;
    padding-bottom: 100px;
    box-sizing: border-box;
    margin-top: 40px;
}

.divFormHolder .divFormGroup:first-of-type{
    border-top: 2px solid var(--ACCENT-LIGHTEN-90);
}

.divFormHolder .divFormGroup:last-of-type{
    border-bottom: 2px solid var(--ACCENT-LIGHTEN-90);
}

.divFormHolder .divFormGroup:first-of-type{
    border-radius: 0px 20px 0px 0px;
}

.divFormHolder .divFormGroup:last-of-type{
    border-radius: 0px 0px 20px 20px;
}

.divFormGroup{
    padding-bottom: 20px;
    box-sizing: border-box;
    padding-left: 40px;
    padding-right: 40px;
    border-left: 2px solid var(--ACCENT-LIGHTEN-90);
    border-right: 2px solid var(--ACCENT-LIGHTEN-90);
    backdrop-filter: blur(var(--blur));
    background: rgba(255,255,255,0.1);
    padding-top: 20px;
    box-sizing: border-box;
    max-width: 800px;
}


.divFormHolder input{
    width: 100%;
}

.divFormHolder textarea{
    width: 100%;
}

.pFormGroupTitle{
    font-weight: 500;
    border-left: 2px solid var(--ACCENT);
    padding-left: 22px;
    margin-left: -42px;
    padding-top: 30px;
    padding-bottom: 10px;
    margin-top: -20px;
    text-transform: uppercase;
}

.divFormItemHolder{
    width: 100%;
    margin-bottom: 20px;
}

.divFormItemHolder p{
    margin: 0px;
    padding: 0px;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 3px;
}

.divFormItemHolder input{
    background: #ffffff;
    border: 1px solid #ccd0d2;
    border-radius: 5px;
    height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}

.divFormHolder select{
    width: 100%;
    background: #ffffff;
    border: 1px solid #ccd0d2;
    border-radius: 5px;
    height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}

.selectMultiple{
    height: 200px !important;
}

.selectMultiple option {
    padding: 5px;
}

.pScheduleJobStatus{
    font-size: 10px !important;
    margin: 0px !important;
    padding: 0px !important;
}

.selectMultiple option[selected='selected']{
    background: var(--MAIN-LIGHTEN-60)
}

.divFormItemHolder textarea{
    background: #ffffff;
    border: 1px solid #ccd0d2;
    border-radius: 5px;
    height: 120px;
    resize: vertical;
    padding: 10px;
    box-sizing: border-box;
    min-height: 40px;
    max-height: 500px;
}

.pRequired{
    display: inline-block;
    color: var(--ACCENT-LIGHTEN-40);
    margin-left: 5px !important;
}

.divFormItemHolder table{
    width: 100%;
}

.divFormItemHolder table tr td{
    padding-right: 10px;
    box-sizing: border-box;
}

.divFormItemHolder table tr td:last-of-type{
    padding-right: 0px;
}

.divFormItemHolder input[type='submit']{
    display: inline-block !important;
    text-decoration: none !important;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 10px;
    box-sizing: border-box;
    background: var(--ACCENT);
    color: #ffffff !important;
    height: 40px;
    margin-right: 10px;
    width: 120px;
    border: none;
}

.divFormItemHolder input[type='submit']:hover{
    background: var(--ACCENT-DARKEN-40);
}

.divFormImageUpload{
    width: 100%;
    height: 150px;
}

.divFormImageUploadEmpty{
    width: 100%;
    height: 150px;
    border: 2px dashed #ccd0d2;
    border-radius: 5px;
    text-align: center;
    padding-top: 50px;
    box-sizing: border-box;
    cursor: pointer;
}

.divFormImageUploadFilled{
    width: 100%;
    height: 150px;
    border: 1px solid #ccd0d2;
    border-radius: 5px;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
    cursor: pointer;
    display: none;
    position: relative;
}

.divFormImageUploadEmpty:hover, .divFileUploadHolderNew:hover{
    border-color: var(--ACCENT);
}

.divFormImageUploadFilled:hover{
    border-color: var(--ACCENT);
    border-style: dashed;
}

.divFormImageUploadRound{
    width: 150px;
    margin: auto;
    height: 150px;
}

.divFormImageUploadRound .divFormImageUploadFilled{
    height: 150px;
    overflow: hidden;
    border-radius: 75px;
}

.divFormImageUploadRound .divFormImageUploadEmpty{
    height: 150px;
    overflow: hidden;
    border-radius: 75px;
}

.divFormImageUploadRound .divFormImageUploadFilled img{
    max-height: 150px;
}

.inputFile, .inputPdf{
    display: none !important;
}

.imgImagePicker{
    max-width: 400px;
    max-height: 120px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

#pDateTime{
    margin-right: 20px !important;
    margin-top: 3px !important;
    text-transform: uppercase;
    font-size: 12px !important;
}

.pApplicationType{
    float: left;
    width: 100%;
    font-size: 12px;
    font-style: italic;
}

#pAvatarLetter{
    margin: 0px;
    width: 100%;
    text-align: center;
    font-size: 20px !important;
    margin-top: 8px !important;
    background: -webkit-linear-gradient(var(--MAIN-DARKEN-90), var(--MAIN-DARKEN-70), var(--ACCENT-LIGHTEN-90));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -3px;
    margin-left: -2px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
}

.divTableColorIdentifier{
    width: 30px;
    height: 30px;
    border-radius: 15px;
    float: left;
}

.pTableActivity{
    padding: 5px 10px 5px 10px !important;
    border-radius: 20px;
    color: #ffffff;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 10vw;
}

.pTableActivityBig{
    padding: 5px 10px 5px 10px !important;
    border-radius: 20px;
    color: #ffffff;
    font-weight: 400;
    max-width: initial;
    white-space: normal;
    text-overflow: inherit;
    display: initial;
}

.pTableDate{
    margin: 0px;
    padding: 0px;
    font-size: 13px;
}

.pTableTime{
    margin: 0px;
    padding: 0px;
    font-weight: 500;
    font-size: 15px;
}

.pCardDate{
    margin: 0px;
    padding: 0px;
    font-size: 13px;
    float: left;
}

.pCardTime{
    margin: 0px;
    padding: 0px;
    font-size: 10px;
    text-align: right;
}

.pEventCardSeperator{
    margin: 0px;
    padding: 0px;
    font-size: 10px;
    text-align: right;
    margin-top: -10px;
    margin-bottom: -10px;
}

.pTableTextImportant{
    font-weight: 500;
}

#divMenuVersionHolder a{
    color: var(--MAIN-DARKEN-90) !important;
    font-weight: 500;
    margin: 0px;
    font-size: 10px !important;
}

.aChangeDate{
    position: relative;
}

.inputDateChange{
    width: 1px;
    height: 1px;
    position: absolute;
    right: 0px;
    top: 50px;
    opacity: 0.0;
}

.divColorPicker{
    width: 50px !important;
    height: 50px !important;
    border-radius: 25px !important;
}

.h2Accent{
    color: var(--ACCENT) !important;
    font-weight: 500;
}

.add{
    background: var(--MAIN);
    border: 2px solid var(--MAIN-DARKEN-10);
    width: 45px;
    height: 45px;
    border-radius: 23px;
    text-align: center;
    font-size: 17px;
    padding-top: 8px;
}

.add:hover{
    background: var(--MAIN-DARKEN-30);
}

#ui-datepicker-div{
    padding: 10px;
    box-sizing: border-box;
    margin-left: -80px;
    border: 1px solid #dcdcdc;
    border-radius: 20px;
    color: var(--MAIN-DARKEN-90) !important;
    font-family: Poppins !important;
}

.ui-widget-header{
    border: none !important;
    background: #ffffff !important;
    color: var(--MAIN-DARKEN-90) !important;
}

.ui-state-default{
    background: #ffffff !important;
    text-align: center !important;
    border-radius: 5px !important;
    border: 1px solid #f1f1f1 !important;
    box-sizing: 0px 0px 20px #f1f1f1 !important;
    color: #323232 !important;
}

.ui-state-default:hover{
    background: #f1f1f1 !important;
}

.ui-state-highlight{
    background: var(--MAIN-LIGHTEN-70) !important;
    border-color: var(--MAIN-LIGHTEN-70)  !important;
    color: var(--MAIN-LIGHTEN-20)  !important;
}

.ui-state-active{
    background: var(--ACCENT) !important;
    border-color: var(--ACCENT) !important;
    color: #ffffff !important;
}

.ui-datepicker-month, .ui-datepicker-year{
    border: none !important;
}

.divGrid{
    width: 100%;
    display: flex;
    gap: 20px;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 100px;
    box-sizing: border-box;
}

.divGridItem{
    height: 200px;
    flex: 1;
    flex-basis: 200px;
    flex-grow: 0;
    border-radius: 20px;
    backdrop-filter: blur(var(--blur));
    /*box-shadow: 0px 0px 2px #323232;*/
    border: 1px solid #f1f1f1;
    box-sizing: border-box;
    background: rgba(255,255,255,0.5);
    overflow: hidden;
    padding: 20px;
}

.divGridItemBackgroundCircle{
    position: absolute;
    width: 90%;
    height: 90%;
    right: -30%;
    bottom: -50%;
    background: var(--ACCENT-LIGHTEN-90);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.1;
    transition: 0.2s all ease-in-out;
}

.divGridItem p{
    margin: 0px;
    padding: 0px;
    max-width: calc(100% - 20px);
    font-weight: 500;
    color: var(--MAIN-DARKEN-90);
    font-size: 16px;
    word-break: break-word;
}

.aDeleteGridItem{
    position: absolute;
    right: 20px;
    top: 20px;
    display: none;
    color: var(--MAIN-DARKEN-90) !important;
}

.aEditGridItem{
    position: absolute;
    right: 19px;
    top: 45px;
    display: none;
    color: var(--MAIN-DARKEN-90) !important;
}

.divGridItemColor{
    position: absolute;
    width: 90%;
    height: 90%;
    right: -30%;
    bottom: -50%;
    border-radius: 100px 80px 60px 130px;
    border: 30px solid #ffffff;
    opacity: 0.2;
    transition: 0.2s all ease-in-out;
}


.divGridItem:hover .divGridItemBackgroundCircle{
    opacity: 1;
    border-radius: 100px;
}

.divGridItem:hover .divGridItemColor{
    border-radius: 100px;
}

.divGridItem:hover .aDeleteGridItem, .divGridItem:hover .aEditGridItem{
    display: block;
}

.divSidePanelWrapper{
    position: absolute;
    height: calc(100% - 210px);
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: -5px;
    box-sizing: border-box;
    width: 360px;
    padding-left: 5px;
    padding-right: 10px;
    box-sizing: border-box;
    overflow: auto;
}

.divSidePanel{
    width: 100%;
    position: relative;
    overflow: visible;
}

.divEventCard{
    width: 100%;
    height: 160px;
    background: #ffffff;
    border: 1px solid #f1f1f1;
    box-shadow: 0px 0px 10px #f1f1f1;
    margin-top: 10px;
    border-radius: 20px;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    z-index: -1;
}

.aEventCard{
    text-decoration: none !important;
    color: var(--MAIN-DARKEN-90) !important;
}

.aEventCard:hover .divEventCard{
    border: 1px solid var(--ACCENT-LIGHTEN-70);
}

.divEventCard .tableCard{
    width: 100%;
}

.divEventCard .tableCard tr td{
    vertical-align: top;
}

.divEventCard .tableCard tr td:first-of-type{
    width: 65%;
}

.tableCardInner{
    position: relative;
    width: 100%;
    overflow: hidden;
}

.tableCardInner tr{
    height: 30px;
}


.tableCardInner tr td{
    vertical-align: top;
}

.tableCardInner tr td:first-of-type{
    width: 30px;
}

.tableCardInner i {
    font-size: 20px;
}

.tdEventCardDate{
    padding-top: 24px;
    color: var(--ACCENT);
    font-weight: 600;
}

#divEvents .aEventCard:nth-child(even) .divEventCardBackgroundCircle{
    background: var(--BLACK-LIGHTEN-60);
}

#selectEvent{
    height: 45px;
    width: 400px;
    border: 1px solid #dcdcdc;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    border-radius: 20px;
    background: #ffffff;
}

.divTableLeftBox{
    width: 400px;
    min-height: 400px;
    background: #ffffff;
    border: 1px solid #f1f1f1;
    box-shadow: 0px 0px 10px #f1f1f1;
    border-radius: 20px;
    padding: 40px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    float: left;
}

.divEventCardBackgroundCircle{
    position: absolute;
    width: 300px;
    height: 300px;
    right: -160px;
    bottom: -60px;
    background: var(--MAIN-LIGHTEN-90);
    border-radius: 50%;
    text-align: center;
    padding-top: 110px;
    padding-right: 150px;
    font-size: 40px;
    font-weight: 400;
    box-sizing: border-box;
    color: var(--ACCENT-LIGHTEN-60);
}

.divCurrentEvent hr{
    width: 50%;
    float: left;
}

.pEventTitle{
    font-weight: 500;
    font-size: 18px;
    color: var(--MAIN);
}


.pEventDescription{
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 30px;
}

.accent{
    color: var(--ACCENT);
}

.trInset td{
    padding-left: 5px;
    box-sizing: border-box;
}

.iSort{
    cursor: pointer;
    width: 40px;
    height: 40px;
    padding-top: 14px;
    box-sizing: border-box;
    text-align: center;
}

.ui-sortable-helper {
    display: table;
}

.aSaveSorting{
    display: none;
}

.divApplicationHolder{
    width: 100%;
    margin-top: 20px;
    min-height: 100px;
    max-width: 1000px;
    overflow: auto;
    vertical-align:bottom;
}

.divApplicationHolderPanel{
    float: left;
    width: calc(50% - 20px);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #f1f1f1;
}

.divApplicationHolder .divApplicationHolderPanel:first-of-type{
    margin-right: 40px;
}

.divApplicationHolderTableHolder{
    width: 100%;
    min-height: 200px;
    position: relative;
}

.pApplicationTableTitle{
    background: var(--ACCENT-LIGHTEN-90);
    height: 40px;
    padding-left: 20px;
    box-sizing: border-box;
    padding-top: 10px;
    color: var(--ACCENT-DARKEN-50);
    font-weight: 500;
    margin: 0px;
    border-radius: 10px 10px 0px 0px;
}

.pApplicationTableTitleSelected{
    background: var(--MAIN-LIGHTEN-80);
    color: var(--MAIN-DARKEN-90);
}

.divApplicationItem{
    width: 100%;
    height: 80px;
    background: #ffffff !important;
    border: 1px solid #f1f1f1;
    padding: 20px;
    box-sizing: border-box;
    padding-top: 13px;
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    z-index: 9999;
}

.divApplicationContent{
    margin-left: 20px;
    float: left;
    margin-top: 5px;
}

.divApplicationContentThree{
    margin-top: -5px;
}

.divApplicationContent p{
    margin: 0px;
    font-weight: 500;
    float: left;
}

.divAvatarHolder{
    width: 50px;
    height: 50px;
    background: #dcdcdc !important;
    border-radius: 25px;
    float: left;
    overflow: hidden;
}

.divAvatarPlanning{
    width: 180px;
}

.divAvatarImageHolder{
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    margin: 2px;
    border-radius: 25px;
}

.divAvatarHolderSmall{
    width: 30px !important;
    height: 30px !important;
    border-radius: 15px !important;
}

.divAvatarHolderSmall .divAvatarImageHolder{
    border-radius: 15px !important;
}

.divAvatarHolderSmall #pAvatarLetter{
    font-size: 12px !important;
    margin-top: 5px !important;
}

.divApplications{
    padding-bottom: 80px;
    width: 100%;
    backdrop-filter: blur(var(--blur));
    background: rgba(255,255,255,0.7);
}

.divAvatar{
    position: relative;
    width: 100%;
    height: 100%;
}

.iMoveApplication{
    float: right;
    margin-top: 20px;
}

#divSelected{
    text-align: center;
    min-height: 210px;
    background-color: #ffffff;
    background-image: url("/images/dragdrop.png");
    background-size: 250px;
    background-repeat: no-repeat;
    background-position: center top;
}

#aSaveJobApplicationSelection{
    width: 110px;
    float: none;
    position: absolute;
    bottom: 10px;
    margin: 0px;
    left: calc(50% - 55px);
    text-align: center;
    z-index: 10;
}

.divJobApplicationCounter{
    position: absolute;
    bottom: 10px;
    right: 30px;
    font-weight: 600;
}

.divJobApplicationCounter p{
    float: left;
}

.lighter{
    font-weight: 300 !important;
}

.pApplicationStatus{
    font-size: 12px;
    font-weight: 500 !important;
    text-transform: uppercase;
    color: var(--ACCENT);
}

#divScheduleSelector{
    margin-top: 20px;
    width: 320px;
    padding: 30px;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 70px;
}

#divScheduleHeader{
    font-size: 20px;
    font-weight: 500;
}

#divScheduleHeader p{
    font-size: 18px;
    font-weight: 500;
    float: left;
    margin: 0px;
    padding: 0px;
    margin-top: -5px;
}

#divScheduleHeader i{
    margin-right: 15px;
    float: left;
}

#divScheduleHeaderControls{
    float: right;
    text-align: right;
}

#divScheduleHeaderControls i{
    margin: 0px;
    padding: 0px;
    margin-left: 20px;
    font-size: 20px;
    cursor: pointer;
}

#divScheduleHeaderControls i:hover{
    opacity: 0.6;
}

#divScheduleCalendar{

}

#divScheduleCalendar a{
    text-decoration: none;
}

#divScheduleCalendar table{
    width: 100%;
    margin-top: 50px;
}

#divScheduleCalendar table tr{
    height: 32px;
}

#divScheduleCalendar table td{
    text-align: center;
    width: 14.2%;
}

#divScheduleCalendar table tr:first-of-type td{
    color: #dcdcdc;
    padding-bottom: 10px;
}

#divScheduleCalendar table tr:nth-of-type(2){
    height: 10px;
    border-top: 1px solid #f1f1f1;
}

.pCalendarLink{
    margin: 0px;
    padding: 0px;
}

.tdCalendarIn a{
    color: var(--MAIN-DARKEN-90) !important;
}

.tdCalendarOut a{
    color: #dcdcdc !important;
}

.tdCalendarIn:hover{
    background: #dcdcdc;
    cursor: pointer;
}

.tdCalendarWeek{
    background: #f1f1f1;
}

.tdStartOfWeek, .tdEndOfWeek{
    background: #dcdcdc;
}

.tdStartOfWeek a, .tdEndOfWeek a{
    color: #ffffff !important;
}

#divScheduleCalendar table tr .tdCalendarWeek:first-of-type{
    border-radius: 15px 0px 0px 15px;
}

#divScheduleCalendar table tr .tdCalendarWeek:last-of-type{
    border-radius: 0px 15px 15px 0px;
}

.tdCalendarToday{
    position: relative;
    z-index: 10;
}

.tdCalendarToday a{
    color: #ffffff !important;
}

.tdCalendarToday:hover{
    background: transparent;
}

.tdSelectedDay{
    position: relative;
    z-index: 10;
}

.tdSelectedDay a{
    color: #ffffff !important;
}

.tdSelectedDay:hover{
    background: transparent;
}

.tdStartOfWeek:hover, .tdEndOfWeek:hover{
    background: var(--ACCENT-DARKEN-40);
}


.tdCalendarToday::before{
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: var(--MAIN);
    border-radius: 20px;
    position: absolute;
    top: 1px;
    left: 3px;
    z-index: -1;
}


.tdSelectedDay::before{
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: var(--ACCENT);
    border-radius: 20px;
    position: absolute;
    top: 1px;
    left: 3px;
    z-index: -1;
}

.divCalendarHolder, .divCalendarTableHolder{
    min-height: 100px;
    width: calc(100% - 350px);
    margin-left: 350px;
    margin-top: 20px;
    padding-bottom: 200px;
}

.divCalendarTableHolder{
    backdrop-filter: blur(var(--blur));
    padding: 20px;
    background: rgba(255,255,255,0.3);
    border-radius: 20px;
}

.divCalendarHolder table{
    width: 100%;
}

.divCalendarHolder table thead{
    height: 50px;
}

.divCalendarHolder table thead tr td{
    text-align: center;
    width: 13.5%;
    border-right: 1px solid #f1f1f1;
    background: #ffffff;
    font-weight: 500;
}

.divCalendarHolder table thead tr td:first-of-type{
    border: none;
    width: 100px;
    border-top-left-radius: 20px;
}

.divCalendarHolder table thead tr td:last-of-type{
    border-top-right-radius: 20px;
    border-right: none;
}

.divCalendarHolder table tbody tr{
    height: 60px;
}

.divCalendarHolder table tbody tr td{
    background: rgba(255,255,255,0.6);
    text-align: center;
}

.divCalendarHolder table tbody tr{
    border-bottom: 1px solid #f1f1f1;
}

.divCalendarHolder table tr td:first-of-type{
    vertical-align: bottom;
    color: #dcdcdc;
}

.divCalendarHolder table tr td:nth-child(odd){
    background: rgba(250,250,250,0.6);
}

.divCalendarItem{
    background: #ffffff;
    margin-bottom: 2px;
    width: 100%;
    font-size: 12px;
    padding: 10px;
    border-radius: 10px;
}

.divCalendarItem p{
    margin: 0px;
    padding: 0px;
}

.tableCalendarItem{
    width: 100%;
}

.tableCalendarItem tr td{
    vertical-align: top !important;
    background: transparent !important;
}

.tableCalendarItem tr{
    height: inherit !important;
    border: none !important;
}

.pCalendarItemStart{
    font-weight: 600;
    font-size: 14px;
    color: #ffffff;
    text-align: left;
}

.pCalendarItemEnd{
    font-weight: 600;
    font-size: 10px;
    text-align: left;
    filter: brightness(45%);
}

.pCalendarItemName{
    text-align: right;
    filter: brightness(15%);
    font-weight: 400;
}

.pCalendarItemJob{
    text-align: right;
    font-weight: 400;
    filter: brightness(25%);
    font-style: italic;
}

#divScheduelViewChanger{
    float: right;
    margin-bottom: 10px;
    margin-top: -40px;
}
#divScheduelViewChanger a{
    background: var(--BLACK-LIGHTEN-80);
    width: 40px;
    height: 40px;
    display: block;
    float: right;
    margin-left: 5px;
    text-align: center;
    border-radius: 20px;
    color: var(--MAIN-DARKEN-90) !important;
    font-size: 17px;
    padding-top: 6px;
    box-sizing: border-box;
    border: 1px solid #dcdcdc;
}

.aViewTypeSelected{
    background: var(--ACCENT) !important;
}

.aViewTypeSelected i{
    color: #ffffff !important;
}

.pCalendarDayHeader{
    width: 100%;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 300;
}

.tdSpacer{
    height: 50px;
}

.tdItemSpacer{
    height: 20px;
}

.pCalendarTableStart{
    font-weight: 500;
    color: var(--ACCENT);
    font-size: 18px;
    margin: 0px;
    padding: 0px;
}

.pCalendarTableEnd{
    font-weight: 500;
    color: var(--MAIN-DARKEN-90);
    font-size: 14px;
    margin: 0px;
    padding: 0px;
}

.divCalendarTableHolder table{
    width: 100%;
}

.divCalendarTableHolder tr td{
    vertical-align: top;
}

.divCalendarTableDivider{
    height: 100%;
    width: 5px;
    position: absolute;
    border-radius: 5px;
}

.pCalendarTableEvent{
    color: var(--MAIN-DARKEN-90);
    font-size: 11px;
    font-weight: 600;
    margin: 0px;
    padding: 0px;
    text-transform: uppercase;
}

.pCalendarTableJob{
    color: var(--MAIN-DARKEN-90);
    font-size: 16px;
    font-weight: 500;
    margin: 0px;
    padding: 0px;
    margin-bottom: 5px;
    margin-top: -5px;
}

.pCalendarTableName{
    margin: 0px;
    padding: 0px;
}

.tdCalendarHeader p{
    margin: 0px;
    padding: 0px;
}

.tdCalendarHeader p:first-of-type{
    font-size: 10px;
    text-transform: uppercase;
}

.tdCalendarHeader p:last-of-type{
    font-weight: 500;
}

#divCalendarEventHolder{
    width: 100%;
    margin-top: 20px;
    border-top: 1px solid #f1f1f1;
    padding-top: 20px;
}

.pCalendarEventHolderTitle{
    font-weight: 500;
    margin: 0px;
    padding: 0px;
}

.pCalendarEventHolderDate{
    margin: 0px;
    padding: 0px;
    font-weight: 600;
    font-size: 11px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.divCalendarEventItem{
    width: 100%;
    float: left;
    background: var(--MAIN-LIGHTEN-90);
    border-left: 3px solid var(--MAIN);
    border-radius: 5px 10px 10px 5px;
    margin-bottom: 10px;
    padding: 10px;
}

.divCalendarEventItem:hover{
    opacity: 0.7;
}

.divCalendarEventItem p{
    float: left;
    margin: 0px;
    padding: 0px;
    font-weight: 500;
    font-size: 12px;
    color: var(--MAIN-DARKEN-90);
}

#divDashboardBlockWrapper{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 20px;
}

.divDashboardBlock{
    flex-grow: 1;
    flex-shrink: 0;
    width: 300px;
    height: 300px;
    background-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255, 0.2);
    border-radius: 20px;
    float: left;
    box-shadow: 0px 0px 10px #f1f1f1;
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 30px;
    box-sizing: border-box;
    background-image: url('/images/block_bg1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: color-burn;
}

#divDashboardBlockWrapper .divDashboardBlock:nth-child(3n - 1){
    background-image: url('/images/block_bg2.png');
}

#divDashboardBlockWrapper .divDashboardBlock:nth-child(3n){
    background-image: url('/images/block_bg3.png');
}

.divDashboardBlock i{
    font-size: 40px;
    margin-top: 40px;
    color: var(--MAIN);
}

#divDashboardBlockWrapper .divDashboardBlock:nth-child(odd) i{
    color: var(--ACCENT);
}

.pDashboardBlockValue{
    margin: 0px;
    padding: 0px;
    font-size: 25px;
    margin-top: 20px;
    font-weight: 500;
}

.pDashboardBlockTitle{
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    font-weight: 500;
}

.pDashboardBlockSubTitle{
    margin: 0px;
    padding: 0px;
    font-size: 10px;
    font-weight: 400;
}

.divFileUploadHolder{
    width: 100%;
    height: 150px;
    border: 2px dashed #ccd0d2;
    border-radius: 5px;
    text-align: center;
    padding-top: 50px;
    box-sizing: border-box;
    cursor: pointer;
    padding: 0px;
    padding-top: 5px;
}

.divFormFileUploadFilled{
    width: 100%;
    height: 150px;
    border-radius: 5px;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    margin: 0px;
    padding: 0px;
    display: none;
}

.divFormFileUploadItem{
    height: 128px;
    width: 128px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #dcdcdc;
    float: left;
    margin: 0px;
    margin-left: 10px;
    margin-top: 5px;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.divFormFileUploadItem i{
    font-size: 50px;
    margin-top: 8px;
}

.divFormFileUploadItem p{
    width: 100%;
    text-align: center;
    margin-top: 10px;
    white-space: nowrap;
    padding: 0 0px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.divFormFileUploadEmpty{
    margin-top: 40px;
}

.divFormFileUploadItemEdit:hover{
    border: 2px solid var(--ACCENT);
}

.imgWeather{
    margin: 0px;
    margin-top: 10px;
    margin-bottom: -30px;
}

.tdStatus i{
    font-size: 20px;
}

.tableRegistrationOverview{
    width: 100%;
    max-width: 400px;
}

.tableRegistrationOverview tr{
    height: 40px;
    background: transparent !important;
}

.trRegistrationOverviewTotal td{
    padding-top: 10px;
    border-top: 2px dashed var(--MAIN-DARKEN-90) !important;
    font-weight: bold;
}

#divRejectTimesheet{
    display: none;
}

.selectTableFilter{
    height: 45px;
    border: 1px solid #dcdcdc;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    border-radius: 20px;
    float: right;
}

.inputCheck{
    width: 20px !important;
    height: 20px !important;
    margin-right: 10px !important;
    margin-bottom: 10px !important;
}

.divEmployeeNote{
    width: 100%;
    min-height: 100px;
    margin-bottom: 30px;
}

.pEmployeeNoteUser{
    font-weight: 500;
    padding-left: 40px !important;
    padding-top: 3px !important;
}

.divEmployeeNoteBubble{
    width: calc(100% - 30px);
    height: auto;
    background: white;
    box-shadow: 0px 0px 10px #f1f1f1;
    padding: 20px;
    border-radius: 20px;
    margin-left: 30px;
    padding-bottom: 30px;
    border: 1px solid #f1f1f1;
    border-left: 2px solid var(--MAIN);
}

.divEmployeeNoteBubble p{
    padding: 0px;
    margin: 0px;
}

.pEmployeeNoteDate{
    float: right;
    font-size: 12px;
    color: #b9b9b9;
}

.aDeleteEmployeeNote{
    float: right;
    display: none;
}

.divEmployeeNote:hover .aDeleteEmployeeNote{
    display: block;
}

.formPayroll{
    display: none;
}

.progress-container{
    display: flex;
    border-radius: 8px;
    row-gap: 30px;
    flex-direction: column;
    align-items: center;
    float: left;
}
.circular-progress{
    position: relative;
    height: 50px;
    width: 50px;
    border: 5px solid #ededed;
    border-radius: 50%;
    background: conic-gradient(var(--MAIN) 3.6deg, #ededed 0deg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.circular-progress::before{
    content: "";
    position: absolute;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: #fff;
}
.progress-value{
    position: relative;
    font-size: 12px;
    font-weight: 600;
    color: var(--MAIN);

}

.divSearchTable{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.divSearchTable input{
    width: 100%;
    height: 45px;
    border-radius: 10px;
    border: 1px solid #f1f1f1;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    color: var(--MAIN-DARKEN-90) !important;
    margin: 0px;
    border-radius: 20px;
}

.tableSwal{
    width: 100%;
}

.tableSwal tr td{
    text-align: left;
    padding: 10px;
    background: var(--ACCENT-LIGHTEN-90);
}

.tableSwal tr:first-of-type td{
    background: #ffffff;
    font-weight: bold;
}

@media only screen and (max-width: 1700px) {
    :root{
        --side-margin: 50px;
    }

    #divMenu{
        width: 300px;
    }

    .cmscontainer{
        width: calc(100% - 320px - var(--side-margin));
        margin-left: 320px;
    }

    #divMenuVersionHolder{
        width: 300px;
    }

    #iMenu{
        display: none;
    }

    .divTableLeftBox{
        width: 300px;
    }

    #selectEvent{
        width: 300px;
    }

    .tableDataWithSidebar{
        width: calc(100% - 330px);
    }
}

@media only screen and (max-width: 1500px) {

    :root{
        --side-margin: 30px;
    }

    .divTableControlsSearch{
        width: 280px;
    }

    .pTableText{
        max-width: 40ch;
    }

    .divTableLeftBox{
        width: 100%;
        height: auto;
        min-height: 0;
        margin-bottom: 20px;
    }

    .divTableLeftBox table{
        height: 300px;
    }

    .tableCardInner{
        height: auto !important;
    }

    .divCurrentEvent table tr{
        display: inline-flex;
        flex-direction: column;
        width: 25%;
        height: 100px;
    }

    .trTableDataHr{
        width: 1px !important;
        height: 1px !important;
    }

    .tableDataWithSidebar{
        width: 100%;
        margin-left: 0px;
        margin-bottom: 20px;
    }

    #divMenu{
        width: 90px;
    }

    .cmscontainer{
        width: calc(100% - 110px - var(--side-margin));
        margin-left: 110px;
    }

    .cmscontainerWithoutMenu{
        width: calc(100% - 20px);
        margin-left: 10px;
    }

    #divMenuVersionHolder{
        display: none;
    }

    #divMenu ul li p{
        display: none;
    }

    .liMenuSelected::before{
        left: 10px;
    }

    #divMenu ul li i {
        margin-right: 0px;
        margin-top: 0px;
    }

    .iSubMenuHandle{
        margin-top: 8px !important;
    }

    #divMenu .ulMenuSub li {
        padding: 0px !important;
        font-size: 10px;
        text-align: center;
        padding-top: 17px !important;
        box-sizing: border-box;
    }

    #divMenu .ulMenuSub i{
        display: none;
    }

    #imgLogo{
        width: 60px;
    }
}

@media only screen and (max-width: 800px) {
    :root{
        --side-margin: 10px;
    }

    .pTableText{
        max-width: 20ch;
    }

    .divTableLeftBox table{
        display: flex;
    }

    .trTableDataHr{
        width: 100% !important;
        height: 1px !important;
    }

    .divTableLeftBox table tr{
        width: 30%;
    }

    #divMenu{
        width: 60px;
    }

    .cmscontainer{
        width: calc(100% - 60px - var(--side-margin));
        margin-left: 80px;
    }

    .cmscontainerWithoutMenu{
        width: calc(100% - 20px);
        margin-left: 10px;
    }

    .liMenuSelected::before{
        left: -5px;
    }

    #divMenu ul li i {
        margin-right: 0px;
        margin-top: 0px;
    }

    .iSubMenuHandle{
        margin-top: 8px !important;
    }

    #divMenu .ulMenuSub li {
        padding: 0px !important;
        font-size: 10px;
        text-align: center;
        padding-top: 17px !important;
        box-sizing: border-box;
    }

    #divMenu .ulMenuSub i{
        display: none;
    }
}