﻿body 
{
    margin-left:5px;
}

img
{
    border-style: groove;
    border-width : 3;
    border-color : Gray;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
   
  .redb {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  padding: 2px 4px;
  border: 2px solid #018dc4;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal 20px/normal "Times New Roman", Times, serif;
  color: rgba(255,255,255,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #d31f0e;
  -webkit-box-shadow: 0 0 9px 4px rgba(0,0,0,0.5) inset, 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  box-shadow: 0 0 9px 4px rgba(0,0,0,0.5) inset, 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ;
  -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.5, 1);
  -moz-transition: all 300ms cubic-bezier(0.4, 0, 0.5, 1);
  -o-transition: all 300ms cubic-bezier(0.4, 0, 0.5, 1);
  transition: all 300ms cubic-bezier(0.4, 0, 0.5, 1);
}

        .he
        {
            text-decoration: underline;
            color: Purple;
            margin: 0;
            border: 0;
            font: calibri;
            font-size:2em;
            line-height: 3em;
            font-weight :bold;
        }
        
        .dt
        {
            font: calibri;
            font-size:1.5em;
            line-height: 2em;
            margin: 0;
            border: 0;  
            color:Black;
            background-color: White;
        }


.mydropdownlist1
{
    color: #fff;
    font-size: 15px;
    padding: 2px 5px;
    border-radius: 2px 6px;
    background-color: #1872A2;
    font-weight: bold;
    font-family: Calibri;
}

        .myb
        {
            box-shadow: 3px 4px 0px 0px #1564ad;
            background: linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
            background-color: #79bbff;
            border-radius: 2px;
            border: 1px solid #337bc4;
            display: inline-block;
            cursor: pointer;
            color: #ffffff;
            font-family: Arial;
            font-size: 17px;
            font-weight: bold;
            padding: 5px 10px;
            text-decoration: none;
            text-shadow: 0px 1px 0px #528ecc;
        }
        .myb:hover
        {
            background: linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
            background-color: #378de5;
             text-decoration:underline;
        }
        .grayb
        {
            -moz-box-shadow: 3px 4px 0px 0px #899599;
            -webkit-box-shadow: 3px 4px 0px 0px #899599;
            box-shadow: 3px 4px 0px 0px #899599;
            background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #bab1ba) );
            background: -moz-linear-gradient( center top, #ededed 5%, #bab1ba 100% );
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba');
            background-color: #ededed;
            -webkit-border-top-left-radius: 15px;
            -moz-border-radius-topleft: 15px;
            border-top-left-radius: 15px;
            -webkit-border-top-right-radius: 15px;
            -moz-border-radius-topright: 15px;
            border-top-right-radius: 15px;
            -webkit-border-bottom-right-radius: 15px;
            -moz-border-radius-bottomright: 15px;
            border-bottom-right-radius: 15px;
            -webkit-border-bottom-left-radius: 15px;
            -moz-border-radius-bottomleft: 15px;
            border-bottom-left-radius: 15px;
            text-indent: 0;
            border: 1px solid #d6bcd6;
            display: inline-block;
            color: #3a8a9e;
            font-family: arial;
            font-size: 15px;
            font-weight: bold;
            font-style: normal;
            height: 33px;
            line-height: 33px;
            width: 74px;
            text-decoration: none;
            text-align: center;
            text-shadow: 0px 1px 0px #e1e2ed;
        }
        .grayb:hover
        {
            background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bab1ba), color-stop(1, #ededed) );
            background: -moz-linear-gradient( center top, #bab1ba 5%, #ededed 100% );
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bab1ba', endColorstr='#ededed');
            background-color: #bab1ba;
        }
        .grayb:active
        {
            position: relative;
            top: 1px;
        }
        
  .amber-panel {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 2px;
  overflow: hidden;
  border: none;
  font-family :"Calibri";
  font-size:2em;
  font-weight:bold;
  color :Gray;
  text-align: center;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  background: -webkit-linear-gradient(-90deg, rgba(252,234,187,1) 0, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%), rgba(234,197,93,1);
  background: -moz-linear-gradient(180deg, rgba(252,234,187,1) 0, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%), rgba(234,197,93,1);
  background: linear-gradient(180deg, rgba(252,234,187,1) 0, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%), rgba(234,197,93,1);
  background-position: 5% 5%;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: auto auto;
  background-size: auto auto;
  -webkit-box-shadow: 4px 4px 6px 1px rgba(0,0,0,0.4) ;
  box-shadow: 4px 4px 6px 1px rgba(0,0,0,0.4) ;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
}

.panelc th {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 80%;
  padding: 20px;
  overflow: hidden;
  border: none;
  font: normal 16px/1 "Calibri", Times, serif;
  color: rgba(255,255,255,1);
  text-align: center;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  background: -webkit-linear-gradient(90deg, rgba(174,199,226,1) 0, rgba(174,199,226,1) 6%, rgba(86,168,239,1) 17%, rgba(58,132,195,1) 29%, rgba(97,153,199,1) 50%, rgba(65,154,214,1) 59%, rgba(58,139,194,1) 70%, rgba(75,184,240,1) 80%, rgba(192,209,229,1) 93%, rgba(192,209,229,1) 100%);
  background: -moz-linear-gradient(0deg, rgba(174,199,226,1) 0, rgba(174,199,226,1) 6%, rgba(86,168,239,1) 17%, rgba(58,132,195,1) 29%, rgba(97,153,199,1) 50%, rgba(65,154,214,1) 59%, rgba(58,139,194,1) 70%, rgba(75,184,240,1) 80%, rgba(192,209,229,1) 93%, rgba(192,209,229,1) 100%);
  background: linear-gradient(0deg, rgba(174,199,226,1) 0, rgba(174,199,226,1) 6%, rgba(86,168,239,1) 17%, rgba(58,132,195,1) 29%, rgba(97,153,199,1) 50%, rgba(65,154,214,1) 59%, rgba(58,139,194,1) 70%, rgba(75,184,240,1) 80%, rgba(192,209,229,1) 93%, rgba(192,209,229,1) 100%);
  background-position: 50% 50%;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: auto auto;
  background-size: auto auto;
  -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ;
  box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
  position: sticky;
  top:0;
}

        .sub_header_css
        {         
            /* From https://css.glass */
            background: rgba(106, 101, 196, 0.23);
            border-radius: 16px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(4.8px);
            -webkit-backdrop-filter: blur(4.8px);
            border: 1px solid rgba(106, 101, 196, 0.3);  
            text-align :center; 
            height: 35px;
            width : 80%;     
            font-family: Arial, Helvetica, sans-serif;
            font-size : 1.2em;
            font : Arial;
            vertical-align:middle;
        }
 
 .header_css {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 80%;
  padding: 20px;
  overflow: hidden;
  border: none;
  font: normal 16px/1 "Calibri", Times, serif;
  color: rgba(255,255,255,1);
  text-align: center;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  background: -webkit-linear-gradient(90deg, rgba(174,199,226,1) 0, rgba(174,199,226,1) 6%, rgba(86,168,239,1) 17%, rgba(58,132,195,1) 29%, rgba(97,153,199,1) 50%, rgba(65,154,214,1) 59%, rgba(58,139,194,1) 70%, rgba(75,184,240,1) 80%, rgba(192,209,229,1) 93%, rgba(192,209,229,1) 100%);
  background: -moz-linear-gradient(0deg, rgba(174,199,226,1) 0, rgba(174,199,226,1) 6%, rgba(86,168,239,1) 17%, rgba(58,132,195,1) 29%, rgba(97,153,199,1) 50%, rgba(65,154,214,1) 59%, rgba(58,139,194,1) 70%, rgba(75,184,240,1) 80%, rgba(192,209,229,1) 93%, rgba(192,209,229,1) 100%);
  background: linear-gradient(0deg, rgba(174,199,226,1) 0, rgba(174,199,226,1) 6%, rgba(86,168,239,1) 17%, rgba(58,132,195,1) 29%, rgba(97,153,199,1) 50%, rgba(65,154,214,1) 59%, rgba(58,139,194,1) 70%, rgba(75,184,240,1) 80%, rgba(192,209,229,1) 93%, rgba(192,209,229,1) 100%);
  background-position: 50% 50%;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: auto auto;
  background-size: auto auto;
  -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ;
  box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
  position: sticky;
  top:0;
}
 
         .flip-horizontal-bottom {
	-webkit-animation: flip-horizontal-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: flip-horizontal-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
 
 @-webkit-keyframes flip-horizontal-bottom {
  0% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
}
@keyframes flip-horizontal-bottom {
  0% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
}
