.alignment
      {
       display: flex;
       margin: 0;
       padding: 0;
       margin-left: 10px;
       list-style: none;
       justify-content: left;
       float: left;
       flex-flow: row wrap;
      }

.alignment list
      {
       flex: 0 0 19%;
       margin-top: 8px;
       margin-bottom: 10px;
       margin-right: 0px;
       margin-left: 10px;
      }

.alignment list img
      {
       border:solid 1px #8a8a8a;
       width: 283px; /* 230px; */
       height: 165px; /* 120px; */
      }

.box1
      {
       font-size:20px; 
       color:red; 
       font-family:inherit; 
       padding:20px 30px; 
       margin:20px; 
       border-radius:50px; 
       background-color:white; 
       border:12px solid #fcc5ed; /* #aaffa5; */ 
       box-shadow: 1px 1px 1px #f651c9;
      }

.box2
      {
       font-size:20px; 
       color:blue; 
       font-family:inherit; 
       padding:20px 30px; 
       margin:20px; 
       border-radius:20px; 
       background-color: white; 
       border:12px solid #aaffa5; /* #99feff; */ 
       box-shadow: 3px 3px 3px #ccc;
      }

/*
*/

.box3
      {
       font-size:25px; 
       color:red; 
       text-align: center;
       position: relative;
       display: inline-block;
       width: 250px; 
       padding: 25px;
       border-radius: 20px;
       background-color:#fefdc3; 
       border:0.2px outset #fefdc3; 
       box-shadow: 0px 2px 2px #ccc;
      }

.box3:before
      {
       content: '';
       position: absolute;
       display: block;
       z-index: 1;
       border-style: solid;
       border-color: transparent #fefdc3;
       border-width: 10px 0 10px 20px;
       top:60%;
       right: -20px;
       margin-top: -20px;
       }

.display>label
      {
       padding-left: 40px;
       width: 65px;
       height: 0px;
       vertical-align: top;
       box-sizing: border-box;
       display: inline-block;
       cursor: pointer;
      }

.display>label:hover
      {
       color: blue;
       transition: 0.1s;
       transform: scale(1.15);
      }

.display>label>input
      {
       margin-left: 10px;
       cursor: pointer;
      }

.container
      {
       font-size: 24px;
       padding-left: 30px;
       margin-bottom: 10px; 
       display: block; 
       position: relative; 
       cursor: pointer;
      }

.container input
      {
       position: absolute; 
       opacity: 0; 
       cursor: pointer;
      }

.container input:checked ~ .checkmark 
      {
       background-color: white;
      }

.container input:checked ~ .checkmark:after
      {
       display: block;
      }

.container:hover input ~ .checkmark 
      {
       background-color: #ae9dff;
      }

.container .checkmark:after
      {
       top: 3px; 
       left: 3px; 
       width: 14px; 
       height: 14px; 
       border-radius: 100%; 
       background: #836eed;
      }

.checkmark
      {
       position: absolute; 
       top: 5px; 
       left: 5px;
       width: 20px;  
       height: 20px; 
       border: solid 2px blue; 
       border-radius: 20px;
       background-color: white; 
      }

.checkmark:after
      {
       content: ""; 
       position: absolute; 
       display: none;
      }

.fontsize20
      {
       font-size: 20px;
      }

.fontsize21
      {
       font-size: 21px;
      }

.fontsize22
      {
       font-size: 22px;
      }

.fontsize23
      {
       font-size: 23px;
      }

.fontsize24
      {
       font-size: 24px;
      }

.fontsize25
      {
       font-size: 25px;
      }

.TableCSV
      {
       width:630px; 
       height:160px; 
       overflow:auto;
      }

.TableCSV table
      {
       margin:0; 
       border-spacing:0;
      }

.TableCSV th
      {
       padding:7px; 
       border-right:1px solid blue; 
       white-space:nowrap;
       background:#ffeeff; 
       border-bottom:1px solid blue; 
       position:sticky;
       font-weight:normal; top:0; left:0; font-style:italic;
      }

.TableCSV td
      {
       padding:7px; 
       border-right:1px solid blue; 
       white-space:nowrap;
       background:#eeffff; 
       border-bottom:1px solid blue;
      }

.TableCSV th:first-child
      {
       border-left:1px solid blue;
      }

.TableCSV tr:first-child th
      {
       border-top:1px solid blue;
      }

.TableCSV tr:first-child td
      {
       border-top:1px solid blue;
      }

.button1 
      {
       appearance: none;
       -moz-appearance: none;
       -webkit-appearance: none;
       font-size: 18px;
       padding: 0.5em 1em;
       margin: 1em 0;
       border-radius: 5px;
       cursor: pointer;
       transition: 0.2s;
       color: magenta;
       background-color: #EEFFFF;
       border: 0.3px solid cyan;
       box-shadow: 1px 1.5px 1.5px #ccc;
      }

.button1:hover
      {
       background-color:#DDFFFF;
      }

.button1:active
      {
       background-color:#DDFFFF;
      }

.button1:focus
      {
       background-color:#CCFFFF;  
       outline:none;  
       box-shadow:0 0 0px lightmagenta;
      } 


.button2 
      {
       appearance: none;
       -moz-appearance: none;
       -webkit-appearance: none;
       font-size: 18px;
       padding: 0.5em 1em;
       margin: 1em 0;
       border-radius: 5px;
       cursor: pointer;
       transition: 0.2s;
       color: magenta;
       background-color:#FFFFEE;
       border: 0.3px solid cyan;
       box-shadow: 1px 1.5px 1.5px #ccc;
      }

.button2:hover
      {
       background-color:#FFFFDD;
      }

.button2:active
      {
       background-color:#FFFFCC;
      }

.button2:focus
      {
       background-color:#FFFFCC;  
       outline:none;  
       box-shadow:0 0 0px lightmagenta;
      } 

#canvas1
      {
       border: 1px solid magenta;
      }

#canvas1
      {
       display:inline-block; margin-right:15px;
      }

#canvas2
      {
       border: 1px solid magenta;
      }


#c1{position:relative; top:-15px; left:200px; z-index:0;}
#c2{position:relative; top:-15px; left:220px; z-index:0;}

.margin-text
      {
       margin-left: 50px;
      }

button1
      {
       position: absolute;
       top: 50px;
       left: 100px;
       width: 100px;
       height: 40px;
       z-index: 10;
      }

button2
      {
       position: absolute;
       top: 50px;
       left: 100px;
       width: 100px;
       height: 40px;
       z-index: 10;
      }

.figure_position
      {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
      }

.figure_position p
      {
       flex: 1;
       margin-right: 10px;
      }