/****************************************************************************************************************************/
/*  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;
   */
}





.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:*/
.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-tiny,    .control-fixed-tiny         {width: 25px;}
.col-fixed-smallest, .control-fixed-smallest    {width: 40px;}
.col-fixed-smaller,  .control-fixed-smaller     {width: 60px;}
.col-fixed-small,    .control-fixed-small       {width: 85px;}
.col-fixed-med ,     .control-fixed-med         {width: 100px;}
.col-fixed-standard, .control-fixed-std         {width: 120px;}
.col-fixed-large,    .control-fixed-large       {width: 150px;}
.col-fixed-xlarge,  .control-fixed-xlarge       {width: 190px;}
.col-fixed-xxlarge,  .control-fixed-xxlarge     {width: 218px;}
.col-fixed-auto ,    .control-fixed-auto        {width: auto;}




/*sometimes you either cant fit it or dont want to see it on a small screen*/
@media only screen and (max-width: 767px) {
    .control-hide-smallest 
    {
        display: none;
    }
}



@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 */
@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%;}
}


@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%;}
}


@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 collapsable content 
    - because Microsoft Edge and IE dont support the <details> tag 

    requries this to work:
     <div class="collapsible">
            <input id="category-collapsible" type="checkbox" class="collapsible-toggle">
            <div class="collapsible-header"> 
                <label for="category-collapsible" class="collapsible-label form-label"><span class="expander"></span>Title here</label>
            </div>
            <div class="collapsible-content frame">
            ...
                content here
            ...

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

.collapsible {
    border: 1px solid #999;
}

.collapsible-header 
{
     
     background-color: #999;
     color: white;
     padding-bottom: 1px;
}


.collapsible-toggle
{
  display: none;
}

.collapsible-toggle + .collapsible-header  + .collapsible-content
{
    display:none;
}

.collapsible-toggle:checked + .collapsible-header  + .collapsible-content
{
    display:block;
}

.collapsible .collapsible-label
{
    font-size:13px;

    /* these two make the label strech across the entire width so you can click anywhere on the bar to expand it*/
    display: inline-block;
    width: 100%;
    
}

.collapsible .collapsible-label .expander
{
    color:white;
    border: 1px solid white;
    height:13px;
    width:13px;
    display: inline-block;
    font-size:12px;
    text-align:center;
    margin-right:2px;
}

/*find a checked toggle followed by a collapsable content that contains a child of collapsable label*/
.collapsible-toggle:checked + .collapsible-header > .collapsible-label .expander:before
{
    content:"-";
}

.collapsible-label .expander:before
{
    content:"+";
    font-size:12px;
}

.collapsible
{
/*    color:black;
    background-color:white;*/
}


/**********************************************************
    css max-height toggle
    trick is to:
    [1] make use of max-height:clear and max-height:Initial
    

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





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

.tab_container {
    padding-top: 2px;
}


.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:hover {
        color: #fff;
        cursor: pointer;
    }

.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;
}



.form-label {

  box-sizing: border-box;
  display: inline-block;
  text-wrap:none;
  overflow:hidden;
  padding: 0.25rem 0.25rem 0.25rem 0;

}



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

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



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



.form-control
{
  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;
}

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

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

}


.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 */  
}


.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 .75rem;
    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 > .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;
}