@import url("cssSh.min.css");

/* form stylee */

.button {
    margin: 10px auto;
    cursor: pointer;
}

.button, .ui-datepicker-trigger, .mainContent table a:link {
    background-color: #55585A;
    color: #fff;
    border: 1px solid #0c4a43;
    border-radius: 2px;
    letter-spacing: 0.8px;
    padding: 26px 32px;
    text-align: center;
    font-weight: 700;
    display: inline-block;
    /*min-width: 120px;*/
}

    .button:hover, .ui-datepicker-trigger:hover, .mainContent table a:hover {
        background-color: #0096C1;
        -moz-transition: background-color 0.3s ease-in 0s;
        -o-transition: background-color 0.3s ease-in 0s;
        -webkit-transition: background-color 0.3s ease-in 0s;
        transition: background-color 0.3s ease-in 0s;
    }


fieldset input.button:nth-of-type(1) {
    display: block;
    left: 0;
    position: relative;
    top: 100px;
}

fieldset input.button:nth-of-type(2) {
    display: block;
    left: 0;
    position: relative;
    top: -100px;
}

fieldset input.button:only-of-type {
    top: 0px;
}

.semanticNavigation input.button:nth-of-type(1) {
    top: 0px;
}

.semanticNavigation input.button:nth-of-type(2) {
    top: 0px;
}

.ui-datepicker-trigger {
    padding: 5px 10px;
    margin-left: 10px;
}

input.questionDatepicker[type="text"], #PermitStartDate {width: 80%;}

input[type="text"]:focus,select:focus
{
    border: 1px solid #00B4A0;
}

.red {
    color: #ff0000;
}

.title {
    display: block;
    font-size: 1.4em;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 20px;

    color: #263140;
}

.field-validation-error {
    color: #ff0000;
    display: block;
    font-weight: 700;
    font-size: 1.2em;
}

.permittype, .period, .properties {
    border: 1px solid #00B4A0;
    background-color: #55585A;
    width: 100%;
    max-height: 50vh;
    overflow: auto;
    margin-bottom: 10px;
}

    .permittype div, .period div, .properties div {
        padding: 10px 10px;
        cursor: pointer;
    }

        .permittype div:nth-of-type(odd), .period div:nth-of-type(odd), .properties div:nth-of-type(odd) {
            border-top: 1px solid #606669;
            border-bottom: 1px solid #606669;
        }


        .permittype div *, .period div *, .properties div * {
            color: #fff;
            display: block;
        }

        .selected-row, .permittype div:hover,
        .period div:hover, .properties div:hover {
            background-color: #138fb2;
        }

.selected-row {
    background-color: #0096C1;
    color: #fff;
    font-weight: 700;
}

.formlabel {
    display: block;
    font-weight: 700;
}

input, select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
}

select{padding: 10px 36px 10px 10px;}

select
{
    min-width: 190px;
    background-image: url(../images/select_bg.png);
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
}

select::-ms-expand {
    display: none;
}

#PermitUploadedProofDocument, #questionsForm select{min-width:260px}

input[type="checkbox"]{
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 2em;
    height: 2em;
}

/* For -moz style the chebox background to indicate checked */
input[type=checkbox]:checked{

    background-image: url(../images/check-icon.png);
    background-size: 100%;
}

select:focus {
    background-image: url(../images/select_bg-focus.png);
}


.field_padding {
    padding: 10px;
}

.question_prompt .field_padding{padding-left: 0px;}

.detlabel {
    margin-bottom: 10px;
}

.labeltitle {
    font-weight: bold;
    width: auto;
    min-width: 140px;
    border-bottom: 1px solid #efefef;
    display: inline-block;
}

    .labeltitle + label, .inputDisplay {
        font-weight: normal;
        display: inline-block;
    }

.inputDisplay {
    padding-top: 5px; 
}

.inputDisplay label{font-weight: normal;}

/* Default table styling */
.mainContent tr:nth-of-type(odd) { 
    background: #eee; 
}
.mainContent th { 
    background: #55585a; 
    color: white; 
    font-weight: bold; 
}
.mainContent td, .mainContent th { 
    padding: 6px; 
    border: 1px solid #0c4a43; 
    text-align: left; 
    vertical-align: top;
}

.mainContent table
{
    margin-bottom: 20px;
}


.mainContent table a:link {
    padding: 10px 20px;
    border: 0px solid #fff;
}

.mainContent table a:visited {
    color: #999;
}

.info:link {
    width: 15px;
    height: 15px;
    display: block;
    margin-left: 10px;
    border: 0;
}

.renewal_box {
    margin-top: 10px;
}


.homeOptions {
    width: 240px;
    height: 120px;
    border-radius: 8px;
}

.homeOptions img {
    margin-top: 5px;
}

.homeOptions a:link, .homeOptions a:hover, .homeOptions a {
    color: #fff;
    border: 0;
    background: transparent;
}

.homeOptions:nth-of-type(1) {
    background-color: #f79319;
}

.homeOptions:nth-of-type(2) {
    background-color: #bbbbbb;
}

.homeOptions:nth-of-type(3) {
    background-color: #93c0ca;
}

.homeOptions:nth-of-type(4) {
    background-color: #867ba1;
}

.homeOptions:nth-of-type(5) {
    background-color: #ce9b3f;
}

.semanticNavigation div {
    width: 100%;
}

.question_prompt {
    border-bottom: 1px solid #efefef;
}

.qtext{line-height: 1.6em;}

#Confirm + input + label {
    display: inline;
}

.ctaxInputWrapper  label{color: #444;}

label[for="DataProtectionConfirmation"]{display: inline;}

.mainContent ul{margin: 5px 0}
.mainContent li{list-style:none;}

/* Global Overrides */
@-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }
@-moz-keyframes fadeIn {  0% { opacity:0; }  100% { opacity:1; } }
@keyframes fadeIn {  0% { opacity:0; } 100% { opacity:1; } }
.fadeIn {background-color: #0096C1;}
.tooltipIcon {padding: 0 10px 0 10px;}

.newRenderedContent .formlabel{border-bottom: 1px solid #5ec5e2; color: #333;}
.newRenderedContent select {border: 1px solid #7792b7;}

.newRenderedContent .field-validation-error{font-size: 1em}

.ui-widget-content{
    font-family: Open Sans,sans-serif;
    font-size: 0.9em;
    font-weight: normal;
    background-color:#0096C1}

.ui-dialog-titlebar{padding: 4px; background-color: rgba(206, 206, 206, 0.4); color: #000}
.ui-widget-header{font-weight: normal;}
.ui-dialog-content{
    background: rgba(38, 49, 64, 0.7); padding: 10px; 
}
.ui-dialog-content p{color: #fff;}

.ui-dialog-titlebar .ui-dialog-titlebar-close {float: right; background-image: url(../images/close-dialog.png); background-position: 0 0; background-repeat: no-repeat; height: 20px;
    width: 20px;}

/* Move this somewhere else */

.reorientate {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Safari */
    transform: rotate(180deg);
}

    .content-fullwidth {
        padding: 0 !important;
    }

/* End Move this somewhere else */

.lblVRMDisplay {
    padding-left: 28px;
}


@media only screen and (max-width:520px) {

    /* Force table to not be like tables anymore */
	.mainContent table, .mainContent thead, .mainContent tbody, .mainContent th, .mainContent td, .mainContent tr { 
		display: block; 
	}

    /* Hide table headers (but not display: none;, for accessibility) */
	.mainContent table th { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.mainContent tr { border: 1px solid #0c4a43; }
	
	.mainContent td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #0c4a43; 
		position: relative;
		padding-left: 50%; 
        overflow:hidden;
	}
	
	.mainContent td:before { 
		/* Now like a table header */
		position: absolute;color: #fff; height: 100%; width: 45%; left: 0;top: 0; padding: 6px; background-color: #55585a; white-space: nowrap;
	}

    /* Eventually this will be moved to the global stylesheet */

    /*
	Label the data for Permit Renewal Periods
	*/
	.mainContent #PermitPeriod td:nth-of-type(1):before { content: "Description"; }
	.mainContent #PermitPeriod td:nth-of-type(2):before { content: "Start date"; }
	.mainContent #PermitPeriod td:nth-of-type(3):before { content: "Expiry date"; }
    /*
	Label the data for Valid Areas
	*/
    .mainContent .valid-areas-tbl td:nth-of-type(1):before { content: "Valid Area / s"; }
    /*
	Label the data for Uploaded Documents
	*/
	.mainContent .uploaded-documents-tbl td:nth-of-type(1):before { content: "Document type";}
    .mainContent .uploaded-documents-tbl td:nth-of-type(2):before { content: "File name";}
    .mainContent .uploaded-documents-tbl td:nth-of-type(3):before { content: "File size (bytes)";}
    .mainContent .uploaded-documents-tbl td:nth-of-type(4):before { content: " ";}
    /*
	Label the data for vehicle
	*/
    .mainContent .app-vehicle-details-tbl td:nth-of-type(1):before { content: "VRM"; }
	.mainContent .app-vehicle-details-tbl td:nth-of-type(2):before { content: "Make"; }
	.mainContent .app-vehicle-details-tbl td:nth-of-type(3):before { content: "Model"; }
	.mainContent .app-vehicle-details-tbl td:nth-of-type(4):before { content: "Colour"; }
	.mainContent .app-vehicle-details-tbl td:nth-of-type(5):before { content: "Engine size";}
	.mainContent .app-vehicle-details-tbl td:nth-of-type(6):before { content: "Fuel type"; }
	.mainContent .app-vehicle-details-tbl td:nth-of-type(7):before { content: "Documents"; }
    .mainContent .app-vehicle-details-tbl td:nth-of-type(8):before { content: " "; }

    .mainContent .rnw-vehicle-details-tbl td:nth-of-type(1):before { content: "Make"; }
	.mainContent .rnw-vehicle-details-tbl td:nth-of-type(2):before { content: "Model"; }
	.mainContent .rnw-vehicle-details-tbl td:nth-of-type(3):before { content: "Colour"; }
    .mainContent .rnw-vehicle-details-tbl td:nth-of-type(4):before { content: "VRM"; }
	.mainContent .rnw-vehicle-details-tbl td:nth-of-type(5):before { content: "Engine size";}
	.mainContent .rnw-vehicle-details-tbl td:nth-of-type(6):before { content: "Fuel type"; }


}


@media only screen and (min-width:520px) {
    .permittype, .period, .properties {
        width: 50%;
    }

    #epMainContent > div, #epMainContent > fieldset
    {
        padding: 0px;
    }

    .formlabel {
        display: block;
        float: left;
        width: 40%;
        min-width: 240px;
        padding-bottom: 9px;
        border-bottom: 1px solid #ccc;
    }

        .formlabel + span {
            margin-left: 0px;
            width: 30%;
        }

    input, select {
        width: auto;
        padding: 5px;
    }

    select {padding: 5px 36px 5px 5px;}

    input[type="checkbox"]
    {
        width: 1.3em;
        height: 1.3em;
    }

    .field-validation-error {
        display: inline;
    }


    .button {
        width: auto;
    }

    .semanticNavigation div {
        width: auto;
    }

    fieldset input.button:nth-of-type(1) {
        display: inline;
        left: 0;
        /*position:;*/
        top: 0px;
    }

    fieldset input.button:nth-of-type(2) {
        display: inline;
        left: 0;
        position: relative;
        top: 0px;
    }

    .ui-datepicker-trigger
    {
        margin-top: 4px;
        margin-right: 4px;
        margin-bottom: 4px;
        margin-left: 4px;
        min-width: 30px;
    }
        
    .button, .mainContent table a:link {
        padding: 12px 16px;
    }

    .labeltitle {
        width: 30%;
        min-width: 240px;
    }

    /* Desktop table styling */
    .mainContent table { 
        width: 100%; 
        border-collapse: collapse; 
    }

    .mainContent table a:link, .mainContent table a:hover {
        background-color: transparent;
        color: #1a4968;
    }

    .mainContent table a:hover {
        text-decoration: underline;
    }

    /* Reduced line-heights and font-sizes for desktop to reduce scrolling on larger pages */

    .mainContent, .mainContent p{line-height: 1.3em; font-size: 1.3em;}

    .mainContent h1{line-height: 1.1em; font-size: 2em;}
    .startCustomText   {
        line-height: 1.1em;
        font-size: 1.3em;
		color:#444;
    }

 


     .uploadbox {
       
        padding: 4px !important;
    max-width: 500px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    
   
    }

    select {
        min-width: 170px;
    }

    .title {
        margin-bottom: 15px;
        margin-top: 5px;
    }

     /* End of Reduced.. */

    input.questionDatepicker[type="text"], #PermitStartDate
    {
        width: 200px;
    }

}

/* Override mobile styles */
@media only screen and (min-width:767px) {

    .homeOptions {
        height: 240px;
    }

    .homeOptions img {
        margin-top: 20px;
    }

}

/* Override mobile styles */
@media only screen and (min-width:1024px) {
    .mainContent td {
        line-height: 1em;
    }
}