/* General */

body {margin:0; padding:0; border:0; width:100%; background:#9cb9da; font-size:100%; font-family: vegurregular,arial,helvetica,sans-serif;}
h1, h2, h3, h4 {padding:0; clear:both;}
p {margin:0; padding:0;}
img {margin:0; border:0;}
.clearfloats, #content .clearfloats {clear: both; margin:0;}
table { border-collapse: collapse }
.centred { text-align: center }
	
/*================BASE TEMPLATE @ 1200+===================*/	


div.testmode 
{ 
  background: red; 
  color: white; 
  text-align: 
  center; 
  padding: 3px;
  font-weight: bold;
}

/* Menu */

nav
{
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background:#fbf2b9; 
}


nav a
{
  display: flex;
  align-items: center;
  justify-content: center;
  font-family:arial,helvetica,sans-serif;
  color:#fbf2b9; 
  font-size: clamp(110%, 1.5vw, 130%);
  padding: 5px; 
  text-decoration: none; 
  text-align:center;
  flex-basis: 50px;
  flex-grow: 1;
  height: clamp(30px, 6vw, 60px);
  margin: 3px 0 0 3px;
}

/*@media (max-width: 900px)
{
  nav a { padding: 1vw }
}*/

nav a:first-child { margin-left: 0}

nav.public a.nav1 { background: #ec001d; }
nav.public a.nav2 { background: #33d; }
nav.public a.nav3 { background: #8dc63f; }
nav.public a.nav4 { background: #9026d0; }
nav.public a.nav5 { background: #fb8800; }
nav.public a.nav6 { background: #009000; }
nav.public a.nav7 { background: #72cedc; color: #333; }
nav.public a.nav8 { background: #e56292; }
nav.public a.nav9 { background: #e8e800; color: #666; }

nav.public a:hover { background: #9bd}

nav.volunteers a.nav1 { background: #c00010; }
nav.volunteers a.nav2 { background: #229; }
nav.volunteers a.nav3 { background: #6da620; }
nav.volunteers a.nav4 { background: #500080; }
nav.volunteers a.nav5 { background: #d06000; }
nav.volunteers a.nav6 { background: #004000; }
nav.volunteers a.nav7 { background: #60b0d0; color: black; }
nav.volunteers a.nav8 { background: #c04070; }
nav.volunteers a.nav9 { background: #c8c800; color: black; }
nav.volunteers a:hover { background: #8ac}

nav.admin a.nav1 { background: #600; }
nav.admin a.nav2 { background: #006; }
nav.admin a.nav3 { background: #260; }
nav.admin a.nav4 { background: #206; }
nav.admin a.nav5 { background: #930; }
nav.admin a.nav6 { background: #030; }
nav.admin a.nav7 { background: #38a; }
nav.admin a.nav8 { background: #b24; }
nav.admin a.nav9 { background: #aa0;}
nav.admin a:hover { background: #79b}




/* MOBILE ICON OPTIONS */
div.mobileIcons {display:none;}

/* Footer */

footer 
{
  padding: 20px 0 10px;
  background: /*#9cb9da*/ #bedbfc; /* #bdf; */ /* #5185bf; */
  text-align:center;
}
footer div.cols
{
  display:flex; 
  gap: 5px; 
  justify-content: space-between;
  align-items: center;
}
footer .col1, footer .col3
{
  flex-basis: 50px;
  flex-grow: 0.5;
  height: max-content;
  padding: 0 5px;
}
footer .col1 img, footer .col3 img
{
  width: 80%;
}
footer .col2
{
  flex-basis: 50px;
  flex-grow: 2;
}


footer p a, footer p a:link, footer p a:visited {color:#000; text-decoration:underline;}
footer p a:hover, footer p a:active { color:#fbf2b9; text-decoration:none;}
footer .text-link {font-size: clamp(110%, 2.0vw, 120%); }
footer .text-title {font-size: clamp(120%, 3vw, 150%); font-weight:bold; }
footer .text-address {font-size:110%; margin-top:10px;}
footer .text-phone {font-size:120%; margin-top:10px;}
footer .text-email {font-size:110%;}
footer .text-copyright
{
  font-size:90%; 
  margin-top:5px;
  padding-top: 10px; 
  font-weight:bold;
  border-top: 1px solid #99f;
}
footer .hostinglink { font-size: 90%; margin: 5px 0 10px }


@media (max-width: 600px)
{
  footer .col1 img, footer .col3 img { width: 100px }
  footer div.cols { display: block }
  footer .col1 { padding-top: 0; }
  footer .col3 { padding-top: 10px }
}


/* Content */

#main, header, footer, nav, div.mobileIcons, nav.small
{
  width: 90%;
  max-width: 1200px;
  min-width: 900px;
  margin: 0 auto;
}
@media (max-width: 900px )
{
  #main, header, footer, nav, div.mobileIcons, nav.small
  {
    width: 100%;
    min-width: 100%;
  }
}

div.mobileIcons img { width: 30px }

#main
{
  background-color:#fbf2b9;
}
#content{clear:both; padding:40px 5%; overflow:hidden;}
#content h1 {text-align:center; margin:0 0 20px 0; font-size:240%;}
#content h2 {text-align:left; margin:20px 0; font-size:180%;}
#content h3 {text-align:left; margin:15px 0;font-size:140%;}
#content h4 {text-align:left; margin:10px 0;font-size:120%;}
#content a, #content a:link, #content a:visited{font-weight:normal; color:#000; text-decoration:underline;}
#content a:hover, #content a:active {color:#5185bf; text-decoration:none; font-weight:normal;}
#content p {font-size:110%; text-align:left; margin:15px 0;}
#content p.center {text-align:center;}
#content ul {text-align:left; padding: 0 50px;}
#content li {font-size:110%; padding: 2px 5px;}
#content h2.mapContent {font-size:150%;}
#content p.mapContent {font-size:120%;}
#content p.mapContent a, #content p.mapContent a:link, #content p.mapContent a:visited{font-weight:bold;color:#000; text-decoration:underline;}
#content p.mapContent a:hover, #content p.mapContent a:active {color:#5185bf; text-decoration:none;font-weight:normal;}
#map {height: 400px; width: 100%;}
#map iframe
{
  width: 100%;
  height: 400px;
  border: none;
}

/* single column text, limited width */
div.text 
{ 
  margin: 0 auto;
  max-width: 700px;
}


/********* 2 columns text *******/

/*
 * two columns on wide page, reverting to single column on narrower page 
 * All done with CSS flex 
 */
div.twocolumns  /* container */
{
  display: flex;
  flex-direction: row;
  gap: 80px;
  justify-content: space-between;
}

div.twocolumns div.col1, div.twocolumns div.col2  /* actual columns */
{
  flex-basis: 300px;
  flex-grow: 1;
}
@media (max-width: 825px)
{
  div.twocolumns
  {
    display: block;
  }

  ul { padding-left: 25px }
}




/* CALENDAR  - PAGE BODY */
#pageBodyCalendar {
			width:100%;
			color:grey;
		}

#pageBodyCalendarForm {
			text-align:center;
			margin-left:auto;
			margin-right:auto;
			margin-top:10px;
			margin-bottom:10px;
			font-size:100%;
		}
		
#pageBodyCalendarForm form {
font-size:90%;
}		

form.dutyForm, form.dutyForm h3 {
text-align:center;
}
form.dutyForm h3 {
margin:0 0 .8em 0;
}

form.dutyForm fieldset, form.dutyForm fieldset div{
margin: 0 auto 15px;
text-align: center;
width: 80%;
}

form.dutyForm fieldset div{
text-align: left;
}

#pageBodyCalendar .previousMonthLink {
float:left;
margin-top:10px;
margin-bottom:10px;
width:100px;
text-align:left;
}

#pageBodyCalendar .nextMonthLink {
float:right;
margin-top:10px;
margin-bottom:10px;
width:100px;
text-align:right;
}
	
#pageBodyCalendar .previousMonthLink a, #pageBodyCalendar .previousMonthLink a:link, #pageBodyCalendar .previousMonthLink a:visited,
#pageBodyCalendar .nextMonthLink a, #pageBodyCalendar .nextMonthLink a:link, #pageBodyCalendar .nextMonthLink a:visited
{
text-decoration:underline;
color:#50496B;
}
	
#pageBodyCalendar .previousMonthLink a:hover, #pageBodyCalendar .previousMonthLink a:active,
#pageBodyCalendar .nextMonthLink a:hover, #pageBodyCalendar .nextMonthLink a:active
{
text-decoration: none;
color:#CAD2D5;
}	
	
		#pageBodyCalendar ul {
			width:92%;
			margin:0 auto;
			padding:0;
			display: block;
			overflow: hidden;
			border-bottom: 1px solid #50496B;
		}
		

		
		#pageBodyCalendar ul li {
			margin:0;
		/*	min-height:150px;*/
			width:/*68px*/14.13%;
			border-top:1px solid #50496B;
			padding:0;
			border-left:1px solid #50496B;
			list-style:none;
			position: relative;
			display:block;
			float:left;
		}
		
		.dutyBlank {color:#fff; font-variant: small-caps;background-color:red;font-weight:bold;}

		
		
/*		#pageBodyCalendar ul :nth-last-child(-n+7) :nth-last-child(1) {
			border-bottom:1px solid #50496B;
}*/
		
		#pageBodyCalendar ul li.previousMonth, #pageBodyCalendar ul li.currentMonth, #pageBodyCalendar ul li.nextMonth{
		   float: left;
		   margin-bottom: -99999px;
		   padding-bottom: 99999px;
			}  
		#pageBodyCalendar ul.calendar > li:nth-child(7n+1) {
			clear: both;
		}
		
		#pageBodyCalendar .count7, #pageBodyCalendar .count14, #pageBodyCalendar .count21, #pageBodyCalendar .count28, #pageBodyCalendar .count35, #pageBodyCalendar .count42 {
			border-right:1px solid #50496B;
		}
		
		#pageBodyCalendar ul li.title {
			background:#FCF5EB;
			border-top:1px solid #50496B;
			color:#50496B;
			font-weight:bold;
			height:20px;
			min-height:20px;
			font-size:100%;
			text-align:center;
		}


		#pageBodyCalendar ul li.currentMonth span, #pageBodyCalendar ul li.previousMonth span, #pageBodyCalendar ul li.nextMonth span {
			display:block;
			}

		#pageBodyCalendar ul li.currentMonth span.dayNumberCurrent, #pageBodyCalendar ul li.previousMonth span.dayNumberPrevious, #pageBodyCalendar ul li.nextMonth span.dayNumberNext {
			text-align:center;
			}
		
		
#pageBodyCalendar span.dayNumberPrevious, #pageBodyCalendar span.dayNumberNext {
			text-decoration:none;
			display:block;
			font-style:italic;
			font-weight:normal;
			font-size:120%;
			padding:5px;
		}
		
		
#pageBodyCalendar span.dayNumberCurrent{
	font-weight:bold;
	font-size:120%;
	padding:5px;
	color:#000;
}

#pageBodyCalendar ul li.closed span.closed {
text-align:center;
padding-bottom:10px;
}

#pageBodyCalendar ul li.todayDate span.dayNumberCurrent {
color:red;
font-size:200%;
}

#pageBodyCalendar ul li.todayDate span.dayNumberCurrent a {
color:red;
}

#pageBodyCalendar span.dayNumberCurrent a, #pageBodyCalendar span.dayNumberCurrent a:link, #pageBodyCalendar span.dayNumberCurrent a:visited {
text-decoration:underline;
	color:#000;
	border:none;
}

		
#pageBodyCalendar span.dayNumberCurrent a:hover, #pageBodyCalendar span.dayNumberCurrent a:active {
	text-decoration:none;
}		
		
#pageBodyCalendar span.dutyIcon{
margin:3px 0;
padding:1px;
font-size:80%;
}

#pageBodyCalendar a {
text-decoration:none;
}

#pageBodyCalendar a span.dutyIcon, #pageBodyCalendar a:link span.dutyIcon, #pageBodyCalendar a:visited span.dutyIcon {
color:#fff;
text-decoration:none;
}

#pageBodyCalendar a:hover span.dutyIcon, #pageBodyCalendar a:active span.dutyIcon {
color:#fff;
text-decoration:underline;
}

#pageBodyCalendar span.dutyIcon.dutyEmpty {
background:red;
overflow:hidden;
}

#pageBodyCalendar span.dutyIcon.dutyFull {
	overflow:hidden;
background:green;
}

#pageBodyCalendar span.dutyIcon img.dutyMessageIcon{float:right;}
/* general forms */


.unBold {
font-weight:normal;
}

.italic {
font-style:italic;
}

.phpErrorText-Intro {
color:#cc0000;
font-weight:bold;
text-align:center;
}

.phpErrorText-Form {
color:red;
}


.requiredField {
color:#50496B;
font-size:120%;
font-weight:bold;
}

#formDiv fieldset {
margin:15px;
}

#formDiv .formLabel {
    float: left;
    margin-right: 2%;
    margin-top: 0;
    text-align: right;
    width: 40%;
}

#formDiv .formGroupButtons {
    margin-left: 42%; 
}

#formDiv .inputSpan {
margin-right:10px;font-style:normal;font-size:100%;
}

#formDiv input.error{  
    background: #f8dbdb;  
    border-color: #e77776;  
}  

#formDiv textarea.error{  
    background: #f8dbdb;  
    border-color: #e77776;  
}  

#formDiv div{  
    margin: 15px 0;  
 
} 

#formDiv div p{  
    font-size: 80%;  
    font-style: italic;
	margin:5px 0 0 42%;
} 



#formDiv div p.hintText, p.hintText {
color:#50496B;
font-style: normal;
font-weight:bold;
display:none;
}


#formDiv div p.error{  
    color: #cc0000;  
font-weight:bold;
    font-style: normal;
margin-bottom:5px;
}  

#formDiv div p.phpErrorText-Form {
color: #cc0000; 
font-weight:bold;
    font-style: normal;
margin-bottom:5px;
}

#error{  
    margin-bottom: 20px;  
    border: 1px solid #efefef;  
}  
#error ul{  
    list-style: square;  
    padding: 5px;  
    font-size: 11px;  
}  
#error ul li{  
    list-style-position: inside;  
    line-height: 1.6em;  
}  
#error ul li strong{  
    color: #e46c6d;  
}  
#error.valid ul li strong{  
    color: #93d72e;  
}  


.formDetails {
margin-top:5px;
}


.formDetailsTitle {
font-weight:bold;
float:left;
width:125px;
text-align:right;
}

.formDetailsSubmitted {
float:right;
text-align:left;
width:360px;
}


/*********/	
/* Volunteer contact details */

#content h3.volName {margin:15px 0 5px 0;}
#content .volPhone, #content .volEmail {width:45%; float:left; margin:5px 0 5px 5%;}
#content .volDays, #content .volDuty {width:45%; float:left; margin:5px 0 5px 5%;}
#content .volAddress {width:95%; float:left; margin:5px 0 5px 5%;}
#content p.volunteerDetailsEnd {width:40%; margin:25px auto 0; border:1px #5185bf solid;}

/*********/	
/* Mobile calendar */
#pageBodyMobileCalendarHolder {display:none;}
#pageBodyMobileCalendarForm {text-align:center; margin-left:auto; margin-right:auto; margin-top:10px; margin-bottom:10px; font-size:100%;}
		
#pageBodyMobileCalendarForm form {font-size:90%;}

#content #pageBodyMobileCalendar h2 {text-align:center;}
#content #pageBodyMobileCalendar h3 {text-align:center; margin: 0;}

.mobileCalendarDutyDetails {padding:0; margin-bottom:10px;}
.mobileCalendarDutyDetails a {width:100%; display:block;}

#content .mobileCalendarDutyDetails .dutyEmpty {background:#ff6666; margin:0; overflow:auto; display:block; border:0.3em solid #FF0000;}
#content .mobileCalendarDutyDetails .dutyFull {background:#8dc63f; margin:0; overflow:auto; display:block; border:0.3em solid #008000;}

#content .mobileCalendarDutyInfo {width:96%; padding:2% 0 0;}
#content .mobileCalendarDutyInfo p{text-align:center; margin:10px 0;}
#content .mobileCalendarDutySopranoVolunteer, .mobileCalendarDutyGeneralVolunteer {width:100%;font-size:120%;}
.mobileCalendarDutyMessage {padding: 2%; position: absolute;}
.noVolunteer{color:#fff;}

#content .mobileCalendarDutyDetails a:hover,
#content .mobileCalendarDutyDetails a:active
{
color:#fff;
}


/*=========RESPONSIVE SECTION========================================================================================*/
/*********************************************************************************/


nav.small { display: none }
nav.large { display: flex }
@media screen and (max-width: 825px)
{
  nav.small { display: flex; }
  nav.small a { margin-left: 0 }
  nav.large {display: none }
  div.navmenus
  {
    display: grid;
    gap: 3px;
    grid-template-columns: 1fr;
    background: #fbf2b9;
  }
  div.navmenus.volunteer
  { grid-template-columns: 1fr 1fr; }
  div.navmenus.admin
  { grid-template-columns: 1fr 1fr 1fr; }
}


/*=========SMALL DESKTOP, LANDSCAPE TABLETS @ 1024 - 1199==========*/
@media all and (min-width: 1024px) and (max-width: 1199px) {

nav a.single_line { line-height: 50px }


}


/*=========SMALL DESKTOP, LANDSCAPE TABLETS @ 825 - 1023==========*/
@media all and (min-width: 825px) and (max-width: 1023px) {
#content{padding:40px 5%;} 
#content ul{padding:0 25px;}
#pageBodyCalendar ul li {width:14%;}
#pageBodyCalendar ul {padding: 0;}
	
}


/*=========SMALL TABLETS, PORTRAIT @ 600 - 825==========*/
@media all and (min-width: 600px) and (max-width: 825px) {
/* .publicMenu, */.extranetMenu, .adminMenu {display:none;}
/* #main{width:100%;} */
#content{padding:40px 8%;} 
#content h2 {text-align:center;}
#content ul{padding:0 25px;}
#pageBodyCalendarHolder {display:none;}
#pageBodyMobileCalendarHolder {display:block;}

}

/*=========PHONES, LANDSCAPE MODE @ 480 - 599==========*/
@media all and (min-width: 480px) and (max-width: 599px) {

.publicMenu, .extranetMenu, .adminMenu {display:none;}

/* #main{width:100%;} */
#content{padding:40px 8%;} 
#content h2 {text-align:center;}
#content ul{padding:0 25px;}
#pageBodyCalendarHolder {display:none;}
#pageBodyMobileCalendarHolder {display:block;}
#formDiv {margin: 0 auto; text-align:center;}
#formDiv .formLabel {float:none; margin-right:0; margin-top:0; margin-bottom: 5px; text-align:center; width:100%; display:block; font-weight:bold;}
#formDiv div p {margin:5px 0 0 0; text-align:center; }
#formDiv .formGroupButtons {margin-left: 0;}
}


/*=========PHONES, PROTRAIT MODE @ 300 - 479==========*/
@media all and (min-width: 300px) and (max-width: 479px) {

.publicMenu, .extranetMenu, .adminMenu {display:none;}
#content h1{font-size:160%;}
#content h2 {text-align:center;font-size:130%;}
#content h3 {font-size:110%;}
#content ul{padding:0 25px;}
#pageBodyCalendarHolder {display:none;}
#pageBodyMobileCalendarHolder {display:block;}
#formDiv {margin: 0 auto; text-align:center;}
#formDiv .formLabel {float:none; margin-right:0; margin-top:0; margin-bottom: 5px; text-align:center; width:100%; display:block; font-weight:bold;}
#formDiv div p {margin:5px 0 0 0; text-align:center; }
#formDiv .formGroupButtons {margin-left: 0;}

}


/*=========PHONES, PROTRAIT MODE @ 0 - 299==========*/
@media all and (min-width: 0px) and (max-width: 299px) {
body {display:none; }
}

@media (max-width: 500px)
{
  #content { padding: 15px 2px }
  #content ul
  { padding: 0 10px; }
}


/* test/debug */
table.reqvars tr td
{
  vertical-align: top;
  font-size: 90%;
  font-family: monospace;
  background: white;
  color: black;
  border: solid 1px #ccc;

}

/**** error and message boxes */

div.errorbox, div.msgbox
{
  width: max-content;
  max-width: 90%;
  margin: 10px auto;
  padding: 5px;
}

div.errorbox
{
  border: 2px solid red;
  color: #a00;
}

div.msgbox
{
  border: 2px solid green;
  color: green;
}



/****** forms and data ******/

/* formclass forms */
form.datarec_form 
{ 
  max-width: 800px;
  min-width: 250px;
  margin: 10px auto;
  padding: 0; 
}
div.form_input_pair 
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin: 5px auto; 
  padding: 3px;
}
div.form_input_pair div.label 
{ 
  text-align: right;
  margin-right: 10px;
  line-height: 1.0;
}
div.form_input_pair div.input input,
div.form_input_pair div.input textarea { width: 100% }
div.form_input_pair div.input input[type=radio] { width: max-content }
div.form_input_pair div.input input[type=checkbox] { width: max-content }

form.datarec_form input.submit
{
  display: block;
  width: max-content;
  margin: 0 auto;
}

form.datarec_form div.form_input_pair.topborder 
{ border-top: 1px solid #cc9; margin-top: 10px }
form.datarec_form div.form_input_pair.bottomborder 
{ border-bottom: 1px solid #cc9; margin-bottom: 10px }

form.datarec_form label.voldutiesbox,
form.datarec_form label.voldaysbox
{
  display: block;
}

form.datarec_form div.info
{
  color: green;
  opacity: 80%;
  font-style: italic;
  text-align: left;
}

form.datarec_form div.error
{
  color: #c00;
  font-style: italic;
  font-weight: bold;
  font-size: 110%;
  margin-bottom: 2px;
  padding: 2px;
}

@media (max-width: 500px)
{
  div.form_input_pair { margin: 0 }

  div.form_input_pair div.label 
  { display: block; text-align: left; width: 90% }
  div.form_input_pair div.input { display: block; width : 90% }

}

form.centrebutton 
{
  width: max-content; 
  margin: 10px auto; 
}

form.delbutton input[type=submit]
{
  background: linear-gradient(white, #f66);
}

form.greenbutton input[type=submit],
form.updatebutton input[type=submit],
form.datarec_form input[type=submit]
{
  background: linear-gradient(white, #0f0);
}

form.spacedbutton
{
  margin: 10px 0;
}

a.toggleLink
{
  font-style: italic;
  font-size: 80%;
  opacity: 60%;
}

#content form.datarec_form p.toggle.hintText
{
  font-style: italic;
  font-size: 80%;
  opacity: 60%;

}

/* volunteer edit page */
#content h2.centred { text-align: center }

p.headerDesktopNYCC
{
  background: white;
  width: 80%;
  color: #09c;
  padding: 10px;
}

/* nycc logo */
img.nycclogo
{
  display: block;
  margin: auto;
  width: 90%;
}

@media (max-width: 825px)
{
  p.headerDesktopNYCC
  {
    width: 200px;
    margin: auto;
  }
  
  div.mobileIcons
  {
    padding-top: 10px;
  }


}

/******* new CSS for header *******/

header
{
  display: grid;
  grid-template-columns: 2fr 3fr 2fr;
  gap: 10px;
  background-color:#5185bf; 
  margin:0 auto;
  font-family: vegurmedium;
}

header div
{
  flex-basis: 50px;
  flex-grow: 1;
  padding: 10px;  /* 20px */
}

header div.headerleft img
{
  display: block;
  width: 80%;
  margin: auto;
}

header div.headermiddle
{
  font-size: clamp(120%, 3.5vw, 300%);
  text-align: center;
  flex-grow: 2.5;
}

header div.headerright div.nycc
{
  padding: 0;
  background: white;
  text-align: center;
  font-size: clamp(80%, 2vw, 150%);
  color: #09c;
  max-width: 300px;
}

header div.headermiddle div.welcome
{ 
  font-size: 80%;
  padding: 0; /* 10px */
}

@media (max-width: 500px)
{
  header div.headermiddle span.witheastby { display: none }
}

@media (max-width: 500px)
{
  header div { margin: auto; padding: 0 }
  header div.headerleft img,
  header div.headerright div.nycc { width: 100px; margin-top: 10px }
  header div.headermiddle div.welcome { display: none }

}

@media (max-width: 825px)
{
  /* switch to small screen menu */
  div.mobileIcons 
  {
    display:block;
    width:100%; 
    background-color:#5185bf; 
    text-align:center; 
    padding:0 0 5px;
  }
  nav 
  { 
    width: 100%; 
    flex-direction: column; 
    align-items: stretch;
    height: auto; 
  } 
  nav a 
  { 
    height: auto; 
    flex-basis: 0; 
    font-size: 100%;
    padding: 5px;
  }


}