body {
    background-color: var(--BackgroundColor);
    transition: background-color .5s;
    padding: 0px;
    margin: 0px;
}

:root {
    --themeColor: #302B6D;
    --secondaryColor: #01A2D2;
    --BackgroundColor: #F8F8FF;
    --buttonColor: #F26F35;
    --primaryTextColor: #464646;
    --secondaryTextColor: #76797D;
    --fontFamily: 'WorkSans';
    --fontBold: 700;
    --fontWeightRegular: 400;
    --borderRadius10: 10px;
    --borderRadius5: 5px;
    --lineHeight: 1.7;
    --color-white: white;
    --line-height-titles: 1.2;
    --grid-gap: 40px 60px;
    --box-shadow10: 1px 5px 10px 0px #F2F7FA;
    --box-shadow20: 1px 5px 20px 0px #F2F7FA;
    --box-shadow30: 10px 15px 30px 0px rgb(91, 49, 69, 0.1);
    --box-shadow40L: 0 .5rem 2rem rgba(55, 62, 66, 0.2);
    --box-shadow40: 0 .5rem 2rem rgba(100, 16, 7, .2);
    --backgroundImageRight: linear-gradient(to right, #0c2233, #184361, #236692, #2c8cc7, #34b4ff);
    --Approved: #239B56;
    --New: #B03A2E;
    --InProgress: #F39C12;
    --OnHold: #FF5733;
    --Closed: #2ECC71;
    --Assigned: #0096CC;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--themeColor);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/*AUTHENTICATE*/
.containerBackAdmin {
    background-repeat: no-repeat;
    background-image: url(../../Assets/image/inProductsBgWhite.png);
    background-size: cover;
    padding-bottom: 2%;
}

.AuthwrapperAdmin .container-fluid {
    padding: 8% 10% 0% 10%;
}

.authCompImg img {
    height: 60px;
}

.aboutProfile {
    padding-top: 2%;
}

.loginCardAdmin .well {
    background-color: white;
    box-shadow: var(--box-shadow40);
    z-index: 2;
    padding: 15px 20px 15px 20px;
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;
    border: transparent;
}

.loginCardAdmin .well h1 {
    font-size: 1.4em;
    color: var(--themeColor);
    margin: 0px;
    padding-bottom: 5px;
}

.loginCardAdmin .well h4 {
    font-size: 1em;
    margin: 0px;
    font-style: italic;
    padding-top: 7px;
}

#sectionHeadearAdmin .formPannelAuth .formPannel input {
    border: 1px solid var(--themeColor);
    border-radius: var(--borderRadius5);
    background-color: transparent;
    font-size: 1em;
    border-radius: 10px;
    padding: 25px 20px;
    margin-top: 15px;
}

#sectionHeadearAdmin .formPannelAuth input::placeholder {
    font-size: 1em;
    letter-spacing: 0px;
}

.loginCardAdmin .well .actionBtnDark {
    padding: 12px 25px;
    font-size: 0.9em;
    border-radius: 10px;
    margin-top: 10px;
    background-color: var(--themeColor);
    width: 100%;
    color: white;
    border: none;
}

.incorrectBaner {
    height: 30px;
    background-color: transparent;
    padding-top: 15px;
    text-align: center;
}

#incorrect {
    color: red;
    padding: 0px;
    font-size: 0.8em;
    border-radius: 15px;
}

#sectionHeadearAdmin .actionBtnBack {
    background-color: transparent;
    border: none;
    padding-top: 15px;
}

#sectionHeadearAdmin .createOneComp .well {
    background-color: white;
    border-radius: var(--borderRadius10);
    box-shadow: var(--box-shadow40);
    padding: 5px;
    margin: 0px;
    border-radius: 10px;
    text-align: center;
    margin-top: 10px;
}

#sectionHeadearAdmin .createOneComp p {
    font-size: 0.9em;
    padding: 0px;
    padding-top: 10px;
    text-align: center;
}

#sectionHeadearAdmin .createOneComp p a {
    font-size: 0.9em;
    font-weight: bold;
    color: var(--themeColor);
}

#AllFields {
    text-align: center;
    color: red;
    font-size: 0.9em;
}

.AuthwrapperAdmin .infoBottom h6 {
    text-align: center;
    font-size: 0.8em;
    line-height: 18px;
    padding-top: 10px;
    margin: 0px;
}

.showPassword {
    padding-top: 0px;
    font-size: 0.9em;
}

.errorPane {
    background-color: var(--New);
    color: white;
    font-size: 0.9em;
    text-align: center;
    padding: 8px 55px;
    border-radius: 40px;
}

/*AUTHENTICATE*/


/*BUTTONS */
.BtnPrimaryWhite {
    width: 100%;
    letter-spacing: 1px;
    background-color: white;
    border: 1px solid var(--themeColor);
    border-radius: var(--borderRadius10);
    padding: 10px 10px;
    color: var(--themeColor);
    transition: 0.3s;
    margin-top: 0px;
    transition-timing-function: ease-in-out;
    margin-bottom: 0px;
    font-size: 1em;
    border-radius: 5px;
}

.BtnPrimaryDark {
    width: 100%;
    letter-spacing: 1px;
    background-color: var(--themeColor);
    border: 1px solid var(--themeColor);
    border-radius: var(--borderRadius10);
    padding: 10px 10px;
    color: var(--themeColor);
    transition: 0.3s;
    margin-top: 0px;
    color: white;
    transition-timing-function: ease-in-out;
    margin-bottom: 0px;
    font-size: 1em;
    border-radius: 5px;
}

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

.buttonEdit {
    background-color: var(--InProgress);
    border: 1px solid var(--InProgress);
    border-radius: 5px;
    padding: 5px 10px;
    color: var(--themeColor);
    transition: 0.3s;
    color: white;
    transition-timing-function: ease-in-out;
    font-size: 1em;
}

.buttonAdd {
    background-color: var(--Approved);
    border: 1px solid var(--Approved);
    border-radius: 5px;
    padding: 5px 10px;
    transition: 0.3s;
    color: white;
    transition-timing-function: ease-in-out;
    font-size: 1em;
}

.buttonDelete {
    background-color: var(--New);
    border: 1px solid var(--New);
    border-radius: 5px;
    padding: 5px 10px;
    transition: 0.3s;
    color: white;
    transition-timing-function: ease-in-out;
    font-size: 1em;
}

.buttonTimes {
    background-color: var(--New);
    border: 1px solid var(--New);
    border-radius: 5px;
    padding: 5px 10px;
    transition: 0.3s;
    color: white;
    transition-timing-function: ease-in-out;
    font-size: 1em;
}

.buttonNavBack {
    background-color: white;
    width: 100%;
    color: white;
    background-color: var(--themeColor);
    border-radius: 5px;
    padding: 10px 25px;
    font-size: 0.9em;
    border: none;
}

/*BUTTONS*/

.modal-header {
    text-align: center;
}

.modal-body input {
    border: 1px solid var(--themeColor);
    padding: 30px 15px;
    border-radius: 5px;
}

.paggignation {
    padding: 5px 0px 0px 0px;
    margin-bottom: 10px;
}

.paggignation h4 {
    margin: 0px;
    padding: 15px 0px 0px 0px;
    font-size: 1em;
    font-weight: 600;
    color: var(--secondaryColor);
}

.paggignation a {
    font-weight: normal;
    color: var(--primaryTextColor);
}

.paggignation h5 {
    margin: 0px;
    text-align: right;
    padding: 10px 15px 0px 0px;
    font-size: 1em;
}

.tablePannel tr {
    font-size: 1em;
}
 

.tablePannel tr th{
    font-size: 1em;
}
 .tablePannel tr td{
    font-size: 1em;
}
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.gallery img {
    height: 250px;
    border-radius: 15px;
    margin: 0px 10px 15px 0px;
}

.containerComp {
    height: 690px;
    border-radius: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.containerComp .form-group{
    padding: 0px 25px 0px 0px;
}
.containerComp img{
    border-radius: 15px;
}
.containerComp label{
    padding-top: 15px;
}
.containerComp input{
    border-radius:10px;
    border: 1px solid var(--themeColor);
    padding: 25px 15px;
}
.containerComp select{
    border-radius:10px;
    border: 1px solid var(--themeColor);
    height: 52px;
}
.statusTab {
    color: white;
    font-size: 0.9em;
    text-align: center;
    margin-top: 5px;
}

span.Approved {
    background-color: var(--Approved);
    padding: 5px 15px;
    border-radius: 5px;
}

span.New {
    background-color: var(--New);
    padding: 5px 15px;
    border-radius: 5px;
}