﻿/*form Styles*/
.contourPage h2 {
    text-align:center;
    font-size:16px;
}

.fieldLabel {
    display:none;
}

.checkbox .fieldLabel {
    display:inline-block!important;
}

input[type=text] {
    border: 1px solid #007cc3;
    padding: 10px 20px;
    display:inline-block;
    width:100%;
    margin:20px 0;
    text-align:center;
}

input[type="text"].green {
    border: 1px solid #77cbc4 !important;
    color: #77cbc4 !important;
}

input[type="text"].green::-webkit-input-placeholder {
    color: #77cbc4 !important;
}

    input[type="text"].green::-moz-placeholder { /* Firefox 19+ */
        color: #77cbc4 !important;
    }

    input[type="text"].green:-ms-input-placeholder { /* IE 10+ */
        color: #77cbc4 !important;
    }

    input[type="text"].green:-moz-placeholder { /* Firefox 18- */
        color: #77cbc4 !important;
    }

.contourNavigation input[type=submit] {
    color: #007cc3;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: transparent;
    border-radius: 0px;
    display: inline-block;
    box-shadow: none;
    -webkit-appearance: none !important;
    margin:0!important;
    padding:0!important;
}
    .raquo {
        display:inline-block;
    }

    .raquo:after {
        color: #007cc3;
        font-size: 24px;
        font-weight: bold;
        text-transform: uppercase;
        background-color: transparent;
        border-radius: 0px;
        content: "\00bb";
        height:30px;
        width:10px;
        display: inline-block;
        position:relative;
        top:3px;
        margin-left:5px;
    }

/*.checkbox div {
    display:inline-block;
    padding:20px;
}

.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
    position:relative;
    padding:20px;
    margin-left:0;
}*/

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus, select:focus {
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: 0;
    outline: thin dotted \9;
    /* IE6-9 */
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0px rgba(0,0,0,0);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0px rgba(0,0,0,0);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0px rgba(0,0,0,0);
}

select {
    width: 100%;
    border: 1px solid #007cc3;
    color: #007cc3;
    padding: 10px 20px;
    /* make arrow and background */
    background: linear-gradient(45deg, transparent 50%, #007cc3 50%), linear-gradient(135deg, #007cc3 50%, transparent 50%), linear-gradient(to right, #fff, #fff);
    background-position: calc(100% - 24px) calc(1em + 2px), calc(100% - 16px) calc(1em + 2px), 100% 0;
    background-size: 8px 8px, 8px 8px, 3em 3em;
    background-repeat: no-repeat;
    /* styling and reset */
    line-height: 1.5em;
    /* reset */
    border-radius: 0;
    margin: 20px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    cursor: pointer;
    -moz-appearance: none;
    text-align-last: center;
    -ms-text-align-last: center;
    text-align: -webkit-center;
    text-align: -moz-center;
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
}

    select option {
        text-align: -webkit-center;
    }

    select.green {
        border: 1px solid #77cbc4;
        color: #77cbc4;
        /* make arrow and background */
        background: linear-gradient(45deg, transparent 50%, #77cbc4 50%), linear-gradient(135deg, #77cbc4 50%, transparent 50%), linear-gradient(to right, #fff, #fff);
        background-position: calc(100% - 24px) calc(1em + 2px), calc(100% - 16px) calc(1em + 2px), 100% 0;
        background-size: 8px 8px, 8px 8px, 3em 3em;
        background-repeat: no-repeat;
    }

textarea {
    width: 100%;
    border: 1px solid #007cc3;
    padding: 10px 20px;
    border-radius: 0;
    margin: 20px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    cursor: pointer;
    -moz-appearance: none;
    text-align-last: center;
    min-height: 150px;
    resize: none;
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
    -ms-text-align-last: center;
    -moz-text-align-last: center;
    -webkit-text-align-last: center;
    text-align-last: center;
}

.checkbox {
    text-align:center;
    padding:20px 0;
}

.checkbox .fieldLabel {
    color:#007cc3;
    font-size:16px;
}

/* ROUNDED TWO */
.roundedTwo {
    width: 28px;
    height: 28px;
    background: #007cc3;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    position: relative;
    display:inline-block;
}

    .roundedTwo label {
        cursor: pointer;
        position: absolute;
        width: 20px;
        height: 20px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        left: 4px;
        top: 4px;
        background:#fff;
    }

        .roundedTwo label:after {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
            opacity: 0;
            content: '';
            position: absolute;
            width: 10px;
            height: 5px;
            background: transparent;
            top: 7px;
            left: 5px;
            border: 3px solid #007cc3;
            border-top: none;
            border-right: none;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .roundedTwo label:hover::after {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
            filter: alpha(opacity=30);
            opacity: 0.3;
        }

    .roundedTwo input[type=checkbox]:checked + label:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
    }


input[type=checkbox] {
    visibility: hidden;
    position:relative!important;
    margin-left:10px!important;
}


.gtp-select, .input-group .form-control:first-child {
    text-align-last: center;
    text-align: center;
    margin-top: 20px;
}

.gtp-submit {
    background: transparent !important;
    color: #007cc3 !important;
    border: medium none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 24px !important;
    text-transform: uppercase !important;
}

.gtp, .input-group, .gtp:focus {
    width: 100%;
    border: 1px solid #007cc3;
    color: #007cc3;
    padding: 10px 20px;
    border-radius: 0;
    margin-bottom: 20px;
    font-size: 18px;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    cursor: pointer;
    -moz-appearance: none;
}

.form-group .error {
    margin-top: 15px;
}

.input-group {
    padding: 3px 5px 3px 20px;
    margin: 20px 0 0;
}

.gtp-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #007cc3 !important;
    text-align: center;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
    display: table-cell;
    background: transparent !important;
    border: medium none !important;
}

.gtp-max {
    max-width: 450px;
}

label.error {
    color: red;
    font-size: 14px;
}

.input-switch {
    cursor: pointer;
    display: inline-block;
    margin-bottom: 20px;
}

.contourNavigation {
    text-align:center;
}

.field-validation-error {
    color:red;
    display:block;
    text-align:center;
}

.contourMessageOnSubmit {
    text-align:center;
}

/*Jquery UI Style overrides*/
.ui-selectmenu-icon {
    display:none!important;
}

.ui-selectmenu-button.ui-button {
    width: 100%;
    text-align: center !important;
    border: 1px solid #007cc3;
    color: #007cc3;
    padding: 10px 20px;
    /* make arrow and background */
    background: linear-gradient(45deg, transparent 50%, #007cc3 50%), linear-gradient(135deg, #007cc3 50%, transparent 50%), linear-gradient(to right, #fff, #fff);
    background-position: calc(100% - 24px) calc(1em + 2px), calc(100% - 16px) calc(1em + 2px), 100% 0;
    background-size: 8px 8px, 8px 8px, 3em 3em;
    background-repeat: no-repeat;
    /* styling and reset */
    line-height: 1.5em;
    /* reset */
    border-radius: 0;
    margin: 20px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    cursor: pointer;
   
}

.ui-menu .ui-menu-item {
    text-align:center;
}

.ui-grid-pager-row-count-picker .ui-selectmenu-button.ui-button {
    padding: 1px 2px 2px 2px;
    background-position: calc(100% - 24px) calc(8px), calc(100% - 16px) calc(8px), 100% 0;
}

@media only screen and (max-width:321px) {
    select {
        font-size:13px;
        padding:10px 40px;
    }

    .ui-grid-pager-panel {
        padding:0 10px!important;
    }

    .ui-grid-pager-row-count-picker .ui-selectmenu-button.ui-button {
        margin:5px 0!important;
    }

    .ui-grid-contents-wrapper {
        height:auto!important;
    }
}


@media only screen and (max-width:767px) {
    .contourNavigation input[type=submit] {
        width: auto !important;
    }
    .checkbox .fieldLabel {
        float: left;
        width: 80%;
        margin-bottom: 30px;
        text-align:left;
    }

    .roundedTwo {
        float:left;
    }

    .input-group {
        padding:3px 5px;
    }

    .date input[type=text] {
        padding:10px 0!important;
    }

}