input:not([type='file']),
select {
	border:1px solid #ddd;
	font-size:14px;
	color:inherit;
	background: #fff;
}
input:focus,
select:focus {
	border-color: #3cf;
	box-shadow:0 0 0 4px rgba(51, 204, 255,0.2);
}

input[readonly]{
	background:#f0f0f0;
}

input[type='search']{
	background-image:url(../images/ico_search.png) no-repeat;
	background-position: 98% center;
	background-size:20px;
}

textarea {
	padding:6px 8px !important;
    border-radius:4px;
    font-size:14px;
	line-height: 1.5em;
    border:1px solid #ddd;
	box-sizing:border-box;
	overflow:auto;
	width:100%;
	height:100px;
	resize: none;
}
textarea:focus{
	border-color:#3cf;
	box-shadow:0 0 0 4px rgba(51, 204, 255,0.2);
}

input:not([type='radio']):not([type='checkbox']),
select
{
    padding:0 6px;
    height:var(--input-size);
    border-radius:4px;
}

button{
    border:0;
}

input[type='checkbox'],
input[type='radio'],
.form-section input[type='radio'],
.form-section input[type='checkbox']
{
    padding:6px;
}

.form-section .thumb {
    position:relative;
    float:left;
    width:120px;
}
.form-section .thumb img {
    float:left;
    max-width:100%;
    height:auto;
}

input[type='submit'],
input[type='button'],
input[type='reset']
{
	border:0;
    cursor: pointer;
    text-align: center !important;
	color:#fff;
	background:#07c;
    padding:0 12px !important;
}

input[type='reset']
{
	border:0;
    cursor: pointer;
    text-align: center !important;
	color:#222;
	background:#e1e1e1;
}
input[type='reset']:hover{
    background:#d1d1d1;
}
input[type='reset']:active{
    background:#c1c1c1;
}

input[disabled]{
	background:#ccc;
	color:#999;
}

.hideTag,
.hide-tag {
    display:none;
}

@media(min-width:768px){
	.form-section{
		position:block;
	}
	.form-section > .item{
		display:flex;
		align-items: center;
        gap:8px;
        padding:4px 0;
		position:relative;
	}
	.form-section > .item label{
		flex:0 1 160px;
		text-align: left;
		position:relative;
	}
	.form-section > .item > .field, 
	.form-section > .item > div, 
	.form-section > .item > span 
    {
		flex:1;
		position:relative;
	}
	.form-section > .item select
	{
		max-width:100%;
	}

	.form-section > .item .label-top{
		align-self:flex-start;
	}
    .form-section > .foot{
        display:block !important;
        position:relative;
        text-align: right !important;
	}

    .full-field, 
    .full-field > label, 
    .full-field > input:not([type='radio']):not([type='checkbox']), 
    .full-field > select, 
    .full-field > textarea, 
    .full-field > .item, 
    .full-field > .item label, 
    .full-field > .item input:not([type='radio']):not([type='checkbox']),
    .full-field > .item select, 
    .full-field > .item textarea 
    {
        display:inline-block !important;
        width:100%;
    }

    .full-field label 
    {
        padding:0 0 4px !important;
	}

    .full-label, 
    .full-label > label 
    {
        display:block !important;
        width:100%;
    }

    .label-w120 > .item label{
        flex:0 1 120px;
    }
    .label-w140 > .item label{
        flex:0 1 140px;
    }
    .label-w160 > .item label{
        flex:0 1 160px;
    }
    .label-w180 > .item label{
        flex:0 1 180px;
    }
    .label-w200 > .item label{
        flex:0 1 200px;
    }
    
    .label-bold > label{
        font-weight:bold !important;
    }
}

@media(max-width:768px){
	.form-section > .item{
        display:flex;
		flex-direction: column;
		gap:6px;
        padding:6px 0;
	}
	.form-section > .item *
	{
		display:block;
		text-align: left;
	}

	.form-section > .item input:not([type='radio']):not([type='checkbox']),
	.form-section > .item select 
	{
		width:100%;
		font-size:16px;
	}

	.form-section > .item input[type='submit'], 
	.form-section > .item input[type='reset'], 
	.form-section > .item input[type='button'] 
	{
		font-size:16px;
		width:100%;
	}

	.form-section > .item .sectionImg{
		display:block;
		padding:4px 0;
	}

    .label-w120 > .item label,
    .label-w140 > .item label,
    .label-w160 > .item label,
    .label-w180 > .item label,
    .label-w200 > .item label
    {
        flex:0;
    }
}

@media(max-width:480px){
	.input-group{
		flex-direction: column;
	}
	.input-group > .item{
		width:100%;
	}
}

.input-tel {
    display:block;
}
.input-tel .content {
    display: flex;
    flex-direction: row;
    gap:5px;
}
.input-tel .content .ind {
    flex:0 0 1 !important;
    width:70px !important;
}
.input-tel .content .num{
	flex: 1 !important;
}
.input-tel .content .ind > input:where([type='text'],[type='tel'],[list]),
.input-tel .content .ind .select
{
    width:100%;
    text-align: right;
}

.tclic{
    float:left;
    color: var(--color1);
    cursor:pointer;
}
.tclic:hover{
    background: var(--color1-pale);
    text-decoration : underline;
}
.tclic:active{
    background: var(--color1-pale-active);
}

.label-bold > .item label{
	font-weight:bold;
}

.input-group{
    position:relative;
    display:flex;
    align-items: flex-start;
    gap:6px;
    margin:0 0 4px;
}
.input-group > .item{
   flex:1;
   position:relative;
}
.input-group > .item input:not([type='radio']):not([type='checkbox']),
.input-group > .item select
{
    width:100% !important;
}
.input-group > .item label{
	display:block;
    padding:5px 0;
}

.form-row{
    display:flex;
    gap:5px;
    width:100%;
}
.form-row > .item{
    flex:1;
    vertical-align:bottom;
    position:relative;
}
.form-row > .item label{
    display:block;
    width:100%;
    padding:5px 0 3px;
}
.form-row input:not([type='radio']):not([type='checkbox']),
.form-row select{
    position:relative;
    width:100%;
}
.form-row .buttons{
    align-self:flex-end !important;
}

.form-row-page{
    padding:70px 0 0 0 !important;
}
.form-row-page > .boxPageHead{
    padding:0 16px;
    height:70px !important;
    background: #f0f0f0;
}

/**/
.checklist{
    position:relative;
    max-height:150px;
	overflow-y:auto;
} 
.checklist > .content{
    position:relative;
    display:block;
} 
.checklist > .content > .item{
    float:left;
    padding:2px 8px 2px 0;
}
.checklist > .in-column{
    display:flex !important;
    flex-direction: column !important;
    align-items:flex-start !important;
    gap:5px;
}
.checklist > .in-column > .item{
    flex:1 !important;
    position:relative;
    padding:0;
}

.combo-box input[type='text'] {
    background-size: 14px 14px;
    background-position: 98% 50%;
    padding-right:28px !important;
    background-repeat: no-repeat;
    width:100%;
    outline: none;
}

.combo-icon-dropdown{
    background: #fff url(../images/icones/ico_drop_down.png);
}
.combo-icon-search{
    background: #fff url(../images/icones/ico_search.png);
    background-size: 16px 16px;
}

.combo-items {
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    max-height:150px;
    background:#fff;
    border-radius:4px;
    overflow:hidden;
    overflow-y: auto;
    z-index: 1;
    box-shadow: 1px 1px 8px #888;
    display:none;
}

.combo-items > .item {
    border-bottom:1px solid #e5e5e5;
    padding: 6px 10px;
    cursor:pointer;
}
.combo-items > .item:hover {
    background: #e5e5e5;
}
.combo-items > .item:active {
    background: #c5c5c5;
}
.combo-items > .item .text {
    flex:1;
    display: flex;
    flex-direction: column;
    row-gap:2px;
}
.combo-items > .item .text .title {
    font-size:14px;
    word-break: break-all;
}
.combo-items > .item .text .sub-title {
    font-size:12px;
    word-break: break-all;
    color:#999;
}

.check-item {
    float:left;
    overflow:hidden;
    cursor:pointer;
}
.check-item > span {
    display:block;
    border-radius:0;
    padding:2px;
    background-clip: content-box;
    border: 1px solid #d5d5d5;
    background-color: transparent;
}

.check-item > .rounded {
    border-radius:50% !important;
    padding:3px !important;
}
.check-item > .size16 {
    width:16px;
    height:16px;
}
.check-item > .size18 {
    width:18px;
    height:18px;
}
.check-item > .size20 {
    width:20px;
    height:20px;
}
.check-item > .size22 {
    width:22px;
    height:22px;
}
.check-item > .size24 {
    width:24px;
    height:24px;
}
.check-item > span:hover {
    border: 1px solid #333;
    background-color: #333 !important;
}
.check-item > span:active {
    border: 1px solid var(--color1-active);
    background-color: var(--color1-active) !important;
}
.check-item > .checked {
    border: 1px solid var(--color1);
    background-color: var(--color1);
}

.btn-tiny,
.btn-small,
.btn-medium,
.btn-large
{
    display:inline-flex;
    align-items: center;
    user-select: none;
    cursor:pointer;
    text-decoration: none !important;
}

.btn-tiny{
    height:var(--size-tiny);
    font-size:var(--font-tiny);
    padding:0 10px;
}
.btn-small{
    height:var(--size-small);
    font-size:var(--font-small);
    padding:0 12px;
}
.btn-medium{
    height:var(--size-medium);
    font-size:var(--font-medium);
    padding:0 16px;
}
.btn-large{
    height:var(--size-large);
    font-size:var(--font-large);
    padding:0 20px;
}

@media(max-width:768px){
    input:not([type='radio']):not([type='checkbox']),
    select
    {
        height:36px;
    }
}