/*
  Created: 10-07-2018
  Edited:  07-02-2020
  Version: 1.10 
*/

.label  
{
 display: block;
 width: 100%;
 margin: 0 0 5px 0;
}

.singleline 
{
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

/*
    Notes:
    - Allows the developer to mimic a select control
*/
/* ---------- Combobox Start ---------- */
.combobox 
{
 position: relative;
 box-sizing: border-box;
 width: 100%;
 height: 2.215rem;
 cursor: pointer;
}

.combobox > span 
{
 display: flex;
 align-items: center;  
 font-size: 0.95rem;
 width: 100%; /* Force the width full as we can select it anywhere not just on the text. */
 height: 100%; /* 31px; */
 padding: 0 1rem 0 1rem;
 line-height: 2.215rem; /* 31px; */
 text-overflow: ellipsis; /* to make it look nice put a ... on the end if the text is too large */
 white-space: nowrap; /* No word wrapping we only want a single line */
 overflow: hidden; /* Any overflow of the data must be hidden */
}

.combobox input 
{
 display: none;
 outline: 0;
 width: 100%;
 padding: 0.25rem 1rem;    
}

.combobox > span:after 
{
 font-family: FontAwesome;
 content: '\f078';
 position: absolute;
 right: 1rem;
}

.combobox span > .icon 
{
 content: '';
}

.combobox ul 
{
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: inherit;
 font-size: inherit;
}

ul.list-full-text-width 
{
 width: auto; /* to make the ul the full width of it's content, this will override text-overflow/overflow in li */
}

.combobox ul li 
{
 font-size: 0.95rem;
 padding: 0 1rem;
 height: 2.215rem; /* 31px; */
 line-height: 2.215rem; /* 31px; */
 box-sizing: border-box;
 display: block;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
 font-size: inherit;
}

.combobox ul.active 
{
 position: absolute;
 left: 0;
 top: inherit;
 margin-top: 0;
 z-index: 2;
 display: block;
 overflow: hidden;
 overflow-y: auto;
 max-height: 15.625rem; /* 250px; */
 width: 100%;
}

/*.combobox ul li:hover 
{
 background-color: rgb(19, 147, 0);
 color: #fff;
}*/

.combobox ul li.selected 
{
 font-weight: 700;
}
/* ---------- Combobox  End ---------- */


/*
    Notes:
    - Gets rid of the standard text box look and feel, as it looks so crap.
*/
/* ---------- Input Start ---------- */
#site input[type=text],
#site input[type=text]:focus,
#site input[type=password],
#site input[type=password]:focus,
#site input[type=number],
#site input[type=number]:focus,
#site input[type=email],
#site input[type=email]:focus 
{
 height: 2.215rem;
 width: 100%;
 outline: none;
 box-shadow: none;
 padding: 0 0.5rem;
 box-sizing: border-box;
}

/*#site input[readonly=readonly],
#site input[readonly=readonly]:focus 
{
 background-color: #BDBDBD;
 color: #fff;
}*/
/* ---------- Input  End ---------- */

/*
    Notes:
    - Users the original checkbox but reskins it. 
*/
/* ---------- Checkbox Start ---------- */
.checkbox-block 
{
 display: inline-flex;
 position: relative;
 align-content: center;
}

.checkbox-block input[type=checkbox] 
{
 visibility: hidden;
 margin: 0; 
}

.checkbox-block label 
{
 width: 1rem;
 height: 1rem;
 cursor: pointer;
 position: absolute;
 top: 0;
 left: 0;
 border-radius: 0.1875rem;
}

/*.checkbox-block input[type=checkbox]:checked + label 
{
 background-color: green;
}

.checkbox-block input[type=checkbox]:disabled + label 
{
 background-color: grey;
}*/

.checkbox-block label::after 
{
 content: '';
 width: 0.4375rem;
 height: 0.1875rem; 
 position: absolute;
 top: 0.25rem; 
 left: 0.1875rem;
 border: 0.1875rem solid rgb(252,255,244);
 border-top: none;
 border-right: none;
 background: transparent;
 opacity: 0;
 transform: rotate(-45deg);
}

.checkbox-block label:hover::after 
{
 opacity: 0.3;
}

.checkbox-block input[type=checkbox]:checked + label:after 
{
 opacity: 1;
}

.checkbox-inline 
{
 display: inline;
}

.checkbox-block > span
{
 margin-left: 0.375rem;
}

/* ---------- Checkbox  End ---------- */
/*
    Notes:
    - Users the original checkbox but reskins it. 
*/
/* ---------- Radio Start ---------- */
/* hide the original check box buttons */
#site input[type=radio]:checked,
#site input[type=radio]:not(:checked) 
{
 position: absolute;
 opacity: 0;
 pointer-events: none;
}

 /* create a new gap for the new checkbox */
#site input[type=radio]:checked + label,
#site input[type=radio]:not(:checked) + label 
{
 position: relative;
 padding-right: 0.3125rem;
 padding-left: 1.75rem; 
 cursor: pointer;
 line-height: 1.25rem;
 display: inline-block;
 font-size: 0.85rem;
}

/* create the initial background */
#site input[type=radio]:checked + label:before,
#site input[type=radio]:not(:checked) + label:before 
{
 content: '';
 position: absolute;
 left: 0.05rem;
 top: 0;
 width: 1.28rem;
 height: 1.28rem;
 border-radius: 100%;
}

/* create the centre part to the radion button */
#site input[type=radio]:checked + label:after,
#site input[type=radio]:not(:checked) + label:after 
{
 content: '';
 width: 0.625rem;
 height: 0.7rem;
 position: absolute;
 top: 0.15rem;
 left: 0.2rem;
 border-radius: 100%;
 -webkit-transition: all 0.2s ease;
 transition: all 0.2s ease;
}

/* if radio button is not check just hide it */
#site input[type=radio]:not(:checked) + label:after 
{
 opacity: 0;
 -webkit-transform: scale(0);
 transform: scale(0);
}

/* if radio button is checked show it */
#site input[type=radio]:checked + label:after 
{
 opacity: 1;
 -webkit-transform: scale(1);
 transform: scale(1);
}
/* ---------- Radio End ---------- */

/* ---------- TextArea Start ---------- */

#site textarea 
{
 font-family: "roboto", "segoe ui", "Tahoma";
 font-size: 1.1em;
 height: auto;
 box-sizing: border-box;
 padding: 4px !important;
 outline: none !important;
 box-shadow: none !important;
 width: 100%;
}

#site textarea.not-resizable 
{
 resize: none;
}

/* ---------- TextArea End ---------- */

/* ---------- Date Start ---------- */

#site div.datepicker 
{
 position: relative;
 display: inline-block;
 padding: 0;
 width: 102px;
}

#site div.datepicker input 
{
 font-size: inherit; 
 width: 102px;
 max-width: 102px; 
}

#site div.datepicker span[class*="fa-calendar"]  
{
  position: absolute;
  right: 6px;
  bottom: 9px;
  cursor: pointer;
}

/* ----------- Date End ----------- */