@import 'job-vars.css';

:root{
    --border: #d5e3ec;
    --background: #f7fafb;
    --color: #121c42;
    --space: 8px;
    --contrast: #4869ee;
    --contrast25: #4869ee3f;
    --background-light: #fff;
    --shadow: #d8e1e8;
    --input-background: #f7fafb;
    --card-footer: #f7fafd;
    --card-padding: 16px;
    --color-light: #121c4299;
}

input:focus+label::before,input:focus,.ts-input.focus,input:focus+label .switch,select:focus,textarea:focus, .ts-input:hover{
    border-color:var(--contrast);
    box-shadow:0 0 0 3px var(--contrast25);
    background: transparent;
    transition: background-color .5s;
    border-radius: 4px;
}

.search input, .search select, .search .btn{
    outline: none;
    will-change: border-color;

    height: 40px;
    width: 100%;
}

.search input, .search select{
    padding: 0 10px;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(255, 255, 255);
}

@media(max-width:768px){
    .os-form input[type='text'], .os-form input[type='email'], .os-form input[type='password'], .os-form input[type='url'], .os-form input[type='date'], .os-form input[type='search'], .os-form input[type='tel'], .os-form input[type='number'], .os-form select, .os-form textarea, .os-input {
        height: 50px!important;
    }
}

.search input, .search select, .search .shadow{
    transition: all 125ms ease-out 0s;
    box-shadow: rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 20%) 0px 2px 1px -1px, rgb(0 0 0 / 12%) 0px 1px 1px 0px;
    border-radius: 2px;

    font-size: 16px;
}


table tr[data-enabled] td:first-child,
table tr[data-radio] td:first-child,
table tr[data-checked] td:first-child,
table tr[data-status] td:first-child,
table tr th.data-enabled-header{
    position: relative;
    padding-left: calc(var(--20px) * 3);
}

table tr[data-radio] input[type='radio'],
table tr[data-checked] input[type='checkbox']{display: none;}

table tr[data-enabled] td:first-child::after,
table tr[data-radio] td:first-child::after,
table tr[data-checked] td:first-child::after,
table tr[data-status] td:first-child::after{
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: calc(var(--20px) * 2);
    display: inline-block;
    border-left: 4px solid var(--gray-color);
    background-color: #eee;
    background-image: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 0px;
    transition: all .3s;
}

table tr[data-enabled="1"] td:first-child::after,
table tr[data-radio="1"] td:first-child::after,
table tr[data-checked="1"] td:first-child::after{
    border-left-color: var(--success-color-alt);
    background-color: var(--enabled-background);
    background-image: var(--enabled-icon);
    background-size: calc(var(--20px) * 1.5);
}

table tr[data-enabled="0"] td:first-child::after,
table tr[data-radio="0"] td:first-child::after,
table tr[data-checked="0"] td:first-child::after{
    border-left-color: var(--error-color-alt);
    background-color: var(--not-enabled-background);
    background-image: var(--not-enabled-icon);
    background-size: 24px;
}

table tr[data-checked] td:first-child::after{
    background-image: var(--not-selected-icon);
    background-size: 24px;
}
table tr[data-checked="1"] td:first-child::after{background-image: var(--selected-icon);}

table tr[data-radio] td:first-child::after{
    background-image: var(--not-checked-icon);
    background-size: 24px;
    border-left-color: #ccc;
    background-color: #f2f2f2;
}
table tr[data-radio="1"] td:first-child::after{background-image: var(--checked-icon);}

table tr[data-status] td:first-child::after{
}

table tr[data-status="rejected"] td:first-child::after{
    border-left-color: var(--rejected-color);
    background-color: var(--rejected-background);
    background-image: var(--blocked-icon);
    background-size: 20px;
}

table tr[data-status="registered"] td:first-child::after{
    border-left-color: var(--registered-color);
    background-color: var(--registered-background);
    background-image: var(--reviewed-icon);
    background-size: 24px;
}

table tr[data-status="received"] td:first-child::after{
    border-left-color: var(--received-color);
    background-color: var(--received-background);
    background-image: var(--inprogress-icon);
    background-size: 24px;
}

table tr[data-status="settled"] td:first-child::after{
    border-left-color: var(--settled-color);
    background-color: var(--settled-background);
    background-image: var(--completed-icon);
    background-size: 24px;
}

table tr[data-status="accepted"] td:first-child::after{
    border-left-color: var(--accepted-color);
    background-color: var(--accepted-background);
    background-image: var(--completed-icon);
    background-size: 24px;
}

table tr[data-status="diploma"] td:first-child::after{
    border-left-color: var(--diploma-color);
    background-color: var(--diploma-background);
    background-image: var(--diploma-icon);
    background-size: 24px;
}

table tr[data-status="training"] td:first-child::after{
    border-left-color: var(--training-color);
    background-color: var(--training-background);
    background-image: var(--training-icon);
    background-size: 24px;
}

table tr[data-status="experience"] td:first-child::after{
    border-left-color: var(--experience-color);
    background-color: var(--experience-background);
    background-image: var(--experience-icon);
    background-size: 24px;
}

.settled{
    color: var(--settled-color);
}

.rejected{
    color: var(--rejected-color);
}

.registered{
    color: var(--registered-color);
}

.received{
    color: var(--received-color);
}

.accepted{
    color: var(--accepted-color);
}

.training{
    color: var(--training-color);
}

.diploma{
    color: var(--diploma-color);
}

.doc-table{border-spacing: 0 var(--15px)}