* {margin: 0; padding: 0;}

body {font-family: 'Open Sans', Arial, sans-serif;}

ul li {list-style: none;}
li > ul {margin-left: 26px;}

/*scrollbar*/
::-webkit-scrollbar {background: transparent; margin-right: 20px;}
::-webkit-scrollbar-button {background: transparent; display: none;}
::-webkit-scrollbar-track {background: transparent;}
::-webkit-scrollbar-thumb {width: 12px; border-radius: 8px; background: #E5E5E5; display: block;}

/*buttons*/
.btn-stl {display: block; width: 100%; margin: 0 auto; text-align: center; outline: none; border: none; transition: .3s all; cursor: pointer;}
.btn-stl--pink {border-radius: 4px; background: #EE2624; color: #fff; font-weight: bold; font-size: 16px; text-transform: uppercase;}
.btn-stl--pink:hover {background: #F33332; color: #fff; text-decoration: none;}

.btn-login {max-width: 200px; max-height: 50px; line-height: 50px; right: 0; top: 0; margin: 30px 30px 0 0; z-index: 1;}

/*checkbox custom*/
.custom-ch > label {cursor: pointer;}
.custom-ch input[type="checkbox"] {cursor: pointer; position: absolute; opacity: 0;}
.custom-ch__container {display: inline-block; position: relative; padding-left: 25px; margin-bottom: 12px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.custom-ch .checkmark { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; height: 16px;  width: 16px; background-color: #fff; border-radius: 2px; border: 1px solid #ACB6C0; transition: .3s all;}
.custom-ch .checkmark:after {content: ""; position: absolute; display: none;}
.custom-ch__container:hover input ~ .checkmark { -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 2px #000000; box-shadow: inset 0 0 2px #000000;}
.custom-ch__container input:checked ~ .checkmark:after, .custom-ch__container input[checked="checked"] ~ .checkmark:after { display: block;}
.custom-ch__container .checkmark:after { left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 6px; height: 9px; border: solid #000; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

.custom-ch--use-descr .custom-ch__container {padding-left: 45px; font-size: 12px; color: rgba(255, 255, 255, .6); line-height: 33px;}
.custom-ch--use-descr .custom-ch__container .checkmark:after {width: 8px; margin-top: 5px; margin-left: 11px; height: 18px; border-color: rgba(0, 0, 0, .5);}
.custom-ch--use-descr .custom-ch__container .checkmark {width: 30px; height: 30px; background: rgba(255,255,255,.2); border-radius: 4px; border: none;}

.custom-ch--use-type .custom-ch__container {padding-left: 45px; font-size: 12px; color: rgba(255, 255, 255, .6); line-height: 33px;}
.custom-ch--use-type .custom-ch__container .checkmark:after {width: 8px; margin-top: 5px; margin-left: 11px; height: 18px; border-color: rgba(0, 0, 0, .5);}
.custom-ch--use-type .custom-ch__container .checkmark {width: 30px; height: 30px; background: rgba(255,255,255,.2); border-radius: 4px; border: none;}

.custom-ch--dotted .custom-ch__container {font-size: 11px; text-transform: uppercase;}
.custom-ch--dotted .custom-ch__container.active {font-size: 14px; font-weight: 900;}
.custom-ch--dotted .custom-ch__container .checkmark:after {background: #000; width: 6px; height: 6px; transform: none;}

.custom-ch--dotted_child {display: inline-block;}
.custom-ch--dotted_child .custom-ch__container .checkmark:after {background: #000; width: 6px; height: 6px; transform: none;}

/*aside*/
.aside-fixed {display: block; float: right; position: fixed; top: 0; right: 0; height: 100vh; background: #2B2B2B; width: 25%; z-index: 1; overflow-y: auto;}
.aside-fixed .is-scroll {padding-bottom: 170px; overflow-y: auto; overflow-x: hidden;}
.b-welcome {padding: 30px 0 20px 0; border-bottom: 1px solid #2E3032;}
.b-welcome__group {box-sizing: border-box; padding: 0 30px; overflow: hidden;}
.b-welcome__name {float: left;}
.b-welcome__name span {color: #fff; font-size: 14px;}
.b-welcome__login {float: right;}
.b-welcome__login a {color: #fff; text-decoration: underline; font-size: 12px;}
.b-welcome__login a:hover {text-decoration: none;}

.b-date {margin: 60px 0;}
.b-date__group {padding: 0 30px;}
.b-date__title {margin-bottom: 15px; font-size: 16px; text-transform: uppercase; color: #fff; font-weight: 400;}
.b-date__fields label, .b-date__fields input {display: block;}
.b-date__fields label {color: rgba(255,255,255,.6); font-size: 12px; line-height: 16px; margin-bottom: 2px;}
.b-date__fields #id_start_date {margin-bottom: 25px;}
.b-date__fields input {width: 100%; height: 30px; padding-left: 10px; max-width: 300px; border-radius: 4px; background: rgba(255,255,255,.2); border: none; color: #fff;}

.b-generate {position: absolute; width: 100%; bottom: 0; padding: 34px 0 55px 0; text-align: center; border-top: 1px solid #2E3032; background: #2B2B2B;}
.b-generate__group {padding: 0 30px;}
.btn-generate {max-width: 240px; height: 60px;}

.b-use-descr__group {padding: 0 30px;}
.b-use-descr__title {font-size: 16px; color: #fff; text-transform: uppercase; font-weight: 400; margin-bottom: 15px;}

/*content*/
.b-content {box-sizing: border-box; padding-left: 30px; padding-top: 30px; width: 74%;}
.b-content .logo-site {margin-bottom: 20px;}
.b-content .title-site h1 {font-size: 40px; font-weight: bold; text-transform: uppercase;}
.b-content .select-projects {margin-top: 40px;}

.select-projects__controls {display: flex; align-items: center; min-height: 57px;}
.select-projects__controls .control:not(:last-child) {margin-right: 20px;}

.lists-project {-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; padding: 20px 30px;}
.lists-project__error {outline: 1px solid #F33332;}
.lists-project__item {margin-bottom: 25px;}
.lists-project__item .custom-ch--dotted_child .custom-ch__container {font-weight: 900; text-transform: capitalize;}

.item-child .custom-ch {display: inline-block;}
.wrp-counts__count-proj {font-size: 14px; color: #A4AFB8; display: inline-block; vertical-align: top; margin-top: 1px; margin-left: 5px;}

.mobile-menu {display: block; position: absolute; right: 0; top: 0; margin: 30px 30px 0 0;}
.mobile-menu .line {width: 35px; height: 5px; border-radius: 30px; background: #EE2624; display: block; margin-bottom: 7px;}

.errorlist {margin: 0;}
.errorlist li {font-size: 12px; color: red;}

/*login*/
.btn-stl--pink {border-radius: 4px; background: #EE2624; color: #fff; font-weight: bold; font-size: 16px; text-transform: uppercase;}
.btn-stl--pink:hover {background: #F33332; color: #fff; text-decoration: none;}

.b-content {padding: 30px;}
form input {display: block; max-width: 400px; width: 100%;}
.btn-large {max-width: 400px; width: 100%;}

.site-header {box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); padding: 20px 0; margin-bottom: 10px;}
.site-header .site-title {color: #fff; font-weight: bold; text-transform: uppercase; font-size: 24px; margin-bottom: 0;}

.form-login {max-width: 400px; margin: 0 auto;}
.form-login input {height: 50px; border: 1px solid #ddd; padding-left: 15px; box-sizing: border-box; border-radius: 50px; outline: none;}
.form-login input:focus {border: 1px solid #007bff;}
.btn-login {height: 50px; border-radius: 50px; width: 100%; line-height: 1.2; margin: 10px auto;}

.errorlist li {color: red; list-style: none; font-size: 14px;}
.errorlist {padding-left: 0;}
#projects_errors {}
#projects_errors span {padding-left: 20px; color: #F33332; list-style: none; font-size: 14px; }
#projects_errors span.hidden {display: none}

    @media(max-width: 1230px) {
      /*.logo-site, .title-site {max-width: 400px; margin: 0 auto;}*/
      .title-site {margin-bottom: 30px;}
    }
    @media(max-width: 480px) {
      .title-site h1 {font-size: 2rem;}
      .b-option-projects .container {padding: 0;}
    }

/*responsive*/
@media (max-height: 582px) {
    .aside-fixed .is-scroll {padding-bottom: 0;}
    .b-generate {position: static;}
}

@media (max-width: 1060px) {
    .b-content {width: 95%;}
    .aside-fixed {transform: translateX(100%); visibility: hidden; transition: .3s all; width: 50%;}
    .aside-fixed.active {visibility: visible; transform: translateX(0);}
}

@media(max-width: 767px) {
    .aside-fixed {width: 70%;}
}

@media (max-width: 660px) {
    .lists-project {-webkit-column-count: 1; -moz-column-count: 1; column-count: 1;}
}

@media(max-width: 480px) {
    .lists-project {margin-left: 0;}

    .b-content .title-site h1 {font-size: 19px;}
}