*,
*::after,
*::before 
{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}


html
,body
{
   margin:0;
   padding:0;
   background: #EFEFEF;
   color: #567bb3;
   font-family:'Avenir-Book',Arial,Helvetica,sans-serif; 
   overflow: hidden;
   overflow-x: hidden;
   height: 100%;         
   width: 100%;
   font-size:14px;   
}


.license_info
{
   background: rgba(0, 0, 0, 0.75); 
   text-align: center; 
   cursor: pointer;
   z-index: 9000;   
}
.license_info p
{
   white-space: nowrap;
   vertical-align: top;
   overflow: hidden;
   text-overflow: ellipsis;
   padding:0;
   margin:0;
}


.license_info.issue
{
    position:fixed;
    top: calc(50% - 35px);
    left: 0;
    width: 100%;    
    height:70px;
}
.license_info.issue p
{
  font-size:16px;
  background: rgba(0, 0, 0, 0.5);
  line-height: 40px;
  margin: 15px 0;
  color: #FF2C2C;
}
.license_info.issue p i.ico
{
   width: 50px; 
   display: inline-block;
   text-align: center;  
   line-height: 40px;
}




.license_info.countdown
{   
   position:fixed;
   bottom: 0px;
   left: 0;
   height: 40px;   
   width: 100%;
}

.license_info.countdown p
{
  font-size:14px;
  line-height: 40px;  
  color: #FFD700;
}

.blocker
{
   background: #FFFFFF;
   height: 100%;
   width: 100%;
   position: absolute;
   top:0;
   left:0;
   z-index: 8000;
   display: flex;
   align-items: center;
   justify-content: center;   
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-around;  
   overflow: hidden;
   text-align: center;   
}

.blocker_ico
{
   flex: 1 100%;
   color: #567bb3;
   cursor: default;
   transition: 500ms ease all;
}

.blocker_ico:hover
{
   color: #505050;
}

.blocker_msg
{
   flex: 1 100%;
   color: #567bb3;
   font-size: 12px;
   line-height: 30px;      
   padding: 0 15px;
   cursor: default;   
   display: block;
   cursor: default;
}

.blocker_msg:before
{
   content: '- [';
   color: #aaa;
   line-height: 25px;
   min-width: 25px;
   text-align: center;
   display: inline-block;
   transition: 500ms ease all;
}
.blocker_msg:after
{
   content: '] -';
   color: #aaa;
   line-height: 25px;
   min-width: 25px;
   text-align: center;
   display: inline-block;
   transition: 500ms ease all;
}

.blocker_msg:hover:after,
.blocker_msg:hover:before
{
   padding: 0 20px;
   content: ' ++ ';
}


.particles-background
{
   position: absolute;
   top: 0;
   left: 0;      
   margin:0;
   padding: 0;
}



.page
{         
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-around;  
   overflow: hidden;   
}
.left
{
   padding: 0;        
   margin: 0;
   flex:6 60%;
   overflow: hidden;
   height: 100%;
   position: relative;         
}
.right
{
   flex:4 40%;
   height: 100%;
   overflow: hidden;
   overflow-y: auto;
   xmax-width: 420px;
   position: relative;
}
.center
{
   display: flex;
   align-items: center;
   justify-content: center;   
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-around;  
   overflow: hidden;
}
.middle
{   
   width: 100%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   overflow-x: hidden;
}







.content-login
{
   background: rgba(255,255,255, 0.9); 
   width: 90%;
   margin: 10px auto;
   max-width: 340px;
   padding: 15px 20px; 
   text-align: left;
   max-width: 320px;
   outline: none;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   transition: all 500s ease; 
}

.content-login-title
{
   line-height:30px;
   font-size:15px;   
   margin:0;
   padding-bottom: 0px;  
   display: block;   
   margin-bottom: 15px;
   transition: 300ms ease all;
}
.content-login-title::before
,.content-login-title::after
{
   content: '//';
   color: #ccc;
   line-height: 20px;
   min-width: 20px;
   text-align: center;
   display: inline-block;
}
.content-login-title .fa
,.content-login-title .fas
{
   color: #ddd;
   
}






.content-link
{
   margin: 0 auto;
   max-width: 320px;
   width: 90%;
   margin-top: 10px;
   margin-bottom: 10px;
   font-size: 12px;          
   line-height: 35px;
}
.content-link a
{
   color:#808080;
   text-decoration:  none;
   transition: all 500ms ease;        
}      
.content-link a .fas,
.content-link a .fa
{
   width: 20px;
   display: inline-block;
   text-align: center;
}
.content-link a:hover
{
   text-decoration:  none;
   color:#567bb3;
}



form
{
   width: 100%;
   padding:0;
   margin:0;        
}

.group 
{
   position: relative;
   margin: 0;
   xmargin-bottom: 28px;
   xmargin-top: 10px;

   margin-top: 30px;
   margin-bottom: 5px;
}
   
   
   

textarea 
{
  resize: none;
}

input,
textarea {
  background: none;
  color: #4d96d6;
  font-size: 13px;
  padding: 8px 8px 8px 5px;
  display: block;
  width: 100%;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #a0a0a0;
  outline: none !important;
  margin:0;
}
input:focus,
input:valid,
textarea:focus {
  outline: none;
}
input:required {
    box-shadow:none;
    outline: none;
}
input:invalid {
    box-shadow: none;
    outline: none;
}
input:focus ~ label.lbl, input:valid ~ label.lbl,
textarea:focus ~ label.lbl,
textarea:valid ~ label.lbl {
  top: -14px;
  font-size: 10px;
  color: #a0a0a0;
  xbottom: -22px;
  
}
input:focus ~ .bar:before,
textarea:focus ~ .bar:before {
  width: 100%;  
}
input[type="password"] {
  letter-spacing: 0.3em;
}



label.lbl {
  color: #808080;
  font-size: 12px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  xbottom: 10px;
  top: 10px;
  transition: 300ms ease all;
}


.bar {
  position: relative;
  display: block;
  width: 100%;   
}
.bar:before {
  content: '';
  height: 1px;
  width: 0px;
  bottom: 0px;
  display: block;
  padding:0;
  margin:0;
  position: absolute;
  background: #567bb3;
  transition: 300ms ease all;
  left: 0%;
}



.btn-box {
  text-align: left;
  margin: 0;
  
  xmargin-top: 50px;
  margin-top: 40px;
  margin-bottom: 10px;
  
}



.btn {
  background: #fff;
  color: #959595;
  border: none; 
  padding: 5px 15px;  
  border-radius: 3px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn:hover {
  color: #8b8b8b;
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12);
}
.btn.btn-link {
  background: #2196F3;
  color: #d3eafd;
}
.btn.btn-link:hover {
  background: #0d8aee;
  color: #deeffd;
}
.btn.btn-submit {
  background: #EEE;
  color: #567bb3;
  cursor: pointer;
}
.btn.btn-submit:hover {
  background: #567bb3;
  color: #FFFFFF;
}
.btn.btn-cancel {
  background: #eee;
}
.btn.btn-cancel:hover {
  background: #e1e1e1;
  color: #8b8b8b;
}




.p-switch-cust
{
   font-size: 12px !important; 
   color: #808080;
}



.copyright
{
   position: absolute;
   bottom: 5px;
   left: 5px;
   line-height: 25px;
   padding:0;
   margin:0;   
   z-index: 1000;
   color: #808080;
   text-align: center;
   
   font-size: 11px;   
   padding: 0 5px;   
   
}


.copyright a
{
   color:#808080;
   text-decoration:  none;
   transition: all 500ms ease;  
}
.copyright a:hover
{
   text-decoration:  none;
   color:#567bb3;
}





.compinfo
{
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;  
   padding:0;
   margin:0;   
   z-index: 1000;   
}

.complogo
{
   display: block;
   height: 44px;
   width: 44px;
   border:1px solid #303030;
   background: #303030;
   padding: 2px;
   margin: 0 auto;
   
}

.compname
{
   text-align:left;
   display: block;
   width: 100%;
   line-height: 40px;
   padding: 0 5px;  
   min-width: 0;   
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 15px;
   color: #998549;
}



#slideshow
{
   height:100%;
   width: 100%;
   position: relative;
   display: block;
}

/*
.hero-image 
{
   height:100%;
   width: 100%;
   position: relative;
   display: none;
}
.hero-image img
{
   border: 10px solid #000;
}
.hero-text {
   text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: white;
}
.hero-text button {
   border: none;
   outline: 0;
   display: inline-block;
   padding: 10px 25px;
   color: black;
   background-color: #ddd;
   text-align: center;
   cursor: pointer;
}
.hero-text button:hover {
   background-color: #555;
   color: white;
}
*/

@media only screen and (max-height: 620px) 
{
   .page .right .middle
   {
      position: relative !important;      
      top:0 !important;      
      left:0 !important;      
      transform: translate(0, 0%) !important;                  
      padding:0 !important;
      margin: 0 !important;
      margin-top: 50px !important;
   }
   
   .compprod
   {     
      margin: 0 auto !important;
      margin-bottom:10px !important;
   }
}

@media only screen and (max-width: 720px) 
{
   .copyright
   {
      bottom: 0px;
      left: 0px;
      line-height: 25px;
      padding:0;
      margin:0;   
      z-index: 1000;
      color: #808080;
      text-align: center;
      font-size: 11px;
      padding: 0 15px;
      width: 100%;        
   }
   
   .compprod
   {
      text-align: center !important;      
      margin-top: 25px  !important;
   }
   
   .compprod img
   {
      text-align: center;
   }
   
   .page .left
   {
      display: none;
   }
   
   .page .right 
   {      
      flex: 1 100%;
      max-width: 100%;
      height: calc(100% - 175px);            
   }

   .page .right .middle
   {
      position: relative !important;      
      top:0;
      left:0;
      transform: translate(0, 0%);            
      padding:0 !important;
      margin: 0 !important;
      padding-top: 15px !important;
   }

   .compinfo
   {
      height: 125px;
      overflow: hidden;
      position: relative !important;                 
   }
   
   .compinfo .flex-display div:first-child
   {
      flex: 1 100% !important;      
      max-width: 100% !important;
      margin: 0;
      padding: 0;     
   }
      
   .compinfo .flex-display div:last-child
   {
      flex: 1 100% !important;     
      margin: 0;
      padding: 0;
   }
      
   .complogo
   {
      height: 60px;
      width: 60px;
      margin: 15px;
   }
   
   .compname
   {
      text-align:center;
      display: block;
      width: 100%;
      line-height: 35px;
      padding: 0 5px;  
      margin: 0;      
   }    
}



.flex-display
{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-around;   
   margin: 0;
   padding:0;   
}

.flex-display .flex-item
{        
   padding: 0;        
   padding: 0px;   
   margin: 0px;
   flex: 1 100%;      
}







/* Company product */

.compprod
{
   padding:0;
   margin:0;   
   max-width: 320px;
   margin: 20px auto;
   width: 90%;
   text-align: right;
   transition: all 500ms ease;
}
.compprod img.logo
{
   height: 40px; opacity: 0.6;
   display: inline-block;
   transition: all 500ms ease;
   margin: 0px;
}
.compprod img.logo:hover {  
  opacity: 1;  
}



/* Page message */

#content-message-holder
{
   display: none;
}
.content-message
{
   margin: 0 auto;
   max-width: 320px;
   width: 90%;
   margin-bottom: 10px;
   font-size: 12px;         
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-around;  
   overflow: hidden;   
   outline: none;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   transition: all 500s ease;

}
.content-message .ico
{
   flex: 3 30%;
   display: flex;
   align-items: center;
   justify-content: center;   
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-around;  
   font-size: 14px; 
   max-width: 30px;
   background: rgba(200,200,200, 0.8); 
}
.content-message .msg
{
   flex: 7 70%;
   line-height: 25px;
   padding: 5px 8px;          
   background: rgba(255,255,255, 0.9);  
}


.content-message.content-success
{
   color: #488c66;
}      
.content-message.content-success .ico
{                
   background: rgba(200,200,200, 0.8); 
   color: #488c66;
}      
.content-message.content-success .msg
{
   background: rgba(255,255,255, 0.9);  
}


.content-message.content-error
{         
   color: #944444;         
}
.content-message.content-error .ico
{                          
   background: rgba(200,200,200, 0.8); 
   color: #944444;
}      
.content-message.content-error .msg
{
   background: rgba(255,255,255, 0.9);  
}


.content-message.content-warning
{
   color: #ff8724;
}
.content-message.content-warning .ico
{                
   background: rgba(200,200,200, 0.8); 
   color: #ff8724;
}
.content-message.content-warning .msg
{
   background: rgba(255,255,255, 0.9);  
}


.notfound404
,.logoutsuc
{
   line-height: 80px;
   font-size: 28px;      
   text-align: center;
   margin: 10px 0;
   transition: all 500ms ease;
   cursor: default;
}

.notfound404:hover
,.logoutsuc:hover
{
   transform: scale(1.2);
}

.notfound404 .fft
{
   color: #ddd !important;
}
.notfound404 .fbg
{
   color: #944444 !important;
}

.logoutusr
{
   text-align: center;
   font-size: 12px;
   line-height: 25px;
   margin-bottom: 20px;
}