* {
  margin: 0; 
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height:100vh;
  --border-grey: #e2eaf3; 
  --border-lightgrey: #c9d8e8;
  --num-red: #ff6680;           
  --num-green: #25daa7;           
  --bg: #fff;             
  --bg-dark: #f0f4fa;           
  --bg-light-gray: #f7fafc;
  --bg-blue: #3ca6db;
  --bg-light-blue: #25c7db;
  --text-grey: #95a0ac;         
  --text-grey-dark: #777777;
  --text-turquoise: #0eabd7;    
  --text-turquoise-opacity: rgba(14,171,215,.4);
  --text-red: #ff6680;          
  --text-green: #25daa7;
  --text-btn: #fff;
  --bg-green: #00c48c;          
  --bg-red: #ff647c;
  --bg-grey: #7f8b99;
  --bg-grey-hover: #9db3cd;
  --green-gradient-on: #96e6c5;
  --green-gradient-in: #7ab6bb;
  --text-grey-clear: #52657a;
  --text-grey-input: #52657a;
  --red-gradient-on: #e8a79c;
  --red-gradient-in: #e27687;
  --lightgrey: #e9eff6;
  --darkgrey: #dfe7f1;
  --radio-shadow: transparent;
  --bg-tiker: #fff;
  --form-text: #a9b7b7;          
  --form_title: #5e6d7f;         
  --form_input: #f0f4fa;        
  --form_btn: #718083;           
  --form_btn_hover: #636967;     
  --form-link: #25c7db;          
  --form-text-btn: #fff;         
  --form-input-error: #cb3d3d; 
  --form-bg-error: #fdf5f5;
  --color-selected: #000000;
  --mainframe: #0e1923;
  --bg-hover: rgba(255,255,255,0.1);
  --blue1: #20dfc6;
  --blue2: #20b9df;
  --darkgrey: #c9d8e8;
  --lightgrey: #e9eff6;
  --bg-light: #f8fafc;
  --borderline: #d5dad9;
  
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 300;
  line-height: 1.0;
  font-size: 12px;
  color: var(--text-grey);
  text-align: left;
  background-color: var(--bg);
}

body.black-theme {
  --border-grey: #445569; 
  --bg: #f8fafc;;
  --bg-light-gray: #293e56;
  --bg-dark: #1f3247;
  --lightgrey: #1f3247;
  --border-lightgrey: #445569;
  --darkgrey: #152332;
  --radio-shadow: rgba(0,0,0,.3);
  --text-grey-clear: rgba(219,229,240,.7);
  --text-grey-input: #fff;
  --bg-tiker: transparent;
  --text-grey-dark: #E6F1FF;
  --text-grey: rgba(219,229,240,.7); 
  --color-selected: rgba(219,229,240,.7);
  --num-red: #ff6680;           
  --num-green: #25daa7;         
  --bg-blue: #3ca6db;
  --bg-light-blue: #25c7db;
  --green-gradient-on: #96e6c5;
  --green-gradient-in: #7ab6bb;
  --red-gradient-on: #e8a79c;
  --red-gradient-in: #e27687;
  --text-red: #ff6680;          
  --text-green: #25daa7;
  --text-turquoise-opacity: rgba(14,171,215,.4);
  --text-turquoise: #0eabd7;    
  --bg-green: #00c48c;          
  --bg-red: #ff647c;
  --bg-grey: #7f8b99;
  --bg-grey-hover: #9db3cd;
  --form-text: #a9b7b7;          
  --form_title: #5e6d7f;         
  --form_input: #f0f4fa;        
  --form_btn: #718083;           
  --form_btn_hover: #636967;     
  --form-link: #25c7db;          
  --form-text-btn: #fff;         
  --form-input-error: #cb3d3d; 
  --form-bg-error: #fdf5f5;
  --bg-hover: rgba(255,255,255,0.1);
  --blue1: #20dfc6;
  --blue2: #20b9df;
  --grey: #c9d8e8;
  --bg-light: #f8fafc;
  --orange: #ffac4d;
  --borderline: #d5dad9;
}


.form-container {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-light);
}

p {
  margin-block-start: 0;
  margin-block-end: 0;
}

input {
  outline: none;
  border: none;
}

input[type="search"] {
   -webkit-appearance: none;
}


/*стилизация текста в input placeholder*/
::-webkit-input-placeholder { /* WebKit browsers */
    color:    var(--form-text);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:   var(--form-text);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    var(--form-text);
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    var(--form-text);
}

input:focus::-webkit-input-placeholder { color:transparent;}
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */


a {
  text-decoration: none;
  color: var(--form-link);
}

a:hover {
  color: var(--form-text);
}


/*кнопка*/
.button {
  width: 100px;
  height: 40px;
  background: var(--bg-grey);
  color: var(--text-btn);
  border: 1px solid hsla(0,0%,100%,.2);
  border-radius: 6px;
  font-family: DIN Pro,sans-serif;
  text-align: center;
  margin-top: 20px;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.button:hover {
  background: var(--bg-grey-hover);
  cursor: pointer;
}
/*кнопка*/


/*шапка*/
.form-box-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
  box-shadow:0 2px 3px rgb(0 0 0 / 5%);
  margin-bottom:20px;
}

.header .form-box-logo {
  background-image: url(/static/images/logo.png);
  background-repeat: no-repeat;
  background-position: center;
  min-width: 50px;
  height: 60px;
  background-size: 30px;
}

.form-box-header ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding:10px;
}

.form-box-header ul li {
  min-width: 150px;
  padding: 20px 10px;
  font-size: 18px;
  text-align: center;
  list-style-type: none;
}

.form-box-header ul li a {
  color: var(--form_title);
}

.form-box-header ul li a:hover {
  color: var(--form-link);
}

.form-box-header ul li.button {
  background: -webkit-linear-gradient(left,var(--blue1),var(--blue2));
  border: 1px solid hsla(0,0%,100%,.2);
  border-radius: 6px;
  font-family: DIN Pro,sans-serif;
  text-align: center;
  padding: 10px;
  margin-top: 0;
}

.form-box-header ul li.button:hover {
  background: var(--blue2);
  cursor: pointer;
}

.form-box-header ul li.button a {
    color: var(--form-text-btn);
}



/*футер*/
.form-box-footer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.form-box-footer ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding:10px;
}

.form-box-footer ul li {
  min-width: 150px;
  padding: 20px 10px;
  font-size: 14px;
  text-align: center;
  list-style-type: none;
}

.form-box-footer ul li a {
  color: var(--text-grey-input);
}

.form-box-footer ul li a:hover {
  color: var(--form-link);
}

.form-box-header .form-box-logo,
.form-box-footer  .form-box-logo {
  background-image: url(/static/images/logo.png);
  background-repeat: no-repeat;
  background-position: center;
  min-width: 50px;
  height: 70px;
  background-size: 30px;
}

.form-box-footer ul li.button {
  background: -webkit-linear-gradient(left,var(--blue1),var(--blue2));
  border: 1px solid hsla(0,0%,100%,.2);
  border-radius: 6px;
  font-family: DIN Pro,sans-serif;
  text-align: center;
  padding: 10px;
  margin-top: 0;
}

.form-box-footer ul li.button:hover {
  background: var(--bg-grey-hover);
  cursor: pointer;
}

.form-box-footer ul li.button a {
  color: var(--form-text-btn);
}

.fb-footer { 
  padding:10px;
  background: var(--form_title);
  width:100%; 
  bottom: 0;
}

.form-box-copyright {
  padding:10px;
  text-align: center;
}


/*прайс*/

.paymentForm {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  color: var(--form_title);
  flex-grow:1;
  width:100%;
}

.paymentForm .priceList {
  width:100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom:20px;


}

.paymentForm .priceList ul {
  font-size:1rem;
}

.paymentForm .priceList ul li {

}

.rateName {
  font-size:2rem;
  font-weight:700;
}

.paymentForm .priceList ul {
  list-style-type: none;
}

.paymentForm .priceList ul li:before {
    content: '';
    position: relative;
    top: 8px;
    display: inline-block;
    margin: 0 10px 0 0;
    width: 30px;
    height: 30px;
    background: url(/static/images/checkmark.svg) center no-repeat;
}



.paymentForm .priceBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width:100%;
  margin-bottom:20px;
}


.paymentForm .priceFree {
  width:100%;
  text-align: center;
  margin-bottom:40px;
}

.paymentForm .priceFree a {
  color: var(--blue2);
  font-size:1.2rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--blue2);
}

.paymentForm .priceFree a:hover {
  color: var(--form_title);
  border-bottom: none;
}



.paymentForm .priceBlock {
  width:25%;
  padding: 20px;
  margin:10px;
  min-height:300px;
  background: var(--text-grey-input);
  box-shadow: 0 1px 1px var(--radio-shadow);
  text-align:center;
}

.pb-line {
  margin-bottom: 20px;
}

.pb-line.period {
  font-size:1.5rem;
  font-weight: 700;
}

.pb-line.cost {
  font-size:3rem;
  font-weight: 700;
}

.pb-line.cost .dol {
  font-size:1.5rem;
  font-weight: 700;
}

.pb-line.sum .dol {
  font-size:0.8rem;
}

.pb-line.month {
  font-size:1rem;
  margin-bottom: 40px;
}

.pb-line.sum {
  font-size:1.1rem;
  margin-bottom: 10px;
}

.pb-line.saving {
  padding:5px;
  width:100%;
  background-color: #f0f7fb;
  text-align:center;
  margin: 10px auto 0;
}



.pb-line.button {
    background: -webkit-linear-gradient(left,var(--blue1),var(--blue2));
    border: 1px solid hsla(0,0%,100%,.2);
    border-radius: 6px;
    font-family: DIN Pro,sans-serif;
    text-align: center;
    padding: 10px;
    width: 100%;
    margin: 10px auto 0;
}

.pb-line.button:hover {
    background: var(--blue2);
    cursor: pointer;
}

.pb-line.button a {
    color: var(--form-text-btn);
    text-decoration: none;
    font-size: 1.2rem;
}

.pb-line.button.no-saving {
  margin: 100px auto 0;
}















@media screen and (max-width: 820px) {

.wrap {
  flex-direction: column;
}

.paymentForm .priceBox {
  flex-direction: column;
  width:80%;
}

.paymentForm .priceBlock {
  width:90%;
}



}