* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  }
body {
	color:black;
	font-family: Verdana, sans-serif;
	margin: 0 auto;
	font-size:14px;
	box-sizing: border-box;
	margin-bottom: 50px;
}
.scr-only { display: none; }
#intro, #application_data {
	max-width: 912px;
	margin: auto;
}
.s3 {display: table-cell;padding-left:10px;}
.s4 {display: table-cell;}
.s5 { color: blue; font-family:Verdana, sans-serif; font-style: normal; font-weight: normal;
	text-decoration: none; display:table-cell;vertical-align: middle;padding-left: 8px; }
.s6 {display:table-cell;vertical-align: top;font-style: normal; font-weight: bold; text-decoration: none;padding: 3px 0 0 8px;}
h1,h2,h3 { 
	color: black; 
	font-family:Verdana, sans-serif; 
	font-style: normal; 
	font-weight: bold; 
	text-decoration: none; 
}
.small-screen-only { display: none; }
.americorps_blue { color: #112542; }

div.americorps_logo {
	background: url("../images/americorps_logo.svg") no-repeat;
	background-position: center;
	background-color: #112542;
	padding: 25px 0;
	text-align: center;
	display: block;
	height: 100px;
	margin-top: 0;
	background-size: 40%;
}
div { margin-top: 10px ; line-height: 24px;}

.session_desc div { margin-top: 0 ; line-height: normal;}

div .desc {margin-top: 0px;
	    margin-left: 30px;
	    line-height: normal;
	}
.l1 {line-height: 18px; margin-bottom: 15px;}
.l2 {
	line-height: 18px; 
	margin-top: 0; 
	margin-bottom: 20px; 
}
.required { color:  red; font-size: 1.1em; }
 /* make the email checkbox larger */

#application_data, #application{ display: none; margin: auto; }

input[type='checkbox'] {
    width:20px;
    height:20px;
    background:white;
    border-radius:5px;
    border:2px solid #555;
}
input[type='checkbox']:checked {
    background: grey;
}
input[type='date'] {
	padding: 8px;
    width: 150px;
    border: 1px solid;
}
input[type=text] {
	font-size: 16px;
	border:1px solid black;
	padding: 6px;
	width: 300px;
	max-width: 100%;
	margin-bottom: 10px;
	box-sizing: border-box;
}
.bold {font-weight: bold;}
.left {width:120px; display:inline-block;}
.right {padding-left: 8px;}
.left1 {width:150px;display:inline-block;}
.w160 { width: 160px; display: inline-block;}
.to { padding-left: 15px; }
input[type=text].long_text {
	width: 450px;
	max-width: 100%;
}

input[type=text].name_text {width: 32%}
input[type=text].short_text {width:50px;}
/*produces that glowing light around text boxes*/
input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  border: 1px solid rgba(81, 203, 238, 1);
}
.checkbox p input:focus {
    border:none;
}
 hr {border-color:blue;}
textarea {width:95%;height:50px;font-size: 14px; border:1px solid black;}
.pagesize {height:300px;}

.newline {padding-left: 110px;}
.small_italic {padding-left: 5px;text-decoration: italic;font-size: 10px;}
input[type='radio'] {width:20px; height:20px;vertical-align: bottom; margin: 3px 0px 0px 5px;}
h1 {font-size: 18px;}
h2, button.accordion-button {
	font-size: 16px;
	width:100%;
	text-align: center;
	background-color: #112542;;
	color:white;
	font-weight: normal;
	padding:3px 0;
}
h3 {font-size: 14px; line-height: 17px; margin-top:40px; }
.buttondiv {
	/*width:100%; */
	margin:0 auto; 
	/*max-width: 912px; */
	text-align: center;
}
button {
	width:300px;
	margin:auto;
	text-align:	center;
	font-size: 18px; 
	padding:8px 0;
	font-weight: normal;
	background-color: #1550ED;
	color:white;
	border-radius:8px;
	margin:20px auto;
}
button:hover { background:#0233b9}
.align_with {display:inline-block; width:140px;}

button.all_positions {
    font-size: 12px;
    width: auto;
    margin: 5px 0;
    padding: 10px;
    display: none;
}

.partner_section.expanded button.all_positions { display: block; }

/* expandable sections */
h2 .expand_status {
    float: right;
    margin-right: 5px;
    background: transparent;
    color: #112542;
}    
button.expand_status {
    margin: 0;
    padding: 3px;
    width: auto;
    border-radius: 2px;
    background: transparent;
    border: none;
    text-align: left;
    position: relative;
    color: #112542;
}

.section .section_body { display: none; }
.section .section_body h3:first-child { margin-top: 5px; }
.section.expanded {
    /* min-height: 300px; */
    margin-top: 15px;
    padding-bottom: 15px;
}
.section.expanded div.section_body { display: block; }
.section h2 { 
    margin: 0; 
    border: 2px solid #112542;
    background: white;
    color: #112542; 
    border-radius: 3px; 
}
.section.expanded h2 {background: #112542; color: white; }
.section.expanded button.expand_status {
    color: white;
}
.section h2 button.expand_status {
    border: none;
}
.partner_section.section h2 {
    text-align: left;
    padding-left: 30px;
    width: auto;
}
.partner_section.section h2 span {
    color: #112542;
    margin-right: 30px;
    float: right;
}
.partner_section.section.expanded h2 span {
    color: white;
}


#part1, #application { 
    display: none;
    max-width: 912px;
    margin: auto;
}
#weeklydata .section {
    width: 100%;
    margin-left: 0;
}


/* Custom Alert Box.  Could also be used for a confirm box
 *
 *  Used with jquery $.confirm function
*/

#confirmOverlay{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	background: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) repeat-x rgba(11,11,11,0.2);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) repeat-x rgba(11,11,11,0.2);
	z-index:100000;
}

#confirmBox{
	background:#e5e5e5;
	max-width:460px;
	width:95%;
	position:fixed;
	left:25%;
	top:25%;
	border: 1px solid rgba(33, 33, 33, 0.6);

	-moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
	-webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
	box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
}
@media screen and (max-width:600px) {
	#confirmBox{
	left:10px;
	top:20px; }
}
#confirmBox h1,
#confirmBox p{
	font:26px/1 'Cuprum','Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	background: #f5f5f5;
	padding: 18px 25px;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
	color:#666;
}

#confirmBox h1{
	letter-spacing:0.3px;
	color:white;
	background: #5889a2;
}

#confirmBox p{
	background:none;
	font-size:16px;
	line-height:1.4;
	padding-top: 35px;
}

#confirmButtons{
	padding:15px 0 25px;
	text-align:center;
}

#confirmBox .button {
	display:inline-block;
	background: blue;
	color:white;
	position:relative;
	height: 33px;

	font:17px/33px 'Cuprum','Lucida Sans Unicode', 'Lucida Grande', sans-serif;

	margin-right: 15px;
	padding: 0 35px 0 40px;
	text-decoration:none;
	border:none;
}

#confirmBox .button:last-child{	margin-right:0;}

#confirmBox .button span{
	position:absolute;
	top:0;
	right:-5px;
	width:5px;
	height:33px
}

#confirmBox .blue{				background-position:left top;text-shadow:1px 1px 0 #5889a2;}
#confirmBox .blue span{			background-position:-195px 0;}
#confirmBox .blue:hover{		background-position:left bottom;}
#confirmBox .blue:hover span{	background-position:-195px bottom;}

#confirmBox .gray{				background-position:-200px top;text-shadow:1px 1px 0 #707070;}
#confirmBox .gray span{			background-position:-395px 0;}
#confirmBox .gray:hover{		background-position:-200px bottom;}
#confirmBox .gray:hover span{	background-position:-395px bottom;}


/*body {background-color:#f3f1ef;}*/
h1 {
	font-size: 30px; 
	text-align: center;
	line-height: 36px;
}


select {
	width:180px; 
	padding: 8px; 
	font-size: 16px;
	margin: 5px 0;
    border: 1px solid;
    border-radius: 5px;
}
option {font-size: 16px; margin: 8px 0;}
#placement_city_state {
	min-width: fit-content;
}
.placement {
    font-size: 1.2em;
    color: blue;
    border: 1px solid blue;
    padding: 20px 0 20px 50px;
}
div.session_desc {
    /* margin: -5px 0 0 35px; */
    line-height: normal;
    font-size: .9em;
}
/* #placements {padding:0 0 18px 8px;} */
#placements .s4.position {padding-top:8px;}
.col6 {margin-left:10px;}
#education_level, #education_level option {
	font-size: 16px;
	line-height: 18px;
	width: fit-content;
	margin: 10px;
}

/* Google Maps */
#map {
    height: 90vh;
    width: 50%;           
    box-sizing: border-box;
}
#map.full {
    width: 100%;
}
#map.map-min, #map.full.map-min {
    width: 10%;
}
.marker-icon {
    color: white;
    background: black;
    width: 25px;
    height: 10px;
    position: relative;
}
button#close_map, button#side_close {
    width: auto;
    padding: 5px 20px;
}
.map { display: none; }
.map img {
    vertical-align: middle;
}
.show_map {
    display: inline-block;
    vertical-align: top;
    width: 49%;
    box-sizing: border-box;
}
.placement {
    padding: 10px;
    margin: 10px 0 0 0;
}
.placement select { width: auto; min-width: 80px; }
#placements.with-map {
    overflow-y: auto;
    max-height: 75vh;
}
.map-icon {
    width: 35px;
}
.smaller_font label {
    font-size: smaller;
}
#session_hours { display: inline; }
.smaller_font input[type=date] {
    padding: 5px;
}
.smaller_font select { padding: 5px; }
.smaller_font button {
    width: auto;
    text-align: center;
    font-size: 13.3px;
    padding: 3px 5px;
    font-weight: normal;
    background-color: #1550ED;
    color: white;
    border-radius: 5px;
    margin: 0;
}

@media only screen and (min-width: 1200px) {
  div.americorps_logo {
  	background-size: 30%;
  }
}
@media only screen and (min-width: 2100px) {
  div.americorps_logo {
  	background-size: 20%;
  }
}
@media only screen and (max-width: 912px) {
	#intro, #application_data {
		padding:  0 20px;
	}
}

@media only screen and (min-width: 800px) {
    .session_desc { padding-left: 35px;}
}

@media only screen and (max-width: 550px) {
  .col6 {display:block; } /* margin: 10px 0;} */
  div.session_desc { 
  	font-size: 1em;
  	margin: 0;
  }
  .to { 
  	padding-left: 19px;
    margin-top: 10px;
    display:  block;
   }
   .partner_section.section h2 span.selected {
        margin-right: 0;
        font-size: smaller;
   }
   .partner_section.section h2 { padding-left: 10px }
  select { margin-top: 10px; }
   /*#intro div{ padding: 0 15px; }*/
  /*section div { margin: 0 10px; }*/
  .placement {
  	padding: 20px 0 30px 20px ;
  }
  .legal_name input {
  	margin-left: 10px;
  }
  div.americorps_logo {
  	background-size: 90%;
  	padding: 0;
  }
  input[type=text].med_text { width: 300px; }

  .extra { display: block; }
  .small-screen-only { display: block; }
  input[type=text].name_text {
	width: 300px;
  }
  #chosen_sessions legend { font-size:smaller; }
  .map {
    text-align: center;
    /*display: block;*/
    }
    #map { 
        width: 100%;
        display: block;
        box-sizing: border-box; 
    }
    .show_map {
        display: block;
        width: 100%;
        box-sizing: border-box; 
    }
    #application_data {
        width: 100%;
        max-width: auto;
        box-sizing: border-box; 
    }
    .smaller_font input[type=date], .smaller_font select {
        margin-top: 5px;
    }

}

/* From Atrium */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    color: black;
    background: white;
}

button.accordion-button {
    font-size: 16px;
    width: 100%;
    text-align: center;
    background-color: #0233b9;
    color: white;
    font-weight: normal;
    border-radius: 3px;
}

.accordion-button .expand_status {    
	position: relative;
    float: right;
    right: 20px;
    /* show up when open and down when closed */
}

#service {text-align: left; padding-left: 15px;     border-radius: 0;} 

.px130 { width: 130px; }

#sortable_sessions { list-style-type: none; margin: 0; }
#sortable_sessions li { margin: 0 3px 3px 3px; padding: 0.4em; }
#sortable_sessions li span { float: right;}

#sortable_sessions {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#sortable_sessions li {
    counter-increment: step-counter;
    margin-bottom: 10px;
}

#sortable_sessions li::before {
    content: counter(step-counter);
    margin-right: 5px;
    font-size: 80%;
    background-color: #0233b9;
    color: white;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 3px;
}
#chosen_sessions legend { font-weight: bold;}
.trashcan { font-weight: bold; font-size: larger; }
.no-top-margin { margin-top: 0; }
#program_focus option.bold {
    font-size: 18px;
    color: blue;
    background: #8080807d;
}