/*color*/
.ic_orange {background: #F04F23; }
.ic_blue {background: #2D62ED; }
.ic_black {background: #262B43; }

.ic_drakgray{background: #555B78;}
.ic_brown {background: #baac94; }
.ic_cyan {background: #95aec4; }
.ic_green {background: #1bb934; }
.ic_lightblue {background: #c2cad4; }
.ic_purple {background: #a094ea; }
.ic_red {background: #ed1c24; }
.ic_white {background: #ffffff; }
.light_green_light {background: #8ec977; }
.ic_pink {background: #ea7092; }

.main_blue {background: #16315c; }
.mian_lightblue {background: #0070d2; }
.main_darkengrey {background: #516173; }
.main_gray {background: #555555; }
.main_graylight {background: #dfe1e5; }
.main_offwhite {background: #f6fbff; }
.main_offgrey {background: #eff2f5; }
.main_green {background: #31b544; }
.main_pink {background: #e3645b; }
.main_yellow {background: #fcb746; }
.main_skyblue {background: #2696f0; }
.main_lightblack {background: #333; }

.ic_drakblue{background: #6b47da;}

/*text color*/
.text_drakgray{color: #555B78;}
.text_orange {color: #F04F23; }
.text_red {color: #FF4343 !important; }
.text_blue {color: #2D62ED !important; }
.text_grey {color: #B5BCC8 !important; }

.text_brown {color: #baac94; }
.text_cyan {color: #95aec4; }
.text_green {color: #36af48 !important; }
.text_lightblue {color: #4ac3cb; }
.text_purple {color: #a094ea; }
.text_black {color: #333; }
.text_white {color: #ffffff; }
.text_light_green_light {color: #8ec977; }
.text_ic_pink {color: #ea7092; }

/*text transform*/
.caps-text{text-transform: uppercase;}
.lower-text{text-transform: lowercase;}
.capitalize-text{text-transform: capitalize;}
/*font weight*/
.regular-text{font-weight: normal;}
.bold-text{font-weight: bold}
.italic-text{font-style: italic;}
/*text decoration*/
.underline-text{text-decoration: underline;}
.strik-text{text-decoration: line-through;}

/*text type*/
.secondary-text {color: #666666; line-height: 26px; }
.normal-text{color: #000;}

/*show and hide*/
.show{display: block !important;}
.hide{display: none !important;}

/*heading*/
.icon-heading i{float: left; font-size: 18px; background: #4ac3cb; color: #fff; padding: 4px; margin-right: 10px; border-radius: 2px;}
h1{font-size: 24px; color: #060023; font-weight: 700;}
h2{font-size: 18px; color: #060023; font-weight: 700;}
h3{font-size: 16px; color: #060023; font-weight: 400;}
h4{font-size: 16px; color: #060023; font-weight: 400;}

/*label*/
label{ font-size: 14px; font-weight: 600; color: #000000; }

/*inputs*/
.formInput{position: relative;}
.toolNewDesign input[type="text"], .toolNewDesign input[type="password"], .toolNewDesign input[type="number"], .toolNewDesign input[type="email"], .toolNewDesign input[type="search"], .toolNewDesign input[type="date"], .toolNewDesign textarea{border:1px solid #ddd; border-radius: 3px; padding: 10px; box-sizing: border-box; background: #fff;}
.toolNewDesign textarea{ resize: none; }
.toolNewDesign input[type="text"]:disabled, .toolNewDesign input[type="password"]:disabled, .toolNewDesign input[type="number"]:disabled, .toolNewDesign input[type="email"]:disabled, .toolNewDesign input[type="search"]:disabled, .toolNewDesign input[type="date"]:disabled, .toolNewDesign textarea:disabled{background: #e9edf1; color:#9ba2ac; cursor: not-allowed;}
.form-control{ padding: 0.375rem .75rem; font-size: 14px; border: 1px solid #E6E9EC; height: 45px !important; font-weight: 500; color: #495057; }
/*focus*/
.toolNewDesign input[type="text"]:focus, .toolNewDesign input[type="password"]:focus, .toolNewDesign input[type="number"]:focus, .toolNewDesign input[type="email"]:focus, .toolNewDesign input[type="search"]:focus, .toolNewDesign input[type="date"]:focus, .toolNewDesign textarea:focus{border:1px solid #0070d2;}
/*Error*/
input.error, textarea.error{border:1px solid #ed1c24 !important; position: relative; color: #ed1c24 !important; cursor: help;}
.error-wrap:after{content: '❌'; position: absolute; top: 6px; right: -3px; color: #ed1c24; width: 30px; height: 30px; z-index: 999; font-size: 12px;}
/*Success*/
input.success , textarea.success{border:1px solid #1bb934 !important; color: #1bb934 !important;}
.success-wrap:after{content: '✔'; position: absolute; top: 6px; right: -3px; color: #1bb934; width: 30px; height: 30px; z-index: 999; font-size: 12px;}

/*button style*/
.form-button{ padding: 9px 30px; margin-bottom: 10px; border:0; border-radius: 2px; cursor: pointer; min-width: 100px; min-height: 35px; text-align: center; vertical-align: middle; color: #fff; box-sizing: border-box;}
button.form-button:disabled{background: #eee; cursor: not-allowed; color: #888;}
button.form-button .button-loader-image{max-height: 6px;}
.button-bordered{border:1px solid #ced0da; background: #fff; color: #354052;}

/*dropdown buttons*/
.dropdown-button{position: relative;}
.dropdown-button div.dropdown-opener{text-align: left; position: relative;}
.dropdown-button div.dropdown-opener i{position: absolute; right: -30px; top: -10px; background: rgba(0,0,0,0.1); bottom: -10px; line-height: 34px; font-size: 18px; width: 28px; text-align: center;}
.dropdown-button .dropdown-button-menu{position: absolute; left: 0; right: 0; top: 35px; border-top: 1px solid #00000036; z-index: 9;}
.dropdown-button .dropdown-button-menu .button-sub-list{padding: 0; margin: 0; list-style-type: none;}
.dropdown-button .dropdown-button-menu .button-sub-list li{padding: 9px 18px; text-align: left;}
.dropdown-button .dropdown-button-menu .button-sub-list li:hover{background: rgba(0,0,0,0.1);}
.dropdown-opener span{margin-left: -14px; }
.button-bordered.dropdown-button .dropdown-button-menu{background: #fff; border: 1px solid #ddd;}
.button-bordered.dropdown-button .dropdown-button-menu li{}
button.half-width {min-width: inherit; padding: 6px; width: 35px; margin-right: -4px;}
button.half-width i{font-size: 18px; line-height: 22px;}

/*icon button*/
.form-button.icon-button{padding: 10px 20px;}
.form-button.icon-button i{font-size: 16px; position: relative; top: 2px; margin-right: 5px;}
.form-button.text-button{background: none; padding: 0px; text-align: left; min-height: 30px; font-size: 16px;}
.form-button.text-button i{font-size: 21px; position: relative; top: 4px; margin-right: 10px;}

/*buttons*/

.form-button {
    padding: 10px 20px;
    margin-bottom: 10px;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    min-width: 105px;
    min-height: 45px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    box-sizing: border-box;
    font-size: 14px !important;
    font-weight: 500;
}
.form-button:focus{
    outline: none;
}
.button-bordered {
    border: 1px solid #636880;
    background: #fff;
    color: #354052;
}
.button-bordered:hover {
    border: 1px solid #F04F23;
    background: #F04F23;
    color: #fff;
}
.button-bordered-orange {
    border: 1px solid #F04F23;
    background: #fff;
    color: #F04F23;
}
.button-bordered-orange:hover {
    border: 1px solid #F04F23;
    background: #F04F23;
    color: #fff;
}

.form-button.text-button {
    background: transparent;
    padding: 0px;
    text-align: left;
    min-height: 30px;
    font-size: 16px;
    color: #8C8EA3;
}
.form-button.text-button:hover{
    color: #000;
}
.form-button.ic_orange:hover{
    background: #BC2800;
}

*{
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
}

body{
    font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; background: #f4f6f9;
}

.block {
    background: #fff;
    padding: 32px;
}
.vh-100{
    height: 100vh;
}

/*header*/
.header-outer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-left {
    display: flex;
    align-items: center;
}
.nav-button {
    border-right: 1px solid #EBEBF2;
    padding-right: 25px;
    padding-right: 25px;
    height: 32px;
}
.nav-button i {
    font-size: 28px;
    position: relative;
    top: -3px;
    cursor: pointer;
}
.header-portal {
    margin-left: 25px;
    vertical-align: middle;
}
.header-portal i{
    position: relative;
    top: 4px;
    margin-right: 3px;
    font-size: 16px;
}
.header-portal a{
    font-weight: 600;
    font-size: 13px;
    text-decoration: none !important;
}
.header-portal a:hover{
    color: #BC2800;
}
.header-portal a:hover i{
    color: #BC2800;
}
.header-right {
    display: flex;
    justify-content: center;
    align-items: center;
}
.hr-setting i.ms-Icon.ms-Icon--Settings {
    font-size: 22px;
    cursor: pointer;
}
.dropdown button {
    border: none;
    background: transparent;
    padding: 8px 0px;
}
.dropdown button:focus{
    outline: none;
}

.dropdown-menu{
    border: none;
    background: #272A42;
    border-radius: 0px;
}
.hr-user .dropdown-menu{
    top: 15px !important;
}
.hr-setting .dropdown-menu{
    top: 10px !important;
}
.dropdown-toggle::after{
    display: none;
}
.hr-setting .dropdown-menu::after {
    left: 2px;
    right: initial;
}
.hr-user .dropdown-menu::after {
    right: 18px;
}
.dropdown-menu a{
    color: #fff;
    font-size: 14px;
    padding: 8px 25px;
}
.dropdown-menu::after {
    position: absolute;
    content: "";
    right: 38px;
    top: -10px;
    border-bottom: 10px solid #272A42;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
.hr-qus {
    padding: 0px 10px;
}
.hr-qus i {
    font-size: 32px;
    position: relative;
    top: -2px;
}
.hr-noti{
    position: relative;
}
.hr-noti i {
    font-size: 23px;
}
.noti-alarm {
    width: 12px;
    height: 12px;
    border-radius: 100%;
    position: absolute;
    right: 0px;
    top: 5px;
    border: 2px solid #fff;
}
.hr-user .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hr-user-name {
    display: flex;
    align-items: center;
    margin-right: 12px;
}
.hr-user-name i{
    font-size: 12px;
    position: relative;
    top: 2px;
    margin-left: 10px;
}
.hr-user-name p{
    margin: 0px;
    font-size: 15px;
    font-weight: 600;
}
.hr-user {
    border-left: 1px solid #EBEBF2;
    padding-left: 22px;
    margin-left: 22px;
}
.hr-user .dropdown-toggle{
    padding: 0px;
}
.header-main {
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
    padding: 10px 15px;
    position: relative;
    z-index: 9;
    background: #fff;
}
.nav-sidebar-outer {
    position: absolute;
    background: #2D62ED;
    width: 260px;
    height: 100%;
    padding: 10px;
    padding-top: 85px;
}
.nav-sidebar-outer ul.navbar-nav li a {
    color: #fff;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 3px;
}
.nav-sidebar-outer ul.navbar-nav li a:hover{
    background: #5781F1;
}
.nav-sidebar-outer ul.navbar-nav li a img{
    margin-right: 10px;
}
.nav-sidebar-outer .dropdown-menu{
    background: transparent;
    position: static !important;
    transform: initial !important;
}
.nav-sidebar-outer .dropdown-menu::after{
    display: none;
}
.nav-sidebar-outer .dropdown-menu a{
    padding: 8px 30px !important;
}
.main {
    float: left;
    width: 100%;
    padding-left: 290px;
    padding-right: 30px;
    padding-top: 30px;
}
.fliter-btn i{
    font-size: 16px;
    position: relative;
    top: 2px;
    margin-right: 4px;
}
.fliter-btn {
    float: right;
}
.fliter-outer {
    position: absolute;
    right: 0px;
    top: 0px;
    padding-top: 71px;
    width: 460px;
    background: #fff;
    box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.2);
    height: 100%;
    transform: translate(480px);
    -webkit-transform: translate(480px);
    -moz-transform: translate(480px);
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    display: none;
}
.fliter-outer.open_fliter {
    transform: translate(0px);
    -webkit-transform: translate(0px);
    -moz-transform: translate(0px);
    display: block;
}
.main-outer.sidehide .nav-sidebar-outer ul li a span{
    display: none !important;
}
.main-outer.sidehide .nav-sidebar-outer{
    width: 75px;
}
.main-outer.sidehide .nav-sidebar-outer ul.navbar-nav li a{
    justify-content: center;
}
.main-outer.sidehide .nav-sidebar-outer ul.navbar-nav li a img{
    margin: 0px;
}
.main-outer.sidehide .nav-sidebar-outer ul.navbar-nav li.dropdown.show .dropdown-menu{
    position: absolute !important;
    background: #555B78 !important;
}
.main-outer.sidehide .nav-sidebar-outer ul.navbar-nav li.dropdown.show .dropdown-menu a span{
    display: block !important;
}
.main-outer.sidehide .nav-sidebar-outer ul.navbar-nav li.dropdown.show .dropdown-menu a img{
    margin-right: 10px;
}
.main-outer.sidehide .nav-sidebar-outer ul.navbar-nav li.dropdown.show .dropdown-menu a {
    justify-content: left;
}
.fliter-heading h4{
    margin: 0px; color: #fff;
}
.fliter-heading {
    padding: 30px;
    position: relative;
    padding-bottom: 22px;
}
.fliter-heading i {
    color: #fff;
    font-size: 14px;
    position: absolute;
    right: 30px;
    top: 36px;
    cursor: pointer;
}
.fliter-content .nav-tabs{
    padding: 0px 30px;
}
.fliter-content .nav-tabs li a{
    padding: 10px 20px;
    color: #F4F3F9;
    float: left;
    text-decoration: none;
    position: relative;
}
.fliter-content .nav-tabs li.active a{
    background: #384ECC;
}
.fliter-content .nav-tabs li a.active{
    background: #384ECC;
}
.fliter-content .nav-tabs li.active a::after {
    position: absolute;
    content: "";
    bottom: -8px;
    left: 0px;
    right: 0px;
    border-top: 8px solid #384ECC;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    width: 8px;
    margin: auto;
}
.fliter-content .nav-tabs li a.active::after {
    position: absolute;
    content: "";
    bottom: -8px;
    left: 0px;
    right: 0px;
    border-top: 8px solid #384ECC;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    width: 8px;
    margin: auto;
}
.fliter-content .tab-content{
    padding: 45px 30px;
}
.tool_kit_main{
    padding: 30px;
    float: left;
    width: 100%;
}
.table-outer {
    float: left;
    width: 100%;
}
.table-outer table{
    width: 100%;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.22);
}
.table-outer table tr th{
    background-color: #F3F3F3; font-size: 14px; font-weight: 600; color: #000000; padding: 11px 15px;
}
.table-outer table tr td{
    font-size: 13px; font-weight: 500; color: #000000; padding: 11px 15px;
}
.table-outer table tbody tr{
    border-bottom: 1px solid #E3EAEF;
}
.table-outer table tbody tr:last-child{
    border:none;
}
.icons-outer {
    float: left;
    width: 100%;
}
.icons-outer img{
    display: inline-block;
    margin: 15px 0px;
    margin-right: 30px;
}
.col-12 {
    width: 12%;
    float: left;
    box-sizing: border-box;
    padding: 0 15px;
}