﻿/* PDCS Portal Form Styles 1.0 */

.form-containerx {
    margin: auto;
    width: 60%;
}
@media screen and (max-width:350px) {
    
    .ChangeDetails{
    padding: 12px 18px 12px  !important;
    font-size: 10px !important;
    }

    .ConfirmArrangement{
    padding: 12px 18px 12px !important; 
    font-size: 10px !important;
    }
}

input[type=password], input[type=text], input[type=date], input[type=date-euro], input[type=number], select, textarea {
    width: 100%;
    padding: 10px 18px;
    margin: 0 0 15px 0 !important;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    border-left: 5px solid;
    transition: border-color .5s ease-out;
    outline: none;
    color: #363636;   
}

.loginform  input:readonly:valid {
  border-left-color: palegreen;
  background-size: 20px;
}

.loginform input:required:valid, select:required:valid, textarea:required:valid, input:optional:valid, select:optional:valid {
  border-left-color: palegreen;  
}

.loginform input[disabled] {
    border-left-color: #E37B07 !important;
}

.loginform input:invalid, select:invalid, textarea:invalid {
  border-left-color: #E37B07;
}

.loginform input:placeholder-shown {
    border-left-color: #515656;
}

.loginform input:focus:placeholder-shown {
    border-left-color: #515656;
}

.loginform input:not(:focus):placeholder-shown {
    border-left-color: #515656;
}

.loginform input:required:valid {
  background-size: 20px;
}

.loginform input[disabled] {
    background-color: #eeeeee;
}

input[type=submit], input[type=button], input[type=button].ulagain, button.ulagain {
    width: 100%;
    background-color: #244D9E;
    color: white;
    padding: 12px 18px;
    /* margin: 8px 0; */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: none;
}

input[type=submit]:hover, input[type=button]:hover, input[type=button].ulagain:hover, button.uloader:hover {
    background-color: #00264B; 
    border-color:#00264B !important;
}

input[type=button] {
    width: 100%;
    background-color: #244D9E;
    color: white;
    padding: 12px 18px;
    /* margin: 8px 0; */
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

input[type=button]:hover {
    background-color: #00264B;
    border-color:#00264B !important;
}

input[type=submit].tokreturn {
    width: 100%;
    background-color: #244D9E;
    color: white;
    padding: 12px 18px;
    /* margin: 8px 0; */
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

input[type=submit].tokreturn:hover {
    background-color: #00264B;
}

/*Tooltip.css */
  .LoginToolTip  {

        display: none;
        position: absolute;
        background-color: #00264B;
        color: #fff;
        padding: 5px;
        border-radius: 3px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        z-index: 1;
        
      }
.capgap {
    margin-top: 8px;
}

.flaggap {
    margin: 0 0 4px 0;
}

/* Placeholders */

::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none;
    color:#2E2E2E !important;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none;
    color:#2E2E2E !important;
    opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none;
    color:#2E2E2E !important;
    opacity: 1;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: none !important;
    color:#2E2E2E !important;
}

::placeholder { /* Recent browsers */
    text-transform: none !important;
    color:#2E2E2E !important;
}


     input[disabled]#pdcs-submit,
     input[disabled]#pdcs-submit:hover,
     input[disabled]#pdcs-submit:active,
     input[disabled]#pdcs-submit:focus,
     input[disabled]#accno,
     input[disabled]#accno:hover,
     input[disabled]#accno:active,
     input[disabled]#accno:focus,
     input[disabled]#pdcs-signup,
     input[disabled]#pdcs-signup:hover,
     input[disabled]#pdcs-signup:active,
     input[disabled]#pdcs-signup:focus { 
        background: #CCCCCC;
        box-shadow: none;
        outline: none;
        opacity: 0.4;
        text-decoration: none;
}

input#pdcs-submit:focus:not([disabled]) {
    background-color: #ffffff;
    color: #244D9E;
    border: 2px solid #244D9E;
    outline: none; 
}


.genfield {
    margin: 0 !important;
}

/*Three state toggle switch CSS*/
.custom-button-primary:hover{
    overflow: hidden;
     border:3px solid #00264B!important;
}

.custom-button-secondary:hover{
    overflow: hidden;
     border:3px solid #00264B !important;
     background-color: #fff !important;
     color:#00264B !important;
     font-weight: bold !important;
}
 .custom-button-primary{
    overflow: hidden;
    border-radius: 10px;
    -webkit-box-shadow: 10px 15px 50px -10px rgba(0, 0, 0, 0.7);
    box-shadow: 10px 15px 50px -10px rgba(0, 0, 0, 0.7);;
     border:3px solid #244D9E!important;

}
.custom-button-secondary{
    overflow: hidden;
    border-radius: 10px;
    -webkit-box-shadow: 10px 15px 50px -10px rgba(0, 0, 0, 0.7);
    box-shadow: 10px 15px 50px -10px rgba(0, 0, 0, 0.7);
     border:3px solid #244D9E !important;
     background-color: #fff !important;
     color:#244D9E !important;
     font-weight: bold !important;
}


/*Three state toggle switch CSS*/
.theme-toggle {
    display: flex;
    align-items: flex-start;
    border:solid;
    border-width:2px;
    border-radius:25px;
    border-color:#5A5A5A;
    width:60px;
	height:30px;
	margin-top:5px;
	margin-left:10px;
    background-color:#fff;
    margin-right: 10px;
    z-index: -1;

 }
 /*Selector controls */
 .custom-radio-button:checked {
    width: 20px;
    height: 20px;
    border: 2px solid #fff !important;
    border-radius: 50%;
     justify-content: center;
    display: inline-block;
    align-items: center;
		margin-bottom:0px !important;
 }
 .custom-radio-button:not(:checked) {
    width: 20px;
    height: 20px;
    
    display: inline-block;
     justify-content: center;
    align-items: center;
 }
 /*Background Controls */
 .custom-radio-button input {
    opacity:0;
    width: 1px;
    height:1px;
 }
 
 .custom-radio-button .toggeled {
    width:100%;
    height: 100%;
     background-color: #fff;
     border-color: #5A5A5A;
    border-radius: 50%;
    border-width:10px;
    display: inline-block;
    opacity: 1;
   transition: all 0.3s;
     transform:translate(0);
	 	margin-left:10px;
			margin-top:3px !important;
 }
 #SpanNA{
     background-color:#fff;
    outline: 2px solid #5A5A5A;
	width:90%;
	height:90%;
		 	margin-left:1px;
			margin-top:4px !important;
 }
 #SpanNo{
    margin-left: -8px !important;
    opacity: 0;
 }


 /*New button Controls */
 .Tel-theme-toggle {
    display: flex;
    align-items: flex-start;
    border:solid;
    border-width:2px;
    border-radius:25px;
    border-color:#5A5A5A;
    width:60px;
	height:30px;
	margin-top:5px;
	margin-left:10px;
    background-color:#fff;
    margin-right: 10px;
    z-index: -1;
 }
 /*Selector controls */
 .Tel-custom-radio-button:checked {
    width: 20px;
    height: 20px;
    border: 2px solid #fff !important;
    border-radius: 50%;
     justify-content: center;
    display: inline-block;
    align-items: center;
		margin-bottom:0px !important;
 }
 .Tel-custom-radio-button:not(:checked) {
    width: 20px;
    height: 20px;
    
    display: inline-block;
     justify-content: center;
    align-items: center;
 }
 /*Background Controls */
 .Tel-custom-radio-button input {
    opacity:0;
    width: 1px;
    height:1px;
 }
 
 .Tel-custom-radio-button .Tel-toggeled {
    width:100%;
    height: 100%;
     background-color: #fff;
     border-color: #5A5A5A;
    border-radius: 50%;
    border-width:10px;
    display: inline-block;
    opacity: 1;
   transition: all 0.3s;
     transform:translate(0);
	 	margin-left:10px;
			margin-top:3px !important;
 }

 #TelSpanNo{
    margin-left: -8px !important;
    opacity: 0;
 }
 #TelSpanNA{
     background-color:#fff;
    outline: 2px solid #5A5A5A;
	width:90%;
	height:90%;
		 	margin-left:1px;
			margin-top:4px !important;
 }
 
 .NewCard-theme-toggle {
    display: flex;
    align-items: flex-start;
    border:solid;
    border-width:2px;
    border-radius:25px;
    border-color:#5A5A5A;
    width:60px;
	height:30px;
	margin-top:5px;
	margin-left:10px;
    background-color:#fff;
    margin-right: 10px;
    z-index: -1;
 }
 /*Selector controls */
 .NewCard-custom-radio-button:checked {
    width: 20px;
    height: 20px;
    border: 2px solid #fff !important;
    border-radius: 50%;
     justify-content: center;
    display: inline-block;
    align-items: center;
		margin-bottom:0px !important;
 }
 .NewCard-custom-radio-button:not(:checked) {
    width: 20px;
    height: 20px;
    
    display: inline-block;
     justify-content: center;
    align-items: center;
 }
 /*Background Controls */
 .NewCard-custom-radio-button input {
    opacity:0;
    width: 1px;
    height:1px;
    
 }
 .NewCard-custom-radio-button .NewCard-toggeled {
    width:100%;
    height: 100%;
     background-color: #fff;
     border-color: #5A5A5A;
    border-radius: 50%;
    border-width:10px;
    display: inline-block;
    opacity: 1;
   transition: all 0.3s;
     transform:translate(0);
	 	margin-left:10px;
			margin-top:3px !important;
			}

 #NewCardSpanNo{
    margin-left: -8px !important;
    opacity: 0;
 }
 #NewCardSpanNA{
    background-color:#fff;
    outline: 2px solid #5A5A5A;
	width:90%;
	height:90%;
		 	margin-left:1px;
             margin-top:4px !important;
 }
