.header {
    height:auto;
    background-color:#005995;
    color:#fff;
    text-align:center;
    font-size:35px;
    /*padding-top:.5%; padding-bottom:.5%;*/
 }
.img { width:120px; height:120px; }
.body
 {
     /*display: flex;*/
     margin:0 auto;
     /*font-family:Cambria;*/ 
     font-family:Sans-Serif;
     font-size:16px; color:#222;/*background-color:#F9F6EE;*/
 }
 .sub_title { font-size:20px; color:#fbf579;}
.page { width:99.9%; margin:0 auto; min-height:85vh;}
.copyright { margin-top:1%; bottom:0; background-color:#005995; color:#fff; text-align:center; padding-top:.5%; padding-bottom:.5%;}
.button_blue { background-color:#007BFF; cursor:pointer; padding:6px 10px 6px 10px; border-radius:3px; color:#fff; border:1px solid #007BFF;}
.button_red { background-color:Red; cursor:pointer; padding:45px 10px 5px 10px; border-radius:4px; color:#fff; border:1px solid Red;}
.button_brown { background-color:#f44336; cursor:pointer; padding:3px 8px 3px 8px; border-radius:50px; color:#fff;}
.button_purple { background-color:#400080; cursor:pointer; padding:5px 10px 5px 10px; border-radius:4px; color:#fff; border:1px solid #400080;}
.button_green { background-color:#008000; cursor:pointer; padding:5px 10px 5px 10px; border-radius:2px; color:#fff; border:1px solid #008000; }
.login_btn { background-color:transparent; cursor:pointer; border-style:none; font-size:16px;}
.login_btn:hover{ background-color:transparent; color:#f44336; cursor:pointer; }
.logout_btn { background-color:transparent; color:#2196F3; cursor:pointer; border-style:none; font-size:16px; padding:4px; /*border-radius:4px;*/ }
.logout_btn:hover{ background-color:transparent; color:#1260cc; cursor:pointer; }
.link_btn{ text-decoration:none; color:#222a32; cursor:pointer;}
.inner1 { float:left; width:100%; } .inner2 { float:left; width:100%; }
.back_btn{ text-decoration:none; color:#4cb69f;}
.table_style { width:100%; border-collapse:collapse; color:#333; font-size:inherit;}
.grid_style { max-width:100%; border-style:none;}
.login_table_style { margin:0 auto; color:#222; width:60%; text-indent:10px; border-collapse:collapse; padding:1%;}
.logo_img { width:20px; height:20px; border-radius:8px;}

@media print
{ 
  .table_style { color:#333; background-color:#fff; border:1px solid #000; border-collapse:collapse; width:100%; }
}
input[type=text][type=text], textarea
{
 -webkit-transition: all 0.30s ease-in-out;
 -moz-transition: all 0.30s ease-in-out;
 -ms-transition: all 0.30s ease-in-out;
 -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #888;
} 
input[type=text]:focus, textarea:focus
{
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}
@media only screen and (max-width:480px)
{
   .page{ width:98%;}
   .mydiv,#mylogin,.table_style
   {
       position:relative;
       flex-direction:column;
       flex-wrap:no-wrap;
       width:100%;
       position:relative;
    }
   .button_blue,.button_green,.button_red { padding:7px 10px 7px 10px;}
   .header{ min-height:5vh; font-size:16px; padding-top:3%; padding-bottom:3%; }
   .link_btn{ text-decoration:none;}  
   .sub_title { font-size:14px; color:#fbf579;}
   .grid_style { min-width:100%; overflow:scroll; margin-bottom:1%; border-style:none;}
}
.text_style { color:#222; width:90%; }
.pass_txt_style { color:#222; width:89.5%; }
.hp_title { color:#222; font-size:18px; margin-top:2%; margin-bottom:2%; }
.title { color:#4cb69f; margin-top:3%; margin-bottom:3%;}
.table_reg { margin:0 auto; font-size:16px; color:#222; width:70%; text-indent:2px; border-collapse:collapse; padding:1%;}
.td {max-width:100%; }
/*.panel_style { margin:0 auto; x-overflow:scroll;}*/
@media only screen and (max-width:480px)
{
   .text_style,.pass_txt_style { width:98%; }
   .img {width:48px; height:48px;}
   .hp_title { font-size:16px; margin-top:5%; margin-bottom:5%; cursor:pointer; }
   .title { margin-top:5%; cursor:pointer; }
   .copyright { margin-top:1%; font-size:14px; bottom:0; background-color:#005995; color:#fff; text-align:center; padding-top:2%; padding-bottom:2%;}
   .table_reg { width:100%;  margin:0 auto; overflow-x:auto; border-collapse:collapse; padding:1%; font-size:14px; color:#222; }
   .td { min-width:130px; }
   /*.panel_style { margin:0 auto; width:100%; overflow-x:scroll;}*/
}
.circle { height:10px; width:10px; border-radius:50%; background-color:Green; display:inline-block; }
.a{ text-decoration:none; color:#222a32;}
.a2{ text-decoration:none; color:#2196F3; cursor:pointer;}
.tab_title { text-decoration:none; color:#fff; font-size:20px;}
.mouse { cursor:pointer; }
.b { border:1px solid #555; padding:.5%; border-radius:50px; color:#ccc; text-decoration:none;}
.p { width:98%; margin:3% 0 0 2%;}
.p1{ text-align:center; font-size:22px; margin-top:5%; color:#005995;}
.idDisplay { width:100%; border-bottom:2px solid #273d62; padding:1% 0 1% 0;}
.apply_grid { width:98%;}
.dashboardPic {height:120px; width:120px; border-radius:50%; }
.dashboard_leftpanel{/*background-color:#273d62; background-color:#1F2833; color:#fff; height:100%; /* background-image:linear-gradient(to bottom, #002130,#002130,#6ed3cf,#6ed3cf);*/}
@media only screen and (max-width:480px)
{
    .p{ text-align:left; width:100%; margin-top:3%; margin-bottom:3%; display:flex; flex-direction:row; }
    .p1{ width:100%; font-size:16px; margin-top:20%;}
    .idDisplay { padding-top:3%; padding-bottom:3%;}
    .apply_grid { width:100%; font-size:16px;}
    .dashboardPic{height:120px; width:120px; background-color:#333; border-radius:50%; }
    .dashboard_leftpanel{ color:#fff;}
    .tab_title { text-decoration:none; color:#fff; font-size:16px;}
}
.grid-container
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    cursor:default;
}
.grid-child1 { text-align:justify; border-right:1px solid #eee;}
.grid-child2 { text-align:justify;}

.grid-document
{
    display: grid;
    grid-template-columns: .6fr 2fr;
    grid-gap: 10px;
    border-radius:5px;
    margin:5px;
}
.grid-left { text-align:left; border-right:2px solid #ededed; height:100vh;}
.grid-right { text-align:justify;}
@media only screen and (max-width:480px)
{
    .grid-container,.grid-document
    {
        flex-direction:column;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        margin-top:1%; margin-bottom:5%;
    }
    .grid-left { text-align:left; border-right:none; height:auto; background-color:transparent;}
}
.document_view { max-height:600px; width:100%; color:Red; font-weight:bold; margin:1%;}
.panel_style { height:auto; margin:0 auto; overflow-x:scroll; width:100%;}
@media only screen and (max-width:480px)
{
    .panel_style { height:auto; width:100%; overflow-x:scroll; }
}
.menu_bar
 {
     padding-left:2%;
     padding-top:2%;
     background-color:#1F2833;
     color:#fff; height:100vh; 
 }
.div_style { padding:1%; border-radius:4px; border:1px solid #bbb; margin-top:1px; margin-bottom:1%;}
.maindiv { width:100%; height:100vh; margin:0 auto; }
.leftPanel { width:10%; height:100vh; float:left; margin-right:5px;}
.rightPanel { width:89%; height:100vh; float:left; margin-top:1%; }
.tab-container
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    background-color:#fff;
}
.tab1 { background-color:#2196F3; color:#fff; border-radius:8px; padding:12%; margin:2% 0 2% 0;}
/*.tab1:hover{ background: linear-gradient(30deg, #f0075b, #2196F3, #1aff22);}*/
.tab2 { background-color: #9068be; color:#fff; border-radius:8px; padding:12%; margin:2% 0 2% 0;}
/*.tab2:hover {background: linear-gradient(30deg, #f0075b, #9068be, #1aff22);}*/
.tab3 { background-color:#ed8a63; color:#fff; border-radius:8px; padding:12%; margin:2% 0 2% 0;}
/*.tab3:hover{ background: linear-gradient(30deg, #f0075b, #f44336, #1aff22);}*/
.tab4 { background-color: #4cb69f; color:#fff; border-radius:8px; padding:12%; margin:2% 0 2% 0;}
/*.tab4:hover {background: linear-gradient(30deg, #f0075b, #feda1a, #1aff22);}*/
.tab5 { background-color: #feda1a; color:#fff; border-radius:8px; padding:12%; margin:2% 0 2% 0;}
/*.tab5:hover{ background: linear-gradient(30deg, #f0075b, #4cb69f, #1aff22);}*/
.tab6 { background-color: #6ed3cf; color:#fff; border-radius:8px; padding:12%; margin:2% 0 2% 0;}
/*.tab6:hover {background: linear-gradient(30deg, #f0075b, #005995, #1aff22);}*/

@media only screen and (max-width:480px)
{
          /* For mobile phones: */
          .tab-container,.tab1,.tab2,.tab3,.tab4,.tab5,.tab6,.tab7,.tab8
          {
               flex-direction:column;
               grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
               font-size:14px;
          }
}
.search_text{ width:100%; height:30px; font-size:16px; outline:none; border-radius:20px; background-color:transparent; }
.login_container {
    color:#222a32;
    width:90%;
    min-height:100vh;
    margin:auto;
}
.label { padding: 12px 12px 12px 0; display: inline-block; width:100%;}
.reg_txt {color: #222; min-width:50%; min-height:25px; border-radius: 4px; border-style:solid; }
.reg_drp_list {
    margin-top: 6px;
    color:#222; 
    min-width:50%;
    background-color:transparent;
    border:1px solid #666;
    border-radius: 4px;
    padding:.5%;
}
@media only screen and (max-width:480px)
{
    .login_container { color:#222a32; width:90%; margin:auto; }
    .reg_txt { color:#222; min-width:98%;}
    .reg_drp_list{ color:#222; min-width:99%; min-height:25px; border:1px solid #666; padding:.5%; }
    .lbl_style { width:100%; color:#666;}
}
.container { width:90%; margin:auto; font-size:14px;}
.col-25 {
    float: left;
    width: 20%;
    margin-top: 3px;
}
.col-75 {
  float: left;
  width: 80%;
  margin-top: 3px;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 600px) {
  .col-25, .col-75
  {
    width: 100%;
    margin-top: 0;
  }
}
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.tooltip{ position:relative; display:inline-block; background-color:#222; color:#fff; text-align:center; padding:5px; }

.editpage { height:100%; width:100%; display:flex; flex-direction:row; }
.editpage_left { height:100vh; float:left; width:20%; border-right:2px solid #ededed; background-color:#ededed;}
.editpage_right { height:auto; float:left; width:80%; background-color:#fff; margin-left:5px;}
@media only screen and (max-width:480px)
{
   .editpage,.editpage_left,.editpage_right { position:relative; flex-direction:column; flex-wrap:no-wrap; width:100%; }
}