/* 頁面共同樣式 */

html,
body {
    font-family: "微軟正黑體";
    font-size: 1.2rem;
    background-color: #e6eaf4;
}

a {
    color: #ffffff;
}

a:hover {
    color: #ffffff;
    text-decoration: none;
}

a.active {
    font-weight: bold;
    color: #ffffff;
}

.form-group label {
    font-weight: bold;
}

.form-group label.required::before {
    content: "*";
    color: red;
}

.cursor-pointer {
    cursor: pointer;
}

/*文字斷行、皆不斷行*/
.word-break-keep-all {
    word-break: keep-all;
}

.text-indent-2rem {
    text-indent: 2rem;
}

.box-shadow-full {
    box-shadow: 5px 5px 20px 5px #00000040;
}

.box-shadow-full-thin {
    box-shadow: 3px 3px 10px 3px #00000040;
}

/* .box-shadow-mobile-full-thin {
    box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.25);
} */

.box-border-radius {
    border-radius: 20px;
}

.center_vertically_grid {
    align-items: center;
    display: grid;
}

.center_vertically {
    align-items: center;
    display: flex;
}

.h-40 {
    height: 40px;
}

.fs-72 {
    font-size: 72px !important;
}

.fs-66 {
    font-size: 66px !important;
}

.fs-52 {
    font-size: 52px !important;
}

.fs-40 {
    font-size: 40px !important;
}

.fs-36 {
    font-size: 36px !important;
}

.fs-30 {
    font-size: 30px !important;
}

.fs-28 {
    font-size: 28px !important;
}

.fs-26 {
    font-size: 26px !important;
}

.fs-24 {
    font-size: 24px !important;
}


/* 自訂顏色、背景、文字、按鈕 */

:root {
    --red-normal: #ff8787;
    --red-deep: #ff000083;
    --red-bright: #fa9898;
    --true-red-deep: #e94747;
    --true-red-bright: #db6b6b;
    --pink-deep: #f3adad;
    --pink-bright: #f0baba;
    --peach-deep: #ec8888;
    --peach-bright: #e99f9f;
    --green-deep: #3caba3;
    --green-bright: #42bbb3;
    --blue-deep: #233257;
    --blue-bright: #8eacda;
    --purple-deep: #5267aa;
    --purple-bright: #5f77c7;
    --yellow-deep: #E1B106;
    --yellow-bright:#e2d08f;
    --gray-deep: #8f8f8f;
    --gray-normal: #F1F4FA;
    --gray-bright: #e1e7f5;
}

.bg-green-deep {
    background-color: var(--green-deep);
}

.text-green-deep {
    color: var(--green-deep);
}

.text-gray-deep {
    color: var(--gray-deep);
}

.btn-red-deep {
    color: #fff;
    background-color: var(--red-normal);
    border-color: var(--red-normal);
    font-weight: bold;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
}

.btn-red-deep:hover {
    color: #fff;
    background-color: var(--red-bright);
    border-color: var(--red-bright);
    font-weight: bold;
}

.btn-true-red-deep {
    color: #fff;
    background-color: var(--true-red-deep);
    border-color: var(--true-red-deep);
    font-weight: bold;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
}

.btn-true-red-deep:hover {
    color: #fff;
    background-color: var(--true-red-bright);
    border-color: var(--true-red-bright);
    font-weight: bold;
}

.btn-pink-deep {
    color: #fff;
    background-color: var(--pink-deep);
    border-color: var(--pink-deep);
    font-weight: bold;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
}

.btn-pink-deep:hover {
    color: #fff;
    background-color: var(--pink-bright);
    border-color: var(--pink-bright);
    font-weight: bold;
}

.btn-peach-deep {
    color: #fff;
    background-color: var(--peach-deep);
    border-color: var(--peach-deep);
    font-weight: bold;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
}

.btn-peach-deep:hover {
    color: #fff;
    background-color: var(--peach-bright);
    border-color: var(--peach-bright);
    font-weight: bold;
}

.btn-green-deep {
    color: #fff;
    background-color: var(--green-deep);
    border-color: var(--green-deep);
    font-weight: bold;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
}

.btn-green-deep:hover {
    color: #fff;
    background-color: var(--green-bright);
    border-color: var(--green-bright);
    font-weight: bold;
}

.btn-blue-bright {
    color: #fff;
    background-color: var(--blue-bright);
    border-color: var(--blue-bright);
    font-weight: bold;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
}

.btn-blue-bright:hover {
    color: #fff;
    background-color: #a6bee6;
    border-color: #a6bee6;
    font-weight: bold;
}

.btn-blue-deep {
    color: #fff;
    background-color: var(--blue-deep);
    border-color: var(--blue-deep);
    font-weight: bold;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
}

.btn-blue-deep:hover {
    color: #fff;
    background-color: var(--blue-bright);
    border-color: var(--blue-bright);
    font-weight: bold;
}

.btn-purple-deep {
    color: #fff;
    background-color: var(--purple-deep);
    border-color: var(--purple-deep);
    font-weight: bold;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
}

.btn-purple-deep:hover {
    color: #fff;
    background-color: var(--purple-bright);
    border-color: var(--purple-bright);
    font-weight: bold;
}

.btn-yellow-deep {
    color: #fff;
    background-color: var(--yellow-deep);
    border-color: var(--yellow-deep);
    font-weight: bold;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
}

.btn-yellow-deep:hover {
    color: #fff;
    background-color: var(--yellow-bright);
    border-color: var(--yellow-bright);
    font-weight: bold;
}

.btn_plus {
    align-items: center;
    padding-bottom: 0.2rem;
    padding-top: 0.2rem;
    display: inline;
    justify-content: center;
    border: none;
    font-size: 14pt !important;
}


/*紀錄頁面最上層BTN*/
/*餵養紀錄、量測紀錄*/
.btn-record {
    width: 200px;
    height: 120px;
    font-size: 30px;
    padding-top: 2px;
    font-weight: normal;
    margin-right: 50px;
}


/* input輸入框 */

input.form-control {
    color: rgba(0, 0, 0, 0.65) !important;
    background: var(--gray-normal) !important;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25) !important;
    border-radius: 30px !important;
}

input.form-control[name="search"] {
    font-size: 28px!important;
    height: 50px!important;
    width: 319px!important;
    border-radius: 25px!important;
    min-height: 50px!important;
}

input.form-control[name="search"]::placeholder {
    color: #DBDBDB!important;
    font-size: 28px!important;
}

.input-group {
    width: 319px;
}


/* select選擇框 */

select.form-control {
    color: #898D9A !important;
    background: var(--gray-normal) !important;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25) !important;
    border-radius: 25px !important;
    cursor: pointer;
    height: 43px;
    width: 106px;
    font-size: 20px;
    font-weight: 400;
}

select.form-control[name="name"] {
    background: var(--gray-normal) !important;
    height: 62px;
    width: 269px;
    border-radius: 30px !important;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25);
    font-size: 28px;
    color: var(--gray-deep) !important;
    text-align: center;
    text-align-last: center;
}


/* Switch */
/* sensor on or off*/

.switch {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 135px;
    height: 62px;
    padding: 3px;
    border-radius: 30px;
    cursor: pointer;
}

/* checkbox 是否有勾選他來確定 sensor 的狀態是 on or off */
.switch-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

/* on off 樣式*/
.switch-label {
    position: relative;
    display: block;
    height: inherit;
    font-size: 31px;
    font-weight: bold;
    text-transform: uppercase;
    background: #fff;
    border-radius: inherit;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
    -webkit-transition: 0.15s ease-out;
    -moz-transition: 0.15s ease-out;
    -o-transition: 0.15s ease-out;
    transition: 0.15s ease-out;
    -webkit-transition-property: opacity background;
    -moz-transition-property: opacity background;
    -o-transition-property: opacity background;
    transition-property: opacity background;
}

/*::before and ::after 共同樣式，將 on and off 定位在框內，以 switch-label 為基準*/
.switch-label::before,
.switch-label::after {
    position: absolute;
    top: 50%;
    margin-top: -.5em;
    line-height: 1;
    -webkit-transition: inherit;
    -moz-transition: inherit;
    -o-transition: inherit;
    transition: inherit;
}

.switch-label::before {
    /*take switch-label's attribute:data-off's value to set content*/
    content: attr(data-off);
    right: 9px;
    color: #aaa;
    text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}

.switch-label::after {
    content: attr(data-on);
    left: 11px;
    color: white;
    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
    opacity: 0;
}

/*checkbox 被勾起來後，在 checkbox 後的 switch-label's background color change*/
.switch-input:checked~.switch-label {
    background: #00FF94;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}

/*checkbox 被勾起來後 => OFF 變完全透明，不會顯示在頁面上*/
.switch-input:checked~.switch-label:before {
    opacity: 0;
}

/*checkbox 被勾起來後 => ON 變實心有顏色，顯示在頁面上*/
.switch-input:checked~.switch-label:after {
    opacity: 1;
}

/*框內的圓形控制鈕*/
.switch-handle {
    position: absolute;
    top: 7px;
    left: 7px;
    width: 54px;
    height: 54px;
    background: white;
    border-radius: 30px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    background-image: -webkit-linear-gradient(top, white 40%, #f0f0f0);
    background-image: -moz-linear-gradient(top, white 40%, #f0f0f0);
    background-image: -o-linear-gradient(top, white 40%, #f0f0f0);
    /*設控制鈕的背景色為漸層: 直線漸層(由上到下(漸層方向), start color 佔據40%, end color*/
    background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
    -webkit-transition: left 0.15s ease-out;
    -moz-transition: left 0.15s ease-out;
    -o-transition: left 0.15s ease-out;
    transition: left 0.15s ease-out;
    /* transition: 監控的property duration time-curve delay'time*/
}

/*::before 是第一個元素，會蓋在 switch-handle 上面 => 控制鈕內的小圓*/
.switch-handle::before {
    content: '';
    position: absolute;
    top: 23%;
    left: 23%;
    margin: -6px 0 0 -6px;
    width: 40px;
    height: 40px;
    background: #f9f9f9;
    border-radius: 30px;
    /*box-shadow: inset=內陰影 x軸偏移 y軸偏移 陰影顏色*/
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
    background-image: -webkit-linear-gradient(top, #eeeeee, white);
    background-image: -moz-linear-gradient(top, #eeeeee, white);
    background-image: -o-linear-gradient(top, #eeeeee, white);
    background-image: linear-gradient(to bottom, #eeeeee, white);
}

/*checkbox 被勾起來後 => 在 checkbox 後的 switch-handle change position*/
.switch-input:checked~.switch-handle {
    left: 74px;
    box-shadow: -1px 1px 5px rgb(0 0 0 / 20%);
}


/*.switch-green>.switch-input:checked~.switch-label {
    background: #4fb845;
}*/


/* 麵包屑樣式 養殖監控 > 白蝦池*/

.record-breadcrumb {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 28px;
    height: 33px;
}

.record-breadcrumb-a {
    color: var(--gray-deep);
    text-decoration: blink;
}

.record-breadcrumb-a:hover {
    color: var(--green-deep);
    font-weight: bolder;
    cursor: pointer;
}


/* scrollbar */

.scrollable-menu {
    height: auto;
    max-height: 600px;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 0px;
}

body::-webkit-scrollbar {
    width: 20px;
}

body::-webkit-scrollbar-thumb {
    border: 14px solid #03808c;
    border-radius: 100px;
}


/* billboard.js setting*/

.bb-tooltip th {
    background-color: var(--green-deep) !important;
    font-size: 20px;
}

.bb-tooltip tr {
    border: 0px !important;
}

.bb-tooltip td {
    border-left: 0px;
    font-size: 20px;
}


/* 裝編輯的圖案(筆)的box */

.message-edit {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--green-deep);
    width: 46px;
    height: 46px;
    border-radius: 100%;
    font-size: 24px;
    color: white;
    cursor: pointer;
    box-shadow: 5px 5px 20px 5px #00000040;
}

.message-edit:hover {
    background-color: var(--green-bright);
}


/* 裝刪除圖案(垃圾桶)的box */

.message-delete {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--red-deep);
    width: 46px;
    height: 46px;
    border-radius: 100%;
    font-size: 24px;
    color: white;
    cursor: pointer;
    box-shadow: 5px 5px 20px 5px #00000040;
}

.message-delete:hover {
    background-color: var(--red-bright);
}


/* 霧化漸層感覺 */

.box_mask {
    -webkit-mask: linear-gradient(#00000010, #000, #000, #000, #000, #000, #000, #000, #00000010);
    -webkit-mask-repeat: no-repeat;
}


/* 下載紀錄btn */

.btn_download {
    color: var(--gray-deep);
    background-color: white;
    border-color: white;
    float: right;
    width: 184px;
    height: 62px;
    border-radius: 30px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.25);
    font-size: 28px;
    padding-top: 10px;
}

.btn_download:hover {
    color: var(--gray-deep);
    background-color: var(--gray-bright);
    border-color: var(--gray-bright);
    font-weight: bold;
}

.btn_download_i {
    color: var(--green-deep);
    height: 31px;
    width: 31px;
    left: 0px;
    top: 0px;
    border-radius: 0px;
}

@media screen and (max-width: 575px) {
    .box-shadow-full-thin {
        box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.25);
    }

    .box-border-radius {
        border-radius: 10px;
    }
}