.Container {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: left;
    vertical-align: central;
    background: linear-gradient(to right, White, #ff6a00);
    border-radius: 10px;
    z-index: 7;
    box-shadow: black 1px 1px 5px;
}
    .Container-span {
        color: dimgray;
       text-align:center;
        font-family: Calibri;
     font-weight:800;
      margin:auto;
        font-size: 18px;
    }
.ImageButton {
    z-index: 8;
    margin: 0px 20px 0px auto;
    height: 50px;
    width: 50px;
    border-radius: 50%; 
    object-fit:cover;
    cursor: pointer;
}
.RightImage {
    object-fit: scale-down;
    width: 50px;
    margin: 0px 0px 0px 20px;
}
h1 {
    color: #ff6a00;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-family: Cambria;
    text-shadow: 1px 1px 1px #7a3300, 
        1px 1px 2px #7a3300,
        1.2px 1.2px 1px #7a3300, 
        1.2px 1.2px 2px #7a3300, 
       
        1.3px 1.3px 2px white,
        1.4px 1.4px 2px white, 
        1.5px 1.5px 2px white, 
        1.6px 1.6px 2px white,
        2px 2px 2px black,
        2.1px 2.1px 2px black,
        2.2px 2.2px 2px black, 
        2.3px 2.3px 2px black;
    margin:5px;
    font-style: italic;
    font-size: 30px;
  
}
h2 {
    font-size: 23px;
    color: dimgrey;
    font-weight: 600;
    font-family: Calibri;
    font-style: italic;
    padding: 5px;
    margin: 4px 0px 4px 0px;
}
.UserInfoPanelHidden {
    display: block;
    opacity:1%;
    background: White;
    height: auto;
    box-shadow: gray 0px 0px 5px;
    width: 280px;
    position: absolute;
    z-index: 6;
    margin: 50px 0px 0px auto;
    right: 20px;
    transform: translateY(-160px) translateX(110px) scale(0.02);
    transition-duration: 0.5s;
}
.UserInfoPanel {
    top: auto;
    z-index: 2000;
    opacity: 100%;
    transform: translateY(0px);
    transition-duration: 0.5s;
}
    .UserInfoPanel::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 25px 0 auto;
        top:-10px;
        width: 0;
        height: 0;
        border-bottom: 10px solid white;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
    }
.UserInfoFieldDiv {
    display: flex;
    flex-wrap: wrap;
    transition: 0.5s;
    transition-property: background;
}
.UserInfoFieldDiv:hover  {
    Background: #9c9c9c;
}

.FieldLabel {
    background: #ff6a00;
    padding: 1px;
    font-size: 13px;
    margin: 5px 0px auto 10px;
   
    color: white;
    font-weight: 600;
    cursor: default;
}

.FieldValue {
    color: black;
    height: fit-content;
    margin: 0px 0px 0px 10px;
    padding: 0px;
    font-family: Calibri;
    font-size: 20px;
    font-style: italic;
    cursor: default;
    text-transform: uppercase;
    width: 100%;
    font-weight: bolder;
    width: 100%;
}
.LogoutButton {
    width: 100%;
    height: 25px;
    border: none;
    background: Red;
    font-weight: bold;
    box-shadow: gray 0px 0px 3px;
    color: black;
    transition: 0.3s;
    transition-property: box-shadow;
}

    .LogoutButton:hover {
       
        cursor: pointer;
        color: white;
        box-shadow: gray 0px 0px 7px;
    }
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1999;
}

.CommonDiv {
    display:flex;
    flex-flow:wrap;
    padding:10px;
    box-shadow: grey 1px 2px 5px;
}
.CommonDivForTable {
   
    padding: 10px;
    box-shadow: grey 1px 2px 5px;
}
.CommonDivForInputTable {
    padding: 10px;
    box-shadow: grey 1px 2px 5px;
}
.CommonDivForInputTable >div {
   display:flex;
   justify-content:center;
}
.CommonDivForVisibelity {
    display: flex;
    flex-flow: wrap;
    
}

.DisplyPanel {
    border-radius: 15px;
    min-width: 200px;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    margin: 10px;
    z-index: 4;
    box-shadow: gray 0 0 5px;
    user-select: none;
    transition: all 0.5s ease;
}
    .DisplyPanel:hover {
        transform:scale(1.2);
        z-index:5;
    }
    .DisplyPanel-lbl {
        font-size: 18px;
        font-family: Calibri;
        font-weight: 700;
        color: dimgrey;
    }
.DisplyPanel-Field {
    text-align:right;
    padding: 10px;
    font-size: 25px;
    font-weight: 700;
    text-shadow: black 1px 1px 4px;
    color: white;
}



.ui-datepicker {
    background: #f2f2f2 !important;
    border: 1px solid #aaa !important;
    font-family: Calibri, sans-serif !important;
    font-size: 18px !important;
    transform-style: flat !important;
    transition-delay: 1s !important;
    transition-duration: 0.5s !important;
    transition: ease !important;
}
#ui-datepicker-div {
    z-index: 7 !important;
}

/*Date Picker*/
.ui-datepicker-year option:checked {
    background: linear-gradient(white,#ff6a00) !important; /* Change this to your desired background color */
    color: white !important; /* Change this to your desired text color */
}

.ui-datepicker-year option:default {
    background: #ff6a00 !important; /* Change this to your desired background color */
}

.ui-datepicker-header {
    background: linear-gradient(white,#ff6a00) !important;
    color: white !important;
}

.ui-datepicker-prev, .ui-datepicker-next {
    color: white !important;
    
}

.ui-state-default {
    background: #ff6a00;
}

.ui-state-active 
{
    background: #ff6a00 !important;
}

.ui-datepicker-calendar .ui-state-hover {
    background: #ff6a00 !important;
}



   

@media only screen and (max-width: 720px) {
    .DisplyPanel {
        width: 100%;
    }
        .DisplyPanel:hover {
            transform: scale(1.05);
        }
}



/*#region  Spinner*/
#loadingSpinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    font-size: 20px;
    font-family: Arial;
}

.spinner {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #ff6a00;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

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

    100% {
        transform: rotate(360deg);
    }
}
/*#endregion  Spinner*/