html, body {height: 100%;margin: 0;padding: 0;background-color:#ffffff !important}
.wrapper{width:100%}
.align-item-stretch{-webkit-box-align:stretch !important;align-items:stretch !important;}
.d-flex{display:flex !important;}
a {color: #c70f37;}
h2{margin:0;}

/*layout*/
/*#sidebar{transition:all 0.3s;-webkit-transition:all 0.3s;}*/
#sidebar #menu-main{position:fixed;min-width:80px;max-width:80px;background-color:#c70f37;height:100vh;text-align:center;color:#ffffff;}
#sidebar #menu-main .more{background-color:#d86880;}
#sidebar #menu-sub{position:fixed;width:calc(100% - 80px);z-index:999;min-width:300px;overflow-y:auto;top:1px;left:81px;transition: all 0.5s;overflow-x: hidden;}
#sidebar #menu-sub.active{position:fixed;width:calc(100% - 80px);}
#sidebar #menu-sub ul.components {display:inline-block;vertical-align: top;padding: 0;border-bottom: 1px solid #c70f37;border-right: 1px solid #c70f37;}
#sidebar #menu-sub ul .menu-sub-actions {padding: 10px;}
#sidebar #menu-sub ul li a {padding: 10px;font-size: 1.1em;display: block;}
#sidebar #menu-sub ul li a:hover {color: #7386D5;background: #fff;}
#sidebar #menu-sub ul li.active > a, a[aria-expanded="true"] {color: #fff;background: #d86880;}
#sidebar #menu-sub ul ul a {font-size: 0.9em !important;padding-left: 30px !important;}
#sidebar #menu-sub .current {background-color:#eeeeee;}
#menu-sub .menu-sub-title{padding-left:10px;margin-top:10px;}
#sidebar .btn-collapse{float:right;}
#sidebar .dropdown-toggle:after{content:"\f077";font-family: FontAwesome; float: right;}
#sidebar .dropdown-toggle.collapsed:after{content:"\f078";font-family: FontAwesome; float: right;margin-left: 10px;}
#sidebar .nav a{background-color:#c70f37;color:#ffffff;border-bottom:1px solid rgba(255,255,255,0.5);}
#sidebar .nav a span{display:block;font-size:24px;}
#sidebar .nav a i{font-size:18px;margin-right:10px;}
#sidebar .dropdown-menu {top: 0;left: 79px;background-color: #c70f37;padding:0;display:block;z-index:-1;width:200px}
#sidebar .dropdown-menu>li>a {padding: 10px 20px 10px 10px;}
#sidebar .dropdown-menu-level2 {top: -3px;left: 199px;background-color: #c70f37;padding:0;display:block;z-index:-1;width:250px;position: absolute;
    float: left;margin: 2px 0 0;font-size: 14px;text-align: left;list-style: none;background-color: #fff;-webkit-background-clip: padding-box;background-clip: padding-box;
    border: 1px solid #ccc;border: 1px solid rgba(0,0,0,.15);border-radius: 4px;-webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
}
#sidebar .dropdown-menu-level2>li>a {display: block; padding: 10px 20px 10px 10px;clear: both; font-weight: 400; line-height: 1.42857143;white-space: nowrap;}
#sidebar .nav li a:hover {background-color: #000000;}
#sidebar .more-menu{position:relative;}
#sidebar .more-menu:before{content:"\f054";font-family: FontAwesome; right: 10px;position:absolute;top:10px;}
#content{width:calc(100% - 80px);min-height:100vh;position: absolute;padding:3rem;margin-top:40px;margin-left:80px;}
.actions{width:160px;}
table .btn{margin:2px;}
.number{text-align: right;}
#sidebar ol, #sidebar ul {
    margin-top: 0;
    margin-bottom: 0;
    background-color: #ffffff;
}
#sidebar .top-left{float:left;}
#sidebar .top-name{float:right;padding:10px;background-color: #ffffff;font-weight:bold;}
#sidebar .menu-report{display:inline-block;}

/*widgets*/

.box{-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
.white{background-color:#fff;}
.round-border{border: 1px solid #ccc;padding:20px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
.table-list{width:100%;border-collapse:collapse;border-radius:10px;overflow:hidden;}
.table-list th {padding:1em;background:#d86880;border-bottom:1px solid #ffffff;color:#ffffff;}
.table-list th a{color:#ffffff;}
.table-list td {padding:1em;background:#ffe6eb;border-bottom:1px solid #ffffff;}
.table-list tr:hover td{background:#f5c6cf;}
.row-link{cursor:pointer;}
#sortable{margin:0;padding:0;}
#sortable li{list-style-type:none;margin:0;margin-bottom:1px;}
.drag-drop{background:#ffe6eb;padding:15px;}
.no-drag-drop{padding:0;}
.ui-state-default{border:0px;background:#ffffff;}
.row-topic{background-color:#ffe0e7;padding:10px 0;}
.sp-code{background-color:#f5f4ba;padding:5px;border-radius: 5px;}
.sp-value{background-color:#ffe0e7;padding:5px;border-radius: 5px;margin-left:10px;}
.sp-formular{font-size:70%;font-style: italic;}
.message{padding:10px;border-radius: 10px;margin-bottom:10px;}
.message.success{background-color:#bce6c6;color:#436f4d;}
.message.error{background-color:#f9e2db;color:#c15332;}
.status-0{color:#cc0000;}
.table-report{width:100%;border-collapse:collapse;font-size:0.8em;}
.table-report th, .table-report td{border: 1px solid #000000;padding:2px;text-align:center;}
.table-report th{background-color:#eeeeee;}
.non-thai{display:none;}

/*elements*/
.txt-blue{color:#c70f37;}
.topic{color:#c70f37;}
.bold{font-weight:bold;}
.delete{color:#ff0000;}
.box-icon-link{margin-bottom:30px;}
.icon-link{display:inline-block;text-align:center;margin-left:20px;color:#dd5825;}
.icon-link-blue{display:inline-block;text-align:center;;border: 0;background-color: transparent;color:#337ab7;}
.icon-link-blue a{color:#337ab7;}
.icon-chart a{color:#337ab7;}
.txt-sm{font-size:0.5em;}
.txt-md{font-size:1em;}
.txt-bg{font-size:1.5em;}
.txt-lg{font-size:2em;}
.note{color:#cccccc;}
.btn-icon{cursor:pointer;}
.status-fail{color:#990000;}
.status-success{color:#009900;}
.file-download{margin:10px 0;}

/*controls*/
.btn-full-width{min-width:100%;}
.btn-blue{background-color:#c70f37;color:#fff;}
.radio label{margin-right:10px;}

/*responsive*/
@media (max-width: 680px) {
html, body {;background-color:#fff !important}
.box-style{padding-top:0;}
.box{-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;}

}


/* ============ desktop view ============ */
@media all and (min-width: 992px) {
	.navbar .nav-item .dropdown-menu{ animation:out 0.5s both;-webkit-animation:out 0.5s forwards; }
	.navbar .nav-item:hover .nav-link{ color: #fff;  }
	.navbar .nav-item:hover .dropdown-menu{ animation:in 0.5s both;-webkit-animation:in 0.5s forwards; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
  
  .navbar .dropdown-menu .nav-item .dropdown-menu-level2{ animation:out2 0.1s both;-webkit-animation:out2 0.1s forwards; }
  .navbar .dropdown-menu .nav-item:hover .dropdown-menu-level2{ animation:in2 0.5s both;-webkit-animation:in2 0.5s forwards; }
  
  @-webkit-keyframes in {
    0% {left: -300px;}
    100% {left: 79px;}
  }
  @keyframes in {
    0% {left: -300px;}
    100% {left: 79px;}
  }
  @-webkit-keyframes out {
    0% {left: 79px;}
    100% {left: -300px;}
  }
  @keyframes out {
    0% {left: 79px;}
    100% {left: -300px;}
  }
  @-webkit-keyframes in2 {
    0% {left: -400px;}
    100% {left: 199px;}
  }
  @keyframes in2 {
    0% {left: -400px;}
    100% {left: 199px;}
  }
  @-webkit-keyframes out2 {
    0% {left: 199px;}
    100% {left: -400px;}
  }
  @keyframes out2 {
    0% {left: 199px;}
    100% {left: -400px;}
  }
}	
/* ============ desktop view .end// ============ */