/* Size */
/* Size End */
/* FontFace */
@font-face {
font-family: 'manrope';
font-weight: 200;
src: url("../fonts/Manrope-ExtraLight.ttf") format("truetype"), url("../fonts/Manrope-ExtraLight.ttf")
format("truetype");
}

@font-face {
font-family: 'manrope';
font-weight: 300;
src: url("../fonts/Manrope-Light.ttf") format("truetype"), url("../fonts/Manrope-Light.ttf") format("truetype");
}

@font-face {
font-family: 'manrope';
font-weight: 400;
src: url("../fonts/Manrope-Regular.ttf") format("truetype"), url("../fonts/Manrope-Regular.ttf") format("truetype");
}

@font-face {
font-family: 'manrope';
font-weight: 500;
src: url("../fonts/Manrope-Medium.ttf") format("truetype"), url("../fonts/Manrope-Medium.ttf") format("truetype");
}

@font-face {
font-family: 'manrope';
font-weight: 600;
src: url("../fonts/Manrope-SemiBold.ttf") format("truetype"), url("../fonts/Manrope-SemiBold.ttf") format("truetype");
}

@font-face {
font-family: 'manrope';
font-weight: 700;
src: url("../fonts/Manrope-Bold.ttf") format("truetype"), url("../fonts/Manrope-Bold.ttf") format("truetype");
}

@font-face {
font-family: 'manrope';
font-weight: 800;
src: url("../fonts/Manrope-ExtraBold.ttf") format("truetype"), url("../fonts/Manrope-ExtraBold.ttf") format("truetype");
}

/* FontFace End */
/* Size */
/* Size End */
/* Color */
:root {
--backgroundColor: #f5f7f8;
--primaryColor: #3f78e0;
--primaryHoverColor: #0a46d3;
--baseColor: #000;
--baseColorHover: #454545;
--secondColor: #0c9a6f;
--secondHoverColor: #087f5b;
--grayColor: #e1e6eb;
--grayColorHover: #d0d7dd;
--inpubg: #f1f3f4;
--lgrayColor: #f4f5f6;
--lightGrayColor: #eceff3;
--textColor: #6e6d7a;
--otherText: #858585;
}

/* Color End */
html {
margin: 0;
padding: 0;
height: 100%;
overflow-x: hidden;
}

body {
font-size: 14px;
font-family: "manrope";
color: var(--baseColor);
line-height: 1.4;
font-weight: 500;
font-style: normal;
position: relative;
height: 100%;
background-color: var(--lgrayColor);
background-size: cover;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

a {
color: var(--primaryColor);
font-size: 14px;
text-decoration: none;
}

a:hover {
color: var(--primaryHoverColor);
}

a, abbr, acronym, address, applet, b, big, blockquote, body, center, cite, code, dd, del, dfn, div, dl, dt, em,
fieldset, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s,
samp, small, span, strike, strong, sub, sup, tt, u, ul, var {
padding: 0;
margin: 0;
}

/* Other Style */
.clear-fix {
display: block;
clear: both;
}

.clear-fix::after {
content: '.';
display: block;
height: 0;
font-size: 0;
line-height: 0;
clear: both;
visibility: hidden;
}

*, *:after, *:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
}

*, *:focus, *:active {
-ms-box-sizing: border-box;
-khtml-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
outline: none;
box-sizing: border-box;
}

.dg {
display: -ms-grid;
display: grid;
}

.dgc {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.aic {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.fe {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}

.g2 {
-ms-grid-columns: calc(50% - 10px) calc(50% - 10px);
grid-template-columns: calc(50% - 10px) calc(50% - 10px);
}

.g3 {
-ms-grid-columns: (1fr)[3];
grid-template-columns: repeat(3, 1fr);
}

.g4 {
-ms-grid-columns: (1fr)[4];
grid-template-columns: repeat(4, 1fr);
}

.g5 {
-ms-grid-columns: (1fr)[5];
grid-template-columns: repeat(5, 1fr);
}

.g6 {
-ms-grid-columns: (1fr)[6];
grid-template-columns: repeat(6, 1fr);
}

.gc1 {
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-column: 1/3;
}

.gap1 {
gap: 10px;
}

.gap1_6 {
gap: 16px;
}

.gap2 {
gap: 20px;
}

.df {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

.dfc {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.dfs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}

.dcsb {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}

.dfcc {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}

.pr {
position: relative !important;
}

.pa {
position: absolute !important;
}

.pa_cc {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.__w10 {
width: 100%;
}

.__mt1 {
margin-top: 10px;
}

.__mt1_6 {
margin-top: 16px;
}

.ml_5 {
margin-left: 5px;
}

.ml1 {
margin-left: 10px;
}

.ml1_6 {
margin-left: 16px;
}

.ml2 {
margin-left: 20px;
}

.m23 {
margin-top: 20px;
}

.mt3 {
margin-top: 30px;
}

.text-danger{
color: #cb1010;
font-weight: 400;
}

/* Main Style */
.container {
margin: 0 auto;
width: 840px;
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.widget {
width: 360px;
}

.full_container {
margin: 0 auto;
max-width: 1280px;
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

::-moz-selection {
color: #fff;
background-color: var(--primaryColor);
}

::selection {
color: #fff;
background-color: var(--primaryColor);
}

/* Main Style End */
.__input,
.__select,
.__textarea,
.__input_text {
position: relative;
color: var(--baseColor);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 14px;
font-family: "manrope";
font-weight: 600;
line-height: 20px;
height: 40px;
width: 100%;
padding: 8px 10px;
background-color: var(--lgrayColor);
-webkit-transition: border-color 0.1s cubic-bezier(0.7, 0, 0.3, 1);
transition: border-color 0.1s cubic-bezier(0.7, 0, 0.3, 1);
border: none;
border-width: 1px;
border-style: solid;
border-color: var(--grayColorHover);
border-radius: 6px;
z-index: 0;
}

.__input:disabled, .__input:disabled:hover,
.__select:disabled,
.__select:disabled:hover,
.__textarea:disabled,
.__textarea:disabled:hover,
.__input_text:disabled,
.__input_text:disabled:hover {
color: var(--otherText);
border-color: var(--lightGrayColor);
}

.__input::-webkit-input-placeholder,
.__select::-webkit-input-placeholder,
.__textarea::-webkit-input-placeholder,
.__input_text::-webkit-input-placeholder {
color: #acb4c1;
font-weight: 500;
}

.__input:-ms-input-placeholder,
.__select:-ms-input-placeholder,
.__textarea:-ms-input-placeholder,
.__input_text:-ms-input-placeholder {
color: #acb4c1;
font-weight: 500;
}

.__input::-ms-input-placeholder,
.__select::-ms-input-placeholder,
.__textarea::-ms-input-placeholder,
.__input_text::-ms-input-placeholder {
color: #acb4c1;
font-weight: 500;
}

.__input::placeholder,
.__select::placeholder,
.__textarea::placeholder,
.__input_text::placeholder {
color: #acb4c1;
font-weight: 500;
}

.__input:not(:placeholder-shown),
.__select:not(:placeholder-shown),
.__textarea:not(:placeholder-shown) {
background-color: #fff;
border-color: #b1b7bf;
}

.__input:disabled:not(:placeholder-shown),
.__select:disabled:not(:placeholder-shown),
.__textarea:disabled:not(:placeholder-shown) {
color: #4b516b;
border-color: var(--lightGrayColor);
}

.__input_text {
border-color: transparent !important;
}

select, .__select {
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 32px;
background: var(--lgrayColor) url("../images/icon-drop-arrow.svg") no-repeat center center;
background-position: right 12px center;
background-size: 10px 10px;
outline: 0;
}

.__textarea {
height: auto;
min-height: 6rem;
max-height: 12rem;
resize: vertical;
}

textarea::-webkit-input-placeholder {
color: #acb4c1;
}

textarea:-ms-input-placeholder {
color: #acb4c1;
}

textarea::-ms-input-placeholder {
color: #acb4c1;
}

textarea::placeholder {
color: #acb4c1;
}

.__input_m {
font-size: 13px;
height: 40px;
padding: 0 12px;
}

.__input::-webkit-input-placeholder {
color: #acb4c1;
font-size: 14px;
}

.__input:-ms-input-placeholder {
color: #acb4c1;
font-size: 14px;
}

.__input::-ms-input-placeholder {
color: #acb4c1;
font-size: 14px;
}

.__input::placeholder {
color: #acb4c1;
font-size: 14px;
}

.__input:hover,
.__select:hover,
.__textarea:hover,
.__input_rest:hover {
border-color: #7f8da5;
z-index: 2;
}

.__input:focus,
.__select:focus,
.__textarea:focus,
.__input_rest:focus {
background-color: #fff;
-webkit-box-shadow: 0 0 0 4px rgba(0, 122, 254, 0.15);
box-shadow: 0 0 0 4px rgba(0, 122, 254, 0.15);
border-color: var(--primaryColor);
z-index: 3;
}

.__input_s, .text_input, .text_small_in, .__select_s {
height: 28px;
max-width: 200px;
padding: 4px 8px;
border-radius: 4px;
}

.__input_s, .text_input, .text_small_in {
width: 75px;
}

.total {
background-color: rgba(12, 83, 251, 0.1) !important;
}

.text_input, .text_small_in {
line-height: 20px;
padding: 4px 10px;
}

.text_input {
width: 140px;
cursor: pointer;
}

.text_input:hover {
background-color: var(--lgrayColor);
}

.hide_input {
display: none;
width: 140px;
}

.hide_input button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 28px;
}

.hide_input .cancel::after, .hide_input .save::after {
position: absolute;
content: '';
height: 14px;
width: 14px;
background: url("../images/icon-cancel.png") no-repeat center center;
background-size: 100%;
}

.hide_input .save::after {
background: url("../images/icon-save.png") no-repeat center center;
background-size: 100%;
}

.__in_error {
border-color: #d0021b;
}

.notice {
padding: 10px 14px;
margin: 16px 0;
background-color: var(--grayColor);
border-radius: 8px;
}

.notice.green {
color: #0f5f55;
background-color: #bef8ed;
}

.form_item {
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-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}

.form_item_flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.form_item_flex ~ .form_item_flex {
margin-left: 20px;
}

.form_item_flex .__label {
margin: 0;
margin-right: 10px;
white-space: nowrap;
}

.__form_item_line {
display: -ms-grid;
display: grid;
margin: 24px 0;
height: 1px;
width: 100%;
background-color: rgba(0, 16, 34, 0.1);
}

.__label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
color: var(--textColor);
font-size: 14px;
font-weight: bold;
line-height: 16px;
min-height: 16px;
margin-bottom: 6px;
}

.label, .label-text {
color: var(--baseColor);
font-size: 14px;
font-weight: 500;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: left;
padding: 0 !important;
width: 100%;
overflow: hidden;
}

.__text_desc {
margin-top: 8px;
}

.__text_desc p {
color: var(--primaryColor);
font-size: 12px;
font-weight: 600;
line-height: 16px;
color: #495460;
}

.__text_desc p ~ p {
margin-top: 8px;
}

.__text_desc .__error {
color: #d0021b;
font-weight: 500;
}

.input_col {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 48px;
grid-template-columns: 1fr 48px;
gap: 10px;
}

.input_col ~ .input_col {
margin-top: 10px;
}

.add_rem {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 32px;
width: 32px;
background-color: var(--lightGrayColor);
border-radius: 8px;
cursor: pointer;
}

.add_rem .add {
position: relative;
height: 2px;
width: 16px;
background-color: #7f8da5;
}

.add_rem .add::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
height: 16px;
width: 2px;
background-color: #7f8da5;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.add_rem .remove {
height: 2px;
width: 16px;
background-color: #7f8da5;
}

.g2to1 {
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-column: 1/3;
}

.g3to1 {
-ms-grid-column: 1;
-ms-grid-column-span: 3;
grid-column: 1/4;
}

/* Button Style */
.__btn {
position: relative;
color: var(--baseColor);
font-size: 14px;
font-family: var(--primaryColor);
font-weight: 600;
line-height: 22px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 40px;
padding: 8px 16px;
background-color: transparent;
-webkit-transition: background-color 0.2s cubic-bezier(0.7, 0, 0.3, 1);
transition: background-color 0.2s cubic-bezier(0.7, 0, 0.3, 1);
border-width: 1px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.05);
border-radius: 6px;
white-space: nowrap;
cursor: pointer;
z-index: 2;
}

.__btn_l {
height: 44px;
border-radius: 8px;
}

.__btn_m {
height: 38px;
border-radius: 8px;
}

.__btn_s {
text-decoration: none !important;
font-size: 13px;
height: 28px;
padding: 0 8px;
border-radius: 4px;
}

.__btn_htrans {
-webkit-transition: background-color 0.2s cubic-bezier(0.7, 0, 0.3, 1);
transition: background-color 0.2s cubic-bezier(0.7, 0, 0.3, 1);
}

.__default {
background-color: var(--lgrayColor) !important;
border: none;
}

.__default:hover {
background-color: var(--lightGrayColor) !important;
}

.__default .__deactivated {
opacity: .6;
}

.__primary {
color: #fff;
background-color: var(--primaryColor);
}

.__primary:hover {
color: #fff;
background-color: var(--primaryHoverColor);
}

.green_btn {
color: #fff;
background-color: var(--secondColor);
}

.green_btn:hover {
color: #fff;
background-color: var(--secondHoverColor);
}

.__back_btn {
color: #fff;
background-color: var(--otherText);
}

.__back_btn:hover {
color: #fff;
background-color: var(--textColor);
}

.__second_btn {
color: #fff;
}

/* Button Style End */
/* Other */
.checkbox-label:not(.disabled).\:focus .checkbox ~ .checkmark,
.checkbox-label:not(.disabled):focus .checkbox ~ .checkmark {
opacity: 1;
z-index: 10;
outline: 2px dotted var(--baseColor);
outline-offset: 2px;
}

.__txtu {
text-transform: uppercase;
}

.img_block {
position: relative;
}

.img_block img {
height: 100%;
width: 100%;
-o-object-position: center center;
object-position: center center;
-o-object-fit: cover;
object-fit: cover;
}

.input_group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.input_group .__input:first-child, .input_group .__select:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.input_group .__input:last-child, .input_group .__select:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

.input_group .__input ~ .__input, .input_group .__input ~ .__select, .input_group .__select ~ .__input, .input_group
.__select ~ .__select {
margin-left: -1px;
}

.input_group .__input:hover, .input_group .__select:hover {
border-color: #7f8da5;
}

.input_group .__input:focus, .input_group .__select:focus {
border-color: var(--primaryColor);
}

/* Other End */
/* Semantic Style */
.ui.selection.active.dropdown, .ui.selection.active.dropdown .menu {
    border-color: var(--grayColorHover) !important;
  }
  
  .ui.multiple.search.dropdown > input.search,
  .ui.multiple.search.dropdown > .text {
    margin: 2px !important;
    height: 30px;
  }
  
  .ui.multiple.search.dropdown > .text {
    line-height: 26px !important;
    top: 2px !important;
    left: 2px !important;
    padding: 2px 10px !important;
    background-color: var(--lightGrayColor);
    border-radius: 4px;
  }
  
  .ui.selection.dropdown > .dropdown.icon {
    top: 2px !important;
    right: 0 !important;
    margin: 0 !important;
  }
  
  .check_selected,
  .ui.selection.dropdown {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    min-height: 40px !important;
    padding: 2px !important;
    background-color: #fff !important;
    border-bottom: 1px solid var(--grayColorHover);
    border-width: 1px;
    border-style: solid;
    border-color: var(--grayColorHover);
    border-radius: 6px !important;
  }
  
  .check_selected:hover,
  .ui.selection.dropdown:hover {
    border-color: var(--grayColorHover) !important;
  }
  
  .check_selected > a, .check_selected .active,
  .ui.selection.dropdown > a,
  .ui.selection.dropdown .active {
    color: var(--baseColor);
    font-weight: 400 !important;
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    /* height: 30px; */
    line-height: 28px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 2px !important;
    padding: 2px 6px !important;
    background-color: #007afe15;
    border: 1px solid var(--primaryColor);
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    border-radius: 4px !important;
    cursor: pointer;
  }
  
  .check_selected > a:hover, .check_selected .active:hover,
  .ui.selection.dropdown > a:hover,
  .ui.selection.dropdown .active:hover {
    background-color: #fff;
    -webkit-box-shadow: 0 0 0 3px rgba(0, 122, 254, 0.15) !important;
            box-shadow: 0 0 0 3px rgba(0, 122, 254, 0.15) !important;
    border: 1px solid var(--primaryColor);
  }
  
  .check_selected > a:hover span, .check_selected .active:hover span,
  .ui.selection.dropdown > a:hover span,
  .ui.selection.dropdown .active:hover span {
    color: var(--secondColor);
    background-color: var(--lightGrayColor);
  }
  
  .check_selected > a:hover span::before, .check_selected > a:hover span::after, .check_selected .active:hover span::before, .check_selected .active:hover span::after,
  .ui.selection.dropdown > a:hover span::before,
  .ui.selection.dropdown > a:hover span::after,
  .ui.selection.dropdown .active:hover span::before,
  .ui.selection.dropdown .active:hover span::after {
    position: absolute;
    content: '';
    height: 1px;
    width: 10px;
    background-color: var(--secondColor);
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  
  .check_selected > a:hover span::after, .check_selected .active:hover span::after,
  .ui.selection.dropdown > a:hover span::after,
  .ui.selection.dropdown .active:hover span::after {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  
  .check_selected > a span, .check_selected .active span,
  .ui.selection.dropdown > a span,
  .ui.selection.dropdown .active span {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 18px;
    width: 18px;
    border-radius: 50%;
  }
  
  .check_selected > a span::before, .check_selected .active span::before,
  .ui.selection.dropdown > a span::before,
  .ui.selection.dropdown .active span::before {
    position: absolute;
    content: '';
    top: 50%;
    height: 14px;
    width: 14px;
    background: url("../images/selected_icon.svg") no-repeat center center;
    background-size: 100%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  
  .ui.label > .close.icon, .ui.label > .delete.icon {
    opacity: 1 !important;
  }
  
  .ui.dropdown .filtered.item {
    display: none !important;
  }
  
/* Semantic Style End */
/* Header Style */
.header_wrap .header_top .header_top_main {
display: -ms-grid;
display: grid;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 80px;
}

.header_wrap .header_top .logo span {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100px;
width: 400px;
mix-blend-mode: multiply;
background: url("../images/logo.jpeg") no-repeat center center;
background-size: contain;
}

.header_wrap .head_right .head_item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

.header_wrap .head_right .head_item ~ .head_item {
margin-left: 30px;
}

.header_wrap .head_right .head_item p {
color: var(--textColor);
font-size: 14px;
padding: 4px 10px;
background-color: var(--lgrayColor);
border-radius: 20px;
}

.header_wrap .head_right .head_item p ~ p {
margin-left: 20px;
}

.header_wrap .head_right .head_item p b {
color: var(--otherText);
font-weight: 400;
margin-right: 4px;
}

.header_wrap .head_right .head_prof {
font-size: 14px;
font-weight: 500;
cursor: pointer;
}

.header_wrap .head_right .head_prof div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.header_wrap .head_right .head_prof span {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
height: 40px;
width: 40px;
margin-right: 10px;
background-color: var(--inpubg);
border-radius: 50%;
overflow: hidden;
}

.header_wrap .header_menu ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 3px;
background-color: #fff;
border: 1px solid var(--lightGrayColor);
border-radius: 8px;
}

.header_wrap .header_menu ul li {
position: relative;
padding: 3px 0;
}

.header_wrap .header_menu ul li a {
color: var(--textColor);
font-size: 14px;
font-weight: 600;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 10px 12px !important;
border-radius: 6px;
}

.header_wrap .header_menu ul li a:hover {
color: var(--baseColor);
background-color: var(--lgrayColor);
}

.header_wrap .header_menu ul li a.active {
color: #fff;
background-color: var(--primaryColor);
}

.header_wrap .header_menu ul .submenu:hover ul {
top: 100%;
left: 0;
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}

.header_wrap .header_menu ul .submenu > a {
padding-right: 30px !important;
}

.header_wrap .header_menu ul .submenu > a::after {
position: absolute;
content: '';
top: 50%;
right: 12px;
height: 10px;
width: 10px;
background: var(--otherText) !important;
-webkit-mask: url("../images/icon-right-arrow.svg") no-repeat center center;
background-size: contain;
-webkit-transform: translateY(-50%) rotate(90deg);
transform: translateY(-50%) rotate(90deg);
}

.header_wrap .header_menu ul .submenu .active::after {
background: #fff !important;
-webkit-mask: url("../images/icon-right-arrow.svg") no-repeat center center;
}

.header_wrap .header_menu ul .submenu ul {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: absolute;
content: '';
top: 95%;
left: -10000px;
width: 240px;
padding: 5px !important;
background-color: #fff;
border-radius: 8px;
-webkit-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
transition: opacity .3s ease-in-out, top .35s ease-in-out, transform .2s ease-in, -webkit-transform .2s ease-in;
-webkit-transform: translateY(10px);
transform: translateY(10px);
z-index: 99;
opacity: 0;
}

.header_wrap .header_menu ul .submenu ul li {
width: 100%;
padding: 0 !important;
}

.header_wrap .header_menu ul .submenu ul li a {
padding: 7px 12px !important;
}

.header_wrap .header_menu ul .submenu ul li a:hover {
color: var(--baseColor);
background-color: var(--lightGrayColor);
}

.header_wrap .header_menu ul .submenu ul li a.active {
color: #fff;
background-color: #7f8da5 !important;
}

/* Header Style End */
/* Main Style */
.main {
padding-top: 20px;
margin: 0;
}

.title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 24px;
font-weight: 800;
margin-bottom: 20px;
}

.title a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
height: 32px;
width: 32px;
margin-right: 10px;
background-color: #fff;
border: 1px solid var(--lightGrayColor);
border-radius: 8px;
cursor: pointer;
}

.title a::before {
position: absolute;
content: '';
height: 12px;
width: 12px;
background: url("../images/icon-drop-arrow.svg") no-repeat center center;
background-size: 100%;
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

.title a:hover {
border-color: var(--grayColor);
}

.title a:hover:before {
-webkit-transform: translateX(-3px) rotate(90deg);
transform: translateX(-3px) rotate(90deg);
}

.sub_title {
display: block;
position: relative;
font-size: 18px;
height: 40px;
margin-bottom: 20px;
border-bottom: 1px solid #e0e6ec;
}

.sub_title::after {
content: '';
left: 0;
bottom: -8px;
height: 2px;
width: 10%;
background-color: #f30305;
border-radius: 2px;
}

.box_item {
padding: 20px;
background-color: #fff;
border-radius: 12px;
border: 1px solid var(--lightGrayColor);
}

.box_line {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
margin: 20px -20px;
height: 1px;
width: calc(100% + 40px);
background-color: var(--grayColor);
}

.filter_item {
padding: 20px;
background-color: #495460;
border-radius: 12px;
}

.filter_item .sub_title {
color: #fff;
}

.filter_item .sub_title::after {
background-color: rgba(255, 255, 255, 0.6);
}

.filter_item .__label {
color: #fff;
}

.filter_item .__input, .filter_item .__select {
border: none;
}

.table_wrap {
position: relative;
border-radius: 6px;
border: 1px solid var(--grayColor);
overflow-x: auto;
}

.table_wrap::-webkit-scrollbar {
height: 4px;
background-color: var(--lgrayColor);
border-radius: 4px;
}

.table_wrap::-webkit-scrollbar-thumb {
background-color: var(--grayColorHover);
border-radius: 4px;
}

.table_wrap::-webkit-scrollbar-thumb:hover {
background-color: #7f8da5;
}

.permission img {
height: 14px;
width: 14px;
}

.n_table {
caption-side: bottom;
border-collapse: collapse;
border-spacing: 0 2px;
width: 100%;
}

.n_table th, .n_table td {
font-size: 13px;
text-align: left;
line-height: 1.2;
padding: 8px;
border-left: 1px solid var(--grayColor);
}

.n_table th:first-child, .n_table td:first-child {
border-left: none !important;
}

.n_table td {
border-top: 1px solid var(--grayColorHover);
}

.n_table thead {
background-color: var(--grayColor);
}

.n_table thead tr ~ tr th {
border-top: 1px solid var(--grayColorHover);
text-align: center;
}

.n_table thead th {
color: #5c677a !important;
border-left: 1px solid var(--grayColorHover);
/* vertical-align: bottom; */
text-align: center;
}

.n_table tbody tr:last-child {
border-bottom-left-radius: 8px;
}

.n_table tbody tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}

.n_table tbody tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}

.n_table tbody td:first-child a, .n_table tbody td:nth-child(2) a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 3px 8px;
min-width: 24px;
background-color: rgba(12, 83, 251, 0.1);
border-radius: 20px;
}

.table_action a ~ a {
margin-left: 10px;
}

.table_action a:hover span svg [fill]:not(.permanent):not(g) {
fill: var(--primaryColor);
}

.table_action button:hover i {
color: red;
}

.table_action span {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 8px;
background-color: var(--lgrayColor);
border-radius: 6px;
}

.table_action span svg {
height: 14px;
width: 14px;
}

.table_action span svg [fill]:not(.permanent):not(g) {
fill: #b1b7bf;
}

.table_input {
caption-side: bottom;
border-collapse: collapse;
border-spacing: 0 2px;
width: 100%;
}

.table_input th, .table_input td {
line-height: 1.2;
padding: 4px;
}

.table_input th:first-child, .table_input td:first-child {
padding-left: 10px;
border-left: none !important;
}

.table_input thead {
background-color: var(--grayColor);
}

.table_input thead th {
font-size: 13px;
text-align: left;
color: #5c677a !important;
padding: 8px 4px;
border-left: 1px solid var(--grayColorHover);
vertical-align: bottom;
}

.n_pagination {
display: table;
margin: 10px auto 0;
}

.n_pagination ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.n_pagination ul li ~ li {
margin-left: 4px;
}

.n_pagination ul li a, .n_pagination ul li p, .n_pagination ul li span {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
line-height: 1;
padding: 8px 12px;
border-radius: 4px;
}

.n_pagination ul li a.active, .n_pagination ul li p.active, .n_pagination ul li span.active {
color: #fff;
background-color: var(--primaryColor);
}

.n_pagination ul li span {
color: #b1b7bf;
}

.n_pagination ul li a {
color: var(--baseColorHover);
}

.n_pagination ul li a:hover {
background-color: var(--lgrayColor);
}

.form_check {
border-width: 1px;
border-style: solid;
border-color: var(--grayColorHover);
border-radius: 8px;
}

.form_check .check_list {
padding: 6px;
}

.form_check .check_list ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.form_check .check_list ul li {
position: relative;
padding: 4px 8px;
margin: 4px;
white-space: nowrap;
border: 1px solid var(--grayColorHover);
-webkit-transition: all .15s ease-in;
transition: all .15s ease-in;
border-radius: 6px;
cursor: pointer;
}

.form_check .check_list ul li.active {
padding-right: 24px;
background-color: #007afe15;
border-color: var(--secondColor);
}

.form_check .check_list ul li.active::before {
position: absolute;
content: '';
top: 50%;
right: 6px;
height: 14px;
width: 14px;
background: url("../images/selected_icon.svg") no-repeat center center;
background-size: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

.form_check .check_list ul li:hover {
background-color: #fff;
-webkit-box-shadow: 0 0 0 3px rgba(0, 122, 254, 0.15);
box-shadow: 0 0 0 3px rgba(0, 122, 254, 0.15);
border-color: var(--secondColor);
}

.f_text {
font-size: 12px;
text-align: center;
margin-bottom: 20px;
}

/* Calendar Style */
.calendar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}

.calendar_weekdays div {
display: inline-block;
vertical-align: middle;
}

.calendar_content,
.calendar_weekdays,
.calendar_header {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
overflow: hidden;
z-index: 10;
}

.calendar_weekdays, .calendar_content {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[8];
grid-template-columns: repeat(8, 1fr);
}

.calendar_weekdays div, .calendar_content div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 38px;
overflow: hidden;
text-align: center;
background-color: #fff;
color: #787878;
font-weight: 500;
border-radius: 8px;
}

.calendar_weekdays div a, .calendar_content div a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
width: 100%;
}

.calendar_weekdays div a:hover, .calendar_content div a:hover {
background-color: var(--lgrayColor);
}

.calendar_weekdays .incomplete, .calendar_content .incomplete {
color: red;
}

.calendar_weekdays .week, .calendar_content .week {
color: #b1b7bf;
}

.calendar_weekdays .weekend, .calendar_content .weekend {
color: var(--baseColor);
}

.calendar_header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
margin-bottom: 16px;
background-color: transparent !important;
}

.calendar_header h3 {
font-size: 20px;
margin: 0 auto;
}

.calendar_event {
margin-top: 6px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.calendar_event .event_item {
color: var(--textColor);
line-height: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
padding: 4px 0;
margin-right: 24px;
white-space: nowrap;
}

.calendar_event .event_item span {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 10px;
width: 10px;
margin-right: 10px;
border-radius: 50%;
}

.calendar_event .event_item span.red {
background-color: red;
}

.calendar_event .event_item span.orange {
background-color: orange;
}

.calendar_event .event_item span.blue {
background-color: var(--primaryColor);
}

.calendar_event .event_item span.gray {
background-color: #b1b7bf;
}

.calendar_event .event_item span.black {
background-color: var(--baseColor);
}

.content_list {
max-height: 380px;
overflow-y: auto;
}

.content_list::-webkit-scrollbar {
width: 4px;
background-color: var(--lgrayColor);
border-radius: 4px;
}

.content_list::-webkit-scrollbar-thumb {
background-color: var(--grayColorHover);
border-radius: 4px;
}

.content_list::-webkit-scrollbar-thumb:hover {
background-color: #7f8da5;
}

.content_list .content_item,
.content_list .task_item {
position: relative;
padding: 12px;
-webkit-transition: all .1s;
transition: all .1s;
border-radius: 10px;
cursor: pointer;
}

.content_list .content_item:hover {
background-color: #f7f9fa;
}

.content_list .content_item:hover .desc .desc_img {
background-color: #fff0d9;
}

.content_list .content_item:hover .desc .desc_img span {
background-color: #a48447 !important;
}

.content_list .content_item ~ .content_item::before {
position: absolute;
content: '';
top: 0;
left: 60px;
width: calc(100% - 72px);
border-top: 1px solid var(--lightGrayColor);
}

.content_list .content_item .desc .desc_img {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 48px;
width: 48px;
margin-right: 12px;
background-color: var(--backgroundColor);
border-radius: 50%;
overflow: hidden;
}

.content_list .content_item .desc .desc_img span {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 24px;
width: 24px;
background-color: #7f8da5 !important;
-webkit-mask-image: url("../images/icon-announcement.png");
-webkit-mask-size: contain;
}

.content_list h4 {
font-size: 15px;
}

.content_list p {
color: var(--textColor);
}

.content_list em {
color: #b1b7bf;
font-style: normal;
}

.content_list .task_item:hover {
background-color: #f7f9fa;
}

.content_list .task_item .dfc {
width: 75%;
}

.content_list .task_item .dfc b {
width: 8%;
}

.content_list .task_item .dfc h4 {
width: 70%;
}

.content_list .task_item .content_status {
font-size: 13px;
padding: 4px 10px;
background-color: var(--grayColor);
border-radius: 8px;
}

.content_list .task_item .success {
color: #fff;
background-color: var(--secondColor);
}

.content_list .task_item .waiting {
color: #fff;
background-color: var(--primaryColor);
}

.content_list .task_item .warning {
color: #fff;
background-color: orange;
}

.content_list .task_item .danger {
color: #fff;
background-color: red;
}

/* Main Style End */
/* Footer Style */
.footer_wrap {
position: relative;
padding: 20px 0;
}

.footer_wrap p {
color: var(--textColor);
font-size: 13px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 10px;
background-color: #fff;
border-radius: 12px;
}

/* Tusliin radio button */
.wrapper{
display: inline-flex;
background: #fff;
height: 60px;
width: 340px;
align-items: center;
justify-content: space-evenly;
border-radius: 5px;
padding: 10px;
box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
}
.wrapper .option{
background: #fff;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
margin: 0 10px;
border-radius: 5px;
cursor: pointer;
padding: 0 10px;
border: 2px solid lightgrey;
transition: all 0.3s ease;
}
.wrapper .option .dot{
height: 20px;
width: 20px;
background: #d9d9d9;
border-radius: 50%;
position: relative;
}
.wrapper .option .dot::before{
position: absolute;
content: "";
top: 4px;
left: 4px;
width: 12px;
height: 12px;
background: #0069d9;
border-radius: 50%;
opacity: 0;
transform: scale(1.5);
transition: all 0.3s ease;
}
input[type="radio"]{
display: none;
}
#option-1:checked:checked ~ .option-1,
#option-2:checked:checked ~ .option-2{
border-color: #0069d9;
background: #0069d9;
}
#option-1:checked:checked ~ .option-1 .dot,
#option-2:checked:checked ~ .option-2 .dot{
background: #fff;
}
#option-1:checked:checked ~ .option-1 .dot::before,
#option-2:checked:checked ~ .option-2 .dot::before{
opacity: 1;
transform: scale(1);
}
.wrapper .option span{
font-size: 14px;
color: #808080;
}
#option-1:checked:checked ~ .option-1 span,
#option-2:checked:checked ~ .option-2 span{
color: #fff;
}

/* Footer Style End */
/* Responsive Style */
/* Responsive Style End */
/*# sourceMappingURL=style.css.map */