html body {

 
    padding: 4px 4px 4px 4px;
    font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 18px;
}

.cshbody {

    background-color: #04364c;
    color: white;
    padding: 4px 4px 4px 4px;
    font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 18px;

    width: 375px;
    padding: 10px 10px 10px 10px;
}
 
.mainHeader {
    background-color: white;
    border: 1px solid #04364c;
    border-radius: 4px;
    padding: 0px 20px 0px 20px;
    color: black;
    box-shadow: rgba(0,0,0,.2) 2px 2px;  
}

.activityCard {
    color: black;
    margin-bottom: 5px;
    padding: 5px 5px 5px 5px;
    border: 1px solid black;
    border-radius: 5px;
    background-color: white;
    background-image: url("../images/paper.gif");
    width: 330px;
}

.headerUserBox {
    font-size:10px;
    margin-top: 20px;
    float: right;
    color:black;
}

.headUser {
    color: black;
    cursor: pointer;
}

.headLogout {
    
    color: blue;
    cursor: pointer;
}

.navPagesName {
  color:black;
  font-size:18px;
  vertical-align:central;
  text-align:center;
}

.indxButton {
    appearance: none;
    background-color: #FAFBFC;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    box-sizing: border-box;
    color: #24292E;
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    line-height: 20px;
    list-style: none;
    padding: 6px 16px;
    position: relative;
    transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
    white-space: nowrap;
    word-wrap: break-word;
    margin-top: 16px;
    margin-bottom: 4px;
    text-decoration: none;
    width: 270px;
}

    .indxButton:hover {
        background-color: #d9dbde;
        text-decoration: none;
        transition-duration: 0.1s;
        text-decoration: none;
    }

    .indxButton:disabled {
        background-color: #FAFBFC;
        border-color: rgba(27, 31, 35, 0.15);
        color: #959DA5;
        cursor: default;
    }

    .indxButton:active {
        background-color: #EDEFF2;
        box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
        transition: none 0s;
    }

    .indxButton:focus {
        outline: 1px transparent;
    }



.indexbody {
    padding-top: 10px;
    width: 100%;
    align-content: center;
    text-align: center;
    align-items: center;
    align-self: center;
}

   

.dvHeader {   
    background-color: lightblue;
    width: 1250px;
    margin-bottom: 5px;

}
.staffCompanyAddress {
    background-image: linear-gradient(lightblue, white);
    border-top: 1px solid lightgray;
    border-right: 1px solid lightgray;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    border: 1px solid darkgrey;
    /*text-align: center;*/
    /*background-color: white;*/
    color: black
}
.ImageCatalogdvOuter {
    display: grid;
    grid-template-columns: repeat(auto-fill, 340px);
    grid-gap: 10px;
}
.dvOuter {
    display: grid;
    grid-template-columns: repeat(auto-fill, 340px);
    grid-gap: 10px;
    
}
.dvInner {
    display: inline-grid;
    align-items: baseline;
}

.staffCard {
    width: 320px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    padding: 4px 4px 4px 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    font-family: 'Segoe UI';
    font-size: 12px;
    font: normal 12px;
    font-family: Arial;
    background-color: white;
    color:black;
    
}
.imageCard {
    width: 340px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    padding: 4px 4px 4px 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    font-family: 'Segoe UI';
    font-size: 12px;
    font: normal 12px;
    font-family: Arial;
    background-color:#E1EBEE;
  
}

.RecentImageCard {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    padding: 4px 4px 4px 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    font-family: 'Segoe UI';
    font-size: 12px;
    font: normal 12px;
    font-family: Arial;
}

.contactCard {
    width: 320px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    padding: 4px 4px 4px 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    font-family: 'Segoe UI';
    font-size: 12px;
    font: normal 12px;
    font-family: Arial;    
    background-color: white;
    color:black;
}

.contactTitle {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    border: 1px solid darkgrey;
    text-align: center;
    background-color: white;
    color: black;
    max-width:1050px;
}

.companyCard {
    width: 320px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    padding: 4px 4px 4px 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    font-family: 'Segoe UI';
    font-size: 12px;
    font: normal 12px;
    font-family: Arial;
    background-color: white;
    color: black;
}

.companyTitle {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    border: 1px solid darkgrey;
    text-align: center;
    background-color: white;
    color: black
}

.EastCstPrjctCard {
    width: 320px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    padding: 4px 4px 4px 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    font-family: 'Segoe UI';
    font-size: 12px;
    font: normal 12px;
    font-family: Arial;
    background-color: white;
    color: black;
}

.EastCstPrjctTitle {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    border: 1px solid darkgrey;
    text-align: center;
    background-color: white;
    color: black; 
    margin-bottom: 10px;
    margin-top: 10px;
}

.ECInfoCard {
    width: 320px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    padding: 4px 4px 4px 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    font-family: 'Segoe UI';
    font-size: 12px;
    font: normal 12px;
    font-family: Arial;
    background-color: white;
    color: black;
    
}

.ECInfoTitle {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    border: 1px solid darkgrey;
    text-align: center;
    background-color: white;
    color: black;
    margin-bottom: 10px;
    margin-top: 10px;
}

.ECTrackingCard {
    /*width: 400px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    padding: 4px 4px 4px 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    font-family: 'Segoe UI';
    font-size: 12px;*/

    width: 400px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    padding: 4px 4px 4px 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    font-family: 'Segoe UI';
    font-size: 12px;
    font: normal 12px;
    font-family: Arial;
    background-color: white;
    color: black;
    
} 

.ECTrackingTitle {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    border: 1px solid darkgrey;
    text-align: center;
    background-color: white;
    color: black;
    margin-bottom: 10px;
    margin-top: 10px;
}

.dvDepartmentHidden {
    display: none;
}

.dvDepartment {
    display: block flow-root;
    text-align: center;
    color: white;
    background-color: #04364c;
    margin-top: 8px;
    border: 1px solid darkgrey;
    border-radius: 4px;
    width: 90px;
    font-size: small;
    margin-left: -4px;
    box-shadow: darkgray 1px 2px;
    padding-bottom: 4px;
    padding-left: 2px;
    padding-right: 2px;
}
 

.CSSRYGalarmGreen {
    color: green;
    font-style: italic;
}
.CSSRYGalarmYellow {
    color: darkgoldenrod;
    font-style: italic;
}
.CSSRYGalarmRed {
    color: red;
    font-style: italic;
}
.searchDiv {
    width: 300px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    padding: 10px 0px 10px 15px;
    margin-bottom: 10px;
    margin-top: 10px;
    font-family: 'Segoe UI';
    font-size: 14px;
    border: 1px solid darkgrey;
}



.hideThis{
    display:none;
}
.showThis{
    display:block flow-root;
}


.PhoneDiv {
    width: 500px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    padding: 10px 0px 10px 15px;
    margin-bottom: 10px;
    margin-top: 10px;
    font-family: 'Segoe UI';
    font-size: 14px;
    border: 1px solid darkgrey;
}
.validationDiv {
    background-color:red;
    color:white;
    border-radius:3px;
    box-shadow:1px 1px black;
    font-size:10px;
    width:320px;
}
.vacationCard {
    width: 405px;
    box-shadow: 0 3px 5px 0 rgba(0,0,0,0.3);
    transition: 0.3s;
    border-radius: 8px;
    padding: 4px 4px 4px 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    font-family: 'Segoe UI';
    font-size: 8px;
    font: normal 10px;
    font-family: Arial;
    background-color:whitesmoke;

    font-size: 10px;
}
.hidenThing {
     display:none;
}

.noticeBox {
    font-family: "Segoe UI", Helvetica, Arial, sans-serif, "Segoe UI Emoji";
    font-size: 14px;
    width: 290px;
    border-radius: 6px;
    box-shadow: darkgray 3px 2px;
    padding: 4px 4px 4px 4px;
    text-align: center;
    border: 1px solid red;
    position: relative;
    background-color: lightgoldenrodyellow;
    color: black;
    vertical-align: middle;
    display: inline-block;
    list-style: none;
    margin-bottom: 25px;
}