/* 2025 AllRec India :: Main Styles */
:root {
    --ar-blue: #336699;
    --ar-ltgray: #DDDDDD;
    --ar-midgray: #CCCCCC;
    --ar-gray: #999999;
    --ar-dkgray: #666666;
    --ar-red: #900;
    --ar-orange: #FD6A02;
    --ar-green: #009900;
    --ar-dkgreen: #004500;
    
    --black: #000000;
    --white: #ffffff;
    --ltblack: #333333;

    --bg-jackets: #FF6633;
    --bg-cardigans: #3366FF;
    --bg-blankets: #009900;
    --bg-patches: #CC00CC;
}

* { box-sizing: border-box; }
body {
    background-color: var(--lc-white,#fff);
    margin: 0px 0px; 
    padding: 0px !important;
    font-family: 'Source Sans Pro', trebuchet ms, arial, verdana, sans-serif;
    color: var(--lc-dkgray,#333);
    font-size: 16px;
}

.clear { clear: both;}

.imgfade {
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.imgfade:hover {
    opacity: 0.5;
}

.nowrap { white-space: nowrap; }

.holder-watch-sponsorbanner {width: 100%;}
.holder-watch-sponsorbanner img {width: 100%;}

.alignCenter {margin: 0 auto; width: 100%; text-align: center;}
.alignRight {text-align: right;}

.titleScript {font-family: times new roman, times, serif; font-style: italic; font-size: 18px;}
.bigNumber {font-size: 48px;}

.separatorDottedLine {border-bottom: 0px dotted var(--ar-ltgray,#000); padding: 20px 0;}
.separatorDottedLine2 {border-top: 2px dotted var(--ar-ltgray,#000); padding: 16px 0;}

.bgltgray {background-color: #efefef; padding: 10px 30px; margin: 20px 0 0 0;}

.grayText {color: #e1e1e1;}

.iconSpace {margin: 0 10px 0 0;}

/* TABS */

.tabs-nav {width: 100%;}
.tabNav {display: inline-block; width: 47%; text-align: center; font-size: 14px; font-weight: bold;  padding: 10px 1%; background-color: var(--lc-ltgray,#ccc);}
.tabactive {background-color: #fff; border-top: 2px solid #ccc; border-left: 2px solid #ccc; border-right: 2px solid #ccc;}
.tabcontent {padding: 20px;}

/* GLOBAL - LIGHTBOX */

.lightbox {display: none; padding: 0px 20px 20px 20px;}
.event-title {color: var(--lc-dkgray,#333); font-size: 24px; margin: 0 0 20px 0;}
.question { color: var(--sr-color1,#0293d1); font-size: 24px; font-weight: 300;}
.answer {font-size: 18px;}

/* REPORTS */
.reportsHolder {margin: 40px 0;}
.reportsHolder ul {margin: 0; padding: 0; }
.reportsHolder ul li {list-style-type: none; display: inline-block; width: 250px; margin: 0 0 30px 30px;}

.reportTitle {font-weight: bold;}
.reportDesc {margin: 10px 0;}

/* GLOBAL - HEADINGS */

h3 {text-transform: uppercase; font-size: 16px; margin: 0 0 20px 0; padding: 0;}

h1.title1 {font-weight: bold; font-size: 
24px; color: var(--lc-black,#000); text-transform: uppercase; margin: 0;}
h3.subtitle3 {margin: 10px 0; color: #459939;}

/* BUTTONS */

button, .btn { text-align: center; background-color: var(--lc-ltblue,#61bdd9); color: #fff; font-size: 14px; font-weight: bold; text-transform: uppercase; padding: 0.5em; border: 1px solid #61bdd9; cursor: pointer; &:visited { color: white; } &:hover { }}

a.disabled, btn.disabled { opacity: 0.6; pointer-events: none; cursor: default; }

button.buttonProfileARI {background-color: var(--ar-green, #000); color: var(--white, #fff); padding: 30px 30px; border: 0; font-weight: bold; text-transform: uppercase;}
button.buttonProfileARI:hover {background-color: var(--ar-dkgreen, #000); color: var(--white, #fff); cursor: pointer;}

button.buttonGo {width: 100%; text-align: center; background-color: var(--lc-ltblue,#61bdd9); color: #fff; font-size: 14px; font-weight: bold; text-transform: uppercase; padding: 5px 0; border: 1px solid #61bdd9;}

button.buttonForm {width: 250px; text-align: center; background-color: var(--lc-ltblue,#61bdd9); color: #fff; font-size: 14px; font-weight: bold; text-transform: uppercase; padding: 5px 0; height: 50px; border: 1px solid #61bdd9;}

button.buttonForm:hover {background-color: #333; color: #fff; cursor: pointer;}

button.buttonNote {border: 1px solid var(--ar-red,#900); background-color: #fff; text-transform: uppercase; font-size: 11px; font-weight: bold; padding: 10px 20px; color: var(--ar-red,#900); margin: 33px 0 0 0;}
button.buttonNote:hover {background-color: var(--ar-red,#900); color: #fff; cursor: pointer;}

button.buttonAction {border: 1px solid var(--ar-red,#900); background-color: #fff; text-transform: uppercase; font-size: 11px; font-weight: bold; padding: 6px 20px; color: var(--ar-red,#900); margin: 0px 0 0 10px;}
button.buttonAction:hover {background-color: var(--ar-red,#900); color: #fff; cursor: pointer;}

button.buttonActionDisabled {border: 1px solid var(--ar-gray,#999); background-color: #eee; text-transform: uppercase; font-size: 11px; font-weight: bold; padding: 6px 20px; color: var(--ar-gray,#900); margin: 0px 0 0 10px;}

button.buttonAction2 {border: 1px solid var(--ar-red,#900); background-color: var(--ar-red,#900); text-transform: uppercase; font-size: 12px; font-weight: bold; padding: 14px 20px; color: #fff; margin: 0px 0 0 20px;}
button.buttonAction2:hover {background-color: var(--ar-white,#fff); border: 1px solid #900; color: #900; cursor: pointer;}

button.buttonAction3 {border: 1px solid var(--ar-red,#900); background-color: var(--ar-white,#fff); text-transform: uppercase; font-size: 12px; font-weight: bold; padding: 14px 20px; color: #900; margin: 0px 0 0 20px;}
button.buttonAction3:hover {background-color: var(--ar-white,#900); border: 1px solid #900; color: #fff; cursor: pointer;}

button.buttonAction5 {border: 1px solid var(--ar-red,#900); background-color: #fff; text-transform: uppercase; font-size: 11px; font-weight: bold; padding: 6px 20px; color: var(--ar-red,#900); margin: 0px 0 0 0px;}
button.buttonAction5:hover {background-color: var(--ar-red,#900); color: #fff; cursor: pointer;}

button.buttonEnter {width: 100%; padding: 20px; border: 2px solid var(--sr-color1,#0293d1); border-radius: 20px; background-color: #fff;}
button.buttonEnter:hover {background-color: #e1e1e1; cursor: pointer;}


/* FLEX AND 12-COLUMN GRID */
.flex-center { display:flex; gap:2em; align-items:center; }
.flex-end { display:flex; gap:2em; align-items:center; justify-content:end; }
.flex-space { display:flex; gap:2em; justify-content:space-between;align-items:center; flex-wrap: wrap; }
.grid-fill { display: grid; grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); gap: 1em; }
.grid-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); gap: 1em; }
.grid-12 { display: grid; grid-template-columns: repeat(12,1fr); column-gap: 2em; row-gap: 1.5em; }
.col-12 { grid-column: span 12; }
.col-11 { grid-column: span 11; }
.col-10 { grid-column: span 10; }
.col-9 { grid-column: span 9; }
.col-8 { grid-column: span 8; }
.col-7 { grid-column: span 7; }
.col-6 { grid-column: span 6; }
.col-5 { grid-column: span 5; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
.col-2 { grid-column: span 2; }
.col-1 { grid-column: span 1; }
@media screen and (max-width:900px) {
    /* remove any manual ordering */
    .grid-12 > * { order: 1 !important; }
    /* narrow columns become half-wide */
    .col-11, .col-10, .col-9, .col-8,
    .col-1,  .col-2,  .col-3, .col-4 { grid-column: span 6; }
}
@media screen and (max-width:768px) {
    /* squeeze gaps and let the flex wrap */
    .grid-12 { column-gap: 1em; }
    .flex-center,.flex-space { gap: 1em; flex-wrap: wrap; }
}
@media screen and (max-width:640px) {
    /* collapse grid columns */
    .grid-12 { grid-template-columns: 1fr; }
    .grid-12 > * { grid-column: 1; order: 1 !important;}
    /* collapse flex to a one-column grid */
    .flex-center, .flex-space { display: grid; grid-template-columns: 1fr; gap:1.5em;}
}

/* FORM STYLES */

select { padding: 0.5em 1em; border: 1px solid  var(--ar-ltgray,#000); }
textarea { padding: 0.5em 1em; min-height: 5em; border: 1px solid  var(--ar-ltgray,#000); }

.titleBlock {display: grid; grid-template-columns: 1fr 2fr; }
.titleBlockActions {text-align: right; align-self: center;}
.titleBlockActionsItem {font-weight: bold; margin: 0 20px; text-transform: uppercase; font-size: 14px;}

.holderForm {}
.formLayout5 {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-column-gap: 30px; width: 100%;}
.formLayout-1-1 {display: grid; grid-template-columns: 1fr 4fr; grid-column-gap: 30px; width: 100%;}
.formLayout-1-2 {display: grid; grid-template-columns: 1fr 2fr 2fr; grid-column-gap: 30px; width: 100%;}
.formLayout-2-1 {display: grid; grid-template-columns: 2fr 2fr 1fr; grid-column-gap: 30px; width: 100%;}
.formLayout-3-1-1 {display: grid; grid-template-columns: 3fr 1fr 1fr; grid-column-gap: 30px; width: 100%;}
.formLayout-3-1 {display: grid; grid-template-columns: 3fr 1fr; grid-column-gap: 30px; width: 100%;}
.formLayout-1-1-2-2 {display: grid; grid-template-columns: 1fr 1fr 2fr 2fr; grid-column-gap: 30px; width: 100%;}
.formLayout-1-1-1-3 {display: grid; grid-template-columns: 1fr 1fr 1fr 3fr; grid-column-gap: 30px; width: 100%;}
.formLayout-1-1-2 {display: grid; grid-template-columns: 1fr 1fr 3fr; grid-column-gap: 30px; width: 100%;}
.formLayout2 {display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 30px; width: 100%;}
.formLayout2-1-1 {display: grid; grid-template-columns: 2fr 1fr 1fr; grid-column-gap: 30px; width: 100%;}
.formLayout3 {display: grid; grid-template-columns: auto auto auto; grid-column-gap: 30px; width: 100%;}
.formLayout4 {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 30px; width: 100%;}
.formLayout5 {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-column-gap: 30px; width: 100%;}
.formLayout-1-2-1-1-2 {display: grid; grid-template-columns: 1fr 2fr 1fr 1fr 2fr; grid-column-gap: 30px; width: 100%;}

.formElementHolder {margin: 10px 0;}
.formLabel {font-size: 14px; font-weight: bold; margin: 0 0 5px 0; color: #666;}

input[type=text], input[type=password] { display: block; width:100%; padding: 1em; border: 1px solid #666; background: white; font-size: 1rem;}
textarea { display: block; width:calc(100% - 2em); padding: 1em; border: 1px solid #666; background: white; font-size: 1rem; height: 3ch; box-sizing: content-box; }


input.formInputText {font-size:16px; text-align:left; padding: 8px 10px; width: 90%; border: 1px solid  var(--ar-ltgray,#000);}
select.formInputSelect {font-size:16px; text-align:left; padding: 8px 10px; width: 90%; border: 1px solid  var(--ar-ltgray,#000);}

select.formSelect {font-size:16px; text-align:left; padding: 8px 10px; width: 200px; border: 1px solid  var(--ar-ltgray,#000); display: inline-block; margin: 0 0 0 20px;}

input.filterInput {font-size: 1rem; padding: 5px 10px;}

/* GLOBAL - LINKS */

a {color: var(--sr-color1,#566d9c); text-decoration: none;}
a:visited {color: var(--sr-color1,#566d9c); text-decoration: none;}
a:hover {color: var(--lc-black,#000); text-decoration: none;}

a.linkWhite {color: var(--lc-ltgray,#ccc); text-decoration: none;}
a:visited.linkWhite {color: var(--lc-ltgray,#ccc); text-decoration: none;}
a:hover.linkWhite {color: var(--lc-white,#fff); text-decoration: none;}

a.linkBlack {color: var(--lc-dkgray,#333); text-decoration: none;}
a:visited.linkBlack {color: var(--lc-dkgray,#333); text-decoration: none;}
a:hover.linkBlack {color: var(--lc-black,#000); text-decoration: none;}

a.linkBlockWhite {color: var(--lc-ltgray,#ccc); text-decoration: none; padding: 25px 30px 26px 30px;}
a:visited.linkBlockWhite {color: var(--lc-ltgray,#ccc); text-decoration: none;}
a:hover.linkBlockWhite {color: var(--lc-white,#fff); text-decoration: none; background-color: var(--lc-dkgray,#333);}

a.linkBlockBgWhite {color: var(--lc-ltgray,#ccc); text-decoration: none; padding: 25px 30px 26px 30px; background-color: var(--lc-dkgray,#333);}
a:visited.linkBlockBgWhite {color: var(--lc-ltgray,#ccc); text-decoration: none; background-color: var(--lc-dkgray,#333);}
a:hover.linkBlockBgWhite {color: var(--lc-white,#fff); text-decoration: none; background-color: #555;}

a.bluelink {color: var(--sr-color1,#566d9c); text-decoration: none;}
a:visited.bluelink {color: var(--sr-color1,#566d9c); text-decoration: none;}
a:hover.bluelink {color: var(--lc-black,#000); text-decoration: none;}

a.linkRed {color: #f00; text-decoration: none;}
a:visited.linkRed {color: #f00; text-decoration: none;}
a:hover.linkRed {color: #900; text-decoration: none;}

a.buttonlinkGreen {display: block; color: var(--white); text-transform: uppercase; text-decoration: none; background-color: var(--ar-green); width: 100%; text-align: center; padding: 14px 0; border: 2px solid var(--ar-green);}
a:visited.buttonlinkGreen {display: block; color: var(--white); text-transform: uppercase; text-decoration: none; background-color: var(--ar-green); width: 100%; text-align: center; padding: 14px 0; border: 2px solid var(--ar-green);}
a:hover.buttonlinkGreen {color: var(--white); background-color: var(--ar-dkgreen); cursor: pointer; border: 2px solid var(--ar-dkgreen);}

a.buttonlinkGreen2 { display: block; color: var(--ar-green); text-transform: uppercase; text-decoration: none; background-color: var(--white); width: 100%; text-align: center; padding: 14px 0; border: 2px solid var(--ar-green);}
a:visited.buttonlinkGreen2 {display: block; color: var(--ar-green); text-transform: uppercase; text-decoration: none; background-color: var(--white); width: 100%; text-align: center; padding: 14px 0; border: 2px solid var(--ar-green);}
a:hover.buttonlinkGreen2 {color: var(--white); background-color: var(--ar-dkgreen); cursor: pointer; border: 2px solid var(--ar-dkgreen);}

a.buttonWithIcon { display: flex; gap: 1em; width:100%; align-items: center; padding-inline: 2em; } 

.buttonGrid {display: grid; grid-template-columns: 80px auto;}
.buttonGrid-Icon {text-align: center;}
.buttonGrid-Label {text-align: left;}

.linkspace {margin: 0 10px;}

dialog { min-width: 20rem; max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); }
dialog[open] { display:grid; grid-template-rows: auto 1fr auto; row-gap:1em; min-width: 25em; min-height: 8em; }
dialog::backdrop { background: #0008; backdrop-filter: blur(3px); }
dialog h1 { margin:0; padding:0;}
dialog h2 { margin:0; padding:0;}
dialog .btn-close { font-size:1.5rem; cursor: pointer; background: transparent; color: black; border: 0; float: right; }


/* GLOBAL - HEADER */

/* ARI - TITLES & SECITONS */
.bgGray {background-color: #e1e1e1;}

button.buttonWhiteRed {background-color: #fff; border: 2px solid var(--ar-red); font-size: .8rem; font-weight: 600; text-transform: uppercase; width: 100%; text-align: center; padding: 8px 0; color: var(--ar-red);}
button.buttonWhiteRed:hover {background-color: var(--ar-red); color: #fff; cursor: pointer;}

.sectionTitle-holder {display: grid; grid-template-columns: auto auto; align-items: center; background-color: var(--black); padding: 5px 20px;}
.sectionTitle {font-size: 1rem; text-transform: uppercase;  color: #fff; font-weight: 600;}
.sectionSearch {text-align: right;}
.sectionHolder {margin: 20px 0;}
.sectionlabel {color: #fff; text-align: right;}

.title-all { }
.title-jacket { background: var(--bg-jackets); }
.title-cardigan { background: var(--bg-cardigans); }
.title-blanket { background: var(--bg-blankets); }
.title-patch { background: var(--bg-patches); }

.text-jacket { color: var(--bg-jackets); }
.text-cardigan { color: var(--bg-cardigans); }
.text-blanket { color: var(--bg-blankets); }
.text-patch { color: var(--bg-patches); }

.breadcrumbWrapper i {padding-inline: 5px;}

table.amosData {width:100%;}
table.amosData th {text-align: left; padding: 0px 10px 5px 10px; border-bottom: 4px solid var(--ar-blue); color: var(--ar-blue); font-weight: 600;}
table.amosData td {padding: 6px 10px; border-bottom: 2px dotted #ccc;}

/* ARI - QUICKSEARCH */
.quicksearchWrapper {width: 100%; margin: 120px 0 0 0; background-color: #e1e1e1; padding: 20px 2em;}
.quicksearchContainer { margin: 0 auto; display: grid; grid-template-columns: 300px 300px auto; grid-column-gap: 60px;}
.quicksearchTitle {font-size: 1rem; font-weight: 600; text-transform: uppercase; color: var(--ar-blue);}
.quicksearchInputs {display: grid; grid-template-columns: auto 40px; grid-column-gap: 10px; margin: 5px 0 0 0; align-items: center;}

input.inputSearch20 {font-size: 1rem; padding: 4px 10px; color: var(--black); width: 90%;}
.quicksearchButton {background-color: var(--ar-red); color: #fff; padding: 4px 0px; text-align: center;}

/* ARI - BREADCRUMB */
.breadcrumbWrapper {width: 94%; margin: 20px auto; font-size: 1rem; color: var(--ar-blue);}

/* ARI - DASHBOARD */
.dashboardWrapper {width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 50px; grid-row-gap: 30px;}

.dashboardStats {grid-column: 1 / 3; border: 4px solid var(--ar-blue);}
.dashboardStatsContainer {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 30px; align-items: center;}
.dashboardStatsHolder { text-align:center; display: grid; grid-template-columns: 150px auto; align-items: center;}
.dashboardStats-info {text-align: center;}
.dashboardStats-icon {font-size: 2.4rem; color: var(--ar-blue); text-align: center;}
.dashboardStats-title {font-size: .8rem; text-transform: uppercase; color: var(--ar-blue); font-weight: 600;}
.dashboardStats-number {font-size: 1.6rem; text-align: left;}
.dashboardStats-label {font-size: .8rem; text-align: left;}

.dashboardRightButtons {margin: 10px 0; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 10px;}

.schoolName {font-size: .8rem; font-style: italic; margin: 5px 0 0 0;}

.dataIcons {font-size: 1.2rem; display: flex; gap: 1em;}
.dataIcons a { }

/* ARI - ORDER DETAILS */
.orderWrapper {width: 100%; margin: 50px 0 0 0;}
.orderOverview-Container {width: 100%; display: grid; grid-template-columns: 1fr auto; grid-column-gap: 30px;}
.orderOverview-DataContainer {border: 4px solid var(--ar-blue); padding: 20px 30px; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 30px;}
.orderDetails-dataHolder {display: grid; grid-template-columns: 200px auto; grid-column-gap: 20px; margin: 5px 0;}
.orderDetails-dataLabel {font-weight: 600; }
.orderDetails-dataLabel2 {font-size: 1.4rem; color: #900; margin: 0 0 20px 0;}
.orderDetails-dataValue2 {font-size: 1.4rem; color: #900; margin: 0 0 20px 0;}
.orderDetails-buttonHolder {width: 100%; margin: 0 0 10px 0;}

.orderDetails-currentStatus {display: grid; grid-template-columns: 1fr auto; border-bottom: 2px dotted #ccc; padding: 0 0 10px 0; margin: 10px 0 0 0; align-items: center; font-size: 0.85rem; }
.orderDetails-currentStatus2 {display: grid; grid-template-columns: 1fr auto; border-bottom: 2px dotted #ccc; padding: 0 0 10px 0; margin: 10px 0 0 0; }
.orderDetails-currentStatus-value {text-align: right; background: black; color: white; padding: 0.5em; font-size: 1rem; }

.orderDetails-SlipContainer {width: 100%; display: grid; grid-template-columns: auto 400px; grid-column-gap: 60px; margin: 50px 0 0 0;}
.orderDetails-dataOverview {margin: 20px 0 0 20px;}

.layoutGrid-1-1 {width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 50px;}

/* NEW 2022 */

.wrapperLogin { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(90deg, #000 0%, #999 100%); }
.containerLogin { position: absolute; top: 50%; left: 50%; width: 90%; max-width: 600px; min-height: 600px; transform: translate(-50%, -50%); padding: 0 2rem; background: #FFF; color: #000; text-align: center; box-shadow: 5px 5px 20px #0004; }
.headerLogin { background: black; color: white; display: flex; justify-content: space-between; align-items: center; margin: 0 -2rem; padding: 0 2rem; } 
.headerLogin img { max-height: 60px; } 

.wrapperStickyHeader {position: fixed; top: 0; width:100%; z-index: 100;}

.pageWrapper { width:94%; margin-inline: auto; margin: 0 auto 100px auto; }

.wrapperHeader {width: 100%; display: grid; grid-template-columns: auto 200px; background-color: var(--ar-orange, #000);}
/*.headerLeft {display: grid; grid-template-columns: 80px auto; grid-column-gap: 0px; padding: 6px 0; }*/
.headerLeft {display: flex; padding: 6px 0; transition: .2s all;}
.headerLogo {text-align: left; align-self: center; margin-left: 20px; height: 60px; margin-right: 20px; transition: .2s all;}
img.imgLogo {height: 100%; transition: .2s all;}
.headerTitle {align-self: center; center; color: var(--lc-white, #fff);}
.headerTitle-B {font-size: 18px;}
.headerRight {text-align: right; align-self: center;}

.scrolled .headerLeft {}
.scrolled .headerLeft .headerLogo {height: 40px;}
.scrolled .headerTitle-A {display: none;}
.scrolled button.buttonProfile {padding: 20px 30px; }

.wrapperTopNav {width: 100%; display: grid; grid-template-columns: auto 200px; background-color: var(--ltblack);}
.navRight {text-align: right; align: right; align-self: right; }

.wrapperBreadCrumb {width: 100%; padding: 10px 1rem; border-bottom: 1px solid #e1e1e1;}
.wrapperBreadCrumb a {color: var(--sr-color1,#566d9c); text-decoration: none; margin: 0 1rem; font-size: 14px;}
.wrapperBreadCrumb a:visited {color: var(--sr-color1,#566d9c); text-decoration: none;}
.wrapperBreadCrumb a:hover {color: var(--lc-black,#000); text-decoration: none;}
.wrapperBreadCrumb span { margin: 0 1rem; font-size: 14px; }

.tableheader {font-weight: bold; font-size: 14px; text-transform: uppercase; margin: 0 0 10px 0;}

/* END */

.wrapper-header {width: 100%; background-color: var(--lc-black,#000);}
.header-left {float: left; margin: 0 0 0 50px;}
.header-right {float: right; margin: 32px 20px 0 0; font-size: 16px;}

.header-logo {float: left;}
.header-nav {float: left; margin: 34px 0 0 60px; font-size: 16px;}
.header-nav a {margin: 0 30px 0 0;}

/* NEW STUDENT VIEW */

ul.holderTeamGroup {margin: 0; padding: 0;}
li.teamgroup {display:block; float:left; font-size: 14px; text-decoration:none; padding:12px 20px; color: #fff;}

.schoolLogo {width: 60%; margin: 20px 0 0 0;}
.schoolLogo img {width: 100%;}

.imgJacket {width: 60%; margin: 0 auto;}
.imgJacket img {width: 100%; }

.imgJacket2 {width: 100%; margin: 0 auto;}
.imgJacket2 img {width: 100%; }

.imgJacket3 {width: 80%; margin: 0 auto;}
.imgJacket3 img {width: 100%; }

/* ENTER PAGE */

.wrapperEnterContent {width: 100%; background: var(--lc-white,#fff) url('../images/enter-bg.jpg') no-repeat top; min-height: 600px;}

.containerEnter {width: 80%; margin: 0 auto; padding:100px 0 0 0; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 50px;}

.columnEnter {align-self: center;}

.enterSchool {display: grid; grid-template-columns: 1fr 2fr;}
.enterLogo {width: 100%;}
.enterLogo img {width: 100%;}
.enterInfo {align-self: center;}
.enterSchoolName {font-size: 24px; font-weight: bold; text-transform: uppercase;}
.enterSchoolTeam {font-size: 18px; font-style: italic;}

.enterAltText {margin: 50px auto; text-align: center; font-weight: bold; font-style: italic;}

/* STYLES - DASHBAORD */

.dashboard-containerLookUp {width: 96%; margin: 30px auto 0 auto; border: 1px solid #369; padding: 20px 0;}
.dashboard-containerOverview {width: 96%; margin: 30px auto 0 auto; border: 1px solid #369; padding: 20px 0;}
.dashboard-holderOverview {width: 96%; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 120px; margin: 0px 0 0 0px;}
.holderLookup {width: 96%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 50px; margin: 20px 0 0 30px;}
.dashboard-wrapper {width: 96%; margin: 30px auto 0 auto; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 50px;}
.dashboard-containerAMOS {border: 1px solid #369; padding: 20px 30px; min-height: 800px;}
.dashboard-containerSALES {border: 1px solid #369; padding: 20px 30px; min-height: 800px;}

.containerActiveOrders {width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 30px; margin: 10px 0 0 30px;}

.holderTitleDate {width: 100%; display: grid; grid-template-columns: auto auto; align-items: middle;}
.dateToday {font-size: 16px; font-weight: 400; margin: 0 0 0 20px; text-align: right; color: var(--ar-red);}
.holderChart {width: 100%;}
.numberCurrent {font-family: 'Source Sans Pro', trebuchet ms, arial, verdana, sans-serif; font-weight: 600; margin: 0 0 0 20px; font-style: normal;}
.linkDetails {margin: 0 0 0 20px; vertical-align: middle; font-size: 12px; font-style: normal; font-family: 'Source Sans Pro', trebuchet ms, arial, verdana, sans-serif;}

.container2Col {display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 20px;}

.containerTopAccounts {width: 100%; margin: 30px 0;}
.accountRow {width: 100%; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; grid-column-gap: 20px;}

.holderMetric {margin: 20px 0 10px 0;}

.containerDashboard {width: 100%; display: grid; grid-template-columns: auto 300px; grid-column-gap: 50px;  align-items: stretch;}

.dashboardMain {align-self: stretch; min-height: 50vh; margin: 40px;}
.containerDashboard-Charts {width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 50px;}
.containerDashboard-Top10 {width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 100px; margin: 50px 0 0 0;}

.dashboardSidebar {align-self: stretch; border-left: 1px solid #DDD; padding: 0 50px; font-size: .9rem;}

/* GLOBAL - LOGIN */

.m-front-login {position: absolute; width: 100%; margin: 200px auto 0 auto; text-align: center;}
.m-login-title {color: var(--lc-black,#000); font-size: 24px; font-weight: 300; letter-spacing: 5px; text-transform: uppercase;}
.m-login-form {width: 100%; margin: 10px 0 0 0;}
.login-input-text {font-size: 14px; color: #777; padding: 10px 10px; width: calc(100% - 100px); text-align: center;}
button.input-submit-med {width: calc(100% - 80px); margin: 0 0 0 0; background-color: var(--lc-black,#000); color: var(--lc-white,#fff); font-size: 14px; text-transform: uppercase; padding: 10px 0;}


/* GLOBAL - FOOTER */

.wrapper-footer {position: sticky; z-index: 100; bottom: 0;width: 100%; background-color: var(--lc-black,#000); padding: 10px 0; display: grid; grid-template-columns: 1fr 1fr;}
.footer-logo {margin: 0 50px 0 0; text-align: right; align-self: center;}
.footer-logo img {width: 40px;}
.copyright {color: var(--lc-ltgray,#ccc); font-size: 14px; margin: 0 0 0 50px; align-self: center; text-align: left; text-transform: uppercase;}

/* GLOBAL - LAYOUT */

.containerGeneral {width: 100%; display: grid; grid-template-columns: auto 300px; grid-column-gap: 50px;  align-items: stretch;}

.generalMain {align-self: stretch; min-height: 50vh; margin: 40px;}	
.generalSidebar {align-self: stretch; border-left: 1px solid #DDD; padding: 0 50px; font-size: .9rem;}

.wrapper-content {width: 100%; background: var(--lc-white,#fff) url('/images2020/content-bg.jpg') no-repeat bottom; }
.container-content {width: 90%; padding: 20px 0; margin: 0 auto; min-height: 900px;}
.playlist-container-content {width: 90%; padding: 20px 0; margin: 0 auto; min-height: 900px;}

.content {font-size: 16px; margin: 20px 0;}

.content-left {width: 46%; float: left;}
.content-right {width: 46%; float: right; text-align: left;}



/* Drop-down menus */
#dropmenu, #dropmenu ul {
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    font-weight:bold;
    z-index: 6000;
}
#dropmenu a {
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
}

#dropmenu li a.linkTopNav{display:block; float:left; font-size: 14px; text-transform: uppercase; text-decoration:none; padding:12px 20px; cursor:pointer;}


#dropmenu li a.linkTopNav {}

#dropmenu li:hover a.linkTopNav, #dropmenu a:hover.linkTopNav {background-color: var(--ar-ltgray,#FF9900); color: var(--lc-black,#000);}


#dropmenu li {
    float:left;
    position:relative;
    display:block;
}
#dropmenu ul {
    position:absolute;
    display:none;
    height:auto;
    border-bottom:2px solid #000;
}
#dropmenu ul a {
    color:#000;
    padding:0px;
    font-weight: bold;
    text-transform: uppercase;
}
#dropmenu ul a:hover {
    background-color: var(--ar-midgray,#FF9900);
}
#dropmenu li ul {
    background-color: var(--ar-ltgray,#FF9900);
    top:42px;
    float: left;
    padding: 0px;
    margin: 0px;
    width: 330px;
    border-right:0px solid #fff;
    border-left:0px solid #fff;
    border-bottom: 5px solid #000;
    opacity: 1;
}

#dropmenu li ul li.current_page_item a {
    background:#fff;
    color:#369;
}

#dropmenu li ul li {
    border-top:0px solid #fff;
}

#dropmenu li ul a {
    width:300px;
    padding:10px 10px 10px 20px;
    font-size: 14px;
    text-transform: uppercase;
    float:left;
    font-weight: bold;
}

#dropmenu li ul a:hover {
    color: #000;
}

#dropmenu ul ul {
    top:auto;
}
#dropmenu li ul ul {
    left:175px;
    margin:0px 0 0 10px;
}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {
    display:none;
}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {
    display:block;
}


@media screen and (min-width: 0px) and (max-width: 1400px) {

    @media screen and (min-width: 1200px) and (max-width: 1400px) {

	.wrapper-front-slider {display: none;}
	.m-wrapper-front-slider {width: 100%;}
	.m-wrapper-front-slider img {width: 100%;}
	
	.m-wrapper-watch-eventbanner {display: none;}
	.m-holder-eventbanner-text {display: none;}
    }
    
    @media screen and (min-width: 1024px) and (max-width: 1199px) {

	.wrapper-front-slider {display: none;}
	.m-wrapper-front-slider {width: 100%;}
	.m-wrapper-front-slider img {width: 100%;}
	
	.wrapper-watch-eventbanner {display: none;}
	.m-wrapper-watch-eventbanner {width: 100%;}
	.m-wrapper-watch-eventbanner img {width: 100%;}
	.m-eventbanner-welcome {float: left; }
	.m-eventbanner-code {float: right; }
	
	.watch-toplink-right {width: 45%; text-align: right;}
	.watch-toplink-left {width: 45%;}
	
	.watch-sect1-left {width: 100%;}
	.watch-sect1-right {width: 100%; min-height: 100px;}
	
	.holder-watch-sponsorbanner {display: none;}
	

    }
    
    @media screen and (min-width: 768px) and (max-width: 1023px) {
	
	.wrapper-front-slider {display: none;}
	.m-wrapper-front-slider {width: 100%;}
	.m-wrapper-front-slider img {width: 100%;}
	
	.header-nav {display: none;}
	
	.holder-columns {margin: 80px auto; width: 92%;}
	.front-column-two {width: 100%; text-align: left;}
	.front-column-one {width: 100%; text-align: left;}
	.front-column-two-left {float: left; width: 45%; }
	.front-column-two-right {float: left; width: 45%; margin-left: 10%;}
	.front-column-title {font-size: 24px; color: #555; width: 100%; border-bottom: 1px solid var(--lc-dkgray,#333); padding: 0 0 15px 0;}
	.front-column-title-word {margin: 6px 0 0 15px;}
	.front-questions ul {list-style-type: none; margin: 0; padding: 0;}
	.front-questions ul li {margin: 10px 0 0px 0; padding: 0px 0 10px 0; border-bottom: 2px dotted #e1e1e1; font-size: 18px; font-weight: 300;}
	.front-questions ul li a {color: var(--lc-ltblue,#61bdd9); text-decoration: none;}
	.front-questions ul li a:visited {color: var(--lc-ltblue,#61bdd9); text-decoration: none;}
	.front-questions ul li a:hover {color: var(--lc-dkgray,#333); text-decoration: none;}
	
	.wrapper-watch-eventbanner {display: none;}
	.m-wrapper-watch-eventbanner {width: 100%;}
	.m-wrapper-watch-eventbanner img {width: 100%;}
	.m-eventbanner-welcome {float: left; }
	.m-eventbanner-code {float: right; }
	
	.watch-toplink-right {width: 45%; text-align: right;}
	.watch-toplink-left {width: 45%;}
	
	.watch-sect1-left {width: 100%;}
	.watch-sect1-right {width: 100%; min-height: 100px;}
	
	.addvid-holder2 {width: 40%; max-width: 240px; display: inline-block; margin: 20px; vertical-align: top; text-align: left !important;}
	
	.holder-watch-sponsorbanner {display: none;}

	@media screen and (min-width: 768px) and (max-width: 1023px) {
	    
	    
	    
	}
	
	@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
	    
	    
	    
	}

    }
    
    @media screen and (min-width: 481px) and (max-width: 767px) {
	
	.wrapper-front-slider {display: none;}
	.m-wrapper-front-slider {width: 100%;}
	.m-wrapper-front-slider img {width: 100%;}
	
	.header-logo {width: 160px; padding: 10px 0;}
	.header-logo img {width: 100%; margin: 0 0 0 0;}
	.header-nav {display: none;}
	.header-left {margin: 0 0 0 20px;}
	.header-right {font-size: 12px; margin: 30px 5px 0 0;}
	
	.holder-columns {margin: 80px auto; width: 92%;}
	.front-column-two {width: 100%; text-align: left;}
	.front-column-one {width: 100%; text-align: left;}
	.front-column-two-left {float: left; width: 45%; }
	.front-column-two-right {float: left; width: 45%; margin-left: 10%;}
	.front-column-title {font-size: 24px; color: #555; width: 100%; border-bottom: 1px solid var(--lc-dkgray,#333); padding: 0 0 15px 0;}
	.front-column-title-word {margin: 6px 0 0 15px;}
	.front-questions ul {list-style-type: none; margin: 0; padding: 0;}
	.front-questions ul li {margin: 10px 0 0px 0; padding: 0px 0 10px 0; border-bottom: 2px dotted #e1e1e1; font-size: 18px; font-weight: 300;}
	.front-questions ul li a {color: var(--lc-ltblue,#61bdd9); text-decoration: none;}
	.front-questions ul li a:visited {color: var(--lc-ltblue,#61bdd9); text-decoration: none;}
	.front-questions ul li a:hover {color: var(--lc-dkgray,#333); text-decoration: none;}
	
	.wrapper-watch-eventbanner {display: none;}
	.m-wrapper-watch-eventbanner {width: 100%;}
	.m-wrapper-watch-eventbanner img {width: 100%;}
	.m-eventbanner-welcome {display: block;}
	.m-eventbanner-code {display: block; }
	
	.watch-toplink-right {width: 45%; text-align: right;}
	.watch-toplink-left {width: 45%;}
	
	.watch-sect1-left {width: 100%;}
	.watch-sect1-right {width: 100%; min-height: 100px;}
	
	.addvid-holder2 {width: 90%; max-width: 300px; display: inline-block; margin: 20px; vertical-align: top; text-align: left !important;}
	
	.holder-watch-sponsorbanner {display: none;}
	
    }
    
    @media screen and (min-width: 0px) and (max-width: 480px) {
	
	.wrapper-front-slider {display: none;}
	.m-wrapper-front-slider {width: 100%;}
	.m-wrapper-front-slider img {width: 100%;}
	
	.holder-columns {margin: 80px auto; width: 92%;}
	.front-column-two {width: 100%; text-align: left;}
	.front-column-one {width: 100%; text-align: left;}
	.front-column-two-left {float: left; width: 45%; }
	.front-column-two-right {float: left; width: 45%; margin-left: 10%;}
	.front-column-title {font-size: 24px; color: #555; width: 100%; border-bottom: 1px solid var(--lc-dkgray,#333); padding: 0 0 15px 0;}
	.front-column-title-word {margin: 6px 0 0 15px;}
	.front-questions ul {list-style-type: none; margin: 0; padding: 0;}
	.front-questions ul li {margin: 10px 0 0px 0; padding: 0px 0 10px 0; border-bottom: 2px dotted #e1e1e1; font-size: 18px; font-weight: 300;}
	.front-questions ul li a {color: var(--lc-ltblue,#61bdd9); text-decoration: none;}
	.front-questions ul li a:visited {color: var(--lc-ltblue,#61bdd9); text-decoration: none;}
	.front-questions ul li a:hover {color: var(--lc-dkgray,#333); text-decoration: none;}
	
	.wrapper-watch-eventbanner {display: none;}
	.m-wrapper-watch-eventbanner {width: 100%;}
	.m-wrapper-watch-eventbanner img {width: 100%;}
	.m-eventbanner-welcome {display: block;}
	.m-eventbanner-code {display: block; }
	
	.holder-watch-sponsorbanner {display: none;}
        
    }
    
}

@media screen and (min-width: 1401px) {

    .wrapper-front-slider {display: none;}

    .m-wrapper-front-slider {width: 100%;}
    .m-wrapper-front-slider img {width: 100%;}
    
    .m-wrapper-watch-eventbanner {display: none;}
    .m-holder-eventbanner-text {display: none;}
    
}