body { padding: 0; margin: 0; font-family:CS ChatThaiUI; font-size: 16px;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{font-family:CS ChatThaiUI;}
.menu_left{padding:20px;background-color: #fff;position: absolute;z-index: 99;width: calc(100% - 60px);height: -webkit-fill-available;box-shadow: 2px 5px 10px rgba(0,0,0,.2);}
.menu-list a{color: #000;padding: 10px 10px 10px 30px;display: block;}
.menu-list{}
.right-container{padding: 20px;}
.head {width: 100%;box-sizing: border-box;background: #22b573;padding: 0 8px 0;position: relative;}
/*.head .logo {display: inline;float: left;padding-top: 5px;}*/
.head .logo img {width: 170px;height: auto;}
/*.head .portal {display: inline;float: left;height: auto;margin: 7px 0 0 20px;}*/
.head .portal h1, .head .portal h2 {font-weight: normal;color: #FFF;font-size: 24px;line-height: 50px;display: inline;float: left;}
/*.head>div {margin: 0 auto;position: relative;}*/
/*.head>div:after {content: "";display: block;clear: both;}*/
/* vue css */
/* วิธีใช้  ครอบdomด้วย <transition name="fade"> ที่domต้องการ  */
.fade-enter-active, .fade-leave-active {transition: opacity .5s;}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {opacity: 0;}

.slide-fade-enter-active {transition: all .3s ease;}
.slide-fade-leave-active {transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);}
.slide-fade-enter, .slide-fade-leave-to{transform: translateX(10px); opacity: 0;}

select.custom{    -webkit-appearance:none;
	background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #fff, #fff);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;}

/*body{ font-family: 'Mitr', sans-serif; font-size: 16px;}
h1,h2,h3,h4,h5,h6,code, kbd, pre, samp{font-family: 'Mitr', sans-serif;}*/

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
input[type=number] {-moz-appearance:textfield;}

.upload_avater{}
.upload_avater figure{width: 180px;height: 180px;margin: 0 auto 24px;border-radius: 50%;background: #E4E4E4;border: 6px solid #1386d3;position: relative;}
.upload_avater figure div{ overflow: hidden; border-radius: 50%; width: 100%; height: 100%;}
.upload_avater figure input{position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; opacity: 0; z-index: 3; cursor: pointer;}
.upload_avater figure img {width: 100%;height: auto; display: block; }
.upload_avater figure i{ position: absolute; bottom: 1px; right: 11px; background: #FFF; border-radius: 50%; width: 36px; height: 36px; text-align: center;box-sizing: border-box;padding-top: 7px;border: 3px solid #1386d3; z-index: 1;}
.upload_avater figure .default_upload_img.disable {
  filter: grayscale(0.9) blur(2px);
  -webkit-filter: grayscale(0.9) blur(2px);
  opacity: 0.7;
}
.btn_upfile{ position:relative; cursor: pointer;}
.btn_upfile input{ display: block; position:absolute; top:0; left:0; z-index:2; width:100%; height:100%; opacity:0; cursor: pointer; }
.show_img{ width: 400px; margin: auto;}
.show_img img{ display: block; width: 100%; height: auto;}

.btn_facebook{ background: #36679e; border:#2b5b92;}
.ava{ display: block; width: 80px; height: 80px; border-radius: 50%;}

.btn_google{ background: #FFF;}
.btn_google i{ width: 20px; height: 20px; display: inline-block; vertical-align: text-bottom;}
.btn_google i img{ width:100%; height:auto; display: block;}

#img_cover_crop{ width:auto; height: 100%; max-width: 100%; display: block; margin: auto;}
#member_modal .modal-dialog{ max-width: 650px;}

.mailPass{position: relative;}
.mailPass .coverMail,.mailPass .form-control{ background-color: #77e1b2; padding: 0.375rem 0.75rem; border-radius: 5px; background-image:none;}
.mailPass .coverMail{line-height: 44px;padding: 0 .75rem}
.mailPass:after{ font-family: "themify"; content: "\e64c"; display: block; position: absolute; top:6px; right:17px; background: #FFF; border-radius: 50%; font-size: 14px; text-align: center; box-sizing: border-box; padding: 3px 0 0; width: 26px; height: 26px;}


.password_eye{ position: relative; }
.password_eye .btn_eye{ cursor: pointer; position: absolute; top:50%; right:8px; transform: translateY(-50%); z-index: 3; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #FFF; box-sizing: border-box; background:url("../images/svg/eye_close.svg") no-repeat center center #FFF; background-size: 20px 20px;}
.password_eye .btn_eye:hover{ border: 1px solid #eee}
.password_eye .btn_eye.active{ background:url("../images/svg/eye_open.svg") no-repeat center center #FFF; background-size: 20px 20px;}

/*.add_member_form */.form-control{height: 44px;}

@media only screen and (min-width: 960px) {
/* For desktop: */
.menu_left{width: 300px;float: left;display: block;box-shadow: none;}
.right-container{width: calc(100% - 300px);float: right;padding:20px;}
.menu-list a{    padding: 10px 10px 10px 30px;border-radius: 60px 0 0 60px;}
.menu-list a:hover{color: #22b573}
.menu-list a.active{ color: #22b573; background: #edf1f5;padding-right: 0!important;margin-right: -20px;}
}