html{
    background-color: #f3f3f3;
    font: 10px;
    color:black;
    
    font-family: 'fc_paragraphregular';
}


.form-basic{
    width: 90%;
    margin: 0 auto;
    padding: 5px;
    box-sizing: border-box;
    background-color:  #ffffff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    font: bold 14px;
    text-align: center;


}

    .form-basic .form-row {
        text-align: left;
        font: 14px;
       
        height:45px;
     
    }

.form-basic .form-title-row{
    text-align: left;
    margin-bottom: 10px;
}

/* The form title */

.form-basic h1{
    display: inline-block;
    box-sizing: border-box;
    color:  #4c565e;
    font-size: 24px;
    padding: 0 10px 15px;
    border-bottom: 2px solid #6caee0;
    margin: 0;
}

.form-basic .form-row > label span{
    display: inline-block;
    box-sizing: border-box;
    color: black;   
    text-align: right;
    vertical-align: top;
    /*font-family: 'Microsoft Sans Serif';*/
    font-size: 14px;
    padding: 5px 5px;
    line-height:30px;
    text-shadow: black 0.1em 0.1em 0.2em;
}

    .form-basic input {
        color: black;
        box-sizing: border-box;
        box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
        font-size: 14px;
        border: 1px solid #dbdbdb;
        border-radius: 0.30rem;
        padding-top:-10px;
       
    }
      .form-basic span {
       
        padding-top:-10px;
        height:40px;
        font-size:16px;
    top: 13px;
}

    
      .form-basic input:focus {
                border-color: dodgerBlue;
                box-shadow: 0 0 8px 0 dodgerBlue;
        }

.form-basic input[type=text]{
    box-sizing: border-box;
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
    background-color:  #ffffff;
    box-shadow: 1px 2px 4px 1px rgba(0, 0, 0, 0.08);
    /*padding: 14px 15px 14px 40px;*/
    border: 1px solid #b6c3cd;
    color:black;
    outline: none;
    -webkit-appearance: none;
     border-radius: 0.25rem;
    font-size:16px;
    height:40px;


    line-height:40px;


}

.form-basic input[type=text]:focus{
   border-color: dodgerBlue;
   box-shadow: 0 0 8px 0 dodgerBlue;


}






.form-basic input[type=radio],
.form-basic input[type=checkbox]{
    box-shadow: none;
    width: auto;
}

.form-basic input[type=checkbox]{
    margin-top: 13px;
}

    .form-basic select {
        background-color: #ffffff;
        color: black;
        box-sizing: border-box;
        max-width: 500px;
        box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);      
        border: 1px solid #dbdbdb;
        border-radius: 0.25rem;
        font-size: 14px;
        line-height:30px;
        height:40px;
    }

    .form-basic select option {
      font-size: 16px;
      }


    .form-basic select:hover {
        border-color: dodgerBlue;
        box-shadow: 0 0 8px 0 dodgerBlue;
    }

    .form-basic textarea {
        color:black;
        box-sizing: border-box;
        width: 240px;
        box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
        /*font-family: 'Microsoft Sans Serif';*/
        font-size: 14px;
        /*padding: 5px;*/
        border: 1px solid #dbdbdb;
        resize: vertical;
        border-radius: 0.25rem;
    }

   .form-basic textarea:hover {
        border-color: dodgerBlue;
        box-shadow: 0 0 8px 0 dodgerBlue;
    }
   



.form-basic .form-radio-buttons{
    display:inline;
    vertical-align: top;
    
}

.form-basic .form-radio-buttons > div{
    margin-top: 10px;
    cursor: pointer;
}

    .form-basic .form-radio-buttons label span {
        margin-left: 8px;
        color: #5f5f5f;
        font-weight: normal;
        /*font-family: 'Microsoft Sans Serif';*/
        font-size: 14px;
        cursor: pointer;
    }

.form-basic .form-radio-buttons input{
    width: auto;

}

    .form-basic button {
        display: block;
        border-radius: 2px;
        background-color: #6caee0;
        color: #ffffff;
        font-weight: bold;
        box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
        padding: 5px 5px;
        border: 0;
        margin: 40px 183px 0;
        /*font-family: 'Microsoft Sans Serif';*/
        font-size: 12px;
        margin-top:10px;
    }


.radioButtonList label {
        display: inline;
         cursor: pointer;
    }
.ctlsearchinput{
    /*width: 230px;*/
    box-sizing: border-box;
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
    background-color:  #ffffff;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
    /*padding: 14px 15px 14px 40px;*/
    border: 1px solid #b6c3cd;
    border-right: 0;
    color:black;
    outline: none;
    -webkit-appearance: none;
     border-radius: 0.25rem;
    font-size:14px;
   
}

    .ctlsearchinput:focus {
        border-color: dodgerBlue;
        box-shadow: 0 0 8px 0 dodgerBlue;
    }



.ctlreqinput{
    width: 230px;
    box-sizing: border-box;
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
    background-color:  #ffffff;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
    padding: 14px 15px 14px 40px;
    border: 1px solid #b6c3cd;
    border-right: 0;
    color:black;
    outline: none;
    border-bottom-color:red;
    -webkit-appearance: none;
    border-radius: 0.25rem;
}

.ctlreqinput:focus {
        border-color: red;
        box-shadow: 0 0 8px 0 red;
    }


.ctladdnumbutton {
  
    background-image:url('../image/addnum.png');
    background-size:80%;
    background-repeat:no-repeat;
    background-position-x:center;
    background-position-y:center;
    background-color:DodgerBlue;
    border-style:dotted;
    color: white;    
    width:30px;
    height:24px;
    margin-left: -15px;
    cursor: pointer; 
    font-weight: bold;     
    box-shadow: 0 0 8px 0 blue;
    cursor:pointer;   
    border-bottom-right-radius : 0.25rem;

}

    .ctladdnumbutton:hover {
        border-color: dodgerBlue;
        box-shadow: 0 0 8px 0 dodgerBlue;
        background-color: #094FAA;
    }



    .ctldipbutton {
  
    background-image:url('../image/dipnum.png');
    background-size:80%;
    background-repeat:no-repeat;
    background-position-x:center;
    background-position-y:center;
    background-color:#cd5c5c;
    border-style:dotted;
    color: white;    
    width:30px;
    height:24px;
    margin-left: -15px;
    cursor: pointer; 
    font-weight: bold;     
    box-shadow: 0 0 8px 0 blue;
    cursor:pointer;   
    border-bottom-right-radius : 0.25rem;

}

    .ctldipbutton:hover {
        border-color: #cd5c5c;
        box-shadow: 0 0 8px 0 #cd5c5c;
        background-color: red;
    }


.ctladdmasterbutton {
    background-image: url('../image/addmaster.png');
    background-size: 80%;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-color: DodgerBlue;
    border-style: dotted;
    color: white;
    width: 30px;
    height: 24px;
    margin-left: -5px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 0 8px 0 blue;
    cursor: pointer;
    border-bottom-right-radius: 0.25rem;
    border-width: thin;
}

    .ctladdmasterbutton:hover {
        border-color: dodgerBlue;
        box-shadow: 0 0 8px 0 dodgerBlue;
        background-color: #094FAA;
    }



.ctlsearchbutton {
    background-image: url('../image/find.png');
    background-size: 80%;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-color: DodgerBlue;
    border-style: dotted;
    border-width: thin;
    color: white;
    width: 40px;
    height: 42px;
    margin-left: -40px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 0 8px 0 blue;
    cursor: pointer;
    border-bottom-right-radius: 0.25rem;
    border-width: thin;
}

    .ctlsearchbutton:hover {
        border-color: dodgerBlue;
        box-shadow: 0 0 8px 0 dodgerBlue;
        background-color: #094FAA;
    }


    .ctlscanbutton {
    background-image: url('../image/scanqrcode.png');
    background-size: 80%;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-color: DodgerBlue;
    border-style: dotted;
    border-width: thin;
    color: white;
    width: 40px;
    height: 42px;
    margin-left: -40px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 0 8px 0 blue;
    cursor: pointer;
    border-bottom-right-radius: 0.25rem;
    border-width: thin;
}

    .ctlscanbutton:hover {
        border-color: dodgerBlue;
        box-shadow: 0 0 8px 0 dodgerBlue;
        background-color: #094FAA;
    }

        .ctltakephotobutton {
    background-image: url('../image/takephoto.png');
    background-size: 80%;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-color: DodgerBlue;
    border-style: dotted;
    border-width: thin;
    color: white;
    width: 40px;
    height: 42px;
    margin-left: -5px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 0 8px 0 blue;
    cursor: pointer;
    border-bottom-right-radius: 0.25rem;
    border-width: thin;
}

    .ctltakephotobutton:hover {
        border-color: dodgerBlue;
        box-shadow: 0 0 8px 0 dodgerBlue;
        background-color: #094FAA;
    }


    .ctlfindbutton {
    background-image: url('../image/query.png');
    background-size: 30%;
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: center;
    background-color: #B9B7B7;
    width: 100px;
    height: 30px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 0 8px 0 blue;
    border-radius: 0.25rem;
    text-align: right;
    border-color: dodgerblue;
    border-style: solid;
    border-width: thin;
}

    .ctlfindbutton:hover {
        border-color: dodgerBlue;
        box-shadow: 0 0 8px 0 dodgerBlue;
        background-color: #A29F9F;
    }


.ctladdbutton {
    background-image: url('../image/newpage.png');
    background-size: 30%;
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: center;
    background-color: #B9B7B7;
    width: 100px;
    height: 30px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 0 8px 0 blue;
    border-radius: 0.25rem;
    text-align: right;
    border-color: dodgerblue;
    border-style: solid;
    border-width: thin;

}

    .ctladdbutton:hover {
        border-color: dodgerBlue;
        box-shadow: 0 0 8px 0 dodgerBlue;
        background-color: #A29F9F;
    }

.ctldelbutton {
    background-image: url('../image/delete.png');
    background-size:30%;
    background-repeat:no-repeat;
    background-position-x:left;
    background-position-y:center;
    background-color:#B9B7B7;
    width:100px;
    height:30px;
    cursor:pointer;
    font-weight: bold;     
    box-shadow: 0 0 8px 0 blue;
    border-radius : 0.25rem;
    text-align:right;
    border-color: dodgerblue;
    border-style:solid;
    border-width: thin;
}

    .ctldelbutton:hover {
        border-color: dodgerBlue;
        box-shadow: 0 0 8px 0 dodgerBlue;
        background-color: #A29F9F;
    }

.ctlprintbutton {
    background-image: url('../image/prints.png');
    background-size:30%;
    background-repeat:no-repeat;
    background-position-x:left;
    background-position-y:center;
    background-color:#B9B7B7;
    width:100px;
    height:30px;
    cursor:pointer;
    font-weight: bold;     
    box-shadow: 0 0 8px 0 blue;
    border-radius : 0.25rem;
    text-align:right;
    border-color: dodgerblue;
    border-style:solid;
    border-width: thin;
}

    .ctlprintbutton:hover {
        border-color: dodgerBlue;
        box-shadow: 0 0 8px 0 dodgerBlue;
        background-color: #A29F9F;
    }



.ctlcopybutton {
    background-image: url('../image/listdata.png');
    background-size: 20%;
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: center;
    background-color: #B9B7B7;
    width: 100px;
    height: 40px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 0 8px 0 blue;
    border-radius: 0.25rem;
    text-align: right;
    border-color: dodgerblue;
    border-style: solid;
    border-width: thin;

}

    .ctlcopybutton:hover {
        border-color: dodgerBlue;
        box-shadow: 0 0 8px 0 dodgerBlue;
        background-color: #A29F9F;
    }



.ctlsavebutton {
    background-image: url('../image/save.png');
    background-size:30%;
    background-repeat:no-repeat;
    background-position-x:left;
    background-position-y:center;
    background-color:#B9B7B7;
    width:100px;
    height:40px;
    cursor:pointer;
    font-weight: bold;     
    box-shadow: 0 0 8px 0 blue;
    border-radius : 0.25rem;
    text-align:right;
    border-color: dodgerblue;
    border-style:solid;
    border-width: thin;
    margin-top:10px;
}

    .ctlsavebutton:hover {
        border-color: dodgerBlue;
        box-shadow: 0 0 8px 0 dodgerBlue;
        background-color: #A29F9F;
    }


    .ctlbackbutton {
    background-image: url('../image/newpage.png');
    background-size:25%;
    background-repeat:no-repeat;
    background-position-x:left;
    background-position-y:center;
    background-color:#F34840;
    width:100px;
    height:40px;
    cursor:pointer;
    font-weight: bold;     
    box-shadow: 0 0 8px 0 blue;
    border-radius : 0.25rem;
    text-align:right;
    border-color: dodgerblue;
    border-style:solid;
    border-width: thin;
    margin-top:10px;

}

    .ctlbackbutton:hover {
        border-color: dodgerBlue;
        box-shadow: 0 0 8px 0 dodgerBlue;
        background-color: #E5140A ;
    }



.ctleditbutton {
    background-image: url('../image/update.png');
    background-size: 30%;
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: center;
    background-color: #B9B7B7;
    width: 100px;
    height: 30px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 0 8px 0 blue;
    border-radius: 0.25rem;
    text-align: right;
    border-color: dodgerblue;
    border-style: solid;
    border-width: thin;
    margin-top: 10px;
}

    .ctleditbutton:hover {
        border-color: dodgerBlue;
        box-shadow: 0 0 8px 0 dodgerBlue;
        background-color: #A29F9F;
    }



.ctltablebutton {
    background-image: url('../image/table.png');
    background-size: 30%;
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: center;
    background-color: #B9B7B7;
    width: 80px;
    height: 30px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 0 8px 0 blue;
    border-bottom-right-radius: 0.25rem;
    text-align: right;
    margin-top:10px;
   
}

.ctltablebutton:hover {
    border-color: dodgerBlue;
    background-color: #A29F9F;
    box-shadow: 0 0 8px 0 dodgerBlue;
}


.ctlfrombutton {
    background-image: url('../image/from.png');
    background-size: 30%;
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: center;
    background-color: #B9B7B7;
    width: 80px;
    height: 30px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 0 8px 0 blue;
    border-bottom-right-radius: 0.25rem;
    text-align: right;
    margin-top:10px; 
}


.ctlfrombutton:hover {
    border-color: dodgerBlue;
    background-color: #A29F9F;
    box-shadow: 0 0 8px 0 dodgerBlue;
}




.ctlmainsearchbutton {

 
    border-style:dotted;
    color: white;    
    margin-top:3px;
    margin-left: 5px;
    cursor: pointer; 
    font-weight: bold;  
    border-color: dodgerBlue;
    box-shadow: 0 0 8px 0 dodgerBlue;
    cursor:pointer;
    height:24px;

}

    .ctlmainsearchbutton:hover {
        border-color: dodgerBlue;
        box-shadow: 0 0 8px 0 dodgerBlue;
    }
    .ctlmainsearchbutton:checked {
        border-color: dodgerBlue;
        box-shadow: 0 0 8px 0 dodgerBlue;
        border-bottom-width:10px;
        border-bottom-color:lightyellow;
        border-bottom-style:solid;
    }


.ctldatebutton {
    cursor: pointer;
   
   
}

.ctldatebutton:hover {
    cursor: pointer;
    box-shadow: 0 0 10px 1px dodgerBlue;
}

.form-basic .ctlsearch i {
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 16px;
    color: #80A3BD;
}

.gvgridmain {
    margin-top:10px;
}

.fontlabelgridmain {
        text-align: center;      
        vertical-align: middle;
        font-family: 'fc_paragraphregular';
        padding: 5px 1px;
        height:10px;
        border-right-style:dotted;
        border-width:1px;
        border-right-color:white;
        background-color:dodgerblue;
        box-shadow: 0 0 8px 0 dodgerBlue;
        color:white;
        border-radius: 0.25rem;
}

.ctlinputlabel{
    /*width: 230px;*/
    border-style:none;
    box-sizing: border-box;
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
    background-color:  #ffffff;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
    /*padding: 14px 15px 14px 40px;*/
    border-bottom: 1px dotted #b6c3cd;
    border-right: 0;
    color:black;
    outline: none;
    -webkit-appearance: none;
     border-radius: 0.25rem;
    font-size:14px;
   
}

    .ctlinputlabel:focus {
        border-color: dodgerBlue;
        box-shadow: 0 0 8px 0 dodgerBlue;
    }


    .button {
	 -webkit-appearance: none;
	 width: auto;
	 min-width: 100px;
	 border-radius: 60%;
	 text-align: center;
	 margin: 0 auto;
     vertical-align: middle;
	 margin-top: 5px;
	 background-color: #b08bf8;
	 color: #fff;
	 font-size: 14px;
	 font-weight: 500;
	 box-shadow: 0px 2px 6px -1px rgba(0, 0, 0, .13);
	 border: none;
	 transition: all 0.3s ease;
	 outline: 0;
     cursor:pointer;
     height:40px;
}
 .button:hover {
	 transform: translateY(-3px);
	 box-shadow: 0 2px 6px -1px rgba(182, 157, 230, .65);
}
 .button:hover:active {
	 transform: scale(0.99);
}


     .fonttextcontent {
        
        text-align: left;
        vertical-align: top;
        font-family: 'fc_paragraphregular';
        margin-top:2px;
        margin-left:5px;
        margin-right:5px;
        border-style:none;
        border-color:transparent;
        line-height:30px;
       

        /*text-shadow: gray 0.1em 0.1em 0.1em;*/
    }