/*Структура страниц*/

@font-face {
	font-weight: 300;
	font-family: "Ubuntu";
	src: url('/mArtPay/resources/fonts/Ubuntu-L.ttf');
}

@font-face {
	font-weight: 300;
	font-style: italic;
	font-family: "Ubuntu";
	src: url('/mArtPay/resources/fonts/Ubuntu-LI.ttf');
}

@font-face {
	font-weight: 400;
	font-family: "Ubuntu";
	src: url('/mArtPay/resources/fonts/Ubuntu-R.ttf');
}

@font-face {
	font-weight: 400;
	font-style: italic;
	font-family: "Ubuntu";
	src: url('/mArtPay/resources/fonts/Ubuntu-RI.ttf');
}

@font-face {
	font-weight: 500;
	font-family: "Ubuntu";
	src: url('/mArtPay/resources/fonts/Ubuntu-M.ttf');
}

@font-face {
	font-weight: 500;
	font-style: italic;
	font-family: "Ubuntu";
	src: url('/mArtPay/resources/fonts/Ubuntu-MI.ttf');
}

html{
	font-size: 62.5%;
	color: #003364;
	height: 100vh;
}

body {
   background: #E9F0F4;

    padding: 0px;
    margin: 0;
    text-align: center;box-sizing: border-box;
    font-family: Ubuntu !important;
    font-size: 1.8rem;
	height: 100%;
}

input{
	font: 400 1.8rem Ubuntu;
	box-shadow: none;
}

input, input[type=text], input[type=password], input[type=button], input[type=submit]{
	/* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input:focus{
	-webkit-box-shadow: none;
	box-shadow: none;
}

.header{
    width: 100%; 
/* 	height: 100%;  */
	/* display: flex; */
	padding: 20px 15px;
	box-sizing: border-box;
}

.header .header-firs-row, .header .header-second-row{
	display: flex;
}

.header .header-second-row{
	margin-top: 20px;
}

.header .header-second-row .user-pnl{
	background: #FFFFFF;
    border-radius: 5px;
    margin-right: 10px;
    padding: 10px;
    box-sizing: border-box;
    height: 41px;
    width: 41px;
}

.header .header-second-row .user-pnl.user-name-pnl{
	width: auto;
	font-size: 1.4rem;
}

.header .header-second-row .user-pnl:last-child{
	margin-right: 0;
}

.header .header-second-row .user-name-pnl-wrapper{
	flex: 1 1 auto;
}

.header .header-second-row .user-name-pnl{
	display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 10px 10px 35px rgba(0, 51, 100, 0.15);
}

.header .header-second-row .user-name-pnl .user-logo{
	height: 12px;
	margin-right: 10px;
}

.header .header-second-row .user-activity-btn{
	display: flex;
	padding-left: 10px;
}

.header .header-second-row  .user-activity-btn .logout-user, .logOut .user-info .user-activity-btn .edit-user{
	width: 41px;
    height: 41px;
    box-shadow: 10px 10px 35px rgba(0, 51, 100, 0.15);
}

/* .header .header-second-row .user-activity-btn .logout-user:hover, .logOut .user-info .user-activity-btn .edit-user:hover{ */
/* 	cursor: pointer; */
/* 	opacity: 0.5; */
/* } */

.header .header-second-row .logout-user .logout-href{
	width: 16px;
	height: 16px;
}






.header-wrapper{
	height: 91px;
    position: relative;
    max-width: 1170px;
    min-width: 700px;
    width: 80vw;
    margin: 0 auto;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 5px;
}

.header-fixed{
/* 	background-color: #FFFFFF; */
/* 	border-bottom: 3px solid #B3B3B3; */
	max-width: 1170px;
    min-width: 700px;
    width: 80vw;
    /* position: fixed; */
    height: auto;
    
    padding-right: 16px;
}

.header-fixed .logOut{
	padding-top: 0;
}

.header-wrapper-fixed{
    z-index: 200;
    /* padding-top: 0;
    position: relative;
    height: 46px;   
    width: 100vw; */
    
    position: fixed;
    background: linear-gradient(0deg, rgba(70, 152, 203, 0.15), rgba(70, 152, 203, 0.15)), #FFFFFF;
    box-shadow: 20px 20px 70px rgba(0, 51, 100, 0.25);
    height: auto;
    display: flex;
    justify-content: center;
    
    width: 100vw;
    max-width: none;
}

.header-fixed > .div_logo {
	padding-left: 10px;
	padding-top: 5px;
	width: 15%;
	padding-bottom: 3px;
}

.header-fixed > .div_logo .text_for_logo{
	bottom: 10px;
	font-size: 1rem;
	left: 250px;
}

.header-fixed .menudiv .mainMenu > ui >li {
	padding: 0 !important;
	padding-top: 15px !important;
	padding-right: 5px !important;
	margin-left: -5px !important;
	background-color: transparent !important;
	background-image: linear-gradient(to left, #f1f1f1, transparent);
}

.header-fixed .menudiv .mainMenu > ui >li >a{
	color: #666666 !important;
	font-weight: unset !important;
}

.header-fixed a.logOut-href{
	background: url('/mArtPay/resources/images/exit_cabinet_grey.png;base64,[data]') no-repeat;
	background-size: 100%;
}

/* .header-fixed a.logOut-href:HOVER{ */
/* 	background: url('/mArtPay/resources/images/exit_cabinet_open_grey.png;base64,[data]') no-repeat; */
/* 	background-size: 100%; */
/* } */

.header-fixed .logOut .localization_flag{
	top: 10px;
	right: 40px;
}

.div_logo{   
    flex: 1 1 auto;
    text-align: left;
    position: relative;
}

.div_logo .text_for_logo{
	position: absolute;
	bottom: 4px;
	left: 36px;
	color: #0099CE;
	font-size: 0.9rem;
	font-style: normal;
}

.header .logo{
    max-height: 36px;
}

.header-fixed .logo{
	max-height: 36px;
}

.header .logo-link{
	/* background: url('/mArtPay/resources/images/logo/logo.png;base64,[data]') no-repeat;
    display: block;
    width: 100%;
    height: 100%;
    background-position-y: 100%;
    background-position-x: 50%;
    background-size: 100%; */
}

.info-payer-pnl{
	background: #FFFFFF;
/*     box-shadow: 20px 20px 70px rgba(0, 51, 100, 0.25); */
/*     border-radius: 10px; */
    padding: 0px 15px 15px 15px;
    box-sizing: border-box;
    
/*     margin: 0 auto; */
	text-align: left;
/* 	top: 0; */
/* 	width: 80vw; */
/* 	max-width: 1170px; */
/* 	min-width: 700px; */
 	margin-bottom: 140px; 
 	
 	position: relative;
}

.info-payer-pnl .info-payer-pnl-header{
	display: flex;
	padding-top: 12px;
	align-items: center;
}

.info-payer-pnl .info-payer-pnl-header .empty-flex-div{
	flex: 1 1 auto;
}

.info-payer-pnl .info-payer-pnl-header .head-lbl-pnl{
	flex: 0 0 auto;
	/* padding-top: 20px; */
}

.info-payer-pnl .info-payer-pnl-header .head-lbl-pnl .head-lbl{
	font-weight: 500;
    font-size: 1.8rem;
    line-height: 21px;
}

.info-payer-pnl .info-payer-pnl-header .action-pnl{
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	/* padding-top: 12px; */
}

.info-payer-pnl .info-payer-pnl-header .action-pnl .togle-type-display-pnl{
	margin-right: 20px;
}

.info-payer-pnl .info-payer-pnl-header .action-pnl .togle-type-display-pnl .togle-type-display-img-pnl, .info-payer-pnl .info-payer-pnl-header .action-pnl .togle-type-display-pnl .togle-type-display-list-pnl{
	display: flex;
    align-items: center;
}

.info-payer-pnl .info-payer-pnl-header .action-pnl .togle-type-display-pnl .togle-type-display-img-pnl.none, .info-payer-pnl .info-payer-pnl-header .action-pnl .togle-type-display-pnl .togle-type-display-list-pnl.none{
	display: none;
}

/* .info-payer-pnl .info-payer-pnl-header .action-pnl .togle-type-display-pnl:hover{ */
/* 	cursor: pointer; */
/* } */

/* .info-payer-pnl .info-payer-pnl-header .action-pnl .togle-type-display-list-pnl:hover .togle-type-display{ */
/* 	display: none; */
/* } */

/* .info-payer-pnl .info-payer-pnl-header .action-pnl .togle-type-display-list-pnl:hover .togle-type-display_hover{ */
/* 	display: block; */
/* } */

/* .info-payer-pnl .info-payer-pnl-header .action-pnl .togle-type-display-img-pnl:hover .togle-type-display-img{ */
/* 	display: none; */
/* } */

/* .info-payer-pnl .info-payer-pnl-header .action-pnl .togle-type-display-img-pnl:hover .togle-type-display-img_hover{ */
/* 	display: block; */
/* } */

.info-payer-pnl .info-payer-pnl-header .action-pnl .togle-type-display{
	height: 20px;
}

.info-payer-pnl .info-payer-pnl-header .action-pnl .togle-type-display-img{
	height: 30px;
}

.link-img.none{
	display: none;
}

.default-card-link{
	display: flex;
}

.default-card-link > img{
	margin-right: 8px;
}

.history-action-pnl{
	margin-top: 20px;
	align-items: center;
}

.history-action-pnl .payment-instrument-pnl{
	align-items: center;
}

.history-action-pnl .payment-instrument-pnl > label{
	font-size: 1.6rem;
	flex: 0 0 auto;
	display: block;
}

.history-action-pnl .payment-instrument-pnl  select{
	max-width: 340px;
	min-width: 200px;
	height: 36px; 
	font-size: 1.6rem;
	margin-left: 10px;
	flex: 1 1 auto;
}

.history-action-pnl .calendar-flt-pnl{
    align-items: center;
    margin-top: 10px;
}

.history-action-pnl .calendar-flt-pnl > label{
	margin-right: 10px;
	display: block;
}

.history-action-pnl .calendar-flt-pnl .calendar-pnl{
	display: flex;
	
	
}

.history-action-pnl .calendar-flt-pnl .calendar-pnl .calendar-img-pnl{
	border: 1px solid rgba(0, 51, 100, 0.25);
    box-sizing: border-box;
    border-radius: 5px 0px 0px 5px;
    
    padding: 10px;
    height: 36px;
    display: flex;
    align-items: center;
}

.history-action-pnl .calendar-flt-pnl .calendar-pnl .calendar-img-pnl.focus-calendar{
	background: #003364;
}

.history-action-pnl .calendar-flt-pnl .calendar-pnl .calendar-img-pnl.focus-calendar .calendar-img{
	display: none;
}

.history-action-pnl .calendar-flt-pnl .calendar-pnl .calendar-img-pnl.focus-calendar .calendar-img-focus{
	display: block;
}

.history-action-pnl .calendar-flt-pnl .calendar-pnl .calendar-client{
	font-size: 1.6rem;
	border: 1px solid rgba(0, 51, 100, 0.25);
	box-sizing: border-box;
	border-radius: unset;
	max-width: 125px;
	line-height: 22px;
	
	background:  white no-repeat;
	background-image: url('/mArtPay/resources/images/play-button.png');
	background-image: url('/mArtPay/resources/images/play-button.png'); 
    background-image: url('/mArtPay/resources/images/play-button.png'); 
    background-image: url('/mArtPay/resources/images/play-button.png'); 
    background-image: url('/mArtPay/resources/images/play-button.png');  
	background-position: 90% 50%;
}

.history-action-pnl .calendar-flt-pnl .calendar-pnl .calendar-client:focus{
	background-image: url('/mArtPay/resources/images/play-button-rotate.png');
	background-image: url('/mArtPay/resources/images/play-button-rotate.png'); 
    background-image: url('/mArtPay/resources/images/play-button-rotate.png'); 
    background-image: url('/mArtPay/resources/images/play-button-rotate.png'); 
    background-image: url('/mArtPay/resources/images/play-button-rotate.png');
}

.history-action-pnl .calendar-flt-pnl .calendar-pnl .calendar-client.calendar-radius{
	border-radius: 0px 5px 5px 0px;
}

.history-action-pnl .hist-btn-pnl{
	margin-top: 30px;
}

.slick-slide{
	opacity: 0.4;
}

/* .slick-slide:hover{ */
/* 	opacity: 1; */
/* } */

.slick-slide.slick-active{
	opacity: 1;
}

.history-table-pnl{
	margin-top: 20px;
}

.history-table-pnl .history-table-head{
	display: flex;
	padding: 10px 35px 10px 10px;
}

/* .link-hist-img:hover{ */
/* 	opacity: 0.5; */
/* } */

.card-list-img-pnl{
	/* display: flex; */
	/* overflow-x: auto; */
	position: relative;
	margin-top: 15px;
}

.card-list-carusel-pnl .panel-img-and-primary-card{
	/* margin-left: 10px; */
}

.card-list-img-pnl .panel-img-card{
	min-width: 242px;
	max-width: 242px;
    height: 160px;
    background: url('/mArtPay/resources/images/addCardPhone.png;base64,[data]') white no-repeat;
    background-size: cover;
    /* margin-left: 10px; */
    
    padding: 20px;
    box-sizing: border-box;
    color: #FFFFFF;
    border-radius: 8px;
    
    position: relative;
}

.card-list-img-pnl .panel-img-card .info-card-pnl{
	display: flex;
    flex-flow: column;
}

.card-list-img-pnl .panel-img-card .info-card-pnl .logo-card-pnl{
	position: absolute;
    right: 20px;
}

.card-list-img-pnl .panel-img-card .info-card-pnl .logo-card-pnl > img{
	width: 30px;
}

.card-list-img-pnl .panel-img-card .expiriens-pnl{
	margin-top: 8px;
	display: flex;
	align-items: center;
}

.card-list-img-pnl .panel-img-card .action-card-pnl{
	background: #FFFFFF;
	position: absolute;
	padding: 8px;
    box-sizing: border-box;
    width: 48px;
    height: 30px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    bottom: 12px;
    right: 12px;
}

/* .card-list-img-pnl .action-card-pnl:hover .action-btn-card-pnl-wrapper{ */
/* 	display: block; */
/* } */

.card-list-img-pnl .panel-img-card .action-card-pnl .action-btn-card-pnl{
	display: flex;
	/* flex-flow: column; */
	position: absolute;
	/* bottom: 23px; */
	bottom: 32px;
    /* left: 0px; */
    right: 0;
    /* width: 38px; */
    background: #FFFFFF;
    border-radius: 5px;
    padding: 8px;
    box-sizing: border-box;
}

.card-list-img-pnl .panel-img-card .action-card-pnl .action-btn-card-pnl > a{
	display: flex;
    justify-content: center;
    padding: 5px 15px;
}

.card-list-img-pnl .panel-img-card .action-card-pnl .action-btn-card-pnl > a > img{
	height: 20px;
}

.card-list-img-pnl .panel-img-card .action-card-pnl .action-btn-pnl > a{
	margin-left: 16px;
}

.slick-track .slick-slide{
	margin-left: 10px;
}

.slick-track .slick-slide:nth-child(1){
	margin-left: 0;
}

.custom-slick-next{
	background: url('/mArtPay/resources/images/right-arrow.svg;base64,[data]') no-repeat;
	width: 30px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-position: 50% calc(50% - 27px);
}

.custom-slick-prev{
	background: url('/mArtPay/resources/images/right-arrow.svg;base64,[data]') white no-repeat;
	width: 20px;
    height: 20px;
	transform: rotate(180deg);
	position: absolute;
    top: calc(50% - 27px);
    left: -10px;
}

/* .custom-slick-next:hover, .custom-slick-prev:hover{ */
/* 	cursor: pointer; */
/* } */

.custom-slick-next.slick-disabled, .custom-slick-prev.slick-disabled{
	opacity: 0.5;
}

/* .card-list-img-pnl .panel-img-and-primary-card:hover .card-img-primary-pnl{ */
/* 	display: block; */
/* } */

.card-list-img-pnl .card-img-primary-pnl{
	margin: 10px 0 0 0;
}





/*   clientCalendar   */
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button{
	font-family: unset;
}

.ui-widget{
	font-family: unset;
}

.ui-widget.ui-widget-content{
	border: none;
	box-shadow: 20px 20px 70px rgba(0, 51, 100, 0.25);
	padding: 20px 35px;
	border-radius: 10px;
}

.ui-datepicker .ui-datepicker-header{
	background: #FFFFFF;
	border-radius: unset;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{
	top: 0;
	height: 100%;
}

.ui-datepicker .ui-datepicker-header{
	border: none;
}

.ui-datepicker .ui-datepicker-title{
	display: flex;
	margin: 0 1.8em;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year{
	border: none;
    margin: 0 5px;
    font-size: 1.6rem;
    color: #003364;
    flex: 1 1 auto;
}

.ui-datepicker thead{
	background: #FFFFFF;
	font-size: 1.4rem;
	color: rgba(0, 51, 100, 0.5);
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{
	border: none;
	background: #FFFFFF;
	font-size: 1.4rem;
	font-weight: 300;
	padding: 5px;
	color: #003364;
	text-align: center;
}

.ui-datepicker td.ui-datepicker-today{
	border: none;
}

.ui-datepicker td.ui-datepicker-current-day a, .ui-datepicker td.ui-datepicker-today a{
	background: none;
}

.ui-datepicker td.ui-datepicker-current-day a{
	color: #FFFFFF;
}

.ui-datepicker-prev.ui-corner-all.ui-state-hover, .ui-datepicker-next.ui-corner-all.ui-state-hover{
	background: #FFFFFF;
	cursor: pointer;
	border: none;
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span{
    /* height: 25px;
    top: 25%; */
    position: relative;
}

.ui-datepicker .ui-icon-circle-triangle-w, .ui-datepicker .ui-icon-circle-triangle-e{
	background: url('/mArtPay/resources/images/right-arrow.svg;base64,[data]') white no-repeat;
	background-size: 100% 100%;
}

.ui-datepicker .ui-icon-circle-triangle-w{
	transform: rotate(180deg);
}

.ui-state-default{
	color: #003364;
	font-size: 1.4rem;
}

.ui-state-default.ui-state-active{
	background: none;
}

.ui-datepicker td.ui-datepicker-current-day{
	border-radius: 5px;
}

.ui-datepicker th.ui-datepicker-week-end{
	color: #003364;
}

.dialog-fail-msg-pnl{
	margin-bottom: 5px;
}


/*   dropdownMenu   */

.menudiv{
    display: table-cell;
    height: 100%;
    vertical-align: bottom;
    margin-bottom: 5px;
    margin-left: 10px;
    flex: 1 1 auto;
}

#dropdownMenu, #dropdownMenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
  width: 100%;
  top: 100%;
  left: 0;
  z-index: 598;
}
#dropdownMenu li {
  float: left;
  position: relative;
  padding: 5px 10px;  
}

#dropdownMenu > li {
    margin: 1px;
}

#dropdownMenu li ul {
  display: none;
  position: absolute;
  background: linear-gradient(to bottom, rgba(254, 254, 254, 1) 0%, rgba(226, 226, 226, 1) 58%, rgba(219, 219, 219, 1) 98%, rgba(209, 209, 209, 1) 100%);
  padding: 8px 0;
  z-index: 500;
  border: 1px solid grey;
  border-radius: 5px;
  width: auto;
  min-width: 100%;
}

#dropdownMenu li ul li{
    width: 100%;
    display: inline;
}

#dropdownMenu li ul li ul {
  top: 1px;
  left: 99%;
}

#dropdownMenu a {
  color: #00AFF0;;
  text-decoration: none;
  display: block;
  padding: 2px 4px;
  font-size: 1.2em;
  font-style: normal;
  white-space: nowrap;
}
#dropdownMenu div {
  color: #00AFF0;;
  text-decoration: none;
  display: block;
  padding: 2px 4px;
  font-size: 1.8rem;
  font-style: normal;
  white-space: nowrap;
}

#dropdownMenu>li>div:after {
	content: '\2039';
    display: block;
    position: absolute;
    top: 50%;
    right: 7px;
    margin-top: -6px;
    line-height: 1;
    color: black;
    text-decoration: none;
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg); 
}

#dropdownMenu li>div{
    padding-right: 13px;
}

#dropdownMenu li.selected{
    background-color: #F7F7F8;
}

#dropdownMenu li.selected>a {
    font-weight: bolder;
}

#dropdownMenu li.selected>div {
    /* text-decoration: underline; */
    font-weight: bolder;
}

#dropdownMenu a:hover {
    color: #0194e5;
}

#dropdownMenu div:hover {
    color: #0194e5;
}

#dropdownMenu li:hover > div {
    color: #0194e5;
}

#dropdownMenu li:hover ul {
    display: block;
}

#dropdownMenu li:hover li ul {
    display: none;
}
#dropdownMenu li:hover li:hover ul {
    display: block;
}
/*   dropdownMenu   */

.background {
    width: 100%;
    /* height: 100%; */
    overflow-y: auto;
    position: fixed;
    top: 0px;
    left: 0px;
    
    position: relative;
    height: auto;
    min-height: 100vh;
}

#page {
	/* height: 100%; */
	margin: 0 auto;
	text-align: left;
	top: 0;
	width: 61vw;
	max-width: 1400px;
	min-width: 700px;
	margin-bottom: 30px;
}

 .footer {
    /* position: fixed; */
   /*  bottom: 0; */
    padding: 15px;
    width: 100%;
/*     text-align: center; */
    text-align: left;
    font-size: 1.4rem;
    background: #FFFFFF;
    box-sizing: border-box;
    position: absolute;
    
    bottom: 0;
}

.footer .footer-addres{
	margin-bottom: 15px;
}

.footer .footer-phone{
	margin-bottom: 15px;
	display: flex;
}

.footer .footer-mail{
	display: flex;
}

.footer .footer-phone .flex-left, .footer .footer-mail .flex-left{
	flex: 1 1 auto;
} 

.footer .footer-phone .flex-right, , .footer .footer-mail .flex-right{
	flex: 1 1 auto;
	text-align: right;
}
/*Структура страниц*/



/* Элементы управления */
.btn.large {
    padding: 10px 16px !important;
}

.btn.small {
    padding: 2px 4px !important;
    font-size: 0.9em !important;
}

.btn.major {
    color: #ffffff;
    border-radius: 5px;
    border: none;
    background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#0090E3), to(#00B6F3)); 
    background-image: -webkit-linear-gradient(180deg, #00B6F3 0%, #4698CB 100%); 
    background-image: -moz-linear-gradient(180deg, #00B6F3 0%, #4698CB 100%); 
    background-image: -o-linear-gradient(180deg, #00B6F3 0%, #4698CB 100%); 
    background-image: linear-gradient(180deg, #00B6F3 0%, #4698CB 100%);    
}
/* .btn.major:hover { */
/*     background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#169DED), to(#13C1FC));  */
/*     background-image: -webkit-linear-gradient(#13C1FC 20%, #169DED);  */
/*     background-image: -moz-linear-gradient(#13C1FC 20%, #169DED);  */
/*     background-image: -o-linear-gradient(#13C1FC 20%, #169DED);  */
/*     background-image: linear-gradient(to top, #169DED, #13C1FC 80%);     */
/* } */

.btn.minor {
    /*Второстепенные кнопки ("отмена" и т.п.)*/
    border-radius: 5px;
    border: 2px solid #808080;
    background-color: #FFFFFF;
    color: #4D4D4D;
}    
/* .btn.minor:HOVER { */
/* 	border: 2px solid #00CCFF; */
/* 	color: #00CCFF; */
/* } */

.btn-flat{
/*    font-size: inherit;
    font-family: inherit;*/
    padding: 4px 8px;
    margin: 0.4em auto;
    outline: none;
    border: none;
    color: #333333;
    background-color: #CCCCCC;
    width: 200px;
}

/* .btn-flat:HOVER { */
/* 	background-color: #E0DDDD; */
/* } */

.btn.major.client-btn{
	width: 170px;
/* 	height: 36px; */
	box-sizing: border-box;
	padding: 9px 35px;
}

.btn.major.client-btn.add-btn{
	background:  white no-repeat;
	background-image: url('/mArtPay/resources/images/plus.png'), linear-gradient(180deg, #00B6F3 0%, #4698CB 100%);
	background-image: url('/mArtPay/resources/images/plus.png'), -webkit-gradient(linear, 0 100%, 0 0, from(#0090E3), to(#00B6F3)); 
    background-image: url('/mArtPay/resources/images/plus.png'), -webkit-linear-gradient(180deg, #00B6F3 0%, #4698CB 100%); 
    background-image: url('/mArtPay/resources/images/plus.png'), -moz-linear-gradient(180deg, #00B6F3 0%, #4698CB 100%); 
    background-image: url('/mArtPay/resources/images/plus.png'), -o-linear-gradient(180deg, #00B6F3 0%, #4698CB 100%); 
	background-position: 50% 50%;
	padding: 0; 
	width: 41px;
	height: 41px;
	box-sizing: border-box;
}

/* .btn.major.client-btn.add-btn:hover{	 */
/* 	background-image: url('/mArtPay/resources/images/plus.png'), -webkit-gradient(linear, 0 100%, 0 0, from(#169DED), to(#13C1FC));  */
/*     background-image: url('/mArtPay/resources/images/plus.png'), -webkit-linear-gradient(#13C1FC 20%, #169DED);  */
/*     background-image: url('/mArtPay/resources/images/plus.png'), -moz-linear-gradient(#13C1FC 20%, #169DED);  */
/*     background-image: url('/mArtPay/resources/images/plus.png'), -o-linear-gradient(#13C1FC 20%, #169DED);  */
/*     background-image: url('/mArtPay/resources/images/plus.png'), linear-gradient(to top, #169DED, #13C1FC 80%);     */
/* } */

a {
    text-decoration: none;
    color: #00A6EE;    
}
a:focus {
    outline: none; /*для отсутстия жёлтой рамки в webkit*/
}
/* Элементы управления */


/* c3_components.css */

/* c3:messages */
.messages-info{
	background: #FFFFFF !important;
}

.messages li {
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 10px 7px !important;
	font-style: normal !important;
	margin-right: 30px;
	font-size: 1em !important;
	color: #0098E7;
}
/* c3:messages */

/* c3_components.css */


/* Общие универсальные классы */
.the-whole{
	width: 100%;
}

.none {
    display: none;
}

.no-margin {
    margin: 0 !important;
}

.mrgTop60 { /* mrg-top_60 -- ���� �� �����, �������� �� ���� */
	margin-top: 60px !important;
}

.inner-left { /* Все дочерние элементы слева*/
    text-align: left;
}
.inner-center { /* Все дочерние элементы по центру*/
    text-align: center;
}
.inner-right { /* Все дочерние элементы справа*/
    text-align: right;
}

/* .rhomb-marked::before { добавляет ромбик перед блоком/надписью и т.п. */
/*     content: ''; */
/*     background: url('/mArtPay/resources/images/rombus.png') no-repeat; */
/*     background-size: 10px; */
/*     display: inline-block; */
/*     width: 10px; */
/*     height: 10px; */
/*     padding-right: 0.2em; */
/* } */

.rhomb-marked::after { /* добавляет ромбик перед блоком/надписью и т.п. */
    content: '*';
    display: inline-block;
    width: 10px;
    height: 10px;
    padding-left: 2px;
    color: #EB001B;
}

.legend { /* небольшая поясняющая надпись, напр. пояснения значков */
    font-size: 1.8rem;
    margin-bottom: 5px;
}

.label {
    color: #8CA4B9;
    display: table-row;
}

/* Общие универсальные классы */



/* Основные составляющие страницы */
.frm-container {

    padding: 20px 15px 30px 15px
}

.pnl-client-table_header {
	background-color: #FFFFFF;
	color: #00679F;
    border-bottom: 2px solid #B3B3B3;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
    padding: 10px;
}

.pnl-client-table_footer {
    background-color: #FFFFFF;
	height: 25px;
}

.show-more-pnl{
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	background: rgba(70, 152, 203, 0.15);
	border-radius: 0px 0px 10px 10px;
}

.show-more-pnl .show-more-btn{
	background: none;
	color: #4698CB;
	font-size: 1.6rem;
	border: none;
	height: 36px;
	box-sizing: border-box;
}

.client-filter {
	height: 80px;
	background-color: #F0F0F0;
	border-bottom: 2px solid #B3B3B3;
	display: table;
	width: 100%;
}

.client-filter > * {
	display: table-cell;
	position: relative;
	vertical-align: middle;
	color: #003364; 
	font-size: 0.8em;
}

.client-filter > *:nth-child(1) {
	padding-left: 10px;
}

.client-filter > * > input.btn[type="button"] {
	font-size: 1em;
	float: right; 
	width: 150px;
	margin-right: 10px;
}

.client-filter > * > label {
	position:absolute;
	top: 10px;		
}

.interlayer{
	height: 15px;
	background-color: #FFFFFF;
	border-bottom: 2px solid #B3B3B3;
	
}

.client-table{
	width: 100%;
	border-collapse: collapse;
}

.client-table > thead > tr{
	border-bottom: 1px solid rgba(0, 51, 100, 0.25);
}

.client-table > thead > tr > th{
/* 	background-color: #F0F0F0; */
	text-align: center;
	color: #333333 !important;
	font-size: 1.4rem;
	font-weight: normal;
}

.client-table > thead > tr > th a{
	color: #333333 !important;
}

.client-table > tbody{
/* 	background-color: #F0F0F0; */
	text-align: left;
	color: #000000;
	font-size: 1.4rem;
	font-weight: normal;
	/* border-bottom: 1px solid rgba(0, 51, 100, 0.25); */
}

.client-table > tbody tr{
	border-top: 1px solid rgba(0, 51, 100, 0.25);
}

.client-table .empty{
	/* height: 150px;
	vertical-align: top; */
}

.edit-form {
    text-align: left;
}
.edit-form>* {
    display: block;
    margin: 8px 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.edit-form input[type="text"], .edit-form input[type="password"], .edit-form input[type="tel"], .edit-form input[type="submit"], .edit-form > a {
    width: 100%;
    display: inline-block;
    border: 1px solid rgba(0, 51, 100, 0.25);
    box-sizing: border-box;
}

.edit-form input[type="text"], .edit-form input[type="password"], .edit-form input[type="tel"]{
	height: 3.8rem;
}

.login-lbl{
	margin: 8px 0 2px 0;
}

.politics-conf-pnl{
	margin: 5px 0 8px 0;
	box-sizing: border-box;
	font-size: 1.4rem;
	display: flex;
	align-items: center;
}

.politics-conf-pnl .lbl-politics, .politics-conf-pnl .linc-politics{
	width: auto;
	display: flex;
	margin-left: 3px;
	margin-top: 3px;
}

.requair-fill{
	margin-bottom: 1.3rem;
}

.requair-fill::before{
	content: '*';
    display: inline-block;
    width: 10px;
    height: 10px;
    padding-right: 3px;
    color: #EB001B;
}

input[type="submit"].btn.client-minor {
    /*Второстепенные кнопки ("отмена" и т.п.)*/
    /* border: none; */
	color: #4698CB;
	/* font-size: 1.6rem; */
	background: #FFFFFF;
	
	border-radius: 5px;
    border: 1px solid #4698CB;
    width: 170px;
}    
/* input[type="submit"].btn.client-minor:HOVER { */
/* 	color: #FFFFFF; */
/* 	background: linear-gradient(180deg, rgba(0, 182, 243, 0.5) 0%, rgba(70, 152, 203, 0.5) 100%); */
/* } */

input[type="text"], input[type="password"], input[type="tel"], select {
    border-radius: 5px;
    padding: 6px 10px;
}
input[type="text"]:focus, input[type="password"]:focus, select:focus {
    outline: none;
    /* box-shadow: 2px 4px 8px rgba(0, 51, 100, 0.1); */
    border: 1px solid #4698CB;
}
input[type="text"]:-webkit-autofill, input[type="password"]:-webkit-autofill, select:-webkit-autofill {
/*     -webkit-box-shadow: 0 0 0px 1000px white inset; костыль для желтого фона полей в хроме и опере */
    -webkit-box-shadow: 2px 4px 8px rgba(0, 51, 100, 0.1);
}
input[type="text"].input-error, input[type="password"].input-error, select.input-error {
    background: rgba(253, 117, 117, 0.75) !important;
    border: 1px solid rgba(233, 240, 244, 0.5) !important;
    color: #FFFFFF;
    font-weight: normal;
}
input[type="text"].input-ok, input[type="password"].input-ok {
    -webkit-box-shadow: 0 0 0px 1000px #d0ede0 inset; /*костыль для предыдущего костыля в хроме и опере*/
    background-color: #d0ede0 !important;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #FFFFFF;
	display: block;
	position: relative;
	background: url('/mArtPay/resources/images/arrow.png;base64,[data]') white no-repeat;
	background-position: 95% 50%;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(0, 51, 100, 0.25);
}

select.input-error{
}

input[type="checkbox"],input[type="radio"] {
	display: none;
}

input[type="checkbox"]+label,input[type="radio"]+label {
	display: inline-block;
	cursor: pointer;
	margin-top: 3px;
	width: 100%;
}

input[type="checkbox"] + label:before {
	content: '';
	width: 17px;
	height: 17px;
	padding: 0px 7px 0px 14px;
	background: url('/mArtPay/resources/images/check/uncheckClient.png') left top no-repeat;
	vertical-align: middle;
	box-sizing: border-box;
}

input[type="checkbox"]:checked+label:before {
	background: url('/mArtPay/resources/images/check/checkClient.png') left top no-repeat;
}

input[type="radio"]+label:before {
	content: '';
	width: 16px;
	height: 16px;
	padding: 0 10px 0 16px;
	background: url('/mArtPay/resources/images/check/radio.png') left top 1px no-repeat;
	vertical-align: middle;
}

input[type="radio"]:checked+label:before {
	background: url('/mArtPay/resources/images/check/radio.png') left -18px no-repeat;
}

input[type="submit"].btn, input[type="button"].btn {
    font-size: inherit;
    font-family: inherit;
    padding: 4px 8px;
    cursor: pointer;
    border: none;
}
input[type="submit"].btn:focus, input[type="button"].btn:focus {
    outline: none; /*для отсутстия жёлтой рамки в webkit*/
}


.ajax_loader {
    display: none; 
    position: fixed; 
    top: 50%; 
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 10000;
}

.block_display_img {
	position: fixed; 
	top: 50%; 
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	z-index: 10000;
}

/* Основные составляющие страницы */

.f-s-16{
	font-size: 1.6rem !important;
}

.f-s-10{
	font-size: 1rem !important;
}

.f-s-12{
	font-size: 1.2rem !important;
}

.f-s-14{
	font-size: 1.4rem !important;
}

.m-t-20{
	margin-top:20px;
}

.m-b-10{
	margin-bottom: 10px;
}

.m-t-2{
	margin-top: 2px;
}

.m-b-5{
	margin-bottom: 5px;
}

.m-b-15{
	margin-bottom: 15px;
}

.m-t-8{
	margin-top: 8px;
}

.m-l-8{
	margin-left: 8px;
}

.m-l-10{
	margin-left: 10px;
}

.m-t-10{
	margin-top: 10px;
}

.f-w-l{
	font-weight: 300;
}

.t-a-r{
	text-align: right;
}

.error{
	color: #E12626;
	font-size: 1.2rem;
	font-weight: 500;
}

.opacity-5{
	opacity: 0.5;
}

.dialog-error-msg-pnl{
	position: absolute;
	bottom: 235px;
}

div#cover-div{
	background: rgba(0, 0, 0, 0.6);
	opacity: unset;
}


.edit-client-account-mobile-pnl{
	/* margin-bottom: 5%;
    width: 95%;
    max-width: 440px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background: #E9F0F4;
    box-shadow: 20px 20px 70px rgba(0, 51, 100, 0.25);
    border-radius: 20px;
    text-align: left;
    padding: 30px 60px; */
    padding: 0 15px 140px 15px;
    box-sizing: border-box;
}

.edit-client-account-mobile-pnl input{
	color: #003364;
}

.edit-client-account-mobile-pnl .edit-client-account-head-lbl{
	font-size: 1.8rem;
	font-weight: 500;
}

.edit-client-account-mobile-pnl .need-change-pass-lbl{
	color: #4698CB;
    text-decoration: underline;
}

.edit-client-account-mobile-pnl .edit-client-account-head{
	margin-bottom: 20px;
	position: relative;
}

.edit-client-account-mobile-pnl .edit-client-account-head .delete-payer-account-pnl-wrapper{
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
	border-radius: 5px;
	background: #FFF;
	text-align: center;
	display: flex;
	height: 25px;
	align-items: center;
	justify-content: center;
}

/* .edit-client-account-mobile-pnl .edit-client-account-head .delete-payer-account-pnl-wrapper:hover{ */
/* 	cursor: pointer; */
/* } */

.edit-client-account-mobile-pnl .edit-client-account-head .delete-payer-account-pnl-wrapper .delete-payer-account-pnl{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
    align-items: center;
    justify-content: center;
}

.edit-client-account-mobile-pnl .edit-client-account-head .delete-payer-account-pnl-wrapper .delete-payer-account-pnl .link-dell-pnl{
	position: absolute;
	width: 177px;
	background: #FFFFFF;
	border-radius: 5px 0px 5px 5px;
	padding: 10px;
	box-sizing: border-box;
	right: 0;
	box-shadow: 10px 10px 35px rgba(0, 51, 100, 0.15);
	bottom: -39px;
}

.edit-client-account-mobile-pnl .edit-client-account-head .delete-payer-account-pnl-wrapper .delete-payer-account-pnl .link-dell-pnl a{
	color: #EB001B;
}

/* .edit-client-account-mobile-pnl .edit-client-account-head .delete-payer-account-pnl-wrapper .delete-payer-account-pnl:hover{ */
/* 	box-shadow: 10px 10px 35px rgba(0, 51, 100, 0.15); */
/* } */

/* .edit-client-account-mobile-pnl .edit-client-account-head .delete-payer-account-pnl-wrapper .delete-payer-account-pnl:hover .link-dell-pnl{ */
/* 	display: block; */
/* } */

.edit-client-account-mobile-pnl .btn-pnl{
	display: flex;
}

.edit-client-account-mobile-pnl .change-pass-pnl > *{
	margin: 4px 0;
}

.edit-client-account-mobile-pnl .change-pass-pnl .need-change-pass-pnl{
	display: flex;
	margin-bottom: 14px;
}

.edit-client-account-mobile-pnl .change-pass-pnl .need-change-pass-pnl > .check-box-pnl{
	flex: 0 0 auto;
	margin-left: 10px;
}

/* Client Dlg */

.modal-client-dlg-btn{
	display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

div.client-dialog-content-pnl{
	padding: 30px 35px;
	box-sizing: border-box;
}


.closeDlgBtnClient{
	position: absolute;
    right: 0;
    top: -30px;
    opacity: 1;
}

/* .closeDlgBtnClient:hover{ */
/* 	cursor: pointer; */
/* 	opacity: 1; */
/* } */


div.add-payer-card-dialog{
	background: url('/mArtPay/resources/images/addCardPhone.png;base64,[data]') white no-repeat;
	min-height: 190px;
	width: 290px;
	/* background-size: cover; */
	background-size: 100% 100%;
	box-shadow: none;
	width: 90vw;
}

div.add-payer-card-dialog div.add-payer-card-content-pnl{
	padding: 10px;
}

div.add-payer-card-dialog div.add-payer-card-content-pnl .add-card-dlg-lbl{
	color: rgba(255, 255, 255, 0.5);
	font-size: 1.4rem;
}

div.add-payer-card-dialog div.add-payer-card-content-pnl .add-card-dlg-input{
	font-size: 1.8rem;
	background: none;
	border: 1px solid rgba(233, 240, 244, 0.5);
    box-sizing: border-box;
    border-radius: 4px;
    width: 225px;
    color: #FFFFFF;
}

div.add-payer-card-dialog div.add-payer-card-content-pnl .add-card-dlg-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #FFFFFF;
  opacity: 0.7;
  font-weight: 300;
}

div.add-payer-card-dialog div.add-payer-card-content-pnl .add-card-dlg-input:focus::placeholder{
	opacity: 1;
}

div.add-payer-card-dialog div.add-payer-card-content-pnl .add-card-dlg-pnl{
	display: flex;
    flex-flow: column;
    text-align: left;
}

div.add-payer-card-dialog div.add-payer-card-content-pnl .add-card-dlg-pnl input{
	/* height: 30px; */
	height: 3.8rem;
}

div.add-payer-card-dialog div.add-payer-card-content-pnl .add-card-dlg-pnl input:focus{
	box-shadow: none;
	border: 1px solid rgba(233, 240, 244, 1);
}

div.add-payer-card-dialog div.add-payer-card-content-pnl .expiriens-pnl{
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
    align-items: center;
}

div.add-payer-card-dialog div.add-payer-card-content-pnl .expiriens-pnl input ~ label{
    -webkit-box-ordinal-group: 0;
	-ms-flex-order: -1;
	order: -1;
}

div.add-payer-card-dialog div.add-payer-card-content-pnl .expiriens-pnl input:focus ~ label {
	color: rgba(255, 255, 255, 1);
}

div.add-payer-card-dialog div.add-payer-card-content-pnl .expiriens-pnl > input{
	margin-left: 10px;
}

.add-card-dlg-save{
	position: absolute;
    bottom: 10px;
    right: 10px;
    background: url('/mArtPay/resources/images/okDlgClientBtn.png;base64,[data]') white no-repeat;
    width: 36px;
    height: 36px;
    border-radius: 4px;
}

/* .add-card-dlg-save:hover{ */
/* 	opacity: 0.5; */
/* } */

div.add-payer-card-dialog div.add-payer-card-content-pnl .add-card-dlg-input-column-pnl{
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-flow: column;
	flex-flow: column;
}

div.add-payer-card-dialog div.add-payer-card-content-pnl .add-card-dlg-input-column-pnl  input ~ label{
	-webkit-box-ordinal-group: 0;
	-ms-flex-order: -1;
	order: -1;
}

div.add-payer-card-dialog div.add-payer-card-content-pnl .add-card-dlg-input-column-pnl input:focus ~ label {
	color: rgba(255, 255, 255, 1);
}

@media screen and (max-width: 320px) {
	
	.edit-client-account-mobile-pnl{
	    padding: 0 15px 160px 15px;
	}
	
	.header .header-second-row .user-pnl.user-name-pnl{
	    font-size: 1.2rem;
	}
}