/**
iServicesApps
Estilos Comuns
 */

/* css to solve summernote problem */
.note-toolbar-wrapper.panel-default{
    height: auto !important;
}


.pickupStatus{
    padding: 2px 10px;
    color: white;
    border-radius: 4px;
    margin: 0 5px;
    display: inline-block;
}

.btn{
    -webkit-transition: background-color 150ms linear;
    -moz-transition: background-color 150ms linear;
    -o-transition: background-color 150ms linear;
    -ms-transition: background-color 150ms linear;
    transition: background-color  150ms linear;
}

.btn.btn-sm{
    border-radius: 5px;
}
a.btn.btn-sm:hover{
    font-weight: normal;
}

.btn-thin{
    font-size: 9pt;
    padding: 0 9px;
    margin-top: 4px;
    margin-right: 0;
    border-radius: 5px;
}

.statistic_box:hover{
    cursor: pointer;
}
.statistic_info h3 {
    margin-top: 0;
}
.statistic_info p {
    font-weight: normal;
}
.statistic_icon{
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}

.smile_radio{
    -webkit-appearance: none;
    font-family: "Font Awesome 5 Free";
    width: auto;
    font-size: 33pt;

}
.smile_radio:focus{
    outline: 0 !important;
}

.smile_radio.sad:before {
    content: "\f119";
}
.smile_radio.meh:before {
    content: "\f11a";
}
.smile_radio.happy:before {
    content: "\f118";
}

.smile_radio.sad:checked {
    color: #f61818;
}
.smile_radio.meh:checked {
    color: #ffe813;
}
.smile_radio.happy:checked {
    color: #17c82c;
}

@media screen and (max-width: 400px) {
    .modal-dialog {
        margin: 0 !important;
        height: 100%;
        min-height: 100% !important;
    }
    .modal-content {
        height: 100% !important;
    }
}

.slide_arrow{
    font-size: 10pt;
    background-color: #ff8926; /*#fb5f2d;*/
    color: #fff;
    text-align: center;
    padding: 10px;
    line-height: 1;
    display: block;
    position: absolute;
    transform: translateY(-50%);
    top:50%;
    z-index: 5;
}

.slide_arrow.full{
    display: flex !important;
    align-items: center;
    /*height: 100%;*/
    height: 98%;
}
/*.prev { left: 20px; }
.next { right: 20px; }*/
.next { right: 0; }
.slick-slide{
    outline: none;
}


.label-info {
    background-color: #ff892691;
}
.label-secondary {
    background-color: #3f4247ab;
}

.favoriteButton{
    width: auto !important;
    border-radius: 20px;
    padding: 2px 10px;
    border: 1px solid #d16306;
}
.favoriteButton.active{
    color: white !important;
    background-color: #d16306;
    border: 1px solid #d16306;
}



.modal-content{
    border-radius: 4px;
}




.message-head {
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
    padding-bottom: 8px;

    color: #7a7a7a;
}
.message-head.no-border{
    border: 0;
    padding-bottom: 0;
}
.message-head .avatar {
    margin-right: 10px;
    margin-left: 5px;
    opacity: 0.5;
    font-size: 17pt; /*20pt;*/
}
.message-head .avatar i{ font-size: unset !important;}

.message-head .user-detail {
    overflow: hidden;
}
.message-head .user-detail h5 {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
}
.message-head .user-detail small{
    font-size: 8pt;
    display: block;
}


.base-box .qa-message-content tr:first-child td{
    border-top: 0;
}
/*.base-box .qa-message-content tr td:first-of-type b {
    font-size: 10pt;
    color: #363636;
    font-weight: 600 !important;
}*/

.label-box{
    padding: 10px;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.05), 0 2px 10px 0 rgba(0,0,0,0.02);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.05), 0 2px 10px 0 rgba(0,0,0,0.02);

    width: 100%;
    border: 1px solid #d3d3d38c;
    background-color: #ffffff80;
    margin: 10px 0;
    display: flex;
    align-items: center;
}

.label-box #labelIcon{
    min-width: 75px;
}
.label-box #labelIcon i{
    font-size: 35pt;
    color: #ddd;
}

.label-box #labelValues{
    width: 100%;
    border-left: 1px solid #ddd;
}
.label-box #labelValues h5{
    margin-top: 0;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

.label-box #labelValues .grid.grid-2{
    grid-template-columns: repeat(auto-fit, 50%);
    border: 0;
    padding: 0;
}
@media screen and (max-width: 1180px) {
    .label-box #labelValues .grid.grid-2{
        grid-template-columns: repeat(auto-fit, 100%);
    }
}

@media screen and (max-width: 1307px) {
    .label-box #labelIcon {
        min-width: 55px;
    }
    .label-box #labelIcon i {
        font-size: 20pt;
    }
}



.labelStoreIdentification{
    width: 50px;
    border-width: 1px;
    border-style: solid;
    border-right-width: 14px !important;
    height: 15px;
    border-radius: 5px;
    display: inline-block;
}



.base-box{
    padding: 10px;
    /*border: 1px solid lightgray;
    border: 1px solid #d3d3d359;*/
    border-radius: 4px;
    background-color: white;
    /*margin-bottom: 10px;
    margin-top: 10px;*/
    margin-bottom: 16px;
    margin-top: 16px;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.05), 0 2px 10px 0 rgba(0,0,0,0.02);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.05), 0 2px 10px 0 rgba(0,0,0,0.02);
}

.base-dropdown{
    padding: 5px;
    background-color: white;
    border-radius: 4px;
    border: 0px;
    width: 150px;
    z-index: 99;
    position: absolute;
    top: 35px;
    box-shadow: #0000001a 0px 4px 7px 0px;
}
/*Fix since .dropdown-backdrop z-index overlays dropdown menu */
.open>.dropdown-menu {
    z-index: 99999;
}

.base-table {
    border-collapse: separate;
    border-spacing: 0 5px;
}

.base-table tbody tr td:first-child { border-top-left-radius: 5px; }
.base-table tbody tr td:last-child { border-top-right-radius: 5px; }
.base-table tbody tr td:first-child { border-bottom-left-radius: 5px; }
.base-table tbody tr td:last-child { border-bottom-right-radius: 5px; }

/*.table>tbody>tr>td{
    border-top: unset;
}*/

.base-table tbody tr td{
    box-shadow: 2px 2px 5px #ededed;
    background-color: white;
    vertical-align: middle !important;
    border-top: 0;
}
.base-table tbody tr td:hover, .base-table tbody tr:hover td{
    background-color: #fcfcfc;
}

.base-table thead th, .base-table-header th{
    border: 0;
    padding-bottom: 0 !important;
    color: darkgrey;
    font-size: 8pt;
    font-weight: 100;
}


/*.base-table tbody tr .base-table-actions .actionButton:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;

    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}*/
.base-table tbody tr .base-table-actions .actionButton:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;

    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.base-table tbody tr .base-table-actions .actionButton:not(:last-child) {
    border-radius: 0;
}


.base-table tbody tr .base-table-actions{
    padding: 0;
   /* height: 43px;*/ /* DEFAULT HEIGHT*/
}
.base-table tbody tr .base-table-actions div{
    float: right;
    margin-right: 5px;
}
.base-table tbody tr .base-table-actions .actionButton{
    height: 100%;
    margin: 0;
    /*display: inline-table;*/
    display: table-cell;

}
.base-table tbody tr .base-table-actions .actionButton:hover{
   font-weight: normal;
   cursor: pointer;
}

.base-table thead tr th, .base-table-header tr th{
    border: 0;
    padding-bottom: 0;
    color: darkgrey;
}
.base-table-header tr th{
    border-bottom: 1px solid #dddddd4f !important;
}

/*.table-hover>tbody>tr {
    transition: transform .5s;
    color: #333333;
}*/
/*.table-hover>tbody>tr:hover {
    background-color: #f5f5f5;
    /* zoom: 1.02; * /
    transform: scale(1.01);
    transition: transform .5s;
}*/
.base-table>tbody>tr td {
    opacity: 0.95;
}
.base-table>tbody>tr:hover td {
    opacity: 1;
}

.page-header {
    margin-bottom: 10px;
    margin: 24px 0 0px;
    border-bottom: 0px;
}
.page-header h1{
    color: #717171;
    font-size: 26px;
}

.page-header h1 i{
   font-size: 26px;color: #717171;
}

.navmenu-fixed-left li{
   padding: 2px;
}

@media screen and (max-width: 1280px) {
    .lg-invisible-element {
        display: none;
    }

}
@media screen and (max-width: 991px) {
   .md-invisible-element {
       display: none;
   }
}

.sm-visible-element {
    display: none;
}
@media screen and (max-width: 600px) {
    .sm-invisible-element {
        display: none;
    }
    .sm-visible-element {
        display: block;
    }

}


.alert-secondary {
   color: #383d41;
   background-color: #e2e3e5;
   border-color: #d6d8db;
}
.alert-danger {
   color: #842c2d;
   background-color: #ea9b91;
   border-color: #d5897f;
}
.alert-success {
   color: #25842c;
   background-color: #b3d283;
   border-color: #9bb86f;
}
.alert-about {
   color: #3a3959;/*#fff;*/
    background-color: #a6a6c5;
    border-color: #7775b8;
}
.alert-warning {
    background-color: #ffd344;
    border-color: #eec53f;
    color: #a04e17;
}
.alert-warning a {
    color: #fff;
}
.alert {
    word-wrap: break-word;
    border-radius: 4px;
    box-shadow: #00000045 0px 1px 2px;
}
.alert a {
    font-weight: 600;
}

.jc-center{
    justify-content: center;
}



.profile-table-head{
    display: table;
    width: 100%;
    table-layout: fixed;
}
.profile-table-body{
    display: block;
    max-height: 255px;
    overflow-y: scroll;
}
.profile-table-tr{
    display: table;
    width: 100%;
    table-layout: fixed;
}


.outline-box{
    border: 1px solid #cccccc;
    border-radius: 5px;
    padding: 10px;
    background: #f0f0f0;
}
.outline-box a{
    margin: 5px;
}

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

.page_navigation_buttons{
    float:left;
    width: 8%;
    height: 43px;
    border: 1px solid rgba(51, 51, 51, 0.22);
    padding: 10px;
}
.save_button_pn{
    float:left;
    border: 1px solid rgba(51, 51, 51, 0.22);
    padding: 10px;
    margin-bottom: 10px;
}

/*.statistic_box{
    border-radius: 5px;
    height: 130px;
    margin-top: 10px;
    margin-bottom: 10px;
}*/
.statistic_box {
    border-radius: 5px;
    border: 0 !important;
    height: 130px;
    /* padding: 5px; */
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: white;
    box-shadow: #00000033 1px 4px 9px 0px;
}
.statistic_icon{
    font-size: 3em;
    color: white;
    width: 30%;
    height: 100%;
    float: left;

    display: flex;
    align-items: center;
    justify-content: center;
}
.statistic_info{
    /*padding: 10px;

    display: contents;*/
    vertical-align: middle;
    text-align: center;
    padding: 15px;
    color: #8f928e !important;
}
.statistic_info .statistic_box_title{
    /*padding: 18px;*/

    /*padding-top: 5px;*/
}
.statistic_value{
    font-weight:400;
    font-size: 60px;
    margin: 0px;
    line-height: 1.1;
    /*padding-top: 8px;*/
    /*-webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #ec9f38;*/
}
.statistic_box:hover{
    /*background: #f2f2f2;*/
    background-color: #fdfdfd;
}

a .statistic_box{
    box-shadow: #00000033 1px 4px 9px 0px;
    transition: box-shadow 0.3s ease-in-out;
}
a .statistic_box:hover {
    box-shadow: #00000014 1px 4px 9px 0px;
    transition: box-shadow 0.3s ease-in-out;
}

/* Statistics box colors */
.statistic_box.purple .statistic_icon{ background-color: #848de2;}
.statistic_box.orange .statistic_icon{ background-color: #da7d10;}
.statistic_box.red .statistic_icon{ background-color: #b73312;}
.statistic_box.blue .statistic_icon{ background-color: #1073da;}
.statistic_box.green .statistic_icon{ background-color: #0a6807;}
.statistic_box.pink .statistic_icon{ background-color: #df75a8;}


.tableError{
    background-color: #d25551;
    color: #ffffff;
    font-weight: bold;
}
.tableError:hover{
    background-color: #b4504c !important;
}

.tableWarning{
    background-color: #edb253;
    color: #ffffff;
    font-weight: bold;
}
.tableWarning:hover{
    background-color: #d09c49 !important;
}

/***
Search
 */
.search_form {
    height: 90%;vertical-align: bottom;display: inline-flex;margin: 3px;
}

.search_form input{
    padding: 10px;
    font-size: 17px;
    border: 1px solid grey;
    float: left;
    width: 80%;
}

.search_form button{
    float: left;
    /*width: 20%;*/
    padding: 10px;
}

/**
Filters
 */

.buttonMargins{
    margin: 3px;
}
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 160px);
}
.filterIcons{
    margin-right: 3px;
}



.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus, .nav-pills>li>.active {
    color: #495057;
    background-color: #f8f8f8 !important;
    border: 1px solid #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    font-weight: normal;
    border-radius: 3px;
}
.nav-pills>li>a:hover{
    font-weight: normal;
}
.tab-content>.active {
    background-color: rgba(45, 45, 124, 0);
    border-radius: 3px;
}
.statisticMenu{
    background-color: #f8f8f8 !important;
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    border-bottom: 0px solid transparent !important;
}

.btn-outline-danger {
    color: #dc3545;
    background-color: transparent;
    background-image: none;
    border-color: #dc3545;
}
.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active, .show>.btn-outline-danger.dropdown-toggle {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.btn-outline-danger.focus, .btn-outline-danger:focus {
    box-shadow: 0 0 0 0.2rem rgba(220,53,69,.5);
}
.btn-outline-danger:hover {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-outline-primary {
    color: #2780e3;
    background-color: transparent;
    background-image: none;
    border-color: #2780e3;
}
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: #2780e3;
    border-color: #2780e3;
}
.btn-outline-primary.focus, .btn-outline-primary:focus {
    box-shadow: rgba(39, 128, 227, 0.46);
}
.btn-outline-primary:hover {
    color: #fff;
    background-color: #2780e3;
    border-color: #2780e3;
}


.btn-outline-yellow {
    color: #f2bf32;
    background-color: transparent;
    background-image: none;
    border-color: #e6b62f;
}
.btn-outline-yellow:not(:disabled):not(.disabled).active, .btn-outline-yellow:not(:disabled):not(.disabled):active, .show>.btn-outline-yellow.dropdown-toggle {
    color: #fff;
    background-color: #f2bf32;
    border-color: #e6b62f;
}
.btn-outline-yellow.focus, .btn-outline-yellow:focus {
    box-shadow: rgba(227, 190, 45, 0.57);
}
.btn-outline-yellow:hover {
    color: #fff;
    background-color: #f2bf32;
    border-color: #e6b62f;
}

.btn-outline-success {
    color: #0dad04;
    background-color: transparent;
    background-image: none;
    border-color: #0dad04;
}
.btn-outline-psuccess:not(:disabled):not(.disabled).active, 
.btn-outline-success:not(:disabled).active, 
.show>.btn-outline-success.dropdown-toggle {
    color: #fff;
    background-color: #0dad04;
    border-color: #0dad04;
}
.btn-outline-success.focus, .btn-outline-success:focus {
    box-shadow: rgba(13, 173, 4, 0.71);
}
.btn-outline-success:hover {
    color: #fff;
    background-color: #0dad04;
    border-color: #0dad04;
}


.btn-outline-warning {
    color: #ff7518;
    background-color: transparent;
    background-image: none;
    border-color: #ff7518;
}
.btn-outline-warning:not(:disabled):not(.disabled).active, .btn-outline-warning:not(:disabled):not(.disabled):active, .show>.btn-outline-warning.dropdown-toggle {
    color: #fff;
    background-color: #ff7518;
    border-color: #ff7518;
}
.btn-outline-warning.focus, .btn-outline-warning:focus {
    box-shadow: 0 0 0 0.2rem rgba(220,53,69,.5);
}
.btn-outline-warning:hover {
    color: #fff;
    background-color: #ff7518;
    border-color: #ff7518;
}


.btn-red{
    background-color: #dd4330;
    border-color: #dd4330;
    color: #ffffff;
}
.btn-red:hover{
    background-color: #bf412e;
    border-color: #bf412e;
}

.btn-yellow{
    background: #ffbb00;
    border-color: #ffbb00;
    color: #ffffff;
}
.btn-yellow:hover{
    background: #efad00;
    border-color: #efaf00;
}

.btn-outline-light, .btn-outline-light.disabled {
    color: #212529;
    background-color: transparent;
    background-image: none;
    border-color: #212529;
    border-color: #2125294A;
}
.btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active, .show>.btn-outline-light.dropdown-toggle {
    color: #fff;
    background-color: #40464c;
    border-color: #212529;
}
.btn-outline-light.focus, .btn-outline-light:focus {
    box-shadow: rgba(33, 37, 41, 0.5);
}
.btn-outline-light:hover, .btn-outline-light:focus {
    color: #fff;
    background-color: #40464c;
    border-color: #212529;
}

.btn-success-light{
    background-color: #aadd9c;
    color: white;
}
.btn-success-light:hover, .btn-success-light:focus{
    background-color: #a2c795;
}


.tooltip {
    display: none;
    position: absolute;
    border: 1px solid #333;
    background-color: #161616;
    border-radius: 5px;
    padding: 10px;
    color: #ffffff;
    font-size: 12px;
    opacity: 1;
    max-width: 300px;
}
.tooltip::after {
    content: "";
    position: absolute;
    border-width: 5px;
    border-style: solid;
    top: 20px;
    right: 100%;
    margin-top: -5px;
    border-color: transparent #161616 transparent transparent;
}


.nav-pills>li>a {
    border-radius: 0;
    height: 100%;
}


.card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}
.card-header:first-child {
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}

.card-header {
    padding: 1.25rem;
    margin-bottom: 0;
    background-color: rgb(232, 232, 232);
    border-bottom: 1px solid rgb(217, 217, 217);
}

/**
Mostrar tabs por cima do summernote
 */

.tab-content>.tab-pane {
    display: none !important;
}
.tab-content>.active {
    display: block !important;
}



.input-group-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}
.input-group-prepend {
    margin-right: -1px;
    display: flex;
}
.input-group-append {
    margin-left: -1px;
}
.input-group {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}


.notice_banner{
    width: 100%;
    max-height: 300px;
    object-fit: cover;
}


/**
 *
 * -- START SWITCH CHECKBOX
 *
 */

/* The switch - the box around the slider */
.checkbox_switch {
    position: relative;
    display: inline-block;
    /*display: block;
    width: 48px;
    height: 21px;*/
    display: flex;
    width: 100%;
}

/* Hide default HTML checkbox */
.checkbox_switch input {display:none;}

/* The slider */
.checkbox_switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 3px;


    width: 48px;
    height: 21px;
}

.checkbox_switch .slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
.checkbox_switch .slider + span{
    margin-left: 56px !important; 
    width: 100%;
}


.checkbox_switch input:checked + .slider {
    background-color: #ffa54d;
}

.checkbox_switch input:checked + .slider:before {
    -webkit-transform: translateX(19px);
    -ms-transform: translateX(19px);
    transform: translateX(19px);
}

/* Rounded sliders */
.checkbox_switch .slider.round {
    border-radius: 34px;
}

.checkbox_switch .slider.round:before {
    border-radius: 50%;
}

/* small version of checkbox */
.checkbox_switch.small .slider{
    width: 35px;
    height: 16px;
}
.checkbox_switch.small .slider:before{
    width: 15px;
    height: 10px;
    left: 4px;
    bottom: 3px;
}
.checkbox_switch.small .slider + span{
    margin-left: 40px !important;
}

.checkbox_switch.small input:checked + .slider:before {
    -webkit-transform: translateX(12px);
    -ms-transform: translateX(12px);
    transform: translateX(12px);
}

/**
 *
 * -- END SWITCH CHECKBOX
 *
 */

.message-item {
    margin-bottom: 25px;
    margin-left: 40px;
    position: relative;
}
.message-item .message-inner {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 10px;
    position: relative;
}
.message-item .message-inner:before {
    border-right: 10px solid #ddd;
    border-style: solid;
    border-width: 10px;
    color: rgba(0,0,0,0);
    content: "";
    display: block;
    height: 0;
    position: absolute;
    left: -20px;
    top: 6px;
    width: 0;
}
.message-item .message-inner:after {
    border-right: 10px solid #fff;
    border-style: solid;
    border-width: 10px;
    color: rgba(0,0,0,0);
    content: "";
    display: block;
    height: 0;
    position: absolute;
    left: -18px;
    top: 6px;
    width: 0;
}
.message-item:before {
    background: #fff;
    border-radius: 2px;
    bottom: -30px;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
    content: "";
    height: 100%;
    left: -30px;
    position: absolute;
    width: 3px;
}
.message-item:after {
    background: #fff;
    border: 2px solid #ccc;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    content: "";
    height: 15px;
    left: -36px;
    position: absolute;
    top: 10px;
    width: 15px;
}
.message-item .message-head {
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
    padding-bottom: 8px;
}
.message-item .message-head .avatar {
    margin-right: 20px;
}
.message-item .message-head .user-detail {
    overflow: hidden;
}
.message-item .message-head .user-detail h5 {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
}

.btn.btn-outline-default.active{
    background-color: #cd6920;
    color: white !important;
}


/* - START RADIO BUTTONS - */
.radio-button:first-child{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.radio-button:last-child{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.radio-button{
    border: 1px solid #ff8926;
    background-color: #ffb460; /*#ff89039c;*/
    color: white;
}
.btn.radio-button.active{
    background-color: #ff8b34 !important;

}
.btn.radio-button:hover{
    background-color: #ffa142 !important;
}
.btn.radio-button.active:hover{
    background-color: #ff8b34 !important;

}
/* - END RADIO BUTTONS - */

/* - START PULSE ANIMATION - */
@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}
/* - END PULSE ANIMATION - */

    
.p-0{ padding: 0 !important; }


.autocomplete-dropdown-container{ position: relative; }
.autocomplete-dropdown{
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
    box-shadow: 0px 2px 4px 0px #0000007a;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    max-height: 200px;
    overflow-y: scroll;
}
.autocomplete-dropdown-element{
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 5px;
    background-color: white;
    /*border: 1px solid lightgray;*/
    box-shadow: 0px 1px 2px 0px rgb(0 0 0 / 2%), 0px 2px 4px 2px rgba(0, 0, 0, 0.15);
}
.autocomplete-dropdown-element>small{ color: #a0a0a1; }
.autocomplete-dropdown-element:last-child{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.autocomplete-dropdown-element:hover{
    cursor: pointer;
    /*background-color: #f7f7f7;*/
    background-color: #F28F3A;
    color: #ffffff;
}
.autocomplete-dropdown-element:hover>small{  color: #ffffff; }


.btn-secondary{
    color: #ffffff;
    background-color: #58595c;
    border-color: #565759;
}
.btn-secondary:hover{
    background-color: #48484b;
    border-color: #48484b;
}

.btn-outline-secondary{
    color: #36373a;
    background-color: #ffffff;
    border-color: #565759;
}
.btn-outline-secondary:hover{
    background-color: #48484b;
    color: #ffffff;
    border-color: #48484b;
}


.error-popup-message{
    position: absolute;
    top: 10px; /*60px;*/
    right: 10px;
    left: 10px;

    background-color: #ba0e0ebd;
    color: white;
    padding: 8px; /*4px 8px;*/
    font-size: 10pt;
    border-radius: 4px;

    display: none;
}



/**
Add stick header to tables
 */
.base-table:not(.table-header-rotated) thead > :last-child th
{
    position: sticky;
    top: 30px; /* This is for all the the "th" elements in the second row, (in this casa is the last child element into the thead) */
    background: rgb(248,248,248);
    background: linear-gradient(180deg, rgba(248,248,248,1) 0%, rgba(248,248,248,1) 90%, rgba(248,248,248,0.5) 100%);
    z-index: 2;
}

.base-table:not(.table-header-rotated) thead > :first-child th
{
    position: sticky;
    top: 0px; /* This is for all the the "th" elements in the first child row */
    background: rgb(248,248,248);
    background: linear-gradient(180deg, rgba(248,248,248,1) 0%, rgba(248,248,248,1) 90%, rgba(248,248,248,0.5) 100%);
    z-index: 2;
}


.form-label, .modal .form-label{
    font-size: 8pt;
    margin: 0px;
    padding: 0px;
    font-weight: normal;/*100;*/
    color: #999999;
}



#replicateCalendarTable{
    border: 1px solid #d3d3d378;
    margin-top: 10px;
}
#replicateCalendarTable thead tr th{
    vertical-align: bottom;
    border-bottom: 2px solid #DDDDDD;
    font-size: 10px;
    padding: 1px;
    text-align: center;
    font-weight: normal;
    color: #9CA4AF;
    background: transparent;
}

.icon-selector{
    font-size: 28pt;
    height: 80px;
    background-color: white;
    border-color: #cccccc;
}


table th.sticky,
table td.sticky{
    position: -webkit-sticky;
    position: sticky;
    width: 250px;
    min-width: 150px;
    max-width: 150px;
    left: 0;

    background-color: #f8f8f8;
    z-index: 1;
    text-align: left;
    overflow: hidden;
}

table td.sticky{
    background-color: white;
    /*border-right: 3px solid #ff8f00;*/
    /*box-shadow: inset -4px 0px #ff8f00;*/
    box-shadow: inset -1px 0px #DDDDdd !important;
    padding-right: 4px;;
}

table th.next-to-sticky,
table td.next-to-sticky{
    width: auto;
    /*min-width: 150px;
    max-width: 150px;*/
    left: 150px;
}


table.grid-table{
    border-collapse: collapse;
    border-spacing: unset;
}
table.grid-table.scroll{
    overflow-x: scroll;
    max-width: 100%;
    display: block;
}
table.grid-table tbody tr td {
    color: gray;
    vertical-align:middle;
    text-align: center;
    font-size: 11pt;

    box-shadow: unset;
    opacity: 1;

    border-radius: 0 !important;
    border: 1px solid #DDDDdd;
}
table.grid-table a:not(.btn) {
    text-decoration: none;
}
table.grid-table td.storeName{
    text-align: left;
    font-weight: 400;
    padding: 5px 10px !important;
    color: white;
    /*border-radius: 0 10px 0 0 !important;*/
    box-shadow: none !important;
}
table.grid-table .storeName a{ color: white; }
table.grid-table tr.storeHeader:hover {
    box-shadow: none !important;
    opacity: 0.8;
}
table.grid-table .worker-avatar{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: #0000007d 0px 0px 3px;
    border: 1px solid white;
    margin-right: 5px;
}




.table-header-rotated {
    border-collapse: collapse;
}
.table-header-rotated td {
    text-align: center;
    padding: 10px 5px;
    border: 1px solid #ccc;
}
.table-header-rotated th.rotate {
    /*height: 140px;*/
    height: 180px;
    white-space: nowrap;
}
.table-header-rotated th.rotate > div {
    -webkit-transform: translate(25px, 51px) rotate(315deg);
    transform: translate(25px, 51px) rotate(315deg);
    width: 30px;
    margin-bottom: 62px;/*55px;*/
}
.table-header-rotated th.rotate > div > span {
    border-bottom: 1px solid #ccc;
    padding: 5px 10px;
}
.table-header-rotated th.row-header {
    padding: 0 10px;
    border-bottom: 1px solid #ccc;
}



/* width */
#cartAvailableProductsDiv ::-webkit-scrollbar,
#cartProductsDiv ::-webkit-scrollbar,
#availableClientBySearchDiv::-webkit-scrollbar,
#missingInventoryRequestsDiv::-webkit-scrollbar {
    width: 7px;
}

#scheduleClassicViewTable::-webkit-scrollbar{
    height: 7px;
}

/* Track */
#cartAvailableProductsDiv ::-webkit-scrollbar-track,
#cartProductsDiv ::-webkit-scrollbar-track,
#availableClientBySearchDiv::-webkit-scrollbar-track,
#missingInventoryRequestsDiv::-webkit-scrollbar-track,

#scheduleClassicViewTable::-webkit-scrollbar-track{
    background: #454a5259;
    border-radius: 2px;
}
/* Handle */
#cartAvailableProductsDiv ::-webkit-scrollbar-thumb,
#cartProductsDiv ::-webkit-scrollbar-thumb,
#availableClientBySearchDiv::-webkit-scrollbar-thumb,
#missingInventoryRequestsDiv::-webkit-scrollbar-thumb,

#scheduleClassicViewTable::-webkit-scrollbar-thumb{
    background: #454a52;
    border-radius: 2px;
    min-height: 50px;
}



#device_codeWrapper{
    position: relative;
    /**/width:250px; height:250px;
    -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;
    background-image: url('/resources/base/device_pattern.jpeg');
    background-size: 250px 250px;
    background-repeat: no-repeat;
}


.products-categories-breadcrumb ul {
    list-style: none;
    display: inline-table;

    padding: 0;
}
.products-categories-breadcrumb ul li {
    display: inline;
}
.products-categories-breadcrumb ul li a{
    display: block;
    float: left;
    background: #53575e;
    text-align: center;
    position: relative;
    margin: 0 5px 0 0;

    text-decoration: none;
    color: #fff;


    padding: 3px 20px 3px 20px;
    font-size: 10pt;

    height: 24px;
}
.products-categories-breadcrumb ul li a:after {
    content: "";
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 15px solid #53575e;
    position: absolute; right: -15px; top: 0;
    z-index: 1;
}
.products-categories-breadcrumb ul li a:before {
    content: "";
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 15px solid #f8f8f8;
    position: absolute; left: 0; top: 0;
}
.products-categories-breadcrumb ul li:first-child a {
    border-top-left-radius: 5px; border-bottom-left-radius: 5px;
}
.products-categories-breadcrumb ul li:first-child a:before {
    display: none;
}
.products-categories-breadcrumb ul li:last-child  a{
    /*padding-right: 80px;*/
    border-top-right-radius: 5px; border-bottom-right-radius: 5px;
}
.products-categories-breadcrumb ul li:last-child a:after {
    display: none;
}

.autocomplete-options-container {
    /*margin: 10px 0;*/
    margin-bottom: 10px;
}
.autocomplete-options .slick-list {
    margin: 0 30px;
}
.autocomplete-options-element {
    text-align: center;
    padding: 5px;
    border: 1px solid lightgray;
    background-color: white;
    word-break: break-word;
    min-height: 55px !important;

    border-radius: 4px;
}
.autocomplete-options-element.dark{
    background-color: #53575E;
    color: white;
}
.autocomplete-options-element.option-element-active {
    border: 2px solid #ff9446;
}
/* Vertical aligning slider elements*/
.autocomplete-options .slick-track {
    display: flex;
}
.autocomplete-options .slick-track .slick-slide {
    display: flex;
    height: auto;
    align-items: center;
    justify-content: center;
}

/* Sale styles */
#cartProductsDiv .cart-buttons{
    padding: 5px;
    background-color: #d0d0d0;
    text-decoration: none !important;
    color: white !important;
    border-radius: 5px;
    display: inline-grid;
    text-align: center;
}
#cartProductsDiv .cart-buttons.bg-warning{ background-color: #ef6f19bf; }
#cartProductsDiv .cart-buttons.bg-danger{ background-color: #e80000ba; }
#cartProductsDiv .cart-buttons.bg-info{ background-color: #7e3f9dbf; }

#sub_pages_menu{
    background-color: #f2f2f2;
    border-color: #e7e7e7;
    margin-bottom: 10px;
    font-size: 12pt;
}
#sub_pages_menu ul{
    margin: auto;
}
#sub_pages_menu li{
    border: 0;
}
#sub_pages_menu li:hover, #sub_pages_menu li a:hover{
    box-shadow: 0 -5px 0 rgb(255, 143, 0) inset;
}
#sub_pages_menu li.active{
    background-color: #f2f2f2;
    box-shadow: 0 -5px 0 rgb(255, 143, 0) inset;
}

.monthSelectorGroup{
    list-style: none;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    vertical-align: middle;
}
.monthSelectorGroup .monthSelectorElement:first-child {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}
.monthSelectorGroup .monthSelectorElement:last-child {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

.monthSelectorElement{
    border: 1px solid #ff8f00;
    padding: 5px;
    margin: 15px 0;
    width: 100%;
    height: 100%;

    text-align: center;
    line-height: 2em;

    border: 1px solid #cfcfcf66;;
    background: #f3f3f3;
    color: #333333;;
}
.monthSelectorElement:hover{
    background: #e8e8e8;
}

.monthSelectorElement.current{
    background: #ff8f00;
    color: white;
}


.m-0{
    margin: 0 !important;
}
.mt-0{
    margin-top: 0;
}
.mb-0{
    margin-bottom: 0;
}


/* Summernote heading option fix when scrolling */
.note-toolbar.panel-heading {
    position: relative !important;
}


/* Checkbox filters */
.classicViewFilters{
    margin: 0 5px;
    margin-bottom: 5px;
}
.classicViewFilters .btn-default{
    width: 100%;
    padding: 5px;
    border-radius: 4px;
    background: transparent;
    color: #da7022;
    overflow: hidden;
}
.classicViewFilters .btn-default.active{
    background: #da7022;
    color: white;
}
.classicViewFilters .btn-default:hover{
    color: white;
}
.classicViewFilters .show-all-filter-button{
    border-width: 0;
    text-decoration: underline;
}
.classicViewFilters .show-all-filter-button:hover{
    text-decoration: unset;
}

.d-block{ display: block; }
.d-flex{ display: flex; }
.d-grid{ display: grid; }
.d-inline-block{ display: inline-block; }

.p-relative{ position: relative; }

.valign-middle{ vertical-align: middle !important;}
.justify-center{ justify-content: center;}
.align-center{ align-items: center;}
.text-center{ text-align: center;}

.tdecoration-none{ text-decoration: none !important;}

.o-hidden{
    overflow: hidden;
}

.label{
    display: inline-block;
}

.popup-error{
    position: absolute;
    top: 0; right: 0; left: 0;
    /*top: 10px;
    right: 10px;
    left: 10px;*/

    background-color: #ed0000a6;
    color: white;
    padding: 8px; /*4px 8px;*/
    font-size: 10pt;
    border-radius: 4px;

    display: none;
}


.info-slide-box{
    padding: 5px;
    border-radius: 25px;
    width: 25px; height: 25px;
    text-decoration: none !important;
    font-size: 10pt;
    overflow: hidden;
    font-weight: bold;
    line-height: 1;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    display: inline-block;
}
.info-slide-box .info-text{ margin: 0 5px; }

.info-slide-box:hover{
    width:auto;
    color: white;
    cursor: pointer;
}

.icon-box-group{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.icon-box-group .icon-box{ width: calc(100% * (1/4) - 10px); }
.icon-box-group .icon-box.filter ~ .icon-box{ width: calc(100% * (1/4) - 10px - (75px/4) ); }

.icon-box-group .icon-box.filter ~ .icon-box:not(.current){ opacity: 0.5; }
.icon-box:hover{ opacity: 1; }

.icon-box{
    display: flex;
    width: 100%;
    background: #ff7518;
    background: linear-gradient(44deg, #ff7518 -20%, #ec9a68 120%);
    color: white;
    text-align: center;
    padding: 13px;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
}
.icon-box i{
    font-size: 30pt;
    margin-right: 15px;
}
.icon-box div{
    font-size: 12pt;
}
.icon-box div span{ font-size: 11pt; }
.icon-box div small{ font-size: 9pt; }

.icon-box:hover, .icon-box:focus{ color: white; cursor: pointer; transform: scale(1.01); }
.icon-box i{
    transition: transform .7s ease-in-out;
}
.icon-box:hover i{
    transform: rotate(360deg);
}

@media (max-width: 1130px) {
    .icon-box-group{
        flex-direction: column;
    }
    .icon-box-group .icon-box, 
    .icon-box-group .icon-box.filter ~ .icon-box{
        width: 100%;
    }
    .icon-box-group .icon-box.filter ~ .icon-box:nth-child(0) {
        width: calc(100% - 75px);
    }

    .icon-box div{
        width: 80%;
    }
}

label.filter-checkbox-button{
    opacity: 0.5;
}
label.filter-checkbox-button:has(input[type=checkbox]:checked),
label.filter-checkbox-button:hover{
    opacity: 1;
}
.filter-checkbox-button input[type="checkbox"]{
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}

.filter-checkbox-button .filter-status{
    padding: 5px;
    display: block;
    background-color: #ececec;
    border-radius: 25px;
    font-weight: normal;
}
.filter-checkbox-button .filter-status:hover{
    opacity: 0.8;
}
.filter-checkbox-button input:checked ~ .filter-status{
    font-weight: bold;
}

.popup-alert{
    position: fixed;
    width: 300px;
    /*top: 70px;*/
    right: 20px;
    bottom: 20px;

    z-index: 9999999999;
}
.popup-alert .alert{
    font-size: 10pt;
    padding: 10px;
    margin-bottom: 10px;
    min-height: 60px;
}
.popup-alert .alert:last-of-type{
    margin-bottom: 0;
}
.popup-alert .alert .close{
    font-size: 12pt;
    color: #0000007d;
}
.popup-alert .alert.animate div{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.faq-alert{
    background-color: #53575c;
    color: white;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    min-height: 80px;
}
.faq-alert a, .faq-alert a:hover{
    color: white;
    font-weight: bold;
}
.faq-alert a:hover{
    opacity: 0.8; cursor: pointer;
}

.faq-alert i:not(.close-button){
    float: left;
    padding: 10px;
    font-size: 46px;
    color: #ffffffa6;
}
.faq-alert i.close-button{
    float: right;
    padding-right: 5px;
    color: #ffffffa6;
    cursor: pointer;
}
.faq-alert.warning {
    background-color: #b16124;
    color: white;
}
.faq-alert.warning a, .faq-alert.warning a:hover{ color: white; }

.faq-alert.secondary {
    background-color: #cecece;
    color: #2f2f2f;
}
.faq-alert.secondary a, .faq-alert.secondary a:hover{ color: #2f2f2f; }

.faq-alert.danger {
    background-color: #b12424;
    color: white;
}
.faq-alert.danger a, .faq-alert.danger a:hover{ color: white; }

.stepwizard-step p {
    margin-top: 10px;
}
.stepwizard-row {
    display: table-row;
}
.stepwizard {
    display: table;
    width: 100%;
    margin: 0;
    position: relative;
}
.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
    top: calc(60px/2);
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;
}
.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}
.btn-circle {
    width: 60px;
    height: 60px;
    text-align: center;
    padding: 6px 0;
    font-size: 20px;
    line-height: 50%;
    border-radius: 50px;
}



#onboarding{ padding: 20px 0; } 
#onboarding h4{ 
    font-weight: bold;
    font-size: 25pt;
    text-shadow: 2px 0px #33333357;
    /* font-style: italic; */
    /* text-transform: uppercase;*/
} 

#onboarding .stepwizard{ margin: 15px 0; }
#onboarding .stepwizard .stepwizard-step .btn-icon {
    font-size: 25pt;
    padding: 20px 25px;
    width: auto;
    height: auto;
    border-radius: 30%;

    background: #ffc08a;
    border-color: #ffc08a;
    color: white;
}
#onboarding .stepwizard .stepwizard-step p {
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Source Sans Pro';
    max-width: 150px;
    justify-content: center;
    margin: auto;
    margin-top: 10px;

    font-size: 10pt;
    opacity: 0.7;
}

/*#onboarding .stepwizard .stepwizard-step.current .btn-icon {
    background: #ff8926;
    border-color: #ff8926;
}
#onboarding .stepwizard .stepwizard-step.current p {
    font-size: 12pt;
}*/


.btn-group.small>.btn{
    padding: 5px 8px;
    font-size: 10pt;
}


.base-modal .modal-header{
    padding: 7.5px;
}
.base-modal .modal-header h4{
    margin-top: 2px;
    margin-left: 5px;
}

/*
* - Tasks modal styles
*/
#tasksActionsModal .form-control,
#updateTaskDataModal .form-control {
    height: 32px;
    padding: 5px 10px;
    font-size: 10.5pt;
    border-color: #dfdfdf;
    border-radius: 2px;
}
#tasksActionsModal textarea.form-control,
#updateTaskDataModal textarea.form-control { height: auto; }

.tasks-modal-card-header label{
    font-size: 10pt;
    padding: 5px;
}
.tasks-modal-card-header label:first-of-type{
    border-top-left-radius: 5px;
}
.tasks-modal-card-header label:last-of-type{
    border-top-right-radius: 5px;
}
.tasks-modal-card-header label i {
    font-size: 8pt;
    opacity: 0.8;
}

.tasks-modal-card-body{
    border: 1px solid #ff8903;
    padding: 10px;
    margin-right: 2px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.tasks-modal-card-body.full{
    border-radius: 5px;
}

.tasks-modal-card-body table .btn-danger{
    background: rgb(255,0,0);
    background: linear-gradient(rgba(255,0,0,1) 0%, rgb(255 97 97) 100%);
    color: white !important;
    text-align: center;
    border-radius: 5px;
    border: 0;
    padding: 2px 6px;
    font-size: 9pt;
}
.tasks-modal-card-body .info-block{
    font-size: 10pt;
    color: gray;
    text-align: center;
    display: block;
}
.tasks-modal-card-body .info-block i{
    opacity: 0.4;
}


#tasksActionsModal .br-widget a,
#updateTaskDataModal .br-widget a {
    height: 30px;
    width: 25px;
}
#tasksActionsModal .br-current-rating,
#updateTaskDataModal .br-current-rating {
    line-height: 2 !important;
    float: right !important;
    padding: 0 0 0 10px !important;
    color: #646464 !important;
    clear: none !important;
    text-align: left !important;
    width: auto !important;
    font-weight: bold !important;
    font-size: 15px;
}
#tasksActionsModal .br-widget a.br-active, #tasksActionsModal .br-widget a.br-selected,
#updateTaskDataModal .br-widget a.br-active, #updateTaskDataModal .br-widget a.br-selected {
    background-color: #ff8926;
}
#tasksActionsModal .br-widget a,
#updateTaskDataModal .br-widget a {
    background-color: #cacaca;
}

.search-reference-div{
    margin-top: 5px;
}
/*.search-reference-div div.d-flex{ align-items: end; }*/
.search-reference-div input, .search-reference-div select{
    /*height: auto;*/
    height: fit-content;
    min-width: 80px;
}
/*.search-reference-div input::before{
    font-family: "Font Awesome 5 Free";
    content: "\f5cf";
    font-weight: 900;
}*/


table tr td:first-of-type b {
    font-size: 10pt;
    margin: 0px;
    padding: 0px;
    /* font-weight: normal; */
    color: #999999;
}

table a:not(.btn), .table a:not(.btn){
    text-decoration: none;
}


/* Top bar menu dropdowns */
.topbar-dropdown-item{
    position: relative !important;
}
.topbar-dropdown-item:hover > .topbar-dropdown {
    display: block;
}

.topbar-dropdown-item .topbar-dropdown{
    display: none;
    position: absolute;
    width: 250px;
    top: 100%;
    left: -50%;
    border: 1px solid #dddddd;
    background-color: #fff;
    z-index: 10;

    font-size: 12pt;
    border-top: 0;

    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: #0000000d 0px 4px 3px 0px;

    overflow: hidden;
    min-height:300px
}

.topbar-dropdown-item .bottom-fix{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}



/* security risks*/
.risk-very-high{ color: #b10202; }
.risk-very-high-bg{ background-color: #b10202 !important; color: white; }

.risk-high{ color: #f19c00; }
.risk-high-bg{ background-color: #f19c00 !important; color: black; }

.risk-medium{ color: #f1d204; }
.risk-medium-bg{ background-color: #f1d204 !important; color: black; }

.risk-low{ color: #5ed261; }
.risk-low-bg{ background-color: #5ed261 !important; color: black; }

.risk-very-low{ color: #c1e2e4; }
.risk-very-low-bg{ background-color: #c1e2e4 !important; color: black; }



/* boostrap select with search styles */
.bootstrap-select .dropdown-menu{
    max-width: 100%;
}
.dropdown-menu>li:nth-child(2n+3)>a {
    background-color: #f9f9f9;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus{
    color: #0d0d0d !important;
    background-color: #e8e8e8 !important;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus{
    color: #ffffff !important;
    background-color: #f78425 !important;
}
.bootstrap-select .dropdown-menu li a span.text{
    text-wrap: pretty;
}
.bootstrap-select .dropdown-menu{
    box-shadow: 0px 3px 20px 100vw rgb(0 0 0 / 18%);
}

.bootstrap-select>.dropdown-toggle.btn-default, 
.bootstrap-select>.dropdown-toggle.btn-default:hover, 
.bootstrap-select>.dropdown-toggle.btn-default:focus{
    color: #333333 !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #cccccc !important;
    outline: 0 !important;
}


/*Appliance api status error alert styles */
.appliance-api-error-alert{
    -webkit-animation: pulse 1.5s infinite;
    -moz-animation: pulse 1.5s infinite;
    -ms-animation: pulse 1.5s infinite;
    -o-animation: pulse 1.5s infinite;
    animation: pulse 1.5s infinite;

    padding: 10px 15px;
    transform: scale(1) !important;
}
.appliance-api-error-alert a{
    color: #780404cc;
    text-decoration: underline;
    cursor: pointer;
}


.language-selector-partial{
    gap: 10px;
    color: #5d5d5d;
}
.language-selector-partial.top{
    padding-bottom: 10px;
    margin-bottom: 5px;
    border-bottom: 1px solid #00000003;
}
.language-selector-partial.bottom{
    padding-top: 10px;
    margin-top: 5px;
    border-top: 1px solid #00000003;
}


.centered-modal.modal.in{
    display: flex !important
}




/* ###### modal styles #####*/
.base-modal .modal-header{
    padding: 15px 0;
    margin: 0 15px;

    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
.base-modal .modal-title{
    font-size: 20px;
    font-weight: normal;
    color: #333333;
    width: 100%;
}
.base-modal .modal-title i{
    font-size: 20px;
    color: #cecece;
    margin-right: 8px;
}
.base-modal .modal-content{
    border-radius: 6px;
}


.illustration {
    margin: auto;
    display: block;
    max-width: 300px;
}

/* ------------ Elements Cards styles - START ------------
 *  list vs grid style card
 * -------------------------------------------------------
 */
.element-cards{
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
}
.element-cards .card{
    /*width: calc(100%/4.2);*/
    width: calc(100% / 3.1);

    text-decoration: none;
    cursor: pointer;
    outline: 0;

    border-radius: 8px;
    /*width: 100%;*/
    overflow: hidden;
    border: 0;

    display: inline-block;
}

.element-cards .card:hover{
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
}
.element-cards .card a:hover{
    cursor: pointer;
}
.element-cards .card a > img{
    height: 180px;
    width: 100%;
    object-fit: cover;
}

.element-cards .label {
    position: absolute;
    top: 15px;
    left: 0;
    border-radius: 0px 4px 4px 0px;
    background-color: #3d4043;
    padding: 2px 8px;
    color: #FFF;
    font-family: "Source Sans Pro";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.element-cards .label:hover{
    filter: brightness(0.8);
}
.element-cards .card .card-body .name{ 
    font-size: 13pt;
} 
.element-cards .card .card-body .date{ 
    font-size: 8pt;
} 
.element-cards .card .card-body{
    padding: 8px;
}
.element-cards .extra-list-infos{
    display: none;

    overflow: hidden;
    color: #333;

    text-overflow: ellipsis;
    font-family: "Source Sans Pro";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    margin-bottom: 16px;
}
.element-cards .card .user-infos{
    display: flex;
    align-items: center;
    padding: 0.75px;

    gap: 6px;
    color: #999;
    font-family: "Source Sans Pro";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.element-cards .card .user-infos>img{
    height: 24px;
}
.element-cards .card .user-infos span:not(:first-of-type),
.element-cards .card .user-infos > a{ 
    width: fit-content;
    display: flex;
    gap: 4px;
    align-items: center;
}
.element-cards .card .user-infos span:first-of-type{
    width: 100%;
}

@media (max-width: 992px) {
    .element-cards/*:not(.list)*/ .card{ width: calc(100%/3.2); }
}
@media (max-width: 592px) {
    .element-cards/*:not(.list)*/ .card{ width: calc(100%/2.2); }
}
@media (max-width: 452px) {
    .element-cards/*:not(.list)*/ .card{ width: 100%; }
}
@media (max-width: 699px) {
    .element-cards-options {
        display: none;
    }
}
/* List specific styles */
@media (min-width: 700px) {
    .element-cards.list {
        flex-direction: column;
    }
    .element-cards.list .card{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .element-cards.list .card a > img{
        width: 300px;
    }
    .element-cards.list .card .card-body{
        width: 100%;
    }
    .element-cards.list .card .card-body .date{ 
        float:right;
    } 

    .element-cards.list .extra-list-infos{
        display: block;
    }
}


.element-cards .card .card-body .observations{ 
    color: #616163;
    height: 80px;
    overflow-y: scroll;
    font-weight: 400;
}
/* ------------ Elements Cards styles - END --------------
 */



.btn-clear{
    background-color: white;
    color: #434343;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border-radius: 8px;
    padding: 8px 16px;
    display: inline-flex;
    justify-content: center;

}
.btn-clear.active, .btn-clear:hover{
    background: #FF8F00;
    color: white;
    font-weight: 600 !important;
}
.btn-clear>i{
    font-size: 14px;
    margin-right: 8px;
}
/*.btn-clear:not(:disabled):not(.disabled).active, .btn-clear:not(:disabled):not(.disabled):active{
    background-color: white;
    color: #434343;
}*/



/* Box list items styles */
.box-list-item{
    display: flex;
    flex-direction: row;
    padding: 16px 24px;
    /*align-items: flex-start;*/
    align-items: center;
    align-self: stretch;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.05), 0px 2px 10px 0px rgba(0, 0, 0, 0.02);
    gap: 24px;
    margin-bottom: 16px;
    overflow: hidden;
}
.box-list-item > .img-container img{
    /*max-height: 55px;*/
    max-width: 115px;
    object-fit: contain;
}
.box-list-item:not(.add) > .img-container img{
    width: 65px;
    height: 65px;
}
.box-list-item > a{
    margin-left: auto !important;
}
.box-list-item > div:not(.img-container){
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: auto;
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: #333;
    font-size: 18px;
}
.box-list-item > div:not(.img-container) a,
.box-list-item > div:not(.img-container) small,
.box-list-item > div:not(.img-container) span.d-block{
    font-size: 14px;
}
.box-list-item > div:not(.img-container) small.date{
    color: #AAA;
    margin-left: 8px;
}
.box-list-item > div:not(.img-container) .loading-box{
    display: block;
    max-width: 170px;
    height: 12px;
    /* background: linear-gradient(90deg, #ccc 0%, #e1e1e1 50%, #ccc 100%);*/
    background: linear-gradient(90deg, #eee 0%, #ccc 50%, #eee 100%);
    background-size: 200% auto;
    background-position: 0 100%;
    animation: loading-box-animation 3s infinite;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
@keyframes loading-box-animation {
    0%   { background-position: 0 0; }
    100% { background-position: -200% 0; }
}

.box-list-item > div:not(.img-container) .item-state{
    display: inline-flex;
    width: fit-content;
    padding: 4px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 99px;
    background: #B79F18;
    color: #FFF;;
    font-size: 12px;
}
.box-list-item > div:not(.img-container) .item-state.pending{
    background: #B79F18;
}
.box-list-item > div:not(.img-container) .item-state.filled{
    background: #0E92C6;
}
.box-list-item > div:not(.img-container) .item-state.submitted{
    background: #45B718;
}
.box-list-item > div:not(.img-container) .item-state.cancelled{
    background: #9C3E3A;
}

.box-list-item.add > .img-container{
    padding: 24px;
    padding-right: 32px;
    border-radius: 0px 99px 99px 0px;
    background: #ff8f00;
    box-shadow: 4px 0px 10px 4px rgba(2, 160, 233, 0.10);
    align-self: stretch;
    display: flex;
    align-items: center;
}
.box-list-item.add.qualirepar > .img-container{
    background: #02A0E9;
}
.box-list-item.add.allianz > .img-container{
    background: #00549D;
}
.box-list-item.add > div:not(.img-container){
    /*margin: 16px 24px;*/
    margin: 16px 0;
}


.box-list-item > div.actions-container{
    margin-left: auto !important;
    flex-direction: row;
}
.box-list-item > .actions-container a.btn{
    font-family: "Source Sans Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    align-items: center;
    cursor: pointer;
    text-wrap: auto;
}
.box-list-item > .actions-container a.btn i{
    margin-right: 8px;
}
.box-list-item.add{
    padding: 0;
    margin-top: 8px;;
}
.box-list-item.add > .actions-container a{
    margin-right: 24px;
}

/*@media screen and (max-width: 991px) {*/
@media screen and (max-width: 750px) {
    .box-list-item.add div:not(.img-container):not(.actions-container){
        display: none;
    }
    .box-list-item > .img-container img{
        max-width: 85px;
    }
    .box-list-item:not(.add) div.img-container{
        display: none;
    }
    .box-list-item:not(.add){
        flex-wrap: wrap;
        gap: 16px;
    }
    .box-list-item:not(.add) > div.actions-container{
        margin-left: 0 !important;
        flex-wrap: wrap;
    }

    .box-list-item > .actions-container a.btn{
        font-size: 12px;
    }
}


/**
 * ###########################################
 *              Sidebar styles
 * ###########################################
 */
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.side-bar-expand{
    background-color: transparent;
    bottom: 0;
    display: flex;
    flex-direction: row;
    position: fixed;
    top: 0;
    right: 0;
    opacity: 0; /* Start transparent */
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    width: 100%;
    z-index: 999999;
    justify-content: flex-end;
    transform: translateX(100%); /* Start off-screen to the right */
    overflow: none;
}
.side-bar-expand.expanded{
    opacity: 1; /* Fade in the container (which will also affect the background if it's on this element) */
    transform: translateX(0); /* Slide in from the right */
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    width: 100%;
}
.side-bar-expand:before{
    animation-duration: 0.3s; /* Match transition duration */
    animation-fill-mode: both;
    animation-name: fadeIn; /* Apply the fade-in animation */
}
.side-bar-expand.expanded:before {
    content: "";
    width: 100%;
    background-color: rgba(0, 0, 0, 0.52);
    animation-duration: 0.3s; /* Match transition duration */
    animation-fill-mode: both;
    animation-name: fadeIn; /* Apply the fade-in animation */
    animation-delay: 0.3s; /* Add a 0.2-second delay */
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; /* Place behind the side menu content */
}
.side-bar {
    background-color: #fff;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .212);
    height: 100vh;
    max-width: 720px;
    overflow: hidden;
    transition: all .3s ease-in-out;
    width: 100%;
    z-index: 1046;
    border-radius: 24px 0 0 24px;
    background: #F8F8F8;
}
.side-bar .side-header {
    align-items: center;
    /*background-color: #ff9015;
    background: #f53d3d;background: linear-gradient(22deg, #f53d3d, #f16027 55%);
    padding: 22px 15px;*/
    color: #fff;
    display: flex;
    justify-content: space-between;
    background: #FF8926;
    padding: 16px 24px;
    padding-top: 24px;
    font-size: 20px;
}
.side-bar .side-header>span{
    display: flex;
    align-items: center;
    vertical-align: middle;
    color: #FFF;
    font-family: "Source Sans Pro";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.side-bar .side-header>.btn-close{
    color: #fff;
}
.side-bar .side-header img{
    align-self: start;
    display: block;
    filter: invert(1);
    height: 35px;
    margin-right: 5px;
    width: 35px;
}
.side-bar .side-body{
    height: calc(100vh - 100px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 24px;
}



.side-bar .base-box .message-head {
    display: flex;
    align-items: center;
}
.side-bar .base-box table:not(.table){
    width: 100%;
}

.side-bar .base-box table tbody th{
    color: #999;
    font-family: "Source Sans Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    min-width: 140px;
}

.side-bar .base-box table tbody tr:not(:last-child) th,
.side-bar .base-box table tbody tr:not(:last-child) td{
    padding-bottom: 8px;
}

/* Translation feature langs dropdown styles */
.translate-lang-dropdown li:nth-child(odd) a{
    background-color: #f6f5f5ff;
}
.translate-lang-dropdown li a:hover{
    cursor: pointer
}
.translate-lang-dropdown li a div.lang-identification{
    position: relative;
    display: inline-block;
}
.translate-lang-dropdown li a div.lang-identification:first-child{
    margin-right: 12.5px;
}
.translate-lang-dropdown li a div.lang-identification:last-child{
    margin-left: 5px;
}
.translate-lang-dropdown li a div.lang-identification>img{
    height: 16px;
}
.translate-lang-dropdown li a div.lang-identification>span{
    font-size: 6px;
    position: absolute;
    top: 0;
    right: -10px;
    border-radius: 2px;
    background-color: #333;
}


.horizontal-timeline {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.horizontal-timeline:before {
    content: "";
    position: absolute;
    width: calc(100% - 10px);
    height: 4px;
    right: 5px;
    left: 5px;
    top: 8px;
    background-color: #DF7800;
}

.horizontal-timeline > span:before {
    content: "";
    display: block;
    position: relative;
    z-index: 2;
    margin-top: -4px;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #DF7800;
    margin: auto;
    margin-bottom: 8px;
}
.horizontal-timeline > span:first-child:before{ /* :not(:only-child) */
    margin-left: 0;
}
.horizontal-timeline > span:last-child:not(:only-child):before{
    margin-right: 0;
}