/*-------my custom-------*/
/*-------thuanpm95-------*/

/*-------padding-------*/
.pad5 {padding:5px!important}
.pad10 {padding:10px!important}
.pad15 {padding:15px!important}
.pad20 {padding:20px!important}
.pad25 {padding:25px!important}
.pad30 {padding:30px!important}
.pad50 {padding:50px!important}

.padl5 {padding-left:5px!important}
.padl10 {padding-left:10px!important}
.padl15 {padding-left:15px!important}
.padl20 {padding-left:20px!important}
.padl25 {padding-left:25px!important}
.padl30 {padding-left:30px!important}
.padl50 {padding-left:50px!important}

.padr5 {padding-right:5px!important}
.padr10 {padding-right:10px!important}
.padr15 {padding-right:15px!important}
.padr20 {padding-right:20px!important}
.padr25 {padding-right:25px!important}
.padr30 {padding-right:30px!important}
.padr50 {padding-right:50px!important}

.padt5 {padding-top:5px!important}
.padt10 {padding-top:10px!important}
.padt15 {padding-top:15px!important}
.padt20 {padding-top:20px!important}
.padt25 {padding-top:25px!important}
.padt30 {padding-top:30px!important}
.padt50 {padding-top:50px!important}

.padb5 {padding-bottom:5px!important}
.padb10 {padding-bottom:10px!important}
.padb15 {padding-bottom:15px!important}
.padb20 {padding-bottom:20px!important}
.padb25 {padding-bottom:25px!important}
.padb30 {padding-bottom:30px!important}
.padb50 {padding-bottom:50px!important}

/*-------margin-------*/
.m5 {margin:5px!important}
.m10 {margin:10px!important}
.m15 {margin:15px!important}
.m20 {margin:20px!important}
.m25 {margin:25px!important}
.m30 {margin:30px!important}

.ml5 {margin-left:5px!important}
.ml10 {margin-left:10px!important}
.ml15 {margin-left:15px!important}
.ml20 {margin-left:20px!important}
.ml25 {margin-left:25px!important}
.ml30 {margin-left:30px!important}

.mr5 {margin-right:5px!important}
.mr10 {margin-right:10px!important}
.mr15 {margin-right:15px!important}
.mr20 {margin-right:20px!important}
.mr25 {margin-right:25px!important}
.mr30 {margin-right:30px!important}

.mt5 {margin-top:5px!important}
.mt10 {margin-top:10px!important}
.mt15 {margin-top:15px!important}
.mt20 {margin-top:20px!important}
.mt25 {margin-top:25px!important}
.mt30 {margin-top:30px!important}
.mt50 {margin-top:50px!important}

.mb5 {margin-bottom:5px!important}
.mb10 {margin-bottom:10px!important}
.mb15 {margin-bottom:15px!important}
.mb20 {margin-bottom:20px!important}
.mb25 {margin-bottom:25px!important}
.mb30 {margin-bottom:30px!important}
.mb100 {margin-bottom:100px!important}

/*-------font size-------*/
.fz-2{font-size:2px!important}
.fz-5{font-size:5px!important}
.fz-7{font-size:7px!important}
.fz-8{font-size:8px!important}
.fz-9{font-size:9px!important}
.fz-10{font-size:10px!important}
.fz-11{font-size:11px!important}
.fz-12{font-size:12px!important}
.fz-13{font-size:13px!important}
.fz-14{font-size:14px!important}
.fz-15{font-size:15px!important}
.fz-16{font-size:16px!important}
.fz-17{font-size:17px!important}
.fz-18{font-size:18px!important}
.fz-19{font-size:19px!important}
.fz-20{font-size:20px!important}
.fz-21{font-size:21px!important}
.fz-22{font-size:22px!important}
.fz-23{font-size:23px!important}
.fz-24{font-size:24px!important}
.fz-25{font-size:25px!important}
.fz-28{font-size:28px!important}
.fz-29{font-size:29px!important}
.fz-30{font-size:30px!important}
.fz-31{font-size:31px!important}
.fz-34{font-size:34px!important}
.fz-36{font-size:36px!important}
.fz-40{font-size:40px!important}
.fz-54{font-size:54px!important}
.fz-60{font-size:60px!important}

/*-------scroll bar-------*/
body::-webkit-scrollbar-track {background: #fff;width: 5px;height: 10px;}
body::-webkit-scrollbar {background: #fff;width: 5px;height: 10px;}
body::-webkit-scrollbar-thumb {background: #aaa;width: 5px;height: 10px;border-radius: 5px;}
.scrollbar::-webkit-scrollbar-track {background: #fff;width: 5px;height: 10px;}
.scrollbar::-webkit-scrollbar {background: #fff;width: 5px;height: 10px;}
.scrollbar::-webkit-scrollbar-thumb {background: #ccc;width: 5px;height: 10px;border-radius: 5px;}
.scrollbar-sm::-webkit-scrollbar-track {background: #fff;width: 5px;height: 5px;}
.scrollbar-sm::-webkit-scrollbar {background: #fff;width: 5px;height: 5px;}
.scrollbar-sm::-webkit-scrollbar-thumb {background: #aaa;width: 5px;height: 5px;border-radius: 5px;}
.scrollbar-dark::-webkit-scrollbar-track {background: rgba(0, 0, 0, 0.90);width: 5px;height: 5px;}
.scrollbar-dark::-webkit-scrollbar {background: rgba(0, 0, 0, 0.90);width: 5px;height: 5px;}
.scrollbar-dark::-webkit-scrollbar-thumb {background: #fff;width: 5px;height: 5px;border-radius: 5px;}

/*-------box shadow-------*/
.box-shadow{-webkit-box-shadow: 0px 2px 0px rgba(0,0,0,0.30);box-shadow: 0px 2px 0px rgba(0,0,0,0.30);-webkit-background-clip: padding-box;}
.box-shadow-1{-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.16);box-shadow: 0px 1px 0px rgba(0,0,0,0.16);-webkit-background-clip: padding-box;}
.box-shadow-important{-webkit-box-shadow: 0px 3px 2px rgba(0,0,0,0.16)!important;box-shadow: 0px 3px 2px rgba(0,0,0,0.16)!important;-webkit-background-clip: padding-box;}
.box-shadow-0 {box-shadow:none!important}

/*-------paragraph's lines-------*/
.text-truncate-1{display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow:hidden; text-overflow: ellipsis;}
.text-truncate-2{display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow:hidden; text-overflow: ellipsis;}
.text-truncate-3{display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow:hidden; text-overflow: ellipsis;}
.text-truncate-4{display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow:hidden; text-overflow: ellipsis;}
.text-truncate-5{display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;overflow:hidden; text-overflow: ellipsis;}
.text-truncate-6{display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;overflow:hidden; text-overflow: ellipsis;}
.text-truncate-8{display: -webkit-box;-webkit-line-clamp: 8;-webkit-box-orient: vertical;overflow:hidden; text-overflow: ellipsis;}

/*-------size & line-------*/
.w-20px{width:20px!important}
.w-25px{width:25px!important}
.w-30px{width:30px!important}
.w-40px{width:40px!important}
.w-50px{width:50px!important}
.w-100px{width:100px!important}
.w-120px{width:120px!important}
.w-150px{width:150px!important}
.w-250px{width:250px!important}
.h-20px{height:20px!important}
.h-25px{height:25px!important}
.h-30px{height:30px!important}
.h-40px{height:40px!important}
.h-50px{height:50px!important}
.h-100px{height:100px!important}
.lh20{line-height:20px!important}
.lh25{line-height:25px!important}
.lh30{line-height:30px!important}
.lh40{line-height:40px!important}
.lh50{line-height:50px!important}

.w-20{width:20%!important}
.w-30{width:30%!important}
.w-40{width:40%!important}
.w-80{width:80%!important}
.mw-300 {max-width:300px!important}
.mh-100px {max-height:100px!important}

/*-------input-------*/
input, select {box-shadow:none!important; outline:none!important}
input::-webkit-input-placeholder{color:#ccc}
input::-moz-placeholder{color:#ccc}
input:-ms-input-placeholder{color:#ccc}
input:-moz-placeholder{color:#ccc}
.input-default {height:40px; border:none; line-height:40px; color:#000; padding: 0 20px; width:100%; border-radius:20px; box-shadow:none!important}
.input-default.input-validation-error {border-color:#FFA26B}

/*-------input with icons-------*/
.input-icon {position:relative}
.input-icon input {background-color:rgba(219, 219, 219, 0.30); color:#757575; height:30px; line-height:30px; border-radius:5px; border:none; padding:0 20px; width:100%; box-shadow:none!important}
.input-icon input.input-default {background-color:#fff; color:#000; height:33px; line-height:33px;}
.input-icon > .icon {position:absolute; top:0; font-size:16px; height:30px; line-height:30px; width: 30px; text-align:center; z-index:5; color:#757575;}
.input-icon.icon-left input {padding-left:30px;}
.input-icon.icon-right input {padding-right:30px;}
.input-icon .icon-left{left:0px; border-radius:5px 0 0 5px}
.input-icon .icon-right{left:unset; right:0px; border-radius:0 5px 5px 0}

/*-------input with inner label-------*/
.input-inlabel {position:relative; height:33px; line-height:33px; border-radius:5px; background-color:#fff; padding:0 10px;}
.input-inlabel .label {display:block; position:absolute; top:0; height:33px; line-height:33px; z-index:5; color:#000}
.input-inlabel.label-left input,
.input-inlabel.label-left select {padding-left:100px; padding-right:10px; overflow:hidden}
.input-inlabel.label-right input {padding-right:100px; padding-left:10px}
.input-inlabel .label-left {left:10px}
.input-inlabel .label-right {right:10px}

/*-------button-------*/
.btn-default {height:40px; line-height:40px; border:none; background-color:#FFCB3E; color:#000; padding:0 15px; border-radius:5px; box-shadow:none!important; text-align:center; font-size:14px; font-weight:600}
/*.btn-default:hover, .btn-default:focus {color:#F69420}*/
.btn-default.btn-sm {height:27px; line-height:27px; border-radius: 13.5px}
.btn-default.btn-lg {height:50px; line-height:50px; min-width:200px}
.btn-default.btn-brighter {background-color:#FFE7A9}
.btn-default.btn-orange {background-color:#F27224}
.btn-default.btn-gray {background-color:#8F8F8F}
.btn-default.btn-outline {background-color:unset; color:#000; border:1px solid #ccc; border-radius:2px; font-weight:normal}
.btn-default.btn-square {border-radius:2px}

/*-------color-------*/
.color-orange {color:#F27224!important}
.color-red {color:#FF0303!important}
.color-blue {color:#456AAF!important}
.color-black {color:#424242!important}
.color-gray {color:#707070!important}
.color-brown {color:#803000!important}
.color-yellow {color:#FFCB3E!important}
.color-purple {color:#4C2BC5!important}
.color-green {color:#0A9700!important}

.bg-none {background:none!important}
.bg-fb {background-color:#3B5998!important}
.bg-gg {background-color:#DC4E41!important}
.bg-black {background-color:#000!important}
.bg-yellow {background-color:#FFCB3E!important}

.label {color:#424242; font-weight:600}

/*-------custom radio-------*/
.custom-radio .custom-control-input:checked~.custom-control-label::before {background-color:#FFCB3E!important;border-color:#FFCB3E!important}
.custom-radio .custom-control-label {padding-top:2px}
.custom-radio .custom-control-label::before {outline:none!important; box-shadow:none!important; top:10px}
.custom-radio .custom-control-label::after {top:10px}

/*-------custom checkbox-------*/
.custom-checkbox {display: inline-block; position: relative; padding-left: 24px; margin-bottom:0!important; outline:none!important; box-shadow:none!important; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none}
.custom-checkbox input {position: absolute; opacity: 0; cursor: pointer;}
.custom-checkbox .checkmark {position: absolute; top: calc(50% - 8px); left: 0; height: 16px; width: 16px; background-color: #fff; border-radius: 50%; border: 1px solid #D8DCE6; box-shadow:0 1px 1px rgba(22, 29, 37, 0.05)}
.custom-checkbox .checkmark.square {top:calc(50% - 12px); border-radius:2px}
.custom-checkbox input.checked ~ .checkmark:after,
.custom-checkbox input.checked + label .checkmark:after,
.custom-checkbox input:checked ~ .checkmark:after,
.custom-checkbox input:checked + label .checkmark:after { display: block;}
.custom-checkbox .checkmark:after {content: "\2713"; position: absolute; display: none; top: 1px; left: 3px; width: 10px; height: 13px; line-height:13px; background: #fff; font-size:8px; color:#FFCB3E; border-radius:50%}
.custom-checkbox .checkmark.square:after {font-size:10px; left:2px; font-weight:700}

/*-------custom badge-------*/
.custom-badge {position:absolute; z-index:1; height:14px; line-height:14px; border-radius: 5px; padding:0 4px; background-color:#fff; color:#000; top:-10px; right:-14px}

/*-------begin-------*/
* {border:0; font-size:100%; margin:0; outline:0; padding:0; vertical-align:baseline; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
body {color:#000; background-color:#fff; font-size:14px!important; position:relative; overflow-x:hidden; width:100%}
a {color:#000}
a:focus, a:hover {text-decoration:none; outline:none; color:#000}
ul {list-style-type:none; margin-bottom:0}
.cursor-pointer {cursor:pointer}
.tooltip-inner {background-color:rgba(0, 0, 0, 0.7)!important; color:#fff!important}
.text-select-right {text-align:justify; text-align-last:right;}
.border-radius-5 {border-radius:5px}
.right-unset {right:unset!important}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('../Font-HelveticaNeue/HelveticaNeue.otf') format('opentype');
}

@font-face {
    font-family: 'HelveticaNeue-Medium';
    src: url('../Font-HelveticaNeue/HelveticaNeue-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'HelveticaNeue-Bold';
    src: url('../Font-HelveticaNeue/HelveticaNeue-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url('../../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Medium';
    src: url('../../fonts/Roboto/Roboto-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url('../../fonts/Roboto/Roboto-Bold.ttf') format('truetype');
}