@font-face {
    font-family: "Tajawal-Medium";
    src: url("../fonts/site/Tajawal-Medium.ttf");
}

body {
    font-family: "Tajawal-Medium" !important;
}

@media (min-width: 800px) {
    .menu-active body {
        height: 99% !important;
    }
}

#wrapper {
    min-height: 93% !important;
}

.remodal-Custom,
.remodal-permssion {
    overflow: auto;
    border-radius: 15px;
    max-height: 900px;
}

.remodal-view {
    padding: 0 15px 0 !important;
}

.remodal-close:before {
    font-size: 40px !important;
    line-height: 40px !important;
    width: 40px !important;
}

@media only screen and (min-width: 641px) {
    .remodal-Custom {
        max-width: 1000px !important;
    }

    .remodal-permssion {
        max-width: 430px !important;
    }
}

.remodal-cancel {
    background-color: #9e9d9d !important
}

.remodal-confirm-red {
    background-color: #da2c2c !important;
    padding: 12px 0px;
    border: 0;
    min-width: 110px;
    vertical-align: middle;
    color: #FFFFFF
}


.col-centered {
    float: none !important;
    margin: 0 auto !important;
}

.header .logo {
    background: #182126;
}

.validation-message {
    color: red !important;
}

.sweet-alert {
    font-family: "Cairo_Regular" !important;
}

.box-title-agent {
    margin-bottom: 0px;
    padding: 10px 20px 10px 20px;
    line-height: 30px;
    color: #ffffff !important;
    background-color: #435966;
    border-radius: 3px;
}


.rounded-0 {
    border-radius: 0 !important;
}

.font-size-md {
    font-size: 20px !important;
}


@media (max-width: 510px) {
    .font-size-md-1 {
        font-size: 18px !important;
    }
}

.btn-sm-1 {
    padding: 1px 17px !important
}

.btn-sm-2 {
    padding: 1px 18px !important
}

.header-note {
    line-height: 28px !important;
}

.btn-padding {
    padding: 2px 13px;
}

.btn-dark {
    background: #435966;
    color: #ffffff;
}

    .btn-dark:hover {
        color: #ffffff
    }

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.btn-add {
    padding-left: 40px;
    margin-bottom: 10px
}

.modal {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0, 0, 0, 0.7);
    width: 100%;
}

.modal-content {
    position: fixed;
    width: 70%;
    top: 20%;
    z-index: 111111;
    border-radius: 20px;
}

@media (max-width: 768px) {
    .modal-content {
        width: 96%;
    }
}

.modal-dialog {
    box-shadow: 0 5px 15px rgba(0,0,0,0.7);
}

.select2-dropdown {
    z-index: 20000 !important;
}

.border-danger {
    border: red 1px solid
}

.justify-space-between {
    display: flex;
    justify-content: space-between
}

.center-custom {
    margin-left: auto !important;
    margin-right: auto !important
}

.btn-download {
    border: 0;
    background: 0;
    color: #42b842;
    font-size: 3rem;
}

.td-finished {
    box-shadow: inset 15px 0 0 #00bf4f;
}

.td-identical {
    box-shadow: inset 15px 0 0 #435ae4;
}

.td-identical-finished {
    box-shadow: inset 15px 0 0 #435ae4, inset 30px 0 0 #00bf4f;
}

.filter-dark {
    filter: invert(1);
}

/* Style Permissions */
.p-lable {
    font-size: 17px;
}

input[type=checkbox] {
    accent-color: #215398;
    height: 20px;
    width: 20px;
}

.td-site input[type=checkbox] {
    accent-color: #215398;
    height: 15px;
    width: 15px;
}

.btn-violet,
.btn-violet:hover,
.btn-violet:active,
.btn-violet:focus {
    background: #435966 !important;
}

.col-custom-width {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 350px;
}


@media (max-width: 535px) {
    .background-permission {
        background: none;
    }
}

.col-custom-width::-webkit-scrollbar {
    height: 0;
    width: 3px;
}

.col-custom-width::-webkit-scrollbar-thumb {
    background: rgb(1,1,1,0.2);
}


/* Main Menu && Nav Bar */
.header-menu-site {
    font-size: 27px !important;
    background-color: #1e1e1e
}

.user-name-site {
    color: #435966;
    margin: 0px;
    font-size: 17px;
    line-height: 26px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 900;
    position: absolute;
    right: 110px;
    font-weight: 900;
}

.permission-group-name {
    color: #aab2bd;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    margin: 0;
    position: absolute;
    top: 56px;
    right: 111px;
}

.circle-image-menu {
    border-radius: 50%;
    overflow: hidden;
    width: 65px;
    height: 65px;
    float: right;
    position: absolute;
    right: 25px;
    bottom: 30px;
    border: 3px solid #d7ecfb;
}

.fixed-navbar {
    background: #0f242e;
    padding: 0 0 0 25px !important;
}

.menu-mobile-button {
    border-radius: 50%;
    padding: 1rem;
    background: 0;
    top: 17px !important;
    height: 40px !important;
    width: 40px !important;
    margin-right: 1rem;
}

.fixed-navbar .ico-item {
    color: #fff;
}

.navigation .menu > li.current > a {
    color: #000000;
}

    .navigation .menu > li.current > a > i {
        color: #000000;
    }



@media (min-width: 1025px) {
    .navigation .menu a:hover {
        color: #020101;
    }
}

.navigation .menu li:hover .menu-icon-site {
    color: #000000 !important;
}

@media (max-width: 800px) {
    .navigation .menu li:hover .menu-icon-site {
        color: #ffffff !important;
    }
}

@media (min-width: 800px) {
    .menu-active .header .logo::before {
        background: #182126;
    }

    .menu-active .header .logo {
        color: #ffffff;
        padding-right: 1rem;
    }

        .menu-active .header .logo::after {
            background: unset;
            color: unset;
        }
}

@media (max-width: 499px) {
    .fixed-navbar .fa-power-off {
        display: inline-block !important;
    }

    .fixed-navbar .full-screen-site {
        display: none !important;
    }
}

.menu-active .navigation .menu > li:hover > a {
    width: 260px;
    background: #0f242e;
    color: #ffffff;
    padding-left: 90px;
}
/* View modal */
.color-text {
    color: #6E7A8F;
}

.bold-600 {
    font-weight: 600;
}

/* Select2 */
.select2-selection--single,
.select2-selection--multiple {
    padding: 20px 0 22px 0;
    border: 1px solid #ccd1d9 !important;
    border-radius: 2px !important;
}

.select2-selection__arrow {
    top: 8px !important;
}

.select2-selection__rendered {
    position: absolute;
    bottom: 6px;
}

/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------- upload-file-Task ---------------------------------------------------- */

.upload-lable {
    display: inline-block;
    background-color: #435966;
    color: white;
    padding: 1rem;
    border-radius: 3px !important;
    cursor: pointer;
    margin-top: 1rem;
}

.message-upload {
    position: absolute;
    right: 170px;
    top: 22px;
    color: #c3c3c3
}

@media (max-width: 376px) {
    .message-upload {
        right: 100px;
    }
}

.view-file {
    display: flex;
    align-items: center;
    padding: 15px;
    margin: 8px;
    height: 100px;
    width: 47%
}

@media (max-width: 679px) {
    .view-file {
        width: 96%;
    }
}

.view-file img {
    border-radius: 5px;
    height: 70px;
}

.view-file .counter-file {
    padding-left: 10px;
    font-size: 15px;
    color: #b9b9b9;
}

.view-file .size {
    position: absolute;
    bottom: 13px;
    font-size: 12px;
    right: 155px;
    color: #9f9f9f;
}

.view-file .extenstion {
    position: absolute;
    right: 155px;
    bottom: 30px;
    color: #b9b9b9;
}

.btn-delete {
    position: absolute;
    left: 3px;
    top: 3px;
    border: 0;
    background: none;
    font-size: 15px;
    color: #b9b9b9;
}

    .btn-delete:hover {
        color: #020101;
    }


.file {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.view-eye {
    position: absolute;
    left: 8px;
    font-size: 18px;
    color: #b9b9b9;
}

    .view-eye:hover {
        color: blue;
    }



.overflow-remodal {
    overflow-y: auto;
    max-height: 70rem;
}

@media (max-width: 499px) {
    .overflow-remodal {
        max-height: 54rem;
    }

        .overflow-remodal::-webkit-scrollbar {
            width: 3px !important;
            border-radius: 5px
        }
}

.overflow-remodal::-webkit-scrollbar {
    height: 0;
    width: 7px;
    background: rgb(1,1,1,0.1);
}

.overflow-remodal::-webkit-scrollbar-thumb {
    background: rgb(1,1,1,0.2);
}

    .overflow-remodal::-webkit-scrollbar-thumb:hover {
        background: rgb(1, 1, 1, 0.3);
    }


/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------- Audio Recorder ----------------------------------------------------- */
#buttons button {
    font-size: 1rem;
    padding: 1rem;
    width: calc(50% - 0.25rem);
}


.record {
    background: #0088cc;
    text-align: center;
    color: white;
}

    .record:hover, .record:focus {
        box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 1);
        background: #0ae;
    }

    .record:active {
        box-shadow: inset 0px 0px 20px rgba(0,0,0,0.5);
        transform: translateY(2px);
    }

.recording {
    background: red;
    text-align: center;
    color: white;
}

.stop {
    font-size: 1rem;
    background: #0088cc;
    text-align: center;
    color: white;
    border: none;
    transition: all 0.2s;
    padding: 0.5rem;
}

    .stop:hover, .stop:focus {
        box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 1);
        background: #0ae;
    }

    .stop:active {
        box-shadow: inset 0px 0px 20px rgba(0,0,0,0.5);
        transform: translateY(2px);
    }


.wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}


.sound-clips {
    flex: 1;
    overflow: auto;
}

/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------- VIEW TASK MODAL ---------------------------------------------------- */

.comment-row {
    height: 430px;
    overflow-y: auto;
}

@media (max-width: 499px) {
    .comment-row {
        height: 330px;
        overflow-y: auto;
        overflow-x: hidden;
    }

        .comment-row::-webkit-scrollbar {
            width: 3px !important;
            border-radius: 5px
        }
}

.comment-row::-webkit-scrollbar {
    height: 0;
    width: 7px;
    background: rgb(1,1,1,0.1);
}

.comment-row::-webkit-scrollbar-thumb {
    background: rgb(1,1,1,0.2);
}

    .comment-row::-webkit-scrollbar-thumb:hover {
        background: rgb(1, 1, 1, 0.3);
    }

.circle-image {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    width: 40px;
    height: 40px;
    float: right
}

.circle-image-user {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    width: 25px;
    height: 25px;
    float: right
}

.circle-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-veiw {
    background: #F4F5F7;
    padding: 3rem 2rem 3rem 2rem;
    border-bottom: 2px solid #e3e3e3;
}

.header-veiw-activate {
    background: #F4F5F7;
    padding: 1rem 2rem 1rem 2rem;
    border-bottom: 2px solid #e3e3e3;
}

.header-veiw-activate-row {
    background: #ffffff;
    padding: 1rem 2rem 1rem 2rem;
    border-bottom: 2px solid #e3e3e3;
}

@media (max-width: 770px) {
    .header-veiw {
        padding: 1rem 2rem 1rem 2rem !important;
    }
}

.type {
    background: #FF6D6D;
    width: fit-content;
    padding: 1rem;
    border-radius: 6px;
    font-size: 19px;
}

.status {
    background: #FFFFFF;
    color: #969696;
    width: fit-content;
    padding: 1rem;
    border-radius: 6px;
    font-size: 19px;
}

.status-select {
    background: #FFFFFF;
    color: #969696;
    padding: 0.9rem;
    border-radius: 6px;
    width: 125px;
    font-size: 19px;
}

.project-site {
    background: #008FFF;
    color: #FFFFFF;
    padding: 1rem;
    border-radius: 6px;
    font-size: 19px;
    width: fit-content;
}

.project-site-ticket {
    background: #008FFF;
    color: #FFFFFF;
    padding: 1rem;
    border-radius: 6px;
    font-size: 19px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 120px;
    max-width: 135px;
}

.text-dark-site {
    color: #1D2F4E;
}

.circle-image-1 {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    width: 30px;
    height: 30px;
    float: right;
}

.mr-site {
    margin-right: 3rem;
    padding-left: 0;
}

@media (max-width: 630px) {
    .mr-site {
        margin-right: 0 !important;
        padding-left: 4rem;
    }
}

@media (max-width: 510px) {
    .mr-8 {
        margin-right: 0 !important;
    }
}


.w-fit-content {
    width: fit-content !important;
}

.user-name {
    position: absolute;
    right: 5.5rem;
    top: -2px
}

.date-time {
    position: absolute;
    right: 5.5rem;
    top: 18px;
    font-size: 10px;
    color: #BCBCBC
}

.details-hide {
    line-height: 2rem;
    color: #182A49;
    font-size: 15px;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 650px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: pre-wrap;
}

.details-show {
    line-height: 2.2rem;
    color: #182A49;
    font-size: 15px;
    overflow-y: scroll;
    max-width: 650px;
    white-space: pre-wrap;
}

.details-default {
    line-height: 2.2rem;
    color: #182A49;
    font-size: 15px;
    max-width: 550px;
    white-space: pre-wrap;
}

.details-show::-webkit-scrollbar {
    height: 0;
    width: 5px;
    border-radius: 10px;
}

.details-show::-webkit-scrollbar-thumb {
    background: rgb(1,1,1,0.2);
    border-radius: 10px;
}

.border-top {
    border-top: 2px solid #e3e3e3;
}

.border-row {
    border-bottom: 2px solid #e3e3e3;
}

.comment-default {
    line-height: 22px;
    background: #F4F5F7;
    font-size: 13px;
    border-radius: 14px;
    padding: 2rem;
}

@media (max-width: 430px) {
    .comment-default .col-xs-6 {
        width: 100%;
    }
}

.title-comment {
    color: #1D2F4E;
    font-weight: 900;
    position: relative;
    top: -9px;
}

.comment-date {
    font-size: 12px;
    color: #BCBCBC;
    display: flex;
    justify-content: end;
}

.attach-comment {
    display: inline-block;
    border-radius: 22%;
    overflow: hidden;
    width: 38px;
    height: 38px;
}

    .attach-comment img {
        height: 100%;
    }

.extenstion-comment {
    color: #616E84;
    font-size: 19px;
    height: fit-content;
    right: 90px;
    position: absolute;
    top: -2px;
}

.size-attach-comment {
    font-size: 10px;
    color: #616E84;
    height: fit-content;
    padding-top: 2rem;
    padding-right: 1rem;
    margin: 0;
}

.btn-delete-attach-comment {
    top: -10px;
    position: absolute;
    border: none;
    background: none;
    right: 2px;
    display: none;
}

@media (max-width: 500px) {
    .btn-delete-attach-comment {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


.btn-delete-attach-comment i {
    border-radius: 50%;
    padding: 2px 4px 2px 5px;
    font-size: 20px;
}



.attach-comment-area:hover .btn-delete-attach-comment {
    display: flex;
    align-items: center;
    justify-content: center;
}

.attach-comment-area {
    display: flex;
    height: 50px;
}

@media (max-width: 430px) {
    .w-100-xs {
        width: 100%;
    }
}


.dropdown-site {
    width: fit-content;
    position: absolute;
    left: -5px;
    top: 11px;
}


.dropdown a {
    color: #95979c;
}

    .dropdown a:hover {
        color: #020101;
    }


.comment-hide {
    line-height: 22px;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 550px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: pre-wrap;
}

.comment-show {
    line-height: 22px;
    max-width: 550px;
    display: -webkit-box;
    white-space: pre-wrap;
}

.comment-decr-default {
    white-space: pre-wrap;
    line-height: 22px;
}



.div-comment {
    padding: 1rem 1rem 1rem 2rem;
    border-radius: 13px;
    border: 1px solid #DADCE3;
}

    .div-comment:focus {
        transition: .2s;
    }


    .div-comment .text-area {
        padding: 2px 12px;
        border: 0;
        font-size: 18px;
        height: 45px;
        resize: vertical;
        overflow: auto;
    }




textarea::-webkit-scrollbar {
    height: 0;
    width: 5px;
    border-radius: 10px;
}

textarea::-webkit-scrollbar-thumb {
    background: rgb(1,1,1,0.2);
    border-radius: 10px;
}

.textarea::placeholder {
    color: #6F7B90;
}

.textarea:hover,
.text-area:active,
.text-area:focus {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}


.btn-send {
    margin-right: 1rem;
    float: right;
    background: #61BC50;
    font-size: 18px;
    color: #ffffff !important;
    border-radius: 6px;
    padding: 5px 12px;
    font-weight: 900;
}

@media (max-width: 400px) {
    .btn-send {
        font-size: 16px;
        padding: 4px 11px 7px 11px;
    }

    .text-area {
        font-size: 16px;
    }
}

.btn-edit {
    margin-right: 1rem;
    float: right;
    background: #4f6aff;
    font-size: 17px;
    color: #ffffff !important;
    border-radius: 6px;
    padding: 5px 12px;
    font-weight: 900;
}

.close-edit {
    top: 5px;
    left: 13px !important;
}

.upload-btn-comment {
    position: absolute;
    bottom: -3px;
    left: 15px;
    font-size: 18px;
    color: #44536E;
    cursor: pointer;
    padding: .5rem;
}

.upload-btn-comment-disabled {
    position: absolute;
    bottom: -3px;
    left: 15px;
    font-size: 18px;
    color: #c7c9cb;
    cursor: pointer;
    padding: .5rem;
}

.upload-btn-comment:hover {
    background: #dddddd;
    border-radius: 50%;
}


#buttons button {
    font-size: 20px;
    border-radius: 50%;
    width: fit-content;
    background: none;
    padding: 4px 10px 4px 10px;
    border: none;
}

#buttons .record {
    position: absolute !important;
    left: 55px;
    bottom: 6px;
    color: #44536E;
}

#buttons .record-disabled {
    position: absolute !important;
    left: 55px;
    bottom: 6px;
    color: #c7c9cb;
}

#buttons .stop {
    position: absolute !important;
    left: 55px;
    bottom: 6px;
    color: #de0000
}

#buttons button:hover {
    background: #dddddd;
}

.visualizer {
    height: 52px;
    width: 100%
}

.btn-show {
    background: none;
    border: 0;
}

    .btn-show:hover {
        text-decoration: underline;
    }

.row-attah-textarea {
    overflow-y: auto;
    max-height: 7rem;
    padding-top: 10px;
}

    .row-attah-textarea::-webkit-scrollbar {
        height: 0;
        width: 5px;
        border-radius: 10px;
    }

    .row-attah-textarea::-webkit-scrollbar-thumb {
        background: rgb(1,1,1,0.2);
        border-radius: 10px;
    }

.selected-user {
    display: flex;
    align-items: center;
    justify-content: start;
    border: 2px solid #d9d9d9;
    border-radius: 7px;
    background: white;
    color: #6c6c6c;
    max-width: 18rem;
}

.agent-phone {
    cursor: copy;
}


@media (max-width: 576px) {
    .forwarded-to {
        display: grid;
        align-items: center;
        justify-content: center;
    }

    .font-size-13 {
        font-size: 12px;
    }

    .project-site-ticket {
        max-width: 72px !important;
    }

    .font-size-per {
        font-size: 17px !important;
        line-height: 2.5rem;
    }
}

@media (max-width: 360px) {
    .font-size-13 {
        font-size: 10px !important;
    }

    .font-size-agent {
        font-size: 10px !important;
    }
}

.font-size-agent {
    font-size: 14px !important;
}

.font-size-12 {
    font-size: 12px !important;
}

.font-size-17 {
    font-size: 17px !important;
}

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


.border-none {
    border: 0 !important;
}

.bg-none {
    background: 0 !important;
}


.dataTables_empty {
    display: none;
}

div.dataTables_wrapper div.dataTables_filter input {
    border-radius: 8px;
}

.fa-delete-site {
    font-size: 17px;
    color: #949494;
}

.btn-site:hover .fa-delete-site {
    color: #FF0000
}

.fa-edit-site {
    font-size: 17px;
    color: #949494;
}

.btn-site:hover .fa-edit-site {
    color: #0080FF !important;
}

.fa-success-site {
    font-size: 17px;
    color: #949494;
}

.btn-site:hover .fa-success-site {
    color: #55C759
}

.fa-eye-site {
    font-size: 17px;
    color: #949494;
}

.btn-site:hover .fa-eye-site {
    color: #0091A8
}

.fa-gears-site {
    font-size: 17px;
    color: #949494;
}

.btn-site:hover .fa-gears-site {
    color: #FFCC00;
}

/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------- remodal Confirmation ----------------------------------------------- */
.remodal-Confirmation {
    height: 400px;
    border-radius: 30px;
}

.fa-color-red {
    color: #FF5454;
}

.fa-color-success {
    color: #55C759;
}

.header-confirm {
    font-size: 30px;
    color: #585858;
    font-weight: 500;
}

.body-confirm {
    font-size: 20px;
    font-weight: 500;
    color: #A8A8A8;
}

.confirm-btn {
    background-color: #80C783;
    padding: 8px 40px 8px 40px;
    border: 0;
    vertical-align: middle;
    color: #FFFFFF;
    border-radius: 10px;
    font-size: 25px;
}

.cancel-btn {
    background-color: #FF5454;
    padding: 8px 40px 8px 40px;
    border: 0;
    vertical-align: middle;
    color: #FFFFFF;
    border-radius: 10px;
    font-size: 25px;
    margin-right: 0.5rem;
}

/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------- Control Panel ------------------------------------------------------ */

#panel .row-panel {
    margin-bottom: 4rem !important;
}

.row-panel {
    background: #ffffff;
    border-radius: 20px;
    padding: 1rem 3rem 1rem 3rem;
    margin: 2rem 0;
    border: 1px #f0f0f0 solid;
}


#panel-ticket .bg-panel-0 {
    background-color: #ff460b !important;
    transition: .5s
}

.row-panel .bg-panel-1:hover,
#panel-ticket .bg-panel-1 {
    background-color: #723CEB;
    transition: .5s
}

    .row-panel .bg-panel-2:hover,
    #panel-ticket .bg-panel-2 {
        background-color: #365EFF;
        transition: .5s
    }

    .row-panel .bg-panel-3:hover,
    #panel-ticket .bg-panel-3 {
        background-color: #00AAAC;
        transition: .5s
    }

    .row-panel .bg-panel-5:hover,
    #panel-ticket .bg-panel-5 {
        background-color: #12b378;
        transition: .5s
    }

    .row-panel .bg-panel-7:hover,
    #panel-ticket .bg-panel-7 {
        background-color: #CE7777;
        transition: .5s
    }

    .row-panel .bg-panel-8:hover,
    #panel-ticket .bg-panel-8 {
        background-color: #2B3A55;
        transition: .5s
    }


    .row-panel .bg-panel-4:hover,
    #panel-ticket .bg-panel-4 {
        background-color: #FF6363;
        transition: .5s
    }

    .row-panel .bg-panel-6:hover,
    #panel-ticket .bg-panel-6 {
        background-color: #ffaa00;
        transition: .5s
    }

#panel-ticket .bg-panel-0:hover {
    background-color: #ce3f12 !important;
    transition: .5s
}

#panel-ticket .bg-panel-1:hover {
    background-color: #4319a1;
    transition: .5s
}

#panel-ticket .bg-panel-2:hover {
    background-color: #0024b3;
    transition: .5s
}

#panel-ticket .bg-panel-3:hover {
    background-color: #008688;
    transition: .5s
}

#panel-ticket .bg-panel-4:hover {
    background-color: #ff2828;
    transition: .5s
}

#panel-ticket .bg-panel-5:hover {
    background-color: #17804d;
    transition: .5s
}

#panel-ticket .bg-panel-6:hover {
    background-color: #d19200;
    transition: .5s
}

#panel-ticket .bg-panel-7:hover {
    background-color: #cf4a4a;
    transition: .5s
}

#panel-ticket .bg-panel-8:hover {
    background-color: #171f2e;
    transition: .5s
}

.header-panel {
    font-weight: 900;
    color: black;
    margin: 0;
    padding: 1rem 2rem 3rem 0;
}

.header-panel-10-task {
    background: #3598DB;
    padding: 2rem 4rem;
    margin-right: 2rem;
    width: fit-content;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 700;
}

.header-panel-10-ticket {
    background: #F39C11;
    padding: 2rem 4rem;
    margin-right: 2rem;
    width: fit-content;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 700;
}

.box-site {
    padding: 2rem;
    position: relative;
    background-color: rgb(34, 34, 34);
    height: 20rem;
    width: 100%;
    overflow: hidden;
    margin-bottom: 30px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    background-color: #393939;
}

    .box-site .text-panel {
        position: absolute;
        font-size: 17px;
        font-weight: 900;
        color: #ffffff;
        top: 92px;
        right: 43px;
    }

    .box-site .counter-panel {
        position: absolute;
        font-weight: 900;
        color: #ffffff;
        opacity: 0.7;
        bottom: 4px;
        right: 37px;
        font-size: 40px;
    }

.fa-task-urgent {
    font-size: 20px;
    padding: 1.6rem;
    color: #ffffff;
    border-radius: 50%;
    background-color: #ff7878;
}

.fa-task-wait {
    font-size: 20px;
    padding: 1.5rem 1.8rem;
    color: #ffffff;
    border-radius: 50%;
    background-color: #fdc130;
}


.fa-task-project {
    width: 53px;
    padding: 1.2rem;
    border-radius: 50%;
    background-color: #3694FF;
}

.fa-sent-task {
    font-size: 22px;
    color: #ffffff;
    padding: 1.5rem;
    border-radius: 50%;
    background-color: #8854fc;
}

.fa-received-task {
    font-size: 20px;
    padding: 1.6rem;
    background-color: #53bfc0;
    border-radius: 50%;
    color: #ffffff;
}

.fa-finish-task {
    font-size: 32px;
    padding: 1rem;
    background-color: #00ce82;
    border-radius: 50%;
    color: #ffffff;
    position: absolute;
    top: 18px;
}

#panel a,
#panel-ticket a {
    display: flex;
    align-items: center;
    -ms-flex-align: center;
    justify-content: center;
}

.box-site-ticket {
    padding: 2rem;
    position: relative;
    background-color: rgb(34, 34, 34);
    height: 13rem;
    width: 100%;
    overflow: hidden;
    margin-bottom: 30px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
}

    .box-site-ticket .text-panel-ticket {
        position: absolute;
        font-size: 17px;
        font-weight: 900;
        color: #ffffff;
        top: 73px;
        right: 52px;
    }

    .box-site-ticket .counter-panel-ticket {
        position: absolute;
        font-weight: 900;
        color: #ffffff;
        opacity: 0.7;
        bottom: 4px;
        font-size: 40px;
        left: 20px;
        top: 5px;
    }

.fa-ticket-urgent {
    font-size: 17px;
    padding: 1.2rem;
    color: #ffffff;
    border-radius: 50%;
    background-color: #ff7878;
    position: absolute;
    top: 14px;
}

.fa-ticket-wait {
    font-size: 17px;
    padding: 1.2rem 1.5rem;
    color: #ffffff;
    border-radius: 50%;
    background-color: #fdc130;
    position: absolute;
    top: 14px;
}

.fa-ticket-project {
    width: 45px;
    padding: 0.8rem;
    border-radius: 50%;
    background-color: #3694FF;
    position: absolute;
    top: 15px;
}

.fa-ticket-subscribe {
    width: 45px;
    padding: 0.8rem;
    border-radius: 50%;
    background-color: #ff864e;
    position: absolute;
    top: 15px;
    font-size: 26px;
}


.fa-sent-ticket {
    font-size: 17px;
    color: #ffffff;
    padding: 1.2rem;
    border-radius: 50%;
    background-color: #8854fc;
    position: absolute;
    top: 14px;
}

.fa-received-ticket {
    font-size: 17px;
    padding: 1.2rem;
    background-color: #53bfc0;
    border-radius: 50%;
    color: #ffffff;
    position: absolute;
    top: 14px;
}

.fa-finish-ticket {
    font-size: 28px;
    padding: 0.7rem;
    background-color: #00ce82;
    border-radius: 50%;
    color: #ffffff;
    position: absolute;
    top: 14px;
}

.fa-req-first {
    font-size: 22px;
    padding: .9rem;
    background-color: #d69494;
    border-radius: 50%;
    color: #ffffff;
    position: absolute;
    top: 14px;
}

.fa-req-end {
    font-size: 22px;
    padding: 0.9rem;
    background-color: #55637c;
    border-radius: 50%;
    color: #ffffff;
    position: absolute;
    top: 14px;
}

@media (min-width: 992px) {
    #panel .col-lg-3,
    #panel-ticket .col-lg-3 {
        -ms-flex: 0 0 32rem;
        flex: 0 0 32rem;
        max-width: 32rem;
    }
}

@media (max-width: 450px) {
    .text-small-panel {
        font-size: 12px !important;
        right: 35px;
    }
}


/* responsive data-table */

@media (max-width: 499px) {
    div.dataTables_wrapper .dataTables_length,
    div.dataTables_wrapper div.dataTables_filter {
        float: none !important;
        text-align: center !important;
    }

    .btn-add-table,
    .header-table {
        display: flex;
        align-items: center !important;
        justify-content: center !important;
    }
}

.btn-add-table {
    display: flex;
    align-items: end;
    justify-content: end;
}

@media (max-width: 450px) {
    .text-small-site {
        font-size: 18px !important;
    }
}


/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------- Login -------------------------------------------------------------- */

.login {
    height: 93vh;
    width: 100vw;
}

    .login .col-sm-8-site {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
    }

@media (min-width: 940px) {
    .login .col-sm-8-site {
        width: 94rem;
        height: 57rem;
    }
}

@media (max-width: 650px) {
    .col-site {
        display: none;
    }
}

.text-signin {
    font-size: 20px;
    font-weight: 100;
    color: #b9b9b9;
    padding: 1rem 5rem 0 5rem;
}

.form-site {
    margin: 0rem 10rem 0rem 10rem;
}

@media (max-width: 800px) {
    .form-site {
        margin: 0 5rem 0 5rem;
    }
}

.form-site .form-control {
    padding-right: 50px !important;
    padding-left: 14px !important;
}

.form-site .item-icon-right {
    left: auto !important;
    right: 0 !important;
}

.form-site input {
    border: 1px solid #D2D2D2;
    border-radius: 7px;
}

    .form-site input::placeholder {
        color: #C7C7C7 !important;
    }

    .form-site input:-webkit-autofill {
        transition: background-color 5000s ease-in-out 0s;
    }

    .form-site input:-webkit-autofill {
        -webkit-text-fill-color: #7b7b7b !important;
    }

    .form-site input:active,
    .form-site input:focus {
        box-shadow: none !important;
    }

.form-site i {
    color: #B7B7B7
}

.btn-sign-site {
    margin-top: 1rem;
    background: #36CFD1;
    color: #ffffff;
    border-radius: 8px
}

    .btn-sign-site:hover,
    .btn-sign-site:active,
    .btn-sign-site:focus {
        color: #ffffff;
        background: #34A1A2;
    }

.text-color-agent {
    color: #858585;
}

/*  footer  */
footer {
    color: #A2A2A2;
}

/* spinner */

.spin-page {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80vh;
}


.spinner-site {
    border: 10px solid silver;
    border-top: 10px solid #337AB7;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
}

.spinner-site-modal {
    border: 8px solid silver;
    border-top: 8px solid #2fafa9;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 700ms linear infinite;
    margin-top: 6rem;
}

.spinner-site-modal2 {
    border: 8px solid silver;
    border-top: 8px solid #2fafa9;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 700ms linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

/* Promoter-Layout */
.main-content-promoter {
    position: relative;
    z-index: 10;
    margin-right: 20px;
    margin-left: 20px;
    padding-top: 95px;
    min-height: 100vh;
}

#panel-promoter .col-lg-3 {
    transition: 0.2s all
}

#panel-promoter .col-lg-3:hover {
    transform: scale(1.04);
    transition:  0.2s all
}

.footer-promoter {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
}


.promoter-page {
    min-height: 93vh;
    overflow: auto;
}

.dir-rtl {
    direction: rtl !important;
}

.text-decoration-underline {
    text-decoration: underline !important
}

.border-underline {
    border-bottom: 1px solid black;
}

.d-none-site {
    display: none !important;
}