body {
    font-family: 'Courier';
}

tml {
    overflow: -moz-scrollbars-horizontal; 
    overflow-x: scroll;
}


.right-side-align {
    width: 26.8%;
    float: right;
    padding-left: -80px;
    padding-right: 50px;
}

.sigil {
    border-radius: 30px;
    float: left;
    padding: 20px;
    margin-left: 0px;

}

.sigil-star-ft {
    position: absolute;
    display: inline-block;

}

button{
    margin: 3px;
}

.purchase-buttons {
    left: 44px;
    display: flex;
    width: 60px;
    position: relative; 
}

#myDIV {
margin-top: 50px;
  height: 150px;
  width: 500px;
  overflow: auto;
}

#pdf {
	display: none;
}

#content {
  height: 800px;
  width: 2000px;
  background-color: orchid;
}

.container {
  display: flex;
  margin: auto;
  display: flex;

  overflow: scroll;
  margin: 20px;
  scrollbar-width: auto;
  touch-action: none; /* Add also this */
  user-select: none; 
}

/* Scroll thumb styles */
.container::-webkit-scrollbar {
    background-color: #f5f5f5;
    border-radius: 10px;
    width: 100%;
    height: 8px;
}
.container::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 10px;
}
#payment-form {
	display: none
}
#submit {
	padding: 10px;
	background-color: white;
}
.box {
cursor: grab;
    flex-shrink: 0;
    inline-size: 100%;
	  padding: 10px;
	  width: 160px;
	  height: 213px;
	  box-sizing: border-box;
	  border: 2px solid #000;
	  position: relative;
	  background-repeat: repeat-x;
	  --b: conic-gradient(
	    #efefef 90deg,
	    #191919 0
	  );
	  background-image: 
	    var(--b),
	    var(--b);
	  background-position:
	    right 0px top 0px,
	    right 5px top 5px,
	    right 15px top 15px,
	    right 35px top 35px,
	    right 75px top 75px,
	    right 155px top 155px,
	    right 315px top 315px,
	    right 635px top 635px,
	    right 1275px top 1275px,
	    right 2555px top 2555px;
	  background-size:
	    5px 5px,
	    10px 10px,
	    20px 20px,
	    40px 40px,
	    80px 80px,
	    160px 160px,
	    320px 320px,
	    640px 640px,
	    1280px 1280px,
	    2560px 2560px;
	}
	
@media print {
    body * {
        visibility: hidden; // part to hide at the time of print
        -webkit-print-color-adjust: exact !important; // not necessary use         
           if colors not visible
    }

    #printBtn {
        visibility: hidden !important; // To hide 
    }

    #page-wrapper * {
        visibility: visible; // Print only required part
        text-align: left;
        -webkit-print-color-adjust: exact !important;
    }
}

@media (max-width: 600px) {
    .right-side-align {
        width: 64.8%;
        float: right;
        padding: 20px;
        padding-right: 50px;
    }
}