/* Your custom styles */
/* @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); */

html {
  height: 100%;
}

body {
  /* background-color:#ffffff; */
  background-color: #f8f9fa;
  position: relative;
  min-height: 100%;
  /* font-family: 'Montserrat', sans-serif; */
}

table.collap td {
  padding: 10px 10px 10px 5px;
}

table.collap th {
  padding: 3px 15px;
}

.flex-center.flex-column {
  padding-bottom: 5rem;
}

.form-simple {
  width: 30%;
  min-width: 300px;
  padding-top: 4rem;
 
}

.form-simple-index {
  min-width: 300px;
  padding-top: 2rem;
}

.form-simple-index .col-12 {
  padding: 0px;
}

.form-simple-index .col-12 .card {
    margin: auto;
    max-width: 411px;
}

.form-simple-result {
  min-width: 450px;
}

.form-simple .font-small {
  font-size: 0.8rem; 
}

.form-simple .header {
  border-top-left-radius: .3rem;
  border-top-right-radius: .3rem; 
}

.form-label-red input[type=text]:focus:not([readonly]) {
  border-bottom: 1px solid #ff3547;
  -webkit-box-shadow: 0 1px 0 0 #ff3547;
  box-shadow: 0 1px 0 0 #ff3547; 
}

.form-label-red input[type=text]:focus:not([readonly]) + label {
  color: #4f4f4f; 
}

.form-label-red input[type=password]:focus:not([readonly]) {
  border-bottom: 1px solid #ff3547;
  -webkit-box-shadow: 0 1px 0 0 #ff3547;
  box-shadow: 0 1px 0 0 #ff3547; 
}

.form-label-red input[type=password]:focus:not([readonly]) + label {
  color: #4f4f4f; 
}

.navbar {
  background-color: #1976D2;
}
nav.logo {
  padding: 0 1rem;
} 
nav.logo img.logo {
  width: 200px;
}

.form-table {
 padding-top: 5%;
 padding-bottom: 5%;
 width: 60%;
}

.btn.own_style {
  font-size: 1.2rem;
  padding: .1rem 1.3rem;
}


.action-button {
  bottom: 10%;
  font-family: arial;
  font-weight: 600;
  border-radius: 2px;
  background: #585858;
  color: #fff;
  font-size: 12px;
  padding: 5px 7px;
  margin-right: 12px;
  position: absolute;
  right: 100%;
  white-space: nowrap;
}

.btn-floating {
  width: 56px;
  height: 56px;
}
.btn-floating i {
  line-height: 56px;
  font-size: 1.5rem;
}
.btn-floating i:hover {
  color: inherit;
}

.fixed-action-btn {
  bottom: 3rem;
}

.btn-floating + .action-button {
  opacity: 0;
}

.btn-floating:hover + .action-button {
  opacity: 1 ;
}

.go_back {
  font-size: 1.5rem;
}

.i_back {
  color: #fff;
}

.td-s {
  text-align: center;
  min-width: 200px;
  min-height: 200px;
}

.p-s {
  text-align: right;
  text-transform: uppercase;
}

.p-ss {
  font-size: 70px;
  text-align: left;
  padding: 0 0.5rem;
  line-height: 55px;
}

.p-ss-1 {
  font-size: 100px;
  text-align: center;
  padding: 2rem 0 0 0;
  line-height: 70px;
}

.p-ss-2 {
  font-size: 16px;
  text-align: center;
  padding: 2.7rem 0.5rem;
}

.right {
  text-align: right;
}

.card .card-body p.p-ss {
  margin-bottom: 0rem;
}
.card .card-body p.p-s {
  margin-bottom: 0rem;
}

.card .card-body p.news {
  margin-bottom: 0;
  text-transform: uppercase;
  text-align: center;
}

.card-body.news {
cursor: pointer;
  }

.card-body.news:hover {
  transition: all .2s ease-in-out;
  color: rgb(255, 153, 0);
}
    
.card-body-result {
  padding: 1.25rem 1.5rem;
}


.special-s {
  height: 120px;
  width: 120px;
  display: initial!important;
}

.anactive {
  opacity: 0.3;
}

.anactive-p {
  opacity: 0.6;
}

label.link {
  width: 100%;
}

.hide {
  display: none; 
}
.hide + label ~ div{
  display: none;
}

.hide + label {
  cursor: pointer;
  display: inline-block; 
}

.hide:checked + label + div {
  display: block; 
}

.hide + label ~ div.hide_pass{
  display: none;
}

.hide:checked + label + div.hide_pass {
  display: block; 
}

.personal_page {
  width: 60%;
  padding-top: 5%;
  padding-bottom: 5%;
  min-width: 300px;
}

.form_preoders {
  min-width: 300px;
}

/*table#table-products {
  height: 500px;
}
*/
.hidecity + label ~ div.hide_div {
  display: none;
}
.hidecity + label {

  display: inline-block;
}
.hidecity:checked + label + div.hide_div {
  display: block; 
}

textarea.md-textarea {
  min-height: 0.5rem;
}

.form_pad {
  padding: 0;
}

textarea.md-textarea {
  height: 1.7rem;
  padding: 0.5rem 0 0 0;
}

.lab_pad {
  padding: 0 15px;
}

.mar-z {
  margin-bottom: 0;
}

input[type=radio]:checked+label:after {
  border-color: #4285f4;
  background-color: #4285f4;
  z-index: 0;
  -webkit-transform: scale(1.02);
  -ms-transform: scale(1.02);
  transform: scale(1.02);
}



.sum_div {
  font-size: .9rem;
}

.div_bonus_cur {
  font-size: 11px;
  text-align: left;
  /*      padding-bottom: 0.8rem;*/
}

.div_error {
  color: red;
  font-size: 11px;
}

.row_index_error {
  padding-bottom: 1.3rem;
}

.div_pad_pas {
  margin-bottom: 0px;
  padding-bottom: 0px!important;
}

.btn-logout {
  background:none;
  border: none;
}

@media screen and (max-width: 1400px) {
  .md-form label.label_smaller {
    font-size: 0.8rem;
  }
}


@media screen and (max-width: 520px) {
  .div_bonus_cur {
    text-align: center;
  }
}

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

  .h3-size {
    font-size: 20px;
  }
}


select.form-control {
  width: 47%;
  min-width: 200px;
}

.md-form-select {
  margin-top: 15px;
}

.lab_pad_lab {
  padding-bottom: 5px;
}

.form-simple .font-super-small {
  font-size: 0.7rem;

}

.red-border  {
  border: 1px solid #ef9a9a;
}

.sh-main  {
  max-width: 750px;
  margin: auto;
}

.sh-main > .card-body > div > p {
  margin: 20px auto 10px;
  color: #0009;
}

.td-1 {
  width: 40%;
}

.td-2 {
  width: 60%;
}

.sh-main .md-form.input-group {
  max-width: 600px;
  margin: auto;
}


.card:not([class*="card-outline-"]) .sh-card {
  box-shadow: none;
  border:solid 2px #0003;
  margin:1rem auto;
}

.sh-card table {
  width: 100%;
}

.sh-card table th {
  text-align: center;
  border-bottom: solid 2px #0003;
}

.sh-card button {
  float: right;
}

.sh-card .desc_s {
  color: #292124;
  font-weight: 300;
  font-size: 0.9rem;
}
.sh-card .game-image {
  text-align: center;
}

.sh-card .product_href {
  padding: 0;
  font-size: 1rem;
}

@media (max-width: 767px) {

  .sh-card img {
    width: 90%;
    min-width: 90px;
    max-width: 121px;
    max-height: 150px;
  }

  .sh-card .desc_s{
    font-size: 0.75rem;
  }
  .card:not([class*="card-outline-"]) .sh-card {
    margin: 0.5rem 0;
  }

}

@media (min-width: 768px) and (max-width: 991px) {

  .sh-main > .card-body {
    padding: 1.25rem 2rem;
  }
}

@media (min-width: 992px) and (max-width: 1199px){

}

@media (min-width: 1200px) {
  .sh-card {
    max-width: 600px;
  }
  .sh-main > .card-body {
    padding: 1.25rem 4.7rem;
  }
}
.sh-card .row > div > .row {
  margin: 0;
}

.sh-card > .card-body > div > .row >.col-12 > .header {
  text-align: center;
  border-bottom: solid 2px #0003;
  padding-bottom: 0.2rem;
  margin-bottom: 0.7rem;
  color: #292124;
  font-size: .9rem;
  font-weight: 400;
}

.sh-card .row > div > .row > div {
  padding: 0;

}

@media (min-width: 600px) and (max-width: 767px) {
  .sh-card .col-xs-12 {
    width: 50%;
  }
  
}

@media (max-width: 600px) {
  .sh-card .col-xs-12{
    width: 100%;
  }
  .sh-card .d-hide {
    display: none;
  }
  .sh-card .product_href {
    text-align: center;
  }

  .sh-card .product_btn {
    text-align: center;
  }

  .sh-card button {
    margin-top: 0.5rem;
    float: none;
  }
}

.rec_card {
  width: 30%;
}

.rec_card img{
  width: 100%;
  max-width: 120px;
}

.rec_card .header {
  font-size: 0.8rem!important;
  min-height: 55px;
}

.rec_card .product_href{
  text-align: center;
}
.rec_card > .card-body{
 padding: 0.5rem;
}

.rec_card .product_image {
  min-height: 140px;
}

.section-forget {
  width: 25%;
}

.row > label.col-3 {
  text-align: right;
  margin-top: 17px;
  padding-right: 10px;
  padding-left: 10px;
}
.row > input.col-8 {
  padding-bottom: 0.2rem;
}

@media (max-width: 768px) {
  .rec_card {
    width: 100%;

  }
  .fixed-action-btn {
   bottom: 1rem;
   right: 3px;
 }
 nav img {
  width: 80%;
    height: 30px;
    /*width: 30px;*/
 }
 nav.logo img.logo {
  width: 200px;
  height: initial;
 }

 nav a.navbar-brand, a.go_back {
  font-size: 1.1rem;
 }
}

@media (min-width: 1630px) {
  sing-up.row > label.col-3 {
    max-width: 20%;
  }
  sing-up.row > input.col-8 {
    flex: 0 0 75%;
    max-width: 75%;
  }
}

@media (min-width: 1230px) and (max-width: 1340px) {
  .row > label.col-3 {
    font-size: 85%;
  }
  .row > input.col-8 {
    font-size: 85%;

  }
}

@media (max-width: 1229px) {
  .row > label.col-3 {
    font-size: 85%;
    max-width: 35%;
    min-width: 33%;
  }
  .row > input.col-8 {
    font-size: 85%;
  }
}


/* DASHBOARD */
.float_right {
  float: right;
}

.float_left {
  float: left;
}

.col-6 {
  padding: 5px;
}

.dashboard {
  max-width: 200px;
  min-width: 200px;
}
p.white-text{
  font-size: 0.9rem;
}


/* END DASHBOARD */


#table-history_processing {
  display: none;
}

/* DIALOG SECTION */

.back-dialog{
  z-index: 1;
  width:100%;
  min-height:100%;
  background-color: rgba(0,0,0,0.5);
  overflow:hidden;
  position:fixed;
  top:0px;
}
/* Позиционируем блок с контентом */
.dialog-content{

  position: relative;
  overflow: hidden;
  overflow-y: auto;
  padding: 0 10 0 10;
  margin:10px auto 0px auto;
  min-width:150px;
  max-width: 1100px;
  min-height: 150px;
  /*max-height: 700px;*/
  max-height: 55rem;
  background-color: #c5c5c5;
  border-radius: 0 0 5 5;
}
/* Позиционируем верхний бар */
.dialog-title{
  margin: 0 -10 0 -10;
  text-align: center;
  position: relative;
  vertical-align: middle;
  /*height: 30px;*/
  background-color: #3498DB;
  color: #fff;
  background-color: #fff;
  padding: 20px 20px 0px;
  color: #000;
  text-align: left;
}

.dialog-title span{
  font-size: 20px;
  /*padding-left: 10px;*/
}
/* Делаем кнопку закрытия окна */
.close-dialog{
  position: relative;
  float: right;
  right: 0;
  top: 0;
  text-align: center;
  color: #fff;
  background-color: #2574A9;
  height: 22px;
  width: 22px;
  border:0;
  text-decoration: none;
  background-color: #fff;
}

.close-dialog:before{
  font-family: Arial;
  color: rgba(255, 255, 255, 0.9);
  /*content: "x";*/
  font-size: 20px;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
  outline: none;
}

div.dataTables_filter label {
  float: right;
  margin-bottom: .8rem;
}

div.dataTables_filter input {
  border: 1px solid rgba(0, 0, 0, 0.18);
  height: auto;
  width: auto;
  margin: 0px 0px 0px 5px;
}

/* НАЗАД */
a.paginate_disabled_previous {
  color: #4444449c;
  margin-right:10px;
  padding: 2px 5px;
}

a.paginate_disabled_previous:hover {
    /*border: 1px solid #33333354;
    border-radius: 3px;*/
    cursor: default;
    outline-color: white;
  }

  a.paginate_enabled_previous {
    color: #444;
    margin-right:10px;
    padding: 2px 5px;
  }

  a.paginate_enabled_previous:hover {
    border: 1px solid #33333354;
    border-radius: 3px;
  }

  /* ВПЕРЁД */

  a.paginate_enabled_next {
    color: #444;
    padding: 2px 5px;
  }

  a.paginate_enabled_next:hover {
    border: 1px solid #33333354;
    border-radius: 3px;
  }

  a.paginate_disabled_next {
    color: #4444449c;
    padding: 2px 5px;
  }

  a.paginate_disabled_next:hover {
    /*border: 1px solid #33333354;
    border-radius: 3px;*/
    cursor: default;
    outline-color: white;
  }

  div.dataTables_info {
    display: inline-block;
  }

  div.paging_two_button {
    display: inline-block;
    float: right;
  }

  select.select_platform {
    display: block!important;
    width: 100%;
  }

  /* END OF DIALOG SECTION */

  /* Action with row section */
  #menu {
    right: 0;
    position: absolute;
    width: 200px;
    display: none;
  }

  span.action {
    font-size: 14px;
    line-height: 24px;
  }

  .material-icons {
    color: rgba(0, 0, 0, 0.42);
  }

  .material-icons:hover {
    color: #444;
    cursor: pointer;
  }

    .material-icons.anactive:hover {
    color: rgba(0, 0, 0, 0.42);
    cursor: initial;
  }

  i.action {
    display: inline-flex;
    font-size: 23px;
    vertical-align: middle;
    height: 24px;
    outline: none;
    width: 24px;
    color: inherit;
    float: left;
  }

  div.table_action {
    background-color: white;
    color: #444444cf;
    border: none;
    width: 100%;
    display: block;
    line-height: 20px;
    padding: 8px 6em 8px 16px;
  }

  div.table_action:hover {
    color: #333!important;
    cursor: pointer;
  }

  div.table_action.restore {
    padding: 8px 3em 8px 16px;
  }

  /* End of action with row section */

  .lalabel {
    content: attr(data-label)"hi";
  }

  table.table td.td_product {
    text-align: left;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  table.table th.product_name {
    width: 52%!important;
  }

  table.table th.select_platform {
    width: 12%!important;
  }

  table.table th.date_release {
    width: 16%!important;
  }


  table#table-products tr:hover {
   background-color: rgba(0, 0, 0, 0.18);
   cursor: pointer;
 }

/*table#table-products td:hover {
 cursor: pointer;
 }*/

 table#table-products tr:hover > th {
   background-color: #fff;
   cursor: default;
 }

 /* TABLE COLLAPSED */

 @media screen and (max-width: 992px) {
/*  table.table td {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.75rem;
  }*/
}

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

  .form-table {
    width: 90%;
  }

  table.collap {
    border: 0;
  }

  table.collap caption {
    font-size: 1.3em;
  }

  
  table.collap tr {
    border-bottom: 1px solid #9c9c9c;
    display: block;
    /*margin-bottom: .625em;*/
  }
  
  table.collap td {
    border-bottom: 1px solid #ddd;
    /*display: block;*/
    font-size: .8em;
    text-align: right;
  }
  
  table.collap td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.6rem;
  }
  
  table.collap td:last-child {
    border-bottom: 0;
  }


  table.table-history thead{
    display: none;
  }

  table.table-history td{
    width: 100%;
    float: left;
  }
  table.table-history td.third{
    border-bottom: 1px solid #9c9c9c;
  }

  .dialog-title span{
    font-size: 1rem;
  }

  .dataTables_filter label {
    line-height: 1;
    font-size: 0.9rem;
  }

  .products-card-body {
    padding-top: 0.5rem;
  }
  .card-body-table {
    padding: 1.25rem 0.85rem;
  }

  #table-products_processing {
    line-height: 1;
  }

  table.table td {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 0.7rem;
    
  }

  .first-card-body {
    padding: 1.25rem 0.5rem;
  }

  table.collap td.products_date_release {
    padding-left: 0px;
    padding-bottom: 0px;
    float: right;
    border: 0px;
  }
  table.collap td.products_product_name {
    padding-right: 0.1rem;
    border: 0px;
    padding-bottom: 0px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 400;
  }
  table.collap td.products_price {
    border: 0px;
    float: left;
    padding-top: 0.2rem;
    padding: 0.5rem 0.75rem;
  }
  table.collap td.options {
    display: block;
    border: 0px;
    padding-bottom: 0px;
    padding-top: 0.2rem;
  }

  table.collap th.options {
    display: none;
  }

  table.table thead th {
    font-size: 0.75rem;
    padding: 0.6rem 0.2rem;
  }

  table#table-products td {
    padding-bottom: 0.25rem;
  }

  table#table-products td.products_date_release {
    float: right;
    border: none;
    padding-bottom: 0px;
  }
  table#table-products td.products_product_name {
    display: block;
    font-weight: 500;
    border: none;
    padding-bottom: 0px;
  }
  table#table-products td.products_price {
    float: right;
    border: none;
    font-size: 0.7rem;
    padding-top: 0.2rem;
  }
  table#table-products td.products_platform {
    font-size: 0.7rem;
    border: none;
    padding-top: 0.2rem;
  }
  table#table-products th {
    font-size: 0.8rem;
    padding: 0.3rem;
  }

  table#table-products th.date_release {
    width: 22%!important;
  }
  table#table-products th.product_name {
    width: 25%!important;
  }
  table#table-products th.select_platform {
    width: 25%!important;
  }
}


@media screen and (max-width: 429px) {
/*  table#table-products th {
    font-size: 0.6rem;
  }

  table#table-products td.products_date_release {
    font-size: 0.65rem;
  }
  table#table-products td.products_product_name {
    font-size: 0.65rem;
  }
  table#table-products td.products_price, table#table-products td.products_platform {
    font-size: 0.6rem;
  }*/

}
/* END TABLE COLLAPSED */



/* FOOTER */

footer.page-footer {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 0;
  margin-top: 0px;
  padding: 0.2rem;
  background-color: #212529;
  color: rgba(255,255,255,.6);
}

footer.page-footer>div {
  background-color: rgba(0,0,0,.2);
}

footer.page-footer p {
  font-size: 0.7rem;
  margin: 0 0.2rem;
  margin-top: 0.2rem;
}

@media (max-width: 481px) {
  footer.page-footer {
    /*position: relative;*/
  }
  footer.page-footer p{
    font-size: 0.65rem;
  }
}

/* END OF FOOTER */


/* TABLE COLLAPSED */

@media screen and (max-width: 992px) {
table.table td {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.75rem;
}
}

@media screen and (max-width: 860px) {
.product_name {
  text-align: center;
}

  table.collap {
    border: 0;
  }

  table.collap caption {
    font-size: 1.3em;
  }
  
  table.collap thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table.collap tr {
    border-bottom: 2px solid #9c9c9c;
    display: inline-block;
    /*margin-bottom: .625em;*/
  }
  
  table.collap td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table.collap td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.6rem;
  }
  
  table.collap td:last-child {
    border-bottom: 0;
  }

  table.table td {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 0.75rem;
    
}
}

/* END TABLE COLLAPSED */

/* index page */
.caption {
  padding: 1%;
  font-size: 20px;
}
.define-user {
  text-align: left;
  font-size: 12px;
  padding: 1%;
}
.form-simple-admin {
  width: 50%;
  max-width: 450px;
  margin: auto;
  padding-top: 0.5rem;
}
.flex-column-admin {
  display: block;
  text-align: center;
}

a.button {
  /* color: #000;
  border: 1px solid black;
  padding: 2px; */
  -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    text-decoration: none;
    color: initial;
    text-decoration: none;
    width: 115px;
    padding: 10px 0px;
}
/* end index page */

.display_none {
  display: none;
}

@media (max-width: 480px) {
  .col-6 {
    max-width: 100%;
    margin: auto;
  }
  a.button {
    width: 100%;
    
    }
  .col-sm-4 {
    padding-bottom: 10px;
  }
  .col-sm-6 {
    padding-bottom: 10px;
  }
  .form-simple-index .col-12 .card {
    max-width: fit-content;
  }
}

.vk-button {
  text-align: center;
  color: #6c757d;
  font-size: 85%;
  width: 100%;
  display: block;
  /* border: 1px solid #bdbdbd; */
  background-color: initial;
  padding: 8px;
  cursor: pointer;
  transition: background-color .1s linear,border-color .1s linear,color .1s linear;
}

.vk-button:hover {
  /* border: 1px solid #6c757d; */
  color: #6c757d;
}
.vk-button:hover img.vk-logo-login{
  filter:none;
}
.vk-or-phone {
  margin: 5px 0px 0px;
  display: flex;
  align-items: center;
}

.vk-or-phone hr {
  border: none;
  border-bottom: 1px solid rgba(14,19,24,.25);
  height: 1px;
  flex: 1 0;
}

.vk-or-phone span {
  margin: 0px 5px;
  font-size: 0.8rem;
  color: rgba(14,19,24,.25);
}

img.vk-logo-login {
  width:23px; 
  filter:grayscale(100%);
}