#container {width:100%}
#centered {width:1000px; margin:0 auto}

.BgDetail
{
    /*background-color : #f5ffff;*/
    border-radius:5px;
    margin: 10px 10px 10px 10px;
    /*
    position:fixed;
    right:0px;
    top:110px;*/
    /*font-size:x-large;*/
}

.middleLock {
  transition: .5s ease;
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.gv_ScrollBar
{
    overflow:auto;
    height:300px;
    scrollbar-arrow-color:cornflowerblue;
    scrollbar-shadow-color:rgba(235, 235, 235, 1);
    scrollbar-face-color:rgba(209, 221, 241, 1);
    scrollbar-shadow-color:rgba(209, 221, 241, 1);
    border-radius : 10px;
}

/*
.#ScrollBarStyle::-webkit-scrollbar
{
    width:10px;
}

.#ScrollBarStyle::-webkit-scrollbar-thumb
{
    border-radius:10px;
    background-color:Gray;
    opacity:1;
}

.#ScrollBarStyle::-webkit-scrollbar-track
{
    border-radius:10px;
    box-shadow:inset 0 0 5px grey;
}
*/


.DivEvaluate
{
    display:none;
    position:fixed;
    background-color:rgba(0,0,0,0.2);
    width:100%;
    height:100%;
    border-radius:5px;
    z-index:0px;
    top: 0px;
    left:0px;
    
    /*
    background-color:rgba(0,0,0,0.65);
    position:relative;
    height:1000px;
    width:1000px;
    top:0px;
    
  background-color:rgba(0,0,0,0.65);
  transition: .5s ease;
  opacity: 0.5;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;*/
}


.DivAskForHelpStep
{
  
    position:fixed;
    background-color:rgba(255,251,247,1);
    width:50%;
    height:50%;
    border-radius:15px;
    z-index:0px;
    top:25%;
    left:25%;
    
    /*
    background-color:rgba(0,0,0,0.65);
    position:relative;
    height:1000px;
    width:1000px;
    top:0px;
    
  background-color:rgba(0,0,0,0.65);
  transition: .5s ease;
  opacity: 0.5;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;*/
}

.Wrapper
{
    position:relative;
    display:inline-block;
}

.Slash
{
    
    position:relative;
    width:100%;
    height:100%;
    border-top:1px solid red;
    transfrom:rotate(-16deg);
    top: 0px;
}


.DivEvaluateBox
{
    /*background-color:rgba(250,0,0,0.8);
    position:relative;
    left:50%;
    top:50%;
    width:30%;
    height:30%;*/
    background-color:red;
    position: absolute;
    height:50px;
    width:200px;
}

.BgIssue
{
    
    background-color : rgba(240, 244, 250, 1);
    border-radius:10px;
    margin: 10px 10px 10px 10px;
    padding:20px 20px 20px 20px;
    
    
}

.DivYinDee
{
    background-color : #fef9f0;
    border-radius:10px;
    margin: 10px 10px 10px 10px;
    padding:20px 20px 20px 20px;
    position:relative;
    transition:.9s;
}



.BgWelcomeYinDee
{
    background-color : #fef9f0;
    border-radius:10px;
    /*margin: 10px 10px 10px 10px;*/
    padding:5px 5px 5px 5px;
    position:relative;
    transition:.5s;
}



.divAskForHelp
{
    display:none;
    background-color : White;
    border-radius:10px;
    margin: 10px 10px 10px 10px;
    padding:20px 20px 20px 20px;
    /*
    position:relative;
    animation:animatezoom 0.6s*/
    /*position:relative;
    animation:animatetop 0.6s;*/
}


@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-top{position:relative;animation:animatetop 0.6s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;animation:animateleft 0.6s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.6s}@keyframes animateright{from{right:-300px;opacity:0} to{right:300;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 0.6s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}

/*SearchBox*/

/*
.customDrop, customDropHeader
 {
     position:relative;
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
 }
 */
 .customDrop, customDropHeader
 {
    padding-left:0px !important;
     /*z-index:999999999;*/
     position:absolute;
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
     /*right:35px;*/
     }
 
 .listItemPL
 {g
     cursor:pointer;
     padding:5px;
     border:1px solid #898989;
     list-style:none;
     border-bottom-style:none;
     background-color:white;
     
     
}

.listItemPL:hover
{
   background-color: #898989;
}


.AFH_Box
{
    border-radius:5px;
    border: 1px solid #2d6a9c;
    margin: 2px;
    padding:5px 5px 5px 5px;
}
.Gv_AFHStep-div
{
    background-color : White;
    border: 1px solid White;
    border-radius:20px;
    box-shadow: 0px 0px 0px 0.5px rgba(0,0,0,0.1),0px -1px 10px 2px rgba(0,0,0,0.1);

}
.Gv_AFHStep
{
    background-color : White;
    padding :10px;
    margin : 10px;
}

.Gv_AFHStep-Detail-YinDee
{
    
    background-color : #A4C8F0;
    border: 1px solid #A4C8F0;
    border-radius:20px;
    color:black;
    padding :5px;
    
}
.Gv_AFHStep-Detail-Send
{
    
    background-color : Orange;
    border: 1px solid Orange;
    border-radius:20px;
    color:White;
    padding :5px;
    
}

.Detail
{
    background-color : White;
    border: 1px solid #ffffff;
    border-radius:5px;
    margin : 5px 5px 5px 5px;
    /*box-shadow: 5px 5px 5px #f0f0f0;*/
    box-shadow: 0px 0px 0px 0.5px rgba(0,0,0,0.1),0px -1px 10px 2px rgba(0,0,0,0.3);/*0px 6px 20px 0px rgba(0,0,0,0.19);*/
    opacity:1;
}

.Button
{   
    cursor:pointer;
    color:White;
    border: 0px solid #ffffff;
    background-color : #003399;
    border-radius:5px;
    margin: 5px;
    padding:5px 15px;
    /*box-shadow: 5px 5px 5px #f0f0f0;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2),0px 6px 20px 0px rgba(0,0,0,0.19);*/
}

.Button:hover
{   
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2),0px 3px 10px 0px rgba(0,0,0,0.19);
    transition: 0.2s;
}

.TextBox_AFH
{
    /*background-color : #010161;*/
    color:#898989;
    border:2px solid #898989;
    border-radius:5px;
}

.ActionTextbox
{
    color:#898989;
    border:1px solid #898989;
    border-left:0px;
    border-right:0px;
}

.ActionTextbox:focus
{
    color:Black;
}

.SearchBox
{
    color:#898989;
    border:2px solid #898989;
    border-radius:5px;
    padding:10px 5px;
}

.SearchBox:focus
{
    color:Black;
}


.GvBox
{
    margin : 5px 5px 5px 5px;
    /*box-shadow: 5px 5px 5px #f0f0f0;*/
    box-shadow: 0px 0px 0px 0.5px rgba(0,0,0,0.1),0px -1px 10px 2px rgba(0,0,0,0.3);
    opacity:1;
}

.gv_Issue
{
    background-color : white;
    border-radius:10px;
    margin: 5px 5px 5px 5px;
    padding : 3px;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2),0px 6px 20px 0px rgba(0,0,0,0.19);
}

.gv_Issue:hover
{
    background-color : #fef0f0;
    cursor:pointer;
}

.gv_Issue:active
{
    background-color : Black;
     border-radius:411px;
}



.ActionDesign
{
    background-color:rgba(209, 221, 241,1);
    border-radius:10px;
    padding:5px 10px;
    margin:2px;
}

.DashBoardBox
{
    border : 0px;
    border-radius:10px;
    margin:10px;
    
    
}
.DashBoardBox:hover
{
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2),0px 6px 20px 0px rgba(0,0,0,0.19);
    transition:.3s;
    cursor:pointer;
}

.DashBoardBox:active
{
    transform: translateY(4px);
}

 .swiper-container {
 width: 100%;
 height: 100%;
 }
 
 .swiper-slide {
 text-align: center;
 font-size: 18px;
 background: #fff;
 /* Center slide text vertically */
 display: -webkit-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 -webkit-justify-content: center;
 justify-content: center;
 -webkit-box-align: center;
 -ms-flex-align: center;
 -webkit-align-items: center;
 align-items: center;
 }
 .swiper-pagination {
 position: absolute;
 top: 10px;
 right: 10px;
 width: auto !important;
 left: auto !important;
 margin: 0;
 }
 .swiper-pagination-bullet {
 padding: 5px 10px;
 border-radius: 0;
 width: auto;
 height: 30px;
 text-align: center;
 line-height: 30px;
 font-size: 12px;
 color:#000;
 opacity: 1;
 background: rgba(0,0,0,0.2);
 }
 .swiper-pagination-bullet-active {
 color:#fff;
 background: #007aff;
 }