﻿@import url("/VopakTheme/Theme.VopakTheme.css?11044");

/************* CP_THM *************/
.HalfRowVerticalPadding .TableRecords_OddLine, .HalfRowVerticalPadding .TableRecords_EvenLine {
    padding: 5px 10px;
}
.AccordionVertical_item.open > .AccordionVertical__content {
    background-color: #f9f9f9;
    border-radius: 0 0 4px 4px;
}
.padding10 {
    padding: 10px;
}
.Padding20{
    padding: 20px;
}
.Padding30{
    padding: 30px;
}
.Padding5{
    padding: 5px;
}

.padding-left20{
    padding-left: 20px;
}
.padding-left10{
    padding-left: 10px;
}
.padding-left5{
    padding-left: 5px;
}

.PaddingBottom10{
padding-bottom: 10px;
}

.PaddingTopBottom5{
    padding: 5px 0;
}
.Padding-right10{
    padding-right: 10px;
}
.Margin-10{
    margin: -10px;
}
.MarginBottom5{
    margin-bottom: 5px;
}
.MarginBottom10 {
    margin-bottom: 10px;
}

.MarginBottom15 {
    margin-bottom: 15px;
}

.MarginBottom20 {
    margin-bottom: 20px;
}

.MarginRight5{
    margin-right: 5px;
}
.MarginRight10{
    margin-right: 10px;
}
.MarginRight20{
    margin-right: 20px;
}
.NotBold{
  font-weight: normal !important;
}

.PullUp5 {
    margin-top: -5px;
}

.PullUp15 {
    margin-top: -15px;
}

.PullUp40 {
    margin-top: -40px;
}

.Height30 {
    height: 30px;
}

.MinWidth650{
    min-width: 650px;
}
.MinWidth800{
    min-width: 800px;
}

.LightGray {
    background-color: rgba(0, 0, 0, 0.1);
}

.VersionBlock.OSInline{
    vertical-align: text-bottom;
}

.ResizeNone {
    resize: none;
}

.VerticalAlignBottom {
    vertical-align: bottom !important;   
}

.VerticalAlignMiddle {
    vertical-align: middle !important;   
}

.FloatRight {
    float: right;
}

.VerticalAlignTop {
    vertical-align: top !important;   
}

.TabsWidgetFormMargins {
    margin-left: 20px;
    margin-top: 5px;
}

.ReloadNotificationButton {
    margin: 5px 5px 0px 5px !important;
}


.vopak-valve:before {
    content: "\e605";
}
.vopak-ship:before {
    content: "\e600";
}
.vopak-tank:before {
    content: "\e601";
}
.vopak-train:before {
    content: "\e602";
}
.vopak-truck:before {
    content: "\e603";
}
.vopak-transfer:before {
    content: "\e604";
}

/******************************************LAYOUT_CP****************************************************/

.Alerts {
    background-color: #FFFFFF;
}

.MenuCorePlus .Alerts {
    /*height: 100%;*/
    position: fixed;
    top: 105px;
    bottom: 0;
    right: 0;
    z-index: 0;
    width: 300px;
    -webkit-transform: translateZ(0); /* Fix position:fixed; on chrome */
    -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,.3);
       -moz-box-shadow: 0 0 4px 0 rgba(0,0,0,.3);
            box-shadow: 0 0 4px 0 rgba(0,0,0,.3);

    
    
    
}

.MenuCorePlus .Content.ThemeGrid_Wrapper.NoRight {
    right: 0px !important;
    left: 0px !important;
    top: 105px !important;
    
    
    
}

.MenuCorePlus .Content.ThemeGrid_Wrapper {
    right: 300px !important;
    left: 0px !important;
    top: 105px !important;
    
    
    
}

.MenuCorePlus .MenuCP{
    width: 100%;
    top:  60px;
    height: 45px;
    position: fixed;
    z-index: 5;
    
}

/******************************************MENU*********************************************************/

Header_Menu,
.Application_Menu {
    background-color: #446E9B;
}

/* Application_Menu **************************/
.MenuCorePlus .Application_Menu a,
.MenuCorePlus .Application_Menu a:link,
.MenuCorePlus .Application_Menu a:visited {
    border-color: rgba(0, 0, 0, .15);
}

/* .Menu_TopMenu **************************/

.MenuCorePlus .Menu_TopMenu a:link,
.MenuCorePlus .Menu_TopMenu a:visited,
.MenuCorePlus .Menu_TopMenu a {
    padding: 2px 10px !important;
}

.MenuCorePlus .Menu_TopMenu a:link.LinkStyle,
.MenuCorePlus .Menu_TopMenu a:visited.LinkStyle,
.MenuCorePlus .Menu_TopMenu a.LinkStyle {
    display: table-cell;
    padding: 11px !important; 
    vertical-align: middle;
}

.MenuCorePlus .Menu_TopMenuActive a:link,
.MenuCorePlus .Menu_TopMenuActive a:visited,
.MenuCorePlus a.Menu_SubMenuItemActive:link,
.MenuCorePlus a.Menu_SubMenuItemActive:visited,
.MenuCorePlus a.Menu_SubMenuItem:hover {
    color: white;
}

.LinkStyle{
    display: table-cell;
    padding: 11px !important; 
    vertical-align: middle;
}

/* .Menu_DropDownPanel */
.MenuCorePlus .Menu_DropDownPanel {
    background-color: #446E9B !important;
    position: absolute !important;
}

.MenuCorePlus .Menu_DropDownPanel a,
.MenuCorePlus .Menu_DropDownPanel a:link,
.MenuCorePlus .Menu_DropDownPanel a:visited {
    display: block;
    height: auto;
}

/* Menu_SubMenuItem */
.MenuCorePlus .Menu_DropDownPanel a.Menu_SubMenuItem,
.MenuCorePlus .Menu_DropDownPanel a.Menu_SubMenuItem:link,
.MenuCorePlus .Menu_DropDownPanel a.Menu_SubMenuItem:visited {
    display: block;
    padding: 3px 30px;
}

.MenuCorePlus .Menu_DropDownButton {
    display: inline-block !important;
}

.MenuCorePlus .marginright15{
    margin-right: 15px;
}

.MenuCorePlus .Menu_DropDownPanel a, 
.MenuCorePlus .Menu_DropDownPanel a:link,
.MenuCorePlus .Menu_DropDownPanel a:visited {
    display: none;   
}

.MenuCorePlus .Menu_TopMenu a span.fa {
    margin-right: 0px;
    width: initial;
}

/******************************************RESPONSIVE TABLES*********************************************************/
.tablet .TableColumnMinWidth {
    min-width: 200px;   
}

.TableOverflow {
    overflow: auto;   
}

/***************************** Feedback Message on top of popup overlay *****************/
.Page div.Feedback_Message_Wrapper{
    z-index: 4013;

}
/* Prevents the Feedback Message to be displayed inside a pop-up 
(Apply FeedbackMessageHidden class to a container wrapping the pop-up layout)*/
.FeedbackMessageHidden .Feedback_Message_Wrapper {
    display: none;
}

/***************************** Terminal UoM *****************/
.DefaultUoMLink {
    padding: 1px 5px 1px 5px;
    color: #446E9B;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border: 2px solid #446E9B;
    background-color: rgba(68, 110, 155, 0.25);
}

.EmptyDefaultUoMLink {
    padding: 1px 5px 1px 5px;
    color: gray;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border: 2px solid gray;
}

/************** Text overflow hidden with ellipsis ***************************/
.TextOverflowEllipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/************** Tables ***************************/
.TableRecords_HeaderDarker {
    background-color: #e6eaeb;
    font-weight: normal;
}

.DivWithBorder {
    border: 1px solid #dedede;
    border-radius: 4px;    
}

.DivWithBorder .TableRecords {
    border: 0;
}

/************** Dashboards ***************************/
.Dashboard_BottomContainer {
    overflow:auto;
    max-height: 350px;
    margin-bottom: 10px;
}

.Dashboard .SortColumns_Sortable {
    font-weight: bold;
    cursor: pointer;
}

.Dashboard_LeftContainer {
    max-height: 260px;
    overflow-y: auto;
}

.PanelDraftsContainer >.Panel >.Panel_content{
    padding: 0px 10px 0px 10px;
}

.Dashboard .Panel_header {
    padding-left: 0px;
}

.Dashboard .Panel_content {
    padding-top: 0px;
}

.DashboardColumn .Columns2 > .Column {
    width: 50%;
    padding: 0 3px;
}

.DashboardColumn .Columns2 > .Column.ColFirst {
    padding-left: 0;
}

.DashboardColumn .Columns2 > .Column.ColLast {
    padding-right: 0;
}

.DashboardPage .MainContent {
    padding-bottom: 0px;   
    overflow-y: auto;
}

.DashboardPage .Columns.MarginBottom {
    margin-bottom: 6px;
}

.DashboardPage .Content.ThemeGrid_Wrapper {
    top: 60px;
    padding-top: 13px;
}

/********************* Image Upload CSS **************************/

.UploadPicture {
    position: absolute;
    z-index: 1000;
}

.PictureWrapper {
    line-height:150px;
    font-size:100px;
    
}

.UploadPicturePic{
    position: absolute;
    top: 40%;
    left: 40%;
    opacity: 0.4;
    display: none;
}

.UploadOpacity{
    opacity: 0.5;
}

.UploadWrapper{
    position:relative; 
    vertical-align: middle;
    width: 100%;
    top: 50px;
}


/***************************  Alerts *********************************/
.Alerts {
    overflow-y: auto;   
    background: #fffff;
}
/***********************************************************************/

/**** AMA Theme CSS ****/

/** Generic classes **/

.WordBreak{
    word-break: break-all;
}

.opac030{
    opacity: 0.30;
}

.opac1{
    opacity: 1;
}

.AgreementHeaderShadow{
     box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
     border-radius: 5px;
}
.AgreementHeaderShadow .SectionExpandable {
    border: none;
}

.MyServicesExpandable_Header {
    padding: 15px;
    background-color: #446E9B;
    color: white;
    font-size: 16px;
}

.MyServicesExpandable_Header > .TableVerticalAlign {
    width: 100%;
}

.MyServicesExpandable_Header > .TableVerticalAlign .Cell1 {
    width: 100px;
    padding: 6px;
}
.MyServicesExpandable_Header > .TableVerticalAlign .Cell2 {
    width: auto;
}

.ButtonGroupInDarkBackground .ButtonGroup_button.Button.active {
    color: #4f7aa3!important;
    background-color: #e4e4e4;
    border-color: #ccc;
}

.RegularTextDropDown .select2-choice {
    color: #666 !important;
    font-weight: 400 !important;
}

/******************* BEGIN: HIDE ASTERISKS IN MANDATORY FIELDS *******************/
.MyServicesExpandable_Header .ValidationMessage {
    bottom: 22px;
    position: relative;
    right: 25px;
    text-align: right;
    visibility: hidden;
}
/******************* END:  HIDE ASTERISKS IN MANDATORY FIELDS *******************/

/* To fix the agreement header */
.HeaderFixed .MyServicesExpandable_Header {
    position: fixed;
    
    top: 225px;
    z-index: 10;
    left: 20px;
    right: 320px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}

.NoPricing > .MyServicesExpandable_Header{
    top: 185px;
}

/******************* BEGIN: AGREEMENT CONTAINER *******************/
.SalesAgreementContainer .Actions {
    width: auto;
    min-width: 30%;
}

.SalesAgreementContainer .Content {
    overflow: hidden !important;
}

.SalesAgreementContainer .TitleActions {
    position: fixed;
    
    top: 105px;
    left: 0px;
    right: 302px;
    overflow: hidden;
    background-color: #E4F2FF;
    padding-top: 20px;
    padding-bottom: 10px;
    z-index:2;
}

.SalesAgreementContainer .TitleActions .Title.Heading1{
    margin-bottom: 0px;
    border: none;
}
/******************* END:   AGREEMENT CONTAINER *******************/


/* Container where the user see the warning "Update or Discard changes to this agreement" */
.UpdateDiscardChanges{
    font-size: 16px;
}

/*To remove footer from agreement details*/
.Footer{
    height: 0px;
    padding: 0px;
}

.AgreementHeaderContent {
    margin-top: 200px;
    padding: 10px 20px;  
}

.AgreementHeaderContent.NoPricing  {
    margin-top: 160px;
}

.AgreementHeaderContent.OnlyPricing {
    margin-top: 0px;
}

.AgreementHeaderActions {
    padding: 10px;
    background-color: #fafafa;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}

.AgreementHeaderContentSubSections {
    padding: 30px;
}

.AgreementHeaderContentSubSections .Box {
    padding: 0px;   
}


.AgreementHeaderContent .Form:not(.form-top) label {
    padding-top: 0px;
}

.GreenIcon {
    color: #1ebc1e;   
}

.RedIcon {
    color: red;   
}

.GreenIcon a {
    color: #1ebc1e;   
}

.RedIcon a {
    color: red;   
}
.AgreementDetailsSection .Separator{
    margin: 5px 0 10px 0;
}
.AgreementDetailsSection .Card .Card_Text, 
.AgreementDetailsSection .Card_Title.Heading3 {
    margin-bottom: 0px;
}
.Page div.Feedback_Message_Wrapper {
    margin-top: 107px;
}

.DisplayNone {
    display: none;   
}

.MarginBottom20 {
    margin-bottom: 20px;
}

.MarginLeft5 {
    margin-left: 5px;
 }

.MarginLeft10 {
    margin-left: 10px;
 }

.MarginTop5 {
    margin-top: 5px;
}

.MarginTop10 {
    margin-top: 10px;
}

.MarginTop20 {
    margin-top: 20px;
}

.NoMarginTop{
    margin-top: 0px;
}

.NoMarginRight{
    margin-right: 0!important;
}

.AgreementDetailsSection .SectionExpandable.expanded .SectionExpandable_content {
    display: block;
    height: auto;
    overflow: visible;
    padding: 0px;
    visibility: visible;
}

.NoMarginLeft, a.NoMarginLeft{
    margin-left:0;
}

/************ MultiSelect Customization ***************/
/* Added in context of US STRY0053128 because the CSS that used the texts and checkbox inside of multi-select were not aligned */
.ms-choice {
    border-bottom: 2px solid #ccc;
    border-left: 1px solid #ccc;
    border-radius: 4px;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, .05);
    color: #48687c;
    height: 35px;
    line-height: 30px;
    color: #666;
    font-weight: 600;
    line-height: 35px;
    font-size: 14px;

}

.ms-drop ul > li {
    margin-bottom: 5px;
}

.LazzyContent {
    overflow: visible !important;
}

.ms-choice > div.open {
    background: url(/FancyMultipleSelect/img/multipleselect.png?105870&4191) right top no-repeat;
}

.ms-choice > div {
    margin-top: 2px;
    zoom: 1.2;
    background: url(/FancyMultipleSelect/img/multipleselect.png?105870&4191) left top no-repeat;
}

/* Removed in context of US STRY0053128 because the CSS that used the texts and checkbox inside of multi-select were not aligned */
/* .ms-choice{
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    height: 32px;
    padding: 4px 8px;
    line-height: 1.43;
    color: rgb(102, 102, 102);
    box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, .05);
    -webkit-box-sizing: border-box;
    display: inline-block;
    background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==);
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 0;
    text-indent: .01px;
    text-overflow: "";
}

.ms-choice > div, .ms-choice > div.open{
    background-image: none;
}

.ms-choice:hover{
    background-color: #FFF !important;
}

.ms-drop ul > li:hover{
    color: #fff;
    background-color: #1E90FF !important;
} */

/* Separator for the multiselect */
/* .ms-drop li:first-child {
    border-bottom: 1px dotted gray;
    padding-bottom: 5px;
    margin-bottom: 5px;
} */
/************ MultiSelect Customization ***************/

.HeaderTitle {
    color: white !important;
    text-decoration: underline;
}

.AgreementDetailsTopActions {
    vertical-align: middle;
}

.AgreementDetailsTopActions .DeleteAgreement {
    margin-right: 5px !important;
}

.AgreementDetailsTopActions .PrintAgreement {
    margin-left: 10px !important;
}

.AgreementDetailsTopActions .StatusLabel {
    margin-left: 10px;
}

.AgreementId {
    font-size: 14px;
}

.TableMaxSize {
    max-height: 400px;
    overflow-y: auto;
}

.TableMaxSize300 {
    max-height: 279px;
    overflow-y: auto;
    margin-top: -10px;
}

.HeadingPopup{
    font-size: 22px;
    font-weight: bold;
    
}

.ctnInfoAdicionalServicesPopUp a, .ctnInfoAdicionalServicesPopUp a:hover,.ctnInfoAdicionalServicesPopUp a:link,.ctnInfoAdicionalServicesPopUp a:visited,.ctnInfoAdicionalServicesPopUp a span, .ctnInfoAdicionalServicesPopUp a:link span , .ctnInfoAdicionalServicesPopUp a:visited span, .ctnInfoAdicionalServicesPopUp a:hover span{
    color:black;
    text-decoration: none;
}

/* Matrix */
.MatrixTable {
    max-height: 441px;
    overflow-y: auto;
    position: relative;
}

.MatrixTable table {
    margin-top: 10px;
}

.MatrixTable .Calendar-topCont {
    top: 311px !important;
}

/* Agreement Sections */
.ctnContainerEntitiesList {
    max-height: 410px;
    overflow-y: auto;
    position: relative;
}

.ExpandedView .ctnContainerEntitiesList{
    max-height: 574px;
}

.AgreementEntitiesTableHeader {
    background-color: #e4f2ff; 
    text-transform: uppercase;
    padding: 8px 20px;
    border-bottom: solid 1px #ddd;
    color: #666;
}
.AgreementEntitiesTableHeaderCheckbox{
    margin: -3px 0;
}
.ctnContent{
    border-bottom: 1px solid #ddd;
    min-height: 40px;
    box-sizing: content-box;
    padding-left: 20px;
}

.ctnContent_VisibleDetails{
    min-height: 38px;
    padding-top: 8px;
}

.ctnContent_SelectedDetails{
    min-height: 40px;
    padding-top: 4px;
}

.ListRecordsDetails.ListRecords{
    display: inline-block;
}

/** AgreementPricing_PopUp CSS **/
.PricingLrContainer{
    height:420px;
    overflow-y: auto;
}

.minHeight28 {
    min-height: 28px;
}


/* Audit Trail */
.SearchReset {
    color: gray;
    background-color: rgba(255,255,255, 0.1);
    width: 10px;
    position: relative;
    left: -25px;
    top: 1px;
}

.AuditContentPopup {
    overflow: auto;
    max-height: 500px;
    padding: 0 10px;
}

.container1 .Card {
    border-radius: 0px;
}

/************************ TERMINAL DROPDOWN *********************/
.TerminalDropdown.select2-container .select2-choice  {
    border: 0;
    background-color: transparent;
    color: #3a6583;
    font-size: 15px;
    font-weight: 600;
    line-height: 24px;
    box-shadow: 0px 0px 0px 0 rgba(0, 0, 0, .05);
}   
/****************************************************************/

/* HomePage */

.PaddMargin{
        margin-top: 10px;
    padding-bottom: 10px;
}

.DivWithBorder .TableRecords {
    border: 10px !important;
}

.Header_user .Header__activity .TerminalDropdown {
    vertical-align: baseline;
}

.ButtonGroup_button:hover:not(.disabled) * {
    color: #ffffff !important;
}

.ButtonGroup_button.Button.disabled:not(.active), .ButtonGroup_button.Button.disabled:hover:not(.active) {
    background-color: #ccc !important;
    color: #999 !important;
}

.ButtonGroup_button.Button.active.disabled {
    background-color: rgb(114, 132, 148) !important;
}

.ButtonGroup_button.Button.active {
    background: #4f7aa3;
    box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, .1);
    border-color: #4f7aa3;
}

.ButtonGroup_button.Button:hover{
    border-color: #4f7aa3;
}

.ButtonGroup_button.active {
    color: white !important;
}

.ButtonGroup_button.Button.active span {
    color: white;
}

.DashboardPage .Title.Heading1 {
    margin-bottom: 10px;
}

/** Add padding to bottom dashboard **/
.HomePageAllAgreements {
    padding-bottom: 6px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}

.LineHeight15 {
    line-height: 15px !important;
    padding-top: 6px;
}

.DashboardColumn .Panel_header {
    padding-bottom: 0px;
}

.DashboardColumn .Panel_content {
    padding: 0px 10px 10px 10px;
}

.noPadding{
    padding: 0px;
}
/** Customize searched tags **/

.NotDefinedSection {
    background-color: #e6eaeb;
    padding: 50px;
    border-radius: 0 0 4px 4px;
}
/** Customize Homepage **/

.HomePageAdvanceSearch .SectionExpandable__icon .fa {
    border: 0px !important;
}
.HomePageAdvanceSearch .SectionExpandable_header,
.HomePageAdvanceSearch .SectionExpandable.expanded .SectionExpandable_header {
    border-bottom: none;
    padding: 0 5px 1px 10px;
}
.HomePageAdvanceSearch .expanded .SectionExpandable__icon .fa {
    background-color: transparent !important;
    border: 0px solid transparent !important;
    border-radius: 22px !important;
    color: #48687c !important;
    height: 22px !important;
    line-height: 1.3 !important;
    margin-right: 3px !important;
    width: 22px !important;
}

.HomePageAdvanceSearch.PanelContainer  .SectionExpandable__title {
    border-right: 0px;
    border-top: 0px;
}

.HomePageAdvanceSearch.PanelContainer .SectionExpandable {
    background-color: transparent;
    border: 0px;
    border-radius: 0;
    box-shadow: none;
}

.DashboardColumn {
    padding-bottom: 0px;   
    overflow: hidden;
}

/* Tank Occupancy Screen */
.Occupied{
    border-left: solid 5px #cc3300;
}
.FutureOccupied{
    border-left: solid 5px #ffcc00;
}
.Available{
    border-left: solid 5px #59b300;
}
.Occupied, .Available, .FutureOccupied{
    padding-left: 15px!important;
}

/* User Management */
.SelectedTerminals{
    border-radius: 17px;
    padding: 3px 6px 5px 12px;
    color: #666;
    font-size: 12px;
    text-transform: uppercase;
    background-color: #e6eaeb;
}
.PaddingBottom3{
    padding-bottom: 3px;
}

/** Class to identify default UoM. Different color is applied  **/
.DefaultUoM.SelectedTerminals {
    background-color: #e4f2ff;
}

.SelectedCustomers{
    background-color: #CDD0D1;
    border: solid 2px #939799;
    padding: 5px;
}

.ActiveRedirect {
    color: green; 
    font-weight: bold;
}

.TeamMembers {
    background: #e4e4e4; 
    padding: 20px; 
    margin-top: 10px;
}

/*********************** Multiple File Uploader *******************************/
.qq-upload-button {
    margin-top: 40px;
    margin-bottom: 0px !important;
}

.FileDropper {
    border: 1px dashed gray;
    min-height: 72px;
}
.FileDropper .qq-upload-button {
    margin-top: 60px;
}
.FileDropper .qq-upload-drop-area {
    margin-top: -15px;
}

.TerminalHeaderReadOnly {
    color: darkgray !important;
}

.DisplayInherit {
    display:inherit;
}

/************ Contacts Gallery ************/
.ContactsGallery .Text_DefaultWidth{
    width: 200px;
}

.ContactsGallery .InputWithIcons .InputIcon{
    color: #446E9B;
}
.ContactsGallery input[disabled='disabled'], 
.ContactsGallery input[readonly='readonly'], 
.ContactsGallery select[disabled='disabled']{
    color: #777;
    background-color: #f0f0f0;
}

/********** Cogwheel menu **********/
.DropdownCogwheel .IconDropdown.open .Button {
    color: white;
}

.DropdownCogwheel .DropdownMenu .PH > a {
    color: #4f7aa3;
}

/******************* BEGIN: BASE STYLES *******************/
@font-face {
    font-family: 'vopak-font';
    src:url('vopak-font.eot?q22tl');
    src:url('vopak-font.eot?q22tl#iefix') format('embedded-opentype'),
        url('vopak-font.ttf?q22tl') format('truetype'),
        url('vopak-font.woff?q22tl') format('woff'),
        url('vopak-font.svg?q22tl#vopak-font') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="vopak-"], [class*=" vopak-"] {
    font-family: 'vopak-font';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

input[type=checkbox]{
    margin-right: 0px;
}

/* To fix to the checkbox in disable */
input[type="checkbox"]:disabled:checked:after {
    border-color: black;
}
/******************* END:   BASE STYLES *******************/



/******************* BEGIN: MEETINGS (IHM & ORM) STYLES *******************/
.MeetingsInvitationTitle {
    background-color: #A1A1A1;
    padding: 8px;
}

.MeetingsSummary {
    background-color: #FFFFFF;
    max-height: 80px;
    overflow-y: hidden;
    padding: 10px;
}
/******************* END:   MEETINGS (IHM & ORM) STYLES *******************/



/******************* BEGIN: MEETINGS OWNER (IHM & ORM) STYLES *******************/
.UserIcon_Unselected{
    color: #d3d3d3;
}

.TableRecords > tbody > tr > td a.UserIcon_Unselected{
    color: #d3d3d3;
}

.ContactsGallery a.UserIcon_Unselected{
    color: #d3d3d3;
}

/******************* END:   MEETINGS OWNER (IHM & ORM) STYLES *******************/



/******************* BEGIN: POPUP WITH MENU (ADDITIONAL SERVICES AND PRODUCT PROPOSAL) STYLES *******************/
.PopupWithMenu_MainContainer {
    position: relative;
    overflow: hidden;
}

.PopupWithMenu_Menu {
    max-height: 425px;
    overflow-y: auto;
    position: absolute;
    top: 148px;
    left: 0px;
}

.PopupWithMenu_MenuRow {
    background-color: white;
    border: solid #e4dfdf;
    border-width: 1px 0px 1px 1px;
    padding: 20px;
}

.PopupWithMenu_MenuRowSelected {
    background-color: #4f7aa3;
    color: white;
    font-weight: bold;
}

.PopupWithMenu_Content {
  border: 1px solid #4f7aa3;
  padding: 17px;
}
/******************* END:   POPUP WITH MENU (ADDITIONAL SERVICES AND PRODUCT PROPOSAL) STYLES *******************/

/* Combo Box Category */
.ComboCategory option[value="__ossli_-1"], .ComboCategory option[value="-1"] {
    background-color: #E4E4E4;
    color: black;
    font-size: 15px;
    font-weight: bold;
}

/* Styles for unsortable columns */
.UnsortableColumn {
    font-weight: normal;
}

/* Pricing Styling Classes */
.SectionExpandable .TableRecords thead tr th,
.SectionExpandable .TableRecords thead tr th:first-child,
.SectionExpandable .TableRecords thead tr th:last-child{
    border: none;
    border-bottom: 1px solid #ddd;
    background-color: #e6eaeb;
    font-weight: normal;
    border-radius: 0px;
}
.SectionExpandable .TableRecords {
    border: 1px solid #dedede;
    border-radius: 4px;
}
.indexation_table.PricingTable .TableRecords_Header div{
    vertical-align: middle!important;
}
.PricingTable .TableRecords_OddLine,
.PricingTable .TableRecords_EvenLine{
    border-bottom: 1px solid #ddd;
}
.PricingTable .PricingTableContent{
    padding: 0 0 5px 20px;
    margin-top: 5px;
    border-bottom: solid 1px #ddd;
    min-height: 35px;
}
.PricingTable .PricingTableContent .OSInline{
    vertical-align: middle;
}
.SectionExpandable .PricingTable .TableRecords thead tr th:first-child,
.desktop .PricingTable .TableRecords_OddLine:first-child,
.desktop .PricingTable .TableRecords_EvenLine:first-child {
    padding-left: 15px;
}
.SectionExpandable .PricingTable .TableRecords thead tr th:last-child,
.desktop .PricingTable .TableRecords_OddLine:last-child,
.desktop .PricingTable .TableRecords_EvenLine:last-child {
    padding-right: 15px;
}

/* To delete as soon as the regular sized tag is no longer used*/
.CurrentItemTag{    background-color: #e4f2ff; }
.InBundleTag{   background-color: #e6eaeb; }
.InBundleTag, .CurrentItemTag{
    color: #4f7aa3;
    width: 100%;
    text-align: center;
    font-size: 12px;
    border-radius: 15px;
    white-space: nowrap;
    padding: 3px 10px 5px 10px;
}
/**************************************************************/

.CurrentItemSmallTag{    background-color: #e4f2ff; }
.InBundleSmallTag{   background-color: #e6eaeb; }
.InBundleSmallTag, .CurrentItemSmallTag{
    color: #4f7aa3;
    width: 26px;
    text-align: center;
    font-size: 12px;
    border-radius: 15px;
    white-space: nowrap;
    padding: 3px 10px 5px 10px;
}

.ItemTagCombinedPONotApplied{
    background-color: #7f8c8d;
    color: #f3f6f8;
    width: 16px;   
    height: 16px;     
    border-radius: 50%;    
    font-size: 8px;
    white-space: nowrap;
    padding: 0; 
    display: inline-flex; 
    align-items: center;  
    justify-content: center;
    margin-left: 5px;
}

.ItemTagCombinedPOApplied{
    background-color: #27ae60;
    color: #f3f6f8;
    width: 16px;   
    height: 16px;     
    border-radius: 50%;    
    font-size: 8px;
    white-space: nowrap;
    padding: 0; 
    display: inline-flex; 
    align-items: center;  
    justify-content: center;
    margin-left: 5px;
}



.TableVerticalAlign .Cell1, .TableVerticalAlign .Cell2{
    padding: 0;
}


.Form input.ReadOnly, .Form textarea.ReadOnly, .Form select.ReadOnly {
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   box-sizing: border-box;
   font-size: 14px;
   vertical-align: middle;
   color: #666;
   border-color: #bf1601;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   background-color: #fff;
   -webkit-box-shadow: inset 0 2px 3px 0 rgba(0,0,0,.06);
   -moz-box-shadow: inset 0 2px 3px 0 rgba(0,0,0,.06);
   box-shadow: inset 0 2px 3px 0 rgba(0,0,0,.06);
}

/* Invalid style for divs*/
div.Not_Valid {
    border: 1px solid #bf1601;
    padding: 0 1px;
}

/* Style for partially selected checkboxes */
input[type="checkbox"].CheckBoxSpecialState:after{
   content: "-";
    padding-left: 2px;
    font-size: 33px;
    opacity: 1;
    transform: none;
    border: none;
    line-height: 7px;
    color: gray;
}

/* INDEXATION POPUPS - table styles for indexation functionality */
.indexation_table .table-header{
    padding: 10px 0 10px 10px;
    font-size: 12px;
    color: #666;
    border-bottom: 1px solid #ddd;
    background-color: #e6eaeb;
    text-transform: uppercase;

}
.indexation_table .table-content{
    max-height: 449px;
    padding: 5px 0 0 10px;
    overflow-y: auto;
    min-height: 50px;
}

.indexation_table .table-content-NEW{
    max-height: 510px;
    padding: 5px 0 0 10px;
    overflow-y: auto;
    min-height: 50px;
}

.indexation_table{
    border-radius: 4px;
    border: 1px solid #dedede;
    background-color: white;
}

.button-group-fix{
    max-height: 35px;
}

.button-group-fix .ButtonGroup_button input[type=radio] {
    width: 0px;
    position: relative;
}

.button-decimals .Button{
    min-width: 20px;
    padding: 0 6px;
}

/******************* BEGIN: AGREEMENT TERMINAL CONTAINER *******************/
.AgreementTerminal .SectionExpandable_header, .AgreementTerminal .SectionExpandable.expanded .SectionExpandable_header {
    padding: 0;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: white;
    background-color: #446E9B;
}

.AgreementTerminal .SectionExpandable__title.Heading2 {
     color: white;     
}

.AgreementTerminal .SectionExpandable__icon.Heading2 > .fa {
     color: white;
     margin-right: 10px;
}
/******************* END:   AGREEMENT TERMINAL CONTAINER *******************/

/********* BEGIN: Text sizes *********/

.Text_SmallWidth{
    width: 56px;
}
.Text_MediumWidth{
    width: 105px;
}
.Text_LargeWidth{
    width: 150px;
}
.Text_DefaultWidth{
    width: 170px;
}

/********* END: Text sizes *********/

/********* BEGIN: INVOICE SETTINGS STYLE *********/
.InvoiceSettingsStyling .Columns2 > .Column {
    padding: 0 10px;
}

.InvoiceSettingsStyling .Columns2 > .Column.ColFirst{
    padding-left: 0;
}

.InvoiceSettingsStyling .Columns2 > .Column.ColLast{
    padding-right: 0;
}

/********* END: INVOICE SETTINGS STYLE *********/

/******************* BEGIN: WIZARD STEPS STYLES *******************/
.WizardMainContent {
    position: fixed;
    
    top: 170px;
    left: 18px;
    right: 318px;
    overflow: hidden;
    background-color: #E4F2FF;
    z-index:2;
    height: 60px;
}

.WizardMainContent .WizardStep.ActiveStep {
    background: #446E9B;
    font-weight: 600;
}

.WizardMainContent .WizardStep.ActiveStep:before {
    border-bottom-color: #446E9B;
    border-top-color: #446E9B;
}

.WizardMainContent .WizardStep.Past {
    background: white ;
}

.WizardMainContent .WizardStep.Past a, .WizardStep.Past a:link {
    color: #333 ;
}

.WizardMainContent .WizardStep.Past:before {
    border-bottom-color: white ;
    border-top-color: white ;
}
.WizardMainContent .WizardStepLabel {
    font-size: 16px;
}

.FixViewPricing {
    margin-top: 105px;
}

/******************* END:   WIZARD STEPS STYLES *******************/

/******************* BEGIN: CUSTOMIZED BUTTONS ********************/

.ButtonDoubleWidth {
    min-width: 170px !important;
}

.ButtonSmallWidth {
    min-width: 50px !important;
}

/******************* END: CUSTOMIZED BUTTONS **********************/

/******************* BEGIN: ACCORDION LAZY LOAD *******************/
.AccordionVertical_item_LL.open > .AccordionVertical__header_LL {
    border-top: 2px solid #d7a909;
    padding-top: 10px;
}

.AccordionVertical_item_LL.open > .AccordionVertical__header_LL > .AccordionVertical___icon > .fa {
    background-color: #9ebdd0;
    border: 1px solid #9ebdd0;
    color: #fff;
}

.AccordionVertical_item_LL.open > .AccordionVertical__content_LL {
    background-color: #f9f9f9;
    border-radius: 0 0 4px 4px;
}

.AccordionVertical_item_LL.open .AccordionVertical___icon > .fa {
    color: #333;
    border: none;
    background-color: transparent;
}

.AccordionVertical_item_LL.open .AccordionVertical__header_LL {
    border-top: none;
}


.AccordionVertical_item_LL {
    border-top: 1px solid #ddd;
}

.AccordionVertical_item_LL:first-child {
    border-top: 0;
}

.AccordionVertical_item_LL.open > .AccordionVertical__header_LL {
    font-weight: 600;
}

.AccordionVertical__header_LL:hover {
    cursor: pointer;
}

.AccordionVertical__header_LL {
    display: table;
    padding: 12px 14px;
    width: 100%;
}

.AccordionVertical___title_LL {
    color: #253b4a;
    display: table-cell;
    font-size: 14px;
    line-height: 22px;
    width: 100%;
}

.AccordionVertical___title_LL > div {
    display: inline-block;
    margin-right: 5px;
}


.AccordionVertical_item_LL.open > .AccordionVertical__header_LL >.AccordionVertical___icon > .fa {
    background-color: transparent;
    border: 1px solid #666;
    border-radius: 22px;
    color: #666;
    height: 22px;
    -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
            transform: rotate(-180deg);
    width: 22px;
}

.AccordionVertical__content_LL {
    border-color: #ddd;
    box-sizing: content-box;
    display: block;
    height: 0;
    overflow: hidden;
    padding: 0 17px;
    -webkit-transition: height .5s ease, padding .5s ease;
            transition: height .5s ease, padding .5s ease;
    visibility: visible;

    
}

.AccordionVertical_item_LL.open > .AccordionVertical__content_LL {
    border-top: 1px solid #ddd;
    height: auto;
    padding: 17px;
    visibility: visible;
}

.AccordionVertical_item_LL.autoheight > .AccordionVertical__content_LL {
    height: auto !important;
    overflow: visible;
    padding: 17px;
    -webkit-transition: 0;
            transition: 0;
}

/* Rules when accordion item is envolved by span */

.AccordionVertical span:not(:first-child) .AccordionVertical_item_LL {
    border-top: 1px solid #ddd;
}
/******************* END: ACCORDION LAZY LOAD *******************/

/******************* BEGIN: REPORTING DEPARTMENT *******************/
.ReportingDepartment_MenuRow {
    background-color: white;
    border: solid #e4dfdf;
    border-width: 1px 1px 1px 1px;
    padding: 20px;
}
/******************* END: REPORTING DEPARTMENT *******************/