/* Add here all your CSS customizations */

html                    { height:100%; overflow:hidden; }

/* scrollbar overwrite */
html                    { overflow-y: auto !important; }

body                    { height:100%; overflow:auto; }

.hidden                 { display:none; }

.body_pattern_squares       { background : url(../img/patterns/bright_squares.png) repeat;  }
.body_pattern_jeans         { background : url(../img/patterns/gray_jean.png) repeat;  }
.body_pattern_honey         { background : url(../img/patterns/honey_im_subtle.png) repeat;  }
.body_pattern_maze          { background : url(../img/patterns/pw_maze_white.png) repeat;  }
.body_pattern_variations    { background : url(../img/patterns/random_grey_variations.png) repeat;  }
.body_pattern_grunge        { background : url(../img/patterns/subtle_grunge.png) repeat;  }

.borderRed          { border:solid 1px #eb1414; }
.fontSmall          { font-size: 9pt; color:#38393e; }
.margin0            { margin:0; }
.padding0           { padding:0; }

.pointer            { cursor : pointer; }
.height10           { height: 10px; }  .height20    { height: 20px!important; }  .height30    { height: 30px; }  .height50    { height: 50px; }
.height200          { height: 100px; } .height225   { height: 125px; } .height250   { height: 150px; } .height275   { height: 175px; }
.height200          { height: 200px; } .height225   { height: 225px; } .height250   { height: 250px; } .height275   { height: 475px; }
.height300          { height: 300px; } .height325   { height: 325px; } .height350   { height: 350px; } .height375   { height: 475px; }
.height400          { height: 400px; } .height425   { height: 425px; } .height450   { height: 450px; } .height475   { height: 475px; }
.height500          { height: 500px; } .height525   { height: 525px; } .height550   { height: 550px; } .height575   { height: 475px; }
.height600          { height: 600px; } .height625   { height: 625px; } .height650   { height: 650px; } .height675   { height: 475px; }
.height700          { height: 700px; } .height725   { height: 725px; } .height750   { height: 750px; } .height775   { height: 475px; }
.height800          { height: 800px; } .height825   { height: 825px; } .height850   { height: 850px; } .height875   { height: 475px; }
.height1200         { height: 1200px; } 
.width10            { width: 10px; } .width20   { width: 20px; } .width30   { width: 30px; } .width40   { width: 40px; }
.width50            { width: 50px; } .width60   { width: 60px; } .width70   { width: 70px; } .width80   { width: 80px; }
.width100           { width: 100px; } .width125   { width: 125px; } .width150   { width: 150px; } .width175   { width: 175px; }
.width200           { width: 200px; } .width225   { width: 225px; } .width250   { width: 250px; } .width275   { width: 275px; }
.width300           { width: 300px; } .width325   { width: 325px; } .width350   { width: 350px; } .width375   { width: 375px; }
.width400           { width: 400px; } .width425   { width: 425px; } .width450   { width: 450px; } .width475   { width: 475px; }
.width500           { width: 500px; } .width525   { width: 525px; } .width550   { width: 550px; } .width575   { width: 575px; }
.width600           { width: 600px; } .width625   { width: 625px; } .width650   { width: 650px; } .width675   { width: 675px; }
.width700           { width: 700px; } .width725   { width: 725px; } .width750   { width: 750px; } .width775   { width: 775px; }
.width800           { width: 800px; } .width825   { width: 825px; } .width850   { width: 850px; } .width875   { width: 875px; }
.margin_left15      { margin-left:15px; } .margin_left30      { margin-left:60px; } .margin_left30      { margin-left:60px; }
.pad_top5           { padding-top:5px; }
.pad_top10          { padding-top:10px; } .pad_top15    { padding-top:15px; } .pad_top30    { padding-top:30px; } .pad_top50    { padding-top:50px; }
.pad_left10         { padding-left:10px; } .pad_left15  { padding-left:15px; } .pad_left30   { padding-left:30px; } .pad_left50   { padding-left:50px; } .pad_left100   { padding-left:100px; } .pad_left150   { padding-left:150px; } .pad_left200   { padding-left:200px; } .pad_left250   { padding-left:250px; }
.pad_right10        { padding-right:10px; } .pad_right15    { padding-right:15px; } .pad_right30    { padding-right:30px; }.pad_right100   { padding-right:100px; } .pad_right150   { padding-right:150px; } .pad_right200   { padding-right:200px; } .pad_right250   { padding-right:250px; }
.pad_bottom10       { padding-bottom:10px; } .pad_bottom15    { padding-bottom:15px; } .pad_bottom30    { padding-bottom:30px; } .pad_bottom50    { padding-bottom:50px; }
.pad_zero           { padding:0; }
.margin_zero        { padding:0; }

.byline             { letter-spacing: 0.1em; font-weight: 600; font-size: 1em; color:#4b4841; }/*#6F6F6F*/
.grid_text          { color:#616a6f; letter-spacing: 0.03em; }

/* Trademark Window */
.tm_sub_table           { }
.tm_sub_table th        { padding:1px 4px 1px 10px; border-right:solid 1px #ACA899; font-size:8pt; }
.tm_sub_table td        { padding:1px 4px 1px 10px; border-right:solid 1px #ACA899; border-top:solid 1px #ACA899; font-size:8pt; }
.tm_sub_table_col_id    { width:50px; }

.tm_modal_header        { color:#878892; font-size:8pt; }
.tm_modal_data          { color:#39393d; font-size:8pt; }

.msg_err_container      { padding:3px 10px 0 0; }
.msg_err_text           { padding:2px 10px 0 0; margin:0; height:30px; }
.msg_err_icon           { font-size:13pt; padding:0; margin:0;height:20px; }
.msg_err_icon_container { padding:2px 7px 0 10px; margin:0; height:20px }

/* Searches */
.search_item            { display:inline-block; position:relative; vertical-align:top; }
.search_header          { width:150px; }
.search_operator        { width:100px; }
.search_input           {  }
.search_msg             { color:indianred; width:100%; }
.search_btn             { height:28px; padding:0 3px 0 3px; }
.search_txt             { padding:0 0 0 15px; line-height:0.5em; font-size:7pt; width:500px!important;}
.search_cmb             { height:31px; padding:3px; width:65px; }
.search_cmb option:hover{ background-color:#6D777C; }
.search_context_menu    { padding:0 0 0 15px!important; margin:0!important; font-size:8pt!important; }
.search_row             { padding:7px 0 7px 0!important; margin:0!important; }



/* Tooltip */
.tooltipcontrol {
    position: relative;
    display: inline-block; /*border-bottom: 1px dotted black;*/
}
.tooltipcontrol .tooltiptext { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 5000; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; padding:3px;  }
.tooltipcontrol .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; }
.tooltipcontrol:hover .tooltiptext { visibility: visible; opacity: 1; z-index:8000; }
.tooltipSettings    { width:250px; margin-left:-125px; }




/* Theme Css Overwrite */

.btn-default        { background-color: #f6f6f6; } /*#e1ebee*/

.display_label_header       { width:inherit; border:solid 0px red; display:inline-block; position:relative; width:25%; }
.display_label_control      { width:inherit; border:solid 1px #EDEDED; display:inline-block; position:relative; width:60%; padding:2px 4px 2px 10px; border-radius:5px; }

/* this floats the controls together */
/*.form-control.display_label_control {
    border-color: #EDEDED;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}*/



/** multi select */

.multiselect-container > li > a > label { width:100%; cursor:pointer; color:#555; }
.multiselect-container > li > a:hover > label { color:#555; background-color:#f7f7f7; }
.multiselect-container li.active > a {  }
.multiselect-container li.active > a > label {background-color:#f0f0f0; color:#555; border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7; } /*#c2c2c2*/
.multiselect-container li.active > a:hover {   }
.multiselect-container li.active > a:hover > label { color:#333333; background-color:#eaeaea; }

.radio-custom               { font-size:9pt; color:red;}
.tab-content.tab-shadow     { box-shadow: 8px 8px 13px 0px #d5d6db; }

.tab-content {
    padding: 0px 15px 15px 15px; margin-top:0;
}

button:focus, button:active:focus, button.active:focus {
    outline: none !important;
    outline-style: none !important;
}

.dropdown-menu a:hover { background-color:#d7d7d7; }
.dropdown-menu a:visited { background-color:#ffffff; }

.card-featured-left-red     { border-left: 3px solid red;  color:red; margin:0!important; height:30px; }
/** end Theme Css Overwrite */

/** Mat-Table Overwrite **/
.mat-table {
    border: solid 1px #dee2e6;
    background: #d7d7d7;
    height: 600px;
    overflow-y: auto;
}
.mat-header-cell            { letter-spacing: 0.08em; background-color:#9eb8c3; color:aqua; border-right:solid 1px #dee2e6; }/* background-color:#bcd6e1;  .mat-header-cell{color:rgba(255,255,255,.7)}*/
.mat-cell,.mat-footer-cell  { letter-spacing: 0.02em; }
.mat-cell                   { border-right:solid 1px #dee2e6; }
.mat-elevation-z9           { box-shadow:0 5px 6px -3px rgba(0,0,0,.2),0 9px 12px 1px rgba(0,0,0,.14),0 3px 16px 2px rgba(0,0,0,.12)}

mat-footer-row,mat-header-row,mat-row,td.mat-cell,td.mat-footer-cell,th.mat-header-cell{border-bottom-color:rgba(255,255,255,.12); color:#616a6f;}
.mat-table tbody,.mat-table tfoot,.mat-table thead,.mat-table-sticky,[mat-footer-row],[mat-header-row],[mat-row],mat-footer-row,mat-header-row,mat-row{background:inherit}

.mat-row:nth-child(even)    { background-color: #f9fafb; }
.mat-row:nth-child(odd)     { background-color: #f1f3f5; }
mat-header-row              { position: sticky; top:0; z-index:100; }
mat-footer-row              { position: sticky; top:0; z-index:100; }
.mat-table thead            { }
.mat-table tbody            { border:solid 1px red; }
.mat-header-cell span       { color:#616a6f; font-weight:600; font-size:1.1em; font-family:Roboto,"Helvetica Neue",sans-serif; padding-left:10px; }
.mat-header-cell-first span { padding-left:0px; }
.mat-cell span              { color:#616a6f; font-size:0.95em; padding-left:10px; }
.mat-cell-first span        { padding-left:0px; }
.mat-col-100                { flex: 0 0 100px !important; white-space: unset !important; }
.mat-col-125                { flex: 0 0 125px !important; white-space: unset !important; }
.mat-col-175                { flex: 0 0 175px !important; white-space: unset !important; }
.mat-col-200                { flex: 0 0 200px !important; white-space: unset !important; }
.mat-col-250                { flex: 0 0 250px !important; white-space: unset !important; }

.mat-header-row { position: sticky; top: 0; z-index: 100; background: white; }

/** end Mat-Table Overwrite*/

/* Mat-DatePicker Overwrite */

.mat_date_input             { height:27px; border:solid 1px #d0d4da; border-radius:3px; font-size:9pt; padding:1px 0 1px 8px; margin:0; margin-top:-5px; }

.mat-datepicker-toggle      { margin-right: 5px !important; height:10px; color:red; }


/** end Mat-DatePicker Overwrite*/


/* Mat-Tree Overwrite */


ul,li { list-style-type: none; margin: 0; padding:0;}

ul { padding-left: 1em; }

.mat-tree-node { display: unset; padding:0; margin:0; min-height:30px!important; max-height:30px!important; }

.mat-icon-button { width:  unset; height: unset; line-height: unset; }

::ng-deep .cdk-overlay-container {
    z-index: 6000;
}

/* end Mat-Tree Overwrite */

.contextmenu {
    position: absolute; z-index:99999;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.9);
}

.address-shadow {
    /*box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;*/
    box-shadow: 5px 6px 13px 3px #ACA899; /*##95959b;*/ /*#888888;*/
    border-radius: 13px;
    margin-left: 50px;
    padding: 20px 15px 15px 17px;
}

/*.header { font-size:30pt; }*/
.control-label          { color:#4f4f55; /*padding:0px 1px 1px 7px;*/}
/*.control-label span     { font-size:12pt;  }*/

.text-sm-left           {}


/* custom radios */

/* Customize the label (the container) */
.container { float:left; display:inline; position: relative; padding-left: 20px; margin-bottom: 0px; margin-left:5px; cursor: pointer; font-size: 10pt; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow:visible; }

/* For Horizontal Radio items */
.container.in-line  {   width:initial; }

/* Hide the browser's default radio button */
.container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }

/* Create a custom radio button */
.checkmark { position: absolute; top: 0px; left: 0px; height:12px; width: 12px; border: solid 1px #72736C; border-radius: 50%; background-color: #eee; margin-top:5px; margin-left:3px; }

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {  background-color: #ccc; }

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark { background-color: #2196F3; /* blue */ background-color: #6D777C; /* gray */ top: 0px; left: 0px; }

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after { content: ""; position: absolute;display: none; }

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after { display: block; }

/* Style the indicator (dot/circle) */
.container .checkmark:after { top: 1px; left: 1px; width: 8px; height: 8px; border-radius: 50%; background: white; /*background: #e1e1e1;*/ }

.container .checkbox-text { color:#6D777C; }

/* end of custom radio styles */

/* Grid View Styles */

/* Blue - White */
.blue_white td          { background: #D7E6F4; border-bottom: solid 1px #C5DBF7; color: #333333; padding: 4px 4px 4px 8px; border-left:solid 1px white; border-right:solid 1px white; font-family:Arial; font-size:9pt;}
.blue_white th          { background: #4168BD; color: #FFFFFF; padding: 4px; text-align:center; border:solid 1px white; font-weight:bold;}
.blue_white th a        { color: #FFFFFF;	font: bold 9pt "Segoe UI",Segoe,sans-serif; text-decoration:none;}
.blue_white th a:hover  { color: yellow; text-decoration:none;}
.blue_white tr.header   { background: #C5DBF7;}
.blue_white				{ width: 100%;}
.blue_white tr.blue_white_even td	{ background: #FFFFFF;}
.blue_white_pager tr td	{ border-left:0px; border-top:0px; padding:0 3px 0 3px; border-bottom:solid 1px #6D777C; border-right:solid 1px #6D777C; color:#5C514D; font-weight:bold;}
.blue_white_pager a		{ Color:#72736C; font-weight:normal;} .blue_white_pager a:hover{ Color:#BA0A2C;}

                                                                 
/* Gray - Pink */
.gray_pink td           { background: #FEEFED; color: #333333; font-family:Arial; font-size:9pt; padding: 4px 4px 4px 8px; border-left:solid 1px white; border-right:solid 1px white; border-bottom:solid 1px #D0DECC;}
.gray_pink th           { background: #B0AFAA; color: White; font-family:Arial; font-size:9pt; font-weight:bold; letter-spacing: 0; padding: 4px; text-align: center; border:solid 1px white;}
.gray_pink tr.gray_pink_even td    { background: #EAEBE9;  border:solid 1px white; border-bottom:solid 1px #D0DECC;}/*border-bottom:solid 1px #D0DECC;*/
.gray_pink_pager a		{ Color:#72736C; font-weight:normal;} .gray_pink_pager a:hover{ Color:#F44D3A;}

/* Brown - Cream*/ 
.brown_cream td			{background: #FAFAF5; border-bottom: solid 1px #CBCFB7; border-right:solid 1px #ACA899; border-left:solid 1px #ACA899; color: #333333; font-family:Arial; font-size:9pt; padding: 2px 0 2px 4px;}
.brown_cream th			{background: #ECE9D8; color: Black; font-family:Arial; font-size:9pt; font-weight:bold; letter-spacing: 0; padding: 4px; text-align: center; border:solid 1px #ACA899; height:25px;}
.brown_cream tr.brown_cream_even td { background: #E9E9D5; }
.brown_cream_pager tr td{ border-left:0px; border-top:0px; padding:0 3px 0 3px;}
.brown_cream_pager a	{ Color:#72736C;} .brown_cream_pager a:hover{ Color:#BA0A2C;}

/* Gray - Blue*/
.gray_blue th			{background: #4073A0; color:white; font-family:Arial; font-size:9pt; font-weight:bold; letter-spacing: 0; padding: 4px; text-align: center; border:solid 1px #ACA899; height:25px;}
.gray_blue td			{background: #B3C5D8; border-bottom: solid 1px #A3ACC1; border-right:solid 1px #ACA899; border-left:solid 1px #ACA899; color: #333333; font-family:Arial; font-size:9pt; padding: 2px 0 2px 4px;}
.gray_blue tr.gray_blue_even td { background: #F2F2F0; border-bottom:solid 1px #ACA899;}
       

.modal_success_width    { width:550px; /*position:absolute; top:0; bottom: 0; left: 0; right: 0; margin:0; padding:0; */}
.chk_error              { border: solid 1px red; }

/* Generic layout */
.div_tmid_text                      { padding:22px 0 0 30px; float:left; }
.div_min_absolute                   {   }

/* Accounts - User */
.accountUser50 {
    width: 50%;
}

/* Error Modal */
.modalErrorMsgContent                  { opacity:1!important; width:450px; }

/* Payment Wizard */
.paymentWizardTabContainer          { width:700px; }
.paymentWizardTab                   { Width:500px; }
.paymentWizardRowMargin             { margin:10px 0 0 0; }
.divPurchaseWizardCancelSpacer      { width:50px; float:left; }

/* Watchguard Wizard */
.watchguardWizardTabContainer       { width:700px; }
.watchguardWizardTab                { Width:500px; }

/* Edit User Data */
.modalEditUserDataContainer         { width:700px; }

.colorGray                          { color:#6D777C; }
.colorBlack                         { color:#333333; }

.fontLarge                          { font-size:12pt; }

.pager li.finish > a, .pager li.finish > span {
    display: inline-block;
    padding: 5px 14px;
    background-color: #1b9735;
    border: 1px solid #105508;
    border-radius: 15px;
    color: #ffffff;
}

.pager li.finish a:hover, .pager li.finish span:hover {    
    background-color: #52ac61;   
    color: #ffffff;
}


/* different devices overwrites */
@media screen and (max-width: 1350px) {
    .search_header                  { width:90px; }
    .search_operator                { width:70px; }            
    .search_txt                     { width:350px!important;}
}

@media screen and (max-width: 850px) {
    /* generic layout */
    .div_tmid_text                  { display:none; }
    .div_min_absolute               { position:absolute!important; z-index:999;  }

    /* searches */
    .search_header                  { width:80px; }
    .search_operator                { width:70px; }            
    .search_txt                     { width:270px!important;}
}

@media screen and (max-width: 750px) {   
    /* generic layout */
    .div_tmid_text                  { display:none; }
    .div_min_absolute               { position:absolute!important; z-index:999;  }

    /* searches */
    .search_header                  { width:80px; }
    .search_operator                { width:70px; }            
    .search_txt                     { width:200px!important;}
}

@media screen and (max-width: 550px) {
    .paymentWizardTabContainer      { Width:100%; }
    .divPurchaseWizardCancelSpacer  { width:0px; }
    .modal_success_width            { width:100%; margin:20px; }
    .modalErrorContent              { width:98%; }

    /* generic layout */
    .div_tmid_text                  { display:none; }
    .div_min_absolute               { position:absolute!important; z-index:999;  }

    /* searches */
    .search_header                  { width:80px; }
    .search_operator                { width:70px; }            
    .search_txt                     { width:180px!important;}
}