/* Accordion */
.accordionHeader { border: 1px solid #2F4F4F; color: white;background-color: #2E4d7B;font-weight: bold;padding: 5px;margin-top: 5px;}
.accordionHeader:hover {background-color: #6495ED;cursor: pointer;}
.accordionHeaderSelected {border: 1px solid #2F4F4F;color: white;background-color: black;font-weight: bold;padding: 5px; margin-top: 5px;cursor: pointer;}
.accordionContent {background-color: #F7F7F7; border: 1px dashed #2F4F4F; border-top: none; padding: 5px; Padding-top: 10px;}

/*Modal Popup*/
.modalBackground {z-index: 800;background-color: rgb(128,128,128);background-color: rgba(128,128,128,0.5) }
.modalPopup {background-color: #ffffdd;	border-width: 2px;border-style: solid;border-color: Gray;padding: 2px;width: auto }

.hide { visibility: hidden; }
.unhide { visibility: visible; }
.classError { background-color: Red; color: White;}
.classResetError { background-color: White; color: Black;}

.grayborder {border:1px solid gray}

/*Icon Button*/
.iconbutton {border:none;cursor:pointer;}
.iconbutton:hover {background-color: rgb(200,200,200);background-color:rgba(200,200,200,0.4);}
.iconbutton:active {background-color:darkgrey;transform:scale(0.92);}

@media screen and (min-width:768px) {
/* Desktop */
.imgbutton { color: #E5322C; border:1px solid transparent; border-radius: 8px; padding: 3px;cursor:pointer}
.imgbutton:hover {border:1px solid #E5322C;background-color: rgb(200,200,200);background-color: rgba(200,200,200,0.4); color: black;}
.imgbutton:active {background-color: darkgrey;transform: scale(0.92);}
.imgbuttondisabled { background-image:none; color:gray; border:1px solid lightgray; padding: 1px; border-radius: 8px; }
}

@media screen and (max-width:767px) {
/* Mobile */
.imgbutton { color: #E5322C; border:1px solid gray; border-radius: 8px; padding: 4px;cursor:pointer}
.imgbutton:hover {border:1px solid #E5322C;background-color: rgb(200,200,200);background-color: rgba(200,200,200,0.4); color: black;}
.imgbutton:active {background-color: darkgrey;transform: scale(0.92);}
.imgbuttondisabled { background-image:none; color:gray; border:1px solid lightgray; padding: 1px; border-radius: 8px; }
}

input[type="image"]:focus {outline:none}

.round_corners { border: 1px solid gray; border-radius:6px }

/* Shadow Box */
.round_shadowbox { 
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; 
    border: 1px solid gray; border-radius: 6px }
.shadowbox {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    border: 1px solid gray;
}

/*Textbox Watermark*/
.unwatermarked { height:18px; width:148px; }
.watermarked {padding:2px 0 0 2px;border:1px solid #BEBEBE;background-color:#F0F8FF;color:grey;font-style:italic}

/* AVATAR Load*/
.imageload {text-decoration:none; border: 1px black solid; cursor: default }
.imageload:hover {filter: alpha(opacity=40); opacity: 0.4; cursor:pointer }

/* NumPad Control*/
@media screen and (min-width:768px) {
    /*desktop*/
    .numpadouterbox {width:350px;height:250px;background-color:transparent;}
    .numpadextrainfo {position:relative;margin: 6px auto auto auto;padding:12px; text-align:center;border:1px solid gray;background-color:white;width:350px;}
    .numpadbox {position: relative;margin: auto;background-color: white;width:154px;height:200px;font-size:small;}
    .titlecontainer {position:relative;height:22px;}
    .numpadtitle {position:absolute;margin-left:2px;margin-top:4px;width:150px;}
    .colresult {border: 1px solid black;vertical-align: middle;text-align:center;width: 148px;height: 22px;margin: 0 2px;}
    .pintext {border:none;text-align:center;position:absolute;top:24px;left:4px;width: 140px;font-size: medium;}
    .closepad {cursor: pointer;position: absolute;top:0;right: 1px;}
    .showpass {z-index: 400;cursor: pointer;position: absolute;top:22px;right:3px;}
    .numpadcol { width: 32px;height:32px;border:1px solid black;text-align:center}
    .numpadenter {width: 32px;height:64px;border:1px solid black;text-align:center}
    .sendcontainer {position: relative;width:32px;height:64px;}
    .crsymbol {position: absolute;top:20px;left:8px;font-size:x-large;}
    .numpadcol:hover, 
    .numpadenter:hover {background-color: lightskyblue;border:1px solid blue;cursor: pointer;}
    .numpadcol:active, 
    .numpadenter:active {background-color: yellow;border:1px solid blue}
    .sendpinimage {position: absolute;top: 0;left: 0;width:32px;height:48px;}
}
@media screen and (max-width:767px) {
    /*mobile*/
    .numpadouterbox {width:300px;height:250px;background-color:transparent;}
    .numpadextrainfo {position:relative;margin: 6px auto auto auto;padding:12px; text-align:center;border:1px solid gray;background-color:white;width:250px;}
    .numpadbox {position: relative;margin: auto;background-color: white;width: 220px;height: 264px;font-size:medium}
    .colresult {font-size:medium;border: 1px solid black;vertical-align: middle;text-align: center; margin: 1px 2px;width: 214px;height: 24px;}
    .pintext {border: none;text-align: center;position: absolute;top: 22px;left: 4px;width: 208px;font-size:medium;}
    .closepad {cursor: pointer;position: absolute;top: 0;right: 4px;}
    .showpass {z-index: 400;cursor: pointer;position: absolute;top: 19px;right: 5px;visibility:hidden}
    .numpadcol {width: 48px;height: 48px;border: 1px solid black;text-align: center}
    .numpadenter {width: 48px;height: 96px;border: 1px solid black;text-align: center}
    .sendcontainer {position: relative;width: 48px;height: 96px;}
    .crsymbol {position:absolute;top:34px;left:14px;font-size:x-large;}
    .numpadcol:hover,
    .numpadenter:hover {background-color: lightskyblue;border: 1px solid blue;cursor: pointer;}
    .numpadcol:active,
    .numpadenter:active {background-color: yellow;border: 1px solid blue}
    .sendpinimage {position: absolute;top: 0;left: 0;width:48px;height:96px;}
}