/*


default is smallest device

*/

.p960 {  /* 960 pix centered white page */
    margin: 0 auto;
    padding: 2em 2em 2em;
    max-width: 960px;
    background-color: #ffffff;
}

.pLeft {
    padding: 2em 2em 2em;
}

.tcontainer {
    padding:0;
}

.tform {
    padding: 35px 20px;
}

.tform h4 {
    color: #0c2340;
    font-family: Arial;
    font-size: 16px;
    font-weight: normal;
    margin: 0px;
    white-space: nowrap;
}

.tform h4:after {
    content: '';
    display: block;
    margin: 2px 0 15px 0;
    border-top: 1px dashed #e3e3e3;
}

.jselect{
    font-family: 'Open+Sans', sans-serif;
    font-size: 12px;
    width:100%;
    height:25px;
    border: 1px solid #d9d9d9;
}

.jdate-side{
    width:32%;
    float: left;
}
.jdate-center{
    width:32%;
    float: left;
    margin-right:2%;
    margin-left:2%;
}

.jinput{
    width:100%;
    font-size: 12px;
    height: 25px;
    text-indent: 5px !important;
    border: 1px solid #d9d9d9;
    box-sizing: border-box;
}

.jinput:read-only{ 
    background-color: #f7f7f7;
}

.jinput:-moz-read-only { 
    background-color: #f7f7f7;
}

.jinput:disabled,.jselect:disabled, .jtextarea:disabled{
    cursor:default;
    background-color:#f7f7f7; 
    color:#545454;
}

.jinput:focus, .jselect:focus{
    border-color:#66afe9;
    outline:0;
}

.jtextarea{

    width:100%;
    font-family: 'Open+Sans', sans-serif;
    font-size: 12px;
    border: 1px solid #d9d9d9;
    resize:vertical; 
    min-height:70px;
    max-height:300px;
}
.jtextarea:read-only { 
    background-color: #f7f7f7;
}


select[readonly] {
    background: #F8F8F8;
    cursor: no-drop;
}

select[readonly] option {
    display: none;
}

.tform {
/*
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
*/
    font-size: 14px;
    width: 100%;
    margin: 0;
    overflow: auto;
   /* overflow-y: scroll; has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;
    
}

.tform td {
   border: 0px;
}	       

.tform tr:hover{background-color: #FFF;}

   .tform .section {
    border-collapse: separate;
    border-spacing: 0px 4px;
    border: 0px;
   width: 100%;
   /*background-color: yellowgreen;*/
    font-family: 'Open+Sans', sans-serif;
    font-size: 14px;
    color:#555;
}

.tform .section .title {
    padding-right: 25px;
    padding-left: 10px;
      line-height: 25px;
      font-size: 14px;
      white-space: nowrap;
      text-align: right;
      vertical-align: top;
}

.tform .section .unit {
    width:100%;
    height: 25px;
    min-width: 75px;
    background-color: #f8f8f8;
    border: 1px solid #d9d9d9;
    padding: 0px;
    color: #555;
    /*border-left: 0;*/
    text-align: center;
    font-size: 13px;
    border: 1px solid #d9d9d9;
    box-sizing: border-box;
}

.tform .section .rcol {
    width:1%;
    min-width: 75px;
    padding: 0px;
}

.tform .section .btn {
    width:100%;
    min-width: 75px;
    height: 25px;
    background-color: #0c2340;
    /*border: 3px solid #d9d9d9;*/
    padding: 0px 12px 0 12px;
    color: whitesmoke;
    border: 0px;
    text-align: center;
    font-size: 13px;
}

.tform .section .btn:hover {
	background-color: #00609c;
}

.tform .section .fbtn {
  position: relative;
  overflow: hidden;
  width:auto;
}

.tform .section .fbtn input.finput {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  filter: alpha(opacity=0); 
  width:100%;
}	    


.tform .section .value {
    width: 90%;
    min-width:100px;
    padding: 0px;

}


.tform .section .msg {
    width: 70% !important;
    min-width:100px;
    padding: 0px 0px 6px 0px;
}
.tform .msg-error {
    background-color: #f2dede;
    border-color: #960000;
    color: #960000;	
    border: 1px solid;
    padding: 5px;
    white-space: normal;
    margin-top: 3px;
    margin-bottom: 3px;
    outline: none;
}

.tform .msg-warning{
    background-color: #f9edbe;
    border-color: #B89000;
    color: #8C6E04;
    border: 1px solid;
    padding: 5px;
    white-space: normal;
    margin-top: 3px;
    margin-bottom: 3px;
    outline: none;
}

.tform .msg-info{
    background-color: #d9edf7;
    border-color: #006ABC;
    color: #006ABC;
    border: 1px solid;
    padding: 5px;
    white-space: normal;
    margin-top: 3px;
    margin-bottom: 3px;
    outline: none;
}

.tform .msg-success{
    background-color: #dff0d8;
    border-color: #1D6000;
    color: #1D6000;
    border: 1px solid;
    padding: 5px;
    white-space: normal;
    margin-top: 3px;
    margin-bottom: 3px;
    outline: none;
}	    

.tform .msg-row{
    display: none;
}	    
	    
.tform .row {
    display:flex;
    flex-wrap: nowrap;
    font-size:14px;
    line-height: 25px;
    flex-direction: column;
    padding-bottom: 5px;
}

.tform .row:after {
  }


.tform .C2 {
    display:flex;
    flex-direction: row;
    flex: 1 1;
    flex-wrap: nowrap;
    min-width: 180px;
    max-width: 500px;
}

.C2 > input:not([type=checkbox]):not([type=radio]){
    -webkit-appearance: none;
    border-radius: 0;       
    font-size:12px;
    padding: 0px 10px 0px 10px;
    border: 1px solid #d9d9d9;
    line-height: 25px;
    width: 100%;
    height: 25px;
    min-height: 25px;
    margin:0px;
}

.C2 > input[type=checkbox]{
    margin-right:10px;
    margin-left: 10px;
	-webkit-appearance: checkbox;
    min-height: unset;
    width: 20px;
}

.C2 label {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    min-width: 60px;
}
.C2 > label input[type=radio]{
    vertical-align: middle;
    margin: -3px 8px 0 0;
}



.C2 > p{
    margin: auto 0;
}

.C2 >input[readonly] {
    background-color:#eee;
}


.tform button {
    color: #505050;
    border-color: #a0a0a0;
    border-style: solid;
    border-width: 1px;
    background-color: #F0F0F0;
    margin-right: 30px;
    margin-bottom: 10px;
    padding-left:15px;
    padding-right:15px;
    min-width: 100px;
    height: 27px;
    border-radius: 20px;
    cursor: pointer;
    font: normal 13px Arial, Helvetica, sans-serif;
    white-space: nowrap;

}

.tform i{
    margin-right:10px;
}

.buttonBar {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}


.tform button:hover { background:  url(/se/images/bg_blue3.gif) repeat-x; }
/* Reverted: Issues with existing buttons .tform button:disabled,button[disabled]{  background-color: #cccccc; color: #666666; background: unset;cursor: unset;} */
.tform button:active{ outline:0;}
.tform button:focus{ outline:0;}


.C2 > select {
    color: black;
    line-height: 25px;
    min-height: 27px;
    font-size: 13px;
    width: 100%;
    margin:0px 0px 0px 0px;
    border: 1px solid #d9d9d9;
    border-radius: 0;
    display:inline-block;
    /* needed */
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-left:10px;

    /* SVG background image */
/*
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='#5d6268'><polygon points='0,0 100,0 50,80'/></svg>") no-repeat;
*/
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='24' height='16' viewBox='0 0 24 16'><polygon points='0,0 16,0 8,16' style='fill: rgb%28138, 138, 138%29'></polygon></svg>") no-repeat;
    background-size: 13px;
    background-position: calc(100% - 5px) center;
    background-repeat: no-repeat;
    background-color:white;
}

.C2 .unit {
    min-width:85px;
    line-height: 25px;
    background-color: #f8f8f8; 
    text-align: center;
    border: 1px solid #d9d9d9;
    border-left: 0;
    font-size:12px;
}

.C2 .sunit {
    color: #555;
    width: unset;
    text-align: center;
    text-align-last: center;
    padding-right: 15px;
    min-width:85px;
    background-color: #f8f8f8; 
    border: 1px solid #d9d9d9;
    border-left: 0;
    font-size:12px;
}



.tform textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-left: 10px;
    color: #555;
    font-family: 'Open+Sans', sans-serif;
    font-size: 13px;
    width: 100%;
    max-width: 720px;
    min-height: 50px;
    max-height: 200px;
    resize: vertical;
    border-radius: 0;
    border: 1px solid #d9d9d9;
}

.tform .C1 {
    flex: 0 0;
    white-space:nowrap; 
    padding-right:10px;
}

.tform .CM {
    display:none;
}

.tform .P220 { min-width: 220px;}
.tform .P250 { min-width: 250px;}


input:focus{border: 1px solid #5D9FEF;}
input:disabled{background-color: #F8F8F8;}

input[type="date"]::-webkit-clear-button {
    display: none;
}

input[type="date"]::-webkit-inner-spin-button { 
    display: none;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button 
{
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

.btn-apps {
    display:block;
    margin-bottom:5px;
}


@media only screen and (min-width : 576px) {
    .tform {
        padding: 35px 35px;
    }
    
    .tform .row {
        flex-direction: row;
        align-items: flex-start;
    }
    .tform .row .C1 {
        text-align: left;
    }

    .C2 > input {
        height:25px;
    }
    .btn-apps {
        display:inline-block;
   }
   .buttonBar {flex-direction: unset;}

}