/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

body {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    font-family: 'Open Sans', sans-serif;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

a {
    -webkit-transition: opacity 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}
a:hover {
    opacity: 0.9;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */



        /*HEADER*/

header {
    width: 100%;
    height: 40px;
    background: #0f0f0f;
}
    .header__content {
        max-width: 1260px;
        margin: 0 auto;
        height: 40px;
        /*overflow: hidden;*/
    }
        .header_left {
            float: left;
            height: 40px;
        }
            .header_left a {
                display: inline-block;
                color: #bcbcbc;
                font-size: 12px;
                margin-right: 20px;
                line-height: 38px;
            }
        .header_right {
            float: right;
            height: 40px;
            /*overflow: hidden;*/
            vertical-align: middle;
        }
            .header_right>div {
                display: inline-block;
            }
            .header__registration {
                margin-right: 15px;
            }
                .header__registration a {
                    font-size: 13px;
                    color: #fff;
                    line-height: 40px;
                    margin-left: 5px;
                    text-decoration: none;
                }
            .header__phone {
                color: #cccccc;
                font-size: 12px;
                line-height: 40px;
                margin-right: 35px;
            }
                .header__phone a {
                    font-size: 13px;
                    color: #fff;
                    line-height: 40px;
                    margin-left: 5px;
                    text-decoration: none;
                }
            .header__account {
                  margin-right: 15px;
            }
                .header__account img {
                    display: inline-block;
                    width: 30px;
                    height: 30px;
                    vertical-align: middle;
                }
                .account__name {
                    display: inline-block;
                    vertical-align: middle;
                    height: 30px;
                    padding-left: 20px;
                    padding-right: 20px;
                    margin-left: 5px;
                    background: #272829;
                }
                    .account__name span {
                        color: #cacaca;
                        font-size: 12px;
                        line-height: 30px;
                    }
            .header__settings {
                cursor: pointer;
            }
            .header__settings .dropdown-menu {
                width: 100px;
                right: -5px;
                top: 25px;
                left: inherit;
            }

.main-wrapper {
    min-height: 960px;
    width: 100%;
    background: url('../img/bg.jpg') center center no-repeat;
}
   
    /*INFO-TOP*/

    .info-top {
        width: 100%;
        height: 60px;
        border-bottom: 1px solid #3a3f41;
        background-color: rgba(0, 0, 0, .1);
    }
        .info-top__wrap {
            max-width: 1260px;
            text-align: right;
            margin: 0 auto;
        }
            .info-top__time {
                margin-right: 40px;
                color: #898989;
                font-size: 12px;
                line-height: 53px;
            }
                .info-top__time span {
                    color: #ebfafe;
                    font-size: 14px;
                    display: inline-block;
                    margin-left: 7px;
                    text-transform: uppercase;
                }


        /*TOP-INSTRUMENTS*/

.top-instruments {
    height: 105px;
    width: 100%;
}
    .top-instruments__wrap {
        width: 1260px;
        height: 105px;
        margin: 0 auto;
        line-height: 105px;
    }
        .instruments__buttons {
            float: left;
            margin-left: 420px;
            font-size: 15px;
            color: #fff;
        }
            .instruments__buttons div {
                display: inline-block;
                height: 43px;
                line-height: 40px;
                padding-left: 45px;
                padding-right: 25px;
                cursor: pointer;
                -webkit-transition: all 0.2s ease-out;
                -o-transition: all 0.2s ease-out;
                transition: all 0.2s ease-out;
            }
                .instruments__buttons div:hover {
                    opacity: 0.8;
                }
                .instruments__buttons div.active {
                    color: #00ccff;
                    text-shadow: 0 0 9px #00ffff;
                    background-color: rgba(0, 0, 0, .2);
                    border: 1px solid #3a5e68;
                    border-radius: 3px;
                }

            .instruments__button_trading {
                background: url('../img/ico/chart_white.png') left 15px bottom 14px no-repeat;
            }
                .instruments__button_trading.active {
                    background-image: url('../img/ico/chart_blue.png')
                }
            .instruments__button_history {
                background: url('../img/ico/clock_white.png') left 15px bottom 13px no-repeat;
                margin-left: 20px;
            }
                .instruments__button_history.active {
                    background-image: url('../img/ico/clock_blue.png')
                }

        .instruments__select-block {
            float: right;
        }
            .instruments__select-block>span {
                font-size: 13px;
                color: #6b7174;
                margin-right: 13px;
            }
            .instruments__select {
                display: inline-block;
                height: 43px;
                line-height: 40px;
                padding-left: 20px;
                width: 200px;
                cursor: pointer;
                background: rgba(0, 0, 0, .2) url('../img/ico/arrow-down_small.png') no-repeat top 18px right 19px;
                border-radius: 3px;
                border: 1px solid #535859;
                -webkit-transition: all 0.3s ease-out;
                -o-transition: all 0.3s ease-out;
                transition: all 0.3s ease-out;
            }
                .instruments__select:hover {
                    background-color: rgba(255, 255, 255, 0.1);
                }
                    .instruments__select:hover span {
                        text-shadow: 0 0 9px #fff;
                    }
                .instruments__select span {
                    font-size: 15px;
                    color: #fff;
                }

.main {
    width: 100%;
}
    .main__wrap {
        width: 1260px;
        margin: 0 auto;
    }
        .main__left-pannel {
            width: 160px;
            height: 300px;
            float: left;
            border: 1px solid #2d2e2e;
            border-radius: 3px/5px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            background: rgba(0, 0, 0, 0.2);
        }
            .main__left-pannel ul {
                text-align: center;
                padding: 0;
                margin: 0;
                margin-top: 90px;
            }
                .main__left-pannel ul li {
                    list-style: none;
                    margin-bottom: 70px;
                }
                    .main__left-pannel ul li a {
                        font-size: 15px;
                        color: #898989;
                        text-decoration: none;
                        font-weight: bold;
                        -webkit-transition: all 0.3s ease-out;
                        -o-transition: all 0.3s ease-out;
                        transition: all 0.3s ease-out;
                    }
                        .main__left-pannel ul li a:hover {
                            text-shadow: 0 0 5px #898989;
                        }
                        .main__left-pannel ul li.active a {
                            color: #00ccff;
                            text-shadow: 0 0 32px #00ffff;
                        }

        .main__content {
            float: right;
            width: 1080px;
            height: 578px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border: 1px solid #717373;
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.4);
            position: relative;
        }

        /*Trading Online*/
            .main__content__trading {
                width: 100%;
                height: 578px;
            }
                .main__content__left {
                    float: left;
                    width: 190px;
                    height: 430px;
                    margin: 85px 25px 0;
                    text-align: center;
                    position: relative;
                }
                    .content__left_up {
                        background: url('../img/ico/arrow-up_big.png') center center no-repeat;
                        display: inline-block;
                        width: 44px;
                        height: 23px;
                        position: absolute;
                        top: 0;
                        left: 50%;
                        margin-left: -22px;
                        
                    }
                        .content__left_up:after {
                            content: '';
                            display: block;
                            visibility: hidden;
                            opacity: 0;
                            width: 10px;
                            height: 10px;
                            box-shadow: 0 5px 50px 10px #fff;
                            border-radius: 100%;
                            position: absolute;
                            left: 50%;
                            margin-left: -5px;
                            top: 5px;
                            -webkit-transition: all 0.2s ease-out;
                            -o-transition: all 0.2s ease-out;
                            transition: all 0.2s ease-out;
                        }
                            .content__left_up:hover:after{
                                visibility: visible;
                                opacity: 1;
                            }
                        /*.content__left_up:hover {
                            background-image: url('../img/ico/arrow-up_big_glow.png');
                            width: 85px;
                            height: 67px;
                            margin-left: -42px;
                            top: -21px;
                        }*/
                    .content__left_down {
                        background: url('../img/ico/arrow-down_big.png') center center no-repeat;
                        display: inline-block;
                        width: 44px;
                        height: 23px;
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        margin-left: -22px;
                        -webkit-transition: all 0.3s ease-out;
                        -o-transition: all 0.3s ease-out;
                        transition: all 0.3s ease-out;
                    }
                        .content__left_down:after {
                            content: '';
                            display: block;
                            visibility: hidden;
                            opacity: 0;
                            width: 10px;
                            height: 10px;
                            box-shadow: 0 -5px 50px 10px #fff;
                            border-radius: 100%;
                            position: absolute;
                            left: 50%;
                            margin-left: -5px;
                            bottom: 5px;
                            -webkit-transition: all 0.2s ease-out;
                            -o-transition: all 0.2s ease-out;
                            transition: all 0.2s ease-out;
                        }
                            .content__left_down:hover:after{
                                visibility: visible;
                                opacity: 1;
                            }
                        /*.content__left_down:hover {
                            background-image: url('../img/ico/arrow-down_big_glow.png');
                            width: 85px;
                            height: 67px;
                            margin-left: -43px;
                            bottom: -21px;
                        }*/
                    .main__content__left ul {
                        list-style: none;
                        padding: 0;
                        height: 301px;
                        -webkit-box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        box-sizing: border-box;
                        border-top: 1px solid #3b3d3e;
                        border-bottom: 1px solid #3b3d3e;
                        margin: 65px 0 55px;
                        overflow: hidden;
                    }
                        .main__content__left ul li {
                            border-bottom: 1px solid #3b3d3e;
                            text-align: center;
                            height: 50px;
                            line-height: 50px;
                            cursor: pointer;
                            position: relative;
                        }
                            .main__content__left ul li.active span:after {
                                content: '';
                                display: block;
                                width: 10px;
                                height: 10px;
                                -webkit-box-sizing: border-box;
                                -moz-box-sizing: border-box;
                                box-sizing: border-box;
                                background: #34a431;
                                border: 1px solid #125210;
                                border-radius: 50%;
                                box-shadow: 0 0 10px #fff;
                                position: absolute;
                                right: 18px;
                                top: 50%;
                                margin-top: -5px;
                                opacity: 1;
                            }
                                .main__content__left ul li.active.pale span:after{
                                    opacity: 0.5;
                                }
                            .main__content__left ul li:after {
                                content:'';
                                display: block;
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                top:0;
                                left:0;
                                visibility: hidden;
                                opacity: 0;
                                background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%); /* FF3.6+ */
                                background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
                                background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
                                background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
                                background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0) 100%); /* IE10+ */
                                background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0) 100%); /* W3C */
                                -webkit-transition: all 0.2s ease-out;
                                -o-transition: all 0.2s ease-out;
                                transition: all 0.2s ease-out;
                            }
                                .main__content__left ul li:hover:after {
                                    visibility: visible;
                                    opacity: 1;
                                }
                            .main__content__left ul li span {
                                color: #929393;
                                font-size: 16px;
                            }
                            .main__content__left ul li.selected {
                                background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0) 100%); /* FF3.6+ */
                                background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
                                background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 50%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
                                background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 50%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
                                background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 50%,rgba(0,0,0,0) 100%); /* IE10+ */
                                background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 50%,rgba(0,0,0,0) 100%); /* W3C */
                            }
                                .main__content__left ul li.selected span {
                                    color: #fff;
                                    font-weight: 700;
                                }

                .main__content__center {
                    width: 682px;
                    float: left;
                }
                    .main__center__top {
                        height: 140px;
                        width: 100%;
                    }
						.main__center__top .selection-container{
							float:right; 
							margin-top: 30px;
						}
                        .main__center__top h3 {
							float: left;
                            font-size: 30px;
                            font-weight: normal;
                            color: #fff;
                            margin: 20px 0;
                        }
                        .main__center__top .bet-text {
                            font-size: 13px;
                            line-height: 20px;
                            color: #fff;
                            float: left;
                            max-width: 40%;
                        }
                        .time-select-block, .range-select-block {
							margin-bottom: 15px;
                            margin-right: 92px;
							height: 34px;
                        }
                            .time-select-block > span, .range-select-block > span {
                                  font-size: 13px;
                                  color: #6b7174;
                                  margin-right: 10px;
								  line-height: 28px;
                            }
                            .time-select, .range-select {
                                display: inline-block;
                                height: 34px;
                                line-height: 30px;
                                padding-left: 15px;
                                width: 155px;
                                cursor: pointer;
                                background: rgba(0, 0, 0, .25) url('../img/ico/arrow-down_small.png') no-repeat top 13px right 11px;
                                border-radius: 3px;
                                border: 1px solid #535859;
                                -webkit-transition: all 0.3s ease-out;
                                -o-transition: all 0.3s ease-out;
                                transition: all 0.3s ease-out;
								float: right;
                            }
                                .time-select:hover, .range-select:hover {
                                    background-color: rgba(255, 255, 255, 0.1);
                                }
                                    .time-select:hover span, .range-select:hover span {
                                        text-shadow: 0 0 10px #fff;
                                    }
                                .time-select span, .range-select span {
                                    color: #fff;
                                    font-size: 13px;
                                }

                .main__content__right {
                    float: right;
                    width: 130px;
                    height: 576px;
                    border-left: 1px solid #33393b;
                    text-align: center;
                    padding: 0 20px;
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;

                }
                    .main__content__right h3 {
                        font-size: 15px;
                        color: #fff;
                        margin: 20px 0;
                        font-weight: normal;
                    }
                    .main__content__right p {
                        font-size: 12px;
                        color: #6b7174;
                    }
					.select_btns div {
						float: left;
						height: 25px;
						line-height: 23px;
						color: #fff;
						font-size: 13px;
						font-weight: bold;
						text-align: center;
						border: 1px solid #424548;
						margin-bottom: 9px;
						margin-right: 15px;
						background: rgba(105, 105, 105, 0.15);
						cursor: pointer;
						-webkit-transition: all 0.2s ease-out;
						-o-transition: all 0.2s ease-out;
						transition: all 0.2s ease-out;
					}
						.select_btns div:hover  {
							background: rgba(105, 105, 105, 0.5);
							text-shadow: 0 0 10px #fff;
						}
						.select_btns div.active  {
							background: rgba(105, 105, 105, 0.75);
							border-color: #c5c6c7;
						}
                    .bids-block {
                        width: 100%;
                        margin: 35px 0;
                        overflow: hidden;
                        padding-bottom: 40px;
                        border-bottom: 1px dashed #424548;
                    }
						.bids-block div {
							margin-right: 0;
						}
                        .bid_small {
                            width: 40px;
                        }
                            .bid_small.right {
                                float: right;
                            }
                        .bid_big {
                            width: 100%;
                            -webkit-box-sizing: border-box;
                            -moz-box-sizing: border-box;
                            box-sizing: border-box;
                        }
                    .main__content__right hr {
                        width: 1px;
                        height: 32px;
                        background: #343536;
                        border: none;
                        box-shadow: none;
                        margin: 10px auto 15px;
                    }
                    .content__right__time {
                        font-size: 15px;
                        color: #db262e;
                        text-shadow: 0 0 25px #da2129;
                        -webkit-transition: all 0.5s ease-out;
                        -o-transition: all 0.5s ease-out;
                        transition: all 0.5s ease-out;
                        text-align: center;
                    }
                        .content__right__time.pale {
                            opacity: 0.9;
                            text-shadow: 0 0 15px #da2129;
                            -webkit-transition: all 0.5s ease-out;
                            -o-transition: all 0.5s ease-out;
                            transition: all 0.5s ease-out;
                        }

                .main__buttons {
                    width: 590px;
                    height: 106px;
                    position: absolute;
                    background: #212322;
                    left: 50%;
                    margin-left: -295px;
                    bottom: -53px;
                    /*border: 1px solid #fff;*/
                    border-radius: 53px;
                }
					.main__buttons .main_button.disabled{
						background: none;
						cursor: default;
					}
					.main__buttons .main_button.disabled:hover{
						background: none;
						box-shadow: none;
						border-color: #fff;;
					}
                    .button_left {
                        float: left;
                        width: 50%;
                        height: 106px;
                        background: url('../img/down-btn.png') right center no-repeat;
                        cursor: pointer;
                        position: relative;
                        z-index: 1;
                        border-top-left-radius: 53px;
                        border-bottom-left-radius: 53px;
                        border: 1px solid #fff;
                        -webkit-box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        box-sizing: border-box;
                        -webkit-transition: all 0.2s ease-out;
                        -o-transition: all 0.2s ease-out;
                        transition: all 0.2s ease-out;
                    }
                        .button_left:hover {
                            box-shadow: 0 0 50px rgba(232, 90, 97, 1);
                            border-color: #d1696e;
                            background-image: url('../img/down-btn_glow.png');
                            background-position: left center;
                            -ms-background-position-x: left;
                            background-position-x: left;
                        }
                        .button_left span {
                            color: #fff;
                            line-height: 104px;
                            font-size: 16px;
                            background: url('../img/ico/arrow-down_med.png') right no-repeat;
                            padding-left: 52px;
                            padding-right: 40px;
                            text-shadow: 0 0 40px #efecf5;
                        }
                    .button_right {
                        float: right;
                        width: 50%;
                        height: 106px;
                        background: url('../img/up-btn.png') left center no-repeat;
                        cursor: pointer;
                        text-align: right;
                        border-top-right-radius: 53px;
                        border-bottom-right-radius: 53px;
                        position: relative;
                        z-index: 1;
                        border: 1px solid #fff;
                        -webkit-box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        box-sizing: border-box;
                        -webkit-transition: all 0.2s ease-out;
                        -o-transition: all 0.2s ease-out;
                        transition: all 0.2s ease-out;
                    }
                        .button_right:hover {
                            box-shadow: 0 0 35px rgba(53, 196, 59, 1);
                            border-color: #33aa39;
                            background-image: url('../img/up-btn_glow.png');
                        }
                        .button_right span {
                            color: #fff;
                            line-height: 104px;
                            font-size: 16px;
                            background: url('../img/ico/arrow-up_med.png') left no-repeat;
                            padding-right: 52px;
                            padding-left: 40px;
                            text-shadow: 0 0 40px #efecf5;
                        }
                    .buttons__value {
                        width: 190px;
                        height: 108px;
                        position: absolute;
                        left: 50%;
                        margin-left: -95px;
                        top: -2px;
                        border: 1px solid #fff;
                        background: #da2129 url('../img/value-bg.png') left top no-repeat;
                        border-radius: 54px;
                        text-align: center;
                        z-index: 2;
                    }
                        .buttons__value span {
                            color: #fff;
                            font-size: 36px;
                            line-height: 108px;
                            text-shadow: -1px -1px #892727;
                            display: inline-block;
							vertical-align: top;
                        }
							.buttons__value span.small {
								font-size: 18px;
								font-weight: lighter;
								margin-right: 5px;
							}

        /*History*/
            .main__content__history {
                width: 100%;
                height: 578px;
                position: relative;
            }   
                .history__top {
                    width: 100%;
                    height: 75px;
                    padding: 0 28px;
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                }
                    .history__top__left {
                        float: left;
                        height: 75px;
                        line-height: 75px;
                        padding-top: 24px;
                        -webkit-box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        box-sizing: border-box;
                    }
                        .history__top__left div {
                            width: 160px;
                            height: 35px;
                            text-align: center;
                            color: #5a5b5c;
                            line-height: 35px;
                            border: 1px solid #232526;
                            border-radius: 3px;
                            float: left;
                            font-size: 13px;
                            margin-right: 10px;
                            cursor: pointer;
                            -webkit-transition: all 0.2s ease-out;
                            -o-transition: all 0.2s ease-out;
                            transition: all 0.2s ease-out;
                        }
                            .history__top__left div:hover {
                                opacity: 0.8;
                            }
                            .history__top__left div.active {
                                border-color: #133d48;
                                color: #00ccff;
                                text-shadow: 0 0 9px #00ffff;
                            }
                        .history__open-btn {
                            
                        }
                        .history__closed-btn {

                        }

                    .history__top__right {
                        float: right;
                        height: 75px;
                        padding-top: 24px;
                        -webkit-box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        box-sizing: border-box;
                    }
                        .history__top__right>div{
                            float: left;
                            height: 35px;
                            cursor: pointer;
                        }
                        .history__calendar {
                            width: 257px;
							line-height: 35px;
                            border: 1px solid #41464a;
                            border-radius: 3px;
                            box-shadow: 0 0 6px #41464a;
							position: relative;
                        }
                            .history__calendar__ico {
                                float: left;
                                width: 37px;
                                height: 35px;
                                border-right: 1px solid #47494a;
                                background: rgba(255, 255, 255, 0.1) url('../img/ico/calendar.png') center top 9px no-repeat;
                                border-top-left-radius: 3px;
                                border-bottom-left-radius: 3px;
                            }
							.history__calendar .dropdown-menu{
							    width: 220px;
							    left: 36px;
							}
							.history__calendar span {
								color: #8a8a8a;
								padding-left: 20px;
								font-size: 13px;
							}
                                
                        .history__choose-btn {
                            width: 138px;
                            background: #238022;
                            border: 1px solid #6dae6d;
                            border-radius: 17px;
                            line-height: 34px;
                            text-align: center;
                            color: #fff;
                            font-size: 13px;
                            margin-left: 18px;
                            -webkit-transition: all 0.3s ease-out;
                            -o-transition: all 0.3s ease-out;
                            transition: all 0.3s ease-out;
                        }
                            .history__choose-btn:hover {
                                box-shadow: 0 0 10px 2px #58b451;
                            }

                .history__table-wrapper {
                    width: 100%;
                    height: 502px;
                    position: relative;
                }
                    .history__table-wrapper table {
                        width: 100%;
                        height: auto;
                    }
                        .history__table-wrapper table tr td:first-child {
                            padding-left: 25px;
                        }
                        .history__table-wrapper table tr td {
                            height: 50px;
                            -webkit-box-sizing: border-box;
                            -moz-box-sizing: border-box;
                            box-sizing: border-box;
                        }
                             .table_closed tr td {
                                border-top: 1px solid #393a3b;
                                border-bottom: 1px solid #393a3b;
                                border-collapse: collapse;
                            } 

                        .history__table-wrapper table thead {
                            
                        }
                            .history__table-wrapper table thead tr td {
                                height: 42px;
                                background: rgba(255, 255, 255, 0.1);
                                color: #919293;
                                font-size: 12px;
                                text-align: left;
	                            
                            }
							.history__table-wrapper td.sort {
								cursor: pointer;
							}
                            .history__table-wrapper td.sort:after {
                                content: '';
                                display: inline-block;
                                vertical-align: middle;
                                width: 7px;
                                height: 10px;
                                background: url('../img/ico/sort.png') center center no-repeat;
                                margin-left: 8px;
								
                            }
                    
                    .history__table-wrapper tbody tr {
                        -webkit-transition: all 0.3s ease-out;
                        -o-transition: all 0.3s ease-out;
                        transition: all 0.3s ease-out;
                    }
                        .history__table-wrapper tbody tr:hover {
                            background: rgba(0, 0, 0, 0.2);
                        }
                            .history__table-wrapper tbody tr td:nth-child(1) {
                                font-size: 12px;
                                color: #5e5e5e;
                            }
                            .history__table-wrapper tbody tr td:nth-child(3), .history__table-wrapper tbody tr td:nth-child(8), .history__table-wrapper tbody tr td:nth-child(9), .history__table-wrapper tbody tr td:nth-child(10) {
                                font-size: 13px;
                                font-weight: bold;
                            }
                            .history__table-wrapper tbody tr td {
                                font-size: 12px;
                                color: #a1a1a1;
                            }
                                .history__table-wrapper tbody tr td.red {
                                    color: #c52428;
                                }
                                    .history__table-wrapper tbody tr td span.red {
                                        color: #c52428;
                                    }
                                .history__table-wrapper tbody tr td.green {
                                    color: #227e20;
                                }
                                    .history__table-wrapper tbody tr td span.green {
                                        color: #227e20;
                                    }
                                .history__table-wrapper tbody tr td.white {
                                    color: #fff;
                                }
                                .history__table-wrapper tbody tr td.up:before {
                                    content: '';
                                    width: 13px;
                                    height: 7px;
                                    display: inline-block;
                                    vertical-align: middle;
                                    background: url('../img/ico/green-arrow.png') center center no-repeat;
                                    margin-right: 7px;
                                }
                                .history__table-wrapper tbody tr td.down:before {
                                    content: '';
                                    width: 13px;
                                    height: 7px;
                                    display: inline-block;
                                    vertical-align: middle;
                                    background: url('../img/ico/red-arrow.png') center center no-repeat;
                                    margin-right: 7px;
                                }

                        .table_opened tr.load td {
                            height: 2px;
                            box-shadow: inset 0 1px #1f2121;
                        }

                    .history__table__empty {
                        width: 100%;
                        height: 460px;
                        background: url('../img/calendar-big.png') center top 115px no-repeat;
                        position: relative;
						text-align: center;
                    }
                        .history__table__empty span {
                            font-size: 14px;
                            color: #b9b9b9;
                            display: inline-block;
                            margin-top: 225px;
                            width: 450px;
                            line-height: 24px;
                        }
                    .history__pagination {
                        height: 36px;
                        text-align: center;
                        position: absolute;
                        bottom: -90px;
                        z-index: 5;
                        -webkit-transform: translateX(100%);
                        -ms-transform: translateX(100%);
                        -o-transform: translateX(100%);
                        transform: translateX(100%);
                    }
                        .history__pagination ul {
                            padding: 0;
                            margin: 0;
                            height: 36px;
                            border: 1px solid #2f3030;
                            display: inline-block;
							font-size: 0;
                            border-radius: 17px;
                            overflow: hidden;
                        }
							.history__pagination ul li {
								display: inline-block;
								border-left: 1px solid #2f3030;
								height: 36px;
								line-height: 36px;
								-moz-transition: all 0.3s ease-out;
								-o-transition: all 0.3s ease-out;
								-webkit-transition: all 0.3s ease-out;
								transition: all 0.3s ease-out;
							}
                                .history__pagination ul li:first-child {
                                    border: none;
                                    margin: 0;
                                }   
                                    .history__pagination ul li:first-child a {
                                        padding-left: 25px;
                                    }
                                    .history__pagination ul li:last-child a {
                                        padding-right: 25px;
                                    }
                                .history__pagination ul li a {
                                    font-size: 13px;
                                    color: #fff;
									background-color: rgba(0, 0, 0, 0.15);
                                    text-decoration: none;
                                    display: inline-block;
                                    padding: 0 18px;
                                    line-height: 33px;
                                }
                                    .history__pagination ul li.disabled a {
                                        cursor: default;
                                        color: #545454;   
                                    }
									.history__pagination ul li.disabled a:hover {
										opacity: 1;
									}
                                    .history__pagination ul li.active:hover {
                                        background: #c52428;
                                    }
                                        



        .bottom-info {
            width: 100%;
            height: 220px;
            position: relative;
            -webkit-user-select: none;
            -moz-user-select: none;
        }
            .balance-block {
                position: absolute;
                top: 57px;
                right: 0;
                text-align: right;
                width: 230px
            }
                .refill-btn {
                    width: 158px; 
                    height: 32px;
                    line-height: 31px;
                    font-size: 12px;
                    color: #fff;
                    background: #474848;
                    border-radius: 16px;
                    text-align: center;
                    text-shadow: -1px -1px #226f1c;
                    box-shadow: 0 0 5px #58b451;
                    float: right;
                    margin-bottom: 30px; 
                    cursor: pointer;
                    -webkit-transition: all 0.3s ease-out;
                    -o-transition: all 0.3s ease-out;
                    transition: all 0.3s ease-out;
                }
                    .refill-btn:hover {
                        box-shadow: 0 0 10px 2px #58b451;
                    }
                .balance-block hr {
                    width: 100%;
                    height: 1px;
                    box-shadow: none;
                    border: none;
                    background: #27292a;
                    margin: 0;
                    margin-bottom: 8px;
                    float: right;
                }
                .balance__bottom {
                    float: right;
                }
                    .balance-block span {
                        font-size: 12px;
                        color: #898989;
                        margin-right: 10px;
						line-height: 25px;
                    }
                    .balance {
                        font-size: 20px;
                        color: #fff;
                        display: inline-block;
                        vertical-align: top;
                    }

            .bottom-info-wrap {
                height: 55px;
                width: 1080px;
                float: right;
                margin-top: 110px;
            }
                .your-bid-block {
                    float: left;
                    height: 55px;
                    margin-right: 60px;
                }
                    .your-bid-block span {
                        font-size: 12px;
                        color: #898989;               
                        line-height: 55px;
                        margin-right: 20px;
                    }
                    .your-bid-block div, .your-bid-block input {
                        height: 55px;
                        background: #141414;
                        border: 1px solid #4a4a4a;
                        border-radius: 3px;
                        display: inline-block;
                        vertical-align: top;
                    }
                    .bid-minus {
                        width: 55px;
                        color: #fff;
                        font-size: 48px;
                        text-align: center;
                        line-height: 48px;
                        margin-right: 5px;
                        cursor: pointer;
                        -webkit-transition: all 0.3s ease-out;
                        -o-transition: all 0.3s ease-out;
                        transition: all 0.3s ease-out;
                    }
                        .bid-minus:hover {
                            box-shadow: 0 0 50px rgba(232, 90, 97, 1), inset 0 0 10px 2px #da2129;
                            border-color: #d1696e;
                        }
                    .bid-plus {
                        width: 55px;
                        color: #fff;
                        font-size: 36px;
                        text-align: center;
                        line-height: 55px;
                        margin-right: 15px;
                        cursor: pointer;
                        -webkit-transition: all 0.3s ease-out;
                        -o-transition: all 0.3s ease-out;
                        transition: all 0.3s ease-out;
                    }
                        .bid-plus:hover {
                            box-shadow: 0 0 35px rgba(53, 196, 59, 1), inset 0 0 10px 2px #58b451;
                            border-color: #33aa39;
                        }
                    .bid-amount {
                        width: 164px;
                        color: #fff;
                        font-size: 24px;
                        text-align: center;
                        line-height: 55px;
                    }
                .payment-block {
                    float: left;
                    height: 55px;
                }
                    .payment-block div {
                        display: inline-block;
                        vertical-align: top;
                    }
                    .payment-block span {
                        font-size: 12px;
                        color: #898989;               
                        line-height: 55px;
                        margin-right: 15px;
                    }
                    .payment {
                        font-size: 30px;
                        color: #fff;
                        font-weight: bold;
                        line-height: 55px;
                        margin-right: 40px;
                    }
                    .payment-percent {
                        font-size: 30px;
                        color: #fff;
                        font-weight: bold;
                        line-height: 55px;
                    }

.dropdown-menu{
	min-width: 100px;
	width: 155px;
	position: absolute;
	padding: 10px 0;
	background: rgba(0, 0, 0, 0.75);
	border: 1px solid #444645;
	border-radius: 3px;
	box-shadow: 0 0 8px #000;
	z-index: 10;
}
	.dropdown-menu li{
		list-style: none;
		display: block;
		width: 100%;
		height: 38px;
		text-align: center;
		padding: 0 8px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
		.dropdown-menu li a {
			display: inline-block;
			vertical-align: middle;
			width: 100%;
			height: 28px;
			line-height: 24px;
			font-size: 13px;
			color: #fff;
			text-decoration: none;
			border-radius: 4px;
			-webkit-transition: all 0.2s ease-out;
			-o-transition: all 0.2s ease-out;
			transition: all 0.2s ease-out;
		}
			.dropdown-menu li a:hover {
				background: #0c3740;
				color: #03c3f2;
			}

.popup {
    width: 100%;
    min-height: 100%;
    overflow:hidden;
    position:fixed;
    top:0px;
    background: rgba(0, 0, 0, 0.3)
}
    .popup__content {
        width: 685px;
        height: 335px;
        margin: 340px auto 0;
        border-radius: 9px;
        border: 1px solid #505557;
        position: relative;
/*        background: rgba(0, 0, 0, 0.75);*/
        background: -moz-linear-gradient(45deg, rgba(0,0,0,0.75) 0%, rgba(61,61,61,0.75) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(0,0,0,0.75)), color-stop(100%,rgba(61,61,61,0.75))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(45deg, rgba(0,0,0,0.75) 0%,rgba(61,61,61,0.75) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(45deg, rgba(0,0,0,0.75) 0%,rgba(61,61,61,0.75) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(45deg, rgba(0,0,0,0.75) 0%,rgba(61,61,61,0.75) 100%); /* IE10+ */
        background: linear-gradient(45deg, rgba(0,0,0,0.75) 0%,rgba(61,61,61,0.75) 100%); /* W3C */
        text-align: center;
        padding: 40px 80px 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        box-shadow: 0 0 38px #000;
    }
        .close-btn {
            position: absolute;
            top: 18px;
            right: 25px;
            width: 13px;
            height: 13px;
            display: inline-block;
            background: url('../img/ico/close.png') center center no-repeat;
            cursor: pointer;
        }
        .popup__content h3 {
            color: #fff;
            font-size: 20px;
            margin: 0;
        }
        .popup__results {
            max-width: 420px;
            margin: 50px auto 30px;
            overflow: hidden;
            padding-bottom: 20px;
            border-bottom: 1px solid #3d3a39;
        }
            .popup__results div {
                font-size: 14px;
                color: #6a6a6a;
            }
            .results__bid {
                float: left;
            }
                .results__bid span {
                    font-size: 30px;
                    color: #fff;
                    font-weight: bold;
                }
            .results__income {
                float: right;
            }
                .results__income span {
                    font-size: 30px;
                    font-weight: bold;
                }
                    .results__income span.green {
                        color: #35c73d;
                    }
                    .results__income span.red {
                        color: #c52428;
                    }
        .popup__social {

        }
            .popup__social ul {
                padding: 0;
                margin: 0;
                margin-bottom: 20px;
            }
                .popup__social ul li {
                    list-style: none;
                    display: inline-block;
                    margin: 0 1px;
                }
                    .popup__social ul li a {
                        display: block;
                        width: 24px;
                        height: 24px;
                    }
                        .popup__social ul li.google a {
                            width: 25px;
                            background: url('../img/ico/google.png') center center no-repeat;
                        }
                        .popup__social ul li.facebook a {
                            background: url('../img/ico/facebook.png') center center no-repeat;
                        }
                        .popup__social ul li.vk a {
                            background: url('../img/ico/vk.png') center center no-repeat;
                        }
                        .popup__social ul li.twitter a {
                            width: 25px;
                            background: url('../img/ico/twitter.png') center center no-repeat;
                        }  
            .popup__social p {
                color: #b9b9b9;
                font-size: 13px;
                line-height: 21px;
            } 
footer {
    height: 80px;
    width:100%;
    background: #161616;
    line-height: 80px;
    overflow: hidden;
}
    .footer-wrap {
        width: 1260px;
        margin: 0 auto;
    }
        .footer_left {
            float: left;
        }
            .footer_left p {
                display: inline-block;
                color: #fff ;
                font-size: 12px;
                margin: 0;
            }

        .footer_right {
            float: right;
        }
            .footer_right p {
                font-size: 12px;
                color: #5d5d5d;
                display: inline-block;
                margin: 0;
            }
                .footer_right p a {
                    font-size: 13px;
                    color: #00ccff;
                    text-decoration: none;
                    margin: 0;
                    margin-left: 3px;
                }
            .footer__menu {
                display: inline-block;
                margin: 0 15px 0 45px;
            }

/*LOGIN PAGE*/

.login-header {
	padding-top: 210px;
	text-align: center;
}
	.login-header h2 {
		font-size: 24px;
		color: #fff;
	}
	.login-header hr {
		margin: 20px auto 30px;
		width: 50px;
		height: 1px;
		background-color: #bf2529;
		box-shadow: none;
		border: none;
	}
	.login-header>p {
		font-size: 15px;
		color: #b1b1b1;
		line-height: 25px;
	}
	.login-form {
		margin: 50px auto 105px;
		width: 225px;
	}
	.login-form.reg-form {
		width: 300px;
	}
		.login-form table {
			width: 100%;
			margin: auto;
		}
			.login-form table td:nth-child(1) {
				width: 110px;
			}
			.login-form table p {
				font-size: 15px;
				color: #b1b1b1;
				margin: 0;
				text-align: left;
			}
		.login-form input {
			width: 100%;
			/*width: 225px;
			display: block;
			margin: auto;*/
			height: 46px;
			border: 1px solid #505251;
			border-radius: 3px;
			background-color: rgba(0, 0, 0, 0.1) !important;
			text-align: center;
			font-size: 13px;
			color: #a6a6a6;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			-moz-transition: all 0.3s ease-out;
			-o-transition: all 0.3s ease-out;
			-webkit-transition: all 0.3s ease-out;
			transition: all 0.3s ease-out;
		}
			.login-form input:focus {
				outline: none;
			}
			.login-form input[type="text"] {
				margin-bottom: 13px;
			}
				.login-form input[type="text"]:focus, .login-form input[type="password"]:focus {
					background-color: rgba(255, 255, 255, 0.1) !important;
				}
			.login-form input[type="submit"] {
				width: 100%;
				/*width: 225px;
				display: block;
				margin: 37px auto;*/
				margin-top: 37px;
				background-color: #bf2529 !important;
				border: none;
				color: #fff;
				font-size: 15px;
				border-radius: 23px;
			}
			.login-form input[type="submit"]:hover {
				box-shadow: 0 0 50px rgba(232, 90, 97, 1);
				border-color: #d1696e;
				background-image: url('../img/down-btn_glow.png');
				background-position: left center;
				-ms-background-position-x: left;
				background-position-x: left;
			}	

	.login-bottom {
		width: 690px;
		margin: 0 auto;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		text-align: left;
		padding-top: 30px;
		overflow: hidden;
	}
		.login-bottom a {
			font-size: 13px;
			color: #fff;
			text-decoration: underline;
		}
			.login-bottom>a {
				display: block;
				margin-bottom: 15px;
			}
		.login-bottom p {
			font-size: 13px;
			color: #8d8d8d;
			float: left;
		}
			.login-bottom p a:before {
					content: '';        /*костыль*/
					display:inline-block;
					width: 5px;
				}
		.login-bottom h5 {
			float: right;
			color: #9da2a4;
			font-size: 13px;
			line-height: 18px;
		}







/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}