:root{
    --white: #FFFFFF;
    --red1 : #f44336;
    --gray : #777;
    --purple: #3a024f;
    --yellow: #ffc107;
}
*{
	margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-family: 'Prompt', sans-serif;
}
html,
body{
	background-color: #ffffff;
}
@font-face {
  font-family: "Mitr-Bold";
  src: url(../fonts/Mitr-Regular.ttf);
}
.ace {
  font-family: "Mitr-Bold";
  font-size: 100px;
}
.container-main{

	width: 100%;
	padding-left: 8%;
	padding-right: 8%;
}

.row{

	margin: auto;
	width: 100%;
	padding: 10px;
}

.col{
	width: 100%;
	margin-top: 20px;
}

.btn-card-detail{
	width: 100%;
	margin-top: 10px;
}

.row-top{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 50px;
	margin-bottom: 50px;
}

.col-1{
	flex-basis: 50%;
	position: relative;
	
}
.center-inner{
	display: table;
  margin: 0 auto;
}

.col-2{
	margin-left: 50px;
	margin-right: 50px;
	position: relative;
	flex-basis: 50%;
}
.col-2 h5{
	font-size: 20px;
	font-weight: bold;
}

.youtube-class{
	height: 350px; 
	width: 600px;
}

.text-title{
	font-weight: bold;
}
.box-body{
    background: #EDEDED;
    margin-left: 10%;
    margin-right: 10%;
    border-radius: 5px;
}
.box-menu{
   margin: auto;
   width: 70%;
   padding: 0px;
   margin-top: 30px;
 }
 .box-detail{
 	 background: white;
    margin: 0.1%;
    border-radius: 5px;
    padding-bottom: 20px;
    padding-top: 20px;
 }
 .dev-txt-detail{
 	margin-left: 30px;
   margin-right: 30px;
 	padding-top: 20px;
}
.txt-title{
   font-weight: bold;
   color: #000;
   font-size: 18px;
}
.text-btn-detail{
  margin-top: 5px;
  color: white;
}
.btn-detail{
	width: 100%;
}
.text-btn-demo{
  margin-top: 5px;
  color: #663A82;
}
.txt-web-title:before {
  font-family: "Mitr-Bold";
  color: #FFF;
  font-size: 20px;
  /*content: "ระบบสารสนเทศสำหรับบริหารจัดการเครื่องมือแพทย์ในโรงพยาบาล WepMEt";*/
}
.nav-top{
	background-color: #663A82;
	height: 90px;
}
.nav-bottom{
	background-color: #8148A6; 
	margin-top: -16px;
	padding-left: 20px;
}
.txt-footer-copy:before{
	content: " copyright ระบบสารสนเทศสำหรับบริหารจัดการเครื่องมือแพทย์ในโรงพยาบาล WepMEt - All rights reserved.";
}
.frame-request{
	margin-top: 30px; 
	border-radius: 15px;
	padding-top: 10px;
	background-color: white;
}
.frame-request-shadow{
  -webkit-box-shadow: 3px 5px 5px 6px #E8E8E8; 
  -moz-box-shadow:    3px 3px 5px 6px #E8E8E8;  
  box-shadow:         10px 10px 20px 10px #E8E8E8;  
}
.frame-request-border{
  border-style: solid;
  border-color: #FFF;
  border-width: 0px;
  border-radius: 50px;
}

.frame-vdo{
	width:1070px; 
	height: 600px;
}
.solution-frame{
	margin-top: 10px;
}
.solution-btn{
		width: 200px;
}

.hospitalname-title{
	font-weight:bold; 
	font-size:25px; 
	margin-left:30px; 
	color: #663A82;
}
.hospitalname-title-total{
	margin-top: 0px;
	font-weight: normal; 
	font-size: 20px; 
}
.hospitalname-table{
	margin-bottom: 30px;
}
.hospitalname-footer{
	margin-top: 30px;
}
.abus-footer{
	margin-top: 30px;
}
.abus-top{
	margin-top: 30px;
}
.img-logo-title{
	 /*margin-right: 15px;*/
}
.div-nav-logo{
	width: auto;
}
.icon-in-btn{
	margin-right: 5px;
	font-size: 1.2rem;
	width: 16px;
	height: 16px;
	position:relative;
  top: 2px;
}
.icon-in-btn-signout{
	margin-right: 5px;
	font-size: 1.2rem;
	width: 16px;
	height: 16px;
	position:relative;
  top: 3px;
}
.div-signin-input{
	height: 50px;
}
.btn-demo-test{
	height: 50px;
}
.topic-title{
	font-weight:bold; 
	font-size:25px;  
	color: #663A82;
}

/* mobile view */
@media only screen and (max-width: 990px){
	.container-main{
		align-items: center;
		width: 100%;
		padding-left: 0%;
		padding-right: 0%;
}
	.row{
		margin-right: -0px;
		margin-left: -0px;

	}
	.col{
		margin-top: 20px;
		width: 100%;
	}
	.row-top{
		flex-direction: column-reverse;
		margin: 0px 0;

	}
	.col-2{
		width: 90%;
		flex-basis: 100%;
		margin-bottom: 50px;

	}
	.col-1{
		width: 100%;
		flex-basis: 100%;

	}
	.youtube-class{
		height: 250px; 
		width: 100%;
	}
	.col-2 h5{
		font-size: 18px;
		font-weight: bold;
	}
	
	.txt-web-title:before {
	  /*font-size: 25px;*/
	  /*content: "WepMEt";*/
	}
	.nav-top{
		background-color: #663A82;
		height: 80px;
	}
	.container-main{
		margin-top: 20px;
	}
	.txt-web-title-bottom:before {
	  font-family: "Mitr-Bold";
	  color: #ffc107;
	  font-size: 18px;
	  content: "MENU";
	}
	.nav-top-menu{
		visibility: hidden;
	}
	.txt-footer-copy:before{
		content: " copyright All rights reserved.";
	}
	.frame-request{
		margin-top: 30px; 
		border-radius: 30px;
		padding-top: 10px;
		background-color: #F8F9F9;
	}
	.frame-vdo{
		width:350px; 
		height: 200px;
	}
	.solution-frame{
		margin-top: 10px;
	}
	.solution-btn{
		width: 100%;
	}
	.hospitalname-title{
		font-weight:bold; 
		font-size:18px; 
		margin-left:30px; 
		color: #663A82;
	}
	.hospitalname-title-total{
		margin-top:0px;
		font-weight:normal; 
		font-size:14px; 
	}
	.box-detail{
 	  background: white;
    margin: 0%;
    border-radius: 0px;
    padding-bottom: 20px;
     padding-top: 20px;
  }
  .box-body{
    background: #EDEDED;
    margin-left: 0%;
    margin-right: 0%;
    border-radius: 0px;
		}
	.box-menu{
	   width: 100%;
	   padding: 0px;
	   margin-top: 0px;
	}
	.hospitalname-table{
		margin-bottom: 30px;
		width: 100%;
	}
	.dev-txt-detail{
	 	padding-top: 20px;
	}
	.hospitalname-footer{
		margin-top: 0px;
	}
	.abus-footer{
		margin-top: 0px;
	}
	.abus-top{
		margin-top: 0px;
	}
	.img-logo-title{
		 /*margin-right: 0px;*/
		 text-align: center;
	}
	.div-manual{
		margin-bottom: -30px;
	}
	.topic-title{
		font-weight:bold; 
		font-size:16px;  
		color: #663A82;
	}
	.div-nav-logo{
		width: 100%;
		text-align: center;
	}

}



/* -- course -- */
h1{
    font-size: 36px;
    font-weight: 600;
    
}
p{
    color: var(--gray);
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px;
}
.course{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 0px;
}
#menutitle{
    /*display: none;*/
}
#rowmenu{
    /*display: none;*/
}

.row{
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
}

.row-menu{
    margin-top: 20px;
    /*display: none;*/
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.course-col{
    flex-basis: 25%;
    background: rgb(245, 245, 245);
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    margin: 20px;
    box-sizing: border-box;
    transition: 0.5s;
}
.course-col .fa{
    font-size: 70px;
}
.course-col:hover{
    /*box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;*/
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    cursor: pointer;
}
h3{
    text-align: center;
    font-weight: 600;
    margin: 10px 0;
	font-size: 20px;
}

@media(max-width: 1500px){
    .row-menu{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .course-col{
        flex-basis: 40%;
		margin: 10px;
		margin-top: 15px;
		box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    }

}
@media(max-width: 889px){
    .row-menu{
        flex-direction: column;
    }
    .row{
        flex-direction: column;
    }
    .course{
        width: 90%;
    }

}



@media(max-width: 700px){
    .text-box h1{
        font-size: 20px;
    }
    .nav-links ul li{
        display: block;
    }
    .nav-links{
        position: absolute;
        background: var(--purple);
        height: 100vh;
        width: 250px;
        top: 0;
        right: -250px;
        text-align: left;
        z-index: 2;
        transition: 1s;
    }
    nav .fa{
        display: block;
        color: var(--white);
        margin: 10px;
        font-size: 22px;
        cursor: pointer;

    }
    .nav-links ul{
        padding: 30px;
    }
    .navbar-wmt{
        margin: unset;
        background-color: #00000044;
    }
    .navbar-wmt2{
        margin-top: unset;
        
    }
}