@import url("/OutSystemsUIWeb/Theme.BaseTheme.css?9111");

/* ===================================================================== */

/*  The following CSS was created using Theme Editor.                    */

/*  To modify this CSS, click "Open Theme Editor".                       */

/* ===================================================================== */



/* ===================================================================== */

/*  Root - CSS Variables                                                 */

/* ===================================================================== */



:root {

    /* Color - Brand */

    --color-primary: #763568;

    --color-secondary: #763568;



    --color-primary-hover: #58284e;

    --color-primary-selected: rgba(118, 53, 104, .12);



    /* Color - Extended */

    --color-red-lightest: #faeaea;

    --color-red-lighter: #e9aaaa;

    --color-red-light: #d96a6a;

    --color-red: #c92a2a;

    --color-red-dark: #ab2424;

    --color-red-darker: #8d1d1d;

    --color-red-darkest: #6f1717;



    --color-pink-lightest: #fbebf0;

    --color-pink-lighter: #efadc4;

    --color-pink-light: #e27098;

    --color-pink: #d6336c;

    --color-pink-dark: #b62b5c;

    --color-pink-darker: #96244c;

    --color-pink-darkest: #761c3b;



    --color-grape-lightest: #f7ecfa;

    --color-grape-lighter: #dfb2e9;

    --color-grape-light: #c678d9;

    --color-grape: #ae3ec9;

    --color-grape-dark: #9435ab;

    --color-grape-darker: #7a2b8d;

    --color-grape-darkest: #60226f;



    --color-violet-lightest: #f1edfd;

    --color-violet-lighter: #c6b6f6;

    --color-violet-light: #9b7fef;

    --color-violet: #7048e8;

    --color-violet-dark: #5f3dc5;

    --color-violet-darker: #4e32a2;

    --color-violet-darkest: #3e2880;



    --color-indigo-lightest: #eceffd;

    --color-indigo-lighter: #b3c1f7;

    --color-indigo-light: #7b92f1;

    --color-indigo: #4263eb;

    --color-indigo-dark: #3854c8;

    --color-indigo-darker: #2e45a5;

    --color-indigo-darkest: #243681;



    --color-blue-lightest: #e8f2fa;

    --color-blue-lighter: #a3c9ea;

    --color-blue-light: #5fa1db;

    --color-blue: #1a79cb;

    --color-blue-dark: #1667ad;

    --color-blue-darker: #12558e;

    --color-blue-darkest: #0e4370;



    --color-cyan-lightest: #e7f2f4;

    --color-cyan-lighter: #9eccd3;

    --color-cyan-light: #56a6b2;

    --color-cyan: #0d8091;

    --color-cyan-dark: #0b6d7b;

    --color-cyan-darker: #095a66;

    --color-cyan-darkest: #074650;



    --color-teal-lightest: #e6f2ef;

    --color-teal-lighter: #9cccbd;

    --color-teal-light: #52a58c;

    --color-teal: #087f5b;

    --color-teal-dark: #076c4d;

    --color-teal-darker: #065940;

    --color-teal-darkest: #044632;



    --color-green-lightest: #ebf7ed;

    --color-green-lighter: #afe0b8;

    --color-green-light: #73c982;

    --color-green: #37b24d;

    --color-green-dark: #2f9741;

    --color-green-darker: #267d36;

    --color-green-darkest: #1e622a;



    --color-lime-lightest: #f1f8e8;

    --color-lime-lighter: #c7e3a2;

    --color-lime-light: #9ecd5c;

    --color-lime: #74b816;

    --color-lime-dark: #639c13;

    --color-lime-darker: #51810f;

    --color-lime-darkest: #40650c;



    --color-orange-lightest: #fef0e6;

    --color-orange-lighter: #fcc29c;

    --color-orange-light: #f99551;

    --color-orange: #f76707;

    --color-orange-dark: #d25806;

    --color-orange-darker: #ad4805;

    --color-orange-darkest: #883904;



    --color-yellow-lightest: #fef5e5;

    --color-yellow-lighter: #fbd999;

    --color-yellow-light: #f8bc4c;

    --color-yellow: #f59f00;

    --color-yellow-dark: #d08700;

    --color-yellow-darker: #ac6f00;

    --color-yellow-darkest: #875700;



    /* Color - Neutral */

    --color-neutral-0: #ffffff;

    --color-neutral-1: #f8f9fa;

    --color-neutral-2: #f1f3f5;

    --color-neutral-3: #e9ecef;

    --color-neutral-4: #dee2e6;

    --color-neutral-5: #ced4da;

    --color-neutral-6: #adb5bd;

    --color-neutral-7: #868e96;

    --color-neutral-8: #5c656d;

    --color-neutral-9: #343a40;

    --color-neutral-10: #15181a;



    /* Color - Semantic */

    --color-error-light: #fceaea;

    --color-error: #e03131;



    --color-warning-light: #fdf6e5;

    --color-warning: #e9a100;



    --color-success-light: #eaf3eb;

    --color-success: #2a843c;



    --color-info-light: #e5f5fc;

    --color-info: #009dde;



    /* Elevation / Shadow */

    --shadow-none: none;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .1);

    --shadow-s: 0 2px 4px rgba(0, 0, 0, .1);

    --shadow-m: 0 4px 6px rgba(0, 0, 0, .1);

    --shadow-l: 0 6px 8px rgba(0, 0, 0, .1);

    --shadow-xl: 0 8px 10px rgba(0, 0, 0, .1);



    /* App Settings */

    --side-menu-size: 300px;

}



.btn,

.Button {

    color: var(--color-primary);

}



.tag,

.badge,

.btn.Is_Default, 

.Button.Is_Default {

    color: #fff;

}

:root{
    --header-size: 70px;
    --color-primary: #E41E2B;
    --color-secondary: #E41E2B;
    
    --color-progress-completed: #A7D883;
    
}


.input:focus, .textarea:focus, .select:focus {
    border:1px solid #CED4DA;
}



/* ================= coke custom fonts for custom icons ================== */

@font-face {
  font-family: 'coke';
  src:  url('/CSO_CommonTemplate/coke.eot');
  src:  url('/CSO_CommonTemplate/coke.eot') format('embedded-opentype'),
    url('/CSO_CommonTemplate/coke.ttf') format('truetype'),
    url('/CSO_CommonTemplate/coke.woff') format('woff'),
    url('/CSO_CommonTemplate/coke.svg') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'coke' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-available-amt:after {
  content: "\e903";
}
.icon-invoice-amt:after {
  content: "\e904";
}
.icon-payment-amt:after {
  content: "\e905";
}
.icon-completed:before {
  content: "\e906";
  font-weight: bold;
}
.icon-delivered:before {
  content: "\e907";
  font-weight: bold;
}
.icon-released:before {
  content: "\e908";
  font-weight: bold;
}
.icon-submitted:before {
  content: "\e909";
  font-weight: bold;
}
.icon-transit:before {
  content: "\e90a";
  font-weight: bold;
}
.icon-payment-mnu-icon:before {
  content: "\e90b";
  color: #a50404;
}
.icon-orderhistory-mnu-icon:before {
  content: "\e900";
  color: #a50404;
}
.icon-pallet-mnu-icon:before {
  content: "\e901";
  color: #a50404;
}
.icon-home-mnu-icon:before {
  content: "\e902";
  color: #a50404;
}

.icon-gear-mnu-icon:before {
  content: "\e90f";
  color:#A50404;
}

/* ============================ end ====================================== */


.layout .main {
    padding-top: 100px;
}

.layout-top .header .ThemeGrid_Container {
   /*background-color: #E41E2B;*/
}

header.header{
    /*background-color: #E41E2B !important;*/
    background: url('/CSO_Resources_LIB/img/headerbk3.jpg?9118') center center !important;
    background-size: cover !important;
}

.Menu_TopMenu > div a, .Menu_TopMenu > div a:visited {
    color: var(--color-neutral-0);
}

.header .Menu_TopMenu:hover a{
     color: #E41E2B !important;
}

.header .Menu_TopMenu:hover{
    border-bottom: 1px solid #fff;
}

.header .Menu_TopMenu.Menu_TopMenuActive {
    border-bottom: 0;
    /*background-color: #B91515;*/
}

.Menu_TopMenu.Menu_TopMenuActive {
    background: #fff;
    border-bottom: 4px solid #E41E2B !important;
    box-sizing: content-box;
}



.Menu_DropDownPanel {
    background-color: #000;
}

.Menu_DropDownPanel a, .Menu_DropDownPanel a:link, .Menu_DropDownPanel a:visited {
    color:#fff;
}

.Menu_DropDownArrow{
    display: none;
}

.header .Menu_DropDownPanel {
    background-color:#E41E2B;
    border-radius: 0;
    border: 0;
}

.Menu_DropDownPanel a{
    border-bottom: 1px dotted #ff6c6c !important;
}

.Menu_DropDownPanel a:hover{
    background-color: #000;
}


.custom-theme-container{
    max-width: 1700px !important;
    margin: 0 auto;
    padding-left: 5%;
    padding-right: 5%;
}

.negative-margin-top{
    margin-top: -210px;
    
    box-shadow: 0 0 50px rgba(0,0,0,8%);
}

.main-hdr{
    background: url('/CSO_Resources_LIB/img/headerbk3.jpg?9118') center center !important;
    background-size: cover !important;
}

.MaintenanceDiv .header .Menu_DropDownButton {
    height: 91%;
}

/*.custom-container div{
    flex: 1;
}*/

.display-flex{
    flex-shrink:0;
}

.ui-design-time{
    
}


.tablet .layout-top .is--visible .Menu_TopMenus, .phone .layout-top .is--visible .Menu_TopMenus{
    justify-content: flex-start !important;
}


/* customized buttons */


.primary-action-btn, .secondary-action-btn .disabled-action-btn{
    font-size: 14px !important;
    font-weight: bold;  
}





.primary-action-btn{
    background: linear-gradient(#E41E2B, #af000c);
    border-color: #af000c;
    border-radius: 20px;
    box-shadow: 0 0 8px rgba(0,0,0,30%);
    height: 40px;
    line-height: 40px;
    padding: 0px 20px;
    width: auto;
    
    color: #fff !important;
}

.secondary-action-btn{
    /*background: linear-gradient(#fff, #EDEDED);*/
    background-color:#fff;
    /*border-color: #bcbcbc;*/
    border-color: #E41E2B;
    border-radius: 20px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 0 8px rgba(198,13,25,20%);
    height: 40px;
    line-height: 40px;
    padding: 0px 20px;
    width: auto;
    
    /*color: #868686 !important;*/
    color:#E41E2B !important;
}

.disabled-action-btn{
    background: linear-gradient(#4a46462e, #4a46462e);
    border-color: #33333380;
    border-radius: 20px;
    box-shadow: 0 0 8px rgb(0 0 0 / 5%);
    height: 40px;
    line-height: 40px;
    padding: 0px 20px;
    width: auto;
    color: #33333380 !important;
}



.my-status-button
{
    border-radius: 20px;
    box-shadow: 0 0 8px rgba(0,0,0,30%);
    height: 20px !important;
    line-height: 20px !important;
    padding: 0px 20px;
    width: auto;
    border-color: #af000c;
}

body:not(.desktop) .mobile-display-none{
    display:none !important;
}


a[disabled="disabled"] .primary-action-btn{
    background:linear-gradient(#fff, #ccc);
    color:rgba(0,0,0,30%) !important;
}

a[disabled="disabled"] .secondary-action-btn{
    color:rgba(0,0,0,30%) !important;
    border-color:#ccc;
}


/* end here */

@media screen and (max-width: 480px){
    .parent-flex{
        display: block !important;
    }
}

/* ============================ Table ====================================== */

.TableRecords .TableRecords_Header, .EditableTable thead th {
    background-color: #333;
    color: #fff;
}
/* ============================ Table ====================================== */

/* ============================ Others ====================================== */

.hidden {
    display: none;
}
/* ============================ Others ====================================== */

body:not(.desktop) .my-table-border {
    padding: 5px !important;
}

body:not(.desktop) .panel-content {
    padding:0px;
    margin:5px;
}

body:not(.desktop) .desktop-text-center {
    text-align:left !important;
}

body:not(.desktop) .button-center {
    text-align:center !important;
}

body:not(.desktop) .my-submenu-title {
    width:50% !important;
    margin:0px !important;
}

body:not(.desktop) .my-submenu-arrowdown {
    width:25% !important;
    text-align:right !important;
    margin:0px !important;
}


/* ============================ Responsive  ====================================== */
html > body.phone{
    min-width: 100%;
}
.tablet.portrait .ThemeGrid_Width4,
.tablet.portrait .ThemeGrid_Width3,
.tablet.portrait .tablet-portrait-full-width,
.phone .tablet-portrait-full-width{
    width: 100%;
}
.tablet.portrait .tablet-portrait-full-width,
.phone .tablet-portrait-full-width {
    margin-left: 0px !important;
}
.tablet.portrait .tablet-portrait-full-width  input.Button,
.phone .tablet-portrait-full-width  input.Button,
.phone .mobile-full-width{
  width: 100%;
  margin: 10px 0px 0px  !important;
}


/* Pagination */
.tablet.portrait .responsive-pagination > div,
.phone .responsive-pagination > div{
    width: 100% !important;
    text-align: center;
}

.tablet.portrait .responsive-pagination .ListNavigation_Wrapper,
.phone .responsive-pagination .ListNavigation_Wrapper{
    align-items: center;
    justify-content: center;
}
/* Popup */
.tablet.portrait .os-internal-ui-dialog.os-internal-ui-widget.os-internal-ui-widget-content.os-internal-ui-corner-all.os-internal-Popup.os-internal-ui-draggable,
.phone .os-internal-ui-dialog.os-internal-ui-widget.os-internal-ui-widget-content.os-internal-ui-corner-all.os-internal-Popup.os-internal-ui-draggable{
    width: 90% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
}

/* Actual Sales Legend */
.phone .actual-sales-legend{
    width:100%;
    text-align:center;
}
.phone .actual-sales-legend > div:first-child{
    width: 100%;
}
/* Table for moble and table*/
.phone .TableRecords tbody tr > td > div:first-child,
.tablet.portrait .TableRecords tbody tr > td > div:first-child{
    flex: 1;
}

.tablet.portrait .tablet-no-padding,
.phone .tablet-no-padding{
    padding-left : 0px !important;
    padding-right : 0px !important;

}

.phone .TableRecords tbody tr > td > div:last-child, .tablet.portrait .TableRecords tbody tr > td > div:last-child {
    flex: 1;
    min-width: 40%;
}

.phone .TableRecords_Label,
.tablet.portrait .TableRecords_Label{
    font-weight: bold;
}

.phone .TableRecords input[type="text"], 
.phone .TableRecords input[type="number"], 
.phone .TableRecords select {
    width: 100%;
    max-width: 150px;
}

.tablet.portrait .expandable-row .TableRecords tbody tr td:not(:first-child), .phone .expandable-row .TableRecords tbody tr td:not(:first-child){
    display:flex;
    
}
.tablet.portrait .expandable-row .TableRecords tbody tr td:nth-child(2), .phone .expandable-row .TableRecords tbody tr td:nth-child(2){
    padding:16px 24px 0px 24px;
}

.tablet.portrait .table-records-responsive.expandable-row .TableRecords:not(.Empty):not(.mobile-checkbox)  tbody tr td:first-child, 
.phone .table-records-responsive.expandable-row .TableRecords:not(.Empty):not(.mobile-checkbox) tbody tr td:first-child,
.tablet.portrait .expandable-row .TableRecords.Empty tbody tr td:first-child:after, 
.phone .expandable-row .TableRecords.Empty tbody tr td:first-child:after,
.tablet.portrait .table-records-responsive.expandable-row .TableRecords.mobile-checkbox tbody tr td:first-child:after,
.phone .table-records-responsive.expandable-row .TableRecords.mobile-checkbox tbody tr td:first-child:after{
    display:none
    
}

.tablet.portrait .TableRecords.mobile-checkbox:not(.no-responsive) tbody tr td:first-child, 
.phone .TableRecords.mobile-checkbox:not(.no-responsive) tbody tr  td:first-child{
    border:none;
    text-align:right
    
}

.tablet.portrait .expandable-row .TableRecords tbody tr td .TableRecords_Label, .phone .expandable-row .TableRecords tbody tr td .TableRecords_Label {
    display:none;
}

.tablet.portrait .expandable-row .TableRecords:not(.Empty) tbody tr td .TableRecords_Label:first-child , 
.phone .expandable-row .TableRecords:not(.Empty) tbody tr td .TableRecords_Label:first-child {
    display:block;
}
/* Form Filter */
.Form label {
    color: initial;
}
div.columns.no-bottom-gutter > .columns-item,
.phone div.columns.no-bottom-gutter.gutter-l.phone-break-all:only-child > .columns-item:not(:last-child),
.tablet div.columns.no-bottom-gutter.gutter-l.tablet-break-all:only-child > .columns-item:not(:last-child){
    margin-bottom: 0;
}

.desktop .three-columns-big-middle .columns-item:nth-child(2) {
    flex: 2;
}
.tablet .three-columns-big-middle .columns-item:nth-child(2) {
    flex-basis: 100%;
}
.phone .mobile-no-margin{
    margin: 0px !important;
}

.filter-form{
    background-color: #efefef;
    border-radius: 8px;
    padding: 20px 20px 30px 20px;
}

.filter-form .columns-item {
    margin-top: 10px;
}