/*----------------------------------------------------------------------------------------------------------------------
 Common
----------------------------------------------------------------------------------------------------------------------*/
body.waiting * { cursor: wait; }

body::-webkit-scrollbar {
    width: 5px !important;;
    height: 5px !important;;
}

body::-webkit-scrollbar-track {
    background-color: #fff !important;;
    border-radius: 10px !important;;
}

body::-webkit-scrollbar-thumb {
    background-color: #dedede !important;
    border-radius: 10px !important;
    margin-left: 10px !important;
    padding: 2px !important;
}

*::-webkit-scrollbar {
    width: 5px !important;;
    height: 5px !important;;
}

*::-webkit-scrollbar-track {
    background-color: #fff !important;;
    border-radius: 10px !important;;
}

*::-webkit-scrollbar-thumb {
    background-color: #dedede !important;
    border-radius: 10px !important;
    margin-left: 10px !important;
    padding: 2px !important;
}

textarea::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

textarea::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 10px;
}

textarea::-webkit-scrollbar-thumb {
    background-color: #dedede;
    border-radius: 10px;
    margin-left: 10px;
    padding: 2px !important;
}

.vertical-collpsed .sidebar-icon-img{
    margin-left: 8px;
}

body:not(.vertical-collpsed) .sidebar-icon-img{
    margin-left: 4px;
    margin-right: 12px;
}

.footer{
    position: absolute !important;
}

#page-topbar{
    /*z-index: 99999;*/
}

.page-title-box {
    padding-bottom: 0 !important;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a{
    padding: 10px 20px !important;
    min-height: 20px !important;
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a i{
    font-size: 20px !important;
}

.container-custom {
    padding-right: 50px;
    padding-left: 50px;
    min-height:100%;
    margin: 0 auto !important;
    position:relative;
}

@media (max-width: 575px) {
.container-custom {
    padding-left: 0;
    padding-right: 0;

}
}

@media (min-width: 576px) {
.container-custom {
    max-width: 560px;
}
}
@media (min-width: 768px) {
.container-custom {
    max-width: 750px;
}
}
@media (min-width: 992px) {
.container-custom {
    max-width: 980px;
}
}
@media (min-width: 1200px) {
.container-custom {
    max-width: 1300px;
}
}

.boxshadow-topbar{
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;
}

.footer{
position: fixed !important;
margin-top: auto !important;
z-index: 101 !important;
background-color: #f8f8fb !important;
font-weight: 500 !important;
font-size: 12px !important;
}

.col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
.col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12,
.col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12,
.col, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12
{
margin-bottom: 1.5rem;
}

@media (min-width: 1200px) {
    .col-1-5{
        flex: 0 0 20%;
        max-width: 20%;
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-bottom: 1.5rem;
    }
}



/*.table th, .table td { max-width: 350px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }*/


.bg-soft-primary {
    background-color: rgba(80, 110, 228, 0.08) !important;
    color: #3649B2 !important;
}

.bg-soft-secondary {
    background-color: rgba(65, 203, 216, 0.08) !important;
    color: #41cbd8 !important;
}

.bg-soft-success {
    background-color: rgba(45, 218, 181, 0.08) !important;
    color: #2ddab5 !important;
}

.bg-soft-warning {
    background-color: rgba(255, 159, 67, 0.08) !important;
    color: #ff9f43 !important;
}

.bg-soft-info {
    background-color: rgba(155, 167, 202, 0.08) !important;
    color: #9ba7ca !important;
}

.bg-soft-danger {
    background-color: rgba(239, 77, 86, 0.08) !important;
    color: #ef4d56 !important;
}

.bg-soft-pink {
    background-color: rgba(253, 60, 151, 0.08) !important;
    color: #fd3c97 !important;
}

.bg-soft-purple {
    background-color: rgba(109, 129, 245, 0.08) !important;
    color: #6d81f5 !important;
}

.bg-soft-blue {
    background-color: rgba(23, 97, 253, 0.08) !important;
    color: #1761fd !important;
}

.bg-soft-classic {
    background-color: #f1f5fa !important;
    color: #303e67 !important;
}

.bg-soft-dark {
    background-color: rgba(0, 4, 68, 0.08) !important;
    color: #000444 !important;
}

.bg-primary-gradient {
    background: linear-gradient(14deg, #0b7af3 36%, #39add0 100%);
}

.bg-secondary-gradient {
    background: linear-gradient(14deg, #42cef1 36%, #63ddfb 100%);
}

.bg-success-gradient {
    background: linear-gradient(14deg, #22d4b3 36%, #71e6d1 100%);
}

.bg-info-gradient {
    background: linear-gradient(14deg, #4b545d 36%, #67737b 100%);
}

.bg-warning-gradient {
    background: linear-gradient(14deg, #efc039 36%, #f1cb60 100%);
}

.bg-danger-gradient {
    background: linear-gradient(14deg, #fb7589 36%, #ff9595 100%);
}

.bg-pink-gradient {
    background: linear-gradient(14deg, #FE5D9E 36%, #8E73FE 100%);
}

.bg-purple-gradient {
    background: linear-gradient(14deg, #6d81f5 36%, #8498f3 100%);
}

.bg-blue-gradient {
    background: linear-gradient(14deg, #11368a 36%, #326eca 100%);
}

.bg-dark-gradient {
    background: linear-gradient(14deg, #12100e 36%, #2b4162 100%);
}

.bg-light-gradient {
    background: linear-gradient(14deg, #c3cbdc 36%, #edf1f4 100%);
}

.bg-custom-gradient {
    background: linear-gradient(14deg, #521c85 36%, #4400ff 100%);
}

.color-custom-primary {
    color: rgba(80, 110, 228, 1) !important;
}

.color-custom-secondary {
    color: rgba(65, 203, 216, 1) !important;
}

.color-custom-success {
    color: #2ddab5 !important;
}

.color-custom-warning {
    color: #ff9f43 !important;
}

.color-custom-info {
    color: #9ba7ca !important;
}

.color-custom-danger {
    color: #ef4d56 !important;
}

.color-custom-pink {
    color: #fd3c97 !important;
}

.color-custom-purple {
    color: #6d81f5 !important;
}

.color-custom-blue {
    color: #1761fd !important;
}

.color-custom-classic {
    color: #303e67 !important;
}

.color-custom-dark {
    color: rgba(0, 4, 68, 1) !important;
}

/*----------------------------------------------------------------------------------------------------------------------
Modal tab
----------------------------------------------------------------------------------------------------------------------*/
.modal-tab-wizard{
    height: 40px;
    padding-top: 8px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    border-radius: 5px;
    background-color: #f1f4f7;
}

.modal-tab-wizard.active{
    color: #fff;
    background-color: #164778;
}

.modal-tab-wizard.completed{
    color: #fff;
    background-color: #164778;
}



/*----------------------------------------------------------------------------------------------------------------------
Cards
----------------------------------------------------------------------------------------------------------------------*/
.card-shadow{
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    transition: 0.2s;
}
.card-shadow .card-header{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.card-shadow .card-body{
    border-radius: 5px;
}
.card-shadow-hover:hover{
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

/*----------------------------------------------------------------------------------------------------------------------
Custom checkbox
----------------------------------------------------------------------------------------------------------------------*/
input[data-custom-checkbox="true"]{
    display: none !important;
}

.custom-checkbox{
    height: 20px;
    width: 20px;
    background-color: #e5e5e5;
    color: #cbcbcb;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.custom-checkbox + label[for]{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.custom-checkbox.md{
    height: 40px !important;
    width: 40px !important;
}

.custom-checkbox.lg{
    height: 60px !important;
    width: 60px !important;
}

.custom-checkbox.xl{
    height: 80px !important;
    width: 80px !important;
}

.custom-checkbox.round{
    border-radius: 50% !important;
}

.custom-checkbox input{
    display: none;
}

.custom-checkbox .icon{
    font-size: 10px;
    color: transparent;
}

.custom-checkbox .icon.light{
    color: inherit;
}

.custom-checkbox.md .icon{
    font-size: 20px !important;
}

.custom-checkbox.lg .icon{
    font-size: 35px !important;
}

.custom-checkbox.xl .icon{
    font-size: 40px !important;
}


.custom-checkbox.disabled{
    opacity: 0.5;
    cursor: not-allowed !important;
}
.custom-checkbox.checked{
    background-color: #2b56b9;
}
.custom-checkbox.muted.checked{
    background-color: #e5e5e5;
}
.custom-checkbox.danger.checked{
    background-color: rgb(217, 74, 74);
}
.custom-checkbox.orange.checked{
    background-color: rgb(255, 131, 54);
}
.custom-checkbox.warning.checked{
    background-color: rgb(255, 197, 54);
}
.custom-checkbox.success.checked{
    background-color: rgb(33, 173, 131);
}
.custom-checkbox.info.checked{
    background-color: rgb(82, 134, 255);
}
.custom-checkbox.primary.checked{
    background-color: #574892;
}
.custom-checkbox.dark.checked{
    background-color: rgb(54, 54, 54);
}


.custom-checkbox.checked .icon{
    color: #fff;
}
.custom-checkbox.muted.danger.checked .icon{
    color: rgb(217, 74, 74) !important;
}
.custom-checkbox.muted.orange.checked .icon{
    color: rgb(255, 131, 54) !important;
}
.custom-checkbox.muted.warning.checked .icon{
    color: rgb(255, 197, 54) !important;
}
.custom-checkbox.muted.success.checked .icon{
    color: rgb(33, 173, 131) !important;
}
.custom-checkbox.muted.info.checked .icon{
    color: rgb(82, 134, 255) !important;
}
.custom-checkbox.muted.primary.checked .icon{
    color: #574892 !important;
}
.custom-checkbox.muted.dark.checked .icon{
    color: rgb(54, 54, 54) !important;
}


/*----------------------------------------------------------------------------------------------------------------------
Toasts
----------------------------------------------------------------------------------------------------------------------*/
.toast-body{
    font-size: 12px;
    font-weight: 500 !important;
    padding-bottom: 15px !important;
}

.toast .toast-header{
    padding: 8px 16px 8px 12px !important;
}

.toast .btn-close{
    width: 6px !important;
    height: 6px !important;
}

.toast .text-green{
    color: #0b9a6b !important;
}

.toast .text-dark{
    color: #2f3134 !important;
}

/*----------------------------------------------------------------------------------------------------------------------
 Select2
----------------------------------------------------------------------------------------------------------------------*/
.modal-body .select2-dropdown {
    z-index: 10060 !important;
}

.modal-body .select2-close-mask {
    z-index: 10055 !important;
}
.modal-open .select2-container--open { z-index: 999999 !important; width:100% !important; }


/*----------------------------------------------------------------------------------------------------------------------
 Fonts and texts
----------------------------------------------------------------------------------------------------------------------*/
.font-size-4{
    font-size: 4px !important;
}
.font-size-5{
    font-size: 5px !important;
}
.font-size-6{
    font-size: 6px !important;
}
.font-size-7{
    font-size: 7px !important;
}
.font-size-8{
    font-size: 8px !important;
}
.font-size-9{
    font-size: 9px !important;
}

.text-ellipsis{
    width: 100%;
    white-space: nowrap;
    overflow: hidden; /* "overflow" value must be different from "visible" */
    text-overflow:    ellipsis;
}

/*----------------------------------------------------------------------------------------------------------------------
 Tables
----------------------------------------------------------------------------------------------------------------------*/
.tbody-empty{
    text-align: center;
    cursor: not-allowed;
}

/*----------------------------------------------------------------------------------------------------------------------
 Cursors
----------------------------------------------------------------------------------------------------------------------*/
.cursor-pointer{
    cursor: pointer !important;
}

.cursor-not-allowed{
    cursor: not-allowed !important;
}

.cursor-default{
    cursor: default !important;
}

.cursor-grab{
    cursor: grab !important;
}

/*----------------------------------------------------------------------------------------------------------------------
 Backlog
----------------------------------------------------------------------------------------------------------------------*/
.backlog-badge{
    border-radius: 5px;
    padding: 3px 10px;
    height: 25px;
    width: auto;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #fff;
}

.backlog-badge.small{
    padding: 2px 5px !important;
    height: 15px !important;
    font-size: 10px !important;
    font-weight: 500;
}

/*----------------------------------------------------------------------------------------------------------------------
 Form Sections
----------------------------------------------------------------------------------------------------------------------*/
.form-divider-subtitle{
    height: 50px;
    background-color: #f1f4f7;
    padding: 15px;
    margin-bottom: 20px;
    width: calc(100% - 20px);
    margin-left: 10px;
    font-weight: 400;
    font-size: 13px;
}

.form-divider-subtitle.form-divider-mx-0{
    width: 100% !important;
    margin-left: 0 !important;
}

.form-divider-subtitle.small{
    height: 30px;
    background-color: #f1f4f7;
    padding: 7px 10px;
    margin-bottom: 20px;
    width: calc(100% - 20px);
    margin-left: 10px;
    font-weight: 500;
    font-size: 11px;
}

/*----------------------------------------------------------------------------------------------------------------------
 Input password icon eye
----------------------------------------------------------------------------------------------------------------------*/
.input-group-icon input{
    padding-right: 40px;
}

.input-group-icon:not(.input-auth) .icon{
    position: absolute;
    font-size: 18px;
    cursor: pointer;
    top: 32px;
    right: 25px;
}
.input-group-icon.input-auth .icon{
    position: absolute;
    font-size: 18px;
    cursor: pointer;
    top: 7px;
    right: 25px;
}

.form-input-custom{
    border-radius: 3px !important;
    background: #fff !important;
    border: 2px solid #cccdd2 !important;
    transition: 0.2s !important;
    font-weight: 500 !important;
    color: #5e6c84;
}

.form-input-custom:focus{
    border: 2px solid #00c4dc !important;
    background: #fff;
}

/*----------------------------------------------------------------------------------------------------------------------
  Labels and texts
----------------------------------------------------------------------------------------------------------------------*/
label.cursor-pointer{
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.text-no-user-select{
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/*----------------------------------------------------------------------------------------------------------------------
 Form CTA Sections
----------------------------------------------------------------------------------------------------------------------*/
.form-cta-sections{
    height: calc(100% - 0px);
    top: 0;
    right: 0;
    z-index: 1000;
    width: 140px;
    background-color: transparent;
    position: fixed;
    padding: 50px 45px;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

.form-cta-sections .cta-btn{
    text-align: center;
    width: 50px;
    height: 50px;
    margin-top: 10px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: #164778;
}

.form-cta-sections .cta-btn i{
    color: #fff;
}

.form-cta-sections .cta-btn:hover{
    background-color: #50a5f1;
}

.form-cta-sections .cta-btn:hover i{
    color: #fff;
}


.form-cta-sections.cta-2x{
    width: 180px;
    position: fixed;
    padding: 0 45px 40px 45px;
}
.form-cta-sections.remove-height{
    height: 150px;
    position: fixed;
    bottom: 0;
    margin-top: auto !important;
}
.form-cta-sections.cta-2x .cta-btn{
    width: 80px;
    height: 80px;
}

.form-cta-sections.cta-2x .cta-btn i{
    font-size: 40px !important;
}

/*----------------------------------------------------------------------------------------------------------------------
   Hidden/Visible
----------------------------------------------------------------------------------------------------------------------*/

/* pure-hidden-xs */
@media screen and (max-width:567px) {
    .visible-sm{display:none}
    .visible-md{display:none}
    .visible-lg{display:none}
    .visible-xl{display:none}
    .hidden-xs{display:none}
}
/* pure-hidden-sm */
@media screen and (min-width:568px) and (max-width:767px) {
    .visible-xs{display:none}
    .visible-md{display:none}
    .visible-lg{display:none}
    .visible-xl{display:none}
    .hidden-sm{display:none}
}
/* pure-hidden-md */
@media screen and (min-width:768px) and (max-width:1023px) {
    .visible-xs{display:none}
    .visible-sm{display:none}
    .visible-lg{display:none}
    .visible-xl{display:none}
    .hidden-md{display:none}
}
/* pure-hidden-lg */
@media screen and (min-width:1024px) and (max-width:1279px) {
    .visible-xs{display:none}
    .visible-sm{display:none}
    .visible-md{display:none}
    .visible-xl{display:none}
    .hidden-lg{display:none}
}
/* pure-hidden-xl */
@media screen and (min-width:1280px) {
    .visible-xs{display:none}
    .visible-sm{display:none}
    .visible-md{display:none}
    .visible-lg{display:none}
    .hidden-xl{display:none}
}