/* @import 'src/sass/custom.scss'; */


/*
Created by: Jyostna Designs

[TABLE OF CONTENTS]

1.  RESET STYLES
2.  HEADER STYLES
    2.1 HEADER LEFT
    2.2 HEADER RIGHT SIDE DROPDOWNS
3. LEFT SIDE BAR
4. MAIN WRAPPER STYLES
5. LEFT MENU COLLAPSE STYLES
6. CUSTOM STYLES
7. MEDIA QUERIES

*/


/*****  1.RESET STYLES  *****/

html {
    background: none repeat scroll 0 0 #EEE;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    transition: all .25s ease-out;
    font-size: small;
}

body {
    background: none repeat scroll 0 0 #FFF;
    -webkit-font-smoothing: antialiased;
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    transition: all .25s ease-out;
    font-size: small;
    letter-spacing: 0.5px;
    overflow-x: hidden;
}

ul {
    list-style: none;
}

p {
    line-height: 20px;
}

label {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 1px;
}


/******  2.HEADER STYLES   ******/

body>.header {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

body>.header .navbar {
    margin-bottom: 0;
    background-color: #f6f6f6;
    border-width: 0;
}

body>.header .navbar .nav>li>a>.label {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    top: 16px;
    right: 14px;
    font-size: 8px;
    font-weight: normal;
    width: 13px;
    height: 13px;
    line-height: 1.0em;
    text-align: center;
    padding: 2px;
}

body>.header .navbar .nav>li>a:hover>.label {
    top: 12px;
}

body>.header .logo {
    display: block;
    float: left;
    height: 59px;
    line-height: 50px;
    padding: 3px 10px;
    text-align: center;
    width: 240px;
    background-color: #f6f6f6;
}


/* Define 2 column template */

.right-aside,
.left-aside {
    padding: 0;
    display: table-cell;
}

.wrapper.hide_menu>.left-aside {
    display: none;
}

@media (max-width: 992px) {
    .wrapper>.right-aside {
        width: 90vw;
        min-width: 90vw;
    }
}

@media (max-width: 767px) {
    .wrapper>.right-aside {
        width: calc(100vw - 62px);
        min-width: calc(100vw - 62px);
    }
}

@media (max-width: 600px) {
    .wrapper>.right-aside {
        width: 100vw;
        min-width: 100vw;
    }
}

/******* 2.1 HEADER LEFT ******/


/*side bar nav */

.sidebar {
    display: block;
    width: 240px;
}

.content {
    display: block;
    width: auto;
    overflow-x: hidden;
    padding: 0 15px;
}


/* left side profile css */

.nav_profile .profile-left {
    padding: 7px 15px 9px 15px;
    min-height: 85px;
    border-bottom: 1px solid #EEE;
}

.nav_profile .profile-left .profile-thumb {
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    display: inline-block;
    padding-top: 8px;
}

.nav_profile .profile-left .media-heading {
    line-height: 20px;
    margin-top: 12px;
    font-weight: 600;
    font-size: 15px;
    color: #2E576B;
}

.nav_profile .profile-left .profile-thumb img {
    width: 54px;
}


/******* 2.2 HEADER RIGHT SIDE DROPDOWNS  *****/


/*
   Dropdown menus
----------------------------
*/

.dropdown-menu {
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    z-index: 2300;
}


/*
   Navbar custom dropdown menu
------------------------------------
*/

.navbar .navbar-right>.nav {
    margin-right: 15px;
}

.navbar-nav>.notifications-menu>.dropdown-menu {
    width: 320px;
    padding: 0;
    border: 1px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.navbar-nav>.user-menu>.dropdown-menu {
    padding: 0;
    margin-top: 1px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border: 0;
}

.navbar .nav a {
    color: #555;
}

.navbar-right {
    margin-right: 0;
}

.navbar .navbar-right {
    float: right;
}

.navbar-right .nav>li>a {
    padding: 13px 15px 14px 15px
}

.navbar-right .nav>li.notifications-menu>a {
    padding-top: 15px;
    padding-bottom: 15px;
}

.navbar-right .nav>li>a img {
    width: 35px;
    height: 35px;
    border: 1px solid #e1e1e1;
}

.navbar-right .nav>li>a:hover,
.navbar-right .nav>li>a:focus {
    background-color: #f6f6f6;
}

.navbar-nav>.user-menu .user-name {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 15px;
    font-weight: 600;
    color: #2283bf;
}

.navbar-nav>.user-menu>.dropdown-menu>li a {
    font-size: 14px;
    padding: 7px 17px;
}

.navbar-nav>.user-menu>.dropdown-menu>li a i {
    color: #888;
}


/* Add fade animation to dropdown menus */

.navbar-right .open>.dropdown-menu {
    animation-name: fadeAnimation;
    animation-duration: 1.2s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    -webkit-animation-name: fadeAnimation;
    -webkit-animation-duration: 1.2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: fadeAnimation;
    -moz-animation-duration: 1.2s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: forwards;
    overflow: hidden;
}

@keyframes fadeAnimation {
    from {
        max-height: 0;
    }
    to {
        max-height: 500px;
    }
}

.dropdown-menu .menu i {
    display: inline-block;
    margin: 4px 12px;
    float: left;
    padding: 10px 30px 30px 10px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #E2E2E2;
}

.dropdown-menu .menu a {
    line-height: 42px;
}

.dropdown-menu .menu a .clearfix {
    color: #FFF;
    line-height: 31px;
}

.notifications-menu .notification .notif-image {
    display: block;
    float: left;
    height: 45px;
    margin-right: 15px;
    margin-top: 8px;
    text-align: center;
}

.notifications-menu .notification .notif-body {
    padding: 0 32px;
}

li.dropdown-footer {
    padding: 10px 10px 10px 17px;
    background: #F5F5F5;
    border-top: 1px solid #ccc;
}

li.dropdown-footer a {
    font-size: 15px;
    padding: 0;
}

.dropdown-menu .notification:hover {
    background: #efefef;
}

.dropdown-menu:after {
    border-color: transparent;
    bottom: 100%;
    content: " ";
    height: 0;
    margin-left: -10px;
    pointer-events: none;
    position: absolute;
    right: 10px;
    width: 0;
}

.navbar-right .nav .open>a:hover>i,
.navbar-right .nav .open>a:focus>i,
.navbar-right .nav>li>a:hover>i,
.navbar-right .nav>li>a:focus>i {
    color: #555;
}

.riot {
    padding: 5px 0 5px 40px;
}

.user-menu a:hover>.riot {
    color: #555;
}

.riot .caret {
    margin-top: 0;
}

.navbar-nav>.user-menu>.dropdown-menu:after {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent;
}

.navbar-right .nav>li>a .black {
    padding-top: 5px;
    color: #666;
    font-size: 21px;
}

.dropdown-notifications {
    min-width: 320px
}

.dropdown-notifications>li {
    border-bottom: 1px solid #F5F5F5
}

.dropdown-notifications>li>.notification {
    line-height: 20px;
    white-space: normal;
    font-size: 12px;
    padding: 5px 15px;
}

.dropdown-notifications>li:last-child {
    border-bottom: none
}

.dropdown-notifications {
    min-width: 260px
}

.msg-lable {
    float: right;
    margin-top: -19px;
}

.striped-col {
    background-color: #F9F9F9;
}


/**** END HEADER RIGHT SIDE DROPDOWNS ****/


/****** 3.LEFT SIDEBAR ******/

.left-aside {
    width: 240px;
    background: #FFF;
    border-right: 5px solid #EEE;
}

li.active a,
a:hover,
a {
    text-decoration: none !important;
}

.content-header h1 {
    font-size: 20px;
    line-height: 1.5;
}

.badge {
    background-color: #66CC99;
    font-weight: 400;
    float: right;
}

.sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

#menu li.active>a {
    -webkit-transition: none;
    transition: none;
}

#menu li>a {
    border-right: 5px solid #EEE;
}

#menu .profile-left li>a:hover {
    color: #0A1414;
}

#menu li>a:hover {
    color: #2283bf;
}

#menu li.active>a i {
    color: #2283bf;
}

#menu .menu-dropdown>ul>li>a {
    padding-left: 37px;
}

#menu .menu-dropdown>ul>li.active>a {
    padding-left: 34px;
}

#menu .menu-dropdown>ul,
#menu .menu-dropdown-open-ul {
    background: #FFF;
}

#menu .navigation .menu-icon {
    display: inline-block;
    margin-right: 5px;
    line-height: 20px;
    height: 20px;
    width: 20px;
    text-align: center;
    font-size: 16px;
}

#menu .navigation {
    padding: 0 0 15px 0;
}

#menu .navigation a {
    text-align: left;
    color: #666;
    position: relative;
    display: block;
    font-size: 13px;
    line-height: 20px;
    padding: 11px 20px;
    -webkit-transition: none;
    transition: none;
}

#menu .navigation a i {
    color: #888;
}

#menu .fa.arrow:before {
    content: "\f105";
}

#menu .active>a>.fa.arrow:before {
    content: "\f107";
}


/******* END LEFT SIDEBAR *****/


/********* 4. MAIN WRAPPER STYLES *********/

.wrapper:before,
.wrapper:after {
    display: table;
    content: " ";
}

.wrapper:after {
    clear: both;
}

.wrapper {
    display: flex;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    table-layout: fixed
}


/****** wrapper RIGHT SIDE  *******/

.right-aside {
    padding: 0 10px 10px 10px;
    width: 100%;
    max-width: 100%;
}

.right-aside>.content-header h1 {
    margin: 2px;
    padding-left: 13px;
    padding-top: 18px;
}

.right-aside>.content-header {
    margin: -2px -10px 25px -10px;
    /*height: 65px;*/
	min-height: 68px;
    background: #FFF;
    box-shadow: 0 0 18px #E5E5E5;
}

.view-port-height {
    height: 100vh;
}


/********* END MAIN WRAPPER STYLES *********/


/********* 5. LEFT MENU COLLAPSE STYLES *********/

body>.header .navbar .sidebar-toggle {
    float: left;
    color: #666;
    font-size: 23px;
    font-weight: bold;
}

body>.header .navbar .sidebar-toggle:hover>i {
    color: #555;
}


/********* END LEFT MENU COLLAPSE STYLES *********/


/*********7. CUSTOM STYLES *********/

body.modal-open {
    padding-right: 0 !important;
}

.progress_task {
    margin-top: 8px;
    margin-bottom: 12px;
}

.progress {
    height: 15px;
}

.progress-bar {
    font-size: 10px;
    line-height: 15px;
}

.progress-xs {
    height: 5px;
}

.panel-heading small {
    line-height: 23px;
    font-size: 12px;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
    color: #555;
    background-color: #FFF;
    border-top: 3px solid #6699CC;
    border-bottom-color: transparent;
    cursor: default;
    font-weight: 500;
}

.p-t-3 {
    padding-top: 3px;
}

.p-0 {
    padding: 0;
}

.p-10 {
    padding: 10px;
}

.p-20 {
    padding: 20px;
}


/* form section starts here */

.m-t-10 {
    margin-top: 10px !important;
}

.m-l-18 {
    margin-left: 18px;
}

.m-l-30 {
    margin-left: 30px;
}


/* text color white */

.text-white {
    color: #FFFFFF;
}

.input-group-addon {
    padding: 5px 12px;
}

.radio label,
.checkbox label,
.checkbox-inline,
.radio-inline {
    padding-left: 0;
}

.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
    margin-left: 10px;
}

.form-control.focus,
.form-control:focus {
    border-color: #7EC4E7;
    -webkit-box-shadow: none;
    box-shadow: none;
}


/* ui_elements page buttons code */

.rounded {
    border-radius: 20px;
    padding: 7px 20px;
}

.btn-white {
    background-color: rgb(255, 255, 255);
    border-color: rgb(204, 204, 204);
}


/* form section ends here */

.m-t-25 {
    margin-top: 25px;
}


/* alerts page css */

.m-l-10 {
    margin-left: 10px;
}

.btn-block {
    display: block;
    width: 100%;
}

.margin-bottom-10 {
    padding-bottom: 10px;
}

.alert-success {
    background-color: #e0f4e9;
    border-color: #75D1A3;
    color: #75D1A3;
}

.alert-warning {
    background-color: #fffdcc;
    border-color: #FFCE56;
    color: #FFBF23;
}

.swal2-modal.swal2-show {
    border-radius: 0;
    font-family: 'Open Sans', sans-serif;
}


/* end of alerts page css */


/*
Customized Bootstrap toastr
*/

.radio,
.checkbox {
    display: inline;
    min-height: 0;
    margin-top: 10px;
    margin-bottom: 10px;
}

div.radio,
div.checker {
    margin-right: 0;
    margin-left: 3px;
}

div.selector,
div.checker,
div.button,
div.uploader {
    display: -moz-inline-box;
    display: inline-block;
    zoom: 1;
    vertical-align: middle;
}

.resize_vertical {
    resize: vertical;
}

.input-group-addon {
    background-color: #FFF;
    border: 1px solid #CCC;
}


/***Session Timeout custom css***/

#idle-time .note.note-success {
    background-color: #eef7ea;
    margin: 0 0 20px 0;
    padding: 27px 15px 15px 15px;
    border-left: 5px solid #bbdba1;
}

#idle-time .note .alert-information {
    font-size: 16px;
}


/* layout css ends*/


/**** 7.MEDIA QUERIES ****/


/* form_elements page code */

@media (max-width: 768px) {
    .group_radios {
        margin-top: 10px;
    }
}


/* end of form_elements page code */

@media screen and (min-width: 993px) {
    .left-aside {
        top: 60px;
    }
}


/*Give content full width on xs screens*/

@media screen and (max-width: 992px) {
    .right-aside {
        margin-left: 0;
    }
}

@media screen and (min-width: 768px) {
    body {
        width: 90%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 560px) {
    .right-aside {
        padding: 0 10px 10px 10px;
    }
}

@media screen and (max-width: 767px) {
    .navbar .navbar-nav>li {
        float: left;
    }
    .navbar-nav {
        margin: 0;
        float: left;
    }
    .navbar-nav>li>a {
        padding-top: 15px;
        padding-bottom: 15px;
        line-height: 20px;
        color: #f7eded;

    }
}


/* Fix dropdown menu for small screens to display correctly on small screens */

@media screen and (max-width: 767px) {
    .navbar-nav>.user-menu>.dropdown-menu,
    .navbar-nav>.notifications-menu>.dropdown-menu {
        position: absolute;
        top: 100%;
        right: -60px;
        left: auto;
        background: #FFFFFF;
    }
    .navbar-nav .open .dropdown-menu>li>a,
    .navbar-nav .open .dropdown-menu .dropdown-header {
        padding: 5px 15px 5px 15px;
    }
    .navbar-nav>.notifications-menu>.dropdown-menu {
        width: 295px;
    }
    .navbar-nav>.user-menu>.dropdown-menu {
        right: 7px;
        margin-top: 8px;
    }
    .navbar-nav .user-menu .dropdown-menu>li>a {
        padding: 4px 20px;
    }
    .navbar-right .nav>li>a {
        padding: 13px 15px 14px 15px;
    }
    .navbar-right .nav>li>a .black {
        padding-top: 9px;
    }
    .navbar-right .nav>li.notifications-menu>a {
        padding-top: 12px;
        padding-bottom: 14px;
    }
    body>.header .navbar .nav>li>a>.label {
        top: 17px;
        right: 13px;
    }
    /* form features repeater */
    .repeater-btn {
        margin-top: 10px
    }
}


/* Fix menu positions on xs screens to appear correctly and fully */

@media screen and (max-width: 480px) {
    .navbar-nav>.notifications-menu>.dropdown-menu>li.header:after {
        border-width: 0;
    }
}

@media screen and (max-width: 560px) {
    body>.header .logo,
    body>.header .navbar {
        width: 100%;
        float: none;
        position: relative;
        height: initial;
    }
    body>.header .navbar {
        margin: 0;
    }
    body>.header .navbar .sidebar-toggle {
        padding-left: 25px;
    }
}

@media screen and (max-width: 350px) {
    .navbar-nav>.notifications-menu>.dropdown-menu {
        right: -76px;
        margin-top: 7px;
    }
}

@media (min-width: 1440px) and (max-width: 2560px) {
    #menu .menu-dropdown>ul,
    #menu .menu-dropdown-open-ul {
        margin-top: -1px;
    }
}

@media (min-width: 768px) {
    .label_padding {
        padding-right: 32px;
    }
    /* form features page */
    .repeater-form {
        text-align: center;
    }
}


/****** END MEDIA QUERIES ****/