/* App header - only visible when on the actual app form, not on any of the general pages like default.aspx, delete.aspx, etc */
#appheader
{
    width:100%;
    background-image: url("../../../images/border-solid.png");
    background-position: left bottom;
    background-repeat: repeat-x;
}
#appheader #appheaderinner
{
    margin:0 auto;
    padding:4px 0;
    width:90%;
}
#appheader #appheaderinner > div
{
    height:30px;
    border-top:3px solid #fff;
    border-bottom:3px solid #fff;
    padding:2px 0;
}

#appheader #appheaderref
{
    float:left;
    min-width:1px;
    background-image: url("../../../images/border-solid.png");
    background-position: right top;
    background-repeat: repeat-y;
}
#appheader #appheaderstep,
#appheader #appheaderhelp
{
    float:right;
    min-width:1px;
    background-image: url("../../../images/border-solid.png");
    background-position: left top;
    background-repeat: repeat-y;
    transition: border-bottom 0.2s ease;
}
#appheader #appheadertitleinner
{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    padding:0 10px;
}

#appheader #appheaderinner a,
#appheader #appheaderinner .appheadertext
{
    text-decoration:none;
    padding:0 10px;
    display:inline-block;
}
#appheader #appheaderinner #appheaderref .appheadertext
{
    padding-left:0;
}
#appheader #appheaderinner #appheaderhelp .appheadertext
{
    padding-right:0;
}
#appheader #appheaderhelp:hover
{
    border-bottom:3px solid #fff;
}
#appheader.showall,
#appheader.showall #appheaderinner > div
{
    height:auto;
    min-height:30px;
}
#appheader.showall #appheadertitleinner
{
    white-space:normal;
}


/* Main area */
#main
{
    width:100%;
    clear:both;
}
#maininner
{
    margin: 0 auto;
}


/* Main content area */
#maincontent
{
    padding-top: 40px;
}
#maincontent #maincontentmain
{
    float:left;
    width:70%;
    padding-right:20px;
    padding-bottom:30px;
}
#maincontent #maincontentmain a
{
    color: #d42b1e;
    border-bottom: 0.0625rem solid #ccc;
    padding-bottom: 0.0625rem;
    transition: border-color 0.15s ease-out 0s;
}
#maincontent #maincontentmain a:hover
{
    color: #000;
    border-bottom-color: #959595;
}
/* For CSS buttons within the content */
#maincontent #maincontentmain .cssbutton a
{
    border-bottom: 0;
    padding-bottom: 4px;
}
#maincontentwidgets
{
    float:left;
    width:30%;
}
#maincontentend
{
    clear:both;
}


/* If full width (i.e. there are no widgets) */
#maincontent #maincontentmain.mainfullwidth
{
    width:100%;
}
#maincontent #maincontentwidgets.mainfullwidth
{
    display:none;
}

h1
{
    padding-bottom: 20px;
}


/* Referee tabs */
#maincontent #maincontentmain .vmOnlineRefScreen a {
    border-bottom:0;
}



/* Application summary table (don't confuse with application summary grid) */
.appsummarytable
{
    display:table;
}
.appsummarytable > div
{
    display:table-row;
}
.appsummarytable > div > div
{
    display:table-cell;
    padding:4px 8px 4px 0;
}
.appsummarytable > div > div:first-child
{
    font-weight:bold;
    white-space:nowrap;
}



/* Submitted applications */
.submittedapps
{
    display:table;
    width:100%;
}
.submittedapps .submittedappsheader,
.submittedapps .submittedappsrow,
.submittedapps .submittedappssubrow,
.submittedapps .submittedappspooloffer
{
    display:table-row;
}
.submittedapps .submittedappsheader
{
    background-color:#E8E8E8;
    font-weight:700;
    white-space:nowrap;
}
.submittedapps .submittedappsheader > div
{
    display:table-cell;
    padding:5px;
    width:90px;
    border-bottom:1px solid #d0d0d0;
}
.submittedapps .submittedappsrow > div,
.submittedapps .submittedappspooloffer > div
{
    border-bottom:1px solid #d0d0d0;
    width:90px;
    white-space:nowrap;
}
.submittedapps .submittedappsheader > div:nth-child(2),
.submittedapps .submittedappsrow > div:nth-child(2),
.submittedapps .submittedappspooloffer > div:nth-child(2)
{
    width:auto;
    white-space:normal;
}
.submittedapps .submittedappsrow:nth-child(odd)
{
    background-color: #f0f0f0;
}
.submittedapps .submittedappssubrow
{
    display:table-cell;
}
.submittedapps .submittedappssubrow > div
{
    padding:5px;
}
.submittedapps .submittedappssubtitle,
.submittedapps .submittedappsextratext
{   /* Not visible on full grid */
    display:none;
}



/* Summary Grid Widget */
#appsummarygrid
{
    display:table;
    width:100%;
}
#appsummarygrid > div
{
    display:table-row;
}
#appsummarygrid > div > div
{
    display:table-cell;
    padding:10px 4px;
    border-bottom:1px dotted #888;
}
#appsummarygrid > div:last-child > div
{
    border-bottom:0;
}
#appsummarygrid > div > div:nth-child(2n+1)
{
    width:1%;
    text-align:center;
}
#appsummarygrid .current,
#appsummarygrid .current a
{
    color:#cd291d;
}


/* Save Status */
.formattedcontrols .savestatuscontainer
{
    position:relative;
}
.formattedcontrols .savestatus
{
    display:none;
    position:absolute;
    bottom:5px;
    right:20px;
    color:#E00;
    font-size:0.9em;
    padding:2px;
    background-color: rgba(255, 255, 255, 0.75);
}


/* Grid table */
.gridtable
{
    width:100%;
}
.gridtable thead tr
{
    font-weight:bold;
    text-align:left;
}
.gridtable tbody tr:nth-child(odd)
{
    background-color:#f0f0f0;
}

/* Add/Edit div grid */
.editgrid
{
    display:table;
    width:100%;
    margin:10px 0;
}
.editgridheader
{
    display:table-header-group;
    font-weight:bold;
}
.editgridbody
{
    display:table-row-group;
}
.editgridheader > div,
.editgridbody > div
{
    display:table-row;
}
.editgridbody > div:nth-child(odd)
{
    background-color:#f0f0f0;
}
.editgridheader > div > div,
.editgridbody > div > div
{
    display:table-cell;
    padding:5px 10px 5px 5px;
}
.editgridheader .editgridminwidth,
.editgridbody .editgridoptions
{
    white-space:nowrap;
    width:1%;
}
.editgridbody .editgridcenter
{
    text-align:center;
}
.editgridbody .editgridoptions a
{
    border-bottom:0 !important;
}
.editgridbody .editgridoptions a:not(:last-child)
{
    margin-right:5px;
}
.editgridbody > div > div > span:first-child
{
    display:none;
}



/* Statements previous jobs */
.prevanswerjobs
{
    display:table;
    width:100%;
}
.prevanswerjobs .prevanswerjobsheader
{
    display:table-row;
    font-weight:bold;
}
.prevanswerjobs .prevanswerjobsrow
{
    display:table-row;
}
.prevanswerjobs .prevanswerjobsheader > div,
.prevanswerjobs .prevanswerjobsrow > div
{
    display:table-cell;
    padding:4px;
}
.prevanswerjobs .prevanswerjobsrow:nth-child(even)
{
    background-color:#f0f0f0;
}
.prevanswerjobs .prevanswerjobsubtitle
{
    display:none;
}
/* Statement previous answers */
.prevansweranswers > div
{
    padding:4px;
}
.prevansweranswers > div p:first-child
{
    margin-top:0;
}
.prevansweranswers > div p:last-child
{
    margin-bottom:0;
}
.prevansweranswers > div:nth-child(odd)
{
    background-color:#f0f0f0;
}



/* Application form printing header */
body.appPrintPopup
{
	font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size: 8pt;
	line-height: 18px;
	margin-top: 0px;
	padding: 0px;
	background: #fff;
}
body.appPrintPopup .printLink, body.appPrintPopup .downloadLink
{
	margin:0 10px;
	float:left;
	height:20px;
	white-space:nowrap;
	background-image:url(../../../../images/shared/printer.gif);
	background-repeat:no-repeat;
	background-position:left center;
}
body.appPrintPopup .downloadLink
{
	background-image:url(../../../../images/shared/download.gif);
}
body.appPrintPopup .printLink a, body.appPrintPopup .downloadLink a
{
	padding-left:22px;
}
body.appPrintPopup .closeLink {
    margin:0 10px;
    float:right;
    height:20px;
    white-space:nowrap;
}



/* jquery dialog header used for session timeout dialog */
.ui-widget-header
{
    background-color:#b5121b !important;
}




/* Medium - main takes up entire width, widgets takeup 50% */
@media screen and (max-width:1024px)
{
    /* Take up entire width */
    #maincontent #maincontentmain
    {
        width:100%;
        padding-right:0;
    }

    /* Take up entire width, but now padding is added */
    #maincontent #maincontentwidgets
    {
        width:100%;
        padding-top:20px;
    }
    
    /* Individual widgets now take up 50% of the room */
    #maincontent #maincontentwidgets .mainwidget
    {
        float:left;
        width:48%;
        padding-left:5%;
        padding-right:5%;
    }
    /* Odd (left side) needs to clear */
    #maincontent #maincontentwidgets .mainwidget:nth-child(odd)
    {
        clear:both;
    }
    /* Even (right side) */
    #maincontent #maincontentwidgets .mainwidget:nth-child(even)
    {
        float:right;
    }
}

/* Onboarding - Not wide enough for dual - also repeated in VM.css */
@media screen and (max-width:699px)
{
    /* Onboarding */
    .onboarddualcolumn
    {
        float:none;
        width:auto;
    }
}

/* Small - main takes up entire width, widgets take up entire width */
@media screen and (max-width:650px)
{
    #appheader #appheaderinner
    {
        width:100%;
        padding:4px 10px;
    }
    #appheader #appheaderstepprefix
    {
        display:none;
    }

    #main #maininner
    {
        width:100%;
    }

    #main #maincontent
    {
        float:none;
        left:0;
        padding: 20px 0 0;
        width:100%;
        background-image: none;
    }
    #main #maincontent #maincontentinner
    {
        margin-left:0;
        left:0;
        width: 90%;
        margin: 0 auto;
    }
    #main #maincontent #maincontentwidgets .mainwidget
    {
        float:left !important;
        width:100%;
        padding-left:9.09091%;
        padding-right:9.09091%;
    }

    h1
    {
        padding-bottom:10px;
    }
    
    /* Application summary table */
    .appsummarytable > div > div:first-child
    {
        white-space:normal;
    }
    
    
    /* Submitted apps - convert from grid to list */
    .submittedapps
    {
        display:block;
    }
    .submittedapps .submittedappsheader
    {
        display:none;
    }
    .submittedapps .submittedappsrow,
    .submittedapps .submittedappspooloffer
    {
        display:table;
        width:100%;
        border-bottom:1px solid #d0d0d0;
    }
    .submittedapps .submittedappssubrow
    {
        display:table-row;
    }
    .submittedapps .submittedappsrow > div
    {
        border-bottom:0;
    }
    .submittedapps .submittedappssubtitle
    {
        display:table-cell;
        font-weight:bolder;
        white-space:nowrap;
        width:1%;
    }
    .submittedapps .submittedappsextratext
    {
        display:inline;
    }
    
    
    /* Statements previous jobs */
    .prevanswerjobs .prevanswerjobsheader
    {
        display:none;
    }    
    .prevanswerjobs .prevanswerjobsrow > div
    {
        display:table-row;
    }
    .prevanswerjobs .prevanswerjobsrow > div > div
    {
        padding:2px;
    }
    .prevanswerjobs .prevanswerjobsubtitle
    {
        display:table-cell;
        font-weight:bold;
        padding-right:10px;
    }
}

/* Document signing */
#docsignitems
{
    display:table;
    width:100%;
}
#docsignitems #docsignitemsheader
{
    display:table-row;
    background-color:#E8E8E8;
    font-weight:700;
    white-space:nowrap;
}
#docsignitems .docsignitemsrow
{
    display:table-row;
}
#docsignitems .docsignitemsrow:nth-child(odd)
{
    background-color: #f0f0f0;
}
#docsignitems #docsignitemsheader > div,
#docsignitems .docsignitemsrow > div
{
    display:table-cell;
    padding:5px;
}
#docsignitems .docsignitemsrow > div > div:first-child
{
    display:none;
}
   
@media screen and (max-width:699px)
{
    /* Doc signing */
    #docsignitems
    {
        display:block;
    }
    #docsignitems #docsignitemsheader
    {
        display:none;
    }
    #docsignitems .docsignitemsrow
    {
        display:table;
        width:100%;
        border-bottom:1px solid #d0d0d0;
    }
    #docsignitems .docsignitemsrow > div
    {
        display:table-row;
    }
    #docsignitems .docsignitemsrow > div > div
    {
        display:table-cell;
        padding:4px;
    }
    #docsignitems .docsignitemsrow > div > div:first-child
    {
        display:table-cell;
        font-weight:bold;
        white-space:nowrap;
        width:1%;
    }
}



/* My Recruitment page */
#myRecTitle
{
    display:table;
    width:100%;
    margin-bottom:10px;
}
#myRecTitle #myRecTitleHeader
{
    display:table-cell;
    vertical-align:middle;
}
#myRecTitle #myRecTitleAccount
{
    display:table-cell;
    width:1%;
    text-align:center;
    white-space:nowrap;
}
#myRecTitle #myRecTitleAccount i
{
    font-size:2em;
}
#myRecOuter
{
    display:-webkit-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    flex-wrap:wrap;
    margin:10px -10px 0;
}
#myRecOuter .myRecItem
{
    width:calc(33.3% - 20px);
    margin:0 10px 20px;
    border:1px solid #d8d8d8;
    box-shadow:5px 5px 10px rgba(0,0,0,.4);
    border-radius:5px;
}
#myRecOuter .myRecItem .myRecHeader
{
    font-size:1.2em;
    font-weight:bold;
    border-radius:2px 2px 0 0;
    background-color:#d8d8d8;
    padding:10px;
}
#myRecOuter .myRecItem .myRecHeader a
{
    display:table;
    width:100%;
}
#myRecOuter .myRecItem .myRecHeader .myRecHeaderIcon
{
    color:black;
    display:table-cell;
    width:1%;
    padding-right:10px;
}
#myRecOuter .myRecItem .myRecHeader .myRecHeaderText
{
    display:table-cell;
}
#myRecOuter .myRecItem .myRecHeader .myRecHeaderText .myRecHeaderNew
{
    float:right;
    color:#E00;
    font-size:0.8em;
    line-height:0.8em;
    padding-left:5px;
}
#myRecOuter .myRecItem .myRecContent
{
    padding:10px;
    height: calc(100% - 48px); /* Note, height set in javascript on resize */
}
#myRecOuter .myRecItem .myRecContent p
{
    margin:0;
    padding:5px 0;
    font-size:inherit;
}
#myRecOuter .myRecItem .myRecContent .myRecContentCenter
{
    text-align:center;
}
#myRecOuter .myRecItem .myRecContent .myRecContentMiddle
{
    position:relative;
    top:50%;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
}
#myRecOuter .myRecItem .myRecContent .myRecContentHighlight
{
    color:#E00 !important;
}
#myRecOuter .myRecItem .myRecContent .myRecContentIndent
{
    margin-left:20px;
}
#myRecOuter .myRecItem .myRecContent .myRecTextbox,
#myRecOuter .myRecItem .myRecContent .myRecButton
{
    display:inline-block;
    border:1px solid #d8d8d8;
    padding:5px;
    font-size:16px;
    line-height:16px;
    font-family:Arial; /*Replicating general textbox font*/
    margin:5px 0;
    height:30px;
}
#myRecOuter .myRecItem .myRecContent .myRecTextbox
{
    width:calc(100% - 50px);
    border-radius:5px 0 0 5px;
    background-color:#fff;
}
#myRecOuter .myRecItem .myRecContent .myRecButton
{
    width:50px;
    border-radius:0 5px 5px 0;
    background-color:#d8d8d8;
}
#myRecOuter .myRecItem .myRecContent .myRecLargeIcon
{
    font-size:2.5em;
}
#myRecOuter .myRecItem .myRecContent .myRecHourGlassContainer
{
    height:55px;
    line-height:45px;
}
#myRecOuter .myRecItem .myRecContent .myRecHourGlass
{
    animation: myRecHourglass 6s infinite;
    opacity:0;
}
#myRecOuter .myRecItem .myRecContent .myRecHourGlass:nth-child(2)
{
    animation-delay: 2s;
}
#myRecOuter .myRecItem .myRecContent .myRecHourGlass:nth-child(3)
{
    animation-delay: 4s;
}
#myRecTitle a,
#myRecOuter a
{
    color:#444 !important;
    border-bottom:0 !important;
}
#myRecTitle a:hover,
#myRecOuter a:hover
{
    color:#d42b1e !important;
}

@keyframes myRecHourglass
{
    0%,33% { opacity:1; }
    34%,100% { opacity:0; }
}

@media screen and (max-width:1000px)
{
    #myRecOuter .myRecItem
    {
        width:calc(50% - 20px);
    }
}

@media screen and (max-width:650px)
{
    #myRecOuter
    {
        margin-left:0;
        margin-right:0;
    }
    #myRecOuter .myRecItem
    {
        width:100%;
        margin-left:0;
        margin-right:0;
    }
}



#externalContractTable {
    display:table;
    width:100%;
}
#externalContractTable > div {
    display:table-row;
}
#externalContractTable > div:nth-child(odd) {
    background-color: #f0f0f0;
}
#externalContractTable > div:first-child {
    display:table-row;
    background-color:#E8E8E8;
    font-weight:700;
}
#externalContractTable > div > div {
    display:table-cell;
    vertical-align:top;
    padding:5px;
    border-bottom:1px solid #d0d0d0;
}
#externalContractTable > div > div:nth-child(4n+1) {
    width:1%;
    white-space:nowrap;
}
#externalContractTable > div > div:nth-child(3),
#externalContractTable > div > div:nth-child(4) {
    width:90px;
}
#externalContractTable > div > div > div:first-child {
    display:none;
}
.downloadStatus {
    display:none;
    color:#E00;
}

@media screen and (max-width:650px)
{
    #externalContractTable {
        display:block;
    }
    #externalContractTable > div {
        display:table;
        width:100%;
        border-bottom:1px solid #d0d0d0;
    }
    #externalContractTable > div:first-child {
        display:none;
    }
    #externalContractTable > div > div {
        display:table-row;
        padding:0;
    }
    #externalContractTable > div > div > div {
        display:table-cell;
        vertical-align:top;
        padding:5px;
    }
    #externalContractTable > div > div > div:first-child {
        font-weight:700;
        display:table-cell;
        white-space: nowrap;
        width: 1%;
    }

    /* Add/Edit div grid */
    .editgrid,
    .editgridbody,
    .editgridbody > div,
    .editgridbody > div > div
    {
        display:block;
        width:100%;
    }
    .editgridheader
    {
        display:none;
    }
    .editgridbody > div
    {
        position:relative;
        padding-right:5px;
    }
    .editgridbody > div > div:first-child
    {
        padding-right:55px;
    }
    .editgridbody .editgridoptions
    {
        position:absolute;
        top:0;
        right:0;
        width:unset;
    }
    .editgridbody .editgridcenter
    {
        text-align:left;
    }
    .editgridbody .editgridhidemobile
    {
        display:none;
    }
    .editgridbody > div:nth-child(odd)
    {
        background-color:#f0f0f0;
    }
    .editgridbody > div > div > span:first-child
    {
        display:inline-block;
        font-size:0.95em;
        font-style:italic;
        padding-right:5px;
    }
}