/*
Custom CSS file
svs
*/

/*  SVS img icons Start */
/*  ---------------------------- */
.Img_Click_Plus:active {
  transform: scale(1.1);
}

.Img_Click_Minus:active {
  transform: scale(1.1);
}
/*  -------------------------- */
/*  SVS img icons End */




.svs-rotated-icon:hover{
    transition: all .3s linear;
    transform:rotate(90deg) translateY(1px);
    filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
}


/*OK1: .svs_rotated_icon:hover{*/
.svs_rotated_icon:not([disabled]):hover{
    transition: all .3s linear;
    transform:rotate(90deg) translateY(1px);
    filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
}
/*OK1: .svs_rotated_icon_container:has(.svs_rotated_icon:disabled) {*/
.svs_rotated_icon_container:has(.svs_rotated_icon[disabled]) {
    background-color: gray !important;
}



/*  -------------------------- */
/*  svs_3d_button1 icons Start */
/*  -------------------------- */
/* https://codepen.io/jemware/pen/kPoYbe */
.svs_3d_button1{
  position:relative;
  display:inline-block;
  margin:20px;
}
.svs_3d_button1 a{
  color:white;
  font-family:Helvetica, sans-serif;
  font-weight:bold;
  font-size:36px;
  text-align: center;
  text-decoration:none;
  background-color:#FFA12B;
  display:block;
  position:relative;
  padding:20px 40px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-shadow: 0px 1px 0px #000;
  filter: dropshadow(color=#000, offx=0px, offy=1px);
  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
  -moz-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
  box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.svs_3d_button1 a:active{
  top:10px;
  background-color:#F78900;
  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
/*  -moz-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3pxpx 0 #915100; */
  box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
}
.svs_3d_button1:after{
  content:"";
  height:100%;
  width:100%;
  padding:4px;
  position: absolute;
  bottom:-15px;
  left:-4px;
  z-index:-1;
  background-color:#2B1800;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
/*  -------------------------- */
/*  svs_3d_button1 icons End */
/*  -------------------------- */




    .svsTable td{
        cursor:pointer;
        background: -moz-linear-gradient(top, #ffffff, #D1E3E9);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#D1E3E9));
        text-align:center;
    }


    .svsTable td:hover{
        background: -moz-linear-gradient(top, #249ee4, #057cc0);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#249ee4), to(#057cc0));
    }
 
    .svsTable td:active
    {
        background: -moz-linear-gradient(top, #057cc0, #249ee4);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#057cc0), to(#249ee4));
    }
 
    #result{
        font-weight:bold;
        font-size:16pt;
    }

	
	#svs_stickyheader{
/*  shadow */
		-moz-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 5px 5px 5px black;
		-webkit-box-shadow: 5px 5px 5px black;
		box-shadow: 5px 5px 5px black;
/*		//dimensions */
		bottom: 8vh;
		left: 8vw;
		width: 84%;
		min-height: 100px;
/*		height: 10vh; */
		background: rgba(171, 205, 239, 0.88);
		color: black;
		padding: 5px;

	}		

	
	table#svsCusID{
		border: 0;
	}
	
	#svsCusID th, #svsCusID tr, #svsCusID td{
		border: 0;
	}
	
	#svsCusID td{
		min-width:50%;
		padding: 0px 5px 0px 30px;
		border: 0;
/*		//cellpadding: 50px;
		//border-spacing: 10px;
		//border-collapse: separate;
*/
	}



	table#svsStatusTable{
		border: 0;
	}

	#svsStatusTable table, #svsStatusTable	th, #svsStatusTable	tr, #svsStatusTable td{
		border: 0;
	}

	#svsStatusTable	td{
		min-width:25%;
/*2018b		min-width:50%; */
		padding: 0px 5px 0px 30px;
		border: 0;
	}

	input[type="text"].svsTextBlue{
		background-color:hsla(214, 100%, 90%, 0.7);
		max-width: 65%;
	}
	
	input[type="button"].svsButtonBlue{
	-moz-box-shadow:inset 0px 0px 0px 0px #dcecfb;
	-webkit-box-shadow:inset 0px 0px 0px 0px #dcecfb;
	box-shadow:inset 0px 0px 0px 0px #dcecfb;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bddbfa), color-stop(1, #80b5ea));
	background:-moz-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
	background:-webkit-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
	background:-o-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
	background:-ms-linear-gradient(top, #bddbfa 5%, #80b5ea 100%);
	background:linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bddbfa', endColorstr='#80b5ea',GradientType=0);
	background-color:#bddbfa;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	border:1px solid #84bbf3;
	display:inline-block;
	cursor:pointer;
	color:red; 
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	padding:8px 49px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
	}

	input[type="button"].svsButtonBlue:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #80b5ea), color-stop(1, #bddbfa));
	background:-moz-linear-gradient(top, #80b5ea 5%, #bddbfa 100%);
	background:-webkit-linear-gradient(top, #80b5ea 5%, #bddbfa 100%);
	background:-o-linear-gradient(top, #80b5ea 5%, #bddbfa 100%);
	background:-ms-linear-gradient(top, #80b5ea 5%, #bddbfa 100%);
	background:linear-gradient(to bottom, #80b5ea 5%, #bddbfa 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80b5ea', endColorstr='#bddbfa',GradientType=0);
	background-color:#80b5ea;
	}

	input[type="button"].svsButtonBlue:active {
	position:relative;
	top:1px;
	}

/*
 START OF kitt div PROCESS (Knight Rider)
 ----------------------------------------
USAGE:
 <div id='kitt'>
  <div class='kitt_one'></div>
  <div class='kitt_two'></div>
  <div class='kitt_three'></div>
  <div class='kitt_four'></div>
  <div class='kitt_five'></div>
  <div class='kitt_six'></div>
  <div class='kitt_seven'></div>
</div>

*/
#kitt {
/*
  position: absolute;
*/
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*
  margin: -75px 0 0 -620px;
 */
}
.kitt_one, .kitt_two, .kitt_three, .kitt_four, .kitt_five, .kitt_six, .kitt_seven {
  width: 80px;
  height: 50px;
/*
  background: red;
*/
  background: blue;
  margin: 0;
  display: inline-block;
/*
  -webkit-box-shadow: 0 0 30px red, inset 0 0 5px rgba(255,255,255, 0.5);
*/
  -webkit-box-shadow: 0 0 30px blue, inset 0 0 5px rgba(255,255,255, 0.5);
  border-radius: 5px;
  -webkit-animation-duration: 0.7s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}
.kitt_one {
   -webkit-animation-name: first ;
}
.kitt_two {
  -webkit-animation-name: second ;
}
.kitt_three {
  -webkit-animation-name: third ;
}
.kitt_four {
  -webkit-animation-name: fourth ;
}
.kitt_five {
  -webkit-animation-name: fifth ;
}
.kitt_six {
  -webkit-animation-name: sixth ;
}
.kitt_seven {
  -webkit-animation-name: seventh ;
}
@-webkit-keyframes first {
  0%   {opacity:0.2;}
  10%  {opacity:1;}
  20%  {opacity:0.2;}
  100% {opacity:0;}
}

@-webkit-keyframes second {
  0%   {opacity:0;}
  10%   {opacity:0.2;}
  20%  {opacity:1;}
  30%  {opacity:0.2;}
  100% {opacity:0;}
}
@-webkit-keyframes third {
  0%   {opacity:0;}
  20%  {opacity:0.2;}
  30%  {opacity:1;}
  40%  {opacity:0.2;}
  100% {opacity:0;}
}
@-webkit-keyframes fourth {
  0%   {opacity:0;}
  30%  {opacity:0.2;}
  40%  {opacity:1;}
  50%  {opacity:0.2;}
  100% {opacity:0;}
}
@-webkit-keyframes fifth {
  0%   {opacity:0;}
  40%  {opacity:0.2;}
  50%  {opacity:1;}
  60%  {opacity:0.2;}
  100% {opacity:0;}
}
@-webkit-keyframes sixth {
  0%   {opacity:0;}
  50%  {opacity:0.2;}
  60%  {opacity:1;}
  70%  {opacity:0.2;}
  100% {opacity:0;}
}
@-webkit-keyframes seventh {
  0%   {opacity:0;}
  60%  {opacity:0.2;}
  70%  {opacity:1;}
  80%  {opacity:0.2;}
  100% {opacity:0;}
}



/*  SVS RESPONSIVE HIDE - UNHIDE WITH CLASS */
/*  --------------------------------------- */

/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media screen and (min-width: 601px) {
  .svs_mobile_display{
      display:none !important;
  }
  .svs_desktop_display{
      display:flex !important;
      /*font-size: 80px;*/
  }
}
/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
  .svs_mobile_display{
      display:flex !important;
      color:green;
      /*color:green;*/
  }
  .svs_desktop_display{
      display:none !important;
      color:red;
      /*color:red;*/
  }
}
/*  --------------------------------------- */
/*  SVS RESPONSIVE HIDE - UNHIDE WITH CLASS */




/*
 STOP OF kitt div PROCESS (Knight Rider)
 ----------------------------------------
*/

/*
@media (max-width:799px) {
  .svs-resp-800 {
    flex-direction:column;
  }
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
*/