@font-face {
  font-family: oldEnglishFont;
  src: url("/apps/fontsA/OLDENGL.ttf") format('truetype');

}

html, body{
  background-color: rgb(247, 242, 242);
}

.form-signind {
  margin: -2px;
  width: 120%;
  /*border: rgba(0, 0, 255, 0.726) 2px solid;*/
  border:#dad4d4 1px solid; 
  border-radius: 5px;
  background-image:  linear-gradient(#FFFFFF,white 10%, transparent 120%); 
    
    -webkit-box-shadow: 1px 2px 4px 3px  rgb(179, 176, 176);
     box-shadow: 1px 2px 4px 3px rgb(179, 176, 176);

    /*
     background-image:  linear-gradient(#FFFFFF,#dad4d4 10%, transparent 120%); 
    
    -webkit-box-shadow: 1px 2px 5px 5px  rgb(179, 176, 176);
     box-shadow: 1px 2px 5px 5px rgb(179, 176, 176);
    box-shadow:1px 1px  2px 1px grey; 1px 1px  2px 1px
    -ms-box-shadow: 0 35px 20px #3300FF;
    -o-box-shadow: 0 35px 20px #3300FF;
     -moz-box-shadow: 0 35px 20px #3300FF;
    */

}


#divSearch{
  position: relative;
  top: 55px;
  width:100%;/* 500px padding-top:4px;*/
  height: 70px;
  margin-left: auto;
  padding-top: 15px;
  margin-right: auto;
  display: block;
  border: 0px solid red;
  border-radius: 0px;
  background-color: rgb(247, 242, 242);
 
}


#search-field {
border: 0px solid green;
z-index: 1;
border-radius: 20px;
width:88%; /* 93%*/
height: 40px;
font-size: 20px;
padding-left:10px;
padding-right:10px;
margin-left:-4px;
float: left;
margin-top: 1px;
margin-left: 1px;
background: white;
}


.srch #submitBtn0{
  position: relative;
  z-index0: 1;
border-radius: 100px;
width: 35px;
height: 35px;
margin-right: 1px;
margin-top: auto;
background-image: url("/apps/imgs/gsearch.png");
background-size: cover;
float0: right;
border: 0px solid red;
}


.imggsearch #submitBtn0{
  position: relative;
  z-index0: 1;
border-radius: 100px;
width: 35px;
height: 35px;
margin-right: 1px;
margin-top: 3px;
background-image: url("/apps/imgs/gsearch.png");
background-size: cover;
float0: right;
border: 0px solid red;
}


#submitBtn{
  position: relative;
  z-index: 1;
border-radius: 100px;
width: 35px;
height: 35px;
background-image: url("/apps/imgs/gsearch.png");
background-size: cover;
float: right;
border: 0px solid red;

  margin: 1px 1px 1px 1px;
  display: flex;
  top:auto;
  margin-left: auto;
  margin-right: auto;
}


#search-field:focus {
  box-shadow:0px 0px  0px 0px green;
  border: 0px solid red;
  background: white;
  outline: none;
  
  
}


#search-field:hover {
   border: 0px solid red;
   background: white;
   outline: none;
}


#gsearch {
  border: 1px solid green;
   z-index: 100;
  border-radius: 100px;
  margin-top: -9px;
  width: 96%;
  display: block;
  margin-right: auto;
  margin-left: auto;
  background: white;
  height: 46px;
}


#gsearch:active {
      border: 2px solid red;
}


#gsearch:hover {
     -webkit-box-shadow: 0px 0px 3px 2px orange;
     box-shadow: 0px 0px 3px 2px orange; /*0px 0px 0px 0px blue;*/
     transition:box-shadow 0.5s ease-in, color 0.5s ease-in;
  
   
     
}


#gsearch:focus {
     -webkit-box-shadow: 0px 0px 3px 2px orange;
     box-shadow: 0px 0px 3px 2px orange; /*0px 0px 0px 0px blue;*/
     transition:box-shadow 0.5s ease-in, color 0.5s ease-in;
  
  
}

#idContent::backdrop {
    background:linear-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px,radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px,radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px,radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 250%);
     border: 1px red dotted;
     background-size:200px 200px;
     opacity: 1;
     border-radius: 10px;
}


dialog#idContent::backdrop {
    background:linear-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px,radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px,radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px,radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 250%);
     border: 1px red dotted;
     background-size:200px 200px;
     opacity: 1;
     border-radius: 10px;
     
}


/*dialog */
#idContent {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow-y:auto;
    overflow-x:hidden;
    overflow-x:hidden !important;
    border:red;
    border-style:double;
    border-radius: 10px;
    background: transparent;
    background-color: rgb(247, 242, 242);
    padding:2px;
    
    /*
    background-image:  linear-gradient(#FFFFFF,#dad4d4 20%, transparent 120%);
    -webkit-box-shadow: 1px 2px 5px 5px white, 1px 2px 5px 4px grey;
     box-shadow: 1px 2px 5px 5px white, 1px 2px 5px 4px grey;
     font-family: 'Times New Roman', Times, serif;
    align-content: center;  margin:0px;
   */

  }


#querySection {
  position:fixed;
  width:100%;
  height: 100%;
  top:120px;
  background: red;
  border: 1px solid white;
  
}


#SRpoemHeader0 {
  position:fixed;
  width:100%;
  height:50px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:100px;
  background: pink;
  margin-bottom: 140px;
}



 #SRbooktitles2 { 
  position: fixed;
  z-index: 100;
  font-size:30px;
  height: auto;
  width: 100%;
  margin-top:-1px;
 /* left:7px;*/
  /*font-family:'Old English Text MT', Calibria;*/
  font-family: oldEnglishFont, Calibria;
  text-align:center;
  color:white;
  text-shadow: -1px -1px 2px black, 1px 1px 1px grey;
	font-weight:normal; 
	font-stretch:ultra-condensed;
	/* background:transparent;*/
  background-color: green;
   background-color: green; /*rgb(247, 242, 242);  */
  border: 1px double red; /*rgb(255, 3, 3); */
  display: block;
  margin-left: auto;
  margin-right: auto;
   border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}



#SRitem-list {
  position: relative;
  text-align: left;
  top:68px;
  padding-bottom: 47px;
  
}

#poemHeader  {
  position: fixed;
  width:100%;
  background: white;
}

p.booktitles2 {
  position: fixed;
  font-size:40px;
  height: auto;
   width: 100%;
 /* left:7px;*/
  /*font-family:'Old English Text MT', Calibria;*/
  font-family: oldEnglishFont, Calibria;
  text-align:center;
  color:white;
  text-shadow: -1px -1px 2px black, 2px 2px 2px red;
	font-weight:normal; 
	font-stretch:ultra-condensed;
	/* background:transparent;*/
  background-color: green;
  border-radius: 20px 20px 5px 5px;
  border: 2px solid rgb(255, 3, 3);
  margin: 1px 1px 1px 1px;
  display: block;
  margin-left: auto;
  margin-right: auto;
			
  }



  
  .item:checked {
    /* border: red 1px solid; 
       border-radius: 5px;
       background: green;
       outline: 2px solid red !important;
    */
    accent-color: red;
 
   
  }




  #secmainRight3, #SRsecmainRight3{
    text-align: left;
    font-size: medium;
  }

  hr{
  color:red;  
  -webkit-box-shadow: 1px 1px 1px 1px  rgb(176, 179, 178);
     box-shadow: 1px 1px 1px 1px rgb(179, 176, 176);
     
  }
  
 
 
 @media(max-width: 768px){
#submitBtn{
  position: relative;
  z-index0: 1;
border-radius: 100px;
width: 35px;
height: 35px;
background-image: url("/apps/imgs/gsearch.png");
background-size: cover;
float: right;
border: 0px solid red;

  margin: 1px 1px 1px 1px;
  display: flex;
  top:-40px;
  margin-left: auto;
  margin-right: auto;
}

}