:root {
    --module-color: #dd4a5c;   
    
    --sidebar-height: 250px;

    --swipe-area-height: 50px;
    
    --module-font-color-light-bg: #FFFFFF;   
    --module-header-bg-color: #dd4a5c; 
}

.alarm-container {
    position: absolute;
    width: 100%;
    top: -50px;
    -webkit-transition:  top 0.4s ease-in-out;
    -moz-transition:  top 0.4s ease-in-out;
    -ms-transition:  top 0.4s ease-in-out;
    -o-transition:  top 0.4s ease-in-out;
    transition:  top 0.4s ease-in-out;
    z-index: 1001;
    text-shadow: none !important;    
}

/* For disable draggable effect and do works properlly swipe events, without it is not working properlly */
.alarm-container *, .alarm-container *::after, .alarm-container *::before {
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-app-region: no-drag;  

  user-select: none;
}

.alarm-container.show {
  top: 0px;
}

.alarm-container.hide {
  top: calc(var(--swipe-area-height) * -1);
}
 
.alarm-container.open-sidebar {
    top: var(--sidebar-height);
}

/*.alarm-container.open-sidebar-full {
   top: 100vh;
}

.alarm-container.open-sidebar-full #sidebar {
    height: 100vh;
    top: -100vh;
}*/


.swipe-area {
    position: absolute;
    display: inline-flex;
    height: var(--swipe-area-height);
    left: 0;
    top: 0;
    width: 100%;    
    background-color: var(--module-color);
    opacity: 0.8;
    z-index: 0;
    align-items: center;
    cursor: pointer;
}
 
#sidebar {
    position: absolute;
    top: calc(var(--sidebar-height) * -1);
    background: #DF314D;
    width: 100%;
    height: var(--sidebar-height);
    box-sizing: border-box;
    overflow: auto;
}
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar ul li {
    width: 100%;
    margin: 0;
    display: inline-flex;
    align-items: center;
    border-bottom: 1px solid #C9223D;
    -webkit-transition:  background 0.3s ease-in-out;
    -moz-transition:  background 0.3s ease-in-out;
    -ms-transition:  background 0.3s ease-in-out;
    -o-transition:  background 0.3s ease-in-out;
    transition:  background 0.3s ease-in-out;
    border-bottom-style: solid;
    border-bottom-width: thin;
}


#sidebar ul li p,
.swipe-area p {
    margin: 0px;
    padding: 15px 20px;
    font-size: 16px;    
    color: white;
    text-decoration: none;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;       
    pointer-events: none; 
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
                                  
}

.swipe-area p.animation {
	-webkit-animation: tracking-in-contract-bck 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-contract-bck 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

#sidebar ul li:hover {
    background: #C9223D;
}

.main-content {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}
.main-content .content{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-left: 60px;
    width: 100%;
}

.main-content #sidebar-toggle {
    background:  var(--module-color);
    border-radius: 0px;
    display: block;
    position: relative;    
    float: left;
    width: 48px;
    height: 48px;
    margin-left: 10px;
}

.alarm-container.show .main-content #sidebar-toggle.animation {
    -webkit-animation: spinner 3s 1 linear;
    animation: spinner 3s 1 linear;
    perspective: 500px;
    transform-style: preserve-3d;
}

#sidebar ul li p.blink {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

.alarm-container span.bell {
    display: block;
    height: 100%;
    width: 100%;
	background-size: 100% 100%;
    color: transparent;
    background-image: url(../../../cbse/assets/images/alarm/bell-white.svg);
}

.alarm-container .btn-close {
	width: 20px;
	height: 20px;
	position: relative;
	overflow: hidden;
	text-indent: 100%;
	cursor: pointer;
	-webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: transparent;
}

.alarm-container .btn-close:hover, 
.alarm-container .btn-close:focus {
    outline: none;
}

.alarm-container .btn-close::before,
.alarm-container .btn-close::after {
	content: '';
	position: absolute;
	width: 3px;
	height: 60%;
	top: 50%;
	left: 50%;
	background: #fff;
}

.alarm-container .btn-close:hover::before,
.alarm-container .btn-close:hover::after {
	background: #000;
}

.alarm-container .btn-close::before {
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
}

.alarm-container .btn-close::after {
	-webkit-transform: translate(-50%,-50%) rotate(-45deg);
	transform: translate(-50%,-50%) rotate(-45deg);
}


.alarm-container button.btn-ack, 
.alarm-container button.btn-maintenance, 
.alarm-container button.btn-module,
.alarm-container button.btn-play,
.alarm-container button.btn-speaker {
    height: 48px;
    width: 48px;
    background-size: 48px;
    color: transparent;
    border-style: none;
    background-color: transparent;
    cursor: pointer;
}

.alarm-container button.btn-ack path{
    fill: #ffffff;
}

.alarm-container button.btn-ack {
    background-image: url(../../../cbse/assets/images/alarm/check-white.svg);
} 

.alarm-container button.btn-maintenance {
    background-image: url(../../../cbse/assets/images/alarm/calendar-white.svg);
}

.alarm-container button.btn-module {
    background-image: url(../../../cbse/assets/images/modules/inform-white.svg);
}

.alarm-container button.btn-play {
  -webkit-mask: url(../../../cbse/assets/images/visu/play.svg);
  mask: url(../../../cbse/assets/images/visu/play.svg);
  background-color: white;
}

.alarm-container button.btn-speaker {
  -webkit-mask: url(../../../cbse/assets/images/alarm/soundon.svg);
  mask: url(../../../cbse/assets/images/alarm/soundon.svg);
  background-color: white;
}

.alarm-container button.btn-speaker.btn-speaker-off {
  -webkit-mask: url(../../../cbse/assets/images/alarm/soundoff.svg);
  mask: url(../../../cbse/assets/images/alarm/soundoff.svg);
  background-color: white;
}


/*disabled click for buttons alarm*/
.alarm-container button.btn.disabled {
  pointer-events: none;
}


@keyframes spinner {    
     0%{-webkit-transform: rotateY(0deg); /* Safari prior 9.0 */
   transform: rotateY(0deg); /* Standard syntax */}
    
    100%{-webkit-transform: rotateY(360deg); /* Safari prior 9.0 */
   transform: rotateY(360deg); /* Standard syntax */}
   
 }

 @-webkit-keyframes spinner {    
     
     0%{-webkit-transform: rotateY(0deg); /* Safari prior 9.0 */
   transform: rotateY(0deg); /* Standard syntax */}
    
    100%{-webkit-transform: rotateY(360deg); /* Safari prior 9.0 */
   transform: rotateY(360deg); /* Standard syntax */}
   
 }

 

@keyframes animSlideDown {
    from { top: calc(var(--swipe-area-height) * -1); }
    to { top: var(--swipe-area-height) }
}


@keyframes blink-animation {
    to {
      visibility: hidden;
    }
  }
  @-webkit-keyframes blink-animation {
    to {
      visibility: hidden;
    }
  }
		
@-webkit-keyframes rotate {
    0%{-webkit-transform: rotateX(0deg); /* Safari prior 9.0 */
        transform: rotateX(0deg); /* Standard syntax */}
         
    100%{-webkit-transform: rotateX(360deg); /* Safari prior 9.0 */
    transform: rotateX(360deg); /* Standard syntax */}
}

@keyframes rotate {
    0%{-webkit-transform: rotateX(0deg); /* Safari prior 9.0 */
        transform: rotateX(0deg); /* Standard syntax */}
         
         100%{-webkit-transform: rotateX(360deg); /* Safari prior 9.0 */
        transform: rotateX(360deg); /* Standard syntax */}
}


/**
 * ----------------------------------------
 * animation focus-in-contract-bck
 * ----------------------------------------
 */
 @-webkit-keyframes focus-in-contract-bck {
    0% {
      letter-spacing: 1em;
      -webkit-transform: translateZ(300px);
              transform: translateZ(300px);
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(12px);
              transform: translateZ(12px);
      -webkit-filter: blur(0);
              filter: blur(0);
      opacity: 1;
    }
  }
  @keyframes focus-in-contract-bck {
    0% {
      letter-spacing: 1em;
      -webkit-transform: translateZ(300px);
              transform: translateZ(300px);
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(12px);
              transform: translateZ(12px);
      -webkit-filter: blur(0);
              filter: blur(0);
      opacity: 1;
    }
  }

/**
 * ----------------------------------------
 * animation tracking-in-contract-bck
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-contract-bck {
    0% {
      letter-spacing: 1em;
      -webkit-transform: translateZ(400px);
              transform: translateZ(400px);
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      opacity: 1;
    }
  }
  @keyframes tracking-in-contract-bck {
    0% {
      letter-spacing: 1em;
      -webkit-transform: translateZ(400px);
              transform: translateZ(400px);
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      opacity: 1;
    }
  }