/*
 * Metro UI CSS
 * Copyright 2012 Sergey Pimenov
 * Licensed under the MIT Lilcense
 *
 * Layout.less
 */

@textbox_pass_active_icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzM2OTY1MjIwNkVGMTFFMjhDQkNEODZFQTYyRTI5MDciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzM2OTY1MjMwNkVGMTFFMjhDQkNEODZFQTYyRTI5MDciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozMzU3NURCRDA2RUYxMUUyOENCQ0Q4NkVBNjJFMjkwNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozMzU3NURCRTA2RUYxMUUyOENCQ0Q4NkVBNjJFMjkwNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhJl5kAAAAEMSURBVHja7FXtEYIwDKVO0BE6AiPoBDICo7BBR9AVnMARcIOyAWxQk6PlakwC/uC888zdOwpJXl/SD0yMsdrLDtWO9h1yY4wDeEAARIKQfE7InQfY8xJgFnBB10ZgrCUc85N8rAHjB8QZmFNTcpNfoBQkvifl2SbAFXAjlZ8BLRN7Ar4HtmVRnoKo4o6Wy7SvYyqwL21hetxKpMwkLbMGS3sccfqtxMUEnnC4TO5pWSSxAYQiBscN06KRCkTrJdWJWNohjaK+X3ZNgSNJCAp50ITgN+2E2rQeklHf9MYh3YqJfNTuDsg10vFXlYMTlQwK97B6c61ssc0Lunq3KBOoW1EiN/8/0W+RPwUYACoftglrEejbAAAAAElFTkSuQmCC);
@textbox_pass_inactive_icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzM2OTY1MkEwNkVGMTFFMjhDQkNEODZFQTYyRTI5MDciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzM2OTY1MkIwNkVGMTFFMjhDQkNEODZFQTYyRTI5MDciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozMzY5NjUyODA2RUYxMUUyOENCQ0Q4NkVBNjJFMjkwNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozMzY5NjUyOTA2RUYxMUUyOENCQ0Q4NkVBNjJFMjkwNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ps2lOfsAAAFMSURBVHjaYvz//z8DrQATAw0BTQ1nwSUxe/ZsBSCVD8QBQKyAJv0AiDcA8cTU1NQHuMxgRA9zoKECQKofiBOIdOACIC4EWvIBr+FAgw2A1H4gFiAxBEAGOwItuIDVcBwGf4C6bCOaYf5QnwngswBsODQo7qMpbgTiCdi8ixR8BUBcj2aBIkwPLEL70QxOBCpYgC8coAY0AC0BReh8qDAsvhJBHGZpaWkFqNdhAOTaTmID29jY+MK5c+dAhlpAhQyA/IVA8Q8s0OSG7K1GNO8HQF2jgJQMQaljA1oQIscByMxCUCZyQE5WyGEMNXg9WjoHsddD5ZCDCNn3DrAcaoAkiJ4q+vGECLrcQSS2Ad7sD00NCngMV8CS1vHnUDTD3xNIMYxkFVzQcHyAR+8DSkvFQjLlCBsOTW6BaK4EsQPRkiJxpeJoTTS0DQcIMACNJ32B6TbHUQAAAABJRU5ErkJggg%3D%3D);

// Checkboxes
.input-control {

    &.checkbox {
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;

        & > input[type=checkbox] {
            position: absolute;
            opacity: 0;
        }
        & > span {}

        .helper {
            padding-left: 23px;
            position: relative;
        }

        .helper:before {
            position: absolute;
            display: block;
            height: 20px;
            width: 20px;
            content: "";
            text-indent: -9999px;
            border: 2px #d9d9d9 solid;
            z-index: 1;
            opacity: 1;
            top: 0;
            left: 0;
        }


        input[type="checkbox"]:checked + .helper:after {
            position: absolute;
            display: block;
            content: "\e08a";
            font-size: 10pt;
            heigth: 14px;
            width: 14px;
            line-height: 14px;
            z-index: 2;
            top: 50%;
            margin-top: -6px;
            left: 0;
            margin-left: 4px;
            font-family: iconFont;
        }

        input[type="checkbox"]:not(:checked) + .helper:after {
            display: none;
        }

        input[type="checkbox"]:disabled + .helper:before {
            cursor: default;
            background: #e6e6e6;
        }

        input[type=checkbox]:disabled + .helper:after {
            color: #8a8a8a;
        }

        &:hover {
            input:not(:disabled) + .helper:before {
                border-color: #919191;
            }
        }

        &:active {
            input:not(:disabled) + .helper:before {
                border-color: #1e1e1e;
            }
        }

    }

    &.intermediate {
        input[type="checkbox"] + .helper:after {
            position: absolute !important;
            display: block !important;
            content: "" !important;
            color: #1a1a1a !important;
            z-index: 2 !important;
            font-size: 16px !important;
            font-weight: bold !important;
            left: 5px !important;
            margin-left: 0 !important;
            top: 50% !important;
            margin-top: -5px !important;
            background-color: #1a1a1a !important;
            width: 10px !important;
            height: 10px !important;
        }
        input[type="checkbox"]:disabled + .helper:after {
            background-color: lighten(#1a1a1a, 50%) !important;
        }
    }
}

// Radio
.input-control {
    &.radio {
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;

        & > input[type=radio] {
            position: absolute;
            opacity: 0;
        }
        & > span {}

        .helper {
            padding-left: 23px;
            position: relative;
        }

        .helper:before {
            position: absolute;
            display: block;
            height: 20px;
            width: 20px;
            content: "";
            text-indent: -9999px;
            border: 2px #d9d9d9 solid;
            z-index: 1;
            opacity: 1;
            top: 0;
            left: 0;
            border-radius: 100%;
        }

        input[type="radio"]:checked + .helper:after {
            position: absolute;
            display: block;
            content: "";
            color: #1a1a1a;
            z-index: 2;
            font-size: 16px;
            font-weight: bold;
            left: 5px;
            margin-left: 0;
            top: 50%;
            margin-top: -5px;
            background-color: #1a1a1a;
            width: 10px;
            height: 10px;
            border-radius: 100%;
        }

        input[type="radio"]:disabled + .helper:before {
            cursor: default;
            background: #e6e6e6;
        }

        input[type="radio"]:disabled + .helper:after {
            background-color: #8a8a8a;
        }

        &:hover {
            input:not(:disabled) + .helper:before {
                border-color: #919191;
            }
        }

        &:active {
            input:not(:disabled) + .helper:before {
                border-color: #1e1e1e;
            }
        }
    }
}

// Switch
.input-control {
    &.switch {
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;
        position: relative;

        & > input[type=checkbox] {
            position: absolute;
            opacity: 0;
        }

        .helper {
            padding-left: 52px;
            position: relative;
        }

        .helper:before {
            position: absolute;
            left: 0;
            top: 2px;
            display: block;
            content: "";
            width: 43px;
            height: 16px;
            outline: 2px #a6a6a6 solid;
            border: 1px #fff solid;
            cursor: pointer;
            background: #008287;
            margin-left: 2px;
            z-index: 1;
        }

        input[type="checkbox"] + .helper:after {
            position: absolute;
            left: 36px;
            top: 2px;
            display: block;
            content: "";
            width: 9px;
            height: 16px;
            outline: 2px #333 solid;
            border: 1px #333 solid;
            cursor: pointer;
            background: #333;
            z-index: 2;
        }

        input[type="checkbox"]:not(:checked) + .helper:after {
            left: 2px !important;
        }

        input[type="checkbox"]:not(:checked) + .helper:before {
            background: #a6a6a6 !important;
        }

        input[type="checkbox"]:disabled + .helper:after {
            background: #a6a6a6 !important;
            outline: 2px #a6a6a6 solid !important;
            border: 1px #a6a6a6 solid !important;
        }

        input[type="checkbox"]:disabled + .helper:before {
            cursor: default !important;
            background: #e0e0e0 !important;
            outline: 2px #ccc solid !important;
        }

    }
}

//Input text, password, ...

.input-control > input[type=text],
.input-control > input[type=email],
.input-control > input[type=url],
.input-control > input[type=phone],
.input-control > input[type=password],
.input-control > select,
.input-control > textarea {
    border: 2px #bababa solid;
    width: 100%;
    padding: 4px 32px 6px 5px;
    background-color: #fff;
    outline: 0;
    margin-right: 32px;
    min-height: 32px;
    .pos-rel;


    &:disabled {
        background-color: #eaeaea;
    }
    &:focus {
        border-color: #000;
    }
}

.input-control > input[type=text]::-ms-clear,
.input-control > input[type=email]::-ms-clear,
.input-control > input[type=url]::-ms-clear,
.input-control > input[type=phone]::-ms-clear {
    display: none;
}
.input-control > input[type=password]::-ms-reveal {
    display: none;
}


.input-control > select {
    padding-right: 5px;
}

.input-control > textarea {
    padding-right: 5px;
    min-height: 100px;
}

.input-control {
    &.text, &.password {
        input[type=text]:not(:focus) + .helper, input[type=password]:not(:focus) + .helper, input[type=email]:not(:focus) + .helper, input[type=phone]:not(:focus) + .helper, input[type=url]:not(:focus) + .helper {
            display: none;
        }
        input[type=text]:focus + .helper, input[type=password]:focus + .helper, input[type=email]:focus + .helper, input[type=phone]:focus + .helper, input[type=url]:focus + .helper {
            display: block;
        }
        input[type=text]:not(:focus) + .helper:active, input[type=password]:not(:focus) + .helper:active, input[type=email]:not(:focus) + .helper:active, input[type=phone]:not(:focus) + .helper:active, input[type=url]:not(:focus) + .helper:active{
            display: block;
        }
    }
}

.input-control {
    margin-right: 0px;
    margin-bottom: 10px;
    position: relative;

    &.text, &.password {
        .helper, .btn-search {
            background: #fff;// @textbox_pass_inactive_icon 50% no-repeat;
            top: 2px;
            width: 26px !important;
            height: 27px !important;
            min-width: 26px !important;
            min-height: 27px !important;
            cursor: pointer;
            color: #000;
            position: absolute;
            left: 100%;
            margin-left: -28px;
            display: block;
            border: 1px #fff solid;

            &:before {
                //content: "";
                font-size: 12pt;
                position: absolute;
                #font > .normal;
            }


            &:hover {
                background: #d9d9d9;// @textbox_pass_inactive_icon 50% no-repeat;
            }

            &:active {
                background-color: #000;

                &:before {
                    color: #fff;
                }

            }
        }
    }

    &.password {
        .helper {
            background: #fff @textbox_pass_inactive_icon 50% no-repeat;
            &:hover {
                background: #fff @textbox_pass_active_icon 50% no-repeat;
            }
        }
    }
    &.text {
        .helper {

            &:before {
                font-family: iconFont;
                font-size: 12px;
                content: "\e089";
                left: 7px;
                top: 3px;
            }

        }
    }
    &.text {
        .btn-search {

            &:before {
                font-family: iconFont;
                font-size: 12px;
                content: "\e041";
                left: 7px;
                top: 3px;
            }

        }
    }
}

label {
    #font > .normal;
    margin-right: 10px;
    margin-bottom: 10px;
}

fieldset {
    .pos-rel;
    margin-top: 30px;
    border: 2px #eaeaea solid;
    padding: 10px;

    legend {
        padding-left: 10px;
        padding-right: 10px;
        #font > .normal;
        color: #cfcfcf;
        .pos-abs;
        top: -25px;
        left: -10px;
    }
}

input[type=button], input[type=reset], input[type=submit] {
    .button;
    border-radius: 0;
}

input[type=submit] {
    .button.default;
}