﻿/* Additional styles */
body{font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif !IMPORTANT }
.NavActive {
    display: block;
    position: relative;
    color: #fff !important;
    background-color: #f44336 !important;
    border: 1px;
    border-radius: 5px 5px 0 0;
    border-bottom: none;
}
.tabdivWrapper	{   border: 1px solid #000000;display:block; padding-left:12px; padding-right:12px; padding-top:6px; padding-bottom:6px
   }
.tabDIV {display:none; position: relative; }

.tabDIVDefault {display:block;position: relative;  }
.tablinkActive {
    color: black !important;
   background-color: aqua  !important;
    border:none;
}
.TabPage .tablink{text-align:right; color:#FFFFFF; background-color:#7E878A;border-radius:5px 5px 0 0 ;border-bottom:none;  }

.WebAdminActive {
    color: red !important;
    background-color: white  !important;

}


  .FormWrapper
    {
        
        border: 0px solid #a1a1a1;
        padding: 10px;
        max-width: 800px;
       min-height:350px; text-align:center;
       height:auto;
       position: relative;
       overflow:auto;
       margin: 0px auto;
       
         
     
    }

      
   .FormLayout
    {
        background-color: #f3f3f3;
        border: 1px solid #a1a1a1;
        padding: 10px;
        max-width: 800px;
       min-height:350px; text-align:center;
       height:auto;
       position: relative;
       overflow:auto;
       margin: 0px auto;
       
         
     
    }
   .FormLayoutNoborder{border: none !important;}
.FormSmall
 {min-height:350px;}
 
 
   .FormLayout .title
    {display: block;
     clear:left;  
    text-align: center; text-decoration: underline; font-weight: bold}
   
    .FormLayout select ,   .FormLayout input
    {
        display: block;
        width: 120px;
        float: left;
        margin-top: 3px;
     
    }
      .FormLayout label
    {
        display: block;
        
        width: 180px;
        float: left;
        margin-top: 3px;

        clear:left;
}
  
    
   
  
    .FormLayout textarea
    {
        display: block;
        width: 200px;
        height: 50px;
        float: left;
        margin-top: 3px;
        
    }

 
 .FormLayout input[type=submit] {
    padding:5px; 
    background:#C0C0C0; 
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
  	position:relative;
	right:    10px;
	bottom:   10px;
	float:right;
	transition: background 600ms;
	 cursor: pointer;
     bottom:0
}
.FormLayout input[type=button], button{ padding:5px; 
   background:#C0C0C0;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
  	position:relative;
	right:    10px;
	bottom:   10px;
	float:right;
	transition: background 600ms;
	 cursor: pointer;
	 width:auto;
}


input[type=submit]:disabled {
  background: #555;
  cursor: not-allowed;
  }
  .FormLayout input[type=fdile] {
        width: 200px;
        float: RIGHT;
        margin-bottom: 5px;
        clear: left;
        top:0px;
        right:1px;
        position: relative;
        font-size:1em;
}
.FormLayout h2 {font-size: 1.5em; text-align: center; margin-bottom: 2px}



  
    
.FormLayout .email
{ display: block;
        width: 180px;
        float: left;
        margin-top: 3px;
        top:150px;right:1px;
                font-size:1em;
        }
.FormLayout .Subtitle {width:200px; font-weight:bold  ;       font-size:1.5em;}


 .FormLayout .help        { color: #0000FF; font-size: 1em; float: left ;Width:100%}
 .FormLayout .datalabel        {display: inline-block;text-align:left;         font-size:1em;float: left; color:#0000FF;min-width:100px;max-width:200px;}

        
.FormLayout.ProfilePhoto{float: right; margin: 0 0 1em 1em; position: relative; top:1px;right:1px; border:1px; max-width:148px; max-height:150px}
.FormLayout img{   max-width:150px; max-height:150px;}
 .FormLayout .ddatalabel        {display: inline;text-align:left; clear:left;         font-size:1em;float: left;width:100px;}

input:required ,select:required,textarea:required{
  box-shadow: 4px 4px 5px rgba(200, 0, 0, 0.85);
}
input:required:focus,Select:Required:focus ,textarea:required{
  border: 1px solid red;
  outline: none;
}

input:-moz-read-only { /* For Firefox */
    background-color: #f3f3f3;
    outline:none;
    border-style:solid; border-width:1px; background-color: #F3F3F3;


}

input[readonly] {
     border-style:solid; border-width:1px; background-color: #F3F3F3;
     outline:none;
       
}
.aalert{
	padding: 10px;
	background-color: #2196F3;
	color: #FFFFFF;
	opacity: 1;
	transition: opacity 0.6s;
	margin-bottom: 15px;
	width: 100%;
	font-weight: bold;
	z-index: 600;
	position: relative;
	display: inline-block;
 
}

#lLblAlert{
    padding: 20px;
  margin:20px;
    color: #FFFFFF;
    opacity: 1;
    transition: opacity 0.6s;
    margin-bottom: 15px;
    width:95%; font-weight:bold;
   
    position:relative ;
	display:inline-block ;
    text-align:center;
    bottom:0
	

    
}

#lLblAlert.success {background-color: #4CAF50;}
#lLblAlert.info {background-color: #2196F3; }
#lLblAlert.warning {background-color: orange;}
#lLblAlert.critical {background-color: #FF0000;}
#lLblAlert.Hide {display:none;     }

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 3em;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.hover.closebtn {color: black;}
.aalert .Icon{float: left;width:16px;margin-right: 20px}
.FloatRight {float:right}
.FloatLeft {float:left}



.AM          { font-size: .75em; background-color: #99FFCC;Top:0 ;position:relative;}

.PM          { font-size: .75em; background-color: #FFCC99;bottom:0;position:relative; }


.MyPhoto{ margin: 0 0 1em 1em; position: relative; top:1px;right:1px; border:1px; max-width:150px; max-height:150px}

.DaysOutstandingRed  { color: #FFFFFF; border-style: solid; border-width: 0; background-color: #FF0000 !important; }
.DaysOutstandingOrange { color: #FFFFFF; border-style: solid; border-width: 0; background-color:         #FF9900 !important;}
.embed + img { position: relative; left: -24px; top: 0px; }


/* Styling the Popup Window */
.ppopup-trigger { display: block; margin: 0 auto; padding: 20px; max-width: 260px; background: #4EBD79; color: #fff; font-size: 18px; font-weight: 700; text-align: center; text-transform: uppercase; line-height: 24px; cursor: pointer; }
.popup {display: none; position: absolute; top: 100px; left: 50%; width: 700px; margin-left: -350px; padding: 50px 30px; background: #fff; color: #333; font-size: 19px; line-height: 30px; border: 10px solid #150E2D; z-index: 9999;}
.popup-mobile {position: relative; top: 0; left: 0; margin: 30px 0 0; width: 100%;}		
.popup-btn-close {position: absolute; top: 8px; right: 14px; color: #4EBD79; font-size: 14px; font-weight: bold; text-transform: uppercase; cursor: pointer;}


table.column {
	border-bottom:1px solid #9097A9;
	width:160px;
	padding:0;
	margin:0;
	border:1px solid #9097A9;
	}
	
	#Relogon {display: none}
	.BtnShowEvent{border: 0; background: transparent;}
	

    
    .ss-item-required input[type=text]    {
      
      border: 1px solid red;
    }
	.ss-item-required input[type=text]:after, select:after, textarea:after   { content:"*"; }
	.ss-item-required input:required:focus,Select:Required:focus {
  
  outline: none;

}

select[readonly]{
    background: #eee;
    cursor:no-drop;
    height: 20px
}

select[readonly] option{
    display:none;
}
.OnTop{
	
	position: relative; z-index: 100000;
	
}
#TabPage a {
    text-align: right;
    color: #FFFFFF;
    background-color: #7E878A;
    border-radius: 5px 5px 0 0;
    border-bottom: none;
    vertical-align:bottom ;
}
  
#TabPage .ddddselected {
    text-align: right;
    color: #FFFFFF;
    background-color: red;
    border-radius: 5px 5px 0 0;
    border-bottom: none;
}
.validator{
    color:red;
    float:left;
    position:relative;
    vertical-align:middle ;
}

.ContentPanel {
    background-color: #bbbbbb;
    padding: 10px 10px 10px 10px;
    width: 60em;
    font: 0.8em Verdana;

}
.textboxAslabel {
    border: none;
    background-color:none;
    border-color: #FFF;

}

.checkboxFour {
    clear: both;
    display: inline-block ;

    width: 100% !important;
    vertical-align: middle;
}
    .checkboxFour input {
        float: Right;
        margin-bottom: 0; 
        vertical-align: middle; /* Fixes any weird issues in Firefox and IE */
        display: inline-block;
        text-align: left;
        cursor: pointer;
        width: 20px;
        height: 20px;
        top: 0;
        border-radius: 4px;
    }
    .checkboxFour label {
        margin-bottom: 0; 
        vertical-align: middle; /* Fixes any weird issues in Firefox and IE */
        float: left;
    max-width:150px;
       
        display: inline-block;
    }

.GridPager a, .GridPager span {
    display: block;
    height: 15px;
    width: 15px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    font-family: Arial;
    font-size: 10pt;
}

.GridPager a {
    background-color: #f5f5f5;
    color: #969696;
    border: 1px solid #969696;
}

.GridPager span {
    background-color: #A1DCF2;
    color: #000;
    border: 1px solid #3AC0F2;
}
#SearchBar {
    border: groove;
    border-width: .5px;
    width: 100%;
    padding: 5px;
}

.ImageTile {
    max-width: 100px;
    border-style: none;
    border: 0 !important;
}


.Gridwrapper {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 10px;
    color: #444;
}

.Gridbox h1 {
    font-size: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border: dashed;
}

.Gridbox {
    background-color: lightgray;
    color: black;
    border-radius: 5px;
    padding: 5px;
    font-size: 1em;
    text-align: center;
}
.gridfooter {
    background-color: lightgray;
    color: black;
}

.alert-success{color:blue !important }




.StaticSelectedMenuStyle {
    color: White;
    background-color: #66a598;
    border: thin outset #A9A9A9 !important;
    font-weight: normal;
    font-size: medium;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 20px;
}

.StaticMenuStyle {
    color: White;
    background-color: #006a54;
    border: thin outset #A9A9A9 !important;
    font-weight: normal;
    font-size: medium;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 20px;
    vertical-align: bottom
}

.DMenuStyle {
    color: White;
    background-color: #008C71;
    border: thin outset #A9A9A9;
    font-size: medium;
    z-index: 110;
}

a.selected.static {
    font-weight: bold;
    color: blue !important;
}




  