﻿.inputLabel { font-size:9pt;line-height:18px;padding:5px 10px;color:#3f3f3f;font-weight:600;font-stretch:expanded;font-family:sans-serif; }
.inputLabel-Horizontal { font-size:8pt;line-height:30px;padding:5px 10px;color:#3f3f3f;font-weight:600;font-family:sans-serif;letter-spacing:1.5px; }
.inputLabel-Horizontal-Bold { font-size:11pt;font-weight:700;line-height:30px;padding:5px 10px;color:#3f3f3f;font-weight:600;font-family:sans-serif;letter-spacing:1.5px; }

/* INPUT STYLES */
.transparentField { height:24px;margin-bottom:10px;padding:0 8px;background-color:transparent;border:none;font-size:11px;color:#333; }
.textBox { height:26px;margin-bottom:10px;padding:0 8px;background-color:#f2f2f2;border:1pt solid rgba(0,0,0,0.33);border-radius:3pt;font-size:11px;color:#3f3f3f; }
.selectBox { height:26px;margin-bottom:10px;padding:0 8px;background-color:#f2f2f2;border:1pt solid rgba(0,0,0,0.33);border-radius:4pt;font-size:11px;color:#3f3f3f; }
.textArea { padding:5px 8px;background-color:transparent;border:1pt solid rgba(0,0,0,0.33);border-radius:2pt;font-size:0.875rem;color:#3f3f3f; }
.richTextbox { padding:0 8px;background-color:transparent;border:1pt solid rgba(0,0,0,0.33);border-radius:2pt;font-size:0.875rem;color:#3f3f3f; }
.menuTextbox { width:180px;height:24px;margin-bottom:10px;padding:0 8px;background-color:transparent;border:1pt solid rgba(0,0,0,0.66);border-radius:2pt;font-size:0.925rem;color:#3f3f3f; }
.menuSelect { width:198px;height:24px;margin-bottom:10px;padding:0 8px;background-color:transparent;border:1pt solid rgba(0,0,0,0.66);border-radius:2pt;font-size:0.925rem;color:#3f3f3f; }
.menuDate { width:90px;height:24px;margin-bottom:10px;padding:0 8px;background-color:transparent;border:1pt solid rgba(0,0,0,0.66);border-radius:2pt;font-size:0.925rem;color:#3f3f3f; }
input[type=radio], input[type=checkbox] { position:relative;margin:0 5px;vertical-align:middle; }

.textBoxUnderline { height:24px;padding:0 8px;margin-bottom:10px;background-color:transparent;border:none;border-bottom:1pt solid rgba(0,0,0,0.45);font-size:12px;}
.textBoxUnderlineRight { height:24px;padding:0 8px;margin-bottom:10px;background-color:transparent;border:none;border-bottom:1pt solid rgba(0,0,0,0.45);font-size:12px;text-align:right;}
.selectBoxUnderline { height:24px;padding:0 8px;margin-bottom:10px;background-color:transparent;border:none;border-bottom:1pt solid rgba(0,0,0,0.45);font-size:12px;}

.login { height:36px;margin-bottom:20px;padding:0 12px;background-color:#f2f2f2;border:1pt solid rgba(0,0,0,0.66);border-radius:4pt;font-size:11px;color:#333; }
.loginLabel { font-size:12pt;font-weight:600;color:#f2f2f2;line-height:28px;padding:0 8px; }

.searchBox { height:26px;background-color:#e6e6e6;background-image: url('/Common/images/icon-search-gray.png');background-position:4px 12px 2px 12px;background-repeat:no-repeat;padding-left:40px;border:1pt solid #ccc; border-radius:6pt;color:#7b7b7b; }
.directionBox { height:30px;background-color:#e6e6e6;background-image: url('/common/images/iconlibrary/icon-navigation-gray.png');background-position:0px 8px;background-repeat:no-repeat;padding-left: 40px;border:1pt solid #ccc;border-radius:6pt;color:#7b7b7b; }
.search {
    display:block;
    margin-top:5px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 9px;
    background-color: #e1e1e1;
    background-image: url('/Common/images/icon-search-gray.png');
    background-position: 5px 5px;
    background-repeat: no-repeat;
    padding: 8px 20px 8px 40px;
}
/****************************/
/*** Toggle on/off button ***/
/****************************/
.toggle-switch { position: relative;display: inline-block;width: 46px;height: 20px; }
.toggle-switch input { opacity: 0;width: 0;height: 0; }
.slider { position: absolute;cursor: pointer;background-color: rgba(110,2,2,0.3);border-radius: 24px;width: 100%;height: 100%;transition: background-color 0.3s;margin-bottom:5px; }
.slider::before { content: "";position: absolute;height: 18px;width: 18px;left: 1px;bottom: 1px;background-color: #f2f2f2;border-radius: 50%;border-color: #333;border-width:1px;transition: transform 0.3s; }
.toggle-switch input:checked+.slider { background-color: #4caf50; }
.toggle-switch input:checked+.slider::before { transform: translateX(26px); }

/****************************/
/*** Buttons              ***/
/****************************/
.btnBlue { font-size: 15px;font-family: Arial;width: 119px;height: 40px;border-width: 1px;color: #fff;border-color: #84bbf3;font-weight: bold;border-top-left-radius: 6px;border-top-right-radius: 6px;border-bottom-left-radius: 6px;border-bottom-right-radius: 6px;box-shadow: inset 0px 1px 0px 0px #bbdaf7;text-shadow: inset 0px 1px 0px #528ecc;background: linear-gradient(#79bbff, #378de5); }
.btnBlue:hover { background: linear-gradient(#378de5, #79bbff); }

.btnBlueSmall { display:inline-block;font-size:10px;font-family: Arial;padding:0 8px;margin:0 8px;height: 25px;line-height:25px;text-align:center;border-width: 1px;color: #fff;border-color: #84bbf3;font-weight: bold;border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;box-shadow: inset 0px 1px 0px 0px #bbdaf7;text-shadow: inset 0px 1px 0px #528ecc;background: linear-gradient(#79bbff, #378de5); }
.btnBlueSmall:hover { background: linear-gradient(#378de5, #79bbff); }
.btnBlueSmall p {  }

.greyBtn {
    margin:10px;
    box-shadow: inset 0px 7px 6px 0px #777777;
    background: linear-gradient(to bottom, #777777 5%, #777777 100%);
    background-color: #777777;
    border-radius: 5px;
    border: 1px solid #777777;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: 'Open Sans',sans-serif;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 12px;
    text-decoration: none;
    text-shadow: 0px -1px 0px #777777;
}

    .greyBtn:hover {
        background: linear-gradient(to bottom, #777777 5%, #777777 100%);
        background-color: #777777;
    }

    .greyBtn:active {
        position: relative;
        top: 1px;
    }