/* 
    Created on : May 25, 2017, 8:38:30 PM
    Author     : Rudi Minty
*/

.heading {
    color: rgb(170, 15, 1);
    font: 25px "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
    text-align: center;
    padding-top: 55px;
}

.extraInfo{
    border: 1px solid lightblue ;
    padding : 2px 15px ;
    color: white;
    width: 90%;
    height : 80%;
    display :anything;
    font-size: 12px;
    color: grey;
    overflow :auto;
    max-height: 110px;
    margin-bottom: 5px; 
    font-weight: 400;    
}

.form-style-1 input[type=button]{
    -webkit-appearance: none; 
}

.extraInfo p {
    padding : 0px;
    margin : 0;
    text-align: center;  
}

body {
    overflow: auto;
    overflow-x: hidden;
    -webkit-appearance: none;
}

#clear-checklist{
    float : left;
}

.checklist-heading{
    font-weight: bold;    
    font-size: 20px;
    margin-top: 0px;
    color:  #00AACC;
}

#searchResultsDiv label{
    color:  #00AACC;
}

div#thankyou.heading {
    margin-top: 0px; 
    padding-top: 1px;
}

form>div.heading{
    font-weight: bold;
    font-size: 35px;
    position: relative ;
    display: block;
    vertical-align: top;
    border: 0px;
}
.inner-heading{
    font-weight: bold;    
    font-size: 25px;
    margin-top: 0px;
    color: #91160b;
}

.referenceNumber {
    font-weight: bold;    
    font-size: 40px;
    margin:10px auto;
    max-width: 350px;
}

.form-style-1 {
    margin:10px auto;
    max-width: 350px;
    padding: 20px 0px 10px 0px;
    font: 13px "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-se107
}
.form-style-1 li {
    padding: 0;
    display: block;
    list-style: none;
    margin: 10px 0 0 0;
}
.form-style-1 label{
    color: rgb(206, 18, 18);
    margin:0 0 3px 0;
    padding:0px;
    display:block;
    font-weight: bold;
}

.form-style-1 #introDescription {
    font-weight: bold;
    font-size: 20px;
    color: black;
    text-align: center;
}

.form-style-1 input[type=text], 
.form-style-1 input[type=date],
.form-style-1 input[type=datetime],
.form-style-1 input[type=number],
.form-style-1 input[type=search],
.form-style-1 input[type=time],
.form-style-1 input[type=url],
.form-style-1 input[type=email],
textarea, 
select{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border:1px solid #BEBEBE;
    padding: 7px;
    margin:0px;
    /*CHANGE 0.10s BASCK TO 0.30s*/
    -webkit-transition: all 0.10s ease-in-out;
    -moz-transition: all 0.10s ease-in-out;
    -ms-transition: all 0.10s ease-in-out;
    -o-transition: all 0.10s ease-in-out;
    outline: none;  
}
.form-style-1 input[type=text]:focus, 
.form-style-1 input[type=date]:focus,
.form-style-1 input[type=datetime]:focus,
.form-style-1 input[type=number]:focus,
.form-style-1 input[type=search]:focus,
.form-style-1 input[type=time]:focus,
.form-style-1 input[type=url]:focus,
.form-style-1 input[type=email]:focus,
.form-style-1 textarea:focus,
.form-style-1 select:focus{
    -moz-box-shadow: 0 0 8px #e99188; 
    -webkit-box-shadow: 0 0 8px #e99188; 
    box-shadow: 0 0 8px #e99188; 
    border: 1px solid #e99188; 
}
.form-style-1 .field-divided{
    width: 49%;
}

.gpscoords{
    width: 30%;
}

.final-back-button {
    text-align:center;
    align-items:center;
    width: 20%;
    display: inline;
    margin-bottom: 50px;
}

.backButtonContainer {
    text-align: center; 
    align-content: center; 
    width: 100%;
    margin-bottom: 20px;
}


hr {
    color: #e8e5e5;
}


/*For building checklist*/
#checklist-description {
    border: 1px solid lightblue ;
    padding : 2px 15px ;
    color: white;
    width: 91%;
    height : 80%;
    display :anything;
    font-size: 14px;
    color: black;
    overflow :auto;
    max-height: 150px;
    font-weight: 500; 
}

.question-box {
    border: 1px solid black;
    text-align: left;
    padding: 6px;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.response-box {
    border: 1px solid black;
    text-align: center;
    padding: 6px;
    width: 100%;
}
/*End of css for checklist*/

#incidentform {
    width:90vh;
    height: 90vh;
}

.form-style-1 .back-button {
    text-align:center;
    align-items:center;
    float: left;
    width: 20%;
    margin-right: 3%;
    margin-bottom: 50px;
}

.hidden {
    display: none;
}

.form-style-1 .submit-button {
    text-align: center;
    align-items:center;
    float: right;
    width: 20%;
}

.form-style-1 .submit-comment-button {
    text-align: center;
    align-items:center;
    float: right;
    width: 20%;
}

.form-style-1 .remove-att-button {
    text-align: center;
    align-items:center;
    float: left;
    width: 50%;
    max-width: 50%;
}

.form-style-1 #selectAtt-button{
    text-align: center;
    align-items:center;
    float: left;
    width: 50%;
    max-width: 50%;
    color:  #00AACC;
}

/*.form-style-1 #selectAttachments {
    text-align: center;
    align-items:center;
    float: left;
    width: 50%;
    max-width: 50%;
    color:  #00AACC;
}*/

.form-style-1 .submit-checklist-button {
    text-align: center;
    align-items:center;
    float: right;
    width: 20%;
}

.form-style-1 .toggle-checklist-button {
    text-align: center;
    align-items: center;
    width: 40%;
}

.form-style-1 .back-to-search-button {
    text-align: center;
    align-items:center;
    float: left;
    width: 40%;
}



.form-style-1 .clear-comments-button {
    text-align:center;
    align-items:center;
    right: 0;
    width: 20%;
}


#bodyContainer {
    position: relative;
    height: auto;
    bottom: 10px;

}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#footerContainer {
    left : 0;
    position: absolute;
    top: 0;
    margin: 0px;
    width: 100%;
    height: auto;

    border: 0px;
    padding-bottom:  0px;

    color: white;
    text-align: center;
    background-color: rgb(114, 8, 8);
    background: rgb(114, 8, 8);
    font: 13px "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;

}

#versionNumber {
    padding-right: 1%;
    text-align: right;
    color: white;
    font-weight: bold;
}

.form-style-1 .add-button {
    text-align: center;
    width: 40%;
    margin-left: 7%;
}

.homescreen-button {
    font-size: 18px;
    width: 300px;
    height: 100px;
    box-shadow: #BEBEBE;
}

#logoDivImage {
    align-items: center;
    text-align: center;
    align-self: center;
}

.form-style-1 .field-long{
    width: 100%;
}
.form-style-1 .field-select{
    width: 100%;
}
.form-style-1 .field-textarea{
    height: 200px;
}
.form-style-1 input[type=submit], .form-style-1 input[type=button]{
    background: rgb(114, 8, 8);
    padding: 8px 15px 8px 15px;
    border: none;
    color: #fff;
}
.form-style-1 input[type=submit]:hover, .form-style-1 input[type=button]:hover{
    background: #851600; 
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
}

.form-style-1 .required{
    color:red;
}
.parent-div {
    display: flex;
}
.option-div {
    display: inline-block;
}
.crop {
    width: 200px;
    height: 31.5px;
    overflow: hidden;
}

.crop img {
    width: 400px;
    height: 300px;
    margin: -120px 0 0 -100px;
}

[type=file] {
    position: absolute;
    filter: alpha(opacity=0);
    opacity: 0;
    width: 150px;
}

[type=file] + label {
    border: 1px solid #CCC;
    border-radius: 2px;
    text-align: left;
    padding: 5px;
    width: 150px;
    height: 20px;
    margin: 0;
    left: 0;
    position: relative;
}


#selectAtt-button {
    font: 14px/20px Arial;
}

#onlineImageDisclaimer{
    width: 100px;


}

#onlineDisclaimer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #BEBEBE;
    color: black;
    text-align: center;
    vertical-align: central;

    font: 13px "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;  
}

#disclaimerText{
    margin: 0;
    padding-top: 5px;
}


#versionNumber{
    color: black;
    font: 13px "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
    float:right;
}

#infoIcon{
    float:right;
}

.helper {
    font: 16px Tahoma,Helvetica,Arial,sans-serif;
    color: black
}

table {
    width: 100%;
    border-collapse: collapse;
}

.file {
    position: relative;
    background: linear-gradient(to right, rgb(0, 170, 204) 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition:all 1s ease;
}
.file.done {
    background: lightgreen;
}
.file a {
    display: block;
    position: relative;
    padding: 5px;
    color: black;
}

/*
        Targeted for devices with a minimum width of 600px
*/
@media (min-width: 600px) {
    .form-style-1 {
        max-width: 900px;
    }

    .inner-heading {
        text-align: center;
    }

    .form-style-1 #introDescription {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .form-style-1 label {
        margin-bottom: 10px;
    }

    .form-style-1 .field-divided {
        width: 100%;
    }

    .homescreen-button {
        width: 500px;
        height: 70px;
    }

    .back-button, .add-button, .submit-button {
        margin-top: 10px;
    }

    .field-label {
        text-align: start;
    }

    .extraInfo {
        width: 96%;
    }

    .form-style-1 .field-textarea {
        height: 350px;
    }

    #complainantAnonymous, #complainantIsSurvivor, #moreVictims, 
    #perpretratorAnonymous, #witnessOption, #sameAsComplainant, 
    #isComplainantLabel, #isComplainant, #witnessAnonymous, 
    #victimAnonymous {
        text-align: center;
    }

    .bear-dates, .bear-months, .bear-years {
        width: 90%;
        margin-bottom: 10px;
    }

    .bear-hours, .bear-minutes  {
        width: 60%;
        margin-bottom: 10px;
    }
}