@import url(https://fonts.bunny.net/css?family=roboto:300);

/* Workspace */

.workspace {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #232228;
}

.workspace-canvas {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
      background-image: radial-gradient(circle, rgba(175, 208, 84, .25) 1px, rgba(0, 0, 0, 0) 1px);
    background-size: 20px 20px;
    background-position: center center;
    background-repeat: repeat;
}

/* Workspace Canvas */
.canvas {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-image: radial-gradient(circle, rgba(0, 212, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: center center;
    background-repeat: repeat;
}

.drop-zone {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #00d4ff;
    font-size: 1.2rem;
    pointer-events: none;
}

.canvas.drag-over {
    background-color: rgba(0, 212, 255, 0.1);
}

.workspace-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: auto;

    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8em 0.5em 0em 1.5em;

      .date {
        color: #ddd;
      }

      svg {
        color: #fff;
        width: 2.5rem;
        cursor: pointer;
      }

      .card-title {
        color: #fff;
        font-size: 1.25rem;
        text-transform: capitalize;
      }

      .card-icon {
        color: #fff;
        font-size: 1.25rem;
      }

      .card-image {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
        border-radius: 2.25rem;
      }

      .card {
        position: relative;
        max-width: 20rem;
        min-height: 20rem;
        width: 90%;
        display: grid;
        place-content: center;
        place-items: center;
        text-align: center;
        position: relative;
        box-shadow: 1px 12px 25px rgb(0 0 0 / 78%);
        border-radius: 2.25rem;
      }
}

/* Workspace Container */
.workspace-container {
    display: grid;
    grid-template-columns: 300px 1fr 250px;
    grid-template-rows: 100vh;
    font-family: "Nunito", sans-serif;
    
    color: #fff;
    overflow: hidden;
}

.body {
      position: absolute;
      width: 100%;
      display: block;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 0.7em 1.25em 0.5em 1.5em;
      background-image: radial-gradient(circle, rgba(175, 208, 84, .25) 1px, rgba(0, 0, 0, 0) 1px);
      background-size: 40px 40px;
      background-attachment:fixed;

      h3 {
        color: #fff;
        font-size: 1.375rem;
        margin-top: 0.625em;
        margin-bottom: 0.188em;
        text-transform: capitalize;
        font-weight: 600;
      }

      p {
        color: #ddd;
        font-size: 1rem;
        letter-spacing: 0.031rem;
      }
      .progress {
        margin-top: 0.938rem;

        .progress-bar {
          position: relative;
          width: 100%;
          background: #363636;
          height: 0.313rem;
          display: block;
          border-radius: 3.125rem;

          &:after {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            height: 100%;
            display: block;
            border-radius: 3.125rem;
          }
        }
        span:first-of-type {
          color: #fff;
          text-align: left;
          font-weight: 600;
          width: 100%;
          display: block;
          margin-bottom: 0.313rem;
        }

        span {
          margin-top: 0.313rem;
          text-align: right;
          display: block;
          color: #fff;
        }
    }
}

.footer {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      border-top: 0.063rem solid #292929;
      display: flex;
      justify-content: space-between;
      padding: 0.7em 1.25em 0.5em 1.5em;
      background: #151419;
      border-bottom-left-radius: 2.25rem;
      border-bottom-right-radius: 2.25rem;

      ul {
        display: flex;
        align-items: center;

        li {
          list-style-type: none;
          display: flex;
          margin-right: -0.625rem;

          img {
            border-radius: 50%;
            width: 1.875rem;
            height: 1.875rem;
            object-fit: cover;
          }
        }
      }

      .btn-add {
        width: 1.375rem;
        height: 1.375rem;
        border-radius: 50%;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;

        svg {
          width: 1rem;
        }
      }

      .btn-countdown {
        background: #222127;
        color: #fff;
        border-radius: 2em;
        padding: 0.625rem 1.5rem;
      }
    }

  .green {
    background: radial-gradient(
      ellipse at right top,
      #107667ed 0%,
      #151419 47%,
      #151419 100%
    );

    &:before {
      background: linear-gradient(
          45deg,
          #232228,
          #232228,
          #232228,
          #232228,
          #01c3a8
        )
        border-box;
    }
    .btn-add {
      background: #00b894;
    }
    .progress-bar:after {
      width: 90%;
      background: #00b894;
    }

    .btn-countdown {
      &:hover {
        background: #00b894;
      }
    }
  }

  .blue {
    background: radial-gradient(
      ellipse at right top,
      #00458f8f 0%,
      #151419 45%,
      #151419 100%
    );

    &:before {
      background: linear-gradient(
          45deg,
          #232228,
          #232228,
          #232228,
          #232228,
          #1890ff
        )
        border-box;
    }
    .btn-add {
      background: #1890ff;
    }
    .progress-bar:after {
      width: 20%;
      background: #0984e3;
    }
    .btn-countdown {
      &:hover {
        background: #0984e3;
      }
    }
  }

  .orange {
    background: radial-gradient(
      ellipse at right top,
      #ffb74194 0%,
      #151419 47%,
      #151419 100%
    );

    &:before {
      background: linear-gradient(
          45deg,
          #232228,
          #232228,
          #232228,
          #232228,
          #ffb741
        )
        border-box;
    }
    .btn-add {
      background: #ffb741;
    }
    .progress-bar:after {
      width: 30%;
      background: #ffb741;
    }

    .btn-countdown {
      &:hover {
        background: #ffb741;
      }
    }
  }

  .red {
    background: radial-gradient(
      ellipse at right top,
      #a63d2a82 0%,
      #151419 47%,
      #151419 100%
    );

    &:before {
      background: linear-gradient(
          45deg,
          #232228,
          #232228,
          #232228,
          #232228,
          #a63d2a
        )
        border-box;
    }
    .btn-add {
      background: #a63d2a;
    }
    .progress-bar:after {
      width: 50%;
      background: #a63d2a;
    }

    .btn-countdown {
      &:hover {
        background: #a63d2a;
      }
    }
  }


/* Toolbar/Asset Palette */
.toolbar {
    background: transparent;
    border-right: 2px solid #444;
    padding: 20px;
    overflow-y: auto;
}

.toolbar h1 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: #00d4ff;
    text-align: center;
}

.toolbar h3 {
    font-size: 1rem;
    margin-bottom: 15px;
    color: #fff;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
}

/* Toolbar Controls */
.toolbar-controls {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mode-btn, .action-btn {
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.mode-btn {
    background: #3a3a3a;
    color: #ccc;
    border: 2px solid #555;
}

.mode-btn.active {
    background: #00d4ff;
    color: #1a1a1a;
    border-color: #00d4ff;
}

.mode-btn:hover {
    background: #4a4a4a;
    border-color: #00d4ff;
}

.action-btn {
    background: #4a4a4a;
    color: #fff;
    border: 1px solid #666;
}

.action-btn:hover {
    background: #5a5a5a;
    border-color: #00d4ff;
}

.action-btn.danger {
    background: #a63d2a;
    border-color: #a63d2a;
}

.action-btn.danger:hover {
    background: #c44a33;
}

.asset-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.asset-item {
    background: #3a3a3a;
    border: 2px solid #555;
    border-radius: 8px;
    padding: 15px 10px;
    text-align: center;
    cursor: grab;
    transition: all 0.3s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.asset-item:hover {
    background: #4a4a4a;
    border-color: #00d4ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
}

.asset-item:active {
    cursor: grabbing;
}

.asset-icon {
    font-size: 2rem;
    margin-bottom: 8px;
    display: block;
}

.asset-item span {
    font-size: 0.8rem;
    color: #ccc;
    display: block;
}


/* Connection Layer */
.connection-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.connection-line {
    stroke: #00d4ff;
    stroke-width: 2;
    fill: none;
    marker-end: url(#arrowhead);
}

.connection-line.selected {
    stroke: #ffd93d;
    stroke-width: 3;
}

.connection-line.temporary {
    stroke: #ff6b6b;
    stroke-dasharray: 5,5;
    animation: dash 1s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: -10;
    }
}

.mode-hint {
    font-size: 0.9rem;
    color: #888;
    margin-top: 10px;
}

/* Dropped Assets */
.dropped-asset {
    position: absolute;
    background: #101010;
    border: 2px solid #00d4ff;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    cursor: move;
    min-width: 80px;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
    transition: all 0.3s ease;
    -webkit-user-select: none;
    --webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.dropped-asset:hover {
    border-color: #ff6b6b;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.dropped-asset.selected {
    border-color: #ffd93d;
    box-shadow: 0 4px 12px rgba(255, 217, 61, 0.5);
}

.dropped-asset .asset-icon {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.dropped-asset span {
    font-size: 0.7rem;
    color: #ccc;
    display: block;
}

.dropped-asset.connecting {
    border-color: #ffd93d;
    box-shadow: 0 4px 12px rgba(255, 217, 61, 0.5);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Properties Panel */
.properties-panel {
    background: transparent;
    border-left: 2px solid #444;
    padding: 20px;
    overflow-y: auto;
}

.properties-panel h3 {
    font-size: 1rem;
    margin-bottom: 15px;
    color: #00d4ff;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
}

.property-group {
    margin-bottom: 15px;
}

.property-group label {
    display: block;
    font-size: 0.8rem;
    color: #ccc;
    margin-bottom: 5px;
}

.property-group input, .property-group select {
    width: 100%;
    padding: 8px;
    background: transparent;
    border: 1px solid #555;
    border-radius: 4px;
    color: #fff;
    font-size: 0.8rem;
}

.property-group input:focus, .property-group select:focus {
    outline: none;
    border-color: #00d4ff;
}

/* Asset Type Specific Colors */
.router-icon { color: #ff6b6b; }
.switch-icon { color: #4ecdc4; }
.firewall-icon { color: #45b7d1; }
.modem-icon { color: #f9ca24; }
.server-icon { color: #6c5ce7; }
.desktop-icon { color: #a29bfe; }
.laptop-icon { color: #fd79a8; }
.mobile-icon { color: #00b894; }
.cloud-icon { color: #0984e3; }
.database-icon { color: #e17055; }
.printer-icon { color: #81ecec; }
.camera-icon { color: #fab1a0; }
.iot-icon { color: #00cec9; }
.vpn-icon { color: #a29bfe; }
.loadbalancer-icon { color: #fdcb6e; }

/* Zone Colors */
.dmz-icon { color: #ff7675; }
.internal-icon { color: #74b9ff; }
.guest-icon { color: #a29bfe; }
.secure-icon { color: #00b894; }
.public-icon { color: #55a3ff; }
.quarantine-icon { color: #e84393; }
.management-icon { color: #fdcb6e; }
.backup-icon { color: #6c5ce7; }

/* Threat Colors */
.malware-icon { color: #d63031; }
.intrusion-icon { color: #e17055; }
.vulnerability-icon { color: #fdcb6e; }
.breach-icon { color: #fd79a8; }
.phishing-icon { color: #00cec9; }
.ransomware-icon { color: #2d3436; }
.ddos-icon { color: #0984e3; }
.insider-icon { color: #636e72; }
.apt-icon { color: #e84393; }
.mitm-icon { color: #a29bfe; }

/* Zone Styling */
.zone-item {
    border: 2px dashed #666;
    background: rgba(116, 185, 255, 0.1);
}

.zone-item:hover {
    background: rgba(116, 185, 255, 0.2);
    border-color: #74b9ff;
}

.threat-item {
    border: 2px solid #d63031;
    background: rgba(214, 48, 49, 0.1);
}

.threat-item:hover {
    background: rgba(214, 48, 49, 0.2);
    border-color: #ff7675;
}

.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 1;
}

/* Network Zones */
.network-zone {
   position: absolute;
    border: 3px dashed;
    border-radius: 15px;
    background: transparent;
    pointer-events: none;
    z-index: 0;
    min-width: 200px;
    min-height: 150px;
}

.network-zone.dmz-zone {
    border-color: #ff7675;
    background: rgba(255, 118, 117, 0.1);
}

.network-zone.internal-zone {
    border-color: #74b9ff;
    background: rgba(116, 185, 255, 0.1);
}

.network-zone.guest-zone {
    border-color: #a29bfe;
    background: rgba(162, 155, 254, 0.1);
}

.network-zone.secure-zone {
    border-color: #00b894;
    background: rgba(0, 184, 148, 0.1);
}

.network-zone.public-zone {
    border-color: #55a3ff;
    background: rgba(85, 163, 255, 0.1);
}

.network-zone.quarantine-zone {
    border-color: #e84393;
    background: rgba(232, 67, 147, 0.1);
}

.network-zone.management-zone {
    border-color: #fdcb6e;
    background: rgba(253, 203, 110, 0.1);
}

.network-zone.backup-zone {
    border-color: #6c5ce7;
    background: rgba(108, 92, 231, 0.1);
}

/* Risk Assessment Styles */
.risk-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: none;
}

.risk-panel {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 300px;
    background: #2d2d2d;
    border: 2px solid #00d4ff;
    border-radius: 10px;
    padding: 20px;
    z-index: 1001;
}

.risk-score {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin: 10px 0;
    padding: 20px;
    border-radius: 10px;
}

.risk-low { background: #00b894; color: white; }
.risk-medium { background: #fdcb6e; color: #2d3436; }
.risk-high { background: #e17055; color: white; }
.risk-critical { background: #d63031; color: white; }

.compliance-badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    margin: 2px;
}

.compliance-pass { background: #00b894; color: white; }
.compliance-fail { background: #d63031; color: white; }
.compliance-partial { background: #fdcb6e; color: #2d3436; }

.network-zone .zone-label {
    position: absolute;
    top: 10px;
    left: 15px;
    font-weight: bold;
    font-size: 0.9rem;
    color: inherit;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 10px;
    border-radius: 5px;
}

/* Asset Groups */
.asset-group {
    position: absolute;
    border: 2px solid #00d4ff;
    border-radius: 10px;
    background: transparent;
    pointer-events: none;
    z-index: 0;
    min-width: 120px;
    min-height: 100px;
}

.asset-group .group-label {
    position: absolute;
    top: -15px;
    left: 10px;
    background: #00d4ff;
    color: #1a1a1a;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: bold;
}

/* Threat Indicators */
.threat-indicator {
    position: absolute;
    border: 2px solid #d63031;
    border-radius: 50%;
    background: rgba(214, 48, 49, 0.9);
    color: white;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    animation: threatPulse 2s infinite;
}

@keyframes threatPulse {
    0% { box-shadow: 0 0 0 0 rgba(214, 48, 49, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(214, 48, 49, 0); }
    100% { box-shadow: 0 0 0 0 rgba(214, 48, 49, 0); }
}

.threat-indicator.malware { background: rgba(214, 48, 49, 0.9); }
.threat-indicator.intrusion { background: rgba(225, 112, 85, 0.9); }
.threat-indicator.vulnerability { background: rgba(253, 203, 110, 0.9); }
.threat-indicator.breach { background: rgba(253, 121, 168, 0.9); }

/* Responsive Design */
@media (max-width: 1024px) {
    .workspace-container {
        grid-template-columns: 250px 1fr 200px;
    }
    
    .asset-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .workspace-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
    }
    
    .toolbar {
        border-right: none;
        border-bottom: 2px solid #444;
        max-height: 200px;
    }
    
    .properties-panel {
        border-left: none;
        border-top: 2px solid #444;
        max-height: 150px;
    }
}

.profiles{
  --size: 200px;
  --img-clip: "M 0 -50 L 200 -50 L 200 150 C 100 150 0 250 0 150 Z"; /* unfortunatly it isn't possible (as far as I know) to use custom properties in clip paths */
  --img-shadow: drop-shadow(5px 5px 2px rgba(0 0 0 / 0.5));
  --name-txt-clr: #EEE;
  --bg-clr: steelblue;  /* only displayed if no background image defined */
  --bg-blur: 0;         /* background image default blur */
  --bg-blur-hover: 20px; /* background image blur on hover */
  
  font-family: 'Roboto', sans-serif;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols,1),var(--size));
  gap: 2rem;
  margin: 20vh auto;
  width: fit-content;
}
@media (min-width: 500px){
  .profiles{
    --grid-cols: 2 ;
  }
}
@media (min-width: 860px){
  .profiles{
    --grid-cols: 4 ;
  }
}
.avatar{
  position: relative;
  width: var(--size);
  height: var(--size); /* for older browsers */
  aspect-ratio: 1;
}
.avatar-img {
  clip-path: path(var(--img-clip));
}

.avatar-img::before{
  content: '';
  position: absolute;
  display: blocl;
  inset: 50% 0 0 0;
  z-index: -1;
  border-radius: 20px;
  background-color: var(--bg-clr); /* fallback if image not defined as custom property */
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
  filter: blur(var(--bg-blur));
  transition: filter 300ms ease-in-out;
}
.avatar-img > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 300ms, filter 300ms;
  transform-origin: bottom;
  scale: var(--img-scale, .9);
  filter: var(--img-shadow);  
}

.avatar > p{
  font-size: .9rem;
  color: var(--name-txt-clr);
  position: absolute;
  bottom: .5rem;
  right: 0;
  translate: 0 var(--name-y,-50px);
  opacity: var(--name-opacity,0);
  z-index: -1;
  transition-property: translate, opacity;
  transition-delay: 150ms;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.47, 1.64, 0.41, 0.8), ease-in-out;
}

/* all hover effects as custom properties */
.avatar:hover{
  --img-scale: 1.1;
  --img-shadow: drop-shadow(10px 15px 4px rgba(0 0 0 / 0.5));
  --name-y: 0;
  --name-opacity: 1;
  --bg-blur: var(--bg-blur-hover);
}


/* general styling not related to this demo */
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --clr-bg: #222;
  --clr-primary: #f5f5f5;
  --clr-secondary: #075985;
  --clr-cta: rgb(175, 208, 84);
}
html {
  background-color: var(--clr-bg);
  font-family: system-ui;
  font-family: system-ui;
}

body {
  min-height: 100svh;
  /*
  display: grid;
  place-content: center;
*/
  gap: 1.5rem;
  /*font-size: clamp(0.9rem, 2.5vw,1.4rem);*/
  color: var(--clr-primary);
  padding: 1rem;
  background-image: radial-gradient(circle, rgba(175, 208, 84, .25) 1px, rgba(0, 0, 0, 0) 1px);
  background-size: 40px 40px;
  background-attachment:fixed;
}
h1 {
  font-size: clamp(1rem, 2.5vw + 0.25rem, 1.2rem);
  font-weight: 500;
  line-height: 1.6;
}
code,
pre {
  display: inline-block;
  color: #38bdf8;
  border: 1px solid hsl(from var(--clr-primary) h s 50% / 0.5);
  padding: 0.5rem 1rem;
  border-radius: 5px;
}
pre {
  white-space: pre-wrap;
}
em {
  font-size: 0.8rem;
}
body::after {
  content: "";
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: 32px;
  height: 32px;
  background-size: cover;
  background-image: url('');
}
.note{
  font-size: 0.8rem;
  font-style: italic;
}

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

.clearfix:after {
    clear: both;
}
.clearfix {
    /* *zoom: 1; */
    zoom: normal;
}

.container {
    position: relative;
    margin: 0px auto;
    padding: 50px 0;
    clear: both;
}
@media only screen and (min-width: 1200px) {
    .container {
        width: 1210px;
    }
}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
    .container {
        width: 1030px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container {
        width: 682px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container {
        width: 428px;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 479px) {
    .container {
        width: 320px;
        margin: 0 auto;
    }
}

.mcd-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #FFF;
  /*height: 100px;*/
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  
  /* == */
  width: 250px;
  /* == */
}
.mcd-menu li {
  position: relative;
  /*float:left;*/
}
.mcd-menu li a {
  display: block;
  text-decoration: none;
  padding: 12px 20px;
  color: #777;
  /*text-align: center;
  border-right: 1px solid #E7E7E7;*/
  
  /* == */
  text-align: left;
  height: 36px;
  position: relative;
  border-bottom: 1px solid #EEE;
  /* == */
}
.mcd-menu li a i {
  /*display: block;
  font-size: 30px;
  margin-bottom: 10px;*/
  
  /* == */
  float: left;
  font-size: 20px;
  margin: 0 10px 0 0;
  /* == */
  
}
/* == */
.mcd-menu li a p {
  float: left;
  margin: 0 ;
}
/* == */

.mcd-menu li a strong {
  display: block;
  text-transform: uppercase;
}
.mcd-menu li a small {
  display: block;
  font-size: 10px;
}

.mcd-menu li a i, .mcd-menu li a strong, .mcd-menu li a small {
  position: relative;
  
  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
}
.mcd-menu li:hover > a i {
    opacity: 1;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
    -o-animation: moveFromTop 300ms ease-in-out;
    animation: moveFromTop 300ms ease-in-out;
}
.mcd-menu li:hover a strong {
    opacity: 1;
    -webkit-animation: moveFromLeft 300ms ease-in-out;
    -moz-animation: moveFromLeft 300ms ease-in-out;
    -ms-animation: moveFromLeft 300ms ease-in-out;
    -o-animation: moveFromLeft 300ms ease-in-out;
    animation: moveFromLeft 300ms ease-in-out;
}
.mcd-menu li:hover a small {
    opacity: 1;
    -webkit-animation: moveFromRight 300ms ease-in-out;
    -moz-animation: moveFromRight 300ms ease-in-out;
    -ms-animation: moveFromRight 300ms ease-in-out;
    -o-animation: moveFromRight 300ms ease-in-out;
    animation: moveFromRight 300ms ease-in-out;
}

.mcd-menu li:hover > a {
  color: #e67e22;
}
.mcd-menu li a.active {
  position: relative;
  color: #e67e22;
  border:0;
  /*border-top: 4px solid #e67e22;
  border-bottom: 4px solid #e67e22;
  margin-top: -4px;*/
  box-shadow: 0 0 5px #DDD;
  -moz-box-shadow: 0 0 5px #DDD;
  -webkit-box-shadow: 0 0 5px #DDD;
  
  /* == */
  border-left: 4px solid #e67e22;
  border-right: 4px solid #e67e22;
  margin: 0 -4px;
  /* == */
}
.mcd-menu li a.active:before {
  content: "";
  position: absolute;
  /*top: 0;
  left: 45%;
  border-top: 5px solid #e67e22;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;*/
  
  /* == */
  top: 42%;
  left: 0;
  border-left: 5px solid #e67e22;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  /* == */
}

/* == */
.mcd-menu li a.active:after {
  content: "";
  position: absolute;
  top: 42%;
  right: 0;
  border-right: 5px solid #e67e22;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
/* == */

@-webkit-keyframes moveFromTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -o-transform: translateY(200%);
        transform: translateY(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
        transform: translateY(0%);
    }
}
@-webkit-keyframes moveFromLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(200%);
        -moz-transform: translateX(200%);
        -ms-transform: translateX(200%);
        -o-transform: translateX(200%);
        transform: translateX(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}
@-webkit-keyframes moveFromRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(-200%);
        -moz-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
        -o-transform: translateX(-200%);
        transform: translateX(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}

.mcd-menu li ul,
.mcd-menu li ul li ul {
  position: absolute;
  height: auto;
  min-width: 200px;
  padding: 0;
  margin: 0;
  background: #FFF;
  border-top: 4px solid #e67e22;
  opacity: 0;
  visibility: hidden;
  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
  /*top: 130px;*/
  z-index: 1000;
  
  /* == */
  left:280px;
  top: 0px;
  border-left: 4px solid #e67e22;
  /* == */
}
.mcd-menu li ul:before {
  content: "";
  position: absolute;
  /*top: -8px;
  left: 23%;
  border-bottom: 5px solid #e67e22;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;*/
  
  /* == */
  top: 25px;
  left: -9px;
  border-right: 5px solid #e67e22;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  /* == */
}
.mcd-menu li:hover > ul,
.mcd-menu li ul li:hover > ul {
  display: block;
  opacity: 1;
  visibility: visible;
  /*top: 100px;*/
  
  /* == */
  left:250px;
  /* == */
}
/*.mcd-menu li ul li {
  float: none;
}*/
.mcd-menu li ul li a {
  padding: 10px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #EEE;
  
  /* == */
  height: auto;
  /* == */
}
.mcd-menu li ul li a i {
  font-size: 16px;
  display: inline-block;
  margin: 0 10px 0 0;
}
.mcd-menu li ul li ul {
  left: 230px;
  top: 0;
  border: 0;
  border-left: 4px solid #e67e22;
}  
.mcd-menu li ul li ul:before {
  content: "";
  position: absolute;
  top: 15px;
  /*left: -14px;*/
  /* == */
  left: -9px;
  /* == */
  border-right: 5px solid #e67e22;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}
.mcd-menu li ul li:hover > ul {
  top: 0px;
  left: 200px;
}



/*.mcd-menu li.float { float: right; }*/
.mcd-menu li a.search {
  /*padding: 29px 20px 30px 10px;*/
  padding: 10px 10px 15px 10px;
  clear: both;
}
.mcd-menu li a.search i {
  margin: 0;
  display: inline-block;
  font-size: 18px;
}
.mcd-menu li a.search input {
  border: 1px solid #EEE;
  padding: 10px;
  background: #FFF;
  outline: none;
  color: #777;
  
  /* == */
  width:170px;
  float:left;
  /* == */
}
.mcd-menu li a.search button {
  border: 1px solid #e67e22;
  /*padding: 10px;*/
  background: #e67e22;
  outline: none;
  color: #FFF;
  margin-left: -4px;
  
  /* == */
  float:left;
  padding: 10px 10px 11px 10px;
  /* == */
}
.mcd-menu li a.search input:focus {
  border: 1px solid #e67e22;
}


.search-mobile { 
	display:none !important;
	background:#e67e22;
	border-left:1px solid #e67e22;
	border-radius:0 3px 3px 0;
}
.search-mobile i { 
	color:#FFF; 
	margin:0 !important;
}


@media only screen and (min-width: 960px) and (max-width: 1199px) {
    .mcd-menu {
		margin-left:10px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .mcd-menu {
		width: 200px;
	}
	.mcd-menu li a {
		height:30px;
	}
	.mcd-menu li a i {
		font-size: 22px;
	}
	.mcd-menu li a strong {
		font-size: 12px;
	}
	.mcd-menu li a small {
		font-size: 10px;
	}	
	.mcd-menu li a.search input {
		width: 120px;
		font-size: 12px;
	}
	.mcd-menu li a.search buton{
		padding: 8px 10px 9px 10px;
	}
	.mcd-menu li > ul {
		min-width:180px;
	}
	.mcd-menu li:hover > ul {
		min-width:180px;
		left:200px;
	}
	.mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
		min-width:150px;
	}
	.mcd-menu li ul li:hover > ul {
		left:180px;
		min-width:150px;
	}
	.mcd-menu li ul li ul li:hover > ul {
		left:150px;
		min-width:150px;
	}
	.mcd-menu li ul a {
		font-size:12px;
	}
	.mcd-menu li ul a i {
		font-size:14px;
	}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	.mcd-menu { 
		width: 50px;
	}
	.mcd-menu li a { 
		position: relative;
		padding: 12px 16px;
		height:20px;
	}
	.mcd-menu li a small { 
		display: none;
	}
	.mcd-menu li a strong { 
		display: none;
	}
	.mcd-menu li a:hover strong,.mcd-menu li a.active strong {
		display:block;
		font-size:10px;
		padding:3px 0;
		position:absolute;
		bottom:0px;
		left:0;
		background:#e67e22;
		color:#FFF;
		min-width:100%;
		text-transform:lowercase;
		font-weight:normal;
		text-align:center;
	}
	.mcd-menu li .search { 
		display: none;
	}
	
	.mcd-menu li > ul {
		min-width:180px;
		left:70px;
	}
	.mcd-menu li:hover > ul {
		min-width:180px;
		left:50px;
	}
	.mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
		min-width:150px;
	}
	.mcd-menu li ul li:hover > ul {
		left:180px;
		min-width:150px;
	}
	.mcd-menu li ul li ul li > ul {
		left:35px;
		top: 45px;
		border:0;
		border-top:4px solid #e67e22;
	}
	.mcd-menu li ul li ul li > ul:before {
		left:30px;
		top: -9px;
		border:0;
		border-bottom:5px solid #e67e22;
		border-left:5px solid transparent;
		border-right:5px solid transparent;
	}
	.mcd-menu li ul li ul li:hover > ul {
		left:30px;
		min-width:150px;
		top: 35px;
	}
	.mcd-menu li ul a {
		font-size:12px;
	}
	.mcd-menu li ul a i {
		font-size:14px;
	}
	
}

@media only screen and (max-width: 479px) {
    .mcd-menu { 
		width: 50px;
	}
	.mcd-menu li a { 
		position: relative;
		padding: 12px 16px;
		height:20px;
	}
	.mcd-menu li a small { 
		display: none;
	}
	.mcd-menu li a strong { 
		display: none;
	}
	.mcd-menu li a:hover strong,.mcd-menu li a.active strong {
		display:block;
		font-size:10px;
		padding:3px 0;
		position:absolute;
		bottom:0px;
		left:0;
		background:#e67e22;
		color:#FFF;
		min-width:100%;
		text-transform:lowercase;
		font-weight:normal;
		text-align:center;
	}
	.mcd-menu li .search { 
		display: none;
	}
	
	.mcd-menu li > ul {
		min-width:180px;
		left:70px;
	}
	.mcd-menu li:hover > ul {
		min-width:180px;
		left:50px;
	}
	.mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
		min-width:150px;
	}
	.mcd-menu li ul li:hover > ul {
		left:180px;
		min-width:150px;
	}
	.mcd-menu li ul li ul li > ul {
		left:35px;
		top: 45px;
		border:0;
		border-top:4px solid #e67e22;
	}
	.mcd-menu li ul li ul li > ul:before {
		left:30px;
		top: -9px;
		border:0;
		border-bottom:5px solid #e67e22;
		border-left:5px solid transparent;
		border-right:5px solid transparent;
	}
	.mcd-menu li ul li ul li:hover > ul {
		left:30px;
		min-width:150px;
		top: 35px;
	}
	.mcd-menu li ul a {
		font-size:12px;
	}
	.mcd-menu li ul a i {
		font-size:14px;
	}
    
}