/*

#############################################################
#############################################################
#############################################################

ЦВЕТА

*/


.colors
{
    line-height: 23px;
}

.colors > .selected_colors > .input
{
    margin-right: 10px;
}

.colors .final_color
{
    display: inline-block;
    width: 90px;
    height: 30px;
    border: #cccccc 1px solid;
    vertical-align: middle;
}

.colors > .selected_colors > .input a
{
    top: 0px; 
    right: 0px; 
    position: absolute;
}

.colors .final_color
{
    margin-left: 10px;
}

/*

#############################################################
#############################################################
#############################################################

UI KIT оформление

*/
    input[type='text']:required:invalid, input[type='password']:required:invalid, textarea:required:invalid
    {
        border: #e09090 1px solid;  
    }

    select:required:invalid
    {
        background: url(/img/form/dropdown.png) right 6px top 5px no-repeat, linear-gradient(#fcfcfc, #e8d7d7) !important;    
    }
    
    /*
    input[type='checkbox']:required:not(:checked) + label:before
    {
        background: url(/img/form/checkbox1_required.png) 0 0 no-repeat !important;    
    }
    
    input[type='radio'].required:not(:checked) + label:before
    {
        background: url(/img/form/radio1_required.png) 0 0 no-repeat !important;    
    }
    */

    .input
    {
        display: inline-block;
        margin-left: 0;   
        position: relative;
        height: 33px;   
        margin-right: 2px;
    }

    .input_sub
    {
        display: inline-block;
        margin-left: 0;   
        position: relative;
        height: 33px;   
        margin-right: 2px;
	padding: 0 5px;
	border: #cccccc 1px solid;
        width: 400px;
        border-radius: 3px;    
    }

    
    .input input[type='text'], .input input[type='password']
    {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: linear-gradient(#fcfcfc, #dcdcdc);
        border: #a6a6a6 1px solid;
        box-sizing: border-box;
        height: 33px;
        vertical-align: middle;
        position: relative; 
        font: 14px calibri, sans;
        outline: none;
        padding: 0 10px 0 10px;
        color: #000000; 
        box-shadow: 0 1px 1px rgba(224, 224, 224, 0.6);        
    }
    
    .input input[type='text']:disabled, .input input[type='password']:disabled
    {
        background: #e7e7e7;
        color: #aeafb0;
        border-style: dashed; 
        border-width: 2px;
        border-color: #c6c6c6;        
    }

    .input input[type='text']:read-only, .input input[type='password']:read-only
    {
        background: #e7e7e7;
        color: #333333;
    }
    
    .input input[type='text']::-ms-clear, .input input[type='password']::-ms-clear
    {
        display: none;    
    }

    .textarea
    {
        display: inline-block;
        position: relative;
    }

    .textarea_sub
    {
        display: inline-block;
        position: relative;
	padding: 0 5px;
	border: #cccccc 1px solid;
        width: 600px;
	height: 300px;
        border-radius: 3px;    
    }


    .placeholder_txt
    {
        display: block;
        position: absolute;
        top: -6px;
        z-index: 2;
        right: 8px;
        font-size: 11px;
        padding: 0 3px 0 5px;
        letter-spacing: 1px;
        color: #5e06b0;
        background: #ffffff;
    }
    
    .textarea textarea
    {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: linear-gradient(#fcfcfc, #dcdcdc);
        border: #a6a6a6 1px solid;
        margin: 1px;
        position: relative; 
        font: 14px calibri, sans;
        outline: none;
        padding: 10px;
        color: #000000; 
        resize: none; 
        box-sizing: border-box;        
        box-shadow: 0 1px 1px rgba(224, 224, 224, 0.6);           
    }
    
    .field_title
    {
        font-weight: normal;
        margin: 10px 0 10px 0;
        display: block;
        padding: 0 0 1px 5px;
        font-size: 14px;
        width: 150px;
        white-space: nowrap;  
        text-decoration: underline;
    }

/* Селект */
    
    .select
    {
        display: inline-block;
        position: relative;
        height: 31px;
        cursor: pointer;
        vertical-align: top;
        margin-right: 2px;
        font: 14px calibri, sans;
    }

    .select select
    {
        display: none;
    }
    
    .select .dropbox_container
    {
        display: block;
    }
    
    .select .dropbox_container .dropbox
    {
        display: inline-block;
        position: relative;
        height: 31px;
        line-height: 29px !important;
        background: linear-gradient(#fcfcfc, #dcdcdc);
        min-width: 10px; 
        padding: 0 38px 0 10px;
        border: #a6a6a6 1px solid;
        cursor: pointer;
        box-shadow: 0 1px 1px rgba(224, 224, 224, 0.6);
        color: #000000;
        white-space: nowrap;  
        overflow: hidden;   
        margin-right: -2px;
    }

    .select .dropbox_container.disabled .dropbox
    {
        background: #e7e7e7;
        color: #aeafb0;    
        border-style: dashed; 
        border-width: 2px;
        border-color: #c6c6c6;
    }
    
    .select .selected
    {
        color: #000000;
        display: inline-block !important;
    }
    
    .select .dropbox_container.disabled .dropbutton
    {
        background: url(/img/form/dropdown_opacity.png) center center no-repeat, #e7e7e7;
    }

    .select .dropbox_container.readonly .dropbox
    {
        background: #e7e7e7;
        color: #333333;    
    }

    .select .dropbox_container.readonly .dropbutton
    {
        background: url(/img/form/dropdown.png) center center no-repeat, #e7e7e7; 
    }

    .select .optionlist_container
    {
        position: absolute; 
        min-width: 100%; 
        z-index: 2;
    }

    .select .optionlist
    {
        display: none;
        overflow-y: scroll;
        overflow-x: hidden;
        max-height: 150px; 
        border: #a6a6a6 1px solid;            
        background: #ffffff;
        min-width: 100%;
        padding: 0;           
        float: left;
        margin-right: -2px;               
        margin-top: -6px !important;
    }

    .select .optionlist .option
    {
        display: block;
        height: 30px;
        width: 100%;
        line-height: 29px;  
        border-top: #a6a6a6 1px solid;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 13px;
        white-space: nowrap;
    }        

    .select .optionlist .option:first-child
    {
        border-top: none;
    }

    .select .optionlist .option:hover
    {
        background: #dbedf7;  
    }   

    .select .dropbutton
    {
        display: inline-block;
        width: 35px;
        height: 100%;
        background: url(/img/form/dropdown.png) center center no-repeat, linear-gradient(#fcfcfc, #dcdcdc); 
        position: absolute;
        right: 0;
        top: 0;
    } 
    
/* Миникнопки */

    .small_button
    {
        border: #a6a6a6 1px solid;
        margin: 0;
        padding: 0;
        width: 33px;
        height: 33px;
        vertical-align: middle;
        position: relative; 
        cursor: pointer;
        outline: none;
    }

    .small_button .small_button_inner
    {
        display: block;
        width: 29px;
        height: 29px;
        background: linear-gradient(#fcfcfc, #dcdcdc);
        margin-top: 1px;
        margin-left: 1px;
        position: relative;
    }

    .small_button .small_button_inner .img
    {
        display: block;
        vertical-align: middle;
        width: 16px;
        height: 16px;
        position: absolute;
        top: 6px;
        left: 7px;
    }
    
    .small_button:not(:disabled):active
    {
        top: 1px;    
    }    
    
    .small_button:not(:disabled):active .small_button_inner
    {
        box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.3);
        width: 31px;
        height: 31px;
        margin: 0;      
    } 

    .small_button:disabled .small_button_inner .img
    {
        opacity: 0.6;
    }

    .small_button:disabled
    {
        opacity: 0.5;
        background-color: #f0f0f0;
    }

/* Чекбоксы (зеленые) */

    .checkbox_item
    {
        position: relative;
        display: block;
        height: 20px;
    }

    .chbox:not(:checked),
    .chbox:checked 
    {
        position: absolute;
        left: -9999px;
    }

    .chbox:not(:checked) + label,
    .chbox:checked  + label
    {
        cursor: pointer;
        border: transparent 1px solid;
    }

    .chbox:not(:checked) + label:before
    {
        content: '';
        position: absolute;
        left: 1px; 
        top: 0; 
        width: 16px; 
        height: 16px;
        background: linear-gradient(#fafafa, #dddddd);
        border: #a8a8a8 1px solid;   
        line-height: 0 !important;
    }

    .chbox:checked + label:before
    {
        content: '';
        position: absolute;
        left: 2px; 
        top: 1px; 
        width: 14px; 
        height: 14px;
        border: #a8a8a8 1px solid;
        background: linear-gradient(#fafafa, #dddddd);
        line-height: 0 !important;
    }

    .chbox:not(:checked) + label:after,
    .chbox:checked + label:after 
    {
        content: url(/img/form/galka1.png);
        position: absolute;
        left: 6px; 
        top: 5px; 
        transition: all .2s;
        line-height: 0 !important;
    }

    .chbox_readonly:checked + label:after 
    {
        content: url(/img/form/galka2_readonly.png);
        position: absolute;
        left: 6px; 
        top: 4px; 
        transition: all .2s;
        line-height: 0 !important;
    }
    
    .chbox:not(:checked) + label:after 
    {
        opacity: 0;
        transform: scale(0);
    }
    
    .chbox:checked + label:after 
    {
        opacity: 1;
        transform: scale(1);
    }    

    .chbox:disabled:not(:checked) + label:before
    {
        background: #fafafa;
        border: #cccccc 1px solid;
    }

    .chbox:disabled:checked + label:before
    {
        background: #fafafa;
        border: #cccccc 1px solid;
    }

    .chbox:disabled:checked + label:after 
    {
        content: url(/img/form/galka1_disabled.png);        
    }

/* Радио (зеленые) */

    .radio_item
    {
        position: relative;
        display: block;
        height: 20px;        
    }

    .radio:not(:checked),
    .radio:checked 
    {
        position: absolute;
        left: -9999px;
    }

    .radio:not(:checked) + label,
    .radio:checked  + label
    {
        cursor: pointer;
        border: transparent 1px solid;
        margin-left: 12px;
    }

    .radio:not(:checked) + label:before
    {
        content: '';
        position: absolute;
        left: 1px; 
        top: 0; 
        width: 16px; 
        height: 16px;
        background: linear-gradient(#fafafa, #dddddd);   
        border: #a8a8a8 1px solid;     
        border-radius: 50%;
        line-height: 0 !important;
    }

    .radio:checked + label:before
    {
        content: "";
        position: absolute;
        left: 2px;
        top: 1px;
        width: 14px; 
        height: 14px;
        background: linear-gradient(#fafafa, #dddddd);   
        border: #a8a8a8 1px solid;     
        border-radius: 50%;
    }
    
    .radio:not(:checked) + label:after,
    .radio:checked + label:after 
    {
        content: url(/img/form/tochka1.png);
        position: absolute;
        left: 7px; 
        top: 6px; 
        transition: all .2s;
        line-height: 0 !important;
    }
    
    .radio:not(:checked) + label:after 
    {
        opacity: 0;
        transform: scale(0);
    }
    
    .radio:checked + label:after 
    {
        opacity: 1;
        transform: scale(1);
    }    

    .radio:disabled:not(:checked) + label:before
    {
        background: #fafafa;
        border: #cccccc 1px solid;        
    }

    .radio:disabled:checked + label:before
    {
        background: #fafafa;
        border: #cccccc 1px solid;           
    }
    
    .radio:disabled:checked + label:after 
    {
        content: url(/img/form/tochka1_disabled.png);        
    }  
 
/* Сабмит */

    .submit
    {
        display: block;
        position: relative; 
        border: #cccccc 1px solid;
        height: 34px;
        font-family: calibri, sans;
        background: linear-gradient(#f9f9f9, #dcdcdc);
        /*box-shadow: 0px 3px 4px rgba(150, 150, 150, 0.8);*/
        font-size: 8pt;
        color: #666666;
        vertical-align: top;
        text-transform: uppercase;
        padding: 0 10px 0 10px;
        margin: 0;      
        border-radius: 3px;    
    }