.body1 { margin-top: 0; background-color:#1c5c7b; font-family: "Century Gothic", Arial, Sans-serif; }
#bloc_page { width: auto; }
@font-face { font-family: "Century Gothic"; src: url('_polices/Gothic.ttf') format('truetype'); }
@font-face { font-family: "Century Gothic Bold"; src: url('_polices/GothicBold.ttf') format('truetype'); }
.a1:hover { color: #262844; text-shadow: 2px 0px 2px #262844; }
.a1:visited { color: #c0cfd9; }
.a1:focus { color: #c0cfd9; }
.a1:active { color: #c0cfd9; }
.a1:link { color: #c0cfd9; }
.a2:hover { color: #262844; }
.a2:visited { color: #262844; }
.a2:focus { color: #262844; }
.a2:active { color: #262844; }
.a2:link { color: #262844; }
.a3:hover { color: #262844; }
.a3:visited { color: #262844; }
.a3:focus { color: #262844; }
.a3:active { color: #262844; }
.a3:link { color: #262844; }
.addlink:hover { cursor: pointer; box-shadow: 3px 3px 3px #262844; }
.font0 { font-size: 0; color: #c0cfd9; }
.font1 { font-size: 18px; color: #c0cfd9; }
.font1alter1 { font-size: 0; color: #c0cfd9; }
.font1alter2 { font-size: 18px; color: #c0cfd9; }
.font1B { font-size: 18px; color: #c0cfd9; line-height: 1.6; }
.font2 { font-size: 28px; color: #c0cfd9; font-family: "Century Gothic Bold"; }
.font3A { font-size: 27px; color: #3daf49; font-family: "Century Gothic Bold"; }
.font3B { font-size: 27px; color: #e8202d; font-family: "Century Gothic Bold"; }
.font4 { font-size: 18px; color: #262844; }
.font4B { font-size: 18px; color: #262844; font-family: "Century Gothic Bold"; }
.font5 { font-size: 20px; color: #c0cfd9; font-family: "Century Gothic Bold"; }
.font5alter1 { font-size: 20px; color: #c0cfd9; font-family: "Century Gothic Bold"; }
.font5alter2 { font-size: 0; color: #c0cfd9; font-family: "Century Gothic Bold"; }
.font6 { font-size: 18px; color: #c0cfd9; font-family: "Century Gothic Bold"; }
.font66 { font-size: 18px; color: #c0cfd9; font-family: "Century Gothic Bold"; background-color:#FF0000; }
.font7 { font-size: 18px; color: #c0cfd9; font-family: "Century Gothic Bold"; text-shadow: 1px 0px 1px #262844; }
.font8 { font-size: 50px; color: #c0cfd9; font-family: "Century Gothic Bold"; text-shadow: 1px 1px 1px #262844; }
.font9 { font-size: 23px; color: #c0cfd9; font-family: "Century Gothic Bold"; text-shadow: 1px 1px 1px #262844; }
.font10 { font-size: 22px; color: #c0cfd9; font-family: "Century Gothic Bold"; }
.font11 { font-size: 75px; color: #c0cfd9; font-family: "Century Gothic Bold"; text-shadow: 1px 1px 1px #262844; }
.font12 { font-size: 23px; color: #c0cfd9; font-family: "Century Gothic Bold"; }
.font13 { font-size: 52px; color: #c0cfd9; font-family: "Century Gothic Bold"; }
.font14 { font-size: 80px; color: #c0cfd9; font-family: "Century Gothic Bold"; text-shadow: 1px 1px 1px #262844; }
.font141 { font-size: 40px; color: #c0cfd9; font-family: "Century Gothic Bold"; text-shadow: 1px 1px 1px #262844; }
.font15 { font-size: 32px; color: #c0cfd9; font-family: "Century Gothic Bold"; }
.font15alter1 { font-size: 0; color: #c0cfd9; }
.font15alter2 { font-size: 32px; color: #c0cfd9; }
.font16 { font-size: 16px; color: #c0cfd9; }
.font16alter1 { font-size: 16px; color: #c0cfd9; }
.font16alter2 { font-size: 0; color: #c0cfd9; }
.font17 { font-size: 20px; color: #262844; font-family: "Century Gothic Bold";}
.font171 { font-size: 20px; color: #c0cfd9; font-family: "Century Gothic Bold";}
.font19alter1 { font-size: 0; color: #c0cfd9; }
.font19alter2 { font-size: 32px; color: #c0cfd9; }
.font20 { font-size: 16px; color: #c0cfd9; }
.font20alter1 { font-size: 0; color: #c0cfd9; }
.font20alter2 { font-size: 16px; color: #c0cfd9; }
.font21 { font-size: 20px; color: #c0cfd9; font-family: "Century Gothic"; }
.font22 { font-size: 0; color: #c0cfd9; }
.font23 { font-size: 0; color: #c0cfd9; }

.space1 { height: 5px; }
.space2 { height: 15px; }
.spanletters { margin-right: 0; }
.spancolours { margin-right: 0; width: auto; }

.websites { width: 500px; height: 333px; border-bottom-color:#262844; border-bottom-style:solid; border-bottom-width: 1px; }

#clubshows1 { flex-direction : column; height: auto; width: 500px; }
#clubshows-space { border-top-color:#262844; border-top-style:solid; border-top-width: 1px; width: 500px; height: 1px; }
#clubshows-space2 { height: 15px; }
#clubshows2 { display: flex; align-items: center; justify-content: start; width: inherit; height: auto; padding: 10px; }
#clubshows3 { display: flex; align-items: center; justify-content: start; width: inherit; height: auto; padding: 10px; }
#clubshows4 { display: flex; align-items: center; justify-content: start; width: inherit; height: auto; padding: 10px; }
#clubshows5 { display: flex; align-items: center; justify-content: start; width: inherit; height: auto; padding: 10px; }
#clubshows6 { display: flex; align-items: center; justify-content: start; width: inherit; height: auto; padding: 10px; }

#search { background-color: #466a84; border-color:#262844; border-style:solid; border-width: 1px; padding-right: 10px; padding-top: 10px; padding-left: 10px; margin: 5px; }
#search2 { flex-direction : column; }
#search3 { display: flex; align-items: center; justify-content: center; width: auto; height: auto; }
#search4 { display: flex; align-items: center; justify-content: center; width: auto; height: auto; padding: 15px; border-top-color:#262844; border-top-style:solid; border-top-width: 1px; margin-left: 10px; margin-right: 10px; }
#search5 { display: flex; align-items: center; justify-content: center; width: auto; height: auto; padding: 15px; }

#member1 { width: 480px; height: auto; border-bottom-color:#262844; border-bottom-style:solid; border-bottom-width: 1px; border-top-color:#262844; border-top-style:solid; border-top-width: 1px; padding: 10px; lext-align: left; }
#member2 { width: 480px; height: auto; padding: 10px; text-align: left; column-count: 1; }
#member3 { flex-direction: column; width: 500px; height: auto; text-align: left; }
#member31 { width: auto; height: auto; }
#member311 { width: 460px; height: 180px; background-color: #64637b; padding: 10px; margin: 10px; border-color:#262844; border-style:solid; border-width: 1px; text-align: left; }
#member312 { width: auto; height: auto; text-align: right; padding: 10px; }

#member32 { flex-direction : column; width: auto; height: auto; }
#member321 { flex-direction: column; width: 460px; min-height: 100px; padding: 10px; margin: 10px; height: auto; text-align: right; }
#member322 { width: auto; height: auto; text-align: right; padding: 10px; }
#member1bis { width: 480px; height: auto; border-bottom-color:#262844; border-bottom-style:solid; border-bottom-width: 1px; border-top-color:#262844; border-top-style:solid; border-top-width: 1px; padding: 10px; lext-align: right; }
#member2bis { width: 460px; height: auto; background-color: #64637b; padding: 10px; margin-top: 10px; margin-bottom: 10px; margin-right: 10px; margin-left: 10px; border-color:#262844; border-style:solid; border-width: 1px; text-align: right; line-height: 1.3; }
#terms1 { width: 480px; height: auto; border-bottom-color:#262844; border-bottom-style:solid; border-bottom-width: 1px; border-top-color:#262844; border-top-style:solid; border-top-width: 1px; padding: 10px; lext-align: left; }
#terms2 { width: 480px; height: auto; padding: 10px; text-align: left; column-count: 1; }

#pub1 { flex-direction: column; }
#pub2 { padding-top: 8px; }
#pub11 { display: flex; align-items: end; }
#numbers { display: flex; align-items: center; justify-content: center; }

#banner { flex-direction: column; width: 500px; height: 127px; background-image:url(../_images/bannerRSP.png); background-position:top center; background-repeat:no-repeat; text-align: right; padding-bottom: 0px; padding-top: 3px; line-height: 0.9; }
#banner-list { flex-direction: column; width: 445px; height: 127px; background-image:url(../_images/bannerRSP.png); background-position:top center; background-repeat:no-repeat; text-align: right; padding-bottom: 0px; padding-top: 3px; line-height: 0.9; padding-right: 55px; }

#banner-index { flex-direction: column; width: 500px; height: auto; background-image:url(../_images/indexRSP.png); background-position: bottom center; background-repeat:no-repeat; }
#banner-index1 { width: auto; height: 210px; text-align: center; padding-top: 10px; }
#banner-index2 { display:table-cell; vertical-align: middle; width: 500px; height: 35px; background-color: #1c5c7b; text-align: center; border-top-color:#262844; border-top-style:solid; border-top-width: 1px; border-bottom-color:#262844; border-bottom-style:solid; border-bottom-width: 1px; }
#banner-index3 { width: auto; height: 15px; }

#pedigree-border { flex-direction: column; width: 500px; height: auto; border-color:#262844; border-style:solid; border-width: 4px; background-color: #4f527b; }
#pedigree1 { flex-direction: column; width: auto; height: auto; }
#index00 { width: auto; height: auto; }
#pedigree-picture { width: 489px; height: 489px; border-color:#262844; border-style:solid; border-width: 1px; margin: 5px; }
#pedigree-picture1 { width: 0; height: 0; }
#pedigree2 { flex-direction: column; width: auto; height: auto; padding: 10px; margin-bottom: 5px; margin-right: 5px; margin-left: 5px; background-color:#64637b; border-color:#262844; border-style:solid; border-width: 1px; }
#pedigree-name { width: auto; height: auto; border-color:#262844; border-style:solid; border-width: 1px; padding: 10px; text-align: center; background-color: #466a84; }
#pedigree-info { width: auto; height: auto; text-align: left; padding-top: 20px; }
#pedigree3 { flex-direction: column; width: auto; height: auto; margin-top: 0px; margin-right: 5px; margin-left: 5px; margin-bottom: 5px; }
#pedigree-awards { width: 469px; height: auto; min-height: 150px; border-color:#262844; margin-bottom: 5px; border-style:solid; border-width: 1px; background-color: #64637b; padding: 10px; text-align: left; background-color: #64637b; }
#pedigree-page { width: auto; height: auto; min-height: 250px; border-color:#262844; border-style:solid; border-width: 1px; background-color: #64637b; padding: 10px; text-align: left; background-color: #c0cfd9; }

#pedigree-lines { flex-direction: column; margin-left: 5px; margin-right: 5px; margin-bottom: 5px; width:auto; }
#pedigree-lines1 { flex-direction: column; width: auto; height: auto; }
#pedigree-lines2 { flex-direction: column; width: auto; height: auto; margin-top: 5px; }
#pedigree-lines10 { flex-direction: column; width: auto; height: auto; margin-left: 5px; }
#pedigree-lines20 { flex-direction: column; width: auto; height: auto; margin-left: 5px; }
#pedigree-line1 { width: 0; height: 0; padding: 0; margin-bottom: 5px; }
#pedigree-line2 { width: 0; height: 0; padding: 0; }
#pedigree-line1bis { width: auto; height: auto; display:table-cell; vertical-align: middle; }
#pedigree-line2bis { width: auto; height: auto; display:table-cell; vertical-align: middle; }
#pedigree-line3 { border-color:#262844; border-style:solid; border-width: 1px; background-color: #466a84; width: auto; height: auto; padding: 10px; text-align: left; margin-bottom: 5px; margin-left: 50px; }
#pedigree-line4 { border-color:#262844; border-style:solid; border-width: 1px; background-color: #466a84; width: auto; height: auto; padding: 10px; text-align: left; margin-bottom: 5px; margin-left: 50px; }
#pedigree-line5 { border-color:#262844; border-style:solid; border-width: 1px; background-color: #466a84;  width: auto; height: auto; padding: 10px; text-align: left; margin-bottom: 5px; margin-left: 50px; }
#pedigree-line6 { border-color:#262844; border-style:solid; border-width: 1px; background-color: #466a84; width: auto; height: auto; padding: 10px; text-align: left; margin-bottom: 5px; margin-left: 50px; }
#pedigree-line7 { border-color:#262844; border-style:solid; border-width: 1px; background-color: #466a84; width: auto; height: auto; padding: 10px; text-align: left; margin-bottom: 5px; margin-left: 120px; }
#pedigree-line8 { border-color:#262844; border-style:solid; border-width: 1px; background-color: #466a84; width: auto; height: auto; padding: 10px; text-align: left; margin-bottom: 5px; margin-left: 120px; }
#pedigree-line9 { border-color:#262844; border-style:solid; border-width: 1px; background-color: #466a84; width: auto; height: auto; padding: 10px; text-align: left; margin-bottom: 5px; margin-top: 5px; margin-left: 120px; }
#pedigree-line10 { border-color:#262844; border-style:solid; border-width: 1px; background-color: #466a84; width: auto; height: auto; padding: 10px; text-align: left; margin-bottom: 5px; margin-left: 120px; }
#pedigree-line11 { border-color:#262844; border-style:solid; border-width: 1px; background-color: #466a84; width: auto; height: auto; padding: 10px; text-align: left; margin-bottom: 5px; margin-left: 120px; }
#pedigree-line12 { border-color:#262844; border-style:solid; border-width: 1px; background-color: #466a84; width: auto; height: auto; padding: 10px; text-align: left; margin-bottom: 5px; margin-left: 120px; }
#pedigree-line13 { border-color:#262844; border-style:solid; border-width: 1px; background-color: #466a84; width: auto; height: auto; padding: 10px; text-align: left; margin-bottom: 5px; margin-top: 5px; margin-left: 120px; }
#pedigree-line14 { border-color:#262844; border-style:solid; border-width: 1px; background-color: #466a84; width: auto; height: auto; padding: 10px; text-align: left; margin-bottom: 5px; margin-left: 120px; }
#sep1 { border-color:#262844; border-style:solid; border-width: 1px; background-color: #466a84; width: auto; height: auto; padding: 10px; text-align: left; margin-bottom: 5px; }
.img1 { width: 489px; height: 489px; }
.img11 { width: 460px; height: 460px; border-color:#262844; border-style:solid; border-width: 1px; }
.img2 { width: 0; height: 0; }
.img3 { width: 32px; height: 32px; margin: 5px; }
.img4 { width: 0; height: 0; }
.img5 { width: 460px; height: 460px; border-color:#262844; border-style:solid; border-width: 1px; }
.imgFB { width: 25px; height: 25px; vertical-align:sub; }
.flag { vertical-align: middle; padding-bottom: 15px; }
.flag2 { vertical-align: middle; padding-bottom: 2px; }

.imgped { width: 0; height: 0; }
#divimg { width: 0; height: 0; margin-right: 0; }
#divimg2 { width: 0; height: 0; margin-right: 0; }

.js-copy { margin-top: 15px; background-color: #466a84; color: #c0cfd9; border: 1px solid #262844; transition-duration: 0.1s; width: 350px; height: 35px; font-size: 16px; font-family: "Century Gothic Bold"; box-shadow: 1px 1px 1px #262844; }
.js-copy:hover { background-color: #c0cfd9; color: #262844; box-shadow: 3px 3px 3px #262844; }

#offspring-border { flex-direction: column; width: 500px; height: auto; border-color:#262844; border-style:solid; border-width: 4px; background-color: #4f527b; }
#offspring1 { width: auto; height: 30px; border-color:#262844; border-style:solid; border-width: 1px; background-color: #64637b; margin: 5px; padding: 10px; }
#offspring11 { width: 460px; height: 30px; display:table-cell; vertical-align: middle; }
#offspring2 { width: 490px; height: auto; border-color:#262844; border-style:solid; border-width: 1px; background-color: #4f527b; margin: 5px; background-color: #466a84; }
#offspring21 { width: auto; height: auto; border-color:#262844; border-style:solid; border-width: 1px; background-color: #64637b; padding: 10px; margin: 5px; text-align: left; }
#offspring22 { width: auto; height: auto; padding: 10px; text-align: left; }
#credits { width: 480px; height: auto; padding: 10px; text-align: center; border-top-color:#262844; border-top-style:solid; border-top-width: 1px; line-height: 1.5; }

#list0 { width: auto; height: auto; margin: 5px; background-color: #466a84; border-color:#262844; border-style:solid; border-width: 1px; }
#list1 { display: flex; width: auto; height: auto; padding-top: 6px; }
#list111 { width: 6px; height: auto; }
#list121 { width: 225px; height: auto; background-color: #64637b; border-color:#262844; border-style:solid; border-width: 1px; padding: 10px; }
#list131 { display: flex; align-items: center; justify-content: end; width: 245px; height: auto; padding-right: 15px; }
#list51 { width: auto; min-height: 50px; background-color: #466a84; padding: 12px; text-align: left; border-width: 0; column-count: 1; }
#list4 { width: auto; height: auto; text-align: right; padding: 15px; }
#desc-list1 { width: 490px; height: auto; border-bottom-color:#262844; border-bottom-style:solid; border-bottom-width: 1px; padding: 5px; text-align: center; }
#desc-list2 { width: auto; height: auto; text-align: center; padding: 10px; }

#menuxx { column-count: 3; line-height: 28px; font-size: 18px; }
#menuxxx { column-count: 0; line-height: 28px; font-size: 18px; }

:root { transition-time: 0.2s; }
.container { }
.flex-wrapper { display: flex; align-items: center; }
.header .flex-wrapper { justify-content: space-between; height: 30px; width: 480px; padding-left: 20px; padding-right: 20px; padding-top: 10px; }
.header { }
.menu { list-style: none; text-decoration: none; line-height: 28px; }
.header .menu {
position: fixed;
top: 35px;
right: 0;

height: auto;
width: auto;
min-width: 200px;
min-height: 130px;

text-align: right;
padding: 25px;
background: #c0cfd9;

transform: translateX(100%);
}

.header .menu.open { transform: translateX(0); transition: transform var(--transition-time) ease-out; }
.header .menu .item { transform: translateX(100%); }
.header .menu.open .item { animation: mobileMenuFadeIn calc(var(--transition-time) * 2) forwards; }
.burger { position: fixed; right: 25px; cursor: pointer; }
.burger .line { background: #c0cfd9; width: 40px; height: 5px; }
.burger .line:nth-child(2) { margin: 7px 0; }
.burger.open .line { background: #262844; transition: transform calc(var(--transition-time) * 2) ease-out; }
.burger.open .line:nth-child(1) { transform: rotate(45deg) translate(10%, 5%); }
.burger.open .line:nth-child(2) { display: none; }
.burger.open .line:nth-child(3) { transform: rotate(-45deg) translate(5%, 10%); }
.content .container { padding-top: var(--font-size-xxlarge); padding-bottom: var(--font-size-xxlarge); }

@media screen and (min-width: 900px) { 
.burger { display: none; }
.header .menu {
position: initial;
text-align: initial;
padding: initial;
height: initial;
width: initial;
background: initial;
transform: initial;
display: flex;
gap: 0.8em;
}

.header .menu .item { transform: initial; }

/* Important when you resize the window with the mouse... and it does not happen with a phone so... */
.header .menu .link {
font-size: 1em !important;
color: #c0cfd9 !important;
}
}

@keyframes mobileMenuFadeIn { 0% { opacity: 0; }
70% { opacity: 0.5; }
100% { transform: translateX(0); opacity: 1; }
}





#index-desc1 { width:500px; height: auto; border-left-color:#262844; border-left-style:solid; border-left-width: 1px; border-right-color:#262844; border-right-style:solid; border-right-width: 1px; }
#index-desc2 { width:447px; height: auto; border-color:#262844; border-style:solid; border-width: 1px; margin-left: 15px; margin-right: 15px; padding: 10px; text-align: left; }

#index0 { width: 0; height: 0; }
#index1 { flex-direction: column; width: 448px; height: auto; padding: 20px; margin-left: 5px; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; background-color: #64637b; background-image:url(../_images/index-bk.png); background-position:bottom left; background-repeat:no-repeat; border-color:#262844; border-style:solid; border-width: 1px; text-align:left; }
#index11 { flex-direction: column; width: auto; height: auto; padding: 10px; margin-left: 30px; margin-right: 30px; text-align:left; }
#index12 { flex-direction: column; width: auto; height: auto; padding: 10px; margin-left: 30px; margin-right: 30px; margin-top: 30px; background-color:#466a84; border-color:#262844; border-style:solid; border-width: 1px; text-align:left; line-height: 1.8; }
#index13 { flex-direction: column; width: auto; height: auto; padding: 10px; margin-left: 30px; margin-right: 30px; margin-top: 30px; background-color:#466a84; border-color:#262844; border-style:solid; border-width: 1px; text-align:left; line-height: 1.8; }

#index8 { flex-direction: column; width: 490px; height: auto; margin: 5px; }
#index81 { width: 489px; height: auto; background-color: #64637b; border-color:#262844; border-style:solid; border-width: 1px; margin-bottom: 7px; }
#index811 { width: auto; height: auto; padding: 10px; }
#index812 { display: flex; width: auto; height: auto; margin-top: 20px; }
#index8121 { margin:10px; width:70px; height:70px; text-align:center; border-color:#c0cfd9; border-style:solid; border-width: 2px; border-radius:100px; <strong>line-height: 90px; /* 100 - 10 */</strong>}
#index8122 { width: 380px; height: auto; padding-left: 10px; padding-bottom: 10px; padding-right: 10px; padding-top: 15px; text-align: left; }
#index82 { flex-direction: column; width: auto; height: auto; background-color: #64637b; border-color:#262844; border-style:solid; border-width: 1px; margin-left: 0px; padding-left: 0; }
#index82bis { flex-direction: column; padding: 10px; }
#index82ter { text-align: left; padding-top: 40px; padding-bottom: 10px; padding-right: 10px; padding-left: 10px; }
#index821 { width: auto; height: auto; padding-top: 47px; text-align: right; }
#index822 { width: 110px; height: auto; display: flex; align-items: center; justify-content: center; }
#spotlight { width: 0; height: 0; background-color:#64637b; padding: 0; margin-bottom : 0; margin-top : 0; border-color:#262844; border-style: none; border-width: 0; }


::placeholder { font-size: 16px; color: #262844; font-family: "Century Gothic"; }
.inputsearch { width: 440px; height: 35px; font-size: 18px; color: #262844; font-family: "Century Gothic"; }
.inputnumbers { width: 35px; height: 35px; font-size: 16px; color: #262844; font-family: "Century Gothic"; }
.input1 { width: 450px; height: 32px; font-size: 18px; color: #262844; font-family: "Century Gothic"; }
.input1B { width: 450px; height: 32px; font-size: 18px; color: #262844; font-family: "Century Gothic"; }
.input2 { width: 440px; height: 35px; font-size: 18px; color: #262844; font-family: "Century Gothic"; }
.input2B { width: 440px; height: 35px; font-size: 18px; color: #262844; font-family: "Century Gothic";  }
.input2C { width: 440px; height: 35px; font-size: 18px; color: #262844; font-family: "Century Gothic"; }
.input2E { width: 430px; height: 35px; font-size: 18px; color: #262844; font-family: "Century Gothic";  }
.input3 { width: 440px; height: 35px; font-size: 18px; color: #262844; font-family: "Century Gothic"; }
.input3A { width: 400px; height: 35px; font-size: 18px; color: #262844; font-family: "Century Gothic"; }
.input3B { width: 400px; height: 35px; font-size: 18px; color: #262844; font-family: "Century Gothic"; }
.input3C { width: 440px; height: 35px; font-size: 18px; color: #262844; font-family: "Century Gothic"; }
.input3Cbis { width: 440px; height: 35px; font-size: 18px; color: #262844; font-family: "Century Gothic"; }
.input3D { width: 440px; height: 35px; font-size: 18px; color: #262844; font-family: "Century Gothic"; }
.input31 { width: 190px; height: 35px; font-size: 18px; color: #262844; font-family: "Century Gothic"; }
.input311 { width: 200px; height: 35px; font-size: 18px; color: #262844; font-family: "Century Gothic"; }
.input3110 { width: 200px; height: 35px; font-size: 18px; color: #262844; font-family: "Century Gothic"; }
.input3111 { width: 440px; height: 100px; font-size: 18px; color: #262844; font-family: "Century Gothic"; vertical-align: middle; }
.input4 { width: 458px; height: 35px; font-size: 18px; color: #262844; font-family: "Century Gothic"; background-color:#FFFFFF; }
.input6 { width: 40px; height: 35px; font-size: 18px; color: #262844; font-family: "Century Gothic"; }
.label2 { width: 400px; height: 35px; font-size: 18px; color: #262844; font-family: "Century Gothic"; }
.select1 { width: 212px; height: 38px; font-size: 18px; color: #262844; font-family: "Century Gothic"; border-color:#e8202d; border-style:solid; border-width: 2px; }
.select1:valid { width: 212px; height: 38px; font-size: 18px; color: #262844; font-family: "Century Gothic"; border-color:#FFFFFF; border-style:solid; border-width: 2px; }
.select87 { width: 160px; height: 38px; font-size: 18px; color: #262844; font-family: "Century Gothic"; }
.input5 { width: 300px; height: 35px; font-size: 18px; color: #262844; font-family: "Century Gothic"; background-color:#FFFFFF; margin-bottom: 5px; margin-top: 5px; }
.input5b { width: 340px; height: 35px; font-size: 18px; color: #262844; font-family: "Century Gothic"; background-color:#FFFFFF; margin-bottom: 5px; margin-top: 5px; }
.buttonsearch { margin-top: 50px; margin-bottom: 10px; background-color: #64637b; color: #c0cfd9; border: 1px solid #262844; transition-duration: 0.1s; width: 80px; height: 60px; font-size: 20px; font-family: "Century Gothic Bold"; box-shadow: 1px 1px 1px #262844; }
.buttonsearch:hover { background-color: #c0cfd9; color: #262844; box-shadow: 3px 3px 3px #262844; }
.button1 { background-color: #466a84; color: #c0cfd9; border: 1px solid #262844; transition-duration: 0.1s; width: 90px; height: 60px; font-size: 18px; font-family: "Century Gothic Bold"; box-shadow: 1px 1px 1px #262844; }
.button1:hover { background-color: #c0cfd9; color: #262844; box-shadow: 3px 3px 3px #262844; }
.button2 { background-color: #466a84; color: #c0cfd9; border: 1px solid #262844; transition-duration: 0.1s; width: 290px; height: 30px; font-size: 18px; font-family: "Century Gothic Bold"; box-shadow: 1px 1px 1px #262844; }
.button2:hover { background-color: #c0cfd9; color: #262844; box-shadow: 3px 3px 3px #262844; }
.button3 { background-color: #64637b; color: #c0cfd9; border: 1px solid #262844; transition-duration: 0.1s; width: 220px; height: 40px; font-size: 18px; font-family: "Century Gothic Bold"; box-shadow: 1px 1px 1px #262844; }
.button3:hover { background-color: #c0cfd9; color: #262844; box-shadow: 3px 3px 3px #262844; }
.button33 { background-color: #64637b; color: #c0cfd9; border: 1px solid #262844; transition-duration: 0.1s; width: 150px; height: 40px; font-size: 18px; margin-bottom: 10px; font-family: "Century Gothic Bold"; box-shadow: 1px 1px 1px #262844; }
.button33:hover { background-color: #c0cfd9; color: #262844; box-shadow: 3px 3px 3px #262844; }
.button33B { background-color: #466a84; color: #c0cfd9; border: 1px solid #262844; transition-duration: 0.1s; width: 150px; height: 40px; font-size: 18px; margin-bottom: 10px; font-family: "Century Gothic Bold"; box-shadow: 1px 1px 1px #262844; }
.button33B:hover { background-color: #c0cfd9; color: #262844; box-shadow: 3px 3px 3px #262844; }
.button33C { background-color: #466a84; color: #c0cfd9; border: 1px solid #262844; transition-duration: 0.1s; width: 232px; height: 40px; font-size: 18px; margin-bottom: 10px; font-family: "Century Gothic Bold"; box-shadow: 1px 1px 1px #262844; }
.button33C:hover { background-color: #c0cfd9; color: #262844; box-shadow: 3px 3px 3px #262844; }
.button4 { margin-top: 10px; background-color: #64637b; color: #c0cfd9; border: 1px solid #262844; transition-duration: 0.1s; width: 120px; height: 40px; font-size: 18px; font-family: "Century Gothic Bold"; box-shadow: 1px 1px 1px #262844; }
.button41 { background-color: #64637b; color: #c0cfd9; border: 1px solid #262844; transition-duration: 0.1s; width: 190px; height: 40px; font-size: 18px; font-family: "Century Gothic Bold"; box-shadow: 1px 1px 1px #262844; }
.button4:hover { background-color: #c0cfd9; color: #262844; box-shadow: 3px 3px 3px #262844; }
.button5 { background-color: #64637b; color: #c0cfd9; border: 1px solid #262844; transition-duration: 0.1s; width: 230px; height: 40px; font-size: 18px; font-family: "Century Gothic Bold"; box-shadow: 1px 1px 1px #262844; }
.button5:hover { background-color: #c0cfd9; color: #262844; box-shadow: 3px 3px 3px #262844; }
.button6 { background-color: #64637b; color: #c0cfd9; border: 1px solid #262844; transition-duration: 0.1s; width: 290px; height: 40px; font-size: 18px; font-family: "Century Gothic Bold"; box-shadow: 1px 1px 1px #262844; }
.button6:hover { background-color: #c0cfd9; color: #262844; box-shadow: 3px 3px 3px #262844; }
.button6b { background-color: #c0cfd9; color: #c0cfd9; border: 1px solid #262844; transition-duration: 0.1s; width: 390px; height: 40px; color: #262844; font-size: 18px; font-family: "Century Gothic Bold"; box-shadow: 1px 1px 1px #262844; }
.button6b:hover { background-color: #c0cfd9; color: #262844; box-shadow: 3px 3px 3px #262844; }
.button7 { background-color: #64637b; color: #c0cfd9; border: 1px solid #262844; transition-duration: 0.1s; width: 390px; height: 40px; font-size: 18px; font-family: "Century Gothic Bold"; box-shadow: 1px 1px 1px #262844; }
.button7:hover { background-color: #c0cfd9; color: #262844; box-shadow: 3px 3px 3px #262844; }
.button7B { background-color: #466a84; color: #c0cfd9; border: 1px solid #262844; transition-duration: 0.1s; width: 390px; height: 40px; font-size: 18px; font-family: "Century Gothic Bold"; box-shadow: 1px 1px 1px #262844; }
.button7B:hover { background-color: #c0cfd9; color: #262844; box-shadow: 3px 3px 3px #262844; }
.button7C { background-color: #64637b; color: #c0cfd9; border: 1px solid #262844; transition-duration: 0.1s; width: 430px; height: 40px; font-size: 18px; font-family: "Century Gothic Bold"; box-shadow: 1px 1px 1px #262844; }
.button7C:hover { background-color: #c0cfd9; color: #262844; box-shadow: 3px 3px 3px #262844; }
.button8 { background-color: #64637b; color: #c0cfd9; border: 1px solid #262844; transition-duration: 0.1s; width: 200px; height: 40px; font-size: 18px; font-family: "Century Gothic Bold"; box-shadow: 1px 1px 1px #262844; }
.button8:hover { background-color: #c0cfd9; color: #262844; box-shadow: 3px 3px 3px #262844; }
.button9 { background-color: #466a84; color: #c0cfd9; border: 1px solid #262844; transition-duration: 0.1s; width: 200px; height: 40px; font-size: 18px; font-family: "Century Gothic Bold"; box-shadow: 1px 1px 1px #262844; }
.button9:hover { background-color: #c0cfd9; color: #262844; box-shadow: 3px 3px 3px #262844; }
.button10 { background-color: #466a84; color: #c0cfd9; border: 1px solid #262844; transition-duration: 0.1s; width: 200px; height: 40px; font-size: 18px; font-family: "Century Gothic Bold"; box-shadow: 1px 1px 1px #262844; }
.button10:hover { background-color: #c0cfd9; color: #262844; box-shadow: 3px 3px 3px #262844; }
.checkbox1 { width: 32px; height: 32px; }
.checkbox1B { width: 32px; height: 32px; margin-left: 15px; }
.checkbox2 { width: 32px; height: 32px; vertical-align: middle; }
.radio1 {width: 30px; height: 30px; }
#list1 { display: flex; width: auto; height: auto; }
#list11 { width: 395px; height: auto; background-color: #64637b; border-color:#262844; border-style:solid; border-width: 1px; margin-right: 6px; margin-top: 5px; margin-left: 5px; margin-bottom: 2px; }
#list12 { width: 395px; height: auto; background-color: #64637b; border-color:#262844; border-style:solid; border-width: 1px; margin-right: 6px; margin-top: 5px; margin-bottom: 2px; }
#list13 { width: 395px; height: auto; background-color: #64637b; border-color:#262844; border-style:solid; border-width: 1px; margin-right: 6px; margin-top: 5px; margin-bottom: 2px; align-items: center; }
#list2 { width: auto; min-height: 50px; background-color: #466a84; padding: 20px; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; margin-right: 6px; border-color:#262844; border-style:solid; border-width: 1px; column-count: 2; text-align: left; }
#list3 { width: 1200px; height: auto; text-align: right; }
#desc-list { width: 1190px; height: auto; border-bottom-color:#262844; border-bottom-style:solid; border-bottom-width: 1px; padding: 5px; text-align: center; }


#add1v1 { flex-direction : column; width: 487px; height: auto; margin: 6px; background-image:none; }
#add1v2 { flex-direction : column; width: 487px; height: auto; margin: 6px; background-image:none; }
#add1v3 { flex-direction : column; width: 487px; height: auto; margin: 6px; background-image:none; }
#add1v4 { flex-direction : column; width: 487px; height: auto; margin: 6px; background-image:none; }
#add1v5 { flex-direction : column; width: 487px; height: auto; margin: 6px; background-image:none; }

#add2 { width: 457px; min-height: 50px; background-color: #466a84; padding: 15px; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; text-align: center; }

#add3 { width: auto; height: auto; background-color: #466a84; margin: 5px; border-color:#262844; border-style:solid; border-width: 1px; padding: 20px; }
#add4 { width: 457px; min-height: 50px; background-color: #466a84; padding: 15px; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; text-align: right; }
#add5 { display: flex; align-items: center; justify-content: center; width: 580px; min-height: 50px; padding: 10px; margin: 5px; border-color:#262844; border-style:solid; border-width: 1px; text-align: center; }
#add6 { width: 477px; min-height: 50px; background-color: #466a84; padding: 5px; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; text-align: center; }
#add7 { width: 580px; min-height: 50px; padding: 10px; margin: 5px; border-color:#262844; border-style:solid; border-width: 1px; text-align: center; }
#add8 { width: auto; height: auto; padding: 10px; margin-left: 35px; margin-right: 35px; margin-top: 20px; margin-bottom: 20px; border-color:#262844; border-style:solid; border-width: 1px; text-align: left; }
#add8B { width: auto; height: auto; padding: 10px; margin-left: 20px; margin-right: 20px; margin-top: 20px; margin-bottom: 20px; border-color:#262844; border-style:solid; border-width: 1px; text-align: left; }

#add14 { width: 487px; min-height: 50px; margin: 5px; text-align: center; padding: 0}
#add15 { width: 187px; height: auto; padding: 10px; margin-left: 150px; margin-right: 150px; margin-top: 20px; margin-bottom: 20px; border-color:#262844; border-style:solid; border-width: 1px; text-align: center; background-color: #466a84; }

.labmarg { margin-bottom: 25px; padding-bottom: 25px; }

#addtopinter { width:auto; height: 6px; }
#addtopwhitecircle { display: flex; align-items : middle; justify-content: center; width:auto; height:auto; !important; padding: 5px; text-align:center; border-color:#262844; border-style:solid; border-width: 1px; background-color:#c0cfd9; border-radius:100px; <strong>line-height: 90px; /* 100 - 10 */</strong> }
#addtoppurplecircle { display: flex; align-items : middle; justify-content: center; width:auto; height:auto; !important; padding: 5px; text-align:center; border-color:#262844; border-style:solid; border-width: 1px; background-color:#64637b; border-radius:100px; <strong>line-height: 90px; /* 100 - 10 */</strong>}
#addtopbluecircle { display: flex; align-items : middle; justify-content: center; width:auto; height:auto; !important; padding: 5px; text-align:center; border-color:#262844; border-style:solid; border-width: 1px; background-color:#466a84; border-radius:100px; <strong>line-height: 90px; /* 100 - 10 */</strong>}
#addtopwhitecircle2l { display: flex; align-items : middle; justify-content: center; width:auto; !important; height:auto; padding: 5px; text-align:center; border-color:#262844; border-style:solid; border-width: 1px; background-color:#c0cfd9; border-radius:100px; <strong>line-height: 90px; /* 100 - 10 */</strong>}
#addtoppurplecircle2l { display: flex; align-items : middle; justify-content: center; width:auto; !important; height:auto; padding: 5px; text-align:center; border-color:#262844; border-style:solid; border-width: 1px; background-color:#64637b; border-radius:100px; <strong>line-height: 90px; /* 100 - 10 */</strong>}
#addtopbluecircle2l { display: flex; align-items : middle; justify-content: center; width:auto; !important; height:auto; padding: 5px; text-align:center; border-color:#262844; border-style:solid; border-width: 1px; background-color:#466a84; border-radius:100px; <strong>line-height: 90px; /* 100 - 10 */</strong>}
.addpic { margin-top:3px; }

#addtopinter { width:auto; height: 6px; }
#addtopwhitecircleB { display: flex; align-items : middle; justify-content: center; width:auto; height:auto; !important; padding: 5px; text-align:center; border-color:#262844; border-style:solid; border-width: 1px; background-color:#c0cfd9; border-radius:100px; <strong>line-height: 90px; /* 100 - 10 */</strong> }
#addtoppurplecircleB { display: flex; align-items : middle; justify-content: center; width:auto; height:auto; !important; padding: 5px; text-align:center; border-color:#262844; border-style:solid; border-width: 1px; background-color:#64637b; border-radius:100px; <strong>line-height: 90px; /* 100 - 10 */</strong>}
#addtopbluecircleB { display: flex; align-items : middle; justify-content: center; width:auto; height:auto; !important; padding: 5px; text-align:center; border-color:#262844; border-style:solid; border-width: 1px; background-color:#466a84; border-radius:100px; <strong>line-height: 90px; /* 100 - 10 */</strong>}
#addtopwhitecircle2lB { display: flex; align-items : middle; justify-content: center; width:auto; !important; height:auto; padding: 5px; text-align:center; border-color:#262844; border-style:solid; border-width: 1px; background-color:#c0cfd9; border-radius:100px; <strong>line-height: 90px; /* 100 - 10 */</strong>}
#addtoppurplecircle2lB { display: flex; align-items : middle; justify-content: center; width:auto; !important; height:auto; padding: 5px; text-align:center; border-color:#262844; border-style:solid; border-width: 1px; background-color:#64637b; border-radius:100px; <strong>line-height: 90px; /* 100 - 10 */</strong>}
#addtopbluecircle2lB { display: flex; align-items : middle; justify-content: center; width:auto; !important; height:auto; padding: 5px; text-align:center; border-color:#262844; border-style:solid; border-width: 1px; background-color:#466a84; border-radius:100px; <strong>line-height: 90px; /* 100 - 10 */</strong>}
#divpicadd2 { display: flex; justify-content: start; height: inherit; }
.addpic { margin-top:3px; }

#addbreederowner { flex-direction: column; width:auto; height:auto; padding: 5px; margin-left: 0; margin-right: 0; }
#addbreederowner1 { width:430px; height:auto; border-color:#262844; border-style:solid; border-width: 1px; text-align: right; padding: 10px; margin-right: 0; margin-bottom: 10px; }
#addbreederowner2 { width:430px; height:auto; border-color:#262844; border-style:solid; border-width: 1px; text-align: right; padding: 10px; margin-right: 0; }

#add1inside1 { flex-direction: column; width: 457px; height: auto; }
#add1inside11 { width: 447px; height: auto; padding: 5px; text-align: left; }
#add1inside12 { width: 447px; height: auto; padding: 5px; text-align: right; }
#add1inside12bis { width: 447px; height: auto; padding: 5px; text-align: right; }

#form100 { flex-direction: column; width: 457px; height: auto; }
#form101 { width: 447px; height: auto; padding-top: 10px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; text-align: left; }
#form102 { width: 447px; height: auto; padding: 5px; text-align: right; }
#form102A { width: 427px; height: auto; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; padding-right: 5px; text-align: left; }
#form103 { width: auto; height: 20px; padding: 5px; text-align: left; }
#form200 { display: flex; width: 457px; height: 40px; }
#form201 { width: 242px; height: auto; padding-top: 15px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; text-align: right; }
#form202 { width: 205px; height: auto; padding: 5px; text-align: right; }
#form203 { width: auto; height: 20px; padding: 5px; text-align: left; }




#form1 { flex-direction: column; width: 457px; height: auto; }
#form11 { width: 447px; height: auto; padding: 5px; text-align: left; }
#form12 { width: 447px; height: auto; padding: 5px; text-align: right; }
#form2 { flex-direction : column; width: 457px; height: auto; }
#form21 { display: flex; width: 457px; height: auto; padding: 0; }
#form211 { display: flex; align-items: center; justify-content: left; width: 222px; height: auto; text-align: left; padding: 5px; }
#form212 { display: flex; align-items: center; justify-content: right; width: 225px; height: auto; text-align: right; padding: 5px; }
#form22 { display: flex; align-items: center; width: 457px; height: 0; }

#form3 { display: flex; width: 457px; height: auto; }
#form31 { width: 207px; height: auto; padding: 5px; padding-top: 25px; text-align: left; }
#form32 { width: 230px; height: auto; padding: 5px; text-align: left; }


#form4 { flex-direction : column; width: 457px; height: auto; }
#form41 { display: flex; width: 457px; height: auto; padding: 0; }
#form411 { display: flex; align-items: center; justify-content: left; width: 230px; height: auto; text-align: left; padding: 5px; }
#form412 { width: 217px; height: auto; text-align: right; padding: 5px; }
#form42 { display: flex; align-items: center; width: 457px; height: 0; }


#form5 { flex-direction : column; width: 447px; height: auto; }
#form51 { display: flex; align-items: center; justify-content: right; width: 437px; height: 40px; padding: 5px; text-align: right; }
#form52 { display: flex; align-items: center; width: 437px; height: 40px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 20px; text-align: right; }

#form6 { flex-direction: column; width: 457px; height: auto; }
#form61 { width: 447px; height: auto; padding-top: 10px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; text-align: left; }
#form62 { width: 447px; height: auto; padding: 5px; text-align: right; }
#form7 { flex-direction: column; width: 457px; height: auto; }
#form71 { width: 447px; height: auto; padding-top: 10px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; text-align: left; }
#form72 { width: 447px; height: auto; padding: 5px; text-align: right; }

#form8 { display: flex; align-items: center; justify-content: center; width: 447px; height: auto; }

#check11 { flex-direction : column; width: auto; height: auto; }
#check111 { width: auto; height: auto; margin: 5px; }
#check112 { width: auto; height: auto; text-align: left; padding: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; }

#check2-gen1 { width: 455px; height: auto; text-align: left; margin-left: 0; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; background-color:#64637b; }
#check2-gen2 { width: 455px; height: auto; text-align: left; margin-left: 0; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; background-color:#64637b; }
#check2-gen3 { width: 370px; height: auto; text-align: left; margin-left: 70px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px;background-color:#64637b;  }
#check2-gen4 { width: 370px; height: auto; text-align: left; margin-left: 70px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px;background-color:#64637b;  }
#check2-gen5 { width: 370px; height: auto; text-align: left; margin-left: 70px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; background-color:#64637b; }
#check2-gen6 { width: 370px; height: auto; text-align: left; margin-left: 70px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; background-color:#64637b; }
#check2-gen7 { width: 330px; height: auto; text-align: left; margin-left: 125px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; background-color:#64637b; }
#check2-gen8 { width: 330px; height: auto; text-align: left; margin-left: 125px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; background-color:#64637b; }
#check2-gen9 { width: 330px; height: auto; text-align: left; margin-left: 125px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; background-color:#64637b; }
#check2-gen10 { width: 330px; height: auto; text-align: left; margin-left: 125px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; background-color:#64637b; }
#check2-gen11 { width: 325px; height: auto; text-align: left; margin-left: 125px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; 330px-style:solid; border-width: 1px; background-color:#64637b; }
#check2-gen12 { width: 330px; height: auto; text-align: left; margin-left: 125px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; background-color:#64637b; }
#check2-gen13 { width: 330px; height: auto; text-align: left; margin-left: 125px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; background-color:#64637b; }
#check2-gen14 { width: 330px; height: auto; text-align: left; margin-left: 125px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; background-color:#64637b; }

#check2-gen3B { width: 315px; height: auto; text-align: left; margin-left: 90px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; }
#check2-gen4B { width: 315px; height: auto; text-align: left; margin-left: 90px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; }
#check2-gen5B { width: 315px; height: auto; text-align: left; margin-left: 90px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; }
#check2-gen6B { width: 315px; height: auto; text-align: left; margin-left: 90px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; }
#check2-gen7B { width: 315px; height: auto; text-align: left; margin-left: 140px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; }
#check2-gen8B { width: 315px; height: auto; text-align: left; margin-left: 140px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px;  }
#check2-gen9B { width: 315px; height: auto; text-align: left; margin-left: 140px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; }
#check2-gen10B { width: 315px; height: auto; text-align: left; margin-left: 140px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; }
#check2-gen11B { width: 315px; height: auto; text-align: left; margin-left: 140px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; }
#check2-gen12B { width: 315px; height: auto; text-align: left; margin-left: 140px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; }
#check2-gen13B { width: 315px; height: auto; text-align: left; margin-left: 140px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; }
#check2-gen14B { width: 315px; height: auto; text-align: left; margin-left: 140px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; }
#frame-gen { width: auto; height: auto; padding: 8px; border-color:#262844; border-style:solid; border-width: 1px; min-height: 25px; }
#gen-button1 { flex-direction: column; }
#gen-button1b { flex-direction: column; padding-left: 0; }
#gen-button2 { display: flex; align-items: middle; justify-content: center; padding-top: 20px; }
#gen-button10 { padding-top: 20px; }
#gen-button100 { padding-top: 20px; padding-left: 0; padding-right: 0; }


.addtop:hover { cursor: pointer; box-shadow: 2px 2px 2px #262844; }
.addtop:active, shows:focus { cursor: pointer; box-shadow: 2px 2px 2px #262844;  }

.input1:valid { border-color:#FFFFFF; border-style:solid; border-width: 0; background-color: #FFFFFF; }
.input1:invalid { border-color:#e8202d; border-style:solid; border-width: 1px; background-color: #fae2eb; }
.input1:invalid + .span1:after { background-color: #c0cfd9; border-color:#e8202d; border-style:solid; border-width: 1px; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: "Invalid format"; font-size: 14px; color: #e8202d; font-family: "Century Gothic Bold"; width: 120px; height: 20px; background-image:url(../_images/red-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input1:placeholder-shown { border-color:#262844; border-style:solid; border-width: 1px; background-color: #FFFFFF; }
.input1:placeholder-shown + .span1:after { content: " "; font-size: 14px; color: #e8202d; font-family: "Century Gothic Bold"; width: 0; height: 0; background-image: none; background-color: none; border-width: 0; opacity: 0; }

.input1B:valid { border-color:#FFFFFF; border-style:solid; border-width: 0; background-color: #FFFFFF; }
.input1B:invalid { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #fae2eb; }
.input1B:invalid + .span1B:after { background-color: #c0cfd9; border-color:#e8202d; border-style:solid; border-width: 1px; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: "Invalid character"; font-size: 14px; color: #e8202d; font-family: "Century Gothic Bold"; width: 120px; height: 20px; background-image:url(../_images/red-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input1B:placeholder-shown { border-color:#262844; border-style:solid; border-width: 1px; background-color: #FFFFFF; }
.input1B:placeholder-shown + .span1B:after { content: " "; font-size: 14px; color: #e8202d; font-family: "Century Gothic Bold"; width: 0; height: 0; background-image: none; background-color: none; border-width: 0; opacity: 0; }

.inputsearch:invalid { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #fae2eb; }
.inputsearch:invalid + .spansearch:after { background-color: #c0cfd9; border-color:#e8202d; border-style:solid; border-width: 1px; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: "Use one of the selected names only without altering it"; font-size: 14px; color: #e8202d; font-family: "Century Gothic Bold"; width: 400px; height: 20px; background-image:url(../_images/red-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.inputsearch:placeholder-shown { border-color:#262844; border-style:solid; border-width: 1px; background-color: #FFFFFF; }
.inputsearch:placeholder-shown + .spansearch:after { content: " "; font-size: 14px; color: #e8202d; font-family: "Century Gothic Bold"; width: 0; height: 0; background-image: none; background-color: none; border-width: 0; opacity: 0; }

.input2:invalid { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #fae2eb; }
.input2:invalid + .span2:after { background-color: #c0cfd9; border-color:#e8202d; border-style:solid; border-width: 1px; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: "Please use selected names only (or leave empty)"; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 410px; height: 50px; background-image:url(../_images/red-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }

.input2B:valid + .span2B:after { border-width: 0; position: relative; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 30px; height: 27px; background-image:url(../_images/green-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input2B:invalid { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #fae2eb; }
.input2B:invalid + .span2B:after { background-color: #c0cfd9; border-color:#e8202d; border-style:solid; border-width: 1px; position: relative; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: "Please use selected names only"; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 430px; height: 27px; background-image:url(../_images/red-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input2B:placeholder-shown { border-color:#FFFFFF; border-style:solid; border-width: 2px; background-color: #FFFFFF; }
.input2B:placeholder-shown + .span2B:after { content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 0; height: 0; background-image: none; background-color: none; border-width: 0; opacity: 0; }

.input2E:valid + .span2E:after { border-width: 0; position: relative; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 30px; height: 27px; background-image:url(../_images/green-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input2E:invalid { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #fae2eb; }
.input2E:invalid + .span2E:after { background-color: #c0cfd9; border-color:#e8202d; border-style:solid; border-width: 1px; position: relative; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: "Please use selected names only"; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 390px; height: 27px; background-image:url(../_images/red-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input2E:placeholder-shown { border-color:#FFFFFF; border-style:solid; border-width: 2px; background-color: #FFFFFF; }
.input2E:placeholder-shown + .span2E:after { content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 0; height: 0; background-image: none; background-color: none; border-width: 0; opacity: 0; }

.input2C:valid + .span2C:after { border-width: 0; position: relative; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 30px; height: 27px; background-image:url(../_images/green-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input2C:invalid { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #fae2eb; }
.input2C:invalid + .span2C:after { background-color: #c0cfd9; border-color:#e8202d; border-style:solid; border-width: 1px; position: relative; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: "Please use selected names only"; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 430px; height: 27px; background-image:url(../_images/red-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input2C:placeholder-shown { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #FFFFFF; }
.input2C:placeholder-shown + .span2C:after { content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 0; height: 0; background-image: none; background-color: none; border-width: 0; opacity: 0; }

.input3:valid + .span3:after { border-width: 0; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 30px; height: 20px; background-image:url(../_images/green-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input3:invalid { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #fae2eb; }
.input3:invalid + .span3:after { background-color: #c0cfd9; border-color:#e8202d; border-style:solid; border-width: 1px; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: "You used an invalid character"; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 390px; height: 25px; background-image:url(../_images/red-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input3:placeholder-shown { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #FFFFFF; }
.input3:placeholder-shown + .span3:after { content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 0; height: 0; background-image: none; background-color: none; border-width: 0; opacity: 0; }

.input3D:valid + .span3D:after { border-width: 0; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 30px; height: 20px; background-image:url(../_images/green-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; }
.input3D:invalid { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #fae2eb; }
.input3D:invalid + .span3D:after { background-color: #c0cfd9; border-color:#e8202d; border-style:solid; border-width: 1px; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: "You used an invalid character"; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 370px; height: 20px; background-image:url(../_images/red-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; }
.input3D:placeholder-shown { border-color:#FFFFFF; border-style:solid; border-width: 2px; background-color: #FFFFFF; }
.input3D:placeholder-shown + .span3D:after { content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 0; height: 0; background-image: none; background-color: none; border-width: 0; opacity: 0; }

.input3A:valid + .span3A:after { border-width: 0; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 25px; height: 20px; background-image:url(../_images/green-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; }
.input3A:invalid { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #fae2eb; }
.input3A:invalid + .span3A:after { background-color: #c0cfd9; border-color:#e8202d; border-style:solid; border-width: 1px; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: "You used an invalid character"; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 370px; height: 20px; background-image:url(../_images/red-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input3A:placeholder-shown { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #FFFFFF; }
.input3A:placeholder-shown + .span3A:after { content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 0; height: 0; background-image: none; background-color: none; border-width: 0; opacity: 0; }

.input3C:valid + .span3C:after { border-width: 0; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 25px; height: 20px; background-image:url(../_images/green-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input3C:invalid { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #fae2eb; }
.input3C:invalid + .span3C:after { background-color: #c0cfd9; border-color:#e8202d; border-style:solid; border-width: 1px; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: "You used an invalid character"; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 370px; height: 20px; background-image:url(../_images/red-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input3C:placeholder-shown { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #FFFFFF; }
.input3C:placeholder-shown + .span3C:after { content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 0; height: 0; background-image: none; background-color: none; border-width: 0; opacity: 0; }

.inputnumbers:valid + .spannumbers:after { border-width: 0; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 25px; height: 20px; background-image:url(../_images/green-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.inputnumbers:invalid { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #fae2eb; }
.inputnumbers:invalid + .spannumbers:after { background-color: #c0cfd9; border-color:#e8202d; border-style:solid; border-width: 1px; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: "You used an invalid character"; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 370px; height: 20px; background-image:url(../_images/red-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.inputnumbers:placeholder-shown { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #FFFFFF; }
.inputnumbers:placeholder-shown + .spannumbers:after { content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 0; height: 0; background-image: none; background-color: none; border-width: 0; opacity: 0; }

.input3Cbis:valid + .span3Cbis:after { border-width: 0; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 25px; height: 20px; background-image:url(../_images/green-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input3Cbis:invalid { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #fae2eb; }
.input3Cbis:invalid + .span3Cbis:after { background-color: #c0cfd9; border-color:#e8202d; border-style:solid; border-width: 1px; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: "Invalid entry"; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 370px; height: 20px; background-image:url(../_images/red-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input3Cbis:placeholder-shown { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #FFFFFF; }
.input3Cbis:placeholder-shown + .span3Cbis:after { content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 0; height: 0; background-image: none; background-color: none; border-width: 0; opacity: 0; }

.input3B:valid + .span3B:after { border-width: 0; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 30px; height: 20px; background-image:url(../_images/green-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; }
.input3B:invalid { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #fae2eb; }
.input3B:invalid + .span3B:after { background-color: #c0cfd9; border-color:#e8202d; border-style:solid; border-width: 1px; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: "You used an invalid character"; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 370px; height: 20px; background-image:url(../_images/red-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input3B:placeholder-shown { border-color:#FFFFFF; border-style:solid; border-width: 2px; background-color: #FFFFFF; }
.input3B:placeholder-shown + .span3B:after { content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 0; height: 0; background-image: none; background-color: none; border-width: 0; opacity: 0; }

.input6:valid + .span6:after { border-width: 0; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 30px; height: 20px; background-image:url(../_images/green-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; }
.input6:invalid { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #fae2eb; }
.input6:invalid + .span6:after { background-color: #c0cfd9; border-color:#e8202d; border-style:solid; border-width: 1px; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: "You used an invalid character"; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 370px; height: 20px; background-image:url(../_images/red-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input6:placeholder-shown { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #FFFFFF; }
.input6:placeholder-shown + .span6:after { content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 0; height: 0; background-image: none; background-color: none; border-width: 0; opacity: 0; }

.input31:valid + .span31:after { border-width: 0; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: "Date of Birth OK"; font-size: 16px; color: #3eaf4a; font-family: "Century Gothic Bold"; width: 190px; height: 20px; background-image:url(../_images/green-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input31:invalid { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #fae2eb; }
.input31:invalid + .span31:after { background-color: #c0cfd9; border-color:#e8202d; border-style:solid; border-width: 1px; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: "Wrong format"; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 180px; height: 28px; background-image:url(../_images/red-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input31:placeholder-shown { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #FFFFFF; }
.input31:placeholder-shown + .span31:after { content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 0; height: 0; background-image: none; background-color: none; border-width: 0; opacity: 0; }

.input311:valid + .span311:after { border-width: 0; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 30px; height: 28px; background-image:url(../_images/green-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input311:invalid { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #fae2eb; }
.input311:invalid + .span311:after { background-color: #c0cfd9; border-color:#e8202d; border-style:solid; border-width: 1px; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: "You used an invalid character"; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 190px; height: 52px; background-image:url(../_images/red-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; position: absolute; display: block; }
.input311:placeholder-shown { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #FFFFFF; }
.input311:placeholder-shown + .span311:after { content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 0; height: 0; background-image: none; background-color: none; border-width: 0; opacity: 0; }

.input3110:valid + .span3110:after { border-width: 0; position: absolute; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 30px; height: 28px; background-image:url(../_images/green-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input3110:invalid { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #fae2eb; }
.input3110:invalid + .span3110:after { background-color: #c0cfd9; border-color:#e8202d; border-style:solid; border-width: 1px; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: "You used an invalid character"; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 190px; height: 52px; background-image:url(../_images/red-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; position: absolute; display: block; }
.input3110:placeholder-shown { border-color:#FFFFFF; border-style:solid; border-width: 2px; background-color: #FFFFFF; }
.input3110:placeholder-shown + .span3110:after { content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 0; height: 0; background-image: none; background-color: none; border-width: 0; opacity: 0; }
.input5:valid + .span5:after { border-width: 0; position: relative; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 30px; height: 20px; background-image:url(../_images/green-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input5:invalid { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #fae2eb; }
.input5:invalid + .span5:after { background-color: #c0cfd9; border-color:#e8202d; border-style:solid; border-width: 1px; padding-top: 0; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: "You used an invalid character"; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 250px; height: 25px; background-image:url(../_images/red-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 0; position: relative; display: block; top: 0; }
.input5:placeholder-shown { border-color:#FFFFFF; border-style:solid; border-width: 2px; background-color: #FFFFFF; }
.input5:placeholder-shown + .span5:after { content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 0; height: 0; background-image: none; background-color: none; border-width: 0; opacity: 0; }

.input5b:valid + .span5b:after { border-width: 0; position: relative; padding-top: 2px; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 30px; height: 20px; background-image:url(../_images/green-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 5px; display: block; }
.input5b:invalid { border-color:#e8202d; border-style:solid; border-width: 2px; background-color: #fae2eb; }
.input5b:invalid + .span5b:after { background-color: #c0cfd9; border-color:#e8202d; border-style:solid; border-width: 1px; padding-top: 0; padding-bottom: 2px; padding-left: 25px; padding-right: 2px; text-align: left; content: "You used an invalid character"; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 320px; height: 25px; background-image:url(../_images/red-padding.png); background-position:top left; background-repeat:no-repeat; background-size: 20px, 20px; margin: 0; position: relative; display: block; top: 0; }
.input5b:placeholder-shown { border-color:#FFFFFF; border-style:solid; border-width: 2px; background-color: #FFFFFF; }
.input5b:placeholder-shown + .span5b:after { content: " "; font-size: 16px; color: #e8202d; font-family: "Century Gothic Bold"; width: 0; height: 0; background-image: none; background-color: none; border-width: 0; opacity: 0; }

#stats00 { flex-direction: column; margin: 5px; width: auto; height: auto; padding: 0; }
#stats1 { flex-direction: column; width: 489px; height: auto; }
#stats11 { background-color: #466a84; width: 468px; height: 290px; border-color:#262844; border-style:solid; border-width: 1px; padding: 10px; text-align: left; margin-bottom: 6px; }
#stats12 { flex-direction: column; background-color: #64637b; width: 468px; height: auto; padding: 10px; margin-left: 0; border-color:#262844; border-style:solid; border-width: 1px; }
#stats121 { text-align: left; }
#stats2 { flex-direction: column; width: 489px; height: auto; margin-top: 5px; margin-left: 0; }
#stats21 { background-color: #64637b; width: 468px; height: auto; margin-left: 0; border-color:#262844; border-style:solid; border-width: 1px; padding: 10px; text-align: left; margin-bottom: 6px; line-height: 1.4; }
#stats22 { background-color: #64637b; width: 468px; height: auto; padding: 10px; margin-left: 0; border-color:#262844; border-style:solid; border-width: 1px; text-align: left; line-height: 1.4; }


#frame { break-inside: avoid; }
#frame1 { width: auto; height: auto; padding: 10px; margin-left: 5px; margin-right: 5px; border-color:#262844; border-style:solid; border-width: 1px; break-inside: avoid; }
#frame2 { width: auto; height: auto; background-color: #64637b; padding: 10px; margin: -5px; border-color:#262844; border-style:solid; border-width: 1px; }

#pages { width: 480px; min-height: 100px; padding: 10px; text-align: left; }


#red { display: flex; align-items: center; justify-content: center; width: 250px; height:30px; margin-left: 85px; margin-bottom: 10px; background-color: #ad331f; border-color:#262844; border-style:solid; border-width: 1px; }
#black { display: flex; align-items: center; justify-content: center; width: 250px; height:30px; margin-left: 85px; margin-bottom: 10px; background-color: #000000; border-color:#262844; border-style:solid; border-width: 1px; }
#blue { display: flex; align-items: center; justify-content: center; width: 250px; height:30px; margin-left: 85px; margin-bottom: 10px; background-color: #1c5c7b; border-color:#262844; border-style:solid; border-width: 1px; }
#cream { display: flex; align-items: center; justify-content: center; width: 250px; height:30px; margin-left: 85px; margin-bottom: 10px; background-color: #c0cfd9; border-color:#262844; border-style:solid; border-width: 1px; }
#fawn { display: flex; align-items: center; justify-content: center; width: 250px; height:30px; margin-left: 85px; margin-bottom: 10px; background-color: #606372; border-color:#262844; border-style:solid; border-width: 1px; }
#smooth { display: flex; align-items: center; justify-content: center; width: 250px; height:30px; margin-left: 85px; border-color:#262844; border-style:solid; border-width: 1px;  }