:root {
    --offcanvas-width: 250px;
    --topNavbarHeight: 56px;
  }

  body{
    background-color: #f5f5f5;
    color: #1b1b1b;
    font-weight: 400;
    font-family: 'iran_yekan', Tahoma, Arial, Helvetica, sans-serif;
  }

.my_blue{ color: #0030b9;}
.my_blue_light{ color: #edf1f7;}
.my_blue_light_bg{ background-color: #edf1f7;}

.text-gold{ color: #daa520;}
.text-light-2{ color: #cccccc;}

.bg-gold{background-color: #daa520;}
.bg-dark-2{background-color: #2b2b2b;}
.bg-dark-3{background-color: #333333;}
.bg-dark-4{background-color: #393939;}
.bg-dark-5{background-color: #404040;}
.bg-dark-6{background-color: #707070;}
.bg-dark-7{background-color: #c5c5c5;}

.bg-light-1{background-color: #f8f9fa;}
.bg-light-2{background-color: #f7f8f8;}


  .sidebar-nav {
    width: var(--offcanvas-width);
    top: var(--topNavbarHeight);
  }
  .sidebar-link {
    display: flex;
    align-items: center;
  }
  .sidebar-link .right-icon {
    display: inline-flex;
    transition: transform .5s ease-in-out
  }
  .sidebar-link[aria-expanded="true"] .right-icon {
    transform: rotate(180deg);
  }
  .navbar{z-index: 1041;}

  .navbar-toggler{
    width: 33px !important;
    height: 33px !important;
    background-image: url('../img/icon/menu.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .navbar-toggler:focus {
    outline: none !important;
    box-shadow: none;
  }

  .size_6_6{width: 6px; height: 6px;}
  .size_10_10{width: 10px; height: 10px;}

  .offcanvas {
    transition: transform .5s ease-in-out;
    z-index: 1040;
  }

  .backdrop {
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1039;
    display: none;
  }

  .nav-link{
      text-align: right;
      color: #555 !important;
      border: 0px;
      background-color: transparent;
      font-weight: 400;
      font-size: 14px;
      margin: 4px 0px 4px 0px;
    }
  .nav-link:hover{color: #333 !important; background-color: #d8d8d8;}
  .nav-link:focus{outline:0;}
  .nav-logo{ width: 130px;}
  li .active{ color: #222 !important; background-color: #e6e6e6;}
  

  .list-group-item:hover{background-color: #f6f8fb;}


  /* form control */

  .my_textbox_2{
    background-color: #404040;
    border-color: #707070;
    color: #FFFFFF;
  }

  .my_textbox_2:focus{
    color: #daa520;
    background-color: #404040;
    border-color: #daa520;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(218, 165, 32, 0.25);
  }


  .form-check-input-warning {
    background-color: #606060;
    border: none;
  }
  .form-check-input-warning:checked {
    background-color: #ffc107;
    border: none;
  }

  .form-check-input-warning:focus {
    border: none;
    box-shadow: 0 0 0 0.25rem rgba(218, 165, 32, 0.25);
  }


  .page-link {
    position: relative;
    display: block;
    color: #505050;
    text-decoration: none;
    background-color: #f8f9fa;
    border: 0px ;
    margin: 0px;
    padding: 0px 15px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .page-link:hover {
    z-index: 2;
    color: #fff;
    background-color: #666;
  }
  .page-link:focus {
    z-index: 3;
    color: #FFFFFF;
    background-color: #999;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
  }
  .page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #0d6efd;
  }
  .page-item.disabled .page-link {
    color: #b9bdc2;
    pointer-events: none;
    background-color: #f7f8f8;
  }
  
  .alert-red{
    background-color:#dc3545;
    color:#fff;
  }
  
  .btn_reserve{border-radius: 1em; transition: all 0.2s ease-in-out;}
  .btn_reserve:hover{background-color: #ffffff; box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.08) !important; border-color: #0d6efd !important;}
  .btn_reserve_sub{background-color: #e9ecef;   -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s;}
  .btn_reserve:hover .btn_reserve_sub{background-color: #ffc107;}
  .btn_reserve:focus{box-shadow: none;}

  .rounded-bottom-2{border-radius: 0 0 1em 1em;}


  /**tree view**/

  .tree, .tree ul {
    margin:0;
    padding:0;
    list-style:none;
  }
  .tree ul {
      margin-right:1em;
      position:relative
  }
  .tree ul ul {
      margin-right:.5em
  }
  .tree ul:before {
      content:"";
      display:block;
      width:0;
      position:absolute;
      top:0;
      bottom:0;
      right:0;
      border-right:1px solid
  }
  .tree li {
      margin:0;
      padding:0 1em;
      line-height:2em;
      color:#006eff;
      /*font-weight:700;*/
      position:relative
  }
  .tree ul li:before {
      content:"";
      display:block;
      width:10px;
      height:0;
      border-top:1px solid;
      margin-top:-1px;
      position:absolute;
      top:1em;
      right:0
  }
  .tree ul li:last-child:before {
      background:#fff;
      height:auto;
      top:1em;
      bottom:0
  }
  .indicator {
      margin-right:5px;
  }
  .tree li a {
      text-decoration: none;
      color:#006eff;
  }
  .tree li button, .tree li button:active, .tree li button:focus {
      text-decoration: none;
      color:#006eff;
      border:none;
      background:transparent;
      margin:0px 0px 0px 0px;
      padding:0px 0px 0px 0px;
      outline: 0;
  }

/***scroll***/

  /* width */
::-webkit-scrollbar {
  width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #fff; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #ccc; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #888; 
}


@media (min-width: 992px) {
    body {
      overflow: auto !important;
    }
    main {
      margin-right: var(--offcanvas-width);
    }
    /* this is to remove the backdrop */
    .offcanvas-backdrop::before {
      display: none;
    }
    .sidebar-nav {
      -webkit-transform: none;
      transform: none;
      visibility: visible !important;
      height: calc(100% - var(--topNavbarHeight));
      top: var(--topNavbarHeight);
    }
    .backdrop{
      display: none !important;
    }

  }