@font-face {
    font-family: 'DBOzoneX';
    src: url("../../../v1/font/DBOzoneXv3.2.ttf");
}

html, body {
    height: 100%;
}

input[type=text].form-control, input[type=password].form-control {
    font-family: DBOzoneX;
    font-size: 17.5px;
    border-radius: 0;
    border: none;
    border-bottom: 0.5px solid #9F9F9F ;
    padding: 6px 10px;
    font-weight: 500;
}

input[type=text]:hover, input[type=password]:hover,
input[type=text]:focus, input[type=password]:focus {
    font-family: DBOzoneX;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #005da6;
    box-shadow: none;
}

input[type=submit] {
    font-style: bold;
    font-weight: 600;
    font-size: 13px;
}

.font-weight-normal {
    font-weight: 400!important;
}

.btn {
    border-radius: 0;
}

.button.primary {
    color: #fff;
    border-color: #0067b8;
    background-color: #0067b8;
}

input[type=submit].button.primary:hover, input[type=submit].button.primary:focus, 
input[type=submit].button.primary:active{
    color: #fff;
    border-color: #005da6;
    background-color: #005da6;
}

.form-auth {
    padding: 44px;
    background-color: #FFFF;
    min-width: 320px;
    max-width: 440px;
    width: calc(100% - 40px);
    color: #000000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    min-height: 338px;
}

.form-auth .Orglogo {
    height: 32px;
    width: auto;
}

.auth-form-group {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
}
  
#app {
    font-weight: 700;
    font-style: bold;
    font-size: 18px;
    color: #00aeef;
    cursor: pointer;
}

#app:hover {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

.form-auth .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 1.25em;
    letter-spacing: 0.02em;
}

.tooltip {
    font-family: 'DBOzoneX';
    font-size: 16px;
}

@media (max-width:600px) {
    body {
        background-color: #fff !important;
        box-shadow: none!important;
        background: url('../../v1/images/login-form-bg.png');
        /* background: url('../../v1/images/mobile-chinese-new-year-2024.png'); เทศกาล */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .form-auth {
        background: rgba(255, 255, 255, 0.7)!important;
        -webkit-box-shadow: none!important;
        -moz-box-shadow: none!important;
        box-shadow: none!important;
        border: none !important;
        border-style: none !important;
        padding: 24px !important;
        width: 100% !important;
    }
    /******** Footer style ********/
    .footer {
        background-color: rgba(0, 0, 0, 0.6);
        bottom: 0px;
        box-sizing: border-box;
        clear: both;
        color: rgb(38, 38, 38);
        direction: ltr;
        display: block;
        filter: none;
        font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", Roboto, Ebrima, "Nirmala UI", Gadugi, "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", Tunga, "Lao UI", Raavi, "Iskoola Pota", Latha, Leelawadee, "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
        font-size: 15px;
        font-weight: normal;
        height: 28px;
        line-height: 20px;
        overflow-x: visible;
        overflow-y: visible;
        position: fixed;
        text-align: left;
        text-size-adjust: 100%;
        width: 100%;
        letter-spacing: 0.06em;
    }

    #footerLinks {
        padding-left: 10px;
        padding-right: 10px;
    }

    .floatReverse {
        float: right;
    }

    .pageLink {
        padding-left: 5px;
        padding-right: 5px;
        box-sizing: border-box;
        color: rgb(255, 255, 255);
        direction: ltr;
        display: inline-block;
        font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", Roboto, Ebrima, "Nirmala UI", Gadugi, "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", Tunga, "Lao UI", Raavi, "Iskoola Pota", Latha, Leelawadee, "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
        font-size: 12px;
        font-weight: normal;
        height: 28px;
        line-height: 28px;
        margin-left: 0px;
        margin-right: 0px;
        text-align: left;
        text-size-adjust: 100%;
        text-decoration: none;
    }

    .pageLink:hover, .pageLink:focus {
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }
    /******** Footer style ********/
}

@media (min-width:601px) {
    body {
        -ms-flex-align: center;
        -ms-flex-pack: center;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        color: #fff;
        background: linear-gradient(45deg,#2E3192 20%, #1c75bc 40%, #40c1ac 80% , #78be21 120%);
        background-image: url(../../v1/images/ms-bg.jpg); /*สำหรับเทศกาล*/
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    /******** Footer style ********/
    .footer {
        bottom: 0px;
        box-sizing: border-box;
        clear: both;
        color: rgb(38, 38, 38);
        direction: ltr;
        display: block;
        filter: none;
        font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", Roboto, Ebrima, "Nirmala UI", Gadugi, "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", Tunga, "Lao UI", Raavi, "Iskoola Pota", Latha, Leelawadee, "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
        font-size: 15px;
        font-weight: normal;
        height: 32px;
        line-height: 20px;
        overflow-x: visible;
        overflow-y: visible;
        position: fixed;
        text-align: left;
        text-size-adjust: 100%;
        width: 100%;
        letter-spacing: 0.1em;
    }

    #footerLinks {
        padding-left: 10px;
        padding-right: 10px;
    }

    .floatReverse {
        float: right;
    }

    .pageLink {
        padding-left: 5px;
        padding-right: 5px;
        box-sizing: border-box;
        color: rgb(0, 0, 0);
        direction: ltr;
        display: inline-block;
        font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", Roboto, Ebrima, "Nirmala UI", Gadugi, "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", Tunga, "Lao UI", Raavi, "Iskoola Pota", Latha, Leelawadee, "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
        font-size: 12px;
        font-weight: 700;
        height: 28px;
        line-height: 28px;
        margin-left: 0px;
        margin-right: 0px;
        text-align: left;
        text-size-adjust: 100%;
        text-decoration: none;
    }

    .pageLink:hover, .pageLink:focus {
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }
    /******** Footer style ********/
}