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

* {
    text-decoration: none !important;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background-color: #ebebeb;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #F88D31;
}
.expertise-trainer {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
input:focus,
textarea:focus,
.form-floating .float-drp:focus {
    outline: #FD7500 !important;
    border-color: #FD7500 !important;
}

body {
    /* font-family: 'Open Sans', sans-serif !important; */
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
}

.Duplicate-row {
    display: none;
}

.notification-mark {
    position: relative;
}

.havequery-mark {
    position: relative;
}

.trainee-course-completed {
    color: #25BB00 !important;
}

.trainee-course-change {
    color: rebeccapurple !important;
}

.trainee-course-progress {
    color: #FD7500 !important;
}

.trainee-jobs-completed {
    color: #25BB00 !important;
}

.trainee-jobs-notcompleted {
    color: #EA0202 !important;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
optgroup,
select,
textarea {
    /* font-family: 'Open Sans', sans-serif !important; */
    font-family: "Inter", sans-serif !important;
}

.brows_btn {
    display: flex !important;
    align-items: center !important;
    margin-right: 1rem !important;
}

.dropdown .browse-web {
    color: #ee3137 !important;
    border: 1px solid #ee3137;
    border-radius: 37px;
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
    font-size: 14px !important;
    height: 2rem !important;
    display: flex !important;
    align-items: center !important;
}

/* login, forgot password, reset password, otp logo design */
.logo-login {
    /* width: 139px; */
    margin: 0 auto;
    /* height: 89px; */
}

input[type=checkbox],
input[type=radio] {
    cursor: pointer;
}



.import-btn {
    cursor: pointer;
}

.width-fit .select2 {
    width: 100% !important;
}

.logo-login a {
    text-align: center;
    color: #ee3137;
    text-transform: uppercase;
}

.logo-login a h1 {
    font-weight: 700;
    font-size: 36px;
}


.logo-login img {
    width: 50%;
    /* height: 90px; */
}

.dropup .dropdown-toggle::after {
    display: none !important;
}

.filter-option-inner-inner {
    font-size: 14px !important;
    color: #999 !important;
}

.filter-option-inner-inne:focus .select .select-text {
    outline: #ee3137 !important;
    border-color: #ee3137 !important;
}


/* CK Editors */

#cke_27,
#cke_21,
#cke_28,
#cke_29,
#cke_20,
#cke_1_path {
    display: none;
}

#cke_1_toolbox {
    display: flex;
}

/* Card -design */
.content {
    position: relative;
}

/* .content:before {
  content: "";
  width: 96.5%;
  z-index: 0;
  margin-top: -0.87rem;
  border-radius: 1.6rem;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  margin-left: auto;
  margin-right: auto;
  height: 5rem;
  background-color: #4e4e4e1f;
} */

.breadcrumb-item a {
    /* color: #ee3137; */
}

.breadcrumb-item.active {
    color: #333 !important;
}

.breadcrumb-item:not(.active)::after {
    content: '\203A';
    margin-right: 5px;
    margin-left: 5px;
    font-size: 20px;
    color: black;
    padding-left: 5px;
    line-height: 0;
}

.breadcrumb-item a:hover {
    color: #00a4d6;
}

.login-pagev1 {
    background-image: url("../../dist/img/bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.login-v2 {
    background: url("../../dist/img/bg-3.jpg");
    background-position: center;
    background-repeat: no-repeat;
    /* height: 100% !important; */
    background-size: cover;
}

.main-cont-login {
    align-items: center;
}

.left-gif img {
    width: 100%;
}

.login-box {
    width: 30%;
}

.login2-box {
    width: 85%;
    margin-left: auto;
    margin-right: 0;
}

.login3-box {
    width: 50%;
    margin: 0 auto;
}

.login-cards {
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 16px -1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 16px -1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 16px -1px rgba(0, 0, 0, 0.2);
}

.login-logo {
    font-size: 40px;
    font-weight: 500;
    padding-bottom: 0px !important;
    color: #161048;
}

.login-pera {
    font-size: 16px;
    padding: 0 0 7px 0 !important;

}

.login-card-body,
.register-card-body {
    background-color: #fff;
    border-top: 0;
    color: #666;
    padding: 10% 5%;
    border-radius: 10px;
    width: 85%;
    margin: 0 auto;
}

.login-card-body a {
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
}

.check-box-btn-style::before {
    border-radius: 6px !important;
}

.check-box-btn-style a {
    display: inline;
    color: #25A8E0;
}


.login-logo-card {
    width: 80%;
    margin-bottom: 20px;
}

.forgote-link {
    width: 100%;
    display: inline-block;
}

.forgote-link a {
    float: right;
    color: #25A8E0;
}

.list-icon-card {
    font-size: 26px;
}

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


/*  list */

.grid-list-head h3 {
    float: left;
}

.card-filter {
    background-color: white;
    color: #40434a;
    border: 2px solid #e6e6e6;
    border-radius: 10px;
}

.gridlist-icons {
    display: flex;
    justify-content: end;
    transition: all 2s ease-in;
}

.gridlist-icons .export {
    background-color: var(--green);
}

.gridlist-icons .import {
    background-color: var(--cyan);
}

.gridlist-icons .filter {
    /* background-color: var(--gray-dark); */
    background-color: #2C2C2C;
}

.grid-icon-top {
    margin-left: 0.5rem;
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.grid-icon-top a {
    width: 100%;
    text-align: center;
}

.filter-form .form-floating label {
    font-size: 14px;
    font-weight: 500 !important;
    color: #a1a1a1;
    margin-bottom: 0;
}


.filter-form .form-floating .form-select {
    font-size: 14px;
    /* -webkit-box-shadow: 0px 0px 19px -5px rgba(0, 0, 0, 0.13);
  -moz-box-shadow: 0px 0px 19px -5px rgba(0, 0, 0, 0.13);
  box-shadow: 0px 0px 20px 2px rgb(0 0 0 / 13%); */
    border: 1px solid #dfdfdf;
    background-color: var(--white);
    position: relative;
}

.filter-form .form-floating .form-select option {
    cursor: pointer;
}

.select {
    position: relative;
    width: 100%;
}

.select-text {
    position: relative;
    /* height: 40px; */
    background-color: transparent;
    width: 100%;
    padding: 10px 10px 10px 20px;
    font-size: 14px;
    border-radius: 4px;
    /* border: 1px solid #dfdfdf; */
    background-color: var(--white);
}

/* Remove focus */


.remove:hover svg {
    fill: #ee3137;
}

/* Pass Gen */
.generator input.active {
    border: 2px solid #0f6d41;
}

.pass-gen-btn {
    display: inline-block;
    right: 5rem;
    background-color: #0075FF;
    border: 1px solid #b7b7b7;
    border-radius: 20px;
    margin-left: 3px;
    position: absolute;
    -webkit-appearance: button;
    padding: 5px 14px;
    top: 8px;
    font-size: 12px;
    color: white;
}

.copy-pass-btn {
    display: inline-block;
    right: 1rem;
    background-color: #0f6d41;
    border: 1px solid #085f36;
    border-radius: 20px;
    margin-left: 3px;
    position: absolute;
    -webkit-appearance: button;
    padding: 5px 14px;
    top: 8px;
    color: #fff;
    font-size: 12px;
}

/* Use custom arrow */
.select .select-text {
    appearance: none;
    -webkit-appearance: none;
    color: gray;
    height: 50px;
    border: 1px solid #dadce0;
    text-overflow: ellipsis;
}

.select:after {
    position: absolute;
    top: 24px;
    right: 10px;
    /* Styling the down arrow */
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.3);

    pointer-events: none;
}

/* login */

.login {
    position: relative;
    background-image: url(../img/bg-img.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

.login::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
}

.bg-clr {
    background-color: #ffffff;
    margin: 0 auto;
    padding: 20px 30px 10px 30px;
    border-radius: 15px;
    z-index: 123;
    width: 30rem;
    /* max-width: 28rem; */
    height: auto;
    /* max-height: 500px; */
}

.bg-clr img {
    display: flex;
    margin: 0 auto;
}

.bg-clr h2 {
    text-align: center;
}

.paswrd-show input:focus+label,
.paswrd-show input:valid+label {
    font-size: 11px !important;
    top: -5px !important;
}


.paswrd-show label {
    top: -5px !important;
    font-size: 11px !important;
}

.paswrd-show .icon-view {
    position: absolute;
    top: 14px;
    right: 5px;
}

.icon-view {
    position: absolute;
    top: 16px;
    right: 10px;
}

.icon-view-rest {
    position: absolute;
    top: 10px;
    right: 45px;
}



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

.otp-input input {
    border-left: none;
    font-size: 20px;
    border-top: none;
    border-right: none;
    border-bottom: 2px solid #f88d31;
    width: 15%;
    border-radius: 0;
    text-align: center;
    color: #f88d31;
}

.otp-bottom {
    padding-top: 11px;
    display: flex;
    align-items: center;
}

.otp-bottom span {
    padding-right: 7px;
}

.otp-bottom a {
    padding: 0;
}

.bg-clr h2 {
    color: #373435;
    font-size: 24px;
    margin-top: 1rem;
}

.bg-clr p {
    color: #ee3137;
    font-size: 12px;
    margin-top: 15px;
    font-weight: 600;
    text-align: center;
}

.login-page .form-item input {
    height: auto;
    width: 100%;
}

.login-page .sub-check .form-check-input {
    padding: 0;
}

.login-page .sub-check .form-check-label {
    /* margin-left: 7px; */
    padding-left: 5px;
    padding-top: 3px;
}

.login-bottom {
    padding: 0;
    text-align: center;
}

.login-bottom .login-btn {
    width: 100%;
    background-color: #F88D31;
    border-radius: 5px;
    margin-top: 1rem;
    color: #ffffff;
    padding: 8px;
}

.login-btn:hover {
    background-color: #ff7700;
}

.login-bottom .forgot-btn {
    /* color: #ee3137; */
}

.forgot-btn {
    color: #0047FF !important;
    font-size: 14px !important;
    padding: 0 !important;
    padding-left: 5px !important;
    font-weight: 500;
}

/* toggle-btn */

.switch {
    position: relative;
    display: inline-block;
    width: 71px;
    height: 17px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #dedede;
    border-radius: 40px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    height: 20px;
    width: 50px;
}

.slider:before {
    position: absolute;
    content: "";
    background: #fff;
    border-radius: 50%;
    left: 2px;
    bottom: 1.8px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    height: 17px;
    width: 17px;
}

input:checked+.slider {
    background: #25BB00;
}

.th-data-color th {
    color: #40434a;
    font-size: 12px;
    vertical-align: middle;
}

input:checked+.slider:before {
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    transform: translateX(30px);
}

input:focus+.slider {}

input[type=number] {
    -moz-appearance: textfield;
}

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

/* LABEL ======================================= */
.select-label {
    color: rgba(0, 0, 0, 0.26);
    background: white;
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    padding: 0 5px;
    left: 10px;
    top: 12px;
    transition: 0.2s ease all;
}

.serach-rem .bs-searchbox {
    display: none;
}

/* .serach-rem .inner{
    min-height: 64px !important;
    max-height: 150px !important;
} */

/* .serach-rem .show{
    max-height: 80px !important;
    min-height: auto !important;
} */

.rem-scrl .inner {
    /* overflow: hidden !important; */
}

.rem-disabled {
    background-color: transparent !important;
    border: none !important;

}

.rem-disabled:hover {
    border: none !important;
}

.rem-disabled [disabled] {
    pointer-events: none;
    cursor: unset;
    filter: grayscale(100%);
    opacity: 0.4;
}

/* active state */
.select-text:focus~.select-label,
.select-text:valid~.select-label {
    color: #ef3835;
    top: -5px;
    transition: 0.2s ease all;
    font-size: 12px;
    font-weight: 400;
}

/* .select-text:focus {
    border-color: #ef3835;
} */
.select-text:focus {
    border-color: #000;
}

.select-text:valid:not(focus)~.select-label {
    color: #999;
    background: #fff;
    padding: 0 10px;
    line-height: 1;
}

.select-text:valid:focus~.select-label {
    color: #ef3835;
}

.right-container-button span {
    color: white;
    position: absolute;
    left: 25px;
    top: 20px;
    line-height: 28px;
}

.right-container-button:hover {
    transition: all 400ms cubic-bezier(.62, .1, .5, 1);
    width: 250px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.right-container .right-container-button .long-text {
    transition: opacity 1000ms;
    opacity: 0;
    color: white;
    white-space: nowrap;
    font-size: 0;
    width: 0;
    margin: 0;
}

.right-container-button .long-text.show-long-text {
    transition: opacity 700ms, width 1ms linear 270ms, font-size 1ms linear 270ms;
    opacity: 1;
    margin-left: 45px;
    font-size: 20px;
    width: auto;
}

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

.sub-check .form-check-label {
    font-size: 14px;
    font-weight: 600;
    color: #848484;
}

.sub-check .form-check-input {
    border: 1px solid #aeaeae;
}

.grid-icon-top:hover {
    /* box-shadow: 0 0 11px rgba(33, 33, 33, .2); */
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.29);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.29);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.29);
}

.filter-buttons {
    display: flex;
    align-items: center;
    justify-content: end;
}

.filter-collapse {
    position: relative;
}

.filter-buttons a {
    line-height: 0;
}


.submit-filter {
    position: relative;
    display: inline-block;
    border: none;
    background-color: transparent;
    padding: 10px;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
  }
  
  .submit-filter:hover {
    transform: scale(1.1);
    background-color: rgba(37, 187, 0, 0.1);
  }
  
  .submit-filter svg {
    transition: transform 0.3s ease;
  }
  
  .submit-filter:hover svg {
    transform: rotate(360deg);
  }

  .refress-filter {
    display: inline-block;
    padding: 10px;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
  }
  
  .refress-filter:hover {
    transform: scale(1.1);
    background-color: rgba(234, 2, 2, 0.1); 
  }
  
  .refress-filter svg {
    transition: transform 0.3s ease;
  }
  
  .refress-filter:hover svg {
    transform: rotate(180deg); 
  }
/* List Table */

.sub_table tr:nth-child(1) {
    border-bottom: 1px solid #00000014;
}

.sub_table tr:nth-child(2) {
    border-bottom: transparent;
}

.td-data-color .sub_table tr .no-data-list {
    padding: 0.6rem !important;
}

.table-head-dim {
    font-size: 14px;
    font-weight: 700;
    line-height: 0;
}

.table>:not(caption)>*>* {
    padding: .5rem .9rem !important;
}

.no-data-list {
    text-align: center;
    padding: 0 !important;
}

.td-data-color tr .no-data-list {
    padding: 0 !important;
}

.td-data-color tr .padding-sr {
    padding: 0 1.2rem !important;
}

.width-quent {
    width: 125px !important;
}

.width-size {
    width: 125px !important;
}

.width-dimen {
    width: 125px !important;
}


.width-price {
    width: 150px !important;
}

.width-dis {
    width: 125px !important;
}

.text-end {
    text-align: end;
}

.list-checkbox {
    vertical-align: middle !important;
    /* display: flex !important; */
    align-items: center !important;
}

.list-checkbox .check_role {
    float: left;
    margin-top: 5px;
}

.table-heading-width {
    width: 35%;
}

.list-checkbox span {
    padding-left: 7px;
}

input#flexCheckDefault {
    border: 1px solid #343a40;
}

.list-checkbox input {
    margin: 0;
    vertical-align: middle;
    padding: 0;
    position: relative;
    height: 12px;
    width: 12px;
    border-radius: 0.25em !important;
}

.table-action span a svg {
    transition: all .5s ease-in;
}

.table-action span a:hover svg {
    transform: rotate(360deg);
}

.tablelist-img {}

.tablelist-img img {
    border: 1px solid #dfdfdf;
    border-radius: 7px;
    height: 60px;
    width: 60px;
}

.table-active-effect span {
    background-color: #198754;
    color: #ffffff;
    padding: 1px 8px;
    border-radius: 7px;
    font-size: 12px;
}

.tablelist-yes span {
    color: #198754;
}

.tablelist-no span {
    color: #ee3137;
}

.table-inactive-effect span {
    background-color: #ee3137;
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 7px;
    font-size: 12px;


}

/* pagination */

.pagination-grid {
    float: right;
    margin-top: 2rem;
}

.pagination .page-item {
    margin: 0 2px;
}

.pagination .page-item .page-link {
    /* border-radius: 50% !important; */
    background-color: #F5F7FA;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    font-size: 14px;
}

.dark-mode .page-item:not(.active) .page-link:hover {
    background-color: #ee3137;
    color: #ffffff;
    border-color: ee3137;
}

.dark-mode .page-item:not(.active) .page-link:focus,
.dark-mode .page-item:not(.active) .page-link:hover {
    background-color: #ee3137;
    color: #ffffff;
    border-color: #ee3137;
}



/* table */

.table td,
.table th {
    border-top: transparent;
    border: none !important;
}

.table tr {
    /* background-color: var(--bs-table-bg); */
    background-color: white;
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.table .table_wrap_data {
    white-space: normal !important;
    /* float: left; */
}

table .descri_title {
    vertical-align: baseline;
}

.td-data-color td {
    color: #40434a;
    font-size: 13px;
    vertical-align: middle;
    font-weight: 500;
}

tr:nth-of-type(even) {
    background-color: white;
}

/* .td-data-color th, */
.td-data-color td {
    text-transform: capitalize;
}

.text_trans {
    text-transform: uppercase !important;
}

.email_trans {
    text-transform: lowercase !important;
}

.td-data-color td input {
    height: 20px;
    font-size: 14px;
    -webkit-box-shadow: 0px 0px 19px -5px rgba(0, 0, 0, 0.13);
    -moz-box-shadow: 0px 0px 19px -5px rgba(0, 0, 0, 0.13);
    box-shadow: 0px 0px 19px -5px rgba(0, 0, 0, 0.13);
}

.td-data-color td select {
    /* height: 20px; */
    /* font-size: 14px; */
    -webkit-box-shadow: 0px 0px 19px -5px rgba(0, 0, 0, 0.13);
    -moz-box-shadow: 0px 0px 19px -5px rgba(0, 0, 0, 0.13);
    box-shadow: 0px 0px 19px -5px rgba(0, 0, 0, 0.13);
}

.height-tbl-list {
    height: 40px !important;
    font-size: 12px !important;
}

.dark-mode .table.table-head-fixed thead tr:nth-child(1) th {
    background-color: #004369;
    font-size: 13px;
    font-weight: 600;
    line-height: 2;
    color: #ffffff;
}

.table-radius {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#example2_wrapper .row .col-sm-12 {
    overflow-x: auto;
}

#example1_wrapper .row .col-sm-12 {
    overflow-x: auto;
}


.table-bordered {
    width: 100% !important;
}

.table-bordered tbody tr td img {
    width: 25%;
}

.table-bordered tbody tr td {
    position: relative;
}

.table-bordered tbody tr td .active-list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-left: -45px;
}

.table-bordered tbody tr td .active-list::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background-color: #17a2b8;
    margin-left: 0;
    left: 10%;
    top: 40%;
}

.table-bordered tbody tr td .inactive-list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-left: -30px;
}

.table-bordered tbody tr td .inactive-list::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background-color: #17a2b8;
    margin-left: 0;
    left: 10%;
    top: 40%;
}

.table-bordered tr th {
    padding-right: 80px !important;
    padding-left: 10px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    background-color: #256bb7;
    color: #fff;
}

.table thead th {
    vertical-align: middle !important;
}

.odd .dtr-control:before {
    display: none !important;
}

.even .dtr-control:before {
    display: none !important;
}



/* sidebar v2 */



.brand-link {
    width: 100%;
    text-align: center;
}

.brand-link img {
    width: 60%;
}


.elevation-4 {
    box-shadow: none !important;
}

.os-content {
    padding: 0 !important;
}

.info-v2 {
    color: #fff !important;
}

.sidebar-logo {
    border-bottom: 1px dashed #ececec;
    padding-bottom: 15px;
    margin-bottom: 10px;
}

.sidebar-dark-v2 .nav-link {
    color: #fff !important;
}

/* nav-treeview */
.nav-treeview .nav-item .nav-link {
    font-size: 14px;
    display: flex;
    align-items: center;
    margin-bottom: 0;

}

.os-content nav {
    /* padding-bottom: 5rem; */
}

.nav-treeview .nav-item .nav-link i {
    font-size: 14px !important;
}

[class*=sidebar-dark-v2] .nav-treeview>.nav-item>.nav-link:hover {
    width: 100%;
    /* transition: none; */
}

[class*=sidebar-dark-v2] .nav-treeview>.nav-item>.nav-link.active,
[class*=sidebar-dark-v2] .nav-treeview>.nav-item>.nav-link.active:focus,
[class*=sidebar-dark-v2] .nav-treeview>.nav-item>.nav-link.active:hover {
    /* background-color: rgb(145 145 145 / 24%); */
    border-radius: 0;
    width: 100%;
    /* color: #ffffff !important; */
}

[class*=sidebar-dark-v2] .nav-treeview>.nav-item>.nav-link.active.p {
    color: red;
}

.nav-treeview>.nav-item>.nav-link.active::before,
.nav-treeview>.nav-item>.nav-link.active::after {
    display: none;
}

[class*=sidebar-dark-v2] .nav-header {
    color: #fff;
}

.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*=navbar]) {
    background-color: transparent;
}

/* dashboard */

.layout-navbar-fixed .wrapper .content-wrapper {
    margin-top: 0;
}

.layout-navbar-fixed.layout-fixed .wrapper .sidebar {
    margin-top: 0;
}

/* sidebar v3 */

.layout-navbar-fixed.sidebar-mini-md.sidebar-collapse .wrapper .brand-link,
.layout-navbar-fixed.sidebar-mini-xs.sidebar-collapse .wrapper .brand-link,
.layout-navbar-fixed.sidebar-mini.sidebar-collapse .wrapper .brand-link {
    height: auto;
}

.nav-sidebar .nav-link {
    display: flex;
    align-items: center;
}

.nav-sidebar .nav-link p {
    vertical-align: middle;
    font-size: 14px;
    display: flex;
    align-items: center;
}

#large-header {
    height: -webkit-fill-available;
    width: 100%;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: -1;
}

.badge-info {
    color: #fff;
    background-color: #256BB7;
}


.sid-icon {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
}

.dark-icon {
    display: none;
}

.dark-mode .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active .dark-icon {
    display: block;
    float: left;
}

/* .dark-mode .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active .light-icon {
    display: none;

} */

.dark-mode .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link {
    padding: .6rem 1rem;
}

.dark-mode .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.dark-mode .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: transparent;
    width: 100%;
}

.dark-mode .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active::before,
.dark-mode .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 6px;
    background-color: #F88D31;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}


.dark-mode .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active p,
.dark-mode .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active p {
    background-color: transparent;
    color: #F88D31 !important;
    /* width: 100%; */
    display: flex;
    align-items: center;
    font-weight: 600 !important;
}

.nav-item {
    transition: transform 0.4s ease-in-out;
}

.nav-item:hover {
    transform: scale(1.05);
}

.side-navigation-black span {
    padding-left: 10px;
}

.nav-item.menu-is-opening {
    background-color: #f5f5f5;
}

.nav-item.menu-is-opening .nav-treeview {
    background-color: #f5f5f5;
    margin-top: 2px;
    border-top: 1px solid #dfdfdf;
}


[class*=sidebar-dark-bubble] .nav-treeview>.nav-item>.nav-link.active,
[class*=sidebar-dark-bubble] .nav-treeview>.nav-item>.nav-link.active:focus,
[class*=sidebar-dark-bubble] .nav-treeview>.nav-item>.nav-link.active:hover {
    background-color: rgb(63 71 78);
    color: #ffffff;
}

[class*=sidebar-dark-bubble] .nav-treeview>.nav-item>.nav-link:focus,
[class*=sidebar-dark-bubble] .nav-treeview>.nav-item>.nav-link:hover {
    background-color: rgba(255, 255, 255, .1);
    color: #ffffff;
}

[class*=sidebar-dark-bubble] .sidebar a {
    color: #ffffff;
}

[class*=sidebar-dark-bubble] .nav-treeview>.nav-item>.nav-link {
    color: #ffffff;
}

[class*=sidebar-dark-bubble] .nav-sidebar>.nav-item.menu-open>.nav-link,
[class*=sidebar-dark-bubble] .nav-sidebar>.nav-item:hover>.nav-link,
[class*=sidebar-dark-bubble] .nav-sidebar>.nav-item>.nav-link:focus {
    background-color: rgba(255, 255, 255, .1);
    color: #ffffff;
}

.hero.is-gradient {
    background: #007bff;
}

.hero.is-relative {
    position: relative;
}

#demo-canvas {
    position: absolute;
    bottom: 0;

}


.hero.is-slanted:before {
    content: "";
    height: 270px;
    width: 100%;
    z-index: 1 !important;
    position: absolute;
    bottom: 0;
    left: 0;
}


#main-landing-title {
    position: relative;
    top: -110px;
    color: #fff;
}

#main-landing-title h1 {
    position: relative;
    margin-bottom: 0 !important;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 90px;
}

.has-text-centered {
    text-align: center !important;
}

.light-text {
    color: #fff !important;
}

.hero.is-halfheight .hero-body,
.hero.is-fullheight .hero-body,
.hero.is-fullheight-with-navbar .hero-body {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
}

.hero-body {
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.hero-body {
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 3rem 1.5rem;
}

.dark-mode .content-wrapper {
    background-color: #F5F7FA !important;
    color: #343a40;
}

.dark-mode .navbar-dark {
    background-color: #fff;
    /* border-color: #4b545c; */
}

.dark-mode .info-box {
    background-color: transparent;
    color: #343a40;
}

.dark-mode .dropdown-menu {
    background-color: #fff;
}

.dark-mode .dropdown-menu li a {
    color: #353535;
}

.dark-mode .content-header h1 {
    color: #333;
    font-size: 22px;
    font-weight: 700;
}

.card {
    background-color: #fff;
    border-radius: 8px;
    overflow: visible;
    box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 15px rgba(0, 0, 0, .1);
}

.dark-mode .card-title {
    color: #343a40;
}

.dark-mode strong {
    color: #343a40;
}

.dark-mode .main-footer strong {
    color: #333;
    font-size: 13px;
    text-transform: capitalize;
    font-weight: 500;
}

.main-footer {
    border-top: 1px solid #dee2e6 !important;
    background-color: white !important;
    border: none;
    position: relative !important;
    padding: 12px;
}


.dark-mode .progress-group {
    color: #fff;
}

.dark-mode .description-header {
    color: #fff;
}

.dark-mode .description-text {
    color: #fff;
}

/* View Coupons */

.top-styletag {
    display: flex;
    justify-content: space-between;
    padding-top: 2rem;
}

.prefix-code span {
    border: 1px solid #17a2b8;
    padding: 7px;
    border-radius: 7px;
    color: #17a2b8;
}

.coupon-quantity span {
    border: 1px solid #b81717;
    padding: 7px;
    border-radius: 7px;
    color: #b81717;
}

.coupon-points span {
    border: 1px solid #ebb40d;
    padding: 7px;
    border-radius: 7px;
    color: #ebb40d;
}

.active-coupons span {
    border: 1px solid #0b00b5;
    padding: 7px;
    border-radius: 7px;
    color: #0b00b5;
}

.used-coupons span {
    border: 1px solid #28c30c;
    padding: 7px;
    border-radius: 7px;
    color: #28c30c;
}

.user-drop li a {
    font-size: 14px;
}

.user-drop li a:hover {
    color: #f7b029 !important;
}

/* data table-sidebar */

.navbar-badge {
    right: -7px !important;
    top: -5px !important;
}

.discount h3 {
    color: #383838;
    margin-top: 0rem;
    margin-bottom: 1rem;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

.discount h5 {
    color: #17181a;
    margin-top: 0rem;
    margin-bottom: 1rem;
    font-size: 16px;
}

.form-check-input:checked {
    background-color: #ee3137 !important;
    border-color: #ee3137 !important;
    box-shadow: none !important;
}

.q-a {
    display: flex;
}

.q-a .form-check label {
    color: #17181a;
    padding-right: 5px;
}

.side-bar-dark-theme {
    background-color: #2B303B;
}

.navbar-dark .navbar-nav .menu-icon {
    color: #ee3137 !important;
}

.navbar-dark .navbar-nav .menu-icon:focus {
    color: #ee3137 !important;
}


.menu-icon:hover {
    color: #ee3137 !important;
}

.menu-icon img {
    /* border-radius: 50%; */
}

[class*=side-bar-dark-theme] .sidebar a {
    color: #ffffff;
}

[class*=side-bar-dark-theme] .nav-treeview>.nav-item>.nav-link {
    color: #ffffff;
}

[class*=side-bar-dark-theme] .nav-pills .nav-link:not(.active):hover {
    color: #f4f6f9;
}

[class*=sidebar-dark-] .nav-sidebar>.nav-item.menu-open>.nav-link,
[class*=sidebar-dark-] .nav-sidebar>.nav-item:hover>.nav-link,
[class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link:focus {
    background-color: transparent;
    color: #ffffff;
}

.breadcrumb-style {
    align-items: center;
}

.dark-mode .breadcrumb-item+.breadcrumb-item::before,
.dark-mode .breadcrumb-item.active {
    /* color: #17181a; */
}

.breadcrumb-btn {
    display: flex;
    justify-content: space-around;
    float: right;
    margin-left: auto;
}

.breadcrumb-btn .add-breadcrumb,
.breadcrumb-btn .delete-breadcrumb {
    width: 100px;
    margin-left: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.add-breadcrumb {
    background-color: #00a4d6;
    border-radius: 4px;
    border: 1px solid transparent;

}

.delete-breadcrumb {
    background-color: #ee3137;
    border-radius: 4px;
    border: 1px solid transparent;
}

.verify_order-breadcrumb {
    background-color: #ffc107;
    border-radius: 4px;
    border: 1px solid transparent;
    margin-left: 7px;
}


.add-breadcrumb a,
.delete-breadcrumb a,
.verify_order-breadcrumb a {
    color: #ffffff;
    display: flex;
    align-items: center;
    width: 100px;
    height: 40px;
    font-size: 14px;
}

.add-breadcrumb a:hover {
    color: #00a4d6 !important;

}

.delete-breadcrumb a:hover {
    color: #ee3137 !important;
}

.verify_order-breadcrumb a:hover {
    color: #ffc107 !important;
}

.add-breadcrumb:hover {
    background-color: transparent;
    border: 1px solid #00a4d6;
}

.delete-breadcrumb:hover {
    background-color: transparent;
    border: 1px solid #ee3137;
}

.add-breadcrumb a svg {
    background-color: #2286a5;
    margin-right: 7px;
    border-radius: 4px;
    padding: 0.5rem;
    height: 30px;
    width: 30px;
    margin-left: 7px;
}

.delete-breadcrumb a svg {
    background-color: #bb1016;
    margin-right: 7px;
    border-radius: 4px;
    padding: 0.5rem;
    height: 30px;
    width: 30px;
    margin-left: 7px;
}

.breadcrumb-style ol {
    /* margin-left: 1rem; */
    font-size: 14px;
}

/* Producat Attributes */

.product-attri-dethead {
    color: #1f2d3d;
}

.product_name_title h5 {
    color: #17181a;
}

.width-adju-inp .select2-selection__rendered {
    width: 96% !important;
}

/* Product */

.attributes-add {
    border: 1px solid #00a4d6;
    border-radius: 50%;
    padding: 3px;
    display: inline-flex;
    height: 20px;
    width: 20px;
    align-items: center;
    justify-content: center;
}

.attributes-view {
    border: 1px solid #e3510b;
    border-radius: 50%;
    padding: 3px;
    display: inline-flex;
    height: 20px;
    width: 20px;
    align-items: center;
    justify-content: center;
}

.select2-container--material {
    width: 100% !important;
    /** * Textbox */
    /** * Dropdown */
    /** * Options */
    /** * Focused textbox */
    /** * Disabled textbox */
}

.select2-container--material ::placeholder {
    color: inherit;
}

.select2-container--material .select2-selection {
    /* @extend input */
    margin-top: 0 !important;
    overflow-y: auto !important;
    margin-bottom: 0 !important;
    /* height: 50px !important; */
    min-height: 50px !important;

    overflow: visible;
    font: inherit;
    touch-action: manipulation;
    margin: 0;
    line-height: inherit;
    border-radius: 0;
    box-sizing: inherit;
    /* @extend .form-control */
    display: block;
    width: 100%;
    color: #55595c;
    background-clip: padding-box;
    background-color: #ffffff;
    border: 1px solid #dadce0 !important;
    border-radius: 4px !important;
    padding: 0.5rem 0 0.6rem;
    font-size: 1rem;
    line-height: 1.5;
    background-image: none;
    border-radius: 0;
    margin-top: 0.2rem;
    margin-bottom: 1rem;
    /* @extend input[type=text] */
    border: none;
    border-radius: 0;
    outline: 0;
    width: 100%;
    font-size: 1rem;
    box-shadow: none;
    transition: all 0.3s;
}

.select2-container--material .select2-selection .select2-selection__rendered {
    padding-left: 0;
    margin-bottom: 0;
}

.select2-container--material .select2-selection--single .select2-selection__rendered {
    float: left;
}

.select2-container--material .select2-selection--single .select2-selection__arrow {
    float: right;
}

.select2-selection__arrow {
    display: none !important;
}

.select2-selection--single {
    position: relative !important;
    height: 50px !important;
    background-color: transparent !important;
    width: 100% !important;
    padding: 10px 10px 10px 10px !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    border: 1px solid #dfdfdf !important;
    background-color: var(--white) !important;
}

.dark-mode .select2-dropdown {
    background-color: #fff !important;
    border: 1px solid #dfdfdf !important;
    color: #17181a !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 10px !important;
    color: gray !important;
    text-transform: capitalize;
}

.top-space-rem .bootstrap-select .dropdown-menu li {
    border: transparent;
}
select:focus {
    outline: none;
    box-shadow: none;
    border: 1px solid #dadce0 !important; 
}
/* 
.top-space-rem .bootstrap-select ul {
    min-height: 80px !important;
    max-height: 300px !important;
} */

.top-space-rem ul.dropdown-menu.inner.show {
    top: -50px;
    position: relative;
}

.padding-data .select2-selection--multiple {
    padding-left: 15px !important;
}

.bootstrap-select>.dropdown-toggle:after {
    display: none;
}

.form-item .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #dadce0;
    border-radius: 4px;
}

.form-item .bootstrap-select.is-valid .dropdown-toggle,
.was-validated .bootstrap-select select:valid+.dropdown-toggle {
    border: transparent;
    outline: #ee3137 !important;
    padding-left: 0;
}


.form-item .bootstrap-select .dropdown-menu {
    background-color: #fff;
}

.form-item .bootstrap-select .dropdown-menu li a {
    color: #17181a;
    white-space: normal !important;

}

.form-item .bootstrap-select .dropdown-menu li a:active {
    color: #17181a !important;

}

.dark-mode .dropdown-item:focus {
    background-color: transparent !important;
}

.form-item .dropdown-item.active,
.dropdown-item:active {
    background-color: #F88D31 !important;
    color: #fff !important;
}

.form-item .bootstrap-select .btn-light {
    background-color: transparent !important;
}

.form-item .dark-mode .dropdown-item:focus,
.dark-mode .dropdown-item:hover {
    background-color: #e7e7e7;
}

.dark-mode .select2-dropdown .select2-search__field,
.dark-mode .select2-search--inline .select2-search__field {
    background-color: #fff !important;
    border-color: #6c757d;
    color: #17181a;
}

.form-item .dropdown-menu .bs-searchbox .form-control {
    background-color: transparent;
    color: #000;
}

.level_1 {
    padding-left: 2rem !important;
}

.level_2 {
    padding-left: 4rem !important;
}

/*  */
.level_3 {
    padding-left: 6rem !important;
}

.level_4 {
    padding-left: 8rem !important;
}

.level_5 {
    padding-left: 10rem !important;
}

/* .form-item .select-text .dropdown-menu {
    transform: inherit !important;
} */
.form-item .select-text .dropdown-menu {
    transform: translate(0px, 50px) !important;
    overflow-x: auto !important;
    min-height: 0 !important;
}

.join-select-pd .inner .dropdown-menu {
    transform: inherit !important;
}

.font-drp span {
    font-size: 1rem !important;
}

.width-set-serc .dropdown-menu {
    width: 50% !important;
}

.no-results {
    color: #ee3137;
    background-color: transparent !important;
    padding: 6px !important;
}

.select2-container--default .select2-results__option:hover {
    background-color: #dbdbdb !important;
    color: #17181a !important;

}

.dark-mode .select2-results__option[aria-selected=true] {
    background-color: #ee3137 !important;
    color: #fff !important;
}

/* 
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #ee3137 !important;
}

.dark-mode .select2-results__option[aria-selected=true] {
  background-color: #ee3137 !important;
  color: #fff;
} */

/* .select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
  background-color: #f5f5f5f5 !important;
  color: #17181a;
}

.select2-container--default .select2-results__option:hover{
  background-color: #f5f5f5f5 !important;
  color: #17181a;
} */

.select2-container--default .select2-results__option--highlighted {
    background-color: white !important;
    color: #17181a !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected]:hover:not() {
    background-color: #ee3137 !important;
    color: #fff !important;
}

.select2-container--material .select2-selection--multiple .select2-selection__rendered {
    width: 100%;
    padding-left: 0 !important;
    display: -webkit-inline-box !important;
    overflow-x: auto !important;
}

.select2-selection__rendered {
    margin-top: 0 !important;

}


.select2-container--material .select2-selection--multiple .select2-selection__rendered li {
    list-style: none;
    font-size: 14px !important;
}

.select2-container--material .select2-selection--multiple .select2-selection__choice {
    /* @extend .mdl-chip */
    height: 32px;
    line-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 16px;
    background-color: #dedede;
    display: inline-block;
    color: rgba(0, 0, 0, .87);
    margin: 2px 0;
    font-size: 0;
    white-space: nowrap;
    /* @extend .mdl-chip__text */
    font-size: 13px;
    vertical-align: middle;
    display: inline-block;
    float: left;
    margin-right: 8px;
    margin-left: .5rem;
    margin-bottom: 4px;
}

.select2-container--material .select2-selection--multiple .select2-selection__choice__remove {
    /* Hide default content */
    font-size: 0;
    opacity: 0.38;
    cursor: pointer;
    float: right;
    margin-top: 4px;
    margin-right: -6px;
    margin-left: 6px;
    transition: opacity;
}

.select2-container--material .select2-selection--multiple .select2-selection__choice__remove::before {
    /* font-family: "Font Awesome 5 Free"; */
    font-weight: 900;
    content: "x";
    font-weight: normal;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    padding: 0 0.75rem 0 0.2rem;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    color: #000;
}

.select2-container--material .select2-selection--multiple .select2-selection__choice__remove:hover {
    opacity: 0.54;
}

.select2-container--material .select2-search--inline .select2-search__field {
    width: 100%;
    color: #999 !important;
    margin-top: 0 !important;
    /* Match input[type=text] */
    height: 34px;
    line-height: 1;
    padding-right: 1rem !important;
}

.height_drp {
    height: 50px;
}

.after-drp::after {
    top: 22px !important;
}

.select2-container--material .select2-dropdown {
    border: 0;
}

.select2-container--material .select2-dropdown .select2-search__field {
    min-height: 2.1rem;
    margin-bottom: 16px;
    border: 0;
    border-bottom: 1px solid #ccc;
    transition: all 0.3s;
}

.select2-container--material .select2-dropdown .select2-search__field:focus {
    border-bottom: 1px solid #ffffff;
    /* box-shadow: 0 1px 0 0 #4585f4; */
}

.select2-container--material .select2-results__options {
    /* @extend .zf-shadow-depth* */
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    /* @extend .dropdown-content */
    background-color: #fff;
    margin: 0;
    min-width: 100px;
    max-height: 100px;
    overflow-y: auto;
    z-index: 999;
    will-change: width, height;
    /* @extend .dropdown-content inline styles */
}

.select2-container--material .select2-results__option {
    /* @extend .dropdown-content li */
    cursor: pointer;
    clear: both;
    color: rgba(0, 0, 0, .87);
    line-height: 1.5rem;
    text-align: left;
    text-transform: none;
    /* @extend .dropdown-content li>a, .dropdown-content li>span */
    font-size: 1.2rem;
    display: block;
    padding: 1rem;
    /** * Disabled options */
    /** * Selected option */
    /** * Active/hovered option */
    font-size: 16px;
    line-height: 0;
}

.select2-container--material .select2-results__option[aria-disabled=true] {
    /* @extend .select-dropdown li.disabled */
    color: rgba(0, 0, 0, .3);
    background-color: transparent !important;
    cursor: context-menu;
    /* @extend .disabled */
    cursor: not-allowed;
}

.select2-container--material .select2-results__option[aria-selected=true] {
    /* @extend .dropdown-content li:active, .dropdow-content li:hover */
    /* color: #4285f4; */
    background-color: #eee;

}

.select2-container--material .select2-results__option--highlighted[aria-selected] {
    background-color: #ddd;
}

.select2-container--material.select2-container--focus {
    /* @extend input[type=text]:focus */
}

.select2-container--material.select2-container--focus .select2-selection {
    /* border-bottom: 1px solid #4285f4; */
    /* box-shadow: 0 1px 0 0 #4585f4; */
}

.select2-container--material.select2-container--disabled {
    /* @extend .select-wrapper input.select-dropdown:disabled */
}

.select2-container--material.select2-container--disabled .select2-selection {
    color: rgba(0, 0, 0, .3);
    cursor: default;
    user-select: none;
    border-bottom: 1px solid rgba(0, 0, 0, .3);
}

.select2-container--material.select2-container--disabled.select2-container--focus .select2-selection {
    box-shadow: none;
}


.position-rel {
    position: relative;
}

.position-rel .link-product {
    display: none;
}

#TextBoxContainer .bg-gray-light::before {
    content: "";
    height: 20px;
    width: 110%;
    background-color: #ffffff;
    position: absolute;
    left: -13px;
    right: 0;
    top: 0;
    bottom: 0;
}

.del-icon-rem {
    background-color: #ee3137;
    margin-right: 7px;
    border-radius: 4px;
    padding: 0.5rem;
    height: 30px;
    width: 30px;
    margin-left: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-bottom: 0;
    margin-top: 2rem;
}

.del-icon-rem:hover {
    background-color: transparent;
    border: 1px solid #ee3137;
}

.del-icon-rem:hover svg {
    color: #ee3137;
}

.discount .product-data h6 {
    margin-bottom: 10px;
}

.req-star {
    color: #ee3137 !important;
}

.product-top {
    position: relative;
    margin-bottom: 2rem;
}


.product-add-btn {
    width: fit-content;
    position: absolute;
    right: 15px;
    top: -15px;
}

.product-add-btn .link-product {
    width: auto;
}

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

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

.dealer-offer-price {
    width: 32%;
}

.discount h6 {
    font-size: 14px;
    color: #17181a;
    margin-bottom: 0;
    font-weight: 700;
}

.discount h6 span {
    font-weight: 500;
    color: #666;
}

.dicount-input {
    width: 49%;
}

.product-dimensions {
    width: 19%;
}

.product-dimensions .font-reduce {
    font-size: 12px;
}

/* data table-sidebar */

.padd-th .padding-sr {
    padding: .5rem .9rem !important;
}

.navbar-badge {
    right: -5px !important;
    top: 0 !important;
}

.discount h3 {
    color: #17181a;
    margin-top: 10px;
    margin-bottom: 0rem;
    font-size: 16px;
}

.discount h5 {
    color: #17181a;
    margin-top: 0rem;
    margin-bottom: 1rem;
    font-size: 16px;
}

/* custom date-picker */

.ui-datepicker-calendar thead th {
    padding: 0.25rem 0;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 400;
    color: #78909C;
}

.ui-datepicker-calendar tbody td {
    width: 2.5rem;
    text-align: center;
    padding: 0;
}

.ui-datepicker-calendar tbody td a {
    display: block;
    border-radius: 0.25rem;
    line-height: 2rem;
    transition: 0.3s all;
    color: #546E7A;
    font-size: 0.875rem;
    text-decoration: none;
}

.ui-datepicker-calendar tbody td a:hover {
    background-color: #E0F2F1;
}

.ui-datepicker-calendar tbody td a.ui-state-active {
    background-color: #bb1016;
    color: white !important;
}

.ui-datepicker-header a.ui-corner-all {
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 2rem;
    height: 2rem;
    margin: 0.5rem;
    border-radius: 0.25rem;
    transition: 0.3s all;
}

.ui-datepicker-header a.ui-corner-all:hover {
    background-color: #ECEFF1;
}

.ui-datepicker-header a.ui-datepicker-prev {
    left: 0;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==");
    background-repeat: no-repeat;
    background-size: 0.5rem;
    background-position: 50%;
    transform: rotate(180deg);
}

.ui-datepicker-header a.ui-datepicker-next {
    right: 0;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==');
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: 50%;
}

.ui-datepicker-header a>span {
    display: none;
}

.ui-datepicker-title {
    text-align: center;
    line-height: 2rem;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    padding-bottom: 0.25rem;
    color: #000;
    padding-top: 8px;
}

.ui-datepicker-week-col {
    color: #78909C;
    font-weight: 400;
    font-size: 0.75rem;
}

div#ui-datepicker-div {
    background-color: #fff;
    z-index: 9999 !important;
    border: 2px solid #e2e2e2;
    border-radius: 10px;
}

/* Date-range picker */

.date-picker-wrapper.no-topbar {
    position: absolute !important;
    z-index: 999 !important;
    padding: 0 !important;
    background: transparent;
    border: none;
}

.date-picker-wrapper .month-wrapper {
    border: 1.8px solid #dfdfdf !important;
}

/* Order Page */

.modal .add_item_modal {
    max-width: 70%;
}

.product_atrribute_title {
    padding-top: 1rem;
    margin-bottom: 0;
}

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

.pro_attr_con div span {
    font-size: 12px;
}

.card_bottom div p {
    padding-top: 1rem;
    font-size: 14px;
    text-align: center;
    margin-bottom: 0;
}

.card_bottom div p span {
    color: #ee3137;
    padding-right: 7px;
}

.lable_pro_attri {
    display: block;
    font-size: 14px;
    font-weight: 700 !important;
    line-height: 1;
}

.card_pro {
    position: relative;
    border: 1px solid #dfdfdf;
    border-radius: 5px;
    padding: 15px;
}

.radio_btn_pro {
    position: absolute;
    top: -10px;
    left: -4px;
}

.dim_data>div {
    width: 20%;
    font-size: 14px;
}

.pro_spec_text>span {
    width: 30%;
    font-size: 14px;
    color: #ee3137;
    font-weight: 600;
}

.order-status-title-per {
    border: 1px solid #dadce0;
    margin-top: 1rem;
    padding: 0 10px;
    border-radius: 5px;
    width: 100%;
    height: 50px;
}

.order-status-title-per i {
    float: right;
    color: #000;
}

.ordr_statu_tble td {
    white-space: normal;
}

.ordr_status_his_title {
    text-align: left;
    padding-left: 0;
    position: relative;
}

.status_order_text {
    text-transform: uppercase;
    font-weight: 500;
}

.icon-rot [aria-expanded="true"] i {
    transform: rotate(90deg);
    transition: all 0.3s;
}

.icon-rot i {
    transition: all 0.3s;
    color: #a3a3a3;
}

.right_pro_spec {
    margin-left: 2.5rem;
    width: 100%;
}

.update_order-breadcrumb {
    background-color: #ee3137;
    width: 100px;
    margin-left: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
}

.update_order-breadcrumb:hover {
    background-color: transparent;
    color: #343a40;
    border: 1px solid #343a40;
}

.update_order-breadcrumb a {
    color: #fff !important;

}

.dim_data {
    width: 100%;
}

.dim_data span {
    font-size: 14px;
}

.order-edit-form tr td .select {
    margin: 10px 0;
}

.dark-mode .modal-content {
    background-color: #ffffff;
}

.modal-title {
    color: #343a40;
}


.breadcrumb-btn {
    display: flex;
    justify-content: space-around;
    float: right;
    margin-left: auto;
}

.breadcrumb-btn .add-breadcrumb,
.breadcrumb-btn .delete-breadcrumb,
.breadcrumb-btn .view-breadcrumb {
    width: 100px;
    margin-left: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

.add-breadcrumb {
    background-color: #00a4d6;
    border-radius: 4px;
    border: 1px solid transparent;

}

.delete-breadcrumb {
    background-color: #ee3137;
    border-radius: 4px;
    border: 1px solid transparent;
}

.add-breadcrumb a,
.delete-breadcrumb a {
    color: #ffffff;
    display: flex;
    align-items: center;
    width: 100px;
    height: 40px;
    font-size: 14px;
}

.add-breadcrumb a:hover {
    color: #00a4d6 !important;

}

.delete-breadcrumb a:hover {
    color: #ee3137 !important;
}

.add-breadcrumb:hover {
    background-color: transparent;
    border: 1px solid #00a4d6;
}

.delete-breadcrumb:hover {
    background-color: transparent;
    border: 1px solid #ee3137;
}

.delete-breadcrumb:hover a {
    color: #ee3137 !important;

}

.verify_order-breadcrumb:hover {
    background-color: transparent;
    color: #ffc107;
    border: 1px solid #ffc107;
}

.add-breadcrumb a svg {
    background-color: #2286a5;
    margin-right: 7px;
    border-radius: 4px;
    padding: 0.5rem;
    height: 30px;
    width: 30px;
    margin-left: 7px;
}

.delete-breadcrumb a svg {
    background-color: #bb1016;
    margin-right: 7px;
    border-radius: 4px;
    padding: 0.5rem;
    height: 30px;
    width: 30px;
    margin-left: 7px;
}

.breadcrumb-style ol {
    /* margin-left: 1rem; */
    font-size: 14px;
}


/* notification */

.drop-menu-width {
    background-color: #fff !important;
}

.drop-menu-width .dropdown-divider {
    border: 1px solid #00000017 !important;
}

.drop-menu-width .notificationHeaderList .media-body p.text-sm {
    color: #000 !important;
}

.drop-menu-width .notificationHeaderList .notifyLink,
.notificationunread i {
    color: #ee3137 !important;
    cursor: pointer !important;
}

.device-preview-title {
    text-align: center;
    font-size: 24px;
}

.mobile-data-view {
    display: flex;
    position: absolute;
    top: 17rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    left: 0rem;

}

.text-notify {
    width: 49%;
}

.text-notify h5,
.text-notify p {
    color: #343a40;
}

.text-notify p {
    font-size: 14px;
}



.mobile-data-view img {
    width: 20%;
    border-radius: 7px;
    border: 2px solid #dedfe1;
}


/* order view */

.top-part-view {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.view-order-logo {
    margin: 0 auto;
    width: 100%;
    justify-content: center;
    display: flex;
}

.view-order-logo img {
    width: 150px;
}

.viewordr-det p {
    color: #343a40;
    font-size: 14px;
}

.viewordr-det:nth-child(2) {
    text-align: end;
}

.ordr-view-pg tr th {
    text-align: center;
    color: #343a40;
    border: 1px solid #c1c1c1;
    padding: 7px;
    font-size: 14px;
}


.ordr-view-pg table tbody {
    border-radius: 7px;

}

.bold-view {
    font-weight: 700;
}

.ordr-view-pg tr td {
    color: #343a40;
    border: 1px solid #c1c1c1;
    padding: 7px;
    text-align: center;
}

.ordr-view-pg tr td span {
    font-size: 12px;
}

.distributor-det {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}

.delete-pop h2 {
    font-size: 24px;
    color: #000;
    font-weight: 700;
}

.delete-pop h3 {
    font-size: 14px;
    color: #999;
}

.error-message {
    margin-left: 0;
    color: red;
    font-size: 14px;
    padding: 5px;
    font-weight: 500;
    padding-bottom: 0;
}

/* Setting */

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

.top-dis-setting {
    display: flex;
    align-items: flex-start;
}

.smtptop {
    width: 20%;
}

.order-dis {
    font-size: 14px;
    color: #343a40;
}

/* Order Page */

.dark-mode .modal-content {
    background-color: #ffffff;
}

.modal-title {
    color: #343a40;
}

.amount-table table tbody {
    border-radius: 7px;

}

.amount-table tr td {
    color: #343a40;
    border: 1px solid #c1c1c1;
    padding: 7px;
    text-align: left;
}

.amount-table tr td .amount-lable-table {
    font-weight: 600;
    font-size: 14px;
    margin: 0;
}

.amount-table tr td span {
    font-size: 12px;
    font-weight: 600;
}

.order-edit-form .form-floating,
.order-edit-form .order-td-input {
    width: max-content;
}

.td-data-color td .order-td-input {
    height: 50px;
}

.order-edit-topbtn .btn-toporder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.button_confirm_bg {
    background-color: transparent;
    border: transparent;
    color: #fff;
}

/*.order-edit-topbtn:nth-child(1) {
    background-color: #343a40;
}*/

.update_order-breadcrumb {
    background-color: #343a40;
}

/*.order-edit-topbtn:nth-child(1):hover {
    border-color: #343a40;
    background-color: transparent;
    color: #343a40;
}*/
.update_order-breadcrumb:hover {
    border-color: #343a40;
    background-color: transparent;
    color: #343a40;
}

.update_order-breadcrumb:hover .btn-toporder {
    color: #343a40 !important;
}

/*.order-edit-topbtn:nth-child(1):hover .btn-toporder {
    color: #343a40 !important;
}*/

.check-order label {
    color: #343a40;
}

.view-breadcrumb {
    background-color: #28c30c;
    border-radius: 4px;
    border: 1px solid transparent;
    height: 42px;
}

.view-breadcrumb .btn-toporder {
    color: #ffffff;
}

.view-breadcrumb:hover {
    background-color: transparent;
    border-color: #28c30c;
}

.view-breadcrumb:hover a {
    background-color: transparent;
    color: #28c30c !important;
}

.exclusive_gst {
    color: #ffc107;
    font-size: 10px;
}

.order-edit-topbtn:nth-child(3):hover .btn-toporder {
    color: #28c30c;
}

/* form */
.cards-btn {
    /* border-bottom: 2px solid red; */
    /* padding-bottom: 10px; */
    text-align: center;
    display: flex;
    justify-content: end;
    align-items: center;
}

.cards-btn-change-password {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cards-btn .form-btn-danger {
    background-color: #F13537;
    border-color: transparent;
}

.cards-btn .form-btn-success {
    background-color: #198754;
    border-color: transparent;
}

.form {
    margin: 2rem 2rem;
    background: #fff
}

.form-item {
    position: relative;
    margin-bottom: 20px;
}

.form-item input,
input {
    border-radius: 4px;
    color: #202124;
    font-size: 14px;
    padding: 10px;
    z-index: 1;
    border: 1px solid #dadce0;
    width: 100%;
    height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

input[name="product_code"] {
    text-transform: uppercase;
}

.form-item .input-box {
    border-radius: 4px;
    color: #202124;
    font-size: 14px;
    padding: 13px 15px;
    z-index: 1;
    border: 1px solid #dadce0;
    width: 100%;
    height: 50px;
}

.form-item input:focus {
    border-color: #F13537;
}

.form-float-style label {
    position: absolute;
    cursor: text;
    z-index: 2;
    top: 14px;
    left: 10px;
    font-size: 14px;
    font-weight: 400 !important;
    background: #fff;
    padding: 0 10px;
    color: #999;
    transition: all .3s ease;
}

.form-float-style .searchable-drp {
    font-size: 11px !important;
    top: -5px !important;
}

#error-for-slug,
#error-for-metatitle,
#error-for-comment,
#error-for-keyword,
#error-for-ytlink,
#error-for-pdflink,
#error-for-boxweight,
#error-for-productinfo,
#error-for-Packingdet,
#error-for-prdsize,
#error-for-code,
#error-for-pwidth,
#error-for-depth,
#error-for-height,
#error-for-mm,
#error-for-enterqunt0,
#error-for-enterqunt10,
#error-for-prddiscount1-20,
#error-for-prddiscount10,
#error-for-enterqunt2,
#error-for-prddiscount34,
#error-for-enterqunt4,
#error-for-enter-qu-last0,
#error-for-enter-qu-last-per0,
#error-for-email-add-user,
#error-for-useraddress-1,
#error-for-useraddress-2,
#error-for-userpincode-1,
#error-for-prddiscount7 {
    display: none !important;
    visibility: hidden !important;
}

.remove-error .error-message {
    display: none !important;
    visibility: hidden !important;

}



#error-for-uercompweb,
#error-for-usergstno,
#error-for-usershopname,
#error-for-userpackeg-gst,
#error-for-user-edit-address1,
#error-for-user-edit-address2,
#error-for-email-edit-user,
#error-for-user-edit-pin,
#error-for-user-edit-com,
#error-for-user-edit-gst,
#error-for-user-edit-shop,
#error-for-banner-video-link,
#error-for-banner-sort-order,
#error-for-setting-search-add,
#error-for-setting-atitude,
#error-for-setting-longitude,
#error-for-host-smtp,
#error-for-email-smtp,
#error-for-server-smtp,
#error-for-smtp-user,
#error-for-smtp-password,
#error-for-smtp-port,
#error-for-sms-api,
#error-for-sms-api-key,
#error-for-partner-offer-qu0,
#error-for-partner-quantity-per0 {
    display: none !important;
    visibility: hidden !important;
}

#error-for-dealerr_offer_price1,
#error-for-dealer_offer_discount1,
#error-for-exclusive_dealer_offer1,
#error-for-exclusive_dealer_offer_price1,
#error-for-channel_partner_offer1,
#error-for-channel_partner_offer_price1,
#error-for-distributor_offer1,
#error-for-distributor_offer_price1 {
    display: none !important;
    visibility: hidden !important;
}

.form-float-style textarea {
    width: 100%;
    /* height: 90px; */
    border: 1px solid #dadce0;
    padding-left: 15px;
    padding-top: 15px;
    font-size: 14px;
}

.form-item input:focus+label,
.form-item input.is-valid+label,
.form-item #genpass:valid+label {
    font-size: 11px;
    top: -8px;
}

.form-item textarea:focus+label,
.form-item textarea.is-valid+label {
    font-size: 11px;
    top: -5px;
}

textarea {
    background-color: transparent;
    padding: 0.875rem 0;
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    border: 0;
    border: 1px solid #737373;
    width: 100%;
    border-radius: 4px;
    min-height: 7rem;
    resize: none;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

textarea:focus~label,
textarea.not-empty~label {
    font-size: 11px;
    top: -5px;
}

.form-item select:focus+label,
.form-item select.disabled+label {
    font-size: 11px;
    top: -5px;
}


.form-item input:focus+label {
    color: #F13537;
}

input[type=file] {
    -webkit-appearance: textfield;
    position: relative;
    -webkit-box-sizing: border-box;

}


.form-item textarea:focus+label {
    font-size: 11px;
    top: -5px;

}

.form-item textarea:focus+label {
    color: #F13537;

}

textarea[type=file] {
    -webkit-appearance: textfield;
    position: relative;
    -webkit-box-sizing: border-box;

}

.brdr-btm {
    border-bottom: 2px dashed #8080805e;
    padding-bottom: 1rem;
}

.upload-img-des {
    font-style: italic;
    font-size: 12px;
    font-weight: 500;
    padding-top: 0.5rem;
    color: #343a40;
}

.form-select:focus {
    border-color: #999 !important;
    box-shadow: none !important;
}

.form-floating .float-drp {
    background-color: transparent;
    color: #999;
    border: 1px solid #dadce0;
}

.form-floating label {
    color: #999;
    font-weight: bolder;
    font-size: 14px;
}

.editable label {
    color: #999;
    font-size: 14px;
}

.italic-form {
    font-size: 12px;
}

.main-form-checkbox {
    width: 33.33% !important;
}

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

.form-checkbox-list label {
    color: #17181a;

}

input[type=file]::-webkit-file-upload-button {
    width: 0;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    border: none;
}

x::-webkit-file-upload-button,
input[type=file]:after {
    content: 'Browse';
    display: inline-block;
    right: 1rem;
    background-color: #f5f5f5;
    border: 1px solid #b7b7b7;
    border-radius: 20px;
    margin-left: 3px;
    position: absolute;
    -webkit-appearance: button;
    padding: 5px 14px;
    top: 8px;
    font-size: 12px;
}

.upload--logo {
    position: relative;
}

.upload--logo[type=file]:after {
    content: 'Browse';
    display: inline-block;
    right: 1rem;
    background-color: #f5f5f5;
    border: 1px solid #b7b7b7;
    border-radius: 20px;
    margin-left: 3px;
    position: absolute;
    -webkit-appearance: button;
    padding: 5px 12px;
    top: 16px;
    right: 6px;
    font-size: 11px;
}


/* form complete */

.nav-item .nav-link.active::before {
    /* content: "";
    position: absolute;
    background-color: transparent;
    bottom: 100%;
    right: 0;
    height: 150%;
    width: 7px;
    border-bottom-right-radius: 25px;
    box-shadow: 0 20px 0 0 #fff; */
}

.nav-item .nav-link.active::after {
    /* content: "";
    position: absolute;
    background-color: transparent;
    top: 100%;
    right: 0;
    height: 150%;
    width: 7px;
    border-top-right-radius: 25px;
    box-shadow: 0 -20px 0 0 #fff; */
}

/* Add Category */

optgroup[label] {
    color: grey;
    font-style: inherit;
    font-weight: 600;
    text-shadow: none;
    line-height: 5;
}

/* Category View Page */

.view_page {
    color: #000;
}

.view_page .viewcon_image {
    /* width: 100%; */
    width: 170px;
    border-radius: 7px;
    border: 1px solid #d0d0d0;
    margin-right: 2rem;
}

.view_right_data {
    display: flex;
    margin-left: 2rem;
}

.view_right_data table {
    border: 1px solid #e9e9e9;
    border-radius: 7px;
    display: flex;
    overflow: hidden;
}

.view_right_data tr th {
    padding-right: 1rem;
    padding-left: 1rem;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.9;
}

.view_right_data tr td {
    padding-right: 1rem;
    padding-left: 1rem;
    font-size: 14px;
    line-height: 1.9;
}

.view_destitle {
    text-transform: uppercase;
}

.form-check-input.is-valid~.form-check-label,
.was-validated .form-check-input:valid~.form-check-label {
    color: #848484 !important;
}

.form-check-input.is-valid,
.was-validated .form-check-input:valid {
    border-color: #848484 !important;
}

.form-check-input.is-valid:focus,
.was-validated .form-check-input:valid:focus {
    box-shadow: none;
}

.description_view p {
    font-size: 14px;
    min-height: 10px;
    overflow-y: auto;
    max-height: 300px;
    height: auto;
    word-break: break-word;
}

.discount-view-tbl thead tr {
    color: #ffffff;
}

.seo_data_list tr th {
    padding-right: 1rem;
    padding-left: 1rem;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.9;
    width: 170px;
}

.seo_data_list tr td {
    padding-right: 1rem;
    padding-left: 1rem;
    font-size: 14px;
    line-height: 1.9;
}

.seo_data_list table {
    display: flex;
}

.seo_data_list tbody {
    border: 1px solid #e9e9e9;
    border-radius: 7px;
    overflow: hidden;
}

/* view user */

.view_page .viewcon-user {
    /* width: 100%; */
    /* width: 145px; */
    /* border-radius: 7px; */
    /* border: 1px solid #d0d0d0; */
    /* margin-right: 2rem; */
}

.view_user_data {
    /* display: flex; */
    /* margin-left: 2rem; */
}


.view_user_data table {
    border: 1px solid #e9e9e9;
    border-radius: 7px;
    display: flex;
    overflow: hidden;
}

.view_user_data tr th {
    padding-right: 1rem;
    padding-left: 1rem;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.9;
}

.view_user_data tr td {
    padding-right: 1rem;
    padding-left: 1rem;
    font-size: 14px;
    line-height: 1.9;
}

.view_user_data img {
    width: 90px;
}

.view_user_data h5 {
    font-size: 16px;
    font-weight: 600;
}

.gst-certificate img {
    width: 170px;
}

/* gift view */

.img_prev {
    margin-top: 1rem;
    border: 1px dashed #D4D4D4;
    border-radius: 50%;
    display: flex;
    margin: auto;
}

.view_gift_data {
    /* display: flex; */
    margin-left: 2rem;
    width: 100%;
}

.view_gift_data table tbody {
    float: left;
    width: 100%;
}

.view_gift_data table tbody tr {
    width: 100%;
    display: flex;
    align-items: center;
}

.view_gift_data table tbody tr th {
    width: 14%;
    padding-right: 1rem;
    padding-left: 1rem;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.9;
}

.view_gift_data table tbody tr td {
    padding-right: 1rem;
    padding-left: 1rem;
    font-size: 14px;
    line-height: 1.9;
}

.view_gift_data table {
    border: 1px solid #e9e9e9;
    border-radius: 7px;
    display: flex;
    overflow: hidden;
}

/* view banner */

.view_banner .discount {
    width: 50%;
}

.banner_images img {
    width: 100%;
    margin-top: 10px;
}

.banner_name {
    display: flex;
    align-items: center;
    line-height: 2.5;
}

.banner_name h3 {
    margin-bottom: 0;
    margin-top: 0;
    width: 35%;
    font-size: 14px;
}

.view_banner h3 {
    color: #17181a;
    margin-top: 10px;
    margin-bottom: .5rem;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}


.banner_name p {
    margin-bottom: 0;
    margin-top: 0;
    font-size: 14px;
}

.view_banner .right_partbanner {
    padding-top: .5rem;
}

.view_banner_data {
    /* display: flex; */
    margin-left: 0;
    width: 100%;
}

.view_banner_data table {
    border: 1px solid #e9e9e9;
    border-radius: 7px;
    display: flex;
    overflow: hidden;
}

.view_banner_data table tbody {
    float: left;
    width: 100%;
}

.view_banner_data table tbody tr {
    width: 100%;
    display: flex;
    align-items: center;
}

.view_banner_data table tbody tr th {
    width: 35%;
    padding-right: 1rem;
    padding-left: 1rem;
    font-weight: 600;
    font-size: 14px;
    line-height: 2.4;
}

.view_banner_data table tbody tr td {
    padding-right: 1rem;
    padding-left: 1rem;
    font-size: 14px;
    line-height: 1.9;
    width: 300px;
}


/* prodcut view */

.product_link_data tbody {
    width: 100%;
}

.product_link_data tbody tr {
    display: block;
}

.product_link_data tbody tr th {
    width: 270px;
}

.product_link_data tr td span {
    padding-right: 1rem;
}

.product_link_data tr td span strong {
    padding-right: 0.5rem;
}

/* chart */
.description-block h5,
.description-block span {
    color: #3a3f44 !important;
    font-size: 13px;
    font-weight: 500;
}

/* Pie Chart */

.pie-chart {
    background:
        radial-gradient(circle closest-side,
            white 0,
            white 27.72%,
            transparent 27.72%,
            transparent 84%,
            white 0),
        conic-gradient(from 180deg,
            #4e79a7 0,
            #4e79a7 38%,
            #f28e2c 0,
            #f28e2c 61%,
            #e15759 0,
            #e15759 77%,
            #76b7b2 0,
            #76b7b2 87%,
            #59a14f 0,
            #59a14f 93%,
            #edc949 0,
            #edc949 100%);
    position: relative;
    /* width: 500px; */
    min-height: 350px;
    margin: 0;
    outline: 1px solid #ccc;
}

.pie-chart h2 {
    position: absolute;
    margin: 1rem;
}

.pie-chart cite {
    position: absolute;
    bottom: 0;
    font-size: 80%;
    padding: 1rem;
    color: gray;
}

.pie-chart figcaption {
    position: absolute;
    bottom: 1em;
    right: 1em;
    font-size: smaller;
    text-align: right;
    color: #ee3137;
}

.pie-chart span:after {
    display: inline-block;
    content: "";
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.4em;
    height: 0.8em;
    border-radius: 0.2em;
    background: currentColor;
}


/* alert for login - forgot - all pages */
.alert {
    background-color: rgba(241, 184, 184, 0.3) !important;
    padding: 5px 0 !important;
    margin: 8px 0 0 0 !important;
    font-weight: bold;
    color: red !important;
}

.alert-success-new {
    background-color: rgb(181 255 129 / 30%) !important;
    padding: 5px 0 !important;
    margin: 8px 0 0 0 !important;
    font-weight: bold;
    color: green !important;
    border: 1px solid #00800036 !important;
    border-radius: 5px !important;
}

.alert-cont {
    position: fixed;
    right: 2%;
    top: 8%;
    z-index: 9999;

}

.alert-first,
.alert-sec {
    display: none;
}

.alert-first .fas,
.alert-sec .fas {
    margin-right: 0.5em;
}

.alert-first .close,
.alert-sec .close {
    color: #fff !important;
    opacity: .9 !important;
    top: 4px !important;
}


/* popover */



.popover_img {
    width: 100px;
    height: 100px;
    padding: 0;
}



/* style for auto complete */
.ui-autocomplete {
    width: 96% !important;
    position: absolute;
    z-index: 99999 !important;
    cursor: default;
    padding: 0;
    margin-top: 2px;
    list-style: none;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    height: 200px;
    overflow-y: auto;
}

.ui-autocomplete>li {
    padding: 5px 20px;
    border-bottom: 1px solid #ddd;
}

.ui-autocomplete>li.ui-state-focus {
    background-color: #DDD;
}

.ui-helper-hidden-accessible {
    display: none;
}

/* width */
.ui-autocomplete::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.ui-autocomplete::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.ui-autocomplete::-webkit-scrollbar-thumb {
    background: #888;
}

.ui-state-active {
    color: #007bff !important;
}

.ui-menu-item-wrapper {
    color: #212529;
}






/* Reddem History */

.bg-color-list {
    background-color: #dfdfdf42;
    padding: 14px 16px !important;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, .125);
}

.top-part-redeem {
    padding-bottom: 1rem;
}


.top-part-redeem span {
    color: #ee3137;
    font-size: 14px;
    font-weight: 500;
}



/* ///////////////////////////// */



@media (max-width: 2400px) {
    .right_pro_spec {
        margin-left: 3.5rem;
    }
}

@media (max-width: 1600px) {
    .right_pro_spec {
        margin-left: 2.7rem;
    }
}

@media (min-width: 992px) {

    .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused,
    .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover {
        width: 235px;
        overflow: hidden;
    }
}

.main-footer {
    z-index: 0 !important;
}

.header_nav_icon .dropdown-menu {
    left: -21rem !important;
    min-width: 23rem !important;
}

.notificationHeaderList {
    min-height: auto;
    max-height: 350px;
    overflow-y: auto;
}


.dropdown-item-notify {
    padding: 1rem;
}

.header_nav_icon .dropdown-toggle {
    background-color: transparent;
    border-color: transparent;
    padding-right: 0 !important;
}

.header_nav_icon .dropdown-toggle:hover {
    background-color: transparent !important;
    border-color: transparent !important;
}


.header_nav_icon .dropdown-toggle:focus {
    background-color: transparent !important;
    border-color: transparent !important;
}

.header_nav_icon .dropdown-toggle::after {
    content: none !important;
}

/* this code i will be change for only text-color */
/* .header_nav_icon .dropdown-menu .dropdown-item:hover {
    color: #f7b029 !important;
} */
.dropdown-menu .dropdown-item:hover {
    color: #F88D31 !important;
    background-color: #f5f5f5 !important;
}

.notify-btn {
    display: flex;
    justify-content: end;
    width: 100%;
    margin-top: 25px;
}

.notify-btn .view-btn {
    margin-right: 0.5rem;
    font-weight: 400;
    font-size: 1rem;
}

.notify-btn .delete-btn {
    margin-right: 1.8rem;
    font-weight: 400;
    font-size: 1rem;
}

.timeline {
    position: static !important;
    margin-bottom: 30px !important;
}

.timeline {
    margin: 0 0 45px !important;
    padding: 0 !important;
}

.timeline::before {
    background-color: #256bb775 !important;
}


.select-notify {
    position: absolute !important;
    left: 3.7rem !important;
    top: -2.8rem !important;
    color: #515152cf !important;
    font-weight: 400 !important;
}

.readmore-btn {
    margin-bottom: 20px !important;
}

.check-notify,
.device-preview-title,
.dt-control,
.icon-notify,
.nu-list,
.readmore-btn {
    text-align: center !important;
}

.timeline .timeline-item {
    box-shadow: 0 0 10px rgb(0 0 0 / 15%), 0 0 2px rgb(0 0 0 / 2%) !important;
    background-color: #fff !important;
}

.timeline-header {
    border: none !important;
    display: flex;
    align-items: center;
}

.timeline-item .timeline-header {
    color: #343a40 !important;
    border-color: transparent !important;
}

.timeline-header a {
    color: #0d6efd !important;
    margin: 0 0.5rem;
}

.timeline-header a:hover {
    color: #ee3137 !important;
}

.btn-icon-notify {
    padding: 0.2rem 0.5rem;
    font-size: .75rem;
}

.timeline::before {
    background-color: #256bb775 !important;
}

input[type=checkbox],
input[type=radio] {
    box-sizing: border-box !important;
    padding: 0 !important;
}


.check-notify {
    border-radius: 50% !important;
    font-size: 16px !important;
    height: 20px !important;
    left: 43px !important;
    line-height: 30px !important;
    position: absolute !important;
    top: 2.2rem !important;
    width: 20px !important;
}

.all-check-notify {
    top: -2.7rem !important;
    margin-top: 0 !important;
}




.check-notify,
.device-preview-title,
.dt-control,
.icon-notify,
.nu-list,
.readmore-btn {
    text-align: center !important;
}

.icon-notify {
    width: 45px;
    line-height: 30px;
    border-radius: 50%;
    margin-right: 5px;
    border: 1px solid #aeb0b1;
}

.timeline-header .time {
    margin-left: auto;
    font-size: 14px;
}

.update_btn:hover {
    color: #000 !important;
}

/* welcome moadal */
.welcome-text-new {
    width: 100%;
    padding-bottom: 10px;
    /* text-align: center; */
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 3px solid red;
    display: flex;
    /* font-weight: bold; */
    align-items: center;
}

.welcome-text-new-add {
    width: 100%;
    padding-bottom: 5px;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 2px solid #e4e4e4;
    display: flex;
    align-items: center;
}

.welcome-text-new h3 {
    /* margin-bottom: 20px; */
    /* font-weight: 700; */
    font-size: 20px;
}

.main-welcome {
    color: black;
}

.welcome-col-register {
    width: 100%;
    text-align: center;
}

.welcome-col-register button {
    border: none;
    outline: none;
    background-color: #ff0007;
    color: white;
    border-radius: 11px;
    font-weight: bold;
    width: 50%;
    text-align: center;
    padding: 10px 20px;
}

.radio-text {
    display: flex !important;
    align-items: baseline;
}

.radio-text input {
    border-radius: 4px;
    font-size: 14px;
    padding: 13px;
    z-index: 1;
    border: 1px solid #dadce0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 12px;
    height: 12px;
    margin-left: 20px;
}

.radio-text label {
    margin: 0px 5px;
}

.welcome-col-threee-btn {
    width: 100%;
    text-align: center;
}

.welcome-col-threee-btn button {
    border: none;
    outline: none;
    background-color: #ff0007;
    color: white;
    padding: 10px 22px;
    border-radius: 11px;
    font-weight: bold;
    margin: 0 4px;
}

.welcome-col-submit {
    width: 100%;
    text-align: center;
    /* border-bottom: 3px solid red; */
    padding-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* .welcome-col-submit button {
    border: none;
    outline: none;
    background-color: green;
    color: white;
    padding: 10px 22px;
    border-radius: 11px;
    font-weight: bold;
    font-size: 14px;
} */

.select-trainer-all-name {
    /* width: 50%; */
    margin-left: 15px;
}

/* .welcome-col-three-text{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
}
.text-box-one{
    width: 30%;
}
.text-box-two{
    width: 30%;
}
.text-box-three{
    text-align: center;
    width: 30%;
}
.text-box-three button{
    text-align: center;
    border: none;
    outline: none;
    background-color: #ff0007;
    color: white;
    padding: 12px 22px;
    border-radius: 11px;
    font-weight: bold;
    width: 100%;
} */
.user-pass-sent {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.username-new,
.password-new {
    width: 100%;
}

/* .sent-new{
    width: 30%;
}
.sent-new button{
    text-align: center;
    border: none;
    outline: none;
    background-color: #ff0007;
    color: white;
    padding: 12px 22px;
    border-radius: 11px;
    font-weight: bold;
    width: 100%;
} */

.onbording-tranee {
    border: 1px solid black;
    outline: none;
    border-radius: 4px;
}

/* assign-to-other */
.assign-to-other {
    color: red !important;
}

/* new changes in all 22/1/24 */
.slash-divison {
    margin: 0 2px;
    color: black;
}

.two-division {
    width: 100%;
    border-radius: 8px;
    border: 1px dashed red;
    background-color: #f1f1f1;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.left-divison {
    width: 70%;
    margin-left: 5px;
}

.down-space {
    margin: 5px 0;
}

.breakdown {
    width: 70%;
    margin-bottom: 22px !important;
    margin-top: 5px !important;
}

.right-divison {
    width: 25%;
}

.right-divison input {
    border-radius: 4px;
    font-size: 14px;
    padding: 13px;
    z-index: 1;
    border: 1px solid #dadce0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 12px;
    height: 12px;
    margin-left: 20px;
}

.right-divison label {
    font-size: 14px !important;
    font-size: bold !important;
    margin-bottom: 2px !important;
}

.all-info {
    width: 100%;
    padding: 10px;
    background-color: #f7f7f7;
    border-radius: 4px;
    border: 1px dashed #F88D31;
    margin-bottom: 20px;
}

.five-answer .form-item {
    margin-bottom: 0 !important;
}

.five-answer .form-group {
    margin-bottom: 0 !important;
}

.first-con-left {
    font-size: 14px;
}

.first-con-right {
    text-align: right;
}


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

.all-info-one .form-item {
    margin-bottom: 0;
}


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


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

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

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

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

.first-left-side {
    width: 74%;
}

.two-radio-btnbtn input {
    border-radius: 4px;
    font-size: 14px;
    padding: 13px;
    z-index: 1;
    border: 1px solid #dadce0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 12px;
    height: 12px;
    margin-left: 10px;
}

.two-radio-btnbtn label {
    margin-bottom: 0 !important;
}

.welcome-text-here {
    color: gray;
    /* font-weight: normal !important; */
    font-size: 16px;
}

.btn-prejoin {
    border: none;
    outline: none;
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid gray !important;
}

.two-tabs {
    border-radius: 4px;
    /* padding: 8px; */
    background-color: whitesmoke;
    border: 1px solid #ccc;
    display: flex;
}

.two-tabs button {
    color: black;
    border-radius: 4px;
    background-color: #ccc;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 16px;
    /* margin: 0 2px; */
}

.onlyblack {
    color: black;
}

.tab-content {
    display: none;
}

.active-tab {
    display: block;
}

/* all tranee and my tranee */
.tranee-alltranee-box {
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    background-color: #fff;
}

.tranee-alltranee-box tr {
    color: white;
    background-color: white;
}

.tab-twoo {
    overflow: hidden;
    /* border: 1px solid #ccc; */
    background-color: #f1f1f1;
}

.tab-twoo button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

.tab-twoo button:hover {
    background-color: #ddd;
}

.tab-twoo button.active {
    background-color: #ccc;
}

.tabcontent-new {
    display: none;
    padding: 20px 0 0 0;
    border: 1px solid #ccc;
    border-top: none;
    color: black;
}

.any-yes {
    color: blue;

}

.any-no {
    color: red;
}

/* leavs-info */
.leaves-info .form-item {
    padding: 0px !important;
}

.leaves-reason .form-item {
    padding: 0px !important;
    margin-bottom: 0 !important;
}

.leaves-reason {
    width: 100%;
}

.all-leaves-info {
    width: 100%;
    padding: 10px 20px;
    box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
}

.leaves-reason textarea {
    width: 100%;
    height: 100px;
    border: 1px solid #dadce0;
    padding-left: 15px;
    padding-top: 15px;
    font-size: 14px;
    background-color: transparent;
    padding: 0.875rem 0;
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    border-radius: 4px;
    min-height: 3rem;
    resize: none;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    background-color: white;
}

.leave-apply button {
    /* width: 100% !important;
    background-color: green !important;
    padding: 10px 16px !important;
    border: none !important;
    outline: none !important;
    color: white !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    transition: 0.5s !important; */
}

.leave-apply button:hover {
    /* background-color: white !important;
    border: 1px solid green !important;
    color: green !important; */
}

.leave-cancel button {
    width: 100%;
    background-color: #ff0007;
    padding: 10px 16px;
    border: none;
    outline: none;
    color: white;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    transition: 0.5s;

}

.leave-cancel button:hover {
    border: 1px solid #ff0007;
    background-color: white;
    color: #ff0007;
}

.leaves-info-new label {
    position: absolute;
    cursor: text;
    z-index: 2;
    top: 15px;
    left: 10px;
    font-size: 14px;
    font-weight: 400 !important;
    background: #fff;
    padding: 0 10px;
    color: #999;
    transition: all .3s ease;
}

.all-leaves-list {
    margin-top: 20px;
    width: 100%;
}

/* leaves-table */
.all-leaves-list table th {
    color: white;
}

.response-text {
    font-weight: bold;
}

.leaves-all-btn span {
    cursor: pointer;
}

.leave-edit {
    color: green;
    cursor: pointer;
}

.leave-edit-disable {
    color: gray !important;
}

.leave-cancel {
    color: red;
    cursor: pointer;
}

.leaves-all-btn button {
    border: none;
    outline: none;
    background-color: transparent;
    font-size: 18px;
    width: 30px;
}

/* new focus */
.leaves-info-new .form__group {
    position: relative;
    margin-bottom: 30px;
}

.leaves-info-new .form__input {
    position: relative;
    display: block;
    width: 100%;
    padding: 10px;
    border: 1px solid #dadce0;
    border-radius: 4px;
    outline: none;
    /* box-shadow:0 16px 16px -5px rgba(0,0,0,.1); */
    background: transparent;
}

.leaves-info-new .form__input:focus {
    border: 1px solid #5294F7;
}

.leaves-info-new .form__label {
    position: absolute;
    top: 12px;
    left: 8px;
    transition: all 300ms ease-in-out;
    pointer-events: none;
}

.leaves-info-new .form__input:focus~label,
.leaves-info-new .form__input:not(:placeholder-shown)~label {
    color: #999;
    top: -10px;
    left: 5px;
    font-size: 12px;
    z-index: 1;
}

.leaves-info-new .form__input::-webkit-input-placeholder {
    color: transparent;
}

.leaves-info-new .form__input::-moz-placeholder {
    color: transparent;
}

.leaves-date {
    margin-top: 10px;
}

.days-count {
    font-weight: bold;
    color: red;
}

/* css for admin leave list */
.admin-leavd-btn {
    border: none;
    outline: none;
    background-color: transparent;
}

.pending-leavee {
    color: #F88D31 !important;
}

.approved-leave {
    color: #25BB00;
}

.rejected-leave {
    color: #EA0202;
}

.reason-long {
    cursor: pointer;
}

/* css for leave modal */
.admin-leave-header {
    /* border-bottom: 2px solid #ff0007 !important; */
}

.admin-leave-footer {
    /* border-top: 2px solid #ff0007 !important; */
}

.admin-leave-header h5 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    font-size: 20px !important;
}

.trainee-leave {
    font-weight: bold;
}

.leave-modal-body textarea {
    width: 100%;
    min-height: 80px !important;
}

.leave-modal-body {
    color: black;
}

.leave-modal-body p {
    text-align: justify;
    /* text-indent: 40px !important; */
    word-spacing: 3px;
    line-height: 30px;
}

.leave-modal-body span {
    font-weight: 600;
}

.assign-header-new {
    font-size: 14px !important;
}

.leave-infooo p {
    margin-bottom: 0;
}

.both-admin-btn {
    width: 100%;
    text-align: center;
}

.both-admin-btn button {
    margin: 0 5px;
}

.admin-leave-apply {
    background-color: green;
    padding: 10px 32px;
    border: none;
    outline: none;
    color: white;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    transition: 0.5s;
    border: 1px solid transparent;
}

.admin-leave-apply:hover {
    background-color: white;
    border: 1px solid green;
    color: green;
}

.admin-leave-cancel {
    background-color: #ff0007;
    padding: 10px 32px;
    border: none;
    outline: none;
    color: white;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    transition: 0.5s;
    border: 1px solid transparent;
}

.admin-leave-cancel:hover {
    background-color: white;
    border: 1px solid #ff0007;
    color: #ff0007;
}

.admin-tranee-name {
    color: black !important;
}

.admin-leavd-btn {
    cursor: not-allowed !important;
    color: #939393;
    padding: 0;
}

.admin-leavd-btn.rejected-leave.pending-leavee {
    cursor: pointer !important;
}

/* tranee-attendance */
.tranee-attendance {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .125);
    padding: 20px 10px;
    background-color: #f1f1f1;
    box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
    border-radius: 14px;
}

.first-line-add,
.second-line-add {
    display: flex;
    justify-content: space-around;
    padding: 10px 5px;
}

.att-same {
    display: flex;
    width: 100%;
}

.absent-date-symbol {
    width: 25px;
    height: 25px;
    background-color: red;
    border-radius: 50%;
}

.current-date-symbol {
    width: 25px;
    height: 25px;
    background-color: green;
    border-radius: 50%;
}

.sat-sun-date-symbol {
    width: 25px;
    height: 25px;
    background-color: blue;
    border-radius: 50%;
}

.appoved-date-symbol {
    width: 25px;
    height: 25px;
    background-color: purple;
    border-radius: 50%;
}

.current-date {
    font-weight: bold;
    padding-left: 10px;
}

.absent-date {
    font-weight: bold;
    padding-left: 10px;
}

.sat-sun-date {
    font-weight: bold;
    padding-left: 10px;
}

.appoved-date {
    font-weight: bold;
    padding-left: 10px;
}

.display-month {
    width: 100%;
}

.display-month h5 {
    text-align: center;
    /* font-weight: bold; */
}

.count-days-all {
    width: 100%;
    padding-top: 10px;
}

.month-display {
    text-align: center;
    padding: 10px 0;
}

.all-days-list h6 {
    display: flex;
}

.all-days-list {
    display: flex;
    justify-content: space-around;
}

.all-days-list p {
    margin-bottom: 5px !important;
    font-weight: bold;
    /* color: brown; */
}

.all-days-list p a {
    width: 25px !important;
}

.working-count {
    width: 50% !important;
}

.tranee-attendance-info {
    margin-top: 20px;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .125);
    padding: 20px 10px;
    background-color: #f1f1f1;
    box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
    border-radius: 14px;
}

.tranee-pre h3 {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 10px;
}

.tranee-ff {
    display: flex;
}

.tranee-ff p {
    padding-right: 10px;
}

.tranee-ff-days {
    width: 120px !important;
    color: #256BB7 !important;
    font-weight: bold;
}

.tranee-all-info p {
    color: rgb(56, 56, 56);
    font-size: 16px;
    /* font-weight: bold; */

}

.tranee-pre-second h3 {
    padding-top: 20px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 10px;
}

.tranee-all-info-second p {
    color: rgb(56, 56, 56);
    font-size: 16px;
    /* font-weight: bold; */
}

.tranee-ff-days {
    font-weight: bold;
}

/* calander */


/* #calendar {
    max-width: 600px;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: auto;
    white-space: nowrap;

}

#calendar header {
    background-color: #4a4a4a;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 18px;
    overflow-x: auto;
}

#calendar table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}

#calendar th,
#calendar td {
    padding: 3px;
    border: 1px solid #ddd;
}

#calendar td {
    cursor: pointer;
}

#calendar .prev,
#calendar .next {
    background-color: gray;
    color: white;
    padding: 10px;
    cursor: pointer;
    border-radius: 10px;
}

#calendar .prev:hover,
#calendar .next:hover {
    background-color: black;
    color: white;
}

#calendar .today {
    background-color: green;
    color: #fff;
}

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

.weekend {
    color: blue;
}

header {
    overflow-x: auto;
    width: 100%;
}

@media only screen and (max-width: 1200px) {
    #calendar header {
        font-size: 16px;
    }

    #calendar th,
    #calendar td {
        padding: 3px;
    }

    #calendar .prev,
    #calendar .next {
        padding: 5px;
    }
} */

/* new css for new chnages */
.day-countt {
    color: #0d6efd;
    font-weight: bold;
}

.notifiaction-off {
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
}

.all-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-new {
    width: 15px;
    height: 15px;
    /* background-color: red; */
    border-radius: 50%;
}

.current-date {
    background-color: green;
}

.absent-date {
    background-color: red;
}

.sat-sun-date {
    background-color: blue;
}

.appoved-date {
    background-color: purple;
}

.box-info {
    padding-left: 10px;
}

.box-info h6 {
    margin-bottom: 0;
}


/* for traniner list of attendance */
.pre-abs-leave-btn button {
    border: none;
    outline: none;
    padding: 5px;
    margin: 0 2px;
    background-color: transparent;
}

.select-datee {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0 !important;
}

.select-datee label {
    margin-bottom: 0 !important;
    color: #000;
}

.attendance-first {
    background-color: rgb(255, 228, 255) !important;

}

.att-yes {
    color: green;
    font-size: 18px;
}

.att-no {
    color: red;
    font-size: 18px;
}

.att-leave {
    color: #007bff;
    font-size: 18px;
}

.disbale-tr {
    background-color: #e7e7e7 !important;
}

.disbale-tr td {
    color: gray !important;
}

.dis-yes {
    color: grey;
}

.dis-no {
    color: gray;
}

/* css for leave reason */
.why-reason {
    display: block;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.hidden-option {
    display: none;
}

.why-reason select {
    border: 2px solid green;
    border-radius: 5px;
    text-align: center;
}

.reason-details p {
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.reason-details span {
    /* margin-bottom: 0; */
    font-weight: normal;
}

.reason-details {
    /* border: 1px solid #ddd; */
    padding: 4px;
    border-radius: 5px;
    background-color: white;
}

/* .reason-details p span::after,
.reason-details p span::before {
    content: '"';
    font-size: 30px;
    padding: 0 5px;
} */
.reason-details p span::before {
    content: '';
    display: inline-block;
    width: 20px;
    /* Adjust width as needed */
    height: 20px;
    /* Adjust height as needed */
    background-image: url('../../dist/img/invert-after.svg');
    /* URL to your first SVG file */
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 5px;
    vertical-align: middle;
}

.reason-details p span::after {
    content: '';
    display: inline-block;
    width: 20px;
    /* Adjust width as needed */
    height: 20px;
    /* Adjust height as needed */
    background-image: url('../../dist/img/invert-before.svg');
    /* URL to your second SVG file */
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 5px;
    vertical-align: middle;
}


.reason-details p {
    text-indent: 5px !important;
}

.comma {
    font-size: 20px !important;
    font-weight: bold !important;
}

.att-body {
    color: black;
}

.att-body p {
    margin-bottom: 0;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
}

.att-footer-btn-yes {
    background-color: green;
    border: none;
    outline: none;
    color: white;
    padding: 5px 12px;
    border-radius: 5px;
}

.att-footer-btn-no {
    background-color: #ff0007;
    border: none;
    outline: none;
    color: white;
    padding: 5px 12px;
    border-radius: 5px;
}


/* code for tab */
.custom-box {
    /* margin-top: 10px; */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    /* border-radius: 8px; */
    /* padding: 10px 0; */
    background-color: transparent;

}

.tab {
    overflow: hidden;
    border: 1px solid #e6e6e6;
    background-color: white;
    border-radius: 5px;
    padding: 8px 6px;
}

.my-leave-add-leave {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Style the buttons inside the tab */
.tab button {
    /* background-color: inherit; */
    /* float: left;
    border: none;
    outline: none;
    cursor: pointer; */
    /* padding: 14px 16px; */
    transition: 0.3s;
    /* font-size: 17px; */
}

/* Change background color of buttons on hover */
.tab button:hover {
    /* background-color: #ddd; */
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: transparent;
    padding-top: 5px;
}

.tab button.add-leave-details {
    float: right;
    background-color: #25BB00;
    color: white;

}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    background-color: white;
    border-radius: 8px;
    margin-top: 25px;
}

.left-right-record {
    display: flex;
}

.left-record-main {
    width: 40%;
}


.right-record-main {
    width: 50%;
    display: none;
}



.show-leave.active {
    background-color: #F1f1f1;
    color: #F88D31;
    border: 1px dashed #F88D31;
}


.leaves-infoo {
    width: 100%;
    padding: 15px;
    border: 1px solid #CECECE;
    border-radius: 4px;
    background-color: #f1f1f1;
}

.onlylight-reason {
    font-weight: normal !important;
}

.leave-seen-left p,
.leave-seen-right p {
    margin-bottom: 0;
}

.leave-seen-right p {
    font-weight: bold;
}

.from-to-date p {
    font-weight: normal !important;
}

.from-to-date p span {
    font-weight: bold !important;
}


.leave-record {
    display: flex;
}

.right-record {
    padding-left: 15px;
}

.right-record p {
    margin-bottom: 0;
}

.leave-reason {
    font-weight: bold;
}

.leave-confirm {
    font-weight: bold;
    color: green;
}

.leave-rejected {
    font-weight: bold;
    color: #ff0007;
}

.leave-pending {
    font-weight: bold;
    color: palevioletred;
}

.left-record button p {
    margin-bottom: 0;
}

.left-record button {
    padding: 10px;
    outline: none;
    border: 1px dashed #CECECE;
    border-radius: 8px;
    background-color: #f3f3f3;
    width: 80px;

    /* font-size: 20px; */
}

.day-highlight {
    font-weight: bold;
    font-size: 20px;
}

.leave-header {
    padding: 15px 0;
    font-weight: 600;
}

.leave-list-data {
    display: flex;
    /* justify-content: space-around; */
}

.left-list {
    width: 50%;
}

.right-list {
    width: 50%;
}

/* conatnet for holiday-list */
.holiday-list {
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 2px 0;
}

.list-year input[type=number] {
    width: 65px;
    height: 35px;
    padding-left: 5px;
    padding-right: 5px;
    font-weight: bold;
}

.error-msg-year {
    color: red;
    padding-left: 10px;
}

.holiday-note {
    padding: 10px 0 15px 0;
    border-bottom: 2px solid #adadad;
    margin-bottom: 10px;
}

.holiday-note-first {
    font-weight: bold;
    color: #ff0007;
}

.holiday-name {
    font-weight: 600;
    margin-bottom: 0;
    font-size: 18px;
}

.holiday_description {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 500;

}

.posted-division {
    padding: 5px 0;
    border-top: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    justify-content: start;
    align-items: center;
}

.posted_name_time {
    font-size: 14px;
    color: #000;
    font-weight: normal;
}

.holiday-description {
    margin-bottom: 0;
}

.holiday-date p {
    margin-bottom: 0;
}

/* admin add holiday  */

/* add pop-up and edit pop-up modal for add holiday */
.add-edit-header {
    /* background-color: darkgrey; */
    border-bottom: 2px solid red !important;
}

.add-edit-footer {
    border-top: 2px solid red !important;

}

.add-edit-footer button {
    padding: 12px;
    border: none;
    outline: none;
    border-radius: 4px;
}

.btn-admin-add {
    background-color: green;
    color: white;
}

.btn-admin-delete {
    background-color: #f5f5f5;
    color: black;
}


.form__group_add {
    position: relative;
    margin-bottom: 20px;
}

.form__group_add input,
.form__group_add textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.form__group_add label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    transition: all 0.3s ease-out;
    pointer-events: none;
}

input:focus+.admin-label,
textarea:focus+.admin-label,
input:not(:placeholder-shown)+.admin-label,
textarea:not(:placeholder-shown)+.admin-label {
    top: -15px;
    left: 5px;
    background-color: white;
    padding: 5px;
    font-size: 12px;
}

.text-input input,
.number-input input {
    /* Add specific styling for text and number inputs if needed */
}

.textarea-input textarea {
    /* Add specific styling for textarea if needed */
    /* height: 60px !important; */

}

.holiday-popup input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

.float-checkbox {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    margin-top: 10px;
}

.float-checkbox label {
    margin-bottom: 0;
    font-weight: bold;
    font-size: 14px !important;
}












.admin-add-holiday {
    width: 100%;
    display: flex;
    justify-content: space-between;
    /* border: 2px solid black; */
    padding: 5px;
    background-color: #e9e9e9;
}

.left-admin-year {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.left-admin-year p {
    margin-bottom: 0;
}

.right-admin-year button {
    border: none;
    outline: none;
    background-color: green;
    color: white;
    font-size: 17px;
    padding: 12px 16px;
    border-radius: 4px;
}

.right-admin-year button:hover {
    background-color: yellowgreen;
}

.delete-holiday-all {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px 5px 10px;
}

.delet-holiday button {
    border: none;
    outline: none;
    background-color: #ef4545;
    color: white;
    font-size: 16px;
    padding: 12px 16px;
    border-radius: 4px;
}

.delet-holiday button:hover {
    background-color: #ff0007;
}

.total-holiday-count {
    display: flex;

}

.total-holiday-count p {
    margin-bottom: 0;
}

.add-holiday-tabel {
    width: 100%;
    /* border: 1px solid #f1f1f1; */
    border-top: none;
}

.add-holiday-tabel .card {
    border-radius: 0;
}

.holiday-edit {
    font-size: 16px;
    color: green;
}

.holiday-delete {
    font-size: 16px;
    color: #ff0007;
}

.custom-toast {
    position: fixed;
    top: 25px;
    right: 30px;
    border-radius: 6px;
    background: #fff;
    padding: 10px 6px 20px 0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    border-left: 8px solid #25BB00;
    overflow: hidden;
    transform: translateX(calc(100% + 30px));
    z-index: 9999;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.25, 1.35);
    max-width: 50%;
}

.error-redirect {
    border-color: #ff0007;
}

.error-redirect .progress::before {
    background-color: #ff0007 !important;
}

.custom-toast .progress {
    height: 5px;
}

.custom-toast.active {
    transform: translateX(0);
}

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

.toast-check {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35px;
    width: 35px;
    background-color: #40f467;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
}

.message {
    display: flex;
    flex-direction: column;
    margin: 0 20px;
}

.message-text {
    font-size: 20px;
    font-weight: 600;
}

.text-1 {
    color: #333;
}

.text-2 {
    color: #666;
    font-weight: 400;
    font-size: 16px;
}

.toast-close {
    position: absolute;
    top: 10px;
    right: 15px;
    padding: 5px;
    cursor: pointer;
    opacity: 0.7;
}

.toast-close:hover {
    opacity: 1;
}

.progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: #ddd;
}

.progress::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: #25BB00;
}

.progress.active::before {
    animation: progress 5s linear forwards;
}

@keyframes progress {
    100% {
        right: 100%;
    }
}

.toast-btn {
    padding: 10px 40px;
    font-size: 20px;
    outline: none;
    border: none;
    background-color: #40f467;
    color: #fff;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
}

.toast-btn:hover {
    background-color: #0fbd35;
}

/* pre-joing css pop-up changes */
.two-radio-btnbtn input[type="radio"] {
    opacity: 0;
    visibility: hidden;
    appearance: none;
    height: 0;
    width: 0;
}

.two-radio-btnbtn input[type="radio"]+label {
    cursor: pointer;
    position: relative;
    padding-left: 30px;
    line-height: 20px;
    margin-right: 6px;
}

.two-radio-btnbtn input[type="radio"]+label::before {
    content: "";
    display: inline-block;
    width: 20px;
    aspect-ratio: 1;
    border: 1px solid #848484;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    opacity: 1;
    transition: all 0.3s;
}

.two-radio-btnbtn input[type="radio"]+label::after {
    content: "";
    display: inline-block;
    width: 10px;
    aspect-ratio: 1;
    border: 1px solid #085f36;
    background: #085f36;
    border-radius: 50%;
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: all 0.3s;
}

.five-answer .row {
    margin-bottom: 5px;
}

.two-radio-btnbtn input[type="radio"]:checked+label::after {
    opacity: 1;
}

.prejoinig-header {
    border-bottom: 1px solid #e4e4e4 !important;
}

.prejoinig-header h5 {
    font-size: 16px;
    color: #353535;
}

.prejoing-namee {
    font-weight: bold;
    text-transform: capitalize;
    font-size: 18px;
}

.prejoining-body .card {
    box-shadow: none !important;
    border: none !important;
    margin-bottom: 0 !important;

}

.prejoining-body .form {
    margin-bottom: 0 !important;
}

.prejoinig-footer {
    border-top: 0 !important;
    border-bottom: 2px solid #ff0007 !important;
}

.prejoin-btn {
    background-color: green;
    color: white;
    outline: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: bold;
    transition: 0.3s ease-in;
    border: 1px solid transparent;
}


/* (new) all-tranee-info-detls */
.all-tranee-info-detls {
    display: flex;
    justify-content: space-between;
    border: 1px solid #f1f1f1;
    padding: 8px;
    border-radius: 4px;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.0); */
}

.all-tranee-info-line p {
    margin-bottom: 0 !important;
}

.first-ul ul {
    list-style-type: none !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.ll-detls {
    font-weight: normal !important;
}

.coment-admin-levae {
    border: 1px solid #ddd;
    font-size: 14px !important;
}

.comnt-admin {
    font-weight: normal !important;
}



/* list of tranne leave details */
.list-deatils-of-tranee {
    display: flex;
    justify-content: space-between;
}

.list-deatils-of-tranee ul {
    list-style-type: none !important;
}

.left-ul {
    width: 50%;
    padding: 8px 0;
}

.left-ul ul {
    padding: 0;
    margin-bottom: 0;
}

.right-ul ul {
    padding: 0;
    margin-bottom: 0;
}

.right-ul {
    width: 50%;
    padding: 8px 0;
}

.lr-det {
    /* display: flex; */
    /* justify-content: space-between; */
    padding: 2px 0;
}

.l-det {
    /* text-align: left; */
    font-weight: normal !important;
}

.r-det {
    /* text-align: right; */
    /* padding-left: 5px; */
}

@media only screen and (max-width:1050px) {
    .list-deatils-of-tranee {
        display: block;
    }

    .left-ul {
        width: 100%;
    }

    .right-ul {
        width: 100%;
    }
}

/* side icon changes css */
.side-leave-icon {
    font-size: 18px !important;
}

.side-holiday-icon {
    font-size: 18px !important;
}


/* leave-table */
.table-row {
    display: flex;
    margin-bottom: 10px;
}

.field {
    flex: 1;
    font-weight: bold;
    padding: 5px;
    background-color: #f2f2f2;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.value {
    flex: 2;
    padding: 5px;
    border: 1px solid #ddd;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.name-capital {
    text-transform: uppercase;
}

/*  card-leave */
.leave-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.card-leavee {
    width: 345px;
    padding: 16px;
    margin: 12px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
}

.card-leavee p {
    margin-bottom: 0 !important;
}

h2 {
    font-size: 20px;
    margin-bottom: 10px;
}

.field-leavee {
    font-weight: bold;
}

.value-leavee {
    margin-bottom: 15px;
    font-weight: normal !important;
}

/* new new new */
.welcom-text-panel {
    font-weight: bold;
    position: relative;
}

.welcom-text-panel::before {
    content: "";
    border-radius: 5px;
    display: block;
    width: 30px;
    height: 4px;
    background-color: #F88D31;
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
}

.input-textext {
    display: flex;
    justify-content: center;
    align-items: center;
}

.input-textext label {
    color: black !important;
}

.login-page input[tyep=email] {
    background-color: red !important;
}

.remember-pass {
    display: flex;
    padding: 10px 0;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}

.mail-errr {
    margin: 0 !important;
    padding: 0 !important;
    /* font-size: 14px !important; */
}

.user-profile {
    border: 1px solid #adadad;
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.left-turn-aero img {
    width: 20px;
    height: 14px;
}

.two-btn-li {
    padding: 8px 0 0 0;
}

.twoo-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.setting-dropdown {
    cursor: pointer;
    width: 35px;
    height: 35px;
    border: none;
    outline: none;
    border-radius: 50%;
    margin: 0 6px;
}

.twoo-btn button img {
    width: 18px;
    /* height: 5px; */
}

.static-lead-name {
    display: flex;
    justify-content: center;
    align-items: center;
}

.static-lead-name a {
    color: #343C6A;
    font-weight: 500;
    font-size: 18px;
}

.static-lead-name a:hover {
    color: black !important;
}


.header-menu-collp {
    display: flex;
    align-items: center;
}

.header-menu-collp #menuToggle {
    padding: 6px;
}


/* notofiaction dropdown */
.noti-dropdown {
    position: relative;
    cursor: pointer;
    width: 35px;
    height: 35px;
    border: none;
    outline: none;
    border-radius: 50%;
    margin: 0 6px;
}

.dropdown-content {
    border-radius: 8px;
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
    width: 450px;
    /* Fixed width */
    overflow: auto;
    z-index: 1;
    top: 60px;
    right: 75px;
    color: black;
}

.dropdown-content .notifiaction-header {
    /* padding: 4px 6px; */
    text-decoration: none;
    color: black;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* border-bottom: 1px solid #adadad; */
    background-color: #efefef;
}

.all-notification-list-by {
    display: flex;
    border-bottom: 1px solid #adadad;
}

.noti-left {
    font-weight: 600;
    color: black;
    font-size: 18px;
}

.left-infoo {
    /* text-align: left; */
    /* width: 50px; */
    /* height: 50px; */
    padding: 5px 14px;
    border-radius: 4px;
    /* background-color: #f5f5f5; */
    /* border: 1px solid #adadad; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.notification-month {
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: -6px;
    font-weight: 500;
}

.notification-date {
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 0;
}

.left-infoo {
    /* margin: 0 !important; */
    /* font-size: 14px; */
}

.right-infoo {
    border-left: 1px solid #adadad;
    /* text-align: right; */
    display: flex;
    justify-content: center;
    /* align-items: flex-start; */
    flex-direction: column;
    margin-bottom: 5px;
}

.right-infoo p {
    margin-bottom: 0 !important;
    /* padding-left: 10px; */
}

.notification-approval {
    font-size: 15px;
    font-weight: 500;
}

.notification-applied {
    font-size: 11px;
    color: gray;
}

.show {
    display: block;
}

.side-navigation-black p {
    color: #838383 !important;
    font-weight: 400 !important;
    font-size: 16px !important;
}


/* .side-navigation-black img{
    width: 25px;
    height: 25px;
    margin: 5px 5px;
} */
.nav-link.active .icon-path {
    fill: #F88D31;
}

/* admin prodile name and view prodile  */
.admin-name {
    color: black;
    margin-bottom: 0;
    font-weight: bold;
}

.admin-profile {
    color: gray;
    margin-bottom: 0;
    font-size: 12px;
}

/* css for job */
.card-neww {
    background-color: white;
    color: #40434a;
    border: 2px solid #e6e6e6;
    border-radius: 10px;
    width: 100%;
    background-color: white;
    padding: 10px;
}

.exp-date {
    position: relative;
}

.cal-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.card-neww-first {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-titile p {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 0;
    padding-left: 5px;
}

.card-note-info {
    display: flex;

}

.note-info {
    font-weight: normal !important;
}

.card-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

.s-c-btn {
    display: flex;
}

.course-toggle {
    display: flex;
    margin: 0 8px;
}

.toggle-title {
    margin: 0 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.toggle-title p {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 500;
    color: #000;
}


/* course-mian-toggle  */

.course-main-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
}

input.apple-switch {
    position: relative !important;
    appearance: none !important;
    outline: none !important;
    width: 44px !important;
    height: 25px !important;
    background-color: #ffffff !important;
    border: 1px solid #D9DADC !important;
    border-radius: 50px !important;
    /* box-shadow: inset -20px 0 0 0 #ffffff !important; */
    box-shadow: inset -20px 0 0 0 #a9a9a9 !important;

    transition-duration: 300ms !important;
}

input.apple-switch:after {
    content: "" !important;
    position: absolute !important;
    top: 1px;
    left: 1px !important;
    width: 20px;
    height: 20px !important;
    background-color: transparent !important;
    border-radius: 50% !important;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
}

input.apple-switch:checked {
    border-color: #F88D31 !important;
    box-shadow: inset 20px 0 0 0 #F88D31 !important;
}

input.apple-switch:checked:after {
    left: 20px !important;
    box-shadow: -2px 4px 3px rgba(0, 0, 0, 0.05) !important;
}

.trainee-placement-toggle-division {
    position: absolute;
    right: 0;
    top: 3px;
}

.trainee-placement-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
}

input.place-switch {
    position: relative !important;
    appearance: none !important;
    outline: none !important;
    width: 34px !important;
    /* Smaller width */
    height: 18px !important;
    /* Smaller height */
    background-color: #ffffff !important;
    border: 1px solid #D9DADC !important;
    border-radius: 50px !important;
    box-shadow: inset -15px 0 0 0 #ffffff !important;
    /* Adjusted for new size */
    transition-duration: 300ms !important;
}

input.place-switch:after {
    content: "" !important;
    position: absolute !important;
    top: 1px;
    left: 1px !important;
    width: 14px !important;
    /* Smaller circle */
    height: 14px !important;
    /* Smaller circle */
    background-color: transparent !important;
    border-radius: 50% !important;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
}

input.place-switch:checked {
    border-color: #F88D31 !important;
    box-shadow: inset 15px 0 0 0 #F88D31 !important;
    /* Adjusted for new size */
}

input.place-switch:checked:after {
    left: 17px !important;
    /* Adjusted for new size */
    box-shadow: -2px 4px 3px rgba(0, 0, 0, 0.05) !important;
}



.card-button a {
    /* border: none; */
    /* outline: none; */
    /* color: white; */
    /* font-size: 13px; */
    /* padding: 8px 10px; */
    /* border-radius: 4px; */
    margin: 0 5px;
}

/* .card-button button span {
    padding-left: 5px;
} */

/* .without-icon button span {
    padding-left: 0 !important;
} */

/* .submit-btnn {
    border: 1px solid transparent;
    outline: none;
    color: white;
    font-size: 15px;
    padding: 8px 10px;
    border-radius: 4px;
    background-color: #25BB00;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-in-out;
}

.submit-btnn span {
    padding-left: 5px;
} */

/* .cancel-btnn span {
    padding-left: 5px;
} */

/* .submit-btnn:hover {
    background-color: white;
    color: #25BB00;
    border: 1px solid #25BB00;
    font-weight: 500;
} */



.submit-btnn-dis {

    pointer-events: auto ! important;
    cursor: not-allowed ! important;

    border: 1px solid transparent;
    outline: none;
    color: white;
    font-size: 15px;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: #25BB00;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-in-out;
}





















.general-submit-btnn {
    border: 1px solid transparent;
    outline: none;
    color: white;
    font-size: 15px;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: #25BB00;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-in-out;
}

.general-submit-btnn:hover {
    border: 1px solid #25BB00;
    color: #25BB00;
    background-color: white;
}

.general-cancel-btnn {
    border: 1px solid transparent;
    outline: none;
    color: white;
    font-size: 15px;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: #EA0202;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-in-out;
}

.general-cancel-btnn:hover {
    border: 1px solid #EA0202;
    color: #EA0202;
    background-color: white;
}

.view-inside-btn-division {
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-btn {
    border-radius: 8px;
    width: 40px;
    height: 40px;
    border: none;
    background-color: white;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease;
}
@keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
.icon-btn:hover svg {
    animation: rotate 0.6s linear;
    transform-origin: center; 
}
.icon-welocme-btn {
    border-radius: 8px;
    width: 40px;
    height: 40px;
    border: none;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
    margin: 0 4px;
}
@keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
.icon-welocme-btn:hover img {
    animation: rotate 0.6s linear;
    transform-origin: center; 
}


.assign-btn-view {
    border-radius: 8px;
    width: 40px;
    height: 40px;
    border: none;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
    margin: 0 4px;
}
@keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
.assign-btn-view:hover svg {
    animation: rotate 0.6s linear;
    transform-origin: center; 
}





.icon-pre-join-btn {
    border-radius: 8px;
    width: 40px;
    height: 40px;
    border: none;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
    margin: 0 4px;
}
@keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
.icon-pre-join-btn:hover svg {
    animation: rotate 0.6s linear;
    transform-origin: center; 
}










.action-edit-view {
    float: right;
    display: flex;
}

.action-edit-view button {
    margin: 0 3px;
}

.add-action-view-btnn {
    border: none;
    outline: none;
    color: white !important;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 4px;
    background-color: #25BB00;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

.add-action-view-btnn a {
    color: white !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.add-action-view-btnn span {
    padding-left: 5px;
}

.add-action-view-btnn:hover {
    background-color: #1fa304;
    color: white !important;
}

/* .edit-action-view-btnn {
    border: none;
    outline: none;
    color: white !important;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 4px;
    background-color: #0075FF;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

.edit-action-view-btnn a {
    color: white !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.edit-action-view-btnn:hover {
    background-color: #0055FA;
}

.edit-action-view-btnn span {
    font-size: 14px;
    padding-left: 5px;
} */

.general-edit-btn {
    background-color: #0075FF;
    outline: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: white;
    padding: 6px 10px;
    font-size: 14px;
    transition: all 0.4s ease-in-out;
    display: flex;
    align-items: center;
}

.general-edit-btn svg path {
    transition: fill 0.4s ease-in-out;
}

.general-edit-btn:hover svg path {
    fill: #0075FF;
}

.general-edit-btn:hover {
    background-color: white;
    color: #0075FF;
    border: 1px solid #0075FF;
}

/* Target the second span specifically */
.general-edit-btn span:nth-child(2) {
    padding-left: 5px;
}

.general-edit-btn:hover span:nth-child(2) {
    color: #0075FF;
}

/* .cancel-btnn {
    border: none;
    outline: none;
    color: white !important;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 4px;
    background-color: #EA0202;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
} */

.cancel-btnn-dis {
    border: 1px solid transparent;
    outline: none;
    color: white !important;
    font-size: 15px;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: #EA0202;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-in-out;
    pointer-events: auto ! important;
    cursor: not-allowed ! important;
}

/* .cancel-btnn a {
    color: white !important;
}

.cancel-btnn a:hover {
    color: white !important;
}

.cancel-btnn:hover {
    background-color: #c90000;
    color: white !important;
} */

/* .export-pdf:hover {
    background-color: darkgreen;
    color: white !important;
} */



.active-status-new {
    color: #25BB00 !important;
}

.expired-status-new {
    color: #EA0202 !important;
}

/* in table company name */
/* .company-name {
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: 150px; 
} */
.course-name {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.company-name {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellip;
    cursor: pointer;
}

.description-cell {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.query-cell {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.Notification-Title {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.query-Title {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.module-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.module-title-new {
    max-width: 111px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.subjectline {
    max-width: 450px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.des-title {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.holiday-description {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.module-description {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.course-lessons {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.send-to {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.general-info {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ebebeb;
}

.general-info-first {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.genral-left-info p {
    margin-bottom: 0;
    font-weight: bold;
}

.genral-right-info button {
    border: none;
    outline: none;
    color: white;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 4px;
    background-color: #25BB00;
}

.reset-btnn {
    background-color: #0075FF !important;
}

.radio-info {
    display: flex;
}

.radio-title p {
    margin-bottom: 0;
    font-weight: bold;
}

.radio-info-mail {
    display: flex;
    justify-content: end;
}


/* css for upload your logo */
.image-text {
    /* display: flex; */
}

#uploadText1,
#uploadText2,
#uploadText3 {
    height: 92px;
    padding: 10px 50px;
    text-align: center;
    border: 2px dashed #D6D6D6;
    color: #838383;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#uploadText1 p,
#uploadText2 p,
#uploadText3 p {
    margin-bottom: 0;
    line-height: 20px;
    font-size: 15px;
}

#uploadPreview1,
#uploadPreview2,
#uploadPreview3 {
    height: 92px;
    padding: 10px;
    border: 2px solid #D6D6D6;
    text-align: center;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#uploadPreview2 {
    background-color: black;
}

#uploadPreview3 img {
    width: 60px;
    height: 60px;
    display: block;
    margin: auto;
}

#uploadPreview1 img,
#uploadPreview2 img,
#uploadPreview3 img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#notificationimg {
    height: 111px;
    padding: 10px 50px;
    text-align: center;
    border: 2px dashed #D6D6D6;
    color: #838383;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#notificationimg img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Maintain aspect ratio without blur */
}

#notificationimg p {
    margin-bottom: 0;
    line-height: 20px;
    font-size: 15px;
}

.document-name {
    color: black;
    display: none;
}

.forgot-pass {
    font-weight: bold;
}

.add-left-name {
    color: black;
}

.add-info-all {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-title-right {
    display: flex;
}

.add-title-left p {
    color: black;
    margin-bottom: 0;
    font-weight: bold;
}

.add-sub-btn {
    border: none;
    outline: none;
    color: white;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 4px;
    background-color: #25BB00;
    text-decoration: none;
    /* Add this line to remove underline */
}

.add-can-btn {
    border: none;
    outline: none;
    color: white;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 4px;
    background-color: #EA0202;
    text-decoration: none;
    /* Add this line to remove underline */
}

.add-can-btn:hover {
    background-color: #c90000 !important;
    cursor: pointer !important;
    color: white !important;
}

.add-sub-btn:hover {
    background-color: #1fa304;
    color: white;
}

.add-radio-info {
    display: flex
}

.add-radio-info-trainer {
    display: flex;
    margin-top: 10px;
    /* justify-content: center; */
}

.select-one-radio {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.tratra p {
    margin-bottom: 10px;
    font-size: 15px;
    text-transform: capitalize;
}

.tratra span {
    color: black;
    font-weight: 600;
}

.dynamic-det {
    color: #333 !important;
    font-weight: normal !important;
    padding-left: 5px;
}

.addd-team p {
    margin-bottom: 0;
    font-weight: 500;
    color: #303030;
}

.add-radio-role-info {
    display: flex;
}

.add-radio-title {
    text-align: center !important;
}

.add-radio-title p {
    color: black;
    font-weight: bold;
}

/* assign-to-other modal */
.traneeee-header {
    border-bottom: 1px solid #DADADA !important;
}

.modal-title-assign {
    margin-bottom: 0 !important;
    font-weight: bold;
    color: #000000;
}

.trainee-header {
    width: 100%;
    padding: 6px 10px;
    background-color: #DEDEDE;
}

.tra-left p {
    margin-bottom: 0;
    font-weight: bold;
}

.first-trainee-first {
    width: 100%;
    display: flex;
}

.left-tr-one {
    width: 50%;
}

.left-tr-one span {
    color: #000000;
    font-weight: bold;
}

.left-tr-one a {
    color: #474747;
    padding-left: 5px;
}

.right-tr-one {
    width: 50%;
}

.right-tr-one span {
    color: #000000;
    font-weight: bold;
}

.right-tr-one a {
    color: #474747;
    padding-left: 5px;
}

.add-team-memeber {
    text-align: center;
}

.add-team-title {
    font-weight: bold;
    color: #000000;
}

.trainee-com {
    margin-top: 10px;
}

.assign-header {
    color: black;
    margin-bottom: 0;
    font-weight: 600;
}

.assign-trainer-check {
    display: inline-flex;
    margin-right: 30px;
    margin-bottom: 15px;
}

.assign-right-aero {
    padding-left: 10px;
    padding-top: 8px;
}

.assign-right-aero svg {
    display: none;
    /* Hide the SVG by default */
}

.assign-right-aero.active svg {
    display: block;
    /* Show the SVG when the 'active' class is present */
}

/* check */
.note-title {
    color: #000000;
}

.ff-checkcheck {
    color: #474747;
}

.tranee-checkbox {
    position: relative;
    /* border: 2px solid #25BB00 !important; */
    border-radius: 2px;
    background: none;
    cursor: pointer;
    line-height: 0;
    margin: 0 .6em 0 0;
    outline: 0;
    padding: 0 !important;
    vertical-align: text-top;
    height: 18px;
    width: 18px;
    -webkit-appearance: none;
    opacity: .5;
}

.tranee-checkbox:focus {
    outline: #25BB00 !important;
    border-color: #25BB00 !important;
}

.tranee-checkbox:hover {
    opacity: 1;
}

.tranee-checkbox:checked {
    background-color: #BEFFAE !important;
    opacity: 1;
    border-color: #25BB00 !important;
}


.tranee-checkbox:before {
    content: '';
    position: absolute;
    right: 50%;
    top: 50%;
    width: 5px;
    height: 10px;
    border: solid #353535;
    border-width: 0 1px 1px 0;
    margin: -1px -1px 0 -1px;
    transform: rotate(45deg) translate(-50%, -50%);
    z-index: 2;
}

.first-trainer-name {
    color: black;
}

.assign-new-check {
    /* width: 30%; */
}

.addde-date {
    font-size: 12px;
    
    margin-bottom: 0;
    color: #474747;
    font-weight: normal;
}
.trainer_assignnn{
    margin-left: 30px;
    
}

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

.left-footer {
    display: flex;
}

.right-footer p {
    margin-bottom: 0;
}

.right-footer a {
    color: black;
    font-weight: bold;
}

.left-footer a {
    margin: 0 4px;
}

.btn-submitt {
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
}

.btn-cancell {
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
}

.last-com {
    /* display: flex; */
    justify-content: end;
    align-items: end;
}

.last-com a {
    padding: 0 2px;
    font-weight: 500;
    color: black !important;
}

.last-com p {
    margin-bottom: 0;
    /* display: flex; */
    justify-content: flex-end;
    color: #000000;
}

.last-com a {
    color: black;
}



.right-cancel {
    border: 1px solid transparent;
    background-color: #EA0202;
    outline: none;
    border-radius: 4px;
    color: white;
    padding: 5px 8px;
    height: 40px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s ease-in-out;
}

.right-cancel svg path {
    transition: stroke 0.5s ease-in-out;
}

.right-cancel:hover svg path {
    stroke: #EA0202;
}

.right-cancel:hover {
    background-color: white;
    color: #EA0202;
    border: 1px solid #EA0202;
}

.right-cancel span:nth-child(2) {
    padding-left: 5px;
}





/* all Button */

/* export pdf btn */
.export-pdf {
    background-color: #1B7B03;
    outline: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: white;
    padding: 8px 12px;
    font-size: 14px;
    transition: all 0.4s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.export-pdf svg path {
    transition: fill 0.4s ease-in-out, stroke 0.4s ease-in-out;
}

.export-pdf:hover svg path {
    fill: #1B7B03;
    stroke: #1B7B03;
}

.export-pdf:hover {
    background-color: white;
    color: #1B7B03;
    border: 1px solid #1B7B03;
}

.export-pdf span:nth-child(2) {
    padding-left: 5px;
}

/* add module btn */
.right-submit {
    background-color: #25BB00;
    outline: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: white;
    padding: 8px 12px;
    font-size: 14px;
    transition: all 0.4s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.right-submit svg path {
    transition: stroke 0.4s ease-in-out;
}

.right-submit:hover svg path {
    stroke: #25BB00;
}

.right-submit:hover {
    background-color: white;
    color: #25BB00;
    border: 1px solid #25BB00;
}

.right-submit span:nth-child(2) {
    padding-left: 5px;
}


/* special trainee add leave button */
.right-submit-leave {
    background-color: #25BB00;
    border-radius: 4px;
    color: white;
    padding: 8px 12px;
    font-size: 14px;
    transition: all 0.4s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid transparent;
}

.right-submit-leave svg path {
    transition: stroke 0.4s ease-in-out;
    stroke: white;
}

.right-submit-leave:hover {
    background-color: white;
    color: #25BB00;
    border: 1px solid #25BB00;

}

.right-submit-leave:hover svg path {
    stroke: #25BB00;
}

.right-submit-leave span:nth-child(2) {
    padding-left: 5px;
}

/* delete module btn */
.right-cancel-new {
    background-color: #EA0202;
    outline: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: white;
    padding: 8px 12px;
    font-size: 14px;
    transition: all 0.4s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.right-cancel-new svg path {
    transition: fill 0.4s ease-in-out, stroke 0.4s ease-in-out;
}

.right-cancel-new:hover svg path {
    fill: #EA0202;
    stroke: #EA0202;
}

.right-cancel-new:hover {
    background-color: white;
    color: #EA0202;
    border: 1px solid #EA0202;
}

.right-cancel-new span:nth-child(2) {
    padding-left: 5px;
}


.right-submit-popup {
    background-color: #25BB00;
    outline: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: white;
    padding: 8px 12px;
    font-size: 14px;
    transition: all 0.4s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.right-submit-popup svg path {
    transition: stroke 0.4s ease-in-out;
}

.right-submit-popup:hover svg path {
    stroke: #25BB00;
}

.right-submit-popup:hover {
    background-color: white;
    color: #25BB00;
    border: 1px solid #25BB00;
}

.right-submit-popup span:nth-child(2) {
    padding-left: 5px;
}

.right-cancel-popup {
    background-color: #EA0202;
    outline: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: white;
    padding: 8px 12px;
    font-size: 14px;
    transition: all 0.4s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.right-cancel-popup svg path {
    transition: fill 0.4s ease-in-out, stroke 0.4s ease-in-out;
}

.right-cancel-popup:hover svg path {
    /* fill: #EA0202; */
    stroke: #EA0202;
}

.right-cancel-popup:hover {
    background-color: white;
    color: #EA0202;
    border: 1px solid #EA0202;
}

.right-cancel-popup span:nth-child(2) {
    padding-left: 5px;
}

/* whereever two button submit and cancle button there use this class */

/* submit and cancel button */

.submit-btnn {
    border: 1px solid transparent;
    outline: none;
    color: white;
    font-size: 15px;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: #25BB00;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-in-out;
}

.submit-btnn:hover {
    background-color: white;
    color: #25BB00;
    border: 1px solid #25BB00;
    /* font-weight: 500; */
    outline: none;
}

.cancel-btnn {
    border: 1px solid transparent;
    outline: none;
    color: white !important;
    font-size: 15px;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: #EA0202;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-in-out;
}

.cancel-btnn:hover {
    background-color: white;
    color: #EA0202 !important;
    border: 1px solid #EA0202;
    /* font-weight: 500; */
    outline: none;
}













.dark-mode .breadcrumb-item+.breadcrumb-item::before {
    display: none !important;
}

.team-memb-lines {
    padding: 15px 0;
    border-top: 1px dashed #F88D31;
    border-bottom: 1px dashed #F88D31;
}


/* view page design converted leads */
.view-card {
    position: relative;
}

.btn-close-view {
    position: absolute;
    top: 0;
    right: 0;
}

.custom-close-btn {
    transition: transform 0.5s ease-in-out;
    width: 2rem;
    height: 2rem;
    background-color: transparent;
    border-radius: 50%;
    position: relative;
    border: none;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-close-btn:hover {
    transform: rotate(180deg) scale(1.2);
}


/* user-view-img */
.user-view-img {
    border: 1px solid #e9e9e9;
    padding: 8px;
    border-radius: 8px;
    height: 140px;
    width: 140px;
}

.user-view-img img {
    border-radius: 8px;
    width: 100%;
}

/* new-assign to other */
.assign-header-new {
    background-color: #efefef !important;
    color: black !important;
    padding: 10px !important;
    font-weight: bold !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    box-shadow: none !important;
}

.assign-header-hide-details {
    border: 1px solid #EBEBEB !important;
    border-top: none !important;
}

.assign-header-hide-details .row:last-child .col-md-6 p {
    margin-bottom: 0;
}

.change-user-drop {
    width: 200px;
}


/* edit-action-view */
.edit-btnn {
    color: white !important;
    background-color: #0047FF;
}

/* tranee-leave module pop-up */
.tranee-leave-details {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.tranee-leave-details-new {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border: 1px solid #EBEBEB;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #004369;
}

.tranee-leave-details-new p {
    margin-bottom: 0;
    color: #fff;
}

.tranee-leave-details-new p span a {
    color: #fff !important;
}

.tranne-leave-fromm {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}


/* add holifay -= button footer */
/* .add-holiday-footer {
    width: 100%;
}

.add-holiday-footer button {
    width: 100%;
    background-color: #25BB00;
    color: white;
    padding: 10px 0;
    border: none;
    outline: none;
    border-radius: 8px;
} */

.special-border-radius {
    border-radius: 20px !important;
}

.min-height-textarea {
    min-height: 1rem !important;
}


/* Pagination hover effect */

.page-item:not(.active):hover .page-link {
    background-color: transparent !important;
    color: #B1B1B1 !important;
}

/* new-assign to other pop-up design sidebar navigation  */
.team-memebers-title p {
    margin-bottom: 0;
    font-weight: bolder;
    padding: 10px;
}

.all-trainee-deatils {
    border: 1px solid #EBEBEB;
    border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: auto;
    /* Add scrollbar when content overflows */
    max-height: 450px !important;
    /* Adjust the height as needed */
}

.first-tra-info {
    border: 1px solid #EBEBEB;
    padding: 10px;
    margin: 0 15px;
    border-radius: 12px;
}

.first-tra-info.active {
    background-color: #f3fff1;
    border-color: #085f36;
}

.first-tra-info.inactive {
    background-color: #fffcfc;
    border-color: #ff0007;
}

.first-tra-info .same-line:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.same-line {
    display: flex;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid #E1E1E1;

}

.same-line p {
    margin-bottom: 0;
}

.same-left {
    width: 25%;
}

.same-left p {
    color: #000;
    font-weight: 500;
}

.same-right {
    width: 75%;
}

.same-right p {
    color: black;
    font-weight: 500;
}

.trainer-nameee {
    color: black !important;
    font-weight: 500;
}

.active-statusss {
    color: green !important;
}

.deactive-statusss {
    color: red !important;
}

.all-trainee-deatils::-webkit-scrollbar {
    width: 5px;
}

.all-trainee-deatils::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.all-trainee-deatils::-webkit-scrollbar-thumb {
    background: #F88D31;
    border-radius: 5px;
}

.all-trainee-deatils::-webkit-scrollbar-thumb:hover {
    background: #889;
}

/* have an query modal first before you seen */

/* holiday view page new */
.holi-header {
    display: flex;
    padding: 10px 0;
}

.holi-header p {
    margin-bottom: 0;
}

.holi-name-view p {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px;
}

.holi-info-view p {
    font-size: 16px;
    font-weight: 500;
    color: gray;
}

.holi-post-by-div p {
    margin-bottom: 0;
}

.holi-post-by-div {
    background-color: #f7f7f7;
    padding: 8px;
    border-radius: 5px;
    border-bottom: 2px solid rgb(189 189 189);

}

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


.reason-det p {
    margin-bottom: 0;
    font-weight: bold;
}


.have-query-s-line{
    display: flex;
}


.have-query-new-division{
    width: 100%;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
}
.have-query-new-division p{
    margin-bottom: 0;
}
.have-query-f-line p{
    font-size: 15px;

}
.have-query-f-line p span{
    font-weight: 700;
}
.have-queeryy-p-tag {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
}

.have-queeryy-p-tag span {
    padding: 0 1px;
}

.about-what p {
    margin-bottom: 0;
    font-style: italic;
}

.deatils-abouttt p {
    margin-bottom: 0;
    color: #545454;
    text-align: justify;
    font-size: 15px;
}

.posted-datep {
    margin-bottom: 0;
    color: #545454;
}

.tranee-checkbox-have {
    position: relative;
    border-radius: 2px;
    background: none;
    cursor: not-allowed;
    /* Change cursor to indicate that it's disabled */
    line-height: 0;
    margin: 0 .6em 0 0;
    outline: 0;
    padding: 0 !important;
    vertical-align: text-top;
    height: 18px;
    width: 18px;
    -webkit-appearance: none;
    opacity: .5;
}

.tranee-checkbox-have:before {
    content: '';
    position: absolute;
    right: 50%;
    top: 50%;
    width: 4px;
    height: 10px;
    border: solid #FFF;
    border-width: 0 2px 2px 0;
    margin: -1px -1px 0 -1px;
    transform: rotate(45deg) translate(-50%, -50%);
    z-index: 2;
}

/* Optional: Change appearance for checked state */
.tranee-checkbox-have:checked {
    background-color: #0075FF !important;
    opacity: 1;
    border-color: #fff !important;
}

.have-closed-text {
    color: #0075FF !important;
}


/* have an query second modal pop-uip */
.replied-text {
    display: flex;
    padding: 5px 0;
    justify-content: space-between;
    border-top: 1px solid #D2D2D2;
    border-bottom: 1px solid #D2D2D2;
}

.replied-text p {
    margin-bottom: 0;
}

.left-replied a {
    color: black;
}

.left-replied {
    color: black;
    font-size: 14px;
}

.right-replied {
    color: black;
    font-size: 14px;
}

.closedd-text {
    color: red;
    border: 1px solid red;
    padding: 4px;
    margin-left: 5px;
    border-radius: 6px;
    transition: 0.3s ease-in-out;
    background-color: #ffe4e4;
}

.closedd-text:hover {
    background-color: red !important;
    color: white !important;
}

/* add coursew-module  */
.card-neww-first-add {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-course-module {
    display: flex;
    justify-content: center;
    align-items: center;
}

.add-module-title {
    color: #25BB00;
    padding-left: 10px;
    font-weight: bold;
    padding-top: 5px;
}

.card-titile select {
    padding: 10px;
}

/*  */

.test::after {
    margin-right: 10px;
}

.add-module-btn-title {
    color: #25BB00;
    font-weight: bold;
    padding-left: 10px;
    padding-top: 5px;
    font-size: 17px;
}

.remove-module {
    border: 0;
    outline: 0;
    border-radius: 4px;
    background-color: transparent;
    padding-top: 3px;
    display: f;
    justify-content: center;
    align-items: center;
}

.edit-module-btn-title {
    color: red;
    font-weight: bold;
    /* padding-left: 10px; */
    /* padding-top: 5px; */
    font-size: 17px;
    padding-left: 2px;
}

.minus-color i {
    color: red;
}

.add-btnn-course button {
    border: 0;
    outline: 0;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px !important;
}

.card-neww-module {
    background-color: white;
    color: #40434a;
    border: 2px solid #e6e6e6;
    border-radius: 10px;
    width: 100%;
    background-color: white;
    padding: 8px 6px;
    display: flex;
    justify-content: space-between;
}

.module-name p {
    margin-bottom: 0;
    font-weight: bold;
}

.module-btn button {
    /* border: 0;
    outline: 0;
    padding: 8px 10px;
    color: white;
    border-radius: 4px; */
}

.edit-module-bttn {
    background-color: #0075FF !important;
    border: 0 !important;
    outline: 0 !important;
    padding: 8px 10px !important;
    color: white !important;
    border-radius: 4px !important;
    font-size: 12px !important;

}

.save-module-bttn {
    background-color: #25BB00 !important;
    border: 0 !important;
    outline: 0 !important;
    padding: 8px 10px !important;
    color: white !important;
    border-radius: 4px !important;
    font-size: 12px;
}

/* aacordion-modal */
.assign-header-new-modal {
    background-color: white !important;
    color: black !important;
    padding: 10px !important;
    font-weight: bold !important;
    position: relative;
    box-shadow: none !important;
}

.module-remove-btn {
    /* position: absolute;
    top: 18px;
    right: 70px;
    color: red !important;
    border: none;
    background-color: transparent;
    outline: none;
    font-weight: 500;
    z-index: 9; */
}

/* .module-remove-btn button{
    font-size: 14px;
    background-color: white;
    padding: 8px 14px;
    color: red !important;
} */

.com-add-btn {
    /* color: red;
    padding: 10px;
    border: none; */
}

.remove-btn {
    border: none;
    outline: none;
    background-color: transparent;
}

.remove-btn span {
    color: red !important;
    /* padding: 10px; */
    border: none;
    background-color: transparent;
}

.edit-save-btn {
    position: absolute;
    top: 7px;
    right: 55px;
    z-index: 111;
}

.inner-drop-bx .dropdown .dropdown-menu {
    bottom: -8rem;
}

.tox-statusbar__branding {
    display: none !important;
}

.module-common-title p {
    margin-bottom: 0;
    font-weight: bold;
    color: black;
}

.pdf-button {
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 8px 0;
    /* width: 125px; */
}

.pdf-button i {
    color: #F88D31 !important;
    font-size: 21px;
}

.pdf-button span {
    font-size: 12px;
    color: #a2a2a2;
    font-weight: 500;
    margin: 0 3px;
}

.add-btn-text {
    color: #25BB00;
    font-weight: 600;
}

.add-btn-for-module {
    border: none;
    outline: none;
    border-radius: 5px;
    background-color: transparent;
    color: #25BB00;
}

.module-counr-1 {
    /* border: 2px solid black !important; */
}

.remove-modules {
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 3px;
    background-color: white;
}

.module-remove-btn-module {
    /* position: absolute;
    right: 51px; */
}

.add-btn-for-modules1 {
    border: none;
    outline: none;
    border-radius: 5px;
    background-color: transparent;
    color: #25BB00;
}

.add-btn-for-modules3 {
    border: none;
    outline: none;
    border-radius: 5px;
    background-color: transparent;
    color: #25BB00;
}

.add-btn-for-modules2 {
    border: none;
    outline: none;
    border-radius: 5px;
    background-color: transparent;
    color: #25BB00;
}

.add-btn-for-module-que {
    border: none;
    outline: none;
    border-radius: 5px;
    background-color: transparent;
    color: #25BB00;
}

.add-btn-for-module2 {
    border: none;
    outline: none;
    border-radius: 5px;
    background-color: transparent;
    color: #25BB00;
}

/* .course-bx-dtls { */
/* padding-bottom: 30px;
margin-bottom: 15px;
border-bottom: 1px dashed #FD7500;
} */


.course-titl-intr button {
    padding: 15px !important;
    box-shadow: none !important;
    /* position: relative; */
}

.more-op-accord .accordion-item:last-child {
    margin-bottom: 0;
}

.accordion-body-module::-webkit-scrollbar {
    width: 5px;
}

.accordion-body-module::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.accordion-body-module::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

.accordion-body-module::-webkit-scrollbar-thumb:hover {
    background: #889;
}

.course-view th {
    width: 200px;
}

/* trainee notificatio pop-up  */
.download-pdf {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.download-pdf p {
    margin-bottom: 0 !important;
}

.download-pdf p span {
    margin-bottom: 0;
    font-weight: 700;
    font-size: 15px;
}

.click-pdf-downlaod {
    font-weight: bold;

}

/* notification pop-up in modal */
.view-all-notification {
    outline: none;
    border: none;
    border-radius: 4px;
}

.view-all-notification span {
    font-weight: 500;
    font-size: 15px;
    color: #EA0202;
}


/* trainee-notification in header bar */
.notification-division {
    padding: 10px;
}

.trainee-noti-name p {
    margin-bottom: 0;
    font-weight: bold;
}

.trainee-notification-des p {
    margin-bottom: 0;
    font-size: 14px;
}

.posted-date-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.l-posted p {
    margin-bottom: 0;
    color: #656565;
    font-size: 14px;
}

.r-posted p {
    margin-bottom: 0;
    color: #656565;
    font-size: 14px;
}

.trainee-read-more a {
    color: #0075FF;
    font-weight: bold;
}

.trainee-read-more {
    padding-bottom: 5px;
    border-bottom: 1px solid #DEDEDE;
}



/* rise a query in trainee panel */
.rise-a-query span {
    font-size: 15px;
    font-weight: 600;
}

.error-description p {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 22px;
    color: #000000;
}

.error-full-description p {
    margin-bottom: 0;
    font-size: 16px;
    color: #626262;
    font-weight: 400;
}

/* jobs view page in trainee panel */
.welcom-jobs-division {
    color: #000000;
    width: 100%;
    padding: 10px 0;
}

.job-tech-exe {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #0075FF;
    border-radius: 8px;
    background-color: #F0F7FF;
    display: flex;
    justify-content: space-between;
}

.must-refer {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #F88D31;
    border-radius: 8px;
    background-color: #FFE8D4;
    display: flex;
    justify-content: space-between;
}

.must-refer p {
    margin-bottom: 0;
}

.company-mail-address p {
    margin-bottom: 0;
}

.company-mail-address {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #25BB00;
    border-radius: 8px;
    background-color: #F1FFEE;
}

.company-mail {
    width: 100%;
    padding: 3px 1px;
    display: flex;
    justify-content: space-between;
}

.company-address-division {
    width: 100%;
    padding: 6px 0px;
}

.job-tech-exe p {
    margin-bottom: 0;
}

.trainee-titlt-bold {
    font-weight: bold;
    padding-right: 10px;
}

.trainee-jobs-description {
    display: flex;
    color: #000000;
}

.trainee-jobs-description p {
    margin-bottom: 0;
}

.company-address-division p {
    margin-bottom: 0;
}

.divider {
    width: 100%;
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.divider div {
    border-top: 3px solid black;
    width: 50%;
    position: relative;
}

.divider div:after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    background-color: black;
    top: -5px;
    left: 0;
    transform: rotate(45deg);
}

.divider div:before {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    background-color: black;
    top: -5px;
    right: 0;
    transform: rotate(45deg);
}

.company-qualification {
    width: 100%;
    color: #000000;
}

.company-qualification p {
    margin-bottom: 0;
    font-size: 14px;
    padding: 8px 0;
}

.qualification-by-list {
    width: 100%;
    color: #000000;
    display: flex;
    justify-content: space-between;
}

.qualification-by-list ul {
    width: 33%;
}

.qualification-by-list ul li {
    position: relative;
    /* Required for positioning the ::before pseudo-element */
    list-style: none;
    list-style-type: none;
}

.qualification-by-list ul li::before {
    content: "";
    display: block;
    width: 15px;
    height: 3px;
    background-color: #F88D31;
    border-radius: 8px;
    position: absolute;
    top: 50%;
    left: -25px;
    transform: translateY(-50%);
}




/* course view page in admin panel */
.welcom-course-division {
    color: #000000;
    width: 100%;
    padding: 5px;
}

.trainee-course-name p {
    margin-bottom: 0;
    font-size: 22px;
}

.trainee-course-name p span {
    font-weight: 700;
    font-size: 22px;
}

.trainee-course-des p {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 600;
}

.trainee-course-det p {
    margin-bottom: 0;
    font-size: 14px;
}

/* new collpase in course view */
.trainne-module-one {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 1px solid #CECECE;
    background-color: white;
    border-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.module-title-name {
    margin-bottom: 0;
    font-weight: 600;
    color: #000000;
    font-size: 18px;
}

.module-title-name a {
    color: #000000;
}

.module-title-des {
    margin-bottom: 0;
    color: #737373;
}

.trainne-module-one .fas {
    transition: transform 0.3s ease;
}

.collapsed .fas {
    transform: rotate(-90deg);
}

/* in collpase show css */
.sub-module-bx-con {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #CECECE;
}

/* .list-of-course strong {
    font-weight: 600;
} */

.scroolable-collapse {
    background-color: white;
    padding: 15px 20px;
    background-color: white;
    border: 1px solid #CECECE;
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.collapse-sub-title p {
    margin-bottom: 0;
    font-weight: 700;
    font-size: 18px;
    color: #000;
}

/* .list-of-course p {
    font-size: 14px;
} */

/* .list-of-course ul {
    list-style: none;
    margin: 10px 0;
} */

/* .list-of-course li {
    color: #000000;
    font-size: 14px;
} */

.des-li li {
    line-height: 22px;
}

.refer-note {
    font-weight: normal !important;
    font-size: 14px !important;
}

.download-pdf-division {
    width: 100%;
    display: flex;
}

.downalod-pdf {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border: 1px solid #EA0202;
    background-color: #FFF9F9;
    border-radius: 8px;
    margin: 5px;
}

.scroolable-collapse .download-pdf-division {
    padding-bottom: 15px !important;
    padding-top: 15px;
}

.left-download-info p {
    margin-bottom: 0;
}

.pdf-title {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
}

.pdf-update-date {
    font-size: 12px;
    color: #000000;
    font-weight: 400;
    font-style: italic;
}

.right-download-info a {
    font-weight: 600;
    color: #0075FF;
    font-size: 14px;
}

.mark-btn {
    width: 50%;
    padding: 15px 0;
    display: flex;
    margin: 0 auto;
    justify-content: center;
}

.mark-btn button {
    border: none;
    outline: none;
    border-radius: 10px;
    background-color: #25BB00;
    color: white;
    padding: 12px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

.sheare-division {
    text-align: center;
}

.sheare-division p {
    margin-bottom: 15px;
    font-weight: 400;
    color: #000000;
    font-size: 13px;
}

.textarea-container textarea::placeholder {
    font-size: 14px;
}

.textarea-container {
    border-bottom: 1px solid #CECECE;
}

.textarea-container textarea {
    border: 1px solid #CECECE !important;
    border-radius: 8px !important;
}

.textarea-container p {
    font-size: 15px;
}

.textarea-container span {
    font-weight: bold;
}

.reply-division {
    width: 100%;
}

.reply-msg {
    display: flex;
    justify-content: space-between;
    color: #000000;
}

.reply-msg p {
    margin-bottom: 0;
}

.reply-name {
    font-size: 18px;
    font-weight: 700;
}

.reply-title {
    color: #25BB00;
    font-weight: 500;
    font-size: 16px;
}

.trainer-reply p {
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 400;
}

.trainer-replied-with-date {
    display: flex;
    justify-content: space-between;
    color: #000000;
    border: 1px solid #CECECE;
    padding: 10px;
    border-radius: 8px;
}

.trainer-full-des p {
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 500;
}

.trainer-full-des-date p {
    margin-bottom: 0;
    font-style: italic;
    font-size: 15px;
}

/* new page for welcome in trainee panel */
.trainee-welcome-bg {
    /* background-image: url("../../dist/img/trainee_bg.jpg"); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.welcom-text-panel-new {
    font-weight: bold;
}

.welcome-time-div {
    text-align: center !important;
    border-bottom: 1px solid #CECECE;
    padding-bottom: 10px !important;
}

.welcom-text-panel-time {
    padding: 0;
    font-weight: bold;
    text-align: center !important;
    color: black !important;
    font-size: 15px !important;
    margin: 0 !important;
}

.time-limit {
    text-align: center !important;
}

.time-limit p {
    margin: 0 !important;
    font-size: 15px !important;
    color: #000000 !important;
}

.your-logine-div {
    text-align: center !important;
}

.your-logine-div p {
    margin: 0 !important;
    text-align: center !important;
    font-size: 14px !important;
    color: #000000 !important;
}

.your-logine-div span {
    font-weight: bold !important;
}

/* welcome-check trainee page css */
#welcome-check-trainee .modal-content {
    border-radius: 30px;
    width: 90%;
    margin: 0 auto;
}

.welcome-check-trainee-name {
    color: #000000;
    margin: auto;
}

.welcome-check-trainee-name p {
    margin-bottom: 0;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
}

.welcome-check-trainee-timeslot {
    color: #000000 !important;
    margin: auto;
}

.welcome-check-trainee-timeslot a {
    color: #000000 !important;
}

.welcome-check-trainee-timeslot p {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 600;
}

.gif-img {
    width: 100%;
    text-align: center !important;
}

.gif-img img {
    width: 35%;
    height: auto;

}

.trainee-welcome-chech-des {
    width: 100%;
    text-align: center;
    color: #000000;
}

.trainee-welcome-chech-des p {
    margin-bottom: 0;
    font-size: 15px !important;
}

.trainee-welcome-logintime {
    width: 100%;
    color: #000000;
    text-align: center;
}

.trainee-welcome-logintime p {
    font-size: 16px;
    margin-bottom: 10px;
}

.trainee-welcome-logintime a {
    color: #000000 !important;
    font-weight: bold;
}

.trainee-welcome-check-present {
    width: 100%;
    /* text-align: center; */
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto;
    align-items: center !important;
}

/* .trainee-welcome-check-present .present-link {
    display: inline-block;
    text-decoration: none;
    font-size: 16px;
    color: white;
    background-color: #F88D31;
    width: 350px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    outline: none;
    margin: auto;
    transition: 0.3s ease-in-out;
}

.trainee-welcome-check-present .present-link:hover {
    background-color: white;
    color: #F88D31 !important;
    border: 1px solid #F88D31;
} */

/* new button hover style for welcome div for trainee click on i am present today */

/* start with right icon button css */
.present-link {
    display: inline-block;
    border-radius: 15px;
    background-color: #F88D31;
    border: none;
    color: #FFFFFF;
    font-size: 16px;
    padding: 12px;
    width: 310px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}

.present-link span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.present-link span:after {
    content: '\2713';
    position: absolute;
    opacity: 0;
    bottom: -8px;
    right: -20px;
    transition: 0.5s;
    font-size: 25px;
}

.present-link:hover span {
    padding-right: 25px;
}

.present-link:hover span:after {
    opacity: 1;
    right: -5px;
}

/* end with right icon button css */


/* new chnages in assign to other new and addinf button ( change ) */
.btn-change-technology,
.btn-change-time,
.btn-change-trainer {
    outline: none;
    border: none;
    background-color: transparent;
    font-weight: 600;
    color: #0075FF;
}

.first-chnage,
.second-chnage,
.third-chnage {
    display: none;
    border: 1px solid #EBEBEB;
    border-radius: 4px;
}

.btn-change-trainer.active,
.btn-change-time.active,
.btn-change-technology.active {
    color: orangered;
}

/* technology change */
.current-technology-text {
    text-align: center;
    display: flex;
    align-items: center;
}

.current-technology-text p {
    margin-bottom: 0;
    color: #000000;
}

.current-technology-text a {
    color: #000000 !important;
    font-weight: bold !important;
}

/* time change */
.current-time-text {
    text-align: center;
    display: flex;
    align-items: center;
}

.current-time-text p {
    font-size: 15px;
    margin-bottom: 0;
    color: #000000;
}

.current-time-text a {
    color: #000000 !important;
    font-weight: bold !important;
}

.second-chnage .current-time-division .trainee-com .form-float-style textarea {
    min-height: 2rem !important;
}


.current-tech-division .current-technology-change .inner-drop-bx .dropdown .dropdown-menu {
    /* min-height: 120px !important; */
}


/* trainee dashboard profile */

/* for new changes for trainee dashboard start css */



.trainee-dashboard {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.trainee-profile-details {
    width: 24%;
    border: 1px solid #E8E8E8;
    padding: 10px;
    border-radius: 10px;
    background-color: white;
    height: 100%;
    position: sticky;
    top: 65px !important;
}

.trainee-all-details {
    width: 75%;
}

/* responsive trainee dashboard 1200px */
@media screen and (max-width:1200px) {
    .trainee-dashboard {
        display: block;
    }

    .trainee-profile-details {
        width: 85%;
        height: max-content;
        position: static;
        margin: 0 auto;
    }

    .res-box-trainee {
        width: 100%;
        display: flex;
    }

    .res-left-box {
        width: 50%;
    }

    .res-right-box {
        width: 50%;
    }

    .trainee-assign-team {
        width: 35%;
        margin: 0 auto;
        justify-content: center;
        margin-top: 15px;

    }

    .all-soc-icon {
        background: radial-gradient(#ffffff, #e1e1e12e);
        max-width: 30%;
        margin: 0 auto;
        border-radius: 10px;
        border-bottom: 1px solid #F48A2D;
    }

    .month-details-container-trainee {
        max-width: 100% !important;

    }
    .trainee-all-details {
        width: 100%;
        padding-top: 10px;
    }

    .trainee-profile-det-list .month-details-container-trainee {
        width: 100% !important;
    }
    .trainer-profile-name{
        border: 0 !important;
    }
    .set_trainer_profile{
        width: 100% !important;
    }
    .set_trainer_data{
        width: 100% !important;
    }
    .trainer-profile-details{
        width: 50% !important;
    }
    .left-trainer-profile-new{
        width: 45% !important;
    }
    .right-trainer-profile-new{
        width: 55% !important;
    }


}
@media screen and (max-width:768px) {
    .trainee-profile-details {
        width: 100%;
    }
    .trainer-profile-details{
        width: 100% !important;
        padding-bottom: 0 !important;
        border: 0 !important;
    }
    .trainer-profile-details-new{
        width: 100% !important;
        padding-top: 0 !important;
    }
    .set_trainer_data{
        display: block !important;
    }
}



.ui-state-disabled span {
    color: gray !important;
    font-size: 0.875rem !important;
}

.trainee-profile-photo {
    width: 100%;
    text-align: center;
    position: relative;
}

.trainee-edit-profile {
    position: absolute;
    top: 0;
    right: 0;
}

.trainee-edit-profile button {
    width: 30px;
    height: 30px;
    border: none;
    outline: none;
    border-radius: 50%;
    background-color: #F88D31;
    display: flex;
    justify-content: center;
    align-items: center;
}

.trainee-profile-photo img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 1px solid #CECECE;
}

.trainee-name-and-tech {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #D1D1D1;
}

.trainee-name-and-tech p {
    margin-bottom: 0;
}

/* .trainee-name-and-tech p:nth-child(1) {
    color: #000000;
    font-weight: bold;
    font-size: 18px;
} */

/* .trainee-name-and-tech p:nth-child(2) {
    color: #000;
    padding: 8px 14px;
    border: 2px solid #F88D31;
    font-size: 11px;
    margin-bottom: 0;
    border-radius: 38px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.trainee-name-and-tech span{
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #F88D31;
    margin-right: 5px;
} */
/* .trainee-name-and-tech p:nth-child(3) {
    color: #7D7D7D;
    font-size: 14px;
} */

.trainee_dash_name{
    color: #000000;
    font-weight: bold;
    font-size: 18px;
}
.trainee_dash_name_date{
    color: #000;
    padding: 8px 14px;
    border-bottom: 2px dashed #F88D31;
    font-size: 11px;
    margin-bottom: 0;
    /* border-radius: 38px; */
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
/* .trainee_dash_name_date span {
    display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #F88D31;
        margin-right: 5px;
} */

.trainee_dash_name_tech{
    color: #7D7D7D;
    font-size: 14px;
    padding: 5px 0;
}












.trainee-profile-det-list {
    padding: 0px 2px;
}

.trainee-profile-details-list {
    display: flex;
    padding: 5px 0;
    justify-content: center;
    align-items: center;

}

.trainee-profile-details-list p {
    margin-bottom: 0;
}

.left-trainee-profile {
    width: 43%;
}

.left-trainee-profile p {
    font-size: 12px;
    font-weight: 500;
}

.right-trainee-profile {
    width: 57%;
}

.i-information-btn {
    border: none;
    outline: none;
    border-radius: 50%;
    background-color: #e3e3e3;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 0;
    right: 0;
}

.i-information-btn span {
    display: flex;
    justify-content: center;
    align-items: center;
}

.i-information-btn span i {
    font-size: 11px;
}


@media screen and (max-width: 1400px) {
    .right-trainee-profile p {
        word-break: break-all;
        white-space: normal;
    }
}

.right-trainee-profile p {
    font-size: 12px;
    font-weight: 400;
}

.trainer-hold_active {
    color: orange !important;
}
.trainer-hold
{
     color: orange !important;
}
.trainer-active {
    color: green !important;
}

.trainer-in-active {
    color: red !important;
}





.work-progress-button-header {
    background-color: white !important;
    color: black !important;
    padding: 10px !important;
    font-weight: bold !important;
    position: relative;
    box-shadow: none !important;
    margin: 5px 0;
}

.contact-det {
    position: relative !important;
}

.trainee-edit-contact-det {
    position: absolute;
    right: 50px;
    top: 5px;
    z-index: 99;
}

.trainee-edit-contact-det {
    border: none;
    outline: none;
    border-radius: 4px;
    color: white;
    background-color: #25BB00;
    font-size: 14px;
    padding: 9px 16px;
}

/* for lead deatails  */
.lead-det {
    position: relative !important;
}

.trainee-edit-lead-det {
    position: absolute;
    right: 50px;
    top: 5px;
    z-index: 99;
}

.trainee-edit-lead-det {
    border: none;
    outline: none;
    border-radius: 4px;
    color: white;
    background-color: #25BB00;
    font-size: 14px;
    padding: 9px 16px;
}

.work-progress-body-module {
    padding: 0 8px !important;
}

.trainee-starting-border {
    border-top: 1px solid #DEDEDE;
}

.trainee-dashboard-conatct-details {
    border-radius: 10px !important;
}

.trainee-dashboard-conatct-details,
.trainee-dashboard-conatct-details th,
.trainee-dashboard-conatct-details td {
    border: 1px solid #E1E1E1;
    border-collapse: collapse;
    padding: 10px;
}

.trainee-dashboard-conatct-details td {
    width: 50%;
}

.trainee-dashboard-conatct-details td span:first-child {
    font-weight: bold;
    font-size: 16px;
}

.trainee-dashboard-conatct-details td span:nth-child(2) {
    font-weight: normal;
    font-size: 14px;
}

.trainee-all-leave-title {
    width: 100%;
}

.trainee-all-leave-title p {
    margin-bottom: 0;
    font-weight: bold;
}

.trainee-all-leave-det {
    width: 100%;
    display: flex;
    border-bottom: 1px dashed #CBCBCB;
    flex-wrap: wrap;
}

.count-days {
    margin: 4px 5px;
}

.count-days p {
    margin-bottom: 0;
}

.trainee-total-leave-count {
    color: #0075FF;
    font-size: 24px;
    font-weight: bold;
}

.trainee-total-leave-count-title {
    color: #000000;
    font-size: 13px;
    font-weight: 500;
}

.trainee-total-app-count {
    color: #25BB00;
    font-size: 24px;
    font-weight: bold;
}

.trainee-total-un-app-count {
    color: #EA0202;
    font-size: 24px;
    font-weight: bold;
}

.trainee-total-work-count {
    color: #0075FF;
    font-size: 24px;
    font-weight: bold;
}

.trainee-total-present-count {
    color: #25BB00;
    font-size: 24px;
    font-weight: bold;
}

.trainee-total-absent-count {
    color: #EA0202;
    font-size: 24px;
    font-weight: bold;
}

.trainee-total-sat-sun-count {
    color: #AC39D4;
    font-size: 24px;
    font-weight: bold;
}

.trainee-total-holiday-count {
    color: #004369;
    font-size: 24px;
    font-weight: bold;
}

.trainee-total-on-leave-count {
    color: #FF00C7;
    font-size: 24px;
    font-weight: bold;
}

.how-many-trainer-assigned {
    width: 100%;
}

.how-many-trainer-assigned p {
    margin-bottom: 0;
    font-weight: bold;
}

.team-assigned-table table,
.team-assigned-table th,
.team-assigned-table td {
    border-collapse: collapse;
}

.team-assigned-table td {
    font-size: 13px;
    border: 8px solid transparent;
}

.trainee-common-hold {
    width: 100%;
    border: 1px solid #e9e9e9;
    border-radius: 5px;
    margin: 4px 0;
    padding: 3px 8px;
}

/* for new view trainee hold pop-up */
.admin_trainee_hold_view p{
    margin: 4px 0;
}
.trainee-common-hold-new{
    width: 100%;
    border: 1px solid #e9e9e9;
    border-radius: 5px;
    margin: 4px 0;
    padding: 3px 8px;
}
.trainee-common-hold-new p{
    margin-bottom: 0;
}
.trainee-hold-titile-new p {
    font-size: 16px;
    font-weight: 500;
}
.trainee-hold-cmnt-new p {
    font-size: 14px;
}
.trainee-hold-posted-new {
    display: flex;
    justify-content: end;
}

.trainee-hold-posted-new p {
    font-size: 11px;
    text-align: right;
}


.trainee-common-hold p {
    margin-bottom: 0;
}

.trainee-hold-titile p {
    font-size: 16px;
    font-weight: 500;
}

.trainee-hold-cmnt p {
    font-size: 14px;
}

.trainee-hold-posted {
    display: flex;
    justify-content: end;
}

.trainee-hold-posted p {
    font-size: 11px;
    text-align: right;
}

.all-social-icon-trainee {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-media-icon {
    width: 50%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* all-soc-icon start */
.all-soc-icon {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.all-soc-icon ul {
    display: flex;
    padding: 0;
    margin: 10px 0;
}

.all-soc-icon ul li {
    list-style: none;
}

.all-soc-icon ul li a {
    width: 38px;
    height: 38px;
    background-color: #fff;
    text-align: center;
    font-size: 20px;
    margin: 0 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    border: 3px solid #fff;
    z-index: 1;
}

.all-soc-icon ul li a .four-icon {
    position: relative;
    color: #F88D31;
    transition: 0.4s ease-in-out;
    z-index: 3;
}

.all-soc-icon ul li a:hover .four-icon {
    color: #fff;
    transform: rotateY(360deg);
}

.all-soc-icon ul li a:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f00;
    transition: .5s;
    z-index: 2;
}

.all-soc-icon ul li a:hover:before {
    top: 0;
}

.all-soc-icon ul li:nth-child(1) a:before {
    background: linear-gradient(45deg, #00aff0, #0078d7);
    /* Skype color */
}

.all-soc-icon ul li:nth-child(2) a:before {
    background: #1773EA;
    /* Facebook color */
}

.all-soc-icon ul li:nth-child(3) a:before {
    background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
    /* Instagram color */
}

.all-soc-icon ul li:nth-child(4) a:before {
    background: #0A66C2;
    /* LinkedIn color */
}





.trainee-joing-form {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.trainee-joing-form a button {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    outline: none;
    border: 1px solid #0075FF;
    background-color: #E8F2FF;
    width: 200px;
    padding: 10px 14px;
    color: #0075FF;
    font-weight: bold;
}

.trainee-joing-form a button span {
    font-size: 12px;
    margin: 0 2px;
}


/* edit profile details pop-up for trainee */
.edit-trainee-profile-division {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#edit-profile-img {
    width: 180px;
    height: 180px;
    padding: 10px;
    text-align: center;
    border: 2px dashed #D4D4D4;
    color: #838383;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    transition: border-color 0.8s;
}

#edit-profile-img.image-uploaded {
    border-color: #D4D4D4;
}

#edit-profile-img p {
    margin-bottom: 0;
    line-height: 20px;
    font-size: 15px;
    position: absolute;
}

#uploadedImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: none;
    /* Initially hidden */
}

#uploadedImage-new {
    object-fit: cover;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    border: 1px solid #D6D6D6;
    border-radius: 50%;
}


.save-details-trainee-footer button {
    width: 100%;
    background-color: #F88D31;
    color: white;
    padding: 10px 0;
    border: none;
    outline: none;
    border-radius: 8px;
}



/* trainer crad ( My Team ) */
.trainer-card {
    background-color: white;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #E8E8E8;
    position: relative;
}

.traine-card-status-active {
    position: absolute;
    top: 12px;
    right: 25px;
}

.traine-card-status-in-active {
    position: absolute;
    top: 12px;
    right: 25px;
}

.trainer-profile-team {
    width: 100%;
    width: 100%;
    text-align: center;
}

.trainer-profile-team img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.trainer-profile-team-name-id {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #D1D1D1;
}

.trainer-profile-team-name-id p {
    margin-bottom: 0;
}

.trainer-profile-team-name-id p:first-child {
    color: #000000;
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
}

.trainer-profile-team-name-id p:nth-child(2) {
    color: #7D7D7D;
    font-size: 14px;
}

.trainer-assigner-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.trainer-assigner-date p {
    margin-bottom: 0;
}

.trainer-assigner-date p:first-child {
    color: #000000;
    font-weight: 500;
}

.trainer-assigner-date p:nth-child(2) {
    color: #7A7979;
    font-size: 14px;
}

.trainer-Expertise {
    width: 100%;
}

.trainer-Expertise p {
    margin-bottom: 0;
}

.trainer-Expertise p:first-child {
    color: #000000;
    font-weight: 500;
}

.trainer-Expertise p:nth-child(2) {
    color: #7A7979;
    font-size: 14px;
}

.chat-with-trainer-box {
    width: 100%;
}

.chat-with-trainer-box button {
    outline: none;
    padding: 8px 20px;
    width: 100%;
    border-radius: 8px;
    background-color: #EBF4FF;
    color: #0075FF;
    border-top: 2px solid #0075FF;
    border-bottom: none;
    border-left: none;
    border-right: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    font-size: 15px;
}

.trainer-view-details {
    width: 100%;
    text-align: center;
}

.trainer-view-details button {
    border: none;
    outline: none;
    background-color: transparent;
    color: #F88D31;
    font-size: 14px;
    font-weight: bold;
}

/* my team pop-up */
.trainer-profile-det-pop-up {
    width: 100%;
    display: flex;
}

.profile-left {
    width: 35%;
}

.profile-left img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.profile-right {
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profile-right p {
    margin-bottom: 0;
    color: #000000;
}

.profile-right p span {
    font-size: 14px;
    color: gray;
}

.pop-trainer-skype-date {
    width: 100%;
    margin-top: 10px;
    display: flex;
    padding: 10px 0;
    justify-content: space-between;
    border-top: 1px solid #D2D2D2;
    border-bottom: 1px solid #D2D2D2;
}

.pop-trainer-skype-date p {
    margin-bottom: 0;
}

.pop-assign-date {
    color: #434343;
}

.pop-assign-date span {
    font-size: 14px;
    color: #434343;
}

.pop-assign-skype p {
    color: #434343;
}

.pop-assign-skype span {
    color: #0075FF !important;
}

.trainer-po-up-header {
    border-bottom: 1px solid #DADADA !important;
}

.trainer-po-up-header h5 a {
    color: #000000 !important;
}

.scroolable-collapse::-webkit-scrollbar {
    width: 5px;
}

.scroolable-collapse::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.scroolable-collapse::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

.scroolable-collapse::-webkit-scrollbar-thumb:hover {
    background: #889;
}

.ui-state-disabled span {
    color: gray !important;
    font-size: 0.875rem !important;
}

.header-prof-dow a::after {
    display: none;
}

.table-pagina-div {
    background-color: #fff;
    border-radius: 10px;
    padding-bottom: 10px;
    -webkit-box-shadow: 0px 0px 52px -21px rgba(0, 0, 0, 0.18);
    -moz-box-shadow: 0px 0px 52px -21px rgba(0, 0, 0, 0.18);
    box-shadow: 0px 0px 52px -21px rgba(0, 0, 0, 0.18);
}

.dark-mode .page-item.active .page-link,
.dark-mode .page-item:not(.active) .page-link {
    background: transparent;
    border: transparent;
}

.table-pagina-div .pagination-grid {
    margin-top: 1rem;
}

.go-back-arr-btn {
    background: transparent;
    border: none;
    color: #0047FF;
    padding: 6px 0;
    font-weight: 500;
    position: relative;
    transition: 0.3s ease-in-out;
}

.go-back-arr-btn:hover {
    color: #F88D31;
}

@keyframes slide {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-5px);
    }
}

.go-back-arr-btn:hover i {
    animation: slide 0.6s infinite;
}


.inner-pag-bredscrum {
    display: flex;
    align-items: center;
}

.inner-pag-bredscrum li {
    font-size: 14px;
    font-weight: 500;
}
.leads-data-bx{
    padding: 5px 0;
}
.leads-data-bx table {
    padding: 10px;
}

.leads-data-bx table tr th {
    padding-left: 0;
    font-weight: 600;
    text-transform: capitalize;
}

.leads-data-bx table tr td {
    text-transform: capitalize;
}

.header_nav_icon .badge {
    display: flex;
    padding: .35em .65em;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
}
.header_nav_icon svg{
    /* margin-top: 6px; */
    /* margin-right: 4px; */
}
.read_all_notii{
    color: #007bff !important;
    font-size: 14px;
}
.view_all_notii{
    color: #EA0202 !important;
    font-weight: 600;
}


.upload-direct-opt {
    cursor: pointer;
}

/* trainer dashboard */
.trainer-dashboard {
    width: 100%;
    display: flex;
    border: 1px solid #E8E8E8;
    background-color: white;
    padding: 15px;
    border-radius: 10px;
    flex-wrap: wrap;
    position: relative;
}
.set_trainer_profile{
    width: 20%;
}

.trainer-profile-name {
    /* width: 20%; */
    background-color: white;
    border-right: 1px solid #D1D1D1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.trainer-profile-photo {
    width: 100%;
    text-align: center;
}

.trainer-profile-photo img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 1px solid #CECECE;
}

.trainer-name-tech {
    text-align: center;
}

.trainer-name-tech p {
    margin-bottom: 0;
}

.trainer-name-tech p:first-child {
    color: #000000;
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
}

.trainer-name-tech p:nth-child(2) {
    color: #7D7D7D;
    font-size: 15px;
}
.set_trainer_data{
    width: 80%;
    display: flex;
}

.trainer-profile-details {
    width: 30%;
    padding: 2px 0;
    border-right: 1px solid #D1D1D1;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    padding: 15px;
}

.trainer-profile-details-new {
    width: 50%;
    padding: 2px 0;
    /* border-right: 1px solid #CECECE; */
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    padding: 15px;
}

.trainer-profile-details-list {
    display: flex;
}

.trainer-profile-details-list p {
    margin-bottom: 0;
}

.left-trainer-profile {
    width: 45%;
}

.left-trainer-profile p {
    font-size: 15px;
    font-weight: 600;
}

.right-trainer-profile {
    width: 55%;
    display: flex;
    justify-content: start;
    align-items: center;
    text-align: justify;
}

.right-trainer-profile p {
    font-size: 14px;
    font-weight: 400;
    color: #7A7979;
    word-break: break-all;
    white-space: normal;
}

.left-trainer-profile-new {
    width: 25%;
}

.left-trainer-profile-new p {
    font-size: 15px;
    font-weight: 600;
}

.right-trainer-profile-new {
    width: 75%;
    display: flex;
    justify-content: start;
    align-items: center;
    text-align: justify;
}

.right-trainer-profile-new p {
    font-size: 14px;
    font-weight: 400;
    color: #7A7979;
}

.trainer-about-you {
    width: 100%;
    border-top: 1px solid #D1D1D1;
    margin-top: 15px;
}

.trainer-about-you p {
    margin-bottom: 0;
}

.trainer-about-you p:first-child {
    font-weight: 600;
    font-size: 15px;
}

.trainer-about-you p:nth-child(2) {
    font-size: 14px;
    color: #7A7979;
    text-align: justify;
}

.trainer-edit-profile {
    position: absolute;
    top: 7px;
    right: 7px;
}

.trainer-edit-profile button {
    width: 35px;
    height: 35px;
    border: none;
    outline: none;
    border-radius: 50%;
    background-color: #F88D31;
    display: flex;
    justify-content: center;
    align-items: center;
}

.trainer-edit-profile a {
    width: 35px;
    height: 35px;
    border: none;
    outline: none;
    border-radius: 50%;
    background-color: #F88D31;
    display: flex;
    justify-content: center;
    align-items: center;
}

.trainer-cms-profile {
    position: absolute;
    top: 7px;
    right: 7px;
}

.trainer-cms-profile button {
    width: 35px;
    height: 35px;
    border: none;
    outline: none;
    border-radius: 50%;
    background-color: #F88D31;
    display: flex;
    justify-content: center;
    align-items: center;
}

.trainer-cms-profile a {
    width: 35px;
    height: 35px;
    border: none;
    outline: none;
    border-radius: 50%;
    background-color: #F88D31;
    display: flex;
    justify-content: center;
    align-items: center;
}

.trainer-profile-status p {
    color: #25BB00 !important
}

.trainer-profile-inactivestatus p {
    color: red !important
}

.save-details-trainer-footer {
    width: 100%;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.save-details-trainer-footer a button {
    border: none;
    outline: none;
    background-color: #F88D31;
    padding: 8px 24px;
    color: white;
    border-radius: 10px;
    width: 250px;
}

.uploaded-img-prev,
.uploaded-img-prev img {
    width: 100%;
    margin-bottom: 0;
}

.uploaded-img-prev {
    height: 65px;
    border: 1px solid #e9e9e9;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uploaded-img-prev img {
    height: 80px;
    overflow: hidden;
    object-fit: contain;
    width: 100%;
    border: none;
    margin-bottom: 0 !important;
}

.upload-logo-input,
.upload-logo-input input {
    height: 100%;
    text-transform: capitalize;
}

.enable-check-smtp span {
    font-weight: 600;
    width: 100%;
    display: block;
}

.enable-check-smtp .sub-check label {
    padding-left: 0px;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
}

.ip-addresses-container .form-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px !important;
}

.ip-address .form-item {
    width: 85%;
}

.ip-addresses-container .form-item input {
    width: 85%;
}

.add-btn-for-module {
    cursor: pointer;
}

.add-btn-for-modules1 {
    cursor: pointer;
}

.add-btn-for-module1 {
    cursor: pointer;
}

.add-btn-for-module2 {
    cursor: pointer;
}

.add-btn-for-module-que {
    cursor: pointer;
}

.remove-btn {
    cursor: pointer;
    font-weight: 600;
}

/* management section */


.management-section {
    border: 1px solid #E8E8E8;
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    height: max-content;
    background-color: white;
}

.management-section {
    width: 100%;
}

.management-rules p {
    text-align: justify;
}

.management-section p {
    margin-bottom: 0;
    font-size: 14px;
}

.management-section a {
    text-decoration: underline !important;
    padding: 5px;
    font-weight: normal !important;
}

.managment-name p {
    font-weight: 500;
}

.trainerr-name p {
    font-weight: 500;
}

.management-query a {
    color: #000000 !important;
    font-weight: 500 !important;
}

/* timeline assign  */
.trainee-assign-team {
    display: flex;
    padding: 5px 0;
}

.trainee-assign-team p {
    margin-bottom: 0;
}

.trainee-assign-team-name {
    width: 40%;
    margin-right: 5px;
}

.trainee-assign-team-name p {
    font-size: 13px;
    font-weight: 600;
}
.assign_trainer_scrolll{
    padding: 10px;
    border: 1px solid #f7f7f7;
    display: flex;
    width: 60%;
}

.trainee-assign-timeline {
    display: flex;
    /* align-items: center; */
    /* height: 160px; */
    /* overflow: auto; */
    /* padding-right: 10px; */
    /* padding-left: 10px; */
    /* margin-top: 10px; */
    /* margin-bottom: 10px; */
    /* width: 55%; */
    /* height: 140px; */
    /* overflow: auto; */
    /* padding-left: 5px; */
}

.trainee-assign-timeline .hr-divider {
    width: 3px;
    height: 100%;
    border-radius: 10px;
    background-color: #D4D4D4;
    margin-right: 10px;
}

.trainee-assign-timeline .hr-name {
    display: flex;
    flex-direction: column;
}

.trainee-assign-timeline .hr-name p {
    font-size: 13px;
    font-weight: 500;
    color: #7A7979;
    margin-bottom: 10px;
    position: relative;
}

.active-trainer::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: green;
    border-radius: 50%;
    top: 8px;
    left: -15px;
}
.secondary-trainer::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: blue;
    border-radius: 50%;
    top: 8px;
    left: -15px;
}
.onrelif-trainer::before{
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: orange;
    border-radius: 50%;
    top: 8px;
    left: -15px;
}
.onchanrge-trainer::before{
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: orange;
    border-radius: 50%;
    top: 8px;
    left: -15px;
}

.in-active-trainer::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
    top: 8px;
    left: -15px;
}

.empuser_active::before{
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #b640b6;
    border-radius: 50%;
    top: 8px;
    left: -15px;
}

.work-progres-division {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.ref-tech-division {
    width: 28%;
    /* border: 1px solid; */
    /* height: 360px; */
    /* overflow: auto; */
    margin: 5px 8px 5px 0;
}

.trainee-firstt-tech {
    padding: 5px 10px;
}

.trainee-firstt-tech p {
    margin-bottom: 0;
    font-weight: 600;
}


.trainee-not-title {
    padding: 5px 10px;
}

.trainee-not-title p {
    margin-bottom: 0;
    font-weight: 600;
}

.not-tech-sel-box {
    width: 100%;
}

.trainee-course-not-assigned p {
    color: red;
    padding: 10px;
    text-align: center;
    margin-bottom: 0;
}

.trainee-vertical-divideer {
    width: 100%;
    height: 210px;
    display: flex;
    justify-content: center;
}

.vertical-center-divider-trainee {
    width: 3px;
    background-color: #D2D2D2;
    height: 100%;
    border-radius: 10px;
    position: relative;
}

.trainee-point-one {
    width: 12px;
    height: 12px;
    background-color: #D2D2D2;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: -5px;
}

.trainee-point-two {
    width: 12px;
    height: 12px;
    background-color: #D2D2D2;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    right: -5px;
}






.ref-tech-division .tech-scrollable {
    width: 100%;
    height: 360px;
    overflow: auto;
}

.progree-trainee-notification .trainee-notification-scrollable {
    width: 100%;
    max-height: 353px;
    overflow: auto;
    padding: 0 4px 0 0;
}

.ref-tech-division .language-seleceted-tech {
    display: flex;
    width: 100%;
    height: 110px;
    background-color: white;
    justify-content: center;
}

.give-time {
    width: 45%;
    position: relative;
}

/* .tech-timiline {
    margin-bottom: 0;
    position: relative;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    word-break: normal; 
    overflow-wrap: break-word; 
    white-space: normal;
} */

/* new hover tech */
.tech-timiline {
    margin-bottom: 0;
    position: relative;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal;
    overflow-x: unset;
    overflow-y: clip;
    height: 45px;

    padding-right: 10px;
    cursor: pointer;
    text-overflow: ellipsis;
}

.tech-hover:hover .tech-timiline {
    overflow: visible;
    background-color: white;
    border-radius: 4px;
    color: black;
    border-bottom: 2px solid gray;
    position: relative;
    z-index: 99;
    height: auto;
    cursor: pointer;
}

.tech-timiline:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: gainsboro;
    border-radius: 50%;
    top: 6px;
    right: -8px;
}

.tech-timiline.active:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #25BB00;
    border-radius: 50%;
    top: 6px;
    right: -8px;
}

.tech-time {
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: 35px;
    margin-top: 18px;
    right: 18px;
}

.tech-time span {
    font-size: 11px;
    /* text-align: start; */
    /* font-weight: 500; */
    /* line-height: 14px; */
}

.take-time {
    width: 45%;
    position: relative;
    display: flex;
    justify-content: start;
    align-items: center;
}

/* trainee-working-icon-division */
.trainee-working-icon-division {
    width: 40%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.working-icon svg {
    width: 35px;
    height: 35px;
}

.working-icon svg path {
    fill: #FFA500;
}



/* trainee-working-icon-text-division */

.trainee-working-icon-text-division {
    display: flex;
    justify-content: center;
    align-items: center;
}

.vertical-text p {
    margin-bottom: 0;
    /* Negative margin to bring letters closer */
    line-height: 12px;
    /* Adjust the line height */
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: #F88D31;
    letter-spacing: 0;
    /* Adjust if needed */
}

.working-idon-text {
    display: flex;
    justify-content: center;
    align-items: center;
}

.working-icon-new svg {
    width: 35px;
    height: 35px;
}

.working-icon-new svg path {
    fill: #FFA500;
}


.trainee-working-division {
    /* padding: 0 10px;
    margin-top: 12px; */
    position: relative;
    top: 10px;
    left: 25px;
}

.trinee-work-text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.trainee-svg-icon {}

.trainee-working-text {}

.trainee-working-text p {
    margin-bottom: 0;
    font-size: 12px;
    color: #FFA500;
    /* font-weight: 500; */
    padding: 5px 0;
}

.trainee-Freez-division {
    /* padding: 0 10px; */
    /* margin-top: 12px; */
    position: relative;
    top: 10px;
    left: 25px;
}

.trinee-Freez-text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.trainee-svg-icon-Freez {}

.trainee-Freez-text {}

.trainee-Freez-text p {
    margin-bottom: 0;
    font-size: 12px;
    color: #EA0202;
    /* font-weight: 500; */
    padding: 5px 0;
}


/* trainee-stop-icon-division */
.trainee-stop-icon-division {
    width: 40%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-left: 4px;
}

.stop-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.stop-icon svg {
    width: 35px;
    height: 35px;
}

.stop-icon svg path {
    fill: #ea0202;
}

.stop-text p {
    color: #ea0202;
    font-size: 13px;
    margin-bottom: 0;
    font-weight: 500;
}

.tech-timeout {
    display: flex;
    /* justify-content: end; */
    /* flex-direction: column; */
    /* position: absolute; */
    /* top: 35px; */
    position: relative;
    top: 6px;
    left: 10px;
}

.tech-timeout span {
    font-size: 11px;
    /* text-align: start; */
    /* font-weight: 500; */
}



.tech-time-not-done span {
    color: #EA0202;
}

.trainee-training-stop span {
    color: #EA0202;
}

.center-divider {
    width: 4px;
    background-color: gainsboro;
    border-radius: 10px;
    height: 100%;
    margin-top: 6px;
}

.center-divider.active {
    width: 4px;
    background-color: #25BB00;
    border-radius: 10px;
    height: 100%;
    margin-top: 6px;
}



/* .tech-timiline:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: gainsboro;
    border-radius: 50%;
    top: 0px;
    right: -8px;
} */
.tech-timiline.work-in-progress:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: orange;
    border-radius: 50%;
    top: 6px;
    right: -8px;
}

.center-divider.work-in-progress {
    width: 4px;
    background-color: orange;
    border-radius: 10px;
    height: 100%;
    margin-top: 6px;
}








.trainee-calander {
    width: 38%;
    /* margin: 0 auto; */
}

.progree-trainee-notification {
    width: 28%;
    margin: 0 0 0 8px;
}

.trainee-chnage-tech-division {
    width: 100%;
}

.trainee-chnage-tech-text {
    padding: 10px;
    font-weight: normal;
    border-top: 2px dashed #F88D31;
    margin: 15px 0;
}

.trainee-chnage-tech-text p span {
    color: grey;
    font-size: 14px;
    margin: 0 5px;
}

.trainee-chnage-tech-text p:nth-child(1) {
    font-size: 16px;
    font-weight: 500;
    padding: 5px 0;
}

.trainee-chnage-tech-text p:nth-child(2) {
    font-size: 14px;
    font-weight: 500;
    padding: 5px 0;
}

.trainee-chnage-tech-text p {
    margin-bottom: 0;
}

.horizontal-trainee-chnage-line {
    width: 100%;
    position: relative;
    padding: 8px 0;
}

.horizontal-trainee-chnage-line::before {
    width: 100%;
    content: "";
    background-color: #c5c5c5;
    position: absolute;
    height: 2px;
    top: 0;
    left: 0;
    background-image: linear-gradient(to right, #f9f9f9, transparent, #f9f9f9);
    /* background-image: linear-gradient(to right, transparent, #f9f9f9, transparent); */
}

.main-division-tech-change {
    width: 100%;
    padding: 10px;
    display: flex;
    overflow-x: auto;
}

.c-tech {
    width: 25%;
    min-width: 210px;
}

.c-divider {
    width: 100%;
    height: 4px;
    background-color: gainsboro;
    border-radius: 10px;
}

.c-divider.active {
    background-color: #25BB00;
}

.c-divider.work-in-progress {
    background-color: orange;
}

.c-divider.inactive {
    background-color: #ff5c5c;
}

.c-take-time {
    display: flex;
    padding: 10px 0;
}

.c-tech-name {
    width: 50%;
    text-overflow: ellipsis;
}

.c-tech-name .c-course-name {
    font-size: 15px;
    font-weight: 500;
    position: relative;
}

.c-tech-name .c-course-name::before {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    background-color: gainsboro;
    border-radius: 50%;
    top: -17px;
    left: 0;
}

.c-tech-name .c-course-name.active::before {
    background-color: #25BB00;
}

.c-tech-name .c-course-name.inactive::before {
    background-color: #ff5c5c;
}

.c-tech-name .c-course-name.work-in-progress::before {
    background-color: orange;
}

.c-tech-time {
    width: 50%;
    display: flex;
    /* justify-content: center; */
    justify-content: start;
    align-items: start;
    /* flex-direction: column; */
}

.c-tech-name p,
.c-tech-time p {
    margin-bottom: 0;
}

.c-tech-time p:nth-child(1) {
    font-size: 12px;
    /* font-weight: 500; */
}

.c-tech-time p:nth-child(2) {
    font-size: 11px;
    font-weight: 500;
}

.taken-red-time {
    color: red;
}

.taken-green-time {
    color: #25BB00;
}

.c-give-time {
    /* text-align: center; */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
}

.trainee-stop-icon-division {
    width: 40%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-left: 4px;
}

.stop-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.stop-icon svg {
    width: 35px;
    height: 35px;
}

.stop-icon svg path {
    fill: #ea0202;
}

.stop-text p {
    color: #ea0202;
    font-size: 13px;
    margin-bottom: 0;
    font-weight: 500;
}


.trainee-chaneg-stop-division {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stop-change-icon svg {
    width: 35px;
    height: 35px;
}

.stop-change-text p {
    color: #ea0202;
    font-size: 13px;
    margin-bottom: 0;
    font-weight: 500;
}


.trainee-freezed-stop-division {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.freeze-change-icon img {
    margin: 0 5px;
}

.freeze-change-text p {
    color: #ea0202 !important;
    font-size: 14px !important;
    margin-bottom: 0 !important;
    font-weight: normal !important;
}

.c-give-time p {
    margin-bottom: 0;
}

.c-give-time p:nth-child(1) {
    font-size: 12px;
    font-weight: 500;
}

.c-give-time p:nth-child(2) {
    font-size: 11px;
    font-weight: bold;
}



















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

.progress-line p {
    margin-bottom: 0;
    font-weight: 500;
    font-size: 12px;
}

.progress-line p {
    margin-bottom: 0;
    font-weight: 500;
    font-size: 12px;
}

.progress-line button {
    border: none;
    outline: none;
    color: #0075FF;
    background-color: transparent;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.dash_trainee_noti {
    font-size: 13px;
}

.progress-line .view-all-notification-svg-icon {
    display: inline-block;
    transition: transform 0.3s ease-in-out;
    margin-left: 2px;
}

/* Rotate the SVG icon when the button is hovered */
.progress-line button:hover .view-all-notification-svg-icon {
    transform: rotate(90deg);
}

.progress-notice {
    background-color: #F9F9F9;
    padding: 4px;
    border: 1px solid #CECECE;
    border-radius: 5px;
    margin: 5px 0;
    cursor: pointer;
}

.progress-notice p {
    margin-bottom: 0;
    padding: 2px 0;
}

.progress-notice p:nth-child(1) {
    font-size: 13px;
    font-weight: bold;
    color: #F88D31;
}

.progress-notice p:nth-child(2) {
    font-size: 14px;
    color: #000000;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-notice p:nth-child(3) {
    font-weight: normal;
    font-size: 10px;
    color: #767676;
    font-style: italic;
}

.progress-notice-new p:nth-child(1) {
    color: red;
}

/* radio button title */
.radiobtn-main-title p {
    margin-bottom: 0;
    font-weight: 500;
    font-size: 17px;
}

.two-radio-btn .q-a .form-check-label {
    color: gray;
}

.trainee-current-team-member div p {
    margin-bottom: 0;
    font-weight: 500;
}

/* add trainer design */
.image-seen {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-seen img {
    width: 120px;
    height: 120px;
    border: 1px solid #D6D6D6;
    border-radius: 50%;
}

.text-image p {
    margin-bottom: 0;
}

.text-image {
    height: 92px;
    padding: 10px 50px;
    text-align: center;
    border: 2px dashed #D6D6D6;
    color: #838383;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.from-to-division {
    display: flex;
}

.under_span_one {
    width: 85px;
    padding: 12px 0;
    display: flex;
    justify-content: center;
}

.under_span_two {
    width: 100px;
    padding: 15px 5px 13px 0;
    display: flex;
    justify-content: center;
}

.attendance-textarea textarea {
    min-height: 0 !important;
    height: 60px !important;
}

/* trainer attedance module CSS */
.trainee-leave-attendance-history {
    color: #0075FF;
}

.trainee-attendance-table .trainee-present {
    background-color: #b8e86c;
}

.trainee-attendance-table .trainee-absent {
    background-color:  #f39c9c;
}

.trainee-attendance-table .trainee-late {
    background-color: #47E320;
}

.trainee-attendance-table .trainee-pending {
    background-color: #f9ff83;
}

.trainee-attendance-table .trainee-time-not-match {
    background-color: #efa530;
}

.trainee-attendance-table .trainee-on-leave {
    background-color: #b3beb0;
}


/* Apply the same background color to the last td based on the tr class */
.trainee-attendance-table .trainee-present td:last-child {
    background-color: #b8e86c !important;
}

.trainee-attendance-table .trainee-absent td:last-child {
    background-color: #f39c9c !important;
}

.trainee-attendance-table .trainee-late td:last-child {
    background-color: #47E320 !important;
}

.trainee-attendance-table .trainee-pending td:last-child {
    background-color: #f9ff83 !important;
}

.trainee-attendance-table .trainee-time-not-match td:last-child {
    background-color: #efa530 !important;
}

.trainee-attendance-table .trainee-on-leave td:last-child {
    background-color: #b3beb0 !important;
}

/* Ensure last td remains sticky and overflows correctly */
.fixed-action-column-tbody-bg {
    position: sticky;
    right: 0;
    z-index: 999;
}

.admin-moduleprogress-table tr.Moduleworkingstatus {
    background-color: #87cf87;
}
.admin-moduleprogress-table tr.Modulecompletestatus {
    background-color: #c1b1b1;
}
































.tarinee-holiday-table .holiday-one {
    background-color: #7AEA5E;
    border-bottom: 3px solid white;
}

.tarinee-holiday-table .holiday-two {
    /* background-color: #9FF689; */
     background-color: #7AEA5E;
    border-bottom: 3px solid white;
}
.tarinee-holiday-table .holiday-three {
    background-color: #C8FFBA;
    border-bottom: 3px solid white;
}

.tarinee-holiday-table .holiday-four {
    background-color: #DFFFD7;
    border-bottom: 3px solid white;
}

.tarinee-holiday-table .holiday-five {
    background-color: #ECFFE8;
    border-bottom: 3px solid white;
}


.tarinee-holiday-table .holiday-one td:last-child {
    background-color: #7AEA5E !important;
}

.tarinee-holiday-table .holiday-two td:last-child {
    /* background-color: #9FF689 !important; */
    background-color: #7AEA5E !important;
}

.tarinee-holiday-table .holiday-three td:last-child {
    background-color: #C8FFBA !important;
}

.tarinee-holiday-table .holiday-four td:last-child {
    background-color: #DFFFD7 !important;
}

.tarinee-holiday-table .holiday-five td:last-child {
    background-color: #ECFFE8 !important;
}
/* Ensure last td remains sticky and overflows correctly */
.fixed-action-column-tbody-bg {
    position: sticky;
    right: 0;
    z-index: 999;
    background-color: white !important;
}



/* for trainee tr color */
.trainee-prejoing-table .pre-one {
    background-color: #7AEA5E;
    border-bottom: 2px solid white;
}

.trainer_my_trainee_table .assign_trainee_list_remove {
    background-color: #ed5d5d;
    border-bottom: 2px solid white;
}

.trainer_my_trainee_table .assign_trainee_list {
    background-color: #91baf7;
    border-bottom: 2px solid white;
}
.tarinee-assign-table .assign-one {
    background-color: #F9FF83;
    border-bottom: 2px solid white;
}
.tarinee-assign-table .assign_trainee_list {
    background-color: #91baf7;
    border-bottom: 2px solid white;
}

.trainee-prejoing-table .pre-two {
    background-color: #9FF689;
    border-bottom: 2px solid white;
}

.trainee-prejoing-table .pre-three {
    background-color: #C8FFBA;
    border-bottom: 2px solid white;
}

.trainee-prejoing-table .pre-four {
    background-color: #DFFFD7;
    border-bottom: 2px solid white;
}

.trainee-prejoing-table .pre-five {
    background-color: #ECFFE8;
    border-bottom: 2px solid white;
}
.trainee-prejoing-table .pre-six {
    background-color: #ffd6d6;
    border-bottom: 2px solid white;
}

/* Apply the same background color to the last td based on the tr class */
.trainee-prejoing-table .pre-one td:last-child {
    background-color: #7AEA5E !important;
}


.trainer_my_trainee_table .assign_trainee_list_remove td:last-child {
    background-color: #ed5d5d !important;
}
.trainer_my_trainee_table .assign_trainee_list td:last-child {
    background-color: #91baf7 !important;
}



.tarinee-assign-table .assign-one td:last-child {
    background-color: #F9FF83 !important;
}
.tarinee-assign-table .assign_trainee_list td:last-child {
    background-color: #91baf7 !important;
}
.tarinee-assign-table .assign_trainee_list_remove td:last-child {
    background-color: #ed5d5d !important;
}
.completed_course td:last-child{
    background-color: #b2d8f3 !important;
}

.trainee-prejoing-table .pre-two td:last-child {
    background-color: #9FF689 !important;
}

.trainee-prejoing-table .pre-three td:last-child {
    background-color: #C8FFBA !important;
}

.trainee-prejoing-table .pre-four td:last-child {
    background-color: #DFFFD7 !important;
}

.trainee-prejoing-table .pre-five td:last-child {
    background-color: #ECFFE8 !important;
}

.trainee-prejoing-table .pre-six td:last-child {
    background-color: #ffd6d6 !important;
}

.trainee-module-table .module_stop {
    background-color: #FFDBDB;
    border-bottom: 2px solid white;
}
.trainee-module-table .module_completed {
    background-color: #BDF06F;
    border-bottom: 2px solid white;
}
.trainee-module-table .trainer_completed {
    background-color: #f5bf5c;
    border-bottom: 2px solid white;
}


.trainee-module-table .module_working {
    background-color: #FFFF87;
    border-bottom: 2px solid white;
}

.trainee-module-table .trainer_rejected {
    background-color: #e97777;
    border-bottom: 2px solid white;
}


.trainee-module-table .module_completed td:last-child {
    background-color: #BDF06F !important;
}
.trainee-module-table .module_stop td:last-child {
    background-color: #FFDBDB !important;
}
.trainee-module-table .trainer_completed td:last-child {
    background-color: #f5bf5c !important;
}
.trainee-module-table .module_working td:last-child {
    background-color: #FFFF87 !important;
}
.trainee-module-table .trainer_rejected td:last-child {
    background-color: #e97777 !important;
}
/* Ensure last td remains sticky and overflows correctly */
.fixed-action-column-tbody-bg {
    position: sticky;
    right: 0;
    z-index: 999;
}
.pipe-divider span {
    margin: 0 2px;
}

.icon-with-pagiination {
    background-color: white;
    width: 100%;
    padding: 10px 5px;
}

.nav-pagination,
.color-summary {
    /* width: 50%; */
    display: flex;
}

.present-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.present-summary div {
    margin: 0 4px;
}

.present-summary .present-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.present-summary .present-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.present-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: rgb(146 219 29 / 65%);
    border-radius: 5px;
    padding: 5px;
}

.unhold-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.unhold-summary div {
    margin: 0 4px;
}

.unhold-summary .unhold-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.unhold-summary .unhold-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.unhold-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid #e1b2b2;
    background-color: #e1b2b2;
    border-radius: 5px;
    padding: 5px;
}









/* duplicate data start */
.tarinee-holiday-table .holiday-one {
    background-color: #7AEA5E;
    border-bottom: 3px solid white;
}

.tarinee-holiday-table .holiday-two {
    /* background-color: #9FF689; */
     background-color: #7AEA5E;
    border-bottom: 3px solid white;
}
.tarinee-holiday-table .holiday-three {
    background-color: #C8FFBA;
    border-bottom: 3px solid white;
}

.tarinee-holiday-table .holiday-four {
    background-color: #DFFFD7;
    border-bottom: 3px solid white;
}

.tarinee-holiday-table .holiday-five {
    background-color: #ECFFE8;
    border-bottom: 3px solid white;
}
/* duplicate data end */
























.past_date-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.past_date-summary div {
    margin: 0 4px;
}

.past_date-summary .past_date-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.past_date-summary .past_date-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.past_date-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #FFD6D6;
    border-radius: 5px;
    padding: 5px;
}







.holii_one-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.holii_one-summary div {
    margin: 0 4px;
}

.holii_one-summary .holii_one-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.holii_one-summary .holii_one-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.holii_one-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #7AEA5E;
    border-radius: 5px;
    padding: 5px;
}


.trainerr_one-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.trainerr_one-summary div {
    margin: 0 4px;
}

.trainerr_one-summary .trainerr_one-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.trainerr_one-summary .trainerr_one-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.trainerr_one-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #B3BEB0;
    border-radius: 5px;
    padding: 5px;
}




.trainer_one-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.trainer_one-summary div {
    margin: 0 4px;
}

.trainer_one-summary .trainer_one-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.trainer_one-summary .trainer_one-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.trainer_one-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #91baf7;
    border-radius: 5px;
    padding: 5px;
}
.trainer_two-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.trainer_two-summary div {
    margin: 0 4px;
}

.trainer_two-summary .trainer_two-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.trainer_two-summary .trainer_two-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.trainer_two-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #ED5D5D;
    border-radius: 5px;
    padding: 5px;
}
.trainer_three-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.trainer_three-summary div {
    margin: 0 4px;
}

.trainer_three-summary .trainer_three-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.trainer_three-summary .trainer_three-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.trainer_three-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #aab2b9;
    border-radius: 5px;
    padding: 5px;
}






.have_query-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.have_query-summary div {
    margin: 0 4px;
}

.have_query-summary .have_query-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.have_query-summary .have_query-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.have_query-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #AEB9C3;
    border-radius: 5px;
    padding: 5px;
}

.holii_two-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.holii_two-summary div {
    margin: 0 4px;
}

.holii_two-summary .holii_two-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.holii_two-summary .holii_two-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.holii_two-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #DFFFD7;
    border-radius: 5px;
    padding: 5px;
}

.module_two-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.module_two-summary div {
    margin: 0 4px;
}

.module_two-summary .module_two-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.module_two-summary .module_two-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.module_two-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #BDF06F;
    border-radius: 5px;
    padding: 5px;
}
.module_three-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.module_three-summary div {
    margin: 0 4px;
}

.module_three-summary .module_three-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.module_three-summary .module_three-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.module_three-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #FFDBDB;
    border-radius: 5px;
    padding: 5px;
}














/* four */
.module_fourr-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.module_fourr-summary div {
    margin: 0 4px;
}

.module_fourr-summary .module_fourr-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.module_fourr-summary .module_fourr-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.module_fourr-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #f5bf5c;
    border-radius: 5px;
    padding: 5px;
}



/* five */
.module_five-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.module_five-summary div {
    margin: 0 4px;
}

.module_five-summary .module_five-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.module_five-summary .module_five-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.module_five-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #e97777;
    border-radius: 5px;
    padding: 5px;
}















.module_one-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.module_one-summary div {
    margin: 0 4px;
}

.module_one-summary .module_one-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.module_one-summary .module_one-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.module_one-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #FFFF87;
    border-radius: 5px;
    padding: 5px;
}

.trainee_fees_one_summary{
    display: flex;
    justify-content: start;
    align-items: center;
}
.trainee_fees_one_summary div{
    margin: 0 4px;
}

.trainee_fees_one_summary .trainee_fees_status{
    display: flex;
    justify-content: center;
    align-items: center;
}
.trainee_fees_one_summary .trainee_fees_status p{
   margin-bottom: 0;
   font-size: 13px;
}
.trainee_feees_boxx{
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #BDF06F;
    border-radius: 5px;
    padding: 5px;
}





.trainee_fees_two_summary{
    display: flex;
    justify-content: start;
    align-items: center;
}
.trainee_fees_two_summary div{
    margin: 0 4px;
}

.trainee_fees_two_summary .trainee_fees_status_two{
    display: flex;
    justify-content: center;
    align-items: center;
}
.trainee_fees_two_summary .trainee_fees_status_two p{
   margin-bottom: 0;
   font-size: 13px;
}
.trainee_feees_boxx_two{
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #FFE3AE;
    border-radius: 5px;
    padding: 5px;
}



.trainee_fees_three_summary{
    display: flex;
    justify-content: start;
    align-items: center;
}
.trainee_fees_three_summary div{
    margin: 0 4px;
}

.trainee_fees_three_summary .trainee_fees_status_three{
    display: flex;
    justify-content: center;
    align-items: center;
}
.trainee_fees_three_summary .trainee_fees_status_three p{
   margin-bottom: 0;
   font-size: 13px;
}
.trainee_feees_boxx_three{
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #C2FFFF;
    border-radius: 5px;
    padding: 5px;
}


.trainee_fees_four_summary{
    display: flex;
    justify-content: start;
    align-items: center;
}
.trainee_fees_four_summary div{
    margin: 0 4px;
}

.trainee_fees_four_summary .trainee_fees_status_four{
    display: flex;
    justify-content: center;
    align-items: center;
}
.trainee_fees_four_summary .trainee_fees_status_four p{
   margin-bottom: 0;
   font-size: 13px;
}
.trainee_feees_boxx_four{
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #FFCECE;
    border-radius: 5px;
    padding: 5px;
}

.trainee_feees_boxx_five{
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #c7c7c7;
    border-radius: 5px;
    padding: 5px;
}








.green_one-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.green_one-summary div {
    margin: 0 4px;
}

.green_one-summary .green_one-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.green_one-summary .green_one-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.green_one-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #7AEA5E;
    border-radius: 5px;
    padding: 5px;
}

.green_two-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.green_two-summary div {
    margin: 0 4px;
}

.green_two-summary .green_two-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.green_two-summary .green_two-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.green_two-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #DFFFD7;
    border-radius: 5px;
    padding: 5px;
}





.assign-one-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.assign-one-summary div {
    margin: 0 4px;
}

.assign-one-summary .assign-one-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.assign-one-summary .assign-one-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.assign-one-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #F9FF83;
    border-radius: 5px;
    padding: 5px;
}


.assign-two-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.assign-two-summary div {
    margin: 0 4px;
}

.assign-two-summary .assign-two-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.assign-two-summary .assign-two-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.assign-two-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #ED5D5D;
    border-radius: 5px;
    padding: 5px;
}


.assign-three-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.assign-three-summary div {
    margin: 0 4px;
}

.assign-three-summary .assign-three-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.assign-three-summary .assign-three-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.assign-three-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #91baf7;
    border-radius: 5px;
    padding: 5px;
}





























.absent-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.absent-summary div {
    margin: 0 4px;
}

.absent-summary .absent-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.absent-summary .absent-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.absent-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: rgb(225 0 0 / 39%);
    border-radius: 5px;
    padding: 5px;
}

.late-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.late-summary div {
    margin: 0 4px;
}

.late-summary .late-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.late-summary .late-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.late-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: rgb(71 227 32 / 68%);
    border-radius: 5px;
    padding: 5px;
}

.pending-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.pending-summary div {
    margin: 0 4px;
}

.pending-summary .pending-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pending-summary .pending-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.pending-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: rgb(246 255 67 / 66%);
    border-radius: 5px;
    padding: 5px;
}

.time-not-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.time-not-summary div {
    margin: 0 4px;
}

.time-not-summary .time-not-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.time-not-summary .time-not-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.time-not-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: #efa530;
    border-radius: 5px;
    padding: 5px;
}

.onleave-summary {
    display: flex;
    justify-content: start;
    align-items: center;
}

.onleave-summary div {
    margin: 0 4px;
}

.onleave-summary .onleave-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.onleave-summary .onleave-status p {
    margin-bottom: 0;
    font-size: 13px;
}

.onleave-boxx {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(224, 224, 224, 1);
    background-color: rgb(138 155 134 / 65%);
    border-radius: 5px;
    padding: 5px;
}

.trainee-if-pending {
    color: #0075FF;
}

.trainee-pending-division {
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid #DADADA;
}

.trainee-information-p {
    color: black;
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
}

.trainee-leave-informationnn p {
    margin-bottom: 0;
    color: #474747;
    font-size: 15px;
}

.trainee-leave-informationnn span:nth-child(odd) {
    color: #000000;
    font-weight: 500;
}

.present-absent-footer {
    width: 100%;
    display: flex;
    justify-content: center;
}

.present-absent-footer button {
    border: 1px solid transparent;
    outline: none;
    color: white;
    margin: 0 5px;
    color: white;
    width: 180px;
    padding: 8px;
    border-radius: 5px;
}

.trainee-pre {
    background-color: #25BB00;
    transition: 0.3s ease-in-out;

}

.trainee-pre:hover {
    background-color: white;
    color: #25BB00;
    border: 1px solid #25BB00;
}

.trainee-abs {
    transition: 0.3s ease-in-out;
    background-color: #EA0202;
}

.trainee-abs:hover {
    background-color: white;
    color: #EA0202;
    border: 1px solid #EA0202;
}


/* trainer attendance css (HTML) leave history */
.special-border-radius-new {
    max-width: 700px !important;
    border-radius: 20px !important;
}

.trainee-leave-info-modal {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.left-trainee-leave-info {
    width: 45%;
    border-right: 2px solid #DEDEDE;
}

.left-trainee-leave-info .left-trainee-profile {
    color: black;
}

.right-trainee-leave-info {
    /* width: 50%; */
    margin: auto;
    padding-top: 14px;
}

/* alt-cal start */
.att-cal {
    position: relative;
    width: 100%;
    border: 1px solid #f3f3f3;
    border-radius: 8px;
    padding: 5px 3px;
    background: radial-gradient(#ffffff, #e1e1e12e);
}
.cal-center{
    justify-content: center !important;
}


.att-cal .calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px 1px;
    justify-items: center;
    height: 235px;
}

.day {
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 11px;
    font-weight: 500;
    padding: 8px;
}

.day,
.header {
    text-align: center;
}

.header {
    background-color: transparent;
    font-weight: 600;
    border: none;
    font-size: 13px;
}

.day:hover {
    background-color: #f3f3f3;
    cursor: pointer;
}

.att-cal .navigation {
    text-align: center;
    margin: 3px 0 5px 0;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 5px 0;
}

.go-today-div {
    text-align: center;
    margin: 0 0 5px 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 0;
}

.att-cal .navigation button,
.att-cal .navigation select {
    margin: 0 3px;

}

.att-cal .navigation button,
.att-cal .navigation select {
    margin: 0px;

}

.att-cal .att-select {
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    transition: all 0.3s ease-in;

}

.att-cal .jump_today {
    border: 1px solid transparent;
    background-color: rgb(37, 187, 0);
    color: white;
    font-size: 13px;
    height: 40px;
    width: 40px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 15%;
    transition: all 0.3s ease-in;
    position: relative;
}

.att-cal .jump_today:hover {
    border: 1px solid rgb(37, 187, 0);
    background-color: white;
    color: rgb(37, 187, 0);

}




.att-cal .jump_today {
    border: 1px solid transparent;
    background-color: rgb(37, 187, 0);
    color: white;
    font-size: 13px;
    height: 40px;
    width: 40px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 15%;
    transition: all 0.3s ease-in;
    position: relative;
}

.att-cal .jump_today:hover {
    border: 1px solid rgb(37, 187, 0);
    background-color: white;
    color: rgb(37, 187, 0);

}

.att-cal .jump_today:hover::after {
    content: "Go Today";
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    background-color: gray;
    color: white;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1;
}

.att-cal .pre_next_month {
    width: 30px;
    height: 30px;
    border-radius: 20%;
    background-color: #fff;
    padding: 8px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in;
}

.att-cal .pre_next_month:hover {
    box-shadow: 0px 0px 5px #F88D31;

}

.pre_next_month i {
    color: #F88D31;
    font-size: 11px;
}

.month-display {
    text-align: center;
    margin-bottom: 10px;
    font-size: 1.2em;
    font-weight: bold;
}

.date-info {
    text-align: center;
    margin: 10px 5px;
    font-weight: bold;
    background-color: #f3f3f3;
    border: 1px solid gainsboro;
    border-radius: 5px;
    padding: 6px;
    font-size: 13px;
    font-weight: 500;
}

.event-marker {
    display: block;
    margin: 2px auto 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.event-marker.absent {
    /* background-color: rgb(225 0 0 / 39%); */
    background-color: red;
}
.event-marker.Hold {
    /* background-color: rgb(225 0 0 / 39%); */
     background-color: #b640b6;
}
.event-marker.course-done {
    background-color: #0095FF;
}

.completed_course {
    background-color: #b2d8f3!important;
}

.calendar>.course-done {
    background-color: #0095FF;
}

.event-marker.present {
    background-color: rgb(146 219 29 / 65%);
}

.event-marker.leave {
    background-color: rgb(138 155 134 / 65%);
}

.event-marker.holiday {
    background-color: rgb(248, 141, 49);
}

.calendar>.absent {
    background-color: rgb(225 0 0 / 39%);
}

.calendar>.present {
    background-color: rgb(146 219 29 / 65%);
}
.calendar>.Hold {
    background-color: #b640b6;
}

.calendar>.leave {
    background-color: rgb(138 155 134 / 65%);
}

.calendar>.holiday {
    background-color: rgb(248, 141, 20);
}

.event-marker.violet {
    background-color: violet;
}

/* alt-cal end */


/* att-cal-new */
.att-cal-new .in-trainee-center {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}


.att-cal-new {
    position: relative;
    width: 100%;
    border: 1px solid #f3f3f3;
    border-radius: 8px;
    padding: 5px 3px;
    background: radial-gradient(#ffffff, #e1e1e12e);
}


.att-cal-new .calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* gap: 2px 1px; */
    justify-items: center;
    height: 235px;
}

.att-cal-new .day {
    border-radius: 50%;
    height: 28px;
    width: 28px;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 0;
}

.day,
.header {
    text-align: center;
}

.header {
    background-color: transparent;
    font-weight: 600;
    border: none;
    font-size: 13px;
}

.day:hover {
    background-color: #f3f3f3;
    cursor: pointer;
}

.att-cal-new .navigation {
    text-align: center;
    margin: 3px 0 5px 0;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 5px 0;
}

.go-today-div {
    text-align: center;
    margin: 0 0 5px 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 0;
}

.att-cal-new .navigation button,
.att-cal-new .navigation select {
    margin: 0 3px;

}

.att-cal-new .navigation button,
.att-cal-new .navigation select {
    margin: 0px 2px;

}

.att-cal-new .att-select {
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    transition: all 0.3s ease-in;

}

.att-cal-new .jump_today {
    border: 1px solid transparent;
    background-color: rgb(37, 187, 0);
    color: white;
    font-size: 13px;
    height: 40px;
    width: 40px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 15%;
    transition: all 0.3s ease-in;
    position: relative;
}

.att-cal-new .jump_today:hover {
    border: 1px solid rgb(37, 187, 0);
    background-color: white;
    color: rgb(37, 187, 0);

}




.att-cal-new .jump_today {
    border: 1px solid transparent;
    background-color: rgb(37, 187, 0);
    color: white;
    font-size: 12px;
    height: 30px;
    width: 30px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 15%;
    transition: all 0.3s ease-in;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.att-cal-new .jump_today:hover {
    border: 1px solid rgb(37, 187, 0);
    background-color: white;
    color: rgb(37, 187, 0);

}

.att-cal-new .jump_today:hover::after {
    content: "Go Today";
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    background-color: gray;
    color: white;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1;
}

.att-cal-new .pre_next_month {
    width: 30px;
    height: 30px;
    border-radius: 20%;
    background-color: #fff;
    padding: 8px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in;
}

.att-cal-new .pre_next_month:hover {
    box-shadow: 0px 0px 5px #F88D31;

}

.pre_next_month i {
    color: #F88D31;
    font-size: 11px;
}

.month-display {
    text-align: center;
    margin-bottom: 10px;
    font-size: 1.2em;
    font-weight: bold;
}

.date-info {
    text-align: center;
    margin: 10px 5px;
    font-weight: bold;
    background-color: #f3f3f3;
    border: 1px solid gainsboro;
    border-radius: 5px;
    padding: 6px;
    font-size: 13px;
    font-weight: 500;
}

.event-marker-new {
    display: block;
    margin: 2px auto 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

.event-marker-new.absent {
    background-color: rgb(225 0 0 / 39%);
}

.event-marker-new.present {
    background-color: rgb(146 219 29 / 65%);
}

.event-marker-new.leave {
    background-color: rgb(138 155 134 / 65%);
}

.event-marker-new.holiday {
    background-color: rgb(248, 141, 49);
}

.calendar>.absent {
    background-color: rgb(225 0 0 / 39%);
}

.calendar>.present {
    background-color: rgb(146 219 29 / 65%);
}

.calendar>.leave {
    background-color: rgb(138 155 134 / 65%);
}

.calendar>.holiday {
    background-color: rgb(248, 141, 20);
}

.event-marker-new.violet {
    background-color: violet;
}

/* att-cal-new end */









.left-trainee-leave-info .left-trainee-profile p {
    font-size: 14px;
    font-weight: 500;
}

.left-trainee-leave-info .right-trainee-profile p {
    font-size: 13px;
    font-weight: 400;
    color: #404040;
}

.trainee-assign-team-name p {
    color: black;
}

.month-details-container {
    width: 100%;
    margin: 20px 0;
    border-top: 1px dashed #F88D31;
    border-bottom: 1px dashed #F88D31;
    display: flex;
    padding: 5px 0;
}

.month-details-container p {
    margin-bottom: 0;
    padding: 2px 0;
}











.month-details-container-trainee {
    max-width: 85%;
    margin: 0 auto;
    border: 1px solid #e4e4e4;
    display: flex;
    padding: 5px 8px;
    border-radius: 5px;
    background-color: #f5f5f5;

}

.month-details-container-trainee p {
    margin-bottom: 0;
    padding: 2px 0;
}

.present-month {
    color: green;
    font-weight: 500;
}

.trainee-working-days {
    display: flex;
    margin-left: auto;
}

.trainee-work-count {
    color: black;
    border-right: 2px solid #DEDEDE;
    padding: 0 10px;
}

.trainee-work-count span {
    font-size: 13px;
    /* font-weight: 400; */
}

.working-count-days {
    color: #0075FF;
    /* font-weight: 600; */
}

.holiday-count-days {
    color: #F88D31;
}

.present-count-days {
    color: #25BB00;
}

.absent-working-days {
    color: #EA0202;
}

.leave-working-days {
    color: gray;

}

.totoaltrainee-abs-pre-details {
    width: 100%;
    background-color: #F9F9F9;
    border: 1px solid #D8D8D8;
    border-radius: 8px;
}

.trainee-working-titile {
    padding: 10px 15px;
}

.trainee-working-titile p {
    color: black;
    font-size: 18px;
    margin-bottom: 0;
    font-weight: 500;
}

.trainee-year-list {
    width: 100%;
    color: #000000;
    display: flex;
    justify-content: space-between;
}

.trainee-year-list ul {
    width: 33%;
}

.trainee-year-list ul li {
    position: relative;
    /* Required for positioning the ::before pseudo-element */
    list-style: none;
    list-style-type: none;
    font-weight: 400;
}

.trainee-year-list ul li::before {
    content: "";
    display: block;
    width: 15px;
    height: 3px;
    background-color: #999999;
    border-radius: 8px;
    position: absolute;
    top: 50%;
    left: -25px;
    transform: translateY(-50%);
}

.new-one {
    /* color: #0075FF; */
}

.new-two {
    /* color: #25BB00; */
}

.new-three {
    /* color: #EA0202; */
}

.new-four {
    /* color: #FF00C7; */
}

.new-five {
    /* color: #F88D31; */
}

.new-six {
    /* color: #AC39D4; */
}

.all-module-save {
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: end;
}

.all-module-save button {
    border: none;
    outline: none;
    background-color: #25BB00;
    padding: 8px 16px;
    border-radius: 8px;
    color: white;
}

.all-course-save {
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: end;
}

.all-course-save button {
    border: none;
    outline: none;
    background-color: #25BB00;
    padding: 8px 16px;
    border-radius: 8px;
    color: white;
}

.cke_bottom {
    display: none !important;
}

.course-date-time-view {
    display: flex;
}

.admin-trainer-course-day {
    display: flex;
    justify-content: center;
    align-items: center;
}

.admin-trainer-seen-course-days p {
    margin-bottom: 0;
    color: gray;
    font-weight: 500;
}

.cou-date-time p span {
    font-weight: 500;
}

.trainee-conversation {
    width: 100%;
}

.right-conversation {
    width: 100%;
    display: flex;
    justify-content: end;
    color: #000000;
}

.right-fix p {
    margin-bottom: 0;
}

.right-fix {
    width: 48%;
    /* max-width: 50%; */
    /* width: 100%; */
    /* text-align: right; */
}

.right-chat {
    /* padding: 10px;
    background-color: #F1FFED;
    border: 1px solid #25BB00;
    border-radius: 8px;
    text-align: left;
    font-size: 15px; */


    padding: 10px 10px 0px 10px;
    background-color: #F8F9FA;
    /* border: 1px solid #25BB00; */
    border-radius: 5px;
    font-size: 15px;
    /* text-align: justify; */
    /* border-right: 1px solid #25BB00; */
    border-bottom: 1px solid #e1e1e1;
    display: flex;
    flex-direction: column;
    margin: 10px 0;
}

.right-post-date {
    font-size: 11px;
    color: gray;
    padding: 5px 0;
    font-style: italic;
    text-align: right;
}


.left-conversation {
    width: 100%;
    display: flex;
    justify-content: start;
    color: #000000;
}

.left-fix p {
    margin-bottom: 0;
}

.left-fix {
    width: 48%;
    /* max-width: 50%; */
}

.left-chat {
    /* padding: 10px;
    background-color: #EDF1FF;
    border: 1px solid #0075FF;
    border-radius: 8px;
    font-size: 15px;
    text-align: left; */

    margin: 10px 0;
    padding: 10px 10px 0px 10px;
    /* background-color: #EDF1FF; */
    background-color: #F8F9FA;
    /* border: 1px solid #0075FF; */
    border-radius: 8px;
    text-align: left;
    font-size: 15px;
    border-bottom: 1px solid #e1e1e1;
    display: flex;
    flex-direction: column;
}

.left-post-date {
    font-size: 11px;
    color: gray;
    padding: 5px 0;
    font-style: italic;
}

.trainee-com-msg {
    width: 100%;
    margin-top: 10px;
}

.chat-done-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.chat-done-btn button {
    border: none;
    outline: none;
    padding: 10px 16px;
    font-size: 15px;
    background-color: #25BB00;
    color: white;
    border-radius: 10px;
}

.progress-working {
    color: #0075FF !important;
}

.progress-completed {
    color: #25BB00 !important;
}

/* trainee reply from trainer side and admin side */
.trainee-conversation-new {
    width: 100%;
}

.left-conversation-new {
    width: 100%;
    display: flex;
    justify-content: start;
    color: #000000;
}

.left-fix-new p {
    margin-bottom: 0;
}

.left-fix-new {
    /* width: 80%; */
    max-width: 90%;
    /* text-align: right; */
}

.left-chat-new {
    margin: 10px 0;
    padding: 10px 10px 0px 10px;
    /* background-color: #EDF1FF; */
    background-color: #F8F9FA;
    /* border: 1px solid #0075FF; */
    border-radius: 8px;
    text-align: left;
    font-size: 15px;
    border-bottom: 1px solid #e1e1e1;
    display: flex;
    flex-direction: column;
}

.left-post-date-new {
    font-size: 11px;
    color: gray;
    padding: 3px 0;
    font-style: italic;
    font-weight: 600;
}


.right-conversation-new {
    width: 100%;
    display: flex;
    justify-content: end;
    color: #000000;
}

.right-fix-new p {
    margin-bottom: 0;
}

.right-fix-new {
    /* width: 80%; */
    max-width: 90%;


}

.right-chat-new {
    padding: 10px 10px 0px 10px;
    background-color: #F8F9FA;
    /* border: 1px solid #25BB00; */
    border-radius: 5px;
    font-size: 15px;
    /* text-align: justify; */
    /* border-right: 1px solid #25BB00; */
    border-bottom: 1px solid #e1e1e1;
    display: flex;
    flex-direction: column;
    margin: 10px 0;
}

.right-post-date-new {
    font-size: 11px;
    color: gray;
    padding: 3px 0;
    font-style: italic;
    text-align: right;
    font-weight: 600;
}

.chat-scrolling {
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    padding: 0 8px;

}

/* if-no-data (image seen if no data) */
.if-no-data {
    width: 100%;
    background-color: white;
    border-radius: 8px;
    text-align: center;
}

/* .module-remove-btn-module {
    position: absolute;
    right: 3rem;
    color: white !important;
    background-color: #ea0202 !important;
    border: none !important;
} */

.module-remove-btn-module {
    position: absolute !important;
    right: 3rem !important;
    display: inline-block !important;
    border-radius: 4px !important;
    background-color: #EA0202 !important;
    border: none !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    width: 130px !important;
    padding: 8px !important;
    transition: all 0.5s !important;
    cursor: pointer !important;
    margin: 5px !important;
    /* position: relative !important; */
}

.module-remove-btn-module:after {
    content: '\f2ed' !important;
    /* FontAwesome Unicode for trash icon */
    font-family: "Font Awesome 5 Free" !important;
    /* Ensure you're using Font Awesome 5 */
    font-weight: 900 !important;
    /* Font weight for solid icons */
    position: absolute !important;
    opacity: 0 !important;
    top: 50% !important;
    right: 20px !important;
    transform: translateY(-50%) !important;
    transition: opacity 0.5s, right 0.5s !important;
}

.module-remove-btn-module:hover:after {
    opacity: 1 !important;
    right: 10px !important;
}

.course-titl-intr-new {
    position: relative;
}

/* .module-remove-btn-module-new{
    position: absolute;
    right: 3rem;
    top: 5px;
    z-index: 99;
    color: white !important;
    background-color: #ea0202 !important;
    border: none !important;
    
} */

.module-remove-btn-module-new {
    position: absolute !important;
    right: 3rem !important;
    top: 0px !important;
    z-index: 99 !important;
    display: inline-block !important;
    border-radius: 4px !important;
    background-color: #EA0202 !important;
    border: none !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    width: 130px !important;
    padding: 8px !important;
    transition: all 0.5s !important;
    cursor: pointer !important;
    margin: 5px !important;
    /* position: relative !important; */
}

.module-remove-btn-module-new:after {
    content: '\f2ed' !important;
    /* FontAwesome Unicode for trash icon */
    font-family: "Font Awesome 5 Free" !important;
    /* Ensure you're using Font Awesome 5 */
    font-weight: 900 !important;
    /* Font weight for solid icons */
    position: absolute !important;
    opacity: 0 !important;
    top: 50% !important;
    right: 20px !important;
    transform: translateY(-50%) !important;
    transition: opacity 0.5s, right 0.5s !important;
}

.module-remove-btn-module-new:hover:after {
    opacity: 1 !important;
    right: 10px !important;
}




/* new design css for course view */


/* dash design */

/* .list-of-course p {
    font-size: 14px;
    position: relative;
    margin-left: 30px;
    color: gray;
    margin-bottom: 5px;
    font-weight: 500;
}

.list-of-course p::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 2px;
    background: gray;
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50px;
    margin-top: 1px;
} */

/* /* css start for text edior */


.list-of-course p {
    font-size: 16px !important;
    color: #000 !important;
    margin-bottom: 5px !important;
    font-weight: 400 !important;
}

.list-of-course h1 {
    font-size: 24px !important;
    color: #000 !important;
    margin-bottom: 5px !important;
    font-weight: 400 !important;
}

.list-of-course h2 {
    font-size: 20px !important;
    color: #000 !important;
    margin-bottom: 5px !important;
    font-weight: 400 !important;
}

.list-of-course h3 {
    font-size: 17px !important;
    color: #000 !important;
    margin-bottom: 5px !important;
    font-weight: 400 !important;
}

.list-of-course h4 {
    font-size: 14px !important;
    color: #000 !important;
    margin-bottom: 5px !important;
    font-weight: 400 !important;
}

.list-of-course h5 {
    font-size: 12px !important;
    color: #000 !important;
    margin-bottom: 5px !important;
    font-weight: 400 !important;
}

.list-of-course h6 {
    font-size: 10px !important;
    color: #000 !important;
    margin-bottom: 5px !important;
    font-weight: 400 !important;
}

.list-of-course ul li {
    line-height: 25px;
    margin-bottom: 5px;
}

.list-of-course ol li {
    line-height: 25px;
    margin-bottom: 5px;
}














/* .list-of-course table {
    border-collapse: collapse;
    width: 100%;
    padding: 10px 0;
    border-radius: 10px;
    border: none !important;
} */

/* .list-of-course table td,
.list-of-course table th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
} */

/* .list-of-course table tr:nth-child(even) {
    background-color: #f1f1f1;
} */

/* .list-of-course table tr th {
    background-color: #F88D31;
    color: white;
} */




/* css end for text edior */



/* for h1 to h6 text editor */
/* .list-of-course h1 {
    font-size: 26px;
} */

/* .list-of-course h2 {
    font-size: 22px;
} */

/* .list-of-course h3 {
    font-size: 18px;
} */

/* .list-of-course h4 {
    font-size: 16px;
} */

/* .list-of-course h5 {
    font-size: 15px;
} */

/* .list-of-course h6 {
    font-size: 14px;
} */

.course-small-intro {
    color: #000;
    font-size: 15px;
}


.three-course-div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
}




.assignment-div {
    width: 32%;
    border: 1px solid #DEDEDE;
    padding: 5px 8px;
    border-radius: 10px;
}

.same-course-divison {
    width: 100%;
}

.common-title-course p {
    margin-bottom: 0;
    font-weight: 600;
    color: #000;
    font-size: 18px;
    padding: 4px 0;
}

.common-note-course {
    line-height: 16px;
    text-align: justify;
}

.common-note-course p {
    font-size: 13px;
    font-weight: 500;
}

.common-note-course span {
    font-size: 13px;
    color: gray;
    font-weight: 400;
    word-break: break-all;
}

.common-course-scrolling {
    width: 100%;
    max-height: 210px;
    overflow: auto;
    word-break: break-all;
}

.pdf-url-division {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #DEDEDE;
    padding: 8px 0;
}

.left-common-course-data {
    display: flex;
    justify-content: start;
    align-items: center;
}

.coomon-icon-course svg {
    height: 40px;
    width: 40px;
}

.common-doc-upladed {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    margin: 0 4px;
}

.common-doc-upladed a {
    text-decoration: underline !important;

}

.common-doc-upladed a:hover {
    color: #F88D31 !important;
    text-decoration: underline !important;

}

.common-doc-upladed p {
    margin-bottom: 0;
    word-break: break-all;
}

.common-doc-upladed p:nth-child(1) {
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 500;
}

.common-doc-upladed p:nth-child(2) {
    font-size: 10px;
    color: grey;
    font-weight: 500;
}

.right-common-course-data a {
    display: flex;
    justify-content: start;
    align-items: center;
}

.right-common-course-data a span:nth-child(1) svg {
    width: 20px;
    height: 20px;
}

/* Your styles here */
.right-common-course-data a span:nth-child(2) {
    font-size: 13px;
    font-weight: 600;
    margin-left: 5px;
}




.questionaries-div {
    width: 32%;
    border: 1px solid #DEDEDE;
    padding: 5px 8px;
    border-radius: 10px;
}

.additional-div {
    width: 32%;
    border: 1px solid #DEDEDE;
    padding: 5px 8px;
    border-radius: 10px;
}


/* trainee-chat-scrolling */
.trainee-chat-scrolling {
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    padding: 0 8px;


}

.trainee-view_chat-scrolling {
    width: 95%;
    max-height: 280px;
    overflow-y: auto;
    padding: 0 8px;
    margin: 0 auto;
}

.markk-btn {
    /* padding: 10px; */
    margin: 15px 0;
    border-bottom: 1px solid #CECECE;
    border-radius: 10px;
}

.user-left-side {
    font-size: 18px;
    font-weight: 500;
    display: flex;
}

.user-right-side {
    font-size: 18px;
    font-weight: 500;
    display: flex;
}

/* holiday-info-date */
.holiday-info-date {
    font-size: 18px;
    margin-bottom: 0;
    padding: 8px 0;
    font-weight: 600;
}

.chat_history {
    text-align: center;
    /* padding-bottom: 15px; */
    padding: 6px;
    border-bottom: 1px solid #bababa;
    max-width: 40%;
    margin: 10px auto;
    /* background: #f9f9f9; */
    /* padding-top: 15px; */
    /* border-radius: 10px; */
    font-size: 18px;
    font-weight: 600;
}

/* in-trainee-center */


.trainee-course-collpase {
    width: 100%;
    display: flex;
    justify-content: space-between;
}



/* trainee attendance new CSS for tarinee panel (trainee-month-select) */
.trainee-attendance-new {
    width: 100%;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .125);
    padding: 8px;
    background-color: white;
    border-radius: 8px;
    margin-bottom: 20px;
}
.tra_atta{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .125);
    padding: 8px;
    background-color: white;
    border-radius: 8px;
    margin-bottom: 20px;
}

.left-att {
    width: 70%;
    background-color: #fdfdfd;
    border-radius: 10px;
    padding: 10px;
}

.trainee-month-select {
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #dfdfdf;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.trainee-month-select p {
    margin-bottom: 0;
}

.now_month,
.now_year {
    font-weight: 16px;
    font-weight: 500;
    padding: 0px 2px;
}

.static_month_name {
    color: #828282;
    font-size: 15px;
    margin-left: 8px;
}

.info-for-att {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.wor-day-one {
    width: 25%;
    padding: 2px 4px;
    display: flex;
}

.wor-day-one p {
    margin-bottom: 0;
}

.wor-day-two {
    width: 20%;
    padding: 2px 4px;
    display: flex;
}

.wor-day-two p {
    margin-bottom: 0;
}

.wor-day-three {
    width: 20%;
    padding: 2px 4px;
    display: flex;
}

.wor-day-three p {
    margin-bottom: 0;
}

.wor-day-four {
    width: 15%;
    padding: 2px 4px;
    display: flex;
}

.wor-day-four p {
    margin-bottom: 0;
}

.wor-day-five {
    width: 15%;
    padding: 2px 4px;
    display: flex;
}

.wor-day-five p {
    margin-bottom: 0;
}

.sta-name {
    font-size: 14px;
    color: #828282;
    font-weight: 400;
}

.sta-num {
    font-size: 14px;
    color: #828282;
    font-weight: 500;
    margin-left: 5px;
}

.tot-sta-name {
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #dfdfdf;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.tot-sta-name p {
    margin-bottom: 0;
}

.five_tarinee_div {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/* first */
.wor-div {
    width: 23%;
    height: 90px;
    background-color: #EBF1FF;
    border-radius: 8px;
    border: 1px solid gainsboro;
    margin: 0 5px;
}

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

.wor-num {
    height: 60px;
}

.wor-num p {
    font-weight: 500;
    font-size: 30px;
}

.wor-div p {
    margin-bottom: 0;
}

.wor-line {
    height: 30px;
    background-color: #D9E2FF;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.wor-line p {
    font-size: 13px;
    color: gray;
}


/* second */
.pre-div {
    width: 23%;
    height: 90px;
    background-color: #F2FFEE;
    border-radius: 8px;
    border: 1px solid gainsboro;
    margin: 0 5px;
}

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

.pre-num {
    height: 60px;
}

.pre-num p {
    font-weight: 500;
    font-size: 30px;
}

.pre-div p {
    margin-bottom: 0;
}

.pre-line {
    height: 30px;
    background-color: #D8FFD0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.pre-line p {
    font-size: 13px;
    color: gray;
}

/* third */
.abe-div {
    width: 23%;
    height: 90px;
    background-color: #FFF6F7;
    border-radius: 8px;
    border: 1px solid gainsboro;
    margin: 0 5px;
}

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

.abe-num {
    height: 60px;
}

.abe-num p {
    font-weight: 500;
    font-size: 30px;
}

.abe-div p {
    margin-bottom: 0;
}

.abe-line {
    height: 30px;
    background-color: #FFE1E1;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.abe-line p {
    font-size: 13px;
    color: gray;
}

/* fourth */
.leave-div {
    width: 23%;
    height: 90px;
    background-color: #F6F6F6;
    border-radius: 8px;
    border: 1px solid gainsboro;
    margin: 0 5px;
}

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

.leave-num {
    height: 60px;
}

.leave-num p {
    font-weight: 500;
    font-size: 30px;
}

.leave-div p {
    margin-bottom: 0;
}

.leave-line {
    height: 30px;
    background-color: #E0E0E0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.leave-line p {
    font-size: 13px;
    color: gray;
}


/* fifth */
.hol-div {
    width: 23%;
    height: 90px;
    background-color: #FFF8F0;
    border-radius: 8px;
    border: 1px solid gainsboro;
    margin: 0 5px;
}

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

.hol-num {
    height: 60px;
}

.hol-num p {
    font-weight: 500;
    font-size: 30px;
}

.hol-div p {
    margin-bottom: 0;
}

.hol-line {
    height: 30px;
    background-color: #FDEBD7;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.hol-line p {
    font-size: 13px;
    color: gray;
}

.tra-note-self {
    width: 100%;
    margin-top: 10px;
}

.tra-note-self p {
    margin-bottom: 0;
}
.tra_two_note{
    width: 100%;
    display: flex;
    align-items: center;
}
.att_boxx{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
}
.att_boxx svg{
    width: 25px;
    height: 25px;
}
.att_con{
    font-size: 14px;
    display: inline-block;
    padding-left: 10px;
}


.tra_note_sta {
    font-size: 13px;
    color: black;
    font-weight: 500;
}

.tra_sta_line {
    font-size: 13px;
    color: gray;
    font-weight: 400;
}

.parent-count-div {
    width: 100%;
    margin-top: 90px;
}

/* for trainee attendance media query */
@media screen and (max-width:1200px) {
    .sta-name {
        font-size: 12px;
    }

    .sta-num {
        font-size: 12px;
    }

}

@media screen and (max-width:1070px) {
    .wor-line p {
        font-size: 10px;
    }

    .abe-line p {
        font-size: 10px;
    }

    .hol-line p {
        font-size: 10px;
    }

    .leave-line p {
        font-size: 10px;
    }

    .pre-line p {
        font-size: 10px;
    }
}

















.right-att {
    width: 35%;
    background-color: white;
    padding: 10px;
}

.current-month-div {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9;
    padding: 8px;
    border-radius: 2px;
    border-bottom: 1px dashed #F88D31;
    border-top: 1px dashed #F88D31;
}

.current-month-div p {
    margin-bottom: 0;
}

.trainee-present {
    font-size: 18px;
    font-weight: 500;
}

.trainee-mon {
    font-size: 17px;
    color: #000;
    font-weight: 600;
}

.trainee-year {
    font-size: 17px;
    color: #000;
    font-weight: 500;
}

.trainee-leave-all-infoo {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 35px;
}

.same-tra-info {
    width: 50%;
    padding: 10px 0;
    display: flex;
    justify-content: flex-start;

}

.same-tra-info p {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 600;
}

.icon-with-pagiination-new {
    width: 100%;
    padding: 8px 0;
}

.trainee-color-summary {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.same-same {
    display: flex;
    justify-content: start;
    align-items: center;
}

.pre-box {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #25bb00;
    border-radius: 4px;
}

.abe-box {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #f29b9b;
    border-radius: 4px;
}

.holi-box {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #f88d14;
    border-radius: 4px;
}

.leave-box {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #B0BBAE;
    border-radius: 4px;
}

.sat-sun-box {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: violet;
    border-radius: 4px;
}



/*  */

/* char counter css */
.char-counter {
    font-size: 12px;
    font-weight: 400;
    color: gray;
}

.char-counter1 {
    font-size: 12px;
    color: gray;
    font-weight: 400;
}

.number-counter {
    font-size: 12px;
    color: gray;
    font-weight: 400;
}

#doc_counter_one {
    font-size: 12px;
    color: gray;
    font-weight: 400;
}

#doc_counter_two {
    font-size: 12px;
    color: gray;
    font-weight: 400;
}

#doc_counter_three {
    font-size: 12px;
    color: gray;
    font-weight: 400;
}



.cookies-scrolling {
    width: 100%;
    max-height: 450px;
    overflow: auto;
}

/* cokkies */
.cookies-trainee {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 0px 20px 0px;
}

.cookies-trainee button {
    width: 40%;
    background-color: #F88D31;
    color: white;
    padding: 8px 0;
    border: none;
    outline: none;
    border-radius: 8px;
}

.terms-for-trainee {
    width: 100%;
    padding: 10px 15px;
}

.terms-title p {
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 600
}

.terms-content {
    width: 100%;

}

.terms-same-content {
    width: 100%;
    padding: 10px 0;
}

.terms-same-content p {
    margin-bottom: 0;
    font-size: 13px;
    color: gray;
    font-weight: 400;
}



.trade-for-trainee {
    width: 100%;
    padding: 10px 15px;
}

.trade-title p {
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 600
}

.trade-content {
    width: 100%;

}

.trade-same-content {
    width: 100%;
    padding: 8px 0;
}

.trade-same-content p {
    margin-bottom: 0;
    font-size: 13px;
    color: gray;
    font-weight: 400;
}


.use-for-trainee {
    width: 100%;
    padding: 10px 15px;
}

.use-title p {
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 600
}

.use-content {
    width: 100%;

}

.use-same-content {
    width: 100%;
    padding: 8px 0;
}

.use-same-content p {
    margin-bottom: 0;
    font-size: 13px;
    color: gray;
    font-weight: 400;
    position: relative;
    padding-left: 25px;
    /* Adjusted to make space for the rectangular point */
}

.use-same-content p:before {
    position: absolute;
    content: "";
    width: 15px;
    /* Width of the rectangular point */
    height: 4px;
    /* Height of the rectangular point */
    background-color: #F88D31;
    left: 0;
    top: 57%;
    transform: translateY(-50%);
    border-radius: 5px;
}

.term-div {
    width: 100%;
    margin: 10px 0;
    padding: 10px 0;
    border-top: 1px solid #DADADA;
}

.term-checkbox {
    max-height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.check-title P {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 600;

}

.term-chek {
    display: flex;
    justify-content: center;
    align-items: center;
}


/* <!-- cms-terms-conditions --> */
.new-terms-condition-divison {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .125);
    padding: 14px 11px;
    background-color: white;
    border-radius: 8px;
    margin-bottom: 20px;
}

.terms-titlee {
    width: 100%;
    border-bottom: 1px solid #DADADA;
    padding-bottom: 10px;
}

.terms-titlee p {
    margin-bottom: 0;
    font-size: 18px;
    color: #000;
    font-weight: 600;
}

.accepted-division {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.accepted-division button {
    outline: none;
    padding: 10px 20px;
    border: 1px solid #49C62A;
    background-color: #F0FAED;
    border-radius: 8px;
}

.accept-icon svg {
    height: 20px;
    width: 20px;
}

.acc-text {
    font-size: 14px;
    color: #000;
    font-weight: 500;
}






/* header notification */
.same-notification-dropdown {
    width: 100%;
    /* max-height: 400px;
    overflow: auto; */
}

.notification-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: #F5F5F5;
    padding: 8px;
}

.recent-noti p {
    color: #000;
    font-weight: 500;
}

.noti-all a {
    /* color: #EA0202 !important; */
    /* font-size: 14px; */
    /* font-weight: 600 !important; */
}
.noti-all{
    color: gray;
}

.noti-all a:nth-child(1) {
    /* color: orange; */
  }
  
  .noti-all a:nth-child(3) {
    /* color: #EA0202; */
    
  }


.notifiaction-boxbox {
    width: 100%;
    padding: 0px 8px;
    border-bottom: 1px solid gainsboro;
    margin: 5px 0;
}
.no_any_noti{
    padding: 22px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.no_any_noti svg{
    width: 40px;
    height: 40px;
}
.no_any_noti p{
    padding-top: 8px;
    margin-bottom: 0;
    color: #e3e3e3;
}
.notification-box {
    width: 100%;
    padding: 2px 0px;
}

.header-notidiaction-name p {
    font-size: 16px;
    color: #000;
    font-weight: 500;
}

.notification-description {
    width: 100%;
    padding: 2px 0px;
}

.notification-description p {
    font-size: 13px;
    color: #000;
    font-weight: 400;

}

.noti-posted-time {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 2px 0px;
}

.noti-posted-name p {
    font-size: 13px;
    color: #656565;
    font-weight: 400;
}

.noti-posted-date-time p {
    font-size: 13px;
    color: #656565;
    font-weight: 400;
}

.noti-posted-date-time span {
    margin: 0 1px;
}

.noti-read-more-box {
    width: 100%;
    padding: 2px 0px;
}

.noti-read-more a {
    color: #0075FF;
    font-size: 12px;
    display: flex;
}

.noti-read-more span {
    margin: 0 2px;

}


.job-view-tow-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.left-jobs-view {
    width: 70%;
    padding: 10px;
    background-color: #FFFFFF;
    border-radius: 8px;
    max-height: 100vh;
    overflow-y: auto;
    box-shadow: 0px 0px 52px -21px rgba(0, 0, 0, 0.18);
}

.job-tech-exe-new {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.job-tech-exe-new p {
    margin-bottom: 0;
}

.job-tech-name p {
    margin-bottom: 0;
    font-size: 17px;
    font-weight: 600;
}

.job-exe-year p span:nth-child(2) {
    color: #000;
    font-size: 14px;
    font-weight: 500;
}

.job-city-date {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.job-city-date p {
    margin-bottom: 0;
}

.job-cur-name {
    font-size: 14px;
    font-weight: 500;
}

.post-exe-p {
    font-size: 14px;
    font-weight: 500;
}

.which-job-tech-division {
    width: 100%;
    display: flex;
    justify-content: start;
    padding: 5px 0;
    border-top: 1px solid #D9D9D9;
    border-bottom: 1px solid #D9D9D9;
    margin: 5px 0;
}

.which-job-tech-division p {
    margin-bottom: 0;
}

.job-new-static-name {
    font-size: 15px;
    font-weight: 500;
    color: #000;
}

.job-tech-new-name {
    color: #525252;
    font-size: 14px;
}

.new-job-des {
    width: 100%;
    /* max-height: 180px; */
    /* overflow: auto; */
}

.job-same-note-division {
    width: 100%;
}

.job-static-name-new {
    width: 100%;
    padding: 10px 0;
}

.job-static-name-new p {
    margin-bottom: 0;
    font-size: 17px;
    font-weight: 500;
}

.job-new-note-division {
    width: 100%;
}

.job-new-note-division p {
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 500;
}

.job-notes-all {
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
}

.job-notes-all p {
    margin-bottom: 0;
    font-size: 13px;
    color: #474D6A;
    padding: 8px 0;
}

.job-notes-all ul li {
    font-size: 13px;
    color: #474D6A;
}

.right-jobs-view {
    width: 29%;
    padding: 10px;
    max-height: 260px;
    overflow-y: auto;
    background-color: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #E8E8E8;
    box-shadow: 0px 0px 52px -21px rgba(0, 0, 0, 0.18);
}

.right-jobs-view-new {
    width: 29%;
    padding: 10px;
    background-color: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #E8E8E8;
    box-shadow: 0px 0px 52px -21px rgba(0, 0, 0, 0.18);
}

.new-job-company-division {
    width: 100%;
}

.new-job-company-division-new {
    width: 100%;
}

.company-det-static-name {
    width: 100%;
    border-bottom: 1px solid #D3D3D3;
    padding: 8px 0;
}

.company-det-static-name p {
    margin-bottom: 0;
    font-style: 18px;
    font-weight: 500;
}

.company-det-static-name-new {
    width: 100%;
    border-bottom: 1px solid #D3D3D3;
    padding: 8px 0;
}

.company-det-static-name-new p {
    margin-bottom: 0;
    font-style: 18px;
    font-weight: 500;
}

.compnay-all-info-for-job {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.compnay-all-info-for-job p {
    margin-bottom: 0;
    font-size: 14px;
    padding: 4px 0;
}

.left-right-job-fix {
    display: flex;
    padding: 4px 0;
}

.left-job-com-det {
    width: 40%;
}

.right-job-com-det {
    width: 58%;
}

.left-job-com-det p {
    font-weight: 500;
}

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

.job-not-avilable {
    width: 100%;
}

.job-not-avilable p {
    margin-bottom: 0;
    text-align: center;
    padding: 4px 18px;
    font-size: 17px;
    color: #6A6A6A;
    font-weight: 500;
}

.interview-tips-for-our-company {
    width: 100%;
    padding: 10px;
    background-color: #FFFFFF;
    border-radius: 8px;
    margin: 10px 0;
    box-shadow: 0px 0px 52px -21px rgba(0, 0, 0, 0.18);
}


.border-top-green {
    border-top: 2px solid #25BB00;
    border-radius: 6px;
}

.border-top-orange {
    border-top: 2px solid orange;
    border-radius: 6px;
}

.border-top-gray {
    border-top: 2px solid darkgray;
    border-radius: 6px;
}















/* trainee dashboard technolgy graphs */
.module_tech_topics {
    display: flex;
    width: 100%;
    height: 110px;
    background-color: white;
    justify-content: center;
}

.given_time {
    width: 45%;
    position: relative;
}

.given_time p {
    margin-bottom: 0;

}

.module_given_name-division {
    padding: 0 2px;
    display: flex;
    justify-content: end;
}

.module_given_name {
    margin-bottom: 0;
    margin-bottom: 0;
    background-color: transparent;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    padding: 0 12px 0 0;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.5em;
    max-height: 3em;
    text-align: right;
}

.module_given_name.active:after {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    background-color: #25BB00;
    border-radius: 50%;
    top: 6px;
    right: -8px;
}

.module_given_name.working-progress:after {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    background-color: orange;
    border-radius: 50%;
    top: 6px;
    right: -8px;
}

.module_given_name.inactive:after {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    background-color: #ff5c5c;
    border-radius: 50%;
    top: 6px;
    right: -8px;
}

.module_given_name:after {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    background-color: gainsboro;
    border-radius: 50%;
    top: 6px;
    right: -8px;
}

.module_given_name {
    /* background-color: red; */
}

.module_given_days {
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: 60px;
    right: 18px;
}

.module_given_days p {
    font-size: 11px;
    font-style: italic;
    text-align: right;
}

.module_divider {
    width: 4px;
    background-color: gainsboro;
    border-radius: 10px;
    height: 100%;
    margin-top: 8px;
}

.module_divider.active {
    width: 4px;
    background-color: #25BB00;
    border-radius: 10px;
    height: 100%;
    margin-top: 8px;
}

.module_divider.working-progress {
    width: 4px;
    background-color: orange;
    border-radius: 10px;
    height: 100%;
    margin-top: 8px;
}

.module_divider.inactive {
    width: 4px;
    background-color: #ff5c5c;
    border-radius: 10px;
    height: 100%;
    margin-top: 8px;
}

.taken_time {
    width: 45%;
    position: relative;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-top: 15px;
}

.taken-timeout {
    display: flex;
    position: relative;
    top: 6px;
    left: 18px;
}

.taken-timeout span {
    font-size: 11px;
    font-style: italic;
}

/* trainee exit css */
.trainee-exit-checkbox {
    width: 100%;
    display: flex;
}

.experience_certificate_issue {
    margin: 0 5px;
}

.trainee_certificate_issue {
    margin: 0 5px;
}

.trainee-exit-one-check {
    display: flex;
    align-items: center;
}

.first-trainer-name-new {
    color: #000;
}

.trainee_certificate_issue-name {
    font-size: 14px;
}

.trainee-exit-two {
    margin: 0 5px;
}

.trainee-exit-two-check {
    display: flex;
    align-items: center;
}

.first-trainer-name-new {
    color: #000;
}

.trainee-exit-two-name {
    font-size: 14px;
}

.trainee_placed {
    display: none;
}

.got-placed-details {
    width: 100%;
}

.trainee_exe_division {
    padding: 10px 0;
}

.two-trainee-exit {
    width: 100%;
}

.two-radio-btnbtn-new {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0;
}

.two-radio-btnbtn-new input {
    display: none;
    /* Hide default radio button */
}

.two-radio-btnbtn-new input[type="radio"]+label {
    cursor: pointer;
    position: relative;
    padding-left: 30px;
    /* Ensure space for the custom radio */
    line-height: 20px;
    margin-right: 10px;
    color: #000;
}

.two-radio-btnbtn-new input[type="radio"]+label::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #848484;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    opacity: 1;
    transition: all 0.3s;
    background-color: #fff;
    /* Add background color */
}

.two-radio-btnbtn-new input[type="radio"]:checked+label::after {
    opacity: 1;
    /* Ensure this is visible when checked */
}

.two-radio-btnbtn-new input[type="radio"]+label::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #f88d31;
    background: #f88d31;
    border-radius: 50%;
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: all 0.3s;
}

.two-radio-btnbtn-new input[type="radio"]:checked+label::after {
    opacity: 1;
}


/* new date-rangepicker CSS */
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
}

.daterangepicker {
    border: 1px solid #cecece !important;
    border-radius: 8px !important;
}

.daterangepicker .prev {
    width: 25px !important;
    height: 25px !important;
    background-color: whitesmoke;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s ease-in-out;
}

.daterangepicker .next {
    width: 25px !important;
    height: 25px !important;
    background-color: whitesmoke;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s ease-in-out;
}


.daterangepicker:after {
    border-bottom: 6px solid #f88d31;
}

.daterangepicker .drp-selected {
    color: #000;
    font-weight: 600;
}


.daterangepicker .drp-buttons {
    text-align: center !important;
}


/* for both button clear and apply */
.daterangepicker .drp-buttons .btn {
    padding: 6px 13px !important;
    border-radius: 4px !important;
}

/* for clear button */
.daterangepicker .btn-default {
    background-color: #EA0202;
    border: 1px solid transparent;
}

.daterangepicker .btn-default:hover {
    background-color: white;
    border: 1px solid #EA0202;
    color: #EA0202;
}

/* for apply button */
.dark-mode .btn-primary {
    background-color: #25BB00;
    border: 1px solid transparent;
}

.dark-mode .btn-primary:hover {
    background-color: white;
    border: 1px solid #25BB00;
    color: #25BB00 !important;
}


/* for current date select */
.daterangepicker td.active {
    background-color: #F88D31 !important;
}

.daterangepicker:after {
    top: -9px !important;
    border-right: 9px solid transparent !important;
    border-left: 9px solid transparent !important;
    border-bottom: 9px solid #a5a5a5 !important;
}


/* trainee hold */
.trainee_hold_main {
    text-align: center;
}

.trainee_hold_main p {
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 600;
}

.hold-trainee-comment {}

.please_contact {
    /* border: 1px solid red; */
    text-align: center;
    border-radius: 8px;
    /* background-color: #ffe9e9; */
    padding: 8px 0;
    max-width: 100%;
    margin: 0 auto;
}

.please_contact p {
    margin-bottom: 0;
    color: red;
    font-weight: 500;

}

.trainee-logout-division {
    margin-top: 14px;
}


/* trainee-exit-history-division */
.trainee-exit-history-division {
    width: 100%;
}

/* got placed */
.gotplaced-trainee-box {
    border: 1px solid #dedede;
    border-radius: 8px;
    padding: 8px;
    margin-top: 5px;
    padding-bottom: 5px;
}

.gotplaced-trainee-box .got-placed-box {
    padding: 10px 0;
    display: flex;
}

.gotplaced-trainee-box .got-placed-box p {
    margin-bottom: 0;
}

.gotplaced-trainee-box .got_yes_no div {
    margin: 0 5px;
}

.gotplaced-trainee-box .got_placed p {
    font-size: 17px;
    font-weight: 500;
}

.gotplaced-trainee-box .got_yes_no {
    display: flex;
    margin: 0 10px;
}

.gotplaced-trainee-box .got_yes_no img {
    width: 20px;
}

.gotplaced-trainee-box .got_placed_yes p {
    margin-bottom: 0;
    padding: 2px 0;
}

.gotplaced-trainee-box .yesno-text {
    font-size: 14px;
    color: gray;
    font-weight: 500;
}

.gotplaced-trainee-box .got_placed_yes p span:nth-child(1),
.gotplaced-trainee-box .got_placed_yes p span:nth-child(3),
.gotplaced-trainee-box .got_placed_yes p span:nth-child(5) {
    font-weight: 500;
    color: #000;
    font-size: 14px;
    display: inline-block;
}

.gotplaced-trainee-box .got_placed_yes p span:nth-child(2),
.gotplaced-trainee-box .got_placed_yes p span:nth-child(4),
.gotplaced-trainee-box .got_placed_yes p span:nth-child(6) {
    font-weight: 500;
    color: darkgray;
    font-size: 14px;
    text-decoration: underline !important;
}


.trainee-review-test-both {
    border: 1px solid #dedede;
    border-radius: 8px;
    padding: 8px;
    margin-top: 5px;
    padding-bottom: 5px;
}


/* google review done */
.trainee-review-box .got-placed-box {
    padding: 10px 0;
    display: flex;
}

.trainee-review-box .got-placed-box p {
    margin-bottom: 0;
}

.trainee-review-box .got_yes_no div {
    margin: 0 5px;
}

.trainee-review-box .got_placed p {
    font-size: 16px;
    font-weight: 500;
}

.trainee-review-box .got_yes_no {
    display: flex;
    margin: 0 10px;
}

.trainee-review-box .got_yes_no img {
    width: 20px;
}

.trainee-review-box .got_placed_yes p {
    margin-bottom: 0;
    padding: 2px 0;
}

.trainee-review-box .yesno-text {
    font-size: 14px;
    color: gray;
    font-weight: 500;
}

.trainee-review-box .got_placed_yes p span:nth-child(1) {
    font-weight: 500;
    color: #000;
    font-size: 14px;
    width: 15%;
    display: inline-block;
}

.trainee-review-box .got_placed_yes p span:nth-child(2) {
    font-weight: 500;
    color: darkgray;
    font-size: 14px;
}




/* google testimonial done */
.trainee-testimonial-box .got-placed-box {
    padding: 3px 0;
    display: flex;
}

.trainee-testimonial-box .got-placed-box p {
    margin-bottom: 0;
}

.trainee-testimonial-box .got_yes_no div {
    margin: 0 5px;
}

.trainee-testimonial-box .got_placed p {
    font-size: 16px;
    font-weight: 500;
}

.trainee-testimonial-box .got_yes_no {
    display: flex;
    margin: 0 10px;
}

.trainee-testimonial-box .got_yes_no img {
    width: 20px;
}

.trainee-testimonial-box .got_placed_yes p {
    margin-bottom: 0;
    padding: 2px 0;
}

.trainee-testimonial-box .yesno-text {
    font-size: 14px;
    color: gray;
    font-weight: 500;
}

.trainee-testimonial-box .got_placed_yes p span:nth-child(1) {
    font-weight: 500;
    color: #000;
    font-size: 14px;
    width: 15%;
    display: inline-block;
}

.trainee-testimonial-box .got_placed_yes p span:nth-child(2) {
    font-weight: 500;
    color: darkgray;
    font-size: 14px;
}



/* exe */
.gotplaced-exe-box {
    border: 1px solid #dedede;
    border-radius: 8px;
    padding: 0 8px;
    margin-top: 5px;
    padding-bottom: 5px;
}

.gotplaced-exe-box .got-placed-box {
    padding: 10px 0;
    display: flex;
}

.gotplaced-exe-box .got-placed-box p {
    margin-bottom: 0;
}

.gotplaced-exe-box .got_yes_no div {
    margin: 0 5px;
}

.gotplaced-exe-box .got_placed p {
    font-size: 17px;
    font-weight: 500;
}

.gotplaced-exe-box .got_yes_no {
    display: flex;
    margin: 0 10px;
}

.gotplaced-exe-box .got_yes_no img {
    width: 20px;
}

.gotplaced-exe-box .got_placed_yes p {
    margin-bottom: 0;
    padding: 2px 0;
}

.gotplaced-exe-box .yesno-text {
    font-size: 14px;
    color: gray;
    font-weight: 500;
}

.gotplaced-exe-box .got_placed_yes p span:nth-child(1),
.gotplaced-exe-box .got_placed_yes p span:nth-child(3),
.gotplaced-exe-box .got_placed_yes p span:nth-child(5) {
    font-weight: 500;
    color: #000;
    font-size: 14px;
    display: inline-block;
}

.gotplaced-exe-box .got_placed_yes p span:nth-child(2),
.gotplaced-exe-box .got_placed_yes p span:nth-child(4),
.gotplaced-exe-box .got_placed_yes p span:nth-child(6) {
    font-weight: 500;
    color: darkgray;
    font-size: 14px;
    text-decoration: underline !important;
}




/* tra */
.gotplaced-tra-box {
    border: 1px solid #dedede;
    border-radius: 8px;
    padding: 0 8px;
    margin-top: 5px;
    padding-bottom: 5px;
}

.gotplaced-tra-box .got-placed-box {
    padding: 10px 0;
    display: flex;
}

.gotplaced-tra-box .got-placed-box p {
    margin-bottom: 0;
}

.gotplaced-tra-box .got_yes_no div {
    margin: 0 5px;
}

.gotplaced-tra-box .got_placed p {
    font-size: 17px;
    font-weight: 500;
}

.gotplaced-tra-box .got_yes_no {
    display: flex;
    margin: 0 10px;
}

.gotplaced-tra-box .got_yes_no img {
    width: 20px;
}

.gotplaced-tra-box .got_placed_yes p {
    margin-bottom: 0;
    padding: 2px 0;
}

.gotplaced-tra-box .yesno-text {
    font-size: 14px;
    color: gray;
    font-weight: 500;
}

.gotplaced-tra-box .got_placed_yes p span:nth-child(1),
.gotplaced-tra-box .got_placed_yes p span:nth-child(3),
.gotplaced-tra-box .got_placed_yes p span:nth-child(5) {
    font-weight: 500;
    color: #000;
    font-size: 14px;
    display: inline-block;
}

.gotplaced-tra-box .got_placed_yes p span:nth-child(2),
.gotplaced-tra-box .got_placed_yes p span:nth-child(4),
.gotplaced-tra-box .got_placed_yes p span:nth-child(6) {
    font-weight: 500;
    color: darkgray;
    font-size: 14px;
    text-decoration: underline !important;
}

.trainee-exit-comtn-bt-admin {
    display: flex;
    justify-content: end;
    padding-bottom: 5px;
}

.trainee-exit-comtn-bt-admin p {
    margin-bottom: 0;
    font-weight: 500;
}

.trainee-exit-cmnt-why {
    border: 1px solid #dedede;
    border-radius: 8px;
    padding: 0 8px;
    margin-top: 5px;
    padding-bottom: 5px;
}

.nda-division {
    position: fixed;
    bottom: 50px;

}

.nda-division {
    width: 100%;
    padding: 10px;
    border: 1px solid #dedede;
    background-color: #fdfdfd;

}

.nda-section p {
    margin-bottom: 0;
}

/* two-btn-leaves */
.two-btn-leaves button{
    margin: 0 5px;
}
.two-btn-leaves{
    display: flex;
}
.att-prev-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    border: 1px solid transparent;
    outline: none;
    border-radius: 8px;
    background-color: #F88D31;
    transition: 0.3s ease-in-out;
}
.att-prev-btn:hover {
    padding: 8px;
    border: 1px solid #F88D31;
    outline: none;
    border-radius: 8px;
    background-color: white;
}
.att-prev-btn:hover .att-prev-text {
    color: #F88D31; 
}
.att-prev-btn:hover svg path {
    fill: #F88D31; 
}
.att-prev-btn span {
    margin: 0 5px;
}
.att-prev-btn svg {
    width: 30px;
    height: 25px;
}
.att-prev-btn svg path {
    fill: white;
}
.att-prev-text {
    color: white;
    font-size: 13px;
}

.att-next-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    border: 1px solid transparent;
    outline: none;
    border-radius: 8px;
    background-color: #F88D31;
    transition: 0.3s ease-in-out;
}
.att-next-btn:hover {
    padding: 8px;
    border: 1px solid #F88D31;
    outline: none;
    border-radius: 8px;
    background-color: white;
}
.att-next-btn:hover .att-next-text {
    color: #F88D31; 
}
.att-next-btn:hover svg path {
    fill: #F88D31; 
}
.att-next-btn span {
    margin: 0 5px;
}
.att-next-btn svg {
    width: 30px;
    height: 25px;
}
.att-next-btn svg path {
    fill: white;
}
.att-next-text {
    color: white;
    font-size: 13px;
}
.trainee-time-btn{
    display: flex;
    justify-content: center;
    align-items: center;
}
.trainee-time-btn button{
    border: 1px solid transparent;
    outline: none;
    padding: 6px 12px;
    margin: 0 3px;
    background-color: #25BB00;
    border-radius: 4px;
    color: white;
    transition: 0.3s ease-in-out;
    font-size: 12px;
}
.trainee-time-btn a{
    border: 1px solid transparent;
    outline: none;
    padding: 6px 12px;
    margin: 0 3px;
    background-color: #25BB00;
    border-radius: 4px;
    color: white;
    transition: 0.3s ease-in-out;
    font-size: 12px;
}
.trainee-time-btn a:hover{
    color: #25BB00 !important;
}
.trainee-time-btn button:hover{
    border: 1px solid #25BB00;
    color: #25BB00;
    background-color: white;
}
.only-view-animation {
    position: relative;
    border-top: 2px solid transparent; 
    overflow: hidden; 
}

.only-view-animation::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #F88D31, #ef6e00, #F88D31);
    animation: moveBorder 2.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 1 forwards, 
               borderColorChange 2.5s ease-in-out 1 forwards;
}

@keyframes moveBorder {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0); 
    }
}

@keyframes borderColorChange {
    0% {
        border-color: transparent;
    }
    100% {
        border-color: #FF5722; /* Change the border color to complement the animation */
    }
}



.psd_icon_svg svg{
    width: 20px;
    height: 20px;
}
.table-wrapper {
    overflow-x: auto; 
    position: relative;
    max-width: 100%; 
  }
.fixed-action-column-thead {
    position: sticky;
    right: 0; 
    background-color: #004369 !important;
    z-index: 999 !important; 
}
.fixed-action-column-tbody {
    position: sticky;
    right: 0; 
    background-color: white !important;
    z-index: 999 !important; 
}
.swal2-html-container{
    padding: 3px 8px !important;
}
.swal2-icon{
    margin: 7px auto !important;
}
.swal2-actions{
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}
.swal2-styled.swal2-cancel{
    background-color: #EA0202 !important;
}
.swal2-popup{
    border-radius: 30px !important;
}
.assign_trainee_list {
   background-color: #91baf7  !important;
}
.assign_trainee_list_remove {
    background-color: #ed5d5d !important;
}

/* icon disable  for tria */
.icon-disable path {
    fill: gray !important;
}

/* css for pagination */

/* .pagination .page-item {
    display: inline-block !important;
  }
  
  .pagination .page-item.disabled,
  .pagination .page-item.active {
    font-weight: bold !important;
  }
  
  .pagination .page-item:nth-child(n+6) {
    display: none !important;
  }
  
  .pagination .page-item:first-child,
  .pagination .page-item:last-child {
    display: inline-block !important;
  } */

@media only screen and (max-width:470px) {
    .dark-mode .content-header h1{
        font-size: 17px;
    }
    .go-back-arr-btn{
        font-size: 13px;
    }
}
.change-user-team{
    display: flex;
}
.sub-can-assign{
    display: flex;
}
@media only screen and (max-width:992px) {
    .change-user-team{
        display: block !important;
    }
    .addd-team p {
        margin-bottom: 10px;
    }
    .last-com p{
        padding-top: 10px;
        text-align: center;
    }
    .sub-can-assign{
        margin: 0 auto;
    }
    .tranee-leave-details-new{
        display: block;
    }
}
@media only screen and (max-width:555px) {
    .q-a{
        display: block !important;
    }
    .q-a div{
        margin: 12px 0;
    }
    .same-line{
        display: block;
    }
    .same-line div{
        width: 100%;
    }
    .trainee-working-days{
        display: block;
        margin: auto;
    }
    .trainee-work-count{
        border: none;
    }
    .present-month{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* herehere */
    .trainee_moduleee_det{
        display: block;
    }
    .trainee_moduleee_det p{
        width: 100% !important;
    }

}
@media only screen and (max-width:768px) {
    .current-technology-text ,.current-time-text{
        margin-bottom: 10px;
    }
    .work-progres-division{
        flex-wrap: wrap;
    }
    .ref-tech-division{
        width: 50%;
        margin: 0 auto;
        text-align: center;
    }
    .trainee-calander{
        width: 45%;
        margin: 0 auto;
    }
    .progree-trainee-notification{
        width: 50%;
        margin: 0 auto;
    }
}
@media only screen and (max-width:650px) {
    .res-box-trainee{
        display: block;
    }
    .work-progres-division{
        flex-direction: column;
    }
    .trainee-calander{
        width: 60%;
    }
    .res-left-box ,.res-right-box{
        width: 100%;
    }
    .trainee-assign-team{
        width: 100%;
        display: flex;
        justify-content: start;
    }
    .all-soc-icon{
        width: 100%;
        max-width: 90%;
        margin: 0 auto;
    }
}

/* special for trainee profile calendar */
@media screen and (max-width:485px) {
    .trainee-calander{
        width: 100%;
    }
    .team-assigned-table tr th{
        padding: 0 5px;
        font-size: 13px;
    }
    .team-assigned-table td{
        font-size: 12px;
    }
    .got-placed-box{
        display: block !important;
    }
    .trainee-dashboard-conatct-details td span:first-child{
        display: block;
        font-size: 14px;
    }
    .trainee-dashboard-conatct-details td span:nth-child(2){
        font-size: 12px;
    }
    .trainee-all-leave-det{
        display: block;
    }

}

@media screen and (max-width:444px) {
    .ref-tech-division{
        width: 100%;
    }
    .progree-trainee-notification{
        width: 100%;
    }
}

.trainer_leave_div{
    display: flex;
    width: 100%;
    border-bottom: 2px solid #e5e5e5;
    margin-bottom: 10px;
}
.temp_division{
    display: flex;
    justify-content: space-between;
}
.temp_division p{
   margin-bottom: 0;
}
.assign_tra_active{
    display: inline-block;
    color: green;
}


.trainer_leave_div_new{
    /* display: flex; */
    width: 100%;
    border-bottom: 2px solid #e5e5e5;
    margin-bottom: 10px;
}
.trainer_leave_div p{
    font-weight: 500;
    margin-bottom: 0;
}
.same_lineee{
    display: flex;
}
.same_lineee p{
    margin-bottom: 4px;
}
.trainer_head_name{
    /* width: 25%; */
}
.trinee_head_name{
    width: 75%;
}
.trainer_leave_div_name{
    width: 100%;
    display: flex;
    border: 1px solid #e5e5e5;
    padding: 10px;
    border-radius: 10px;
}
.trainer_body_name{
    /* width: 25%; */
    margin-left: 5px;
}
.trinee_body_name{
    width: 75%;
}
.tariner_history_btn_name{
    color: #00565D !important;
}
.resed-div{
    display: flex;
    justify-content: center;
    columns: #F88D31 !important;
}
.resed-div a{
    color: #F88D31 !important;
}
.resed-div a:hover{
    color: white !important;
    background-color: #F88D31 !important;
}
.trainee_leave_header{
    display: flex;
    flex-direction: column;
}
.trainee_leave_header p{
    margin-bottom: 0;
    font-size: 14px;
}
.trainee_leave_header p span{
    display: inline-block;
    font-weight: bold;
}

/* below css for trainee take leaves when see this surprise msg */
.swal2-header{
    display: none !important;
}
.tranee_svg_icon{
    display: inline-block !important;
}
.tranee_svg_icon svg{
    width: 40px;
    height: 40px;
    margin: 0 auto;
}
.dark-mode .swal2-popup .swal2-content{
    padding: 0 !important;
}
.tranee_course_svg_icon svg{
    width: 70px;
    height: 70px;
    margin: 0 auto;
}
.trainee_course_alret_bold{
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 6px;
}
div:where(.swal2-icon).swal2-warning.swal2-icon-show{
    display: none !important;
}
.tarinee_moduele_info{
    padding: 10px 18px;
    background-color: #fff8f0;
    border: 1px solid #F88D31;
    max-width: 95% !important;
    margin: 0 auto;
    border-radius: 14px;
    margin-bottom: 15px;
    box-shadow: 0px 4px 9px -7px #f88d31;
}
.trainee_moduleee_det{
    display: flex;
    flex-wrap: wrap;
}
.trainee_moduleee_det p{
    width: 50%;
    padding: 4px;
    margin-bottom: 0;
}
.trainee_moduleee_det p span:nth-child(1) {
    color: #000000;
    font-size: 15px;
    font-weight: 600;
}

.trainee_moduleee_det p span:nth-child(2) {
    font-size: 14px;
    color: #4c4c4c;
    font-weight: 400;
}

/* admin_dashboard */


/* left side */
.admin_dashboard{
    width: 100%;
    padding: 14px;
}
.admin_dashboard p{
    margin-bottom: 0;
}
.today_admin_title h5{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0;
}
.today_admin_data{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.today_admin_select{
    position: relative;
    display: inline-block;
    width: 100px;
}
.select-text-admin {
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: 1px solid #CECECE;
    padding: 4px 8px;
    border-radius: 6px;
    width: 100%;
    outline: none;
    cursor: pointer;
    background-color: #fff;
    font-size: 14px;
}
.custom-arrow {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none;
}
.custom-arrow svg{
    width: 15px;
    height: 15px;
}
.same_admin_box{
    background-color: white;
    position: relative;
    box-shadow: 0 0 4px 0 #e8eef3;
    padding: 12px 14px 8px 14px;
    color: #000;
    border-radius: 12px;
    overflow: hidden;
    transition: 0.3s ease-in-out;
}
.box_title{
    color: #302F2F;
    font-size: 14px;
    font-weight: 400;
    padding-left: 5px;
}
.icon_name_box{
    display: flex;
    justify-content: start;
    align-items: center;
}
.four_box{
    transition: 0.5s ease-in-out;
}
.four_box:hover .box_btn_set svg {
    transform: rotate(360deg) scale(1.2);
    transition: transform 0.4s ease-in-out;
    
}
.four_box:hover .same_admin_box {
    box-shadow: 0px 1px 0px 0px #c7c7c7;
}
.number_admin_count span:nth-child(1){
    font-size: 40px;
    font-weight: bold;
}
.number_admin_count span:nth-child(2){
    font-size: 16px;
    color: #6C6C6C;
    margin-left: -5px;
}
.box_btn_set{
    position: absolute;
    right: -7px;
    bottom: -7px; 
    border-radius: 50%;
    display: flex;
    justify-content:center;
    align-items: center;
    width: 45px;
    height: 45px;
    background-color: #fff;
    transition: 0.5s ease-in-out;
}
.admin_att_box{
    border: 5px solid #CFFFC2;
}
.admin_leave_box{
    border: 5px solid #FFB6B6;
}
.admin_abs_box{
    border: 5px solid #DFB6FF;
}
.admin_late_box{
    border: 5px solid #FFD6B4;
}
.six_one{
    display: flex;
    justify-content: start;
    align-items: center;
}
.six_trainee_box{
    background-color: white;
    border: 1px solid #EBEBEB;
    position: relative;
    box-shadow: 0 0 4px 0 #e8eef3;
    padding: 10px 8px;
    color: #000;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.six_trainee_box p:nth-child(1){
    font-size: 30px;
    font-weight: bold;
}
.six_trainee_box p:nth-child(2){
    font-size: 13px;
    line-height: 17px;
    color: #505050;
    padding-left: 5px;
}
.dot_btn{
    border: none;
    outline: none;
    background-color: transparent;
    position: relative;
}
.dot_btn:before{
    width: 14px;
    height: 14px;
    background-color: #FFD0A8;
    position: absolute;
    top: 7px;
    left: 1px;
    border-radius: 50%;
    content: "";
    transition: 0.5s ease-in-out;
}
.dot_btn svg {
    position: relative;
    z-index: 1;
    transition: transform 0.4s ease-in-out;
}
.admin_six_box:hover .dot_btn:before {
    transform: translateX(18px); 
    transition: transform 0.4s ease-in-out;
    background-color: #F88D00;
}
.admin_six_box:hover .dot_btn .svg_rotate {
    transform: rotate(180deg);
    transition: transform 0.4s ease-in-out;
  }





/* right side */
.set_admin_div{
    position: sticky;
    top: 50px !important;
}
.admin_today_att_list{
    background-color: white;
    padding: 18px 12px;
    border-radius: 14px;
    box-shadow: 0 0 4px 0 #e8eef3
}
.right_side_title{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.right_side_title p{
    font-size: 16px;
    color: #000;
    font-weight: 700;
}
.right_side_a{
    display: flex;
    justify-content: center;
    align-items: center;
}
.right_side_a:hover svg {
    transform: rotate(360deg); 
    transition: transform 0.6s ease-in-out; 
}
.right_side_a span:nth-child(2){
    font-size: 12px;
    color: #0075FF;
    padding-left: 2px;
    padding-top: 2px;
}
.card_img_box{
    width: 45px;
    height: 45px;
    object-fit: cover;
    border: 1px solid #e3e3e3;
}
.todays_main_box{
    padding: 10px 0 0 0;
}
.img_pro_text{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}
.admin_pro_text{
    display: flex;
    justify-content: space-between;
}
.admin_name_time{
    padding-left: 8px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}
.admin_trainee_name{
    font-size: 16px;
    color: #000;
    font-weight: 600;
}
.right_sidee_noti{
    transition: 4s ease-in-out;
    display: inline-block;
}
.right_sidee_noti:hover svg path {
    fill: #F88D31;
    transition: fill 0.3s ease-in-out;
}

.admin_traiee_present{
    color: #25BB00;
    padding-left: 4px;
}
.admin_traiee_leave{
    color: #AC39D4;
    padding-left: 4px;
}
.admin_traiee_late{
    color: #F88D31;
    padding-left: 4px;
}
.admin_traiee_absent{
    color: #EA0202;
    padding-left: 4px;
}
.admin_trainee_time{
    font-size: 13px;
    color: #7C7C7C;
}
.admin_see_trainee_div{
    padding: 16px 0 0 0;
}
.admin_see_trainee{
    width: 100%;
    padding: 12px 18px;
    background-color: #F88D31;
    color: white;
    border: none;
    outline: none;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    text-align: center;
    transition: 0.5s ease-in-out;
    border: 2px solid transparent;
}
.admin_see_trainee:hover{
    background-color: white;
    border: 2px solid #F88D31;
    color: #F88D31 !important;
}
.admin_see_tech{
    font-weight: 600;
    color: #000 !important;
}
.admin_see_tech_hire{
    font-weight: 600;
    color: #000 !important;
    font-size: 16px;
}

/* new table CSS */
.admin_table_new{
    background-color: white;
    padding: 14px 12px;
    border-radius: 12px;
}
.admin_same_tabel_title{
    display: flex;
    justify-content: space-between;
    align-items: center;

}
/* for select Time Slot Trainee List */
.each_admin_select{
    position: relative;
    display: inline-block;
    width: 90px;
}
.each_select {
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: 1px solid transparent;
    padding: 4px 8px;
    border-radius: 6px;
    width: 100%;
    outline: none;
    cursor: pointer;
    background-color: #fff;
    color: #0075FF;
    font-size: 13px;
    position: relative;
}
.each_custom_arrow {
    position: absolute;
    top: 13px;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
}
.each_custom_arrow svg{
    width: 12px;
    height: 12px;
}
.each_custom_arrow svg path {
    fill: #0075FF;
}












.each_admin_select_one{
    position: relative;
    display: inline-block;
    width: 90px;
}
.each_select_one {
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: 1px solid transparent;
    padding: 4px 8px;
    border-radius: 6px;
    width: 100%;
    outline: none;
    cursor: pointer;
    background-color: #fff;
    color: #F88D31;
    font-size: 13px;
    position: relative;
}
.each_custom_arrow_one {
    position: absolute;
    top: 13px;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
}
.each_custom_arrow_one svg{
    width: 12px;
    height: 12px;
}
.each_custom_arrow_one svg path {
    fill: #F88D31;
}
.all_select_admin{
    display: flex;
    justify-content: center;
    align-items: center;
}
.all_select_admin div ,.all_select_admin a{
    margin: 0 2px !important;
}
.each_box_title h5{
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 0;
}
.table_refresh{
    padding-bottom: 4px;
    position: relative;
    display: inline-block;
}
.table_refresh span:nth-child(2){
    font-size: 12px;
    color: #0075FF;
    padding-top: 2px;
}
.table_refresh:hover svg {
    transform: rotate(360deg); 
    transition: transform 0.6s ease-in-out; 
}

/* highlight table */
.admin_common_table{
    width: 100%;
    margin: 0 auto;
}
.highlight_table {
    width: 100%;
    margin-top: 10px;
    /* overflow-x: scroll; */
}

.highlight_table table {
    width: 100%;
    border-collapse: collapse;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
}

.highlight_table th,
.highlight_table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.highlight_table th {
    background-color: #f9f9f9;
    font-weight: bold;
    border-bottom: 2px solid #ccc;
    font-size: 14px;
    color: #6C6767;
}

.highlight_table tbody tr:hover {
    background-color: #fbfbfb;
}

.highlight_table td {
    color: #000000;
    font-size: 14px;
    font-weight: 600;
}









/* module progress table */
.module_progreess_table {
    width: 100%;
    margin-top: 10px;
    /* overflow-x: scroll; */
}

.module_progreess_table table {
    width: 100%;
    border-collapse: collapse;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
}

.module_progreess_table th,
.module_progreess_table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.module_progreess_table th {
    background-color: #f9f9f9;
    font-weight: bold;
    border-bottom: 2px solid #ccc;
    font-size: 14px;
    color: #6C6767;
}

.module_progreess_table tbody tr:hover {
    background-color: #fbfbfb;
}

.module_progreess_table td {
    color: #2B3674;
    font-size: 14px;
    font-weight: 700;
}
.module_filter{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 16px;
    background-color: #F4F7FE;
    color: #000 !important;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
}
.admin_module_pending{
    color: #F88D31 !important;
}
.admin_module_working{
    color: #2B3674 !important;
}
.admin_module_completed{
    color: #25BB00 !important;
}

/* time charts */
.admin_time_charts{
    width: 100%;
}
.time-links {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
  }

  .time-link {
    font-size: 11px;
    color: #007BFF;
    transition: 0.3s ease-in-out;
    letter-spacing: 1px;
  }

  .time-link:hover {
    text-decoration: underline !important;
    font-weight: bold;
  }



/* Trainee List By Courses charts */
.admin_course_charts{
    width: 100%;
}
.time-links-new {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
  }

  .time-link-new {
    font-size: 11px;
    color: #007BFF;
    transition: 0.3s ease-in-out;
    letter-spacing: 1px;
  }

  .time-link-new:hover {
    text-decoration: underline !important;
    font-weight: bold;
  }

  .admin_set_time_date{
    max-width: 60%;
    margin: 0 auto;
  }
  .adminn_set_date_time{
    display: flex;
    justify-content: center;
    align-items: center;

  }
.ad_date{
    width: 50%;
    margin-right: 5px;
}
.ad_time{
    width: 50%;
    margin: 0 1px;
    margin-left: 5px;
}
.ad_date span:nth-child(1){
    font-size: 16px;
    font-weight: 600;
}
.ad_time span:nth-child(1){
    font-size: 16px;
    font-weight: 600;
}


.fixed_td_span{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn_span_name{
    width: 100px;
    display: inline-block;
}
.btn_del_name{
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}



/* trainee fess module */
.fees_pending_title{
    font-size: 17px;
}
.modal-title span{
    font-size: 17px;
    color: #F88D31;
    padding-left: 5px;
}
.pending_fees_body_div p{
    margin-bottom: 0;
}
.pending_fees_body_div{
    padding: 10px 18px;
    background-color: #f7f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    margin-bottom: 15px;
    box-shadow: 0px 4px 9px -7px #9f9f9f;
}
.pending_fees_body{
    display: flex;
    flex-wrap: wrap;
}
.pending_fees_body p{
    width: 50%;
    padding: 3px 0;
}

.pending_fees_body p span:nth-child(1){
    font-size: 15px;
    font-weight: 600;
}
.pending_fees_body p span:nth-child(2){
    font-size: 15px;
    padding-left: 5px;
}
.pending_titile p{
    margin-bottom: 0;
    font-size: 17px;
    font-weight: 500;
}
.pending_titile{
    padding: 12px 0;
    background-color: #f7f7f7;
    color: black;
    text-align: center;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.pending_info_box{
    border: 2px solid #f7f7f7;
    padding: 15px;
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    margin: 15px 0;
}
.pending_det{
    border: 2px solid #f7f7f7;
    border-top: none;
    padding: 10px 10px 10px 10px;
    display: flex;
    flex-wrap: wrap;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.pending_det p{
    width: 33.33%;
    margin-bottom: 0;
}
.pending_det p span:nth-child(1){
    font-size: 15px;
    font-weight: 600;
}
.pending_det p span:nth-child(2){
    font-size: 15px;
    padding-left: 5px;
}






.pending_det_noti{
    border: 2px solid #f7f7f7;
    border-top: none;
    padding: 10px 10px 10px 10px;
    display: flex;
    flex-wrap: wrap;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    height: 200px;
    overflow: auto;
}
.pending_det_noti p{
    width: 33.33%;
    margin-bottom: 0;
}
.pending_det_noti p span:nth-child(1){
    font-size: 15px;
    font-weight: 600;
}
.pending_det_noti p span:nth-child(2){
    font-size: 15px;
    padding-left: 5px;
}
.trainee_pen_fees{
    color: #F88D31;
    font-weight: 500
}
.trainee_due_date{
    color: #EA0202;
    font-weight: 500
}
.trainee_res_fees{
    color: #25bb00;
    font-weight: 500
}
.trainee_reminder_count{
    color: #0075FF;
    color: 500;
}
.fees_cmnt{ 
    height: 150px;
    overflow: auto;
}

.trainee_fees_cmnt {
    width: 100%;
    border: 1px solid #e9e9e9;
    border-radius: 10px;
    margin: 4px 0;
    padding: 3px 8px;
    margin-top: 14px;
}
.trainee_fees_cmnt p{
    margin-bottom: 0;
}
.trainee-cmnt-titile{
    padding: 4px 0 4px 0;
    font-size: 15px;
    color: #000;
}
.trainee-cmnt{
    font-size: 14px;
    padding-bottom: 5px;
}
.trainee-cmnt-veri{
    font-size: 14px;
    padding-bottom: 5px;
}
/* .veri_notified_scrollbar{
    width: 100%;
    height: 200px;
    overflow: auto;
    margin-top: 20px;
    border-radius: 15px;
    
} */
.veri_notoii{
    width: 100%;
    padding-top: 4px;
}
.trainee-cmnt-new{
    font-size: 14px;
    /* padding-bottom: 6px; */
}
.trainee-cmnt-new p{
    width: 100%;
}
.trainee-cmnt-posted-veri p{
    text-align: right;
    font-size: 12px;
}
.trainee-cmnt-posted-new p{
    width: 100%;
    text-align: right;
    font-size: 12px;
    padding-bottom: 5px;
    font-style: italic;
}
.trainee-cmnt-posted-new{
    text-align: right;
    font-size: 12px;
    padding-bottom: 2px;
    font-style: italic;
}
.trainee-cmnt-posted{
    text-align: right;
    font-size: 12px;
    padding-bottom: 2px;
    font-style: italic;
}
.trainee-cmnt-posted p{
    width: 100%;
    text-align: right;
    font-size: 12px;
    padding-bottom: 5px;
    font-style: italic;
}
.paid_division{
    padding-top: 30px;
}
.already_paid_text p{
    margin-bottom: 0;
    padding: 12px 12px;
    width: 150px;
    color: #25BB00;
    font-weight: 600;
    font-size: 18px;
    text-align: center;
}
.already_paid_text{
    background-color: #f2ffef;
    border-radius: 6px;
    border: 1px solid #25BB00;
}
.svg-icon-text-fees {
    display: flex;
    justify-content: center;
    align-items: center;
}
.svg-icon-text-fees span svg{
    width: 18px;
    height: 18px;
}
.svg-add-icon{
    margin-right: 20px;
}
.svg-equally-icon{
    margin-left: 20px;
}
.trainee_already_paid_fees p{
    margin-bottom: 0;
    padding-top: 5px;

}
.total_feess_amount p{
    margin-bottom: 20px;
    font-size: 18px;
}
.total_feess_amount p span{
    color: green;
    font-weight: 600;
}
.total_feess_amount{
    display: flex;
    justify-content: center;
    align-items: center;
}
.two_date_divison{
    padding: 20px 12px 4px 12px;
}
.two_date_divison p{
    margin-bottom: 0;
}
.fees_check_date{
    display: flex;
    align-items: center;
}
.fees_check {
    position: relative;
    /* border: 2px solid #25BB00 !important; */
    border-radius: 2px;
    background: none;
    cursor: pointer;
    line-height: 0;
    margin: 0 .6em 0 0;
    outline: 0;
    padding: 0 !important;
    vertical-align: text-top;
    height: 18px;
    width: 18px;
    -webkit-appearance: none;
    opacity: .5;
}

.fees_check:focus {
    outline: #25BB00 !important;
    border-color: #25BB00 !important;
}

.fees_check:hover {
    opacity: 1;
}

.fees_check:checked {
    background-color: #BEFFAE !important;
    opacity: 1;
    border-color: #25BB00 !important;
}


.fees_check:before {
    content: '';
    position: absolute;
    right: 50%;
    top: 50%;
    width: 5px;
    height: 10px;
    border: solid #353535;
    border-width: 0 1px 1px 0;
    margin: -1px -1px 0 -1px;
    transform: rotate(45deg) translate(-50%, -50%);
    z-index: 2;
}
.traineees_feees_status .fees_statue_done_tr{
    background-color: #BDF06F;
}
.traineees_feees_status .fees_statue_done_tr td:last-child {
    background-color: #BDF06F !important;
}
.fees_statue_done svg{
    width: 25px;
    height: 25px;
}
.traineees_feees_status .fees_statue_pending_tr{
    background-color: #ffe3ae;
}
.traineees_feees_status .fees_statue_pending_tr td:last-child {
    background-color: #ffe3ae !important;
}
.fees_statue_pending svg{
    width: 25px;
    height: 25px;
}
.traineees_feees_status .fees_statue_delay_tr{
    background-color: #ffcece;
}
.traineees_feees_status .fees_statue_delay_tr td:last-child {
    background-color: #ffcece !important;
}
.fees_statue_delay svg{
    width: 25px;
    height: 25px;
}
.traineees_feees_status .fees_statue_reminder_tr{
    background-color: #c2ffff;
}
.traineees_feees_status .fees_statue_reminder_tr td:last-child {
    background-color: #c2ffff !important;
}

.traineees_feees_status .fees_statue_notify_tr{
    background-color: #c7c7c7;
}
.traineees_feees_status .fees_statue_notify_tr td:last-child {
    background-color: #c7c7c7 !important;
}

.fees_statue_reminder svg{
    width: 25px;
    height: 25px;
}

.paid_counter{
    display: flex;
    justify-content: center;
    align-items: center;
}
.paid_counter p{
    font-size: 17px;
}
.trainee_paidd_divider{
    display: inline-block;
    padding-left: 4px;
}
.trainee_paidd_fees{
    display: inline-block;
    font-weight: 600;
    color: #25BB00;
    padding-left: 4px;
}
.aero_paid {
    margin: 0 12px;
    display: flex;
    align-items: center;
}
.aero_paid svg{
    width: 18px;
    height: 18px;
}
.trainee_final_fees{
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
}
.trainee_paid_already_fees{
    padding: 20px 12px;
}
.trainee_paid_already_fees p{
    margin-bottom: 0;
}
.fees_title{
    font-size: 15px;
    font-weight: 500;

}

.trainee-holdhistory-table .traineehold-history td {
    position: relative;
}

.trainee-holdhistory-table .traineehold-history td::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #e1b2b2;
    transform: translateY(-50%);
    z-index: 1;
}
.traineelist-holdhistory-table .traineelistunhold-history
{
    background-color: #e1b2b2;
}

.traineelist-holdhistory-table .traineelistunhold-history {
    background-color: #e1b2b2;
}
.traineelist-holdhistory-table .traineelistunhold-history td:last-child {
    background-color: #e1b2b2 !important;
}


.traineelist-holdhistory-table .traineelisthold-history td {
    position: relative;
}
.traineelist-holdhistory-table .traineelisthold-history td::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #e1b2b2;
    transform: translateY(-50%);
    z-index: 1;
}

.tarinee-assign-table .assigntraineehold-history td {
    position: relative;
}

.tarinee-assign-table .assigntraineehold-history td::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #e1b2b2;
    transform: translateY(-50%);
    z-index: 1;
}

.trainee-attendance-table .traineeattendancehold-history td {
    position: relative;
}

.trainee-attendance-table .traineeattendancehold-history td::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #e1b2b2;
    transform: translateY(-50%);
    z-index: 1;
}


.trainer_my_trainee_table .trainersidetraineehold-history td {
    position: relative;
}

.trainer_my_trainee_table .trainersidetraineehold-history td::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #e1b2b2;
    transform: translateY(-50%);
    z-index: 1;
}

.trainee-attendance-table .trainersideattendencetraineehold-history td {
    position: relative;
}

.trainee-attendance-table .trainersideattendencetraineehold-history td::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #e1b2b2;
    transform: translateY(-50%);
    z-index: 1;
}

.trainee-attendance-table .trainersideattendencetraineeunhold-history {
    background-color: #e1b2b2;
}

.trainee-attendance-table .trainersideattendencetraineeunhold-history td:last-child {
    background-color: #e1b2b2 !important;}

.trainee-holdhistory-table .traineeunhold-history{
   background-color: #e1b2b2;
}

.trainee-holdhistory-table .traineeunhold-history td:last-child {
    background-color: #e1b2b2 !important;
}

.trainee-holdhistory-table .traineehold {
    background-color: #dddd1d;
}

.trainee-holdhistory-table .traineehold td:last-child {
    background-color: #dddd1d !important;
}


.tarinee-assign-table .assigntraineeunhold-history{
   background-color: #e1b2b2;
}

.tarinee-assign-table .assigntraineeunhold-history td:last-child {
    background-color: #e1b2b2 !important;
}

.trainee-attendance-table .traineeattendanceunhold-history{
   background-color: #e1b2b2;
}

.trainee-attendance-table .traineeattendanceunhold-history td:last-child {
    background-color: #e1b2b2 !important;
}

.trainer_my_trainee_table .trainersidetraineeunhold-history{
   background-color: #e1b2b2;
}

.trainer_my_trainee_table .trainersidetraineeunhold-history td:last-child {
    background-color: #e1b2b2 !important;
}

.trainee-attendance-table .trainersideattendencetraineeunhold-history{
   background-color: #e1b2b2;
}

.trainee-attendance-table .trainersideattendencetraineeunhold-history td:last-child {
    background-color: #e1b2b2 !important;
}
.requeted_datemargin
{
    margin-left: 164px;
}

/* new css */
.last_admin_view_collapse{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bth_toogle {
    display: flex;
    border-left: 4px solid #F88D31;
    margin-top: 15px;
}


.both_togggle{
    margin: 0 8px;
}
.course-toggle-new {
    display: flex;
}
.toggle-title-new {
    display: flex;
    justify-content: center;
    align-items: center;
}
.toggle-title-new p {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    margin-right: 5px;
}
.trainee-course-collpase-new {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.admin-trainer-course-day-new {
    display: inline-block;
    text-align: right;
    width: 90px;
}












/* edit two togle  */
.edit_two_toggle{
    width: 100%;
    padding: 10px 0;
}
.editt_one ,.editt_two{
    padding: 5px 0;
    border-left: 4px solid #F88D31;
    margin: 4px 0;
}
.module-details{
    padding: 0 14px;
}
.admi_c_modalu_name_div{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.removee_lattest_btn_div{
    margin-right: 14px;
}
.admi_c_modalu_name{

}
.removee_lattest_btn{
    
}
.card-button-new{
    display: flex;
    justify-content: end;
    padding-top: 15px;
}
.emp_note{
    font-size: 14px;
    color: #535353;
    padding: 4px 15px;
    font-weight: 500;
}


/* assign to other new data for add 2 radio btn */
.assign-header p{
    margin-bottom: 0;
    padding-bottom: 5px;
}
.assign-check p{
    margin-bottom: 0;
}
.ass_emp_user_name{
    font-size: 16px;
    color: #000;
}

.assign_trainerrr {
    font-size: 10px;
    margin-left: 30px;
    margin-bottom: 0;
    color: #474747;
    font-weight: normal;
}
.emppppp_name{
    padding: 10px 12px;
    background-color: #f3f3f3;
    border-radius: 10px;
    margin: 10px 0;
}

.traineerrrr_name{
    padding: 10px 12px;
    background-color: #f5f5f5;
    border-radius: 10px;
    margin: 10px 0;
}
.lable_radio_small{
    font-size: 14px;
}
.on_trainer{
    display: inline-block;
    font-size: 11px;
}

.assign-header-hide-details-table {
    border: 1px solid #EBEBEB !important;
    border-top: none !important;
    padding: 4px 10px !important;
}

.assign-header-new-trainer {
    background-color: #def3ff !important;
    color: black !important;
    padding: 10px !important;
    font-weight: bold !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    box-shadow: none !important;
}


/* for trainee hold in general setting  */
.tarinee_holdd_check {
    position: relative;
    /* border: 2px solid #25BB00 !important; */
    border-radius: 2px;
    background: none;
    cursor: pointer;
    line-height: 0;
    margin: 0 .6em 0 0;
    outline: 0;
    padding: 0 !important;
    vertical-align: text-top;
    height: 18px;
    width: 18px;
    -webkit-appearance: none;
    opacity: .5;
}

.tarinee_holdd_check:focus {
    outline: #25BB00 !important;
    border-color: #25BB00 !important;
}

.tarinee_holdd_check:hover {
    opacity: 1;
}

.tarinee_holdd_check:checked {
    background-color: #BEFFAE !important;
    opacity: 1;
    border-color: #25BB00 !important;
}


.tarinee_holdd_check:before {
    content: '';
    position: absolute;
    right: 50%;
    top: 50%;
    width: 5px;
    height: 10px;
    border: solid #353535;
    border-width: 0 1px 1px 0;
    margin: -1px -1px 0 -1px;
    transform: rotate(45deg) translate(-50%, -50%);
    z-index: 2;
}

.under_span_hold {
    padding: 4px 10px;
}
.hold_input_trainee_div{
    width: 10%;
}
.trainee_hold_all_cont{
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
}
.trainee_hold_all_cont P{
    margin-bottom: 0;
}

.hold_static_title{
    width: 100%;
    margin-top: 4px;
}

.traineeE_holddd_text{
    margin-bottom: 0;
    margin-left: 10px;
}

/* marqee content for trainee dashboard */
.special_animation {
    width: 100%;
    overflow: hidden;
    color: #F88D31;
    font-size: 16px;
    font-weight: 700;
    margin: 10px 0px;
    background-color: white;
    padding: 10px 12px 6px 12px;
    border: 1px solid #E8E8E8;
    border-radius: 6px;
    position: relative;
    height: 45px;
}

/* Apply animation only when not paused */
.marquee-text {
    white-space: nowrap;
    position: absolute;
    will-change: transform;
    animation-play-state: running;
}

/* 🛑 Pause animation when hovering over parent */
.special_animation:hover .marquee-text {
    animation-play-state: paused !important;
}

.marquee-text span {
   color: #000;
}

/* Animation keyframes */
@keyframes scrollLeft {
    0% {
        left: 100%;
    }
    100% {
        left: -100%;
    }
}

@keyframes flicker-in {

    0%,
    8%,
    16%,
    24%,
    32%,
    40%,
    48%,
    56%,
    64%,
    72%,
    80%,
    88% {
        background-color: #ff9a99;
    }

    4%,
    12%,
    20%,
    28%,
    36%,
    44%,
    52%,
    60%,
    68%,
    76%,
    84%,
    92% {
        background-color: transparent;
    }

    100% {
        background-color: #99ff9a;
        /* Final color stays */
    }
}

.row-flicker-in-network {
    animation: flicker-in 30s ease-in-out 1 forwards; 
}
/* 
.row-flicker-in-network td:last-child {
    animation: flicker-in 30s ease-in-out 1 forwards;
} */


  /* @keyframes flicker-in {
    0%, 20%, 40%, 60%, 80% { background-color: #99ff9a; }
    10%, 30%, 50%, 70%, 90%, 100% { background-color: transparent; }
  }
  
  .row-flicker-in-network {
    animation: flicker-in 3s ease-in-out 1;
  } */






  @keyframes flicker-out {

      0%,
      8%,
      16%,
      24%,
      32%,
      40%,
      48%,
      56%,
      64%,
      72%,
      80%,
      88% {
          background-color: #ffff99;
      }

      4%,
      12%,
      20%,
      28%,
      36%,
      44%,
      52%,
      60%,
      68%,
      76%,
      84%,
      92% {
          background-color: transparent;
      }

      100% {
          background-color: #ffff99;
          /* Final color stays */
      }
  }

  .row-flicker-out-network {
      animation: flicker-out 30s ease-in-out 1 forwards;
  }
  
  .row-flicker-out-network td:last-child {
    animation: flicker-out 30s ease-in-out 1 forwards;
  }



  @keyframes flicker-unhold {

      0%,
      8%,
      16%,
      24%,
      32%,
      40%,
      48%,
      56%,
      64%,
      72%,
      80%,
      88% {
          background-color: #c2ffff;
      }

      4%,
      12%,
      20%,
      28%,
      36%,
      44%,
      52%,
      60%,
      68%,
      76%,
      84%,
      92% {
          background-color: transparent;
      }

      100% {
          background-color: #c2ffff;
          /* Final color stays */
      }
  }

  .row-flicker-unhold {
      animation: flicker-unhold 30s ease-in-out 1 forwards;
  }

  .row-flicker-unhold td:last-child {
      animation: flicker-unhold 30s ease-in-out 1 forwards;
  }


































  
  /* @keyframes flicker-out {
    0%, 20%, 40%, 60%, 80% { background-color: #ffff99; }
    10%, 30%, 50%, 70%, 90%, 100% { background-color: transparent; }
  }
  
  .row-flicker-out-network {
    animation: flicker-out 3s ease-in-out 1;
  } */

  .in-network-dot{
    width: 5px;
    height: 5px;
    background-color: green;
    display: inline-block;
    border-radius: 50%;
    margin-left: 4px;
  }


  .out-network-dot{
    width: 5px;
    height: 5px;
    background-color: #c9b300;
    display: inline-block;
    border-radius: 50%;
    margin-left: 4px;
  }
  






  /* course completed modal css */

.course-header {
    border-bottom: 1px solid #DADADA !important;
    background-color: #F88D31;
    display: inline-flex !important;
    justify-content: center !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;

}
.trainee_cong_img img {
    width: 250px;
}
.trainee_course_done_title{
    text-align: center;
}
.trainee_course_done_title p{
    margin-bottom: 0;
    font-size: 22px;
}
.trainee_course_done_title p strong{
    color: #0078d7;
    padding: 0 12px;
}
.trainee_comp_course_name{
    font-size: 18px;
    color: #000;
    font-weight: bold;
}
.trainee_cou_des p:nth-child(1){
    margin-bottom: 0;
    text-align: justify;
    padding: 12px 0;
}
.trainee_cou_des p:nth-child(2){
    margin-bottom: 0;
    text-align: justify;
    padding: 6px 0;
    color: gray;
    font-weight: 500;
}
.trainee_cour_details{
    background-color: white;
    box-shadow: 0 0 5px #00000021;
    padding: 18px 18px;
    border-radius: 20px;
    border: 1px solid #EBEBEB;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 12px;
}
.trainee_cour_details p{
    margin-bottom: 0;
    width: 48%;
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;
    font-size: 15px;
}
.trainee_cour_details p span:nth-child(2){
    display: inline-block;
    padding-right: 18px;
}

.trainee_cour_details p:nth-child(1) > span:nth-child(2) > span:nth-child(1) {
  color: #0075FF;
  font-weight: bold;
}

.trainee_cour_details p:nth-child(2) > span:nth-child(2) > span:nth-child(1) {
  color: #25BB00;
  font-weight: bold;
}

.trainee_cour_details p:nth-child(3) > span:nth-child(2) > span:nth-child(1) {
  color: #EA0202;
  font-weight: bold;
}
.trainee_cour_details p:nth-child(4) > span:nth-child(2) > span:nth-child(1) {
  color: #AC39D4;
  font-weight: bold;
}

.trainee_cour_details p:nth-child(5) > span:nth-child(2) > span:nth-child(1) {
  color: #FF00C7;
  font-weight: bold;
}

.trainee_cour_details p:nth-child(6) > span:nth-child(2) > span:nth-child(1) {
  color: #0075FF;
  font-weight: bold;
}



.course_guidlinees p{
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 700;
    padding-left: 12px;
    margin-top: 15px;
}

.trainee_hold_main ul li{
    text-align: left;
    font-size: 16px;
}

.last_course_trainee_text{
    border-top: 1px solid #D9D9D9;
    padding-top: 15px;
    font-size: 16px;
    text-align: justify;
}
.course_logut_btn{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.course_logut_btn a{
    background-color: #009923;
    padding: 12px 22px;
    color: white;
    border-radius: 10px;
    transition: 0.4s ease-in-out;
}
.course_logut_btn a:hover{
    color: white !important;
    background-color: green;
}
.course_logut_btn a span svg{
   width: 36px;
   height: 36px;
   margin-left: 12px;
}

.circle_set{
    position:  relative;
    z-index: 1;
}
.cirel_back{
    position: absolute;
    top: 20px;
    left: 0;
    z-index: -1;
    pointer-events: none;
}
.cirel_back svg{
   width: 120px;
   height: 120px;
}
.cirel_back_new{
    position: absolute;
    bottom: 200px;
    right: 0;
    z-index: -1;
    pointer-events: none;
    transform: rotate(180deg);
}
.cirel_back_new svg{
   width: 120px;
   height: 120px;
}

#acceptCookiesButton:disabled {
    background-color: grey;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Style for the enabled button */
#acceptCookiesButton {
    background-color: #F88D31;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
}
.rating_div{
    width: 100%;
    padding: 10px 0;
}
.rating_title_btn{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.left_rat_div{
    display: flex;
    align-items: center;
}
.trainer_rat_count{
    color: #000;
    font-size: 18px;
    margin-bottom: 0;
    padding: 0 5px;
    font-weight: 500;
    display: flex;
    align-items: center;
}
.trainer_rat_count span{
    color: #F88D31;
    font-size: 18px;
    display: inline-block;
    padding-left: 5px;
}
.trainer_rat_name{
    color: #000;
    font-size: 20px;
    margin-bottom: 0;
    font-weight: 700;
    padding: 0 5px;
    display: flex;
    align-items: center;
}
.trainer_rat_name span{
    color: darkgray;
    font-size: 14px;
    font-weight: normal;
    display: inline-block;
    padding-left: 5px;
}
.rat_bth_btn{
    display: flex;
    align-items: center;
}
.rat_bth_btn a{
    margin: 0 4px;
}
.review_progress{
    width: 100%;
    padding: 20px 15px 0 15px;
}
.divider_rating{
    width: 100%;
    height: 5px;
    border-radius: 20px;
    background-color: #F2F2F2;
}

.rat_trainerrr{
    width: 100%;
    display: flex;
}
.rat_tra_name{
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0;
    position: relative;
    padding: 12px 0 0 4px;
    width: 20%;
}
.rat_tra_name::before{
    position: absolute;
    content: "";
    width: 14px;
    height: 14px;
    background-color: #DDDDDD;
    border-radius: 50%;
    top: -10px;
    left: 0
}
.rat_tra_name.rat_done::before {
    background-color: #00980A;
}

.rating_table{
    width: 100%;
}
.rating_table table{
     width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin-top: 40px;
}
.rating_table th, 
.rating_table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  vertical-align: top;
  font-size: 17px;
}

.rating_table th:nth-child(1),
.rating_table td:nth-child(1) {
  width: 5%;
}

.rating_table th:nth-child(2),
.rating_table td:nth-child(2) {
  width: 15%;
}

.rating_table th:nth-child(3),
.rating_table td:nth-child(3) {
  width: 55%;
}

.rating_table th:nth-child(4),
.rating_table td:nth-child(4) {
  width: 25%;
}

.star-rating {
  display: inline-block;
  cursor: pointer;
  font-size: 20px;
}

.star {
  color: gray;
  transition: color 0.2s;
  font-size: 26px;
}

.star.filled {
  color: green;
}