.gbutton {
}

.gbutton:hover{
    cursor:pointer;
}

.gbutton:active{
    transform: translate(2px, 2px);
}

.iceBlue:hover:enabled{
    border:thin solid black;
    cursor:pointer;
}

.iceBlue:active:enabled{
    transform: translate(2px, 2px);
}

.iceBlue:disabled {
    color:gray;
    background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); 
}

.iceBlue {
    font-family:OpenSans;
    font-size:11pt;
    margin:0;
    margin-left:10px;
    padding-left:40px;
    padding-right:40px;
    padding-top:6px;
    padding-bottom:6px;
    color: white;
    border:thin solid #2165B1;
    box-shadow: 3px 2px rgba(0, 0, 0, 0.15);
    min-width:100px;
    cursor:pointer;
    xxbackground:#226cbd;
    background: linear-gradient(to bottom, steelblue 0%,steelblue 100%);
}

.blueRoundedButton{ 
    min-width:100px;
    height:28px;
    font-family:OpenSans;
    font-size:10pt;
    color:white;
    font-weight:normal;
    border-radius:10pt;
    background:#123456;
    border:0px outset #cccccc;
}

/* #FFA500 */
.whiteRoundedButton{
    
    min-width:100px;
    height:28px;
    font-family:OpenSans;
    font-size:10pt;
    color:#123456;
    font-weight:normal;
    border-radius:10pt;
    background:white;
    border:1px solid #123456; 
}


.yyyblueRoundedButton{
    
    
    min-width:140px;
    height:35px;
    font-family:OpenSans;
    font-size:10pt;
    color:white;
    font-weight:normal;
    box-shadow:4px 4px 4px #90909060;
    border-radius:10pt;
    background:#4682B4;
    border:0px outset #cccccc;
 
}

.grayRoundedButton{
    
    min-width:140px;
    height:35px;
    font-family:OpenSans;
    font-size:10pt;
    color:black;
    font-weight:normal;
    box-shadow:4px 4px 4px #90909060;
    border-radius:10pt;
    background:#ccccccff;
    border:0px outset #cccccc;
 
}



.standardRoundSmallButton {
    font-family:OpenSans;
    font-size:10pt;
    margin:0;
    border-radius: 3px;
    margin-left:2px;
    padding-left:2px;
    padding-right:2px;
    padding-top:2px;
    padding-bottom:2px;
    color: black;
    border:thin solid darkgrey;
    xxbox-shadow: 2px 1px rgba(0, 0, 0, 0.10);
    min-width:90px;
    height:30px;
    cursor:pointer;
    xxbackground: linear-gradient(to bottom, #e2e2e2 0%,#fefefe 100%);
    background: whitesmoke;
}

.standardRoundSmallButton:hover:enabled{
    border:thin solid black;
    background: #FFFAFA;
    cursor:pointer;
}

.standardRoundSmallerButton {
    font-family:OpenSans;
    font-size:10pt;
    margin:0;
    border-radius: 3px;
    margin-left:2px;
    padding-left:2px;
    padding-right:2px;
    padding-top:2px;
    padding-bottom:2px;
    color: black;
    border:thin solid darkgrey;
    xxbox-shadow: 2px 1px rgba(0, 0, 0, 0.10);
    min-width:60px;
    height:30px;
    cursor:pointer;
    xxbackground: linear-gradient(to bottom, #e2e2e2 0%,#fefefe 100%);
    background: whitesmoke;
}

.standardRoundSmallerButton:hover:enabled{
    border:thin solid black;
    background: #FFFAFA;
    cursor:pointer;
}

.standardRoundButton {
    font-family:OpenSans;
    font-size:10.5pt;
    margin:0;
    border-radius: 4px;
    margin-left:4px;
    padding-left:4px;
    padding-right:4px;
    padding-top:4px;
    padding-bottom:4px;
    color: black;
    border:thin solid darkgrey;
    min-width:90px;
    z-index:9;
    cursor:pointer;
    background: whitesmoke;
    
    xheight:30px;
    xbox-shadow: 3px 2px rgba(0, 0, 0, 0.15);
    xbackground: linear-gradient(to bottom, #e2e2e2 0%,#fefefe 100%);
}

.standardRoundButton:hover:enabled{
    border: thin solid black;
    
    xbox-shadow: 0px 0px 3px 1px black;
}

.standardRoundButton:active:enabled{
    transform: translate(2px, 2px);
}

.standardRoundButton:disabled {
    color:gray;
    background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); 
}

.standardRoundButtonDiv {
    font-family:OpenSans;
    font-size:10pt;
    margin:0;
    border-radius: 6px;
    margin-left:5px;
    padding-left:5px;
    padding-right:5px;
    padding-top:5px;
    padding-bottom:5px;
    color: black;
    border:thin solid darkgray;
    box-shadow: 3px 2px rgba(0, 0, 0, 0.15);
    min-width:100px;
    cursor:pointer;
    background: linear-gradient(to bottom, #e2e2e2 0%,#fefefe 100%);
}

.standardRoundButtonDiv:hover:enabled{
    border:thin solid black;
    cursor:pointer;
}

.standardRoundButtonDiv:active:enabled{
    transform: translate(2px, 2px);
}

.standardRoundButtonDiv:disabled {
    color:gray;
    background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); 
}


.standardRoundButtonResize {
    font-family:OpenSans;
    color: black;
    background: whitesmoke;
    cursor:pointer;
    border:thin solid darkgrey;
    font-size:clamp(12px, 2vw, 14px);
    border-radius: 4px;
    margin-left:clamp(2px, 0.5vw, 4px);
    padding:clamp(2px, 0.5vw, 4px);
    min-width:clamp(40px, 10vw, 60px);
    xheight:clamp(20px, 5vw, 30px);
}


.btnIconAndText {
  background: linear-gradient(to bottom, #e2e2e2 0%,#fefefe 100%);
  border: none; /* Remove borders */
  color: black; /* White text */
  padding: 12px 16px; /* Some padding */
  font-size: 13px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
  border:thin solid darkgray;
  margin:0;
  border-radius: 6px;
  margin-left:5px;
  padding-left:5px;
  padding-right:5px;
  padding-top:5px;
  padding-bottom:5px;
}

/* Darker background on mouse-over */
.btnIconAndText:hover {
  background: linear-gradient(to bottom, #e2e2e2 0%,#fefefe 100%);
}


.iceGray {
    font-family:OpenSans;
    font-size:11pt;
    margin:0;
    margin-left:10px;
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
    color: black;
    border:thin solid darkgray;
    box-shadow: 3px 2px rgba(0, 0, 0, 0.15);
    min-width:120px;
    cursor:pointer;
    background: linear-gradient(to bottom, #e2e2e2 0%,#fefefe 100%);
}

.iceGray:hover:enabled{
    border:thin solid darkgray;
    cursor:pointer;
}

.iceGray:active:enabled{
    transform: translate(2px, 2px);
}

.iceGray:disabled {
    color:gray;
    background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); 
}



.metalRoundButton {
    background: #ADA996;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996); 
    background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
    border: none;
    color: white;
    text-decoration: none;
    display: inline-block;
    margin:0;
    border-radius:16px;
    width:32px;
    height:32px;
    border:2px solid #ccc;
    outline: none;
}

.metalRoundButton:active {
    background: #ADA996;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);  
    background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996); 
    border: none;
    color: white;
    text-decoration: none;
    display: inline-block;
    margin:0;
    border-radius:16px;
    width:32px;
    height:32px;
    border:2px solid #ccc;
    outline: none;
    box-shadow: 0px 3px #ccc;
    transform: translateY(1px);
}

.metalButton {
    background: #ADA996;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
    background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996); 
    border: none;
    color: blue;
    text-decoration: none;
    display: inline-block;
    margin:0;
    border-radius:4px;
    min-width:70px;
    height:32px;
    border:2px solid #ccc;
    outline: none;
}

.metalButton:active {
    background: #ADA996;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);  
    background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996); 
    border: none;
    color: blue;
    text-decoration: none;
    display: inline-block;
    margin:0;
    border-radius:4px;
    min-width:70px;
    height:32px;
    border:2px solid #ccc;
    outline: none;
    box-shadow: 0px 3px #ccc;
    transform: translateY(2px);
}

.shinyMetal{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    margin:0;
    font-family: OpenSans;
    font-size:9.5pt;
    padding:5px;
    color:white;
    border:1px solid #36454f;
    border-radius:5px;
    display:inline-block;
    line-height: 24px;
    height:24px;
    background: rgb(170,170,170);
    background: linear-gradient(166deg, rgba(170,170,170,1) 0%, rgba(255,255,255,1) 50%, rgba(204,204,204,1) 100%);
}

.shinyMetal:active{
    transform: translate(2px, 2px);
}

.glossyBlue {
    cursor:pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    margin:5px;
    font-family: OpenSans;
    font-size:9.5pt;
    padding:5px 10px 5px 10px;
    color:white;
    border:1px solid #36454f;
    border-radius:5px;
    background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
}

.glossyBlue:hover:enabled{
    border:thin solid black;
    cursor:pointer;
}

.glossyBlue:active:enabled{
    transform: translate(2px, 2px);
}

.glossyBlue:disabled {
    color:darkgrey;
    background: linear-gradient(to bottom, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
}


.glossyRed{
    cursor:pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    margin:5px;
    font-family: OpenSans;
    font-size:9.5pt;
    padding:5px 10px 5px 10px;
    color:white;
    border:1px solid #36454f;
    border-radius:5px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f0b7a1+0,8c3310+50,752201+51,bf6e4e+100;Brown+Gloss */
    background: rgb(240,183,161); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(240,183,161,1) 0%, rgba(140,51,16,1) 50%, rgba(117,34,1,1) 51%, rgba(191,110,78,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=0 ); /* IE6-9 */
}

.glossyRed:active{
    transform: translate(2px, 2px);
}

.glossyClear{
    cursor:pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    margin:5px;
    font-family: OpenSans;
    font-size:9.5pt;
    padding:5px 10px 5px 10px;
    color:black;
    border:1px solid #36454f;
    border-radius:5px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f5f6f6+0,dbdce2+21,b8bac6+49,dddfe3+80,f5f6f6+100;Grey+Pipe */
    background: rgb(245,246,246); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
}

.glossyClear:active:enabled{
    transform: translate(2px, 2px);
}

.glossyClear:disabled{
    opacity:0.5;
    font-style:italic;
    color:black;
    cursor: none;
}

.iceBlue{
    cursor:pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    margin:5px;
    font-family: OpenSans,sans-serif;
    font-size:10pt;
    padding:5px 10px 5px 10px;
    color:white;
    xxborder:1px solid navy;
    border-radius:5px;
    
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4f85bb+0,4f85bb+100;Blue+3D+%239 */
    background: #456789; /* Old browsers */
    background: -moz-linear-gradient(top,  steelblue 0%, steelblue 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  steelblue 0%,steelblue 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  steelblue 0%,steelblue 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#456789', endColorstr='#456789',GradientType=0 ); /* IE6-9 */

}

.iceBlue:active:enabled{
    transform: translate(2px, 2px);
}

.iceBlue:disabled{
    opacity:0.6;
    color:black;
    font-style: italic;
    cursor: none;
}

.shinyMetal{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    margin:0;
    font-family: OpenSans;
    font-size:9.5pt;
    padding:5px;
    color:black;
    border:1px solid #36454f;
    border-radius:5px;
    background: rgb(170,170,170);
    background: linear-gradient(166deg, rgba(170,170,170,1) 0%, rgba(255,255,255,1) 50%, rgba(204,204,204,1) 100%);
}

.shinyMetal:active{
    transform: translate(2px, 2px);
}

.nbox1 {
        background: #456789;     
    }


#searchInput {
  background:#ffffff;
  background-image: url('resources/images/search_icon3.png');
  background-repeat: no-repeat;
  margin-left:0px;
  width: 100%;
  padding: 2px 0px 2px 25px;
  border: 1px solid #eee;
}
#unassignedUserSearchInput {
  background:#ffffff;
  background-image: url('resources/images/search_icon3.png');
  background-repeat: no-repeat;
  margin-left:0px;
  width: 100%;
  padding: 2px 0px 2px 25px;
  border: 1px solid #eee;
} 

#assetSearchInput {
  background:#ffffff;
  background-image: url('resources/images/search_icon3.png');
  background-repeat: no-repeat;
  margin-left:0px;
  width: 100%;
  padding: 2px 0px 2px 25px;
  border: 1px solid #eee;
} 

#unassignedAssetSearchInput {
  background:#ffffff;
  background-image: url('resources/images/search_icon3.png');
  background-repeat: no-repeat;
  margin-left:0px;
  width: 100%;
  padding: 2px 0px 2px 25px;
  border: 1px solid #eee;
} 

::-webkit-input-placeholder { /* Edge */
  padding-left: 20px;    
  color: gray;
}

:-ms-input-placeholder { /* Internet Explorer */
  padding-left: 20px;
  color: gray;
}

::placeholder {
  padding-left: 20px;
  color: gray;
}

.hovertext {
  position: relative;
  border-bottom: 1px dotted black;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 1;
  left: 0;
  top: 110%;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}

.greybutton1 {
    background: linear-gradient(to bottom, #cfcfcf 48%, #acacac 96%); 
    border: 2px outset #bbbbbb;
           
            color: black;         
            border-radius: 0px;
            display: inline-block;
            font-weight: Bold;
            cursor: pointer;
            text-align: center;
            
         }
         
.greybutton1:hover {
            background-color: #0000aabb;
            font-weight: Bold;
            border-width: 3px;
            border-color:#0000FF90;            
            color: blue;
         }
.greybutton1:active {
            background: linear-gradient(to bottom, #bfbfbf 48%, #aeaeae 96%); 
            box-shadow: 0 0px #000000;
            border-color:#0000FFFF;
            transform: translateX(-1px);
            transform: translateY(-1px);
         }
         
.roundedgreybutton {
    background: linear-gradient(to bottom, #cfcfcf 48%, #acacac 96%); 
    border: 2px outset #bbbbbb;
           
            color: black;         
            border-radius:2px;
            display: inline-block;
            font-weight: Bold;
            cursor: pointer;
            text-align: center;
            
         }
.roundedgreybutton:hover {
            background-color: #0000aabb;
            font-weight: Bold;
            border-width: 3px;
            border-color:#0000FF90;            
            color: blue;
         }
.roundedgreybutton:active {
            background: linear-gradient(to bottom, #bfbfbf 48%, #aeaeae 96%); 
            box-shadow: 0 0px #000000;
            border-color:#0000FFFF;
            transform: translateX(-1px);
            transform: translateY(-1px);
         }
         
.roundedgreybutton2 {
    background: linear-gradient(to bottom, #cfcfcf 48%, #acacac 96%); 
    border: 2px outset #bbbbbb;
           
            color: black;         
            border-radius:2px;
            display: inline-block;
            font-weight: Bold;
            cursor: pointer;
            text-align: center;
            
         }
.roundedgreybutton2:hover {
            background-color: #0000aabb;
            font-weight: Bold;
            border-width: 3px;
            border-color:#0000FF90;            
            color: blue;
         }
.roundedgreybutton2:active {
            background: linear-gradient(to bottom, #bfbfbf 48%, #aeaeae 96%); 
            box-shadow: 0 0px #000000;
            border-color:#0000FFFF;
            transform: translateX(-1px);
            transform: translateY(-1px);
         }         

.greybutton2 {
    background: linear-gradient(to bottom, #cfcfcf 48%, #acacac 96%); 
    border: 2px outset #bbbbbb;
           
            color: black;         
            border-radius: 2px;
            display: inline-block;
            font-weight: Bold;
            cursor: pointer;
            text-align: center;
            border: 4px solid white;
            margin:10px 10px 0px 10px;
            box-sizing: border-box;            
            
         }
.greybutton2:hover {
            background-color: #0000aabb;
            font-weight: Bold;
            border-width: 3px;
            border-color:#FFFF0070;            
            color: blue;
         }
.greybutton2:active {
            background: linear-gradient(to bottom, #bfbfbf 48%, #aeaeae 96%); 
            box-shadow: 0 0px #000000;
            border-color:#FF0000FF;
            transform: translateX(-1px);
            transform: translateY(-1px);
         }
         
         
             
.greybutton3 {
            background: linear-gradient(to bottom, #cfcfcf 48%, #acacac 96%); 
            border: 2px outset #bbbbbb;
            width:100%;
            height:12%;
            margin-top:1%;
            margin-left: 0%;        
            color: black;         
            border-radius: 0px;
            display: inline-block;
            font-size: 8px;
            font-weight: Bold;
            cursor: pointer;
            text-align: center;
            
         }
         
.greybutton3:hover {
            background-color: #0000aabb;
            font-weight: Bold;
            border-width: 3px;
            border-color:#FFFF0070;            
            color: blue;
         }
         
.greybutton3:active {
            background: linear-gradient(to bottom, #bfbfbf 48%, #aeaeae 96%); 
            box-shadow: 0 0px #000000;
            border-color:#FF0000FF;
            transform: translateX(-1px);
            transform: translateY(-1px);
         }    
         
.greybutton4 {
    background: linear-gradient(to bottom, #cfcfcf 48%, #acacac 96%); 
    border: 2px outset #bbbbbb;
           
            color: black;         
            border-radius: 20px;
            display: inline-block;
            font-weight: Bold;
            cursor: pointer;
            text-align: center;
            border: 4px solid white;
            margin:10px 10px 0px 10px;
            box-sizing: border-box;            
            
         }
.greybutton4:hover {
            background-color: #0000aabb;
            font-weight: Bold;
            border-width: 3px;
            border-color:#FFFF0070;            
            color: blue;
         }
.greybutton4:active {
            background: linear-gradient(to bottom, #bfbfbf 48%, #aeaeae 96%); 
            box-shadow: 0 0px #000000;
            border-color:#FF0000FF;
            transform: translateX(-1px);
            transform: translateY(-1px);
         }
         
.banner_prop {
    background: linear-gradient(to bottom, #cfcfcf 48%, #acacac 96%); 
    border: 2px outset #bbbbbb;
           
            color: black;         
            border-radius: 20px;
            display: inline-block;
            font-weight: Bold;
            cursor: pointer;
            text-align: center;
            border: 4px solid white;
            margin:10px 10px 0px 10px;
            box-sizing: border-box;            
            
         }         
         
.yellowhover{
             color: white;   
         }          
.yellowhover:hover{
             color: #FFFF00;   
         } 
 
.dropbtn {
  background: #456789;
  border: 2px outset #cccccc;
  color: white;
  padding: 9px;
  font-family: "arial", consolas;font-size:8pt;
  cursor: pointer;
  overflow:auto;
}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  font-family: "arial", consolas;font-size:0.95em;  
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  ont-size: 8pt;
  font-family: "arial", consolas;font-size:0.95em;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #0079BF30}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #0000FF;
}

.btn-group button { 
  border: 0px outset #cccccc;
  background-color: #cccccc;
  color: blue; /* White text */
  padding: 10px 24px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  width: 98%; /* Set a width if needed */
  font-family: "arial", consolas;font-size:8pt;
  text-align: left;
  display: block; /* Make the buttons appear below each other */
}

.btn-group button:not(:last-child) {
  border-bottom: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #0079BF30;
}

.roundboarder {
  border-radius: 12px;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;  
  
}

.buttonBlue {
  background-color: #008CBA;
  min-width:100px;
  box-shadow:4px 4px 4px #90909060;
  border-radius:10pt;
  border: none;
  color: white;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  cursor: pointer;
}

.buttonBlue:hover {
  background-color: #778899;
  color: white;
}

.buttonGreen {
  background-color: #4CAF50;
  min-width:100px;
  box-shadow:4px 4px 4px #90909060;
  border-radius:10pt;
  border: none;
  color: white;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  cursor: pointer;
}

.buttonGreen:hover {
  background-color: #778899;
  color: white;
}

.buttonDarkBlue {
  background-color: #456789;
  min-width:100px;
  box-shadow:4px 4px 4px #90909060;
  border-radius:10pt;
  border: none;
  color: white;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  cursor: pointer;
}

.buttonDarkBlue:hover {
  background-color: #778899;
  color: white;
}

.buttonSlateGray {
  background-color: #708090;
  min-width:100px;
  box-shadow:4px 4px 4px #90909060;
  border-radius:10pt;
  border: none;
  color: white;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  cursor: pointer;
}

.buttonSlateGray:hover {
  background-color: #778899;
  color: white;
}

.buttonGray {
  background-color: gray;
  min-width:100px;
  box-shadow:4px 4px 4px #90909060;
  border-radius:10pt;
  border: none;
  color: white;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  cursor: pointer;
}

.buttonGray:hover {
  background-color: #778899;
  color: white;
}

.buttonRed {
  background-color: #f44336;
  min-width:100px;
  box-shadow:4px 4px 4px #90909060;
  border-radius:10pt;
  border: none;
  color: white;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  cursor: pointer;
}

.buttonRed:hover {
  background-color: #778899;
  color: white;
}

.buttonTeal {
  background-color: #008080;
  min-width:100px;
  box-shadow:4px 4px 4px #90909060;
  border-radius:10pt;
  border: none;
  color: white;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  cursor: pointer;
}

.buttonTeal:hover {
  background-color: #778899;
  color: white;
}

.gobtn {
  background-color: #4682B4;
  color: white;
  border: none;
  width: 100%;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
 box-shadow: 3px 3px 3px #90909050;
 
}

.gobtn:hover {
  background-color: #87CEEB;
}

.bkbtn {
  background-color: #bbbbbb;
  color: black;
  border: none;
  width: 100%;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
 box-shadow: 3px 3px 3px #90909050;
 
}

.bkbtn:hover {
  background-color: #87CEEB;
}