@charset 'utf-8';
.activityHolder {
    height: 85%;
}

#buttonsHolder {
    height: 10%;
}

#dialog-addToTab, #dialog-editMyTabs {
    display: none;
}

#dialog-editMyTabs {
    overflow-x: hidden;
}


/*TABS
*/

.tabs {
    position: relative;
    float: none;
    height: 100%;
    list-style: none;
    text-align: left;
}

.tabs li {
    display: block;
    float: left;
    height: 100%;
    margin: 0 1px;
}

.tabs input[type='radio'] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.tabs label {
    font-size: 1em;
    font-weight: normal;
    position: relative;
    top: 4px;
    display: block;
    height: 5%;
    padding: .8em .4em;
    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    border-radius: 5px 5px 0 0;
    /*  text-transform: uppercase;
*/
    background: #3c7894;
}

.tabs label:hover {
    background: #76a0b4;
}

.tabs .tab-content {
    position: absolute;
    z-index: 2;
    top: 7%;
    left: 0;
    display: none;
    width: 95%;
    height: 81%;
    /* overflow: hidden; */
    /* width: 100%; */
    /* font-size: 17px; */
    /* line-height: 25px; */
    padding: 3%;
    border: 1px solid #264c5e;
    background: #fff;
    /* min-height: 100%; */
}

.tabs [id^='tab']:checked + label {
    top: 0;
    padding-top: 0.4em;
    color: #fff;
    background: #264c5e;
    /* border-bottom: 1px solid #264c5e; */
}

.tabs [id^='tab']:checked ~ [id^='tab-content'] {
    display: block;
}

p.link {
    clear: both;
    margin: 380px 0 0 15px;
}

p.link a {
    display: inline-block;
    margin: 0 5px;
    padding: 5px 10px;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    background-color: #612e76;
}

p.link a:hover {
    background-color: #522764;
}


/*TAB CONTENT*/

.tabText {
    position: relative;
    margin-bottom: .5em;
    padding-right: 24px;
    border: 1px dotted #3c7894;
}

button.removeThisTextBtn {
    position: absolute;
    top: 50%;
    right: .5%;
    width: 22px;
    height: 22px;
    margin-top: -11px;
}


/*EDIT TABS*/

#addNewTabBtn {
    width: auto;
}

#dialog-editMyTabs p {
    line-height: 2em;
    margin-bottom: .5em;
}

.editTabNameArea {
    display: inline-block;
    width: 86%;
    height: 2em;
    margin: 1% 7%;
}

.editTabNameArea label {
    line-height: 2em;
    position: relative;
    width: 5em;
    vertical-align: middle;
    /* padding: 1px; */
}

.editTabNameArea input {
    /* left: 6em; */
    width: 85%;
    height: 1.6em;
    /* position: absolute; */
}

.removeThisTabBtn, .removeThisTextBtn {
    position: relative;
    /* right: 0; */
    float: right;
}

.removeThisTabBtn:disabled {
    display: none;
}


/*ADD SELECTION TO TAB DIALOG*/

.addToTabBtn {
    width: 100% !important;
}

#selectionWarning {
    display: none;
}


/* ----------- Large Display ----------- */

@media screen and (min-width: 1920px) and (min-height: 1080px) {
    /* Styles */
}


/* ----------- Laptop HiDPI screen ----------- */

@media screen and (min-width: 1440px) and (min-height: 900px) {
    /* Styles */
}


/* ----------- Laptop ----------- */

@media screen and (min-width: 1366px) and (min-height: 768px) {
    /* Styles */
    .activityHolder {
    height: 88%;
}
.buttonsHolder {
    text-align: center;
    height: 10%;
}
#tabsHolder {
    
    height: 95%;
    }
#notesHolder {
    
    height: 99%;
    }
    .tabs label {
        padding: .5em .4em;
    }
    .tabs [id^='tab']:checked + label {
        padding-top: 0.55em;
    }
}


/* ----------- Laptop MDPI screen ----------- */

@media screen and (min-width: 1280px) and (min-height: 800px) {
    /* Styles */
}


/* ----------- iPad ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* Styles */
}


/* ----------- iPhone 5 ----------- */

@media only screen and (min-device-width: 568px) and (min-device-height: 320px) {
    /* Styles */
}