/* .FORM STYLING */
/* ORDER :: background, color, typography, font, line-heights, widths, padding, margin, positioning, display, alignment  

*/
.form                    { padding:0px; margin:0px auto; display: grid;   grid-template-columns: repeat(2, [col] 49% ); grid-template-rows: repeat(3, [row] auto ); justify-content: space-between; }
input[type="file"]      { opacity: 0; display:none;  }
input, select, textarea { border: 1px solid #a9a9a9; height: 24px; line-height: 24px; padding: 3px 15px; margin: 0px 8px 16px 0px; vertical-align: top; min-width: 36%; }
label                   { height: 26px; line-height: 26px; min-width: 120px; display: inline-block; border: 0px; height: 26px; padding: 3px 17px; margin: 10px 0px; vertical-align: top; min-width: 36%; display: inline-block; }
textarea                { height:128px; grid-column: col / span 2; border: 1px solid #a9a9a9; height: 96px; padding: 5px 15px; margin: 0px 0px 20px; vertical-align: top; min-width: 78%; line-height: 24px; }
input[type="submit"]    { padding: 0px 24px; line-height: 32px; height:32px;  }
input[type="submit"],input[type="reset"],button,input[type="button"] { border: 0px; height: 32px; text-indent: 0px; padding: 0px 15px; vertical-align: bottom; min-width: 25% }
input[type="radio"],input[type="checkbox"],input[type="color"]	     { min-width: 24px; margin: 13px 15px; padding: 0px; border: 0px; width: 24px;}
input[type="search"]	{ height: 32px; }
input.danger,select.danger 	  	{ border: 1px solid #e6194b; color: #e6194b; height: 24px; padding: 3px 15px; margin: 10px 0px;   }
input.success,select.success    { border: 1px solid #3cb44b; color: #3cb44b; height: 24px; padding: 3px 15px; margin: 10px 0px;   }


.form        { width:var(--wh06); }
.form input {line-height:30px; margin:0px; width:100%;}
.form input[type=datetime-local] {width: calc(var(--wh02) + var(--space6));}
.form input[type=date]           {width: var(--wh02);}
.form input[type=time]           {width: calc(var(--wh02) - var(--space4));}
.form input[type=month], .form input[type=week] {width: calc(var(--wh02) + var(--space2));}
.form input[type=tel]         {width: calc(var(--wh02) - var(--space4)); border:1px solid #888; line-height:28px; }
.form input[type=number]         {width: calc(var(--wh01) + var(--space2)); border:1px solid #888; line-height:28px; }
.form input[type=color]         {width: 30px; height:30px; border-radius:50%; padding:0px; border:0px; overflow:hidden;   }
input[type="checkbox"], input[type="radio"]             { display:inline-block; max-width:20px;}
.form main button                { line-height:30px; padding:0px 15px; margin:0px;  }
.form textarea                   {line-height:30px;  margin:0px; width:100%;}
.form label                      {line-height:30px; padding:0px; opacity: 0.8;}
.form span                       { font-size:0.8em; font-style:italic; }
.form>nav                        { display:flex; justify-content: space-between; padding:0px; line-height:30px; height:30px;}
.form .tagcheckbox>div { display:flex; gap:0px 10px; line-height:30px;}
.form .tagcheckbox input[type="checkbox"]{ opacity:0; position: relative; top:0px; left:0px; bottom:0px; right:0px; margin:0px; padding:0px; height:0px; display:none; }
.form .tagcheckbox div label {display:inline-block; padding:0px 10px; margin:0px; line-height:30px; background-color: #ccc;  cursor:pointer; }
.form .tagcheckbox.icon div label {background-color: transparent; color: #ccc;  }
.form .tagcheckbox input[type="checkbox"]:checked+label { background-color: var(--primary); color: white;  }
.form .tagcheckbox.icon input[type="checkbox"]:checked+label { background-color: transparent;  color: var(--primary); }

.form .tagradio>div { display:flex; gap:0px 10px;}
.form .tagradio input[type="radio"]{ opacity:0; position: relative; top:0px; left:0px; bottom:0px; right:0px; margin:0px; padding:0px; height:0px; display:none; }
.form .tagradio div label {display:inline-block; padding:0px 10px; margin:0px; line-height:30px; background-color: #ccc; cursor:pointer;   }
.form .tagradio input[type="radio"]:checked+label { background-color: var(--primary); color: white;  }
.form .switch { position: relative; display: inline-block; width: 36px; height: 22px; margin:0px; }
.form .switch input { opacity: 0; width: 0; height: 0;}/* Hide default HTML checkbox */
.form .toggleslider {  position: absolute;  cursor: pointer;  top: 0;  left: 0;  right: 0;  bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }/* The slider */
.form .toggleslider:before { position: absolute; content: ""; height: 14px; width: 14px;left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s;  transition: .4s;}
.form input:checked + .toggleslider { background-color: var(--primary); }
.form input:focus + .toggleslider { box-shadow: 0 0 1px var(--primary);}
.form input:checked + .toggleslider:before {-webkit-transform: translateX(14px); -ms-transform: translateX(14px); transform: translateX(14px); }
/* Rounded togglesliders */
.form .toggleslider { border-radius: 30px; }
.form .toggleslider:before { border-radius: 50%;}
.form select { width:100%; }


.form .rangeslider {-webkit-appearance: none;  width: 100%;  height: 6px;  border-radius: 5px; background: #ccc;  outline: none;  opacity: 0.7;  -webkit-transition: .2s;  transition: opacity .2s;}
.form .rangeslider:hover {  opacity: 1; /* Fully shown on mouse-over */} /* Mouse-over effects */
.form .rangeslider::-webkit-slider-thumb { -webkit-appearance: none;  appearance: none;  width: 18px;  height: 18px;  border-radius: 50%;  background: var(--primary);  cursor: pointer;}


.form section>div {padding: 0px 0px 5px;}
.form section>div:nth-of-type(1){ grid-area: IN1; }
.form section>div:nth-of-type(2){ grid-area: IN2; }
.form section>div:nth-of-type(3){ grid-area: IN3; }
.form section>div:nth-of-type(4){ grid-area: IN4; }
.form section>div:nth-of-type(5){ grid-area: IN5; }
.form section>div:nth-of-type(6){ grid-area: IN6; }
.form section>div:nth-of-type(7){ grid-area: IN7; }
.form section>div:nth-of-type(8){ grid-area: IN8; }
.form section>div:nth-of-type(9){ grid-area: IN9; }
.form section>div:nth-of-type(10){ grid-area: IN10; }
.form section>div:nth-of-type(11){ grid-area: IN11; }
.form section>div:nth-of-type(12){ grid-area: IN12; }
.form section>div:nth-of-type(13){ grid-area: IN13; }

.form section {
    grid-template-areas:"IN1 IN1 IN1 IN1 IN1 IN1"
                        "IN2 IN2 IN2 IN3 IN3 IN3"
                        "IN4 IN4 IN4 IN5 IN5 IN5"
                        "IN6 IN6 IN6 IN6 IN6 IN6"
                        "IN7 IN7 IN7 IN7 IN7 IN7"
                        "IN8 IN8 IN8 IN9 IN9 IN9"
                        "IN10 IN10 IN10 IN11 IN11 IN11"
                        "IN12 IN12 IN12 IN13 IN13 IN13";
}
button.icons { background:transparent; padding:0px 6px; margin:0px;}




ul { padding:0;  margin: 0;}
a  { text-decoration:none; }
.dropmenu>ul>li             { outline:0; z-index:2; position:relative; padding:0 10px; margin:0; text-align:left; }
.dropmenu>ul>li             { display:inline-block; }
.dropmenu>ul>li:focus       { pointer-events:none; }
.dropmenu>ul>li:focus>ul    { opacity:1; visibility:visible; }
.dropmenu>ul>li>ul          { opacity: 0;visibility: hidden; z-index: 1; pointer-events: auto; position: absolute; list-style: none; padding:0; margin:0; }
.dropmenu>ul>li>ul          { background: #999; color: #fff;}
.dropmenu>ul>li>ul          { width: auto; }
.dropmenu>ul>li>ul          { transition: visibility 1s;  }
.dropmenu>ul a              { display:block; }
.dropmenu>ul a              { padding:0 10px;  }
.dropmenu>ul>li>ul a        { color: #fff; text-decoration:none;}