*{
    font-family: 'yekan-light' !important;
    font-size: 16px !important;
}

.w-90{
    width: 90% !important;
}

.w-70{
    width: 70% !important;
}

.soft-pos-width,.default-panel-width{
    width: 70% !important;
}

.soft-pos-check-width{
    width: 90% !important;
}

.footer{
    position: absolute;
    width: 100%;
    bottom: 0;
}

.content-justify p{
    text-align: justify;
}

.form-panel-width{
    width: 65% !important;
}

html,body{
    height: 100% !important;
}

html,body{
    min-height: 100% !important;
    background-color: #fafafa;
}

.card{
    border-radius: 10px !important;
    padding: 15px !important;
    background-color: white;
}

.btn-container-sticky{
    position: -webkit-sticky; /* Safari */
    position: sticky;
    bottom: 0;
    background-color: white !important;
    border-radius: 0px !important;
}

.header-sticky{
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: white !important;
    border-radius: 0px !important;
}

.badge-warning{
    color: white;
}

.badge-secondary{
    background-color: #a6a6a6;
    color: white;
}

.button-group{
    background-color: #fff;
}

.button-group button{
    font-size: 12px !important;
    cursor: pointer;
    padding: 0.5rem .7rem !important;
    background-color: #fff;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    border-right: 0px;
    border-left: 0px;
}

.button-group button:first-child{
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    border-right: 1px solid #bbb !important;
}

.button-group button:last-child{
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-left: 1px solid #bbb !important;
}

.button-group button.active{
    background-color: #5d9cec;
    color: white;
}

input{
    padding: 0.7rem 1rem !important;
    border-radius: 10px !important;
    border: 1px solid #bbb;
}

div.item-group{
    height: 32px !important;
    direction: rtl;
    display: block;
}

div.item-group-vertical{
    display: block;
}

div.item-group-vertical.disabled{
    opacity: 0.5 !important;
}

div.item-group-vertical label,div.item-group-vertical label b{
    display: block;
    text-align: right;
    font-size: 14px !important;
    color: #5a5a5a;
}

div.item-group label{
    height: 32px !important;
    padding: 8px 10px !important;
    text-align: center;
    background-color: #ddd;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border: 1px solid #bbb;
    border-right: 0px;
    margin-bottom: 0px;
    margin-top: 1px;
}

div.item-group label.title{
    width: 120px;
    text-align: right;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 10px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 10px !important;
    border: 1px solid #bbb;
    border-left: 0px;
}

div.item-group input{
    width: 280px;
    height: 32px !important;
}

div.item-group-vertical .titled-group{
    width: 100%;
    height: 48px;
    border-radius: 10px !important;
    border: 1px solid #f1f1f1;
    background-color: #f0f0f0;
}

div.item-group-vertical .title{
    margin-bottom: 4px;
}

div.item-group-vertical input{
    width: 100%;
    border-radius: 10px !important;
    border: 1px solid #f1f1f1;
    background-color: #f0f0f0;
    height: 48px !important;
}

div.item-group-vertical .form-control[disabled]{
    background-color: inherit;
}

div.item-group-vertical input.form-control[disabled]{
    background-color: #f0f0f0 !important;
}

div.item-group-vertical input.form-control:focus{
    border: 1px solid #9d9d9d !important;
    background-color: #f0f0f0 !important;
    box-shadow: 0 0 0 0 !important;
}

div.item-group input.united{
    border-bottom-left-radius: 0px !important;
    border-top-left-radius: 0px !important;
    border-left: 0px !important;
}

div.item-group input.titled{
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-right: 0px !important;
}

div.item-group .titled-group{
    width: 280px;
    border-radius: 10px !important;
    border: 1px solid #bbb;
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-right: 0px !important;
    background-color: #fff;
}

div.item-group .titled-group input{
    width: auto;
    width: 60px;
    border-radius: 10px !important;
    border: none !important;
    padding: 0px !important;
}

div.item-group-vertical .titled-group input{
    display: inline !important;
    width: auto;
    width: 20%;
    border-radius: 10px !important;
    border: none !important;
    padding: 0px !important;
}

div.item-group-vertical .titled-group input.form-control:focus{
    border: 0px solid #f1f1f1 !important;
    background-color: #f0f0f0 !important;
    box-shadow: 0 0 0 0 !important;
}

div.item-group-vertical .titled-group select{
    direction: rtl !important;
    height: 48px;
    border: none;
    background-color: rgba(0,0,0,0) !important;
    border-radius: 10px;
    padding: 0px 10px !important;
}

div.item-group .titled-group select{
    height: 30px;
    border: none;
    border-radius: 10px;
}

div.item-group .titled-group input:focus{
    height: 30px !important;
    border-radius: 10px !important;
    border: none !important;
    padding: 0px !important;
}

.button-group button:hover{
    background-color: #f0f0f0;
}

.button-group button.active:hover{
    background-color: #5d9cec;
}

table{
    border-radius: 10px;
}

label{
    font-size: 11px !important;
}

.text-large{
    font-size: 14px !important;
}

.ins-item{
    cursor: pointer;
}

.card-selected{
    border: 2px solid #5d9cec
}

.shadow-top{box-shadow: 0 1rem .5rem rgba(0,0,0,.15), 0 -.5rem .5rem rgba(0,0,0,.15);}

.modal {
    direction: rtl;
    font-size: 18px !important;
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 60px;
    padding-top: 24px;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* The Close Button */
.close {
    color: #aaa;
    float: left !important;
    font-size: 20px !important;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Modal Header */
.modal-header {
    padding: 16px 16px;
}

.modal-header .close{
    margin: 0px !important;
    padding: 0px !important;
}

/* Modal Body */
.modal-body {padding: 16px 16px;}

/* Modal Footer */
.modal-footer {
    padding: 16px 16px;
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

.datepicker-container,.datepicker-plot-area{
    font-family: 'yekan-light' !important;
}

div.code_container input.code{
    width: 48px !important;
    height: 48px !important;
    font-size: 24px !important;
    text-align: center;
}

#loading .lds-ring div{
    border: 2px solid #bbb;
    border-color: #bbb transparent transparent transparent;
}

#loading .lds-ring,#loading .lds-ring div{
    width: 32px;
    height: 32px;
    margin-top: 12px;
}

.bg-info{
    background-color: #2e4750 !important;
}

.bg-info-light{
    background-color: #f6c90e;
    color: #303841;
    padding: 14px 14px;
    height: 48px;
    font-size: 14px !important;
    text-align: right !important;
    border-radius: 10px;
}

.bg-warning-light{
    background-color: #faf1f1 !important;
    color: #9f2b2b;
    padding: 14px 14px;
    height: 48px;
    font-size: 14px !important;
    text-align: right !important;
    border-radius: 10px;
}

.bg-info-light b{
    font-size: 14px !important;
}

.bg-warning-light b{
    font-size: 14px !important;
}

.glyphicon.light{
    color: #a4a4a4 !important;
}

span.text-light{
    color: #a4a4a4 !important;
}

.form-control{
    -webkit-box-shadow: 0 0 0 !important;
    box-shadow: 0 0 0 !important;
}

.filter-svg-sib-logo{
    filter: invert(81%) sepia(29%) saturate(1335%) hue-rotate(355deg) brightness(101%) contrast(93%);
}


.filter-svg{
    filter: invert(39%) sepia(12%) saturate(17%) hue-rotate(316deg) brightness(95%) contrast(86%);
}

.filter-svg-white{
    filter: invert(99%) sepia(4%) saturate(2%) hue-rotate(24deg) brightness(108%) contrast(101%);

}

.filter-svg-light{
    filter: invert(74%) sepia(0%) saturate(1%) hue-rotate(237deg) brightness(90%) contrast(87%);
}

.filter-svg-primary{
    filter: invert(48%) sepia(33%) saturate(768%) hue-rotate(116deg) brightness(102%) contrast(92%);
}

.filter-svg-warning{
    filter: invert(21%) sepia(24%) saturate(3868%) hue-rotate(335deg) brightness(109%) contrast(93%);

}

.btn-primary{
    background-color: #2e4750 !important;
    border-color: #2e4750 !important;
    height: 48px !important;
    border-radius: 10px !important;
}

.btn-primary.disabled{
    background-color: #2e4750 !important;
    border-color: #2e4750 !important;
    opacity: 0.5 !important;
}

.btn-secondary-small{
    font-size: 14px !important;
    background-color: #f9f9f9 !important;
    border-color: #f1f1f1 !important;
    height: 36px !important;
    border-radius: 8px !important;
    color: #212529 !important;
}

.btn-secondary-small.disabled{
    opacity: 0.4 !important;
}


.circle-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.circle-container .circle {
    display: inline-block;
    line-height: 0px;
    border-radius: 50%;
    font-size: 32px;
    background-color: #303841;
    color: white;
    width: 24px;
    text-align: center;
}

.circle-container .title {
    margin-right: 8px;
}

.circle-container .step {
    margin-right: 16px;
    margin-left: 16px;
}

.circle-container.completed .circle{
    background-color: #656565 !important;
}

.circle-container.disabled .circle{
    background-color: #bcbcbc !important;
}

.circle-container .title,.circle-container .step{
    color: #303841 !important;
}

.circle-container.completed .title{
    color: #656565 !important;
}

.circle-container.disabled .title{
    color: #a4a4a4 !important;
}

.circle-container .circle span {
    display: inline-block;
    padding-top: 50%;
    padding-bottom: 50%;
}

.circle-container .step{
    filter: invert(85%) sepia(5%) saturate(10%) hue-rotate(357deg) brightness(87%) contrast(85%);
}

select .select-option{
    border-radius: 0px !important;
    height: 32px !important;
}

select {
    background: url(../icons/chevron-down.svg) no-repeat right;
    filter: invert(11%) sepia(18%) saturate(422%) hue-rotate(169deg) brightness(94%) contrast(91%);
    -webkit-appearance: none;
    background-position-x: 16px;
}

.back-cash-icon {
    background: url(../icons/cash.svg) no-repeat right;
    filter: invert(11%) sepia(18%) saturate(422%) hue-rotate(169deg) brightness(94%) contrast(91%);
    -webkit-appearance: none;
    background-position-x: 16px;
}


.custom-select {
    position: relative;
}

.custom-select select {
    display: none; /*hide original SELECT element: */
}

.select-selected {
    /*background-color: DodgerBlue;*/
}

/* Style the arrow inside the select element: */
.select-selected{
    /*position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;*/
    background: url(../icons/chevron-down.svg) no-repeat right;
    filter: invert(10%) sepia(9%) saturate(1124%) hue-rotate(169deg) brightness(88%) contrast(86%);
    -webkit-appearance: none;
    background-position-x: 16px;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active {
    background: url(../icons/chevron-up.svg) no-repeat right;
    filter: invert(10%) sepia(9%) saturate(1124%) hue-rotate(169deg) brightness(88%) contrast(86%);
    -webkit-appearance: none;
    background-position-x: 16px;
    /*border-color: transparent transparent #fff transparent;
    top: 7px;*/
}

/* style the items (options), including the selected item: */
.select-items div,.select-selected {
    color: #212529 !important;
    text-align: right;
    padding: 10px;
    cursor: pointer;
}

/* Style items (options): */
.select-items {
    position: absolute;
    border: 1px solid #f1f1f1 !important;
    border-top: 0px !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #fcfcfc !important;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
    display: none;
}

.same-as-selected {
    background-color: rgba(0, 0, 0, 0.06);
}

.select-items div:hover{
    background-color: rgba(0, 0, 0, 0.02);
}

.select-items div:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.custom-list .list-row{
    padding: 12px 8px !important;
}

.custom-list .list-row:nth-child(2n+1){
    background-color: #fafafa !important;
    border-radius: 8px !important;
}

.text-size-small,.text-size-small p,.text-size-small strong,.text-size-small span{
    font-size: 14px !important;
}

@media (max-width: 700px) {
    .soft-pos-width,.default-panel-width {
        width: 95% !important;
    }

    .soft-pos-check-width{
        width: 95% !important;
    }

    .form-panel-width {
        width: 95% !important;
    }

    .circle-container .title strong{
        font-size: 60% !important;
    }

    .steps{
        flex-direction: column !important;
    }

    .steps img.step{
        display: none !important;
    }

    .steps .circle-container{
        margin-bottom: 8px !important;
    }

    #code_container .dash{
        display: none !important;
    }
}

.message .message-content.warning{
    background-color: rgb(255,120,77);
}

.message .message-content.info{
    background-color: rgb(77, 86, 255);
}

.message .message-content.error{
    background-color: rgb(255,120,77);
}

.message .message-content.success{
    background-color: rgb(77, 255, 80);
}

.select-selected.disabled{
    opacity: 0.4;
    cursor: default;
}

.modal-backdrop{
    position: relative;
}

.bootbox .bootbox-close-button{
    display: none !important;
}

@media (pointer:none), (pointer:coarse) {
    div.item-group input{
        width: 140px !important;
    }
}

.body-white,.body-white form{
    background-color: #fff !important;
}

.card-light{
    background-color: #F7F7F7 !important;
}

.select-items{
    max-height: 252px !important;
    overflow-y: scroll !important;
}