body {
    font-family: 'Sarabun', sans-serif;
}

circle {
    border-radius: 50%;
}

.strategic-card-row .card {
    margin-bottom: 30px;
}

.strategic-card-row .card img {
    float: right;
    width: 80px;
    margin-left: 20px;
}

.navbar {
    border-bottom: 1px solid #eee;
}

.strategic-list {
    -webkit-border-radius: 0 50px 50px 0;
    border-radius: 0 50px 50px 0;
    padding: 10px 16px 10px 24px;
    position: relative;
    text-decoration: none;
    color: #000;
    display:block;
    cursor:pointer;
}
    .strategic-list.active {
        background: #e8f0fe;
        color: #1967d2;
        font-weight: 600;
    }

    .strategic-list:hover {
        background: #F5F5F5;
        text-decoration: none;
    }

.icon-muted {
    background: #eee;
    border-radius: 50%;
    text-align: center;
    color: #bbb;
    width: 20px;
    height: 20px;
    font-size: 12px !important;
    cursor: pointer;
    padding-top: 4px;
    margin-left: 5px;
    display: none !important;
}

    .icon-muted:hover {
        color: #000;
    }



.circle-btn {
    cursor: pointer;
    border-radius: 50%;
    padding: 10px;
    width: 50px;
    height: 50px;
    text-align: center;
}

    .circle-btn:hover {
        opacity: 0.8;
    }


.form-control,
.form-control:focus {
    border-left: none;
    border-right: none;
    border-top: none;
    background-image: linear-gradient(transparent, #fefefe);
    border-radius: 0;
    border-bottom-color: #777;
    box-shadow: none;
    padding-left: 15px;
    padding-right: 15px;
    color: #1967d2;
}

.form-control:focus {
    background: #E8F0FE;
    transition: all .2s ease-in;
    border-color: #1967d2;
}

.form-control[disabled]{
    background:#f7f7f7;
    border-bottom-color:#eee;
}

    .require {
        border-bottom-color: #DC3545;
    }

.form-control::-webkit-input-placeholder { /* Edge */
    color: #bbb;
    font-style: italic;
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #bbb;
    font-style: italic;
}

.form-control::placeholder {
    color: #bbb;
    font-style: italic;
}

/*select.form-control option {
    color: #bbb !important;
    font-style: italic !important;
}*/

.input-group .input-group-append .input-group-text {
    border-radius: 0;
    background: none;
    border: none;
    position: absolute;
    right: 0;
    bottom: 5px;
}
.input-group .input-group-prepend .input-group-text {
    border-radius: 0;
    background: none;
    border: none;
    position: absolute;
    left: 0;
    bottom: 5px;
    z-index:1;
}

.btn {
    border-radius: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

a:hover,
a:active,
a:focus {
    text-decoration:none;
}
.text-black{
    color:#000!important;
}

.bg-light-grey{
    background:#f7f7f7;
}
.hover-opacity:hover{
    opacity:0.8;
}
.hide{
    display:none!important;
}
.hand{
    cursor:pointer;
}
.one-line {
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-y: hidden;
}

.two-line {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.three-line {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.four-line {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.five-line {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
.fa-smart-check,
.fa-smart-radio {
    cursor: pointer;
    color: #1967d2;
    font-size: 18px !important;
    width: 20px;
    text-align: center;
    display: inline-block;
    margin-right: 5px;
}
.fa-smart-check:hover,
.fa-smart-radio:hover {
    opacity: 0.8;
}
.fa-smart-check.checked:before {
    content: "\f046" !important;
}
.fa-smart-radio.checked:before {
    content: "\f05d" !important;
}

.level-id{
    font-weight:600;
    padding-right:5px;
}
.level-id.group:after {
    color: #f44336;
    content:"กลุ่มยุทธศาสตร์";
}
    .level-id.strategic:before {
        color: #ab47bc;
        content: "ยุทธศาสตร์";
    }
    .level-id.strategy:before {
        color: #2196f3;
        content: "กลยุทธ์";
    }
    .level-id.project:before {
        color: #66bb6a;
        content: "โครงการ";
    }
    .level-id.activity:before {
        color: #fb8c00;
        content: "กิจกรรม";
    }