/*########################################
/#####RESET ELEMENTS
########################################*/
* {
  margin: 0; padding: 0; box-sizing: border-box;
  transition: all 0.5s ease; -webkit-transition: all 0.5s ease;
  font-family: 'IBM Plex Sans', sans-serif;
}
ul {
  list-style: none; list-style-type: none;
}
ul li {
  float: left;
}
img, fieldset {
  border: none;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal; margin-bottom: 10px;
  font-family: 'IBM Plex Sans', sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200;300;500;600&display=swap');

/*########################################
/#####MAIN ELEMENTS
########################################*/
h1 {
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; margin-bottom: 20px;
    font-size: 28px; color: #322929; letter-spacing: 0; line-height: 1.3em;
}
h2 {
    font-family: 'IBM Plex Sans'; font-size: 18px; 
    color: #000000; letter-spacing: 0.57px; 
}
strong {
    font-weight: 800;
}
hr {
    width: 100%; height: 1px; background: #B5C0CC; border: none;
    margin: 25px 0;
}
p {
    display: block; margin-bottom: 10px;
}
a {
    text-decoration: none;
}
i {
    float: left;
}
a:hover {
    text-decoration: underline;
}
.description {
    width: 100%; float: left; margin-bottom: 15px;
    margin-top: -15px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
input[type=number] {
    -moz-appearance:textfield;
}
html {
    height: 100%;
}
body {
    background: #F9FAFA; font-family: 'IBM Plex Sans';
    font-size: 14px; color: #322929; letter-spacing: 0; line-height: 24px;
    font-weight: 300;
}
body #background {
    position: fixed; width: 100%; height: 250px;
    /*background: url('../img/_layout/background.svg') center bottom no-repeat;*/
    background-size: auto 250px; bottom: 0px;
}
.content {
    max-width: 980px; padding: 0px 30px; margin: auto; width: 100%;
    position: relative; z-index: 100;
}
.clear {
    width: 100%; clear: both; display: block; float: left;
}

/*########################################
/#####FORM EMLEMENTS
########################################*/
.input {
    float: left; width: 100%; text-align: left; position: relative;
}
input[type=text], input[type=password], input[type=email], input[type=number], textarea {
    background: #FFFFFF; border: 1px solid #DEDEDE;
    padding: 17px 0px 15px; width: 100%; height: 45px; font-family: 'IBM Plex Sans'; font-weight: 400;
    font-size: 13px; color: #1B2437; letter-spacing: 0; line-height: 18.75px;
    margin-bottom: 15px; padding-left: 45px; border-radius: 8px;
}
textarea {
    padding: 10px 15px; padding-left: 15px; height: auto;
}
input[type=text].in-sm, input[type=password].in-sm, input[type=email].in-sm {
    padding: 0px 15px; height: 35px; font-size: 12px;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus {
    border: 1px solid #8b8888; outline: none;
}
input[type=text].error, input[type=password].error, input[type=email].error, input[type=number].error {
    border: 1px solid #bf2020;
}
input[type=email] {
    background: #FFF url('../img/_layout/ico-mail.svg') 15px center no-repeat;
}
input[type=password] {
    background: #FFF url('../img/_layout/ico-password.svg') 15px center no-repeat;
}
input[type=submit] {
    border: none; font-weight: 500; font-size: 16px; color: #FFFFFF; 
    letter-spacing: 0; text-align: center; line-height: 20.62px; padding: 11px 15px; 
    float: right; width: 100%; background: #2C727C url('../img/_layout/btn-submit.svg') right 15px center no-repeat; border: 1px solid #1F4B52; 
    background-size: 20px; cursor: pointer;
    border-radius: 7px; font-family: 'IBM Plex Sans', sans-serif; text-align: left;
}
input[type=submit]:hover {
    background-color: #246068; background-position: right 12px center;
}
input[type=text].in-search {
    height: 40px;
    background: #FFF url('../img/_layout/ico-search.svg') 15px center no-repeat;
    margin-bottom: 0px;
}
input[type=text]#cash-rek-yuki, input[type=number]#cash-rek-yuki {
    background: #FFF url('../img/_layout/ico-cash-rek-yuki.svg') 15px center no-repeat;
}
input[type=text]#cash-name-yuki {
    background: #FFF url('../img/_layout/ico-cash-name-yuki.svg') 15px center no-repeat;
}
input[type=text]#file-name {
    background: #FFF url('../img/_layout/ico-file-name.svg') 15px center no-repeat;
}
input[type=text]#file-id {
    background: #FFF url('../img/_layout/ico-file-id.svg') 15px center no-repeat;
}
input[type=text]#yuki-mail {
    background: #FFF url('../img/_layout/ico-mail.svg') 15px center no-repeat;
}
input[type=text]#address-fill {
    background: #FFF url('../img/_layout/ico-address.svg') 15px center no-repeat;
}
input[type=text]#start-amount {
    background: #FFF url('../img/_layout/ico-start-amount.svg') 15px center no-repeat;
}
input[type=text]#amount {
    background: #FFF url('../img/_layout/ico-start-amount.svg') 15px center no-repeat;
}
input[type=text]#description,
input[type=text]#first-name,
input[type=text]#last-name {
    background: #FFF url('../img/_layout/ico-description.svg') 15px center no-repeat;
}
input[type=text]#transaction {
    background: #FFF url('../img/_layout/ico-transaction.svg') 15px center no-repeat;
}
input[type=text]#gb-account {
    background: #FFF url('../img/_layout/ico-gb-account.svg') 15px center no-repeat;
}
input[type=text]#vat-company {
    background: #FFF url('../img/_layout/ico-vat-company.svg') 15px center no-repeat;
}
label {
    font-family: 'IBM Plex Sans'; font-weight: 500; font-size: 10px; color: #FFFFFF; letter-spacing: 0;
    line-height: 18.75px; background: #8b8888; border-radius: 0px; padding: 1px 7px;
    position: absolute; top: -10px; left: 10px; opacity: 0;
}
label.labelfocus {
    opacity: 1;
}

select[multiple] {
    height: auto !important;
}
#btn-cancreate {
    background: #178ca5;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #FFF;
    font-weight: 800;
    float: left;
}

a.btn {
    width: 30px; height: 30px; background-color: #CECECE; border-radius: 0px;
    text-indent: -9999px; float: right; cursor: pointer; margin-left: 5px;
}
a.btn.btn-edit {
    background: url('../img/_layout/ico-edit.svg') center center no-repeat;
    background-size: 15px;
}
a.btn.btn-add {
    background: #67D2F2 url('../img/_layout/btn-add.svg') center center no-repeat;
    background-size: 15px; border-radius: 100%;
}
a.btn.btn-delete {
    background: url('../img/_layout/btn-delete.svg') center center no-repeat;
    background-size: 15px;
}
a.btn.btn-parameter {
    background: url('../img/_layout/btn-edit.svg') center center no-repeat;
    background-size: 15px;
}
a.btn.btn-sort {
    background: url('../img/_layout/btn-sort.svg') center center no-repeat;
    background-size: 15px; cursor: move;
}

/*#btn-add {

    position: absolute; right: 30px; top: 30px; background-size: 25px;
    width: 55px; height: 55px; border-radius: 100%;
}
#btn-add-small {
    background: #67D2F2 url(../img/_layout/btn-add.svg) center center no-repeat;
    width: 30px; height: 30px; background-size: 15px; float: right;
}

#btn-add:hover {
    background-color: #4bb9da;
}
#btn-add.small {
    transform: scale(0.6);top: -15px;
    right: -15px;
}
*/
input[readonly] {
    background-color: #f9f2f2; cursor: not-allowed;
}



.hover-bubble {
    position: relative;
}

.hover-bubble .bubble {
    position: absolute; float: left; background: #2d2d2d; padding: 3px 10px;
    color: #FFF; white-space: nowrap; right: -20px; text-indent: 0px;
    display: none; font-size: 12px; bottom: 35px;
}
.hover-bubble:hover .bubble {
    display: block;
}
.hover-bubble .bubble::after {
    content: ''; width: 10px; height: 10px; background: #2d2d2d;
    transform: rotate(45deg); position: absolute; bottom: -5px; right: 30px;
}



.hover-bubble .dscr {
    white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block;
}
.hover-bubble .bubble span.header-title {
    float: left; width: 100%; font-weight: 800;
}
.hover-bubble .bubble span.header,
.hover-bubble .bubble span.value {
    float: left; width: 50%;
}
.hover-bubble .bubble span.header {
    color: #CECECE;
}







/*
.btn-csv {
    background: #E47321; border: none; font-family: 'IBM Plex Sans';
    font-weight: 500; font-size: 14px; color: #FFFFFF; letter-spacing: 0;
    text-align: center; line-height: 20.62px; padding: 10px 40px; float: right;
    margin-left: 20px;
}
*/

#wrapper .radio-wrapper {
    margin-bottom: 10px;
}
#wrapper .input.file label,
#wrapper .radio-wrapper label {
    position: relative; top: 0px; left: 0px; opacity: 1; background: transparent;
    color: #000; font-size: 13px; font-weight: 400;
}
#wrapper .input.file {
    margin-bottom: 15px;
}
#wrapper .select label {
    position: relative; top: 0px; left: 0px; opacity: 1; background: transparent;
    color: #000; font-size: 13px; font-weight: 400;
}
#wrapper .select select {
    width: 100%; height: 40px; margin-bottom: 15px;
}
#wrapper .radio-wrapper input[type=radio] {
    margin-right: 7px;
}
/*#wrapper input[type=submit] {
    background: #19abe8; width: 100%;
}*/
/*#wrapper input[type=text]:focus,
#wrapper input[type=password]:focus,
#wrapper input[type=email]:focus{
    border: 1px solid #19abe8; outline: none;
}
#wrapper label {
    background: #19abe8;
}
*/


table {
     border-radius: 6px; padding: 10px;
    font-size: 13px;
}
.half {
    width: 50%; float: left;
}
.table {
    display: flex; flex-direction: column; float: left; width: 100%; margin-bottom: 20px;
}
.table .row {
    display: flex; font-family: 'IBM Plex Sans'; font-weight: 300; font-size: 12px;
    color: #292828; letter-spacing: 0; line-height: 18px; background: #ffffff85;
    align-items: center; text-decoration: none; position: relative; height: 30px;
    padding-right: 35px; margin-bottom: 1px;
}
.table .row.header {
    font-family: 'IBM Plex Sans'; font-weight: 600;
    font-size: 10px; color: #606060; letter-spacing: 0;
    background: none; margin-bottom: 3px;
}
.table .row-wrapper {
    float: left; width: 100%; margin-bottom: 10px; border: 1px solid #0000001a; 
    border-radius: 8px; overflow: hidden; position: relative;
}
.table .row-wrapper .btn {
    position: absolute; right: 1px; top: 1px; height: 29px; width: 29px;
}





.table .row .btn-delete {
    width: 20px; height: 20px;
    background: url(../img/_layout/btn-bin.svg) center center no-repeat;
    float: left; cursor: pointer; opacity: 0.8;
    background-size: 17px; position: absolute; right: -25px;    overflow: hidden;
    top: 5px; line-height: 9999px;
}
.table .row:hover {
    background: #ebeff3;
}
.table .row.active {
    background: #CEDCEA; margin-bottom: 0px;
}


.table .row .item {
    flex: 4; padding: 8px 10px 7px 10px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; display: block;
}
.table .subrow {
    background: #f8fcff; border-top: 1px dashed #e3ebf4;
}
.table .subrow.plus {
    background: #e2f1df;
}
.table .subrow.min {
    background: #f3c3bb;
}
.table .subrow .item  {
    font-size: 10px; padding: 5px 10px 3px;
}
.table .row.header .item {
    padding: 0px 10px;
}
.table .row.with-subrow {

}
.table .row .item:nth-child(4) {
  flex: 1; text-align: center;
}

.message {
    position: fixed; max-width: 800px; bottom: 40px; right: auto; margin: auto;
    padding: 7px 20px; color: #3c763d; background-color: #dff0d8;
    border-color: #d6e9c6; font-weight: 800; border: 1px solid #6a7561;
    border-radius: 8px; left: 50%; transform: translate(-50%, 0); z-index: 500000;
}
.message.error {
    color: #a94442; background-color: #f2dede; border-color: #ebccd1;
}
.message.hidden {
    display: none;
}





#address-box {
    float: left; width: 100%; padding: 20px 20px 5px 20px; border: 1px solid #FFF;
    border-radius: 8px; margin-bottom: 20px; border: 1px solid #b7b7b7;
}
#address-box .input.in-route {
    margin-right: 20px; width: calc(100% - 120px); float: left;
}
#address-box hr {
    margin-bottom: 15px;
}
#address-box .input.in-street_number {
    width: 100px; float: left;
}
#address-box .input.in-locality {
    width: calc(100% - 240px); float: left; margin-right: 20px;
}
#address-box .input.in-postal_code {
    width: 100px; margin-right: 20px; float: left;
}
#address-box .input.in-country {
    width: 100px; float: left;
}


.popup-wrapper {
    position: fixed; background: #13222d87; z-index: 5000;
    top: 0px; left: 0px; right: 0px; bottom: 0px; display: none;
}
.popup-wrapper.active {
    display: block;
}
.popup-wrapper .popup {
    padding: 30px; width: 550px; overflow-y: scroll;
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    border: 1px solid #FFFFFF; 
    background: #FFF;
}
.popup-wrapper .popup .close-popup {
    position: absolute; width: 20px; height: 20px;
    background: url('../img/_layout/btn-close.svg') center center no-repeat;
    right: 15px; top: 15px; background-size: 15px 15px; cursor: pointer;
}




.card-wrapper {
  width: calc(100% + 40px); margin-bottom: 40px; float: left;
}
.card {
    float: left; width: calc(25% - 25px); margin-right: 20px; height: 300px;
    background: #FFF; text-align: center; padding-top: 130px;
}