﻿html, body, form {
    margin: 0;
    padding: 0;
    background-color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.96em;
    height: 100%;
    outline:none !important;
    color:#545f6a;
    min-width:360px;
}

.inputerror{
    border: 1px solid #ab0000 !important;
    background:#ffe9e9 !important;
    animation-duration: 1s;
    animation-name: showhidetextbox;
    animation-iteration-count:4;
}

table {
    border-spacing: 0;
    border-collapse: separate;
}

p {
    margin: 0;
}

td, th {
    padding: 4px !Important;
}

ol, ul {
    margin-top: 0;
    margin-bottom: 10px;
    padding-left: 18px;
}

.page-wrapper {
    height:100%;
    background:red;
}

.form {
    height:100%;
}

.LogoPanel-HalfHeight{
    background-color:#104b7d;
    width:100%;
    margin-bottom:20px;
    position:relative;
    -webkit-transition: all 1s ease;  
    -moz-transition: all 1s ease;  
    -o-transition: all 1s ease;   
    transition: all 1s ease;
    position:relative;
    z-index:100;
    height:50%;       
}

.LogoWrapper {
    position: absolute;
    width:100%;
    bottom:0;
    padding:0 0 20px 0;
    text-align:center;
    box-sizing:border-box;
}

@media (max-width:  360px) {

    .Logo {width:240px;}
    .LogoWrapper {padding:0 0 7px 0;}
    .MainsOptionsCol1 {text-align: center;padding:0 0 20px 0 !important;}
    .MainsOptionsCol2 {text-align: center;padding:0 0 0 0 !important;}
    .MainCellCol1 {text-align:right !important;}
    .MainCellCol2 {text-align:right;}
    .MainContent {width:100%;padding:0 10px 0 10px;box-sizing:border-box;}
    .TicketValidateCol {width:0px;}

    .LogoPanel-Default{
        background-color:#104b7d !important;
        width:100%;
        margin-bottom:20px;
        position:relative;
        -webkit-transition: all 1s ease;  
        -moz-transition: all 1s ease;  
        -o-transition: all 1s ease;   
        transition: all 1s ease;
        position:relative;
        z-index:100;
        height:80px;
    }

    .SubmittedWrapper {
        width:100%;
        padding:0 15px 0 15px;
        box-sizing:border-box;
    }

}

@media (min-width: 361px) and (max-width: 768px)  {

    .Logo {width:300px;}
    .LogoWrapper {padding:0 0 10px 0;}
    .MainsOptionsCol1 {text-align: right;padding:0 60px 20px 0 !important;}
    .MainsOptionsCol2 {text-align: right;padding:0 60px 0 0 !important;}
    .MainCellCol1 {text-align:right !important;}
    .MainCellCol2 {text-align:right;}
    .TicketFormWrapper{width:100%;top:-800px;}
    .TicketValidateCol {width:0px;}


    .LogoPanel-Default{
        background-color:#104b7d !important;
        width:100%;
        margin-bottom:20px;
        position:relative;
        -webkit-transition: all 1s ease;  
        -moz-transition: all 1s ease;  
        -o-transition: all 1s ease;   
        transition: all 1s ease;
        position:relative;
        z-index:100;
        height:100px;
    }

    .SubmittedWrapper {
        width:100%;
        padding:0 15px 0 15px;
        box-sizing:border-box;
    }

}

@media (min-width: 769px)  {

    .Logo {width: 450px;}
    .LogoWrapper {padding:0 0 14px 0;}
    .MainsOptionsCol1 {text-align:right;padding:0 30px 0 0 !important;border-right: 1px solid silver;}
    .MainsOptionsCol2 {text-align:left;padding: 0 0 0 30px !important}
    .MainCellCol1 {text-align:right !important;}
    .MainCellCol2 {text-align:left;}
    .MainContent {
        width: 100%;
        padding: 0 20px 0 20px;
        box-sizing: border-box;
        height: calc(50% - 20px);
    }

    .LogoPanel-Default{
        background-color:#104b7d !important;
        width:100%;
        margin-bottom:20px;
        position:relative;
        -webkit-transition: all 1s ease;  
        -moz-transition: all 1s ease;  
        -o-transition: all 1s ease;   
        transition: all 1s ease;
        position:relative;
        z-index:100;
        height:150px;
    }

    .TicketFormWrapper{width:600px;top:-800px;}
    .TicketValidateCol {width:0px;}

    .SubmittedWrapper {
        width:500px;
    }

}

@media (min-width: 1290px) {

    .SubmittedWrapper {
        width:500px;
    }

}






.SubmissionAuthoriserListWrapper {
    margin-left:auto; 
    margin-right:auto; 
    width:100%; 
    padding:20px 0px 20px 0px;
}

.CommentField{
    border: none !Important;
    padding: 0 !important;
    color: black!Important;
    opacity:1 !important;
}

.HeadingText{
    font-size: 20px;
    font-weight:bold;
}

.CompanyName{
    font-size: 14px;
    font-weight:bold;
}

.HeaderCellLeft {
    text-align:right;
    border-right:1px solid silver;
    padding-right:30px !important;
}

.HeaderCellRight {
    text-align:left;
    padding-left:30px !important;
    width:360px;
}

.RemoteSupportWrapper{
}

.RemoteSupportWrapper-Inactive{
    display:none;
}

.TicketFormWrapper{
    visibility:hidden;
    opacity:0;
    margin-left:auto; 
    margin-right:auto;
    position:relative;
    z-index:0;
}

.TicketFormWrapper-Active{
    visibility:visible;
    display:block;
    animation-duration: 1s;
    animation-name: slidedown;
    animation-fill-mode: forwards;
}

.CompanyAuthorisation-Hide{
    display:none;
    opacity:0;
}



.CompanyAuthorisation-Show{
    visibility:visible;
    opacity:1;
    color:#000;
    width:100%;
    transform-origin: top right;
    animation-duration: 0.6s;
    animation-name: fadein;
    animation-fill-mode: forwards;
    z-index:100;
}


.regular-button {
    border: 1px solid #9aa0a6;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color:#fff;
    font-size: 12px;
    height:30px;
    min-width:100px;
    padding-left:20px;
    padding-right:20px;
    background-image: -webkit-linear-gradient(top, #104b7d 0%, #104778 100%);
    background-image: linear-gradient(to bottom, #104b7d 0%, #104778 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1f9fe', endColorstr='#ffebf6fe', GradientType=0);
    text-align:center;
    box-sizing:border-box;
}


.regular-button:hover {
    opacity:0.6;
}

.support-button {
    float: right;
    box-sizing:border-box;
    margin-right: -10px;
}

.support-button:hover {
    opacity:0.6;
}

.approve-button {
    margin-top:6px;
    background-image: -webkit-linear-gradient(top, #89c355 0%, #a1d078 100%)!important;
    background-image: linear-gradient(to bottom, #89c355 0%, #a1d078 100%)!important;
    color: black!important;
}

.reject-button {
    margin-top:6px;
    background-image:  -webkit-linear-gradient(to bottom, rgba(156,9,9,1) 0%, rgba(255,74,74,1) 100%);
    background-image:  linear-gradient(to bottom, rgba(156,9,9,1) 0%, rgba(255,74,74,1) 100%);
}

.search-button{
    background: transparent!important;
    border: transparent!important;
}

.search-button:hover{
    background-color:rgba(255,0,0,0.2)!important;
}

.LogoBlock {
    float: right;
    width: 5px;
    height: 5px;
    background-color: #000;
    margin-left: 1px;
    margin-bottom: 1px;
    opacity: 0.2;
}

.LogoRow {
    text-align:right;
    clear:both;
}

.FadeInOut {
  animation-duration: 1s;
  animation-name: showhide;
  animation-iteration-count:infinite;
  color:red;
}

.InfoGlyph {
    font-size:60px;
}

.AlignBottom {
    vertical-align:bottom;
}

@keyframes showhide {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes showhide {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes showhidetextbox {
    0% {
        opacity:1;
    }

    50% {
        opacity:0.6;
    }
    100% {
        opacity:1;
    }
}

@-webkit-keyframes showhidetextbox {
    0% {
        opacity:1;
    }

    50% {
        opacity:0.6;
    }
    100% {
        opacity:1;
    }
}



@keyframes fadein {
    0% {
        opacity:0;
    }

    100% {
        opacity:1;
    }
}

@-webkit-keyframes fadein {
    0% {
        opacity:0;
    }

    100% {
        opacity:1;
    }
}

@keyframes slidedown {
    0% {
    }

    30% {
        opacity:0;
    }

    100% {
        top:0px;
        opacity:1;
    }
}

@-webkit-keyframes slidedown {
    0% {
    }

    30% {
        opacity:0;
    }

    100% {
        top:0px;
        opacity:1;
    }
}

@-webkit-keyframes simplereveal {
    0% {
    }

    100% {
        top:0px;
    }
}

/*Admin Pages*/
.main-menu-row {
    border-top: 5px solid rgba(46,137,182,1);
    border-bottom: 1px solid rgba(46,137,182,0.4);
}

.main-logo-wrapper {
    background-color: rgba(21,73,123,1);
    height: 60px;
    align-items: center;
    justify-content: center;
    display: flex;
    color: rgba(255,255,255,0.9);
    font-size: 20px;
    justify-content: flex-start;
    border-right: 2px solid rgba(46,137,182,1);
}

.main-top-menu-wrapper {
    height: 60px;
    align-items: center;
    justify-content: space-between;
    display: flex;
    font-size: 16px;
    font-weight: 600;
    background-color: rgba(238,238,238,1);
}

.main-logout-button {
    font-size: 12px !important;
    margin-right: 0;
    margin-left: auto;
}

.main-body-wrapper {
    height: calc(100% - 66px);
}

.menu-side-wrapper {
    border-right: 2px solid rgba(46,137,182,1);
    background-color: rgba(21,73,123,1);
    height: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.main-content-area {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.menu-side-buttons {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.3) !important;
    border-width: 0 0 1px 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 0 !important;
    background-color: rgba(255,255,2553,0.1) !important;
    color:#fff !important;
}

.menu-side-buttons:hover {
    background-color: rgba(255,255,255,0.3) !important;
}

.main-edit-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.main-edit-column1 {
    display: flex;
    flex-direction: column;
    width: 150px;
    color: rgba(21,73,123,1);
    font-weight: 500;
}

.main-edit-column {
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
}

.RadGrid .rgFilterBox {
    padding-left: 6px !important;
    width: calc(100% - 40px);
}

.RadGrid_Material .rgPagerCell {
    padding-right: 20px !important;
}

.RadGrid_Material .rgCommandCell {
    background-color: rgba(21,73,123,0.9) !important;
    color: #fff !important;
}

.RadGrid_Material .rgGroupPanel {
    background: rgba(46,137,182,1) !important;
    border: none !important;
    font-size: 12px !important;
}

.RadGrid .rgCommandCell {
    padding: 0 !important;
    border: none !important;
}

.RadGrid_Material .rgFooter {
    background-color: #f4f7f8 !important;
}

.RadGrid_Material .rgFooter td {
    border: none !important;
    font-weight: 600;
    background: rgba(46,137,182,1);
    color: #fff;
}

.submit-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 4px;
}

.submit-col1 {
    width: 120px;
    min-width: 120px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding-right: 10px;
}

.submit-col2 {
    width:480px;
}

.submit-col3 {
    width: 10px;
}

.RadUpload_Office2010Silver .ruSelectWrap .ruFakeInput, .RadUpload_Office2010Silver .ruSelectWrap .ruButton {
    height: 29px !important;
}

.ComapnayDetailWrapper {
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    box-sizing: border-box;
    background: #d1dde7;
    font-size: 12px;
    margin-top: 10px;
}

@media (max-width: 600px) {
    .submit-row {
        flex-direction: column;
        padding: 0 10px;
        margin-bottom:0;
    }

    .submit-col1 {
        width: 100%;
        justify-content: flex-start;
    }

    .submit-col2 {
        width: 100%;
        padding: 4px 0 6px 0;
    }

    .submit-col3 {
        display:none;
    }

}