body {
    margin: 0px;
    font-family: Arial;
    line-height: 110%;
    color: #333;
}

p {
    margin: 0px;
    margin-bottom: 0px;
}
/*******************************************Grid View****************************************************/
.FormGroup, .FormHalf, .Form_1, .Form_2, .Form_3, .Form_4, .Form_5, .Form_7, .Form_8, .Form_9, .Form_10, .Form_11 {
    float: left;
    position: relative;
    min-height:1px;
    box-sizing:border-box;
}
.FormHalf, .Form_1, .Form_2, .Form_3, .Form_4, .Form_5, .Form_7, .Form_8, .Form_9, .Form_10, .Form_11 {
    padding:0px 15px;
}
.FormGroup {
    width: 100%;
}

.FormHalf {
    width: 50%;
}

.Form_11 {
    width: 91.66666667%;
}

.Form_10 {
    width: 83.33333333%;
}

.Form_9 {
    width: 75%;
}

.Form_8 {
    width: 66.66666667%;
}

.Form_7 {
    width: 58.33333333%;
}

.Form_5 {
    width: 41.66666667%;
}

.Form_4 {
    width: 33.33333333%;
}

.Form_3 {
    width: 25%;
}

.Form_2 {
    width: 16.66666667%;
}

.Form_1 {
    width: 8.33333333%;
}
/*@media only screen and (max-width: 800px){

.Form_1 {
    width: 16.66666667%;
}
.Form_2 {
    width: 33.33333333%;
} 
.Form_3 {
    width: 50%;
}
    .FormHalf {
    width: 50%;
    }
}

@media only screen and (max-width: 500px) {
    .FormGroup, .Form_1, .Form_2, .Form_3, .Form_4, .Form_5, .Form_7, .Form_8, .Form_9, .Form_10, .Form_11 {
        width: 100%;
    }
}*/

/*****************************************ScrollBar Style Changes******************************************************/

.ClassName::-webkit-scrollbar {
        width: 5px;
}

/* Track */
.ClassName::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        -webkit-border-radius: 10px;
        border-radius: 10px;
}

/* Handle */
.ClassName::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background:#DDD;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

.ClassName::-webkit-scrollbar-thumb:window-inactive {
            background:#DDD;
}        

/*****************************************Dropbox******************************************************/
.dropbox {
    background-color: #2babe4;
    width: 400px;
    height: 300px;
    position: absolute;
    border-radius: 5px;
    padding: 5px;
    border:2px solid #283375;
    display: block;
    z-index:9;
}

.BoxSquare:before {
    content: "";
    position: absolute;
    left: 199px;
    top: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #283375 transparent;
    z-index: 10;
}

/*******************************************Snacks Bar************************************************/
#MessageBar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
}

#MessageBar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}


/*<script>
function ShowMessage() {
    var x = document.getElementById("MessageBar")
    x.className = "show";
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
</script>*/


/*********************************************Modal or Alert box**************************************************/
/*Modal popup*/

.ModalBG {
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);
    z-index:9999;
    top:0%;
    left:0%;
    position:fixed;
    display:none;
}

.ModalBoxContent {
top:25%;
left:30%;
width:100%;
height:auto;
background-color:#fff;
position:relative;
}

.ModalHeader {
width:100%;
height:35px;
background-color:#000;
color:#fff;
font-size:16px;
padding:0px;
}

.ModalContent {
padding:2%;
}

.ModalClose {
background: rgba(76,175,250,1);
background: -moz-linear-gradient(top, rgba(76,175,250,1) 0%, rgba(35,150,239,1) 29%, rgba(19,135,223,1) 52%, rgba(37,136,211,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(76,175,250,1)), color-stop(29%, rgba(35,150,239,1)), color-stop(52%, rgba(19,135,223,1)), color-stop(100%, rgba(37,136,211,1)));
background: -webkit-linear-gradient(top, rgba(76,175,250,1) 0%, rgba(35,150,239,1) 29%, rgba(19,135,223,1) 52%, rgba(37,136,211,1) 100%);
background: -o-linear-gradient(top, rgba(76,175,250,1) 0%, rgba(35,150,239,1) 29%, rgba(19,135,223,1) 52%, rgba(37,136,211,1) 100%);
background: -ms-linear-gradient(top, rgba(76,175,250,1) 0%, rgba(35,150,239,1) 29%, rgba(19,135,223,1) 52%, rgba(37,136,211,1) 100%);
background: linear-gradient(to bottom, rgba(76,175,250,1) 0%, rgba(35,150,239,1) 29%, rgba(19,135,223,1) 52%, rgba(37,136,211,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4caffa', endColorstr='#2588d3', GradientType=0 );
-webkit-box-shadow: -1px 6px 10px -7px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 6px 10px -7px rgba(0,0,0,0.75);
box-shadow: -1px 6px 10px -7px rgba(0,0,0,0.75);
text-align:center;
width:100%;
position:absolute;
bottom:0px;
cursor:pointer;
color:#fff;
padding:0px;
}

/*********************************************Button group or icon bar**************************************************/
.BtnSet {
    width: 100%;
    text-align: center;
    background-color: #000;
    overflow: auto;
}

.BtnSet a {
    width: 20%;
    padding: 12px 0;
    float: left;
    transition: all 0.3s ease;
    color: white;
    font-size: 36px;
}

.BtnSet a:hover {
    background-color: #000;
}

.ShowOn {
    background-color: #4CAF50;
}

/*********************************************Dropdown List**************************************************/
.dropDownMenu {
    position: relative;
    display: inline-block;
}

.dropDownMenu-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropDownMenu-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropDownMenu a:hover {background-color: #f1f1f1}
/*********************************************Hover Text Middle**************************************************/
.TotalDiv {
  position: relative;
}

.TotalDiv > image {
  display: block;
  width: 100%;
  height: auto;
}

.DivInside {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.6);
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.TotalDiv:hover .DivInside {
  bottom: 0;
  height: 100%;
}

.DivText {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
/*********************************************Hover Text Middle**************************************************/