:root {
    --app-sidebar-width: 240px;
}


.app-viewport {
    padding: 20px 40px 100px !important;
    margin: 0 !important;

    font-size: 12rem;
}

.app-viewport:not(.sidebar-disabled) {
    padding-left: calc(var(--app-sidebar-width) + 40px) !important;
}


.app-viewport h2 {
    font-size: 20rem;
    margin-top: 0;
}


/*
.app-wrap {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 100vh;
    padding-left: 240px;
}
*/


.app-left-top {
    position: fixed;
    z-index: 121;
    left: 0;
    top: 2px;
    width: var(--app-sidebar-width);
    text-align: center;
}
.app-left-top a {
    display: inline-block;
    padding: 10px 10px 5px;
    color: #444;
    border-radius: 5px;
}
.app-left-top a:hover {
    background: #333;
    color: #fff;
}
.app-left-top i.fa-solid { 
    font-size: 16rem;
}



.app-sidebar {
    position: fixed;
    z-index: 111;
    left: 0;
    top: 0;
    width: var(--app-sidebar-width);
    height: 100%;

    background: #222;
    overflow: auto;

}
.app-sidebar > div {
    overflow: auto;
    width: 100%;
    height: 100vh;
    padding-top: 50px;
}

/*
.app-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--app-sidebar-width);
    height: 100vh;

    padding-top: 50px;

    background: #111;
    overflow: auto;
    
    display: flex;
    align-items: top;
}

@media (min-height:720px)
{
    .app-sidebar {
        align-items: center;
        padding-bottom: 150px;
    }
}
.app-sidebar > div {
    width: 100%;
}
*/

.app-viewport h1 {
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid #111;
    color: var(--color-primary);
}


.app-sidebar h1 {
    padding: 10px;
    padding-left: 15px;
    background: var(--color-primary);
    color: #fff;
    margin-bottom: 10px;
}




.app-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.app-sidebar ul li {
    
}
.app-sidebar ul li.hdr {
    padding: 10px 0 10px 15px;
    font-weight: bold;
}
.app-sidebar ul a, .app-sidebar ul span {
    display: block;
    padding: 10px 20px 10px 25px;
    text-decoration: none;
}
.app-sidebar ul a:hover {
    text-decoration: underline;
}
.app-sidebar ul span {

}
.app-sidebar ul a.active {
    background: #333;
    color: #fff;
}
.app-sidebar ul span.disabled {
    color: #999;
}


.app-main {
    /*
    position: fixed;
    left: 240px;
    top: 0;
    width: calc(100vw - 270px);
    
    padding: 40px;
    */
    
    min-height: 50vh;
    max-width: 1000px;
    -background: navy;
    margin: auto;
    
    display: flex;
    flex-direction: column;
    flex-gap: 20px;
    align-items: center;
    justify-content: center;
}
.app-main > * {
    width: 100%;
}

.app-box, .app-main > section {
    margin: 20px auto;
}
.app-box:first-child {
    margin-top: 0;
}
.app-box:last-child {
    margin-bottom: 0;
}

.app-box > :first-child {
    margin-top: 0;
}
.app-box > :last-child {
    margin-bottom: 0;
}
.app-box h1, .app-box h2, .app-box h3 {
    -color: var(--color-primary);
}
.app-box h3 {
    font-size: 20rem;
    -color: var(--color-primary);
}
.app-box h4 {
    color: var(--color-primary);
    font-weight: normal;
    margin: 10px 0;
}

.app-box, 
.app-message, .app-message-center, .app-message-error, .app-message-ok, .app-message-yellow,
.app-viewport > section, 
.app-viewport h2 {
    background: #222;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    width: 100%;
    -min-width: 600px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    
}
.app-box {
    padding: 20px 40px;
}


.app-message-ok {
    background: #0c0  !important;
    color: #333 !important;
    font-weight: bold;
}
.app-message-yellow {
    background: #ee0 !important;
    color: #333 !important;
    font-weight: bold;
}
.app-message-error {
    background: #d00 !important;
    color: #fff !important;
    font-weight: bold;
}

.align-left {
    text-align: left;
}
.align-center {
    text-align: center;
}
.align-right {
    text-align: right;
}


.vmargins {
    margin: 20px auto;
}

.text-left {
    text-align: left;
}


.app-message, .app-message-center, .app-message-error {
    
}

.app-message-center {
    text-align: center;
}


.app-viewport > section.app-message-error {
    background: #d00;
    color: #fff;
}



#creator-warninig-fee, #creator-warninig-limit {
    display: none;
}


#creator-calc2-wrap {
    margin: -20px auto 20px;
}


#creator-calc, #creator-calc2 {
    display: table;
    max-width: 600px;
    margin: 40px auto;
    border-radius: 5px;
    background: #222;
    padding: 20px;
}
#creator-calc > div, #creator-calc2 > div {
    display: table-row;
}
#creator-calc > div > div:first-child, #creator-calc2 > div > div:first-child {
    text-align: left;
    padding-right: 20px;
}
#creator-calc > div > div, #creator-calc2 > div > div { 
    display: table-cell;
    padding: 5px;
}

#creator-calc2 {
    display: none;
    margin-top: 20px;
}
#creator-calc2-rate {
    text-align: left;
    padding-left: 20px !important;
    padding-top: 10px !important;
}

.mt0 {
    margin-top: 0;
}
.mb0 {
    margin-bottom: 0;
}
.gray {
    color: gray;
}

#creator-expire {
    position: absolute;
    right: 40px;
    top: 10px;
    font-size: 10rem;
    text-align: right;
}
#creator-expire i {
    vertical-align: middle;
    margin-left: 5px;
}


.display-inline {
    display: inline;
}
.display-inline-block {
    display: inline-block;
}

button.blank {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--color-primary);
}

.mt0 {
    margin-top: 0 !important;
}
.mb0 {
    margin-bottom: 0 !important;
}


.hr-text {
    position: relative;
    border-bottom: 1px solid var(--color-primary);
    height: 0;
    margin: 60px;
}
.hr-text > div {
    position: absolute;
    width: 100px;
    margin-left: -50px;
    left: 50%;
    top: -13px;
    background: #333;
    text-align: center;
}
.app-box .hr-text > div {
    background: #222;
}

.bbcp {
    border-bottom: 1px solid var(--color-primary);
    padding-bottom: 10px;
}

.app-viewport input[type=text], .app-viewport input[type=email], .app-viewport input[type=date],
.app-viewport select, .app-viewport textarea {
    background: #444;
    color: #fff;
    border: 0;
    border-radius: 5px;
    padding: 15px 20px;
}
.app-viewport select {
    appearance: treeview;
    padding-right: 5px;
}
.app-viewport select option {
    background: #444;
    color: #fff;
    padding: 3px;
}
.app-viewport select option:checked {
    background: #555 !important;
}

.app-viewport input[type=text]:focus, .app-viewport input[type=email]:focus {
    outline: 1px solid yellow;

}

.app-viewport .button, .app-viewport .button-primary, .app-viewport .button-blank {
    font-size: 11rem;
    padding: 14px 25px;
}
.app-viewport .button.bigger, .app-viewport .button-primary.bigger, .app-viewport .button-blank.bigger {
    font-size: 13rem;
    padding: 15px 30px;
}

.app-viewport .button.smaller, .app-viewport .button-primary.smaller, .app-viewport .button-blank.smaller {
    font-size: 10rem;
    padding: 10px 15px;
}


#client-search {
    padding: 0;
}

#client-search2 > div {
    display: flex;
    gap: 20px;
}

#client-search2 > div > * {
    flex-grow: 1;
    margin: 0;
}
#client-search2 > div > *:last-child {
    flex-grow: 0;
}

.container {
    position: relative;
}

.table-table-25-75 {
    width: 100%;
}
.table-table-25-75 tr > *:first-child {
    width: 25%;
}
.table-table-25-75 tr > *:last-child {
    width: 75%;
}
.table-table-25-75 tr > td {
    text-align: left;
}

.app-box .table {
    display: table;
    width: 100%;
}
.app-box .table > * {
    display: table-row;
}
.app-box .table > * > *  {
    display: table-cell;
    padding: 10px;
    padding-left: 0;
    text-align: left;
}
.app-box .table > * > label:first-child, .table-first-td-label > tbody > tr > td:first-child {
    color: #666;
    padding-right: 30px;
    width: 25%;
    text-align: right;
    padding-right: 40px;
    vertical-align: top;
    -padding-top: 20px;
}
.table-first-td-label > tbody > tr > td:first-child {
    font-size: 11rem;
    padding-top: 18px;
    padding-bottom: 18px;
}
.app-box .table.table-form > * > label:first-child {
    padding-top: 20px;
}
.app-box .table > * > *:last-child {
    width: 75%;
    vertical-align: top;
}
.app-box .table.table-2-50 > * > *:first-child, .app-box .table.table-2-50 > * > *:last-child {
    width: 50%;
}
.app-box .table.table-2-40 > * > *:first-child {
    width: 40%;
    
} 
.app-box .table.table-2-40 > * > *:last-child {
    width: 60%;
}
.app-box .table.table-3 > * > * {
    width: 33.333%;
}



#client-search2 {
    padding-left: 0;
    padding-right: 0;
    margin: 0;
    padding: 0;
    
    margin-bottom: 40px;
}
.hr-dark {
    border: 0;
    border-bottom: 1px solid #111;
    height: 0;
    overflow: hidden;
    margin: 20px 0;
}

.spark-color {
    color: var(--color-primary) !important;
}
.spark-bigger {
    font-size: 130%;
}
.spark-spark {
    color: var(--color-primary) !important;
    font-size: 130%;
}


.app-client-search-or {
    display: inline-block;
    -padding: 12px 0;
    flex-grow: 0 !important;
    font-size: 10rem;
    color: #999;
}


b.spark {
    color: var(--color-primary);
}

#app-client-hdr {
    background: var(--color-primary);
    color: #fff;
    border-radius: 5px;
    padding: 20px;
}

.app-viewport .button-smaller {
    padding: 8px 15px;
}

.app-viewport .button-smaller2 {
    padding: 12px 15px;
    font-size: 10rem;
}

.app-cashier-docs .row {
    margin: 40px 0;
    border-radius: 5px;
    background: #333;
    padding: 15px 20px;
}
.app-cashier-docs .row:last-child {
    margin-bottom: 0;
}
.app-cashier-docs .row .hdr {
    margin-bottom: 10px;
    font-size: 110%;
    color: var(--color-primary);
}

#risk-button {
    display: none;
}

.table-report td {
    padding: 5px;
    padding-right: 20px;
    -vertical-align: top;
}
.table-report a {
    display: inline-block;
    padding: 5px;
}
.table-report a:hover {
    text-decoration: none;
    background: #666;
    color: #fff;
}
.table-bordered {
    border-collapse: collapse;
}
.table-bordered td {
    border: 1px solid #999;
    padding: 7px;
    background: #f9f9f9;
}

 .arb-hdr {
     background: #00000066;
     padding: 10px;
 }
 
 .pointer {
     cursor: pointer;
 }
 
 
 .tab-td-pad td {
     padding: 5px;
 }
 .tab-bordered {
     border-collapse: collapse;
 }
 .tab-bordered td {
     border: 1px solid #00000055;
 }
 
 
 #wizard-top-right {
     position: absolute;
     right: 0;
     top: 0;
 }
 #wizard-top-right .pad {
     padding: 10px;
 }
 #wizard-top-right a {
     text-decoration: none;
     color: #fff;
     display: inline-block;
     padding: 15px;
 }
 #wizard-top-right a.btn {
     padding: 15px 20px;
 }
 #wizard-top-right a:hover {
     text-decoration: underline;
     background: #222;
 }
 
 .wizard-vmargin {
     margin-top: 20px;
     margin-bottom: 20px;
 }
 .wizard-vmargin:first-child {
     margin-top:0;
 }
 .wizard-vmargin:last-child {
     margin-bottom:0;
 }
 .wizard-vpadding {
     padding-top: 10px;
     padding-bottom: 10px;
 }
 .display-none {
     display: none;
 }
 
 .wizard .app-viewport h1 {
     margin-top: 0px;
 }
 .maxw100p {
     max-width:100%;
 }
 
 @media (max-width:800px)
 {
     .wizard .app-viewport h1 {
         padding-top: 10px;
         margin-top: 10px;
     }
 }
 
 @media (min-width:1000px)
 {
    #wizard-top-right
    {
        padding-top: 10px;
    }

 }
 
 .table-td-rpadding20 td {
     padding-right: 20px;
 }
 .rpad20 {
     padding-right: 20px;
 }
 
 @media (max-width:500px)
 {
     body.app-viewport {
         -margin: 10px;
         padding: 0 10px 100px !important;
         -padding-right: 10px !important;
     }
     #wizard-top-right {
         position: static;
         margin-left: -10px;
         margin-right: -10px;
         overflow: hidden;
         text-align: right;
     }
     #wizard-top-right span.pad {
         max-width: 40vw;
         overflow: hidden;
         display: inline-block;
         float: left;
         text-align: left;
     }
     #wizard-top-right > * {
         vertical-align: top;
     }
     .app-box {
         padding: 20px;
     }
     
     .app-box .table-2-50-mobile, .app-box .table-2-50-mobile > *, .app-box .table-2-50-mobile > * > * {
        display: block;
        width: 100% !important;
     }
 
 }
 
 .tabx-borders {
     border-collapse: collapse;
 }
 .tabx-borders td {
     -border: 1px solid #444;
     padding: 10px 5px;
 }
 
 .tabx-borders tr:nth-child(odd) td {
     background: #333;
 }
 
 #padvpnt38723 td:first-child {
     text-align: left;
 }
 #padvpnt38723 td:not(:first-child) {
     padding-left: 20px;
 }
 
 #poinOps8327642 td {
     text-align: right;
 }
 
 #poinOps8327642 td:nth-child(1), #poinOps8327642 td:nth-child(2), #poinOps8327642 td:nth-child(3), #poinOps8327642 td:nth-child(4) {
     text-align: left;
 }
 
/*
#giif-raport, #giif-raport tbody, #giif-raport tr, #giif-raport td {
    display: block;
} 
#giif-raport tr {
    display: flex;
}
#giif-raport td {
    padding: 15px 10px;
}
#giif-raport td:first-child {
    min-width: 100px;
}
*/

#giif-raport td {
    vertical-align: top;
}