/* ------------------------------ fade and  modal are used to show on loading screen. Fade is the div in background that fades everything and modal is the popup div --------------------------------------- */
  
	.fade_loading {
	    display: none;
	    position:fixed;
	    top: 0%;
	    left: 0%;
	    width: 100%;
	    height: 100%;
	    background-color: #ababab;
	    z-index: 1021;
	    -moz-opacity: 0.8;
	    opacity: .70;
	    filter: alpha(opacity=80);
	}

	.modal_loading {
	    display: none;
	    position: fixed;
	    top: 45%;
	    left: 45%;
	    width: 10vw;
	    height: auto;
	    border: 0px;
	    background-color: transparent;
	    z-index: 1022;
	    text-align:center;
		border-radius:25px;
     }


	.image_loading {
	    position: absolute;
	    top: 0px;
	    left: 0px;
	    width: 100%;
	    height: auto;
	    border: none;
		border-radius:25px;

     }

  /* ------------------------------ The below 2 classes are used for action result popup div --------------------------------------- */
  
  	.fade_actionResult {
	    display: none;
	    position:fixed;
	    top: 0%;
	    left: 0%;
	    width: 100%;
	    height: 100%;
	    background-color: #ababab;
	    z-index: 1010;
	    -moz-opacity: 0.8;
	    opacity: .70;
	    filter: alpha(opacity=80);
	}
	
  .modal_actionResult {
	    display: none;
	    position: fixed;
	    top: 30%;
	    width: 40%;
	    height: auto;
	    left: 30%;
	    padding:5px;
	    border: 3px solid #ababab;
	    box-shadow:1px 1px 10px #ababab;
	    border-radius:20px;
	    background-color: white;
	    z-index: 1011;
	    text-align:center;
	    overflow: auto;
     }


@media only screen and (max-width: 700px) {
		.modal_actionResult {
			 width: 80%;
		  	left: 10%;
	  }
}


 /* ------------------------------ The below 2 classes are used for action result popup div --------------------------------------- */
  
	.fade_popUpBlackboardDIV {
	    display: none;
	    position:fixed;
	    top: 0%;
	    left: 0%;
	    width: 100%;
	    height: 100%;
	    background-color: #494949;
	    opacity: 0.5;
	    z-index: 1005;
	    -moz-opacity: 0.8;
	    opacity: .70;
	    filter: alpha(opacity=80);
	}
	
      .popUpBlackboardDIV {
	    display: block;
	    position: fixed;
	    top: 2%;
	    left: 2%;
	    width: 100%;
	    height: 0px;
	    border:none;
	    border-radius:6px;
	    z-index: 1006;
	    overflow: auto;
		/* background-color:#202020; color: white; opacity: 100%; */
		 background-color:white;
		transition: height 1s;
	}	
		
	
  
		
		
	  /* The Close Button (x) */
	.closePopUpBlackboardDIVbutton {
	    position: absolute;
	    right: 2px;
	    top: 2px;
	    width: 35px;
	    height: 35px;
	    font-weight: bold;
	}

	.closePopUpBlackboardDIVbutton:hover,	.closePopUpBlackboardDIVbutton:focus {
	    color: red;
	    cursor: pointer; 
	}