*{
    margin: 0;
    padding: 0;
    font-family: Comfortaa;
}

input:disabled{
    background-color: #E8E8ED;
}
textarea:disabled{
    background-color: #E8E8ED;
}
a{
    text-decoration: none !important;
    color: black !important;
}
/*Div, Label, Text, etc*/

/*Loader*/
#loaderContainer{
    display: flex;
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    z-index: 101;
    position: fixed;
    flex-direction: column;
}
#loaderContainer .spinner{
    margin: 35px;
}
.dot-spin {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: transparent;
    color: transparent;
    box-shadow: 0 -18px 0 0 #4C7EFF, 12.72984px -12.72984px 0 0 #4C7EFF, 18px 0 0 0 #4C7EFF, 12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), 0 18px 0 0 rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), -18px 0 0 0 rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 rgba(152, 128, 255, 0);
    animation: dotSpin 1.5s infinite linear;
}

@keyframes dotSpin {
    0%,
    100% {
        box-shadow: 0 -18px 0 0 #4C7EFF, 12.72984px -12.72984px 0 0 #4C7EFF, 18px 0 0 0 #4C7EFF, 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
    }
    12.5% {
        box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 0 #4C7EFF, 18px 0 0 0 #4C7EFF, 12.72984px 12.72984px 0 0 #4C7EFF, 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
    }
    25% {
        box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 0 #4C7EFF, 12.72984px 12.72984px 0 0 #4C7EFF, 0 18px 0 0 #4C7EFF, -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
    }
    37.5% {
        box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 0 #4C7EFF, 0 18px 0 0 #4C7EFF, -12.72984px 12.72984px 0 0 #4C7EFF, -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
    }
    50% {
        box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 0 #4C7EFF, -12.72984px 12.72984px 0 0 #4C7EFF, -18px 0 0 0 #4C7EFF, -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
    }
    62.5% {
        box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 #4C7EFF, -18px 0 0 0 #4C7EFF, -12.72984px -12.72984px 0 0 #4C7EFF;
    }
    75% {
        box-shadow: 0 -18px 0 0 #4C7EFF, 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 0 #4C7EFF, -12.72984px -12.72984px 0 0 #4C7EFF;
    }
    87.5% {
        box-shadow: 0 -18px 0 0 #4C7EFF, 12.72984px -12.72984px 0 0 #4C7EFF, 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 #4C7EFF;
    }
}
/*Loader for waiting backend*/
.lds-spinner {
    color: white;
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-spinner div {
    transform-origin: 40px 40px;
    animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    left: 37px;
    width: 6px;
    height: 18px;
    border-radius: 20%;
    background: #fff;
}
.lds-spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
}
@keyframes lds-spinner {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/*End of Loader*/



.light{
    font-weight: lighter;
    color: grey;
}
.alert-text{
    color: red;
}
.accepted-text{
    color: limegreen;
}

.textTitle{
    font-size: 14px;
    margin: 0;
    font-weight: bold;
    display: none;
}
.textNormal{
    font-size: 14px;
    margin: 0;
}
.contentSmall{
    font-size: 10px;
    margin: 0;
}

.contentSemiSmall{
    font-size: 12px;
    margin: 0;
}
.contentSemiSmall2{
    font-size: 14px;
    margin: 0;
}
.contentNormal {
    font-size: 16px;
    margin: 0;
}
.contentNormalBold {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
}
.contentNormal2 {
    font-size: 18px;
    margin: 0;
}
.contentNormal3 {
    font-size: 20px;
    margin: 0;
}
.contentSemiBig{
    font-size: 22px;
    margin: 0;
}

.contentBig{
    font-size: 34px;
    margin: 0;
}

.contentBig2{
    font-size: 28px;
    margin: 0;
}

.blackContainer{
    background-color: rgba(0, 0, 0, 0.5);
    min-height: 100vh;
    width: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
    position: fixed;
    top: 0;
}
.blackContainer2{
    background-color: rgba(0, 0, 0, 0.5);
    min-height: 100vh;
    width: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
    position: fixed;
    top: 0;
}

.contentContainer2{
    display: flow-root;
    background-color: #FFFFFF ;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    padding: 71px 0px 15px 89px;
    transition: 0.5s;
}

.buttonContainer{
    width: fit-content;
    height: fit-content;
}

/* mike add*/
  button[disabled]{
      /*background: red!important;*/
  }
  /*mikeadd*/
.popUpImageButton{
    background: #F5F5F5;
    background-color: #F5F5F5;
    border-radius: 16px;
    z-index:10;
    justify-content: flex-end;
    float: right;
    position:absolute;
    top:0;
    right:0;
    border: 1px solid #F4351B;
    color: #F4351B;box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.02)
}
.popUpImage {
    width: 100%;
    height: auto;
}

.popUpImageContainer{
    justify-content: center;
    align-items: center;
    z-index: 100;
    top: 0;
}

  input.ng-invalid, textarea.ng-invalid, select.ng-invalid, .requiredClass {
    border: 1px solid #df2027!important;
  }
  .accBlack{
      color:black;
      font-weight: normal!important;
  }
  .accRed{
      color:red;
      font-weight: bold;
  }
.roleBlack{
    color:black;
    font-weight: normal!important;
}
.roleRed{
    color:red;
    font-weight: bold;
}
/*confirmation box*/
.popUpConfirmationContainer{
    font-size: 13px;
    z-index: 99;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100vh;
    overflow: scroll;
    display: flex;
    justify-content: center;
    align-items: center;
}
.topPopUpProducts{
    background: white;
    width: 75rem;
    height:55rem;
    min-height: 125px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 2px 10px rgb(0 0 0 / 5%);
    border-radius: 5px;
}
.confirmPopupBox{
    background: white;
    width: 400px;
    min-height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 2px 10px rgb(0 0 0 / 5%);
    border-radius: 5px;
}

.infoPopUpHeader{
    font-size: 15px;
    margin-bottom: 20px;
    font-weight: bold;
    background:#0357A5 ;
    color: white;
    display: flex;
    border-radius: 5px 5px 0px 0px;
    padding: 1rem 1px 1rem 2rem
}

.popUpMessage{
    font-weight: 500;
    display: flex;
    padding: 1px 1px 23px 2rem;
    /*border-bottom: 1px solid #d1c3c3;*/
    text-align: center;
    font-size: 14px;
}

.topPopUpMessage{
    font-weight: 500;
    display: flex;
    flex-direction:column;
    padding:1rem;
}

.approvePopUpButtonContainer{
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: flex-end;
}
.approvePopUpButton{
    display: flex;
    align-items: center;
    margin-left: 10px;
    padding: 3px 20px;
    background: white;
    font-weight: bold;
    color: #0357A5;
    border: 2px solid #0357A5 !important;
    border-radius: 6px;
    justify-content: center;
}
.approvePopUpButton:hover{
    border: #46A583;
    font-weight: bold;
    color: white;
    border-radius: 6px;
    background: #0357A5;
}

.rejectPopUpButton{
    display: flex;
    align-items: center;
    margin-left: 10px;
    padding: 3px 20px;
    background: white;
    font-weight: bold;
    color: #b61100;
    border: 2px solid #b61100 !important;
    border-radius: 6px;
    justify-content: center;
}
.rejectPopUpButton:hover{
    border: #b61100;
    font-weight: bold;
    color: white;
    border-radius: 6px;
    background: #b61100;
}


.popUpImageButton{
    background: #F5F5F5;
    background-color: #F5F5F5;
    border-radius: 16px;
    z-index:10;
    justify-content: flex-end;
    float: right;
    position:absolute;
    top:0;
    right:0;
    border: 1px solid #F4351B;
    color: #F4351B;box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.02)
}

/*margin-top: 60px;*/
/*display: flex;*/

/*height: 83px;*/
/*align-items: center;*/
/*border-radius: 3px;*/
/*padding: 20px;*/
/*bottom: 0;*/


.popUpImage {
    width: 100%;
    height: auto;
}

.popUpImageContainer{
    /*background-color: rgba(0, 0, 0, 0.5);*/
    justify-content: center;
    align-items: center;
    z-index: 100;
    /*position: fixed;*/
    top: 0;
}




/*end add*/

.titleWithButtonContainer{
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E2E2E2;
}

.separateContentContainer{
    /*height: 100%;*/
    display: flex;
}

/*Buttons*/

.button-full-parent{
    height: 40px;
    width: 100%;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.02);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.button-small-parent{
    /*width: 73px;*/
    /*height: 27px;*/
    border-radius: 5px;
    background: transparent;
    padding: 0 17px;
    border: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.button-big-parent{
    height: 40px;
    width: 140px;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.02);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-disabled{
    background: grey !important;
    cursor: not-allowed !important;
}

.button-normal-blue{
    background: #0357A5;
    color: white !important;
    border: none;
    background: linear-gradient(113.46deg, #0357A5 26.83%, #4CA9FF 90.67%);
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

.button-child-blue{
    background: #0357A5;
    color: white !important;
    border: none;
    background: linear-gradient(113.46deg, #0357A5 26.83%, #4CA9FF 90.67%);
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

.button-report-blue{
    background: #0357A5;
    color: white !important;
    border: none;
    border-radius: 8%;
    margin-right: 10px;
    padding: 8px;
}

.button-normal-white{
    height: 40px;
    width: 140px;
    background: #FFFFFF;
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.02);
    border-radius: 5px;
    border: 1px solid #E0E0E0;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-alert{
    border: 1px solid #F4351B;
    color: #F4351B !important;
    background: white;
}

.buttonSearch{
    width: 92px;
    height: 37px;
    background: #F2F5FF;
    border-radius: 3px;
    color: #0357A5;
    border: none;
}
.buttonClear{
    width: 83px;
    height: 37px;
    background: #FFF7EF;
    border-radius: 3px;
    color: #C22F00;
    border: none;
    margin-right: 10px;
}

.button-category{
    background: #FFFFFF;
    border-radius: 5px;
    /*margin: 3vw;*/
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    filter: drop-shadow(0px -5px 25px rgba(0, 0, 0, 0.05)) drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.05));
}

.button-category:hover{
    box-shadow: 0 15px 25px rgba(48, 48, 48, 0.25);
    background: linear-gradient(155.74deg, #0357A5 -1.06%, #4CA9FF 87.13%);
    color: #FFFFFF!important;
}

/*.buttonReason{*/
/*    width: 73px;*/
/*    height: 27px;*/
/*    background: #FFFFFF;*/
/*    border: 1px solid #C2C2C2;*/
/*    box-sizing: border-box;*/
/*    border-radius: 3px;*/
/*}*/
.buttonBack{
    display: flex;
    background-color: transparent;
    border: none;
    margin-right: 15px;
    margin-top: 10px;
}

.buttonBackTicket{
    background-color: transparent;
    display: flex;
    justify-content: center;
    padding: 8px 15px;
    margin: 5px 7px 5px 0;
    border: 1px solid rgb(226, 226, 226);
    align-items: center;
    border-radius: 5px;
}

/*.buttonView:hover{*/
/*    color: white;*/
/*    border-color: #41BCE2;*/
/*    background-color: #41BCE2;*/
/*}*/
/*.buttonEdit:hover{*/
/*    color: white;*/
/*    border-color: #2BE576;*/
/*    background-color: #2BE576;*/
/*}*/
/*.buttonDelete:hover{*/
/*    color: white;*/
/*    border-color: #FA6E6E;*/
/*    background-color: #FA6E6E;*/
/*}*/



/*.buttonReason:hover{*/
/*    color: white;*/
/*    border-color: #528CD0;*/
/*    background-color: #528CD0;*/
/*}*/
/*.buttonView:hover .iconView{*/
/*    content:url("../images/viewBlue.png");*/
/*}*/
/*.buttonEdit:hover .iconEdit{*/
/*    content:url("../images/editGreen.png");*/
/*}*/
/*.buttonDelete:hover .iconDelete{*/
/*    content:url("../images/deleteRed.png");*/
/*}*/
/*.buttonReason:hover .iconReason{*/
/*    content:url("../images/reasonWhite.png");*/
/*}*/
.iconView{
    content:url("../images/iconView2.png");
    width: 20px;
    margin-right: 2px;
}
.iconEdit{
    content:url("../images/iconEdit2.png");
    width: 20px;
    margin-right: 2px;
}
.iconDelete{
    content:url("../images/iconDelete2.png");
    width: 20px;
    margin-right: 2px;
}
.iconReason{
    content:url("../images/reasonGrey.png");
    margin-right: 2px;
}
.table-form-container{
    background-color: white;
    /*border: 1px solid #E8E8ED;*/
    box-sizing: border-box;
    border-radius: 5px;
    overflow: auto;
    margin: 40px;
}

.table-container{
    width: 100%;
}

.table-form-container .table-container td,
.table-form-container .table-container th{
    padding: 15px;
}

.table-form-container .table-container .table-header th{
    font-size: 16px;
}



.table-form-container .table-container tbody tr{
    border-bottom: 1px solid #E8E8ED;
}
.table-form-container .table-container tbody tr:nth-last-child(1){
    border-bottom: none;
}

.agent_no{
    width: 50px;
}
/*.table-container #tableContent :hover{*/
/*    background: #F6FEFF;*/
/*}*/
.inputSearch{
    height: 37px;
    padding: 8px;
    border: 1px solid #E8E8ED;
    box-sizing: border-box;
    border-radius: 3px;
}

.inputSearch ::placeholder{
    color: #E8E8ED;
    font-size: 8px;
}

.searchPanel{
    border-bottom: 1px solid #E8E8ED;
}

.textWithBoxContainer{
    display: inline-flex;
    justify-content: space-between;
    padding: 0px 10px;
    align-items: center;
}

.textWithCheckBoxContainer{
    display: inline-flex;
    flex-wrap: wrap;
    /*justify-content: flex-end;*/
}

.textWithCheckBoxContainer label{
    padding-left: 10px;
    /*margin: 0;*/
}

.inlineContentContainer{
    display: inline-flex;
    padding: 10px ;
    flex-wrap: wrap;
}


.textBox{
    width: 24vw;
    height: 35px;
    background: #FFFFFF;
    border: 1px solid #E8E8ED;
    box-sizing: border-box;
    padding: 5px 5px;
}

.textBoxAssign{
    width: 100%;
    resize: none;
    height: 100px;
    background: #FFFFFF;
    border: 1px solid #aba7a5;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 8px 8px;
}
/*End of Div, Label, Text, etc*/

/*Login Page*/
.backgroundLoginContainer{
    background: url("../images/LoginBG.png") no-repeat;
    background-size: cover;
    height: 100vh;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.loginContainer {
    background-color: white;
    width: 50%;
    /*margin-right: 8%;*/
    /*padding: 60px;*/
    /*border-radius: 9px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.label {
    font-weight: bold;
    color: black;
    font-size: 16px;
    padding: 0;
}

.emailField {
    display: flex;
    flex: 1;
    border: none;
    margin: 10px 0 40px 0;
}

.inputEmailField {
    border: solid 2px lightgray;
    border-radius: 5px;
    padding: 10px;
    display: flex;
    flex: auto;
    outline: none;
    font-size: medium;
}
.inputEmailField:focus{
    border: 2px solid #0357A5;
}

.passwordField {
    display: flex;
    flex: 1;
    margin: 10px 0 10px 0;
    border: none;
    align-items: center;
}

.inputPasswordField {
    border: solid 2px lightgray;
    border-radius: 5px;
    padding: 10px 35px 10px 10px;
    display: flex;
    flex: auto;
    outline: none;
    font-size: medium;
}

.inputPasswordField:focus{
    border: 2px solid #0357A5;
}

.showPassword{
    position: fixed;
    right: 8vw;
}

.forgotPasswordContainer{
    display: flex;
    flex: auto;
    justify-content: flex-end;
    margin-bottom: 40px;
}

.forgotPassword {
    color: #0357A5;
    font-size: small;
    font-weight: bold;
    cursor: pointer;
}

.loginSubmitContainer{
    width: 100%;
    display: flex;
    border: none;
    border-radius: 5px;
    justify-self: center;
    margin-bottom: 20px;

}

.loginSubmit {
    display: block;
    flex: auto;
    text-align: center;
    background: linear-gradient(113.46deg, #0357A5 26.83%, #4CA9FF 90.67%);
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: white;
    border: none;
    padding: 14px;
    font-weight: bold;

}
/*End of Login Page*/

/*Top Header*/
.headerTop{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    padding-left: 250px;
    position: fixed;
    width: 100%;
    z-index: 1;
    background-color: #0357A5;
}

.headerTopRight{
    display: flex;
    align-items: center;
    margin-right: 35px;
    background: #0357A5;
    border-radius: 6px;
    /*padding: 10px 15px 10px 15px;*/
    height: 45px;
    width: fit-content;
}

#menuButton{
    border: none;
    background-color: rgba(255,255,255,0);
    margin-left: 13px;
}

#notificationButton{
    width: 35px;
    height: 35px;
    border: none;
    background-color: rgba(255,255,255,0);
    margin-right: 30px;
}

#profileButton{
    display: flex;
    align-items: center;
    border: none;
    background-color: rgba(255,255,255,0);
    color: white;
}
#profileButton p{
    padding-left: 6px;
    padding-right: 10px;
    padding-top: 3px;
}



.container-profile{
    display: flex;
    height: 46px;
    align-items: center;
    padding: 5px;
}

#profileButton .container-profile:hover{
    background: rgba(123, 165, 190, 0.5);
}

.logout-button{
    display: flex;
    align-items: center;
    border: none;
    background-color: rgba(255,255,255,0);
    color: white;
}
.logout-container{
    border-left: 1px solid #FFFFFF;
    height: 46px;
    display: flex;
    align-items: center;
}

.logout-button .logout-container:hover{
    background: rgba(225, 44, 49, 0.8);
}


.dropdownContainer{
    position: relative;
    display: inline-block;
}

#dropdownListContainer{
    position: absolute;
    display: none;
}
#dropdownListContainer button{
    min-width: 130px;
    height: 45px;
    margin-top: 5px;
    border: none;
    box-shadow: 0px 10px 25px rgb(0 0 0 / 10%);
    border-radius: 5px;
    background-color: white;
}
#dropdownListContainer button:hover{
    background: linear-gradient(141.66deg, #4C7EFF -1.51%, #4CA9FF 77.92%);
    color: #FFFFFF;
}
/*End of Top Header*/

/*Side Navbar*/
#logoQ{
    width: 30px;
    height: 30px;
}
#logoText{
    /*width: 139px;*/
    /*height: 30px;*/
    display: none;
}
.sideNavbar{
    width: 86px;
    height: 100vh;
    z-index: 2;
    position: fixed;
    background-color: #000000;
    transition: 0.5s;
    overflow: hidden;
}
.sideNavbar:hover{
    width: 250px;
}

.sideNavbar:hover #logoText, .sideNavbar:hover .textTitle{
    display: block;
}

.sideNavbar:hover~#contentContainer{
    padding: 99px 46px 27px 296px;
}
.sideNavbar:hover~#contentContainer2{
    padding: 99px 24px 18px 274px;
}


.sideNavbarLogo{
    display: flex;
    justify-content: center;
    height: 70px;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 5%);
    align-items: center;
    background: #0357A5 ;
}

.sideNavbarMenu{
    display: grid;
    margin-top: 44px;
}

.menuButton{
    border: none;
    padding: 14px 14px 14px 30px;
    background-color: rgba(255,255,255,0);
    color: white;
    display: flex;
    align-items: center;
}

.menuButtonActive{
    border: none;
    padding: 14px 14px 14px 30px;
    background-color: #767676;
    color: white;
    display: flex;
    align-items: center;
    border-right: 5px solid #C4E7FF;
}
.menuButtonActive img{
    margin-right: 9px;
}
.menuButton img{
    margin-right: 9px;
}

.menuButton:hover{
    background-color: #767676;
}
/*End of Side Navbar*/

/*PAGES*/

/*Home*/
a:link{
    color: #4C7EFF;
    text-decoration: underline;
}
.containerCategory{
    display: inline-flex;
    width: fit-content;
}

.content{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.contentContainerLeft{
    width:76%;
    float: left;
    height: calc(100vh - 154px);
    border-right: 1px solid #E2E2E2;
}
.contentContainerRight{
    position: relative;
    right: 0;
    width: 24%;
    height: calc(100vh - 154px);
    overflow-y: auto;
}

.categoryBox{
    width: 200px;
    height: 100px;
    background-color: white;
    color: #7E7E7E;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    margin-right: 55px;
    padding:12px 15px 12px 30px;
}
.categoryBox img{
    float: right;
}






.groupOpen:hover{
    background-color: #EBF0FF;
}

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

.timelineTextBox {
    display: inline-grid;
    width: fit-content;
    padding-left: 15px;
}

.timelineTimeBox{
    width: fit-content;
    height: 31px;
    background: #F6FEFF;
    border-radius: 10px;
    display: flex;
    align-items: center;
}
/*End Of Home*/

/*Unresolved Ticket and Group*/

/*Selain itu untuk Unresolved dan Group pakai punya timeline*/
/*End of Unresolved Ticket and Group*/

/*Ticket*/
.ticketContainer{
    width: 72vw;
    /*min-height: 500px;*/
    height: calc(100vh - 155px);
    background: #FFFFFF;
    border-radius: 5px;
    /*border-left: 1px solid ;*/
    /*margin-right: 15px;*/
    border-right: 1px solid #E2E2E2;
    border-bottom: 1px solid #E2E2E2;
    overflow: auto;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
}
.filterContainer{
    width: 23vw;
    height: calc(100vh - 150px);
    background: #FFFFFF;
    border-radius: 5px;
    position: sticky;
    top: 0;
    overflow: auto;
}

.filter-dropdown-single{
    height: 35px;
    width: 100%;
    padding: 3px;
    border: 1px solid #565656 ;
    box-sizing: border-box;
    border-radius: 9px ;
}

.filterBox .chosen-container-single .chosen-default{
    width: 24vw;
}
.filterContentContainer{
    /*border-bottom: 1px solid #EEEEEE;*/
    padding: 10px 25px 10px 25px;
}
.filterContentContainer input{
    border-bottom: 1px solid #EEEEEE;
    padding: 8px 25px 10px 25px;
}

.filterContentContainer p{
    margin: 0px;
}

.filterSaveButton{
    width: 100%;
    height: 42px;
    background: linear-gradient(113.46deg, #0357A5 26.83%, #4CA9FF 90.67%);
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    border: none;
    color: white;
    font-weight: bold;
}



.ticketContentContainerOut{
    border-bottom: 5px solid #FAFDFF ;
}
/*.ticketContentContainerOut:last-child{*/
/*    border-bottom: none;*/
/*}*/

.ticketContentContainer{
    min-height: 101px;
    display: flex;
    justify-content: center;
    padding: 15px 15px 10px 35px;
    cursor: pointer;
    align-items: center;
    margin-bottom: 0px;
    margin-top: 16px;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 10px 25px rgb(0 0 0 / 5%);
    border-radius: 10px;
}

.ticketContentContainer2{
    min-height: 101px;
    display: flex;
    justify-content: center;
    padding: 15px 15px 10px 35px;
    cursor: pointer;
    align-items: center;
    margin-bottom: 0px;
    margin-top: 16px;
    background: #f0f8ff;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 10px 25px rgb(0 0 0 / 5%);
    border-radius: 10px;
}

.ticketContentContainer:hover{
    background-color: #EBF0FF;
}

.ticketTextCategory{
    width: 46vw;
    margin-left: 15px;
}

.ticketTextCategorySub{
    margin-left: 15px;
    margin-top: 6px;
}

.categoriesContainer{
    width: fit-content;
    display: flex;
    align-items: flex-end;
}

.categoriesContentContainer{
    height: 22px;
 /*   background: #4C7EFF;*/
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 8px;
    margin-right: 5px;
    margin-left : 5px;
    color: #0357A5;
}

.categoriesDetailContainer{
    height: 22px;
    /*background: #4C7EFF;*/
    /* border-radius: 4px;*/
    /* border-right:0.5px solid #6D6D6D;*/
    display: flex;
    align-items: center;
    padding: 8px 7px 8px 0;
    margin-right: 3px;
    color: #515151;
}

.categoriesDetailContainer2{
    height: 22px;
    width: 14vw;
    /* background: #4C7EFF; */
    /* border-radius: 4px; */
    /* border-right: 0.5px solid #6D6D6D; */
    display: flex;
    align-items: center;
    padding: 8px 7px 8px 0;
    margin-right: 0px;
    color: #515151;
    justify-content: flex-end;
}
.categoriesDetailContainer:last-child{
    border-right:none;
}
/*Ticket Detail*/
.assignContainer{
    /*width: 20vw;*/
    height: fit-content;
    background: #FFFFFF;
    border-radius: 5px;
    border-left: 1px solid #E2E2E2;
}
.assignContentContainer{
    /*border-bottom: 1px solid #EEEEEE;*/
    padding: 12px 12px;
}
.assignContentContainer select{
    width: 100%;
    height: 35px;
    border: 1px solid #E8E8ED;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 8px 8px;
    background-color: white;
}

.assignContentContainer input{
    /*max-width: 75vw;*/
    width: 100%;
    /*min-height: 5vh;*/
    padding: 8px 8px;
    border-radius: 5px;
}

.assignContentContainer p{
    margin: 0;
}

.assignContentContainer .sla{
    font-weight: bold;
    margin: 0;
}

.chatBoxContainer {
    background-color: white;
    /*min-height: 150px;*/
    padding: 25px 35px;
    /*border-bottom: 1px solid #E2E2E2;*/
    border: 1px solid #f3f3f3;
    margin-bottom: 14px;
    margin-left: 14px;
    margin-right: 14px;
    border-radius: 6px;
    box-shadow: 0px 10px 25px rgb(0 0 0 / 5%);
    position: relative;
}
.chatBoxContainer p{
    margin-bottom: 4px;
}


.chatBoxContentContainer{
    margin-top: 15px;
    margin-left: 51px;
    display: inline-block;
    line-height: 15px;
}

.chatBoxContentContainer img{
    /*max-width: 35vw;*/
    /*max-height: 16vw;*/
    max-width: 95%;
    max-height: 80%;
}

.replyBoxContainer{
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-top: 20px;
    align-items: flex-start;
}
.replyBoxContentContainer{
    background-color: white;
    width: 38vw;
    margin-left: 10px;
    border: 1px solid #EEEEEE;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 5px 24px;
}

.assignMandaysContainer{
    border-top: 1px solid #E8E8ED;
    padding: 12px 12px;
}

.assignMandaysContentContainer{
    /*display: inline-flex;*/
    align-items: flex-start;
    /*width: 280px;*/
    justify-content: space-between;
    padding: 12px 12px;
    flex-direction: column;
}

.assignMandaysContentContainer input{
    width: 100%;
    border-radius: 5px;
    padding: 8px 8px;
}

#createMandays{
    display: none;
}
/*End of Ticket*/

/*Ticket Detail*/

/*End of Ticket Detail*/



/*Master Data*/
.menu-page-container{
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    width: 100%;
    justify-content: center;
    gap: 3vw;
}

.menu-page-container .menu-button{
    width: 146px;
    height: 120px;
    background: #FFFFFF;
    border-radius: 10px;
    /*margin: 3vw;*/
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 21px;
    filter: drop-shadow(0px -5px 25px rgba(0, 0, 0, 0.05)) drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.05));
}

.menu-page-container .menu-button:disabled{
    background: grey;
}

.menu-page-container .menu-button:hover{
    box-shadow: 0 15px 25px rgba(48, 48, 48, 0.25);
    background: linear-gradient(155.74deg, #0357A5 -1.06%, #4CA9FF 87.13%);
    color: #FFFFFF!important;
}

/*Report view*/
.menu-report-page-container{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
    width: 100%;
    justify-content: center;
    gap: 3vw;
}

.menu-report-page-container .menu-button{
    width: 250px;
    height: 120px;
    background: #FFFFFF;
    border-radius: 10px;
    /*margin: 3vw;*/
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 21px;
    filter: drop-shadow(0px -5px 25px rgba(0, 0, 0, 0.05)) drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.05));
}

.menu-report-page-container .menu-button:disabled{
    background: grey;
}

.menu-report-page-container .menu-button:hover{
    box-shadow: 0 15px 25px rgba(48, 48, 48, 0.25);
    background: linear-gradient(155.74deg, #0357A5 -1.06%, #4CA9FF 87.13%);
    color: #FFFFFF!important;
}

/* Dropdown Button */
.dropbtn {
    background-color: #04AA6D;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

/*.masterDataContainer{*/
/*    !*width: 100%;*!*/
/*    !*height: 100%;*!*/
/*    display: block;*/
/*    align-items: center;*/
/*    flex-direction: column;*/
/*    margin-left: auto;*/
/*    margin-right: auto;*/
/*}*/
/*.masterDataMenuButton{*/
/*    width: 146px;*/
/*    height: 120px;*/
/*    background: #FFFFFF;*/
/*    border-radius: 10px;*/
/*    margin-right: 56px;*/
/*    border: none;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    padding-left: 21px;*/
/*    filter: drop-shadow(0px -5px 25px rgba(0, 0, 0, 0.05)) drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.05));*/
/*}*/

/*.masterDataMenuButton:nth-last-child(1){*/
/*    margin-right: 0;*/
/*}*/

/*.masterDataMenuButton:hover{*/
/*    box-shadow: 0 15px 25px rgba(48, 48, 48, 0.25);*/
/*    background: linear-gradient(155.74deg, #0357A5 -1.06%, #4CA9FF 87.13%);*/
/*    color: #FFFFFF!important;*/
/*}*/

.attachment-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fill {
    /* width:800px; */
    /*height:800px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    /*overflow: hidden*/

    width: 70vw;
    height: 88vh;
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    /*min-height: 100%*/

    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

.fill iframe {
    flex-shrink: 0;
    min-width: 100%;
    /*min-height: 100%*/

    width: 100% !important;
    height: 100% !important;
}

.fill body {
    width: 100%;
    height: 100%;
}

.icon-parent{
    margin-right: 2px;
    width: 24px;
    height: 24px;
}

.iconCustomer{
    content:url("../images/iconCustomer.png");
}
.iconRole{
    content:url("../images/iconRole.png");
}
.iconCompany{
    content:url("../images/iconCompany.png");
}
.iconAgent{
    content:url("../images/iconAgent.png");
}
.iconGroupDiv{
    content:url("../images/iconGroup.png");
}
.iconType{
    content:url("../images/iconType.png");
}
.iconTags{
    content:url("../images/iconTags.png");
}
.iconPriority{
    content:url("../images/iconPriority.png");
}
.iconModule{
    content:url("../images/iconModule.png");
}
.icon-notification{
    content:url("../images/notificationBlue.png");
}

.icon-businessHour{
    content:url("../images/iconBusinessHour.png");
}
.icon-SLA{
    content:url("../images/iconSLABlue.png");
}
.icon-Report{
    content:url("../images/icon-reportBlue.png");
}
.icon-firstResponse{
    content:url("../images/iconReply.png");
}
.icon-agentWorkload{
    content:url("../images/iconAgentWorkloadBlue.png");
}
.icon-WorkloadTicket{
    content:url("../images/WorkloadTicket.png");
}
.icon-TicketVolume{
    content:url("../images/TicketVolume.png");
}
.icon-PriorityCategory{
    content:url("../images/iconPriorityCategoryBlue.png");
}
.icon-ReportSLA{
    content:url("../images/iconSLAReportBlue.png");
}
.icon-MandaysReport{
    content:url("../images/MandaysReport.png");
}
.icon-HistoryPerformance{
    content:url("../images/iconHistoryPerformanceBlue.png");
}


.menu-page-container .menu-button:hover .iconCustomer{
    content:url("../images/iconCustomerWhite.png");
}
.menu-page-container .menu-button:hover .iconRole{
    content:url("../images/iconRoleWhite.png");
}
.menu-page-container .menu-button:hover .iconCompany{
    content:url("../images/iconCompanyWhite.png");
}
.menu-page-container .menu-button:hover .iconAgent{
    content:url("../images/iconAgentWhite.png");
}
.menu-page-container .menu-button:hover .iconGroupDiv{
    content:url("../images/iconGroupWhite.png");
}
.menu-page-container .menu-button:hover .iconType{
    content:url("../images/iconTypeWhite.png");
}
.menu-page-container .menu-button:hover .iconTags{
    content:url("../images/iconTagsWhite.png");
}
.menu-page-container .menu-button:hover .iconPriority{
    content:url("../images/iconPriorityWhite.png");
}
.menu-page-container .menu-button:hover .iconModule{
    content:url("../images/iconModuleWhite.png");
}
.menu-page-container .menu-button:hover .icon-notification{
    content:url("../images/notificationWhite.png");
}
.menu-page-container .menu-button:hover .icon-businessHour{
    content:url("../images/iconBusinessHourWhite.png");
}
.menu-page-container .menu-button:hover .icon-SLA{
    content:url("../images/iconSLAWhite.png");
}
.menu-page-container .menu-button:hover .icon-Report{
    content:url("../images/icon-reportWhite.png");
}
.menu-report-page-container .menu-button:hover .icon-agentWorkload{
    content:url("../images/iconAgentWorkloadWhite.png");
}
.menu-report-page-container .menu-button:hover .icon-TicketVolume{
    content:url("../images/iconTicketVolumeWhite.png");
}
.menu-report-page-container .menu-button:hover .icon-MandaysReport{
    content:url("../images/iconMandaysReportWhite.png");
}
.menu-report-page-container .menu-button:hover .icon-ReportSLA{
    content:url("../images/iconSLAReportWhite.png");
}
.menu-report-page-container .menu-button:hover .icon-PriorityCategory{
    content:url("../images/iconPriorityCategoryWhite.png");
}
.menu-report-page-container .menu-button:hover .icon-HistoryPerformance{
    content:url("../images/iconHistoryPerformanceWhite.png");
}


/*Customer*/
.subMenuForm{
    display: flex;
    width: 100%;
    height: fit-content;
    background: #FFFFFF;
    /*border-bottom: 1px solid #E2E2E2;*/
    box-sizing: border-box;
    border-radius: 5px;
    flex-wrap: wrap;
    /*margin: 20px;*/
    padding: 15px 30px 20px 30px;
}

.subMenuFormFirstResponse{
    width: 100%;
    height: fit-content;
    background: #FFFFFF;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 15px 30px 20px 30px;
}
/*End of Customer*/

/*Group Division, Type, Tags, Priority*/
.popupContainer{
    width: 800px;
    min-height: 50vh;
    max-height: 90vh;
    background-color: white;
    padding: 35px;
    border: 1px solid #E8E8ED;
    box-sizing: border-box;
    border-radius: 5px;
    /*overflow-y: scroll;*/
}
.popupContainer2{
    width: 800px;
    min-height: 50vh;
    max-height: 90vh;
    background-color: white;
    padding: 35px;
    border: 1px solid #E8E8ED;
    box-sizing: border-box;
    border-radius: 5px;
    /*overflow-y: scroll;*/
}


.popupContentContainer{
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #E8E8ED;
    margin-bottom: 4%;
    min-height: 30vh;
}

.popupContentContainerReplySolution{
    display: flex;
    flex-direction: column;
    align-items: start;
    border-bottom: 1px solid #E8E8ED;
    margin-bottom: 4%;
}

.popupContentContainer2{
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #E8E8ED;
    margin-bottom: 4%;
    min-height: 30vh;
}

.popupTextWithBoxCont{
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    padding: 3% 0px;
}

.popupContainer label{
    font-weight: normal;
}

.popupTextDownWithBoxCont{
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1% 0px;
}
.popupButton{
    background: #F5F5F5;
    margin-top: 60px;
    display: flex;
    justify-content: flex-end;
    height: 83px;
    align-items: center;
    border-radius: 3px;
    padding: 20px;
    position: sticky;
    bottom: 0;
}

.popupButtonPreviewAttachment{
    background: #F5F5F5;
    /* margin-top: 60px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 83px;
    border-radius: 3px;
    padding: 20px;
    position: sticky;
    bottom: 0;
    width: 70vw;
}


/*End of Group Division, Type, Tags, Priority*/
/*End of MasterData*/
/*END OF PAGES*/

/*CATEGORISE IT LATER*/
.textBoxBig{
    height: 48px;
    background: #FFFFFF;
    border: 1px solid #E8E8ED;
    box-sizing: border-box;
    padding: 5px 5px;
}

.searchBarContainer{
    width: 600px;
}

.searchBarContainer ::placeholder{
    color: #000000;
}

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

.searchBarContentContainer img{
    position: absolute;
    padding-left: 10px;

}

.searchBarContentContainer input{
    padding-left: 40px;
    padding-right: 15px;
    width: 600px;
    height: 38px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    box-sizing: border-box;
    border-radius: 20px;
    outline: none;
}

#dropdownSearchContainer{
    display: none;
    position: absolute;
    width: 600px;
    min-height: 0px;
    background-color: white;
    box-shadow: 0px 15px 25px rgb(0 0 0 / 5%);
    border-radius: 5px;
    max-height: 45vh;
    overflow: scroll;
}
#dropdownSearchContainer button{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 45px;
    background: none;
    border: none;
    border-bottom: 1px solid #EEEEEE;
    padding: 0px 15px 0px 15px;
}

#dropdownSearchContainer button:hover{
    background:  #EBF0FF;
}

.dropdownSearchHeader{
    display: flex;
    justify-content: space-between;
    align-content: center;
    padding: 15px 15px 0;
}

.dropdownSearchHeader a{
    text-decoration: underline !important;
    color: #6f7479 !important;
}

.dropdownSearchHeader a:hover{
    color: #2b2b2b !important;
    cursor: pointer;
}

#searchOverlay{
    position: fixed;
    background-color: rgba(0,0,0,0.5);
    z-index: 10;
    width: 100%;
    height: 95%;
    top: 70px;
    left: 0;
}

.overlayContent{
    z-index: 11;
    position: relative;
    background-color: rgba(255,255,255,1);
    width: 100%;
    height: 95%;
    margin: auto;
    overflow: scroll;
}

.overlayHeader {
    width: 90%;
    margin: 40px auto 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.searchTitle {
    font-size: 24px;
}

.overlayContent button {
    width: 100%;
}


.subTicketListButton{
    display: flex;
    /*align-items: center;*/
    justify-content: space-between;
    height: 95px;
    border: 1px solid #f3f3f3;
    border-radius: 6px;
    box-sizing: border-box;
    background: white;
    padding: 0 10px 0 0;
}

.subTicketListButton:hover{
    background: rgb(231, 242, 250);
}

.pictureInitial{
    background: #0357A5;
    border-radius: 50%;
    min-width: 41px;
    min-height: 41px;
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settingContainer {
    width: 100%;
    min-height: 500px;
    background: #FFFFFF;
    border-radius: 5px;
}

.settingFormContainer{
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 5px;
    flex-wrap: wrap;
}
.notification-container{
    display: grid;
    grid-template-columns: auto auto;
    width: calc(100vw - 125px);
}
.notification-container .notification-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
}

.notification-container .switch {
    position: relative;
    display: inline-block;
    width: 53px;
    height: 25px;
}

.notification-container .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.notification-container .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.notification-container .slider:before {
    position: absolute;
    content: "";
    height: 17px;
    width: 17px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.notification-container input:checked + .slider {
    background-color: #0357A5;
}

.notification-container input:focus + .slider {
    box-shadow: 0 0 1px #0357A5;
}

.notification-container input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.notification-container .slider.round {
    border-radius: 34px;
}

.notification-container .slider.round:before {
    border-radius: 50%;
}

.ql-toolbar.ql-snow{
    background-color: white;
    /*margin-top: 20px;*/
}


/* .ql-editor{
    min-height: 150px;
} */

#reply .ql-editor{
    min-height: 150px;
}

#descSub .ql-editor{
    min-height: 150px;
}

#descSolution .ql-editor{
    min-height: 150px;
}

#description .ql-editor{
    min-height: 150px;
}

#signature .ql-editor{
    min-height: 150px;
}

.replyBox{
    display: none;
}

.replyBox input {
    width: 100%;
    height: 40px;
    padding: 0 20px;
    margin: 12px 0;
}

#container-cc-reply input,
#container-to-reply input {
	width: auto;
	height: auto;
}

.column{
    float: left;
    width: 50%;
    padding: 10px;
    /*height: 300px;*/
}

.column-first-response{
    width: 100%;
    padding: 10px;

}

.columnFilepond{
    width: 100%;
    padding: 10px;
    /*display: flex;*/
    /*justify-content: center;*/
}

.columnFilepondDashboard{
    width: 100%;
    padding: 10px;
    /*display: flex;*/
    /*flex-direction: column;*/
    /*justify-content: center;*/
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.masterDataTextBox {
    display: inline-flex;
    padding: 25px 10px 20px 10px;
    align-items: center;
    flex-direction: row;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.masterDataTextBoxFirstResponse {
    padding: 25px 10px 20px 10px;
    width: 100%;
}

.masterDataTextBox .chosen-container    {
    width: 24vw !important;
}


.masterDataTextBox label{
    margin-right: 15px;
    font-weight: normal;
}




.masterDataCheckBox {
    display: inline-flex;
    /*padding: 20px 40px;*/
    /*align-items: center;*/
    width: 60%;
    flex-direction: column;
    /*font-weight: normal;*/
}

.masterDataCheckBox .chosen-container    {
    width: 24vw !important;
}

.columnCheckBox{
    float: left;
    width: 100%;
    padding: 10px 10px 10px 20px;
}

/* paging */
.paging{
    padding: 10px 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.total{
    justify-content: flex-start;
    display: flex;
    margin-right: 10px;
    margin-bottom: 0px;
    /*margin: 0px !important;*/
}

.paging [role=buttonDisabled]{
    cursor: default;
    margin: 0 5px;
    border-color: #0357A5;
    color: white;
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 5px;
    border-radius: 7px;
    background-color: #0357A5;
}
.paging [role=button]{
    cursor: pointer;
    margin: 0 5px;
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 5px;
    border: solid 1px transparent;
    border-radius: 7px;
    color: #0357A5;
}
.paging [role=button]:hover{
    border-color: rgb(0,68,199);
}
.paging [role=buttonNextPrev]{
    cursor: pointer;
    margin: 0 5px;
    width: 85px;
    height: 30px;
    text-align: center;
    padding: 5px;
    border: solid 1px #0357A5;
    border-radius: 7px;
    color: #0357A5;
}
.paging [role=buttonNextPrev]:hover{
    color: white;
    background-color: #0357A5;
}

.paging [role=buttonNextPrev]:active{
    color: #0357A5;
    background-color: white;
}

.iconSearchClose {
    width: 60px !important;
    height: 40px;
    color: #2b2b2b;
    background-color: white;
    border: none;
}

.iconSkipButton{
    font-size:15px;
    line-height:15px;
    color: #0357A5
}
.skipButton{
    min-width:0;
    min-height:0;
    margin: 0;
    padding: 0;
    width: 30px;
    height: 30px;
    line-height: 15px;
    vertical-align: sub;
}
/* ----paging---- */

/*---- Attachment ------*/
.attachmentBox{
    /*width: 217px;*/
    height: 60px;
    border: 1px solid #EEEEEE;
    box-sizing: border-box;
    display: flex;
    margin-top: 10px;
    cursor: pointer;
}
.attachmentPicture{
    /*padding-left: 5px;*/
    width: 40px;
    height: 40px;
    background-color: #3d7cfa;
    color: white;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.chosen-disabled .chosen-single {
    cursor: default;
    background-color: #E8E8ED !important;
    color: black !important;
}



.chosen-container-single .chosen-single {
    position: static !important;
    background: none #FFFFFF !important;
    /*border: 1px solid #E8E8ED !important;*/
    border: 1px solid #565656 !important;
    box-sizing: border-box;
    border-radius: 9px !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    height: 35px !important;
    padding: 5px!important;
}
.chosen-container-single .chosen-single div{
    top: 5px!important;
}
.chosen-container-single .chosen-drop{
    border: 1px solid #E8E8ED !important;
    font-size: 15px !important;
}
.chosen-container-single .chosen-search .chosen-search-input{
    border: 1px solid #E8E8ED !important;
}
.chosen-container .chosen-results li.highlighted{
    background-color: #EBF0FF !important;
    color: black !important;
    background-image: none !important;
    -webkit-background-image: none !important;
}
.chosen-container.chosen-with-drop .chosen-drop{
    font-size: 15px !important;
}
.chosen-container-multi .chosen-choices li.search-choice{
    border-radius: 4px !important;
}
.chosen-container .chosen-results li.no-results{
    background: none !important;
    color: black !important;
}

.chosen-container{
    width: 100% !important;
}

.chosen-container-multi .chosen-choices {
    background: none #FFFFFF !important;
    /*border: 1px solid #E8E8ED !important;*/
    border: 1px solid #565656 !important;
    box-sizing: border-box;
    border-radius: 9px !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    min-height: 35px !important;
    padding: 3px!important;
}

.chosen-container-multi .chosen-choices li.search-choice{
    border: 1px solid #F3F3F3 !important;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: #F3F3F3 !important;
    background-image: none !important;
}

.chosen-container .chosen-drop{
    border: 1px solid #F3F3F3 !important;
}

.filepond--root *:not(text) {
    font-size: 1.3rem!important;
}

.homeContentContainerLeft{
    display: flow-root;
    background-color: #FAFDFF ;
    height: calc(100vh - 70px);
    width: 76%;
    /*overflow: auto;*/
    border-right : 1px solid #E2E2E2;
    transition: 0.5s;
    float:left;
}
.homeContentContainerLeft .dashboard{
    padding: 20px 0px 10px 52px;
    top: 0px;
    position: sticky;
    background-color: #FAFDFF ;
    border-bottom: 1px solid #EEEEEE;
}
.dashboardContent{
    margin-right: 0px;
    top: 0;
    /*overflow: auto;*/
    /*height: calc(68vh - 70px);*/
}
.containerTimeline{
    display: flow-root;
    margin-top: 0px;
    width: 100%;
    /*min-height: 530px;*/
    background: #FFFFFF;
    border-radius: 5px;
    transition: 0.5s;
    height: calc(68vh - 70px);
    overflow: auto;
}
.timelineBox{
    width: 94%;
    height: fit-content;
    /*border-bottom: 1px solid #EEEEEE;*/
    padding-top: 15px;
    border-top: 1px solid #EEEEEE ;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* padding: 13px 20px 10px 55px; */
    padding-bottom: 15px;
    margin-top: 30px;
    top: 0;!important;
}
.timelineBoxContent{
    width: 90%;
    height: 75px;
    border-bottom: 1px solid #EEEEEE;
    display: flex;
    justify-content: space-between;
    /*align-items: center;*/
    padding: 13px 10px 10px 54px;
    margin-bottom: 10px;
    background-color: #FAFDFF;
    box-shadow: 0px 10px 25px rgb(0 0 0 / 5%);
    margin-left: 5%;
    border-radius: 10px;
}
.timelineBoxContent:hover{
    background-color: #EBF0FF;
}

.homeContentContainerRight{
    display: flow-root;
    background-color: #FAFDFF ;
    height: 100vh;
    width: 24%;
    overflow: auto;
    transition: 0.5s;
    float:right;
}
.containerUG{
    width: 100%;
    height: calc(100vh - 70px);
    background: #FFFFFF;
    /*box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);*/
    border-radius: 5px;
    position: sticky;
    top: 0;
    overflow: auto;
}
.groupBox{
    width: 100%;
    height: 75px;
    border-bottom: 1px solid #EEEEEE;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 20px;
}

.dashboardPicture{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1.5px solid #d0d0d4;
}

.contentContainer{
    display: flow-root;
    background-color: #FFFFFF ;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    padding: 70px 0px 0px 90px;
    transition: 0.5s;
}

.contentContainerError{
    display: flex;
    justify-content: center;
    align-items: start;
    background-color: #FFFFFF ;
    height: calc(100vh - 70px);
    width: 100%;
    overflow: hidden;
    margin-top: 70px;
    position: relative;
    z-index: 2;
}

.errorMessageContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#tableContent tr:hover{
    background: #F6FEFF;
}

.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button, .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button {
    width:80px;
}
.jconfirm-box div.jconfirm-title-c{
    font-size: 17px;
}


.buttonAddS{
    height: 33px;
    width: 40px;
    background: #4C7EFF;
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.02);
    border-radius: 5px;
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}


.twoButton{
    display: flex;
}

.twoButton .buttonAddExistingUser{
    height: 40px;
    width: 180px;
    background: white;
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.02);
    color: black;
    border-radius: 5px;
    border: 1px solid #0357A5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.global-wrapper{
    position: relative;
    width: 100%;
    height: calc(100vh - 150px);
    overflow: auto;
}

.masterDataPicture {
    width: 170px;
    margin: 0 auto;
}
.masterDataPicture--drop-label {
    color: #4c4e53;
}

.masterDataPicture-label-action {
    text-decoration-color: #babdc0;
}
.masterDataPicture--panel-root {
    background-color: #edf0f4;
}
.imageSmall{
    width: 25px;
    height: 25px;
    /*border-radius: 50%;*/
    /*border: 1px solid #090707;*/
    /*background: #FFF;*/
    background: linear-gradient(rgba(252, 176, 65, 1), rgba(252, 110, 65, 1)) padding-box,
    linear-gradient(to right, rgba(252, 176, 65, 1), rgba(252, 110, 65, 1)) border-box;
    border-radius: 50em;
    border: 4px solid transparent;
}
.imageNormal{
    width: 41px;
    height: 41px;
    border-radius: 50%;
    border: 1px solid #F3F3F3;
    background: #F3F3F3;
}

.imageNormalHeader{
    width: 41px;
    height: 41px;
    border-radius: 50%;
    border: 1px solid #f3f3f3;
    background: #F3F3F3;
    margin: 10px;
}

.imageBig{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #F3F3F3;
    background: #F3F3F3;
}

.containerSubTicket{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 35px;
    padding-right: 35px;
    margin-bottom: 8px;
}

.sla-container{
    width: 100%;
    margin-top: 25px;
}

:where(.sla-container .sla-table tr) th, td{
    padding: 15px;
}
:where(.sla-container .sla-table tr) th:nth-child(1), td:nth-child(1){
    padding: 15px 0 15px 0;
}

:where(.sla-container .sla-table tbody) td:first-child, td:last-child{
    display: flex;
    /*justify-content: center;*/
}

.sla-container .sla-table-level{

}
:where(.sla-container .sla-table-level tr) th:nth-child(1), td:nth-child(1){
    padding: 15px 0 15px 0;
}

:where(.sla-container .sla-table-level tr) th, td{
    padding: 15px;
}

.sla-container .sla-table-level .sla-table-agent{
    width: 250px;
}

.sla-container .sla-time-container{
    display: flex;
}
.sla-container .sla-time-container .time-description-container{
    width: 100%;
    border: 1px solid black;
    border-radius: 8px;
    text-align: center;
}
.sla-container .sla-time-container .time-input-container{
    color: #0357A5;
    font-weight: bold;
    text-align: center;
}
.sla-container .sla-time-container .time-input-container input{
    color: black;
    width: 60px;
    padding: 5px;
    font-size: 12px;
    text-align: center;
}

.sla-container .sla-time-container .time-input-container input::-webkit-outer-spin-button,
.sla-container .sla-time-container .time-input-container input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sla-container .sla-time-container .time-input-container input[type=number] {
    -moz-appearance: textfield;
}




.tableBusinessHour{
    margin: 40px 0;
    border: 1px solid #E8E8ED;
    box-sizing: border-box;
    border-radius: 5px;
}

.tableBusinessHour .table-header{
    background: #F6FEFF;
    color: #0357A5;
    font-weight: bold;
}

.tableBusinessHour .tableContent td{
    padding: 15px;
}

.buttonBig-parent{
    height: 40px;
    width: 140px;
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.02);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.buttonBig-parent:not(:last-child){
    margin-right: 10px;
}

.buttonAddHoliday{
    border: 1px solid #0357A5;
    box-sizing: border-box;
    border-radius: 20px;
    background: #FFFFFF;
    color: #0357A5 !important;
}

.buttonAddHoliday:hover{
    color: #FFFFFF !important;
    background: #0357A5;
}

.buttonAddCSV{
    margin-right: 10px;
    font-weight: normal;
    margin-bottom: 0;
    cursor: pointer;
}

.buttonAddCSV input[type="file"] {
    display: none;
}

.form-businessHour .label-input{
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.form-businessHour .label-input textarea{
    resize: none;
    height: 60px;
    width: 50%;
    padding: 10px;
}

.form-businessHour .label-input input[type=text]{
    width: 50%;
    padding: 10px;
}

.form-businessHour .container-button{
    margin-top: 30px;
    display: grid;
    grid-template-columns: min-content min-content;
    grid-gap: 15px;
}

.copyAll{
    background: none;
    color: #0357A5!important;
}

.checkboxDay-container{
    display: block;
    position: relative;
    margin: 15px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: #FFFFFF;
    border: 1px solid #E8E8ED;
    box-sizing: border-box;
    border-radius: 20px;
    padding: 6px 25px;
}

.form-businessHour input[type=checkbox]{
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkboxDay-container:hover{
    background-color: #E8E8ED;
}

.form-businessHour input[type=checkbox]:checked ~ .checkboxDay-container{
    background: #EFF7FF !important;
    border: 1px solid #0357A5 !important;
    color: #0357A5 !important;
}

.customTime-container{
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    margin: 15px 0;
}
.customTime-container .days{
    width: 100px;
}
.customTime-container input{
    margin: 0 15px;
}

.report-properties-container{
    border: 1px solid #E6E6E6;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    grid-gap: 10px;
    margin: 10px 40px;
    padding: 15px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

.report-table-form-container{
    background-color: white;
    box-sizing: border-box;
    border-radius: 5px;
    overflow: auto;
    margin: 20px 40px;
}

.report-table-form-container tr,
.report-table-form-container td,
.report-table-form-container th{
    text-align: center;
    border: 1px solid #E6E6E6;
    padding: 10px;
}

.report-table-form-container td:last-child{
    display: flex;
    border: none;
    /*text-align: center;*/
    padding-top: 10px;
    margin-right: 10px;
    /*margin: 0;*/
    /*padding: 0;*/
}

.report-table-form-container thead{
    background: #F5F5F5;
    padding: 15px;
    color: #0357A5;
}
.report-table-form-container tbody tr:nth-child(even){
    background: #F0F8FF;
}

.btn-open {
    background-color: #139FED;
}

.btn-onProgress{
    background-color: #E3CD00 !important;
}


.input-box{
    border: 1px solid #aba7a5;
    padding: 8px 8px;
    width: 100%;
    flex-wrap: wrap;
    box-shadow: none;
    border-radius: 5px;
}



/*.black-mesh{*/
/*    position: absolute;*/
/*    width: 100%;*/
/*    height: 100vh;*/
/*    background: rgba(0, 0, 0, 0.2);*/
/*}*/

/*.properties-submenu{*/
/*    position: absolute;*/
/*    z-index: 2;*/
/*    width: 300px;*/
/*    height: 100vh;*/
/*    background: white;*/
/*    border-left: 1px solid rgba(226, 226, 226, 0.4);*/
/*    right: -500px;*/
/*    padding: 5px 10px;*/
/*}*/

/*.properties-submenu .properties-content{*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    border-bottom: 1px solid rgba(226, 226, 226, 0.4);*/
/*}*/

/*.properties-submenu .properties-content:last-child{*/
/*    border-bottom: none;*/
/*}*/
.properties-graph-container{
    display: grid;
    grid-template-columns: min-content max-content max-content;
    margin: 20px 40px;
    grid-gap: 0 15px;
}

.report-graph-container{
    margin: 20px 40px;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    grid-gap: 30px;
    /*justify-items: center;*/
}

.report-graph-container .graph-container{
    width: 42vw;
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.04);
    padding: 15px;
}
.report-graph-container .graph-container-volume{
    width: 88vw;
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.04);
    padding: 15px;
}
.graph-container .properties{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 10px;
    padding: 15px 0;
    /*border-bottom: 1px solid #E6E6E6;*/
    /*box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);*/
    /*border-radius: 4px 4px 0 0;*/
}

.graph-container .close-button{
    text-align: end;
}


/*Angular Material*/
md-ink-bar{
    color: #0357A5 !important;
    background: #0357A5 !important;
}



@media screen and (max-width: 800px) {
    .menu-page-container{
        grid-template-columns: auto auto auto;
    }
    .menu-report-page-container{
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
    }
}

@media screen and (max-width: 750px) {
    #fromTo{
        flex-direction: column;
    }
}
@media screen and (min-width: 801px) and (max-width: 1050px) {
    .menu-page-container{
        grid-template-columns: auto auto auto auto;
    }
    .menu-report-page-container{
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
    }
}
@media screen and (max-width: 1200px) {
    .column {
        width: 100%;
    }
}


/* CC NEEDS */

.container-to {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 50px;
	padding: 10px 30px 10px 10px;
	background: #F6F6F6;
}

.sub-container-to {
	margin: 0px;
	display: flex;
	gap: 5px;
}

.item-email-to {
	font-weight: bold;
	background: white;
	margin-right: 10px;
}

.item-cc {
	background: inherit;
	color: #0357a5;
	font-weight: bold;
	cursor: pointer;
}

#container-cc-reply,
#container-to-reply {
	background-color: #F6F6F6;
	display: flex;
	align-items: center;
	flex-direction: row;
	padding: 10px;
	margin-bottom: 5px;
	gap: 5px;
}

.container-to-notes {
	display: flex;
	align-items: center;
	flex-direction: row;
	padding: 10px;
	gap: 5px;
	width: 95%;
}

.container-to-notes .ts-wrapper {
	width: 100%;
}

.container-to-notes .ts-wrapper .ts-control {
	height: 35px;
}

.container-to-notes .ts-wrapper .ts-control input {
	height: auto;
	width: auto;
}

.container-to-notes select {
	width: 100%;
}

.container-to-cc-notes {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding-right: 30px;
	background-color: #F6F6F6;
}

.preview_excel th, .preview_excel td {
    padding: unset;
}

.preview_excel th:nth-child(1), .preview_excel td:nth-child(1){
    padding: unset;
}

.preview_excel td:first-child, .preview_excel td:last-child {
    display: table-cell;
}

.first-response-table td {
    padding-right: 30px;
}

.masterDataTextMessage {
    display: flex;
    font-weight: normal;
}

.btnListHistory {
    padding: 5px 15px 5px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f6f8fa;
    border: 1px solid #d6d0d0;
    border-radius: 5px;
    width: 100%;
    color: black;
}

.arrow-date-history {
    transition: transform 0.3s ease;
}

.rotate {
    transform: rotate(180deg);
  }

.fade-in-out {
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Ketika ng-hide dihapus, elemen tampil */
.fade-in-out.ng-hide-remove {
    opacity: 1;
    transform: translateY(0); /* Kembali ke posisi normal */
}

/* Ketika ng-hide ditambahkan, elemen sembunyi */
.fade-in-out.ng-hide {
    opacity: 0;
    transform: translateY(-10px);
}

.date-container {
    margin-top: 20px;
	margin-bottom: 20px;
    margin-left: 20px;
}

.date-container input {
	width: 200px;
	margin-left: 5px;
}

.button-unassigned {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 5px 7px 3px 5px;
    background-color: #a894f8;
    border: none;
    border-radius: 5px;
}

.button-unassigned:hover {
    background-color: #c3b5fe;
}
.input-solution label {
    /* font-weight: bold; */
}

.input-solution .item {
    color: #4CA9FF;
    font-weight: bold;
}

.selectedSolution {
    background-color: #88e888;
}

.hoverPointerSolution:hover {
    cursor: pointer;
}

/*confirmation box Solution*/
.popUpConfirmationContainerSolution{
    font-size: 13px;
    z-index: 99;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100vh;
    overflow: scroll;
    display: flex;
    justify-content: center;
    align-items: center;
}

.confirmPopupBoxSolution{
    background: white;
    width: 700px;
    min-height: 100px;
    max-height: 550px;
    overflow-y: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 2px 10px rgb(0 0 0 / 5%);
    border-radius: 5px;
}

.solutionReply {
    background-color: #88e888 !important;
}

.solutionReply .attachmentBox {
    border: none;
    cursor: default;
}

.badge-icon-solution {
    color: #008000; 
    position: absolute; 
    left: -10px; 
    top: -10px;
}

/* PRINT PDF FOR TICKET DETAIL (REPLY ONLY) */
@media print {
    .searchBarContainer,
    .buttonBackTicket,
    .button-big-parent, 
    .hide-btn-reply, 
    .hide-properties, 
    .sideNavbarLogo, 
    .container-profile, 
    .sideNavbar, 
    .headerTop {
        display: none !important;
    }

    .print-reply {
        width: 100% !important;
        overflow: visible !important;
        height: auto;
    }

    .contentContainer2 {
        height: auto !important;
        overflow: visible !important;
        padding-left: 0 !important;
        padding-top: 0 !important;
    }

    .title-header-container-print, 
    .title-container-print {
        height: auto !important;
    }

    .title-ticket-print {
        word-break: break-all;
        white-space: normal;
    }
}