@font-face 
 {
 font-family: Play;
 src: url('fonts/play-regular.ttf');
 }

@font-face 
 {
 font-family: PlayBold;
 src: url('fonts/play-bold.ttf');
 }

 
#username::-webkit-input-placeholder {color: #f5ebe6;}
#username:-ms-input-placeholder { color: #f5ebe6;}
#username::-moz-placeholder {color: #f5ebe6; opacity: 1;}
#username:-moz-placeholder { color: #f5ebe6; opacity: 1;}

#pw::-webkit-input-placeholder {color: #f5ebe6;}
#pw:-ms-input-placeholder { color: #f5ebe6;}
#pw::-moz-placeholder {color: #f5ebe6; opacity: 1;}
#pw:-moz-placeholder { color: #f5ebe6; opacity: 1;}

#loginbutton
 {
 padding:3px; 
 color:white; 
 background-color:#15d19f; 
 margin-top:0px;  
 margin-left:10px; 
 margin-right:10px; 
 margin-bottom:0px; 
 border: none; 
 border-radius: 3px
 }

#loginvalid
 {
 display: none;
 width:100%;
 font-size: 16px; 
 color:#fc5603; 
 padding-left:10px; 
 padding-top:4px; 
 }

/* Basic styling */

.spacer5
 {
 width:100%; 
 height:5px;
 }

.spacer15
 {
 width:100%; 
 height:10px;
 }

.containerframe
 {
 width:100%; 
 display: flex; 
 justify-content: center; 
 margin-top:6px;
 }

.container
 {
 border-radius:5px;
 background-color:white;
 width:96%;
 padding-top:10px; 
 padding-bottom:10px; 
 padding-left:2%;
 padding-right:2%;
 }

.mailcontainer
 {
 border-radius:5px;
 background-color:white;
 width:96%;
 padding-top:15px; 
 padding-bottom:10px; 
 padding-left:5%;
 padding-right:5%;
 margin-bottom:20px; 
 }

.textbox
 {
 border-radius:2px;
 border: 1px solid navy;
 font-size: 18px;
 margin-bottom:8px;
 margin-top:3px;
 width:100%;
 }

h1
 {
 font-family: arial, helvetica, sans-serif;;
 color:#2d2d2e;
 font-size:22px;
 }

h2
 {
 font-family: arial, helvetica, sans-serif;;
 color:#2d2d2e;
 font-size:20px;
 }



p
 {
 font-family: verdana;
 color:#2d2d2e;
 font-size:15px;
 line-height: 130%;
 }

p + p 
 { 
 margin-top: 5px; 
 }

.redlink
 {
 color:red;
 }

.redlink:hover
 {
 color:magenta;
 }




.list_elements
  {
  width:100%; 
  background-color:#1d1d1d;
  color:white;
  padding-left:3px;
  padding-top:5px;
  padding-bottom:5px;
  font-family:Play,sans-serif; font-size:16px;
  font-weight:600;
  }

.list_elements:hover
  {
   background-color:#403f3c;
  }



.footerframe
 {
 width:100%; 
 display: flex; 
 justify-content: center; 
 margin-bottom:25px;
 }



.footer
 {
 width:100%;
 display: flex;
 flex-wrap: wrap;
 justify-content: center; 
 column-gap: 30px;
 row-gap: 10px;
 background-color:#423a38;
 padding-top:30px;
 padding-bottom:30px;
 }





.footeritem
 {
 margin-top:0px;
 color:white;
 font-family:Play,sans-serif; 
 font-size:14px;
 }


.footeritem a:hover, .footeritem a:hover::after 
 {
 color:red;
 }



.logoimg
 {
 width:28px;
 heigth:32px;
 margin-right:16px;
 }

.collapsible 
 {
 width:100%; 
 padding-left:3px;  
 padding-right:20px; 
 padding-top:8px; 
 padding-bottom:8px; 
 margin-bottom:4px; 
 border-radius: 5px;
 cursor: pointer;
 text-align: left;
 outline: none;
 font-family: arial, helvetica, sans-serif;;
 font-size: 18px;
 font-weight:700;
 color:navy;
 border: none;
}

.active, .collapsible:hover 
 {
 color: #e8168d;
 }

.content 
 {
  padding-left:15px; 
  padding-bottom:11px; 
  display: none;
  overflow: hidden;
  }


h5
 {
 color:#e8168d;
 font-size:19px;;
 font-weight:700;
 font-family:PlayBold, sans-serif;
 padding-bottom:3px; 
 padding-top:10px; 
 }


* {
  scrollbar-width: thin;
  scrollbar-color: #5c5858 #424242;
  }

*::-webkit-scrollbar 
 {
 width: 12px;
 }

*::-webkit-scrollbar-track 
 {
 background: #424242;
 }

*::-webkit-scrollbar-thumb 
 {
 background-color: #5c5858;
 border-radius: 20px;
 border: 3px solid #424242;
 }

 

* 
 {
 box-sizing: border-box;
 padding: 0;
 margin: 0;
 }

body 
 {
 font-family: sans-serif;
 font-size: 18px;
 background-color:#f0f1f2;
 margin-top:0px;
 margin-left:0px;
 margin-right:0px;
 }

 nav 
 {
 background: #080808;
 padding: 0 15px;
 }

a 
 {
 color: white;
 text-decoration: none;
 }

.menu,
.submenu 
 {
  list-style-type: none;
 }

#loginboxframe2
 {
 width:100%; 
 display: flex; 
 justify-content: center; 
 margin-top:222px; 
 }

#loginbox2
 {
 background-color:#423a38; 
 padding-bottom:6px; 
 border-radius:4px;
 }

#loginbox
 {
 position: absolute; 
 left: 46px; 
 width:190px; 
 display: none; 
 margin-top:8px; 
 padding-top:3px; 
 padding-bottom:6px; 
 background-color:#423a38;
 border-radius: 3px;
 }

.loginput
 {
 height: 32px; 
 width:170px; 
 background-color:#0a0807;
 border-style: hidden; 
 font-size: 20px; 
 padding-left:3px; 
 padding-right:3px; 
 border-radius:3px;  
 padding-bottom:3px; 
 padding-top:3px; 
 margin-top:4px; 
 margin-bottom:4px; 
 margin-left:10px; 
 margin-right:10px;
 color:white;
 }

.logo 
 {
 background-color:#080808;
 font-size: 12px;
 padding: 7.5px 10px 7.5px 0;
 }

.item 
 {
 padding: 10px;
 }

.item:not(.button) a:hover,
.item a:hover::after 
 {
 color: #e8168d;
 }

#langicon
 {
 height: 30px;
 margin-left:20px; 
 margin-bottom:2px;  
 border-radius: 3px; 
 }

/* Mobile menu */
.menu 
 {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 column-gap: 70px;
 padding-bottom: 15px;
 padding-top: 8px;
 padding-left:10%;
 }

.menu li a 
 {
 display: block;
 padding-left: 17px;
 padding-top: 7px;
 }

.menu li.subitem a 
 {
 padding-left: 32px;
 padding-top: 7px;
 }

.toggle 
 {
 padding-top:11px;
 order: 1;
 font-size: 20px;
 }

.item 
 {
 order: 3;
 width: 100%;
 text-align: left;
 display: none;
 }
 
.active .item 
 {
 display: block;
 }

.item.refnumber
 {
 order: 2;
 }


.outlined
 {
  font-size:60px; 
  font-family:le mans,sans-serif; 
  -webkit-text-stroke: 0.4px;
 }

/* Submenu up from mobile screens */
.submenu 
 {
 display: none;
 }

.submenu-active .submenu 
 {
 display: block;
 }

.has-submenu i 
 {
 font-size: 12px;
 }

.has-submenu > a::after 
 {
 font-family: "Font Awesome 5 Free";
 font-size: 12px;
 line-height: 16px;
 font-weight: 900;
 content: "\f078";
 color: white;
 padding-left: 5px;
 }

.subitem a 
 {
 padding: 10px 15px;
 }

.submenu-active 
 {
 background-color: #111;
 border-radius: 3px;
 }


/* Tablet menu */
@media all and (min-width: 700px) 
 {
 body 
  {
  margin-top:0px;
  margin-left:0px;
  margin-right:0px;
  }

 .menu 
  {
  justify-content: center;
  column-gap: 90px;
  }

 .container
  {
  width:80%;
  padding-left:18px;
  padding-right:12px;
  padding-bottom:18px;
  margin-top:12px;
  }

 .mailcontainer
  {
  width:60%;
  padding-left:4%;
  padding-right:4%;
  padding-bottom:18px;
  margin-top:12px;
  }

.textbox
 {
 width:80%;
 }

#loginboxframe2
 {
 margin-top:100px; 
 }

#loginbox
 {
 position: absolute; 
 left: 46px; 
 width:190px; 
 display: none; 
 margin-top:8px; 
 padding-top:3px; 
 background-color:#423a38;
 }

 .loginput
  {
  height: 32px; 
  width:170px; 
  background-color:#2e2c2c;
  border-style: hidden; 
  font-size: 20px; 
  padding-left:3px; 
  padding-right:3px; 
  border-radius:3px;  
  padding-bottom:3px; 
  padding-top:3px; 
  margin-top:3px; 
  margin-left:10px; 
  margin-left:10px; 
  color:white;
  }



 .item.refnumber 
  {
   width: auto;
   order: 1;
   display: block;
  }

 
h1
 {
 font-family: arial, helvetica, sans-serif;;
 color:#2d2d2e;
 font-size:24px;
 }

h2
 {
 font-family: arial, helvetica, sans-serif;;
 color:#2d2d2e;
 font-size:22px;
 }




 .footer
  {
  width:80%;
  column-gap: 50px;
  border-radius:4px;
  }




 .toggle 
  {
  flex: 1;
  text-align: right;
  order: 2;
  padding-right:10%;
  }



 /* Button up from tablet screen */
 
 .menu li.button a 
  {
  padding: 10px 15px;
  margin: 5px 0;
  }

 .button a 
  {
  background: #0080ff;
  border: 1px royalblue solid;
  }

  .button.secondary {
    border: 0;
  }
  .button.secondary a {
    background: transparent;
    border: 1px #0080ff solid;
  }
  .button a:hover {
    text-decoration: none;
  }
  .button:not(.secondary) a:hover {
    background: royalblue;
    border-color: darkblue;
  }
 }


/* Desktop menu */
@media all and (min-width: 960px) 
 {
 body 
  {
  margin-top:0px;
  margin-left:0px;
  margin-right:0px;
  }

 .container
  {
  width:65%;
  }

 .mailcontainer
  {
  width:50%;
  }

.textbox
 {
 width:70%;
 }

 .menu 
  {
  justify-content: center;
  column-gap: 0px;
  flex-wrap: nowrap;
  background: none;
  padding-bottom: 15px;
  padding-top: 8px;
  padding-left: 8px;
  }

.menu li a 
 {
 display: block;
 padding-left: 5px;
 padding-right: 12px;
 padding-top: 7px;
 }



 #loginbox
  {
  left: -80px; 
  width:160px; 
  display: none; 
  margin-top:8px; 
  position: absolute; 
  background-color:#423a38;
  margin-top:8px; 
  }

 #loginbutton
  {
  margin-right:5px; 
  margin-left:5px; 
  margin-bottom:0px; 
  }

 #loginvalid
  {
  padding-left:5px; 
  }

 .loginput
  {
  height: 28px; 
  width:150px; 
  background-color:#0a0807;
  font-size: 16px; 
  padding-left:3px; 
  padding-right:3px; 
  border-radius:3px;  
  padding-bottom:3px; 
  padding-top:3px; 
  margin-top:4px; 
  margin-bottom:4px; 
  margin-left:5px; 
  margin-right:5px; 
  color:white;
  }


 .logo 
  {
  order: 0;
  padding-left:0px;
  }

 .item 
  {
  order: 1;
  position: relative;
  display: block;
  width: auto;
  padding-left:6px;
  }

.subitem a 
 {
 padding-left: 0px;
 min-width:150px;
 }

 .submenu-active .submenu 
  {
  display: block;
  position: absolute;
  left: 0;
  top: 43px;
  background: #111;
  padding-left:0px; text-align:left;
  }


.menu li.subitem a 
 {
 padding-left: 20px;
 padding-top: 7px;
 background-color:#423a38;
 }

 

 .toggle 
  {
  display: none;
  }

 .submenu-active 
  {
  border-radius: 0;
  }

 

.spacer15
 {
 width:100%; 
 height:15px;
 }

.spacer10_desktop
 {
 width:100%; 
 height:10px;
 }

.spacer20_desktop
 {
 width:100%; 
 height:20px;
 }

.spacer30_desktop
 {
 width:100%; 
 height:30px;
 }

h1
 {
 font-family: arial, helvetica, sans-serif;;
 color:#2d2d2e;
 font-size:22px;
 }

h2
 {
 font-family: arial, helvetica, sans-serif;;
 color:#2d2d2e;
 font-size:20px;
 }

 .footer
  {
  width:65%;
  column-gap: 60px;
  border-radius:4px;
  padding-top:30px;
  padding-bottom:30px;
  }



.footeritem
 {
 font-size:16px;
 }


 




}
 

.langlist_icon
 {
 height:22px;
 margin-right:16px;
 border-radius:3px; 
 vertical-align:-4px;
 }

#langbox
 {
 direction:ltr;
 text-align:left;
 position: absolute;
 margin-left:71px;
 margin-top:11px;
 margin-left:11px; 
 display:none;
 }

#langboxi
 {
 width:70%;
 float:left;
 }


.langlist_item 
 {
 width:90%; 
 float:right; 
 padding-top:11px; 
 padding-bottom:11px; 
 padding-left:11px; 
 padding-right:2px;  
 background-color:#2e2c2c;
 font-size:18px; 
 color:white;
 }

@media all and (min-width: 960px) 
 {
 .langlist_item
  {
  width:55%; 
  }
 }


@media screen and (orientation:landscape) {.codecontainer{ width:70%;}}
@media all and (min-width: 960px) {.codecontainer{ width:50%;}}