/*@import url(/Content/notosanstc.css);*/

:root {
    --caeu-color: #2170b2;
    --caeu-color-dark: #18517F;
    --caeu-color-light: #5E93BF;
    --caeu-color-form-header: #BBE5F3;
    --yellow: #FFE263;
    --macau-gov-color: #009688;
    --macau-gov-color-dark: #00635A;
    --macau-gov-color-dark-2: #056326;
    --a-color: #ffffff;
    --a-color-dark: #302f7f;
    --header-height: 60px;
    --header-height-mobile: 50px;
    --header-height-mobile-lowrx: 44px;
    --footer-height: 66px;
    --footer-height-mobile: 50px;
    --footer-height-mobile-lowrx: 44px;
    --red: #F21D1D;
    --validation-red: #7F0005;
    --progress-bar-grey: #E0DFE0;
    --progress-bar-active: #5E93BF;
    --index-card-width: 600px;
    --card-radius-normal: 5px;
    --global-shadow: 3px 0px 3px 0px rgba(0,0,0,0.12), 3px 0px 9px rgba(0,0,0,0.24);
}

html {
    font-size: 15px;
    height: 100%;
    width: 100%;
}

@media screen and (max-width:480px) {
    html {
        font-size: 14px;
    }
}

a{
    color:#ffffff;
}

a:hover{
    color:var(--caeu-color-light);
}

.accordion-Index .card-header {
    text-align: left;
    border-bottom:solid;
    border-bottom-width:2px;
    border-bottom-color: var(--caeu-color-light);
}

.accordion-Index .card{
    border:none;
    margin:0px;
}

.accordion-Index a{
    font-size:1.1rem;
}

.alert{
    max-width:400px;
    margin: 0px auto 0px auto;
}

/*Body*/
body {
    background: linear-gradient(to right, #AAC4D5, #f9f9f9);
    padding-top: var( --header-height);
    /*font-family: 'Noto Sans TC', sans-serif;*/
    /*font-family: Arial,'Microsoft YaHei','黑體','宋體',sans-serif;*/
    font-family: "微軟正黑體", "Microsoft JhengHei", "Segoe UI Semibold", "Segoe UI", "Lucida Grande", Verdan;
}

@media screen and (max-width:480px) {
    body {
        padding-top: var(--header-height-mobile);
    }
}

@media screen and (max-width:321px) {
    body {
        padding-top: var(--header-height-mobile-lowrx);
    }
}
/*\Body*/

.btn {
    border: 0px !important;
    min-width: 90px;
    margin-right: 10px;
    margin-bottom:10px;
}

@media screen and (max-width:480px) {
    .btn {
        font-size: 1rem;
        max-width: 120px;
        padding: 5px 5px;
        margin-right: 7px;
        font-size:0.9rem;
    }
}

@media screen and (max-width:321px) {
    .btn {        
        padding: 5px 4px;
        font-size: 1rem;
    }
}

    .btn-link, .card-link {
        color: var(--a-color-dark);
    }

        .btn-link:hover, .card-link:hover {
            filter: brightness(60%);
        }

.btn-service-range {
    margin: 0px 0px 0px 20px;
    background-color: var(--macau-gov-color);
    padding: 1px 5px 1px 5px;
}

    .btn-service-range:hover {
        color: #ffffff;
    }

.btn-success, .btn-danger {
    color: #ffffff!important;
}
        .btn-danger{
            background-color:var(--validation-red);
            color:#ffffff!important;
        }

    .btn-success{
        background-color:var(--macau-gov-color);
    }

        .btn-success:hover, .btn-success:focus {
            background-color: var(--macau-gov-color);
            filter: brightness(120%);
        }

    .btn-edit {
        background-color: #FFD317;
    }
        .btn-edit:hover {
            background-color: var(--yellow);
        }

.btn-upload-delete {
    color: #000000;
    padding: 0px 10px 0px 0px;
    margin:0px 5px 0px 0px;
    font-size: 1.3rem;
    color:var(--caeu-color-dark);
    border-right-style:solid;
    border-right-width:1px;
    border-right-color:lightgray;

}


    @media screen and (max-width:480px) {
        .btn-upload-delete {
            padding: 0px 10px 0px 0px;
            font-size: 1.3rem;
        }
    }

.btn-upload-delete .dropdown-toggle{
    
}

.btn-details {
    background-color: #34CCE3;
}

        .btn-details:hover {
            background-color: #54E8FF;
        }

.btn-download {
    background-color: #BED95F;
}

    .btn-download:hover {
        background-color: #5FFAE5;
    }

.btn-new {
    box-shadow: var(--global-shadow);
    border-radius: 0px;
    color: #ffffff !important;
    background-color: var(--caeu-color-light);
    min-width: calc(var(--index-card-width)) !important;
    max-width: calc(var(--index-card-width)) !important;
    font-size: 1.1rem;
    margin: 15px auto 0px auto;
    border-bottom-width: 2px;
    border-bottom-color: var(--macau-gov-color-dark);
    border-radius: calc(var(--card-radius-normal));
}

    .btn-new:hover {
        background-color: var(--caeu-color);
    }

    .btn-new-disabled:hover {
        background-color: var(--caeu-color-light);
    }

        @media screen and (max-width:480px) {
            .btn-new {                
                min-width: 100%!important;
                font-size: 1.3rem;
            }
        }

        @media screen and (max-width:321px) {
            .btn-new {
                min-width: 100%!important;
                font-size: 1.2rem;
            }
        }

        .btn-new  label{
            padding:0px;
            margin:0px;
        }

        .btn-new svg{
            margin: 0px 5px 8px 0px;
        }

        @media screen and (max-width:321px){
            .btn-new svg {
                margin: 0px 5px 3px 0px;
            }
        }

.CaeuTecnicoCourseProfsGrp  {
    padding: 0px 0px 0px 1rem;
}

.CaeuTecnicoCourseProfsGrp  hr{
    margin:5px 0px 5px 0px;
    padding:0px;
}
    .CaeuTecnicoCourseProfsGrp #CourseRemark{
        margin: 5px 0px 10px 0px; 
    }

.caeu-policy {
    text-align: left;
    margin: 20px 20px 60px 20px;
}



/*Card*/
.card {
    text-align: left;
    margin: 0px;
    border-color: #AFD3E3;
    border-radius: calc(var(--card-radius-normal));
}

@media screen and (min-width:480px) {
    .card {
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px;
        margin-bottom: calc(var(--footer-height) + 10px);
    }
}

@media screen and (max-width:480px) {
    .card {
        /*margin-bottom: calc(var(--footer-height-mobile));*/
        border-radius: 0px;
    }
}

/*low rex mobile phone*/
@media screen and (max-width:321px) {
    .card {
        /*margin-bottom: calc(var(--footer-height-mobile-lowrx));*/
        border-radius: 0px;

    }
}

.card .formcard{
    margin:0;
    margin-bottom:1rem;
    padding:0.5rem;
}

.card-footer{
    padding-top:10px;
    padding-bottom:5px;
}

.card-header {
    text-align: center;
    color: #000000;
    border-top-left-radius: var(--card-radius-normal);
    border-top-right-radius: var(--card-radius-normal);
}

.card-index {
    padding: -1px;
    border-radius: var(--card-radius-normal);    
    margin: 10px auto 15px auto;
    border: solid;
    border-width: 1px;
    border-color: lightgray;
    max-width: 600px;
}

    @media screen and (min-width:480px) {
        .card-index{

        }
    }

@media screen and (max-width:480px) {
    .card-index {
        margin: 0px 3px 10px 3px;
    }
}

@media screen and (max-width:321px){
    .card-index {
        margin: 0px 1px 10px 1px;
    }
}

.card-index .col-form-label{
    color: var(--caeu-color);
}

.card-index .list-group-item {
    padding: 0rem 1.25rem;
}

.card-index  .form-group{
    margin-bottom:0rem;
}

.card-success{
    margin:5rem 3rem;
}

    .card-success > .card-check
    {
        padding:30px;
        color:var(--caeu-color);
    }

    .card-success > .card-body{
        text-align:center;
        padding: 0px 10px 5rem 10px;
    }

    .card-success h1{
        margin: 0px 0px 2rem 0px;
    }

    .card-upload-list {
        margin: 0 0 20px;
    }

    .card-processing {
        background-color: #BBE5F3 !important;
    }

.card-uploaded {
    background-color: #7EA6BF !important;
}

    .card-received {
        background-color: #3488AD !important;
    }

    .card-finished {
        background-color: #186D94 !important;
    }
/*\Card*/
/*Container*/
.container {
    max-width: 900px;
    padding: 10px 0px calc(var(--footer-height)) 0px;
    text-align: center;
}

    .container > .card {
        box-shadow: var(--global-shadow);
    }

@media screen and (max-width:480px) {
    .container {
        max-width: 100%;
        padding: 0px 0px calc(var(--footer-height-mobile)) 0px;
    }
}

/*low rex mobile phone*/
@media screen and (max-width:321px) {
    .container {
        max-width: 100%;
        padding: 0px 0px calc(var(--footer-height-mobile-lowrx)) 0px;
    }
}

.container-idx-pg {
    max-width: 800px;
}
/*\Container*/

/*Checkbox*/
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--caeu-color);    
}

/*\Checkbox*/

/*Validation message*/
.field-validation-error {
    color: var(--validation-red);
    font-size: 0.8rem;
}
/*\Validation message*/

/*Footer*/
.footer {
    background-color: var(--caeu-color);
    color: #ffffff;
    height: var(--footer-height);
    font-size: 0.7rem;
    box-shadow: var(--global-shadow);
}

@media screen and (max-width:480px) {
    .footer {
        font-size: 0.8rem;
        height: var(--footer-height-mobile);
        padding:0px;
    }
}

/*low rex mobile phone*/
@media screen and (max-width:321px) {
    .footer {
        padding-top: 0px;
        font-size: 0.7rem;
        height: var(--footer-height-mobile-lowrx);
    }
}

.footer div {
    width: 100%;
    text-align: center;
}
/*\Footer*/

/*Header*/
.header {
    background-color: var(--caeu-color);
    color: white;
    position: fixed;
    width: 100%;
    z-index: 1;
    font-size: 1rem;
    height: var( --header-height);
    box-shadow: var(--global-shadow);
}

    .header  .btn-account {
        padding: 10px;
        margin: 0px;
    }

        .header .bi-people-circle{
            width:1.5em;
            height:1.5em;
            color:#ffffff;
        }

    .header .navbar {
        padding: 0px;
        text-align: center;
    }

    .header .navbar-brand {
        text-align: center;
        margin: 0px auto 0px auto;
        padding: 4px 0px 4px 0px;
    }

    .header .navbar-toggler {
        border: none;
        margin: 0px;
        float: none;
    }

    .header .btn-group .dropdown-menu {
        border-radius: 0;
        border-width: 0;
    }

    .header #navbarToggleExternalContent {
        background-color: #164973 !important;
    }

    .header .nav-item{
        text-align:left;
    }

    .header .nav-link {
        color: white;
    }

    .header .divider {
        height: 1px;
        margin: 9px 0;
        overflow: hidden;
        background-color: var(--caeu-color);
    }

    .header .btn-Lang {
        color: var(--caeu-color);
        filter: brightness(250%);
        margin: 0px 10px 0px 0px;
    }

    .header .version {
        color: #D9D9D9;
        font-size: small;
    }

    /*mobile phone*/
    @media screen and (max-width:480px){
        .header {
            height: var( --header-height-mobile);
        }

            .header img {
                height: 40px;
            }

            .header  .btn-account {
                padding: 0px 5px 0px 0px;
                margin: 0px;
            }

            .header .bi-people-circle {
                width: 1.4em;
                height: 1.4em;
                color: #ffffff;
            }
    }

    /*low rex mobile phone*/
    @media screen and (max-width:321px) {
        .header {
            height: var( --header-height-mobile-lowrx);
        }
            .header  img{
                width:150px;
            }

            .header .btn-account {
                padding: 0px;
                margin: 0px;
            }

            .header .bi-people-circle {
                width: 1.2em;
                height: 1.2em;
                color: #ffffff;
            }
    }
/*\Header*/

hr {
    margin-top: 1.8rem;
    margin-bottom: 1.8rem;
}

/*上傳檔案list*/
.list-upload-delete{
    padding:9px 7px 9px 6px;
}

    .list-upload-delete .dropdown-menu {
        background-color: var(--yellow);
        border: none;
        border-bottom:solid;
        border-bottom-color:var(--validation-red);
        box-shadow:var(--global-shadow);
    }

    .list-upload-delete .dropdown-menu {
        text-align: center;
        border-radius:0px;
    }

        .list-upload-delete .dropdown-menu >a:hover {
            background-color: var(--yellow);
        }

    .my-form-group {
        border-radius: 5px;
        border: 1px solid #ced4da;
        margin: 0px 0px 1rem 0px;
        padding: 1rem;
    }

.modal {
    border: none;
    font-size: 1rem;
}

.modal-header{
    background-color:var(--caeu-color-light);
    padding: 20px;
    color: #ffffff;
}

#ca08Modal .modal-header {
    padding: 10px !important;
}


.modal-footer {
    justify-content: center;
}

.modal-body{
    text-align:center;
    min-height:150px;
    padding:40px; 
}

.modal-dialog h5 {
    margin: 0px 0px 10px 0px;
}

/*一戶通我的照片*/
.myphotolist{
    padding: 0px auto 0px auto;
    margin:0px auto 0px auto;
}

    .myphotolist .btn:not(:disabled):not(.disabled).focus.active  {
        border-radius:1px;
        background-color:var(--caeu-color-light);

    }

    .myphotolist .btn{
        min-width:256px;
        max-width:256px;
    }

    .myphotolist .card-body, .myphotolist .card-footer{
        text-align:center;
    }
/*\一戶通我的照片*/
    
/*步數*/
.progress {
    margin: 0 0 1rem 0;
    min-height: 1.5rem;
    height:50px;
}

.progress-bar {
    background-color: var(--progress-bar-grey);
    color: var(--caeu-color);
    padding:0px;
}

.progress > .final {
    background-color: #e4adcc;
    color: #ffffff;
}

        .progress > .bg-success {
            background-color: var(--progress-bar-active) !important;
            color: #ffffff;
            font-size:1.2rem;
            min-width:30%!important;
        }
/*\步數*/

/*需要的附件*/
.requirements{

}

    .requirements li .badge {
        color: var(--caeu-color);
        padding: 3px;
        font-size:1em;
        font-weight:100;
        text-decoration:underline;
    }

    .requirements li .badge:hover {
        color: var(--caeu-color-light);
    }
/*\需要的附件*/

/*screen center
    視窗中央
*/
.screen-center {
}

@media screen and (min-width:800px) {
    .screen-center {
        position: absolute;
        top: 40%;
        left: 50%;
        min-width: 600px;
        transform: translate(-50%, -40%);
    }
}

/*\screen center*/
.star{
    color:var(--red);
    font-size:1rem;
}

.steps{
    width:100%;
    margin:0px 0px 10px 0px;
    font-size:1rem;
    text-align:center;
}

@media screen and (max-width:480px) {
    .steps{
        font-size:0.7rem;
    }
}

.steps .bg-success {
    background-color: var(--progress-bar-active) !important;
    color: #ffffff;
}

.steps .final {
    background-color: #e4adcc;
    color: #ffffff;
}

.steps-item {
    background-color: var(--progress-bar-grey);
    color: var(--caeu-color);
    padding: 0px;
    padding: 5px 3px 5px 0px;
}

.title-index
{
    padding:5px 10px;
    margin:0px;
}