/* Reset */
*{margin: 0; padding: 0; border: 0; -webkit-box-sizing: border-box; box-sizing: border-box}
/* Basic */
html{scroll-behavior: smooth}
body{background: #e9ffff; color: #747474; font-family: Georgia,Times, 'Times New Roman', serif; font-size: 18px; -webkit-font-smoothing: antialiased; line-height: 1.6; word-wrap: break-word; margin-bottom: 100px; margin-top: 68px}
/* Header */
.header-wrapper *,
.header-wrapper:after,
.header-wrapper:before{box-sizing: border-box}
.header-wrapper{position: fixed; top: 0; left: 0; width: 100%; height: 55px; z-index: 7; transform: translateY(0); transition: transform .3s ease-in; box-shadow: 0px 0px 3px 0px rgba(50, 50, 50, 0.6); background: #dd402f}
.header-wrapper:after{content: ""; position: absolute; top: 55px; min-height: 100vh; background: rgba(0,0,0,.29); width: 100%; z-index: -1; opacity: 0; transition: opacity .3s ease-in-out,z-index 0s ease,top .3s ease-in-out; transform: translateY(calc(-100% - 72px))}
/* Container */
.header-wrapper .container{position: relative; background: #dd402f; z-index: 13; --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; width: 100%; height: 100%; padding-right: calc(var(--bs-gutter-x)*1.5); padding-left: calc(var(--bs-gutter-x)*0.5); margin-right: auto; margin-left: auto}
/* header-content */
.header-content{position: relative; float: right; height: 100%; justify-content: space-between; align-items: center; display: flex; z-index: 12; background: #dd402f}
/* header menu */
.header-menu{z-index: 11; align-items: right; display: flex; text-align: right}
.header-menu>a{display: none; padding: 10px 16px; margin: 0 5px; align-items: center; border-radius: 4px; transition: all .3s ease-out}
.header-menu>a:link,
.header-menu>a:visited{transition: color 0.1s ease; color: #fff}
.header-menu>a:hover,
.header-menu>a:target{transition: color 0.3s ease; text-decoration: none; color: #ebebeb}
/* account-wrap */
.account-wrapper{align-items: center; display: flex; margin-left: 20px}
.account-wrapper .account-content-wrapper{display: none; position: relative; margin-right:1.25rem}
.account-wrapper .account-content-wrapper .header-account-btn{cursor: pointer; width: 36px; font-size: 18px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%}
.account-wrapper .account-content-wrapper .header-account-btn .flex-shrink{flex-shrink: 0; display: flex}
/* header account detail */
.header-account-detail{position: absolute; right: 0; top: calc(100% + 8px); box-shadow: 0 4px 15px rgba(0,0,0,.1); background: #fff; width: 340px; opacity: 0; transition: opacity .3s ease-out; z-index: -1; transform: scale(0); padding: 1.25rem}
.header-account-detail{text-align: left}
.header-account-detail .header-account-wrapper{align-items: center; margin-bottom: 1rem; display: flex}
.header-account-detail .header-account-wrapper .image-wrapper{font-size: 18px; display: flex; width: 50px; height: 50px; align-items: center; justify-content: center; --bs-bg-opacity: 1; background-color: #dd402f; color: #fff; border-radius: 50%; margin-right: 1rem}
.header-account-detail .header-account-wrapper .user-name{font-size: .975rem; line-height: 150%; margin-bottom: 10px; margin-bottom:0}
/* btn menu sidebar */
.btn-menu-sidebar{font-size: 18px; cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%}
/* btn menu sidebar */
.header-side-menu{position: absolute; top: 100%; right: 0; max-width: 380px; width: 100%; background: #fff; height: calc(100vh - 72px); z-index: 12; transform: translateX(100%); transition: all .4s ease-in-out; overflow-y: auto; margin-bottom: 10px; padding-top: 1.25rem; padding-bottom: 5rem}
/* header side menu account */
.header-side-menu-account{display: block; position: relative; padding-bottom: 1.25rem; padding-left: 1rem}
.header-side-menu-account:after{content: ""; position: absolute; left: 16px; right: 16px; top: 100%; display: block; height: 1px; background: #e6e6e6}
/* header side menu account wrapper */
.header-side-menu-account-wrapper{display: flex; align-items: center; margin-bottom: 1rem}
.header-side-menu-account-wrapper .image-wrapper{font-size: 18px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; --bs-bg-opacity: 1; background-color: #dd402f; color: #fff; border-radius: 50%; margin-right: 1rem}
.header-side-menu-account-wrapper .user-name{font-size: .875rem; line-height: 150%; margin-bottom: 10px; margin-bottom: 0}
/* header side menu */
.header-side-menu ul{list-style-position: inside; list-style-type: none; margin: 0}
.header-side-menu ul li{padding: 4px; margin-bottom: .375rem; border-radius: 4px; transition: all .1s ease-out}
.header-side-menu ul li:hover{background-color: #e9ffff}
.header-side-menu ul li a{padding: 6px 10px; font-size: 1rem; line-height: 150%;margin-bottom: 12px}}
.header-side-menu ul li a:last-child{margin-bottom: 0}
.header-side-menu ul li a:hover{text-decoration: none}
.header-side-menu ul li.active{background-color: #e9ffff; border-radius: 4px}
.header-side-menu ul li.mobile-only{display: block}
/* button */
.header-wrapper button{color: unset; border: 0; background: #fff}
/* control */
.header-side-menu-active{transform: translateX(0)}
.header-active:after{top: 100%; opacity: 1; z-index: 3; transform: translateY(0)}
.header-account-active{opacity: 1; transform: scale(1)}
.btn-menu-sidebar-active,
.btn-menu-account-active{background-color: #e9ffff!important}
.btn-menu{padding: 10px 16px; font-size: 1rem; line-height: 150%; margin-bottom: 12px; display: flex; align-items: center; border-radius: 4px; transition: all .3s ease-out}
@media (max-width:1199px){
    .header-side-menu ul li a{padding:13px 16px}
}
@media (max-width:767px){
    .header-side-menu{max-width: 100%; padding-bottom: 110px}
    .header-account-detail{display: none}
}
@media (min-width:576px){
    .header-wrapper .container{max-width: 540px}
    .header-side-menu{padding-right: 2.5rem; padding-left: 2.5rem; padding-top: 1.875rem}
}
@media (min-width:768px){
    .header-wrapper  .container{max-width: 720px}
    .account-wrapper .account-content-wrapper{display: flex}
    .header-side-menu-account{display: none}
    .header-side-menu{padding-bottom: 1.875rem!}
    .header-side-menu ul li{margin-bottom: .375rem}
}
@media (min-width:992px){
    .header-wrapper .container{max-width: 960px; pad1ding-right: calc(var(--bs-gutter-x)*1.5)}
    .header-menu>a{display: block}
    .account-wrapper .account-content-wrapper{margin-right: 1.875rem}
    .header-side-menu ul li.mobile-only{display: none}
}
@media (min-width:1200px){
    .header-wrapper .container{max-width: 1140px; pad1ding-right: calc(var(--bs-gutter-x)*3.5);}
}
@media (min-width:1400px){
    .header-wrapper .container{max-width: 1320px; pa1dding-right: calc(var(--bs-gutter-x)*7.5);}
}
@media (min-width:992px){
    .header-menu>a{display: block}
}
/* Content */
.content{position: relative; width: 90%; max-width: 960px; margin: 0 auto}
.content p{margin: 20px 0}
/* Header */
.content h1, h2{text-align: center; color: #1682b7}
.content h1{font-size: 26px}
.content h2{font-size: 24px}
.content h3{font-size: 18px}
.content h2 a:link,
.content h2 a:visited{transition: color 0.1s ease}
.content h2 a:hover{transition: color 0.3s ease}
 @media (max-width:767px){ 
    .content h1{font-size: 22px}
    .content h2{font-size: 20px}
    .content h3{font-size: 14px}
}
.content .img-wrapper{text-align: center}
.content img{box-shadow: 3px 3px 4px #999; margin: 0 auto; display: inline; text-align: center; text-align: center}
@media (max-width: 800px){
    .content img{width: 100%}
}
/* Content Background */
.content-background{position: relative; background: #464646; margin-bottom: 20px}
/* Message */
#message{display: none; text-align: justify; margin: 0 0 15px 0; padding: 0; background: #fff; border: 1px solid #d4d9de; width: 100%}
#message span{display: block; margin: 5px 10px}
/* Border */
.border{border: 1px solid rgba(34, 36, 38, 0.15); border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 0.2rem}
/* Submit input */
input[type="submit"]{background: #dd402f no-repeat 3px 8px; padding: 5px 20px 7px 20px; margin: 5px 0 5px 0; color: #fff; font-size: 16px; border: 1px solid #dd402f; cursor: pointer}
input[type="submit"].loading{background-image:url('/templates/images/loader.gif'); color: #ccc}
input[type="submit"]::-moz-focus-inner{border: none}
input.actionButton[type="submit"]{font-family: FontAwesome; font-size: 16px}
input.actionButton.red[type="submit"]{background-color: #fb5779; border-color: #fb5779; color: #fff}
input[type="submit"].deleteButton{background-color: #ff0000; float: right; border: 1px solid #ff0000}
input[type="text"].half,
input[type="password"].half{width: 50%}
@media (max-width:767px){ 
    input[type="text"].half,
    input[type="password"].half{width: 100%}
}
/* Password input */
input[type="password"]{width: 50%; padding: 3px 0 3px 0; margin: 0 0 5px 0; border: 1px solid #C3CBD4}
input[type="text"],
input[type="time"],
input[type="password"],
textarea{margin-bottom: 0.8em; height: 2.5em; width: 100%; padding: 4px}
input[type="text"]{box-sizing: border-box}
textarea{min-height: 100px; resize: none}
/* placeholder */
::placeholder{opacity: 0.5; color: #6c757d; font-size: 1.1rem; font-family: Times}
:focus::placeholder{color: transparent}
:focus::-webkit-input-placeholder{color:transparent}
:focus:-moz-placeholder {color:transparent}
:focus::-moz-placeholder{color:transparent}
:focus:-ms-input-placeholder {color:transparent}
/* Select */
select{border: 1px solid #C3CBD4; box-sizing: border-box; padding: 3px 25px 3px 3px; box-sizing: border-box; margin: 0; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat, repeat; background-position: right .7em top 50%, 0 0; background-size: .65em auto, 100%}
/* PageNavi */
.pagenavi{padding: 10px 20px 10px; display: block; clear: both; text-align: center}
.pagenavi a,
.pagenavi span.pages,
.pagenavi span.extend{display: inline-block; padding: 1px 10px 2px 10px; background: #fff; border: solid 1px #d4d9de; margin-right: 3px; text-decoration: none; margin-top: 3px}
.pagenavi span.current{display: inline-block; padding: 1px 10px 2px 10px; background: #F0F0F0; border: solid 1px #d4d9de; margin-right: 3px; margin-top: 3px}
/* Link */
a:link,
a:visited,
a:hover,
a:active{text-decoration: none; color: #0075b0}
a:hover{text-decoration: underline; outline: 0;}
/* Action Form */
.action_form{color: #717b85; text-align: center}
.action_form input[type="text"],
.action_form input[type="password"]{text-indent: 2px; width: 50%; padding: 5px 3px 5px 7px; box-sizing: border-box; background-color: #fff !important}
.action_form input[type="text"]{margin-bottom: 8px}
.action_form input[type="submit"]{width: 50%; padding: 6px}
.action_form .remind_link{text-align: center}
.action_form .action_link{text-align: center; color: #227eb7; cursor: pointer}
.action_form .notice{margin-top: 0}
.action_form .registration{display: none}
@media (max-width:767px){ 
    .action_form input[type="text"],
    .action_form input[type="password"]{width: 100%}
    .action_form input[type="submit"]{width: 100%}
}
/* Users list */
.users{width: 100%}
.users span{display: inline-block; color: #337ab7; text-decoration: none; cursor: pointer; padding: 4px 10px; border: 1px solid #e2e2e2; margin: 5px}
.users span:hover{color: #286090; background-color: #eee; text-decoration: none}
/* bullhorn */
.fa-bullhorn{color: #1682b7; cursor: pointer}
.deleteIconHide{display: none}
/* Table */
table.infotable .fa{cursor: pointer}
table{width: 100%; color: #4d4f53; border-collapse: collapse; margin-bottom: 10px}
table td{height: 20px; padding: 0; font-weight: bold}
table a{color:#3968A8; text-decoration: none;}
table a:hover{color: #679CCB}
/* Info Table */
table.infotable{width: 100%}
table.infotable tr td{border: 1px solid #C4C9CD; font-weight: normal; padding: 5px}
table.infotable .english a{color: #33a2ce}
.question-content i{color: #dd402f}
/* Btn */
.btn{display: inline-block; padding: 4px 12px; margin: 2px; text-align: center; vertical-align: middle; cursor: pointer; color: #fafdfc; background-color: #dd402f; border: 1px solid #dd402f}
a.btn{color: #fafdfc}
.btn:hover,
.btn:focus{text-decoration: none}
a.btn{text-decoration: none}
/* Hint */
#hint{border: 1px solid #d8e4e7; position: absolute; max-height: 200px; overflow: auto; background: #FFF; margin-top: -1.3rem; padding: 5px 0px; min-width: 280px; display: none; z-index: 1000}
#hint a{display: block; cursor: pointer}
#hint ul li {list-style: none;}
/* Notice, Warning */
.notice{w1hite-space: pre-wrap; overflow: hidden; margin: 13px 0 13px 0; border-left-width: 5px; border-left-style: solid; padding: 10px; clear: both; clear: none; background-color: #eee; background: #fff3d4; border-color: #f6b73c; color: #000; text-align: justify}
.notice.nospace{white-space: normal}
.notice p{font-size: 16px}
.notice p:first-child {margin-top: 0}
.notice p:last-child {margin-bottom: 0}
.notice a{outline: none; overflow: auto; font-weight: bold}
.notice i{color: #000}
.notice i.fa{text-indent: 0}

/* Parts speech */
.wrapper-block{position: relative; background: #fff; -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); margin: 1rem 0em; padding: 1em 1em}
.wrapper-block h1.title{font-size: 18px}
.wrapper-block h2{font-size: 18px; text-align: left}
.wrapper-block .title{position: relative; top: -5px; display: inline-block; vertical-align: baseline; background-color: #dd402f; border-color: #1a69a4; color: #fff; font-weight: bold; -webkit-transition: background 0.1s ease; transition: background 0.1s ease; min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; border-radius: 0em 0.2rem 0.2rem 0em; left: calc(-1rem - 1.3em); margin-right: -1.2em; padding: 0.5em 1.2em 0.5em calc(1rem + 1.2em)}
.wrapper-block .title:after{position: absolute; content: ''; top: 100%; left: 0%; border-style: solid; border-width: 0em 1.2em 1.2em 0em; border-color: transparent; border-right-color: #b03623; width: 0em; height: 0em}
.wrapper-block ul{padding-left: 20px; margin: 7px 0 0; list-style-type: disc; list-style-position: outside; text-align: justify}
.wrapper-block ul li{margin: 7px 0 0}

/* word */
.wrapper-block.word .part-speech-title,
.wrapper-block.word .opposite-title{color: #2f8fbe; font-style: italic; margin: 0; padding: 0}
.wrapper-block.word .part-speech-body,
.wrapper-block.word .opposite-body{margin-left: 20px; padding: 0}
.wrapper-block.word p{padding: 0; margin: 6px 0}
.wrapper-block.word input.actionButton[type="submit"]{font-size: 12px; padding: 2px 4px; margin: 5px 0}

/* word form block */
.word_form_block{float: left; margin: 0 15px 0 0}
.word_form_block p{co1lor:#888}
.word_form_block i{color: #000}
.word_form_block a{border-b1ottom: solid 1px #D8D8D8}
@media only all and (max-width: 750px) {
    .word_form_block{margin: 0px 15px 5px 0px}
}

.clear {clear:both}

/* Responsive Container */
.responsive-container{width: 100%}
.responsive-container .topic-list{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; width: initial}
.responsive-container .topic-list .topic-box{width: 29%; background: white; margin: 10px 2%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.2); border: 1px solid #d9d9d9; border-radius: 4px}
.responsive-container .topic-list .topic-box:hover{-webkit-box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.5); border: 1px solid #999999}
.responsive-container .topic-list .topic-box img{width: 100%; border-radius: 4px 4px 0px 0px; box-shadow: none}
.responsive-container .topic-list .topic-box h2{margin: 10px; text-align: center}
@media screen and (min-width: 10px) and (max-width: 479px) {
    .responsive-container .topic-list .topic-box{width: 46%}
}
@media screen and (min-width: 480px) and (max-width: 767px) {
    .responsive-container .topic-list .topic-box{width: 29.3333333%}
}

.wrapper-block .post-meta{margin: 3px 0}
.wrapper-block .post-meta span{margin-right: 15px}
.wrapper-block .post-meta span.margin-none{margin-right: 0}
.wrapper-block .post-meta span i{margin-right: 10px}
.wrapper-block .post-meta span a span{color: #0075B0}

/* Editor */
#toolbar .fa{font-size: 16px; padding: 5px; background: #fff; color: #0075B0; float: left; margin: 0 1px 0 0; min-width: 14px; text-align: center; cursor: pointer}

@media only screen and (max-width: 800px){
    .wrapper-block .title{left: auto; min-width: 0; top: 0; padding: 7px; border-radius: 0.2rem; width: 100%; text-align: center; font-weight: normal}
    .wrapper-block .title:after{content: none}
}

/* Footer */
.footer{position: fixed; height: 50px; line-height: 50px; bottom: 0; width: 100%; background-color: #dd402f; z-index: 125}
.footer ul{text-align: center}
.footer ul li{display: inline-block; margin-left: 15px; color: #ffffff}
.footer ul li a:link,
.footer ul li a:visited,
.footer ul li a:hover,
.footer ul li a:active{text-decoration: none; color: #fff}
.footer ul li a:hover{color: #ebebeb; text-decoration: none}
@media(max-width:1024px){
    .footer{position: static; margin-bottom: 0; padding: 5px}
    .footer ul{padding-right: 5px; margin-bottom: 3px}
    .footer ul li{margin-left: 5px}
}

.center{text-align: center}
i.fa-exclamation-triangle{color: red; cursor: pointer; font-size: 18px}
i.fa-calendar,
i.fa-clock-o{margin-right: 5px}
input[type=text].date{width: 120px}
input[type=time]{width: 120px;}
/* Review Wrapper */
.review-wrapper{margin-top: 1rem}
.review-wrapper .review{margin: 1rem; position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #ffffff; background-clip: border-box; border: 1px solid #e9ecef}
.review-wrapper .review .body{-ms-flex: 1 1 auto; flex: 1 1 auto; padding: 1.25rem}
.review-wrapper .review .body .quote{font-size: 1.1rem; margin-bottom: 1.5rem; margin-top: 1rem}
.review-wrapper .review .body .author{font-size: 1.1rem; font-style: italic}
.review-wrapper .review .body .rating-wrapper{color: #dd402f}
.review-wrapper .review:before{content: "\f086"; font-family: FontAwesome; position: absolute; top: -.75em; right: 0.2em; font-size: 4rem; color: #fec805}
/* Testimonial form wrapper */
.create-review{margin: 0 auto}
.create-review table{margin: 0 auto; text-align: center}
/* Rating */
.simple-rating{}
.simple-rating i{font-size: 24px; color: #dd402f; display: inline-block; padding: 1px 2px; cursor: pointer; margin: 7px 2px; z-index: 1000}
/* Contact */
.contact{margin: 20px 0}
.contact table{margin: 0 auto; text-align: center}
/* Bubble Slider */
.bubble blockquote{margin: 10px 10px 0; background: #fff; padding: 60px; position: relative}
.bubble blockquote:before,
.bubble blockquote:after{content: "\201C"; position: absolute; font-size: 80px; padding: 10px; line-height: 1; color: #1682b7}
.bubble blockquote:before{top: 0; left: 10px}
.bubble blockquote:after{content: "\201D"; right: 10px; bottom: -.5em}
.bubble div{width: 0; height: 0; border-left: 0 solid transparent; border-right: 20px solid transparent; border-top: 20px solid #fff; margin: 0 0 0 60px; margin-bottom: 10px}
.bubble cite{padding-left: 20px; font-size: 1.25em; color: #1682b7}

.ui-sortable-helper{display: table; background: #f0f0f0}
#myLinks{display: none}
/* Input password eye */
.input-password-eye .field-icon{position: absolute; margin-left: -28px; margin-top: 2px; z-index: 2; font-size: 18px; color: #dd402f}
.input-password-eye .icon-eye-blocked:before{font-family: FontAwesome; content: "\f070"}
.input-password-eye .icon-eye:before{font-family: FontAwesome; content: "\f06e"}
.verb-info,
.adjective-info,
.plural-info{font-size: 16px; color: #818181}

/* Add FAQ Wrapper */
.add-faq-wrapper{width: 100%; margin-bottom: 10px; background: #F4F4F4;  border-radius: 5px}
.add-faq-wrapper input{width: calc(100% - 40px); margin: 10px 0 0 10px}
.add-faq-wrapper textarea{width: calc(100% - 40px); margin: 10px 0 10px 10px}
.add-faq-wrapper span{display: inline-block; color: red; margin-left: 2px; padding: 0;  cursor: pointer; font-size: 20px}

.deleteWordButton{cursor: pointer; float: right; margin-right: 5px; font-size: 20px; padding: 0; width: 20px; height: 20px}
.row_word_table:after{content: ""; display: table; clear: both}
.row_word_table div{float: left; width: 50%}
.row_word_table.full div{width: 100%}
@media screen and (max-width: 600px){
    .row_word_table div{width: 100%}
}
.form_word p{font-size: 16px; color: #818181}
.form_irregular_word{font-size: 16px; color: #818181; white-space: pre-wrap}

.notice {font: 13px Arial; padding: 10px; border-radius: 4px;}
.notice a{font: inherit; color: inherit;}
.notice2 {font-size: 16px; padding: 10px; border-radius: 4px; line-height: 22px;}
.notice2 a{font: inherit; color: inherit;}


textarea {
  border: 2px solid black;
  transition: border-color 0.3s;
}

textarea:focus {
  border: 2px solid black;
  outline: none;
}


input {
    padding: 5px;
  border: 2px solid black;
  transition: border-color 0.3s;
}

input:focus {
  border: 2px solid black;
  outline: none;
}


input[type=text].mobilePhone{width: 150px}

td.vertical-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
select#users{padding: 10px; transition: 0.4s; margin: 10px; width: 50%}