@charset "utf-8";





/* CSS Document */





html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:auto;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}





@font-face{src: url(../font/OpenSans-Bold.ttf); font-family: OpenSans-Bold}


@font-face{src: url(../font/OpenSans-Light.ttf); font-family: OpenSans-Light}


@font-face{src: url(../font/OpenSans-LightItalic.ttf); font-family: OpenSans-LightItalic}


@font-face{src: url(../font/OpenSans-Regular.ttf); font-family: OpenSans-Regular}


@font-face{src: url(../font/OpenSans-Semibold.ttf); font-family: OpenSans-Semibold}





*{margin:auto; padding:0;}


body{font-size: 14px; color: #454545; font-family: OpenSans-Regular; position: relative;}


.login-page {background-image: url('../img/icon/background.png'); background-size: cover;}


ul li{list-style:none;}


.none{display: none;}


.fix{width:calc(100% - 100px); position: relative; z-index: 5;}


.relative{position: relative;}


.f-l{float: left;}


.f-r{float: right;}


.clr{clear:both;}


.clr5{clear:both; height: 5px;}


.clr10{clear:both; height: 10px;}


.clr15{clear:both; height: 15px;}


.clr20{clear:both; height: 20px;}


.clr25{clear:both; height: 25px;}


.clr30{clear:both; height: 30px;}


.center{text-align: center;}


.hidden{visibility: hidden; height: 0!important;}


a{color: #afafaf; cursor: pointer; text-decoration: none;}


a:hover{color: #ed1b23; text-decoration: none;}


input,button,textarea,select:focus{outline:0}





::-webkit-input-placeholder {font-family: OpenSans-Regular; color: #afafaf;}


:-moz-placeholder {font-family: OpenSans-Regular; color: #afafaf;}


::-moz-placeholder {font-family: OpenSans-Regular; color: #afafaf;}


:-ms-input-placeholder {font-family: OpenSans-Regular; color: #afafaf;}


input,button,textarea,select{font-family: OpenSans-Regular; color: #454545; cursor: pointer; font-size: 13px;}





.mCSB_inside > .mCSB_container{margin-right: 0px!important;}


.mCSB_scrollTools .mCSB_draggerContainer{right: -10px!important;}


.mCS-dark.mCSB_scrollTools .mCSB_draggerRail{background: #fff!important;}


.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background: #fff!important; border-radius: 0!important;}


.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background: #fff!important;}


.owl-wrapper{float: left!important;}


.owl-carousel .owl-stage{float: left;}


.alertify-buttons{position: inherit!important; width: auto!important; height: auto!important; background: none!important;}


.alertify-button-ok, .alertify-button-ok:hover, .alertify-button-ok:focus{background: #ed1b23!important; border: none!important; color: #fff!important;}


.alertify-button{border-radius:0px!important;}


.alertify-buttons{margin-top: 20px!important;}


.alertify-message{text-transform: uppercase!important; font-size: 14px!important;}


.alertify{border: 10px solid #ed1b23!important; top: 40%!important; margin: 0; padding: 0;}


.alertify-cover{background: rgba(0,0,0,0.5)!important; opacity: 1!important;}


section.alertify {height: auto; min-height: 0!important; margin-left: -250px!important;}





.remodal {background: #fff!important; border-radius: 0!important; -webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.4); -moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.4); box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.4);}


.remodal-close {display: none!important;}


.remodal-close:after {content: ''!important;}


body.remodal-is-active .remodal-overlay {background: rgba(255,255,255,0.5);}


#file{visibility: hidden; height: 0;}





.cover-login-page {width: 100%; height: 100vh; background: rgba(0,0,0,0.2); top: 0; left: 0; z-index: 1;}


.login-box {width: 300px; height: 400px; background: #fff; position: absolute; top: calc(50vh - 200px); left: calc(50vw - 150px); z-index: 2;}


.logo-login {width: 180px; cursor: pointer; margin: 15px auto;}


.logo-login img {width: 100%;}


.title-login {font-size: 28px; text-align: center; color: #ed1b23; text-transform: uppercase; margin-bottom: 15px;}


.input-login {margin-top: 15px; padding: 0 40px;}


.input-login input {width: 100%; height: 35px; border: 1px solid #d0d0d0; padding: 0 5px; box-sizing: border-box;}


.remember {margin: 15px auto; line-height: 20px;}


.remember input {display: none;}


.label-login {color: #afafaf; font-size: 13px;}


.button-login button {height: 35px; background: #ed1b23; color: #fff; border: none; width: 120px; display: block; text-transform: uppercase;}


.link-forgot {text-align: center; color: #afafaf; margin-top: 15px; font-size: 13px; margin-bottom: 15px;}


.response-login{background: rgba(237, 27, 35, 0.2); height: 30px; line-height: 30px; margin: 0 20px; text-align: center; font-size: 13px; color: #ed1b23;}





header {height: 60px; overflow: hidden; -webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.2); box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.2);}


section {position: relative; z-index: 1; min-height: calc(100vh - 140px);}


footer {height: 80px; background: #2f879b; overflow: hidden; box-sizing: border-box; border-top: 3px solid #ed1b23; color: #fff; padding: 10px 0;}





header .logo {width: 120px; float: left;}


header .logo img {width: 100%; position: relative; top: 3px}


header .user-header-box {float: right; height: 35px; margin: 10px auto; line-height: 35px;}


header .user-header-box .avatar-top {width: 35px; height: 35px; border-radius: 50%; display: inline-block; overflow:hidden; text-transform: uppercase; font-size: 20px; text-align: center; float: left;}


header .user-header-box .avatar-top a {color: #fff;}


header .user-header-box .avatar-top img {width: 35px; height: 35px; display: block;}


header .user-header-box .name-top {float: left; margin-left: 10px;}


header .user-header-box .name-top a {color: #ed1b23;}


header .user-header-box .logout-link {float: left; margin-left: 15px;}


header .user-header-box .logout-link img {position: relative; top: 5px; margin-right: 5px;}


header .user-header-box .logout-link a {color: #ed1b23;}


header .user-header-box .setting-link {float: left; margin-left: 15px;}


header .user-header-box .setting-link img {position: relative; top: 5px}





footer .footer-left {float: left;}


footer .footer-left .company-name {font-size: 16px; color: #ed1b23; text-transform: uppercase; font-family: OpenSans-Bold; margin-bottom: 5px;}


footer .footer-left .company-info {line-height: 20px; font-size: 12px;}


footer .footer-right {float: right;}


footer .footer-right .social img {margin-left: 5px; margin-top: 20px; width: 25px;}





section .menu-box {position: absolute; left: 0; height: 100%; width: 250px; background: #161d26;}


section .menu-box .user-type {height: 45px; background: #1e2837; color: #fff; text-transform: uppercase; text-align: center; line-height: 45px; color: #fff;}


section .menu-box .menu-list {height: calc(100% - 45px);}


section .menu-box .menu-list ul li {height: 45px; line-height: 45px; padding: 0 20px; border-bottom: 1px solid rgba(0,0,0,0.1); border-top: 1px solid rgba(255,255,255,0.1);}


section .menu-box .menu-list ul li a {display: block;}


section .menu-box .menu-list ul li:first-child {border-top: none}


section .menu-box .menu-list ul li:last-child {border-bottom: none}


section .menu-box .menu-list ul li:hover {background: #ed1b23;}


section .menu-box .menu-list ul li:hover a{color: #fff;}


section .menu-box .menu-list ul li.active {background: #ed1b23;}


section .menu-box .menu-list ul li.active a{color: #fff;}


section .menu-box .menu-list ul li img {position: relative; top: 5px; margin-right: 10px; height: 20px;}


section .page-content {margin-left: 250px; padding: 15px; color: #333333;}


section .page-content .page-name {font-size: 20px; font-family: OpenSans-Bold; line-height: 30px;}


section .page-content .page-name a {color: #454454;}


section .page-content .page-name img {height: 30px; position: relative; top: 5px}


section .page-content .page-action {text-align: right; margin-top: 15px;}


section .page-content .page-action button {width: 250px; height: 40px; background: #ed1b23; border: none; color: #fff; font-size: 15px; line-height: 40px; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);}


section .page-content .page-action button img {position: relative; top: 5px;}





.remodal-form {font-size: 14px; text-align: left; padding: 20px 30px; max-width: 500px;}


.remodal-form input {font-size: 13px;}


.remodal-form input:focus {font-size: 13px;}


.remodal-form select {font-size: 13px;}


.remodal-form select:focus {font-size: 13px;}


.remodal-form .close-form {position: absolute; width: 18px; height: 15px; background: url('../img/icon/close.png') no-repeat; background-size: contain; top: 25px; right: 25px; cursor: pointer;}


.remodal-form .title-modal {height: 25px; line-height: 25px; font-family: OpenSans-Semibold; font-size: 16px; margin-bottom: 25px;}


.remodal-form .title-modal img {height: 17px; position: relative; top: 1px; margin-right: 20px;}


.remodal-form .input-modal {margin-bottom: 15px; border: 1px solid #e1e1e1; min-height: 35px; position: relative;}


.remodal-form .input-modal .icon-input-modal {width: 35px; height: 35px; text-align: center; float: left; border-right: 1px solid #e1e1e1;}


.remodal-form .input-modal .icon-input-modal img {height: 15px; position: relative; top: 10px}


.remodal-form .input-modal .field-input-modal input {border: none; width: calc(100% - 36px); float: right; height: 35px; box-sizing: border-box; padding: 0 10px;}


.remodal-form .input-modal .field-input-modal select {border: none; width: calc(100% - 36px); float: right; height: 35px; box-sizing: border-box; padding: 0 10px;}


.remodal-form .input-modal .field-input-modal label {position: absolute; width: calc(100% - 36px); height: 35px; z-index: 1; top: 0; left: 0; display: block; cursor: pointer;}


.remodal-form .drop-zone {margin-left: 36px; border: 1px solid #e1e1e1; border-top: none; margin-top: -15px; text-align: center; padding: 10px 0; cursor: pointer; cursor: pointer;}


.remodal-form .drop-zone img {max-width: 150px;}


.remodal-form .drop-zone input {visibility: hidden; height: 0;}


.remodal-form .button-modal {margin-top: 25px; text-align: right;}


.remodal-form .button-modal button {background: #ed1b24; color: #fff; border: none; height: 35px; width: 95px; font-size: 15px;}


.remodal-form .button-modal button:disabled {background: #93929a;}





.pagination {float: right;}


.pagination ul li {float: left; width: 30px; height: 30px; color: #ed1b23; text-align: center; line-height: 30px; border: 1px solid #e1e1e1; margin: auto 2px; font-size: 12px;}


.pagination ul li a{color: #ed1b23; display: block;}


.pagination ul li.active {background: #f4f4f4;}


.pagination ul li.active a {color: #000;}


.pagination ul li:hover {background: #f4f4f4;}


.pagination ul li:hover a {color: #000;}





.confirm-box {text-align: left; line-height: 30px; border-bottom: 1px solid #e1e1e1;}


.button-confirm {text-align: right;}


.button-confirm a {width: 90px; height: 30px; line-height: 30px; color: #fff; background: #ed1b23; display: inline-block; margin-right: 10px; text-align: center;}


.button-confirm button {width: 90px; height: 30px; line-height: 30px; color: #fff; background: #454454; display: inline-block; border: none;}





.view-list-team table {width: 100%; border-collapse: collapse;}


.view-list-team table tr th {border-bottom: 1px solid #e1e1e1; line-height: 25px; text-align: left; padding: 0 5px;}


.view-list-team table tr td {padding: 0 5px; line-height: 25px; border-bottom: 1px dashed #e1e1e1; background: #fff; vertical-align: middle;}


.view-list-team table tr:hover td {background: #fafafa;}


.view-list-team table tr td a {color: #454545;}


.view-list-team table tr td:last-child {text-align: right}


.count-child {display: inline-block; padding: 3px 5px; border: 1px solid #e1e1e1; border-radius: 20px; height: 17px; line-height: 17px; margin-top: 3px; font-size: 12px;}


.count-child span {position: relative; top: -4px}


.count-file {display: inline-block; padding: 3px 5px; border: 1px solid #e1e1e1; border-radius: 20px; height: 17px; line-height: 17px; margin-top: 3px; font-size: 12px;}


.count-file img {height: 18px;}


.count-file span {position: relative; top: -4px}





.title-home {color: #ed1b23; text-transform: uppercase; font-size: 14px; font-family: OpenSans-Bold;}


.title-home a {color: #ed1b23;}


.list-team ul {width: 100%; display: block;}


.list-team ul li {width: 19.7%; padding: 10px; display: inline-block; position: relative; box-sizing: border-box; overflow: hidden; }


.list-team ul li .image-team {-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.4); -moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.4); box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.4); padding-bottom: 30px; max-height: 200px; overflow: hidden;}


.list-team ul li .image-team img{display: block; height: 165px;}


.list-team ul li .name-team {height: 30px; line-height: 30px; width: calc(100% - 20px); background: #ed1b24; color: #fff; padding: 0 10px; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: absolute; bottom: 10px; left: 10px; text-align: center; text-transform: uppercase;}





.list-child-team ul {width: 100%; display: block;}


.list-child-team ul li {width: 19.7%; display: inline-block; position: relative; overflow: hidden; padding: 10px; box-sizing: border-box;}


.list-child-team ul li .inner-child-team { box-sizing: border-box; -webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.4); -moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.4); box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.4); border-radius: 10%; background: #eaeaea; padding-top: 10px; height: 215px;}


.name-child-team {height: 30px; line-height: 30px; text-align: center; background: #d0cece; text-align: center; width: 90%; text-transform: uppercase; color: #ed1b23; -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.4); -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.4); box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.4);}


.name-child-team a {color: #ed1b24; font-family: OpenSans-Bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}


.list-child-child {text-align: center; margin-top: 15px; margin-bottom: 15px;}


.list-child-child .child-item {width: 45%; margin-right: 5%; float: left; margin-bottom: 10px;}


.list-child-child .child-item:nth-child(2n) {margin-right: 0;}


.list-child-child .child-item .image-child-item {width: 50px; height: 50px; overflow: hidden; border-radius: 50%;}


.list-child-child .child-item .image-child-item img {width: 50px; display: block;}


.list-child-child .child-item .name-child-item {font-size: 9px; background: #fff; height: 15px; line-height: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 90%; padding: 0 5px; box-sizing: border-box; color: #454454; color: #454454; text-transform: uppercase; font-family: OpenSans-Bold;}





.setting-name {font-size: 16px; margin: 15px auto;}


.setting-select {width: 353px; float: left;}


.setting-select .setting-select-all {float: left;}


.setting-select .setting-unselect-all {float: right;}


.list-select {width: 300px; float: left;}


.list-select ul li {display: inline-block; width: 100px; float: left;}


.button-setting button {background: #ed1b24; color: #fff; border: none; height: 35px; width: 95px; font-size: 15px; line-height: 35px;}





.file-type-icon {background: #ed1b24; color: #fff; display: inline-block; padding: 2px 5px; border-radius: 5px; line-height: 15px; font-size: 12px;}


.list-file .name-team {background: #fff!important; font-size: 13px; color: #454454!important;}


.file-type-preview {height: 165px; line-height: 165px; font-size: 28px; color: #fff; background: #295498; text-align: center; font-family: OpenSans-Bold;}


.preview-file {position: absolute; bottom: 40px; left: 10px; background: #ed5f69; width: 40px; line-height: 30px; height: 30px; text-align: center; color: #fff; font-size: 13px; cursor: pointer; display: none;}


.preview-file a {color: #fff;}


.size-file {position: absolute; top: calc(50% - 35px); left: calc(50% - 15px); display: none;}


.size-file img {width: 30px; height: 30px;}


.size-file span {display: inline-block; padding: 3px 7px; background: #fff; margin-left: calc(-50% + 15px); border-radius: 4px; font-size: 12px;}


.download-file {position: absolute; bottom: 40px; right: 10px; width: 30px; height: 30px; display: none;}


.download-file img {width: 30px;}


.list-file ul li {cursor: pointer;}


.list-file ul li:hover .size-file {display: block;}


.list-file ul li:hover .download-file {display: block;}


.list-file ul li:hover .preview-file {display: block;}








input[type="checkbox"] {


    display: none !important;


}


input[type="checkbox"] + label {


    color: #afafaf;


    cursor: pointer;


}


input[type="checkbox"] + label span {


    display: inline-block;


    width: 15px;


    height: 14px;


    margin-left: 40px;


    vertical-align: middle;


    background: url('../img/icon/red.png') -14px 0px no-repeat;


    cursor: pointer;


    position: relative;


    top: -3px;


}


input[type="checkbox"]:checked + label span {


    background:url('../img/icon/red.png') -29px 1px no-repeat;


    cursor: pointer;


}





input[type="radio"] {


    display: none !important;


}


input[type="radio"] + label {


    color: #afafaf;


    cursor: pointer;


}


input[type="radio"] + label span {


    display: inline-block;


    width: 15px;


    height: 14px;


    margin-left: 40px;


    vertical-align: middle;


    background: url('../img/icon/red.png') -14px 0px no-repeat;


    cursor: pointer;


    position: relative;


    top: -3px;


}


input[type="radio"]:checked + label span {


    background:url('../img/icon/red.png') -29px 1px no-repeat;


    cursor: pointer;


}