/* Basic theme styles */

body { background: #fcfcfc url(../../images/customer_ots/bg.jpg) center top no-repeat fixed; color: #666; /*padding-right: 0!important*/}
a { color: #12a1af; }

.header { padding-top: 30px; }
.header .nav .buttons a span:before { background-color: #12a1af; }
.header .nav .buttons a:hover { background: #12a1af!important; }
.header .buttons li ul { top: 110%; }

.header .banner { display: block; }

.main h1 { color: #666; font-weight: 300; }

.pagination > li.paginate_button.active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { border-bottom: 2px solid #12a1af; }
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { border-bottom: 2px solid #12a1af; }

.main .table th { background-color: #1f424b!important; }
.main .table .badge { background-color: #12a1af; }
.main .table .dropdown-menu a { color: #0088cc; }
.main .table .dropdown-menu a:hover { background: #0088cc; }

.manage-menu a:hover { color: #0088cc; }

.main.form-box .content-box .buttons { padding-left: 40%; text-align: left; }
.form-container input[type="submit"] { background-color: #12a1af; border-radius: 0; }
.form-container a.popup { background:#3baede; }

.faq-box .panel-title > a { background: url(../../images/customer_ots/arrow-down-blue.png) right 10px no-repeat; color: #12a1af; padding: 0 20px 0 0; }
.faq-box .panel-body { border-left: 3px solid #12a1af;}
#enable-cookies { background: #ffd; border: 1px solid #eee; color: #000; margin: 0 0 15px 0; padding: 10px; text-align: center; }

.main .content-box { border: 0; border-radius: 5px; box-shadow: 0 5px 10px rgba(0,0,0,0.15); }

.required { color: #12a1af; }

.page.inner .main.form-box .container .content-box .intro p, .main.form-box .container .content-box .intro p { text-transform: uppercase; }

.header .buttons a { background-color: #1f424b; }

.table_td_top { background-color: #888; }
table.pack a { font-weight: bold; }

/* CUSTO-275: replace the default DataTables Responsive border-triangle control icon with the new
   arrow icon, rotated via CSS instead of swapped borders, so collapsed/expanded reuse one asset. */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
    margin-right: .5em;
    display: inline-block;
    box-sizing: border-box;
    content: "";
    width: 20px;
    height: 20px;
    border: none;
    background: url(../../images/customer_ots/icon-expand-arrow.svg) no-repeat center / contain;
    transition: transform 0.2s ease;
    transform: rotate(0deg);
}

table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before {
    border: none;
    transform: rotate(180deg);
}

@media (max-width: 1200px) {
    .header .nav .buttons li li { margin: 0; }
}