html{ font-size: 24px; color: #222222;}
*{background-color: #ffffff; max-width: 100%; box-sizing: border-box; padding: 0; margin: 0}

header{
 display: grid; grid-template-columns: 1fr 11fr;  position: fixed; top: 0; left: 0; width: 100%; height: 15mm; padding: .2dvw 2dvw ; background-color: #fff; z-index: 2
}
header *{background: none; }
header #logo a{display: block; position: relative; height: 2.8dvw; width: auto; text-align: left;}
header #logo a img{height: 100%; width: auto}

main.home{padding-top: 3rem; text-align: center; background-image: url(/img/bkg4.webp); display: flex; flex-direction: column; min-height: 90dvh}
main.home :where(*) {background: none; margin: 0; color: #222}
main.home form{background-color: rgba(255, 255, 255, .85); border-radius: 1mm; box-shadow: 0px 0px 8px #444; width: 50%; margin:  auto;}
main.home form input{background-color: #fff; color: #222}
#frm_newsletter_register{ }


.msg{display: block; margin-top: 4dvw; /*! padding: 2dvw 3dvw; */ background-color: light-dark(#444, #333)}
.msg *{background-color: light-dark(#444, #333); color: light-dark(#efefef, #efefef)}

.theme-switcher { margin: 0; padding: 0; right: 5.5dvw; top: 1dvw }

:where(input, textarea, select) {padding: 1dvw !important;}
form{display: flex; flex-direction: column; grid-gap: 1.8rem .5rem; padding: 2dvw; height: auto;}
form>div{width: 100%;}
form div{display: flex; flex-direction: column;  gap: 2.5dvw; position: relative; width: 100%; height: auto}
form div> :where(input:not([type="checkbox"]), label, textarea, select){position: relative; width: 100%; padding: .5rem; font-size: 1rem;background: none;}

form div>label{position: absolute; z-index: 1}
form div>label{transition: .5s ease ; background: none; width: fit-content;  height: 4rem; left: 0}
form div>input:not([type="checkbox"]):focus + label,
form div>input:not([type="checkbox"]):not(:placeholder-shown) + label
{font-size: .9dvw; line-height: 200%; top: -1.8dvw; left: .0rem; padding: 0; height: 1.8dvw; border: none; background-color: var(--label_bkg_color); color: var(--label_txt_color); padding: 0 1rem;  width: fit-content}
form div:last-child, form div:last-child a{font-size: 1dvw}
form [type="checkbox"]{border: solid red; width: 2dvw; height: 2dvw; margin: 0;position: initial;  margin: 0;  display: inline-block }
form [type="checkbox"] + label{position: initial; padding: 0; height: auto;}

.cols_2, .cols_3, .cols_4{display: grid; grid-template-columns: repeat(2, 1fr)}
.cols_3{; grid-template-columns: repeat(3, 1fr)}
.cols_4{; grid-template-columns: repeat(4, 1fr)}

.dashboard_section{padding: 2dvw; position: relative; border: solid 1px #ccc}
.dashboard_section li{display: flex; gap: 1.5dvw}
.dashboard_section img{width: 1.5dvw; height: 1.5dvw}
.dashboard_section * {font-size: 1.2dvw}
.dashboard_section>.icons{position: absolute;top: .5dvw; right: .5dvw}
#nav_main :where(ul, li, a, p, div, img){list-style-type: none; text-decoration: none; color: light-dark(#222222, #efefef)}
#nav_main ul{display: flex; align-content: end; align-items: center; justify-content:  end;}
.theme-switcher{position: initial !important;}


/*
h1{color: red;
  &:hover{
    color: blue
  }
}
*/