* {
    box-sizing: border-box;
    color: #003764;
}

@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 400;
    src: url(../Fonts/Prompt.woff2) format('woff2'), url(../Fonts/Prompt-Regular.ttf) format('truetype');
}

@font-face {
    font-family: inter;
    src: url(../Fonts/Kanit-Regular.ttf);
}

.noselect {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

[hidden] {
    display: none !important;
}

pre {
    background-color: transparent;
}

html,
body {
    font-family: inter !important;
}
a,
html,
body,
form {
    color: #003764 !important;
}

.loading-panel.opacity {
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=45)";
    /* IE 5-7 */
    filter: alpha(opacity=45);
    /* Netscape */
    -moz-opacity: 0.45;
    /* Safari 1.x */
    -khtml-opacity: 0.45;
    /* Good browsers */
    opacity: 0.45;
}

.breakall {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: none;
    -moz-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
}

.modal > .modal-card {
    margin: 0 0;
}

ko-dialog > .model,
ko-dialog > .modal > .modal-background {
    overflow: auto !important;
}

ko-dialog > .modal > .modal-card {
    max-height: calc(100% - 40px) !important;
}

.login-info {
    color: #003764;
}
#main > .middle-align > form > img {
    width: 400px;
}

#footer {
    margin: 0 auto;
    border-top: 1px solid #ddd;
    background-color: #fff;
    vertical-align: middle;
    text-align: center;
    padding: 0px;
    width:100%;
}
/* #appname {
    color: #ddd !important;
    position: absolute;
    font: small-caption;
    
} */
/* #appname1{
    color: #003764 !important;
}  */
img {
    max-width: 80%;
    align-self: center;
    /* border-bottom: dashed;  */
}
#appname {
    color: #003764 !important;
     /* position: absolute;  */
    font: small-caption;
    padding: 0px;
    align-self: center;
}
div#appname.column {
    color: #bfc7ce !important;
     position: absolute; 
    font: small-caption;
    padding: 0px;
    align-self: center;
}

#header-leftmenu {
    background-image: url('../images/Rama9/banner/banner.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* box-shadow: 0px 2px 4px #ccc; */
    min-height: 85px;
}
.box-logo {
    width: 180px !important;
    padding-left: 0;
    padding-right: 0;
}
.logo-header {
    background-image: url('../images/Logo.png');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: -5px;
    left: 60px;
    height: 90px;
    width: 200px;
}
#appname {
    font-weight: bolder;
    color: black;
    padding-right: 0;
    display:none;
}

/* autocomplete */
/*the container must be positioned relative:*/
.autocomplete {
    position: relative;
    display: inline-block;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-top: none;
    z-index: 9;
    overflow: auto;
    overflow-x: hidden;
    border-radius:10px;
}

    .autocomplete-items div {
        padding: 5px;
        cursor: pointer;
        background-color: #fff;
        border-bottom: 1px solid #d4d4d4;
    }

        /*when hovering an item:*/
        .autocomplete-items div:hover {
            background-color: #e9e9e9;
        }

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}

.key-active {
    background-color: #e9e9e9 !important;
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}


.barColorMain {
    background-color:rgba(193,227,255,1) !important;
}

.primaryButtonColor {
    font-family: inter;
    background-color: rgba(35,128,231,1) !important;
    color: white;
}
.primaryButtonColor:hover {
    background-color:rgba(28,106,193,1) !important;
    color:#FFF
}

.secondaryButtonColor {
    font-family:inter;
    background-color: rgba(88,176,250,1) !important;
    color: white;
}
.secondaryButtonColor:hover {
    background-color: rgba(77,155,220,1) !important;
    color:#FFF
}

.primaryFontColor {
    color:rgba(12,43,74,1) !important;
}

.secondaryFontColor {
    color:rgba(255,255,255,1) !important;
}

@media(max-width: 576px) {

    #content-area {
        width:100% !important;
    }

}