/* ------------- Font ------------- */

@font-face {
    font-family: NotoSans;
    src: url(../fonts/NotoSans/NotoSans-Regular.ttf);
}

@font-face {
    font-family: NotoSansThai;
    src: url(../fonts/NotoSans/NotoSansThai-Regular.ttf);
}

@font-face {
    font-family: Prompt;
    font-weight: 300;
    src: url(../fonts/Prompt/Prompt-Light.ttf);
}

@font-face {
    font-family: Prompt;
    font-weight: bold;
    src: url(../fonts/Prompt/Prompt-Bold.ttf);
}

@font-face {
    font-family: Prompt;
    src: url(../fonts/Prompt/Prompt-Regular.ttf);
}

@font-face {
    font-family: Prompt;
    font-weight: 600;
    src: url(../fonts/Prompt/Prompt-SemiBold.ttf);
}


/* ------------- End font -------------- */


/* ------------- Menu ------- */

.menubar-admin,
.menubar-staff {
    width: 328px !important;
    box-shadow: none !important;
    background-color: #000000 !important;
}

.menubar-admin .logo img,
.menubar-staff .logo img {
    width: 169px;
    height: 48px;
    margin: 55px 127px 33px 32px;
}

.menubar-admin .user-name,
.menubar-staff .main-name {
    padding: 0 !important;
    margin: 0 32px 0 32px;
    background-color: #000000 !important;
}

.user-name p,
.main-name p {
    /* width: 133px;
    height: 24px; */
    font-family: Prompt;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #ffffff !important;
    font-weight: 100 !important;
}

.user-name:hover p,
.user-name:hover,
.main-name:hover p,
.main-name:hover {
    background-color: #000000;
}

.menubar-admin .logout,
.menubar-staff .logout {
    opacity: 0.5;
    font-family: Prompt;
    font-size: 12px !important;
    line-height: 1.33 !important;
    color: #ffffff !important;
    padding: 0 0 0 32px !important;
    font-weight: 100 !important;
    background-color: #000000 !important;
    font-weight: 100 !important;
    margin-top: 3px;
}

.menubar-admin .logout:hover,
.menubar-staff .logout:hover {
    background-color: #000000 !important;
}

.menubar-admin .divider,
.menubar-staff .divider {
    width: 264px;
    height: 1px;
    border: solid 1px #7a7e81;
    border-bottom-width: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
    padding-left: 0px;
    margin-left: 32px;
    margin-top: 16px;
    margin-bottom: 17px;
}

.menubar-admin .menu-event,
.menubar-admin .menu-set,
.menubar-staff .menu-atten,
.menubar-staff .menu-add {
    display: -webkit-box !important;
    padding: 16px 16px 16px 32px !important;
    height: 56px;
    background-color: #000000 !important;
}

.menu-event img,
.menu-set img,
.menu-atten img,
.menu-add img {
    width: 24px !important;
    height: 24px;
    margin-right: 24px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    opacity: 0.5;
}

.menu-event p,
.menu-set p,
.menu-atten p,
.menu-add p {
    font-family: Prompt;
    font-size: 16px;
    color: #ffffff;
    margin-top: 2px;
    font-weight: normal;
    opacity: 0.5;
    font-weight: 100 !important;
}

.menu-event:hover img,
.menu-event.active img,
.menu-event:focus img,
.menu-set:hover img,
.menu-set.active img,
.menu-set:focus img {
    opacity: 1;
}

.menu-event:hover p,
.menu-event.active p,
.menu-event:focus p,
.menu-set:hover p,
.menu-set.active p,
.menu-set:focus p {
    opacity: 1;
    color: #ffffff;
}

.menu-atten:hover img,
.menu-atten.active img,
.menu-atten:focus img,
.menu-add:hover img,
.menu-add.active img,
.menu-add:focus img {
    opacity: 1;
}

.menu-atten:hover p,
.menu-atten.active p,
.menu-atten:focus p,
.menu-add:hover p,
.menu-add.active p,
.menu-add:focus p {
    opacity: 1;
    color: #ffffff;
}


/* -------------End  Menu-Admin-event ------- */


/* ---------- Select-Tap --------------------------- */

.select-tab {
    margin-bottom: 32px !important;
    border-bottom: 1px solid #d3d4d5 !important;
}

.select-tab a {
    font-family: Prompt !important;
    color: #373a3c !important;
    font-size: 16px !important;
    font-weight: 100 !important;
    padding-left: 36px !important;
    padding-right: 36px !important;
    padding-bottom: 10px !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
}

.select-tab a.active.item {
    border-bottom: solid 2px #ec1940!important;
}

.select-tab a.query {
    padding-left: 32px !important;
    padding-right: 32px !important;
}

.select-tab a.qtn {
    padding-left: 22px !important;
    padding-right: 22px !important;
}

.select-tab a.dct {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.select-tab a.partner {
    padding-left: 32px !important;
    padding-right: 32px !important;
}


/* -------------- End Select-Tap ---------------------*/


/* -------------- Input-Search ---------------------- */

input#search {
    background-image: url(../images/ic-search.png);
    background-repeat: no-repeat;
    text-indent: 28px;
    background-position: 16px 13px;
    background-size: 16px;
    padding: 11px 14px 11px 16px !important;
    width: 240px;
    height: 40px;
    border-radius: 100px;
    border: solid 1px #d3d4d5 !important;
    font-family: NotoSansThai, NotoSans !important;
}

input#search:focus,
input#search:hover,
input#search.active {
    border: solid 1px #7a7e81 !important;
    background-image: url(../images/ic-search@3x.png);
}

input#search:-moz-placeholder {
    font-family: NotoSansThai, NotoSans !important;
    font-size: 14px;
    line-height: 1.14;
    color: #a7a9ab !important;
}


/* -------------- End-Input-Search ------------------ */


/* ------------- Input ------------- */

.form-input label {
    font-family: Prompt;
    font-weight: 300 !important;
    color: #4a4a4a !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    margin-bottom: 8px !important;
}

input.input-text {
    width: 100% !important;
    height: 40px;
    border-radius: 2px !important;
    border: solid 1px #d3d4d5 !important;
    font-family: NotoSansThai, NotoSans !important;
    font-size: 14px !important;
    line-height: 1.14 !important;
    color: #4a4a4a !important;
    padding: 11px 14px 11px 24px !important;
}

input.input-text:focus,
input.input-text:hover,
input.input-text.active {
    border: solid 1px #7a7e81 !important;
}

input.input-text:-moz-placeholder {
    font-family: NotoSansThai, NotoSans !important;
    font-size: 14px;
    line-height: 1.14;
    color: #a7a9ab !important;
}

input#email {
    width: 374px;
    height: 40px;
    background-image: url(../images/ic-email.png);
    background-repeat: no-repeat;
    text-indent: 28px;
    background-position: 12px 12px;
    background-size: 16px;
    font-family: NotoSansThai, NotoSans !important;
    border: solid 1px #d3d4d5 !important;
}

input#email:focus,
input#email:hover,
input#email.active {
    border: solid 1px #7a7e81 !important;
    background-image: url(../images/ic-email@3x.png);
}

input#email:-moz-placeholder {
    font-family: NotoSansThai, NotoSans !important;
    font-size: 14px;
    line-height: 1.14 !important;
    color: #a7a9ab !important;
}

input#search {
    background-image: url(../images/ic-search.png);
    background-repeat: no-repeat;
    text-indent: 28px;
    background-position: 16px 13px;
    background-size: 16px;
    padding: 11px 14px 11px 16px !important;
    width: 240px;
    height: 40px;
    border-radius: 100px;
    border: solid 1px #d3d4d5 !important;
    font-family: NotoSansThai, NotoSans !important;
}

input#search:focus,
input#search:hover,
input#search.active {
    border: solid 1px #7a7e81 !important;
    background-image: url(../images/ic-search@3x.png);
}

input#search:-moz-placeholder {
    font-family: NotoSansThai, NotoSans !important;
    font-size: 14px;
    line-height: 1.14;
    color: #a7a9ab !important;
}

input.input-question {
    width: 438px !important;
    height: 40px;
    border-radius: 2px !important;
    border: solid 1px #d3d4d5 !important;
    font-family: NotoSansThai, NotoSans !important;
    font-size: 14px !important;
    line-height: 1.14 !important;
    color: #4a4a4a !important;
    padding: 11px 14px 11px 18px !important;
}

textarea.input-detail {
    width: 696px !important;
    height: 160px !important;
    border-radius: 2px !important;
    background-color: #ffffff !important;
    border: solid 1px #d3d4d5 !important;
    resize: none !important;
    font-family: NotoSansThai, NotoSans !important;
    font-size: 14px !important;
    line-height: 1.71 !important;
    color: #4a4a4a !important;
    padding: 16px 24px 16px 24px !important;
}

textarea.input-detail:-moz-placeholder {
    font-family: NotoSansThai, NotoSans !important;
    font-size: 14px !important;
    line-height: 1.14 !important;
    color: #a7a9ab !important;
}

input.input-question:focus,
input.input-question:hover,
input.input-question.active,
textarea.input-detail:focus,
textarea.input-detail:hover,
textarea.input-detail.active {
    border: solid 1px #7a7e81 !important;
}


/* -------------End  Input ------------- */


/* ---Input-Add-clendar,date-time,upload-file---- */

.ip-calendar .ic-calen,
.ip-time .ic-time {
    width: 44px !important;
    height: 40px !important;
    padding: 12px 14px 12px 14px !important;
    border-radius: 0 2px 2px 0 !important;
    background-color: #fafafa;
    border: solid 1px #d3d4d5;
}

.ip-calendar input::placeholder,
.ip-time input::placeholder {
    font-family: NotoSansThai, NotoSans;
    font-size: 14px;
    line-height: 1.14;
    text-align: left;
    color: #4a4a4a !important;
}

.ip-calendar .ic-calen:hover,
.ip-time .ic-time:hover,
.ip-calendar .ic-calen:focus,
.ip-time .ic-time:focus,
.ip-calendar .ic-calen.active,
.ip-time .ic-time.active {
    background-color: #fafafa;
    border: solid 1px #d3d4d5;
}

.ip-calendar img,
.ip-time img {
    width: 16px !important;
    height: 16px !important;
}

.date-time,
.start-time {
    width: 344px !important;
}

.start-time {
    margin-right: 8px;
}

.form-time .two {
    margin: 0 !important;
}

.ip-file .ic-file {
    width: 96px;
    height: 40px;
    border-radius: 0 2px 2px 0 !important;
    background-color: #69b0fe;
    font-family: NotoSansThai;
    font-size: 14px;
    line-height: 1.14;
    color: #ffffff;
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-weight: normal;
}

.ip-file .ic-file:hover,
.ip-file .ic-file:focus,
.ip-file .ic-file.active {
    background-color: #69b0fe;
    color: #ffffff;
}

#html_btn {
    display: none;
}


/* --- End Input-Add-clendar,date-time,upload-file---- */


/* -------- Button And Link -------- */

.btn {
    font-family: Prompt !important;
    font-size: 14px !important;
    color: #ffffff !important;
    border-radius: 2px !important;
    font-weight: bold !important;
    padding-bottom: 12px !important;
    padding-top: 14px !important;
    height: 40px;
}

.red-btn {
    background-color: #ec1940 !important;
}

.red-btn:hover {
    background-color: #d51639 !important;
}

.gray-btn {
    background-color: #e8e9ea !important;
}

.gray-btn:hover {
    background-color: #d1d2d3 !important;
}

.link-bc a {
    font-family: Prompt !important;
    font-size: 12px !important;
    color: #69b0fe !important;
}

.link-bc a:hover {
    text-decoration: underline;
}

.link-bc .divider {
    font-family: Prompt !important;
    color: #393939 !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
}

.btn-link {
    font-family: Prompt !important;
    font-size: 12px !important;
    color: #d3d4d5 !important;
    cursor: pointer;
    text-decoration: underline;
    border: none;
    background-color: #fff;
}

.btn-link:hover {
    color: #4a4a4a !important;
    text-decoration: underline;
}

.adding {
    margin: 0 !important;
    cursor: pointer;
}

.adding:hover a {
    color: #4a4a4a;
}

.adding:hover img {
    filter: grayscale(20%);
}

.adding img {
    width: 24px;
    height: 24px;
}

.adding a {
    font-family: Prompt;
    font-size: 12px;
    line-height: 2.2;
    color: #7a7e81;
    margin-left: 3px;
    font-weight: bold;
}

.star-rating {
    font-family: 'FontAwesome';
}

.star-rating>fieldset {
    border: none;
    display: inline-block;
    padding: 0;
}

.star-rating>fieldset:not(:checked)>input {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.star-rating>fieldset:not(:checked)>label {
    float: right;
    width: 1.3em;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 130%;
    color: #e8e9ea;
    margin: 0 3px 0 3px;
}

.star-rating>fieldset:not(:checked)>label:before {
    content: '\f006  ';
}

.star-rating>fieldset:not(:checked)>label:hover,
.star-rating>fieldset:not(:checked)>label:hover~label {
    color: #ec1940;
}

.star-rating>fieldset:not(:checked)>label:hover:before,
.star-rating>fieldset:not(:checked)>label:hover~label:before {
    content: '\f005  ';
}

.star-rating>fieldset>input:checked~label:before {
    content: '\f005  ';
    color: #ec1940;
}

.star-rating>fieldset>label:active {
    position: relative;
    top: 2px;
}

.star-rating>fieldset>span {
    float: right;
    width: 24px;
    height: 24px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 150%;
    margin: 0 3px 0 3px;
}

.star-rating>fieldset>.checked:before {
    content: '\f005  ';
    color: #ec1940;
}

.star-rating>fieldset>span:before {
    content: '\f006  ';
    color: #e8e9ea;
}

.close-page-btn,
.close-modal-btn {
    margin: 0 !important;
}

.close-page-btn img,
.close-modal-btn img {
    width: 24px;
    opacity: 0.5;
}

.cross-hover:hover img {
    opacity: 1;
}

.close-page-btn p {
    font-family: Prompt;
    font-size: 12px;
    letter-spacing: 0.7px;
    color: #292c2d;
    text-align: center;
    width: 27px;
    line-height: 0.2;
    font-weight: 600;
    opacity: 0.5;
}

.cross-hover:hover p {
    opacity: 1;
}

.close-page-btn .cross-hover,
.close-modal-btn .cross-hover {
    cursor: pointer;
    display: block;
    height: 49px;
    width: 49px;
    border-radius: 50%;
    border: 1px solid #ffffff;
    background-color: #ffffff;
    padding: 6px 11.5px;
    float: right;
}

.close-page-btn .cross-hover:hover,
.close-modal-btn .cross-hover:hover {
    border: 1px solid #fafafa;
    background-color: #fafafa;
}

.close-page-btn .right.column {
    padding: 26px 64px 0 0 !important;
}

.close-modal-btn .cross-hover {
    padding: 12px 11.5px;
}

.close-modal-btn .right.column {
    padding-right: 24px !important;
}

.icon-tooltip .button,
.icon-tooltip .button:hover {
    padding: 0px !important;
    background-color: #ffffff;
}

.icon-tooltip .button::before {
    background-color: #4a4a4a;
}

.icon-tooltip .button::after {
    font-family: Prompt;
    font-size: 10px;
    text-align: center;
    color: #ffffff;
    padding: 8px 14px 7px;
    background-color: #4a4a4a;
}

.icon-tooltip .button img {
    width: 24px;
    filter: grayscale(100%);
    opacity: 0.2;
}

.icon-tooltip .button:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.cancle-list-btn {
    cursor: pointer;
    display: block;
    height: 40px;
    width: 44px;
    border-radius: 2px;
    border: solid 1px #d3d4d5;
    background-color: #fafafa;
    padding: 7px 8px;
    text-align: center;
}

.cancle-list-btn img {
    width: 24px;
}

.cancle-list-btn:hover {
    border: solid 1px #ff3b30;
    background-color: #ff3b30;
}

.cancle-list-btn:hover img {
    content: url(../images/ic-cancle-white.png)
}

.icon-btn,
.icon-btn:hover {
    padding: 0px !important;
    background-color: #ffffff !important;
}

.icon-btn img {
    width: 24px;
    filter: grayscale(100%);
    opacity: 0.2;
}

.icon-btn:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.menu-list {
    width: 30px;
    text-align: right !important;
}

.menu-list>img {
    width: 4px;
    opacity: 0.4;
}

.menu-list:hover>img {
    opacity: 1;
}

.menu-list .menu {
    left: -135px !important;
    top: 20px !important;
}

.dropdown-btn {
    font-family: Prompt-Bold !important;
    border-radius: 2px !important;
    background-color: rgb(236, 25, 64) !important;
    color: #ffffff !important;
}

.dropdown-btn i {
    background-color: rgba(0, 0, 0, 0) !important;
    width: 40px !important;
    border-left: solid 2px #ffffff;
}

.dropdown-btn .menu {
    left: -47px !important;
}

.dropdown-menu {
    padding-top: 20px !important;
    padding-bottom: 16px !important;
    width: 184px;
}

.dropdown-menu .item {
    font-family: Prompt-Regular !important;
    font-size: 12px !important;
    color: #000000 !important;
    padding: 5px 12px !important;
}

.dropdown-menu .item.no-icon {
    font-family: Prompt-Regular !important;
    font-size: 12px !important;
    color: #000000 !important;
    padding: 5px 48px !important;
}

.dropdown-menu .item img {
    margin: 0 8px 0 0 !important;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.2;
}

.dropdown-menu .item:hover img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity: 1;
}

.dropdown-menu .item label {
    line-height: 2;
}

.btn-topic {
    width: 112px;
    height: 40px;
    border-radius: 3px 0 0 3px !important;
    border: solid 1px #d3d4d5 !important;
    box-shadow: none !important;
    margin-right: -4px !important;
    background-color: #ffffff !important;
    text-align: center !important;
    font-size: 14px !important;
    font-family: Prompt !important;
    line-height: 1.71 !important;
    color: #d3d4d5 !important;
    font-weight: normal !important;
    padding-top: 8px !important;
}

.btn-person {
    width: 112px;
    height: 40px;
    border-radius: 0 3px 3px 0 !important;
    border: solid 1px #d3d4d5 !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
    text-align: center !important;
    font-size: 14px !important;
    font-family: Prompt !important;
    line-height: 1.71 !important;
    color: #d3d4d5 !important;
    font-weight: normal !important;
    padding-top: 8px !important;
}

.btn-person.active,
.btn-topic.active {
    background-color: #fafafa !important;
    color: #4a4a4a !important;
}


/* -------- End Button And Link -------- */


/* -------- Document -------- */

.image16-9 {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25% !important;
}

.file-list {
    margin: 32px -18px 0 0 !important;
}

.file-list .column {
    padding: 0 18px 16px 0 !important;
    /* height: 144px; */
}

.file-list .fluid.card {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #D4D4D5 !important;
    cursor: pointer;
    /* height: 128px; */
}

.file-list .fluid.card:hover {
    -moz-box-shadow: 0px 1px 15px 0px #D4D4D5 !important;
    -webkit-box-shadow: 0px 1px 15px 0px #D4D4D5 !important;
    box-shadow: 0px 1px 15px 0px #D4D4D5 !important;
}

.file-list .fluid.card .image-file {
    position: relative;
    background-color: #fff !important;
}

.file-list .fluid.card .image-file.default {
    width: 32.95% !important;
    margin: 11.63% auto;
}

.file-list .fluid.card .file-detail {
    height: 42px;
    padding: 12px !important;
    border-top: solid 1px #e8e9ea;
}

.file-list .fluid.card .file-detail .file-name {
    display: inline-block;
    width: 74%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    line-height: 1.1;
}


/* -------- End Document -------- */


/* --------- Upload document----------- */

.up-document {
    margin-bottom: 16px;
}

.up-document .item {
    border-bottom: 1px solid #e8e9ea !important;
    border-top: 0 !important;
    padding: 12px 0 12px 0 !important;
}

.up-document .eight.column {
    padding-left: 2px !important;
}

.up-document a {
    font-family: NotoSans;
    font-size: 14px;
    line-height: 1.14;
    text-align: left;
    color: #4a4a4a;
}

.up-document .seven.column {
    text-align: right;
}

.up-document .seven.column a {
    font-family: NotoSans;
    font-size: 14px;
    line-height: 1.14;
    text-align: left;
    color: #a7a9ab;
}

.button-upload {
    height: 40px;
    padding-top: 0;
}


/* ---------End Upload document----------- */


/* -------- Table -------- */

.table-detail {
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0;
    border-radius: 0 !important;
    border-right: none !important;
    border-left: none !important;
    margin-top: 32px !important;
}

.table-detail th:first-child,
.table-detail td:first-child {
    padding-left: 24px !important;
}

.table-detail th:last-child,
.table-detail td:last-child {
    padding-right: 24px !important;
}

.table-detail th {
    font-family: Prompt !important;
    font-size: 14px !important;
    color: #373a3c !important;
    font-weight: normal !important;
}

.table-detail thead tr,
.table-detail tbody tr {
    height: 48px !important;
}

.table-detail tbody td {
    font-family: NotoSans, NotoSansThai !important;
    font-size: 14px !important;
    color: #4a4a4a !important;
    line-height: 1.14;
    font-weight: 100 !important;
}

.table-detail tbody tr:hover {
    cursor: pointer;
    background-color: #fafafa;
}

.table-detail.table-dropdown td:last-child {
    text-align: right;
}


/* -------- End Table -------- */


/* -------------------Container Add,Edit,Report ------------------- */

.container-add,
.container-edit,
.container-report,
.container-setting,
.container-scan {
    margin: 0 auto;
    width: 696px;
}

.container-add p,
.container-edit p,
.container-report p,
.container-setting p {
    font-family: Prompt;
    font-size: 24px;
    line-height: 1.33;
    color: #373a3c;
    font-weight: 100;
}

.container-add .form-input,
.container-edit .form-input,
.container-setting .form-input {
    margin-bottom: 24px !important;
}

.container-add .form-ft,
.container-edit .form-ft,
.container-setting .form-ft {
    float: right;
    margin-top: 26px;
    margin-bottom: 73px;
}

.form-ft a.red-btn,
.form-ft button.red-btn {
    margin: 0 !important;
    width: 112px;
    height: 40px;
    padding-top: 16px;
}

.form-ft a.gray-btn {
    width: 112px;
    height: 40px;
    padding-top: 16px;
}

.container-add .adding .sixteen,
.container-edit .adding .sixteen {
    padding: 0 0 14px 0 !important;
}

.container-add .add-qt,
.container-edit .add-qt {
    margin-bottom: 16px !important;
}

.container-add .form-quest.add-rating,
.container-edit .form-quest.add-rating {
    height: 162px !important;
}

.container-add .form-input.add-rating,
.container-edit .form-input.add-rating {
    margin-bottom: 16px !important;
}

.container-report .re-per,
.container-report .re-topic,
.container-report .re-rating {
    margin-top: 8px;
    margin-bottom: 24px;
    height: 32px;
}

.container-report .re-per .left,
.container-report .re-per .right,
.container-report .re-topic .left,
.container-report .re-topic .right,
.container-report .re-rating .left,
.container-report .re-rating .right {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.container-report .right img {
    padding-left: 0px;
    padding-right: 0px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.container-report .right p {
    font-family: Prompt;
    font-size: 14px;
    text-align: center;
    color: #7a7e81;
    margin-bottom: 0px;
    margin-top: 4px;
}

.container-report .re-per .grid,
.container-report .re-topic .grid,
.container-report .re-rating .grid {
    margin-left: 240px;
    margin-top: 4px;
}

.container-report .detail-rat p {
    font-family: NotoSansThai, NotoSans;
    font-size: 14px;
    line-height: 1.14;
    color: #7a7e81;
    font-weight: normal !important;
}

.container-report .detail-rat {
    border-bottom: 1px solid #e8e9ea;
    margin: 0 !important;
    height: 50px;
}

.detail-rat .left,
.detail-rat .right {
    padding: 0 !important;
}

.detail-rat .le-rat,
.detail-rat .text-rat {
    padding: 18px 0 16px 0 !important;
    height: 50px;
}

.detail-rat .ri-rat {
    padding: 14px 0 16px 0 !important;
    height: 50px;
}

.detail-rat .text-rat p {
    font-family: Prompt;
    font-size: 16px;
    text-align: center;
    color: #7a7e81;
}

.container-edit
/* -------------- End-Container Add,Edit,Report ------------- */


/* ------------Input-Number----------------- */

.quantity {
    position: relative;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.quantity input {
    height: 40px;
    float: left;
    display: block;
    margin-bottom: 24px !important;
}

.quantity input:focus {
    outline: 0;
}

.quantity-nav {
    float: left;
    position: relative;
    height: 40px;
}

.quantity-button {
    position: relative;
    cursor: pointer;
    border-left: 1px solid #d3d4d5;
    border-right: 1px solid transparent;
    width: 20px;
    text-align: center;
    color: #d3d4d5;
    font-size: 10px;
    font-family: NotoSansThai, NotoSans !important;
    font-weight: bold;
    line-height: 1.7;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.quantity-button:hover {
    width: 20px;
}

.quantity-button.quantity-up {
    position: absolute;
    height: 50%;
    top: 0;
    border-bottom: 1px solid #d3d4d5;
    border-top: 1px solid transparent;
}

.quantity-button.quantity-down {
    position: absolute;
    bottom: 0px;
    height: 50%;
}

.quantity-button.quantity-up:hover,
.quantity-button.quantity-down:hover {
    border: solid 1px #7a7e81;
}

.quantity-button.quantity-up:hover {
    border-top-right-radius: 2px;
    color: #7a7e81;
}

.quantity-button.quantity-down:hover {
    border-bottom-right-radius: 2px;
    color: #7a7e81;
}


/* -----------End-Input-Number ------------ */


/* -------- Graph -------- */

.line-charts .highcharts-axis.highcharts-color-0 .highcharts-axis-line {
    stroke: #7a7e81;
}

.line-charts .highcharts-axis.highcharts-xaxis .highcharts-axis-line {
    stroke: #7a7e81;
}

.line-charts .highcharts-container {
    left: -10px !important;
}

.tooltip-table,
.tooltip-table tr,
.tooltip-table td {
    border: 1px solid red;
}


/* -------- End Graph -------- */


/* --------- Welcome ----------- */

.container.welcome {
    width: 100% !important;
    max-width: 30% !important;
}

.welcome>h1 {
    font-family: Prompt;
    font-size: 48px;
    font-weight: 300;
    line-height: 1.17;
    color: #000000;
    padding-top: 160px;
    margin: 0 !important;
}

.welcome>p {
    color: #7a7e81;
    margin-bottom: 32px;
    font-family: NotoSansThai, NotoSans;
    font-size: 16px;
    line-height: 1.5;
    font-weight: normal;
}

.welcome label {
    font-family: Prompt;
    font-size: 12px !important;
    font-weight: 300 !important;
    color: #4a4a4a !important;
}

.welcome .field {
    margin-bottom: 12px !important;
}

.welcome .wel-staff,
.welcome .wel-speaker {
    margin-bottom: 28px !important;
}

.welcome input {
    border-radius: 2px !important;
    background-position: 16px 10px !important;
    background-repeat: no-repeat !important;
    background-size: 16px !important;
    font-family: NotoSansThai, NotoSans !important;
    padding-left: 44px !important;
}

.welcome input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.welcome input:hover,
.welcome input:focus {
    border: solid 1px #7a7e81 !important;
}

#admin-email {
    background-image: url(../images/ic-email.png);
    padding: 6px 6px 6px 44px !important;
    height: 40px;
}

#admin-password,
#staff-password,
#speaker-password {
    background-image: url(../images/ic-password.png);
    padding: 6px 6px 6px 44px !important;
    height: 40px;
}

#admin-email:hover,
#admin-email:focus {
    background-image: url(../images/ic-email@3x.png);
}

#admin-password:hover,
#admin-password:focus,
#staff-password:hover,
#staff-password:focus,
#speaker-password:hover,
#speaker-password:focus {
    background-image: url(../images/ic-password.png);
}

.welcome button {
    font-family: Prompt !important;
    width: 100%;
    background-color: #ec1940 !important;
    border-radius: 2px !important;
    color: #fff !important;
    font-weight: bold !important;
    font-size: 14px !important;
    height: 40px;
    margin: 12px 0 100px 0 !important;
}

.welcome button:hover,
.welcome button:focus {
    background-color: #d51639 !important;
}

.welcome>.form.error>.field.error>label {
    color: #ff3b30 !important;
}

.welcome>.form.error>.field.error input {
    background-color: #fff5f4 !important;
    border: solid 1px #ff3b30 !important;
    color: #a7a9ab !important;
}

.welcome>.form.error>.field.error #admin-email {
    background-image: url(../images/ic-email.png);
}

.welcome>.form.error>.field.error #admin-password {
    background-image: url(../images/ic-password.png);
}

.welcome .welcome-at {
    margin-top: 32px;
    margin-bottom: 34px;
}

.welcome .welcome-at .four.column,
.welcome .welcome-at .twelve.column {
    padding: 16px 14px 16px 14px;
}

.welcome .welcome-at h3 {
    font-family: Prompt;
    font-size: 20px;
    line-height: 1.6;
    color: #373a3c;
    margin: 0;
    font-weight: normal;
}

.welcome .welcome-at h5 {
    font-family: NotoSansThai, NotoSans;
    font-size: 16px;
    line-height: 1.5;
    color: #7a7e81;
    margin: 0;
    font-weight: normal;
}

.welcome-at img {
    width: 56px;
    height: 56px;
}

.attendee h1 {
    padding-top: 100px;
}

@media only screen and (max-width: 767px) {
    .ui.container.attendee {
        max-width: 84% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .attendee .welcome-at .four.column,
    .attendee .welcome-at .twelve.column {
        padding: 16px 14px 16px 14px;
    }
    .ui.container.speaker {
        max-width: 75% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media only screen and (max-width: 991px) and (min-width: 768px) {
    .container.welcome {
        max-width: 48% !important;
    }
}


/* ---------Edit welcome----------- */

.welcome .ui.label {
    background-color: #fff;
    border: none;
    height: 40px;
}

.welcome .ui.label img {
    width: 16px !important;
    height: 16px !important;
}

.welcome .ui.labeled input,
.welcome .ui.labeled input:hover,
.welcome .ui.labeled input:focus {
    border: none !important;
    height: 40px;
    padding: 0 !important;
    font-family: NotoSansThai, NotoSans !important;
}

.welcome .ui.labeled.input {
    border: 1px solid #d3d4d5 !important;
    height: 42px;
    border-radius: 2px;
}

.welcome .ui.labeled.input:hover,
.welcome .ui.labeled.input:focus,
.welcome .ui.labeled.input:active {
    border: 1px solid #7a7e81 !important;
}


/* -------End Edit welcome-------- */


/* ---------End Welcome ----------- */


/* ---------- Content ----------- */

.admin-event,
.admin-session,
.admin-setting,
.staff {
    padding-left: 126px;
    padding-top: 48px;
    padding-bottom: 108px;
    padding-right: 127px;
    margin-left: 328px;
    width: calc(100% - 328px);
}

.admin-event p,
.admin-session p,
.admin-setting p,
.staff p {
    font-family: Prompt;
    font-size: 24px;
    line-height: 1.33;
    color: #373a3c;
    font-weight: normal;
    margin-bottom: 16px;
}

.admin-setting .link-bc,
.staff .link-bc {
    margin-bottom: 24px;
}

.admin-event .list {
    border-top: 1px solid #d3d4d5 !important;
    border-bottom: 0 !important;
}

.admin-event .event-list {
    margin-top: 18px !important;
}

.admin-event .right.column button {
    width: 128px;
    height: 40px;
    margin: 0;
    font-family: Prompt !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: normal;
    letter-spacing: 0.3px;
    padding-right: 0px;
    padding-left: 0px;
}

.admin-event .secondary.session {
    margin-top: 24px;
}

.admin-session .divider-ic {
    border-left: 1px solid #d3d4d5;
    border-radius: 0;
    height: 24px !important;
    margin-left: 12.5px;
    margin-right: 16px;
    cursor: default;
}

.admin-event .title,
.admin-session .title {
    margin-top: 10px !important;
    height: 56px;
}

.admin-event .event-session {
    height: 56px;
}

.admin-event .content-detail,
.admin-session .content-detail {
    margin: 0 !important;
}

.content-detail .detail {
    padding-left: 0 !important;
    padding-top: 8px !important;
}

.content-detail .one.column {
    float: left;
    height: 24px;
    padding-right: 16px;
    width: 76px;
}

.content-detail .one.column p {
    font-family: Prompt;
    font-size: 16px;
    color: #373a3c;
    margin: 4px 0 0 0;
    text-align: left;
}

.content-detail .seven.column {
    height: 24px;
}

.content-detail .seven.column p {
    font-family: NotoSansThai, NotoSans;
    font-size: 16px;
    line-height: 1.5;
    color: #7a7e81;
    text-align: left;
}

.content-detail .right {
    border-left: 1px solid #d3d4d5;
    padding-left: 24px !important;
    padding-top: 8px !important;
}

.right .seven.column a {
    color: #69b0fe;
    text-decoration: underline;
}

.admin-event .divi-line {
    margin-top: 32px;
}

.admin-event .two.grid {
    display: block;
    margin-top: 24px;
    margin-left: 0px;
}

.admin-event .two .column {
    padding: 0 !important;
    width: 50% !important;
}

.admin-event .two .column p {
    margin: 0;
    font-size: 12px;
    font-weight: 300;
    color: #4a4a4a;
}

.admin-event .number p,
.admin-session .number p {
    font-size: 20px !important;
    color: #373a3c !important;
}

.admin-session .four .number {
    width: max-content !important;
}

.admin-session h5 {
    font-family: Prompt;
    font-size: 16px;
    color: #373a3c;
    font-weight: 100;
    margin-top: 32px;
    margin-bottom: 8px;
}

.admin-event h5 {
    font-family: Prompt;
    font-size: 16px;
    color: #373a3c;
    font-weight: 100;
    margin-top: 24px;
    margin-bottom: 32px;
}

.admin-session .divi-line {
    border-top: 1px solid #d3d4d5 !important;
    border-bottom: 0 !important;
    margin-top: 8px;
    margin-bottom: 32px;
}

.admin-event .divi-line {
    border-top: 1px solid #d3d4d5 !important;
    border-bottom: 0 !important;
    margin-top: 32px;
    margin-bottom: 24px;
}

.admin-event .six.column.topics,
.admin-session .six.column.topics,
.admin-session .four.column.topics,
.admin-session .four.column.question,
.staff .four.column.topics,
.staff .four.column.question {
    height: 32Px;
    padding-bottom: 0;
    padding-top: 14px !important;
    margin-bottom: 0 !important;
}

.admin-event .six.column,
.admin-session .six.column {
    padding: 0px;
    height: 32px;
    margin-bottom: 50px;
}

.admin-session .six.column p,
.admin-session .question p,
.admin-event .six.column p {
    font-family: Prompt;
    font-size: 20px;
    line-height: 1.6;
    color: #373a3c;
    font-weight: 100;
    height: 32px;
}

.admin-session .four.column.question,
.staff .four.column.question {
    padding-top: 0px !important;
    top: -6px;
}

.staff .four.column .question,
.staff .four.column .topics {
    margin-right: 14px;
}

.staff a.btn {
    margin-right: 0px !important;
    width: 128px;
}

.staff .st-title {
    border-bottom: 1px solid #d3d4d5;
    margin: 0;
}

.staff .st-title .icon-tooltip,
.staff .st-title .title-first {
    padding: 0 !important;
}

.admin-event .topics p,
.admin-session .topics p,
.staff .topics p {
    font-family: Prompt !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    color: #4a4a4a !important;
    margin-bottom: 0 !important;
    height: 18px !important;
}

.admin-session .question p,
.staff .question p {
    width: max-content !important;
}

.admin-session .feeling,
.admin-event .feeling,
.graph .feeling,
.pulse-description .feeling {
    margin-top: 40px;
    margin-bottom: 0px;
}

.admin-session .amount,
.graph .amount {
    margin-top: 4px !important;
    margin-bottom: 0px;
}

.admin-session .icon-feeling,
.graph .icon-feeling {
    margin-top: 8px !important;
    margin-bottom: 0px;
}

.admin-session .feeling p,
.admin-event .feeling p,
.graph .feeling p,
.pulse-description .feeling p {
    font-family: Prompt;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    color: #4a4a4a;
    margin-bottom: 0;
}

.admin-session .feeling .column,
.admin-event .feeling .column,
.graph .feeling .column,
.pulse-description .feeling .column {
    width: 40px !important;
    padding: 0 4px 6px 4px !important;
    height: 17px;
    margin: 0 16px 0 16px;
}

.admin-session .amount .column,
.graph .amount .column {
    width: 40px !important;
    height: 18px;
    margin: 0 16px 0 16px;
    padding: 0 4px 0 4px !important;
}

.admin-session .icon-feeling .column,
.graph .icon-feeling .column {
    width: max-content !important;
    height: 24px;
    margin: 0 16px 0 16px;
    padding: 0 8px 0 8px !important;
}

.admin-session .feeling .understand,
.admin-event .feeling .understand,
.graph .feeling .understand,
.pulse-description .feeling .understand {
    border-bottom: 2px solid #0AC775;
}

.admin-session .feeling .excite,
.graph .feeling .excite,
.pulse-description .feeling .excite {
    border-bottom: 2px solid #FF645B;
}

.admin-session .feeling .confuse,
.admin-event .feeling .confuse,
.graph .feeling .confuse,
.pulse-description .feeling .confuse {
    border-bottom: 2px solid #F5A623;
}

.admin-session .feeling .nervous,
.graph .feeling .nervous,
.pulse-description .feeling .nervous {
    border-bottom: 2px solid #D8D8D8;
}

.admin-session .feeling .sleepy,
.graph .feeling .sleepy,
.pulse-description .feeling .sleepy {
    border-bottom: 2px solid #69B0FE;
}

.admin-session .amount p,
.graph .amount p {
    font-family: Prompt;
    font-size: 18px;
    color: #4a4a4a;
    margin-bottom: 0;
    text-align: center;
    font-weight: 100;
}

.admin-session .icon-feeling img,
.graph .icon-feeling img {
    width: 24px;
    height: 24px;
}

#sortable {
    list-style-type: none;
    margin: 42px 0 0 0;
    padding: 0;
    width: 100%;
}

.question {
    margin: 0 !important;
}

#sortable li {
    margin: 0 0 8px 0;
    padding: 17px 32px 17px 32px;
    font-family: Prompt;
    font-size: 12px;
    font-weight: 300;
    color: #4a4a4a;
    height: 80px;
    border-radius: 2px;
    border: solid 1px #d3d4d5;
}

#sortable .six.column,
#sortable .eleven.column {
    height: 80px;
    padding: 28px 0 28px 16px;
    font-family: Prompt;
    font-size: 16px !important;
    color: #373a3c;
    text-align: left;
    margin: 0;
}

#sortable .six.column h5,
#sortable .eleven.column h5 {
    margin: 0;
    font-size: 16px;
    color: #373A3C;
    font-family: Prompt;
    font-weight: normal;
}

#sortable .five.column {
    height: 80px;
    padding: 28px 0 28px 0;
    text-align: left;
}

#sortable .five.column p {
    font-family: NotoSansThai !important;
    font-size: 16px;
    line-height: 1.5;
    color: #7a7e81 !important;
    font-weight: 100 !important;
}

#sortable .three.column {
    height: 80px;
    padding: 32px 18px 28px 0;
    text-align: right;
}

#sortable .two.column img {
    width: 24px;
    height: 24px;
}

.setting {
    height: 64px;
    margin: 24px 0 0 0 !important;
}

.setting .heading-set {
    height: 64px;
    border-bottom: 1px solid #e8e9ea;
    padding: 20px 0 20px 0 !important;
    width: 100%;
    cursor: pointer;
}

.setting .heading-set p {
    margin-bottom: 0px;
    font-size: 16px;
    color: #373a3c;
}

.container-setting .heading {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
    height: 32px;
}

.admin-session .qa-result {
    margin-bottom: 16px !important;
}

.admin-session .qa-result .topics,
.admin-session .qa-result .question {
    margin-right: 12px !important;
}

.admin-session .qa-detail {
    border-bottom: 1px solid #e8e9ea;
    height: 81px;
    padding-top: 30px;
    padding-bottom: 26px;
    margin: 0 !important;
}

.admin-session .qa-detail .relations {
    display: inline-block !important;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    line-height: 1.1;
    padding: 6px 0 0 0 !important;
}

.qa-detail .relations {
    font-family: Prompt;
    font-size: 16px;
    color: #373a3c;
    font-weight: 100;
}

.admin-session .qa-detail .result {
    padding: 0 !important;
    text-align: center !important;
}

.qa-detail .result p {
    font-family: Prompt !important;
    font-size: 16px !important;
    color: #373a3c !important;
}

.qa-detail .result .column.question,
.qa-detail .result .column.topics {
    width: 100% !important;
    padding: 0 !important;
}

.qa-detail .result .grid {
    padding-left: 70px;
    margin-right: 12px;
}

.qa-detail .result .question {
    top: 0px !important;
}

.qa-detail .result .column.question {
    text-align: center !important;
    text-align: -webkit-center !important;
}

.qa-detail .result .question p {
    font-family: NotoSansThai !important;
    font-size: 10px !important;
    line-height: 1.6;
    text-align: center !important;
    color: #7a7e81 !important;
}

.admin-session .comment {
    border: 1px solid #e8e9ea;
    margin: 24px 0 0 0;
    padding: 18px 12px 18px 12px;
}

.admin-session .one.column img {
    width: 24px;
    height: 24px;
    margin-right: 4px;
}

.admin-session .say {
    padding-left: 4px !important;
}

.admin-session .speaker {
    padding-top: 10px !important;
}

.admin-session h2 {
    font-family: Prompt;
    font-size: 24px;
    line-height: 1.33;
    color: #373a3c;
    margin-bottom: 24px;
    font-weight: normal;
}

.admin-session .one .num {
    padding-left: 8px;
    font-family: Prompt;
    font-size: 16px;
    font-weight: 500;
    color: #4a4a4a;
}

.admin-session .thirteen {
    font-family: NotoSansThai, NotoSans;
    font-size: 12px;
    line-height: 1.33;
    color: #a7a9ab;
    padding-top: 2px !important;
    padding-bottom: 0 !important;
}

.admin-session .fifteen h5 {
    font-family: NotoSansThai, NotoSans;
    font-size: 16px;
    line-height: 1.5;
    color: #4a4a4a;
    margin: 0;
}

.admin-session .grid .un-edit,
.admin-session .grid .un-del {
    height: 16px;
    font-family: Prompt;
    font-size: 12px;
    line-height: 1.33;
    color: #d3d4d5;
    text-decoration: underline;
    padding-top: 2px !important;
    cursor: pointer;
}

.admin-session .qa-topic {
    margin-bottom: 56px;
}

.admin-session .idea {
    border-bottom: 1px solid #d3d4d5;
}

.admin-session .idea p {
    margin-bottom: 8px;
    font-size: 16px;
}


/* ---------------End Content--------------- */


/* --------------- Questionnaire --------------- */

.segment.form-quest {
    border-radius: 2px !important;
    border: solid 1px #d3d4d5 !important;
    box-shadow: none !important;
    padding: 24px !important;
    width: 100%;
    height: 206px;
    margin-top: 0px;
}

.form-quest .two {
    margin: 0 !important;
}

.form-quest p {
    font-family: NotoSansThai-Regular !important;
    font-size: 16px;
    line-height: 1.5;
    color: #22282d;
    margin-top: 0px !important;
    margin-bottom: 20px !important;
}

.form-quest .inline {
    float: right;
    margin-top: 20px !important;
    display: -webkit-box;
}

.form-quest .form-input {
    margin-bottom: 0 !important;
}

.icon-btn,
.icon-btn:hover {
    padding: 0px !important;
    background-color: #ffffff !important;
}

.icon-btn img {
    width: 24px;
    filter: grayscale(100%);
    opacity: 0.2;
}

.icon-btn:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.icon-btn.det {
    border-right: 1px solid #e8e9ea;
    margin-right: 0px;
    padding-right: 12px !important;
    border-radius: 0;
}

.icon-btn.det {
    margin-right: 12px;
}

.segment.one-answer {
    border-radius: 2px !important;
    border: solid 1px #d3d4d5 !important;
    box-shadow: none !important;
    padding: 24px !important;
    width: 697px;
    height: auto;
}

.one-answer .two {
    margin: 0 0 24px 0 !important;
}

.one-answer p {
    font-family: NotoSansThai-Regular !important;
    font-size: 16px;
    line-height: 1.5;
    color: #22282d;
    margin-top: 0px !important;
    margin-bottom: 20px !important;
}

.one-answer .inline {
    display: block;
}

.one-answer .inline p {
    text-decoration: underline;
    font-family: Prompt !important;
    font-size: 12px !important;
    line-height: 1.33;
    color: #69b0fe !important;
    font-weight: normal !important;
    margin-bottom: 0px !important;
    margin-right: 0px !important;
    margin-top: 16px !important;
    cursor: pointer;
}

.one-answer .inline-btn {
    position: relative;
    float: right;
    margin-top: 12px;
}

.one-answer .answer {
    width: 600px !important;
    margin: 0 4px 8px 0 !important;
    position: absolute;
    margin-bottom: 8px !important;
}

.cancle-list-btn {
    cursor: pointer;
    display: block;
    height: 40px;
    width: 44px;
    border-radius: 2px;
    border: solid 1px #d3d4d5;
    background-color: #fafafa;
    padding: 7px 8px;
    text-align: center;
}

.cancle-list-btn img {
    width: 24px;
}

.cancle-list-btn:hover {
    border: solid 1px #ff3b30;
    background-color: #ff3b30;
}

.cancle-list-btn:hover img {
    content: url(../images/ic-cancle-white.png)
}

.one-answer .cancle {
    float: right;
    left: 47px;
    margin-bottom: 8px;
}


/* ---------------End Questionnaire --------------- */


/* ----------------Selection Dropdown---------------- */

.select-answer .text {
    font-family: NotoSansThai-Regular !important;
    font-size: 14px;
    line-height: 1.14;
    text-align: right;
    color: #4a4a4a !important;
}

.select-answer {
    font-family: NotoSansThai-Regular !important;
    font-size: 14px;
    line-height: 1.14;
    color: #4a4a4a !important;
    width: 202px !important;
    height: 40px !important;
    border-radius: 2px !important;
    border: solid 1px #d3d4d5 !important;
    padding: 11px 18px 13px 18px !important;
}

.select-answer:focus,
.select-answer:hover,
.select-answer.active {
    border: solid 1px #7a7e81 !important;
}

.select-answer .icon {
    color: #d3d4d5;
}

.select-answer .icon:hover,
.select-answer .icon:focus,
.select-answer .icon.active {
    color: #7a7e81;
}

.select-answer.active .menu {
    border-color: #7a7e81 !important;
    box-shadow: none !important;
}


/* ---------- End Selection Drop------------- */


/* -------------Accordion---------------- */

.styled.faq {
    box-shadow: none !important;
    border-bottom: 1px solid #E8E9EA;
    border-radius: 0 !important;
    width: 100% !important;
}

.faq .title:first-child {
    border-top: none !important;
}

.faq .title {
    font-family: Prompt-Light !important;
    font-size: 16px !important;
    color: #373a3c !important;
    padding: 20px 0px 20px 0px !important;
    font-weight: normal !important;
    border-top: 1px solid #E8E9EA !important;
}

.faq .content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
}

.faq .content p {
    font-family: NotoSansThai-Regular !important;
    font-size: 14px;
    line-height: 1.71 !important;
    color: #4a4a4a !important;
}

.styled.quote {
    width: 695px !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 2px 0 rgb(211, 212, 213), 0 0 0 1px rgb(211, 212, 213) !important;
    margin-bottom: 8px;
}

.quote .title {
    padding: 22px 24px 44px 24px !important;
    font-family: Prompt-Light !important;
    font-size: 16px !important;
    color: #373a3c !important;
    display: block;
}

.quote .title img.ic-quote {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    float: left;
}

.quote .title p {
    float: left;
    margin-bottom: 0 !important;
    margin-top: 2px;
    font-family: Prompt;
    font-size: 16px;
    color: #373a3c;
    font-weight: normal;
}

.quote .title a.ic-expand {
    width: 24px;
    height: 24px;
    float: right;
}

.ic-expand #aCollection {
    width: 24px;
    height: 24px;
}

.title a#aCollection {
    content: url(../images/ic-expand@3x.png)
}

.title a#aCollection:hover {
    content: url(../images/ic-expand_hove.png)
}

.title.active a#aCollection.ic-expand {
    content: url(../images/ic-hide@3x.png)
}

.title.active a#aCollection.ic-expand:hover {
    content: url(../images/ic-hide_hover.png)
}

.quote .content {
    padding: 0 24px 40px 24px !important;
}

.quote .content p {
    height: 40px;
    border-radius: 4px;
    background-color: #fafafa;
    font-family: NotoSansThai-Regular !important;
    font-size: 16px;
    line-height: 1.5;
    color: #4a4a4a;
    padding: 8px 16px 8px 16px;
    margin-bottom: 0px;
    margin-top: 8px;
}

.quote .content span {
    font-family: Prompt-Light !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    color: #4a4a4a !important;
    background: none !important;
}


/* ---------End Accordion--------------- */


/* ------------- Check-Box ------------ */

.mo-check {
    width: 464px !important;
    height: 502px;
    background-color: rgb(255, 255, 255) !important;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 4px 0px !important;
    margin: 0 auto !important;
    top: 109px !important;
    bottom: 109px;
    left: 0 !important;
    right: 0;
    border-radius: 0 !important;
}

.qr-code {
    height: 568px !important;
    top: 76px !important;
    bottom: 76px !important;
}

.get-spea,
.get-staff {
    height: 400px !important;
    top: 160px !important;
    bottom: 160px !important;
}

.mo-check .header {
    padding: 10px 10px 24px 32px !important;
    border-bottom-width: 0px !important;
}

.mo-check .close-modal-btn {
    height: 40px;
}

.mo-check .six.column {
    padding-top: 0px;
    padding-bottom: 0px;
}

.mo-check .right.column {
    padding-right: 0 !important;
}

.mo-check p {
    font-family: Prompt;
    font-size: 20px;
    line-height: 1.6;
    color: #373a3c;
    font-weight: normal;
}

.mo-check .content {
    padding: 0 32px 18px 32px !important;
}

.mo-check .content p {
    font-size: 12px;
    font-weight: 300;
    color: #4a4a4a;
    margin: 0;
}

.mo-check .title-name {
    background-color: #fafafa;
    width: 400px;
    height: 50px;
    padding-top: 9px;
    padding-bottom: 9px;
    margin-bottom: 16px;
    margin-top: 8px;
    text-align: center;
}

.mo-check .title-name p {
    font-size: 20px;
    line-height: 1.6;
    color: #373a3c;
    font-weight: normal;
    text-align: center;
}

.mo-check .title-name a {
    font-size: 20px;
    line-height: 1.6;
    font-weight: normal;
    text-align: center;
    color: #69b0fe;
    text-decoration-line: underline;
}

.mo-check .title-img {
    background-color: #fafafa;
    width: 400px;
    height: 210px;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 16px;
    margin-top: 8px;
    text-align: center;
}

.mo-check .title-img img {
    width: 150px;
    height: 150px;
}

.mo-check .form-ft {
    background: #ffffff !important;
    border-top-width: 0px !important;
    padding-right: 36px !important;
}

.mo-check .manage {
    width: 400px;
    height: 48px;
    border-radius: 4px;
    border: solid 1px #e8e9ea;
    display: inline-flex;
    padding: 16px;
    margin-top: 8px;
}

.mo-check .manage label {
    padding-left: 34px;
    font-family: NotoSansThai, NotoSans;
    font-size: 14px;
    line-height: 1.14;
    color: #4a4a4a;
    width: 250px;
    margin-right: 10px;
}

.mo-check .manage p {
    font-family: NotoSans, NotoSansThai;
    font-size: 10px;
    line-height: 1.6;
    color: #afafaf;
}

.manage label:before {
    border-radius: 3px;
    border: solid 1px #e8e9ea !important;
    background-color: #fff;
}

.manage input:hove~label:before {
    border: solid 1px #e8e9ea !important;
}

.manage input:focus~label:before {
    border: solid 1px #e8e9ea !important;
}

.manage label:after {
    color: #ffffff;
    position: absolute;
    margin-top: 2px;
}

.manage input:checked~label:after {
    color: #ffffff !important;
}

.manage input:checked~label:before {
    background: #0ac775 !important;
    border-color: #0ac775 !important;
}

.manage input:checked:focus~label:before {
    background: #0ac775 !important;
    border-color: #0ac775 !important;
}

.manage input:checked:focus~label:after {
    color: #ffffff !important;
}


/* -------------End Check-Box ------------ */


/* -----------Staff-Scan---------- */

.container-scan h1 {
    font-family: Prompt;
    font-size: 48px;
    line-height: 0.67;
    color: #373a3c;
    font-weight: normal;
    text-align: center;
}

.container-scan .img-scan {
    text-align: center;
    margin-top: 64px;
    margin-bottom: 48px;
}

.container-scan .img-scan img {
    width: 402px;
    height: 300px;
}

.container-scan p {
    font-family: NotoSansThai, NotoSans;
    font-size: 14px;
    line-height: 1.14;
    text-align: center;
    color: #373a3c;
}

.container-scan p span{
    color: #68AFFF !important;
    cursor: pointer;
}


/* -----------End Staff-Scan---------- */


/* -----------Staff-More_Event,Staff-More_Session----------- */

.staff .detail {
    margin-top: 24px;
}

.data-staff {
    border-bottom: 1px solid #e8e9ea;
    margin: 0 !important;
}

.data-staff .eight {
    font-family: Prompt;
    font-size: 16px;
    color: #7a7e81;
    margin: 0 !important;
    padding: 20px 8px 16px 0 !important;
    height: 56px;
    font-weight: 100;
}

.data-staff .sixteen {
    font-family: NotoSansThai, NotoSans;
    font-size: 16px;
    line-height: 1.5;
    color: #4a4a4a;
    margin: 0 !important;
    padding: 16px 8px 16px 8px !important;
    height: auto;
    font-weight: 100;
}

.data-staff .sixteen a {
    text-decoration: underline;
    font-size: 16px;
    line-height: 1.5;
    color: #589efe;
}

/* ----------- End-Staff-More_Event,Staff-More_Session----------- */


/* ---------- Menu-Attendee ----------- */

.menu-at,
.menu-sp {
    border-bottom: 1px solid #d3d4d5;
    background-color: #ffffff;
    position: fixed;
    margin: 0;
    height: 80px;
    z-index: 100;
    width: 100%;
    top: 0;
}

.menu-at .grid,
.menu-sp .grid {
    width: 100%;
    max-width: 720px !important;
    height: 80px;
    margin: 0 auto;
}

.menu-at .tab,
.menu-sp .tab {
    text-align: center;
    padding: 10px 14px 8px 14px !important;
}

.menu-at .tab img,
.menu-sp .tab img {
    width: 40px;
    height: 40px;
    opacity: 0.25;
}

.menu-at .tab p,
.menu-sp .tab p {
    opacity: 0.25;
    font-family: Prompt;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    color: #373a3c;
}

.menu-at .tab.active p,
.menu-at .tab.active img,
.menu-sp .tab.active p,
.menu-sp .tab.active img {
    opacity: 1;
}

.menu-at .tab.active,
.menu-sp .tab.active {
    border-bottom: 2px solid #ec1940;
}

@media only screen and (max-width: 767px) {
    .menu-at,
    .menu-sp {
        width: 100%;
        margin: 0 auto;
    }
    .menu-at .grid,
    .menu-sp .grid {
        margin: 0 !important;
    }
    .menu-at .tab p,
    .menu-sp .tab p {
        display: none;
    }
    .menu-at .tab,
    .menu-sp .tab {
        text-align: center;
        padding: 20px 8px 20px 8px !important;
    }
}


/* ----------End Menu-Attendee ----------- */


/* ----------- Attendee ----------- */

.at-more,
.at-questionnaire {
    width: 742px !important;
    margin: 0 auto !important;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 80px;
}

.at-qa {
    width: auto !important;
    max-width: 695px !important;
    margin: 0 auto;
    padding-top: 112px;
    padding-bottom: 100px;
}

.at-pulse {
    width: 340px !important;
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 80px;
    padding-bottom: 208px;
}

.at-success {
    width: 330px !important;
    padding-left: 8px;
    padding-right: 0;
}

.at-document h1,
.at-more h1,
.at-questionnaire h1,
.sp-more h1,
.sp-document h1,
.sp-questionnaire h1,
.sp-qa h1,
.at-qa h1 {
    font-family: Prompt;
    font-size: 24px;
    line-height: 1.33;
    color: #ec1940;
    padding-top: 46px;
    font-weight: normal;
}

.at-document .file-list .fluid.card .file-detail .file-name,
.sp-document .file-list .fluid.card .file-detail .file-name {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    line-height: 1.1;
}

.more {
    margin: 24px 0 0 0 !important;
}

.more .heading-more {
    height: 64px;
    border-bottom: 1px solid #e8e9ea;
    padding: 20px 0 20px 0 !important;
    width: 100%;
    cursor: pointer;
}

.more .heading-more p {
    font-family: Prompt;
    margin-bottom: 0px;
    font-size: 16px;
    color: #373a3c;
}

.at-more .link-bc,
.sp-more .link-bc {
    margin-top: 40px !important;
}

.at-more .more-event h1,
.at-more .more-session h1,
.sp-more .more-event h1,
.sp-more .more-session h1 {
    padding-top: 0px !important;
    margin-top: 24px;
}

.at-pulse .ic-ques {
    margin: 0;
}

.at-questionnaire .ic-ques .two.column,
.at-pulse .ic-ques .two.column {
    padding: 0 10px 16px 0;
    width: 72px !important;
}

.at-questionnaire .ic-ques img,
.at-pulse .ic-ques img {
    width: 62px;
    height: 62px;
}

.at-questionnaire p,
.at-pulse p {
    font-family: Prompt;
    font-size: 48px;
    font-weight: 300;
    line-height: 1.17;
    color: #000000;
    margin-bottom: 0;
}

.at-questionnaire h5,
.at-pulse h5 {
    font-family: NotoSansThai, NotoSans;
    font-size: 16px;
    line-height: 1.5;
    color: #7a7e81;
    margin-top: 12px;
}

.at-pulse .pulse-intro,
.at-pulse .pulse-waiting,
.at-pulse .pulse {
    height: -webkit-fill-available;
    padding: 104px 0 104px 0 !important;
}

.at-suc {
    height: -webkit-fill-available;
    padding: 168px 0 168px 0 !important;
}

.at-questionnaire .ic-ques {
    margin: 0;
}

.at-suc .success {
    width: 322px;
}

.ft-pulse {
    border-top: 1px solid #d3d4d5;
    margin: 0 auto !important;
    height: 208px;
    padding-top: 32px;
    padding-bottom: 32px;
}

.ft-pulse .grid {
    width: 100%;
    margin: 0 auto !important;
}

.ft-pulse .column {
    width: 144px !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 150px !important;
    text-align: center !important;
}

.ft-pulse .column p {
    width: 88px;
    height: 32px;
    border-radius: 100px;
    background-color: #4a4a4a;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    margin: 0 0 0 28px;
    font-family: Prompt;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    color: #ffffff;
    padding-top: 6px;
    padding-bottom: 6px;
    cursor: pointer;
}

.ft-pulse .column img {
    width: 104px;
    height: 104px;
    cursor: pointer;
    transform: scale(0.8, 0.8) translate(0, 0);
    transition: transform 0.21s ease-out;
}

.ft-pulse .column .ic-hover:hover {
    position: relative;
    top: -40px;
    /* transform: scale(1, 1) translate(0, -6px); */
}

.ft-pulse .column .ic-hover.under:hover p {
    background-color: #0AC775;
}
.ft-pulse .column .ic-hover.excite:hover p {
    background-color: #FF645B;
}
.ft-pulse .column .ic-hover.confuse:hover p {
    background-color: #F5A623;
}
.ft-pulse .column .ic-hover.nervous:hover p {
    background-color: #D8D8D8;
}
.ft-pulse .column .ic-hover.sleepy:hover p {
    background-color: #69B0FE;
}

.ft-pulse .column .ic-hover:hover img {
    width: 144px;
    height: 144px;
    cursor: pointer;
    transform: scale(1, 1) translate(0, 0);
}

.ft-pulse.not-push img,
.ft-pulse.not-push p {
    opacity: 0.25;
}

.at-ques {
    width: 696px !important;
    padding-top: 80px;
}

.at-ques .information {
    margin-bottom: 66px;
}

.at-ques .add-ques {
    margin-bottom: 40px;
}

.questionnaire {
    padding-top: 45px;
    padding-bottom: 48px;
    padding-left: 12px;
}

.questionnaire h1,
.add-top h1,
.edit-qa h1 {
    font-family: Prompt;
    font-size: 24px;
    line-height: 1.33;
    color: #ec1940;
    font-weight: normal;
    margin-bottom: 8px;
}

.edit-qa h1 {
    margin-bottom: 24px !important;
}

.questionnaire h5,
.add-top h5 {
    font-family: NotoSansThai;
    font-size: 16px;
    line-height: 1.5;
    color: #22282d;
    margin: 0 0 24px 0;
    font-weight: normal;
}

.questionnaire label {
    font-family: Prompt;
    font-size: 12px !important;
    font-weight: 300 !important;
    color: #4a4a4a !important;
    margin-bottom: 0px !important;
}

.questionnaire .answer-questions {
    margin-bottom: 24px !important;
}

.questionnaire .answer-questions input {
    border-bottom: 1px solid #d3d4d5 !important;
    border-radius: 0 !important;
    border-top-width: 0px !important;
    border-left-width: 0px !important;
    border-right-width: 0px !important;
    font-family: NotoSansThai, NotoSans !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

.questionnaire .dropdown {
    border-bottom: 1px solid #d3d4d5 !important;
    border-radius: 0 !important;
    padding: 8px 16px 8px 0 !important;
    border-top-width: 0px !important;
    border-left-width: 0px !important;
    border-right-width: 0px !important;
}

.questionnaire .select-dropdown {
    margin-bottom: 24px !important;
}

.questionnaire .dropdown i.dropdown {
    border-bottom-width: 0px !important;
    padding-top: 16px !important;
}

.questionnaire .answer-questions input::placeholder,
.questionnaire .answer-questions .dropdown::placeholder {
    color: #a7a9ab;
    font-family: NotoSansThai, NotoSans !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

.questionnaire .answer-questions input:hover,
.questionnaire .answer-questions input:focus,
.questionnaire .answer-questions input.active .questionnaire .dropdown:hover,
.questionnaire .dropdown:focus,
.questionnaire .dropdown.active {
    border-bottom: 1px solid #7a7e81 !important;
}

.questionnaire .ui.selection.active.dropdown,
.questionnaire .ui.selection.active.dropdown .menu,
.questionnaire .ui.selection.active.dropdown:hover .menu,
.questionnaire .ui.selection.dropdown:focus .menu,
.questionnaire .ui.selection.dropdown:hover .menu {
    border-color: #7a7e81 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.questionnaire .ui.selection.dropdown .menu>.item {
    border-top: 0 !important;
}

.questionnaire .ui.radio.checkbox.checked label::before,
.questionnaire .inline .checkbox.checked label::before {
    border-color: #7a7e81 !important;
}

.questionnaire .ui.radio.checkbox label {
    padding-left: 34px !important;
    padding-top: 2px;
}

.questionnaire .ui.radio.checkbox label::before,
.questionnaire .ui.radio.checkbox label::after {
    width: 20px;
    height: 20px;
}

.questionnaire .grouped .ck-box {
    margin-bottom: 18px !important;
    margin-top: 10px !important;
}

.questionnaire .grouped {
    margin-bottom: 24px !important;
}

.questionnaire .inline {
    margin-top: 10px !important;
    margin-bottom: 18px !important;
}

.questionnaire .inline label {
    padding-left: 34px
}

.questionnaire .detail-rat {
    border-bottom: 1px solid #e8e9ea;
    margin: 0 !important;
    height: auto;
}

.questionnaire .detail-rat p {
    font-family: NotoSansThai, NotoSans;
    font-size: 14px;
    line-height: 1.14;
    color: #7a7e81;
    font-weight: normal !important;
}

.questionnaire .text-rat p {
    font-family: Prompt;
    font-size: 16px;
    text-align: center;
    color: #7a7e81;
}

.questionnaire .check-rating {
    margin-bottom: 56px;
}

.questionnaire .check-rating h5 {
    margin-bottom: 12px;
}

.questionnaire button {
    margin-bottom: 48px !important;
    margin-right: 0px !important;
    float: right;
}

.add-top,
.edit-qa {
    padding: 16px 16px 0 16px;
    margin-bottom: 210px;
}

.add-top input {
    border-bottom: 1px solid #d3d4d5 !important;
    border-radius: 0 !important;
    padding: 24px 0 8px 0 !important;
    border-top-width: 0px !important;
    border-left-width: 0px !important;
    border-right-width: 0px !important;
    font-family: NotoSansThai, NotoSans !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #4a4a4a !important;
}

.edit-qa .ui.form,
.add-top .ui.form {
    top: 14px !important;
}

.edit-qa input {
    border-bottom: 1px solid #d3d4d5 !important;
    border-radius: 0 !important;
    padding: 6px 0 8px 0 !important;
    border-top-width: 0px !important;
    border-left-width: 0px !important;
    border-right-width: 0px !important;
    font-family: NotoSansThai, NotoSans !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #4a4a4a !important;
}

.edit-qa textarea {
    /* height: auto !important; */
    background-color: #ffffff !important;
    resize: none !important;
    font-family: NotoSansThai, NotoSans !important;
    font-size: 14px !important;
    line-height: 1.71 !important;
    color: #4a4a4a !important;
    padding: 6px 0 8px 0 !important;
    border-bottom: 1px solid #d3d4d5 !important;
    border-radius: 0 !important;
    border-top-width: 0px !important;
    border-left-width: 0px !important;
    border-right-width: 0px !important;
    margin-bottom: 14px !important;
    color: #4a4a4a !important;
}

.add-top input::placeholder,
.edit-qa input::placeholder {
    color: #a7a9ab;
    font-family: NotoSansThai, NotoSans !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

.add-top input:hover,
.add-top input:focus,
.add-top input.active,
.edit-qa input:hover,
.edit-qa input:focus,
.edit-qa input.active {
    border-bottom: 1px solid #7a7e81 !important;
}

.edit-qa .answer-questions label {
    font-family: Prompt;
    font-size: 12px !important;
    font-weight: 300 !important;
    color: #4a4a4a !important;
    margin: 0 !important;
}

.at-qa .link-bc {
    margin: 40px 0 22px !important;
}

.at-qa h2 {
    font-family: Prompt;
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 24px;
    margin-top: 0;
    color: #373a3c;
}

.at-qa .qa-topic {
    height: auto;
    display: flex;
    flex-direction: row;
}

@media only screen and (max-width: 767px) {
    .more-event .sixteen.mobile,
    .more-session .sixteen.mobile {
        padding: 0 0 16px 0 !important;
    }
    .more-event .eight.mobile,
    .more-session .eight.mobile {
        padding: 16px 0 0 0 !important;
        height: max-content;
    }
    .at-questionnaire .ic-ques {
        margin: 0;
    }
    .at-questionnaire .success,
    .at-pulse .intro {
        padding-left: 0;
    }
    .at-pulse p {
        font-size: 40px;
    }
    .at-pulse h5 {
        font-size: 14px;
    }
    .ft-pulse {
        height: 112px;
        padding-top: 28px;
        padding-bottom: 28px;
    }
    .ft-pulse .grid img {
        width: 56px;
        height: 56px;
    }
    .ft-pulse .column p {
        display: none;
    }

    .ft-pulse .column .ic-hover:hover {
        top:0 !important;
    }
    .ft-pulse .column .ic-hover:hover img{
        width: 56px !important;
        height: 56px !important;
    }
    .at-pulse .pulse-intro {
        padding: 112px 4px 112px 4px !important;
        margin: 0 auto !important;
    }
    .at-pulse .pulse-waiting {
        padding: 112px 0 112px 0 !important;
        margin: 0 auto !important;
    }
    .at-pulse {
        padding-bottom: 112px;
    }
    .at-suc {
        padding: 128px 6px 128px 6px !important;
        margin: 0 auto !important;
    }
    .at-success {
        padding-left: 0;
        padding-right: 0;
    }
    .questionnaire .star-rating {
        text-align: left;
    }
    .add-top .form-ft,
    .edit-qa .form-ft {
        display: flex;
        float: none !important;
    }
    .add-top .form-ft .button,
    .edit-qa .form-ft .button {
        width: 100%;
        height: 40px;
    }
    .add-top,
    .edit-qa {
        padding-bottom: 0px;
        margin-bottom: 100px;
    }
    .container-add,
    .container-edit {
        margin: 0 auto;
        width: 100%;
    }
    .close-page-btn .right.column {
        padding-right: 8px !important;
        padding-top: 0px !important;
    }
    .add-top .answer-questions,
    .edit-qa .answer-questions {
        margin-bottom: 24px !important;
    }
    .at-qa {
        margin-left: 1em !important;
        margin-right: 1em !important;
    }
}

@media only screen and (max-width: 991px) and (min-width: 768px) {
    .ui.container.at-more,
    .ui.container.at-document {
        margin-left: 36px !important;
        margin-right: 36px !important;
    }
    .at-pulse .pulse-intro,
    .at-pulse .pulse-waiting {
        padding: 255px 0 255px 0 !important;
    }
    .at-success {
        width: 350px !important;
    }
    .at-suc {
        padding: 302px 8px 302px 8px !important;
        margin: 0 auto !important;
    }
    .close-page-btn .right.column {
        padding-right: 36px !important;
    }
}

@media only screen and (min-width: 600px) and (max-width: 1023px) {
    .at.pulse {
        width: 100% !important;
        max-width: 695px !important;
        position: absolute;
        bottom: 248px;
        left: 6%;
        right: auto;
    }
}

@media only screen and (min-width: 1024px) {
    .at-document {
        width: 54.219% !important;
    }
    .at.pulse {
        width: 100% !important;
        max-width: 695px !important;
        position: absolute;
        bottom: 228px;
        left: 50%;
    }
    .at.pulse .pulse-progress {
        position: relative;
        left: -50%;
    }
}

@media only screen and (max-width: 599px) {
    .at-document .file-list .column {
        width: 50% !important;
    }
    .at.pulse {
        width: 100% !important;
        max-width: 695px !important;
        position: absolute;
        bottom: 124px;
    }
    .at.pulse .pulse-progress {
        padding-left: 24px;
        padding-right: 24px;
    }
    .ft-pulse .column{
        width: 56px !important;
        height: 56px !important;
        padding: 0 !important;
        margin: 0px 8px 0 8px !important;
        height: 150px !important;
        text-align: center !important;
    }
    .ft-pulse .column .ic-hover:hover img{
       width: 56px !important;
       height: 56px !important;
    }
    .at-qa .cm button,
    .sp-qa .cm button{
        width: -webkit-fill-available !important;
    }
}
@media only screen and (max-width: 320px) {
    .ft-pulse .column{
        margin: 0px 4px 0 4px !important;
    }
    .at-qa .cm button,
    .sp-qa .cm button{    
        width: -webkit-fill-available !important;
    }
}


/* ----------End Attendee----------- */


/* ----------- Speaker ----------- */

.menu-sp {
    top: 32px;
}

.speaker-bar {
    position: fixed;
    z-index: 100;
    width: 100%;
    top: 0;
}

.speaker-bar .ui.container {
    display: flex;
}

.speaker-bar {
    background-color: #4a4a4a;
}

.speaker-bar label {
    display: block;
    line-height: 1.3;
    font-family: NotoSansThai, NotoSans;
    font-size: 10px;
    font-weight: 100;
    color: #fff;
}

.speaker-bar label span {
    font-family: Prompt;
    margin-right: 4px;
}

.speaker-bar img {
    float: left;
    line-height: 1;
    margin-right: 8px;
}

.speaker-bar .ui.container .end-btn button {
    height: 24px;
    width: 100px;
    /* padding: 7px 18px !important; */
    background-color: #7a7e81 !important;
    border-radius: 2px !important;
    font-family: Prompt;
    font-weight: 100;
    font-size: 10px;
    color: #fff;
}

.sp-more .heading-more:last-child {
    display: flex;
    border-bottom: none;
}

.sp-more .heading-more img {
    margin-right: 12px;
}

.speaker-bar .ui.container .column {
    padding: 10px 16px;
}

.sp-more,
.sp-document,
.sp-questionnaire,
.sp-qa,
.sp-pulse {
    width: auto !important;
    max-width: 695px !important;
    margin: 0 auto;
    padding-top: 112px;
    padding-bottom: 100px;
}

.qa-title {
    display: flex;
}

.qa-title .qa {
    float: left;
    width: 50%;
}

.qa-title .add-qa {
    float: right;
    text-align: right;
    width: 50%;
}

.qa-title .add-qa a {
    margin-top: 37px;
}

.qa-total {
    margin-top: 20px;
    width: 100% !important;
    max-width: 695px !important;
    border-collapse: collapse;
}

.qa-total tr {
    border-bottom: 1px solid #e8e9ea;
    color: #373a3c;
    font-family: Prompt;
    font-size: 16px;
    font-weight: 100;
    height: 80px;
}

.qa-total tr th {
    font-family: Prompt;
    font-size: 16px;
    font-weight: 100;
    color: #373a3c;
    overflow: hidden !important;
    padding-right: 84px;
    text-overflow: ellipsis;
    text-align: left;
    max-width: 420px;
    white-space: nowrap;
}

.qa-total tr td {
    text-align: center;
    width: 56px;
}

.qa-total tr td span {
    font-family: NotoSansThai;
    font-size: 10px;
    line-height: 1.6;
    color: #7a7e81;
    text-align: center;
}

.sp-qa .link-bc {
    margin: 40px 0 22px !important;
}

.sp-qa h2 {
    font-family: Prompt;
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 24px;
    margin-top: 0;
    color: #373a3c;
}

.sp-qa .qa-topic {
    height: auto;
    display: flex;
    flex-direction: row;
}

.vote-btn {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 24px;
}

.vote-btn button {
    border: none;
    background-color: #fff;
    cursor: pointer;
    min-width: 24px;
}

.vote-btn button:focus {
    outline: none;
}

.vote-btn button.active img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    opacity: 1;
}

.vote-btn.active label {
    color: #ec1940;
}

.vote-btn img {
    height: 16px;
    margin-left: -6px;
    width: 24px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.5;
}

.vote-btn label {
    font-family: Prompt;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: #4a4a4a;
    line-height: 1.5;
    margin-top: 2px;
}

.qa-topic .topic-content p {
    font-family: NotoSansThai, NotoSans;
    font-size: 16px;
    padding-left: 16px;
    color: #4a4a4a;
}

.qa-topic .topic-content .topic-info {
    display: flex;
    justify-content: space-between;
}

.qa-topic .topic-content .topic-info .topic-by p {
    font-family: NotoSansThai, NotoSans;
    font-size: 12px;
    line-height: 1.7;
    color: #a7a9ab;
}

.comment-total {
    margin-top: 56px;
    margin-bottom: 24px;
    border-bottom: 1px solid #d3d4d5;
    padding-bottom: 8px;
}

.comment-total label {
    font-family: Prompt;
    font-size: 16px;
    color: #373a3c;
}

.qa-comment {
    margin-top: 16px;
    border-radius: 2px;
    background-color: #ffffff;
    border: solid 1px #e8e9ea;
    padding: 32px 24px;
    display: flex;
    flex-direction: row;
}

.qa-comment .comment-content {
    margin-left: 16px;
}

.qa-comment .comment-content .comment-number {
    display: flex;
    flex-direction: row;
    margin-bottom: 8px;
}

.qa-comment .comment-content .comment-number img {
    width: 24px;
    height: 24px;
    margin-right: 4px;
}

.qa-comment .comment-content .comment-number label {
    font-family: Prompt;
    font-size: 16px;
    color: #373a3c;
    line-height: 1.4;
}

.qa-comment .comment-content p {
    font-family: NotoSansThai, NotoSans;
    font-size: 16px;
    color: #4a4a4a;
}

.qa-comment .comment-content .comment-info {
    display: flex;
    justify-content: space-between;
}

.qa-comment .comment-content .comment-info .comment-by p {
    font-family: NotoSansThai, NotoSans;
    font-size: 12px;
    line-height: 1.7;
    color: #a7a9ab;
}

.qa-comment .comment-content .comment-info .comment-by.speaker {
    display: flex;
    flex-direction: row;
}

.qa-comment .comment-content .comment-info .comment-by.speaker img {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    margin-right: 9px;
}

.pulse-detail {
    display: flex;
    justify-content: space-between;
    padding: 45px 0 50px;
}

.pulse-detail .pulse-state {
    display: flex;
    flex-direction: row;
}

.pulse-detail .pulse-state .item {
    margin-right: 36px;
}

.pulse-detail .pulse-state .item p {
    font-family: Prompt;
    font-size: 12px;
    font-weight: 300;
    color: #4a4a4a;
}

.pulse-detail .pulse-state .item p span {
    font-family: Prompt;
    font-size: 20px;
    line-height: 1.6;
    color: #373a3c;
}

.sp-pulse .pulse-menu {
    display: flex;
    flex-direction: row;
}

.pulse-progress {
    display: flex;
    align-items: flex-end;
    height: 344px;
    padding-left: 40px;
}

.pulse-progress .progress-bar {
    border-radius: 50px;
    margin-right: 104px;
    width: 40px;
    min-width: 24px;
    position: relative;
    max-height: 100%;
}

.pulse-progress .progress-bar:last-child {
    margin-right: 0;
}

.pulse-progress .progress-bar.understand {
    background-color: #0AC775;
    height: 100%;
}

.pulse-progress .progress-bar.excite {
    background-color: #FF645B;
    height: 50%;
}

.pulse-progress .progress-bar.confuse {
    background-color: #F5A623;
    height: 50%;
}

.pulse-progress .progress-bar.nervous {
    background-color: #D8D8D8;
    height: 50%;
}

.pulse-progress .progress-bar.sleepy {
    background-color: #69B0FE;
    height: 1%;
}

.label-progress {
    display: flex;
    position: absolute;
    top: -28px;
}

.label-progress .icon-progress {
    margin-right: 4px;
}

.label-progress .icon-progress img {
    width: 24px;
}

.label-progress .count-progress label {
    font-family: Prompt;
    font-size: 24px;
    font-weight: 500;
    color: #393939;
    line-height: 1;
}

@media only screen and (min-width: 1024px) {
    .speaker-bar .ui.container {
        margin: 0 auto !important;
        width: 60% !important;
        height: 32px;
    }
}

@media only screen and (min-width: 600px) {
    .speaker-bar .ui.container .speaker-name {
        width: 70%;
    }
    .speaker-bar .ui.container .online-user {
        width: auto;
        min-width: 12%;
    }
    .speaker-bar .ui.container .time {
        width: auto;
        min-width: 14%;
    }
    .speaker-bar .ui.container .end-btn {
        width: auto;
        min-width: 14%;
        padding: 4px 16px;
    }
    .qa-total.small {
        display: none;
    }
    .sp-pulse .pulse-menu a img {
        display: none;
    }
}

@media only screen and (min-width: 600px) and (max-width: 1023px) {
    .speaker-bar .ui.container {
        margin: 0 auto !important;
        width: 92% !important;
        height: 32px;
    }
}

@media only screen and (max-width: 599px) {
    .sp-more,
    .sp-document,
    .sp-questionnaire,
    .sp-qa,
    .sp-pulse {
        margin-left: 1em !important;
        margin-right: 1em !important;
    }
    .speaker-bar .ui.container .speaker-name {
        display: none;
    }
    .speaker-bar .ui.container .online-user {
        width: auto;
        min-width: 24%;
        padding-left: 0;
    }
    .speaker-bar .ui.container .time {
        width: auto;
        min-width: 44%;
    }
    .speaker-bar .ui.container .end-btn {
        width: auto;
        min-width: 14%;
        padding: 4px 16px;
    }
    .sp-document .file-list .column {
        width: 50% !important;
    }
    .qa-total.large {
        display: none;
    }
    .qa-total.small tr th {
        max-width: 280px;
        padding-right: 0px;
    }
    .qa-total.small tr th p {
        font-family: NotoSansThai;
        font-size: 10px;
        line-height: 1.6;
        color: #7a7e81;
        text-align: left;
    }
    .pulse-detail .pulse-state .item {
        margin-right: 16px;
    }
    .sp-pulse .pulse-menu a {
        width: 46px;
        padding: 4px;
    }
    .sp-pulse .pulse-menu a span {
        display: none;
    }
    .graph .feeling .column,
    .graph .amount .column,
    .graph .icon-feeling .column,
    .pulse-description .feeling .column {
        margin: 0 8px 0 8px;
    }
    .pulse-description .feeling {
        margin-top: 32px;
    }
    .pulse-progress {
        padding-left: 8px;
        padding-right: 8px;
        max-height: 300px;
        margin-top: 10px;
    }
    .pulse-progress .progress-bar {
        margin-right: 38px;
    }
    .label-progress {
        display: flex;
        position: absolute;
        top: -53px;
        color: black;
        flex-direction: column;
        text-align: center;
    }
    .label-progress img {
        margin-left: 6px;
    }
    .qa-topic .topic-content .topic-info,
    .qa-comment .comment-content .comment-info {
        flex-direction: column;
    }
    .qa-topic .topic-content .topic-info .setting-topic a {
        padding-left: 16px;
    }
}


/* ----------- End Speaker ----------- */


/* -------------- Input----------- */

.input-questions {
    position: relative;
    margin-bottom: 24px !important;
}

.input-questions input {
    padding: 6px 0 8px 0 !important;
}

.input-questions input:focus {
    outline: none;
}

.input-questions textarea {
    /* height: auto !important; */
    background-color: #ffffff !important;
    resize: none !important;
    font-family: NotoSansThai, NotoSans !important;
    font-size: 14px !important;
    line-height: 1.71 !important;
    color: #4a4a4a !important;
    padding: 6px 0 8px 0 !important;
    border-bottom: 1px solid #d3d4d5 !important;
    border-radius: 0 !important;
    border-top-width: 0px !important;
    border-left-width: 0px !important;
    border-right-width: 0px !important;
    margin-bottom: 14px !important;
    color: #4a4a4a !important;
}

.input-questions label {
    font-family: NotoSansThai, NotoSans !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-bottom: 0px !important;
    color: #a7a9ab !important;
    font-weight: normal !important;
    position: absolute;
    pointer-events: none;
    left: 0px;
    top: 10px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}


/* active state  */

.input-questions input:focus~label,
.input-questions input:valid~label,
.input-questions textarea:focus~label,
.input-questions textarea:valid~label {
    top: -16px;
    font-family: Prompt;
    font-size: 12px !important;
    font-weight: 300 !important;
    color: #4a4a4a !important;
    margin-bottom: 0px !important;
}

.input-questions .bar {
    position: relative;
}

.input-questions .bar:before,
.input-questions .bar:after {
    content: '';
    height: 2px;
    width: 0;
    position: absolute;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

textarea {
    box-sizing: border-box;
    resize: none;
}
/* input comment */
.at-qa .cm,
.sp-qa .cm{
    padding-left: 0 !important;
}
.at-qa .cm button,
.sp-qa .cm button{    
    width: 112px;
}
.at-qa .cm .divider,
.sp-qa .cm .divider{
    margin-top: 8px;
    margin-bottom: 24px;
    border-top: 1px solid #d3d4d5 !important;
    border-bottom: none !important;
}
.at-qa .cm p,
.sp-qa .cm p{
    margin-bottom: 8px;
    font-family: Prompt;
    font-size: 16px;
    color: #373a3c;
    font-weight: 100;
}