html,
body {
  height: 100%;
  font-family: 'Lato', sans-serif;
}
.img-fluid {
    width:100%;
    height:auto;
}
.info{
    font-size:11px;
}
body {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}
.mycard{
    width:70%;
    background-color:#fff;
    border:solid 1px #eaeaea;
    margin:auto;
}
a {
    text-decoration: none;
    color:#333;
}
a:hover {
    text-decoration: none;
      color:#333;
}
       
.notice {
    padding: 15px;
    background-color: #fafafa;
    border-left: 6px solid #7f7f84;
    margin-bottom: 10px;
    -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
       -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
            box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
}

.notice-success {
    border-color: #80D651;
}
.notice-success>strong {
    color: #80D651;
}
.notice-info {
    border-color: #45ABCD;
}
.notice-info>strong {
    color: #45ABCD;
}
.notice-warning {
    border-color: #FEAF20;
}
.notice-warning>strong {
    color: #FEAF20;
}
.notice-danger {
    border-color: #d73814;
}
.notice-danger>strong {
    color: #d73814;
}
.gride{
    font-size:9px;
}
.box > .icon { text-align: center; position: relative; }
.box > .icon > .image { position: relative; z-index: 2; margin: auto; width: 66px; height: 66px; border: 8px solid white; line-height: 54px; border-radius: 50%; background: #333; vertical-align: middle; }

.box > .icon > .image > i { font-size: 24px !important; color: #fff !important; }

.box > .icon > .info { margin-top: -24px; background: rgba(0, 0, 0, 0.04); border: 1px solid #e0e0e0; padding: 15px 0 10px 0; }

.box > .icon > .info > h3.title { font-family: "Roboto",sans-serif !important; font-size: 16px; color: #222; font-weight: 500; }
.box > .icon > .info > p { font-family: "Roboto",sans-serif !important; font-size: 13px; color: #666; line-height: 1.5em; margin: 20px;}

.box > .icon > .info > .more a { font-family: "Roboto",sans-serif !important; font-size: 12px; color: #222; line-height: 12px; text-transform: uppercase; text-decoration: none; }

.box .space { height: 30px; }
.card-header-blue{
    background-color:#2196F3;
    color:#FFFFFF;
    border-bottom:3px solid #BBB;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    font-family: 'Roboto', sans-serif;
    padding:0px;
    margin-top:0px;
    overflow:hidden;
    -webkit-transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
 .form-control{
            width:auto;
            padding:5px;
            border-bottom:1px solid rgba(0,0,0,.2);
        }
}

 @media (max-width: 600px) {
         .mycard{
            width:100%;
            background-color:#fff;
            margin:auto;
            border: none;
        }
         body {
               padding-top: 0;
               padding-bottom: 0;
               background-color: #ffffff;
        }
 }