/*@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap');*/



@import url('/cms_css/fonts/roboto/font.css');



@-webkit-keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

     }

}



@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}



@-webkit-keyframes fadeOut {

    from {

        opacity: 1;

    }

    to {

        opacity: 0;

     }

}



@keyframes fadeOut {

    from {

        opacity: 1;

    }

    to {

        opacity: 0;

    }

}



.vertfix { display: inline-block; vertical-align: middle; height: 100%; width: 0; }

.debug { background: RGBa(0,0,0,0.15); outline: 1px dotted #FF0000; }





.mb05 { margin-bottom: 0.5rem; }

.mb1 { margin-bottom: 1rem; }





html {}



body {

    margin: 0;

    font-family: 'Roboto', sans-serif;

    font-weight: 300;

    font-size: 16px;

    line-height: 1.25;

    background-color: #f4f6f9;

}



a { text-decoration: none; color: #0760c0; }

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





.tmpl-wrapper {

    position: relative;

}





/* Sidebar */



.tmpl-sidebar-wrapper {

    position: fixed;

    width: 260px;

    left: 0;

    top: 0;

    bottom: 0;

    float: none;

    min-height: 100%;

    height: 100vh;

    overflow-y: hidden;

    background-color: #343a40;

    box-shadow: 

        0 14px 28px rgba(0,0,0,.25),

        0 10px 10px rgba(0,0,0,.22) !important;

    transition:

        margin-left .3s ease-in-out,

        width .3s ease-in-out;

    z-index: 100;

}

body.sidebar-collapse:not(.sidebar-open):not(.sidebar-closed) .tmpl-sidebar-wrapper {

    overflow-x: hidden;

    width: 76px;

}

@media (max-width: 767.98px) {

    .tmpl-sidebar-wrapper {

        box-shadow: none !important;

    }

    body.sidebar-collapse .tmpl-sidebar-wrapper,

    body.sidebar-closed .tmpl-sidebar-wrapper {

        margin-left: -260px;

    }

        

    body.sidebar-open .tmpl-sidebar-wrapper {

        margin-left: 0;

    }

}



.tmpl-logo {

    display: flex;

    align-items: center;

    height: 64px;

    padding: 0 20px;

    border-bottom: 1px solid #4b545c;

}

.tmpl-logo .logo-wrapper {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    border-radius: 0.25rem;

    background-color: #fff;

    margin-right: 12px;

    flex-shrink: 0;

}

.tmpl-logo .logo-wrapper img {

    width: 80%;

    height: 80%;

    

}



.tmpl-logo > .tmpl-brand {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    color: #d4d8de !important;

    /*font-weight: 400;*/

    font-size: 1.25rem;

    white-space: nowrap;

    flex-shrink: 0;

    transition:

        margin-left .3s linear,

        opacity .3s ease,

        visibility .3s ease;

}

.tmpl-logo > .tmpl-brand > .small {

    color: rgba(255, 255, 255, 0.8);

    line-height: 1;

    font-size: 0.6rem;

    color: #fff;

    align-self: flex-end;

}

body.sidebar-collapse:not(.sidebar-open) .tmpl-logo > .tmpl-brand {

    margin-left: -10px;

    animation-name: fadeOut;

        -webkit-animation-name: fadeOut;

    animation-duration: .3s;

        -webkit-animation-duration: .3s;

    animation-fill-mode: both;

        -webkit-animation-fill-mode: both;

    visibility: hidden;

}

    



.tmpl-sidebar {

    padding: 16px 0;

}



.scrollbar-macosx {

    height: calc(100vh - 64px - 1px - 32px);

}

.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_outer {

    top: 0;

}

.scrollbar-macosx > .scroll-element .scroll-bar {

    background-color: #d4d8de;

}

.scrollbar-macosx > .scroll-element.scroll-y .scroll-bar {

    left: -6px;

    width: 4px;

}



.scrollbar-arrow {

    position: absolute;

    color: #d4d8de;

    width: 100%;

    text-align: center;

    display: none;

}



/* Leftmenu */



.tmpl-leftmenu {

    padding: 0 8px;

}



.tmpl-leftmenu li.nav-item {

    margin-bottom: 4px;

    overflow: hidden;

}

.tmpl-leftmenu li.nav-item > .nav-link {

    display: flex;

    align-items: center;

    padding: 0 1rem;

    color: #d4d8de;

    height: 2.8rem;

    font-weight: 400;

    line-height: 1.1;

    overflow: hidden;

    /*white-space: nowrap;*/

}

.tmpl-leftmenu li.nav-item > .nav-link:hover {

    background-color: RGBa(255,255,255,0.1);

    color: #fff;

}

.tmpl-leftmenu li.nav-item > .nav-link.active {

    background-color: #217de1;

    color: #fff;

}

.tmpl-leftmenu li.nav-item > .nav-link .nav-icon {

    flex-shrink: 0;

    text-align: center;

    font-size: 1.125rem;

    width: 28px;

    margin-right: 8px;

}

.tmpl-leftmenu li.nav-item > .nav-link > div {

    transition:

        margin-left .3s linear,

        opacity .3s ease,

        visibility .3s ease;

    /*animation-name: fadeIn;

        -webkit-animation-name: fadeIn;

    animation-duration: .3s;

        -webkit-animation-duration: .3s;

    animation-fill-mode: both;

        -webkit-animation-fill-mode: both;*/

}

body.sidebar-collapse:not(.sidebar-open) .tmpl-leftmenu li.nav-item > .nav-link > div {

    width: 0;

    margin-left: -10px;

    animation-name: fadeOut;

        -webkit-animation-name: fadeOut;

    animation-duration: .3s;

        -webkit-animation-duration: .3s;

    animation-fill-mode: both;

        -webkit-animation-fill-mode: both;

    visibility: hidden;

}

.tmpl-leftmenu li.nav-item > .nav-link > div> span {

    display: block;

    min-width: 175px;

}



#sidebar-overlay {

    background-color: rgba(0,0,0,.1);

    bottom: 0;

    display: none;

    left: 0;

    position: fixed;

    right: 0;

    top: 0;

    cursor: pointer;

    z-index: 99;

}



@media (max-width: 767.98px) {

    .sidebar-open #sidebar-overlay {

        display: block;

    }

}





/* Header */



.tmpl-header-wrapper {

    margin-left: 260px;

    background-color: #fff;

    border-bottom: 1px solid #dee2e6;

    transition: margin-left .3s ease-in-out;

}

body.sidebar-collapse .tmpl-header-wrapper {

    margin-left: 76px;

}

@media (max-width: 767.98px) {

    body.sidebar-collapse .tmpl-header-wrapper {

        margin-left: 0;

    }

}



.tmpl-header-wrapper > .tmpl-header {

    display: flex;

    align-items: center;

    justify-content: space-between;    

    height: 64px;

    padding: 0 16px;

}



.tmpl-header-wrapper > .tmpl-header .navbar-nav {

    flex-direction: row;

}

.tmpl-header-wrapper > .tmpl-header .navbar-nav .nav-link {

    color: RGBa(0,0,0,.5);

    font-weight: 400;

    padding: 8px;

}

.tmpl-header-wrapper > .tmpl-header .navbar-nav .nav-link:hover {

    color: RGBa(0,0,0,.7);

}





.tmpl-user-block {

    display: flex;

    align-items: center;

}

.tmpl-user-name {

    margin-right: 2rem;

}





/* Content */



.tmpl-content-wrapper {

    margin-left: 260px;

    transition: margin-left .3s ease-in-out;

}

body.sidebar-collapse .tmpl-content-wrapper {

    margin-left: 76px;

}

@media (max-width: 767.98px) {

    body.sidebar-collapse .tmpl-content-wrapper {

        margin-left: 0;

    }

}

.tmpl-content-wrapper > .tmpl-content {

    padding: 16px 24px;   

}



.tmpl-content-wrapper > .tmpl-content-header {

    padding: 16px 24px 0 24px;

}

.tmpl-content-wrapper > .tmpl-content-header h1 {

    font-size: 1.6rem;

    line-height: 2rem;

    padding-top: 0.4rem;

    margin: 0;

}



.breadcrumb {

    background-color: transparent;

    justify-content: flex-end;

    margin-bottom: 0;

}

.breadcrumb-item + .breadcrumb-item::before {

    content: '/';

}





/* Card */



.card { }

.card.card-outline {

    border-top: 3px solid #217de1;

}

.card.margin { 

    margin-bottom: 1rem;

}

.card .card-header {

    background-color: transparent;    

}

.card .card-body {

    padding: .75rem 1.25rem;

}



.card .card-body.collapse-area {

    display: none;

}



/* Buttons */



.btn {

    cursor: pointer;

}



.btn.btn-default {

    background-color: #f8f9fa;

    border-color: #ddd;

    color: #444;

}

.btn.btn-default.hover,

.btn.btn-default:active,

.btn.btn-default:hover {

    background-color: #e9ecef;

    color: #2b2b2b;

}

.btn.btn-primary {

    background-color: #217de1;   

}

.btn.btn-primary.hover,

.btn.btn-primary:active,

.btn.btn-primary:hover {

    background-color: #166fce;

    border-color: #0062cc;

}

.btn.btn-light {

    border-color: #ced4da;

}



.btn.btn-editor {

    color: #111;

    opacity: 0.7;

    padding: 0;

    line-height: 1;

}

.btn.btn-editor:hover{

    opacity: 1;

}



.btn.btn-editor.red:hover{

    opacity: 1;

    color: #dc3545;

}



.btn.icon-new:before {

    font-family: 'Font Awesome 5 Free';

    content: "\f15b";

    margin-right: 0.75rem; 

}

.btn.icon-category:before {

    font-family: 'Font Awesome 5 Free';

    content: "\f022";

    margin-right: 0.75rem; 

}

.btn.icon-menu:before {

    font-family: 'Font Awesome 5 Free';

    content: "\f0c9";

    font-weight: 700;

    margin-right: 0.75rem; 

}

.btn.icon-settings:before {

    font-family: 'Font Awesome 5 Free';

    content: "\f013";

    font-weight: 700;

    margin-right: 0.75rem; 

}

.btn.icon-card:before {

    font-family: 'Font Awesome 5 Free';

    content: "\f2c2";

    font-weight: 700;

    margin-right: 0.75rem; 

}

.btn.icon-print:before {

    font-family: 'Font Awesome 5 Free';

    content: "\f02f";

    font-weight: 700;

    margin-right: 0.75rem; 

}

.btn.icon-stat:before {

    font-family: 'Font Awesome 5 Free';

    content: "\f201";

    font-weight: 700;

    margin-right: 0.75rem; 

}

.btn.icon-logount:before {

    font-family: 'Font Awesome 5 Free';

    content: "\f2f5";

    font-weight: 700;

    margin-right: 0.75rem; 

}





.table.table-list {

    background-color: #fff;

}



.table.table-list thead a {

    color: #212529;

}





/* Forms */



.cms-form { }



.cms-form .form-check-input {

    margin-top: 0.2rem;

}



.h100,

.cms-form .form-control.h100 { 

    height: 100px;

}

.h200,

.cms-form .form-control.h200 { 

    height: 200px;

}

.h300,

.cms-form .form-control.h300 {

    height: 300px;

}



.w100 {

    width: 100px;

}

.w150 {

    width: 150px;

}

.w200 {

    width: 200px;

}

.w300 {

    width: 300px;

}

.w400 {

    width: 400px;

}



.f-sh-0 {

    flex-shrink: 0;

}





/* Tooltip */



.tooltip {

    font-size: 0.75rem;

}





/* ExtJS reset */



.x-window *,

.x-window *::before,

.x-window *::after {

    box-sizing: content-box;

}

.x-window label {

    display: inline;

    margin-bottom: auto;

}