/*  /////////////////////////////////////////////////////////////////////////////////// */

    .title
    {
        font-weight: normal;
    }
    .avatar
    {
        background-image: url('../media/avatars/avatar1.png');
        display:block;
        position:relative;
        width:6em;
        height: 6em;
        margin: 20px auto;
        border-radius:50%;
        background-size:cover;
    }

/*  html */
    html,body
    {
        height: 100%;
        padding: 0;
        margin: 0;
        overflow:hidden;
        border: 0;
        vertical-align: baseline;
        background: transparent;
        font-family: 'Quicksand', sans-serif;
        font-weight: normal;
        font-size:16px;
    }
    form
    {
        padding:0;
        margin:0;
    }

    hr
    {
        height:1px;
        width:100%;
        background-color: rgba(0,0,0,0.2);
    }
/*  /////////////////////////////////////////////////////////////////////////////////// */



/*  warning */
    #__warning_bar__
    {
        height:30px;
        width:100%;
        -moz-box-shadow:0px 0px 1px #005073;
        -webkit-box-shadow:0px 0px 1px #005073;
        box-shadow:0px 0px 1px #005073;
        padding:0px;
        position: relative;
        top: 0px;
        background: rgba(207,48,48,0.9) !important;
        color:#FFF;
        z-index: 1000;
        text-align: center;
        text-shadow: 0 2px 3px rgba(0,0,0,1);
        font-weight: bold;
        box-shadow:0 2px 8px 0 rgba(0,0,0,0.5),0 4px 4px 0 rgba(0,0,0,0.1) !important;
    }


/*  viewport */
    .__viewPort__
    {
        display:block;
        overflow-y: visible;
        overflow-x: hidden;
        width:auto;
        /* min-height:1080px; */
        height:100%;
/*        min-height:800px !important; */
        position:relative;
        background-color: #010101;
    }

/*  app modal */
    #__error__
    {
        display:none;
        user-select: none;
    }

/*  app modal */
    #__modal__
    {
        display:none;
        user-select: none;
    }
    #__card__
    {
        display:none;
        user-select: none;
    }

/*  notification */
    #__notification__
    {
        top:50px;
        margin-left:-160px;
        left:50%;
        position:absolute;
        width:320px;
        height:100px;
        right:10px;
        user-select: none;
        display:none;
    }

/*  loader layer */
    #__loader__
    {
        display:none;
        user-select: none;
    }

/*  app warning */
    #__warning__
    {
        top:0;
        margin:0;
        position:absolute;
        width:100%;
        height:50px;
        display:none;
        user-select: none;
        z-index:0;
        background:#F00;
        color:#FFF;
        font-weight:bold;
        padding:10px;
        cursor: pointer;
    }

/*  message boxes */
    #__grid_fatal_error__
    {
        position:fixed;
        top:45%;
        user-select: none;
        width:100%;
        background: rgba(0,0,100,0.9);
        color:#fff;
        padding: 20px 20px 30px;
        text-align:center;
        font-size:1.2em;
        height:auto;
        display:none;
        z-index: 1000;
    }

    #__grid_message_box__
    {
        position:fixed;
        top:45%;
        user-select: none;
        width:100%;
        background: rgba(0,0,100,0.9);
        color:#fff;
        padding: 20px 20px 30px;
        text-align:center;
        font-size:1.2em;
        height:auto;
        display:none;
        z-index: 1000;
    }
    .__grid_message_content__
    {
        margin:30px;
        display:block;
    }
    #__grid_request_box__
    {
        position:fixed;
        top:45%;
        user-select: none;
        width:100%;
        background: rgba(0,0,100,0.9);
        color:#fff;
        padding: 20px 20px 30px;
        text-align:center;
        font-size:1.2em;
        height:auto;
        display:none;
        z-index: 1000;
    }
    .__grid_request_content__
    {
        margin:30px;
        display:block;
    }
    #__grid_notification_box__
    {
        position:fixed;
        bottom:0;
        user-select: none;
        width:100%;
        background: rgba(0,0,100,0.9);
        color:#fff;
        padding:20px;
        text-align:center;
        font-size:1.2em;
        height:auto;
        display:none;
    }
    .__grid_notification_content__
    {
        margin:30px;
        display:block;
    }

/*  button styles for grid buttons */
    .__grid_button__
    {
        min-width:100px;
        text-transform: uppercase;
        border:none;
        text-shadow: none;
        filter:opacity(90%);
    }
    .__grid_button__:hover
    {
        min-width:100px;
        text-transform: uppercase;
        box-shadow:0 2px 8px 0 rgba(0,0,0,0.1),0 4px 8px 0 rgba(0,0,0,0.1) !important;
        top:-1px;
        border:none;
        /* text-shadow: 0 2px 3px rgba(0,0,0,1); */
        filter:opacity(100%);
    }
    .__grid_button__:active
    {
        min-width:100px;
        text-transform: uppercase;
        border:none;
        top:1px;
        /*text-shadow: 0 2px 3px rgba(0,0,0,1); */
        filter:opacity(100%);
    }

    .__grid_small_button__
    {
        min-width:80px;
        text-transform: uppercase;
        font-size: small;
        font-weight:bold;
        border:none;
        top:0;
        border-radius: 4px;
        text-shadow: none;
        filter:grayscale(40%);
        height:30px;
    }
    .__grid_small_button__:hover
    {
        min-width:80px;
        text-transform: uppercase;
        box-shadow:0 2px 8px 0 rgba(0,0,0,0.2),0 4px 8px 0 rgba(0,0,0,0.2) !important;
        top:-1px;
        border:none;
        text-shadow: 0 2px 3px rgba(0,0,0,1);
        filter:grayscale(0%);
        height:30px;

    }
    .__grid_small_button__:active
    {
        min-width:80px;
        text-transform: uppercase;
        opacity:1.0;
        border:none;
        top:1px;
        text-shadow: 0 2px 3px rgba(0,0,0,1);
        filter:grayscale(0%);
        height:30px;
    }

/*  grid tabs */

    /*
    .__grid_tab__
    {
        opacity: 0.5;
    }
    .__grid_tab__:hover
    {
        opacity: 1.0;
    }
    .__grid_tab_active__ , .__grid_tab_active__:hover
    {
        color:#000;
        font-weight: bold;
        background:#FFF;
        border:none;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        box-shadow:0 2px 8px 0 rgba(0,0,0,0.2),0 4px 8px 0 rgba(0,0,0,0.5) !important;

    }
    .grid_navTab
    {
        text-transform: capitalize !important;
    }

    */

/*  grid pagination */
    /*
    .__grid_pagination__
    {
        max-width:5%;
        background: transparent;
        text-align: center;
        margin: auto;
        display: flex;
    }
    .__grid_pagination__ a
    {
        border:1px solid #DDD;
        line-height: 35px;
        border-radius:3px;
        text-shadow: none;
        filter:opacity(100%);
        width:35px;
        height:35px;
        display:block;
        background: #DEDEDE;
        color:#000 !important;
        box-shadow:none !important;
        position:relative;
        margin:2px;
    }
    .__grid_pagination__ a:hover
    {
        border:1px solid #666;
        border-radius:3px;
        text-shadow: 0 2px 3px rgba(0,0,0,1);
        filter:opacity(100%);
        display:block;
        position:relative;
        top:-1px;
        background: #777;
        color:#FFF !important;
        box-shadow:0 2px 8px 0 rgba(0,0,0,0.2),0 4px 8px 0 rgba(0,0,0,0.5) !important;
    }
    .__grid_pagination__ li
    {
        margin-left:2px;
        margin-right:2px;
    }
    */

/*  grid button */
    /*
    .__grid_tag_button__
    {
        opacity: 0.2;
        cursor: pointer;
        font-weight: normal;
    }
    .__grid_tag_button__:hover
    {
        opacity: 0.5;
    }
    .__grid_tag_button_active__
    {
        opacity: 1.0;
        font-weight: normal;
    }
    .__grid_tag_button_active__:hover
    {
        opacity: 1.0;
    }
    */

/*  grid entity list */
    /*
    .__grid_list__ li
    {
        background:#FEFEFE !important;
    }
    .__grid_list__ li:hover
    {
        background:#EFEFEF !important;
    }
    */
/*  /////////////////////////////////////////////////////////////////////////////////// */

/*  style modifiers : bulma additional custom styles */
    .is-grid-default
    {
        background-color: #CDCDCD;
        color:#000;
    }
    .is-grid-default:hover
    {
        background-color: #DEDEDE;
        color:#555;
    }

/*  style modifiers : add text and box shadows */
    ._has_box_shadow_
    {
        box-shadow:0 2px 8px 0 rgba(0,0,0,0.2),0 4px 8px 0 rgba(0,0,0,0.5) !important;
    }
    ._has_box_shadow_light_
    {
        box-shadow:0 2px 4px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2) !important;
    }

    ._has_text_shadow_
    {
        text-shadow: 0 2px 3px rgba(0,0,0,1);
    }

/*  style modifiers : add blur effect */
    ._has_blur_
    {
        filter: blur(4px);
    }
    ._has_blur_high_
    {
        filter: blur(1.5rem);
    }

/*  style modifiers : change the background color */
    ._is_danger_ , ._is_danger_:hover
    {
        background: rgba(207,48,48,0.9) !important;
        color:#FFF;
    }
    ._is_success_ , ._is_success_:hover
    {
        background: rgba(48,207,48,0.9) !important;
        color:#FFF;
    }
    ._is_warning_ , ._is_warning_:hover
    {
        background: rgba(207, 166, 60, 0.9) !important;
        color:#000;
    }
    ._is_info_ , ._is_info_:hover
    {
        background: rgba(66, 157, 240, 0.9) !important;
        color:#FFF;
    }
    ._is_dark_ , ._is_dark_:hover
    {
        background: rgba(0,0,0,0.9) !important;
        color:#FFF;
    }
    ._is_default_ , ._is_default_:hover
    {
        background: rgba(0,0,0,0.9) !important;
        color:#FFF;
    }

    ._is_disabled_ , ._is_disabled_:hover
    {
        opacity: 0.4;
    }
    ._is_grid_subtitle_
    {
        margin-bottom:5px !important;
        font-size:1.5em !important;
    }
    ._is_grid_label_
    {
        position:relative;
        width:auto;
        height:1em;
        color: #FFF;
        font-weight: bold;
        background: black;
        border-radius:18px;
        padding:8px 20px 8px 20px;
        text-align: left;
        text-indent: 0;
        white-space: nowrap;
        margin:0 5px  0 5px;
        overflow:hidden;
    }

/*  style for the links with the action tag on them */
    .grid_action
    {
        user-select: none;
        cursor: pointer;
        opacity:1.0;
    }
    .grid_action:hover
    {
        opacity:1.0;
        box-shadow: 0 0 6px rgba(0,0,0,0.4);
    }

/*  custom scrollbar -> webkit based browsers only */
    ::-webkit-scrollbar
    {
        width:6px;
    }
    ::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 5px;
    }
    ::-webkit-scrollbar-thumb
    {
        border-radius: 10px;
        background: rgba(0,0,0,0.3);
    }
    ::-webkit-scrollbar-thumb:window-inactive
    {
        background: rgba(0,0,0,0.1);
    }

/*  custom checkbox , on/off slider switch */
    input:checked + .__slider__ { background-color: #2196F3; }
    input:focus + .__slider__ { box-shadow: 0 0 1px #2196F3; }
    input:checked + .__slider__:before { -webkit-transform: translateX(13px); -ms-transform: translateX(13px); transform: translateX(13px); }
    .__switch__ {
      position: relative;
      display: inline-block;
      width: 30px;
      height: 17px;
    }
    .__switch__ input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .__slider__
    {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 17px;
    }
    .__slider__:before
    {
        position: absolute;
        content: "";
        height: 13px;
        width: 13px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 50%;
    }

/*  /////////////////////////////////////////////////////////////////////////////////// */

/*  new side nav menu container */
    ._menu
    {
        background: #1a1a1a;
        padding:0px;
    }
/*  menu label */
    .menu-label
    {
        color: #dedede;
        font-size: 1em;
        padding-left: 10px;
    }
/*  style the sub container border */
    .menu-list .menu-sub-nav
    {
        border-color: rgba( 255, 255, 255, 0.5);
        display:none;
    }
/*  nav option classes */
    .menu-list .menu-option-main
    {
        border-bottom: #333 1px solid;
        padding-top:15px !important;
        padding-bottom:15px !important;
        padding-left:25px;
    }
    .menu-list .menu-option-main:hover
    {
        color: #fff !important;
        background: #282828;
    }
    .menu-list .menu-option-sub
    {
        padding-top:15px !important;
        padding-bottom:15px !important;
        padding-left:10px;
        /* border-left:1px #f03a5f solid; */

    }
    .menu-list .menu-option-sub:hover
    {
        color: #888 !important;
        background: transparent;
    }
/*  active classes for main and sub links */
    .menu-list .is-active
    {
        background-color: #333 !important;
        color: #fff !important;
        font-weight: bolder;
    }
    .menu-list .is-active:hover
    {
        background-color: #333 !important;
        color: #fff !important;
        cursor: default;
    }
    .menu-list .is-active-sub
    {
        background-color: transparent !important;
        color: #FFF !important;
        font-weight: bolder;
    }
    .menu-list .is-active-sub:hover
    {
        background-color: transparent !important;
        color: #FFF !important;
        cursor: default;
    }
/*  open class */
    .menu-list .is-open
    {
        background-color: #292929 !important;
        color: #999 !important;
        font-weight: bolder;
    }