/* CSS Document */

.wf-mplus1p { font-family: "M PLUS 1p"; }

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #888!important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #888!important;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #888!important;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #888!important;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #888!important;
}
::placeholder { /* Most modern browsers support this now. */
	color: #999999 !important;
}

input:read-only { background-color: #FFFFFF !important; }
	
/*Header Blue: #002B53*/

:root{
  
  --radius: 4px;
	--main-color: #0BA0A9;
	--main-light: #8DCCC0;
  --second-color: #327A81;
  --third-color: #53C0D5;
	--fourth-color: #4B0082;
	--text-color: #000000;
  --accent-color:#FF7719;
  --mid-color1: #64C3C8 ;
  --mid-color2: #7ACBD0 ;
  --mid-color3: #90D4D8 ;
  --mid-color4: #A6DCE0 ;
  --mid-color5: #BCE5E8 ;
  --mid-color6: #E9F6F7 ;
  --mid-color5: #BCE5E8 ;
  --sub-color1: #819FE0 ;
  --sub-color2: #77E07B ;
  --sub-color3: #E099B8 ;
  --sub-color4: #E0BD6C ;
  --error-color: #B52D1D;
  
  --shadow: 3px 3px 8px 2px var(--mid-color4);
  

}

.page-load-modal .modal-dialog{
    display: table;
    position: relative;
    margin: 0 auto;
    top: calc(50% - 24px);
  }

.page-load-modal .modal-dialog .modal-content{
  background-color: transparent;
  border: none;
}

body{
  padding-top:56px;
	font-family: 'M PLUS 1p', sans-serif !important;
	font-size: 13px !important;
	word-break: keep-all;
  height: 100%;
}

a {
  color: var(--main-color);
}

a:hover{
  color: var(--main-light);
}

table{
  font-size: 13px;
}
ol{
  padding: 0;
}

h5{
  margin-bottom:0;
}

.bg-fejblu{
  background-color: var(--main-color);
	z-index: 5;
	width: 100%;
  position: fixed;
  top: 0;
  
}

.user-item{
	display: flex;
	align-items: center;
}

.user-name{
	color:white;
	font-size: 12px;
	list-style-type: none;
}

ion-icon {
  font-size: 40px;
	color: white;
	cursor: pointer;
}

ion-icon:hover{
	color: gray;
}

.invalid-msg{
  color: var(--error-color);
}

.invalid-input{
  border-color: var(--error-color) !important;
}


/*------- Nav Links Overrides -----*/
h1, h2, h3, h4{
  margin-bottom: 0px; 
  color: var(--second-color);
}

.nav{
  flex-wrap: nowrap;
}
.nav-link, .dropdown-item{
	font-size: 13px;
}

.nav-link.dropdown-toggle{
  color: #FFFFFF !important;
}

.dropdown-item:hover, .dropdown-item:focus{
  background-color: var(--mid-color4) !important;
}


/*------- Bootstrap Overrides -----*/
.thead-dark th{
	background: var(--main-color) !important;
  color: #FFFFFF;
  font-weight: normal;
  padding: 3px 5px;
  border: none;
  height: 32px;}

.table-hover tbody tr:hover{
  cursor: pointer;
  background-color: var(--mid-color6);
}

.btn-primary{
  background-color: var(--second-color);
  border-color: var(--second-color);
  font-size: .8rem;
}

.btn-primary:hover{
  background-color: var(--mid-color3);
  border-color: var(--mid-color3);
}

.btn-secondary{
  background-color: var(--third-color);
  border-color: var(--third-color);
  font-size: .8rem;
}

.btn-secondary:hover{
  background-color: var(--mid-color3);
  border-color: var(--mid-color3);
}

.btn-accent{
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color:#FFFFFF;
  font-size: .8rem;
}

.btn-accent:hover{
  background-color: var(--accent-mid3);
  border-color: var(--accent-mid3);
  color:#FFFFFF;

}

.col-form-label{
  text-align: right;
}

label{
	color: var(--main-color);
  font-size: 13px !important;
}

.tooltip-inner {
  background-color: var(--main-color);
  color: white;
}

.form-control{
  padding: 3px 6px;
  font-size: 12px;
  border-color: var(--main-color);
}

/****------ Template CSS -------- ****/
.wrapper{
  height:100vh;
  max-width: 1300px !important;

}

.content-container{
	padding-top: 2vh;
	margin-bottom: 200px;
	width: 100%;
/*	max-width: 1100px !important;*/
	height:100vh;
}

.container{
  max-width:100%;
}
.header-row{
  padding-bottom: 30px;
  background-color: #FFFFFF;
  z-index: 2;
}

/*-- Accordin Template */
.card-header{
  background-color: var(--main-color);
  color: #FFFFFF;
  font-size: 14px !important;
  padding: 3px 12px !important;
  border-bottom-color: var(--main-color);
}

.accord-button{
  word-break: keep-all;
  color:#FFFFFF !important;
  font-size:14px;
  cursor: pointer;
}

.card{
border: 1px solid var(--mid-color4);
  -webkit-box-shadow: var(--shadow);  
  -moz-box-shadow:    var(--shadow); 
  box-shadow:         var(--shadow);
}

.accord-button{
}

.btn-edit{
  background-color: #e6e6e6;
  border-color: #8c8c8c;
  padding: 3px 6px;
  font-size: 13px;
}

.btn-edit:hover{
  border-color: #8c8c8c;
  background-color: #ffffff;
}

.select2{
  width:100% !important;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid var(--main-color);
    border-radius:4px
}


/****------ CSS For Date Pickers -------- ****/
.datepicker-days{
	font-size:12px;
	padding: 0;
}

.date-input{
	padding: 0 6px;
	height: 32px;
	width: 80px !important;
}

.date-label, .prepend, .append, .cal-open{
  background-color: var(--main-color) !important;
  border-color: var(--main-color);
  color: #FFFFFF !important;
	height: 32px;
	font-size: 12px;
  
}

.date-calendar-btn{
  cursor: pointer;
}


/********-------- Product Search Paramaters Dropdown ------- ***********/
/*---- Settings -----*/

.settings-box{  
  background-color: #FFFFFF;
  padding: 12px;
  border: 1px solid var(--mid-color3);
  border-radius: var(--radius);   
  
}

.settings-header{
  background-color: var(--mid-color5);
  margin: -12px -12px 0 -12px;
  padding: 6px 12px;
  border-radius: var(--radius);  
  
}



@media (max-width: 992px){
}