/****************************************************************************************************************************/
/*  2 column fixed outer cols with flexible left                                                                            */
/*         used on the property lists                                                                                       */
/*     
    usage:
    <div class="container-2col">
            <div class="leftcol"> Your content here</div>
            <div class="rightcol"> your content here</div>
            <div style="clear:both"></div> 
    </div>
/*                                                                                                                          */
/*  <div style="clear:both"></div>                                                                                          */
/*  This makes container-2col include the rightcol height so the rightcol doesnt overflow the container                     */
/*                                                                                                                          */
/****************************************************************************************************************************/
.container-2col {
    padding-right: 0px;
    padding-left: 0px;
    display: block;
}

    .container-2col .leftcol {
        display: inline-block;
        /*margin-right:116px;*/
    }

    .container-2col .rightcol {
        display: inline-block;
        float: right;
        width: 110px;
        position: static;
        /*right:0;
    top:0;
   */
    }

/* for a phone, just stack the columns */
@media only screen and (max-width: 480px) {
    .container-2col .rightcol,
    .container-2col .leftcol {
        float: none;
        width: 100%;
    }
}


.subject .narrowhide,
.sold .narrowhide,
.for-sale .narrowhide {
    width: 0px;
    display: none;
}



.container-2col .left-label {
    width: 60px;
}

.subject .container-2col .left-label,
.sold .container-2col .left-label,
.for-sale .container-2col .left-label {
    width: 60px;
}

.container-2col .left-data {
    width: 160px;
}

.subject .container-2col .left-data,
.sold .container-2col .left-data,
.for-sale .container-2col .left-data {
    width: 160px;
}




/* width of an iPad */
@media only screen and (min-width: 1024px) {
    .container-2col .left-data {
        width: 160px;
    }
}

@media only screen and (min-width: 1210px) {

    .container-2col .left-label {
        width: 85px;
    }

    .container-2col .left-data {
        width: 260px;
    }
}



@media only screen and (min-width: 1380px) {
}

@media only screen and (min-width: 1520px) {
    .container-2col .left-data {
        width: 380px;
    }
}


/*************************************************************************************************/
/* 12 column responsive grid
/*
/* Based on the Bootstrap 12 column grid implementation, but this doesnt have gutters 
/*
/*************************************************************************************************/


.container-fluid {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-right: 0px;
    padding-left: 0px;
}



[class*="col-"] {
    box-sizing: border-box; /*This makes sure that the padding and border are included in the total width and height of the elements.*/
    float: left; /*All these columns should be floating to the left, and have a padding of 0 px:*/
}

/*The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other elements will be placed as if the columns does not exist. To prevent this, we will add a style that clears the flow:*/
.rg-row::after, .row::after {
    content: "";
    clear: both;
    display: block;
}




/* the default - 100% width. 
    As the screen size shrinks, the widths fall back to this 100% width for the element as they go out of scope of the media query */
[class*="col-"] {
    width: 100%;
    display: inline-block;
}


/* sometimes you dont want the widths of stuff to scale*/
.col-0 {
    width: 0;
}

.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}

/* sometimes you dont want the widths of stuff to scale*/
.col-fixed-tinyer, .control-fixed-tinyer {
    width: 20px !important;
    ;
}

.col-fixed-tiny, .control-fixed-tiny {
    width: 25px !important;
    ;
}

.col-fixed-smallest, .control-fixed-smallest {
    width: 40px !important;
    ;
}

.col-fixed-smaller, .control-fixed-smaller {
    width: 60px !important;
    ;
}

.col-fixed-small, .control-fixed-small {
    width: 85px !important;
    ;
}

.col-fixed-med, .control-fixed-med {
    width: 100px !important;
    ;
}

.col-fixed-standard, .control-fixed-std {
    width: 120px !important;
    ;
}

.col-fixed-large, .control-fixed-large {
    width: 150px !important;
    ;
}

.col-fixed-xlarge, .control-fixed-xlarge {
    width: 190px !important;
    ;
}


.col-fixed-xxlarge, .control-fixed-xxlarge {
    width: 218px !important;
}

.col-fixed-auto, .control-fixed-auto {
    width: auto;
}

.col-fixed-offset-xlarge, .control-fixed-offset-xlarge {
    width: calc(100% - 190px)
}

.col-fixed-offset-large, .control-fixed-offset-large {
    width: calc(100% - 150px)
}

.col-fixed-offset-med, .control-fixed-offset-med {
    width: calc(100% - 100px)
}

.col-fixed-offset-small, .control-fixed-offset-small {
    width: calc(100% - 85px)
}

.col-fixed-offset-smaller, .control-fixed-offset-smaller {
    width: calc(100% - 60px)
}




/*sometimes you either cant fit it or dont want to see it on a small screen*/
.control-hide, .control-show-xs, .control-show-xxs {
    display: none;
}

@media only screen and (max-width: 480px) {
    .control-hide-xxs {
        display: none;
    }

    .control-show-xxs { /* use for messages about why the controls are hidden due to screen size*/
        display: inline-block;
    }
}

@media only screen and (max-width: 767px) {
    .control-hide-xs {
        display: none;
    }

    .control-show-xs { /* use for messages about why the controls are hidden due to screen size*/
        display: inline-block;
    }
}






/* mobile  */
@media only screen and (min-width: 480px) {
    .col-xxs-0 {
        width: 0;
    }

    .col-xxs-1 {
        width: 8.33%;
    }

    .col-xxs-2 {
        width: 16.66%;
    }

    .col-xxs-3 {
        width: 25%;
    }

    .col-xxs-4 {
        width: 33.33%;
    }

    .col-xxs-5 {
        width: 41.66%;
    }

    .col-xxs-6 {
        width: 50%;
    }

    .col-xxs-7 {
        width: 58.33%;
    }

    .col-xxs-8 {
        width: 66.66%;
    }

    .col-xxs-9 {
        width: 75%;
    }

    .col-xxs-10 {
        width: 83.33%;
    }

    .col-xxs-11 {
        width: 91.66%;
    }

    .col-xxs-12 {
        width: 100%;
    }
}


/* width of an iPad portrait */
@media only screen and (min-width: 768px) {
    .col-xs-0 {
        width: 0;
    }

    .col-xs-1 {
        width: 8.33%;
    }

    .col-xs-2 {
        width: 16.66%;
    }

    .col-xs-3 {
        width: 25%;
    }

    .col-xs-4 {
        width: 33.33%;
    }

    .col-xs-5 {
        width: 41.66%;
    }

    .col-xs-6 {
        width: 50%;
    }

    .col-xs-7 {
        width: 58.33%;
    }

    .col-xs-8 {
        width: 66.66%;
    }

    .col-xs-9 {
        width: 75%;
    }

    .col-xs-10 {
        width: 83.33%;
    }

    .col-xs-11 {
        width: 91.66%;
    }

    .col-xs-12 {
        width: 100%;
    }

    /* sometimes you dont want the widths of stuff to scale */
    .col-xs-fixed-tiny, .control-xs-fixed-tiny {
        width: 25px;
    }

    .col-xs-fixed-smallest, .control-xs-fixed-smallest {
        width: 40px;
    }

    .col-xs-fixed-smaller, .control-xs-fixed-smaller {
        width: 60px;
    }

    .col-xs-fixed-small, .control-xs-fixed-small {
        width: 85px;
    }

    .col-xs-fixed-med, .control-xs-fixed-med {
        width: 100px;
    }

    .col-xs-fixed-standard, .control-xs-fixed-std {
        width: 120px;
    }

    .col-xs-fixed-large, .control-xs-fixed-large {
        width: 150px;
    }

    .col-xs-fixed-xlarge, .control-xs-fixed-xlarge {
        width: 190px;
    }

    .col-xs-fixed-xxlarge, .control-xs-fixed-xxlarge {
        width: 218px;
    }

    .col-xs-fixed-auto, .control-xs-fixed-auto {
        width: auto;
    }
}

/* width of an iPad landscape */
@media only screen and (min-width: 1024px) {
    .col-sm-0 {
        width: 0;
    }

    .col-sm-1 {
        width: 8.33%;
    }

    .col-sm-2 {
        width: 16.66%;
    }

    .col-sm-3 {
        width: 25%;
    }

    .col-sm-4 {
        width: 33.33%;
    }

    .col-sm-5 {
        width: 41.66%;
    }

    .col-sm-6 {
        width: 50%;
    }

    .col-sm-7 {
        width: 58.33%;
    }

    .col-sm-8 {
        width: 66.66%;
    }

    .col-sm-9 {
        width: 75%;
    }

    .col-sm-10 {
        width: 83.33%;
    }

    .col-sm-11 {
        width: 91.66%;
    }

    .col-sm-12 {
        width: 100%;
    }
}


@media only screen and (min-width: 1210px) {
    .col-md-0 {
        width: 0;
    }

    .col-md-1 {
        width: 8.33%;
    }

    .col-md-2 {
        width: 16.66%;
    }

    .col-md-3 {
        width: 25%;
    }

    .col-md-4 {
        width: 33.33%;
    }

    .col-md-5 {
        width: 41.66%;
    }

    .col-md-6 {
        width: 50%;
    }

    .col-md-7 {
        width: 58.33%;
    }

    .col-md-8 {
        width: 66.66%;
    }

    .col-md-9 {
        width: 75%;
    }

    .col-md-10 {
        width: 83.33%;
    }

    .col-md-11 {
        width: 91.66%;
    }

    .col-md-12 {
        width: 100%;
    }

    .col-md-offset-xlarge, .control-md-offset-xlarge {
        width: calc(100% - 190px)
    }

    .col-md-offset-large, .control-md-offset-large {
        width: calc(100% - 150px)
    }
}


@media only screen and (min-width: 1380px) {
    .col-lg-0 {
        width: 0;
    }

    .col-lg-1 {
        width: 8.33%;
    }

    .col-lg-2 {
        width: 16.66%;
    }

    .col-lg-3 {
        width: 25%;
    }

    .col-lg-4 {
        width: 33.33%;
    }

    .col-lg-5 {
        width: 41.66%;
    }

    .col-lg-6 {
        width: 50%;
    }

    .col-lg-7 {
        width: 58.33%;
    }

    .col-lg-8 {
        width: 66.66%;
    }

    .col-lg-9 {
        width: 75%;
    }

    .col-lg-10 {
        width: 83.33%;
    }

    .col-lg-11 {
        width: 91.66%;
    }

    .col-lg-12 {
        width: 100%;
    }
}

/* 1080px wide screen scaled to 125% */
@media only screen and (min-width: 1520px) {
    .col-xl-0 {
        width: 0;
    }

    .col-xl-1 {
        width: 8.33%;
    }

    .col-xl-2 {
        width: 16.66%;
    }

    .col-xl-3 {
        width: 25%;
    }

    .col-xl-4 {
        width: 33.33%;
    }

    .col-xl-5 {
        width: 41.66%;
    }

    .col-xl-6 {
        width: 50%;
    }

    .col-xl-7 {
        width: 58.33%;
    }

    .col-xl-8 {
        width: 66.66%;
    }

    .col-xl-9 {
        width: 75%;
    }

    .col-xl-10 {
        width: 83.33%;
    }

    .col-xl-11 {
        width: 91.66%;
    }

    .col-xl-12 {
        width: 100%;
    }
}




.inline-group-item {
    display: inline-block;
}



/*****************************
    css tab content
******************************/

.tab_container {
    padding-top: 2px;
}

    .tab_container .row {
        padding-left:0;
        padding-right:0;
        margin-left:0;
        margin-right:0;
        display:block;

    }


.tab_header section {
    display: none;
    border-top: 1px solid #bbb;
}


.tab_header > input {
    display: none;
}

.tab_header > label {
    display: inline-block;
    margin: 0 0 -1px;
    padding: 5px 15px;
    text-align: center;
    color: #eee;
    border: 1px solid transparent;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: #808285
}

    .tab_header > label a {
        color: #eee;
    }


        .tab_header > label:hover, .tab_header > label a:hover {
            color: #fff;
            cursor: pointer;
            text-decoration: none;
        }

.tab_header > input:checked + label {
    color: #555;
    border: 1px solid #bbb;
    border-bottom: 1px solid #E6E7E9;
    background-color: #e6e7e9
}


.tab1:checked ~ .content1,
.tab2:checked ~ .content2,
.tab3:checked ~ .content3,
.tab4:checked ~ .content4,
.tab5:checked ~ .content5,
.tab6:checked ~ .content6 {
    display: block;
}

/************************************************/



/************************************************/
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.control-right {
    float: right;
}


.rg-form-label {
    box-sizing: border-box;
    display: inline-block;
    text-wrap: none;
    overflow: hidden;
    padding: 0.25rem 0.25rem 0.25rem 0;
    vertical-align: middle
}



.rg-form-control.button {
    padding: 0.5rem 0.5rem;
    width: auto; /*IE11 doesnt understand unset*/
    width: unset;
}

.rg-form-control.button.wide, .wide {
    width: 100% !important;
}



.rg-form-control.button.large {
    font-weight: bold;
    font-size: 13px;
    padding: 0.5rem 1.5rem;
}




.rg-row .form-control,
.rg-form-control {
    width:auto;
    box-sizing: border-box;
    margin-bottom: 2px;
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
    line-height: 1.25;
    color: #333;
    background-color: #fff;
    background-image: none;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}

    .rg-form-control:focus {
        border: 1px solid #226699;
        /*box-shadow: 0 0 2px #4DAFFF inset;*/
        outline: 0;
    }

        .rg-form-control:focus[type=text] {
        }


    .rg-form-control.nobackground {
        background-color: rgba(0, 0, 0, 0); /*force transparent, otherwise it will inherit*/
        background-image: none;
        border-color: rgba(0, 0, 0, 0); /*force transparent, otherwise a 2px adjust on margins is required */
    }

.form-control.nobackground {
    background-color: rgba(0, 0, 0, 0);
    background-image: none;
    border-color: rgba(0, 0, 0, 0);
}



.input-group {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin-bottom: 4px;
}

.input-group-addon {
    padding: .5rem 1px;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25;
    color: #464a4c;
    text-align: center;
    background-color: #eceeef;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
}

.input-group > .rg-form-control {
    margin-bottom: 0px;
}



.content-numeric {
    text-align: right;
}




.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #777;
    border-radius: 10px;
}

/* Lists in tables, or anywhere space is at a premium */

.compactlist ul {
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

.compactlist li {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}