/**
 *
 * You can write your CSS code here, DO NOT touch the default JavaScript file
 * because it will make it harder for you to update.
 * 
 */

/*# sourceMappingURL=custom.css.map */

:focus{
    outline: none !important;
}
.ofc{
    object-fit:cover;
}
.main-menu-hide .main-sidebar {
    transform: translateX(-250px);
}
html {
  scroll-behavior: smooth;
}
#sidebar-wrapper{
    overflow: scroll;
    height: 100vh;
}
@media only screen and (min-width: 768px){
    .main-menu-hide .navbar {
        left: 15px;
    }
    .main-menu-hide .main-content, .main-menu-hide .main-footer {
        padding-left: 30px!important;
    }
}
@media only screen and (max-width: 768px){
    .main-menu-hide .nv-ac2 {
        display: none !important;
    }
    .nv-ac2{
        display: flex !important;
    }
    .nav-t{
        font-size: 21px;
    }
}
.nav-link-user.dropdown-toggle::after{
    color: #6c757d !important;
}
.nv-ac2{
    position: absolute;
    width: 50px;
    height: 50px;
    display: none;
    align-items: center;
    right: -65px;
    top: 0;
    border-radius: 0px;
    box-shadow: none;
    background: #fff;
    color: #6c757d;
    cursor: pointer;
    font-size: 25px;
    border-bottom-right-radius: 20px;
}
.nv-ac{
    background: #fff;
    padding: 5px 15px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,.03);
    color: #6c757d;
    cursor: pointer;
}
.nv-ac i{
    color: #6c757d;
}
.navbar .nv-ac  .nav-link{
    padding-left: 0px !important;
    padding-right: 0px !important; 
}
.item-srt-wrapper{
    border-left: 1px solid #e5e1e1;
}
.cp{
    cursor: pointer;
}
.g-header .btn-group .btn:hover{
    background-color: transparent !important;
    border: 2px solid #ed7117 !important;
}
.g-header .btn-group .btn.left{
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    min-width: 75px;
    background-color: transparent;
    border: 2px solid #ed7117;
    box-shadow: none;
    color: #ed7117;
}
.g-header .btn-group .btn.active{
    background-color: #ed7117 !IMPORTANT;
    color: #fff !important;
}
.g-header .btn-group .btn.right{
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    min-width: 75px;
    background-color: transparent;
    border: 2px solid #ed7117;
    box-shadow: none;
    color: #ed7117;
}
.item-srt-wrapper .item-srt:last-child{
    border-bottom: none;
}
.item-srt{
    text-align: center;
    padding: 32px;
    border-bottom: 1px solid #e5e1e1;
}
.bg-login{
    background-size: cover;
    background-position: center center;
}
.bdr-20 {
    border-radius: 20px;
}
.bdr-100 {
    border-radius: 100%;
}
.tx-g{
    color: #cccccc;
}
.hv-100{
    height: 100vh;
}
.wba{
    word-break: break-all;
}
.img-sh img{
    object-fit: cover;
    padding: 10px;
    border: 2px solid #e4e6fc;
    border-style: dashed;
    border-radius: 15px;
}
.pdf-sh{
    border: 2px dashed #e4e6fc;
    border-radius: 10px;
    padding: 10px;
}
.invalid-input {
    width: 100%;
    font-size: 95%;
    color: #dc3545;
    margin-top: 8px;
}
.dropdown-toggle.btn-secondary,
.dropdown-toggle.btn-secondary:hover,
.dropdown-toggle.btn-secondary:focus{
    background: transparent !important;
    border: none;
    box-shadow: none;
    color: transparent !important;
}
.dropdown-toggle.btn-secondary svg{
    width: 15px;
    fill: #7a7c7d;
}
.card-header-form ::placeholder{
    color: #dee2e6;
}
.half-circle-spinner, .half-circle-spinner * {
    box-sizing: border-box;
}
.half-circle-spinner {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    position: relative;
    margin: 0 auto;
}
.half-circle-spinner.b-spinner {
    width: 25px;
    height: 25px;
}
.b-spinner .circle.circle-1{
    border-top-color: #fff !important;
}
.b-spinner .circle.circle-2{
    border-bottom-color: #fff !important;
}
.half-circle-spinner .circle {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: calc(15px / 10) solid transparent;
}
.half-circle-spinner .circle.circle-1 {
    border-top-color: #ed7117;
    animation: half-circle-spinner-animation 1s infinite;
}
.half-circle-spinner .circle.circle-2 {
    border-bottom-color: #ed7117;
    animation: half-circle-spinner-animation 1s infinite alternate;
}
@keyframes half-circle-spinner-animation {
    0% {
        transform: rotate(0deg);

    }
    100%{
        transform: rotate(360deg);
    }
}
.custom-control-label::before{
    width: 1.3rem;
    height: 1.3rem;
    border: #dee2e6 solid 2px;
}
.custom-control-label::after {
    width: 1.3rem;
    height: 1.3rem;
}
.img-tb{
    width: 50px;
    height: 50px;
    object-fit: cover;
}
.card-action {
    position: fixed;
    bottom: 20px;
    z-index: 9;
    width: 77%;
    transition: visibility 0s,opacity .5s linear;
}
.btn-alert .btn{
    min-width: 130px;
    padding: 9px 0px;
    border-radius: 30px;
}
.card-action .card-body {
    width: 450px;
    margin: 0 auto;
    background: #211f2b;
    border-radius: 100px;
    overflow: auto;
    padding: 15px 20px;
}
.card-action .times {
    font-size: 20px;
    margin-right: 8px;
    padding-top: 10px;
    color: #6b6b78;
    cursor: pointer;
    vertical-align: middle;
}
.card-action .badge {
    background: #3c3c4c;
    padding: 5px 8px;
    margin-right: 8px;
}
.card-action .btn-danger {
    background-color: #ec3652;
    border-color: #ec3652;
    border-radius: 100px;
    min-width: 80px;
    box-shadow: none;
    cursor: pointer;
}
.card-action.ca-big .card-body {
    width: 60%;
}
.custom-control-input:checked ~ .custom-control-label::before{
    border-color: #ed7117;
    background-color: #ed7117;
}
.ic-wrapper .ic{
    width: 50px;
    height: 50px;
    background: #f4f6f9;
    text-align: center;
    display: flex;
    align-items: center;
    font-size: 25px;
    border-radius: 20px;
    color: #fe662a;
}
.cst-val {
    position: absolute;
    right: 20px;
    bottom: 28px;
    border: 4px solid #fe8859;
    width: 55px;
    height: 55px;
    border-radius: 100%;
}
.cst-val, .play-button {
    text-align: center;
    display: flex;
    align-items: center;
}
.cst-cnt h5 {
    font-size: 16px;
}
.search-group-btn {
    position: absolute;
    font-size: 21px;
    right: 4px;
    top: 3px;
    color: #d6d6d7;
    width: 42px;
    height: 42px;
    border-radius: 100%;
    text-align: center;
    padding-top: 6px;
    z-index: 4;
}
.btn-up, .btn-up:focus, .btn-up:hover {
    display: block;
    border-radius: 15px;
    height: 100px;
    text-align: center;
    border-style: dashed!important;
    border: 2px solid #e4e6fc;
    padding: 9px 15px;
    font-weight: 700;
    text-decoration: none;
    color: #3c3c4c;
    cursor: pointer;
}
.btn-up .upload {
    width: 100%;
    text-align: center;
    color: #b6b6ba;
}
.btn-up .upload i {
    font-size: 20px;
    vertical-align: middle;
}
.img-prf-up{
    width: 180px;
    height: 180px;
    object-fit: cover;
}
.alert{
    position: fixed;
    right: 30px;
    z-index: 9999999;
    top: 30px;
}
.alert-dismissible .close{
    top: 4px;
}
.tr-ac{
    cursor: pointer;
}
.tr-ac:hover{
    background: #f6f6f6;
}
.btn.btn-grey, .btn.btn-grey:focus, .btn.btn-grey:hover {
    background-color: #3c3c4c!important;
    border: none;
    padding: 8px 20px;
    color: #fff;
    border-radius: 100px;
}
.btn-remove-image, .btn-remove-image:focus, .btn-remove-image:hover {
    background-color: transparent!important;
    border: 2px solid #e4e6fc;
    border-style: dashed;
    box-shadow: none;
    border-bottom: none;
    color: #aea9a9;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    line-height: 24px;
    padding: .3rem .8rem;
    letter-spacing: .5px;
}
.btn.btn-new, .btn.btn-new:focus, .btn.btn-new:hover {
    background-color: #ed7117!important;
    border: 2px solid #ed7117;
    padding: 8px 20px !important;
    color: #fff;
    border-radius: 100px !important;
}
.btn.btn-new2, .btn.btn-new2:focus, .btn.btn-new2:hover{
    background-color: #6c7076 !important;
    border: 2px solid #6c7076;
    padding: 8px 20px !important;
    color: #fff;
    border-radius: 100px !important;
}
.table tbody>tr{
    border-bottom: 1px solid #efefef;
}

.table-striped thead tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}
.table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(0,0,0,0.02);
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,0);
}

.tabel-ft.card-footer{
    display: flex;
}

.card-footer .tabel-tt{
    padding-top: 7px;
    font-weight: 700;
    color: #6c7bef;
}

.card-footer .tabel-tt,
.card-footer .tabel-pg{
    width: 50%;
}


.card .card-header .tabel-action .btn {
    /* margin-top: 1px;
    padding: 5px 20px;
    border-radius: .25rem; */
}
.card-header.tb-card{
    display: block
}

.card-header-form,
.tabel-entry{
    width: 50%;
}

.card-header-form .input-group{
    width: 240px;
}
 .card-header-form .input-group .form-control {
    border-radius: 30px !important;
    height: 42px;
}
.card-header-form .input-group .form-control + .input-group-btn .btn {
    border-radius: 0 30px 30px 0 !important;
    margin-top: -0.5px;
    padding: 8px 15px;
    color: white !important;
}

.no-data{
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    font-weight: 700 !important;
}
.modal-backdrop{
    background-color: #00000075 !important;
}
.modal-content{
    border-radius: 20px;
}
.form-cst .form-group .control-label, .form-cst .form-group > label{
    font-weight: 200;
    font-size: 13px;
    color: #8f8f8f;
}
.ft-entry{
    display: flex;
    margin-bottom: 0px;
    align-items: center;
}
.ft-entry .form-control{
    width: 50px;
    margin: 0px 10px;
    border: none;
    padding: 0px !important;
}
.iziToast-wrapper-bottomRight {
    right: 0;
    top: 0;
    text-align: right;
}
.tb-info tr>td{
    height: 34px !important;
    padding: 0px 15px !important;
}
.tb-info{
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.st-frm{
    border-bottom: 2px solid #6777F1;
    font-size: 16px;
    color: #191d21;
    font-weight: 600;
    padding-bottom: 4px;
}

.img-prf{
    width: 180px;
    object-fit: cover;
}
.prf-img{
    height: 180px !important;
    width: 180px !important;
    object-fit: cover;
}
.prf-pt{
    width: 100%;
    border-radius: 100%;
    object-fit: cover;
}
.prf-nm{
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 600;
    text-align: center;
    margin-top: 15px;
}
textarea.form-control{
    height: 200px !important;
}

.table-search .form-control {
    height: 47px !important;
    border: 2px solid #dee2e6;
}
.table-search .btn-sc-b .btn:not(.note-btn){
    border-radius: 3px !important;
    padding: 7px 25px !important;
    margin-top: 38px;
}
.group-form-cst{
    position: absolute;
    right: 0px;
}
.vdp-datepicker{
    width: 100%;
}
.ck.ck-editor {
    width: 100% !important;
}

.ck-content{
    min-height: 170px !important;
}


.stepper-box .top .steps-wrapper .step .step-title h4{
    font-size: 16px;
}


.stepper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.stepper-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    width: 100%;
    left: 0;
    padding: 2% 4%;
    margin-bottom: 22px;
    border-bottom: 1px solid #bbb;
}
.stepper-list{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    width: 20%;
}

.divinder{
    border-bottom: 1px solid #cccccc;
    height: 2px;
    position: absolute;
    width: 70%;
    top: 50px;
}

.stepper-icon{
    margin-bottom: 1rem;
    padding: 0 1rem;
    background-color: white;
}

.stepper-icon i{
    color: #fff;
    border-radius: 100rem;
    width: 55px;
    font-size: 20px;
    height: 55px;
    text-align: center;
    padding-top: 16px;
}

.stepper-title{
    margin: 0 0 .2rem 0;
    font-weight: bold;
    font-size: 16px;
}

.stepper-list.activated .stepper-icon i {
    box-shadow: 0 2px 6px #acb5f6;
    background-color: #6777ef !important;
    border-color: #6777ef;
}
.stepper-list.activated .stepper-title {
    color: #333333;
}
.stepper-list.deactivated .stepper-icon i {
    background-color: #bbbbbb !important;
}

.stepper-list.deactivated .stepper-title {
    color: #bbbbbb;
}

.cs-id{
    font-size: 14px;
    font-weight: 700;
    background: #6777ef;
    color: white;
    padding: 8px;
    display: inline-block;
    margin-bottom: 21px;
    border-radius: 4px;
}

.card-task .ticket-title,
.card-task .ticket-stat,
.card-task .ticket-action{
    overflow: hidden;
}

.card-task .badge{
    border-radius: 4px;
}

.card-task .tickets-list .ticket-item .ticket-info{
    display: block;
}

.clear-task img{
    width: 38px;
    height: 38px;
    object-fit: cover;
    margin-right: 5px;
    border-radius: 100%;
}

.card-task .tickets-list .ticket-item{
    padding: 30px 10px;
    border-bottom: 1px solid #e1e0e0;
}

.ticket-ac{
    margin-top: 15px;
}

.ticket-ac a{
    color: #556080;
    margin-right: 10px;
}

.ticket-ac a .fas{
    padding-right: 5px;
}
.mx-input{
    font-size: 14px !important;
    padding: 10px 15px !important;
    height: 42px !important;
    background-color: #fdfdff !important;
    border-color: #e4e6fc !important;
    box-shadow: none !important;
}
.rk-date{
    font-size: 16px;
    background: #ed7117;
    display: initial;
    padding: 10px;
    color: #fff;
}
.tickets-list .ticket-item:last-child{
    border-bottom: none;
}

.vdp-datepicker .form-control:disabled, .vdp-datepicker .form-control[readonly] {
    background-color: #fdfdff;
}

.media-ic-u{
    width: 50px;
    height: 50px;
    text-align: center;
    background: #d4fddc;
    margin-right: 15px;
    color: #76f387;
    border-radius: .25rem!important;
    padding-top: 5%;
}
.media-ic-u .fas{
    font-size: 18px;
}

.card-tp-nm{
    width: 50%;
}
.card-tp-ac{
    width: 50%;
    text-align: right;
}
.card-btn.card-header-action .btn{
    font-size: 11px;
    padding: 1px 9px !important;    
}

.col-det-if .card .card-stats .card-stats-item {
    padding: 5px 0px;
}
.case-header .wizard-steps .wizard-step:before{
    display: none;
}
.case-header .wizard-steps{
    margin-bottom: 0px;
    cursor: pointer;
}

.case-header .wizard-steps .wizard-step.wizard-step-active {
    box-shadow: 0 2px 6px #78828a;
    background-color: #78828a;
    color: #fff;
}

.case-header .wizard-steps .wizard-step {
    padding: 18px;
    min-width: 120px;
}

.case-header .wizard-step-icon i{
    font-size: 30px !important;
}

.td-t{
    font-weight: 700;
    padding-right: 30px;
    line-height: 2.5;
}

.media-doc{
    width: 50px;
    height: 50px;
    text-align: center;
    background: #d4fddc;
    color: #76f387;
    border-radius: .25rem!important;
    padding-top: 16px;
    display: inline-block;
    background-size: 100%;
}

.media-doc i{
    font-size: 18px;
}

.media-act a{
    color: #494242;
    font-size: 11px;
}

.media-act a>i{
    font-size: 10px;
}
.media-act .m-edit{
    color: #ffa426;
}

.media-act .m-del{
    color: #fc0000;
}

.media-act{
    display: none;
}
.swal2-icon {
    width: 4em !important;
    height: 4em !important;
    margin: 0.25em auto 1.875em !important;
}
.swal2-styled.swal2-confirm{
    box-shadow: 0 2px 6px #82d3f8;
    background-color: #3abaf4 !important;
    font-size: 13px !important;
    line-height: 24px;
    letter-spacing: .5px;
    border-color: #3abaf4 !important;
    border: none !important;
    padding: 8px 35px !important;

}
.swal2-styled.swal2-cancel{
    box-shadow: 0 2px 6px #fd9b96 !important;
    background-color: #fc544b !important;
    border-color: #fc544b !important;
    font-size: 13px !important;
    line-height: 24px;
    letter-spacing: .5px;
    border: none !important;
    padding: 8px 28px !important;
}
a{
    cursor:pointer;
}

.media:hover .media-act{
    display: block;
}

/* .btn-tc.ticket-ac {
    margin-top: 33px;
} */

.hvr-ttask:hover,
.hvr-ttask:focus{
    text-decoration: none
}

.card-ttask{
    max-height: 355px;
    overflow-y: auto;
}

.show-modal{
    display: block !important;
    padding-right: 17px;
}
.det-case .modal-backdrop,
.det-client .modal-backdrop,
.det-task .modal-backdrop{
    display: none;
}
.modal-back.modal-backdrop{
    display: block;
}

.det-case .main-sidebar{
    z-index: 1 !important;
}

.prf-us{
    width: 150px;
    object-fit: cover;
    height:150px;
}

.file-rl p{
    margin-bottom: 0px;
}

.modal-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 16px;
}
.percentage-block{
    display: flex;
    margin: 25px;
}

.percentage-block .percentage-icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 22px;
    text-align: center;
    border-radius: 3px;
}
.percentage-block .percentage-icon i{
    font-size: 22px;
    color: #fff;
}

.percentage-data{
    margin-left: 25px;
}

.percentage-data h4{
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .5px;
    line-height: 1.2;
    color: #98a6ad;
    margin-bottom: 0px;
}

.percentage-data div{
    padding-top: 0;
    font-size: 26px;
    font-weight: 700;
    color: #34395e;
    padding-bottom: 0;
}

.profile-p{
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
    padding-bottom: 25px;
}
.profile-p .prf-pt{
    width: 180px;
}
.gallery.clear-task{
    display: flex;
}
.ph-te:hover .img-hvr-t{
    display: block !important;
    background-color: #fb160a !important;
    color: #ffffff;
}

.gallery.clear-task a{
    text-align: center;
    box-shadow: 0 2px 6px #fd9b96;
    background-color: #fc544b;
    border-color: #fc544b;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    padding-top: 2px;
    margin-left: 9px;
    margin-top: 4px;
    display: none;
}

.gallery.clear-task a:hover{
    background-color: #fb160a !important;
    color: #ffffff;
    transition: all 2s ease; 
}

.gallery.clear-task a>i{
    margin: 0px !important;
}
.btn-d-t{
    height: 37px;
}

.slc-sts{
    padding: 0px !important;
    height: 26px !important;
    padding-left: 10px !important;
}

.btn-cl-s{
    width: 20px;
    height: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 6px #fd9b96;
    background-color: #fc544b;
    border-color: #fc544b;
    color: #fff;
    padding-left: 2.5px;
    padding-top: 1px;
    margin-left: 5px;
    margin-top: 2px;
}
.btn-cl-s:hover{
    background-color: #fb160a !important;
    color: #ffffff;
}
.btn-cl-s i{
    font-size: 11px;
}

.tickets-action{
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 2px 9px 15px 9px;
}
.ta-left{
    text-align: left;
    width: 100%;
    display: inherit;
}
.ta-right{
    text-align: right;
    width: 30%;
}

.tickets-action .ta-left .btn{
    padding: 0px 13px !important;
    height: 25px;
    font-size: 11px !important;
    margin-left: 10px;
}

.tickets-action .ta-left .custom-control-label::before,
.ticket-title .custom-control-label::before{
    top: .22rem !important;
    width: 1.3rem !important;
    height: 1.3rem !important;
}
.tickets-action .ta-left .custom-control-label::after,
.ticket-title .custom-control-label::after{
    top: .22rem;
    width: 1.3rem;
    height: 1.3rem;
}



.file-uploads {
    overflow: hidden;
    position: relative;
    text-align: center;
    display: inline-block;
  }
  .file-uploads.file-uploads-html4 input[type="file"] {
    opacity: 0;
    font-size: 20em;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .file-uploads.file-uploads-html5 input[type="file"] {
    overflow: hidden;
    position: fixed;
    width: 1px;
    height: 1px;
    z-index: -1;
    opacity: 0;
  }

  .upload-body .btn-group .dropdown-menu {
    display: block;
    visibility: hidden;
    transition: all .2s
  }
  .upload-body .btn-group:hover > .dropdown-menu {
    visibility: visible;
  }
  .upload-body label.dropdown-item {
    margin-bottom: 0;
  }
  .upload-body .btn-group .dropdown-toggle {
    margin-right: .6rem
  }
  .upload-body .filename {
    margin-bottom: .3rem
  }
  .upload-body .btn-is-option {
    margin-top: 0.25rem;
  }
  .upload-body .example-foorer {
    padding: .5rem 0;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
  }
  .upload-body .edit-image img {
    max-width: 100%;
  }
  .upload-body .edit-image-tool {
    margin-top: .6rem;
  }
  .upload-body .edit-image-tool .btn-group{
    margin-right: .6rem;
  }
  .upload-body .footer-status {
    padding-top: .4rem;
  }
  .upload-body .drop-active {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    z-index: 9999;
    opacity: .6;
    text-align: center;
    background: #000;
  }
  .upload-body .drop-active h3 {
    margin: -.5em 0 0;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 40px;
    color: #fff;
    padding: 0;
  }
.upload .file-uploads{
    display: none;
}

.td-img img{
    width: 100px;
    padding: 20px;
    object-fit: cover;
    max-height: 100px;
}

.tt-s{
    border-top: 1px solid #eee;
    margin-top: 10px;
    padding-top: 10px;
}

.file-i{
    margin: 15px;
}
.alert-wrapper i{
    font-size: 30px;
    margin-right: 12px;
}
.cln .badge{
    border-radius: 4px;
}

.rw-s-task .col-md-4,
.rw-s-task .col-md-3,
.rw-s-task .col-md-2,
.rw-s-task .col-md-5,
.rw-act-d .col-md-2,
.rw-act-d .col-md-3{
    padding-right: 10px;
    padding-left: 10px;
}
.file-i i{
    font-size: 25px;
    color: white;
    background: #494343;
    padding: 16px;
    width: 60px;
    height: 60px;
}

.prg-file{
    height: 25px;
    font-size: 14px;
}

.Image-input__input-wrapper{
    border: 2px dashed #6777ef;
    min-height: 240px;
    text-align: center;
    cursor: pointer;
}

.Image-input__input{
    color: white;
    width: 148px;
    height: 41px;
}

.Image-input__input.Yfile{
    bottom: 35%;
    left: 40%;
    position: absolute;
}

.Image-input__input::-webkit-file-upload-button {
    visibility: hidden;
}

.Image-input__input.mt-4 {
    width: 112px;
    height: 34px;
}

.Image-input__input.mt-4:before{
    padding: 8px 20px;
    font-size: 13px;
}

.Image-input__input::before {
    content: 'Choose File';
    display: inline-block;
    box-shadow: 0 2px 6px #acb5f6;
    background-color: #6777ef;
    border-color: #6777ef;
    border-radius: 3px;
    color: white;
    padding: 9px 30px;
    outline: none;
    -webkit-user-select: none;
    cursor: pointer;
    font-weight: 900;
    font-size: 16px;
}

.Image-input__input:hover::before{
    background-color: #394eea !important;
}

.col-doc .document-act{
    display: none;
}
.col-doc .document-act a{
    color: #556080;
}
.col-doc:hover .document-act{
    display: block !important;
}

.act-photo{
    width: 45px;
    height: 45px;
    object-fit: cover;
}

.table-act td{
    padding: 0px 5px !important;
}

.notif-block div{
    text-transform: lowercase;
}

.dropdown-list .dropdown-list-content:not(.is-end):after {
    display: none;
}

.notif a:hover{
    background-color: #f3f3f3 !important;
}

.notif-d .del-n{
    text-align: center;
    box-shadow: 0 2px 6px #fd9b96;
    background-color: #fc544b;
    border-color: #fc544b;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    padding-top: 2px;
    margin-left: 10px;
    margin-top: 4px;
    display: none;
}

.notif-list:hover .del-n {
    display: block !important;
    background-color: #fb160a !important;
    color: #ffffff;
}

.notif-d .del-n i {
    margin: 0px !important;
    margin-top: 2px !important;
}
.ss-link{
    cursor: pointer;
}
.gallery-item img{
    width:100%;
    height: 150px;
    object-fit: cover;
}
.gallery-ac{
    background: #d9cccc;
    padding: 5px;
}
.gallery-ac a,
.gallery-ac i{
   color: #000;
   font-size:12px;
   text-decoration: none !important;
}
.image-sc{
    background: #f1f1f1;
    padding: 50px;
    text-align: center;
}

@media (min-width: 768px){
    .table-search.tb-s-cs .col-md-3 {
        -ms-flex: 0 0 22%;
        flex: 0 0 22%;
        max-width: 22%;
    }
    .table-search.tb-s-cs .col-md-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 17.55%;
        max-width: 17.55%;
    }
    .table-search.tb-s-cs .col-md-1 {
        -ms-flex: 0 0 12%;
        flex: 0 0 12%;
        max-width: 12%;
    }
}
@media only screen and (max-width: 768px) {
    .table-search,
    .tabel-action{
        float: none !important;
    }
    .tabel-action .btn{
        width: 100% !important;
        margin-top: 10px !important;
    }
    .paginate-block{
        display: block !important;
    }
    .card-action .card-body {
        width: 100%!important;
        border-radius: 0;
    }
    .card-action {
        left: 0!important;
        width: 100%!important;
        bottom: 0!important;
    }
    .card-action .btn.btn-grey{
        padding: 7px 16px !important;
    }
    .modal-body .table-sorting{
        margin-bottom: 10px !important;
    }
    .g-header{
        display: block !important;
    }
    .g-header .btn-group{
        margin-top: 10px;
    }
    .col-grafic{
        padding: 25px 40px !important;
    }
    .card-header-form, .tabel-entry {
        width: 100%;
    }
    .card-header-form .input-group{
        width:100%;
    }
    .card-header-action.card-btn{
        width: auto !important;
    }
    .wizard-steps {
        display: flex !important;
    }
    .case-header{
        overflow-y: scroll;
    }
    .wizard-steps .wizard-step {
        margin-bottom: 0px !important;
    }
    .w-100{
        width: 100% !important;
        float: left !important;
    }
    .ticket-ac{
        padding-top: 20px;
    }
    .det-case .main-sidebar {
        z-index: 891 !important;
    }
    .main-content {
        padding-left: 15px;
        padding-right: 15px;
    }
}














.sec-front{
    background-color: #fff;
}
.sec-front .title-hd{
    color: #000;
    font-size: 25px;
}
.sec-front .title-hd:after{
    height: 3px;
    display: block;
    width: 70px;
    background: #ed7117;
    border-right: 1px white;
    content: '';
    margin-top: 25px;
    margin-bottom: 25px;
}
.sec-front .title-hd.center:after{
    margin-top: 25px !important;
    margin-bottom: 25px !important;
    margin: 0 auto;
}
.sec-front .p-tx{
    font-size: 16px;
}
.sec-front .navbar{
    left: 0;
}
.sec-front .tx-big{
    color: #fe8353 !important;
    font-size: 30px;
    text-transform: uppercase;
}
.sec-front .hd-sup{
    font-size: 19px;
}
.sec-front .input-group-text, select.form-control:not([size]):not([multiple]), 
.sec-front .form-control:not(.form-control-sm):not(.form-control-lg) {
    height: 45px;
}
.sec-front .form-control{
    border-radius: 30px;
}
.sec-front .bdr-30{
    border-radius: 30px;
}
.sec-front .btn-f-group .btn{
    width: 48%;
    padding: 10px;
    box-shadow: none;
}
.sec-front .btn-f-group .btn-bb,
.sec-front .btn-f-group .btn-bb:hover,
.sec-front .btn-f-group .btn-bb:focus{
    background: transparent !important;
    color: #fe8353;
    border: 2px solid !important;
}
.sec-front .bg-grey{
    background: #f8f8f8;
}
.sec-front .th-wrapper .th-nm{
    color: #fe8353 !important;
}
.col-sosmed ul{
    display: inline-flex;
}
.col-sosmed ul>li>a{
    color: #ffff;
    width: 35px;
    height: 35px;
    font-size: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    margin-right: 12px;
}
.footer-tt{
    margin-bottom: 30px;
}
.footer-front li,
.footer-front p{
    font-size: 15px;
}
.mx-datepicker{
    width:100% !important;
}
@media (min-width: 1200px){
    .sec-front .container.con-front {
        max-width: 1260px;
    }
}
@media (max-width: 768px){
    .img-w{
        width: 100%;
    }
    .ab-cnt{
        margin-top: 30px;
    }
    .pm-0{
        padding: 0px !important;
        margin: 0px !important;
    }
    .pbtm-2{
        padding-bottom: 30px !important;
        padding-top: 30px !important;
    }
    .h-onmobile{
        display: none !important;
    }
    .col-login{
        padding: 90px 25px !important;
        padding-bottom: 0px !important;
    }
    .col-login .login-wrapper{
        padding: 0px !important;
    }
    .container.con-front .navbar-brand img{
        width: 150px;
    }
    .nv-l img{
        width: 25px;
    }
    .nv-l .hd-sup{
        font-size: 16px;
    }
}










.sec-front-ad .cb-p img{
    width: 100%;
    border-radius: 15px;
}
.sec-front-ad{
    /* background: #fff !important; */
}
.sec-front-ad .no-data{
    border:none !important;
}
.sec-front-ad .profile-sidebar h4{
    font-size: 15px;
    margin-top: 15px;
}
.sec-front-ad .profile-sidebar{
    border-bottom: 1px solid #ededed;
    padding-bottom: 15px;
}
.nv-sp{
    padding: 3px 15px;
    color: #bcc1c6;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-weight: 600;
}
.sec-front-ad .navbar{
    height: auto;
    position: initial;
    background: #fff !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
    padding: 0px 20px !important;
    margin-top: 0px !important;
}
.sec-front-ad .navbar-dark .navbar-nav .nav-link{
    color: rgb(120 122 124);
    font-size: 15px;
}
.sec-front-ad .main-sidebar{
    box-shadow: none;
    position: static;
    margin-top: 0px;
    width: 270px;
    min-height: 90vh;
    padding-top: 30px;
    border-top: 1px solid #f4f6f9;
}
.sec-front-ad .main-sidebar .sidebar-menu li a {
    padding: 0 35px;
}
.sec-front-ad .menu-cl{
    border: 1px solid #dee2e6;
    width: 40px;
    height: 40px;
    text-align: center;
    display: flex;
    align-items: center;
    font-size: 20px;
}
.sec-front-ad.sidebar-hide .main-sidebar{
    transform: translateX(-250px);
    width: 0px;
}
.sec-front-ad .main-content{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 25px;
}
.sec-front-ad .section .section-header{
    margin-bottom: 10px;
    box-shadow: none;
    background: transparent !important;
}
.sec-front-ad .tr-pcr .table tbody>tr:last-child{
    border-bottom: none;
}
.sec-front-ad .tr-pcr .table:not(.table-sm):not(.table-md):not(.dataTable) td,
.sec-front-ad .tr-pcr .table:not(.table-sm):not(.table-md):not(.dataTable) th {
    height: 70px;
}
.sec-front-ad  .tr-ac{
    cursor: pointer !important;
    background: #fff;
}
.sec-front-ad .section-body{
    padding: 0px 20px;
}
.btn-download{
    background: #fff;
    border: 2px solid #fe662a;
    border-radius: 30px;
    color: #fe662a;
    padding: 8px 20px;
    font-size: 15px;
}
.btn-download:hover,
.btn-download:focus{
    background: #fe662a !important;
    color: #fff !important;
}
.tb-prf tr>td:first-child{
    font-weight: 700;
    padding: 5px 0px;
}
.footer-front{
    background: #5db6e1;
    padding: 50px 0px 0px;
    color: #fff;
}
.footer-front ul{
    list-style: none;
    padding-left: 0px;
}
.footer-cr{
    border-top: 1px solid white;
    margin-top: 40px;
}

.sec-front-ad .pcr-wrapper .d-title{
    font-size: 14px;
    margin-bottom: 0px;
}
.sec-front-ad .pcr-wrapper .d-data{
    border-top: 1px solid #e5dfdf;
    margin-top: 8px;
    padding-top: 11px;
}
.sec-front-ad .pcr-wrapper .d-data .tx-g {
    color: #7a7878;
}
@media only screen and (max-width: 768px) {
    .sec-front-ad .navbar {
        padding: 10px 20px !important;
    }
    .sec-front-ad .main-content {
        padding-top: 35px;
    }
    .sec-front-ad .section-body,
    .sec-front-ad .section-header{
        padding: 0px !important;
    }
    .sec-front-ad .card-mobile{
        background: transparent !important;
        box-shadow: none !important;
    }
    .sec-front-ad .navbar-brand img{
        width: 140px !important;
    }
    .sec-front-ad .main-sidebar{
        width: 240px;
        top: 54px;
    }
    .sec-front-ad .card-mobile .cb-p{
        padding: 0px !important;
    }
}


.customer-info{
    border: 1px solid #e4e6fc;
    padding: 20px;
    width: 100%;
    border-radius: 20px;
    min-height: 220px;
}
.customer-info table tr td:first-child{
    font-weight: 600;
}
.customer-info table tr td:nth-child(2){
    padding: 0px 10px;
}
.customer-info table tr{
    line-height: 1.7; 
}
.customer-info .btn-up{
    border: none;
    border-style: none !important;
}
.table-order-item td{
    vertical-align: middle;
}
.beep.beep-sidebar:after {
    position: absolute !important;
}
.o-lb{
    cursor: pointer;
    display: initial;
    padding: 2px 10px;
}
.PENDING{
    background: #d3e014;
    width: 100px;
    text-align: center;
}
.RENT{
    background: #90d1ff;
    width: 100px;
    text-align: center;
}
.DONE{
    width: 100px;
    text-align: center;
    background: #06c42f;
}
.CANCELLED{
    background:#c40606;
    width: 100px;
    text-align: center;
}
.table-search .mx-input,
.table-search .vs__dropdown-toggle{
    height: 47px !important;
    border: 2px solid #dee2e6;
    border-radius: 30px;
}
.sts-lb{
    border: none;
    padding: 8px 10px;
    margin-right: 10px;
    color: #fff;
    min-width: 100px;
    font-weight: 800;
}

#sidebar-wrapper::-webkit-scrollbar {
    width: 4px;
}
#sidebar-wrapper::-webkit-scrollbar-track {
    background: #fff;
}
#sidebar-wrapper::-webkit-scrollbar-thumb {
    background-color: darkgrey;
}
.tb-in.table:not(.table-sm):not(.table-md):not(.dataTable) td,
.tb-in.table:not(.table-sm):not(.table-md):not(.dataTable) th{
    padding: 0 10px !important;
    height: 35px;
}
.tb-in.table.table-bordered td, .tb-in.table.table-bordered th {
    border-color: #d2cfcf;
}
.table:not(.table-sm):not(.table-md):not(.dataTable) td, .table:not(.table-sm):not(.table-md):not(.dataTable) th {
    padding: 0 15px;
}
.dropdown-toggle.btn-secondary{
    padding: 0px;
}