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

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

Primary color customization
For additional color customizations, you can change the color code for the colors below

  ================================================ */
  
:root {
    --color-primary: rgb(85,195,131); /*primary-color*/
    --color-primary-hover: #26A65B; /*primary-color*/
    --color-secondary: #26A65B; /*primary-color*/
}

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

.layout-top .content .ThemeGrid_Container {
    padding-top: 20px;   
}

.content-middle {
    min-height: 700px;
    margin-top: 30px;
}

/*
.layout .header {
    box-shadow: 0 0 5px 0 rgba(21, 24, 26, .1);
}
*/

.layout .header {
    box-shadow: none;
    background: url('/OCP_Theme/img/common_header_60.png?397') no-repeat center center transparent;
    position: static;
}


.header-title {
    -webkit-box-align: right;
    -ms-flex-align: right;
    align-items: right;
    text-align: right;
    line-height: var(--header-size);
    font-weight: bold;
    font-size: 20px;
    /*color: var(--color-primary);*/
    color: white;
}


.Button,
a.Button {
    border-radius: 20px;
    padding: 0px 20px;
}


.shadow_10 {
    -webkit-box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.2);
    box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.2);
}

.shadow_5 {
    -webkit-box-shadow: 0px 0px 5px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px 0 rgba(0,0,0,0.2);
}

.shadow_3 {
    -webkit-box-shadow: 0px 0px 3px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 3px 0 rgba(0,0,0,0.2);
    box-shadow: 0px 0px 3px 0 rgba(0,0,0,0.2);
}

.text_shadow_grey {
    text-shadow: 1px 2px grey;   
}

.background_gradient_green {
    background: rgb(42,148,97);
    background: linear-gradient(90deg, rgba(42,148,97,1) 0%, rgba(161,214,182,1) 100%);
}

.Button.background_gradient_green {
    background: rgb(89,197,134);
    background: linear-gradient(90deg, rgba(89,197,134,1) 0%, rgba(149,226,177,1) 100%);
    color: white;
    border: none;
}

.background_gradient_green2 {
    background: linear-gradient(90deg, #4ec07e 0%, #97e3b3 100%);
}


.RoundDiv {
    background-color: white;
    border-radius: 10px;
}

.RoundDiv_Title {
    line-height: 40px;
    color: white;
    font-weight: bold;
    padding-left: 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.RoundDiv_Content {
    padding: 15px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.padding_10 {
    padding: 10px;
}

.padding_15_20 {
    padding: 15px 20px;
}

.padding_20 {
    padding: 20px;
}

.desktop .Menu_Separator {
    position: relative;
}

.desktop .tablet .Menu_Separator:after {
    content: '';
    height: 70%; 
    width: 1px;
    position: absolute;
    left: -16px;
    top: 7px;
    background-color: lightgrey; 
}

.MenuBar {
    background-color: white;
    line-height: 45px;
}

.Menu_Link {
    color: lightgrey;
    font-size: 18px;
    font-weight: bold;
}

.Menu_Link.active {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
}

.white_bg {
    background-color: white;
}

.Label {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    padding-left: 20px;
}

.round_20 {
    border-radius: 20px;
}

.login_input {
    border-radius: 15px;
    border: none;
    font-size: 18px;
    margin-top: 5px;
    height: 45px;
}

.login_label {
    color: grey;
    font-size: 20px;
}


.ProductListItem {
    background-color: white;
    padding: 10px 20px;
    margin-bottom: 10px;
    line-height: 20px;
}

.LongText_Ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accordion {
    background-color: transparent;   
}

.accordion-item .accordion-item-header {
    padding: 10px 20px;
    line-height: 20px;
    font-size: inherit;
}

.accordion-item.is--open {
    border-top: inherit;    
}

.accordion-item,
.accordion-item:first-child,
.accordion-item:last-child {
    border-radius: none;
    border: none;
    line-height: 20px;
}

.Modal_600 {
    max-width: 600px;
}

.GreenCircle_big {
    padding: 40px 0px;
    height: 175px;
    width: 175px;
    border-radius: 50%;
    background-color: var(--color-primary);
}

.GreenCircle_small {
    padding-top: 14px;
    height: 65px;
    width: 65px;
    border-radius: 50%;
    background-color: var(--color-primary);
}

.ScrollableContainer {
    overflow-y: hidden;
}

.ScrollableContainer div:hover {
    overfow-y : scroll;
}

.NotificationItemList {
    padding: 5px 0px;
    line-height: 20px;
    border-top: 1px solid #DDD
}

.columns.columns-medium-left > .columns-item:last-child,
.columns.columns-medium-right > .columns-item:first-child {
    -webkit-box-flex: 1.8;
            -ms-flex: 1.8;
                flex: 1.8;
}

.RankingContainer {
    background-color: white;
    height: 190px;
}