$colorCheckBoxForms:$colorCheckBorder; #overlay { position: fixed; z-index: 9; width: 100%; height: 100%; background: #000; opacity: 0.85; top: 0; left: 0; } #modal_close { $h:67; width: 67px; height: $h + px; position: absolute; top: 0; right: -67px; cursor: pointer; display: block; z-index: 11; @include svgIcon; &:before { display: block; //color: $main-color; //color: #333; color: #a0a0a0; line-height: 40px; text-align: center; font-size: 16px; content: "\e907"; @include Transition(0.05); } &:active { &:before { @include Scale(1.35); } } } #login_modal { #modal_close { &:before { color: #a0a0a0; } } } #basket_modal { #modal_close { &:before { color: #a0a0a0; } } } .forms_ { z-index: 10; display: none; position: absolute; width: 615px; border-radius: 4px; left: 50%; margin-left: -307px; top: 0; opacity: 0; &.forms_750 { width: 750px; margin-left: -375px; } label { //font-size: 16px; } form { width: 100%; background: #fff; padding-bottom: 30px; float: left; padding-top: 29px; } &#table-sizes { padding: 0 68px; #modal_close { color: #a0a0a0; } } } .form-title { height: 77px; line-height: 77px; background: #fff; font-weight: normal; font-size: 24px; text-align: center; font-family: Georgia; border-bottom: 1px solid #d2d2d2; } .input-wr { padding: 0 15px; @include wfl; } .button-wr { @extend .input-wr; margin-top: 45px; button { @extend .btn_; width: 225px; margin: 0 auto; float: none !important; text-transform: uppercase; } } .form-register-wr { .input-wr { padding: 0; } } .login-wrapper { background: #fff; width: 100%; float: left; padding-bottom: 30px; form { padding-bottom: 0; padding-top: 19px; } .btns_reg { margin-top: 27px; } .sidebar_checks { margin-top: 18px; } .button-wr { position: relative; height: 33px; margin-top: 33px; button { position: absolute; top: 0; right: 0; width: 166px; margin-right: -83px; font-size: 11px; text-transform: uppercase; font-weight: 700; color: $main-color; border: 1px solid $main-color; background: #fff; height: 33px; line-height: 33px; &:hover { background: $main-color; color: #fff; border: 1px solid $main-color; } &:active { background: #4f4f4f; color: #fff; border: 1px solid #4f4f4f; } } } } .forms_, .forms_pages { .sidebar_checks, .radio_custom { input { + label { &:before { border: 1px solid $colorCheckBoxForms !important; top: 1px; } a { &:before { } } } &:checked { + label { &:before { border: 0 !important; } } } } } } /*********login form restore/register************/ .btns_reg { width: 100%; text-align: center; margin-top: 27px; float: left; a, span { @include wfl; font-size: 13px; } } .restore_password_ { text-decoration: none; margin-top: 17px; font-size: 14px; display: block; } .no_account_yet { font-size: 14px !important; font-weight: 700; margin-top: 0; } .to-register-link { margin-top: 13px; font-size: 14px !important; } .register-fb { display: inline-block; margin-top: 55px; text-align: center; width: 100%; span { font-size: 14px; font-weight: 700; width: 100%; } a { margin-top: 14px; display: inline-block; width: 122px; height: 33px; line-height: 33px; font-weight: 700; font-size: 11px; text-transform: uppercase; text-decoration: none !important; border: 1px solid #d2d2d2; color: #d2d2d2; position: relative; padding-left: 63px; text-align: left; span { width: 44px; height: 21px; border-right: 1px solid #d2d2d2; position: absolute; left: 1px; top: 50%; margin-top: -11px; &:before { @include svgIcon; content: '\e905'; color: #d2d2d2; font-size: 16px; line-height: 21px; position: absolute; text-align: center; width: 100%; height: 100%; display: block; left: 0; top: 0; } } } } /**********************************/ /****************restore******************/ .email-remind-txt, .emails_txt, .txt_reg_page, .add_inform { font-size: 13px; color: #888; margin-top: 10px; } .emails_txt { } /**********************************/ .button-left { button { float: left !important; } } .button-right { button { float: right; } } /**********************************/ .forms_pages { } /**********************************/ .txt-forms_ { background: #fff; width: 100%; padding: 15px; @include wfl; } .txt-forms_overflow { height: 500px; overflow-x: hidden; } /**********************************/ /**************success*******************/ #success_form { width: 420px; height: 152px; border-radius: 4px; position: absolute; top: 30px; left: 50%; margin-left: -210px; display: none; z-index: 99998; background: #fff; padding: 0 15px; } .txt-success { width: 420px; height: 152px; display: table-cell; vertical-align: middle; text-align: center; font-size: 16px; color: #363636; span { font-size: 20px; } p { margin-top: 3px; } } /**********************************/ .modal-forms-wrapp { background: #fff; padding: 26px 15px 29px 15px; } #hot_line { text-align: center; } .model-name-test { text-align: center; font-size: 18px; text-transform: uppercase; color: #333; } [class*="hot_line-txt-"] { font-size: 15px; line-height: 15px; } .hot_line-txt-1 { margin-top: 37px; } .hot_line-txt-1, .hot_line-txt-5 { font-weight: 700; } .hot_line-txt-2 { font-size: 24px; margin-top: 18px; } .hot_line-txt-3 { margin-top: 12px; } .hot_line-txt-4 { font-size: 13px; color: #898989; margin-top: 9px; } .hot_line-txt-5 { margin-top: 28px; } .hot_line-txt-6 { margin-top: 13px; } .hot_line-txt-7 { font-size: 11px; color: #898989; margin-top: 49px; } /*****************inform*****************/ /**********************************/ .help-block { display: none!important; width: 100%; float: left; font-size: 13px; color: #888; margin-top: 5px; } .forms_title { text-align: center; font-size: 24px; line-height: 26px; font-weight: normal; font-family: Georgia; border-bottom: 1px solid #d2d2d2; padding-top: 25px; padding-bottom: 25px; } @media (max-width: 767px) { .login-wrapper { .btns_reg { margin-top: 20px; } .button-wr { button { position: relative; right: auto; top: auto; margin: 0 auto; } } } .forms_ { width: 100%; left: 0; margin-left: 0; border-radius: 0; padding: 0 15px; label { font-size: 16px; } } #modal_close { right: 15px; } .form-title { font-size: 20px; } .register-fb span { display: block; } } @media (max-width: 555px) { } @media (max-height: 550px) { .txt-forms_overflow { height: 350px; } } @media (max-height: 450px) { .txt-forms_overflow { height: 250px; } #success_form { width: 300px; margin-left: -150px; } } @media (max-height: 350px) { .txt-forms_overflow { height: 200px; } } @media (max-height: 300px) { .txt-forms_overflow { height: 150px; } } @media (max-height: 250px) { .txt-forms_overflow { height: 100px; } } @media (max-height: 200px) { .txt-forms_overflow { height: 50px; } } @media (max-height: 150px) { .txt-forms_overflow { height: 30px; } }