@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');

/* CSS Document */
:root {
    --primary-font-family: "Open Sans", sans-serif;
    --primary-font-color: #212121;
    --primary-font-size: 16px;
    --primary-font-weight: 400;
    --white: #ffffff;
    --grey: #E6E7E8;
    --dark-grey: #A7A9AC;
    --medium-grey: #D1D3D4;
    --light-grey: #F2F2F2;
    --red: #B90E31;
    --red2: #B9002F;
    --blue: #002452;
    --light-blue: #3E536C;
    --dark-blue: #002452;
    --yellow: #FABD0F;
    --contentwidth: 1162px; /* 1088px */
    --contentwidth-pad: 0 37px;
    --transition: all 200ms ease-in-out;
}


* {margin: 0; padding:0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
html, body, #bg {
    min-height: 100%;
    
}
body {  font-family:var(--primary-font-family); font-weight:var(--primary-font-weight); color:var(--primary-font-color); }

.contentwidth { width:100%; max-width:var(--contentwidth); margin:0 auto; padding:var(--contentwidth-pad); position:relative; }
.contentwidth.admin { padding: 0 20px; margin-bottom: 20px; width: 100%; position:relative; max-width:100%; }
.contentwidth.admin table {margin-bottom: 5px;}
.contentwidth.admin table td {padding: 5px; border-bottom: 1px solid #F2F2F2; border-left: 1px solid #F2F2F2;}
.contentwidth.admin table tr:hover {background-color: #F2F2F2;}

h1 { font-size:40px; line-height:50px; }
h2 { font-size:20px; line-height:27px; }
p { font-size:16px; line-height:28px; }

header {  }
header .header-top { display:flex; justify-content: space-between; align-items: center; background-color:var(--white); }
header .header-top figure.logo { display:flex; align-items: center; padding:32px 47px; }
header .header-top figure.logo img { display:block; width:188px; height:44px; }
header .header-top figure.logo figcaption { font-size:21px; line-height:25px; letter-spacing:0.02em; font-weight:700; }
header .header-top .header-text { padding:32px 47px; }
header .header-bottom { display:flex; justify-content: space-between; align-items: center; background-color:var(--light-grey); }
header .header-bottom .header-title { padding:25px 40px; }
header .header-bottom .header-nav { padding:25px 40px; }
header .header-bottom .header-nav .ocasp-admin { position:relative; }
header .header-bottom .header-nav .ocasp-admin .ocasp-admin-select {  cursor:pointer; width: 260px; padding: 10px 18px; font-size:14px; font-weight:700; background-color:var(--white); background-image:url(../images/dots.svg); background-repeat:no-repeat; background-size:15px; background-position:right 15px center; border:solid 2px var(--white); border-radius:50px; transition:var(--transition); }
header .header-bottom .header-nav .ocasp-admin .ocasp-admin-select span {overflow: hidden; white-space: nowrap; text-overflow: clip; display: block; width: 86%;}
header .header-bottom .header-nav .ocasp-admin.active .ocasp-admin-select, header .header-bottom .header-nav .ocasp-admin .ocasp-admin-select.active, header .header-bottom .header-nav .ocasp-admin .ocasp-admin-select:hover { border:solid 2px var(--red); }
header .headerbar { display:flex; justify-content: space-between; align-items: center; padding:10px 40px; background-color: var(--dark-blue); }
header .headerbar h2 { color:var(--white); line-height:20px; }
header .headerbar a.logout { display: block; width:30px; height:30px; }

.main-content { padding:75px 0; color:var(--white); background-color:var(--light-blue); background-image:url(../img/content-header-image.jpg); background-repeat:no-repeat; background-size: 628px; background-position: top -27px right -44px; }
.main-content .content-heading { padding-bottom:37px; }
.main-content .content-heading .content { width: calc(100% - 628px); }
.main-content .content-heading h1 { max-width:415px; width:100%; }


#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto;
}

#headernav {
    height: 26px;
}

#header {
    height: 80px;
    position: relative;
    display:flex;
    align-items: center;
    padding:var(--contentwidth-pad);
}


#header h1 {
    
}

#header img {
    
}

#loggedin {
    display:none;
    position:absolute; 
    top:43px; 
    left:0;
    width:100%;
    background-color: var(--white);
    font-size:14px;
    color:#58595B;
    padding:15px;
    border-radius: 7px;
}

#loggedin #loggedinid {
    margin-bottom:10px;
}

#loggedin #loggedinbutton {

}

#loggedin #loggedinas {
    display:none;
    margin-bottom:10px;
}

#loggedin #loggedinlock {
    float: left;
    padding-top: 19px;
    padding-right: 9px;
    padding-bottom: 0px;
    padding-left: 13px;
}
#loggedin #loggedinbutton input { 
    background:transparent;
    border:none;
    cursor:pointer;
    font-size:14px;
    font-weight:700;
    color:var(--red);
    font-family: var(--primary-font-family);
}

#loggedin #loggedinbutton input:hover { text-decoration: underline; }

.content-heading {
    min-height:203px;
    padding:25px 0;
    display:flex;
    align-items: center;
    background-image: url(../images/content-header-image.png);
    background-repeat:no-repeat;
    background-size:628px;
    background-position: right -45px top -30px;
    margin-bottom:50px;
}

.content-heading h2 {
    color:var(--primary-font-color) !important;
    background-position:10px 50px;
}

.content-heading-nobg {
    padding:50px 0;
    display:flex;
    align-items: center;
}
.no-bottom-pad {
    padding-bottom:0;
}
.no-bottom-pad p strong {
    font-weight:700;
}

#wrapper #content .content-heading-nobg h2.admin {
    color:var(--primary-font-color) !important;
    font-size:30px;
    line-height: 40px;
    font-weight:700;
}

.content-blue-bg {
    background-color:var(--light-blue);
}

#wrapper #content a { color:var(--red2); font-weight:700; text-decoration: none;; }
#wrapper #content a:hover { text-decoration:underline; }

form.planformmain fieldset { display:flex; flex-wrap:wrap; justify-content: space-between; }
form.planformmain fieldset > div { flex:0 0 49%; border-left:solid 9px var(--dark-grey); border-radius:0 10px 10px 0; }

.greybox { padding:30px 40px; border-left:solid 9px var(--blue); background-color:var(--grey); border-radius:0 10px 10px 0; }
.greybox .sorted-table { border:none; }
.greybox .sorted-table * { border:none; display:block; }
.greybox .sorted-table thead { display:none; }
.greybox .sorted-table tbody { display:flex; flex-wrap:wrap; justify-content: space-between; }
.greybox .sorted-table tbody tr { position:relative; display:block; flex:0 0 48%; padding:20px 20px 60px 20px; margin-bottom: 4%; background-color:var(--white); border-radius:10px; }
.greybox.existing .sorted-table tbody tr::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:40px; background-color:var(--light-grey); border-radius:0 0 10px 10px; }
.greybox.existing .sorted-table tbody tr td:first-child { font-size:20px; line-height:24px; }
.greybox.existing .sorted-table tbody tr td:nth-last-child(2) { position:absolute; bottom:5px; left:5px; z-index: 1; }
.greybox.existing .sorted-table tbody tr td:last-child { position:absolute; bottom:5px; right:5px; z-index: 1; }
.greybox.existing .sorted-table tbody tr td:last-child form { display: flex; justify-content: flex-end; }
.greybox.existing .sorted-table tbody tr td:last-child input.btnlightgrey { display:none; }

.greytablebox { position:relative; }
.greytablebox .sorted-table { border:none; }
.greytablebox .sorted-table * { border:none; display:block; }
.greytablebox .sorted-table thead { display:none; }
.greytablebox .sorted-table tbody { display:flex; flex-wrap:wrap; justify-content: space-between; }
.greytablebox .sorted-table tbody tr { position:relative; display:block; flex:0 0 100%; padding:20px; margin-bottom: 4%; background-color:var(--grey); border-radius:10px; }
.greytablebox .showmore-menu { position:absolute; top:10px; right:10px; height: 34px; width: 34px; }
.greytablebox .showmore-menu span.showmore { background-color:var(--white); }
.greytablebox .showmore-menu ul.more { bottom:-102px; }
.greytablebox .showmore-menu input { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--red); background-color:transparent; text-transform: capitalize; }
.greytablebox .showmore-menu input:hover { text-decoration: underline; }
.greytablebox .lg { font-size:18px; line-height: 22px; }
.greytablebox .sm { font-size:14px; line-height: 19px; }
.greytablebox.withredbutton input[type=submit] { position:absolute; top:15px; right:15px; background:none; border:none; height:auto;  display: block; padding: 5px;  font-size: 14px; line-height: 19px; font-weight: 700; text-align: center; color: var(--white); text-decoration: none; background-color: var(--red); border-radius: 50px; }

.greytablebox .btnlightgrey { margin-top:10px; background-image:none; min-width:180px; width:auto; height:auto; cursor:pointer; margin-bottom:10px; padding: 10px 20px; font-family: var(--primary-font-family); font-size:16px; line-height:16px; font-weight:700; color:var(--primary-font-color); background-color:var(--white); border:solid 2px var(--medium-grey); border-radius:50px; transition:var(--transition); text-decoration:none !important; border-width: 2px !important; }
.greytablebox .btnlightgrey:hover { background-color:var(--light-grey); border-color:var(--red); }

.bluebox { padding:30px 40px; border-left:solid 9px var(--dark-grey); background-color:var(--dark-blue); border-radius:0 10px 10px 0; }
.bluebox .sorted-table { border:none; }
.bluebox .sorted-table * { border:none; display:block; }
.bluebox .sorted-table thead { display:none; }
.bluebox .sorted-table tbody { display:flex; flex-wrap:wrap; justify-content: space-between; }
.bluebox .sorted-table tbody tr { position:relative; display:block; flex:0 0 48%; padding:20px 20px 60px 20px; margin-bottom: 4%; background-color:var(--white); border-radius:10px; transition:var(--transition); }
.bluebox .sorted-table tbody tr:hover { background-color:var(--grey); }
.bluebox.existing .sorted-table tbody tr::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:40px; background-color:var(--light-grey); border-radius:0 0 10px 10px; }
.bluebox.existing .sorted-table tbody tr td:first-child { font-size:20px; line-height:24px; }
.bluebox.existing .sorted-table tbody tr td:nth-last-child(2) { position:absolute; bottom:5px; left:5px; z-index: 1; }
.bluebox.existing .sorted-table tbody tr td:last-child { position:absolute; bottom:5px; right:5px; z-index: 1; }
.bluebox.existing .sorted-table tbody tr td:last-child form { display: flex; justify-content: flex-end; }
.bluebox.existing .sorted-table tbody tr td:last-child input.btnlightgrey { display:none; }

.bluebox.existing { display:flex; flex-wrap:wrap; justify-content: space-between; }
.bluebox.existing .existing-record { position:relative; display:block; flex:0 0 48%; padding:20px 20px 60px 20px; margin-bottom: 4%; background-color:var(--white); border-radius:10px; transition:var(--transition); }
.bluebox.existing .existing-record::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:40px; background-color:var(--light-grey); border-radius:0 0 10px 10px; }
.bluebox.existing .existing-record .existing-record-title { font-size:20px; line-height:24px; }
.bluebox.existing .existing-record .existing-record-status { position:absolute; bottom:10px; left:10px; z-index: 1}
.bluebox.existing .existing-record .existing-record-status span { padding:5px; font-size:14px; line-height:14px; border-radius: 3px; }
.bluebox.existing .existing-record .existing-record-status span.pending-submission { background-color:var(--yellow); }
.bluebox.existing .existing-record .existing-record-status span.pending-review { background-color:var(--medium-grey); }
.bluebox.existing .existing-record .existing-record-status span.approved { background-color:#95D99E; }
.bluebox.existing .existing-record .existing-record-menu { position:absolute; bottom:3px; right:10px; z-index: 1; }
.bluebox.existing .existing-record span.showmore, .existing-help { cursor:pointer; display:flex; justify-content: center; align-items:center; width:34px; height:34px; border:solid 2px transparent; border-radius:50px; transition: var(--transition); }
.bluebox.existing .existing-record span.showmore:hover, .bluebox.existing .existing-record span.showmore.active { border-color:var(--red); background-color:var(--white); }
.bluebox.existing .existing-record ul.more { display:none; position:absolute; bottom: 35px; right: 0; list-style:none; padding:10px; background-color:var(--white); border-radius:10px; box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.25); }
.bluebox.existing .existing-record ul.more li {  }
.bluebox.existing .existing-record ul.more label { cursor:pointer; font-size:14px; font-weight:700; color:var(--red); }
.bluebox.existing .existing-record ul.more label:hover { color:var(--primary-font-color); }
.bluebox.existing .existing-record ul.more input { display:none; }
.existing-help {display: inline-block; background-color: var(--light-grey); cursor: default; }
.existing-help img {padding: 4px 8px;}

.showmore-menu { position:absolute; bottom:3px; right:10px; z-index: 1; }
.showmore-menu span.showmore { cursor:pointer; display:flex; justify-content: center; align-items:center; width:34px; height:34px; border:solid 2px transparent; border-radius:50px; transition: var(--transition); }
.showmore-menu span.showmore:hover, .bluebox.existing .existing-record span.showmore.active { border-color:var(--red); }
.showmore-menu ul.more { display:none; position:absolute; bottom: 35px; right: 0; list-style:none; padding:10px; background-color:var(--white); border-radius:10px; box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.25); }
.showmore-menu ul.more li {  }
.showmore-menu ul.more label { cursor:pointer; font-size:14px; font-weight:700; color:var(--red); }
.showmore-menu ul.more label:hover { color:var(--primary-font-color); }
.showmore-menu ul.more input {  }

.content-dark-blue { 
    padding:50px 0 75px 0; 
    background-color:var(--dark-blue); 
    color:var(--white);
}
.international-sos {
    font-size:14px;
    line-height:22px;
}
.international-sos p strong {
    font-size: 26px;
    line-height: 28px;
    font-weight: 700;
}
.international-sos .columns {
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.international-sos .columns div { flex:0 0 48%; }
#wrapper #content .international-sos .columns a { 
    cursor:pointer; 
    display:flex; 
    align-items: center; 
    min-height:75px; 
    margin-right:10px; 
    padding:10px 10px 10px 70px; 
    color:var(--primary-font-color); 
    font-weight:400;
    background-color:var(--white); 
    background-image: url(../images/exclamation.svg);
    background-repeat: no-repeat;
    background-position:20px center;
    font-size:14px; 
    line-height:19px; 
    text-decoration:none; 
    border-radius:10px; 
    transition:var(--transition); 
}
#wrapper #content .international-sos .columns a:hover { background-color:var(--grey); }

#wrapper #progress {
    padding:20px;
    background-color: var(--white);
}

#wrapper #progress #progresspercent {
    float: left;
    width: 42px;
    height: 10px;
    background-color: var(--white);
    font-size: 10px;
    line-height: 10px;
    text-align: center;
    font-style: italic;
}

#wrapper #progressbar{
    height: 10px;
    margin-left: 42px;
    background-color: var(--grey);
    background-image: url(../images/progress-bar.gif);
    background-repeat: no-repeat;
    background-position: -700px 0px;
}

#wrapper #formcontent #progress { padding-left:0; padding-right:0;  }

#wrapper #content {

    padding-bottom: 55px;
}

#wrapper #content h2 {
    font-size: 26px;
    font-weight: normal;
    color: #9d1939;
}
#wrapper #content .content-heading.planners { margin-bottom: 0;}
#wrapper #content .content-heading.planners .contentwidth {
    display: flex;
    align-items: center;
    min-height:225px;
}
#wrapper #content .content-heading.planners .contentwidth div { width:50%; }
#wrapper #content .content-heading.planners h2 {
    font-size:40px;
    line-height:50px;
    font-weight: 700;
    max-width:552px;
    
}
.content-blue-bg.planners {
    padding:25px 0 0 0;
}
.content-blue-bg.planners p {
    color:var(--white);
}
.planners-policy {
    padding-top:50px;
}
.planners-policy p {
 font-size:12px;
 line-height: 20px;;   
}
#wrapper #content .planners-policy p a.policy-button {
    display:block;
    font-size:18px;
    line-height:24px;
    font-weight:700;
    color:var(--primary-font-color);
    text-align: center;
    border:solid 2px var(--primary-font-color);
    border-radius:10px;
    padding:10px;
    text-decoration:none;
    transition: var(--transition);
    max-width: 352px;
    width:100%;
    margin:0 auto;
}
#wrapper #content .planners-policy p a.policy-button:hover { color:var(--primary-font-color); text-decoration:none; background-color:var(--grey); }

#wrapper #content h2.admin {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color:var(--primary-font-color);
}

#wrapper #content h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-font-color);
}

#wrapper #content p, #wrapper #content li {
    margin: 16px 0px;
}

/* PWA */
.pwa header .header-top figure.logo img.original { display:none; }
.pwa.menuopen header .header-top figure.logo img.original { display:block; }
.pwa.menuopen header .header-top figure.logo img.reverse { display:none; }
.pwa header .header-top { background-color:var(--blue); }
.pwa.menuopen .header-top { background-color:var(--white); }
.pwa header .header-nav { padding: 25px 40px; }
.pwa header .header-nav .ocasp-admin .ocasp-admin-select { cursor: pointer; width: 34px; height: 34px; padding:0; font-size: 14px; font-weight: 700; background-color: var(--white); background-image: url(../images/dots.svg); background-repeat: no-repeat; background-size: 15px; background-position:center center; border: solid 2px var(--white); border-radius: 50px; transition: var(--transition); }
.pwa header .header-nav .ocasp-admin.active .ocasp-admin-select { background-image: url(../images/x.svg); background-size: 20px; }
.pwa #loggedin #loggedinbutton input { color:var(--red); margin-bottom:50px; }

.pwa #loggedin { position:fixed; top: 108px; z-index: 5000; height:calc(100vh - 108px); background-color:var(--light-grey); border-radius: 0; }
.pwa #loggedin #loggedinas { display:block; padding-right:10px; font-weight:700; color:var(--primary-font-color); }
.pwa #loggedin #loggedinid { padding-left:10px; }
.pwa .m2cols { display:flex; justify-content: space-between; width: 100%; max-width: 358px; margin: 25px auto; }
.pwa #loggedin #loggedinbutton { text-align: center; }
.pwa #loggedin #loggedinbutton input { max-width: 358px; min-width:180px; width:100%; cursor:pointer; margin-bottom:10px; padding: 10px 20px; font-family: var(--primary-font-family); font-size:16px; line-height:16px; font-weight:700; color:var(--primary-font-color); background-color:var(--white); border:solid 2px var(--white); border-radius:50px; transition:var(--transition); text-decoration:none !important; }
.pwa #loggedin #loggedinbutton input:hover {  border-color:var(--red); }

.pwa header .header-nav .menu-buttons { max-width: 358px; min-width: 180px; width: 100%; margin-left:auto; margin-right:auto; }
.pwa header .header-nav .menu-buttons p strong { display:block; margin-bottom:15px; color:var(--primary-font-color); }
.pwa header .header-nav .menu-buttons .columns div a {  display:flex; justify-content: center; flex-direction: column; padding: 15px; margin-bottom: 10px; min-height: 75px; background-color: var(--white); border-radius: 10px; color: var(--primary-font-color); text-decoration:none; font-size: 14px; line-height: 19px; transition: var(--transition); }
.pwa .content-heading-pwa { background-color:var(--blue); margin-bottom:50px; }
.pwa #wrapper #content .content-heading-pwa form.optionsform p { display: block; width: 100%; text-align:center; }
.pwa #wrapper #content .content-heading-pwa p a.button { color:var(--white); }
.pwa #wrapper #content .content-heading-pwa .modal-overlay-content img { display:block; margin: 0 auto; }
.pwa #wrapper #content .content-heading-pwa .modal-overlay-content img.contact-card { width: 100%; height: auto; max-width: 370px; }

.emergencyContactWrapper { width: 90%; position: relative; left: 50%; transform: translateX(-50%); margin-bottom: 100px; }

.emergencyContactWrapper h2 { font-weight: bold !important; }

.emergencyCard { display: flex; flex-direction: column; border: 2px solid rgb(0, 36, 82); border-radius: 10px; margin-bottom: 15px;}

.emergencyContactWrapper .emergencyCard .cardHeader { background-color: rgb(0, 36, 82); display: flex; flex-direction: row; justify-content: flex-start; align-items: center; padding: 15px 0; }

.emergencyContactWrapper .emergencyCard .cardHeader figure { height: 34px; width: 34px; border: 2px solid white; border-radius: 50%; background-color: rgb(185, 14, 49); margin: 0 15px; }

.emergencyContactWrapper .emergencyCard .cardHeader div p { color: white; margin: 0 !important; }

.emergencyBold { font-weight: bold; }

.emergencyCard .cardBody { display: flex; flex-direction: column; justify-content: center; text-align: center; align-items: center; padding-bottom: 20px; }

.emergencyP { margin: 20px 0 0 0 !important; }

.noMargin { margin: 0!important; }

.textStart { text-align: start; width: 90%; }

.memNumber { font-size: 18px !important; }

.emergencyCard .cardBody .redText { color: rgb(185, 14, 49); font-size: 18px !important; }

.pwa .content-heading-pwa .twocols { align-items:center; }
.pwa .content-heading-pwa .pwa-img { max-width:358px; }
.pwa .content-heading-pwa .pwa-img img {  width:100%; height:auto; }
 #wrapper #content .planned-dates { padding:20px 0;  }
 #wrapper #content .planned-dates>div { padding:0 15px 20px 15px; margin-bottom:0;}
 #wrapper #content .planned-dates span { cursor: pointer; display: flex; flex-direction:column; align-items: flex-start; justify-content: center; min-height: 75px; margin-right: 10px; padding: 10px 10px 10px 70px; padding-left: 70px; color: var(--primary-font-color); font-weight: 400; background-color: var(--white); background-image: url(../images/warning-yellow-icon.svg); background-repeat: no-repeat; background-position: 20px center; background-size:28px; font-size: 14px; line-height: 19px; text-decoration: none; border:solid 2px var(--yellow); border-radius: 10px; transition: var(--transition); }
 #wrapper #content .planned-dates a u { margin-top:5px; }
.pwa #wrapper #content .content-heading-pwa h2 { color:var(--white); font-size:30px; font-weight:700; line-height: 36px; }
.pwa #wrapper #content .content-heading-pwa form.optionsform fieldset > div { border:none; padding-left:0; padding-right:0; }
.pwa #wrapper #content h2 { color:var(--primary-font-color);  font-weight:700; }
.pwa #wrapper #content a { font-weight:400; color:var(--primary-font-color); text-decoration:underline; }
.pwa #wrapper #content a:hover { color:var(--red); }
.pwa #wrapper #content a.button { display:inline-block; min-width:170px; cursor:pointer; margin-bottom:10px; padding: 10px 20px; text-align:center; font-family: var(--primary-font-family); font-size:16px; line-height:16px; font-weight:700; color:var(--white); background-color:var(--blue); border:solid 2px var(--blue); border-radius:50px; transition:var(--transition); text-decoration:none !important; text-decoration:none; }
.pwa #wrapper #content a.button:hover { background-color:var(--red); border-color:var(--red); }
#wrapper #content form.optionsform fieldset blockquote label.hasicon span { display:flex; align-items:center; }
#wrapper #content form.optionsform fieldset blockquote label.hasicon img { margin-right:10px; }
#wrapper #content form.planform fieldset blockquote label.alert { 
    padding-left: 55px;
    background-color: var(--white);
    background-image: url(../images/exclamation.svg);
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: 30px;
 }
.pwa #wrapper #content form.optionsform div p { display: flex; justify-content: space-between; align-items: center; }
#wrapper #content .international-sos .columns a.nobg { flex-direction: column; align-items: flex-start; justify-content: center; margin-bottom:20px; padding-left:10px; background-image:none; }
#wrapper #content .international-sos .columns a.nobg strong { display: block; font-size: 18px; line-height: 22px; font-weight: 400; }

.pwa #wrapper #content .optionlinks { padding-top: 10px; padding-bottom: 80px; }
.pwa #wrapper #content .optionlinks .ptitle { text-align: center; }
.pwa #wrapper #content .optionlinks .ptitle span.strong { font-size: 26px; line-height: 28px; font-weight: 700; color: var(--white); }
.pwa #wrapper #content .optionlinks a { display:flex; align-items: center;; cursor: pointer; margin:0 15px; padding: 15px; min-height:75px; color: var(--primary-font-color); background-color: var(--white); font-size:14px; line-height: 19px; text-decoration:none; border-radius: 10px; transition: var(--transition); }
.pwa #wrapper #content .optionlinks a:hover { background-color: var(--grey); }
.pwa #wrapper #content .optionlinks a strong { display:block; font-size:18px; line-height: 22px; font-weight:400; }

body.modal-overlay-open { overflow:hidden; }

.modal-overlay { overflow-y: scroll; display:none; position: fixed; width: 100%; height: 100%; z-index: 100; top: 0; left: 0; padding: 36px; background-color: rgba(0,36,82,0.8); }
.modal-overlay.active { display:block; }
.modal-overlay .modal-overlay-content { position:relative; max-width:550px; margin:0 auto; padding: 45px 25px 25px 25px; background-color:var(--white); border-radius:10px; }
.modal-overlay .modal-overlay-content span.close { cursor:pointer; position:absolute; top:10px; right:10px; padding:10px; }
.modal-overlay .modal-overlay-content span.close img { display:block;  width:15px; height:15px; }
#wrapper #content .content-heading-pwa .modal-overlay .modal-overlay-content h2 { margin-bottom:25px; font-size:20px; line-height:27px; font-weight:400; color: var(--primary-font-color); }
.modal-overlay .modal-overlay-content p { font-size:16px; line-height:22px; }

#home-screen-start { display:none; position: fixed; width: 100%; height: 100%; z-index: 100; top: 0; left: 0; padding: 36px; background-color: rgba(0,36,82,0.8); }
#home-screen-start.active { display:block; }
#home-screen-start .home-screen-start-content { position:relative; max-width:550px; margin:0 auto; padding: 45px 25px 25px 25px; background-color:var(--white); border-radius:10px; }
#home-screen-start .home-screen-start-content span.close { cursor:pointer; position:absolute; top:10px; right:10px; padding:10px; }
#home-screen-start .home-screen-start-content span.close img { display:block;  width:15px; height:15px; }
#wrapper #content #home-screen-start .home-screen-start-content h2 { margin-bottom:25px; font-size:20px; line-height:27px; font-weight:400; }
#wrapper #content #home-screen-start .home-screen-start-content p { font-size:16px; line-height:22px; }
#home-screen-start { overflow-y: scroll; }
#home-screen-start .home-screen-start-content .steps { margin-bottom:35px; }
#home-screen-start .home-screen-start-content .steps .step { position:relative; padding-left:55px; margin-bottom:25px; }
#home-screen-start .home-screen-start-content .steps .step1::before { content:'1.'; }
#home-screen-start .home-screen-start-content .steps .step2::before { content:'2.'; }
#home-screen-start .home-screen-start-content .steps .step3::before { content:'3.'; }
#home-screen-start .home-screen-start-content .steps .step::before { position:absolute; top:0; left:0; display:flex; justify-content: center; align-items: center; width:40px; height:40px; font-weight:700; color:var(--white); background-color:var(--blue); border-radius:50px; }
#home-screen-start .home-screen-start-content img { max-width:500px; width:100%; height:auto; }
.pwa .international-sos .columns { flex-wrap: wrap; }
.pwa .international-sos .columns div { flex: 0 0 100%; }
.pwa .international-sos .columns div:first-child { margin-bottom: 25px; }
#add-to-home-screen { display:none;  position:fixed; bottom:0; left:0; z-index: 4000; width:100%; background-color:#212121; }
#add-to-home-screen .add-to-home { display:flex; justify-content: space-between; align-items: center; }
#add-to-home-screen .add-to-home .add { flex: 1 1 auto; display:flex; align-items: center; padding:10px 20px; cursor:pointer; color:#ffffff; font-size:14px; line-height:1em; }
#add-to-home-screen .add-to-home .add span { padding:0 10px; }
#add-to-home-screen .add-to-home .close { flex: 0 0 50px; padding:10px 0; cursor:pointer; }
@media screen and (max-width: 980px) {
    .pwa .contentwidth { max-width:790px; }
    .pwa .content-heading-pwa .twocols { flex-direction:column; align-items:center; }
    .pwa-title { margin-bottom:40px; }
    .pwa .content-heading-pwa .pwa-img { max-width:initial; }
    #wrapper #content form.optionsform fieldset blockquote label { margin:0; }
    
}

/* footer */

footer {
    
}

footer .footer-top {
    background-color:var(--dark-blue);
    color:var(--white);
}

footer .footer-top .contentwidth {
    display:flex;
    padding:30px 0 20px 0;
}

footer .footer-logo  { padding-right:50px; }
footer .footer-logo img { width:224px; height:56px; }
footer p { font-size:14px; line-height:20px; margin-bottom:5px; }
footer p strong { display:block; margin-bottom:15px; font-size:18px; font-weight:700; }
footer p:last-child { margin-bottom:0; }
footer p a { color:var(--primary-font-color); }

footer .footer-bar { display:flex; height:10px; width:100% }
footer .footer-bar span { flex:0 0 50%; }
footer .footer-bar .yellow { background-color:var(--yellow); }
footer .footer-bar .red { background-color:#B90E31; }

footer .footer-bottom .contentwidth { padding:25px 0; }
footer .footer-bottom .footer-text { padding-left:264px; }

#footer, #push {
    height: 90px;
}

#footer #footernav, #wrapper #subnav {
    width: 743px;
    margin-left: auto;
    margin-right: auto;
    color: #CCCCCC;
}

#footer #footernav {
    height: 35px;
}

#wrapper #subnav {
    margin-top:28px;
    line-height: 16px;
}

#footer #footernav a, #wrapper #subnav a {
    color: #707070;
    text-decoration: none;
}

#footer #footernav a:hover, #wrapper #subnav a:hover {
    text-decoration: underline;
}

#footer #footerbar {
    height: 55px;
    background-color: #808080;
}
#footer #footerbar #footercopy {
    width: 743px;
    margin-left: auto;
    margin-right: auto;
    font-size: 11px;
    color: #FFFFFF;
    background-color: #808080;
    padding-top: 12px;
}

#footer #footerbar #footercopy a {
    color: #FFFFFF;
    text-decoration: underline;
}

#footer #footerbar #footercopy div {
    padding-bottom: 5px;
}


/* Forms */

#wrapper #content form {
    margin:0px;
    padding:0px;
}

#wrapper #content form fieldset {
    border: none;
}
/*
#wrapper #content form fieldset:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#wrapper #content form fieldset { display: inline-block; } 
#wrapper #content form fieldset { display: block; }
*/
#wrapper #content form input[type=text], #wrapper #content form select {
    border-style: solid;
    border-width: 2px;
    border-color: var(--medium-grey);
    border-radius:10px;
    padding: 15px;
    width: 100%;
    margin-bottom:5px;
    font-size: 16px;
    color:var(--primary-font-color);
    font-family: var(--primary-font-family);
}

#wrapper #content form select { 
    -webkit-appearance: none;
    background-image:url(../images/select-arrow.svg);
    background-repeat:no-repeat;
    background-position:right 10px center;
    padding-right:40px;
}

#wrapper #content form textarea, .dfait-table textarea {
    border-style: solid;
    border-width: 2px;
    border-color: var(--medium-grey);
    border-radius:10px;
    padding: 15px;
    width: 100%;
    height: 135px;
    font-size: 16px;
    color:var(--primary-font-color);
    font-family: var(--primary-font-family);
}

.sep { margin: 25px 0 0 0; padding: 0 0 25px 0; height:25px; }
.sep hr { position:absolute; left:5%; width:90%; border:none; border-top:solid 2px var(--grey); }

.form-type-radio label { position:relative; cursor:pointer; display:flex !important; justify-content: flex-start !important; margin:0; padding:8px 12px; text-align:left; background-color:#FFFFFF; border-radius:4px; }
.form-type-radio { display: block; } 
.form-type-radio + .form-control {margin-top: 1em;}
.form-type-radio:focus-within {color: var(--form-control-color);}
.form-type-radio input[type="radio"] { -webkit-appearance: none; appearance: none; background-color: var(--form-background); margin: 0; font: inherit; color: currentColor; width:33px; height:33px; margin-right:5px; border:solid 2px var(--medium-grey); border-radius: 50px; transform: translateY(-0.075em); display: grid; place-content: center; }  
.form-type-radio input[type="radio"]::before { content: ""; width:19px; height:19px; border-radius: 50px; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--form-control-color); background-color: var(--dark-blue); }
.form-type-radio input[type="radio"]:checked::before { transform: scale(1); }
.form-type-radio-inline { display:flex; }

.form-type-checkbox label { position:relative; cursor:pointer; display:flex !important; flex-direction: row !important; justify-content: flex-start; margin:0; padding:8px 12px; text-align:left; background-color:#FFFFFF; border-radius:4px; }
.form-type-checkbox { display: block; } 
.form-type-checkbox + .form-control {margin-top: 1em;}
.form-type-checkbox:focus-within {color: var(--form-control-color);}
.form-type-checkbox input[type="checkbox"] { cursor:pointer; -webkit-appearance: none; appearance: none; background-color: var(--form-background); margin: 0; font: inherit; color: currentColor; width:33px; height:33px; margin-right:5px; border:solid 2px var(--medium-grey); border-radius: 5px; transform: translateY(-0.075em); display: grid; place-content: center; }  
.form-type-checkbox input[type="checkbox"]::before { content: ""; width:19px; height:19px; border-radius: 50px; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--form-control-color); background-image:url(../images/checkmark-grey.svg); }
.form-type-checkbox input[type="checkbox"]:checked::before { transform: scale(1); }
.form-type-checkbox-inline { display:flex; }
.form-type-checkbox span {  cursor:pointer; }



#wrapper #content form #startdate, #wrapper #content form #enddate {
    
}



#wrapper #content form input.radio {
    margin-right: 10px;
    border: none;
}

#wrapper #content form input.checkbox {
    margin-right: 10px;
}

#wrapper #content form div.formbuttons {
  
}

#wrapper #content form div.formbuttons .btnorange, #wrapper #content form div.formbuttons .btnyellow {
    
}

#wrapper #content form.loginform {
    width:450px;
    margin: 0px auto;
}

#wrapper #content form.loginform label {
    float:left;
    width: 150px;
    font-weight: bold;
    text-align:right;
    padding-right:20px;
    padding-top: 3px;
}

#wrapper #content form.loginform .obtainid {
    text-align: center;
}

#wrapper #content form.planform.nobg { position:initial; }
#wrapper #content form.planform.nobg fieldset .form-type-checkbox label {
    flex-direction: row;
    justify-content: flex-start;
}

#wrapper #content form.planform.nobg fieldset label

#wrapper #content form.planform.hazards fieldset label, #wrapper #content form.planform.hazards fieldset label strong { display:block; }

#wrapper #content form.planform.nobg fieldset .form-type-radio label {  margin-top:0;   flex-direction: row; justify-content: flex-start; align-items: center; }

.hasdatepicker { position:relative; }

img.ui-datepicker-trigger {
    width: 31px;
    height: 28px;
    position: absolute;
    top: 10px;
    right: 15px;
    cursor:pointer;
}

#wrapper #content form.planform fieldset label {
    display: block;

}

#wrapper #content form.planform fieldset blockquote input.radio { display:none; }

#wrapper #content form.planformmain div {
    margin-bottom: 40px;
    background-color:var(--dark-blue);
    padding:10px 28px;
}
#wrapper #content form.planformmain div p {
    color:var(--primary-font-color);
}

#wrapper #content form.planformmain div > p {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #wrapper #content form.planformmain div span.strong {
    font-size:26px;
    line-height:28px;
    font-weight:700;
    color:var(--white);
  }

#wrapper #content form.planformmain div label div {margin-bottom:0px;}
#wrapper #content form.planformmain div div {margin-bottom:0px;}

#wrapper #content form.loginform fieldset {margin:20px 0px;}
.obtainid a {color:#707070;}
.obtainid a:hover {text-decoration:none;}

input[type=radio] {border:none;}

/* #wrapper #content form.planform div div {
    margin-top: 10px;
    margin-left: 25px;
}

#wrapper #content form.planform div div label {
    float:left;
    width: 40px;
    text-align:right;
    padding-top: 5px;
    padding-right: 5px;
}

#wrapper #content form.planform div fieldset {
    border-style: solid;
    border-width: 1px;
    border-color: #9d1939;
    margin-top: 6px;
    margin-bottom: 6px;
    padding: 5px 10px;
    line-height: 16px;
}

#wrapper #content form.planform fieldset blockquote {
    margin-left: 25px;
    margin-top:20px;
}

/*#wrapper #content form.planform fieldset select {
    margin-left: 25px;
}*/

#wrapper #content form.planform div div.riskoption label { float:left !important; width:auto; text-align:right; margin-right:30px; }

#wrapper #content form.planform div.highrisklevel {
    
}

#wrapper #content form.planform div div.riskoption:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#wrapper #content form.planform div div.riskoption { display: inline-block; } /* _height: 1%; */
#wrapper #content form.planform div div.riskoption { display: block; }

#wrapper #content form.optionsform fieldset { display:flex; flex-wrap:wrap; justify-content: space-between; }
#wrapper #content form.optionsform fieldset > div { flex:0 0 100%; border-left:solid 9px var(--dark-grey); border-radius:0 10px 10px 0; }
#wrapper #content form.optionsform div { margin-bottom: 40px; background-color: var(--dark-blue); padding: 10px 28px; }
#wrapper #content form.optionsform div p { color: var(--primary-font-color); }
#wrapper #content form.optionsform div span.strong { font-size: 26px; line-height: 28px; font-weight: 700; color: var(--white); }
#wrapper #content form.optionsform fieldset label { display: block; }
#wrapper #content form.optionsform fieldset div label { margin-bottom: 20px; margin-top: 0; }
#wrapper #content form.optionsform fieldset blockquote label { cursor: pointer; margin:0 15px; padding: 15px; min-height:75px; color: var(--primary-font-color); background-color: var(--white); font-size:14px; line-height: 19px; border-radius: 10px; transition: var(--transition); }
#wrapper #content form.optionsform fieldset blockquote label:hover { background-color: var(--grey); }
#wrapper #content form.optionsform fieldset blockquote label strong { display:block; font-size:18px; line-height: 22px; font-weight:400; }
#wrapper #content form.optionsform fieldset blockquote input.radio { display: none; }


#wrapper #content form#post-activity-report fieldset div {margin-bottom:10px;}

.planform table, .planform thead, .planform tbody, .planform table tr, .planform table td { display:block; }


#wrapper #content fieldset {padding:0px;}
/*#wrapper #content form#participant-feedback fieldset div {margin-bottom:10px;}*/
#wrapper #content form.planformmain fieldset div div { display:none; margin-top:5px;}
#wrapper #content form.planform fieldset div label {margin-top:10px;}
#wrapper #content form.planformmain fieldset div label {margin-bottom:20px; margin-top:0;}
#wrapper #content form fieldset div.scale {margin-bottom:0px;background:grey;}
#wrapper #content form fieldset div.scale span.right {float:right;}
#wrapper #content form fieldset div blockquote.nonBlock {padding:10px;}
#wrapper #content form fieldset div blockquote.nonBlock label {display:inline;}
#wrapper #content form.planform fieldset blockquote label { cursor:pointer;margin-right:10px; padding:15px; color:var(--primary-font-color); background-color:var(--white); font-size:14px; line-height:19px; border-radius:10px; transition:var(--transition); }
#wrapper #content form.planform fieldset blockquote label:hover { background-color:var(--grey); }
#wrapper #content form.planform fieldset blockquote label strong { display:block; font-size:20px; line-height:27px; font-weight:400; }
#wrapper #content form#participant-feedback #accom-comments {width:600px;height:200px;}
#wrapper #content form#participant-feedback fieldset div blockquote label {padding:8px 0px;_display:inline;_padding:0px!important;_margin:0px!important;}


#wrapper #content form#participant-emergency-info div#family-contacts {overflow:hidden;}
#wrapper #content form#participant-emergency-info div#family-contacts fieldset {float:left;width:300px;padding:0px;}
#wrapper #content form#participant-emergency-info div#family-contacts fieldset div {text-align:right;margin-bottom:5px;}
#wrapper #content form#participant-emergency-info div#family-contacts fieldset h4 {margin-bottom:10px;text-align:center;}

#wrapper #content form#participant-citizenship-special-needs div fieldset div {margin-top:5px;}

#wrapper #content form#participant-signoff ol {margin-top:20px;}
#wrapper #content form#participant-signoff ol li {margin-bottom:20px;}

#wrapper #content h3 {margin-bottom:20px;}

#wrapper #content form table {margin-top:0px;}
#wrapper #content form table.scale {font-size:10px;}

/*#choose-country, #passport-number, #need, #required-accommodation {display:block;margin-top:7px;}*/

.indent { max-width:536px; width:100%; margin:0 auto; }
span.indent {display:block;}
.indent-large { max-width:1088px; }
.indent-large ul { margin-left: 20px; }

.example { padding:10px 20px; margin-bottom:25px; background-color:var(--grey); border-radius:10px; }

.bottom-margin {margin-bottom:40px!important;}

.esp {color:blue;font-weight:bold;}
.spr {color:lime;font-weight:bold;}

/* Tooltip */
.hoverinfo {
    position:relative;
    height:auto;
    width:auto;
}
.hoverinfo svg { cursor: pointer; width:28px; height:28px; }
.hoverinfo svg .circle { fill:var(--white); transition: var(--transition); }
.hoverinfo svg .question { fill:var(--red); }
.hoverinfo:hover svg .circle { fill:var(--grey); }

.hashoverinfo  { position:relative; }
.hashoverinfo .hoverinfo { position: absolute; right:-40px; top:5px; }
.hashoverinfo .hoverinfo svg { width:32px; height:32px; border:solid 2px var(--red); border-radius:50px; }


.hoverinfo .hoverinfopopOverlay { display:none; position:fixed; top:0; left:0; z-index:999; width:100vw; height:100vh; background-color:rgba(0,0,0,0.25);  backdrop-filter: blur(1px); }
#hoverinfopop, .hoverinfopop { position:fixed; z-index: 1000; top:50%;  left:50%; transform:translate(-50%, -50%); width: 100%; min-width: 300px; max-width:905px; height: auto; padding:0; background-color: var(--white); font-size: 10px; color: #786f3b; border-radius:0 10px 10px 0; display:none; }
.hoverinfopop .hoverinfopopTitle { position:relative; display:block; padding:20px 50px; font-size: 26px; line-height: 28px; font-weight: 700; color: var(--white); background-color:var(--red); border-radius:0 10px 0 0; }
.hoverinfopop .hoverinfopopTitle .close { position:absolute; top: 18px; right: 25px; cursor:pointer; }
.hoverinfopop .hoverinfopopText { display:block; padding:20px 50px 40px 50px; font-size:14px; line-height: 19px; color:var(--primary-font-color); }

/* Errors */
.errormessage {
    background-color: #F5E7EA;
    color: var(--red);
    border-style: solid;
    border-width: 1px;
    border-color: #F5E7EA;
    padding: 15px 30px;
    border-radius:10px;
}

.errormessage a {
    color: #9d1939;
    text-decoration:none;
}

.successmessage {
    background-color: #ffffff;
    color: var(--primary-font-color);
    border-style: solid;
    border-width: 2px;
    border-color: #7FAC79;
    padding: 15px 30px;
    border-radius:10px;
}

.errormessage span.large, .successmessage span.large {font-size:16px;}

.error {
    color: var(--red) !important;
    text-decoration:underline;
    font-weight:bold;
}

/* Buttons */
.btndarkgrey {
    font-size: 11px;
    color: #FFFFFF;
    width:75px;
    height: 21px;
    background-color: #FFFFFF;
    background-image: url(../images/buttons/dark-grey-btn.gif);
    background-repeat: no-repeat;
    background-position: center center;
    border-width: 0px !important;
    cursor: pointer;
}

.btnlightgrey {
    font-size: 10px;
    color: #636363;
    width:53px;
    height: 24px;
    background-color: #FFFFFF;
    background-image: url(../images/buttons/light-grey-btn.gif);
    background-repeat: no-repeat;
    background-position: center center;
    border-width: 0px !important;
    cursor: pointer;
}

div.btnlightgrey {
    font-size: 10px;
    color: #636363;
    width:53px;
    height: 24px;
    background-color: #FFFFFF;
    background-image: url(../images/buttons/light-grey-btn.gif);
    background-repeat: no-repeat;
    background-position: center center;
    border-width: 0px !important;
    float:right;
    cursor: pointer;
    text-align:center;
    padding-top:10px;
    text-decoration: none;
}

.btnlightgreylong {
    font-size: 10px;
    color: #636363;
    width:91px;
    height: 24px;
    background-color: transparent;
    background-image: url(../images/buttons/light-grey-lg-btn.gif);
    background-repeat: no-repeat;
    background-position: center center;
    border-width: 0px !important;
    cursor: pointer;
}

a.btnlightgreylong {
    padding: 5px 5px 5px 5px;
}

.btnlightgreyLarge {
    font-size: 16px;
    color: #636363;
    height: 36px;
    background-color: #FFFFFF;
    background-image: url(../images/buttons/light-grey.gif);
    background-repeat: repeat-x;
    background-position: center center;
    border-top: 1px solid #d7d7d7;
    border-right: 1px solid #cfcfcf;
    border-bottom: 1px solid #bababa;
    border-left: 1px solid #c8c8c8;
    cursor: pointer;
}

.btnyellowSmall{
    font-size: 10px;
    font-weight: bold;
    color: #FFFFFF;
    height: 36px;
    background-color: #FFFFFF;
    background-image: url(../images/buttons/yellow.gif);
    background-repeat: repeat-x;
    background-position: center center;
    border-width: 0px !important;
    cursor: pointer;
}

.btnorange{
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;
    width:129px;
    height: 40px;
    background-color: #FFFFFF;
    background-image: url(../images/buttons/orange-btn.gif);
    background-repeat: no-repeat;
    background-position: center center;
    border-width: 0px !important;
    cursor: pointer;
}

.whiteBtn {font-family:Verdana,Arial,Helvetica,sans-serif;display:block;font-size:10px;background-color:#fff;border:none;padding:0px 8px;height:20px;cursor:pointer;border:1px solid #d7d7d7;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#636363;}
.greyBtn {font-family:Verdana,Arial,Helvetica,sans-serif;background-image:url(../images/grey-btn.gif);background-repeat:repeat-x;background-position:center left;background-color:#bbbbbb;border:1px solid #d7d7d7;line-height:22px;height:22px;color:#636363;font-size:10px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;cursor:pointer;padding:0px 4px;}
.greenBtn {font-family:Verdana,Arial,Helvetica,sans-serif;background-image:url(../images/green-btn-bg.gif);background-repeat:repeat-x;background-position:center left;background-color:#bbbbbb;border:none;line-height:20px;height:20px;color:#fff;font-size:10px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;cursor:pointer;padding:0px 4px;font-weight:bold;}
.greyBtnLg {font-family:Verdana,Arial,Helvetica,sans-serif;background-image:url(../images/grey-btn.gif);background-repeat:repeat-x;background-position:center left;background-color:#bbbbbb;border:1px solid #d7d7d7;line-height:45px;height:45px;color:#636363;font-size:10px;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;cursor:pointer;padding:0px 16px;font-size:18px;}

/* Sorted table */
.sorted-table { font-family:Verdana,Arial,Helvetica,sans-serif;border-left:1px solid #cecece;border-top:1px solid #cecece;}
.sorted-table thead tr {background-image:url(../images/table-header-bg.gif);background-repeat:repeat-x;background-color:#bfbfbf;}
.sorted-table thead tr th {text-align:left;font-weight:normal;font-size:12px;color:#252525;padding:8px 8px 7px 28px;border-bottom:1px solid #cecece;border-right:1px solid #cecece;}
.sorted-table thead tr th.header {background-image:url(../images/table-sort-off.gif);background-repeat:no-repeat;background-position:7px 7px;cursor:pointer;}
.sorted-table thead tr th.headerSortDown {background-image:url(../images/table-sort-dn.gif);}
.sorted-table thead tr th.headerSortUp {background-image:url(../images/table-sort-up.gif);}
.sorted-table tbody tr td {}
.sorted-table tbody tr.odd td {}
.sorted-table tbody tr.even td {}

/* summary */
#wrapper #content form fieldset.summary { position:relative; margin-top:25px; margin-bottom:25px; border:solid 2px #7FAC79;padding:20px; border-radius:10px;}
#wrapper #content form fieldset.haserror { background-color:#F5E7EA; border-color:var(--red); }
#wrapper #content form.summary div.errormessage, #wrapper #content form.summary div.successmessage { margin-bottom: 40px; margin-top: 25px; font-size:14px; line-height:19px;}
#wrapper #content form fieldset.summary strong.error { display:none; }
#wrapper #content form fieldset.summary h4 {font-size:16px; line-height:28px; color:var(--primary-font-color);}
#wrapper #content form fieldset.summary strong  {font-size:16px; line-height:28px; color:var(--primary-font-color);}
#wrapper #content form fieldset.summary div {margin:auto;}
#wrapper #content form fieldset.summary div.padded {margin:50px 0;}
#wrapper #content form fieldset.summary div.padded ul {padding:0px;list-style:none;}
#wrapper #content form fieldset.summary div.padded ul li {margin:10px 0;}
#wrapper #content form fieldset.summary ul { list-style:none; }
#wrapper #content form fieldset.summary ul li { display:flex; padding-bottom:10px; margin-bottom:10px; border-bottom:solid 1px var(--medium-grey); }
#wrapper #content form fieldset.summary ul li span { flex:0 0 50%; padding:5px; }
#wrapper #content form fieldset.summary ul li span:first-child { padding-left:0; }
#wrapper #content form fieldset.summary ul li span:last-child { padding-right:0; }
#wrapper #content form fieldset.summary .edit-button a { border-color:#7FAC79; color:var(--primary-font-color); }
#wrapper #content form fieldset.haserror .edit-button a { border-color:var(--red); }

.flex100 { flex: 0 0 100% !important; }

/* review */
#wrapper #content form.review {width:630px;}
#wrapper /home/vince/Projects/OCASP/src/admin#content h2.review {color:var(--primary-font-color);}
#wrapper #content form fieldset.review {border:1px solid #cecece;padding:15px;color:#707070;margin:20px 0px;width:600px;}
#wrapper #content form fieldset.review h4, h4.review {font-size:20px;color:var(--primary-font-color);}
#wrapper #content form fieldset.review strong {color:var(--primary-font-color);}
#wrapper #content form label.status {display:block;margin:10px 0px;}
#wrapper #content form textarea#corrections {width:630px;height:200px;margin-top:15px;}

#wrapper #content form.planform {position:relative;}
#wrapper #content #sample-spr { display:flex; align-items: center; padding: 15px 20PX; margin-bottom:10px; background-color:var(--grey); border-radius: 10px; }
#wrapper #content #sample-spr p {margin:0;font-size:14px; line-height:19px; }
#wrapper #content #sample-spr p a { display:block; padding:5px; width:168px; font-weight:700; text-align: center; color:var(--white); text-decoration:none; background-color:var(--red); border-radius: 50px;; }
/* dfait tables */
div.dfait-table {}
div.dfait-table label {margin-bottom:0px!important;}
div.dfait-table table { width:100%; }
div.dfait-table table td { display:block; }
div.dfait-table table tbody.hazzardcontent td { margin:10px 0; }


.pdt-content { }
.pdt-content .indent { max-width:536px; width:100%; margin:0 auto; }
.btncontainer { text-align: center; }
.pdt-button { min-width:180px; cursor:pointer; margin-bottom:10px; padding: 10px 20px; font-family: var(--primary-font-family); font-size:16px; line-height:16px; font-weight:700; color:var(--primary-font-color); background-color:var(--white); border:solid 2px var(--medium-grey); border-radius:50px; transition:var(--transition); text-decoration:none !important; }
a.pdt-button { text-decoration:none; }
.pdt-button:hover { background-color:var(--light-grey); border-color:var(--red); }
#print-button { display:inline-block; min-width:180px; cursor:pointer; margin-bottom:10px; margin:20px; padding: 10px 20px; font-family: var(--primary-font-family); font-size:16px; line-height:16px; text-align: center;; font-weight:700; color:var(--primary-font-color);text-decoration: none; background-color:var(--white); border:solid 2px var(--medium-grey); border-radius:50px; transition:var(--transition); }
#print-button:hover { background-color:var(--light-grey); border-color:var(--red); text-decoration: none !important; }
.pdt-button-continue { color:var(--white); background-color:var(--dark-blue); border-color:var(--dark-blue); margin-top:20px; }
.pdt-button-continue:hover { color:var(--primary-font-color); border-color:var(--dark-blue); }
.pdt-button-edit { display: block; width: 95px; height: 34px; min-width: 95px; padding: 7px 15px;  background-image:url(../images/edit.svg); background-repeat:no-repeat; background-position:right 10px center; background-size:22px; }
.edit-button .pdt-button-edit { position:absolute; top:15px; right:15px; }
.pdt-button-red { color:var(--white) !important; background-color:var(--red); border-color:var(--red); }
.pdt-button-red:hover { color:var(--red) !important; background-color:var(--white); }

.displayed-info {margin-top:25px; border-left:solid 9px var(--blue);padding-left:25px;}
.displayed-info a {color:#9e0b0f;}
.displayed-info td {padding:10px;}
.displayed-info .line {height:1px;background:#a8afb4;margin:10px}
.displayed-info .indent { margin-left:50px; }
#wrapper #content form .displayed-info .indent  input[type=text], #wrapper #content form .displayed-info .indent select, #wrapper #content form .displayed-info .indent textarea { width:calc(100% - 50px); }
.displayed-info table, .displayed-info thead, .displayed-info tbody, .displayed-info table tr, .displayed-info table td { display:block; }
.displayed-info .error { display:none; }

.yellowtitle { display:flex !important; justify-content: space-between; align-items: center; padding:10px; background-color:var(--yellow); border-left:solid 9px #808285; }
.hazzardcontent { display:none !important; }
.hazzardcontent.open { display:block !important; }
.hazzardcontent table tr { display:block; margin:20px 0; }
#wrapper #content .yellowtitle .toggle { display:block; width:100px; color: var(--primary-font-color); font-size:16px; font-weight:400; text-decoration: underline; }
#wrapper #content .yellowtitle .toggle span { display:none; background-position:right 5px center; background-repeat:no-repeat; }
#wrapper #content .yellowtitle .toggle span.expand { display:block; background-image:url(../images/arrow-down.svg); }
#wrapper #content .yellowtitle .toggle.open span.collapse { display:block; background-image:url(../images/arrow-up.svg);  }
#wrapper #content .yellowtitle .toggle.open span.expand { display:none; }

.choose-file { position:relative; cursor:pointer; max-width:180px; width:100%; margin-left:auto; margin-right:auto; text-align: center; }
.choose-file input[type=file] { position: absolute; z-index: 1000; opacity: 0; cursor: pointer; right: 0; top: 0; height: 100%; font-size: 24px; width: 100%; }

.removeBtn {margin:1px;font-size:0px;background-image:url(../images/remove-button.gif);background-repeat:no-repeat;background-color:transparent;border:none;width:64px;height:20px;cursor:pointer;padding:0px;}
.editBtn {margin:1px;font-size:0px;background-image:url(../images/edit-button.gif);background-repeat:no-repeat;background-color:transparent;border:none;width:41px;height:20px;cursor:pointer;padding:0px;}


.tabContainer {overflow:hidden;background-color:var(--dark-blue); padding:5px 15px 0 5px; overflow-x: auto; display: flex; }
.tabContainer a {position:relative; display:block; padding:15px 50px 15px 15px; margin: 0 0 16px 15px; font-size:16px; line-height:16px; color:var(--primary-font-color); background-color:var(--white);float:left;text-align:center;text-decoration:none;background-repeat:no-repeat; background-position: right 10px center; border-radius:50px; }
.tabContainer a.completed { background-color:transparent; color:var(--white) !important;  border:solid 2px var(--dark-grey); background-image:url(../images/checkmark-grey.svg); background-position: right 15px center; }
.tabContainer a.required { background-color:var(--white); border:solid 2px var(--white); background-image:url(../images/exclamation.svg); }
.tabContainer a.suggested { background-color:var(--white); background-image:url(../images/lightbulb.svg); }
.tabContainer a.active { border-radius:6px 6px 0px 0px; border-left:solid 0px transparent; border-right:solid 0px transparent; }
.tabContainer a.active::after { content:''; position:absolute; bottom:-20px; left:0; width:100%; height:20px; background-color:var(--white); }


.existing-pdt .sorted-table tbody tr td:first-child { display: block; font-size: 20px; line-height: 27px; font-weight: 400; }
.existing-pdt .sorted-table tbody tr { padding:20px; }
.existing-pdt .sorted-table tbody tr td { padding:0; }
.sorted-table tbody tr.odd td { background-color:transparent; }

#immunizations { margin-bottom:25px; }
#immunizations table thead { display:none; }
#immunizations * { border:none !important;  }
#immunizations table, #immunizations thead, #immunizations tbody, #immunizations table tr, #immunizations table td { display:block; }
#immunizations table tr { display:flex; justify-content: space-between; align-items: center; width:100%; background-color:var(--grey); border-radius:10px; }
#immunizations table tr td { padding:10px; }
#immunizations table tr td .pdt-button { margin-bottom:0; }

.contactbox { margin-bottom:25px; border:2px solid var(--blue); border-radius:10px; }
.contactbox .contactboxhead { position:relative; padding: 10px 10px 10px 60px; color:var(--white); background-color:var(--blue); border-radius: 7px 7px 0 0; }
.contactbox .contactboxhead::before { content:''; position:absolute; top:8px; left:10px; width:32px; height:32px; background-image:url(../images/exclamation.svg); background-repeat:no-repeat; background-position:0 0; background-size:32px; border:solid 2px var(--white); border-radius:50px; }
.contactbox .contactboxhead p { margin:0 !important; font-size:14px; line-height:19px; }
.contactbox .contactboxbody { padding:20px; font-size:14px; line-height:19px; }
.contactbox .contactboxbody .twocols { max-width:410px; width:100%; margin:0 auto 20px auto; }
.contactbox .contactboxbody p { display:block; max-width:410px; width:100%; margin:0 auto !important; font-size:14px; line-height:19px; }

.twocols { display:flex; justify-content: space-between; }
.twocols div { flex:0 0 50%; }

#notification-message {display:none;}

.onecolsblockquote {display:flex;justify-content: space-between;flex-wrap: wrap;padding:0 !important;}
.onecolsblockquote blockquote { flex:0 0 100%;  margin:10px 0; }
.onecolsblockquote blockquote > label { display:flex !important; align-items: center; height:100%; }

.twocolsblockquote { display:flex; justify-content: space-between; flex-wrap: wrap;  padding:0 !important;}
.twocolsblockquote blockquote { flex:0 0 50%;  margin:10px 0; }
.twocolsblockquote blockquote > label { display:flex !important; align-items: center; height:100%; }

.greycontentbox { margin-bottom:25px; padding: 15px 30px; border-radius: 10px; background-color:var(--grey); }
.greycontentbox ul, .greycontentbox ol { margin-left:20px; }
.greycontentbox p, .greycontentbox li { font-size:14px; line-height:19px; }

.orangebox { padding:10px; margin:0 -30px !important; background-color:var(--yellow); border-radius:0 5px 5px 0; border-left:solid 9px #808285; }

.admin .sorted-table { border:none; }
.admin .sorted-table *, .contentwidth.admin table td  { border:none; }
.admin .sorted-table thead tr th.header { background-image:none; }
.admin .sorted-table thead tr { background:none; }
.admin .sorted-table thead tr th {  background-color:var(--grey); }
.admin .sorted-table thead tr th:first-child { border-radius:10px 0 0 0; }
.admin .sorted-table thead tr th:last-child { border-radius:0 10px 0 0; }
.admin .sorted-table tr th, .admin .sorted-table tr td { padding:10px 15px; font-size:14px; line-height:19px; }
.admin .sorted-table tr td { position:relative; border-bottom:solid 2px var(--grey); }

@media screen and (max-width: 1180px) {
    .content-heading { background-size:50vw; }
}

@media screen and (max-width: 980px) {
    .content-heading { background-size:calc(100% - 80px); background-position: center top 25px; }
    form.planformmain fieldset > div { flex:0 0 100%; }
    #wrapper #content .content-heading.planners .contentwidth div { width:100%; padding-top: 40vw; }
    #wrapper #content .content-heading.planners h2 { font-size:30px; line-height:40px; }
    header .header-bottom .header-nav {  position: absolute; top:10px; right:0; }
    header .header-bottom .header-nav .ocasp-admin .ocasp-admin-select { width: 34px; height: 34px; box-sizing: border-box; padding: 0; background-position: center center; border-color:var(--grey); }
    header .header-bottom .header-nav .ocasp-admin.active .ocasp-admin-select { background-image:url(../images/x.svg); background-size:20px; }
    header .header-bottom .header-nav .ocasp-admin .ocasp-admin-select span { display:none; }
    body.menuopen { overflow: hidden; }
    #loggedin { position:fixed; top: 108px; z-index: 5000; height:calc(100vh - 108px); background-color:var(--light-grey); border-radius: 0; }
    #loggedin #loggedinas { display:block; padding-right:10px; font-weight:700; color:var(--primary-font-color); }
    #loggedin #loggedinid { padding-left:10px; }
    .m2cols { display:flex; justify-content: space-between; width: 100%; max-width: 358px; margin: 25px auto; }
    #loggedin #loggedinbutton { text-align: center; }
    #loggedin #loggedinbutton input { max-width: 358px; min-width:180px; width:100%; cursor:pointer; margin-bottom:10px; padding: 10px 20px; font-family: var(--primary-font-family); font-size:16px; line-height:16px; font-weight:700; color:var(--primary-font-color); background-color:var(--white); border:solid 2px var(--white); border-radius:50px; transition:var(--transition); text-decoration:none !important; }
    #loggedin #loggedinbutton input:hover {  border-color:var(--red); }
    .international-sos .columns { flex-wrap:wrap; }
    .international-sos .columns div { flex: 0 0 100%; }
    .international-sos .columns div:first-child { margin-bottom:25px; }
    .planners-policy { padding-top:25px; }
    #wrapper #content .planners-policy p a.policy-button { color:var(--red); border: none; }
    #wrapper #content .planners-policy p a.policy-button:hover { background-color:transparent; color:var(--red); text-decoration: underline; }

    body.infopop { overflow: hidden; }
    #hoverinfopop, .hoverinfopop { max-width: 100%; height: 100vh; border-radius:0; }
    .hoverinfopop .hoverinfopopTitle { border-radius:0; }

    .bluebox.existing .existing-record { flex:0 0 100%; }

    .twocolsblockquote blockquote { flex:0 0 100%; }

    .greybox .sorted-table tbody tr { flex:0 0 100%; }

    .hashoverinfo .hoverinfo { right: -36px; }

    footer .footer-top .contentwidth { flex-wrap:wrap; text-align: center; }
    footer .footer-logo { flex:0 0 100%; padding:0 40px 25px 40px; }
    footer .footer-text { flex:0 0 100%; padding:0 40px; }
    footer .footer-bottom .footer-text { padding-left:40px; }
}

@media screen and (max-width: 480px) {
    header .header-bottom .header-title { max-width: 280px; }
}