/* Copyright ©2020 Altaser.com - All Rights Reserved */
@charset "UTF-8";
*{
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
box-sizing:border-box;
}
html{
height:100%;
}
body{
display:flex;
flex-flow:column nowrap;
width:100%;
height:100%;
background-image:url("../images/b001.jpg");
background-position:top center;
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
color:#111111;
font:normal normal normal 100%/normal Roboto,Arial,"Nimbus Sans L","Liberation Sans",FreeSans,Sans-serif;
}
img{
max-width:100%;
width:auto;
height:auto;
animation:fadein 2s;
}
@keyframes fadein{
from{opacity:0;}
to{opacity:1;}
}
ul,ol{
font-size:110%;
list-style:none;
line-height:40px;
}
a{
color:#102030;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
a[href^="tel"]{
color:inherit;
}
hr{
width:95%;
display:block;
margin:20px auto 20px auto;
border-style:inset;
border-top:1px solid #cccccc;
}
hr.brk{
display:block;
border:0 none transparent;
width:40px;
height:25px;
background:url("../images/scissors-b.svg") center center no-repeat;
margin:2% auto 2% auto;
}
hr.brk.wht{
background:url("../images/scissors-w.svg") center center no-repeat;
}
h1{
font-size:290%;
text-align:center;
}
h1:after{
content:"····";
display:block;
}
h2{
font-size:125%;
margin:0 0 .5rem 0;
}
h3{
font-size:100%;
}
h4{
font-size:100%;
margin:0 0 1rem 0;
text-align:center;
}
h5{
font-size:100%;
color:#009900;
}
p{
font-size:110%;
margin:.5rem 0 .5rem 0;
line-height:130%;
}
pre{
background-color:#eeeeee;
font-family:Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
word-wrap:break-word;
white-space:pre-wrap;
}
header{
display:flex;
flex-flow:row nowrap;
gap:0 .2rem;
justify-content:space-between;
width:100%;
height:40px;
padding:0 .2rem 0 .2rem;
z-index:15;
position:fixed;
top:0;
background:linear-gradient(to bottom,rgb(255,255,255) 1%,rgba(255,255,255,.7) 100%);
box-shadow:0 2px 5px 0 rgba(0,0,0,.3);
line-height:40px;
}
body > header #menu{
display:none;
}
#headlinks{
flex:0 1 165px;
}
#logo{
flex:0 1 165px;
}
#headlinks img{
vertical-align:top;
}
#menu{
margin:0 1rem 0 0;
cursor:pointer;
}
#book{
display:inline-block;
position:relative;
margin:0 1rem 0 0;
width:100px;
height:40px;
background-color:rgb(255,100,0);
background:linear-gradient(to bottom,rgb(255,155,0) 0%,rgb(255,100,0) 50%);
font-weight:bold;
color:#ffffff;
line-height:20px;
text-align:center;
text-transform:uppercase;
}
#book:after{
content:"";
position:absolute;
left:0;
top:40px;
width:0;
border-top:10px solid rgb(255,100,0);
border-left:50px solid transparent;
border-right:50px solid transparent;
}
#book:hover{
background-color:#ff0000;
color:#ffffff;
text-decoration:none;
}
nav{
flex:1 1 33%;
font-family:Sarabun;
font-size:120%;
text-align:center;
}
nav ul{
display:flex;
gap:0 1rem;
justify-content:center;
min-width:60%;
max-width:75%;
margin:0 auto 0 auto;
}
nav ul li{
width:100%;
line-height:40px;
text-align:center;
transition:all .25s ease;
}
nav ul li a{
color:#222222;
}
nav ul li a:hover{
text-shadow:0 0 8px rgba(32,0,128,.3);
transition:all .5s;
color:#1c1c60;
font-size:105%;
text-decoration:none;
}
footer{
background:rgb(0,0,50);
background-color:rgba(0,0,50,.8);
background:linear-gradient(to bottom,rgb(0,0,50) 0%,rgb(0,0,20) 100%);
padding:1%;
color:#ffffff;
text-shadow:1px 1px 1px rgba(0,0,0,.6);
}
footer a{
color:#ffffff;
}
footer a:hover{
color:#ffcc00;
text-decoration:none;
}
footer .rev{
text-align:right;
}
footer #badges img{
display:inline-block;
max-height:50px;
}
footer div{
display:inline-block;
width:100%;
max-width:50%;
font-size:90%;
}
footer div:last-child{
text-align:right;
}
main{
flex:1 1 auto;
margin-top:40px;
}
div#index article{
background-color:transparent;
}
section:first-of-type{
margin:0;
}
section{
background-color:transparent;
}
section#welcome{
background-color:#ffffff;
border-top:1px solid #f1f1f1;
}
section#pics{
background-color:#e9deef;
background:linear-gradient(360deg,#fff9f9 1%,#ffefef 100%);
border-top:1px solid #ffefef;
}
section#products{
background-color:#ffffff;
border-top:1px solid #f1f1f1;
}
section#products img{
margin:15px 0 10px 0;
}
section#pics li{
max-width:23%;
margin:1%;
width:100%;
display:inline-block;
position:relative;
}
section#sections{
background-color:#e9deef;
background:linear-gradient(360deg,#fff9f9 1%,#ffefef 100%);
border-top:1px solid #ffefef;
}
section#sections li{
max-width:31.3%;
margin:1%;
width:100%;
font-size:175%;
display:inline-block;
position:relative;
}
section#sections img{
transition:filter 500ms ease;
filter:saturate(20%);
}
section#sections img:hover{
filter:saturate(100%);
}
section#sections span{
position:absolute;
text-align:center;
width:100%;
bottom:10%;
left:0;
color:#ffffff;
text-shadow:0 0 5px rgba(0,0,0,.5);
}
section#stylists .showcase{
display:inline-block;
box-shadow:2px 2px 2px 0 rgba(0,0,0,.2);
border:1px solid #cfcfcf;
border-radius:3px;
background-color:#f9f9f9;
vertical-align:top;
max-width:47%;
margin:1%;
}
section#stylists .showcase div{
border:1px solid #cfcfcf;
background-color:#fcfcfc;
padding:.5rem;
}
section#services{
background-color:transparent;
}
section#services article{
background-color:#ffffff;
}
section#services h2{
color:#ba5757;
margin:2% 0 0 0;
}
section#services .na{
color:#bbbbbb;
}
section#services .type{
display:none;
}
article{
background-color:#ffffff;
max-width:960px;
margin:0 auto 0 auto;
padding:1.5rem;
}
#hero{
margin-top:100vh;
}
#hero div{
text-shadow:0 0 5px rgba(0,0,0,.5);
text-align:center;
z-index:-1;
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
#hero div #txt{
position:relative;
display:flex;
height:25vh;
padding-top:.1rem;
align-items:center;
justify-content:center;
border-top:5px solid #ffffff;
white-space:nowrap;
font-family:Cambay;
font-size:600%;
font-weight:bold;
line-height:100%;
color:#ffffff;
}
#hero div #tag{
position:absolute;
display:flex;
align-items:center;
justify-content:center;
white-space:nowrap;
bottom:0;
width:100%;
font-size:30%;
line-height:100%;
}
#hero div #tag:before,#hero div #tag:after{
color:#ffffff;
content:"";
border-top:5px solid #ffffff;
margin:0 0 8px 0;
width:100%;
}
#hero div #tag:before{
margin-right:.25rem;
}
#hero div #tag:after{
margin-left:.25rem;
}
img.article{
float:right;
border-radius:3px;
max-width:48%;
width:100%;
margin:0 1% 1% 1%;
}
#hero ul{
position:fixed;
z-index:-2;
top:0;
left:0;
width:100%;
height:100%;
}
#hero ul li{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-size:cover;
background-position:top center;
background-repeat:no-repeat;
opacity:0;
animation:imageAnimation 44s linear infinite 0s;
}
#hero ul li.preload{
animation:none;
}
#hero ul li:nth-child(1){
background-image:url("../images/b011.jpg");
animation-delay:2s;
}
#hero ul li:nth-child(2){
background-image:url("../images/b021.jpg");
animation-delay:8s;
}
#hero ul li:nth-child(3){
background-image:url("../images/b031.jpg");
animation-delay:14s;
}
#hero ul li:nth-child(4){
background-image:url("../images/b041.jpg");
animation-delay:20s;
}
#hero ul li:nth-child(5){
background-image:url("../images/b051.jpg");
animation-delay:26s;
}
#hero ul li:nth-child(6){
background-image:url("../images/b061.jpg");
animation-delay:32s;
}
#hero ul li:nth-child(7){
background-image:url("../images/b071.jpg");
animation-delay:38s;
}
@keyframes imageAnimation{
0%{
opacity:0;
animation-timing-function:ease-in;
}
8%{
opacity:1;
transform:scale(1.02);
animation-timing-function:ease-out;
}
16%{
opacity:1;
transform:scale(1.04);
}
24%{
opacity:0;
transform:scale(1.04);
}
100%{opacity:0}
}
.semi{
display:inline-block;
max-width:49%;
width:100%;
vertical-align:top;
}
.semi:nth-child(even){
margin:0 .5% 2% 0;
}
.semi:nth-child(odd){
margin:0 0 2% .5%;
}
ul#hours{
line-height:130%;
}
.day{
display:inline-block;
width:45%;
max-width:30%;
}
.today{
font-weight:bold;
color:#b80b20;
}
#map{
width:100%;
height:320px
}
#map img{
height:100%;
object-fit:none;
}
table{
table-layout:fixed;
max-width:100%;
width:100%;
}
tr{
background-color:#f0f0f0;
}
td,th{
padding:4px;
vertical-align:middle;
text-align:center;
}
.refreshments{
display:inline-block;
vertical-align:top;
max-width:30%;
width:100%;
margin:1%;
}
#qr{
max-width:100px;
max-height:100px;/*IE*/
margin:5% auto 2% auto;
}
/**/
[data-copy]{
cursor:pointer;
}
[data-copy]:after{
content:"";
display:inline-block;
margin-left:5px;
width:24px;
height:24px;
background-image:url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='24px' height='24px' viewBox='0 0 24 24' enable-background='new 0 0 24 24' xml:space='preserve'%3E%3Cimage id='image0' width='24' height='24' x='0' y='0' href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAABGdBTUEAALGPC/xhBQAAACBjSFJN%0AAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAJFBMVEUAAI4AAI4AAI4AAI4A%0AAI4AAI4AAI4AAI4AAI4AAI4AAI7///+Cos1DAAAACnRSTlMABpHukIjtPDuJjU20egAAAAFiS0dE%0ACx/XxMAAAAAHdElNRQflCxgGLjE2dBtUAAAATUlEQVQY02NgIBowKq8CAiMBMIdlFRgEgDlsy0Fk%0AVQKSYq4FSDrAHJgOMAemA8wBE0CSHE5XAhJn1QQkDtihMA6SM7sSkD0wAdNrRAEAJWotVkWqPwMA%0AAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMTEtMjRUMDM6NDY6NDkrMDM6MDCqVu6gAAAAJXRFWHRk%0AYXRlOm1vZGlmeQAyMDIxLTExLTI0VDAzOjQ2OjQ5KzAzOjAw2wtWHAAAABl0RVh0U29mdHdhcmUA%0AQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAASUVORK5CYII=' /%3E%3C/svg%3E%0A");
background-repeat:no-repeat;
vertical-align:top;
cursor:pointer;
}
.copied:after{
background-image:url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='24px' height='24px' viewBox='0 0 24 24' enable-background='new 0 0 24 24' xml:space='preserve'%3E%3Cimage id='image0' width='24' height='24' x='0' y='0' href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAABGdBTUEAALGPC/xhBQAAACBjSFJN%0AAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAolBMVEUiuwAiuwAiuwAiuwAi%0AuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAi%0AuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAi%0AuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwAiuwD////Z5E2mAAAANHRSTlMAQoF9/Y0Bj3iQ%0AaWRxN/mYDNvdpRpeJSz7bCe+o7z8WQiARf6CxTLVY58KzAbvIXNarpkeaRqxDQAAAAFiS0dENd62%0A2WsAAAAHdElNRQflCxgGOhBUs9xfAAAAmklEQVQoz7WRxxLCMAxElWAIhF5CCZDQIfSy//9tSLng%0AicUxOsgzbzXrtUxUanm+ziumquFaANQ1oQEgVHiTOVoub3dE6Dq81xeOgSMEOR+OrCzRmPtkytjM%0ArMl4jgUfS+ZJ+sOrNV+ZxLRhvo2s+Z3JnWmP4tsOR/E+ccsKac6ZKMDl6gT1xe12V3bxYOGpbxuv%0AP//z/lA59QVaghJU/ci6+QAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMS0xMS0yNFQwMzo1ODoxNisw%0AMzowMMu5f14AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjEtMTEtMjRUMDM6NTg6MTYrMDM6MDC65Mfi%0AAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAABJRU5ErkJggg==' /%3E%3C/svg%3E%0A");
}
.notcopied:after{
background-image:url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='24px' height='24px' viewBox='0 0 24 24' enable-background='new 0 0 24 24' xml:space='preserve'%3E%3Cimage id='image0' width='24' height='24' x='0' y='0' href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAABGdBTUEAALGPC/xhBQAAACBjSFJN%0AAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAflBMVEWqAACqAACqAACqAACq%0AAACqAACqAACqAACqAACqAACqAACqAACqAACqAACqAACqAACqAACqAACqAACqAACqAACqAACqAACq%0AAACqAACqAACqAACqAACqAACqAACqAACqAACqAACqAACqAACqAACqAACqAACqAACqAACqAAD////E%0AFQ7VAAAAKHRSTlMAiUiSFvTXBNb2GotubZD17BMSjJEX+ygYjbe2j7q4OjwpvT3tPr9JwyhhyQAA%0AAAFiS0dEKcq3hSQAAAAHdElNRQflCxgHFxECXNwRAAAArklEQVQoz62S2xKCMAxEIyKIooBCURRB%0AFMz/f6HdWqAZX9mHzuZy2kyAaFGtWMv7eQ9+bQv+RgdBCBtutY12I7JHWwx3gDtOd/mJDtOM6JQK%0AgOiMxpwolwBRAUSVpQJwcQe7orW64byLiYuIrSRgb7cvCdVj4SHzDU9q/oGqwlm7+RYZ9TTjcusU%0AOrs6M0I351+I33olGVbCvQTMEmOB9DyvPXCRAcHH+VDDsj/CF78eHC6MLV/ZAAAAJXRFWHRkYXRl%0AOmNyZWF0ZQAyMDIxLTExLTI0VDA0OjIzOjE3KzAzOjAwwWacxgAAACV0RVh0ZGF0ZTptb2RpZnkA%0AMjAyMS0xMS0yNFQwNDoyMzoxNyswMzowMLA7JHoAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdl%0AUmVhZHlxyWU8AAAAAElFTkSuQmCC' /%3E%3C/svg%3E");
}
/**/
form{
font-family:Arial,Geneva,"MS Sans Serif","Deja Vu Sans","Bitstream Vera Sans",sans-serif;
color:#444444;
}
form i{
width:100%;
display:block;
color:#999999;
}
.column{
display:inline-block;
vertical-align:top;
width:48%;
padding:0 1% 2% 1%;
}
form fieldset{
background-color:rgb(245,245,245);
border:1px solid #cccccc;
border-radius:3px;
padding:2%;
}
form legend{
background-color:#dddddd;
width:100%;
padding:2% 0 2% 0;
border-bottom:1px solid #cccccc;
margin-bottom:2%;
}
form label{
display:inline-block;
padding:1% 1% 1% 0;
max-width:45%;
width:100%;
text-align:right;
}
form input{
box-shadow:0 0 4px 0 rgba(0,0,0,.3);
border:1px solid #aaaaaa;
border-radius:3px;
padding:1%;
max-width:50%;
width:100%;
}
form input[type="date"]{
/*Safari nonsense*/
min-width:95%;
min-height:1rem;
appearance:textfield;
}
form input[type="submit"]{
display:block;
width:50%;
margin:1% auto 0 auto;
background:linear-gradient(to bottom,rgb(255,255,255) 1%,rgba(0,0,0,.1) 100%);
border-radius:15px;
box-shadow:2px 2px 2px 0 rgba(0,0,0,.2);
text-align:center;
cursor:pointer;
}
form input[type="submit"]:hover{
box-shadow:5px 5px 5px 0 rgba(0,0,0,.2);
}
form select{
padding:5px 8px 5px 8px;
box-shadow:0 0 4px 0 rgba(0,0,0,.3);
border-radius:3px;
display:inline-block;
}
form textarea{
width:100%;
height:150px;
padding:1%;
box-shadow:0 0 4px 0 rgba(0,0,0,.3);
border:1px solid #cccccc;
border-radius:3px;
}
form .limit{
display:block;
margin:-13px 2px 0 0;
padding:0;
color:#000000;
text-align:right;
font-size:10px;
}
form .limit.exceed{
color:#cc3333;
}
@media only screen and (max-width:768px){
body > header #menu{
display:initial;
}
h1{
font-size:220%;
}
.semi:nth-child(even){
margin:1% 0 1% 0;
}
.semi:nth-child(odd){
margin:1% 0 1% 0;
}
.semi{
max-width:100%;
}
#headlinks{
flex:none;
}
nav{
flex:none;
}
nav ul{
display:none;
max-width:100%;
}
nav ul svg,nav ul#navigation svg{
display:inline-block;
}
nav ul.show{
display:flex;
align-items:center;
flex-direction:column;
min-width:320px;
width:100%;
position:absolute;
top:40px;
right:0;
background:linear-gradient(to bottom,rgb(255,255,255) 1%,rgba(255,255,255,.8) 100%);
box-shadow:2px 2px 5px 0 rgba(0,0,0,.5);
}
nav ul li{
display:block;
max-width:unset;
clear:both;
border-top:1px solid rgba(0,0,0,.2);
box-shadow:inset 0 1px 2px 1px rgba(0,0,0,.1);
}
form .column label{
max-width:35%;
}
form .column input{
max-width:55%;
}
#google-reviews .review-item{
flex-basis:100%;
}
}
@media only screen and (max-width:568px){
h1{
font-size:175%;
}
#hero div #txt{
font-size:525%;
}
section#services .head{
display:none;
}
section#services .type{
display:inline;
}
section#services tr{
background-color:unset;
margin-top:2%;
display:block;
}
section#services td{
width:100%;
padding:0;
display:block;
text-align:left;
}
.refreshments{
max-width:100%;
}
.column{
width:100%;
text-align:left;
}
form label{
max-width:100%;
text-align:left;
}
form input{
max-width:97.5%;
}
#menu{
margin:0;
}
#book{
margin:0;
}
h1{
font-size:130%;
}
#hero div #txt{
font-size:380%;
}
img.article{
float:none;
max-width:98%;
}
section#pics li{
max-width:100%;
margin:1% 0 1% 0;
}
section#sections li{
max-width:100%;
margin:1% 0 1% 0;
}
section#stylists .showcase{
max-width:100%;
}
}
@media only screen and (max-height:720px){
body{
background-image:url("../images/b002.jpg");
}
#hero ul li:nth-child(1){
background-image:url("../images/b002.jpg");
}
#hero ul li:nth-child(2){
background-image:url("../images/b012.jpg");
}
#hero ul li:nth-child(3){
background-image:url("../images/b022.jpg");
}
#hero ul li:nth-child(4){
background-image:url("../images/b032.jpg");
}
#hero ul li:nth-child(5){
background-image:url("../images/b042.jpg");
}
#hero ul li:nth-child(6){
background-image:url("../images/b052.jpg");
}
#hero ul li:nth-child(7){
background-image:url("../images/b062.jpg");
}
#hero ul li:nth-child(8){
background-image:url("../images/b072.jpg");
}
}
@media only screen and (max-height:568px){
body{
background-image:url("../images/b003.jpg");
}
#hero ul li:nth-child(1){
background-image:url("../images/b003.jpg");
}
#hero ul li:nth-child(2){
background-image:url("../images/b013.jpg");
}
#hero ul li:nth-child(3){
background-image:url("../images/b023.jpg");
}
#hero ul li:nth-child(4){
background-image:url("../images/b033.jpg");
}
#hero ul li:nth-child(5){
background-image:url("../images/b043.jpg");
}
#hero ul li:nth-child(6){
background-image:url("../images/b053.jpg");
}
#hero ul li:nth-child(7){
background-image:url("../images/b063.jpg");
}
#hero ul li:nth-child(8){
background-image:url("../images/b073.jpg");
}
#hero div #txt{
height:35vh;
}
}
/**/
section#reviews{
border-top:1px solid #f1f1f1;
background-color:#ffffff;
}
#google-reviews{
display:flex;
flex-direction:row;
flex-wrap:wrap;
gap:1rem 0;
justify-content:space-between;
background-color:#ffffff;
}
#google-reviews .header{
width:100%;
margin:0 0 .5rem 0;
}
.review-item{
flex-basis:24%;
border:1px solid #eeeeee;
box-shadow:2px 2px 2px 0 rgb(0 0 0 / 5%);
}
.review-item.visible{
opacity:1;
}
.review-meta-container{
display:flex;
align-items:center;
flex-direction:row;
flex-wrap:nowrap;
gap:0 5%;
padding:.1rem .3rem .1rem .3rem;
background-color:#fff9f0;
}
.review-meta{
display:flex;
flex-direction:column;
}
.review-photo{
flex:0 0 50px;
}
.review-photo img{
display:block;
height:auto;
}
.review-stars ul{
display:inline-block;
line-height:1rem;
padding:0;
}
.review-stars ul li{
display:inline;
background:unset;
padding:0;
margin:0 .1rem 0 0;
}
.review-stars ul li span.star{
color:#febe10;
font-size:130%;
}
.review-stars ul li span.star.inactive{
color:#c6c6c6;
}
.review-stars ul li span.star:after{
content:"\2605";
}
.review-date{
font-size:70%;
font-weight:bold;
line-height:150%;
}
.review-text{
margin:.5rem;
}
/**/
.dlg{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:999;
background-color:rgba(0,0,0,.9);
}
.dlg>div{
padding:1rem;
min-width:300px;
max-height:75%;
position:absolute;
top:50%;
left:50%;
overflow:auto;
background-color:#ffffff;
border-radius:5px;
transform:translate(-50%,-50%);
}
.dlg.hide{
display:none !important;
}
form.dlg .semi{
flex:1 0 50%;
}
form.dlg fieldset{
flex-direction:column;
}
form.dlg legend{
width:100%;
margin-bottom:3%;
font-weight:bold;
font-size:110%;
}
form.dlg label{
flex:1 1 100%;
display:block;
width:100%;
max-width:100%;
color:#0046b4;
}
form.dlg input:not([type="checkbox"]){
background-color:#f9f9f9;
padding:7px;
border:1px solid #e0e0e0;
border-radius:3px;
width:100%;
}
form.dlg select{
border-radius:3px;
border:1px solid #aaaaaa;
padding:7px;
max-width:100%;
width:100%;
}
form.dlg input[type="submit"]{
cursor:pointer;
margin:.5rem auto .5rem auto;
background-color:#0046b4;
color:#ffffff;
}
form.dlg input[type="submit"]:hover{
background-color:#d7e4f8;
color:#0046b4;
border:1px solid #0046b4;
}
form.dlg input[type="submit"].red{
background-color:#ee1111;
}
.dlg h2{
margin:0 0 1rem 0;
background-color:#f0f0f0;
padding:.5rem;
}
.dlg strong{
width:100%;
font-size:120%;
}
.dlg b{
width:100%;
font-size:120%;
}
.dlg div div{
display:flex;
flex-direction:row;
flex-wrap:wrap;
gap:0 .5rem;
justify-content:end;
margin-top:1rem;
}
.dlg button{
width:auto;
min-height:40px;
margin:0;
padding:0 1rem 0 1rem;
font-size:120%;
line-height:1rem;
border-radius:5px;
transition:all 500ms ease;
cursor:pointer;
}
.dlg button:hover{
background-color:#0046b4;
color:#ffffff;
text-decoration:none;
}
.dlg button.cls:hover{
background-color:#ee1111;
color:#ffffff;
}
.dlg ul{
margin:1rem 0 1rem 0;
border:1px solid #cccccc;
}
.dlg li{
margin:0;
padding:.3rem;
text-align:center;
}
.dlg li:before{
content:attr(data-label);
display:block;
font-size:80%;
font-weight:bold;
color:#888888;
text-align:left;
}