/* Designed by LoKiem */
@charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Saira:400,700&subset=vietnamese"); :root{ --primary-color: #1D87EA; --primary-hover-color: #1E8AF0; --bs-primary: #1D87EA; } html{ font-size: 15px; font-family: "Saira", sans-serif; scroll-behavior: smooth; background-color: #FAFAFA; } *, :after, :before{box-sizing:border-box} body{ margin: auto; padding: 0; color: #000000; overflow-x: hidden; } img{ width: auto; height: auto; margin: 0; max-width: 100%; padding: 0; vertical-align: middle; } .image-caption{ display: block; font-size: small; color: gray; padding: 2px 5px 15px 5px } .user-avatar{ border-radius: 50%; } .user-avatar>img{ border-radius: 50%; object-fit: cover; width: 50px; height: 50px; box-shadow: 0 0 1px #666; } a:link, a:visited, a:active{ color: #1C1C1C; text-decoration: none } a:hover{ color: #1D87EA; } .link,a{cursor: pointer} .primary-color{ color: #1D87EA !important; } .primary-actived{ color: #1D87EA !important; border-bottom: 1px solid #1D87EA !important; } .primary-bg{ color: #FFFFFF !important; background-color: #1D87EA !important } .primary-hover:hover{ background-color: #1E8AF0 !important; color: #FFFFFF !important; } .primary-border{ border-bottom: 1px solid #1D87EA; } #header-info{ height: 40px; position: fixed; top: 0; width: 100%; z-index: 199708 } #header{ transition: .5s all; background: #1D87EA; color: #F7F7F7; height: 69px; line-height: 69px; position: fixed; width: 100%; z-index: 199708; top: 0; } .header-fixed-height{ height: 69px; } #header .logo{ max-height: 59px } .header-right{ max-width: 90%; }  .navbar ul{ list-style-type: none; padding: 0; margin: 0; } .navbar .primary-bg{ background: #1D87EA !important; } .navbar>ul>li{ position: relative; margin: 0 10px; cursor: pointer; word-wrap: break-word; white-space: nowrap; } .navbar>ul>li:first-child{ margin: 0 10px 0 0; } .navbar>ul>li:last-child{ margin-right: 0; } .navbar li>a, .navbar li>span{ display: inline-block; color: #F7F7F7; position: relative; font-size: 18px } .navbar li>a:hover, .navbar li>span:hover, .navbar li:hover span, .navbar-icon-actived, .navbar-item-actived{ color: #FFFFFF !important; text-decoration: underline; } .navbar li>div{ display: none; position: absolute; z-index: 97; top: 69px; left: 50%; transform: translate(-50%,0); line-height: normal; box-shadow: 0px 0px 7px 0px rgba(8, 88, 157, 0.2);; } .navbar li>div>ul{ display: flex; } .navbar li>div a{ min-width: 180px; padding: 15px; } .navbar-arrow-icon:after{ content: "\f107"; font-family: FontAwesome; font-style: normal; line-height: normal; transition: transform 0.2s; display: inline-block; } .navbar li:hover .navbar-arrow-icon:after{ transform: rotate(180deg); }  .blog-navbar-wrap{ border-bottom: 1px solid #dedede; border-top: 1px solid #ebebeb; } .blog-navbar ul{ list-style-type: none; padding: 0; margin: 0; } .blog-navbar>ul>li{ position: relative; margin: 0 10px; cursor: pointer; word-wrap: break-word; white-space: nowrap; padding: 20px 0 } .blog-navbar>ul>li:first-child{ margin: 0 10px 0 0; } .blog-navbar>ul>li:last-child{ margin-right: 0; } .blog-navbar li>a, .blog-navbar li>span{ display: inline-block; color: #313131; position: relative; font-size: 16px } .blog-navbar li>a:hover, .blog-navbar li>span:hover, .blog-navbar li:hover span, .blog-navbar-icon-actived, .blog-navbar-item-actived{ color: #636363 !important; text-decoration: underline; } .blog-navbar li>div{ display: none; position: absolute; z-index: 97; top: 100%; left: 50%; transform: translate(-50%,0); line-height: normal; box-shadow: 0px 0px 7px 0px rgba(8, 88, 157, 0.2);; } .blog-navbar li>div>ul{ display: flex; background: white } .blog-navbar li>div a{ min-width: 220px; padding: 15px 20px; border-bottom: 1px solid #EDEDED } .blog-navbar-arrow-icon:after{ content: "\f107"; font-family: FontAwesome; font-style: normal; line-height: normal; transition: transform 0.2s; display: inline-block; } .blog-navbar li:hover .navbar-arrow-icon:after{ transform: rotate(180deg); } #footer{ background-color: #030303; color: #8A92A2; overflow: hidden; border-top: 2px solid #30BF5B; padding: 15px; line-height: 1.5 } #footer a{ color: #8A92A2; } #footer a:hover{ color: #C9C8C8 !important; } #main,.main{ display: block; margin: auto; }  .bd{border:1px solid transparent;} .bd-top{border-top:1px solid transparent;} .bd-bottom{border-bottom:1px solid transparent;} .bd-left{border-left:1px solid transparent;} .bd-right{border-right:1px solid transparent;} .line-run{position: relative} .line-run:after{ display: block; position: absolute; left: 0; right: 0; bottom: 0; width: 0; height: 1px; overflow: hidden; border-bottom: 1px solid #1D87EA; content: ""; transition: all .3s; margin: auto } .line-run:hover:after{width: 100%} .ul-none-style{ list-style-type: none; padding: 0; margin: 0 }  .section{ box-shadow: 0 2px 8px 0 rgba(0,0,0,.2); background-color: #FFFFFF; margin-bottom: 20px; } .section-body{ padding: 15px 15px } .section>.heading, .section-heading{ padding: 15px 15px; color: #1D87EA; border-bottom: 1px solid #1D87EA; font-size: 20px; background-color: #FFFFFF; } .heading-small{ padding: 5px 15px !important } .heading, .heading-basic, .heading-block, .heading-line, .heading-sharp, .heading-simple{ font-weight: normal; position: relative; }  .heading-basic{ text-align: center; font-size: 27px; padding: 10px; font-weight: bold; color: #000000 } .heading-basic>h1, .heading-basic>h2, .heading-basic>h3{ position: relative; font-size: inherit; font-weight: bold; text-transform: uppercase; } h2.heading-basic{ } .heading-basic>div{ font-size: 16px; font-weight: normal; padding: 10px 0 20px 0; } .heading-basic>div>i{ width: 15px; background: #bbc3cc; height: 5px; margin: 0 1px; display: inline-block; border-radius: 10px } .heading-basic>div>i:nth-child(2){ width: 30px; }  .heading-simple{ font-size: 22px; padding: 15px; border-bottom: 1px solid #EAEAEA; color: #313131; background-color: white }  .heading-block{ font-size: 20px; padding: 8px; color: #FFFFFF; background-color: #1D87EA; }  .heading-line{ position: relative; color: #FFFFFF; } .heading-line>span:before{ content: ""; height: 2px; width: 100%; background: #1D87EA; bottom: 50%; z-index: -1; position: absolute; left:0 } .heading-line>span{ display: inline-block; border-radius: 20px; background: #1D87EA; margin: 0; padding: 8px; font-size: 20px; }  .heading-sharp{ border-bottom: 3px solid #1D87EA; position: relative; } .heading-sharp>span{ display: inline-block; padding: 0 18px; line-height: 50px; position: relative; color: #FFFFFF; background: #1D87EA; font-size: 20px; } .heading-sharp>span:before { border-right: 20px solid transparent; border-bottom: 50px solid #1D87EA; content: ""; display: inline-block; height: 0; position: absolute; right: -20px; top: 0; width: 0; } .heading-general{ padding: 30px; background-color: #1D87EA ; position: relative; text-align: center; font-size: 25px; color: white } .heading-general:before{ content: ""; position: absolute; background-position: top; background-image: url(/files/uploads/2019/07/bg.png); width: 100%; top: -70px; bottom: 0; left: 0; right: 0; z-index: 10000000; opacity: .1; pointer-events: none; }  select{cursor: pointer;} .form input, .form button, .form select, .form textarea, .form-mrg{ margin-bottom: 10px } .form-hover>.form-item:hover{ background-color: #DBEEF0 !important } .input, select, textarea, input[type="text"]{ padding: 10px 12px; border-radius: 3px; font-size: 14px; transition: all .2s ease-in-out; border: 1px solid #DDDDDD; outline: none; vertical-align: middle; } textarea{border-radius: 3px !important;} .input-color{ position: relative; } .input-color span, .input-color i{ position: absolute; color: white; top: 50%; animation: colours 10s infinite; font-style: normal } .input-color span{ pointer-events: none; left: 50%; transform: translate(-50%,-50%); } @keyframes colours { 0% { color: black; } 100% { color: white; } } .input-color input[type="color"]{ min-width: 50px; min-height: 50px; border: 1px solid #DDDDDD; outline: none; vertical-align: middle; cursor: pointer; background: none } .input:focus, select:focus, textarea:focus, input[type="text"]:focus{ border: 1px solid #1E8AF0; box-shadow: 0 0 5px #1E8AF0; } .input-icon{ position: relative; font-size: 14px; } .input-icon>.fa{ position: absolute; top: 50%; right: 10px; pointer-events: none; transform: translate(0,-50%); color: gray; } .input-icon>.input{ width: 100%; padding-left: 25px; } .input-group .input{ border-radius: 3px 0 0 3px !important; border: 1px solid #DDDDDD; border-right: none } .input-group .btn{ border-radius: 0 3px 3px 0 !important; border: 1px solid #DDDDDD; border-left: none } .input-group .input:focus{ box-shadow: none } .input-error, .input-success{ position: relative; } .input-error:after, .input-success:after{ position: absolute; right: 5px; top: 50%; transform: translate(0,-50%); } .input-error input{ width: 100%; box-shadow: 0 0 5px red; } .input-error:after{ color:red; content: "\f00d"; font-family: FontAwesome; } .input-success input{ width: 100%; box-shadow: 0 0 5px green; } .input-success:after{ color:green; content: "\f00c"; font-family: FontAwesome; } .input-search>input{ width: 110px; box-sizing: border-box; background-color: #FFFFFF; border: 1px solid #D5D5D5; border-radius: 10em; padding-right: 25px; transition: all .5s; color: #919191 } .input-search>input:focus { width: 140px; border: 1px solid #1D87EA; box-shadow: 0 0 5px #1D87EA; } .input-search>input::placeholder{ color: #919191 } .input-search{ position: relative; display: inline-block; } .input-search>button{ position: absolute; color: #919191; top: 50%; right: 5px; transform: translate(0,-50%);; line-height: normal; outline: none; background: none; border: none; cursor: pointer; } .input-search-full{ padding: 10px 5px; margin: auto; display: block; } .input-search-full>input{ width: 100% !important; } .input-search-large>input{ width: 200px; } .input-search-large>input:focus { width: 230px; }  .input-label{ position: relative; margin-bottom: 10px } .input-label>input, .input-label>select, .button-label{ padding-top: 10px !important; padding-bottom: 10px !important; } .heading-large{ padding-top: 12px !important; padding-bottom: 12px !important; } .button-label{ margin-bottom: 10px; } .no-mrg{ margin-bottom: 0 } .input-label>span{ position: absolute; top: 50%; transform: translate(0, -50%); left: 10px; background-color: white; padding: 2px 10px; color: gray; transition: .2s all; pointer-events: none; font-size: 13.5px; border-radius: 10px; white-space: nowrap; } .input-label-disabled>span{ background-color: #eee; } .input-label-textarea>span{ top: 20px; } .input-label>.input-label-has-content{ font-size: 11px; top: -2px; font-weight: bold; color: var(--btn-primary-color); } .input-label>.input-label-focus{ color: var(--btn-primary-color); } .form-date, .form-date-wrap input{ background-color: white !important; cursor: pointer !important; } .fa-icon{ min-width: 20px }  .btn, .btn-primary, .btn-danger, .btn-info, .btn-disabled, .btn-gradient{ padding: 10px 12px; border-radius: 3px; font-size: 14px; border: 1px solid transparent; outline: none; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; line-height: normal; display: inline-block; } .btn-sm{ padding: 5px 10px; font-size: 12px; } .btn-primary{ background-color: #1D87EA; border-color: #1D87EA; color: #FFFFFF !important; } .btn-primary:hover{ background-color: #1E8AF0 !important; border-color: #1E8AF0 !important; } .btn-danger{ background-color: #DA3C3C; border-color: #DA3C3C; color: #FFFFFF !important; } .btn-danger:hover{ background-color: #DA3C3C !important; border-color: #DA3C3C !important; } .btn-info{ background-color: #30BF5B; border-color: #30BF5B; color: #FFFFFF !important; } .btn-info:hover{ background-color: #32C75F !important; border-color: #32C75F !important; } .btn-gradient{ background-color: #30BF5B; background: linear-gradient(135deg,#30BF5B 30%,#30BF5B 100%); border-color: #30BF5B; color: #FFFFFF !important; } .btn-gradient:hover{ opacity: .8 } .btn-circle{ border-radius: 25px !important; padding-left: 30px !important; padding-right: 30px !important } .btn-disabled{ background-color:#CFCFCF !important; color: #858585 !important; cursor: not-allowed; } .input-disabled, input:disabled{ background-color: #CFCFCF; color: #858585; user-select: none; } input:read-only:focus{ box-shadow: none; } .input-disabled{ cursor: pointer !important; } input,button,select,textarea{ font-family: "Saira", sans-serif; }  .check{ display: inline-block; position: relative; padding: 2px 2px 2px 32px; cursor: pointer; user-select: none; font-size: 16px; height: 30px; line-height: 22px; } .check input, .switch input{display:none} .check s{ position: absolute; left: 0; top: 50%; height: 25px; width: 25px; background-color: #F8F6F6; border:1px solid #EDEDED; transform: translate(0,-50%); } .check s:after{ content: ""; position: absolute; display: none; left: 40%; top: 10%; width: 6px; height:15px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg) } .check input:checked ~ s{ background-color: #1D87EA; border: 1px solid #1D87EA !important; } .check input:checked ~ s:after{display:block} .radio s{border-radius: 50%} .switch{ display: inline-block; position: relative; padding: 2px 2px 2px 65px; cursor: pointer; user-select: none; height: 35px; font-size: 16px; line-height: 35px; } .switch>s{ position: absolute; cursor: pointer; top: 50%; left:0; transform: translate(0,-50%); width: 60px; height: 30px; background-color: #DFDDDD; transition: 0.5s; border-radius: 34px; transition: .4s; } .switch>s:after{ position: absolute; content: ""; height: 23px; width: 23px; left: 15px; top:50%; right:1px; background-color: #FFFFFF; border-radius: 50%; transform: translate(-50%,-50%); transition: .4s; } .switch input:checked ~ s{ background-color: #1D87EA; } .switch input:checked ~ s:after{ left: calc(100% - 15px); }  .label-default, .label-primary, .label-success, .label-info, .label-warning, .label-danger{ padding: 2px 7px 2px 7px; font-size: 14px; border-radius: 14px; border: 1px solid transparent; display: inline-block; text-align: center; } .label-default{ color: white; background-color: #777; border-color: #777; }  .alert-primary, .alert-success, .alert-info, .alert-warning, .alert-danger{ padding: 9px; font-size: 14px; border: 1px solid transparent; word-wrap: break-word }  .panel{ font-size: 14px; border: 1px solid transparent; } .panel-list>.panel, .panel-last{ border-top: none; } .panel-list>.panel:first-child{ border-top: 1px solid transparent; } .panel.panel-no-border{ border-left: none !important; border-right: none !important; } .panel-default{ background-color: #F1F1F1; border-color: #E2E2E2 !important; color: #292929; }  .label-primary, .alert-primary, .panel-primary{ color: #FFFFFF; background-color: #1D87EA; border-color: #1D87EA !important; } .label-success, .alert-success, .panel-success{ color: #FFFFFF; background-color: #30BF5B; border-color: #30BF5B !important; } .label-info, .alert-info, .panel-info{ color: #FFFFFF; background-color: #34CF62; border-color: #34CF62 !important; } .label-warning, .alert-warning, .panel-warning{ color: #FFFFFF; background-color: #FFC008; border-color: #FBBD08 !important; } .label-danger, .alert-danger, .panel-danger{ color: #FFFFFF; background-color: #DA3C3C; border-color: #DA3C3C !important; }  .panel>.heading{ padding: 9px; border: 1px solid transparent; position: relative; user-select: none; } .panel>.heading.link:after{ content: "\f138"; font-family: FontAwesome; position: absolute; right: 10px; top: 50%; transform: translate(0,-50%); } .panel>.heading.panel-actived:after{ content: "\f13a"; } .panel-body{ background-color: #fff; padding: 9px; color: #000000 !important; }  .badge{ padding: 2px 7px 2px 7px; font-size: 14px; border-radius: 30px; border: 1px solid transparent; display: inline; text-align: center; background-color: #1D87EA; color: #FFFFFF; min-width: 25px; }  ul.list{ list-style-type: none; padding: 0 } .list>a{ position: relative; display: block; transition: .4s; color: #000000 !important; border: 1px solid #F2F2F2; padding: 8px; margin-bottom: -1px; background-color: #FFFFFF; font-size: 15px; } .list>a:hover{ background-color: #E6E6E6 !important; } .list>span, .list>li{ display: block; border: 1px solid #F2F2F2; padding: 8px; margin-bottom: -1px; background-color: #FFFFFF; font-size: 15px; position: relative } .list>span:last-child, .list>li:last-child, .list>a:last-child{ margin-bottom: 1px; } .list>.list-actived{ background-color: #E6E6E6; } .list:hover .list-actived{ background-color: #FFFFFF; } .list .badge{ position: absolute; top: 50%; right: 5px; transform: translate(0, -50%); } .menu, .menu-bg{ border-color: #E7E7E7; padding: 8px; background-color: #FFFFFF; font-size: 15px; word-wrap: break-word; } .menu-bg{ background-color: #F5F5F5 !important; }  .see-more{ display: inline-block; border: 1px solid #1D87EA; padding: 5px 15px 5px 15px; font-size: 16px; border-radius: 20px; color: #1D87EA !important; text-align: center; transition: .3s; } .see-more:hover{ background-color: #1E8AF0; color: #FFFFFF !important; }  .table, .table-border, .table-border-top{ border-collapse: collapse; padding: 0; margin: 0 auto; } .table th{ padding: 8px; text-align: inherit; background-color: #30BF5B; color: #000000 } .table td{ padding: 8px; } .table tr:nth-child(even) td{ background-color: #E8FFFD; } .table tr:nth-child(odd) td{ background-color: #E3FAF8; } .table-border th, .table-border td{ border: 1px solid #FFFFFF; } .table-border-top tr{ border-top: 1px solid #FFFFFF; } .table tr:hover td{ background-color: #C2F5DB; } .table th{ text-align: inherit; } .table tr.table-actived td{ background-color: #C2F5DB; } .table-responsive{ display: block; width: 100%; overflow-x: auto; }  .modal{ top:0; position:fixed; z-index:199709; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.5); left:0; bottom:0; animation: fadein 0.5s; } .modal .modal-heading{ padding: 12px !important; font-size: 22px; color: #FFFFFF; background-color: #1D87EA; } .modal-body{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 95%; max-height: 100%; } .modal-content{ margin: 20px 0; background: white } .modal-close, .right-icon{ position: absolute; right: 10px; top: 50%; transform: translate(0,-50%); } .modal-close:after{ content: "\f00d"; font-family: FontAwesome; } .modal-close:hover{ opacity: .7 } @keyframes fadein{ from{ opacity:.1 } to{ opacity:1 } } .modal-form{ border-radius: 15px; background: #EAEEF1 !important } .modal-form>.heading{ padding: 30px 30px 2px 30px; text-align: center; font-size: 20px; font-weight: 600; } .modal-form>.heading>i{ top: 25px; right: 15px } .modal-form>.modal-content{ background: transparent !important; } .modal-form>form input, .modal-form>form button{ margin-top: 10px; margin-bottom: 10px; border-radius: 20px !important } .modal-form>form .modal-input{ position: relative; } .modal-form>form .modal-input>i{ position: absolute; top: 50%; right: 5px; transform: translate(0, -50%); background: #eff2f9; color: #9ba7ca; display: inline-block; width: 30px; height: 30px; border-radius: 50%; line-height: 30px; text-align: center; } .modal-form label{ font-size: 14px } .form-logo{ position: absolute; top: -50%; left: 50%; transform: translate(-50%, 0); background: #EAEEF1; border-radius: 50%; width: 50px; height: 50px; line-height: 50px; box-shadow: 0 0 0 2.25px #eff2f9; vertical-align: middle; } .form-logo>img{ width: 60%; height: 60%; }  .paginate{ list-style-type: none; margin: 0; padding: 10px 0; } .paginate>a, .paginate>span{ display: inline-block; text-align: center; border: 1px solid #1D87EA; color: #1D87EA; padding: 6px; font-size: 14px; margin: 2px; min-width: 35px; background-color: #fff; border-radius: 100px; } .paginate>span, .paginate>a:hover{ background-color: #1D87EA; color: #FFFFFF; border: 1px solid #1D87EA; }  #loading>div{ top:0; left:0; padding-top:50px; position:fixed; z-index:9999999999; width:100%; height:100%; overflow:auto; background-color: rgba(0,0,0,0.2); } #loading img{ position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; } #loading>div>div{ position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .loading-ouside{ width:150px; height:150px; border-radius:50%; position:relative; margin:0 auto; margin-top:200px; overflow:hidden; animation:spin 2s linear infinite; } @-webkit-keyframes spin{ 0%{ -transform:rotate(0deg); } 100%{-webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); -transform:rotate(360deg); } } .loading-inside{ width:100%; height:50%; position:absolute; margin-top:50%; background:linear-gradient(90deg,#30BF5B,#EAEAEA); } .loading-inside:before{ content: ""; width:100%; height:100%; position:absolute; margin-top:-50%; background:linear-gradient(90deg,#30BF5B,#EAEAEA); } .loading-inside:after{ content: ""; width:80%; height:160%; position:absolute; margin-top:-40%; margin-left: 10%; background: white; border-radius:50%; }  .breadcrumb{ list-style-type: none; padding: 0; margin: 0; display: flex; flex-wrap: nowrap; } .breadcrumb a{ display: inline-block; padding: 15px 0 } .breadcrumb>li{ position: relative; } .breadcrumb>li:after{ content: "\f105"; font-family: FontAwesome; padding: 8px; } .breadcrumb>li:last-child:after{ display: none }  .fixed-button{ position: fixed; bottom: 110px; right: 20px; z-index: 97; } .fixed-button>a{ padding: 5px; display: inline-block; position: relative; border-radius:50%; color: #FFFFFF; width: 55px; height: 55px; background-color: #30BF5B; background-image: linear-gradient(45deg, #30BF5B 0%, #38E06B 100%); opacity: 1; transition: opacity 0.3s ease-out; } .fixed-button>a:hover{ text-shadow: none; opacity: .7 } .fixed-button>a i, .fixed-button>a img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 30px; padding: 6px; } .fixed-button>a img{ border-radius: 50%; width: 55px; height: 55px; object-fit: cover; } .fixed-button>span{ display: inline-block; position: absolute; top: 0; right: -8px; background-color: #30BF5B; background-image: linear-gradient(45deg, #38E06B 0%, #30BF5B 100%); color: #FFFFFF; border-radius: 50%; min-width: 20px; min-height: 20px; padding: 2px; text-align: center; font-size: 12px; z-index: 1421997 } .fixed-button>nav{ display: none; position: absolute; bottom: 20px; right: 60px; min-width: 180px; } .fixed-button>nav a{ display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-top: 1px; border-radius: 20px; background-color: #30BF5B; background-image: linear-gradient(45deg, #38E06B 0%, #30BF5B 100%); color: #FFFFFF; padding: 8px 13px; } .fixed-button>nav a:hover{ background-image: linear-gradient(45deg, #38E06B 30%, #30BF5B 100%); } .fixed-button>nav a sup{color: #FFFFFF;}  .contact-button{ position: fixed; bottom: 30px; right: 20px; z-index: 1402972; } .contact-button a{ position: relative; padding: 5px; display: inline-block; border-radius:50%; color: #FFFFFF; width: 55px; height: 55px; background-color: #1D87EA; opacity: 1; transition: .5s all; } .contact-button>a:hover, .contact-button>nav>a:hover{ text-shadow: none; } .contact-button a i, .contact-button a img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 30px; padding: 6px; } .contact-button a img{ border-radius: 50%; width: 50px; height: 50px; object-fit: cover; } .contact-button>span{ display: inline-block; position: absolute; top: 0; right: -8px; background-color: #1D87EA; color: #FFFFFF; border-radius: 50%; min-width: 20px; min-height: 20px; padding: 2px; text-align: center; font-size: 12px; z-index: 1421997 } .contact-button>nav{ display: none; position: absolute; bottom: 60px; right: 0; } .contact-button>nav a{ display: block !important; margin-bottom: 10px; position: relative } .contact-button>nav a>span{ opacity: 0; pointer-events: none; position: absolute; background-color: #1D87EA; display: inline-block; right: calc(100% + 5px); top: 50%; text-align: center; padding: 10px; border-radius: 20px; min-width: 170px; transform: translate(0, -50%); transition: .5s all } .contact-button>nav a:hover span{ opacity: 1 } .pulsing-button{ display: block; width: 22px; height: 22px; border-radius: 50%; background: #1D87EA; cursor: pointer; box-shadow: 0 0 0 #1D87EA; animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 #1D87EA; } 70% { box-shadow: 0 0 0 20px rgba(204,169,44, 0); } 100% { box-shadow: 0 0 0 0 rgba(204,169,44, 0); } } .contact-button-wrap{ background: rgba(33,33,33,.5); width: 100vw; position: fixed; height: 100%; top: 0; bottom: 0; z-index: 1402971; }  .tooltip{ position: relative; display: inline-block; } div.tooltip, section.tooltip{ display: block !important; } .tooltip-body{ font-size: 14px; visibility: hidden; background-color: #1E8AF0; color: #FFFFFF; text-align: center; border-radius: 5px; padding: 7px 8px 7px 8px; position: absolute; z-index: 140297; display: inline-block; width: auto; white-space: nowrap; } .tooltip-left .tooltip-body{ top: 50%; right: calc(100% + 5px); transform: translate(0,-50%); } .tooltip-right .tooltip-body{ top: 50%; left: calc(100% + 5px); transform: translate(0,-50%); } .tooltip-bottom .tooltip-body{ top: calc(100% + 5px); left: 50%; transform: translate(-50%); } .tooltip-top .tooltip-body{ bottom: calc(100% + 5px); left: 50%; transform: translate(-50%); } .tooltip .tooltip-body::after{ content: ""; position: absolute; border-style: solid; border-width: 5px; } .tooltip-top .tooltip-body::after, .input-tooltip>span::after{ top: 100%; left: 50%; margin-left: -5px; border-color: #1E8AF0 transparent transparent transparent; } .tooltip-bottom .tooltip-body::after{ bottom: 100%; left: 50%; margin-left: -5px; border-color: transparent transparent #1E8AF0 transparent; } .tooltip-right .tooltip-body::after{ top: 50%; right: 100%; margin-top: -5px; border-color: transparent #1E8AF0 transparent transparent; } .tooltip-left .tooltip-body::after{ top: 50%; left: 100%; margin-top: -5px; border-color: transparent transparent transparent #1E8AF0; } .tooltip-hidden-arrow:after{ display: none !important } .tooltip:hover .tooltip-body{visibility: visible;} .tooltip .tooltip-body:hover{visibility: hidden !important;}  .quote{ border-left: 5px solid #1D87EA; padding: 8px; background-color: #EAEAEA; margin: 2px 0 2px 0; } .quote>span{ display: block; font-weight: bold } .quote>i{ display: block } .quote>i:before { content: "“"; padding-right:5px; } .quote>i:after { padding-left:5px; content: "”"; }  #popupAds .modal-body{ width: 90%; max-width: 900px; max-height: calc(100% - 50px); text-align: center } #popupAds .heading-block>i{ font-size: 25px; color: #FFFFFF; } #popupAds img, #popupAds video{ object-fit: cover; max-width: 100%; max-height: 100% } #popupAds .modal-body>.link{ color: #FFFFFF; font-size: 28px; position: absolute; top: -25px; right: -20px } #popupAds .modal-body>.link:hover{ color: #1E8AF0; }  .posts-flex>div{ overflow: hidden; position: relative; } .posts-flex .flex{ position: absolute; top: 50%; transform: translate(0,-50%); width: 100%; } .posts-flex-text>span, .posts-flex .flex>a{ display: block; } .posts-flex .flex>a{ } .posts-flex .flex>a>img{ width: 100%; height: 100%; object-fit: cover; } .posts-flex-desc, .posts-flex-time{ text-align: justify; } .posts-flex-time{ margin-bottom: 3px } .posts-flex-text{ padding: 0 8px } .account-outer{ animation: none } .account-outer .modal-body{ max-width:420px; } .account-outer .modal-content{ border-radius: 3px; }  .progress-bar { height: 20px; background: #e9ecef; border:none; transition: all 0.3s ease; display:block; } .progress-bar::-webkit-progress-bar { background: #e9ecef; border:none } .progress-bar::-webkit-progress-value {  background: #1D87EA; border:none } .progress-bar::-moz-progress-bar {  background: #1D87EA; border:none } .progress-bar::-ms-fill {  background: #1D87EA; border:none }  .fx-btn-blick { position: relative; overflow: hidden; } .fx-btn-blick:before { content: ""; background-color: #fff; height: 100%; width: 3em; display: block; position: absolute; top: 0; -webkit-transform: skewX(-45deg) translateX(0); transform: skewX(-45deg) translateX(0); -webkit-transition: none; transition: none; opacity: 0; -webkit-animation: left-slide 2s infinite; animation: left-slide 2s infinite; } @keyframes left-slide { 0% { left: -50%; opacity: 0.1; } 50%, 100% { left: 150%; opacity: 0.75; } } .overlay-menu{ position: fixed; height: 100%; width: 100%; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.23); display: none; }  .block{ display: block } .popup-notify{ position: fixed; display: inline-block; bottom: 30px; right: 35px; background-image: linear-gradient(135deg, #1D87EA 0%, #1E8AF0 100%); min-width: 320px; border-radius: 5px; } .popup-notify>*:hover{ color: white !important; opacity: .7 } .popup-notify>a{ display: block; padding: 10px 20px; transition: .5s all; color: white; } .popup-notify>i{ position: absolute; top: -30px; right: -20px; color: #1D87EA; padding: 5px; cursor: pointer; font-size: 25px } .popup-notify>i:hover{ color: #1D87EA !important; }  .hidden{display:none} .text-inline{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wall{border-bottom: 1px solid #1D87EA;} .hidden-printing{ visibility: hidden; } @media print { .hidden-printing{ visibility: visible !important; } } .red{color:red} .blue{color:blue} .skyblue{color:skyblue} .green{color:green} .gray{color:gray} .cyan{color:cyan} .hover-red:hover{background-color:red} .hover-blue:hover{background-color:blue} .hover-skyblue:hover{background-color:skyblue} .hover-green:hover{background-color:green} .hover-gray:hover{background-color:gray} .hover-cyan:hover{background-color:cyan} .left{text-align: left} .center{text-align: center} .right{text-align: right} .float-right{float: right} .block{display: block;} .pd-0{padding: 0px !important} .pd-2{padding: 2px} .pd-5{padding: 5px} .pd-10{padding: 10px} .pd-15{padding: 15px} .pd-20{padding: 20px} .pd-30{padding: 30px} .pd-50{padding: 50px} .bg{background-color:#fff} .rm-radius{border-radius: 0 !important} .radius{border-radius: 50% !important} .input-circle{border-radius: 25px !important} .flex{ display: flex; flex-wrap: wrap; } .flex-nowrap{ display: flex; flex-wrap: nowrap; } .flex-nowrap>*{ flex-grow: 1 } .flex-middle{ align-items: center; } .flex-center{ justify-content: center; } .flex-margin{padding: 0 20px 0 0} .flex-margin:last-child{padding: 0 !important} .width-5{width:5%} .width-10{width:10%} .width-15{width:15%} .width-20{width:20%} .width-25{width:25%} .width-30{width:30%} .width-33{width:33%} .width-33x{width:33.33333%} .width-34{width:34%} .width-35{width:35%} .width-40{width:40%} .width-45{width:45%} .width-50{width:50%} .width-55{width:55%} .width-60{width:60%} .width-65{width:65%} .width-70{width:70%} .width-75{width:75%} .width-80{width:80%} .width-85{width:85%} .width-90{width:90%} .width-95{width:95%} .width-100{width:100%} .clearfix{clear:both} .highcharts-credits{ display: none !important } h1,h2,h3,h4,h5,h6{ margin: 0; font-weight: initial; } .spin-effect{ animation: spin 1s; } @keyframes spin{ 100% {transform:rotate(360deg);} } @keyframes rotate{ 100% {transform:rotateY(360deg);} }  @media(max-width: 767px){  .hidden-small{display: none !important;} .flex-medium{ display: block !important; } .flex-medium>*{ width: auto !important } .width-50-small{width: 50% !important; max-width: 100% !important} .width-49-small{width: 49% !important; max-width: 100% !important} .width-100-small{width:100% !important; max-width: 100% !important} .heading-basic{ font-size: 22px !important; } } @media(min-width: 768px) and (max-width: 1023px){  .hidden-medium{display: none !important;} .width-50-medium{width:50% !important; max-width: 100% !important} .width-100-medium{width:100% !important; max-width: 100% !important} } @media(max-width: 1023px){  .hidden-small-medium{display: none !important;} .flex-large{ display: block !important; } .flex-large>*{ width: auto !important } .flex-margin{ padding:0 !important; } .medium-margin-bottom{ margin-bottom: 10px !important } #header>.header-body{ padding: 0 0 0 15px; } #header{ height: 66px; line-height: 66px; } .header-fixed-height{ height: 66px; } #header .logo{ max-height: 44px } .width-50-small-medium{width:50% !important} .width-100-small-medium{width:100% !important} .navbar{ position: fixed; z-index: 98; top: 0; right: 0; bottom: 0; width: 0; padding-bottom: 20px; max-width: 320px; transition: all .3s ease-in-out; background: white !important; } .navbar>ul{ overflow-y: auto; height: 100%; display: block !important; } .navbar>ul>li{ float: none; margin: 0 !important; line-height: normal; font-weight: bold; } .navbar li>a, .navbar li>span{ display: block; width: 100% !important; padding: 15px; position: relative; font-size: 16px; color: #1C1C1C !important; ; } .navbar li>a:hover, .navbar li>span:hover, .navbar li:hover span{ color: #1E8AF0 !important; } .navbar .line-run:after{ display: none; } .navbar li>div{ position: relative; top: 2px; background: white !important;; box-shadow: none; font-weight: normal; } .navbar li>div>ul{ display: block; margin-left: 15px; border-left: 1px solid #dfdfdf; } .navbar li>div>ul>li{ width: 100% !important } .navbar li>div a{ padding: 10px; } .navbar-arrow-icon:after{ content: "\f105"; position: absolute; right: 8px; line-height: normal; transform: rotate(0deg) !important; } .navbar-item-opened .navbar-arrow-icon:after{ content: "\f107" !important; } .nav-icon-mobile>i{ padding: 10px; cursor: pointer; font-size: 25px; display: inline-block; vertical-align: middle; text-decoration: none !important }  .blog-navbar-wrap{ padding: 20px 10px } .blog-navbar-wrap .flex{ display: block !important; position: relative } .blog-navbar-wrap .flex>div:last-child{ position: absolute; right: 0; top: 50%; transform: translate(0, -50%); } .blog-navbar{ position: absolute; top: 100%; width: 100%; transition: all .3s ease-in-out; display: none; background: white; z-index: 1; box-shadow: 0 2px 8px 0 rgba(0,0,0,.2); } .blog-navbar>ul{ overflow-y: auto; height: 100%; display: block !important; } .blog-navbar>ul>li{ float: none; margin: 0 !important; line-height: normal; padding: 0 } .blog-navbar li>a, .blog-navbar li>span{ display: block; width: 100% !important; padding: 15px; position: relative; font-size: 16px; color: #1C1C1C !important; ; } .blog-navbar li>a:hover, .blog-navbar li>span:hover, .blog-navbar li:hover span{ color: #1E8AF0 !important; } .blog-navbar .line-run:after{ display: none; } .blog-navbar li>div{ position: relative; top: 2px; background: white !important;; box-shadow: none; } .blog-navbar li>div>ul{ display: block; margin-left: 15px; border-left: 1px solid #dfdfdf; } .blog-navbar li>div>ul>li{ width: 100% !important } .blog-navbar li>div a{ padding: 10px; } .blog-nav-icon-mobile{ padding: 10px 0 } #header .input-search{ display: none } #header .input-search>input:focus{ width: 180px } .breadcrumb-outer{ padding-left: 5px } } @media(min-width: 1024px){  .hidden-large{display: none !important;} .width-50-large{width:50% !important} .width-100-large{width:100% !important} .navbar li>div>ul{ background: rgba(29,135,234,1); color: #F7F7F7 } .navbar li>div>ul a{ color: #F7F7F7 !important; font-size: 16px } .navbar li>div>ul a:hover{ } .navbar li>div>ul a:hover{ text-decoration: underline; } .margin-left-sm-30{ margin-left: 30px !important } } .row{ display: flex; } .col-md-1, .col-md-2 pd-5, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10 pd-5, .col-md-11, .col-md-12 { } .col-md-1 { width: 8.33333% } .col-md-2 pd-5 { width: 16.66667% } .col-md-3 { width: 25% } .col-md-4 { width: 33.33333% } .col-md-5 { width: 41.66667% } .col-md-6 { width: 50% } .col-md-7 { width: 58.33333% } .col-md-8 { width: 66.66667% } .col-md-9 { width: 75% } .col-md-10 pd-5 { width: 83.33333% } .col-md-11 { width: 91.66667% } .col-md-12 { width: 100% } .img-title { padding: 20px; font-size: 20px } .zoomin:hover { transition: transform .2s; transform: scale(1.1); } .text-center{ text-align: center; } @media only screen and (max-width: 767px) { .solution-section .pd-10{ width: 100% } .col-xs-1 { width: 8.33333% } .col-xs-2 { width: 16.66667% } .col-xs-3 { width: 25% } .col-xs-4 { width: 33.33333% } .col-xs-5 { width: 41.66667% } .col-xs-6 { width: 50% } .col-xs-7 { width: 58.33333% } .col-xs-8 { width: 66.66667% } .col-xs-9 { width: 75% } .col-xs-10 { width: 83.33333% } .col-xs-11 { width: 91.66667% } .col-xs-12 { width: 100% } .hidden-xs{ display: none; } } .slogan-bg { color: #fff; background: url(/assets/images/home/bg-slogan.jpg) center top; background-size: 100%; padding: 80px 0 60px; text-align: center; } @media (max-width: 767px) { .slogan-bg { padding: 40px 0 20px; background-size: cover; } .header-slider-item-1:after{ display: none !important; } } .count { line-height: 40px; color: #fff; margin: 35px 0 20px; font-size: 60px; font-weight: 300; } hi{ }