.hideDisplay{
    display: none;
  }
#RightPanelOuter{
    display: flex;
    justify-content: space-evenly;
}
#outerDivForImageAndButton{
    display: flex;
    justify-content: space-evenly;
}
#buttonForHelp{
    margin-left: 5px;
    border-radius: 10px;
}

button{
    background-color: #7bba2f !important;
    font-weight: bolder !important;
    font-size: 1.5em !important;
    color: #24180D !important;
}
 
button:hover, #showHelpDiv:hover{
    background-color:rgb(140, 246, 116) !important;
    color: #24180D !important;
}
  #rightPanelAltContent>img{
    padding-top: 10px;
  }
  #start{
    width: 70%;
  }

  #left-section,
  #right-section {
      display: inline-block;
      width: 45%;
      vertical-align: top;
  }

  #container {
      width: 100%;
      margin: 0 auto;
      text-align: center;
  }

  h1 {
      font-size: 2em;
      margin-bottom: 20px;
  }

  h2 {
      font-size: 1.5em;
      margin-bottom: 10px;
  }
#showHelpDiv{
    display: grid;
    width: 100%;
    height: 230px;
    background-color: #7bba2f;
    color: #24180D;
    font-weight: bold;
    align-content: center;
    justify-content: center;
    font-size: 3.5em;
    border-radius: 10px;
}


.links{
    color: #7bba2f;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.5rem;
}
.links:hover{
   color:  rgb(140, 246, 116);
    
}
#createdBy{
    font-size: 0.8rem;
    padding-top: 0%;
    padding-bottom: 0%;
    padding-left: 0%;
    padding-right: 0%;
    margin-top: 0%;
    margin-bottom: 0%;
    margin-left: 0%;
    margin-right: 0%;
    color: gray;
}
#containerForGifAndImage>img:nth-child(1){
    height: 800px;
    width: 98%;
}
#containerForGifAndImage>img:nth-child(2){
    height: 800px;
        width: 98%;
}

#leftSide>button{
   background-color: transparent;
}
#leftSide{
    width: 35px;
}
#containerWindow{
    padding-top: 1%;
    display: grid;
    width: 1440px;
}
body>nav{
    height: 35px;
}
body>nav>div>h5{
    padding: 0%;
    margin: 0%;
}


#navbarNav>ul>li{
    padding-top: 0%;
}
    @media screen and (min-width: 1441px) {
        .containerDiv{
            display: grid;
            grid-template-areas: "aside main section";
            grid-template-columns: 8fr 5fr;
            gap: 1rem;
            padding-top: 1.5rem;
            max-width: 1440px;
        }
        p,span{
            font-size: 1.2rem;
        }
        #rightPanel{
            display: grid;
            grid-template-rows: 0fr 5fr 2fr;
            max-width: 800px;
            height: 900px;
            border: 5px outset gray;
            padding: 10px;
            position: relative;
           background-color: #302011;
        border-radius: 10px;
        }
        
      }
      .h100w100{
          height: 230px;
          width: 100%;
      }
      


    @media screen and (max-width: 1440px) {
        .containerDiv{
            display: grid;
            grid-template-areas: "aside main section";
            grid-template-columns: 8fr 5fr;
            gap: 1rem;
            padding-top: 1.5rem;
        }
        p{
            font-size: 0.8rem;
        }
        body > div > aside{
            display: none;
        }

        body > header{
            display: none;
        }
        #rightPanel{
            display: grid;
            grid-template-rows: 0fr 5fr 2fr;
            max-width: 800px;
            height: 847px;
            border: 5px outset gray;
            padding: 10px;
            position: relative;
           border-radius: 10px;
        }
        
      }

#rightPanelAltContent{
    height: 200px;
    padding-top: 0%;

}

  
    .containerDivTablet{
        display: grid;
        grid-template-areas: "aside main section";
        grid-template-columns: 8fr 5fr;
        gap: 1rem;
        padding-top: 1.5rem;
    }

/*Progress bar and next button container*/
#nextButtonAndProgressBarContainer{
    display: grid;
    grid-template-columns: 5fr 1fr;
    height: 40%;
    margin-bottom: 0%;
}
#nextButtonAndProgressBarContainer > div{
    height: 100%;
    /*animation:progressBar 0s linear;*/
    margin-top: 0%;
    background-color: rgb(51, 162, 26);
}
li{
    font-size: 1.3rem;
    cursor: pointer;
}
#outerDivForErrorBox > ul > li{
    color: white;
    font-weight: bold;
    z-index: 100;
    position: relative;
}
#itemDescription,#FoodStampLogo,#priceOfProduct{
    overflow: hidden;
}
#outerDivForErrorBox>button{
    position: absolute;
    top: 85%;
    right: 5%;
    width: 10%;
    height: 10%;
}
.cButtonStyle{
    color: red;
    border: 1px solid gray;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: small;
    background-color: black;
    font-weight: bold;
}

.enterButtonStyle{
    color:  rgb(51, 162, 26);
    border: 1px solid gray;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: small;
    background-color: black;
    font-weight: bold;
}

.continueButtonStyle{
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: small;
    background-color: #0d6efd;
    border-radius: 10%;
    font-weight: bold;
}
/*Right panel styles - used to hold content for lessons*/

.w350h90{
    width: 350px;
    height: 90%;
}
#rightPanelMainContent > img {
    border: 7px solid #7bba2f;
    border-radius: 10px;
}
#rightPanelMainContent>img:hover{
    border: 7px solid rgb(140, 246, 116);
}
.disable{
    pointer-events: none;
}
#rightPanelMainContent{
    padding-top: 1%;
}
@keyframes progressBar{
    from {width:0%;}
    to{width: 100%;}
}
@keyframes displayFromLeftToRight{
     0% {
        width:3%;
        }
    100%{
        width: 100%; 
    }
}

.panimate {
    animation: displayFromLeftToRight 3s linear;
    overflow: hidden;
    white-space: nowrap;

}
/*
#p2 {
    animation: displayFromLeftToRight 3s linear;
    overflow: hidden;
    white-space: nowrap;
}
#p3 {
    animation: displayFromLeftToRight 3s linear;
    overflow: hidden;
    white-space: nowrap;
}
#p4 {
    animation: displayFromLeftToRight 3s linear;
    overflow: hidden;
    white-space: nowrap;
}
#p4 {
    animation: displayFromLeftToRight 3s linear;
    overflow: hidden;
    white-space: nowrap;


    #7bba2f
}
*/
.imageW50H350{
    width: 80%;
    height: 530px;
}
body{
    background-color: #24180D;

}
#outerDivForErrorBox{
        position: absolute;
        top: 4%;
        left: 50%;
        transform: translate(-50%, 0%);
    width: 1400px;
    height: 850px;
    background-color:  black;
    z-index: 1;
    border: rgb(51, 162, 26) 5px outset;
    padding: 1%;
}
#outerDivForLessonPopup{
    position: absolute;
        top: 4%;
        left: 50%;
        transform: translate(-50%, 0%);
        width: 80%;
        height: 80%;
        background-color: black;
        z-index: 1;
        border: #7bba2f 5px outset;
        padding: 1%;
}
#containerForGifAndImage{
    display: grid;
    grid-template-columns: 1fr 2fr;
}
#outerDivForHelpBox{
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 100%;
    height: 60%;
    background-color:  black;
    z-index: 1;
    border: 7px solid #7bba2f;
    border-radius: 10px;
}
#outerDivForHelpBox:hover{
    border: 7px solid rgb(140, 246, 116);
}

body > div{
    max-height: 700px;
}

/*End of right panel styles*/
/*start of pop-out for manual entry*/
/*Code for the keyed in pop-outs*/
#departmentInputPopout{
    grid-area: 2/2/7/5;
    background-color: rgb(249, 249, 249);
    z-index: 1;
}
#departmentNameDivInManualEntry{
    color: gray;
    padding-left: 2%;
    padding-top: 0%;
}
#departmentNumberDivInManualEntry{
    color: gray;
    padding-left: 2%;
    padding-top: 0%;
}
#enterAmountDivInManualEntry{
    color: gray;
    margin-left: 10%;
    padding-top: 10%;
    display: grid;
    align-items: center;
}
#priceInputInManualEntry{
        padding-top: 10%;
        display: grid;
        justify-content: end;
        margin-right: 15%;
        border-bottom: 3px solid black;
        font-size: 2.5rem;
        color: green;
}
#manualEntry{
    color: green;
    font-size: 1.5rem;
    padding-top: 2%;
    padding-left: 2%;
}
#OuterDivForManualEntry{
display: grid;
grid-template-columns: 3fr 10fr;
}
/* End of pop-out for manual entry*/

/*
.containerDiv{
    display: grid;
    grid-template-areas: "aside main section";
    grid-template-columns: 1fr 5fr 5fr;
    gap: 1rem;
    padding-top: 1.5rem;
}
*/
li {
	padding-top: 1.2rem;
}

main {
	border: white double 5px;
    border-radius: 10px;

    display: block;
    position: relative;
    cursor: pointer;
    user-select: none;
}

section > div{
	padding-top: 1.5rem;
}


aside{
    margin-left: 1.2rem;
}

.hideDisplay{
    visibility: hidden;
}
.showDisplay{
    visibility: initial;
}



/*Code for department keys*/
#insideRegisterGrid1 > div{
        border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    background-color: black;
    height: 100%;
}
#departmentKeys1{
grid-area: 1/1/2/2;
z-index: 1;
}
#departmentKeys2{
    grid-area: 1/2/2/3;
    z-index: 1;
}
#departmentKeys3{
    grid-area: 1/3/2/4;
    z-index: 1;
}
#departmentKeys4{
    grid-area: 1/4/2/5;
    z-index: 1;
}
#departmentKeys5{
    grid-area: 1/5/2/6;
    z-index: 1;
}
#departmentKeys6{
    grid-area: 2/1/3/2;
    z-index: 1;
}
#departmentKeys7{
    grid-area: 2/2/3/3;
    z-index: 1;
}
#departmentKeys8{
    grid-area: 2/3/3/4;
    z-index: 1;
}
#departmentKeys9{
    grid-area: 2/4/3/5;
    z-index: 1;
}
#departmentKeys10{
    grid-area: 2/5/3/6;
    z-index: 1;
}
#departmentKeys11{
    grid-area: 3/1/4/2;
    z-index: 1;
}
#departmentKeys12{
    grid-area: 3/2/4/3;
    z-index: 1;
}
#departmentKeys13{
    grid-area: 3/3/4/4;
    z-index: 1;
}
#departmentKeys14{
    grid-area: 3/4/4/5;
    z-index: 1;
}
#departmentKeys15{
    grid-area: 3/5/4/6;
    z-index: 1;
}
#departmentKeys16{
    grid-area:4/1/5/2;
    z-index: 1;
}
#departmentKeys17{
    grid-area:4/2/5/3;
    z-index: 1;
}
#departmentKeys18{
    grid-area:4/3/5/4;
    z-index: 1;
}
#departmentKeys19{
    grid-area:4/4/5/5;
    z-index: 1;
}
#departmentKeys20{
    grid-area:4/5/5/6;
    z-index: 1;
}
#departmentKeys21{
    grid-area:5/1/6/2;
    z-index: 1;
}
#departmentKeys22{
    grid-area:5/2/6/3;
    z-index: 1;
}
#departmentKeys23{
    grid-area:5/3/6/4;
    z-index: 1;
}
#departmentKeys24{
    grid-area:5/4/6/5;
    z-index: 1;
}
#departmentKeys25{
    grid-area:5/5/6/6;
    z-index: 1;
}
/* Code for the normal register screen 
row start / col start / row end / col end*/
#insideRegisterGrid1{
    grid-area: 1/1/11/2;
    border: 1px gray solid;
    background-color: rgb(245, 245, 245);
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(10, 1fr) ;
}
#insideRegisterGrid2{
    grid-area: 1/2/2/3;
    border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    background-color: black;
}
#insideRegisterGrid3{
    grid-area: 1/3/2/4;
    border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    background-color: black;
}
#insideRegisterGrid4{
    grid-area: 2/2/3/3;
    border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    background-color: black;
}
#insideRegisterGrid5{
    grid-area: 2/3/3/4;
    border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    background-color: black;
}
#insideRegisterGrid6{
    grid-area: 3/2/4/3;
    border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    background-color: black;
}
#insideRegisterGrid7{
    grid-area: 3/3/4/4;
    border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    background-color: black;
}
#insideRegisterGrid8{
    grid-area: 4/2/5/3;
    border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    background-color: black;
}
#insideRegisterGrid9{
    grid-area: 4/3/5/4;
    border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    background-color: black;
}
#insideRegisterGrid10{
    grid-area: 5/2/6/3;
    border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    background-color: black;
}
/*Back and more div*/
#insideRegisterGrid11{
    grid-area: 5/3/6/4;
   /* border: 1px gray solid; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    background-color: black;
}
#backDiv{
    border: 1px gray solid;
    display: grid;
    align-items: center;
    height: 100%;
    justify-content: center;

}
#moreDiv{
    border: 1px gray solid;
    display: grid;
    align-items: center;
    justify-content: center;
    height: 100%;
}
/* Enter Item Code outer div*/
#insideRegisterGrid12{
    grid-area: 6/2/8/4;
    border: 1px gray solid;
    background-color: black;
    display: grid;
    grid-template-rows: 1fr 4fr;
}
#topOfEnterItemCode{
    padding-left: 2%;
}
#bottomEnterItemCode{
    font-size: 2rem;
    display: grid;
    align-items: end;

}
/*Numpad outer Div*/
#insideRegisterGrid13{
    grid-area: 8/2/last-line/end;
    border: 1px gray solid;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    background-color: black;
}

/*  Bottom div for balance due and the total outershell*/
#insideRegisterGrid14{
    grid-area: fourteen;
    border: 1px gray solid;
    background-color: rgb(249, 237, 223);
    grid-area: 11/1/12/2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
/*  balance due  */
#balanceDueDiv{
    display: grid;
    align-content: center;
    color: green;
    font-size: 2rem;
    padding-left: 5%;
}

/*  Total price for the register*/
#TotalEntryForTheRegister{
    display: grid;
    align-content: center;
    justify-content: flex-end;
    color: green;
    font-size: 2rem;
    padding-right:5%;
}
/* AvantEdge points in upper left of the normal screen outer div*/
#insideRegisterGrid15{
    grid-area: 1/1/3/2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
}
#advantEdgeValue{
    color: green;
    display: grid;
    align-items: end;
    padding-left: 12%;
}
#advantEdgeTitle{
    color: black;
    text-decoration: underline;
    font-weight: bold;
    padding-left: 5%;
}
/* Main div for displaying items and prices */
#insideRegisterGrid16{
    grid-area: 3/1/11/2;
    display: grid;
    grid-template-columns: 6fr 1fr 1fr;
    color: black;
    font-size: 1.5rem;
    padding-left: 5%;
    padding-bottom: 1%;
    overflow:hidden;
}
#itemDescription{
display: grid;
align-items: end;
}
#FoodStampLogo{
display: grid;
align-items: end;
}
#priceOfProduct{
display: grid;
align-items: end;
}
#registerDiv{
    height: 100%;
    display: grid;
    grid-template-columns: 5fr 1fr 1fr;
    grid-template-rows: repeat(11, 1fr);
}
#insideRegisterDiv{
    background-color: aqua;
    border: black solid 2px;
}
/*Enter Button Div*/
#numpadDiv15{
    height: 100%;
    display: grid;
    align-items: center;
    grid-area: 4/3/last-line/end;
     border: 1px gray solid;
     justify-content: center;
     color: rgb(9, 182, 9);
     letter-spacing: .1rem;
}
#numpadDiv1{
 border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    grid-area: 1/1/2/2;
    justify-content: center;
}
#numpadDiv2{
 border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    grid-area: 1/2/2/3;
    justify-content: center;
}
#numpadDiv3{
 border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    grid-area: 1/3/2/4;
    justify-content: center;
}
#numpadDiv4{
 border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    grid-area: 1/4/2/5;
    justify-content: center;
}
#numpadDiv5{
 border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    grid-area: 2/1/3/2;
    justify-content: center;
}
#numpadDiv6{
 border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    grid-area: 2/2/3/3;
    justify-content: center;
}
#numpadDiv7{
 border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    grid-area: 2/3/3/4;
    justify-content: center;
}
#numpadDiv8{
 border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    grid-area: 2/4/3/5;
    justify-content: center;
}
#numpadDiv9{
 border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    grid-area: 3/1/4/2;
    justify-content: center;
}
#numpadDiv10{
 border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    grid-area: 3/2/4/3;
    justify-content: center;
}
#numpadDiv11{
 border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    grid-area: 3/3/4/4;
    justify-content: center;
}
#numpadDiv12{
 border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    grid-area: 3/4/4/5;
    justify-content: center;
    color: red;
}
#numpadDiv13{
 border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    grid-area: 4/1/5/2;
    justify-content: center;
}
#numpadDiv14{
 border: 1px gray solid;
        display: grid;
    align-items: center;
    padding-left: 3%;
    grid-area: 4/2/5/3;
    justify-content: center;
}
/* End of Normal Register*/

/*Image*/
#wildgoodUPC{
    height: 350px;
    width: 250px;
}