.w100{
    width: 100%;
}
.w80{
    width: 80%;
}
.w60p{
    width: 60px;
}
.w110p{
    width: 110px;
}
.w100p{
    width: 100px;
}


.grid-cont .minwidth{
    width: 100%;
}
.grid-cont .WebTable tbody tr:nth-child(even){
    background-color: #ffffff;
}

.grid-cont .WebTable tbody tr{
    border-bottom: 1px solid #ccc;
}

.grid-cont .WebTable.addborder thead tr th{
    border: 0.5px solid #cdcdcd;
}
@media screen and (max-width: 1599px){
    .grid-cont .WebTable.dataupdate{
        width: 100%;
    }
}
@media screen and (max-width: 767px){
    .grid-cont .WebTable.dataupdate{
        width: 800px;
    }
}
/* 下方提示訊息 */
.warning{
    text-align: center;
    margin-top:50px ;
    font-weight: 900;
    line-height: 35px;
}
.warning .saved{color: #1e8d81;}
.warning .error{color:red;}

/* 上方按鈕群(切換頁)框架 */
.page-select-group{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: auto;
    margin-bottom: 40px;
    width: 1200px;
}
.page-select-group .page-select-btn{
    width: 220px;
    height: 80px;
    font-weight: 900;
    transition: 0.3s;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    position: relative;
}
/* 歐盟用 */
.page-select-group.EU{
    width: 1000px;
}
.page-select-group.EU .page-select-btn{
    width: 270px;
}


.page-select-group .page-select-btn:hover{
    background-color: #4D92B8;
    color: white;
}
.page-select-group .page-select-btn::after{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 12.5px 0 12.5px;
    border-color: #4D92B8 transparent transparent transparent;
    bottom: -25px;
    display: none;
}
.page-select-group .page-select-btn.active{
    background-color: #4D92B8;
    color: white;
}
.page-select-group .page-select-btn.active::after{
    display: block;
}
@media screen and (max-width: 1299px){
    .page-select-group,
    .page-select-group.EU{
        width: 100%;
    }
    .page-select-group .page-select-btn{
        width: 18%;
    }

}



/* --- 頁面標題框架--- */
.pagetitle{
    text-align: center;
    position: relative;
}
.pagetitle .titletxt{
    font-size: 18px;
    font-weight: 900;
    z-index: 999;
    position: inherit;
    background-color: white;
    display: inline-block;
    padding: 0 25px;
}
.pagetitle .titleline{
    position: absolute;
    height: 1px;
    background-color: #e5e5e5;
    width: 100%;
    top: 18px;
}
.note{
    margin: 20px 0;
    font-weight: 900;
    color: red;
    text-align: center;
    font-size: 14px;
}


/* 頁籤框架 */
.tapsGroup{
    display: flex;
    align-items: center;
    border-bottom: 2px solid #4D92B8;
    margin-bottom: 30px;
}
.tapsGroup .tapsbtn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 230px;
    height: 55px;
    background-color: #F8F8F8;
    border: 1px solid #D9D9D9;
    border-radius: 10px 10px 0 0 ;
    transition: 0.3s;
    position: relative;
    font-weight: 900;
}
.tapsGroup .tapsbtn:hover{
    background-color: #4D92B8;
    border-color:#4D92B8 ;
    color: white;
}
.tapsGroup .tapsbtn::after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 15px;
    border-color: #4D92B8 transparent transparent transparent;
    bottom: -17px;
    display: none;
}
.tapsGroup .tapsbtn.active{
    background-color:#4D92B8 ;
    border-color:#4D92B8 ;
    color: white;
}
.tapsGroup .tapsbtn.active::after{
    display:block ;
}


/* 密碼切換顯示(眼) */
.eye{
    position: relative;
        left: -35px;
        cursor: pointer;
        top: 7px;
        font-size: 18px;
    }
.eye:before{
    position: absolute;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;           
    content: "\f06e";
}
.eye.noshow:before{
    content: "\f070";
}

/* 內容頁 內容欄位>虛線條列顯示框架 */
.cont-listblock{
    width: 100%;
}
.cont-listblock .listblock-line{
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed #ECECEC;
}
.cont-listblock .listblock-line .listblock-line-title{
    font-weight: 900;
    width: 80px;
}

/* 船舶管理--------------------------------------------*/
/* 航程管理*/
.tag-table{
    background-color: #EEEEEE;
    box-shadow: none;
    padding: 0px 15px;
}
.dashlistblock{
    padding: 15px;
    border-radius: 5px;
    border: 2px dashed #4D92B8;
    margin: 20px 0;
}
.dashlistblock .dash-list{
    padding: 5px 0;
    border-bottom: 1px solid #ECECEC;
    display: flex;
    align-items: center;
}
.dashlistblock .dash-list .dash-list-title{
    display: flex;
    align-items: center;
    font-weight: 900;
    width: 120px;
}
.dashlistblock .dash-list .dash-list-title i{
    color: #4D92B8;
    font-size: 10px;
    margin-right: 5px;
}
.dashlistblock .dash-list .dash-list-Dist,
.dashlistblock .dash-list .dash-list-Fuel,
.dashlistblock .dash-list .dash-list-CO2{
    font-weight: 900;
}
.cont-listblock.Voyage .listblock-line .listblock-line-title{
    width: 123px;
}

/* 符合性聲明 */
.Statement_input{
    display: flex;
    align-items: flex-start;
    margin-top: 10px;
    width: 100%;
}
.Statement_input input{
    width:100% ;
}
.Statement_input .left{
    width: 35%;
    margin-right: 5px;
}
.Statement_input .right{
    width: 60%;
    margin-left: 5px;
}
.show2,.show3,.show4,.show5{
    display: none;
}


/* 航程管理-------------------------------------------------- */
.voyageblock{
    width: 100%;
    position: relative;
}
@media screen and (max-width: 1299px){
    .voyageblock{
        width: 1100px;
    }

}
.voyageblock::before{
    content: "";
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    border-left: 1px dashed #9BB367;
}
.voyageblock .voyageline{
    justify-content: space-between;
    position: relative;
    padding: 13px 0px
}
.voyageblock .voyageline::before{
    content: "";
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 31px;
    border-bottom: 1px dashed #E1E1E1;
}
.voyageblock .voyageline,
.voyageblock .voyageline .leftblock,
.voyageblock .voyageline .rightblock{
    display: flex;
    align-items: center;
}
.voyageblock .voyageline .leftblock,
.voyageblock .voyageline .rightblock{
    z-index: 999;
    background-color: white;
    padding: 0 10px;
}
.voyageblock .voyageline .leftblock .fa-circle,
.voyageblock .voyageline .rightblock .fa-location-dot{
    font-size: 14px;
    color: #9BB367;
    margin-right: 5px;
}
.voyageblock .voyageline .rightblock .coordinate{
    font-size: 14px;
    color: #989898;

}
.voyagemidpoint{
    border-left: 2px dashed #9BB367;
    margin-left: 15px;

}
.voyageblock .voyageline .leftblock .voyagepoint{
    font-weight: 900;
}
.voyageblock .voyageline .leftblock .dash,
.voyageblock .voyageline .rightblock .line{
    color: #9BB367;
    margin-right: 5px;
}

/* 各點距離 */
.voyageblock .voyageline .rightblock{
    position: relative;
    width: 170px;
}
.voyageblock .voyageline .rightblock .distance{
    position: absolute;
    display: flex;
    align-items: center;
    top: -37px;
    left: 15px;
    border-left: 1px solid #9BB367;
    height: 30px;
}

/* 歐盟港口 */
.voyageline.EU .rightblock .fa-location-dot{
    color: #003399;
}
.voyageline.EU .rightblock::before{
    position: absolute;
    content: "";
    background-image: url(../img/EUicon.svg);
    width: 25px;
    height: 25px;
    background-size:cover;
    left: -20px;
}

/* 檢視-地圖 */
.map{
    width: 100%;
}
.map iframe{
    width: 100%;
    height: 250px;
}



/* 申報部分----------------------------------- */
.search-block.ApplicationRecords{
    background-color: #3490C3;
    color: white;
    padding: 4px 15px;
    margin-bottom: 10px;
}
.include{
    color: #07a765;
    font-weight: 900;
    font-size: 18px;
}

.cont-listblock.ApplicationRecords .listblock-line-title{
    width: 100px;
} 
.cont-listblock.ApplicationRecords .listblock-title{
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 5px;
}
.f11px{
    font-size: 11px;
}
.cont-listblock.ApplicationRecords .btn{
    margin-top: 10px;
}
/* 船舶申報資訊 */
.listblock-second {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #4d92b8
}
.listblock-second .listblock-line .btn{
    margin-top: 0;
}
.listblock-second .listblock-line .listblock-report{
    text-decoration: underline;
}




/* 申報頁面相關---------------------------------------- */

.grid-cont .list{
    margin: 10px 0;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
}
.grid-cont .list.title{
    font-weight: 900;
}
.grid-cont .padleft{
    padding-left: 30px;
    width: 100%;
    margin-top: 10px;
}
.grid-cont .padleft label{
    font-weight: 400;
}
.grid-cont .list a{
    text-decoration: underline;
    color: #2758AE;
}
.grid-cont .list-ul li{
    margin-left: 20px;
    list-style: inside;
    margin: 5px 0;
}

.WebTable.EEXI thead tr:first-child{
    background-color: #848484;
    color: white;
}
.WebTable.EEXI tbody tr.bgcolor{
    background-color: #FFF2F2;
}


.WebTable.EEOI thead tr th input{
    margin: 5px 0;
}
.WebTable.EEOI thead tr th {
    border: 0.5px solid #cdcdcd;
}

/* SEEMP */
.pagetitle.titlebtn{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.WebTable.SEEMP2  tbody tr td:first-child{
    width: 240px;
}

.WebTable.SEEMP3 thead{
    background-color: #eaf9f3;
}
.WebTable.SEEMP3 tbody tr:nth-child(even) {
    background-color: #ffffff;
}
.WebTable.SEEMP3 tbody tr:nth-of-type(4){
    background-color: #f1f1f1;
}

/* 歐盟 */
.noteModal{
    text-decoration: underline;
    color: #2758AE;
    cursor: pointer;
}


/* 群組權限 */
/* 群組管理 */
.WebTable.group tbody tr td i{
    color: #4D92B8;
    margin-right: 5px;
}
.WebTable.group tbody tr td:first-child{
    text-align: left;
    padding-left: 70px;
}
.WebTable.group tbody tr.groupTitle td:first-child{
    padding-left: 30px;
    font-weight: 900;
    font-size: 18px;
}
.WebTable.group input[type="checkbox"]{
    width: 23px;
    height: 23px;
    transform: translateY(4px);
    margin: 0 5px;
}
.grid-cont .minwidth{
    width: 100%;
}
.WebTable.group input[type="checkbox"]:checked{
    color: white;
}
.WebTable.group input[title="Review"]:checked{ accent-color:  cadetblue;}
.WebTable.group input[title="Add"]:checked{ accent-color:  dodgerblue;}
.WebTable.group input[title="Edit"]:checked{ accent-color:  chocolate;}
.WebTable.group input[title="Delete"]:checked{ accent-color:  crimson;}
.WebTable.group input[title="ONOFF"]:checked{ accent-color: #446fa5;}


@media screen and (max-width: 1199px){
    .minwidth {
        width: 100%; 
        overflow: auto;
    }
    .WebTable{
        width: 1200px;
    }
}


/* 公司管理 */
.groupt-title.addimg{
    display: flex;
    align-items: center;
}
.groupt-title.addimg .imo{
    width: 110px;
    margin-left: 5px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

/* 港口管理 */
.pagelogbtn.PortArrivals span::before,
.pagelogbtn.PortArrivals span::after{
    width: calc(50% - 145px);
}

/* 碳權管理 */
.categorylogbtn.PortArrivals span::before,
.categorylogbtn.PortArrivals span::after{
    width: calc(50% - 145px);
}

/* 碳權管理 */
/* 上方碳權種類 */
.click-block{
    width: 100%;
    display: flex;
    /* justify-content: space-around; */

    flex-wrap: wrap;
}
.click-block .CarbonRights{
    margin-right: 10px;
    width: 350px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    padding: 10px 15px;
    border-radius: 10px;
    font-weight: 900;
    color: white;
    text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    position: relative;
    border: 3px solid rgba(0, 0, 0, 0);
    margin-bottom: 20px;
}
.click-block .CarbonRights .CR-title{
    font-size: 28px;
    border-bottom: 1px solid white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}
.click-block .CarbonRights .CR-title:hover{
    color: #fbff00;
}
.click-block .CarbonRights .CR-year{
    font-size: 20px;
    margin: 5px 0;
}
.click-block .CarbonRights .CR-bg{
    content: "";
    width: 100%;
    height: 50px;
    border-radius: 50px;
}
.click-block .CarbonRights .CR-QTY{
    font-size: 44px;
    color: #FFEE00;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 83px;
    transform: translateX(-50%);
}
.click-block .CarbonRights .CR-unit{
    text-align: right;
    opacity: 0.5;
    font-size: 14px;
    margin: 5px 0;
}
.click-block .CarbonRights .CR-switch{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
}
.click-block .CarbonRights .CR-switch .CR-arrow{
    cursor: pointer;
    display: flex;
    align-items: center;
}
.click-block .CarbonRights .CR-switch .CR-arrow:hover{
    text-decoration: underline;
}

.click-block .CarbonRights.EUA{
    background-color: #25359E;
}
.click-block .CarbonRights.EUA .CR-QTY{
    color: #FFEE00;
}
.click-block .CarbonRights.USA{
    background-color: #214F88;
    /* border-color: #B31942; */
}
.click-block .CarbonRights.USA .CR-bg{
    /* background-color: white; */
    position: relative;
}
.click-block .CarbonRights.USA .CR-bg::after{
    position: absolute;
    content: "";
    width: 350px;
    height: 100%;
    left: -18px;
    top: 0;
    background-color: white;
}
.click-block .CarbonRights.USA .CR-QTY{
    color: #B31942;
}

.click-block .CarbonRights.China{
    background-color: #EC4E4E;
}

.click-block .CarbonRights.Japan,
.click-block .CarbonRights.Japan .CR-title{
    background-color: white;
    color:#505050;
}
.click-block .CarbonRights.Japan .CR-title{
    color:#505050;
}
.click-block .CarbonRights.Japan .CR-title{
    border-bottom-color:#505050;
}
.click-block .CarbonRights.Japan .CR-bg{
    background-color:#EC1B2E;
}
.click-block .CarbonRights.Japan .CR-QTY{
    color: #ffffff;
}

/* 折抵畫面 */
.shipOffsetTotal{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 10px;
}

.shipTableHeight{
    max-height: 500px;
    overflow-y: auto;
}
.shipTableHeight .WebTable thead{
    position: sticky; 
    top: 0; 
    z-index: 1;
}

.Allowance-flex{
    display: flex; 
    width: 100%;
    flex-wrap: wrap;
}
.Allowance-flex .ship-offset{
    width: 75%;
    padding-right: 15px;
    border-right: 1px solid #ccc;
}
.Allowance-flex .ship-status{
    width: 25%;
    padding-left: 15px;
}
.Allowance-flex .ship-status .listblock-line{
    display: flex;
    justify-content: space-between;
}
.Allowance-flex .ship-status i{
    margin-right: 5px;
}


@media screen and (max-width: 1399px){
    .Allowance-flex .ship-offset,
    .Allowance-flex .ship-status{
        width: 100%;
    }
    .Allowance-flex .ship-offset{
        border-right: 0;
        border-bottom: 1px solid #ccc;
        margin-bottom: 5px;
        padding-bottom: 5px;
    }

}

/* 碳權個別頁面 */
.bluefont{
    font-size: 24px;
    color: #1A73B2;
    margin: 0 10px;
}